/* =====================================================================
   LENCI DESIGN — main.css
   Direction A "Quiet Gallery": warm paper whites, ink type, a hint of
   aged brass; Cormorant Garamond (display) + Jost (text).
   Mobile-first. All motion is disabled under prefers-reduced-motion.
   ===================================================================== */

/* ---------- Self-hosted fonts (Fontsource 5.3.0, SIL OFL 1.1 — see /assets/fonts/OFL-*.txt) ----------
   latin + latin-ext subsets; the browser downloads latin-ext only when such characters appear.
   No Google Fonts request (GDPR) — fonts are served from our own domain. */
@font-face { font-family: "Cormorant Garamond"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("/assets/fonts/cormorant-garamond-latin-ext-400-normal.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; }
@font-face { font-family: "Cormorant Garamond"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("/assets/fonts/cormorant-garamond-latin-400-normal.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; }
@font-face { font-family: "Cormorant Garamond"; font-style: normal; font-weight: 500; font-display: swap;
  src: url("/assets/fonts/cormorant-garamond-latin-ext-500-normal.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; }
@font-face { font-family: "Cormorant Garamond"; font-style: normal; font-weight: 500; font-display: swap;
  src: url("/assets/fonts/cormorant-garamond-latin-500-normal.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; }
@font-face { font-family: "Cormorant Garamond"; font-style: italic; font-weight: 400; font-display: swap;
  src: url("/assets/fonts/cormorant-garamond-latin-ext-400-italic.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; }
@font-face { font-family: "Cormorant Garamond"; font-style: italic; font-weight: 400; font-display: swap;
  src: url("/assets/fonts/cormorant-garamond-latin-400-italic.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; }
@font-face { font-family: "Jost"; font-style: normal; font-weight: 300; font-display: swap;
  src: url("/assets/fonts/jost-latin-ext-300-normal.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; }
@font-face { font-family: "Jost"; font-style: normal; font-weight: 300; font-display: swap;
  src: url("/assets/fonts/jost-latin-300-normal.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; }
@font-face { font-family: "Jost"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("/assets/fonts/jost-latin-ext-400-normal.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; }
@font-face { font-family: "Jost"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("/assets/fonts/jost-latin-400-normal.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; }
@font-face { font-family: "Jost"; font-style: normal; font-weight: 500; font-display: swap;
  src: url("/assets/fonts/jost-latin-ext-500-normal.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; }
@font-face { font-family: "Jost"; font-style: normal; font-weight: 500; font-display: swap;
  src: url("/assets/fonts/jost-latin-500-normal.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; }
/* metric-adjusted local fallbacks reduce layout shift while web fonts load */
@font-face { font-family: "Cormorant Fallback"; src: local("Georgia"), local("Times New Roman"); size-adjust: 86%; ascent-override: 100%; descent-override: 31%; line-gap-override: 0%; }
@font-face { font-family: "Jost Fallback"; src: local("Arial"), local("Helvetica"); size-adjust: 97%; ascent-override: 106%; descent-override: 37%; line-gap-override: 0%; }

/* ---------- Tokens ---------- */
:root {
  --paper: #faf8f4;      /* page background */
  --linen: #f1ece4;      /* alternate sections */
  --stone: #ddd5c9;      /* hairlines */
  --ink: #1b1a18;        /* text, logo */
  --graphite: #57534c;   /* secondary text (7.4:1 on paper) */
  --brass: #7d6136;      /* accent text/links (5.7:1 on paper) */
  --brass-soft: #b39466; /* decorative only */
  --night: #1d1c1a;      /* footer */

  --font-display: "Cormorant Garamond", "Cormorant Fallback", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --font-text: "Jost", "Jost Fallback", "Avenir Next", "Segoe UI", system-ui, sans-serif;

  --step--1: clamp(0.78rem, 0.76rem + 0.1vw, 0.84rem);
  --step-0: clamp(1rem, 0.97rem + 0.15vw, 1.0625rem);
  --step-1: clamp(1.2rem, 1.1rem + 0.45vw, 1.45rem);
  --step-2: clamp(1.6rem, 1.35rem + 1.1vw, 2.3rem);
  --step-3: clamp(2.1rem, 1.6rem + 2.2vw, 3.4rem);
  --step-4: clamp(2.6rem, 1.8rem + 3.6vw, 5rem);

  --space-s: clamp(1rem, 0.9rem + 0.5vw, 1.5rem);
  --space-m: clamp(1.75rem, 1.4rem + 1.5vw, 3rem);
  --space-l: clamp(3.5rem, 2.6rem + 4vw, 7.5rem);
  --space-xl: clamp(5rem, 3.5rem + 6vw, 10rem);

  --gutter: clamp(1.25rem, 0.8rem + 2vw, 3rem);
  --max: 82rem;
  --narrow: 50rem;
  --ease: cubic-bezier(.2, .7, .2, 1);
  --header-h: 4.5rem;
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: var(--header-h); }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 400 var(--step-0)/1.7 var(--font-text);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, picture, svg { display: block; max-width: 100%; }
img { height: auto; }
h1, h2, h3 { font-family: var(--font-display); font-weight: 500; line-height: 1.12; margin: 0; letter-spacing: -0.005em; }
p { margin: 0 0 1em; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
address { font-style: normal; }
ul[role="list"], ol[role="list"] { list-style: none; margin: 0; padding: 0; }
:focus-visible { outline: 2px solid var(--brass); outline-offset: 3px; }
::selection { background: var(--brass-soft); color: #fff; }
main:focus { outline: none; }

.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: 1rem; top: -4rem; z-index: 100;
  background: var(--ink); color: var(--paper); padding: .6rem 1rem; text-decoration: none;
}
.skip-link:focus { top: 1rem; }

.container { width: min(100% - 2 * var(--gutter), var(--max)); margin-inline: auto; }
.container--narrow { width: min(100% - 2 * var(--gutter), var(--narrow)); }
.muted { color: var(--graphite); }

/* Small tracked caps — echoes the wordmark's letter spacing */
.label {
  font-family: var(--font-text); font-size: var(--step--1); font-weight: 500;
  letter-spacing: 0.24em; text-transform: uppercase; color: var(--brass);
  margin: 0 0 1.25rem;
}
.lead { font-size: var(--step-1); font-weight: 300; line-height: 1.6; color: var(--ink); }
.section-title { font-size: var(--step-3); }
.prose p { color: var(--graphite); }
.signature { font-family: var(--font-display); font-style: italic; font-size: var(--step-1); color: var(--ink) !important; }

/* ---------- Buttons & links ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .6em;
  min-height: 3rem; padding: .85rem 1.9rem;
  background: var(--ink); color: var(--paper);
  font: 500 var(--step--1)/1 var(--font-text); letter-spacing: 0.2em; text-transform: uppercase;
  text-decoration: none; border: 1px solid var(--ink);
  transition: background-color .35s var(--ease), color .35s var(--ease);
}
.btn:hover { background: transparent; color: var(--ink); }
.link-arrow {
  display: inline-flex; align-items: center; gap: .7em;
  font: 500 var(--step--1)/1 var(--font-text); letter-spacing: 0.2em; text-transform: uppercase;
  text-decoration: none; color: var(--ink); padding-block: .6rem;
}
.link-arrow::after {
  content: ""; width: 2.25rem; height: 1px; background: currentColor;
  transition: width .4s var(--ease);
}
.link-arrow:hover::after { width: 3.25rem; }

/* ---------- Header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  border-bottom: 1px solid transparent;
  transition: border-color .3s var(--ease), box-shadow .3s var(--ease);
}
/* Blur lives on a pseudo-element: backdrop-filter on the header itself would become the
   containing block for the fixed mobile menu and trap it inside the header bar. */
.site-header::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: color-mix(in srgb, var(--paper) 92%, transparent);
  -webkit-backdrop-filter: saturate(1.2) blur(10px); backdrop-filter: saturate(1.2) blur(10px);
}
.site-header.is-scrolled { border-bottom-color: var(--stone); }
.site-header__inner {
  width: min(100% - 2 * var(--gutter), var(--max)); margin-inline: auto;
  min-height: var(--header-h); display: flex; align-items: center; justify-content: space-between; gap: 1.5rem;
}
.site-header__logo { display: block; flex-shrink: 0; width: clamp(10.5rem, 6rem + 14vw, 15rem); }
.site-header__logo img { width: 100%; }

.nav-toggle {
  position: relative; z-index: 60; width: 2.75rem; height: 2.75rem; margin-right: -.6rem;
  background: none; border: 0; cursor: pointer; color: var(--ink);
}
.nav-toggle__bars, .nav-toggle__bars::before {
  position: absolute; left: .6rem; right: .6rem; height: 1px; background: currentColor;
  transition: transform .35s var(--ease), top .35s var(--ease);
}
.nav-toggle__bars { top: 50%; transform: translateY(-4px); }
.nav-toggle__bars::before { content: ""; left: 0; right: 0; top: 8px; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars { transform: translateY(0) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::before { top: 0; transform: rotate(-90deg); }

.site-nav {
  position: fixed; inset: 0; z-index: 55;
  display: flex; flex-direction: column; justify-content: center; gap: 2.5rem;
  padding: var(--header-h) var(--gutter) 3rem;
  background: var(--paper);
  visibility: hidden; opacity: 0; pointer-events: none;
  transition: opacity .35s var(--ease), visibility 0s linear .35s;
}
.site-nav.is-open { visibility: visible; opacity: 1; pointer-events: auto; transition: opacity .35s var(--ease); }
.site-nav ul { display: grid; gap: .4rem; }
.site-nav a { text-decoration: none; }
.site-nav li a { font-family: var(--font-display); font-size: var(--step-3); line-height: 1.25; }
.site-nav a[aria-current="page"] { color: var(--brass); }
.site-nav__phone { font-size: var(--step-0); letter-spacing: .08em; color: var(--graphite); }
html:not(.js) .site-nav { position: static; visibility: visible; opacity: 1; padding: 0 0 1rem; }
html:not(.js) .nav-toggle { display: none; }
body.nav-open { overflow: hidden; }

@media (min-width: 60rem) {
  .nav-toggle { display: none; }
  .site-nav {
    position: static; inset: auto; padding: 0; background: none;
    visibility: visible; opacity: 1; pointer-events: auto; flex-direction: row; align-items: center; gap: 2.5rem;
  }
  .site-nav ul { display: flex; gap: 2rem; }
  .site-nav li a {
    position: relative; font: 500 var(--step--1)/1 var(--font-text); letter-spacing: .2em; text-transform: uppercase;
    padding-block: .6rem;
  }
  .site-nav li a::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: currentColor;
    transform: scaleX(0); transform-origin: left; transition: transform .4s var(--ease);
  }
  .site-nav li a:hover::after, .site-nav li a[aria-current="page"]::after { transform: scaleX(1); }
  .site-nav a[aria-current="page"] { color: var(--ink); }
  .site-nav__phone { display: none; font-size: var(--step--1); padding-left: 2rem; border-left: 1px solid var(--stone); white-space: nowrap; }
}
@media (min-width: 76rem) {
  .site-nav__phone { display: inline; }
}

/* ---------- Hero ---------- */
.hero { padding-top: var(--space-l); }
.hero__intro { display: grid; gap: var(--space-s); padding-bottom: var(--space-m); }
.hero__title { font-size: var(--step-4); font-weight: 400; max-width: 14ch; }
.hero__aside .lead { max-width: 34rem; }
.hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 2rem; margin-top: 1.5rem; }
.hero__media { overflow: hidden; }
.hero__img img { width: 100%; height: clamp(22rem, 62vw, 50rem); object-fit: cover; }
@media (min-width: 60rem) {
  .hero__intro { grid-template-columns: 1.25fr 1fr; align-items: end; column-gap: var(--space-l); }
  .hero__intro > .label { grid-column: 1 / -1; }
  .hero__aside { padding-bottom: .6rem; }
}

/* Original home sentence used as H1: longer, so a calmer size */
.hero__title--statement { font-size: var(--step-3); line-height: 1.22; max-width: 26ch; }
.hero__help { font-size: var(--step-1); font-weight: 300; line-height: 1.6; margin: 0; }
.hero__help a { text-decoration: none; border-bottom: 1px solid var(--stone); }
.hero__help a:hover { border-color: var(--ink); }

/* ---------- Statement ---------- */
.statement { padding-block: var(--space-xl) var(--space-l); text-align: center; }
.statement__text {
  font-family: var(--font-display); font-style: italic; font-weight: 400;
  font-size: var(--step-2); line-height: 1.35; margin: 0 auto; max-width: 30ch;
}
.statement__text::before {
  content: ""; display: block; width: 1px; height: 4rem; margin: 0 auto 2.5rem; background: var(--brass-soft);
}

/* ---------- Section heads ---------- */
.section-head { display: grid; gap: .25rem; margin-bottom: var(--space-m); }
.section-head .label { margin-bottom: .5rem; }
.section-head .link-arrow { justify-self: start; margin-top: .75rem; }
.section-head--center { text-align: center; justify-items: center; }
@media (min-width: 60rem) {
  .section-head:not(.section-head--center) { grid-template-columns: 1fr auto; align-items: end; }
  .section-head:not(.section-head--center) .label { grid-column: 1 / -1; }
  .section-head:not(.section-head--center) .link-arrow { margin: 0; }
}

/* ---------- Selected work mosaic ---------- */
.work { padding-bottom: var(--space-xl); }
.work__grid { display: grid; gap: var(--space-s); }
.work__item { margin: 0; overflow: hidden; background: var(--linen); }
.work__img img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.work__item:hover .work__img img { transform: scale(1.035); }
.work__item--1 .work__img img, .work__item--3 .work__img img, .work__item--4 .work__img img { aspect-ratio: 4 / 5; }
.work__item--2 .work__img img, .work__item--5 .work__img img { aspect-ratio: 3 / 2; }
@media (min-width: 40rem) {
  .work__grid { grid-template-columns: repeat(2, 1fr); }
  .work__item--2, .work__item--5 { grid-column: 1 / -1; }
}
@media (min-width: 60rem) {
  .work__grid { grid-template-columns: repeat(12, 1fr); align-items: start; }
  .work__item--1 { grid-column: 1 / span 7; }
  .work__item--2 { grid-column: 8 / span 5; margin-top: var(--space-l); }
  .work__item--2 .work__img img { aspect-ratio: 4 / 5; }
  .work__item--3 { grid-column: 2 / span 4; }
  .work__item--4 { grid-column: 6 / span 4; margin-top: var(--space-m); }
  .work__item--5 { grid-column: 10 / span 3; margin-top: calc(var(--space-l) * 1.2); }
  .work__item--5 .work__img img { aspect-ratio: 3 / 4; }
}

/* ---------- About teaser ---------- */
.about-teaser { background: var(--linen); padding-block: var(--space-xl); }
.about-teaser__grid { display: grid; gap: var(--space-m); align-items: center; }
.about-teaser__media { margin: 0; overflow: hidden; }
.about-teaser__img img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.about-teaser__text .section-title { margin-bottom: var(--space-s); }
.about-teaser__text .prose { max-width: 34rem; }
@media (min-width: 60rem) {
  .about-teaser__grid { grid-template-columns: 5fr 6fr; gap: var(--space-l); }
}

/* ---------- Services ---------- */
.services { padding-block: var(--space-xl); }
.services__list { display: grid; border-top: 1px solid var(--stone); }
.services__list li {
  display: flex; align-items: baseline; gap: 1.5rem; padding-block: 1.5rem;
  border-bottom: 1px solid var(--stone);
}
.services__num { font-size: var(--step--1); letter-spacing: .2em; color: var(--brass); min-width: 2rem; }
.services__list h3 { font-size: var(--step-2); font-weight: 400; }
@media (min-width: 60rem) {
  .services__list { grid-template-columns: repeat(4, 1fr); border-top: 0; }
  .services__list li {
    flex-direction: column; gap: 1.25rem; padding: 2rem 1.75rem 2.5rem; border-bottom: 0;
    border-left: 1px solid var(--stone);
  }
  .services__list li:last-child { border-right: 1px solid var(--stone); }
}

/* ---------- Testimonials ---------- */
.testimonials { padding-block: var(--space-l) var(--space-xl); border-top: 1px solid var(--stone); }
.quote { margin: 0; }
.quote p { margin: 0; }
.quote footer { margin-top: 1.25rem; }
.quote__author { font-style: normal; font-size: var(--step--1); letter-spacing: .2em; text-transform: uppercase; }
.quote__detail { display: block; margin-top: .35rem; color: var(--graphite); letter-spacing: .08em; text-transform: none; font-size: var(--step--1); }
.quote--featured { text-align: center; margin-bottom: var(--space-l); }
.quote--featured p {
  font-family: var(--font-display); font-weight: 400; font-size: var(--step-2); line-height: 1.35;
}
.quote--featured p::before { content: "“"; }
.quote--featured p:last-child::after { content: "”"; }
.quotes { display: grid; gap: var(--space-m); }
.quotes .quote { padding-top: 1.5rem; border-top: 1px solid var(--stone); }
.quotes .quote p { font-family: var(--font-display); font-size: var(--step-1); line-height: 1.45; }
@media (min-width: 48rem) {
  .quotes { grid-template-columns: repeat(2, 1fr); column-gap: var(--space-m); }
}

/* ---------- Visit / CTA ---------- */
.visit { background: var(--linen); }
.visit__grid { display: grid; }
.visit__media { margin: 0; overflow: hidden; min-height: 20rem; }
.visit__img, .visit__img img { width: 100%; height: 100%; }
.visit__img img { min-height: 20rem; object-fit: cover; }
.visit__text { padding: var(--space-l) var(--gutter); display: grid; align-content: center; justify-items: start; gap: 1.25rem; }
.visit__text .section-title { max-width: 14ch; }
.visit__text address, .visit__contact { font-size: var(--step-1); font-weight: 300; line-height: 1.6; margin: 0; }
.visit__contact a { text-decoration: none; border-bottom: 1px solid var(--stone); }
.visit__contact a:hover { border-color: var(--ink); }
@media (min-width: 60rem) {
  .visit__grid { grid-template-columns: 1fr 1fr; min-height: 38rem; }
  .visit__text { padding-inline: var(--space-l); }
}

/* ---------- 404 ---------- */
.notfound { padding-block: var(--space-l) var(--space-xl); }
.notfound__grid { display: grid; gap: var(--space-m); align-items: center; }
.notfound__media { margin: 0; overflow: hidden; }
.notfound__img img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; max-height: 34rem; }
.notfound__contact { margin-top: var(--space-m); }
.notfound__contact a { white-space: nowrap; }
@media (min-width: 60rem) { .notfound__grid { grid-template-columns: 7fr 4fr; gap: var(--space-l); } }

/* ---------- Stub / 404 ---------- */
.stub { padding-block: var(--space-xl); min-height: 60vh; }
.stub .section-title { margin-bottom: var(--space-s); }

/* ---------- Footer ---------- */
.site-footer { background: var(--night); color: #d9d4cb; padding-top: var(--space-l); font-size: var(--step--1); }
.site-footer a { color: #fff; text-decoration: none; }
.site-footer a:hover { text-decoration: underline; }
.site-footer .label { color: #c9b089; }
.site-footer .muted { color: #a8a298; }
.site-footer__grid { display: grid; gap: var(--space-m); padding-bottom: var(--space-l); line-height: 1.9; }
.site-footer__brand img { width: 13rem; margin-bottom: 1.25rem; }
.site-footer__tag { color: #a8a298; letter-spacing: .04em; }
.site-footer__nav a { letter-spacing: .04em; display: inline-block; padding-block: .3rem; min-height: 24px; }
.site-footer__nav li + li { margin-top: .15rem; }
.site-footer p a { display: inline-block; padding-block: .2rem; }
.site-footer__nav a[aria-current="page"] { color: #c9b089; }
.social { display: flex; gap: 1rem; margin-top: 1.25rem; }
.social a { display: grid; place-items: center; width: 2.5rem; height: 2.5rem; border: 1px solid #45423d; border-radius: 50%; transition: border-color .3s var(--ease); }
.social a:hover { border-color: #c9b089; }
.social svg { fill: currentColor; }
.site-footer__base { border-top: 1px solid #36332f; padding-block: 1.5rem; color: #a8a298; }
.site-footer__base p { margin: 0; }
@media (min-width: 48rem) { .site-footer__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 60rem) { .site-footer__grid { grid-template-columns: 1.6fr 1fr 1.2fr 1fr; } }

/* ---------- Inner page hero ---------- */
.page-hero { padding-block: var(--space-l) var(--space-m); }
.page-hero--center { text-align: center; }
.page-title { font-size: var(--step-4); font-weight: 400; }
.prose--lead p { font-size: var(--step-1); font-weight: 300; line-height: 1.65; color: var(--ink); }

/* ---------- CTA band ---------- */
.cta-band { background: var(--linen); padding-block: var(--space-l); text-align: center; }
.cta-band__inner { display: grid; justify-items: center; gap: .5rem; }
.cta-band .hero__actions { justify-content: center; }

/* ---------- About ---------- */
.about { padding-bottom: var(--space-xl); }
.about__grid { display: grid; gap: var(--space-m); align-items: center; }
.about__media { margin: 0; overflow: hidden; }
.about__img img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.about__text .prose { max-width: 36rem; }
.about-studio { padding-bottom: var(--space-xl); }
.about-studio__grid { display: grid; gap: var(--space-s); }
.about-studio__media { margin: 0; overflow: hidden; }
.about-studio__img img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
@media (min-width: 60rem) {
  .about__grid { grid-template-columns: 1fr 1fr; gap: var(--space-l); }
  .about-studio__grid { grid-template-columns: 7fr 4fr; align-items: end; }
  .about-studio__media--small .about-studio__img img { aspect-ratio: 4 / 5; }
}

/* ---------- Portfolio gallery (masonry via CSS columns) ---------- */
.portfolio { padding-bottom: var(--space-xl); }
.gallery { columns: 1; column-gap: var(--space-s); }
.gallery__item { break-inside: avoid; margin-bottom: var(--space-s); }
.gallery__item[hidden] { display: none; }
.gallery__link { display: block; position: relative; overflow: hidden; background: var(--linen); cursor: zoom-in; }
.gallery__img img { width: 100%; transition: transform 1.2s var(--ease); }
.gallery__link::after {
  content: ""; position: absolute; inset: 0; background: rgba(27, 26, 24, 0);
  transition: background-color .6s var(--ease);
}
.gallery__link:hover .gallery__img img, .gallery__link:focus-visible .gallery__img img { transform: scale(1.035); }
.gallery__link:hover::after { background: rgba(27, 26, 24, .08); }
@media (min-width: 40rem) { .gallery { columns: 2; } }
@media (min-width: 68rem) { .gallery { columns: 3; } }

.filter { display: flex; flex-wrap: wrap; gap: .5rem 1.75rem; margin-top: var(--space-s); }
.filter__btn {
  background: none; border: 0; padding: .5rem 0; cursor: pointer; color: var(--graphite);
  font: 500 var(--step--1)/1 var(--font-text); letter-spacing: .2em; text-transform: uppercase;
  border-bottom: 1px solid transparent;
}
.filter__btn[aria-pressed="true"] { color: var(--ink); border-bottom-color: currentColor; }

.projects { margin-top: var(--space-xl); }
.projects .section-title { margin-bottom: var(--space-m); }
.projects__list { display: grid; gap: var(--space-l); }
.project { display: grid; gap: var(--space-s); align-items: center; }
.project[hidden] { display: none; }
.project__img img { width: 100%; }
@media (min-width: 60rem) {
  .project { grid-template-columns: 7fr 5fr; gap: var(--space-l); }
  .project:nth-child(even) > a { order: 2; }
}

/* ---------- Lightbox (native <dialog>) ---------- */
.lightbox {
  width: 100vw; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0;
  background: rgba(20, 19, 17, .96); color: #f3efe8;
}
.lightbox::backdrop { background: rgba(20, 19, 17, .96); }
.lightbox[open] { display: grid; place-items: center; }
.lightbox__figure { margin: 0; display: grid; justify-items: center; gap: 1rem; padding: 4.5rem 1rem 1.5rem; }
.lightbox__img { max-width: min(92vw, 1600px); max-height: calc(100dvh - 9rem); width: auto; height: auto; object-fit: contain; }
.lightbox__caption { font-size: var(--step--1); letter-spacing: .2em; color: #b7b0a5; }
.lightbox__btn {
  position: absolute; display: grid; place-items: center; width: 3rem; height: 3rem;
  background: none; border: 1px solid rgba(255,255,255,.18); border-radius: 50%; color: inherit; cursor: pointer;
  transition: border-color .3s var(--ease), background-color .3s var(--ease);
}
.lightbox__btn:hover { border-color: #c9b089; background: rgba(255,255,255,.04); }
.lightbox__btn:focus-visible { outline-color: #c9b089; }
.lightbox__btn--close { top: 1rem; right: 1rem; }
.lightbox__btn--prev { left: 1rem; top: 50%; transform: translateY(-50%); }
.lightbox__btn--next { right: 1rem; top: 50%; transform: translateY(-50%); }
@media (max-width: 40rem) {
  .lightbox__btn--prev, .lightbox__btn--next { top: auto; bottom: 1rem; transform: none; }
}
body.lightbox-open { overflow: hidden; }

/* ---------- Testimonials page ---------- */
.testimonials-page { padding-bottom: var(--space-xl); }
.quotes--page { grid-template-columns: 1fr !important; gap: var(--space-l); }
.quote--page { padding-top: var(--space-m); border-top: 1px solid var(--stone); text-align: center; }
.quote--page p { font-family: var(--font-display); font-size: var(--step-2); line-height: 1.4; }
.quote--page p:first-child::before { content: "\201C"; }
.quote--page p:last-of-type::after { content: "\201D"; }

/* ---------- Contact ---------- */
.contact { padding-bottom: var(--space-xl); }
.contact__grid { display: grid; gap: var(--space-l); }
.contact__list { display: grid; gap: .35rem; margin: var(--space-m) 0 0; }
.contact__list dt { margin: 1.25rem 0 .25rem; }
.contact__list dd { margin: 0; font-size: var(--step-1); font-weight: 300; line-height: 1.6; }
.contact__list a:not(.link-arrow) { text-decoration: none; border-bottom: 1px solid var(--stone); }
.contact__list a:not(.link-arrow):hover { border-color: var(--ink); }
@media (min-width: 60rem) { .contact__grid { grid-template-columns: 5fr 7fr; } }

.form { display: grid; gap: 1.5rem; background: var(--linen); padding: clamp(1.5rem, 1rem + 2.5vw, 3.5rem); }
.form__row--2 { display: grid; gap: 1.5rem; }
@media (min-width: 40rem) { .form__row--2 { grid-template-columns: 1fr 1fr; } }
.field { display: grid; gap: .5rem; }
.field label { font-size: var(--step--1); font-weight: 500; letter-spacing: .16em; text-transform: uppercase; }
.field input, .field textarea {
  width: 100%; font: 400 var(--step-0)/1.5 var(--font-text); color: var(--ink);
  background: var(--paper); border: 1px solid #b9b0a2; border-radius: 0; padding: .85rem 1rem;
  transition: border-color .25s var(--ease);
}
.field textarea { resize: vertical; min-height: 9rem; }
.field input:focus, .field textarea:focus { outline: none; border-color: var(--ink); box-shadow: 0 0 0 1px var(--ink); }
.field [aria-invalid="true"] { border-color: #9b2c1f; }
.field__error { margin: 0; font-size: var(--step--1); color: #9b2c1f; }
.field__error:empty { display: none; }
.form__hp { position: absolute !important; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.form__captcha { min-height: 65px; }
.form__note { margin: 0; font-size: var(--step--1); }
.form__submit { justify-self: start; }
.form__submit[disabled] { opacity: .6; cursor: progress; }
.form__status:empty { display: none; }
.form__status { padding: 1rem 1.25rem; border-left: 2px solid var(--brass); background: var(--paper); }
.form__status.is-error { border-left-color: #9b2c1f; color: #7a2318; }
.form__status:focus { outline: none; }

.contact-image figure { margin: 0; overflow: hidden; }
.contact-image__img img { width: 100%; height: clamp(16rem, 40vw, 34rem); object-fit: cover; }

/* ---------- Multilingual: long words, language switcher ---------- */
h1, h2, h3, .lead, .statement__text { text-wrap: balance; overflow-wrap: break-word; }
h1, h2, h3 { -webkit-hyphens: auto; hyphens: auto; }
:lang(en) h1, :lang(en) h2, :lang(en) h3 { -webkit-hyphens: manual; hyphens: manual; }
.btn { white-space: normal; text-align: center; line-height: 1.35; max-width: 100%; }
.link-arrow { text-align: left; line-height: 1.35; }

.site-nav__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 1.25rem 2rem; }
.lang-switch { display: flex; align-items: center; gap: 0; margin: 0; padding: 0; list-style: none; }
.lang-switch li + li::before { content: "·"; color: var(--stone); padding-inline: .35rem; }
.lang-switch a {
  display: inline-block; min-width: 24px; min-height: 24px; padding: .3rem .1rem;
  font: 500 var(--step--1)/1 var(--font-text); letter-spacing: .16em;
  text-decoration: none; color: var(--graphite);
}
.lang-switch abbr { text-decoration: none; cursor: inherit; }
.lang-switch a:hover { color: var(--ink); }
.lang-switch a[aria-current="true"] { color: var(--ink); text-decoration: underline; text-underline-offset: .35em; text-decoration-thickness: 1px; }
/* inside the nav: undo the generic .site-nav ul / li a rules */
.site-nav .lang-switch { display: flex; gap: 0; }
.site-nav .lang-switch a {
  font: 500 var(--step-0)/1 var(--font-text); letter-spacing: .16em; text-transform: none;
  padding: .45rem .15rem; position: static;
}
.site-nav .lang-switch a::after { display: none; }

.site-footer__base { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 1rem; }
.site-footer .lang-switch a { color: #a8a298; }
.site-footer .lang-switch a:hover, .site-footer .lang-switch a[aria-current="true"] { color: #fff; }
.site-footer .lang-switch li + li::before { color: #45423d; }

@media (min-width: 60rem) {
  .site-nav__meta { flex-wrap: nowrap; gap: 1.75rem; }
  .site-nav .lang-switch a { font-size: var(--step--1); }
  .site-nav__list { gap: clamp(1rem, 0.2rem + 1.4vw, 2rem) !important; }
  .site-nav__list a { white-space: nowrap; }
}
/* narrow desktop (960–1120px): longer DE/FR labels need a bit more room */
@media (min-width: 60rem) and (max-width: 69.99rem) {
  .site-header__logo { width: 12.5rem; }
  .site-nav li a { letter-spacing: .13em; }
  .site-nav { gap: 1.5rem; }
  .site-nav__meta { gap: 1.25rem; }
}

/* preview-mode form message */
.form__status.is-preview { border-left-color: var(--brass); background: var(--paper); color: var(--ink); }

/* ---------- Reveal on scroll (JS adds .is-visible) ---------- */
.js .reveal { opacity: 0; transform: translateY(24px); transition: opacity .9s var(--ease), transform .9s var(--ease); }
.js .reveal.is-visible { opacity: 1; transform: none; }
.js .reveal--image { transform: none; clip-path: inset(6% 0 0 0); transition: opacity 1s var(--ease), clip-path 1.3s var(--ease); }
.js .reveal--image.is-visible { clip-path: inset(0 0 0 0); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .js .reveal, .js .reveal--image { opacity: 1 !important; transform: none !important; clip-path: none !important; }
}