/* JM Design — website styles. Tokens mirror the JM Design system (tokens.json). */

@font-face {
  font-family: "Tenor Sans";
  src: url("../fonts/TenorSans-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Jost";
  src: url("../fonts/Jost-Variable.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* ---------- Tokens ---------- */
:root {
  --limestone: #f4efe7;
  --calacatta: #fbf9f5;
  --travertine-soft: #eae0d1;
  --travertine: #d9c7ae;
  --hairline: #ddd4c7;
  --nero: #1e1b18;
  --stone-grey: #6b6259;
  --brass: #7a5c30;
  --on-brass: #fbf9f5;
  --verde: #2f3d35;
  --on-verde: #f4efe7;
  --link: var(--brass);
  --shadow-lift: 0 12px 32px -12px #1e1b1829;
  --focus-ring: 0 0 0 2px #f4efe7, 0 0 0 4px #7a5c30;

  --font-display: "Tenor Sans", "Optima", "Gill Sans", sans-serif;
  --font-sans: "Jost", "Futura", "Century Gothic", system-ui, sans-serif;

  --space-xs: 4px;
  --space-s: 8px;
  --space-m: 16px;
  --space-l: 24px;
  --space-xl: 40px;
  --space-2xl: 64px;
  --space-3xl: 104px;

  --radius-none: 0px;
  --radius-s: 2px;
  --radius-arch: 9999px;

  --gutter: 16px;
  --max: 1320px;
  --header-h: 76px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);

  color-scheme: light;
}

@media (min-width: 768px) { :root { --gutter: 40px; } }
@media (min-width: 1200px) { :root { --gutter: 64px; } }

/* ---------- Page transitions (cross-document View Transitions) ---------- */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: 220ms var(--ease-in-out) both vt-out; }
::view-transition-new(root) { animation: 420ms var(--ease) both vt-in; }
::view-transition-group(project-hero) { animation-duration: 650ms; animation-timing-function: var(--ease-in-out); }
.site-header { view-transition-name: site-header; }
@keyframes vt-out { to { opacity: 0; } }
@keyframes vt-in { from { opacity: 0; transform: translateY(12px); } }

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 12px); -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--limestone);
  color: var(--nero);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 26px;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  transition: background-color 400ms var(--ease), color 400ms var(--ease);
}
img, svg { display: block; max-width: 100%; }
a { color: var(--link); text-underline-offset: 4px; text-decoration-thickness: 1px; }
a:hover { color: var(--nero); }
:focus-visible { outline: none; box-shadow: var(--focus-ring); }
::selection { background: var(--travertine); color: var(--nero); }
p { margin: 0; }
ul.plain, ol.plain { list-style: none; margin: 0; padding: 0; }

.wrap { width: 100%; max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); }

.skip {
  position: absolute; left: var(--space-m); top: -100px; z-index: 200;
  background: var(--calacatta); color: var(--nero); padding: var(--space-s) var(--space-m);
}
.skip:focus { top: var(--space-m); }

/* ---------- Type styles ---------- */
.display-xl, .display, .heading, .quote, .label {
  font-family: var(--font-display); font-weight: 400; margin: 0;
}
.display-xl { font-size: 44px; line-height: 50px; letter-spacing: 0.02em; text-wrap: balance; }
.display    { font-size: 32px; line-height: 40px; letter-spacing: 0.02em; text-wrap: balance; }
.heading    { font-size: 24px; line-height: 32px; letter-spacing: 0.03em; }
.quote      { font-size: 20px; line-height: 32px; letter-spacing: 0.02em; }
.label      { font-size: 11px; line-height: 16px; letter-spacing: 0.4em; text-transform: uppercase; }
@media (min-width: 768px) {
  .display-xl { font-size: 56px; line-height: 64px; }
  .display    { font-size: 40px; line-height: 48px; }
}
@media (min-width: 1200px) { .display-xl--hero { font-size: 80px; line-height: 88px; } }
.body-sm { font-size: 14px; line-height: 22px; }
.caption { font-size: 12px; line-height: 18px; letter-spacing: 0.02em; color: var(--stone-grey); }
.muted { color: var(--stone-grey); }
.measure { max-width: 34em; }
.stack > * + * { margin-top: var(--space-l); }

.overline { display: block; color: var(--stone-grey); margin-bottom: var(--space-m); }
.overline--brass { color: var(--brass); }

/* ---------- Buttons & links ---------- */
.btn {
  position: relative; overflow: hidden; isolation: isolate;
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-s);
  min-height: 48px; padding: 0 var(--space-l);
  font-family: var(--font-display); font-size: 11px; line-height: 16px; letter-spacing: 0.32em; text-transform: uppercase;
  text-decoration: none; border-radius: var(--radius-none); cursor: pointer;
  border: 1px solid var(--nero); background: transparent; color: var(--nero);
  transition: color 450ms var(--ease);
}
/* Fill wipes up from the bottom on hover */
.btn::before {
  content: ""; position: absolute; inset: 0; z-index: -1; background: var(--nero);
  transform: scaleY(0); transform-origin: bottom; transition: transform 450ms var(--ease);
}
.btn:hover { color: var(--limestone); }
.btn:hover::before { transform: scaleY(1); }
.btn--solid { background: var(--nero); color: var(--limestone); }
.btn--solid::before { background: var(--limestone); }
.btn--solid:hover { color: var(--nero); }
.btn--on-verde { border-color: var(--on-verde); color: var(--on-verde); }
.btn--on-verde::before { background: var(--on-verde); }
.btn--on-verde:hover { color: var(--verde); }

.text-link {
  font-family: var(--font-display); font-size: 11px; line-height: 16px; letter-spacing: 0.32em; text-transform: uppercase;
  color: var(--nero); text-decoration: none; display: inline-flex; align-items: center; gap: var(--space-m);
  min-height: 44px;
}
.text-link .line { display: block; width: 32px; height: 1px; background: currentColor; transition: width 450ms var(--ease); }
.text-link:hover { color: var(--nero); }
.text-link:hover .line { width: 64px; }
.text-link--on-verde { color: var(--on-verde); }
.text-link--on-verde:hover { color: var(--on-verde); }

/* ---------- Header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: var(--limestone);
  border-bottom: 1px solid transparent;
  transition: border-color 300ms var(--ease), transform 450ms var(--ease), background-color 400ms var(--ease);
}
.site-header.is-scrolled { border-bottom-color: var(--hairline); }
.site-header.is-hidden { transform: translateY(-100%); }
.site-header .wrap { display: flex; align-items: center; justify-content: space-between; min-height: var(--header-h); gap: var(--space-l); }
.brand { display: block; flex-shrink: 0; }
/* Header: the monogram alone on small phones (the lockup's 160px minimum), the horizontal lockup above. */
.site-header .brand img { height: 28px; width: auto; }
.brand .brand-full { display: none; }
@media (min-width: 420px) {
  .brand .brand-mono { display: none; }
  .brand .brand-full { display: block; height: 44px; }
}
@media (min-width: 1024px) { .brand .brand-full { height: 50px !important; } }

.nav { display: none; }
.nav ul { display: flex; gap: var(--space-xl); }
.nav a {
  position: relative; color: var(--nero); text-decoration: none; display: inline-flex; align-items: center; min-height: 44px;
  font-family: var(--font-display); font-size: 11px; letter-spacing: 0.4em; text-transform: uppercase;
}
.nav a::after {
  content: ""; position: absolute; left: 0; right: 0.4em; bottom: 10px; height: 1px; background: var(--nero);
  transform: scaleX(0); transform-origin: right; transition: transform 450ms var(--ease);
}
.nav a:hover::after, .nav a[aria-current="page"]::after { transform: scaleX(1); transform-origin: left; }
.header-tools { display: flex; align-items: center; gap: var(--space-s); }
.header-cta { display: none; }
@media (min-width: 1024px) {
  .nav { display: block; }
  .header-cta { display: inline-flex; margin-left: var(--space-s); }
}

.menu-btn {
  display: inline-flex; align-items: center; gap: var(--space-s);
  min-height: 44px; min-width: 44px; padding: 0 var(--space-s);
  background: none; border: 0; color: var(--nero); cursor: pointer;
  font-family: var(--font-display); font-size: 11px; letter-spacing: 0.4em; text-transform: uppercase;
}
.menu-btn .bars { width: 22px; height: 9px; position: relative; }
.menu-btn .bars::before, .menu-btn .bars::after {
  content: ""; position: absolute; left: 0; right: 0; height: 1px; background: currentColor;
  transition: transform 400ms var(--ease), top 400ms var(--ease);
}
.menu-btn .bars::before { top: 0; }
.menu-btn .bars::after { top: 8px; }
.menu-btn[aria-expanded="true"] .bars::before { top: 4px; transform: rotate(45deg); }
.menu-btn[aria-expanded="true"] .bars::after { top: 4px; transform: rotate(-45deg); }
@media (min-width: 1024px) { .menu-btn { display: none; } }

.mobile-menu {
  position: fixed; inset: var(--header-h) 0 0 0; z-index: 49;
  background: var(--limestone);
  padding: var(--space-xl) var(--gutter);
  display: flex; flex-direction: column; justify-content: space-between;
  clip-path: inset(0 0 100% 0); visibility: hidden;
  transition: clip-path 600ms var(--ease-in-out), visibility 0s linear 600ms;
}
.mobile-menu.is-open { clip-path: inset(0 0 0 0); visibility: visible; transition-delay: 0s; }
.mobile-menu li { border-top: 1px solid var(--hairline); overflow: hidden; }
.mobile-menu li:last-child { border-bottom: 1px solid var(--hairline); }
.mobile-menu a.big {
  display: flex; justify-content: space-between; align-items: center; min-height: 68px;
  font-family: var(--font-display); font-size: 28px; letter-spacing: 0.03em; color: var(--nero); text-decoration: none;
  transform: translateY(100%); transition: transform 600ms var(--ease);
}
.mobile-menu.is-open a.big { transform: none; }
.mobile-menu li:nth-child(2) a.big { transition-delay: 60ms; }
.mobile-menu li:nth-child(3) a.big { transition-delay: 120ms; }
.mobile-menu li:nth-child(4) a.big { transition-delay: 180ms; }
.mobile-menu li:nth-child(5) a.big { transition-delay: 240ms; }
.mobile-menu a.big small { font-family: var(--font-sans); font-size: 12px; color: var(--stone-grey); letter-spacing: 0.02em; }
.mobile-menu a[aria-current="page"] { color: var(--brass); }
@media (min-width: 1024px) { .mobile-menu { display: none; } }

/* ---------- Intro: the monogram draws itself (home, once per visit) ---------- */
.intro-curtain {
  position: fixed; inset: 0; z-index: 300; background: var(--limestone);
  display: grid; place-items: center;
  transition: clip-path 900ms var(--ease-in-out);
  clip-path: inset(0 0 0 0);
}
.intro-curtain svg { width: 72px; height: auto; overflow: visible; }
.intro-curtain path { fill: none; stroke: var(--nero); stroke-width: 2.4; stroke-dasharray: 1; stroke-dashoffset: 1; animation: draw 1300ms var(--ease-in-out) forwards; }
.intro-curtain path + path { animation-delay: 250ms; }
.intro-curtain .tagline { position: absolute; bottom: 18%; left: 0; right: 0; text-align: center; color: var(--stone-grey); opacity: 0; animation: fade-in 700ms var(--ease) 900ms forwards; }
.intro-curtain.is-leaving { clip-path: inset(0 0 100% 0); }
@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes fade-in { to { opacity: 1; } }

/* ---------- Media placeholders (swap for photography) ---------- */
.media {
  position: relative; margin: 0; overflow: hidden;
  background: var(--travertine-soft);
  border-radius: var(--radius-none);
}
.media > .inner { position: absolute; inset: 0; }
.media[data-parallax] > .inner { inset: -8% 0; }
.media img { width: 100%; height: 100%; object-fit: cover; }
.media--tone-2 { background: var(--travertine); }
.media--tone-3 { background: var(--calacatta); box-shadow: inset 0 0 0 1px var(--hairline); }
.media--tone-4 { background: var(--hairline); }
.media .ph { position: absolute; inset: 0; display: flex; align-items: flex-end; padding: var(--space-m); }
.media[data-parallax] .ph { padding-bottom: calc(var(--space-m) + 8%); }
.media .ph .caption { color: var(--nero); opacity: 0.75; }
.ratio-hero { aspect-ratio: 4 / 5; }
.ratio-wide { aspect-ratio: 16 / 10; }
.ratio-tall { aspect-ratio: 4 / 5; }
.ratio-square { aspect-ratio: 1 / 1; }
.ratio-pano { aspect-ratio: 16 / 9; }
@media (min-width: 768px) { .ratio-hero { aspect-ratio: 21 / 9; } .ratio-pano { aspect-ratio: 21 / 9; } }
.arch { border-top-left-radius: var(--radius-arch); border-top-right-radius: var(--radius-arch); }

/* ---------- Sections ---------- */
.section { padding: var(--space-2xl) 0; }
@media (min-width: 1024px) { .section { padding: calc(var(--space-2xl) + var(--space-xl)) 0; } }
.section--tight-top { padding-top: 0; }
.rule { height: 1px; background: var(--hairline); border: 0; margin: 0; }
.section-head { display: grid; gap: var(--space-m); margin-bottom: var(--space-xl); }
@media (min-width: 1024px) {
  .section-head { grid-template-columns: 5fr 7fr; align-items: end; gap: var(--space-xl); margin-bottom: var(--space-2xl); }
}
.section-head--split { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: var(--space-l); }

/* Page header (inner pages) */
.page-head { padding: var(--space-2xl) 0 var(--space-xl); }
@media (min-width: 1024px) { .page-head { padding: var(--space-3xl) 0 var(--space-2xl); } }
.page-head-grid { display: grid; gap: var(--space-l); }
@media (min-width: 1024px) { .page-head-grid { grid-template-columns: 7fr 5fr; align-items: end; gap: var(--space-2xl); } }
.crumbs { display: flex; gap: var(--space-s); align-items: center; margin-bottom: var(--space-l); }
.crumbs a { color: var(--stone-grey); text-decoration: none; }
.crumbs a:hover { color: var(--nero); }

/* Home hero */
.hero { padding: var(--space-2xl) 0 var(--space-xl); }
@media (min-width: 1024px) { .hero { padding: var(--space-3xl) 0 var(--space-2xl); } }
.hero-grid { display: grid; gap: var(--space-l); }
@media (min-width: 1024px) { .hero-grid { grid-template-columns: 7fr 5fr; align-items: end; gap: var(--space-2xl); } }
.hero-actions { display: flex; flex-wrap: wrap; gap: var(--space-m); margin-top: var(--space-l); }
.hero-figure { margin-top: var(--space-xl); }
@media (min-width: 1024px) { .hero-figure { margin-top: var(--space-2xl); } }
.hero-meta { display: flex; justify-content: space-between; gap: var(--space-m); padding-top: var(--space-m); }

/* Marquee of materials */
.marquee { overflow: hidden; border-top: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline); padding: var(--space-l) 0; }
.marquee-track { display: flex; width: max-content; animation: marquee 60s linear infinite; }
.marquee:hover .marquee-track { animation-play-state: paused; }
.marquee-track span { font-family: var(--font-display); font-size: 28px; line-height: 40px; letter-spacing: 0.04em; color: var(--stone-grey); white-space: nowrap; padding-right: var(--space-xl); }
.marquee-track span::after { content: "·"; padding-left: var(--space-xl); color: var(--hairline); }
@media (min-width: 768px) { .marquee-track span { font-size: 40px; line-height: 56px; } }
@keyframes marquee { to { transform: translateX(-50%); } }

/* Intro */
.intro { display: grid; gap: var(--space-xl); }
@media (min-width: 1024px) { .intro { grid-template-columns: 4fr 8fr; gap: var(--space-2xl); } }
.facts { display: grid; grid-template-columns: 1fr; margin-top: var(--space-xl); }
.facts > div { border-top: 1px solid var(--hairline); padding: var(--space-m) 0; display: grid; gap: var(--space-xs); }
@media (min-width: 640px) { .facts { grid-template-columns: repeat(3, 1fr); gap: var(--space-l); } }

/* Projects grid */
.filters { display: flex; flex-wrap: wrap; gap: var(--space-s); }
.chip {
  min-height: 44px; padding: 0 var(--space-m);
  background: transparent; color: var(--nero); cursor: pointer;
  border: 1px solid var(--stone-grey); border-radius: var(--radius-s);
  font-family: var(--font-display); font-size: 11px; letter-spacing: 0.32em; text-transform: uppercase;
  transition: background-color 250ms var(--ease), color 250ms var(--ease), border-color 250ms var(--ease);
}
.chip:hover { background: var(--travertine-soft); }
.chip[aria-pressed="true"] { background: var(--nero); color: var(--limestone); border-color: var(--nero); }
.chip .count { font-family: var(--font-sans); letter-spacing: 0.02em; opacity: 0.7; margin-left: var(--space-xs); }

.projects { display: grid; gap: var(--space-xl) var(--space-l); grid-template-columns: 1fr; }
@media (min-width: 768px) {
  .projects { grid-template-columns: repeat(12, 1fr); }
  .project { grid-column: span 6; }
  .projects--stagger .project:nth-child(4n+1) { grid-column: 1 / span 7; }
  .projects--stagger .project:nth-child(4n+2) { grid-column: 8 / span 5; margin-top: var(--space-3xl); }
  .projects--stagger .project:nth-child(4n+3) { grid-column: 1 / span 5; }
  .projects--stagger .project:nth-child(4n+4) { grid-column: 6 / span 7; margin-top: var(--space-2xl); }
  .projects--three .project { grid-column: span 4; }
  .projects--three .project:nth-child(2) { margin-top: var(--space-2xl); }
  .projects--three .media { aspect-ratio: 4 / 5; }
}
.project[hidden] { display: none; }
.project.is-filtering { animation: filter-in 600ms var(--ease) both; }
@keyframes filter-in { from { opacity: 0; transform: translateY(16px); } }
.project a { color: inherit; text-decoration: none; display: block; }
.project .media > .inner { transition: transform 1100ms var(--ease); }
.project a:hover .media > .inner { transform: scale(1.04); }
.project-info { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-m); padding-top: var(--space-m); }
.project-info .heading { font-size: 20px; line-height: 28px; background: linear-gradient(var(--nero), var(--nero)) left bottom / 0 1px no-repeat; transition: background-size 500ms var(--ease); }
.project a:hover .project-info .heading { background-size: 100% 1px; }
.project .caption { margin-top: var(--space-xs); }
.filter-status { min-height: 18px; margin-top: var(--space-m); }

/* Custom cursor label over projects (fine pointers only) */
.cursor-label {
  position: fixed; left: 0; top: 0; z-index: 120; pointer-events: none;
  padding: var(--space-s) var(--space-m); background: var(--nero); color: var(--limestone);
  font-family: var(--font-display); font-size: 11px; letter-spacing: 0.32em; text-transform: uppercase;
  opacity: 0; transform: translate3d(-50%, -50%, 0) scale(0.6);
  transition: opacity 250ms var(--ease), transform 250ms var(--ease);
}
.cursor-label.is-on { opacity: 1; }

/* Materials */
.materials { background: var(--calacatta); }
.swatches { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-l) var(--space-m); }
@media (min-width: 640px) { .swatches { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1024px) { .swatches { grid-template-columns: repeat(6, 1fr); } }
.swatch-block { aspect-ratio: 3 / 4; box-shadow: inset 0 0 0 1px var(--hairline); transition: transform 700ms var(--ease); }
.swatch:hover .swatch-block { transform: translateY(-8px); }
.swatch .heading { font-size: 18px; line-height: 26px; margin-top: var(--space-m); }
.swatch .caption { margin-top: var(--space-xs); }
/* Swatches are the material's own colour. */
.sw-calacatta  { background: #f3efe8; }
.sw-nero       { background: #1e1b18; }
.sw-travertine { background: #d9c7ae; }
.sw-verde      { background: #2f3d35; }
.sw-oak        { background: #a8845a; }
.sw-brass      { background: #7a5c30; }

/* Services list */
.services { display: grid; grid-template-columns: 1fr; }
@media (min-width: 768px) { .services { grid-template-columns: 1fr 1fr; column-gap: var(--space-2xl); } }
.service { padding: var(--space-l) 0 var(--space-xl); display: grid; grid-template-columns: 56px 1fr; gap: var(--space-m); position: relative; }
.service .num { color: var(--stone-grey); padding-top: 8px; }
.service .heading { margin-bottom: var(--space-s); }
.service ul { margin: var(--space-m) 0 0; padding: 0; list-style: none; }
.service li { font-size: 14px; line-height: 22px; color: var(--stone-grey); padding: var(--space-xs) 0; }
.service li::before { content: "—"; margin-right: var(--space-s); color: var(--hairline); }

/* Service rows (services page) */
.service-row { display: grid; gap: var(--space-xl); align-items: center; padding: var(--space-2xl) 0; }
@media (min-width: 1024px) {
  .service-row { grid-template-columns: 6fr 1fr 5fr; gap: 0; }
  .service-row > .media { grid-column: 1; }
  .service-row > .stack { grid-column: 3; }
  .service-row:nth-child(even) { grid-template-columns: 5fr 1fr 6fr; }
  .service-row:nth-child(even) > .media { grid-column: 3; grid-row: 1; }
  .service-row:nth-child(even) > .stack { grid-column: 1; grid-row: 1; }
}

/* Process */
.process { display: grid; gap: 0; }
@media (min-width: 1024px) { .process { grid-template-columns: repeat(5, 1fr); gap: var(--space-l); } }
.step { position: relative; padding: var(--space-m) 0 var(--space-xl); }
.step .label { color: var(--stone-grey); }
.step .heading { font-size: 20px; line-height: 28px; margin: var(--space-l) 0 var(--space-s); }
@media (min-width: 1024px) { .step .heading { margin-top: var(--space-xl); } }

/* Hairlines that draw in */
.line-top { position: relative; }
.line-top::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: var(--hairline);
  transform: scaleX(0); transform-origin: left; transition: transform 1200ms var(--ease);
}
.line-top.line-top--strong::before { background: var(--nero); }
.line-top.is-in::before, .no-js .line-top::before { transform: scaleX(1); }

/* Studio */
.studio-grid { display: grid; gap: var(--space-xl); align-items: center; }
@media (min-width: 1024px) { .studio-grid { grid-template-columns: 5fr 1fr 6fr; gap: 0; } .studio-text { grid-column: 3; } }
.studio-grid .arch { aspect-ratio: 3 / 4; max-width: 480px; width: 100%; }
.signature { display: flex; align-items: center; gap: var(--space-m); padding-top: var(--space-l); }
.signature svg { width: 28px; height: auto; color: var(--nero); flex-shrink: 0; }

.values { display: grid; gap: 0; }
@media (min-width: 768px) { .values { grid-template-columns: repeat(3, 1fr); gap: var(--space-xl); } }
.value { padding: var(--space-l) 0 var(--space-xl); }
.value .heading { margin: var(--space-l) 0 var(--space-s); }

/* Words */
.words { background: var(--travertine-soft); text-align: center; }
.words .quote { font-size: 24px; line-height: 36px; max-width: 26em; margin: 0 auto; text-wrap: balance; }
@media (min-width: 768px) { .words .quote { font-size: 32px; line-height: 44px; } }
.words .label { margin-top: var(--space-l); color: var(--stone-grey); }

/* CTA band */
.cta-band { background: var(--verde); color: var(--on-verde); }
.cta-band .wrap { display: grid; gap: var(--space-xl); align-items: end; }
@media (min-width: 1024px) { .cta-band .wrap { grid-template-columns: 7fr 5fr; } }
.cta-band .overline { color: var(--on-verde); opacity: 0.85; }
.cta-band .actions { display: flex; flex-wrap: wrap; gap: var(--space-l); align-items: center; }
@media (min-width: 1024px) { .cta-band .actions { justify-content: flex-end; } }

/* Project detail */
.project-facts { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 var(--space-l); margin: 0; }
@media (min-width: 1024px) { .project-facts { grid-template-columns: repeat(5, 1fr); } }
.project-facts > div { padding: var(--space-m) 0; }
.project-facts dt { color: var(--stone-grey); margin-bottom: var(--space-xs); }
.project-facts dd { margin: 0; }
.story { display: grid; gap: var(--space-xl); }
@media (min-width: 1024px) { .story { grid-template-columns: 4fr 1fr 7fr; gap: 0; } .story > :last-child { grid-column: 3; } }
.gallery { display: grid; gap: var(--space-l); }
@media (min-width: 768px) {
  .gallery { grid-template-columns: repeat(12, 1fr); }
  .gallery > :nth-child(3n+1) { grid-column: 1 / -1; }
  .gallery > :nth-child(3n+2) { grid-column: 1 / span 5; }
  .gallery > :nth-child(3n+3) { grid-column: 6 / span 7; margin-top: var(--space-3xl); }
}
.gallery .note { margin-top: var(--space-m); max-width: 34em; color: var(--stone-grey); }
.gallery .note .label { display: block; color: var(--nero); margin-bottom: var(--space-xs); }
.spec-list > li { display: flex; justify-content: space-between; gap: var(--space-m); padding: var(--space-m) 0; }
.next-project { display: block; color: var(--nero); text-decoration: none; padding: var(--space-2xl) 0; }
.next-project:hover { color: var(--nero); }
.next-project .display { transition: transform 600ms var(--ease); }
.next-project:hover .display { transform: translateX(var(--space-m)); }

/* FAQ */
.faq details { position: relative; }
.faq summary {
  display: flex; justify-content: space-between; align-items: center; gap: var(--space-l);
  min-height: 72px; padding: var(--space-m) 0; cursor: pointer; list-style: none;
  font-family: var(--font-display); font-size: 20px; line-height: 28px; letter-spacing: 0.02em;
}
.faq summary::-webkit-details-marker { display: none; }
.faq .plus { position: relative; width: 16px; height: 16px; flex-shrink: 0; }
.faq .plus::before, .faq .plus::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: var(--nero); transition: transform 450ms var(--ease); }
.faq .plus::after { transform: rotate(90deg); }
.faq details[open] .plus::after { transform: rotate(0deg); }
.faq .answer { overflow: hidden; }
.faq .answer p { padding-bottom: var(--space-l); max-width: 44em; }

/* Contact */
.contact-grid { display: grid; }
@media (min-width: 1024px) { .contact-grid { grid-template-columns: 5fr 7fr; } }
.contact-panel { background: var(--verde); color: var(--on-verde); padding: var(--space-xl) var(--space-l); display: flex; flex-direction: column; justify-content: space-between; gap: var(--space-2xl); }
@media (min-width: 768px) { .contact-panel { padding: var(--space-2xl); } }
.contact-panel .overline { color: var(--on-verde); opacity: 0.85; }
.contact-panel a { color: var(--on-verde); }
.contact-panel dl { margin: 0; display: grid; gap: var(--space-l); }
.contact-panel dt { font-family: var(--font-display); font-size: 11px; letter-spacing: 0.4em; text-transform: uppercase; opacity: 0.85; }
.contact-panel dd { margin: var(--space-xs) 0 0; }
.contact-form { background: var(--calacatta); padding: var(--space-xl) var(--space-l); }
@media (min-width: 768px) { .contact-form { padding: var(--space-2xl); } }
.form-grid { display: grid; gap: var(--space-l); }
@media (min-width: 640px) { .form-grid { grid-template-columns: 1fr 1fr; } .field--full { grid-column: 1 / -1; } }
.field label, .field legend { display: block; font-family: var(--font-display); font-size: 11px; line-height: 16px; letter-spacing: 0.4em; text-transform: uppercase; margin-bottom: var(--space-s); color: var(--nero); padding: 0; }
.field .opt { letter-spacing: 0.02em; text-transform: none; font-family: var(--font-sans); color: var(--stone-grey); }
.field input, .field select, .field textarea {
  width: 100%; min-height: 48px; padding: 12px var(--space-m);
  font: inherit; font-size: 16px; color: var(--nero);
  background: var(--limestone); border: 1px solid var(--stone-grey); border-radius: var(--radius-s);
  transition: border-color 200ms var(--ease);
}
.field select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--nero) 50%), linear-gradient(135deg, var(--nero) 50%, transparent 50%); background-position: calc(100% - 22px) 22px, calc(100% - 17px) 22px; background-size: 5px 5px; background-repeat: no-repeat; padding-right: 44px; }
.field textarea { min-height: 140px; resize: vertical; }
.field input:hover, .field select:hover, .field textarea:hover,
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible { border-color: var(--nero); }
.field [aria-invalid="true"] { border-color: var(--nero); border-width: 2px; padding: 11px 15px; }
.field .hint { margin-top: var(--space-xs); }
.field .error { margin-top: var(--space-xs); font-size: 14px; line-height: 22px; color: var(--brass); }
.field .error:empty { display: none; }
fieldset.field { border: 0; margin: 0; padding: 0; min-width: 0; }
.radios { display: flex; flex-wrap: wrap; gap: var(--space-s); }
.radios label { margin: 0; }
.radios input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.radios span {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 var(--space-m);
  border: 1px solid var(--stone-grey); border-radius: var(--radius-s); cursor: pointer;
  font-family: var(--font-sans); font-size: 14px; letter-spacing: 0.02em; text-transform: none; color: var(--nero);
  transition: background-color 200ms var(--ease);
}
.radios span:hover { background: var(--travertine-soft); }
.radios input:checked + span { background: var(--nero); color: var(--limestone); border-color: var(--nero); }
.radios input:focus-visible + span { box-shadow: var(--focus-ring); }
.form-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-m); margin-top: var(--space-xl); }
.form-done { display: none; }
.form-done.is-shown { display: block; }
.next-steps { display: grid; gap: 0; }
@media (min-width: 768px) { .next-steps { grid-template-columns: repeat(3, 1fr); gap: var(--space-xl); } }
.next-steps > li { padding: var(--space-l) 0 var(--space-xl); }
.next-steps .heading { font-size: 20px; line-height: 28px; margin: var(--space-m) 0 var(--space-s); }

/* Footer */
.site-footer { padding: var(--space-2xl) 0 var(--space-xl); border-top: 1px solid var(--hairline); }
.footer-grid { display: grid; gap: var(--space-xl); }
@media (min-width: 768px) { .footer-grid { grid-template-columns: 4fr 2fr 2fr 3fr; } }
.footer-logo img { width: 200px; height: auto; }
.site-footer li a { display: inline-flex; min-height: 36px; align-items: center; color: var(--nero); text-decoration: none; }
.site-footer li a:hover { text-decoration: underline; text-decoration-thickness: 1px; }
.site-footer .label { color: var(--stone-grey); margin-bottom: var(--space-m); display: block; }
.footer-base { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-m); margin-top: var(--space-2xl); padding-top: var(--space-l); border-top: 1px solid var(--hairline); }

/* ---------- Scroll motion ---------- */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity 900ms var(--ease), transform 900ms var(--ease); transition-delay: var(--d, 0ms); }
.reveal.is-in { opacity: 1; transform: none; }

/* Image reveal: a curtain lifts and the picture settles */
.reveal-img { clip-path: inset(100% 0 0 0); transition: clip-path 1300ms var(--ease-in-out); transition-delay: var(--d, 0ms); }
.reveal-img > .inner { scale: 1.15; transition: scale 1600ms var(--ease); transition-delay: var(--d, 0ms); }
.reveal-img.is-in { clip-path: inset(0 0 0 0); }
.reveal-img.is-in > .inner { scale: 1; }

/* Headlines rise word by word */
.split .w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: 0.12em; margin-bottom: -0.12em; }
.split .w > span { display: inline-block; transform: translateY(110%); transition: transform 1000ms var(--ease); transition-delay: calc(var(--i) * 70ms + var(--d, 0ms)); }
.split.is-in .w > span { transform: none; }

.no-js .reveal, .no-js .reveal-img { opacity: 1; transform: none; clip-path: none; }
.no-js .reveal-img > .inner { scale: 1; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-delay: 0ms !important; }
  .reveal, .reveal-img, .split .w > span { opacity: 1; transform: none; clip-path: none; }
  .reveal-img > .inner { scale: 1; }
  .line-top::before { transform: scaleX(1); }
  .marquee-track { animation: none; flex-wrap: wrap; width: auto; }
  .intro-curtain { display: none; }
  @view-transition { navigation: none; }
}