/* Mobile layer, loaded last on every page. Everything here sits inside a phone or tablet media query,
   so the desktop layout is untouched. */

/* ── Phone and tablet (single column, menu button) ───────────── */
@media (max-width:900px){

  /* Menu: a full-screen sheet under the header with large rows; the page behind does not scroll */
  .nav-links{position:absolute;top:100%;left:0;right:0;height:calc(100vh - 79px);height:calc(100dvh - 79px);overflow-y:auto;overscroll-behavior:contain;flex-direction:column;align-items:stretch;gap:0;background:var(--bg-page);border-radius:0;box-shadow:none;border-top:1px solid rgba(57,88,74,.08);padding:12px var(--gutter-r) calc(32px + env(safe-area-inset-bottom,0px)) var(--gutter)}
  .nav-links a:not(.stone):not([hidden]){display:flex;align-items:center;min-height:56px;padding:0;font-size:20px;border-bottom:1px solid rgba(57,88,74,.1)}
  .nav-links .stone{margin-top:28px;min-height:52px;font-size:16px;align-self:stretch}
  html.menu-open{overflow:hidden}
  /* Menu icon drawn in CSS on every page (as on the Kindful page), turning into a cross while open */
  .menu-btn .ico{-webkit-mask:none;mask:none;background:none;position:relative;width:22px;height:14px;box-sizing:border-box;border-top:2px solid currentColor;border-bottom:2px solid currentColor;transition:border-color .2s ease}
  .menu-btn .ico::after{content:"";position:absolute;left:0;right:0;top:50%;border-top:2px solid currentColor;transform:translateY(-1px);transition:transform .25s var(--ease,ease)}
  .menu-btn .ico::before{content:"";position:absolute;left:0;right:0;top:50%;border-top:2px solid currentColor;transform:translateY(-1px);opacity:0;transition:transform .25s var(--ease,ease),opacity .2s ease}
  .menu-btn[aria-expanded="true"] .ico{border-color:transparent}
  .menu-btn[aria-expanded="true"] .ico::after{transform:translateY(-1px) rotate(45deg)}
  .menu-btn[aria-expanded="true"] .ico::before{opacity:1;transform:translateY(-1px) rotate(-45deg)}

  /* Kindful opening frame: lead and actions first, then the film, then the second paragraph */
  .kh-hero .split{display:flex;flex-direction:column;align-items:stretch;gap:0}
  .kh-hero-copy{display:contents}
  .kh-hero-copy .eyebrow{order:1}
  .kh-hero-copy .kh-h1{order:2}
  .kh-hero-copy .lead{order:3}
  .kh-hero-copy .actions{order:4;margin-top:28px}
  .kh-hero .film{order:5;margin-top:40px}
  .kh-hero-copy .support{order:6;margin-top:32px}

  /* Film: at most about 62% of the screen height, so the caption and what follows stay in view */
  .film video,
  .kh-hero .film video,
  #kindful .film video{width:min(360px,100%,calc(62vh * 9 / 16));width:min(360px,100%,calc(62svh * 9 / 16));margin-inline:auto}

  /* Looping decoration off on phones and tablets (battery and calm) */
  .horizon{animation:none}
  .hero-next .hn-arrow{animation:none}
  .kh-dots{display:none}
  .kh-contours svg{animation:none}
}

/* ── Phone ───────────────────────────────────────────────────── */
@media (max-width:640px){

  /* Next-section arrow hidden: on phones it sits on top of the content below */
  .hero-next{display:none}

  /* One spacing rhythm: 64px between sections, 40/64px around the opening frame */
  section{padding-block:64px}
  .hero,.page-hero,.kh-hero{padding-block:40px 64px}
  .page-hero.has-cards{padding-bottom:72px}
  .site-footer{padding-block:72px 32px}
  .card,.form,.kh-scope .card,.kh-access form{padding:26px 22px}
  .kh-principle-grid .principle{padding:26px 22px}
  .grid-2,.grid-3,.grid-4,.kh-principle-grid,.steps{gap:16px}
  .actions{margin-top:28px}
  .page-hero .lead,.hero .lead{margin-top:20px}
  .hero .support{margin-top:14px}

  /* Opening buttons: full width, equal size, primary above secondary */
  .hero .actions,.page-hero:not(.kh-hero) .actions{flex-direction:column;align-items:stretch;gap:14px}
  .hero .actions .stone,.page-hero:not(.kh-hero) .actions .stone{width:100%;min-height:56px;font-size:16px;padding:0 24px}
  .kh-hero .actions{gap:20px}
  .kh-hero .actions .stone--hero{width:100%;padding:0 18px;white-space:normal;text-align:center}

  /* Tap targets: standalone text links get a 44px hit area without moving anything */
  .more,.footer-grid nav a,.fineprint a{display:inline-block;padding-block:10px;margin-block:-10px}
  .footer-grid nav{gap:14px}

  /* Scroll reveals: shorter rise and a quicker fade, so headings are settled by the time you read them */
  .js-motion .reveal{transform:translateY(8px);transition:opacity .5s var(--ease),transform .55s var(--ease)}

  /* Header: 61px instead of 79px, so more of the page is visible under it */
  .nav{min-height:60px;gap:12px}
  .brand .word{font-size:25px}
  .nav-links{height:calc(100vh - 61px);height:calc(100dvh - 61px)}

  /* Type: headings wrap to fewer lines, intro text one weight heavier so it holds up on a small screen */
  .title{font-size:30px;line-height:1.12}
  .statement .title{font-size:32px}
  .hero .display,.page-hero .display{font-size:36px}
  .lead{font-weight:300;font-size:20px}
  h1,h2,h3{text-wrap:balance}
  p,li{text-wrap:pretty}

  /* Small text: labels, tags and stat captions no smaller than 13px */
  .label,.status .label,.facts .label,.person .label,.stat .l,.pill,.mission .m1{font-size:13px}

  /* Watercolour shapes: about 30% smaller and pulled in, so they sit on the page instead of being cut off at the edge */
  .swathe{max-width:32vw}
  .swathe[style*="right:-"],.kh-wash-1,.kh-wash-2{right:-2vw!important}
  .swathe[style*="left:-"],.kh-wash-3{left:-2vw!important}
  .card-wash{right:-28px;width:min(55%,200px)}
}