:root{--sand:#eee6d6;--sand2:#e2d6bf;--lake:#1c4657;--lake2:#123341;--moss:#34472d;--sun:#e8892b;--ink:#1b2225;--mute:#5d625c;
--disp:'Gambarino',Georgia,serif;--txt:'Synonym',system-ui,sans-serif}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{background:var(--sand);color:var(--ink);font:400 17px/1.55 var(--txt);overflow-x:clip}
body::after{content:"";position:fixed;inset:0;background:url(../img/grain.png);opacity:.07;pointer-events:none;z-index:90;mix-blend-mode:multiply}
img{display:block;max-width:100%}
a{color:inherit}
em{font-style:italic}
.tag{font:600 12px/1.2 var(--txt);letter-spacing:.16em;text-transform:uppercase;color:var(--sun)}
h1,h2,h3{font-family:var(--disp);font-weight:400;letter-spacing:-.01em}
.bar{position:fixed;top:0;left:0;right:0;z-index:50;display:flex;justify-content:space-between;align-items:center;padding:14px 20px 22px;color:#fff;background:linear-gradient(180deg,rgba(14,40,50,.62),rgba(14,40,50,0))}
.logo{font:400 22px/1 var(--disp);text-decoration:none;text-shadow:0 1px 12px rgba(0,0,0,.35)}
.logo i{color:var(--sun)}
.bar-cta{font:600 13px/1 var(--txt);text-decoration:none;background:rgba(18,51,65,.55);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);padding:10px 14px;border-radius:4px;border:1px solid rgba(255,255,255,.25)}
.btn{display:inline-block;font:600 15px/1 var(--txt);text-decoration:none;padding:16px 20px;border-radius:3px}
.btn-sun{background:var(--sun);color:#1b1206}
.btn-ghost{color:#fff;border:1px solid rgba(255,255,255,.6)}
.btn-line{border:1px solid var(--lake);color:var(--lake)}
.cta-row{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}

/* pinned scenes */
.scene{position:relative}
.stage{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden}
.js .s-lac{height:300vh}.js .s-steps{height:320vh}.js .s-seances{height:520vh}.js .s-mot{height:240vh}
html:not(.motion) .scene{height:auto!important}
html:not(.motion) .stage{position:relative;height:auto;min-height:100svh}

/* 1 lac */
.s-lac .stage{background:var(--lake2);color:#fff}
.lac-img{position:absolute;inset:0;--t:0}
.lac-img img{width:100%;height:100%;object-fit:cover;object-position:50% 60%;transform:scale(calc(1.18 - .14*var(--t))) translateY(calc(var(--t)*-3%));}
.lac-veil{position:absolute;inset:0;background:linear-gradient(180deg,rgba(12,36,46,.55) 0%,rgba(12,36,46,.05) 38%,rgba(12,36,46,.25) 62%,rgba(10,30,38,.86) 100%)}
.lac-a{position:absolute;left:20px;right:20px;top:86px;--u:0;opacity:calc(1 - var(--u));transform:translateY(calc(var(--u)*-40px))}
.lac-a h1{font-size:clamp(46px,12vw,124px);line-height:.95;margin-top:14px;max-width:11ch;text-shadow:0 2px 30px rgba(0,0,0,.3)}
.lac-a h1 em{color:#f6c27c}
.lac-b{position:absolute;left:20px;right:20px;bottom:calc(84px + env(safe-area-inset-bottom));max-width:560px;--t:0;opacity:var(--t);transform:translateY(calc((1 - var(--t))*50px))}
.lac-b p{font-size:19px;line-height:1.5}
html:not(.motion) .lac-b{opacity:1;transform:none}

/* 2 steps */
.s-steps .stage{background:var(--sand);display:flex;flex-direction:column;padding:78px 20px 90px}
.steps-img{position:absolute;right:0;top:0;width:100%;height:42%;overflow:hidden;--t:0;clip-path:inset(0 0 calc((1 - var(--t))*100%) 0)}
.steps-img img{width:100%;height:100%;object-fit:cover;object-position:50% 40%;transform:scale(calc(1.12 - .12*var(--t)))}
.steps-k{position:relative;margin-top:calc(42vh - 40px);margin-top:calc(42svh - 40px)}
.steps{list-style:none;margin-top:14px;position:relative}
.steps li{--t:0;opacity:calc(.18 + .82*var(--t));font:400 clamp(21px,5.2vw,40px)/1.12 var(--disp);padding:10px 0;border-top:1px solid rgba(27,34,37,.16);display:flex;gap:14px;transform:translateX(calc((1 - var(--t))*14px))}
.steps li span{font:600 13px/1 var(--txt);color:var(--sun);padding-top:.5em;min-width:16px}
.steps li b{font-weight:400}.steps li em{color:var(--lake)}
html:not(.motion) .steps li{opacity:1;transform:none}
html:not(.motion) .steps-img{position:relative;height:40vh;clip-path:none}
html:not(.motion) .steps-k{margin-top:24px}

/* 3 seances */
.s-seances .stage{background:var(--lake2);color:#f3ece0}
.leash{position:absolute;left:0;top:64px;height:2px;background:var(--sun);width:calc(var(--t,0)*100%);z-index:3}
.track{display:flex;height:100%;width:500%;--k:0;transform:translateX(calc(var(--k)*-80%))}
.pane{width:20%;height:100%;position:relative;display:flex;flex-direction:column}
.pane figure{height:56%;overflow:hidden;margin:84px 20px 0}
.pane figure img{width:100%;height:100%;object-fit:cover}
.pane-txt{padding:22px 20px 0;max-width:520px}
.pane-txt h2{font-size:clamp(38px,9vw,72px);line-height:1;margin:10px 0 12px;color:#fff}
.pane-txt p:not(.tag){color:#c9d3d3;font-size:17px}
.pane-maxis{background:var(--moss)}.pane-maxis figure{height:42%}
.maxis{list-style:none;margin:6px 0 18px;columns:2;column-gap:16px}
.maxis li{font-size:15px;padding:6px 0;border-top:1px solid rgba(255,255,255,.2);break-inside:avoid}
html:not(.motion) .track{width:auto;flex-direction:column;transform:none;height:auto}
html:not(.motion) .pane{width:auto;height:auto;padding-bottom:40px}
html:not(.motion) .pane figure{height:60vh}

/* 4 mot */
.s-mot .stage{background:var(--sun);color:#24170a;display:flex;flex-direction:column;justify-content:center;padding:0 20px}
.mot{font:400 clamp(44px,11.5vw,128px)/.98 var(--disp)}
.mot span{display:block;--t:0;opacity:calc(.12 + .88*var(--t));transform:translateY(calc((1 - var(--t))*24px))}
.mot em{color:#fff}
.mot-by{margin-top:26px;font-size:14px;--u:0;opacity:var(--u)}
html:not(.motion) .mot span,html:not(.motion) .mot-by{opacity:1;transform:none}

/* 5 trust */
.trust{padding:0 0 70px;background:var(--sand);--f:0}
.trust-img{height:70vh;overflow:hidden}
.trust-img img{width:100%;height:125%;object-fit:cover;transform:translateY(calc(var(--f)*-20%))}
.trust-list{list-style:none;padding:34px 20px 0;display:grid;gap:22px}
.trust-list h3{font-size:30px;color:var(--lake);line-height:1.05}
.trust-list p{color:var(--mute);margin-top:6px}
.trust-quotes{padding:40px 20px 0;display:grid;gap:28px}
.trust-quotes blockquote{font:400 24px/1.25 var(--disp)}
.trust-quotes figcaption{font-size:13px;color:var(--mute);margin-top:8px;letter-spacing:.04em}

/* 6 contact */
.contact{background:var(--lake);color:#f3ece0;padding:76px 20px 110px}
.contact h2{font-size:clamp(46px,11vw,110px);line-height:.96;margin:14px 0 16px}
.contact h2 em{color:#f6c27c}
.c-lede{max-width:520px;color:#cdd8d8}
.contact .btn-line{border-color:rgba(243,236,224,.5);color:#f3ece0}
.c-facts{margin-top:40px;display:grid;gap:14px}
.c-facts div{border-top:1px solid rgba(243,236,224,.2);padding-top:12px}
.c-facts dt{font:600 12px/1 var(--txt);letter-spacing:.14em;text-transform:uppercase;color:var(--sun)}
.c-facts dd{margin-top:6px;font-size:18px}
.foot{background:var(--lake2);color:#a9b7b8;padding:40px 20px 110px;font-size:14px;display:grid;gap:8px}
.foot-logo{font:400 30px/1 var(--disp);color:#fff}.foot-logo i{color:var(--sun)}
.foot-prop{color:#f6c27c}
.dock{position:fixed;left:10px;right:10px;bottom:calc(10px + env(safe-area-inset-bottom));z-index:60;display:grid;grid-template-columns:1fr 1.4fr 1fr;background:rgba(18,51,65,.92);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-radius:6px;overflow:hidden}
.dock a{color:#fff;text-decoration:none;text-align:center;padding:15px 6px;font:600 14px/1 var(--txt)}
.dock-main{background:var(--sun);color:#1b1206!important}

@media (min-width:900px){
  body{font-size:18px}
  .bar{padding:22px 40px}.dock{display:none}
  .lac-veil{background:linear-gradient(90deg,rgba(10,30,38,.7) 0%,rgba(10,30,38,.15) 55%,rgba(10,30,38,0) 100%),linear-gradient(180deg,rgba(12,36,46,.4),rgba(12,36,46,0) 30%,rgba(10,30,38,.6) 100%)}
  .lac-a{left:56px;top:120px}
  .pane figure{height:78%}.lac-b{left:56px;bottom:70px}
  .s-steps .stage{padding:0 56px;justify-content:center}
  .steps-img{width:46%;height:100%;left:auto}
  .steps-k{margin-top:0;max-width:48%}
  .steps{max-width:50%}
  .pane{flex-direction:row;align-items:center;gap:48px;padding:0 56px}
  .pane figure{height:72%;width:46%;margin:0;flex:none}
  .pane-txt{padding:0}
  .s-mot .stage{padding:0 56px}
  .trust{display:grid;grid-template-columns:1.1fr 1fr;align-items:start}
  .trust-img{grid-row:span 2;height:100vh;position:sticky;top:0}
  .trust-list,.trust-quotes{padding-left:56px;padding-right:56px}
  .contact{padding:120px 56px}.c-facts{grid-template-columns:repeat(3,1fr)}
  .foot{padding:40px 56px}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}