/* ---------- tokens ---------- */
:root{
  /* palette sampled directly from the Hypnobaobab logo (gold trunk, deep green leaves, warm tan) */
  --bg:#FFFFFF;
  --surface:#FFFFFF;
  --surface-2:#F3EEE0;
  --ink:#241A10;
  --ink-soft:#6B5A42;
  --accent:#D59D50;
  --accent-strong:#A1631F;
  --accent-ink:#241A10;
  --dusk:#0D572D;
  --dusk-soft:#1F6B3D;
  --clay:#A1631F;
  --line:rgba(36,26,16,.14);
  --line-strong:rgba(36,26,16,.28);
  --shadow:0 20px 50px -25px rgba(36,26,16,.35);

  --font-display:'Fraunces', ui-serif, Georgia, serif;
  --font-body:'Karla', ui-sans-serif, system-ui, sans-serif;
  --font-mono:'IBM Plex Mono', ui-monospace, monospace;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#171310;
    --surface:#221C16;
    --surface-2:#2C2419;
    --ink:#EFE7D6;
    --ink-soft:#B7A88C;
    --accent:#E7B25E;
    --accent-strong:#F0C578;
    --accent-ink:#221507;
    --dusk:#4CAE72;
    --dusk-soft:#7CC79A;
    --clay:#D98F4E;
    --line:rgba(239,231,214,.16);
    --line-strong:rgba(239,231,214,.3);
    --shadow:0 20px 50px -20px rgba(0,0,0,.55);
  }
}
:root[data-theme="dark"]{
  --bg:#171310;
  --surface:#221C16;
  --surface-2:#2C2419;
  --ink:#EFE7D6;
  --ink-soft:#B7A88C;
  --accent:#E7B25E;
  --accent-strong:#F0C578;
  --accent-ink:#221507;
  --dusk:#4CAE72;
  --dusk-soft:#7CC79A;
  --clay:#D98F4E;
  --line:rgba(239,231,214,.16);
  --line-strong:rgba(239,231,214,.3);
  --shadow:0 20px 50px -20px rgba(0,0,0,.55);
}

*{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.6;
  position:relative;
  background-image:
    radial-gradient(circle at 1px 1px, var(--line) 1px, transparent 0);
  background-size:26px 26px;
}
body::before{
  content:"";
  position:fixed;
  left:50%;
  bottom:0;
  transform:translateX(-50%);
  width:min(1600px,140vw);
  aspect-ratio:16/9;
  background-image:url('assets/baobab-savane.jpg');
  background-size:cover;
  background-position:center 55%;
  opacity:.15;
  -webkit-mask-image:linear-gradient(to bottom, transparent 0%, black 38%);
  mask-image:linear-gradient(to bottom, transparent 0%, black 38%);
  pointer-events:none;
  z-index:-1;
}
:root:not([data-theme="light"]) body::before{opacity:.22;}
h1,h2,h3{
  font-family:var(--font-display);
  font-weight:500;
  line-height:1.08;
  text-wrap:balance;
  margin:0 0 .5em;
  color:var(--ink);
}
h1{font-size:clamp(2.4rem,5.4vw,4.4rem); font-weight:400;}
h2{font-size:clamp(1.7rem,3.4vw,2.5rem);}
h3{font-size:1.15rem; font-weight:600;}
em{font-style:italic; color:var(--accent-strong);}
p{margin:0 0 1em; color:var(--ink-soft); max-width:62ch;}
a{color:inherit;}
img,svg,video{max-width:100%;}
.eyebrow{
  font-family:var(--font-mono);
  font-size:.72rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--dusk);
  display:inline-flex;
  align-items:center;
  gap:.6em;
  margin-bottom:1.1em;
}
.eyebrow::before{content:"";width:22px;height:1px;background:var(--dusk);display:inline-block;}
:root:not([data-theme="light"]) .eyebrow{color:var(--dusk);}

.wrap{max-width:1120px; margin:0 auto; padding:0 28px;}
section.panel{padding-top:96px; padding-bottom:96px;}
@media (max-width:720px){ section.panel{padding-top:64px; padding-bottom:64px;} }

a:focus-visible, button:focus-visible, summary:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible{
  outline:2px solid var(--dusk);
  outline-offset:3px;
  border-radius:2px;
}

/* ---------- accessibility utilities ---------- */
.visually-hidden:where(:not(:focus-within, :active)){
  position:absolute !important;
  clip-path:inset(50%) !important;
  overflow:hidden !important;
  width:1px !important;
  height:1px !important;
  margin:-1px !important;
  padding:0 !important;
  border:0 !important;
  white-space:nowrap !important;
}
.skip-link{
  position:fixed; top:10px; left:10px; z-index:100;
  background:var(--accent); color:var(--accent-ink);
  padding:.8em 1.2em; border-radius:8px;
  font-family:var(--font-mono); font-size:.8rem; text-transform:uppercase; letter-spacing:.03em;
  text-decoration:none;
}

/* ---------- view transitions (progressive enhancement) ---------- */
@media (prefers-reduced-motion: no-preference){
  @view-transition{ navigation:auto; }
}

/* ---------- buttons ---------- */
.btn{
  font-family:var(--font-mono);
  font-size:.8rem;
  letter-spacing:.04em;
  text-transform:uppercase;
  text-decoration:none;
  display:inline-flex;
  align-items:center;
  gap:.6em;
  padding:.95em 1.5em;
  border-radius:100px;
  border:1px solid transparent;
  cursor:pointer;
  transition:transform .18s ease, box-shadow .18s ease, background .18s ease;
}
.btn:hover{transform:translateY(-2px);}
.btn-primary{background:var(--accent); color:var(--accent-ink); box-shadow:var(--shadow);}
.btn-primary:hover{background:var(--accent-strong);}
.btn-ghost{background:transparent; color:var(--ink); border-color:var(--line-strong);}
.btn-ghost:hover{border-color:var(--dusk); color:var(--dusk);}

/* ---------- nav ---------- */
.site-nav{
  position:sticky; top:0; z-index:50;
  backdrop-filter:blur(10px);
  background:color-mix(in srgb, var(--bg) 82%, transparent);
  border-bottom:1px solid var(--line);
  view-transition-name:site-nav;
}
.nav-row{display:flex; align-items:center; justify-content:space-between; height:78px; gap:20px;}
.brand{display:flex; align-items:center; gap:.6em; text-decoration:none; color:var(--ink);}
.brand img{width:34px; height:34px; flex:none; object-fit:contain;}
.brand-word{font-family:var(--font-display); font-size:1.28rem; letter-spacing:.01em;}
.nav-links{display:flex; gap:2px; list-style:none; margin:0; padding:0; align-items:center;}
.nav-links a{
  font-family:var(--font-mono); font-size:.78rem; letter-spacing:.03em; text-transform:uppercase;
  color:var(--ink-soft); text-decoration:none; padding:10px 14px; border-radius:8px;
  position:relative; display:inline-block;
}
.nav-links a:hover{color:var(--ink);}
.nav-links a[aria-current="page"]{color:var(--dusk);}
.nav-links a[aria-current="page"]::after{
  content:""; position:absolute; left:14px; right:14px; bottom:2px; height:2px; background:var(--dusk); border-radius:2px;
}
.nav-cta{display:flex; align-items:center; gap:14px;}
.nav-cta .btn-primary{display:none;}
@media (min-width:920px){ .nav-cta .btn-primary{display:inline-flex;} }
.menu-toggle{display:flex; flex-direction:column; gap:5px; background:none; border:none; cursor:pointer; padding:8px;}
.menu-toggle span{width:22px; height:2px; background:var(--ink); border-radius:2px;}
@media (min-width:920px){ .menu-toggle{display:none;} .nav-links{display:flex !important;} }
@media (max-width:919px){
  .nav-links{
    display:none; position:absolute; top:78px; left:0; right:0; flex-direction:column; align-items:stretch;
    background:var(--bg); border-bottom:1px solid var(--line); padding:8px 20px 20px;
  }
  .nav-links.open{display:flex;}
  .nav-links a{text-align:left; padding:14px 6px; border-bottom:1px solid var(--line); border-radius:0;}
}

/* ---------- hero ---------- */
.hero{
  position:relative; overflow:hidden;
  background:linear-gradient(180deg, color-mix(in srgb, var(--dusk) 16%, var(--bg)) 0%, var(--bg) 78%);
  border-bottom:1px solid var(--line);
}
.hero canvas{position:absolute; inset:0; width:100%; height:100%; opacity:.55;}
.hero-mark{position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:46%; max-width:380px; opacity:.11; pointer-events:none;}
:root:not([data-theme="light"]) .hero-mark{opacity:.2;}
.hero-inner{position:relative; padding:88px 0 76px; max-width:760px;}
.hero-inner p{font-size:1.08rem; max-width:52ch;}
.hero-cta{display:flex; gap:14px; flex-wrap:wrap; margin-top:2em;}
.hero-cta .text-link{align-self:center; font-family:var(--font-mono); font-size:.8rem; text-transform:uppercase; letter-spacing:.03em; color:var(--dusk); text-decoration:none; border-bottom:1px solid currentColor; padding-bottom:2px;}

.page-hero{padding:72px 0 20px;}
.page-hero p{font-size:1.05rem;}

/* ---------- strip / grids ---------- */
.strip{
  display:grid; grid-template-columns:repeat(3,1fr); border-top:1px solid var(--line); border-bottom:1px solid var(--line);
}
.strip > div{padding:26px 24px; border-left:1px solid var(--line);}
.strip > div:first-child{border-left:none;}
.strip .k{font-family:var(--font-mono); font-size:.72rem; letter-spacing:.08em; text-transform:uppercase; color:var(--dusk); display:block; margin-bottom:.5em;}
.strip .v{font-size:.95rem; color:var(--ink);}
@media (max-width:720px){
  .strip{grid-template-columns:1fr;}
  .strip > div{border-left:none; border-top:1px solid var(--line);}
  .strip > div:first-child{border-top:none;}
}

.grid-cards{display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:18px; overflow:hidden;}
.grid-cards.two{grid-template-columns:repeat(2,1fr);}
.grid-cards.four{grid-template-columns:repeat(4,1fr);}
.grid-cards > div{background:var(--surface); padding:32px 28px;}
.grid-cards.photos > div{padding:0;}
.grid-cards.photos > div img{display:block; width:100%; aspect-ratio:2/3; object-fit:cover; background:var(--surface-2);}
.grid-cards.photos > div .card-body{padding:20px 22px 24px;}
.grid-cards.photos > div .card-body p{margin:0;}
@media (max-width:900px){ .grid-cards, .grid-cards.four{grid-template-columns:repeat(2,1fr);} }
@media (max-width:560px){ .grid-cards, .grid-cards.four, .grid-cards.two{grid-template-columns:1fr;} }
.card-num{font-family:var(--font-mono); font-size:.72rem; color:var(--ink-soft); letter-spacing:.06em;}
.card-icon{width:30px; height:30px; color:var(--accent); margin-bottom:14px;}
.card-link{text-decoration:none; color:var(--dusk); font-family:var(--font-mono); font-size:.78rem; text-transform:uppercase; display:inline-block; margin-top:.4em;}

/* ---------- tree ring divider ---------- */
.ring-divider{display:flex; justify-content:center; padding:20px 0 8px; color:var(--line-strong);}
.ring-divider svg{width:64px; height:64px;}

/* ---------- video / testimonials ---------- */
.video-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:24px; max-width:560px;}
@media (max-width:640px){ .video-grid{grid-template-columns:1fr; max-width:320px;} }
.video-card{border:1px solid var(--line); border-radius:18px; overflow:hidden; background:var(--surface); box-shadow:var(--shadow);}
.video-card video{display:block; width:100%; aspect-ratio:9/16; object-fit:cover; background:var(--surface-2);}
.proof-caption{margin-top:1.4em; font-family:var(--font-mono); font-size:.7rem; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-soft);}
.testimonial-card{border:1px solid var(--line); border-radius:16px; padding:30px 34px; background:var(--surface); max-width:640px; margin-top:32px;}
.testimonial-card p{font-family:var(--font-display); font-style:italic; font-size:1.1rem; color:var(--ink); margin:0 0 1em;}
.testimonial-attr{font-family:var(--font-mono); font-size:.72rem; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-soft);}

/* ---------- callout / metaphor ---------- */
.callout{
  border-left:3px solid var(--accent); background:var(--surface); border-radius:0 16px 16px 0; padding:34px 36px; margin:2.4em 0;
}
.callout p{color:var(--ink); font-size:1.05rem; font-family:var(--font-display); font-style:italic; max-width:56ch;}

/* ---------- myth/reality ---------- */
.myth-list{display:flex; flex-direction:column; gap:1px; background:var(--line); border:1px solid var(--line); border-radius:16px; overflow:hidden; margin:1.6em 0;}
.myth-row{display:grid; grid-template-columns:1fr 1fr; background:var(--surface);}
@media (max-width:720px){ .myth-row{grid-template-columns:1fr;} }
.myth-row > div{padding:24px 26px;}
.myth-row .myth{color:var(--ink-soft);}
.myth-row .myth .tag, .myth-row .real .tag{font-family:var(--font-mono); font-size:.68rem; letter-spacing:.08em; text-transform:uppercase; display:block; margin-bottom:.6em;}
.myth-row .myth .tag{color:var(--clay);}
.myth-row .real .tag{color:var(--dusk);}
.myth-row .real{background:color-mix(in srgb, var(--dusk) 6%, var(--surface));}
.myth-row .real p{color:var(--ink); margin:0;}
.myth-row .myth p{margin:0; font-style:italic;}

/* ---------- steps ---------- */
.steps{display:flex; flex-direction:column; margin:1.6em 0; padding:0; list-style:none;}
.step{display:grid; grid-template-columns:64px 1fr; gap:20px; padding:22px 0; border-top:1px solid var(--line);}
.step:last-child{border-bottom:1px solid var(--line);}
.step .n{font-family:var(--font-display); font-size:1.6rem; color:var(--accent); font-style:italic;}
.step h3{margin-bottom:.3em;}
.step p{margin:0;}

/* ---------- faq ---------- */
details{border-bottom:1px solid var(--line); padding:18px 2px;}
details summary{
  cursor:pointer; list-style:none; font-family:var(--font-display); font-size:1.12rem; color:var(--ink);
  display:flex; justify-content:space-between; align-items:center; gap:16px;
}
details summary::-webkit-details-marker{display:none;}
details summary::after{content:"+"; font-family:var(--font-mono); color:var(--dusk); font-size:1.3rem; flex:none;}
details[open] summary::after{content:"–";}
details p{margin:.9em 0 0; max-width:64ch;}
.card-body details{border-bottom:none; padding:12px 0 0; margin-top:10px; border-top:1px solid var(--line);}
.card-body details summary{font-family:var(--font-body); font-size:.82rem; font-weight:700; letter-spacing:.02em; color:var(--dusk); padding-top:10px;}
.card-body details summary::after{font-size:1.1rem;}
.card-body details p{font-size:.88rem; line-height:1.5;}
.card-body details p:first-of-type{margin-top:.8em;}

/* ---------- about ---------- */
.about-grid{display:grid; grid-template-columns:.9fr 1.1fr; gap:56px; align-items:start;}
@media (max-width:820px){ .about-grid{grid-template-columns:1fr;} }
.about-frame{aspect-ratio:4/5; border-radius:20px; border:1px solid var(--line); background:
    radial-gradient(circle at 30% 20%, color-mix(in srgb, var(--accent) 30%, transparent), transparent 55%),
    radial-gradient(circle at 75% 80%, color-mix(in srgb, var(--dusk) 30%, transparent), transparent 55%),
    var(--surface-2);
  display:flex; align-items:center; justify-content:center; overflow:hidden;
}
.about-frame img{width:52%; object-fit:contain;}
.photo-frame{aspect-ratio:4/5; border-radius:20px; border:1px solid var(--line); overflow:hidden; background:var(--surface-2);}
.photo-frame img{display:block; width:100%; height:100%; object-fit:cover;}

/* ---------- contact ---------- */
.contact-grid{display:grid; grid-template-columns:1.1fr .9fr; gap:56px; align-items:start;}
@media (max-width:900px){ .contact-grid{grid-template-columns:1fr;} }
form{display:flex; flex-direction:column; gap:18px;}
.field-row{display:grid; grid-template-columns:1fr 1fr; gap:18px;}
@media (max-width:560px){ .field-row{grid-template-columns:1fr;} }
label{font-family:var(--font-mono); font-size:.7rem; letter-spacing:.07em; text-transform:uppercase; color:var(--ink-soft); display:block; margin-bottom:.6em;}
input, select, textarea{
  width:100%; font-family:var(--font-body); font-size:1rem; color:var(--ink); background:var(--surface);
  border:1px solid var(--line-strong); border-radius:10px; padding:12px 14px; min-height:48px;
}
textarea{resize:vertical; min-height:110px;}
.direct-card{border:1px solid var(--line); border-radius:16px; padding:28px; background:var(--surface); display:flex; flex-direction:column; gap:16px;}
.direct-card a{text-decoration:none;}
.direct-row{display:flex; align-items:center; gap:12px; font-size:.98rem;}
.direct-row svg{width:20px; height:20px; color:var(--accent); flex:none;}
.map-embed{border-radius:12px; overflow:hidden; border:1px solid var(--line);}
.map-embed iframe{display:block; width:100%; height:220px; border:0;}
.social-row{display:flex; gap:10px; margin-top:6px;}
.social-row a{width:38px; height:38px; border:1px solid var(--line-strong); border-radius:50%; display:flex; align-items:center; justify-content:center; text-decoration:none; color:var(--ink);}
.social-row a:hover{border-color:var(--dusk); color:var(--dusk);}
.social-row svg{width:17px; height:17px;}
.note{font-size:.82rem; color:var(--ink-soft); margin-top:-6px;}

/* ---------- cta banner ---------- */
.cta-banner{
  border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  background:var(--surface);
  padding:64px 0; text-align:left;
  display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap;
}
.cta-banner h2{margin:0;}

/* ---------- footer ---------- */
footer{padding:56px 0 40px;}
.foot-grid{display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:40px;}
@media (max-width:720px){ .foot-grid{grid-template-columns:1fr; gap:32px;} }
.foot-grid h2{font-family:var(--font-mono); font-size:.72rem; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-soft); margin:0 0 1em;}
.foot-links{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.7em;}
.foot-links a{color:var(--ink-soft); text-decoration:none;}
.foot-links a:hover{color:var(--dusk);}
.foot-bottom{margin-top:48px; padding-top:24px; border-top:1px solid var(--line); display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; font-size:.82rem; color:var(--ink-soft);}