/* Gallery · Open House's lit K, but as it parts the wall opens onto the Experience Center.
   Then the Shutters doors as the products, and gallery-style sections: a statement that fills in
   as you read, a ticker, a photo with a card over it, stacked room panels and a deck of finish samples.
   Builds on open-house.css (the K) and shutters.css (the doors). */

/* ── Shared touches ─────────────────────────────────── */
.btn { border-radius: 999px; }
.render-label { font-size: .8125rem; }
.tbc { font-size: .8125rem; }
.eyebrow { margin: 0; font-size: .8125rem; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--rust); }
/* the accent words: the same face, narrower and lighter, in rust */
.h2 em, .statement__text em { font-style: normal; font-weight: 200; font-variation-settings: 'wdth' 78; color: var(--rust); }
/* ── Header: floating glass pills — the logo, the links (with a light that slides to the one you point at,
   or the section you are in), Book a visit and WhatsApp. It slips away as you scroll down ── */
.nav, .nav.is-solid { background: none; border-color: transparent; transition: translate .5s var(--soft-close); }
.nav.is-hidden { translate: 0 -120%; }
.brand, .nav__links, .nav__book, .nav__menu { background: #f8f5efd4; -webkit-backdrop-filter: blur(14px) saturate(1.2); backdrop-filter: blur(14px) saturate(1.2); box-shadow: 0 8px 24px -14px #3b2a2059, inset 0 0 0 1px #ffffff8c; border-radius: 999px; }
.brand { display: flex; align-items: center; gap: 10px; width: auto; height: 48px; padding: 0 18px 0 14px; -webkit-mask: none; mask: none; text-decoration: none; }
.brand__k { width: 24px; height: 24px; fill: var(--graphite); overflow: visible; }
.brand__k path { transition: translate .6s var(--soft-close); }
.brand:hover .brand__k path:nth-child(1) { translate: -150px 0; }   /* SVG units: 1313 to the 24px mark */
.brand:hover .brand__k path:nth-child(2) { translate: 170px -170px; }
.brand:hover .brand__k path:nth-child(3) { translate: 170px 170px; }
.brand__word { width: 112px; aspect-ratio: 2884 / 335; background: var(--wood); -webkit-mask: url(assets/brand/wordmark-white.png) center / contain no-repeat; mask: url(assets/brand/wordmark-white.png) center / contain no-repeat; }
.nav__links { position: relative; gap: 0; padding: 4px; }
.nav__links a { position: relative; z-index: 1; min-height: 40px; padding: 0 16px; border-radius: 999px; white-space: nowrap; color: var(--muted); transition: color .3s; }
.nav__links a:hover, .nav__links a[aria-current] { color: var(--wood); }
.nav__ink { position: absolute; left: 0; top: 4px; bottom: 4px; width: 0; border-radius: 999px; background: var(--raised); box-shadow: 0 2px 8px -2px #3b2a2033, inset 0 0 0 1px #b08d5733; opacity: 0; transition: translate .5s var(--soft-close), width .5s var(--soft-close), opacity .3s; }
.nav__book { height: 48px; padding: 0 20px; white-space: nowrap; }
.nav__book:hover { text-decoration: none; color: var(--wood); }
.nav .btn { min-height: 48px; padding: 0 1.3em; }
@media (max-width: 1180px) { .nav__links a { padding: 0 11px; font-size: .875rem; } .brand__word { width: 96px; } }

/* the phone menu: a picture and a line for each section, coming in one by one, then the ways to reach us */
.menu__in { grid-template-rows: var(--nav-h) auto auto 1fr; }
.menu__foot { align-self: end; }
.menu .brand { background: none; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; padding-left: 0; }
.menu .menu__links { padding: 18px 0 0; gap: 0; }
.menu .menu__links a { display: grid; grid-template-columns: 60px minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 16px; align-items: end; padding: 12px 0; border-bottom: 1px solid var(--line); }
.menu__links img { grid-row: span 2; align-self: center; width: 60px; height: 60px; object-fit: cover; border-radius: 6px; }
.menu__links span { font-size: 1.6rem; line-height: 1.1; }
.menu__links small { align-self: start; margin-top: 4px; font-size: .8125rem; font-weight: 400; font-variation-settings: normal; color: var(--muted); }
.menu[open] .menu__links li, .menu[open] .menu__acts { animation: menu-in .7s var(--soft-close) calc(100ms + var(--i, 5) * 60ms) backwards; }
@keyframes menu-in { from { opacity: 0; translate: 0 18px; } }
.menu__acts { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 20px 0; }
.menu__acts .btn--solid { grid-column: 1 / -1; }

/* ── 1 · Hero: the K, the floating cards, and the rooms behind the wall ── */
.reveal { height: auto; }
.reveal .hero__stage { position: relative; }

/* the cards: scattered round the K, each bobbing at its own pace; they arrive one by one, fade into a haze
   around the K and under the nav, lean from the pointer, and scatter as the K parts.
   --mx, --my: the pointer, -1..1; --out: how far they have scattered */
.floats {
  --mx: 0; --my: 0; --out: 0; --hy: 40%;
  position: absolute; inset: 0; pointer-events: none;
  -webkit-mask: radial-gradient(ellipse min(30vw, 50svh) 36svh at 50% var(--hy), #0000 42%, #000 100%), linear-gradient(#0000 calc(var(--nav-h) * .6), #000 calc(var(--nav-h) + 10svh));
  -webkit-mask-composite: source-in;
  mask: radial-gradient(ellipse min(30vw, 50svh) 36svh at 50% var(--hy), #0000 42%, #000 100%), linear-gradient(#0000 calc(var(--nav-h) * .6), #000 calc(var(--nav-h) + 10svh));
  mask-composite: intersect;
}
.float {
  position: absolute; left: var(--x); top: var(--y); width: var(--w); aspect-ratio: var(--a); object-fit: cover; border-radius: 4px;
  translate: calc(-50% + var(--mx) * var(--d) * -28px + var(--ox) * var(--out)) calc(-50% + var(--my) * var(--d) * 18px + var(--oy) * var(--out));
  rotate: var(--r); opacity: calc(1 - var(--out) * 1.3);
  box-shadow: 0 30px 50px -24px #3b2a2080, 0 2px 6px #3b2a201f;
  animation: float-in 1.2s var(--soft-close) calc(250ms + var(--i) * 90ms) backwards, bob 2.4s ease-in-out calc(1.2s + var(--i) * 90ms) 2;
}
.float:nth-child(-n + 5) { --ox: -34vw; }
.float:nth-child(n + 6) { --ox: 34vw; }
.float:nth-child(odd) { --oy: -14svh; }
.float:nth-child(even) { --oy: 12svh; }
@keyframes float-in { from { opacity: 0; scale: .84; filter: blur(10px); } }
@keyframes bob { 50% { transform: translateY(-8px); } } /* two gentle bobs, under five seconds in all */

/* the rooms: the entrance shows through the doorway; then the picture, cut into vertical louvres,
   turns strip by strip onto the next room (a nod to the shutters further down) */
.hero__room { position: absolute; inset: 0; clip-path: inset(50%); }
.hero__room img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero__room.has-louvres img { visibility: hidden; }
.louvres { position: absolute; inset: 0; display: flex; perspective: 1800px; }
.louvre { position: relative; flex: 1; transform-style: preserve-3d; transition: transform .9s var(--soft-close) calc(var(--i) * 70ms); }
.louvre i { position: absolute; inset: 0; backface-visibility: hidden; background-repeat: no-repeat; }
.louvre i + i { transform: rotateY(180deg); }
.louvres.is-turning .louvre { transform: rotateY(180deg); }
.louvres.is-still .louvre { transition: none; }
.hero__caption { position: absolute; inset: 0; pointer-events: none; opacity: 0; }
/* the slider: just a thin bar per room, in cream with a soft shadow so it reads on light and dark rooms;
   the current one fills until the louvres turn */
.hero__slider { position: absolute; right: var(--gutter); bottom: clamp(24px, 5vh, 48px); display: flex; gap: 8px; filter: drop-shadow(0 1px 3px #2a1d1680); }
.hero__slider button { position: relative; width: 40px; height: 24px; padding: 0; border: 0; background: none; cursor: pointer; }
.hero__slider button::after { content: ''; position: absolute; left: 0; right: 0; top: 50%; height: 2px; translate: 0 -50%; border-radius: 2px; background: linear-gradient(var(--raised) 0 0) 0 0 / 0% 100% no-repeat, #f8f5ef66; }
.hero__slider button[aria-current]::after { background-size: 100% 100%; }
.hero__slider .is-run::after { animation: fill 5.2s linear forwards; }
.hero__slider.is-paused .is-run::after { animation-play-state: paused; }
/* pause and play: two bars, or a triangle once paused */
.hero__pause, .ticker__pause { display: grid; place-items: center; padding: 0; border: 0; cursor: pointer; }
.hero__pause { width: 24px !important; }
.hero__slider .hero__pause::after { display: none; }
.hero__pause i, .ticker__pause i { width: 9px; height: 10px; border-inline: 3px solid var(--raised); }
.ticker__pause i { border-color: var(--wood); }
.hero__pause[aria-pressed='true'] i, .ticker__pause[aria-pressed='true'] i { width: 0; height: 0; border: 0; border-left: 9px solid var(--raised); border-block: 5.5px solid transparent; }
.ticker__pause[aria-pressed='true'] i { border-left-color: var(--wood); }
.hero__caption:not(.is-on) .is-run::after, .hero__slider:hover .is-run::after { animation-play-state: paused; }
@keyframes fill { from { background-size: 0% 100%; } to { background-size: 100% 100%; } }
.hero__caption .render-label { position: absolute; right: var(--gutter); top: calc(var(--nav-h) + 14px); padding: 5px 9px; background: var(--raised); }
.hero__card { position: absolute; left: var(--gutter); bottom: clamp(24px, 5vh, 48px); width: min(440px, calc(100% - 2 * var(--gutter))); display: grid; gap: 14px; padding: 24px 26px 26px; background: var(--raised); box-shadow: 0 30px 60px -30px #3b2a2059; }
.hero__card-title { margin: 0; font-size: clamp(1.4rem, 2.2vw, 2rem); font-weight: 250; font-variation-settings: 'wdth' 118; line-height: 1.12; color: var(--wood); text-wrap: balance; }
/* without the scroll story (no JS, or reduced motion) the rooms wait for the Experience Center section */
html:not(.story) .hero__room, html:not(.story) .hero__caption { display: none; }

.story .reveal { height: 280svh; }
.story .reveal .hero__stage { position: sticky; }
.story .hero__caption.is-on { pointer-events: auto; }
.story .hero__caption.is-on .hero__card { pointer-events: auto; }

/* ── 2 · Products: the statement, then the doors ───── */
.statement { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 3fr); gap: 18px var(--gutter); margin-bottom: clamp(40px, 6vw, 72px); }
.statement .eyebrow { padding-top: .9em; }
.statement__text { grid-column: 2; margin: 0; font-size: clamp(1.7rem, 3.4vw, 3.3rem); font-weight: 250; font-variation-settings: 'wdth' 116; line-height: 1.12; letter-spacing: -.005em; color: var(--wood); text-wrap: pretty; }
.statement .lede { grid-column: 2; }
/* each word starts faint and fills in as the line is read */
.js .statement__text .w { transition: color 400ms; color: #3b2a2033; }
.js .statement__text em .w { color: #75342140; }
.js .statement__text .w.on { color: var(--wood); }
.js .statement__text em .w.on { color: var(--rust); }

/* ticker */
.ticker { position: relative; overflow: hidden; padding: clamp(18px, 2.4vw, 30px) 0; border-block: 1px solid var(--line); }
.ticker:hover .ticker__track, .ticker.is-paused .ticker__track { animation-play-state: paused; }
.ticker__pause { position: absolute; right: var(--gutter); top: 50%; translate: 0 -50%; width: 40px; height: 40px; border-radius: 50%; background: #f8f5efe6; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); box-shadow: 0 4px 14px -6px #3b2a2059; }
.ticker__track { display: flex; width: max-content; animation: ticker 48s linear infinite; }
.ticker span { display: flex; align-items: center; font-size: clamp(1.6rem, 3.6vw, 3.2rem); font-weight: 200; font-variation-settings: 'wdth' 120; color: var(--wood); white-space: nowrap; }
.ticker span::after { content: ''; width: 9px; height: 9px; margin: 0 clamp(22px, 3vw, 44px); background: var(--brass); rotate: 45deg; }
@keyframes ticker { to { translate: -50% 0; } }

/* ── 3 · Factory: a photo with the card over it ─────── */
.feature { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); align-items: end; }
.feature__img { grid-column: 6 / -1; grid-row: 1 / 3; width: 100%; aspect-ratio: 5 / 6; object-fit: cover; filter: grayscale(1) contrast(1.04); }
.feature__small { grid-column: 2 / 5; grid-row: 1; align-self: start; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; filter: grayscale(1) contrast(1.04); }
.feature__card { grid-column: 1 / 8; grid-row: 2; z-index: 1; display: grid; gap: 18px; margin-bottom: clamp(32px, 5vw, 72px); padding: clamp(28px, 3.4vw, 48px); background: var(--raised); box-shadow: 0 40px 80px -40px #3b2a2059; }
.feature__card p { margin: 0; }

/* ── 4 · Experience Center: stacked room panels, then the deck of finishes ── */
.zone-stack { display: grid; gap: 0; margin-top: clamp(40px, 5vw, 64px); }
.zonep { position: sticky; top: calc(var(--nav-h) + 12px); height: calc(100svh - var(--nav-h) - 24px); max-height: 860px; overflow: hidden; background: var(--deep); }
.zonep + .zonep { margin-top: 36svh; } /* each room holds the screen before the next slides over it */
.zonep > img { width: 100%; height: 100%; object-fit: cover; }
.zonep .render-label { position: absolute; right: 14px; bottom: 14px; padding: 5px 9px; background: var(--raised); }
.zonep__label { position: absolute; left: 14px; top: 14px; display: grid; gap: 6px; padding: 18px 24px 20px; min-width: 260px; background: var(--raised); }
.zonep__name { margin: 0; font-size: clamp(1.8rem, 3.6vw, 3.4rem); font-weight: 200; font-variation-settings: 'wdth' 122; line-height: 1; color: var(--wood); }
.ec .tour { margin-top: clamp(56px, 7vw, 96px); }

/* the material library: a deck of samples. Pick a finish from the list and its sample comes to the front;
   the others fan out behind it. Each sample is a board with a thickness and a punched tag */
.mlib { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: 'text deck' 'list deck'; grid-template-rows: auto 1fr; gap: 28px var(--gutter); margin-top: clamp(72px, 9vw, 130px); padding-top: clamp(40px, 5vw, 64px); border-top: 1px solid var(--line); }
.mlib__text { grid-area: text; display: grid; gap: 16px; }
.mlib__list { grid-area: list; list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--brass); }
.mlib__list button { display: grid; grid-template-columns: 36px minmax(0, 12rem) minmax(0, 1fr); align-items: center; gap: 0 18px; width: 100%; padding: 11px 0; border: 0; border-bottom: 1px solid var(--line); background: none; text-align: left; color: var(--muted); cursor: pointer; transition: color 300ms, padding 400ms var(--soft-close); }
.mlib__list i { width: 36px; height: 36px; border-radius: 3px; box-shadow: inset 0 0 0 1px #0000001a; }
.mlib__list b { font-size: 1.125rem; font-weight: 300; font-variation-settings: 'wdth' 114; color: var(--wood); transition: color 300ms; }
.mlib__list span { font-size: .875rem; line-height: 1.4; }
.mlib__list button[aria-pressed='true'] { padding-left: 10px; color: var(--graphite); }
.mlib__list button[aria-pressed='true'] b { color: var(--rust); }
.mlib__deck { grid-area: deck; align-self: center; justify-self: center; width: min(100%, 440px); aspect-ratio: 4 / 5; perspective: 1400px; cursor: pointer; }
.mlib__stack { --rx: 0deg; --ry: 0deg; position: relative; height: 100%; transform: rotateX(var(--rx)) rotateY(var(--ry)); transform-style: preserve-3d; transition: transform .6s var(--soft-close); }
.sample {
  --j: 0; position: absolute; inset: 4% 14% 8% 6%; border-radius: 6px;
  translate: calc(var(--j) * 26px) calc(var(--j) * -10px); rotate: calc(var(--j) * 3.5deg); scale: calc(1 - var(--j) * .04);
  z-index: calc(10 - var(--j)); filter: brightness(calc(1 - var(--j) * .06));
  box-shadow: inset 0 1px 0 #ffffff59, 0 2px 0 #d9cfc0, 0 4px 0 #c9bead, 0 6px 0 #b8ab97, 0 40px 60px -30px #3b2a2099;
  transition: translate .8s var(--soft-close), rotate .8s var(--soft-close), scale .8s var(--soft-close), filter .8s, opacity .5s;
}
.sample.is-far { opacity: 0; }
.sample__tag { position: absolute; left: 14px; bottom: 16px; padding: 7px 12px 7px 26px; border-radius: 2px; background: var(--raised); box-shadow: 0 4px 10px -4px #3b2a2059; font-size: .8125rem; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--wood); }
.sample__tag::before { content: ''; position: absolute; left: 10px; top: 50%; width: 7px; height: 7px; translate: 0 -50%; border-radius: 50%; background: var(--cream); box-shadow: inset 0 1px 2px #3b2a2066; }
/* the finishes, for the samples and the chips in the list */
.m-laminate { background: url(assets/img/mat-walnut.jpg) center / cover; }
.m-acrylic { background: linear-gradient(118deg, #0000 26%, #ffffff4d 30%, #0000 35%, #0000 57%, #ffffff2e 59%, #0000 62%), radial-gradient(120% 80% at 20% 0%, #ffffff33, #0000 60%), linear-gradient(160deg, #a64f34, #6f2d1c); }
.m-veneer { background: url(assets/img/mat-dark-ribbed.jpg) center / cover; }
.m-pu { background: url(assets/img/mat-ribbed-ivory.jpg) center / cover; }
.m-glass { background: repeating-linear-gradient(90deg, #ffffff40 0 2px, #ffffff0d 2px 7px, #00000026 7px 10px), url(assets/img/tex-glass.jpg) center / cover; }
.m-stone { background: url(assets/img/tex-stone.jpg) center / cover; }
.m-hardware { background: linear-gradient(90deg, #0000 calc(50% - 4px), #8d6f43 0, #e2c792 calc(50% - 1px), var(--brass) calc(50% + 2px), #7a6039 calc(50% + 4px), #0000 0) center / 100% 52% no-repeat, linear-gradient(90deg, #0000 calc(50% + 4px), #3b2a2026 0 calc(50% + 9px), #0000 0) center 58% / 100% 52% no-repeat, linear-gradient(#efe9df, #ddd3c4); }

/* ── 5 · How we work: seven photo panels, one open at a time ── */
.how__head .eyebrow { margin-bottom: 14px; }
.process { list-style: none; margin: 0; padding: 0; display: flex; gap: 8px; height: clamp(440px, 64svh, 620px); }
.step { position: relative; flex: 1 1 0; min-width: 0; overflow: hidden; border-radius: 4px; background: var(--deep); transition: flex-grow .9s var(--soft-close); }
.step__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* a closed step is veiled in cream; the open one shows its picture */
.step::before { content: ''; position: absolute; inset: 0; z-index: 1; background: var(--cream); opacity: .4; transition: opacity .6s; pointer-events: none; }
.step.is-open { flex-grow: 5.2; }
.step.is-open::before { opacity: 0; }
/* closed: its number at the top, its name running up from the bottom */
.step button { position: absolute; inset: 0; z-index: 2; width: 100%; padding: 0; border: 0; background: none; cursor: pointer; transition: opacity .4s; }
.step button b, .step button span { position: absolute; left: 50%; translate: -50% 0; background: #f8f5efe0; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); color: var(--wood); }
.step button b { top: 14px; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; font-size: .8125rem; font-weight: 500; }
.step button span { bottom: 14px; padding: 16px 10px; border-radius: 999px; writing-mode: vertical-rl; rotate: 180deg; font-size: .875rem; letter-spacing: .05em; white-space: nowrap; }
.step.is-open button { opacity: 0; cursor: default; }
/* open: a frosted card with the number, the step and one line */
.step__card { position: absolute; left: 14px; bottom: 14px; z-index: 3; width: min(380px, calc(100% - 28px)); display: grid; gap: 6px; padding: 18px 22px 22px; pointer-events: none; background: #f8f5efc7; -webkit-backdrop-filter: blur(16px) saturate(1.15); backdrop-filter: blur(16px) saturate(1.15); opacity: 0; translate: 0 14px; transition: opacity .3s, translate .6s var(--soft-close); }
.step.is-open .step__card { opacity: 1; translate: 0 0; transition-delay: .35s; }
.step__card b { font-size: 2.8rem; line-height: 1; font-weight: 150; font-variation-settings: 'wdth' 125; color: var(--rust); }
.step__card h3 { margin: 4px 0 0; font-size: clamp(1.35rem, 2vw, 1.9rem); font-weight: 250; font-variation-settings: 'wdth' 118; line-height: 1.1; color: var(--wood); }
.step__card p { margin: 0; font-size: .9375rem; line-height: 1.5; color: var(--muted); }
/* without scripts every step shows its card */
html:not(.js) .step button { display: none; }
html:not(.js) .step__card { opacity: 1; translate: none; }

/* ── 6 · Commercial: a bento of store types ─────────── */
.commercial__head > div { gap: 14px; }
.shops { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-auto-rows: minmax(clamp(190px, 20vw, 290px), auto); gap: 10px; }
.shop { position: relative; margin: 0; overflow: hidden; border-radius: 4px; background: var(--deep); }
.shop img { width: 100%; height: 100%; object-fit: cover; transition: scale 1.4s var(--soft-close); }
.shop:hover img { scale: 1.045; }
.shop figcaption { position: absolute; left: 12px; bottom: 12px; padding: 8px 14px; border-radius: 999px; background: #f8f5efd6; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); font-size: .875rem; color: var(--wood); }
.shop--a { grid-column: 1 / 8; grid-row: span 2; }
.shop--b, .shop--c { grid-column: 8 / -1; }
.shop--d { grid-column: 5 / -1; }
.shops__card { grid-column: 1 / 5; display: grid; align-content: space-between; gap: 20px; padding: clamp(22px, 2.4vw, 32px); border-radius: 4px; background: var(--raised); }
.shops__card .eyebrow { margin-bottom: 10px; }
.shops__line { margin: 0; font-size: clamp(1.25rem, 1.8vw, 1.65rem); font-weight: 250; font-variation-settings: 'wdth' 116; line-height: 1.2; color: var(--wood); text-wrap: balance; }

/* clients: their own logos, in their own colours (multiply drops the white behind them onto the cream) */
.clients { margin-top: clamp(48px, 6vw, 88px); }
.clients__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 20px; padding-bottom: 16px; border-bottom: 1px solid var(--line); }
.clients__title { margin: 0; font-size: clamp(1.25rem, 1.8vw, 1.6rem); font-weight: 250; font-variation-settings: 'wdth' 116; color: var(--wood); }
.clients__logos { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.clients__logos li { display: grid; place-items: center; height: clamp(110px, 11vw, 150px); border-bottom: 1px solid var(--line); }
.clients__logos li:not(:nth-child(4n)) { border-right: 1px solid var(--line); }
.clients__logos img { width: calc(var(--w) * 1px); max-width: 78%; height: auto; mix-blend-mode: multiply; }

/* ── 8 · Footer: the last ask, where to find us, and the name ── */
.foot__ask { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 28px var(--gutter); align-items: end; padding-bottom: clamp(48px, 6vw, 84px); border-bottom: 1px solid var(--line); }
.foot__ask .eyebrow { margin-bottom: 16px; }
.foot__ask .h2 { max-width: 11em; font-size: clamp(2.4rem, 5.4vw, 5rem); line-height: 1.02; }
.foot__acts { display: grid; gap: 18px; justify-items: start; }
.foot__book { border: 0; padding: 0 0 2px; background-color: transparent; cursor: pointer; font-size: .9375rem; }
.foot__grid { display: grid; grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr)); gap: 36px var(--gutter); padding: clamp(40px, 5vw, 64px) 0 clamp(48px, 6vw, 80px); }
.foot__place { position: relative; align-self: start; margin: 0; overflow: hidden; aspect-ratio: 4 / 3; border-radius: 4px; background: var(--cream); }
.foot__place img { width: 100%; height: 100%; object-fit: cover; transition: scale 1.4s var(--soft-close); }
.foot__place:hover img { scale: 1.04; }
.foot__place .render-label { position: absolute; right: 10px; top: 10px; padding: 5px 9px; background: var(--raised); }
.foot__place figcaption { position: absolute; left: 12px; bottom: 12px; display: grid; gap: 2px; padding: 12px 16px 14px; border-radius: 4px; background: #f8f5efd9; -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.foot__place b { font-size: 1.25rem; font-weight: 300; font-variation-settings: 'wdth' 116; color: var(--wood); }
.foot__place figcaption > span:last-child { font-size: .8125rem; color: var(--muted); }
.foot__col h3:not(:first-child) { margin-top: 28px; }
.foot__col address { font-size: 1.05rem; }
.foot__col p { color: var(--muted); }
/* the name across the bottom: the K and the wordmark, sized to the full width, rising into view */
.foot__mark { display: block; container-type: inline-size; text-decoration: none; }
.foot__lock { display: flex; align-items: center; gap: 2.4cqw; }
.foot__mark .brand__k { width: 9.4cqw; height: 9.4cqw; fill: var(--wood); }
.foot__word { width: 88.2cqw; aspect-ratio: 2884 / 335; background: var(--wood); -webkit-mask: url(assets/brand/wordmark-white.png) center / contain no-repeat; mask: url(assets/brand/wordmark-white.png) center / contain no-repeat; }
.foot__mark:hover .brand__k path:nth-child(1) { translate: -60px 0; }
.foot__mark:hover .brand__k path:nth-child(2) { translate: 70px -70px; }
.foot__mark:hover .brand__k path:nth-child(3) { translate: 70px 70px; }
@supports (animation-timeline: view()) {
  .foot__lock { animation: foot-rise linear both; animation-timeline: view(); animation-range: entry 0% entry 100%; }
  @keyframes foot-rise { from { opacity: 0; translate: 0 35%; } }
}
.foot .legal { align-items: center; }
.foot__top { color: var(--muted); text-decoration: none; }
.foot__top::after { content: ''; display: inline-block; width: 7px; height: 7px; margin-left: .6em; border-left: 1.5px solid currentColor; border-top: 1.5px solid currentColor; rotate: 45deg; vertical-align: -.05em; }
.foot__top:hover { color: var(--graphite); }

/* ── Small screens ──────────────────────────────────── */
@media (max-width: 860px) {
  .nav, .nav.is-solid { background: none; border-color: transparent; padding-top: 6px; }
  .brand { height: 44px; padding: 0 14px 0 12px; }
  .brand__word { width: 92px; }
  .nav__menu { gap: 10px; height: 44px; padding: 0 18px 0 16px; font-size: .9375rem; color: var(--wood); }
  .nav__menu span { width: 16px; height: 8px; border-block: 1.5px solid currentColor; }
  .story .reveal { height: 240svh; }
  .floats { --hy: 34%; }
  .float:nth-child(3), .float:nth-child(5), .float:nth-child(6), .float:nth-child(9) { display: none; }
  .float:nth-child(1) { --x: 20% !important; --y: 15% !important; --w: 36vw !important; }
  .float:nth-child(2) { --x: 12% !important; --y: 47% !important; --w: 22vw !important; }
  .float:nth-child(4) { --x: 22% !important; --y: 64% !important; --w: 20vw !important; }
  .float:nth-child(7) { --x: 86% !important; --y: 52% !important; --w: 22vw !important; }
  .float:nth-child(8) { --x: 84% !important; --y: 17% !important; --w: 28vw !important; }
  .hero__card { bottom: 84px; padding: 20px; }
  .hero__slider { right: auto; left: var(--gutter); bottom: auto; top: calc(var(--nav-h) + 10px); }
  .hero__slider button { width: 30px; }
  .statement { grid-template-columns: 1fr; }
  .statement__text, .statement .lede { grid-column: 1; }
  .feature { grid-template-columns: 1fr; }
  .feature__img, .feature__small, .feature__card { grid-column: 1; grid-row: auto; }
  .feature__img { aspect-ratio: 4 / 5; }
  .feature__small { display: none; }
  .feature__card { margin: -64px 12px 0; }
  .zonep { height: 72svh; }
  .zonep__label { right: 14px; min-width: 0; padding: 14px 16px 16px; }
  .mlib { grid-template-columns: 1fr; grid-template-areas: 'text' 'deck' 'list'; }
  .mlib__deck { width: min(78vw, 340px); }
  .mlib__list button { grid-template-columns: 32px minmax(0, 1fr); }
  .mlib__list i { width: 32px; height: 32px; grid-row: span 2; }
  .shops { grid-template-columns: 1fr 1fr; grid-auto-rows: auto; gap: 8px; }
  .shop--a, .shop--d, .shops__card { grid-column: 1 / -1; grid-row: auto; }
  .shop--b, .shop--c { grid-column: auto; }
  .shop--a { aspect-ratio: 4 / 3; }
  .shop--b, .shop--c { aspect-ratio: 1; }
  .shop--d { aspect-ratio: 2 / 1; }
  .shops__card { order: 1; }
  .shop figcaption { left: 8px; bottom: 8px; padding: 6px 11px; font-size: .8125rem; }
  .foot__ask { grid-template-columns: 1fr; }
  .foot__grid { grid-template-columns: 1fr 1fr; gap: 32px 20px; }
  .foot__place, .foot__grid > :nth-child(2) { grid-column: 1 / -1; }
  .clients__logos { grid-template-columns: 1fr 1fr; }
  .clients__logos li:not(:nth-child(4n)) { border-right: 0; }
  .clients__logos li:nth-child(odd) { border-right: 1px solid var(--line); }
  .clients__logos li { height: 96px; }
  .clients__logos img { width: calc(var(--w) * .72px); }
  .process { flex-direction: column; height: auto; gap: 6px; }
  .step { flex: none; height: 64px; transition: height .8s var(--soft-close); }
  .step.is-open { height: min(460px, 112vw); }
  .step button b { left: 12px; top: 50%; translate: 0 -50%; width: 38px; height: 38px; }
  .step button span { left: 60px; top: 50%; bottom: auto; translate: 0 -50%; padding: 8px 14px; writing-mode: horizontal-tb; rotate: none; }
  .step__card { right: 12px; left: 12px; bottom: 12px; width: auto; }
}
@media (prefers-reduced-motion: reduce) {
  .ticker__track, .float, .foot__lock { animation: none; }
  .sample, .mlib__stack { transition: none; }
  .ticker { overflow-x: auto; }
}

/* "Book a visit to see all 22 rooms" is a button styled as a text link */
button.link { border: 0; cursor: pointer; color: var(--rust); }