/* ============================================================
   HOMEPAGE — MOBILE 1:1  (Figma node 4149:6286, 390-wide artboard)
   Loaded after styles.css + mobile.css; scoped to body[data-page="home"].
   Desktop is untouched (everything lives inside the media query).
   The hero / inspiration / lake stay <video> (poster falls back to image).
   ALSO covers iPad/tablet (≤1023) — the user wants iPad to BE the mobile,
   scaled up. The scale-up override (768–1023) below centers the text column
   and enlarges media + type for the larger screen.
   ============================================================ */

/* QC r41: inspiration heading + em render in #5A381C at every breakpoint
   (overrides the base .display color var(--brand) #5E2A29). */
body[data-page="home"] #inspirationHeading,
body[data-page="home"] #inspirationHeading em {
  color: #5A381C !important;
}

/* QC r52: program event-card tags all-caps at every breakpoint */
body[data-page="home"] .event-card__tag { text-transform: uppercase; }

/* The homepage footer is wrapped in a .container, so the homepage's 206px
   .container content-padding was double-padding the footer (its sub-blocks
   already pad to 222px) — squeezing the footer-bottom address to 4 lines vs
   the 2 lines on every other page. Zero the container padding for the footer
   so it's full-width and matches the rest of the site. (More specific than the
   base body[data-page="home"] .container rule, so it wins at all widths.) */
body[data-page="home"] .site-footer .container {
  padding-left: 0;
  padding-right: 0;
}

@media (max-width: 1023px) {

  /* ---------- shared type scale ---------- */
  body[data-page="home"] .eyebrow {
    font-family: 'Inter', sans-serif; font-weight: 500;
    font-size: 12px; line-height: 1; letter-spacing: 0.06em;
    text-transform: uppercase; color: #282828;
  }
  body[data-page="home"] .display {
    font-family: 'STIX Two Text', serif; font-weight: 500;
    font-size: 28px; line-height: 1.18; text-transform: capitalize;
    color: #5A381C; letter-spacing: 0;
  }
  body[data-page="home"] .display em { font-style: italic; }
  body[data-page="home"] .lead {
    font-family: 'Inter', sans-serif; font-weight: 400;
    font-size: 14px; line-height: 26px; color: #282828;
  }
  body[data-page="home"] .section { padding: 56px 0; }
  body[data-page="home"] .container { padding-left: 27px; padding-right: 27px; }

  /* ---------- HERO (video; text centered in the upper third) ---------- */
  body[data-page="home"] .hero {
    height: min(602px, calc(602 / 390 * 100vw));
    min-height: 0;
  }
  body[data-page="home"] .hero__image { object-fit: cover; }
  body[data-page="home"] .hero__veil {
    background: linear-gradient(180deg,
      rgba(38,36,34,0.42) 0%, rgba(38,36,34,0.16) 24%, rgba(0,0,0,0) 48%);
  }
  body[data-page="home"] .hero__inner {
    position: absolute; inset: 0; left: 0; right: 0;
    display: flex; flex-direction: column; align-items: center;
    justify-content: flex-start;
    text-align: center; padding: 92px 24px 0; gap: 14px;
  }
  body[data-page="home"] .hero__kicker {
    font-family: 'Inter', sans-serif; font-weight: 600;
    font-size: 10px; line-height: 1.3; letter-spacing: 0.4px;
    text-transform: uppercase; color: #FDFBF3;
    max-width: none; margin: 0; white-space: nowrap; display: block;
  }
  body[data-page="home"] .hero__kicker::before,
  body[data-page="home"] .hero__kicker::after { display: none; content: none; }
  body[data-page="home"] .hero__title {
    font-family: 'STIX Two Text', serif; font-weight: 500;
    font-size: 32px; line-height: 1.14; text-transform: capitalize;
    color: #FDFBF3; margin: 0; max-width: 325px; letter-spacing: 0;
  }
  body[data-page="home"] .hero__scroll { display: none; }

  /* ---------- THE INSPIRATION (eyebrow+heading, video, quotes, button) ---------- */
  body[data-page="home"] #inspiration { padding: 56px 0; background: #E5EBEE; }
  body[data-page="home"] .inspiration__card {
    display: flex; flex-direction: column; gap: 0;
    background: transparent; border-radius: 0; box-shadow: none;
    min-height: 0; height: auto; padding: 0; overflow: visible;
  }
  body[data-page="home"] .inspiration__body { display: contents; }
  body[data-page="home"] .inspiration__veil { display: none; }
  body[data-page="home"] .inspiration .eyebrow { order: 1; }
  body[data-page="home"] .inspiration__body .display { order: 2; margin: 8px 0 0; }
  body[data-page="home"] .inspiration__image {
    order: 3; position: relative; inset: auto;
    width: 100vw; max-width: 100vw; height: min(380px, calc(380 / 390 * 100vw));
    margin: 22px 0 0 calc(50% - 50vw); border-radius: 0;
    object-fit: cover; object-position: 85% 30%;
  }
  body[data-page="home"] .inspiration__quote {
    order: 4; font-family: 'Inter', sans-serif; font-weight: 400;
    font-size: 14px; line-height: 24px; color: #282828; margin: 14px 0 0;
    background: rgba(255,255,255,0.55); border-radius: 8px; padding: 16px 18px;
  }
  body[data-page="home"] .inspiration__quote strong { font-weight: 600; }
  body[data-page="home"] .inspiration__body .btn--filled { order: 5; margin-top: 22px; align-self: flex-start; }

  /* ---------- THE VISION + pillars ---------- */
  body[data-page="home"] #vision { padding: 56px 0; }
  body[data-page="home"] .vision-grid { display: block; }
  body[data-page="home"] .vision-grid .section-head { margin-bottom: 14px; }
  body[data-page="home"] #vision .display { margin: 8px 0 0; }
  body[data-page="home"] #vision .lead { margin-top: 14px; }
  body[data-page="home"] .pillars {
    display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: auto auto;
    grid-auto-flow: column; column-gap: 24px; row-gap: 28px; margin-top: 40px;
  }
  body[data-page="home"] .pillar { display: block; }
  body[data-page="home"] .pillar__rule {
    width: 48px; height: 2px; background: rgba(190,168,132,0.5); margin: 0 0 17px;
  }
  body[data-page="home"] .pillar h4 {
    font-family: 'STIX Two Text', serif; font-weight: 400;
    font-size: 18px; line-height: 1.1; color: #282828; margin: 0;
  }
  body[data-page="home"] .pillar p {
    font-family: 'Inter', sans-serif; font-weight: 400;
    font-size: 14px; line-height: 22px; color: rgba(40,40,40,0.7); margin: 7px 0 0;
  }

  /* ---------- FULL-BLEED LAKE (video) ---------- */
  body[data-page="home"] .fullbleed-image--lake {
    width: 100%; height: min(500px, calc(500 / 390 * 100vw));
    object-fit: cover; object-position: left center; display: block;
  }

  /* ---------- THE PRACTICE (head + image-card carousel) ---------- */
  body[data-page="home"] #practice { padding: 56px 0; }
  body[data-page="home"] #practice .container { display: flex; flex-direction: column; }
  body[data-page="home"] .practice-head { display: contents; }
  body[data-page="home"] .practice-head .section-head { order: 1; }
  body[data-page="home"] .practice-head .display { margin: 8px 0 0; }
  body[data-page="home"] .practice-head .lead { margin-top: 8px; }
  body[data-page="home"] #practiceCarousel { order: 2; margin-top: 24px; }
  body[data-page="home"] .practice-head > .reveal:last-child {
    order: 3; align-self: center; margin-top: 28px;
  }
  body[data-page="home"] .carousel__track { gap: 16px; }
  body[data-page="home"] .activity-card {
    flex: 0 0 78%; background: #FFFFFF; border: 1px solid #EFEFEF;
    border-radius: 10px; overflow: hidden;
  }
  body[data-page="home"] .activity-card__image { height: min(246px, calc(246 / 390 * 100vw)); }
  body[data-page="home"] .activity-card__body { padding: 18px 20px 22px; }
  body[data-page="home"] .activity-card__body h3 {
    font-family: 'STIX Two Text', serif; font-weight: 500;
    font-size: 24px; line-height: 1.1; color: #62302F; margin: 0;
  }
  body[data-page="home"] .activity-card__body p {
    font-family: 'Inter', sans-serif; font-weight: 400;
    font-size: 12px; line-height: 22px; color: #282828; margin: 10px 0 0;
  }
  body[data-page="home"] .activity-card__link {
    font-family: 'Inter', sans-serif; font-size: 12px; line-height: 20px;
    color: #62302F; letter-spacing: 0.02em; margin-top: 12px;
  }

  /* ---------- THE PROGRAMS — featured card + stacked list (NOT a carousel) ---------- */
  body[data-page="home"] .programs { padding: 56px 0; background: #FAFAFA; }
  body[data-page="home"] .programs-head { display: block; }
  body[data-page="home"] .programs-head .display { margin: 8px 0 0; }
  body[data-page="home"] .programs-head .lead { margin-top: 8px; }
  body[data-page="home"] .programs-head .btn--secondary { margin-top: 20px; }

  /* neutralize the carousel mechanics on mobile so all cards stack */
  body[data-page="home"] .event-stage { margin-top: 28px; }
  body[data-page="home"] .event-stage__viewport {
    display: flex !important; flex-direction: column; gap: 0;
    transform: none !important; overflow: visible; width: 100% !important;
  }
  body[data-page="home"] .event-stage__nav { display: none !important; }
  body[data-page="home"] .event-card {
    position: static !important; width: 100% !important; min-width: 0 !important;
    max-width: none !important; opacity: 1 !important; transform: none !important;
    visibility: visible !important; flex: none !important; margin: 0; pointer-events: auto !important;
    box-shadow: none !important;
  }

  /* FEATURED — first card */
  body[data-page="home"] .event-card[data-idx="0"] {
    display: flex; flex-direction: column; align-items: stretch;
    background: #F5F2EC; border: none;
    border-radius: 12px; overflow: hidden;
  }
  body[data-page="home"] .event-card[data-idx="0"] .event-card__image {
    width: 100%; height: min(360px, calc(360 / 390 * 100vw)); display: block; flex: none;
  }
  body[data-page="home"] .event-card[data-idx="0"] .event-card__body {
    width: 100%; min-width: 0; box-sizing: border-box; flex: none;
    padding: 26px 24px 30px; display: flex; flex-direction: column;
    align-items: center; text-align: center; gap: 0;
  }
  body[data-page="home"] .event-card[data-idx="0"] .event-card__tags { justify-content: center; }
  body[data-page="home"] .event-card[data-idx="0"] .event-card__tag--featured { background: #A67C52; color: #FDFBF3; border: none; }
  /* only the FEATURED EVENT pill on the featured card (drop the 2nd "Pujya Gurudevshri" tag) */
  body[data-page="home"] .event-card[data-idx="0"] .event-card__tag:not(.event-card__tag--featured) { display: none; }
  body[data-page="home"] .event-card[data-idx="0"] h3 {
    font-family: 'STIX Two Text', serif; font-weight: 500; font-size: 28px; line-height: 1.1;
    color: #282828; margin: 16px 0 0;
  }
  body[data-page="home"] .event-card[data-idx="0"] .event-card__lead {
    font-family: 'Inter', sans-serif; font-size: 14px; line-height: 24px; color: #282828; margin: 14px 0 0;
  }
  body[data-page="home"] .event-card[data-idx="0"] .event-card__meta {
    display: grid; grid-template-columns: auto auto; gap: 12px 16px; justify-content: center; margin: 22px 0 0; /* QC r53 */
  }
  body[data-page="home"] .event-card[data-idx="0"] .event-card__meta dt {
    font-family: 'Inter', sans-serif; font-size: 14px; line-height: 16px; letter-spacing: 0.6px;
    color: rgba(40,40,40,0.7); text-transform: uppercase; text-align: right; /* QC r53 */
  }
  body[data-page="home"] .event-card[data-idx="0"] .event-card__meta dd {
    font-family: 'Inter', sans-serif; font-size: 16px; line-height: 20px; color: #282828; margin: 0; text-align: left; /* QC r53 */
  }
  body[data-page="home"] .event-card[data-idx="0"] .event-card__cta {
    margin: 26px auto 0; align-self: center; background: transparent;
    border: 1px solid #A98E8A; color: #5A381C; border-radius: 6px; padding: 12px 30px;
  }

  /* STACKED LIST — subsequent cards: date · title · desc · tag pills · arrow */
  body[data-page="home"] .event-card:not([data-idx="0"]) {
    position: relative; background: transparent; border: none;
    border-top: 1px solid #E3DED5; border-radius: 0; padding: 28px 44px 6px 0; margin-top: 28px;
  }
  body[data-page="home"] .event-card:not([data-idx="0"]) .event-card__image { display: none; }
  body[data-page="home"] .event-card:not([data-idx="0"]) .event-card__body {
    display: flex; flex-direction: column; align-items: flex-start; text-align: left; padding: 0; gap: 0;
  }
  body[data-page="home"] .event-card:not([data-idx="0"]) .event-card__meta { order: 1; display: block; margin: 0; }
  body[data-page="home"] .event-card:not([data-idx="0"]) .event-card__meta dt,
  body[data-page="home"] .event-card:not([data-idx="0"]) .event-card__meta dd:nth-of-type(2) { display: none; }
  body[data-page="home"] .event-card:not([data-idx="0"]) .event-card__meta dd {
    font-family: 'Inter', sans-serif; font-size: 14px; line-height: 22px; color: #282828; margin: 0;
  }
  body[data-page="home"] .event-card:not([data-idx="0"]) h3 {
    order: 2; font-family: 'Inter', sans-serif; font-weight: 500; font-size: 18px; line-height: 1.25;
    color: #282828; margin: 12px 0 0;
  }
  body[data-page="home"] .event-card:not([data-idx="0"]) .event-card__lead {
    order: 3; font-family: 'Inter', sans-serif; font-size: 14px; line-height: 24px;
    color: rgba(40,40,40,0.7); margin: 12px 0 0;
  }
  body[data-page="home"] .event-card:not([data-idx="0"]) .event-card__tags {
    order: 4; display: flex; gap: 10px; margin: 18px 0 0;
  }
  body[data-page="home"] .event-card:not([data-idx="0"]) .event-card__tag {
    border: 1px solid #5E2A29; color: #5E2A29; background: transparent; border-radius: 40px;
    padding: 6px 16px; font-family: 'Inter', sans-serif; font-size: 12px; line-height: 1;
    letter-spacing: 0.02em; text-transform: uppercase; /* QC r52 */
  }
  body[data-page="home"] .event-card:not([data-idx="0"]) .event-card__cta {
    position: absolute; right: 0; bottom: 8px; width: 36px; height: 36px;
    border: 1px solid #5E2A29; border-radius: 50%; font-size: 0; padding: 0; margin: 0;
    display: flex; align-items: center; justify-content: center;
  }
  body[data-page="home"] .event-card:not([data-idx="0"]) .event-card__cta::after {
    content: ''; width: 8px; height: 8px; border-right: 1.6px solid #5E2A29;
    border-bottom: 1.6px solid #5E2A29; transform: rotate(-45deg); margin-left: -2px;
  }

  /* ---------- QUOTE ---------- */
  body[data-page="home"] .quote-break { padding: 56px 24px; }
  body[data-page="home"] .quote-break blockquote {
    font-family: 'STIX Two Text', serif; font-weight: 400; font-style: normal;
    font-size: 22px; line-height: 1.43; color: #4A3B2E; max-width: 280px;
    margin: 0 auto;
  }
  body[data-page="home"] .quote-break cite {
    font-family: 'Inter', sans-serif; font-weight: 600; font-style: normal;
    font-size: 14px; line-height: 1; letter-spacing: 0.42px;
    text-transform: uppercase; color: #5E2A29; margin-top: 18px;
  }

  /* ---------- THE IMPACT (eyebrow+heading, full-bleed image, paragraph, bar list, button) ---------- */
  body[data-page="home"] .impact { padding: 56px 0; text-align: left; }
  body[data-page="home"] .impact-grid { display: flex; flex-direction: column; align-items: flex-start; }
  body[data-page="home"] .impact__copy { display: contents; }
  body[data-page="home"] .impact .eyebrow { order: 1; }
  body[data-page="home"] .impact__copy .display { order: 2; margin: 8px 0 0; }
  /* full-bleed — break out of the 27px container padding, edge to edge, no radius */
  body[data-page="home"] .impact__image {
    order: 3; width: 100vw; max-width: 100vw; margin: 24px 0 0 calc(50% - 50vw);
    height: min(360px, calc(360 / 390 * 100vw)); border-radius: 0; display: block;
    background-size: cover; background-position: center; align-self: stretch;
  }
  body[data-page="home"] .impact__lead {
    order: 4; font-family: 'Inter', sans-serif; font-size: 14px; line-height: 24px;
    color: #282828; margin: 24px 0 0;
  }
  body[data-page="home"] .impact-list {
    order: 5; display: flex; flex-direction: column; align-items: flex-start;
    gap: 30px; margin: 24px 0 0; list-style: none; padding: 0;
  }
  body[data-page="home"] .impact-list li {
    font-family: 'STIX Two Text', serif; font-weight: 400;
    font-size: 16px; line-height: 36px; color: #282828; text-align: left;
    padding: 0 0 0 41px; position: relative; margin: 0; min-height: 48px;
    display: flex; align-items: center;
  }
  body[data-page="home"] .impact-list li::before {
    content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%);
    width: 2px; height: 48px; background: rgba(190,168,132,0.5);
  }
  body[data-page="home"] .impact-grid > .impact__copy > div:last-child {
    order: 6; margin-top: 16px; align-self: flex-start; text-align: left;
  }
}

/* ============================================================
   HOMEPAGE — DESKTOP 1:1  (Figma node 4148:1430 "Homepage 1.1", 1920-wide)
   The base styles.css desktop is intentionally scaled to a 1440 reference
   (--container-max 1440, --ds 0.84, --fs-h1 56). This block drives the
   homepage off the raw Figma 1920 values instead: content margins 206px,
   h1 64 / display 52, and the Figma section layouts. Scales below 1920 via
   min(Xpx, calc(X/1920*100vw)). Videos (hero/inspiration/lake) preserved.
   Desktop only (≥1024); iPad/tablet uses the mobile layout (scaled up) above.
   ============================================================ */
@media (min-width: 1024px) {
  /* content column = Figma 206px side margins (vs the 1440 cap) */
  body[data-page="home"] .container {
    width: 100%; max-width: none;
    padding-left: min(206px, calc(206 / 1920 * 100vw));
    padding-right: min(206px, calc(206 / 1920 * 100vw));
  }
  body[data-page="home"] .section-head { max-width: none; }
  body[data-page="home"] .display {
    font-size: min(52px, calc(52 / 1920 * 100vw));
    line-height: calc(58 / 52);
  }
  body[data-page="home"] .eyebrow {
    font-size: min(20px, calc(20 / 1920 * 100vw));
    letter-spacing: 1.2px;
  }
  body[data-page="home"] .lead {
    font-size: min(20px, calc(20 / 1920 * 100vw));
    line-height: calc(38 / 20);
  }

  /* ---------- HERO (952 tall, text upper-third, title 64) ---------- */
  body[data-page="home"] .hero {
    height: calc(952 / 1920 * 100vw); /* scales past 1920 so the hero never flattens to a banner */
    max-height: none;
  }
  body[data-page="home"] .hero__inner {
    justify-content: flex-start;
    padding: calc(92 / 1920 * 100vw) 24px 0;
  }
  body[data-page="home"] .hero__kicker {
    font-family: 'Inter', sans-serif; font-weight: 600;
    font-size: min(20px, calc(20 / 1920 * 100vw)); line-height: 1.2;
    letter-spacing: 2px; color: #FAFAFA;
    margin-bottom: min(10px, calc(10 / 1920 * 100vw));
  }
  body[data-page="home"] .hero__title {
    font-family: 'STIX Two Text', serif; font-weight: 500;
    font-size: min(64px, calc(64 / 1920 * 100vw)); line-height: 1.25;
    text-transform: capitalize; color: #FAFAFA;
  }

  /* ---------- INSPIRATION (full-bleed card, copy left at x=206) ---------- */
  body[data-page="home"] .inspiration__card {
    aspect-ratio: auto;
    height: auto;
    min-height: calc(940 / 1920 * 100vw);
  }
  body[data-page="home"] .inspiration__body {
    max-width: min(776px, calc(776 / 1920 * 100vw));
    min-height: 0;
    align-content: start;
    padding: min(71px, calc(71 / 1920 * 100vw)) 0 min(71px, calc(71 / 1920 * 100vw)) min(206px, calc(206 / 1920 * 100vw));
    gap: min(22px, calc(22 / 1920 * 100vw));
  }
  body[data-page="home"] .inspiration__body h2 {
    font-size: min(52px, calc(52 / 1920 * 100vw)); line-height: calc(58 / 52);
    max-width: min(505px, calc(505 / 1920 * 100vw)); /* QC r43: keep heading 2 lines */
  }

  /* ---------- VISION → single left column (heading → body → button) ---------- */
  body[data-page="home"] .vision-grid {
    grid-template-columns: 1fr;
    gap: min(40px, calc(40 / 1920 * 100vw));
  }
  body[data-page="home"] #vision .display { max-width: min(520px, calc(520 / 1920 * 100vw)); }
  body[data-page="home"] #vision .lead { max-width: min(879px, calc(879 / 1920 * 100vw)); }
  body[data-page="home"] .pillars {
    grid-template-columns: repeat(4, min(255px, calc(255 / 1920 * 100vw)));
    gap: min(70px, calc(70 / 1920 * 100vw));
    margin-top: min(104px, calc(104 / 1920 * 100vw));
    justify-content: start;
  }
  body[data-page="home"] .pillar__rule { margin-bottom: min(32px, calc(32 / 1920 * 100vw)); }

  /* ---------- FULL-BLEED LAKE (829 tall) ---------- */
  body[data-page="home"] .fullbleed-image--lake {
    height: calc(829 / 1920 * 100vw);
  }

  /* ---------- PRACTICE — 4 big cards (440 wide), full-bleed to 35px ---------- */
  body[data-page="home"] .practice-head { margin-bottom: min(60px, calc(60 / 1920 * 100vw)); }
  body[data-page="home"] .carousel {
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    padding-left: min(35px, calc(35 / 1920 * 100vw));
    padding-right: min(35px, calc(35 / 1920 * 100vw));
  }
  body[data-page="home"] .carousel__track { gap: min(30px, calc(30 / 1920 * 100vw)); }
  body[data-page="home"] .activity-card {
    flex: 0 0 calc((100% - 3 * min(30px, calc(30 / 1920 * 100vw))) / 4);
    background: rgba(255, 255, 255, 0.7);
    border-radius: 10px;
  }
  body[data-page="home"] .activity-card__image { aspect-ratio: 440 / 403; }
  body[data-page="home"] .activity-card__body { padding: min(32px, calc(32 / 1920 * 100vw)); }
  body[data-page="home"] .activity-card__body h3 { font-size: min(24px, calc(24 / 1920 * 100vw)); }
  body[data-page="home"] .activity-card__body p { font-size: min(18px, calc(18 / 1920 * 100vw)); line-height: calc(30 / 18); }

  /* ---------- PROGRAMS — clean cream, featured card 1254 wide ---------- */
  body[data-page="home"] .programs { background: transparent; padding-top: min(70px, calc(70 / 1920 * 100vw)); } /* QC r27: tighter gap above */
  body[data-page="home"] .event-stage__viewport { gap: min(32px, calc(32 / 1920 * 100vw)); }
  body[data-page="home"] .event-card {
    flex: 0 0 min(1254px, calc(1254 / 1920 * 100vw));
    grid-template-columns: 591fr 663fr;
    min-height: min(548px, calc(548 / 1920 * 100vw));
  }
  body[data-page="home"] .event-card h3 { font-size: min(36px, calc(36 / 1920 * 100vw)); }
  body[data-page="home"] .event-card__lead { font-size: min(20px, calc(20 / 1920 * 100vw)); line-height: calc(38 / 20); max-width: none; }

  /* ---------- IMPACT — copy left (x=206), square image right (978) ---------- */
  body[data-page="home"] .impact-grid {
    grid-template-columns: min(512px, calc(512 / 1920 * 100vw)) 1fr;
    gap: min(48px, calc(48 / 1920 * 100vw));
    align-items: center;
  }
  body[data-page="home"] .impact__copy { max-width: none; }
  body[data-page="home"] .impact__copy .display { max-width: min(504px, calc(504 / 1920 * 100vw)); } /* QC r54: 2-line heading */
  body[data-page="home"] .impact__image { aspect-ratio: 1 / 1; }
  body[data-page="home"] .impact-list li { font-size: min(24px, calc(24 / 1920 * 100vw)); }

  /* ===== QC Figma fixes (desktop) ===== */
  body[data-page="home"] .inspiration__image { object-position: center 26%; } /* r9: show Bapa's upper body */
  body[data-page="home"] .inspiration__veil { display: block; background: linear-gradient(90.15deg, rgba(5,50,80,0.075) 39.8%, rgba(255,255,255,0) 52.7%); } /* r25: faint blue cast */
  body[data-page="home"] #inspiration { padding-top: min(29px, calc(29 / 1920 * 100vw)); padding-bottom: min(29px, calc(29 / 1920 * 100vw)); } /* r26 */
  body[data-page="home"] .section-head { gap: 0; } /* r28 */
  body[data-page="home"] .section-head .display { margin-top: min(55px, calc(55 / 1920 * 100vw)); } /* r28: eyebrow->heading 55px */
  body[data-page="home"] .section-head .lead { margin-top: min(40px, calc(40 / 1920 * 100vw)); } /* r28: heading->lead 40px */
  body[data-page="home"] .programs-head { display: flex; justify-content: space-between; align-items: flex-end; } /* r51 */
  body[data-page="home"] .programs-head .section-head { flex: 1 1 auto; } /* r51 */
  body[data-page="home"] .programs-head .btn--secondary { flex-shrink: 0; margin-top: 0; margin-left: min(32px, calc(32 / 1920 * 100vw)); } /* r51: button right of text */
}

/* ============================================================
   HOMEPAGE — interactive links (all widths)
   Whole practice card links to its activity page (the small "Learn More"
   anchor is stretched over the card); the impact image links to Social Impact.
   ============================================================ */
body[data-page="home"] .activity-card { position: relative; }
body[data-page="home"] .activity-card__link::after {
  content: ''; position: absolute; inset: 0; z-index: 2;
}
body[data-page="home"] a.impact__image { display: block; }

/* ============================================================
   HOMEPAGE — TABLET (768–1023)
   Inherits the Figma desktop layout from the ≥768 block, but pure 1:1 scaling
   renders text at ~40% there. Floor the type to readable sizes and relax the
   tightest grids (practice 4→2 cards, impact columns, inspiration copy width).
   ============================================================ */
@media (min-width: 768px) and (max-width: 1023px) {
  body[data-page="home"] .impact__image.reveal { opacity: 1; transform: none; } /* QC r38: show impact image on iPad */
  /* iPad = the mobile layout (inherited from the ≤1023 block above), scaled up:
     center the text column, keep media full-bleed but taller, enlarge type ~1.2x. */
  body[data-page="home"] .container { max-width: 760px; margin-left: auto; margin-right: auto; }
  body[data-page="home"] .quote-break__inner { max-width: 560px; }

  /* type — a step up from the phone sizes */
  body[data-page="home"] .display { font-size: 34px; }
  body[data-page="home"] .lead { font-size: 16px; line-height: 1.8; }
  body[data-page="home"] .eyebrow { font-size: 13px; }
  body[data-page="home"] .hero__title { font-size: 40px; max-width: 520px; }
  body[data-page="home"] .hero__kicker { font-size: 12px; }
  body[data-page="home"] .hero__inner { padding-top: 120px; }
  body[data-page="home"] .inspiration__quote { font-size: 15px; line-height: 1.7; }
  body[data-page="home"] .pillar h4 { font-size: 22px; }
  body[data-page="home"] .pillar p { font-size: 15px; }
  body[data-page="home"] .quote-break blockquote { font-size: 30px; max-width: 520px; }
  body[data-page="home"] .impact__lead { font-size: 16px; }
  body[data-page="home"] .impact-list li { font-size: 20px; }

  /* media — full-bleed but taller so the wide crops read well */
  body[data-page="home"] .hero { height: min(620px, 70vw); }
  body[data-page="home"] .inspiration__image { height: min(560px, 56vw); object-position: center 28%; }
  body[data-page="home"] .fullbleed-image--lake { height: min(600px, 60vw); }
  body[data-page="home"] .impact__image { height: min(560px, 54vw); }

  /* practice — keep the mobile 1-card+peek carousel, a touch bigger */
  body[data-page="home"] .activity-card { flex: 0 0 60%; }
  body[data-page="home"] .activity-card__image { height: min(320px, 30vw); }
  body[data-page="home"] .activity-card__body { padding: 24px 26px 28px; }
  body[data-page="home"] .activity-card__body h3 { font-size: 28px; }
  body[data-page="home"] .activity-card__body p { font-size: 14px; }
  body[data-page="home"] .activity-card__link { font-size: 14px; }

  /* programs — featured card image + type */
  body[data-page="home"] .event-card[data-idx="0"] .event-card__image { height: min(460px, 46vw); }
  body[data-page="home"] .event-card[data-idx="0"] h3 { font-size: 32px; }
  body[data-page="home"] .event-card[data-idx="0"] .event-card__lead { font-size: 16px; }
  body[data-page="home"] .event-card:not([data-idx="0"]) h3 { font-size: 21px; }
  body[data-page="home"] .event-card:not([data-idx="0"]) .event-card__lead { font-size: 15px; }
}

/* ===================== QC fixes — 6/2 ===================== */

/* r62: Hide the Programs section — "no programs to show in phase 1". This also
   resolves r12/r60 (the event-card / View All Events buttons had no event pages
   to link to). Re-enable by removing this rule once phase-1 events exist. */
body[data-page="home"] #programs { display: none; }

/* r66: the Vision heading ("A Home for the Soul in the Heart of Nature") rendered
   maroon #5E2A29 — should be brand brown #5A381C to match the Inspiration
   heading ("Guided by Wisdom, Rooted in Compassion"), which is already #5A381C. */
body[data-page="home"] #visionHeading,
body[data-page="home"] #visionHeading em { color: #5A381C; }

/* r67: the homepage secondary buttons (Explore the Space, See Our Impact) were
   brand-maroon (--brand) — QC wants brand brown #5A381C with a brown hover fill. */
body[data-page="home"] .btn--secondary { color: #5A381C; border-color: #5A381C; }
body[data-page="home"] .btn--secondary .btn-icon { background: #5A381C; }
body[data-page="home"] .btn--secondary:hover { background: #5A381C; color: #FDFBF3; border-color: #5A381C; }
body[data-page="home"] .btn--secondary:hover .btn-icon { background: #FDFBF3; color: #5A381C; }

/* r63 (mobile): "About Our Guides" sat too tight under the quote (inline
   margin-top:8px). Give it real breathing room on phones. */
@media (max-width: 767px) {
  body[data-page="home"] .inspiration__body .btn--filled { margin-top: 22px !important; }
}

/* r65 (mobile): the impact labels (Healthcare / Education / Sustainability /
   Community Development) were spaced too far apart — tighten the row gap and the
   per-item vertical padding so the list reads as a tighter group. */
@media (max-width: 767px) {
  body[data-page="home"] .impact-list { gap: 12px; }
  body[data-page="home"] .impact-list li { padding-top: 4px; padding-bottom: 4px; }
}

/* r64 (mobile): STANDARDIZE the eyebrow->heading gap across every section.
   The base per-section rules all set the heading margin-top to 8px, but each
   section's flex/grid CONTAINER adds its own gap on top of that — so the live
   eyebrow->heading distance came out 8 (Inspiration) / 24 (Vision) / 22
   (Practice) / 40 (Impact). The Figma mobile artboard (4149:6286) uses a single
   20px eyebrow->heading rhythm in all four (The Inspiration->Guided By Wisdom,
   The Vision->A Home for the Soul, The Practice->Choose Your Path, The
   Impact->A Movement Fueled). Pin every section to that 20px here.
   Scoped <=767 only (desktop/tablet >=768 keep their own larger rhythm). */
@media (max-width: 767px) {
  /* Each section's eyebrow->heading distance = (container gap above the heading)
     + (heading margin-top). The heading's own margin-top only affects the space
     ABOVE it (eyebrow->heading), never heading->lead, so we tune it per section
     to hit a uniform 20px without disturbing any other spacing.

     Inspiration: .inspiration__body is display:contents -> container gap 0.
       20 = 0 + 20  */
  body[data-page="home"] .inspiration__body .display { margin-top: 20px; }

  /* Vision: eyebrow+heading are the only children of .section-head (the lead is
     a separate .vision-grid child). The section-head flex gap varies by sub-
     breakpoint (16 <=480, smaller 481-767), so zero it and let a fixed 20px
     margin be the single, gap-independent source of the eyebrow->heading gap. */
  body[data-page="home"] #vision .section-head { gap: 0; }
  body[data-page="home"] #vision .section-head .display { margin-top: 20px; }

  /* Practice: same, but here the lead ALSO lives in .section-head, so zeroing the
     gap would also collapse heading->lead. Restore that with an explicit lead
     margin (matches the 18px it had from the old flex gap + inline 4px). Result:
     eyebrow->heading = 20 and heading->lead = 18 at every mobile width.
     The lead carries an inline style="margin-top:4px", so the restore needs
     !important to win over that inline declaration. */
  body[data-page="home"] #practice .section-head { gap: 0; }
  body[data-page="home"] #practice .section-head .display { margin-top: 20px; }
  body[data-page="home"] #practice .section-head .lead { margin-top: 18px !important; }

  /* Impact: .impact__copy is display:contents, so the eyebrow + heading sit
     directly in the .impact-grid track and share its row-gap (which leaks in as
     32px <=480 via mobile.css but 40px 481-1079 via styles.css). Pin that row-gap
     to one value across all of mobile so the heading offset is constant, then
     pull the heading up to 20px above the eyebrow:  20 = 32 + (-12).
     The row-gap is shared with the blocks below the heading, but each of those
     (image/lead/list/button) carries its own explicit margin-top, so the visible
     rhythm below the heading stays grid-gap(32) + that margin -- unchanged from
     the <=480 baseline. */
  body[data-page="home"] .impact-grid { row-gap: 32px; }
  body[data-page="home"] .impact__copy .display { margin-top: -12px; }
}

/* r68/r69 (rework 2): QC wants this band to MATCH the desktop OVERLAY (text +
   quote bubbles over the photo, Bapa on the right) — not a stacked card. So
   extend the desktop overlay down to 1020: the photo becomes the absolute
   background (Bapa pushed right via object-position so he stays in frame at these
   narrower widths), the text overlays the left in a narrower column, with the
   desktop's warm gradient + veil. <=1019 (the 900s) and >=1200 (full desktop) are
   untouched. !important because the styles.css ~4628 treatment + the <=1079
   tablet stack both contest this band. */
@media (min-width: 1020px) and (max-width: 1199px) {
  body[data-page="home"] .inspiration__card {
    width: 100vw !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
    aspect-ratio: 16 / 10 !important;
    min-height: 600px !important;
    display: block !important;
    isolation: isolate !important;
    overflow: hidden !important;
    background: linear-gradient(155deg, #efe1cf, #f3d9c4) !important;
    border-radius: 0 !important;
    padding: 0 !important;
  }
  body[data-page="home"] .inspiration__image {
    position: absolute !important; inset: 0 !important;
    width: 100% !important; height: 100% !important; aspect-ratio: auto !important;
    object-fit: cover !important; object-position: 72% center !important;
    border-radius: 0 !important; z-index: 0 !important; filter: none !important;
  }
  body[data-page="home"] .inspiration__veil { display: block !important; }
  body[data-page="home"] .inspiration__body {
    display: grid !important; grid-template-columns: 1fr !important; gap: 18px !important;
    max-width: min(560px, 53%) !important;
    align-content: center !important; min-height: 100% !important; margin: 0 !important;
    position: relative !important; z-index: 2 !important;
    padding: clamp(40px, 5vw, 76px) !important; background: none !important;
  }
  body[data-page="home"] .pillars { grid-template-columns: 1fr 1fr; gap: 28px 40px; }
}