/* =====================================================
   Future Inventors — style.css
   futureinventors.ca

   One stylesheet, three pages, two personalities.

   THEMES
   ------
   Every page sets a theme class on <body>:

     .theme-pro   index.html, schools.html
                  Restrained. Nunito headings, soft shadows,
                  2px borders, yellow as accent only.

     .theme-play  tutoring.html
                  The original look. Fredoka One, 3px black
                  borders, hard offset shadows, emoji, yellow
                  floods.

   Themes are implemented by re-pointing custom properties on
   the body class — the components below are written once and
   inherit whichever set is active. Only a handful of rules
   need explicit theme scoping.

   Table of Contents:
    1. Variables & Reset
    2. Theme layers
    3. Typography
    4. Layout utilities & buttons
    5. Navigation
    6. Hero
    7. Home page
    8. Schools page
    9. Tutoring page
   10. Code Lab
   11. Shared blocks (why 1-on-1, contact, form)
   12. Footer
   13. Animations
   14. Responsive
====================================================== */


/* =====================================================
   1. VARIABLES & RESET
====================================================== */
:root {
  --yellow:      #FFE135;
  --yellow-soft: #FFF4B8;
  --black:       #0F0F0F;
  --red:         #FF4D4D;
  --red-dark:    #e03a3a;
  --blue:        #3ECFFF;
  --white:       #FFFFFF;
  --off-white:   #FAFAF7;
  --grey-light:  #F0F0EC;
  --grey:        #C0C0B8;
  --text:        #1a1a1a;
  --text-muted:  #55554E;
  --green:       #4ade80;

  /* --font-brand never changes: the wordmark is Fredoka One on
     every page so the logo reads the same site-wide. */
  --font-brand:   'Fredoka One', cursive;
  --font-display: 'Fredoka One', cursive;
  --font-body:    'Nunito', sans-serif;
  --font-mono:    ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace;

  --border:     3px solid var(--black);
  --border-thin: 2px solid var(--black);
  --radius-sm:  8px;
  --radius-md:  14px;
  --radius-lg:  22px;
  --radius-xl:  36px;
  --shadow:     5px 5px 0 var(--black);
  --shadow-lg:  8px 8px 0 var(--black);

  --transition: 0.2s cubic-bezier(0.4, 0, 0.2, 1);

  /* Fixed navbar: 96px of content plus its 3px bottom border.
     The height is set by the logo, which is the tallest thing
     in the bar. Anything sitting directly beneath it offsets
     by this; the mobile query below overrides both together. */
  --nav-h: 99px;

  /* Height of the opening banner. Shared by the photo carousel
     (index, schools) and the tutoring hero so all three pages
     open at exactly the same size; the responsive block
     re-points it rather than each hero carrying its own rule.

     Deliberately a flat length, not a vh clamp: with vh in the
     mix, zooming changes which end of the clamp wins and the
     banners drift apart at some zoom levels but not others. */
  --hero-h: 44rem;

  --space-xs:  0.5rem;
  --space-sm:  1rem;
  --space-md:  1.75rem;
  --space-lg:  2.5rem;
  --space-xl:  4.5rem;
  --space-2xl: 7rem;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; font-size: 16px; scroll-padding-top: calc(var(--nav-h) + 16px); }

body {
  font-family: var(--font-body);
  color: var(--text);
  background: var(--off-white);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }
button { border: none; background: none; font-family: inherit; }
input, textarea, select { font-family: inherit; }

:focus-visible {
  outline: 3px solid var(--red);
  outline-offset: 2px;
}

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 999;
  background: var(--yellow); color: var(--black);
  font-weight: 800; padding: 12px 20px;
  border: var(--border);
}
.skip-link:focus { left: 8px; top: 8px; }


/* =====================================================
   2. THEME LAYERS
====================================================== */

/* ---- PRO: index.html, schools.html ---- */
.theme-pro {
  --font-display: 'Nunito', sans-serif;
  --border:      2px solid var(--black);
  --border-thin: 1px solid rgba(15,15,15,0.14);
  --shadow:      0 2px 10px rgba(15,15,15,0.07);
  --shadow-lg:   0 8px 26px rgba(15,15,15,0.12);
  --radius-sm:   6px;
  --radius-md:   10px;
  --radius-lg:   14px;
  --radius-xl:   18px;
}
.theme-pro h1,
.theme-pro h2,
.theme-pro h3 {
  font-weight: 900;
  letter-spacing: -0.022em;
  line-height: 1.12;
}
.theme-pro h1 { font-size: clamp(2.3rem, 4.6vw, 3.7rem); }
.theme-pro h2 { font-size: clamp(1.75rem, 3vw, 2.5rem); }
.theme-pro h3 { font-size: clamp(1.15rem, 1.8vw, 1.4rem); }

/* Pro buttons: solid, no offset shadow, subtle lift */
.theme-pro .btn { padding: 0.85rem 1.6rem; }
.theme-pro .btn-primary:hover  { transform: translateY(-2px); box-shadow: var(--shadow-lg); }
.theme-pro .btn-primary:active { transform: translateY(0);    box-shadow: var(--shadow); }
.theme-pro .btn-outline        { background: var(--white); }
.theme-pro .btn-outline:hover  { transform: translateY(-2px); background: var(--white); box-shadow: var(--shadow-lg); }

.theme-pro .section-label {
  background: transparent;
  border: none;
  box-shadow: none;
  padding: 0 0 0 14px;
  border-left: 4px solid var(--yellow);
  border-radius: 0;
  color: var(--text-muted);
}
.theme-pro .chip {
  box-shadow: none;
  border: 1px solid rgba(15,15,15,0.16);
  background: var(--white);
  font-weight: 600;
}
.theme-pro .chip:hover { transform: none; box-shadow: var(--shadow); }

/* ---- PLAY: tutoring.html ---- */
/* Uses the :root defaults as-is; nothing to override. */


/* =====================================================
   3. TYPOGRAPHY
====================================================== */
h1, h2, h3 {
  font-family: var(--font-display);
  color: var(--black);
  line-height: 1.1;
  letter-spacing: 0.01em;
}
h1 { font-size: clamp(2.6rem, 6vw,   4.8rem); }
h2 { font-size: clamp(2rem,   4vw,   3.2rem); }
h3 { font-size: clamp(1.4rem, 2.5vw, 1.9rem); }

p { max-width: 60ch; }

em { font-style: normal; color: var(--red); font-weight: 800; }

.section-label {
  display: inline-block;
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--black);
  background: var(--yellow);
  border: 2px solid var(--black);
  padding: 4px 12px;
  border-radius: 99px;
  margin-bottom: var(--space-sm);
  box-shadow: 3px 3px 0 var(--black);
}

.section-header { text-align: center; margin-bottom: var(--space-xl); }
.section-header h2 { margin-bottom: var(--space-sm); }
.section-intro {
  max-width: 52ch;
  margin-inline: auto;
  color: var(--text-muted);
  font-size: 1.05rem;
  font-weight: 600;
}
.section-header .section-label { margin-inline: auto; }
/* Quieter than .section-intro: a disclosure under the intro, not a
   second paragraph competing with it. */
.section-note {
  max-width: 52ch;
  margin: var(--space-sm) auto 0;
  color: var(--text-muted);
  font-size: 0.85rem;
  font-weight: 600;
  opacity: 0.85;
}

/* Unverified content marker — deliberately loud so it cannot
   be published by accident. See the TODO sweep in the README
   of the plan: grep -rn "TODO" *.html before uploading. */
.todo {
  font-family: var(--font-mono);
  font-size: 0.78em;
  font-weight: 700;
  background: #FF00A8;
  color: #FFFFFF;
  padding: 1px 6px;
  border-radius: 4px;
  white-space: nowrap;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}


/* =====================================================
   4. LAYOUT UTILITIES & BUTTONS
====================================================== */
.container {
  width: 100%;
  max-width: 1140px;
  margin-inline: auto;
  padding-inline: clamp(1.2rem, 4vw, 2.5rem);
}
.container--narrow { max-width: 880px; }

.section        { padding: var(--space-2xl) 0; }
.section--light { background: var(--off-white); }
.section--white { background: var(--white); }
.section--dark  { background: var(--black); }

/* Hairlines between the pale pro sections so the page reads as
   deliberate bands rather than one undifferentiated wash. */
.theme-pro .section--light,
.theme-pro .section--white { border-bottom: 1px solid rgba(15,15,15,0.10); }

.section--dark h2,
.section--dark h3 { color: var(--white); }
.section--dark .section-intro { color: rgba(255,255,255,0.6); }
.section--dark .section-note  { color: rgba(255,255,255,0.45); }
.section--dark .section-label { color: rgba(255,255,255,0.65); }
.theme-pro .section--dark .section-label { border-left-color: var(--yellow); }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  padding: 0.9rem 1.8rem;
  border-radius: var(--radius-md);
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 800;
  border: var(--border);
  transition: transform var(--transition), box-shadow var(--transition), background var(--transition);
  white-space: nowrap;
  cursor: pointer;
}
.btn-primary {
  background: var(--red);
  color: var(--white);
  box-shadow: var(--shadow);
}
.btn-primary:hover  { transform: translate(-3px,-3px); box-shadow: var(--shadow-lg); }
.btn-primary:active { transform: translate(2px,2px);   box-shadow: 2px 2px 0 var(--black); }

.btn-outline {
  background: transparent;
  color: var(--black);
  box-shadow: var(--shadow);
}
.btn-outline:hover { transform: translate(-3px,-3px); box-shadow: var(--shadow-lg); background: var(--yellow); }

.btn-dark {
  background: var(--black);
  color: var(--white);
  border-color: var(--black);
  box-shadow: var(--shadow);
}
.btn-dark:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); }

.btn-full { width: 100%; }

/* Inline text link with a moving arrow */
.arrow-link {
  display: inline-flex; align-items: center; gap: 0.35rem;
  font-weight: 800; font-size: 0.95rem; color: var(--red);
  transition: gap var(--transition);
}
.arrow-link:hover { gap: 0.65rem; }


/* =====================================================
   5. NAVIGATION
====================================================== */
.navbar {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 200;
  /* Definite, so the bar is --nav-h tall on every page no
     matter what it contains. Border-box, so the 3px border
     below is part of that number and matches --nav-h exactly. */
  height: var(--nav-h);
  background: var(--black);
  border-bottom: 3px solid var(--yellow);
  transition: box-shadow var(--transition);
}
.navbar.scrolled { box-shadow: 0 4px 18px rgba(0,0,0,0.28); }

.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: calc(var(--nav-h) - 3px);
}

/* The logo is one image and nothing else. It used to sit beside
   a text wordmark that main.js hid once the file loaded, which
   meant the bar rendered one way with JS and the image cached
   and another way without — the reason it looked like a
   different size from page to page. Nothing here depends on
   JavaScript or on load order now. The <img> carries width and
   height attributes so its box is reserved before the file
   arrives, and a real alt so a missing file degrades to the
   name rather than to nothing. */
.logo {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}
.logo-img {
  height: 72px;
  width: auto;
  flex-shrink: 0;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: var(--space-lg);
}
.nav-links a {
  font-size: 0.92rem;
  font-weight: 800;
  color: rgba(255,255,255,0.7);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  transition: color var(--transition);
}
.nav-links a:hover { color: var(--yellow); }
.nav-links a[aria-current="page"] { color: var(--yellow); }
.nav-links a[aria-current="page"]:not(.nav-cta)::after {
  content: '';
  display: block;
  height: 3px;
  background: var(--yellow);
  margin-top: 3px;
  border-radius: 2px;
}

.nav-cta {
  background: var(--red) !important;
  color: var(--white) !important;
  padding: 0.55rem 1.2rem;
  border-radius: var(--radius-sm);
  border: 2px solid rgba(255,255,255,0.25);
  transition: background var(--transition);
}
.nav-cta:hover { background: var(--red-dark) !important; }

.hamburger { display: none; flex-direction: column; gap: 5px; padding: 6px; cursor: pointer; }
.hamburger span {
  display: block; width: 24px; height: 3px;
  background: var(--white); border-radius: 2px;
  transition: var(--transition);
}

.mobile-menu {
  display: none; flex-direction: column;
  background: var(--black);
  border-top: 2px solid rgba(255,255,255,0.1);
  padding: var(--space-sm) var(--space-md) var(--space-md);
}
.mobile-menu.open { display: flex; }
.mobile-menu ul { display: flex; flex-direction: column; gap: var(--space-sm); }
.mobile-link {
  font-size: 1.05rem; font-weight: 800;
  color: rgba(255,255,255,0.75);
  text-transform: uppercase; letter-spacing: 0.05em;
}
.mobile-link:hover { color: var(--yellow); }
.mobile-link[aria-current="page"] { color: var(--yellow); }
.mobile-cta {
  display: inline-block;
  background: var(--red); color: var(--white) !important;
  padding: 0.65rem 1.2rem;
  border-radius: var(--radius-sm);
  border: 2px solid rgba(255,255,255,0.2);
  margin-top: 0.25rem;
}


/* =====================================================
   6. HERO
====================================================== */
.hero {
  position: relative;
  background: var(--yellow);
  display: flex;
  align-items: center;
  padding-top: var(--nav-h);
  overflow: hidden;
  border-bottom: 4px solid var(--black);
}

.hero-grid {
  position: absolute; inset: 0;
  background-image: radial-gradient(circle, rgba(0,0,0,0.15) 1.5px, transparent 0);
  background-size: 28px 28px;
  pointer-events: none;
}

.starburst {
  position: absolute;
  font-family: var(--font-brand);
  color: rgba(0,0,0,0.10);
  pointer-events: none;
  user-select: none;
  line-height: 1;
}
.sb-1 { font-size: 200px; top: -20px;  right: -20px; animation: spin 25s linear infinite; }
.sb-2 { font-size: 100px; bottom: 80px; left: 30px;  animation: spin 18s linear infinite reverse; }
@keyframes spin { to { transform: rotate(360deg); } }

.hero-layout {
  position: relative; z-index: 1;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--space-xl);
  align-items: center;
  padding-top: var(--space-xl);
  padding-bottom: var(--space-xl);
}

.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: var(--black);
  color: var(--white);
  font-weight: 800;
  font-size: 0.82rem;
  letter-spacing: 0.04em;
  padding: 6px 16px;
  border-radius: 99px;
  margin-bottom: var(--space-md);
}

.badge-dot {
  width: 7px; height: 7px;
  background: var(--green);
  border-radius: 50%;
  flex-shrink: 0;
  animation: pulse-dot 2s ease-in-out infinite;
}
@keyframes pulse-dot {
  0%, 100% { box-shadow: 0 0 0 0   rgba(74,222,128,.6); }
  50%      { box-shadow: 0 0 0 5px rgba(74,222,128, 0); }
}

.hero-headline { color: var(--black); margin-bottom: var(--space-md); max-width: 14ch; }
.headline-fill {
  color: var(--red);
  background: var(--black);
  padding: 0 10px;
  border-radius: 6px;
  transform: rotate(-1.5deg);
  display: inline-block;
}
.headline-mark {
  background: linear-gradient(transparent 62%, var(--yellow) 62%);
  padding: 0 2px;
}

.hero-sub {
  font-size: clamp(1rem, 1.5vw, 1.15rem);
  font-weight: 600;
  color: rgba(0,0,0,0.72);
  max-width: 46ch;
  margin-bottom: var(--space-lg);
}
.hero-sub strong { color: var(--black); }

.hero-actions { display: flex; flex-wrap: wrap; gap: var(--space-sm); }

/* Hero photo: only the tutoring hero carries one. The home and
   schools pages open with the carousel, and Aki's headshot sits in
   their instructor section instead (.instructor-photo). */
.hero-photo-wrap {
  width: 340px;
  height: 340px;
  justify-self: end;
}
/* The float lives on its own element: .fade-up already owns the
   transform on the wrapper for the entrance. */
.hero-photo-float {
  position: relative;
  width: 100%; height: 100%;
  animation: heroFloat 5s ease-in-out infinite;
}
@keyframes heroFloat {
  0%, 100% { transform: translateY(0);     }
  50%      { transform: translateY(-12px); }
}

/* Dashed ring that orbits behind the circle. */
.hero-photo-ring {
  position: absolute;
  inset: -14px;
  border-radius: 50%;
  border: 4px dashed rgba(0,0,0,0.25);
  animation: spinRing 18s linear infinite;
}
@keyframes spinRing { to { transform: rotate(360deg); } }

/* The circle owns the clip and the border; the ring sits outside it,
   which is why the two are separate elements. */
.hero-photo-circle {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  overflow: hidden;
  border: 4px solid var(--black);
  /* Deliberately not --shadow-lg. theme-play inherits the root token,
     a hard `8px 8px 0` offset, and on a circle that puts a solid black
     disc into the 14px gap between this and .hero-photo-ring: the gap
     closes to nothing at the bottom-right and stays open at the top
     left, which reads as the photo sitting off-centre inside the ring.
     A symmetric shadow keeps the gap even the whole way round and
     still gives the float something to lift off. Local override only -
     the token itself is what every button on the page uses. */
  box-shadow: 0 10px 30px rgba(15,15,15,0.22);
}

.hero-photo-img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  /* photos/aki-hero.jpg is square, so cover crops nothing on its own
     and the circle fills with suit and background. The scale() zooms
     past that; the translate then picks the framing.

     Y is what centres the face, and it is easy to overshoot. The eyes
     sit at 43% of the source height, which is already about where a
     portrait wants them, so only a small nudge is needed - 1.5% lands
     the eye line at ~43% of the circle. The old 7.5% pushed it to
     ~51%, which read as the whole head sitting low and left of the
     ring. X is measured, not guessed: 1% puts the head's centre at
     49.5% of the diameter, and raising it only walks the head right.

     NB the percentages resolve against this element's box and are
     then multiplied by the scale(), so the shift is always exactly
     this fraction of the *rendered* image. Changing the zoom above
     will not change the framing - retune these instead. */
  transform: scale(1.22) translate(1%, 1.5%);
}

/* Compact hero used at the top of schools.html / tutoring.html */
/* Tutoring's hero is a different component from the carousel,
   but it opens the page the same way, so it takes the same
   height. Its box includes the navbar it sits under, hence the
   + var(--nav-h). */
.hero--compact { height: calc(var(--hero-h) + var(--nav-h)); }
.hero--compact .hero-layout {
  grid-template-columns: 1fr;
  padding-top: var(--space-lg);
  padding-bottom: var(--space-lg);
}
.hero--compact .hero-headline { max-width: 20ch; }

/* With the circle alongside, the text gives up the right column. */
.hero--compact.hero--photo .hero-layout { grid-template-columns: 1fr auto; }
.hero--compact.hero--photo .hero-sub { max-width: 40ch; }


/* =====================================================
   7. HOME PAGE
====================================================== */

/* ---- Trust strip ---- */
.trust-strip {
  background: var(--black);
  color: rgba(255,255,255,0.72);
  padding: var(--space-sm) 0;
}
.trust-strip-inner {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: var(--space-sm) var(--space-lg);
  font-size: 0.85rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
/* Plain inline, not inline-flex: inline-flex would split each
   <b> from its surrounding text into separate flex items. */
.trust-strip-inner span { white-space: nowrap; }
.trust-strip-inner b { color: var(--yellow); font-weight: 800; }

/* ---- Two paths ---- */
.paths-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-md);
}
.path-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  background: var(--white);
  border: var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  box-shadow: var(--shadow);
  transition: transform var(--transition), box-shadow var(--transition);
}
.path-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.path-eyebrow {
  font-size: 0.75rem; font-weight: 800;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--red);
}
.path-card--schools { border-top: 5px solid var(--yellow); }
.path-card--families { border-top: 5px solid var(--blue); }
.path-card p { color: var(--text-muted); max-width: none; font-size: 0.98rem; }
.path-points {
  display: flex; flex-direction: column; gap: 6px;
  margin-top: var(--space-xs);
}
.path-points li {
  font-size: 0.9rem; font-weight: 600; color: var(--text);
  padding-left: 1.35rem; position: relative;
}
.path-points li::before {
  content: '✓'; position: absolute; left: 0;
  color: var(--red); font-weight: 800;
}
.path-card .arrow-link { margin-top: auto; padding-top: var(--space-sm); }

/* ---- Currently running callout ---- */
.now-running {
  background: var(--black);
  color: var(--white);
  border-radius: var(--radius-lg);
  padding: var(--space-lg) var(--space-xl);
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--space-lg);
  align-items: center;
}
.now-running h2 { color: var(--white); margin-bottom: var(--space-xs); }
.now-running p { color: rgba(255,255,255,0.68); font-size: 0.98rem; }
.now-running-flag {
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-size: 0.78rem; font-weight: 800;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--yellow);
  margin-bottom: var(--space-xs);
}
.now-running-courses { display: flex; flex-direction: column; gap: var(--space-sm); }
.now-course {
  display: flex; align-items: center; gap: 0.8rem;
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.16);
  border-radius: var(--radius-md);
  padding: 0.8rem 1.2rem;
  min-width: 260px;
}
.now-course-mark {
  font-family: var(--font-brand);
  font-size: 1rem;
  color: var(--black);
  background: var(--yellow);
  width: 38px; height: 38px;
  border-radius: 8px;
  display: grid; place-items: center;
  flex-shrink: 0;
}
.now-course strong { display: block; font-size: 0.98rem; color: var(--white); }
.now-course span { font-size: 0.8rem; color: rgba(255,255,255,0.6); font-weight: 600; }

/* ---- What students build ---- */
.build-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-sm);
}
.build-tile {
  background: var(--white);
  border: var(--border-thin);
  border-radius: var(--radius-md);
  padding: var(--space-md);
  box-shadow: var(--shadow);
}
.build-tile h3 { font-size: 1.05rem; margin-bottom: 6px; }
.build-tile p { font-size: 0.88rem; color: var(--text-muted); max-width: none; }
.build-icon { font-size: 1.7rem; display: block; margin-bottom: 10px; }

/* =====================================================
   HERO CAROUSEL — used as the hero on index and schools

   The photos are the hero, not a strip above it: they fill
   the opening screen, cross-fade on a timer, and the
   headline sits on top of them behind a scrim.

   Each slide holds one <img> from photos/, cropped to fill
   by object-fit, so swapping a photo shifts nothing.
====================================================== */
/* height, not min-height, at every width. As a minimum the
   banner is only ever as tall as its own copy, and index's
   headline wraps to two lines where schools' fits on one —
   which made Home's banner 65px taller than For Schools. */
.hero-carousel {
  position: relative;
  margin-top: var(--nav-h);
  height: var(--hero-h);
  display: flex;
  align-items: center;
  overflow: hidden;
  background: var(--black);
  border-bottom: 3px solid var(--yellow);
}

.hc-slides { position: absolute; inset: 0; }

.hc-slide {
  position: absolute;
  inset: 0;
  margin: 0;
  opacity: 0;
  transform: scale(1.05);
  transition: opacity 0.9s ease, transform 7s linear;
}
.hc-slide.is-active {
  opacity: 1;
  transform: scale(1);
}
.hc-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Darkened toward the text side so the headline stays legible
   whatever the photo underneath happens to be. */
.hc-scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    100deg,
    rgba(15,15,15,0.90) 0%,
    rgba(15,15,15,0.74) 45%,
    rgba(15,15,15,0.32) 100%);
  pointer-events: none;
}

.hc-content {
  position: relative;
  z-index: 2;
  padding-block: var(--space-2xl);
}
.hc-content .hero-headline {
  color: var(--white);
  max-width: 16ch;
}
.hc-content .hero-sub {
  color: rgba(255,255,255,0.82);
  max-width: 48ch;
}
.hc-content .hero-sub strong { color: var(--white); }
/* On a dark photo the yellow underline would put white text on
   yellow. Colour the words instead. */
.hc-content .headline-mark {
  background: none;
  padding: 0;
  color: var(--yellow);
}
.hc-content .btn-outline {
  background: transparent;
  color: var(--white);
  border-color: var(--white);
}
.hc-content .btn-outline:hover {
  background: var(--yellow);
  color: var(--black);
  border-color: var(--yellow);
}

/* Slide indicators */
.hc-dots {
  position: absolute;
  z-index: 3;
  bottom: var(--space-md);
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 10px;
}
.hc-dot {
  width: 34px;
  height: 5px;
  border-radius: 99px;
  background: rgba(255,255,255,0.35);
  cursor: pointer;
  padding: 0;
  transition: background var(--transition), width var(--transition);
}
.hc-dot:hover { background: rgba(255,255,255,0.6); }
.hc-dot.is-active { background: var(--yellow); width: 54px; }

/* ---- Instructor block ---- */
.instructor-grid {
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: var(--space-xl);
  align-items: start;
}
.instructor-photo {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  object-position: center top;
  border-radius: var(--radius-lg);
  border: 2px solid var(--black);
  box-shadow: 12px 12px 0 var(--yellow);
}
.instructor-text h2 { margin-bottom: var(--space-md); }
.instructor-text p  { font-size: 1.02rem; color: var(--text-muted); margin-bottom: var(--space-sm); }
.instructor-text strong { color: var(--black); font-weight: 800; }

.chip {
  background: var(--white);
  border: 2px solid var(--black);
  border-radius: 99px;
  padding: 6px 14px;
  font-size: 0.85rem; font-weight: 700;
  box-shadow: 3px 3px 0 var(--black);
  transition: transform var(--transition), box-shadow var(--transition);
}
.chip:hover { transform: translate(-2px,-2px); box-shadow: 5px 5px 0 var(--black); }


/* =====================================================
   8. SCHOOLS PAGE
====================================================== */

/* ---- Proof band ---- */
.proof-band {
  background: var(--yellow);
  border-top: 1px solid rgba(15,15,15,0.14);
  border-bottom: 1px solid rgba(15,15,15,0.14);
  padding: var(--space-lg) 0;
}
.proof-inner {
  display: flex; flex-wrap: wrap; align-items: center;
  justify-content: space-between; gap: var(--space-md);
}
.proof-inner h2 { font-size: clamp(1.3rem, 2.4vw, 1.9rem); max-width: 22ch; }
.proof-meta { display: flex; flex-wrap: wrap; gap: var(--space-lg); }
.proof-stat strong {
  display: block;
  font-family: var(--font-display);
  font-size: 1.9rem;
  font-weight: 900;
  line-height: 1.1;
  color: var(--black);
}
.proof-stat span {
  font-size: 0.74rem; font-weight: 800;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: rgba(0,0,0,0.6);
}

/* ---- Course detail cards ---- */
.course-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-md);
}
.course-card {
  background: var(--white);
  border: var(--border-thin);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  box-shadow: var(--shadow);
  display: flex; flex-direction: column; gap: var(--space-sm);
}
.course-head {
  display: flex; align-items: flex-start;
  justify-content: space-between; gap: var(--space-sm);
}
.course-engine {
  font-size: 0.72rem; font-weight: 800;
  letter-spacing: 0.12em; text-transform: uppercase;
  background: var(--black); color: var(--yellow);
  padding: 4px 10px; border-radius: 99px;
  white-space: nowrap;
}
.course-card > p { color: var(--text-muted); max-width: none; font-size: 0.96rem; }
.course-sub {
  font-size: 0.72rem; font-weight: 800;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--text-muted);
  margin-top: var(--space-xs);
}
.course-list { display: flex; flex-direction: column; gap: 7px; }
.course-list li {
  font-size: 0.9rem; font-weight: 600; color: var(--text);
  padding-left: 1.5rem; position: relative;
}
.course-list li::before {
  content: '▸'; position: absolute; left: 0;
  color: var(--red); font-weight: 800;
}
.course-outcome {
  margin-top: auto;
  background: var(--yellow-soft);
  border-left: 4px solid var(--yellow);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  padding: 0.8rem 1rem;
  font-size: 0.9rem; font-weight: 700;
  max-width: none;
}

/* ---- Numbered steps ---- */
.steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-md);
  counter-reset: step;
}
.step {
  position: relative;
  padding-top: var(--space-md);
  border-top: 3px solid var(--yellow);
  counter-increment: step;
}
.step::before {
  content: counter(step, decimal-leading-zero);
  display: block;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 0.85rem;
  letter-spacing: 0.1em;
  color: var(--red);
  margin-bottom: 6px;
}
.step h3 { font-size: 1.05rem; margin-bottom: 6px; }
.step p { font-size: 0.9rem; color: var(--text-muted); max-width: none; }

/* ---- What we provide / what you provide ---- */
.provide-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-md);
}
.provide-col {
  border: var(--border-thin);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  background: var(--white);
}
.provide-col--ours { background: var(--black); }
.provide-col--ours h3 { color: var(--white); }
.provide-col--ours .provide-list li { color: rgba(255,255,255,0.82); }
.provide-col--ours .provide-list li::before { color: var(--yellow); }
.provide-col h3 { margin-bottom: var(--space-sm); font-size: 1.15rem; }
.provide-list { display: flex; flex-direction: column; gap: 10px; }
.provide-list li {
  font-size: 0.93rem; font-weight: 600; color: var(--text);
  padding-left: 1.6rem; position: relative;
}
.provide-list li::before {
  content: '✓'; position: absolute; left: 0;
  color: var(--red); font-weight: 800;
}

/* ---- FAQ (native details/summary, no JS) ---- */
.faq { display: flex; flex-direction: column; gap: 0; }
.faq details {
  border-bottom: 1px solid rgba(15,15,15,0.14);
}
.faq details:first-of-type { border-top: 1px solid rgba(15,15,15,0.14); }
.faq summary {
  cursor: pointer;
  list-style: none;
  padding: var(--space-md) 2.5rem var(--space-md) 0;
  font-weight: 800;
  font-size: 1.02rem;
  position: relative;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: '+';
  position: absolute; right: 0.4rem; top: 50%;
  transform: translateY(-50%);
  font-size: 1.5rem; font-weight: 400;
  color: var(--red);
  line-height: 1;
}
.faq details[open] summary::after { content: '−'; }
.faq details > p {
  padding-bottom: var(--space-md);
  color: var(--text-muted);
  max-width: 70ch;
}


/* =====================================================
   9. TUTORING PAGE
====================================================== */

/* ---- How it works: three steps ---- */
.flow-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-md);
}
.flow-card {
  background: var(--white);
  border: var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  box-shadow: var(--shadow);
  transition: transform var(--transition), box-shadow var(--transition);
}
.flow-card:hover { transform: translate(-3px,-3px); box-shadow: var(--shadow-lg); }
.flow-num {
  display: inline-grid; place-items: center;
  width: 44px; height: 44px;
  background: var(--yellow);
  border: var(--border);
  border-radius: 50%;
  font-family: var(--font-display);
  font-size: 1.2rem;
  margin-bottom: var(--space-sm);
  box-shadow: 3px 3px 0 var(--black);
}
.flow-card h3 { margin-bottom: 8px; }
.flow-card p { font-size: 0.93rem; color: var(--text-muted); max-width: none; }

/* ---- Subject tag field ---- */
.tag-field {
  display: flex; flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  max-width: 780px;
  margin-inline: auto;
}
.tag-field .chip { font-size: 0.95rem; padding: 8px 18px; }

/* ---- Sample plans ---- */
.plan-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-md);
}
.plan-card {
  background: var(--white);
  border: var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  box-shadow: var(--shadow);
  display: flex; flex-direction: column; gap: var(--space-sm);
}
.plan-who {
  font-family: var(--font-display);
  font-size: 1.15rem;
  color: var(--black);
}
.plan-start, .plan-now {
  font-size: 0.9rem; font-weight: 600; color: var(--text-muted);
  max-width: none;
}
.plan-start strong, .plan-now strong {
  display: block;
  font-size: 0.7rem; font-weight: 800;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--black);
  margin-bottom: 2px;
}
.plan-arrow { color: var(--red); font-size: 1.3rem; line-height: 1; }
.plan-disclaimer {
  text-align: center;
  margin: var(--space-lg) auto 0;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--text-muted);
  max-width: 60ch;
}


/* =====================================================
   10. CODE LAB
====================================================== */
.codelab { border-top: 4px solid var(--yellow); border-bottom: 4px solid var(--yellow); }
.codelab .section-label { background: var(--yellow); }

.cl-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-md);
}

.cl-card {
  display: flex;
  flex-direction: column;
  background: var(--white);
  border: 3px solid var(--black);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: 8px 8px 0 rgba(255,255,255,0.3);
  transition: box-shadow var(--transition);
}
/* Only one program can run at a time — make it obvious which. */
.cl-card.is-running { box-shadow: 8px 8px 0 var(--yellow); }

.cl-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-sm);
  padding: var(--space-md);
  border-bottom: 3px solid var(--black);
  background: var(--yellow);
}
.cl-title { font-family: var(--font-display); font-size: 1.2rem; line-height: 1.2; }
.cl-by {
  font-size: 0.78rem; font-weight: 700;
  color: rgba(0,0,0,0.62);
  margin-top: 2px;
}
.cl-blurb {
  font-size: 0.85rem; font-weight: 600;
  color: rgba(0,0,0,0.7);
  max-width: none;
  margin-top: 6px;
}
.cl-level {
  font-size: 0.68rem; font-weight: 800;
  letter-spacing: 0.1em; text-transform: uppercase;
  background: var(--black); color: var(--yellow);
  padding: 3px 9px; border-radius: 99px;
  white-space: nowrap;
  flex-shrink: 0;
}

/* Run / Code segmented toggle */
.cl-toggle {
  display: flex;
  border-bottom: 3px solid var(--black);
  background: var(--grey-light);
}
.cl-tab {
  flex: 1;
  padding: 0.7rem 0.5rem;
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
  cursor: pointer;
  transition: background var(--transition), color var(--transition);
}
.cl-tab + .cl-tab { border-left: 3px solid var(--black); }
.cl-tab:hover { background: rgba(0,0,0,0.06); }
.cl-tab[aria-selected="true"] { background: var(--black); color: var(--yellow); }

.cl-panel { display: none; }
.cl-panel.is-active { display: block; }

/* Terminal */
.cl-term {
  background: var(--black);
  color: #E8E8E0;
  font-family: var(--font-mono);
  font-size: 0.84rem;
  line-height: 1.55;
  padding: var(--space-sm) var(--space-md);
  height: 300px;
  overflow-y: auto;
  overflow-wrap: break-word;
  white-space: pre-wrap;
}
.cl-line { margin: 0; max-width: none; }
.cl-line--sys  { color: #6f6f68; }
.cl-line--echo { color: var(--blue); }
.cl-line--err  { color: #FF8A8A; font-weight: 700; }
.cl-line--done { color: var(--green); }

.cl-input-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 2px;
}
.cl-caret { color: var(--yellow); font-weight: 700; flex-shrink: 0; }
.cl-input {
  flex: 1;
  background: transparent;
  border: none;
  border-bottom: 1px dashed rgba(255,255,255,0.35);
  color: var(--white);
  font-family: var(--font-mono);
  font-size: 0.84rem;
  padding: 2px 0;
  outline: none;
  min-width: 0;
}
.cl-input:focus { border-bottom-color: var(--yellow); }
.cl-enter {
  font-size: 0.68rem; font-weight: 800;
  letter-spacing: 0.08em; text-transform: uppercase;
  background: var(--yellow); color: var(--black);
  padding: 3px 9px; border-radius: 5px;
  cursor: pointer;
  flex-shrink: 0;
}

/* Code view */
.cl-code {
  background: var(--black);
  height: 300px;
  overflow: auto;
  margin: 0;
}
.cl-code code {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.82rem;
  line-height: 1.6;
  color: #E8E8E0;
  padding: var(--space-sm) var(--space-md);
  white-space: pre;
  tab-size: 4;
}
.tok-kw  { color: var(--yellow); font-weight: 700; }
.tok-str { color: #9BE68A; }
.tok-num { color: var(--blue); }
.tok-com { color: #7a7a70; font-style: italic; }
.tok-fn  { color: #FFB08A; }

/* Card footer controls */
.cl-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  padding: var(--space-sm) var(--space-md);
  border-top: 3px solid var(--black);
  background: var(--white);
}
.cl-btn {
  display: inline-flex; align-items: center; gap: 0.35rem;
  font-size: 0.82rem; font-weight: 800;
  padding: 0.5rem 1rem;
  border: 2px solid var(--black);
  border-radius: var(--radius-sm);
  background: var(--white);
  cursor: pointer;
  transition: transform var(--transition), box-shadow var(--transition), background var(--transition);
}
.cl-btn:hover:not(:disabled) { transform: translate(-2px,-2px); box-shadow: 3px 3px 0 var(--black); }
.cl-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.cl-btn--run  { background: var(--red); color: var(--white); }
.cl-btn--copy { margin-left: auto; }

.cl-fallback {
  padding: var(--space-md);
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--text-muted);
}


/* =====================================================
   11. SHARED BLOCKS
====================================================== */

/* ---- Why 1-on-1 ---- */
.why-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-xl);
  align-items: start;
}
.why-text h2 { margin-bottom: var(--space-md); }
.why-text p  { color: var(--text-muted); font-size: 1.05rem; }

.why-cards { display: grid; grid-template-columns: 1fr; gap: var(--space-sm); }
.why-card {
  background: var(--white);
  border: var(--border);
  border-radius: var(--radius-md);
  padding: var(--space-md);
  box-shadow: var(--shadow);
  transition: transform var(--transition), box-shadow var(--transition);
}
.why-card:hover { transform: translate(-3px,-3px); box-shadow: var(--shadow-lg); }
.why-icon { font-size: 1.6rem; display: block; margin-bottom: 6px; }
.why-card strong { display: block; font-weight: 800; font-size: 1rem; margin-bottom: 4px; color: var(--black); }
.why-card p { font-size: 0.85rem; color: var(--text-muted); max-width: none; }

/* ---- Contact ---- */
.contact {
  padding: var(--space-2xl) 0;
  background: var(--yellow);
  border-top: 4px solid var(--black);
  position: relative;
  overflow: hidden;
}
.theme-pro .contact {
  background: var(--off-white);
  border-top: 1px solid rgba(15,15,15,0.14);
}
.contact::before {
  content: '';
  position: absolute; inset: 0;
  background-image: radial-gradient(circle, rgba(0,0,0,0.12) 1.5px, transparent 0);
  background-size: 28px 28px;
  pointer-events: none;
}
.theme-pro .contact::before { display: none; }

.contact-grid {
  position: relative; z-index: 1;
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: var(--space-xl);
  align-items: start;
}

.contact-text .section-label {
  background: var(--black); color: var(--yellow);
  border-color: var(--black); box-shadow: 3px 3px 0 rgba(0,0,0,0.3);
}
.theme-pro .contact-text .section-label {
  background: transparent; color: var(--text-muted);
  box-shadow: none; border: none;
  border-left: 4px solid var(--yellow);
}
.contact-text h2 { margin-bottom: var(--space-md); }
.contact-text p  { color: rgba(0,0,0,0.7); font-weight: 600; font-size: 1.02rem; margin-bottom: var(--space-sm); }

.contact-direct { margin-top: var(--space-md); }
.direct-link {
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-weight: 800; font-size: 1rem; color: var(--black);
  background: var(--white); border: var(--border);
  padding: 10px 18px; border-radius: var(--radius-md);
  box-shadow: var(--shadow);
  transition: transform var(--transition), box-shadow var(--transition);
}
.direct-link:hover { transform: translate(-3px,-3px); box-shadow: var(--shadow-lg); }
.theme-pro .direct-link:hover { transform: translateY(-2px); }

.contact-form-wrap {
  background: var(--white);
  border: var(--border);
  border-radius: var(--radius-xl);
  padding: var(--space-lg) var(--space-xl);
  box-shadow: var(--shadow-lg);
}
.contact-form { display: flex; flex-direction: column; gap: var(--space-md); }

.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-md); }

.form-group { display: flex; flex-direction: column; gap: 6px; }
.form-group label {
  font-size: 0.82rem; font-weight: 800;
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--black);
}

.form-group input,
.form-group select,
.form-group textarea {
  background: var(--grey-light);
  border: 2px solid var(--black);
  border-radius: var(--radius-sm);
  padding: 0.8rem 1rem;
  font-size: 0.95rem; font-weight: 600; color: var(--black);
  outline: none; width: 100%;
  -webkit-appearance: none;
  transition: border-color var(--transition), box-shadow var(--transition), background var(--transition);
}
.form-group input::placeholder,
.form-group textarea::placeholder { color: var(--grey); font-weight: 500; }
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  background: var(--white);
  border-color: var(--red);
  box-shadow: 4px 4px 0 var(--red);
}
.theme-pro .form-group input:focus,
.theme-pro .form-group select:focus,
.theme-pro .form-group textarea:focus {
  box-shadow: 0 0 0 3px rgba(255,77,77,0.22);
}
.form-group textarea { resize: vertical; min-height: 100px; }
.form-group select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%230F0F0F' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  background-color: var(--grey-light);
  padding-right: 2.5rem;
}

.form-success, .form-error {
  display: none;
  font-size: 0.9rem; font-weight: 700;
  padding: 0.75rem 1rem;
  border-radius: var(--radius-sm);
  border: 2px solid var(--black);
  text-align: center;
}
.form-success { background: #d1fae5; color: #064e3b; }
.form-error   { background: #fee2e2; color: #7f1d1d; }
.form-success.show, .form-error.show { display: block; }


/* ---- Thank-you page ---- */
.thanks-body {
  background: var(--yellow);
  background-image: radial-gradient(circle, rgba(0,0,0,0.12) 1.5px, transparent 0);
  background-size: 28px 28px;
  min-height: 100svh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
}
.thanks-card {
  background: var(--white);
  border: var(--border);
  border-radius: 28px;
  padding: 3rem clamp(1.5rem, 6vw, 3.5rem);
  max-width: 520px;
  width: 100%;
  text-align: center;
  box-shadow: var(--shadow-lg);
  animation: popIn 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
@keyframes popIn {
  from { transform: scale(0.85); opacity: 0; }
  to   { transform: scale(1);    opacity: 1; }
}
.thanks-icon {
  font-size: 4rem;
  margin-bottom: 1.2rem;
  display: block;
  animation: bounce 0.6s 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
@keyframes bounce {
  from { transform: scale(0); }
  to   { transform: scale(1); }
}
.thanks-card h1 { font-size: clamp(2.2rem, 7vw, 2.8rem); margin-bottom: 0.75rem; }
.thanks-card h1 span { color: var(--red); }
.thanks-card p {
  color: var(--text-muted);
  font-size: 1.05rem;
  font-weight: 600;
  max-width: 40ch;
  margin: 0 auto 2rem;
}


/* =====================================================
   12. FOOTER
====================================================== */
.footer {
  background: var(--black);
  border-top: 3px solid var(--yellow);
  padding: var(--space-md) 0;
}
.footer-inner {
  display: flex; align-items: center;
  justify-content: space-between;
  flex-wrap: wrap; gap: var(--space-md);
}
.footer .logo-img { height: 56px; }
.footer-copy { font-size: 0.82rem; color: rgba(255,255,255,0.4); text-align: center; max-width: none; }
.footer-links { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-md); }
.footer-links a {
  font-size: 0.85rem; font-weight: 800;
  color: rgba(255,255,255,0.45); text-transform: uppercase; letter-spacing: 0.06em;
  transition: color var(--transition);
}
.footer-links a:hover { color: var(--yellow); }


/* =====================================================
   13. ANIMATIONS
====================================================== */
.fade-up {
  opacity: 0; transform: translateY(30px);
  animation: fadeUp 0.7s cubic-bezier(0.4,0,0.2,1) forwards;
}
.delay-1 { animation-delay: 0.15s; }
.delay-2 { animation-delay: 0.30s; }
.delay-3 { animation-delay: 0.45s; }
@keyframes fadeUp { to { opacity: 1; transform: translateY(0); } }

.reveal {
  opacity: 0; transform: translateY(40px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.reveal.delay-1 { transition-delay: 0.10s; }
.reveal.delay-2 { transition-delay: 0.20s; }
.reveal.delay-3 { transition-delay: 0.30s; }
.reveal.visible { opacity: 1; transform: translateY(0); }

/* Respect the OS setting. Everything above animates on load or
   scroll, so this has to force the *end* state, not just kill
   the animation — otherwise .reveal content stays at opacity 0. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }

  .fade-up,
  .reveal { opacity: 1 !important; transform: none !important; }

  .starburst { display: none; }

  /* The carousel stops auto-advancing in JS; kill the Ken Burns
     drift here so the active slide sits still. */
  .hc-slide { transform: none !important; }
}


/* =====================================================
   14. RESPONSIVE
====================================================== */

/* Tablet ≤ 960px */
@media (max-width: 960px) {
  .hero-layout { grid-template-columns: 1fr; }
  /* The compact hero keeps its two columns here: it is a pinned
     height with overflow hidden, so stacking the circle under the
     text would clip it. It shrinks instead, and drops out at 640. */
  .hero--compact.hero--photo .hero-layout { gap: var(--space-md); }
  .hero-photo-wrap { width: 200px; height: 200px; }
  .paths-grid,
  .course-grid,
  .provide-grid,
  .cl-grid      { grid-template-columns: 1fr; }

  .build-grid,
  .steps        { grid-template-columns: 1fr 1fr; }

  /* Re-points the shared banner height for every hero at once. */
  :root { --hero-h: 34rem; }
  /* Straight-down gradient once the text spans the full width. */
  .hc-scrim {
    background: linear-gradient(
      180deg,
      rgba(15,15,15,0.72) 0%,
      rgba(15,15,15,0.86) 100%);
  }

  .flow-grid,
  .plan-grid    { grid-template-columns: 1fr; }

  .now-running  { grid-template-columns: 1fr; }
  .now-course   { min-width: 0; }

  .instructor-grid { grid-template-columns: 1fr; }
  .instructor-photo { max-width: 260px; }

  .why-grid     { grid-template-columns: 1fr; }
  .contact-grid { grid-template-columns: 1fr; }

  .footer-inner { flex-direction: column; text-align: center; }
}

/* Mobile ≤ 640px */
@media (max-width: 640px) {
  /* --nav-h steps down with the logo: the full-size mark would
     crowd the hamburger on a narrow screen. */
  /* --hero-h stays generous here: the headline wraps four or
     five times on a phone, and a pinned height has to clear it. */
  :root { --space-2xl: 5rem; --space-xl: 3rem; --nav-h: 79px; --hero-h: 38rem; }

  .logo-img { height: 58px; }

  .nav-links { display: none; }
  .hamburger { display: flex; }

  .build-grid,
  .steps      { grid-template-columns: 1fr; }

  .instructor-photo { box-shadow: 8px 8px 0 var(--yellow); }
  /* Phone: the headline wraps enough times to own the screen. */
  .hero-photo-wrap { display: none; }
  .form-row   { grid-template-columns: 1fr; }
  .contact-form-wrap { padding: var(--space-md); }

  .hero-actions { flex-direction: column; align-items: stretch; }
  .hero-actions .btn { width: 100%; }

  .proof-meta { gap: var(--space-md); }

  .cl-term, .cl-code { height: 260px; }
  .cl-controls { gap: 0.4rem; }
  .cl-btn { font-size: 0.78rem; padding: 0.45rem 0.8rem; }
  .cl-btn--copy { margin-left: 0; }
}