/* HERO */
.hero{position:relative;display:grid;grid-template-rows:auto auto;min-height:100svh;background:var(--ink)}
.hero-media{position:relative;height:68svh;min-height:420px;overflow:hidden;background:var(--ink)}
.hero-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:46% 50%}
.inkjs .hero-media img{opacity:0}
.inkjs .hero.done .hero-media img{opacity:1}
.hero-media::after{content:"";position:absolute;left:0;right:0;bottom:0;height:34%;background:linear-gradient(180deg,rgba(12,11,11,0),rgba(12,11,11,.92));pointer-events:none;z-index:2}
.hero-media::before{content:"";position:absolute;left:0;right:0;top:0;height:110px;background:linear-gradient(180deg,rgba(12,11,11,.55),rgba(12,11,11,0));pointer-events:none;z-index:2}
canvas.ink{position:absolute;inset:0;width:100%;height:100%;display:block;z-index:1;animation:inkin .45s ease both}
canvas.ink.out{opacity:0;transition:opacity .6s ease}
@keyframes inkin{from{opacity:0}to{opacity:1}}

.stages{position:absolute;left:var(--gut);right:var(--gut);bottom:18px;z-index:3;transition:opacity .5s ease}
.stages ol{list-style:none;margin:0 0 10px;padding:0;display:flex;gap:14px;flex-wrap:nowrap;justify-content:space-between}
.stages li{white-space:nowrap;font:600 10px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:rgba(236,230,220,.6);transition:color .35s ease}
.stages li i{font:italic 500 13px/1 var(--serif);letter-spacing:0;margin-right:6px;color:inherit}
.hero[data-stage="1"] li:nth-child(1),.hero[data-stage="2"] li:nth-child(2),.hero[data-stage="3"] li:nth-child(3),.hero[data-stage="4"] li:nth-child(4){color:var(--bone)}
.hero[data-stage="1"] li:nth-child(1) i,.hero[data-stage="2"] li:nth-child(2) i,.hero[data-stage="3"] li:nth-child(3) i,.hero[data-stage="4"] li:nth-child(4) i{color:var(--violet)}
.stages .bar{height:1px;background:rgba(236,230,220,.18)}
.stages .bar span{display:block;height:1px;background:var(--violet);transform-origin:left;transform:scaleX(0)}
.hero:not([data-stage="0"]) .stages .bar span{transform:scaleX(1);transition:transform 4.8s linear}
.final{position:absolute;left:var(--gut);right:var(--gut);bottom:14px;z-index:3;display:flex;align-items:center;justify-content:space-between;gap:12px;opacity:0;pointer-events:none;transition:opacity .6s ease .2s}
.final .cap{margin:0;color:var(--bone2)}
.replay{background:none;border:0;color:var(--wash2);font:600 10.5px/1 var(--sans);letter-spacing:.2em;text-transform:uppercase;min-height:44px;padding:0 0 0 12px;cursor:pointer}
.replay:hover{color:var(--bone)}
.hero.done .stages{opacity:0}
.hero.done .final{opacity:1;pointer-events:auto}
.hero:not(.done) .replay{visibility:hidden}

.hero-copy{padding:6px var(--gut) 40px;position:relative;z-index:3}
.hero-copy h1{font-size:clamp(44px,12.4vw,112px);line-height:.96;margin:12px 0 16px;letter-spacing:-.02em}
.hero-copy h1 em{color:var(--bone)}
.hero-copy .lede{font-size:16px;max-width:30em;margin-bottom:22px}
.btns{display:flex;gap:10px;flex-wrap:wrap}
.hero-copy .rise,.hero-copy>*{animation:up .9s cubic-bezier(.2,.7,.1,1) both}
.hero-copy>*:nth-child(2){animation-delay:.08s}.hero-copy>*:nth-child(3){animation-delay:.16s}.hero-copy>*:nth-child(4){animation-delay:.24s}
@keyframes up{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.hero-copy>*{animation:none}}

@media (max-width:899px){
  .hero-copy{margin-top:0;padding-top:16px}
  .hero-media{height:58svh}
  .stages,.final{bottom:12px}
}
@media (min-width:900px){
  .hero{grid-template-columns:minmax(0,1fr) min(56vw,calc(min(100vh,1100px) * .78));grid-template-rows:1fr;height:100vh;min-height:640px;max-height:1100px}
  .hero-media{order:2;height:auto;min-height:0}
  .hero-media::after{top:0;bottom:0;left:0;right:auto;width:22%;height:auto;background:linear-gradient(90deg,rgba(12,11,11,1),rgba(12,11,11,0))}
  .hero-copy{order:1;align-self:center;padding:calc(var(--hdr) + 20px) 0 40px var(--gut);max-width:760px;margin-right:-120px;z-index:4}
  .hero-copy h1{font-size:clamp(64px,7.4vw,118px)}
  .hero-copy .lede{font-size:18px}
  .stages{left:26%;right:28px;bottom:28px}.final{left:26%;right:28px;bottom:22px}
}

/* QUOTE */
.quote{padding:84px var(--gut) 72px}
.quote figure{margin:36px 0 0}
.quote blockquote{margin:0 0 20px;font:400 clamp(30px,5.2vw,68px)/1.1 var(--serif);max-width:15em;letter-spacing:-.01em}
.quote blockquote em{color:var(--violet)}

/* SCALE */
.scale{padding:24px 0 80px}
.scale-head{display:grid;gap:18px;margin-bottom:36px}
@media (min-width:900px){.scale-head{grid-template-columns:1.1fr 1fr;align-items:end}}
.plates{display:grid;grid-auto-flow:column;grid-auto-columns:72vw;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding:0 var(--gut);padding:0 var(--gut) 6px;scrollbar-width:none;overscroll-behavior-x:contain}
.plates::-webkit-scrollbar{display:none}
.plate{margin:0;scroll-snap-align:start}
.plate img{width:100%;aspect-ratio:3/4;object-fit:cover}
@media (min-width:900px){.plates{grid-auto-flow:row;grid-template-columns:repeat(3,1fr);grid-auto-columns:auto;max-width:var(--maxw);margin:0 auto;overflow:visible}
  .plate:nth-child(2){margin-top:70px}.plate:nth-child(3){margin-top:140px}}
.more{display:inline-flex;align-items:center;gap:10px;min-height:44px;margin-top:22px;font:600 12px/1 var(--sans);letter-spacing:.18em;text-transform:uppercase;text-decoration:none;border-bottom:1px solid var(--violet);padding-top:4px}
.more:hover{color:#fff}

/* HEALED */
.healed{display:grid;gap:22px;padding-top:40px;padding-bottom:90px}
.healed-copy h2{margin:14px 0 18px}
.fh{margin:0}
.fh img{width:100%}
.fh1 img{aspect-ratio:3/4;object-fit:cover}
.fh2 img{aspect-ratio:3/4;object-fit:cover}
@media (max-width:899px){.healed{grid-template-columns:1fr 1fr}.healed-copy,.fh1{grid-column:1/-1}.fh2{grid-column:2;margin-top:-140px;border:6px solid var(--ink);margin-right:calc(var(--gut)*-0.4)}}
@media (min-width:900px){.healed{grid-template-columns:1fr 1.25fr .8fr;align-items:end}.fh2{margin-bottom:-60px}}

/* STENCIL */
.stencil{--wipe-bg:var(--ink2);background:var(--ink2);padding:80px 0}
.stencil-grid{display:grid;gap:30px;align-items:center}
.stencil figure{margin:0}
.stencil img{width:100%;aspect-ratio:4/5;object-fit:cover}
.stencil h2{margin:14px 0 18px}
@media (min-width:900px){.stencil-grid{grid-template-columns:.8fr 1fr;gap:80px}}
@media (max-width:899px){.stencil figure{width:78%}}

/* PLANNER CTA */
.planner-cta{padding-top:64px;padding-bottom:72px}
.planner-cta .eyebrow{margin-top:34px}
.planner-cta h2{margin:14px 0 28px}
.quick{display:flex;flex-wrap:wrap;gap:8px}
.quick a{display:inline-flex;align-items:center;min-height:46px;padding:0 18px;border:1px solid #3a3634;text-decoration:none;font:500 15px/1 var(--sans);transition:border-color .2s,background-color .2s}
.quick a:hover{border-color:var(--violet);background:rgba(143,130,255,.08)}
.small{font-size:14px;color:var(--wash2);margin-top:18px}

/* BOOK */
.book{padding:90px 0 100px;background:var(--bone);color:var(--ink)}
.book .eyebrow{color:#5b5652}
.book h2{font-size:clamp(56px,13vw,170px);margin:12px 0 18px;letter-spacing:-.03em}
.book .phone{display:inline-block;font:italic 500 clamp(30px,6vw,64px)/1.1 var(--serif);text-decoration:none;border-bottom:2px solid var(--violet-d);margin-bottom:22px;padding:4px 0}
.book .lede{color:#3d3936}
.book a:focus-visible{outline-color:var(--violet-d)}
@media (max-width:400px){.stages li{letter-spacing:.08em;font-size:9.5px}.stages ol{gap:6px}.stages li i{margin-right:4px}}