/* =====================================================================
   OMAHA INDIA READ — the front page (owner's build prompt, 2026-09-05 12:54).
   Text = HTML; pictures = crops of the two reference images (img/front/v5-*).
   Desktop: copy laid over the scenes as in the reference. Phone: compact
   header + hamburger, stacked bands, story carousel, no hidden copy.
   ===================================================================== */
.front { --sci:#1a5fb4; --biz:#e8541e; --ink:#1b2a4a; --ink-2:#4a5768; --gold:#ffe45c; --paper:#f5ead6; }
.front main { overflow-x: hidden; font-family: var(--display); color: var(--ink); }
/* The page is a centred 1280px column (the reference is a fixed-width design); on a wide
   monitor the bands never stretch edge to edge or swallow the whole first screen. */
.front main > section, .front main > .fp-trust { max-width: 1280px; margin-left: auto; margin-right: auto; }
.front main > .fp-hero, .front main > .fp-journey { border-radius: 0 0 18px 18px; }
.front main > .fp-journey { border-radius: 18px; }
.fp-hero-pic img { max-height: 640px; object-fit: cover; object-position: 50% 40%; }
.fp-journey-pic img { max-height: 520px; object-fit: cover; object-position: 50% 45%; }
.fp-wrap { max-width: 1180px; margin: 0 auto; padding: 0 22px; }

/* ---------- header ---------- */
.front .nav .brand { display: flex; align-items: center; gap: 10px; }
.front .nav .brand-logo { width: 44px; height: auto; }
.front .nav .brand b { font-size: 17px; letter-spacing: .04em; display: block; line-height: 1; }
.front .nav .brand small { display: block; }
.front .nav-links { gap: 22px; }
.front .nav-links a { display: inline-flex; align-items: center; gap: 6px; text-transform: none; letter-spacing: 0; font-size: 15px; }
.front .nav-links a svg { width: 20px; height: 20px; color: var(--sci); }
.front .nav-links a.on { color: var(--biz); border-bottom-color: var(--biz); }
.front .nav-links a.on svg { color: var(--biz); }
.front .nav-search { display: inline-flex; width: 36px; height: 36px; align-items: center; justify-content: center; color: var(--ink); border-radius: 50%; }
.front .nav-search svg { width: 20px; height: 20px; }
.front .nav-burger { display: none; width: 40px; height: 40px; border: 0; background: transparent; color: var(--ink); cursor: pointer; padding: 6px; }
.front .nav-burger svg { width: 100%; height: 100%; }

/* ---------- 1 · hero ---------- */
.fp-hero { position: relative; overflow: hidden; background: #e9f3fb; }
.fp-hero-pic img { display: block; width: 100%; height: auto; }
.fp-hero-copy { position: absolute; left: 4%; top: 12%; width: 42%; }
.fp-hero-copy::before { content: ""; position: absolute; inset: -8% -10% -8% -12%; z-index: -1; background: radial-gradient(ellipse at 40% 45%, rgba(255,255,255,.92) 0%, rgba(255,255,255,.78) 45%, rgba(255,255,255,0) 75%); }
.fp-hero-copy { z-index: 1; }
.fp-hero h1 { font-family: var(--display); font-weight: 800; font-size: clamp(30px, 5.8vw, 78px); line-height: .96; letter-spacing: -.01em; margin: 0 0 3%; color: var(--ink); }
.fp-hero h1 .sci { color: var(--sci); }
.fp-hero h1 .biz { color: var(--biz); }
.fp-hero h1 small { font-size: .5em; font-weight: 800; }
.fp-mark { display: inline-block; font-family: var(--display); font-weight: 800; font-size: clamp(17px, 2.8vw, 36px); line-height: 1.08; color: var(--ink); margin: 0 0 2%; padding: .2em .6em; background: linear-gradient(100deg, transparent 0 3%, var(--gold) 3% 97%, transparent 97%); transform: rotate(-2deg); }
.fp-mark .fp-adults { font-family: var(--hand); font-weight: 400; font-size: 1.18em; color: #c0392b; letter-spacing: .01em; }
.fp-points { list-style: none; margin: 2% 0 4%; padding: 0; display: grid; gap: .38em; }
.fp-points li em { font-style: normal; color: var(--biz); background: linear-gradient(transparent 58%, rgba(255,228,92,.9) 58%); padding: 0 .12em; }
.fp-points li { position: relative; padding-left: 1.55em; font-family: var(--display); font-weight: 800; font-size: clamp(11px, 1.28vw, 18px); line-height: 1.25; color: var(--ink); }
.fp-points li::before { content: ""; position: absolute; left: 0; top: .12em; width: 1.05em; height: 1.05em; border-radius: 50%; background: var(--gold); box-shadow: inset 0 0 0 1.5px rgba(27,42,74,.18); }
.fp-points li::after { content: ""; position: absolute; left: .3em; top: .42em; width: .42em; height: .22em; border-left: 2px solid var(--ink); border-bottom: 2px solid var(--ink); transform: rotate(-45deg); }
.fp-creds { display: flex; gap: 4%; margin: 0 0 5%; }
.fp-creds span { display: inline-flex; align-items: center; gap: .5em; font-size: clamp(11px, 1.25vw, 16px); line-height: 1.15; color: var(--ink); font-weight: 700; }
.fp-creds span + span { border-left: 2px solid rgba(27,42,74,.25); padding-left: 4%; }
.fp-creds svg { width: 2.2em; height: 2.2em; color: var(--sci); flex: none; }
.fp-creds span + span svg { color: var(--biz); }
.fp-creds i { font-style: normal; }
.fp-creds b { color: var(--sci); font-weight: 800; background: linear-gradient(transparent 55%, rgba(255,228,92,.9) 55%); padding: 0 .18em; border-radius: 2px; }
.fp-creds span + span b { color: var(--biz); }
.fp-cta { display: inline-flex; align-items: center; gap: .6em; background: var(--gold); color: var(--ink); font-family: var(--display); font-weight: 800; font-size: clamp(14px, 1.6vw, 22px); padding: .55em 1.3em; border-radius: 999px; box-shadow: 0 6px 16px rgba(27,42,74,.22); border: 2px solid #f2cf2a; }
.fp-cta span { display: inline-grid; place-items: center; width: 1.5em; height: 1.5em; border-radius: 50%; background: var(--ink); color: #fff; font-size: .9em; }
.fp-cta:hover { transform: translateY(-2px); }
.fp-doodle { position: absolute; font-family: var(--display); font-weight: 800; color: var(--ink); line-height: 1.1; }
.fp-doodle.d2 { right: 3%; top: 4%; font-size: clamp(11px, 1.7vw, 24px); text-align: right; transform: rotate(6deg); text-shadow: 0 0 10px #fff, 0 0 18px #fff; }
.fp-doodle.d2 em { font-style: normal; }

/* ---------- 2 · real world stories ---------- */
.fp-stories { padding: 22px 0 10px; background: #fff; }
.fp-stories h2 { font-family: var(--display); font-weight: 800; font-size: clamp(22px, 2.8vw, 32px); color: var(--ink); margin: 0 0 12px; }
.fp-carousel { position: relative; }
.fp-tiles { display: flex; align-items: center; gap: 8px; }
.fp-tile { flex: 1 1 0; min-width: 0; display: block; border-radius: 10px; overflow: hidden; border: 2px solid; background: #fff; color: var(--ink); box-shadow: 0 3px 10px rgba(27,42,74,.10); }
.fp-tile img { display: block; width: 100%; height: auto; aspect-ratio: 173 / 126; object-fit: cover; }
.fp-tile span { display: block; text-align: center; font-family: var(--display); font-weight: 800; font-size: clamp(13px, 1.4vw, 18px); padding: 5px 4px; }
.fp-tile.sci { border-color: #4a7fc0; } .fp-tile.sci span { background: #d6e5f6; }
.fp-tile.his { border-color: #d98567; } .fp-tile.his span { background: #f6dcd0; }
.fp-tile.biz { border-color: #e0994a; } .fp-tile.biz span { background: #f9c98f; }
.fp-tile.psy { border-color: #b389d6; } .fp-tile.psy span { background: #e8d8f4; }
.fp-tile.tec { border-color: #5a95cf; } .fp-tile.tec span { background: #d4e6f8; }
.fp-tile:hover { transform: translateY(-3px); }
.fp-tile-arrow { flex: none; color: #f0932b; font-size: 26px; font-weight: 800; }
.fp-arrow, .fp-dots { display: none; }

/* ---------- 3 · the journey ---------- */
.fp-journey { position: relative; overflow: hidden; background: #ffd7a0; }
.fp-journey-pic img { display: block; width: 100%; height: auto; }
.fp-journey-copy { position: absolute; left: 18%; right: 26%; top: 5%; text-align: center; }
.fp-journey h2 { font-family: var(--display); font-weight: 800; font-size: clamp(16px, 3vw, 40px); line-height: 1.05; color: var(--ink); margin: 0 0 .3em; text-transform: uppercase; }
.fp-journey .fp-mark { font-size: clamp(13px, 2.3vw, 30px); text-transform: uppercase; transform: rotate(-1deg); }
.fp-gladwell { position: absolute; right: 2.5%; top: 6%; width: 22%; margin: 0; font-family: var(--display); font-weight: 700; font-style: italic; font-size: clamp(9px, 1.15vw, 16px); line-height: 1.3; color: var(--ink); transform: rotate(-5deg); }
.fp-gladwell cite { display: block; margin-top: .5em; font-style: normal; font-weight: 800; }
.fp-gladwell small { font-weight: 700; font-size: .85em; }
.fp-anyage { position: absolute; right: 2%; top: 47%; margin: 0; z-index: 2; font-family: var(--display); font-weight: 800; color: var(--ink); font-size: clamp(11px, 1.45vw, 19px); line-height: 1.12; text-align: center; transform: rotate(-6deg); padding: .45em .9em .35em; background: rgba(255,251,240,.94); border-radius: 12px; box-shadow: 0 8px 22px rgba(27,42,74,.16); border-bottom: .22em solid var(--gold); }

/* ---------- 4 · the mentors ---------- */
.fp-mentors { background: var(--paper); border-top: 1px solid #ece1c8; border-bottom: 1px solid #ece1c8; padding: 0; overflow: hidden; }
.fp-mentors-in { display: grid; grid-template-columns: 1.25fr 1.5fr 1.25fr; gap: 10px; align-items: stretch; min-height: 220px; }
.fp-mentor { margin: 0; display: flex; align-items: center; gap: 8px; }
.fp-mentor img { align-self: flex-end; height: 230px; width: auto; flex: none; border-radius: 0; }
.fp-mentor blockquote { margin: 0; padding: 12px 0; min-width: 150px; font-family: var(--display); font-weight: 700; font-style: italic; font-size: clamp(13px, 1.3vw, 17px); line-height: 1.25; color: var(--ink); transform: rotate(-4deg); }
.fp-mentor.right blockquote { transform: rotate(4deg); }
.fp-mentor blockquote small { font-style: normal; font-weight: 800; font-size: .85em; color: var(--ink); }
.fp-mentors-mid { text-align: center; padding: 18px 0 14px; align-self: center; }
.fp-mentors-mid p { margin: 0 0 12px; font-family: var(--display); font-weight: 700; font-size: clamp(14px, 1.6vw, 20px); line-height: 1.25; color: var(--ink); }
.fp-mentors-mid p b { font-weight: 800; }
/* The line the whole section hangs on (owner 2026-09-17: highlight it). Same card language as .fp-anyage; the names carry the hero's Science/Business colours on a gold highlighter stroke. */
.fp-mentors-mid p.fp-inspired { display: inline-block; margin: 0 auto 16px; padding: .75em 1.1em .65em; background: #fffdf6; border-radius: 16px; box-shadow: 0 10px 26px rgba(27,42,74,.14); border-bottom: .24em solid var(--gold); font-size: clamp(14px, 1.45vw, 20px); }
.fp-inspired .fp-names { display: inline-block; margin-top: .35em; font-size: 1.22em; line-height: 1.3; }
.fp-inspired .fp-names span { white-space: nowrap; padding: 0 .15em; background: linear-gradient(transparent 62%, rgba(255,228,92,.75) 62% 94%, transparent 94%); }
.fp-inspired .fp-names .sci { color: var(--sci); }
.fp-inspired .fp-names .biz { color: var(--biz); }
.fp-discs { display: flex; justify-content: center; }
.fp-disc { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 0 12px; font-size: 11px; font-weight: 800; color: var(--ink); border-right: 1px solid #d9ccae; max-width: 96px; text-align: center; line-height: 1.15; }
.fp-disc:last-child { border-right: 0; }
.fp-disc img { width: 44px; height: auto; mix-blend-mode: multiply; }

/* ---------- 5 · trust ---------- */
.fp-trust { background: #fff; padding: 18px 0; }
.fp-trust-in { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px 24px; }
.fp-trust-in > div { display: flex; align-items: center; gap: 10px; color: var(--ink); }
.fp-trust-in img { width: 44px; height: auto; mix-blend-mode: multiply; }
.fp-trust-in b { display: block; font-weight: 800; font-size: 16px; line-height: 1.1; }
.fp-trust-in span { display: block; font-size: 12px; color: var(--ink-2); font-weight: 700; }
.fp-trust-in span em { font-style: normal; font-weight: 800; color: var(--biz); background: linear-gradient(transparent 62%, rgba(255,228,92,.85) 62%); padding: 0 .2em; }

/* ---------- phones ---------- */
@media (max-width: 760px) {
  .front .nav-in { gap: 10px; padding: 10px 16px; flex-wrap: wrap; }
  .front .nav .brand-logo { width: 38px; }
  .front .nav .brand b { font-size: 15px; }
  .front .nav-links { display: none; width: 100%; flex-direction: column; gap: 4px; padding: 8px 0 4px; border-top: 1px solid #eee; }
  .front .nav.open .nav-links { display: flex; }
  .front .nav-links a { padding: 8px 0; font-size: 16px; }
  .front .nav-cta { margin-left: auto; gap: 6px; }
  .front .nav-cta .btn { display: none; }
  .front .nav.open .nav-cta .btn { display: inline-flex; }
  .front .nav-burger { display: inline-flex; }

  .fp-hero, .fp-journey { display: flex; flex-direction: column; }
  .fp-hero-copy, .fp-doodle, .fp-journey-copy, .fp-gladwell, .fp-anyage { position: static; width: auto; transform: none; }
  .fp-hero-pic { order: -1; }
  .fp-hero-pic img { aspect-ratio: 4 / 3; object-fit: cover; object-position: 58% 60%; }
  .fp-hero-copy { padding: 18px 20px 6px; }
  .fp-hero-copy::before { display: none; }
  .fp-doodle.d2 { text-shadow: none; }
  .fp-hero h1 { font-size: 38px; }
  .fp-mark { font-size: 20px; transform: rotate(-1.5deg); margin: 6px 0 10px; }
  .fp-points { margin: 8px 0 14px; gap: .45em; }
  .fp-points li { font-size: 15px; }
  .fp-creds { flex-direction: column; gap: 10px; margin-bottom: 16px; }
  .fp-creds span { font-size: 14px; }
  .fp-creds span + span { border-left: 0; padding-left: 0; }
  .fp-cta { font-size: 18px; padding: 14px 26px; background: var(--biz); color: #fff; border-color: var(--biz); }
  .fp-cta span { background: #fff; color: var(--biz); }
  .fp-doodle.d2 { display: inline-block; font-size: 16px; margin: 12px 20px 16px; text-align: left; }

  .fp-carousel { margin: 0 -22px; padding: 0 22px; }
  .fp-tiles { overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-left: 22px; gap: 10px; scrollbar-width: none; -webkit-overflow-scrolling: touch; padding-bottom: 4px; }
  .fp-tiles::-webkit-scrollbar { display: none; }
  .fp-tile { flex: 0 0 62%; scroll-snap-align: start; }
  .fp-tile-arrow { display: none; }
  .fp-arrow { display: grid; place-items: center; position: absolute; top: 40%; width: 34px; height: 34px; border-radius: 50%; border: 1px solid #dfe5ee; background: #fff; color: var(--ink); font-size: 24px; line-height: 1; box-shadow: 0 3px 10px rgba(27,42,74,.15); z-index: 1; cursor: pointer; }
  .fp-arrow.prev { left: 6px; } .fp-arrow.next { right: 6px; }
  .fp-dots { display: flex; justify-content: center; gap: 6px; margin-top: 10px; }
  .fp-dots i { width: 7px; height: 7px; border-radius: 50%; background: #c9d2e0; }
  .fp-dots i.on { background: var(--ink); }

  .fp-journey-pic { order: -1; }
  .fp-journey-pic img { aspect-ratio: 4 / 3; object-fit: cover; object-position: 50% 55%; }
  .fp-journey-copy { padding: 16px 20px 0; text-align: left; }
  .fp-journey h2 { font-size: 22px; }
  .fp-journey .fp-mark { font-size: 16px; }
  .fp-gladwell { font-size: 14px; margin: 12px 20px 0; }
  /* phone order: picture → headline + 10,000-hour line → Real Education → the Gladwell quote last */
  .fp-journey-copy { order: 1; display: contents; }
  .fp-journey h2 { order: 1; padding: 18px 20px 0; }
  .fp-gladwell { order: 2; }
  .fp-journey-mark { order: 3; margin: 14px 20px 0; align-self: flex-start; }
  .fp-anyage { order: 4; align-self: flex-start; }
  .fp-post-words { order: 5; }
  .fp-anyage { display: inline-block; font-size: 18px; margin: 12px 20px 18px; border-bottom-width: 3px; }

  .fp-mentors-in { grid-template-columns: 1fr; min-height: 0; }
  .fp-mentor { justify-content: center; }
  .fp-mentor.right { flex-direction: row-reverse; }
  .fp-mentor img { height: 170px; }
  .fp-discs { flex-wrap: wrap; gap: 8px 0; }
  .fp-trust-in { justify-content: flex-start; }
}