/* =========================================================
   THE WILD 899 design system
   Fonts: Butcherman (display), Playfair Display (prose), Space Mono (UI)
   Self-hosted so the site does not depend on a third-party font CDN.
   ========================================================= */

/* ---------- 0. FONTS ---------- */
@font-face{
  font-family:'Butcherman'; font-style:normal; font-weight:400; font-display:swap;
  src:url('fonts/butcherman-400.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,
                U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Playfair Display'; font-style:normal; font-weight:400; font-display:swap;
  src:url('fonts/playfair-400.woff2') format('woff2');
}
@font-face{
  font-family:'Playfair Display'; font-style:normal; font-weight:700; font-display:swap;
  src:url('fonts/playfair-700.woff2') format('woff2');
}
@font-face{
  font-family:'Space Mono'; font-style:normal; font-weight:400; font-display:swap;
  src:url('fonts/spacemono-400.woff2') format('woff2');
}
@font-face{
  font-family:'Space Mono'; font-style:normal; font-weight:700; font-display:swap;
  src:url('fonts/spacemono-700.woff2') format('woff2');
}

/* ---------- 1. TOKENS ---------- */
:root{
  /* colour */
  --ink:        #070b09;
  --ink-2:      #0b110e;
  --forest:     #0b3126;   /* brand green, taken from the logo mark */
  --accent:     #10b981;
  --accent-hi:  #4fe0ae;
  --accent-dim: #0a6b50;

  --bone:       #ece8de;
  --bone-70:    rgba(236,232,222,.72);
  --bone-55:    rgba(236,232,222,.56);
  --bone-40:    rgba(236,232,222,.40);

  --rule:       rgba(236,232,222,.11);
  --rule-soft:  rgba(236,232,222,.06);
  --panel:      rgba(7,11,9,.58);

  /* type */
  --f-display: 'Butcherman', 'Playfair Display', serif;
  --f-prose:   'Playfair Display', Georgia, 'Times New Roman', serif;
  --f-ui:      'Space Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  --t-hero:   clamp(2.6rem, 10.5vw, 5.75rem);
  --t-title:  clamp(2.1rem, 7.5vw, 4rem);
  --t-h2:     clamp(1.5rem, 4.4vw, 2.25rem);
  --t-h3:     clamp(1.1rem, 3.1vw, 1.3rem);
  --t-lede:   clamp(1.0625rem, 1rem + .55vw, 1.375rem);
  --t-body:   clamp(1rem, .96rem + .22vw, 1.125rem);
  --t-small:  .875rem;
  --t-label:  .6875rem;

  --lh-tight: 1.08;
  --lh-snug:  1.32;
  --lh-body:  1.72;

  /* layout */
  --nav-h: 64px;
  --gutter: clamp(1.25rem, 5vw, 3rem);
  --maxw: 1180px;
  --measure: 66ch;
  --section-y: clamp(4rem, 11vw, 7.5rem);

  --r-sm: 3px;
  --r-md: 6px;

  --ease: cubic-bezier(.22,1,.36,1);
  --dur: .34s;
}

/* ---------- 2. RESET ---------- */
*,*::before,*::after{ box-sizing:border-box; }
*{ margin:0; padding:0; }

html{
  background: var(--ink);
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-h) + 16px);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body{
  min-height:100vh;
  min-height:100dvh;
  background: transparent;
  color: var(--bone);
  font-family: var(--f-prose);
  font-size: var(--t-body);
  line-height: var(--lh-body);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-tap-highlight-color: transparent;
  display:flex;
  flex-direction:column;
}

img,svg{ display:block; max-width:100%; height:auto; }
button{ font:inherit; color:inherit; background:none; border:none; cursor:pointer; }
a{ color:inherit; text-decoration:none; }
ul{ list-style:none; }

::selection{ background: var(--accent); color: var(--ink); }

:focus-visible{
  outline: 2px solid var(--accent-hi);
  outline-offset: 3px;
  border-radius: 2px;
}

.skip{
  position:absolute; left:50%; top:-100px; transform:translateX(-50%);
  z-index:900; padding:12px 20px; background:var(--accent); color:var(--ink);
  font-family:var(--f-ui); font-size:var(--t-label); letter-spacing:.14em; text-transform:uppercase;
}
.skip:focus{ top:12px; }

.visually-hidden{
  position:absolute!important; width:1px; height:1px; overflow:hidden;
  clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap;
}

/* ---------- 3. BACKDROP ---------- */
.bgLayer,.bgScrim{ position:fixed; inset:0; z-index:-1; pointer-events:none; }

.bgLayer{
  background-image:url('jungle-tiny.jpg');
  background-size:cover;
  background-position:center;
  transform: scale(1.04);
}
.bgLayer.ready{ background-image:url('jungle-900.jpg'); }
@media (min-width:820px){
  .bgLayer.ready{ background-image:url('jungle.jpg'); }
}

.bgScrim{
  background:
    radial-gradient(120% 80% at 50% -10%, rgba(16,185,129,.10), transparent 55%),
    linear-gradient(180deg, rgba(7,11,9,.46) 0%, rgba(7,11,9,.68) 45%, rgba(7,11,9,.88) 100%);
}
/* text-heavy pages: push the photo further back for readability */
body[data-page="reading"] .bgScrim{
  background:
    radial-gradient(120% 70% at 50% -10%, rgba(16,185,129,.08), transparent 55%),
    linear-gradient(180deg, rgba(7,11,9,.86) 0%, rgba(7,11,9,.90) 50%, rgba(7,11,9,.94) 100%);
}

/* ---------- 4. TYPE PRIMITIVES ---------- */
.eyebrow{
  font-family:var(--f-ui);
  font-size:var(--t-label);
  font-weight:700;
  letter-spacing:.24em;
  text-transform:uppercase;
  color:var(--accent);
  line-height:1.6;
  text-wrap:balance;
}

/* Butcherman is reserved for short, iconic strings only:
   the wordmark, the hero, and one or two word page titles. */
.display{
  font-family:var(--f-display);
  font-weight:400;
  line-height:var(--lh-tight);
  letter-spacing:.02em;
  color:var(--bone);
  text-wrap:balance;
}
h1.display{ font-size:var(--t-hero); }
h2.display{ font-size:var(--t-title); }

/* Everything longer than a couple of words uses the serif. */
.head{
  font-family:var(--f-prose);
  font-weight:700;
  line-height:1.18;
  letter-spacing:-.005em;
  color:var(--bone);
  text-wrap:balance;
}
h1.head{ font-size:clamp(2rem,6.2vw,3.25rem); }
h2.head{ font-size:var(--t-h2); }

.lede{
  font-size:var(--t-lede);
  line-height:1.66;
  color:var(--bone-70);
  max-width:58ch;
  margin-inline:auto;
  text-wrap:pretty;
}

/* hero lede: one sentence per line, stacked straight down.
   Sized so each sentence holds a single line on tablet and up. */
.lede--stack{
  max-width:76ch;
  display:flex; flex-direction:column;
  gap:.5em;
  font-size:clamp(1rem, .9rem + .52vw, 1.25rem);
  line-height:1.5;
}
.lede--stack p{ margin:0; text-wrap:balance; }

.rule{ height:1px; background:var(--rule); border:0; }
.rule--short{ width:56px; margin:clamp(2rem,5vw,3rem) auto; background:var(--accent-dim); }

/* ---------- 5. LAYOUT ---------- */
.wrap{
  width:100%;
  max-width:var(--maxw);
  margin-inline:auto;
  padding-inline: max(var(--gutter), env(safe-area-inset-left));
  padding-inline-end: max(var(--gutter), env(safe-area-inset-right));
}
.wrap--narrow{ max-width:820px; }

main{ flex:1 0 auto; }

.section{ padding-block: var(--section-y); }
.section__head{ text-align:center; margin-bottom: clamp(2.5rem,6vw,4rem); }
.section__head .eyebrow{ margin-bottom:1rem; }
.section__head p{ margin-top:1.25rem; }

/* ---------- 6. BUTTONS ---------- */
.btn{
  --btn-bg: transparent;
  --btn-fg: var(--bone);
  --btn-bd: rgba(236,232,222,.28);
  position:relative;
  display:inline-flex; align-items:center; justify-content:center; gap:.6em;
  min-height:54px;
  padding:0 clamp(1.5rem,4vw,2.25rem);
  font-family:var(--f-ui); font-weight:700;
  font-size:.75rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--btn-fg);
  background:var(--btn-bg);
  border:1px solid var(--btn-bd);
  border-radius:var(--r-sm);
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease),
              border-color var(--dur) var(--ease), transform .18s var(--ease),
              box-shadow var(--dur) var(--ease);
  will-change: transform;
}
.btn:hover{ transform:translateY(-2px); }
.btn:active{ transform:translateY(0); transition-duration:.06s; }

/* primary: solid accent */



/* secondary: outline */



.btn--sm{ min-height:44px; font-size:.6875rem; padding-inline:1.25rem; }

.btnRow{
  display:flex; flex-wrap:wrap; gap:.875rem;
  justify-content:center; align-items:center;
}

/* ---------- 7. HEADER / NAV ---------- */
.siteHeader{
  position:sticky; top:0; z-index:120;
  background: rgba(7,11,9,.72);
  backdrop-filter: blur(14px) saturate(1.3);
  -webkit-backdrop-filter: blur(14px) saturate(1.3);
  border-bottom:1px solid var(--rule-soft);
  padding-top: env(safe-area-inset-top);
}
.navBar{
  height:var(--nav-h);
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
}

.brand{ display:flex; align-items:center; gap:.7rem; min-width:0; min-height:44px; }
/* the mark's disc is near black, so a hairline ring keeps its edge
   readable against the dark page */
.brand img{ width:34px; height:34px; flex:none; border-radius:50%;
  box-shadow:0 0 0 1px rgba(236,232,222,.16); }
.brand span{
  font-family:var(--f-display);
  font-size:1.0625rem; letter-spacing:.03em; line-height:1;
  color:var(--bone); white-space:nowrap;
  transition:color var(--dur) var(--ease);
}
.brand:hover span{ color:var(--accent-hi); }

.navLinks{ display:flex; align-items:center; gap:clamp(1.25rem,3vw,2.25rem); }
.navLinks a{
  position:relative;
  display:inline-flex; align-items:center;
  min-height:44px;
  font-family:var(--f-ui); font-size:var(--t-label); font-weight:700;
  letter-spacing:.2em; text-transform:uppercase;
  color:var(--bone-55);
  padding:.75rem 0;
  transition:color var(--dur) var(--ease);
}
.navLinks a::after{
  content:''; position:absolute; left:0; right:0; bottom:.55rem; height:1px;
  background:var(--accent); transform:scaleX(0); transform-origin:right;
  transition:transform var(--dur) var(--ease);
}
.navLinks a:hover{ color:var(--bone); }
.navLinks a:hover::after{ transform:scaleX(1); transform-origin:left; }
.navLinks a[aria-current="page"]{ color:var(--accent); }
.navLinks a[aria-current="page"]::after{ transform:scaleX(1); }

.navCta{ display:none; }

/* hamburger */
.navToggle{
  display:none;
  width:44px; height:44px; margin-right:-10px;
  align-items:center; justify-content:center;
  flex-direction:column; gap:5px;
}
.navToggle i{
  display:block; width:22px; height:1.5px; background:var(--bone); border-radius:2px;
  transition:transform .32s var(--ease), opacity .2s linear;
}
.navToggle[aria-expanded="true"] i:nth-child(1){ transform:translateY(6.5px) rotate(45deg); }
.navToggle[aria-expanded="true"] i:nth-child(2){ opacity:0; transform:scaleX(.3); }
.navToggle[aria-expanded="true"] i:nth-child(3){ transform:translateY(-6.5px) rotate(-45deg); }

/* ---------- 8. HERO ---------- */
.hero{
  position:relative;
  min-height: calc(100vh - var(--nav-h));
  min-height: calc(100dvh - var(--nav-h));
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center;
  padding-block: clamp(3.5rem,9vh,6rem) clamp(5rem,11vh,7rem);
}
.hero__inner{ display:flex; flex-direction:column; align-items:center; gap:clamp(1.25rem,3.2vw,1.75rem); }
.hero .eyebrow{ margin-bottom:-.25rem; }
.hero h1{ text-shadow:0 6px 40px rgba(0,0,0,.55); }

/* stat strip */
.stats{
  display:grid; grid-template-columns:repeat(3,1fr);
  width:100%; max-width:640px;
  margin-top:.5rem;
  border:1px solid var(--rule);
  border-radius:var(--r-md);
  background:var(--panel);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  overflow:hidden;
}
.stats div{
  padding: clamp(.9rem,3vw,1.35rem) .5rem;
  display:flex; flex-direction:column; align-items:center; gap:.35rem;
  min-width:0;
}
.stats div + div{ border-left:1px solid var(--rule); }
.stats dt{
  font-family:var(--f-ui); font-size:.625rem; font-weight:700;
  letter-spacing:.2em; text-transform:uppercase; color:var(--bone-40);
  line-height:1;
}
.stats dd{
  font-family:var(--f-prose); font-weight:700;
  font-size:clamp(1.0625rem,4.2vw,1.625rem);
  line-height:1.15; color:var(--bone);
  overflow-wrap:anywhere;
}

.hero .btnRow{ margin-top:.75rem; }

.scrollHint{
  position:absolute; left:50%; bottom:clamp(1.25rem,3.5vh,2rem); transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap:.6rem;
  font-family:var(--f-ui); font-size:.625rem; font-weight:700;
  letter-spacing:.22em; text-transform:uppercase; color:var(--bone-40);
  white-space:nowrap;
}
.scrollHint i{
  display:block; width:1px; height:26px;
  background:linear-gradient(180deg,var(--accent),transparent);
  animation:beam 2.4s var(--ease) infinite;
}
@keyframes beam{ 0%,100%{ transform:scaleY(.4); opacity:.4 } 50%{ transform:scaleY(1); opacity:1 } }

/* ---------- 9. PROSE / LORE ---------- */
.prose{ max-width:var(--measure); margin-inline:auto; }
.prose p{ margin-bottom:1.6em; color:var(--bone-70); text-wrap:pretty; }
.prose p:last-child{ margin-bottom:0; }
.prose strong{ color:var(--bone); font-weight:700; }

.prose--lore > p:first-of-type::first-letter{
  float:left;
  font-family:var(--f-prose); font-weight:700;
  font-size:3.4em; line-height:.78;
  padding:.08em .12em 0 0;
  color:var(--accent);
}

.pullquote{
  margin: clamp(2.5rem,6vw,3.5rem) auto;
  padding: clamp(1.5rem,4vw,2rem) clamp(1.25rem,4vw,2.5rem);
  border-left:2px solid var(--accent);
  background:linear-gradient(90deg, rgba(16,185,129,.09), transparent 70%);
  text-align:left;
}
.pullquote p{
  font-size:clamp(1.125rem,3.4vw,1.5rem);
  line-height:1.45; color:var(--bone); margin:0;
}
.pullquote p + p{ margin-top:.5rem; color:var(--accent-hi); }

/* ---------- 10. CARDS ---------- */
.cards{
  display:grid; gap:clamp(1rem,2.5vw,1.5rem);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr));
}
.card{
  position:relative;
  padding:clamp(1.5rem,4vw,2rem);
  border:1px solid var(--rule);
  border-radius:var(--r-md);
  background:var(--panel);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  text-align:left;
  transition:border-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.card:hover{ border-color:rgba(16,185,129,.4); transform:translateY(-3px); }
.card__num{
  font-family:var(--f-ui); font-size:.6875rem; font-weight:700;
  letter-spacing:.2em; color:var(--accent); margin-bottom:1rem; display:block;
}
.card h3{
  font-family:var(--f-prose); font-size:var(--t-h3); font-weight:700;
  line-height:var(--lh-snug); margin-bottom:.6rem; color:var(--bone);
}
.card p{ font-size:var(--t-small); line-height:1.7; color:var(--bone-55); }

/* ---------- 11. FAQ ---------- */
.faq{ max-width:820px; margin-inline:auto; border-top:1px solid var(--rule); }
.faqItem{ border-bottom:1px solid var(--rule); }
.faqBtn{
  width:100%; display:flex; align-items:flex-start; justify-content:space-between; gap:1.25rem;
  padding:clamp(1.15rem,3.5vw,1.5rem) 0;
  text-align:left;
  font-family:var(--f-prose); font-weight:700;
  font-size:clamp(1.0625rem,2.9vw,1.3125rem);
  line-height:var(--lh-snug);
  color:var(--bone);
  transition:color var(--dur) var(--ease);
}
.faqBtn:hover{ color:var(--accent-hi); }
/* plus that rotates into a minus */
.faqIcon{ flex:none; position:relative; width:16px; height:16px; margin-top:.42em; }
.faqIcon::before,.faqIcon::after{
  content:''; position:absolute; left:50%; top:50%;
  width:16px; height:1.5px; background:var(--accent);
  transform:translate(-50%,-50%);
  transition:transform var(--dur) var(--ease);
}
.faqIcon::after{ transform:translate(-50%,-50%) rotate(90deg); }
.faqBtn[aria-expanded="true"] .faqIcon::after{ transform:translate(-50%,-50%) rotate(0deg); }

.faqPanel{
  display:grid; grid-template-rows:0fr;
  transition:grid-template-rows var(--dur) var(--ease);
}
.faqPanel > div{ overflow:hidden; }
/* JS keeps .open in sync with aria-expanded */
.faqItem.open .faqPanel{ grid-template-rows:1fr; }
/* separate rule on purpose: an unsupported :has() must not invalidate the one above */
.faqItem:has(.faqBtn[aria-expanded="true"]) .faqPanel{ grid-template-rows:1fr; }
.faqPanel p{
  font-size:var(--t-small); line-height:1.75; color:var(--bone-55);
  max-width:60ch; padding-right:2rem;
}
.faqPanel p:first-child{ padding-top:.15rem; }
.faqPanel p:last-child{ padding-bottom:clamp(1.15rem,3.5vw,1.5rem); }
.faqPanel p + p{ margin-top:.9em; }

/* ---------- 12. CTA BAND ---------- */
.band{
  text-align:center;
  padding:clamp(2.5rem,7vw,4rem) clamp(1.25rem,5vw,3rem);
  border:1px solid var(--rule);
  border-radius:var(--r-md);
  background:
    radial-gradient(90% 130% at 50% 0%, rgba(16,185,129,.12), transparent 60%),
    var(--panel);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
}
.band h2{ margin-bottom:1rem; }
.band p{ margin-inline:auto; margin-bottom:2rem; }

/* ---------- 13. LEGAL ---------- */
.legal{ max-width:760px; margin-inline:auto; text-align:left; }
.legal .updated{
  font-family:var(--f-ui); font-size:var(--t-label); letter-spacing:.16em;
  text-transform:uppercase; color:var(--bone-40); margin-bottom:clamp(2rem,5vw,3rem);
}
.legal h2{
  font-family:var(--f-ui); font-weight:700;
  font-size:.8125rem; letter-spacing:.18em; text-transform:uppercase;
  color:var(--accent);
  margin:clamp(2.5rem,6vw,3.5rem) 0 1rem;
  padding-top:clamp(2rem,5vw,2.5rem);
  border-top:1px solid var(--rule);
}
.legal h2:first-of-type{ border-top:0; padding-top:0; margin-top:0; }
.legal p{ font-size:var(--t-body); line-height:var(--lh-body); color:var(--bone-70); margin-bottom:1.25em; }
.legal ul{ margin:0 0 1.5em; padding-left:1.1em; }
.legal li{
  position:relative; font-size:var(--t-body); line-height:var(--lh-body);
  color:var(--bone-70); margin-bottom:.7em; list-style:none;
}
.legal li::before{
  content:''; position:absolute; left:-1.1em; top:.75em;
  width:5px; height:5px; border-radius:50%; background:var(--accent-dim);
}
.legal strong{ color:var(--bone); }

/* ---------- 14. FOOTER ---------- */
.siteFooter{
  flex:none;
  margin-top:0;
  border-top:1px solid var(--rule);
  background:linear-gradient(180deg, rgba(7,11,9,.86), rgba(7,11,9,.97));
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  padding-block:clamp(2.75rem,7vw,4rem) clamp(1.5rem,4vw,2rem);
  padding-bottom:max(clamp(1.5rem,4vw,2rem), env(safe-area-inset-bottom));
  text-align:left;
}
.footerGrid{
  display:grid; gap:clamp(2rem,5vw,3rem);
  grid-template-columns:minmax(0,1.4fr) repeat(2,minmax(0,1fr));
}
.footerBrand .brand{ margin-bottom:1rem; }
.footerBrand .brand img{ width:40px; height:40px; }
.footerBrand .brand span{ font-size:1.25rem; }
.footerBrand p{ font-size:var(--t-small); line-height:1.7; color:var(--bone-55); max-width:34ch; }

.footerCol h4{
  font-family:var(--f-ui); font-size:.625rem; font-weight:700;
  letter-spacing:.2em; text-transform:uppercase; color:var(--bone-40);
  margin-bottom:1.25rem;
}
.footerCol li + li{ margin-top:.25rem; }
.footerCol a{
  font-size:var(--t-small); color:var(--bone-55);
  transition:color var(--dur) var(--ease);
  display:inline-flex; align-items:center; min-height:40px;
}
.footerCol a:hover{ color:var(--accent-hi); }

.footerBottom{
  margin-top:clamp(2.5rem,6vw,3.5rem); padding-top:1.5rem;
  border-top:1px solid var(--rule-soft);
  display:flex; flex-wrap:wrap; gap:1rem; align-items:center; justify-content:space-between;
  font-family:var(--f-ui); font-size:.6875rem; letter-spacing:.08em; color:var(--bone-40);
}
.footerBottom nav{ display:flex; gap:1.5rem; }
.footerBottom a:hover{ color:var(--accent-hi); }

/* ---------- 15. REVEAL ---------- */
.reveal{ opacity:0; transform:translateY(14px); }
.reveal.in{
  opacity:1; transform:none;
  transition:opacity .7s var(--ease), transform .7s var(--ease);
}

/* ---------- 16. LOADER ---------- */
#loader{
  position:fixed; inset:0; z-index:1000;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  padding:2rem;
  background:var(--ink);
  transition:opacity .6s var(--ease), visibility .6s var(--ease);
}
#loader::before{
  content:''; position:absolute; inset:0;
  background:url('jungle-tiny.jpg') center/cover;
  opacity:.28; filter:blur(2px);
}
#loader::after{
  content:''; position:absolute; inset:0;
  background:radial-gradient(70% 55% at 50% 42%, rgba(16,185,129,.14), transparent 70%),
             linear-gradient(180deg, rgba(7,11,9,.72), rgba(7,11,9,.94));
}
#loader > *{ position:relative; z-index:1; }

.loaderMark{
  width:64px; height:64px;
  margin-bottom:1.5rem;
  filter:drop-shadow(0 0 26px rgba(16,185,129,.45));
  animation:markIn .9s var(--ease) both;
}
.loaderWord{
  font-family:var(--f-display);
  font-size:clamp(1.75rem,7.5vw,2.75rem);
  line-height:1; letter-spacing:.04em; color:var(--bone);
  text-align:center;
  margin-bottom:1.75rem;
  animation:riseIn .8s var(--ease) .12s both;
}
.loaderBar{
  position:relative; width:min(220px,62vw); height:1px;
  background:rgba(236,232,222,.16); overflow:hidden;
  margin-bottom:1.1rem;
  animation:riseIn .8s var(--ease) .2s both;
}
.loaderBar i{
  position:absolute; inset:0 auto 0 0; width:0%;
  background:linear-gradient(90deg,var(--accent-dim),var(--accent-hi));
  transition:width .35s var(--ease);
}
.loaderSub{
  font-family: 'Playfair Display', serif; font-size: 1.5rem; font-weight: 400; font-style: italic;
  letter-spacing: normal; text-transform: none; color: var(--bone);
  animation:riseIn .8s var(--ease) .28s both;
}

@keyframes markIn{ from{ opacity:0; transform:scale(.86) } to{ opacity:1; transform:none } }
@keyframes riseIn{ from{ opacity:0; transform:translateY(10px) } to{ opacity:1; transform:none } }

#loader.done{ opacity:0; visibility:hidden; pointer-events:none; }

/* content is only hidden when JS is running the loader */
html.js .siteHeader,
html.js main,
html.js .siteFooter{ opacity:0; }
html.js.ready .siteHeader,
html.js.ready main,
html.js.ready .siteFooter{
  opacity:1;
  transition:opacity .8s var(--ease);
}
html:not(.js) #loader{ display:none; }

/* =========================================================
   17. RESPONSIVE
   ========================================================= */

/* ---- tablet & below: burger menu ---- */
@media (max-width:900px){
  .navToggle{ display:flex; }

  .navLinks{
    position:fixed;
    top:calc(var(--nav-h) + env(safe-area-inset-top));
    left:0; right:0;
    height:calc(100dvh - var(--nav-h) - env(safe-area-inset-top));
    flex-direction:column;
    align-items:stretch;
    justify-content:flex-start;
    gap:0;
    padding:clamp(1rem,4vw,2rem) max(var(--gutter),env(safe-area-inset-left))
            calc(2rem + env(safe-area-inset-bottom));
    background:rgba(7,11,9,.96);
    backdrop-filter:blur(20px);
    -webkit-backdrop-filter:blur(20px);
    overflow-y:auto;
    opacity:0; visibility:hidden;
    transform:translateY(-8px);
    transition:opacity .28s var(--ease), transform .28s var(--ease), visibility .28s;
  }
  .navLinks.open{ opacity:1; visibility:visible; transform:none; }

  .navLinks a{
    display:flex; align-items:center;
    min-height:60px;
    font-size:.8125rem; letter-spacing:.22em;
    color:var(--bone-70);
    border-bottom:1px solid var(--rule-soft);
    padding:0;
  }
  .navLinks a::after{ display:none; }
  .navLinks a[aria-current="page"]{ color:var(--accent); }

  .navCta{ display:block; margin-top:auto; padding-top:2rem; }
  .navCta .btn{ width:100%; }

  body.navOpen{ overflow:hidden; }
}

/* ---- footer stacking ---- */
@media (max-width:760px){
  .footerGrid{ grid-template-columns:1fr 1fr; }
  .footerBrand{ grid-column:1 / -1; }
  .footerBottom{ justify-content:flex-start; gap:1rem 1.5rem; }
}

/* ---- phones ---- */
@media (max-width:600px){
  :root{ --nav-h:58px; }

  .brand img{ width:30px; height:30px; }
  .brand span{ font-size:.9375rem; }

  .hero{ padding-block:clamp(2.5rem,7vh,4rem) 5.5rem; }
  .hero__inner{ gap:1.25rem; }

  .stats dd{ font-size:clamp(.9375rem,4.4vw,1.25rem); }
  .stats dt{ font-size:.625rem; letter-spacing:.14em; }
  .stats div{ padding:.9rem .35rem; }

  .prose--lore > p:first-of-type::first-letter{ font-size:2.8em; }
  .faqPanel p{ padding-right:0; }
  .scrollHint{ font-size:.625rem; letter-spacing:.16em; }
}

/* ---- stack the CTAs on narrow phones ---- */
@media (max-width:479px){
  .btnRow{ flex-direction:column; align-items:stretch; width:100%; max-width:320px; margin-inline:auto; }
  .btnRow .btn{ width:100%; }
  .hero .btnRow{ margin-top:.5rem; }
}

/* ---- very narrow (Galaxy Fold, 280–320px) ---- */
@media (max-width:359px){
  :root{ --gutter:1rem; }
  .btn{ min-height:50px; font-size:.6875rem; letter-spacing:.14em; padding-inline:1rem; }
  .stats dt{ font-size:.625rem; letter-spacing:.04em; }
  .footerGrid{ grid-template-columns:1fr; }
  .footerBottom nav{ gap:1rem; }
}

/* ---- short landscape phones ---- */
@media (max-height:520px) and (orientation:landscape){
  .hero{ min-height:auto; padding-block:3rem 4rem; }
  .scrollHint{ display:none; }
  .navLinks a{ min-height:48px; }
}

/* ---- large screens ---- */
@media (min-width:1440px){
  :root{ --maxw:1240px; }
}

/* ---- pointer/hover-less devices: kill hover lift ---- */
@media (hover:none){
  .btn:hover{ transform:none; }
  .card:hover{ transform:none; }
}

/* ---- reduced motion ---- */
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:.01ms!important;
    animation-iteration-count:1!important;
    transition-duration:.01ms!important;
    scroll-behavior:auto!important;
  }
  .reveal{ opacity:1; transform:none; }
}

/* ---- print ---- */
@media print{
  .bgLayer,.bgScrim,#loader,.siteHeader,.scrollHint{ display:none!important; }
  body{ color:#000; }
  html{ background:#fff; }
}

/* ==== USER OVERRIDES ==== */

/* Global text boldness */
body {
    font-weight: 500;
}
h1, h2, h3, h4, h5, h6, .head, .display {
    font-weight: 700;
}
.prose, .lede {
    font-weight: 500;
}

/* FAQ Answer Size */
.faqPanel p {
    font-size: clamp(1.1rem, 2vw, 1.4rem);
    line-height: 1.6;
    color: var(--bone-90, #eee);
}

/* Shadcn UI Buttons */
.btn, .btnRow .btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.5rem !important;
  white-space: nowrap !important;
  border-radius: 0.375rem !important; /* rounded-md */
  font-size: 0.875rem !important; /* text-sm */
  font-weight: 500 !important; /* font-medium */
  transition-property: all !important;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1) !important;
  transition-duration: 150ms !important;
  height: 2.25rem !important; /* h-9 */
  padding-left: 1rem !important;
  padding-right: 1rem !important;
  padding-top: 0.5rem !important;
  padding-bottom: 0.5rem !important;
  border: 1px solid transparent !important;
  font-family: var(--f-sans) !important;
  text-transform: none !important;
  letter-spacing: normal !important;
  color: var(--ink) !important;
  min-height: unset !important;
  width: auto !important;
}




.btnRow {
  display: flex !important;
  gap: 0.5rem !important;
  align-items: center !important;
}

/* Taped Footer */
.siteFooter { display: none !important; } /* Hide old footer completely */

.tapeFooter {
  padding: 2rem;
  max-width: 64rem;
  margin: 2rem auto;
  font-family: var(--f-sans);
}
.tapeContainer {
  position: relative;
  background-color: #fff;
  border-radius: 1.5rem;
  padding: 2.5rem 1rem;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  color: #0A0A0A;
}
.tapeDecor {
  display: block;
  position: absolute;
  width: 80px;
  height: 36px;
  transform: scale(0.75);
}
.tapeDecor.top-left {
  top: -1rem;
  left: -2rem;
}
.tapeDecor.top-right {
  top: -1rem;
  right: -2rem;
  transform: scale(0.75) rotate(90deg);
}
@media (min-width: 768px) {
  .tapeContainer {
    padding-left: 2rem;
    padding-right: 2rem;
  }
  
}
.tapeContent {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  flex: 1;
}
@media (min-width: 768px) {
  .tapeContent {
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-start;
    gap: 2.5rem;
  }
}
.tapeBrand {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.tapeBrand .brand {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 1.5rem;
  font-weight: 800;
  color: #0A0A0A;
  text-decoration: none;
}
.tapeBrand .brand img { border-radius: 50%; }
.tapeBrand p {
  color: rgba(0,0,0,0.5);
  font-weight: 500;
  font-size: 1rem;
  margin-top: 0.5rem;
  max-width: 80%;
  line-height: 1.4;
}
.tapeCol h4 {
  text-transform: uppercase;
  color: rgba(0,0,0,0.5);
  font-weight: 600;
  font-size: 0.875rem;
  margin-bottom: 0.5rem;
  letter-spacing: 0;
}
.tapeCol ul { list-style: none; padding: 0; margin: 0; }
.tapeCol li a {
  color: rgba(0,0,0,0.5);
  font-weight: 500;
  font-size: 0.875rem;
  text-decoration: none;
  white-space: nowrap;
}
.tapeCol li a:hover { color: #0A0A0A; }
.tapeCol ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
@media (min-width: 768px) {
  .tapeCol ul { flex-direction: column; gap: 0.25rem; }
}
.tapeBottom {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  align-items: flex-start;
  font-size: 0.875rem;
  color: #0A0A0A;
  margin-top: 1rem;
}
@media (min-width: 768px) {
  .tapeBottom {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  }
}
.tapeBottom p { margin: 0; font-weight: 500; }
.tapeBottom nav { display: flex; gap: 1rem; }
.tapeBottom nav a { color: #0A0A0A; text-decoration: none; font-weight: 500; }

/* ==== V2 BUTTONS & NAV & FOOTER OVERRIDES ==== */

/* Fix Nav Fonts */
.navLinks a {
  font-family: 'Playfair Display', serif !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  font-size: 1.125rem !important;
  font-weight: 600 !important;
}

/* Dark Taped Footer */
.tapeContainer {
  background-color: #0A0A0A !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  color: #EEEEEE !important;
  box-shadow: 0 10px 40px rgba(0,0,0,0.8) !important;
}
.tapeDecor svg path {
  fill: var(--accent) !important; /* Make tape green */
}
.tapeBrand .brand {
  color: #FFFFFF !important;
}
.tapeBrand p, .tapeCol h4, .tapeCol li a, .tapeBottom {
  color: rgba(255, 255, 255, 0.6) !important;
}
.tapeCol li a:hover, .tapeBottom nav a:hover {
  color: #FFFFFF !important;
}


/* Exact Button Implementations Based on User Tailwind Snippets */

/* Tactile Primary Button */
.btn.btn--primary, .btnRow .btn.btn--primary {
  background: #00a852 !important;
  color: #111111 !important;
  border: 1px solid rgba(0, 168, 82, 0.2) !important;
  box-shadow: 0 4px 0 #007a3c !important;
  border-radius: 0.75rem !important; /* rounded-xl */
  font-weight: 700 !important;
  font-size: 0.875rem !important;
  padding: 0 1.5rem !important;
  min-height: 2.75rem !important; /* h-11 */
  transition: all 0.2s ease !important;
}
.btn.btn--primary:hover, .btnRow .btn.btn--primary:hover {
  background: rgba(0, 168, 82, 0.95) !important;
}
.btn.btn--primary:active, .btnRow .btn.btn--primary:active {
  transform: translateY(3px) !important;
  box-shadow: 0 1px 0 #007a3c !important;
}

/* Glassy Secondary Button (Static, No Hover) */
.btn.btn--ghost, .btnRow .btn.btn--ghost {
  background: rgba(255, 255, 255, 0.1) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  color: #ffffff !important;
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.15) !important;
  border-radius: 0.75rem !important; /* rounded-xl */
  font-weight: 600 !important;
  font-size: 0.875rem !important;
  padding: 0 1.5rem !important;
  min-height: 2.75rem !important; /* h-11 */
}

@media (max-width: 640px) {
  .tapeFooter {
    padding: 1rem;
    margin: 1rem auto;
  }
  .tapeContainer {
    padding: 2rem 1rem;
  }
  .tapeDecor {
    transform: scale(0.65);
  }
  .tapeDecor.top-left {
    top: -15px; left: -15px;
  }
  .tapeDecor.top-right {
    top: -15px; right: -15px;
  }
}

@media (max-width: 640px) {
  .tapeFooter {
    padding: 0.5rem !important;
    margin: 0.5rem auto !important;
  }
  .tapeContainer {
    padding: 1.5rem 1rem !important;
    gap: 1.5rem !important;
  }
  .tapeContent {
    gap: 1.5rem !important;
  }
  .tapeLinksWrap {
    gap: 2rem !important;
    justify-content: flex-start !important;
  }
  .tapeBottom {
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    gap: 0.75rem !important;
  }
}

/* Mobile Hero Typography Scaling */
@media (max-width: 640px) {
  .hero h1.display {
    font-size: 2.1rem !important; /* Scaled down from 2.6rem */
  }
  .hero .eyebrow {
    font-size: 0.95rem !important; /* Scaled down from 1.25rem */
    letter-spacing: -0.01em !important;
  }
  .hero .lede {
    gap: 0.15rem !important;
  }
  .hero .lede p {
    font-size: 1.05rem !important; /* Slightly bumped up for legibility */
    line-height: 1.15 !important;
  }
}

/* Force total centering for hero text */
.hero__inner, .hero .eyebrow, .hero .display, .hero .lede, .hero .lede p {
  text-align: center !important;
  align-items: center !important;
  justify-content: center !important;
}



/* Better mobile hero styling */
@media (max-width: 640px) {
  .hero__inner {
    padding-left: 1.5rem !important;
    padding-right: 1.5rem !important;
    gap: 1.25rem !important;
  }
  .hero .display {
    font-size: 2.25rem !important; /* Slightly larger */
    line-height: 1.1 !important;
    margin-bottom: 0.5rem !important;
  }
  .hero .lede p {
    font-size: 0.95rem !important;
    line-height: 1.4 !important;
    max-width: 100% !important;
  }
  
  
  .stats {
    margin-top: 1rem !important;
    margin-bottom: 0.5rem !important;
  }
}

@keyframes bounce {
  0%, 20%, 50%, 80%, 100% { transform: translateY(0) translateX(-50%); }
  40% { transform: translateY(-10px) translateX(-50%); }
  60% { transform: translateY(-5px) translateX(-50%); }
}

@media (max-width: 640px) {
  .hero {
    min-height: 100vh !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: relative !important;
  }
  .hero__inner {
    gap: 0.5rem !important; /* Extremely tight gap between eyebrow, title, and lede */
  }
  .hero .eyebrow {
    font-size: 0.8rem !important; /* Smaller outcast */
    margin-bottom: -0.25rem !important;
  }
  .hero .display {
    font-size: 5.25rem !important; /* Colossal Wild 899 */
    margin-bottom: -0.25rem !important; /* Extremely tight to the paragraph */
  }
  .hero .lede {
    margin-top: 0.5rem !important;
  }
}

/* Device-specific text blocks */
.mobile-text {
  display: none !important;
}
.desktop-text {
  display: flex !important;
}

@media (max-width: 640px) {
  .desktop-text {
    display: none !important;
  }
  .mobile-text {
    display: flex !important;
  }
}