/*
Theme Name: Hand for Handmade Foundation
Theme URI: https://handforhandmade.org
Author: Hand for Handmade Foundation
Author URI: https://handforhandmade.org
Description: Official standalone WordPress theme for Hand for Handmade Foundation. Self-contained — no parent theme, no demo importer, no helper plugin required. Auto-provisions all HFH pages, primary navigation and Settings → Reading on first activation. Ships with the brand palette, editorial typography, page templates and craft motif assets.
Version: 1.0.2
Requires at least: 6.0
Tested up to: 6.4
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: handforhandmade
Tags: foundation, craft, editorial, india, terracotta, mandala
*/

/* ============================================================
   Reset + base — replaces what the Mikael parent's main.css
   used to provide. Keep this small and surgical.
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
    margin: 0;
    font-family: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    color: #1F1A16;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
}
img, svg, video { max-width: 100%; display: block; }
button { font: inherit; cursor: pointer; }

/* ---- Custom thin red scrollbar (matches Mikael demo) ---- */
::-webkit-scrollbar { width: 6px; height: 6px; background: #1F1A16; }
::-webkit-scrollbar-thumb { background: #BB5151; border-radius: 0; }
::-webkit-scrollbar-thumb:hover { background: #9D4141; }
::-webkit-scrollbar-track { background: #1F1A16; }
html { scrollbar-color: #BB5151 #1F1A16; scrollbar-width: thin; }

/* ---- Vertical side socials (Fb. Bē. Tw. In.) — rotated on right edge ----
   Uses CSS mix-blend-mode: difference for automatic contrast against ANY
   section background — no JS class detection needed. The browser computes
   |bg_pixel - text_color| per pixel, which inverts white text to dark
   over light backgrounds, to light over dark backgrounds, and to a
   complementary tone over coloured backgrounds. Always readable, never
   the same color as the surface underneath. */
.vlt-fixed-socials {
    position: fixed;
    bottom: 50%;
    right: var(--hfh-space-7);
    color: #FFFFFF;
    mix-blend-mode: difference;
    transform: rotate(-90deg) translate3d(50%, 0, 0);
    transform-origin: 100% 100%;
    z-index: 25;
    display: flex;
    align-items: center;
    font-family: "Inter", sans-serif;
    font-size: var(--hfh-text-sm);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-weight: 700;
}
.vlt-fixed-socials a {
    color: inherit;
    text-decoration: none;
    transition: opacity 0.2s ease;
}
.vlt-fixed-socials a + a { margin-left: var(--hfh-space-4); }
.vlt-fixed-socials a:hover { opacity: 0.7; }
/* Fallback for browsers without mix-blend-mode support — fall back to the
   prior JS-class system (.hfh-on-dark-section / .hfh-on-sage-section
   are still set by hfh-main.js and remain useful if blend-mode is off). */
@supports not (mix-blend-mode: difference) {
    .vlt-fixed-socials { color: var(--hfh-ink); mix-blend-mode: normal; }
    html.hfh-on-dark-section .vlt-fixed-socials { color: #FFFFFF; }
    html.hfh-on-sage-section .vlt-fixed-socials { color: var(--hfh-ink); }
}
@media (max-width: 991px) { .vlt-fixed-socials { display: none; } }

/* ---- Fixed contact bubble bottom-right ---- */
.vlt-fixed-action-block {
    position: fixed;
    bottom: 0;
    right: 0;
    width: clamp(64px, 16px + 3.33vw, 80px);
    height: clamp(64px, 16px + 3.33vw, 80px);
    background: #1F1A16;
    color: #F7F2EA;
    border-top-left-radius: 6px;
    z-index: 25;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    transition: background 0.2s ease, color 0.2s ease;
}
.vlt-fixed-action-block:hover { background: #BB5151; color: #FFFFFF; }
.vlt-fixed-action-block svg { width: clamp(20px, 8px + 0.9375vw, 26px); height: clamp(20px, 8px + 0.9375vw, 26px); }
@media (max-width: 640px) {
    .vlt-fixed-action-block { width: 64px; height: 64px; }
    .vlt-fixed-action-block svg { width: 22px; height: 22px; }
}

/* Site-wide main wrapper used by every template */
.vlt-main { display: block; }

/* ---- Navbar base structural styles (no Mikael main.css anymore) ---- */
.vlt-navbar {
    position: absolute;
    top: 0; left: 0; right: 0;
    z-index: 30;
    transition: background 0.3s ease, box-shadow 0.3s ease, padding 0.3s ease, top 0.2s ease;
}
.vlt-navbar--sticky.vlt-navbar--solid {
    position: fixed;
    background: rgba(255, 254, 250, 0.96);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 2px 14px rgba(31, 26, 22, 0.08);
}
/* WordPress admin bar offset — when logged-in users see the toolbar at the
   top, push our absolute/fixed navbar below it so the wordmark isn't
   covered by the admin toolbar. */
.admin-bar .vlt-navbar { top: 32px; }
.admin-bar .vlt-navbar--sticky.vlt-navbar--solid { top: 32px; }
@media screen and (max-width: 782px) {
    .admin-bar .vlt-navbar,
    .admin-bar .vlt-navbar--sticky.vlt-navbar--solid { top: 46px; }
}
/* Pad the wordmark so glyphs with tall ascenders (Cormorant Garamond)
   have breathing room — fixes the slight top-of-letter clip. */
.vlt-navbar-inner { padding: var(--hfh-space-4) 0 var(--hfh-space-3); }
/* Override the constrained container only inside the navbar so the
   logo hugs the left edge and the burger hugs the right edge of the
   viewport (with a small gutter), instead of being capped at 1220px. */
.vlt-navbar-inner > .hfh-container {
    max-width: none;
    padding: 0 var(--hfh-space-5);
}
.vlt-navbar-flex {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--hfh-space-4);
}
.vlt-navbar-logo {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
    flex: 0 0 auto;
}
.vlt-navbar-logo img {
    height: clamp(38px, 8px + 2.34vw, 44px);
    width: auto;
    display: block;
}
.vlt-navbar-contacts {
    display: none;
    flex: 1 1 auto;
    text-align: center;
}
@media (min-width: 768px) { .vlt-navbar-contacts { display: block; } }
.vlt-navbar-contacts ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: inline-flex;
    gap: var(--hfh-space-3);
    align-items: center;
}
.vlt-navbar-contacts li { display: inline-flex; align-items: center; }
.vlt-navbar-contacts li::after {
    content: "/";
    margin-left: var(--hfh-space-3);
    opacity: 0.45;
}
.vlt-navbar-contacts li:last-child::after { content: ""; margin: 0; }
.vlt-navbar-contacts a {
    font-family: "Inter", sans-serif;
    font-size: var(--hfh-text-xs);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    text-decoration: none;
    font-weight: 600;
}

/* Burger button */
.vlt-menu-burger {
    background: none;
    border: none;
    padding: var(--hfh-space-2);
    display: flex;
    flex-direction: column;
    gap: var(--hfh-space-1);
    width: clamp(30px, 14px + 1.25vw, 38px);
    flex: 0 0 auto;
}
.vlt-menu-burger span {
    width: 100%;
    height: 2px;
    background: currentColor;
    display: block;
    transition: transform 0.3s ease, opacity 0.3s ease;
}
.vlt-menu-burger.is-active span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.vlt-menu-burger.is-active span:nth-child(2) { opacity: 0; }
.vlt-menu-burger.is-active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ============================================================
   Offcanvas menu drawer — HFH design reference
   ------------------------------------------------------------
   Motion design (ui-ux-pro-max §7):
     • Panel slide   : 0.55s ease-out enter / 0.38s ease-in exit
     • Overlay fade  : same enter / exit windows as the panel
     • Item reveal   : staggered 40ms apart, starts ~150ms in
     • All animations: transform + opacity only (GPU-cheap)
     • Honors prefers-reduced-motion (rules further down)
   Layout:
     • Wider panel (~640px on desktop, full-width on mobile)
     • Red "X" close anchored top-right inside the drawer
     • Bold sans-serif (Inter 700) menu items in ivory
     • Active item flips terracotta — slash hangs in a left
       gutter (hanging indent) so all menu text aligns flush
     • Footer block: red socials row + muted copyright
   ============================================================ */
:root {
    --hfh-drawer-enter:  cubic-bezier(0.22, 1, 0.36, 1);   /* smooth ease-out */
    --hfh-drawer-exit:   cubic-bezier(0.55, 0, 1, 0.45);   /* crisp ease-in */
    --hfh-drawer-enter-ms: 900ms;          /* +20% over previous pass */
    --hfh-drawer-exit-ms:  625ms;          /* exit stays ~69% of enter */
    --hfh-drawer-stagger-base: 240ms;      /* panel gets further in first */
    --hfh-drawer-stagger-step: 65ms;       /* slower, more deliberate cascade */
    --hfh-drawer-gutter: 1.75rem;          /* slash gutter width */
}
.vlt-offcanvas-menu {
    position: fixed;
    top: 0; right: 0; bottom: 0;
    width: 100%;
    background: #1F1A16;
    transform: translateX(100%);
    transition: transform var(--hfh-drawer-exit-ms) var(--hfh-drawer-exit);
    z-index: 80;
    overflow-y: auto;
    padding: 8rem var(--hfh-space-6) var(--hfh-space-6);
    display: flex;
    flex-direction: column;
    will-change: transform;
}
@media (min-width: 576px) {
    .vlt-offcanvas-menu {
        width: min(640px, 50vw);
        padding: 8rem var(--hfh-space-7) var(--hfh-space-6);
    }
}
.vlt-offcanvas-menu.is-open {
    transform: translateX(0);
    transition: transform var(--hfh-drawer-enter-ms) var(--hfh-drawer-enter);
}

/* Close X — red, top-right of the drawer */
.vlt-offcanvas-close {
    position: absolute;
    top: var(--hfh-space-5);
    right: var(--hfh-space-6);
    background: transparent;
    border: 0;
    padding: var(--hfh-space-2);
    line-height: 0;
    color: #BB5151;
    cursor: pointer;
    opacity: 0;
    transform: scale(0.85);
    transition:
        color 0.2s ease,
        opacity 0.3s var(--hfh-drawer-enter),
        transform 0.35s var(--hfh-drawer-enter);
}
.vlt-offcanvas-menu.is-open .vlt-offcanvas-close {
    opacity: 1;
    transform: scale(1);
    transition-delay: 250ms;
}
.vlt-offcanvas-close:hover { transform: rotate(90deg); color: #D49696; }
.vlt-offcanvas-close:focus-visible {
    outline: 2px solid #D49696;
    outline-offset: 4px;
    border-radius: 4px;
}
.vlt-offcanvas-close svg { display: block; }
@media (max-width: 575.98px) {
    .vlt-offcanvas-close { top: 1.25rem; right: 1.5rem; }
}

/* Nav area takes the remaining space above the footer */
.vlt-offcanvas-nav { flex: 1 1 auto; }

.vlt-offcanvas-menu ul,
.vlt-offcanvas-menu .menu {
    list-style: none;
    padding: 0;
    margin: 0;
}
/* Each list item: hanging-indent gutter on the left so the active
   item's slash sits in that gutter and the link text on every row
   shares the same left edge. */
.vlt-offcanvas-menu li {
    display: block;
    /* Slightly tighter vertical rhythm — ~13px above and below
       each item — keeps the menu compact without feeling cramped. */
    padding: 0.8125rem 0 0.8125rem var(--hfh-drawer-gutter);
    position: relative;
    /* Stagger animation — items fade + slide in from the right */
    opacity: 0;
    transform: translateX(18px);
    transition:
        opacity 0.7s var(--hfh-drawer-enter),
        transform 0.7s var(--hfh-drawer-enter),
        color 0.25s ease;
}
.vlt-offcanvas-menu.is-open li {
    opacity: 1;
    transform: translateX(0);
}
/* Stagger per item — base 150ms after the panel starts, then 40ms each */
.vlt-offcanvas-menu.is-open li:nth-child(1) { transition-delay: calc(var(--hfh-drawer-stagger-base) + 0 * var(--hfh-drawer-stagger-step)); }
.vlt-offcanvas-menu.is-open li:nth-child(2) { transition-delay: calc(var(--hfh-drawer-stagger-base) + 1 * var(--hfh-drawer-stagger-step)); }
.vlt-offcanvas-menu.is-open li:nth-child(3) { transition-delay: calc(var(--hfh-drawer-stagger-base) + 2 * var(--hfh-drawer-stagger-step)); }
.vlt-offcanvas-menu.is-open li:nth-child(4) { transition-delay: calc(var(--hfh-drawer-stagger-base) + 3 * var(--hfh-drawer-stagger-step)); }
.vlt-offcanvas-menu.is-open li:nth-child(5) { transition-delay: calc(var(--hfh-drawer-stagger-base) + 4 * var(--hfh-drawer-stagger-step)); }
.vlt-offcanvas-menu.is-open li:nth-child(6) { transition-delay: calc(var(--hfh-drawer-stagger-base) + 5 * var(--hfh-drawer-stagger-step)); }
.vlt-offcanvas-menu.is-open li:nth-child(7) { transition-delay: calc(var(--hfh-drawer-stagger-base) + 6 * var(--hfh-drawer-stagger-step)); }
.vlt-offcanvas-menu.is-open li:nth-child(8) { transition-delay: calc(var(--hfh-drawer-stagger-base) + 7 * var(--hfh-drawer-stagger-step)); }
.vlt-offcanvas-menu.is-open li:nth-child(9) { transition-delay: calc(var(--hfh-drawer-stagger-base) + 8 * var(--hfh-drawer-stagger-step)); }

.vlt-offcanvas-menu a {
    display: inline-block;
    color: #F7F2EA !important;
    font-family: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: 2rem;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.015em;
    text-decoration: none;
    transition: color 0.25s ease;
}
@media (max-width: 575.98px) {
    .vlt-offcanvas-menu a { font-size: 1.625rem; }
}

.vlt-offcanvas-menu li:hover > a,
.vlt-offcanvas-menu li.current-menu-item > a,
.vlt-offcanvas-menu li.current_page_item > a {
    color: #BB5151 !important;
}
/* Slash indicator — absolutely positioned in the li's gutter so the
   link text on every row stays vertically aligned. Hidden by default,
   revealed on hover and persistent on the active item. */
.vlt-offcanvas-menu li > a::before {
    content: "/";
    position: absolute;
    left: 0;
    top: 0.8125rem;           /* aligns with li padding-top */
    color: #BB5151;
    opacity: 0;
    transform: translateX(-6px);
    transition:
        opacity 0.25s ease,
        transform 0.25s var(--hfh-drawer-enter);
    pointer-events: none;
}
.vlt-offcanvas-menu li:hover > a::before,
.vlt-offcanvas-menu li.current-menu-item > a::before,
.vlt-offcanvas-menu li.current_page_item > a::before {
    opacity: 1;
    transform: translateX(0);
}

/* Keyboard focus — visible ring on link itself */
.vlt-offcanvas-menu a:focus-visible {
    outline: 2px solid #BB5151;
    outline-offset: 4px;
    border-radius: 2px;
}

/* Drawer footer — socials row + copyright.
   Fades in after the menu items finish staggering so the eye
   reads the menu first and the meta info settles in last. */
.vlt-offcanvas-footer {
    margin-top: var(--hfh-space-6);
    opacity: 0;
    transform: translateY(8px);
    transition:
        opacity 0.45s var(--hfh-drawer-enter),
        transform 0.45s var(--hfh-drawer-enter);
}
.vlt-offcanvas-menu.is-open .vlt-offcanvas-footer {
    opacity: 1;
    transform: translateY(0);
    /* base 240 + 8 items * 65ms + cushion */
    transition-delay: 880ms;
}
.vlt-offcanvas-socials {
    display: flex;
    gap: var(--hfh-space-4);
    margin-bottom: var(--hfh-space-4);
    font-family: "Inter", sans-serif;
    font-size: var(--hfh-text-base);
    font-weight: 700;
    letter-spacing: 0.04em;
}
.vlt-offcanvas-socials a {
    color: #BB5151 !important;
    text-decoration: none;
    transition: opacity 0.2s ease;
}
.vlt-offcanvas-socials a:hover { opacity: 0.7; }
.vlt-offcanvas-copyright {
    margin: 0;
    font-family: "Inter", sans-serif;
    font-size: var(--hfh-text-xs);
    line-height: 1.6;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: rgba(247, 242, 234, 0.55);
}
.vlt-offcanvas-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 70;
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--hfh-drawer-exit-ms) var(--hfh-drawer-exit);
}
.vlt-offcanvas-overlay.is-open {
    opacity: 1;
    pointer-events: auto;
    transition: opacity var(--hfh-drawer-enter-ms) var(--hfh-drawer-enter);
}
body.menu-open { overflow: hidden; }

/* Reduced motion — collapse drawer transitions to near-instant.
   The drawer still opens/closes; the choreography is shed so users
   with vestibular sensitivities aren't kept waiting. (ui-ux-pro-max
   §1 reduced-motion + §7 reduced-motion.) */
@media (prefers-reduced-motion: reduce) {
    .vlt-offcanvas-menu,
    .vlt-offcanvas-menu.is-open,
    .vlt-offcanvas-overlay,
    .vlt-offcanvas-overlay.is-open,
    .vlt-offcanvas-close,
    .vlt-offcanvas-menu.is-open .vlt-offcanvas-close,
    .vlt-offcanvas-menu li,
    .vlt-offcanvas-menu.is-open li,
    .vlt-offcanvas-footer,
    .vlt-offcanvas-menu.is-open .vlt-offcanvas-footer,
    .vlt-offcanvas-menu li > a::before {
        transition-duration: 0.01ms !important;
        transition-delay: 0ms !important;
        animation-duration: 0.01ms !important;
        animation-delay: 0ms !important;
    }
}

/* ============================================================
   HFH Brand Tokens (aligned to brand PRD)
   ============================================================ */
:root {
    /* Brand palette — exact PRD values */
    --hfh-red:        #BB5151;   /* Terracotta Red — primary */
    --hfh-red-dark:   #9D4141;   /* Deep Clay Red */
    --hfh-sage:       #B1AC9B;   /* Muted Sage Khaki — secondary */
    --hfh-stone:      #C8C2B8;   /* Warm Stone */
    --hfh-ivory:      #F7F2EA;   /* Soft Ivory — main bg */
    --hfh-ink:        #1F1A16;   /* Charcoal Ink — text */
    --hfh-earth:      #4F3129;   /* Earth Brown — soft text */
    --hfh-gold:       #A98246;   /* Brass Craft Gold */
    --hfh-rose:       #D49696;   /* Dusty Rose — soft accent */
    --hfh-border:     #DDD6C8;   /* Stone Line */

    /* Legacy aliases — keep existing markup working without rewriting templates */
    --hfh-bg:          var(--hfh-ivory);
    --hfh-bg-alt:      #EFE7D7;   /* slightly deeper ivory for soft panels */
    --hfh-bg-deep:     var(--hfh-stone);
    --hfh-paper:       #FFFFFF;
    --hfh-ink-soft:    var(--hfh-earth);
    --hfh-ink-mute:    #8B7A6B;
    --hfh-accent:      var(--hfh-red);
    --hfh-accent-dark: var(--hfh-red-dark);
    --hfh-accent-soft: var(--hfh-rose);
    --hfh-green:       var(--hfh-sage);
    --hfh-line:        var(--hfh-border);
    --hfh-shadow:      0 14px 38px rgba(31, 26, 22, 0.10);

    /* Type */
    --hfh-font-display: "Cormorant Garamond", "Playfair Display", Georgia, serif;
    --hfh-font-body:    "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

    /* Layout */
    --hfh-radius: 4px;
    --hfh-radius-pill: 999px;

    /* === HFH Fluid Desktop System ===
       All fluid tokens linearly interpolate between viewport widths
       1280px (small laptop) and 1920px (Full HD). Values are clamped
       so widths outside that range stay locked to min/max.

       Container breathes on narrow laptops, caps at 1220px on wide.
    */
    --hfh-container: min(1220px, 92vw);
    --hfh-gutter:    clamp(20px, 4px + 1.25vw, 28px);

    /* Fluid spacing scale — use instead of raw px for margins/padding/gap */
    --hfh-space-1:   clamp(4px,  0.3125vw, 6px);
    --hfh-space-2:   clamp(8px,  0.625vw,  12px);
    --hfh-space-3:   clamp(12px, 0.9375vw, 18px);
    --hfh-space-4:   clamp(16px, 1.25vw,   24px);
    --hfh-space-5:   clamp(24px, 1.875vw,  36px);
    --hfh-space-6:   clamp(32px, 2.5vw,    48px);
    --hfh-space-7:   clamp(40px, 3.125vw,  60px);
    --hfh-space-8:   clamp(56px, 4.375vw,  84px);

    /* Fluid type scale — for body / UI / supporting copy.
       Display headings (h1/h2) keep their existing vw-based clamps. */
    --hfh-text-xs:   clamp(0.72rem, 0.045vw + 0.69rem, 0.78rem);
    --hfh-text-sm:   clamp(0.82rem, 0.06vw  + 0.785rem, 0.9rem);
    --hfh-text-base: clamp(15px,    11px + 0.3125vw,    17px);
    --hfh-text-lg:   clamp(1.05rem, 0.18vw + 1.0rem,   1.2rem);
    --hfh-text-xl:   clamp(1.18rem, 0.2vw  + 1.13rem,  1.32rem);
}

/* ============================================================
   Base — only inside HFH pages so we don't disturb other pages
   ============================================================ */
.hfh-page,
body.page-template-template-hfh-home,
body.page-template-template-hfh-academy,
body.page-template-template-hfh-cluster,
body.page-template-template-hfh-programs,
body.page-template-template-hfh-impact,
body.page-template-template-hfh-partner,
body.page-template-template-hfh-about,
body.page-template-template-hfh-contact {
    background: var(--hfh-bg);
    color: var(--hfh-ink);
    font-family: var(--hfh-font-body);
    font-size: var(--hfh-text-base);
    line-height: 1.65;
}

.hfh-page h1, .hfh-page h2, .hfh-page h3, .hfh-page h4 {
    font-family: var(--hfh-font-display);
    color: var(--hfh-ink);
    line-height: 0.95;
    font-weight: 500;
    letter-spacing: -0.03em;
    margin: 0 0 0.55em;
}
.hfh-page h1 { font-size: clamp(3rem, 6.5vw, 6rem); line-height: 0.92; letter-spacing: -0.035em; }
.hfh-page h2 { font-size: clamp(2.5rem, 5vw, 5rem);   line-height: 0.95; letter-spacing: -0.03em; }
.hfh-page h3 { font-size: clamp(1.5rem, 2.4vw, 1.95rem); line-height: 1.15; letter-spacing: -0.015em; font-weight: 500; }
.hfh-page h4 { font-size: var(--hfh-text-xl); line-height: 1.25; font-weight: 600; letter-spacing: -0.005em; }
.hfh-page p  { color: var(--hfh-earth); margin: 0 0 1.1em; }
.hfh-page a  { color: var(--hfh-red); text-decoration: none; border-bottom: 1px solid transparent; transition: border-color .2s ease; }
.hfh-page a:hover { border-bottom-color: var(--hfh-red); }
.hfh-page strong { color: var(--hfh-ink); }

/* ============================================================
   Layout primitives
   ============================================================ */
.hfh-container {
    max-width: var(--hfh-container);
    margin: 0 auto;
    padding: 0 var(--hfh-gutter);
}
.hfh-section {
    padding: clamp(56px, 8vw, 104px) 0;
    position: relative;
}
.hfh-section--tight { padding: clamp(40px, 5vw, 64px) 0; }
.hfh-section--cream { background: var(--hfh-bg-alt); }
.hfh-section--ivory { background: var(--hfh-ivory); }
.hfh-section--deep  { background: var(--hfh-stone); }
.hfh-section--ink   { background: var(--hfh-ink); color: var(--hfh-ivory); }
.hfh-section--ink h2, .hfh-section--ink h3, .hfh-section--ink h1 { color: #FFFFFF; }
.hfh-section--ink p { color: rgba(247, 242, 234, 0.82); }
.hfh-section--ink strong { color: #FFFFFF; }

/* Sage — used heavily on Cluster Development, About story, Impact reflection */
.hfh-section--sage { background: var(--hfh-sage); color: var(--hfh-ink); }
.hfh-section--sage h1, .hfh-section--sage h2, .hfh-section--sage h3 { color: var(--hfh-ink); }
.hfh-section--sage p { color: var(--hfh-earth); }
.hfh-section--sage .hfh-eyebrow { color: var(--hfh-red-dark); }
.hfh-section--sage strong { color: var(--hfh-ink); }

/* Terracotta — hero, Academy feature, major CTA panels */
.hfh-section--terracotta,
.hfh-section--red { background: var(--hfh-red); color: #FFFFFF; }
.hfh-section--terracotta h1, .hfh-section--terracotta h2, .hfh-section--terracotta h3,
.hfh-section--red h1, .hfh-section--red h2, .hfh-section--red h3 { color: #FFFFFF; }
.hfh-section--terracotta p,
.hfh-section--red p { color: rgba(255, 255, 255, 0.92); }
.hfh-section--terracotta strong,
.hfh-section--red strong { color: #FFFFFF; }
.hfh-section--terracotta a:not(.hfh-btn),
.hfh-section--red a:not(.hfh-btn) { color: #FFFFFF; border-bottom-color: rgba(255,255,255,0.5); }

.hfh-eyebrow {
    display: inline-block;
    font-family: var(--hfh-font-body);
    text-transform: uppercase;
    letter-spacing: 0.18em;
    font-size: var(--hfh-text-xs);
    font-weight: 600;
    color: var(--hfh-accent);
    margin-bottom: var(--hfh-space-3);
}
.hfh-section--ink .hfh-eyebrow,
.hfh-section--terracotta .hfh-eyebrow { color: var(--hfh-gold); }
/* Feature-hero on terracotta: white h2/p text already, muted brand gold
   blends into the red. Use a bright saffron-amber so the eyebrow reads
   as a distinct accent. Scoped to terracotta — sage variant keeps its
   default dark-red eyebrow (which already reads well on khaki). */
.hfh-section--terracotta.hfh-feature-hero .hfh-eyebrow { color: #F4C95C; }

.hfh-lead {
    font-size: clamp(1.05rem, 1.4vw, 1.2rem);
    line-height: 1.65;
    max-width: 720px;
    color: var(--hfh-ink-soft);
}
.hfh-section--ink .hfh-lead,
.hfh-section--terracotta .hfh-lead { color: rgba(255, 254, 250, 0.85); }

/* ============================================================
   Buttons — pill-shaped, editorial, PRD-spec
   Primary defaults to ink-fill on light backgrounds; switches to
   white-fill automatically when placed inside a red/ink section.
   ============================================================ */
.hfh-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--hfh-space-2);
    padding: var(--hfh-space-3) var(--hfh-space-5);
    border: 1.5px solid var(--hfh-ink);
    background: var(--hfh-ink);
    color: #FFFFFF !important;
    font-family: var(--hfh-font-body);
    font-size: var(--hfh-text-sm);
    font-weight: 700;
    letter-spacing: 0.02em;
    border-radius: var(--hfh-radius-pill);
    text-transform: none;
    text-decoration: none;
    cursor: pointer;
    transition: transform 0.2s ease, background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
    border-bottom-color: var(--hfh-ink) !important;
    line-height: 1;
}
.hfh-btn:hover {
    background: var(--hfh-red);
    border-color: var(--hfh-red) !important;
    border-bottom-color: var(--hfh-red) !important;
    transform: translateY(-1px);
    color: #FFFFFF !important;
}
.hfh-btn::after {
    content: "→";
    font-size: var(--hfh-text-sm);
    margin-left: 2px;
    transition: transform 0.2s ease;
}
.hfh-btn:hover::after { transform: translateX(3px); }

/* Ghost — transparent with currentColor border, inherits surrounding text colour */
.hfh-btn--ghost {
    background: transparent;
    color: var(--hfh-ink) !important;
    border-color: var(--hfh-ink) !important;
    border-bottom-color: var(--hfh-ink) !important;
}
.hfh-btn--ghost:hover {
    background: var(--hfh-ink);
    color: #FFFFFF !important;
}

/* Light — for use on red/ink backgrounds */
.hfh-btn--light {
    background: #FFFFFF;
    color: var(--hfh-ink) !important;
    border-color: #FFFFFF !important;
    border-bottom-color: #FFFFFF !important;
}
.hfh-btn--light:hover {
    background: var(--hfh-ivory);
    color: var(--hfh-ink) !important;
    border-color: var(--hfh-ivory) !important;
}

/* Ink — kept as alias for explicit calls */
.hfh-btn--ink {
    background: var(--hfh-ink);
    border-color: var(--hfh-ink) !important;
    color: #FFFFFF !important;
}
.hfh-btn--ink:hover {
    background: var(--hfh-red);
    border-color: var(--hfh-red) !important;
}

/* Inside red / ink sections, default .hfh-btn flips to white-fill */
.hfh-section--terracotta .hfh-btn:not(.hfh-btn--ghost):not(.hfh-btn--ink),
.hfh-section--red .hfh-btn:not(.hfh-btn--ghost):not(.hfh-btn--ink),
.hfh-section--ink .hfh-btn:not(.hfh-btn--ghost):not(.hfh-btn--ink),
.hfh-hero .hfh-btn:not(.hfh-btn--ghost):not(.hfh-btn--ink) {
    background: #FFFFFF;
    color: var(--hfh-ink) !important;
    border-color: #FFFFFF !important;
    border-bottom-color: #FFFFFF !important;
}
.hfh-section--terracotta .hfh-btn:not(.hfh-btn--ghost):not(.hfh-btn--ink):hover,
.hfh-section--red .hfh-btn:not(.hfh-btn--ghost):not(.hfh-btn--ink):hover,
.hfh-section--ink .hfh-btn:not(.hfh-btn--ghost):not(.hfh-btn--ink):hover,
.hfh-hero .hfh-btn:not(.hfh-btn--ghost):not(.hfh-btn--ink):hover {
    background: var(--hfh-ink);
    color: #FFFFFF !important;
    border-color: var(--hfh-ink) !important;
}

/* Inside red/ink sections, ghost flips to white border + white text */
.hfh-section--terracotta .hfh-btn--ghost,
.hfh-section--red .hfh-btn--ghost,
.hfh-section--ink .hfh-btn--ghost,
.hfh-hero .hfh-btn--ghost {
    color: #FFFFFF !important;
    border-color: rgba(255,255,255,0.6) !important;
    border-bottom-color: rgba(255,255,255,0.6) !important;
}
.hfh-section--terracotta .hfh-btn--ghost:hover,
.hfh-section--red .hfh-btn--ghost:hover,
.hfh-section--ink .hfh-btn--ghost:hover,
.hfh-hero .hfh-btn--ghost:hover {
    background: #FFFFFF;
    color: var(--hfh-ink) !important;
    border-color: #FFFFFF !important;
}

.hfh-btn-row {
    display: flex;
    gap: var(--hfh-space-3);
    flex-wrap: wrap;
    margin-top: var(--hfh-space-5);
    align-items: center;
}

/* ============================================================
   Hero — Mikael-demo style: bright red, full-bleed figure on
   the right, big dark-red spotlight behind it.
   Bg colour: rgb(182, 0, 12) = #B6000C
   ============================================================ */
.hfh-hero {
    background-color: #BC5151;
    /* 4 scattered small mandalas at user-marked positions (top-right, top-left,
       mid-left, bottom-left). PNG pattern on the right is on ::before, so these
       small dark SVG mandalas sit independently on the hero's own bg. */
    background-image:
        url('assets/img/hfh-mandala-dark.svg'),
        url('assets/img/hfh-mandala-dark.svg'),
        url('assets/img/hfh-mandala-dark.svg'),
        url('assets/img/hfh-mandala-dark.svg');
    background-repeat: no-repeat, no-repeat, no-repeat, no-repeat;
    background-position:
        47% 7%,
        12% 17%,
        5% 55%,
        19% 85%;
    background-size:
        90px,
        140px,
        160px,
        120px;
    color: #FFFFFF;
    min-height: 100vh;
    padding: clamp(96px, 11vw, 150px) 0 clamp(40px, 5vw, 80px);
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    isolation: isolate;
}
/* Big circular dark-red spotlight behind the figure */
.hfh-hero::after {
    content: "";
    position: absolute;
    right: -6%;
    top: 50%;
    transform: translateY(-50%);
    width: clamp(420px, 70vh, 780px);
    height: clamp(420px, 70vh, 780px);
    background: radial-gradient(circle at center,
        rgba(60, 0, 0, 0.55) 0%,
        rgba(60, 0, 0, 0.35) 35%,
        rgba(60, 0, 0, 0.12) 60%,
        transparent 78%);
    border-radius: 50%;
    pointer-events: none;
    z-index: 1;
    filter: blur(24px);
}

.hfh-hero__inner {
    position: relative;
    z-index: 3;
    display: block;
    width: 100%;
}
.hfh-hero__text {
    max-width: 560px;
    position: relative;
    z-index: 3;
}
.hfh-hero .hfh-eyebrow { color: rgba(255,255,255,0.85); }
.hfh-hero__title {
    font-family: var(--hfh-font-display);
    font-size: clamp(3.5rem, 8vw, 7.5rem);
    line-height: 0.92;
    letter-spacing: -0.04em;
    margin: 0 0 var(--hfh-space-5);
    color: #FFFFFF;
    font-weight: 500;
}
.hfh-hero__title em {
    font-style: italic;
    color: #FFFFFF;
    display: block;
}
.hfh-hero__lead {
    font-size: clamp(1.05rem, 1.4vw, 1.18rem);
    color: rgba(255, 255, 255, 0.92);
    max-width: 540px;
    line-height: 1.65;
}

/* Full-bleed figure anchored to the right of the hero (Mikael demo style) */
.hfh-hero__art {
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: clamp(360px, 45vw, 700px);
    aspect-ratio: auto;
    background: transparent;
    border: none;
    border-radius: 0;
    box-shadow: none;
    overflow: visible;
    z-index: 2;
    pointer-events: none;
}
.hfh-hero__art img {
    width: 100%;
    height: 100%;
    aspect-ratio: 1200 / 1499;
    object-fit: contain;
    object-position: right bottom;
    display: block;
    margin-left: auto;
}
.hfh-hero__art::after { display: none !important; }

/* Tablet & smaller: stack the figure under the text, contained */
@media (max-width: 1024px) {
    .hfh-hero {
        min-height: auto;
        padding-bottom: 56px;
    }
    .hfh-hero__art {
        position: relative;
        right: auto;
        top: auto;
        bottom: auto;
        width: 100%;
        max-width: 460px;
        height: auto;
        margin: 48px auto 0;
    }
    .hfh-hero__art img {
        height: auto;
        object-fit: contain;
        object-position: center bottom;
    }
    .hfh-hero__text { max-width: 100%; }
}

/* ============================================================
   Page header (for inner pages)
   ============================================================ */
.hfh-page-header {
    background: var(--hfh-red);
    color: #FFFFFF;
    padding: clamp(110px, 12vw, 160px) 0 clamp(60px, 7vw, 90px);
    border-bottom: none;
    position: relative;
    overflow: hidden;
}
.hfh-page-header > .hfh-container { position: relative; z-index: 2; }
.hfh-page-header .hfh-eyebrow { color: rgba(255,255,255,0.85); }
.hfh-page-header__title {
    font-family: var(--hfh-font-display);
    font-size: clamp(3rem, 6.5vw, 6rem);
    line-height: 0.95;
    letter-spacing: -0.035em;
    margin: 0 0 var(--hfh-space-5);
    color: #FFFFFF;
    font-weight: 500;
}
.hfh-page-header__lead {
    max-width: 760px;
    font-size: clamp(1.05rem, 1.4vw, 1.2rem);
    color: rgba(255, 255, 255, 0.92);
    line-height: 1.6;
}

/* ============================================================
   HFH Mandala overlay — subtle craft motif behind content on
   brand-color sections (hero, page header, terracotta, sage).
   Uses mask-image so the SAME SVG can be tinted differently per
   section background, mirroring the brochure motif treatment.
   ============================================================ */
.hfh-hero,
.hfh-page-header,
.hfh-section--terracotta,
.hfh-section--red,
.hfh-section--sage {
    position: relative;
    overflow: hidden;
    isolation: isolate;
}
/* Scatter 5 small mandalas (NOT a tile grid) across every brand-color
   section. Same 5 positions + sizes everywhere for design consistency.
   Per-surface opacity is the only differentiator. */
.hfh-hero::before,
.hfh-page-header::before,
.hfh-section--terracotta::before,
.hfh-section--red::before,
.hfh-section--sage::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    -webkit-mask-image:
        url('assets/img/hfh-mandala.svg'),
        url('assets/img/hfh-mandala.svg'),
        url('assets/img/hfh-mandala.svg'),
        url('assets/img/hfh-mandala.svg'),
        url('assets/img/hfh-mandala.svg');
    mask-image:
        url('assets/img/hfh-mandala.svg'),
        url('assets/img/hfh-mandala.svg'),
        url('assets/img/hfh-mandala.svg'),
        url('assets/img/hfh-mandala.svg'),
        url('assets/img/hfh-mandala.svg');
    -webkit-mask-repeat: no-repeat, no-repeat, no-repeat, no-repeat, no-repeat;
    mask-repeat: no-repeat, no-repeat, no-repeat, no-repeat, no-repeat;
    -webkit-mask-position:
        7% 18%,
        86% 12%,
        24% 78%,
        62% 58%,
        4% 50%;
    mask-position:
        7% 18%,
        86% 12%,
        24% 78%,
        62% 58%,
        4% 50%;
    -webkit-mask-size:
        140px,
        170px,
        110px,
        100px,
        160px;
    mask-size:
        140px,
        170px,
        110px,
        100px,
        160px;
    background-color: rgba(31, 26, 22, 0.08);
}
/* Page-header + terracotta: slightly more contrast on bright red */
.hfh-page-header::before,
.hfh-section--terracotta::before,
.hfh-section--red::before {
    background-color: rgba(31, 26, 22, 0.10);
}
/* Hero: replace the scattered SVG mandala mask with the richly-detailed
   patterns.png motif. The PNG has its own red ink baked in + transparent
   bg, so we drop the mask + tint colour and use it as a plain background
   image. Large size to let its detail breathe; mix-blend-mode: multiply
   makes it sit on the terracotta surface like printed ornament. */
.hfh-hero::before,
.hfh-section--pattern-rich::before {
    -webkit-mask-image: none !important;
    mask-image: none !important;
    background-color: transparent !important;
    background-image: url('assets/img/patterns.png') !important;
    background-repeat: no-repeat !important;
    background-size: clamp(900px, 105vh, 1450px) auto !important;
    opacity: 0.25 !important;
    mix-blend-mode: multiply;
}
.hfh-hero::before { background-position: 95% 50% !important; }
/* Mirror the hero pattern position to the LEFT so it sits behind a
   left-anchored cutout. Negative px offset pushes the pattern's left
   edge slightly past the section's left edge (out of the viewport),
   so the motif's right half reads as the dominant visible portion —
   like the hero but mirrored. */
.hfh-section--pattern-rich::before { background-position: clamp(-220px, -8vw, -100px) 50% !important; }
/* Sage: needs a touch more so motif registers on khaki surface */
.hfh-section--sage::before {
    background-color: rgba(31, 26, 22, 0.11);
}
/* Push content above the motif */
.hfh-hero > .hfh-container,
.hfh-page-header > .hfh-container,
.hfh-section--terracotta > .hfh-container,
.hfh-section--red > .hfh-container,
.hfh-section--sage > .hfh-container {
    position: relative;
    z-index: 2;
}

/* ============================================================
   Cards & grids
   ============================================================ */
.hfh-grid {
    display: grid;
    gap: var(--hfh-space-5);
}
.hfh-grid--3 { grid-template-columns: repeat(3, 1fr); }
.hfh-grid--2 { grid-template-columns: repeat(2, 1fr); }
.hfh-grid--4 { grid-template-columns: repeat(4, 1fr); }

.hfh-card {
    background: var(--hfh-paper);
    border: 1px solid var(--hfh-line);
    border-radius: var(--hfh-radius);
    padding: var(--hfh-space-5) var(--hfh-space-5);
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
.hfh-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--hfh-shadow);
    border-color: var(--hfh-accent-soft);
}
.hfh-card__icon {
    width: clamp(48px, 10px + 2.95vw, 56px);
    height: clamp(48px, 10px + 2.95vw, 56px);
    border-radius: 50%;
    background: var(--hfh-accent-soft);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--hfh-accent);
    margin-bottom: var(--hfh-space-4);
    font-family: var(--hfh-font-display);
    font-size: 1.4rem;
    font-weight: 600;
}
.hfh-card__title {
    font-family: var(--hfh-font-display);
    font-size: 1.6rem;
    margin: 0 0 var(--hfh-space-2);
    color: var(--hfh-ink);
}
.hfh-card__text { color: var(--hfh-ink-soft); margin-bottom: var(--hfh-space-3); }
.hfh-card__link {
    font-weight: 600;
    color: var(--hfh-accent) !important;
    border-bottom: 1px solid var(--hfh-accent) !important;
    padding-bottom: 2px;
}

/* Challenge / icon-list */
.hfh-iconlist {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--hfh-space-5);
    margin-top: var(--hfh-space-5);
}
.hfh-iconlist__item {
    padding: var(--hfh-space-5) var(--hfh-space-4);
    background: var(--hfh-paper);
    border: 1px solid var(--hfh-line);
    border-left: 3px solid var(--hfh-accent);
    border-radius: var(--hfh-radius);
}
.hfh-iconlist__title {
    font-weight: 700;
    font-family: var(--hfh-font-body);
    font-size: var(--hfh-text-base);
    color: var(--hfh-ink);
    margin: 0 0 var(--hfh-space-2);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.hfh-iconlist__text { font-size: var(--hfh-text-sm); color: var(--hfh-ink-soft); margin: 0; }

/* ============================================================
   Two-column feature
   ============================================================ */
.hfh-feature {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--hfh-space-7);
    align-items: center;
}
.hfh-feature--reverse .hfh-feature__media { order: 2; }
.hfh-feature__media {
    aspect-ratio: 4 / 3;
    border-radius: var(--hfh-radius);
    background:
        linear-gradient(135deg, var(--hfh-bg-deep) 0%, var(--hfh-accent-soft) 100%);
    border: 1px solid var(--hfh-line);
    box-shadow: var(--hfh-shadow);
    position: relative;
    overflow: hidden;
}
.hfh-feature__media[data-label]::after {
    content: attr(data-label);
    position: absolute;
    bottom: var(--hfh-space-3); left: var(--hfh-space-3);
    font-size: var(--hfh-text-xs);
    color: var(--hfh-ink-soft);
    background: rgba(255,254,250,0.85);
    padding: var(--hfh-space-1) var(--hfh-space-2);
    border-radius: 4px;
    font-style: italic;
}
/* Real-image media slot.
   Default = photographic image (cover the 4:3 box, no letterbox).
   Modifier --filled = transparent-PNG cutout on a soft ivory stage. */
.hfh-feature__media img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}
.hfh-feature__media--filled {
    background: var(--hfh-bg-alt);
}
.hfh-feature__media--filled img {
    object-fit: cover;
    object-position: center bottom;
}
/* ============================================================
   Feature-Hero — a feature section laid out like the homepage hero:
   text block constrained on one side, free-floating cutout figure
   absolutely positioned on the opposite side, bottom-anchored to the
   section. Used by the Handmade Academy section on the homepage.
   ============================================================ */
.hfh-feature-hero {
    min-height: clamp(640px, 84vh, 860px);
    padding-top: clamp(96px, 11vw, 150px);
    padding-bottom: clamp(48px, 6vw, 96px);
    display: flex;
    align-items: center;
}
.hfh-feature-hero__inner {
    position: relative;
    width: 100%;
}
.hfh-feature-hero__text {
    max-width: clamp(620px, 46vw, 760px);
    position: relative;
    z-index: 2;
}
.hfh-feature-hero__art {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    width: clamp(280px, 32vw, 520px);
    height: auto;
    margin: 0;
    pointer-events: none;
    z-index: 1;
}
.hfh-feature-hero__art img {
    display: block;
    width: 100%;
    height: auto;
    object-fit: contain;
}
.hfh-feature-hero__art--mirror img {
    transform: scaleX(-1);
}
/* Decorative mandala accents for feature-hero sections — used in pairs
   (top-right + bottom-right) to flank the text area on the right side
   of the section. Painted via mask-image with a soft dark tint so the
   mandala silhouettes register as printed ornament on the terracotta
   surface (same approach as the scattered mandalas on other sections). */
.hfh-feature-hero__mandala {
    position: absolute;
    width: clamp(140px, 16vw, 240px);
    height: clamp(140px, 16vw, 240px);
    pointer-events: none;
    z-index: 0;
    -webkit-mask-image: url('assets/img/hfh-mandala.svg');
    mask-image: url('assets/img/hfh-mandala.svg');
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-position: center;
    mask-position: center;
    background-color: rgba(31, 26, 22, 0.18);
}
.hfh-feature-hero__mandala--top-right {
    top: 6%;
    right: 5%;
}
.hfh-feature-hero__mandala--bottom-right {
    bottom: 8%;
    right: 8%;
}
/* Hide the decorative mandalas on tablet/mobile where the layout stacks. */
@media (max-width: 1024px) {
    .hfh-feature-hero__mandala { display: none; }
}
/* Modifier: art on the LEFT, text pushed to the right of the container. */
.hfh-feature-hero--art-left .hfh-feature-hero__art {
    right: auto;
    left: 0;
}
/* Use flexbox on the inner with !important so the text block is decisively
   right-anchored regardless of cascade quirks or browser caching. */
.hfh-feature-hero--art-left {
    display: flex !important;
    justify-content: flex-end !important;
    align-items: center !important;
}
.hfh-feature-hero--art-left .hfh-feature-hero__text {
    margin-left: auto !important;
    margin-right: 0 !important;
}
/* Desktop-only: shift the text block further right into the empty space
   beyond the container's right edge. */
@media (min-width: 1025px) {
    .hfh-feature-hero--art-left .hfh-feature-hero__text {
        transform: translateX(clamp(24px, 3.5vw, 72px));
    }
}
/* Bleed variant — figure is positioned RELATIVE TO THE SECTION (sibling of
   the container) so its left + bottom edges sit flush against the section's
   own edges, not the container's inner padding. Diagonal mask fades the
   top-right of the image into the section so the image rectangle dissolves
   into the terracotta background. */
.hfh-feature-hero__art--bleed-bl {
    position: absolute;
    left: 0;
    bottom: 0;
    /* Start below the fixed navbar zone (matches the section's padding-top)
       so the figure's head doesn't get clipped by the navbar. This also
       naturally shrinks the figure ~20% vs spanning the full section. */
    top: clamp(96px, 11vw, 150px);
    right: auto;
    transform: none;
    width: auto;       /* derived from height × aspect-ratio */
    aspect-ratio: 1024 / 1536;
    margin: 0;
    pointer-events: none;
    z-index: 3;
    -webkit-mask-image: linear-gradient(to top right, rgba(0,0,0,1) 50%, rgba(0,0,0,0) 100%);
    mask-image: linear-gradient(to top right, rgba(0,0,0,1) 50%, rgba(0,0,0,0) 100%);
}
.hfh-feature-hero__art--bleed-bl img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: contain;
    object-position: left bottom;
}
/* Square-image variant of bleed-bl — override aspect-ratio for sections
   whose cutout image is 1:1. Height-driven so the figure fills ~80% of
   the section height (`top: clamp(...)` for the navbar offset, `bottom: 0`
   to glue to the floor). Width is then derived from the 1:1 aspect ratio. */
.hfh-feature-hero__art--bleed-bl-square {
    aspect-ratio: 1 / 1;
    top: clamp(96px, 11vw, 150px);
    bottom: 0;
    width: auto;
    height: auto;
    transform: none;
}
/* Programs section decorative mandalas — 4 instances at varied positions
   and sizes, scattered across the empty negative space around the figure
   and text. Uses the dark-red mandala SVG directly so its baked-in
   #AF4443 color shows on the ivory section as a soft printed accent. */
.hfh-program-mandala {
    position: absolute;
    background-image: url('assets/img/hfh-mandala-dark.svg');
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    pointer-events: none;
    z-index: 0;
    opacity: 0.18;
}
.hfh-program-mandala--1 {
    /* Large — top-right area */
    top: 8%;
    right: 5%;
    width: clamp(150px, 13vw, 220px);
    height: clamp(150px, 13vw, 220px);
}
.hfh-program-mandala--2 {
    /* Small — mid-right edge, decorative accent */
    top: 38%;
    right: 12%;
    width: clamp(70px, 6vw, 110px);
    height: clamp(70px, 6vw, 110px);
    opacity: 0.12;
}
.hfh-program-mandala--3 {
    /* X-Large — bottom-right corner */
    bottom: 6%;
    right: 18%;
    width: clamp(180px, 16vw, 280px);
    height: clamp(180px, 16vw, 280px);
    opacity: 0.14;
}
.hfh-program-mandala--4 {
    /* Tiny — upper-middle, between figure and text */
    top: 18%;
    left: 40%;
    width: clamp(50px, 5vw, 80px);
    height: clamp(50px, 5vw, 80px);
    opacity: 0.16;
}
@media (max-width: 1024px) {
    .hfh-program-mandala { display: none; }
}
/* Bottom-right bleed variant — figure anchored to the bottom-right of the
   section. Used by the Cluster (sage) section. Width clamp is 30% larger
   than --bleed-bl so the figure reads as substantial on the right. The
   diagonal mask fades the figure's top-left edge (mirror of bleed-bl),
   keeping it from crowding the text block on the left at narrow viewports. */
.hfh-feature-hero__art--bleed-br {
    position: absolute;
    right: 0;
    bottom: 0;
    top: auto;
    left: auto;
    transform: none;
    width: clamp(738px, 78vw, 1205px);
    height: auto;
    margin: 0;
    pointer-events: none;
    z-index: 3;
    -webkit-mask-image: linear-gradient(to top left, rgba(0,0,0,1) 50%, rgba(0,0,0,0) 100%);
    mask-image: linear-gradient(to top left, rgba(0,0,0,1) 50%, rgba(0,0,0,0) 100%);
}
.hfh-feature-hero__art--bleed-br img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: contain;
    object-position: right bottom;
}
/* Section-level radial spotlight behind the bleed figure — same recipe as
   .hfh-hero::after, positioned at bottom-left to sit behind the cutout
   and lend the same printed-depth glow the hero has on the right. */
.hfh-feature-hero--has-art-bleed { isolation: isolate; }
/* Spotlight centered behind the figure's torso area (~18% from left, 55%
   from top), so the glow halos around the cutout instead of sitting in
   the empty corner beside it. z-index: 1 — above the patterns.png
   ::before (z:0) but well below the figure (z:3). */
.hfh-feature-hero--has-art-bleed::after {
    content: "";
    position: absolute;
    left: 16%;
    top: 60%;
    transform: translate(-50%, -50%);
    width: clamp(540px, 70vh, 880px);
    height: clamp(540px, 70vh, 880px);
    background: radial-gradient(circle at center,
        rgba(60, 0, 0, 0.55) 0%,
        rgba(60, 0, 0, 0.35) 35%,
        rgba(60, 0, 0, 0.12) 60%,
        transparent 78%);
    border-radius: 50%;
    pointer-events: none;
    z-index: 1;
}
/* Sage variant of the spotlight — dark red glow on khaki sage clashes;
   swap to an ink/charcoal shadow so the depth reads as a soft shadow
   under the figure rather than a colored halo. */
.hfh-section--sage.hfh-feature-hero--has-art-bleed::after {
    background: radial-gradient(circle at center,
        rgba(31, 26, 22, 0.42) 0%,
        rgba(31, 26, 22, 0.26) 35%,
        rgba(31, 26, 22, 0.10) 60%,
        transparent 78%);
}

/* ============================================================
   Cluster / sage .hfh-feature polish
   Tightens the type rhythm inside the constrained feature column,
   nudges eyebrow contrast on sage khaki, and anchors the CTA so it
   reads as an end-of-block action rather than a floating button.
   Scoped to .hfh-section--sage .hfh-feature so other sections that
   use .hfh-feature (e.g. Programs on ivory) are unaffected.
   ============================================================ */
.hfh-section--sage .hfh-feature .hfh-eyebrow {
    /* --hfh-red-dark on sage is 2.98:1 — borderline. Darken slightly
       for AA on small uppercase text without losing the brand-red read. */
    color: #7E3232;
    margin-bottom: var(--hfh-space-2);
}
.hfh-section--sage .hfh-feature h2 {
    /* Two-word title in a half-width column: pull the upper bound down
       from 5rem so it doesn't dominate the column at wide viewports,
       and relax line-height a touch (0.95 → 1.02) since the tight
       -0.03em letter-spacing already buys density. */
    font-size: clamp(2rem, 3.4vw, 3.4rem);
    line-height: 1.02;
    margin-bottom: var(--hfh-space-4);
    max-width: 18ch;
}
.hfh-section--sage .hfh-feature p {
    /* Earth on sage measures 5.43:1 — passes AA. Just tighten the
       paragraph rhythm so body copy feels grouped under the h2. */
    line-height: 1.65;
    margin-bottom: var(--hfh-space-3);
    max-width: 56ch;
}
.hfh-section--sage .hfh-feature p:last-of-type {
    margin-bottom: var(--hfh-space-5);
}
.hfh-section--sage .hfh-feature .hfh-btn-row {
    margin-top: var(--hfh-space-5);
}
/* Ensure the transparent-PNG cutout sits cleanly on the ivory panel:
   contain (not cover) so the figure isn't cropped, anchored to bottom
   so the subject grounds on the card's base edge. */
.hfh-section--sage .hfh-feature .hfh-feature__media--filled img {
    object-fit: contain;
    object-position: center bottom;
    padding: clamp(16px, 1.6vw, 28px);
}
/* Cluster feature-hero text — pull the text block further left into the
   wide empty negative space that opens up on monitors wider than the
   1220px container. Scoped to desktop ≥1025px so mobile/tablet stacking
   (which uses 100% width) isn't shifted off-screen. */
@media (min-width: 1025px) {
    .hfh-section--sage.hfh-feature-hero .hfh-feature-hero__text {
        transform: translateX(clamp(-220px, -10vw, -60px));
    }
}

/* ============================================================
   Stats grid (Impact snapshot)
   ============================================================ */
.hfh-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--hfh-space-4);
    margin-top: var(--hfh-space-6);
}
.hfh-stat {
    background: var(--hfh-paper);
    border: 1px solid var(--hfh-line);
    border-radius: var(--hfh-radius);
    padding: var(--hfh-space-5) var(--hfh-space-4);
    text-align: left;
    position: relative;
}
.hfh-stat::before {
    content: "";
    position: absolute;
    top: 0; left: 0;
    width: var(--hfh-space-6); height: 3px;
    background: var(--hfh-accent);
}
.hfh-stat__value {
    font-family: var(--hfh-font-display);
    font-size: clamp(2.2rem, 3.4vw, 2.8rem);
    color: var(--hfh-ink);
    line-height: 1.1;
    margin-bottom: var(--hfh-space-2);
    font-weight: 500;
}
.hfh-stat__label {
    font-size: var(--hfh-text-sm);
    color: var(--hfh-ink-soft);
    line-height: 1.45;
}
.hfh-section--ink .hfh-stat,
.hfh-section--terracotta .hfh-stat {
    background: rgba(255,254,250,0.06);
    border-color: rgba(255,254,250,0.18);
}
.hfh-section--ink .hfh-stat__value,
.hfh-section--terracotta .hfh-stat__value { color: var(--hfh-paper); }
.hfh-section--ink .hfh-stat__label,
.hfh-section--terracotta .hfh-stat__label { color: rgba(255,254,250,0.78); }
.hfh-section--ink .hfh-stat::before,
.hfh-section--terracotta .hfh-stat::before { background: var(--hfh-gold); }

/* ============================================================
   Course module lists
   ============================================================ */
.hfh-course {
    background: var(--hfh-paper);
    border: 1px solid var(--hfh-line);
    border-radius: var(--hfh-radius);
    padding: var(--hfh-space-5) var(--hfh-space-5) var(--hfh-space-5);
    margin-bottom: var(--hfh-space-5);
}
.hfh-course__title {
    font-family: var(--hfh-font-display);
    font-size: 1.6rem;
    margin: 0 0 var(--hfh-space-1);
    color: var(--hfh-ink);
}
.hfh-course__kicker {
    display: inline-block;
    font-size: var(--hfh-text-xs);
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--hfh-accent);
    font-weight: 600;
    margin-bottom: var(--hfh-space-3);
}
.hfh-modules {
    list-style: none;
    padding: 0;
    margin: var(--hfh-space-3) 0 0;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--hfh-space-2) var(--hfh-space-4);
}
.hfh-modules li {
    padding: var(--hfh-space-2) 0 var(--hfh-space-2) var(--hfh-space-5);
    border-bottom: 1px dashed var(--hfh-line);
    position: relative;
    font-size: var(--hfh-text-sm);
    color: var(--hfh-ink-soft);
}
.hfh-modules li::before {
    content: "›";
    position: absolute;
    left: 4px; top: 8px;
    color: var(--hfh-accent);
    font-weight: 700;
    font-size: var(--hfh-text-lg);
}

/* Upcoming courses — compact card grid */
.hfh-upcoming {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--hfh-space-4);
    margin-top: var(--hfh-space-5);
}
.hfh-upcoming__item {
    background: var(--hfh-bg-alt);
    border-radius: var(--hfh-radius);
    padding: var(--hfh-space-5) var(--hfh-space-4);
    border: 1px solid var(--hfh-line);
}
.hfh-upcoming__item h4 {
    font-family: var(--hfh-font-display);
    font-size: var(--hfh-text-lg);
    margin: 0 0 var(--hfh-space-2);
}

/* ============================================================
   Founder card
   ============================================================ */
.hfh-founders {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--hfh-space-5);
    margin-top: var(--hfh-space-6);
}
.hfh-founder {
    background: var(--hfh-paper);
    border: 1px solid var(--hfh-line);
    border-radius: var(--hfh-radius);
    padding: var(--hfh-space-5) var(--hfh-space-5);
}
.hfh-founder__avatar {
    width: 96px;
    height: 96px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--hfh-accent-soft) 0%, var(--hfh-bg-deep) 100%);
    margin-bottom: var(--hfh-space-3);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--hfh-font-display);
    font-size: 1.6rem;
    color: var(--hfh-accent);
    font-weight: 600;
    border: 2px solid var(--hfh-paper);
    box-shadow: 0 0 0 1px var(--hfh-line);
}
.hfh-founder__name {
    font-family: var(--hfh-font-display);
    font-size: 1.45rem;
    margin: 0 0 var(--hfh-space-1);
    color: var(--hfh-ink);
}
.hfh-founder__role {
    font-size: var(--hfh-text-sm);
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--hfh-accent);
    font-weight: 600;
    margin-bottom: var(--hfh-space-3);
}
.hfh-founder p { font-size: var(--hfh-text-sm); margin: 0; }

/* ============================================================
   Quote / pull
   ============================================================ */
.hfh-pull {
    font-family: var(--hfh-font-display);
    font-style: italic;
    font-size: clamp(1.4rem, 2.4vw, 1.9rem);
    line-height: 1.4;
    color: var(--hfh-ink);
    border-left: 3px solid var(--hfh-accent);
    padding: var(--hfh-space-2) 0 var(--hfh-space-2) var(--hfh-space-5);
    margin: var(--hfh-space-5) 0;
    max-width: 780px;
}

/* ============================================================
   Contact form / CTA section
   ============================================================ */
.hfh-contact-grid {
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: var(--hfh-space-7);
    align-items: start;
}
.hfh-contact-info p { margin: 0 0 var(--hfh-space-2); }
.hfh-contact-info strong { display: block; font-size: var(--hfh-text-xs); text-transform: uppercase; letter-spacing: 0.14em; color: var(--hfh-accent); margin-bottom: var(--hfh-space-1); font-weight: 600; }

.hfh-form .wpcf7 { margin: 0; }
.hfh-form input[type=text],
.hfh-form input[type=email],
.hfh-form input[type=tel],
.hfh-form textarea {
    width: 100%;
    padding: var(--hfh-space-3) var(--hfh-space-3);
    border: 1px solid var(--hfh-line);
    border-radius: var(--hfh-radius);
    font-family: var(--hfh-font-body);
    font-size: var(--hfh-text-base);
    background: var(--hfh-paper);
    color: var(--hfh-ink);
    margin-bottom: var(--hfh-space-3);
    transition: border-color 0.2s ease;
}
.hfh-form input:focus, .hfh-form textarea:focus {
    outline: none;
    border-color: var(--hfh-accent);
}
.hfh-form input[type=submit] {
    background: var(--hfh-accent);
    color: var(--hfh-paper);
    border: none;
    padding: var(--hfh-space-3) var(--hfh-space-5);
    border-radius: var(--hfh-radius);
    font-weight: 600;
    cursor: pointer;
    font-family: var(--hfh-font-body);
}
.hfh-form input[type=submit]:hover { background: var(--hfh-accent-dark); }

/* Fallback form (when CF7 not used) */
.hfh-fallback-form label { display: block; font-weight: 600; font-size: var(--hfh-text-sm); color: var(--hfh-ink); margin: 0 0 var(--hfh-space-1); text-transform: uppercase; letter-spacing: 0.06em; }

/* ============================================================
   Footer (HFH)
   ============================================================ */
.hfh-footer {
    background: var(--hfh-ink);
    color: var(--hfh-bg-alt);
    padding: var(--hfh-space-8) 0 var(--hfh-space-5);
    font-size: var(--hfh-text-base);
}
.hfh-footer__grid {
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
    gap: var(--hfh-space-6);
}
.hfh-footer h4 {
    color: var(--hfh-paper);
    font-family: var(--hfh-font-display);
    font-size: var(--hfh-text-lg);
    margin: 0 0 var(--hfh-space-3);
    font-weight: 600;
    letter-spacing: 0.01em;
}
.hfh-footer__brand p { color: rgba(255,254,250,0.7); margin: var(--hfh-space-2) 0 0; max-width: 320px; font-size: var(--hfh-text-sm); line-height: 1.6; }
.hfh-footer__logo { font-family: var(--hfh-font-display); font-size: 1.6rem; color: var(--hfh-paper); font-weight: 500; line-height: 1.2; display: block; }
.hfh-footer__logo span { color: var(--hfh-accent); }
.hfh-footer ul { list-style: none; padding: 0; margin: 0; }
.hfh-footer ul li { margin-bottom: var(--hfh-space-2); }
.hfh-footer ul a { color: rgba(255,254,250,0.78) !important; border: none !important; transition: color 0.2s ease; }
.hfh-footer ul a:hover { color: var(--hfh-accent) !important; }
.hfh-footer__social {
    display: flex;
    gap: var(--hfh-space-2);
    margin-top: var(--hfh-space-3);
}
.hfh-footer__social a {
    width: clamp(32px, 6px + 1.66vw, 38px); height: clamp(32px, 6px + 1.66vw, 38px);
    border: 1px solid rgba(255,254,250,0.22);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--hfh-bg-alt) !important;
    transition: all 0.2s ease;
}
.hfh-footer__social a:hover {
    background: var(--hfh-accent);
    border-color: var(--hfh-accent);
    color: var(--hfh-paper) !important;
}
.hfh-footer__bottom {
    margin-top: var(--hfh-space-6);
    padding-top: var(--hfh-space-4);
    border-top: 1px solid rgba(255,254,250,0.12);
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: var(--hfh-text-sm);
    color: rgba(255,254,250,0.55);
    flex-wrap: wrap;
    gap: var(--hfh-space-2);
}

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 1024px) {
    .hfh-hero__inner { grid-template-columns: 1fr; }
    .hfh-hero__art { max-width: 480px; margin: 0 auto; }
    .hfh-grid--4 { grid-template-columns: repeat(2, 1fr); }
    .hfh-stats { grid-template-columns: repeat(2, 1fr); }
    .hfh-feature { grid-template-columns: 1fr; gap: 32px; }
    .hfh-feature--reverse .hfh-feature__media { order: 0; }
    /* Feature-hero collapses to stacked layout below desktop */
    .hfh-feature-hero { min-height: auto; padding-bottom: clamp(40px, 6vw, 64px); flex-direction: column; }
    .hfh-feature-hero__text { max-width: 100%; }
    .hfh-feature-hero__art {
        position: relative;
        right: auto; top: auto;
        transform: none;
        width: 100%;
        max-width: 546px;
        margin: clamp(40px, 5vw, 64px) auto 0;
    }
    .hfh-feature-hero__art--mirror img { transform: scaleX(-1); }
    .hfh-founders { grid-template-columns: 1fr; }
    .hfh-footer__grid { grid-template-columns: 1fr 1fr; }
    .hfh-contact-grid { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
    .hfh-page { font-size: 16px; }
    .hfh-grid--3, .hfh-grid--2 { grid-template-columns: 1fr; }
    .hfh-iconlist { grid-template-columns: 1fr; }
    .hfh-upcoming { grid-template-columns: 1fr; }
    .hfh-modules { grid-template-columns: 1fr; }
    .hfh-stats { grid-template-columns: 1fr 1fr; }
    .hfh-footer__grid { grid-template-columns: 1fr; }
    .hfh-btn-row { flex-direction: column; align-items: stretch; }
    .hfh-btn { justify-content: center; }
}

/* ============================================================
   Navbar contact items + burger — DYNAMIC color.
   Mikael toggles .vlt-navbar--solid on scroll (navbar bg becomes
   light). White text would disappear on the solid state, so the
   color flips:
     • transparent (top of page, over red hero) → white
     • solid (scrolled, light bg)               → ink
   ============================================================ */
.vlt-navbar-contacts a,
.vlt-menu-burger {
    transition: color 0.2s ease;
}
/* Transparent state — over the red hero / page-header */
.vlt-navbar--transparent .vlt-navbar-contacts a,
.vlt-navbar--transparent-always .vlt-navbar-contacts a,
.vlt-navbar--transparent .vlt-menu-burger,
.vlt-navbar--transparent-always .vlt-menu-burger {
    color: rgba(255, 255, 255, 0.95) !important;
    opacity: 1 !important;
}
.vlt-navbar--transparent .vlt-navbar-contacts a:hover,
.vlt-navbar--transparent-always .vlt-navbar-contacts a:hover,
.vlt-navbar--transparent .vlt-menu-burger:hover,
.vlt-navbar--transparent-always .vlt-menu-burger:hover {
    color: #FFFFFF !important;
}
/* Solid state — Mikael adds .vlt-navbar--solid when scrolled past hero */
.vlt-navbar--solid .vlt-navbar-contacts a,
.vlt-navbar--solid .vlt-menu-burger {
    color: var(--hfh-ink) !important;
    opacity: 1 !important;
}
.vlt-navbar--solid .vlt-navbar-contacts a:hover,
.vlt-navbar--solid .vlt-menu-burger:hover {
    color: var(--hfh-red) !important;
}

/* ============================================================
   Navbar wordmark (fallback when navigation_logo image is unset).
   DYNAMIC colour — flips based on navbar state:
     • transparent state (top of page, over red hero)  → white text + gold dot
     • solid state       (scrolled, light bg)          → ink text + terracotta dot
   ============================================================ */
.vlt-navbar-logo {
    text-decoration: none !important;
    display: inline-flex;
    align-items: center;
}
.vlt-navbar-logo h2 {
    font-family: var(--hfh-font-display, "Cormorant Garamond", Georgia, serif) !important;
    font-weight: 500 !important;
    font-size: 1.5rem !important;
    letter-spacing: 0.005em !important;
    margin: 0 !important;
    line-height: 1 !important;
    white-space: nowrap;
    position: relative;
    padding-right: var(--hfh-space-3);
    text-transform: none;
    transition: color 0.3s ease;
    /* Default: white — over the red hero */
    color: rgba(255, 255, 255, 0.96) !important;
}
.vlt-navbar-logo h2::after {
    content: "";
    position: absolute;
    right: 4px;
    bottom: 4px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--hfh-gold, #A98246);
    transition: background 0.3s ease;
}
/* Solid state — navbar has scrolled into a light section */
.vlt-navbar--solid .vlt-navbar-logo h2 {
    color: var(--hfh-ink, #1F1A16) !important;
}
.vlt-navbar--solid .vlt-navbar-logo h2::after {
    background: var(--hfh-red, #BB5151);
}
/* Hover — pop to brand red regardless of state */
.vlt-navbar-logo:hover h2 { color: var(--hfh-red, #BB5151) !important; }

/* ============================================================
   Reveal-on-scroll — "curtain rising" effect
   Each section starts slightly translated and faded; slides up
   into view when it enters the viewport. The .js-hfh-reveal class
   is added to <body> by hfh-reveal.js so the effect is only active
   when JS is available (no flash for no-JS users).
   Respects prefers-reduced-motion.
   ============================================================ */
@media (prefers-reduced-motion: no-preference) {
    .js-hfh-reveal .hfh-page .hfh-hero,
    .js-hfh-reveal .hfh-page .hfh-page-header,
    .js-hfh-reveal .hfh-page .hfh-section {
        opacity: 0;
        transform: translateY(56px);
        transition:
            opacity 0.9s cubic-bezier(0.2, 0.6, 0.2, 1),
            transform 1s cubic-bezier(0.2, 0.6, 0.2, 1);
        will-change: opacity, transform;
    }
    .js-hfh-reveal .hfh-page .hfh-hero.is-revealed,
    .js-hfh-reveal .hfh-page .hfh-page-header.is-revealed,
    .js-hfh-reveal .hfh-page .hfh-section.is-revealed {
        opacity: 1;
        transform: translateY(0);
        will-change: auto;
    }
}

/* =====================================================
   CUSTOM CURSOR
   GSAP-driven follower; activated by `vlt-is--custom-cursor` on <body>.
   Hidden on coarse-pointer / touch via media query (JS also bails).

   Uses charcoal ink + mix-blend-mode: difference so it's visible
   over ivory, cream, dark ink sections, and the offcanvas drawer
   alike — without depending on the surface color underneath.
   ===================================================== */
.vlt-custom-cursor {
    position: fixed;
    top: 0;
    left: 0;
    width: 0.9375rem;   /* 15px */
    height: 0.9375rem;
    color: var(--hfh-ink, #1F1A16);
    pointer-events: none;
    transition: opacity 200ms cubic-bezier(0.2, 0.6, 0.2, 1) 500ms;
    z-index: 9999;
    mix-blend-mode: difference;
}
.vlt-custom-cursor .circle {
    position: fixed;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 0.9375rem;
    height: 0.9375rem;
    pointer-events: none;
    background-color: #ffffff;   /* white + difference blend = inverted surface color */
    border-radius: 50%;
    opacity: 1;
    transform: translate3d(-50%, -50%, 0);
}
.vlt-custom-cursor .circle span {
    color: var(--hfh-ink, #1F1A16);
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: 0.75rem;
    font-weight: 500;
    line-height: 1;
    text-align: center;
    pointer-events: none;
    mix-blend-mode: normal;
}
.vlt-custom-cursor .circle span i {
    font-size: 2em;
    font-weight: normal;
    line-height: 1;
}

@media (hover: none), (pointer: coarse) {
    .vlt-custom-cursor { display: none !important; }
}

/* ============================================================
   Full-page snap scroll — homepage POC (first 3 sections)
   ============================================================
   Engages only on body.hfh-snap-home. Sections marked
   .hfh-snap-section lock to viewport height and become snap
   targets; JS in hfh-main.js drives the one-section-per-swipe
   animated transition. window.scrollY remains the page scroll
   position, so the sticky navbar + brightness IntersectionObserver
   keep working unchanged.
   ============================================================ */
/* JS in hfh-main.js owns the section-to-section scroll via a rAF tween.
   Intentionally NOT using scroll-snap-type here — CSS snap would fire a
   second tiny adjustment when the tween lands, producing a visible wobble. */
html:has(body.hfh-snap-home) {
    scroll-behavior: auto;
}

.hfh-snap-section {
    min-height: 100vh;
    min-height: 100dvh;
}
/* Hero owns its row-flex layout (text left, image right). Skip the
   column flex-center override below for the hero so we don't restack
   its children vertically and inflate the section past 100vh. */
.hfh-snap-section:not(.hfh-hero) {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* Footer keeps its natural height. JS snaps to it by docking it to the
   bottom of the viewport (window.scrollTo(0, maxScroll)) so we still get
   the section-like one-tween reveal, without forcing a 100vh container. */

/* Lock the hero to exact viewport height on the snap-home page.
   ------------------------------------------------------------------
   Two pre-existing rules let the hero exceed window height, which is
   why snapping back to it from section 2 didn't land cleanly:
     • .hfh-hero uses `min-height: 100vh` (allows growth)
     • @media (max-width: 1024px) drops that to `min-height: auto`,
       so on tablet/phone the hero's height is driven by stacked
       text + image — typically well above 100vh.
   Force a fixed `height` (with dvh for mobile browser-chrome
   accuracy) so the hero is precisely one window tall on every
   breakpoint. Existing `overflow: hidden` on .hfh-hero clips any
   content that doesn't fit; the inner image is already `object-fit:
   contain` so it scales to the available box. */
body.hfh-snap-home .hfh-hero.hfh-snap-section {
    height: 100vh;
    height: 100dvh;
    min-height: 100vh;
    min-height: 100dvh;
    max-height: 100vh;
    max-height: 100dvh;
}

/* On tablet/phone the hero stacks (text on top, image below). With
   the hero locked to 100dvh the stacked image needs an upper bound
   so text doesn't get pushed off-screen. */
@media (max-width: 1024px) {
    body.hfh-snap-home .hfh-hero__art {
        max-height: 42vh;
        max-height: 42dvh;
        margin-top: 24px;
        overflow: hidden;
    }
    body.hfh-snap-home .hfh-hero__art img {
        height: 100%;
        max-height: 100%;
        object-fit: contain;
        object-position: center bottom;
    }
}

/* The site-wide reveal-on-scroll animation (translateY(56px) → 0) fights
   the snap tween: getBoundingClientRect reads the mid-transform position,
   so we land at the wrong Y. Snap sections are already a full-viewport
   "entrance moment" — skip the per-section reveal here. */
.js-hfh-reveal .hfh-page .hfh-snap-section,
.js-hfh-reveal .hfh-page .hfh-snap-section.is-revealed {
    opacity: 1;
    transform: none;
    transition: none;
    will-change: auto;
}

/* Trim default section padding so vertically-centered content breathes
   without forcing an internal scrollbar inside the viewport-height box. */
.hfh-snap-section.hfh-section {
    padding-top: clamp(96px, 11vw, 130px);
    padding-bottom: clamp(56px, 7vw, 96px);
}

/* Hero already has min-height: 100vh + flex centering — the
   .hfh-snap-section rules above just add the snap hook. */

/* Reduced motion already handled inside the JS tween (instant scrollTo). */

/* ============================================================
   HFH Spacing utilities — replace inline margin-top in templates.
   Use sparingly: prefer adding rules to the relevant component.
   These tokens already collapse to mobile-safe minimums via
   clamp(), so spacing scales with viewport width 1280–1920.
   ============================================================ */
.hfh-mt-2 { margin-top: var(--hfh-space-4); }   /* was 20–24px */
.hfh-mt-3 { margin-top: var(--hfh-space-5); }   /* was 28–36px */
.hfh-mt-4 { margin-top: var(--hfh-space-6); }   /* was 40–48px */