/* Tiger Leaf Learning styles v1.6.9 (full) */

/* Tokens */
:root{
  --bg:#0b1f16;
  --surface:#f7f8f6;
  --surface-2:#eef2ef;

  --brand:#1d5e44;
  --brand-2:#2f7d5a;
  --leaf:#35a16a;

  --tiger-1:#f57c00;
  --tiger-2:#e65100;

  --text:#0b1511;
  --muted:#4e5f58;
  --on-dark:#f1fbf7;

  --font-heading:"Playfair Display","Times New Roman",Georgia,serif;
  --font-body:"Inter",system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;

  --radius:14px;
  --radius-sm:10px;
  --shadow:0 8px 24px rgba(0,0,0,.12), 0 2px 6px rgba(0,0,0,.06);
  --shadow-soft:0 6px 18px rgba(0,0,0,.08);

  --container-max:1120px;
  --container-pad:4vw;

  /* Dynamic header metrics set by JS */
  --header-height:64px;
  --header-offset: calc(var(--header-height) + env(safe-area-inset-top, 0px));
}

/* Base */
*{ box-sizing:border-box }
html{ scroll-behavior:smooth }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto }
  *{ animation:none !important; transition:none !important }
}
body{
  margin:0; background:var(--bg); color:var(--on-dark);
  font:400 1rem/1.65 var(--font-body);
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}
img,svg{ display:block; max-width:100%; height:auto }
a{ color:inherit; text-decoration:none }

.container{ width:min(var(--container-max), 100% - var(--container-pad)); margin-inline:auto }

.skip-link{ position:absolute; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden }
.skip-link:focus{ left:16px; top:16px; padding:8px 12px; background:#ffb74d; color:#111; border-radius:8px; z-index:10000 }

/* SITE HEADER (scoped) */
.site-header{
  position:sticky; top:0; z-index:1000;
  background:rgba(11,31,22,.62);
  backdrop-filter:saturate(130%) blur(8px);
  border-bottom:1px solid rgba(255,255,255,.14);
  padding-top: max(0px, env(safe-area-inset-top, 0px));
}
.site-header .nav{
  display:flex; align-items:center; justify-content:space-between;
  gap:12px; padding:14px 0; flex-wrap:nowrap;
}

/* Brand lockup */
.brand{display:flex; align-items:center; gap:10px; min-width:0}
.brand-title{
  font-family:var(--font-heading);
  font-weight:600;
  font-size: clamp(1.15rem, 0.9rem + 1.2vw, 1.6rem);
  color:#fff; line-height:1.1; letter-spacing:.2px; white-space:nowrap;
}
.brand-sub{ font-size:.9rem; color:rgba(255,255,255,.9) }

/* Brand mark as inline SVG icon (remove gradient box) */
.brand-mark{
  width:34px; height:34px; flex:0 0 34px;
  display:block;
  color:#35A16A;             /* leaf fill via currentColor */
  --leaf-vein:#1D5E44;       /* vein color */
  --leaf-vein-width:1.4;     /* tweak for crispness */
  background:none; border:0; border-radius:0; box-shadow:none;
}
.brand:hover .brand-mark{ transform: translateY(-1px) }
.brand-mark{ transition: transform .18s ease }
.brand-mark path, .brand-mark g{ vector-effect: non-scaling-stroke }

/* Primary nav */
.site-header nav{
  flex:1 1 auto; min-width:0;
  display:flex; align-items:center; justify-content:flex-end; gap:10px;
}
.site-header nav ul{
  list-style:none; padding:0; margin:0;
  display:flex; flex-direction:row-reverse; align-items:center; gap:12px;
  white-space:nowrap; min-width:0; order:0;
}
.site-header nav a{
  color:#fff; padding:8px 8px; border-radius:8px;
  display:inline-flex; align-items:center; line-height:1; white-space:nowrap;
}
.site-header nav a:hover, .site-header nav a:focus-visible{ background:rgba(255,255,255,.12); outline:none }
.nav-cta{ order:1; display:inline-flex; align-items:center }

/* Buttons */
.btn{
  display:inline-flex; align-items:center; gap:10px; padding:12px 16px;
  border-radius:12px; border:1px solid rgba(0,0,0,.06);
  background:linear-gradient(180deg,var(--tiger-1),var(--tiger-2));
  color:#fff; font-weight:700; letter-spacing:.2px;
  box-shadow:0 8px 16px rgba(230,81,0,.35);
  transition:transform .2s ease, box-shadow .2s ease, filter .2s ease;
}
.btn:hover,.btn:focus-visible{
  transform:translateY(-1px);
  box-shadow:0 10px 20px rgba(230,81,0,.45);
  filter:brightness(1.03); outline:none;
}
.btn.secondary{
  background:transparent; color:#fff;
  border:1px solid rgba(255,255,255,.38);
  box-shadow:none; font-weight:600;
}

/* Sections */
.hero{
  position:relative; padding:64px 0 56px; background:var(--brand); color:#f4fff9;
  overflow:clip;
}
.hero-grid{ display:grid; gap:28px; grid-template-columns:1fr }
.eyebrow{ font-size:.92rem; letter-spacing:.12em; text-transform:uppercase; border-left:4px solid var(--tiger-1); padding-left:10px }
.hero h1{
  font-family:var(--font-heading); font-weight:600;
  font-size: clamp(2rem, 1.3rem + 2.6vw, 3.2rem); line-height:1.12; margin:10px 0 12px;
}
.lead{ font-size: clamp(1.05rem, .95rem + .5vw, 1.25rem); margin:0 0 18px }
.hero-ctas{ display:flex; gap:12px; flex-wrap:wrap }

.badge-caption{ margin:14px 0 6px; font-size:.85rem; letter-spacing:.12em; text-transform:uppercase; color:#dcf3ea; opacity:.9 }
.hero-badges{
  display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:16px; padding-top:10px; position:relative;
}
.hero-badges::before{
  content:""; position:absolute; left:0; right:0; top:0; height:1px;
  background:linear-gradient(90deg, rgba(255,255,255,.06), rgba(255,255,255,.16), rgba(255,255,255,.06));
}
@media (max-width:900px){ .hero-badges{ grid-template-columns:repeat(2, minmax(0,1fr)) } }
@media (max-width:560px){ .hero-badges{ grid-template-columns:1fr } }
.badge{
  display:inline-flex; align-items:center; gap:12px; min-height:54px; padding:12px 14px;
  border:1px solid rgba(255,255,255,.28); border-radius:10px;
  background:linear-gradient(180deg, rgba(255,255,255,.14), rgba(255,255,255,.06));
  color:#f4fff9;
}
.badge svg{ width:26px; height:26px; color:#fff; fill:currentColor; stroke:currentColor; stroke-width:1.6 }

.section{ background:var(--surface); color:var(--text); padding:64px 0 }
.section.alt{ background:var(--surface-2) }
.section-head{ margin-bottom:28px }
.section-head h2{
  margin:0 0 8px; font-family:var(--font-heading); font-weight:600; color:var(--brand);
  font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.3rem); line-height:1.2;
}
.section-head p{ margin:0; color:var(--muted) }
.section-head h2::after{
  content:""; display:block; width:48px; height:3px; margin-top:8px; border-radius:3px;
  background:linear-gradient(90deg, var(--leaf), var(--tiger-1));
}

.cards{ display:grid; gap:24px; grid-template-columns:1fr }
.card{
  background:#fff; color:var(--text);
  border:1px solid #d8e2dc; border-radius:var(--radius);
  box-shadow:var(--shadow-soft); padding:28px;
}
.card h3{
  display:flex; align-items:center; gap:12px;
  margin:0 0 6px; font-family:var(--font-heading); font-size: clamp(1.25rem, 1.05rem + .8vw, 1.6rem); color:var(--brand);
}
.card .icon{
  width:44px; height:44px; border-radius:12px; display:grid; place-items:center; flex:0 0 44px;
  background:linear-gradient(180deg,#fff3e4,#ffe3c6);
  border:1px solid #f5cda6; color:#b35400;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.6);
}
.card .icon svg{ width:26px; height:26px }
.card .meta{ color:var(--muted); margin:0 0 12px }

.timeline{ display:grid; gap:20px }
.step{
  display:grid; grid-template-columns:44px 1fr; gap:12px; align-items:start;
  background:#fff; color:var(--text);
  border:1px solid #d8e2dc; border-radius:var(--radius);
  box-shadow:var(--shadow-soft); padding:24px;
}
.step .num{
  width:44px; height:44px; border-radius:12px; display:grid; place-items:center;
  background:linear-gradient(180deg, var(--leaf), #2b8e5c);
  color:#fff; font-weight:800; box-shadow:0 6px 14px rgba(43,142,92,.35);
}
.step h3{ margin:0 0 6px; font-family:var(--font-heading); color:var(--brand) }
.step p{ margin:0 }

.about{ background:var(--surface); color:var(--text); padding:56px 0 64px; border-top:1px solid #e1e8e3; border-bottom:1px solid #e1e8e3 }
.about-grid{ display:grid; gap:24px; grid-template-columns:1fr; align-items:center }
.portrait{ width:148px; height:148px; border-radius:50%; background:#fff; border:2px solid #d8e2dc; box-shadow:var(--shadow-soft); overflow:hidden; margin:0 auto }
.about h2.aboutme{ margin:0 0 6px; font-family:var(--font-heading); color:var(--brand) }
.about .meta{ color:var(--muted) }
.about .actions{ display:flex; gap:10px; flex-wrap:wrap; margin-top:12px }

.cta{
  background:linear-gradient(180deg,#1a3b2d,#0b1f16); color:var(--on-dark);
  text-align:center; padding:64px 0; border-top:1px solid rgba(255,255,255,.12)
}
.cta h2{ font-family:var(--font-heading) }
.cta .tiny{ opacity:.95 }

footer{
  background:#091912; color:rgba(241,251,247,.9);
  padding:28px 0 40px; border-top:1px solid rgba(255,255,255,.12)
}
.footer-grid{ display:grid; gap:20px; grid-template-columns:1fr }

/* Layout breakpoints */
@media (min-width:760px){
  .site-header nav ul{ display:flex }
  .site-header nav a{ font-size:.98rem; padding:8px 6px }
  .cards{ grid-template-columns:repeat(2, minmax(0,1fr)) }
  .footer-grid{ grid-template-columns:1.2fr 1fr 1fr }
  .about-grid{ grid-template-columns:auto 1fr; gap:28px }
  .portrait{ margin:0 }
}
@media (min-width:980px){
  .hero h1{ margin-bottom:8px }
  .lead{ margin-bottom:20px }
}

/* Anchor offset for sticky header — dynamic via --header-offset (no ::before spacers) */
[id]{ scroll-margin-top: var(--header-offset) }

/* Mobile menu + Hamburger */
.nav-toggle{
  display:inline-flex;
  flex-direction:column;   /* stack bars vertically */
  align-items:center;
  justify-content:center;
  gap:5px;                 /* space between bars */
  width:42px; height:42px;
  border-radius:10px;
  background:transparent;
  border:1px solid rgba(255,255,255,.28);
  cursor:pointer; padding:0; margin-left:auto; color:#fff;
  transition:background .2s ease, border-color .2s ease, transform .2s ease;
  line-height:0;           /* avoid inline spacing issues */
}
.nav-toggle .bar{
  display:block;
  width:22px;
  height:2px;
  background:#fff;
  border-radius:2px;
  transition:transform .25s ease, opacity .2s ease, background .2s ease;
}
.nav-toggle:hover{ background:rgba(255,255,255,.1) }

/* Animate to "X" */
.nav-toggle[aria-expanded="true"] .bar:nth-child(1){ transform:translateY(7px) rotate(45deg) }
.nav-toggle[aria-expanded="true"] .bar:nth-child(2){ opacity:0 }
.nav-toggle[aria-expanded="true"] .bar:nth-child(3){ transform:translateY(-7px) rotate(-45deg) }

/* Hide desktop links/cta on mobile; show toggle */
@media (max-width:759.98px){
  .site-header nav ul{ display:none !important }
  .site-header .nav-cta{ display:none !important }
  .brand-sub{ font-size:.88rem }
}
@media (min-width:760px){
  .nav-toggle{ display:none }
}

/* Mobile panel */
.mobile-menu{
  position:fixed; top:var(--header-height); left:0; right:0;
  background:rgba(9,25,18,.98);
  border-bottom:1px solid rgba(255,255,255,.14);
  transform:translateY(-8px);
  opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity .24s ease, transform .24s ease, visibility 0s linear .24s;
  z-index:999; backdrop-filter:saturate(120%) blur(6px);
}
.mobile-menu.open{
  opacity:1; visibility:visible; pointer-events:auto; transform:translateY(0);
  transition:opacity .24s ease, transform .24s ease;
}
.mobile-menu-inner{
  width:min(var(--container-max), 100% - var(--container-pad));
  margin-inline:auto; padding:12px 0 16px; display:grid; gap:10px;
}
.mobile-links{ list-style:none; padding:0; margin:0; display:grid; gap:6px }
.mobile-links a{
  display:flex; align-items:center; justify-content:space-between;
  padding:12px 10px; border-radius:10px; color:#fff;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.14);
}
.mobile-links a:active{ background:rgba(255,255,255,.12) }
.mobile-cta{ justify-content:center; width:100% }

body.menu-open{ overflow:hidden }

/* Hero entrance animations (progressive enhancement) */
@media (prefers-reduced-motion: no-preference){
  .hero [data-anim]{
    opacity:0;
    transform:translateY(10px);
    will-change: transform, opacity;
    animation: hero-fade-rise .6s ease-out forwards;
  }
  .hero [data-anim="eyebrow"]{
    transform:translateX(-8px);
    animation-name: hero-fade-slide;
    animation-duration:.5s;
    animation-delay:.05s;
  }
  .hero [data-anim="title"]{ animation-delay:.12s }
  .hero [data-anim="lead"]{ animation-delay:.22s }
  .hero [data-anim="cta-1"]{ animation-delay:.34s }
  .hero [data-anim="cta-2"]{ animation-delay:.42s }

  .hero .hero-badges .badge{
    opacity:0; transform:translateY(8px) scale(.98);
    animation: hero-badge .5s ease-out forwards;
  }
  .hero .hero-badges .badge:nth-child(1){ animation-delay:.50s }
  .hero .hero-badges .badge:nth-child(2){ animation-delay:.62s }
  .hero .hero-badges .badge:nth-child(3){ animation-delay:.74s }

  @keyframes hero-fade-rise{
    from{ opacity:0; transform:translateY(10px) }
    to{ opacity:1; transform:translateY(0) }
  }
  @keyframes hero-fade-slide{
    from{ opacity:0; transform:translateX(-8px) }
    to{ opacity:1; transform:translateX(0) }
  }
  @keyframes hero-badge{
    0%{ opacity:0; transform:translateY(8px) scale(.98) }
    100%{ opacity:1; transform:translateY(0) scale(1) }
  }

  .hero .btn{
    transition: transform .18s ease, box-shadow .18s ease, filter .2s ease;
  }
  .hero .btn:hover, .hero .btn:focus-visible{
    transform:translateY(-2px) scale(1.02);
    box-shadow:0 12px 24px rgba(230,81,0,.40);
  }
  .hero .badge:hover{
    transform:translateY(-2px);
    transition: transform .18s ease;
  }
}

/* Reduced motion: ensure everything is visible immediately */
@media (prefers-reduced-motion: reduce){
  .hero [data-anim], .hero .hero-badges .badge{
    opacity:1 !important; transform:none !important; animation:none !important;
  }
}