/* ─────────────────────────────────────────────────────────────────────────
GW Home Design — Brand Foundations · Implementation
Cormorant Garamond + DM Sans · Mediterranean palette
───────────────────────────────────────────────────────────────────── */
:root {
--parchment: #E3DED2;
--parchment-warm: #F3EFE8;
--parchment-deep: #D4CEBE;
--greige: #A49E89;
--greige-light: #BDB7A4;
--taupe: #736A60;
--sage-olive: #888163;
--olive: #8B5D3C;
--olive-deep: #6F4A30;
--cognac: #5B553D;
--cognac-dim: #4A4432;
--graphite: #2E2A24;
--ink: #1F1C17;
--serif: 'Cormorant Garamond', 'EB Garamond', Georgia, serif;
--sans: 'DM Sans', system-ui, sans-serif;
--max-w: 1440px;
--gutter: clamp(28px, 5vw, 88px);
--nav-h: 92px;
--t: .3s ease;
}
/* RESET */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
background: var(--parchment);
color: var(--graphite);
font-family: var(--sans);
font-weight: 300;
line-height: 1.6;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
overflow-x: hidden;
}
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; background: none; border: none; color: inherit; }
strong, b { font-weight: 500; }
/* Subtle paper-grain overlay sitewide */
body::before {
content: '';
position: fixed; inset: 0; pointer-events: none; z-index: 9999;
opacity: .055;
background-image: url("data:image/svg+xml;utf8,");
mix-blend-mode: multiply;
}
/* ═══════════════════════════════════════════════════════════════════════
TYPE SYSTEM
═══════════════════════════════════════════════════════════════════ */
.eyebrow {
font-family: var(--sans);
font-size: 10px;
font-weight: 400;
letter-spacing: 0.42em;
text-transform: uppercase;
padding-left: 0.42em;
color: var(--graphite);
display: inline-block;
}
.eyebrow.on-dark { color: color-mix(in oklab, var(--parchment) 70%, transparent); }
.eyebrow.on-cognac { color: var(--cognac); }
.display {
font-family: var(--serif);
font-weight: 400;
line-height: 0.96;
letter-spacing: -0.012em;
text-wrap: balance;
}
.display em { font-style: italic; font-weight: 400; }
.lede {
font-family: var(--serif);
font-weight: 400;
font-size: 19px;
line-height: 1.5;
color: color-mix(in oklab, var(--graphite) 88%, transparent);
text-wrap: pretty;
}
.lede.on-dark { color: color-mix(in oklab, var(--parchment) 88%, transparent); }
.body { font-size: 16px; line-height: 1.75; letter-spacing: 0.012em; text-wrap: pretty; }
.body-sm { font-size: 12.5px; line-height: 1.7; letter-spacing: 0.014em; }
/* ═══════════════════════════════════════════════════════════════════════
LAYOUT PRIMITIVES
═══════════════════════════════════════════════════════════════════ */
.container {
width: 100%;
max-width: var(--max-w);
margin-inline: auto;
padding-inline: var(--gutter);
}
.section { position: relative; padding-block: clamp(56px, 8vw, 96px); }
.section--dark { background: var(--graphite); color: var(--parchment); }
.section--olive { background: var(--olive); color: var(--parchment); }
.section--warm { background: var(--parchment-warm); }
.section-head { text-align: center; margin-bottom: clamp(56px, 9vw, 88px); }
.section-head .eyebrow {
color: color-mix(in oklab, var(--graphite) 65%, transparent);
margin-bottom: 22px;
font-size: 13px;
}
.section-head .display { font-size: clamp(48px, 6vw, 88px); }
.section-sub {
font-family: var(--serif);
font-weight: 400;
font-size: clamp(18px, 2vw, 24px);
color: color-mix(in oklab, var(--graphite) 68%, transparent);
margin-top: 16px;
}
.section-sub em { font-style: italic; }
/* About — card overlay (home) */
.about-overlay { overflow: hidden; background: #A49D88; } /* trial: near-identical to --greige (#A49E89) */
.about-overlay-grid {
display: grid;
grid-template-columns: 5fr 6fr;
align-items: center;
}
.about-overlay-image { grid-column: 2; grid-row: 1; }
.about-overlay-image img { width: 100%; height: auto; display: block; border-radius: 2px; }
.about-card {
grid-column: 1; grid-row: 1;
position: relative; z-index: 2;
background: var(--parchment-warm);
padding: clamp(36px, 4.5vw, 60px);
margin-right: clamp(-40px, -2.5vw, -20px);
box-shadow: 0 28px 70px color-mix(in oklab, var(--graphite) 14%, transparent);
}
.about-card .display { font-size: clamp(40px, 4.4vw, 60px); margin-bottom: 28px; }
.about-card .eyebrow { margin-bottom: 24px; }
@media (max-width: 820px) {
.about-overlay-grid { grid-template-columns: 1fr; }
.about-overlay-image { grid-column: 1; grid-row: 1; }
.about-card {
grid-column: 1; grid-row: 2;
margin-right: 0;
margin-top: -56px;
margin-inline: clamp(16px, 5vw, 48px) 0;
}
}
/* Services (home) — same overlaid-title tiles as the Services page */
.services-home { padding-bottom: clamp(56px, 8vw, 96px); }
/* Hovering a tile highlights it like a selected tile on the Services page; the others dim */
.services-home .service-tile .ph-img { transition: filter .5s ease; }
@media (hover: hover) {
.services-home .three-services:hover .service-tile:not(:hover) .ph-img { filter: brightness(0.55) saturate(0.85); }
.services-home .service-tile:hover .tile-title { background: color-mix(in oklab, var(--sage-olive) 90%, transparent); }
}
/* About page story — photo with an overlapping text card (mirrors the homepage About) */
.story-grid.story-grid--overlay {
grid-template-columns: 5fr 6fr;
gap: 0;
align-items: center;
}
.story-grid--overlay .story-image { position: relative; z-index: 3; }
.story-grid--overlay .story-image .ph {
box-shadow: 0 28px 70px color-mix(in oklab, var(--graphite) 18%, transparent);
min-height: 0;
aspect-ratio: 3 / 4;
border-radius: 2px;
}
.story-grid--overlay .story-text {
position: relative; z-index: 2;
background: var(--parchment-warm);
padding: clamp(36px, 4.5vw, 60px) clamp(36px, 4.5vw, 60px) clamp(36px, 4.5vw, 60px) calc(clamp(36px, 4.5vw, 60px) + clamp(48px, 5vw, 72px));
margin-left: calc(-1 * clamp(48px, 5vw, 72px));
box-shadow: 0 28px 70px color-mix(in oklab, var(--graphite) 14%, transparent);
}
.story-grid--overlay .story-text p { line-height: 1.75; }
@media (max-width: 820px) {
.story-grid.story-grid--overlay { grid-template-columns: 1fr; }
.story-grid--overlay .story-text {
margin-left: clamp(16px, 5vw, 48px);
margin-top: -56px;
}
}
/* ═══════════════════════════════════════════════════════════════════════
CTA + LINKS
═══════════════════════════════════════════════════════════════════ */
.cta {
display: inline-flex; align-items: center; gap: 22px;
font-family: var(--sans);
font-size: 11px;
font-weight: 500;
letter-spacing: 0.32em;
text-transform: uppercase;
color: var(--graphite);
padding: 8px 0 8px 0.32em;
border-bottom: 1px solid currentColor;
line-height: 1;
transition: gap var(--t), opacity var(--t);
}
.cta:hover { gap: 32px; }
.cta .arrow { transition: transform var(--t); }
.cta:hover .arrow { transform: translateX(6px); }
.cta.on-dark { color: var(--parchment); }
.btn {
display: inline-block;
font-family: var(--sans);
font-size: 11px;
font-weight: 500;
letter-spacing: 0.32em;
text-transform: uppercase;
padding: 18px 36px;
border: 1px solid var(--olive);
color: var(--parchment-warm);
background: var(--olive);
transition: background var(--t), color var(--t), border-color var(--t);
}
.btn:hover { background: var(--olive-deep); color: var(--parchment-warm); border-color: var(--olive-deep); }
.btn.on-dark { background: transparent; color: var(--parchment); border-color: currentColor; }
.btn.on-dark:hover { background: var(--olive); color: var(--parchment-warm); border-color: var(--olive); }
/* ═══════════════════════════════════════════════════════════════════════
PLACEHOLDER PANELS — composed gradients suggesting plastered walls,
natural light, terracotta, olive, linen. Replace with ![]()
when ready.
═══════════════════════════════════════════════════════════════════ */
.ph {
position: relative;
overflow: hidden;
background-color: var(--parchment-deep);
isolation: isolate;
}
.ph::before, .ph::after { content: ''; position: absolute; inset: 0; pointer-events: none; }
.ph::before {
background:
radial-gradient(120% 90% at 22% 10%, rgba(243,239,232,.95) 0%, rgba(243,239,232,0) 55%),
radial-gradient(80% 60% at 80% 30%, rgba(180,154,118,.45) 0%, rgba(180,154,118,0) 60%),
radial-gradient(140% 120% at 90% 110%, rgba(46,42,36,.45) 0%, rgba(46,42,36,0) 60%),
linear-gradient(160deg, var(--parchment-warm) 0%, var(--greige) 100%);
}
.ph::after {
background-image: url("data:image/svg+xml;utf8,");
opacity: .12;
mix-blend-mode: multiply;
}
.ph > * { position: relative; z-index: 1; }
.ph--dim::before {
background:
radial-gradient(80% 60% at 30% 20%, rgba(243,239,232,.45) 0%, rgba(243,239,232,0) 55%),
radial-gradient(70% 50% at 75% 60%, rgba(139,94,60,.35) 0%, rgba(139,94,60,0) 60%),
linear-gradient(170deg, #3a2f24 0%, #5e4a36 60%, #806149 100%);
}
.ph--sun::before {
background:
radial-gradient(60% 70% at 70% 25%, rgba(255,247,222,.95) 0%, rgba(255,247,222,0) 55%),
radial-gradient(120% 90% at 20% 110%, rgba(164,158,137,.5) 0%, rgba(164,158,137,0) 55%),
linear-gradient(165deg, var(--parchment-warm) 0%, #d9c9a8 80%, #b5a085 100%);
}
.ph--olive::before {
background:
radial-gradient(80% 60% at 25% 25%, rgba(243,239,232,.4) 0%, rgba(243,239,232,0) 55%),
radial-gradient(120% 100% at 100% 100%, rgba(33,40,25,.6) 0%, rgba(33,40,25,0) 55%),
linear-gradient(160deg, #6b6547 0%, #5B553D 80%, #46402e 100%);
}
.ph--terracotta::before {
background:
radial-gradient(80% 60% at 30% 15%, rgba(255,238,210,.7) 0%, rgba(255,238,210,0) 55%),
radial-gradient(110% 80% at 80% 110%, rgba(60,30,18,.55) 0%, rgba(60,30,18,0) 55%),
linear-gradient(170deg, #c08964 0%, #8b5d3c 80%, #5e3e22 100%);
}
.ph--linen::before {
background:
radial-gradient(100% 80% at 20% 0%, rgba(255,252,242,.9) 0%, rgba(255,252,242,0) 55%),
radial-gradient(120% 80% at 100% 100%, rgba(164,158,137,.55) 0%, rgba(164,158,137,0) 55%),
linear-gradient(170deg, #f4ecd6 0%, #ddd0b1 100%);
}
.ph--stone::before {
background:
radial-gradient(90% 70% at 30% 10%, rgba(255,252,242,.7) 0%, rgba(255,252,242,0) 55%),
radial-gradient(80% 70% at 90% 100%, rgba(120,108,90,.5) 0%, rgba(120,108,90,0) 55%),
linear-gradient(170deg, #d8cdb4 0%, #a99c80 100%);
}
.ph--shadow::before {
background:
radial-gradient(60% 50% at 60% 30%, rgba(180,154,118,.6) 0%, rgba(180,154,118,0) 55%),
radial-gradient(120% 100% at 0% 100%, rgba(20,16,12,.7) 0%, rgba(20,16,12,0) 55%),
linear-gradient(170deg, #2a221c 0%, #4a3a2a 100%);
}
.ph-label {
position: absolute; left: 16px; bottom: 14px; z-index: 2;
font-family: var(--sans);
font-size: 9px; font-weight: 400;
letter-spacing: 0.38em; text-transform: uppercase;
color: color-mix(in oklab, var(--parchment) 70%, transparent);
padding-left: 0.38em;
pointer-events: none;
}
.ph--sun .ph-label, .ph--linen .ph-label, .ph--stone .ph-label {
color: color-mix(in oklab, var(--graphite) 50%, transparent);
}
/* Drop a real photo into any .ph placeholder — gradient + label disappear */
.ph-img {
position: absolute; inset: 0;
width: 100%; height: 100%;
object-fit: cover;
z-index: 1;
}
.ph:has(> .ph-img)::before,
.ph:has(> .ph-img)::after { display: none; }
.ph:has(> .ph-img) .ph-label { display: none; }
/* ═══════════════════════════════════════════════════════════════════════
NAVIGATION
═══════════════════════════════════════════════════════════════════ */
.nav {
position: fixed; top: 0; left: 0; right: 0; z-index: 50;
padding-top: 25px;
color: var(--parchment);
transition: background var(--t), color var(--t), backdrop-filter var(--t);
}
.nav-row {
/* equal outer columns keep the links truly centred on the page */
display: grid; grid-template-columns: 1fr auto 1fr;
align-items: center;
padding-bottom: 25px;
border-bottom: 1px solid color-mix(in oklab, var(--parchment) 55%, transparent);
}
.nav-logo { display: flex; align-items: center; }
.nav-logo img {
height: 72px; width: auto; object-fit: contain;
}
.nav-logo img.is-light { display: none; }
.nav-logo img.is-dark { display: block; }
.nav-links {
display: flex; justify-content: center; gap: 48px;
font-family: var(--sans);
font-size: 10.5px; font-weight: 400;
letter-spacing: 0.32em; text-transform: uppercase;
}
/* Desktop: middle link (Services) sits exactly on the page's centre line */
@media (min-width: 721px) {
.nav-links { display: grid; grid-template-columns: 1fr auto 1fr; }
.nav-links a:first-child { justify-self: end; }
.nav-links a:nth-child(3) { justify-self: start; }
.nav-links .nav-links-contact { display: none; }
}
.nav-links a {
color: inherit;
padding-left: 0.32em;
position: relative;
transition: opacity .2s ease;
}
.nav-links a:hover { opacity: .65; }
.nav-links a.is-active::after {
content: ''; position: absolute;
bottom: -8px; left: 0.32em; right: 0; height: 1px;
background: var(--cognac);
}
.nav-cta {
justify-self: end;
font-family: var(--sans);
font-size: 10.5px; font-weight: 500;
letter-spacing: 0.32em; text-transform: uppercase;
color: inherit;
padding-left: 0.32em;
transition: opacity .2s ease;
}
.nav-cta:hover { opacity: .65; }
/* Inner page nav (light backgrounds) — always translucent parchment */
.nav.on-light {
color: var(--graphite);
background: rgba(227, 222, 210, 0.9);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
}
.nav.on-light .nav-row { border-bottom-color: color-mix(in oklab, var(--graphite) 18%, transparent); }
.nav.on-light .nav-logo img.is-dark { display: none; }
.nav.on-light .nav-logo img.is-light { display: block; }
/* Hero page nav: starts transparent over dark hero, becomes translucent parchment on scroll */
.nav.scrolled {
background: rgba(227, 222, 210, 0.88);
backdrop-filter: blur(14px);
-webkit-backdrop-filter: blur(14px);
color: var(--graphite);
}
.nav.scrolled .nav-row { border-bottom-color: color-mix(in oklab, var(--graphite) 12%, transparent); }
.nav.scrolled .nav-logo img.is-dark { display: none; }
.nav.scrolled .nav-logo img.is-light { display: block; }
.nav-toggle { display: none; flex-direction: column; gap: 5px; padding: 4px; }
.nav-toggle span { display: block; width: 24px; height: 1px; background: currentColor; transition: transform var(--t), opacity var(--t); }
.nav-toggle.is-open span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav-toggle.is-open span:nth-child(2) { opacity: 0; }
.nav-toggle.is-open span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
/* ═══════════════════════════════════════════════════════════════════════
HERO (Home)
═══════════════════════════════════════════════════════════════════ */
.hero {
position: relative;
min-height: 100vh;
overflow: hidden;
color: var(--parchment);
isolation: isolate;
}
.hero-bg {
position: absolute; inset: 0; z-index: 0;
/* Casa Olivo 1: the painting's centre sits at 51% of the photo's width, so the photo is
sized slightly wider than the screen and shifted to put the painting dead centre */
--hero-w: max(104vw, calc(100vh * 1447 / 1087));
background: url('../images/Casa%20Olivo/1.jpg') calc(50vw - 0.51 * var(--hero-w)) center / var(--hero-w) auto no-repeat,
linear-gradient(160deg, #3a2c20 0%, #4d3a28 35%, #6e5538 70%, #9a7a55 100%);
background-attachment: scroll, scroll;
transform: scale(1.08);
animation: hero-zoom 6s ease-out forwards;
}
@keyframes hero-zoom { to { transform: scale(1); } }
@media (prefers-reduced-motion: reduce) {
.hero-bg { transform: none; animation: none; }
}
.hero-bg::after {
content: '';
position: absolute; inset: 0;
background-image: url("data:image/svg+xml;utf8,");
opacity: .14; mix-blend-mode: multiply;
}
.hero-scrim {
position: absolute; inset: 0; z-index: 1;
background: rgba(28, 22, 16, 0.42);
pointer-events: none;
}
.hero-logo {
position: absolute; inset: 0; z-index: 3;
display: flex; align-items: center; justify-content: center;
pointer-events: none;
transition: opacity .6s ease;
}
.hero-logo img {
width: min(300px, 56vw); height: auto;
animation: hero-logo-in 1.5s ease-out both;
}
@keyframes hero-logo-in {
from { opacity: 0; transform: translateY(18px); }
to { opacity: 1; transform: none; }
}
body.scrolled .hero-logo { opacity: 0; }
.hero-scroll {
position: absolute; left: 50%; bottom: 36px; transform: translateX(-50%);
z-index: 3;
display: flex; flex-direction: column; align-items: center; gap: 14px;
color: var(--parchment-warm);
font-family: var(--sans); font-size: 10px; font-weight: 400;
letter-spacing: 0.32em; text-transform: uppercase;
transition: opacity .5s ease;
}
.hero-scroll-line {
width: 1px; height: 46px; position: relative; overflow: hidden;
background: color-mix(in oklab, var(--parchment-warm) 35%, transparent);
}
.hero-scroll-line::after {
content: ''; position: absolute; left: 0; top: 0; width: 100%; height: 40%;
background: var(--parchment-warm);
animation: scroll-cue 1.9s ease-in-out infinite;
}
@keyframes scroll-cue {
0% { transform: translateY(-100%); }
100% { transform: translateY(250%); }
}
body.scrolled .hero-scroll { opacity: 0; pointer-events: none; }
/* Nav logo hidden over the hero at the top; reappears on scroll (homepage only) */
.nav[data-hero] .nav-logo { transition: opacity .5s ease; }
.nav[data-hero]:not(.scrolled) .nav-logo { opacity: 0; pointer-events: none; }
.hero-watermark {
position: absolute; left: 0; right: 0; top: 18%;
text-align: center;
font-family: var(--serif);
font-weight: 500;
font-size: clamp(140px, 22vw, 320px);
line-height: .85;
letter-spacing: -0.04em;
color: color-mix(in oklab, var(--parchment) 16%, transparent);
white-space: nowrap;
user-select: none;
pointer-events: none;
z-index: 1;
text-transform: uppercase;
}
.hero-watermark em { font-style: italic; font-weight: 400; }
.hero-content {
position: relative; z-index: 2;
padding-top: 200px; padding-bottom: 40px;
min-height: 100vh;
display: flex; flex-direction: column; justify-content: space-between;
}
.hero-headline {
font-family: var(--serif);
font-weight: 400;
font-size: clamp(72px, 11vw, 168px);
line-height: .92;
letter-spacing: -0.025em;
}
.hero-headline em { font-style: italic; font-weight: 400; }
.hero-headline .l1 { display: block; }
.hero-headline .l2 { display: block; padding-left: 22%; margin-top: -0.04em; }
.hero-headline .l3 { display: block; padding-left: 8%; margin-top: -0.04em; }
.hero-bottom {
display: flex;
justify-content: flex-end;
align-items: end;
margin-top: 72px;
}
.hero-tagline {
font-family: var(--serif);
font-style: italic;
font-weight: 400;
font-size: 17px;
line-height: 1.5;
max-width: 28ch;
color: color-mix(in oklab, var(--parchment) 88%, transparent);
}
.hero-actions { }
.hero-actions .cta {
font-size: 14px;
gap: 24px;
padding: 14px 0 14px 0.32em;
}
.hero-actions .cta:hover { gap: 40px; }
.hero-meta {
grid-column: 4;
text-align: right;
font-family: var(--sans);
font-size: 9.5px; font-weight: 400;
letter-spacing: 0.32em; text-transform: uppercase;
color: color-mix(in oklab, var(--parchment) 70%, transparent);
padding-left: 0.32em;
line-height: 2;
}
/* ═══════════════════════════════════════════════════════════════════════
PAGE HEADER (inner pages, no full hero)
═══════════════════════════════════════════════════════════════════ */
.page-head {
padding-top: calc(var(--nav-h) + 120px);
padding-bottom: 80px;
text-align: center;
border-bottom: 1px solid color-mix(in oklab, var(--graphite) 12%, transparent);
}
.page-head .eyebrow { margin-bottom: 22px; color: var(--cognac); }
.page-head .display { font-size: clamp(54px, 7vw, 100px); margin-bottom: 32px; }
.page-head .lede { max-width: 52ch; margin-inline: auto; }
.page-head--tight { padding-bottom: 40px; border-bottom: none; }
.page-head--tight .display { margin-bottom: 0; font-size: clamp(40px, 5vw, 72px); }
/* About page hero banner */
.about-hero {
position: relative;
margin-top: 122px;
min-height: 62vh;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
isolation: isolate;
}
.about-hero-bg {
position: absolute; inset: 0; z-index: 0;
border-radius: 0;
}
/* Banners for now: taupe (secondary colour) with a soft fade and fine grain for texture */
.about-hero-bg--flat {
background:
radial-gradient(90% 120% at 15% 0%, rgba(243, 239, 232, 0.16) 0%, rgba(243, 239, 232, 0) 60%),
radial-gradient(80% 110% at 100% 100%, rgba(31, 28, 23, 0.32) 0%, rgba(31, 28, 23, 0) 65%),
var(--banner, var(--taupe));
}
/* Each page's banner takes a different secondary colour */
.about-hero--copper { --banner: var(--olive); } /* #8B5D3C */
.about-hero--taupe { --banner: var(--taupe); } /* #736A60 */
.about-hero--green { --banner: var(--cognac); } /* #5B553D */
.about-hero--beige { --banner: var(--greige); } /* #A49E89 */
/* Light banner: dark text so it stays readable */
.about-hero--beige .about-hero-inner .display,
.about-hero--beige .about-hero-inner p { color: var(--graphite); }
.about-hero-bg--flat::after {
content: ''; position: absolute; inset: 0;
background-image: url("data:image/svg+xml;utf8,");
opacity: .1; mix-blend-mode: overlay;
}
.about-hero--flat::after { display: none; }
.about-hero::after {
content: '';
position: absolute; inset: 0; z-index: 1;
background: linear-gradient(180deg, rgba(30,24,18,0.28) 0%, rgba(30,24,18,0.12) 45%, rgba(30,24,18,0.42) 100%);
}
.about-hero--shade::after {
background: rgba(30,24,18,0.4);
}
.about-hero-inner {
position: relative; z-index: 2;
text-align: center;
padding: 40px var(--gutter);
width: 100%;
}
.about-hero-inner .display {
color: var(--parchment-warm);
font-size: clamp(30px, 6vw, 82px);
text-transform: uppercase;
letter-spacing: 0.04em;
padding-left: 0.04em; /* balances the trailing letter-space so the line is truly centred */
margin-bottom: 24px;
white-space: nowrap;
}
.about-hero-inner p {
font-family: var(--sans);
font-weight: 300;
font-size: clamp(15px, 1.5vw, 18px);
line-height: 1.7;
color: color-mix(in oklab, var(--parchment-warm) 92%, transparent);
max-width: 46ch;
margin-inline: auto;
}
.about-hero-inner p strong { font-weight: 500; }
@media (max-width: 640px) {
.about-hero { margin-top: 122px; min-height: 52vh; }
}
/* ═══════════════════════════════════════════════════════════════════════
ABOUT (home + page)
═══════════════════════════════════════════════════════════════════ */
.about-grid {
display: grid;
grid-template-columns: 5fr 7fr;
gap: 96px;
align-items: center;
}
.about-left .eyebrow { margin-bottom: 56px; }
.about-left .display { font-size: clamp(48px, 5.2vw, 76px); margin-bottom: 32px; }
.about-left .body {
max-width: 42ch;
margin-bottom: 48px;
color: color-mix(in oklab, var(--graphite) 78%, transparent);
}
.about-images {
position: relative;
display: grid;
grid-template-columns: 5fr 3fr;
gap: 24px;
align-items: start;
}
.about-images .ph.tall { aspect-ratio: 4 / 5; }
.about-images .ph.small { aspect-ratio: 4 / 5; margin-top: 64px; }
/* About page long-form */
.story {
max-width: 56rem;
margin-inline: auto;
}
.story h2.display { margin-bottom: 32px; font-size: clamp(40px, 4.6vw, 64px); text-align: center; }
.story p {
font-size: 16px;
line-height: 1.85;
margin-bottom: 24px;
color: color-mix(in oklab, var(--graphite) 85%, transparent);
max-width: none;
}
.story .divider {
width: 60px; height: 1px;
background: var(--cognac);
margin: 36px auto;
}
.story-grid {
display: grid;
grid-template-columns: 5fr 7fr;
gap: 72px;
align-items: stretch;
}
.story-image {
display: flex;
}
.story-image .ph {
flex: 1;
width: 100%;
min-height: 420px;
aspect-ratio: unset;
border-radius: 4px;
overflow: hidden;
}
.story-text p {
font-size: 16px;
line-height: 1.9;
margin-bottom: 26px;
color: color-mix(in oklab, var(--graphite) 85%, transparent);
}
.story-text p:last-child { margin-bottom: 0; }
.section--story { padding-block: clamp(40px, 5vw, 72px); }
/* ═══════════════════════════════════════════════════════════════════════
THREE SERVICES (home)
═══════════════════════════════════════════════════════════════════ */
.three-services {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 40px;
}
.service-tile { display: flex; flex-direction: column; }
.service-tile a {
display: block;
overflow: hidden;
margin-bottom: 26px;
}
.service-tile a .ph {
aspect-ratio: 4 / 5;
transition: transform 1.2s ease;
}
.service-tile a:hover .ph { transform: scale(1.04); }
.service-tile > .ph {
aspect-ratio: 4 / 5;
margin-bottom: 26px;
}
.service-tile h3 {
font-family: var(--serif);
font-weight: 500;
font-size: 24px;
letter-spacing: 0.01em;
text-transform: uppercase;
margin-bottom: 12px;
}
.service-tile p {
font-size: 13.5px;
line-height: 1.7;
color: color-mix(in oklab, var(--graphite) 75%, transparent);
max-width: 38ch;
}
/* Services page — titles overlaid on the image */
.three-services--overlay .service-tile > .ph {
aspect-ratio: 4 / 5;
margin-bottom: 0;
}
.three-services--overlay .tile-title {
position: absolute;
left: 0; right: 0;
top: 50%;
transform: translateY(-50%);
z-index: 2;
text-align: center;
font-family: var(--serif);
font-weight: 400;
font-size: clamp(19px, 1.7vw, 25px);
letter-spacing: 0.04em;
color: var(--parchment-warm);
padding: 18px 16px;
background: color-mix(in oklab, var(--graphite) 40%, transparent);
transition: background .3s ease;
}
/* Services page — clickable selector + swappable detail panels */
.service-pick {
display: block;
width: 100%;
padding: 0;
border: 0;
margin: 0;
background: none;
cursor: pointer;
overflow: hidden;
position: relative;
}
.service-pick .ph {
aspect-ratio: 4 / 5;
margin-bottom: 0;
transition: transform 1.2s ease;
}
.service-pick:hover .ph { transform: scale(1.04); }
.service-tile.is-active .tile-title {
background: color-mix(in oklab, var(--sage-olive) 90%, transparent);
}
/* Dim the tiles that aren't selected; brighten a little on hover */
.service-select .service-tile .ph-img { transition: filter .5s ease; }
.service-select .service-tile:not(.is-active) .ph-img { filter: brightness(0.55) saturate(0.85); }
.service-select .service-tile:not(.is-active) .service-pick:hover .ph-img { filter: brightness(0.8) saturate(0.95); }
/* Detail area that swaps beneath the tiles */
.service-detail {
margin-top: clamp(32px, 5vw, 56px);
scroll-margin-top: var(--nav-h);
}
.service-panel[hidden] { display: none; }
.service-panel { padding-block: clamp(24px, 4vw, 48px) clamp(56px, 8vw, 104px); }
.service-panel.timeline-section { padding-bottom: 0; }
.service-heading {
text-align: center;
font-family: var(--serif);
font-weight: 600;
font-size: clamp(32px, 4.2vw, 56px);
letter-spacing: 0.02em;
text-transform: uppercase;
color: var(--taupe);
margin-bottom: clamp(24px, 3vw, 36px);
}
.service-copy {
background: var(--parchment-warm);
padding: clamp(28px, 4vw, 52px) clamp(28px, 4.5vw, 60px);
}
.service-copy p {
font-size: 18px;
line-height: 1.75;
color: color-mix(in oklab, var(--graphite) 88%, transparent);
}
.service-copy p + p { margin-top: 14px; }
.service-copy-centre { text-align: center; }
.service-includes-title {
font-family: var(--serif);
font-weight: 400;
font-size: clamp(22px, 2.2vw, 30px);
text-align: center;
color: var(--graphite);
margin: clamp(26px, 3vw, 36px) auto 0;
padding-bottom: 14px;
max-width: 420px;
border-bottom: 1px solid color-mix(in oklab, var(--graphite) 55%, transparent);
}
.service-includes {
columns: 2;
column-gap: clamp(32px, 5vw, 64px);
list-style: disc;
width: fit-content;
max-width: 100%;
padding-left: 1.2em;
margin: clamp(20px, 2.5vw, 28px) auto clamp(22px, 3vw, 32px);
}
.service-includes li {
font-size: 18px;
line-height: 1.6;
padding-left: 0.4em;
break-inside: avoid;
color: color-mix(in oklab, var(--graphite) 88%, transparent);
}
.service-includes li::marker { color: var(--graphite); }
.how-we-work {
font-family: var(--serif);
font-weight: 400;
font-size: clamp(34px, 4.4vw, 60px);
text-align: center;
text-transform: uppercase;
color: var(--taupe);
margin: clamp(56px, 7vw, 88px) auto 0;
padding-bottom: clamp(20px, 2.5vw, 32px);
max-width: 1140px;
border-bottom: 1.5px solid color-mix(in oklab, var(--graphite) 70%, transparent);
}
.timeline-band {
background: var(--parchment-warm);
margin-top: clamp(36px, 5vw, 56px);
padding-block: clamp(56px, 8vw, 104px);
}
/* Services page — menu of nine circles */
.about-hero-inner p.about-hero-intro {
max-width: 62rem;
margin-top: 28px;
font-size: clamp(16px, 1.5vw, 20px);
color: #fff;
}
.services-menu {
background: var(--parchment-warm);
padding-block: clamp(40px, 5vw, 64px) clamp(56px, 7vw, 88px);
}
.service-circles {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: clamp(36px, 4vw, 56px) clamp(24px, 3.5vw, 48px);
max-width: 1160px;
margin-inline: auto;
}
.service-circle { text-align: center; }
.service-circle-pick {
display: block; width: 100%; padding: 0; border: 0; background: none;
font: inherit; color: inherit; text-align: center; cursor: pointer;
}
.service-circle-img {
display: block;
width: min(100%, 372px);
aspect-ratio: 1;
margin-inline: auto;
border-radius: 50%;
overflow: hidden;
transition: box-shadow .9s ease;
}
.service-circle-img img {
display: block;
width: 100%; height: 100%;
object-fit: cover;
object-position: var(--ox, 50%) var(--oy, 50%);
transform: scale(calc(var(--zoom, 1) * 1.1));
transform-origin: var(--ox, 50%) var(--oy, 50%);
transition: transform 1.8s cubic-bezier(.22, .61, .36, 1), filter .5s ease;
}
.service-circle-title {
display: block;
max-width: 19em;
margin: 22px auto 0;
font-family: var(--serif);
font-weight: 400;
font-size: clamp(19px, 1.75vw, 25px);
line-height: 1.25;
letter-spacing: 0.01em;
text-transform: uppercase;
color: var(--graphite);
}
.service-circle-sub {
display: block;
margin-top: 4px;
font-family: var(--serif);
font-size: clamp(18px, 1.6vw, 23px);
color: var(--graphite);
}
.service-circle-pick:focus-visible .service-circle-img { outline: 2px solid var(--olive); outline-offset: 4px; }
/* Hover: a soft shadow lifts the bubble while the photo slowly zooms out */
@media (hover: hover) {
.service-circle-img:hover { box-shadow: 0 20px 44px rgba(31, 28, 23, 0.3); }
.service-circle-img:hover img { transform: scale(var(--zoom, 1)); }
}
@media (prefers-reduced-motion: reduce) {
.service-circle-img, .service-circle-img img { transition: none; }
}
/* Eight of the bubbles flip over to show a short description */
.service-flip {
display: block;
width: min(100%, 372px);
aspect-ratio: 1;
margin-inline: auto;
padding: 0; border: 0;
background: none;
border-radius: 50%;
font: inherit;
cursor: pointer;
perspective: 1400px;
}
.service-flip:focus-visible { outline: 2px solid var(--olive); outline-offset: 4px; }
.service-flip-inner {
display: block;
position: relative;
width: 100%; height: 100%;
transform-style: preserve-3d;
transition: transform .9s cubic-bezier(.4, 0, .2, 1);
}
.service-flip.is-flipped .service-flip-inner { transform: rotateY(180deg); }
.service-flip .service-circle-img,
.service-flip-back {
position: absolute; inset: 0;
width: 100%; height: 100%;
margin: 0;
border-radius: 50%;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.service-flip-back {
display: flex;
align-items: center;
justify-content: center;
padding: 13%;
container-type: inline-size;
background: #514941;
color: #fff;
text-align: center;
transform: rotateY(180deg);
visibility: hidden;
transition: visibility 0s linear .9s, box-shadow .9s ease;
}
.service-flip.is-flipped .service-flip-back { visibility: visible; transition: visibility 0s, box-shadow .9s ease; }
.service-flip-back > span {
font-family: var(--sans);
font-weight: 300;
font-size: clamp(13px, 5.6cqw, 16px);
line-height: 1.5;
}
@media (hover: hover) {
.service-flip-back:hover { box-shadow: 0 20px 44px rgba(31, 28, 23, 0.3); }
}
@media (prefers-reduced-motion: reduce) {
.service-flip-inner, .service-flip-back, .service-flip.is-flipped .service-flip-back { transition: none; }
}
/* While the timeline is open the other circles dim back */
.service-circles.has-open .service-circle:not(.is-active) .service-circle-img img { filter: brightness(0.55) saturate(0.85); }
.service-panel.timeline-section { padding: 0; scroll-margin-top: 122px; }
.service-panel .timeline-band { background: var(--parchment); margin-top: 0; }
/* Two across on tablets, one on phones, so the paragraphs stay readable */
@media (max-width: 1000px) {
.service-circles { grid-template-columns: repeat(2, 1fr); }
.service-circle:last-child { grid-column: 1 / -1; width: calc(50% - 18px); justify-self: center; }
}
@media (max-width: 620px) {
.service-circles { grid-template-columns: 1fr; }
.service-circle:last-child { width: auto; justify-self: stretch; }
.service-circle-img, .service-flip { width: min(100%, 300px); }
.service-flip .service-circle-img { width: 100%; }
.service-circle-title { font-size: 20px; margin-top: 16px; }
.service-circle-sub { font-size: 18px; }
}
.service-comingsoon { text-align: center; }
.service-comingsoon h3 {
font-family: var(--serif);
font-weight: 400;
font-size: clamp(30px, 4vw, 52px);
color: var(--cognac);
margin-bottom: 22px;
}
.service-comingsoon p {
font-size: 16px;
color: color-mix(in oklab, var(--graphite) 70%, transparent);
margin-bottom: 34px;
}
@media (max-width: 700px) {
.service-includes { columns: 1; }
}
/* ═══════════════════════════════════════════════════════════════════════
PROCESS TIMELINE (services)
═══════════════════════════════════════════════════════════════════ */
.timeline-title {
text-align: center;
font-size: clamp(32px, 3.6vw, 48px);
color: var(--cognac);
margin-bottom: clamp(36px, 5vw, 64px);
}
.timeline { position: relative; }
.timeline::before {
content: '';
position: absolute;
left: 50%; top: 50px; bottom: 0; /* starts at the first dot; .timeline-final::after finishes it */
width: 3px;
transform: translateX(-50%);
background: var(--cognac);
}
.timeline-step {
--dot-y: 50px; /* level with the step heading */
position: relative;
display: grid;
grid-template-columns: 1fr 1fr;
gap: clamp(112px, 10vw, 140px);
align-items: start;
padding-block: 30px;
}
.timeline-step .step-photo { align-self: center; }
.timeline-step::before {
content: '';
position: absolute;
top: var(--dot-y); left: 50%;
transform: translate(-50%, -50%);
width: 18px; height: 18px;
border-radius: 50%;
background: var(--cognac);
z-index: 1;
}
.timeline-step .step-num,
.timeline-final .step-num {
font-family: var(--sans);
font-size: 17px;
font-weight: 300;
color: var(--graphite);
}
/* Number sits beside its dot at the top of the step, on the same side as the text */
.timeline-step .step-num {
position: absolute;
top: var(--dot-y);
transform: translateY(-50%);
line-height: 1;
z-index: 1;
}
.timeline-step:nth-child(odd) .step-num { right: calc(50% + 22px); }
.timeline-step:nth-child(even) .step-num { left: calc(50% + 22px); }
.timeline-step:nth-child(odd) .step-text { justify-self: end; }
.timeline-step:nth-child(even) .step-text { order: 2; justify-self: start; }
.timeline-step:nth-child(even) .step-photo { order: 1; }
.step-text h3,
.timeline-final h3 {
font-family: var(--serif);
font-weight: 400;
font-size: clamp(24px, 2.4vw, 33px);
color: var(--cognac);
margin-bottom: 18px;
text-wrap: balance;
}
.step-text p {
font-size: 16px;
line-height: 1.75;
color: color-mix(in oklab, var(--graphite) 82%, transparent);
max-width: 48ch;
}
.step-text p + p { margin-top: 14px; }
.step-photo { display: flex; justify-content: center; }
.step-photo .ph {
width: min(290px, 72%);
aspect-ratio: 1;
border-radius: 50%;
}
.timeline-final {
position: relative;
text-align: center;
padding-top: 76px;
margin-top: -8px;
}
.timeline-final::before {
content: '';
position: absolute;
top: 38px; left: 50%;
transform: translateX(-50%);
width: 18px; height: 18px;
border-radius: 50%;
background: var(--cognac);
}
.timeline-final .step-num { display: block; margin-bottom: 16px; }
/* Last stretch of the line: attached to step 06 so it always stops exactly at its dot */
.timeline-final::after {
content: '';
position: absolute;
left: 50%;
top: -60px;
height: calc(60px + 38px + 9px); /* down to the dot's centre (dot top 38px, 18px tall) */
width: 3px;
transform: translateX(-50%);
background: var(--cognac);
z-index: 0;
}
.timeline-final::before { z-index: 1; }
.timeline-final > p {
font-size: 16px;
line-height: 1.75;
color: color-mix(in oklab, var(--graphite) 80%, transparent);
max-width: 52ch;
margin: 0 auto 48px;
}
.final-circles {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: clamp(28px, 4vw, 48px);
max-width: 880px;
margin-inline: auto;
}
.final-circles .ph {
aspect-ratio: 1;
border-radius: 50%;
}
/* Scroll reveal — .reveal-ready is added by JS, so content stays visible without it */
.reveal-ready .timeline-step .step-text,
.reveal-ready .timeline-step .step-photo {
opacity: 0;
transition: opacity .9s ease, transform 1s cubic-bezier(.22, .7, .25, 1);
}
.reveal-ready .timeline-step .step-text { transform: translateX(-48px); }
.reveal-ready .timeline-step .step-photo { transform: translateX(48px); transition-delay: .12s; }
.reveal-ready .timeline-step:nth-child(even) .step-text { transform: translateX(48px); }
.reveal-ready .timeline-step:nth-child(even) .step-photo { transform: translateX(-48px); }
.reveal-ready .timeline-step.in-view .step-text,
.reveal-ready .timeline-step.in-view .step-photo {
opacity: 1;
transform: none;
}
.reveal-ready.timeline-section .timeline-final {
opacity: 0;
transform: translateY(36px);
transition: opacity .9s ease, transform 1s cubic-bezier(.22, .7, .25, 1);
}
.reveal-ready.timeline-section .timeline-final.in-view {
opacity: 1;
transform: none;
}
@media (prefers-reduced-motion: reduce) {
.reveal-ready .timeline-step .step-text,
.reveal-ready .timeline-step .step-photo,
.reveal-ready.timeline-section .timeline-final {
opacity: 1 !important;
transform: none !important;
transition: none !important;
}
}
@media (max-width: 900px) {
.timeline::before,
.timeline-step::before,
.timeline-final::before,
.timeline-final::after { display: none; }
.timeline-step { grid-template-columns: 1fr; gap: 32px; padding-block: 36px; }
.timeline-step .step-num {
position: static;
transform: none;
display: block;
color: var(--cognac);
margin-bottom: 10px;
}
.timeline-step:nth-child(even) .step-text { order: 1; }
.timeline-step:nth-child(even) .step-photo { order: 2; }
.timeline-final { padding-top: 40px; }
.final-circles { grid-template-columns: 1fr; max-width: 380px; }
}
/* ═══════════════════════════════════════════════════════════════════════
FAQS (services)
═══════════════════════════════════════════════════════════════════ */
.faqs { background: var(--parchment-warm); }
.faq-title {
text-align: center;
color: var(--olive);
font-size: clamp(38px, 4.5vw, 60px);
margin-bottom: clamp(40px, 6vw, 64px);
}
.faq-list { max-width: 60rem; margin-inline: auto; }
.faq { border-bottom: 1px solid color-mix(in oklab, var(--olive) 30%, transparent); }
.faq:first-child { border-top: 1px solid color-mix(in oklab, var(--olive) 30%, transparent); }
.faq summary {
list-style: none;
cursor: pointer;
display: flex;
justify-content: space-between;
align-items: center;
gap: 24px;
font-family: var(--serif);
font-weight: 400;
font-size: clamp(24px, 2.6vw, 34px);
line-height: 1.2;
color: var(--olive);
padding: 26px 0;
transition: opacity var(--t);
}
.faq summary:hover { opacity: .75; }
.faq summary::-webkit-details-marker { display: none; }
.faq-icon {
font-family: var(--sans);
font-weight: 200;
font-size: 30px;
line-height: 1;
color: var(--olive);
flex-shrink: 0;
transition: transform .45s cubic-bezier(.4, 0, .2, 1);
}
.faq[open] .faq-icon { transform: rotate(135deg); }
.faq-answer {
padding: 2px 0 34px;
font-size: 16px;
line-height: 1.85;
color: color-mix(in oklab, var(--olive) 88%, transparent);
max-width: 68ch;
}
.faq[open] .faq-answer {
animation: faq-reveal .5s cubic-bezier(.25, .8, .25, 1) both;
}
@keyframes faq-reveal {
from { opacity: 0; transform: translateY(-12px); }
to { opacity: 1; transform: none; }
}
/* True height easing where supported (Chrome 131+); elsewhere the fade-slide above carries it */
@supports (interpolate-size: allow-keywords) {
.faqs { interpolate-size: allow-keywords; }
.faq::details-content {
block-size: 0;
overflow: clip;
transition: block-size .45s cubic-bezier(.4, 0, .2, 1), content-visibility .45s allow-discrete;
}
.faq[open]::details-content { block-size: auto; }
}
.faq-answer p + p, .faq-answer ul { margin-top: 14px; }
.faq-answer ul { list-style: none; }
.faq-answer li { font-weight: 500; }
.faq-answer li::before { content: '\2022 '; }
.faq-answer a { text-decoration: underline; text-underline-offset: 3px; }
/* ═══════════════════════════════════════════════════════════════════════
TESTIMONIALS
═══════════════════════════════════════════════════════════════════ */
.testimonials .section-head { margin-bottom: clamp(48px, 7vw, 72px); }
.testimonials .section-head .eyebrow { font-size: 13px; }
.testimonial-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 28px;
}
.testimonial {
position: relative;
background: var(--parchment);
border-radius: 16px;
padding: 56px 40px 44px;
text-align: center;
}
.testimonial q {
font-family: var(--serif);
font-style: italic;
font-weight: 300;
font-size: 18px;
line-height: 1.65;
display: block;
margin-bottom: 32px;
color: var(--graphite);
quotes: '\201C' '\201D';
text-wrap: pretty;
}
.testimonial .attr {
font-family: var(--sans);
font-size: 11px;
font-weight: 500;
letter-spacing: 0.04em;
text-transform: none;
color: var(--graphite);
}
/* ═══════════════════════════════════════════════════════════════════════
INSTAGRAM CAROUSEL
═══════════════════════════════════════════════════════════════════ */
.instagram { padding-block: clamp(48px, 7vw, 80px) clamp(40px, 6vw, 64px); }
.instagram .section-head { margin-bottom: clamp(28px, 4vw, 44px); }
.insta-handle-link {
display: inline-flex; align-items: center; gap: 12px;
font-family: var(--sans); font-size: 11px; font-weight: 500;
letter-spacing: 0.28em; text-transform: uppercase;
color: var(--graphite);
padding-bottom: 8px; margin-bottom: 20px;
border-bottom: 1px solid color-mix(in oklab, var(--graphite) 30%, transparent);
transition: opacity .2s;
}
.insta-handle-link:hover { opacity: .6; }
.insta-handle-link .arrow { transition: transform var(--t); }
.insta-handle-link:hover .arrow { transform: translateX(4px); }
.instagram-carousel {
display: grid;
grid-auto-flow: column;
grid-auto-columns: minmax(280px, calc((100vw - var(--gutter) * 2) / 5));
gap: 12px;
justify-content: start;
justify-content: safe center; /* centres the tiles while there are only a few posts */
overflow-x: auto;
scroll-snap-type: x mandatory;
scroll-behavior: smooth;
padding: 0 var(--gutter) 32px;
scrollbar-width: none;
-ms-overflow-style: none;
}
.instagram-carousel::-webkit-scrollbar { display: none; }
.insta-tile {
scroll-snap-align: start;
aspect-ratio: 1 / 1;
position: relative;
overflow: hidden;
display: block;
}
.insta-tile .ph { width: 100%; height: 100%; transition: transform 1.2s ease; }
.insta-tile:hover .ph { transform: scale(1.04); }
.insta-overlay {
position: absolute; inset: 0;
background: rgba(46, 42, 36, 0.45);
opacity: 0;
display: flex; align-items: center; justify-content: center;
transition: opacity 0.3s ease;
color: var(--parchment);
font-family: var(--sans);
font-size: 10px;
font-weight: 400;
letter-spacing: 0.32em;
text-transform: uppercase;
padding-left: 0.32em;
pointer-events: none;
}
.insta-tile:hover .insta-overlay { opacity: 1; }
.insta-handle {
text-align: center;
margin-top: 40px;
}
/* ═══════════════════════════════════════════════════════════════════════
PORTFOLIO FEATURE (home)
═══════════════════════════════════════════════════════════════════ */
.portfolio-feature {
display: grid;
grid-template-columns: 6fr 4fr 3fr;
gap: 48px;
align-items: start;
}
.portfolio-feature .ph.main {
aspect-ratio: 5 / 6;
grid-row: span 2;
}
.feature-meta {
display: flex; justify-content: space-between;
padding-bottom: 22px;
margin-bottom: 36px;
border-bottom: 1px solid color-mix(in oklab, var(--graphite) 18%, transparent);
font-family: var(--sans);
font-size: 11px; font-weight: 400;
letter-spacing: 0.18em; text-transform: uppercase;
color: color-mix(in oklab, var(--graphite) 65%, transparent);
grid-column: 2 / 4;
}
.feature-body { grid-column: 2; }
.feature-body .project-title {
font-family: var(--serif);
font-weight: 500;
font-size: 36px;
letter-spacing: 0.005em;
line-height: 1;
margin-bottom: 22px;
}
.feature-body .project-desc {
font-size: 13.5px;
line-height: 1.7;
max-width: 32ch;
color: color-mix(in oklab, var(--graphite) 78%, transparent);
margin-bottom: 32px;
}
.feature-body .project-attr {
font-family: var(--sans);
font-size: 11px;
color: color-mix(in oklab, var(--graphite) 62%, transparent);
line-height: 1.7;
}
.feature-body .project-attr strong { font-weight: 500; color: var(--graphite); }
.feature-detail { grid-column: 3; }
.feature-detail .ph {
aspect-ratio: 3 / 4;
margin-bottom: 18px;
}
.feature-detail-caption {
font-size: 11.5px;
line-height: 1.6;
color: color-mix(in oklab, var(--graphite) 70%, transparent);
text-wrap: pretty;
}
.portfolio-nav {
display: flex; justify-content: space-between; align-items: center;
margin-top: 64px;
padding-top: 28px;
border-top: 1px solid color-mix(in oklab, var(--graphite) 14%, transparent);
}
.portfolio-counter {
font-family: var(--serif);
font-weight: 400;
font-size: 16px;
}
.portfolio-counter .current {
font-size: 36px; font-weight: 500; line-height: 1;
}
.portfolio-counter .sep { margin: 0 6px; opacity: .4; }
.portfolio-counter .total { color: color-mix(in oklab, var(--graphite) 50%, transparent); }
.portfolio-controls { display: flex; gap: 14px; }
.portfolio-controls button {
width: 56px; height: 56px;
border-radius: 50%;
border: 1px solid color-mix(in oklab, var(--graphite) 32%, transparent);
display: inline-flex; align-items: center; justify-content: center;
color: var(--graphite);
transition: background var(--t), color .2s;
}
.portfolio-controls button:hover { background: var(--graphite); color: var(--parchment); }
.portfolio-controls .arrow-btn.active { background: var(--cognac); color: var(--parchment); border-color: var(--cognac); }
/* ═══════════════════════════════════════════════════════════════════════
PROJECTS GRID (projects.html — Sims Hilditch style)
═══════════════════════════════════════════════════════════════════ */
.projects-filters {
display: flex; justify-content: center; gap: 36px;
padding-block: clamp(48px, 6vw, 72px) 48px;
font-family: var(--sans);
font-size: 11px; font-weight: 400;
letter-spacing: 0.32em; text-transform: uppercase;
}
.projects-filters a {
padding: 4px 0;
position: relative;
color: color-mix(in oklab, var(--graphite) 60%, transparent);
transition: color .2s;
}
.projects-filters a:hover { color: var(--graphite); }
.projects-filters a.is-active {
color: var(--cognac);
}
.projects-filters a.is-active::after {
content: ''; position: absolute; left: 0; right: 0; bottom: -4px;
height: 1px; background: var(--cognac);
}
/* Projects — featured project */
.projects-featured { padding-block: 8px 40px; }
.featured-project {
position: relative;
display: block;
overflow: hidden;
border-radius: 4px;
isolation: isolate;
}
.featured-project .ph { aspect-ratio: 16 / 9; transition: transform 1.2s ease; }
.featured-project:hover .ph { transform: scale(1.03); }
.featured-project::after {
content: '';
position: absolute; inset: 0; z-index: 1;
background: linear-gradient(180deg, rgba(30,24,18,0.15) 0%, rgba(30,24,18,0.05) 45%, rgba(30,24,18,0.35) 100%);
}
.featured-overlay {
position: absolute; inset: 0; z-index: 2;
display: flex; flex-direction: column;
align-items: center; justify-content: center;
gap: 30px;
text-align: center;
}
.featured-title {
font-family: var(--serif);
font-weight: 400;
font-size: clamp(38px, 5.5vw, 72px);
color: var(--parchment-warm);
letter-spacing: 0.01em;
}
.featured-btn {
font-family: var(--sans);
font-size: 12px;
font-weight: 500;
letter-spacing: 0.28em;
text-transform: uppercase;
color: var(--parchment-warm);
padding: 16px 34px;
border-radius: 6px;
background: color-mix(in oklab, var(--parchment-warm) 22%, transparent);
border: 1px solid color-mix(in oklab, var(--parchment-warm) 55%, transparent);
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px);
transition: background var(--t), color var(--t);
}
.featured-project:hover .featured-btn {
background: var(--parchment-warm);
color: var(--graphite);
}
/* Projects — closing CTA */
.projects-cta {
text-align: center;
padding-block: clamp(32px, 4vw, 56px) 0;
}
.projects-cta-card {
position: relative; z-index: 2;
background: var(--parchment-warm);
max-width: 760px;
margin-inline: auto;
margin-bottom: -56px;
padding: clamp(40px, 5vw, 60px) 40px;
box-shadow: 0 28px 70px color-mix(in oklab, var(--graphite) 14%, transparent);
}
.projects-tagline.projects-tagline--overlap { padding-top: 92px; }
.projects-cta-text {
font-family: var(--serif);
font-weight: 400;
font-size: clamp(30px, 3.6vw, 48px);
line-height: 1.3;
color: var(--graphite);
max-width: 24ch;
margin: 0 auto 40px;
}
.projects-cta-text em { font-style: italic; }
/* Projects — tagline bar */
.projects-tagline {
background: var(--sage-olive);
padding: 26px 0;
text-align: center;
}
.projects-tagline { padding: 34px 0; }
.projects-tagline p {
font-family: var(--serif);
font-style: italic;
font-weight: 400;
font-size: clamp(30px, 4vw, 56px);
color: var(--parchment-warm);
}
.projects-cta-text a {
font-style: italic;
text-decoration: underline;
text-underline-offset: 5px;
text-decoration-thickness: 1px;
transition: opacity .2s;
}
.projects-cta-text a:hover { opacity: .65; }
.projects-featured--top { padding-top: calc(var(--nav-h) + 44px); }
.project-card--soon { cursor: default; }
.project-card--soon:hover .ph { transform: none; }
.project-card--soon .coming-soon {
position: absolute; inset: 0; z-index: 4;
display: flex; align-items: center; justify-content: center;
font-family: var(--serif); font-style: italic;
font-size: clamp(20px, 2vw, 26px);
letter-spacing: 0.02em;
color: var(--parchment-warm);
pointer-events: none;
}
.projects-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 4px;
}
.project-card {
display: block;
position: relative;
overflow: hidden;
}
.project-card .ph {
aspect-ratio: 3 / 4;
margin-bottom: 0;
transition: transform 1.2s ease;
}
.project-card:hover .ph { transform: scale(1.04); }
.project-card .ph-label { display: none; }
.project-card__caption {
position: absolute;
inset: auto 0 0 0;
z-index: 3;
padding: 28px 32px 32px;
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 24px;
min-height: 55%;
background: linear-gradient(180deg,
rgba(20,16,12,0) 0%,
rgba(20,16,12,0.15) 45%,
rgba(20,16,12,0.7) 100%);
pointer-events: none;
}
.project-card .project-title {
font-family: var(--serif);
font-weight: 400;
font-size: clamp(28px, 2.6vw, 38px);
line-height: 1.05;
letter-spacing: 0;
text-transform: none;
color: var(--parchment);
margin: 0;
text-wrap: balance;
}
.project-card .project-meta {
display: none;
}
.project-card__arrow {
font-family: var(--serif);
font-weight: 300;
font-size: 38px;
line-height: 1;
color: var(--parchment);
opacity: 0;
transform: translateX(-10px);
transition: opacity var(--t), transform var(--t);
flex-shrink: 0;
align-self: flex-end;
padding-bottom: 4px;
}
.project-card:hover .project-card__arrow {
opacity: 1;
transform: translateX(0);
}
/* ═══════════════════════════════════════════════════════════════════════
PROJECT DETAIL (project.html)
═══════════════════════════════════════════════════════════════════ */
.project-hero {
padding-top: calc(var(--nav-h) + 88px);
padding-bottom: 64px;
text-align: center;
}
.project-hero .eyebrow { margin-bottom: 22px; color: var(--cognac); }
.project-hero h1 { font-size: clamp(48px, 6vw, 88px); margin-bottom: 24px; }
.project-hero .project-loc {
font-family: var(--sans);
font-style: italic;
font-size: clamp(15px, 1.5vw, 18px);
color: color-mix(in oklab, var(--graphite) 70%, transparent);
font-weight: 300;
}
.project-cover .ph { aspect-ratio: 16 / 9; }
/* Cover: edge-to-edge, cropped to fit one screen below the header */
.casa-cover-img {
display: block;
width: 100%;
height: clamp(380px, calc(100svh - var(--nav-h) - 120px), 900px);
object-fit: cover;
object-position: center 55%;
}
.casa-cover-img, .casa-gallery img { cursor: zoom-in; }
/* Lightbox */
.lightbox {
position: fixed; inset: 0; z-index: 200;
display: flex; align-items: center; justify-content: center;
background: color-mix(in oklab, var(--ink) 92%, transparent);
opacity: 0; visibility: hidden;
transition: opacity .3s ease, visibility .3s ease;
}
.lightbox.is-open { opacity: 1; visibility: visible; }
.lightbox-img {
max-width: min(88vw, 1600px);
max-height: 84vh;
object-fit: contain;
box-shadow: 0 30px 80px rgba(0,0,0,.45);
user-select: none;
}
.lightbox-btn {
position: absolute;
display: flex; align-items: center; justify-content: center;
width: 52px; height: 52px;
border: 1px solid color-mix(in oklab, var(--parchment) 45%, transparent);
border-radius: 50%;
background: transparent;
color: var(--parchment-warm);
font-family: var(--serif);
font-size: 30px; line-height: 1;
cursor: pointer;
transition: background .2s ease, border-color .2s ease;
}
.lightbox-btn:hover { background: color-mix(in oklab, var(--parchment) 14%, transparent); border-color: var(--parchment-warm); }
.lightbox-prev { left: clamp(12px, 3vw, 40px); top: 50%; transform: translateY(-50%); }
.lightbox-next { right: clamp(12px, 3vw, 40px); top: 50%; transform: translateY(-50%); }
.lightbox-close { top: clamp(12px, 3vw, 32px); right: clamp(12px, 3vw, 40px); font-family: var(--sans); font-size: 26px; font-weight: 200; }
.lightbox-count {
position: absolute; bottom: clamp(14px, 3vh, 28px); left: 50%; transform: translateX(-50%);
font-family: var(--sans); font-size: 11px; letter-spacing: 0.3em;
color: color-mix(in oklab, var(--parchment) 75%, transparent);
}
@media (max-width: 640px) {
.lightbox-img { max-width: 100vw; max-height: 78vh; }
.lightbox-prev, .lightbox-next { top: auto; bottom: 18px; transform: none; width: 44px; height: 44px; }
}
/* Gallery: rows read left to right; each image's width follows its shape (--ar = width/height)
so both images in a row share one height and nothing is cropped */
.casa-gallery { display: flex; flex-direction: column; gap: 24px; }
.casa-row { display: flex; gap: 24px; }
.casa-row img {
flex: var(--ar) 1 0;
min-width: 0;
width: 100%;
height: auto;
display: block;
border-radius: 2px;
}
.casa-row--single { justify-content: center; }
.casa-row--single img { flex: 0 1 auto; width: min(100%, 560px); }
@media (max-width: 700px) {
.casa-row { flex-direction: column; }
.casa-row img, .casa-row--single img { flex: none; width: 100%; }
}
.project-details {
display: grid;
grid-template-columns: 1fr 2fr;
gap: 88px;
padding-block: clamp(80px, 12vw, 140px);
}
.project-details .col-meta dl {
display: grid;
grid-template-columns: auto 1fr;
gap: 14px 32px;
}
.project-details dt {
font-family: var(--sans);
font-size: 10px;
font-weight: 400;
letter-spacing: 0.32em;
text-transform: uppercase;
color: var(--cognac);
padding-top: 4px;
}
.project-details dd {
font-family: var(--serif);
font-size: 18px;
font-weight: 400;
}
.project-details .col-body p {
font-size: 16px;
line-height: 1.85;
margin-bottom: 24px;
color: color-mix(in oklab, var(--graphite) 85%, transparent);
max-width: 60ch;
}
.project-gallery {
display: grid;
grid-template-columns: repeat(12, 1fr);
gap: 24px;
}
.project-gallery .g1 { grid-column: span 8; aspect-ratio: 4/3; }
.project-gallery .g2 { grid-column: span 4; aspect-ratio: 3/4; }
.project-gallery .g3 { grid-column: span 4; aspect-ratio: 3/4; }
.project-gallery .g4 { grid-column: span 8; aspect-ratio: 4/3; }
.project-gallery .g5 { grid-column: span 12; aspect-ratio: 21/9; }
.project-quote {
text-align: center;
padding-block: clamp(80px, 12vw, 140px);
max-width: 60rem;
margin-inline: auto;
}
.project-quote q {
font-family: var(--serif);
font-style: italic;
font-weight: 300;
font-size: clamp(28px, 3.4vw, 44px);
line-height: 1.25;
quotes: "“" "”";
}
.project-quote .attr {
margin-top: 32px;
font-size: 10px;
letter-spacing: 0.45em;
text-transform: uppercase;
color: var(--cognac);
}
.project-nextprev {
display: flex; justify-content: space-between; align-items: center;
padding-block: 48px;
border-top: 1px solid color-mix(in oklab, var(--graphite) 14%, transparent);
border-bottom: 1px solid color-mix(in oklab, var(--graphite) 14%, transparent);
}
.project-nextprev a {
font-family: var(--sans);
font-size: 11px;
letter-spacing: 0.32em;
text-transform: uppercase;
font-weight: 500;
display: inline-flex;
align-items: center;
gap: 16px;
transition: gap var(--t);
}
.project-nextprev a:hover { gap: 26px; }
.project-nextprev .center {
font-family: var(--serif);
font-size: 14px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: color-mix(in oklab, var(--graphite) 60%, transparent);
}
/* ═══════════════════════════════════════════════════════════════════════
SERVICES (home + page)
═══════════════════════════════════════════════════════════════════ */
.services {
position: relative;
color: var(--parchment);
overflow: hidden;
isolation: isolate;
}
.services-bg { position: absolute; inset: 0; z-index: 0; }
.services-bg::before {
content: ''; position: absolute; inset: 0;
background:
radial-gradient(70% 60% at 20% 20%, rgba(243,239,232,.22) 0%, rgba(243,239,232,0) 55%),
radial-gradient(80% 70% at 100% 80%, rgba(20,16,12,.5) 0%, rgba(20,16,12,0) 55%),
linear-gradient(165deg, #5E554C 0%, #514941 50%, #3C352E 100%);
}
.services-bg::after {
content: ''; position: absolute; inset: 0;
background-image: url("data:image/svg+xml;utf8,");
opacity: .12; mix-blend-mode: overlay;
}
.services-inner {
position: relative; z-index: 2;
display: grid;
grid-template-columns: 5fr 7fr;
gap: 96px;
align-items: start;
}
.services-intro .eyebrow { color: color-mix(in oklab, var(--parchment) 70%, transparent); margin-bottom: 28px; }
.services-intro .display { font-size: clamp(48px, 5.4vw, 80px); margin-bottom: 28px; }
.services-intro .body {
color: color-mix(in oklab, var(--parchment) 80%, transparent);
max-width: 38ch;
margin-bottom: 40px;
}
.services-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 18px;
}
.service-card {
background: var(--parchment);
color: var(--graphite);
padding: 22px 24px 28px;
display: flex; flex-direction: column; gap: 14px;
}
.service-card .ph { aspect-ratio: 5 / 4; margin-bottom: 8px; }
.service-card .num {
position: absolute;
font-family: var(--sans);
font-size: 10px; font-weight: 400;
letter-spacing: 0.32em; text-transform: uppercase;
color: var(--graphite);
background: var(--parchment);
padding: 6px 12px;
transform: translate(14px, 14px);
z-index: 2;
}
.service-card .ph-wrap { position: relative; }
.service-card .title {
font-family: var(--serif);
font-weight: 500;
font-size: 22px;
letter-spacing: 0.005em;
text-transform: uppercase;
}
.service-card .desc {
font-size: 12px; line-height: 1.65;
color: color-mix(in oklab, var(--graphite) 70%, transparent);
}
.services-footer {
grid-column: 2;
margin-top: 28px;
text-align: right;
font-family: var(--sans);
font-size: 11px; font-weight: 400;
letter-spacing: 0.18em; text-transform: uppercase;
color: color-mix(in oklab, var(--parchment) 78%, transparent);
line-height: 1.6;
}
/* Services page — long-form rows */
.service-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 80px;
align-items: center;
padding-block: clamp(56px, 8vw, 96px);
border-bottom: 1px solid color-mix(in oklab, var(--graphite) 12%, transparent);
}
.service-row:last-of-type { border-bottom: none; }
.service-row.is-alt .col-image { order: 2; }
.col-image .ph { aspect-ratio: 4 / 5; }
.col-text .num {
font-family: var(--serif);
font-style: italic;
font-size: 18px;
color: var(--cognac);
margin-bottom: 12px;
}
.col-text h3 {
font-family: var(--serif);
font-weight: 500;
font-size: clamp(28px, 3.4vw, 40px);
margin-bottom: 20px;
text-transform: uppercase;
letter-spacing: 0.01em;
}
.col-text p {
font-size: 14.5px;
line-height: 1.85;
color: color-mix(in oklab, var(--graphite) 80%, transparent);
margin-bottom: 16px;
max-width: 44ch;
}
.col-text ul {
margin-top: 24px;
list-style: none;
border-top: 1px solid color-mix(in oklab, var(--graphite) 14%, transparent);
}
.col-text ul li {
display: grid;
grid-template-columns: 40px 1fr;
gap: 16px;
padding: 14px 0;
border-bottom: 1px solid color-mix(in oklab, var(--graphite) 10%, transparent);
font-size: 13px;
line-height: 1.55;
}
.col-text ul li::before {
content: counter(list-count, decimal-leading-zero);
counter-increment: list-count;
font-family: var(--serif);
font-style: italic;
font-size: 13px;
color: var(--cognac);
align-self: center;
}
.col-text ul { counter-reset: list-count; }
/* ═══════════════════════════════════════════════════════════════════════
JOURNAL (home + page)
═══════════════════════════════════════════════════════════════════ */
.journal-grid {
display: grid;
grid-template-columns: 5fr 4fr 4fr 5fr;
gap: 22px;
align-items: end;
}
.journal-card { display: flex; flex-direction: column; gap: 18px; }
.journal-card .ph { aspect-ratio: 3 / 4; }
.journal-card.feature .ph {
aspect-ratio: 4 / 5;
position: relative;
}
.journal-card.feature .feature-overlay {
position: absolute; inset: 22px;
background: rgba(243,239,232,.88);
backdrop-filter: blur(2px);
-webkit-backdrop-filter: blur(2px);
display: flex; flex-direction: column; justify-content: center; align-items: center;
padding: 32px;
text-align: center;
}
.journal-card.feature .title {
font-family: var(--serif);
font-weight: 500;
font-size: 26px;
letter-spacing: 0.005em;
text-transform: uppercase;
margin-bottom: 18px;
line-height: 1.05;
}
.journal-card.feature .feature-body-text {
font-size: 12.5px;
line-height: 1.65;
color: color-mix(in oklab, var(--graphite) 75%, transparent);
max-width: 28ch;
margin-bottom: 32px;
}
.journal-card .card-title {
font-family: var(--serif);
font-weight: 500;
font-size: 22px;
letter-spacing: 0.005em;
text-transform: uppercase;
line-height: 1.1;
}
.journal-card.aside { transform: translateY(-48px); }
/* Journal page — index list */
.journal-list {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 64px;
}
.journal-list .journal-card .ph { aspect-ratio: 4 / 3; }
.journal-list .journal-card .meta {
font-family: var(--sans);
font-size: 11px;
letter-spacing: 0.32em;
text-transform: uppercase;
color: var(--cognac);
margin-bottom: 8px;
}
.journal-list .journal-card .excerpt {
font-size: 13.5px;
color: color-mix(in oklab, var(--graphite) 70%, transparent);
margin-top: 12px;
max-width: 44ch;
line-height: 1.7;
}
/* ═══════════════════════════════════════════════════════════════════════
CONTACT
═══════════════════════════════════════════════════════════════════ */
.contact-grid {
display: grid;
grid-template-columns: 5fr 7fr;
gap: 96px;
align-items: start;
}
.contact-intro .eyebrow { margin-bottom: 22px; color: var(--cognac); }
.contact-intro h1 { font-size: clamp(48px, 6vw, 80px); margin-bottom: 28px; }
.contact-intro .lede { margin-bottom: 48px; max-width: 36ch; }
.contact-detail {
margin-bottom: 24px;
}
.contact-detail .label {
font-family: var(--sans);
font-size: 10px;
font-weight: 400;
letter-spacing: 0.42em;
text-transform: uppercase;
color: var(--cognac);
display: block;
margin-bottom: 6px;
}
.contact-detail p, .contact-detail a {
font-family: var(--serif);
font-style: italic;
font-weight: 400;
font-size: 18px;
line-height: 1.6;
}
.contact-intro--lg .contact-detail { margin-bottom: 30px; }
.contact-intro--lg .contact-detail .label { font-size: 11px; margin-bottom: 10px; }
.contact-intro--lg .contact-detail p,
.contact-intro--lg .contact-detail a { font-size: 23px; line-height: 1.55; }
.contact-form {
display: flex; flex-direction: column; gap: 28px;
padding: 56px;
background: var(--parchment-warm);
border: 1px solid color-mix(in oklab, var(--graphite) 10%, transparent);
}
.form-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 28px;
}
.form-field { display: flex; flex-direction: column; gap: 8px; }
.form-field label {
font-family: var(--sans);
font-size: 10px;
font-weight: 400;
letter-spacing: 0.32em;
text-transform: uppercase;
color: var(--cognac);
}
.form-field input,
.form-field select,
.form-field textarea {
font-family: var(--sans);
font-size: 14px;
font-weight: 300;
background: transparent;
border: none;
border-bottom: 1px solid color-mix(in oklab, var(--graphite) 30%, transparent);
padding: 8px 0;
outline: none;
width: 100%;
appearance: none;
-webkit-appearance: none;
border-radius: 0;
color: var(--graphite);
transition: border-color var(--t);
}
.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus { border-bottom-color: var(--cognac); }
.form-field textarea { resize: vertical; min-height: 110px; }
.form-field select {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%238B5D3C' stroke-width='1.2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 4px center;
padding-right: 24px;
color: color-mix(in oklab, var(--graphite) 50%, transparent);
}
.form-field select.has-value { color: var(--graphite); }
.form-submit { margin-top: 12px; }
/* Contact — banner + centred form */
.contact-section { padding-top: 0; }
.contact-narrow { max-width: 680px; }
.contact-form-head { text-align: center; margin-bottom: 12px; }
.contact-form-head h2 {
font-family: var(--serif);
font-weight: 400;
font-size: clamp(30px, 3.4vw, 42px);
color: var(--olive);
margin-bottom: 14px;
}
.contact-form-intro {
font-family: var(--sans);
font-weight: 300;
font-size: 16px;
line-height: 1.7;
color: color-mix(in oklab, var(--graphite) 72%, transparent);
max-width: 42ch;
margin: 0 auto;
}
.contact-form--card {
position: relative;
z-index: 3;
gap: 24px;
margin-top: -120px;
box-shadow: 0 24px 64px color-mix(in oklab, var(--graphite) 18%, transparent);
}
.contact-form--card .form-submit {
margin-top: 8px;
text-align: center;
}
@media (max-width: 640px) {
.contact-form--card { margin-top: -72px; }
}
.contact-details-row {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 40px 64px;
margin-top: 72px;
padding-top: 56px;
border-top: 1px solid color-mix(in oklab, var(--graphite) 12%, transparent);
text-align: center;
}
.contact-details-row { display: grid; grid-template-columns: repeat(2, 1fr); gap: 48px 56px; align-items: start; }
@media (max-width: 560px) { .contact-details-row { grid-template-columns: 1fr; gap: 36px; } }
.contact-details-row .contact-detail { margin-bottom: 0; }
.contact-details-row .contact-detail .label { font-size: 11px; margin-bottom: 10px; }
.contact-details-row .contact-detail p,
.contact-details-row .contact-detail a { font-size: 21px; line-height: 1.55; }
/* ═══════════════════════════════════════════════════════════════════════
FOOTER
═══════════════════════════════════════════════════════════════════ */
.site-footer {
background: #E0DBCE; /* matches the header as it appears on screen */
color: var(--graphite);
border-top: 1px solid var(--parchment-deep);
}
.footer-grid {
display: grid;
grid-template-columns: auto 1fr auto;
gap: clamp(32px, 4vw, 56px);
padding-block: 28px;
align-items: center;
}
.footer-brand {
border-right: 1px solid var(--graphite);
padding: 20px clamp(32px, 4vw, 64px) 20px 0;
align-self: stretch;
display: flex; align-items: center;
}
.footer-brand img { height: 108px; width: auto; }
.footer-col ul { list-style: none; display: flex; flex-direction: column; gap: 8px; }
.footer-col li, .footer-contact-link {
font-family: var(--sans);
font-weight: 300;
font-size: 17px;
letter-spacing: 0.04em;
text-transform: uppercase;
line-height: 1.35;
}
.footer-col a { color: var(--graphite); transition: opacity .2s; }
.footer-col a:hover { opacity: .6; }
.footer-contact { display: flex; align-items: center; gap: clamp(24px, 4vw, 56px); }
.footer-instagram { display: block; }
.footer-instagram svg { display: block; }
.footer-bottom {
background: var(--taupe);
color: var(--parchment-warm);
padding: 16px 0;
font-family: var(--sans);
font-size: 13px;
font-weight: 400;
letter-spacing: 0.04em;
text-transform: uppercase;
}
.footer-bottom .container {
display: grid;
grid-template-columns: 1fr auto 1fr;
align-items: center;
gap: 24px;
}
.footer-bottom a { color: inherit; transition: opacity .2s; }
.footer-bottom a:hover { opacity: .7; }
/* ═══════════════════════════════════════════════════════════════════════
RESPONSIVE
═══════════════════════════════════════════════════════════════════ */
@media (max-width: 1024px) {
.about-grid,
.services-inner,
.contact-grid { grid-template-columns: 1fr; gap: 48px; }
.portfolio-feature { grid-template-columns: 1fr 1fr; }
.portfolio-feature .ph.main { grid-column: 1 / -1; grid-row: auto; }
.feature-meta { grid-column: 1 / -1; }
.feature-body { grid-column: 1; }
.feature-detail { grid-column: 2; }
.service-row { grid-template-columns: 1fr; gap: 32px; }
.service-row.is-alt .col-image { order: 0; }
.journal-grid { grid-template-columns: 1fr 1fr; gap: 32px; }
.journal-card.aside { transform: none; }
.journal-list { grid-template-columns: 1fr; }
.three-services { grid-template-columns: 1fr; gap: 56px; }
.testimonial-grid { grid-template-columns: 1fr; gap: 56px; }
.instagram-carousel { grid-auto-columns: minmax(240px, 60vw); }
.hero-headline .l2 { padding-left: 12%; }
.hero-headline .l3 { padding-left: 4%; }
}
@media (max-width: 860px) {
.projects-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 720px) {
.nav-row { grid-template-columns: auto auto; }
.nav-links {
display: none;
position: fixed;
inset: 0;
flex-direction: column;
justify-content: center;
align-items: center;
background: var(--parchment);
color: var(--graphite);
z-index: 100;
gap: 32px;
font-size: 14px;
}
.nav-links.is-open { display: flex; }
.nav-cta { display: none; }
.nav-toggle { display: flex; z-index: 110; }
.nav.scrolled .nav-toggle span,
.nav.on-light .nav-toggle span { background: var(--graphite); }
.hero-bottom { grid-template-columns: 1fr; gap: 32px; }
.hero-tagline, .hero-actions, .hero-meta { grid-column: 1; text-align: left; }
.portfolio-feature { grid-template-columns: 1fr; }
.feature-detail { grid-column: 1; }
.services-grid { grid-template-columns: 1fr; }
.journal-grid { grid-template-columns: 1fr; }
.projects-grid { grid-template-columns: 1fr; gap: 4px; }
.project-details { grid-template-columns: 1fr; gap: 40px; }
.project-gallery { grid-template-columns: 1fr; }
.project-gallery > * { grid-column: 1 !important; aspect-ratio: 4/3 !important; }
.footer-grid { grid-template-columns: 1fr; gap: 28px; padding-block: 36px; justify-items: center; text-align: center; }
.footer-brand { border-right: none; padding: 0; }
.footer-bottom .container { grid-template-columns: 1fr; justify-items: center; gap: 8px; text-align: center; }
.form-row { grid-template-columns: 1fr; gap: 20px; }
.contact-form { padding: 32px; }
}
/* ═══════════════════════════════════════════════════════════════════════
LAUNCH ADDITIONS — hero CTA, 404, map, breadcrumbs, mobile CTA bar
═══════════════════════════════════════════════════════════════════ */
[hidden] { display: none !important; }
/* Homepage hero: discreet enquiry link under the logo */
.hero-logo { flex-direction: column; gap: 40px; }
.hero-cta {
pointer-events: auto;
font-family: var(--sans); font-size: 11px; font-weight: 400;
letter-spacing: 0.32em; text-transform: uppercase;
color: var(--parchment-warm);
padding: 15px 30px 15px calc(30px + 0.32em);
border: 1px solid color-mix(in oklab, var(--parchment-warm) 60%, transparent);
animation: hero-logo-in 1.5s .5s ease-out both;
transition: background .3s ease, color .3s ease, border-color .3s ease;
}
.hero-cta:hover { background: var(--parchment-warm); color: var(--graphite); border-color: var(--parchment-warm); }
body.scrolled .hero-cta { pointer-events: none; }
/* 404 page */
.notfound .about-hero-inner .eyebrow { color: var(--graphite); opacity: .7; margin-bottom: 20px; }
.notfound-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; margin-top: 40px; }
.btn--ghost-dark { background: transparent; color: var(--graphite); border-color: var(--graphite); }
.btn--ghost-dark:hover { background: var(--graphite); color: var(--parchment-warm); border-color: var(--graphite); }
/* Contact map */
.contact-map { margin-top: clamp(48px, 6vw, 72px); text-align: center; }
.contact-map iframe {
display: block; width: 100%; height: clamp(280px, 38vw, 420px); border: 0;
filter: grayscale(.85) sepia(.15) contrast(.95);
}
.contact-map-link {
display: inline-block; margin-top: 18px;
font-family: var(--sans); font-size: 11px; font-weight: 500;
letter-spacing: 0.32em; text-transform: uppercase; color: var(--olive);
}
.contact-map-link:hover { color: var(--olive-deep); }
/* Project breadcrumbs */
.breadcrumbs { margin-bottom: 28px; }
.breadcrumbs ol {
list-style: none; margin: 0; padding: 0;
display: flex; flex-wrap: wrap; justify-content: center; gap: 0;
font-family: var(--sans); font-size: 10.5px; font-weight: 400;
letter-spacing: 0.24em; text-transform: uppercase;
color: color-mix(in oklab, var(--graphite) 60%, transparent);
}
.breadcrumbs li + li::before { content: '›'; margin: 0 12px; letter-spacing: 0; }
.breadcrumbs a { color: inherit; transition: color .2s ease; }
.breadcrumbs a:hover { color: var(--graphite); }
.breadcrumbs [aria-current] { color: var(--graphite); }
/* Sticky enquiry bar on phones */
.mobile-cta { display: none; }
@media (max-width: 720px) {
.mobile-cta {
display: grid; grid-template-columns: 1fr 1fr;
position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
padding-bottom: env(safe-area-inset-bottom);
background: var(--graphite);
box-shadow: 0 -6px 20px rgba(31,28,23,.18);
}
.mobile-cta a {
display: flex; align-items: center; justify-content: center;
min-height: 54px;
font-family: var(--sans); font-size: 11px; font-weight: 500;
letter-spacing: 0.28em; text-transform: uppercase;
color: var(--parchment-warm);
}
.mobile-cta a:first-child { background: var(--olive); }
body { padding-bottom: calc(54px + env(safe-area-inset-bottom)); }
}
/* ═══════════════════════════════════════════════════════════════════════
MOBILE POLISH
═══════════════════════════════════════════════════════════════════ */
.about-card .display em { white-space: nowrap; } /* keep "family-run" on one line */
@media (max-width: 720px) {
.nav-toggle { justify-self: end; }
.nav-links .nav-links-contact { display: block; }
/* flat colour banners: less empty colour on phones */
.about-hero--flat { min-height: 0; }
.about-hero--flat .about-hero-inner { padding-block: 64px; }
.about-hero-inner .display { white-space: normal; font-size: clamp(28px, 8vw, 40px); }
}
@media (max-width: 820px) {
/* About story: card text was tucking under the photo and squeezed by the desktop indent */
.story-grid--overlay .story-text {
margin-left: clamp(16px, 5vw, 48px);
padding: calc(56px + 32px) 28px 36px;
}
}
@media (max-width: 560px) {
.project-nextprev { flex-direction: column; gap: 22px; text-align: center; }
.project-nextprev .center { order: -1; }
}
/* Phone menu: the header's backdrop blur traps the fixed full-screen menu inside the header,
so drop the blur on phones and use a near-solid header instead */
@media (max-width: 720px) {
.nav.on-light, .nav.scrolled {
-webkit-backdrop-filter: none; backdrop-filter: none;
background: rgba(227, 222, 210, 0.97);
}
.nav-links { padding-bottom: 54px; } /* keep links clear of the bottom enquiry bar */
}
@media (max-width: 720px) {
.nav-toggle.is-open span { background: var(--graphite); }
}
/* ═══════════════════════════════════════════════════════════════════════
FORM, MAP CONSENT, LEGAL PAGES
═══════════════════════════════════════════════════════════════════ */
.footer-legal { justify-self: end; display: flex; gap: 20px; }
@media (max-width: 720px) { .footer-legal { justify-self: center; flex-wrap: wrap; justify-content: center; gap: 6px 18px; } }
.form-honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.form-consent {
display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: start;
font-family: var(--sans); font-size: 13px; line-height: 1.6;
color: color-mix(in oklab, var(--graphite) 75%, transparent);
margin-top: 4px;
}
.form-consent input { margin-top: 4px; accent-color: var(--olive); width: 15px; height: 15px; }
.form-consent a, .form-status a { color: var(--olive); text-decoration: underline; text-underline-offset: 2px; }
.form-status { font-family: var(--sans); font-size: 14px; line-height: 1.6; text-align: center; color: var(--olive-deep); margin: 0; }
.form-status:empty { display: none; }
.contact-map-load {
display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px;
width: 100%; height: clamp(220px, 30vw, 320px);
background:
repeating-linear-gradient(35deg, transparent 0 46px, color-mix(in oklab, var(--graphite) 6%, transparent) 46px 47px),
repeating-linear-gradient(-55deg, transparent 0 70px, color-mix(in oklab, var(--graphite) 6%, transparent) 70px 71px),
var(--parchment-warm);
border: 1px solid var(--parchment-deep);
cursor: pointer; font: inherit; color: var(--graphite);
}
.contact-map-load-label {
font-family: var(--sans); font-size: 11px; font-weight: 500; letter-spacing: .32em; text-transform: uppercase;
padding: 14px 28px 14px calc(28px + .32em); border: 1px solid var(--graphite); transition: background .3s, color .3s;
}
.contact-map-load:hover .contact-map-load-label { background: var(--graphite); color: var(--parchment-warm); }
.contact-map-load-note { font-family: var(--sans); font-size: 12px; color: color-mix(in oklab, var(--graphite) 60%, transparent); }
.contact-map-load-note a { color: inherit; text-decoration: underline; }
.notfound .about-hero-inner p a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.legal-page { padding-top: calc(122px + clamp(48px, 6vw, 80px)); }
.legal-narrow { max-width: 46rem; }
.legal-title { font-family: var(--serif); font-weight: 400; font-size: clamp(36px, 5vw, 56px); line-height: 1.1; margin: 16px 0 8px; color: var(--graphite); }
.legal-updated { font-family: var(--sans); font-size: 13px; color: color-mix(in oklab, var(--graphite) 55%, transparent); margin-bottom: 32px; }
.legal-page h2 { font-family: var(--serif); font-weight: 500; font-size: clamp(22px, 2.4vw, 28px); margin: 44px 0 14px; color: var(--graphite); }
.legal-page p, .legal-page li { font-family: var(--sans); font-size: 16px; line-height: 1.8; color: color-mix(in oklab, var(--graphite) 85%, transparent); }
.legal-page p { margin-bottom: 16px; }
.legal-page ul { padding-left: 1.2em; margin-bottom: 16px; }
.legal-page a { color: var(--olive); text-decoration: underline; text-underline-offset: 2px; }
.legal-draft { background: #F4E6C8; border-left: 3px solid var(--olive); padding: 14px 18px; font-size: 14px !important; }
mark.todo { background: #F4E6C8; color: var(--olive-deep); padding: 1px 4px; border-radius: 2px; }