/* ─── TYPEFACES, SERVED FROM THIS SITE (29 Sep 2026) ───
Playfair Display and DM Sans, downloaded once from Google Fonts into
fonts/ so a visitor's browser never contacts Google to draw the text —
which is why the site needs no cookie or consent banner. Each file is a
variable font covering the weights listed; the unicode-range means a
browser only fetches the Romanian (latin-ext) or Russian (cyrillic)
file when the page actually contains those letters. DM Sans has no
Cyrillic, as on Google; Russian body text uses the system sans. */
/* DM Sans, normal, latin-ext */
@font-face {
font-family: 'DM Sans';
font-style: normal;
font-weight: 300 500;
font-display: swap;
src: url(fonts/dm-sans-normal-latin-ext.woff2) format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* DM Sans, normal, latin */
@font-face {
font-family: 'DM Sans';
font-style: normal;
font-weight: 300 500;
font-display: swap;
src: url(fonts/dm-sans-normal-latin.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Playfair Display, italic, cyrillic */
@font-face {
font-family: 'Playfair Display';
font-style: italic;
font-weight: 400 600;
font-display: swap;
src: url(fonts/playfair-display-italic-cyrillic.woff2) format('woff2');
unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* Playfair Display, italic, latin-ext */
@font-face {
font-family: 'Playfair Display';
font-style: italic;
font-weight: 400 600;
font-display: swap;
src: url(fonts/playfair-display-italic-latin-ext.woff2) format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Playfair Display, italic, latin */
@font-face {
font-family: 'Playfair Display';
font-style: italic;
font-weight: 400 600;
font-display: swap;
src: url(fonts/playfair-display-italic-latin.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Playfair Display, normal, cyrillic */
@font-face {
font-family: 'Playfair Display';
font-style: normal;
font-weight: 400 600;
font-display: swap;
src: url(fonts/playfair-display-normal-cyrillic.woff2) format('woff2');
unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* Playfair Display, normal, latin-ext */
@font-face {
font-family: 'Playfair Display';
font-style: normal;
font-weight: 400 600;
font-display: swap;
src: url(fonts/playfair-display-normal-latin-ext.woff2) format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Playfair Display, normal, latin */
@font-face {
font-family: 'Playfair Display';
font-style: normal;
font-weight: 400 600;
font-display: swap;
src: url(fonts/playfair-display-normal-latin.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* ─── CSS VARIABLES ─── */
:root {
/* Warm palette — dark green, shades of beige, gold.
The beiges are sampled from the project's own photography: the warm
neutrals in those rooms cluster at #D8CCC0 / #CCC0B4 / #C0B4A8, and the
grounds below are that same hue family extrapolated lighter. The cool
mint and blue-white this replaced were fighting the imagery. */
--bg: #F5F1E8; /* warm ivory ground, and light text on dark */
--bg-alt: #EFE8DB; /* second beige, for alternating bands */
--bg-light: #FAF7F0;
--forest-grade: #1D3328; /* deep forest green around graded photographs (.img-grade) */ /* lighter ivory — the Services hero, stage strip and questions */
--sand: #D9CDC0; /* mid beige, straight from the photographs */
--green: #2D5A3D; /* the dark green */
--green-deep: #1D3025; /* deep forest green — dark bands */
--green-light: #4A7C5F;
--green-pale: #EFE8DB; /* was mint; now the beige, so strips read warm */
--gold: #B39A58; /* muted antique gold — fine dividers, and figures on dark (5.1:1) */
--gold-ink: #806419; /* small gold text on light grounds — 5.06:1 on cream */
--gold-display: #9A7B23;/* gold display type on light grounds — 3.63:1, AA-large */
--dark: #1D3025; /* deep forest green — headings and dark sections */
--text: #221E18; /* warm near-black */
--muted: #6B6156; /* warm taupe */
--border: rgba(90, 78, 62, 0.22);
}
/* ─── RESET ─── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
::selection { background: var(--green); color: #fff; }
::-moz-selection { background: var(--green); color: #fff; }
body {
font-family: 'DM Sans', sans-serif;
background: var(--bg);
color: var(--text);
overflow-x: hidden;
}
/* Slight desaturation + contrast lift pulls the mixed photo sources onto one
consistent, muted palette that sits with the brand greens. */
img { display: block; width: 100%; height: 100%; object-fit: cover; filter: saturate(0.95) contrast(1.02); }
@media (hover: hover) {
.gallery-item img, .collection-card img{
transition: transform 1.1s cubic-bezier(0.16, 1, 0.3, 1), filter 0.6s ease;
}
/* filter replaces (never merges with) the base rule, so the grade is
restated here — otherwise hover would snap the image back to full saturation. */
.gallery-item:hover img { filter: saturate(1.03) contrast(1.02) brightness(1.06); }
}
a { text-decoration: none; color: inherit; }
button { font-family: 'DM Sans', sans-serif; cursor: pointer; border: none; background: none; }
/* ─── PRELOADER ─── */
#preloader {
position: fixed;
inset: 0;
background: var(--dark);
z-index: 9990;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 24px;
transition: opacity 0.8s ease, visibility 0.8s ease;
}
#preloader.hidden {
opacity: 0;
visibility: hidden;
pointer-events: none;
}
.preloader-logo {
width: 180px;
opacity: 0;
transform: translateY(16px);
animation: preloaderLogoIn 0.9s 0.3s cubic-bezier(0.16,1,0.3,1) forwards;
filter: brightness(0) invert(1);
}
.preloader-line {
width: 0;
height: 1px;
background: var(--gold);
animation: preloaderLineIn 1.2s 0.6s ease forwards;
}
.preloader-text {
font-family: 'DM Sans', sans-serif;
font-size: 10px;
letter-spacing: 5px;
text-transform: uppercase;
color: rgba(255,255,255,0.3);
opacity: 0;
animation: preloaderLogoIn 0.9s 1.0s ease forwards;
}
@keyframes preloaderLogoIn {
to { opacity: 1; transform: translateY(0); }
}
@keyframes preloaderLineIn {
to { width: 120px; }
}
/* ─── NAVIGATION ─── */
body > nav {
position: fixed;
top: 16px; left: 24px; right: 24px;
z-index: 1000;
display: flex;
align-items: center;
justify-content: space-between;
padding: 14px 28px;
border-radius: 6px;
background: rgba(245,241,232, 0.92);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
border: 1px solid rgba(255,255,255,0.09);
transition: background 0.5s ease, border-color 0.5s ease, box-shadow 0.5s ease, padding 0.4s ease, top 0.4s ease;
}
body > nav.hero-mode .nav-logo-text { color: #fff; }
body > nav.hero-mode .nav-links > li > a { color: rgba(255,255,255,0.8); }
body > nav.hero-mode .lang-switcher a { color: rgba(255,255,255,0.55); }
body > nav.hero-mode .lang-divider { background: rgba(255,255,255,0.2); }
body > nav.hero-mode .hamburger span { background: #fff; }
body > nav.hero-mode .btn-primary { background: transparent; border: 1px solid rgba(255,255,255,0.45); color: #fff; }
body > nav.hero-mode .btn-primary:hover { background: var(--green); border-color: var(--green); }
body > nav.scrolled {
top: 10px;
background: rgba(245,241,232, 0.97);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
border-color: rgba(45, 90, 61,0.14);
box-shadow: 0 8px 40px rgba(22,29,24,0.12), 0 2px 8px rgba(22,29,24,0.06);
padding: 10px 28px;
}
.nav-logo { display: flex; align-items: center; gap: 14px; }
.nav-logo a {
display: flex;
align-items: center;
flex-shrink: 0;
transition: transform 0.3s cubic-bezier(0.16,1,0.3,1), opacity 0.3s;
}
.nav-logo a:hover { transform: scale(1.04); opacity: 0.85; }
.nav-logo-img {
height: 40px;
width: auto !important;
max-width: none !important;
object-fit: contain !important;
display: block;
transition: filter 0.4s ease;
flex-shrink: 0;
}
.preloader-logo {
width: 180px !important;
height: auto !important;
object-fit: contain !important;
}
body > nav.hero-mode .nav-logo-img {
filter: brightness(0) invert(1);
}
body > nav.scrolled .nav-logo-img {
filter: none;
}
.nav-logo-sep {
width: 1px; height: 28px;
background: var(--border);
opacity: 0.6;
}
body > nav.hero-mode .nav-logo-sep { background: rgba(255,255,255,0.2); }
.nav-logo-text-wrap { display: flex; flex-direction: column; }
.nav-logo-text {
font-family: 'Playfair Display', serif;
font-size: 16px;
letter-spacing: 5px;
font-weight: 400;
color: var(--dark);
transition: color 0.4s;
}
.nav-logo-sub {
font-family: 'DM Sans', sans-serif;
font-size: 9px;
color: var(--muted);
letter-spacing: 1.5px;
margin-top: 2px;
transition: color 0.4s;
text-transform: uppercase;
}
/* Raised from 0.4: over a photograph, and at the smaller size the phone
bar uses, the founding line was too faint to read. Still subordinate
to the wordmark above it, which stays solid white. */
body > nav.hero-mode .nav-logo-sub { color: rgba(255,255,255,0.75); }
.nav-links {
display: flex;
gap: 40px;
list-style: none;
}
.nav-links a {
font-family: 'DM Sans', sans-serif;
font-size: 12px;
letter-spacing: 1px;
color: var(--dark);
transition: color 0.3s;
position: relative;
text-transform: uppercase;
}
.nav-links a::after {
content: '';
position: absolute;
bottom: -3px; left: 50%;
width: 0; height: 1px;
background: var(--green);
transition: width 0.3s cubic-bezier(0.16,1,0.3,1), left 0.3s cubic-bezier(0.16,1,0.3,1);
}
body > nav.hero-mode .nav-links > li > a::after { background: rgba(255,255,255,0.6); }
.nav-links a:hover { color: var(--green); }
body > nav.hero-mode .nav-links > li > a:hover { color: #fff; }
.nav-links a:hover::after { width: 100%; left: 0; }
.nav-right {
display: flex;
align-items: center;
gap: 24px;
}
.lang-switcher {
display: flex;
align-items: center;
gap: 8px;
font-size: 11px;
color: var(--muted);
}
.lang-switcher a {
font-size: 11px;
letter-spacing: 1px;
color: var(--muted);
transition: color 0.3s;
}
.lang-switcher a:hover { color: var(--green); }
.lang-divider {
width: 1px; height: 12px;
background: var(--border);
transition: background 0.4s;
}
.btn-primary {
font-family: 'DM Sans', sans-serif;
font-size: 12px;
letter-spacing: 2px;
text-transform: uppercase;
background: var(--green);
color: #fff;
padding: 12px 24px;
border-radius: 0;
position: relative;
overflow: hidden;
transition: transform 0.25s cubic-bezier(0.16,1,0.3,1), box-shadow 0.3s;
display: inline-block;
text-align: center;
}
.btn-primary:hover {
transform: translateY(-2px);
box-shadow: 0 8px 24px rgba(45, 90, 61,0.3);
}
.btn-primary::before {
content: '';
position: absolute;
top: 0; left: -80%;
width: 55%;
height: 100%;
background: linear-gradient(120deg, transparent 20%, rgba(255,255,255,0.13) 50%, transparent 80%);
transform: skewX(-20deg);
transition: left 0.5s ease;
z-index: 2;
pointer-events: none;
}
.btn-primary:hover::before { left: 160%; }
.btn-primary::after {
content: '';
position: absolute;
inset: 0;
background: var(--green-light);
transform: translateX(-101%);
transition: transform 0.45s ease;
z-index: 1;
}
.btn-primary:hover::after { transform: translateX(0); }
.btn-primary span { position: relative; z-index: 3; }
.btn-outline {
font-family: 'DM Sans', sans-serif;
font-size: 12px;
letter-spacing: 2px;
text-transform: uppercase;
background: transparent;
color: var(--green);
border: 1px solid var(--green);
padding: 12px 24px;
border-radius: 0;
transition: background 0.3s, transform 0.25s cubic-bezier(0.16,1,0.3,1), box-shadow 0.3s;
display: inline-block;
text-align: center;
}
.btn-outline:hover {
background: var(--green-pale);
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(45, 90, 61,0.15);
}
.btn-outline-white {
font-family: 'DM Sans', sans-serif;
font-size: 12px;
letter-spacing: 2px;
text-transform: uppercase;
background: transparent;
color: #fff;
border: 1px solid #fff;
padding: 12px 24px;
border-radius: 0;
transition: background 0.3s, color 0.3s;
display: inline-block;
text-align: center;
}
.btn-outline-white {
transition: background 0.3s, color 0.3s, transform 0.25s cubic-bezier(0.16,1,0.3,1), box-shadow 0.3s;
}
.btn-outline-white:hover {
background: var(--green);
border-color: var(--green);
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(22,29,24,0.25);
}
/* Hamburger */
.hamburger {
display: none;
flex-direction: column;
gap: 5px;
cursor: pointer;
padding: 4px;
background: none;
border: none;
z-index: 1100;
transition: opacity 0.2s, transform 0.25s cubic-bezier(0.16,1,0.3,1);
}
.hamburger:hover { opacity: 0.7; transform: scale(1.1); }
.hamburger span {
display: block;
width: 24px; height: 1.5px;
background: var(--dark);
transition: all 0.3s;
}
.hamburger.open span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.hamburger.open span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.hamburger.open span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }
.hamburger.open span { background: #fff; }
/* Mobile overlay */
.mobile-menu {
position: fixed;
inset: 0;
background: var(--dark);
z-index: 1050;
display: flex;
align-items: center;
justify-content: center;
transform: translateX(100%);
transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}
.mobile-menu.open { transform: translateX(0); }
.mobile-menu-links {
list-style: none;
text-align: center;
}
.mobile-menu-links li { margin-bottom: 24px; }
.mobile-menu-links a {
font-family: 'Playfair Display', serif;
font-size: 36px;
color: #fff;
opacity: 0.8;
transition: opacity 0.3s;
}
.mobile-menu-links a:hover { opacity: 1; }
.mobile-menu-cta {
margin-top: 40px;
text-align: center;
}
/* ─── HERO · one static frame ───────────────────────────────────────
Was a 240svh section over a sticky 100svh stage, scrubbing an empty
room -> sofa reveal -> dissolve into the finished room. That sequence
is gone. What is left is the frame it landed on: the finished room, a
legibility veil, and the copy — all painted at their final values from
the first frame, with no JS involved. */
.creator-cinematic-hero {
position: relative;
height: 100svh;
background: #171411;
}
.creator-scroll-stage {
position: relative;
height: 100%;
overflow: clip;
background: #171411;
}
/* The global `img { transition: opacity .5s }` (there for the lazy-load fade)
has no business on a plate that is opaque from first paint. */
.creator-cinematic-hero .creator-complete-room,
.creator-room-veil { transition: none !important; }
.creator-cinematic-hero .creator-complete-room {
position: absolute;
inset: 0;
z-index: 1;
width: 100%;
height: 100%;
object-fit: cover;
object-position: 50% 62%;
filter: none; /* opt out of the global img grade */
user-select: none;
-webkit-user-drag: none;
}
/* Sits over the room to keep the copy legible. 0.86, not 1: that is the value
the scrub used to settle on (0.24 + 0.62), and it is what the finished hero
has always actually looked like. */
.creator-room-veil {
position: absolute; inset: 0; z-index: 2;
pointer-events: none;
opacity: 0.86;
background:
linear-gradient(to top, rgba(20,16,12,0.72) 0%, rgba(20,16,12,0.10) 46%, rgba(20,16,12,0.34) 100%);
}
/* ── copy ── */
.creator-hero-copy {
position: absolute; inset: 0; z-index: 6;
display: flex; flex-direction: column;
align-items: center; justify-content: center;
text-align: center;
padding: 0 32px 40px;
}
.creator-hero-copy::before {
content: '';
position: absolute; inset: 0;
pointer-events: none;
background: radial-gradient(ellipse 70% 54% at 50% 50%,
rgba(19,16,13,0.46) 0%, rgba(19,16,13,0.20) 48%, rgba(19,16,13,0) 78%);
}
.creator-hero-copy > * { position: relative; }
.creator-brand {
font-family: 'DM Sans', sans-serif;
font-size: 11px; letter-spacing: 0.26em; text-transform: uppercase;
color: rgba(244, 239, 230, 0.72);
margin: 0 0 22px;
opacity: 0; /* the scrub faded this out by 0.28 and never brought
it back; kept in the DOM so the block's vertical
rhythm is unchanged. */
}
.creator-eyebrow {
font-family: 'DM Sans', sans-serif;
font-size: clamp(0.7rem, 0.85vw, 0.88rem);
letter-spacing: 0.16em; text-transform: uppercase;
color: rgba(244, 239, 230, 0.84);
margin: 0 0 20px;
}
.creator-heading {
font-family: 'Playfair Display', serif;
font-size: clamp(3rem, 7.2vw, 8.5rem);
line-height: 0.88;
letter-spacing: -0.045em;
font-weight: 400;
color: #F4EFE6;
margin: 0;
display: flex; flex-direction: column; align-items: center;
text-shadow: 0 2px 30px rgba(16,12,9,0.34);
}
.creator-line { display: block; }
.creator-line--space,
.creator-line--signature { display: block; }
.creator-line--signature em { font-style: italic; color: var(--gold); }
.creator-introduction {
font-family: 'DM Sans', sans-serif;
font-size: clamp(1rem, 1.3vw, 1.25rem);
line-height: 1.45;
color: rgba(244, 239, 230, 0.88);
max-width: 33ch;
margin: 26px 0 0;
}
.creator-actions {
display: flex; flex-wrap: wrap; gap: 14px; justify-content: center;
margin-top: 34px;
}
.creator-action {
font-family: 'DM Sans', sans-serif;
font-size: 10px; font-weight: 500;
letter-spacing: 3px; text-transform: uppercase;
padding: 16px 34px;
min-height: 44px;
display: inline-flex; align-items: center; justify-content: center;
border: 1px solid transparent;
transition: transform 0.35s cubic-bezier(0.16,1,0.3,1),
background-color 0.35s ease, border-color 0.35s ease;
}
.creator-action--primary { background: #F4EFE6; color: #30251D; }
.creator-action--secondary { background: transparent; color: #F4EFE6; border-color: rgba(244,239,230,0.35); }
.creator-action:hover { transform: translateY(-2px); }
.creator-action--secondary:hover {
border-color: rgba(244,239,230,0.75);
background: rgba(244,239,230,0.08);
}
.creator-action:focus-visible { outline: 2px solid #F4EFE6; outline-offset: 3px; }
@media (min-width: 769px) and (max-width: 1024px) {
/* Half the width is visible here — less severe than a phone, but the
sofa still deserves the middle of the frame. */
.creator-cinematic-hero .creator-complete-room { object-position: 38% 60%; }
}
/* ── mobile ── */
@media (max-width: 768px) {
/* A phone shows barely a third of this photograph's width, and the
middle third of it is the coffee table, the vase and the slatted
column. The sofa sits left of centre, so the crop moves to it. */
.creator-cinematic-hero .creator-complete-room { object-position: 26% 60%; }
.creator-hero-copy { padding: 0 22px 32px; }
.creator-hero-copy::before {
background: radial-gradient(ellipse 96% 52% at 50% 50%,
rgba(19,16,13,0.62) 0%, rgba(19,16,13,0.34) 52%, rgba(19,16,13,0) 82%);
}
.creator-brand { margin-bottom: 16px; }
.creator-actions { flex-direction: column; width: 100%; max-width: 320px; }
.creator-action { width: 100%; }
}
/* ── reduced motion ── the hero is a static frame for everyone now, so the
button hover lift is all that is left to suppress here. ── */
@media (prefers-reduced-motion: reduce) {
.creator-action:hover { transform: none; }
}
@keyframes fadeUp {
to { opacity: 1; transform: translateY(0); }
}
/* ─── MARQUEE ─── */
.features-bar {
background: var(--dark);
padding: 20px 48px;
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
gap: 0;
border-top: 1px solid rgba(255,255,255,0.04);
border-bottom: 1px solid rgba(255,255,255,0.04);
}
.features-bar .feat {
font-family: 'DM Sans', sans-serif;
font-size: 10px;
letter-spacing: 3px;
text-transform: uppercase;
color: rgba(255,255,255,0.42);
padding: 4px 20px;
white-space: nowrap;
}
.features-bar .feat-dot {
color: var(--gold);
opacity: 0.45;
font-size: 12px;
flex-shrink: 0;
}
/* ─── STATS ─── */
.stats-section {
background: var(--green-pale);
padding: 60px 48px;
}
.stats-grid {
display: flex;
align-items: stretch;
max-width: 1200px;
margin: 0 auto;
}
.stat-item {
flex: 1;
text-align: center;
padding: 20px 30px;
position: relative;
}
.stat-item:not(:last-child)::after {
content: '';
position: absolute;
right: 0; top: 50%; bottom: 50%;
width: 1px;
background: var(--green);
opacity: 0;
transition: top 0.6s 0.4s cubic-bezier(0.16,1,0.3,1),
bottom 0.6s 0.4s cubic-bezier(0.16,1,0.3,1),
opacity 0.4s 0.4s ease;
}
.stat-item.revealed:not(:last-child)::after {
top: 10%; bottom: 10%; opacity: 0.25;
}
.stat-number {
font-family: 'Playfair Display', serif;
font-size: 52px;
font-weight: 400;
color: var(--green);
line-height: 1;
display: block;
}
.stat-number.gold { color: var(--gold-ink); }
@keyframes numPop {
from { opacity: 0; transform: scale(0.9) translateY(10px); }
to { opacity: 1; transform: scale(1) translateY(0); }
}
.stat-item.revealed .stat-number {
animation: numPop 0.9s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.stat-item.revealed:nth-child(2) .stat-number { animation-delay: 0.08s; }
.stat-item.revealed:nth-child(3) .stat-number { animation-delay: 0.16s; }
.stat-item.revealed:nth-child(4) .stat-number { animation-delay: 0.24s; }
.stat-label {
font-family: 'DM Sans', sans-serif;
font-size: 13px;
color: var(--muted);
letter-spacing: 1px;
margin-top: 10px;
display: block;
}
/* ─── SECTION COMMON ─── */
.section-tag {
font-family: 'DM Sans', sans-serif;
font-size: 11px;
letter-spacing: 3px;
text-transform: uppercase;
color: var(--green);
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 16px;
}
.section-tag::before {
content: '';
display: inline-block;
width: 0;
height: 1px;
background: var(--gold);
flex-shrink: 0;
opacity: 0.75;
transition: width 0.55s 0.25s cubic-bezier(0.16,1,0.3,1);
}
.reveal.revealed .section-tag::before,
.reveal-left.revealed .section-tag::before,
.reveal-right.revealed .section-tag::before { width: 24px; }
/* Section tags on dark backgrounds — the default --green fails WCAG contrast
(~2:1) against --dark. Lift to white at 45% for all dark sections. */
.export-section .section-tag,
.clients-header .section-tag { color: rgba(255,255,255,0.6); }
.section-title {
font-family: 'Playfair Display', serif;
font-size: clamp(34px, 4vw, 54px);
font-weight: 400;
line-height: 1.15;
color: var(--dark);
}
.section-title.white { color: #fff; }
.section-header {
margin-bottom: 60px;
}
/* ─── COLLECTIONS ─── */
.collections-section {
background: var(--bg);
padding: 100px 0 0;
}
.collections-header {
padding: 0 80px;
margin-bottom: 48px;
}
.collections-grid {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 3px;
}
/* Bento layout — desktop */
.collection-card:nth-child(1) { grid-column: 1 / 3; aspect-ratio: 2 / 1; }
.collection-card:nth-child(2) { grid-column: 3; grid-row: 1 / 3; aspect-ratio: unset; }
.collection-card:nth-child(3) { grid-column: 1; grid-row: 2; }
.collection-card:nth-child(4) { grid-column: 2; grid-row: 2; }
.collection-card {
aspect-ratio: 1/1;
position: relative;
overflow: hidden;
cursor: pointer;
transition: transform 0.35s cubic-bezier(0.16,1,0.3,1),
box-shadow 0.35s ease;
}
.collection-card:hover {
transform: translateY(-4px) scale(1.005);
box-shadow: 0 20px 48px rgba(22,29,24,0.22);
z-index: 1;
}
.collection-card img {
transition: transform 0.7s ease;
}
.collection-card:hover img { transform: scale(1.05); }
.collection-overlay {
position: absolute;
inset: 0;
background: rgba(22, 29, 24, 0);
transition: background 0.4s ease, box-shadow 0.4s ease;
}
.collection-card:hover .collection-overlay {
background: rgba(22, 29, 24, 0.65);
box-shadow: inset 0 0 0 3px var(--green);
}
.collection-info {
position: absolute;
bottom: 28px;
left: 28px;
z-index: 2;
}
.collection-name {
font-family: 'Playfair Display', serif;
font-size: 22px;
color: #fff;
text-shadow: 0 2px 12px rgba(0,0,0,0.4);
}
.collection-discover {
display: block;
font-family: 'DM Sans', sans-serif;
font-size: 13px;
letter-spacing: 2px;
text-transform: uppercase;
color: #fff;
margin-top: 8px;
opacity: 0;
transform: translateY(10px);
transition: opacity 0.4s 0.1s ease, transform 0.4s 0.1s ease;
}
.collection-card:hover .collection-discover {
opacity: 1;
transform: translateY(0);
}
/* ─── PROCESS ─── */
.process-section {
background: var(--bg);
padding: 64px 80px 100px;
}
.process-steps {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 0;
margin-top: 60px;
}
.process-step {
padding: 40px 32px;
position: relative;
transition: background 0.3s ease;
border-radius: 2px;
}
.process-step:hover {
background: rgba(45, 90, 61,0.04);
}
.process-step:not(:last-child)::after {
content: '';
position: absolute;
top: 60px; right: 0;
width: 1px; height: 2px;
background: var(--green);
}
.process-step:not(:last-child)::before {
content: '';
position: absolute;
top: 59px; right: 0;
width: 50%;
height: 1px;
background: rgba(45, 90, 61,0.3);
transform: scaleX(0);
transform-origin: left center;
transition: transform 0.7s 0.3s cubic-bezier(0.16,1,0.3,1);
}
.process-step.revealed:not(:last-child)::before {
transform: scaleX(1);
}
.process-bg-number {
font-family: 'Playfair Display', serif;
font-size: 120px;
color: rgba(45, 90, 61,0.06);
position: absolute;
top: 0; left: 24px;
line-height: 1;
user-select: none;
transition: color 0.6s ease;
}
.process-step:hover .process-bg-number {
color: rgba(45, 90, 61,0.12);
}
.process-step-label {
font-family: 'DM Sans', sans-serif;
font-size: 11px;
letter-spacing: 3px;
text-transform: uppercase;
color: var(--green);
position: relative;
z-index: 1;
margin-bottom: 12px;
}
.process-step-title {
font-family: 'Playfair Display', serif;
font-size: 22px;
color: var(--dark);
margin-bottom: 16px;
position: relative;
z-index: 1;
}
.process-step-desc {
font-family: 'DM Sans', sans-serif;
font-size: 14px;
color: var(--muted);
line-height: 1.8;
position: relative;
z-index: 1;
}
/* ─── GALLERY ─── */
.gallery-section {
background: var(--bg);
/* Ends on a centred button that already carries 52px above it, and the
section below shares this same cream ground — so the bottom padding is
the shorter half of a 128px join, not a full section of space. */
padding: 100px 80px 64px;
}
/* Columns are built in JS rather than by CSS multi-column, which
rebalances every item it holds: revealing the held-back half used to
shuffle the projects already on the page, and new tiles could never
settle into the ragged gaps the balanced columns leave behind. Explicit
columns append to their own bottoms, so nothing above ever moves and the
gaps are exactly where the next photographs land. --cols is the single
place the count is set; the script reads it back at each breakpoint. */
.gallery-grid {
--cols: 3;
display: flex;
align-items: flex-start;
gap: 4px;
margin-top: 60px;
overflow: hidden; /* masks the height animation */
}
.gallery-col {
flex: 1 1 0;
min-width: 0;
display: flex;
flex-direction: column;
gap: 4px;
}
.gallery-item {
position: relative;
overflow: hidden;
cursor: zoom-in;
}
.gallery-item img {
width: 100%;
height: auto;
display: block;
transition: transform 0.5s ease;
}
.gallery-item:hover img { transform: scale(1.04); }
.gallery-overlay {
position: absolute;
inset: 0;
background: rgba(22,29,24,0);
display: flex;
align-items: center;
justify-content: center;
transition: background 0.4s;
}
.gallery-item:hover .gallery-overlay { background: rgba(22,29,24,0.72); }
.gallery-label {
font-family: 'Playfair Display', serif;
font-style: italic;
font-size: 18px;
color: #fff;
opacity: 0;
transition: opacity 0.4s;
text-align: center;
padding: 16px;
}
.gallery-item:hover .gallery-label { opacity: 1; }
.gallery-cta {
text-align: center;
margin-top: 48px;
}
/* ─── CLIENTS ─── */
.clients-section {
background: var(--dark);
padding: 100px 0 80px;
overflow: hidden;
}
.clients-header {
padding: 0 80px;
margin-bottom: 20px;
}
.clients-intro {
font-family: 'DM Sans', sans-serif;
font-size: 15px;
line-height: 1.8;
color: rgba(255,255,255,0.45);
max-width: 600px;
margin-top: 20px;
}
.clients-meta {
display: flex;
align-items: center;
gap: 48px;
padding: 40px 80px;
border-top: 1px solid rgba(255,255,255,0.06);
border-bottom: 1px solid rgba(255,255,255,0.06);
margin: 40px 0;
}
.clients-stat {
display: flex;
flex-direction: column;
gap: 4px;
}
.clients-stat-number {
font-family: 'Playfair Display', serif;
font-size: 48px;
font-weight: 400;
color: var(--gold);
line-height: 1;
}
.clients-stat-label {
font-family: 'DM Sans', sans-serif;
font-size: 11px;
letter-spacing: 2px;
text-transform: uppercase;
color: rgba(255,255,255,0.3);
}
.clients-meta-sep {
width: 1px;
height: 48px;
background: rgba(255,255,255,0.1);
}
.clients-meta-text {
font-family: 'Playfair Display', serif;
font-style: italic;
font-size: 16px;
color: rgba(255,255,255,0.35);
max-width: 420px;
line-height: 1.7;
}
/* scrolling name rows */
/* The two scrolling client strips were removed on 21 Sep 2026: they
listed the same twelve organisations twice each, and every name was
already in the static sector grid below them. */
to { transform: translateX(0); }
}
.client-name {
font-family: 'DM Sans', sans-serif;
font-size: 13px;
letter-spacing: 2px;
text-transform: uppercase;
color: rgba(255,255,255,0.28);
padding: 0 32px;
transition: color 0.3s;
cursor: default;
white-space: nowrap;
}
.client-name:hover { color: rgba(255,255,255,0.75); }
.client-sep {
color: var(--green);
opacity: 0.5;
padding: 0 4px;
font-size: 11px;
line-height: 1;
align-self: center;
}
/* sectors grid */
.clients-sectors {
/* Columns rather than a grid: seven sectors into three tracks leaves a
ragged last row in a grid, and each cell stretches to the tallest in
its row. Flowed columns take their natural height and balance
themselves, so nothing is padded out and no empty tile is left. */
columns: 3; column-gap: 56px;
max-width: 1400px; margin: 0 auto; padding: 0 80px;
}
.clients-sector { break-inside: avoid; }
.clients-sector {
padding: 26px 0 28px;
border-top: 1px solid rgba(255,255,255,0.12);
/* No hover state: these are not links and must not behave like them. */
}
.clients-sector-name {
font-family: 'DM Sans', sans-serif;
font-size: 11px;
letter-spacing: 2px;
text-transform: uppercase;
/* gold, not green: --green on --dark measures ~2:1, below the 4.5:1 WCAG
minimum for small text. Gold clears it. */
color: var(--gold);
margin-bottom: 12px;
display: block;
}
.clients-sector-list {
font-family: 'DM Sans', sans-serif;
/* Ivory at full strength. These were 12px at 0.35 opacity — about 2.5:1,
which meant reading the client list depended on good light and good
eyes. */
font-size: 16px;
line-height: 1.6;
color: var(--bg);
}
/* ─── EXPORT ─── */
.export-section {
background: var(--dark);
padding: 100px 80px;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 80px;
align-items: center;
}
.export-body {
font-size: 15px;
line-height: 1.85;
color: rgba(255,255,255,0.6);
margin: 24px 0 36px;
}
.export-countries {
list-style: none;
border-top: 1px solid rgba(255,255,255,0.08);
}
.export-countries li {
font-family: 'DM Sans', sans-serif;
font-size: 15px;
color: rgba(255,255,255,0.7);
padding: 12px 20px;
border-bottom: 1px solid rgba(255,255,255,0.08);
transition: background 0.3s, border-left-color 0.3s,
color 0.3s, transform 0.25s cubic-bezier(0.16,1,0.3,1);
border-left: 3px solid transparent;
opacity: 0;
transform: translateX(-16px);
}
.reveal.revealed .export-countries li { opacity: 1; transform: translateX(0); }
.export-countries li:nth-child(1) { transition-delay: 0.05s; }
.export-countries li:nth-child(2) { transition-delay: 0.10s; }
.export-countries li:nth-child(3) { transition-delay: 0.15s; }
.export-countries li:nth-child(4) { transition-delay: 0.20s; }
.export-countries li:nth-child(5) { transition-delay: 0.25s; }
.export-countries li:nth-child(6) { transition-delay: 0.30s; }
.export-countries li:nth-child(7) { transition-delay: 0.35s; }
.export-countries li:hover {
background: rgba(45, 90, 61,0.18);
border-left-color: var(--green);
color: #fff;
transform: translateX(6px);
}
/* ─── TESTIMONIALS — EDITORIAL ─── */
.testimonials-section {
background: var(--dark);
padding: 100px 80px;
position: relative;
overflow: hidden;
}
.testimonials-section::before {
content: '';
position: absolute;
top: 0; left: 0; right: 0;
height: 1px;
background: linear-gradient(90deg, transparent, rgba(179,154,88,0.35), transparent);
}
.testi-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 72px;
}
.testi-header .section-tag { color: rgba(255,255,255,0.58); }
.testi-header .section-tag::before { background: rgba(179,154,88,0.6); opacity: 1; }
.testi-count {
font-family: 'DM Sans', sans-serif;
font-size: 11px;
letter-spacing: 3px;
color: rgba(255,255,255,0.4);
text-transform: uppercase;
}
.testi-rating {
display: flex;
align-items: center;
gap: 8px;
}
.testi-rating-stars {
display: flex;
gap: 2px;
color: var(--gold);
}
.testi-rating-stars svg { width: 13px; height: 13px; }
.testi-rating-text {
font-family: 'DM Sans', sans-serif;
font-size: 11px;
letter-spacing: 1px;
color: rgba(255,255,255,0.45);
}
.testi-rating-text strong { color: rgba(255,255,255,0.75); font-weight: 500; }
.testi-body {
display: grid;
grid-template-columns: 120px 1fr;
gap: 60px;
align-items: start;
min-height: 220px;
}
.testi-index {
font-family: 'Playfair Display', serif;
font-size: clamp(80px, 9vw, 120px);
line-height: 0.85;
color: var(--gold);
opacity: 0.85;
letter-spacing: -4px;
user-select: none;
padding-top: 6px;
}
@keyframes numFlip {
0% { opacity: 0.85; transform: translateY(0); }
30% { opacity: 0; transform: translateY(-16px); }
60% { opacity: 0; transform: translateY(16px); }
100% { opacity: 0.85; transform: translateY(0); }
}
.testi-index.flipping { animation: numFlip 0.4s cubic-bezier(0.16,1,0.3,1) forwards; }
/* ── ONE REVIEW AT A TIME ─────────────────────────────────────────────
The slides used to cross-fade over each other, both moving at once, so
for half a second two quotes of different lengths sat one on top of the
other. It reads as a smudge rather than a change. Now the outgoing
review leaves first — lifting slightly, briskly — and only once it has
gone does the next one rise and wipe in. Never two at once. The panel's
own height carries between them, so a short review following a long one
closes the space instead of dropping it. */
.testi-content {
position: relative;
min-height: 270px;
transition: height .72s cubic-bezier(.22,1,.36,1);
}
.testi-slide {
position: absolute;
top: 0; left: 0; right: 0;
opacity: 0;
visibility: hidden;
transform: translateY(16px);
pointer-events: none;
transition: opacity .6s cubic-bezier(.22,1,.36,1),
transform .8s cubic-bezier(.22,1,.36,1),
visibility 0s linear .6s;
}
.testi-slide.active {
opacity: 1;
visibility: visible;
transform: none;
pointer-events: auto;
transition: opacity .7s .1s cubic-bezier(.22,1,.36,1),
transform .9s .1s cubic-bezier(.22,1,.36,1),
visibility 0s;
}
/* Leaving is a shorter, firmer movement — upward, out of the way. */
.testi-slide.is-leaving {
visibility: visible;
opacity: 0;
transform: translateY(-14px);
transition: opacity .32s cubic-bezier(.4,0,1,1),
transform .36s cubic-bezier(.4,0,1,1),
visibility 0s linear .36s;
}
.testi-quote {
font-family: 'Playfair Display', serif;
font-style: italic;
font-size: clamp(19px, 2.2vw, 29px);
line-height: 1.6;
color: rgba(255,255,255,0.88);
max-width: 740px;
}
/* The wipe belongs to the slider and nowhere else. Unscoped, it clipped
away the three quotes standing quietly on the homepage — they have no
.active state to restore them, so that section rendered as three empty
bordered boxes. Same reason the author line is scoped below. */
.testi-slide .testi-quote {
/* clip-reveal: the text wipes in from the bottom edge upward */
clip-path: inset(0 0 100% 0);
transition: clip-path .85s .16s cubic-bezier(.22,1,.36,1);
}
.testi-slide.active .testi-quote { clip-path: inset(0 0 0 0); }
/* On the way out it simply fades — wiping it away as well would be two
gestures fighting over the same half second. */
.testi-slide.is-leaving .testi-quote {
clip-path: inset(0 0 0 0);
transition: none;
}
.testi-slide .testi-author {
opacity: 0;
transform: translateY(8px);
transition: opacity .5s .5s ease, transform .5s .5s cubic-bezier(.22,1,.36,1);
}
.testi-slide.active .testi-author { opacity: 1; transform: none; }
.testi-slide.is-leaving .testi-author { transition: opacity .28s ease; }
@media (prefers-reduced-motion: reduce) {
.testi-content { transition: none; }
.testi-slide, .testi-quote, .testi-author { transition: none !important; }
.testi-slide { transform: none; }
.testi-quote { clip-path: none; }
}
.testi-author {
font-family: 'DM Sans', sans-serif;
font-size: 11px;
letter-spacing: 3px;
text-transform: uppercase;
color: rgba(255,255,255,0.3);
margin-top: 28px;
display: block;
}
.testi-author em {
color: var(--gold);
font-style: normal;
opacity: 0.7;
}
.testi-footer {
display: flex;
align-items: center;
justify-content: space-between;
margin-top: 64px;
padding-top: 32px;
border-top: 1px solid rgba(255,255,255,0.07);
}
.testi-lines {
display: flex;
gap: 6px;
align-items: center;
flex: 1;
}
.testi-line {
flex: 1;
max-width: 72px;
height: 2px;
background: rgba(255,255,255,0.22);
cursor: pointer;
border: none;
padding: 6px 0;
background-clip: content-box;
position: relative;
overflow: hidden;
transition: background 0.3s;
}
.testi-line::after {
content: '';
position: absolute;
top: 50%; left: 0;
height: 2px;
width: 100%;
transform: translateY(-50%) scaleX(0);
transform-origin: left;
background: var(--gold);
transition: transform 0.5s ease;
}
.testi-line.active::after { transform: translateY(-50%) scaleX(1); }
.testi-nav {
display: flex;
gap: 12px;
margin-left: 32px;
flex-shrink: 0;
}
.testi-btn {
width: 44px; height: 44px;
border-radius: 50%;
border: 1px solid rgba(255,255,255,0.16);
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: background 0.25s ease, border-color 0.25s ease,
transform 0.25s cubic-bezier(0.16,1,0.3,1);
background: transparent;
}
.testi-btn:hover {
background: rgba(179,154,88,0.1);
border-color: rgba(179,154,88,0.5);
transform: scale(1.08);
}
.testi-btn svg {
width: 16px; height: 16px;
stroke: rgba(255,255,255,0.6);
fill: none;
transition: stroke 0.25s ease;
stroke-linecap: round;
stroke-linejoin: round;
}
.testi-btn:hover svg { stroke: var(--gold); }
/* ─── CONTACT ─── */
.contact-section {
background: var(--bg);
padding: 100px 80px;
}
.contact-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 60px;
margin-top: 60px;
}
.form-field {
margin-bottom: 28px;
position: relative;
}
.form-field label {
display: block;
font-family: 'DM Sans', sans-serif;
font-size: 11px;
letter-spacing: 2px;
text-transform: uppercase;
color: var(--muted);
margin-bottom: 8px;
transition: color 0.25s ease;
}
.form-field:focus-within label {
color: var(--green);
}
.form-field input,
.form-field select,
.form-field textarea {
width: 100%;
font-family: 'DM Sans', sans-serif;
font-size: 14px;
color: var(--text);
background: transparent;
border: none;
border-bottom: 1px solid var(--border);
padding: 14px 0;
outline: none;
transition: border-bottom-color 0.3s;
border-radius: 0;
appearance: none;
-webkit-appearance: none;
}
/* animated underline grows from left on focus */
.form-field::after {
content: '';
position: absolute;
bottom: 0; left: 0;
width: 0; height: 2px;
background: var(--green);
transition: width 0.35s cubic-bezier(0.16,1,0.3,1);
}
.form-field:focus-within::after { width: 100%; }
.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
border-bottom-color: transparent;
}
.form-field textarea { resize: vertical; min-height: 90px; }
.form-field select {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%235A6B5E' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 8px center;
padding-right: 28px;
}
.form-submit {
width: 100%;
font-family: 'DM Sans', sans-serif;
font-size: 12px;
letter-spacing: 2px;
text-transform: uppercase;
background: var(--green);
color: #fff;
padding: 16px;
border: none;
cursor: pointer;
transition: transform 0.25s cubic-bezier(0.16,1,0.3,1), box-shadow 0.3s;
position: relative;
overflow: hidden;
}
.form-submit:hover {
transform: translateY(-2px);
box-shadow: 0 10px 28px rgba(45, 90, 61,0.35);
}
.form-submit::after {
content: '';
position: absolute;
inset: 0;
background: var(--green-light);
transform: translateX(-101%);
transition: transform 0.4s ease;
}
.form-submit:hover::after { transform: translateX(0); }
.form-submit span { position: relative; z-index: 1; }
/* Status line under the enquiry button. Interim, while the form hands off
to WhatsApp — see handleSubmit in creator.js. */
.form-status {
margin: 14px 0 0;
font-family: 'DM Sans', sans-serif;
font-size: 13px;
line-height: 1.5;
color: var(--green);
}
.form-status a {
color: var(--gold-ink);
text-decoration: underline;
text-underline-offset: 3px;
}
.form-status-warn { color: var(--green-deep); }
.form-note {
font-family: 'DM Sans', sans-serif;
font-size: 12px;
color: var(--muted);
margin-top: 14px;
}
.showroom-card {
background: var(--dark);
padding: 40px;
}
.showroom-title {
font-family: 'Playfair Display', serif;
font-size: 24px;
color: #fff;
}
.showroom-sub {
font-family: 'DM Sans', sans-serif;
font-size: 12px;
color: rgba(255,255,255,0.6);
margin-top: 6px;
}
.showroom-divider {
height: 1px;
background: rgba(45, 90, 61,0.4);
margin: 20px 0;
}
.showroom-row {
display: flex;
align-items: flex-start;
gap: 12px;
margin-bottom: 14px;
transition: transform 0.25s cubic-bezier(0.16,1,0.3,1);
cursor: default;
}
.showroom-row:hover { transform: translateX(5px); }
.showroom-icon {
color: var(--green);
font-size: 16px;
flex-shrink: 0;
margin-top: 1px;
transition: color 0.3s;
}
.showroom-row:hover .showroom-icon { color: var(--gold); }
.showroom-row-text {
font-family: 'DM Sans', sans-serif;
font-size: 14px;
color: rgba(255,255,255,0.7);
line-height: 1.6;
}
.showroom-row-text a { color: rgba(255,255,255,0.7); transition: color 0.3s; }
.showroom-row-text a:hover { color: #fff; }
.showroom-buttons {
display: flex;
gap: 12px;
margin-top: 24px;
}
.btn-whatsapp {
flex: 1;
font-family: 'DM Sans', sans-serif;
font-size: 12px;
letter-spacing: 1.5px;
text-transform: uppercase;
background: #25D366;
color: #fff;
padding: 12px 16px;
text-align: center;
border-radius: 0;
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
transition: opacity 0.25s, transform 0.25s cubic-bezier(0.16,1,0.3,1), box-shadow 0.25s;
}
.btn-whatsapp:hover {
opacity: 0.9;
transform: translateY(-2px);
box-shadow: 0 8px 20px rgba(37,211,102,0.35);
}
.btn-viber {
flex: 1;
font-family: 'DM Sans', sans-serif;
font-size: 12px;
letter-spacing: 1.5px;
text-transform: uppercase;
background: transparent;
color: #fff;
padding: 12px 16px;
text-align: center;
border: 1px solid rgba(255,255,255,0.3);
border-radius: 0;
transition: background 0.3s, transform 0.25s cubic-bezier(0.16,1,0.3,1), border-color 0.3s;
}
.btn-viber:hover {
background: rgba(255,255,255,0.08);
border-color: rgba(255,255,255,0.55);
transform: translateY(-2px);
}
.showroom-map {
margin-top: 20px;
width: 100%;
height: 200px;
border: none;
}
/* ─── FOOTER ─── */
footer {
background: var(--dark);
}
.footer-main {
padding: 80px 80px 40px;
display: grid;
grid-template-columns: 1.5fr 1fr 1fr 1.2fr;
gap: 60px;
}
.footer-brand-name {
font-family: 'Playfair Display', serif;
font-size: 28px;
letter-spacing: 4px;
color: #fff;
font-weight: 400;
}
.footer-brand-sub {
font-family: 'DM Sans', sans-serif;
font-size: 14px;
color: rgba(255,255,255,0.45);
margin-top: 4px;
}
.footer-tagline {
font-family: 'DM Sans', sans-serif;
font-size: 13px;
color: rgba(255,255,255,0.35);
margin-top: 16px;
line-height: 1.7;
}
.footer-socials {
display: flex;
gap: 16px;
margin-top: 28px;
}
.footer-social-link {
color: rgba(255,255,255,0.4);
transition: color 0.25s ease, transform 0.25s cubic-bezier(0.16,1,0.3,1);
display: flex;
align-items: center;
}
.footer-social-link:hover {
color: #fff;
transform: translateY(-3px) scale(1.15);
}
.footer-col-title {
font-family: 'DM Sans', sans-serif;
font-size: 11px;
letter-spacing: 3px;
text-transform: uppercase;
color: var(--green);
margin-bottom: 20px;
}
.footer-links { list-style: none; }
.footer-links li { margin-bottom: 10px; }
.footer-links a {
font-family: 'DM Sans', sans-serif;
font-size: 13px;
color: rgba(255,255,255,0.4);
transition: color 0.25s ease, transform 0.25s cubic-bezier(0.16,1,0.3,1);
display: inline-block;
}
.footer-links a:hover {
color: rgba(255,255,255,0.9);
transform: translateX(5px);
}
.footer-contact-item {
font-family: 'DM Sans', sans-serif;
font-size: 13px;
color: rgba(255,255,255,0.4);
margin-bottom: 10px;
display: block;
line-height: 1.6;
}
.footer-contact-item a {
color: rgba(255,255,255,0.4);
transition: color 0.3s;
}
.footer-contact-item a:hover { color: rgba(255,255,255,0.9); }
.footer-divider {
height: 1px;
background: rgba(45, 90, 61,0.4);
margin: 0 80px;
}
.footer-bottom {
padding: 20px 80px;
display: flex;
justify-content: space-between;
align-items: center;
}
.footer-copy, .footer-langs {
font-family: 'DM Sans', sans-serif;
font-size: 12px;
color: rgba(255,255,255,0.25);
}
/* ─── FLOATING CONTACT ─── */
/* One bubble in the corner that opens three ways through: WhatsApp,
Viber, and the enquiry form. The marks are drawn in the site's own
green rather than each service's brand colour — three saturated
logos stacked in a corner is the one thing that would cheapen this
palette. The label beside each mark does the identifying instead,
which also means the row is readable before the glyph is. */
.contact-fab {
position: fixed;
bottom: 24px; right: 24px;
z-index: 500;
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 14px;
}
.contact-fab-menu {
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 10px;
visibility: hidden;
pointer-events: none;
}
.contact-fab.is-open .contact-fab-menu {
visibility: visible;
pointer-events: auto;
}
.contact-fab-option {
display: flex;
align-items: center;
gap: 10px;
text-decoration: none;
opacity: 0;
transform: translateY(10px);
transition: opacity 0.32s cubic-bezier(0.16,1,0.3,1),
transform 0.32s cubic-bezier(0.16,1,0.3,1);
}
.contact-fab.is-open .contact-fab-option { opacity: 1; transform: translateY(0); }
/* The stagger runs outward from the button, so the stack unfolds from
the thing that was pressed rather than arriving top-down. */
.contact-fab.is-open .contact-fab-option:nth-child(2) { transition-delay: 0.04s; }
.contact-fab.is-open .contact-fab-option:nth-child(1) { transition-delay: 0.08s; }
.contact-fab-label {
font-family: 'DM Sans', sans-serif;
font-size: 12px;
letter-spacing: 0.06em;
color: var(--bg);
background: rgba(29,48,37,0.95);
border: 1px solid rgba(179,154,88,0.28);
padding: 8px 14px;
border-radius: 999px;
white-space: nowrap;
box-shadow: 0 6px 18px rgba(29,48,37,0.16);
}
.contact-fab-mark {
flex: none;
width: 46px; height: 46px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
background: var(--bg);
color: var(--green);
border: 1px solid var(--border);
box-shadow: 0 6px 18px rgba(29,48,37,0.16);
transition: background 0.25s, color 0.25s, border-color 0.25s;
}
.contact-fab-option:hover .contact-fab-mark,
.contact-fab-option:focus-visible .contact-fab-mark {
background: var(--green);
color: var(--bg);
border-color: var(--green);
}
.contact-fab-option:focus-visible {
outline: 2px solid var(--gold);
outline-offset: 4px;
border-radius: 999px;
}
.contact-fab-toggle {
position: relative;
width: 56px; height: 56px;
border-radius: 50%;
border: 1px solid rgba(179,154,88,0.35);
background: var(--green-deep);
color: var(--gold);
display: flex;
align-items: center;
justify-content: center;
padding: 0;
cursor: pointer;
box-shadow: 0 10px 28px rgba(29,48,37,0.28);
transition: transform 0.25s cubic-bezier(0.16,1,0.3,1),
background 0.25s, box-shadow 0.3s;
}
.contact-fab-toggle:hover {
background: var(--green);
transform: translateY(-2px);
box-shadow: 0 14px 32px rgba(29,48,37,0.34);
}
.contact-fab-toggle:focus-visible {
outline: 2px solid var(--gold);
outline-offset: 4px;
}
.contact-fab-toggle svg {
position: absolute;
transition: opacity 0.22s ease, transform 0.28s cubic-bezier(0.16,1,0.3,1);
}
.contact-fab-close { opacity: 0; transform: rotate(-45deg) scale(0.8); }
.contact-fab.is-open .contact-fab-bubble { opacity: 0; transform: rotate(45deg) scale(0.8); }
.contact-fab.is-open .contact-fab-close { opacity: 1; transform: rotate(0deg) scale(1); }
/* Back-to-top sits exactly where the first option lands, so it stands
aside while the stack is open rather than showing through it. */
body.fab-open #back-to-top {
opacity: 0;
transform: translateY(10px);
pointer-events: none;
}
/* ─── SCROLL REVEAL ─── */
/* ─── REVEAL SYSTEM ─── */
.reveal {
opacity: 0;
transform: translateY(26px);
transition: opacity 0.95s cubic-bezier(0.16, 1, 0.3, 1),
transform 0.95s cubic-bezier(0.16, 1, 0.3, 1);
}
.reveal.revealed {
opacity: 1;
transform: translateY(0);
}
/* directional variants — add alongside .reveal */
.reveal-left {
opacity: 0;
transform: translateX(-30px);
transition: opacity 1s cubic-bezier(0.16, 1, 0.3, 1),
transform 1s cubic-bezier(0.16, 1, 0.3, 1);
}
.reveal-right {
opacity: 0;
transform: translateX(30px);
transition: opacity 1s cubic-bezier(0.16, 1, 0.3, 1),
transform 1s cubic-bezier(0.16, 1, 0.3, 1);
}
.reveal-scale {
opacity: 0;
transform: scale(0.955);
transition: opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1),
transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}
.reveal-left.revealed,
.reveal-right.revealed,
.reveal-scale.revealed {
opacity: 1;
transform: none;
}
/* Section tags settle into focus — tracking tightens as the block resolves */
.reveal .section-tag,
.reveal-left .section-tag,
.reveal-right .section-tag {
letter-spacing: 5.5px;
transition: letter-spacing 1.2s cubic-bezier(0.16, 1, 0.3, 1);
}
.reveal.revealed .section-tag,
.reveal-left.revealed .section-tag,
.reveal-right.revealed .section-tag {
letter-spacing: 3px;
}
/* ─── LIGHTBOX ─── */
#lightbox {
position: fixed;
inset: 0;
z-index: 3000;
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
visibility: hidden;
/* visibility flips instantly on open so the close button can take focus,
and is held back on close so the fade out is still seen — the same
pattern as .setting-panel. */
transition: opacity 0.35s ease, visibility 0s linear 0.35s;
}
#lightbox.lb-open { opacity: 1; visibility: visible; transition: opacity 0.35s ease, visibility 0s; }
#lb-backdrop {
position: absolute;
inset: 0;
background: rgba(14, 10, 6, 0.96);
cursor: zoom-out;
}
/* The carousel (30 Sep 2026): slides stand side by side on one line, the
one in view centred, its neighbours peeking in dimmed; creator.js sets
each slide's size and place, and the move between them is this
transition. */
#lb-stage {
position: absolute; inset: 0; z-index: 1; pointer-events: none;
transform: scale(0.965); transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
#lightbox.lb-open #lb-stage { transform: none; }
.lb-slide {
position: absolute; left: 50%; top: calc(50% - 18px); margin: 0;
pointer-events: auto;
transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.6s ease;
}
.lb-slide img { display: block; width: 100%; height: 100%; object-fit: contain; }
.lb-slide.is-near { opacity: 0.3; cursor: pointer; }
.lb-slide.is-near:hover { opacity: 0.55; }
.lb-slide.is-far { opacity: 0; pointer-events: none; }
.lb-slide.is-current { opacity: 1; cursor: default; }
#lb-caption {
position: absolute; left: 0; right: 0; z-index: 2; margin: 0;
top: calc(50% - 18px + var(--lb-h, 70vh) / 2 + 18px);
font-family: 'DM Sans', sans-serif;
font-size: 11px;
letter-spacing: 3px;
text-transform: uppercase;
color: rgba(255,255,255,0.55);
text-align: center;
pointer-events: none;
}
@media (prefers-reduced-motion: reduce) {
.lb-slide, #lb-stage { transition: none; }
}
#lb-close {
position: absolute;
top: 20px; right: 24px;
color: rgba(255,255,255,0.5);
width: 44px; height: 44px;
display: flex;
align-items: center;
justify-content: center;
z-index: 2;
transition: color 0.25s, border-color 0.25s;
border: 1px solid rgba(255,255,255,0.15);
}
#lb-close { transition: color 0.25s, border-color 0.25s, transform 0.25s cubic-bezier(0.16,1,0.3,1); }
#lb-close:hover { color: #fff; border-color: rgba(255,255,255,0.4); transform: rotate(90deg) scale(1.1); }
#lb-prev, #lb-next {
position: absolute;
top: 50%;
transform: translateY(-50%);
color: rgba(255,255,255,0.4);
width: 52px; height: 80px;
display: flex;
align-items: center;
justify-content: center;
z-index: 2;
transition: color 0.25s, background 0.25s;
}
#lb-prev, #lb-next { transition: color 0.25s, background 0.25s, transform 0.25s cubic-bezier(0.16,1,0.3,1); }
#lb-prev:hover { color: #fff; background: rgba(255,255,255,0.08); transform: translateY(-50%) translateX(-3px); }
#lb-next:hover { color: #fff; background: rgba(255,255,255,0.08); transform: translateY(-50%) translateX(3px); }
#lb-prev { left: 8px; }
#lb-next { right: 8px; }
/* ─── RESPONSIVE ─── */
@media (max-width: 1024px) {
body > nav { left: 16px; right: 16px; padding: 12px 20px; }
body > nav.scrolled { padding: 10px 20px; }
.nav-links { display: none; }
.hamburger { display: flex; }
.nav-right .btn-primary { display: none; }
.lang-switcher { display: none; }
/* The wordmark used to be hidden here. It is the name and the year the
workshop opened, and on a phone it was the one thing the bar had room
for — see the mobile lockup at the end of this file. */
.stats-grid { flex-wrap: wrap; }
.stat-item { flex: 0 0 50%; }
.stat-item:nth-child(2)::after { display: none; }
.collections-header { padding: 0 40px; }
.collections-grid { grid-template-columns: repeat(2, 1fr); }
.collection-card:nth-child(1),
.collection-card:nth-child(2),
.collection-card:nth-child(3),
.collection-card:nth-child(4) { grid-column: auto; grid-row: auto; aspect-ratio: 1/1; }
.process-section { padding: 52px 40px 80px; }
.process-steps { grid-template-columns: repeat(2, 1fr); }
.process-step:nth-child(2)::before { display: none; }
.gallery-section { padding: 80px 40px 52px; }
.gallery-grid { --cols: 2; }
.clients-header, .clients-meta { padding: 0 40px; }
.clients-sectors { columns: 2; column-gap: 40px; padding: 0 40px; }
.export-section { padding: 80px 40px; gap: 40px; }
.testimonials-section { padding: 80px 40px; }
.testi-body { grid-template-columns: 80px 1fr; gap: 32px; }
.testi-index { font-size: clamp(64px, 9vw, 96px); }
.contact-section { padding: 80px 40px; }
.footer-main { padding: 60px 40px 40px; gap: 40px; grid-template-columns: 1fr 1fr; }
.footer-divider { margin: 0 40px; }
.footer-bottom { padding: 20px 40px; }
}
@media (max-width: 768px) {
body > nav { left: 10px; right: 10px; padding: 10px 16px; }
body > nav.scrolled { top: 8px; padding: 8px 16px; }
.preloader-logo { width: 140px; }
.stats-section { padding: 40px 24px; }
.stats-grid { flex-direction: column; }
.stat-item::after { display: none; }
.stat-item { border-bottom: 1px solid rgba(45, 90, 61,0.15); }
.collections-header { padding: 0 24px; }
.collections-grid { grid-template-columns: 1fr; }
.collection-card { aspect-ratio: 4/3; }
.process-section { padding: 40px 24px 60px; }
.process-steps { grid-template-columns: 1fr; }
.process-step::before { display: none; }
.process-bg-number { font-size: 80px; }
.gallery-section { padding: 60px 24px 40px; }
.madewell-section { padding: 40px 0; }
.gallery-grid { --cols: 1; }
.clients-header, .clients-meta { padding: 0 24px; }
.clients-sectors { columns: 2; column-gap: 28px; padding: 0 24px; }
.clients-meta { flex-direction: column; gap: 20px; }
.clients-meta-sep { width: 40px; height: 1px; }
.export-section {
padding: 60px 24px;
grid-template-columns: 1fr;
gap: 40px;
}
.testimonials-section { padding: 60px 24px; }
.testi-body { grid-template-columns: 1fr; gap: 0; }
.testi-index { font-size: 56px; margin-bottom: 20px; }
.testi-content { min-height: 300px; }
.testi-footer { flex-wrap: wrap; gap: 20px; }
.testi-lines { order: 2; flex-basis: 100%; }
.testi-nav { order: 1; margin-left: auto; }
.contact-section { padding: 60px 24px; }
.contact-grid { grid-template-columns: 1fr; gap: 40px; }
.footer-main {
padding: 60px 24px 40px;
grid-template-columns: 1fr;
gap: 32px;
}
.footer-divider { margin: 0 24px; }
.footer-bottom {
padding: 20px 24px;
flex-direction: column;
gap: 8px;
text-align: center;
}
/* The toggle matches the 44px back-to-top beside it — two floating
buttons of different sizes looked accidental rather than considered
— with the glyph at half, which is still a full tap target. The
option marks stay 44px for the same reason: they are the tap
targets, and the label beside them is not. */
.contact-fab { bottom: 16px; right: 16px; gap: 12px; }
.contact-fab-toggle { width: 44px; height: 44px; }
.contact-fab-toggle .contact-fab-bubble { width: 22px; height: 22px; }
.contact-fab-mark { width: 44px; height: 44px; }
.contact-fab-label { font-size: 11px; padding: 7px 12px; }
}
/* ─── PHASE 4 POLISH ─── */
/* Section title — slight upward drift on reveal */
.reveal.revealed .section-title,
.reveal-left.revealed .section-title,
.reveal-right.revealed .section-title {
animation: titleDrift 0.9s 0.1s cubic-bezier(0.16,1,0.3,1) both;
}
@keyframes titleDrift {
from { opacity: 0; transform: translateY(14px); }
to { opacity: 1; transform: none; }
}
/* Focus rings — visible but styled */
:focus-visible {
outline: 2px solid var(--gold);
outline-offset: 3px;
border-radius: 2px;
}
/* Nav active state — current section link gets a subtle gold dot */
.nav-links a.nav-active {
color: var(--green);
}
.nav-links a.nav-active::after {
width: 100%; left: 0;
}
/* Collection card — remove grid-gap flash on load */
.collections-grid { isolation: isolate; }
/* Tighter vertical rhythm on section headers */
.collections-header,
.process-section > .reveal:first-child,
.gallery-section > .reveal:first-child,
.contact-section > .reveal:first-child {
padding-bottom: 4px;
}
/* Smooth image load fade-in.
Gated behind html.img-fade, which JS sets on startup. Without JS the hiding
rule never applies, so a no-JS or failed-script visitor still sees every
photo instead of a page of invisible images. */
img { transition: opacity 0.5s ease; }
html.img-fade img[loading="lazy"]:not([data-loaded]) { opacity: 0; }
html.img-fade img[loading="lazy"][data-loaded] { opacity: 1; }
/* ─── SCROLL PROGRESS BAR ─── */
#scroll-progress {
position: fixed;
top: 0; left: 0;
width: 0%;
height: 2px;
background: linear-gradient(90deg, var(--green), var(--gold));
z-index: 9999;
transform-origin: left;
transition: width 0.1s linear;
pointer-events: none;
}
/* ─── SCROLL TO TOP ─── */
#back-to-top {
position: fixed;
bottom: 92px; right: 24px;
width: 44px; height: 44px;
border-radius: 50%;
background: var(--dark);
border: 1px solid rgba(255,255,255,0.12);
display: flex;
align-items: center;
justify-content: center;
z-index: 499;
cursor: pointer;
opacity: 0;
transform: translateY(12px);
transition: opacity 0.35s ease, transform 0.35s cubic-bezier(0.16,1,0.3,1),
background 0.25s, border-color 0.25s;
pointer-events: none;
}
#back-to-top.visible {
opacity: 1;
transform: translateY(0);
pointer-events: auto;
}
#back-to-top:hover {
background: var(--green);
border-color: var(--green);
}
#back-to-top svg {
width: 16px; height: 16px;
stroke: rgba(255,255,255,0.7);
transition: stroke 0.25s, transform 0.25s cubic-bezier(0.16,1,0.3,1);
}
#back-to-top:hover svg {
stroke: #fff;
transform: translateY(-2px);
}
/* ─── REDUCED MOTION ─── */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
#scroll-progress { display: none; }
.reveal, .reveal-left, .reveal-right, .reveal-scale { opacity: 1; transform: none; }
.stat-item.revealed .stat-number { animation: none; opacity: 1; transform: none; }
.process-step:not(:last-child)::before { transform: scaleX(1); transition: none; }
.section-tag::before { width: 24px; transition: none; }
.stat-item:not(:last-child)::after { top: 10%; bottom: 10%; opacity: 0.25; transition: none; }
#back-to-top { transition: opacity 0.01ms, transform 0.01ms; }
.contact-fab .contact-fab-option { transition-delay: 0ms !important; transform: none; }
}
/* ══════════════════════════════════════════════════════
SCROLL-DRIVEN MOTION SECTIONS
All use existing CSS variables. No new dependencies.
══════════════════════════════════════════════════════ */
/* ─── ASSET PLACEHOLDER (shared) ─── */
.asset-placeholder {
width: 100%; height: 100%;
background: linear-gradient(135deg, #e8e4dd 0%, #d4cec4 100%);
display: flex; flex-direction: column;
align-items: center; justify-content: center; gap: 12px;
}
.asset-placeholder-label {
font-family: 'DM Sans', sans-serif;
font-size: 10px; letter-spacing: 2px; text-transform: uppercase;
color: #9a9288; text-align: center; max-width: 260px; line-height: 1.7;
}
/* ─── SIGNATURE PINNED SETTLING HERO ─── */
/* Pin length. 300vh (two full screens of scrolling) was tuned for seven
frames and read as a slog; with three beats the whole move — orbit, room
lighting, copy — resolves inside one screen of scroll, and the last ~20%
is a hold so the finished frame and the copy sit still before you scroll
out of the section. */
.signature-scroll-wrapper { position: relative; height: 200vh; }
.signature-sticky {
position: sticky; top: 0;
height: 100vh; overflow: hidden;
background: var(--bg);
}
.sig-stage { position: relative; width: 100%; height: 100%; }
.sig-layer { position: absolute; inset: 0; will-change: opacity; }
/* ── the three camera positions ──
All frames stacked and permanently in the DOM; scroll only changes their
opacity, which keeps the whole orbit on the compositor. Same performance
contract as the hero: no animated blur, and an explicit transition:none so
the global `img { transition: opacity .5s }` (there for the lazy-load fade)
cannot interpolate the scrubbed values and lag them behind the scroll. */
.sig-angles { overflow: hidden; }
.sig-angles .sig-angle {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: 50% 58%;
opacity: 0;
filter: none; /* opt out of the global photo grade */
transition: none !important;
/* Deliberately NOT will-change. Promoting every full-screen frame cost
~37MB of layer memory at seven frames, blew the compositor budget, and the
browser then silently declined to rasterise them — the section rendered
blank. Three frames would likely survive it, but there is nothing to gain:
only the two frames mid-dissolve are ever non-zero, and the compositor
promotes those on its own when their opacity animates. */
user-select: none;
-webkit-user-drag: none;
}
/* First frame is the resting state, so the section is never empty before JS. */
.sig-angles .sig-angle:first-child { opacity: 1; }
.sig-light-overlay {
background: radial-gradient(ellipse at 60% 25%, rgba(179,154,88,0.22) 0%, transparent 65%);
pointer-events: none;
}
.sig-unlit {
background: linear-gradient(180deg, rgba(22,16,10,0.46) 0%, rgba(22,16,10,0.74) 100%);
pointer-events: none;
}
.sig-ground {
background: radial-gradient(ellipse 62% 34% at 50% 100%, rgba(18,13,8,0.55) 0%, transparent 70%);
pointer-events: none;
}
.sig-text-layer {
position: absolute; inset: 0;
display: flex; align-items: flex-end; justify-content: center;
padding: 0 48px 80px;
pointer-events: none;
will-change: opacity, transform;
}
/* Scrim behind the text — fades in with the layer so the room reveal stays clean,
then grounds the copy for legibility over the photo. */
.sig-text-layer::before {
content: '';
position: absolute; inset: 0;
background: linear-gradient(to top,
rgba(14,10,6,0.85) 0%,
rgba(14,10,6,0.62) 28%,
rgba(14,10,6,0.22) 52%,
transparent 74%);
pointer-events: none;
}
.sig-text-inner {
position: relative; z-index: 1;
text-align: center; max-width: 560px; pointer-events: auto;
}
.sig-eyebrow {
font-family: 'DM Sans', sans-serif;
font-size: 10px; letter-spacing: 4px; text-transform: uppercase;
color: var(--gold); margin-bottom: 20px;
display: flex; align-items: center; justify-content: center; gap: 16px;
}
.sig-eyebrow::before, .sig-eyebrow::after {
content: ''; display: block; width: 28px; height: 1px;
background: var(--gold); opacity: 0.55;
}
.sig-headline {
font-family: 'Playfair Display', serif;
font-size: clamp(30px, 4vw, 52px);
font-weight: 400; line-height: 1.15;
color: rgba(255,255,255,0.96); margin-bottom: 22px;
text-shadow: 0 2px 40px rgba(0,0,0,0.35);
}
.sig-headline em { font-style: italic; color: var(--gold); }
.sig-rule { width: 40px; height: 1px; background: var(--gold); margin: 0 auto 20px; }
.sig-body {
font-family: 'DM Sans', sans-serif;
font-size: 15px; line-height: 1.85;
color: rgba(255,255,255,0.72); margin-bottom: 28px;
}
.sig-scroll-hint {
position: absolute; bottom: 28px; left: 50%; transform: translateX(-50%);
font-family: 'DM Sans', sans-serif;
font-size: 10px; letter-spacing: 3px; text-transform: uppercase;
color: rgba(255,255,255,0.6); opacity: 0.7;
text-shadow: 0 1px 12px rgba(0,0,0,0.5);
pointer-events: none; white-space: nowrap; will-change: opacity; z-index: 2;
}
.sig-progress-dots {
position: absolute; right: 32px; top: 50%; transform: translateY(-50%);
display: flex; flex-direction: column; gap: 8px; z-index: 10;
}
.sig-dot {
width: 4px; height: 4px; border-radius: 50%;
background: rgba(255,255,255,0.45); opacity: 0.45;
transition: opacity 0.4s, background 0.4s, transform 0.4s;
}
.sig-dot.active { opacity: 1; background: var(--gold); transform: scale(1.5); }
/* ─── CRAFTSMANSHIP REVEALS ─── */
.craft-section { background: var(--bg); padding: 120px 0; }
.craft-header { max-width: 1200px; margin: 0 auto 80px; padding: 0 80px; }
.craft-item {
display: grid; grid-template-columns: 1fr 1fr;
max-width: 1200px; margin: 0 auto 100px;
padding: 0 80px; gap: 80px; align-items: center;
}
.craft-item:last-child { margin-bottom: 0; }
.craft-item--reverse { direction: rtl; }
.craft-item--reverse > * { direction: ltr; }
.craft-image-wrap { overflow: hidden; aspect-ratio: 4/3; }
.craft-image-inner {
width: 100%; height: 100%;
transform: scale(1.06);
transition: transform 1.2s cubic-bezier(0.16,1,0.3,1), opacity 0.9s ease;
opacity: 0;
}
.craft-image-wrap.revealed .craft-image-inner { transform: scale(1.0); opacity: 1; }
.craft-number {
font-family: 'Playfair Display', serif;
font-size: 72px; line-height: 1; font-weight: 400;
color: rgba(45, 90, 61,0.07); display: block; margin-bottom: 4px;
}
.craft-caption {
font-family: 'DM Sans', sans-serif;
font-size: 11px; letter-spacing: 3px; text-transform: uppercase;
color: var(--gold); margin-bottom: 18px;
display: flex; align-items: center; gap: 10px;
}
.craft-caption::before {
content: ''; display: block; width: 20px; height: 1px;
background: var(--gold); opacity: 0.55;
}
.craft-title {
font-family: 'Playfair Display', serif;
font-size: clamp(22px, 2.2vw, 32px);
font-weight: 400; line-height: 1.2; color: var(--dark); margin-bottom: 18px;
}
.craft-body {
font-family: 'DM Sans', sans-serif;
font-size: 15px; line-height: 1.85; color: var(--muted);
}
.sr-only {
position: absolute; width: 1px; height: 1px;
padding: 0; margin: -1px; overflow: hidden;
clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
/* ─── DIMENSIONS REVEAL ─── */
.dimensions-section { background: var(--bg); padding: 120px 80px; }
.dimensions-inner { max-width: 960px; margin: 0 auto; }
.dimensions-header { text-align: center; margin-bottom: 72px; }
.dimensions-header p {
font-family: 'DM Sans', sans-serif;
font-size: 15px; line-height: 1.85; color: var(--muted);
max-width: 460px; margin: 20px auto 0;
}
.dimensions-svg { width: 100%; max-width: 760px; display: block; margin: 0 auto; overflow: visible; }
.dim-furniture-line {
stroke: var(--text); stroke-width: 1.5; fill: none;
stroke-dasharray: 2000; stroke-dashoffset: 2000;
transition: stroke-dashoffset 1.8s 0.1s cubic-bezier(0.16,1,0.3,1);
}
.dim-line {
stroke: var(--gold); stroke-width: 1; fill: none;
stroke-dasharray: 600; stroke-dashoffset: 600;
transition: stroke-dashoffset 1.0s cubic-bezier(0.16,1,0.3,1);
}
.dim-label {
font-family: 'DM Sans', sans-serif; font-size: 11px;
fill: var(--muted); letter-spacing: 1px; opacity: 0;
transition: opacity 0.6s ease;
}
.dim-arrowhead { fill: var(--gold); opacity: 0; transition: opacity 0.4s ease; }
.dimensions-section.dim-revealed .dim-furniture-line { stroke-dashoffset: 0; }
.dimensions-section.dim-revealed .dim-line { stroke-dashoffset: 0; }
.dimensions-section.dim-revealed .dim-label { opacity: 1; }
.dimensions-section.dim-revealed .dim-arrowhead { opacity: 1; }
.dim-line-1 { transition-delay: 0.6s; }
.dim-line-2 { transition-delay: 0.85s; }
.dim-line-3 { transition-delay: 1.1s; }
.dim-line-4 { transition-delay: 1.35s; }
.dim-label-1 { transition-delay: 1.3s; }
.dim-label-2 { transition-delay: 1.55s; }
.dim-label-3 { transition-delay: 1.8s; }
.dim-label-4 { transition-delay: 2.0s; }
.dim-arrowhead-1 { transition-delay: 1.3s; }
.dim-arrowhead-2 { transition-delay: 1.55s; }
.dim-arrowhead-3 { transition-delay: 1.8s; }
.dim-arrowhead-4 { transition-delay: 2.0s; }
.dimensions-spec-row {
display: flex; justify-content: center; gap: 64px; margin-top: 56px; flex-wrap: wrap;
}
.dim-spec {
text-align: center; opacity: 0; transform: translateY(14px);
transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.16,1,0.3,1);
}
.dimensions-section.dim-revealed .dim-spec { opacity: 1; transform: translateY(0); }
.dimensions-section.dim-revealed .dim-spec:nth-child(1) { transition-delay: 2.1s; }
.dimensions-section.dim-revealed .dim-spec:nth-child(2) { transition-delay: 2.25s; }
.dimensions-section.dim-revealed .dim-spec:nth-child(3) { transition-delay: 2.4s; }
.dimensions-section.dim-revealed .dim-spec:nth-child(4) { transition-delay: 2.55s; }
.dim-spec-value {
font-family: 'Playfair Display', serif;
font-size: 34px; font-weight: 400; color: var(--dark); display: block;
}
.dim-spec-label {
font-family: 'DM Sans', sans-serif;
font-size: 10px; letter-spacing: 2px; text-transform: uppercase;
color: var(--muted); display: block; margin-top: 6px;
}
/* ─── LIFESTYLE GALLERY — DRAGGABLE STRIP ─── */
.lifestyle-section { background: var(--dark); padding: 100px 0; overflow: hidden; }
.lifestyle-header { max-width: 1200px; margin: 0 auto 56px; padding: 0 80px; }
.lifestyle-header .section-tag { color: rgba(255,255,255,0.58); }
.lifestyle-header .section-title { color: #fff; }
/* touch-action is the contract with the browser: vertical scrolling is
yours, horizontal is mine. Without it a touchscreen claims the swipe
and cancels the pointer mid-gesture. */
.lifestyle-track-outer {
overflow: hidden; cursor: grab; user-select: none; -webkit-user-select: none;
touch-action: pan-y;
}
.lifestyle-track-outer.is-dragging { cursor: grabbing; }
.lifestyle-track-outer:focus-visible { outline: 1px solid var(--gold); outline-offset: -1px; }
.lifestyle-track { display: flex; gap: 3px; will-change: transform; }
.lifestyle-frame {
flex: 0 0 55vw; height: 65vh;
position: relative; overflow: hidden; background: #1a2420;
}
.lifestyle-frame:first-child { margin-left: 80px; }
.lifestyle-frame:last-child { margin-right: 80px; }
.lifestyle-frame-img {
width: 100%; height: 115%; margin-top: -7.5%; object-fit: cover;
will-change: transform; display: block;
-webkit-user-drag: none; user-drag: none;
}
.lifestyle-frame-overlay {
position: absolute; inset: 0;
background: linear-gradient(to top, rgba(14,10,6,0.72) 0%, transparent 55%);
pointer-events: none;
}
.lifestyle-frame-info { position: absolute; bottom: 28px; left: 28px; right: 28px; }
.lifestyle-frame-label {
font-family: 'DM Sans', sans-serif;
font-size: 10px; letter-spacing: 3px; text-transform: uppercase;
color: rgba(255,255,255,0.6); display: block; margin-bottom: 6px;
}
.lifestyle-frame-title {
font-family: 'Playfair Display', serif;
font-size: 22px; font-weight: 400; color: #fff; line-height: 1.25;
}
.lifestyle-nav {
display: flex; align-items: center; gap: 14px;
padding: 28px 80px 0; max-width: 1200px; margin: 0 auto;
}
.lifestyle-nav-btn {
width: 44px; height: 44px; border: 1px solid rgba(255,255,255,0.18);
display: flex; align-items: center; justify-content: center;
cursor: pointer; background: none;
transition: border-color 0.3s, background 0.3s, transform 0.25s cubic-bezier(0.16,1,0.3,1);
color: rgba(255,255,255,0.55);
}
.lifestyle-nav-btn:hover { border-color: var(--gold); background: rgba(179,154,88,0.08); color: var(--gold); transform: translateY(-2px); }
.lifestyle-count { font-family: 'DM Sans', sans-serif; font-size: 11px; letter-spacing: 2px; color: rgba(255,255,255,0.5); }
/* ─── 360° SPIN ─── */
.spin-section { background: var(--bg); padding: 120px 80px; }
.spin-inner { max-width: 960px; margin: 0 auto; }
.spin-header { text-align: center; margin-bottom: 56px; }
.spin-stage-wrap {
position: relative; aspect-ratio: 4/3; overflow: hidden;
background: #e8e4dd; cursor: grab; max-width: 780px; margin: 0 auto;
}
.spin-stage-wrap:active { cursor: grabbing; }
.spin-frame { position: absolute; inset: 0; opacity: 0; pointer-events: none; user-select: none; }
.spin-frame.active { opacity: 1; }
.spin-stage-wrap { perspective: 1400px; }
.spin-tilt-img {
width: 100%; height: 100%; object-fit: cover;
transform-origin: center center;
transition: transform 0.5s cubic-bezier(0.16,1,0.3,1);
will-change: transform;
}
.spin-hint {
position: absolute; bottom: 22px; left: 50%; transform: translateX(-50%);
font-family: 'DM Sans', sans-serif;
font-size: 10px; letter-spacing: 3px; text-transform: uppercase; color: var(--muted);
display: flex; align-items: center; gap: 8px; pointer-events: none;
transition: opacity 0.5s ease;
}
.spin-hint svg { animation: spinHintBounce 2.2s ease-in-out infinite; }
@keyframes spinHintBounce {
0%, 100% { transform: translateX(0); opacity: 0.5; }
50% { transform: translateX(5px); opacity: 1; }
}
.spin-frame-counter {
text-align: center; margin-top: 22px;
font-family: 'DM Sans', sans-serif; font-size: 11px; letter-spacing: 2px; color: var(--muted);
}
.spin-progress-bar { width: 180px; height: 1px; background: var(--border); margin: 14px auto 0; position: relative; overflow: hidden; }
.spin-progress-fill { position: absolute; left: 0; top: 0; bottom: 0; background: var(--gold); transition: width 0.08s linear; }
.spin-asset-note {
max-width: 460px; margin: 28px auto 0; text-align: center;
font-family: 'DM Sans', sans-serif; font-size: 13px; line-height: 1.75; color: var(--muted);
padding: 22px 28px; border: 1px solid var(--border);
}
.spin-asset-note strong { color: var(--dark); font-weight: 500; }
.spin-asset-note code { font-family: monospace; font-size: 12px; background: rgba(45, 90, 61,0.07); padding: 1px 5px; }
/* ─── PROVENANCE / VALUES ─── */
/* ─── RESPONSIVE — NEW SECTIONS ─── */
@media (max-width: 1024px) {
.craft-item { grid-template-columns: 1fr; gap: 36px; padding: 0 40px; }
.craft-item--reverse { direction: ltr; }
.craft-header { padding: 0 40px; }
.lifestyle-frame { flex: 0 0 78vw; }
.lifestyle-header { padding: 0 40px; }
.lifestyle-nav { padding: 28px 40px 0; }
.lifestyle-frame:first-child { margin-left: 40px; }
.dimensions-section { padding: 80px 40px; }
.spin-section { padding: 80px 40px; }
}
@media (max-width: 768px) {
/* A phone screen is tall and the swipe is short, so the same pin length
costs more gestures than it does on desktop. Tightened again here. */
.signature-scroll-wrapper { height: 170vh; }
.sig-text-layer { padding: 0 24px 56px !important; }
.sig-headline { font-size: clamp(24px, 7vw, 38px); }
.sig-progress-dots { display: none; }
.lifestyle-frame { flex: 0 0 88vw; height: 52vh; }
.dimensions-spec-row { gap: 28px; }
.dim-spec-value { font-size: 26px; }
.craft-item { margin-bottom: 64px; }
}
@media (prefers-reduced-motion: reduce) {
.sig-layer, .craft-image-inner,
.dim-furniture-line, .dim-line, .dim-label, .dim-arrowhead, .dim-spec,
.craft-image-inner { opacity: 1 !important; transform: none !important; }
.dim-furniture-line, .dim-line { stroke-dashoffset: 0 !important; }
.dim-label, .dim-arrowhead, .dim-spec { opacity: 1 !important; transform: none !important; }
}
/* ══════════════════════════════════════════════════════
SUBPAGE COMPONENTS — page hero, editorial rows, CTA band
══════════════════════════════════════════════════════ */
/* ─── PAGE HERO ─── */
.page-hero {
background: var(--dark);
padding: 190px 48px 100px;
text-align: center;
position: relative;
overflow: hidden;
}
.page-hero::before {
content: '';
position: absolute; inset: 0;
background: radial-gradient(ellipse at 50% -20%, rgba(179,154,88,0.13) 0%, transparent 60%);
pointer-events: none;
}
.page-hero-inner {
position: relative;
max-width: 720px; margin: 0 auto;
animation: pageHeroIn 1.1s 0.15s cubic-bezier(0.16,1,0.3,1) both;
}
@keyframes pageHeroIn {
from { opacity: 0; transform: translateY(26px); }
to { opacity: 1; transform: translateY(0); }
}
.page-hero-eyebrow {
font-family: 'DM Sans', sans-serif;
font-size: 10px; letter-spacing: 4px; text-transform: uppercase;
color: var(--gold);
display: flex; align-items: center; justify-content: center; gap: 16px;
margin-bottom: 24px;
}
.page-hero-eyebrow::before, .page-hero-eyebrow::after {
content: ''; display: block; width: 28px; height: 1px;
background: var(--gold); opacity: 0.55;
}
.page-hero-title {
font-family: 'Playfair Display', serif;
font-size: clamp(38px, 5vw, 62px);
font-weight: 400; line-height: 1.12;
color: rgba(255,255,255,0.96);
margin-bottom: 22px;
}
.page-hero-title em { font-style: italic; color: var(--gold-display); }
.page-hero-sub {
font-family: 'DM Sans', sans-serif;
font-size: 15px; line-height: 1.85;
color: rgba(255,255,255,0.55);
max-width: 560px; margin: 0 auto;
}
/* ─── EDITORIAL ROWS (collections) ─── */
.edit-rows { background: var(--bg); padding: 110px 0 40px; }
.edit-row {
display: grid; grid-template-columns: 1fr 1fr;
gap: 80px; align-items: center;
max-width: 1200px; margin: 0 auto 110px;
padding: 0 80px;
scroll-margin-top: 110px;
}
.edit-row--flip { direction: rtl; }
.edit-row--flip > * { direction: ltr; }
.edit-row-image { aspect-ratio: 4/3; overflow: hidden; }
.edit-row-image img { width: 100%; height: 100%; object-fit: cover; }
@media (hover: hover) {
.edit-row-image img { transition: transform 1.1s cubic-bezier(0.16,1,0.3,1), filter 0.6s ease; }
.edit-row-image:hover img { transform: scale(1.05); filter: brightness(1.04); }
}
.edit-row-kicker {
font-family: 'DM Sans', sans-serif;
font-size: 11px; letter-spacing: 3px; text-transform: uppercase;
color: var(--gold-ink);
display: flex; align-items: center; gap: 10px;
margin-bottom: 16px;
}
.edit-row-kicker::before {
content: ''; display: block; width: 20px; height: 1px;
background: var(--gold); opacity: 0.55;
}
.edit-row-title {
font-family: 'Playfair Display', serif;
font-size: clamp(26px, 2.6vw, 38px);
font-weight: 400; line-height: 1.15;
color: var(--dark); margin-bottom: 18px;
}
.edit-row-body {
font-family: 'DM Sans', sans-serif;
font-size: 15px; line-height: 1.85;
color: var(--muted); margin-bottom: 26px;
}
.edit-row-specs {
list-style: none;
display: grid; grid-template-columns: 1fr 1fr;
gap: 10px 28px;
margin-bottom: 30px;
}
.edit-row-specs li {
font-family: 'DM Sans', sans-serif;
font-size: 13px; color: var(--text);
padding-left: 16px; position: relative;
line-height: 1.6;
}
.edit-row-specs li::before {
content: ''; position: absolute; left: 0; top: 0.75em;
width: 8px; height: 1px; background: var(--gold);
}
.edit-row-link {
display: inline-flex; align-items: center; gap: 10px;
font-family: 'DM Sans', sans-serif;
font-size: 11px; letter-spacing: 2px; text-transform: uppercase;
color: var(--green); text-decoration: none;
transition: color 0.3s;
}
.edit-row-link:hover { color: var(--gold); }
.edit-row-link-line {
width: 20px; height: 1px; background: currentColor;
transition: width 0.4s cubic-bezier(0.16,1,0.3,1);
}
.edit-row-link:hover .edit-row-link-line { width: 44px; }
/* ─── CONVERSION BAND ─── */
.page-cta {
background: var(--dark);
padding: 120px 48px;
text-align: center;
position: relative;
overflow: hidden;
}
.page-cta::before {
content: '';
position: absolute; inset: 0;
background: radial-gradient(ellipse at 50% 120%, rgba(45, 90, 61,0.35) 0%, transparent 60%);
pointer-events: none;
}
.page-cta > .reveal { position: relative; }
.page-cta-title {
font-family: 'Playfair Display', serif;
font-size: clamp(30px, 4vw, 50px);
font-weight: 400; line-height: 1.15;
color: rgba(255,255,255,0.96);
margin-bottom: 18px;
}
.page-cta-title em { font-style: italic; color: var(--gold); }
.page-cta-sub {
font-family: 'DM Sans', sans-serif;
font-size: 15px; line-height: 1.85;
color: rgba(255,255,255,0.55);
max-width: 540px; margin: 0 auto 36px;
}
.page-cta-buttons {
display: flex; gap: 14px; justify-content: center; flex-wrap: wrap;
}
/* ─── SUBPAGE RESPONSIVE ─── */
@media (max-width: 1024px) {
.edit-row { grid-template-columns: 1fr; gap: 36px; padding: 0 40px; margin-bottom: 80px; }
.edit-row--flip { direction: ltr; }
.edit-rows { padding: 80px 0 20px; }
.page-hero { padding: 160px 40px 80px; }
}
@media (max-width: 768px) {
.edit-row-specs { grid-template-columns: 1fr; }
.page-hero { padding: 140px 24px 70px; }
.page-cta { padding: 90px 24px; }
}
@media (prefers-reduced-motion: reduce) {
.page-hero-inner { animation: none; }
}
/* ═══════════════════════════════════════════════════════════════════
EDITORIAL RESTRUCTURE — homepage sections introduced when the page
was cut from 19 sections to 7. Everything here leans on the existing
tokens (--green / --gold / --bg / --muted) and the established type
scale; no new palette, no new fonts.
═══════════════════════════════════════════════════════════════════ */
/* ── credibility strip (static — the count-up animation was removed) ── */
.stats-section--strip { padding: 44px 0; }
.stats-section--strip .stat-item { opacity: 1; transform: none; }
/* ── collections: honest tile for a category with no photograph yet ──
Wardrobes & Storage has no real asset. Rather than borrow an unrelated
workshop photo, the tile carries the brand ground and the name alone. */
.collection-card--noimage {
display: flex; align-items: flex-end;
background:
linear-gradient(160deg, rgba(45, 90, 61,0.96) 0%, rgba(22,29,24,0.98) 100%);
position: relative; overflow: hidden;
}
.collection-card--noimage::after {
content: ''; position: absolute; inset: 0;
background: repeating-linear-gradient(90deg,
rgba(255,255,255,0.05) 0 1px, transparent 1px 13px);
pointer-events: none;
}
.collection-card--noimage .collection-info { position: relative; z-index: 1; }
/* ── selected projects — three large, quiet frames ── */
.gallery-header { max-width: 1200px; margin: 0 auto 56px; padding: 0 80px; }
.selected-projects {
display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px;
max-width: 1400px; margin: 0 auto; padding: 0 80px;
overflow: hidden; /* masks the height animation */
}
.selected-project {
position: relative; display: block; overflow: hidden;
aspect-ratio: 4 / 5; text-decoration: none; background: var(--dark);
}
.selected-project img {
width: 100%; height: 100%; object-fit: cover; display: block;
transition: transform .9s cubic-bezier(.16,1,.3,1);
}
.selected-project:hover img { transform: scale(1.04); }
.selected-project::after {
content: ''; position: absolute; inset: 0; pointer-events: none;
background: linear-gradient(to top, rgba(14,18,15,0.78) 0%, rgba(14,18,15,0.12) 42%, transparent 66%);
}
.selected-project-info {
position: absolute; left: 26px; right: 26px; bottom: 24px; z-index: 1;
display: flex; flex-direction: column; gap: 4px;
}
.selected-project-kind {
font-family: 'Playfair Display', serif; font-size: 21px;
color: #fff; line-height: 1.2;
}
.selected-project-place {
font-family: 'DM Sans', sans-serif; font-size: 10px;
letter-spacing: 2.4px; text-transform: uppercase; color: var(--gold);
}
.gallery-cta { text-align: center; margin-top: 52px; }
/* ── craftsmanship + materials + story, one section ── */
.madewell-section { background: var(--bg); padding: 64px 0; }
.madewell-header { max-width: 780px; margin: 0 auto 64px; padding: 0 40px; text-align: center; }
.madewell-lede {
font-family: 'DM Sans', sans-serif; font-size: 16px; line-height: 1.9;
color: var(--muted); margin-top: 22px;
}
.madewell-stage {
display: grid; grid-template-columns: 1.62fr 1fr; gap: 20px;
max-width: 1400px; margin: 0 auto; padding: 0 80px; align-items: stretch;
}
.madewell-hero, .madewell-detail { margin: 0; overflow: hidden; background: var(--dark); }
.madewell-hero { aspect-ratio: 16 / 11; }
.madewell-hero img, .madewell-detail img {
width: 100%; height: 100%; object-fit: cover; display: block; filter: none;
}
.madewell-details { display: grid; grid-template-rows: 1fr 1fr; gap: 20px; }
.madewell-points {
display: grid; grid-template-columns: repeat(4, 1fr); gap: 40px;
max-width: 1400px; margin: 72px auto 0; padding: 0 80px; list-style: none;
}
.madewell-points li { border-top: 1px solid var(--border); padding-top: 22px; }
.madewell-point-n {
font-family: 'DM Sans', sans-serif; font-size: 10px; letter-spacing: 2.4px;
color: var(--gold-ink); display: block; margin-bottom: 14px;
}
.madewell-points h3 {
font-family: 'Playfair Display', serif; font-size: 19px; font-weight: 400;
color: var(--text); line-height: 1.3; margin: 0 0 10px;
}
.madewell-points p {
font-family: 'DM Sans', sans-serif; font-size: 14px; line-height: 1.8;
color: var(--muted); margin: 0;
}
.madewell-foot { text-align: center; margin-top: 64px; }
/* ── 3D visualisation{
display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center;
max-width: 1400px; margin: 96px auto 0; padding: 0 80px;
}
/* ── client reassurance: quiet reviews + one static client strip ── */
.testi-quiet {
display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px;
max-width: 1200px; margin: 0 auto; padding: 0 80px;
}
.testi-quiet-item {
margin: 0; padding: 30px 28px;
border: 1px solid rgba(255,255,255,0.14); background: rgba(255,255,255,0.03);
}
.client-strip {
max-width: 1200px; margin: 72px auto 0; padding: 30px 80px 0;
border-top: 1px solid rgba(255,255,255,0.14);
display: flex; flex-wrap: wrap; align-items: baseline; gap: 14px 26px;
}
.client-strip-label, .client-strip-link {
font-family: 'DM Sans', sans-serif; font-size: 10px;
letter-spacing: 2.4px; text-transform: uppercase;
}
.client-strip-label { color: var(--gold); }
.client-strip-link { color: rgba(255,255,255,0.72); text-decoration: none; margin-left: auto; }
.client-strip-link:hover { color: #fff; }
.client-strip-list {
display: flex; flex-wrap: wrap; gap: 8px 22px; list-style: none; margin: 0; padding: 0;
}
.client-strip-list li {
font-family: 'DM Sans', sans-serif; font-size: 13px;
color: rgba(255,255,255,0.62); white-space: nowrap;
}
/* ── showroom photograph above the consultation form ── */
.showroom-shot { margin: 0 auto 56px; max-width: 1200px; padding: 0 80px; }
.showroom-shot img {
width: 100%; aspect-ratio: 21 / 9; object-fit: cover; display: block;
}
.showroom-shot figcaption {
font-family: 'DM Sans', sans-serif; font-size: 11px; letter-spacing: 1.6px;
text-transform: uppercase; color: var(--muted); margin-top: 12px; text-align: center;
}
@media (max-width: 1024px) {
.selected-projects, .madewell-stage, .madewell-points, .testi-quiet { padding-left: 40px; padding-right: 40px; }
.gallery-header, .showroom-shot { padding-left: 40px; padding-right: 40px; }
.madewell-stage { grid-template-columns: 1fr; }
.madewell-details { grid-template-rows: none; grid-template-columns: 1fr 1fr; }
.madewell-points { grid-template-columns: repeat(2, 1fr); gap: 32px; }
.client-strip { padding-left: 40px; padding-right: 40px; }
}
@media (max-width: 768px) {
.selected-projects { grid-template-columns: 1fr; gap: 16px; }
.selected-project { aspect-ratio: 3 / 4; }
.madewell-section { padding: 52px 0; }
.madewell-points { grid-template-columns: 1fr; gap: 26px; margin-top: 48px; }
.testi-quiet { grid-template-columns: 1fr; gap: 20px; }
.client-strip { flex-direction: column; align-items: flex-start; }
.client-strip-link { margin-left: 0; }
.showroom-shot img { aspect-ratio: 4 / 3; }
.selected-projects, .madewell-stage, .madewell-points,
.testi-quiet, .gallery-header, .showroom-shot, .client-strip {
padding-left: 24px; padding-right: 24px;
}
}
/* ── MOBILE MENU — stacked, scrollable, with an explicit way out ──
Was a vertically-centred flex box: with six links at 36px plus the CTA it
overflowed on short phones with no way to scroll, and the only exit was the
hamburger behind the panel. Now it is a top-anchored scrollable column with
its own close button. */
.mobile-menu {
display: block;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
padding: 88px 28px calc(40px + env(safe-area-inset-bottom, 0px));
}
.mobile-menu-close {
position: absolute; top: 20px; right: 20px;
width: 44px; height: 44px; /* full touch target */
display: flex; align-items: center; justify-content: center;
background: none; border: 1px solid rgba(255,255,255,0.28);
border-radius: 50%; color: #fff; cursor: pointer;
transition: background .25s, border-color .25s;
}
.mobile-menu-close:hover,
.mobile-menu-close:focus-visible { background: rgba(255,255,255,0.12); border-color: rgba(255,255,255,0.5); }
.mobile-menu-links { text-align: left; margin: 0; padding: 0; }
.mobile-menu-links li { margin-bottom: 0; border-bottom: 1px solid rgba(255,255,255,0.1); }
.mobile-menu-links a {
display: block; padding: 18px 4px; /* comfortable tap height */
font-size: 26px; opacity: 0.92;
}
.mobile-menu-cta { margin-top: 32px; text-align: left; }
.mobile-menu-cta .btn-primary { display: block; width: 100%; text-align: center; }
/* ── REDUCED MOTION — content must be present and usable, never held at
opacity 0 waiting for an observer that will not animate. ── */
@media (prefers-reduced-motion: reduce) {
.reveal, .reveal-left, .reveal-right, .reveal-scale,
.stat-item, .craft-text, .gallery-item,
.collection-card, .selected-project, .testi-quiet-item {
opacity: 1 !important;
transform: none !important;
transition: none !important;
}
.mobile-menu { transition: none !important; }
.selected-project:hover img { transform: none; }
}
/* The closed menu sits at translateX(100%), which still contributed to
document scrollWidth (a horizontal overflow on some pages) and left its
links focusable behind the page. Make it genuinely inert when closed. */
.mobile-menu {
visibility: hidden;
pointer-events: none;
transition: transform 0.45s cubic-bezier(0.16,1,0.3,1), visibility 0s linear 0.45s;
}
.mobile-menu.open {
visibility: visible;
pointer-events: auto;
transition: transform 0.45s cubic-bezier(0.16,1,0.3,1), visibility 0s;
}
html, body { overflow-x: hidden; }
/* ── MATERIALS & FINISHES ─────────────────────────────────────────────
This section's markup shipped with no CSS and no behaviour at all, so it
rendered as raw unstyled text. Rebuilt here.
It deliberately does NOT show photographs. The four images it originally
carried were unrelated stock pieces sitting under the headline "The Same
Piece, Four Different Stories" — a claim they did not support, and their
own markup comments flagged them as placeholders for mat-oak.jpg etc.
which were never supplied. The swatch colours, names and descriptions are
real, so the comparison is built from those. Drop the four photographs in
and this can become a true same-piece-four-finishes switcher. */
.materials-section { background: var(--bg); padding: 120px 0; }
.materials-inner {
display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center;
max-width: 1400px; margin: 0 auto; padding: 0 80px;
/* Named areas so the concept caption can sit under the images without
becoming a third column. */
grid-template-areas: "stage copy" "note copy";
grid-template-rows: auto auto;
}
.materials-stage { grid-area: stage; }
.materials-content { grid-area: copy; }
.materials-inner > .concept-note { grid-area: note; }
.materials-stage { position: relative; aspect-ratio: 4 / 5; overflow: hidden; background: var(--dark); }
.finish-panel {
position: absolute; inset: 0;
display: flex; flex-direction: column; justify-content: flex-end;
padding: 40px;
background:
linear-gradient(180deg, rgba(0,0,0,0.05) 0%, rgba(0,0,0,0.42) 100%),
var(--finish);
opacity: 0; visibility: hidden;
transition: opacity .55s cubic-bezier(.16,1,.3,1), visibility 0s linear .55s;
}
.finish-panel.is-active { opacity: 1; visibility: visible; transition: opacity .55s cubic-bezier(.16,1,.3,1), visibility 0s; }
.finish-panel-name {
font-family: 'Playfair Display', serif; font-size: clamp(26px, 3.4vw, 40px);
color: #fff; line-height: 1.15;
}
.finish-panel-desc {
font-family: 'DM Sans', sans-serif; font-size: 11px; letter-spacing: 2.6px;
text-transform: uppercase; color: rgba(255,255,255,0.82); margin-top: 10px;
}
.materials-title {
font-family: 'Playfair Display', serif; font-weight: 400;
font-size: clamp(28px, 3.6vw, 46px); line-height: 1.15;
color: var(--text); margin: 16px 0 20px;
}
.materials-title em { font-style: italic; color: var(--dark); }
.materials-body {
font-family: 'DM Sans', sans-serif; font-size: 15px; line-height: 1.9;
color: var(--muted); margin-bottom: 32px;
}
.swatch-tabs { display: flex; flex-direction: column; gap: 0; margin-bottom: 34px; }
.swatch-tab {
display: flex; align-items: center; gap: 16px;
width: 100%; padding: 15px 8px; cursor: pointer;
background: none; border: none; border-bottom: 1px solid var(--border);
text-align: left; transition: background .25s, padding-left .25s;
}
.swatch-tab:first-child { border-top: 1px solid var(--border); }
.swatch-tab:hover { background: rgba(45, 90, 61,0.045); padding-left: 14px; }
.swatch-tab.active { background: rgba(45, 90, 61,0.07); padding-left: 14px; }
.swatch-chip {
width: 34px; height: 34px; border-radius: 50%; flex: 0 0 34px;
box-shadow: inset 0 0 0 1px rgba(0,0,0,0.14);
transition: transform .25s, box-shadow .25s;
}
.swatch-tab.active .swatch-chip { transform: scale(1.12); box-shadow: inset 0 0 0 1px rgba(0,0,0,0.2), 0 0 0 2px var(--gold); }
.swatch-text { display: flex; flex-direction: column; gap: 3px; }
.swatch-name { font-family: 'Playfair Display', serif; font-size: 17px; color: var(--text); }
.swatch-desc {
font-family: 'DM Sans', sans-serif; font-size: 10px; letter-spacing: 2px;
text-transform: uppercase; color: var(--muted);
}
.materials-cta {
display: inline-flex; align-items: center; gap: 14px; text-decoration: none;
font-family: 'DM Sans', sans-serif; font-size: 11px; letter-spacing: 2.6px;
text-transform: uppercase; color: var(--green);
}
.materials-cta-line { width: 34px; height: 1px; background: var(--gold); transition: width .3s; }
.materials-cta:hover .materials-cta-line { width: 52px; }
@media (max-width: 1024px) {
.materials-inner {
grid-template-columns: 1fr; gap: 40px; padding: 0 40px;
grid-template-areas: "stage" "note" "copy";
}
.materials-stage { aspect-ratio: 16 / 10; }
}
@media (max-width: 768px) {
.materials-section { padding: 80px 0; }
.materials-inner { padding: 0 24px; }
.materials-stage { aspect-ratio: 4 / 3; }
.finish-panel { padding: 26px; }
}
@media (prefers-reduced-motion: reduce) {
.finish-panel, .swatch-tab, .swatch-chip, .materials-cta-line { transition: none !important; }
}
/* ── WARDROBE STYLES GALLERY (Collections) ──────────────────────────
Real photographs of wardrobes the workshop has built. Captions describe
what is visible — finish and door type — rather than claiming a location,
because the source images came without one. */
.wstyles-section { background: var(--bg); padding: 110px 0; }
.wstyles-header { max-width: 820px; margin: 0 auto 56px; padding: 0 80px; text-align: center; }
.wstyles-title {
font-family: 'Playfair Display', serif; font-weight: 400;
font-size: clamp(26px, 3.4vw, 44px); line-height: 1.16;
color: var(--text); margin: 16px 0 18px;
}
.wstyles-title em { font-style: italic; color: var(--dark); }
.wstyles-lede {
font-family: 'DM Sans', sans-serif; font-size: 15px; line-height: 1.9; color: var(--muted);
}
.wstyles-grid {
display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px;
max-width: 1400px; margin: 0 auto; padding: 0 80px;
}
.wstyle { margin: 0; }
.wstyle img {
width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block;
background: var(--dark); filter: none;
transition: transform .8s cubic-bezier(.16,1,.3,1);
}
.wstyle:hover img { transform: scale(1.03); }
.wstyle { overflow: hidden; }
.wstyle figcaption {
display: flex; align-items: baseline; justify-content: space-between;
gap: 12px; padding: 14px 2px 0; border-top: 1px solid var(--border); margin-top: 14px;
}
.wstyle-name { font-family: 'Playfair Display', serif; font-size: 17px; color: var(--text); }
.wstyle-note {
font-family: 'DM Sans', sans-serif; font-size: 10px; letter-spacing: 1.8px;
text-transform: uppercase; color: var(--muted); text-align: right;
}
.wstyles-foot { text-align: center; margin-top: 56px; }
@media (max-width: 1024px) {
.wstyles-grid { grid-template-columns: repeat(2, 1fr); padding: 0 40px; }
.wstyles-header { padding: 0 40px; }
}
@media (max-width: 768px) {
.wstyles-section { padding: 76px 0; }
.wstyles-grid { grid-template-columns: 1fr; gap: 26px; padding: 0 24px; }
.wstyles-header { padding: 0 24px; }
.wstyle figcaption { flex-direction: column; gap: 4px; }
.wstyle-note { text-align: left; }
}
@media (prefers-reduced-motion: reduce) { .wstyle:hover img { transform: none; } }
/* ── CURRENT PAGE INDICATOR ───────────────────────────────────────────
The hover underline, made permanent on the page you are on. Marked
statically with aria-current="page" in each file rather than by script,
so there is no flash of an unmarked nav on load and it survives JS
failing. aria-current is also what screen readers announce.
Deliberately GOLD, where hover is green: a green line that never
retracts reads as a stuck hover state, while the gold accent reads as
a location. Hovering the current link still shifts it to green, so the
body > nav never feels inert. */
.nav-links a[aria-current="page"] {
color: var(--green);
}
.nav-links a[aria-current="page"]::after {
width: 100%;
left: 0;
height: 1.5px;
background: var(--gold);
}
/* Over the hero, where the nav sits on the photograph */
body > nav.hero-mode .nav-links > li > a[aria-current="page"] { color: #fff; }
body > nav.hero-mode .nav-links > li > a[aria-current="page"]::after { background: var(--gold); }
/* Hover still wins, so the link does not feel dead */
.nav-links a[aria-current="page"]:hover::after { background: var(--green); }
body > nav.hero-mode .nav-links > li > a[aria-current="page"]:hover::after { background: #fff; }
/* Mobile menu — a gold rule and a brighter label mark the current page.
The panel has no hover to borrow from, so the marker carries it alone. */
.mobile-menu-links a[aria-current="page"] {
opacity: 1;
padding-left: 16px;
border-left: 2px solid var(--gold);
}
@media (prefers-reduced-motion: reduce) {
.nav-links a::after { transition: none !important; }
}
/* ── TAP TARGETS ──────────────────────────────────────────────────────
Two controls were below the WCAG 2.5.8 minimum of 24x24 CSS px.
Both fixes enlarge the hit area only — the bars and icons render
exactly as before. */
/* The hamburger measured 32x23: three 1.5px bars, 5px gaps, 4px padding.
It is THE navigation control on a phone, so it gets a full 44x44 box.
The bars keep their own geometry, so the open-state X still forms from
the same translateY(6.5px) rotations. */
.hamburger {
width: 44px;
height: 44px;
padding: 0;
align-items: center; /* keeps the 24px bars centred in the wider box */
justify-content: center; /* and centred vertically */
}
/* Footer social icons were 20x20, sized by their SVG with no padding.
Each link becomes a 40x40 box with the icon centred; the row is pulled
back by 10px so the first icon stays aligned with the text above it,
and the gap drops to 4px so the enlarged boxes do not overlap — two
adjacent 44px hit areas would have made taps ambiguous. */
.footer-socials { gap: 4px; margin-left: -10px; }
.footer-social-link {
width: 40px;
height: 40px;
justify-content: center; /* it is already display:flex + align-items:center */
}
/* ═══════════════════════════════════════════════════════════════════
COLLECTIONS — EDITORIAL BROWSE (index → category → design)
Quiet, light-ground layout: a two-column header, a two-up image grid
with the name set below the photograph rather than over it, and a
hairline rule carrying the action. Uses only the existing tokens —
--bg ground, --green headings and rules, --gold accent, --muted body.
═══════════════════════════════════════════════════════════════════ */
.cbrowse { background: var(--bg); padding: 72px 0 110px; }
.cbrowse-back {
max-width: 1400px; margin: 0 auto 44px; padding: 0 80px;
}
.cbrowse-back a {
font-family: 'DM Sans', sans-serif; font-size: 13px;
color: var(--green); text-decoration: none;
display: inline-flex; align-items: center; gap: 9px;
}
.cbrowse-back a:hover { color: var(--gold); }
/* two-column header: display title left, orienting copy right */
.cbrowse-head {
max-width: 1400px; margin: 0 auto 56px; padding: 0 80px;
display: grid; grid-template-columns: 1.15fr 1fr; gap: 64px; align-items: start;
}
.cbrowse-kicker {
font-family: 'DM Sans', sans-serif; font-size: 11px; letter-spacing: 3px;
text-transform: uppercase; color: var(--muted); display: block; margin-bottom: 20px;
}
.cbrowse-title {
font-family: 'Playfair Display', serif; font-weight: 400;
font-size: clamp(38px, 5.2vw, 72px); line-height: 1.04;
color: var(--dark); margin: 0; letter-spacing: -0.5px;
}
.cbrowse-lede {
font-family: 'DM Sans', sans-serif; font-size: 16px; line-height: 1.78;
color: var(--muted); margin: 0; padding-top: 12px; max-width: 46ch;
}
.cbrowse-lede--right { text-align: right; margin-left: auto; }
/* the grid of cards */
.cbrowse-grid {
max-width: 1400px; margin: 0 auto; padding: 0 80px;
display: grid; grid-template-columns: 1fr 1fr; gap: 64px 44px;
}
.ccard { display: block; text-decoration: none; }
.ccard-frame { overflow: hidden; background: var(--dark); }
.ccard-frame img {
width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block;
filter: none; transition: transform 1s cubic-bezier(.16,1,.3,1);
}
.ccard:hover .ccard-frame img { transform: scale(1.035); }
.ccard-name {
font-family: 'Playfair Display', serif; font-weight: 400;
font-size: clamp(24px, 2.5vw, 34px); line-height: 1.2;
color: var(--dark); margin: 26px 0 0;
}
.ccard-action {
display: flex; align-items: center; justify-content: space-between; gap: 16px;
margin-top: 18px; padding-bottom: 14px;
border-bottom: 1px solid var(--border);
font-family: 'DM Sans', sans-serif; font-size: 12px; letter-spacing: 1.4px;
color: var(--text);
transition: border-color .35s, color .35s;
}
.ccard-action span:last-child { transition: transform .35s cubic-bezier(.16,1,.3,1); }
.ccard:hover .ccard-action { border-bottom-color: var(--green); color: var(--green); }
.ccard:hover .ccard-action span:last-child { transform: translateX(6px); }
/* ── design detail ── */
.design-main {
max-width: 1400px; margin: 0 auto; padding: 0 80px;
display: grid;
/* One composition: the photograph and everything a visitor needs to act
on it, side by side, so the title, the picture and the enquiry button
are on screen together at 1440x900. Areas rather than source order,
because the phone wants title → picture → detail and the desktop
wants the picture beside all three. */
grid-template-columns: 58fr 42fr;
grid-template-areas: "image head" "image info";
grid-template-rows: auto 1fr;
column-gap: 64px; row-gap: 28px; align-items: start;
}
.design-head { grid-area: head; }
.design-views { grid-area: image; }
.design-aside { grid-area: info; }
.design-title {
font-family: 'Playfair Display', serif; font-weight: 400;
font-size: clamp(32px, 3.4vw, 54px); line-height: 1.05;
color: var(--dark); margin: 0; letter-spacing: -0.5px;
}
.design-desc {
font-family: 'DM Sans', sans-serif; font-size: 16px; line-height: 1.7;
color: var(--muted); margin: 14px 0 0; max-width: 46ch;
}
.design-figure { margin: 0; overflow: hidden; background: var(--dark); }
.design-figure img { width: 100%; display: block; object-fit: cover; filter: none; }
.design-aside { padding-top: 4px; }
.design-aside-title {
font-family: 'Playfair Display', serif; font-weight: 400;
font-size: clamp(26px, 3vw, 40px); line-height: 1.15;
color: var(--dark); margin: 0 0 18px;
}
.design-aside p {
font-family: 'DM Sans', sans-serif; font-size: 16px; line-height: 1.85;
color: var(--muted); margin: 0 0 6px;
}
.design-aside-rule { height: 1px; background: var(--border); margin: 26px 0 20px; }
.design-facets {
font-family: 'DM Sans', sans-serif; font-size: 13px; letter-spacing: .4px;
color: var(--text);
}
/* ── the green conversation band that closes a design page ── */
.convo-band { background: var(--green); padding: 46px 0; }
.convo-band-inner {
max-width: 1400px; margin: 0 auto; padding: 0 80px;
display: flex; align-items: baseline; justify-content: space-between; gap: 32px;
}
.convo-band-title {
font-family: 'Playfair Display', serif; font-weight: 400;
font-size: clamp(22px, 2.6vw, 34px); line-height: 1.2;
color: #fff; margin: 0;
}
.convo-band-link {
font-family: 'DM Sans', sans-serif; font-size: 11px; letter-spacing: 2.6px;
text-transform: uppercase; color: rgba(255,255,255,0.86);
text-decoration: none; white-space: nowrap;
border-bottom: 1px solid rgba(255,255,255,0.4); padding-bottom: 4px;
transition: color .3s, border-color .3s;
}
.convo-band-link:hover { color: #fff; border-bottom-color: var(--gold); }
@media (max-width: 1024px) {
.cbrowse-back, .cbrowse-head, .cbrowse-grid, .cbrowse-aside, .cbrowse-more,
.design-main, .convo-band-inner {
padding-left: 40px; padding-right: 40px;
}
.cbrowse-head { grid-template-columns: 1fr; gap: 24px; }
.cbrowse-lede--right { text-align: left; margin-left: 0; }
.cbrowse-grid { gap: 48px 28px; }
/* Title, then the furniture, then the detail and the action. */
.design-main {
grid-template-columns: 1fr;
grid-template-areas: "head" "image" "info";
grid-template-rows: auto auto auto;
column-gap: 0; row-gap: 28px;
}
.design-aside { padding-top: 0; }
.design-desc { max-width: none; }
}
@media (max-width: 768px) {
.cbrowse { padding: 48px 0 76px; }
.cbrowse-back, .cbrowse-head, .cbrowse-grid, .cbrowse-aside, .cbrowse-more,
.design-main, .convo-band-inner {
padding-left: 24px; padding-right: 24px;
}
.cbrowse-grid { grid-template-columns: 1fr; gap: 44px; }
.ccard-name { margin-top: 20px; }
.convo-band-inner { flex-direction: column; align-items: flex-start; gap: 18px; }
}
@media (prefers-reduced-motion: reduce) {
.ccard:hover .ccard-frame img { transform: none; }
.ccard:hover .ccard-action span:last-child { transform: none; }
}
/* Back link and band link are primary navigation on these pages, so they
carry their own tap height rather than relying on line-height. */
.cbrowse-back a { padding: 11px 0; min-height: 44px; box-sizing: border-box; }
.convo-band-link { padding-top: 12px; padding-bottom: 12px; display: inline-block; }
.ccard-action { min-height: 26px; }
/* ── CATALOGUE NAVIGATION ─────────────────────────────────────────────
Breadcrumb, subcategory filter chips, and piece-to-piece paging. The
point is that you always know where you are and can get back up in one
click, without the page reloading to change a filter. */
.crumbs {
max-width: 1400px; margin: 0 auto 34px; padding: 0 80px;
display: flex; align-items: center; flex-wrap: wrap; gap: 10px;
font-family: 'DM Sans', sans-serif; font-size: 12px; letter-spacing: .3px;
}
.crumbs a { color: var(--muted); text-decoration: none; padding: 10px 0; transition: color .25s; }
.crumbs a:hover { color: var(--green); }
.crumbs span[aria-current] { color: var(--text); }
.crumbs .crumb-sep { color: var(--sand); }
/* subcategory chips — filter in place, no page load */
.subfilter {
max-width: 1400px; margin: 0 auto 44px; padding: 0 80px;
display: flex; flex-wrap: wrap; gap: 10px;
}
.subchip {
font-family: 'DM Sans', sans-serif; font-size: 11px; letter-spacing: 1.6px;
text-transform: uppercase; color: var(--muted);
background: none; border: 1px solid var(--border); cursor: pointer;
padding: 11px 18px; min-height: 40px; border-radius: 999px;
transition: color .25s, border-color .25s, background .25s;
}
.subchip:hover { color: var(--green); border-color: var(--green); }
.subchip[aria-pressed="true"] {
color: #fff; background: var(--green); border-color: var(--green);
}
.subcount {
font-family: 'DM Sans', sans-serif; font-size: 11px; letter-spacing: 1.6px;
text-transform: uppercase; color: var(--muted);
max-width: 1400px; margin: 0 auto 22px; padding: 0 80px;
}
.ccard[hidden] { display: none !important; }
/* piece-to-piece paging on a design page */
.piecenav {
max-width: 1400px; margin: 72px auto 0; padding: 30px 80px 0;
border-top: 1px solid var(--border);
display: flex; align-items: stretch; justify-content: space-between; gap: 24px;
}
.piecenav-link {
display: flex; flex-direction: column; gap: 6px; text-decoration: none;
padding: 8px 0; min-height: 44px; max-width: 46%;
}
.piecenav-link--next { text-align: right; margin-left: auto; align-items: flex-end; }
.piecenav-dir {
font-family: 'DM Sans', sans-serif; font-size: 10px; letter-spacing: 2.4px;
text-transform: uppercase; color: var(--gold-ink);
}
.piecenav-name {
font-family: 'Playfair Display', serif; font-size: 19px; color: var(--dark);
line-height: 1.25; transition: color .25s;
}
.piecenav-link:hover .piecenav-name { color: var(--text); }
.piecenav-hint {
font-family: 'DM Sans', sans-serif; font-size: 10px; letter-spacing: 1.6px;
text-transform: uppercase; color: var(--muted); text-align: center;
align-self: center; white-space: nowrap;
}
/* collections dropdown in the main nav */
.nav-has-menu { position: relative; }
.nav-drop {
position: absolute; top: 100%; left: 50%; transform: translateX(-50%) translateY(8px);
min-width: 230px; padding: 10px 0; margin-top: 14px;
background: var(--bg); border: 1px solid var(--border);
box-shadow: 0 18px 44px rgba(34,30,24,.13);
opacity: 0; visibility: hidden; pointer-events: none;
transition: opacity .25s, transform .25s cubic-bezier(.16,1,.3,1), visibility 0s linear .25s;
z-index: 1200;
}
.nav-has-menu:hover .nav-drop,
.nav-has-menu:focus-within .nav-drop {
opacity: 1; visibility: visible; pointer-events: auto;
transform: translateX(-50%) translateY(0);
transition: opacity .25s, transform .25s cubic-bezier(.16,1,.3,1), visibility 0s;
}
.nav-drop a {
display: block; padding: 11px 22px;
font-family: 'DM Sans', sans-serif; font-size: 12px; letter-spacing: .6px;
text-transform: none; color: var(--text); white-space: nowrap;
}
.nav-drop a:hover { background: var(--green-pale); color: var(--green); }
.nav-drop a::after { display: none; }
@media (max-width: 1024px) {
.crumbs, .subfilter, .subcount, .piecenav { padding-left: 40px; padding-right: 40px; }
}
@media (max-width: 768px) {
.crumbs, .subfilter, .subcount, .piecenav { padding-left: 24px; padding-right: 24px; }
.crumbs { font-size: 11px; gap: 7px; }
.piecenav { flex-direction: column; gap: 18px; margin-top: 52px; }
.piecenav-link, .piecenav-link--next { max-width: 100%; align-items: flex-start; text-align: left; margin-left: 0; }
.piecenav-hint { display: none; }
.subfilter { gap: 8px; }
}
@media (prefers-reduced-motion: reduce) {
.nav-drop { transition: none !important; }
}
/* ── HEADER: light by default, dark only over a dark hero ────────────
The bar used to be dark translucent in its base state — fine over the
homepage hero photograph, but on the light catalogue pages it rendered
as a murky slab that then lightened at 80px of scroll. That "dark, then
suddenly lighter" step is what it looked like. The dark treatment now
belongs to .hero-mode, which JS only applies where a genuinely dark
hero sits behind the bar, so light pages start light and stay light. */
body > nav.hero-mode {
background: rgba(14, 10, 6, 0.28);
border-color: rgba(255,255,255,0.09);
box-shadow: none;
}
/* Resting state on a light page: quiet, not floating */
body > nav:not(.hero-mode):not(.scrolled) {
border-color: var(--border);
box-shadow: 0 1px 0 rgba(34,30,24,0.04);
}
/* ── CATALOGUE PAGES: clear the fixed header ─────────────────────────
The header's lower edge sits at ~88px. The breadcrumb was at 72px, so it
was tucked behind the bar — visible but unreachable. */
.cbrowse { padding-top: 132px; }
.crumbs { scroll-margin-top: 120px; }
/* ── BREADCRUMB: quieter type, clearer way back ── */
.crumbs {
font-size: 11px; letter-spacing: 1.7px; text-transform: uppercase;
gap: 12px; margin-bottom: 38px;
}
.crumbs a { color: var(--muted); }
.crumbs a:first-child::before { content: '\2190'; margin-right: 8px; opacity: .75; }
.crumbs a:hover { color: var(--gold-ink); }
.crumbs span[aria-current] { color: var(--text); }
.crumbs .crumb-sep { opacity: .55; }
@media (max-width: 1024px) { .cbrowse { padding-top: 120px; } }
@media (max-width: 768px) { .cbrowse { padding-top: 104px; } .crumbs { margin-bottom: 26px; } }
/* ── FILTER BAR, REFORMATTED ──────────────────────────────────────────
Was a row of rounded pills carrying counts — ALL (41), SOFAS (22) — which
is the faceted-search pattern every furniture retailer uses, and read as
shopping rather than as an atelier. Same function, different idiom: a
typographic contents line, small-caps and letterspaced like the rest of
the site's micro-type, with the current view marked by the same gold rule
the main nav uses for the current page. No pills, no counts.
The live region that announces how many pieces are showing is kept for
screen readers via .sr-only — useful when filtering, just no longer a
visible inventory figure. */
.sr-only {
position: absolute !important; width: 1px; height: 1px;
padding: 0; margin: -1px; overflow: hidden;
clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}
.subfilter {
gap: 0 38px;
align-items: baseline;
border-bottom: 1px solid var(--border);
padding-bottom: 0;
margin-bottom: 52px;
}
.subchip {
position: relative;
border: none; border-radius: 0; background: none;
padding: 0 0 16px; min-height: 0;
font-size: 11px; letter-spacing: 2.2px; text-transform: uppercase;
color: var(--muted);
transition: color .3s;
}
/* the rule grows from the centre, as the nav links do */
.subchip::after {
content: ''; position: absolute; left: 50%; bottom: -1px;
width: 0; height: 1.5px; background: var(--gold);
transition: width .35s cubic-bezier(.16,1,.3,1), left .35s cubic-bezier(.16,1,.3,1);
}
.subchip:hover { color: var(--text); }
.subchip:hover::after { width: 100%; left: 0; background: var(--green); }
.subchip[aria-pressed="true"] {
color: var(--text); background: none;
}
.subchip[aria-pressed="true"]::after { width: 100%; left: 0; background: var(--gold); }
.subchip:focus-visible { outline: 2px solid var(--green); outline-offset: 4px; }
@media (max-width: 768px) {
/* a scrollable single line rather than a wrapped block of pills */
.subfilter {
gap: 0 26px; margin-bottom: 36px;
flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none;
-webkit-overflow-scrolling: touch;
}
.subfilter::-webkit-scrollbar { display: none; }
.subchip { flex: 0 0 auto; padding-bottom: 13px; font-size: 10px; letter-spacing: 1.8px; }
}
@media (prefers-reduced-motion: reduce) { .subchip::after { transition: none !important; } }
/* Chips are a thin line of type, so on a phone they need deliberate height
to be thumb-friendly — added above the label, which keeps the underline
sitting on the bar's own rule. */
@media (max-width: 768px) {
.subchip { padding-top: 14px; }
}
/* ── ONE DESIGN, FOUR EXPRESSIONS ─────────────────────────────────────
Replaces the colour-field version of this section. That one existed only
because the four photographs it needed had never been supplied — its own
markup comments asked for mat-oak.jpg and friends. They exist now, and
they are genuinely the same corner sofa in four materials and four
settings, so the claim in the heading is finally true and the stage can
carry photographs instead of swatches. Layout and rhythm unchanged. */
.materials-stage { aspect-ratio: 4 / 3; }
.setting-panel {
position: absolute; inset: 0; margin: 0; overflow: hidden;
opacity: 0; visibility: hidden;
transition: opacity .7s cubic-bezier(.16,1,.3,1), visibility 0s linear .7s;
}
.setting-panel.is-active {
opacity: 1; visibility: visible;
transition: opacity .7s cubic-bezier(.16,1,.3,1), visibility 0s;
}
.setting-panel img {
width: 100%; height: 100%; object-fit: cover; display: block;
filter: none;
transform: scale(1.015);
transition: transform 8s linear;
}
.setting-panel.is-active img { transform: scale(1); }
.setting-panel figcaption {
position: absolute; left: 0; right: 0; bottom: 0; z-index: 1;
padding: 44px 40px 34px;
display: flex; flex-direction: column; gap: 8px;
background: linear-gradient(to top,
rgba(18,14,10,0.72) 0%, rgba(18,14,10,0.34) 46%, transparent 100%);
pointer-events: none;
}
.setting-panel-name {
font-family: 'Playfair Display', serif; font-size: clamp(24px, 2.8vw, 36px);
color: #fff; line-height: 1.12;
}
.setting-panel-spec {
font-family: 'DM Sans', sans-serif; font-size: 10px; letter-spacing: 2.6px;
/* Full white, not 0.86: the Penthouse photograph behind this line is the
brightest of the four and the only one where the caption fell short. */
text-transform: uppercase; color: #fff;
}
/* the setting list — rows, not swatches */
.setting-tabs { display: flex; flex-direction: column; margin-bottom: 36px; }
.setting-tab {
display: flex; flex-direction: column; gap: 5px; align-items: flex-start;
width: 100%; padding: 17px 0 17px 20px; cursor: pointer; text-align: left;
background: none; border: none; border-bottom: 1px solid var(--border);
border-left: 2px solid transparent;
transition: border-left-color .35s, padding-left .35s, background .35s;
}
.setting-tab:first-child { border-top: 1px solid var(--border); }
.setting-tab:hover { border-left-color: var(--sand); padding-left: 26px; }
.setting-tab.active {
border-left-color: var(--gold);
background: linear-gradient(90deg, rgba(179,154,88,0.07) 0%, transparent 60%);
padding-left: 26px;
}
.setting-tab:focus-visible { outline: 2px solid var(--green); outline-offset: 3px; }
.setting-tab-name {
font-family: 'Playfair Display', serif; font-size: 19px; color: var(--text);
line-height: 1.2; transition: color .3s;
}
.setting-tab.active .setting-tab-name { color: var(--green); }
.setting-tab-spec {
font-family: 'DM Sans', sans-serif; font-size: 9.5px; letter-spacing: 2.1px;
text-transform: uppercase; color: var(--muted);
}
.setting-tab.active .setting-tab-spec { color: var(--gold-ink); }
@media (max-width: 1024px) { .materials-stage { aspect-ratio: 16 / 11; } }
@media (max-width: 768px) {
.materials-stage { aspect-ratio: 4 / 3; }
.setting-panel figcaption { padding: 34px 24px 24px; }
.setting-tab { padding: 15px 0 15px 16px; }
.setting-tab:hover, .setting-tab.active { padding-left: 20px; }
}
@media (prefers-reduced-motion: reduce) {
.setting-panel, .setting-panel img, .setting-tab { transition: none !important; }
.setting-panel img { transform: none !important; }
}
/* ── COLLECTIONS DROPDOWN: stop it vanishing ───────────────────────────
The panel sat 14px below its trigger with nothing in between, so moving
the pointer toward it crossed a dead gap, :hover was lost, and it shut
instantly. An invisible bridge now covers that gap, so the pointer never
leaves a hoverable area on its way down. */
.nav-drop::before {
content: '';
position: absolute; left: 0; right: 0;
top: -16px; height: 16px; /* spans the margin-top gap */
}
/* A slightly wider catch area either side, so a diagonal approach holds too */
.nav-has-menu::after {
content: '';
position: absolute; left: -14px; right: -14px; top: 100%; height: 22px;
pointer-events: none;
}
.nav-has-menu:hover::after { pointer-events: auto; }
/* Held open while JS says so — covers the close delay and touch taps */
.nav-has-menu.is-open .nav-drop {
opacity: 1; visibility: visible; pointer-events: auto;
transform: translateX(-50%) translateY(0);
transition: opacity .25s, transform .25s cubic-bezier(.16,1,.3,1), visibility 0s;
}
/* On a touch screen there is no hover at all, so the first tap opens it.
The caret makes it clear the item has more beneath it.
Collections keeps the same underline as every other link — the one
under the current page and the one on hover. It used to be switched off
here to make room for the caret; the menu bar hides the caret now
(THE MENU BAR), and switching it off only lost the "you are here" line
on Collections pages (28 Sep 2026). */
.nav-drop-caret {
display: inline-block; margin-left: 7px; font-size: 9px; line-height: 1;
transition: transform .3s;
}
.nav-has-menu.is-open .nav-drop-caret { transform: rotate(180deg); }
/* ── THE DROPDOWN OVER A DARK HERO ───────────────────────────────────
The panel was built for the light catalogue pages. Opened from the
homepage — where the bar is smoked glass over the photograph — a cream
block dropped out of a dark header and read as a foreign object, and
its links inherited the header's white text, leaving them all but
invisible on cream. Over a dark hero the panel now becomes smoked glass
itself, so it reads as the bar extending downward rather than a card
landing on top of it. */
body > nav.hero-mode .nav-drop {
background: rgba(18, 14, 10, 0.86);
backdrop-filter: blur(22px);
-webkit-backdrop-filter: blur(22px);
border-color: rgba(255,255,255,0.14);
box-shadow: 0 22px 54px rgba(0,0,0,0.38);
}
body > nav.hero-mode .nav-drop a { color: rgba(255,255,255,0.82); }
body > nav.hero-mode .nav-drop a:hover,
body > nav.hero-mode .nav-drop a:focus-visible {
background: rgba(255,255,255,0.07);
color: #fff;
}
/* The current collection keeps its gold mark in both treatments */
body > nav.hero-mode .nav-drop a[aria-current="page"] { color: var(--gold); }
/* Panel and bar change together as the hero scrolls away */
.nav-drop { transition: opacity .25s, transform .25s cubic-bezier(.16,1,.3,1),
visibility 0s linear .25s, background .5s ease, border-color .5s ease; }
.nav-drop a { transition: background .2s ease, color .2s ease; }
/* ── MULTI-VIEW PIECES ────────────────────────────────────────────────
Several photographs turned out to be the same work from different
angles — four of the thirteen kitchens were one cream fretwork kitchen,
four more were one classical cream-and-gold kitchen — and they were
listed as separate pieces. They are now one piece with several views:
the stage cross-fades, and a thumbnail rail sits beneath it. */
.design-views { display: flex; flex-direction: column; gap: 14px; }
.view-stage {
position: relative; aspect-ratio: 4 / 3;
overflow: hidden; background: var(--dark);
}
.view-panel {
position: absolute; inset: 0; margin: 0;
opacity: 0; visibility: hidden;
transition: opacity .55s cubic-bezier(.16,1,.3,1), visibility 0s linear .55s;
}
.view-panel.is-active {
opacity: 1; visibility: visible;
transition: opacity .55s cubic-bezier(.16,1,.3,1), visibility 0s;
}
.view-panel img { width: 100%; height: 100%; object-fit: cover; display: block; filter: none; }
.view-thumbs { display: flex; gap: 10px; flex-wrap: wrap; }
.view-thumb {
flex: 1 1 0; min-width: 92px; max-width: 150px;
display: flex; flex-direction: column; gap: 7px;
padding: 0; background: none; border: none; cursor: pointer; text-align: left;
}
.view-thumb img {
width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block;
filter: none; opacity: .52;
border-bottom: 2px solid transparent;
transition: opacity .3s, border-color .3s;
}
.view-thumb:hover img { opacity: .82; }
.view-thumb.active img { opacity: 1; border-bottom-color: var(--gold); }
.view-thumb-cap {
font-family: 'DM Sans', sans-serif; font-size: 9.5px; letter-spacing: 1.5px;
text-transform: uppercase; color: var(--muted); line-height: 1.4;
transition: color .3s;
}
.view-thumb.active .view-thumb-cap { color: var(--text); }
.view-thumb:focus-visible { outline: 2px solid var(--green); outline-offset: 3px; }
/* a quiet note on the grid card that a piece has more than one photograph */
.ccard-frame { position: relative; }
.ccard-views {
position: absolute; right: 14px; bottom: 14px;
font-family: 'DM Sans', sans-serif; font-size: 9px; letter-spacing: 1.8px;
text-transform: uppercase; color: #fff;
padding: 6px 10px; background: rgba(18,14,10,0.52);
backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
@media (max-width: 768px) {
.view-thumb { min-width: 74px; }
.view-thumb-cap { font-size: 8.5px; letter-spacing: 1.2px; }
}
@media (prefers-reduced-motion: reduce) {
.view-panel, .view-thumb img { transition: none !important; }
}
/* ── TILES HELD BACK FOR "LOAD MORE" ──────────────────────────────────
Hidden until the button asks for them. The photograph is already fetched
and decoded by the time a tile is unhidden (see creator.js), so all that
is left here is the movement: a slight rise, a slight settle of scale,
and a soft focus that clears. Nothing flashes, nothing reflows.
.selected-project sets display:block, which outranks the browser's own
[hidden] rule — so the held-back tiles were reserving their grid space
and leaving a tall blank below the section. Naming both galleries here
puts that right and keeps the two behaving the same. */
.selected-project.is-more[hidden],
.gallery-item.is-more[hidden] { display: none; }
.selected-project.is-more,
.gallery-item.is-more {
opacity: 0;
transform: translateY(26px) scale(0.985);
filter: blur(7px);
transition: opacity 1s cubic-bezier(.22,1,.36,1),
transform 1.1s cubic-bezier(.22,1,.36,1),
filter .9s cubic-bezier(.22,1,.36,1);
will-change: opacity, transform, filter;
}
.selected-project.is-more.is-shown,
.gallery-item.is-more.is-shown {
opacity: 1;
transform: none;
filter: none;
}
/* Released once it has arrived, so long galleries do not hold dozens of
composited layers open for the life of the page. */
.is-more.is-shown { will-change: auto; }
/* Closing is the arrival run backwards: the same curve, the same movement,
a little quicker. */
.is-folding .selected-project.is-more,
.is-folding .gallery-item.is-more {
transition: opacity .55s cubic-bezier(.22,1,.36,1),
transform .6s cubic-bezier(.22,1,.36,1),
filter .5s cubic-bezier(.22,1,.36,1);
}
.is-more:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
/* The button while its batch is being fetched: quiet, and unclickable, so
two batches can never overlap. No spinner — the wait is a beat, and a
spinner would make it feel longer than it is. */
.btn-outline.is-busy {
opacity: .48;
pointer-events: none;
transition: opacity .3s ease;
}
@media (prefers-reduced-motion: reduce) {
.selected-project.is-more,
.gallery-item.is-more { transition: none; transform: none; filter: none; }
}
/* The held-back half of the projects gallery sits in its own column block
so the projects already on the page keep their places — multi-column
rebalances everything it contains, and revealing twenty tiles inside
the grid above reshuffled six of the ten. Spaced to read as one gallery. */
/* ── HISTORY · MISSION · VISION ───────────────────────────────────────
Three statements the workshop makes about itself, on the About page
between the story and the promise. The tabs run down the left rather
than across the top: numbered, in Playfair, with a gold rule that
lengthens to mark the one you are reading — the same numeral-and-rule
language the craftsmanship points already use{
background: var(--bg);
padding: 120px 80px;
}
/* Leaving is shorter and firmer — upward{
opacity: 0;
transform: translateY(-14px);
transition: opacity .32s cubic-bezier(.4,0,1,1),
transform .36s cubic-bezier(.4,0,1,1);
}
@media (max-width: 1024px) {
/* Across the top once the column is gone{ flex-direction: row; gap: 34px; border-left: 0; border-bottom: 1px solid var(--border); }
}
/* ═══ ABOUT: THE REBUILT PAGE ═════════════════════════════════════════
Hero → approach → story → founder → history/mission/vision → the work →
the showroom → conversion. Ivory and sand for the reading, the two dark
greens for the two moments that should feel like stepping into the
workshop, gold only ever as a mark. */
/* ── OPENING: a personal approach to making ── */
.approach { background: var(--bg); padding: 110px 0 0; }
.approach-head {
max-width: 1400px; margin: 0 auto 72px; padding: 0 80px;
display: grid; grid-template-columns: 1fr 1fr; gap: 72px; align-items: start;
}
.approach-title {
font-family: 'Playfair Display', serif;
font-size: clamp(38px, 5.2vw, 76px);
font-weight: 400; line-height: 1.04; letter-spacing: -1px;
color: var(--dark); margin: 0;
}
.approach-title em { font-style: italic; color: var(--dark); }
/* Set as a statement of the house rather than a caption: Playfair italic
under a struck gold quotation mark, the weight the sentence deserves.
Unattributed on purpose — see the note in about.html. */
.approach-quote {
position: relative;
margin: 18px 0 0; padding-top: 44px;
max-width: 480px; justify-self: end;
border: 0;
}
.approach-quote::before {
content: '\201C';
position: absolute; top: -14px; left: -6px;
font-family: 'Playfair Display', serif;
font-size: 88px; line-height: 1;
color: var(--gold-display); opacity: .34;
}
.approach-quote p {
font-family: 'Playfair Display', serif;
font-style: italic;
font-size: clamp(20px, 1.9vw, 27px);
line-height: 1.55;
color: var(--text);
margin: 0;
}
/* Full-bleed: the photograph is the section's full stop. */
.approach-figure { margin: 0; }
.approach-figure img {
width: 100%; aspect-ratio: 21 / 9; object-fit: cover; display: block;
}
/* ── THE FOUNDER ── */
.founder { background: var(--green-pale); padding: 120px 80px 72px; }
.founder-inner {
max-width: 1200px; margin: 0 auto;
/* Narrowed from 0.85fr: the portrait is 452px wide at source, and the wider
column rendered it at 515 — upscaled, and soft before you even reach a
retina screen. The frame now sits just inside the file's own width. */
display: grid; grid-template-columns: minmax(0, 0.67fr) 1fr; gap: 80px; align-items: center;
}
.founder-portrait img,
.founder-portrait .slot { width: 100%; aspect-ratio: 4 / 5; }
/* The source is 2:3 and the frame 4:5, so a sixth of the height is cropped.
Biased upward so it comes off the trousers rather than the head. */
.founder-portrait img { object-fit: cover; object-position: 50% 32%; display: block; }
.founder-body {
font-family: 'DM Sans', sans-serif; font-size: 15px; line-height: 1.95;
color: var(--muted); margin: 0 0 20px; max-width: 560px;
}
.founder-rule { width: 100%; max-width: 560px; height: 1px; background: var(--border); margin: 34px 0 22px; }
.founder-name {
font-family: 'Playfair Display', serif; font-size: 25px; color: var(--dark); line-height: 1.2;
}
.founder-role {
font-family: 'DM Sans', sans-serif; font-size: 10px; letter-spacing: 2.6px;
text-transform: uppercase; color: var(--gold-display); margin-top: 7px;
}
/* ── THE WORK BEHIND THE PIECE ── */
.making { background: var(--green-deep); padding: 120px 80px; }
.making-inner { max-width: 1200px; margin: 0 auto; }
.making-head { max-width: 640px; margin-bottom: 64px; }
.making .section-tag { color: rgba(255,255,255,0.55); }
.making .section-tag::before { background: var(--gold); }
.making-figure { margin: 0 0 76px; }
.making-figure img {
width: 100%; aspect-ratio: 21 / 9; object-fit: cover; display: block;
}
/* ── THE SHOWROOM ── */
.visit { background: var(--bg); padding: 120px 80px; }
.visit-inner {
max-width: 1200px; margin: 0 auto;
display: grid; grid-template-columns: 1fr 1.1fr; gap: 80px; align-items: center;
}
.visit-body {
font-family: 'DM Sans', sans-serif; font-size: 15px; line-height: 1.95;
color: var(--muted); margin: 0 0 34px; max-width: 460px;
}
.visit-link {
display: inline-block; padding-bottom: 12px;
font-family: 'DM Sans', sans-serif; font-size: 13px; letter-spacing: .4px;
color: var(--dark); text-decoration: none;
border-bottom: 1px solid var(--border);
transition: color .4s ease, border-color .4s ease;
}
.visit-link:hover { color: var(--green); border-bottom-color: var(--gold-display); }
.visit-figure { margin: 0; }
.visit-figure img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; }
.visit-figure figcaption {
font-family: 'DM Sans', sans-serif; font-size: 10px; letter-spacing: 1.8px;
text-transform: uppercase; color: var(--muted); margin-top: 14px;
}
/* ── PHOTOGRAPH STILL TO COME ─────────────────────────────────────────
Two photographs do not exist yet: the founder's portrait and the
workshop. Rather than a grey box, the space is held in the palette, at
the exact proportion the photograph will occupy, and says what belongs
there — so the page reads as finished-but-waiting rather than broken.
Replacing one is a single line: swap the div for an ![]()
. */
.slot {
display: flex; flex-direction: column; align-items: center; justify-content: center;
gap: 10px; padding: 40px 32px; text-align: center;
border: 1px solid var(--border); background: rgba(154,123,35,0.035);
}
.slot--wide { aspect-ratio: 21 / 9; }
.slot-label {
font-family: 'DM Sans', sans-serif; font-size: 10px; letter-spacing: 2.6px;
text-transform: uppercase; color: var(--gold-display);
}
.slot-title {
font-family: 'Playfair Display', serif; font-size: clamp(20px, 2vw, 27px);
color: var(--dark); line-height: 1.25;
}
.slot-note {
font-family: 'DM Sans', sans-serif; font-size: 13px; line-height: 1.8;
color: var(--muted); max-width: 380px;
}
.slot--dark { border-color: rgba(255,255,255,0.18); background: rgba(255,255,255,0.03); }
.slot--dark .slot-label { color: var(--gold); }
.slot--dark .slot-title { color: #fff; }
.slot--dark .slot-note { color: rgba(255,255,255,0.58); }
/* ── RESPONSIVE ── */
@media (max-width: 1024px) {
.approach { padding-top: 88px; }
.approach-head { grid-template-columns: 1fr; gap: 28px; padding: 0 40px; margin-bottom: 52px; }
/* Single column: the quote lines up under the statement, not off to the
right edge where the two-column layout had put it. */
.approach-quote { justify-self: start; max-width: 100%; }
.founder { padding: 96px 40px 56px; }
.founder-inner { grid-template-columns: 1fr; gap: 48px; }
.founder-portrait { max-width: 440px; }
.making { padding: 96px 40px; }
.making-figure { margin-bottom: 56px; }
.visit { padding: 96px 40px; }
.visit-inner { grid-template-columns: 1fr; gap: 44px; }
}
@media (max-width: 768px) {
.approach { padding-top: 64px; }
.approach-head { padding: 0 24px; }
.approach-figure img, .making-figure img, .slot--wide { aspect-ratio: 4 / 3; }
.founder, .making, .visit { padding-left: 24px; padding-right: 24px; }
.founder { padding-top: 72px; padding-bottom: 44px; }
.making { padding-top: 72px; padding-bottom: 72px; }
.visit { padding-top: 72px; padding-bottom: 72px; }
.slot { padding: 32px 22px; }
}
/* ── PHOTOGRAPHS THAT ARRIVE LATER ────────────────────────────────────
The portrait and the workshop shot are referenced before they exist.
Each ![]()
removes itself if the file is not there, so :has(img) is the
test for "the photograph has landed" — when it has, the held space
stands down. Drop the file in and the page changes on its own. */
.founder-portrait:has(img) .slot,
.making-figure:has(img) .slot { display: none; }
/* ── THE PHOTOGRAPHS SETTLE, THEY DO NOT SNAP ─────────────────────────
Every frame on this page opens from a little over its size and settles
as it comes into view — a slow release rather than a cut. Paired with
the section fades it reads as the page composing itself. */
.approach-figure, .founder-portrait, .making-figure, .visit-figure { overflow: hidden; }
.approach-figure img,
.founder-portrait img,
.making-figure img,
.visit-figure img {
transform: scale(1.07);
transition: transform 1.8s cubic-bezier(.22,1,.36,1);
will-change: transform;
}
.approach-figure.revealed img,
.founder-portrait.revealed img,
.making-figure.revealed img,
.visit-figure.revealed img { transform: none; }
/* The showroom link's arrow leans out on approach. */
.visit-link span { display: inline-block; transition: transform .45s cubic-bezier(.22,1,.36,1); }
.visit-link:hover span { transform: translate(3px, -3px); }
@media (prefers-reduced-motion: reduce) {
.approach-figure img, .founder-portrait img,
.making-figure img, .visit-figure img { transform: none !important; transition: none; }
.visit-link span { transition: none; }
}
/* Waiting, in case the founder is happy to put his name to the quote. */
.approach-quote-by {
display: block; margin-top: 20px;
font-family: 'DM Sans', sans-serif; font-size: 10px;
letter-spacing: 2.6px; text-transform: uppercase; color: var(--gold-display);
}
/* The language you are reading, marked in the switcher. */
.lang-switcher a.is-active { color: var(--green); }
body > nav.hero-mode .lang-switcher a.is-active { color: #fff; }
/* ─── HOMEPAGE PROCESS FOOT ───────────────────────────────────────────
The homepage teases the process and hands the full account to Services;
this is the door between the two. */
.process-foot { text-align: center; margin-top: 64px; }
/* ─── THE JOURNEY (services) ──────────────────────────────────────────
One path in five stages, read top to bottom. The rail is a single hairline
with the stage numerals sitting on it; the numerals are --gold-display
rather than --gold because they are display type on a light ground. */
.journey {
background: var(--bg);
padding: 120px 80px 72px;
}
.journey-head {
max-width: 720px;
margin: 0 auto 80px;
text-align: center;
}
.journey-head .section-tag { justify-content: center; }
.journey-title em, .journey-head .section-title em { font-style: italic; color: var(--dark); }
.journey-lede {
font-size: 17px;
line-height: 1.85;
color: var(--muted);
margin-top: 24px;
}
.journey-stages {
max-width: 1040px;
margin: 0 auto;
list-style: none;
position: relative;
}
.journey-stage {
display: grid;
grid-template-columns: 116px minmax(0, 1fr);
gap: 0 40px;
padding-bottom: 72px;
}
.journey-stage:last-child { padding-bottom: 0; }
/* The rail is drawn per stage so it stops cleanly at the last numeral
instead of running past the end of the story. */
.journey-stage-rail { position: relative; }
.journey-stage:not(:last-child) .journey-stage-rail::after {
content: '';
position: absolute;
left: 50%;
top: 74px;
bottom: -72px;
width: 1px;
background: linear-gradient(to bottom, var(--border), rgba(90, 78, 62, 0.08));
}
.journey-stage-n {
display: flex;
align-items: center;
justify-content: center;
width: 74px;
height: 74px;
margin: 0 auto;
border: 1px solid var(--border);
border-radius: 50%;
background: var(--bg);
font-family: 'Playfair Display', serif;
font-size: 24px;
color: var(--gold-display);
position: relative;
z-index: 2;
transition: border-color 0.6s cubic-bezier(0.16,1,0.3,1), box-shadow 0.6s cubic-bezier(0.16,1,0.3,1);
}
.journey-stage.revealed .journey-stage-n {
border-color: rgba(179,154,88, 0.55);
box-shadow: 0 0 0 6px rgba(179,154,88, 0.07);
}
.journey-stage-title {
font-family: 'Playfair Display', serif;
font-size: clamp(24px, 2.4vw, 32px);
font-weight: 400;
color: var(--dark);
margin-bottom: 16px;
padding-top: 16px;
}
.journey-stage-lede {
font-size: 16.5px;
line-height: 1.9;
color: var(--muted);
max-width: 62ch;
}
.journey-stage-points {
list-style: none;
margin-top: 26px;
display: grid;
gap: 12px;
}
.journey-stage-points li {
position: relative;
padding-left: 26px;
font-size: 14.5px;
line-height: 1.7;
color: var(--text);
}
.journey-stage-points li::before {
content: '';
position: absolute;
left: 0;
top: 10px;
width: 8px;
height: 1px;
background: var(--gold);
}
/* ─── THE DEMONSTRATION, INSIDE STAGE 03 ───────────────────────────────
Two frames: the render that was approved, and the room that was built.
The second frame only exists if its photograph does — the onerror handler
removes the ![]()
, :has() sees it go, and the block falls back to a single
frame rather than showing an empty box. */
.journey-demo {
margin: 40px 0 0;
background: var(--green-deep);
border-radius: 3px;
overflow: hidden;
}
.journey-demo-pair {
display: grid;
grid-template-columns: 1fr;
gap: 1px;
background: rgba(255, 255, 255, 0.14);
}
.journey-demo-pair:has(.journey-demo-frame--built img) { grid-template-columns: 1fr 1fr; }
.journey-demo-frame {
position: relative;
background: var(--green-deep);
overflow: hidden;
}
.journey-demo-frame img {
aspect-ratio: 4 / 3;
width: 100%;
height: 100%;
object-fit: cover;
}
.journey-demo-frame--built { display: none; }
.journey-demo-pair:has(.journey-demo-frame--built img) .journey-demo-frame--built { display: block; }
.journey-demo-frame::after {
content: '';
position: absolute;
inset: auto 0 0 0;
height: 45%;
background: linear-gradient(to top, rgba(12, 24, 16, 0.78), transparent);
pointer-events: none;
}
.journey-demo-label {
position: absolute;
left: 24px;
bottom: 20px;
z-index: 2;
display: flex;
align-items: center;
gap: 12px;
font-size: 12px;
letter-spacing: 1.6px;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.92);
}
.journey-demo-label-n {
font-family: 'Playfair Display', serif;
font-size: 15px;
letter-spacing: 0;
color: var(--gold);
padding-right: 12px;
border-right: 1px solid rgba(179,154,88, 0.5);
}
.journey-demo-caption { padding: 48px 48px 52px; }
.journey-demo-tag {
display: block;
font-size: 11px;
letter-spacing: 3px;
text-transform: uppercase;
color: var(--gold);
margin-bottom: 18px;
}
.journey-demo-title {
font-family: 'Playfair Display', serif;
font-size: clamp(26px, 2.6vw, 36px);
font-weight: 400;
color: #fff;
line-height: 1.2;
margin-bottom: 20px;
}
.journey-demo-title em { font-style: italic; color: var(--gold); }
.journey-demo-body {
font-size: 16px;
line-height: 1.9;
color: rgba(255, 255, 255, 0.74);
max-width: 64ch;
}
.journey-demo-list {
list-style: none;
margin: 28px 0 34px;
display: grid;
gap: 14px;
}
.journey-demo-list li {
position: relative;
padding-left: 26px;
font-size: 14.5px;
line-height: 1.7;
color: rgba(255, 255, 255, 0.88);
}
.journey-demo-list li::before {
content: '';
position: absolute;
left: 0;
top: 9px;
width: 7px;
height: 7px;
border: 1px solid var(--gold);
border-radius: 50%;
}
/* ─── FAQ ─────────────────────────────────────────────────────────────
One answer open at a time; the panel animates its own height, and the
previous one closes as this one opens rather than after it. */
.faq {
background: var(--bg-alt);
padding: 72px 80px 100px;
}
.faq-inner { max-width: 900px; margin: 0 auto; }
.faq-head { text-align: center; margin-bottom: 64px; }
.faq-head .section-tag { justify-content: center; }
.faq-head .section-title em { font-style: italic; color: var(--dark); }
.faq-list { border-top: 1px solid var(--border); }
.faq-item { border-bottom: 1px solid var(--border); }
.faq-q-wrap { margin: 0; font-weight: 400; }
.faq-q {
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
gap: 32px;
padding: 30px 4px;
text-align: left;
color: var(--dark);
transition: color 0.35s ease;
}
.faq-q-text {
font-family: 'DM Sans', sans-serif;
font-size: clamp(16px, 1.5vw, 18px);
font-weight: 500;
line-height: 1.5;
}
.faq-q:hover { color: var(--green); }
.faq-q:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.faq-q-mark {
position: relative;
flex-shrink: 0;
width: 18px;
height: 18px;
}
.faq-q-mark::before,
.faq-q-mark::after {
content: '';
position: absolute;
left: 50%;
top: 50%;
background: var(--gold-ink);
transition: transform 0.55s cubic-bezier(0.16,1,0.3,1), opacity 0.4s ease;
}
.faq-q-mark::before { width: 15px; height: 1px; transform: translate(-50%, -50%); }
.faq-q-mark::after { width: 1px; height: 15px; transform: translate(-50%, -50%); }
.faq-q[aria-expanded="true"] { color: var(--green); }
.faq-q[aria-expanded="true"] .faq-q-mark::after { transform: translate(-50%, -50%) rotate(90deg); opacity: 0; }
.faq-a { overflow: hidden; }
.faq-a[hidden] { display: none; }
.faq-a-inner { padding: 0 4px 32px; max-width: 72ch; }
.faq-a-inner p {
font-size: 15.5px;
line-height: 1.95;
color: var(--muted);
margin-bottom: 16px;
}
.faq-a-inner p:last-child { margin-bottom: 0; }
.faq-foot {
margin-top: 44px;
text-align: center;
font-size: 15px;
color: var(--muted);
}
.faq-foot a {
color: var(--gold-ink);
border-bottom: 1px solid rgba(128, 100, 25, 0.4);
padding-bottom: 1px;
transition: border-color 0.35s ease;
}
.faq-foot a:hover { border-color: var(--gold-ink); }
/* ─── JOURNEY & FAQ RESPONSIVE ─── */
@media (max-width: 1024px) {
.journey { padding: 96px 40px 56px; }
.journey-stage { grid-template-columns: 92px minmax(0, 1fr); gap: 0 28px; }
.journey-stage-n { width: 64px; height: 64px; font-size: 21px; }
.journey-stage:not(:last-child) .journey-stage-rail::after { top: 64px; }
.journey-demo-caption { padding: 38px 34px 42px; }
.faq { padding: 56px 40px 80px; }
}
@media (max-width: 768px) {
.journey { padding: 72px 24px 44px; }
.journey-head { margin-bottom: 56px; }
.journey-stage {
grid-template-columns: minmax(0, 1fr);
gap: 0;
padding-bottom: 54px;
}
.journey-stage-rail { margin-bottom: 18px; }
.journey-stage-n { margin: 0; width: 56px; height: 56px; font-size: 19px; }
/* With the numeral back on the left margin the vertical rail would cut
through the copy, so it is retired at this width. */
.journey-stage:not(:last-child) .journey-stage-rail::after { display: none; }
.journey-stage-title { padding-top: 0; }
.journey-demo-pair,
.journey-demo-pair:has(.journey-demo-frame--built img) { grid-template-columns: 1fr; }
.journey-demo-caption { padding: 30px 24px 34px; }
.journey-demo-list { margin: 22px 0 28px; }
.faq { padding: 44px 24px 60px; }
.faq-head { margin-bottom: 44px; }
.faq-q { padding: 24px 2px; gap: 20px; }
}
@media (prefers-reduced-motion: reduce) {
.journey-stage-n,
.faq-q-mark::before,
.faq-q-mark::after { transition: none !important; }
}
/* ─── THE PEOPLE (about) ──────────────────────────────────────────────
Sits between the founder and the workshop: the three trades a commission
passes through, then the one thing the company says about itself. */
.hands { background: var(--bg); padding: 72px 80px 110px; }
.hands-inner { max-width: 1200px; margin: 0 auto; }
.hands-head { max-width: 680px; margin-bottom: 72px; }
.hands-head .section-title em { font-style: italic; color: var(--dark); }
.hands-lede {
font-family: 'DM Sans', sans-serif; font-size: 16px; line-height: 1.95;
color: var(--muted); margin-top: 26px;
}
.hands-roles {
display: grid; grid-template-columns: repeat(3, 1fr); gap: 0;
border-top: 1px solid var(--border);
}
.hands-role {
padding: 40px 40px 44px 0;
border-right: 1px solid var(--border);
}
.hands-role:first-child { padding-left: 0; }
.hands-role:not(:first-child) { padding-left: 40px; }
.hands-role:last-child { border-right: none; padding-right: 0; }
.hands-role-n {
display: block; font-family: 'DM Sans', sans-serif; font-size: 10px;
letter-spacing: 2.6px; text-transform: uppercase; color: var(--gold-ink);
margin-bottom: 18px;
}
.hands-role-title {
font-family: 'Playfair Display', serif; font-size: 25px; font-weight: 400;
line-height: 1.25; color: var(--dark); margin: 0 0 14px;
}
.hands-role p {
font-family: 'DM Sans', sans-serif; font-size: 14.5px; line-height: 1.9;
color: var(--muted); margin: 0;
}
.hands-quote {
margin: 76px auto 0; max-width: 860px; text-align: center;
padding-top: 52px; border-top: 1px solid var(--border);
}
.hands-quote p {
font-family: 'Playfair Display', serif; font-style: italic;
font-size: clamp(20px, 2.1vw, 27px); line-height: 1.6; color: var(--dark);
}
/* ─── WORKSHOP FACTS (about) ─── */
.making-facts {
margin: 0; display: grid; grid-template-columns: repeat(2, 1fr);
gap: 0; border-top: 1px solid rgba(255,255,255,0.14);
}
.making-fact {
padding: 38px 48px 40px 0;
border-bottom: 1px solid rgba(255,255,255,0.14);
}
.making-fact:nth-child(even) { padding-left: 48px; border-left: 1px solid rgba(255,255,255,0.14); padding-right: 0; }
.making-fact:nth-last-child(-n+2) { border-bottom: none; padding-bottom: 0; }
.making-fact dt {
font-family: 'DM Sans', sans-serif; font-size: 10px; letter-spacing: 2.6px;
text-transform: uppercase; color: var(--gold); margin-bottom: 14px;
}
.making-fact dd {
margin: 0; font-family: 'DM Sans', sans-serif; font-size: 15px;
line-height: 1.9; color: rgba(255,255,255,0.68); max-width: 46ch;
}
/* ─── THE INVITATION (about) ─── */
.visit-body--quiet { font-size: 14px; color: var(--muted); opacity: 0.86; }
.visit-actions { display: flex; flex-wrap: wrap; gap: 16px; margin-bottom: 30px; }
.visit-meta { display: flex; flex-direction: column; gap: 8px; }
.visit-meta-item {
font-family: 'DM Sans', sans-serif; font-size: 12px; letter-spacing: 1.4px;
text-transform: uppercase; color: var(--muted);
}
@media (max-width: 1024px) {
.hands { padding: 56px 40px 88px; }
.hands-roles { grid-template-columns: 1fr; border-top: none; }
.hands-role,
.hands-role:not(:first-child) {
padding: 34px 0; border-right: none; border-top: 1px solid var(--border);
}
.hands-quote { margin-top: 56px; padding-top: 44px; }
.making-facts { grid-template-columns: 1fr; }
.making-fact,
.making-fact:nth-child(even) {
padding: 30px 0; border-left: none;
border-bottom: 1px solid rgba(255,255,255,0.14);
}
.making-fact:last-child { border-bottom: none; padding-bottom: 0; }
}
@media (max-width: 768px) {
.hands { padding: 44px 24px 64px; }
.hands-head { margin-bottom: 48px; }
.visit-actions { gap: 12px; }
.visit-actions .btn-primary, .visit-actions .btn-outline { width: 100%; text-align: center; }
}
/* ─── WORKING WITH US (for professionals) ─── */
.trade { background: var(--bg); padding: 120px 80px; }
.trade-inner { max-width: 1200px; margin: 0 auto; }
.trade-head { max-width: 680px; margin-bottom: 64px; }
.trade-head .section-title em { font-style: italic; color: var(--dark); }
.trade-lede {
font-family: 'DM Sans', sans-serif; font-size: 16px; line-height: 1.95;
color: var(--muted); margin-top: 24px;
}
.trade-points {
display: grid; grid-template-columns: repeat(2, 1fr); gap: 0;
border-top: 1px solid var(--border);
}
.trade-point {
padding: 38px 48px 40px 0;
border-bottom: 1px solid var(--border);
}
.trade-point:nth-child(even) {
padding-left: 48px; padding-right: 0;
border-left: 1px solid var(--border);
}
.trade-point:nth-last-child(-n+2) { border-bottom: none; padding-bottom: 0; }
.trade-point-title {
font-family: 'Playfair Display', serif; font-size: 23px; font-weight: 400;
line-height: 1.3; color: var(--dark); margin: 0 0 14px;
}
.trade-point p {
font-family: 'DM Sans', sans-serif; font-size: 14.5px; line-height: 1.9;
color: var(--muted); margin: 0;
}
.trade-point a {
color: var(--gold-ink);
border-bottom: 1px solid rgba(128,100,25,0.35);
transition: border-color .35s ease;
}
.trade-point a:hover { border-color: var(--gold-ink); }
@media (max-width: 1024px) {
.trade { padding: 96px 40px; }
.trade-points { grid-template-columns: 1fr; }
.trade-point, .trade-point:nth-child(even) {
padding: 32px 0; border-left: none; border-bottom: 1px solid var(--border);
}
.trade-point:last-child { border-bottom: none; padding-bottom: 0; }
}
@media (max-width: 768px) { .trade { padding: 72px 24px; } }
/* ─── WHAT HAPPENS NEXT (contact) ─────────────────────────────────────
Replaces the heading the hero had already said. Three steps, on the rule
above the form, so the promise sits next to the thing making it. */
.afterward { padding-bottom: 8px; border-bottom: 1px solid var(--border); }
.afterward-steps {
list-style: none; margin: 30px 0 34px; padding: 0;
display: grid; grid-template-columns: repeat(3, 1fr); gap: 44px;
}
.afterward-step { position: relative; padding-left: 46px; }
.afterward-step-n {
position: absolute; left: 0; top: 1px;
font-family: 'Playfair Display', serif; font-size: 20px; color: var(--gold-display);
}
.afterward-step-n::after {
content: ''; position: absolute; left: 2px; bottom: -8px;
width: 18px; height: 1px; background: var(--gold); opacity: 0.55;
}
.afterward-step-title {
font-family: 'Playfair Display', serif; font-size: 20px; font-weight: 400;
line-height: 1.3; color: var(--dark); margin: 0 0 10px;
}
.afterward-step p {
font-family: 'DM Sans', sans-serif; font-size: 14px; line-height: 1.85;
color: var(--muted); margin: 0;
}
@media (max-width: 1024px) {
.afterward-steps { grid-template-columns: 1fr; gap: 28px; }
}
/* ─── JOINS BETWEEN SECTIONS THAT SHARE A GROUND ──────────────────────
Two stacked sections each bring their own padding to the join. Where the
ground changes, that is fine: the colour boundary is doing the separating
and the space reads as the band's own margin. Where both sides are the
same colour there is no boundary, and the two paddings add up into a hole
— 220px of empty cream below a centred button on the homepage, and the
same again in dark where a closing band follows a dark section.
Same-ground joins are ~144px; the rest keep their fuller spacing. */
.testimonials-section:has(+ .page-cta),
.export-section:has(+ .page-cta) { padding-bottom: 72px; }
.testimonials-section + .page-cta,
.export-section + .page-cta { padding-top: 72px; }
.page-hero:has(+ .clients-section) { padding-bottom: 72px; }
.page-hero + .clients-section { padding-top: 72px; }
@media (max-width: 768px) {
.testimonials-section:has(+ .page-cta),
.export-section:has(+ .page-cta) { padding-bottom: 48px; }
.testimonials-section + .page-cta,
.export-section + .page-cta { padding-top: 48px; }
.page-hero:has(+ .clients-section) { padding-bottom: 48px; }
.page-hero + .clients-section { padding-top: 48px; }
}
/* ─── TAP TARGETS ──────────────────────────────────────────────────
The buttons sit at 40px on the desktop grid, which is right for the
proportions there. On a phone they are thumbs, not pointers, so they
come up to the 44px minimum. Desktop is deliberately left alone. */
@media (max-width: 768px) {
.btn-primary,
.btn-outline,
.btn-whatsapp,
.form-submit {
min-height: 44px;
display: inline-flex;
align-items: center;
justify-content: center;
}
}
/* ─── 404 ──────────────────────────────────────────────────────────
Quiet rather than apologetic. Same cream ground as the rest, and a
way onward instead of a dead end. */
.notfound {
min-height: 62vh;
display: flex;
align-items: center;
justify-content: center;
background: var(--bg);
padding: 140px 24px 120px;
}
.notfound-inner { max-width: 620px; text-align: center; }
.notfound-title {
font-family: 'Cormorant Garamond', serif;
font-size: clamp(38px, 6vw, 62px);
font-weight: 300;
line-height: 1.1;
color: var(--green-deep);
margin: 18px 0 20px;
}
.notfound-lead {
font-size: 16px;
line-height: 1.75;
color: var(--dark);
opacity: 0.8;
margin: 0 auto 36px;
max-width: 48ch;
}
.notfound-links {
display: flex;
gap: 14px;
justify-content: center;
flex-wrap: wrap;
margin-bottom: 44px;
}
.notfound-more {
list-style: none;
margin: 0;
padding: 28px 0 0;
border-top: 1px solid rgba(45, 90, 61, 0.18);
display: flex;
flex-wrap: wrap;
gap: 10px 28px;
justify-content: center;
}
.notfound-more a {
font-family: 'DM Sans', sans-serif;
font-size: 13px;
letter-spacing: 0.4px;
color: var(--gold-ink);
text-decoration: none;
border-bottom: 1px solid transparent;
padding: 4px 0;
transition: border-color 0.25s;
}
.notfound-more a:hover { border-bottom-color: var(--gold-ink); }
@media (max-width: 768px) {
.notfound { padding: 112px 20px 88px; }
.notfound-links { flex-direction: column; align-items: stretch; }
.notfound-more { gap: 4px 20px; }
}
/* ─── ZOOMABLE PHOTOGRAPHS ─────────────────────────────────────────
Every photograph opens full size. The only affordance is the cursor
and a half-degree lift on hover — enough to say "this does something"
without turning the page into a control panel. */
.zoomable { cursor: zoom-in; }
img.zoomable {
transition: filter 0.4s cubic-bezier(0.16,1,0.3,1),
transform 0.5s cubic-bezier(0.16,1,0.3,1);
}
img.zoomable:hover { filter: brightness(1.03); }
.zoomable:focus-visible {
outline: 2px solid var(--gold-ink);
outline-offset: 3px;
}
@media (hover: none) {
img.zoomable:hover { filter: none; }
}
/* ─── LANGUAGE SWITCHER IN THE MOBILE MENU ─────────────────────────
.lang-switcher in the nav is display:none under 1024px, which left a
phone or tablet visitor no way to reach Romanian or Russian at all
except by typing ?lang= into the address bar. This is the same
component inside the mobile menu; the engine binds it automatically. */
.mobile-lang { display: none; } /* the nav has its own above 1024 */
@media (max-width: 1024px) {
.lang-switcher.mobile-lang {
display: flex;
align-items: center;
gap: 6px;
margin-top: 36px;
padding-top: 26px;
border-top: 1px solid rgba(255, 255, 255, 0.14);
}
.lang-switcher.mobile-lang a {
font-family: 'DM Sans', sans-serif;
font-size: 13px;
letter-spacing: 2px;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.6);
text-decoration: none;
/* 44px of thumb, not 13px of text */
min-width: 44px;
min-height: 44px;
display: inline-flex;
align-items: center;
justify-content: center;
transition: color 0.25s;
}
.lang-switcher.mobile-lang a:hover { color: #fff; }
.lang-switcher.mobile-lang a.is-active { color: var(--gold); }
.lang-switcher.mobile-lang .lang-divider {
width: 1px;
height: 12px;
background: rgba(255, 255, 255, 0.22);
}
}
/* ─── NAV BETWEEN TABLET AND FULL DESKTOP ──────────────────────────
The hamburger hands over at 1024px, but the full nav needs about
1366px before it has room. In the band between, the six links wrapped
onto two lines and the three groups were pushed hard against each
other — logo touching "Collections", "Contact" touching EN|RO|RU. In
Romanian it was worse, the words being longer.
Nothing is removed that is not already said elsewhere: the wordmark
beside the logo repeats what the logo itself reads, and is already
hidden below 1024px for the same reason. The rest is tightening. */
@media (min-width: 1025px) and (max-width: 1439px) {
.nav-logo-sep,
.nav-logo-text-wrap { display: none; }
.nav-links { gap: 24px; }
.nav-links > li > a { white-space: nowrap; }
.nav-right { gap: 16px; }
.nav-right .btn-primary { padding: 12px 18px; }
}
/* Tighter still where it is tightest, so the groups keep daylight
between them rather than merely not overlapping. */
@media (min-width: 1025px) and (max-width: 1199px) {
.nav-links { gap: 18px; }
.nav-right { gap: 12px; }
/* The button's own label was wrapping to two lines here, which is what
pushed the bar from 70px to 85px. There is room for one line. */
.nav-right .btn-primary {
padding: 12px 14px;
letter-spacing: 1.2px;
white-space: nowrap;
}
}
/* The last 75px before the hamburger takes over. Space-between means a
gap of zero is content exactly filling the bar — no overlap, but no
daylight either, and the eye reads that as broken. Buy some back. */
@media (min-width: 1025px) and (max-width: 1099px) {
#mainNav { padding-left: 20px; padding-right: 20px; }
.nav-links { gap: 10px; }
.lang-switcher { gap: 6px; }
.nav-right { gap: 10px; }
/* Russian carries the longest words of the three and is what sets the
floor here; at 1025px it is the only one still close. */
.nav-right .btn-primary { padding: 12px 10px; }
}
/* ─── THE BAR ON A PHONE AND TABLET ────────────────────────────────
It held a mark at one end and a hamburger at the other, with a wide
gap between that read as unfinished rather than restrained. The
wordmark that already sits beside the mark on a wide desktop fills it
— the name, and the year the workshop opened, on every screen of every
page rather than only after a scroll.
Set smaller than the desktop lockup: 16px at 5px of letter-spacing is
generous on a 1440px bar and crowded on a 375px one. The bar itself
comes down a little at the same time, so carrying more does not make
it heavier.
(Between 1025px and 1439px this stays hidden — there the six links,
the switcher and the button are all competing for the same width. It
is space that decides, not whim.) */
@media (max-width: 1024px) {
body > nav { padding: 10px 18px; }
body > nav.scrolled { padding: 8px 18px; }
.nav-logo { gap: 10px; }
.nav-logo-img { height: 32px; }
.nav-logo-sep {
display: block;
width: 1px;
height: 24px;
}
.nav-logo-text-wrap { display: flex; }
.nav-logo-text {
font-size: 13px;
letter-spacing: 3px;
}
.nav-logo-sub {
font-size: 7.5px;
letter-spacing: 1.1px;
margin-top: 1px;
}
}
/* Small phones — an SE at 320px, or a 360px Android. The founding line is
the longest thing in the lockup; give it less to carry rather than let
it push the hamburger. */
@media (max-width: 374px) {
.nav-logo-img { height: 28px; }
.nav-logo-text { font-size: 12px; letter-spacing: 2px; }
.nav-logo-sub { font-size: 7px; letter-spacing: 0.8px; }
}
/* ─── THE TEAM ─────────────────────────────────────────────────────
Replaces the workshop section on About. The ground is --dark, the
deeper green of the page hero rather than --green-deep, so the section
reads as the quiet end of the page.
The portraits are 160px squares taken at different times against
different walls — green, purple, an office. Circles at a fixed size
with one hairline ring each is what makes eleven mismatched snapshots
read as one set; no filter is applied, because tinting real people to
match a palette is where this stops looking honest. */
.team {
background: var(--dark);
padding: 128px 40px;
}
.team-inner { max-width: 1180px; margin: 0 auto; }
.team-head { max-width: 640px; margin-bottom: 76px; }
.team-lead {
margin: 22px 0 0;
font-size: 16px;
line-height: 1.8;
color: rgba(255, 255, 255, 0.62);
max-width: 52ch;
}
/* Flex rather than grid: eleven people never divide evenly into a row, and
a grid leaves the last row hanging to the left with a hole beside it.
Wrapped flex centres whatever is left over. */
.team-grid {
list-style: none;
margin: 0 0 100px;
padding: 0;
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 56px 28px;
}
.team-member {
flex: 0 0 168px;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
}
.team-portrait {
position: relative;
width: 104px;
height: 104px;
border-radius: 50%;
overflow: hidden;
background: rgba(255, 255, 255, 0.04);
box-shadow: 0 0 0 1px rgba(179,154,88, 0.34);
transition: box-shadow 0.45s cubic-bezier(0.16,1,0.3,1);
}
.team-member:hover .team-portrait { box-shadow: 0 0 0 1px rgba(179,154,88, 0.75); }
.team-portrait img {
width: 100%; height: 100%;
object-fit: cover;
display: block;
}
/* The monogram holds the place until a photograph lands, and steps aside
the moment one does — the same arrangement as the founder portrait. */
.team-monogram {
position: absolute; inset: 0;
display: flex; align-items: center; justify-content: center;
font-family: 'Cormorant Garamond', serif;
font-size: 30px;
letter-spacing: 2px;
color: rgba(179,154,88, 0.7);
}
.team-portrait:has(img) .team-monogram { display: none; }
.team-name {
margin-top: 20px;
font-family: 'Playfair Display', serif;
font-size: 17px;
line-height: 1.35;
color: #fff;
}
.team-role {
margin-top: 7px;
font-family: 'DM Sans', sans-serif;
font-size: 10px;
letter-spacing: 2.2px;
text-transform: uppercase;
color: rgba(179,154,88, 0.85);
}
/* The two crews, photographed together. These carry the section — far
more of the company than any single portrait does. */
.team-crews {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 32px;
margin-bottom: 96px;
}
.team-crew { margin: 0; }
.team-crew img {
width: 100%;
height: auto;
display: block;
aspect-ratio: 3 / 2;
object-fit: cover;
box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.1);
}
.team-crew figcaption {
display: flex;
flex-direction: column;
gap: 5px;
padding-top: 20px;
}
.team-crew-name {
font-family: 'Playfair Display', serif;
font-size: 20px;
color: #fff;
}
.team-crew-note {
font-family: 'DM Sans', sans-serif;
font-size: 12px;
letter-spacing: 0.3px;
color: rgba(255, 255, 255, 0.55);
}
@media (max-width: 1024px) {
.team { padding: 104px 32px; }
.team-head { margin-bottom: 60px; }
.team-grid { gap: 46px 24px; margin-bottom: 80px; }
/* Wider basis here so eleven break 4-4-3 rather than 5-5-1, which leaves
one person alone on a line. */
.team-member { flex-basis: 200px; }
}
@media (max-width: 768px) {
.team { padding: 84px 20px; }
.team-grid { gap: 40px 18px; }
.team-member { flex-basis: 132px; }
.team-portrait { width: 88px; height: 88px; }
.team-monogram { font-size: 25px; }
.team-name { font-size: 15px; margin-top: 16px; }
.team-crews { grid-template-columns: 1fr; gap: 40px; margin-bottom: 72px; }
.team-crew-name { font-size: 18px; }
}
/* A small collection is a considered offering, not an empty shelf. Same
gutter and panel type as the catalogue it sits under. */
.cbrowse-aside { max-width: 1400px; margin: 72px auto 0; padding: 0 80px; }
.cbrowse-aside .design-aside-title { max-width: 18ch; }
.cbrowse-aside p {
font-family: 'DM Sans', sans-serif; font-size: 16px; line-height: 1.85;
color: var(--muted); margin: 0 0 12px; max-width: 62ch;
}
.cbrowse-aside-links { display: flex; flex-wrap: wrap; gap: 28px; }
.cbrowse-aside-links a {
font-family: 'DM Sans', sans-serif; font-size: 12px; letter-spacing: 2px;
text-transform: uppercase; color: var(--green); text-decoration: none;
border-bottom: 1px solid var(--border); padding-bottom: 4px;
transition: color 0.3s, border-color 0.3s;
}
.cbrowse-aside-links a:hover { color: var(--gold-ink); border-color: var(--gold); }
/* the button that lifts a capped catalogue */
.cbrowse-more {
max-width: 1400px; margin: 56px auto 0; padding: 0 80px;
display: flex; justify-content: center;
}
.cbrowse-more[hidden] { display: none; }
@media (max-width: 768px) {
.cbrowse-aside { margin-top: 56px; }
/* Stacked, and tall enough to hit with a thumb. */
.cbrowse-aside-links { gap: 0; flex-direction: column; align-items: flex-start; }
.cbrowse-aside-links a {
display: flex; align-items: center; min-height: 44px;
width: 100%; padding-bottom: 0;
border-bottom: 1px solid var(--border);
}
}
/* ─── design page: the piece shown, and the way out of it ─────────── */
.design-shown {
font-family: 'DM Sans', sans-serif; font-size: 15px; line-height: 1.75;
color: var(--muted); margin: 0 0 28px;
}
.design-shown-label {
display: block; font-size: 10px; letter-spacing: 3px;
text-transform: uppercase; color: var(--gold-ink); margin-bottom: 8px;
}
.design-enquire { display: inline-flex; }
@media (max-width: 768px) {
/* On a phone the aside is the end of the page, so the action should be
reachable without hunting for it. */
.design-enquire { width: 100%; justify-content: center; }
}
/* ─── about: the team, grouped ────────────────────────────────────── */
/* A full-width label that breaks the wrapped flex row, so each group
starts on a line of its own without a second grid. */
.team-group {
flex: 0 0 100%; list-style: none;
display: flex; align-items: center; gap: 18px;
margin: 8px 0 -8px;
}
.team-group span {
font-family: 'DM Sans', sans-serif; font-size: 10px; letter-spacing: 3px;
text-transform: uppercase; color: rgba(179,154,88,0.75); white-space: nowrap;
}
.team-group::after {
content: ''; flex: 1 1 auto; height: 1px;
background: rgba(255,255,255,0.12);
}
.team-group:first-child { margin-top: 0; }
.team-quote {
max-width: 760px; margin: 88px auto 0; padding: 0 24px;
text-align: center; border: 0;
}
.team-quote p {
font-family: 'Cormorant Garamond', 'Playfair Display', serif;
font-size: clamp(21px, 2.4vw, 30px); line-height: 1.5; font-style: italic;
color: rgba(255,255,255,0.88); margin: 0;
}
@media (max-width: 768px) {
.team-quote { margin-top: 64px; }
.team-group { margin: 4px 0 -4px; }
}
/* ─── contact: reassurance, after the form rather than before it ───── */
.afterward--compact {
border-bottom: 0; border-top: 1px solid var(--border);
padding-top: 40px; padding-bottom: 0; margin-top: 64px;
}
.afterward--compact .afterward-steps { gap: 24px 40px; }
.afterward--compact .afterward-step-title {
margin: 0; font-size: 15px; line-height: 1.5;
}
@media (max-width: 768px) {
.afterward--compact { margin-top: 48px; padding-top: 32px; }
}
/* One statement left under the team, not four in a grid: let it run the
width and keep the rule above and below it. */
.making-facts--single { grid-template-columns: 1fr; }
.making-facts--single .making-fact { padding-right: 0; max-width: 62ch; }
/* ─── concept visualisations, said plainly ────────────────────────────
Small, quiet and in the page's own small-caps idiom — but at a
contrast that can actually be read, on both grounds it appears on. */
.concept-note {
font-family: 'DM Sans', sans-serif;
font-size: 11px; letter-spacing: 1.6px; text-transform: uppercase;
/* Both places this appears are cream grounds. --muted on --bg measures
5.55:1, which is readable at this size; white measured 1.06:1 and was
effectively not there. If it is ever used on a dark section, add
.concept-note--on-dark rather than changing this. */
color: var(--muted); margin: 18px 0 0;
}
.concept-note--on-dark { color: rgba(255,255,255,0.72); }
.materials-inner > .concept-note { margin: 0; align-self: start; }
.concept-note--figure { margin-top: 14px; display: block; text-align: left; }
@media (max-width: 1024px) {
.materials-inner > .concept-note { margin: -16px 0 0; }
}
/* ─── homepage craft: what the photographs actually show ──────────── */
/* Two ways on from here, side by side. */
.madewell-foot { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }
@media (max-width: 768px) {
.madewell-foot { flex-direction: column; align-items: stretch; padding: 0 24px; }
}
/* One column below 600px: two columns of client names at that width wrap
almost every name onto a second line. */
@media (max-width: 600px) {
.clients-sectors { columns: 1; padding: 0 24px; }
}
/* An enquiry action inside the introduction, so a professional does not
have to reach the foot of the page to find one. */
.page-hero-actions { margin-top: 32px; }
.clients-intro-count {
display: block; margin-top: 10px;
font-family: 'DM Sans', sans-serif; font-size: 11px; letter-spacing: 2px;
text-transform: uppercase; color: var(--gold);
}
/* For Professionals only: this page's job is to reach the offer quickly,
so its hero gives back about a quarter of its height. 190 -> 143 still
leaves roughly 50px of clear air under the navigation bar. */
.page-hero--compact { padding-top: 143px; padding-bottom: 75px; }
@media (max-width: 768px) {
.page-hero--compact { padding-top: 116px; padding-bottom: 56px; }
}
/* ══════════════════════════════════════════════════════════════════
HOMEPAGE — rebuilt 23 Sep 2026 to the owner's mockup.
Every rule below is scoped to body.home, so no other page moves.
Proportions are the mockup's, scaled from its ~990px canvas: tight
section joins, full-width photography, text links with an arrow in
place of boxed buttons, and the nav as a transparent bar over the
hero with the wordmark alone.
══════════════════════════════════════════════════════════════════ */
body.home {
--pad: clamp(20px, 5.6vw, 96px);
--pad-mid: clamp(16px, 4.4vw, 80px);
--pad-wide: clamp(16px, 3.3vw, 64px);
background: var(--bg);
}
/* ── Nav: the site-wide bar lives in THE MENU BAR at the end of this
file; nothing here is homepage-only any more. ── */
/* ── Shared type ── */
.home .hp-eyebrow {
display: block;
font-family: 'DM Sans', sans-serif;
font-size: 11px; font-weight: 500;
letter-spacing: 3.5px; text-transform: uppercase;
color: var(--text);
margin-bottom: 16px;
}
.home .hp-eyebrow--light { color: rgba(245,241,232,0.88); }
.home .hp-title {
font-family: 'Playfair Display', serif;
font-weight: 400;
font-size: clamp(36px, 4.4vw, 68px);
line-height: 1.06;
letter-spacing: -0.5px;
color: var(--dark);
margin: 0;
}
.home .hp-title--light { color: var(--bg); }
.home .hp-line { display: block; }
.home .hp-head { margin-bottom: clamp(18px, 1.6vw, 28px); }
/* Text link with an arrow — the mockup's only button style */
.home .hp-link {
display: inline-flex; align-items: center; gap: 10px;
font-family: 'DM Sans', sans-serif;
font-size: 15px;
color: var(--text);
text-decoration: none;
padding-bottom: 8px;
border-bottom: 1px solid rgba(34,30,24,0.45);
transition: border-color 0.3s, color 0.3s;
white-space: nowrap;
}
.home .hp-link:hover { border-color: var(--gold-ink); color: var(--green); }
.home .hp-link--light { color: var(--bg); border-color: rgba(245,241,232,0.6); }
.home .hp-link--light:hover { color: #fff; border-color: var(--gold); }
.home .hp-link--small { font-size: 13px; }
.home .hp-arrow { font-size: 0.85em; display: inline-block; transition: transform 0.3s cubic-bezier(0.16,1,0.3,1); }
.home a:hover .hp-arrow { transform: translate(2px, -2px); }
.home a:hover .hp-arrow--right { transform: translateX(4px); }
/* ── Hero ── */
.home .hp-hero {
position: relative;
height: 100vh; height: 100svh;
min-height: 620px;
overflow: hidden;
background: #15100b;
}
.home .hp-hero-img {
position: absolute; inset: 0;
width: 100%; height: 100%;
object-fit: cover; object-position: 50% 62%;
}
.home .hp-hero-veil {
position: absolute; inset: 0;
background:
linear-gradient(90deg, rgba(14,10,6,0.74) 0%, rgba(14,10,6,0.5) 34%, rgba(14,10,6,0.12) 64%, rgba(14,10,6,0) 80%),
linear-gradient(180deg, rgba(14,10,6,0.5) 0%, rgba(14,10,6,0) 20%, rgba(14,10,6,0) 72%, rgba(14,10,6,0.3) 100%),
rgba(14,10,6,0.14);
}
.home .hp-hero-copy {
position: absolute;
left: var(--pad); top: 22%;
max-width: 680px;
color: var(--bg);
}
.home .hp-hero-copy .hp-eyebrow { margin-bottom: clamp(20px, 2vw, 30px); }
.home .hp-hero-title {
font-family: 'Playfair Display', serif;
font-weight: 400;
font-size: clamp(48px, 6.3vw, 100px);
line-height: 1.04;
letter-spacing: -1px;
color: var(--bg);
margin: 0;
}
.home .hp-hero-sub {
font-family: 'DM Sans', sans-serif;
font-size: clamp(15px, 1.2vw, 18px);
color: rgba(245,241,232,0.94);
margin: clamp(20px, 1.9vw, 28px) 0 clamp(26px, 2.6vw, 38px);
}
.home .hp-hero-links { display: flex; flex-wrap: wrap; gap: 14px clamp(22px, 2.2vw, 34px); }
/* ── Collections ── */
.home .hp-collections { padding: clamp(40px, 3.6vw, 60px) var(--pad) clamp(36px, 3.4vw, 56px); }
.home .hp-coll-grid {
display: grid;
grid-template-columns: minmax(0, 1.395fr) minmax(0, 1fr);
gap: clamp(20px, 2vw, 30px) clamp(12px, 1.3vw, 20px);
}
.home .hp-coll {
display: flex; flex-direction: column;
text-decoration: none; color: var(--text);
}
.home .hp-coll-img {
position: relative; display: block;
flex: 1 1 auto; min-height: 160px;
overflow: hidden; background: var(--bg-alt);
}
.home .hp-coll--tall .hp-coll-img { flex: none; aspect-ratio: 1.84; }
/* Three rows that alternate, as on the Collections page: wide then
narrow, narrow then wide, wide then narrow. The middle row mirrors the
split exactly (1.395 : 1 becomes 1 : 1.395), so the join between the
two photographs zig-zags by the same distance each way. The wide
photograph sets each row's height; the narrow one fills it. */
.home .hp-coll-rows { display: grid; row-gap: clamp(20px, 2vw, 30px); }
.home .hp-coll-row {
display: grid; grid-template-columns: minmax(0, 1.395fr) minmax(0, 1fr);
column-gap: clamp(12px, 1.3vw, 20px);
}
.home .hp-coll-row--rev { grid-template-columns: minmax(0, 1fr) minmax(0, 1.395fr); }
.home .hp-coll--wide .hp-coll-img { flex: none; aspect-ratio: 1.84; }
.home .hp-coll--short .hp-coll-img { flex: none; aspect-ratio: 2.28; }
.home .hp-coll-img img {
position: absolute; inset: 0; width: 100%; height: 100%;
object-fit: cover;
transition: transform 1.2s cubic-bezier(0.16,1,0.3,1);
}
.home .hp-coll:hover .hp-coll-img img { transform: scale(1.03); }
.home .hp-coll-name,
.home .hp-coll-link {
display: inline-flex; align-items: center; gap: 10px;
font-family: 'DM Sans', sans-serif;
font-size: clamp(15px, 1.2vw, 17px);
color: var(--text); text-decoration: none;
}
.home .hp-coll-name { margin-top: 12px; }
.home .hp-coll-link:hover, .home .hp-coll:hover .hp-coll-name { color: var(--green); }
.home .hp-coll-all {
display: flex; justify-content: flex-end;
margin-top: clamp(26px, 2.8vw, 40px); padding-top: 18px;
border-top: 1px solid rgba(34,30,24,0.28);
}
.home .hp-coll-more {
display: grid;
grid-template-columns: minmax(0, 0.54fr) minmax(0, 1fr);
gap: clamp(20px, 2.2vw, 32px);
margin-top: clamp(30px, 3.4vw, 50px);
}
.home .hp-coll-more-cell {
border-top: 1px solid rgba(34,30,24,0.28);
padding-top: 18px;
display: flex; align-items: flex-start; justify-content: space-between; gap: 20px;
}
/* ── Stats ── */
.home .hp-stats {
display: grid; grid-template-columns: 0.86fr 1fr 1.06fr 1.14fr;
background: var(--green-deep);
padding: clamp(44px, 4vw, 64px) var(--pad-wide);
}
.home .hp-stat {
position: relative;
display: flex; flex-direction: column; align-items: center; text-align: center;
padding: 10px 16px;
}
.home .hp-stat + .hp-stat::before {
content: ""; position: absolute; left: 0; top: 50%;
width: 1px; height: 100%; min-height: 90px; transform: translateY(-50%);
background: rgba(179,154,88,0.5);
}
.home .hp-stat-num {
font-family: 'Playfair Display', serif; font-weight: 400;
font-size: clamp(30px, 3.2vw, 50px); line-height: 1.1;
color: var(--gold);
}
.home .hp-stat-num--word { color: var(--bg); font-size: clamp(24px, 2.85vw, 44px); text-wrap: balance; }
.home .hp-stat-label {
font-family: 'DM Sans', sans-serif;
font-size: clamp(13px, 1.1vw, 16px);
color: rgba(245,241,232,0.86);
margin-top: 12px;
}
/* ── Find your room (was One Design, Four Expressions) ──
Rebuilt 29 Sep 2026 to the owner's mockup so the settings read as
clickable: a caption on the stage, arrows on it, and cards that say
"View room" or, on the chosen one, "Now viewing" on ivory in gold. */
.home .hp-express {
background: var(--green-deep);
padding: clamp(34px, 3vw, 48px) var(--pad-wide) clamp(34px, 3vw, 48px);
border-top: 1px solid rgba(245,241,232,0.06);
}
.home .hp-exp-top {
display: flex; align-items: flex-end; justify-content: space-between; gap: 32px;
padding-left: calc(var(--pad) - var(--pad-wide));
margin-bottom: clamp(18px, 1.7vw, 26px);
}
.home .hp-express .hp-eyebrow { color: var(--gold); }
.home .hp-exp-hint {
font-family: 'DM Sans', sans-serif; font-size: clamp(14px, 1.15vw, 17px);
color: rgba(245,241,232,0.86); margin: 0 0 0.5em; text-align: right;
}
.home .hp-exp-stage {
position: relative;
aspect-ratio: 2.5;
overflow: hidden;
background: #10241a;
}
.home .hp-exp-panel {
position: absolute; inset: 0; width: 100%; height: 100%;
object-fit: cover; object-position: 50% 62%;
opacity: 0; transition: opacity 0.7s ease;
}
.home .hp-exp-panel.is-active { opacity: 1; }
/* The site-wide lazy fade (html.img-fade img[loading=lazy][data-loaded])
sets every loaded image to opacity 1, which would stack all four
settings visibly. These out-rank it for the stage. */
html .home img.hp-exp-panel:not(.is-active) { opacity: 0; }
/* A soft shade in the lower left, only as deep as the caption needs. */
.home .hp-exp-stage::after {
content: ''; position: absolute; inset: 0; pointer-events: none;
background: linear-gradient(to top, rgba(10,20,14,0.62) 0%, rgba(10,20,14,0.18) 34%, rgba(10,20,14,0) 55%);
}
.home .hp-exp-caps {
position: absolute; z-index: 1;
left: clamp(18px, 1.9vw, 30px); bottom: clamp(18px, 1.9vw, 30px);
right: 160px; display: grid; color: var(--bg);
}
.home .hp-exp-cap {
grid-area: 1 / 1; align-self: end;
opacity: 0; visibility: hidden; transform: translateY(8px);
transition: opacity 0.5s ease, transform 0.6s ease, visibility 0s linear 0.6s;
}
.home .hp-exp-cap.is-active {
opacity: 1; visibility: visible; transform: none;
transition: opacity 0.6s ease 0.15s, transform 0.7s ease 0.15s, visibility 0s;
}
.home .hp-exp-cap-kicker {
display: block; font-family: 'DM Sans', sans-serif;
font-size: 11px; font-weight: 500; letter-spacing: 3px; text-transform: uppercase;
color: rgba(245,241,232,0.9); margin-bottom: 8px;
}
.home .hp-exp-cap-name {
font-family: 'Playfair Display', serif; font-weight: 400;
font-size: clamp(26px, 2.6vw, 42px); line-height: 1.1; margin: 0;
color: var(--bg);
}
.home .hp-exp-cap-line {
font-family: 'DM Sans', sans-serif; font-size: clamp(14px, 1.15vw, 17px);
color: rgba(245,241,232,0.92); margin: 6px 0 0;
}
.home .hp-exp-arrows {
position: absolute; z-index: 1; display: flex; gap: 18px;
right: clamp(18px, 1.9vw, 30px); bottom: clamp(18px, 1.9vw, 30px);
}
.home .hp-exp-arrow, .home .hp-exp-go {
display: inline-flex; align-items: center; justify-content: center;
border-radius: 50%; border: 1px solid currentColor;
transition: background-color 0.3s, color 0.3s, border-color 0.3s;
}
.home .hp-exp-arrow {
appearance: none; cursor: pointer; padding: 0;
width: 48px; height: 48px; background: rgba(10,20,14,0.18);
color: var(--bg); font-size: 26px; line-height: 1;
}
.home .hp-exp-arrow span { margin-top: -3px; }
.home .hp-exp-arrow:hover { background: var(--bg); color: var(--dark); border-color: var(--bg); }
.home .hp-exp-arrow:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.home .hp-exp-bar {
display: flex; justify-content: space-between; align-items: baseline;
font-family: 'DM Sans', sans-serif; font-size: 11px; font-weight: 500;
letter-spacing: 3px; text-transform: uppercase;
margin: clamp(22px, 2.2vw, 34px) 0 clamp(12px, 1.2vw, 18px);
}
.home .hp-exp-label { color: var(--gold); }
.home .hp-exp-count { color: var(--bg); letter-spacing: 2px; }
.home .hp-exp-thumbs {
display: grid; grid-template-columns: repeat(4, 1fr);
gap: clamp(12px, 1.4vw, 20px);
}
.home .hp-exp-thumb {
appearance: none; background: transparent; padding: 0; margin: 0;
border: 1px solid rgba(245,241,232,0.26);
cursor: pointer; text-align: left; color: var(--bg);
display: flex; flex-direction: column;
transition: background-color 0.4s, border-color 0.4s, box-shadow 0.4s, color 0.4s;
}
.home .hp-exp-thumb-img { display: block; aspect-ratio: 2.44; overflow: hidden; }
.home .hp-exp-thumb-img img {
width: 100%; height: 100%; object-fit: cover; object-position: 50% 62%;
transition: transform 1s cubic-bezier(0.16,1,0.3,1);
}
.home .hp-exp-thumb:hover .hp-exp-thumb-img img { transform: scale(1.04); }
.home .hp-exp-thumb-body {
flex: 1; display: grid; grid-template-columns: 1fr auto; grid-template-rows: 1fr auto;
align-items: end; column-gap: 12px;
padding: clamp(14px, 1.3vw, 20px) clamp(14px, 1.5vw, 22px) clamp(14px, 1.3vw, 20px);
}
.home .hp-exp-thumb-name {
grid-column: 1; font-family: 'Playfair Display', serif; font-weight: 400;
font-size: clamp(17px, 1.5vw, 23px); line-height: 1.2; margin-bottom: 8px; align-self: start;
}
.home .hp-exp-thumb-state {
grid-column: 1; font-family: 'DM Sans', sans-serif; font-size: clamp(13px, 1.05vw, 15px);
color: rgba(245,241,232,0.82); display: flex; align-items: center; min-height: 24px;
}
.home .hp-exp-go {
grid-column: 2; grid-row: 1 / span 2; align-self: end;
width: 38px; height: 38px; font-size: 16px;
}
.home .hp-exp-now { display: none; align-items: center; gap: 10px; }
.home .hp-exp-tick {
width: 24px; height: 24px; border-radius: 50%; background: var(--gold); position: relative; flex: none;
}
.home .hp-exp-tick::after {
content: ''; position: absolute; left: 8.5px; top: 5.5px; width: 5px; height: 10px;
border: solid var(--bg); border-width: 0 1.6px 1.6px 0; transform: rotate(45deg);
}
.home .hp-exp-thumb:hover { border-color: rgba(245,241,232,0.6); }
.home .hp-exp-thumb:hover .hp-exp-go { background: var(--bg); color: var(--dark); border-color: var(--bg); }
.home .hp-exp-thumb.is-active {
background: var(--bg); color: var(--dark);
border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold);
cursor: default;
}
.home .hp-exp-thumb.is-active .hp-exp-thumb-state { color: var(--dark); }
.home .hp-exp-thumb.is-active .hp-exp-view { display: none; }
.home .hp-exp-thumb.is-active .hp-exp-now { display: inline-flex; }
.home .hp-exp-thumb.is-active .hp-exp-go { background: transparent; color: var(--dark); border-color: var(--dark); }
.home .hp-exp-thumb:focus-visible { outline: 2px solid var(--gold); outline-offset: 4px; }
.home .hp-exp-foot {
display: flex; align-items: center; justify-content: space-between; gap: 32px;
margin-top: clamp(20px, 2vw, 30px);
}
.home .hp-exp-foot .concept-note { font-size: 12px; margin: 0; }
/* ── Selected work ── */
.home .hp-work { padding: clamp(18px, 2vw, 30px) var(--pad-mid) clamp(24px, 2.4vw, 36px); }
.home .hp-work-top {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1.98fr);
gap: 24px; align-items: start;
}
.home .hp-work-top .hp-head { padding: clamp(18px, 2vw, 30px) 0 0 calc(var(--pad) - var(--pad-mid)); }
.home .hp-work-pair {
display: grid; grid-template-columns: 1fr 1fr;
gap: clamp(14px, 1.7vw, 26px);
margin-top: clamp(10px, 1.1vw, 16px);
}
.home .hp-work-item { display: block; text-decoration: none; color: var(--text); }
.home .hp-work-img { display: block; overflow: hidden; aspect-ratio: 2.25; background: var(--bg-alt); }
.home .hp-work-item--lead .hp-work-img { aspect-ratio: 3.05; }
.home .hp-work-img img {
width: 100%; height: 100%; object-fit: cover;
transition: transform 1.2s cubic-bezier(0.16,1,0.3,1);
}
.home .hp-work-item:hover .hp-work-img img { transform: scale(1.03); }
.home .hp-work-cap {
display: block; margin-top: 8px;
font-family: 'DM Sans', sans-serif; font-size: 13px; color: var(--muted);
}
.home .hp-work-place { text-transform: uppercase; letter-spacing: 0.6px; }
.home .hp-work-foot {
display: flex; justify-content: space-between; align-items: flex-end; gap: 24px;
margin-top: 8px;
}
.home .hp-fineprint { font-family: 'DM Sans', sans-serif; font-size: 12px; color: var(--muted); margin: 0 0 0 8px; }
/* ── The Detail ── */
.home .hp-craft { padding: clamp(40px, 3.6vw, 56px) var(--pad-mid) clamp(40px, 3.6vw, 56px); }
.home .hp-craft .hp-head { padding-left: calc(var(--pad) - var(--pad-mid)); }
.home .hp-lede {
font-family: 'DM Sans', sans-serif; font-size: clamp(15px, 1.2vw, 18px);
color: var(--text); margin: 10px 0 0;
}
.home .hp-craft-grid {
display: grid;
grid-template-columns: minmax(0, 1.97fr) minmax(0, 1fr);
grid-template-rows: 1fr 1fr;
gap: clamp(5px, 0.5vw, 8px);
}
.home .hp-craft-grid figure { margin: 0; overflow: hidden; background: var(--bg-alt); position: relative; }
.home .hp-craft-main { grid-row: 1 / span 2; aspect-ratio: 2.61; }
.home .hp-craft-grid img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* The details take their height from the main image's two rows, not
from their own photograph's proportions. */
.home .hp-craft-detail img { position: absolute; inset: 0; }
/* The owner's detail photographs (28 Sep 2026) are cut to these frames
already, so they are shown whole rather than zoomed out of the main one. */
.home .hp-craft-foot {
display: flex; justify-content: space-between; gap: 24px;
margin-top: clamp(22px, 2.2vw, 32px);
}
/* ── Process ── */
.home .hp-process { padding: clamp(40px, 3.6vw, 56px) var(--pad) clamp(44px, 3.8vw, 60px); }
.home .hp-process-top {
display: flex; justify-content: space-between; align-items: flex-end; gap: 24px;
margin-bottom: clamp(18px, 1.8vw, 26px);
}
.home .hp-process-top .hp-head { margin-bottom: 0; }
.home .hp-steps {
list-style: none; margin: 0; padding: 0;
display: grid; grid-template-columns: repeat(4, 1fr);
gap: clamp(22px, 2.9vw, 44px);
}
.home .hp-step-num { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.home .hp-step-num span {
font-family: 'Playfair Display', serif; font-size: clamp(26px, 2.3vw, 36px);
color: var(--gold-display); line-height: 1;
}
.home .hp-step-num::after { content: ""; flex: 1; height: 1px; background: rgba(154,123,35,0.45); }
.home .hp-step-img { aspect-ratio: 0.9; overflow: hidden; background: var(--bg-alt); }
.home .hp-step-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.home .hp-step-img--showroom { object-position: 0% 18%; transform: scale(1.9); transform-origin: 0% 18%; }
.home .hp-step-img--makers { object-position: 50% 60%; }
.home .hp-step-img--crew { object-position: 50% 78%; transform: scale(1.45); transform-origin: 50% 80%; }
.home .hp-step-title {
font-family: 'Playfair Display', serif; font-weight: 400;
font-size: clamp(19px, 1.7vw, 26px); line-height: 1.2;
color: var(--dark); margin: clamp(14px, 1.4vw, 20px) 0 10px;
}
.home .hp-step-desc {
font-family: 'DM Sans', sans-serif; font-size: clamp(14px, 1.05vw, 16px); line-height: 1.55;
color: var(--muted); margin: 0; max-width: 300px;
}
/* ── Testimonials ── */
.home .hp-testi {
background: var(--green-deep);
padding: clamp(44px, 3.8vw, 60px) var(--pad) clamp(40px, 3.4vw, 54px);
}
.home .hp-testi .hp-head { margin-bottom: clamp(26px, 2.6vw, 40px); }
.home .hp-quotes { display: grid; grid-template-columns: repeat(3, 1fr); }
.home .hp-quote {
margin: 0; display: flex; flex-direction: column;
padding: 0 clamp(20px, 2.4vw, 36px);
border-left: 1px solid rgba(245,241,232,0.24);
}
.home .hp-quote:first-child { padding-left: 0; border-left: 0; }
.home .hp-quote p {
flex: 1; margin: 0;
font-family: 'Playfair Display', serif; font-weight: 400;
font-size: clamp(16px, 1.3vw, 20px); line-height: 1.5;
color: var(--bg);
quotes: "\201C" "\201D";
}
.home :lang(ro) .hp-quote p, html:lang(ro) .hp-quote p { quotes: "\201E" "\201D"; }
.home :lang(ru) .hp-quote p, html:lang(ru) .hp-quote p { quotes: "\00AB" "\00BB"; }
.home .hp-quote p::before { content: open-quote; }
.home .hp-quote p::after { content: close-quote; }
.home .hp-quote-by {
margin-top: clamp(26px, 2.6vw, 38px);
font-family: 'DM Sans', sans-serif; font-size: 11px;
letter-spacing: 2.5px; text-transform: uppercase;
color: rgba(245,241,232,0.72);
}
.home .hp-quote-by em { font-style: normal; }
.home .hp-trusted {
margin-top: clamp(28px, 2.6vw, 40px);
padding-top: clamp(22px, 2vw, 30px);
border-top: 1px solid rgba(245,241,232,0.32);
}
.home .hp-trusted .hp-eyebrow { font-size: 10.5px; margin-bottom: 12px; }
.home .hp-trusted-row { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; }
.home .hp-trusted-list {
list-style: none; margin: 0; padding: 0;
display: flex; flex-wrap: wrap; row-gap: 6px;
font-family: 'DM Sans', sans-serif; font-size: clamp(13px, 1vw, 15px);
color: rgba(245,241,232,0.9);
}
.home .hp-trusted-list li + li::before { content: "·"; margin: 0 12px; color: rgba(245,241,232,0.5); }
/* ── Contact ── */
.home .hp-contact { padding: clamp(40px, 3.6vw, 56px) var(--pad-wide) clamp(44px, 3.8vw, 60px); }
.home .hp-contact .hp-head { padding-left: calc(var(--pad) - var(--pad-wide)); }
.home .hp-contact-grid {
display: grid;
grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr);
}
.home .hp-contact-info { padding-right: clamp(20px, 2vw, 30px); }
.home .hp-contact-media {
display: grid; grid-template-columns: minmax(0, 300fr) minmax(0, 170fr);
gap: clamp(14px, 1.9vw, 28px); align-items: start;
}
.home .hp-contact-media figure { margin: 0; }
.home .hp-contact-shot img { width: 100%; aspect-ratio: 1.43; object-fit: cover; object-position: 50% 80%; display: block; }
.home .hp-contact-map iframe {
display: block; width: 100%; aspect-ratio: 0.755; border: 0;
filter: grayscale(0.85) contrast(0.95) brightness(1.04);
background: var(--bg-alt);
}
.home .hp-contact-media figcaption {
font-family: 'DM Sans', sans-serif; font-size: 12px; color: var(--muted); margin-top: 8px;
}
.home .hp-showroom-title {
font-family: 'Playfair Display', serif; font-weight: 400;
font-size: clamp(20px, 1.7vw, 26px); color: var(--dark);
margin: clamp(24px, 2.3vw, 34px) 0 4px;
}
.home .hp-showroom-sub { font-family: 'DM Sans', sans-serif; font-size: 15px; color: var(--text); margin: 0 0 18px; }
.home .hp-showroom-rows { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.home .hp-showroom-rows li {
display: flex; align-items: center; gap: 16px;
font-family: 'DM Sans', sans-serif; font-size: 15px; color: var(--text);
}
.home .hp-showroom-rows svg,
:is(.home, .svc, .ct, .ab, .pro, .hpf) .hp-footer-contact svg {
width: 18px; height: 18px; flex: none;
fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round;
}
.home .hp-showroom-rows a { color: inherit; text-decoration: none; display: inline-flex; gap: 8px; align-items: center; }
.home .hp-showroom-rows a:hover { color: var(--green); }
.home .hp-showroom-chat { flex-wrap: wrap; }
.home .hp-showroom-chat a + a { margin-left: 18px; }
.home .hp-form {
border-left: 1px solid rgba(34,30,24,0.2);
padding-left: clamp(18px, 1.9vw, 30px);
display: grid; gap: 12px; align-content: start;
}
.home .hp-field {
display: grid; grid-template-columns: minmax(90px, 0.42fr) minmax(0, 1fr);
align-items: center; gap: 12px;
}
.home .hp-field--top { align-items: start; }
.home .hp-field--top label { padding-top: 10px; }
.home .hp-field label {
font-family: 'DM Sans', sans-serif; font-size: 14px; color: var(--text);
letter-spacing: 0; text-transform: none;
}
.home .hp-field input,
.home .hp-field select,
.home .hp-field textarea {
width: 100%; box-sizing: border-box;
font-family: 'DM Sans', sans-serif; font-size: 14px; color: var(--text);
background: #FBF9F5;
border: 1px solid rgba(34,30,24,0.3); border-radius: 2px;
padding: 10px 12px; min-height: 42px;
outline: none; transition: border-color 0.25s;
}
.home .hp-field textarea { min-height: 104px; resize: vertical; }
.home .hp-field select {
appearance: none; -webkit-appearance: none; padding-right: 36px;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23221E18' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
background-repeat: no-repeat; background-position: right 12px center;
}
.home .hp-field input::placeholder,
.home .hp-field textarea::placeholder { color: rgba(107,97,86,0.8); }
.home .hp-field input:focus,
.home .hp-field select:focus,
.home .hp-field textarea:focus { border-color: var(--green); }
.home .hp-submit {
margin-top: 12px; width: 100%; min-height: 56px;
background: var(--green-deep); color: var(--bg);
border: 0; border-radius: 2px; cursor: pointer;
font-family: 'Playfair Display', serif; font-size: 18px; letter-spacing: 0.2px;
text-transform: none;
transition: background 0.3s;
}
.home .hp-submit:hover { background: var(--green); }
.home .hp-submit::before, .home .hp-submit::after { display: none; }
.home .hp-form-note {
font-family: 'DM Sans', sans-serif; font-size: 13px; line-height: 1.6;
color: var(--muted); margin: 6px 0 0;
}
.home .hp-form-note a { color: inherit; }
.home .hp-form .form-status { font-size: 13px; margin: 4px 0 0; }
/* ── Footer ── */
:is(.home, .svc, .ct, .ab, .pro, .hpf) footer.hp-footer { background: var(--green-deep); padding: 0 var(--pad); }
:is(.home, .svc, .ct, .ab, .pro, .hpf) .hp-footer-main {
display: grid;
grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr) minmax(0, 1.05fr) minmax(0, 0.85fr) minmax(0, 1.15fr);
gap: 40px;
padding: clamp(44px, 3.8vw, 60px) 0 clamp(34px, 3vw, 46px);
}
:is(.home, .svc, .ct, .ab, .pro, .hpf) .hp-footer-brand { display: flex; flex-direction: column; align-items: flex-start; }
:is(.home, .svc, .ct, .ab, .pro, .hpf) .hp-footer-lockup { display: inline-grid; justify-items: stretch; }
:is(.home, .svc, .ct, .ab, .pro, .hpf) .hp-footer-word {
font-family: 'Playfair Display', serif; font-size: clamp(32px, 2.9vw, 46px);
letter-spacing: 0.3em; margin-right: -0.3em; line-height: 1; color: var(--bg);
}
:is(.home, .svc, .ct, .ab, .pro, .hpf) .hp-footer-sub {
text-align: center; margin-right: -0.45em;
font-family: 'DM Sans', sans-serif; font-size: 12px; letter-spacing: 0.45em;
text-transform: uppercase; color: rgba(245,241,232,0.85); margin-top: 12px;
}
:is(.home, .svc, .ct, .ab, .pro, .hpf) .hp-footer-rule { width: 100%; height: 1px; background: rgba(179,154,88,0.6); margin: 26px 0 0; }
:is(.home, .svc, .ct, .ab, .pro, .hpf) .hp-footer-tag {
font-family: 'DM Sans', sans-serif; font-size: 15px; color: rgba(245,241,232,0.85);
margin: clamp(30px, 3vw, 46px) 0 0; white-space: nowrap;
}
:is(.home, .svc, .ct, .ab, .pro, .hpf) .hp-footer-title {
font-family: 'DM Sans', sans-serif; font-size: 11px; letter-spacing: 2.5px;
text-transform: uppercase; color: rgba(245,241,232,0.72); margin-bottom: 16px;
}
:is(.home, .svc, .ct, .ab, .pro, .hpf) .hp-footer-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; }
:is(.home, .svc, .ct, .ab, .pro, .hpf) .hp-footer-col a,
:is(.home, .svc, .ct, .ab, .pro, .hpf) .hp-footer-bottom a {
font-family: 'DM Sans', sans-serif; font-size: 14.5px;
color: rgba(245,241,232,0.86); text-decoration: none; transition: color 0.3s;
}
:is(.home, .svc, .ct, .ab, .pro, .hpf) .hp-footer-col a:hover, :is(.home, .svc, .ct, .ab, .pro, .hpf) .hp-footer-bottom a:hover { color: var(--gold); }
:is(.home, .svc, .ct, .ab, .pro, .hpf) .hp-footer-contact { display: flex; flex-direction: column; }
:is(.home, .svc, .ct, .ab, .pro, .hpf) .hp-footer-contact li { display: flex; align-items: center; gap: 12px; color: rgba(245,241,232,0.8); }
:is(.home, .svc, .ct, .ab, .pro, .hpf) .hp-footer-social {
margin-top: auto; padding-top: 24px;
display: flex; gap: 10px; flex-wrap: wrap;
color: rgba(245,241,232,0.6); font-size: 13px;
}
:is(.home, .svc, .ct, .ab, .pro, .hpf) .hp-footer-social a { font-size: 13.5px; }
:is(.home, .svc, .ct, .ab, .pro, .hpf) .hp-footer-bottom {
display: flex; justify-content: space-between; align-items: center;
border-top: 1px solid rgba(245,241,232,0.14);
padding: 20px 0 24px;
font-family: 'DM Sans', sans-serif; font-size: 13.5px; color: rgba(245,241,232,0.8);
}
:is(.home, .svc, .ct, .ab, .pro, .hpf) .hp-footer-langs { display: flex; gap: 12px; color: rgba(245,241,232,0.5); }
:is(.home, .svc, .ct, .ab, .pro, .hpf) .hp-footer-langs a { font-size: 13px; }
:is(.home, .svc, .ct, .ab, .pro, .hpf) .hp-footer-langs a.is-active { color: var(--bg); }
/* ── 1024 ── */
@media (max-width: 1024px) {
.home .hp-hero-copy { top: auto; bottom: 16%; right: var(--pad); }
.home .hp-stats { grid-template-columns: repeat(2, 1fr); row-gap: 34px; }
.home .hp-exp-stage { aspect-ratio: 1.9; }
.home .hp-exp-thumb-body { padding: 14px; }
.home .hp-exp-go { width: 34px; height: 34px; }
.home .hp-stat:nth-child(3)::before { display: none; }
.home .hp-work-top { grid-template-columns: 1fr; }
.home .hp-work-top .hp-head { padding-top: 0; }
.home .hp-steps { grid-template-columns: repeat(2, 1fr); row-gap: 40px; }
.home .hp-quotes { grid-template-columns: 1fr; }
.home .hp-quote { padding: 24px 0; border-left: 0; border-top: 1px solid rgba(245,241,232,0.24); }
.home .hp-quote:first-child { padding-top: 0; border-top: 0; }
.home .hp-quote-by { margin-top: 18px; }
.home .hp-contact-grid { grid-template-columns: 1fr; row-gap: 40px; }
.home .hp-contact-info { padding-right: 0; }
.home .hp-form { border-left: 0; padding-left: 0; border-top: 1px solid rgba(34,30,24,0.2); padding-top: 32px; }
:is(.home, .svc, .ct, .ab, .pro, .hpf) .hp-footer-main { grid-template-columns: 1fr 1fr; row-gap: 44px; }
.home .hp-trusted-row { flex-direction: column; align-items: flex-start; }
}
/* ── 768 ── */
@media (max-width: 768px) {
.home .hp-hero-title { font-size: clamp(42px, 11vw, 60px); }
/* The copy spans the full width here, so the side-lit veil is not
enough; darken from below where the text sits. */
.home .hp-hero-veil {
background:
linear-gradient(0deg, rgba(14,10,6,0.82) 0%, rgba(14,10,6,0.55) 45%, rgba(14,10,6,0.1) 75%),
linear-gradient(180deg, rgba(14,10,6,0.45) 0%, rgba(14,10,6,0) 18%);
}
.home .hp-link { min-height: 44px; box-sizing: border-box; padding-top: 12px; }
.home .hp-coll-grid { grid-template-columns: 1fr; }
.home .hp-coll-row, .home .hp-coll-row--rev { grid-template-columns: 1fr; row-gap: clamp(20px, 2vw, 30px); }
.home .hp-coll .hp-coll-img,
.home .hp-coll--wide .hp-coll-img,
.home .hp-coll--tall .hp-coll-img,
.home .hp-coll--short .hp-coll-img { flex: none; aspect-ratio: 1.6; min-height: 0; }
.home .hp-coll-name { min-height: 44px; margin-top: 0; }
.home .hp-coll-more { grid-template-columns: 1fr; gap: 0; }
.home .hp-coll-more-cell { padding-top: 6px; }
.home .hp-coll-more-cell--wide { border-top: 0; flex-wrap: wrap; }
.home .hp-coll-link { min-height: 44px; }
.home .hp-exp-top { flex-direction: column; align-items: flex-start; gap: 12px; }
.home .hp-exp-hint { text-align: left; margin: 0; }
.home .hp-exp-stage { aspect-ratio: 1.3; }
.home .hp-exp-caps { right: clamp(18px, 1.9vw, 30px); bottom: 84px; }
.home .hp-exp-arrows { left: clamp(18px, 1.9vw, 30px); right: auto; gap: 12px; }
.home .hp-exp-arrow { width: 44px; height: 44px; }
.home .hp-exp-thumbs { grid-template-columns: repeat(2, 1fr); }
.home .hp-exp-thumb-img { aspect-ratio: 1.8; }
.home .hp-exp-go { width: 32px; height: 32px; font-size: 14px; }
.home .hp-exp-foot { flex-direction: column; align-items: flex-start; gap: 12px; }
.home .hp-work-pair { grid-template-columns: 1fr; }
.home .hp-work-img, .home .hp-work-item--lead .hp-work-img { aspect-ratio: 1.6; }
.home .hp-work-foot { flex-direction: column; align-items: flex-start; }
.home .hp-fineprint { margin-left: 0; }
.home .hp-craft-grid { grid-template-columns: 1fr 1fr; grid-template-rows: auto auto; }
.home .hp-craft-main { grid-column: 1 / span 2; grid-row: auto; aspect-ratio: 2.67; } /* the photograph's own shape, so the whole sofa shows */
.home .hp-craft-detail { aspect-ratio: 1.3; }
.home .hp-craft-foot { flex-direction: column; align-items: flex-start; gap: 8px; }
.home .hp-process-top { flex-direction: column; align-items: flex-start; }
.home .hp-contact-media { grid-template-columns: 1fr; }
.home .hp-contact-map iframe { aspect-ratio: 1.3; }
.home .hp-showroom-rows li { min-height: 44px; }
.home .hp-field { grid-template-columns: 1fr; gap: 6px; }
.home .hp-field--top label { padding-top: 0; }
.home .hp-field input, .home .hp-field select { min-height: 46px; font-size: 16px; }
.home .hp-field textarea { font-size: 16px; }
:is(.home, .svc, .ct, .ab, .pro, .hpf) .hp-footer-main { grid-template-columns: 1fr; }
:is(.home, .svc, .ct, .ab, .pro, .hpf) .hp-footer-tag { white-space: normal; }
:is(.home, .svc, .ct, .ab, .pro, .hpf) .hp-footer-col a,
:is(.home, .svc, .ct, .ab, .pro, .hpf) .hp-footer-social a,
:is(.home, .svc, .ct, .ab, .pro, .hpf) .hp-footer-langs a,
.home .hp-showroom-rows a { display: inline-flex; min-height: 44px; align-items: center; }
:is(.home, .svc, .ct, .ab, .pro, .hpf) .hp-footer-social { padding-top: 12px; }
:is(.home, .svc, .ct, .ab, .pro, .hpf) .hp-footer-col ul { gap: 0; }
:is(.home, .svc, .ct, .ab, .pro, .hpf) .hp-footer-bottom { flex-direction: column; gap: 10px; align-items: flex-start; }
}
@media (max-width: 560px) {
.home .hp-stats { grid-template-columns: 1fr; }
.home .hp-stat::before { display: none; }
.home .hp-steps { grid-template-columns: 1fr; }
.home .hp-step-img { aspect-ratio: 1.3; }
}
/* ══════════════════════════════════════════════════════════════════
THE MENU BAR — every page, from 23 Sep 2026.
The owner's mockup bar: full width at the top edge rather than a
floating pill; the CREATOR wordmark alone, no logo image; links in
ordinary capitals; EN / RO / RU; no button — "Request a Consultation"
is in every hero, the contact bubble and the mobile menu instead.
Transparent over a dark hero (JS adds .hero-mode only where one is
measured), ivory over a light page and once scrolled.
It replaces the three-state lockup described under NAV BETWEEN TABLET
AND FULL DESKTOP: that hid the wordmark between 1025 and 1439px to
make room for the logo and the button. Both are gone, so the wordmark
now shows at every width — it is the only name in the bar.
══════════════════════════════════════════════════════════════════ */
body > nav {
top: 0; left: 0; right: 0;
border-radius: 0;
padding: 24px clamp(20px, 5.6vw, 96px);
border: 0;
border-bottom: 1px solid transparent;
}
body > nav.hero-mode {
background: transparent;
backdrop-filter: none; -webkit-backdrop-filter: none;
box-shadow: none;
}
body > nav:not(.hero-mode):not(.scrolled) {
background: rgba(245,241,232,0.97);
border-bottom-color: var(--border);
box-shadow: none;
}
body > nav.scrolled {
top: 0;
padding-top: 14px; padding-bottom: 14px;
border: 0;
border-bottom: 1px solid rgba(29,48,37,0.12);
}
body > nav .nav-logo-img,
body > nav .nav-logo-sep,
body > nav .nav-drop-caret,
body > nav .nav-right > .btn-primary { display: none; }
body > nav .nav-logo-text-wrap {
display: flex; align-items: center; text-decoration: none;
}
body > nav .nav-logo-text-wrap:hover { opacity: 0.8; }
body > nav .nav-logo-text { font-size: 25px; letter-spacing: 7px; margin-right: -7px; line-height: 1; }
body > nav .nav-logo-sub { font-size: 8.5px; letter-spacing: 4px; margin: 6px -4px 0 0; }
body > nav .nav-links { gap: clamp(22px, 2.3vw, 38px); }
body > nav .nav-links > li > a {
text-transform: none; letter-spacing: 0.2px; font-size: 14px; white-space: nowrap;
}
body > nav.hero-mode .nav-links > li > a { color: rgba(245,241,232,0.94); }
body > nav .lang-switcher { gap: 6px; }
body > nav .lang-switcher a { font-size: 12.5px; letter-spacing: 0.5px; }
body > nav.hero-mode .lang-switcher a { color: rgba(245,241,232,0.8); }
body > nav.hero-mode .lang-switcher a.is-active { color: var(--bg); }
body > nav.hero-mode .nav-logo-text { color: var(--bg); }
body > nav .lang-divider { width: auto; height: auto; background: none !important; font-size: 12px; color: var(--muted); }
body > nav .lang-divider::before { content: "/"; }
body > nav.hero-mode .lang-divider { color: rgba(245,241,232,0.7); }
/* Laptop widths: the old rule hid the wordmark here. Show it; tighten
the links instead, which is all the room ever needed. */
@media (min-width: 1025px) and (max-width: 1439px) {
body > nav .nav-logo-text-wrap { display: flex; }
body > nav .nav-links { gap: clamp(16px, 1.7vw, 26px); }
body > nav .nav-links > li > a { font-size: 13.5px; }
body > nav .nav-logo-text { font-size: 22px; letter-spacing: 6px; margin-right: -6px; }
}
@media (max-width: 1024px) {
body > nav { padding: 18px clamp(20px, 5.6vw, 96px); }
body > nav.scrolled { padding-top: 12px; padding-bottom: 12px; }
body > nav .nav-logo-text-wrap { display: flex; }
body > nav .nav-logo-text { font-size: 21px; letter-spacing: 6px; margin-right: -6px; }
body > nav .nav-logo-sub { font-size: 8px; letter-spacing: 3.5px; margin-top: 5px; }
}
@media (max-width: 768px) {
body > nav { padding: 14px 20px; }
body > nav.scrolled { padding-top: 10px; padding-bottom: 10px; }
body > nav .nav-logo-text { font-size: 19px; letter-spacing: 5px; margin-right: -5px; }
body > nav .nav-logo-sub { font-size: 7.5px; letter-spacing: 3px; }
}
/* ══════════════════════════════════════════════════════════════════
COLLECTIONS — rebuilt 23 Sep 2026 to the owner's mockups.
collections.html (body.cx-indexpage) and the six collection-*.html
pages (body.cx-collpage). Own cx- classes throughout, because the
design pages still use the old .cbrowse / .ccard styles.
══════════════════════════════════════════════════════════════════ */
body.cx-page { background: var(--bg); }
.cx-page {
--cxpad: clamp(20px, 4.3vw, 80px);
--cxwide: clamp(16px, 2.8vw, 52px);
}
body.cx-collpage > nav:not(.hero-mode) { border-bottom-color: rgba(179,154,88,0.55); }
/* shared type */
.cx-page .cx-line { display: block; }
.cx-page .cx-eyebrow {
display: block; font-family: 'DM Sans', sans-serif; font-size: 11px; font-weight: 500;
letter-spacing: 3.5px; text-transform: uppercase; color: var(--text); margin-bottom: 18px;
}
.cx-page .cx-eyebrow--light { color: rgba(245,241,232,0.85); }
.cx-page .cx-dot { color: var(--gold); }
.cx-page .cx-h2 {
font-family: 'Playfair Display', serif; font-weight: 400;
font-size: clamp(30px, 2.9vw, 44px); line-height: 1.12; letter-spacing: -0.3px;
color: var(--dark); margin: 0;
}
.cx-page .cx-arrow { display: inline-block; font-size: 0.9em; color: var(--gold-display); transition: transform 0.3s cubic-bezier(0.16,1,0.3,1); }
.cx-page a:hover .cx-arrow { transform: translate(2px, -2px); }
.cx-page .cx-link,
.cx-page .cx-more {
display: inline-flex; align-items: center; gap: 10px;
font-family: 'DM Sans', sans-serif; font-size: 15px; color: var(--text);
text-decoration: none; white-space: nowrap;
padding-bottom: 6px; border-bottom: 1px solid rgba(179,154,88,0.8);
transition: color 0.3s, border-color 0.3s;
}
.cx-page .cx-link:hover, .cx-page a:hover .cx-more { color: var(--green); border-color: var(--gold-display); }
.cx-page .cx-link--button { background: none; border-top: 0; border-left: 0; border-right: 0; cursor: pointer; padding: 10px 0 6px; }
/* ── Collections index ── */
.cx-index .cx-intro {
display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: clamp(30px, 4vw, 64px); align-items: center;
padding: calc(88px + clamp(28px, 3.4vw, 52px)) var(--cxpad) 0;
}
.cx-index .cx-title {
font-family: 'Playfair Display', serif; font-weight: 400;
font-size: clamp(44px, 5.2vw, 80px); line-height: 1.02; letter-spacing: -1px;
color: var(--dark); margin: 0;
}
.cx-index .cx-intro-lede {
max-width: 470px; margin: 0; padding-left: clamp(24px, 2.6vw, 40px);
border-left: 1px solid rgba(179,154,88,0.75);
font-family: 'DM Sans', sans-serif; font-size: clamp(15px, 1.2vw, 17px); line-height: 1.6; color: var(--text);
}
.cx-index .cx-cats { padding: clamp(26px, 2.6vw, 40px) var(--cxwide) 0; }
.cx-index .cx-hint { font-family: 'DM Sans', sans-serif; font-size: 15px; color: var(--text); margin: 0 0 16px; }
.cx-index .cx-cat-row {
display: grid; grid-template-columns: minmax(0, 2.04fr) minmax(0, 1fr);
gap: clamp(12px, 1.5vw, 22px); margin-bottom: clamp(20px, 2vw, 30px);
}
.cx-index .cx-cat-row--rev { grid-template-columns: minmax(0, 1fr) minmax(0, 2.04fr); }
.cx-index .cx-cat { display: flex; flex-direction: column; text-decoration: none; color: var(--text); }
.cx-index .cx-cat-img { position: relative; display: block; flex: 1 1 auto; min-height: 220px; overflow: hidden; background: var(--bg-alt); }
.cx-index .cx-cat--wide .cx-cat-img { flex: none; aspect-ratio: 1.9; }
.cx-index .cx-cat-row--rev .cx-cat--wide .cx-cat-img { aspect-ratio: 1.77; }
.cx-index .cx-cat-img img {
position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
transition: transform 1.2s cubic-bezier(0.16,1,0.3,1);
}
.cx-index .cx-cat:hover .cx-cat-img img { transform: scale(1.03); }
.cx-index .cx-cat-foot {
display: flex; justify-content: space-between; align-items: baseline; gap: 16px; margin-top: 12px;
}
.cx-index .cx-cat-name { font-family: 'Playfair Display', serif; font-size: clamp(20px, 1.85vw, 28px); color: var(--dark); }
.cx-index .cx-cat:not(.cx-cat--wide) .cx-more { font-size: 14px; }
.cx-index .cx-cat--wide .cx-more { font-size: 16.5px; }
.cx-index .cx-bespoke {
display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); gap: clamp(28px, 3.6vw, 56px); align-items: center;
margin: clamp(14px, 1.4vw, 22px) var(--cxwide) 0;
padding: clamp(24px, 2.2vw, 32px) 0 clamp(24px, 2.2vw, 34px);
border-top: 1px solid rgba(179,154,88,0.65);
}
.cx-page .cx-bespoke-img,
.cx-page .cx-fit-img,
.cx-page .cx-detail-img { position: relative; overflow: hidden; background: var(--bg-alt); }
.cx-index .cx-bespoke-img { aspect-ratio: 2.9; }
.cx-page .cx-bespoke-img img,
.cx-page .cx-fit-img img,
.cx-page .cx-detail-img img {
position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
object-position: var(--fx, 50%) var(--fy, 50%);
transform: scale(var(--fz, 1)); transform-origin: var(--fx, 50%) var(--fy, 50%);
}
.cx-index .cx-bespoke-copy .cx-link { margin-top: 22px; }
.cx-page .cx-h2--stack { font-size: clamp(30px, 3vw, 46px); }
/* ── Collection pages ── */
.cx-coll .cx-browse { padding: calc(88px + 22px) var(--cxpad) 0; scroll-margin-top: 70px; }
.cx-page .cx-crumbs {
display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 clamp(22px, 2.2vw, 32px);
font-family: 'DM Sans', sans-serif; font-size: 13.5px; letter-spacing: 0; text-transform: none;
padding: 0; max-width: none;
}
.cx-page .cx-crumbs a { color: var(--muted); padding: 10px 0; }
.cx-page .cx-crumbs a::before { content: none !important; }
.cx-page .cx-crumbs a:hover { color: var(--green); }
.cx-page .cx-crumbs span[aria-current] { color: var(--text); }
.cx-page .cx-crumbs .crumb-sep { color: var(--gold); opacity: 0.8; }
.cx-page [hidden] { display: none !important; }
.cx-coll .cx-coll-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 40px; }
.cx-coll .cx-coll-title {
font-family: 'Playfair Display', serif; font-weight: 400;
font-size: clamp(46px, 5.9vw, 88px); line-height: 1; letter-spacing: -1.2px;
color: var(--dark); margin: 0;
}
.cx-coll .cx-coll-lede { max-width: 430px; padding-top: clamp(8px, 1.6vw, 24px); }
.cx-coll .cx-coll-lede p {
margin: 0; font-family: 'DM Sans', sans-serif; font-size: clamp(15px, 1.15vw, 17px); line-height: 1.55; color: var(--muted);
}
.cx-coll .cx-tabs-row {
display: flex; justify-content: space-between; align-items: flex-end; gap: 24px;
margin-top: clamp(26px, 2.6vw, 38px);
}
.cx-coll .cx-tabs { display: flex; flex-wrap: wrap; gap: 8px clamp(26px, 2.8vw, 42px); }
.cx-coll .cx-tab {
appearance: none; background: none; border: 0; cursor: pointer;
padding: 6px 0 10px; border-bottom: 2px solid transparent;
font-family: 'DM Sans', sans-serif; font-size: 16px; color: var(--muted);
transition: color 0.25s, border-color 0.25s;
}
.cx-coll .cx-tab:hover { color: var(--text); }
.cx-coll .cx-tab[aria-pressed="true"] { color: var(--dark); font-weight: 500; border-bottom-color: var(--dark); }
.cx-coll .cx-tab:focus-visible { outline: 2px solid var(--gold); outline-offset: 4px; }
.cx-coll .cx-count { margin: 0 0 10px; font-family: 'DM Sans', sans-serif; font-size: 15px; color: var(--muted); white-space: nowrap; }
.cx-coll .cx-grid {
display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
gap: clamp(40px, 3.9vw, 58px) clamp(18px, 2vw, 30px);
margin-top: clamp(18px, 1.8vw, 26px);
}
.cx-coll .cx-card { display: block; text-decoration: none; color: var(--text); }
.cx-coll .cx-card-img { position: relative; display: block; aspect-ratio: 1.69; overflow: hidden; background: var(--bg-alt); }
.cx-coll .cx-card--wide { grid-column: 1 / -1; }
.cx-coll .cx-card--wide .cx-card-img { aspect-ratio: 2.7; }
.cx-coll .cx-card-img img {
width: 100%; height: 100%; object-fit: cover; display: block;
transition: transform 1.2s cubic-bezier(0.16,1,0.3,1);
}
.cx-coll .cx-card:hover .cx-card-img img { transform: scale(1.03); }
.cx-coll .cx-card-views {
position: absolute; top: 14px; right: 14px; padding: 5px 11px;
background: rgba(245,241,232,0.92); color: var(--text);
font-family: 'DM Sans', sans-serif; font-size: 11px; letter-spacing: 1.5px; text-transform: uppercase;
}
.cx-coll .cx-card-foot { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; margin-top: 14px; }
.cx-coll .cx-card-name {
font-family: 'Playfair Display', serif; font-weight: 400;
font-size: clamp(20px, 1.75vw, 26px); line-height: 1.15; color: var(--dark); margin: 0;
}
.cx-coll .cx-card-type {
display: block; margin-top: 7px; font-family: 'DM Sans', sans-serif;
font-size: 10.5px; letter-spacing: 3px; text-transform: uppercase; color: var(--muted);
}
.cx-coll .cx-card .cx-more { margin-top: 4px; }
.cx-coll .cx-more-wrap { text-align: center; margin-top: clamp(34px, 3.4vw, 50px); }
/* the slim band, and the detailed one when a type is chosen */
.cx-coll .cx-fit {
display: grid; grid-template-columns: minmax(0, 330px) minmax(0, 1fr) auto; gap: clamp(26px, 3vw, 46px); align-items: center;
margin: clamp(46px, 4.4vw, 66px) var(--cxpad) 0;
padding: clamp(24px, 2.2vw, 32px) 0 clamp(36px, 3.4vw, 50px);
border-top: 1px solid rgba(179,154,88,0.65);
}
.cx-coll .cx-fit-img { aspect-ratio: 2.05; }
.cx-coll .cx-fit-copy p,
.cx-coll .cx-detail-note { font-family: 'DM Sans', sans-serif; font-size: 16px; color: var(--muted); margin: 10px 0 0; }
.cx-coll .cx-detail {
display: grid; grid-template-columns: minmax(0, 0.92fr) minmax(0, 1fr); gap: clamp(28px, 3.4vw, 50px); align-items: center;
margin: clamp(46px, 4.4vw, 66px) var(--cxpad) 0;
padding: clamp(24px, 2.2vw, 32px) 0 clamp(36px, 3.4vw, 50px);
border-top: 1px solid rgba(179,154,88,0.65);
}
.cx-coll .cx-detail-img { aspect-ratio: 1.65; }
.cx-coll .cx-h2--detail { font-size: clamp(30px, 3.2vw, 48px); margin-bottom: clamp(14px, 1.4vw, 20px); }
.cx-coll .cx-spec { margin: 0; }
.cx-coll .cx-spec-row {
display: grid; grid-template-columns: minmax(110px, 0.34fr) minmax(0, 1fr); gap: 20px; align-items: baseline;
padding: 16px 0; border-bottom: 1px solid rgba(179,154,88,0.55);
}
.cx-coll .cx-spec dt { font-family: 'Playfair Display', serif; font-size: clamp(18px, 1.5vw, 22px); color: var(--dark); }
.cx-coll .cx-spec dd { margin: 0; font-family: 'DM Sans', sans-serif; font-size: 15.5px; color: var(--muted); }
.cx-coll .cx-detail-note { font-size: 14px; margin-top: 22px; }
/* ── The dark band ── */
.cx-page .cx-cta { background: var(--green-deep); color: var(--bg); padding: clamp(46px, 4.6vw, 70px) var(--cxpad); }
.cx-page .cx-cta-title {
font-family: 'Playfair Display', serif; font-weight: 400;
font-size: clamp(30px, 3.1vw, 48px); line-height: 1.12; color: var(--bg); margin: 0;
}
.cx-page .cx-cta p { font-family: 'DM Sans', sans-serif; font-size: clamp(15px, 1.2vw, 17px); line-height: 1.55; color: rgba(245,241,232,0.88); margin: 12px 0 0; }
.cx-page .cx-cta--split { display: flex; justify-content: space-between; align-items: center; gap: 40px; }
.cx-page .cx-cta--center { text-align: center; }
.cx-page .cx-cta--center .cx-cta-title { margin-top: 2px; }
.cx-page .cx-cta-actions { display: flex; flex-wrap: wrap; gap: 18px; }
.cx-page .cx-cta--center .cx-cta-actions { justify-content: center; margin-top: clamp(24px, 2.4vw, 34px); }
.cx-page .cx-btn {
display: inline-flex; align-items: center; justify-content: center; gap: 14px;
min-height: 56px; padding: 0 clamp(24px, 2.2vw, 34px);
border: 1px solid rgba(245,241,232,0.75); color: var(--bg); text-decoration: none;
font-family: 'DM Sans', sans-serif; font-size: 16px; white-space: nowrap;
transition: background 0.3s, border-color 0.3s;
}
.cx-page .cx-btn .cx-arrow { color: inherit; }
.cx-page .cx-btn:hover { background: rgba(245,241,232,0.08); border-color: var(--bg); }
.cx-page .cx-btn--gold { border-color: var(--gold); }
.cx-page .cx-btn--gold:hover { border-color: var(--gold); background: rgba(179,154,88,0.12); }
/* ── Footers ── */
.cx-page footer.cx-footer { font-family: 'DM Sans', sans-serif; }
.cx-page .cx-footer-brand { display: inline-grid; justify-items: center; text-decoration: none; }
.cx-page .cx-footer-word { font-family: 'Playfair Display', serif; letter-spacing: 0.3em; margin-right: -0.3em; line-height: 1; }
.cx-page .cx-footer-sub { font-size: 9px; letter-spacing: 0.45em; margin-right: -0.45em; text-transform: uppercase; margin-top: 7px; }
.cx-page .cx-footer-langs { display: flex; gap: 8px; align-items: center; font-size: 13px; }
.cx-page .cx-footer-langs a { text-decoration: none; }
.cx-page footer.cx-footer--light { background: var(--bg); color: var(--text); padding: clamp(30px, 2.8vw, 40px) var(--cxpad) clamp(22px, 2vw, 30px); }
.cx-footer--light .cx-footer-row { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 24px; }
.cx-footer--light .cx-footer-word { font-size: 23px; color: var(--dark); }
.cx-footer--light .cx-footer-sub { color: var(--muted); }
.cx-footer--light .cx-footer-brand { justify-self: start; }
.cx-footer--light .cx-footer-contact { display: flex; align-items: center; font-size: 15px; }
.cx-footer--light .cx-footer-contact > * { padding: 0 20px; }
.cx-footer--light .cx-footer-contact > * + * { border-left: 1px solid rgba(179,154,88,0.8); }
.cx-footer--light .cx-footer-contact a { color: var(--dark); font-weight: 500; text-decoration: none; }
.cx-footer--light .cx-footer-contact a:hover { color: var(--green); }
.cx-footer--light .cx-footer-langs { justify-self: end; color: var(--gold); }
.cx-footer--light .cx-footer-langs a { color: var(--muted); }
.cx-footer--light .cx-footer-langs a.is-active { color: var(--dark); font-weight: 500; }
.cx-footer--light .cx-footer-bottom {
display: flex; justify-content: space-between; gap: 20px; margin-top: clamp(26px, 2.6vw, 38px);
font-size: 10.5px; letter-spacing: 2.4px; text-transform: uppercase; color: var(--muted);
}
.cx-page footer.cx-footer--dark { background: var(--green-deep); color: var(--bg); padding: clamp(36px, 3.4vw, 50px) var(--cxpad); border-top: 1px solid rgba(245,241,232,0.14); }
.cx-footer--dark .cx-footer-grid {
display: grid; grid-template-columns: auto minmax(0, 1fr) minmax(0, 1.2fr) auto auto; align-items: center;
}
.cx-footer--dark .cx-footer-grid > * { padding: 4px clamp(22px, 2.6vw, 44px); }
.cx-footer--dark .cx-footer-grid > :first-child { padding-left: 0; }
.cx-footer--dark .cx-footer-grid > :last-child { padding-right: 0; }
.cx-footer--dark .cx-footer-tag,
.cx-footer--dark .cx-footer-follow,
.cx-footer--dark .cx-footer-langs { border-left: 1px solid rgba(245,241,232,0.35); }
.cx-footer--dark .cx-footer-word { font-size: clamp(26px, 2.3vw, 34px); color: var(--bg); }
.cx-footer--dark .cx-footer-sub { color: rgba(245,241,232,0.8); }
.cx-footer--dark .cx-footer-tag { margin: 0; font-family: 'Playfair Display', serif; font-size: clamp(15px, 1.2vw, 17px); line-height: 1.45; color: var(--bg); }
.cx-footer--dark .cx-footer-tag span { display: block; }
.cx-footer--dark .cx-footer-block { display: flex; flex-direction: column; gap: 4px; font-size: 14px; color: rgba(245,241,232,0.85); }
.cx-footer--dark .cx-footer-label { color: var(--bg); margin-bottom: 4px; }
.cx-footer--dark .cx-footer-block a { color: rgba(245,241,232,0.85); text-decoration: none; }
.cx-footer--dark .cx-footer-block a:hover { color: var(--gold); }
.cx-footer--dark .cx-footer-icons { display: flex; gap: 14px; margin-top: 4px; }
.cx-footer--dark .cx-footer-icons a { display: inline-flex; width: 26px; height: 26px; align-items: center; justify-content: center; }
.cx-footer--dark .cx-footer-icons svg { width: 22px; height: 22px; }
.cx-footer--dark .cx-footer-langs { color: rgba(245,241,232,0.55); }
.cx-footer--dark .cx-footer-langs a { color: rgba(245,241,232,0.8); }
.cx-footer--dark .cx-footer-langs a.is-active { color: var(--bg); }
/* ── 1024 ── */
@media (max-width: 1024px) {
.cx-index .cx-intro { grid-template-columns: 1fr; gap: 26px; }
.cx-coll .cx-coll-head { flex-direction: column; gap: 18px; }
.cx-coll .cx-coll-lede { padding-top: 0; }
.cx-coll .cx-fit { grid-template-columns: minmax(0, 260px) minmax(0, 1fr); }
.cx-coll .cx-fit .cx-link { grid-column: 2; justify-self: start; }
.cx-coll .cx-detail { grid-template-columns: 1fr; }
.cx-page .cx-cta--split { flex-direction: column; align-items: flex-start; }
.cx-footer--dark .cx-footer-grid { grid-template-columns: 1fr 1fr; row-gap: 28px; }
.cx-footer--dark .cx-footer-grid > * { padding: 0; border-left: 0 !important; }
.cx-footer--light .cx-footer-row { grid-template-columns: 1fr auto; }
.cx-footer--light .cx-footer-contact { grid-column: 1 / -1; grid-row: 2; justify-content: flex-start; }
.cx-footer--light .cx-footer-contact > :first-child { padding-left: 0; }
}
/* ── 768 ── */
@media (max-width: 768px) {
.cx-index .cx-intro { padding-top: calc(73px + 30px); }
.cx-coll .cx-browse { padding-top: calc(73px + 14px); }
.cx-index .cx-cat-row, .cx-index .cx-cat-row--rev { grid-template-columns: 1fr; }
.cx-index .cx-cat-img,
.cx-index .cx-cat--wide .cx-cat-img,
.cx-index .cx-cat-row--rev .cx-cat--wide .cx-cat-img { flex: none; aspect-ratio: 1.5; min-height: 0; }
.cx-index .cx-bespoke { grid-template-columns: 1fr; }
.cx-index .cx-bespoke-img { aspect-ratio: 2; }
.cx-coll .cx-tabs-row { flex-direction: column; align-items: flex-start; gap: 6px; }
.cx-coll .cx-tab { min-height: 44px; }
.cx-coll .cx-grid { grid-template-columns: 1fr; }
.cx-coll .cx-card--wide .cx-card-img { aspect-ratio: 1.69; }
.cx-coll .cx-fit { grid-template-columns: 1fr; }
.cx-coll .cx-fit .cx-link { grid-column: auto; }
.cx-coll .cx-spec-row { grid-template-columns: 1fr; gap: 4px; }
.cx-page .cx-link, .cx-page .cx-more { min-height: 44px; box-sizing: border-box; padding-top: 12px; }
.cx-page .cx-cta-actions { flex-direction: column; align-items: stretch; width: 100%; }
.cx-page .cx-btn { white-space: normal; text-align: center; }
.cx-footer--light .cx-footer-contact { flex-wrap: wrap; row-gap: 4px; }
.cx-footer--light .cx-footer-contact > * { padding: 0 14px; min-height: 44px; display: inline-flex; align-items: center; }
.cx-footer--light .cx-footer-bottom { flex-direction: column; gap: 8px; }
.cx-page .cx-footer-langs a { min-height: 44px; min-width: 32px; display: inline-flex; align-items: center; justify-content: center; }
.cx-footer--dark .cx-footer-grid { grid-template-columns: 1fr; }
.cx-footer--dark .cx-footer-block a { min-height: 44px; display: inline-flex; align-items: center; }
.cx-footer--dark .cx-footer-icons a { width: 44px; height: 44px; }
.cx-page .cx-crumbs a { min-height: 44px; display: inline-flex; align-items: center; padding: 0; }
.cx-page .cx-footer-brand { min-height: 44px; align-content: center; }
.cx-footer--dark .cx-footer-brand { justify-self: start; }
.cx-footer--light .cx-footer-contact { flex-direction: column; align-items: flex-start; }
.cx-footer--light .cx-footer-contact > * { padding: 0; border-left: 0 !important; }
}
/* ── ENQUIRE IN THE MENU BAR (23 Sep 2026) ─────────────────────────
The owner's Collections mockup: a hairline, the languages, another
hairline, then "Enquire →". A text link rather than a boxed button,
so the bar keeps its calm; it stands for the old "Request a
Consultation" button, which stays hidden. Under 1024px the links go
into the menu, whose own consultation button does this job. */
body > nav .nav-right { gap: 0; }
body > nav .nav-right > .lang-switcher,
body > nav .nav-enquire {
border-left: 1px solid rgba(29,48,37,0.25);
padding-left: clamp(16px, 1.6vw, 26px); margin-left: clamp(16px, 1.6vw, 26px);
}
body > nav.hero-mode .nav-right > .lang-switcher,
body > nav.hero-mode .nav-enquire { border-left-color: rgba(245,241,232,0.4); }
body > nav .nav-enquire {
display: inline-flex; align-items: center; gap: 8px;
font-family: 'DM Sans', sans-serif; font-size: 14px; font-weight: 500; letter-spacing: 0.2px;
color: var(--dark); text-decoration: none; white-space: nowrap;
transition: color 0.25s;
}
body > nav .nav-enquire:hover { color: var(--green); }
body > nav.hero-mode .nav-enquire { color: var(--bg); }
body > nav.hero-mode .nav-enquire:hover { color: #fff; }
.nav-enquire-arrow { display: inline-block; transition: transform 0.3s cubic-bezier(0.16,1,0.3,1); }
body > nav .nav-enquire:hover .nav-enquire-arrow { transform: translateX(3px); }
@media (max-width: 1024px) {
body > nav .nav-enquire { display: none; }
body > nav .nav-right > .lang-switcher { border-left: 0; padding-left: 0; margin-left: 0; }
}
/* ── SPACING, OPENED UP (23 Sep 2026) ───────────────────────────────
The mockups' section joins were tight — about 48-57px at 1440, where
a house like this wants the page to breathe. Raised by roughly half:
same ground either side of a join now ~120-145px, a change of ground
~150-165px, in line with the section-join rule in CLAUDE.md. Only the
gaps between sections move; nothing inside a section does. */
.home .hp-collections { padding-top: clamp(48px, 5.3vw, 80px); padding-bottom: clamp(52px, 5.3vw, 80px); }
.home .hp-stats { padding-top: clamp(52px, 5vw, 76px); padding-bottom: clamp(52px, 5vw, 76px); }
.home .hp-express { padding-top: clamp(52px, 5vw, 76px); padding-bottom: clamp(52px, 5.3vw, 80px); }
.home .hp-work { padding-top: clamp(48px, 5.3vw, 80px); padding-bottom: clamp(30px, 3.3vw, 50px); }
.home .hp-craft { padding-top: clamp(48px, 5vw, 72px); padding-bottom: clamp(48px, 5vw, 72px); }
.home .hp-process { padding-top: clamp(48px, 5vw, 72px); padding-bottom: clamp(56px, 5.6vw, 82px); }
.home .hp-testi { padding-top: clamp(56px, 5.6vw, 82px); padding-bottom: clamp(52px, 5.3vw, 78px); }
.home .hp-contact { padding-top: clamp(56px, 5.6vw, 82px); padding-bottom: clamp(60px, 5.9vw, 86px); }
:is(.home, .svc, .ct, .ab, .pro, .hpf) .hp-footer-main { padding-top: clamp(52px, 5vw, 76px); }
.cx-index .cx-cats { padding-top: clamp(34px, 3.6vw, 54px); }
.cx-index .cx-bespoke {
margin-top: clamp(30px, 3.1vw, 46px);
padding-top: clamp(34px, 3.3vw, 48px); padding-bottom: clamp(52px, 5.3vw, 80px);
}
.cx-page .cx-cta { padding-top: clamp(60px, 6.4vw, 96px); padding-bottom: clamp(60px, 6.4vw, 96px); }
.cx-coll .cx-fit,
.cx-coll .cx-detail {
margin-top: clamp(60px, 6.2vw, 92px);
padding-top: clamp(34px, 3.3vw, 48px); padding-bottom: clamp(52px, 5.3vw, 80px);
}
.cx-page footer.cx-footer--dark { padding-top: clamp(46px, 4.6vw, 68px); padding-bottom: clamp(46px, 4.6vw, 68px); }
/* ══════════════════════════════════════════════════════════════════
SERVICES — rebuilt 23 Sep 2026 to the owner's mockup.
services.html only (body.svc), svc- classes. Hero fading into a
photograph, a strip of the five stages, 01 and 02 as a pair, 03 on a
dark band with the 3D render full width, 04 and 05 as alternating
rows, the questions, a dark call to action, then the homepage footer
(its rules are shared through :is(.home, .svc, .ct, .ab, .pro, .hpf) in HOMEPAGE above).
Section joins follow CLAUDE.md: ~128-144px on the same ground,
more where the ground changes.
══════════════════════════════════════════════════════════════════ */
body.svc {
--pad: clamp(20px, 5.6vw, 96px);
--svc-join: clamp(56px, 4.6vw, 70px); /* each side of a same-ground join */
background: var(--bg);
}
.svc { display: block; }
/* shared type */
.svc .svc-eyebrow {
display: block; font-family: 'DM Sans', sans-serif; font-size: 11px; font-weight: 500;
letter-spacing: 3.5px; text-transform: uppercase; color: var(--text); margin-bottom: 18px;
}
.svc .svc-eyebrow--gold { color: var(--gold-ink); }
.svc .svc-approval .svc-eyebrow--gold { color: var(--gold); }
.svc .svc-title {
font-family: 'Playfair Display', serif; font-weight: 400;
font-size: clamp(32px, 3.3vw, 52px); line-height: 1.1; letter-spacing: -0.4px;
color: var(--dark); margin: 0; text-wrap: balance;
}
.svc .svc-title--light { color: var(--bg); }
.svc .svc-body {
font-family: 'DM Sans', sans-serif; font-size: 16px; line-height: 1.65;
color: var(--muted); margin: 0; max-width: 52ch;
}
.svc .svc-body--light { color: rgba(245,241,232,0.86); }
.svc .svc-n { font-family: 'Playfair Display', serif; color: var(--gold-display); font-weight: 400; }
.svc .svc-arrow {
display: inline-block; font-size: 0.9em; color: var(--gold-display);
transition: transform 0.3s cubic-bezier(0.16,1,0.3,1);
}
.svc a:hover .svc-arrow { transform: translate(2px, -2px); }
.svc .svc-link {
display: inline-flex; align-items: center; gap: 10px;
font-family: 'DM Sans', sans-serif; font-size: 15px; color: var(--text);
text-decoration: none; white-space: nowrap;
padding-bottom: 7px; border-bottom: 1px solid rgba(179,154,88,0.8);
transition: color 0.3s, border-color 0.3s;
}
.svc .svc-link:hover { color: var(--green); border-color: var(--gold-display); }
.svc .svc-link--light { color: var(--bg); }
.svc .svc-link--light .svc-arrow { color: var(--gold); }
.svc .svc-link--light:hover { color: var(--bg); border-color: var(--gold); }
.svc .svc-img { overflow: hidden; background: var(--bg-alt); }
.svc .svc-img img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* ── Hero ── (30 Sep 2026: the owner's living room — green wall on the
left, sofa on the right — dark like For Professionals. The dark ground
is what tells creator.js to make the menu bar see-through with light
lettering (hero-mode), exactly as it does there.) */
.svc .svc-hero {
position: relative; overflow: hidden;
background: var(--green-deep);
min-height: clamp(560px, 50vw, 760px);
padding: calc(var(--navh, 93px) + 40px) var(--pad) 90px;
display: flex; align-items: center; box-sizing: border-box;
}
.svc .svc-hero-media { position: absolute; inset: 0; }
.svc .svc-hero-media img { width: 100%; height: 100%; object-fit: cover; object-position: 30% 50%; display: block; }
/* The green wall already gives the words a dark ground, so the veil is
lighter than the For Professionals one: enough for contrast, no more. */
.svc .svc-hero-veil {
position: absolute; inset: 0; pointer-events: none;
background:
linear-gradient(90deg, rgba(14,24,18,0.38) 0%, rgba(14,24,18,0.2) 30%, rgba(14,24,18,0) 50%),
linear-gradient(180deg, rgba(14,24,18,0.45) 0%, rgba(14,24,18,0) 22%);
}
.svc .svc-hero-copy { position: relative; z-index: 1; max-width: 640px; }
.svc .svc-hero .svc-eyebrow { color: var(--gold); }
.svc .svc-hero-title {
font-family: 'Playfair Display', serif; font-weight: 400;
font-size: clamp(42px, 5.3vw, 82px); line-height: 1.02; letter-spacing: -1px;
color: var(--bg); margin: 0;
}
.svc .svc-hero-sub {
font-family: 'DM Sans', sans-serif; font-size: clamp(16px, 1.3vw, 20px); line-height: 1.5;
color: rgba(245,241,232,0.92); margin: clamp(16px, 1.4vw, 22px) 0 clamp(26px, 2.4vw, 36px); max-width: 36ch;
}
.svc .svc-hero-actions { display: grid; justify-items: start; gap: 22px; }
.svc .svc-hero-btn {
display: inline-flex; align-items: center; gap: 14px;
min-height: 48px; padding: 0 26px; box-sizing: border-box;
background: var(--bg); color: var(--dark); border: 1px solid var(--bg);
font-family: 'DM Sans', sans-serif; font-size: 15px; text-decoration: none; letter-spacing: 0.2px;
transition: background 0.35s, color 0.35s;
}
.svc .svc-hero-btn .svc-arrow { color: var(--gold-display); }
.svc .svc-hero-btn:hover { background: transparent; color: var(--bg); }
.svc .svc-hero-btn:hover .svc-arrow { color: var(--gold); }
.svc .svc-hero-btn:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
/* ── The five stages ── */
.svc .svc-stages {
background: var(--bg-light);
border-top: 1px solid rgba(179,154,88,0.35);
border-bottom: 1px solid rgba(179,154,88,0.35);
padding: 0 var(--pad);
}
.svc .svc-stages ol {
list-style: none; margin: 0; padding: 0;
display: flex; justify-content: space-between; align-items: center;
}
.svc .svc-stages li { display: flex; align-items: center; flex: 1 1 auto; }
.svc .svc-stages li:last-child { flex: 0 0 auto; }
.svc .svc-stages li:not(:last-child)::after {
content: ''; flex: 1 1 auto; height: 1px; min-width: 24px; max-width: 80px;
background: rgba(179,154,88,0.7); margin: 0 clamp(14px, 2.2vw, 40px);
}
.svc .svc-stages a {
display: inline-flex; align-items: baseline; gap: 12px;
padding: clamp(22px, 2vw, 30px) 0;
font-family: 'DM Sans', sans-serif; font-size: 15px; color: var(--text); text-decoration: none;
transition: color 0.3s;
}
.svc .svc-stages a:hover { color: var(--green); }
.svc .svc-stages .svc-n { font-size: clamp(28px, 2.5vw, 40px); line-height: 1; }
/* ── 01 + 02 ── */
.svc .svc-begin { padding: calc(var(--svc-join) + 10px) var(--pad) calc(var(--svc-join) + 30px); }
.svc .svc-begin > .svc-title { margin-bottom: clamp(24px, 2.2vw, 34px); }
.svc .svc-pair { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(20px, 3.1vw, 48px); }
.svc .svc-card .svc-img { aspect-ratio: 1.75; }
.svc .svc-card-title {
font-family: 'Playfair Display', serif; font-weight: 400;
font-size: clamp(22px, 1.8vw, 28px); line-height: 1.25; color: var(--dark);
margin: clamp(18px, 1.6vw, 24px) 0 10px;
}
.svc .svc-more { margin-top: 16px; }
.svc .svc-more summary {
display: inline-flex; align-items: center; gap: 12px; cursor: pointer; list-style: none;
font-family: 'DM Sans', sans-serif; font-size: 14.5px; color: var(--text);
padding-bottom: 7px; border-bottom: 1px solid rgba(179,154,88,0.8);
transition: color 0.3s;
}
.svc .svc-more summary::-webkit-details-marker { display: none; }
.svc .svc-more summary:hover { color: var(--green); }
.svc .svc-more summary:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.svc .svc-plus { position: relative; width: 11px; height: 11px; }
.svc .svc-plus::before, .svc .svc-plus::after {
content: ''; position: absolute; left: 50%; top: 50%; background: var(--gold-display);
transition: transform 0.4s cubic-bezier(0.16,1,0.3,1), opacity 0.3s;
}
.svc .svc-plus::before { width: 11px; height: 1px; transform: translate(-50%, -50%); }
.svc .svc-plus::after { width: 1px; height: 11px; transform: translate(-50%, -50%); }
.svc .svc-more[open] .svc-plus::after { transform: translate(-50%, -50%) rotate(90deg); opacity: 0; }
.svc .svc-more ul { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 10px; max-width: 56ch; }
.svc .svc-more li {
position: relative; padding-left: 22px;
font-family: 'DM Sans', sans-serif; font-size: 15px; line-height: 1.6; color: var(--muted);
}
.svc .svc-more li::before {
content: ''; position: absolute; left: 0; top: 10px; width: 10px; height: 1px; background: var(--gold);
}
/* ── 03 Approval ── */
.svc .svc-approval {
background: var(--green-deep);
padding: clamp(64px, 5.8vw, 88px) clamp(16px, 2.1vw, 32px) clamp(16px, 2.1vw, 32px);
}
.svc .svc-approval-head { padding: 0 calc(var(--pad) - clamp(16px, 2.1vw, 32px)); margin-bottom: clamp(26px, 2.4vw, 36px); }
.svc .svc-approval .svc-title { font-size: clamp(36px, 4.4vw, 68px); margin-bottom: 16px; }
.svc .svc-approval .svc-body { max-width: none; }
.svc .svc-viz { position: relative; margin: 0; display: flex; gap: clamp(8px, 1vw, 16px); aspect-ratio: 2.9; }
.svc .svc-viz-frame { flex: 1 1 0; min-width: 0; overflow: hidden; background: rgba(245,241,232,0.06); }
.svc .svc-viz-frame img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 62%; display: block; }
/* No finished-room photograph yet: the render runs the full width. */
.svc .svc-viz-frame--built:not(:has(img)) { display: none; }
.svc .svc-viz figcaption {
position: absolute; left: 0; right: 0; bottom: 0;
padding: 48px clamp(18px, 2.2vw, 34px) clamp(16px, 1.6vw, 24px);
background: linear-gradient(0deg, rgba(14,20,16,0.62), rgba(14,20,16,0));
font-family: 'DM Sans', sans-serif; font-size: 13px; color: rgba(245,241,232,0.92);
pointer-events: none;
}
/* ── 04 + 05 ── */
.svc .svc-make { padding: calc(var(--svc-join) + 20px) var(--pad) calc(var(--svc-join) + 10px); display: grid; row-gap: clamp(28px, 2.8vw, 44px); }
.svc .svc-row {
display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr);
column-gap: clamp(28px, 4.3vw, 64px); align-items: center;
}
.svc .svc-row--rev { grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.12fr); }
.svc .svc-img--making { aspect-ratio: 1.9; }
.svc .svc-img--making img { object-position: 45% 55%; }
.svc .svc-img--install { aspect-ratio: 1.75; }
.svc .svc-img--install img { object-position: 50% 58%; }
.svc .svc-row-copy .svc-title { margin-bottom: clamp(16px, 1.4vw, 22px); }
.svc .svc-row-copy .svc-body { margin-bottom: 22px; max-width: 44ch; }
.svc .svc-row-copy .svc-body:last-child { margin-bottom: 0; }
/* ── Questions ── */
.svc .svc-faq {
background: var(--bg-light);
border-top: 1px solid rgba(179,154,88,0.25);
padding: calc(var(--svc-join) + 6px) var(--pad) calc(var(--svc-join) + 30px);
}
.svc .svc-faq > .svc-title { margin-bottom: clamp(22px, 2vw, 30px); }
.svc .svc-faq .faq-list { border-top: 0; }
.svc .svc-faq .faq-item { border-bottom: 1px solid rgba(90,78,62,0.2); }
.svc .svc-faq .faq-q { padding: 16px 4px 14px 2px; gap: 24px; }
.svc .svc-faq .faq-q-text {
font-family: 'Playfair Display', serif; font-weight: 400;
font-size: clamp(17px, 1.3vw, 20px); color: var(--dark);
}
.svc .svc-faq .faq-q:hover .faq-q-text,
.svc .svc-faq .faq-q[aria-expanded="true"] .faq-q-text { color: var(--green); }
.svc .svc-faq .faq-q-mark { width: 14px; height: 14px; }
.svc .svc-faq .faq-q-mark::before { width: 12px; }
.svc .svc-faq .faq-q-mark::after { height: 12px; }
.svc .svc-faq .faq-a-inner { padding: 2px 2px 24px; }
.svc .svc-faq .faq-a-inner p { font-size: 15px; line-height: 1.8; }
/* ── Call to action ── */
.svc .svc-cta {
background: var(--green-deep);
padding: clamp(52px, 4.6vw, 70px) var(--pad);
display: flex; align-items: center; justify-content: space-between; gap: 40px 56px; flex-wrap: wrap;
}
.svc .svc-cta .svc-title { margin-bottom: 12px; }
.svc .svc-cta-actions { display: flex; align-items: center; gap: clamp(28px, 2.8vw, 44px); flex-wrap: wrap; }
.svc .svc-btn {
display: inline-flex; align-items: center; gap: 14px;
padding: 16px 30px; border: 1px solid rgba(245,241,232,0.75);
font-family: 'DM Sans', sans-serif; font-size: 15px; color: var(--bg); text-decoration: none;
transition: background 0.35s, color 0.35s, border-color 0.35s;
}
.svc .svc-btn .svc-arrow { color: var(--gold); }
.svc .svc-btn:hover { background: var(--bg); color: var(--dark); border-color: var(--bg); }
.svc .svc-btn:hover .svc-arrow { color: var(--gold-display); }
/* The closing photograph, between the call to action and the footer. */
.svc .svc-closing { position: relative; margin: 0; background: var(--green-deep); }
.svc .svc-closing img { display: block; width: 100%; height: auto; aspect-ratio: 2000 / 690; object-fit: cover; }
@media (max-width: 768px) {
/* a phone keeps the hands, the plan and the samples */
.svc .svc-closing img { aspect-ratio: 1.35; object-position: 74% 50%; }
}
/* ── 1024 ── */
@media (max-width: 1024px) {
.svc .svc-hero-veil { background:
linear-gradient(90deg, rgba(14,24,18,0.8) 0%, rgba(14,24,18,0.55) 42%, rgba(14,24,18,0.05) 76%),
linear-gradient(180deg, rgba(14,24,18,0.5) 0%, rgba(14,24,18,0) 22%); }
.svc .svc-stages a { font-size: 14px; gap: 8px; }
.svc .svc-row, .svc .svc-row--rev { grid-template-columns: 1fr 1fr; }
}
/* ── 768 ── */
@media (max-width: 768px) {
.svc .svc-hero { min-height: 640px; align-items: flex-end; padding-top: calc(var(--navh, 74px) + 40px); padding-bottom: 56px; }
/* On a phone the sofa would sit under the words, so the photograph
takes the top of the hero and the words sit beneath it on green. */
.svc .svc-hero { display: block; min-height: 0; padding: 0 0 48px; }
.svc .svc-hero-media { position: relative; inset: auto; height: clamp(300px, 82vw, 520px); }
.svc .svc-hero-media img { object-position: 80% 50%; }
.svc .svc-hero-veil { bottom: auto; height: clamp(300px, 82vw, 520px); background: linear-gradient(180deg, rgba(14,24,18,0.78) 0%, rgba(14,24,18,0.35) 20%, rgba(14,24,18,0) 40%), linear-gradient(0deg, rgba(29,48,37,1) 0%, rgba(29,48,37,0) 22%); }
.svc .svc-hero-copy { padding: 26px var(--pad) 0; }
.svc .svc-hero-copy { max-width: none; }
.svc .svc-link, .svc .svc-more summary { min-height: 44px; box-sizing: border-box; padding-top: 12px; }
.svc .svc-link { white-space: normal; }
.svc .svc-stages { padding: 0; overflow-x: auto; scrollbar-width: none; touch-action: pan-x pan-y; }
.svc .svc-stages::-webkit-scrollbar { display: none; }
.svc .svc-stages ol { padding: 0 var(--pad); width: max-content; gap: 0; }
.svc .svc-stages li:not(:last-child)::after { width: 28px; flex: none; margin: 0 14px; }
.svc .svc-stages a { min-height: 44px; padding: 18px 0; }
.svc .svc-pair { grid-template-columns: 1fr; row-gap: 48px; }
.svc .svc-row, .svc .svc-row--rev { grid-template-columns: 1fr; row-gap: 26px; }
.svc .svc-row--rev .svc-img { order: -1; }
.svc .svc-img--making, .svc .svc-img--install { aspect-ratio: 1.6; }
.svc .svc-make { row-gap: 64px; }
.svc .svc-viz { aspect-ratio: 1.35; flex-direction: column; }
.svc .svc-faq .faq-q { min-height: 56px; }
.svc .svc-cta { flex-direction: column; align-items: flex-start; }
.svc .svc-btn { min-height: 48px; box-sizing: border-box; }
}
/* ══════════════════════════════════════════════════════════════════
CONTACT — rebuilt 25 Sep 2026 to the owner's mockup.
contact.html only (body.ct), ct- classes. A split first screen — the
green armchair with the direct lines, the enquiry form beside it — then
the showroom beside the material samples, a dark band for
professionals, and the homepage footer (shared through
:is(.home, .svc, .ct, .ab, .pro, .hpf) in HOMEPAGE above). The split runs up under the
fixed menu bar, which is ivory here, so no nav height is hard-coded.
══════════════════════════════════════════════════════════════════ */
body.ct {
--pad: clamp(20px, 5.6vw, 96px);
--ctnav: 92px; /* room left for the bar at the top of each column */
background: var(--bg);
}
.ct { display: block; }
.ct .ct-eyebrow {
display: block; font-family: 'DM Sans', sans-serif; font-size: 11px; font-weight: 500;
letter-spacing: 3.5px; text-transform: uppercase; color: var(--text); margin: 0 0 14px;
}
.ct .ct-eyebrow strong { font-weight: 600; color: var(--dark); }
.ct .ct-eyebrow--light { color: rgba(245,241,232,0.9); margin-bottom: 18px; }
.ct .ct-title {
font-family: 'Playfair Display', serif; font-weight: 400;
font-size: clamp(32px, 3.3vw, 52px); line-height: 1.08; letter-spacing: -0.5px;
color: var(--dark); margin: 0; text-wrap: balance;
}
.ct .ct-title--light { color: var(--bg); }
.ct .ct-title--xl { font-size: clamp(42px, 5vw, 80px); line-height: 1.02; letter-spacing: -1px; text-wrap: initial; }
.ct .ct-arrow {
display: inline-block; font-size: 0.9em; color: var(--gold-display);
transition: transform 0.3s cubic-bezier(0.16,1,0.3,1);
}
.ct a:hover .ct-arrow, .ct button:hover .ct-arrow { transform: translate(2px, -2px); }
.ct .ct-link {
display: inline-flex; align-items: center; gap: 10px;
font-family: 'DM Sans', sans-serif; font-size: 16px; color: var(--text); text-decoration: none;
padding-bottom: 7px; border-bottom: 1px solid rgba(179,154,88,0.85);
transition: color 0.3s, border-color 0.3s;
}
.ct .ct-link:hover { color: var(--green); border-color: var(--gold-display); }
.ct .ct-link--light { color: var(--bg); }
.ct .ct-link--light .ct-arrow { color: var(--gold); }
.ct .ct-link--light:hover { color: var(--bg); border-color: var(--gold); }
/* ── The split ── */
.ct .ct-split { display: grid; grid-template-columns: minmax(0, 53fr) minmax(0, 47fr); min-height: 100vh; }
.ct .ct-hero {
position: relative; overflow: hidden; background: var(--green-deep);
display: flex; flex-direction: column; justify-content: space-between;
padding: calc(var(--ctnav) + clamp(28px, 3.3vw, 54px)) clamp(24px, 4.3vw, 64px) clamp(22px, 1.8vw, 28px);
color: var(--bg);
}
.ct .ct-hero-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 62%; }
.ct .ct-hero::before {
content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
background:
linear-gradient(180deg, rgba(12,20,15,0.5) 0%, rgba(12,20,15,0.12) 34%, rgba(12,20,15,0) 55%),
linear-gradient(0deg, rgba(12,20,15,0.55) 0%, rgba(12,20,15,0) 22%);
}
.ct .ct-hero-copy, .ct .ct-hero-foot { position: relative; z-index: 2; }
.ct .ct-hero-title {
font-family: 'Playfair Display', serif; font-weight: 400;
font-size: clamp(40px, 4.9vw, 76px); line-height: 1.03; letter-spacing: -1px;
color: var(--bg); margin: 0 0 clamp(14px, 1.3vw, 20px);
}
/* Russian runs longer ("Ваше пространство."): keep the title to two lines. */
html[lang="ru"] .ct .ct-hero-title { font-size: clamp(32px, 4vw, 62px); }
.ct .ct-hero-sub { font-family: 'DM Sans', sans-serif; font-size: clamp(17px, 1.3vw, 20px); line-height: 1.5; color: rgba(245,241,232,0.94); margin: 0; }
.ct .ct-hero-foot { margin-top: 64px; }
.ct .ct-direct { list-style: none; margin: 0 0 clamp(26px, 2.6vw, 40px); padding: 0; display: flex; flex-wrap: wrap; align-items: center; row-gap: 10px; }
.ct .ct-direct li { display: flex; align-items: center; }
.ct .ct-direct li + li { border-left: 1px solid rgba(245,241,232,0.6); margin-left: clamp(18px, 2vw, 32px); padding-left: clamp(18px, 2vw, 32px); }
.ct .ct-direct a {
display: inline-flex; align-items: center; gap: 8px;
font-family: 'DM Sans', sans-serif; font-size: 15px; color: var(--bg); text-decoration: none;
padding-bottom: 5px; border-bottom: 1px solid rgba(245,241,232,0.7); transition: border-color 0.3s;
}
.ct .ct-direct a .ct-arrow { color: var(--bg); font-size: 0.8em; }
.ct .ct-direct a:hover { border-color: var(--gold); }
.ct .ct-caption { display: block; font-family: 'DM Sans', sans-serif; font-size: 12px; color: rgba(245,241,232,0.8); }
/* ── The form ── */
.ct .ct-form-col {
background: var(--bg);
padding: calc(var(--ctnav) + clamp(28px, 3vw, 48px)) clamp(24px, 3.3vw, 56px) clamp(40px, 3.6vw, 56px) clamp(24px, 3.6vw, 60px);
}
.ct .ct-lede { font-family: 'DM Sans', sans-serif; font-size: clamp(16px, 1.2vw, 18px); color: var(--text); margin: 14px 0 clamp(22px, 2.2vw, 32px); }
.ct .ct-form { display: grid; gap: 0; }
.ct .ct-seg { display: grid; grid-template-columns: repeat(3, 1fr); border: 1px solid rgba(29,48,37,0.45); margin-bottom: clamp(22px, 2vw, 30px); }
.ct .ct-seg[hidden] { display: none; }
.ct .ct-seg button {
min-height: 50px; padding: 8px 10px;
font-family: 'DM Sans', sans-serif; font-size: 14px; line-height: 1.25; color: var(--text); background: transparent;
transition: background 0.3s, color 0.3s;
}
.ct .ct-seg button + button { border-left: 1px solid rgba(29,48,37,0.45); }
.ct .ct-seg button:hover { background: rgba(29,48,37,0.06); }
.ct .ct-seg button[aria-pressed="true"] { background: var(--green-deep); color: var(--bg); }
.ct .ct-seg button:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; position: relative; z-index: 1; }
.ct .ct-field { display: grid; gap: 8px; margin-bottom: 18px; }
.ct .ct-field[hidden] { display: none; }
.ct .ct-field label { font-family: 'DM Sans', sans-serif; font-size: 14px; color: var(--text); }
.ct .ct-field input, .ct .ct-field select, .ct .ct-field textarea {
width: 100%; box-sizing: border-box;
font-family: 'DM Sans', sans-serif; font-size: 15px; color: var(--text);
background: var(--bg-light); border: 1px solid rgba(29,48,37,0.32); border-radius: 0;
padding: 0 14px; min-height: 48px; transition: border-color 0.3s, box-shadow 0.3s;
}
.ct .ct-field select {
-webkit-appearance: none; appearance: none; padding-right: 40px; cursor: pointer;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%231D3025' stroke-width='1.3'/%3E%3C/svg%3E");
background-repeat: no-repeat; background-position: right 16px center;
}
.ct .ct-field textarea { padding: 12px 14px; min-height: 128px; resize: vertical; line-height: 1.55; }
.ct .ct-field textarea::placeholder { color: var(--muted); opacity: 0.85; }
.ct .ct-field input:focus, .ct .ct-field select:focus, .ct .ct-field textarea:focus {
outline: none; border-color: var(--dark); box-shadow: 0 0 0 1px var(--dark);
}
.ct .ct-attach {
justify-self: start; display: inline-flex; align-items: center; gap: 14px;
font-family: 'DM Sans', sans-serif; font-size: 14px; color: var(--text); text-decoration: none;
margin: 8px 0 18px;
}
.ct .ct-attach svg { width: 20px; height: 20px; flex: none; fill: none; stroke: var(--dark); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.ct .ct-attach span { padding-bottom: 4px; border-bottom: 1px solid rgba(179,154,88,0.85); transition: color 0.3s; }
.ct .ct-attach:hover span { color: var(--green); }
.ct .ct-required { font-family: 'DM Sans', sans-serif; font-size: 12.5px; color: var(--muted); margin: 0 0 clamp(24px, 2.2vw, 32px); }
.ct .ct-submit {
width: 100%; min-height: 62px; display: inline-flex; align-items: center; justify-content: center; gap: 14px;
background: var(--green-deep); color: var(--bg);
font-family: 'Playfair Display', serif; font-size: clamp(18px, 1.4vw, 21px);
transition: background 0.35s;
}
.ct .ct-submit { text-transform: none; letter-spacing: 0.2px; font-weight: 400; }
.ct .ct-submit .ct-arrow { color: var(--bg); }
.ct .ct-submit:hover { background: var(--green); }
.ct .ct-submit:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.ct .ct-form .form-status { font-family: 'DM Sans', sans-serif; font-size: 13.5px; color: var(--dark); margin: 14px 0 0; }
.ct .ct-form .form-status a { color: inherit; }
.ct .ct-privacy { font-family: 'DM Sans', sans-serif; font-size: 12.5px; color: var(--muted); margin: 18px 0 0; }
/* ── The showroom ── */
.ct .ct-visit {
display: grid; grid-template-columns: minmax(0, 47.5fr) minmax(0, 52.5fr); align-items: center; column-gap: clamp(28px, 3vw, 48px);
padding: clamp(28px, 2.5vw, 36px) clamp(16px, 2.5vw, 36px) clamp(28px, 2.5vw, 36px) var(--pad);
}
.ct .ct-visit-copy { padding: clamp(24px, 2.4vw, 40px) 0; }
.ct .ct-visit-sub { font-family: 'DM Sans', sans-serif; font-size: clamp(17px, 1.45vw, 22px); line-height: 1.45; color: var(--text); margin: clamp(20px, 2vw, 30px) 0 0; max-width: 28ch; }
.ct .ct-rule { display: block; width: 80px; height: 1px; background: var(--gold); margin: clamp(28px, 2.6vw, 40px) 0; }
.ct .ct-address { font-style: normal; font-family: 'DM Sans', sans-serif; font-size: 17px; line-height: 1.6; color: var(--text); }
.ct .ct-hours { font-family: 'DM Sans', sans-serif; font-size: 17px; color: var(--text); margin: 18px 0 clamp(22px, 2vw, 30px); }
.ct .ct-visit-links { display: grid; justify-items: start; gap: 18px; }
.ct .ct-visit-img { aspect-ratio: 0.95; overflow: hidden; background: var(--bg-alt); }
.ct .ct-visit-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* ── Professionals ── */
.ct .ct-pro {
background: var(--green-deep);
padding: clamp(48px, 4.6vw, 72px) var(--pad);
display: flex; align-items: center; justify-content: space-between; gap: 28px 48px; flex-wrap: wrap;
}
.ct .ct-pro-sub { font-family: 'DM Sans', sans-serif; font-size: clamp(16px, 1.35vw, 20px); color: rgba(245,241,232,0.88); margin: 12px 0 0; }
body.ct footer.hp-footer { border-top: 1px solid rgba(179,154,88,0.35); }
/* ── 1024 ── */
@media (max-width: 1024px) {
body.ct { --ctnav: 82px; }
.ct .ct-split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.ct .ct-seg button { font-size: 13px; }
.ct .ct-visit { grid-template-columns: 1fr 1fr; }
}
/* ── 768 ── */
@media (max-width: 768px) {
body.ct { --ctnav: 74px; }
.ct .ct-split { grid-template-columns: 1fr; min-height: 0; }
.ct .ct-hero { min-height: 620px; }
.ct .ct-form-col { padding-top: clamp(48px, 10vw, 64px); }
.ct .ct-direct a { min-height: 44px; box-sizing: border-box; padding-top: 12px; }
/* One link per line on a phone, and a deeper veil: here the links sit
over the bright travertine floor rather than the green wall. */
.ct .ct-direct { flex-direction: column; align-items: flex-start; row-gap: 4px; }
.ct .ct-direct li + li { border-left: 0; margin-left: 0; padding-left: 0; }
.ct .ct-hero::before {
background:
linear-gradient(180deg, rgba(12,20,15,0.62) 0%, rgba(12,20,15,0.3) 34%, rgba(12,20,15,0) 50%),
linear-gradient(0deg, rgba(12,20,15,0.86) 0%, rgba(12,20,15,0.55) 30%, rgba(12,20,15,0) 55%);
}
.ct .ct-attach, .ct .ct-link { min-height: 44px; }
.ct .ct-field input, .ct .ct-field select, .ct .ct-field textarea { font-size: 16px; }
.ct .ct-seg button { min-height: 52px; }
.ct .ct-visit { grid-template-columns: 1fr; padding: 64px var(--pad); row-gap: 36px; }
.ct .ct-visit-copy { padding: 0; }
.ct .ct-visit-img { aspect-ratio: 1.1; }
.ct .ct-pro { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 420px) {
.ct .ct-seg button { font-size: 12.5px; padding: 6px; }
}
/* ══════════════════════════════════════════════════════════════════
ABOUT — rebuilt 28 Sep 2026 to the owner's mockup.
about.html only (body.ab), ab- classes. Intro, a full-width room,
the founder beside his portrait, the people on a dark band (eleven,
six to a row, the last row centred) with the two crews beneath,
"Care, in every detail.", the showroom, the homepage footer (shared
through :is(.home, .svc, .ct, .ab, .pro, .hpf) in HOMEPAGE above).
The people photographs are shown in warm monochrome, as in the
mockup: it evens out portraits taken in different light, and a
pointer over a portrait brings its colour back.
══════════════════════════════════════════════════════════════════ */
body.ab {
--pad: clamp(20px, 5.6vw, 96px);
background: var(--bg);
}
.ab { display: block; }
.ab .ab-eyebrow {
display: block; font-family: 'DM Sans', sans-serif; font-size: 11px; font-weight: 500;
letter-spacing: 3.5px; text-transform: uppercase; color: var(--text); margin: 0 0 14px;
}
.ab .ab-h1 {
font-family: 'Playfair Display', serif; font-weight: 400;
font-size: clamp(44px, 5.4vw, 84px); line-height: 1.02; letter-spacing: -1px;
color: var(--dark); margin: 0;
}
.ab .ab-h2 {
font-family: 'Playfair Display', serif; font-weight: 400;
font-size: clamp(32px, 3.3vw, 52px); line-height: 1.08; letter-spacing: -0.5px;
color: var(--dark); margin: 0; text-wrap: balance;
}
.ab .ab-h2--xl { font-size: clamp(40px, 4.6vw, 72px); line-height: 1.03; letter-spacing: -0.8px; text-wrap: initial; }
.ab .ab-h2--light { color: var(--bg); }
.ab .ab-body { font-family: 'DM Sans', sans-serif; font-size: clamp(16px, 1.25vw, 19px); line-height: 1.5; color: var(--text); margin: 16px 0 0; max-width: 32ch; }
.ab .ab-body--lg { font-size: clamp(17px, 1.45vw, 22px); max-width: 30ch; }
.ab .ab-body--light { color: rgba(245,241,232,0.9); max-width: none; }
.ab .ab-arrow { display: inline-block; font-size: 0.9em; color: var(--gold-display); transition: transform 0.3s cubic-bezier(0.16,1,0.3,1); }
.ab a:hover .ab-arrow { transform: translate(2px, -2px); }
.ab .ab-link {
display: inline-flex; align-items: center; gap: 10px;
font-family: 'DM Sans', sans-serif; font-size: 16px; color: var(--text); text-decoration: none;
padding-bottom: 7px; border-bottom: 1px solid rgba(179,154,88,0.85);
transition: color 0.3s, border-color 0.3s;
}
.ab .ab-link:hover { color: var(--green); border-color: var(--gold-display); }
.ab img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* ── Intro and the room ── */
.ab .ab-intro { padding: calc(92px + clamp(36px, 3.6vw, 56px)) var(--pad) clamp(16px, 1.4vw, 22px); }
.ab .ab-intro-sub { font-family: 'DM Sans', sans-serif; font-size: clamp(17px, 1.35vw, 21px); color: var(--text); margin: 14px 0 0; }
.ab .ab-band { margin: 0; aspect-ratio: 3.1; overflow: hidden; background: var(--bg-alt); }
.ab .ab-band img { object-position: 50% 60%; }
/* ── Founder ── */
.ab .ab-founder {
display: grid; grid-template-columns: minmax(0, 1.06fr) minmax(0, 1fr); align-items: center;
column-gap: clamp(32px, 5.2vw, 84px);
padding: clamp(16px, 1.7vw, 26px) var(--pad) clamp(16px, 1.7vw, 26px) clamp(20px, 4.7vw, 72px);
}
.ab .ab-founder-img { aspect-ratio: 0.92; overflow: hidden; }
.ab .ab-founder-img img { object-position: 50% 16%; }
.ab .ab-rule { display: block; width: 60px; height: 1px; background: var(--gold); margin: clamp(28px, 2.6vw, 40px) 0 20px; }
.ab .ab-sign { font-family: 'DM Sans', sans-serif; font-size: 14px; color: var(--text); }
/* ── The people ── */
.ab .ab-people { background: var(--green-deep); padding: clamp(32px, 2.8vw, 42px) clamp(20px, 4.7vw, 72px) clamp(26px, 2.2vw, 34px); }
.ab .ab-people-head { margin-bottom: clamp(26px, 2.6vw, 40px); }
.ab .ab-people-head .ab-body { margin-top: 12px; }
.ab .ab-team {
list-style: none; margin: 0; padding: 0;
display: flex; flex-wrap: wrap; justify-content: center;
--gap: clamp(14px, 1.9vw, 30px);
gap: clamp(26px, 2.4vw, 36px) var(--gap);
}
.ab .ab-person { flex: 0 0 calc((100% - 5 * var(--gap)) / 6); min-width: 0; display: flex; flex-direction: column; }
.ab .ab-person-img { display: block; aspect-ratio: 0.97; overflow: hidden; background: rgba(245,241,232,0.06); }
.ab .ab-person-img img { transition: filter 0.6s ease; }
.ab .ab-person:hover .ab-person-img img { filter: none; }
.ab .ab-person-role { font-family: 'DM Sans', sans-serif; font-size: 15px; color: var(--bg); margin-top: 14px; line-height: 1.3; }
.ab .ab-person-name { font-family: 'DM Sans', sans-serif; font-size: 13px; color: rgba(245,241,232,0.66); margin-top: 4px; }
.ab .ab-bench { margin: clamp(18px, 1.6vw, 24px) 0 0; }
.ab .ab-bench-img { display: block; aspect-ratio: 4.85; overflow: hidden; background: rgba(245,241,232,0.06); }
.ab .ab-bench figcaption,
.ab .ab-crew figcaption { font-family: 'DM Sans', sans-serif; font-size: 14px; color: rgba(245,241,232,0.9); }
.ab .ab-bench figcaption { text-align: center; margin-top: 16px; }
.ab .ab-crews { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(14px, 1.9vw, 30px); margin-top: clamp(26px, 2.4vw, 36px); }
.ab .ab-crew { margin: 0; }
.ab .ab-crew-img { display: block; aspect-ratio: 2.1; overflow: hidden; }
.ab .ab-crew img { object-position: 50% 38%; transition: filter 0.6s ease; }
.ab .ab-crew--sewing img { object-position: 50% 40%; } /* 30 Sep 2026: faces with headroom, the cutting table below */
.ab .ab-crew:hover img { filter: none; }
.ab .ab-crew figcaption { display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: baseline; margin-top: 12px; }
.ab .ab-crew-name { color: var(--bg); font-size: 15px; }
.ab .ab-crew-note { color: rgba(245,241,232,0.66); font-size: 13px; }
/* The founder's story, under the lead line: quieter and narrower, so the
name and the lead still read first. */
.ab .ab-story { margin-top: clamp(18px, 1.7vw, 26px); max-width: 50ch; }
.ab .ab-story p { font-family: 'DM Sans', sans-serif; font-size: 15.5px; line-height: 1.75; color: var(--muted); margin: 0 0 14px; }
.ab .ab-story p:last-child { margin-bottom: 0; }
/* ── Care ── */
.ab .ab-care {
display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); align-items: center;
column-gap: clamp(32px, 4vw, 64px);
padding: clamp(16px, 1.7vw, 26px) var(--pad) clamp(18px, 1.9vw, 30px);
}
.ab .ab-care .ab-body { margin-bottom: clamp(26px, 2.4vw, 36px); max-width: 34ch; }
.ab .ab-care-img { aspect-ratio: 1.86; overflow: hidden; background: var(--bg-alt); }
/* ── Visit ── */
.ab .ab-visit {
display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); align-items: center;
column-gap: clamp(28px, 3vw, 48px);
padding: 0 var(--pad) clamp(20px, 2vw, 32px) 0;
}
.ab .ab-visit-img { aspect-ratio: 2.56; overflow: hidden; background: var(--bg-alt); }
.ab .ab-visit-img img { object-position: 50% 12%; } /* 30 Sep 2026: the showroom behind, not just the sofa */
.ab .ab-links { display: grid; justify-items: start; gap: 16px; margin-top: clamp(24px, 2.2vw, 32px); }
/* ── 1024 ── */
@media (max-width: 1024px) {
.ab .ab-person { flex-basis: calc((100% - 3 * var(--gap)) / 4); }
.ab .ab-visit { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); }
.ab .ab-visit-img { aspect-ratio: 1.8; }
}
/* ── 768 ── */
@media (max-width: 768px) {
.ab .ab-intro { padding-top: calc(74px + 40px); }
.ab .ab-band { aspect-ratio: 1.8; }
.ab .ab-founder, .ab .ab-care { grid-template-columns: 1fr; row-gap: 32px; padding-left: var(--pad); }
.ab .ab-founder-img { aspect-ratio: 0.92; }
.ab .ab-care-img { order: -1; }
.ab .ab-person { flex-basis: calc((100% - 2 * var(--gap)) / 3); }
.ab .ab-crews { grid-template-columns: 1fr; }
.ab .ab-crew-img { aspect-ratio: 1.6; }
.ab .ab-crew img { object-position: 50% 42%; }
.ab .ab-bench-img { aspect-ratio: 2.6; }
.ab .ab-visit { grid-template-columns: 1fr; row-gap: 28px; padding: 16px var(--pad) 40px; }
.ab .ab-visit-img { aspect-ratio: 1.5; }
.ab .ab-link { min-height: 44px; box-sizing: border-box; padding-top: 12px; }
}
@media (max-width: 480px) {
.ab .ab-person { flex-basis: calc((100% - 1 * var(--gap)) / 2); }
.ab .ab-person-role { font-size: 14px; }
}
/* ══════════════════════════════════════════════════════════════════
FOR PROFESSIONALS — rebuilt 28 Sep 2026 to the owner's mockup.
clients.html only (body.pro), pro- classes. A dark hero of up to three
cross-faded settings; the intro with its four sectors; "From concept
to detail" (a numbered interior, a design study, a drawn elevation);
the brief form on a dark band; three starting points; the clients by
sector; a closing split; the homepage footer (shared through
:is(.home, .svc, .ct, .ab, .pro, .hpf) in HOMEPAGE above).
The photographs are still to come. Each frame holds its space with a
toned block, so the layout reads now and each picture simply fills
its frame when the file lands in images/professionals/.
══════════════════════════════════════════════════════════════════ */
body.pro {
--pad: clamp(20px, 5.6vw, 96px);
background: var(--bg);
}
.pro { display: block; }
.pro .pro-eyebrow {
display: block; font-family: 'DM Sans', sans-serif; font-size: 11px; font-weight: 500;
letter-spacing: 2.6px; text-transform: uppercase; color: var(--text); margin: 0 0 16px;
}
.pro .pro-eyebrow--light { color: rgba(245,241,232,0.92); }
.pro .pro-eyebrow--gold { color: var(--gold); display: flex; align-items: center; gap: 16px; }
.pro .pro-eyebrow--gold::before { content: ''; width: 36px; height: 1px; background: var(--gold); }
.pro .pro-h1 {
font-family: 'Playfair Display', serif; font-weight: 400;
font-size: clamp(42px, 5.3vw, 82px); line-height: 1.02; letter-spacing: -1px;
color: var(--bg); margin: 0;
}
.pro .pro-h2 {
font-family: 'Playfair Display', serif; font-weight: 400;
font-size: clamp(28px, 2.9vw, 46px); line-height: 1.1; letter-spacing: -0.4px;
color: var(--dark); margin: 0;
}
.pro .pro-h2--lg { font-size: clamp(32px, 3.7vw, 58px); line-height: 1.06; letter-spacing: -0.6px; }
.pro .pro-h2--xl { font-size: clamp(36px, 4.6vw, 72px); line-height: 1.04; letter-spacing: -0.8px; }
.pro .pro-h2--light { color: var(--bg); }
.pro .pro-h3 { font-family: 'Playfair Display', serif; font-weight: 400; font-size: clamp(19px, 1.45vw, 22px); color: var(--dark); margin: 0; }
.pro .pro-n { font-family: 'Playfair Display', serif; color: var(--gold-display); }
.pro .pro-body { font-family: 'DM Sans', sans-serif; font-size: clamp(15px, 1.15vw, 17px); line-height: 1.6; color: var(--text); margin: 0; }
.pro .pro-body--light { color: rgba(245,241,232,0.78); font-size: clamp(16px, 1.35vw, 20px); margin-top: 14px; }
.pro .pro-small { font-family: 'DM Sans', sans-serif; font-size: 14.5px; line-height: 1.55; color: var(--muted); margin: 10px 0 18px; }
.pro .pro-arrow { display: inline-block; font-size: 0.9em; color: var(--gold-display); transition: transform 0.3s cubic-bezier(0.16,1,0.3,1); }
.pro a:hover .pro-arrow, .pro button:hover .pro-arrow { transform: translate(2px, -2px); }
.pro .pro-link {
display: inline-flex; align-items: center; gap: 10px;
font-family: 'DM Sans', sans-serif; font-size: 15px; color: var(--text); text-decoration: none;
padding-bottom: 6px; border-bottom: 1px solid rgba(179,154,88,0.85);
transition: color 0.3s, border-color 0.3s;
}
.pro .pro-link:hover { color: var(--green); border-color: var(--gold-display); }
.pro .pro-link--sm { font-size: 14px; }
.pro .pro-link--light { color: var(--bg); border-color: rgba(245,241,232,0.7); }
.pro .pro-link--light .pro-arrow { color: var(--bg); }
.pro .pro-link--light:hover { color: var(--bg); border-color: var(--gold); }
.pro .pro-btn {
display: inline-flex; align-items: center; gap: 14px;
min-height: 48px; padding: 0 26px; box-sizing: border-box;
background: var(--bg); color: var(--dark); border: 1px solid var(--bg);
font-family: 'DM Sans', sans-serif; font-size: 15px; text-decoration: none; text-transform: none; letter-spacing: 0.2px;
transition: background 0.35s, color 0.35s, border-color 0.35s;
}
.pro .pro-btn .pro-arrow { color: var(--dark); }
.pro .pro-btn:hover { background: transparent; color: var(--bg); }
.pro .pro-btn:hover .pro-arrow { color: var(--gold); }
.pro .pro-btn:focus-visible, .pro .pro-link:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.pro .pro-rule { display: block; width: 60px; height: 1px; background: var(--gold); margin: clamp(22px, 2vw, 30px) 0; }
/* Frames that hold a photograph still to come */
.pro .pro-frame { position: relative; overflow: hidden; background: linear-gradient(135deg, #E6DDCC, #D9CDB8); }
.pro .pro-frame img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
/* ── Hero ── */
.pro .pro-hero {
position: relative; overflow: hidden; background: var(--green-deep);
min-height: clamp(560px, 50vw, 760px);
display: flex; align-items: center;
padding: calc(92px + 40px) var(--pad) 90px; box-sizing: border-box;
}
.pro .pro-hero-slides { position: absolute; inset: 0; }
.pro .pro-slide { position: absolute; inset: 0; opacity: 0; transition: opacity 1.4s ease; }
.pro .pro-slide.is-on { opacity: 1; }
.pro .pro-slide img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pro .pro-hero-veil {
position: absolute; inset: 0; pointer-events: none;
background:
linear-gradient(90deg, rgba(14,24,18,0.86) 0%, rgba(14,24,18,0.55) 30%, rgba(14,24,18,0) 58%),
linear-gradient(180deg, rgba(14,24,18,0.5) 0%, rgba(14,24,18,0) 22%);
}
.pro .pro-hero-copy { position: relative; z-index: 1; max-width: 640px; }
.pro .pro-hero-sub { font-family: 'DM Sans', sans-serif; font-size: clamp(16px, 1.3vw, 20px); color: rgba(245,241,232,0.92); margin: clamp(16px, 1.4vw, 22px) 0 clamp(26px, 2.4vw, 36px); }
.pro .pro-hero-actions { display: grid; justify-items: start; gap: 22px; }
.pro .pro-hero-note, .pro .pro-count {
position: absolute; z-index: 1; bottom: 22px;
font-family: 'DM Sans', sans-serif; font-size: 12.5px; color: rgba(245,241,232,0.78);
}
.pro .pro-hero-note { left: clamp(16px, 1.6vw, 24px); }
.pro .pro-count { right: var(--pad); font-family: 'Playfair Display', serif; font-size: 14px; letter-spacing: 1px; }
.pro .pro-count[hidden] { display: none; }
/* ── Intro ── */
.pro .pro-intro {
display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: end; column-gap: 48px;
margin: 0 var(--pad); padding: clamp(40px, 3.6vw, 56px) 0 clamp(26px, 2.4vw, 36px);
border-bottom: 1px solid rgba(179,154,88,0.6);
}
.pro .pro-intro-side { justify-self: end; max-width: 520px; }
.pro .pro-sectors { list-style: none; margin: clamp(20px, 2vw, 30px) 0 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px 0; }
.pro .pro-sectors li { display: flex; align-items: center; }
.pro .pro-sectors li + li::before { content: '/'; color: var(--gold-display); margin: 0 clamp(12px, 1.2vw, 18px); }
.pro .pro-sectors a {
font-family: 'Playfair Display', serif; font-size: 15px; color: var(--dark); text-decoration: none;
padding-bottom: 3px; border-bottom: 1px solid rgba(29,48,37,0.5); transition: color 0.3s, border-color 0.3s;
}
.pro .pro-sectors a:hover { color: var(--green); border-color: var(--gold-display); }
/* ── From concept to detail ── */
.pro .pro-concept { padding: clamp(32px, 3vw, 44px) var(--pad) clamp(56px, 5vw, 76px); }
.pro .pro-concept-fig { margin: 0; }
.pro .pro-frame--concept { aspect-ratio: 2.44; }
.pro .pro-spot {
position: absolute; transform: translate(-50%, -50%);
width: clamp(28px, 2.4vw, 38px); height: clamp(28px, 2.4vw, 38px); border-radius: 50%;
border: 1px solid rgba(245,241,232,0.9); background: rgba(20,30,24,0.28);
display: grid; place-items: center;
font-family: 'Playfair Display', serif; font-size: clamp(11px, 0.85vw, 13px); color: var(--bg);
}
.pro .pro-legend { list-style: none; margin: 16px 0 0; padding: 0; display: flex; align-items: center; gap: 18px; }
.pro .pro-legend li { font-family: 'Playfair Display', serif; font-size: 15px; color: var(--dark); white-space: nowrap; }
.pro .pro-legend .pro-legend-line { flex: 1; height: 1px; background: rgba(179,154,88,0.7); }
.pro .pro-detail {
display: grid; grid-template-columns: minmax(0, 0.95fr) minmax(0, 0.85fr) minmax(0, 1.15fr); align-items: center;
column-gap: clamp(24px, 3vw, 48px); margin-top: clamp(36px, 3.3vw, 50px);
}
.pro .pro-detail figure { margin: 0; }
.pro .pro-frame--study { aspect-ratio: 1.3; }
.pro .pro-detail figcaption { font-family: 'DM Sans', sans-serif; font-size: 12px; color: var(--muted); margin-top: 10px; }
/* The drawing's paper was made transparent when the file was saved, so
the lines sit on the page's own ivory. */
.pro .pro-spec-img img { display: block; width: 100%; height: auto; }
.pro .pro-detail-copy .pro-body { margin: 16px 0 24px; max-width: 34ch; }
/* ── The brief ── */
.pro .pro-brief {
position: relative; overflow: hidden; background: var(--green-deep);
display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); column-gap: clamp(32px, 4vw, 64px);
padding: clamp(48px, 4.4vw, 68px) var(--pad) clamp(48px, 4.4vw, 68px);
}
.pro .pro-brief-side { display: flex; flex-direction: column; }
.pro .pro-brief-art { position: relative; margin-top: auto; min-height: 170px; display: flex; align-items: flex-end; }
/* The owner's branch photograph sits in the band's bottom-left corner, as
in the mockup, below the heading rather than behind it. Its own green is
a shade off the band's, so its edges fade out into the band. */
.pro .pro-brief-bg {
position: absolute; left: 0; bottom: 0; width: min(56%, 860px); height: auto; pointer-events: none;
-webkit-mask-image: radial-gradient(ellipse 100% 100% at 0% 100%, #000 55%, transparent 98%);
mask-image: radial-gradient(ellipse 100% 100% at 0% 100%, #000 55%, transparent 98%);
}
.pro .pro-brief > :not(.pro-brief-bg) { position: relative; z-index: 1; }
.pro .pro-motto {
position: relative; margin: 0 0 0 clamp(150px, 14vw, 210px);
font-family: 'DM Sans', sans-serif; font-size: 10.5px; letter-spacing: 3px; line-height: 1.8;
text-transform: uppercase; color: rgba(245,241,232,0.75);
}
.pro .pro-form { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(20px, 1.9vw, 28px) clamp(20px, 2.4vw, 36px); align-content: start; margin: 0; }
.pro .pro-field { display: grid; gap: 4px; }
.pro .pro-field--wide { grid-column: 1 / -1; }
.pro .pro-field label { font-family: 'DM Sans', sans-serif; font-size: 13.5px; color: rgba(245,241,232,0.9); }
.pro .pro-field input, .pro .pro-field select, .pro .pro-field textarea {
width: 100%; box-sizing: border-box; border-radius: 0;
background: transparent; color: var(--bg);
font-family: 'DM Sans', sans-serif; font-size: 15px;
border: 0; border-bottom: 1px solid rgba(245,241,232,0.55);
padding: 8px 0; min-height: 40px; transition: border-color 0.3s;
}
.pro .pro-field select {
-webkit-appearance: none; appearance: none; padding-right: 28px; cursor: pointer;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23F5F1E8' stroke-width='1.3'/%3E%3C/svg%3E");
background-repeat: no-repeat; background-position: right 4px center;
}
.pro .pro-field select option { color: var(--text); background: var(--bg); }
.pro .pro-field textarea { border: 1px solid rgba(245,241,232,0.55); padding: 10px 12px; min-height: 64px; resize: vertical; margin-top: 6px; }
.pro .pro-field input:focus, .pro .pro-field select:focus, .pro .pro-field textarea:focus { outline: none; border-color: var(--gold); }
.pro .pro-attach-row { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.pro .pro-attach {
flex: 0 1 62%; display: inline-flex; justify-content: space-between; align-items: center; gap: 16px;
min-height: 42px; padding: 0 14px; box-sizing: border-box;
border: 1px solid rgba(245,241,232,0.55);
font-family: 'DM Sans', sans-serif; font-size: 13.5px; color: var(--bg); text-decoration: none;
transition: border-color 0.3s;
}
.pro .pro-attach:hover { border-color: var(--gold); }
.pro .pro-optional { font-family: 'DM Sans', sans-serif; font-size: 12.5px; color: rgba(245,241,232,0.7); }
.pro .pro-submit { cursor: pointer; }
.pro .pro-form-note { font-family: 'DM Sans', sans-serif; font-size: 13px; color: rgba(245,241,232,0.8); margin: 14px 0 0; }
.pro .pro-form .form-status { font-family: 'DM Sans', sans-serif; font-size: 13.5px; color: var(--bg); margin: 12px 0 0; }
.pro .pro-form .form-status a { color: var(--gold); }
/* ── A starting point ── */
.pro .pro-start { padding: clamp(40px, 3.6vw, 56px) var(--pad) clamp(44px, 4vw, 60px); }
.pro .pro-start > .pro-h2 { margin-bottom: clamp(22px, 2vw, 32px); }
.pro .pro-start-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); }
.pro .pro-start-grid li { padding: 0 clamp(18px, 2vw, 32px); }
.pro .pro-start-grid li:first-child { padding-left: 0; }
.pro .pro-start-grid li + li { border-left: 1px solid rgba(179,154,88,0.6); }
/* ── Clients ── */
.pro .pro-clients { background: var(--green-deep); padding: clamp(52px, 4.8vw, 72px) var(--pad) clamp(52px, 4.8vw, 72px); }
.pro .pro-clients > .pro-eyebrow { margin-bottom: 18px; }
.pro .pro-sector-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(36px, 3.3vw, 52px) clamp(28px, 3.3vw, 52px); margin-top: clamp(36px, 3.3vw, 52px); }
.pro .pro-sector { border-top: 1px solid rgba(179,154,88,0.55); padding-top: 20px; }
.pro .pro-sector h3 {
font-family: 'DM Sans', sans-serif; font-weight: 500; font-size: 12px; letter-spacing: 2.4px;
text-transform: uppercase; color: var(--gold); margin: 0 0 16px;
}
.pro .pro-sector ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.pro .pro-sector li { font-family: 'DM Sans', sans-serif; font-size: clamp(15px, 1.15vw, 17px); color: var(--bg); }
.pro .pro-sector--row { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 0.45fr) repeat(3, minmax(0, 1fr)); align-items: baseline; }
.pro .pro-sector--row h3 { margin: 0; }
.pro .pro-sector--row ul { display: contents; }
/* ── Closing ── */
.pro .pro-close { display: grid; grid-template-columns: minmax(0, 2.1fr) minmax(0, 1fr); align-items: center; column-gap: clamp(28px, 3vw, 48px); }
.pro .pro-frame--close { aspect-ratio: 3.1; }
.pro .pro-close-copy { padding: 32px var(--pad) 32px 0; }
.pro .pro-note { margin: 0; padding: 24px var(--pad) 0; text-align: right; font-family: 'DM Sans', sans-serif; font-size: 11.5px; color: var(--muted); }
body.pro footer.hp-footer { margin-top: 24px; }
/* ── 1024 ── */
@media (max-width: 1024px) {
.pro .pro-intro { grid-template-columns: 1fr; row-gap: 24px; }
.pro .pro-intro-side { justify-self: start; }
.pro .pro-sectors { justify-content: flex-start; }
.pro .pro-detail { grid-template-columns: 1fr 1fr; row-gap: 40px; }
.pro .pro-detail-copy { grid-column: 1 / -1; }
.pro .pro-brief { grid-template-columns: 1fr; row-gap: 36px; }
.pro .pro-brief-art { min-height: 0; margin-top: 8px; }
.pro .pro-motto { margin-left: 0; }
.pro .pro-brief-bg { display: none; } /* stacked, it would sit behind the form */
.pro .pro-sector-grid { grid-template-columns: 1fr 1fr; }
.pro .pro-close { grid-template-columns: 1fr; row-gap: 8px; }
.pro .pro-close-copy { padding: 24px var(--pad); }
}
/* ── 768 ── */
@media (max-width: 768px) {
.pro .pro-hero { min-height: 640px; align-items: flex-end; padding-top: calc(74px + 40px); }
.pro .pro-hero-veil { background: linear-gradient(0deg, rgba(14,24,18,0.9) 0%, rgba(14,24,18,0.6) 50%, rgba(14,24,18,0.25) 100%); }
.pro .pro-btn { min-height: 48px; }
.pro .pro-link, .pro .pro-sectors a { min-height: 44px; box-sizing: border-box; display: inline-flex; align-items: flex-end; }
.pro .pro-frame--concept { aspect-ratio: 1.5; }
.pro .pro-legend { flex-direction: column; align-items: flex-start; gap: 8px; }
.pro .pro-legend .pro-legend-line { display: none; }
.pro .pro-detail { grid-template-columns: 1fr; }
.pro .pro-form { grid-template-columns: 1fr; }
.pro .pro-field input, .pro .pro-field select, .pro .pro-field textarea { font-size: 16px; min-height: 44px; }
.pro .pro-attach { flex-basis: 100%; min-height: 48px; }
.pro .pro-start-grid { grid-template-columns: 1fr; row-gap: 28px; }
.pro .pro-start-grid li, .pro .pro-start-grid li:first-child { padding: 0; }
.pro .pro-start-grid li + li { border-left: 0; border-top: 1px solid rgba(179,154,88,0.6); padding-top: 24px; }
.pro .pro-sector-grid { grid-template-columns: 1fr; }
.pro .pro-sector--row { grid-template-columns: 1fr; }
.pro .pro-sector--row ul { display: grid; margin-top: 16px; }
.pro .pro-frame--close { aspect-ratio: 1.6; }
.pro .pro-note { text-align: left; }
}
/* ══════════════════════════════════════════════════════════════════
EDITORIAL GRADE — .img-grade, 28 Sep 2026, to the owner's choice:
the tones of the About workshop picture — deep near-black shadows,
warm brown midtones, soft warm highlights, a touch more contrast in the
mids — as pure toned monochrome. The work is done by the SVG filter
#grade-editorial, defined at the top of each page that uses the class
(about.html); its colour scale was measured from that picture. No blur,
no vignette, and the files are untouched. The frame around it is deep
forest green (--forest-grade), seen only while the photograph loads —
no border.
══════════════════════════════════════════════════════════════════ */
.svg-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.img-grade { filter: url(#grade-editorial); }
:has(> .img-grade) { background-color: var(--forest-grade); } /* no edge: the owner wants the photographs borderless */
/* About: a pointer over a team member or crew still brings the colour back */
.ab .ab-person:hover .img-grade,
.ab .ab-crew:hover .img-grade { filter: none; }
/* ── PRE-LAUNCH AUDIT (28 Sep 2026): tap targets on the older footer ──
The design pages, Projects and the 404 still carry the original footer,
whose links measured 17px tall on a phone and the social icons 40px.
Under 768px each becomes a 44px target; nothing moves on desktop. */
@media (max-width: 768px) {
footer:not(.hp-footer):not(.cx-footer) .footer-links a,
footer:not(.hp-footer):not(.cx-footer) .footer-contact-item a {
display: inline-flex; align-items: center; min-height: 44px;
}
footer:not(.hp-footer):not(.cx-footer) .footer-links li { margin-bottom: 0; }
footer:not(.hp-footer):not(.cx-footer) .footer-social-link { width: 44px; height: 44px; }
.notfound-more a { display: inline-flex; align-items: center; min-height: 44px; }
}
/* ── The homepage footer on further pages (28 Sep 2026) ──────────────
Projects, the 404, Collections, the six collection pages and Privacy
carry body.hpf, which joins them to the :is(...) footer rules above. */
body.hpf { --pad: clamp(20px, 5.6vw, 96px); }
body.hpf footer.hp-footer { border-top: 1px solid rgba(179,154,88,0.35); }
.hp-footer-legal { display: inline-flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.hp-footer-legal a { border-bottom: 1px solid rgba(245,241,232,0.3); padding-bottom: 1px; }
footer .footer-privacy {
font-size: 12px; color: rgba(255,255,255,0.55); text-decoration: none;
border-bottom: 1px solid rgba(255,255,255,0.25); transition: color 0.3s;
}
footer .footer-privacy:hover { color: var(--gold); }
.ct .ct-privacy a { color: inherit; border-bottom: 1px solid rgba(107,97,86,0.45); text-decoration: none; margin-left: 4px; }
.ct .ct-privacy a:hover { color: var(--green); }
@media (max-width: 768px) {
.hp-footer-legal a, footer .footer-privacy { display: inline-flex; align-items: center; min-height: 44px; border-bottom: 0; text-decoration: underline; text-underline-offset: 4px; }
}
/* ══════════════════════════════════════════════════════════════════
PRIVACY — added 28 Sep 2026. privacy.html only (body.pv), pv- classes.
In the manner of the About intro: eyebrow and a large serif title,
then numbered sections in a reading column with hairlines between,
a dark band, and the homepage footer.
══════════════════════════════════════════════════════════════════ */
body.pv { background: var(--bg); }
.pv { display: block; }
.pv .pv-intro {
padding: calc(92px + clamp(40px, 4.2vw, 64px)) var(--pad) clamp(36px, 3.6vw, 56px);
border-bottom: 1px solid rgba(179,154,88,0.55); margin: 0 var(--pad); padding-left: 0; padding-right: 0;
}
.pv .pv-eyebrow {
display: block; font-family: 'DM Sans', sans-serif; font-size: 11px; font-weight: 500;
letter-spacing: 3.5px; text-transform: uppercase; color: var(--text); margin-bottom: 14px;
}
.pv .pv-h1 {
font-family: 'Playfair Display', serif; font-weight: 400;
font-size: clamp(40px, 5vw, 76px); line-height: 1.04; letter-spacing: -1px; color: var(--dark); margin: 0;
}
.pv .pv-sub { font-family: 'DM Sans', sans-serif; font-size: clamp(17px, 1.35vw, 21px); color: var(--text); margin: 16px 0 0; }
.pv .pv-date { font-family: 'DM Sans', sans-serif; font-size: 13px; color: var(--muted); margin: 18px 0 0; }
.pv .pv-body { max-width: 900px; margin: 0 auto; padding: clamp(24px, 2.6vw, 40px) var(--pad) clamp(64px, 6vw, 96px); }
.pv .pv-section {
display: grid; grid-template-columns: 64px minmax(0, 1fr); column-gap: 24px;
padding: clamp(26px, 2.6vw, 38px) 0; border-bottom: 1px solid rgba(90,78,62,0.18);
}
.pv .pv-section:last-child { border-bottom: 0; }
.pv .pv-n { font-family: 'Playfair Display', serif; font-size: 26px; line-height: 1.2; color: var(--gold-display); }
.pv .pv-h2 {
font-family: 'Playfair Display', serif; font-weight: 400;
font-size: clamp(24px, 2vw, 30px); line-height: 1.2; color: var(--dark); margin: 0 0 12px;
}
.pv .pv-h2--light { color: var(--bg); font-size: clamp(28px, 2.6vw, 40px); margin: 0; }
.pv .pv-section p { font-family: 'DM Sans', sans-serif; font-size: 16px; line-height: 1.75; color: var(--muted); margin: 0 0 12px; max-width: 64ch; }
.pv .pv-section p:last-child { margin-bottom: 0; }
.pv .pv-section a { color: var(--dark); border-bottom: 1px solid rgba(179,154,88,0.8); text-decoration: none; }
.pv .pv-section a:hover { color: var(--green); }
.pv .pv-cta {
background: var(--green-deep); padding: clamp(48px, 4.6vw, 70px) var(--pad);
display: flex; align-items: center; justify-content: space-between; gap: 24px 48px; flex-wrap: wrap;
}
.pv .pv-link {
display: inline-flex; align-items: center; gap: 10px;
font-family: 'DM Sans', sans-serif; font-size: 16px; color: var(--bg); text-decoration: none;
padding-bottom: 7px; border-bottom: 1px solid rgba(245,241,232,0.7); transition: border-color 0.3s;
}
.pv .pv-link:hover { border-color: var(--gold); }
.pv .pv-arrow { color: var(--gold); display: inline-block; transition: transform 0.3s cubic-bezier(0.16,1,0.3,1); }
.pv .pv-link:hover .pv-arrow { transform: translate(2px, -2px); }
@media (max-width: 768px) {
.pv .pv-intro { padding-top: calc(74px + 40px); }
.pv .pv-section { grid-template-columns: 1fr; row-gap: 6px; }
.pv .pv-link { min-height: 44px; box-sizing: border-box; padding-top: 12px; }
.pv .pv-cta { flex-direction: column; align-items: flex-start; }
}
/* ── FOOTER, ALIGNED WITH THE PAGES (28 Sep 2026) ──────────────────────
Five columns: the brand, Collections (its title links to the overview),
How We Work (the Services page's own stage names), The Atelier (About,
Projects, For Professionals, Contact) and Contact with the showroom
address and hours. Column titles that are links read as titles. */
:is(.home, .svc, .ct, .ab, .pro, .hpf) .hp-footer-title a {
font: inherit; letter-spacing: inherit; text-transform: inherit;
color: inherit; text-decoration: none; transition: color 0.3s;
}
:is(.home, .svc, .ct, .ab, .pro, .hpf) .hp-footer-title a:hover { color: var(--gold); }
:is(.home, .svc, .ct, .ab, .pro, .hpf) .hp-footer-tag { white-space: normal; max-width: 26ch; }
:is(.home, .svc, .ct, .ab, .pro, .hpf) .hp-footer-contact li { align-items: flex-start; }
:is(.home, .svc, .ct, .ab, .pro, .hpf) .hp-footer-contact li svg { margin-top: 2px; }
:is(.home, .svc, .ct, .ab, .pro, .hpf) .hp-footer-contact li > span {
font-family: 'DM Sans', sans-serif; font-size: 14.5px; color: rgba(245,241,232,0.86);
}
@media (max-width: 1180px) and (min-width: 1025px) {
:is(.home, .svc, .ct, .ab, .pro, .hpf) .hp-footer-main { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 44px; }
}
@media (max-width: 768px) {
:is(.home, .svc, .ct, .ab, .pro, .hpf) .hp-footer-title a { display: inline-flex; align-items: center; min-height: 44px; }
}
/* ── MAP ON REQUEST (29 Sep 2026) ──────────────────────────────────────
The homepage map waits behind a quiet ivory panel until the visitor
asks for it; only then does the page contact Google. Same frame and
tone as the iframe it becomes. */
.home .hp-contact-map .map-hold {
width: 100%; aspect-ratio: 0.755;
display: flex; flex-direction: column; align-items: center; justify-content: center;
gap: 12px; padding: 18px; box-sizing: border-box; text-align: center;
background: var(--bg-alt); border: 1px solid rgba(29,48,37,0.10);
}
.home .map-hold > svg { width: 26px; height: 26px; fill: none; stroke: var(--dark); stroke-width: 1.3; }
.home .map-hold-place {
font-family: 'Playfair Display', serif; font-size: 16px; line-height: 1.35; color: var(--dark);
}
.home .map-hold-load {
font-family: 'DM Sans', sans-serif; font-size: 12px; font-weight: 500;
letter-spacing: 0.14em; text-transform: uppercase;
min-height: 40px; padding: 0 18px; margin-top: 4px; cursor: pointer;
background: var(--dark); color: var(--bg); border: 1px solid var(--dark);
transition: background 0.3s, color 0.3s;
}
.home .map-hold-load:hover, .home .map-hold-load:focus-visible { background: transparent; color: var(--dark); }
.home .map-hold-place > span { display: block; }
.home .map-hold-note { font-family: 'DM Sans', sans-serif; font-size: 11.5px; color: var(--muted); }
.home .map-hold-open {
font-family: 'DM Sans', sans-serif; font-size: 12.5px; color: var(--green);
text-decoration: underline; text-underline-offset: 3px;
}
@media (max-width: 1024px) {
.home .map-hold-load, .home .map-hold-open { min-height: 44px; display: inline-flex; align-items: center; }
}
@media (max-width: 768px) {
.home .hp-contact-map .map-hold { aspect-ratio: 1.3; }
}
/* ══════════════════════════════════════════════════════════════════
PROJECTS — rebuilt 29 Sep 2026 to the owner's mockup.
projects.html only (body.pj), pj- classes. A header with the note to
its right behind a hairline; projects in rows that alternate — photo
left on ivory, then a forest panel with the photo right — joined by a
thin ivory seam; a dark closing band.
══════════════════════════════════════════════════════════════════ */
body.pj {
--pad: clamp(20px, 5.6vw, 96px);
background: var(--bg);
}
.pj { display: block; background: var(--bg); }
/* ── Hero (29 Sep 2026): the owner's room, full width, under the bar ── */
.pj .pj-hero {
position: relative; overflow: hidden; background: var(--green-deep);
min-height: clamp(560px, 50vw, 780px);
display: flex; align-items: center; box-sizing: border-box;
padding: calc(var(--navh, 93px) + 40px) var(--pad) clamp(80px, 7vw, 120px);
}
.pj .pj-hero-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 55%; display: block; }
.pj .pj-hero-veil {
position: absolute; inset: 0; pointer-events: none;
background:
linear-gradient(90deg, rgba(20,16,12,0.62) 0%, rgba(20,16,12,0.34) 32%, rgba(20,16,12,0) 58%),
linear-gradient(180deg, rgba(20,16,12,0.45) 0%, rgba(20,16,12,0) 20%),
linear-gradient(0deg, rgba(20,16,12,0.35) 0%, rgba(20,16,12,0) 30%);
}
.pj .pj-hero-copy { position: relative; z-index: 1; max-width: 640px; }
.pj .pj-hero .pj-eyebrow { color: rgba(245,241,232,0.92); }
.pj .pj-hero-title {
font-family: 'Playfair Display', serif; font-weight: 400;
font-size: clamp(46px, 6vw, 96px); line-height: 1.0; letter-spacing: -1.4px;
color: var(--bg); margin: 0; text-shadow: 0 2px 24px rgba(0,0,0,0.18);
}
.pj .pj-hero-sub {
font-family: 'Playfair Display', serif; font-size: clamp(19px, 1.75vw, 27px); line-height: 1.35;
color: rgba(245,241,232,0.94); margin: clamp(14px, 1.3vw, 20px) 0 0;
}
.pj .pj-hero-link {
position: absolute; z-index: 1; left: var(--pad); bottom: clamp(40px, 4.4vw, 66px);
display: inline-flex; align-items: center; gap: 12px; padding-bottom: 7px;
font-family: 'Playfair Display', serif; font-size: clamp(16px, 1.3vw, 19px); color: var(--bg); text-decoration: none;
border-bottom: 1px solid var(--gold); transition: border-color 0.3s;
}
.pj .pj-hero-link .pj-arrow { color: var(--bg); }
.pj .pj-hero-link:hover { border-color: var(--bg); }
.pj .pj-hero-link:hover .pj-arrow { transform: translateY(3px); }
.pj .pj-hero-link:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
@media (max-width: 768px) {
.pj .pj-hero { min-height: 620px; flex-direction: column; align-items: flex-start; justify-content: flex-end; padding-bottom: 48px; }
.pj .pj-hero-img { object-position: 62% 50%; }
.pj .pj-hero-title { font-size: clamp(34px, 10.4vw, 52px); }
.pj .pj-hero-veil { background: linear-gradient(0deg, rgba(20,16,12,0.78) 0%, rgba(20,16,12,0.45) 50%, rgba(20,16,12,0.3) 100%); }
.pj .pj-hero-link { position: relative; left: auto; bottom: auto; margin-top: 28px; min-height: 44px; box-sizing: border-box; padding-top: 12px; }
}
/* ── Header ── */
.pj .pj-head {
display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end;
gap: clamp(28px, 4vw, 72px);
padding: clamp(64px, 6vw, 104px) var(--pad) clamp(40px, 3.6vw, 60px);
}
.pj .pj-eyebrow {
display: block; font-family: 'DM Sans', sans-serif; font-size: 11px; font-weight: 500;
letter-spacing: 2.6px; text-transform: uppercase; color: var(--text); margin: 0 0 clamp(14px, 1.3vw, 20px);
}
.pj .pj-h1 {
font-family: 'Playfair Display', serif; font-weight: 400;
font-size: clamp(38px, 4.6vw, 72px); line-height: 1.04; letter-spacing: -1px;
color: var(--dark); margin: 0;
}
.pj .pj-head-note {
font-family: 'DM Sans', sans-serif; font-size: clamp(15px, 1.12vw, 17px); line-height: 1.55;
color: var(--text); margin: 0 0 clamp(6px, 0.8vw, 14px); max-width: 27ch;
padding-left: clamp(24px, 2.4vw, 38px); border-left: 1px solid rgba(179,154,88,0.7);
}
/* ── Rows ── */
.pj .pj-list { display: grid; gap: clamp(10px, 0.9vw, 14px); }
.pj .pj-row {
display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
min-height: clamp(380px, 46vw, 700px);
}
.pj .pj-row--dark { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); background: var(--green-deep); }
.pj .pj-row--dark .pj-media { order: 2; }
.pj .pj-row[hidden] { display: none; }
.pj .pj-media {
position: relative; overflow: hidden; min-height: 100%;
background: linear-gradient(135deg, #E6DDCC, #D6C9B3);
}
.pj .pj-row--dark .pj-media { background: linear-gradient(135deg, #2A3F32, #1A2A20); }
.pj .pj-media img {
position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block;
transition: transform 1.4s cubic-bezier(0.16,1,0.3,1);
}
.pj .pj-row:hover .pj-media img { transform: scale(1.025); }
/* Seen only while a photograph is missing: once the ![]()
gives up it
removes itself, and this line is what is left in the frame. */
.pj .pj-hold {
position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
font-family: 'DM Sans', sans-serif; font-size: 11px; font-weight: 500;
letter-spacing: 2.4px; text-transform: uppercase; white-space: nowrap;
color: rgba(29,48,37,0.45);
}
.pj .pj-row--dark .pj-hold { color: rgba(245,241,232,0.45); }
.pj .pj-media:has(img) .pj-hold { display: none; }
.pj .pj-copy {
display: flex; flex-direction: column; justify-content: center;
padding: clamp(36px, 4vw, 72px) var(--pad) clamp(36px, 4vw, 72px) clamp(32px, 3.6vw, 64px);
}
.pj .pj-row--dark .pj-copy { padding: clamp(36px, 4vw, 72px) clamp(32px, 3.6vw, 64px) clamp(36px, 4vw, 72px) var(--pad); }
.pj .pj-sep { margin: 0 8px; }
.pj .pj-kicker {
font-family: 'DM Sans', sans-serif; font-size: 11px; font-weight: 500;
letter-spacing: 2.4px; text-transform: uppercase; color: var(--gold-ink);
margin-bottom: clamp(20px, 2vw, 32px);
}
.pj .pj-row--dark .pj-kicker { color: var(--gold); }
.pj .pj-title {
font-family: 'Playfair Display', serif; font-weight: 400;
font-size: clamp(32px, 3.9vw, 60px); line-height: 1.08; letter-spacing: -0.6px;
color: var(--dark); margin: 0; max-width: 12ch; text-wrap: balance;
}
.pj .pj-row--dark .pj-title { color: var(--bg); }
.pj .pj-line {
font-family: 'DM Sans', sans-serif; font-size: clamp(15px, 1.1vw, 17px); line-height: 1.6;
color: var(--text); margin: clamp(18px, 1.8vw, 28px) 0 0; max-width: 34ch;
}
.pj .pj-row--dark .pj-line { color: rgba(245,241,232,0.86); }
.pj .pj-tags {
display: flex; flex-wrap: wrap; align-items: center; gap: 6px 0;
margin: clamp(20px, 2vw, 30px) 0 0; padding-top: clamp(18px, 1.8vw, 26px);
border-top: 1px solid rgba(179,154,88,0.6); max-width: 360px;
font-family: 'DM Sans', sans-serif; font-size: 14px; color: var(--text);
}
.pj .pj-tags span + span::before { content: '·'; margin: 0 9px; color: var(--muted); }
.pj .pj-row--dark .pj-tags { color: rgba(245,241,232,0.86); border-top-color: rgba(245,241,232,0.35); }
.pj .pj-row--dark .pj-tags span + span::before { color: rgba(245,241,232,0.55); }
.pj .pj-arrow { display: inline-block; font-size: 0.9em; transition: transform 0.3s cubic-bezier(0.16,1,0.3,1); }
.pj a:hover .pj-arrow { transform: translate(2px, -2px); }
.pj .pj-link {
align-self: flex-start; display: inline-flex; align-items: center; gap: 10px;
margin-top: clamp(30px, 3.4vw, 54px); padding-bottom: 6px;
font-family: 'DM Sans', sans-serif; font-size: 15px; color: var(--dark); text-decoration: none;
border-bottom: 1px solid rgba(179,154,88,0.85); transition: color 0.3s, border-color 0.3s;
}
.pj .pj-link .pj-arrow { color: var(--gold-display); }
.pj .pj-link:hover { color: var(--green); border-color: var(--gold-display); }
.pj .pj-btn {
align-self: flex-start; display: inline-flex; align-items: center; gap: 14px;
margin-top: clamp(30px, 3.4vw, 54px); min-height: 48px; padding: 0 26px; box-sizing: border-box;
font-family: 'DM Sans', sans-serif; font-size: 15px; color: var(--bg); text-decoration: none;
border: 1px solid rgba(245,241,232,0.85); transition: background 0.35s, color 0.35s;
}
.pj .pj-btn:hover { background: var(--bg); color: var(--dark); }
.pj .pj-link:focus-visible, .pj .pj-btn:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
/* ── End of the list ── */
.pj .pj-list { padding-bottom: clamp(52px, 5vw, 80px); }
/* ── Closing band ── */
.pj-cta {
display: flex; align-items: center; justify-content: space-between; gap: 32px;
background: var(--green-deep); padding: clamp(48px, 4.6vw, 76px) var(--pad);
}
.pj-cta .pj-cta-title {
font-family: 'Playfair Display', serif; font-weight: 400;
font-size: clamp(30px, 3.3vw, 52px); line-height: 1.1; letter-spacing: -0.5px;
color: var(--bg); margin: 0;
}
.pj-cta .pj-cta-btn {
flex: none; display: inline-flex; align-items: center; gap: 14px;
min-height: 52px; padding: 0 30px; box-sizing: border-box;
font-family: 'DM Sans', sans-serif; font-size: 15px; color: var(--bg); text-decoration: none;
border: 1px solid rgba(245,241,232,0.85); transition: background 0.35s, color 0.35s;
}
.pj-cta .pj-cta-btn .pj-arrow { display: inline-block; font-size: 0.9em; }
.pj-cta .pj-cta-btn:hover { background: var(--bg); color: var(--dark); }
.pj-cta .pj-cta-btn:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
body.pj footer.hp-footer { margin-top: 0; }
/* ── 1024 ── */
@media (max-width: 1024px) {
.pj .pj-row { grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); }
.pj .pj-row--dark { grid-template-columns: minmax(0, 1fr) minmax(0, 1.45fr); }
}
/* ── 768 ── */
@media (max-width: 768px) {
.pj .pj-head { grid-template-columns: 1fr; align-items: start; gap: 22px; }
.pj .pj-head-note { max-width: none; }
.pj .pj-row, .pj .pj-row--dark { grid-template-columns: 1fr; min-height: 0; }
.pj .pj-row--dark .pj-media { order: 0; }
.pj .pj-media { aspect-ratio: 1.3; min-height: 0; }
.pj .pj-copy, .pj .pj-row--dark .pj-copy { padding: 34px var(--pad) 44px; }
.pj .pj-title { max-width: none; }
.pj .pj-link { min-height: 44px; box-sizing: border-box; padding-top: 12px; }
.pj-cta { flex-direction: column; align-items: flex-start; }
}
/* ══════════════════════════════════════════════════════════════════
PROJECT PAGE — added 29 Sep 2026 (project-private-residence.html,
body.pj.pjd-page). Reuses the Projects kicker, line, tags, link and
closing band; pjd- classes for the rest. The first row on Projects
opens it: its photograph is a link, with "View project" on hover.
══════════════════════════════════════════════════════════════════ */
.pj a.pj-media { display: block; color: inherit; text-decoration: none; }
.pj .pj-view {
position: absolute; left: clamp(20px, 2vw, 32px); bottom: clamp(20px, 2vw, 32px); z-index: 1;
display: inline-flex; align-items: center; gap: 10px; padding: 12px 20px;
background: rgba(245,241,232,0.94); color: var(--dark);
font-family: 'DM Sans', sans-serif; font-size: 14px;
opacity: 0; transform: translateY(6px); transition: opacity 0.4s, transform 0.4s cubic-bezier(0.16,1,0.3,1);
}
.pj a.pj-media:hover .pj-view, .pj a.pj-media:focus-visible .pj-view { opacity: 1; transform: none; }
.pj a.pj-media:focus-visible { outline: 2px solid var(--gold); outline-offset: -4px; }
@media (hover: none) { .pj .pj-view { opacity: 1; transform: none; } }
.pjd .pjd-head {
padding: calc(var(--navh, 93px) + clamp(40px, 4vw, 68px)) var(--pad) clamp(40px, 3.8vw, 64px);
}
.pjd .pjd-crumbs {
display: flex; align-items: center; gap: 10px; margin-bottom: clamp(28px, 3vw, 48px);
font-family: 'DM Sans', sans-serif; font-size: 13px; color: var(--muted);
}
.pjd .pjd-crumbs a { color: var(--muted); text-decoration: none; border-bottom: 1px solid transparent; transition: color 0.3s, border-color 0.3s; }
.pjd .pjd-crumbs a:hover { color: var(--green); border-color: var(--gold); }
.pjd .pjd-crumbs [aria-current] { color: var(--text); }
.pjd .pjd-head-grid {
display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
gap: clamp(28px, 5vw, 96px); align-items: end;
}
.pjd .pj-kicker { display: block; }
.pjd .pjd-title {
font-family: 'Playfair Display', serif; font-weight: 400;
font-size: clamp(40px, 5.2vw, 82px); line-height: 1.03; letter-spacing: -1.1px;
color: var(--dark); margin: 0; text-wrap: balance;
}
.pjd .pjd-head-aside .pj-line { margin-top: 0; }
.pjd .pjd-gallery { display: grid; gap: clamp(10px, 0.9vw, 14px); }
.pjd .pjd-shot { margin: 0; overflow: hidden; background: var(--bg-alt); }
.pjd .pjd-shot img { display: block; width: 100%; height: 100%; object-fit: cover; }
.pjd .pjd-shot--wide img { aspect-ratio: 1.85; object-position: 50% 30%; }
.pjd .pjd-pair { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(10px, 0.9vw, 14px); }
.pjd .pjd-pair .pjd-shot img { aspect-ratio: 0.8; }
.pjd .pjd-pair:last-child .pjd-shot img { aspect-ratio: 1.5; }
.pjd .pjd-shot img.zoomable, .pjd .pjd-shot .zoomable { cursor: zoom-in; }
.pjd .pjd-next {
display: flex; align-items: center; justify-content: space-between; gap: 32px; flex-wrap: wrap;
padding: clamp(48px, 4.6vw, 76px) var(--pad) clamp(56px, 5vw, 84px);
}
.pjd .pjd-back { margin-top: 0; }
.pjd .pjd-next-link { display: grid; justify-items: end; gap: 8px; text-decoration: none; }
.pjd .pjd-next-label {
font-family: 'DM Sans', sans-serif; font-size: 11px; font-weight: 500;
letter-spacing: 2.4px; text-transform: uppercase; color: var(--gold-ink);
}
.pjd .pjd-next-name {
display: inline-flex; gap: 14px; align-items: baseline;
font-family: 'Playfair Display', serif; font-size: clamp(22px, 2vw, 32px); color: var(--dark);
border-bottom: 1px solid rgba(179,154,88,0.85); padding-bottom: 6px; transition: color 0.3s;
}
.pjd .pjd-next-link:hover .pjd-next-name { color: var(--green); }
.pjd .pjd-next-name .pj-n { font-size: 0.7em; color: var(--gold-display); }
.pjd .pjd-next-link:focus-visible { outline: 2px solid var(--gold); outline-offset: 4px; }
body.pjd-page .pj .pj-list { padding-bottom: 0; }
@media (max-width: 768px) {
.pjd .pjd-head-grid { grid-template-columns: 1fr; align-items: start; gap: 22px; }
.pjd .pjd-shot--wide img { aspect-ratio: 1.4; }
.pjd .pjd-pair { grid-template-columns: 1fr; }
.pjd .pjd-pair .pjd-shot img, .pjd .pjd-pair:last-child .pjd-shot img { aspect-ratio: 1.3; }
.pjd .pjd-crumbs a { display: inline-flex; align-items: center; min-height: 44px; }
.pjd .pjd-next { flex-direction: column; align-items: flex-start; }
.pjd .pjd-next-link { justify-items: start; }
}
/* Project pages: a pair of landscape photographs, and the "Before" label
(29 Sep 2026, project-drawing-room.html). */
.pjd .pjd-pair.pjd-pair--land .pjd-shot img { aspect-ratio: 1.33; }
.pjd .pjd-shot--low img { object-position: 50% 62%; }
.pjd .pjd-shot--before { position: relative; }
.pjd .pjd-shot--before figcaption {
position: absolute; left: clamp(16px, 1.6vw, 24px); top: clamp(16px, 1.6vw, 24px);
padding: 8px 14px; background: rgba(245,241,232,0.92); color: var(--dark);
font-family: 'DM Sans', sans-serif; font-size: 11px; font-weight: 500;
letter-spacing: 2.2px; text-transform: uppercase; pointer-events: none;
}
@media (max-width: 768px) {
.pjd .pjd-pair.pjd-pair--land .pjd-shot img { aspect-ratio: 1.33; }
}
/* Project pages: previous / next either side, and "Continue exploring"
(29 Sep 2026). Both sit clear of the floating contact buttons. */
.pjd .pjd-next { padding-right: max(var(--pad), 104px); }
.pjd .pjd-next-link--prev { justify-items: start; }
.pjd .pjd-next-label { display: inline-flex; align-items: center; gap: 10px; }
.pjd .pjd-next-label .pj-arrow { font-size: 13px; letter-spacing: 0; }
.pjd .pjd-next-link:hover .pj-arrow { transform: none; }
.pjd .pjd-next-link--prev:hover .pjd-next-label .pj-arrow { transform: translateX(-3px); }
.pjd .pjd-next-link:not(.pjd-next-link--prev):hover .pjd-next-label .pj-arrow { transform: translateX(3px); }
.pjd .pjd-more {
border-top: 1px solid rgba(179,154,88,0.35);
padding: clamp(44px, 4.2vw, 68px) max(var(--pad), 104px) clamp(56px, 5.4vw, 88px) var(--pad);
}
.pjd .pjd-more-title {
font-family: 'DM Sans', sans-serif; font-size: 11px; font-weight: 500;
letter-spacing: 2.6px; text-transform: uppercase; color: var(--gold-ink); margin: 0 0 clamp(20px, 2vw, 30px);
}
.pjd .pjd-more-grid {
display: grid; grid-template-columns: repeat(var(--cards, 2), minmax(0, 1fr)) auto;
gap: clamp(24px, 2.6vw, 44px); align-items: start;
}
.pjd .pjd-card { display: grid; gap: 16px; color: var(--dark); text-decoration: none; }
.pjd .pjd-card-img { display: block; overflow: hidden; background: var(--bg-alt); }
.pjd .pjd-card-img img { display: block; width: 100%; aspect-ratio: 1.7; object-fit: cover; transition: transform 1.2s cubic-bezier(0.16,1,0.3,1); }
.pjd .pjd-card:hover .pjd-card-img img { transform: scale(1.03); }
.pjd .pjd-card-name {
display: inline-flex; align-items: baseline; gap: 10px;
font-family: 'Playfair Display', serif; font-size: clamp(17px, 1.35vw, 21px); line-height: 1.3; transition: color 0.3s;
}
.pjd .pjd-card-name .pj-arrow { font-size: 0.75em; color: var(--dark); }
.pjd .pjd-card:hover .pjd-card-name { color: var(--green); }
.pjd .pjd-card:focus-visible, .pjd .pjd-more-all:focus-visible { outline: 2px solid var(--gold); outline-offset: 4px; }
.pjd .pjd-more-all {
align-self: stretch; display: flex; align-items: center; gap: 12px;
padding-left: clamp(28px, 3vw, 48px); border-left: 1px solid rgba(179,154,88,0.6);
font-family: 'DM Sans', sans-serif; font-size: 15px; color: var(--dark); text-decoration: none; white-space: nowrap;
transition: color 0.3s;
}
.pjd .pjd-more-all:hover { color: var(--green); }
.pjd .pjd-more-all:hover .pj-arrow { transform: translateX(3px); }
@media (max-width: 1024px) {
.pjd .pjd-more-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.pjd .pjd-more-all { grid-column: 1 / -1; border-left: 0; padding: 18px 0 0; border-top: 1px solid rgba(179,154,88,0.6); }
}
@media (max-width: 768px) {
.pjd .pjd-next, .pjd .pjd-more { padding-right: var(--pad); }
.pjd .pjd-next { flex-direction: row; align-items: flex-start; }
.pjd .pjd-next-link { justify-items: start; }
.pjd .pjd-next-link:not(.pjd-next-link--prev) { justify-items: end; text-align: right; margin-left: auto; }
.pjd .pjd-next-name { font-size: 19px; }
.pjd .pjd-more-grid { grid-template-columns: 1fr; }
.pjd .pjd-more-all { min-height: 44px; }
}
/* ── HOMEPAGE COLLECTIONS AS ONE ROW (29 Sep 2026) ─────────────────────
The six collections in a single row that runs off the right edge:
drag it with the mouse, swipe it on a phone (native scrolling, so no
touch-action fight), or use the arrows. Each card snaps to the left
edge when released. The earlier two-column rows are in git history. */
.home .hp-coll-rail {
overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory;
scrollbar-width: none; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain;
margin-right: calc(-1 * var(--pad)); padding-right: var(--pad);
cursor: grab;
}
.home .hp-coll-rail::-webkit-scrollbar { display: none; }
.home .hp-coll-rail.is-dragging { cursor: grabbing; scroll-snap-type: none; user-select: none; }
.home .hp-coll-rail.is-dragging .hp-coll { pointer-events: none; }
.home .hp-coll-track { display: flex; gap: clamp(16px, 1.6vw, 26px); width: max-content; }
.home .hp-coll-rail .hp-coll {
flex: none; width: clamp(270px, 29vw, 460px); display: flex; flex-direction: column;
scroll-snap-align: start; -webkit-user-drag: none;
}
.home .hp-coll-rail .hp-coll .hp-coll-img { flex: none; aspect-ratio: 1.22; min-height: 0; }
.home .hp-coll-rail .hp-coll img { -webkit-user-drag: none; user-select: none; }
.home .hp-coll-all { display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.home .hp-coll-nav { display: flex; gap: 10px; }
.home .hp-coll-btn {
width: 44px; height: 44px; border-radius: 50%; cursor: pointer;
display: inline-flex; align-items: center; justify-content: center;
background: transparent; color: var(--dark); border: 1px solid rgba(29,48,37,0.35);
font-size: 16px; transition: background 0.3s, color 0.3s, border-color 0.3s, opacity 0.3s;
}
.home .hp-coll-btn:hover:not(:disabled) { background: var(--dark); color: var(--bg); border-color: var(--dark); }
.home .hp-coll-btn:disabled { opacity: 0.3; cursor: default; }
.home .hp-coll-btn:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
@media (max-width: 768px) {
.home .hp-coll-rail .hp-coll { width: 78vw; }
.home .hp-coll-rail .hp-coll .hp-coll-img { aspect-ratio: 1.3; }
}
/* ── FORM. FEELING. FREEDOM. (29 Sep 2026) ─────────────────────────────
The owner's armchair photograph is one wide image on #FFFBF3, so the
band takes exactly that colour and the photograph's edges disappear.
On wide screens the words sit on the photograph's empty areas (placed
in percentages of it); from 1024px down they stack above and below.
The row of links below the words was removed the same day at the
owner's request: a signature piece, not a menu. */
.home .hp-fff { background: #FFFBF3; }
.home .hp-fff-stage { position: relative; aspect-ratio: 1964 / 801; max-width: 1964px; margin: 0 auto; }
.home .hp-fff-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; display: block; }
/* The words start on the page's own left margin and are centred on the
armchair (its middle is 46.8% down the photograph). The note lines up
with the left edge of the velvet square, 80.04% across. */
.home .hp-fff-copy { position: absolute; left: var(--pad); top: 46.8%; transform: translateY(-50%); z-index: 1; }
.home .hp-fff-title {
font-family: 'Playfair Display', serif; font-weight: 400; color: var(--dark);
font-size: clamp(44px, 6.3vw, 124px); line-height: 0.98; letter-spacing: -0.02em; margin: 0;
}
.home .hp-fff-title > span { display: block; }
.home .hp-fff-sub {
font-family: 'Playfair Display', serif; font-size: clamp(17px, 1.7vw, 33px); line-height: 1.3;
color: var(--text); margin: clamp(18px, 2.2vw, 42px) 0 0;
}
.home .hp-fff-note { position: absolute; left: 80.04%; top: 64%; z-index: 1; max-width: 17%; }
.home .hp-fff-note p {
font-family: 'DM Sans', sans-serif; font-size: clamp(11px, 0.95vw, 18px); font-weight: 500;
letter-spacing: 0.22em; line-height: 1.85; text-transform: uppercase; color: var(--text); margin: 0;
}
.home .hp-fff-rule { display: block; width: clamp(48px, 4.3vw, 84px); height: 1px; background: var(--dark); margin-top: clamp(16px, 2vw, 38px); opacity: 0.7; }
@media (max-width: 1024px) {
.home .hp-fff-stage { aspect-ratio: auto; display: grid; padding: clamp(48px, 7vw, 72px) var(--pad); gap: 28px; }
.home .hp-fff-copy, .home .hp-fff-note { position: static; max-width: none; transform: none; }
.home .hp-fff-copy { order: -1; }
.home .hp-fff-img { position: static; width: calc(100% + 2 * var(--pad)); margin: 0 calc(-1 * var(--pad)); height: auto; aspect-ratio: 1.42; object-fit: cover; object-position: 98% 50%; } /* the chair and the whole velvet square, nothing cut */
.home .hp-fff-title { font-size: clamp(46px, 11vw, 96px); }
}
/* ── SMALLER SCREENS, REFINED (29 Sep 2026) ───────────────────────────
From a pass through every page at phone, tablet and desktop widths.
Desktop is untouched; each rule says what it fixes. Sideways rows here
are native scrolling (a swipe on a phone, no script), with the next
card peeking in so it is obvious there is more. */
@media (max-width: 768px) {
/* Find your room: the caption leaves the photograph and sits beneath
it on the green, where it is always legible; the arrows sit beside it. */
.home .hp-exp-stage { aspect-ratio: auto; padding-top: 76.92%; background: none; overflow: visible; }
.home .hp-exp-panel { bottom: auto; height: auto; aspect-ratio: 1.3; }
.home .hp-exp-stage::after { display: none; }
.home .hp-exp-caps { position: relative; left: auto; right: auto; bottom: auto; padding: 18px 112px 0 0; }
.home .hp-exp-arrows { left: auto; right: 0; bottom: 0; top: auto; }
/* Collections: two designs to a row instead of one, like a catalogue. */
.cx-coll .cx-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 34px 16px; }
/* Project pages, "Continue exploring": one row to swipe, not four
full-width photographs stacked. */
.pjd .pjd-more-grid {
display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory;
margin-right: calc(-1 * var(--pad)); padding-right: var(--pad);
scroll-padding-left: 0; scrollbar-width: none;
}
.pjd .pjd-more-grid::-webkit-scrollbar { display: none; }
.pjd .pjd-card { flex: 0 0 min(78%, 360px); scroll-snap-align: start; }
.pjd .pjd-more-all {
flex: 0 0 auto; align-self: center; border: 0; padding: 0 8px; min-height: 44px;
white-space: nowrap;
}
}
@media (max-width: 560px) {
/* Find your room: tighter cards so two sit comfortably side by side. */
.home .hp-exp-thumb-body { padding: 12px; column-gap: 8px; }
.home .hp-exp-thumb-name { font-size: 16px; margin-bottom: 6px; }
.home .hp-exp-thumb-state { font-size: 12.5px; }
.home .hp-exp-now { gap: 7px; }
.home .hp-exp-tick { width: 20px; height: 20px; }
.home .hp-exp-tick::after { left: 7px; top: 4px; }
.home .hp-exp-go { width: 30px; height: 30px; font-size: 13px; }
/* Collections: the whole card is the link, so the words "Explore
design" give way to the picture; the name and type stay. */
.cx-coll .cx-card-img, .cx-coll .cx-card--wide .cx-card-img { aspect-ratio: 1.2; }
.cx-coll .cx-card--wide .cx-card-img { aspect-ratio: 1.69; }
.cx-coll .cx-card-foot { margin-top: 10px; }
.cx-coll .cx-card .cx-more { display: none; }
.cx-coll .cx-card-name { font-size: 17px; }
.cx-coll .cx-card-type { font-size: 10.5px; letter-spacing: 2px; margin-top: 5px; }
/* Homepage process: the four steps as one row to swipe. */
.home .hp-steps {
display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory;
margin: 0 calc(-1 * var(--pad)); padding: 0 var(--pad);
scroll-padding-left: var(--pad); scrollbar-width: none;
}
.home .hp-steps::-webkit-scrollbar { display: none; }
.home .hp-step { flex: 0 0 80%; scroll-snap-align: start; }
.home .hp-step-img { aspect-ratio: 1.05; }
/* Homepage figures: a 2 x 2 instead of four stacked, with a hairline
between the pair in each row. */
.home .hp-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 30px; padding-left: 12px; padding-right: 12px; }
.home .hp-stat { padding: 6px 10px; }
.home .hp-stat:nth-child(even)::before { display: block; min-height: 70px; }
.home .hp-stat-num { font-size: 30px; }
.home .hp-stat-num--word { font-size: 21px; }
.home .hp-stat-label { font-size: 12.5px; margin-top: 8px; }
/* Footer: two columns instead of one long list. */
:is(.home, .svc, .ct, .ab, .pro, .hpf) .hp-footer-main { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 20px; row-gap: 34px; }
:is(.home, .svc, .ct, .ab, .pro, .hpf) .hp-footer-brand { grid-column: 1 / -1; }
:is(.home, .svc, .ct, .ab, .pro, .hpf) .hp-footer-col a { font-size: 14px; }
:is(.home, .svc, .ct, .ab, .pro, .hpf) .hp-footer-contact li { gap: 8px; }
:is(.home, .svc, .ct, .ab, .pro, .hpf) .hp-footer-contact li > span { font-size: 13.5px; }
:is(.home, .svc, .ct, .ab, .pro, .hpf) .hp-footer-social { flex-direction: column; gap: 0; }
:is(.home, .svc, .ct, .ab, .pro, .hpf) .hp-footer-social > span { display: none; }
/* For Professionals: the four sectors as a 2 x 2, no slash stranded
at the start of a line. */
.pro .pro-sectors { display: grid; grid-template-columns: repeat(2, max-content); gap: 0 32px; }
.pro .pro-sectors li + li::before { display: none; }
/* Services: the five-stage strip scrolls sideways; fade its right
edge so it reads as more to come rather than cut off. */
.svc .svc-stages { -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 56px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 56px), transparent); }
}
/* ── THE PHONE AND TABLET MENU (30 Sep 2026) ──────────────────────────
Its top row sits exactly where the menu bar's does — wordmark at the
same place and size, the close button where the menu icon was — so
opening it feels like the page turning, not a new screen. The pages are
numbered in gold, the current one marked in gold; the consultation button
is ivory on the green; phone, email and hours sit at the foot with the
languages. The rows rise in one after another as it opens. */
.mobile-menu {
display: flex; flex-direction: column; align-items: stretch; justify-content: flex-start;
padding: 0 0 calc(28px + env(safe-area-inset-bottom, 0px));
background:
radial-gradient(120% 60% at 100% 0%, rgba(179,154,88,0.08) 0%, rgba(179,154,88,0) 60%),
var(--green-deep);
color: var(--bg);
}
.mobile-menu-top {
flex: none; position: relative;
display: flex; align-items: center; justify-content: space-between;
height: 65px; padding: 0 18px 0 28px;
border-bottom: 1px solid rgba(179,154,88,0.28);
}
.mobile-menu-mark {
display: inline-grid; justify-items: center; text-decoration: none; color: var(--bg);
min-height: 44px; align-content: center;
}
.mobile-menu-mark .mm-word {
font-family: 'Playfair Display', serif; font-size: 19px; letter-spacing: 5px; line-height: 1;
margin-right: -5px; /* the tracking trails the last letter */
}
.mobile-menu-mark .mm-sub {
font-family: 'DM Sans', sans-serif; font-size: 7.5px; letter-spacing: 3px; text-transform: uppercase;
color: rgba(245,241,232,0.7); margin-top: 6px; margin-right: -3px;
}
.mobile-menu .mobile-menu-close {
position: static; width: 44px; height: 44px;
border: 0; border-radius: 0; background: none; color: var(--bg);
}
.mobile-menu .mobile-menu-close:hover,
.mobile-menu .mobile-menu-close:focus-visible { background: none; color: var(--gold); }
.mobile-menu .mobile-menu-close:focus-visible { outline: 1px solid var(--gold); outline-offset: 2px; }
.mobile-menu .mobile-menu-links { list-style: none; margin: 0; padding: 14px 28px 0; }
.mobile-menu .mobile-menu-links li { margin: 0; border-bottom: 1px solid rgba(245,241,232,0.1); }
.mobile-menu .mobile-menu-links a {
display: flex; align-items: baseline; gap: 0;
padding: 17px 0; border-left: 0;
font-family: 'Playfair Display', serif; font-size: 27px; line-height: 1.15;
color: var(--bg); opacity: 1; text-decoration: none;
}
.mobile-menu .mm-n {
flex: none; width: 40px;
font-family: 'DM Sans', sans-serif; font-size: 11px; letter-spacing: 2px; color: var(--gold);
}
.mobile-menu .mm-label { flex: 1; }
.mobile-menu .mm-arrow {
flex: none; align-self: center; font-family: 'DM Sans', sans-serif; font-size: 16px;
color: rgba(245,241,232,0.35); transition: transform 0.3s, color 0.3s;
}
.mobile-menu .mobile-menu-links a:hover .mm-arrow,
.mobile-menu .mobile-menu-links a:focus-visible .mm-arrow { color: var(--gold); transform: translateX(3px); }
.mobile-menu .mobile-menu-links a[aria-current="page"] { padding-left: 0; border-left: 0; }
.mobile-menu .mobile-menu-links a[aria-current="page"] .mm-label { color: var(--gold); }
.mobile-menu .mobile-menu-links a[aria-current="page"] .mm-arrow { color: var(--gold); }
.mobile-menu .mobile-menu-cta { margin: 30px 28px 0; }
.mobile-menu .mobile-menu-btn {
display: flex; align-items: center; justify-content: space-between;
min-height: 54px; padding: 0 22px; box-sizing: border-box;
background: var(--bg); color: var(--dark); text-decoration: none;
font-family: 'DM Sans', sans-serif; font-size: 15px; letter-spacing: 0.2px;
transition: background 0.3s;
}
.mobile-menu .mobile-menu-btn .mm-btn-arrow { color: var(--gold-display); }
.mobile-menu .mobile-menu-btn:hover { background: #fff; }
.mobile-menu .mobile-menu-foot { margin: auto 28px 0; padding-top: 34px; }
.mobile-menu .mobile-menu-contact { list-style: none; margin: 0; padding: 0; display: grid; }
.mobile-menu .mobile-menu-contact a,
.mobile-menu .mobile-menu-contact span {
display: inline-flex; align-items: center; min-height: 40px;
font-family: 'DM Sans', sans-serif; font-size: 15px; color: rgba(245,241,232,0.86); text-decoration: none;
}
.mobile-menu .mobile-menu-contact span { min-height: 32px; font-size: 13.5px; color: rgba(245,241,232,0.6); }
.mobile-menu .mobile-menu-contact a:hover { color: var(--gold); }
.mobile-menu .mobile-menu-contact { padding-bottom: 14px; border-bottom: 1px solid rgba(179,154,88,0.28); }
.mobile-menu .lang-switcher.mobile-lang { margin: 10px 0 0 -12px; padding-top: 0; border-top: 0; }
/* The rows rise in one after another as the panel arrives. */
.mobile-menu .mobile-menu-links li,
.mobile-menu .mobile-menu-cta,
.mobile-menu .mobile-menu-foot { opacity: 0; transform: translateY(14px); transition: opacity 0.2s, transform 0.2s; }
.mobile-menu.open .mobile-menu-links li,
.mobile-menu.open .mobile-menu-cta,
.mobile-menu.open .mobile-menu-foot {
opacity: 1; transform: none;
transition: opacity 0.6s ease, transform 0.8s cubic-bezier(0.16,1,0.3,1);
}
.mobile-menu.open .mobile-menu-links li:nth-child(1) { transition-delay: 0.12s; }
.mobile-menu.open .mobile-menu-links li:nth-child(2) { transition-delay: 0.17s; }
.mobile-menu.open .mobile-menu-links li:nth-child(3) { transition-delay: 0.22s; }
.mobile-menu.open .mobile-menu-links li:nth-child(4) { transition-delay: 0.27s; }
.mobile-menu.open .mobile-menu-links li:nth-child(5) { transition-delay: 0.32s; }
.mobile-menu.open .mobile-menu-links li:nth-child(6) { transition-delay: 0.37s; }
.mobile-menu.open .mobile-menu-cta { transition-delay: 0.44s; }
.mobile-menu.open .mobile-menu-foot { transition-delay: 0.5s; }
@media (prefers-reduced-motion: reduce) {
.mobile-menu .mobile-menu-links li, .mobile-menu .mobile-menu-cta, .mobile-menu .mobile-menu-foot { opacity: 1; transform: none; transition: none; }
}
/* On a short phone (an SE in landscape, say) the rows tighten rather
than push the foot off the screen; the panel still scrolls. */
@media (max-height: 700px) {
.mobile-menu .mobile-menu-links a { padding: 12px 0; font-size: 24px; }
.mobile-menu .mobile-menu-cta { margin-top: 22px; }
.mobile-menu .mobile-menu-foot { padding-top: 24px; }
}
/* A tablet gets the same menu, set a little wider and larger. */
@media (min-width: 600px) {
.mobile-menu-top { padding: 0 19px 0 28px; height: 67px; }
.mobile-menu .mobile-menu-links { padding: 24px 40px 0; }
.mobile-menu .mobile-menu-links a { font-size: 34px; padding: 20px 0; }
.mobile-menu .mobile-menu-cta, .mobile-menu .mobile-menu-foot { margin-left: 40px; margin-right: 40px; }
.mobile-menu .mobile-menu-cta { max-width: 420px; }
}
@media (min-width: 769px) {
/* the menu bar's wordmark grows a size here, so the menu's does too */
.mobile-menu-top { padding: 0 26px 0 37px; height: 72px; }
.mobile-menu-mark .mm-word { font-size: 21px; letter-spacing: 6px; margin-right: -6px; }
.mobile-menu-mark .mm-sub { font-size: 8px; letter-spacing: 3.5px; margin-right: -3.5px; }
}
/* ── PROJECTS: MORE FROM OUR WORK (30 Sep 2026) ────────────────────────
The owner's mockup: a further selection of photographs between the five
projects and the closing band. A twelve-column grid; each pair of
photographs shares one height, the widths alternating half/half,
five/seven, seven/five, so the rhythm changes without the rows going
ragged. Six show; "Show more photographs" lets the other seven rise in.
Every photograph opens in the site's viewer, captioned by its label. */
.pj .pj-gal-sec { padding-bottom: clamp(72px, 7vw, 120px); }
.pj .pj-gal-eyebrow { color: var(--gold-ink); }
.pj .pj-gal {
--gal-h: clamp(250px, 30vw, 520px);
display: grid; grid-template-columns: repeat(12, minmax(0, 1fr));
gap: clamp(26px, 2.6vw, 42px) clamp(12px, 1.25vw, 20px);
padding: 0 var(--pad);
}
.pj .pj-gal-item { margin: 0; display: grid; grid-template-rows: auto auto; min-width: 0; }
.pj .pj-gal-item--a { grid-column: span 6; }
.pj .pj-gal-item--n { grid-column: span 5; }
.pj .pj-gal-item--w { grid-column: span 7; }
.pj .pj-gal-item--f { grid-column: span 12; }
.pj .pj-gal-item--t { grid-column: span 4; }
.pj .pj-gal-item img.pj-gal-alt { display: none; } /* a pair's second view: it waits for the viewer */
.pj .pj-gal-item img {
grid-area: 1 / 1; display: block; width: 100%; height: var(--gal-h); object-fit: cover;
background: var(--bg-alt); cursor: zoom-in;
transition: filter 0.6s ease;
}
.pj .pj-gal-item--f img { height: clamp(280px, 36vw, 620px); }
.pj .pj-gal-item:hover img { filter: brightness(1.04) saturate(1.04); }
.pj .pj-gal-zoom {
grid-area: 1 / 1; align-self: end; justify-self: end; margin: 0 14px 14px 0; position: relative; z-index: 1;
width: 36px; height: 36px; display: flex; align-items: center; justify-content: center;
background: rgba(20,24,20,0.55); color: var(--bg); pointer-events: none;
transition: background-color 0.4s, color 0.4s;
}
.pj .pj-gal-item:hover .pj-gal-zoom { background: var(--bg); color: var(--dark); }
.pj .pj-gal-zoom--set { width: auto; gap: 7px; padding: 0 11px; font-family: 'DM Sans', sans-serif; font-size: 12px; letter-spacing: 0.5px; }
/* The caption: a small gold number, the name in the display serif, and
for a pair the quiet note of how many views it holds. */
.pj .pj-gal-item figcaption {
display: flex; align-items: baseline; gap: 14px; margin-top: 16px;
}
.pj .pj-gal-n {
flex: none; font-family: 'DM Sans', sans-serif; font-size: 11px; font-weight: 500;
letter-spacing: 2px; color: var(--gold-ink);
}
.pj .pj-gal-cap {
font-family: 'Playfair Display', serif; font-size: clamp(17px, 1.3vw, 20px); line-height: 1.2;
color: var(--dark); transition: color 0.4s;
}
.pj .pj-gal-item:hover .pj-gal-cap { color: var(--green); }
.pj .pj-gal-count {
margin-left: auto; flex: none; font-family: 'DM Sans', sans-serif; font-size: 11px;
letter-spacing: 1.6px; text-transform: uppercase; color: var(--muted);
}
/* Capped until the button is pressed; without JavaScript every photo shows. */
.pj .pj-gal--capped .pj-gal-item--more { display: none; }
.pj .pj-gal-item--more.is-in { animation: pj-gal-in 0.9s cubic-bezier(0.16,1,0.3,1) both; animation-delay: calc(var(--i, 0) * 70ms); }
@keyframes pj-gal-in { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
.pj .pj-gal-item--more.is-out {
opacity: 0; transform: translateY(10px);
transition: opacity 0.45s ease, transform 0.5s ease;
}
@media (prefers-reduced-motion: reduce) { .pj .pj-gal-item--more.is-in { animation: none; } }
.pj .pj-gal-foot { display: flex; justify-content: center; padding: clamp(36px, 3.4vw, 54px) var(--pad) 0; }
.pj .pj-gal-foot:has(.pj-gal-more[hidden]) { display: none; }
.pj .pj-gal-more {
appearance: none; cursor: pointer; background: transparent;
display: inline-flex; align-items: center; gap: 12px;
min-height: 50px; padding: 0 38px; border: 1px solid var(--dark); color: var(--dark);
font-family: 'DM Sans', sans-serif; font-size: 15px; letter-spacing: 0.2px;
transition: background-color 0.35s, color 0.35s;
}
.pj .pj-gal-more:hover { background: var(--dark); color: var(--bg); }
.pj .pj-gal-more:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.pj .pj-gal-more-arrow { transition: transform 0.3s; }
.pj .pj-gal-more:hover .pj-gal-more-arrow { transform: translateY(2px); }
.pj .pj-gal-less-label { display: none; }
.pj .pj-gal-more[aria-expanded="true"] .pj-gal-more-label { display: none; }
.pj .pj-gal-more[aria-expanded="true"] .pj-gal-less-label { display: inline; }
.pj .pj-gal-more[aria-expanded="true"] .pj-gal-more-arrow { transform: rotate(180deg); }
.pj .pj-gal-more[aria-expanded="true"]:hover .pj-gal-more-arrow { transform: rotate(180deg) translateY(2px); }
.pj .pj-gal-item img:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
@media (max-width: 1024px) {
.pj .pj-gal { --gal-h: clamp(220px, 32vw, 340px); }
}
@media (max-width: 768px) {
/* One row to swipe, everything in it, the next photograph peeking in;
native scrolling, so no script. The button has nothing to do here. */
.pj .pj-gal {
display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory;
scroll-padding-left: var(--pad); scrollbar-width: none; padding-bottom: 4px;
}
.pj .pj-gal::-webkit-scrollbar { display: none; }
.pj .pj-gal-item { flex: 0 0 min(80%, 420px); scroll-snap-align: start; }
.pj .pj-gal--capped .pj-gal-item--more { display: grid; }
.pj .pj-gal-item img, .pj .pj-gal-item--f img { height: auto; aspect-ratio: 1.2; }
.pj .pj-gal-zoom { height: 30px; min-width: 30px; width: auto; margin: 0 8px 8px 0; }
.pj .pj-gal-item figcaption { gap: 10px; margin-top: 12px; }
.pj .pj-gal-cap { font-size: 17px; }
.pj .pj-gal-count { display: none; } /* the badge on the photograph already says 2 */
.pj .pj-gal-foot { display: none; }
/* the last photograph can still snap to the start */
.pj .pj-gal::after { content: ''; flex: 0 0 calc(var(--pad) - 14px); }
}
/* ── SEVERAL VIEWS OF ONE PIECE (30 Sep 2026) ─────────────────────────
On the design page: arrows on the photograph and a "01 / 04" count.
On a collection card: quiet arrows that appear on hover (always, on a
touchscreen), dots along the foot, and the views cross-fading. */
.view-arrow {
position: absolute; top: 50%; z-index: 2; transform: translateY(-50%);
width: 44px; height: 44px; border-radius: 50%; border: 0; padding: 0; cursor: pointer;
display: flex; align-items: center; justify-content: center;
background: rgba(245,241,232,0.9); color: var(--dark);
opacity: 0.85; transition: opacity 0.3s, background-color 0.3s;
}
.view-arrow--prev { left: 14px; } .view-arrow--next { right: 14px; }
.view-arrow:hover, .view-arrow:focus-visible { opacity: 1; background: var(--bg); }
.view-arrow:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.view-count {
position: absolute; left: 14px; bottom: 14px; z-index: 2;
font-family: 'DM Sans', sans-serif; font-size: 11px; letter-spacing: 2px;
color: var(--dark); background: rgba(245,241,232,0.9); padding: 6px 10px;
}
.view-stage { touch-action: pan-y; }
.cx-coll .cx-card-img[data-views] { touch-action: pan-y; }
.cx-coll .cx-card-img .cx-view-img {
position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
}
.cx-coll .cx-card-img[data-views] img { transition: opacity 0.6s ease, transform 1.2s cubic-bezier(0.16,1,0.3,1); }
html .cx-coll .cx-card-img[data-views] img:not(.is-on) { opacity: 0; }
.cx-view-arrow {
position: absolute; top: 50%; z-index: 2; transform: translateY(-50%);
width: 38px; height: 38px; border-radius: 50%;
display: flex; align-items: center; justify-content: center;
background: rgba(245,241,232,0.92); color: var(--dark);
opacity: 0; transition: opacity 0.35s, background-color 0.3s; cursor: pointer;
}
.cx-view-arrow--prev { left: 12px; } .cx-view-arrow--next { right: 12px; }
.cx-card:hover .cx-view-arrow { opacity: 0.9; }
.cx-view-arrow:hover { opacity: 1; background: var(--bg); }
.cx-view-dots {
position: absolute; left: 0; right: 0; bottom: 12px; z-index: 2;
display: flex; justify-content: center; gap: 7px; pointer-events: none;
}
.cx-view-dots span {
width: 6px; height: 6px; border-radius: 50%; background: rgba(245,241,232,0.5);
box-shadow: 0 0 0 1px rgba(20,24,20,0.12); transition: background-color 0.3s, transform 0.3s;
}
.cx-view-dots span.is-on { background: var(--bg); transform: scale(1.25); }
@media (hover: none) {
.cx-view-arrow { opacity: 0.85; width: 34px; height: 34px; }
}
@media (max-width: 560px) {
.cx-view-arrow { width: 30px; height: 30px; }
.cx-view-arrow--prev { left: 6px; } .cx-view-arrow--next { right: 6px; }
.view-arrow { width: 40px; height: 40px; }
}
@media (prefers-reduced-motion: reduce) {
.cx-coll .cx-card-img[data-views] img { transition: none; }
}