/* Albar Teso — estudio de interiorismo (marca ficticia) */
:root {
--paper: #f3eee6;
--paper-2: #ebe4d8;
--stone: #d8cebe;
--oak: #a7784b;
--oak-deep: #7a5534;
--ink: #1b1916;
--ink-2: #2a2622;
--muted: #6f675c;
--line: rgba(27, 25, 22, .14);
--line-strong: rgba(27, 25, 22, .32);
--serif: "Cormorant Garamond", "Iowan Old Style", Georgia, serif;
--sans: "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
--mono: "IBM Plex Mono", ui-monospace, Menlo, monospace;
--gutter: clamp(16px, 4vw, 64px);
--ease: cubic-bezier(.77, 0, .175, 1);
--ease-out: cubic-bezier(.16, 1, .3, 1);
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
margin: 0;
background: var(--paper);
color: var(--ink);
font: 400 17px/1.6 var(--sans);
overflow-x: clip;
-webkit-font-smoothing: antialiased;
}
body.is-locked { overflow: hidden; }
[hidden] { display: none !important; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
button { font: inherit; color: inherit; cursor: pointer; }
h1, h2, h3 { margin: 0; font-weight: 400; }
p { margin: 0; }
em { font-style: italic; }
.mono { font-family: var(--mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: 12px; top: -60px; z-index: 200; background: var(--ink); color: var(--paper); padding: 10px 14px; }
.skip:focus { top: 12px; }
:focus-visible { outline: 1.5px solid var(--oak); outline-offset: 3px; }
::selection { background: var(--oak); color: var(--paper); }
/* ---------- Intro ---------- */
.intro {
position: fixed; inset: 0; z-index: 150;
background: var(--ink); color: var(--paper);
display: grid; place-items: center;
transition: clip-path 1.1s var(--ease);
clip-path: inset(0 0 0 0);
}
.intro.is-out { clip-path: inset(0 0 100% 0); }
.intro__mark { display: flex; align-items: center; gap: 18px; font: 300 clamp(34px, 6vw, 72px)/1 var(--serif); letter-spacing: .01em; }
.intro__word { overflow: hidden; display: inline-block; }
.intro__rule { width: 0; height: 1px; background: var(--oak); animation: rule 1s var(--ease) .2s forwards; }
@keyframes rule { to { width: clamp(40px, 8vw, 120px); } }
.intro__count { position: absolute; right: var(--gutter); bottom: var(--gutter); font: 300 clamp(48px, 9vw, 120px)/1 var(--serif); color: var(--stone); }
/* ---------- Cursor ---------- */
.cursor {
position: fixed; left: 0; top: 0; z-index: 120; pointer-events: none;
width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%;
background: var(--ink); mix-blend-mode: normal;
display: grid; place-items: center;
transition: width .45s var(--ease-out), height .45s var(--ease-out), margin .45s var(--ease-out), background .3s, opacity .3s;
opacity: 0;
}
.cursor__label { font: 500 11px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--paper); opacity: 0; transform: scale(.6); transition: .3s var(--ease-out); }
.cursor.is-visible { opacity: 1; }
.cursor.is-view { width: 96px; height: 96px; margin: -48px 0 0 -48px; background: var(--paper); }
.cursor.is-view .cursor__label { opacity: 1; transform: none; color: var(--ink); }
@media (hover: none), (pointer: coarse) { .cursor { display: none; } }
/* ---------- Nav ---------- */
.nav {
position: fixed; inset: 0 0 auto 0; z-index: 90;
display: flex; align-items: center; gap: 32px;
padding: 22px var(--gutter);
color: var(--paper);
transition: background .5s, color .5s, padding .5s, transform .6s var(--ease);
}
.nav.is-solid { background: rgba(243, 238, 230, .9); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); color: var(--ink); padding-top: 14px; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.nav.is-hidden { transform: translateY(-100%); }
.nav__logo { display: flex; align-items: center; gap: 12px; text-decoration: none; font: 500 15px/1 var(--sans); letter-spacing: .22em; text-transform: uppercase; }
.nav__links { display: flex; gap: 28px; margin-left: auto; }
.nav__links a, .nav__cta { position: relative; text-decoration: none; font-size: 13px; letter-spacing: .06em; }
.nav__links a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -4px; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: right; transition: transform .5s var(--ease); }
.nav__links a:hover::after { transform: scaleX(1); transform-origin: left; }
.nav__cta { border: 1px solid currentColor; padding: 10px 18px; border-radius: 999px; transition: background .3s, color .3s; }
.nav__cta:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.nav:not(.is-solid) .nav__cta:hover { background: var(--paper); color: var(--ink); border-color: var(--paper); }
.nav__toggle { display: none; margin-left: auto; width: 44px; height: 44px; border: 0; background: none; position: relative; }
.nav__toggle i { position: absolute; left: 10px; right: 10px; height: 1.5px; background: currentColor; transition: transform .4s var(--ease); }
.nav__toggle i:nth-of-type(1) { top: 17px; }
.nav__toggle i:nth-of-type(2) { top: 26px; }
.nav__toggle[aria-expanded="true"] i:nth-of-type(1) { transform: translateY(4.5px) rotate(45deg); }
.nav__toggle[aria-expanded="true"] i:nth-of-type(2) { transform: translateY(-4.5px) rotate(-45deg); }
.menu { position: fixed; inset: 0; z-index: 85; background: var(--ink); color: var(--paper); padding: 110px var(--gutter) 32px; display: flex; flex-direction: column; justify-content: space-between; clip-path: inset(0 0 100% 0); transition: clip-path .8s var(--ease); }
.menu.is-open { clip-path: inset(0 0 0 0); }
.menu nav { display: flex; flex-direction: column; }
.menu a { display: flex; align-items: baseline; gap: 16px; text-decoration: none; font: 300 40px/1.25 var(--serif); padding: 6px 0; border-bottom: 1px solid rgba(243,238,230,.12); }
.menu small { font: 400 11px/1 var(--mono); color: var(--stone); }
.menu__foot { font: 400 11px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--stone); }
body.menu-open .nav { color: var(--paper); background: transparent; border-color: transparent; backdrop-filter: none; }
/* ---------- Hero ---------- */
.hero { position: relative; height: 100svh; min-height: 560px; overflow: hidden; color: var(--paper); background: var(--ink); }
.hero__media { position: absolute; inset: 0; clip-path: inset(18% 32% 18% 32%); will-change: clip-path; }
.hero__media img { width: 100%; height: 115%; object-fit: cover; object-position: 50% 50%; transform: scale(1.25); will-change: transform; }
.hero__shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(20,18,16,.55) 0%, rgba(20,18,16,.05) 30%, rgba(20,18,16,.12) 55%, rgba(20,18,16,.72) 100%); opacity: 0; }
.hero__inner { position: relative; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; padding: 0 var(--gutter) clamp(24px, 4vw, 48px); }
.hero__kicker { display: flex; gap: 24px; font: 400 12px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; margin-bottom: clamp(16px, 2vw, 28px); opacity: 0; }
.hero__kicker span + span::before { content: "—"; margin-right: 24px; opacity: .6; }
.hero__title { font: 300 clamp(56px, 11.2vw, 196px)/.9 var(--serif); letter-spacing: -.02em; }
.hero__title .line { display: block; overflow: hidden; padding-bottom: .06em; }
.hero__title .line > span { display: inline-block; transform: translateY(110%); }
.hero__title .line:nth-child(2) { padding-left: 1.4em; }
.hero__title .line:nth-child(3) { padding-left: .5em; }
.hero__title em { color: #e9cfae; }
.hero__foot { display: grid; grid-template-columns: 1fr auto 1fr; align-items: end; gap: 20px; margin-top: clamp(24px, 3vw, 44px); padding-top: 18px; border-top: 1px solid rgba(243,238,230,.28); opacity: 0; }
.hero__caption { font-size: 13px; color: rgba(243,238,230,.85); }
.hero__caption .mono { margin-right: 10px; }
.hero__coords { justify-self: end; color: rgba(243,238,230,.75); }
.hero__scroll { display: flex; flex-direction: column; align-items: center; gap: 10px; text-decoration: none; font: 400 11px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; }
.hero__scroll i { width: 1px; height: 40px; background: rgba(243,238,230,.3); position: relative; overflow: hidden; }
.hero__scroll i::after { content: ""; position: absolute; inset: 0; background: var(--paper); transform: translateY(-100%); animation: drip 2.2s var(--ease) infinite; }
@keyframes drip { 0% { transform: translateY(-100%); } 60%, 100% { transform: translateY(100%); } }
body.is-ready .hero__media { clip-path: inset(0 0 0 0); transition: clip-path 1.6s var(--ease); }
body.is-ready .hero__media img { transform: scale(1); transition: transform 2.4s var(--ease-out); }
body.is-ready .hero__shade { opacity: 1; transition: opacity 1.2s .6s; }
body.is-ready .hero__title .line > span { transform: none; transition: transform 1.3s var(--ease-out); }
body.is-ready .hero__title .line:nth-child(1) > span { transition-delay: .75s; }
body.is-ready .hero__title .line:nth-child(2) > span { transition-delay: .87s; }
body.is-ready .hero__title .line:nth-child(3) > span { transition-delay: .99s; }
body.is-ready .hero__kicker, body.is-ready .hero__foot { opacity: 1; transition: opacity 1s 1.3s; }
.nav { opacity: 0; }
body.is-ready .nav { opacity: 1; transition: opacity 1s 1.4s, background .5s, color .5s, padding .5s, transform .6s var(--ease); }
/* ---------- Common section ---------- */
section { position: relative; }
.eyebrow { display: flex; align-items: center; gap: 14px; font: 500 12px/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin-bottom: 28px; }
.eyebrow .mono { color: var(--oak); }
.section-title { font: 300 clamp(44px, 6.4vw, 104px)/.95 var(--serif); letter-spacing: -.015em; }
.section-title em { color: var(--oak-deep); }
.section-lede { max-width: 42ch; color: var(--muted); margin-top: 28px; }
.section-head { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: 24px; padding: 0 var(--gutter); margin-bottom: clamp(48px, 7vw, 110px); }
.section-head .eyebrow { grid-column: 1 / -1; }
.section-head .section-title { grid-column: 1 / span 7; }
.section-head .section-lede { grid-column: 9 / span 4; align-self: end; margin: 0; }
.reveal { opacity: 0; transform: translateY(40px); transition: opacity 1s var(--ease-out), transform 1.2s var(--ease-out); }
.reveal.is-in { opacity: 1; transform: none; }
/* ---------- Manifesto ---------- */
.manifesto { padding: clamp(96px, 14vw, 220px) var(--gutter) clamp(80px, 10vw, 160px); display: grid; grid-template-columns: repeat(12, 1fr); column-gap: 24px; }
.manifesto .eyebrow { grid-column: 1 / span 3; align-self: start; padding-top: 14px; }
.manifesto__text { grid-column: 4 / span 9; font: 300 clamp(28px, 3.6vw, 58px)/1.14 var(--serif); letter-spacing: -.005em; text-indent: 2.4em; }
.manifesto__text .w { opacity: .14; transition: opacity .6s; }
.manifesto__text .w.on { opacity: 1; }
.stats { grid-column: 4 / span 9; display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; margin: clamp(56px, 7vw, 110px) 0 0; border-top: 1px solid var(--line); padding-top: 24px; }
.stats div { display: flex; flex-direction: column-reverse; gap: 8px; }
.stats dt { font-size: 13px; color: var(--muted); }
.stats dd { margin: 0; font: 300 clamp(48px, 5vw, 80px)/1 var(--serif); }
/* ---------- Projects ---------- */
.projects { padding: clamp(40px, 6vw, 80px) 0 clamp(80px, 10vw, 160px); }
.projects__grid { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: 24px; row-gap: clamp(64px, 9vw, 150px); padding: 0 var(--gutter); }
.card { position: relative; display: block; text-align: left; background: none; border: 0; padding: 0; cursor: pointer; }
.card:nth-child(1) { grid-column: 1 / span 7; }
.card:nth-child(2) { grid-column: 9 / span 4; margin-top: 22vw; }
.card:nth-child(3) { grid-column: 2 / span 5; }
.card:nth-child(4) { grid-column: 7 / span 6; margin-top: 10vw; }
.card:nth-child(5) { grid-column: 1 / span 4; }
.card:nth-child(6) { grid-column: 6 / span 7; margin-top: 14vw; }
.card__media { position: relative; overflow: hidden; aspect-ratio: var(--ar, 4 / 3); background: var(--paper-2); clip-path: inset(100% 0 0 0); transition: clip-path 1.4s var(--ease); }
.card.is-in .card__media { clip-path: inset(0 0 0 0); }
.card__media img { position: absolute; inset: -8% 0; width: 100%; height: 116%; object-fit: cover; transform: scale(1.18) translateY(var(--py, 0px)); transition: transform 1.8s var(--ease-out), filter .8s; }
.card.is-in .card__media img { transform: scale(1.0001) translateY(var(--py, 0px)); }
.card:hover .card__media img { transform: scale(1.05) translateY(var(--py, 0px)); transition: transform 1.2s var(--ease-out); }
.card__veil { position: absolute; inset: 0; background: var(--ink); opacity: 0; transition: opacity .6s; }
.card:hover .card__veil { opacity: .12; }
.card__meta { display: grid; grid-template-columns: auto 1fr auto; align-items: baseline; gap: 16px; padding-top: 18px; border-bottom: 1px solid var(--line); padding-bottom: 14px; }
.card__n { color: var(--oak); }
.card__title { font: 400 clamp(26px, 2.4vw, 40px)/1.05 var(--serif); }
.card__title em { font-style: italic; color: var(--muted); }
.card__tags { color: var(--muted); text-align: right; }
.card__line { position: absolute; left: 0; bottom: -1px; height: 1px; width: 100%; background: var(--ink); transform: scaleX(0); transform-origin: left; transition: transform .8s var(--ease); }
.card:hover .card__line, .card:focus-visible .card__line { transform: scaleX(1); }
.card__sub { margin-top: 10px; display: flex; gap: 18px; color: var(--muted); font-size: 14px; }
/* ---------- Plan ---------- */
.plan { background: var(--ink); color: var(--paper); padding: clamp(96px, 12vw, 180px) var(--gutter); display: grid; grid-template-columns: repeat(12, 1fr); column-gap: 24px; row-gap: 48px; }
.plan .eyebrow { color: var(--stone); }
.plan .section-title em { color: #e2c49e; }
.plan .section-lede { color: rgba(243,238,230,.66); }
.plan__head { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(12, 1fr); column-gap: 24px; margin-bottom: clamp(24px, 4vw, 56px); }
.plan__head .eyebrow { grid-column: 1 / -1; }
.plan__head .section-title { grid-column: 1 / span 7; }
.plan__head .section-lede { grid-column: 9 / span 4; align-self: end; margin: 0; }
.plan__rooms { grid-column: 1 / span 3; align-self: start; list-style: none; margin: 0; padding: 0; border-top: 1px solid rgba(243,238,230,.16); }
.plan__drawing { grid-column: 4 / span 5; align-self: start; }
.plan__photo { grid-column: 9 / span 4; align-self: start; }
.plan__rooms button { width: 100%; display: grid; grid-template-columns: 24px 1fr auto; align-items: baseline; gap: 10px; padding: 18px 0; background: none; border: 0; border-bottom: 1px solid rgba(243,238,230,.16); text-align: left; font: 300 24px/1.1 var(--serif); color: rgba(243,238,230,.5); transition: color .4s, padding .4s var(--ease-out); }
.plan__rooms button small { font: 400 12px/1 var(--mono); letter-spacing: .06em; }
.plan__rooms button .mono { color: var(--oak); }
.plan__rooms button[aria-pressed="true"], .plan__rooms button:hover { color: var(--paper); padding-left: 10px; }
.plan__drawing { margin: 0; color: rgba(243,238,230,.9); }
.plan__drawing svg { width: 100%; height: auto; overflow: visible; }
.plan__drawing figcaption, .plan__photo figcaption { margin-top: 12px; color: rgba(243,238,230,.55); }
.plan__photo figcaption { font-size: 14px; }
.plan__photo figcaption .mono { color: var(--oak); margin-right: 8px; }
.room { fill: transparent; cursor: pointer; transition: fill .5s; }
.room:hover, .room.is-active { fill: rgba(196, 154, 108, .18); }
.walls path { fill: none; stroke: currentColor; stroke-width: 5; stroke-linecap: square; }
.thin path, .thin rect, .thin circle, .thin ellipse { fill: none; stroke: currentColor; stroke-width: 1; opacity: .7; }
.dims path { stroke: #c49a6c; opacity: 1; }
.dim-text text { fill: #e2c49e; font-size: 11px; font-family: var(--mono); letter-spacing: .04em; }
.labels text { fill: rgba(243,238,230,.7); font-size: 10px; font-family: var(--mono); letter-spacing: .12em; pointer-events: none; }
.north { color: rgba(243,238,230,.6); }
.hatch { color: rgba(243,238,230,.9); pointer-events: none; }
.draw path, .draw rect, .draw circle, .draw ellipse { stroke-dasharray: var(--len, 1200); stroke-dashoffset: var(--len, 1200); }
.plan.is-in .draw path, .plan.is-in .draw rect, .plan.is-in .draw circle, .plan.is-in .draw ellipse { stroke-dashoffset: 0; transition: stroke-dashoffset 2.4s var(--ease); }
.plan.is-in .thin path, .plan.is-in .thin rect, .plan.is-in .thin circle, .plan.is-in .thin ellipse { transition-delay: .6s; }
.dim-text, .labels, .north, .hatch { opacity: 0; transition: opacity 1s 1.6s; }
.plan.is-in .dim-text, .plan.is-in .labels, .plan.is-in .north { opacity: 1; }
.plan.is-in .hatch { opacity: .6; }
.plan__photo { margin: 0; }
.plan__frames { position: relative; aspect-ratio: 4 / 5; overflow: hidden; background: var(--ink-2); }
.plan__frames img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; clip-path: inset(0 0 0 100%); transform: scale(1.08); transition: clip-path 1.1s var(--ease), transform 1.6s var(--ease-out); }
.plan__frames img.is-active { clip-path: inset(0 0 0 0); transform: none; z-index: 2; }
.plan__frames img.is-leaving { clip-path: inset(0 0 0 0); z-index: 1; }
/* ---------- Services ---------- */
.services { padding: clamp(96px, 12vw, 180px) 0; }
.services__list { list-style: none; margin: 0; padding: 0 var(--gutter); border-top: 1px solid var(--line); }
.service { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: 24px; align-items: baseline; padding: 32px 0; border-bottom: 1px solid var(--line); position: relative; }
.service::before { content: ""; position: absolute; inset: 0 calc(var(--gutter) * -1); background: var(--paper-2); transform: scaleY(0); transform-origin: bottom; transition: transform .6s var(--ease); z-index: -1; }
.service:hover::before { transform: scaleY(1); }
.service__n { grid-column: 1 / span 1; color: var(--oak); }
.service h3 { grid-column: 2 / span 5; font: 300 clamp(30px, 3.4vw, 54px)/1 var(--serif); transition: transform .6s var(--ease-out); }
.service:hover h3 { transform: translateX(14px); }
.service p { grid-column: 7 / span 4; color: var(--muted); font-size: 16px; }
.service__meta { grid-column: 11 / span 2; text-align: right; color: var(--ink); }
/* ---------- Process ---------- */
.process { padding: clamp(80px, 10vw, 160px) 0; background: var(--paper-2); }
.process__track { position: relative; padding: 0 var(--gutter); }
.process__line { position: absolute; left: var(--gutter); right: var(--gutter); top: 6px; height: 1px; background: var(--line-strong); }
.process__line i { position: absolute; inset: 0; background: var(--oak-deep); transform: scaleX(0); transform-origin: left; }
.process__steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: 28px; }
.step { position: relative; padding-top: 40px; }
.step::before { content: ""; position: absolute; top: 0; left: 0; width: 13px; height: 13px; border-radius: 50%; background: var(--paper-2); border: 1px solid var(--ink); transition: background .4s; }
.step.is-on::before { background: var(--oak-deep); border-color: var(--oak-deep); }
.step__n { color: var(--oak-deep); }
.step h3 { font: 400 clamp(26px, 2.2vw, 34px)/1.05 var(--serif); margin: 14px 0 14px; }
.step p { font-size: 15px; color: var(--muted); }
.step .step__out { margin-top: 18px; color: var(--ink); font-size: 10.5px; line-height: 1.5; }
/* ---------- Materials ---------- */
.materials { padding: clamp(96px, 12vw, 180px) 0; }
.swatches { list-style: none; margin: 0; padding: 0 var(--gutter); display: grid; grid-template-columns: repeat(7, 1fr); gap: 20px; }
.swatch:nth-child(even) { margin-top: 64px; }
.swatch__chip { aspect-ratio: 3 / 4; margin-bottom: 16px; position: relative; overflow: hidden; box-shadow: 0 1px 0 rgba(0,0,0,.05), 0 18px 30px -22px rgba(27,25,22,.5); transition: transform .8s var(--ease-out), box-shadow .8s; }
.swatch__chip::after { content: ""; position: absolute; inset: 0; background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,.35) 48%, transparent 66%); transform: translateX(-120%); transition: transform 1.2s var(--ease-out); }
.swatch:hover .swatch__chip { transform: translateY(-10px) rotate(-1.2deg); box-shadow: 0 30px 40px -24px rgba(27,25,22,.55); }
.swatch:hover .swatch__chip::after { transform: translateX(120%); }
.swatch .mono { color: var(--oak); }
.swatch h3 { font: 400 23px/1.1 var(--serif); margin: 6px 0 6px; }
.swatch p:last-child { font-size: 14px; color: var(--muted); line-height: 1.45; }
.noise { --noise: url("data:image/svg+xml;utf8,"); }
.m-travertino { background:
url("data:image/svg+xml;utf8,") center/cover,
#e4d6c0; }
.m-roble { background:
url("data:image/svg+xml;utf8,") center/cover,
#c09466; }
.m-cal { background:
url("data:image/svg+xml;utf8,") center/cover,
#d8b79c; }
.m-lino { background:
repeating-linear-gradient(0deg, rgba(120,104,84,.13) 0 1px, transparent 1px 3px),
repeating-linear-gradient(90deg, rgba(120,104,84,.11) 0 1px, transparent 1px 4px),
#e9e2d4; }
.m-laton { background: repeating-linear-gradient(90deg, rgba(255,255,255,.12) 0 1px, transparent 1px 3px), linear-gradient(135deg, #8a6a32 0%, #c9a45e 38%, #e8cf8f 52%, #b48c45 70%, #7d5e2a 100%); }
.m-nogal { background:
url("data:image/svg+xml;utf8,") center/cover,
#5e4130; }
.m-pizarra { background:
url("data:image/svg+xml;utf8,") center/cover,
#34343a; }
/* ---------- Studio ---------- */
.studio { padding: clamp(80px, 10vw, 160px) var(--gutter); display: grid; grid-template-columns: repeat(12, 1fr); column-gap: 24px; row-gap: 56px; border-top: 1px solid var(--line); }
.studio__intro { grid-column: 1 / span 5; }
.studio__img { margin: 56px 0 0; width: 72%; aspect-ratio: 4 / 5; overflow: hidden; }
.studio__img img { width: 100%; height: 100%; object-fit: cover; }
.reveal-img { clip-path: inset(0 0 100% 0); transition: clip-path 1.4s var(--ease); }
.is-in > .reveal-img { clip-path: inset(0 0 0 0); }
.team { grid-column: 7 / span 6; list-style: none; margin: 0; padding: 0; align-self: end; }
.member { display: grid; grid-template-columns: 76px 1fr; gap: 24px; align-items: center; padding: 22px 0; border-bottom: 1px solid var(--line); }
.member:first-child { border-top: 1px solid var(--line); }
.member__mono { width: 76px; height: 76px; border-radius: 50%; display: grid; place-items: center; font: 300 28px/1 var(--serif); letter-spacing: .04em; color: var(--oak-deep); background: radial-gradient(circle at 30% 25%, #fbf8f2, var(--stone)); border: 1px solid var(--line); transition: transform .8s var(--ease-out), background .5s, color .5s; }
.member:hover .member__mono { transform: rotate(-12deg) scale(1.04); background: var(--ink); color: var(--paper); }
.member h3 { font: 400 26px/1.1 var(--serif); }
.member p { font-size: 15px; color: var(--muted); }
.member .mono { margin-top: 6px; color: var(--oak-deep); font-size: 10.5px; }
/* ---------- Quote form ---------- */
.quote { background: var(--ink); color: var(--paper); padding: clamp(96px, 12vw, 180px) var(--gutter); display: grid; grid-template-columns: repeat(12, 1fr); column-gap: 24px; row-gap: 56px; }
.quote .eyebrow { color: var(--stone); }
.quote .section-title em { color: #e2c49e; }
.quote .section-lede { color: rgba(243,238,230,.66); }
.quote__head { grid-column: 1 / span 4; }
.quote__contact { margin-top: 44px; font-style: normal; display: flex; flex-direction: column; gap: 4px; font-size: 15px; color: rgba(243,238,230,.8); border-top: 1px solid rgba(243,238,230,.16); padding-top: 20px; }
.form, .confirm { grid-column: 6 / span 7; }
.form__group { border: 0; margin: 0 0 40px; padding: 0; }
.form__group legend { color: #e2c49e; margin-bottom: 18px; padding: 0; }
.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.chips { display: flex; flex-wrap: wrap; gap: 10px; }
.chip input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.chip span { display: inline-block; padding: 11px 18px; border: 1px solid rgba(243,238,230,.28); border-radius: 999px; font-size: 15px; cursor: pointer; transition: background .3s, color .3s, border-color .3s; }
.chip:hover span { border-color: var(--paper); }
.chip input:checked + span { background: var(--paper); color: var(--ink); border-color: var(--paper); }
.chip input:focus-visible + span { outline: 1.5px solid #e2c49e; outline-offset: 3px; }
.field { display: flex; flex-direction: column; margin-bottom: 22px; min-width: 0; }
.field label { font-size: 13px; color: rgba(243,238,230,.66); margin-bottom: 8px; }
.opt { color: rgba(243,238,230,.4); }
.field input, .field select, .field textarea { width: 100%; min-width: 0; font: 400 19px/1.3 var(--sans); color: var(--paper); background: transparent; border: 0; border-bottom: 1px solid rgba(243,238,230,.3); border-radius: 0; padding: 10px 0 12px; transition: border-color .3s; -webkit-appearance: none; appearance: none; color-scheme: dark; }
.field select { background: url("data:image/svg+xml;utf8,") right 4px center no-repeat; padding-right: 24px; }
.field select option { color: var(--ink); background: var(--paper); }
.field textarea { resize: vertical; min-height: 90px; }
.field input::placeholder, .field textarea::placeholder { color: rgba(243,238,230,.3); }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: #e2c49e; }
.field__unit { position: relative; }
.field__unit span { position: absolute; right: 0; bottom: 14px; color: rgba(243,238,230,.5); font-size: 15px; }
.field.has-error input, .field.has-error select { border-color: #e88a6a; }
.field__err { color: #f0a284; font-size: 13px; min-height: 0; margin-top: 6px; }
.field__err:empty { display: none; }
.check { display: flex; gap: 12px; align-items: flex-start; font-size: 14px; color: rgba(243,238,230,.75); cursor: pointer; }
.check input { width: 18px; height: 18px; margin: 2px 0 0; accent-color: #c49a6c; flex: none; }
.form__submit { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }
.form__note { color: #f0a284; }
.btn { display: inline-flex; align-items: center; gap: 14px; padding: 18px 30px; border-radius: 999px; border: 1px solid var(--paper); background: var(--paper); color: var(--ink); font: 500 15px/1 var(--sans); letter-spacing: .02em; position: relative; overflow: hidden; transition: color .4s; isolation: isolate; }
.btn::before { content: ""; position: absolute; inset: 0; background: #c49a6c; transform: translateY(101%); transition: transform .5s var(--ease); z-index: -1; }
.btn:hover::before { transform: none; }
.btn svg { transition: transform .4s var(--ease-out); }
.btn:hover svg { transform: translateX(4px); }
.btn--ghost { background: transparent; color: var(--paper); }
.btn--ghost:hover { color: var(--ink); }
.confirm { border-top: 1px solid rgba(243,238,230,.16); padding-top: 32px; animation: rise 1s var(--ease-out); }
.confirm:focus { outline: none; }
@keyframes rise { from { opacity: 0; transform: translateY(30px); } }
.confirm__title { font: 300 clamp(44px, 5vw, 76px)/1 var(--serif); }
.confirm__title em { color: #e2c49e; }
.confirm__lede { margin-top: 20px; color: rgba(243,238,230,.75); max-width: 52ch; }
.confirm__lede strong { color: var(--paper); font-size: 14px; }
.confirm__sheet { margin: 36px 0; display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid rgba(243,238,230,.16); }
.confirm__sheet div { padding: 14px 0; border-bottom: 1px solid rgba(243,238,230,.16); }
.confirm__sheet dt { font: 400 10.5px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: rgba(243,238,230,.5); margin-bottom: 6px; }
.confirm__sheet dd { margin: 0; font: 400 22px/1.2 var(--serif); }
/* ---------- Footer ---------- */
.footer { background: var(--paper); padding: clamp(64px, 8vw, 120px) var(--gutter) 90px; overflow: hidden; }
.footer__big { font: 300 clamp(72px, 22.5vw, 420px)/.85 var(--serif); letter-spacing: -.03em; white-space: nowrap; margin-bottom: 56px; color: var(--ink); }
.footer__cols { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; border-top: 1px solid var(--line); padding-top: 24px; font-size: 15px; }
.footer__cols .mono { color: var(--oak); margin-bottom: 8px; }
.footer__legal { margin-top: 56px; display: flex; justify-content: space-between; gap: 24px; flex-wrap: wrap; font-size: 13px; color: var(--muted); }
.footer__legal a { text-underline-offset: 3px; }
.demo-tag { position: fixed; left: 14px; bottom: 14px; z-index: 95; max-width: calc(100vw - 28px); padding: 7px 12px; border-radius: 999px; background: rgba(27,25,22,.82); color: rgba(243,238,230,.92); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); font: 400 11px/1.35 var(--sans); letter-spacing: .01em; text-decoration: none; opacity: 0; transition: opacity .8s 2s, background .3s; }
body.is-ready .demo-tag { opacity: 1; }
.demo-tag:hover { background: var(--ink); }
/* ---------- Project view ---------- */
.pv { position: fixed; inset: 0; z-index: 110; }
.pv__cover { position: fixed; inset: 0; overflow: hidden; z-index: 1; will-change: clip-path; pointer-events: none; }
.pv__cover img { width: 100%; height: 100%; object-fit: cover; }
.pv__scroll { position: absolute; inset: 0; overflow-y: auto; overscroll-behavior: contain; z-index: 2; opacity: 0; }
.pv.is-open .pv__scroll { opacity: 1; transition: opacity .01s .9s; }
.pv__hero { height: 100svh; position: relative; display: flex; align-items: flex-end; color: var(--paper); }
.pv__hero::before { content: ""; position: absolute; inset: 0; background: var(--hero-img) var(--hero-pos, 50% 50%) / cover no-repeat; }
.pv__hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(20,18,16,.3), rgba(20,18,16,0) 40%, rgba(20,18,16,.65)); }
.pv__heroinner { position: relative; z-index: 1; padding: 0 var(--gutter) clamp(32px, 5vw, 64px); }
.pv__heroinner .mono { margin-bottom: 16px; }
.pv__title { font: 300 clamp(56px, 10vw, 170px)/.9 var(--serif); letter-spacing: -.02em; }
.pv__title span { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .05em; }
.pv__title span > span { display: inline-block; transform: translateY(105%); transition: transform 1.1s var(--ease-out); }
.pv.is-open .pv__title span > span { transform: none; transition-delay: 1s; }
.pv__body { background: var(--paper); padding: clamp(56px, 7vw, 110px) var(--gutter); display: grid; grid-template-columns: repeat(12, 1fr); column-gap: 24px; row-gap: 56px; }
.pv__sheet { grid-column: 1 / span 4; margin: 0; border-top: 1px solid var(--ink); align-self: start; }
.pv__sheet div { display: flex; justify-content: space-between; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.pv__sheet dt { font: 400 11px/1.6 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.pv__sheet dd { margin: 0; text-align: right; font-size: 15px; }
.pv__text { grid-column: 6 / span 7; font: 300 clamp(22px, 2vw, 30px)/1.35 var(--serif); }
.pv__text p + p { margin-top: 1em; }
.pv__gallery { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(12, 1fr); column-gap: 24px; row-gap: 24px; }
.pv__gallery figure { margin: 0; overflow: hidden; }
.pv__gallery img { width: 100%; height: 100%; object-fit: cover; }
.pv__gallery figcaption { margin-top: 10px; font-size: 13px; color: var(--muted); }
.pv__gallery .g-wide { grid-column: 1 / -1; aspect-ratio: 21 / 9; }
.pv__gallery .g-l { grid-column: 1 / span 7; aspect-ratio: 4 / 3; }
.pv__gallery .g-r { grid-column: 9 / span 4; aspect-ratio: 3 / 4; align-self: end; }
.pv__gallery .g-c { grid-column: 3 / span 8; aspect-ratio: 16 / 10; }
.pv__gallery figure > div { height: 100%; overflow: hidden; }
.pv__gallery figure.has-cap { aspect-ratio: auto; }
.pv__gallery figure.has-cap > div { aspect-ratio: var(--ar); }
.pv__next { grid-column: 1 / -1; display: flex; flex-direction: column; align-items: flex-start; gap: 10px; background: none; border: 0; border-top: 1px solid var(--ink); padding: 32px 0 0; text-align: left; }
.pv__next .mono { color: var(--oak); }
.pv__next strong { font: 300 clamp(44px, 7vw, 120px)/.95 var(--serif); transition: transform .8s var(--ease-out); }
.pv__next:hover strong { transform: translateX(20px); }
.pv__close { position: fixed; top: 18px; right: var(--gutter); z-index: 3; display: flex; align-items: center; gap: 12px; padding: 12px 18px; border-radius: 999px; border: 0; background: var(--paper); color: var(--ink); font: 500 13px/1 var(--sans); letter-spacing: .06em; box-shadow: 0 6px 24px -8px rgba(27,25,22,.45), 0 0 0 1px var(--line); opacity: 0; transform: translateY(-10px); transition: opacity .5s, transform .5s var(--ease-out); }
.pv.is-open .pv__close { opacity: 1; transform: none; transition-delay: 1s; }
.pv__close i { width: 14px; height: 14px; position: relative; }
.pv__close i::before, .pv__close i::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1.5px; background: currentColor; transform: rotate(45deg); }
.pv__close i::after { transform: rotate(-45deg); }
/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
.plan__drawing { grid-column: 1 / span 7; }
.plan__photo { grid-column: 8 / span 5; }
.plan__rooms { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; column-gap: 24px; }
.nav__links { display: none; }
.nav__cta { margin-left: auto; }
.swatches { grid-template-columns: repeat(4, 1fr); }
.swatch:nth-child(even) { margin-top: 0; }
.swatch:nth-child(4n+2), .swatch:nth-child(4n+4) { margin-top: 48px; }
.process__steps { grid-template-columns: repeat(3, 1fr); row-gap: 56px; }
.process__line { display: none; }
.step { border-top: 1px solid var(--line-strong); }
.step::before { top: -7px; }
.service h3 { grid-column: 2 / span 5; }
.service p { grid-column: 7 / span 6; }
.service__meta { grid-column: 7 / span 6; text-align: left; margin-top: 12px; }
}
@media (max-width: 760px) {
body { font-size: 16px; }
.nav { padding-top: 14px; padding-bottom: 14px; gap: 12px; }
.nav__cta { display: none; }
.nav__toggle { display: block; }
.nav__logo { font-size: 13px; }
.hero__media { clip-path: inset(22% 18% 22% 18%); }
.hero__kicker { flex-direction: column; gap: 8px; }
.hero__kicker span + span::before { display: none; }
.hero__title { font-size: clamp(54px, 16.5vw, 96px); }
.hero__title .line:nth-child(2) { padding-left: .7em; }
.hero__title .line:nth-child(3) { padding-left: .2em; }
.hero__foot { grid-template-columns: 1fr auto; }
.hero__coords { display: none; }
.hero__inner { padding-bottom: 64px; }
.section-head, .manifesto, .plan, .studio, .quote, .pv__body, .pv__gallery { grid-template-columns: 1fr; }
.section-head > *, .manifesto > *, .plan > *, .studio > *, .quote > *, .pv__body > *, .pv__gallery > * { grid-column: 1 / -1 !important; }
.section-head .section-lede { margin-top: 24px; }
.manifesto .eyebrow { padding-top: 0; }
.manifesto__text { text-indent: 1.2em; }
.stats { grid-template-columns: 1fr 1fr; row-gap: 32px; }
.projects__grid { grid-template-columns: 1fr; row-gap: 64px; }
.card:nth-child(n) { grid-column: 1 / -1; margin-top: 0; }
.card:nth-child(even) { width: 86%; justify-self: end; }
.card__meta { grid-template-columns: auto 1fr; }
.card__tags { grid-column: 1 / -1; text-align: left; }
.plan__head { grid-template-columns: 1fr; }
.plan__head > * { grid-column: 1 / -1 !important; }
.plan__head .section-lede { margin-top: 24px; }
.plan__rooms { grid-template-columns: 1fr; order: 2; }
.plan__photo { order: 3; }
.plan__frames { aspect-ratio: 4 / 3; }
.plan__rooms button { font-size: 22px; }
.service { grid-template-columns: 40px 1fr; row-gap: 10px; padding: 26px 0; }
.service__n { grid-column: 1; }
.service h3, .service p, .service__meta { grid-column: 2; text-align: left; margin: 0; }
.process__steps { grid-template-columns: 1fr; row-gap: 40px; }
.swatches { grid-template-columns: 1fr 1fr; gap: 16px; }
.swatch:nth-child(n) { margin-top: 0; }
.swatch:nth-child(even) { transform: translateY(40px); }
.swatch.reveal:nth-child(even):not(.is-in) { transform: translateY(80px); }
.swatches { padding-bottom: 40px; }
.studio__img { width: 100%; }
.member { grid-template-columns: 60px 1fr; gap: 18px; }
.member__mono { width: 60px; height: 60px; font-size: 22px; }
.form__row { grid-template-columns: 1fr; gap: 0; }
.confirm__sheet { grid-template-columns: 1fr; }
.footer__cols { grid-template-columns: 1fr 1fr; row-gap: 32px; }
.footer { padding-bottom: 110px; }
.demo-tag { right: 14px; text-align: center; font-size: 10.5px; }
.pv__gallery .g-wide, .pv__gallery .g-l, .pv__gallery .g-r, .pv__gallery .g-c { aspect-ratio: 4 / 3; }
.pv__close { top: 14px; }
}
/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; transition-delay: 0s !important; scroll-behavior: auto !important; }
.intro { display: none; }
.hero__media, body.is-ready .hero__media { clip-path: none; }
.hero__media img { transform: none !important; height: 100%; }
.hero__shade, .hero__kicker, .hero__foot, .nav, .demo-tag { opacity: 1; }
.hero__title .line > span { transform: none; }
.reveal, .card__media, .reveal-img { opacity: 1; transform: none; clip-path: none; }
.card__media img { transform: none !important; }
.manifesto__text .w { opacity: 1; }
.draw path, .draw rect, .draw circle, .draw ellipse { stroke-dashoffset: 0; }
.dim-text, .labels, .north { opacity: 1; }
.hatch { opacity: .6; }
.pv__title span > span { transform: none; }
}