/* ==========================================================================
   KPGE homepage, redesigned. Loaded only on the front page, on top of
   theme.css, so nothing here reaches the other templates. Serif display
   headings (Playfair Display) over the warm sand palette already in the theme.
   ========================================================================== */

:root {
  --serif: "Cormorant Garamond", "Cormorant Fallback", Georgia, "Times New Roman", serif;
  --home-cream: #faf6f0;
  --home-sand:  #f2e9dd;
  --home-line:  #e7ddd0;
}

/* Typeface set for the homepage: Cormorant Garamond on the headings, Manrope
   on body text, the menu and the buttons. Scoped to .home so the other
   templates keep their own fonts until the redesign is ported. */
.home {
  --serif:   "Cormorant Garamond", "Cormorant Fallback", Georgia, "Times New Roman", serif;
  --display: "Sanford", "Cormorant Garamond", "Cormorant Fallback", Georgia, serif;
  --body:    "Manrope", "Segoe UI", system-ui, -apple-system, sans-serif;
  --label:   "Manrope", "Segoe UI", system-ui, -apple-system, sans-serif;
}

.home main { background: var(--home-cream); }

/* Outline button on a crimson ground */
.btn--on-dark { border-color: rgba(255,255,255,.5); color: #fff; }
.btn--on-dark:hover { background: #fff; color: var(--crimson); border-color: #fff; }

/* Shared section furniture ------------------------------------------------- */
.home-sec { padding: clamp(3.5rem, 6vw, 6rem) 0; }
.home-eyebrow {
  font-family: var(--label);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--clay);
  margin: 0 0 0.9rem;
}
.home-eyebrow--light { color: rgba(255,255,255,.72); }
.display {
  font-family: var(--display);
  font-weight: 600;
  line-height: 1.04;
  letter-spacing: 0;
  color: var(--ink);
  margin: 0;
}
.display em { font-style: italic; color: var(--crimson); font-weight: 600; }
h1.display { font-size: clamp(3.1rem, 4vw, 5.4rem); font-weight: 600; text-transform: capitalize; }
.home-sec-head { max-width: 44rem; margin-bottom: clamp(2rem, 3.5vw, 3rem); }
.home-sec-head .display { font-size: clamp(2.2rem, 4vw, 3.4rem); }
.home-sec-head p { color: var(--ink-soft); font-size: 1.06rem; margin: 0.9rem 0 0; }
.home-sec-head--center { margin-left: auto; margin-right: auto; text-align: center; }

.pill-arrow::after { content: " \2192"; }

/* --- Hero ------------------------------------------------------------------ */
.home-hero {
  position: relative;
  background: var(--home-cream);
  overflow: hidden;
  isolation: isolate;
}
/* Crimson rail down the left edge with the rotated tagline */
.home-hero__bar {
  position: absolute; left: 0; top: 0; bottom: 0; width: 46px; z-index: 2;
  background: var(--crimson);
  display: flex; align-items: center; justify-content: center;
}
.home-hero__bar span {
  writing-mode: vertical-rl; transform: rotate(180deg);
  font-family: var(--label); font-size: 0.6rem; letter-spacing: 0.34em;
  text-transform: uppercase; color: rgba(255,255,255,.82);
}
/* Full-bleed photo panel on the right, diagonally cut on its left edge */
.home-hero__media {
  position: absolute; top: 0; right: 0; bottom: 0; width: 55%; z-index: 0;
  clip-path: polygon(15% 0, 100% 0, 100% 100%, 0 100%);
  background: linear-gradient(160deg, #d9c7b4, #b99f88);
}
.home-hero__media img { width: 100%; height: 100%; object-fit: cover; object-position: 67% 38%; display: block; }

.home-hero__inner {
  position: relative; z-index: 1;
  max-width: 47%;
  min-height: 560px;
  display: flex; flex-direction: column; justify-content: center;
  padding: clamp(2.5rem, 4vw, 4rem) 0 clamp(5.5rem, 8vw, 7.5rem) clamp(4rem, 7vw, 7rem);
}
.home-hero__inner h1 { margin: 0.5rem 0 1.3rem; text-transform: none; }
.home-hero__lede {
  font-size: 1.12rem;
  line-height: 1.6;
  color: var(--ink-soft);
  max-width: 27rem;
  margin: 0 0 2.1rem;
}
.home-hero__actions { display: flex; flex-wrap: wrap; gap: 1.4rem; align-items: center; }
.btn--caps { text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.8rem; }
.hero-link {
  font-family: var(--label); text-transform: uppercase; letter-spacing: 0.08em;
  font-size: 0.8rem; font-weight: 600; color: var(--ink); text-decoration: none;
  display: inline-flex; align-items: center; gap: 0.5rem;
}
.hero-link:hover { color: var(--crimson); }

/* Circular seal, bottom-left, half over the crimson rail */
.home-seal {
  position: absolute; left: clamp(-0.4rem, 0vw, 0.6rem); bottom: clamp(5rem, 9vw, 7.5rem);
  z-index: 3;
  width: 110px; height: 110px; border-radius: 50%;
  background: var(--home-cream);
  border: 1.5px solid var(--crimson);
  box-shadow: inset 0 0 0 3px var(--home-cream), inset 0 0 0 4.5px rgba(168,30,50,.45);
  display: grid; place-content: center; text-align: center;
  color: var(--crimson); font-family: var(--label);
  font-size: 0.56rem; letter-spacing: 0.16em; text-transform: uppercase; line-height: 1.55;
}
.home-seal strong { display: block; font-size: 1.2rem; letter-spacing: 0.04em; margin-top: 1px; }

/* Stats bar that overlaps the bottom of the hero */
.stat-panel {
  position: relative;
  z-index: 3;
  margin: -3.5rem auto 0;
  display: grid;
  grid-template-columns: minmax(120px, 145px) 1fr;
  background: linear-gradient(155deg, #8f1f31 0%, var(--crimson-deep) 100%);
  border-radius: 22px;
  overflow: hidden;
  box-shadow: 0 40px 80px -46px rgba(27,22,24,.7);
}
/* The panel takes the image's own aspect ratio instead of cropping it —
   the building is shown whole, and the stats centre against it. */
.stat-panel__media { position: relative; display: flex; }
.stat-panel__media img { width: 100%; height: auto; object-fit: contain; display: block; align-self: center; }
.stat-panel__grid { display: grid; grid-template-columns: repeat(4, 1fr); }
.stat-cell {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 0.7rem;
  padding: 1rem;
  text-align: center;
  color: #f4e7d1;
}
.stat-panel__grid .stat-cell:first-child { border-left: 0; }
.stat-cell__ico svg { width: 30px; height: 30px; opacity: .85; }
.stat-cell__fig {
  font-family: var(--display);
  font-size: clamp(2rem, 2.6vw, 3rem);
  font-weight: 600;
  line-height: 1;
  color: #f7ecd8;
}
.stat-cell__lab {
  font-family: var(--label);
  font-size: 0.8rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(244,231,209,.72);
}
.stat-cell--accent .stat-cell__lab { position: relative; padding-bottom: 0.7rem; }
.stat-cell--accent .stat-cell__lab::after {
  content: ""; position: absolute; left: 50%; bottom: 0; transform: translateX(-50%);
  width: 46px; height: 2px; background: rgba(244,231,209,.55); border-radius: 2px;
}
/* Qualifier under a stat (e.g. where the university access comes from). */
.stat-cell__note {
  margin-top: -0.35rem;
  font-family: var(--label);
  font-size: 0.6rem;
  line-height: 1.4;
  letter-spacing: 0.02em;
  text-transform: none;
  color: rgba(244,231,209,.62);
  max-width: 18ch;
}
@media (max-width: 820px) {
  .stat-panel { grid-template-columns: 1fr; margin-top: 1.5rem; }
  /* stats only on mobile — the campus photo is hidden */
  .stat-panel__media { display: none; }
  .stat-panel__grid { grid-template-columns: 1fr 1fr; padding: 0.6rem 0.5rem; }
  .stat-cell { border-left: 0; padding: 1.9rem 1rem; }
  .stat-panel__grid .stat-cell:nth-child(even) { border-left: 1px solid rgba(255,255,255,.14); }
  .stat-panel__grid .stat-cell:nth-child(n+3) { border-top: 1px solid rgba(255,255,255,.14); }
}

/* --- Support / services bento --------------------------------------------- */
.support-grid {
  display: grid;
  grid-template-columns: 0.92fr 1.02fr 1fr 1fr;
  grid-template-rows: auto 12rem auto;
  grid-template-areas:
    "head  photo appl  schol"
    "feat  photo appl  schol"
    "feat  visa  accom once";
  gap: 1rem;
}
/* Heading that lives in the top-left cell of the bento */
.support-head { grid-area: head; align-self: start; padding-right: 0.5rem; }
.support-head .home-eyebrow { margin-bottom: 0.7rem; }
.support-head .display { font-size: clamp(1.85rem, 3vw, 2.7rem); }
.support-head__rule { display: block; width: 46px; height: 3px; border-radius: 2px; background: var(--crimson); margin-top: 1rem; }
/* The large photo panel in the centre, no text */
.support-photo {
  grid-area: photo;
  border-radius: 16px;
  overflow: hidden;
  background: linear-gradient(160deg, #d9c7b4, #b99f88);
  min-height: 240px;
}
.support-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.support-card {
  position: relative;
  display: flex;
  border-radius: 16px;
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--home-line);
  min-height: 210px;
  text-decoration: none;
  color: inherit;
  transition: transform .2s var(--ease), box-shadow .2s var(--ease);
}
.support-card:hover { transform: translateY(-3px); box-shadow: 0 24px 40px -28px rgba(27,22,24,.4); }
.support-card__body { padding: 1.5rem 1.6rem; display: flex; flex-direction: column; gap: 0.5rem; }
.support-card__no { font-family: var(--serif); font-size: 0.95rem; color: var(--clay); }
.support-card__body h3 { font-family: var(--display); font-weight: 600; font-size: 1.35rem; margin: 0.1rem 0 0.3rem; line-height: 1.15; }
.support-card__body p { color: var(--ink-soft); font-size: 0.95rem; margin: 0; }
.support-card__arrow { margin-top: auto; color: var(--crimson); font-size: 1.3rem; line-height: 1; }
.support-card__icon { width: 34px; height: 34px; color: var(--crimson); }
.support-card__icon svg { width: 100%; height: 100%; }

.support-card--feature {
  grid-area: feat;
  background: var(--crimson);
  color: #fff;
  border-color: var(--crimson);
  align-items: flex-end;
}
.support-card--feature .support-card__no { color: rgba(255,255,255,.7); }
.support-card--feature h3 { color: #fff; font-size: 1.7rem; }
.support-card--feature p { color: rgba(255,255,255,.82); }
.support-card--feature .support-card__arrow { color: #fff; }

.support-card--photo { min-height: 250px; align-items: flex-end; color: #fff; border: 0; }
.support-card__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.support-card--photo::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(27,22,24,0) 30%, rgba(27,22,24,.82) 100%);
  z-index: 1;
}
.support-card--photo .support-card__body { position: relative; z-index: 2; }
.support-card--photo h3 { color: #fff; }
.support-card--photo p { color: rgba(255,255,255,.85); }
.support-card--photo .support-card__no { color: rgba(255,255,255,.8); }

.support-card--icon .support-card__body { gap: 0.6rem; }

/* --- Destinations showcase ------------------------------------------------ */
.dest-show { position: relative; background: var(--home-sand); overflow: hidden; }
.dest-show__watermark {
  position: absolute; top: 1.5rem; left: 0; right: 0;
  text-align: center;
  font-family: var(--serif);
  font-weight: 700;
  font-size: clamp(4rem, 13vw, 11rem);
  letter-spacing: 0.02em;
  color: rgba(168,30,50,.06);
  pointer-events: none;
  line-height: 1;
  user-select: none;
}
/* Wider than the standard shell so the title fits on one line and the tiles
   are larger. */
.dest-show .shell { width: min(100% - 2.5rem, 1440px); }
.dest-show .home-sec-head { position: relative; z-index: 1; max-width: none; }
.dest-row {
  position: relative; z-index: 1;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1.1rem;
}
.dest-tile {
  position: relative;
  display: block;
  border-radius: 14px;
  overflow: hidden;
  aspect-ratio: 3 / 4.6;
  text-decoration: none;
  box-shadow: 0 24px 44px -30px rgba(27,22,24,.55);
}
.dest-tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ease); }
.dest-tile:hover img { transform: scale(1.06); }
.dest-tile::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(27,22,24,0) 40%, rgba(27,22,24,.85) 100%);
}
.dest-tile__cap { position: absolute; left: 1rem; right: 1rem; bottom: 1rem; z-index: 1; color: #fff; }
.dest-tile__name { font-family: var(--display); font-size: 1.35rem; font-weight: 600; line-height: 1.1; display: block; }
.dest-tile__go { font-family: var(--label); font-size: 0.82rem; margin-top: 0.4rem; display: inline-flex; align-items: center; gap: 0.3rem; color: rgba(255,255,255,.9); }

/* --- The group band ------------------------------------------------------- */
.group-band { background: var(--crimson); color: #fff; overflow: hidden; position: relative; }
.group-band { padding-block: clamp(2.5rem, 4vw, 4rem); }
/* Large photo anchored to the left, bleeding off the top, bottom and left of
   the crimson band (the band's overflow:hidden clips it into an arc). */
.group-band__photo {
  position: absolute; z-index: 0;
  /* overshoot the band's vertical padding; the band's overflow:hidden clips it
     to the true top/bottom edges, so the photo fills the band with no gap */
  top: -4.5rem; bottom: -4.5rem;
  /* pull from the shell edge out to the crimson band's true left edge */
  left: calc((100% - 100vw) / 2);
  width: clamp(360px, 42vw, 640px);
  aspect-ratio: auto; max-width: none;
  overflow: hidden;
}
.group-band__photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Blend the right edge of the photo into the crimson band. */
.group-band__photo::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(168,30,50,0) 45%, var(--crimson) 100%);
}
.group-band .shell { width: min(100% - 2.5rem, 1400px); }
.group-band__grid {
  position: relative; z-index: 1;
  display: block;
  padding-left: clamp(390px, 44vw, 660px);
}
.group-band .display { color: #fff; }
.group-band__grid p { color: rgba(255,255,255,.82); font-size: 1.05rem; line-height: 1.65; margin: 1rem 0 0; }
.group-band__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-areas: "intro stats" "cta stats";
  gap: 0 clamp(1.5rem, 2.5vw, 2.5rem);
  align-items: start;
}
.group-band__inner > * { min-width: 0; }
.group-band__intro { grid-area: intro; }
.group-band__inner .group-stats { grid-area: stats; align-self: center; }
.group-band__cta { grid-area: cta; margin: 1.6rem 0 0; }
.group-stats__fig { white-space: nowrap; }
.group-stats {
  background: #fff;
  border-radius: 16px;
  display: grid; grid-template-columns: 1fr 1fr;
  overflow: hidden;
  box-shadow: 0 30px 60px -40px rgba(0,0,0,.55);
}
.group-stats__cell {
  display: flex; align-items: flex-start; gap: 0.85rem;
  padding: 1.4rem 1.4rem;
  border-right: 1px solid var(--home-line);
  border-bottom: 1px solid var(--home-line);
}
.group-stats__cell:nth-child(2n) { border-right: 0; }
.group-stats__cell:nth-last-child(-n+2) { border-bottom: 0; }
.group-stats__ico {
  flex-shrink: 0; width: 40px; height: 40px;
  display: grid; place-content: center;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--crimson) 0%, var(--crimson-deep) 100%); color: #fff;
}
.group-stats__ico svg { width: 21px; height: 21px; }
.group-stats__fig { display: block; font-family: var(--body); font-size: 1.55rem; font-weight: 700; letter-spacing: -0.01em; color: var(--ink); line-height: 1.05; }
.group-stats__lab { display: block; font-family: var(--label); font-size: 0.8rem; color: var(--ink-soft); margin-top: 4px; }

/* --- Journey / process ---------------------------------------------------- */
.journey { background: var(--home-cream); }
.journey .home-sec-head { max-width: none; }
.journey__track { position: relative; }
.journey__line { position: absolute; top: 26px; left: 6%; right: 6%; height: 40px; z-index: 0; overflow: visible; }
.journey__steps {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 1rem;
}
.journey__step { text-align: center; padding: 0 0.5rem; }
.journey__no {
  width: 54px; height: 54px; margin: 0 auto 1rem;
  display: grid; place-content: center;
  border-radius: 50%;
  background: var(--crimson);
  color: #fff;
  font-family: var(--body);
  font-size: 1.25rem; font-weight: 700;
  box-shadow: 0 0 0 6px var(--home-cream), 0 12px 24px -12px rgba(125,21,36,.7);
}
.journey__step h3 { font-family: var(--display); font-weight: 600; font-size: 1.2rem; margin: 0 0 0.4rem; }
.journey__step p { color: var(--ink-soft); font-size: 0.92rem; margin: 0; }

/* --- Voices / stories ----------------------------------------------------- */
.voices { background: var(--home-sand); }
.voices .shell { width: min(100% - 2.5rem, 1440px); }
/* Let the heading use the full width so it stays on one line (the shared
   44rem cap on .home-sec-head was forcing it to wrap). */
.voices .home-sec-head { max-width: none; }
/* The eyebrow carries a 0.9rem top margin that made the space above the
   heading larger than the space below the cards — zero it so the section's
   top and bottom padding read as equal. */
.voices .home-sec-head .home-eyebrow { margin-top: 0; }
.voices__slider { position: relative; }
/* A slider at every width — only the number of cards in view changes.
   --voices-gap and --voices-per drive the slide width, so a breakpoint sets
   one number instead of restating the calc. */
.voices__track {
  --voices-gap: 1.4rem;
  --voices-per: 3;
  display: flex;
  gap: var(--voices-gap);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  padding-bottom: 4px;
}
.voices__track::-webkit-scrollbar { display: none; }
.voice {
  display: flex;
  margin: 0;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 24px 45px -30px rgba(27,22,24,.4);
  min-height: 380px;
  /* Each slide takes its share of the track once the gaps between the
     visible cards are removed, so a half card never peeks in at the edge. */
  flex: 0 0 calc((100% - (var(--voices-per) - 1) * var(--voices-gap)) / var(--voices-per));
  scroll-snap-align: start;
}
/* Arrows and dots only once there is actually something off-screen — with
   three cards and three in view there is nothing to page through. */
.voices__nav { display: none; align-items: center; justify-content: center; gap: 1.1rem; margin-top: 1.9rem; }
.voices__slider.is-scrollable .voices__nav { display: flex; }
.voices__arrow {
  width: 46px; height: 46px; flex-shrink: 0;
  border-radius: 50%; border: 1px solid var(--home-line);
  background: #fff; color: var(--crimson);
  font-size: 1.5rem; line-height: 1; cursor: pointer;
  display: grid; place-content: center;
  transition: background .18s var(--ease), color .18s var(--ease), border-color .18s var(--ease);
}
.voices__arrow:hover { background: var(--crimson); color: #fff; border-color: var(--crimson); }
.voices__dots { display: flex; align-items: center; gap: 0.5rem; }
.voices__dot { width: 9px; height: 9px; padding: 0; border: 0; border-radius: 50%; background: rgba(27,22,24,.2); cursor: pointer; transition: width .2s var(--ease), background .2s var(--ease); }
.voices__dot.is-active { width: 26px; border-radius: 5px; background: var(--crimson); }
.voice__photo { flex: 0 0 42%; background: linear-gradient(160deg,#d9c7b4,#b99f88); overflow: hidden; }
.voice__photo img { width: 100%; height: 100%; object-fit: cover; }
.voice__quote {
  flex: 1 1 auto; min-width: 0; margin: 0;
  background: #f3ebe0; color: var(--ink);
  padding: 1.5rem 1.4rem;
  display: flex; flex-direction: column;
}
.voice__mark { font-family: var(--serif); font-weight: 700; font-size: 2.5rem; line-height: 0.7; height: 1rem; color: var(--crimson); }
.voice__quote p { font-size: 0.86rem; line-height: 1.5; color: var(--ink-soft); margin: 0.75rem 0 1rem; }
.voice__cred { margin-top: auto; }
.voice__name { font-weight: 700; font-size: 0.95rem; color: var(--ink); display: block; }
.voice__role { font-size: 0.8rem; color: var(--ink-faint); display: block; margin-top: 2px; line-height: 1.35; }
.voice__pending { color: var(--ink-soft); font-style: italic; }

/* Featured middle card, crimson */
.voice--featured .voice__quote { background: linear-gradient(150deg, #b0233a 0%, var(--crimson) 42%, var(--crimson-deep) 100%); color: #fff; }
.voice--featured .voice__mark { color: rgba(255,255,255,.85); }
.voice--featured .voice__quote p { color: rgba(255,255,255,.9); }
.voice--featured .voice__name { color: #fff; }
.voice--featured .voice__role { color: rgba(255,255,255,.72); }
.voice--featured .voice__pending { color: rgba(255,255,255,.8); }

/* Testimonial breakpoints ---------------------------------------------------
   Three cards in view on desktop, two on tablets, one on phones. Only
   --voices-per changes; the slide-width calc above does the rest.

   How the card lays itself out is a separate question from how many are in
   view. The quote only reads well from about 28 characters a line, and beside
   the photo across three columns that needs roughly 1380px. Below that the
   photo moves on top so the text keeps its width. */
@media (max-width: 1380px) {
  .voice { flex-direction: column; min-height: 0; }
  .voice__photo { flex: 0 0 auto; aspect-ratio: 4 / 3; }
  .voice__photo img { object-position: center 22%; }
}
@media (max-width: 1023px) {
  .voices__track { --voices-per: 2; }
}
@media (max-width: 700px) {
  .voices__track { --voices-per: 1; --voices-gap: 1rem; }
  /* A full-width slide with a 4:3 photo runs very tall, so square it off. */
  .voice__photo { aspect-ratio: 1 / 1; }
}

/* --- Plan band CTA (photo left, crimson call-to-action right) ------------- */
.plan-band { background: var(--crimson); color: #fff; overflow: hidden; }
.plan-band__grid { display: grid; grid-template-columns: 1fr 1fr; align-items: stretch; }
.plan-band__photo { position: relative; min-height: 360px; background: linear-gradient(160deg,#d9c7b4,#b99f88); }
.plan-band__photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.plan-band__content {
  position: relative;
  padding: clamp(2.5rem, 5vw, 4.5rem) clamp(1.75rem, 5vw, 4.5rem);
  display: flex; flex-direction: column; justify-content: center;
  background: linear-gradient(145deg, #b0233a 0%, var(--crimson) 40%, var(--crimson-deep) 100%);
}
.plan-band .display { color: #fff; font-size: clamp(1.9rem, 3.2vw, 2.85rem); }
.plan-band__content > p { color: rgba(255,255,255,.85); font-size: 1.05rem; line-height: 1.6; margin: 1rem 0 1.9rem; max-width: 30rem; }
.plan-band__actions { display: flex; flex-wrap: wrap; gap: 1rem; }
.wa-ico { width: 20px; height: 20px; margin-right: 0.15rem; }
.plan-trust { display: inline-flex; align-items: center; gap: 0.5rem; font-family: var(--label); font-size: 0.9rem; color: rgba(255,255,255,.85); margin-top: 1.7rem; }
.plan-trust svg { width: 18px; height: 18px; flex-shrink: 0; }
.btn--light { background: #fff; color: var(--crimson); }
.btn--light:hover { background: #f3ece2; color: var(--crimson-deep); }

/* --- FAQ ------------------------------------------------------------------ */
.home-faq { background: var(--home-cream); }
.home-faq__grid { display: grid; grid-template-columns: 0.95fr 1.05fr; gap: clamp(2rem,4vw,3.5rem); align-items: start; }
.home-faq__aside .display { font-size: clamp(1.8rem,3vw,2.5rem); }
/* Matches .home-sec-head p, which is the intro style used by every other
   section — this heading just does not sit in a .home-sec-head wrapper. */
.home-faq__lede { color: var(--ink-soft); font-size: 1.06rem; line-height: 1.6; max-width: 34rem; margin: 0.9rem 0 0; }
.home-faq__photo { border-radius: 16px; overflow: hidden; aspect-ratio: 4/3; margin: 1.4rem 0; background: linear-gradient(160deg,#d9c7b4,#b99f88); }
.home-faq__photo img { width: 100%; height: 100%; object-fit: cover; }
.home-faq__pin { display: flex; align-items: center; gap: 0.6rem; font-family: var(--label); font-size: 0.9rem; color: var(--ink-soft); }
.home-faq__pin svg { width: 20px; height: 20px; color: var(--crimson); flex-shrink: 0; }

/* Contact details — sit between the CTA heading and the photo */
.home-faq__contact { margin-top: 1.6rem; }
.home-faq__contact-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; }
.home-faq__contact-list li { display: flex; align-items: flex-start; gap: 0.85rem; }
.home-faq__contact-ico {
  flex-shrink: 0; width: 38px; height: 38px; border-radius: 50%;
  display: grid; place-content: center;
  background: rgba(168,30,50,.08); color: var(--crimson);
}
.home-faq__contact-ico svg { width: 19px; height: 19px; }
.home-faq__contact-text { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; }
.home-faq__contact-lab {
  font-family: var(--label); font-size: 0.72rem; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-soft);
}
.home-faq__contact-text a,
.home-faq__contact-text { font-size: 1.02rem; color: var(--ink); line-height: 1.45; overflow-wrap: anywhere; }
.home-faq__contact-text a { text-decoration: none; }
.home-faq__contact-text a:hover { color: var(--crimson); text-decoration: underline; }
@media (max-width: 600px) {
  .home-faq__contact { margin-top: 1.2rem; }
  .home-faq__contact-list { gap: 0.85rem; }
  .home-faq__contact-ico { width: 34px; height: 34px; }
  .home-faq__contact-text, .home-faq__contact-text a { font-size: 0.95rem; }
}
/* Enquiry form sits where the FAQ used to; submit button spans the card. */
.home-faq__form .btn { width: 100%; justify-content: center; margin-top: 0.5rem; }
/* FAQ shifted to a full-width block below the two columns. */
.home-faq__below { margin-top: clamp(2.5rem,5vw,4rem); padding-top: clamp(2rem,4vw,3rem); border-top: 1px solid var(--home-line); }
.home-faq__below-eyebrow { text-align: center; margin-bottom: 1.4rem; }
.home-faq__below .faq { max-width: 900px; margin-inline: auto; }

/* --- Reads / insights ----------------------------------------------------- */
.reads { background: var(--home-sand); }
.reads__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; margin-bottom: 2rem; }
.reads__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.3rem; }
.read {
  background: #fff; border-radius: 14px; overflow: hidden;
  border: 1px solid var(--home-line); text-decoration: none; color: inherit;
  display: flex; flex-direction: column;
  transition: transform .2s var(--ease), box-shadow .2s var(--ease);
}
.read:hover { transform: translateY(-3px); box-shadow: 0 24px 40px -28px rgba(27,22,24,.4); }
.read__figure { aspect-ratio: 16/10; overflow: hidden; }
.read__figure img { width: 100%; height: 100%; object-fit: cover; }
.read__body { padding: 1.3rem 1.4rem; display: flex; flex-direction: column; gap: 0.5rem; }
.read__meta { font-family: var(--label); font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--clay); }
.read__body h3 { font-family: var(--display); font-weight: 600; font-size: 1.2rem; line-height: 1.2; margin: 0; }
.read__more { color: var(--crimson); font-family: var(--label); font-size: 0.88rem; font-weight: 600; margin-top: 0.3rem; }

/* --- Homepage footer, crimson with newsletter ----------------------------- */
.site-footer--home { background: #881A2B; }
.site-footer--home .newsletter { display: flex; gap: 0.5rem; margin-top: 0.8rem; }
.site-footer--home .newsletter input {
  flex: 1; min-width: 0; border: 1px solid rgba(255,255,255,.25);
  background: rgba(255,255,255,.08); color: #fff;
  border-radius: 8px; padding: 0.7rem 0.8rem; font: inherit;
}
.site-footer--home .newsletter input::placeholder { color: rgba(255,255,255,.55); }
.site-footer--home .newsletter button {
  border: 0; border-radius: 8px; padding: 0.7rem 1.1rem;
  background: #fff; color: var(--crimson); font-family: var(--label); font-weight: 700; cursor: pointer;
}

/* --- Responsive ----------------------------------------------------------- */
@media (max-width: 1024px) {
  .home-hero { display: flex; flex-direction: column; }
  .home-hero__bar { display: none; }
  /* Flatten the text wrapper so text, image and button can be reordered:
     text -> image -> button */
  .home-hero__inner { display: contents; }
  .hero-badge { order: 1; margin: 2.4rem 1.25rem 0; }
  .home-hero h1 { order: 1; padding: 0 1.25rem; margin: 0.6rem 0 1rem; }
  .home-hero__lede { order: 1; max-width: 34rem; padding: 0 1.25rem; margin: 0 0 1.6rem; }
  .home-hero__media { order: 2; position: relative; width: 100%; height: 320px; clip-path: none; margin-bottom: 1.6rem; }
  .home-hero__media img { object-position: center 30%; }
  .home-hero__actions { order: 3; padding: 0 1.25rem; }
  .home-hero > .shell { order: 4; }
  /* The hero is stacked from here down, so there is no hero image left for the
     panel to overlap — the -3.5rem pull would land it on top of the CTA
     instead. Reset it at the same breakpoint the hero reflows at, not at 820. */
  .stat-panel { margin-top: 1.5rem; }
  .home-seal { left: auto; right: 1.1rem; bottom: auto; top: 246px; width: 84px; height: 84px; font-size: 0.5rem; }
  .home-seal strong { font-size: 1rem; }
  .support-grid {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: none;
    grid-template-areas: none;
  }
  .support-grid > * { grid-area: auto !important; }
  .support-head { grid-column: 1 / -1; }
  .support-photo { grid-column: 1 / -1; min-height: 200px; }
  .dest-row { grid-template-columns: repeat(3, 1fr); }
  .group-band__grid { display: block; padding-left: 0; }
  .group-band__photo {
    position: relative; inset: auto; transform: none;
    width: 100vw; height: auto; border-radius: 0;
    /* full-bleed, full image (no crop): reach the viewport edges and pull up
       over the band's top padding */
    margin: calc(-1 * clamp(2.5rem, 4vw, 4rem)) 0 1.5rem calc(50% - 50vw);
  }
  .group-band__photo img { height: auto; }
  /* Fade the bottom of the photo into the crimson band. */
  .group-band__photo::after {
    display: block;
    background: linear-gradient(180deg, rgba(168,30,50,0) 55%, var(--crimson) 100%);
  }
  .group-band__inner { grid-template-columns: 1fr; grid-template-areas: "intro" "stats" "cta"; }
  .group-band__inner .group-stats { align-self: stretch; }
  .journey__steps { grid-template-columns: 1fr 1fr; gap: 2rem; position: relative; }
  .journey__line { display: none; }
  /* Two-per-row: connect each pair with a dotted line (the number circle's
     cream ring masks the ends, so it reads as a continuous connector). */
  .journey__step { position: relative; }
  .journey__no { position: relative; z-index: 1; }
  .journey__step:nth-child(odd):not(:nth-child(5))::after {
    content: ""; position: absolute; z-index: 0;
    top: 27px; left: 50%; width: calc(100% + 2rem);
    border-top: 2px dotted var(--crimson); opacity: .5;
  }
  .reads__grid { grid-template-columns: 1fr; }
  .plan-band__grid, .home-faq__grid { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .stat-bar { grid-template-columns: 1fr 1fr; }
  .stat-bar__item:nth-child(2) { border-right: 0; }
  .stat-bar__item:nth-child(-n+2) { border-bottom: 1px solid var(--home-line); }
  .support-grid { grid-template-columns: 1fr; }
  .dest-row { grid-template-columns: 1fr 1fr; }
  /* (testimonials get their own breakpoints further down) */
  .journey__steps { grid-template-columns: 1fr 1fr; gap: 1.75rem 1rem; }
  .journey__step:nth-child(odd):not(:nth-child(5))::after { width: calc(100% + 1rem); }
  .reads__head { flex-direction: column; align-items: flex-start; }
  /* Insights become a swipe slider on mobile only */
  .reads__grid {
    display: flex; grid-template-columns: none;
    gap: 1rem; overflow-x: auto;
    scroll-snap-type: x mandatory; scroll-behavior: smooth;
    scrollbar-width: none; padding-bottom: 4px;
  }
  .reads__grid::-webkit-scrollbar { display: none; }
  .read { flex: 0 0 86%; scroll-snap-align: center; }
}

@media (max-width: 600px) {
  /* Keep the two CTA buttons on one row, smaller, so they fit the phone width */
  .plan-band__actions { flex-wrap: nowrap; gap: 0.5rem; }
  .plan-band__actions .btn { flex: 1 1 0; min-width: 0; font-size: 0.62rem; letter-spacing: 0.02em; padding: 0.72rem 0.5rem; white-space: nowrap; }
  .plan-band__actions .wa-ico { width: 15px; height: 15px; margin-right: 0.12rem; }
}

/* Award badge in the hero ------------------------------------------------- */
.hero-badge {
  display: inline-flex;
  align-self: flex-start;
  align-items: center;
  gap: 0.55rem;
  margin: 0 0 1.2rem;
  padding: 0.6rem 1.15rem;
  background: var(--crimson);
  color: #fff;
  border: 0;
  border-radius: 999px;
  font-family: var(--label);
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  line-height: 1;
}
.hero-badge svg { width: 19px; height: 19px; flex-shrink: 0; }

/* Journey tabs section ---------------------------------------------------- */
.jt-tabs {
  display: flex;
  background: linear-gradient(150deg, #8f1f31 0%, var(--crimson-deep) 100%);
  border-radius: 14px 14px 0 0;
  padding-top: 6px;
}
.jt-tab {
  flex: 1 1 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  padding: 0.72rem 0.7rem;
  font-family: var(--label);
  font-weight: 700;
  font-size: 0.95rem;
  color: rgba(255,255,255,.85);
  position: relative;
  transform: skewX(-14deg);
  transition: color .15s var(--ease);
  white-space: nowrap;
}
/* Un-skew the label so text stays upright inside the angled segment */
.jt-tab > span { display: inline-block; transform: skewX(14deg); }
.jt-tab:first-child { border-top-left-radius: 12px; }
.jt-tab:not(:last-child)::after {
  content: "\2192";
  position: absolute; right: -0.45em; top: 50%;
  transform: translateY(-50%) skewX(14deg);
  color: rgba(255,255,255,.55);
  font-family: var(--label); font-size: 1.05rem; line-height: 1;
}
.jt-tab:not(.jt-tab--active):hover { color: #fff; }
/* Cream button for the active step: a straight rounded box (un-skewed) with
   the accent bar inset from its edges. */
.jt-tab--active {
  background: var(--home-cream);
  color: var(--ink);
  border-radius: 1px;
  margin: 8px 10px;
  padding: 0.72rem 0.9rem 0.72rem 1.55rem;
  transform: none;
  font-family: var(--serif);
  font-weight: 600;
  font-size: 1.52rem;
}
/* Beats .jt-tab:first-child, which would otherwise round the top-left corner */
.jt-tabs .jt-tab--active { border-radius: 1px; }
.jt-tab--active:hover { color: var(--ink); }
.jt-tab--active > span { transform: none; }
.jt-tab--active::before {
  content: "";
  position: absolute;
  left: 0.6rem; top: 50%;
  transform: translateY(-50%);
  width: 4px; height: 56%;
  background: #5D1021;
  border-radius: 2px;
}
.jt-tab--active::after,
.jt-tab:has(+ .jt-tab--active)::after { display: none; }

.jt-panel { display: none; }
.jt-panel--active {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
  padding-top: clamp(2.2rem, 4vw, 3.5rem);
}
.jt-panel__text h2 { font-size: clamp(2.2rem, 4.4vw, 3.4rem); margin: 0; }
.jt-rule { display: block; width: 60px; height: 3px; background: var(--crimson); border-radius: 3px; margin: 1.2rem 0 1.5rem; }
.jt-panel__text p { color: var(--ink-soft); font-size: 1.08rem; line-height: 1.7; margin: 0 0 1.9rem; max-width: 34ch; }
/* Subheading under the panel question. Needs two classes to beat the rule
   above, since it is a <p> too. */
.jt-panel__text .jt-panel__sub {
  font-family: var(--label);
  font-size: 0.92rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--crimson);
  margin: 0.85rem 0 0;
}
.jt-panel__media img {
  width: 100%; height: 100%; max-height: 440px; object-fit: cover;
  border-radius: 16px; display: block;
  box-shadow: 0 34px 66px -44px rgba(27,22,24,.55);
}
/* (mobile handling for the journey section lives in the rail block at the
   bottom of this file — desktop keeps the horizontal folder tabs above) */

/* Services — three-category grid ------------------------------------------ */
.svc3 { padding-top: clamp(1.4rem, 3vw, 2.4rem); background: #881B2B; }
.svc3-head { text-align: center; max-width: 60rem; margin: 0 auto clamp(2rem, 4vw, 3.2rem); }
.svc3-head .display { font-size: clamp(2.1rem, 4.4vw, 3.4rem); color: #f7ecd8; line-height: 1.08; }
.svc3-head p { color: rgba(247,236,216,.82); font-size: 1.08rem; margin: 0.9rem 0 0; }
.svc3-cols { display: grid; grid-template-columns: 1fr 1fr 1fr; align-items: stretch; }
.svc3-col { padding: clamp(1.4rem, 2.4vw, 2.4rem) clamp(1.2rem, 2vw, 2.2rem); }
.svc3-col--feature {
  background: var(--home-cream);
  color: var(--ink);
  border: 1px solid var(--home-line);
  border-radius: 10px;
  padding-block: clamp(1.8rem, 3vw, 3rem);
  margin-top: -1rem;
  box-shadow: 0 40px 80px -50px rgba(0,0,0,.55);
}
.svc3-col--feature .svc3-ico { color: var(--crimson); }
.svc3-col--feature .svc3-item { border-top-color: var(--home-line); }
.svc3-col__title {
  font-family: var(--display); font-weight: 600;
  font-size: clamp(1.5rem, 2.4vw, 2rem);
  text-align: center; color: #f7ecd8; margin: 0 0 1.3rem;
}
.svc3-col--feature .svc3-col__title { color: #5D1021; }
.svc3-list { list-style: none; margin: 0; padding: 0; }
.svc3-item {
  display: flex; align-items: center; gap: 1rem;
  padding: 1.05rem 0.3rem;
  border-top: 1px solid rgba(255,255,255,.16);
}
.svc3-item:first-child { border-top: 0; }
.svc3-ico { flex-shrink: 0; width: 40px; color: #f4e7d1; display: grid; place-content: center; }
.svc3-ico svg { width: 30px; height: 30px; }
.svc3-item > span:last-child { font-size: 1.03rem; color: #f4e7d1; line-height: 1.3; }
.svc3-col--feature .svc3-item > span:last-child { color: var(--ink); }

/* Expandable service items. Native <details> so it works without JS, same as
   the FAQ. The row padding moves to the summary so the whole row is the hit
   target and the body can sit flush under it. */
.svc3-item--acc { display: block; padding: 0 0.3rem; }
.svc3-acc summary {
  display: flex; align-items: center; gap: 1rem;
  padding: 1.05rem 0;
  cursor: pointer; list-style: none;
}
.svc3-acc summary::-webkit-details-marker { display: none; }
.svc3-acc__label { flex: 1; font-size: 1.03rem; color: #f4e7d1; line-height: 1.3; }
.svc3-acc summary::after {
  content: "+";
  flex-shrink: 0;
  font-family: var(--label); font-size: 1.3rem; font-weight: 400; line-height: 1;
  color: rgba(244,231,209,.65);
}
.svc3-acc[open] summary::after { content: "\2212"; }
.svc3-acc > p {
  margin: -0.15rem 0 1.05rem;
  padding-left: calc(40px + 1rem);
  font-size: 0.94rem; line-height: 1.6;
  color: rgba(244,231,209,.78);
}
.svc3-col--feature .svc3-acc__label { color: var(--ink); }
.svc3-col--feature .svc3-acc summary::after { color: rgba(27,22,24,.45); }
.svc3-col--feature .svc3-acc > p { color: var(--ink-soft); }
@media (max-width: 860px) {
  .svc3-cols { grid-template-columns: 1fr; gap: 0.6rem; }
  .svc3-col--feature { margin-top: 0; border-radius: 12px; }
}

/* Enquiry Student/Parent toggle ------------------------------------------- */
.enq-toggle {
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin-bottom: 1.3rem;
  border: 1px solid var(--crimson);
  border-radius: 10px;
  overflow: hidden;
}
.enq-toggle__btn {
  border: 0;
  background: #fff;
  color: var(--crimson);
  font-family: var(--label);
  font-weight: 700;
  font-size: 0.92rem;
  padding: 0.8rem 0.6rem;
  cursor: pointer;
  transition: background .15s var(--ease), color .15s var(--ease);
}
.enq-toggle__btn + .enq-toggle__btn { border-left: 1px solid var(--crimson); }
.enq-toggle__btn.is-active { background: var(--crimson); color: #fff; }

/* FAQ audience toggle */
.faq-toggle { max-width: 340px; margin: 0 auto 1.5rem; }


/* Ensure hidden parent-only rows actually hide (override .field-row display) */
.field-row[hidden], .enq-parent-only[hidden] { display: none; }

/* FAQ as its own red section --------------------------------------------- */
.faq-sec { background: #881B2B; }
.faq-sec .home-faq__below { margin-top: 0; padding-top: 0; border-top: 0; }
.faq-sec .home-faq__below-eyebrow { color: rgba(247,236,216,.9); }
.faq-sec .faq { border-top-color: rgba(255,255,255,.22); }
.faq-sec .faq details { border-bottom-color: rgba(255,255,255,.16); }
.faq-sec .faq summary { color: #f7ecd8; }
.faq-sec .faq summary::after { color: #f7ecd8; }
.faq-sec .faq details > div { color: rgba(247,236,216,.82); }

/* Smaller award badge on mobile */
@media (max-width: 768px) {
  .hero-badge { font-size: 0.65rem; }
}

/* Mobile hero: top gap above the badge + spacing under the button
   (placed last so it wins over the earlier .hero-badge margin rule) */
@media (max-width: 1024px) {
  .hero-badge { margin: 2rem 1.25rem 1.2rem; }
  .home-hero__actions { margin: 0.3rem 0 2.2rem; }
}

/* ===== Journey section — vertical rail + panel: MOBILE ONLY =====
   Desktop (>900px) keeps the original horizontal folder-tab design above. */
@media (max-width: 900px) {
.jt-layout {
  display: grid;
  grid-template-columns: minmax(240px, 0.72fr) 1.4fr;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 40px 90px -55px rgba(27,22,24,.5);
  background: var(--home-cream);
}
.jt-tabs {
  display: flex; flex-direction: column; justify-content: center;
  width: auto; max-width: none; gap: 0; padding: 1.6rem 0;
  background: #881a2b; border-radius: 0; overflow: visible;
}
.jt-tab {
  flex: none; width: 100%; text-align: left;
  transform: none; border: 0; background: transparent; cursor: pointer;
  position: relative;
  font-family: var(--serif); font-weight: 600;
  font-size: clamp(1.25rem, 1.7vw, 1.75rem); line-height: 1.1;
  color: rgba(244,231,209,.92);
  padding: 1.15rem 2.2rem; margin: 0;
  transition: color .15s var(--ease); white-space: normal;
}
.jt-tab > span { transform: none; display: inline; }
/* Divider line between steps. The second selector matches the specificity of
   the desktop arrow rule (.jt-tab:not(:last-child)::after) so the "→" glyph
   is replaced here instead of leaking into the rail. */
.jt-tab::after,
.jt-tab:not(:last-child)::after {
  content: ""; position: absolute; left: 2.2rem; right: 2.2rem; bottom: 0; top: auto;
  width: auto; height: 1px; background: rgba(255,255,255,.13); transform: none;
  font-size: 0; line-height: 0; color: transparent;
}
.jt-tab:last-child::after { display: none; }
.jt-tab:hover { color: #fff; }
.jt-tab--active {
  background: var(--home-cream); color: var(--ink);
  margin: 0.15rem 0.9rem;
  padding: 1.15rem 1.15rem 1.15rem 1.7rem;
  border-radius: 12px; box-shadow: none;
}
.jt-tab--active:hover { color: var(--ink); }
/* Accent bar sits inset from the box edges rather than flush against them */
.jt-tab--active::before {
  content: "";
  position: absolute;
  left: 0.62rem; top: 50%;
  transform: translateY(-50%);
  width: 4px; height: 58%;
  background: #5D1021;
  border-radius: 2px;
}
.jt-tab--active::after,
.jt-tab:has(+ .jt-tab--active)::after { display: none; }
.jt-panels { background: var(--home-cream); }
.jt-panel { display: none; }
.jt-panel--active {
  display: grid; grid-template-columns: 1fr 0.82fr; gap: 0;
  align-items: stretch; padding: 0; height: 100%;
}
.jt-panel__text { padding: clamp(2rem, 3.5vw, 3.4rem); align-self: center; }
.jt-panel__text h2 { font-size: clamp(2rem, 3.4vw, 3rem); }
.jt-panel__media { height: 100%; min-height: 340px; }
.jt-panel__media img { width: 100%; height: 100%; max-height: none; object-fit: cover; border-radius: 0; box-shadow: none; }
  /* Full-bleed: break out of the .shell gutter so the section runs
     edge to edge on phones. */
  .jt-layout {
    grid-template-columns: minmax(158px, 1.18fr) 1.35fr;
    width: 100vw;
    max-width: 100vw;
    margin-inline: calc(50% - 50vw);
    border-radius: 0;
    box-shadow: none;
  }
  .jt-tabs { padding: 0.5rem 0; width: auto; }
  /* width:auto lets the flex cross-axis stretch account for the active
     tab's side margins, so its rounded corners aren't clipped by the rail. */
  .jt-tab { width: auto; font-size: 1.4rem; padding: 0.75rem 0.7rem; }
  .jt-tab::after,
  .jt-tab:not(:last-child)::after { left: 0.7rem; right: 0.7rem; }
  .jt-tab--active {
    margin: 0.12rem 0.35rem;
    padding: 0.75rem 0.75rem 0.75rem 1.15rem;
    border-radius: 1px;
  }
  .jt-tab--active::before { left: 0.44rem; width: 3px; height: 54%; }

  /* The photo comes out from behind the copy and sits full-width below the
     rail + text row. display:contents lifts the panel's children up so they
     can be placed directly on the .jt-layout grid. */
  .jt-layout { grid-template-rows: auto auto; background: var(--home-cream); }
  .jt-panels,
  .jt-panel--active { display: contents; }

  .jt-panel__text {
    grid-column: 2;
    grid-row: 1;
    align-self: center;
    padding: 1.1rem;
  }
  .jt-panel__media {
    grid-column: 1 / -1;
    grid-row: 2;
    position: relative;
    min-height: 0;
  }
  .jt-panel__media img {
    display: block;
    width: 100%;
    height: 210px;
    max-height: none;
    object-fit: cover;
    object-position: center 32%;
  }

  /* Back to dark copy on cream now that there is no photo behind it. */
  .jt-panel__text h2 { font-size: 1.3rem; color: var(--ink); font-weight: 600; }
  .jt-panel__text .jt-rule { margin: 0.6rem 0 0.75rem; background: var(--crimson); }
  .jt-panel__text p {
    color: var(--ink-soft);
    font-size: 0.85rem;
    line-height: 1.55;
    margin-bottom: 1.1rem;
  }
  .jt-panel__text .jt-panel__sub {
    color: var(--crimson);
    font-size: 0.68rem;
    margin: 0.45rem 0 0;
  }
  /* The panel column is only ~200px wide on a phone, so the longest label
     ("Plan Your Arrival") used to wrap its arrow onto a second line. Let the
     label scale with the viewport instead of breaking. */
  .jt-panel__text .btn--primary {
    background: var(--crimson);
    color: #fff;
    font-size: clamp(0.56rem, 2.5vw, 0.72rem);
    padding: 0.62rem 0.8rem;
    white-space: nowrap;
    max-width: 100%;
  }
}