/* Crystal Visual Media — cinematic editorial, November 2026.
   Native document flow, static first paint, existing brand colors and imagery. */
:root{--pwp-ease:cubic-bezier(.22,1,.36,1)}
html{scroll-padding-top:96px}
[id]{scroll-margin-top:16px}
.section{padding-block:clamp(72px,6.6vw,112px)}
.section-head{margin-bottom:clamp(32px,3.8vw,58px)}
.section-head>.eyebrow,.content>.eyebrow,.smart-home-copy>.eyebrow{font-size:11px;letter-spacing:.2em;color:var(--accent)}
.section-head h2,.content h2{line-height:1.1;letter-spacing:-.035em}
.section-head p:not(.eyebrow){line-height:1.7}
.two-col>*,.smart-home-teaser>*,.story-layout>*,.final-grid>*{min-width:0}
.brand-note{overflow-wrap:anywhere}
.hero{min-height:clamp(660px,calc(100svh - 74px),900px);isolation:isolate}
.hero>.wrap.hero-content{width:min(650px,46vw);max-width:650px;margin-left:clamp(24px,4vw,76px);padding:76px 0 clamp(52px,6vw,92px)}
.hero h1{font-size:clamp(36px,3.6vw,58px);line-height:1.04;letter-spacing:-.04em;max-width:650px;text-wrap:balance;margin-bottom:22px}
.hero .eyebrow{font-size:10px;line-height:1.7;letter-spacing:.2em;color:#f4c7d2}
.hero .lead{max-width:480px;font-size:clamp(16px,1.15vw,18px);line-height:1.65;color:#fff5f0}
.hero .actions{gap:12px;margin-top:28px}
.hero .actions .btn{min-height:48px;padding:12px 20px;font-size:13px}
.hero-media img{object-position:58% 48%}
.hero-media:after{background:linear-gradient(90deg,rgba(12,10,9,.80),rgba(12,10,9,.58) 35%,rgba(12,10,9,.05) 72%),linear-gradient(0deg,rgba(12,10,9,.4),transparent 70%)}
.proofbar{border-top:1px solid rgba(255,255,255,.12)}
.proof{padding-block:28px}
.proof strong{font-size:clamp(21px,1.7vw,29px);font-weight:400}
.proof span{line-height:1.6}
.btn,.nav-toggle{min-height:44px;touch-action:manipulation}
.btn{transition:background-color .22s ease,border-color .22s ease,color .22s ease,box-shadow .22s ease}
.btn:hover,.nav-wa:hover{transform:none}
.btn:active{box-shadow:inset 0 0 0 2px rgba(255,255,255,.4)}
.main-nav>a:not(.nav-wa){text-underline-offset:7px;text-decoration-thickness:1px}
.main-nav>a:not(.nav-wa):hover,.main-nav>a:not(.nav-wa):focus-visible{text-decoration:underline}
.proof-gallery{gap:clamp(12px,1.2vw,22px)}
.proof-gallery figure{border-radius:18px}
.proof-gallery img,.story-card>img,.package-visual-card>img,.video img{transition:transform .65s var(--pwp-ease)}
.story-card,.package-visual-card{transition:border-color .25s ease,box-shadow .25s ease}
.story-card:hover{transform:none;border-color:#ad9c90;box-shadow:0 18px 42px rgba(43,35,31,.08)}
.story-card-body{padding:clamp(24px,2.2vw,34px)}
.story-card-body .mini{letter-spacing:.16em}
.package-visual-card{box-shadow:none}
.package-visual-card:hover{border-color:var(--accent)}
.package-visual-body{padding:clamp(25px,2.4vw,38px)}
.package-visual-card.featured{box-shadow:0 14px 40px rgba(120,42,60,.07)}
.smart-home-collage{gap:14px}
.review-source{box-shadow:none}
.review-source:hover{transform:none;border-color:#b09c8d}
.link,.source-link{text-underline-offset:5px;text-decoration-thickness:1px}
a:hover>.link,a:hover>.source-link,.link:hover,.source-link:hover{text-decoration:underline}
.page-hero{border-bottom:1px solid rgba(255,255,255,.1)}
.page-hero .eyebrow{color:#efb2c2}
.final-cta{padding-block:clamp(64px,7vw,112px)}
.final-cta h2{font-size:clamp(34px,3.7vw,56px);line-height:1.08;letter-spacing:-.035em}
.lightbox{overscroll-behavior:contain}
@media(hover:hover) and (pointer:fine){
  .proof-gallery figure:hover img,.proof-gallery figure:focus-within img,.story-card:hover>img,.story-card:focus-visible>img,.video:hover img{transform:scale(1.035)}
}
@media(min-width:1024px){
  .proof-gallery{grid-template-columns:repeat(12,minmax(0,1fr));grid-auto-rows:clamp(220px,20vw,340px)}
  .proof-gallery figure{grid-column:span 3}
  .proof-gallery figure.wide{grid-column:span 6}
  .proof-gallery figure:first-child{grid-column:span 6;grid-row:span 2}
  .proof-gallery figure:last-child{grid-column:span 6}
  .home-story-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(24px,3vw,48px);max-width:1640px}
  .home-story-grid .story-card>img{aspect-ratio:8/5}
}
@media(min-width:701px) and (max-width:1023px){
  .hero>.wrap.hero-content{width:58vw;max-width:580px;margin-left:28px}
  .hero h1{font-size:clamp(36px,4.5vw,46px)}
}
@media(max-width:700px){
  html{scroll-padding-top:84px}
  [id]{scroll-margin-top:12px}
  .wrap{width:calc(100% - 32px)}
  .section{padding-block:64px}
  .hero{min-height:660px}
  .hero>.wrap.hero-content{width:calc(100% - 40px);max-width:none;margin-left:20px;padding:250px 0 40px}
  .hero h1{font-size:clamp(28px,7.5vw,36px);line-height:1.08;max-width:100%;margin-bottom:18px}
  .hero .eyebrow{font-size:9px;letter-spacing:.13em}
  .hero .lead{font-size:15px;line-height:1.6;max-width:100%}
  .hero .actions{gap:9px;margin-top:22px;max-width:none}
  .hero .actions .btn{min-height:46px;padding:11px 14px;font-size:12px}
  .hero-media img{object-position:57% 40%}
  .hero-media:after{background:linear-gradient(0deg,rgba(12,10,9,.88),rgba(12,10,9,.68) 43%,rgba(12,10,9,.02) 83%)}
  .proof{padding:23px 8px}
  .proof strong{font-size:21px}
  .proof span{font-size:11.5px}
  .section-head{margin-bottom:30px}
  .section-head h2,.content h2{font-size:clamp(28px,7.5vw,34px)}
  .home-story-grid{gap:28px}
  .story-card-body,.package-visual-body{padding:25px 22px}
  .smart-home-collage{gap:10px}
  .final-cta{padding-block:64px}
}
/* ScrollTimeline is an optional compositor enhancement. Unsupported browsers stay static. */
@supports(animation-timeline:view()){
  @media(min-width:1024px) and (prefers-reduced-motion:no-preference) and (pointer:fine){
    .hero{view-timeline-name:--pwp-hero;view-timeline-axis:block}
    .hero-media img{animation:pwp-hero-drift linear both;animation-timeline:--pwp-hero;animation-range:exit 0% exit 100%}
    @keyframes pwp-hero-drift{from{transform:scale(1.045) translateY(0)}to{transform:scale(1.045) translateY(24px)}}
    .lightbox-open .hero-media img{animation-play-state:paused}
  }
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .hero-media img{animation:none!important;transform:none!important}
  .proof-gallery img,.story-card>img,.package-visual-card>img,.video img{transition:none!important;transform:none!important}
}