/* Homade website — v2.3 theme, in HOMADE's brand identity (brochure + logo):
   white, HOMADE black #231F20, logo ash #878592, light ash #D5D5D5; Inter with Extra Bold display capitals.
   No gold, brass, brown or amber in the interface — warmth comes only from real photographs.
   The 3D entrance, sideways project rail and product films are layered on top of plain, readable HTML. */

@font-face { font-family: "Inter"; font-style: normal; font-weight: 300; font-display: swap; src: url(../fonts/inter-latin-300-normal.woff2) format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 400; font-display: swap; src: url(../fonts/inter-latin-400-normal.woff2) format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 500; font-display: swap; src: url(../fonts/inter-latin-500-normal.woff2) format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 600; font-display: swap; src: url(../fonts/inter-latin-600-normal.woff2) format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 800; font-display: swap; src: url(../fonts/inter-latin-800-normal.woff2) format("woff2"); }

:root {
  --white: #FFFFFF;       /* page background */
  --stone: #F2F2F2;       /* soft ash: alternate sections, cards, fields */
  --ink: #231F20;         /* HOMADE black: headings, buttons, links */
  --black: #050608;       /* night: footer, dark bands */
  --text: #3D3A3B;        /* body text */
  --grey: #6E6B6C;        /* secondary text (AA on white) */
  --mark: #878592;        /* logo ash: the "m", lines, the preloader (not for small text: 3.6:1) */
  --ash-text: #6B6976;    /* the same ash, deep enough for small text (5.4:1 on white, 4.8:1 on soft ash) */
  --line: #D5D5D5;        /* light ash: rules, blocks */
  --edge: #D5D5D5;
  --edge-2: #C4C4C4;
  --font: "Inter", "Helvetica Neue", Arial, sans-serif;
  --gut: clamp(20px, 4.4vw, 64px);
  --max: 1360px;
  --sec: clamp(72px, 10vw, 148px);
  --track: .24em;         /* Homade's spaced capitals */
  --hd: 64px;             /* header height: pinned scenes start below it, never behind it */
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 80px; }
body { margin: 0; background: var(--white); color: var(--text); font: 400 17px/1.7 var(--font); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
img, video { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: .22em; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
h1, h2, h3 { font-family: var(--font); font-weight: 400; margin: 0; line-height: 1.15; text-wrap: balance; color: var(--ink); }
p { margin: 0 0 1em; }
.vh { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: 12px; top: -60px; z-index: 100; background: var(--ink); color: var(--white); padding: 10px 16px; font: 500 14px var(--font); }
.skip:focus { top: 12px; }

/* Display type: heavy black capitals, as in the brochure ("OUR DESIGN PHILOSOPHY"). */
.h2, .ph__title, .cta__h, .pj__title, .nx__t, .im__h, .fm__h { text-transform: uppercase; letter-spacing: -.01em; font-weight: 800; line-height: 1.02; }
.h2 { font-size: clamp(30px, 4vw, 60px); }
.label { font: 500 11.5px/1.4 var(--font); letter-spacing: .24em; text-transform: uppercase; color: var(--ash-text); }
.lead { font-size: clamp(17px, 1.3vw, 19px); line-height: 1.7; color: var(--grey); max-width: 38em; }
.prose { max-width: 40em; }
.prose p, .prose li { color: var(--text); }
.prose h3, .prose h4 { font-size: 15px; font-weight: 500; text-transform: uppercase; letter-spacing: .16em; margin: 1.8em 0 .6em; }
.prose blockquote { margin: 1.5em 0; padding-left: 1.2em; border-left: 1px solid var(--ink); }
.empty { color: var(--grey); }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: .5em; min-height: 48px; padding: 0 28px; border: 1px solid var(--ink); border-radius: 48px; background: transparent; color: var(--ink);
  font: 500 12px/1 var(--font); text-transform: uppercase; letter-spacing: .2em; text-decoration: none; cursor: pointer; transition: background .3s, color .3s, border-color .3s; }
.btn:hover { background: var(--ink); color: var(--white); }
.btn--solid { background: var(--ink); color: var(--white); }
.btn--solid:hover { background: var(--black); }
.btn--light { background: var(--white); border-color: var(--white); color: var(--ink); }
.btn--light:hover { background: transparent; color: var(--white); }
.btn--ghost { border-color: rgba(255, 255, 255, .55); color: var(--white); }
.btn--ghost:hover { background: var(--white); color: var(--ink); border-color: var(--white); }

/* ------------------------------------------------------------------ header */
.preview-bar { position: sticky; top: 0; z-index: 60; display: flex; justify-content: space-between; gap: 12px; padding: 8px var(--gut); background: var(--ink); color: var(--white); font: 400 12.5px var(--font); }
.hd { position: sticky; top: 0; z-index: 50; background: var(--white); transition: background .35s, color .35s, box-shadow .35s; }
.is-preview .hd { top: 34px; }
.is-preview { --hd: 98px; }
.hd__in { max-width: var(--max); margin: 0 auto; padding: 0 var(--gut); height: 64px; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.brand { display: inline-flex; align-items: center; text-decoration: none; }
.brand__logo { width: 128px; height: auto; }
.brand__logo--light { display: none; }
.hd__nav { display: flex; align-items: center; gap: 34px; }
.hd__nav ul { display: flex; gap: 30px; list-style: none; margin: 0; padding: 0; }
.hd__nav ul a { font: 400 12.5px/1 var(--font); text-transform: uppercase; letter-spacing: .2em; text-decoration: none; padding: 8px 0; border-bottom: 1px solid transparent; }
.hd__nav ul a:hover, .hd__nav ul a[aria-current] { border-bottom-color: currentColor; }
.hd__cta { min-height: 36px; padding: 0 18px; font-size: 11px; }
.hd__menu { display: none; }
.is-scrolled .hd { box-shadow: 0 1px 0 var(--line); }
.has-hero .hd { position: fixed; left: 0; right: 0; background: transparent; color: var(--white); }
.has-hero .hd .brand__logo--dark { display: none; }
.has-hero .hd .brand__logo--light { display: block; }
.has-hero .hd .hd__cta { background: var(--white); color: var(--ink); border-color: var(--white); }
.has-hero.is-scrolled .hd { background: rgba(255, 255, 255, .96); color: var(--ink); }
.has-hero.is-scrolled .hd .brand__logo--dark { display: block; }
.has-hero.is-scrolled .hd .brand__logo--light { display: none; }
.has-hero.is-scrolled .hd .hd__cta { background: var(--ink); color: var(--white); border-color: var(--ink); }
/* Over the white 3D foyer the header is a solid white bar with the dark logo; the scene starts below it. */
.is-preview.has-hero .hd { top: 34px; }

@media (max-width: 960px) {
  :root { --hd: 56px; }
  .is-preview { --hd: 90px; }
  .hd__in { height: 56px; }
  .brand__logo { width: 112px; }
  .hd__menu { display: inline-grid; place-items: center; gap: 6px; width: 44px; height: 44px; padding: 12px 9px; background: none; border: 0; color: inherit; cursor: pointer; }
  .hd__menu span:not(.vh) { display: block; width: 26px; height: 1px; background: currentColor; transition: transform .25s; }
  .hd__menu[aria-expanded="true"] span:nth-child(1) { transform: translateY(3.5px) rotate(45deg); }
  .hd__menu[aria-expanded="true"] span:nth-child(2) { transform: translateY(-3.5px) rotate(-45deg); }
  .hd__nav { position: fixed; inset: 56px 0 0; flex-direction: column; align-items: stretch; gap: 0; padding: 12px var(--gut) 40px; background: var(--white); color: var(--ink); overflow-y: auto;
    visibility: hidden; opacity: 0; transform: translateY(-8px); transition: opacity .25s, transform .25s, visibility 0s .25s; }
  .menu-open .hd__nav { visibility: visible; opacity: 1; transform: none; transition: opacity .25s, transform .25s; }
  .menu-open { overflow: hidden; }
  .menu-open .hd, .menu-open.has-hero .hd, .menu-open.im-active.has-hero.is-scrolled .hd { background: var(--white); color: var(--ink); }
  .menu-open.has-hero .hd .brand__logo--dark { display: block; }
  .menu-open.has-hero .hd .brand__logo--light { display: none; }
  .hd__nav ul { flex-direction: column; gap: 0; }
  .hd__nav ul a { display: block; padding: 20px 0; border-bottom: 1px solid var(--line); font-size: 15px; letter-spacing: .28em; }
  .hd__nav ul a[aria-current] { border-bottom-color: var(--line); font-weight: 500; }
  .hd__cta { margin-top: 28px; min-height: 52px; font-size: 12.5px; }
  .has-hero .hd .hd__nav .hd__cta, .menu-open .hd .hd__cta { background: var(--ink); color: var(--white); border-color: var(--ink); }
}

main { display: block; }
main > :is(section, header, article, nav):not(.hero):not(.cta):not(.im):not(.fm):not(.pf--side) { max-width: var(--max); margin-left: auto; margin-right: auto; padding-left: var(--gut); padding-right: var(--gut); }

/* ------------------------------------------------------------------ a photograph mounted on a board (depth, lean toward the pointer) */
.slab { position: relative; margin: 0; background: var(--stone); transform-style: preserve-3d;
  box-shadow: 1px 1px 0 var(--edge), 2px 2px 0 var(--edge), 3px 3px 0 var(--edge), 4px 4px 0 var(--edge-2), 18px 22px 40px -14px rgba(0, 0, 0, .18);
  transform: perspective(1400px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateZ(0); transition: transform .55s cubic-bezier(.2, .7, .2, 1), box-shadow .55s; }
.slab img, .slab video { width: 100%; height: 100%; object-fit: cover; }
.slab--flat { transform: none; }
.tile:hover .slab, .slab.is-tilting { box-shadow: 1px 1px 0 var(--edge), 2px 2px 0 var(--edge), 3px 3px 0 var(--edge), 4px 4px 0 var(--edge), 5px 5px 0 var(--edge), 6px 6px 0 var(--edge-2), 30px 38px 60px -18px rgba(0, 0, 0, .24); }

/* ------------------------------------------------------------------ 3D opening: a white foyer, black doors, then the rooms */
.im { position: relative; background: var(--white); color: var(--ink); }
.im__stage { position: relative; height: 100vh; height: 100svh; overflow: hidden; background: var(--white); }
.im__still, .im__poster img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.im__poster { display: none; }
.im__canvas { position: absolute; inset: 0; width: 100% !important; height: 100% !important; opacity: 0; transition: opacity 1.2s ease; }
.im.is-3d .im__canvas { opacity: 1; }
/* A soft white haze behind the words — never a dark gradient. */
.im__shade { position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: var(--haze, 1); transition: opacity .2s;
  background: linear-gradient(90deg, rgba(255, 255, 255, .82) 0%, rgba(255, 255, 255, .5) 26%, rgba(255, 255, 255, 0) 52%); }
.im__cue, .im__skip { display: none; }
.im__panels { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.im__panel { position: absolute; left: 0; right: 0; bottom: 0; max-width: var(--max); margin: 0 auto; padding: 0 var(--gut) clamp(52px, 10vh, 110px); pointer-events: auto; }
.im__panel + .im__panel { display: none; }
.im__eyebrow { margin: 0 0 18px; font: 500 11.5px var(--font); letter-spacing: .26em; text-transform: uppercase; color: var(--ash-text); }
.im__h { font-size: clamp(36px, 5.6vw, 92px); max-width: 12ch; color: var(--ink); }
.im__p { margin: 20px 0 0; max-width: 30em; font-size: clamp(16px, 1.3vw, 19px); color: var(--text); }
.im__act { display: flex; flex-wrap: wrap; align-items: center; gap: 26px; margin: 34px 0 0; }
.im__link { font: 500 12px var(--font); text-transform: uppercase; letter-spacing: .2em; color: var(--ink); }
.im__rooms { background: var(--white); color: var(--ink); }
.im__rooms ul { list-style: none; margin: 0 auto; padding: var(--sec) var(--gut) 0; max-width: var(--max); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; }
.im__rooms img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.im__rooms h2 { font-size: 15px; font-weight: 600; text-transform: uppercase; letter-spacing: .08em; margin: 18px 0 6px; }
.im__rooms p { color: var(--grey); margin: 0; }
@media (max-width: 860px) { .im__rooms ul { grid-template-columns: 1fr; } .im__rooms img { aspect-ratio: 4 / 3; } }
.im__after { height: 0; }

/* Live 3D: a long, slow scroll stage. Height is set by the script from the room count. */
.im.is-live { height: 770vh; }
.im.is-live .im__stage { position: sticky; top: var(--hd); height: calc(100vh - var(--hd)); height: calc(100svh - var(--hd)); }
.im.is-live .im__poster { display: block; }
.im.is-live .im__panel { opacity: 0; visibility: hidden; display: block; will-change: opacity, transform; padding-bottom: clamp(96px, 15vh, 160px); }
.im.is-live .im__panel--arrival { opacity: 1; visibility: visible; }
.im.is-live .im__cue { display: flex; flex-direction: column; align-items: center; gap: 12px; position: absolute; left: 50%; bottom: 26px; z-index: 5; transform: translateX(-50%);
  font: 500 10.5px var(--font); letter-spacing: .3em; text-transform: uppercase; color: var(--grey); margin: 0; pointer-events: none; }
.im__cue::after { content: ""; width: 1px; height: 38px; background: linear-gradient(var(--ink), rgba(35, 31, 32, 0)); animation: cue 2.4s ease-in-out infinite; transform-origin: top; }
@keyframes cue { 0% { transform: scaleY(0); } 50% { transform: scaleY(1); } 100% { transform: scaleY(1); opacity: 0; } }
.im.is-live .im__skip { display: block; position: absolute; right: var(--gut); top: 14px; z-index: 5; font: 500 10.5px var(--font); letter-spacing: .26em; text-transform: uppercase;
  color: var(--ink); text-decoration: none; padding: 10px 0; border-bottom: 1px solid var(--mark); }
.im.is-live .im__skip:hover, .im.is-live .im__skip:focus-visible { border-color: var(--ink); }
.im.is-live .im__stage { --im-out: 0; }
.im.is-live .im__stage::after { content: ""; position: absolute; inset: 0; z-index: 6; background: var(--white); opacity: var(--im-out); pointer-events: none; }
.im.is-live + .im__rooms { display: none; }
@media (min-width: 701px) { .im.is-live .im__panel--arrival .im__h { max-width: 11ch; } }
@media (max-width: 700px) {
  .im__shade { background: linear-gradient(0deg, rgba(255, 255, 255, .97) 0%, rgba(255, 255, 255, .9) 18%, rgba(255, 255, 255, 0) 36%); }
  .im__h { font-size: clamp(30px, 8.6vw, 40px); }
  .im.is-live .im__cue { display: none; }
  .im.is-live .im__skip { top: auto; bottom: 26px; right: auto; left: var(--gut); }
}
@media (prefers-reduced-motion: reduce) { .im__cue::after { animation: none; } }

/* ------------------------------------------------------------------ the original hero (other pages may still use it) */
.hero { position: relative; min-height: 100svh; display: grid; background: var(--black); color: var(--white); overflow: hidden; }
.hero__stage { display: grid; min-height: 100svh; }
.hero__media { grid-area: 1 / 1; position: relative; }
.hero__media video, .hero__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0, 0, 0, .4), rgba(0, 0, 0, .05) 40%, rgba(0, 0, 0, .6)); }
.hero--none .hero__media::after { display: none; }
.hero__copy { grid-area: 1 / 1; align-self: end; position: relative; z-index: 2; width: 100%; max-width: var(--max); margin: 0 auto; padding: 0 var(--gut) clamp(52px, 10vh, 110px); }
.hero__kicker { font: 400 12.5px var(--font); letter-spacing: .24em; text-transform: uppercase; margin-bottom: 18px; }
.hero__title { font-size: clamp(28px, 4.4vw, 64px); text-transform: uppercase; letter-spacing: .14em; max-width: 20ch; }
.hero__sub { margin: 20px 0 0; max-width: 34em; font-size: clamp(16px, 1.3vw, 19px); }
.hero__act { display: flex; flex-wrap: wrap; align-items: center; gap: 26px; margin: 32px 0 0; }
.hero__link { font: 400 12.5px var(--font); text-transform: uppercase; letter-spacing: .2em; }

/* ------------------------------------------------------------------ page header */
.ph { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 32px clamp(24px, 5vw, 80px); align-items: end; padding-top: clamp(64px, 10vw, 140px); padding-bottom: clamp(36px, 5vw, 72px); }
.ph__title { font-size: clamp(38px, 6.4vw, 96px); color: var(--ink); }
.ph__sub { margin: 0; color: var(--grey); font-size: clamp(16px, 1.3vw, 19px); max-width: 30em; }
@media (max-width: 760px) { .ph { grid-template-columns: 1fr; } }

/* ------------------------------------------------------------------ text */
.tx { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: 24px clamp(24px, 6vw, 96px); padding-top: calc(var(--sec) * .5); padding-bottom: calc(var(--sec) * .5); }
.tx--plain .tx__b { grid-column: 2; }
.tx--c { grid-template-columns: minmax(0, 1fr); max-width: calc(780px + var(--gut) * 2) !important; text-align: center; }
.tx--c .tx__b { grid-column: auto; margin: 0 auto; }
.tx--c .tx__h { margin-bottom: 8px; }
.ph + .tx { padding-top: 0; }
@media (max-width: 760px) { .tx { grid-template-columns: 1fr; } .tx--plain .tx__b { grid-column: auto; } }

/* ------------------------------------------------------------------ image with text */
.it { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(32px, 6vw, 96px); align-items: center; padding-top: calc(var(--sec) * .6); padding-bottom: calc(var(--sec) * .6); }
.it--r .it__media { order: 2; }
.it .h2 { margin-bottom: 24px; }
.it__media .slab { aspect-ratio: 4 / 5; }
@media (max-width: 860px) { .it { grid-template-columns: 1fr; } .it--r .it__media { order: 0; } .it__media .slab { aspect-ratio: 4 / 3; } }

/* ------------------------------------------------------------------ services (cards) and steps */
.svc { padding-top: var(--sec); padding-bottom: calc(var(--sec) * .6); }
.svc__head { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 24px clamp(24px, 5vw, 80px); align-items: end; margin-bottom: clamp(36px, 5vw, 64px); }
.svc__head .lead { margin: 0; }
.svc__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 clamp(24px, 3vw, 48px); }
.svc__list--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.svc__list--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.svc__item { border-top: 1px solid var(--ink); padding: 22px 0 40px; }
.svc__t { font-size: 15px; font-weight: 600; text-transform: uppercase; letter-spacing: .08em; margin-bottom: 8px; }
.svc__item p { color: var(--grey); margin: 0; max-width: 26em; }
.svc__img { margin: 0 0 20px; aspect-ratio: 4 / 3; overflow: hidden; background: var(--line); }
.svc__img img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s cubic-bezier(.2, .7, .2, 1); }
.svc__item:hover .svc__img img { transform: scale(1.04); }
.svc__list--img .svc__item { border-top: 0; padding-top: 0; }
@media (max-width: 900px) { .svc__head { grid-template-columns: 1fr; } .svc__list, .svc__list--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .svc__list, .svc__list--2, .svc__list--4 { grid-template-columns: 1fr; } .svc__item { padding-bottom: 28px; } }

.st { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 40px clamp(32px, 6vw, 96px); padding-top: var(--sec); padding-bottom: var(--sec);
  background: var(--stone); box-shadow: 0 0 0 100vmax var(--stone); clip-path: inset(0 -100vmax); }
.st__head { position: sticky; top: 120px; align-self: start; }
.st__head .lead { margin-top: 18px; }
.st__list { list-style: none; margin: 0; padding: 0 0 0 36px; position: relative; counter-reset: st; }
.st__list::before { content: ""; position: absolute; left: 6px; top: 8px; bottom: 8px; width: 1px; background: var(--line); }
.st__list::after { content: ""; position: absolute; left: 6px; top: 8px; width: 1px; height: calc((100% - 16px) * var(--fill, 1)); background: var(--ink); }
.st__item { position: relative; padding: 0 0 clamp(40px, 6vw, 72px); counter-increment: st; transition: opacity .5s; }
.st__item::before { content: ""; position: absolute; left: -35px; top: 6px; width: 11px; height: 11px; border-radius: 50%; background: var(--stone); border: 1px solid var(--ink); transition: background .4s; }
.st__item.is-on::before { background: var(--ink); }
.st__n { font: 500 11.5px var(--font); letter-spacing: .24em; color: var(--ash-text); }
.st__n::before { content: counter(st, decimal-leading-zero); }
.st__t { font-size: clamp(20px, 2vw, 28px); font-weight: 800; text-transform: uppercase; letter-spacing: -.005em; margin: 6px 0 8px; }
.st__item p { color: var(--grey); margin: 0; max-width: 32em; }
.js-steps .st__item { opacity: .35; }
.js-steps .st__item.is-on { opacity: 1; }
@media (max-width: 860px) { .st { grid-template-columns: 1fr; } .st__head { position: static; } }

/* ------------------------------------------------------------------ portfolio */
.pf { padding-top: calc(var(--sec) * .55); padding-bottom: var(--sec); }
.ph + .pf { padding-top: 0; }
.im + .pf, .im__rooms + .pf { padding-top: var(--sec); }
.pf__head { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 24px clamp(24px, 5vw, 80px); align-items: end; margin-bottom: clamp(32px, 4vw, 56px); }
.pf__head .lead { margin: 0; }
@media (max-width: 760px) { .pf__head { grid-template-columns: 1fr; } }
.filters { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 clamp(28px, 3vw, 44px); }
.filters button { min-height: 38px; padding: 0 18px; border: 1px solid var(--line); border-radius: 40px; background: transparent; color: var(--grey); font: 400 11.5px var(--font); text-transform: uppercase; letter-spacing: .18em; cursor: pointer; }
.filters button:hover { border-color: var(--ink); color: var(--ink); }
.filters button[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--white); }
.slabs { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(44px, 5vw, 72px) clamp(20px, 2.4vw, 36px); }
.slabs__item[hidden] { display: none; }
.tile { display: block; text-decoration: none; color: inherit; }
/* Every project card uses the same frame; the admin-set focal point keeps the important part in view. */
.tile .slab, .tile:hover .slab, .tile .slab.is-tilting { aspect-ratio: 4 / 5; overflow: hidden; box-shadow: none; transform: none; }
.tile .slab img { transition: transform 1.1s cubic-bezier(.2, .7, .2, 1); }
a.tile:hover .slab img { transform: scale(1.035); }
.tile__cap { display: flex; flex-direction: column; gap: 6px; margin-top: 20px; }
.tile__n { font: 400 11px var(--font); letter-spacing: .24em; color: var(--grey); }
.tile__t { font: 400 13.5px/1.4 var(--font); text-transform: uppercase; letter-spacing: .16em; }
a.tile:hover .tile__t { text-decoration: underline; text-underline-offset: .3em; }
.tile__m { color: var(--grey); font: 300 13.5px/1.45 var(--font); }
.pf__more { margin: clamp(48px, 6vw, 80px) 0 0; }
@media (max-width: 1100px) { .slabs { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .slabs { grid-template-columns: 1fr; } }
/* Sideways rail: the section holds still while projects slide past — identical cards, a thin progress line. */
.pf--side { padding: var(--sec) 0; background: var(--stone); }
.pf--side .pf__head { max-width: var(--max); margin: 0 auto clamp(32px, 4vw, 56px); padding: 0 var(--gut); }
.hs { overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; padding: 0 var(--gut) 12px; scrollbar-width: none; }
.hs::-webkit-scrollbar { display: none; }
.hs__track { display: flex; gap: clamp(18px, 2.4vw, 36px); list-style: none; margin: 0; padding: 0; }
.hs__item { flex: 0 0 clamp(250px, 26vw, 400px); scroll-snap-align: start; }
.hs__item .tile .slab { aspect-ratio: 4 / 5; }
.hs__bar { position: relative; height: 1px; margin: clamp(28px, 4vh, 44px) var(--gut) 0; background: rgba(0, 0, 0, .12); }
.hs__bar::after { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 100%; background: var(--ink); transform-origin: left; transform: scaleX(var(--hs, 0)); }
[data-hscroll].is-pinned .hs { overflow: visible; padding: 0; }
[data-hscroll].is-pinned .hs__pin { position: sticky; top: var(--hd); height: calc(100vh - var(--hd)); height: calc(100svh - var(--hd)); display: flex; flex-direction: column; justify-content: center; overflow: hidden; }
[data-hscroll].is-pinned .hs__track { padding: 0 var(--gut); will-change: transform; }
.pf--side .pf__more { max-width: var(--max); margin: clamp(32px, 4vw, 48px) auto 0; padding: 0 var(--gut); }
@media (max-width: 760px) { .hs__item { flex-basis: 74vw; } }

/* ------------------------------------------------------------------ film */
.fm { position: relative; background: var(--white); padding: calc(var(--sec) * .5) 0 var(--sec); }
.fm__frame { --f: 1; position: relative; margin: 0 auto; width: calc(100% - (1 - var(--f)) * min(40vw, 640px)); max-width: 100%; aspect-ratio: 16 / 9; max-height: 92svh; overflow: hidden; background: var(--black);
  border-radius: calc((1 - var(--f)) * 6px); }
.fm__frame video, .fm__frame img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.fm__frame::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0, 0, 0, 0) 55%, rgba(0, 0, 0, .55)); }
.fm__copy { position: absolute; left: 0; bottom: 0; z-index: 2; padding: clamp(22px, 4vw, 56px); color: var(--white); max-width: 760px; }
.fm__h { font-size: clamp(20px, 2.6vw, 38px); letter-spacing: .2em; }
.fm__copy p { margin: 14px 0 0; max-width: 34em; color: rgba(255, 255, 255, .85); }
.js-film .fm { padding-top: 0; }
@media (max-width: 760px) { .fm__frame { aspect-ratio: 4 / 5; } }

/* ------------------------------------------------------------------ client logos */
.lg { padding-top: calc(var(--sec) * .6); padding-bottom: calc(var(--sec) * .6); }
.lg .h2 { text-align: center; margin-bottom: clamp(32px, 4vw, 52px); font-size: 14px; letter-spacing: .3em; color: var(--grey); }
.lg__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 40px 48px; align-items: center; }
.lg__list li { display: grid; place-items: center; }
.lg__list img { max-height: 54px; width: auto; max-width: 150px; filter: grayscale(1) contrast(.9); opacity: .7; transition: opacity .3s, filter .3s; }
.lg__list li:hover img { filter: none; opacity: 1; }

/* ------------------------------------------------------------------ call to action band */
.cta { background: var(--white); color: var(--ink); border-top: 1px solid var(--line); }
.cta__in { max-width: var(--max); margin: 0 auto; padding: var(--sec) var(--gut); display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 28px clamp(24px, 5vw, 80px); align-items: end; }
.cta__h { font-size: clamp(40px, 7vw, 110px); grid-row: span 2; }
.cta__t { color: var(--text); margin: 0; max-width: 28em; }
.cta__act { display: flex; flex-wrap: wrap; gap: 12px; margin: 0; }
@media (max-width: 760px) { .cta__in { grid-template-columns: 1fr; } .cta__h { grid-row: auto; } }

/* ------------------------------------------------------------------ FAQ */
.faq { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: 24px clamp(24px, 6vw, 96px); padding-top: calc(var(--sec) * .6); padding-bottom: calc(var(--sec) * .6); }
.faq__q { border-top: 1px solid var(--line); }
.faq__q:last-child { border-bottom: 1px solid var(--line); }
.faq__q summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; gap: 24px; padding: 22px 0; font: 400 16px/1.45 var(--font); }
.faq__q summary::-webkit-details-marker { display: none; }
.faq__q summary::after { content: "+"; font-weight: 300; font-size: 24px; line-height: 1; transition: transform .25s; }
.faq__q[open] summary::after { transform: rotate(45deg); }
.faq__a { padding: 0 0 24px; color: var(--text); max-width: 40em; }
@media (max-width: 760px) { .faq { grid-template-columns: 1fr; } }

/* ------------------------------------------------------------------ video */
.vd { padding-top: calc(var(--sec) * .5); padding-bottom: calc(var(--sec) * .6); }
.vd .h2 { margin-bottom: 32px; }

/* ------------------------------------------------------------------ contact details */
.cd { padding-top: calc(var(--sec) * .5); padding-bottom: var(--sec); }
.cd .h2 { margin-bottom: 32px; }
.cd__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px clamp(24px, 4vw, 64px); margin: 0; }
.cd__grid > div { border-top: 1px solid var(--ink); padding-top: 18px; }
.cd__grid dt { font: 400 12px var(--font); letter-spacing: .22em; text-transform: uppercase; color: var(--grey); margin-bottom: 10px; }
.cd__grid dd { margin: 0; font-size: 18px; line-height: 1.6; }
@media (max-width: 760px) { .cd__grid { grid-template-columns: 1fr; } }
.fs + .cd { padding-top: 0; }

/* ------------------------------------------------------------------ forms */
.fs { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 40px clamp(32px, 6vw, 96px); align-items: start; padding-top: calc(var(--sec) * .5); padding-bottom: var(--sec); }
.fs .h2 { margin-bottom: 20px; }
.fs__alt { margin-top: 36px; padding-top: 20px; border-top: 1px solid var(--line); }
.fs__alt p { margin: 0 0 6px; }
.fs__alt p:first-child { font: 400 12px var(--font); letter-spacing: .22em; text-transform: uppercase; color: var(--grey); }
.fs__alt a { font-size: 18px; }
.fs__panel { background: var(--stone); padding: clamp(24px, 3.4vw, 48px); }
.fs--project { margin-top: calc(var(--sec) * .4); padding-top: var(--sec); }
@media (max-width: 860px) { .fs { grid-template-columns: 1fr; } }
.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 0 24px; }
@media (max-width: 560px) { .form__row { grid-template-columns: 1fr; } }
.fld { display: block; margin-bottom: 22px; }
.fld > span { display: block; font: 400 11.5px var(--font); letter-spacing: .18em; text-transform: uppercase; margin-bottom: 6px; }
.fld em { font-style: normal; color: var(--grey); text-transform: none; letter-spacing: 0; }
.fld input, .fld select, .fld textarea { width: 100%; min-height: 46px; padding: 10px 0; border: 0; border-bottom: 1px solid #A8A8A8; border-radius: 0; background: transparent; color: var(--ink); font: 300 17px/1.4 var(--font); appearance: none; }
.fld select { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%231A1A1A' stroke-width='1.2'/%3E%3C/svg%3E") no-repeat right 4px center; padding-right: 24px; }
.fld textarea { resize: vertical; min-height: 120px; }
.fld input:focus, .fld select:focus, .fld textarea:focus { outline: none; border-bottom: 2px solid var(--ink); padding-bottom: 9px; }
.fld input::placeholder, .fld textarea::placeholder { color: #9A9A9A; }
.fld [aria-invalid="true"] { border-bottom-color: #A33A2A; }
.fld__err, .form__err { color: #A33A2A; font: 400 13.5px/1.4 var(--font); margin: 6px 0 0; }
.form__err { margin: 0 0 20px; padding: 12px 14px; background: #F5E7E3; }
.chk { display: grid; grid-template-columns: 22px 1fr; gap: 12px; align-items: start; font-size: 15px; line-height: 1.5; color: var(--grey); margin: 6px 0 4px; }
.chk input { width: 18px; height: 18px; margin: 3px 0 0; accent-color: var(--ink); }
.form__act { margin: 28px 0 0; }
.form__act .btn { min-width: 200px; }
.form [disabled] { opacity: .6; cursor: progress; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.sent { padding: 8px 0; }
.sent:focus { outline: none; }
.sent__h { font-size: 15px; font-weight: 500; text-transform: uppercase; letter-spacing: .18em; margin-bottom: 16px; }
.sent p { color: var(--grey); }

/* ------------------------------------------------------------------ project page */
.pj__head { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 20px clamp(24px, 5vw, 80px); padding-top: clamp(48px, 7vw, 110px); padding-bottom: clamp(36px, 5vw, 64px); align-items: end; }
.pj__crumb { grid-column: 1 / -1; margin: 0; font: 400 12px var(--font); letter-spacing: .22em; text-transform: uppercase; }
.pj__crumb a { color: var(--grey); }
.pj__title { font-size: clamp(30px, 4.6vw, 64px); letter-spacing: -.01em; line-height: 1.04; }
.pj__sum { margin: 0; color: var(--grey); font-size: clamp(16px, 1.3vw, 19px); }
.pj__facts { grid-column: 1 / -1; display: flex; flex-wrap: wrap; margin: 12px 0 0; border-top: 1px solid var(--ink); }
.pj__facts div { padding: 16px 40px 0 0; min-width: 140px; }
.pj__facts dt { font: 400 11.5px var(--font); letter-spacing: .22em; text-transform: uppercase; color: var(--grey); }
.pj__facts dd { margin: 4px 0 0; font-size: 16px; }
.pj__cover { aspect-ratio: 16 / 9; max-width: calc(var(--max) - var(--gut) * 2); margin: 0 auto; }
.pj__body { padding-top: var(--sec); margin-left: calc((100% - var(--gut) * 2) * 4 / 11); }
.pj__gal { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(20px, 3vw, 40px); padding-top: var(--sec); }
.pj__g { margin: 0; }
.pj__g img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.pj__g.is-wide { grid-column: 1 / -1; }
.pj__g.is-wide img { aspect-ratio: 16 / 9; }
.pj__g figcaption { margin-top: 10px; color: var(--grey); font-size: 14px; }
@media (max-width: 760px) { .pj__head { grid-template-columns: 1fr; } .pj__body { margin-left: 0; } .pj__gal { grid-template-columns: 1fr; } .pj__g img, .pj__g.is-wide img { aspect-ratio: 4 / 3; } }
.nx { padding-bottom: var(--sec); }
.nx__a { display: grid; gap: 8px; padding-top: 28px; border-top: 1px solid var(--ink); text-decoration: none; }
.nx__l { font: 400 12px var(--font); letter-spacing: .22em; text-transform: uppercase; color: var(--grey); }
.nx__t { font-size: clamp(22px, 3.6vw, 48px); letter-spacing: .16em; }
.nx__a:hover .nx__t { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .2em; }

/* ------------------------------------------------------------------ 404 */
.nf { padding-top: clamp(64px, 10vw, 150px); padding-bottom: calc(var(--sec) * .6); }
.nf .lead { margin: 28px 0 32px; }
.nf__links { display: flex; flex-wrap: wrap; gap: 10px; }

/* ------------------------------------------------------------------ footer (Homade black) */
.ft { background: var(--black); color: var(--white); font-size: 15px; }
.ft__in { max-width: var(--max); margin: 0 auto; padding: clamp(56px, 7vw, 96px) var(--gut) 40px; display: grid; grid-template-columns: minmax(0, 4fr) repeat(4, minmax(0, 2fr)); gap: 36px clamp(20px, 3vw, 48px); }
.ft__logo { width: 168px; height: auto; margin-bottom: 20px; }
.ft__tag { color: rgba(255, 255, 255, .62); max-width: 24em; }
.ft__h { font: 400 11.5px var(--font); letter-spacing: .24em; text-transform: uppercase; color: rgba(255, 255, 255, .55); margin-bottom: 14px; }
.ft__col p { margin: 0 0 6px; }
.ft__col ul { list-style: none; margin: 0; padding: 0; }
.ft__col li { margin-bottom: 6px; }
.ft a { text-decoration: none; }
.ft a:hover { text-decoration: underline; }
.ft__muted { color: rgba(255, 255, 255, .62); }
.ft__base { max-width: var(--max); margin: 0 auto; padding: 22px var(--gut) calc(28px + env(safe-area-inset-bottom)); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; position: relative; color: rgba(255, 255, 255, .55); font: 300 13px var(--font); }
.ft__base::before { content: ""; position: absolute; top: 0; left: var(--gut); right: var(--gut); border-top: 1px solid #222; }
.ft__base p { margin: 0; }
@media (max-width: 1000px) { .ft__in { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ft__brand { grid-column: 1 / -1; } }
@media (max-width: 480px) { .ft__in { grid-template-columns: 1fr; } }

/* ------------------------------------------------------------------ WhatsApp */
.wa { position: fixed; right: max(16px, env(safe-area-inset-right)); bottom: max(16px, env(safe-area-inset-bottom)); z-index: 40; display: inline-flex; align-items: center; gap: 8px; min-height: 48px; padding: 0 18px 0 14px;
  border-radius: 48px; background: var(--ink); color: var(--white); font: 500 12px var(--font); letter-spacing: .14em; text-transform: uppercase; text-decoration: none;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .55), 0 10px 30px -10px rgba(0, 0, 0, .45); transition: transform .2s, background .25s, color .25s; }
/* Black on light pages, white over the dark footer — always HOMADE's colours, never green. */
.wa:hover { transform: translateY(-2px); background: var(--black); }
.wa.on-dark { background: var(--white); color: var(--ink); box-shadow: 0 10px 30px -10px rgba(0, 0, 0, .6); }
@media (max-width: 480px) { .wa span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); } .wa { padding: 0; width: 54px; height: 54px; justify-content: center; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
  .slab { transform: none !important; }
}
@media print { .hd, .wa, .ft, .fs, .im__cue, .im__skip { display: none; } body { background: #fff; } }

/* ------------------------------------------------------------------ v2.3: design philosophy (brochure page 2) */
.tri { padding-top: var(--sec); padding-bottom: var(--sec); }
.tri__head { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 24px clamp(24px, 6vw, 96px); align-items: end; margin-bottom: clamp(40px, 5vw, 72px); }
.tri__text p { color: var(--text); margin: 0 0 1em; max-width: 34em; }
.tri__text p:last-child { margin-bottom: 0; }
.tri__row { position: relative; isolation: isolate; list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2vw, 28px); }
.tri__row::before { content: ""; position: absolute; z-index: -1; right: calc(var(--gut) * -1); top: 18%; width: 34%; height: 92%; background: var(--line); }
.tri__fig { position: relative; margin: 0; aspect-ratio: 3 / 4; overflow: hidden; background: var(--line); }
.tri__fig img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.06); transition: transform 1.6s cubic-bezier(.2, .7, .2, 1); }
.tri__item.is-in .tri__fig img { transform: scale(1); }
.tri__label { position: absolute; right: 14px; bottom: 18px; writing-mode: vertical-rl; transform: rotate(180deg); color: var(--white); font: 500 15px var(--font); letter-spacing: .02em; text-shadow: 0 1px 12px rgba(0, 0, 0, .35); }
@media (max-width: 760px) { .tri__head { grid-template-columns: 1fr; } .tri__row { grid-template-columns: 1fr 1fr; } .tri__item:first-child { grid-column: 1 / -1; } .tri__item:first-child .tri__fig { aspect-ratio: 4 / 3; } .tri__row::before { display: none; } }

/* ------------------------------------------------------------------ v2.3: the collection (silent product films) */
.pr { padding-top: var(--sec); padding-bottom: var(--sec); max-width: none !important; padding-left: 0 !important; padding-right: 0 !important; }
.pr__head { max-width: var(--max); width: 100%; margin: 0 auto clamp(28px, 4vh, 48px); padding: 0 var(--gut); display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 20px clamp(24px, 6vw, 96px); align-items: end; }
.pr__head .lead { margin: 0; }
.pr .hs__track > li { flex: 0 0 clamp(240px, 22vw, 340px); scroll-snap-align: start; }
.pr.is-pinned .hs__track > li { flex-basis: clamp(240px, min(22vw, 40vh), 340px); }
.pr__media { margin: 0; aspect-ratio: 4 / 5; overflow: hidden; background: var(--stone); }
.pr__media video, .pr__media img { width: 100%; height: 100%; object-fit: cover; }
.pr__name { margin: 18px 0 4px; font: 600 15px/1.3 var(--font); text-transform: uppercase; letter-spacing: .08em; }
.pr__line { margin: 0; color: var(--grey); font-size: 15px; line-height: 1.5; max-width: 22em; }
@media (max-width: 760px) { .pr__head { grid-template-columns: 1fr; } .pr .hs__track > li { flex-basis: 72vw; } }

/* ------------------------------------------------------------------ v2.3: quiet reveals */
.js-reveal [data-reveal] { opacity: 0; transform: translate3d(0, 28px, 0); transition: opacity 1.1s ease var(--d, 0s), transform 1.3s cubic-bezier(.2, .7, .2, 1) var(--d, 0s); }
.js-reveal [data-reveal].is-in { opacity: 1; transform: none; }

/* ------------------------------------------------------------------ v2.3: logo preloader (first visit of a session, home page only) */
.pl { position: fixed; inset: 0; z-index: 200; display: grid; place-content: center; justify-items: center; gap: 22px; background: var(--white); pointer-events: none;
  animation: pl-out .7s cubic-bezier(.7, 0, .3, 1) 1.55s forwards; }
.pl__logo { position: relative; width: min(240px, 56vw); aspect-ratio: 757 / 148; }
.pl__logo img { position: absolute; inset: 0; width: 100%; height: 100%; }
.pl__letters { opacity: 0; animation: pl-letters .8s ease .1s forwards; }
.pl__m { clip-path: inset(0 70.5% 0 29.5%); animation: pl-m .8s cubic-bezier(.6, 0, .3, 1) .45s forwards; }
.pl__line { width: min(240px, 56vw); height: 1px; background: var(--line); position: relative; overflow: hidden; }
.pl__line::after { content: ""; position: absolute; inset: 0; background: var(--mark); transform: scaleX(0); transform-origin: left; animation: pl-line 1.25s ease .15s forwards; }
@keyframes pl-letters { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes pl-m { to { clip-path: inset(0 43% 0 29.5%); } }
@keyframes pl-line { to { transform: scaleX(1); } }
@keyframes pl-out { to { opacity: 0; visibility: hidden; } }
.pl-seen .pl { display: none; }
@media (prefers-reduced-motion: reduce) { .pl { animation-delay: .6s; animation-duration: .3s; } .pl__letters, .pl__m, .pl__line::after { animation: none; opacity: 1; clip-path: none; transform: none; } }
@media print { .pl, .cur { display: none !important; } }

/* ------------------------------------------------------------------ v2.3: the pointer — a dot and a slow ring that follows it */
.cur { position: fixed; left: 0; top: 0; z-index: 150; pointer-events: none; mix-blend-mode: difference; }
.cur__dot, .cur__ring { position: fixed; left: 0; top: 0; border-radius: 50%; will-change: transform; }
.cur__dot { width: 6px; height: 6px; margin: -3px 0 0 -3px; background: #fff; }
.cur__ring { width: 38px; height: 38px; margin: -19px 0 0 -19px; border: 1px solid #fff; transition: width .45s cubic-bezier(.2, .7, .2, 1), height .45s cubic-bezier(.2, .7, .2, 1), margin .45s cubic-bezier(.2, .7, .2, 1), background .3s, opacity .3s;
  display: grid; place-items: center; font: 600 10px/1 var(--font); letter-spacing: .2em; text-transform: uppercase; color: #000; }
.cur__ring span { opacity: 0; transition: opacity .25s; }
.cur.is-link .cur__ring { width: 58px; height: 58px; margin: -29px 0 0 -29px; }
.cur.is-label .cur__ring { width: 86px; height: 86px; margin: -43px 0 0 -43px; background: #fff; }
.cur.is-label .cur__ring span { opacity: 1; }
.cur.is-down .cur__ring { width: 30px; height: 30px; margin: -15px 0 0 -15px; }
.cur.is-hidden { opacity: 0; }
html.has-cur, html.has-cur a, html.has-cur button, html.has-cur [data-cursor] { cursor: none; }
html.has-cur input, html.has-cur textarea, html.has-cur select { cursor: auto; }

/* v2.4 — "Visualisation" tag on design renders (never mistaken for finished work) */
.vtag { position: absolute; left: 12px; bottom: 12px; z-index: 2; padding: 4px 9px; border-radius: 20px; background: rgba(255, 255, 255, .88); color: var(--ink); font: 500 10px/1.2 var(--font); letter-spacing: .16em; text-transform: uppercase; pointer-events: none; }
.tri__fig, .itm__media, .itm__g, .its__media, .pj__g { position: relative; }

/* Services / collection lists */
.its { padding-top: calc(var(--sec) * .4); padding-bottom: var(--sec); }
.ph + .its { padding-top: 0; }
.its__head { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 20px clamp(24px, 6vw, 96px); align-items: end; margin-bottom: clamp(32px, 4vw, 56px); }
.its__head .lead { margin: 0; }
.its__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(48px, 5vw, 80px) clamp(20px, 2.4vw, 36px); }
.its__a { display: block; color: inherit; text-decoration: none; }
.its__media { margin: 0 0 20px; aspect-ratio: 4 / 5; overflow: hidden; background: var(--stone); }
.its--service .its__media { aspect-ratio: 4 / 3; }
.its__media img, .its__media video { width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s cubic-bezier(.2, .7, .2, 1); }
.its__a:hover .its__media img, .its__a:hover .its__media video { transform: scale(1.035); }
.its__n { display: block; font: 500 11.5px var(--font); letter-spacing: .22em; color: var(--ash-text); }
.its__t { margin: 8px 0 6px; font: 700 clamp(17px, 1.4vw, 20px)/1.25 var(--font); text-transform: uppercase; letter-spacing: .06em; }
.its__l { margin: 0; color: var(--grey); font-size: 15px; line-height: 1.55; max-width: 26em; }
@media (max-width: 1100px) { .its__list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .its__list { grid-template-columns: 1fr; } .its__head { grid-template-columns: 1fr; } }

/* A service or a piece */
.itm__head { padding-top: clamp(48px, 7vw, 110px); padding-bottom: clamp(32px, 4vw, 56px); display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 16px clamp(24px, 5vw, 80px); align-items: end; }
.itm__head .label { grid-column: 1 / -1; margin: 0; }
.itm__head .label a { color: var(--ash-text); }
.itm__title { margin: 0; font: 800 clamp(30px, 4.6vw, 64px)/1.04 var(--font); text-transform: uppercase; letter-spacing: -.01em; }
.itm__line { margin: 0; color: var(--grey); font-size: clamp(16px, 1.3vw, 19px); line-height: 1.6; }
.itm__main { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(32px, 5vw, 80px); align-items: start; }
.itm__media { margin: 0; aspect-ratio: 4 / 3; overflow: hidden; background: var(--stone); }
.itm--piece .itm__media { aspect-ratio: 4 / 5; }
.itm__media img, .itm__media video { width: 100%; height: 100%; object-fit: cover; }
.itm__text { position: sticky; top: calc(var(--hd) + 32px); }
.itm__text .prose p:first-child { margin-top: 0; font-size: clamp(17px, 1.3vw, 19px); color: var(--ink); }
.itm__facts { margin: 28px 0 0; border-top: 1px solid var(--ink); }
.itm__facts div { padding: 14px 0; border-bottom: 1px solid var(--line); display: grid; grid-template-columns: 110px 1fr; gap: 16px; }
.itm__facts dt { font: 500 11.5px/1.6 var(--font); letter-spacing: .22em; text-transform: uppercase; color: var(--ash-text); }
.itm__facts dd { margin: 0; font-size: 15px; line-height: 1.55; }
.itm__act { display: flex; flex-wrap: wrap; gap: 12px; margin: 32px 0 0; }
.itm__gal { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(20px, 3vw, 40px); padding-top: var(--sec); }
.itm__g { margin: 0; overflow: hidden; }
.itm__g img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.itm__g figcaption { margin-top: 10px; color: var(--grey); font-size: 14px; }
.itm__more { padding-top: var(--sec); }
.itm__more .h2 { margin-bottom: clamp(28px, 3vw, 48px); }
.itm__others { padding-top: var(--sec); padding-bottom: var(--sec); }
.itm__others ul { list-style: none; margin: 16px 0 0; padding: 0; border-top: 1px solid var(--ink); }
.itm__others li { border-bottom: 1px solid var(--line); }
.itm__others a { display: flex; justify-content: space-between; align-items: center; padding: 22px 0; color: var(--ink); text-decoration: none; font: 700 clamp(18px, 2vw, 28px)/1.2 var(--font); text-transform: uppercase; letter-spacing: .02em; transition: padding .5s cubic-bezier(.2, .7, .2, 1); }
.itm__others a::after { content: "→"; font-weight: 400; }
.itm__others a:hover { padding-left: 12px; }
@media (max-width: 900px) { .itm__head, .itm__main { grid-template-columns: 1fr; } .itm__text { position: static; } }
@media (max-width: 640px) { .itm__gal { grid-template-columns: 1fr; } }

/* Filmed on site — the same sideways rail as "Made to measure" */
.rl .hs__track > li { flex: 0 0 clamp(240px, 28vw, 440px); scroll-snap-align: start; }
.rl.is-pinned .hs__track > li { flex-basis: clamp(240px, min(28vw, 48vh), 440px); }
.rl__media { margin: 0; aspect-ratio: 3 / 4; overflow: hidden; background: var(--stone); }
.rl__media video { width: 100%; height: 100%; object-fit: cover; }
.rl__c { margin: 12px 0 0; color: var(--grey); font-size: 14px; line-height: 1.5; }
@media (max-width: 760px) { .rl .hs__track > li { flex-basis: 72vw; } .rl__media { aspect-ratio: 9 / 16; } }

/* Collection cards on the home rail link to their pages */
.pr__a { display: block; color: inherit; text-decoration: none; }
.pr__a:hover .pr__media video, .pr__a:hover .pr__media img { transform: scale(1.03); }
.pr__media video, .pr__media img { transition: transform 1.1s cubic-bezier(.2, .7, .2, 1); }

/* v2.5.1 — phones: the sideways rails hold still and slide right to left as you scroll, like on computers */
@media (max-width: 760px) {
  [data-hscroll].is-pinned .hs__pin { justify-content: flex-start; padding-top: clamp(16px, 4svh, 36px); }
  .pf--side.is-pinned .hs__item { flex-basis: min(70vw, 46svh); }
  .pr.is-pinned .hs__track > li { flex-basis: min(66vw, 42svh); }
  .rl.is-pinned .hs__track > li { flex-basis: min(58vw, 34svh); }
  .rl.is-pinned .rl__media { aspect-ratio: 3 / 4; }
  [data-hscroll].is-pinned .hs__bar { margin-top: 20px; }
}

/* v2.6 — client reviews (real words only) and questions on service / piece pages */
.rv { padding-top: var(--sec); padding-bottom: var(--sec); }
.rv__head { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 20px clamp(24px, 6vw, 96px); align-items: end; margin-bottom: clamp(32px, 4vw, 56px); }
.rv__head .lead { margin: 0; }
.rv__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(32px, 4vw, 56px) clamp(20px, 2.4vw, 36px); }
.rv__fig { margin: 0; padding-top: 22px; border-top: 1px solid var(--ink); height: 100%; display: flex; flex-direction: column; }
.rv__stars { margin: 0 0 12px; letter-spacing: .18em; font-size: 13px; color: var(--ink); }
.rv__q { margin: 0; flex: 1; }
.rv__q p { margin: 0; font-size: clamp(16px, 1.25vw, 18px); line-height: 1.65; color: var(--ink); }
.rv__by { margin-top: 22px; display: grid; gap: 2px; }
.rv__n { font: 600 13px/1.4 var(--font); text-transform: uppercase; letter-spacing: .12em; }
.rv__d, .rv__s { font-size: 13.5px; color: var(--grey); }
.rv__d a, .rv__s a { color: inherit; }
@media (max-width: 1000px) { .rv__list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .rv__list { grid-template-columns: 1fr; } .rv__head { grid-template-columns: 1fr; } }
.pj__quote { margin: var(--sec) 0 0; margin-left: calc((100% - var(--gut) * 2) * 4 / 11); max-width: 36em; }
.pj__quote blockquote { margin: 0; }
.pj__quote p { margin: 0; font-size: clamp(19px, 1.8vw, 26px); line-height: 1.45; color: var(--ink); }
.pj__quote figcaption { margin-top: 16px; font: 600 12px var(--font); letter-spacing: .14em; text-transform: uppercase; color: var(--ash-text); }
@media (max-width: 900px) { .pj__quote { margin-left: 0; } }
.itm__faq { padding-top: var(--sec); }

/* v2.7 — before and after on project pages */
.ba-s { padding-top: var(--sec); }
.ba-s > .h2 { margin-bottom: clamp(24px, 3vw, 40px); }
.ba { margin: 0 0 clamp(36px, 5vw, 64px); }
.ba__cap { margin-top: 12px; color: var(--grey); font-size: 15px; }
.ba__tag { position: absolute; top: 14px; z-index: 3; padding: 5px 11px; border-radius: 20px; background: rgba(255, 255, 255, .9); color: var(--ink); font: 600 10.5px/1.2 var(--font); letter-spacing: .18em; text-transform: uppercase; pointer-events: none; }
.ba--side .ba__pair { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(10px, 1.6vw, 24px); }
.ba__one { position: relative; overflow: hidden; background: var(--stone); aspect-ratio: 3 / 4; }
.ba__one img { width: 100%; height: 100%; object-fit: cover; }
.ba__one .ba__tag { left: 14px; }
.ba--slider .ba__frame { position: relative; overflow: hidden; aspect-ratio: 16 / 10; background: var(--stone); touch-action: pan-y; }
.ba--slider img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ba__before { position: absolute; inset: 0; clip-path: inset(0 calc(100% - var(--x)) 0 0); z-index: 1; }
.ba__line { position: absolute; top: 0; bottom: 0; left: var(--x); width: 2px; margin-left: -1px; background: var(--white); z-index: 2; pointer-events: none; }
.ba__knob { position: absolute; top: 50%; left: 50%; width: 44px; height: 44px; margin: -22px 0 0 -22px; border-radius: 50%; background: var(--white); box-shadow: 0 4px 18px rgba(0, 0, 0, .25); }
.ba__knob::before, .ba__knob::after { content: ""; position: absolute; top: 50%; width: 0; height: 0; margin-top: -5px; border: 5px solid transparent; }
.ba__knob::before { left: 9px; border-right-color: var(--ink); }
.ba__knob::after { right: 9px; border-left-color: var(--ink); }
.ba__tag--b { left: 14px; } .ba__tag--a { right: 14px; }
.ba__range { position: absolute; inset: 0; z-index: 4; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; -webkit-appearance: none; appearance: none; }
.ba__range:focus-visible + * , .ba--slider:focus-within .ba__knob { outline: 2px solid var(--ink); outline-offset: 2px; }
@media (max-width: 640px) { .ba--slider .ba__frame { aspect-ratio: 4 / 5; } .ba--side .ba__pair { gap: 8px; } }
.ba--side { max-width: 980px; }

/* v2.7.1 — studio credit */
.ft__credit a { color: rgba(255, 255, 255, .8); text-decoration: none; border-bottom: 1px solid rgba(255, 255, 255, .3); padding-bottom: 1px; transition: color .2s, border-color .2s; }
.ft__credit a:hover, .ft__credit a:focus-visible { color: var(--white); border-color: var(--white); }
@media (max-width: 760px) { .ft__base { flex-direction: column; gap: 8px; padding-bottom: calc(92px + env(safe-area-inset-bottom)); } }
@media (min-width: 761px) { .ft__base { padding-right: calc(var(--gut) + 170px); } }

/* v2.8 — Journal */
.jr { padding-top: calc(var(--sec) * .4); padding-bottom: var(--sec); }
.ph + .jr { padding-top: 0; }
.jr__head { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 20px clamp(24px, 6vw, 96px); align-items: end; margin-bottom: clamp(32px, 4vw, 56px); }
.jr__head .lead { margin: 0; }
.jr__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(44px, 5vw, 72px) clamp(20px, 2.4vw, 36px); }
.jr__a { display: block; color: inherit; text-decoration: none; }
.jr__media { margin: 0 0 18px; aspect-ratio: 4 / 3; overflow: hidden; background: var(--stone); }
.jr__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s cubic-bezier(.2, .7, .2, 1); }
.jr__a:hover .jr__media img { transform: scale(1.035); }
.jr__date { font: 500 11.5px var(--font); letter-spacing: .2em; text-transform: uppercase; color: var(--ash-text); }
.jr__t { margin: 8px 0 6px; font: 700 clamp(18px, 1.5vw, 22px)/1.25 var(--font); }
.jr__l { margin: 0; color: var(--grey); font-size: 15px; line-height: 1.55; }
@media (max-width: 1100px) { .jr__list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .jr__list { grid-template-columns: 1fr; } .jr__head { grid-template-columns: 1fr; } }
.ar__head { padding-top: clamp(48px, 7vw, 110px); padding-bottom: clamp(28px, 3vw, 44px); max-width: 860px; }
.ar__head .label { margin: 0 0 14px; } .ar__head .label a { color: var(--ash-text); }
.ar__title { margin: 0; font: 800 clamp(30px, 4.4vw, 60px)/1.05 var(--font); letter-spacing: -.01em; }
.ar__lead { margin: 18px 0 0; color: var(--grey); font-size: clamp(17px, 1.4vw, 20px); line-height: 1.6; max-width: 40em; }
.ar__meta { margin: 18px 0 0; font: 500 12px var(--font); letter-spacing: .16em; text-transform: uppercase; color: var(--ash-text); }
.ar__cover { margin: 0 0 clamp(36px, 5vw, 64px); aspect-ratio: 16 / 9; overflow: hidden; background: var(--stone); position: relative; }
.ar__cover img { width: 100%; height: 100%; object-fit: cover; }
.ar__body { max-width: 40em; margin-left: auto; margin-right: auto; font-size: clamp(16px, 1.2vw, 18px); line-height: 1.75; }
.ar__body h2 { font: 700 clamp(20px, 1.8vw, 26px)/1.3 var(--font); text-transform: none; letter-spacing: 0; margin: 1.8em 0 .5em; }
.ar__body ul { padding-left: 1.2em; } .ar__body li { margin: .3em 0; }
.ar__next { max-width: 40em; margin: clamp(40px, 5vw, 64px) auto 0; padding-top: 24px; border-top: 1px solid var(--ink); }
.ar__rel { font: 700 18px var(--font); text-transform: uppercase; letter-spacing: .04em; color: var(--ink); }
.ar__act { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }
.svc__a { color: inherit; text-decoration: none; border-bottom: 1px solid var(--line); transition: border-color .2s; } .svc__a:hover { border-color: var(--ink); } .svc__a::after { content: ' →'; font-weight: 400; }

/* ==================================================================
   v2.16 — the AKDesigno-inspired look HOMADE asked for:
   light, wide geometric type with spaced capitals, airy grey text, a solid black header, square outline buttons,
   alternating off-white and charcoal bands, a black logo preloader, and photographs that brighten under the pointer.
   Didact Gothic (OFL) stands in for Century Gothic; Poppins (OFL) for the menu, buttons and large titles.
   The 3D entrance and the scroll animations are unchanged.
   ================================================================== */
@font-face { font-family: "Didact Gothic"; font-style: normal; font-weight: 400; font-display: swap; src: url(../fonts/didact-gothic-latin-400-normal.woff2) format("woff2"); }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 300; font-display: swap; src: url(../fonts/poppins-latin-300-normal.woff2) format("woff2"); }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 400; font-display: swap; src: url(../fonts/poppins-latin-400-normal.woff2) format("woff2"); }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 500; font-display: swap; src: url(../fonts/poppins-latin-500-normal.woff2) format("woff2"); }

:root {
  --stone: #FBFBFB;       /* off-white bands */
  --ink: #231F20;         /* headings, charcoal bands */
  --black: #181516;       /* contact band and footer */
  --night: #000000;       /* header and preloader */
  --text: #666666;        /* body text */
  --grey: #6D6D6D;        /* labels */
  --pale: #BABABA;        /* outline buttons on dark */
  --font: "Didact Gothic", "Century Gothic", "Helvetica Neue", Arial, sans-serif;
  --ui: "Poppins", "Helvetica Neue", Arial, sans-serif;
  --track: .3em;
  --hd: 88px;
}
body { font: 400 16px/2.1 var(--font); color: var(--text); }
h1, h2, h3 { font-weight: 400; }
p { margin: 0 0 1.1em; }

/* Section titles: small, light, widely spaced capitals */
.h2, .lg .h2 { font: 400 clamp(20px, 1.8vw, 26px)/1.45 var(--font); text-transform: uppercase; letter-spacing: var(--track); color: var(--ink); }
/* Page titles: large and light */
.ph__title, .itm__title, .pj__title, .ar__title { font: 300 clamp(38px, 5.2vw, 75px)/1.08 var(--ui); text-transform: none; letter-spacing: -.01em; color: var(--ink); }
.im__h { font: 300 clamp(32px, 4.4vw, 66px)/1.1 var(--ui); text-transform: none; letter-spacing: -.01em; }
.cta__h { font: 300 clamp(30px, 3.6vw, 52px)/1.2 var(--ui); text-transform: none; letter-spacing: 0; }
.nx__t, .fm__h { font: 300 clamp(22px, 3vw, 44px)/1.2 var(--ui); text-transform: none; letter-spacing: 0; }
.st__t, .its__t, .svc__t, .pr__name, .rv__n, .jr__t, .itm__others a { font-family: var(--font); font-weight: 400; text-transform: uppercase; letter-spacing: .14em; }
.st__t { font-size: clamp(16px, 1.3vw, 19px); }
.its__t, .svc__t, .pr__name { font-size: 15.5px; line-height: 1.5; }
.itm__others a { font-size: clamp(15px, 1.5vw, 20px); letter-spacing: .16em; }
.lead, .ph__sub, .itm__line, .pj__sum, .ar__lead, .im__p, .cta__t { font-family: var(--font); font-size: 16px; line-height: 2.1; color: var(--text); }
.label, .im__eyebrow, .st__n, .its__n, .jr__date, .tile__n, .pj__crumb, .nx__l { font-family: var(--ui); font-weight: 400; letter-spacing: .18em; }
.prose p, .prose li, .tri__text p, .svc__item p, .its__l, .st__item p, .pr__line, .rl__c, .jr__l, .itm__facts dd { color: var(--text); line-height: 2; }

/* Buttons: square, thin outline, Poppins — as on the reference */
.btn { min-height: 46px; padding: 0 26px; border-radius: 0; border: 1px solid var(--ink); font: 300 15.5px/1 var(--ui); text-transform: none; letter-spacing: .01em; }
.btn--solid { background: var(--ink); border-color: var(--ink); color: #fff; }
.btn--solid:hover { background: #000; border-color: #000; }
.btn--light { border-color: #fff; }
.btn--line { border-color: var(--pale); color: var(--pale); background: transparent; }
.btn--line:hover { border-color: #fff; color: #fff; background: transparent; }
.filters button { border-radius: 0; font: 400 12.5px var(--ui); letter-spacing: .12em; }
.wa { border-radius: 0; font-family: var(--ui); font-weight: 400; letter-spacing: .08em; }

/* Header: a solid black bar, white logo left, the menu right */
.hd, .has-hero .hd, .has-hero.is-scrolled .hd, .is-scrolled .hd { position: sticky; top: 0; left: auto; right: auto; background: var(--night); color: #fff; box-shadow: none; }
.is-preview .hd, .is-preview.has-hero .hd { top: 34px; }
.is-preview { --hd: 122px; }
.hd__in { height: 88px; max-width: 1600px; }
.hd .brand__logo--dark, .has-hero.is-scrolled .hd .brand__logo--dark { display: none; }
.hd .brand__logo--light, .has-hero .hd .brand__logo--light, .has-hero.is-scrolled .hd .brand__logo--light { display: block; }
.brand__logo { width: 148px; }
.hd__nav ul { gap: clamp(22px, 2.4vw, 38px); }
.hd__nav ul a { font: 400 15.5px/1 var(--ui); text-transform: none; letter-spacing: .01em; color: #fff; padding: 10px 0; opacity: .92; transition: opacity .2s, border-color .2s; }
.hd__nav ul a:hover, .hd__nav ul a[aria-current] { opacity: 1; border-bottom-color: rgba(255, 255, 255, .7); }
@media (max-width: 960px) {
  :root { --hd: 68px; }
  .is-preview { --hd: 102px; }
  .hd__in { height: 68px; }
  .brand__logo { width: 120px; }
  .hd__nav { inset: 68px 0 0; background: var(--night); color: #fff; }
  .menu-open .hd, .menu-open.has-hero .hd, .menu-open.im-active.has-hero.is-scrolled .hd { background: var(--night); color: #fff; }
  .menu-open.has-hero .hd .brand__logo--dark { display: none; }
  .menu-open.has-hero .hd .brand__logo--light { display: block; }
  .hd__nav ul a { font: 300 22px/1.2 var(--ui); letter-spacing: .01em; padding: 20px 0; border-bottom: 1px solid #222; }
  .hd__nav ul a[aria-current] { border-bottom-color: #222; font-weight: 400; }
}

/* Off-white bands, as the reference alternates them */
.it, .tri, .st { background: var(--stone); box-shadow: 0 0 0 100vmax var(--stone); clip-path: inset(0 -100vmax); }
.it .h2 { margin-bottom: 26px; }
.it__media .slab, .it__media .slab.is-tilting { box-shadow: none; transform: none; }
.cta { background: var(--stone); border-top: 0; }
.pf--side { background: #fff; }

/* Image strips (cards → "Image strips"): tall photographs side by side, dimmed; the one under the pointer brightens */
main > .sp, main > .dd { max-width: none !important; padding: 0 !important; }
.sp { background: var(--ink); color: #fff; }
.sp__head { max-width: 1600px; margin: 0 auto; padding: clamp(56px, 7vw, 96px) var(--gut) clamp(28px, 3vw, 44px); display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 16px clamp(24px, 5vw, 80px); align-items: end; }
.sp__head .h2 { color: #fff; }
.sp__head .lead { color: #BDBDBD; margin: 0; }
.sp__list { list-style: none; margin: 0; padding: 0; display: flex; height: clamp(460px, 78vh, 760px); }
.sp__item { flex: 1 1 0; min-width: 0; position: relative; overflow: hidden; transition: flex-grow .7s cubic-bezier(.2, .7, .2, 1); }
.sp__a { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 10px; padding: 0 12px; color: #fff; text-decoration: none; text-align: center; }
.sp__img { position: absolute; inset: 0; margin: 0; background: #2E2A2B; }
.sp__img img { width: 100%; height: 100%; object-fit: cover; filter: brightness(.5) saturate(.9); transition: filter .6s ease, transform 1.2s cubic-bezier(.2, .7, .2, 1); }
.sp__item + .sp__item { border-left: 1px solid rgba(255, 255, 255, .08); }
.sp__t { position: relative; font: 400 14.5px/1.5 var(--font); letter-spacing: .14em; text-transform: uppercase; text-shadow: 0 1px 14px rgba(0, 0, 0, .45); transition: opacity .4s; }
.sp__x { position: relative; max-width: 22em; font: 300 13.5px/1.6 var(--ui); color: rgba(255, 255, 255, .85); opacity: 0; transform: translateY(8px); transition: opacity .45s, transform .45s; }
@media (hover: hover) and (min-width: 901px) {
  .sp__list:hover .sp__img img { filter: brightness(.32) saturate(.8); }
  .sp__list:hover .sp__t { opacity: .55; }
  .sp__list .sp__item:hover { flex-grow: 2.2; }
  .sp__list .sp__item:hover .sp__img img { filter: none; transform: scale(1.03); }
  .sp__list .sp__item:hover .sp__t { opacity: 1; }
  .sp__list .sp__item:hover .sp__x { opacity: 1; transform: none; }
}
.sp__a:focus-visible { outline: 2px solid #fff; outline-offset: -6px; }
.sp__a:focus-visible .sp__img img { filter: none; }
@media (max-width: 900px) {
  .sp__head { grid-template-columns: 1fr; }
  .sp__list { height: auto; display: grid; grid-template-columns: 1fr 1fr; }
  .sp__item { height: 210px; border-left: 0 !important; border-top: 1px solid rgba(255, 255, 255, .08); }
  .sp__img img { filter: brightness(.62); }
  .sp__x { display: none; }
}

/* Dark panels (cards → "Dark panels"): Mission, Vision, Goal */
.svc--dark { background: var(--ink); color: #fff; box-shadow: 0 0 0 100vmax var(--ink); clip-path: inset(0 -100vmax); padding-bottom: var(--sec); }
.svc--dark .h2, .svc--dark .svc__t { color: #fff; }
.svc--dark .svc__item { border-top-color: rgba(255, 255, 255, .35); }
.svc--dark .svc__t { font: 300 clamp(26px, 2.6vw, 40px)/1.2 var(--ui); text-transform: none; letter-spacing: 0; margin-bottom: 14px; }
.svc--dark .svc__item p, .svc--dark .lead { color: #C9C6C2; }

/* Project cards: name and place over the photograph; dimmed until the pointer is on them (as on the reference portfolio) */
.tile { position: relative; }
.tile .slab, .tile:hover .slab, .tile .slab.is-tilting { background: #1d1b1b; }
.slabs .tile .slab { aspect-ratio: 4 / 3; }
.tile .slab img { filter: brightness(.6); transition: filter .5s ease, transform 1.1s cubic-bezier(.2, .7, .2, 1); }
.tile .slab::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0, 0, 0, 0) 55%, rgba(0, 0, 0, .45)); pointer-events: none; }
.tile__cap { position: absolute; left: 20px; right: 20px; bottom: 18px; z-index: 2; margin: 0; gap: 4px; color: #fff; pointer-events: none; }
.tile__n { display: none; }
.tile__t { font: 500 15.5px/1.35 var(--font); text-transform: none; letter-spacing: .02em; color: #fff; }
a.tile:hover .tile__t { text-decoration: none; }
.tile__m { font: 400 12.5px/1.4 var(--ui); color: rgba(255, 255, 255, .78); }
.tile .vtag { left: auto; right: 12px; top: 12px; bottom: auto; border-radius: 0; }
.slabs { gap: clamp(14px, 1.4vw, 22px); }
@media (hover: hover) {
  .slabs:hover .tile .slab img, .hs__track:hover .tile .slab img { filter: brightness(.38); }
  .slabs .tile:hover .slab img, .hs__track .tile:hover .slab img, .tile:focus-visible .slab img { filter: brightness(1.04); transform: scale(1.025); }
}
@media (hover: none) { .tile .slab img { filter: brightness(.82); } }

/* Services, journal and collection lists: the same brightening on the photograph */
.its__media img, .jr__media img, .svc__img img { filter: brightness(.82); transition: filter .5s ease, transform 1.1s cubic-bezier(.2, .7, .2, 1); }
@media (hover: hover) {
  .its__list:hover .its__media img, .jr__list:hover .jr__media img { filter: brightness(.5); }
  .its__list .its__a:hover .its__media img, .jr__list .jr__a:hover .jr__media img, .svc__item:hover .svc__img img { filter: none; }
}
@media (hover: none) { .its__media img, .jr__media img, .svc__img img { filter: none; } }

/* Footer: "Get in touch with us" on charcoal, then logo, social and links, then the line */
.ft { background: var(--black); color: #fff; font: 400 15.5px/1.7 var(--ui); }
.ft__touch { max-width: 1600px; margin: 0 auto; padding: clamp(64px, 8vw, 120px) var(--gut) clamp(48px, 6vw, 80px); display: grid; grid-template-columns: minmax(0, 1.1fr) repeat(3, minmax(0, 1fr)); gap: 36px clamp(20px, 3vw, 56px); border-bottom: 1px solid #3A3637; }
.ft__big { font: 300 clamp(28px, 2.3vw, 34px)/1.33 var(--ui); color: #fff; text-transform: capitalize; margin: 0; }
.ft__l { margin: 0 0 6px; font: 300 15.5px var(--ui); color: var(--grey); }
.ft__v { margin: 0 0 22px; font: 500 16px/1.5 var(--ui); color: #F0F0F0; }
.ft__addr { font: 400 14.5px/1.55 var(--ui); text-transform: uppercase; letter-spacing: .02em; color: #fff; }
.ft__v a { text-decoration: none; } .ft__v a:hover { text-decoration: underline; }
.ft__in { max-width: 1600px; padding: clamp(44px, 5vw, 72px) var(--gut) 40px; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr); align-items: start; }
.ft__logo { width: 156px; }
.ft__tag { color: var(--grey); font-size: 14.5px; }
.ft__h { font: 300 15.5px var(--ui); letter-spacing: 0; text-transform: none; color: var(--grey); }
.ft__soc { display: flex; gap: 14px; }
.ft__soc a { display: inline-grid; place-items: center; width: 34px; height: 34px; color: #fff; border: 1px solid #3A3637; transition: border-color .2s, background .2s, color .2s; }
.ft__soc a:hover { border-color: #fff; background: #fff; color: var(--black); text-decoration: none; }
.ft__hours { margin-top: 18px; font-size: 14px; color: var(--grey); }
.ft__nav li { margin-bottom: 4px; }
.ft__nav a { color: var(--grey); font-weight: 300; transition: color .2s; }
.ft__nav a:hover { color: #fff; text-decoration: none; }
.ft__base { justify-content: center; gap: 10px 28px; color: var(--grey); font: 300 13.5px var(--ui); }
.ft__base::before { border-top-color: #2B2728; }
@media (max-width: 1000px) { .ft__touch { grid-template-columns: 1fr 1fr; } .ft__big { grid-column: 1 / -1; } .ft__in { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .ft__touch, .ft__in { grid-template-columns: 1fr; } .ft__big br { display: none; } }

/* Contact details and forms in the same voice */
.cd__grid > div, .svc__item, .rv__fig, .itm__facts, .pj__facts, .nx__a, .itm__others ul, .ar__next { border-top-color: var(--ink); }
.cd__grid dt, .fld > span, .pj__facts dt, .itm__facts dt { font-family: var(--ui); font-weight: 400; letter-spacing: .12em; }
.fld input, .fld select, .fld textarea { font: 300 16px/1.4 var(--ui); }

/* Preloader — as on the reference: a black screen with the logo, a horizontal slice sweeping down through it
   (the logo doubles inside the slice) every 1.2 s. Every page load, like the reference; the first page of a visit
   holds it for at least two sweeps (2.4 s), later pages only until they have loaded; never longer than 5 s.
   The logo is the official white HOMADE logo, unchanged. */
.pl, .pl-seen .pl { display: grid; background: var(--night); animation: none; opacity: 1; visibility: visible; transition: opacity .4s ease, visibility .4s; }
.pl.pl--out { opacity: 0; visibility: hidden; }
.pl__logo { --w: min(230px, 52vw); width: var(--w); height: calc(var(--w) * 148 / 757); perspective: 600px; overflow: visible; }
/* A cube turning on its horizontal axis, the logo on each face — as the reference's loader */
.pl__cube { --d: calc(var(--w) * 74 / 757); position: relative; width: 100%; height: 100%; transform-style: preserve-3d; animation: pl-cube 1.2s cubic-bezier(.65, 0, .35, 1) infinite; }
.pl__f { position: absolute; inset: 0; width: 100%; height: 100%; backface-visibility: hidden; }
.pl__f--front { transform: translateZ(var(--d)); }
.pl__f--bottom { transform: rotateX(-90deg) translateZ(var(--d)); }
@keyframes pl-cube { 0%, 25% { transform: rotateX(0deg); } 80%, 100% { transform: rotateX(90deg); } }
@media (max-width: 767px) { .pl__logo { --w: min(170px, 50vw); } }
@media (prefers-reduced-motion: reduce) { .pl__cube { animation: none; } }
.svc__head:not(:has(*)) { display: none; }

/* ==================================================================
   v2.17 — closer to the reference, measured on akdesigno.com at 1440 px:
   Century Gothic → TeX Gyre Adventor (free, same letter widths as Century Gothic: both follow Avant Garde);
   content 1093 px wide; header 64 px side margins, menu items 15 px apart each side; 16 / 34 px text;
   25 px spaced titles; 42 px outline buttons; footer columns 223 + 3 × 270 px with 20 px gaps.
   ================================================================== */
@font-face { font-family: "TeX Gyre Adventor"; font-style: normal; font-weight: 400; font-display: swap; src: url(../fonts/texgyreadventor-regular.woff2) format("woff2"); }
:root {
  --font: "TeX Gyre Adventor", "Century Gothic", "Didact Gothic", "Helvetica Neue", Arial, sans-serif;
  --max: calc(1093px + var(--gut) * 2);
  --hd: 74px;
}
body { font: 400 16px/34px var(--font); color: var(--text); }
.h2, .lg .h2 { font: 400 clamp(20px, 1.75vw, 25px)/1.3 var(--font); letter-spacing: .26em; color: #000; }
.sp__head .h2, .svc--dark .h2 { color: #fff; }
.lead, .ph__sub, .itm__line, .pj__sum, .ar__lead, .im__p, .cta__t { font: 400 16px/34px var(--font); color: var(--text); }
.prose p, .prose li, .tri__text p, .svc__item p, .its__l, .st__item p, .pr__line, .rl__c, .jr__l, .itm__facts dd { line-height: 34px; }
.it .lead + .lead, .it .prose p + p { margin-top: 25px; }

/* Header: full width, 64 px side margins, Poppins 16 px menu with 15 px either side of each item */
.hd__in { max-width: none; height: 74px; padding: 0 var(--gut); }
.brand__logo { width: 138px; }
.hd__nav ul { gap: 0; }
.hd__nav ul a { font: 400 16px/1 var(--ui); padding: 10px 15px; border-bottom: 0; opacity: 1; }

.hd__nav ul a:hover, .hd__nav ul a[aria-current] { opacity: .72; border-bottom: 0; }
.is-preview { --hd: 108px; }
@media (max-width: 960px) {
  :root { --hd: 60px; }
  .is-preview { --hd: 94px; }
  .hd__in { height: 60px; }
  .brand__logo { width: 112px; }
  .hd__nav { inset: 60px 0 0; }
  .hd__nav ul a { padding: 20px 0; font: 300 22px/1.2 var(--ui); border-bottom: 1px solid #222; }
  .hd__nav ul li:last-child a { padding-right: 0; }
}

/* Buttons: 16 px Poppins light, 12 × 24 padding, 42 px tall, thin square outline */
.btn { min-height: 42px; padding: 0 24px; font: 300 16px/1 var(--ui); border-width: 1px; }

/* Footer: Get in touch — 223 px heading, then three 270 px columns */
.ft__touch { max-width: var(--max); grid-template-columns: minmax(0, 223fr) repeat(3, minmax(0, 270fr)); gap: 36px 20px; padding-top: clamp(80px, 9vw, 140px); padding-bottom: clamp(56px, 7vw, 100px); }
.ft__big { font: 400 30px/40px var(--font); text-transform: none; }
.ft__l { font: 400 16px/21px var(--font); color: var(--grey); margin-bottom: 20px; }
.ft__v { font: 400 16px/21px var(--font); color: #F0F0F0; margin-bottom: 24px; }
.ft__addr { font: 400 16px/21px var(--font); text-transform: uppercase; color: #fff; letter-spacing: 0; }
.ft__touch .btn--line { padding: 0 40px; min-height: 42px; font-weight: 400; }
.ft__in { max-width: var(--max); }
.ft__h { font: 300 16px var(--ui); }
.ft__nav a { font: 300 16px/1.9 var(--ui); }
.ft__base { font: 400 15px var(--font); }
@media (max-width: 1000px) { .ft__touch { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .ft__touch { grid-template-columns: 1fr; } }

/* Career: open positions, the role page and the CV field */
.jo { padding-top: var(--sec); }
.jo__head { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 16px clamp(24px, 5vw, 80px); align-items: end; margin-bottom: clamp(28px, 3vw, 44px); }
.jo__head .lead { margin: 0; }
.jo__empty { max-width: 46em; padding: 26px 0; border-top: 1px solid var(--ink); border-bottom: 1px solid var(--line); margin: 0; }
.jo__list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--ink); }
.jo__item { border-bottom: 1px solid var(--line); }
.jo__a { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 5fr) auto; gap: 8px 24px; align-items: center; padding: 26px 0; text-decoration: none; color: inherit; transition: padding .3s ease, background .3s; }
.jo__a:hover { padding-left: 14px; padding-right: 14px; background: var(--stone); }
.jo__t { font: 400 clamp(18px, 1.6vw, 22px)/1.3 var(--font); color: #000; letter-spacing: .02em; }
.jo__m { font: 300 14.5px/1.5 var(--ui); color: var(--grey); }
.jo__go { font: 300 15px var(--ui); color: var(--ink); border: 1px solid var(--ink); padding: 10px 20px; white-space: nowrap; }
.jo__a:hover .jo__go { background: var(--ink); color: #fff; }
@media (max-width: 760px) { .jo__head { grid-template-columns: 1fr; } .jo__a { grid-template-columns: 1fr; } .jo__go { justify-self: start; } }
.form__role { margin: 0 0 18px; padding: 14px 16px; background: var(--stone); font: 400 15.5px var(--font); color: #000; }
.form__role span { display: block; font: 400 11px var(--ui); letter-spacing: .18em; text-transform: uppercase; color: var(--grey); margin-bottom: 4px; }
.fld--file input[type=file] { padding: 12px 0; border: 0; border-bottom: 1px solid var(--line); background: transparent; font: 300 14.5px var(--ui); width: 100%; }
.fld--file input[type=file]::file-selector-button { font: 300 14.5px var(--ui); background: transparent; border: 1px solid var(--ink); padding: 8px 16px; margin-right: 14px; cursor: pointer; }
.jb .pj__body { padding-top: clamp(40px, 5vw, 72px); padding-bottom: clamp(24px, 3vw, 40px); }
.jb + .fs { padding-top: clamp(56px, 7vw, 100px); border-top: 1px solid var(--line); margin-top: clamp(40px, 5vw, 72px); }

/* ---------------------------------------------------------------- v2.18 doodle opening (home page)
   Fluorescent pens scribble a ring around the logo; paper white on light devices, charcoal on dark ones.
   Live (WebGL, motion allowed): the section is taller and the stage stays pinned while the visitor scrolls through the ring. */
.dd { --dd-bg: #FBFBFB; position: relative; background: var(--dd-bg); }
.dd__stage { position: relative; height: calc(100vh - var(--hd)); height: calc(100svh - var(--hd)); min-height: 460px; overflow: hidden; background: var(--dd-bg); }
.dd.is-live { height: calc(220vh - var(--hd)); height: calc(220svh - var(--hd)); }
.dd.is-live .dd__stage { position: sticky; top: var(--hd); }
.dd__still { position: absolute; left: 50%; top: 50%; width: min(100vw, calc(100vh - var(--hd))); width: min(100vw, calc(100svh - var(--hd))); transform: translate(-50%, -50%); }
.dd__still img { width: 100%; height: auto; display: block; }
.dd.is-live .dd__still { opacity: 0; transition: opacity .3s; }
.dd__c { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.dd__logo { position: absolute; left: 50%; top: 50%; width: clamp(140px, 17vw, 230px); transform: translate(-50%, -50%); pointer-events: none; will-change: transform, opacity; }
.dd__l { width: 100%; height: auto; display: block; }
.dd__l--white { display: none; }
.dd__cue { position: absolute; left: 50%; bottom: 28px; margin: 0; transform: translateX(-50%); font: 400 11px/1 var(--font); letter-spacing: .3em; text-transform: uppercase; color: #8C8C8C; }
.dd__cue::after { content: ""; display: block; width: 1px; height: 26px; margin: 12px auto 0; background: currentColor; opacity: .6; }
@media (prefers-color-scheme: dark) {
  .dd { --dd-bg: #181516; }
  .dd__l--dark { display: none; }
  .dd__l--white { display: block; }
  .dd__cue { color: #8A847C; }
}
@media (max-width: 767px) { .dd__cue { bottom: 22px; } }

/* ---------------------------------------------------------------- v2.19 360° views (3D Visualization page) */
.tours { max-width: var(--max); margin: 0 auto; padding: calc(var(--sec) * .8) var(--gut) 0; }
.tours__head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px 60px; align-items: end; margin-bottom: 36px; }
.tours__head p { margin: 0; color: var(--text); font: 400 16px/34px var(--font); }
.tours__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 56px; }
.tour__frame { position: relative; aspect-ratio: 16 / 9; background: #1d1a1b; overflow: hidden; }
.tour__frame img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: brightness(.62); transition: filter .5s, transform 1.2s; }
.tour__frame:hover img { filter: brightness(.8); transform: scale(1.02); }
.tour__frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.tour__open { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: inline-flex; flex-direction: column; align-items: center; gap: 16px; background: none; border: 0; color: #fff; font: 400 13px/1 var(--font2, var(--font)); letter-spacing: .26em; text-transform: uppercase; cursor: pointer; }
.tour__icon { display: grid; place-items: center; width: 92px; height: 92px; border: 1px solid rgba(255,255,255,.7); border-radius: 50%; font: 400 17px/1 var(--font); letter-spacing: .08em; transition: background .3s, color .3s; }
.tour__open:hover .tour__icon, .tour__open:focus-visible .tour__icon { background: #fff; color: #181516; }
.tour__cap { display: flex; flex-wrap: wrap; gap: 6px 24px; align-items: baseline; padding-top: 18px; border-bottom: 1px solid var(--line, #e3e0dc); padding-bottom: 16px; }
.tour__t { margin: 0; font: 400 15px/1.5 var(--font); letter-spacing: .2em; text-transform: uppercase; color: var(--ink); }
.tour__cap p { margin: 0; color: var(--text); flex: 1 1 260px; }
.tour__ext { color: var(--ink); font-size: 13px; letter-spacing: .08em; text-decoration: underline; text-underline-offset: 4px; }
@media (max-width: 767px) { .tours__head { grid-template-columns: 1fr; } .tour__frame { aspect-ratio: 4 / 5; } .tour__icon { width: 74px; height: 74px; } }

/* ---------------------------------------------------------------- v2.19 furniture showcase (/collection) */
.sc { --mount: #EFECE8; max-width: calc(var(--max) + 160px); margin: 0 auto; padding: 0 var(--gut) var(--sec); }
.sc__intro { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 24px 64px; align-items: end; padding: 8px 0 44px; border-bottom: 1px solid var(--line); }
.sc__title { margin: 0; font: 400 clamp(28px, 3.4vw, 46px)/1.15 var(--font); letter-spacing: .02em; color: var(--ink); text-wrap: balance; }
.sc__lead { margin: 0 0 14px; color: var(--text); font: 400 16px/34px var(--font); max-width: 52ch; }
.sc__count { margin: 0; font-size: 12px; letter-spacing: .3em; text-transform: uppercase; color: var(--grey); }
.sc__filters { position: sticky; top: var(--hd); z-index: 5; display: flex; gap: 6px 26px; flex-wrap: wrap; padding: 22px 0; background: var(--stone); }
.sc__f { background: none; border: 0; padding: 4px 0; font: 400 12px/1.6 var(--font); letter-spacing: .26em; text-transform: uppercase; color: var(--grey); cursor: pointer; border-bottom: 1px solid transparent; transition: color .3s, border-color .3s; }
.sc__f:hover, .sc__f:focus-visible { color: var(--ink); }
.sc__f.is-on { color: var(--ink); border-bottom-color: var(--ink); }
.sc__grid { list-style: none; margin: 10px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-flow: row dense; gap: 56px 32px; }
.sc__item--wide { grid-column: span 2; }
.sc.is-filtered .sc__item--wide { grid-column: auto; }
.sc__card { display: block; color: inherit; text-decoration: none; }
.sc__mount { position: relative; margin: 0; aspect-ratio: 4 / 5; background: var(--mount); overflow: hidden; display: grid; place-items: center; }
.sc__item--wide .sc__mount { aspect-ratio: 8 / 5; }
.sc.is-filtered .sc__item--wide .sc__mount { aspect-ratio: 4 / 5; }
.sc__mount img { position: absolute; left: 7%; top: 7%; width: 86%; height: 86%; object-fit: contain; mix-blend-mode: multiply; transition: transform 1.1s cubic-bezier(.2, .7, .2, 1), filter .5s; }
.sc__film { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .5s; }
.sc__card.is-playing .sc__film { opacity: 1; }
.sc__badge { position: absolute; left: 14px; top: 14px; font-size: 10px; letter-spacing: .26em; text-transform: uppercase; color: var(--ink); background: rgba(255,255,255,.75); padding: 4px 8px; }
.sc__grid:hover .sc__mount img { filter: brightness(.9) saturate(.9); }
.sc__card:hover .sc__mount img, .sc__card:focus-visible .sc__mount img { transform: scale(1.045); filter: none; }
.sc__meta { line-height: 1.5; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 16px; padding-top: 18px; }
.sc__cat { grid-column: 1 / -1; font-size: 10.5px; line-height: 1.6; letter-spacing: .3em; text-transform: uppercase; color: var(--grey); }
.sc__name { margin: 0; font: 400 15px/1.5 var(--font); letter-spacing: .2em; text-transform: uppercase; color: var(--ink); }
.sc__view { align-self: center; font-size: 11px; letter-spacing: .22em; text-transform: uppercase; color: var(--ink); opacity: 0; transform: translateX(-6px); transition: opacity .35s, transform .35s; }
.sc__card:hover .sc__view, .sc__card:focus-visible .sc__view { opacity: 1; transform: none; }
.sc__line { grid-column: 1 / -1; margin: 0; color: var(--text); font: 400 14.5px/1.75 var(--font); }
@media (max-width: 1100px) { .sc__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 767px) {
  .sc__intro { grid-template-columns: 1fr; }
  .sc__filters { gap: 4px 18px; padding: 14px 0; overflow-x: auto; flex-wrap: nowrap; scrollbar-width: none; }
  .sc__f { white-space: nowrap; }
  .sc__grid { gap: 36px 14px; }
  .sc__item--wide .sc__mount { aspect-ratio: 4 / 5; }
  .sc__item--wide { grid-column: span 2; }
  .sc__name { font-size: 12.5px; letter-spacing: .14em; }
  .sc__line { display: none; }
  .sc__view { display: none; }
}
@media (hover: none) { .sc__grid:hover .sc__mount img { filter: none; } }