/* ==========================================================================
   Jump Leap Learning - site stylesheet
   Design system carried over from the Marketing folder graphics:
   sky gradient, rolling hills, navy #17356B, orange #F5822A-#E8630A,
   cream cards #FFFDF7, Baloo 2 headings + Nunito body, solid offset shadows.
   ========================================================================== */

:root {
  --navy:        #17356B;
  --navy-soft:   #2A3E63;
  --navy-mute:   #55627D;

  --orange:      #F5822A;
  --orange-dark: #E8630A;
  --orange-sh:   rgba(150, 58, 0, 0.42);

  --blue:        #3D7FC4;
  --blue-dark:   #2D66A8;

  --green:       #4CA34F;
  --green-dark:  #3E8C42;
  --green-light: #5CB65F;

  --cream:       #FFFDF7;
  --paper:       #FFFFFF;
  --line:        #E4E9F2;

  --sky-top:     #8FCDEC;
  --sky-mid:     #A8D8F0;
  --sky-low:     #CDEAF9;
  --sky-pale:    #E8F6FD;

  --shadow-pill: 0 5px 0 rgba(23, 53, 107, 0.16);
  --shadow-card: 0 4px 18px rgba(23, 53, 107, 0.09);
  --shadow-lift: 0 10px 30px rgba(23, 53, 107, 0.14);

  --wrap: 1120px;
  --radius: 18px;

  --font-head: "Baloo 2", "Segoe UI", system-ui, sans-serif;
  --font-body: "Nunito", "Segoe UI", system-ui, -apple-system, Arial, sans-serif;
}

/* --------------------------------------------------------------- base --- */

*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 17px;
  line-height: 1.62;
  color: var(--navy-soft);
  background: var(--paper);
  overflow-x: hidden;
}

img { max-width: 100%; height: auto; display: block; }

h1, h2, h3, h4 {
  font-family: var(--font-head);
  font-weight: 800;
  color: var(--navy);
  line-height: 1.1;
  margin: 0 0 0.5em;
  letter-spacing: -0.01em;
}

h1 { font-size: clamp(2.1rem, 6.2vw, 3.6rem); line-height: 1.05; }
h2 { font-size: clamp(1.7rem, 4.4vw, 2.6rem); }
h3 { font-size: clamp(1.2rem, 2.6vw, 1.5rem); }

p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }

a { color: var(--blue-dark); }

strong { font-weight: 900; color: var(--navy); }

/* strong must never fight its container. Without this, the navy colour above
   wins inside a dark panel and the text disappears - which is exactly what
   happened to the phone number in the navy venue box. Inside a link it should
   take the link's colour so it still reads as a link. */
a strong { color: inherit; }

.venue strong,
.cta-band strong,
.trust strong,
.site-footer strong { color: inherit; }

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: 20px;
}

.wrap--narrow { max-width: 780px; }

section { padding: clamp(52px, 8vw, 92px) 0; }

.center { text-align: center; }

.lede {
  font-size: clamp(1.05rem, 2.4vw, 1.25rem);
  color: var(--navy-soft);
  max-width: 62ch;
}
.center .lede { margin-inline: auto; }

.eyebrow {
  display: inline-block;
  font-family: var(--font-head);
  font-weight: 800;
  font-size: 0.85rem;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--orange-dark);
  margin-bottom: 12px;
}

/* skip link for keyboard and screen-reader users */
.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--navy);
  color: #fff;
  padding: 12px 20px;
  z-index: 999;
  border-radius: 0 0 12px 0;
}
.skip:focus { left: 0; }

/* ------------------------------------------------------------ buttons --- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  font-family: var(--font-head);
  font-weight: 800;
  font-size: 1.05rem;
  line-height: 1.15;
  text-decoration: none;
  text-align: center;
  padding: 15px 30px;
  border: 0;
  border-radius: 999px;
  cursor: pointer;
  transition: transform 0.12s ease, box-shadow 0.12s ease, filter 0.12s ease;
}

.btn--primary {
  background: linear-gradient(180deg, var(--orange), var(--orange-dark));
  color: #fff;
  box-shadow: 0 6px 0 var(--orange-sh);
}

.btn--secondary {
  background: var(--cream);
  color: var(--navy);
  box-shadow: var(--shadow-pill);
}

.btn--ghost {
  background: rgba(255, 255, 255, 0.22);
  color: #fff;
  border: 2px solid rgba(255, 255, 255, 0.75);
}

.btn--big { font-size: 1.2rem; padding: 18px 40px; }
.btn--block { width: 100%; }

.btn:hover { transform: translateY(-2px); filter: brightness(1.03); }
.btn:active { transform: translateY(2px); box-shadow: 0 2px 0 var(--orange-sh); }

.btn:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible {
  outline: 3px solid var(--orange-dark);
  outline-offset: 3px;
}

/* ------------------------------------------------------------- header --- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 60;
  background: rgba(255, 253, 247, 0.94);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid rgba(23, 53, 107, 0.09);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-block: 10px;
}

.site-header__logo img { width: clamp(132px, 26vw, 190px); }

.site-header__actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.header-phone {
  font-family: var(--font-head);
  font-weight: 800;
  font-size: 1.02rem;
  color: var(--navy);
  text-decoration: none;
  white-space: nowrap;
}
.header-phone:hover { color: var(--orange-dark); }

/* On phones the header button wraps and doubles the header height, pushing
   the headline down. The sticky bar at the bottom already carries the same
   action, so the header keeps just the logo and a tappable phone number. */
@media (max-width: 600px) {
  .site-header__actions .btn { display: none; }
  .site-header__logo img { width: 138px; }
  .header-phone { font-size: 1.08rem; }
}

/* --------------------------------------------------------------- hero --- */

.hero {
  position: relative;
  background: linear-gradient(180deg,
              var(--sky-top) 0%, var(--sky-mid) 24%,
              var(--sky-low) 58%, var(--sky-pale) 82%);
  padding: clamp(44px, 7vw, 76px) 0 0;
  overflow: hidden;
  isolation: isolate;
}

.hero__inner {
  position: relative;
  z-index: 3;
  padding-bottom: clamp(150px, 22vw, 230px);
}

.hero h1 { text-shadow: 0 3px 0 rgba(255, 255, 255, 0.65); }
.hero h1 .accent { color: var(--orange-dark); }

.hero__sub {
  font-size: clamp(1.08rem, 2.7vw, 1.4rem);
  font-weight: 800;
  color: var(--navy-soft);
  max-width: 34ch;
  margin: 0 auto 26px;
}

.hero__badge {
  display: inline-block;
  background: var(--cream);
  color: var(--navy);
  font-family: var(--font-head);
  font-weight: 800;
  font-size: clamp(0.72rem, 1.9vw, 0.86rem);
  letter-spacing: 2px;
  text-transform: uppercase;
  padding: 9px 22px;
  border-radius: 999px;
  box-shadow: var(--shadow-pill);
  margin-bottom: 22px;
}

/* the tilted "first session free" flash, straight from the ad creative */
.flash {
  display: inline-block;
  background: linear-gradient(180deg, var(--orange), var(--orange-dark));
  color: #fff;
  font-family: var(--font-head);
  font-weight: 800;
  font-size: clamp(1.25rem, 4vw, 1.9rem);
  letter-spacing: 0.5px;
  padding: 13px 34px;
  border-radius: 16px;
  box-shadow: 0 8px 0 var(--orange-sh);
  transform: rotate(-2deg);
  margin-bottom: 28px;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
  margin-bottom: 18px;
}

.hero__note {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--navy-soft);
}

/* clouds */
.cloud {
  position: absolute;
  background: #fff;
  border-radius: 999px;
  opacity: 0.85;
  z-index: 1;
  pointer-events: none;
}
.cloud::before, .cloud::after {
  content: "";
  position: absolute;
  background: #fff;
  border-radius: 50%;
}
.cloud--1 { width: 160px; height: 44px; top: 14%; left: 4%; }
.cloud--1::before { width: 66px; height: 66px; top: -32px; left: 26px; }
.cloud--1::after  { width: 46px; height: 46px; top: -19px; left: 88px; }
.cloud--2 { width: 124px; height: 36px; top: 8%; right: 6%; opacity: 0.68; }
.cloud--2::before { width: 52px; height: 52px; top: -25px; left: 20px; }
.cloud--2::after  { width: 38px; height: 38px; top: -15px; left: 66px; }
.cloud--3 { width: 104px; height: 30px; top: 47%; right: 12%; opacity: 0.5; }
.cloud--3::before { width: 42px; height: 42px; top: -19px; left: 17px; }
.cloud--3::after  { width: 30px; height: 30px; top: -11px; left: 54px; }

/* rolling hills - sits at the bottom of any sky panel */
.hills {
  position: absolute;
  bottom: -1px;
  left: 0;
  width: 100%;
  height: clamp(120px, 18vw, 190px);
  z-index: 2;
  display: block;
  pointer-events: none;
}

/* ------------------------------------------------------- trust strip --- */

.trust {
  background: var(--green-dark);
  color: #fff;
  padding: 18px 0;
}

.trust__list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 10px 28px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-weight: 800;
  font-size: 0.97rem;
  text-align: center;
}

.trust__list li {
  display: flex;
  align-items: center;
  gap: 8px;
}

.trust__list svg { flex: none; width: 19px; height: 19px; }

/* ------------------------------------------------------------- cards --- */

.grid {
  display: grid;
  gap: 22px;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  align-items: stretch;
}

.card {
  background: var(--cream);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 26px 24px 28px;
  box-shadow: var(--shadow-card);
  display: flex;
  flex-direction: column;
}

.card__chip {
  align-self: flex-start;
  font-family: var(--font-head);
  font-weight: 800;
  font-size: 0.8rem;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: #fff;
  background: var(--blue-dark);
  padding: 7px 16px;
  border-radius: 999px;
  margin-bottom: 16px;
}
.card--p6    .card__chip { background: var(--green-dark); }
.card--mid   .card__chip { background: var(--blue-dark); }
.card--vce   .card__chip { background: var(--navy); }

.card h3 { margin-bottom: 8px; }

.card__subjects {
  font-size: 0.98rem;
  color: var(--navy-mute);
  margin-bottom: 18px;
}

.card__price {
  margin-top: auto;
  padding-top: 18px;
  border-top: 1px dashed rgba(23, 53, 107, 0.2);
}

.card__price .amount {
  font-family: var(--font-head);
  font-weight: 800;
  font-size: 2.1rem;
  color: var(--navy);
  line-height: 1;
}

.card__price .per {
  font-weight: 800;
  font-size: 0.95rem;
  color: var(--navy-mute);
}

.card__price .sibling {
  display: block;
  margin-top: 7px;
  font-size: 0.92rem;
  font-weight: 800;
  color: var(--green-dark);
}

/* ------------------------------------------------------------ tutors --- */

.tutors {
  display: grid;
  gap: 34px;
  margin-top: 42px;
}

@media (min-width: 680px) {
  .tutors {
    grid-template-columns: 1fr 1fr;
    gap: 40px;
  }
}

/* The headshots are cut out onto pure white. On the pale sky panel a bare white
   rectangle would float with no edge, so the shadow is what defines it. */
.tutor__photo {
  display: block;
  width: 100%;
  max-width: 240px;
  height: auto;
  margin: 0 auto 18px;
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
}

.tutor__name {
  margin-bottom: 2px;
  color: var(--navy);
}

.tutor__role {
  font-weight: 800;
  font-size: 0.92rem;
  color: var(--orange-dark);
  margin-bottom: 14px;
}

/* The section is centred, but a 110-word bio set centred is hard to read. */
.tutor__bio {
  text-align: left;
  color: var(--navy-soft);
  font-size: 1rem;
  line-height: 1.7;
  margin-bottom: 0;
}

/* ------------------------------------------------ session walkthrough --- */

.section--tint { background: var(--sky-pale); }
.section--cream { background: var(--cream); }

.steps {
  display: grid;
  gap: 18px;
  margin-top: 34px;
  counter-reset: step;
}

.step {
  position: relative;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 24px 26px 24px 78px;
  box-shadow: var(--shadow-card);
}

.step::before {
  counter-increment: step;
  content: counter(step);
  position: absolute;
  left: 24px;
  top: 24px;
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: linear-gradient(180deg, var(--orange), var(--orange-dark));
  color: #fff;
  font-family: var(--font-head);
  font-weight: 800;
  font-size: 1.15rem;
}

.step h3 { margin-bottom: 6px; font-size: 1.15rem; }
.step p { font-size: 1rem; margin-bottom: 0; }

.step__when {
  display: block;
  font-family: var(--font-body);
  font-weight: 800;
  font-size: 0.82rem;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--orange-dark);
  margin-bottom: 3px;
}

/* --------------------------------------------------------- about/team --- */

.split {
  display: grid;
  gap: clamp(26px, 5vw, 52px);
  align-items: center;
  grid-template-columns: 1fr;
}

@media (min-width: 860px) {
  .split { grid-template-columns: 1fr 1fr; }
  .split--photo-right .split__media { order: 2; }
}

.split__media img {
  width: 100%;
  border-radius: var(--radius);
  box-shadow: var(--shadow-lift);
}

.tick-list {
  list-style: none;
  margin: 0 0 1.3em;
  padding: 0;
  display: grid;
  gap: 11px;
}

.tick-list li {
  position: relative;
  padding-left: 34px;
  font-weight: 700;
}

.tick-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 4px;
  width: 21px;
  height: 21px;
  border-radius: 50%;
  background: var(--green) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center / 13px no-repeat;
}

/* ----------------------------------------------------------- venue box --- */

.venue {
  background: var(--navy);
  color: #fff;
  border-radius: var(--radius);
  padding: clamp(26px, 4vw, 40px);
  display: grid;
  gap: 22px;
  align-items: center;
}

@media (min-width: 800px) {
  .venue { grid-template-columns: 1.1fr 1fr; }
}

.venue h2 { color: #fff; }
.venue p { color: rgba(255, 255, 255, 0.9); }
.venue a { color: #FFD9B8; }

.venue__address {
  font-family: var(--font-head);
  font-weight: 800;
  font-size: 1.25rem;
  color: #fff;
  margin-bottom: 6px;
}

/* ----------------------------------------------------------------- faq --- */

.faq { display: grid; gap: 12px; margin-top: 30px; }

.faq details {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: var(--shadow-card);
  overflow: hidden;
}

.faq summary {
  cursor: pointer;
  list-style: none;
  padding: 18px 54px 18px 22px;
  position: relative;
  font-family: var(--font-head);
  font-weight: 800;
  font-size: 1.08rem;
  color: var(--navy);
}
.faq summary::-webkit-details-marker { display: none; }

.faq summary::after {
  content: "";
  position: absolute;
  right: 22px;
  top: 50%;
  width: 11px;
  height: 11px;
  margin-top: -7px;
  border-right: 3px solid var(--orange-dark);
  border-bottom: 3px solid var(--orange-dark);
  transform: rotate(45deg);
  transition: transform 0.18s ease;
}
.faq details[open] summary::after { transform: rotate(-135deg); margin-top: -3px; }

.faq .faq__body { padding: 0 22px 20px; font-size: 1rem; }

/* ---------------------------------------------------------------- form --- */

.form-section {
  position: relative;
  background: linear-gradient(180deg, var(--sky-mid) 0%, var(--sky-pale) 62%);
  overflow: hidden;
}

.form-card {
  position: relative;
  z-index: 3;
  background: var(--cream);
  border-radius: 22px;
  padding: clamp(26px, 4.4vw, 42px);
  box-shadow: var(--shadow-lift);
  max-width: 660px;
  margin-inline: auto;
}

.form-card h2 { margin-bottom: 6px; }

.form-card__intro {
  font-size: 1rem;
  color: var(--navy-soft);
  margin-bottom: 26px;
}

.field { margin-bottom: 17px; }

.field label {
  display: block;
  font-weight: 800;
  font-size: 0.97rem;
  color: var(--navy);
  margin-bottom: 6px;
}

.field .opt {
  font-weight: 700;
  font-size: 0.85rem;
  color: var(--navy-mute);
}

.field input,
.field select,
.field textarea {
  width: 100%;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 16px; /* 16px stops iOS zooming on focus */
  color: var(--navy);
  background: #fff;
  border: 2px solid var(--line);
  border-radius: 12px;
  padding: 13px 14px;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.field textarea { min-height: 96px; resize: vertical; }

.field select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2317356B' stroke-width='3' stroke-linecap='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 17px;
  padding-right: 42px;
}

.field input:focus,
.field select:focus,
.field textarea:focus {
  border-color: var(--orange);
  box-shadow: 0 0 0 4px rgba(245, 130, 42, 0.16);
  outline: none;
}

.field--half-row {
  display: grid;
  gap: 0 16px;
  grid-template-columns: 1fr;
}
@media (min-width: 560px) {
  .field--half-row { grid-template-columns: 1fr 1fr; }
}

.field.is-invalid input,
.field.is-invalid select {
  border-color: #C4331B;
  background: #FFF7F5;
}

.field__error {
  display: none;
  margin-top: 6px;
  font-size: 0.88rem;
  font-weight: 800;
  color: #C4331B;
}
.field.is-invalid .field__error { display: block; }

/* honeypot - hidden from people, visible to naive bots */
.hp {
  position: absolute !important;
  left: -9999px !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.form-privacy {
  margin-top: 15px;
  font-size: 0.86rem;
  font-weight: 700;
  color: var(--navy-mute);
  text-align: center;
}

.form-alt {
  margin-top: 22px;
  padding-top: 20px;
  border-top: 1px dashed rgba(23, 53, 107, 0.2);
  text-align: center;
  font-size: 0.97rem;
}

.form-alt a { font-weight: 900; text-decoration: none; }
.form-alt a:hover { text-decoration: underline; }

/* success + error states */
.form-status { display: none; }
.form-status.is-shown { display: block; }

.form-success {
  text-align: center;
  padding: 14px 0 6px;
}

.form-success__tick {
  width: 66px;
  height: 66px;
  margin: 0 auto 18px;
  border-radius: 50%;
  background: var(--green) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center / 34px no-repeat;
}

.form-error {
  background: #FFF3F0;
  border: 2px solid #E8A99B;
  border-radius: 12px;
  padding: 16px 18px;
  margin-bottom: 18px;
  font-size: 0.97rem;
  color: #8A2A14;
}
.form-error strong { color: #8A2A14; }

.btn[aria-busy="true"] { opacity: 0.72; pointer-events: none; }

/* --------------------------------------------------------- final CTA --- */

.cta-band {
  background: var(--navy);
  color: #fff;
  text-align: center;
}
.cta-band h2 { color: #fff; }
.cta-band p { color: rgba(255, 255, 255, 0.9); }

.cta-band__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
  margin-top: 24px;
}

/* -------------------------------------------------------------- footer --- */

.site-footer {
  background: #10254A;
  color: rgba(255, 255, 255, 0.82);
  padding: 44px 0 108px; /* bottom room for the mobile action bar */
  font-size: 0.94rem;
}

@media (min-width: 720px) { .site-footer { padding-bottom: 44px; } }

.site-footer a { color: #fff; text-decoration: none; }
.site-footer a:hover { text-decoration: underline; }

.site-footer__grid {
  display: grid;
  gap: 26px;
  grid-template-columns: 1fr;
  margin-bottom: 26px;
}
@media (min-width: 720px) {
  .site-footer__grid { grid-template-columns: 1.4fr 1fr 1fr; }
}

.site-footer h4 {
  color: #fff;
  font-size: 1rem;
  letter-spacing: 0.4px;
  margin-bottom: 10px;
}

.site-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; }

.site-footer__logo { width: 178px; margin-bottom: 14px; }

.site-footer__legal {
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  padding-top: 18px;
  font-size: 0.86rem;
  color: rgba(255, 255, 255, 0.62);
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
  justify-content: space-between;
}

/* --------------------------------------------- mobile sticky call bar --- */

.action-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 70;
  display: flex;
  gap: 10px;
  padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
  background: rgba(255, 253, 247, 0.97);
  border-top: 1px solid rgba(23, 53, 107, 0.12);
  box-shadow: 0 -6px 20px rgba(23, 53, 107, 0.12);
}

.action-bar .btn { flex: 1; padding: 14px 12px; font-size: 1rem; }

@media (min-width: 720px) { .action-bar { display: none; } }

/* ------------------------------------------------------------ utility --- */

.stack-sm > * + * { margin-top: 10px; }
.mt-lg { margin-top: 34px; }
.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}