/* =========================================================================
   Holisthea — responsive layer
   The desktop design is a fixed 1440px canvas (1240px content + 100px margins)
   and stays byte-identical at >=1320px. Everything below steps down through:
     <=1319  leave the fixed canvas, containers go fluid
     <=1023  tablet: two-column blocks collapse
     <=767   mobile: single column + reduced type scale
     <=400   small phones
   Loaded AFTER styles.css / home.css so it always wins.
   ========================================================================= */
:root{--rpad:40px}

/* ================================ <=1319 ================================ */
@media (max-width:1319px){
  :root{--rpad:32px}
  html,body{max-width:100%}

  /* the 1440 canvas + every fixed 1240 container become fluid */
  .hp{width:100%}
  .hp-wrap,.hp-eye,.hp-head,.hp-hero__row,.hp-rootcause,.hp-dim,.hp-svc-row,
  .hp-aspects__grid,.hp-split,.hp-proc-steps,.hp-cases__row,.hp-about__statement,
  .hp-about__grid,.hp-faq__grid,.hp-contact__grid,.hp-prob-card,
  .org-case-row{width:100%;max-width:1240px;margin-inline:auto;
    padding-left:var(--rpad);padding-right:var(--rpad);box-sizing:border-box}
  .hp-prob-card{padding-top:40px;padding-bottom:40px}
  .hp-rootcause{padding-left:var(--rpad);padding-right:var(--rpad)}
  .hp-prob-hero,.hp-prob-stats{width:100%}
  /* <figure> carries a UA default margin:1em 40px — it pushes the testimonial
     card past its column once the canvas is fluid. */
  .hp-testi-card{margin:0}
  /* Calendly ships min-width:600px; let it shrink with its column instead. */
  .hp-contact__cal .calendly-inline-widget,
  .ct__cal .calendly-inline-widget,
  .calendly-inline-widget{min-width:0!important;width:100%;max-width:100%}
  .hp-contact__cal,.ct__cal{width:100%;min-width:0;max-width:100%;overflow:hidden}
  /* keep nav dropdowns inside the viewport when the bar gets tight */
  .nav__item:nth-child(2) .dropdown,.nav__item:nth-child(3) .dropdown{left:auto;right:0}
  .dropdown{max-width:calc(100vw - 32px)}
  /* pill tags hold long labels — let them wrap rather than push the card open */
  .hp-dim__tags{flex-basis:260px;min-width:0}
  .hp-dim__tags li{white-space:normal;max-width:100%;overflow-wrap:anywhere}
  /* long CTA labels must be allowed to wrap once the column is narrow */
  .hp-btn,.btn{white-space:normal;max-width:100%}
  .hp-dim{height:auto;min-height:0;padding-top:32px;padding-bottom:32px;flex-wrap:wrap}

  /* flex rows: let children shrink instead of overflowing */
  .hp-hero__row,.hp-aspects__grid,.hp-split,.hp-faq__grid,.hp-contact__grid,
  .hp-about__grid,.hp-prob-hero,.hp-prob-stats,.hp-proc-steps{flex-wrap:wrap}
  .hp-hero__text,.hp-features,.hp-split__intro,.hp-pkg-intro,.hp-pkg-grid,
  .hp-faq__intro,.hp-faq__list,.hp-contact__intro,.hp-about__bio,.hp-about__blurb,
  .hp-testi-card,.hp-dim__body,.hp-dim__tags,.hp-prob-hero__mid,.hp-stat,
  .hp-cred__t{width:auto;flex:1 1 auto;min-width:0;max-width:100%}
  .hp-hero__text{flex-basis:480px}
  .hp-features{flex-basis:520px}
  .hp-split__intro,.hp-pkg-intro,.hp-faq__intro,.hp-contact__intro{flex-basis:400px}
  .hp-faq__list,.hp-testi-card,.hp-pkg-grid{flex-basis:520px}
  .hp-dim__body{flex-basis:360px}
  .hp-dim__tags{flex-basis:240px}
  .hp-about__bio,.hp-about__blurb{flex-basis:480px}
  .hp-about__photo{width:min(526px,42vw);height:auto;flex:0 1 auto;aspect-ratio:526/688;object-fit:cover}
  .hp-aspects__illus{width:min(447px,36vw)}
  .hp-hero__art{flex:0 0 auto;width:min(420px,80vw);height:auto;aspect-ratio:420/518}
  .hp-hero__person{left:15.24%;top:5.6%;width:69.52%}
  .hp-hero__lotus{left:3.57%;top:67.37%;width:92.62%;bottom:auto}
  /* the 128px hero tail is too much once everything stacks */
  .hp-hero{padding-bottom:72px}
  .hp-services,.hp-cases,.hp-process,.hp-aspects{padding-bottom:64px}
  .hp-stat{height:auto;min-height:150px;padding:16px 24px;flex-basis:280px}
  .hp-proc-step{flex:1 1 200px}
  .hp-case{flex-basis:min(1104px,88vw)}
  .org-case{flex-basis:min(1000px,88vw)}
  .hp-case__fig{flex:0 0 260px;width:260px;height:auto}
  .hp-case__body{width:auto;flex:1 1 380px;min-width:0}

  /* header: the 174px bar is too tall once the canvas shrinks */
  :root{--header-h:120px}
  .brand img{height:72px;width:auto}
  .nav{gap:10px}
  .nav__link{font-size:16px;padding:10px 6px}
  .header-cta{margin-left:8px;padding:12px 20px;font-size:16px}

  /* newer pages that still carry fixed columns */
  .org-faqs__grid{grid-template-columns:360px 1fr;gap:40px}
  .org-form__grid{grid-template-columns:360px 1fr;gap:40px}
  .ab-founder{grid-template-columns:minmax(0,420px) 1fr;gap:40px}
  .ab-founder__photo{width:100%}
  .ab-values{grid-template-columns:minmax(0,340px) 1fr;gap:40px}
  .sci-row{grid-template-columns:340px 1fr;gap:40px}
  .sci-row--flip{grid-template-columns:1fr 340px}
  .sci-row__panel{width:100%}
  .page-org .process__steps{grid-template-columns:repeat(5,1fr);gap:16px}
  .page-org .pstep{width:auto}
  .page-org .pstep__icon{width:100%;max-width:175px;height:auto}
}

/* ================================ <=1023 (tablet) ======================== */
@media (max-width:1023px){
  :root{--rpad:24px;--header-h:96px}
  .brand img{height:60px}

  /* type scale */
  .hp-hero__title{font-size:44px;line-height:1.14}
  .hp-h2,.hp-aspects__title,.hp-split__title{font-size:38px;line-height:1.16}
  .hp-about__name,.hp-prob-hero__num{font-size:44px;line-height:1.15}
  .hp-about__statement,.hp-rootcause__title,.hp-testi-card__title{font-size:28px;line-height:1.3}
  .hp-dim__title{font-size:30px;line-height:1.2}
  .hp-feat__title{font-size:26px;line-height:1.2}
  .hp-case__title{font-size:26px;line-height:1.25}
  .fhero__title{font-size:40px;line-height:1.18}
  .fsec__title,.pkg-head__title,.ab-values__t,.ab-mv__card h3,.ct__title,.wk__title,
  .section-title,.org-faqs__title{font-size:34px;line-height:1.18}
  .pkg-hero2__title{font-size:38px;line-height:1.18}
  .ab-value h3{font-size:30px}
  .ab-founder__name{font-size:40px}
  .org-case__title{font-size:26px}
  .split__title,.different__title{font-size:32px}

  /* two-column blocks collapse */
  .hp-hero__row{flex-direction:column;text-align:center;gap:32px}
  .hp-hero__text{align-items:center;flex-basis:auto;width:100%}
  .hp-hero__lead{max-width:52ch}
  .hp-aspects__grid,.hp-split,.hp-faq__grid,.hp-contact__grid,.hp-about__grid{
    flex-direction:column;gap:32px}
  .hp-aspects__intro{position:static;width:100%;flex:0 0 auto;padding-top:0}
  /* Same bug, every column-flip target: a px flex-basis authored for the desktop
     ROW layout becomes a HEIGHT once the parent flips to flex-direction:column,
     forcing a tall empty box regardless of real content (this is what produced
     the big dead gaps under "What makes us different", "Explore our Wellness
     Packages", the testimonial column, FAQ, contact and about columns). */
  .hp-hero__text,.hp-features,.hp-split__intro,.hp-testi-card,.hp-pkg-intro,
  .hp-pkg-grid,.hp-faq__intro,.hp-faq__list,.hp-contact__intro,.hp-about__bio,
  .hp-dim__body,.hp-dim__tags{flex:0 0 auto;height:auto}

  .hp-aspects__illus{width:min(360px,60vw);margin-inline:auto}
  .hp-features{width:100%;flex-basis:auto}
  .hp-about__grid{align-items:center}
  .hp-about__photo{width:min(420px,70vw)}
  .hp-testi-card{width:100%;flex-basis:auto;height:auto;min-height:0}
  .hp-pkg-grid{width:100%;flex-basis:auto;justify-content:center}
  .hp-faq__intro,.hp-contact__intro{padding:0;flex-basis:auto;width:100%}
  .hp-faq__list{width:100%;flex-basis:auto}
  .hp-prob-hero{height:auto;gap:24px;justify-content:center;text-align:center}
  .hp-prob-hero__mid{flex-basis:100%;order:-1}
  .hp-prob-stats{justify-content:center}
  .hp-dim{flex-direction:column;text-align:center;align-items:center;gap:24px}
  .hp-dim__body,.hp-dim__tags{flex-basis:auto;width:100%;align-items:center}
  .hp-dim__tags{flex-direction:row;flex-wrap:wrap;justify-content:center}
  .hp-proc-steps{justify-content:center;gap:32px}
  .hp-proc-step{flex:1 1 220px;max-width:280px}
  .hp-case{flex-direction:column;align-items:center;text-align:left;min-height:0}
  .hp-case__fig{flex:0 0 auto;width:220px}
  .hp-case__body{flex-basis:auto;width:100%}

  /* newer pages */
  .org-faqs__grid,.org-form__grid,.ab-founder,.ab-values,.ab-mv,
  .sci-row,.sci-row--flip,.pkg-custom__grid,.ct__grid,.split,.different__grid,
  .inquiry,.fhero__grid{grid-template-columns:1fr;gap:32px}
  .sci-row--flip .sci-row__panel{order:0}
  .sci-row__panel{max-width:420px}
  .ab-founder__photo{max-width:420px}
  .ab-values__illus{max-width:280px}
  .different__intro{position:static}
  .fhero__art,.pkg-custom__illus,.org-form__illus{justify-self:center;width:min(320px,70vw);height:auto}
  .page-org .org-form__illus{width:min(320px,70vw);height:auto}
  .ab-pillars,.sci-apps,.ab-expertise,.stats-illus{grid-template-columns:1fr 1fr;gap:32px}
  .page-org .process__steps{grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:32px}
  .org-case{padding:28px}
  .org-case__logo{height:52px}
  .org-case__outcomes,.org-case__outcomes--2{grid-template-columns:1fr 1fr}
  .svc-cards{grid-template-columns:1fr;gap:24px}
  .svc-card--center{width:100%}
  .pcards,.pcards--4{grid-template-columns:repeat(auto-fit,minmax(280px,400px));justify-content:center;gap:24px}
  .hero__grid{grid-template-columns:1fr;text-align:center}
  .hero__art{order:-1;justify-self:center}
}

/* ================================ <=767 (mobile) ======================== */
@media (max-width:767px){
  :root{--rpad:20px;--gutter:20px;--header-h:76px}
  .brand img{height:48px}

  .hp-hero__title{font-size:34px;line-height:1.16}
  .hp-hero__lead{font-size:18px;line-height:1.5}
  .hp-h2,.hp-aspects__title,.hp-split__title,.fsec__title,.pkg-head__title,
  .ab-values__t,.ab-mv__card h3,.ct__title,.wk__title,.section-title,
  .org-faqs__title,.pkg-hero2__title,.fhero__title{font-size:28px;line-height:1.2}
  /* long eyebrow labels ("Aspects of Holisthea") outgrow narrow phones */
  .hp-eye__label,.sec-head__label{font-size:18px;line-height:1.25;white-space:normal}
  .hp-eye,.sec-head{gap:12px}
  .hp-sub,.hp-dim__desc,.hp-rootcause__body,.hp-case__text,.hp-proc-step__d,
  .fsec__sub,.pkg-head__sub,.org-case__desc,.sci-row__lead,.sci-row__list,
  .sci-app p,.ab-value p,.ab-mv__card p,.ct__sub,.wk__sub,.section-sub,
  .org-faqs__sub,.pkg-hero2__sub,.fhero__sub{font-size:16px;line-height:1.5}
  .hp-about__name,.ab-founder__name,.hp-prob-hero__num{font-size:32px;line-height:1.2}
  .hp-about__statement,.hp-rootcause__title,.hp-testi-card__title,
  .pkg-custom__title,.org-form__title{font-size:22px;line-height:1.3}
  .hp-dim__title{font-size:24px}
  .hp-feat__title,.org-case__title,.hp-case__title,.sci-row__title{font-size:21px;line-height:1.25}
  .ab-value h3{font-size:24px}
  .ab-exp p{font-size:22px}
  .hp-testi-card__quote{font-size:16px;line-height:1.5}
  .hp-testi-card__author{font-size:20px}
  .btn,.pcard__btn,.org-form__submit{font-size:16px;padding:12px 20px;line-height:20px}
  .hp-btn{font-size:16px;padding:12px 18px;line-height:1.35;width:100%;text-align:center;
    display:inline-flex;justify-content:center}
  .hp-pkg-cta{align-items:stretch}
  .pcard__btn,.org-form__submit{width:100%;height:48px;padding:0}

  /* single column everywhere */
  .ab-pillars,.sci-apps,.ab-expertise,.stats-illus,.pcards,.pcards--4,
  .org-case__outcomes,.org-case__outcomes--2,.hp-pkg-grid,
  .site-footer__cols{grid-template-columns:1fr}
  .page-org .process__steps{grid-template-columns:1fr;gap:36px}
  .hp-proc-steps{flex-direction:column;align-items:center}
  .hp-proc-step{flex:0 0 auto;height:auto}
  .hp-proc-step{flex:1 1 auto;max-width:100%;width:100%}
  .hp-prob-stats{flex-direction:column;align-items:stretch}
  .hp-stat{flex-basis:auto;width:100%;min-height:0;padding:16px 20px}
  .hp-prob-hero__illus{margin-inline:auto}
  .hp-dim__tags{flex-direction:column;align-items:stretch}
  .hp-dim__tags li{text-align:center}

  /* cards: full-bleed-ish, keep the swipe rows swipeable */
  .hp-case,.org-case{flex-basis:86vw;padding:20px}
  .hp-case__fig{width:180px}
  .pcard{width:100%;max-width:none;padding:24px}
  .hp-pkg-card{width:100%}
  .hp-feat{flex-direction:column;align-items:flex-start;gap:16px;padding:20px}
  .hp-feat__ico{width:88px;height:110px;flex:0 0 auto}
  .hp-about__photo{width:100%;max-width:340px;margin-inline:auto}
  .hp-about__grid{flex-direction:column;align-items:center}
  .ab-cred{grid-template-columns:44px 1fr;gap:12px}
  .ab-cred img{width:44px;height:44px}
  .hp-cred__ico{width:56px;height:56px;flex:0 0 56px}

  /* forms + FAQ rows */
  .org-form__row{grid-template-columns:1fr;gap:20px}
  .ofaq__q,.hp-faq__q{font-size:15px;padding:12px 16px}
  .ofaq__a,.hp-faq__a{padding:0 16px 14px;font-size:15px}
  .ct__cal{min-height:620px}

  /* footer */
  .site-footer__inner{grid-template-columns:1fr;gap:32px;min-height:0;padding:36px 0}
  .site-footer__cols{gap:28px}
  .site-footer__bar{height:auto;min-height:45px;padding:10px 16px;text-align:center}
  .site-footer__bar p{font-size:15px;line-height:1.4}

  /* heroes lose their oversized top padding */
  .hero-overlay .services-hero,.hero-overlay .pkg-hero2,.hero-overlay .fhero,
  .hero-overlay .ct{padding-top:calc(var(--header-h) + 28px)}
  .fhero,.pkg-hero2{padding-bottom:48px}
  .hp-hero{padding-bottom:40px}
  .hp-problem{gap:32px;padding:24px 0}
  .hp-services,.hp-cases,.hp-process,.hp-aspects,.hp-contact{padding-bottom:40px}
  .hp-faq{padding-top:40px}
  .hp-about{padding:40px 0}
  .hp-hero__art{width:min(320px,86vw)}
  .pkg-hero2__badge,.ab-pillar__ico{width:min(200px,60vw);height:auto}
  .sci-app__ico{width:min(180px,52vw);height:auto}
}

/* ================================ <=400 ================================= */
@media (max-width:400px){
  :root{--rpad:16px;--gutter:16px}
  .hp-hero__title{font-size:29px}
  .hp-h2,.hp-aspects__title,.hp-split__title,.fsec__title,.pkg-head__title,
  .section-title,.fhero__title,.pkg-hero2__title{font-size:24px}
  .hp-eye__label,.sec-head__label{font-size:16px}
  .hp-case,.org-case{flex-basis:90vw;padding:16px}
  .org-case__pills,.hp-case__pills,.hp-case__chips{flex-direction:column;align-items:stretch}
  .org-case__pill{white-space:normal;min-height:0;padding:10px 12px;font-size:16px}
  .site-footer__cols{grid-template-columns:1fr}
}

/* -------- accessibility: honour reduced motion for the rotators -------- */
@media (prefers-reduced-motion:reduce){
  .hp-dim,.hp-testi-card,.hp-svc-slot,.hp-svc-card{transition:none!important}
}

/* =========================================================================
   HOME-PAGE MOBILE/TABLET QA FIXES
   Found by slicing the rendered page at 500px and 768px, section by section.
   ========================================================================= */

/* ---- 1. Text truncated by desktop line-clamps -------------------------- */
/* home.css clamps the testimonial quote to 9 lines and the package blurb to 5,
   which is right for the fixed-height desktop cards but silently cuts copy the
   moment the cards get narrow. Cards are auto-height below the desktop canvas,
   so the clamps must go. */
@media (max-width:1319px){
  .hp-testi-card__quote,.hp-pkg-card__desc{
    display:block;-webkit-line-clamp:unset;-webkit-box-orient:horizontal;overflow:visible}
  .hp-testi-card{height:auto;min-height:0;overflow:visible}
  .hp-pkg-card{min-height:0;overflow:visible}
  .hp-pkg-card__head{width:auto;max-width:100%}
  .hp-pkg-card__desc{width:auto;max-width:100%}
}

/* ---- 2. Case-study cards: inline pixel widths in the HTML --------------- */
/* The chips/pills/stats carry hard-coded inline widths (up to 458px) copied
   from Figma. Inline styles beat stylesheets, so they blew the card open and
   cut the title, chips and body text off-screen. Neutralise them and let the
   rows wrap. */
@media (max-width:1319px){
  .hp-case__chip[style],.hp-case__pill[style],.hp-svc-stat[style]{width:auto!important}
  .hp-case__chips,.hp-case__pills{flex-wrap:wrap}
  .hp-case__chip,.hp-case__pill{max-width:100%}
}
@media (max-width:1023px){
  /* stack: illustration on top, content beneath, everything full width */
  .hp-case{flex-direction:column;align-items:stretch;gap:20px;padding:24px}
  .hp-case__fig{width:100%;max-width:240px;height:auto;flex:0 0 auto;margin:0 auto}
  .hp-case__fig img{width:100%;height:auto}
  .hp-case__body{width:100%;flex:1 1 auto;gap:16px}
  .hp-case__chips{flex-direction:column;gap:10px}
  .hp-case__chip{width:100%!important;text-align:left}
  .hp-case__pills{gap:8px}
  .hp-case__pill{width:auto!important;flex:0 1 auto;white-space:normal;text-align:center}
}
@media (max-width:767px){
  .hp-case__pills{flex-direction:column}
  .hp-case__pill{width:100%!important}
  .hp-case__fig{max-width:190px}
}

/* ---- 3. Testimonial card: readable on a phone -------------------------- */
@media (max-width:1023px){
  .hp-testi-card{width:100%;flex-basis:auto;padding:28px;gap:14px;justify-content:flex-start}
  .hp-testi-card__quote{font-size:17px;line-height:1.55}
  .hp-testi-card__title{font-size:24px;line-height:1.25}
  .hp-testi-card__author{font-size:20px;letter-spacing:.3px}
}
@media (max-width:767px){
  .hp-testi-card{padding:22px;gap:12px}
  .hp-testi-card__quote{font-size:16px}
  .hp-testi-card__title{font-size:21px}
}

/* ---- 4. Service cards in the swipe row ---------------------------------
   Sizing itself lives in the "scroll-driven expand" block further down
   (small by default, .is-active grows it) — this just fixes the stat row. */
@media (max-width:1023px){
  .hp-svc-stats{flex-wrap:wrap;gap:12px}
  .hp-svc-stat{width:auto!important;flex:1 1 120px}
}

/* ---- 5. Dead vertical space left by the desktop rhythm ----------------- */
@media (max-width:1023px){
  .hp-head{padding-block:16px 28px}
  .hp-aspects__intro{padding-block:0 8px}
  .hp-aspects{padding:32px 0 48px}
  .hp-services{padding-top:0}
  .hp-svc-row{padding-top:8px}
  .hp-dim-sec{padding:24px 0}
  .hp-problem{gap:40px}
  .hp-testi,.hp-pkg,.hp-process,.hp-cases{padding-top:8px}
  .hp-split{padding-block:32px}
}
@media (max-width:767px){
  .hp-head{padding-block:12px 22px}
  .hp-split{padding-block:24px}
  .hp-aspects{padding:24px 0 36px}
}

/* ---- 6. Mobile menu: match the desktop dark-green dropdown ------------- */
/* Desktop opens a #0D3D38 panel with cream rows; the mobile drawer was a plain
   white sheet, which read as a different brand. Rebuilt to the same palette. */
@media (max-width:960px){
  .site-header{background:var(--cream)}
  .nav{background:#0D3D38;border-bottom:0;padding:8px var(--gutter) 24px;
    box-shadow:0 24px 40px -18px rgba(13,61,56,.55);max-height:calc(100vh - var(--header-h));
    overflow-y:auto;-webkit-overflow-scrolling:touch}
  .nav__link{color:#EDE5DA;border-bottom:1px solid rgba(237,229,218,.28);font-size:1.05rem}
  .nav__link:hover,.nav__item:hover>.nav__link,.nav__item:focus-within>.nav__link{color:#fff}
  .nav__link::after{display:none}
  .nav__item--open>.nav__link{color:#fff;font-weight:700}
  .dropdown{background:transparent;padding:.2rem 0 .6rem .25rem}
  .dropdown>li{border-bottom:1px solid rgba(237,229,218,.18)}
  .dropdown>li.dd-last,.dropdown>li.dropdown__foot,.dropdown>li:last-child{border-bottom:0}
  .dropdown a{color:#EDE5DA}
  .dropdown a:hover{background:rgba(237,229,218,.12);color:#fff}
  .dropdown .dd-ico{color:#EDE5DA}
  .dropdown a:hover .dd-ico{color:#fff}
  .dropdown__foot{border-top-color:rgba(237,229,218,.28)}
  .dropdown__mail{color:#EDE5DA}
  .dropdown__mail:hover{color:#fff}
  .dropdown__social a{background:#EDE5DA;border:0;color:#134A45}
  .dropdown__social a:hover{background:#fff;color:#0D3D38}
  .nav .header-cta{margin-top:1.2rem;width:100%;background:var(--terracotta);color:#fff}
  /* hamburger turns into a close X while the drawer is open */
  .nav-toggle.is-open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
  .nav-toggle.is-open span:nth-child(2){opacity:0}
  .nav-toggle.is-open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
}

/* ---- 7. Footer polish on phones --------------------------------------- */
@media (max-width:767px){
  .site-footer__inner{padding:36px 0 28px;gap:28px}
  .site-footer__brand img{width:180px}
  .site-footer__social{margin-top:18px}
  .site-footer__cols{gap:22px}
  .site-footer__col h3{margin-bottom:8px}
  .site-footer__col a{padding:6px 0}
  .site-footer__col--links a{padding:9px 0}
}

/* =========================================================================
   ROUND 2 QA FIXES (user-reported)
   ========================================================================= */

/* ---- A. "Problem" hero card + the rotating dimension card were reading as
   full-bleed sections, not floating cards — the border sat flush with the
   screen edge with nothing visible outside it. Inset them so the border +
   background clearly read as a distinct card, same visual cue as desktop. */
@media (max-width:1023px){
  .hp-prob-card{width:auto;margin-inline:16px;padding-left:28px;padding-right:28px}
  .hp-dim{width:auto;margin-inline:16px}
}
@media (max-width:767px){
  .hp-prob-card{margin-inline:14px;padding:32px 20px}
  .hp-dim{margin-inline:14px;padding:28px 20px}
  .hp-prob-hero__illus img{width:120px}
}
@media (max-width:400px){
  .hp-prob-card{margin-inline:10px;padding:24px 16px}
  .hp-dim{margin-inline:10px;padding:24px 16px}
}

/* ---- B. Service cards ("Homeopathy" etc.): scroll-driven expand ----------
   Desktop reveals the stats on :hover, which doesn't exist on touch. Instead,
   home.js watches each .hp-svc-row with an IntersectionObserver and puts
   .is-active on whichever card is centred in the scroller as the user swipes
   — that card expands to full size with proper margins and shows every
   detail; the rest sit small. Same mechanic the desktop hover already used
   (grow the slot's flex-basis, let the absolutely-positioned card track its
   slot via inset:0), just re-triggered by scroll position instead of hover. */
@media (hover:none), (pointer:coarse){
  .hp-svc-slot:hover{flex-basis:inherit}
  .hp-svc-card:hover{box-shadow:none}
  .hp-svc-card:hover .hp-svc-stats{opacity:0}
}
@media (max-width:1023px), (hover:none) and (pointer:coarse){
  /* Fixed height = active card (440) + 16*2 padding. The row must NOT take its
     height from the tallest slot: as .is-active moves between cards the outgoing
     card animates 440->280 while the incoming animates 280->440, and midway both
     sit at ~360 — so an auto-height row would collapse ~80px and spring back on
     every swipe, bouncing the "Aspects of Holisthea" section below it. */
  .hp-svc-row{scroll-snap-type:x mandatory;padding:16px 4px;height:472px;align-items:flex-start}
  .hp-svc-slot{flex:0 0 70vw;height:280px;align-self:flex-start;scroll-snap-align:center;
    transition:flex-basis 320ms ease,height 320ms ease}
  .hp-svc-card,.hp-svc-card:hover{position:absolute;inset:0;top:0;left:0;transform:none;
    width:100%;height:100%;padding:28px 22px;gap:20px;box-sizing:border-box}
  .hp-svc-card img{height:88px}
  .hp-svc-card__t{font-size:19px;line-height:1.25}
  .hp-svc-stats{opacity:0;transition:opacity 260ms ease 60ms}
  /* the centred card: bigger, own breathing room either side, full detail shown */
  .hp-svc-slot.is-active{flex-basis:min(88vw,460px);height:440px;z-index:2}
  .hp-svc-slot.is-active .hp-svc-card{padding:36px 28px}
  .hp-svc-slot.is-active .hp-svc-card img{height:120px}
  .hp-svc-slot.is-active .hp-svc-card__t{font-size:24px}
  .hp-svc-slot.is-active .hp-svc-stats{opacity:1}
}
@media (max-width:767px){
  .hp-svc-row{height:452px}          /* active card (420) + 16*2 padding — see note above */
  .hp-svc-slot{flex:0 0 66vw;height:260px}
  .hp-svc-slot.is-active{flex-basis:88vw;height:420px}
}

/* =========================================================================
   RESOURCES PAGE — responsive layer
   ========================================================================= */
@media (max-width:1319px){
  /* space-between gets too wide once the canvas is fluid — pull the cards together */
  .res-blog__grid{justify-content:center;gap:40px}
}
@media (max-width:1023px){
  .res-hero__title{font-size:40px;line-height:1.16}
  .res-hero__sub{font-size:20px}
  .res-hero__illus{height:132px}
  .res-blog__grid{gap:32px}
}
@media (max-width:767px){
  .hero-overlay .res-hero{padding-top:calc(var(--header-h) + 24px)}
  .res-hero,.res-blog{padding:40px 0}
  .res-hero__title{font-size:28px;line-height:1.2}
  .res-hero__sub{font-size:16px}
  .res-hero__illus{height:112px}
  /* one card per row — let it use a comfortable width instead of a lonely 300px */
  .res-blog-card{flex-basis:100%;max-width:360px}
}