/* ---------- reveal on scroll (motion.js adds .in) ---------- */
.js [data-reveal]{opacity:0;transform:translateY(28px);transition:opacity .9s var(--ease) var(--d,0s),transform .9s var(--ease) var(--d,0s)}
.js [data-reveal].in{opacity:1;transform:none}
.js .ul path{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1.1s var(--ease) .5s}
.js .in .ul path,.js .ul.in path{stroke-dashoffset:0}
.js [data-words] .w{opacity:.13;transition:opacity .35s linear}
.js [data-words] .w.on{opacity:1}
.js [data-write]{clip-path:inset(-10% 100% -20% 0);transition:clip-path 1.7s cubic-bezier(.5,0,.3,1) .35s,opacity .4s}
.js [data-write].in{clip-path:inset(-10% -2% -20% 0)}
@property --draw{syntax:"<number>";inherits:true;initial-value:0}
.js svg[data-draw]:not([data-draw=scrub]){transition:--draw 1.8s var(--ease) .3s,opacity .9s var(--ease),transform .9s var(--ease)}
.js svg[data-draw]:not([data-draw=scrub]).in{--draw:1}
.js svg[data-draw] :is(path,circle,line){stroke-dasharray:1;stroke-dashoffset:calc(1 - var(--draw,0))}

/* ---------- HERO: the doorway ---------- */
.hero{position:relative;background:var(--paper);--p:0;--z:0}
.hero-stage{position:relative;min-height:calc(100svh - var(--header-h));display:flex;align-items:center;overflow:hidden}
.hero-door{position:relative;width:100%;min-height:inherit;display:flex;align-items:center}
.door-scene{position:absolute;inset:0;pointer-events:none}
.door-3d{position:absolute;inset:0;opacity:0;transform:scale(1.015);transition:opacity .9s var(--ease),transform 1.2s var(--ease)}
.door-3d canvas{width:100%;height:100%}
.has-3d .door-3d{opacity:1;transform:none}
.door-2d{position:absolute;bottom:0;right:clamp(0px,7vw,120px);height:min(80%,640px);aspect-ratio:400/520;overflow:visible;transform-origin:50% 64%;will-change:transform;transition:opacity .5s}
/* a device that is getting the 3D door never sees the flat one: just the floor it will stand on */
.js.wants-3d .door-2d{opacity:0}
.hero.has-3d .door-2d{opacity:0}   /* belt and braces: never show both doors */
.js.wants-3d .door-scene::after{content:"";position:absolute;left:0;right:0;bottom:15%;height:1px;background:var(--line);opacity:.5;transition:opacity .6s}
.js.wants-3d .has-3d .door-scene::after,.hero.has-3d .door-scene::after{opacity:0}
.door-copy{position:relative;z-index:2;padding-block:48px}
.door-copy>*{max-width:min(36rem,54%)}
.hero-title{font-size:var(--fs-hero);line-height:.98;letter-spacing:-.03em}
.hero-title em{display:block}
.door-copy .lede{margin-top:1.6rem;max-width:min(30rem,50%)}
.scroll-cue{display:none;align-items:center;gap:.8em;font-size:var(--fs-small);font-weight:600;color:var(--ink-2)}
.scroll-cue i{position:relative;width:1px;height:38px;background:var(--line);overflow:hidden}
.scroll-cue i::after{content:"";position:absolute;inset:0;background:var(--oxblood);animation:cue 2.2s var(--ease) infinite}
@keyframes cue{0%{transform:translateY(-100%)}60%,100%{transform:translateY(100%)}}
/* idle life in the 2D door */
.door-v{animation:bob 5s ease-in-out infinite;transform-box:fill-box;transform-origin:center}
@keyframes bob{50%{transform:translateY(-7px)}}

/* pinned mode: scroll walks you through the door */
.hero.is-pinned{height:190vh}
.is-pinned .hero-stage{position:sticky;top:var(--header-h);height:calc(100svh - var(--header-h));min-height:0}
.is-pinned .hero-door{height:100%;min-height:0}
.is-pinned .scroll-cue{display:inline-flex}
.is-pinned .door-copy{opacity:clamp(0,calc((.46 - var(--p))*7),1);transform:translateY(calc(var(--p)*-90px))}
.is-pinned .door-2d{transform:scale(calc(1 + var(--z)*var(--z)*var(--z)*46))}
.is-pinned .hero-door::after{content:"";position:absolute;inset:0;z-index:3;background:#FBF8F1;opacity:clamp(0,calc((var(--p) - .45)*8),1);pointer-events:none}
.hero.is-pinned+.hero-letter{margin-top:-98vh;padding-top:2vh;position:relative;z-index:4;background:linear-gradient(rgba(251,248,241,0) 98vh,#FBF8F1 98vh,#FBF8F1 80%,var(--paper))}
.hero.is-pinned:not(.through)+.hero-letter{pointer-events:none}
.hero.is-pinned:not(.through)+.hero-letter [data-reveal]{opacity:0;transform:translateY(28px)}

/* ---------- HERO on a phone, or any tablet held upright: the words first, then the doorway in a box ---------- */
@media (max-width:820px), (max-width:1100px) and (orientation:portrait){
  .hero-stage{min-height:calc(100svh - var(--header-h))}
  .hero-door{align-items:stretch;display:flex;flex-direction:column}
  .door-copy{order:0;min-width:0;width:100%;display:block;padding-block:clamp(16px,3.5svh,40px) 0}
  .door-copy>*,.door-copy .lede{max-width:100%}
  .hero-title{font-size:clamp(2.5rem,10.2vw,3.5rem);line-height:1;letter-spacing:-.032em;text-wrap:pretty}
  .door-copy .lede{margin-top:.9rem;max-width:24em;font-size:1rem}
  .door-copy .ctas{margin-top:1.3rem;gap:.7rem 1.2rem}
  .scroll-cue,.is-pinned .scroll-cue{display:none}
  /* the scene box: fills what is left below the words, never taller than it is wide plus a bit */
  .door-scene{order:1;position:relative;inset:auto;flex:1 1 auto;min-height:240px;max-height:min(118vw,520px);margin-top:12px;pointer-events:none}
  .door-3d{position:absolute;inset:0;z-index:0}
  .door-2d{right:0;left:0;bottom:0;margin-inline:auto;width:min(96vw,420px);height:100%;aspect-ratio:auto}
  .is-pinned .door-2d{transform:scale(calc(1 + var(--z)*var(--z)*var(--z)*30))}
  .js.wants-3d .door-scene::after{display:none}
  .is-pinned .door-copy{transform:translateY(calc(var(--p)*-60px))}
}

/* ---------- through the door: the letter ---------- */
.hero-letter{background:linear-gradient(#FBF8F1,var(--paper));padding-block:clamp(48px,8vw,110px) var(--sec)}
.letter-grid{display:grid;gap:clamp(2rem,6vw,5.5rem);align-items:start}
@media (min-width:820px){.letter-grid{grid-template-columns:minmax(220px,.62fr) 1fr}}
.arch-card{max-width:min(360px,64vw)}
.arch-frame{position:relative;aspect-ratio:4/5.1;border-radius:999px 999px 10px 10px;overflow:hidden;background:linear-gradient(170deg,#DDD5C7,#C7BDAC)}
.arch-frame::after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 0 0 1px rgba(23,24,28,.08)}
.arch-frame img{width:100%;height:100%;object-fit:cover;object-position:50% 20%;transform:scale(1.06);transition:transform 1.6s var(--ease)}
.in .arch-frame img,.arch-frame:hover img{transform:scale(1)}
.arch-card figcaption{margin-top:1.1rem;font-size:var(--fs-small);color:var(--ink-2);line-height:1.4}
.arch-card figcaption b{display:block;font-family:var(--fraunces);font-weight:600;font-size:1.25rem;color:var(--ink);letter-spacing:-.01em}
.letter-copy{position:relative;padding-top:clamp(0px,3vw,40px)}
.quote-mark{display:block;font-family:var(--fraunces);font-weight:600;font-size:clamp(4rem,8vw,7rem);line-height:.6;color:var(--oxblood);height:.42em}
.letter-line{font-size:var(--fs-h2);max-width:16em}
.letter-copy .lede{margin-top:1.6rem}
.letter-copy .sig{margin-top:1.8rem}

/* ---------- ticker ---------- */
.ticker{overflow:hidden;border-block:1px solid var(--line);padding-block:1.15rem;background:var(--paper)}
.ticker ul{display:flex;width:max-content;gap:0;animation:tick 48s linear infinite}
.ticker:hover ul,.ticker:focus-within ul{animation-play-state:paused}
.ticker li{display:flex;align-items:center;white-space:nowrap;font-family:var(--fraunces);font-weight:500;font-style:italic;font-size:clamp(1.15rem,1rem + .9vw,1.6rem);letter-spacing:-.01em}
.ticker li::after{content:"";width:.5em;height:.62em;margin-inline:1.3em;border:2px solid var(--oxblood);border-bottom:0;border-radius:999px 999px 0 0}
@keyframes tick{to{transform:translateX(-50%)}}
html:not(.js) .ticker ul,.no-motion .ticker ul{animation:none;flex-wrap:wrap;width:auto;padding-inline:var(--pad-l) var(--pad-r);row-gap:.4rem}

/* ---------- statement ---------- */
.statement-text{font-size:clamp(1.9rem,1.1rem + 3.4vw,4rem);line-height:1.12;max-width:20em;font-weight:500}
.statement-text em{font-weight:500}

/* ---------- clusters ---------- */
@media (min-width:900px){.sticky-head{position:sticky;top:calc(var(--header-h) + 48px)}}
.sec-head .lnk{justify-self:start}
.clusters{border-top:1px solid var(--ink)}
.cluster{border-bottom:1px solid var(--line);interpolate-size:allow-keywords}
.cluster summary{display:grid;grid-template-columns:3rem 1fr auto;align-items:center;gap:.5rem;padding:1.5rem 0;cursor:pointer;list-style:none;transition:padding .35s var(--ease),color .2s}
.cluster summary::-webkit-details-marker{display:none}
.cluster summary:hover{padding-left:.6rem;color:var(--oxblood)}
.cluster .n{font-size:var(--fs-small);font-weight:600;color:var(--oxblood)}
.cluster .t{font-family:var(--fraunces);font-weight:600;font-size:var(--fs-h3);letter-spacing:-.012em;line-height:1.2}
.cluster summary i{position:relative;width:18px;height:18px;flex:none}
.cluster summary i::before,.cluster summary i::after{content:"";position:absolute;left:0;right:0;top:8px;height:2px;background:currentColor;border-radius:2px;transition:transform .35s var(--ease)}
.cluster summary i::after{transform:rotate(90deg)}
.cluster[open] summary i::after{transform:rotate(0)}
.cluster::details-content{block-size:0;overflow:hidden;transition:block-size .45s var(--ease),content-visibility .45s allow-discrete}
.cluster[open]::details-content{block-size:auto}
.cluster ul{padding:0 0 1.7rem 3.5rem;display:grid;gap:.55rem;color:var(--ink-2)}
.cluster li{position:relative;padding-left:1.2rem}
.cluster li::before{content:"";position:absolute;left:0;top:.62em;width:.5rem;height:1px;background:var(--oxblood)}
.cluster-note{margin:-.6rem 0 1.8rem 3.5rem;padding:.9rem 1.1rem;border-left:2px solid var(--oxblood);background:var(--paper-2);border-radius:0 8px 8px 0;font-size:var(--fs-small);line-height:1.55;color:var(--ink-2);max-width:34rem}
@media (max-width:560px){.cluster ul{padding-left:0}.cluster-note{margin-left:0}}

/* ---------- approaches: the arch-family shapes ---------- */
.approaches{display:grid;gap:clamp(14px,1.6vw,22px);grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr))}
.approach{display:grid;gap:.7rem;align-content:start;height:100%;padding:clamp(22px,2.4vw,34px);border-radius:var(--radius);background:var(--paper);text-decoration:none;transition:transform .45s var(--ease),box-shadow .45s var(--ease)}
.approach:hover{transform:translateY(-6px);box-shadow:0 24px 40px -28px rgba(23,24,28,.55)}
.approach h3{margin-top:.6rem}
.approach p{color:var(--ink-2);font-size:.97rem}
.shape{width:92px;height:92px;overflow:visible}
.shape *{transform-box:fill-box;transform-origin:50% 100%;transition:transform .7s var(--ease)}
@media (max-width:640px){.approach{grid-template-columns:72px 1fr;column-gap:1.1rem}.approach .shape{width:72px;height:72px;grid-row:span 2}.approach h3{margin-top:0}}
/* idle motion, so the page is never quite still */
.s-arts .a2{animation:breathe 6s ease-in-out infinite}
.s-arts .a3{animation:breathe 6s ease-in-out -2s infinite}
.s-meaning .sun{animation:rise 7s ease-in-out infinite;transform-origin:50% 50%}
.s-emotion .top{animation:part-up 6s ease-in-out infinite}
.s-emotion .bot{animation:part-down 6s ease-in-out infinite}
.s-skills .c1{animation:breathe 5s ease-in-out infinite}
.s-skills .c2{animation:breathe 5s ease-in-out -1.2s infinite}
.s-skills .c3{animation:breathe 5s ease-in-out -2.4s infinite}
.s-body .dome{animation:breathe 6s ease-in-out infinite}
.s-body .r1,.s-body .r2,.s-body .r3{transform-origin:50% 50%;animation:ripple 5s ease-in-out infinite}
.s-body .r2{animation-delay:-.5s}.s-body .r3{animation-delay:-1s}
.s-self .inner{animation:breathe 6s ease-in-out infinite}
@keyframes breathe{50%{transform:scaleY(1.07)}}
@keyframes rise{50%{transform:translateY(-10px)}}
@keyframes part-up{50%{transform:translateY(-4px)}}
@keyframes part-down{50%{transform:translateY(4px)}}
@keyframes ripple{50%{transform:scaleX(1.14)}}
.approach:hover .s-arts .a1{transform:scale(1.04)}
.approach:hover .s-arts .a3{transform:scaleY(1.25)}
.approach:hover .s-meaning .sun{transform:translateY(-22px) scale(1.1);animation:none}
.approach:hover .s-emotion .top{transform:translateY(7px);animation:none}
.approach:hover .s-emotion .bot{transform:translateY(-7px);animation:none}
.approach:hover .s-skills .c1{transform:scaleY(1.5);animation:none}
.approach:hover .s-skills .c2{transform:scaleY(1.2);animation:none}
.approach:hover .s-body .dome{transform:translateY(-5px);animation:none}
.approach:hover .s-body .r1{transform:scaleX(1.04);animation:none}
.approach:hover .s-body .r2{transform:scaleX(1.65);animation:none}
.approach:hover .s-body .r3{transform:scaleX(3.9);animation:none}
.approach:hover .s-self .inner{transform:scale(1.3);animation:none}

/* ---------- first session: pinned horizontal walk ---------- */
.steps-sec{position:relative;background:var(--paper);border-top:1px solid var(--line)}
.steps-stage{overflow:hidden}
.steps-track{display:grid;gap:clamp(48px,8vw,80px);padding:var(--sec) var(--pad-r) var(--sec) var(--pad-l)}
.step{display:grid;gap:1.6rem;align-content:center}
.step-intro h2{margin-bottom:1.2rem}
.steps-hint{display:none}
.ink{width:100%;max-width:420px;height:auto;overflow:visible}
.ink :is(path,circle,line){fill:none;stroke:var(--ink);stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.ink .ox{stroke:var(--oxblood)}
.step-copy{display:grid;gap:.7rem;max-width:30rem}
.step-copy .n{font-family:var(--fraunces);font-style:italic;font-weight:500;font-size:1.5rem;color:var(--oxblood)}
.step-copy p{color:var(--ink-2)}
.step-copy .btn{justify-self:start;margin-top:.8rem}
.step-art{display:grid;gap:1.4rem;align-items:end}
.step-pic{display:block;border-radius:999px 999px 10px 10px;overflow:hidden;aspect-ratio:4/4.6;max-width:300px}
.step-pic img{width:100%;height:100%;object-fit:cover;object-position:62% 40%}
@media (min-width:560px){.step-art{grid-template-columns:1.1fr .9fr}}

.steps-sec.is-pinned{height:calc(100svh + var(--travel,0px))}
.is-pinned .steps-stage{position:sticky;top:var(--header-h);height:calc(100svh - var(--header-h));display:flex;align-items:center}
.is-pinned .steps-track{display:flex;align-items:center;gap:clamp(60px,8vw,140px);width:max-content;padding-block:0;padding-right:18vw;transform:translate3d(calc(var(--p,0) * var(--travel,0px) * -1),0,0);will-change:transform}

/* The walk above is driven by JavaScript writing --p on every scroll frame. That runs on
   the main thread, and iOS does not deliver scroll events evenly during momentum, so the
   track lurches once the finger leaves the glass. Where the browser understands scroll
   timelines it drives the same movement off the main thread instead, which the compositor
   keeps in step with the scroll no matter how the events arrive. Older browsers keep the
   JavaScript path unchanged. */
@supports (animation-timeline: view()) {
  .steps-sec.is-pinned{view-timeline-name:--steps;view-timeline-axis:block}
  .is-pinned .steps-track{
    animation-name:steps-walk;
    animation-duration:auto;        /* the shorthand would set 0s, which a scroll timeline cannot use */
    animation-timing-function:linear;
    animation-fill-mode:both;
    animation-timeline:--steps;
    animation-range:contain 0% contain 100%}
  .is-pinned .steps-bar i{
    animation-name:steps-bar;
    animation-duration:auto;
    animation-timing-function:linear;
    animation-fill-mode:both;
    animation-timeline:--steps;
    animation-range:contain 0% contain 100%}
  /* @keyframes steps-walk is written by motion.js in literal pixels: see layout() */
  @keyframes steps-bar{from{transform:scaleX(0)}to{transform:scaleX(1)}}
}
.is-pinned .step{flex:none;width:min(480px,78vw)}
@media (max-height:780px){.is-pinned .ink,.is-pinned .step-pic{height:min(24vh,190px)}.is-pinned .step{gap:1.1rem}}
@media (max-height:700px){.is-pinned .ink,.is-pinned .step-pic{height:min(19vh,140px)}.is-pinned .step-copy{gap:.5rem}}
.is-pinned .step-intro{width:min(520px,80vw)}
.is-pinned .step-photo{width:min(720px,86vw)}
.is-pinned .steps-hint{display:inline-flex;align-items:center;gap:.6em;margin-top:2rem;font-size:var(--fs-small);font-weight:600;color:var(--oxblood)}
.steps-hint svg{width:1.2em;height:1.2em;animation:nudge 1.8s var(--ease) infinite}
@keyframes nudge{50%{transform:translateX(6px)}}
.is-pinned .steps-stage{padding-top:48px}
.is-pinned .steps-stage::before{content:"";position:absolute;left:0;top:0;bottom:0;width:calc(var(--rule-x) + 16px);background:linear-gradient(90deg,var(--paper) 70%,rgba(243,238,228,0));z-index:2}
.is-pinned .ink{height:min(32vh,280px);width:auto;max-width:100%}
.is-pinned .step-art{grid-template-columns:auto auto;justify-content:start;gap:2.5rem}
.is-pinned .step-pic{height:min(32vh,280px);max-width:none;aspect-ratio:4/4.6}
.is-pinned .steps-track{align-items:flex-start}
.steps-bar{position:absolute;left:var(--pad-l);right:var(--pad-r);top:28px;height:2px;background:var(--line)}
.steps-bar i{display:block;height:100%;background:var(--oxblood);transform-origin:left;transform:scaleX(var(--p,0))}

/* ---------- formats ---------- */
.formats{border-top:1px solid var(--ink)}
.formats a{display:grid;grid-template-columns:3rem minmax(0,1.1fr) minmax(0,1.4fr) 2rem;align-items:center;gap:1rem;padding:clamp(1.3rem,2.4vw,2.1rem) 0;border-bottom:1px solid var(--line);text-decoration:none;transition:padding .4s var(--ease),background .3s}
.formats a:hover{padding-inline:1.2rem;background:var(--paper-2)}
.formats .n{font-size:var(--fs-small);font-weight:600;color:var(--oxblood)}
.formats b{font-family:var(--fraunces);font-weight:600;font-size:clamp(1.4rem,1.1rem + 1.4vw,2.2rem);letter-spacing:-.02em;line-height:1.1}
.formats .d{color:var(--ink-2)}
.formats svg{width:1.6rem;height:1.6rem;color:var(--oxblood);transition:transform .4s var(--ease)}
.formats a:hover svg{transform:translateX(6px)}
@media (max-width:720px){.formats a{grid-template-columns:2.2rem 1fr 1.6rem}.formats .d{grid-column:2/3;grid-row:2}.formats svg{grid-row:1/3;grid-column:3}}

/* ---------- the letter ---------- */
.letter{position:relative;max-width:50rem;margin-inline:auto;padding:clamp(28px,5vw,72px) clamp(24px,5vw,72px) clamp(28px,5vw,64px) clamp(44px,8vw,120px);background:#FBF8F1;border-radius:6px;box-shadow:0 1px 0 rgba(23,24,28,.06),0 40px 60px -50px rgba(23,24,28,.5)}
.letter::before{content:"";position:absolute;left:clamp(24px,4.5vw,72px);top:0;bottom:0;width:1px;background:rgba(123,35,50,.45)}
.letter-open{font-size:var(--fs-h2);margin-bottom:1.6rem}
.letter .sig{margin-top:2rem;display:inline-block}

/* ---------- forms ---------- */
.waitlist{align-self:center;display:grid;gap:.7rem}
.waitlist label,.email-extra label,.field label{font-size:var(--fs-small);font-weight:600}
.field-row{display:flex;flex-wrap:wrap;gap:.7rem}
.field-row input{flex:1 1 220px}
input[type=text],input[type=email],input[type=tel],textarea,select.plain{width:100%;padding:.95em 1.3em;border:1px solid rgba(23,24,28,.28);border-radius:999px;background:var(--paper);outline-offset:2px;transition:border-color .2s,box-shadow .2s}
textarea{border-radius:18px;min-height:8rem;resize:vertical}
input:focus,textarea:focus,select:focus{border-color:var(--oxblood);box-shadow:0 0 0 3px rgba(123,35,50,.14);outline:none}
.form-note{font-size:var(--fs-small);color:var(--ink-2)}
.form-note.err{color:var(--oxblood);font-weight:600}
.form-note.ok{color:#2F5A3A;font-weight:600}
.field{display:grid;gap:.45rem}
.fields{display:grid;gap:1.1rem}
@media (min-width:640px){.fields.two{grid-template-columns:1fr 1fr}}

.sentence-line{font-size:clamp(1.5rem,.9rem + 2.3vw,2.75rem);line-height:1.55;font-weight:500;max-width:24em}
.blank{display:inline-block;vertical-align:baseline;max-width:calc(100% - .8em)}
.sentence .blank input,.sentence .blank select{width:9ch;min-width:2ch;max-width:100%;padding:0 .1em .05em;border:0;border-bottom:2px dashed var(--oxblood);border-radius:0;background:transparent;font-family:var(--fraunces);font-style:italic;font-weight:500;font-size:inherit;line-height:1.2;color:var(--oxblood);box-shadow:none}
.nw{white-space:nowrap}
/* .blank is an inline-block, so the line may break between it and the full stop that
   follows. Letting .nw wrap on small screens stranded that stop at the start of the
   next line. The blank is capped instead, leaving room for the stop beside it: the cap
   has to sit here rather than on the field, because the field's containing block is the
   blank itself, where a percentage would only resolve to its own width. */
.sentence .blank select{width:auto;padding-right:.2em;cursor:pointer;appearance:none;-webkit-appearance:none}
.sentence .blank input::placeholder{color:rgba(123,35,50,.42)}
.sentence .blank input:focus,.sentence .blank select:focus{border-bottom-style:solid;outline:none;box-shadow:none}
.sentence .blank input.bad{border-bottom-color:#B3261E;background:rgba(179,38,30,.06)}
button.lnk{border:0;background-color:transparent;cursor:pointer;font:inherit;font-weight:600}
.sentence .form-note{margin-top:1.4rem}

/* ---------- inner pages ---------- */
.page-head{position:relative;overflow:hidden}
.page-head .deco{position:absolute;right:clamp(-20px,4vw,80px);bottom:9%;width:auto;height:min(clamp(150px,24vw,360px),62%);aspect-ratio:1;opacity:.9;pointer-events:none}  /* sized to sit inside the header, whatever length the heading is */
.page-head .deco path{fill:none;stroke:var(--sage);stroke-width:9;stroke-linecap:round}
.page-head .deco .v{stroke:var(--oxblood)}
@media (min-width:761px){.page-head .wrap>*{max-width:calc(100% - clamp(230px,31vw,450px))}}
@media (max-width:760px){.page-head .deco{display:none}}

.facts{display:grid;gap:0;border-top:1px solid var(--ink)}
.facts>div{display:grid;gap:.3rem 2rem;padding:1.3rem 0;border-bottom:1px solid var(--line)}
@media (min-width:640px){.facts>div{grid-template-columns:12rem 1fr}}
.facts dt{font-size:var(--fs-small);font-weight:600;color:var(--oxblood)}
.facts dd{margin:0}

.principles{display:grid;gap:0;counter-reset:p}
.principles li{counter-increment:p;display:grid;grid-template-columns:3rem 1fr;gap:.5rem;padding:1.25rem 0;border-bottom:1px solid var(--line);font-family:var(--fraunces);font-weight:500;font-size:var(--fs-h3);letter-spacing:-.012em;line-height:1.25}
.principles li::before{content:"0" counter(p);font-family:var(--jakarta);font-size:var(--fs-small);font-weight:600;color:var(--oxblood);padding-top:.5em}
.on-stone .principles li{border-color:rgba(23,24,28,.2)}

.method{display:grid;gap:clamp(1.5rem,5vw,5rem);align-items:center;padding-block:clamp(40px,6vw,84px);border-bottom:1px solid var(--line)}
@media (min-width:820px){.method{grid-template-columns:minmax(0,4fr) minmax(0,7fr)}.method:nth-child(even) .method-art{order:2}.method:nth-child(even){grid-template-columns:minmax(0,7fr) minmax(0,4fr)}}
.method-art{display:grid;place-items:center;aspect-ratio:1/1;max-width:340px;width:100%;border-radius:999px 999px 12px 12px;background:var(--paper-2)}
.method-art .shape{width:46%;height:auto}
.method h2{font-size:clamp(1.7rem,1.2rem + 1.8vw,2.6rem);margin-bottom:1rem}
.method .tags{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1.4rem}
.tags span{padding:.45em 1em;border-radius:999px;background:var(--stone);font-size:var(--fs-small);font-weight:500}
.on-stone .tags span{background:var(--paper)}

.acc{border-top:1px solid var(--ink)}
.acc details{border-bottom:1px solid var(--line);interpolate-size:allow-keywords}
.acc summary{display:grid;grid-template-columns:1fr auto;align-items:center;gap:1rem;padding:clamp(1.3rem,2.4vw,2rem) 0;cursor:pointer;list-style:none;font-family:var(--fraunces);font-weight:600;font-size:clamp(1.35rem,1.1rem + 1.2vw,2.1rem);letter-spacing:-.018em;line-height:1.15;transition:color .2s,padding .35s var(--ease)}
.acc.small summary{font-size:var(--fs-h3);padding:1.3rem 0}
.acc summary::-webkit-details-marker{display:none}
.acc summary:hover{color:var(--oxblood);padding-left:.5rem}
.acc summary i{position:relative;width:20px;height:20px}
.acc summary i::before,.acc summary i::after{content:"";position:absolute;left:0;right:0;top:9px;height:2px;background:currentColor;border-radius:2px;transition:transform .35s var(--ease)}
.acc summary i::after{transform:rotate(90deg)}
.acc details[open] summary i::after{transform:rotate(0)}
.acc details::details-content{block-size:0;overflow:hidden;transition:block-size .45s var(--ease),content-visibility .45s allow-discrete}
.acc details[open]::details-content{block-size:auto}
.acc-body{display:grid;gap:1.5rem 4rem;padding:0 0 2.2rem;max-width:62rem}
@media (min-width:820px){.acc-body.cols{grid-template-columns:1.3fr 1fr}}
.acc-body .prose{color:var(--ink-2)}
.ticks{display:grid;gap:.6rem;align-content:start}
.ticks li{position:relative;padding-left:1.5rem}
.ticks li::before{content:"";position:absolute;left:0;top:.45em;width:.6rem;height:.7rem;border:2px solid var(--oxblood);border-bottom:0;border-radius:999px 999px 0 0}

.cards{display:grid;gap:clamp(14px,1.6vw,22px);grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr))}
.card{padding:clamp(22px,2.4vw,32px);border-radius:var(--radius);background:var(--paper);display:grid;gap:.6rem;align-content:start}
.on-stone .card{background:var(--paper)}
.card p{color:var(--ink-2);font-size:.97rem}
.card .soon{justify-self:start;font-size:.75rem;font-weight:700;letter-spacing:.04em;color:var(--oxblood);border:1px solid currentColor;border-radius:999px;padding:.25em .8em}

.contact-ways{display:grid;gap:0;border-top:1px solid var(--ink)}
.contact-ways a,.contact-ways div{display:grid;gap:.2rem;padding:1.3rem 0;border-bottom:1px solid var(--line);text-decoration:none}
.contact-ways span{font-size:var(--fs-small);font-weight:600;color:var(--oxblood)}
.contact-ways b{font-family:var(--fraunces);font-weight:600;font-size:var(--fs-h3);letter-spacing:-.012em}
.contact-ways a:hover b{color:var(--oxblood)}

.notice{padding:1.4rem 1.6rem;border-left:2px solid var(--oxblood);background:var(--paper-2);border-radius:0 10px 10px 0;max-width:46rem}
.legal-prose{max-width:44rem}
.legal-prose h2{font-size:var(--fs-h3);margin:2.4rem 0 .8rem;font-variation-settings:"opsz" 48}
.legal-prose p+p,.legal-prose ul{margin-top:.9rem}
.legal-prose ul{list-style:disc;padding-left:1.2rem;display:grid;gap:.4rem}

.cta-band{text-align:left}
.cta-band h2{max-width:16em}

.tags{display:flex;flex-wrap:wrap;gap:.5rem}
.bring{display:grid;gap:0 2.5rem;border-top:1px solid var(--ink)}
@media (min-width:620px){.bring{grid-template-columns:1fr 1fr}}
.bring li{position:relative;padding:.95rem 0 .95rem 1.6rem;border-bottom:1px solid rgba(23,24,28,.18);line-height:1.4}
.bring li::before{content:"";position:absolute;left:0;top:1.35em;width:.6rem;height:.7rem;border:2px solid var(--oxblood);border-bottom:0;border-radius:999px 999px 0 0}

.method:hover .s-arts .a3{transform:scaleY(1.25)}
.method:hover .s-meaning .sun{transform:translateY(-22px) scale(1.1);animation:none}
.method:hover .s-emotion .top{transform:translateY(7px);animation:none}
.method:hover .s-emotion .bot{transform:translateY(-7px);animation:none}
.method:hover .s-skills .c1{transform:scaleY(1.5);animation:none}
.method:hover .s-skills .c2{transform:scaleY(1.2);animation:none}
.method:hover .s-body .dome{transform:translateY(-5px);animation:none}
.method:hover .s-body .r2{transform:scaleX(1.65);animation:none}
.method:hover .s-body .r3{transform:scaleX(3.9);animation:none}
.method:hover .s-self .inner{transform:scale(1.3);animation:none}

/* ---------- 404 ---------- */
.nf{min-height:calc(100svh - var(--header-h));display:flex;align-items:center;padding-block:clamp(48px,8vw,96px)}
.nf-grid{display:grid;gap:clamp(2rem,6vw,6rem);align-items:center}
@media (min-width:860px){.nf-grid{grid-template-columns:minmax(0,6fr) minmax(0,4fr)}}
.nf-copy .lede{margin-top:1.6rem}
.nf-links{display:flex;flex-wrap:wrap;gap:.5rem 1.6rem;margin-top:2.6rem;padding-top:1.4rem;border-top:1px solid var(--line);font-weight:500}
.nf-links a{text-decoration:none;padding:.2em 0;border-bottom:1px solid transparent;transition:color .2s,border-color .2s}
.nf-links a:hover{color:var(--oxblood);border-color:currentColor}
.nf-art{position:relative;justify-self:center;width:min(100%,340px)}
.nf-art svg{width:100%;height:auto;overflow:visible}
.nf-art path{fill:none;stroke-linecap:round}
.nf-art .arch{stroke:var(--sage);stroke-width:16}
.nf-art .floor{stroke:var(--line);stroke-width:2}
.nf-num{position:absolute;left:0;right:0;top:46%;text-align:center;font-family:var(--fraunces);font-style:italic;font-weight:500;font-variation-settings:"opsz" 144;font-size:clamp(3.4rem,9vw,5.6rem);letter-spacing:-.03em;line-height:1;color:var(--oxblood);animation:bob 5s ease-in-out infinite}
@media (max-width:859px){.nf-art{order:-1;width:min(52vw,220px);justify-self:start}.nf{align-items:flex-start}}

.hp{position:absolute!important;left:-9999px;width:1px;height:1px;opacity:0;pointer-events:none}

/* ---------- international ---------- */
.big-ticks{gap:1rem;font-size:var(--fs-lede);line-height:1.5}
.big-ticks li{padding-left:2rem}
.big-ticks li::before{top:.5em;width:.75rem;height:.9rem}
.intl-band .split{align-items:center}
.intl-art{width:min(100%,300px);justify-self:center;overflow:visible}
.intl-art :is(path,circle,ellipse){fill:none;stroke:var(--stone);stroke-width:2.5}
.intl-art circle{stroke:rgba(23,24,28,.28)}
.intl-art .ox{stroke:var(--oxblood);stroke-width:8;stroke-linecap:round;stroke-linejoin:round}
.intl-art .sage{stroke:var(--sage);stroke-width:8;stroke-linecap:round;stroke-linejoin:round}
@media (max-width:860px){.intl-art{width:min(52vw,220px);justify-self:start}}

/* ---------- first session on a phone: swipe through the four steps ---------- */
/* proximity rather than mandatory: the cards are different widths (285-323px on a
   375px screen), so mandatory snapping made every flick travel a different distance
   and feel as though it were being grabbed. Proximity lets a flick glide and settles
   only when it ends up near a card. */
@media (max-width:899px){
  /* These are the swipe-it-yourself fallback. When the section pins, the track is driven
     by scroll instead, so none of this may apply or the two fight each other. */
  .steps-sec:not(.is-pinned) .steps-stage{overflow:visible;position:relative}
  .steps-sec:not(.is-pinned) .steps-track{scroll-padding-inline:var(--pad-l)}
  .steps-sec:not(.is-pinned) .steps-track{display:flex;flex-direction:row;align-items:flex-start;gap:clamp(18px,5vw,28px);
    overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x proximity;scrollbar-width:none;
    padding:calc(var(--sec) * .6) var(--pad-r) calc(var(--sec) * .6) var(--pad-l)}
  .steps-sec:not(.is-pinned) .steps-track::-webkit-scrollbar{display:none}
  .steps-sec:not(.is-pinned) .steps-track>*{flex:0 0 min(76vw,330px);scroll-snap-align:center}
  .steps-sec:not(.is-pinned) .step-intro{flex-basis:min(80vw,340px)}
  .steps-sec:not(.is-pinned) .step-photo{flex-basis:min(86vw,370px)}
  .step .ink{height:min(26svh,190px);width:auto;max-width:100%}
  .step-art{grid-template-columns:1fr 1fr;align-items:end;gap:1rem}
  .step-pic{aspect-ratio:4/4.8;max-width:100%}
  .steps-hint{display:inline-flex;align-items:center;gap:.6em;margin-top:1.6rem;font-size:var(--fs-small);font-weight:600;color:var(--oxblood)}
  .steps-hint svg{width:1.2em;height:1.2em;animation:nudge 1.8s var(--ease) infinite}
  .step-copy .btn{margin-top:1rem}
}

/* ---------- tablets: the same hero, at a size that suits the screen ---------- */
@media (min-width:600px) and (max-width:899px), (min-width:900px) and (max-width:1100px) and (orientation:portrait){
  .hero-door{--band:clamp(320px,46svh,520px)}
  .hero-title{font-size:clamp(3.1rem,7vw,4.4rem)}
  .door-copy .lede{font-size:1.1rem;max-width:30em}
}

/* ---------- the collaboration line under the waitlist ---------- */
.collab{grid-column:1/-1;margin-top:clamp(26px,4.5vw,44px);padding-top:1.5rem;border-top:1px solid rgba(23,24,28,.22)}
.collab p{max-width:62rem;font-size:.97rem;line-height:1.6;color:var(--ink-2)}
.collab b{color:var(--ink);font-weight:600}
.collab a{color:var(--oxblood);font-weight:600;text-decoration:none;background:linear-gradient(currentColor,currentColor) 0 100%/100% 1px no-repeat;padding-bottom:2px;transition:background-size .3s var(--ease)}
.collab a:hover{background-size:0 1px;background-position:100% 100%}

/* ---- About: the room band. A wide, arch-topped photograph between the story and the principles. ---- */
.room-band{margin:0}
.room-band picture{display:block;overflow:hidden;border-radius:clamp(110px,20vw,240px) clamp(110px,20vw,240px) 12px 12px}
.room-band img{display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;object-position:62% 45%}
.room-band figcaption{margin-top:1.1rem;font-size:var(--fs-small);color:var(--ink-2);line-height:1.4;max-width:34rem}
@media (min-width:900px){.room-band img{aspect-ratio:12/5}}