/* Home sections. Hero/stage live in studio.css (shared with Finish Studio). */

/* ---------- story: one sheet in, a kitchen out ---------- */
.hds-story { background: var(--g0); border-top: 1px solid var(--ln); }
.hds-story__in { display: grid; gap: 2.5rem; padding-block: clamp(4.5rem, 3rem + 6vw, 8rem); }
.hds-steps { list-style: none; margin: 2rem 0 0; padding: 0; display: grid; gap: 1.5rem; counter-reset: st; }
.hds-step { padding-left: 3.1rem; position: relative; }
.hds-step::before { counter-increment: st; content: counter(st); position: absolute; left: 0; top: .05rem; width: 2.1rem; height: 2.1rem; border-radius: 50%; border: 1px solid var(--ln-2); display: grid; place-items: center; font: 500 .85rem/1 var(--f-mono); color: var(--i2); transition: background-color .3s, color .3s, border-color .3s; }
.hds-step__h { font-size: 1.5rem; margin: 0 0 .35rem; }
.hds-step p { color: var(--i1); margin: 0; max-width: 34em; }
.hds-story__fig { margin: 0; }
.hds-sheet { display: block; width: 100%; height: auto; overflow: visible; }
.hds-story__cap { margin-top: .75rem; font-size: .8rem; color: var(--i2); display: flex; justify-content: space-between; }
.hds-sheet .s-board { fill: #ebe7df; stroke: var(--i0); stroke-width: 3; }
.hds-sheet .s-trim { fill: none; stroke: var(--ln-2); stroke-width: 2; stroke-dasharray: 10 10; }
.hds-sheet .s-part { fill: url(#hds-wood); stroke: var(--i0); stroke-width: 2.5; }
.hds-sheet .s-part.is-solid { fill: #f4f4f1; }
.hds-sheet .s-lab { font: 500 34px var(--f-mono); fill: var(--i0); paint-order: stroke; stroke: rgba(244,244,241,.85); stroke-width: 8px; }
.hds-sheet .s-cut { stroke: var(--red); stroke-width: 6; fill: none; stroke-linecap: square; }
.hds-sheet .s-edge { stroke: var(--z-tall); stroke-width: 16; fill: none; stroke-linecap: butt; }
.hds-sheet .s-hw { fill: none; stroke: var(--i0); stroke-width: 6; }
.hds-sheet .s-hwf { fill: #c7ccd0; stroke: var(--i0); stroke-width: 4; }
.hds-sheet .s-note { font: 600 40px var(--f-body); fill: var(--i0); }
.hds-sheet .s-dim { font: 500 30px var(--f-mono); fill: var(--i2); }
.hds-sheet .s-dimline { stroke: var(--i2); stroke-width: 2; }
@media (min-width: 960px) {
	.hds-story__in { grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); align-items: center; gap: clamp(2.5rem, 5vw, 5rem); min-height: calc(100svh - var(--header-h)); padding-block: 4rem; }
	.hds-js .hds-story--pinned .hds-step { opacity: .32; transition: opacity .4s; }
	.hds-js .hds-story--pinned .hds-step.is-on { opacity: 1; }
	.hds-js .hds-story--pinned .hds-step.is-on::before { background: var(--h0); color: var(--g0); border-color: var(--h0); }
}

/* ---------- ranges: board samples on a rack ---------- */
.hds-rackrow { display: grid; gap: 2.5rem; }
@media (min-width: 900px) { .hds-rackrow { grid-template-columns: 1.15fr 1fr .92fr; align-items: end; gap: clamp(1.5rem, 3vw, 3rem); } }
.hds-sample { display: grid; gap: 1.25rem; }
.hds-sample__board { position: relative; aspect-ratio: 4 / 5; border-radius: 2px; overflow: hidden; background: var(--hex); box-shadow: 0 30px 40px -32px rgba(20,22,21,.55), 0 2px 0 rgba(0,0,0,.08); }
.hds-sample--chrometree-gloss .hds-sample__board { aspect-ratio: 4 / 4.6; }
.hds-sample--chrometree-silktouch .hds-sample__board { aspect-ratio: 4 / 4.2; }
.hds-sample__face { position: absolute; inset: 14px 0 0; background: var(--hex) var(--tex) center / 120% auto; transition: transform 1.4s var(--ease-out); }
.hds-sample__top { position: absolute; left: 0; right: 0; top: 0; height: 14px; z-index: 2; }
.hds-sample__top .hds-core { height: 14px; filter: saturate(.85); }
.hds-sample__top::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--hex) var(--tex) center / 400px auto; }
.hds-sample__sheen { position: absolute; inset: 14px 0 0; pointer-events: none; }
.hds-sample--chrometree-gloss .hds-sample__sheen { background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,.55) 41%, rgba(255,255,255,.08) 47%, transparent 58%) no-repeat; background-size: 250% 100%; background-position: var(--sheen, 120%) 0; mix-blend-mode: screen; transition: background-position 1.6s var(--ease-out); }
.hds-sample--chrometree-gloss .hds-sample__sheen::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(255,255,255,.16), transparent 40%); }
.hds-sample--chrometree-silktouch .hds-sample__sheen { background: radial-gradient(120% 80% at 30% 10%, rgba(255,255,255,.12), transparent 60%); }
@media (hover: hover) {
	.hds-sample:hover .hds-sample__face { transform: scale(1.04); }
	.hds-sample--chrometree-gloss:hover .hds-sample__sheen { --sheen: -40%; }
}
.hds-sample.is-in.hds-sample--chrometree-gloss .hds-sample__sheen { --sheen: -20%; transition-delay: .5s; }
.hds-sample__tag h3 { margin-bottom: .3rem; }
.hds-sample__tag p { color: var(--i1); margin-bottom: .6rem; }
.hds-sample__chips { list-style: none; margin: 0 0 .7rem; padding: 0; display: flex; gap: 4px; }
.hds-sample__chips li { width: 26px; height: 26px; border-radius: 2px; background: var(--hex) var(--tex, none) center / cover; box-shadow: inset 0 0 0 1px rgba(0,0,0,.1); }
.hds-sample__meta { font-size: .92rem; color: var(--i1); }
.hds-sample__acts { display: flex; flex-wrap: wrap; gap: .5rem 1.4rem; }
.hds-ranges__more { margin-top: 3rem; color: var(--i1); max-width: 60em; }

/* ---------- anatomy ---------- */
.hds-anat__in { display: grid; gap: 2.5rem; }
@media (min-width: 960px) { .hds-anat__in { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); align-items: center; gap: 4rem; } }
.hds-anat__text p:not(.hds-lede) { color: var(--i1); max-width: 36em; }
.hds-anat__fig { min-height: 420px; }

/* ---------- cutting list demo ---------- */
.hds-cutdemo__in { display: grid; gap: 2.5rem; }
@media (min-width: 960px) { .hds-cutdemo__in { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); align-items: center; gap: 4rem; } }
.hds-mini { margin: 1.5rem 0; background: #fff; border: 1px solid var(--ln); border-radius: var(--r); overflow: hidden; }
.hds-mini__t { width: 100%; border-collapse: collapse; font-size: .95rem; }
.hds-mini__t th { text-align: left; font: 600 .78rem/1 var(--f-body); color: var(--i2); padding: .75rem .8rem .55rem; background: var(--g1); border-bottom: 1px solid var(--ln); }
.hds-mini__t td { padding: .35rem .8rem; border-bottom: 1px solid var(--ln); }
.hds-mini__t td:first-child { font-weight: 600; }
.hds-mini__t input { width: 5.2ch; min-width: 0; height: 38px; border: 1px solid transparent; border-radius: 3px; background: var(--g0); padding: 0 .45rem; font-size: 16px; text-align: right; }
.hds-mini__t input:focus { outline: none; border-color: var(--i0); background: #fff; }
.hds-mini__sum { margin: 0; padding: .8rem; font: 500 .85rem/1.4 var(--f-mono); color: var(--i1); }
.hds-cutdemo__fig { margin: 0; }
.hds-cutdemo__fig figcaption { margin-top: .6rem; }

/* ---------- scale ---------- */
.hds-scale__in { display: grid; gap: 3rem; }
@media (min-width: 960px) { .hds-scale__in { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); align-items: end; gap: 4rem; } }
.hds-facts { list-style: none; margin: 1.5rem 0 0; padding: 0; display: grid; gap: 0; }
.hds-facts li { padding: .9rem 0; border-top: 1px solid var(--h-line); color: var(--on-h); }
.hds-stacks { margin: 0; }
.hds-stacks__row { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(.8rem, 2vw, 2rem); align-items: end; }
.hds-stacks__pile { display: flex; flex-direction: column-reverse; gap: 3px; margin-bottom: 1rem; }
.hds-stacks__pile span { display: block; height: 5px; border-radius: 1px; background: var(--g0); transform-origin: left center; }
.hds-stacks__pile span:nth-child(5n) { background: #d9d6cf; }
.hds-stacks__col--cap .hds-stacks__pile span:nth-child(n+19) { background: var(--on-h-2); }
.hds-stacks__col--next .hds-stacks__pile span { background: transparent; box-shadow: inset 0 0 0 1px var(--on-h-2); }
.hds-stacks__col--next .hds-stacks__pile span:nth-child(-n+30) { background: var(--h2); box-shadow: inset 0 0 0 1px var(--h-line); }
.hds-stacks__n { font-size: clamp(1.4rem, 1rem + 1.6vw, 2.4rem); margin: 0; color: #fff; }
.hds-stacks__l { font-size: .9rem; color: var(--on-h-2); margin: .2rem 0 0; max-width: 16ch; }
.hds-stacks figcaption { margin-top: 1.5rem; }
@media (prefers-reduced-motion: no-preference) {
	.hds-js .hds-stacks__pile span { transform: translateX(-12px); opacity: 0; transition: transform .6s var(--ease-out), opacity .4s; transition-delay: calc(var(--i) * 28ms + 200ms); }
	.hds-js .hds-stacks.is-in .hds-stacks__pile span { transform: none; opacity: 1; }
}

/* ---------- flat pack ---------- */
.hds-flat__in { display: grid; gap: 2.5rem; }
@media (min-width: 960px) { .hds-flat__in { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); align-items: center; gap: 4rem; } }
.hds-flat__fig { margin: 0; }
.hds-carcass { display: block; width: 100%; height: auto; overflow: visible; }
.hds-units { list-style: none; margin: 1.5rem 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.hds-unit { display: grid; grid-template-columns: 64px 1fr; gap: .75rem; align-items: center; }
.hds-unit__img { display: block; background: #fff; border: 1px solid var(--ln); border-radius: var(--r); overflow: hidden; }
.hds-unit .hds-unit__img img { display: block; width: 64px; height: 64px; object-fit: contain; }
.hds-unit__t { display: grid; gap: .15rem; font-size: .88rem; line-height: 1.3; }
.hds-unit__t a { text-decoration: none; font-weight: 600; }
.hds-unit__t a:hover { text-decoration: underline; }
.hds-unit__t .hds-num { font-size: .8rem; color: var(--i1); }

/* ---------- hardware ---------- */
.hds-hw__row { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; background: var(--ln); border: 1px solid var(--ln); }
@media (min-width: 900px) { .hds-hw__row { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.hds-hwfig { background: var(--g0); }
.hds-hwfig:last-child:nth-child(odd) { grid-column: 1 / -1; }
@media (min-width: 900px) { .hds-hwfig:last-child:nth-child(odd) { grid-column: auto; } }
.hds-hwfig a { display: grid; gap: .25rem; padding: 1rem 1rem 1.25rem; height: 100%; text-decoration: none; transition: background-color .25s; }
.hds-hwfig__art { display: block; aspect-ratio: 1; margin-bottom: .5rem; --hairline-plate: var(--g0); }
.hds-hwfig__n { font: 600 1.1rem/1.1 var(--f-display); }
.hds-hwfig__d { font-size: .85rem; color: var(--i2); }
@media (hover: hover) { .hds-hwfig a:hover { background: #fff; } .hds-hwfig a:hover .hds-hwfig__art { --hairline-plate: #fff; } }

/* ---------- branches ---------- */
.hds-hbr__in { display: grid; gap: 2.5rem; }
@media (min-width: 960px) { .hds-hbr__in { grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); align-items: center; gap: 4rem; } }
.hds-hbr__provs { list-style: none; margin: 1.5rem 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 0 2rem; }
.hds-hbr__provs li { display: flex; justify-content: space-between; padding: .6rem 0; border-bottom: 1px solid var(--ln); }
.hds-hbr__provs .hds-num { color: var(--i2); }
.hds-hbr__near { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.5rem; }
.hds-near { margin-top: 1.25rem; display: grid; gap: .5rem; }
.hds-near__b { display: grid; grid-template-columns: 1fr auto; gap: .2rem 1rem; padding: .9rem 1rem; background: #fff; border: 1px solid var(--ln); border-radius: var(--r); }
.hds-near__b strong { font-weight: 600; }
.hds-near__b .hds-num { color: var(--i2); font-size: .85rem; }
.hds-near__b p { margin: 0; grid-column: 1 / -1; font-size: .88rem; color: var(--i1); }
.hds-near__acts { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: .4rem 1rem; font-size: .9rem; }
.hds-near__acts a { font-weight: 600; }
.hds-hbr__map { margin: 0; }
.hds-carp { margin-top: clamp(3rem, 2rem + 3vw, 5rem); display: grid; gap: 1.25rem; align-items: center; padding: clamp(1.5rem, 1rem + 2vw, 2.5rem); background: var(--h0); color: var(--on-h); border-radius: var(--r); position: relative; overflow: hidden; }
.hds-carp p { color: var(--on-h-2); margin: 0; max-width: 46em; }
.hds-carp h3 { margin-bottom: .4rem; }
@media (min-width: 800px) { .hds-carp { grid-template-columns: 1fr auto; gap: 2rem; } }