@media (min-width: 1200px) {
  .framer-egh4k5 > .framer-1nq3z9v {
    width: min(956px, calc(100% - 60px));
    margin-left: auto;
    margin-right: auto;
  }
}

@media (max-width: 1199.98px) {
  .framer-egh4k5 > .framer-1nq3z9v {
    padding-left: 34px;
    padding-right: 34px;
  }
}

/* Enlarge the Blooming Minds logo in the top navigation. */
.framer-33h2jm-container {
  height: 48px !important;
}

.framer-33h2jm-container > a {
  height: 100% !important;
  width: auto !important;
}

@media (min-width: 1200px) {
  .framer-1v54aht > .framer-m7x2m1 {
    max-width: none;
    padding-top: 46px;
    padding-left: 36px;
    padding-right: 36px;
  }

  .framer-1qxueqr .framer-13tr2du > div {
    width: 100%;
  }

  .framer-1qxueqr .framer-13tr2du > div > a {
    width: 100%;
  }

  .framer-1qxueqr .framer-13tr2du {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }

}

/* ---------------------------------------------------------------
   Subject card row — all five on one line at every width
   The desktop override above was repeat(4), so with five cards the
   fifth was always pushed onto a second row, and below 1200px there
   was no override at all so Framer's base
   repeat(auto-fill, minmax(240px, 1fr)) wrapped at whatever width
   the viewport happened to be. Pinning the track count gives 5 + 0
   everywhere.
   --------------------------------------------------------------- */

.framer-1qxueqr .framer-13tr2du {
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
}

/* Phones stack the cards one below another. Five tracks across a
   390px phone works out around 55px each once the gutters are taken
   out, which shreds titles like "Social Science" into two letters
   per line - so below 810px the row goes to a single column and the
   cards get the full width to themselves. Tablet and up keep all
   five on one line. */
@media (max-width: 809.98px) {
  .framer-1qxueqr .framer-13tr2du {
    grid-template-columns: minmax(0, 1fr) !important;
    grid-auto-flow: row !important;
    gap: 14px !important;
  }

  /* ------------------------------------------------------------
     Phone width fix — cards were cut off on both edges
     Framer ships each subject card with a hard-coded
     width:400px (`.framer-11puzgj`), which is larger than a
     phone's content column (~372px at 412px viewport). The grid
     track sizes to that fixed width, so the whole row sat at
     x:6 / right:406 on a 412px screen and the titles rendered as
     "glish" / "athematics" with the icon clipped off the left.
     The card wrapper (`> div`) also never got width:100%, so only
     the inner <a> was constrained and the wrapper still forced
     400px. Pinning both to the track removes the overflow.
     ------------------------------------------------------------ */
  .framer-13tr2du[data-framer-name="Subject Cards"] > div {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  .framer-13tr2du[data-framer-name="Subject Cards"] > div > a,
  .framer-13tr2du[data-framer-name="Subject Cards"] .art-craft-card,
  .framer-13tr2du[data-framer-name="Subject Cards"] .framer-11puzgj {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    padding: 16px !important;
  }

  .framer-13tr2du[data-framer-name="Subject Cards"] .framer-rafrtj {
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
  }

  .framer-13tr2du[data-framer-name="Subject Cards"] .framer-m3j76y {
    width: 21px !important;
    height: 21px !important;
  }

  .framer-13tr2du[data-framer-name="Subject Cards"] h2 {
    font-size: 1.05rem !important;
  }

  .framer-13tr2du[data-framer-name="Subject Cards"] .framer-3ufrqc {
    padding: 10px 0 0 !important;
  }
}

/* Tablet keeps one line, but five cards across 810-1199px is tight
   on a 30px gutter, so the gutter gives way to keep them legible. */
@media (min-width: 810px) and (max-width: 1199.98px) {
  .framer-1qxueqr .framer-13tr2du {
    gap: 14px !important;
  }
}

@media (min-width: 1500px) {
  .framer-1qxueqr .framer-13tr2du {
    width: calc(100vw - 72px);
    margin-left: -15px;
  }
}

/* Hide program/radio section */
[data-framer-name="Program Type"] {
  display: none !important;
}

/* ---------------------------------------------------------------
   Removed sections (client request)
   Framer hydrates and re-creates these nodes client-side, so they
   are hidden with CSS rather than deleted from the exported HTML.
   --------------------------------------------------------------- */

/* Hero badge: "All ages & levels - In-center & online" */
.framer-phxp8l-container {
  display: none !important;
}

/* Hero call-to-action buttons: "Try a free session" + "Browse programs" */
.framer-1ff9vru {
  display: none !important;
}

/* "All programs" button (Program section) */
.framer-17nqq3s-container {
  display: none !important;
}

/* Pink feature card: Certified mentors / Small by design /
   Progress you can see / No lock-in */
.framer-137qra9 {
  display: none !important;
}

/* "How it works" button (Counter section) */
.framer-1p92mvk-container {
  display: none !important;
}

/* "How the mentorship works" section (live Framer export IDs/classes) */
#approach,
section#approach,
[data-framer-name="Counter"],
.framer-1cvbvj8,
.framer-1v54aht {
  display: none !important;
}

/* Contact page info rows: Email / Hours / Where */
.framer-fcc3g7 {
  display: none !important;
}

/* Hide Home page info rows: Email / Hours / Where */
.framer-1d4om5i,
.framer-eunl6l,
.framer-1jzwb78 {
  display: none !important;
}

/* Hide the homepage contact email tile represented by the @ icon. */
[data-framer-name="Email"] {
  display: none !important;
}

/* Keep footer content visible when Framer's appear animation is skipped. */
footer [data-framer-name="Left"],
footer [data-framer-name="Right"],
footer [data-framer-name="Bottom"] {
  opacity: 1 !important;
}

/* Remove the footer from the site. */
footer {
  display: none !important;
}

/* Give the added contact fields more vertical breathing room. */
#bp-phone-field-wrapper,
#bp-address-field-wrapper,
#bp-class-field-wrapper {
  margin-top: 16px !important;
}

/* Remove Framer's reserved rows for hidden fields in the first form row. */
.bp-contact-form > [data-framer-name="Top"] {
  row-gap: 0 !important;
}

/* Orange "Subjects Included" line under the "Academic support that
   fits" heading. The heading is a wrapping flex row, so the
   pseudo-element needs a full-width basis to break onto its own line
   instead of trailing "that fits" horizontally. Size tracks the
   heading preset (82 / 50 / 40px) at roughly 0.8x. */
.framer-itwba7[data-framer-name="Heading"]::after {
  content: "Subjects Included";
  display: block;
  flex-basis: 100%;
  margin-top: 12px;
  font-family: var(--bp-display-font);
  font-size: 62px;
  line-height: 1.1em;
  font-weight: 600;
  color: var(--bp-brand-orange);
}

@media (min-width: 810px) and (max-width: 1199.98px) {
  .framer-itwba7[data-framer-name="Heading"]::after {
    font-size: 40px;
  }
}

@media (max-width: 809.98px) {
  .framer-itwba7[data-framer-name="Heading"]::after {
    font-size: 32px;
  }
}

:root {
  --bp-form-copy-font-family: "Instrument Sans", "Instrument Sans Placeholder", sans-serif;
  --bp-form-copy-font-size: 16px;
  --bp-form-copy-font-weight: 500;
  --bp-form-copy-color: rgb(69, 86, 75);
  --bp-form-copy-opacity: 1;
  --bp-brand-orange: var(--token-9be2179a-d4c3-4b1c-a57e-66ad0ebb844d, rgb(232, 114, 44));
  /* Bricolage Grotesque is the site's display face: every heading in
     the Framer export uses it. Switzer is the body face and
     Instrument Sans is the UI/label face. */
  --bp-display-font: "Bricolage Grotesque", "Bricolage Grotesque Placeholder", sans-serif;
}

[data-framer-name="Limited Enrolment Note"] .bp-fees-copy {
  color: var(--bp-brand-orange) !important;
}

[data-framer-name="Limited Enrolment Note"] .bp-fees-introduction + .bp-fees-description {
  margin-block-start: 0.75em;
}

.bp-contact-form [data-framer-name="Name"] p,
.bp-contact-form [data-framer-name="Email address"] p,
.bp-contact-form #bp-phone-field-wrapper label,
.bp-contact-form #bp-address-field-wrapper label,
.bp-contact-form #bp-class-field-wrapper label,
.bp-contact-form input[name="Full Name"],
.bp-contact-form input[name="Email Address"],
.bp-contact-form #bp-phone-input,
.bp-contact-form #bp-address-input,
.bp-contact-form #bp-class-input,
.bp-contact-form input[name="Full Name"]::placeholder,
.bp-contact-form input[name="Email Address"]::placeholder,
.bp-contact-form #bp-phone-input::placeholder,
.bp-contact-form #bp-address-input::placeholder,
.bp-contact-form select,
.bp-contact-form option {
  color: var(--bp-form-copy-color) !important;
  font-family: var(--bp-form-copy-font-family) !important;
  font-size: var(--bp-form-copy-font-size) !important;
  font-weight: var(--bp-form-copy-font-weight) !important;
  opacity: var(--bp-form-copy-opacity) !important;
}

/* ---------------------------------------------------------------
   Know Your Tutor — one type scale
   Framer ships the card with four type roles that disagree: the
   intro and story paragraphs are both body copy but sit at 18px /
   0.92-white and 17px / 0.82-white, the eyebrow steps 18->20px and
   the card heading 48->42px between breakpoints, and the two
   micro-labels use 0.60 and 0.72 white. The tokens below pin every
   equivalent role to a single value.
   --------------------------------------------------------------- */

:root {
  --bp-tutor-display-font: "Instrument Sans", "Instrument Sans Placeholder", sans-serif;
  --bp-tutor-body-font: "Switzer", "Switzer Placeholder", sans-serif;
  --bp-tutor-body-size: 18px;
  --bp-tutor-body-line-height: 1.5em;
  --bp-tutor-body-color: rgba(255, 255, 255, 0.82);
  --bp-tutor-heading-color: rgb(255, 255, 255);
  --bp-tutor-label-color: rgba(255, 255, 255, 0.72);
  --bp-tutor-meta-size: 15px;
  --bp-tutor-label-size: 12px;
}

/* Card heading: white, one weight, scales up with the viewport. */
#tutor [data-framer-name="Tutor Name"] h2 {
  font-family: var(--bp-tutor-display-font) !important;
  font-size: 48px !important;
  font-weight: 600 !important;
  line-height: 1em !important;
  letter-spacing: -2px !important;
  color: var(--bp-tutor-heading-color) !important;
}

@media (max-width: 809.98px) {
  #tutor [data-framer-name="Tutor Name"] h2 {
    font-size: 40px !important;
  }
}

/* Eyebrow: 18px at every breakpoint. */
#tutor [data-framer-name="Eyebrow"] p {
  font-family: var(--bp-tutor-display-font) !important;
  font-size: 18px !important;
  font-weight: 500 !important;
  color: var(--bp-tutor-label-color) !important;
}

/* Body copy: intro and story share one size, colour and leading. */
#tutor [data-framer-name="Introduction"] p,
#tutor [data-framer-name="Tutor Story"] > p {
  font-family: var(--bp-tutor-body-font) !important;
  font-size: var(--bp-tutor-body-size) !important;
  line-height: var(--bp-tutor-body-line-height) !important;
  color: var(--bp-tutor-body-color) !important;
}

/* Credential label: matches the eyebrow's micro-label treatment. */
#tutor [data-framer-name="Label"] p {
  font-family: var(--bp-tutor-display-font) !important;
  font-size: var(--bp-tutor-label-size) !important;
  font-weight: 600 !important;
  letter-spacing: 1.2px !important;
  text-transform: uppercase !important;
  color: var(--bp-tutor-label-color) !important;
}

/* Credential value + closing tagline. */
#tutor [data-framer-name="Education"] p,
#tutor [data-framer-name="Academic Record"] p,
#tutor [data-framer-name="Academic Record Tagline"] p {
  font-family: var(--bp-tutor-body-font) !important;
  font-size: var(--bp-tutor-meta-size) !important;
  font-weight: 500 !important;
  line-height: 1.45em !important;
  color: var(--bp-tutor-body-color) !important;
}

#tutor [data-framer-name="Academic Record Tagline"] p {
  color: var(--bp-brand-orange) !important;
}

@media (max-width: 809.98px) {
  [data-framer-name="Know Your Tutor"] [data-framer-name="Sai Charan Mentor Card"] > [data-framer-name="Tutor Portrait"] {
    order: 1 !important;
  }

  [data-framer-name="Know Your Tutor"] [data-framer-name="Sai Charan Mentor Card"] > [data-framer-name="Tutor Story"] {
    order: 2 !important;
  }
}

/* Framer floating @ edit button */
.framer-8qmss5-container,
#main .framer-8qmss5-container,
[data-framer-root] ~ .framer-8qmss5-container {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
  width: 0 !important;
  height: 0 !important;
  overflow: hidden !important;
}

/* Art & Craft card — match the Framer-generated siblings.
   The card is injected at runtime with the same Framer classes used
   by English / Mathematics / Science / Social Science. Only the
   background-color differs. */
[data-art-craft="true"] {
  background-color: #eedff5 !important;
}

/* Ensure all subject card images share the same fixed aspect ratio
   and fill behaviour so heights are visually identical. */
.framer-13tr2du[data-framer-name="Subject Cards"] .framer-1ljowsp {
  aspect-ratio: 4 / 3 !important;
  height: auto !important;
}

.framer-13tr2du[data-framer-name="Subject Cards"] .framer-1ljowsp img,
.framer-13tr2du[data-framer-name="Subject Cards"] .framer-1ljowsp > div[style*="background-image"] {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
}

/* Force all subject card titles to share one type scale. */
.framer-13tr2du[data-framer-name="Subject Cards"] h2 {
  font-size: clamp(1.4rem, 2vw, 2rem) !important;
  line-height: 1.15 !important;
  letter-spacing: -0.02em !important;
}

/* Ensure all icon containers are the same size. */
.framer-13tr2du[data-framer-name="Subject Cards"] .framer-rafrtj {
  width: 52px !important;
  height: 52px !important;
  min-width: 52px !important;
  flex-shrink: 0 !important;
}

.framer-13tr2du[data-framer-name="Subject Cards"] .framer-7mpllf {
  width: 100% !important;
  height: 100% !important;
}

/* Normalise icon SVG sizing. */
.framer-13tr2du[data-framer-name="Subject Cards"] .framer-m3j76y {
  width: 24px !important;
  height: 24px !important;
}


/* ---------------------------------------------------------------
   Subject cards — title only, one box
   Four of the five cards ship an empty sub-text paragraph and the
   hand-added Art & Craft card shipped a full one, so the row
   rendered at two different heights with dead space under the four
   short titles. The sub-text is dropped everywhere, the leftover
   icon-to-title spacing is collapsed, and the title's top padding is
   pinned to one value instead of stepping 40 -> 14 -> 0px across
   breakpoints.
   --------------------------------------------------------------- */

.framer-13tr2du[data-framer-name="Subject Cards"] .framer-dj7om4 {
  display: none !important;
}

.framer-13tr2du[data-framer-name="Subject Cards"] .framer-hglix9 {
  gap: 0 !important;
}

.framer-13tr2du[data-framer-name="Subject Cards"] .framer-3ufrqc {
  gap: 0 !important;
  padding: 14px 0 0 !important;
}

/* The custom card forced a flex column at every width, so on desktop
   it stacked title-over-image while its four Framer siblings sat
   side by side. Give it the same grid box, padding and height. */
.art-craft-card {
  min-height: 0 !important;
  padding: 20px !important;
  justify-content: normal !important;
}

@media (min-width: 1200px) {
  .art-craft-card {
    display: grid !important;
    grid-template-rows: repeat(1, min-content) !important;
    grid-template-columns: repeat(2, minmax(50px, 1fr)) !important;
    grid-auto-rows: min-content !important;
    justify-content: center !important;
    gap: 30px !important;
  }
}

.art-craft-card p {
  display: none !important;
}

/* ---------------------------------------------------------------
   Copy removals (client request)
   Framer re-creates these nodes on hydration, so they are hidden
   rather than deleted from the export.

   Scope: the paragraph sitting directly below the price in the
   closing "Academic Commitment" card — the limited-enrolment note.
   The price line above it, the detail rows below it and the tutor
   card are all untouched.
   --------------------------------------------------------------- */

[data-framer-name="Limited Enrolment Note"] {
  display: none !important;
}

/* ---------------------------------------------------------------
   Closing orange band
   All three Framer footers are removed above, so this band is the
   last thing on the page. It sits outside Framer's hydrate tree and
   picks up the cream of the closing "Academic Commitment" section so
   the two read as one surface. The copy is a display statement, so it
   uses Bricolage Grotesque like every other heading on the site rather
   than Switzer, which is the body face. Colour still follows the tutor
   card's orange tagline.
   --------------------------------------------------------------- */

.bp-tagline-band {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 28px;
  width: 100%;
  box-sizing: border-box;
  padding: 8px 30px 64px;
  background-color: #f6efde;
}

.bp-tagline-band-copy {
  margin: 0;
  font-family: var(--bp-display-font);
  font-size: clamp(24px, 3.6vw, 44px);
  font-weight: 600;
  line-height: 1.1em;
  letter-spacing: -0.02em;
  text-align: center;
  text-wrap: balance;
  color: var(--bp-brand-orange);
}

/* Cloud row sitting below the band copy. The shapes carry no fill of
   their own (currentColor), so they are tinted from the site palette:
   the peach already used by the hero decor. All three share one size
   and one tint so the row reads as a matched set, and align-items:
   flex-end puts their bases on a single line. */
.bp-tagline-clouds {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: clamp(14px, 2.4vw, 26px);
  width: 100%;
  max-width: 440px;
}

.bp-tagline-clouds svg {
  display: block;
  flex: none;
  width: clamp(72px, 11vw, 104px);
  height: auto;
  color: #f9d8c0;
  opacity: 0.9;
}

/* ---------------------------------------------------------------
   "Format" row — stop the value colliding with its label
   The rows in the Academic Commitment card are flex with
   justify-content:space-between, and Framer ships both the label and
   the value as `white-space:pre; flex:none; width:auto`. Neither can
   shrink and neither can wrap, so a long value grows leftward until
   it sits on top of the label. "In Person Home Tuition" (set by
   updateFeeFormat in contact-form.js) is long enough to do exactly
   that on narrow Android screens, where the fallback font measures
   wider than on iOS - hence "FormatIn Person Home Tuition".
   Label keeps its intrinsic width; the value is allowed to shrink
   and wrap so the two can never overlap.
   --------------------------------------------------------------- */

[data-framer-name="Academic Commitment"] [data-framer-name="Row Format"] > [data-framer-name="Label"] {
  flex: 0 0 auto !important;
  min-width: max-content !important;
  white-space: nowrap !important;
}

[data-framer-name="Academic Commitment"] [data-framer-name="Row Format"] > [data-framer-name="Value"] {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  white-space: normal !important;
  text-align: right !important;
  overflow-wrap: break-word !important;
}

/* Give the two a guaranteed gap so they read as separate columns
   even when the value wraps to a second line. */
[data-framer-name="Academic Commitment"] [data-framer-name="Row Format"] {
  gap: 16px !important;
}

/* ---------------------------------------------------------------
   ALL DETAIL ROWS — label-left / value-right layout fix
   Framer ships every label AND value cell as:
     white-space:pre; flex:none; width:auto
   Both cells are therefore fixed to their natural text width.
   The row container is space-between, but if both cells are
   flex:none the space only appears outside them — not between them.
   On Android fonts can measure wider than on iOS, so "In Person
   Home Tuition" overflows and "Sessions each week  5" reads as
   if the 5 is just appended (no gap to the right edge).

   Row containers:
     .framer-1s2pe7f  = Row Sessions  (no border-top)
     .framer-1wq7jat  = Row Duration  (border-top)
     .framer-1m6cxhz  = Row Format    (border-top)
     .framer-1i391pq  = Row Seats     (border-top + bottom padding)

   Label cells (all share one Framer rule, kept flex:none):
     .framer-1di7q00  Sessions label
     .framer-1s7mmn9  Duration label  (Row Duration has no Value class below)
     .framer-1d2qwpp  Format label
     .framer-1vhrkm1  Seats label
     .framer-fkk79f   (shared label class)

   Value cells (override to flex:1 + right-align):
     .framer-169fu9t  Sessions value
     .framer-azn988   Duration value
     .framer-1ivlxbv  Format value
     (Seats value is injected by JS — covered by the [data-framer-name] rule)
   --------------------------------------------------------------- */

/* Ensure all row containers are proper space-between flex rows */
.framer-1s2pe7f,
.framer-1wq7jat,
.framer-1m6cxhz,
.framer-1i391pq {
  display: flex !important;
  flex-direction: row !important;
  justify-content: space-between !important;
  align-items: center !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

/* Label cells — stay fixed width, no wrap */
.framer-1s2pe7f > .framer-1di7q00,
.framer-1wq7jat > .framer-1s7mmn9,
.framer-1m6cxhz > .framer-1d2qwpp,
.framer-1i391pq > .framer-1vhrkm1,
.framer-1i391pq > .framer-fkk79f {
  flex: 0 0 auto !important;
  white-space: nowrap !important;
  min-width: 0 !important;
}

/* Value cells — grow to fill remaining space and right-align */
.framer-1s2pe7f > .framer-169fu9t,
.framer-1wq7jat > .framer-azn988,
.framer-1m6cxhz > .framer-1ivlxbv {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  white-space: normal !important;
  text-align: right !important;
  overflow-wrap: break-word !important;
}

/* Row Format class-based container (identical to attribute rule above,
   belt-and-braces for post-hydration DOM) */
.framer-1m6cxhz {
  gap: 16px !important;
}


/* ===============================================================
   ANDROID ALIGNMENT & OVERFLOW FIXES
   Framer hard-codes the phone canvas at exactly 390 px (iPhone 14
   logical width).  Android common logical widths are 360–414 px.
   Every rule below is scoped to ≤809.98 px (Framer's own phone
   breakpoint) so it never touches tablet or desktop.
   =============================================================== */

/* ---------------------------------------------------------------
   1. GLOBAL OVERFLOW GUARD
   Prevent any fixed-width Framer element from causing the page
   to scroll horizontally on Android.  This is the most important
   single rule — everything else refines specific sections.
   --------------------------------------------------------------- */
@media (max-width: 809.98px) {
  html, body {
    -webkit-text-size-adjust: 100%;   /* Stop Android Chrome from auto-scaling text */
    text-size-adjust: 100%;
    overflow-x: hidden;
  }

  /* Root page container — Framer pins this at exactly 390 px.
     Switch it to 100% so it fills whatever the device is. */
  .framer-rZiYU.framer-72rtr7 {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
  }

  /* Every direct section / column inside the root should also fill
     the available width instead of being pinned at 390 px. */
  .framer-rZiYU > * {
    max-width: 100% !important;
  }
}

/* ---------------------------------------------------------------
   2. NAV BAR — width + inner padding
   Framer ships two phone-nav variants:
     framer-v-gs5urc (closed)  width:390px, padding:0 20px
     framer-v-jhl8yh (open)    width:390px, padding:0 20px
   On a 360 px Android screen 390 px clips 30 px off the right side.
   --------------------------------------------------------------- */
@media (max-width: 809.98px) {
  /* Nav outer shell */
  .framer-77rBy.framer-v-gs5urc.framer-1q36u8u,
  .framer-77rBy.framer-v-jhl8yh.framer-1q36u8u {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  /* Nav inner row — keep 20 px gutters but use box-sizing so they
     never bust the 100% parent */
  .framer-77rBy.framer-v-gs5urc .framer-1r5rn89,
  .framer-77rBy.framer-v-jhl8yh .framer-1r5rn89 {
    padding-left: 16px !important;
    padding-right: 16px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  /* Open-menu dropdown must also fill 100 % so it doesn't leave a
     gap on the right on wide Android screens */
  .framer-77rBy.framer-v-jhl8yh .framer-mtbx3v {
    left: -16px !important;
    right: -16px !important;
  }

  /* Hamburger icon — keep it within the nav padding */
  .framer-77rBy.framer-v-gs5urc .framer-gh64he,
  .framer-77rBy.framer-v-jhl8yh .framer-gh64he {
    flex-shrink: 0 !important;
  }

  /* Logo container — keep it proportional and never overflow */
  .framer-77rBy .framer-33h2jm-container {
    flex-shrink: 1 !important;
    max-width: calc(100% - 80px) !important; /* leave room for hamburger */
    overflow: hidden !important;
  }
}

/* ---------------------------------------------------------------
   3. HERO SECTION — grid to single-column stacking
   On mobile Framer switches .framer-1lo7yl2 to a 2-column grid at
   390 px.  On Android widths < 390 px the columns squeeze beyond
   the viewport.  Force full-width single-column stacking.
   --------------------------------------------------------------- */
@media (max-width: 809.98px) {
  .framer-rZiYU .framer-1lo7yl2 {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    /* Framer switches this to grid on phone; make sure the columns
       are always 100 % of available space */
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  /* Hero image columns — respect full width */
  .framer-rZiYU .framer-16f0o6z,
  .framer-rZiYU .framer-5ivlul,
  .framer-rZiYU .framer-1ez819k {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    min-width: 0 !important;
  }

  /* Floating overlay card inside hero — stop it from sticking out */
  .framer-rZiYU .framer-10tciei {
    max-width: calc(100% - 20px) !important;
    box-sizing: border-box !important;
  }

  /* Hero text wrapper */
  .framer-rZiYU .framer-ys2jnx,
  .framer-rZiYU .framer-1l50w3b,
  .framer-rZiYU .framer-m7x2m1,
  .framer-rZiYU .framer-zlk47g {
    padding-left: 16px !important;
    padding-right: 16px !important;
    box-sizing: border-box !important;
    max-width: 100% !important;
  }

  /* Hero tag row (chips) */
  .framer-rZiYU .framer-1dksp2g {
    padding-left: 0 !important;
    padding-right: 0 !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }
}

/* ---------------------------------------------------------------
   4. SUBJECT CARDS — already largely fixed for iPhone 390px.
   Reinforce for narrower Android screens so the grid and each
   card container truly fill the viewport width.
   --------------------------------------------------------------- */
@media (max-width: 809.98px) {
  /* Grid container */
  .framer-1qxueqr .framer-13tr2du {
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    box-sizing: border-box !important;
  }

  /* Each card slot */
  .framer-13tr2du[data-framer-name="Subject Cards"] > div,
  .framer-13tr2du > div {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }

  /* The card itself (Framer phone variant is framer-v-1kjvufi at 360px) */
  .framer-EuPpJ.framer-v-1kjvufi.framer-11puzgj,
  .framer-13tr2du .framer-11puzgj,
  .framer-13tr2du .art-craft-card {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }
}

/* ---------------------------------------------------------------
   5. TUTOR PORTRAIT — fixed 400px/390px width
   .framer-bjmvgj ships width:400px at desktop and width:100%;
   height:390px at phone (from Framer's own media-query).
   On phones it is already 100% but height:390px is very tall for
   narrow screens.  On ≤360px Android this is fine since Framer
   already sets width:100%.  Just ensure it never overflows.
   --------------------------------------------------------------- */
@media (max-width: 809.98px) {
  .framer-rZiYU .framer-bjmvgj {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 260px !important;
    box-sizing: border-box !important;
  }
}

/* ---------------------------------------------------------------
   6. ACADEMIC COMMITMENT CARD
   .framer-15yknpk ships padding:36px 24px on phone via Framer's
   own rule.  On 360px Android 24+24=48px side padding eats a lot
   of the 360px leaving only 312px for content — which is okay but
   the flex row inside can still overlap on very-narrow screens.
   Reduce side padding slightly and ensure the inner flex items
   can wrap / shrink.
   --------------------------------------------------------------- */
@media (max-width: 809.98px) {
  .framer-rZiYU .framer-15yknpk {
    padding-left: 20px !important;
    padding-right: 20px !important;
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  /* Fee rows — handled globally above; just ensure box-sizing on mobile */
  .framer-rZiYU .framer-1s2pe7f,
  .framer-rZiYU .framer-1wq7jat,
  .framer-rZiYU .framer-1m6cxhz,
  .framer-rZiYU .framer-1i391pq {
    box-sizing: border-box !important;
    width: 100% !important;
  }

  /* Price / label text nodes — allow them to shrink but keep layout */
  .framer-rZiYU .framer-1di7q00,
  .framer-rZiYU .framer-169fu9t,
  .framer-rZiYU .framer-1s7mmn9,
  .framer-rZiYU .framer-azn988,
  .framer-rZiYU .framer-1d2qwpp,
  .framer-rZiYU .framer-1ivlxbv,
  .framer-rZiYU .framer-1vhrkm1,
  .framer-rZiYU .framer-fkk79f {
    min-width: 0 !important;
    overflow-wrap: break-word !important;
  }
}

/* ---------------------------------------------------------------
   7. WHITE-SPACE: PRE OVERFLOW
   Framer ships many text nodes as `white-space:pre` which prevents
   wrapping and causes overflow on narrow Android screens.  The
   most problematic ones are nav link labels, hero subheadings, and
   price/detail rows in the academic commitment card.
   We target the common Framer class patterns for these.
   --------------------------------------------------------------- */
@media (max-width: 809.98px) {
  /* Nav link labels */
  .framer-77rBy .framer-1gmb2ft,
  .framer-77rBy .framer-16vhzhe,
  .framer-77rBy .framer-r7lwo6,
  .framer-77rBy .framer-4zh0jl,
  .framer-77rBy .framer-hx7r5v {
    white-space: normal !important;
    overflow-wrap: break-word !important;
  }

  /* Any other pre-whitespace elements that can overflow horizontally */
  .framer-rZiYU .framer-ys2jnx [style*="white-space: pre"],
  .framer-rZiYU .framer-1l50w3b [style*="white-space: pre"],
  .framer-rZiYU .framer-m7x2m1 [style*="white-space: pre"] {
    white-space: normal !important;
    word-break: break-word !important;
  }
}

/* ---------------------------------------------------------------
   8. CONTACT SECTION / ENQUIRY FORM
   The form card (.framer-ccyh71) has 34px padding on phone.
   On 360px Android 34+34=68px side padding leaves 292px of content
   width.  Reduce to 20px each side.
   --------------------------------------------------------------- */
@media (max-width: 809.98px) {
  .framer-rZiYU .framer-ccyh71 {
    padding-left: 20px !important;
    padding-right: 20px !important;
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  /* Form fields — ensure they fill the narrowed container */
  .framer-rZiYU .framer-1m4mxdt,
  .framer-rZiYU .framer-ws0yt9,
  .framer-rZiYU .framer-78eu0o {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  /* Contact section outer padding */
  .framer-rZiYU .framer-egh4k5 {
    padding-left: 16px !important;
    padding-right: 16px !important;
    box-sizing: border-box !important;
    width: 100% !important;
  }

  .framer-rZiYU .framer-1nq3z9v {
    padding-left: 0 !important;
    padding-right: 0 !important;
    box-sizing: border-box !important;
  }
}

/* ---------------------------------------------------------------
   9. "KNOW YOUR TUTOR" SECTION
   The mentor card inner grid already reorders on mobile.
   Ensure both columns collapse to full width on narrow Android.
   --------------------------------------------------------------- */
@media (max-width: 809.98px) {
  /* Outer grid: already set to single-column by Framer — confirm */
  .framer-rZiYU .framer-qp82qt {
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
    box-sizing: border-box !important;
  }

  /* Mentor card panels */
  .framer-rZiYU .framer-1nhinjh,
  .framer-rZiYU .framer-bps8x7 {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }

  /* Green card inside tutor section */
  .framer-rZiYU .framer-1g95t12 {
    padding-left: 20px !important;
    padding-right: 20px !important;
    box-sizing: border-box !important;
    width: 100% !important;
  }
}

/* ---------------------------------------------------------------
   10. TAGLINE BAND (bp-tagline-band) — bottom of page
   Uses clamp() so it is already responsive; just guard padding.
   --------------------------------------------------------------- */
@media (max-width: 809.98px) {
  .bp-tagline-band {
    padding-left: 16px !important;
    padding-right: 16px !important;
    box-sizing: border-box !important;
  }
}

/* ---------------------------------------------------------------
   11. CLOSING CREAM SECTION (.framer-ygll71)
   Ships padding:86px 30px — 30px each side on 360px = 300px content.
   Reduce side padding to 16px so Android matches iPhone visual weight.
   --------------------------------------------------------------- */
@media (max-width: 809.98px) {
  .framer-rZiYU .framer-ygll71 {
    padding-left: 16px !important;
    padding-right: 16px !important;
    box-sizing: border-box !important;
    width: 100% !important;
  }
}

/* ---------------------------------------------------------------
   12. GENERAL SECTION WRAPPERS
   Any max-width / padding section container inside the phone
   canvas should also respect 100 % so it doesn't push content
   past the viewport edge on Android.
   --------------------------------------------------------------- */
@media (max-width: 809.98px) {
  .framer-rZiYU .framer-1qxueqr,
  .framer-rZiYU .framer-1cvbvj8,
  .framer-rZiYU .framer-12rpkn2,
  .framer-rZiYU .framer-1v54aht {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    overflow-x: hidden !important;
  }

  /* Inner max-width containers */
  .framer-rZiYU .framer-1l50w3b,
  .framer-rZiYU .framer-m7x2m1,
  .framer-rZiYU .framer-1o5qoxv,
  .framer-rZiYU .framer-zlk47g {
    max-width: 100% !important;
    box-sizing: border-box !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
}

/* ---------------------------------------------------------------
   13. TOUCH IMPROVEMENTS FOR ANDROID
   Android WebView sometimes misses tap targets.  These rules
   improve usability without changing visual appearance.
   --------------------------------------------------------------- */
@media (max-width: 809.98px) {
  a, button,
  [data-framer-component-type="NavigationLink"],
  .framer-gh64he,               /* hamburger */
  .framer-wpvdnk-container {    /* CTA button in nav */
    touch-action: manipulation !important;
    -webkit-tap-highlight-color: transparent !important;
  }
}

/* Hide "Only 2" — Row Seats in the Academic Commitment card */
.framer-1i391pq,
[data-framer-name="Row Seats"] {
  display: none !important;
}

/* ---------------------------------------------------------------
   Academic Commitment card — hard width constraint
   .framer-15yknpk has flex:none so it never shrinks below its
   natural width. On Android the parent is wider than the viewport
   (root canvas overflow), so the card renders at 435px+ on a 360px
   screen. Constrain it and its wrapper to 100vw.
   --------------------------------------------------------------- */
@media (max-width: 809.98px) {
  .framer-rZiYU .framer-ygll71 {
    overflow: hidden !important;
  }

  .framer-rZiYU .framer-15yknpk {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
    flex-shrink: 1 !important;
  }

  /* Inner columns — must also be able to shrink */
  .framer-rZiYU .framer-vnf5te,
  .framer-rZiYU .framer-1m2yfui {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    flex-shrink: 1 !important;
    box-sizing: border-box !important;
  }

  /* Detail block rows — force space-between with shrinkable cells */
  .framer-rZiYU .framer-1s2pe7f,
  .framer-rZiYU .framer-1wq7jat,
  .framer-rZiYU .framer-1m6cxhz {
    display: flex !important;
    flex-direction: row !important;
    justify-content: space-between !important;
    align-items: center !important;
    width: 100% !important;
    box-sizing: border-box !important;
    gap: 12px !important;
  }

  /* Value cells — grow and right-align */
  .framer-rZiYU .framer-169fu9t,
  .framer-rZiYU .framer-azn988,
  .framer-rZiYU .framer-1ivlxbv {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    white-space: normal !important;
    word-break: break-word !important;
    text-align: right !important;
  }

  /* Label cells — fixed, no wrap */
  .framer-rZiYU .framer-1di7q00,
  .framer-rZiYU .framer-1s7mmn9,
  .framer-rZiYU .framer-1d2qwpp {
    flex: 0 0 auto !important;
    white-space: nowrap !important;
  }
}