/* Mobile refinements; desktop composition stays intact. */
@media (max-width:740px){
  html{scroll-padding-top:105px;-webkit-text-size-adjust:100%}
  .site-header{position:sticky;top:0;z-index:30;background:var(--paper);gap:12px;padding:12px 20px;min-height:80px}
  .site-header .brand{min-width:0;gap:9px;flex:1}
  .site-header .brand>span{min-width:0}
  .brand-sub{font-size:10px;line-height:1.4;letter-spacing:0;max-width:185px}
  .brand img{flex-shrink:0}
  .menu-toggle{min-width:70px;min-height:44px;justify-content:center;font-size:12px;flex-shrink:0;padding:9px 12px}
  .site-header nav{max-height:calc(100dvh - 80px);overflow-y:auto;padding:14px 20px 22px}
  .site-header nav a,.site-header nav a:last-child{min-height:48px;display:flex;align-items:center;font-size:15px}
  .hero{padding-block:30px 38px;gap:28px}
  h1{font-size:clamp(36px,10.5vw,64px);letter-spacing:-1.6px;line-height:1.12;margin-bottom:22px}
  h2,.background-copy h2,.mission h2{font-size:clamp(30px,8.8vw,42px);line-height:1.2;letter-spacing:-1px;overflow-wrap:break-word;hyphens:auto}
  .hero .eyebrow,.eyebrow{font-size:10px;letter-spacing:1.2px}
  .hero .eyebrow{gap:8px}
  .hero .eyebrow span{flex-shrink:0}
  .lead,.approach-copy>p:last-child,.mission p:not(.eyebrow),.topics p,.background-copy>p:not(.eyebrow),.impulse>div>p:not(.eyebrow){font-size:16px;line-height:1.75}
  .hero-note{font-size:12px;line-height:1.6;max-width:none}
  .button{display:flex;justify-content:space-between;min-height:52px;width:100%;max-width:420px;font-size:15px;padding:12px 23px}
  .hero-art{height:350px;max-width:420px}
  .sun{width:100px;height:100px;top:35px}
  .art-label{top:158px;font-size:9px;letter-spacing:1.2px}
  .hill-back{top:188px}.hill-front{top:225px}.path{top:195px}
  .art-quote{left:18px;right:18px;bottom:38px;padding:19px}
  .art-quote p{font-size:clamp(21px,5.8vw,25px);margin-bottom:12px}
  .art-number{font-size:9px;left:22px;letter-spacing:1.3px}
  .principles .wrap{display:grid;grid-template-columns:1fr;gap:8px;font-size:13px;text-align:center}
  .principles span:nth-child(even){display:none}
  .section{padding-block:48px}
  .section-heading>p{font-size:15px}
  .text-link{min-height:44px;align-items:center;font-size:15px}
  .topics article{grid-template-columns:28px minmax(0,1fr);column-gap:12px}
  .topics h3{font-size:28px}
  .topic-tag{font-size:11px;letter-spacing:1.2px}
  .experience-art{padding:22px 14px;min-height:320px}
  .experience-art .eyebrow{font-size:10px;letter-spacing:1px}
  .experience-circles{max-width:280px}
  .experience-tags span{font-size:12px;padding:6px 10px;max-width:100%;overflow-wrap:anywhere}
  .reflection{padding:20px 16px;min-width:0}
  .choices{gap:8px;margin-bottom:24px}
  .choices button{min-height:44px;font-size:13px;padding:9px 13px;flex:1 1 auto}
  .reflection-content{min-height:0}
  .reflection-content .eyebrow{font-size:10px}
  .reflection-question{font-size:27px;line-height:1.35}
  #reflection-hint{font-size:15px;line-height:1.7}
  .reflection-footer{font-size:12px;margin-top:20px;line-height:1.6}
  .closing>p{font-size:15px}.closing h2{font-size:31px}
  .footer{align-items:flex-start;gap:18px;padding-bottom:max(28px,env(safe-area-inset-bottom))}
  .footer .brand-sub,.footer>p,.footer>span{font-size:12px}
  .footer>span{margin-left:0}.footer>p{line-height:1.6}
}
@media(max-width:359px){
  .wrap{width:calc(100% - 32px)}
  .site-header{padding-inline:16px;gap:8px}
  .site-header .brand img{width:28px;height:28px}
  .site-header .brand{font-size:14px;gap:7px}
  .brand-sub{font-size:9px}
  .menu-toggle{min-width:62px;padding-inline:9px;gap:5px}
  .hero-art{height:330px}.art-label{top:145px}
  .choices button{flex-basis:100%}
}