html, body { margin: 0; height: 100%; }
#kit-scroll { height: 100vh; overflow-y: auto; overflow-x: hidden; background: var(--surface-page); scroll-behavior: smooth; }

/* Long single words (e.g. a heading's last word) must wrap rather than
   force the page wider than the viewport, which a rigid grid column or a
   fixed heading size can't otherwise prevent on narrow screens. */
h1, h2, h3, h4, p, blockquote { overflow-wrap: break-word; word-break: break-word; }

/* ============================================================
   Responsive layout
   Every multi-column section below is built as a CSS grid whose column
   ratio is supplied per-instance via the --grid-cols custom property
   (set inline, since these grids differ per section); this stylesheet
   only owns the responsive collapse.
   ============================================================ */
.responsive-grid, .stat-grid { grid-template-columns: var(--grid-cols); }
@media (max-width: 820px) {
  /* Two-column content grids (image+text pairs, etc.) — stack to one column. */
  .responsive-grid { grid-template-columns: 1fr !important; }
  /* A sticky side-image only makes sense next to a column it can float
     alongside; once stacked it should scroll normally like everything else.
     `relative`, not `static` — this element positions absolute children
     (the image's overlay + caption), which need it to stay a positioning
     context or they'd escape to the nearest positioned ancestor instead. */
  .sticky-until-mobile { position: relative !important; top: auto !important; }
}
/* Stat bands (3-4 numbers in a row) — roomier on a small screen at 2-up
   before dropping to 1-up, since a single stat alone reads as very sparse. */
@media (max-width: 720px) {
  .stat-grid { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 440px) {
  .stat-grid { grid-template-columns: 1fr !important; }
}

/* Michigan-page program-track rows (number | title | description) — the
   description column has no room left once the screen is this narrow, so
   switch to two rows: number+title, then description below full-width. */
@media (max-width: 640px) {
  .track-row {
    grid-template-columns: auto 1fr !important;
    grid-template-areas: "num title" "desc desc" !important;
    row-gap: 6px !important;
  }
  .track-row .track-num { grid-area: num; }
  .track-row .track-title { grid-area: title; }
  .track-row .track-desc { grid-area: desc; }
}

/* ---- Header: hamburger nav below 820px ---- */
@media (max-width: 820px) {
  .aatmic-nav-desktop { display: none !important; }
  .aatmic-nav-toggle { display: inline-flex !important; }
}
.aatmic-mobile-panel { display: none; }
@media (max-width: 820px) {
  .aatmic-mobile-panel.open { display: block; }
}

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

/* Hero slow zoom */
@keyframes heroZoom { from { transform: scale(1.08); } to { transform: scale(1); } }

/* Cinematic hero lotus glow */
@keyframes lotusGlow { 0%, 100% { filter: drop-shadow(0 0 22px rgba(234,195,121,0.32)); } 50% { filter: drop-shadow(0 0 42px rgba(234,195,121,0.62)); } }
.hero-lotus { animation: lotusGlow 4.5s var(--ease-in-out) infinite; }

/* Partner logos — full colour, gentle hover lift */
.partner-logo { transition: transform .35s var(--ease-out), filter .35s var(--ease-out); }
.partner-logo:hover { transform: translateY(-4px); filter: drop-shadow(0 6px 14px rgba(71,6,22,0.16)); }

/* Micro-interactions */
a, button { transition: color .2s var(--ease-standard); }
button:active { transform: translateY(1px); }
[aria-label="Previous photo"]:hover, [aria-label="Next photo"]:hover { background: rgba(31,27,24,.55) !important; }
[aria-label="Previous testimonial"]:hover, [aria-label="Next testimonial"]:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); background: var(--crimson-50) !important; }

/* Custom circular cursor */
.aatmic-cursor-dot, .aatmic-cursor-ring { position: fixed; top: 0; left: 0; border-radius: 999px; pointer-events: none; z-index: 9999; opacity: 0; transition: opacity .3s; }
body.cursor-on .aatmic-cursor-dot, body.cursor-on .aatmic-cursor-ring { opacity: 1; }
.aatmic-cursor-dot { width: 7px; height: 7px; margin: -3.5px 0 0 -3.5px; background: var(--crimson-600); }
.aatmic-cursor-ring { width: 34px; height: 34px; margin: -17px 0 0 -17px; border: 1.5px solid var(--gold-500); transition: opacity .3s, width .25s var(--ease-out), height .25s var(--ease-out), margin .25s var(--ease-out), background .25s, border-color .25s; }
.aatmic-cursor-ring[data-hover="1"] { width: 52px; height: 52px; margin: -26px 0 0 -26px; background: color-mix(in srgb, var(--gold-400) 18%, transparent); border-color: var(--gold-400); }
.aatmic-cursor-ring[data-down="1"] { width: 26px; height: 26px; margin: -13px 0 0 -13px; }
@media (pointer: fine) { body.cursor-on, body.cursor-on a, body.cursor-on button, body.cursor-on [role="button"] { cursor: none; } }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; } [style*="heroZoom"] { animation: none !important; } }