.hero { position: relative; isolation: isolate; color: var(--on-dark); background: var(--abyss); overflow: clip;
margin-top: calc(-1 * var(--head-h)); padding-top: calc(var(--head-h) + var(--space-lg));
min-height: min(100svh - 2rem, 54rem); display: grid; grid-template-rows: 1fr auto; }
.hero > .wrap { width: 100%; }
.hero__media { position: absolute; inset: 0; z-index: -1; overflow: hidden; transform-origin: 50% 100%; }
.hero__media picture, .hero__poster, .hero__video { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero__poster, .hero__video { object-fit: cover; }
.hero__video { opacity: 0; transition: opacity var(--dur-slow) var(--ease-out); }
.hero__video.is-on { opacity: 1; }
.hero__veil { position: absolute; inset: 0; background: var(--grad-veil-hero); }
.hero__inner { align-self: end; padding-block: var(--space-xl) var(--space-md); }
.hero h1 { color: var(--white); max-width: 12ch; margin-bottom: var(--space-md); text-shadow: 0 1px 30px var(--shadow-deep); }
.hero__lede { font-size: var(--text-md); line-height: 1.45; color: var(--on-dark); max-width: 44ch; margin-bottom: var(--space-lg); text-shadow: 0 1px 24px var(--shadow-deep); }
.hero__ctas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-xs); margin-bottom: var(--space-lg); }
.lbl-long { display: none; }
@media (min-width: 24rem) { .lbl-long { display: inline; } .lbl-short { display: none; } }
.hero__ctas .btn { padding-inline: 0.6rem; font-size: 0.95rem; }
.hero__proof { display: flex; flex-wrap: wrap; gap: 0.35rem 1.1rem; font-size: var(--text-sm); color: var(--on-dark-2); max-width: none; }
.hero__proof li { display: inline-flex; align-items: center; white-space: nowrap; min-height: 28px; }
.hero__proof .gline { color: var(--on-dark); }
@media (max-width: 22.5rem) { .hero__proof li { white-space: normal; } }
.hero__proof .gline:hover { color: var(--sky); }
.hero__foot { display: flex; flex-direction: row-reverse; align-items: center; justify-content: flex-end; gap: var(--space-sm); padding-block: var(--space-sm) var(--space-lg); min-height: 4.4rem; }
.hero__caption { margin: 0 4.25rem 0 0; display: grid; text-align: left; font-size: var(--text-xs); line-height: 1.35; color: var(--on-dark-2); max-width: none; }
.hero__caption b { font-weight: 500; color: var(--on-dark); font-size: var(--text-sm); transition: opacity var(--dur-short) var(--ease-out); }
.hero__caption.is-swap b { opacity: 0; }
.hero__toggle { flex: none; }
@media (min-width: 80rem) { .hero__foot { flex-direction: row; gap: var(--space-md); } .hero__caption { text-align: right; margin: 0; } }
.statement { padding-block: var(--space-2xl); }
.statement__text { font-family: var(--font-display); font-weight: 500; font-size: var(--text-statement); line-height: 1.16; letter-spacing: -0.024em;
max-width: 24ch; margin: 0; color: var(--ink); text-wrap: balance; }
.js:not(.still) [data-words] { color: var(--word-dim); }
.statement__text .w { color: var(--word-dim); transition: color var(--dur-short) var(--ease-out); }
.statement__text .w.is-on { color: var(--ink); }
.stage { position: relative; background: var(--grad-stage); color: var(--on-dark); }
.stage__sticky { padding-block: var(--space-2xl); }
.stage__scene, .stage__dots { display: none; }
.stage h2 { color: var(--white); max-width: 16ch; }
.stage h3 { color: var(--white); font-size: var(--text-lg); letter-spacing: -0.02em; }
.stage__head { margin-bottom: var(--space-xl); }
.stage__steps { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-2xl); counter-reset: step; }
.step { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-md); }
.step__photo { border-radius: var(--radius); overflow: hidden; aspect-ratio: 4 / 3; background: var(--navy-2); }
.step__photo img, .step__photo video { width: 100%; height: 100%; object-fit: cover; }
.step__text p { color: var(--on-dark-2); max-width: 46ch; }
.step__text .note { color: var(--on-dark-2); opacity: 0.85; }
.step .picker { margin-top: var(--space-md); }
.picker--edges .chipbtn { background: transparent; border-color: var(--line-dark-2); color: var(--on-dark); }
.picker--edges .chipbtn:hover { border-color: var(--sky); color: var(--sky); }
.picker--edges .chipbtn.is-on { background: var(--paper-2); border-color: var(--paper-2); color: var(--ink); }
.stage:not(.is-live) [data-edge-picker] .chipbtn { display: none; }
.stage:not(.is-live) [data-stone-picker] { display: none; }
.stage__hint { display: none; }
.stage.is-live { height: 560svh; }
.stage.is-live .stage__sticky { position: sticky; top: 0; height: 100svh; padding: 0; overflow: hidden; }
.stage.is-live .stage__scene { display: block; position: absolute; inset: 0 0 42% 0; }
.stage.is-live .stage__canvas { width: 100%; height: 100%; touch-action: pan-y; }
.stage.is-live .stage__ui { position: absolute; inset: 58% 0 0 0; display: grid; grid-template-rows: auto minmax(0, 1fr); padding-block: var(--space-sm) var(--space-md);
background: linear-gradient(to bottom, transparent, var(--abyss) 18%); }
.stage.is-live .stage__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); margin: 0 0 var(--space-xs); }
.stage.is-live h2 { font-size: var(--text-sm); font-family: var(--font-body); font-weight: 500; letter-spacing: 0; color: var(--on-dark-2); margin: 0; max-width: none; }
.stage.is-live .stage__dots { display: flex; gap: 0.5rem; }
.stage__dots li { width: 16px; height: 4px; border-radius: 1px; transform: skewX(var(--slant)); background: var(--navy-3); transition: background-color var(--dur-short) var(--ease-out); }
.stage__dots li.is-on { background: var(--sky); }
.stage.is-live .stage__steps { position: relative; display: block; }
.stage.is-live .step { position: absolute; inset: 0; grid-template-columns: minmax(0, 1fr); align-content: start;
opacity: 0; visibility: hidden; transform: translateY(12px);
transition: opacity var(--dur-long) var(--ease-out), transform var(--dur-long) var(--ease-out), visibility 0s linear var(--dur-long); }
.stage.is-live .step.is-on { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.stage.is-live .step__photo { display: none; }
.stage.is-live .step__text p { font-size: var(--text-base); margin-bottom: var(--space-sm); }
.stage.is-live .step .note { display: none; }
.stage.is-live .stage__hint { position: absolute; right: var(--gutter); bottom: var(--space-sm); display: inline-flex; align-items: center; gap: 0.4em; margin: 0;
font-size: var(--text-xs); color: var(--on-dark-2); opacity: 0; transition: opacity var(--dur-long) var(--ease-out); }
.stage.is-live .stage__hint.is-on { opacity: 1; }
.matstack { grid-auto-columns: min(86%, 24rem); }
.matcard { position: relative; display: grid; grid-template-rows: auto 1fr; background: var(--paper-2); border: 1px solid var(--rule); border-radius: var(--radius-lg);
overflow: hidden; color: var(--ink); isolation: isolate; }
.matcard:hover { color: var(--ink); }
.matcard__text { padding: var(--space-lg); display: grid; gap: var(--space-xs); align-content: start; order: 2; }
.matcard__text h3 { font-size: var(--text-xl); letter-spacing: -0.022em; margin: 0; }
.matcard__text p { color: var(--ink-2); margin: 0 0 var(--space-xs); }
.matcard__wall { order: 1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; aspect-ratio: 16 / 10; overflow: hidden; background: var(--wash); }
.matcard__wall img { width: 100%; height: 100%; object-fit: cover; }
.matcard__wall--photo { display: block; }
.band-head--row p { margin: 0; }
.rail--slabs { grid-auto-columns: min(62%, 15rem); }
.slabcard { position: relative; display: block; aspect-ratio: 3 / 4; border-radius: var(--radius); overflow: hidden; isolation: isolate; color: var(--white);
--gx: 50%; --gy: 0%; }
.slabcard img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; transition: transform var(--dur-slow) var(--ease-out); }
.slabcard::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--grad-veil-low); }
.slabcard::after { content: ""; position: absolute; inset: 0; z-index: -1; opacity: 0; transition: opacity var(--dur-long) var(--ease-out);
background: radial-gradient(60% 46% at var(--gx) var(--gy), var(--sheen), transparent 70%); mix-blend-mode: screen; }
.slabcard__meta { position: absolute; left: 0; right: 0; bottom: 0; padding: var(--space-md); display: grid; gap: 0.1rem; }
.slabcard__meta b { font-family: var(--font-display); font-weight: 600; font-size: 1.1rem; line-height: 1.2; }
.slabcard__meta span { font-size: var(--text-xs); color: var(--on-dark-2); }
.slabcard--more { display: grid; place-items: center; background: var(--navy-2); border: 1px solid var(--line-dark); text-align: center; padding: var(--space-lg); }
.slabcard--more::before, .slabcard--more::after { display: none; }
.slabcard--more span { display: inline-flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 0.4em; font-weight: 600; color: var(--sky); }
.work { background: var(--abyss); color: var(--on-dark); padding-block: var(--space-2xl); overflow: clip; }
.work__head { margin-bottom: var(--space-lg); }
.work__head h2 { color: var(--white); }
.work__head p { color: var(--on-dark-2); margin: 0; }
.reel { padding-inline: var(--gutter); max-width: none; }
.reel__track { grid-auto-columns: min(84%, 30rem); gap: var(--space-md); align-items: stretch; }
.frame { position: relative; margin: 0; display: grid; grid-template-rows: auto auto; align-content: start; gap: var(--space-xs); }
.frame > a { position: relative; display: block; border-radius: var(--radius); overflow: hidden; aspect-ratio: 1; background: var(--navy-2); }
.frame img, .frame canvas { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.frame canvas { opacity: 0; transition: opacity var(--dur-long) var(--ease-out); }
.frame.is-deep canvas { opacity: 1; }
.frame figcaption { font-size: var(--text-sm); color: var(--on-dark-2); }
.frame--end { align-content: center; justify-items: start; gap: var(--space-md); padding: var(--space-lg); border: 1px solid var(--line-dark); border-radius: var(--radius); }
.frame--end p { color: var(--on-dark-2); margin: 0; font-size: var(--text-md); line-height: 1.4; }
.work .rail-nav { padding-inline: var(--gutter); }
.work.is-pin { padding-block: 0; }
.work.is-pin .work__inner { height: 100svh; display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr; align-content: center; padding-block: calc(var(--head-h) + var(--space-md)) var(--space-lg); }
.work.is-pin .work__head { width: 100%; }
.work.is-pin .reel { align-self: center; padding-inline: 0; }
.work.is-pin .reel__track { overflow: visible; scroll-snap-type: none; margin-inline: 0; padding-inline: var(--gutter); grid-auto-columns: min(46vw, 62svh); will-change: transform; }
.work.is-pin .rail-nav { display: none; }
.quote .note { margin-top: var(--space-md); color: var(--on-dark-2); max-width: none; }
.rail--reviews { grid-auto-columns: min(86%, 24rem); align-items: stretch; }
.tryit__grid { grid-auto-columns: min(86%, 26rem); align-items: stretch; }
.trycard { display: grid; grid-template-rows: auto 1fr; border-radius: var(--radius-lg); overflow: hidden; background: var(--wash); color: var(--ink); }
.trycard:hover { color: var(--ink); }
.trycard__media { display: block; aspect-ratio: 16 / 10; overflow: hidden; }
.trycard__media img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-slow) var(--ease-out); }
.trycard__text { display: grid; gap: var(--space-xs); padding: var(--space-lg); align-content: start; }
.trycard__text b { font-family: var(--font-display); font-weight: 600; font-size: var(--text-lg); letter-spacing: -0.02em; line-height: 1.15; }
.trycard__text > span:not(.link-arrow) { color: var(--ink-2); }
.trycard--dark { background: var(--grad-stage); color: var(--on-dark); }
.trycard--dark:hover { color: var(--on-dark); }
.trycard--dark .trycard__media img { object-fit: contain; padding: var(--space-md); }
.trycard--dark .trycard__text b { color: var(--white); }
.trycard--dark .trycard__text > span:not(.link-arrow) { color: var(--on-dark-2); }
.trycard--dark .link-arrow { color: var(--sky); }
.area .townlist { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.area h2 { max-width: 16ch; }
@media (hover: hover) and (pointer: fine) {
.slabcard:hover img { transform: scale(1.05); }
.slabcard:hover::after { opacity: 1; }
.trycard:hover .trycard__media img { transform: scale(1.03); }
}
@media (min-width: 40rem) {
.hero__ctas { display: flex; }
.hero__ctas .btn { padding-inline: 1.5rem; font-size: 1rem; }
.step { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); align-items: center; gap: var(--space-xl); }
.step__photo--video { aspect-ratio: 3 / 4; max-width: 18rem; }
}
@media (min-width: 60rem) {
.hero { min-height: min(100svh - 2rem, 58rem); }
.hero__veil { background: var(--grad-veil-side), var(--grad-veil-hero); }
.hero__inner { padding-block: var(--space-2xl) var(--space-lg); }
.statement { padding-block: var(--space-3xl); }
.statement__text { max-width: 22ch; }
.stage__sticky { padding-block: var(--space-3xl); }
.stage.is-live .stage__scene { inset: 0; }
.stage.is-live .stage__ui { inset: 0; background: none; pointer-events: none; grid-template-rows: auto minmax(0, 1fr);
padding-block: calc(var(--head-h) + var(--space-xl)) var(--space-xl); }
.stage.is-live .stage__head { display: block; margin-bottom: var(--space-lg); }
.stage.is-live h2 { font-family: var(--font-display); font-size: var(--text-h2); font-weight: 600; letter-spacing: -0.022em; color: var(--white); max-width: 14ch; margin-bottom: var(--space-md); }
.stage.is-live .stage__steps { max-width: 22rem; }
.stage.is-live .step { pointer-events: none; }
.stage.is-live .step.is-on { pointer-events: auto; }
.stage.is-live .step__photo { display: block; width: 11rem; aspect-ratio: 4 / 3; margin-bottom: var(--space-md); border: 1px solid var(--line-dark); }
.stage.is-live .step__photo--video { aspect-ratio: 3 / 4; width: 8.5rem; }
.stage.is-live .step .note { display: block; }
.stage.is-live .stage__hint { right: auto; left: 62%; bottom: var(--space-xl); }
.matstack.rail { display: block; overflow: visible; margin-inline: 0; padding-inline: 0; }
.matstack + .rail-nav { display: none; }
.matcard { position: sticky; top: calc(var(--head-h) + 1.4rem + var(--n, 0) * 0.9rem); grid-template-rows: none; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
min-height: min(27rem, 62svh); margin-bottom: var(--space-lg); box-shadow: 0 -18px 50px var(--shadow); }
.matcard:nth-child(1) { --n: 0; } .matcard:nth-child(2) { --n: 1; } .matcard:nth-child(3) { --n: 2; } .matcard:nth-child(4) { --n: 3; }
.matcard__text { order: 0; padding: var(--space-2xl) var(--space-xl); align-content: center; gap: var(--space-sm); }
.matcard__text h3 { font-size: var(--text-h2); }
.matcard__text p { font-size: var(--text-md); line-height: 1.45; max-width: 34ch; }
.matcard__wall { order: 0; aspect-ratio: auto; height: 100%; gap: 6px; }
.matcard__wall img { height: 124%; }
.work { padding-block: var(--space-3xl); }
.rail--slabs { grid-auto-columns: 15.5rem; }
.tryit__grid.rail { grid-auto-flow: row; grid-template-columns: repeat(2, minmax(0, 1fr)); overflow: visible; margin-inline: 0; padding-inline: 0; }
.tryit__grid + .rail-nav { display: none; }
.rail--reviews { grid-auto-columns: 23rem; }
.area .townlist { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}