:root{--cream:#e8e7e5;--line:#cdcbc7;--ink:#1c1c1a;--text:#4a4946;--mute:#807e7a;--tile:#d9d6d1}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font:300 13px/1.55 Raleway,system-ui,sans-serif;color:var(--text);background:var(--cream);-webkit-font-smoothing:antialiased}
a{color:inherit}
img{display:block;max-width:100%}
h1,h2,h3{font-family:"Cormorant Garamond",Georgia,serif;font-weight:300;color:var(--ink);margin:0;text-transform:uppercase;letter-spacing:.16em}
.s-panel{background:var(--cream);position:relative}
.s-panel+.s-panel,.s-panel+main,main>.s-panel+.s-panel{border-top:1px solid var(--line)}
main>.s-hero{border-top:0}
.s-no{font:300 11px Raleway,sans-serif;letter-spacing:.14em;color:var(--mute)}
.s-it{font-style:italic;font-weight:300;font-size:11.5px;text-decoration:underline;text-underline-offset:3px;color:var(--text)}
.s-it:hover{color:var(--ink)}
b{font-weight:500;color:var(--ink)}
ul{margin:0;padding:0;list-style:none}
/* header */
.s-top{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:22px clamp(20px,3vw,44px)}
.s-bar{border-bottom:1px solid var(--line)}
.s-bar+.s-panel,.s-bar+main{margin-top:0}
.s-logo{font:300 17px "Cormorant Garamond",serif;letter-spacing:.34em;text-decoration:none;color:var(--ink)}
.s-top nav{display:flex;gap:38px;font-size:11.5px;letter-spacing:.04em;text-transform:uppercase}
.s-top nav a{text-decoration:none;padding-bottom:1px}
.s-top nav a:hover{text-decoration:underline;text-underline-offset:4px}
/* 001 hero: 40/60 split, hairline row, photo flush bottom right */
.s-hero{display:grid;grid-template-columns:40% 60%;grid-template-rows:1.84fr 1fr;min-height:clamp(520px,50vw,780px)}
.s-hero>div{position:relative}
.s-hero .s-c1{grid-column:1/-1;grid-row:1;border-bottom:1px solid var(--line)}
.s-hero .s-c1::after,.s-split .s-c1::after{content:none}
.s-hero::before{content:"";position:absolute;left:40%;top:0;bottom:0;border-left:1px solid var(--line)}
.s-hero .s-c2{grid-column:2;grid-row:1;display:flex;align-items:flex-end;padding:0 0 38px 40px}
.s-hero h1{font-size:clamp(34px,5.4vw,60px);line-height:1.1;letter-spacing:.1em}
.s-hero .s-c3{grid-column:1;grid-row:2;padding:34px 34px 0 21.5%;display:flex;flex-direction:column;justify-content:space-between;padding-bottom:30px}
.s-hero .s-c3 p{margin:0;font-size:10.5px;line-height:1.5;max-width:200px}
.s-hero .s-c3 .s-it{align-self:flex-end}
.s-hero .s-c4{grid-column:2;grid-row:2}
.s-hero .s-c4 img{position:absolute;right:0;top:0;height:100%;aspect-ratio:1.06;object-fit:cover}
.s-hero .s-top{position:absolute;left:0;right:0;top:0;z-index:2}
/* 002 talent / generic 40-60 split */
.s-split{display:grid;grid-template-columns:40% 60%;min-height:clamp(480px,40vw,640px)}
.s-split>.s-c1{border-right:1px solid var(--line);position:relative;padding:34px 34px 26px}
.s-split>.s-c1 .s-no{position:absolute;right:12px;bottom:10px}
.s-split>.s-c2{padding:60px 44px 36px 34px}
.s-split h2{font-size:15px;letter-spacing:.2em;margin-bottom:26px}
.s-talent>.s-c1{padding:0}
.s-pics{position:absolute;left:34%;bottom:80px;right:0;display:flex;gap:16px}
.s-pics img{width:50%;aspect-ratio:4/5;object-fit:cover;flex:1 1 0;min-width:0}
.s-pics img:last-child{margin-right:0}
.s-cols{max-width:780px;display:grid;grid-template-columns:1fr 1fr;gap:0 28px;text-align:justify;font-size:10.5px;line-height:1.5}
.s-cols li,.s-split ul li{margin:0 0 15px}
.s-split>.s-c2>ul{font-size:11.5px;max-width:520px}
.s-foot2{display:flex;justify-content:space-between;margin-top:34px}
.s-foot2 .s-it:last-child{text-decoration:none}
/* 003 feature: header row with hairline, photo right, large title over it */
.s-feature{display:grid;grid-template-columns:40% 60%;grid-template-rows:clamp(60px,6vw,90px) 1fr;min-height:clamp(500px,44vw,720px)}
.s-feature::before{content:"";position:absolute;left:40%;top:0;bottom:0;border-left:1px solid var(--line)}
.s-top2{grid-column:1/-1;grid-row:1;border-bottom:1px solid var(--line);position:relative}
.s-top2 .s-no{position:absolute;left:40%;bottom:8px;transform:translateX(-100%);padding-right:14px}
.s-feature .s-c1{grid-column:1;grid-row:2;display:flex;flex-direction:column;justify-content:flex-end;padding:0 38px 42px 38px}
.s-feature .s-c1 p{margin:0 0 14px;font-size:10.5px;text-align:justify;max-width:230px;align-self:flex-end}
.s-feature .s-c1 .s-it{align-self:flex-end}
.s-feature .s-c2{grid-column:2;grid-row:2;position:relative}
.s-feature .s-c2 img{position:absolute;right:0;top:0;width:55%;height:78%;object-fit:cover;object-position:50% 20%}
.s-feature .s-c2 h2{position:absolute;left:10%;bottom:19%;z-index:1;font-size:22px;letter-spacing:.2em;color:#f6efe5;mix-blend-mode:normal;text-shadow:0 1px 14px #0008}
/* wide panels: heading row, hairline, content */
.s-head{display:grid;grid-template-columns:40% 1fr;align-items:end;padding:34px 34px 22px;border-bottom:1px solid var(--line);position:relative}
.s-head h2{font-size:15px;letter-spacing:.2em}
.s-head p{margin:0;grid-column:2;grid-row:1;max-width:420px;font-size:11.5px;padding-left:6px}
.s-head .s-no{position:absolute;left:calc(40% - 14px);bottom:8px;transform:translateX(-100%)}
.s-steps{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(3,1fr)}
.s-steps li{padding:34px 34px 40px;border-right:1px solid var(--line);display:flex;flex-direction:column;gap:8px;margin:0}
.s-steps li:last-child{border-right:0}
.s-steps i{font:300 26px "Cormorant Garamond",serif;color:var(--mute);font-style:normal;letter-spacing:.1em}
.s-steps b{font:400 13px Raleway,sans-serif;letter-spacing:.06em}
.s-steps span{font-size:11.5px}
.s-plans{display:grid;grid-template-columns:repeat(3,1fr)}
.s-plan{padding:30px 34px 34px;border-right:1px solid var(--line);display:flex;flex-direction:column;gap:12px}
.s-plan:last-child{border-right:0}
.s-plan h3{font-size:13px;letter-spacing:.2em}
.s-price{font:300 28px "Cormorant Garamond",serif;color:var(--ink);margin:0;letter-spacing:.04em}
.s-plan ul{flex:1;font-size:11.5px}.s-plan li{margin:0 0 7px;padding-left:12px;position:relative}.s-plan li::before{content:"–";position:absolute;left:0}
.s-plan .s-it{align-self:flex-end}
/* faq */
.s-faq details{border-bottom:1px solid var(--line);padding:14px 0}
.s-faq details:first-child{border-top:1px solid var(--line)}
.s-faq summary{cursor:pointer;font-size:11.5px;letter-spacing:.06em;color:var(--ink);list-style:none;display:flex;justify-content:space-between}
.s-faq summary::-webkit-details-marker{display:none}
.s-faq summary::after{content:"+";color:var(--mute)}
.s-faq details[open] summary::after{content:"–"}
.s-faq p{margin:10px 0 0;font-size:11.5px;max-width:440px}
.s-faq>.s-c2{padding-top:44px}
/* contact */
.s-contact .s-c1 p{margin:0;font-size:11.5px;max-width:220px}
.s-form{display:grid;grid-template-columns:1fr 1fr;gap:18px;max-width:520px}
.s-form label{display:flex;flex-direction:column;gap:4px;font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--mute)}
.s-form .s-wide,.s-status,.s-form .s-btn{grid-column:1/-1}
.s-form input,.s-form select,.s-form textarea{font:300 13px Raleway,sans-serif;padding:8px 0;border:0;border-bottom:1px solid var(--line);border-radius:0;background:transparent;color:var(--ink);letter-spacing:normal;text-transform:none}
.s-form textarea{border:1px solid var(--line);padding:10px;resize:vertical}
.s-form input:focus,.s-form select:focus,.s-form textarea:focus{outline:0;border-color:var(--ink)}
.s-hp{position:absolute!important;left:-9999px;width:1px;height:1px;overflow:hidden}
.s-status{min-height:1.4em;margin:0;font-size:11.5px}
.s-status.err{color:#9b3a2e}
.s-btn{display:inline-block;justify-self:start;background:var(--ink);color:var(--cream)!important;padding:11px 26px;text-decoration:none!important;border:1px solid var(--ink);border-radius:0;font:400 10.5px Raleway,sans-serif;letter-spacing:.2em;text-transform:uppercase;cursor:pointer}
.s-btn:hover{background:#000}
/* legal */
.s-legal{padding:0 clamp(20px,6vw,44px) 70px;font-size:12.5px;line-height:1.7}
.s-legal>*{max-width:680px;margin-left:auto;margin-right:auto}
.s-legal h1{font-size:22px;letter-spacing:.2em;margin-top:44px;margin-bottom:4px}
.s-legal h2{font:400 13px Raleway,sans-serif;letter-spacing:.1em;text-transform:none;margin-top:30px;margin-bottom:6px}
.s-legal p,.s-legal li{color:var(--text)}.s-legal ul{padding-left:18px;list-style:disc}
.s-small{font-size:11px;color:var(--mute)}
.s-draft{border:1px solid #c9a227;background:#f3ecd0;padding:12px 14px;font-size:12px}
.s-foot{border-top:1px solid var(--line);padding:26px clamp(20px,3vw,44px) 34px;font-size:11px;letter-spacing:.06em;color:var(--mute);display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap}
.s-foot p{margin:0 0 4px}.s-foot a{text-underline-offset:3px;color:var(--text)}
@media (max-width:820px){
  .s-top{padding:33.5px 20px}.s-top nav{gap:16px}.s-top nav .s-l{display:none}
  .s-hero{grid-template-columns:1fr;grid-template-rows:auto}
  .s-hero::before,.s-feature::before{content:none}
  .s-hero .s-c1{grid-row:1;grid-column:1;min-height:76px}
  .s-hero .s-c2,.s-hero .s-c3,.s-hero .s-c4{grid-column:1;grid-row:auto;padding:30px 20px}
  .s-hero .s-c2{padding-top:50px}
  .s-hero .s-c3{padding-bottom:30px;gap:14px}.s-hero .s-c3 p{max-width:none;font-size:12px}
  .s-hero .s-c4{padding:0;height:300px}.s-hero .s-c4 img{width:100%;aspect-ratio:auto;height:100%}
  .s-split,.s-feature{grid-template-columns:1fr;grid-template-rows:auto;min-height:0}
  .s-split>.s-c1{border-right:0;border-bottom:1px solid var(--line);padding:33.5px 20px 34px}
  .s-split>.s-c2{padding:30px 20px}
  .s-talent>.s-c1{padding:0;height:240px}.s-pics{left:20px;right:20px;bottom:36px}
  .s-cols{grid-template-columns:1fr}
  .s-top2{grid-column:1;min-height:60px}.s-top2 .s-no{left:auto;right:14px;transform:none}
  .s-feature .s-c1{grid-column:1;grid-row:3;padding:33.5px 20px}.s-feature .s-c1 p{max-width:none;align-self:stretch;font-size:12px}
  .s-feature .s-c2{grid-column:1;grid-row:2;height:380px}.s-feature .s-c2 img{width:100%;height:100%}.s-feature .s-c2 h2{left:20px;bottom:24px}
  .s-head{grid-template-columns:1fr;gap:10px;padding:33.5px 20px 20px}.s-head p{grid-column:1;grid-row:auto;padding:0}.s-head .s-no{left:auto;right:14px;transform:none}
  .s-steps,.s-plans{grid-template-columns:1fr}
  .s-steps li,.s-plan{border-right:0;border-bottom:1px solid var(--line);padding:33.5px 20px}.s-steps li:last-child,.s-plan:last-child{border-bottom:0}
  .s-form{grid-template-columns:1fr}
  .s-foot{padding:22px 20px 30px}
}
.s-feature .s-c2 h2{left:calc(45% + 24px);bottom:24%}
.s-hero .s-c4 img{object-position:50% 12%}
.s-trust,.s-faq,.s-contact{min-height:0}
@media (max-width:820px){.s-feature .s-c2 h2{left:20px;bottom:24px}}
.s-feature .s-c2 h2{bottom:12%;text-shadow:0 1px 16px #000b,0 0 3px #0006}
/* designs: heading and small notes, three short columns, then real previews of each design */
.s-showcase .s-dtop{display:flex;justify-content:space-between;align-items:flex-start;padding:34px 34px 0}
.s-showcase h2{font-size:clamp(20px,2.6vw,26px);line-height:1.35;letter-spacing:.14em}
.s-meta{display:grid;grid-template-columns:auto auto auto;gap:0 52px;font-size:8.5px;letter-spacing:.14em;text-transform:uppercase;line-height:1.6;color:var(--mute);text-align:right}
.s-meta span:first-child{text-align:left}
.s-dtext{display:grid;grid-template-columns:repeat(3,1fr);gap:0 34px;padding:56px 34px 44px}
.s-dtext h3{font:500 8.5px Raleway,sans-serif;letter-spacing:.14em;color:var(--ink);margin:0 0 12px}
.s-dtext p{margin:0;font-size:10.5px;line-height:1.55;text-align:justify}
.s-pvs{display:grid;grid-template-columns:repeat(12,1fr);gap:34px 20px;padding:0 34px 44px}
.s-pv{grid-column:span 3;display:flex;flex-direction:column;gap:6px;text-decoration:none;min-width:0}
.s-pv:nth-child(-n+3){grid-column:span 4}
.s-pvimg{display:block;aspect-ratio:3/4;overflow:hidden;background:var(--tile);position:relative}
.s-pvimg img{width:100%;height:100%;object-fit:cover;object-position:top;transition:transform .5s}
.s-pv:hover .s-pvimg img{transform:scale(1.03)}
.s-pv-studio .s-pvimg{display:flex;align-items:center;background:var(--tile)}.s-pv-studio .s-pvimg img{height:auto;object-fit:contain;box-shadow:0 8px 24px -10px #0005}
.s-pv b{font:400 9.5px Raleway,sans-serif;letter-spacing:.16em;text-transform:uppercase;margin-top:8px;color:var(--ink)}
.s-pvtext{font-size:10px;color:var(--mute);line-height:1.45}
.s-pv i{font-size:10px;text-decoration:underline;text-underline-offset:3px;color:var(--text)}
@media (max-width:820px){
  .s-showcase .s-dtop{flex-direction:column;gap:18px;padding:33.5px 20px 0}.s-meta{text-align:left;grid-template-columns:1fr 1fr;gap:10px 20px}
  .s-dtext{grid-template-columns:1fr;gap:24px;padding:30px 20px}
  .s-pvs{grid-template-columns:1fr 1fr;padding:0 20px 30px;gap:26px 14px}.s-pv,.s-pv:nth-child(-n+3){grid-column:span 1}
}
.s-feature .s-c2 h2{bottom:26%;left:calc(45% + 28px);font-size:clamp(20px,2.2vw,34px)}
.s-hero{grid-template-rows:1.5fr 1fr;min-height:clamp(540px,54vw,860px)}
@media (min-width:1100px){
  .s-hero .s-c3 p,.s-cols,.s-feature .s-c1 p,.s-split>.s-c2>ul,.s-head p,.s-dtext p,.s-faq p,.s-faq summary,.s-plan ul,.s-steps span,.s-contact .s-c1 p{font-size:clamp(11px,.82vw,14px)}
  .s-hero .s-c3 p{max-width:clamp(200px,20vw,320px)}.s-feature .s-c1 p{max-width:clamp(230px,22vw,340px)}
  .s-it{font-size:clamp(11.5px,.85vw,14px)}
  .s-split h2,.s-head h2{font-size:clamp(15px,1.15vw,20px)}
}
/* sticky navigation with the real logo */
.s-bar{position:sticky;top:0;z-index:20;background:var(--cream);border-bottom:1px solid var(--line)}
.s-bar+main>.s-hero{border-top:0}
.s-top{padding:33.5px clamp(20px,3vw,44px)}
.s-logo{display:block;line-height:0}
.s-logo img{height:24px;width:auto}
.s-hero .s-top{position:static}
section[id]{scroll-margin-top:100px}
/* sticky call-to-action bar along the bottom */
.s-cta-bar{position:fixed;left:0;right:0;bottom:0;z-index:20;background:var(--cream);border-top:1px solid var(--line);display:flex;align-items:center;justify-content:center;gap:clamp(18px,3vw,40px);padding:12px 20px}
.s-cta-text{display:flex;flex-direction:column;gap:2px;text-align:left}
.s-cta-text b{font:400 clamp(14px,1.3vw,18px) "Cormorant Garamond",serif;letter-spacing:.16em;text-transform:uppercase;color:var(--ink)}
.s-cta-text span{font-size:11.5px;color:var(--mute)}
.s-cta-div{align-self:stretch;width:1px;background:var(--line);margin:2px 0}
.s-cta-bar .s-btn{background:#000;color:#fff!important;border-color:#000;padding:12px 24px;white-space:nowrap}
.s-cta-bar .s-btn:hover{background:var(--ink)}
.s-cta-bar .s-btn i{font-style:normal;margin-left:8px;letter-spacing:0}
.s-foot{padding-bottom:calc(34px + 70px)}
@media (max-width:820px){
  .s-cta-bar{gap:14px;padding:10px 14px;justify-content:space-between}
  .s-cta-text span,.s-cta-div{display:none}
  .s-cta-text b{font-size:12px;letter-spacing:.08em;white-space:nowrap}
  .s-cta-bar .s-btn{padding:11px 14px;font-size:9.5px;letter-spacing:.1em}
  .s-foot{padding-bottom:calc(30px + 64px)}
}
@media (max-width:820px){.s-top{padding:33.5px 20px}}
/* alternating section backgrounds and more air, so sections read as separate */
main>section.s-panel:nth-of-type(even){background:var(--bg)}
main>.s-panel{border-top:1px solid var(--line)}
.s-head{padding:clamp(34px,4.5vw,64px) clamp(24px,3vw,44px) 26px}
.s-dtext{padding:clamp(40px,5vw,72px) clamp(24px,3vw,44px) clamp(36px,4vw,56px)}
.s-steps li{padding:clamp(26px,3vw,40px) clamp(24px,3vw,44px) clamp(34px,4vw,52px)}
.s-plan{padding-top:clamp(30px,3.5vw,48px);padding-bottom:clamp(34px,4vw,52px)}
.s-split>.s-c2{padding-top:clamp(56px,6vw,96px);padding-bottom:clamp(44px,5vw,72px)}
/* real screenshots of the product in a quiet browser frame */
.s-feat,.s-pair,.s-quad{padding:clamp(28px,3.5vw,52px) clamp(24px,3vw,44px) 0}
.s-inside{padding-bottom:clamp(40px,5vw,72px)}
.s-fig{margin:0;min-width:0}
.s-shot{background:#fff;border:1px solid var(--line);box-shadow:0 26px 46px -30px #0006;overflow:hidden}
.s-shotbar{display:flex;gap:5px;padding:7px 10px;border-bottom:1px solid var(--line);background:#f6f5f3}
.s-shotbar i{width:6px;height:6px;background:#cdcbc7;display:block}
.s-shot img{width:100%;height:auto;display:block}
.s-fig figcaption{display:flex;flex-direction:column;gap:2px;padding:12px 2px 0}
.s-fig figcaption b{font:400 9.5px Raleway,sans-serif;letter-spacing:.16em;text-transform:uppercase;color:var(--ink)}
.s-fig figcaption span{font-size:11px;color:var(--mute);line-height:1.5}
.s-feat{max-width:1180px;margin:0 auto}
.s-pair{display:grid;grid-template-columns:1fr 1fr;gap:clamp(20px,3vw,44px);max-width:1180px;margin:0 auto}
.s-quad{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(14px,2vw,28px);max-width:1180px;margin:0 auto}
.s-inside .s-head p{max-width:460px}
@media (min-width:1100px){.s-fig figcaption span{font-size:clamp(11px,.8vw,13px)}.s-fig figcaption b{font-size:clamp(9.5px,.7vw,11px)}}
/* photos in the how-it-works steps and beside the safety and questions panels */
.s-steps img{flex:none;height:auto;width:100%;aspect-ratio:4/3;object-fit:cover;object-position:left top;margin-bottom:12px;border:1px solid var(--line);background:var(--tile)}
.s-steps img.top{object-position:top}
.s-flush{position:absolute;left:34%;right:0;bottom:0;height:52%;width:66%;object-fit:cover;object-position:50% 20%}
.s-trust .s-no,.s-faq .s-no{bottom:auto;top:16px;right:14px}
.s-trust,.s-faq{min-height:clamp(460px,38vw,600px)}
@media (max-width:820px){
  .s-pair,.s-quad{grid-template-columns:1fr}
  .s-feat,.s-pair,.s-quad{padding-left:20px;padding-right:20px}.s-pair,.s-quad{gap:26px}
  .s-flush{position:static;width:100%;height:240px;margin:24px 0 -34px;left:auto}
  .s-trust,.s-faq{min-height:0}
  .s-split>.s-c1{padding-bottom:34px}
  .s-trust .s-no,.s-faq .s-no{position:absolute}
}
/* section headlines: one size, twice what they were */
.s-split h2,.s-head h2,.s-showcase h2,.s-feature .s-c2 h2{font-size:clamp(28px,2.3vw,40px);letter-spacing:.14em;line-height:1.2}
@media (min-width:1100px){.s-split h2,.s-head h2{font-size:clamp(28px,2.3vw,40px)}}
.s-split h2{margin-bottom:34px}
.s-head h2{padding-right:20px}
.s-showcase .s-dtop h2{line-height:1.25}
@media (max-width:820px){.s-feature .s-c2 h2{font-size:28px}}
/* more screens: each as wide as the big one, scroll sideways (arrow buttons, swipe, trackpad or arrow keys) */
.s-slider{max-width:1180px;margin:0 auto;padding:clamp(28px,3.5vw,52px) clamp(24px,3vw,44px) 0}
.s-track{display:flex;gap:clamp(20px,3vw,44px);overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;scrollbar-width:none;padding:0 0 6px;outline:0;overscroll-behavior-x:contain}
.s-track::-webkit-scrollbar{display:none}
.s-track>.s-fig{flex:0 0 100%;scroll-snap-align:start;min-width:0}
.s-track:focus-visible{outline:1px solid var(--ink);outline-offset:6px}
.s-sctl{display:flex;align-items:center;justify-content:flex-end;gap:14px;margin-top:6px}
.s-sctl button{width:40px;height:40px;background:var(--ink);color:#fff;border:0;border-radius:0;font:300 18px Raleway,sans-serif;cursor:pointer;line-height:1}
.s-sctl button:hover{background:#000}.s-sctl button:disabled{background:var(--line);cursor:default}
.s-count{font:300 11px Raleway,sans-serif;letter-spacing:.14em;color:var(--mute);min-width:44px;text-align:center}
@media (max-width:820px){.s-slider{padding-left:20px;padding-right:20px}.s-track{gap:16px}}
/* hero: headline on the left at 120px, two photos stacked on the right */
.s-hero{grid-template-columns:62% 38%;grid-template-rows:1.5fr 1fr}
.s-hero::before{left:62%}
.s-hero .s-c2{grid-column:1;grid-row:1;padding:0 clamp(20px,3vw,44px) clamp(28px,3vw,48px);display:flex;align-items:flex-end;border-bottom:1px solid var(--line)}
.s-hero h1{font-size:clamp(52px,8.34vw,120px);line-height:1.02;letter-spacing:.08em;white-space:nowrap}
.s-hero .s-c5{grid-column:2;grid-row:1;border-bottom:1px solid var(--line);position:relative;overflow:hidden}
.s-hero .s-c5 img,.s-hero .s-c4 img{position:absolute;inset:0;width:100%;height:100%;aspect-ratio:auto;object-fit:cover}
.s-hero .s-c5 img{object-position:50% 14%}
.s-hero .s-c4{grid-column:2;grid-row:2;position:relative;overflow:hidden}
.s-hero .s-c4 img{object-position:50% 12%}
.s-hero .s-c3{grid-column:1;grid-row:2;padding:34px 34px 30px clamp(20px,3vw,44px)}
@media (min-width:1100px){.s-hero .s-c3 p{max-width:clamp(260px,26vw,420px)}}
@media (max-width:820px){
  .s-hero{grid-template-columns:1fr;grid-template-rows:auto}
  .s-hero .s-c2{grid-column:1;grid-row:1;padding:56px 20px 34px}
  .s-hero h1{font-size:42px;white-space:normal}
  .s-hero .s-c5{grid-column:1;grid-row:2;height:340px;border-bottom:0;border-top:1px solid var(--line)}
  .s-hero .s-c3{grid-column:1;grid-row:3;padding:30px 20px}
  .s-hero .s-c4{grid-column:1;grid-row:4;height:280px;border-top:1px solid var(--line)}
}
/* ---- motion ---- */
.x-line{display:block;overflow:hidden;padding-bottom:.07em;margin-bottom:-.07em}
.x-line>span{display:block;transform:translateY(108%);animation:x-rise 1.1s cubic-bezier(.2,.7,.1,1) .1s forwards}
.x-line:nth-child(2)>span{animation-delay:.24s}
.s-hero .s-c5,.s-hero .s-c4{animation:x-reveal 1.3s cubic-bezier(.2,.7,.1,1) .35s both}
.s-hero .s-c4{animation-delay:.55s}
.s-hero .s-c5 img,.s-hero .s-c4 img{animation:x-drift 26s ease-in-out 1.7s infinite alternate}
.s-hero .s-c3{animation:x-fade 1s ease .9s both}
@keyframes x-rise{to{transform:none}}
@keyframes x-reveal{from{clip-path:inset(0 0 100% 0)}to{clip-path:inset(0)}}
@keyframes x-drift{from{transform:scale(1.02)}to{transform:scale(1.09)}}
@keyframes x-fade{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.rv-on .rv{opacity:0;transform:translateY(26px);transition:opacity .9s ease var(--d,0ms),transform 1s cubic-bezier(.2,.7,.1,1) var(--d,0ms)}
.rv-on .rv.in{opacity:1;transform:none}
.rv-on .rv-img{clip-path:inset(0 0 100% 0);transition:clip-path 1.2s cubic-bezier(.2,.7,.1,1) 120ms}
.rv-on .rv-img.in{clip-path:inset(0)}
.s-pv .s-pvimg{transition:box-shadow .4s}.s-pv:hover .s-pvimg{box-shadow:0 22px 40px -24px #0007}
.s-top nav a{transition:opacity .25s}.s-top nav:hover a{opacity:.55}.s-top nav a:hover{opacity:1}
.s-btn{transition:background .3s,transform .3s}.s-btn:hover{transform:translateY(-1px)}
@media (prefers-reduced-motion:reduce){
  .x-line>span{transform:none;animation:none}.s-hero .s-c5,.s-hero .s-c4,.s-hero .s-c5 img,.s-hero .s-c4 img,.s-hero .s-c3{animation:none}
  html{scroll-behavior:auto}
}
/* ---- motion, part 2: every part has its own movement ---- */
/* marquee band */
.s-marq{overflow:hidden;background:#000;padding:clamp(7px,.8vw,11px) 0}
.s-marq-track{display:flex;width:max-content;animation:s-marq 46s linear infinite;font:400 clamp(12px,1.1vw,16px)/1.3 "Cormorant Garamond",serif;text-transform:uppercase;letter-spacing:.3em;color:#fff;white-space:nowrap}
.s-marq-track span,.s-marq-track i{padding:0 clamp(14px,1.8vw,26px);font-style:normal}
.s-marq-track i{color:#8a8884}
.s-marq:hover .s-marq-track{animation-play-state:paused}
@keyframes s-marq{to{transform:translateX(-50%)}}
/* progress hairline under the sticky bar */
.s-bar::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--ink);transform:scaleX(var(--scroll,0));transform-origin:left;pointer-events:none}
/* bottom bar slides up once the hero has gone */
.rv-on .s-cta-bar{transition:transform .7s cubic-bezier(.2,.7,.1,1)}
.rv-on .s-cta-bar:not(.show){transform:translateY(110%)}
/* titles: letters rise out of a mask */
h2[data-m=letters]{overflow:visible}
h2[data-m=letters] .w{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.12em;margin-bottom:-.12em}
h2[data-m=letters] .l{display:inline-block;transition:transform 1s cubic-bezier(.2,.7,.1,1) calc(var(--i) * 32ms),opacity .6s ease calc(var(--i) * 32ms)}
.rv-on h2[data-m=letters]:not(.in) .l{transform:translateY(112%);opacity:0}
/* text: soft fade up */
.rv-on [data-m=fade]{transition:opacity .9s ease,transform 1s cubic-bezier(.2,.7,.1,1)}
.rv-on [data-m=fade]:not(.in){opacity:0;transform:translateY(18px)}
/* the two portraits are dealt in from opposite sides */
.s-pics img{transition:transform 1.3s cubic-bezier(.2,.7,.1,1),opacity 1s ease}
.rv-on .s-pics img[data-m=deal-a]:not(.in){transform:translateX(-70px) rotate(-3deg);opacity:0}
.rv-on .s-pics img[data-m=deal-b]:not(.in){transform:translateY(80px) rotate(3deg);opacity:0}
.s-pics img[data-m=deal-b]{transition-delay:.18s}
/* design previews open like a window; tall cards pan on hover to show the rest */
.s-pvimg{transition:clip-path 1.3s cubic-bezier(.2,.7,.1,1) var(--d,0ms),box-shadow .4s}
.s-pvimg img{transition:transform 1.4s cubic-bezier(.2,.7,.1,1) var(--d,0ms),object-position 3.2s ease-in-out}
.rv-on .s-pvimg[data-m=iris]:not(.in){clip-path:inset(16% 16% 16% 16%)}
.rv-on .s-pvimg[data-m=iris]:not(.in) img{transform:scale(1.22)}
.s-pv:hover .s-pvimg img{object-position:50% 100%}
.s-pv-studio:hover .s-pvimg img{object-position:left top}
/* steps: the top line draws, then the content follows */
.s-steps li{position:relative}
.s-steps li::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:var(--ink);transform-origin:left;transition:transform 1.2s cubic-bezier(.2,.7,.1,1) var(--d,0ms)}
.rv-on .s-steps li[data-m=line]:not(.in)::before{transform:scaleX(0)}
.s-steps li>*{transition:opacity .9s ease calc(var(--d,0ms) + 350ms),transform 1s cubic-bezier(.2,.7,.1,1) calc(var(--d,0ms) + 350ms)}
.rv-on .s-steps li[data-m=line]:not(.in)>*{opacity:0;transform:translateY(16px)}
/* safety points are wiped in from the left; photos rise from the bottom */
.s-trust .s-c2 li{transition:clip-path 1.1s cubic-bezier(.2,.7,.1,1) var(--d,0ms),opacity .8s ease var(--d,0ms)}
.rv-on .s-trust .s-c2 li[data-m=wipex]:not(.in){clip-path:inset(0 100% 0 0);opacity:0}
.s-flush{transition:clip-path 1.4s cubic-bezier(.2,.7,.1,1)}
.rv-on .s-flush[data-m=wipeup]:not(.in){clip-path:inset(100% 0 0 0)}
/* plans scale up */
.s-plan{transition:opacity .9s ease var(--d,0ms),transform 1s cubic-bezier(.2,.7,.1,1) var(--d,0ms),background .35s}
.rv-on .s-plan[data-m=scale]:not(.in){opacity:0;transform:scale(.95)}
.s-plan:hover{background:rgba(255,255,255,.55)}
.s-plan li{transition:transform .35s ease}.s-plan:hover li{transform:translateX(4px)}.s-plan:hover li:nth-child(2){transition-delay:.04s}.s-plan:hover li:nth-child(3){transition-delay:.08s}.s-plan:hover li:nth-child(4){transition-delay:.12s}
/* faq: lines draw themselves, answers drop in, the plus turns */
.s-faq details{position:relative;border-bottom:0}
.s-faq details::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--line);transform-origin:left;transition:transform 1.1s cubic-bezier(.2,.7,.1,1) var(--d,0ms)}
.rv-on .s-faq details[data-m=draw]:not(.in)::after{transform:scaleX(0)}
.s-faq summary::after{transition:transform .4s}.s-faq details[open] summary::after{transform:rotate(180deg)}
.s-faq details[open] p{animation:s-drop .5s cubic-bezier(.2,.7,.1,1)}
@keyframes s-drop{from{opacity:0;transform:translateY(-8px)}}
/* contact: field lines draw on focus */
.s-form input,.s-form select{background:linear-gradient(var(--ink),var(--ink)) no-repeat 0 100%/0 1px;transition:background-size .5s cubic-bezier(.2,.7,.1,1)}
.s-form input:focus,.s-form select:focus{background-size:100% 1px}
/* agencies feature: the photo pans and the title slides across it as you scroll */
.s-feature{overflow:hidden}
.rv-on .s-feature .s-c2 img{object-position:50% calc(6% + var(--par,.5) * 44%)}
.rv-on .s-feature .s-c2 h2{transform:translateX(calc((var(--par,.5) - .5) * -140px))}
/* sliders tilt up into place */
.rv-on .s-slider{transform:perspective(1500px) rotateX(var(--tilt,0deg)) translateY(calc(var(--tilt,0deg) * 4));transform-origin:50% 100%}
@media (prefers-reduced-motion:reduce){.s-marq-track{animation:none}.s-bar::after{display:none}.s-faq details[open] p{animation:none}}
@media (max-width:820px){.rv-on .s-feature .s-c2 h2{transform:none}.rv-on .s-slider{transform:none}}
/* navigation: links sit close to the logo, Sign in and Join free are buttons on the right */
.s-top{justify-content:flex-start;gap:0}
.s-top nav{margin-left:clamp(22px,3vw,48px);gap:clamp(18px,2vw,30px)}
.s-acts{margin-left:auto;display:flex;align-items:center;gap:10px}
.s-signin,.s-join{display:inline-block;padding:11px 22px;border:1px solid var(--ink);border-radius:0;font:400 10.5px Raleway,sans-serif;letter-spacing:.2em;text-transform:uppercase;text-decoration:none;white-space:nowrap;transition:background .3s,color .3s}
.s-signin{background:transparent;color:var(--ink)}.s-signin:hover{background:var(--ink);color:#fff}
.s-join{background:var(--ink);color:#fff}.s-join:hover{background:#000}
@media (max-width:820px){
  .s-top nav{display:none}
  .s-acts{gap:8px}.s-signin,.s-join{padding:10px 14px;font-size:9.5px;letter-spacing:.14em}
}
.s-top{padding-top:28px;padding-bottom:28px}
@media (max-width:820px){.s-top{padding-top:28px;padding-bottom:28px}}
/* numbers removed */
.s-meta{grid-template-columns:auto auto}
.s-meta span:first-child{text-align:right}
.s-feature{grid-template-rows:1fr}
.s-feature .s-c1,.s-feature .s-c2{grid-row:1}
@media (max-width:820px){.s-feature{grid-template-rows:auto}.s-feature .s-c2{grid-row:1}.s-feature .s-c1{grid-row:2}}
/* phone: the bottom bar keeps its layout: headline and line at the left, divider, button at the right */
@media (max-width:820px){
  .s-cta-bar{justify-content:space-between;gap:12px;padding:10px 14px}
  .s-cta-text{min-width:0;flex:1}
  .s-cta-text span{display:block;font-size:10.5px;line-height:1.35}
  .s-cta-text b{font-size:12.5px;letter-spacing:.1em;white-space:nowrap}
  .s-cta-div{display:block}
  .s-cta-bar .s-btn{white-space:normal;text-align:center;line-height:1.4;padding:10px 12px;font-size:9.5px;letter-spacing:.1em;max-width:124px;flex:none}
}

/* no blue, anywhere: the browser paints autofilled fields light blue, selections and focus rings blue, taps blue-grey. Keep the field as designed. */
input:-webkit-autofill,input:-webkit-autofill:hover,input:-webkit-autofill:focus,input:-webkit-autofill:active,textarea:-webkit-autofill,textarea:-webkit-autofill:focus,select:-webkit-autofill,select:-webkit-autofill:focus{-webkit-text-fill-color:currentColor!important;caret-color:currentColor;transition:background-color 600000s ease-in-out 0s!important;background-clip:text!important}
input:autofill,textarea:autofill,select:autofill{background:transparent!important;color:inherit!important;filter:none!important}
::selection{background:#2b2a28;color:#fbfbfa}
*{-webkit-tap-highlight-color:transparent}
input,textarea,select,progress,meter{accent-color:#2b2a28}
:focus-visible{outline-color:currentColor}