/* =====================================================================
   EDIT HERE — MEMBER PANEL BACKDROP
   --panel-image: photo shown behind the green hero panel. Drop your file
     into this css/ folder (e.g. panel.jpg) and point this line at it, or
     use a path like url("../assets/your-photo.jpg"). Drawn centre/cover.
   --panel-tint: strength of the green overlay on top of the photo.
     0 = raw photo, 1 = solid green. Raise it if the photo is busy.
   ===================================================================== */
:root {
  --panel-image: url("../assets/1112.png");
  /* Green cast laid over the photo. Below .4 the photo reads almost raw;
     everything above .6 turns it back into a flat green card. */
  --panel-tint: .12;
  /* Strength of the whole photo layer over the solid green panel.
     Must stay >= .7 or the panel photo reads as a flat green wash. */
  --panel-photo-opacity: .9;
  /* Opaque green the panel falls back to *under* the photo, so the surface can
     never read as transparent when the photo layer is dialled down. */
  --panel-base: linear-gradient(148deg, #304D30 0%, #1C3D26 45%, #0F2116 100%);
  /* The photo is centred on the *hero*, but only the right-hand slice of the
     hero is panel, so at its natural position the picture's interesting middle
     sits behind the copy and the panel only ever showed its flat dark edge.
     Zooming and shifting slides the subject into the panel. 1 = untouched. */
  --panel-photo-zoom: 1.45;
  --panel-photo-shift: 15%;
  --slant: 8%;
  /* The panel surface is a diagonal colour gradient laid OVER the photo, so the
     picture still reads through it. Three stops: a lifted forest at the top
     left, the core green through the middle, and a deep shadow toward the
     bottom right so the button sits on the darkest part. Every layer in this
     stack multiplies together, so these alphas have to stay low: at .6+ each,
     the combined opacity left the photo at roughly 8% contrast and it read as
     a plain green panel. */
  --panel-gradient: linear-gradient(148deg, rgba(48, 77, 48, .16) 0%, rgba(28, 61, 38, .22) 45%, rgba(15, 33, 22, .45) 100%);
  /* Panel: a soft forest-to-deep gradient (glass behind on top), with a
     subtle pale-foreground sheen centred behind the text for the modern
     editorial feel. The old "deep green only" panel has been retired from
     the panel itself (kept as --panel-deep for stock photos / overlays). */
  --panel-deep: #163020;    /* legacy hard green — no longer used on the panel surface */
  --panel-deeper: #0F2116;  /* legacy hard dark — no longer used on the panel surface */
  --panel-foreground: radial-gradient(ellipse at 50% 38%, rgba(238,240,229,.18), rgba(238,240,229,0) 58%);
  --panel-glass-tint: rgba(22, 48, 32, .22);
  --panel-glass-tint-2: rgba(22, 48, 32, .10);
  /* Soft darkening scrim: keeps white type legible over the brighter parts of
     the photo. Deepest toward the panel edges, which is where the text pane
     sits both open and closed, so the middle of the picture still reads. */
  --panel-vignette: radial-gradient(ellipse at 50% 50%, rgba(12, 24, 16, .02), rgba(12, 24, 16, .62) 70%);
  --panel-eyebrow: #EEF0E5;    /* soft pale for eyebrow labels */
  --panel-eyebrow-muted: rgba(238,240,229,.72);

  /* ===================================================================
     EDIT HERE — MEMBER LOGIN BUTTON
     --login-btn-gap:   space between the paragraph and the button. Raise it
                        to push the button lower.
     --login-btn-h:     button height.
     --login-btn-pad-x: left/right padding (controls the width).
     --login-btn-font:  label size.
     --panel-pane-max:  widest the text/button block may grow. Raise it if
                        the label wraps onto two lines.
     =================================================================== */
  --login-btn-gap: 8rem;
  --login-btn-h: clamp(100px, 8vw, 150px);
  --login-btn-pad-x: clamp(2.5rem, 4vw, 5.5rem);
  --login-btn-font: clamp(1.8rem, 3.2vw, 2.9rem);
  --panel-pane-max: 800px;

  /* Floating header bar: height of the rounded nav pill + the breathing room
     above/below it. The hero is pulled up by --header-block so the photo runs
     all the way to the top of the page, behind the bar. */
  --header-pad: .9rem;
  --header-bar-h: 64px;
  --back-h: 34px;
  --header-block: calc(var(--header-bar-h) + var(--header-pad) * 2);

  color-scheme: light;
  --forest: #163020;
  --forest-deep: #0F2116;
  --cream: #EEF0E5;
  --gold: #304D30;
  --ink: #163020;
  --muted: #163020;
  --line: rgba(22, 48, 32, .12);
  /* Tailwind color channels (dark-mode aware) */
  --c-forest: 22 48 32;
  --c-forest-deep: 15 33 22;
  --c-cream: 238 240 229;
  --c-gold: 48 77 48;
  --c-ink: 22 48 32;
  --c-muted: 22 48 32;
  --bg-page: #EEF0E5;
  --bg-card: #EEF0E5;
  --bg-band: #B6C4B6;
  --bg-band-alt: rgba(238, 240, 229, .4);
  --bg-header: rgba(238, 240, 229, .93);
  --border-card: #CBD5CB;
  --text-muted: var(--muted);
}

html.dark {
  color-scheme: dark;
  --forest: #4ade80;
  --forest-deep: #86efac;
  --gold: #e6c45e;
  --ink: #e6ece7;
  --muted: #163020;
  --line: rgba(134, 239, 172, .16);
  --c-forest: 74 222 128;
  --c-forest-deep: 134 239 172;
  --c-cream: 12 24 16;
  --c-gold: 230 196 94;
  --c-ink: 230 236 231;
  --c-muted: 154 168 158;
  --bg-page: #0c1810;
  --bg-card: #14231a;
  --bg-band: #101d14;
  --bg-band-alt: rgba(74, 222, 128, .05);
  --bg-header: rgba(12, 24, 16, .93);
  --border-card: #23392b;
  --text-muted: #163020;
}

body { background: var(--bg-page); transition: background .3s ease, color .3s ease; }

/* Theme toggle button */
.theme-toggle { display: grid; width: 40px; height: 40px; place-items: center; border: 1px solid rgba(22, 48, 32, .15); border-radius: 999px; background: rgba(255, 255, 255, .5); color: var(--forest); cursor: pointer; transition: background .2s ease, border-color .2s ease, color .2s ease, transform .2s ease; }
.theme-toggle:hover { transform: translateY(-1px); background: rgba(22, 48, 32, .06); }
html.dark .theme-toggle { background: rgba(255, 255, 255, .06); }
html.dark .theme-toggle:hover { background: rgba(74, 222, 128, .08); }
.theme-toggle .icon-sun { display: block; }
.theme-toggle .icon-moon { display: none; }
html.dark .theme-toggle .icon-sun { display: none; }
html.dark .theme-toggle .icon-moon { display: block; }
/* The emblem carries its own colours, so it needs no themed background. */
.brand-mark img { display: block; width: 100%; height: 100%; object-fit: contain; }

/* Dark-mode component overrides */
html.dark body { background: var(--bg-page); color: var(--ink); }
html.dark .site-header { background: transparent; }
html.dark .site-nav { border-color: rgba(134, 239, 172, .2); background: rgba(254, 250, 224, .06); box-shadow: 0 14px 34px rgba(0, 0, 0, .5), inset 0 1px 0 rgba(255, 255, 255, .06); }
html.dark .nav-link { color: #163020; }
html.dark .nav-link:hover { color: var(--forest); }
html.dark .eyebrow { color: var(--forest); }
html.dark .hero { background: linear-gradient(rgba(12, 24, 16, .86), rgba(12, 24, 16, .92)), radial-gradient(ellipse at 78% 45%, rgba(230, 196, 94, .08), transparent 30%), url("../assets/sfi-new.png") center 48% / cover no-repeat; }
html.dark .hero:before { border-color: rgba(134, 239, 172, .08); }
html.dark .hero:after { border-color: rgba(230, 196, 94, .1); }
html.dark .theme-toggle, html.dark .mobile-menu button[class*="border-forest"] { border-color: rgba(134, 239, 172, .18); color: var(--forest); }
html.dark .mobile-menu { border-color: var(--line); background: var(--bg-card); box-shadow: 0 18px 36px rgba(0, 0, 0, .5); }
html.dark .stat-item + .stat-item { border-left-color: rgba(255, 255, 255, .12); }
html.dark .feature-card { border-color: var(--border-card); background: var(--bg-card); box-shadow: 0 4px 14px rgba(0, 0, 0, .25); }
html.dark .feature-card:hover { border-color: rgba(74, 222, 128, .35); box-shadow: 0 14px 26px rgba(0, 0, 0, .4); }
html.dark .icon-box { border-color: #23392b; background: rgba(74, 222, 128, .08); color: var(--forest); }
html.dark .feature-card:hover .icon-box { background: rgba(230, 196, 94, .14); color: var(--gold); }
html.dark .step-line { border-top-color: rgba(134, 239, 172, .3); }
html.dark .faq-item { border-bottom-color: var(--line); }
html.dark .faq-item summary:after { background: rgba(74, 222, 128, .1); color: var(--forest); }
html.dark .faq-item p { color: #163020; }
html.dark .staff-dialog, html.dark .loan-dialog { border-color: var(--border-card); background: var(--bg-card); color: var(--ink); }
html.dark .staff-dialog::backdrop, html.dark .loan-dialog::backdrop { background: rgba(0, 0, 0, .72); }
html.dark .dialog-close { border-color: var(--line); background: transparent; color: var(--forest); }
html.dark .password-toggle, html.dark .staff-password-toggle { color: var(--forest); }
html.dark .staff-field label { color: #163020; }
html.dark .staff-field input { border-color: #2b4534; background: #0e1c13; color: var(--ink); }
html.dark .staff-field input:focus { border-color: var(--forest); outline-color: rgba(74, 222, 128, .14); }
html.dark .button-secondary { border-color: rgba(134, 239, 172, .25); background: rgba(74, 222, 128, .08); color: var(--forest); }
html.dark .button-secondary:hover { background: rgba(74, 222, 128, .14); }

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 6.5rem; }
body { margin: 0; background: var(--bg-page); color: var(--ink); font-family: Inter, Arial, sans-serif; -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
button, a { -webkit-tap-highlight-color: transparent; }
button:focus-visible, a:focus-visible, summary:focus-visible { outline: 3px solid var(--gold); outline-offset: 4px; }
.serif { font-family: Fraunces, Georgia, serif; }
.eyebrow { color: var(--forest); font-size: .72rem; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; }
.section-wrap { width: min(100% - 3rem, 1160px); margin-inline: auto; }

/* --- Header: a floating rounded bar over the hero photo ------------------
   The bar itself is transparent so the photo (pulled up under it by the
   hero's negative margin) shows through the gaps; only the inner pill is
   painted. pointer-events keeps the transparent gutters clickable. */
.site-header { position: sticky; z-index: 30; top: 0; border: 0; background: transparent; padding-block: var(--header-pad); pointer-events: none; }
.site-header > * { pointer-events: auto; }
.site-nav { width: min(100% - 2rem, 1240px); min-height: var(--header-bar-h); margin-inline: auto; border: 1px solid rgba(22, 48, 32, .13); border-radius: 999px; background: rgba(244, 242, 233, .92); backdrop-filter: blur(18px) saturate(1.5); -webkit-backdrop-filter: blur(18px) saturate(1.5); padding: .35rem .45rem .35rem 1.15rem; box-shadow: 0 16px 40px rgba(22, 48, 32, .14), 0 2px 6px rgba(22, 48, 32, .06), inset 0 1px 0 rgba(255, 255, 255, .8); transition: box-shadow .25s ease; }
.nav-link { display: inline-flex; min-height: 40px; align-items: center; border-radius: 999px; padding: 0 .95rem; color: #4e5a50; font-size: .86rem; font-weight: 500; transition: color .2s ease, background .2s ease; }
.nav-link:hover { background: rgba(22, 48, 32, .07); color: var(--forest); }
/* Back chip: sits ABOVE the rounded topbar, pinned to the upper-left corner
   (outside the bar). Its row height is added to --header-block so the hero
   photo still runs to the very top of the page. */

html.dark .nav-link:hover { background: rgba(74, 222, 128, .1); }
/* The emblem keeps its own colours, so it sits on a small white disc. */
.site-nav .brand-mark { border-radius: 999px; background: #EEF0E5; box-shadow: 0 0 0 1px rgba(22, 48, 32, .12), 0 2px 6px rgba(22, 48, 32, .1); padding: 2px; }
html.dark .site-nav .brand-mark { background: rgba(255, 255, 255, .92); }

/* Secret staff entry: sitting in the gap right after the brand text. At rest
   it paints nothing at all — no dot, no colour, no cursor tell — so a visitor
   never sees it. Sweeping the mouse over the spot reveals it (soft halo, thin
   ring, gold dot, pointer cursor) so staff know the button is live. The dot is
   transparent at rest because it inherits currentColor, and it is also 0px, so
   it is doubly invisible. The 22px box is kept purely as the hit target. It
   sits outside the logo link so the logo keeps navigating. */
.staff-secret { display: grid; flex: none; width: 22px; height: 22px; place-items: center; border: 0; border-radius: 999px; background: transparent; padding: 0; color: transparent; cursor: default; transition: background .18s ease, color .18s ease, box-shadow .18s ease, transform .18s ease; }
.staff-secret::before { width: 0; height: 0; border-radius: 999px; background: currentColor; content: ''; transition: width .18s ease, height .18s ease; }
.staff-secret:hover { background: rgba(121, 134, 69, .14); color: var(--gold); cursor: pointer; transform: scale(1.06); box-shadow: 0 0 0 1px rgba(121, 134, 69, .22); }
.staff-secret:hover::before { width: 7px; height: 7px; }
.staff-secret:focus-visible { outline: 0; }
html.dark .staff-secret:hover { background: rgba(230, 196, 94, .16); color: var(--gold); box-shadow: 0 0 0 1px rgba(230, 196, 94, .28); }

.button-primary, .button-secondary { display: inline-flex; min-height: 48px; align-items: center; justify-content: center; gap: .6rem; border-radius: 6px; padding: .8rem 1.2rem; font-size: .87rem; font-weight: 700; transition: transform .2s ease, box-shadow .2s ease, background .2s ease; }
.button-primary { background: var(--forest); color: white; box-shadow: 0 5px 15px rgba(22, 48, 32, .12); }
.button-primary:hover { transform: translateY(-2px); background: var(--forest-deep); box-shadow: 0 10px 22px rgba(22, 48, 32, .19); }
.button-secondary { border: 1px solid rgba(22, 48, 32, .2); background: rgba(255, 255, 255, .48); color: var(--forest); }
.button-secondary:hover { transform: translateY(-2px); background: white; box-shadow: 0 8px 18px rgba(22, 48, 32, .08); }

.hero { position: relative; overflow: hidden; min-height: 100vh; margin-top: calc(-1 * var(--header-block) - 2px); padding: calc(var(--header-block) + 2rem) calc(24px + env(safe-area-inset-right, 0px)) 2rem calc(24px + env(safe-area-inset-left, 0px)); background: linear-gradient(rgba(244, 242, 233, .78), rgba(244, 242, 233, .86)), radial-gradient(ellipse at 78% 45%, rgba(121, 134, 69, .095), transparent 30%), url("../assets/sfi-new.png") center 48% / cover no-repeat; }
.hero:before { position: absolute; top: -13rem; right: -10rem; width: 38rem; height: 38rem; border: 1px solid rgba(22, 48, 32, .07); border-radius: 50%; content: ''; animation: orbit 34s linear infinite; }
.hero:after { position: absolute; top: -8rem; right: -5rem; width: 28rem; height: 28rem; border: 1px solid rgba(121, 134, 69, .1); border-radius: 50%; content: ''; animation: orbit 42s linear infinite reverse; }
/* The stage runs the full padded width, capped at 1240px (same cap as the
   header pill). Tight 12px under the bar and 12px above the green strip. */
.hero-inner { position: relative; z-index: 5; width: min(100%, 1240px); padding-block: calc(var(--header-pad) + var(--header-bar-h) + 6px) 6px; }
.hero-art { animation: hero-enter .9s .12s both cubic-bezier(.2, .75, .25, 1); }
.art-float { animation: float 5s ease-in-out infinite; }

/* --- Hero: text on the left, form + sliding panel on the right ----------
   Closed: the panel covers the sign-in form. Clicking "Member Login"
   slides it over the text half (up on mobile) and reveals the form.
   The panel image/tint come from the EDIT HERE variables at the top. */
.hero-badge { display: inline-flex; align-items: center; gap: .5rem; border: 1px solid rgba(22, 48, 32, .12); border-radius: 999px; background: rgba(255, 255, 255, .72); padding: .5rem .9rem; color: var(--forest); font-size: .75rem; font-weight: 600; backdrop-filter: blur(6px); }
.hero-badge:before { width: 8px; height: 8px; flex: none; border-radius: 999px; background: var(--gold); content: ''; }
html.dark .hero-badge { border-color: rgba(134, 239, 172, .22); background: rgba(12, 24, 16, .66); }
/* Mobile-first: copy stacked above the stage. Desktop (min-width: 1024px)
   overlaps both in one cell — see the media block after .hero-panel. */
.hero-split { display: grid; grid-template-columns: 1fr; align-items: stretch; gap: 2.5rem; --hero-gap: 2.5rem; }
.hero-copy { position: relative; z-index: 1; align-self: center; animation: hero-enter .8s both cubic-bezier(.2, .75, .25, 1); }
/* Kept inside the panel's slide footprint so the green panel fully covers the
   copy when it slides open, but given room to breathe: the old setting capped
   the column and crushed the heading into a tight, compressed stack. */
.hero-copy h1 { font-size: clamp(2.35rem, 3.9vw, 3.5rem); line-height: 1.1; letter-spacing: -.012em; }
.hero-copy p { font-size: 1rem; line-height: 1.7; }
/* The subtext sits directly over the washed photo, so it needs more weight than the muted token to stay readable on the darkest patches. */
.hero-copy > p { color: #4e5a50; }
html.dark .hero-copy > p { color: #163020; }

/* Bottom layer: the sign-in card, sized to sit fully inside the panel. */
.hero-stage { position: relative; display: grid; align-items: center; justify-items: center; }
.hero-signin { position: relative; z-index: 1; display: grid; width: 100%; justify-items: center; }
.hero-signin { transition: visibility 0s; }
.hero-signin[inert] { visibility: hidden; transition: visibility 0s .7s; }
/* Compact enough to sit fully inside the 46% panel at every stage height. */
.hero-signin-card { width: 100%; max-width: 380px; border: 1px solid var(--border-card); border-radius: 16px; background: var(--bg-card); padding: 18px; box-shadow: 0 24px 60px rgba(22, 48, 32, .16), 0 2px 8px rgba(22, 48, 32, .06); animation: hero-enter .8s .12s both cubic-bezier(.2, .75, .25, 1); }
html.dark .hero-signin-card { box-shadow: 0 24px 60px rgba(0, 0, 0, .5); }
/* Tighter internals so the card sits comfortably inside the panel with margin. */
.hero-signin-card .eyebrow { margin-top: 0; }
.hero-signin-card h2 { margin-top: .3rem; font-size: 1.55rem; line-height: 1.2; }
.hero-signin-card p { margin-top: .4rem; font-size: .82rem; line-height: 1.5; }
.hero-signin-card form > p:last-child { font-size: .72rem; }
.hero-signin-card .staff-field { gap: .3rem; margin-top: .6rem; }
.hero-signin-card .staff-field label { font-size: .78rem; }
.hero-signin-card .staff-field input { min-height: 42px; }
.hero-signin-card .button-primary { min-height: 44px; margin-top: .9rem; }

/* Top layer: the sliding panel. The big elliptical radius faces the text;
   it flips to the other side mid-slide so the curve always faces the form.
   The panel bleeds past the stage: down/up to the hero's edges and out to the
   right screen edge, so it covers the whole right half of the background. */
.hero { position: relative; }

/* Panel = one full-hero parallelogram (same box as .hero, so it runs from the
   very top of the page, behind the header, to the bottom of the hero).
   Both edges are slanted with the same angle via --slant; --edge is where the
   slanted edge sits at mid-height. The shape slides by animating clip-path only. */
.hero-panel {
  position: absolute;
  inset: 0;
  z-index: 10;
  display: grid;
  overflow: hidden;
  --slant: 4%;
  --edge: 50%;
  clip-path: polygon(calc(var(--edge) + var(--slant)) 0, calc(140% + var(--slant)) 0, calc(140% - var(--slant)) 100%, calc(var(--edge) - var(--slant)) 100%);
  background: var(--panel-base);
  color: #fff;
  transition: clip-path 0.7s cubic-bezier(.65, 0, .35, 1);
  will-change: clip-path;
  pointer-events: auto;
}
.hero-panel.is-open {
  clip-path: polygon(calc(-40% + var(--slant)) 0, calc(var(--edge) + var(--slant)) 0, calc(var(--edge) - var(--slant)) 100%, calc(-40% - var(--slant)) 100%);
}

.hero-panel-bg { position: absolute; inset: 0; opacity: var(--panel-photo-opacity); background-image: radial-gradient(ellipse 70% 64% at 50% 46%, rgba(14, 31, 26, .30), rgba(14, 31, 26, 0) 76%), linear-gradient(160deg, rgba(22, 48, 32, var(--panel-tint)), rgba(18, 36, 30, var(--panel-tint))), var(--panel-image); background-position: center; background-size: cover; background-repeat: no-repeat; transform: scale(var(--panel-photo-zoom)) translateX(var(--panel-photo-shift)); }
/* Darkening scrim behind the panel copy: the photo layer above is now bright
   enough to read, so this keeps white type legible wherever the picture is
   light. It is a soft vignette (darkest toward the panel edges, which is where
   the text pane sits whether the panel is open or closed). */
.hero-panel-scrim { position: absolute; inset: 0; pointer-events: none; background: var(--panel-vignette); }
/* Colour gradient wash: sits over the photo (which stays visible beneath it)
   and under the text, so the panel reads as a gradient rather than a flat
   green while the background image still shows through. No z-index: it takes
   part in DOM order, so the soft sheen and eyebrow ring still layer above it. */
.hero-panel-gradient { position: absolute; inset: 0; background: var(--panel-gradient); }
/* The sheen and the eyebrow ring are decorative overlays. They previously had
   no base rule at all (only html.dark variants), which left them as plain grid
   children — they spawned two phantom rows that squeezed the pane upward, so
   the content never sat centred and the button ended up ABOVE the panel's
   midpoint. Anchoring them absolutely keeps the pane as the only grid item. */
.hero-panel-soft, .hero-panel-eyebrow-ring { position: absolute; inset: 0; pointer-events: none; }

.hero-panel-pane {
  grid-area: 1 / 1;
  position: relative;
  z-index: 3;
  align-self: center;
  justify-self: start;
  margin-left: 75%;
  translate: -50% 0;
  width: min(100% - 3.5rem, var(--panel-pane-max), 47vw);
  text-align: center;
  padding: 1.7rem 1.4rem 2rem;
  border-radius: 20px;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  transition: opacity .5s ease, transform .5s cubic-bezier(.3, .1, .2, 1), visibility 0s, margin-left 0.7s cubic-bezier(.65, 0, .35, 1);
}
.hero-panel.is-open .hero-panel-pane { margin-left: 25%; }

#hero-panel-welcome { opacity: 1; visibility: visible; transform: translateY(0); }
#hero-panel-new { opacity: 0; visibility: hidden; transform: translateY(6px); }
.hero-panel.is-open #hero-panel-welcome { opacity: 1; visibility: visible; transform: translateY(0); }
.hero-panel.is-open #hero-panel-new { opacity: 1; visibility: visible; transform: translateY(0); }

.hero-panel .hero-panel-text,
.hero-panel .hero-panel-actions { position: relative; }
.hero-panel .hero-panel-text { margin: 0 auto; max-width: min(90%, 400px); text-align: center; }

/* Button row. --login-btn-gap controls how far below the paragraph the
   Member Login button sits. */
.hero-panel .hero-panel-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  width: 100%;
  margin-top: var(--login-btn-gap);
}
.hero-panel .hero-panel-actions .hero-panel-btn { flex: 0 1 auto; min-width: 0; }

.hero-panel:not(.is-open) #hero-panel-back { display: none !important; }
.hero-panel.is-open #hero-panel-login { display: none !important; }
.hero-panel.is-open #hero-panel-back { display: inline-flex !important; }

@media (max-width: 1023px) {
  .hero-panel .hero-panel-text { max-width: 92%; text-align: center; }
}

.hero-panel-label { margin: 0 0 .45rem; color: var(--panel-eyebrow); font-size: .72rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; text-shadow: 0 1px 5px rgba(18, 36, 30, .25); display: flex; align-items: center; justify-content: center; gap: .5rem; }
.hero-panel-label::before { content: ''; width: 8px; height: 8px; flex: 0 0 8px; border-radius: 8px; background: var(--panel-eyebrow); box-shadow: 0 0 0 5px rgba(238, 240, 229, .06); }
.hero-panel-h { margin: 0; font-family: Fraunces, Georgia, serif; font-size: clamp(1.7rem, 3.6vw, 2.35rem); font-weight: 600; line-height: 1.16; letter-spacing: -.01em; color: #fff; }
.hero-panel-h-accent { color: #f2e9cf; font-style: italic; letter-spacing: -.01em; }
html.dark .hero-panel-h-accent { color: #cfe6ad; }
.hero-panel-text { margin: .65rem 0 0; color: rgba(238, 240, 229, .82); font-size: 1rem; font-weight: 400; line-height: 1.55; font-family: Inter, Arial, sans-serif; letter-spacing: .01em; }

/* Panel buttons (Member Login / Back). The big size comes from the
   --login-btn-* variables at the top of this file. */
.hero-panel-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .9rem;
  min-height: var(--login-btn-h);
  padding: 1.1rem var(--login-btn-pad-x);
  border: 1px solid rgba(238, 240, 229, .18);
  border-radius: 999px;
  background: rgba(238, 240, 229, .08);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  color: #fff;
  font: inherit;
  font-size: var(--login-btn-font);
  font-weight: 800;
  letter-spacing: .02em;
  cursor: pointer;
  transition: transform .2s ease, background .2s ease, box-shadow .2s ease, border-color .2s ease, opacity .2s ease;
  width: auto;
  text-align: center;
  box-sizing: border-box;
  pointer-events: auto;
  z-index: 4;
  position: relative;
  box-shadow: 0 16px 38px rgba(0, 0, 0, .38);
  white-space: nowrap;
}
.hero-panel-btn:hover { transform: translateY(-4px) scale(1.04); background: rgba(238, 240, 229, .18); border-color: rgba(238, 240, 229, .35); box-shadow: 0 22px 46px rgba(0, 0, 0, .45); }
.hero-panel-btn:active { transform: translateY(0) scale(1); }
.hero-panel-btn:focus-visible { outline: 3px solid var(--gold); outline-offset: 4px; }
.hero-panel-btn.ghost { border-color: rgba(238, 240, 229, .55); background: transparent; color: rgba(238, 240, 229, .92); }
.hero-panel-btn.ghost:hover { background: rgba(238, 240, 229, .10); border-color: rgba(238, 240, 229, .7); color: #fff; }
.hero-panel-btn.primary { background: #EEF0E5; color: var(--forest-deep); border-color: #EEF0E5; box-shadow: 0 16px 38px rgba(0, 0, 0, .38); }
html.dark .hero-panel-btn.primary { background: var(--cream); border-color: var(--cream); color: var(--forest-deep); box-shadow: 0 16px 38px rgba(0, 0, 0, .4); }
.hero-panel-btn.primary:hover { background: #EEF0E5; color: #0F2116; transform: translateY(-4px) scale(1.04); box-shadow: 0 22px 46px rgba(0, 0, 0, .45); }
.hero-panel-btn-arrow { font-size: 1.6em; line-height: 1; transition: transform .25s ease; }
.hero-panel-btn:hover .hero-panel-btn-arrow { transform: translateX(-4px); }

html.dark .hero-panel-soft { background-image: radial-gradient(ellipse at 50% 38%, rgba(12, 24, 16, .14), rgba(12, 24, 16, 0) 58%), linear-gradient(160deg, rgba(12, 24, 16, .03), rgba(12, 24, 16, 0) 50%); }
html.dark .hero-panel-pane { background: linear-gradient(160deg, rgba(12, 24, 16, .24), rgba(12, 24, 16, 0) 70%), radial-gradient(ellipse at 50% 0%, rgba(255, 255, 255, .05), rgba(12, 24, 16, 0) 60%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), 0 18px 40px rgba(0, 0, 0, .42), 0 1px 0 rgba(255, 255, 255, .02); }
html.dark .hero-panel-text { color: rgba(231, 236, 231, .92); }
html.dark .hero-panel-btn { color: #e6ece7; border-color: rgba(231, 236, 231, .22); background: rgba(231, 236, 231, .07); width: auto; text-align: center; box-sizing: border-box; }
html.dark .hero-panel-btn:hover { background: rgba(231, 236, 231, .16); border-color: rgba(231, 236, 231, .4); }
html.dark .hero-panel-btn.ghost { color: rgba(231, 236, 231, .85); border-color: rgba(231, 236, 231, .45); background: transparent; }
html.dark .hero-panel-btn.ghost:hover { background: rgba(231, 236, 231, .10); color: #fff; }
html.dark .hero-panel-eyebrow-ring { background: radial-gradient(ellipse at 50% 50%, rgba(150, 200, 140, .04), rgba(12, 24, 16, .45) 72%); }
html.dark .hero-panel-label::before { background: #cfe6ad; box-shadow: 0 0 0 5px rgba(150, 200, 140, .06); }
html.dark .hero-panel-brand-mark { background: rgba(12, 24, 16, .34); border-color: rgba(150, 200, 140, .18); }
/* dark-mode primary button must win over the generic dark button colours above */
html.dark .hero-panel-btn.primary { background: var(--cream); border-color: var(--cream); color: var(--forest-deep); }

/* Below 1024px: copy on the left, stage on the right (same pattern as desktop
   but scaled down). The panel covers the form on the right and slides left by its
   own width to reveal the card and cover the copy. Left/right bleed = no photo
   strip beside the panel. */
@media (max-width: 1023px) {
  :root {
    --login-btn-gap: 5rem;
    --login-btn-h: 92px;
    --login-btn-pad-x: 2.2rem;
    --login-btn-font: clamp(1.4rem, 3.4vw, 2rem);
  }
  .hero-inner { width: 100%; }
  .hero-split { gap: 0; --hero-gap: 0; }
  .hero-split > * { grid-area: 1 / 1; }
  .hero-copy { justify-self: start; margin-left: 4%; max-width: min(340px, calc(42% - 12px)); }
  .hero-stage { align-self: stretch; min-height: clamp(360px, calc(100vh - 180px), 480px); }
  .hero-signin { position: absolute; inset: 0 0 0 56%; width: auto; align-content: center; }
  .hero-panel { --slant: 4%; --edge: 50%; }
  /* open state comes from the base clip-path rule: no translate needed */
}
@media (max-width: 700px) {
  :root {
    --login-btn-gap: 3.5rem;
    --login-btn-h: 84px;
    --login-btn-pad-x: 1.8rem;
    --login-btn-font: 1.5rem;
  }
  .hero-split { grid-template-columns: 1fr; grid-template-rows: auto auto; }
  .hero-split > * { grid-area: unset; }
  .hero-copy { margin-left: 0; max-width: 100%; justify-self: stretch; padding: 1rem 1.25rem; }
  .hero-stage { min-height: 420px; position: relative; }
  .hero-signin { position: absolute; inset: 0; width: 100%; padding: 1.5rem 1.25rem; align-content: center; }
  .hero-panel { top: 0; bottom: 0; left: 0; right: 0; --slant: 8%; clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--slant)), 0 100%); transform: none; transition: transform 0.7s cubic-bezier(.65, 0, .35, 1), clip-path 0.7s cubic-bezier(.65, 0, .35, 1); }
  .hero-panel.is-open { transform: translateY(-100%); clip-path: polygon(0 var(--slant), 100% 0, 100% 100%, 0 calc(100% - var(--slant))); }
  .hero-panel-pane { justify-self: center; margin-left: 0; margin-right: 0; margin-top: -2rem; translate: none; width: min(100% - 3.5rem, 440px); }
  .hero-panel.is-open .hero-panel-pane { margin-left: 0; margin-right: 0; margin-top: -4rem; }
  @media (prefers-reduced-motion: reduce) {
    .hero-panel, .hero-panel.is-open { transition: none !important; }
    .hero-panel-pane { transition: none !important; }
  }
}
/* Desktop: full-height parallelogram panel on the right, sliding left. The
   panel extends beyond the viewport edges so neither edge is ever a flat
   vertical side. Closed: left edge at 52% top / 46% bottom. Open: slides left
   so the right edge lands at 52% top / 46% bottom, revealing the copy. */
@media (min-width: 1024px) {
  .hero-split { gap: 0; --hero-gap: 3.5rem; }
  .hero-split > * { grid-area: 1 / 1; }
  .hero-copy { justify-self: start; margin-left: 4%; max-width: min(520px, calc(44% - 40px)); }
  .hero-stage { align-self: stretch; min-height: clamp(460px, calc(100vh - 230px), 600px); }
  .hero-signin { position: absolute; inset: 0 0 0 52%; width: auto; align-content: center; }
  .hero-panel { --slant: 4%; --edge: 50%; }
  /* open state comes from the base clip-path rule: no translate needed */
}

/* Content is only hidden once the page script has registered its scroll
   observer (the `reveal-ready` class is added in index.html at that moment),
   so a failed or blocked script can never strand the page blank. */
.reveal-ready .reveal { opacity: 0; transform: translateY(18px); transition: opacity .65s ease, transform .65s cubic-bezier(.2, .75, .25, 1); }
.reveal-ready .reveal.is-visible { opacity: 1; transform: translateY(0); }
.stagger > .reveal:nth-child(2) { transition-delay: .08s; }
.stagger > .reveal:nth-child(3) { transition-delay: .16s; }
.stagger > .reveal:nth-child(4) { transition-delay: .24s; }
.stagger > .reveal:nth-child(5) { transition-delay: .32s; }
.stagger > .reveal:nth-child(6) { transition-delay: .4s; }
.stat-item + .stat-item { border-left: 1px solid rgba(255, 255, 255, .2); }
.feature-card { border: 1px solid #CBD5CB; border-radius: 8px; background: #EEF0E5; box-shadow: 0 4px 14px rgba(22, 48, 32, .045); transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease; }
.feature-card:hover { transform: translateY(-4px); border-color: rgba(22, 48, 32, .3); box-shadow: 0 14px 26px rgba(22, 48, 32, .09); }
.feature-card:hover .icon-box { background: #B6C4B6; color: var(--forest-deep); }
.icon-box { display: grid; width: 48px; height: 48px; place-items: center; border: 1px solid #CBD5CB; border-radius: 8px; background: #edefdd; color: var(--forest); transition: background .25s ease, color .25s ease; }
.step-line { position: absolute; top: 21px; left: calc(16.6667% + 25px); width: calc(66.6667% - 50px); border-top: 1px dashed rgba(22, 48, 32, .32); }
.quote-mark { color: var(--gold); font-family: Georgia, serif; font-size: 3rem; line-height: .7; }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-item summary { display: flex; cursor: pointer; list-style: none; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.2rem 0; font-weight: 600; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary:after { width: 24px; height: 24px; flex: 0 0 24px; border-radius: 50%; background: #edefdd; color: var(--forest); content: '+'; text-align: center; line-height: 24px; transition: transform .2s ease; }
.faq-item[open] summary:after { transform: rotate(45deg); }
.faq-item p { max-width: 680px; padding: 0 2rem 1.25rem 0; color: #163020; font-size: .92rem; line-height: 1.75; }
.footer-link { color: rgba(255, 255, 255, .72); transition: color .2s ease; }
.footer-link:hover { color: white; }
.mobile-menu { display: none; }
.staff-dialog, .loan-dialog { width: min(calc(100% - 2rem), 420px); margin: auto; border: 1px solid #CBD5CB; border-radius: 10px; padding: 0; background: #EEF0E5; color: var(--ink); box-shadow: 0 24px 80px rgba(22, 48, 32, .28); }
.staff-dialog::backdrop, .loan-dialog::backdrop { background: rgba(12, 28, 18, .62); backdrop-filter: blur(3px); }
.dialog-content { padding: 1.5rem; }
.dialog-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
.dialog-close { display: grid; width: 40px; height: 40px; flex: 0 0 40px; place-items: center; border: 1px solid var(--line); border-radius: 6px; background: #EEF0E5; color: var(--forest); cursor: pointer; }
.password-control { position: relative; }
.staff-field .password-control input, .password-control input { width: 100%; padding-right: 4.4rem; }
.password-toggle { position: absolute; right: .5rem; top: 50%; transform: translateY(-50%); border: 0; background: transparent; padding: .3rem .45rem; color: #163020; font-size: .72rem; font-weight: 700; cursor: pointer; }
.password-toggle:hover { text-decoration: underline; }
.staff-field { display: grid; gap: .45rem; margin-top: 1rem; }
.staff-field label { color: #4e5a50; font-size: .82rem; font-weight: 600; }
.staff-field input { width: 100%; min-height: 46px; border: 1px solid #CBD5CB; border-radius: 6px; padding: .7rem .8rem; color: var(--ink); font: inherit; }
.staff-field input:focus { border-color: var(--forest); outline: 3px solid rgba(22, 48, 32, .14); }
.staff-password-control { position: relative; }
.staff-password-control input { padding-right: 5rem; }
.staff-password-toggle { position: absolute; top: 50%; right: .75rem; transform: translateY(-50%); border: 0; background: none; color: var(--forest); font-size: .78rem; font-weight: 700; cursor: pointer; }
.staff-notice { border-radius: 6px; background: #edefdd; padding: .75rem; color: var(--forest-deep); font-size: .82rem; line-height: 1.5; }

/* --- Member assistant --- */
.chat-launcher { position: fixed; right: 1.25rem; bottom: 1.25rem; z-index: 45; display: grid; width: 56px; height: 56px; place-items: center; border: 0; border-radius: 999px; background: var(--forest); color: #fff; box-shadow: 0 8px 24px rgba(22, 48, 32, .26), 0 0 0 1px rgba(22, 48, 32, .08); cursor: pointer; transition: transform .2s ease, background .2s ease, box-shadow .2s ease; }
.chat-launcher:hover { transform: translateY(-2px); background: var(--forest-deep); box-shadow: 0 12px 28px rgba(22, 48, 32, .34); }
.chat-panel { position: fixed; right: 1.25rem; bottom: 5.75rem; z-index: 45; display: flex; width: min(calc(100vw - 2.5rem), 400px); max-height: min(74vh, 600px); flex-direction: column; border: 1px solid var(--border-card); border-radius: 14px; background: var(--bg-card); box-shadow: 0 24px 60px rgba(22, 48, 32, .2), 0 2px 8px rgba(22, 48, 32, .07); overflow: hidden; transform-origin: bottom right; animation: chat-rise .22s cubic-bezier(.2, .75, .25, 1); }
.chat-panel[hidden] { display: none; }
@keyframes chat-rise { from { opacity: 0; transform: translateY(10px) scale(.98); } to { opacity: 1; transform: none; } }
/* Light header so the emblem (green and gold) stays legible. */
.chat-head { display: flex; align-items: center; gap: .7rem; border-bottom: 1px solid var(--line); background: var(--bg-card); padding: .8rem 1rem; }
.chat-avatar { display: grid; width: 36px; height: 36px; flex: none; place-items: center; border: 1px solid var(--border-card); border-radius: 10px; background: #EEF0E5; }
.chat-avatar img { display: block; width: 26px; height: auto; }
.chat-head-title { display: flex; align-items: center; gap: .45rem; color: var(--ink); font-size: .9rem; font-weight: 700; }
.chat-online { width: 7px; height: 7px; flex: none; border-radius: 999px; background: #3ea86a; box-shadow: 0 0 0 3px rgba(62, 168, 106, .16); }
.chat-head-sub { margin-top: .08rem; color: #163020; font-size: .71rem; }
.chat-close { display: grid; width: 30px; height: 30px; flex: none; place-items: center; border: 1px solid transparent; border-radius: 8px; background: transparent; color: #163020; font-size: 1.15rem; line-height: 1; cursor: pointer; transition: background .2s ease, color .2s ease; }
.chat-close:hover { background: var(--bg-band); color: var(--forest); }
.chat-log { display: grid; flex: 1 1 auto; align-content: start; gap: .6rem; overflow-y: auto; padding: 1rem 1rem .5rem; scrollbar-width: thin; scrollbar-color: rgba(22, 48, 32, .22) transparent; }
.chat-log::-webkit-scrollbar { width: 5px; }
.chat-log::-webkit-scrollbar-thumb { border-radius: 999px; background: rgba(22, 48, 32, .2); }
.chat-msg { max-width: 86%; border-radius: 12px; padding: .62rem .8rem; font-size: .86rem; line-height: 1.62; overflow-wrap: anywhere; }
.chat-msg.bot { justify-self: start; border: 1px solid var(--border-card); border-bottom-left-radius: 4px; background: var(--bg-band); color: var(--ink); }
.chat-msg.user { justify-self: end; border-bottom-right-radius: 4px; background: var(--forest); color: #fff; }
.chat-msg strong { font-weight: 700; }
.chat-msg a { font-weight: 700; text-decoration: underline; text-underline-offset: 2px; }
.chat-typing { justify-self: start; display: flex; gap: .28rem; border: 1px solid var(--border-card); border-radius: 12px; border-bottom-left-radius: 4px; background: var(--bg-band); padding: .75rem .85rem; }
.chat-typing span { width: 6px; height: 6px; border-radius: 999px; background: var(--text-muted); animation: chat-blink 1.2s infinite; }
.chat-typing span:nth-child(2) { animation-delay: .2s; }
.chat-typing span:nth-child(3) { animation-delay: .4s; }
@keyframes chat-blink { 0%, 60%, 100% { opacity: .25; } 30% { opacity: 1; } }
.chat-chips { display: flex; flex-wrap: wrap; gap: .4rem; padding: .2rem 1rem .75rem; }
.chat-chips:empty { display: none; }
.chat-chip { border: 1px solid var(--line); border-radius: 999px; background: var(--bg-band); padding: .4rem .7rem; color: var(--forest); font-size: .75rem; font-weight: 600; cursor: pointer; transition: background .2s ease, border-color .2s ease; }
.chat-chip:hover { border-color: rgba(22, 48, 32, .28); background: #edefdd; }
/* Self-service recovery link under the forgot-credentials answer. */
.chat-cta-wrap { justify-self: start; display: grid; gap: .3rem; max-width: 86%; padding: 0 1rem .5rem; }
.chat-cta { justify-self: start; border-radius: 999px; background: var(--forest); color: #fff; padding: .45rem .8rem; font-size: .78rem; font-weight: 700; text-decoration: none; }
.chat-cta:hover { background: var(--forest-deep); }
.chat-cta-note { margin: 0; color: #163020; font-size: .7rem; line-height: 1.5; }
.chat-form { display: flex; gap: .5rem; border-top: 1px solid var(--line); background: var(--bg-card); padding: .7rem 1rem .8rem; }
.chat-form input { flex: 1; min-width: 0; min-height: 42px; border: 1px solid var(--border-card); border-radius: 9px; background: var(--bg-page); padding: .55rem .75rem; color: var(--ink); font: inherit; font-size: .88rem; }
.chat-form input::placeholder { color: #163020; }
.chat-form input:focus { border-color: var(--forest); outline: 3px solid rgba(22, 48, 32, .13); }
.chat-send { display: grid; width: 42px; height: 42px; flex: none; place-items: center; border: 0; border-radius: 9px; background: var(--forest); color: #fff; cursor: pointer; transition: background .2s ease; }
.chat-send:hover { background: var(--forest-deep); }
html.dark .chat-avatar { background: var(--bg-band); }
html.dark .chat-chip:hover { background: rgba(74, 222, 128, .12); }
html.dark .chat-cta { color: #0d1a12; }
html.dark .chat-cta:hover { background: #6ee7a0; }
html.dark .chat-launcher { box-shadow: 0 8px 24px rgba(0, 0, 0, .5), 0 0 0 1px rgba(74, 222, 128, .18); }
html.dark .chat-panel { box-shadow: 0 24px 60px rgba(0, 0, 0, .62); }
html.dark .chat-form input:focus { outline-color: rgba(74, 222, 128, .2); }
@media (prefers-reduced-motion: reduce) { .chat-panel { animation: none; } }
@media (max-width: 767px) { .chat-panel { right: 1rem; bottom: 5.5rem; width: calc(100vw - 2rem); max-height: min(72vh, 520px); } .chat-launcher { right: 1rem; bottom: 1rem; } }
.loan-welcome { width: fit-content; margin: 0 auto 1rem; border: 1px solid rgba(22, 48, 32, .14); border-radius: 6px; background: #B6C4B6; padding: .5rem .75rem; color: var(--forest-deep); font-size: .84rem; font-weight: 600; }
@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
@keyframes orbit { to { transform: rotate(360deg); } }
@keyframes hero-enter { from { opacity: 0; transform: translateY(12px) scale(.985); } to { opacity: 1; transform: translateY(0) scale(1); } }
@media (prefers-reduced-motion: reduce) {
  *, *:before, *:after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .reveal-ready .reveal { opacity: 1; transform: none; }
}
@media (max-width: 767px) {
  .section-wrap { width: min(100% - 2rem, 1160px); }
  .site-header .desktop-nav { display: none; }
  .mobile-menu { position: absolute; top: calc(100% + .55rem); right: 0; left: 0; border: 1px solid var(--line); border-radius: 24px; background: var(--bg-header); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); padding: .6rem; box-shadow: 0 18px 36px rgba(22, 48, 32, .16); }
  .mobile-menu[data-open="true"] { display: grid; gap: .2rem; }
  .mobile-menu a:not(.button-primary) { padding: .7rem .5rem; }
  .stat-item + .stat-item { border-left: 0; }
  .stat-item:nth-child(even) { border-left: 1px solid rgba(255, 255, 255, .2); }
  .step-line { display: none; }
}

/* =====================================================================
   MEMBER LOGIN — MEDIUM BIG
   Kept at the very end of the file with high specificity + !important so
   it beats any Tailwind classes or older rules on the button in the HTML.
   (index.html carries a matching inline copy of this block.)
   ===================================================================== */
html body .hero-panel .hero-panel-pane {
  width: min(100% - 3.5rem, 640px, 47vw) !important;
}
html body .hero-panel .hero-panel-actions {
  margin-top: clamp(3rem, 6vw, 6rem) !important;
}
html body .hero-panel #hero-panel-login,
html body .hero-panel #hero-panel-back {
  height: auto !important;
  min-height: clamp(72px, 5.4vw, 96px) !important;
  padding: .8rem clamp(1.8rem, 3vw, 3.5rem) !important;
  font-size: clamp(1.15rem, 1.9vw, 1.75rem) !important;
  font-weight: 800 !important;
  line-height: 1.1 !important;
  gap: .8rem !important;
  white-space: nowrap !important;
  border-radius: 999px !important;
  box-shadow: 0 14px 34px rgba(0, 0, 0, .4) !important;
}
html body .hero-panel #hero-panel-login span,
html body .hero-panel #hero-panel-back span {
  font-size: inherit !important;
}
html body .hero-panel #hero-panel-login:hover,
html body .hero-panel #hero-panel-back:hover {
  transform: translateY(-3px) scale(1.03) !important;
}
@media (max-width: 700px) {
  html body .hero-panel .hero-panel-actions { margin-top: 2.5rem !important; }
  html body .hero-panel #hero-panel-login,
  html body .hero-panel #hero-panel-back {
    min-height: 66px !important;
    padding: .7rem clamp(1.3rem, 5vw, 2rem) !important;
    font-size: clamp(1.1rem, 4.6vw, 1.4rem) !important;
  }
}