/* ============================================================
   Eleven Design · editorial design system · v3
   Light gallery canvas, dark punctuation
   Charcoal / sage / taupe · Mutina restraint, Belfort motion
   ============================================================ */

:root {
  --charcoal: #2E2E2C;
  --charcoal-deep: #262624;
  --charcoal-soft: #383835;
  --charcoal-line: rgba(196, 201, 179, 0.14);
  --sage: #C4C9B3;
  --sage-strong: #AFB79A;
  --taupe: #6D6654;
  --taupe-soft: #8A7F68;
  --paper: #F2F1EC;
  --paper-soft: #E9E7DF;
  --paper-line: rgba(46, 46, 44, 0.12);
  --card: #FAF9F5;
  --ink: #2A2A28;
  --text-dark: #EDEBE3;
  --muted-dark: #A9A89D;
  --muted-light: #64635B;
  --serif: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --max: 1320px;
  --gutter: clamp(1.25rem, 4vw, 3rem);
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

@property --zoom {
  syntax: "<number>";
  initial-value: 1.08;
  inherits: false;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--sans);
  font-size: 1rem;
  font-weight: 300;
  line-height: 1.7;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img, svg { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
::selection { background: var(--sage); color: var(--charcoal); }

:focus-visible {
  outline: 1px solid var(--taupe);
  outline-offset: 3px;
}

/* ---------------- Typography ---------------- */

h1, h2, h3, .display {
  font-family: var(--serif);
  font-weight: 400;
  line-height: 1.12;
  letter-spacing: 0.005em;
}

h1, .display-1 { font-size: clamp(2.4rem, 6vw, 4.6rem); }
h2 { font-size: clamp(1.9rem, 4vw, 3.1rem); }
h3 { font-size: clamp(1.25rem, 2vw, 1.55rem); }

.kicker {
  display: flex;
  align-items: center;
  gap: 1rem;
  font-size: 0.72rem;
  font-weight: 400;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--taupe);
  margin-bottom: 1.8rem;
}
.kicker::before {
  content: "";
  width: 2.6rem;
  height: 1px;
  background: var(--taupe);
  flex: none;
}

.lead {
  font-size: clamp(1.02rem, 1.4vw, 1.18rem);
  font-weight: 300;
  max-width: 44rem;
  color: var(--muted-light);
}

.muted { color: var(--muted-light); }

.container {
  max-width: var(--max);
  margin: 0 auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}

/* Dark scopes: shared color inversions */
.section-deep, .cta-band, .quote-band, .site-footer {
  color: var(--text-dark);
}
.section-deep .lead, .section-deep .muted,
.cta-band .lead, .cta-band .muted,
.quote-band .lead, .quote-band .muted { color: var(--muted-dark); }
.section-deep .kicker, .cta-band .kicker, .quote-band .kicker { color: var(--sage); }
.section-deep .kicker::before, .quote-band .kicker::before { background: var(--taupe-soft); }

/* ---------------- Header ---------------- */

.site-header {
  --hd-fg: var(--text-dark);
  --hd-muted: rgba(237, 235, 227, 0.72);
  --hd-acc: var(--sage);
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 90;
  color: var(--hd-fg);
  transition:
    background 0.45s var(--ease),
    border-color 0.45s var(--ease),
    backdrop-filter 0.45s,
    opacity 0.4s var(--ease),
    transform 0.5s var(--ease),
    visibility 0.5s;
  border-bottom: 1px solid transparent;
}
/* At rest the bar is fully absent: no plate, no letters, nothing to click.
   It slides in as a dark band the moment the page starts scrolling. */
.site-header:not(.is-scrolled) {
  opacity: 0;
  visibility: hidden;
  transform: translateY(-100%);
  pointer-events: none;
}
.site-header.is-scrolled {
  opacity: 1;
  visibility: visible;
  transform: none;
  pointer-events: auto;
  background: rgba(38, 38, 36, 0.94);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border-bottom-color: var(--charcoal-line);
}
/* Divider between SK / EN needs the dark-scope hairline, not the paper one. */
.site-header .lang-toggle button + button { border-left-color: var(--charcoal-line); }

/* Everything in the bar is fluid between 1080px and 1400px so the seven nav
   items always sit on ONE line. Below 1080 the hamburger takes over, above
   1400 every clamp is pinned at its max and nothing moves. */
.header-inner {
  max-width: var(--max);
  margin: 0 auto;
  padding: 1.1rem var(--gutter);
  display: flex;
  align-items: center;
  gap: clamp(0.75rem, -1.78rem + 2.34vw, 1.5rem);
}
.site-header.is-scrolled .header-inner { padding-top: 0.75rem; padding-bottom: 0.75rem; }

.brand {
  display: flex;
  align-items: center;
  gap: clamp(0.55rem, -0.46rem + 0.94vw, 0.85rem);
  flex: none;
}
.brand-mark { width: clamp(44px, 10.3px + 3.12vw, 54px); height: auto; transition: opacity 0.3s; }
.brand:hover .brand-mark { opacity: 0.85; }
.brand-name {
  font-size: clamp(0.82rem, 0.48rem + 0.50vw, 0.92rem);
  letter-spacing: clamp(0.19em, -0.05em + 0.35vw, 0.26em);
  text-transform: lowercase;
  color: var(--hd-fg);
  white-space: nowrap;
  transition: color 0.4s;
}
.brand-name em {
  font-style: normal;
  color: var(--hd-muted);
  font-weight: 300;
}
.site-footer .brand-name { color: var(--text-dark); }
.site-footer .brand-name em { color: var(--muted-dark); }

.site-nav { display: none; margin-left: auto; gap: 0.4rem; }
.site-nav a {
  position: relative;
  /* nowrap is the hard guarantee: a link can never break onto a second line.
     The clamps are what make it fit instead of overflowing. */
  white-space: nowrap;
  font-size: clamp(0.70rem, 0.43rem + 0.40vw, 0.78rem);
  font-weight: 400;
  letter-spacing: clamp(1px, -1.53px + 0.234vw, 1.75px);
  text-transform: uppercase;
  color: var(--hd-muted);
  padding: 0.5rem clamp(0.40rem, -0.78rem + 1.09vw, 0.75rem);
  transition: color 0.3s;
}
.site-nav a::after {
  content: "";
  position: absolute;
  left: clamp(0.40rem, -0.78rem + 1.09vw, 0.75rem);
  right: clamp(0.40rem, -0.78rem + 1.09vw, 0.75rem);
  bottom: 0.15rem;
  height: 1px;
  background: var(--hd-acc);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.35s var(--ease);
}
.site-nav a:hover, .site-nav a.active { color: var(--hd-fg); }
.site-nav a:hover::after, .site-nav a.active::after { transform: scaleX(1); }

.header-actions { display: flex; align-items: center; gap: clamp(0.6rem, -0.75rem + 1.25vw, 1rem); margin-left: auto; }
.site-nav + .header-actions { margin-left: 0; }

.lang-toggle { display: flex; align-items: center; gap: 0.15rem; }
.lang-toggle button {
  font-family: var(--sans);
  white-space: nowrap;
  font-size: clamp(0.66rem, 0.46rem + 0.30vw, 0.72rem);
  font-weight: 400;
  letter-spacing: 0.14em;
  background: transparent;
  color: var(--hd-muted, var(--muted-dark));
  border: 0;
  padding: 0.3rem 0.4rem;
  cursor: pointer;
  transition: color 0.3s;
}
.lang-toggle button:hover { color: var(--hd-fg, var(--text-dark)); }
.lang-toggle button.active { color: var(--hd-acc, var(--sage)); }
.lang-toggle button + button { border-left: 1px solid var(--paper-line); }
.site-footer .lang-toggle button { color: var(--muted-dark); }
.site-footer .lang-toggle button:hover { color: var(--text-dark); }
.site-footer .lang-toggle button.active { color: var(--sage); }
.site-footer .lang-toggle button + button { border-left-color: var(--charcoal-line); }

/* ---------------- Buttons ---------------- */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  font-family: var(--sans);
  font-size: 0.78rem;
  font-weight: 400;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 0.95rem 1.9rem;
  border: 1px solid rgba(46, 46, 44, 0.4);
  color: var(--ink);
  background: transparent;
  transition: background 0.35s var(--ease), color 0.35s var(--ease), border-color 0.35s;
  cursor: pointer;
  text-align: center;
}
.btn:hover { background: var(--charcoal); border-color: var(--charcoal); color: var(--paper); }
.btn-solid { background: var(--sage); border-color: var(--sage); color: var(--charcoal); }
.btn-solid:hover { background: var(--sage-strong); border-color: var(--sage-strong); color: var(--charcoal); }
.header-call {
  padding: 0.6rem clamp(0.85rem, -0.33rem + 1.09vw, 1.2rem);
  font-size: clamp(0.70rem, 0.43rem + 0.40vw, 0.78rem);
  /* tracking stays 0.18em from .btn so it tracks the fluid font-size exactly */
  white-space: nowrap;
}

.link-arrow {
  display: inline-flex;
  align-items: baseline;
  gap: 0.6rem;
  font-size: 0.78rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--taupe);
  border-bottom: 1px solid transparent;
  transition: border-color 0.3s;
}
.link-arrow::after { content: "\2192"; font-size: 0.9rem; transition: transform 0.3s var(--ease); }
.link-arrow:hover { border-bottom-color: var(--taupe); }
.link-arrow:hover::after { transform: translateX(5px); }
.section-deep .link-arrow, .cta-band .link-arrow { color: var(--sage); }
.section-deep .link-arrow:hover, .cta-band .link-arrow:hover { border-bottom-color: var(--sage); }

/* ---------------- Mobile nav ---------------- */

/* Three bars, 2px each. The old button was two 1px hairlines, which on a phone
   screen read as nothing at all: they were drawn, they just could not be seen.
   Thickness and the third bar are what make it look like a menu. */
.nav-toggle {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  background: transparent;
  border: 0;
  cursor: pointer;
  padding: 0 8px;
  z-index: 120;
}
.nav-toggle span {
  display: block;
  width: 26px;
  height: 2px;
  border-radius: 2px;
  background: var(--hd-fg, var(--sage));
  transition: transform 0.4s var(--ease), opacity 0.3s, background 0.3s;
}
.nav-toggle.open span { background: var(--sage); }
/* 2px bar + 5px gap + 2px bar = 7px from an outer bar to the middle one. */
.nav-toggle.open span:first-child { transform: translateY(7px) rotate(45deg); }
.nav-toggle.open span:nth-child(2) { opacity: 0; transform: scaleX(0.2); }
.nav-toggle.open span:last-child { transform: translateY(-7px) rotate(-45deg); }

.mobile-nav {
  position: fixed;
  inset: 0;
  z-index: 80;
  background: var(--charcoal-deep);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 6rem var(--gutter) 3rem;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.45s var(--ease), visibility 0.45s;
}
.mobile-nav.open { opacity: 1; visibility: visible; }
.mobile-nav a {
  font-family: var(--serif);
  font-size: clamp(1.7rem, 6vw, 2.6rem);
  line-height: 1.35;
  color: var(--muted-dark);
  padding: 0.35rem 0;
  transform: translateY(16px);
  opacity: 0;
  transition: transform 0.5s var(--ease), opacity 0.5s, color 0.3s;
}
.mobile-nav.open a { transform: none; opacity: 1; }
.mobile-nav a:nth-child(2) { transition-delay: 0.04s; }
.mobile-nav a:nth-child(3) { transition-delay: 0.08s; }
.mobile-nav a:nth-child(4) { transition-delay: 0.12s; }
.mobile-nav a:nth-child(5) { transition-delay: 0.16s; }
.mobile-nav a:nth-child(6) { transition-delay: 0.2s; }
.mobile-nav a:nth-child(7) { transition-delay: 0.24s; }
.mobile-nav a.active, .mobile-nav a:hover { color: var(--sage); }
.mobile-nav .mobile-phone {
  margin-top: 2.2rem;
  font-family: var(--serif);
  font-size: 1.3rem;
  color: var(--sage);
  border-top: 1px solid var(--charcoal-line);
  padding-top: 1.6rem;
}

/* ---------------- Hero ---------------- */

.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  isolation: isolate;
  color: var(--text-dark);
}
.hero .lead { color: var(--muted-dark); }
.hero-media {
  position: absolute;
  inset: -26% 0 0 0;
  z-index: -2;
  will-change: transform;
}
.hero-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  animation: heroDrift 22s var(--ease) both;
}
@keyframes heroDrift {
  from { transform: scale(1.08); }
  to { transform: scale(1); }
}
.hero-veil {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(to top, rgba(38, 38, 36, 0.92) 0%, rgba(38, 38, 36, 0.35) 45%, rgba(38, 38, 36, 0.25) 100%);
}
.hero-copy {
  width: 100%;
  padding-top: 9rem;
  padding-bottom: clamp(5rem, 12vh, 9rem);
}
.hero-copy h1 {
  max-width: 19ch;
  font-size: clamp(2.5rem, 5.6vw, 4.7rem);
  font-weight: 300;
}
.hero-copy h1 em { font-style: italic; color: var(--sage); }
.hero-copy .lead { margin-top: 1.6rem; animation: fadeUp 1s var(--ease) 0.75s both; }
.hero .kicker { color: var(--sage); }
.hero .kicker::before { background: var(--taupe-soft); }
.hero .kicker span {
  display: inline-block;
  animation: kickerSettle 1.6s var(--ease) 0.15s both;
}
@keyframes kickerSettle {
  from { letter-spacing: 0.52em; opacity: 0; }
  to { letter-spacing: 0.32em; opacity: 1; }
}
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(22px); }
  to { opacity: 1; transform: none; }
}
.hero-cta {
  margin-top: 2.6rem;
  display: flex;
  flex-wrap: wrap;
  gap: 1.4rem;
  align-items: center;
  animation: fadeUp 1s var(--ease) 1.05s both;
}
.hero-phone {
  font-family: var(--serif);
  font-size: 1.35rem;
  letter-spacing: 0.04em;
  color: var(--sage);
  border-bottom: 1px solid rgba(196, 201, 179, 0.4);
  transition: border-color 0.3s;
}
.hero-phone:hover { border-bottom-color: var(--sage); }

.hero-scroll {
  position: absolute;
  right: var(--gutter);
  bottom: clamp(5rem, 12vh, 9rem);
  display: none;
  align-items: center;
  gap: 0.9rem;
  font-size: 0.68rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--muted-dark);
  writing-mode: vertical-rl;
}
.hero-scroll::after {
  content: "";
  width: 1px;
  height: 4.5rem;
  background: linear-gradient(to bottom, var(--sage), transparent);
  animation: scrollPulse 2.4s ease-in-out infinite;
}
@keyframes scrollPulse {
  0%, 100% { transform: scaleY(1); opacity: 1; transform-origin: top; }
  50% { transform: scaleY(0.55); opacity: 0.5; transform-origin: top; }
}
@media (min-width: 900px) { .hero-scroll { display: flex; } }

/* ---------------- Page hero (subpages) ---------------- */

.page-hero {
  padding: clamp(9rem, 22vh, 14rem) 0 clamp(3.5rem, 8vh, 6rem);
  border-bottom: 1px solid var(--paper-line);
}
.page-hero h1 { max-width: 22ch; font-weight: 300; }
.page-hero .lead { margin-top: 1.6rem; }

/* ---------------- Interlude (static line, ex-marquee) ---------------- */

.interlude {
  border-top: 1px solid var(--paper-line);
  border-bottom: 1px solid var(--paper-line);
  padding: 1.6rem var(--gutter);
  text-align: center;
  background: var(--paper);
}
.interlude span {
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.02rem;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--muted-light);
}

/* ---------------- Sections ---------------- */

.section { padding: clamp(5.5rem, 13vh, 11rem) 0; }
.section-light { background: var(--paper-soft); }
.section-deep { background: var(--charcoal-deep); }

.section-head { margin-bottom: clamp(3rem, 8vh, 5.5rem); max-width: 52rem; }
.section-head .lead { margin-top: 1.4rem; }

.section-head-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.5rem;
  margin-bottom: clamp(3rem, 8vh, 5.5rem);
}
.section-head-row .section-head { margin-bottom: 0; }

.hairline { border: 0; border-top: 1px solid var(--paper-line); }
.section-deep .hairline { border-top-color: var(--charcoal-line); }

/* ---------------- Grids ---------------- */

.grid { display: grid; gap: clamp(1.5rem, 3vw, 2.5rem); }
.grid-2 { grid-template-columns: 1fr; }
.grid-3 { grid-template-columns: 1fr; }

@media (min-width: 720px) {
  .grid-2 { grid-template-columns: 1fr 1fr; }
  .grid-3 { grid-template-columns: repeat(3, 1fr); }
}

/* ---------------- Image frames & cards ---------------- */

.card { position: relative; }
.card .frame, .frame {
  position: relative;
  overflow: hidden;
  background: var(--paper-soft);
}
.frame img {
  --plx: 0px;
  --zoom: 1.08;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  transform: translateY(var(--plx)) scale(var(--zoom));
  transition: --zoom 1.1s var(--ease);
}
.frame--tall img { aspect-ratio: 4 / 5; }
.card:hover .frame img { --zoom: 1.14; }
.card .frame::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(38, 38, 36, 0.28), transparent 45%);
  opacity: 0;
  transition: opacity 0.6s;
}
.card:hover .frame::after { opacity: 1; }

/* Curtain reveal: clip on frame, settle zoom on image */
.reveal-mask {
  clip-path: inset(100% 0 0 0);
  transition: clip-path 1.15s var(--ease);
}
.reveal-mask.revealed { clip-path: inset(0 0 0 0); }
.reveal-mask img { --zoom: 1.22; transition: --zoom 1.5s var(--ease); }
.reveal-mask.revealed img { --zoom: 1.08; }
.card:hover .reveal-mask.revealed img { --zoom: 1.14; }

.card .idx {
  position: absolute;
  top: 1.1rem;
  left: 1.2rem;
  font-family: var(--serif);
  font-style: italic;
  font-size: 1rem;
  letter-spacing: 0.12em;
  color: rgba(242, 241, 236, 0.85);
  z-index: 2;
}
.card .caption { margin-top: 1.1rem; }
.card .caption h3 {
  font-family: var(--sans);
  font-weight: 400;
  font-size: 0.78rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink);
}
.section-deep .card .caption h3 { color: var(--text-dark); }
.card .caption p {
  margin-top: 0.45rem;
  font-size: 0.9rem;
  color: var(--muted-light);
  max-width: 34rem;
}
.section-deep .card .caption p { color: var(--muted-dark); }

/* Featured editorial layout */
.editorial {
  display: grid;
  gap: clamp(1.5rem, 3vw, 2.5rem);
  grid-template-columns: 1fr;
}
@media (min-width: 900px) {
  .editorial { grid-template-columns: repeat(12, 1fr); align-items: end; }
  .editorial .card:nth-child(1) { grid-column: 1 / span 7; }
  .editorial .card:nth-child(2) { grid-column: 8 / span 5; }
  .editorial .card:nth-child(2) .frame img { aspect-ratio: 4 / 5; }
  .editorial .card:nth-child(3) { grid-column: 4 / span 6; margin-top: clamp(1rem, 4vh, 3rem); }
}

/* Hover-only descriptions and focus dimming (fine pointers) */
@media (hover: hover) and (pointer: fine) {
  .editorial .caption p {
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 0.5s var(--ease), transform 0.5s var(--ease);
  }
  .editorial .card:hover .caption p { opacity: 1; transform: none; }
  .gallery-grid .card, .editorial .card {
    transition: opacity 0.55s var(--ease), transform 0.9s var(--ease);
  }
  .gallery-grid:hover .card:not(:hover),
  .editorial:hover .card:not(:hover) { opacity: 0.55; }
}

/* Gallery: a masonry of equal columns in which every photograph keeps its own
   shape, vertical ones included. --cols is the column count at this width and
   main.js reads it; the grid underneath is what a visitor without JavaScript
   gets, and what a phone gets at one column. main.js sets --r (width / height)
   on each figure from the <img> width and height, so a column is laid out
   before its lazy photograph has arrived. */
.gallery-grid {
  --cols: 1;
  --gap: clamp(1rem, 2vw, 1.8rem);
  display: grid;
  gap: var(--gap);
  grid-template-columns: 1fr;
  align-items: start;
}
@media (min-width: 640px) { .gallery-grid { --cols: 2; grid-template-columns: 1fr 1fr; } }
@media (min-width: 1000px) { .gallery-grid { --cols: 3; grid-template-columns: repeat(3, 1fr); } }
.gallery-grid.is-masonry { display: block; position: relative; }
.gallery-grid.is-masonry > .card {
  position: absolute;
  top: 0;
  left: 0;
  width: calc((100% - (var(--cols) - 1) * var(--gap)) / var(--cols));
}
.gallery-grid .frame img { aspect-ratio: var(--r, auto); }
/* Beyond 1:2 or 2.4:1 the frame stops following the picture and the picture
   is contained in it instead. Nothing is cut either way. */
.gallery-grid .frame img.fitted { object-fit: contain; }
.gallery-grid .card { cursor: zoom-in; }
/* The caption stays in the markup, and out of sight (2026-09-23). It is still
   one of the client's editable fields, and the lightbox reads its text for the
   line under the photograph. */
.gallery-grid .caption {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ---------------- Full-bleed chapter ---------------- */

.chapter { padding: clamp(2rem, 6vh, 4.5rem) 0; }
/* Band matches the render's own 16:9 so `cover` has nothing left to crop.
   No scale() and no parallax translate here: either one would need extra
   zoom to hide its own edges, which is what was eating the image. */
.chapter-media {
  position: relative;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  background: var(--paper-soft);
}
.chapter-media img {
  --zoom: 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: none;
}
.chapter-media.reveal-mask img,
.chapter-media.reveal-mask.revealed img { --zoom: 1; }
.chapter-cap {
  margin-top: 1.1rem;
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.02rem;
  color: var(--muted-light);
}

/* ---------------- Asymmetric duo ---------------- */

.duo {
  display: grid;
  gap: clamp(1.5rem, 3vw, 2.5rem);
  grid-template-columns: 1fr;
}
@media (min-width: 900px) {
  .duo { grid-template-columns: repeat(12, 1fr); align-items: start; }
  .duo-a { grid-column: 1 / span 7; }
  .duo-b { grid-column: 9 / span 4; margin-top: clamp(3rem, 12vh, 8rem); }
}
.duo .plate {
  background: var(--card);
  border: 1px solid var(--paper-line);
  padding: clamp(1rem, 3vw, 2.4rem);
}

/* ---------------- Work index (Mutina list) ---------------- */

.work-index {
  display: grid;
  gap: clamp(2rem, 5vw, 4rem);
  grid-template-columns: 1fr;
  align-items: start;
}
@media (min-width: 900px) {
  .work-index { grid-template-columns: 7fr 5fr; }
}
.work-list { list-style: none; }
.work-row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.4rem 1.3rem;
  padding: 1.7rem 0;
  border-bottom: 1px solid var(--paper-line);
  cursor: pointer;
  transition: opacity 0.5s var(--ease), padding-left 0.5s var(--ease);
}
.work-row:first-child { border-top: 1px solid var(--paper-line); }
.wr-num {
  font-family: var(--serif);
  font-style: italic;
  font-size: 1rem;
  color: var(--taupe);
  flex: none;
}
.wr-name {
  font-size: clamp(1.6rem, 3vw, 2.5rem);
  font-weight: 300;
  line-height: 1.1;
}
.wr-tag {
  margin-left: auto;
  font-size: 0.7rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted-light);
}
.wr-media { flex-basis: 100%; margin-top: 1rem; }
/* A project keeps the proportions it was photographed in. The 4/3 every other
   frame on the site is built on would cut a vertical render down to a
   landscape band, which is what it used to do. */
.wr-media .frame img { aspect-ratio: auto; height: auto; }
@media (hover: hover) and (pointer: fine) {
  .work-list:hover .work-row:not(:hover) { opacity: 0.4; }
  .work-row:hover { padding-left: 0.9rem; }
}
.work-preview { display: none; }
@media (min-width: 900px) {
  .wr-media { display: none; }
  .work-preview {
    display: block;
    position: sticky;
    top: clamp(6rem, 16vh, 9rem);
    /* The starting shape only. main.js gives the pane the proportions of
       whichever project is showing, so a portrait render is shown whole
       rather than cropped to a landscape window. The images below stay on
       object-fit: cover, which crops nothing once the pane matches them. */
    aspect-ratio: 4 / 3.4;
    overflow: hidden;
    background: var(--paper-soft);
    transition: aspect-ratio 0.65s var(--ease);
  }
  .work-preview img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transform: scale(1.06);
    transition: opacity 0.65s var(--ease), transform 1.2s var(--ease);
  }
  .work-preview img.active { opacity: 1; transform: scale(1); }
  /* An extreme panorama or a very tall crop would turn the sticky pane into a
     letterbox slot or a column taller than the screen, so main.js stops
     matching those and marks them instead. Contained, they lose nothing. */
  .work-preview img.fitted { object-fit: contain; }
}

/* ---------------- Stats ---------------- */

.stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-top: 1px solid var(--paper-line);
}
.section-deep .stats { border-top-color: var(--charcoal-line); }
.stat {
  padding: 1.8rem 1.5rem 1.8rem 0;
  border-bottom: 1px solid var(--paper-line);
}
.section-deep .stat { border-bottom-color: var(--charcoal-line); }
.stat .num {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(2.6rem, 5vw, 4rem);
  line-height: 1.05;
  color: var(--taupe);
}
.section-deep .stat .num { color: var(--sage); }
.stat .lbl {
  margin-top: 0.4rem;
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted-light);
}
.section-deep .stat .lbl { color: var(--muted-dark); }
@media (min-width: 900px) {
  .stats { grid-template-columns: repeat(4, 1fr); }
  .stat { border-bottom: 0; border-top: 0; padding: 2.2rem 2rem 0.5rem 0; }
  .stat + .stat { padding-left: 2rem; border-left: 1px solid var(--paper-line); }
  .section-deep .stat + .stat { border-left-color: var(--charcoal-line); }
}

/* ---------------- Feature list ---------------- */

.feature-list { list-style: none; display: grid; }
.feature-list li {
  padding: 1.5rem 0;
  border-bottom: 1px solid var(--paper-line);
  display: grid;
  gap: 0.3rem;
}
.feature-list li:first-child { border-top: 1px solid var(--paper-line); }
.section-deep .feature-list li,
.section-deep .feature-list li:first-child { border-color: var(--charcoal-line); }
.feature-list h3 { font-size: 1.35rem; }
.feature-list p { font-size: 0.92rem; color: var(--muted-light); max-width: 36rem; }
.section-deep .feature-list p { color: var(--muted-dark); }

/* ---------------- Steps (ghost numerals) ---------------- */

.steps {
  list-style: none;
  counter-reset: step;
  display: grid;
  gap: 0;
}
@media (min-width: 720px) { .steps { grid-template-columns: 1fr 1fr; column-gap: clamp(2.5rem, 6vw, 5.5rem); } }
.steps li {
  counter-increment: step;
  position: relative;
  padding: 2.8rem 0 2.4rem 3.4rem;
  border-bottom: 1px solid var(--paper-line);
  overflow: hidden;
}
.steps li::before {
  content: counter(step, decimal-leading-zero);
  position: absolute;
  left: -0.5rem;
  top: 0.2rem;
  font-family: var(--serif);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(5.5rem, 9vw, 8.5rem);
  line-height: 1;
  color: var(--taupe);
  opacity: 0.13;
  z-index: 0;
  pointer-events: none;
}
.steps h3 { position: relative; z-index: 1; font-size: 1.25rem; margin-bottom: 0.25rem; }
.steps p { position: relative; z-index: 1; font-size: 0.92rem; color: var(--muted-light); }

/* ---------------- Quotes (reviews) ---------------- */

.quote {
  position: relative;
  padding-top: 2.6rem;
  display: flex;
  flex-direction: column;
}
.quote::before {
  content: "\201C";
  position: absolute;
  top: -0.4rem;
  left: -0.3rem;
  font-family: var(--serif);
  font-size: 5rem;
  line-height: 1;
  color: var(--taupe);
  opacity: 0.4;
}
.quote .starrow {
  color: var(--taupe);
  letter-spacing: 0.28em;
  font-size: 0.72rem;
  margin-bottom: 1rem;
}
.quote blockquote {
  font-family: var(--serif);
  font-size: clamp(1.15rem, 1.6vw, 1.35rem);
  font-style: italic;
  line-height: 1.5;
  flex: 1;
}
.quote .who {
  margin-top: 1.3rem;
  font-size: 0.7rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--muted-light);
}
.section-deep .quote .who { color: var(--muted-dark); }
.section-deep .quote .starrow { color: var(--sage); }

/* ---------------- Designer quote band ---------------- */

.quote-band {
  background: var(--charcoal);
  border-top: 1px solid var(--charcoal-line);
  border-bottom: 1px solid var(--charcoal-line);
  padding: clamp(5rem, 14vh, 9rem) 0;
}
.qb-text {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(1.7rem, 3.6vw, 3rem);
  line-height: 1.3;
  max-width: 26ch;
  color: var(--text-dark);
}
.qb-sign {
  margin-top: 2.2rem;
  font-size: 0.72rem;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--muted-dark);
}
.qb-sign::before {
  content: "";
  display: inline-block;
  vertical-align: middle;
  width: 2.6rem;
  height: 1px;
  background: var(--taupe-soft);
  margin-right: 1rem;
}

/* ---------------- Pricing ---------------- */

.price-cards {
  display: grid;
  gap: clamp(1.2rem, 2vw, 2rem);
  grid-template-columns: 1fr;
}
@media (min-width: 840px) { .price-cards { grid-template-columns: repeat(3, 1fr); } }
.price-card {
  position: relative;
  border: 1px solid var(--paper-line);
  padding: clamp(1.8rem, 3vw, 2.6rem);
  background: var(--card);
  transition: border-color 0.4s, transform 0.5s var(--ease);
}
.price-card:hover { border-color: rgba(109, 102, 84, 0.5); transform: translateY(-4px); }
.price-card h3 { font-size: 1.05rem; font-family: var(--sans); font-weight: 400; letter-spacing: 0.2em; text-transform: uppercase; color: var(--muted-light); }
.price-card .amount {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(2.2rem, 3.5vw, 3rem);
  margin: 1.1rem 0 0.9rem;
  color: var(--ink);
}
.price-card p { font-size: 0.9rem; color: var(--muted-light); }
/* A card with no price: the label style, wider tracking, centred. */
.price-card:has(.amount span:empty) { display: flex; flex-direction: column; justify-content: center; }
.price-card:has(.amount span:empty) h3 {
  font-size: 0.95rem;
  letter-spacing: 0.28em;
  line-height: 2;
  text-align: center;
}
.price-card:has(.amount span:empty) .amount,
.price-card:has(.amount span:empty) p:empty { display: none; }
.price-card::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 3rem;
  height: 1px;
  background: var(--taupe);
  transition: width 0.5s var(--ease);
}
.price-card:hover::after { width: 100%; }
.price-note { margin-top: 2.2rem; font-size: 0.88rem; max-width: 44rem; }

/* ---------------- Split section ---------------- */

.split {
  display: grid;
  gap: clamp(2rem, 5vw, 4.5rem);
  grid-template-columns: 1fr;
  align-items: start;
}
@media (min-width: 900px) { .split { grid-template-columns: 1fr 1fr; } }

/* ---------------- CTA band ---------------- */

.cta-band {
  position: relative;
  text-align: center;
  padding: clamp(5rem, 14vh, 9rem) var(--gutter);
  background: var(--charcoal-deep);
  border-top: 1px solid var(--charcoal-line);
  overflow: hidden;
}
.cta-band .cta-mark {
  position: absolute;
  right: -6%;
  bottom: -18%;
  width: clamp(300px, 38vw, 560px);
  opacity: 0.05;
  pointer-events: none;
}
.cta-band .kicker { justify-content: center; }
.cta-band .kicker::before { display: none; }
.cta-band h2 { max-width: 24ch; margin: 0 auto 1.2rem; font-weight: 300; }
.cta-band .muted { max-width: 40rem; margin: 0 auto 2.4rem; }
.cta-phone {
  display: inline-block;
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(2rem, 6vw, 4rem);
  letter-spacing: 0.03em;
  color: var(--sage);
  line-height: 1.15;
  border-bottom: 1px solid rgba(196, 201, 179, 0.35);
  transition: border-color 0.35s, color 0.35s;
  margin-bottom: 1.6rem;
}
.cta-phone:hover { border-bottom-color: var(--sage); }
.cta-sub { font-size: 0.78rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--muted-dark); }

/* ---------------- Contact page ---------------- */

.contact-phone {
  display: inline-block;
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(2.4rem, 8vw, 5rem);
  color: var(--taupe);
  margin: 1.5rem 0 2rem;
  border-bottom: 1px solid rgba(109, 102, 84, 0.35);
  transition: border-color 0.35s;
  line-height: 1.15;
}
.contact-phone:hover { border-bottom-color: var(--taupe); }
.contact-meta {
  margin-top: 3rem;
  display: grid;
  gap: 0.5rem;
  font-size: 0.92rem;
  color: var(--muted-light);
  border-top: 1px solid var(--paper-line);
  padding-top: 2rem;
  max-width: 30rem;
}

/* ---------------- Footer ----------------
   Mutina's structure (one slim row of short columns, a fine line under it),
   in Eleven's own dress: charcoal field, sage for the phone and the active
   language, taupe for the small rule on each label, the faint X at the right. */

.site-footer {
  position: relative;
  background: var(--charcoal-deep);
  border-top: 1px solid var(--charcoal-line);
  padding: clamp(2.75rem, 6vh, 3.75rem) 0 1.5rem;
  overflow: hidden;
}
.footer-mark {
  display: none;
  position: absolute;
  top: 2.25rem;
  right: -150px;
  width: 320px;
  opacity: 0.045;
  pointer-events: none;
}
/* Only where the page has a real margin past the container for it to sit in.
   Narrower, it can only land behind text. */
@media (min-width: 1600px) { .footer-mark { display: block; } }
.footer-inner {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2.25rem 1.5rem;
  align-items: start;
}
@media (min-width: 600px) {
  .footer-inner { grid-template-columns: 1.1fr 1.5fr 0.5fr; }
}
@media (min-width: 1000px) {
  .footer-inner { grid-template-columns: 1.2fr 1.1fr 1.5fr 0.55fr; gap: 2.5rem; }
}
.footer-brand {
  grid-column: 1 / -1;
  justify-self: start;
  display: flex;
  align-items: center;
  gap: 0.8rem;
}
@media (min-width: 1000px) { .footer-brand { grid-column: auto; } }
.footer-brand svg { width: 48px; height: auto; }
.footer-col h4 {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  font-size: 0.66rem;
  font-weight: 400;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--muted-dark);
  margin-bottom: 1.1rem;
}
.footer-col h4::before {
  content: "";
  width: 1.4rem;
  height: 1px;
  background: var(--taupe-soft);
  flex: none;
}
.footer-col nav, .footer-stack { display: grid; gap: 0.4rem; justify-items: start; }
/* .footer-col nav's gap shorthand outranks a bare .footer-menu, which had the
   two columns 0.4rem apart. Scoped here so the column gap actually applies. */
.footer-col .footer-menu { grid-template-rows: repeat(4, auto); grid-auto-flow: column; column-gap: clamp(2rem, 4vw, 3rem); justify-content: start; }
.footer-col a, .footer-col span { font-size: 0.85rem; line-height: 1.5; font-weight: 300; color: var(--muted-dark); transition: color 0.3s; }
.footer-col a:hover { color: var(--sage); }
.footer-col .footer-phone {
  font-family: var(--serif);
  font-size: 1.45rem;
  font-weight: 400;
  line-height: 1.1;
  color: var(--sage);
  margin-bottom: 0.35rem;
}
.footer-col .footer-phone:hover { color: var(--text-dark); }
.footer-stack span { max-width: 36ch; }
.footer-col .lang-toggle { margin-left: -0.4rem; }
.footer-bottom {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
  align-items: center;
  justify-content: space-between;
  margin-top: clamp(2.25rem, 5vh, 3rem);
  padding-top: 1.2rem;
  border-top: 1px solid var(--charcoal-line);
}
.footer-fine { font-size: 0.68rem; letter-spacing: 0.12em; color: var(--muted-dark); }

[data-lightbox] { cursor: zoom-in; }
body.has-cursor [data-lightbox] { cursor: none; }

/* ---------------- Lightbox ---------------- */

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: rgba(38, 38, 36, 0.96);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(1rem, 4vw, 4rem);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.4s var(--ease), visibility 0.4s;
}
.lightbox.open { opacity: 1; visibility: visible; }
.lightbox img {
  max-width: 100%;
  max-height: 82vh;
  object-fit: contain;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5);
}
.lightbox .lb-caption {
  position: absolute;
  bottom: 2rem;
  left: 50%;
  transform: translateX(-50%);
  font-size: 0.72rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--muted-dark);
  white-space: nowrap;
}
.lightbox button {
  position: absolute;
  background: transparent;
  border: 1px solid var(--charcoal-line);
  color: var(--sage);
  font-size: 1.1rem;
  line-height: 1;
  width: 46px;
  height: 46px;
  cursor: pointer;
  transition: background 0.3s, color 0.3s;
  display: flex;
  align-items: center;
  justify-content: center;
}
.lightbox button:hover { background: var(--sage); color: var(--charcoal); }
.lb-close { top: 1.4rem; right: 1.4rem; }
.lb-prev { left: 1.4rem; top: 50%; transform: translateY(-50%); }
.lb-next { right: 1.4rem; top: 50%; transform: translateY(-50%); }
/* Which photograph of this project you are on. Serif italic, the same treatment
   .wr-num gives the project number in the list behind it, but in sage rather
   than taupe: taupe is a paper colour and all but disappears on the obsidian
   ground the lightbox uses. */
.lightbox .lb-count {
  position: absolute;
  bottom: 3.5rem;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.15rem;
  letter-spacing: 0.06em;
  color: var(--sage);
}
/* A project with one photograph has nothing to page through. */
.lightbox.lb-single .lb-prev,
.lightbox.lb-single .lb-next,
.lightbox.lb-single .lb-count { display: none; }

/* ---------------- Custom cursor ---------------- */

.cursor-dot {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 300;
  width: 78px;
  height: 78px;
  margin: -39px 0 0 -39px;
  border-radius: 50%;
  background: var(--sage);
  color: var(--charcoal);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.6rem;
  font-weight: 400;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  pointer-events: none;
  transform: scale(0);
  transition: transform 0.35s var(--ease);
  will-change: transform;
}
.cursor-dot.on { transform: scale(1); }

/* ---------------- Scroll progress ---------------- */

.scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 500;
  width: 100%;
  height: 2px;
  background: var(--taupe);
  transform: scaleX(0);
  transform-origin: left;
  pointer-events: none;
}

/* ---------------- Page transition veil ---------------- */

.page-veil {
  position: fixed;
  inset: 0;
  z-index: 400;
  background: var(--charcoal);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.42s ease;
  animation: veilIn 0.65s ease both;
}
@keyframes veilIn {
  from { opacity: 1; }
  to { opacity: 0; }
}
body.leaving .page-veil { opacity: 1; pointer-events: auto; }

/* ---------------- Reveal animations ---------------- */

[data-reveal] {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.9s var(--ease), transform 0.9s var(--ease);
  transition-delay: var(--reveal-delay, 0s);
}
[data-reveal].revealed { opacity: 1; transform: none; }

/* Word-mask headline reveals */
.wsplit { opacity: 1 !important; transform: none !important; }
.wsplit .w {
  display: inline-block;
  overflow: hidden;
  vertical-align: bottom;
  padding-bottom: 0.08em;
  margin-bottom: -0.08em;
}
.wsplit .wi {
  display: inline-block;
  transform: translateY(115%);
  transition: transform 0.95s var(--ease);
}
.wsplit.revealed .wi { transform: none; }

/* ---------------- Responsive header ---------------- */

@media (min-width: 1080px) {
  .site-nav { display: flex; }
  .nav-toggle { display: none; }
  .mobile-nav { display: none; }
}
@media (max-width: 640px) {
  .header-call { display: none; }
  .brand-name { font-size: 0.8rem; letter-spacing: 0.2em; }
}

/* ---------------- Reduced motion ---------------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  [data-reveal] { opacity: 1; transform: none; }
  .reveal-mask { clip-path: none; }
  .wsplit .wi { transform: none; }
  .hero-media img { animation: none; }
  .page-veil { animation: none; opacity: 0; }
  .frame img, .chapter-media img { transform: none; }
}