/*
Theme Name: HS Theme
Theme URI: https://holistic-synergy.com
Author: Jimmy Oldham — Experience Architect (XA)
Author URI: https://holistic-synergy.com
Description: Minimal custom theme for Holistic Synergy. Vonca font, design tokens, plugin-first architecture. Renders pages; everything dynamic is owned by hs-booking plugin.
Version: 1.0.0
License: MIT
Text Domain: hs-theme
*/

/* ── Vonca font (7 weights, loaded from theme) ─────────────────────────
   Critical above-the-fold weights (400 body, 600 pillars, 700 headings,
   800 brand + card labels) use font-display: block — text is invisible
   for ≤3s while the font arrives instead of flashing a fallback font
   and then swapping (FOUT). functions.php emits <link rel="preload"> for
   each of these so they download before first paint, making the invisible
   window imperceptible in practice.
   Rarely-used weights stay on swap — they can FOUT safely below the fold. */
@font-face { font-family: 'Vonca'; src: url('assets/fonts/vonca-extralight-webfont.woff2') format('woff2'); font-weight: 200; font-display: swap; }
@font-face { font-family: 'Vonca'; src: url('assets/fonts/vonca-light-webfont.woff2')      format('woff2'); font-weight: 300; font-display: swap; }
@font-face { font-family: 'Vonca'; src: url('assets/fonts/vonca-regular-webfont.woff2')    format('woff2'); font-weight: 400; font-display: block; }
@font-face { font-family: 'Vonca'; src: url('assets/fonts/vonca-medium-webfont.woff2')     format('woff2'); font-weight: 500; font-display: swap; }
@font-face { font-family: 'Vonca'; src: url('assets/fonts/vonca-semibold-webfont.woff2')   format('woff2'); font-weight: 600; font-display: block; }
@font-face { font-family: 'Vonca'; src: url('assets/fonts/vonca-bold-webfont.woff2')       format('woff2'); font-weight: 700; font-display: block; }
@font-face { font-family: 'Vonca'; src: url('assets/fonts/vonca-extrabold-webfont.woff2')  format('woff2'); font-weight: 800; font-display: block; }

/* ── Design tokens ─────────────────────────────────────────────────── */
:root {
    --hs-bg-deep:   #03020d;
    --hs-bg-body:   #0a0e1b;
    --hs-bg-panel:  #081018;
    --hs-bg-soft:   rgba(255,255,255,.04);
    --hs-bg-soft2:  rgba(255,255,255,.06);
    --hs-line:      rgba(255,255,255,.10);
    --hs-line2:     rgba(255,255,255,.07);
    --hs-text:      #f4f7fb;
    --hs-muted:     rgba(244,247,251,.72);
    --hs-dim:       rgba(244,247,251,.45);
    --hs-green:     #28f08a;
    --hs-green2:    #1ddf7a;
    --hs-cyan:      #00e5ff;
    --hs-pink:      #ff2fd3;
    --hs-purple:    #7a5cff;
    --hs-blue:      #1fb6ff;
    --hs-amber:     #ffd24a;
    --hs-radius:    16px;
    --hs-radius-lg: 24px;
    --hs-radius-sm: 12px;
    --hs-header-h:  72px;
    --hs-header-h-mobile-row1: 64px;
    --hs-header-h-mobile-row2: 48px;
    --hs-ease:      cubic-bezier(.2,.8,.2,1);
    --hs-container-max: 1400px;
    --hs-container-pad: 24px;
}

/* ── Reset ─────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
/* overflow-anchor: none — stop the browser from adjusting scrollY to
   "stabilize" the viewport when the sticky header resizes. Without this,
   the header's height change pushes scrollY across the hysteresis
   threshold mid-animation, causing a ping-pong loop. */
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; overflow-anchor: none; }
body {
    font-family: 'Vonca', 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
    font-size: 16px;
    line-height: 1.6;
    color: var(--hs-text);
    background: linear-gradient(180deg, #13041f 0%, var(--hs-bg-body) 100%);
    -webkit-font-smoothing: antialiased;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}
main { flex: 1 0 auto; }
img, video, svg { max-width: 100%; height: auto; display: block; }
button, input, textarea, select { font: inherit; color: inherit; }
a { color: var(--hs-cyan); text-decoration: none; transition: color .2s var(--hs-ease); }
a:hover { text-decoration: underline; }
button { background: none; border: none; cursor: pointer; }
h1, h2, h3, h4, h5, h6 { font-weight: 700; line-height: 1.15; color: var(--hs-text); }
h1 { font-size: clamp(2rem, 5vw, 3rem); font-weight: 800; }
h2 { font-size: clamp(1.5rem, 3.5vw, 2.25rem); }
h3 { font-size: clamp(1.15rem, 2.5vw, 1.5rem); }
h4 { font-size: 1rem; font-weight: 600; }
p { color: var(--hs-muted); }

/* ── Custom scrollbar ──────────────────────────────────────────────────
   Idle:         muted lavender, no glow.
   Scrolling:    fades to cyan with glow (hs-header.js toggles
                 html.is-scrolling on scroll events, clears after 800ms).
   Hover/drag:   cyan (via :hover / :active — Chromium honors these on
                 ::-webkit-scrollbar-thumb).
   Firefox gets scrollbar-color swap but no transition (Firefox limitation).
   ────────────────────────────────────────────────────────────────── */
html { scrollbar-width: thin; scrollbar-color: rgba(140, 120, 180, .5) #000; }
html.is-scrolling { scrollbar-color: var(--hs-cyan) #000; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: #000; }
::-webkit-scrollbar-thumb {
    background: rgba(140, 120, 180, .5);
    border-radius: 5px;
    border: 2px solid transparent;
    background-clip: padding-box;
    box-shadow: 0 0 0 rgba(0, 229, 255, 0);
    transition: background .9s ease-in-out, box-shadow .9s ease-in-out;
}
html.is-scrolling ::-webkit-scrollbar-thumb,
::-webkit-scrollbar-thumb:hover,
::-webkit-scrollbar-thumb:active {
    background: var(--hs-cyan);
    box-shadow: 0 0 10px rgba(0, 229, 255, .6);
}

/* ── Container ─────────────────────────────────────────────────────── */
.hs-container { max-width: var(--hs-container-max); margin: 0 auto; padding: 0 var(--hs-container-pad); }

/* ── Site header (sticky, two-state) ───────────────────────────────────
   Rest state:      at top of page — transparent bg, 2x inner height,
                    logo/brand/pillars doubled in size.
   Scrolled state:  past threshold — solid bg, backdrop blur, condensed
                    to --hs-header-h, fonts/logos return to base.
   hs-header.js toggles .is-scrolled on <header> with hysteresis
   (collapse at 60px, expand at 15px) so scroll jitter near the boundary
   can't ping-pong the state.
   Transitions gated on body.hs-ready (added by JS after first paint) so
   the initial state doesn't animate from big→small on mid-page refresh.
   ──────────────────────────────────────────────────────────────────── */
.hs-site-header {
    position: sticky;
    top: 0;
    z-index: 100;
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}
body.hs-ready .hs-site-header {
    transition:
        background .55s var(--hs-ease),
        backdrop-filter .55s var(--hs-ease),
        -webkit-backdrop-filter .55s var(--hs-ease);
}
.hs-site-header.is-scrolled {
    background: rgba(3,2,13,.88);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}

/* Single-row header: griffin | pillars | cart + hamburger.
   Top/left/right padding matches the breathing room Jimmy liked on the
   previous top row (the pillars-only lane); the side buttons (90×90) drive
   the row height via align-items, so no fixed height is set.
   3-column grid (1fr auto 1fr) keeps the pillars dead-center regardless of
   how the brand/actions sides differ in width.
   The .is-scrolled height rule stays as dead code — re-enabling the shrink
   state later is a one-line revert in hs-header.js. */
.hs-site-header-inner {
    width: 100%;
    padding: 10px 0 0; /* left/right offset lives on the edge children as margins */
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 24px;
    position: relative;
    z-index: 2;
}
/* Brand + actions each carry a 10px margin on their outer side so both
   corners (top-left griffin, top-right cart/hamburger) read visually square
   against the 10px top padding. */
/* Explicit grid-column placement so removing the pillars on tablet/mobile
   (display:none at ≤1024px) doesn't slide the actions into column 2 and
   leave column 3 empty — the cart + hamburger stay pinned to the right. */
.hs-site-header-inner > .hs-brand             { grid-column: 1; justify-self: start;  margin-left: 10px;  }
.hs-site-header-inner > .hs-pillars-desktop   { grid-column: 2; justify-self: center; align-self: start;  }
.hs-site-header-inner > .hs-header-actions    { grid-column: 3; justify-self: end;    margin-right: 10px; }
body.hs-ready .hs-site-header-inner {
    transition: height .55s var(--hs-ease);
}
.hs-site-header.is-scrolled .hs-site-header-inner { height: var(--hs-header-h); }
@media (max-width: 680px) { .hs-site-header-inner { padding: 10px 0 0; } }

/* Brand = heater-shield portal button wrapping the griffin logo. Shape
   diverges from the cart + hamburger square pair on purpose — brand reads
   different from utility. Heraldic shape because the griffin is heraldic.
   Shield silhouette comes from #hs-shield-clip in header.php (objectBoundingBox
   so it scales). The thin resting outline + the conic flux-ring hover both
   trace the shield outline via SVG masks (#hs-shield-rest-mask /
   #hs-shield-ring-mask) — see .hs-brand::after below + ::before override
   in mega-menu.css. The CSS `border` is killed because a rectangular border
   would clip awkwardly under the shield. Padding stays for griffin breathing
   room from the shield's curved edges. */
.hs-brand {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
    width: 95px; height: 95px;
    padding: 5px 5px 12px;
    border: 0;
    border-radius: 0;
    background: rgba(10, 2, 20, .72);
    color: var(--hs-text);
    text-decoration: none;
    overflow: hidden;
    isolation: isolate;
    -webkit-clip-path: url(#hs-shield-clip);
            clip-path: url(#hs-shield-clip);
}
body.hs-ready .hs-brand {
    transition: box-shadow .25s ease;
}
.hs-brand:hover { text-decoration: none; }
.hs-brand.hover-matrix { box-shadow: 0 0 32px rgba(0, 234, 255, .4); }
.hs-brand.hover-matrix .hs-brand-logo { opacity: 0; }

/* Resting shield outline — thin white-50% stroke that traces the shield's
   silhouette. Replaces the rectangular `border` we killed. Fades out on
   hover so the conic flux-ring (::before) takes over cleanly. */
.hs-brand::after {
    content: "";
    position: absolute; inset: 0;
    background: rgba(255, 255, 255, .5);
    -webkit-mask: url(#hs-shield-rest-mask);
            mask: url(#hs-shield-rest-mask);
    pointer-events: none;
    z-index: 3;
    opacity: 1;
    transition: opacity .2s ease;
}
.hs-brand.hover-matrix::after { opacity: 0; }

.hs-brand-logo {
    width: 60px; height: 60px;
}
body.hs-ready .hs-brand-logo {
    transition: width .55s var(--hs-ease), height .55s var(--hs-ease), filter .35s var(--hs-ease), opacity .08s ease-out;
}
.hs-site-header.is-scrolled .hs-brand-logo { width: 41px; height: 41px; }

.hs-pillars {
    display: flex;
    gap: 8px;
    list-style: none;
}
.hs-pillars a {
    padding: 10px 16px;
    border-radius: var(--hs-radius-sm);
    color: var(--hs-muted);
    font-size: 0.875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    text-decoration: none;
    transition: color .2s var(--hs-ease), background .2s var(--hs-ease);
}
.hs-pillars a:hover { color: var(--hs-text); background: var(--hs-bg-soft); }
.hs-pillars a.current-menu-item,
.hs-pillars a.current-menu-ancestor { color: var(--hs-cyan); background: var(--hs-bg-soft); }

/* Desktop pillars — portal buttons in the matrix-family (same shell as cart +
   hamburger). Mobile row-2 pillars stay base text-only style.
   Default border: white 50%. Dark bg, cyan text. On hover mega-menu.js adds
   .hover-matrix → flux-ring ::before shows, text fades transparent, matrix
   canvas fades in. Height + radius scale with header state. */
.hs-pillars-desktop .hs-pillars { gap: 12px; }
.hs-pillars-desktop .hs-pillars a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
    height: 56px;
    padding: 0 18px;
    font-size: 1.75rem;
    border: 1px solid rgba(255, 255, 255, .5);
    border-radius: 0;
    background: rgba(10, 2, 20, .72);
    color: #fff;
    overflow: hidden;
    isolation: isolate;
    text-decoration: none;
}
body.hs-ready .hs-pillars-desktop .hs-pillars a {
    transition:
        color .08s ease-out,
        border-color .25s ease,
        box-shadow .25s ease;
}
/* On hover-matrix: text fades transparent (matches cart svg opacity:0),
   border goes transparent so the flux-ring ::before is the only outline. */
.hs-pillars-desktop .hs-pillars a.hover-matrix {
    color: transparent;
    text-shadow: none;
    border-color: transparent;
    box-shadow: 0 0 32px rgba(0, 234, 255, .4);
}

.hs-header-actions { display: flex; align-items: center; gap: 8px; position: relative; z-index: 2; }

/* Cart + hamburger — sized to match the griffin brand button (76×76 with
   4px padding, 10px radius, 48×48 inner icon). Keeps the three portal buttons
   visually identical so the header reads as "three icons, one language."
   Overrides base sizes from .hs-cart-btn (below) and .hamburger (in mega-menu.css). */
.hs-site-header .hs-cart-btn,
.hs-site-header .hamburger {
    width: 95px; height: 95px; border-radius: 10px; padding: 5px;
}
/* Cart + hamburger SVGs sized to match the griffin logo inside the 95px
   frame — same outer button size, matching inner icon breathing room. */
.hs-site-header .hs-cart-btn svg { width: 60px; height: 60px; }
.hs-site-header .hamburger > .hb-sigil { width: 60px; height: 60px; }
.hs-site-header.is-scrolled .hs-cart-btn,
.hs-site-header.is-scrolled .hamburger {
    width: 53px; height: 53px; border-radius: 10px;
}
.hs-site-header.is-scrolled .hs-cart-btn svg { width: 26px; height: 26px; }
.hs-site-header.is-scrolled .hamburger > .hb-sigil { width: 33px; height: 33px; }

/* Mobile: portal buttons (still proportionally smaller than desktop). */
@media (max-width: 680px) {
    .hs-site-header .hs-brand,
    .hs-site-header .hs-cart-btn,
    .hs-site-header .hamburger { width: 71px; height: 71px; }
    .hs-site-header .hs-brand-logo,
    .hs-site-header .hs-cart-btn svg,
    .hs-site-header .hamburger > .hb-sigil { width: 45px; height: 45px; }
}
body.hs-ready .hs-site-header .hs-cart-btn,
body.hs-ready .hs-site-header .hs-cart-btn svg,
body.hs-ready .hs-site-header .hamburger,
body.hs-ready .hs-site-header .hamburger > .hb-sigil {
    transition:
        width .55s var(--hs-ease),
        height .55s var(--hs-ease),
        border-radius .55s var(--hs-ease),
        box-shadow .25s ease,
        border-color .25s ease,
        opacity .08s ease-out;
}

@media (prefers-reduced-motion: reduce) {
    body.hs-ready .hs-site-header,
    body.hs-ready .hs-site-header-inner,
    body.hs-ready .hs-brand,
    body.hs-ready .hs-brand-logo,
    body.hs-ready .hs-pillars-desktop .hs-pillars a,
    body.hs-ready .hs-site-header .hs-cart-btn,
    body.hs-ready .hs-site-header .hs-cart-btn svg,
    body.hs-ready .hs-site-header .hamburger,
    body.hs-ready .hs-site-header .hamburger > .hb-sigil { transition: none !important; }
}
/* Cart sits in the same matrix-portal family as hamburger / close-x / back.
   Base shape matches hamburger (56×56, 14px radius, .72 deep bg).
   Flux ring + hover-matrix canvas styles live in assets/css/mega-menu.css. */
.hs-cart-btn {
    position: relative;
    width: 56px; height: 56px;
    border: 1px solid rgba(255, 255, 255, .5); border-radius: 14px;
    background: rgba(10, 2, 20, .72);
    color: var(--hs-cyan);
    display: grid; place-items: center; padding: 0;
    cursor: pointer;
    overflow: hidden;
    isolation: isolate;
    transition: box-shadow .25s ease, border-color .25s ease;
    text-decoration: none;
}
.hs-cart-btn:hover { text-decoration: none; }
.hs-cart-btn svg {
    position: relative;
    z-index: 3;
    width: 28px; height: 28px;
    display: block;
    color: #fff;
    transition: opacity .08s ease-out;
}
.hs-cart-btn.hover-matrix svg { opacity: 0; }
/* Hamburger button styles live in assets/css/mega-menu.css — it's the
   Ophiuchus sigil portal, not a generic header button. */
.hs-cart-count {
    position: absolute; top: 4px; right: 4px;
    z-index: 4;
    min-width: 20px; height: 20px;
    padding: 0 6px;
    border-radius: 10px;
    background: var(--hs-pink);
    color: #0a0e1b;
    font-size: 11px; font-weight: 800;
    display: inline-flex; align-items: center; justify-content: center;
    letter-spacing: 0;
}
.hs-cart-count[hidden] { display: none; }

/* Tablet + mobile: the middle pillar menu hides — pillars are reachable
   through the hamburger mega-menu instead. 1024px covers portrait iPads
   and anything narrower.
   The .hs-site-header-row2 element stays rendered in header.php but is
   display:none across all widths. To re-introduce a mobile second row of
   pillars later, swap the row2 display back to block inside this media
   query and restore the .hs-pillars styling block. */
.hs-site-header-row2 { display: none; }
@media (max-width: 1024px) {
    .hs-pillars-desktop { display: none; }
}

/* Mega-menu styles (Ophiuchus hamburger + full-screen overlay + matrix rain)
   live in assets/css/mega-menu.css, enqueued via functions.php. */

/* ── Page layout ───────────────────────────────────────────────────── */
.hs-page {
    padding: 0 0 48px;
}

/* Full-screen page hero — .hs-page-title is now a 100svh flex-centered
   block. Every page, single post, and archive page opens with the title
   filling the viewport. The sticky header (transparent at rest) overlays
   the top of the hero; the h1 reads centered in the visible area below. */
.hs-page-title {
    min-height: 100vh;
    min-height: 100svh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    margin: 0;
    position: relative;
}
.hs-page-title > .hs-container { width: 100%; }
.hs-page-title h1 {
    font-size: clamp(2.5rem, 8vw, 5.5rem);
    line-height: 1.05;
    margin: 0;
}
.hs-page-title p,
.hs-page-title > .hs-container > p,
.hs-page-title > .hs-container > div {
    max-width: 720px;
    margin-left: auto;
    margin-right: auto;
}

.hs-page-content {
    max-width: 880px;
    padding-top: 64px;
    color: var(--hs-muted);
}

/* Hero tagline — shown when a page has an explicit excerpt. Sits below the
   h1 inside .hs-page-title. */
.hs-hero-tagline {
    font-size: clamp(1.05rem, 1.6vw, 1.35rem);
    color: var(--hs-muted);
    text-align: center;
    margin: 24px auto 0;
    max-width: 640px;
    line-height: 1.5;
}

/* ── Home page components ──────────────────────────────────────────── */
.hs-home-tracks,
.hs-home-tiers,
.hs-home-cta {
    margin: 80px 0;
}
.hs-home-tracks-grid,
.hs-home-tiers-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 20px;
    margin-top: 32px;
}
.hs-home-track {
    position: relative;
    display: block;
    padding: 32px;
    border: 1px solid rgba(255, 255, 255, .10);
    border-radius: var(--hs-radius);
    background: rgba(10, 2, 20, .5);
    color: var(--hs-text);
    text-decoration: none;
    transition: border-color .2s var(--hs-ease), transform .2s var(--hs-ease), box-shadow .2s var(--hs-ease);
}
.hs-home-track:hover {
    border-color: var(--hs-cyan);
    transform: translateY(-2px);
    box-shadow: 0 0 30px rgba(0, 229, 255, .15);
    text-decoration: none;
}
.hs-home-track h3 {
    color: var(--hs-cyan);
    margin-bottom: 12px;
    font-size: 1.25rem;
}
.hs-home-track p {
    color: var(--hs-muted);
    margin: 0;
}
.hs-home-track-arrow {
    position: absolute;
    top: 24px;
    right: 24px;
    color: var(--hs-dim);
    font-size: 1.25rem;
    transition: color .2s var(--hs-ease), transform .2s var(--hs-ease);
}
.hs-home-track:hover .hs-home-track-arrow {
    color: var(--hs-cyan);
    transform: translateX(4px);
}
.hs-home-tier {
    padding: 24px;
    border: 1px solid var(--hs-line);
    border-radius: var(--hs-radius);
    background: var(--hs-bg-panel);
}
.hs-home-tier-mine {
    border-color: var(--hs-cyan);
    box-shadow: 0 0 24px rgba(0, 229, 255, .15);
}
.hs-home-tier-label {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--hs-dim);
    display: block;
    margin-bottom: 12px;
}
.hs-home-tier-mine .hs-home-tier-label { color: var(--hs-cyan); }
.hs-home-tier h3 {
    margin-bottom: 8px;
    color: var(--hs-text);
    font-size: 1.15rem;
}
.hs-home-tier p {
    color: var(--hs-muted);
    margin: 0;
}
.hs-home-tiers-lede {
    text-align: center;
    color: var(--hs-muted);
    margin-top: 12px;
}
.hs-home-tiers-close {
    margin-top: 40px;
    padding: 20px 24px;
    border-left: 3px solid var(--hs-cyan);
    color: var(--hs-text);
    font-size: 1.0625rem;
    line-height: 1.55;
}
.hs-home-cta {
    text-align: center;
}
.hs-home-cta h2 { margin-bottom: 12px; }
.hs-home-cta p { margin-bottom: 16px; }

.hs-page-content h1,
.hs-page-content h2,
.hs-page-content h3 { color: var(--hs-text); margin-top: 2rem; margin-bottom: 1rem; }
.hs-page-content h1:first-child,
.hs-page-content h2:first-child { margin-top: 0; }
.hs-page-content p { margin-bottom: 1.2em; }
.hs-page-content ul,
.hs-page-content ol { margin-bottom: 1.2em; padding-left: 1.5em; color: var(--hs-muted); }
.hs-page-content blockquote {
    border-left: 3px solid var(--hs-cyan);
    padding-left: 1rem;
    margin: 1.5em 0;
    color: var(--hs-text);
    font-style: italic;
}
.hs-page-content code {
    background: var(--hs-bg-soft2);
    padding: 2px 6px;
    border-radius: 4px;
    font-family: 'Cascadia Code', Consolas, monospace;
    font-size: 0.9em;
    color: var(--hs-green);
}
.hs-page-content pre {
    background: var(--hs-bg-panel);
    padding: 16px;
    border-radius: var(--hs-radius-sm);
    overflow-x: auto;
    border: 1px solid var(--hs-line);
}

/* ── Site footer ───────────────────────────────────────────────────── */
.hs-site-footer {
    margin-top: 80px;
    padding: 48px 0 32px;
    border-top: 1px solid var(--hs-line);
    background: var(--hs-bg-deep);
}
.hs-site-footer-inner {
    max-width: var(--hs-container-max);
    margin: 0 auto;
    padding: 0 32px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 32px;
}
@media (max-width: 680px) { .hs-site-footer-inner { padding: 0 16px; } }
.hs-footer-col h4 {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--hs-dim);
    margin-bottom: 12px;
}
.hs-footer-col ul { list-style: none; }
.hs-footer-col li a {
    display: block;
    padding: 6px 0;
    color: var(--hs-muted);
    font-size: 0.875rem;
    text-decoration: none;
}
.hs-footer-col li a:hover { color: var(--hs-cyan); }
.hs-footer-bottom {
    width: 100%;
    margin: 24px 0 0;
    padding: 16px 32px;
    color: var(--hs-dim);
    font-size: 0.8125rem;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 16px;
}
.hs-footer-copy   { justify-self: start; }
.hs-footer-shadow { justify-self: center; color: #FF2Fd3; text-decoration: none; transition: color .2s var(--hs-ease); }
.hs-footer-shadow:hover { color: var(--hs-cyan); text-decoration: none; }
.hs-footer-mark   { justify-self: end; }
.hs-footer-griffin {
    width: 24px;
    height: 24px;
    opacity: 0.55;
    transform: scaleX(-1);  /* flip to face left */
    filter: drop-shadow(0 0 6px rgba(40, 240, 138, 0.2));
    transition: opacity .2s var(--hs-ease);
}
.hs-footer-griffin:hover { opacity: 0.9; }
@media (max-width: 680px) {
    .hs-footer-bottom { padding: 24px 16px 0; grid-template-columns: 1fr; text-align: center; }
    .hs-footer-copy, .hs-footer-shadow, .hs-footer-mark { justify-self: center; }
}

/* ── Buttons ───────────────────────────────────────────────────────── */
.hs-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 20px;
    border-radius: var(--hs-radius-sm);
    font-weight: 700;
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    cursor: pointer;
    border: 1px solid transparent;
    text-decoration: none;
    transition: all 0.2s var(--hs-ease);
}
.hs-btn:hover { text-decoration: none; transform: translateY(-1px); }
.hs-btn-primary { background: linear-gradient(180deg, var(--hs-cyan), #00b8cf); color: #032028; }
.hs-btn-primary:hover { filter: brightness(1.1); color: #032028; }
.hs-btn-ghost { border-color: var(--hs-line); color: var(--hs-text); background: var(--hs-bg-soft); }
.hs-btn-ghost:hover { border-color: var(--hs-cyan); color: var(--hs-cyan); }

/* ── Utility ──────────────────────────────────────────────────────── */
.hs-hidden { display: none !important; }
.hs-sr-only {
    position: absolute; width: 1px; height: 1px;
    padding: 0; margin: -1px; overflow: hidden;
    clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}