/* ==========================================================================
   Sections below the hero. Each one has its own composition on purpose:
   need (type-only, scroll-focus) → matters (interactive picker + image wipe)
   → approach (pinned story) → process (drawing sheet) → contact (aperture +
   two-step form) → faq (index list) → footer (oversized logotype).
   ========================================================================== */

/* ---------- shared reveal helpers ---------- */
.js [data-split] .w{display:inline-block;overflow:hidden;vertical-align:top;padding-block:.08em .16em;margin-block:-.08em -.16em}
.js [data-split] .w > i{display:inline-block;font-style:normal;transform:translateY(112%);transition:transform 1s var(--ease) calc(var(--wi) * .055s)}
.js [data-split].is-in .w > i{transform:none}
.js .clipin{clip-path:inset(0 0 100% 0);transition:clip-path 1.2s var(--ease-io)}
.js .clipin.is-in{clip-path:inset(0)}

/* ---------- C1 · need ---------- */
.need{background:var(--bone);padding-block:clamp(5rem,12vw,11rem)}
.need__grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:2rem}
.need__head{grid-column:1 / span 9}
.need__head .label{margin-bottom:1.75rem}
.need__title{font-size:clamp(2.3rem,5.6vw,5.8rem);max-width:15ch}
.questions{grid-column:4 / -1;margin-top:clamp(4rem,10vw,9rem);border-bottom:1px solid var(--ink-18)}
.q{position:relative;border-top:1px solid var(--ink-18);padding-block:1.35rem 1.5rem}
.q::before{content:"";position:absolute;inset-inline-start:calc(-1 * clamp(1rem,2vw,1.75rem));top:2.4rem;width:.5rem;height:.5rem;border-radius:50%;background:var(--kiln);transform:scale(0);transition:transform .5s var(--ease)}
.q.is-active::before{transform:scale(1)}
.q__h{font-family:var(--f-display);font-weight:300;font-size:clamp(1.7rem,3.5vw,3.4rem);line-height:1.15;letter-spacing:-.01em;color:var(--basalt);transition:color .6s var(--ease);cursor:default}
.js .q__h{color:rgba(17,18,14,.26)}
.js .q.is-active .q__h{color:var(--basalt)}
.q__note{display:grid;grid-template-rows:1fr;transition:grid-template-rows .6s var(--ease)}
.q__note > p{overflow:hidden;max-width:31rem;color:var(--ink-70);padding-top:.9rem}
.js .q__note{grid-template-rows:0fr}
.js .q.is-active .q__note{grid-template-rows:1fr}
.js .q__note > p{padding-top:0;transition:padding-top .6s var(--ease)}
.js .q.is-active .q__note > p{padding-top:.9rem}

/* ---------- C2 · matters ---------- */
.matters{background:var(--bone-2);padding-block:clamp(5rem,11vw,9rem)}
.matters__grid{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:clamp(2.5rem,7vw,7rem);align-items:start}
.matters__pick .label{margin-bottom:1.5rem}
.matters__title{font-size:clamp(2.1rem,4.4vw,4.4rem);max-width:13ch;margin-bottom:clamp(2.5rem,6vw,5rem)}
.options{border:0;margin:0;padding:0;min-width:0;border-bottom:1px solid var(--ink-18)}
.opt{display:block;position:relative;cursor:pointer;border-top:1px solid var(--ink-18)}
.opt input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.opt__row{display:flex;align-items:center;gap:1.25rem;padding:1.3rem .25rem;transition:padding-inline-start .5s var(--ease)}
.opt__pt{width:.6rem;height:.6rem;border-radius:50%;background:var(--kiln);flex:none;transform:scale(0);transition:transform .45s var(--ease)}
.opt__no{font-size:.75rem;letter-spacing:.16em;color:var(--ink-70);width:1.6rem;flex:none}
.opt__txt{font-family:var(--f-display);font-weight:300;font-size:clamp(1.5rem,2.9vw,2.6rem);line-height:1.2;color:rgba(17,18,14,.5);transition:color .35s}
.opt:hover .opt__txt{color:var(--basalt)}
.opt:hover .opt__row{padding-inline-start:.75rem}
.opt input:checked + .opt__row{padding-inline-start:.75rem}
.opt input:checked + .opt__row .opt__pt{transform:scale(1)}
.opt input:checked + .opt__row .opt__txt{color:var(--basalt)}
.opt input:focus-visible + .opt__row{outline:2px solid var(--kiln);outline-offset:-2px}

.matters__view{position:sticky;top:calc(var(--header-h) + 1.5rem);display:grid;gap:1.5rem}
.matters__frame{position:relative;aspect-ratio:4/3.4;background:var(--basalt);overflow:hidden}
.mimg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;clip-path:inset(100% 0 0 0);transition:clip-path .85s var(--ease-io)}
.mimg.is-on{clip-path:inset(0)}
.matters__panel{display:grid;gap:.9rem;min-height:15rem;align-content:start}
.matters__panel.is-swap > *{animation:fadeUp .55s var(--ease) both}
.matters__panel.is-swap > *:nth-child(2){animation-delay:.05s}
.matters__panel.is-swap > *:nth-child(3){animation-delay:.1s}
.matters__panel.is-swap > *:nth-child(4){animation-delay:.15s}
@keyframes fadeUp{from{opacity:0;transform:translateY(.7rem)}to{opacity:1;transform:none}}
.matters__h{font-family:var(--f-display);font-weight:300;font-size:clamp(1.5rem,2.2vw,2.1rem);line-height:1.2}
.matters__p{color:var(--ink-70);max-width:32rem}
.matters__fine{font-size:.8125rem;color:var(--ink-70);padding-inline-start:.9rem;border-inline-start:2px solid var(--kiln);max-width:30rem}
.matters__cta{justify-self:start;font-weight:400}

/* ---------- D · approach (pinned story) ---------- */
.approach{background:var(--basalt);color:var(--bone);position:relative}
.approach__stage{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);min-height:100vh;min-height:100svh}
.approach__media{position:relative;overflow:hidden;min-height:28rem;background:var(--basalt-2)}
.aimg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;clip-path:inset(100% 0 0 0);transform:scale(1.08);transition:clip-path 1s var(--ease-io),transform 2.2s var(--ease)}
.aimg.is-on{clip-path:inset(0);transform:none}
.approach__tick{position:absolute;top:0;bottom:0;inset-inline-end:0;width:.7rem;background:repeating-linear-gradient(to bottom,var(--bone) 0 1px,transparent 1px 14px);opacity:.4;pointer-events:none}
.approach__body{display:flex;flex-direction:column;justify-content:center;padding:clamp(4.5rem,9vw,8rem) var(--gutter);padding-inline-start:max(var(--gutter),calc((100vw - var(--max)) / 2 + var(--gutter)))}
.approach__body .label{margin-bottom:1.5rem}
.approach__title{font-size:clamp(2.2rem,4.8vw,4.9rem);max-width:13ch}
.principles{margin-top:clamp(2.5rem,6vh,5rem);display:grid;gap:2.25rem}
.principle{display:grid;grid-template-columns:auto 1fr;gap:clamp(1rem,2.5vw,2.25rem);align-items:start;padding-top:1.25rem;border-top:1px solid var(--bone-18)}
.principle__no{font-family:var(--f-display);font-weight:200;font-size:clamp(3.8rem,8vw,8rem);line-height:.82;color:var(--kiln);direction:ltr;letter-spacing:-.04em}
.principle h3{font-family:var(--f-display);font-weight:300;font-size:clamp(1.4rem,2.3vw,2.1rem);line-height:1.2;margin-bottom:.6rem}
.principle p{color:var(--bone-72);max-width:28rem}
.approach__dots{display:none}

/* sticky story mode (enabled by JS when motion is allowed) */
.approach.is-sticky{height:260vh}
.approach.is-sticky .approach__stage{position:sticky;top:0;height:100vh;height:100svh}
.approach.is-sticky .principles{position:relative;display:block;min-height:15rem}
.approach.is-sticky .principle{position:absolute;inset:0 0 auto 0;opacity:0;visibility:hidden;transform:translateY(1.25rem);transition:opacity .55s var(--ease),transform .7s var(--ease),visibility 0s .55s}
.approach.is-sticky .principle.is-active{opacity:1;visibility:visible;transform:none;transition:opacity .55s var(--ease) .15s,transform .7s var(--ease) .15s,visibility 0s}
.approach.is-sticky .approach__dots{display:flex;gap:.6rem;margin-top:clamp(1.5rem,4vh,3rem)}
.adot{width:3rem;height:1.5rem;padding:0;border:0;background:none;cursor:pointer;position:relative}
.adot::before{content:"";position:absolute;inset-inline:0;top:50%;height:2px;background:var(--bone-18);transition:background-color .4s}
.adot::after{content:"";position:absolute;inset-inline:0;top:50%;height:2px;background:var(--kiln);transform:scaleX(0);transform-origin:100% 50%;transition:transform .6s var(--ease)}
.adot.is-active::after{transform:scaleX(1)}
.adot:hover::before{background:var(--bone-72)}

/* ---------- E · process (drawing sheet) ---------- */
.process{background:var(--bone);padding-block:clamp(5rem,11vw,9rem)}
.process__grid{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(2.5rem,6vw,5rem)}
.process__head .label{margin-bottom:1.5rem}
.process__title{font-size:clamp(2.1rem,4.6vw,4.6rem);max-width:17ch}
.process__stage{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(2rem,6vw,6rem);align-items:stretch}
.process__list{display:flex;flex-direction:column;border-bottom:1px solid var(--ink-18)}
.pstep{position:relative;display:grid;grid-template-columns:auto 1fr;align-items:baseline;gap:1.5rem;width:100%;text-align:start;padding:1.6rem 0;border:0;background:none;cursor:pointer;color:rgba(17,18,14,.5);transition:color .35s}
.pstep::before{content:"";position:absolute;inset-inline:0;top:0;height:1px;background:var(--ink-18)}
.pstep::after{content:"";position:absolute;inset-inline:0;top:-.5px;height:2px;background:var(--kiln);transform:scaleX(0);transform-origin:100% 50%;transition:transform .7s var(--ease)}
.pstep.is-active::after,.pstep.is-done::after{transform:scaleX(1)}
.pstep.is-done::after{opacity:.35}
.pstep:hover{color:var(--basalt)}
.pstep.is-active{color:var(--basalt)}
.pstep__no{font-family:var(--f-display);font-weight:200;font-size:clamp(2.4rem,4vw,4rem);line-height:1;direction:ltr;transition:color .35s}
.pstep.is-active .pstep__no{color:var(--kiln-ink)}
.pstep__t{font-family:var(--f-display);font-weight:300;font-size:clamp(1.3rem,2.1vw,1.9rem);line-height:1.25}
.process__view{background:var(--basalt);color:var(--bone);padding:clamp(1.25rem,3vw,2.5rem);display:grid;grid-template-rows:1fr auto;gap:1.5rem;min-height:26rem}
.diagram{width:100%;height:100%;max-height:20rem;align-self:center}
.d{opacity:0;visibility:hidden;transition:opacity .4s,visibility 0s .4s}
.d.on{opacity:1;visibility:visible;transition:opacity .4s .1s,visibility 0s}
.ln{fill:none;stroke:var(--bone);stroke-width:1;vector-effect:non-scaling-stroke;stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset .5s}
.d.on .ln{stroke-dashoffset:0;transition:stroke-dashoffset 1.3s var(--ease-io) .1s}
.d .ln:nth-child(2){transition-delay:.2s}.d .ln:nth-child(3){transition-delay:.3s}.d .ln:nth-child(4){transition-delay:.4s}
.nd{fill:var(--basalt);stroke:var(--bone);stroke-width:1;vector-effect:non-scaling-stroke}
.pt{fill:var(--kiln);transform-box:fill-box;transform-origin:center;transform:scale(0);transition:transform .4s}
.d.on .pt{transform:scale(1);transition:transform .7s var(--ease) 1s}
.process__panels{border-top:1px solid var(--bone-18);padding-top:1.25rem;min-height:6.5rem}
.ppanel{animation:fadeUp .55s var(--ease)}
.ppanel[hidden]{display:none}
.ppanel p{color:var(--bone-72);max-width:30rem;font-size:1.0625rem}

/* ---------- F · contact ---------- */
.contact{background:var(--basalt);color:var(--bone)}
.contact__grid{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);min-height:100vh}
.contact__photo{position:relative;margin:0;min-height:22rem;overflow:hidden;background:var(--basalt-2)}
.contact__photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 50%}
.contact__photo figcaption{position:absolute;inset-inline-start:var(--gutter);bottom:1.5rem;font-size:.75rem;letter-spacing:.18em;color:var(--bone);display:flex;align-items:center;gap:.6rem}
.contact__photo figcaption::before{content:"";width:.45rem;height:.45rem;border-radius:50%;background:var(--kiln)}
.contact__body{padding:clamp(5rem,10vw,8rem) var(--gutter);padding-inline-end:max(var(--gutter),calc((100vw - var(--max)) / 2 + var(--gutter)));max-width:52rem;width:100%}
.contact__body .label{margin-bottom:1.5rem}
.contact__title{font-size:clamp(2.2rem,4.6vw,4.6rem);max-width:12ch;margin-bottom:clamp(2rem,5vw,3.5rem)}
.stepper{display:flex;align-items:center;gap:1.25rem;margin-bottom:2rem;font-size:.8125rem;letter-spacing:.12em;color:var(--bone-72)}
.stepper__bar{flex:1;height:2px;background:var(--bone-18);position:relative;overflow:hidden}
.stepper__bar i{position:absolute;inset:0;background:var(--kiln);transform-origin:100% 50%;transform:scaleX(.5);transition:transform .7s var(--ease)}
.stepper.is-done .stepper__bar i{transform:scaleX(1)}

.form{display:grid;gap:1.75rem}
.form__topic{font-size:.9375rem;color:var(--bone-72);padding-inline-start:.9rem;border-inline-start:2px solid var(--kiln)}
.form__topic strong{color:var(--bone);font-weight:400}
.form__topic-x{background:none;border:0;padding:0 .4rem;cursor:pointer;text-decoration:underline;text-underline-offset:.2em;color:var(--bone-72);font-size:.8125rem}
.fstep{display:grid;gap:1.75rem}
.fstep[hidden]{display:none}
.fstep.is-active{animation:stepIn .6s var(--ease)}
@keyframes stepIn{from{opacity:0;transform:translateX(1.25rem)}to{opacity:1;transform:none}}
.fstep.is-back{animation-name:stepBack}
@keyframes stepBack{from{opacity:0;transform:translateX(-1.25rem)}to{opacity:1;transform:none}}
.form__hint{font-size:.8125rem;color:var(--bone-72)}
.req{color:var(--kiln)}
.field label,.field legend{display:block;font-size:.9375rem;font-weight:400;color:var(--bone);margin-bottom:.4rem;padding:0}
.field input[type=text],.field input[type=tel]{width:100%;min-height:3.4rem;background:transparent;border:0;border-bottom:1px solid rgba(239,234,223,.4);border-radius:0;padding:.5rem 0;font-size:1.25rem;font-weight:300;transition:border-color .3s,box-shadow .3s;outline:none}
.field input[type=text]:hover,.field input[type=tel]:hover{border-bottom-color:var(--bone)}
.field input[type=text]:focus,.field input[type=tel]:focus{border-bottom-color:var(--kiln);box-shadow:0 1px 0 0 var(--kiln)}
.field input[type=tel]{text-align:end}
.field input::placeholder{color:rgba(239,234,223,.4)}
.field.has-error input[type=text],.field.has-error input[type=tel]{border-bottom-color:#f0a58f}
.field__err{font-size:.875rem;color:#f4b4a2;margin-top:.35rem}
.field__err:empty{display:none}
fieldset.field{border:0;margin:0;padding:0;min-width:0}
.choice__row{display:flex;flex-wrap:wrap;gap:.6rem}
.chip{position:relative;margin:0!important;cursor:pointer}
.chip input{position:absolute;opacity:0;inset:0;width:100%;height:100%;margin:0;cursor:pointer}
.chip span{display:inline-flex;align-items:center;gap:.6rem;min-height:3rem;padding:.4rem 1.3rem;border:1px solid rgba(239,234,223,.32);font-size:1rem;color:var(--bone-72);transition:background-color .3s,border-color .3s,color .3s}
.chip span::before{content:"";width:.4rem;height:.4rem;border-radius:50%;background:var(--kiln);transform:scale(0);margin-inline-end:-.6rem;width:0;transition:width .3s var(--ease),margin .3s var(--ease),transform .3s}
.chip:hover span{border-color:var(--bone)}
.chip input:checked + span{background:var(--bone);border-color:var(--bone);color:var(--basalt);font-weight:400}
.chip input:checked + span::before{transform:scale(1);width:.4rem;margin-inline-end:0}
.chip input:focus-visible + span{outline:2px solid var(--kiln);outline-offset:3px}
.field.has-error .chip span{border-color:#f0a58f}
.field .check{display:grid;grid-template-columns:auto 1fr;gap:.9rem;align-items:start;cursor:pointer;font-weight:300;position:relative;margin:0}
.check input{position:absolute;opacity:0;width:1.4rem;height:1.4rem;margin:0;cursor:pointer}
.check__box{width:1.4rem;height:1.4rem;border:1px solid rgba(239,234,223,.5);display:grid;place-items:center;margin-top:.2rem;transition:background-color .25s}
.check__box::after{content:"";width:.7rem;height:.35rem;border:solid var(--basalt);border-width:0 0 1.5px 1.5px;transform:rotate(-45deg) scale(0);margin-top:-.15rem;transition:transform .2s}
.check input:checked ~ .check__box{background:var(--bone);border-color:var(--bone)}
.check input:checked ~ .check__box::after{transform:rotate(-45deg) scale(1)}
.check input:focus-visible ~ .check__box{outline:2px solid var(--kiln);outline-offset:3px}
.check__text{font-size:.9375rem;line-height:1.6;color:var(--bone-72)}
.hp{position:absolute;inset-inline-start:-9999px;width:1px;height:1px;overflow:hidden}
.form__nav{display:flex;align-items:center;gap:1.5rem;flex-wrap:wrap}
.link--back{background:none;border:0;cursor:pointer;color:var(--bone-72);background-image:linear-gradient(currentColor,currentColor);background-repeat:no-repeat;background-position:100% 100%;background-size:100% 1px;font-size:.9375rem}
.form__status{font-size:.9375rem;color:var(--bone-72);min-height:1.4em}
.cta[aria-busy=true] .btn__label::after{content:"…"}
.success{border:1px solid var(--bone-18);padding:clamp(1.75rem,4vw,3rem);display:grid;gap:1.1rem;animation:stepIn .7s var(--ease)}
.success[hidden]{display:none}
.success .label{margin:0}
.success__title{font-family:var(--f-display);font-weight:300;font-size:clamp(1.7rem,3vw,2.6rem);line-height:1.2}
.success p{color:var(--bone-72)}
.success strong{color:var(--bone);font-weight:400}
.success__sum{display:grid;grid-template-columns:auto 1fr;gap:.35rem 1.25rem;font-size:.9375rem;border-top:1px solid var(--bone-18);padding-top:1rem}
.success__sum dt{color:var(--bone-72)}
.success__sum dd{margin:0}
.success .link{justify-self:start;color:var(--bone)}
.success:focus{outline:none}

/* ---------- G · faq ---------- */
.faq{background:var(--bone);padding-block:clamp(5rem,11vw,9rem)}
.faq__grid{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:clamp(2.5rem,7vw,7rem);align-items:start}
.faq__head{position:sticky;top:calc(var(--header-h) + 2rem)}
.faq__head .label{margin-bottom:1.5rem}
.faq__title{font-size:clamp(2.1rem,4vw,4rem);max-width:10ch}
.accordion{border-top:1px solid var(--ink-18)}
.acc-item{border-bottom:1px solid var(--ink-18)}
.acc-btn{display:grid;grid-template-columns:2.6rem 1fr auto;align-items:baseline;gap:1rem;width:100%;padding:1.5rem 0;background:none;border:0;cursor:pointer;text-align:start;transition:padding-inline-start .45s var(--ease)}
.acc-n{font-size:.75rem;letter-spacing:.16em;color:var(--ink-70);transition:color .3s}
.acc-q{font-family:var(--f-display);font-weight:300;font-size:clamp(1.2rem,2vw,1.75rem);line-height:1.3}
.acc-icon{position:relative;width:1.1rem;height:1.1rem;align-self:center}
.acc-icon::before,.acc-icon::after{content:"";position:absolute;top:50%;left:0;width:100%;height:1px;background:var(--basalt);transition:transform .45s var(--ease),background-color .3s}
.acc-icon::after{transform:rotate(90deg)}
.acc-btn:hover{padding-inline-start:.6rem}
.acc-btn:hover .acc-icon::before,.acc-btn:hover .acc-icon::after{background:var(--kiln)}
.acc-btn[aria-expanded=true] .acc-n{color:var(--kiln-ink)}
.acc-btn[aria-expanded=true] .acc-icon::after{transform:rotate(0)}
.acc-btn[aria-expanded=true] .acc-icon::before{background:var(--kiln)}
.acc-panel{display:grid;grid-template-rows:0fr;visibility:hidden;transition:grid-template-rows .5s var(--ease),visibility 0s .5s}
.acc-panel > div{overflow:hidden}
.acc-panel p{padding:0 3.6rem 1.75rem 0;max-width:40rem;color:var(--ink-70)}
.acc-item.is-open .acc-panel{grid-template-rows:1fr;visibility:visible;transition:grid-template-rows .5s var(--ease),visibility 0s}

/* ---------- footer ---------- */
.site-footer{background:var(--basalt);color:var(--bone);padding-top:clamp(4rem,8vw,7rem);padding-bottom:1.5rem;overflow:hidden}
.footer__grid{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,3fr) minmax(0,5fr);gap:2.5rem 4rem;align-items:start}
.footer__area{font-family:var(--f-display);font-weight:300;font-size:clamp(1.4rem,2.2vw,2rem);line-height:1.25}
.footer__nav ul{display:grid;gap:.15rem}
.footer__nav a{display:inline-block;text-decoration:none;color:var(--bone-72);padding-block:.3rem;transition:color .3s,transform .4s var(--ease)}
.footer__nav a:hover{color:var(--bone);transform:translateX(-.4rem)}
.footer__h{font-size:.75rem;font-weight:400;letter-spacing:.16em;color:var(--kiln);margin-bottom:.75rem}
.footer__privacy p{font-size:.9375rem;color:var(--bone-72);max-width:26rem}
.footer__logo{display:flex;justify-content:space-between;max-width:var(--max);margin:clamp(3.5rem,8vw,7rem) auto 0;padding-inline:var(--gutter);font-size:clamp(1.9rem,9.6vw,10rem);font-weight:200;letter-spacing:.04em;line-height:1;gap:0}
.footer__logo i{width:.3em;height:.3em;align-self:center}
.footer__legal{margin-top:clamp(2rem,4vw,3.5rem);padding-top:1.25rem;border-top:1px solid var(--bone-18);font-size:.8125rem;color:var(--bone-72)}

/* ---------- responsive ---------- */
@media (max-width:62rem){
  .need__grid{grid-template-columns:minmax(0,1fr);column-gap:0}
  .need__head,.questions{grid-column:1 / -1}
  .matters__grid,.process__stage,.faq__grid,.footer__grid{grid-template-columns:1fr}
  .matters__view,.faq__head{position:static}
  .footer__grid{gap:2rem}
  .approach__stage{grid-template-columns:1fr;grid-template-rows:minmax(0,38%) minmax(0,1fr)}
  .approach__media{min-height:0}
  .approach__tick{display:none}
  .approach__body{padding:1.5rem var(--gutter) 1.25rem;justify-content:flex-start}
  .approach__body .label{margin-bottom:.75rem}
  .approach__title{font-size:clamp(1.8rem,7.4vw,3rem);max-width:none}
  .principles{margin-top:1.25rem}
  .principle__no{font-size:3.2rem}
  .approach:not(.is-sticky) .approach__stage{grid-template-rows:auto;min-height:0}
  .approach:not(.is-sticky) .approach__media{height:60vw}
  .contact__grid{grid-template-columns:1fr;min-height:0}
  .contact__photo{min-height:0;aspect-ratio:16/9}
  .contact__body{max-width:none;padding-inline-end:var(--gutter)}
}
@media (max-width:40rem){
  .q::before{inset-inline-start:0;top:-.25rem;width:.4rem;height:.4rem}
  .acc-btn{grid-template-columns:2rem 1fr auto;gap:.6rem}
  .acc-panel p{padding-inline-end:2.6rem}
  .process__view{min-height:22rem}
  .opt__row{gap:.9rem}
}
@media (hover:none){
  .opt:hover .opt__row,.acc-btn:hover{padding-inline-start:0}
  .opt:hover .opt__txt{color:rgba(17,18,14,.5)}
  .opt input:checked + .opt__row .opt__txt{color:var(--basalt)}
}
@media (prefers-reduced-motion:reduce){
  .js [data-split] .w > i{transform:none}
  .js .clipin{clip-path:none}
  .mimg,.aimg{transition:none}
  .js .q__h{color:var(--basalt)}
  .js .q__note{grid-template-rows:1fr}
  .js .q__note > p{padding-top:.9rem}
}

.footer__credits{margin-top:1.5rem;font-size:.75rem;line-height:1.7;color:rgba(239,234,223,.62);max-width:var(--max)}
.footer__credits a{color:inherit;text-underline-offset:.2em}
.footer__credits a:hover{color:var(--bone)}

/* process: "what happens in this step" panel (replaces the abstract drawing) */
.process__view{background:var(--bone-2);color:var(--basalt);padding:clamp(1.5rem,3.5vw,3rem);display:block;min-height:0;align-self:start}
.ppanel{display:grid;gap:1.75rem;animation:fadeUp .55s var(--ease)}
.ppanel[hidden]{display:none}
.ppanel__lead{font-family:var(--f-display);font-weight:300;font-size:clamp(1.3rem,2vw,1.75rem);line-height:1.35;color:var(--basalt);max-width:32rem}
.ppanel__cols{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem;border-top:1px solid var(--ink-18);padding-top:1.5rem}
.ppanel__h{font-size:.75rem;font-weight:400;letter-spacing:.16em;color:var(--kiln-ink);margin-bottom:.75rem}
.ppanel__cols li{position:relative;padding-inline-start:1.1rem;color:var(--ink-70);line-height:1.5;margin-bottom:.5rem}
.ppanel__cols li::before{content:"";position:absolute;inset-inline-start:0;top:.62em;width:.4rem;height:.4rem;border-radius:50%;background:var(--kiln)}
.ppanel__go{justify-self:start;font-weight:400}
@media (max-width:40rem){.ppanel__cols{grid-template-columns:1fr}}
.ppanel p.ppanel__lead{color:var(--basalt);font-size:clamp(1.3rem,2vw,1.75rem)}

/* [hidden] must win over the display set on these components (success state replaced the form incorrectly) */
.form[hidden],.stepper[hidden]{display:none}
/* larger touch area for the approach step dots; the visible line is unchanged */
.adot{height:2.75rem}

/* optional rooms field (hidden for property type "other") */
.rooms{display:grid;grid-template-rows:1fr;margin-bottom:0;transition:grid-template-rows .45s var(--ease),opacity .35s,margin-bottom .45s var(--ease)}
.rooms__in{overflow:hidden;min-height:0;padding:3px;margin:-3px}
.rooms.is-off{grid-template-rows:0fr;margin-bottom:-1.75rem;opacity:0;visibility:hidden;transition:grid-template-rows .45s var(--ease),opacity .25s,margin-bottom .45s var(--ease),visibility 0s .45s}
.opt-note{font-weight:300;color:var(--bone-72)}

/* touch: comfortable hit areas for the small text controls in the form */
.form__topic-x{display:inline-flex;align-items:center;min-height:2.75rem;padding-inline:.6rem}
.link--back{padding-block:.8rem}