/* Brand webfonts. No licensed binaries were supplied by the school, so both
   families are pulled from Google Fonts, which is where they originate:
     Fredoka           — display / all headings
     Plus Jakarta Sans — body, UI, captions
   To self-host later, drop the .woff2 files into assets/fonts/ and replace this
   @import with @font-face blocks pointing at them. */
@import url("https://fonts.googleapis.com/css2?family=Fredoka:wght@300..700&family=Plus+Jakarta+Sans:ital,wght@0,200..800;1,200..800&display=swap");

/* tokens/colors.css */
:root{
  /* --- Base ramps ------------------------------------------------------- */
  /* Green is the only dominant colour of the brand. */
  --green-900:#173125;
  --green-800:#22412F; /* brand dark text */
  --green-700:#1F7A47; /* press / offset shadow */
  --green-600:#268650;
  --green-500:#2F9E5E; /* BRAND GREEN — the single dominant colour */
  --green-400:#59B77E;
  --green-300:#93D3AC;
  --green-200:#C6E9D3;
  --green-100:#E4F4EA;
  --green-050:#F1FAF4;

  /* Cream paper — the page is never pure white. */
  --cream-000:#FFFEFB;
  --cream-050:#FFFDF6; /* brand background */
  --cream-100:#FBF6E9;
  --cream-200:#F1E9D6;

  /* Joy yellow. Celebration only — never a button, never a large field. */
  --yellow-500:#FFC94A;
  --yellow-300:#FFDD8C;
  --yellow-100:#FFF3D4;

  /* Procedural blue. Only for information blocks: schedules, requirements, fees. */
  --blue-500:#4FA8E0;
  --blue-300:#9BCEEE;
  --blue-100:#E4F1FB;

  /* Neutral ink, used sparingly for meta text on cream. */
  --ink-600:#5C6B62;
  --ink-400:#8B9A91;

  /* --- Semantic aliases ------------------------------------------------- */
  --bg-page:var(--cream-050);
  --bg-raised:var(--cream-000);
  --bg-sunken:var(--cream-100);
  --bg-brand:var(--green-500);
  --bg-brand-soft:var(--green-100);
  --bg-joy:var(--yellow-100);
  --bg-info:var(--blue-100);

  --surface-card:var(--cream-000);
  --surface-card-brand:var(--green-500);
  --surface-card-soft:var(--green-050);

  --text-heading:var(--green-800);
  --text-body:var(--green-800);
  --text-muted:var(--ink-600);
  --text-on-brand:var(--cream-050);
  --text-on-joy:var(--green-800);
  --text-link:var(--green-600);
  --text-link-hover:var(--green-800);

  --border-hairline:rgba(34,65,47,.10);
  --border-card:var(--green-800);
  --border-soft:var(--green-200);
  --border-info:var(--blue-300);

  --accent-joy:var(--yellow-500);
  --accent-info:var(--blue-500);

  --focus-ring:var(--green-500);
}

/* tokens/typography.css */
:root{
  --font-display:"Fredoka","Plus Jakarta Sans",system-ui,sans-serif;
  --font-body:"Plus Jakarta Sans",system-ui,-apple-system,sans-serif;

  /* Display — Fredoka. Mobile-first sizes; the -lg pair is the desktop step. */
  --text-hero:2.5rem;        /* 40px  mobile hero */
  --text-hero-lg:4.25rem;    /* 68px  desktop hero */
  --text-h1:2rem;            /* 32px */
  --text-h1-lg:2.875rem;     /* 46px */
  --text-h2:1.5rem;          /* 24px */
  --text-h2-lg:2rem;         /* 32px */
  --text-h3:1.25rem;         /* 20px */
  --text-stat:2.75rem;       /* 44px  the number in the 4-figure strip */
  --text-stat-lg:3.5rem;     /* 56px */

  /* Body — Plus Jakarta Sans */
  --text-lead:1.125rem;      /* 18px  hero paragraph */
  --text-base:1rem;          /* 16px */
  --text-sm:.9375rem;        /* 15px */
  --text-xs:.8125rem;        /* 13px  meta, captions */

  --weight-display:600;      /* Fredoka SemiBold: every heading */
  --weight-display-soft:500;
  --weight-body:400;
  --weight-body-md:500;
  --weight-body-bold:700;

  --leading-display:1.08;
  --leading-heading:1.18;
  --leading-body:1.65;
  --leading-tight:1.4;

  --tracking-display:-.02em;
  --tracking-body:0em;
  /* There is no --tracking-caps: the brand never sets ALL CAPS text. */
}

/* tokens/spacing.css */
:root{
  --space-1:4px;
  --space-2:8px;
  --space-3:12px;
  --space-4:16px;
  --space-5:20px;
  --space-6:24px;
  --space-8:32px;
  --space-10:40px;
  --space-12:48px;
  --space-16:64px;
  --space-20:80px;
  --space-24:96px;

  /* Section rhythm — mobile first, then the desktop step. */
  --section-y:56px;
  --section-y-lg:104px;
  --gutter:20px;
  --gutter-lg:40px;
  --measure:60ch;        /* max width of a paragraph */
  --container:1160px;
  --container-narrow:760px;

  --tap-min:48px;        /* nothing tappable is smaller than this */
}

/* tokens/radius.css */
:root{
  --radius-sm:10px;
  --radius-md:16px;
  --radius-lg:24px;
  --radius-xl:32px;
  --radius-pill:999px;

  /* Organic, leaf-like asymmetry. This is where the playfulness lives —
     alternate -leaf and -leaf-alt down a list so nothing looks stamped. */
  --radius-leaf:40px 12px 40px 12px;
  --radius-leaf-alt:12px 40px 12px 40px;
  --radius-leaf-sm:24px 8px 24px 8px;
  --radius-blob:56px 24px 48px 32px;
  --radius-petal:50% 50% 50% 50% / 60% 60% 40% 40%;
  --radius-photo:48px 48px 16px 48px;  /* the standard photo slot shape */
}

/* tokens/shadow.css */
:root{
  /* Every shadow is green. Never neutral grey, never black. */
  --shadow-solid:4px 4px 0 var(--green-700);        /* buttons, pills */
  --shadow-solid-sm:3px 3px 0 var(--green-700);
  --shadow-solid-lg:7px 7px 0 var(--green-700);     /* cards, big CTAs */
  --shadow-solid-press:1px 1px 0 var(--green-700);  /* pressed state */
  --shadow-solid-ink:5px 5px 0 var(--green-800);    /* on green surfaces */

  --shadow-soft:0 10px 24px -8px rgba(47,158,94,.30);
  --shadow-soft-lg:0 22px 44px -16px rgba(47,158,94,.34);
  --shadow-lift:0 3px 0 var(--green-700),0 14px 28px -14px rgba(47,158,94,.35);

  --border-width:2px;
  --border-width-thick:3px;
}

/* tokens/motion.css */
:root{
  /* Motion budget: ONE orchestrated hero entrance per page load. No
     scroll-reveal, no staggered section fades. Everything else here is
     interaction feedback measured in milliseconds. */
  --ease-bounce:cubic-bezier(.34,1.56,.64,1); /* @kind other */
  --ease-out:cubic-bezier(.22,.85,.35,1); /* @kind other */
  --ease-in-out:cubic-bezier(.5,0,.5,1); /* @kind other */

  --dur-press:90ms; /* @kind other */
  --dur-hover:160ms; /* @kind other */
  --dur-enter:520ms; /* @kind other */
  --stagger-hero:90ms; /* @kind other */   /* delay step between hero elements */
}

/* tokens/base.css */
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg-page);color:var(--text-body);font-family:var(--font-body);font-size:var(--text-base);font-weight:var(--weight-body);line-height:var(--leading-body);-webkit-font-smoothing:antialiased;text-wrap:pretty}
h1,h2,h3,h4{font-family:var(--font-display);font-weight:var(--weight-display);color:var(--text-heading);letter-spacing:var(--tracking-display);line-height:var(--leading-heading);margin:0;text-wrap:balance}
h1{font-size:var(--text-h1)}h2{font-size:var(--text-h2)}h3{font-size:var(--text-h3)}
p{margin:0}
a{color:var(--text-link);text-decoration-color:var(--green-300);text-decoration-thickness:2px;text-underline-offset:3px;transition:color var(--dur-hover) var(--ease-out)}
a:hover{color:var(--text-link-hover);text-decoration-color:var(--green-500)}
:focus-visible{outline:3px solid var(--focus-ring);outline-offset:3px;border-radius:4px}
button,input,select,textarea{font:inherit;color:inherit}
img{max-width:100%;display:block}
::selection{background:var(--yellow-300);color:var(--green-800)}

/* components/components.css */
/* TK Al-Muhajirin component styles. Class-based so real :hover/:active/:focus
   states exist; every value comes from a token. Prefix: tkm- */

.tkm-icon svg{width:100%;height:100%;display:block;stroke-linecap:round;stroke-linejoin:round}

/* ---------- Button ---------- */
.tkm-btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);font-family:var(--font-display);font-weight:var(--weight-display);letter-spacing:-.01em;border-radius:var(--radius-pill);border:var(--border-width) solid transparent;cursor:pointer;text-decoration:none;white-space:nowrap;transition:transform var(--dur-hover) var(--ease-out),box-shadow var(--dur-hover) var(--ease-out),background var(--dur-hover) var(--ease-out)}
.tkm-btn:focus-visible{outline:3px solid var(--focus-ring);outline-offset:3px}
.tkm-btn--sm{min-height:40px;padding:0 var(--space-5);font-size:var(--text-sm)}
.tkm-btn--md{min-height:var(--tap-min);padding:0 var(--space-6);font-size:var(--text-base)}
.tkm-btn--lg{min-height:60px;padding:0 var(--space-8);font-size:var(--text-h3)}
.tkm-btn--primary{background:var(--green-500);color:var(--text-on-brand);border-color:var(--green-700);box-shadow:var(--shadow-solid)}
.tkm-btn--primary:hover{background:var(--green-600);transform:translate(-1px,-1px);box-shadow:5px 5px 0 var(--green-700)}
.tkm-btn--primary:active{transform:translate(3px,3px);box-shadow:var(--shadow-solid-press)}
.tkm-btn--secondary{background:var(--bg-raised);color:var(--green-800);border-color:var(--green-500);box-shadow:4px 4px 0 var(--green-500)}
.tkm-btn--secondary:hover{background:var(--green-050);transform:translate(-1px,-1px);box-shadow:5px 5px 0 var(--green-500)}
.tkm-btn--secondary:active{transform:translate(3px,3px);box-shadow:1px 1px 0 var(--green-500)}
.tkm-btn--ghost{background:transparent;color:var(--green-700);border-color:transparent;box-shadow:none}
.tkm-btn--ghost:hover{background:var(--green-100)}
.tkm-btn--ghost:active{background:var(--green-200)}
.tkm-btn--onbrand{background:var(--cream-050);color:var(--green-700);border-color:var(--green-800);box-shadow:var(--shadow-solid-ink)}
.tkm-btn--onbrand:hover{background:#fff;transform:translate(-1px,-1px);box-shadow:6px 6px 0 var(--green-800)}
.tkm-btn--onbrand:active{transform:translate(3px,3px);box-shadow:1px 1px 0 var(--green-800)}
.tkm-btn--block{display:flex;width:100%}
.tkm-btn[aria-disabled="true"],.tkm-btn:disabled{opacity:.45;box-shadow:none;transform:none;cursor:not-allowed;pointer-events:none}
.tkm-btn__icon{display:inline-flex;width:1.15em;height:1.15em;flex:none}
.tkm-btn__icon svg{width:100%;height:100%;stroke-width:2.4}

/* ---------- IconButton ---------- */
.tkm-iconbtn{display:inline-flex;align-items:center;justify-content:center;width:var(--tap-min);height:var(--tap-min);border-radius:var(--radius-pill);border:var(--border-width) solid var(--green-500);background:var(--bg-raised);color:var(--green-700);cursor:pointer;transition:transform var(--dur-hover) var(--ease-out),box-shadow var(--dur-hover) var(--ease-out),background var(--dur-hover) var(--ease-out)}
.tkm-iconbtn svg{width:22px;height:22px;stroke-width:2.2}
.tkm-iconbtn:hover{background:var(--green-050);transform:translate(-1px,-1px);box-shadow:4px 4px 0 var(--green-500)}
.tkm-iconbtn:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--green-500)}
.tkm-iconbtn--solid{background:var(--green-500);border-color:var(--green-700);color:var(--cream-050)}
.tkm-iconbtn--solid:hover{background:var(--green-600);box-shadow:4px 4px 0 var(--green-700)}
.tkm-iconbtn--bare{border-color:transparent;background:transparent;box-shadow:none}
.tkm-iconbtn--bare:hover{background:var(--green-100);box-shadow:none;transform:none}
.tkm-iconbtn--sm{width:40px;height:40px}
.tkm-iconbtn--sm svg{width:18px;height:18px}

/* ---------- Badge / Tag ---------- */
.tkm-badge{display:inline-flex;align-items:center;gap:6px;font-family:var(--font-body);font-weight:var(--weight-body-md);font-size:var(--text-xs);line-height:1;padding:7px 12px;border-radius:var(--radius-pill)}
.tkm-badge--green{background:var(--green-100);color:var(--green-700)}
.tkm-badge--joy{background:var(--yellow-100);color:var(--green-800)}
.tkm-badge--info{background:var(--blue-100);color:#1F6EA5}
.tkm-badge--solid{background:var(--green-500);color:var(--cream-050)}
.tkm-badge__dot{width:7px;height:7px;border-radius:var(--radius-pill);background:currentColor;flex:none}

.tkm-tag{display:inline-flex;align-items:center;gap:var(--space-2);font-size:var(--text-sm);font-weight:var(--weight-body-md);padding:9px 16px;border-radius:var(--radius-pill);border:2px solid var(--border-soft);background:var(--bg-raised);color:var(--green-800);cursor:pointer;transition:all var(--dur-hover) var(--ease-out)}
.tkm-tag:hover{border-color:var(--green-400);background:var(--green-050)}
.tkm-tag[aria-pressed="true"]{background:var(--green-500);border-color:var(--green-700);color:var(--cream-050)}
.tkm-tag--static{cursor:default}

/* ---------- Card ---------- */
.tkm-card{position:relative;background:var(--surface-card);border:var(--border-width) solid var(--border-card);padding:var(--space-6)}
.tkm-card--leaf{border-radius:var(--radius-leaf)}
.tkm-card--leafAlt{border-radius:var(--radius-leaf-alt)}
.tkm-card--round{border-radius:var(--radius-lg)}
.tkm-card--solid{box-shadow:var(--shadow-solid-lg)}
.tkm-card--soft{border-color:var(--border-hairline);box-shadow:var(--shadow-soft)}
.tkm-card--flat{box-shadow:none}
.tkm-card--brand{background:var(--green-500);color:var(--text-on-brand);border-color:var(--green-800)}
.tkm-card--brand h1,.tkm-card--brand h2,.tkm-card--brand h3{color:var(--text-on-brand)}
.tkm-card--tint{background:var(--green-050)}
.tkm-card--info{background:var(--bg-info);border-color:var(--border-info);box-shadow:5px 5px 0 var(--blue-300)}
.tkm-card--interactive{cursor:pointer;transition:transform var(--dur-hover) var(--ease-out),box-shadow var(--dur-hover) var(--ease-out)}
.tkm-card--interactive:hover{transform:translate(-2px,-2px);box-shadow:9px 9px 0 var(--green-700)}
.tkm-card--interactive:active{transform:translate(1px,1px);box-shadow:4px 4px 0 var(--green-700)}

/* ---------- SectionHeading ---------- */
.tkm-secheading{display:flex;flex-direction:column;gap:var(--space-3);max-width:var(--container-narrow)}
.tkm-secheading--center{align-items:center;text-align:center;margin-inline:auto}
.tkm-secheading__title{font-family:var(--font-display);font-weight:var(--weight-display);font-size:var(--text-h1);line-height:var(--leading-heading);letter-spacing:var(--tracking-display);color:var(--text-heading);margin:0}
.tkm-secheading--lg .tkm-secheading__title{font-size:var(--text-h1-lg)}
.tkm-secheading__body{font-size:var(--text-lead);line-height:var(--leading-body);color:var(--text-muted);margin:0;max-width:var(--measure)}
.tkm-secheading--onbrand .tkm-secheading__title{color:var(--text-on-brand)}
.tkm-secheading--onbrand .tkm-secheading__body{color:rgba(255,253,246,.82)}

/* ---------- Forms ---------- */
.tkm-field{display:flex;flex-direction:column;gap:var(--space-2)}
.tkm-field__label{font-size:var(--text-sm);font-weight:var(--weight-body-md);color:var(--green-800)}
.tkm-field__hint{font-size:var(--text-xs);color:var(--text-muted)}
.tkm-field__error{font-size:var(--text-xs);color:#B4462F;font-weight:var(--weight-body-md)}
.tkm-input,.tkm-select{width:100%;box-sizing:border-box;min-height:var(--tap-min);padding:0 var(--space-4);background:var(--bg-raised);border:2px solid var(--border-soft);border-radius:var(--radius-md);font-size:var(--text-base);color:var(--green-800);transition:border-color var(--dur-hover) var(--ease-out),box-shadow var(--dur-hover) var(--ease-out)}
.tkm-input::placeholder{color:var(--ink-400)}
.tkm-input:hover,.tkm-select:hover{border-color:var(--green-400)}
.tkm-input:focus,.tkm-select:focus{outline:none;border-color:var(--green-500);box-shadow:0 0 0 4px var(--green-100)}
.tkm-input--textarea{min-height:120px;padding:var(--space-3) var(--space-4);line-height:var(--leading-body);resize:vertical}
.tkm-input--invalid{border-color:#D2694F}
.tkm-select{appearance:none;padding-right:var(--space-10);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232F9E5E' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 16px center;background-size:18px}
.tkm-check{display:flex;align-items:flex-start;gap:var(--space-3);min-height:var(--tap-min);cursor:pointer;font-size:var(--text-base);color:var(--green-800)}
.tkm-check__box{flex:none;width:26px;height:26px;margin-top:1px;display:grid;place-items:center;border:2px solid var(--green-400);background:var(--bg-raised);border-radius:8px;transition:all var(--dur-press) var(--ease-out)}
.tkm-check__box svg{width:16px;height:16px;opacity:0;color:var(--cream-050)}
.tkm-check--radio .tkm-check__box{border-radius:var(--radius-pill)}
.tkm-check--radio .tkm-check__box span{width:10px;height:10px;border-radius:var(--radius-pill);background:var(--cream-050);opacity:0;transition:opacity var(--dur-press) var(--ease-out)}
.tkm-check input{position:absolute;opacity:0;width:0;height:0}
.tkm-check input:checked+.tkm-check__box{background:var(--green-500);border-color:var(--green-700)}
.tkm-check input:checked+.tkm-check__box svg,.tkm-check input:checked+.tkm-check__box span{opacity:1}
.tkm-check:hover .tkm-check__box{border-color:var(--green-600)}
.tkm-check input:focus-visible+.tkm-check__box{outline:3px solid var(--focus-ring);outline-offset:3px}
.tkm-switch{display:inline-flex;align-items:center;gap:var(--space-3);min-height:var(--tap-min);cursor:pointer;font-size:var(--text-base);color:var(--green-800)}
.tkm-switch__track{position:relative;flex:none;width:52px;height:30px;border-radius:var(--radius-pill);background:var(--green-200);border:2px solid var(--green-300);transition:all var(--dur-hover) var(--ease-out)}
.tkm-switch__knob{position:absolute;top:2px;left:2px;width:22px;height:22px;border-radius:var(--radius-pill);background:var(--cream-000);box-shadow:0 2px 0 rgba(34,65,47,.18);transition:transform var(--dur-hover) var(--ease-bounce)}
.tkm-switch input{position:absolute;opacity:0;width:0;height:0}
.tkm-switch input:checked+.tkm-switch__track{background:var(--green-500);border-color:var(--green-700)}
.tkm-switch input:checked+.tkm-switch__track .tkm-switch__knob{transform:translateX(22px)}
.tkm-switch input:focus-visible+.tkm-switch__track{outline:3px solid var(--focus-ring);outline-offset:3px}

/* ---------- NavBar ---------- */
.tkm-nav{position:relative;display:flex;align-items:center;justify-content:space-between;gap:var(--space-4);padding:var(--space-3) var(--gutter);background:rgba(255,253,246,.92);backdrop-filter:blur(10px);border-bottom:2px solid var(--green-100)}
.tkm-nav__links{display:none;align-items:center;gap:var(--space-2)}
.tkm-nav__link{font-family:var(--font-body);font-weight:var(--weight-body-md);font-size:var(--text-sm);color:var(--green-800);text-decoration:none;padding:10px 14px;border-radius:var(--radius-pill);transition:background var(--dur-hover) var(--ease-out)}
.tkm-nav__link:hover{background:var(--green-100);color:var(--green-800)}
.tkm-nav__link[aria-current="page"]{background:var(--green-500);color:var(--cream-050)}
.tkm-nav__sheet{display:flex;flex-direction:column;gap:var(--space-1);padding:var(--space-4) var(--gutter) var(--space-6);background:var(--bg-page);border-bottom:2px solid var(--green-100)}
.tkm-nav__sheet .tkm-nav__link{font-size:var(--text-base);padding:14px 16px}
@media(min-width:900px){.tkm-nav{padding:var(--space-4) var(--gutter-lg)}.tkm-nav__links{display:flex}.tkm-nav__burger{display:none!important}}

/* ---------- Tabs ---------- */
.tkm-tabs{display:inline-flex;gap:var(--space-1);padding:6px;background:var(--green-100);border-radius:var(--radius-pill)}
.tkm-tabs__tab{font-family:var(--font-display);font-weight:var(--weight-display-soft);font-size:var(--text-sm);min-height:40px;padding:0 var(--space-5);border:none;background:transparent;color:var(--green-700);border-radius:var(--radius-pill);cursor:pointer;transition:all var(--dur-hover) var(--ease-out)}
.tkm-tabs__tab:hover{background:var(--green-200)}
.tkm-tabs__tab[aria-selected="true"]{background:var(--green-500);color:var(--cream-050);box-shadow:var(--shadow-solid-sm)}

/* ---------- Footer ---------- */
.tkm-footer{background:var(--green-800);color:rgba(255,253,246,.78);padding:var(--space-16) var(--gutter) var(--space-8)}
.tkm-footer h3{color:var(--cream-050);font-size:var(--text-h3);margin-bottom:var(--space-3)}
.tkm-footer a{color:rgba(255,253,246,.78);text-decoration:none}
.tkm-footer a:hover{color:var(--yellow-500)}
.tkm-footer__grid{display:grid;gap:var(--space-10);max-width:var(--container);margin-inline:auto}
.tkm-footer__base{max-width:var(--container);margin:var(--space-12) auto 0;padding-top:var(--space-6);border-top:1px solid rgba(255,253,246,.16);font-size:var(--text-xs);display:flex;flex-wrap:wrap;gap:var(--space-3);justify-content:space-between}
@media(min-width:900px){.tkm-footer{padding:var(--space-20) var(--gutter-lg) var(--space-10)}.tkm-footer__grid{grid-template-columns:1.4fr 1fr 1fr}}

/* ---------- Dialog ---------- */
.tkm-dialog__scrim{position:fixed;inset:0;background:rgba(23,49,37,.55);backdrop-filter:blur(3px);display:grid;place-items:center;padding:var(--gutter);z-index:60}
.tkm-dialog{width:100%;max-width:460px;box-sizing:border-box;background:var(--surface-card);border:var(--border-width) solid var(--border-card);border-radius:var(--radius-leaf);box-shadow:var(--shadow-solid-lg);padding:var(--space-8) var(--space-6) var(--space-6);position:relative}
.tkm-dialog__close{position:absolute;top:12px;right:12px}
.tkm-dialog__title{font-family:var(--font-display);font-weight:var(--weight-display);font-size:var(--text-h2);color:var(--text-heading);margin:0 0 var(--space-3)}
.tkm-dialog__actions{display:flex;flex-wrap:wrap;gap:var(--space-3);margin-top:var(--space-6)}

/* ---------- Brand: hills, photo slots, stats, info, timeline ---------- */
.tkm-hill{display:block;width:100%;height:auto;line-height:0}
.tkm-photo{position:relative;overflow:hidden;background:var(--green-100);border-radius:var(--radius-photo);display:grid;place-items:center;isolation:isolate}
.tkm-photo--leaf{border-radius:var(--radius-leaf)}
.tkm-photo--leafAlt{border-radius:var(--radius-leaf-alt)}
.tkm-photo--petal{border-radius:var(--radius-petal)}
.tkm-photo--circle{border-radius:var(--radius-pill)}
.tkm-photo--round{border-radius:var(--radius-lg)}
.tkm-photo--framed{border:var(--border-width) solid var(--border-card);box-shadow:var(--shadow-solid-lg)}
.tkm-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.tkm-photo__ph{display:flex;flex-direction:column;align-items:center;gap:8px;padding:var(--space-5);text-align:center;color:var(--green-600);font-size:var(--text-xs);font-weight:var(--weight-body-md);background-image:repeating-linear-gradient(135deg,rgba(47,158,94,.10) 0 10px,transparent 10px 20px);width:100%;height:100%;justify-content:center;box-sizing:border-box}
.tkm-photo__ph svg{width:26px;height:26px;opacity:.75}

.tkm-stat{display:flex;flex-direction:column;gap:2px;align-items:center;text-align:center}
.tkm-stat__num{font-family:var(--font-display);font-weight:var(--weight-display);font-size:var(--text-stat);line-height:1;color:var(--green-500);letter-spacing:-.03em}
.tkm-stat--onbrand .tkm-stat__num{color:var(--cream-050)}
.tkm-stat--joy .tkm-stat__num{color:var(--yellow-500)}
.tkm-stat__label{font-size:var(--text-sm);color:var(--text-muted);line-height:var(--leading-tight)}
.tkm-stat--onbrand .tkm-stat__label{color:rgba(255,253,246,.85)}

.tkm-info{display:flex;gap:var(--space-4);background:var(--bg-info);border:2px solid var(--border-info);border-radius:var(--radius-lg);padding:var(--space-5)}
.tkm-info__icon{flex:none;width:40px;height:40px;border-radius:var(--radius-pill);background:var(--blue-500);color:#fff;display:grid;place-items:center}
.tkm-info__icon svg{width:22px;height:22px;stroke-width:2.4}
.tkm-info__title{font-family:var(--font-display);font-weight:var(--weight-display);font-size:var(--text-h3);color:#164E75;margin:0 0 4px}
.tkm-info__body{font-size:var(--text-sm);color:#1F5E8A;line-height:var(--leading-body)}
.tkm-info__body ul{margin:0;padding-left:1.1em}

.tkm-step{display:grid;grid-template-columns:auto 1fr;gap:var(--space-4);position:relative;padding-bottom:var(--space-6)}
.tkm-step:last-child{padding-bottom:0}
.tkm-step__rail{display:flex;flex-direction:column;align-items:center;gap:6px}
.tkm-step__dot{width:44px;height:44px;flex:none;border-radius:var(--radius-pill);background:var(--green-500);color:var(--cream-050);border:2px solid var(--green-700);display:grid;place-items:center;font-family:var(--font-display);font-weight:var(--weight-display);font-size:var(--text-sm)}
.tkm-step--joy .tkm-step__dot{background:var(--yellow-500);border-color:#D9A32E;color:var(--green-800)}
.tkm-step__line{flex:1;width:3px;border-radius:2px;background:var(--green-200);min-height:16px}
.tkm-step:last-child .tkm-step__line{display:none}
.tkm-step__time{font-family:var(--font-display);font-weight:var(--weight-display);font-size:var(--text-sm);color:var(--green-600)}
.tkm-step__title{font-family:var(--font-display);font-weight:var(--weight-display);font-size:var(--text-h3);color:var(--text-heading);margin:2px 0 4px}
.tkm-step__body{font-size:var(--text-sm);color:var(--text-muted)}

.tkm-quote{background:var(--surface-card);border:2px solid var(--border-card);border-radius:var(--radius-leaf-alt);box-shadow:var(--shadow-solid-lg);padding:var(--space-6);display:flex;flex-direction:column;gap:var(--space-5)}
.tkm-quote__mark{font-family:var(--font-display);font-size:2.5rem;line-height:.7;color:var(--yellow-500)}
.tkm-quote__text{font-size:var(--text-base);line-height:var(--leading-body);color:var(--green-800)}
.tkm-quote__who{display:flex;align-items:center;gap:var(--space-3)}
.tkm-quote__name{font-family:var(--font-display);font-weight:var(--weight-display);font-size:var(--text-sm);color:var(--text-heading)}
.tkm-quote__meta{font-size:var(--text-xs);color:var(--text-muted)}

.tkm-profile{display:flex;flex-direction:column;gap:var(--space-4);align-items:center;text-align:center;background:var(--surface-card);border:2px solid var(--border-card);border-radius:var(--radius-leaf);box-shadow:var(--shadow-solid-lg);padding:var(--space-6)}
.tkm-profile__name{font-family:var(--font-display);font-weight:var(--weight-display);font-size:var(--text-h3);color:var(--text-heading)}
.tkm-profile__role{font-size:var(--text-sm);color:var(--text-muted)}

.tkm-level{display:flex;flex-direction:column;gap:var(--space-4);padding:var(--space-6);border:2px solid var(--border-card);background:var(--surface-card);border-radius:var(--radius-leaf);box-shadow:var(--shadow-solid-lg);transition:transform var(--dur-hover) var(--ease-out),box-shadow var(--dur-hover) var(--ease-out)}
.tkm-level:hover{transform:translate(-2px,-2px);box-shadow:9px 9px 0 var(--green-700)}
.tkm-level--alt{border-radius:var(--radius-leaf-alt)}
.tkm-level--brand{background:var(--green-500);border-color:var(--green-800);box-shadow:7px 7px 0 var(--green-800)}
.tkm-level--brand:hover{box-shadow:9px 9px 0 var(--green-800)}
.tkm-level__age{font-size:var(--text-sm);color:var(--text-muted)}
.tkm-level__name{font-family:var(--font-display);font-weight:var(--weight-display);font-size:var(--text-h2);color:var(--text-heading);margin:0}
.tkm-level__list{display:flex;flex-direction:column;gap:var(--space-2);font-size:var(--text-sm);color:var(--green-800);margin:0;padding:0;list-style:none}
.tkm-level__list li{display:flex;gap:var(--space-2);align-items:flex-start}
.tkm-level__list svg{width:18px;height:18px;flex:none;margin-top:3px;color:var(--green-500);stroke-width:2.6}
.tkm-level--brand .tkm-level__name,.tkm-level--brand .tkm-level__list{color:var(--text-on-brand)}
.tkm-level--brand .tkm-level__age{color:rgba(255,253,246,.8)}
.tkm-level--brand .tkm-level__list svg{color:var(--yellow-500)}

/* ---------- Hero entrance: the one orchestrated moment ---------- */
@keyframes tkm-rise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@keyframes tkm-pop{from{opacity:0;transform:scale(.9) rotate(-3deg)}to{opacity:1;transform:none}}
.tkm-enter{animation:tkm-rise var(--dur-enter) var(--ease-out) both}
.tkm-enter--pop{animation:tkm-pop var(--dur-enter) var(--ease-bounce) both}
@media(prefers-reduced-motion:reduce){.tkm-enter,.tkm-enter--pop{animation:none}}