/* Responsive finishing: stable reading surfaces, native touch scrolling. */
.shader-slot{pointer-events:none}
.menu-button{min-height:44px;align-items:center}
.menu-button span{display:inline-block;transition:transform 180ms ease-out}
.menu-button[aria-expanded=true] span{transform:rotate(45deg)}
.topbar nav a{display:inline-flex;align-items:center;min-height:44px}
.dots{gap:0}
.dots button{display:grid;place-items:center;min-width:44px;min-height:44px;padding:10px}
.dots span{transition:width 200ms ease-out,opacity 200ms ease-out}
.motion-toggle{min-height:44px}
.contact-email{min-height:44px}
footer nav a{display:inline-flex;align-items:center;min-height:44px}
@media(max-width:999px){
 .sky{min-height:100svh}
 .sky .reveal{animation:none;opacity:1;transform:none}
 .scroll-sequence #home{clip-path:none;scale:none}
 .scroll-sequence #services .section-bar,.scroll-sequence #services .carousel-card{translate:none;scale:none}
 .sky .topbar{gap:20px}
 .sky .topbar .header-cta{display:none}
 .sky .menu-button{display:flex;gap:10px;padding:11px 16px;background:#ffffff26;color:#fff;border-radius:99px;font-size:14px}
 .sky .topbar nav{display:none;position:absolute;left:var(--gutter);right:var(--gutter);top:calc(100% - 8px);flex-direction:column;gap:4px;padding:16px 24px;background:#fffdfb;color:#432b35;border-radius:18px;box-shadow:0 16px 40px #432b3520}
 .sky .topbar nav.open{display:flex}
 .sky .topbar nav a:hover{color:#963746}
 .sky .topbar .mobile-contact{display:inline-flex}
 .sky .topbar nav a:focus-visible{outline-color:#963746}
 .hero-index{gap:24px}
 .hero-index dd{line-height:1.55}
 .carousel-controls{gap:12px;margin-top:24px}
 .card-copy{justify-content:flex-start}
 .card-copy a{min-height:48px}
 .pill:hover{transform:none}
 .text-link:hover span{transform:none}
}
@media(max-width:639px){
 .sky .sky-copy{padding-top:40px;padding-bottom:48px;gap:48px}
 .sky h1{font-size:clamp(42px,11.8vw,64px);line-height:1.06}
 .sky .hero-housing-intro{font-size:16px;line-height:1.6;margin-top:24px;max-width:34ch}
 .hero-index dt{gap:14px}
 .hero-index dt>span:last-child{font-size:25px}
 .hero-index dd{padding-left:32px;font-size:15px}
 .carousel-root{--card-width:calc(100vw - 64px);--card-gap:16px}
 .card-copy{padding:24px;min-height:300px}
 .card-copy h3{min-height:0;font-size:25px;line-height:1.18}
 .card-copy p{min-height:0;font-size:15px;line-height:1.6;margin-top:16px;margin-bottom:20px}
 .card-copy a{padding-top:14px;border-top:1px solid #29272a18}
 .section-bar h2{font-size:clamp(34px,9.5vw,42px);line-height:1.1}
 .about-grid,.contact-grid{gap:28px}
 .contact-grid h2{font-size:clamp(42px,12vw,56px);max-width:none}
 .contact-link{font-size:clamp(21px,6.3vw,27px);padding:18px 20px}
 .contact-email{gap:12px}
 .about-page .sky .sky-copy{padding-top:40px}
}
@media(prefers-reduced-motion:reduce){
 .menu-button span,.dots span,.faq-answer,.pill,.text-link span{transition:none}
}

/* Keep white copy readable throughout the animated light/rose cycle. */
.sky>.shader-slot::after{content:"";position:absolute;inset:0;background:linear-gradient(110deg,rgba(58,20,42,.56),rgba(58,20,42,.42));pointer-events:none}
@media(max-width:999px){.sky>.shader-slot::after{background:rgba(58,20,42,.54)}}

/* Brief, tactile feedback; scrolling itself stays entirely native. */
@media(prefers-reduced-motion:no-preference){
 .menu-button:active,.circle:active:not(:disabled),.pill:active{transform:scale(.97)}
 .menu-button,.circle{transition:background 180ms ease-out,transform 160ms ease-out}
 @media(max-width:999px){
  .sky .topbar nav.open{animation:menu-enter 180ms ease-out both}
 }
}
@keyframes menu-enter{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}

/* Native view timelines keep motion synchronized with Safari's own scrolling.
   Never move or fade the WebGPU canvas container with the text. */
@supports(animation-timeline:view()){
 @media(prefers-reduced-motion:no-preference){
  .native-scroll-motion .sky,.native-scroll-motion .carousel-root,.native-scroll-motion .steps-section{overflow:clip}
  .native-scroll-motion .scroll-reveal:not(.card-copy){
   animation-name:rsl-native-reveal;
   animation-duration:auto;
   animation-timing-function:linear;
   animation-fill-mode:both;
   animation-timeline:view(block);
   animation-range:entry 0% cover 40%;
  }
  .native-scroll-motion .scroll-reveal:focus-within{animation:none;opacity:1;transform:none}
 }
}
@keyframes rsl-native-reveal{
 from{opacity:.35;transform:translate3d(0,18px,0)}
 to{opacity:1;transform:translate3d(0,0,0)}
}