/* One material, a quieter editorial rhythm, and uncropped films. */
.cover-stage .intro h2{font-weight:normal;line-height:1.05;letter-spacing:-1.5px}
.cover-stage .intro .intro-statement{font:clamp(23px,2.1vw,31px)/1.25 Georgia,serif;letter-spacing:-.45px;text-wrap:balance;margin:28px 0}
.cover-stage .intro .intro-location{font-size:14px;line-height:1.75;max-width:360px}
main>section:not(.cover) .chapter-copy{max-width:810px;margin-bottom:40px;font-style:normal;line-height:1.2;letter-spacing:-.6px}
.chapter-copy .copy-detail{font-style:normal;letter-spacing:.3px;margin-top:18px}
/* Soft curls remain at the edges, with generous clear space for the typography. */
main>section .inflatable-edge img{width:clamp(240px,34vw,490px);height:auto;right:-17%;top:180px;opacity:.8;max-width:none}
main>section:nth-child(2n+1) .inflatable-edge img{left:-17%;right:auto}
main>section .edge-wave img{width:clamp(160px,23vw,340px);right:-13%;top:280px;opacity:.65}
main>section:nth-child(2n+1) .edge-wave img{left:-13%;right:auto}
.photo-edit .inflatable-edge img,.rates .inflatable-edge img{opacity:.88}
.photo-edit .closing-atmosphere img,.rates .closing-atmosphere img{opacity:.2}
.photo-edit{--start:#e8eae3;--middle:#eee3df;--end:#efdfdf}
.rates{--start:#efdfdf;--middle:#f2e3e4;--end:#f6eee8}
footer{background:linear-gradient(#f6eee8,#faf6ef)}
/* Open film cards keep their original aspect ratios, without device mockups. */
main>section:not(.cover) .film-card:not(.theme-window) .video-wrap{border:0;border-radius:8px;box-shadow:none;background:transparent}
main>section:not(.cover) .film-card:not(.theme-window) video{width:100%;height:auto;aspect-ratio:var(--video-ratio);object-fit:contain}
main>section:not(.cover) .film-card>.video-controls{position:relative;inset:auto;gap:6px;justify-content:center;flex-wrap:nowrap;margin:12px auto 0;opacity:1;transform:none}
main>section:not(.cover) .film-card>.video-controls button{display:grid;place-items:center;width:40px;min-width:40px;height:40px;min-height:40px;padding:10px;background:#fffaf5db;color:#3e5048;border:1px solid #65726723;border-radius:50%;box-shadow:none}
main>section:not(.cover) .video-controls svg{display:block;width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
main>section:not(.cover) .film-card figcaption{font-size:12px;line-height:1.4;margin-top:10px;color:#43564b;letter-spacing:.1px}
main>section:not(.cover) .theme-window>.video-controls .expand{display:grid}
/* A lead pair, then a close-knit matrix, preserves the existing color pairings. */
.care-story{position:relative;max-width:1020px;margin:auto;padding-top:210px}
.care-decoration{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:visible}
.care-pouch{position:absolute;top:0;left:50%;width:150px;height:225px;transform:translateX(-50%);object-fit:contain}
.care-tubing{position:absolute;top:212px;left:50%;width:90px;height:calc(100% - 226px);transform:translateX(-53.04%);object-fit:fill;opacity:.9}
.care-story .staggered-gallery{position:relative;z-index:1}
#beauty-grid{grid-template-columns:repeat(4,minmax(0,1fr));max-width:1020px;gap:35px 22px}
#beauty-grid>.film-card:nth-child(-n+2){grid-column:span 2;width:78%;justify-self:center}
#more-videos{grid-template-columns:repeat(2,minmax(0,1fr));max-width:680px;gap:28px 58px}
#more-videos>.film-card:nth-child(2n){margin-top:60px}
.editorial-mosaic .film-card{min-width:0}
.plate-gallery,.beach-gallery,.bright-edit .staggered-gallery{max-width:720px}
.content-edit .wide-gallery,.content-edit #candle-bottom{max-width:790px}
.content-edit .three-gallery{max-width:720px}
.lip-edit .staggered-gallery{max-width:740px;gap:32px 42px}
/* The two personal photographs become one editorial composition. */
.photo-edit .photo-layout{display:grid;grid-template-columns:1.15fr 1fr;gap:0;max-width:820px;align-items:start;padding:14px 0 36px}
.photo-edit .photo-card:first-child{z-index:2;margin-top:105px}
.photo-edit .photo-card:last-child{width:113%;margin-left:-13%}
.photo-edit .photo-layout .photo-original{border-radius:2px;box-shadow:0 14px 34px #4a394017;object-fit:cover}
.photo-edit .photo-card:first-child .photo-frame{border:8px solid #f9f4ed}
.photo-edit .photo-card:last-child figcaption{padding-left:14%}
.photo-card figcaption{font-size:12px;line-height:1.5;letter-spacing:0}
/* A larger invitation, followed by practical collaboration details. */
main>section.rates .chapter-copy{max-width:960px;text-align:left;font:clamp(46px,7vw,94px)/1.04 Georgia,serif;letter-spacing:-2.5px;margin:15px auto 34px;color:#51434a}
.rates .chapter-copy .copy-lead{font:inherit;text-transform:uppercase}
.rates .chapter-copy em{font-weight:normal;text-transform:none;color:#946a7b;white-space:normal}
.rates .contact-button{border-radius:3px;padding:18px 38px;margin:0 auto 70px;background:#51434a;color:#fffaf5;font-size:14px;letter-spacing:1px}
.rates .services{border:0;border-radius:0;background:transparent;backdrop-filter:none;padding:0 0 45px;gap:4%;max-width:960px}
.rates .services article{border-top:1px solid #51434a35;padding-top:18px}
.rates .services h3{font-size:27px;font-weight:normal;letter-spacing:-.5px}
.rates .services p{font-size:15px;line-height:1.7}
@media(max-width:760px){
 .cover-stage .intro{text-align:center}
 .cover-stage .intro h2{font-size:clamp(34px,9vw,46px)}
 .cover-stage .intro .intro-statement{font-size:clamp(23px,6.1vw,29px);line-height:1.22;letter-spacing:-.4px;margin:24px auto}
 .cover-stage .intro .intro-location{font-size:14px;max-width:350px;margin:0 auto 12px}
 main>section:not(.cover) .chapter-copy{font-size:clamp(25px,6.7vw,31px);margin-bottom:32px;max-width:92%}
 .chapter-copy .copy-detail{font-size:12px;line-height:1.6;letter-spacing:.2px;margin-top:16px}
 main>section .inflatable-edge img{width:230px;right:-135px;top:170px;opacity:.7}
 main>section:nth-child(2n+1) .inflatable-edge img{left:-135px;right:auto}
 main>section .edge-wave img{width:160px;right:-118px;top:220px;opacity:.6}
 main>section:nth-child(2n+1) .edge-wave img{left:-118px;right:auto}
 main>section:not(.cover) .film-card>.video-controls{gap:4px;margin-top:8px}
 main>section:not(.cover) .film-card>.video-controls button{width:34px;min-width:34px;height:34px;min-height:34px;padding:8px}
 main>section:not(.cover) .video-controls svg{width:16px;height:16px}
 main>section:not(.cover) .film-card figcaption{font-size:11px;line-height:1.45;margin-top:8px}
 main>section:not(.cover) .theme-window>.video-controls button{width:30px;min-width:30px;height:30px;min-height:30px;padding:7px}
 .care-story{padding-top:165px}
 .care-pouch{width:112px;height:168px}
 .care-tubing{top:158px;width:32px;height:calc(100% - 180px)}
 #beauty-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:26px 24px}
 #beauty-grid>.film-card:nth-child(-n+2){grid-column:auto;width:100%}
 #more-videos{gap:25px 28px}
 #more-videos>.film-card:nth-child(2n){margin-top:42px}
 .plate-gallery,.beach-gallery,.bright-edit .staggered-gallery{gap:26px 16px}
 .lip-edit .staggered-gallery{gap:26px 24px}
 .photo-edit .photo-layout{padding-top:0;padding-bottom:16px}
 .photo-edit .photo-card:first-child{margin-top:74px}
 .photo-edit .photo-card:first-child .photo-frame{border-width:5px}
 .photo-card figcaption{font-size:11px}
 main>section.rates .chapter-copy{font-size:clamp(40px,11.3vw,78px);letter-spacing:-1.6px;max-width:100%;margin:10px auto 30px;line-height:1.08}
 .rates .contact-button{font-size:12px;letter-spacing:.7px;margin-bottom:46px;padding:17px 26px}
 .rates .services{padding:0 0 34px;gap:22px}
 .rates .services h3{font-size:27px}
 .rates .services p{font-size:15px}
}
@media(max-width:360px){
 main>section:not(.cover) .film-card>.video-controls{gap:3px}
 main>section:not(.cover) .film-card>.video-controls button{width:30px;min-width:30px;height:30px;min-height:30px;padding:7px}
 main>section:not(.cover) .theme-window>.video-controls button{width:27px;min-width:27px;height:27px;min-height:27px;padding:6px}
}

/* Restore the original four-pane arched window, without individual phone frames. */
#portfolio .french-window{padding:0;border-radius:150px 150px 8px 8px;background:#faf7ee}
#portfolio .window-panes{gap:8px}
#portfolio .theme-window .frame-stage{aspect-ratio:9/16;height:auto}
#portfolio .theme-window .video-wrap{position:absolute;inset:0;border-radius:0;box-shadow:none}
#portfolio .theme-window video{width:100%;height:100%;object-fit:cover}
#portfolio .theme-window>.video-controls{position:absolute;left:0;right:0;bottom:6px;gap:4px;margin:0;z-index:4}
#portfolio .theme-window>.video-controls button{width:28px;min-width:28px;height:28px;min-height:28px;padding:6px;border:0;background:#fffaf0dd}
#portfolio .theme-window>.video-controls svg{width:15px;height:15px}
#portfolio .pause-all{font-size:12px;padding:6px 12px;background:#fffaf08c;border-color:#51434a30}
/* Small icon control, with its full description retained for assistive technology. */
.hero-motion-toggle{display:grid;place-items:center;width:30px;height:30px;padding:7px;border-radius:50%;background:#fffaf2b8;border:1px solid #30443b38;line-height:1}
.hero-motion-toggle svg{display:block;width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
/* Both skincare chapters share one warm, clear serum material and motion. */
#editorial{--start:#eee3e3;--middle:#f3efe8;--end:#eeeae1}
#more-edit{--start:#eeeae1;--middle:#f1eee7;--end:#eee3e3}
:is(#editorial,#more-edit)::before{content:none!important;background:none!important;animation:none!important}
:is(#editorial,#more-edit) .serum-story{max-width:780px;padding-top:195px;isolation:isolate}
:is(#editorial,#more-edit) .serum-decoration{z-index:0}
:is(#editorial,#more-edit) .care-pouch{top:0;width:136px;height:204px;z-index:1}
:is(#editorial,#more-edit) .serum-flow{position:absolute;top:193px;bottom:20px;left:-8%;width:116%;pointer-events:none;isolation:isolate}
:is(#editorial,#more-edit) .serum-flow>img{position:absolute;inset:0;width:100%;height:100%;object-fit:fill;opacity:.85;animation:serum-breathe 12s ease-in-out infinite alternate;transform-origin:50% 0}
:is(#editorial,#more-edit) .serum-current{position:absolute;inset:0;opacity:.4;background:linear-gradient(to bottom,transparent 10%,#eee3d288 35%,#ffffffdc 46%,#d4c9b788 54%,transparent 70%);background-size:100% 220%;-webkit-mask:url('assets/serum-flow-ivory.png') 50% 0/100% 100% no-repeat;mask:url('assets/serum-flow-ivory.png') 50% 0/100% 100% no-repeat;animation:serum-current 8s linear infinite;pointer-events:none}
#more-edit #more-videos{max-width:680px;gap:34px 64px}
:is(#editorial,#more-edit) .film-card{z-index:2}
@keyframes serum-breathe{from{transform:scaleX(.975);opacity:.8}to{transform:scaleX(1.025);opacity:.95}}
@keyframes serum-current{from{background-position:50% 200%}to{background-position:50% -100%}}
:is(#editorial,#more-edit):not(.scene-visible) .serum-flow>img,:is(#editorial,#more-edit):not(.scene-visible) .serum-current,
.motion-paused :is(#editorial,#more-edit) .serum-flow>img,.motion-paused :is(#editorial,#more-edit) .serum-current{animation-play-state:paused!important}
@media(max-width:760px){
 #portfolio .french-window{border-radius:100px 100px 7px 7px}
 #portfolio .window-panes{gap:6px}
 #portfolio .theme-window>.video-controls .expand{display:none}
 :is(#editorial,#more-edit) .serum-story{padding-top:153px}
 :is(#editorial,#more-edit) .care-pouch{width:108px;height:162px}
 :is(#editorial,#more-edit) .serum-flow{top:154px;bottom:20px;left:-10%;width:120%}
 #more-edit #more-videos{gap:30px 30px}
 #more-edit #more-videos>.film-card:nth-child(2n){margin-top:42px}
}
@media(prefers-reduced-motion:reduce){
 :is(#editorial,#more-edit) .serum-flow>img,:is(#editorial,#more-edit) .serum-current{animation:none!important}
}

#editorial .serum-story{max-width:1020px}

/* A personal sunset film completes the inspiration photographs. */
.photo-edit .inspiration-film{width:74%;max-width:440px;margin:44px auto 14px}
.photo-edit .inspiration-film .film-card{width:100%}
.photo-edit .inspiration-film .video-wrap{background:transparent}
@media(max-width:760px){
 .photo-edit .inspiration-film{width:84%;max-width:390px;margin:30px auto 8px}
}