/* Scoped refinement batch approved on 2026-09-14. These rules intentionally
   touch only the requested mobile home, story and teaching-method details. */

/* A slightly larger phone assistant is easier to find without covering CTAs. */
@media (max-width: 600px) {
  .myguru-pet {
    width: 100px;
    height: 108px;
  }

  .myguru-pet-button {
    width: 100px;
    height: 108px;
  }

  .myguru-pet-hint {
    right: 108px;
    bottom: 50px;
  }

  .myguru-pet-bubble { bottom: 104px; }

  /* Keep the home banner centred on the phone viewport, matching the story
     carousel, rather than leaving content-column gutters at either side. */
  #mobile-home .hero-visual {
    width: 100vw;
    max-width: none;
    margin-inline: calc(50% - 50vw);
  }

  #mobile-home .hero-carousel {
    width: 100vw;
    max-width: none;
    margin-inline: calc(50% - 50vw);
    aspect-ratio: 16 / 9;
  }
}

/* Desktop story captions are short, single complete sentences. Keep each
   sentence on one line only where its desktop text column has room. */
@media (min-width: 1101px) {
  .story-cinematic .st-school__copy > p:last-of-type {
    max-width: none;
    white-space: nowrap;
  }

  /* Every branch card uses the same image-stage height. This preserves the
     supplied image proportions while starting all text at the same position. */
  #desktop-home .d-branch-grid--all img {
    height: 190px;
    max-height: none;
    object-fit: contain;
  }
}

/* The first home slide uses a wide branch facade. It fills the same visual
   frame as the 2027 campaign, without the contained-image side gutters. */
:is(#mobile-home .hero-slide:first-child, #tablet-home .hero-slide:first-child, #desktop-home .d-hero-slide:first-child) img {
  width: 100%;
  height: 100%;
  /* The Puchong Jaya facade is wider than the shared campaign frame. Fill
     that frame instead of adding white gutters on both sides. */
  object-fit: cover !important;
  object-position: center;
}

/* Keep the full-width facade presentation while favouring its shop identity
   at the top of the shared campaign frame. */
@media (min-width: 1101px) {
  #desktop-home .d-hero-slide:first-child img {
    object-fit: cover !important;
    object-position: center top;
  }
}

/* On phones, the story's facade carousel is a full-bleed visual. Anchor it
   to the viewport centre instead of the text column so both outer edges are
   equal and there are no leftover side gutters. */
@media (max-width: 700px) {
  .story-cinematic .st-hero .st-story-carousel {
    width: 100vw;
    margin: 20px calc(50% - 50vw) 0;
  }
}

/* Every MyGuru teaching method uses the same yellow-circle/blue-tick cue. */
:is(#mobile-home, #tablet-home, #desktop-home) :is(.method-feature, .method-cards, .d-method-feature, .d-method-cards) ul {
  display: grid;
  gap: 11px;
  padding: 0;
  list-style: none;
}

:is(#mobile-home, #tablet-home, #desktop-home) :is(.method-feature, .method-cards, .d-method-feature, .d-method-cards) li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 0;
  padding: 0;
  border: 0;
}

:is(#mobile-home, #tablet-home, #desktop-home) :is(.method-feature, .method-cards, .d-method-feature, .d-method-cards) li::before {
  content: "✓";
  display: inline-grid;
  flex: 0 0 24px;
  width: 24px;
  height: 24px;
  place-items: center;
  margin: 0;
  border-radius: 50%;
  background: #ffd21c !important;
  color: #062b9a !important;
  font-size: 15px;
  font-weight: 950;
  line-height: 1;
}

/* The scroll-linked branch history changes only after a new year is reached;
   the transition is short and compositor-friendly. */
.st-journey__sticky.is-changing :is(.st-journey__visual img, .st-journey__year, .st-journey__index, .st-journey h2, .st-journey__copy > p:last-of-type) {
  animation: story-scene-settle .34s ease-out both;
}

@keyframes story-scene-settle {
  from { opacity: .5; transform: translateY(5px); }
  to { opacity: 1; transform: translateY(0); }
}

/* English story headings retain the authored two-line structure and never
   spill horizontally on a phone or an iPad-width reading layout. */
html[lang="en"] .st-school--archive .st-school__copy h2 {
  max-width: 100%;
  font-size: clamp(30px, 3.55vw, 48px);
  letter-spacing: -.06em;
  line-height: 1.06;
  white-space: normal;
}

html[lang="en"] .st-school--archive .st-school__copy h2 em {
  display: inline-block;
  white-space: normal;
}

html[lang="en"] .st-school--archive .st-school__copy > p:last-of-type {
  max-width: 42ch;
  white-space: normal !important;
}

/* Number badges form a fixed left rail; long English labels align to the same
   reading edge and may wrap only within their own text column. */
html[lang="en"] .st-results-promises li {
  justify-content: flex-start;
  min-width: 0;
  text-align: left;
  white-space: normal;
}

html[lang="en"] .st-results-promises li span {
  min-width: 0;
  text-align: left;
  white-space: normal;
}

@media (max-width: 1000px) {
  html[lang="en"] .story-cinematic .st-hero h1 {
    width: 100%;
    max-width: 100%;
    font-size: clamp(34px, 7vw, 48px);
  }

  html[lang="en"] .story-cinematic .st-hero h1 em {
    max-width: 13ch;
    font-size: .84em;
    white-space: normal;
  }
}

@media (min-width: 701px) and (max-width: 1000px) {
  /* The tablet hero has a two-column reading area. Scale only its English
     lockup so both complete phrases fit within that column. */
  html[lang="en"] .story-cinematic .st-hero h1 {
    font-size: clamp(36px, 4.7vw, 40px);
  }

  html[lang="en"] .story-cinematic .st-title-line {
    width: 100%;
    flex-wrap: nowrap;
    gap: .06em;
    white-space: nowrap;
  }

  html[lang="en"] .story-cinematic .st-title-line small {
    font-size: .7em;
    letter-spacing: -.03em;
  }

  html[lang="en"] .story-cinematic .st-title-line b {
    flex: 0 0 auto;
    font-size: .86em;
  }

  html[lang="en"] .story-cinematic .st-hero h1 em {
    max-width: none;
    font-size: .69em;
    letter-spacing: -.04em;
    white-space: nowrap;
  }
}

@media (max-width: 700px) {
  /* Keep the English opening statement as two complete lines rather than
     leaving individual words on their own line. */
  html[lang="en"] .story-cinematic .st-title-line {
    width: 100%;
    flex-wrap: nowrap;
    gap: .08em;
    white-space: nowrap;
  }

  html[lang="en"] .story-cinematic .st-title-line small {
    font-size: .72em;
    letter-spacing: -.03em;
  }

  html[lang="en"] .story-cinematic .st-title-line b {
    flex: 0 0 auto;
    font-size: .9em;
  }

  html[lang="en"] .st-school--archive .st-school__copy h2 {
    font-size: clamp(27px, 7.2vw, 33px);
    line-height: 1.08;
  }

  html[lang="en"] .st-school--archive .st-school__copy > p:last-of-type {
    max-width: 31ch;
    font-size: 14px;
    line-height: 1.55;
  }

  html[lang="en"] .st-results-promises li {
    align-items: center;
    min-height: 58px;
  }

  html[lang="en"] .story-cinematic .st-hero h1 {
    font-size: clamp(31px, 8vw, 37px);
    line-height: 1.06;
  }

  html[lang="en"] .story-cinematic .st-hero h1 em {
    font-size: .75em;
    letter-spacing: -.04em;
    white-space: nowrap;
  }
}

@media (prefers-reduced-motion: reduce) {
  .st-journey__sticky.is-changing :is(.st-journey__visual img, .st-journey__year, .st-journey__index, .st-journey h2, .st-journey__copy > p:last-of-type) {
    animation: none;
  }
}