@font-face{font-family:Signature;src:url(assets/fonts/d9da66ad74cef5643fccea1430737473.woff);font-display:swap}
@font-face{font-family:Display;src:url(assets/fonts/b0e5ad5c8957555e456e3f4853b6274e.woff);font-weight:100 900;font-display:swap}
@font-face{font-family:Body;src:url(assets/fonts/7e77daac2d796c87d852724b555f9f62.woff);font-weight:400;font-display:swap}
@font-face{font-family:Body;src:url(assets/fonts/622cf94615e69b95d8832e3a0e24ebd0.woff);font-weight:700;font-display:swap}
@font-face{font-family:Body;src:url(assets/fonts/5bc6a37fa0681b35f3e6efa8b547bb0e.woff);font-weight:700;font-style:italic;font-display:swap}

*{box-sizing:border-box}
html,body{margin:0;background:#fff}
main{overflow:hidden}
section{position:relative;overflow:hidden}

/* The page is a fixed-size design per breakpoint (layout.css); script.js zooms it to the viewport. */
.stage{position:relative;margin:0 auto;zoom:var(--z,1)}
.a{position:absolute;margin:0}
.t{display:block;text-decoration:none}
.clip{overflow:hidden}
.clip img{position:absolute;max-width:none;display:block}
.frame{border-style:solid}
.phone{pointer-events:none}

.sec-bg,.sec-bg img{position:absolute;inset:0;width:100%;height:100%}
.sec-bg img{object-fit:cover;object-position:50% 50%}
.hero .sec-bg img{object-position:50% 48%}
/* her photo is pale (curtain, white shirt): keeps the white name and nav readable */
.hero .sec-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(rgba(30,22,16,.5),rgba(30,22,16,.12) 28%,rgba(30,22,16,.18) 50%,rgba(30,22,16,.45))}

.cover img{inset:0;width:100%!important;height:100%!important;left:0!important;top:0!important;object-fit:cover}
.round{border-radius:50%}
#a15,#a90{display:block}

/* In-flow blocks inside a stage: they set the section height, the headings stay absolutely placed above them. */
#s3,#s4{height:auto}
.flow{position:relative;margin:0 auto;width:var(--flow-w);padding:var(--flow-top) 0 var(--flow-bottom)}
.stage{--pw:228px;--flow-w:1148px;--flow-top:330px;--flow-bottom:110px;--gap:24px;--row:390px;--title:40px}

.niches{display:grid;grid-template-columns:1fr 1fr;gap:64px 40px}
.niche h3{margin:0 0 20px;text-align:center;font:700 var(--title)/1.2 Display;letter-spacing:-.05em;color:#000}
.car{position:relative;max-width:calc(var(--pw)*2 + var(--gap) + 16px);margin:0 auto}
.track{display:flex;gap:var(--gap);padding:0 8px;overflow-x:auto;justify-content:safe center;scroll-snap-type:x mandatory;scrollbar-width:none}
.track::-webkit-scrollbar{display:none}
.track:focus-visible,.arrow:focus-visible{outline:2px solid #bea893;outline-offset:2px}
.vid{position:relative;flex:none;width:var(--pw);aspect-ratio:745/1500;scroll-snap-align:center}
.vid .screen{position:absolute;left:4.23%;top:1.64%;width:91.43%;height:96.72%;border-radius:12.9%/6.07%}
.vid .phone{position:absolute;inset:0;width:100%;height:100%;display:block}
.soon{display:flex;align-items:center;justify-content:center;background:#e7daca!important}
.soon span{font:400 calc(var(--title)*1.7)/1 Signature;color:#000;transform:rotate(-6deg)}
.arrow{position:absolute;top:50%;z-index:1;width:40px;height:40px;margin-top:-20px;padding:0;border:0;border-radius:50%;cursor:pointer;background:#bea893 center/20px no-repeat}
.prev{left:-12px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m15 5-7 7 7 7'/%3E%3C/svg%3E")}
.next{right:-12px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 5 7 7-7 7'/%3E%3C/svg%3E")}
.arrow:disabled{opacity:.35;cursor:default}
.car.static .arrow{display:none}

.gallery{display:grid;grid-template-columns:repeat(12,1fr);grid-auto-rows:var(--row);gap:var(--gap)}
.tile{margin:0;grid-column:span 3;overflow:hidden}
.tile.big{grid-column:span 6}
.tile img{width:100%;height:100%;object-fit:cover;display:block}

@media (min-width:680px) and (max-width:1199.98px){
  .stage{--pw:200px;--flow-w:929px;--flow-top:310px;--flow-bottom:100px;--gap:20px;--row:377px;--title:38px}
  .gallery{width:580px}
  .tile{grid-column:span 6}
  .tile.big{grid-column:span 12}
}
@media (max-width:679.98px){
  .niches{grid-template-columns:1fr;gap:48px}
  .gallery{grid-auto-rows:auto}
  .tile{grid-column:span 6;aspect-ratio:3/4}
  .tile.big{grid-column:span 12;aspect-ratio:4/3}
}
@media (min-width:440px) and (max-width:679.98px){
  .stage{--pw:194px;--flow-w:440px;--flow-top:265px;--flow-bottom:90px;--gap:16px;--title:34px}
}
@media (max-width:439.98px){
  .stage{--pw:180px;--flow-w:345px;--flow-top:240px;--flow-bottom:80px;--gap:12px;--title:32px}
  .arrow{width:36px;height:36px;margin-top:-18px}
  .prev{left:-6px}.next{right:-6px}
}

.screen{overflow:hidden;background:#000}
.screen video{width:100%;height:100%;object-fit:cover;display:block}
.screen .grad,.screen button,.screen .time,.screen .bar{opacity:0;transition:opacity .2s}
.screen:hover .grad,.screen:hover button,.screen:hover .time,.screen:hover .bar,
.screen:focus-within .grad,.screen:focus-within button,.screen:focus-within .time,.screen:focus-within .bar{opacity:1}
.grad{position:absolute;left:0;right:0;bottom:0;height:120px;pointer-events:none;background:linear-gradient(rgba(0,0,0,0),rgba(19,22,32,.6) 65%,rgba(19,22,32,.6))}
.screen button{position:absolute;border:0;padding:0;color:#fff;cursor:pointer;background-color:transparent;background-repeat:no-repeat;background-position:center}
.play{left:50%;top:50%;width:48px;height:48px;margin:-24px 0 0 -24px;border-radius:50%;background-color:rgba(19,22,32,.6)!important;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='m8.248 4.212 11.05 6.574c.694.412.91 1.29.483 1.961-.121.19-.287.35-.483.467l-11.05 6.574c-.694.413-1.602.204-2.03-.467A1.39 1.39 0 0 1 6 18.574V5.426C6 4.638 6.66 4 7.475 4c.273 0 .54.073.773.212z'/%3E%3C/svg%3E")}
.playing .play{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Crect fill='%23fff' x='7' y='5' width='3' height='14' rx='1.5'/%3E%3Crect fill='%23fff' x='14' y='5' width='3' height='14' rx='1.5'/%3E%3C/svg%3E")}
.mute{right:12px;bottom:18px;width:24px;height:24px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' fill-rule='evenodd' d='m15.5 5.08-3.742 3.171a2.5 2.5 0 0 1-.243.182L15.5 12.4V5.08zm1.5 8.814V4.002a1 1 0 0 0-1.646-.763l-4.566 3.868a1 1 0 0 1-.398.206L6.53 3.468a.75.75 0 1 0-1.06 1.063l14 13.94a.75.75 0 1 0 1.06-1.063L17 13.894zM6.293 7.637l1.208 1.207H7.5v5.8h2.642a2.5 2.5 0 0 1 1.616.593l3.742 3.17v-1.564l1.5 1.5v1.143a1 1 0 0 1-1.646.763l-4.566-3.868a1 1 0 0 0-.646-.237H7a1 1 0 0 1-1-1v-6.8c0-.276.112-.526.293-.707z'/%3E%3C/svg%3E")}
.unmuted .mute{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M14.35 3.24A1 1 0 0 1 16 4v16a1 1 0 0 1-1.65.76L9.8 16.9a1 1 0 0 0-.65-.24H6a1 1 0 0 1-1-1V8.34a1 1 0 0 1 1-1h3.15a1 1 0 0 0 .65-.24z'/%3E%3C/svg%3E")}
.time{position:absolute;left:20px;bottom:24px;font:12px/20px system-ui,sans-serif;color:#fff}
.bar{position:absolute;left:34px;right:34px;bottom:8px;height:4px;border-radius:2px;background:rgba(255,255,255,.4)}
.bar i{display:block;height:100%;width:0;border-radius:2px;background:#fff}