/* =============================================================
   File: assets/css/home.css
   Pienaar Group — HOME PAGE ONLY. Loaded after site.css by
   index.html and by no other page (Home rebuild, 26 Sep 2026).

   Every rule is scoped to .page-home or to h-* classes that only
   index.html uses, so Group, Property, Markets, Investments,
   Governance, Contact and the legal pages are untouched.

   Section architecture follows the management-approved mock-up
   (26 Sep 2026): hero slider · three themes · ivory editorial ·
   closing photograph · five-column footer.

   Contents
     HERO SLIDER · PRIVATE ACCESS · THREE THEMES · IVORY EDITORIAL ·
     CLOSING PHOTOGRAPH · FOOTER · RESPONSIVE
   ============================================================= */

.page-home { --h-interval: 7s; }

.h-visually-hidden {
    position: absolute !important; width: 1px; height: 1px;
    margin: -1px; padding: 0; overflow: hidden;
    clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

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

/* Editorial link used below the hero: small caps, gold arrow. */
.h-link {
    display: inline-flex;
    align-items: center;
    gap: var(--s2);
    min-height: 44px;
    font-family: var(--sans);
    font-weight: 600;
    font-size: var(--fs-button);
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--white-soft);
    background: linear-gradient(var(--gold), var(--gold)) 0 calc(100% - 10px) / 0 1px no-repeat;
    transition: color var(--dur) var(--ease), background-size var(--dur) var(--ease);
}
.h-link svg { width: 16px; height: 16px; flex: none; color: var(--gold); transition: transform var(--dur) var(--ease); }
.h-link:hover { color: var(--white); background-size: 100% 1px; }
.h-link:hover svg { transform: translateX(3px); }


/* ############################################################
   HERO — three photographs, one stable message
   ############################################################ */

.page-home .h-hero {
    min-height: max(100svh, 640px);
    align-items: center;
    background: var(--black);
}

/* The photographs sit behind everything in the hero. */
.h-slides { position: absolute; inset: 0; z-index: -2; overflow: hidden; background: var(--black); }
.h-slide {
    position: absolute; inset: 0;
    opacity: 0;
    visibility: hidden;
    transition: opacity 1200ms var(--ease), visibility 0s linear 1200ms;
}
.h-slide.is-current { opacity: 1; visibility: visible; transition-delay: 0s, 0s; }
.h-slide picture, .h-slide img { position: absolute; inset: 0; width: 100%; height: 100%; }
.h-slide img { object-fit: cover; }

/* Per-photograph art direction (desktop / landscape).
   Elephants: the herd lies along the lower third, so the frame is held
   low enough to keep every head and the waterline in view.
   Giraffes: both heads are right of centre; keep the upper frame.
   Misty hills: a 16:9 frame, shown whole; the pair sit centre-right. */
.h-slide[data-slide="elephants"] img { object-position: 50% 62%; }
.h-slide[data-slide="giraffes"]  img { object-position: 60% 30%; }
.h-slide[data-slide="elephants-mist"] img { object-position: 50% 50%; }

/* Shade on the copy side only; the right of the frame stays clear. */
.page-home .h-hero::before {
    pointer-events: none;
    background:
        linear-gradient(90deg, rgba(9,12,14,.78) 0%, rgba(9,12,14,.56) 24%, rgba(9,12,14,.18) 44%, rgba(9,12,14,0) 60%),
        linear-gradient(180deg, rgba(9,12,14,.55) 0%, rgba(9,12,14,0) 18%, rgba(9,12,14,0) 74%, rgba(9,12,14,.62) 100%);
}

/* Brighter frames get a little more shade behind the copy, so the
   copy never has to move or change colour between slides. */
.h-slide::after { content: ""; position: absolute; inset: 0; pointer-events: none; }
.h-slide[data-slide="giraffes"]::after {
    background: linear-gradient(90deg, rgba(9,12,14,.34) 0%, rgba(9,12,14,.22) 30%, rgba(9,12,14,0) 52%);
}
.h-slide[data-slide="elephants-mist"]::after {
    background: linear-gradient(90deg, rgba(9,12,14,.42) 0%, rgba(9,12,14,.28) 30%, rgba(9,12,14,0) 54%);
}

/* The copy block: fixed position, so nothing jumps between slides.
   Held a little above centre to stay over sky and horizon. */
.page-home .hero-inner {
    padding: calc(var(--header-h) + var(--s5)) var(--edge) calc(var(--s10) + var(--s8));
    pointer-events: none;
}
.page-home .hero-inner > * { pointer-events: auto; }
.page-home .hero-inner > .hero-title,
.page-home .hero-inner > .hero-lead { text-shadow: 0 1px 18px rgba(9,12,14,.35); }

.page-home .hero-title {
    margin-top: 0;
    font-size: clamp(2.5rem, 1rem + 2.75vw, 4.25rem);
    line-height: 1.06;
}
.page-home .hero-inner > * { max-width: 620px; }
.page-home .hero .gold-rule { width: 44px; margin-top: var(--s6); }

/* The one hero action (mock-up): a fine gold outline, gold label. */
.h-btn-outline {
    display: inline-flex;
    align-items: center;
    gap: var(--s3);
    min-height: 50px;
    padding: 0 var(--s4);
    border: 1px solid var(--gold);
    background: rgba(9, 12, 14, 0.18);
    font-family: var(--sans);
    font-weight: 600;
    font-size: var(--fs-button);
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--gold-champ);
    transition: background-color 220ms var(--ease), color 220ms var(--ease), border-color 220ms var(--ease);
}
.h-btn-outline svg { width: 18px; height: 18px; flex: none; }
.h-btn-outline:hover { background: rgba(183, 154, 90, 0.16); border-color: var(--gold-champ); color: var(--white); }
.h-btn-outline:active { background: var(--gold); color: #0E1113; }
/* A slightly shorter line keeps the lead clear of the animals on
   laptop widths, where the frame is proportionally closer. */
.page-home .hero-lead { max-width: 29em; font-size: 1.0625rem; }

/* --- Controls (mock-up): 01 02 03 centred at the foot of the
       photograph, previous / next at the right. --- */
.h-controls {
    position: absolute;
    left: 0; right: 0;
    bottom: var(--s5);
    z-index: 3;
    max-width: var(--max);
    margin-inline: auto;
    padding-inline: var(--edge);
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}
.h-controls > * { pointer-events: auto; }
.h-steppers {
    position: absolute;
    right: var(--edge);
    display: flex; align-items: center; gap: var(--s1);
}
.h-dots { display: flex; align-items: center; gap: var(--s3); }

.h-dot {
    position: relative;
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 7px;
    min-width: 44px;
    min-height: 48px;
    padding: 0 2px;
    background: none;
    border: 0;
    font-family: var(--sans);
    font-weight: 500;
    font-family: var(--serif);
    font-size: 1.1875rem;
    letter-spacing: 0.06em;
    color: var(--white-soft);
    cursor: pointer;
    transition: color var(--dur-quick) var(--ease);
}
.h-dot span { line-height: 1; }
.h-dot i {
    position: relative;
    display: block;
    width: 100%; height: 1px;
    background: rgba(243, 240, 234, 0.24);
    overflow: hidden;
}
.h-dot i::after {
    content: "";
    position: absolute; inset: 0;
    background: var(--gold-champ);
    transform: scaleX(0);
    transform-origin: left;
}
.h-dot:hover { color: var(--white); }
.h-dot[aria-current="true"] { color: var(--white); }

/* The current number's line fills over the interval. */
.h-dot[aria-current="true"] i::after { animation: h-progress var(--h-interval) linear forwards; }
@keyframes h-progress { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.h-carousel.is-paused  .h-dot[aria-current="true"] i::after { animation-play-state: paused; }
.h-carousel.is-stopped .h-dot[aria-current="true"] i::after { animation: none; transform: scaleX(1); }

.h-arrow, .h-pause {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px; height: 44px;
    padding: 0;
    background: none;
    border: 1px solid transparent;
    color: var(--white);
    cursor: pointer;
    transition: border-color var(--dur-quick) var(--ease), color var(--dur-quick) var(--ease);
}
.h-arrow svg { width: 22px; height: 22px; }
.h-pause svg { width: 14px; height: 14px; }
.h-arrow:hover, .h-pause:hover { border-color: var(--line-gold); color: var(--white); }
.h-pause { margin-left: var(--s1); border-left-color: var(--line-dark); }
.h-pause:hover { border-left-color: var(--line-gold); }
.h-pause .i-play { display: none; }
.h-carousel.is-stopped .h-pause .i-play { display: block; }
.h-carousel.is-stopped .h-pause .i-pause { display: none; }

.h-dot:focus-visible, .h-arrow:focus-visible, .h-pause:focus-visible {
    outline: 1px solid var(--gold-champ);
    outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
    .h-slide { transition-duration: 1ms; }
    .h-dot[aria-current="true"] i::after { animation: none; transform: scaleX(1); }
}


/* ############################################################
   PRIVATE ACCESS — Home only (brief §14–15)
   Default: near-black, fine antique-gold edge, gold lock, light text.
   Hover: a matte antique → champagne → antique fill fades in.
   Pressed / tapped: solid gold, near-black label and lock.
   ############################################################ */

.page-home .nav a.private-access,
.page-home .header-access {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    background: #0B0E10;
    background-image: none;
    border: 1px solid rgba(183, 154, 90, 0.72);
    color: var(--white);
    transition: color 220ms var(--ease), border-color 220ms var(--ease), box-shadow 220ms var(--ease);
}
.page-home .nav a.private-access svg,
.page-home .header-access svg { color: var(--gold); transition: color 220ms var(--ease); }

.page-home .nav a.private-access::before,
.page-home .header-access::before {
    content: "";
    position: absolute; inset: 0; z-index: -1;
    background: linear-gradient(100deg, #9A7D45 0%, #B39656 26%, #CDB982 50%, #B39656 74%, #9A7D45 100%);
    opacity: 0;
    transition: opacity 220ms var(--ease);
}

.page-home .nav a.private-access:hover,
.page-home .header-access:hover,
.page-home .nav a.private-access:focus-visible,
.page-home .header-access:focus-visible {
    background: #0B0E10;
    border-color: #C2A96E;
    color: #0E1113;
}
.page-home .nav a.private-access:hover::before,
.page-home .header-access:hover::before,
.page-home .nav a.private-access:focus-visible::before,
.page-home .header-access:focus-visible::before { opacity: 1; }
.page-home .nav a.private-access:hover svg,
.page-home .header-access:hover svg,
.page-home .nav a.private-access:focus-visible svg,
.page-home .header-access:focus-visible svg { color: #0E1113; }

/* Clicked / tapped: unmistakably gold, held until the next page loads
   (.is-engaged is set by home.js on press). */
.page-home .nav a.private-access:active,
.page-home .header-access:active,
.page-home .nav a.private-access.is-engaged,
.page-home .header-access.is-engaged {
    background: #0B0E10;
    border-color: #D1BC82;
    color: #0E1113;
    box-shadow: inset 0 0 0 1px rgba(209, 188, 130, 0.55);
}
.page-home .nav a.private-access:active::before,
.page-home .header-access:active::before,
.page-home .nav a.private-access.is-engaged::before,
.page-home .header-access.is-engaged::before {
    opacity: 1;
    background: linear-gradient(100deg, #A68A4E 0%, #BEA266 40%, #C9B37C 60%, #A68A4E 100%);
}
.page-home .nav a.private-access:active svg,
.page-home .header-access:active svg,
.page-home .nav a.private-access.is-engaged svg,
.page-home .header-access.is-engaged svg { color: #0E1113; }

.page-home .nav a.private-access:focus-visible,
.page-home .header-access:focus-visible {
    outline: 2px solid var(--gold-champ);
    outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
    .page-home .nav a.private-access, .page-home .header-access,
    .page-home .nav a.private-access::before, .page-home .header-access::before { transition-duration: 1ms; }
}


/* ############################################################
   THREE THEMES — mock-up: dark band, gold numerals, tracked
   capital titles, short gold link bars, fine gold dividers
   ############################################################ */

.h-pillars {
    background: var(--black-deep);
    border-top: 1px solid var(--line-gold-2);
    padding-block: clamp(var(--s6), 1.5rem + 2.4vw, var(--s9));
}

.h-pillar-list {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.h-pillar {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding-inline: clamp(var(--s5), 1rem + 2.6vw, 88px);
    border-left: 1px solid var(--line-gold);
}
.h-pillar:first-child { padding-left: 0; border-left: 0; }
.h-pillar:last-child  { padding-right: 0; }

.h-num {
    font-family: var(--sans);
    font-weight: 500;
    font-size: var(--fs-label);
    letter-spacing: 0.2em;
    color: var(--gold);
    line-height: 1;
}

.h-pillar h3 {
    margin-top: var(--s3);
    font-family: var(--serif);
    font-weight: 400;
    font-size: clamp(1.0625rem, 0.8rem + 0.5vw, 1.4375rem);
    letter-spacing: 0.2em;
    text-transform: uppercase;
    line-height: 1.3;
    color: var(--white);
}
.h-pillar p {
    margin-top: var(--s3);
    max-width: 19em;
    font-size: clamp(1.0625rem, 0.9rem + 0.35vw, 1.3125rem);
    line-height: 1.45;
    color: var(--white);
    text-wrap: pretty;
}

.h-link {
    display: inline-flex;
    align-items: center;
    gap: var(--s3);
    min-height: 44px;
    margin-top: auto;
    padding-top: var(--s4);
    padding-bottom: 10px;
    font-family: var(--sans);
    font-weight: 600;
    font-size: var(--fs-button);
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--gold-champ);
    background: linear-gradient(var(--gold), var(--gold)) 0 100% / 34px 2px no-repeat;
    transition: color var(--dur) var(--ease), background-size var(--dur) var(--ease);
}
.h-link svg { width: 18px; height: 18px; flex: none; color: var(--gold-champ); transition: transform var(--dur) var(--ease); }
.h-link:hover { color: var(--white); background-size: 100% 2px; }
.h-link:hover svg { transform: translateX(3px); }


/* ############################################################
   IVORY EDITORIAL — mock-up: ivory text field ~41%, Union
   Buildings photograph ~59%, caption set beneath at the right
   ############################################################ */

.h-editorial {
    display: grid;
    grid-template-columns: minmax(0, 41fr) minmax(0, 59fr);
    background: var(--ivory);
    color: var(--ink);
}

.h-editorial-copy {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    padding: var(--s8) clamp(var(--s6), 1rem + 3vw, var(--s9)) var(--s8) max(var(--edge), calc((100vw - var(--content)) / 2));
}
.h-editorial-copy .label { color: var(--ink-soft); }
.h-editorial-copy .gold-rule { margin: var(--s4) 0 var(--s5); width: 36px; background: var(--gold); }
.h-editorial-copy .h2 {
    max-width: 10em;
    font-size: clamp(2.375rem, 1rem + 2.4vw, 3.75rem);
    line-height: 1.08;
    color: var(--ink);
}
.h-editorial-copy p {
    max-width: 26em;
    margin-top: var(--s5);
    font-size: clamp(1rem, 0.9rem + 0.25vw, 1.1875rem);
    line-height: 1.65;
    color: var(--ink-soft);
    text-wrap: pretty;
}
.h-editorial-copy .text-link {
    margin-top: var(--s6);
    color: var(--ink);
    padding-bottom: 10px;
    background: linear-gradient(var(--gold), var(--gold)) 0 100% / 100% 2px no-repeat;
}
.h-editorial-copy .text-link svg { width: 18px; height: 18px; }

.h-editorial-media { margin: 0; display: flex; flex-direction: column; }
.h-editorial-frame {
    position: relative;
    overflow: hidden;
    aspect-ratio: 7 / 4;
    background: var(--charcoal);
}
.h-editorial-frame picture, .h-editorial-frame img { position: absolute; inset: 0; width: 100%; height: 100%; }
/* Cupola to balustrade: the frame keeps the tower whole. */
.h-editorial-frame img { object-fit: cover; object-position: 50% 15%; }
.h-editorial-media figcaption {
    padding: var(--s2) var(--edge) var(--s2) 0;
    text-align: right;
    font-family: var(--sans);
    font-weight: 500;
    font-size: 0.625rem;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--ink-quiet);
}


/* ############################################################
   CLOSING PHOTOGRAPH — the existing approved image (locked).
   Mock-up: a full-width band, words low on the left.
   ############################################################ */

.h-closing {
    position: relative;
    isolation: isolate;
    display: flex;
    align-items: flex-end;
    min-height: clamp(480px, 36vw, 760px);
    overflow: hidden;
    background: var(--black-deep);
}
.h-closing-media, .h-closing-media picture, .h-closing-media img { position: absolute; inset: 0; width: 100%; height: 100%; }
.h-closing-media { z-index: -2; }
/* Framed on the sun and the impala, with enough dark grass beneath
   their feet that the words sit below the animals, not over them. */
.h-closing-media img { object-fit: cover; object-position: 50% 68%; }

.h-closing::before {
    content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background:
        linear-gradient(0deg, rgba(9,12,14,.78) 0%, rgba(9,12,14,.4) 26%, rgba(9,12,14,0) 50%),
        linear-gradient(90deg, rgba(9,12,14,.35) 0%, rgba(9,12,14,0) 45%);
}

.h-closing-inner {
    width: 100%;
    max-width: var(--max);
    margin-inline: auto;
    padding: var(--s8) var(--edge) clamp(var(--s6), 1rem + 2.4vw, var(--s8));
}
.h-closing-inner > * { max-width: 34rem; }
/* Desktop: headline and sentence share one low line, so the whole
   block sits in the dark grass below the animals' feet. */
@media (min-width: 1081px), (min-width: 701px) and (orientation: landscape) {
    .h-closing-inner {
        display: grid;
        grid-template-columns: auto minmax(0, 26rem);
        grid-template-areas: "title text" "rule text";
        column-gap: clamp(var(--s6), 2rem + 3vw, var(--s10));
        align-items: end;
        padding-bottom: clamp(var(--s5), 1rem + 1.4vw, var(--s7));
    }
    .h-closing-inner > .h2 { grid-area: title; max-width: none; }
    .h-closing-inner > .gold-rule { grid-area: rule; margin-bottom: 0; }
    .h-closing-inner > p { grid-area: text; align-self: end; padding-bottom: 2px; }
}
.h-closing .h2 {
    font-size: clamp(1.875rem, 0.9rem + 1.5vw, 2.75rem);
    line-height: 1.1;
    color: var(--white);
    text-shadow: 0 1px 18px rgba(9,12,14,.4);
}
.h-closing .gold-rule { margin: var(--s4) 0; width: 36px; }
.h-closing p {
    max-width: 30em;
    font-size: var(--fs-body);
    line-height: 1.7;
    color: var(--white-soft);
}


/* ############################################################
   FOOTER — mock-up: five columns divided by fine gold rules
   ############################################################ */

.page-home .h-footer {
    padding: clamp(var(--s7), 2rem + 2vw, var(--s9)) 0 var(--s4);
    background: var(--black-deep);
    border-top: 1px solid var(--line-gold-2);
}

.h-footer-top {
    display: grid;
    grid-template-columns: minmax(170px, 0.9fr) repeat(3, minmax(0, 1.15fr)) minmax(0, 0.75fr);
    align-items: stretch;
}
.h-footer-top > * {
    padding-inline: clamp(var(--s4), 0.5rem + 1.6vw, var(--s6));
    border-left: 1px solid var(--line-gold);
}
.h-footer-top > :first-child { padding-left: 0; border-left: 0; }
.h-footer-top > :last-child  { padding-right: 0; }

.h-footer-brand { display: flex; flex-direction: column; align-items: center; text-align: center; }
.h-footer-brand .medallion { width: 84px; }
.h-footer-descriptor {
    margin-top: var(--s4);
    font-family: var(--sans);
    font-weight: 500;
    font-size: 0.625rem;
    letter-spacing: 0.26em;
    line-height: 2;
    text-transform: uppercase;
    color: var(--gold-champ);
}

.h-footer-label {
    margin-bottom: var(--s3);
    font-family: var(--sans);
    font-weight: 600;
    font-size: 0.625rem;
    letter-spacing: 0.22em;
    line-height: 1.6;
    text-transform: uppercase;
    color: var(--gold);
}
.h-footer-col address { font-size: var(--fs-small); line-height: 1.6; color: var(--white-soft); }

.h-footer-line {
    display: inline-flex;
    align-items: center;
    gap: var(--s2);
    min-height: 32px;
    font-size: var(--fs-small);
    color: var(--white-soft);
    white-space: nowrap;
    transition: color var(--dur-quick) var(--ease);
}
.h-footer-col address + .h-footer-line { margin-top: var(--s4); }
.h-footer-line svg { width: 15px; height: 15px; flex: none; color: var(--gold); }
.h-footer-line:hover { color: var(--white); }
.h-footer-contact a[href^="mailto"] { white-space: normal; overflow-wrap: anywhere; }

.h-footer-nav li + li { margin-top: 2px; }
.h-footer-nav a {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    font-family: var(--sans);
    font-weight: 500;
    font-size: var(--fs-nav);
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--white-soft);
    transition: color var(--dur-quick) var(--ease);
}
.h-footer-nav a:hover { color: var(--white); }

.page-home .h-footer-base {
    margin-top: clamp(var(--s6), 1.5rem + 2vw, var(--s8));
    padding-top: var(--s4);
    border-top: 1px solid var(--line-dark);
}
.page-home .h-footer-base .footer-legal a { text-decoration: underline; text-underline-offset: 4px; text-decoration-color: rgba(243,240,234,.35); }


/* ############################################################
   RESPONSIVE
   ############################################################ */

@media (max-width: 1280px) {
    .h-footer-top { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: var(--s6); }
    .h-footer-top > :nth-child(4) { padding-left: 0; border-left: 0; }
    .h-footer-nav ul { display: flex; flex-wrap: wrap; column-gap: var(--s5); }
    .h-footer-nav li + li { margin-top: 0; }
}

@media (max-width: 1080px) {
    .h-pillar { padding-inline: var(--s4); }
    .h-pillar .h-link { letter-spacing: 0.16em; white-space: nowrap; }
    .h-footer-top { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .h-footer-top > * { padding: 0; border-left: 0; }
    .h-footer-brand { grid-column: 1 / -1; flex-direction: row; gap: var(--s5); text-align: left; }
    .h-footer-brand .h-footer-descriptor { margin-top: 0; }
    .h-footer-nav { grid-column: 1 / -1; }
    .h-footer-nav a, .h-footer-line { min-height: 44px; }
    .h-steppers { right: calc(var(--edge) - 10px); }
}

/* Landscape tablets keep the editorial split. */
@media (min-width: 701px) and (max-width: 1080px) and (orientation: landscape) {
    .h-editorial-copy { padding: var(--s7) var(--s5) var(--s7) var(--edge); }
    .h-editorial-frame { aspect-ratio: auto; flex: 1; min-height: 360px; }
}

/* --- Stacked: phones and portrait tablets ---------------------- */
@media (max-width: 700px), (max-width: 1080px) and (orientation: portrait) {
    .page-home { --h-img: 58svh; }

    .page-home .h-hero { display: block; min-height: 100svh; background: var(--black); }
    .h-slides { inset: 0 0 auto 0; height: var(--h-img); }
    .h-slides::after {
        content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
        background: linear-gradient(180deg, rgba(9,12,14,.55) 0%, rgba(9,12,14,0) 20%,
                    rgba(9,12,14,0) 70%, rgba(9,12,14,.72) 90%, var(--black) 100%);
    }
    .h-slide::after { display: none; }
    .h-slide img, .h-slide[data-slide] img { object-position: 50% 50%; }
    .page-home .h-hero::before { display: none; }

    .h-controls {
        top: calc(var(--h-img) - 56px);
        bottom: auto;
        justify-content: flex-start;
        padding-inline: calc(var(--edge) - 2px);
    }
    .h-dots { gap: var(--s2); }
    .h-dot { font-size: 1.0625rem; }

    .page-home .hero-inner { padding: calc(var(--h-img) + var(--s4)) var(--edge) var(--s7); }
    .page-home .hero-inner > * { max-width: 34rem; }
    .page-home .hero-title, .page-home .hero-lead { text-shadow: none; }

    .h-editorial { grid-template-columns: 1fr; }
    .h-editorial-copy { padding: var(--s8) var(--edge) var(--s7); }
    .h-editorial-frame { aspect-ratio: 4 / 3; }

    .h-closing { display: block; min-height: 0; }
    .h-closing-media { position: relative; inset: auto; width: 100%; height: auto; aspect-ratio: 4 / 5; max-height: 72svh; }
    .h-closing-media img { object-position: 50% 50%; }
    .h-closing-media::after {
        content: ""; position: absolute; inset: 0; pointer-events: none;
        background: linear-gradient(180deg, rgba(9,12,14,.18) 0%, rgba(9,12,14,0) 22%, rgba(9,12,14,0) 72%, var(--black-deep) 100%);
    }
    .h-closing::before { display: none; }
    .h-closing-inner { padding: var(--s5) var(--edge) var(--s8); }
}

@media (min-width: 701px) and (max-width: 1080px) and (orientation: portrait) {
    .page-home { --h-img: 63svh; }
    .h-editorial-frame { aspect-ratio: 16 / 10; }
    .h-closing-media { aspect-ratio: 5 / 4; max-height: 62svh; }
}

@media (max-width: 700px) {
    .page-home .hero .gold-rule { margin-top: var(--s4); }
    .page-home .hero-lead { margin-top: var(--s4); }
    .page-home .hero-actions { margin-top: var(--s5); }

    .h-pillar-list { grid-template-columns: 1fr; }
    .h-pillar, .h-pillar:first-child, .h-pillar:last-child {
        padding: var(--s5) 0;
        border-left: 0;
        border-top: 1px solid var(--line-gold-2);
    }
    .h-pillar:first-child { padding-top: 0; border-top: 0; }
    .h-pillar:last-child { padding-bottom: 0; }

    .h-footer-top { grid-template-columns: 1fr; row-gap: var(--s6); }
    .h-footer-brand .medallion { width: 72px; }
}


/* ############################################################
   DESKTOP SCALE REFINEMENT (26 Sep 2026, management pass)
   Scale, proportion and spacing only. Photographs keep their size;
   the interface around them becomes smaller and finer.
   Primary reference: 1920 × 1080. All rules are Home-only.
   ############################################################ */

/* --- Masthead: a thin bar (≈76px), a restrained crest (≈54px) --- */
@media (min-width: 1081px) {
    .page-home {
        --header-h: clamp(4.5rem, 3.4rem + 1.3vw, 4.75rem);    /* 72 @1366 · 76 @1920 */
        --header-compact: clamp(3.875rem, 3.4rem + 0.5vw, 4.25rem);
        --logo: clamp(48px, 2rem + 1.1vw, 54px);               /* crest ≈53px @1920 */
    }
    .page-home .brand { gap: var(--s3); }
    .page-home .brand-divider { height: 26px; }
    .page-home .descriptor { font-size: 10px; letter-spacing: 0.26em; line-height: 1.9; }

    .page-home .nav { gap: clamp(18px, 0.3rem + 1.3vw, 32px); }
    .page-home .nav a { font-size: 10.5px; letter-spacing: 0.18em; }

    .page-home .nav a.private-access {
        min-height: 40px;
        padding: 0 20px;
        margin-left: var(--s2);
        gap: 9px;
        font-size: 10.5px;
        letter-spacing: 0.2em;
    }
    .page-home .nav a.private-access svg { width: 10px; height: 10px; }
}
/* Private Access fill: ≈200ms, as approved. */
.page-home .nav a.private-access, .page-home .header-access,
.page-home .nav a.private-access svg, .page-home .header-access svg,
.page-home .nav a.private-access::before, .page-home .header-access::before { transition-duration: 200ms; }
.page-home .header-access svg { width: 10px; height: 10px; }

/* --- Hero copy: editorial, not promotional ------------------------ */
.page-home .hero-title {
    font-size: clamp(2.375rem, 1.1rem + 2vw, 3.5rem);        /* 56 @1920 · 42 @1366 */
    line-height: 1.08;
    letter-spacing: -0.01em;
}
.page-home .hero .gold-rule { width: 32px; margin-top: var(--s4); }
.page-home .hero-lead { margin-top: var(--s4); font-size: clamp(1rem, 0.85rem + 0.3vw, 1.125rem); line-height: 1.65; }
.page-home .hero-actions { margin-top: var(--s5); }

.h-btn-outline {
    min-height: 44px;
    padding: 0 20px;
    gap: 12px;
    font-size: 10.5px;
    letter-spacing: 0.2em;
    border-color: rgba(183, 154, 90, 0.85);
}
.h-btn-outline svg { width: 12px; height: 12px; }

/* --- Slider controls: numbers lead; arrows are hairlines ---------- */
@media (min-width: 1081px), (min-width: 701px) and (orientation: landscape) {
    .h-controls { bottom: var(--s4); }
}
.h-dots { gap: var(--s1); }
.h-dot {
    min-width: 44px;
    min-height: 44px;
    padding: 0;
    gap: 6px;
    align-items: center;
    font-family: var(--sans);
    font-weight: 500;
    font-size: 10.5px;
    letter-spacing: 0.12em;
    color: var(--white);
    opacity: 0.5;
    transition: opacity 200ms var(--ease);
}
.h-dot:hover { opacity: 0.85; }
.h-dot[aria-current="true"] { opacity: 1; }
/* Only the current number carries a line: 26 × 1px, filling over the interval. */
.h-dot i { width: 26px; height: 1px; background: transparent; }
.h-dot[aria-current="true"] i { background: rgba(243, 240, 234, 0.2); }

.h-steppers { gap: 0; }
.h-arrow, .h-pause {
    width: 44px; height: 44px;
    border: 0;
    color: var(--white);
    opacity: 0.5;
    transition: opacity 200ms var(--ease);
}
.h-arrow:hover, .h-pause:hover, .h-arrow:focus-visible, .h-pause:focus-visible { opacity: 1; border: 0; }
.h-arrow svg { width: 9px; height: 17px; }
.h-pause { margin-left: 0; border-left: 0; }
.h-pause svg { width: 7px; height: 11px; }
.h-pause .i-play { width: 8px; }

/* --- Three themes: a compact strip (≈190px at 1920) ---------------- */
.h-pillars { padding-block: var(--s5); }
.h-pillar { position: relative; padding-inline: var(--s6); border-left: 0; }
.h-pillar + .h-pillar::before {
    content: "";
    position: absolute;
    left: 0; top: var(--s1); bottom: var(--s1);
    width: 1px;
    background: rgba(183, 154, 90, 0.26);
}
.h-num { font-size: 9.5px; letter-spacing: 0.2em; }
.h-pillar h3 { margin-top: var(--s1); font-size: clamp(1.125rem, 0.75rem + 0.55vw, 1.4375rem); letter-spacing: 0.18em; }
.h-pillar p {
    margin-top: var(--s1);
    max-width: 30em;
    font-size: clamp(0.9375rem, 0.85rem + 0.12vw, 1rem);
    line-height: 1.5;
    color: var(--white-soft);
}
.h-link {
    min-height: 32px;
    padding-top: var(--s2);
    padding-bottom: 8px;
    gap: 10px;
    font-size: 10.5px;
    letter-spacing: 0.2em;
    background-size: 24px 1px;
}
.h-link svg { width: 12px; height: 12px; }
.h-link:hover { background-size: 100% 1px; }

/* --- Ivory editorial: a magazine spread; height from the photograph */
.h-editorial-copy { padding-block: var(--s7); }
.h-editorial-copy .label { font-size: 9.5px; }
.h-editorial-copy .gold-rule { width: 32px; margin: var(--s3) 0 var(--s4); }
.h-editorial-copy .h2 { font-size: clamp(2.125rem, 1.1rem + 1.3vw, 2.75rem); line-height: 1.12; }
.h-editorial-copy p { margin-top: var(--s4); font-size: clamp(0.9375rem, 0.85rem + 0.12vw, 1.0625rem); line-height: 1.7; }
.h-editorial-copy .text-link { margin-top: var(--s5); font-size: 10.5px; min-height: 36px; padding-bottom: 8px; background-size: 100% 1px; }
.h-editorial-copy .text-link svg { width: 12px; height: 12px; }
.h-editorial-media figcaption { font-size: 9px; padding-block: 10px; }

/* --- Closing photograph: restrained words ------------------------- */
.h-closing .h2 { font-size: clamp(1.875rem, 1rem + 1.25vw, 2.625rem); }   /* 42 @1920 */
.h-closing .gold-rule { width: 32px; margin: var(--s3) 0 0; }
.h-closing p { font-size: clamp(0.9375rem, 0.85rem + 0.12vw, 1.0625rem); }

/* --- Footer: information-dense and quiet --------------------------- */
.page-home .h-footer { padding: var(--s7) 0 var(--s3); }
.h-footer-top > * { padding-inline: var(--s5); border-left-color: rgba(183, 154, 90, 0.26); }
.h-footer-brand .medallion { width: 50px; }
.h-footer-descriptor { margin-top: var(--s3); font-size: 9px; letter-spacing: 0.24em; }
.h-footer-label { margin-bottom: var(--s2); font-size: 9.5px; letter-spacing: 0.2em; }
.h-footer-col address { font-size: 13px; line-height: 1.65; }
.h-footer-line { min-height: 26px; font-size: 13px; gap: 10px; }
.h-footer-line svg { width: 12px; height: 12px; }
.h-footer-col address + .h-footer-line { margin-top: var(--s2); }
.h-footer-contact li + li { margin-top: 0; }
.h-footer-nav a { min-height: 22px; font-size: 9.5px; letter-spacing: 0.2em; }
.h-footer-nav li + li { margin-top: 0; }
.page-home .h-footer-base { margin-top: var(--s6); padding-top: var(--s3); font-size: 10.5px; }
.page-home .h-footer-base .footer-legal { gap: var(--s2); }
.page-home .h-footer-base .footer-legal li + li::before { margin-right: var(--s2); }

/* --- Contained content: never wider than ≈1640px ------------------- */
@media (min-width: 1081px) {
    .page-home { --content: 1600px; }   /* principal content never wider than 1600px */
}

/* --- Tablet / phone: keep 44px targets, visible marks stay small --- */
@media (max-width: 1080px) {
    .h-pillars { padding-block: var(--s6); }
    .h-pillar { padding-inline: var(--s4); }
    .h-footer-nav a, .h-footer-line { min-height: 44px; }
}
@media (max-width: 700px) {
    .h-pillar, .h-pillar:first-child, .h-pillar:last-child { padding: var(--s4) 0; }
    .h-pillar + .h-pillar::before { display: none; }
    .h-link { min-height: 44px; }
    .page-home .hero-title { font-size: clamp(2.125rem, 1rem + 5vw, 2.5rem); }
}


/* ############################################################
   GLOBAL PROPORTION STANDARD (26 Sep 2026)
   One set of section depths for every principal page that uses the
   global system (Home, Property, Markets). Pages draw from these
   variables; none sets its own magic number.
     --band-pad      three-column band padding   (band ≈180–200 @1920)
     --editorial-h   ivory split height            (≈615 @1920 · 480 @1366)
     --closing-h     closing photograph height     (≈500 @1920 · 400 @1366)
   The hero and the footer are unchanged by this pass.
   ############################################################ */

.page-home {
    --band-pad:    40px;
    --editorial-h: clamp(480px, 32vw, 620px);
    --closing-h:   clamp(400px, 26vw, 520px);
}
@media (max-width: 1500px) { .page-home { --band-pad: 28px; } }

/* --- Home ivory split: the photograph now fills the full row height.
       The caption moves from an ivory strip beneath the photograph to
       a small label set inside its lower edge, so there is no strip. */
.h-editorial-media { position: relative; display: block; overflow: hidden; }
.h-editorial-media figcaption {
    position: absolute;
    right: 0; bottom: 0; left: 0;
    z-index: 1;
    padding: var(--s5) var(--edge) var(--s2) var(--s4);
    text-align: right;
    color: rgba(243, 240, 234, 0.82);
    background: linear-gradient(0deg, rgba(9,12,14,.42) 0%, rgba(9,12,14,0) 100%);
    pointer-events: none;
}
@media (min-width: 1081px), (min-width: 701px) and (orientation: landscape) {
    .h-editorial { align-items: stretch; min-height: var(--editorial-h); }
    .h-editorial-frame { position: absolute; inset: 0; aspect-ratio: auto; flex: none; min-height: 0; }
    .h-editorial-frame img { object-position: 50% 22%; }   /* cupola to colonnade */
    .h-editorial-copy { padding-block: var(--s8); }
}
@media (max-width: 700px), (max-width: 1080px) and (orientation: portrait) {
    .h-editorial-media figcaption { padding-right: var(--edge); }
}

/* --- Home closing photograph: a shorter final chapter ------------- */
@media (min-width: 1081px), (min-width: 701px) and (orientation: landscape) {
    .h-closing { min-height: var(--closing-h); }
}
/* At the shorter depth the words cannot sit below the animals' feet
   without losing the sun, so they move into the open sky at upper
   left, in a narrow column that stays clear of the sun and every
   antelope. The frame holds the sun, the principal impala and the
   acacia canopy. */
@media (min-width: 1081px), (min-width: 701px) and (orientation: landscape) {
    .h-closing { align-items: flex-start; }
    .h-closing-media img { object-position: 50% 45%; }
    .h-closing-inner {
        display: block;
        padding-top: var(--s6);
        padding-bottom: var(--s6);
    }
    .h-closing-inner > * { max-width: 19rem; }
    .h-closing-inner > .gold-rule { margin: var(--s3) 0 var(--s3); }
    .h-closing-inner > p { max-width: 17rem; padding-bottom: 0; }
    .h-closing::before {
        background:
            linear-gradient(90deg, rgba(9,12,14,.62) 0%, rgba(9,12,14,.4) 16%, rgba(9,12,14,.06) 30%, rgba(9,12,14,0) 40%),
            linear-gradient(180deg, rgba(9,12,14,.25) 0%, rgba(9,12,14,0) 30%);
    }
}

/* ############################################################
   HOME CLOSING PHOTOGRAPH — replaced 26 Sep 2026 (wildebeest river
   crossing, management-approved). Copy unchanged, still on the left.
   The herd and the leaping wildebeest fill the middle of the frame, so
   the words sit low on the left over the dark foreground rocks and
   water, beneath the animals' hooves; headline and sentence share one
   row. Section height stays within the global closing standard.
   ############################################################ */
@media (min-width: 1081px), (min-width: 701px) and (orientation: landscape) {
    .h-closing { align-items: flex-end; min-height: var(--closing-h); }
    .h-closing-media img { object-position: 50% 83%; }   /* horns to hooves, leaper whole, river below */
    .h-closing-inner {
        display: grid;
        grid-template-columns: max-content minmax(0, 26rem);
        grid-template-areas: "title text" "rule text";
        column-gap: clamp(var(--s6), 1rem + 3vw, var(--s9));
        align-items: end;
        padding-top: var(--s4);
        padding-bottom: var(--s4);
    }
    .h-closing-inner > * { max-width: none; }
    .h-closing-inner > .h2 { grid-area: title; }
    .h-closing-inner > .gold-rule { grid-area: rule; margin: var(--s2) 0 0; }
    .h-closing-inner > p { grid-area: text; max-width: 26rem; margin-top: 0; padding-bottom: 2px; }
    .h-closing::before {
        background:
            linear-gradient(0deg, rgba(9,12,14,.72) 0%, rgba(9,12,14,.38) 18%, rgba(9,12,14,0) 34%),
            linear-gradient(90deg, rgba(9,12,14,.4) 0%, rgba(9,12,14,.18) 30%, rgba(9,12,14,0) 50%);
    }
}

/* ############################################################
   HOME HERO — new slide set (26 Sep 2026, management-approved)
   01 elephants in grassland · 02 giraffes · 03 zebra herd.
   Hero depth follows the Global Proportion Standard (≈800px at
   1920×1080). Each slide has its own crop and its own left-side shade;
   the copy position and typography are unchanged.
   ############################################################ */
.page-home { --home-hero-h: clamp(560px, max(41vw, calc(100svh - var(--header-h))), 800px); }
@media (min-width: 1081px), (min-width: 701px) and (orientation: landscape) {
    .page-home .h-hero { min-height: var(--home-hero-h); height: var(--home-hero-h); }
}

/* Elephants: the lead elephant stands left, facing the camera. Hold the
   frame low so its ears, tusks and trunk sit beneath the headline zone
   rather than behind it. */
.h-slide[data-slide="elephant-grass"] img { object-position: 50% 70%; }
.h-slide[data-slide="elephant-grass"]::after {
    background: linear-gradient(90deg, rgba(9,12,14,.42) 0%, rgba(9,12,14,.26) 24%, rgba(9,12,14,0) 40%);
}
/* Zebras: the strongest zebra stands front left; keep its head and the
   line of the herd behind it. */
.h-slide[data-slide="zebra-herd"] img { object-position: 50% 45%; }
.h-slide[data-slide="zebra-herd"]::after {
    background: linear-gradient(90deg, rgba(9,12,14,.48) 0%, rgba(9,12,14,.3) 24%, rgba(9,12,14,0) 40%);
}
@media (max-width: 700px), (max-width: 1080px) and (orientation: portrait) {
    .h-slide[data-slide] img { object-position: 50% 50%; }
}

/* Home ivory split photograph — Piccadilly Circus, London (27 Sep 2026).
   Both telephone boxes and the lit street; object-fit: cover, full bleed. */
@media (min-width: 1081px), (min-width: 701px) and (orientation: landscape) {
    .h-editorial-frame img { object-position: 62% 55%; }
}