/* ==========================================================================
   GREEN RANGER INVESTMENTS: LIGHT THEME
   Loaded last; overrides the original dark styles.

   Direction: bright, soft, modern. Warm off-white ground, desaturated
   sage-green accent (the old #00c853 neon read as "toy"), lighter type
   weights, restrained radii, and soft diffuse shadows in place of
   coloured glows.
   ========================================================================== */

:root {
    /* --- surfaces: warm cream ground, editorial rather than clinical white --- */
    --bg-primary:     #FAF8F4;
    --bg-secondary:   #F2EDE5;
    --bg-card:        #FFFFFF;
    --bg-card-hover:  #FFFFFF;
    --bg-glass:       rgba(250, 248, 244, 0.82);
    --bg-sand:        #EFE9DF;

    /* --- hairline borders, warm-tinted --- */
    --border:         #E6DFD4;
    --border-light:   #D8CFC1;

    /* --- text: warm near-black, never pure black --- */
    --text-primary:   #1F1D1A;
    --text-secondary: #6B6459;
    --text-muted:     #A09788;

    /* --- accent: earthy sage. Keeps the brand green, drops the neon. --- */
    --green:          #4A6B55;
    --green-light:    #6B8C75;
    --green-dark:     #35503E;
    --green-soft:     #EDF1ED;
    --green-glow:        rgba(74, 107, 85, 0.10);
    --green-glow-strong: rgba(74, 107, 85, 0.18);

    /* themeable triplets consumed by the converted rules */
    --accent-rgb:       74, 107, 85;
    --accent-deep-rgb:  53, 80, 62;
    --accent-light-rgb: 107, 140, 117;
    --gold-rgb:        184, 162, 130;

    /* --- warm sand secondary accent --- */
    --gold:       #B8A282;
    --gold-light: #CDBBA0;
    --gold-dim:   rgba(184, 162, 130, 0.10);

    /* --- softer geometry: the 100px pills read as cartoonish --- */
    --radius:    14px;
    --radius-sm:  8px;
    --radius-lg: 18px;
    --radius-xl: 24px;

    /* --- soft, warm, neutral elevation --- */
    --shadow-sm: 0 1px 2px rgba(31,29,26,.04), 0 1px 3px rgba(31,29,26,.03);
    --shadow-md: 0 2px 4px rgba(31,29,26,.04), 0 6px 16px rgba(31,29,26,.05);
    --shadow-lg: 0 4px 8px rgba(31,29,26,.04), 0 16px 40px rgba(31,29,26,.07);

    /* --- image slot default (swapped per-card when photos arrive) --- */
    --img: none;
}

/* ==========================================================================
   1. BASE: strip the dark ground and its coloured glows
   ========================================================================== */

body {
    background-color: var(--bg-primary);
    color: var(--text-primary);
    font-weight: 400;
}

/* the fixed radial green wash was built for a black page */
body::before {
    background:
        radial-gradient(ellipse 70% 50% at 12% 8%,  rgba(var(--gold-rgb), 0.10) 0%, transparent 60%),
        radial-gradient(ellipse 55% 45% at 88% 78%, rgba(var(--accent-rgb), 0.05) 0%, transparent 55%);
    opacity: 1;
}

/* decorative dark-only texture */
.hero-grid-bg,
.hero-particles,
.particle {
    display: none !important;
}

::selection {
    background: rgba(var(--accent-rgb), 0.18);
    color: var(--text-primary);
}

/* ==========================================================================
   2. TYPE: 34 of 53 weight declarations were 700+. Lighten the whole scale.
   ========================================================================== */

h1, h2, h3, h4, h5, h6 {
    font-weight: 600;
    letter-spacing: -0.02em;
    color: var(--text-primary);
}

/* display type: Playfair at 800/900 was the heaviest offender */
.hero-title,
.section-title,
.about-hero h1,
.page-hero h1,
.statement-text,
.mission blockquote {
    font-weight: 500 !important;
    letter-spacing: -0.025em;
}

.hero-title {
    font-weight: 500 !important;
    line-height: 1.06;
}

.hero-accent,
.section-title em,
.section-title span {
    font-weight: 500 !important;
}

/* eyebrow labels: 700 + 6px tracking shouted. Quieter, smaller tracking. */
.hero-label,
.section-label,
.eyebrow {
    font-weight: 600 !important;
    letter-spacing: 0.14em !important;
    font-size: 0.7rem !important;
    color: var(--green);
}

body,
p,
.hero-subtitle,
.section-sub,
.service-desc,
.approach-card p,
.value-card p {
    font-weight: 400;
    color: var(--text-secondary);
}

.hero-subtitle {
    font-weight: 400;
    color: var(--text-secondary);
}

/* trim the widest tracking site-wide */
[class*="label"],
[class*="tag"],
.marquee-item,
.prop-status,
.stat-label {
    letter-spacing: 0.1em !important;
}

strong, b { font-weight: 600; }

/* ==========================================================================
   3. NAV: light glass
   ========================================================================== */

.navbar {
    background: rgba(251, 251, 249, 0.72);
    backdrop-filter: saturate(180%) blur(16px);
    -webkit-backdrop-filter: saturate(180%) blur(16px);
    border-bottom: 1px solid transparent;
    transition: background 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

.navbar.scrolled {
    background: rgba(251, 251, 249, 0.9);
    border-bottom: 1px solid var(--border);
    box-shadow: var(--shadow-sm);
}

.nav-links a {
    color: var(--text-secondary);
    font-weight: 500;
}

.nav-links a:hover { color: var(--text-primary); }

.logo-icon {
    background: linear-gradient(135deg, var(--green-light), var(--green));
    color: #fff;
    font-weight: 700;
    border-radius: 10px;
    box-shadow: var(--shadow-sm);
}

.logo-text   { color: var(--text-primary); font-weight: 600; }
.logo-sub    { color: var(--text-muted); font-weight: 500; }
.nav-toggle span { background: var(--text-primary); }

/* mobile drawer */
@media (max-width: 768px) {
    .nav-links {
        background: rgba(255, 255, 255, 0.97);
        backdrop-filter: blur(20px);
        border-bottom: 1px solid var(--border);
        box-shadow: var(--shadow-lg);
    }
}

/* ==========================================================================
   4. BUTTONS: pills softened, weights dropped
   ========================================================================== */

.btn {
    border-radius: 10px;
    font-weight: 500;
    letter-spacing: 0;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.btn-primary {
    background: var(--green);
    color: #fff;
    border: 1px solid var(--green);
    box-shadow: none;
}

.btn-primary:hover {
    background: var(--green-dark);
    border-color: var(--green-dark);
    box-shadow: var(--shadow-md);
    transform: translateY(-1px);
}

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

.btn-outline:hover {
    background: #fff;
    border-color: var(--text-muted);
    box-shadow: var(--shadow-sm);
}

.nav-cta {
    background: var(--green) !important;
    color: #fff !important;
    border-radius: 9px !important;
    font-weight: 500 !important;
    padding: 10px 18px !important;
}

.nav-cta:hover { background: var(--green-dark) !important; }

/* ==========================================================================
   5. HERO: editorial, photo-ready.
   Drop a photo in with:  <section class="hero" style="--hero-img:url('assets/hero.jpg')">
   ========================================================================== */

.hero {
    background-color: var(--bg-secondary);
    background-image: var(--hero-img, none);
    background-size: cover;
    background-position: center;
    position: relative;
}

/* legibility scrim over any hero photo */
.hero-bg-overlay {
    background: linear-gradient(180deg,
        rgba(250, 248, 244, 0.55) 0%,
        rgba(250, 248, 244, 0.78) 55%,
        rgba(250, 248, 244, 0.92) 100%);
}

.hero-title       { color: var(--text-primary); }
.hero-accent      { color: var(--green); }
.hero-subtitle    { color: var(--text-secondary); max-width: 46ch; }

.hero-badge span {
    background: rgba(255, 255, 255, 0.7);
    border: 1px solid var(--border);
    color: var(--text-secondary);
    border-radius: 8px;
    font-weight: 500;
    letter-spacing: 0.08em;
    backdrop-filter: blur(8px);
}

.hero-scroll span  { color: var(--text-muted); }
.scroll-line       { background: linear-gradient(to bottom, var(--border-light), transparent); }

/* ==========================================================================
   6. MARQUEE: was a loud neon band; now a quiet rule of small caps
   ========================================================================== */

.marquee {
    background: transparent;
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    padding: 14px 0;
}

.marquee-item {
    color: var(--text-muted);
    font-weight: 500;
    font-size: 0.72rem;
    text-transform: uppercase;
}

.marquee-dot { background: var(--gold); opacity: 0.6; }

/* ==========================================================================
   7. SECTIONS & CARDS
   ========================================================================== */

section { background-color: transparent; }

.mission,
.clientele,
.approach { background: transparent; }

.mission blockquote { color: var(--text-primary); font-weight: 400; }
.mission-mark       { color: var(--gold); opacity: 0.5; }
.mission-author span{ color: var(--text-muted); font-weight: 500; }
.author-line        { background: var(--border-light); }

.service-card,
.approach-card,
.value-card,
.contact-form,
.partner-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    transition: box-shadow 0.3s ease, transform 0.3s ease, border-color 0.3s ease;
}

.service-card:hover,
.approach-card:hover,
.value-card:hover {
    background: var(--bg-card);
    border-color: var(--border-light);
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
}

.service-card h3,
.approach-card h3,
.value-card h3 {
    font-weight: 600;
    color: var(--text-primary);
}

.service-icon,
.approach-icon,
.value-icon {
    background: var(--green-soft);
    color: var(--green);
    border-radius: 10px;
    border: 1px solid rgba(var(--accent-rgb), 0.12);
}

.service-num { color: var(--gold); font-weight: 500; opacity: 0.8; }

.stat-number { color: var(--text-primary); font-weight: 500; }
.stat-label  { color: var(--text-muted); font-weight: 500; }

.statement { background: var(--bg-secondary); }
.statement-text { color: var(--text-primary); }

.c-tag {
    background: #fff;
    border: 1px solid var(--border);
    color: var(--text-secondary);
    border-radius: 8px;
    font-weight: 500;
}

.c-tag:hover { border-color: var(--green); color: var(--green); }

/* ==========================================================================
   8. FOOTER + FORMS
   ========================================================================== */

.footer {
    background: var(--bg-secondary);
    border-top: 1px solid var(--border);
    color: var(--text-secondary);
}

.footer h4 { color: var(--text-primary); font-weight: 600; font-size: 0.8rem; }
.footer a  { color: var(--text-secondary); font-weight: 400; }
.footer a:hover { color: var(--green); }
.footer-tagline { color: var(--text-muted); }
.footer-bottom  { border-top: 1px solid var(--border); color: var(--text-muted); }

.contact-form input,
.contact-form select,
.contact-form textarea {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 9px;
    color: var(--text-primary);
    font-weight: 400;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.contact-form input::placeholder,
.contact-form textarea::placeholder { color: var(--text-muted); }

.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus {
    outline: none;
    border-color: var(--green);
    box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.12);
}

.form-note { color: var(--text-muted); }

/* ==========================================================================
   9. PROPERTY GRID
   The CSS-drawn building silhouettes were the main "cartoonish" element.
   Replaced with a warm placeholder + fine architectural line art, and a
   real photo slot.

   To add a photo:
   <div class="prop-image" style="--img:url('assets/properties/estate.jpg')">
   ========================================================================== */

.prop-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
    transition: box-shadow 0.35s ease, transform 0.35s ease, border-color 0.35s ease;
}

.prop-card:hover {
    box-shadow: var(--shadow-lg);
    transform: translateY(-3px);
    border-color: var(--border-light);
}

.prop-image {
    position: relative;
    background-color: var(--bg-sand);
    background-image: var(--img, none);
    background-size: cover;
    background-position: center;
    aspect-ratio: 4 / 3;
    height: auto;
    min-height: 0;
    border-bottom: 1px solid var(--border);
    overflow: hidden;
}

/* kill the blocky green buildings */
.prop-silhouette,
.prop-silhouette.mansion,
.prop-silhouette.office,
.prop-silhouette.terrain,
.prop-silhouette.modern-home,
.prop-silhouette.apartment,
.prop-silhouette.colonial {
    display: none !important;
}

/* elegant placeholder: warm wash + thin architectural line art */
.prop-image::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(145deg, rgba(255,255,255,0.5) 0%, rgba(184,162,130,0.10) 55%, rgba(74,107,85,0.08) 100%),
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='90' viewBox='0 0 120 90' fill='none' stroke='%231F1D1A' stroke-opacity='0.16' stroke-width='1.1'><path d='M8 82h104'/><path d='M22 82V44l22-16 22 16v38'/><path d='M44 82V62h0'/><path d='M36 54h16'/><path d='M74 82V36h30v46'/><path d='M82 46h14M82 56h14M82 66h14'/></svg>");
    background-repeat: no-repeat, no-repeat;
    background-position: center, center;
    background-size: cover, 120px 90px;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

/* once a real photo is set, hide the placeholder art */
.prop-image[style*="--img"]::after { opacity: 0; }

.prop-status {
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(8px);
    color: var(--text-primary);
    border: 1px solid var(--border);
    border-radius: 6px;
    font-weight: 500;
    font-size: 0.66rem;
    letter-spacing: 0.08em;
    box-shadow: var(--shadow-sm);
    z-index: 2;
}

.prop-status.hot { color: #9C5B3C; border-color: rgba(156, 91, 60, 0.28); }

.prop-confidential {
    background: rgba(31, 29, 26, 0.55);
    backdrop-filter: blur(6px);
    color: rgba(255, 255, 255, 0.92);
    border-radius: 6px;
    font-weight: 400;
    font-size: 0.64rem;
    letter-spacing: 0.06em;
    z-index: 2;
}

.prop-details { padding: 22px 22px 24px; }

.prop-details h3 {
    color: var(--text-primary);
    font-weight: 600;
    letter-spacing: -0.01em;
}

.prop-type-label {
    color: var(--text-muted);
    font-weight: 500;
    font-size: 0.72rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.prop-specs { border-top: 1px solid var(--border); }

.prop-specs span {
    color: var(--text-secondary);
    background: transparent;
    border: none;
    font-weight: 400;
    font-size: 0.82rem;
}

.prop-price {
    color: var(--text-primary);
    font-weight: 600;
    letter-spacing: -0.02em;
}

.featured-prop { border-color: rgba(var(--accent-rgb), 0.3); }

/* filter chips */
.filter-btn {
    background: #fff;
    border: 1px solid var(--border);
    color: var(--text-secondary);
    border-radius: 8px;
    font-weight: 500;
    box-shadow: none;
}

.filter-btn:hover { border-color: var(--text-muted); color: var(--text-primary); }

.filter-btn.active {
    background: var(--green);
    border-color: var(--green);
    color: #fff;
    box-shadow: none;
}

.filter-bar { background: transparent; border-bottom: 1px solid var(--border); }

.page-hero,
.properties-section,
.about-hero { background: transparent; }

/* ==========================================================================
   10. BRAND SYSTEM: from the campaign sheet, rendered light
   Light-weight ALL CAPS, wide tracking, stacked short lines.
   Sage + gold on warm cream.
   ========================================================================== */

:root {
    --sage:       #7FA88A;
    --sage-deep:  #4A6B55;
    --forest:     #2B4433;
    --bronze:     #B8935A;
    --bronze-dim: rgba(184, 147, 90, 0.35);

    --font-display: 'Cormorant Garamond', 'Playfair Display', Georgia, serif;
    --font-ui: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;

    --track-wide:  0.16em;
    --track-wider: 0.32em;
}

/* --- the stacked caps headline, e.g. DISCIPLINE / BUILDS / FREEDOM --- */
.gr-stack {
    font-family: var(--font-ui);
    font-weight: 200;
    text-transform: uppercase;
    letter-spacing: var(--track-wide);
    line-height: 1.22;
    color: var(--text-primary);
    margin: 0;
}

.gr-stack .lead { color: var(--sage-deep); font-weight: 300; }

/* --- serif display moment, e.g. A GREENER TOMORROW --- */
.gr-serif {
    font-family: var(--font-display);
    font-weight: 300;
    letter-spacing: 0.04em;
    line-height: 1.1;
    color: var(--text-primary);
}

.gr-serif em { font-style: normal; color: var(--sage-deep); }

/* --- eyebrow / kicker --- */
.gr-kicker {
    font-family: var(--font-ui);
    font-size: 0.66rem;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: var(--track-wider);
    color: var(--sage-deep);
}

/* --- small wide-tracked body, as used under the headlines --- */
.gr-micro {
    font-family: var(--font-ui);
    font-size: 0.72rem;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    line-height: 2;
    color: var(--text-secondary);
}

/* --- thin bronze rule used as a separator in the mockups --- */
.gr-rule {
    width: 48px;
    height: 1px;
    background: var(--bronze);
    opacity: 0.6;
    border: 0;
    margin: 0;
}

/* --- pillar divider: REAL ESTATE | TRADING | CONSULTING --- */
.gr-pillars {
    font-family: var(--font-ui);
    font-size: 0.68rem;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 0.24em;
    color: var(--text-secondary);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px;
}

.gr-pillars span { white-space: nowrap; }
.gr-pillars .sep { color: var(--bronze); opacity: 0.7; }

/* --- outlined CTA, as per LET'S BUILD --- */
.btn-ghost {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 15px 30px;
    font-family: var(--font-ui);
    font-size: 0.7rem;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    color: var(--text-primary);
    background: transparent;
    border: 1px solid var(--border-light);
    border-radius: 2px;
    text-decoration: none;
    transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

.btn-ghost:hover {
    border-color: var(--sage-deep);
    color: var(--sage-deep);
    background: rgba(var(--accent-rgb), 0.04);
}

.btn-ghost .arrow { transition: transform 0.35s ease; }
.btn-ghost:hover .arrow { transform: translateX(5px); }

/* --- brand lockup --- */
.gr-logo { display: inline-flex; align-items: center; gap: 14px; text-decoration: none; }
.gr-logo img { width: 46px; height: 32px; display: block; }

.gr-logo .wordmark {
    font-family: var(--font-ui);
    font-size: 1.02rem;
    font-weight: 300;
    letter-spacing: 0.17em;
    color: var(--text-primary);
    line-height: 1.15;
}

.gr-logo .subword {
    font-family: var(--font-ui);
    font-size: 0.58rem;
    font-weight: 300;
    letter-spacing: 0.4em;
    color: var(--text-muted);
    margin-top: 3px;
}

/* ==========================================================================
   11. HERO: editorial, left-aligned, generous negative space
   Photo slot:  <section class="hero" style="--hero-img:url('assets/hero.jpg')">
   ========================================================================== */

.hero {
    min-height: 92vh;
    align-items: center;
    justify-content: flex-start;
    padding: 160px 0 110px;
    background-color: var(--bg-secondary);
}

.hero .hero-content,
.hero-content {
    max-width: 1180px;
    width: 100%;
    margin: 0 auto;
    padding: 0 40px;
    text-align: left;
}

.hero-label {
    margin-bottom: 30px;
    opacity: 0;
    animation: fadeUp 0.8s 0.1s forwards;
}

.hero-title {
    font-size: clamp(3.2rem, 8.5vw, 7rem);
    margin-bottom: 34px;
    opacity: 0;
    animation: fadeUp 0.8s 0.25s forwards;
}

.hero-pillars {
    margin-bottom: 26px;
    opacity: 0;
    animation: fadeUp 0.8s 0.4s forwards;
}

.hero-hr {
    margin-bottom: 26px;
    opacity: 0;
    animation: fadeUp 0.8s 0.5s forwards;
}

.hero-subtitle {
    max-width: 44ch;
    font-size: 1rem;
    line-height: 1.75;
    margin-bottom: 42px;
    opacity: 0;
    animation: fadeUp 0.8s 0.6s forwards;
}

.hero-actions {
    justify-content: flex-start;
    margin-bottom: 0;
    opacity: 0;
    animation: fadeUp 0.8s 0.7s forwards;
}

.hero-badge { margin-top: 52px; }

/* right-hand motto column, as in the mockup */
.hero-motto {
    position: absolute;
    right: 48px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    gap: 7px;
    font-family: var(--font-ui);
    font-size: 0.64rem;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 0.3em;
    color: var(--text-muted);
    text-align: right;
    opacity: 0;
    animation: fadeUp 0.8s 0.9s forwards;
}

.hero-motto .gr-rule { margin-top: 10px; margin-left: auto; }

@media (max-width: 1100px) { .hero-motto { display: none; } }

@media (max-width: 768px) {
    .hero { min-height: auto; padding: 130px 0 80px; }
    .hero-content { padding: 0 24px; }
    .hero-title { font-size: clamp(2.6rem, 12vw, 4rem); }
}

/* ==========================================================================
   12. PILLAR ROW: 01 / 02 / 03
   Photo slot per pillar:  style="--img:url('assets/properties/x.jpg')"
   ========================================================================== */

.pillars {
    padding: 0 0 110px;
    background: var(--bg-secondary);
}

.pillar-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0;
    border-top: 1px solid var(--border);
}

.pillar {
    display: flex;
    align-items: flex-start;
    gap: 22px;
    padding: 40px 34px;
    border-right: 1px solid var(--border);
    transition: background 0.35s ease;
}

.pillar:last-child { border-right: 0; }
.pillar:hover { background: rgba(255, 255, 255, 0.5); }

.pillar-img {
    flex: 0 0 104px;
    width: 104px;
    aspect-ratio: 4 / 3;
    border-radius: 3px;
    background-color: var(--bg-sand);
    background-image: var(--img, none);
    background-size: cover;
    background-position: center;
    position: relative;
    overflow: hidden;
}

/* placeholder texture until real photos land */
.pillar-img::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(145deg,
        rgba(255,255,255,0.45) 0%,
        rgba(184,147,90,0.14) 50%,
        rgba(74,107,85,0.16) 100%);
}

.pillar-body { flex: 1; min-width: 0; position: relative; }

.pillar-num {
    font-family: var(--font-ui);
    font-size: 0.66rem;
    font-weight: 400;
    letter-spacing: 0.2em;
    color: var(--bronze);
    display: block;
    margin-bottom: 10px;
}

.pillar-body .gr-rule { margin-bottom: 16px; }

.pillar-body h3 {
    font-family: var(--font-ui);
    font-size: 0.92rem;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: var(--text-primary);
    margin-bottom: 10px;
}

.pillar-body p {
    font-size: 0.82rem;
    line-height: 1.7;
    color: var(--text-secondary);
    margin-bottom: 16px;
    max-width: 30ch;
}

.pillar-link {
    font-size: 1rem;
    color: var(--bronze);
    text-decoration: none;
    display: inline-block;
    transition: transform 0.3s ease, color 0.3s ease;
}

.pillar:hover .pillar-link { transform: translateX(5px); color: var(--sage-deep); }

@media (max-width: 900px) {
    .pillar-row { grid-template-columns: 1fr; }
    .pillar { border-right: 0; border-bottom: 1px solid var(--border); }
    .pillar:last-child { border-bottom: 0; }
}

/* ==========================================================================
   13. FIXES: lockup stacking + inherited centring
   ========================================================================== */

/* wordmark and subword must stack, not sit inline */
.gr-logo .logo-text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.gr-logo .wordmark,
.gr-logo .subword { display: block; }

/* the original hero was centre-aligned; this layout is left-aligned */
.hero-subtitle,
.hero-title,
.hero-label {
    margin-left: 0;
    margin-right: auto;
}

.hero-actions { margin-left: 0; }

/* ==========================================================================
   14. LOCKUP + TAGLINE: per the brand sheet
   Gold subword, gold rule, gold serif tagline.
   ========================================================================== */

:root { --gold-brand: #A9812F; }

.gr-logo img { width: 52px; height: 34px; }

.gr-logo .wordmark {
    font-weight: 400;
    letter-spacing: 0.2em;
    font-size: 1.02rem;
}

.gr-logo .subword {
    color: var(--gold-brand);
    letter-spacing: 0.34em;
    font-weight: 400;
    font-size: 0.55rem;
}

/* "Where Wealth Meets Longevity." */
.gr-tagline {
    font-family: var(--font-display);
    font-weight: 400;
    font-size: clamp(1.35rem, 2.6vw, 2rem);
    letter-spacing: 0.01em;
    color: var(--gold-brand);
    margin: 0 0 30px;
    opacity: 0;
    animation: fadeUp 0.8s 0.32s forwards;
}

.gr-rule { background: var(--gold-brand); opacity: 0.75; }

.gr-pillars .sep { color: var(--gold-brand); opacity: 0.85; }

/* four-line motto column */
.hero-motto { gap: 9px; }
.hero-motto .gr-rule { margin: 0 0 14px auto; }

/* ==========================================================================
   15. INTERIOR PAGE HEADERS
   Photo slot:  <section class="page-head" style="--hero-img:url('assets/x.jpg')">
   ========================================================================== */

.page-head {
    position: relative;
    padding: 190px 0 84px;
    background-color: var(--bg-secondary);
    background-image: var(--hero-img, none);
    background-size: cover;
    background-position: center;
    overflow: hidden;
}

.page-head-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg,
        rgba(250, 248, 244, 0.86) 0%,
        rgba(250, 248, 244, 0.80) 50%,
        rgba(250, 248, 244, 0.94) 100%);
    pointer-events: none;
}

.page-head .container { position: relative; z-index: 1; }

.page-head .gr-kicker { margin-bottom: 22px; }

.page-head-title {
    font-size: clamp(2.6rem, 6vw, 4.6rem);
    margin-bottom: 22px;
}

.page-head-tagline { margin-bottom: 26px; }

.page-head .gr-rule { margin-bottom: 26px; }

.page-head-blurb {
    max-width: 52ch;
    font-size: 1rem;
    line-height: 1.8;
    color: var(--text-secondary);
}

@media (max-width: 768px) {
    .page-head { padding: 140px 0 62px; }
}

/* ==========================================================================
   16. CTA BAND: closes every page
   ========================================================================== */

.cta-band {
    padding: 104px 0;
    background: var(--bg-sand);
    border-top: 1px solid var(--border);
    text-align: center;
}

.cta-band .gr-kicker { margin-bottom: 20px; }

.cta-band h2 {
    font-family: var(--font-display);
    font-weight: 300;
    font-size: clamp(2rem, 4.6vw, 3.2rem);
    line-height: 1.16;
    letter-spacing: 0.01em;
    color: var(--text-primary);
    margin-bottom: 36px;
}

.cta-band h2 em { font-style: normal; color: var(--gold-brand); }

/* ==========================================================================
   17. ACTIVE NAV STATE
   ========================================================================== */

.nav-links a.is-active {
    color: var(--text-primary);
    position: relative;
}

.nav-links a.is-active::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: -6px;
    height: 1px;
    background: var(--gold-brand);
    opacity: 0.8;
}

.nav-links a.nav-cta.is-active::after { display: none; }

/* footer lockup sits smaller */
.footer .gr-logo img { width: 42px; height: 28px; }
.footer .gr-logo .wordmark { font-size: 0.88rem; }
.footer-tagline {
    font-family: var(--font-display);
    font-size: 1rem;
    color: var(--gold-brand);
    margin-top: 14px;
}

/* ==========================================================================
   18. ABOUT HEADER: photo-capable, matching the interior page headers
   ========================================================================== */

.about-hero {
    background-color: var(--bg-secondary);
    background-image: var(--hero-img, none);
    background-size: cover;
    background-position: center;
    text-align: left;
    overflow: hidden;
}

.about-hero::before {
    background: linear-gradient(180deg,
        rgba(250, 248, 244, 0.86) 0%,
        rgba(250, 248, 244, 0.80) 50%,
        rgba(250, 248, 244, 0.94) 100%);
}

.about-hero > * { position: relative; z-index: 1; }

/* the homepage hero likewise carries a scrim once a photo is set */
.hero { overflow: hidden; }

/* ==========================================================================
   19. HOMEPAGE HERO: editorial split: cream headline block, then the
   photograph full-bleed beneath at its native 2.53:1.

   The image already carries the lockup, the pillars and the motto, so
   nothing is overlaid on it. Cropping it into a tall side column would
   cut off both the signage (left) and the sunset (right), so it runs
   full width instead.
   ========================================================================== */

.hero {
    min-height: 0;
    display: block;
    padding: 156px 0 0;
    background-color: var(--bg-primary);
    background-image: none;
    align-items: initial;
}

.hero-inner { display: block; width: 100%; }

.hero .hero-content,
.hero-content {
    max-width: 1180px;
    width: 100%;
    margin: 0 auto;
    padding: 0 40px 66px;
    text-align: left;
}

.hero-title { font-size: clamp(3rem, 7.4vw, 6.1rem); margin-bottom: 26px; }
.hero-subtitle { margin-bottom: 38px; }
.hero-badge { margin-top: 44px; }

/* --- the photograph --- */
.hero-visual {
    width: 100%;
    line-height: 0;
    background: var(--bg-secondary);
}

.hero-visual picture { display: block; }

.hero-visual img {
    display: block;
    width: 100%;
    /* 39.5vw ≈ the image's own 2.53:1, so it shows essentially uncropped */
    height: clamp(300px, 39.5vw, 620px);
    object-fit: cover;
    object-position: center;
}

/* on phones the panorama would be ~150px tall, so give it height and
   bias the crop toward the signage rather than the centre */
@media (max-width: 768px) {
    .hero { padding: 124px 0 0; }
    .hero-content { padding: 0 24px 46px; }
    .hero-title { font-size: clamp(2.6rem, 12vw, 4rem); }
    .hero-visual img {
        height: 340px;
        object-position: 30% center;
    }
}

@media (max-width: 460px) {
    .hero-visual img { height: 290px; object-position: 26% center; }
}

/* the motto column is baked into the photograph now */
.hero-motto { display: none; }

/* ---- hero rhythm: tightened so the photograph crests the fold on desktop
       (was sitting 890px down in a 900px viewport = 10px visible) ---- */
.hero { padding-top: 112px; }
.hero-content { padding-bottom: 40px; }
.hero-label { margin-bottom: 20px; }
.hero-title { margin-bottom: 20px; }
.gr-tagline { margin-bottom: 22px; }
.hero-pillars { margin-bottom: 18px; }
.hero-hr { margin-bottom: 18px; }
.hero-subtitle { margin-bottom: 28px; }
.hero-badge { margin-top: 26px; }

@media (max-width: 768px) {
    .hero { padding-top: 104px; }
    .hero-content { padding-bottom: 34px; }
}

/* ---- mobile crop: the wordmark on the marble wall spans ~11-29% of the
       image width. object-position 30% started the visible window at ~17%
       and clipped it to "REEN RANGER". 8% starts the window at ~4.5%,
       keeping the full lockup plus the pool and skyline. ---- */
@media (max-width: 768px) {
    .hero-visual img { object-position: 8% center; }
}

@media (max-width: 460px) {
    .hero-visual img { height: 300px; object-position: 7% center; }
}

/* ==========================================================================
   20. REAL ESTATE PAGE HERO
   Same editorial pattern as the homepage: cream headline block, then the
   photograph full-bleed beneath. Crop preserves the house (left), the
   infinity pool (centre) and the skyline (right).
   ========================================================================== */

.page-hero .hero-visual img {
    height: clamp(320px, 42vw, 660px);
    object-position: center 58%;   /* holds pool + skyline, trims empty sky */
}

/* phones: bias toward the architecture and pool rather than the far skyline */
@media (max-width: 768px) {
    .page-hero .hero-visual img {
        height: 360px;
        object-position: 34% 60%;
    }
}

@media (max-width: 460px) {
    .page-hero .hero-visual img {
        height: 310px;
        object-position: 30% 62%;
    }
}

/* ---- hero visual: graceful empty state until the photo is supplied ---- */
.hero-visual.is-empty img { display: none; }

.hero-visual.is-empty {
    position: relative;
    height: clamp(300px, 39.5vw, 620px);
    background:
        linear-gradient(145deg,
            rgba(255,255,255,0.5) 0%,
            rgba(184,147,90,0.16) 50%,
            rgba(74,107,85,0.18) 100%),
        var(--bg-sand);
}

@media (max-width: 768px) { .hero-visual.is-empty { height: 340px; } }

/* ==========================================================================
   21. TRADING PAGE HERO
   Crop holds the sunset skyline (left of centre) and the monitors (right),
   trimming the dark foreground desk. No text or graphics are placed over
   the photograph.
   ========================================================================== */

.trading-hero .hero-visual img {
    height: clamp(320px, 42vw, 640px);
    object-position: center 46%;
}

/* phones: favour the monitors and desk, keeping a slice of skyline */
@media (max-width: 768px) {
    .trading-hero .hero-visual img {
        height: 350px;
        object-position: 62% 48%;
    }
}

@media (max-width: 460px) {
    .trading-hero .hero-visual img {
        height: 300px;
        object-position: 66% 50%;
    }
}

/* --- disclaimer bar: must stay unmissable on the cream ground --- */
.trading-disclaimer-bar {
    background: rgba(var(--gold-rgb), 0.12);
    border-top: 1px solid rgba(var(--gold-rgb), 0.35);
    border-bottom: 1px solid rgba(var(--gold-rgb), 0.35);
    padding: 14px 0;
}

.trading-disclaimer-bar p {
    color: #7A5B21;
    font-weight: 600;
    font-size: 0.66rem;
    letter-spacing: 0.14em;
}

.trading-hero .hero-visual.is-empty { height: clamp(320px, 42vw, 640px); }

@media (max-width: 768px) {
    .trading-hero .hero-visual.is-empty { height: 350px; }
}

/* ==========================================================================
   22. REAL PHOTOS ARE IN: retire the placeholder treatments
   The pillar and property placeholder gradients were painted via ::after
   over the whole tile, which would sit on top of a real photograph.
   Suppress them wherever an --img is actually set.
   ========================================================================== */

.pillar-img[style*="--img"]::after,
.prop-image[style*="--img"]::after {
    display: none;
}

/* the hero empty-state fallback is no longer used */
.hero-visual.is-empty { display: none; }

/* ==========================================================================
   23. CONSULTING PAGE HERO: longevity / human performance
   Same full-bleed pattern as Real Estate and Trading.
   Desktop crop trims foreground counter while holding the brain display
   (right), the LONGEVITY/PERFORMANCE pillar (centre), the treatment area
   and the sunset skyline (left).
   ========================================================================== */

.consulting-hero .hero-visual img {
    height: clamp(320px, 42vw, 640px);
    object-position: center 42%;
}

/* phones show ~60% of the width; 62% frames the treatment table, the
   pillar lettering and the brain display together, dropping only the
   far-left sky */
@media (max-width: 768px) {
    .consulting-hero .hero-visual img {
        height: 350px;
        object-position: 62% 45%;
    }
}

@media (max-width: 460px) {
    .consulting-hero .hero-visual img {
        height: 300px;
        object-position: 64% 46%;
    }
}

/* ==========================================================================
   24. TRADING: STRATEGY CARDS
   Replaces the fabricated trade-result cards. Describes method only:
   no tickers, prices, percentages or implied performance.
   ========================================================================== */

.section-intro {
    max-width: 640px;
    margin: 0 0 54px;
}

.section-intro .gr-kicker { margin-bottom: 18px; }

.section-intro h2 {
    font-family: var(--font-display);
    font-weight: 300;
    font-size: clamp(2rem, 4.4vw, 3rem);
    line-height: 1.16;
    color: var(--text-primary);
    margin-bottom: 20px;
}

.section-intro h2 em { font-style: normal; color: var(--gold-brand); }

.section-intro-blurb {
    font-size: 0.95rem;
    line-height: 1.8;
    color: var(--text-secondary);
}

.strategy-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
}

.strategy-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 34px 32px 32px;
    box-shadow: var(--shadow-sm);
    transition: box-shadow 0.35s ease, transform 0.35s ease, border-color 0.35s ease;
}

.strategy-card:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
    border-color: var(--border-light);
}

.strategy-card.hidden { display: none; }

.strategy-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 20px;
}

.strategy-num {
    font-family: var(--font-ui);
    font-size: 0.68rem;
    font-weight: 400;
    letter-spacing: 0.2em;
    color: var(--gold-brand);
}

.strategy-icon { color: var(--sage-deep); opacity: 0.85; }
.strategy-icon svg { display: block; }

.strategy-card .gr-rule { margin-bottom: 20px; }

.strategy-card h3 {
    font-family: var(--font-ui);
    font-size: 0.95rem;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    color: var(--text-primary);
    margin-bottom: 8px;
}

.strategy-sub {
    font-family: var(--font-display);
    font-size: 1.15rem;
    font-weight: 400;
    color: var(--gold-brand);
    margin-bottom: 16px;
}

.strategy-body {
    font-size: 0.9rem;
    line-height: 1.8;
    color: var(--text-secondary);
    margin-bottom: 22px;
}

.strategy-list {
    list-style: none;
    margin: 0;
    padding: 0;
    border-top: 1px solid var(--border);
    padding-top: 18px;
}

.strategy-list li {
    position: relative;
    padding-left: 20px;
    font-size: 0.82rem;
    line-height: 1.6;
    color: var(--text-secondary);
    margin-bottom: 10px;
}

.strategy-list li:last-child { margin-bottom: 0; }

.strategy-list li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.62em;
    width: 8px;
    height: 1px;
    background: var(--gold-brand);
    opacity: 0.8;
}

@media (max-width: 860px) {
    .strategy-grid { grid-template-columns: 1fr; gap: 18px; }
    .strategy-card { padding: 28px 24px 26px; }
    .section-intro { margin-bottom: 38px; }
}

/* ==========================================================================
   25. ABOUT PAGE HERO
   Same full-bleed pattern as Real Estate, Trading and Consulting, so no
   text ever sits over the photograph.

   Desktop crop favours the lower frame: the DISCIPLINE / COMPOUND /
   LONGEVITY / FREEDOM books (bottom-left), the desk, and the skyline and
   sunset through the glass: trimming only the top of the bookshelf.
   ========================================================================== */

.about-page-hero .hero-visual img {
    height: clamp(320px, 42vw, 660px);
    object-position: center 62%;
}

/* phones: a deliberate crop, not a centre slice. The window lands on
   roughly 20-80% of the width, holding the executive chair and desk with
   the skyline and setting sun still in frame. Nudged right from 42% so the
   book spines fall cleanly outside the frame rather than being sliced
   mid-word, which gains more of the sunset. */
@media (max-width: 768px) {
    .about-page-hero .hero-visual img {
        height: 360px;
        object-position: 50% 60%;
    }
}

@media (max-width: 460px) {
    .about-page-hero .hero-visual img {
        height: 310px;
        object-position: 50% 62%;
    }
}

/* ==========================================================================
   26. CONTACT PAGE HERO
   Final hero in the set. Same full-bleed pattern as the other four, so no
   text sits over the photograph.

   Desktop crop keeps the marble meeting table and office environment on
   the left and the terrace, fire pit, pool, skyline and sunset on the right.
   ========================================================================== */

.contact-hero .hero-visual img {
    height: clamp(320px, 42vw, 640px);
    object-position: center 55%;
}

/* phones show ~60% of the width. 68% frames the table and chairs together
   with the terrace and the skyline rather than a generic centre slice. */
@media (max-width: 768px) {
    .contact-hero .hero-visual img {
        height: 350px;
        object-position: 68% 55%;
    }
}

@media (max-width: 460px) {
    .contact-hero .hero-visual img {
        height: 300px;
        object-position: 68% 56%;
    }
}

/* ==========================================================================
   27. "HOT DEAL" BADGE CONTRAST
   pages.css set .prop-status.hot to rgba(255,100,50,0.15): a 15% tint.
   Over the pale line-art placeholder that read acceptably; over real
   photography (a bright sunset sky) it measured ~2.8:1, well under the
   4.5:1 WCAG AA minimum for text this size.

   Fixed with a FULLY OPAQUE brand-bronze pill and white text, so contrast
   is fixed at ~4.95:1 regardless of whether the photo behind it is bright
   or dark. Size, radius, padding, tracking and position are unchanged.
   ========================================================================== */

.prop-status.hot {
    background: #8A6A28;
    border-color: #8A6A28;
    color: #FFFFFF;
}

/* ==========================================================================
   28. PRIVATE PROTECTION: the one dark page.
   Scoped entirely to body.gr-dark so no other section is affected.
   Reference is a private members club after hours: forest-black ground,
   stone and cream text, warm gold hairlines. No imagery, no ornament 
   restraint is the point.
   ========================================================================== */

body.gr-dark {
    --ink:        #0E1511;   /* forest-black ground */
    --ink-raised: #141C17;   /* card surface */
    --stone:      #A8ADA6;   /* body text */
    --cream:      #F2EFE8;   /* headings */
    --brass:      #C6A15B;   /* warm gold */
    --brass-dim:  rgba(198, 161, 91, 0.28);
    --hairline:   rgba(242, 239, 232, 0.10);

    background: var(--ink);
    color: var(--stone);
}

body.gr-dark::before { display: none; }

/* --- chrome inverts --- */
.gr-dark .navbar {
    background: rgba(14, 21, 17, 0.72);
    border-bottom: 1px solid transparent;
}

.gr-dark .navbar.scrolled {
    background: rgba(14, 21, 17, 0.92);
    border-bottom: 1px solid var(--hairline);
    box-shadow: none;
}

.gr-dark .nav-links a        { color: rgba(242, 239, 232, 0.62); }
.gr-dark .nav-links a:hover  { color: var(--cream); }
.gr-dark .nav-links a.is-active { color: var(--cream); }
.gr-dark .nav-links a.is-active::after { background: var(--brass); }

.gr-dark .gr-logo .wordmark { color: var(--cream); }
.gr-dark .gr-logo .subword  { color: var(--brass); }
.gr-dark .nav-toggle span   { background: var(--cream); }

.gr-dark .nav-cta {
    background: transparent !important;
    color: var(--brass) !important;
    border: 1px solid var(--brass-dim) !important;
}

.gr-dark .nav-cta:hover {
    background: rgba(198, 161, 91, 0.08) !important;
    border-color: var(--brass) !important;
}

@media (max-width: 768px) {
    .gr-dark .nav-links {
        background: rgba(14, 21, 17, 0.98);
        border-bottom: 1px solid var(--hairline);
    }
}

.gr-dark .gr-kicker { color: var(--brass); }
.gr-dark .gr-rule   { background: var(--brass); opacity: 0.85; }

/* --- hero --- */
.protect-hero {
    background: var(--ink);
    padding: 168px 0 120px;
    min-height: 0;
}

.protect-hero .hero-inner   { display: block; }
.protect-hero .hero-content { max-width: 1180px; margin: 0 auto; padding: 0 40px; }

.protect-title {
    font-family: var(--font-ui);
    font-weight: 200;
    font-size: clamp(2.9rem, 7vw, 5.6rem);
    line-height: 1.08;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--cream);
    margin: 26px 0 24px;
}

.protect-tagline {
    font-family: var(--font-display);
    font-weight: 400;
    font-size: clamp(1.3rem, 2.6vw, 1.95rem);
    color: var(--brass);
    margin-bottom: 26px;
}

.protect-hero .hero-hr { margin-bottom: 30px; }

.protect-lede {
    max-width: 54ch;
    font-size: 1.05rem;
    line-height: 1.85;
    color: var(--cream);
    margin-bottom: 20px;
}

.protect-body {
    max-width: 58ch;
    font-size: 0.95rem;
    line-height: 1.9;
    color: var(--stone);
    margin-bottom: 38px;
}

/* Local • Domestic • International */
.protect-reach {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 16px;
    font-family: var(--font-ui);
    font-size: 0.72rem;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 0.3em;
    color: var(--cream);
    padding: 20px 0;
    border-top: 1px solid var(--hairline);
    border-bottom: 1px solid var(--hairline);
    margin-bottom: 26px;
}

.protect-reach .dot { color: var(--brass); letter-spacing: 0; }

.protect-note {
    font-size: 0.88rem;
    line-height: 1.8;
    color: var(--stone);
    font-style: italic;
    margin-bottom: 40px;
}

/* --- gold outline CTA --- */
.btn-ghost-gold {
    color: var(--brass);
    border-color: var(--brass-dim);
}

.btn-ghost-gold:hover {
    color: var(--cream);
    border-color: var(--brass);
    background: rgba(198, 161, 91, 0.07);
}

/* --- scope section --- */
.protect-scope { background: var(--ink); padding: 0 0 116px; }

.gr-dark .section-intro h2            { color: var(--cream); }
.gr-dark .section-intro h2 em         { color: var(--brass); }
.gr-dark .section-intro-blurb         { color: var(--stone); }

.protect-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1px;
    background: var(--hairline);
    border: 1px solid var(--hairline);
}

.protect-card {
    background: var(--ink-raised);
    padding: 40px 38px 42px;
    transition: background 0.4s ease;
}

.protect-card:hover { background: #18211B; }

.protect-num {
    font-family: var(--font-display);
    font-size: 0.95rem;
    letter-spacing: 0.26em;
    color: var(--brass);
    display: block;
    margin-bottom: 14px;
}

.protect-card .gr-rule { width: 34px; margin-bottom: 20px; }

.protect-card h3 {
    font-family: var(--font-ui);
    font-size: 0.92rem;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 0.17em;
    color: var(--cream);
    margin-bottom: 14px;
}

.protect-card p {
    font-size: 0.88rem;
    line-height: 1.85;
    color: var(--stone);
    max-width: 44ch;
}

/* --- closing --- */
.protect-close {
    background: var(--ink);
    border-top: 1px solid var(--hairline);
    padding: 104px 0 118px;
    text-align: center;
}

.protect-close .gr-rule { margin: 0 auto 26px; }

.protect-quiet {
    font-family: var(--font-ui);
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.3em;
    color: var(--brass);
    margin-bottom: 26px;
}

.protect-close h2 {
    font-family: var(--font-display);
    font-weight: 300;
    font-size: clamp(1.7rem, 3.8vw, 2.7rem);
    line-height: 1.3;
    color: var(--cream);
    margin-bottom: 40px;
}

.protect-close h2 em { font-style: normal; color: var(--brass); }

/* --- footer inverts --- */
.gr-dark .footer {
    background: #0A0F0C;
    border-top: 1px solid var(--hairline);
    color: var(--stone);
}

.gr-dark .footer h4            { color: var(--cream); }
.gr-dark .footer a             { color: var(--stone); }
.gr-dark .footer a:hover       { color: var(--brass); }
.gr-dark .footer-tagline       { color: var(--brass); }
.gr-dark .footer-bottom        { border-top: 1px solid var(--hairline); color: rgba(168,173,166,0.7); }
.gr-dark .footer-disclaimer    { color: rgba(168,173,166,0.55); }

@media (max-width: 860px) {
    .protect-grid { grid-template-columns: 1fr; }
    .protect-hero { padding: 128px 0 84px; }
    .protect-hero .hero-content { padding: 0 24px; }
    .protect-card { padding: 32px 26px 34px; }
    .protect-reach { gap: 12px; font-size: 0.66rem; letter-spacing: 0.24em; }
}

/* ==========================================================================
   29. PRIVATE PROTECTION HERO MEDIA
   The photograph is bled into the page rather than framed as a card.
   Measured luminance of the source: left column 9-40, right column 48-56,
   so the text sits over the darkest third (the vehicle and the detail) and
   the scene opens up to the right toward the entrance. A bottom fade melts
   the image into the solid ground so there is no visible edge.
   ========================================================================== */

.protect-hero { position: relative; overflow: hidden; }

.protect-hero-media {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
}

.protect-hero-media picture,
.protect-hero-media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 38% center;   /* holds the vehicle and the detail in frame */
}

.protect-hero-scrim {
    position: absolute;
    inset: 0;
    background:
        /* horizontal veil. The source measures 9-40 luminance under the text,
           so cream still clears ~14:1 at these opacities: heavy enough to seat
           the type, light enough that the vehicle and the detail read through. */
        linear-gradient(100deg,
            rgba(14, 21, 17, 0.72) 0%,
            rgba(14, 21, 17, 0.62) 30%,
            rgba(14, 21, 17, 0.46) 50%,
            rgba(14, 21, 17, 0.26) 72%,
            rgba(14, 21, 17, 0.10) 100%),
        /* vertical: seat the nav and melt the base into the page */
        linear-gradient(to bottom,
            rgba(14, 21, 17, 0.70) 0%,
            rgba(14, 21, 17, 0.20) 22%,
            rgba(14, 21, 17, 0.20) 62%,
            rgba(14, 21, 17, 0.92) 90%,
            #0E1511 100%);
}

.protect-hero .hero-inner { position: relative; z-index: 1; }

.protect-hero .hero-content { max-width: 1180px; }

/* the copy occupies the dark third; keep it off the lit entrance */
.protect-hero .protect-lede,
.protect-hero .protect-body,
.protect-hero .protect-note { max-width: 46ch; }

.protect-hero .protect-reach { max-width: 46ch; }

.protect-hero { padding: 190px 0 132px; }

/* --- tablet: square up the crop, strengthen the veil --- */
@media (max-width: 1024px) {
    .protect-hero-media img { object-position: 40% center; }
    .protect-hero-scrim {
        background:
            linear-gradient(100deg,
                #0E1511 0%, #0E1511 34%,
                rgba(14, 21, 17, 0.90) 56%,
                rgba(14, 21, 17, 0.62) 78%,
                rgba(14, 21, 17, 0.40) 100%),
            linear-gradient(to bottom,
                rgba(14, 21, 17, 0.70) 0%,
                rgba(14, 21, 17, 0.28) 24%,
                rgba(14, 21, 17, 0.90) 88%,
                #0E1511 100%);
    }
}

/* --- phones: text spans the width, so the veil goes vertical and the
       crop holds the detail at the vehicle rather than the far doorway --- */
@media (max-width: 768px) {
    .protect-hero { padding: 132px 0 92px; }
    .protect-hero-media img { object-position: 36% center; }
    .protect-hero-scrim {
        background: linear-gradient(to bottom,
            rgba(14, 21, 17, 0.74) 0%,
            rgba(14, 21, 17, 0.42) 18%,
            rgba(14, 21, 17, 0.72) 42%,
            rgba(14, 21, 17, 0.93) 66%,
            #0E1511 92%);
    }
    .protect-hero .protect-lede,
    .protect-hero .protect-body,
    .protect-hero .protect-note,
    .protect-hero .protect-reach { max-width: none; }
}

/* ==========================================================================
   30. PROTECTION: NARROW CINEMATIC BAND
   A single letterbox strip sitting between the scope intro and the plates,
   reading as the overture to Advance & Planning. Same treatment language as
   the hero: no frame, gold hairline, edges dissolved into the ground so it
   bleeds rather than sits in a box.

   The four plates stay typography-led. No other section gets imagery.
   ========================================================================== */

.protect-band {
    position: relative;
    margin: 0 0 40px;
    width: 100vw;
    left: 50%;
    transform: translateX(-50vw);
    height: clamp(210px, 22vw, 320px);
    overflow: hidden;
    background: var(--ink-raised);
}

.protect-band picture,
.protect-band img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* The supplied frame is 16:9, not the 3:1 the band asks for, so it crops
       hard vertically. 66% seats the visible window on y 40-79% of the source:
       the planning tablet, the Green Ranger folio and the book spines, with
       the jet and transport reading above. */
    object-position: center 66%;
}

/* dissolve both ends into the page so there is no hard edge */
.protect-band-scrim {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(to right,
            #0E1511 0%,
            rgba(14, 21, 17, 0.55) 16%,
            rgba(14, 21, 17, 0.18) 38%,
            rgba(14, 21, 17, 0.18) 62%,
            rgba(14, 21, 17, 0.55) 84%,
            #0E1511 100%),
        linear-gradient(to bottom,
            rgba(14, 21, 17, 0.55) 0%,
            rgba(14, 21, 17, 0.12) 30%,
            rgba(14, 21, 17, 0.45) 72%,
            rgba(14, 21, 17, 0.88) 100%);
    pointer-events: none;
}

.protect-band figcaption {
    position: absolute;
    left: 50%;
    bottom: 26px;
    transform: translateX(-50%);
    width: 100%;
    max-width: 1180px;
    padding: 0 40px;
    display: flex;
    align-items: baseline;
    gap: 18px;
}

.protect-band-num {
    font-family: var(--font-display);
    font-size: 0.95rem;
    letter-spacing: 0.26em;
    color: var(--brass);
}

.protect-band-label {
    font-family: var(--font-ui);
    font-size: 0.72rem;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 0.28em;
    color: var(--cream);
}

/* hairline above and below, the only ornament */
.protect-band::before,
.protect-band::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(to right,
        transparent 0%, var(--brass-dim) 22%, var(--brass-dim) 78%, transparent 100%);
    z-index: 2;
}

.protect-band::before { top: 0; }
.protect-band::after  { bottom: 0; }

/* until the photograph is supplied the band simply is not there */
.protect-band.is-empty { display: none; }

@media (max-width: 768px) {
    .protect-band {
        height: 200px;
        margin-bottom: 30px;
    }
    .protect-band img { object-position: center 60%; }
    .protect-band figcaption { padding: 0 24px; bottom: 20px; gap: 14px; }
    .protect-band-label { font-size: 0.64rem; letter-spacing: 0.22em; }
}