/* V7 additions to V6 (homepage only): hero reveal, scroll-brightening statement, wiped-in cards and process photos,
   floating base styles. Everything visible without JS; v7.js sets hidden starting states right before animating. */
.v7-statement{background:var(--paper);padding:clamp(72px,14vh,176px) 0 clamp(56px,10vh,128px)}
.v7-statement h2{font:300 clamp(40px,6.6vw,108px)/1 var(--font-serif);letter-spacing:-.025em;color:var(--ink);max-width:13em}
.v7-statement h2 em{color:var(--walnut);font-weight:300}
.v7-statement .eyebrow{margin-bottom:var(--space-7)}

/* base styles: forced light so the multiply-blended steel stays dark on paper in dark mode too */
.v7-bases{--stone:#f3f1ea;--paper:#e2ddd2;--ink:#221f20;--ink-soft:#4e453e;--ink-faint:#5f574f;--walnut:#60371b;--clay:#60371b;--on-clay:#f3f1ea;--line:#c0bcb3;
  background:var(--stone);color:var(--ink);overflow:hidden;padding:var(--space-9) 0 var(--space-10)}
.v7-bases__stage{position:relative;height:clamp(420px,56vw,820px);margin:0 auto;max-width:1200px}
.v7-bases__base{position:absolute;mix-blend-mode:multiply;will-change:transform;height:auto;pointer-events:none;backface-visibility:hidden}
.v7-bases__base--1{left:30%;top:16%;width:34%}
.v7-bases__base--2{left:6%;top:2%;width:22%}
.v7-bases__base--3{left:62%;top:4%;width:22%}
.v7-bases__base--4{left:68%;top:46%;width:20%}
.v7-bases__base--5{left:12%;top:52%;width:22%}
.v7-bases__cols{display:grid;grid-template-columns:5fr 3fr 4fr;gap:var(--space-8);align-items:start;margin-bottom:var(--space-7)}
.v7-bases h2{font-size:clamp(36px,4.4vw,60px)}
.v7-bases__kicker{font:500 12px/16px var(--font-sans);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-faint);margin:0 0 var(--space-3)}
.v7-bases__names{list-style:none;margin:0;padding:0}
.v7-bases__names a{font:300 clamp(28px,2.6vw,40px)/1.15 var(--font-serif);text-decoration:none;letter-spacing:-.01em;color:var(--ink)}
.v7-bases__names a:hover{color:var(--walnut);font-style:italic}
.v7-bases__side p{margin:0 0 var(--space-4);color:var(--ink-soft)}
.v7-bases__side .btn{margin-top:var(--space-3)}
@media (max-width:900px){
  .v7-bases{padding:var(--space-8) 0 var(--space-9)}
  .v7-bases__cols{grid-template-columns:1fr;gap:var(--space-6)}
}
@media (max-width:600px){.v7-bases__stage{height:clamp(310px,84vw,440px)}}

/* process photos get room for their drift */
@media (min-width:901px){#process .process__photo{margin-top:0}#process .process__photos{padding-block:24px 24px}}
@media (max-width:900px){#process .process__photo{margin-top:var(--space-5)}}

/* custom card: what can change, in the same rows as the price list beside it */
.path__list--facts li{display:flex;justify-content:space-between;align-items:baseline;gap:var(--space-4);padding:6px 0}
.path__list-note{font:500 12px/16px var(--font-sans);letter-spacing:.14em;text-transform:uppercase;color:var(--walnut);text-align:right}

/* about photo: square, one cut corner, an offset hairline frame and a maker's tag */
.about .about__frame{float:left;position:relative;margin:0 var(--space-8) var(--space-6) 0;width:min(40%,460px)}
@media (min-width:768px){.about .about__frame{margin-top:calc(var(--space-7) * -1)}}
.about .about__frame::before{content:"";position:absolute;inset:0;border:1.5px solid var(--walnut);transform:translate(18px,18px);pointer-events:none}
.about .about__frame img{position:relative;z-index:1;display:block;width:100%;aspect-ratio:4/5;height:auto;object-fit:cover;object-position:30% 25%;border-radius:0;box-shadow:none;
  clip-path:polygon(0 0,calc(100% - 64px) 0,100% 64px,100% 100%,0 100%)}
.about .about__frame figcaption{position:absolute;z-index:2;left:-14px;bottom:32px;background:var(--walnut);color:var(--on-clay);
  font:500 11px/16px var(--font-sans);letter-spacing:.16em;text-transform:uppercase;padding:9px 14px}
@media (min-width:768px) and (max-width:900px){.about .about__frame{width:42%;margin-right:var(--space-7)}}
@media (max-width:767px){.about .about__frame{float:none;width:calc(100% - 18px);margin:0 0 var(--space-8)}.about .about__frame figcaption{left:0}}


/* collection carousel: less air above it and less scroll between pieces */
#work.work--wipes{padding-top:var(--space-8)}
#work.work--wipes > .wrap > .sec-head{margin-bottom:0}
@media (max-width:900px){#work.work--wipes{padding-top:var(--space-7)}}

/* tighter seams between collection, base styles and what follows */
#work.work--wipes{padding-bottom:var(--space-6)}
#work.work--wipes .note{margin-top:var(--space-3)}
.v7-bases{padding:var(--space-8) 0 var(--space-9)}
@media (max-width:900px){#work.work--wipes{padding-bottom:var(--space-5)}.v7-bases{padding:var(--space-7) 0 var(--space-8)}}

/* less empty space under the bases before the next section */
.v7-bases__stage{height:clamp(380px,50vw,720px)}
.v7-bases{padding-bottom:var(--space-7)}
@media (max-width:900px){.v7-bases{padding-bottom:var(--space-6)}}
@media (max-width:600px){.v7-bases__stage{height:clamp(290px,76vw,400px)}}

/* tighter rhythm between the lower homepage sections */
#paths,#process,#about,#trade,#commission{padding-top:var(--space-8);padding-bottom:var(--space-8)}
#paths .sec-head,#process .sec-head,#trade .sec-head,#commission .sec-head{margin-bottom:var(--space-7)}
.v7-statement{padding-top:var(--space-9);padding-bottom:var(--space-8)}
@media (max-width:900px){
  #paths,#process,#about,#trade,#commission{padding-top:var(--space-7);padding-bottom:var(--space-7)}
  #paths .sec-head,#process .sec-head,#trade .sec-head,#commission .sec-head{margin-bottom:var(--space-6)}
  .v7-statement{padding-top:var(--space-8);padding-bottom:var(--space-7)}
}

/* about: same copy, laid out to be read in pieces. Photo stays beside the story, the promises become a numbered grid,
   and the closing line stands on its own above the sign-off. */
.about{display:block}
.about > div{max-width:none}
.about .about__top{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);column-gap:var(--space-9);align-items:start}
.about .about__frame{float:none;margin:0;width:calc(100% - 18px);max-width:460px;position:sticky;top:calc(72px + var(--space-6))}
.about .about__frame::before{transform:translate(18px,18px)}
.about .about__text{max-width:640px}
.about .about__text p{font-size:18px;line-height:30px;margin-top:var(--space-4)}
.about .about__text .about__lead{font:300 clamp(24px,2.3vw,32px)/1.3 var(--font-serif);letter-spacing:-.01em;color:var(--ink);margin-top:var(--space-6)}
.about .about__work{padding-top:var(--space-4);margin-top:var(--space-5);border-top:1px solid var(--line)}
.about .about__work em{font:italic 300 1.2em/1.2 var(--font-serif);color:var(--walnut);white-space:nowrap}
.about .about__promises{margin-top:var(--space-8);padding-top:var(--space-6);border-top:1px solid var(--ink)}
.about .about__promises h3{font:300 clamp(28px,3vw,40px)/1.1 var(--font-serif);margin:0 0 var(--space-5)}
.about .about__promises ul{list-style:none;margin:0;padding:0;counter-reset:promise;display:grid;grid-template-columns:1fr 1fr;column-gap:var(--space-8)}
.about .about__promises li{counter-increment:promise;display:grid;grid-template-columns:40px 1fr;padding:var(--space-4) 0;margin:0;border-top:1px solid var(--line);font-size:17px;line-height:27px;color:var(--ink-soft)}
.about .about__promises li::before{content:counter(promise,decimal-leading-zero);font:500 12px/27px var(--font-sans);letter-spacing:.14em;color:var(--walnut)}
.about .about__close{margin-top:var(--space-8);max-width:880px}
.about .about__close p{margin:0;font:300 clamp(28px,3.4vw,48px)/1.15 var(--font-serif);letter-spacing:-.015em;color:var(--ink)}
.about .about__close em{font-style:italic;color:var(--walnut)}
.about .about__close .about-signoff{margin-top:var(--space-6)}
@media (max-width:900px){
  .about .about__top{grid-template-columns:1fr;row-gap:var(--space-7)}
  .about .about__frame{position:relative;top:auto;max-width:none}
  .about .about__promises ul{grid-template-columns:1fr}
  .about .about__promises{margin-top:var(--space-7)}
  .about .about__close{margin-top:var(--space-7)}
}

/* two ways in: heading stands alone, so no gap reserved for the old intro */
#paths .sec-head{display:block}

/* base stage: sized from the window height so the copy and the whole animation (hover zoom included) fit on one
   screen, centered. Width follows height at the stage's own 5:3 shape, so every base scales together. */
@media (min-width:601px){
  .v7-bases__stage{--sh:clamp(340px,calc(100vh - 475px),620px);--sh:clamp(340px,calc(100svh - 475px),620px);
    height:var(--sh);width:min(100%,calc(var(--sh) * 1.667));max-width:none;margin:var(--space-4) auto 0}
}

/* desktop: copy and names stack on the left, the animation sits to their right and is a little bigger */
@media (min-width:901px){
  .v7-bases > .wrap{display:grid;grid-template-columns:minmax(280px,3fr) 8.4fr;grid-template-rows:auto auto 1fr;column-gap:var(--space-7);row-gap:var(--space-5);align-items:start}
  .v7-bases__cols{display:contents}
  .v7-bases__cols > div:nth-child(1){grid-column:1;grid-row:1}
  .v7-bases__cols > div:nth-child(2){grid-column:1;grid-row:2}
  .v7-bases__cols > div:nth-child(3){grid-column:1;grid-row:3}
  .v7-bases h2{font-size:clamp(34px,3.6vw,52px)}
  .v7-bases__names a{font-size:clamp(26px,2.3vw,34px)}
  .v7-bases__stage{grid-column:2;grid-row:1 / span 3;align-self:center;height:auto;aspect-ratio:5/3;width:100%;max-width:calc((100svh - 160px) * 1.667);margin:0 auto}
}

/* process: no side paragraph, tighter top */
#process .sec-head{display:block;margin-bottom:var(--space-6)}
#process .eyebrow{margin-bottom:var(--space-4)}
@media (max-width:900px){#process .sec-head{margin-bottom:var(--space-5)}}

/* statement: tighter gap under the hero photo */
.v7-statement{padding-top:var(--space-7)}
@media (max-width:900px){.v7-statement{padding-top:var(--space-6)}}

/* collection carousel: pull the pinned stage up under the heading so the photo sits ~40px below it instead of
   floating in the stage's empty top margin (the heading stays above, the pinned centering is unchanged) */
#work.work--wipes .sec-head{position:relative;z-index:30}
@media (min-width:768px){
  #work .pw{margin-top:calc(-1 * max(0px, (100svh - var(--nav-h,0px) - min(52.8vh, 36vw) * 1.25) / 2 - 40px))}
}
@media (max-width:767px){
  #work .pw{margin-top:calc(-1 * max(0px, (100svh - var(--nav-h,0px) - min(68vw, 40svh) * 1.25) / 2 - 150px))}
}
@media (max-width:767px){#work .pw-count{top:auto;bottom:var(--space-3)}}

/* collection -> base styles: trim the last carousel's empty bottom margin (mirror of the top pull-up), the note's
   gap and the base-styles top padding; the note sits above the stage so the overlap never hides it */
#work .note{position:relative;z-index:30}
@media (min-width:768px){
  #work .pw ~ .pw{margin-bottom:calc(-1 * max(0px, (100svh - var(--nav-h,0px) - min(52.8vh, 36vw) * 1.25) / 2 - 40px))}
  .v7-bases{padding-top:var(--space-6)}
}
@media (max-width:767px){
  #work .pw ~ .pw{margin-bottom:calc(-1 * max(0px, (100svh - var(--nav-h,0px) - min(68vw, 40svh) * 1.25) / 2 - 150px))}
  .v7-bases{padding-top:var(--space-5)}
}
#work.work--wipes{padding-bottom:var(--space-2)}
@media (min-width:768px){.v7-bases{padding-top:var(--space-5)}}
@media (max-width:767px){#work .pw-count{top:84px;bottom:auto}.v7-bases{padding-top:var(--space-4)}}

/* between the two carousels: trim the first one's empty bottom margin and the divider block's spacing; the
   "Not ready for a table?" text sits above the second stage's pull-up so it is never covered */
.work--wipes .start-small{position:relative;z-index:30}
@media (min-width:768px){
  #work .pw{margin-bottom:calc(-1 * max(0px, (100svh - var(--nav-h,0px) - min(52.8vh, 36vw) * 1.25) / 2 - 40px))}
  .work--wipes .start-small{margin-top:var(--space-5);padding-top:var(--space-5);margin-bottom:0}
}
@media (max-width:767px){
  #work .pw{margin-bottom:calc(-1 * max(0px, (100svh - var(--nav-h,0px) - min(68vw, 40svh) * 1.25) / 2 - 150px))}
  .work--wipes .start-small{margin-top:var(--space-4);padding-top:var(--space-4);margin-bottom:0}
}

/* Phones: the quote form comes right after the intro, so "Request a quote" (and product-page quote buttons) land
   next to the form instead of a screen of copy above it; "What happens next" and the note follow the form. */
@media (max-width:900px){
  #commission .contact{gap:0}
  #commission .contact > div:first-child{display:contents}
  #commission .contact .eyebrow,#commission .contact h2,#commission .contact .contact__lead{order:1}
  #commission .contact > form{order:2;margin-top:var(--space-6)}
  #commission .contact .contact__subhead,#commission .contact .next-steps,#commission .contact .maker,#commission .contact .note{order:3}
  #commission .contact .contact__subhead{margin-top:var(--space-7)}
}

/* the carousel's pulled-up bottom overlaps what follows: keep the base-styles section above it */
.v7-bases{position:relative;z-index:30}

/* process photos: no caption under them any more, so no extra space below the row */
#process .process__photo{margin-bottom:0}

/* two ways in: tighter vertical rhythm inside both cards */
#paths .path{padding:var(--space-6) var(--space-6) var(--space-6)}
#paths .path .eyebrow{margin-bottom:var(--space-2)}
#paths .path h3{margin:0}
#paths .path p{margin:var(--space-2) 0 var(--space-4);font-size:16px;line-height:25px}
#paths .path__list{margin:0 0 var(--space-4)}
#paths .path__list a,#paths .path__list--facts li{padding:4px 0}
#paths .path__list-name{line-height:22px}
@media (max-width:900px){#paths .path{padding:var(--space-5) var(--space-5)}}
@media (min-width:901px){#paths .path p{max-width:none}}

/* statement headline: smaller cap, balanced lines, tighter bottom padding */
.v7-statement h2{font-size:clamp(40px,5.2vw,84px);max-width:15em;text-wrap:balance}
@media (min-width:901px){.v7-statement{padding-bottom:var(--space-7)}}

/* first carousel holds the section heading in its stage: no pull-up, a smaller gap above, the counter by the eyebrow */
#work.work--wipes{padding-top:var(--space-6)}
#work .pw.pw--head{margin-top:0}
#work .pw--head .pw-count{top:var(--space-6);bottom:auto}
@media (max-width:767px){#work.work--wipes{padding-top:var(--space-5)}#work .pw--head .pw-count{top:var(--space-4)}}