/*
Theme Name: MERLO Architecture
Theme URI: https://merlo-architecture.ch
Author: MERLO Architecture
Author URI: https://merlo-architecture.ch
Description: Minimal, photo-led portfolio theme for MERLO Architecture.
Version: 2.7.1
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: merlo-architecture
*/

/* ==========================================================================
   MERLO — monochrome portfolio design tokens
   ========================================================================== */
:root {
  --color-bg: #ffffff;
  --color-surface: #ffffff;
  --color-text: #171717;
  --color-accent: #171717;
  --color-accent-2: #777777;
  --color-divider: #dedede;

  --color-neutral-100: #ffffff;
  --color-neutral-200: #eeeeee;
  --color-neutral-300: #dedede;
  --color-neutral-400: #bdbdbd;
  --color-neutral-500: #8a8a8a;
  --color-neutral-600: #6b6b6b;
  --color-neutral-700: #555555;
  --color-neutral-800: #333333;
  --color-neutral-900: #171717;

  --color-accent-100: #f5f5f5;
  --color-accent-200: #eeeeee;
  --color-accent-300: #dedede;
  --color-accent-400: #bdbdbd;
  --color-accent-500: #777777;
  --color-accent-600: #666666;
  --color-accent-700: #555555;
  --color-accent-800: #333333;
  --color-accent-900: #171717;

  --font-heading: "Helvetica Neue", Arial, sans-serif;
  --font-heading-weight: 500;
  --font-body: "Helvetica Neue", Arial, sans-serif;

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;

  --radius-sm: 0px;
  --radius-md: 0px;
  --radius-lg: 0px;

  --ease: cubic-bezier(0.22, 0.61, 0.24, 1);
}

body {
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6,
.wp-block-heading {
  font-family: var(--font-heading);
  font-weight: var(--font-heading-weight);
  line-height: 1.12;
  letter-spacing: -0.015em;
}

a { text-decoration: none; }

/* Radius: zero, everywhere, always — no exceptions. */
img, figure, .wp-block-image img, .wp-block-cover img,
.wp-block-button__link, .card, .btn, .input, textarea, select,
.wp-block-group, .avatar-block {
  border-radius: 0 !important;
}

/* Existing grayscale classes are kept for markup compatibility, but project
   photography now shows its material and light honestly by default. */
.grayscale,
.grayscale img,
.wp-block-image.grayscale img,
figure.grayscale img,
img.grayscale {
  filter: none;
  transition: filter 0.35s ease;
}

.grayscale:hover,
.grayscale:hover img,
.grayscale:focus-within,
.grayscale:focus-within img,
.wp-block-image.grayscale:hover img,
.wp-block-image.grayscale:focus-within img,
figure.grayscale:hover img,
figure.grayscale:focus-within img,
img.grayscale:hover,
img.grayscale:focus-visible {
  filter: saturate(1.06) contrast(1.01);
}

@media (prefers-reduced-motion: reduce) {
  .grayscale,
  .grayscale img,
  .wp-block-image.grayscale img,
  figure.grayscale img,
  img.grayscale {
    transition: none;
  }
}

/* Footer margin reset */
.wp-site-blocks > footer {
  margin-block-start: 0;
}

/* Footer: three calm, aligned columns instead of pushing content to both edges. */
.footer-layout {
  display: flex !important;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  gap: clamp(24px, 5vw, 72px);
}
.footer-brand,
.footer-contact {
  align-items: center !important;
  flex: 1 1 0;
  text-align: center;
}
.footer-copyright {
  flex: 1 1 0;
  margin: 0 !important;
  text-align: center;
}
.footer-nav {
  justify-self: start;
  min-width: 0;
}
.footer-nav .wp-block-navigation__container {
  display: grid !important;
  grid-template-columns: repeat(2, max-content);
  gap: 8px 28px !important;
  justify-items: start;
}
.footer-nav .wp-block-navigation-item {
  margin: 0 !important;
}
.footer-nav .wp-block-navigation-item__content {
  padding: 0;
}
@media (max-width: 640px) {
  .footer-layout {
    flex-direction: column;
    gap: 20px;
  }
  .footer-brand,
  .footer-contact,
  .footer-copyright { flex: 0 0 auto; width: 100%; }
  .footer-nav {
    grid-column: 1 / -1;
  }
}

.text-muted { color: color-mix(in srgb, var(--color-text) 70%, transparent); }

:focus { outline: none; }
:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
::selection { background: color-mix(in srgb, var(--color-accent) 30%, transparent); }

/* ==========================================================================
   Rules — the 2px structural divider
   ========================================================================== */
.hr,
.wp-block-separator {
  height: 1px !important;
  border: 0 !important;
  opacity: 1 !important;
  margin: var(--space-4) 0;
  background: var(--color-divider) !important;
}

/* ==========================================================================
   Kicker — uppercase h6-style section label
   ========================================================================== */
.kicker {
  display: block;
  font-family: var(--font-heading);
  font-size: 13px;
  line-height: 1.4;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-accent-700);
  margin: 0 0 var(--space-2);
}

/* ==========================================================================
   Buttons — flush-left labels, never centered
   ========================================================================== */
.wp-block-button__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-heading);
  font-weight: var(--font-heading-weight);
  font-size: 14px;
  line-height: 1.2;
  padding: var(--space-2) calc(var(--space-3) * 1.2) !important;
  border: 1px solid transparent;
  text-align: left;
  background: var(--color-neutral-900);
  color: var(--color-bg);
  transition: background 0.25s var(--ease), color 0.25s var(--ease), border-color 0.25s var(--ease);
}
.wp-block-button__link:hover { background: var(--color-neutral-800); color: var(--color-bg); }
.wp-block-button__link:active { background: var(--color-neutral-700); }

.wp-block-button.is-style-outline .wp-block-button__link {
  background: transparent !important;
  color: var(--color-text) !important;
  border-color: var(--color-divider) !important;
}
.wp-block-button.is-style-outline .wp-block-button__link:hover {
  background: color-mix(in srgb, var(--color-text) 7%, transparent) !important;
}

.wp-block-button.btn-ghost .wp-block-button__link {
  background: transparent !important;
  color: var(--color-accent-700) !important;
  border-color: transparent !important;
  padding-inline: var(--space-1) !important;
}
.wp-block-button.btn-ghost .wp-block-button__link:hover {
  background: color-mix(in srgb, var(--color-accent) 10%, transparent) !important;
}

/* ==========================================================================
   Navigation
   ========================================================================== */
.nav {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-3) var(--space-4);
  position: relative;
  z-index: 5;
  background: var(--color-bg);
}
.nav-brand {
  display: flex;
  align-items: center;
  margin-right: auto;
}
.nav-brand img { width: 120px !important; height: auto; display: block; }
.nav-brand figure, .nav-brand a { display: block; line-height: 0; }

.nav .wp-block-navigation {
  font-size: 14px;
}
.nav .wp-block-navigation-item > a,
.nav .wp-block-navigation-item__content {
  color: var(--color-text) !important;
  font-family: var(--font-body);
  font-size: 14px;
  text-decoration: none;
}
.nav .wp-block-navigation-item > a:hover,
.nav .wp-block-navigation-item__content:hover {
  color: var(--color-accent) !important;
}
.nav .wp-block-buttons { margin: 0; }
.nav .wp-block-navigation__container { align-items: center; }
.nav .wp-block-navigation__container > .lang-item > a {
  font-size: 12px;
  letter-spacing: .04em;
  color: var(--color-text) !important;
  opacity: .62;
}
.nav .wp-block-navigation__container > .lang-item.current-lang > a,
.nav .wp-block-navigation__container > .lang-item > a:hover {
  opacity: 1;
}
.nav .wp-block-navigation__container > .lang-item.current-lang > a { font-weight: 600; }
.nav .nav-cta .wp-block-button__link {
  padding: 10px 14px !important;
  background: var(--color-accent);
  color: var(--color-neutral-100);
}
.nav .nav-cta .wp-block-button__link:hover {
  background: var(--color-accent-700);
  color: var(--color-neutral-100);
}
.nav .wp-block-navigation__container > .nav-cta-link > a {
  display: inline-block;
  padding: 10px 14px;
  background: var(--color-accent);
  color: var(--color-neutral-100) !important;
  opacity: 1;
}
.nav .wp-block-navigation__container > .nav-cta-link > a:hover {
  background: var(--color-accent-700);
  color: var(--color-neutral-100) !important;
}

/* ==========================================================================
   Cards
   ========================================================================== */
.card {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-4);
  background: var(--color-surface);
  height: auto;
  min-height: 0;
}
.card-kicker {
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-accent-700);
  margin: 0;
}
.card-collection-label { margin: 0; font-size: 10px; }
.card-title {
  font-family: var(--font-heading);
  font-weight: var(--font-heading-weight);
  font-size: 20px;
  line-height: 1.2;
  margin: 0;
}
.card-body {
  margin: 0;
  font-size: 14px;
  color: color-mix(in srgb, var(--color-text) 80%, transparent);
  flex: initial;
}

/* Equal-height card columns */
.equal-cards > .wp-block-column {
  display: flex;
  flex-direction: column;
  flex-grow: 0;
}
.equal-cards > .wp-block-column > .wp-block-group {
  display: flex;
  flex-direction: column;
  flex-grow: 0;
}
.equal-cards { align-items: start; }
/* Crop every card photo to the same ratio so mixed portrait/landscape
   source photography still reads as one even row */
.equal-cards figure.wp-block-image,
.equal-cards .wp-block-post-featured-image {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  margin: 0;
}
.equal-cards figure.wp-block-image img,
.equal-cards .wp-block-post-featured-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Réalisations archive — query loop grid of project cards */
.wp-block-post-template.is-layout-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  gap: var(--space-6) var(--space-6);
}
.wp-block-post-template.is-layout-grid > li {
  list-style: none;
}
.archive-intro {
  max-width: 58ch;
  margin: var(--space-4) 0 0;
  color: color-mix(in srgb, var(--color-text) 72%, transparent);
}
.taxonomy-title { margin: 0; }
.card-link-wrap { height: 100%; display: flex; flex-direction: column; }
.card-link-wrap .wp-block-post-featured-image a { display: block; }
.card-title a, .card-title a:hover { color: inherit; }
.card-link-wrap:hover .wp-block-post-featured-image img { filter: grayscale(0); }

.portfolio-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: var(--space-5);
}
.portfolio-filters-en { display: none; }
html[lang^="en"] .portfolio-filters-fr { display: none; }
html[lang^="en"] .portfolio-filters-en { display: flex; }
.portfolio-filter {
  display: inline-flex;
  align-items: center;
  min-height: 42px;
  padding: 0 16px;
  border: 1px solid var(--color-divider);
  color: var(--color-text);
  text-decoration: none;
  font-size: 14px;
  transition: background-color .18s ease, color .18s ease, border-color .18s ease;
}
.portfolio-filter:hover,
.portfolio-selection-projects .portfolio-filter-projects,
body:not(.portfolio-selection-projects) .portfolio-filter-realisations {
  border-color: var(--color-text);
  background: var(--color-text);
  color: #fff;
}
.portfolio-filter:focus-visible,
.nav .wp-block-navigation-item__content:focus-visible {
  outline: 2px solid var(--color-text) !important;
  outline-offset: 4px;
}
.client-portal { max-width: 760px; }
.client-access-note {
  max-width: 56ch;
  color: var(--color-neutral-600);
}
.client-portal form.post-password-form {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: 12px;
  margin: var(--space-6) 0;
}
.client-portal .post-password-form label { display: grid; gap: 8px; }
.client-portal .post-password-form input[type="password"] {
  min-height: 44px;
  padding: 8px 12px;
  border: 1px solid var(--color-divider);
  font: inherit;
}
.client-portal .post-password-form input[type="submit"] {
  min-height: 44px;
  padding: 0 18px;
  border: 1px solid var(--color-text);
  background: var(--color-text);
  color: #fff;
  font: inherit;
  cursor: pointer;
}

/* ==========================================================================
   Numbered feature rows — number / title / copy, ruled between rows
   ========================================================================== */
.feature {
  display: grid;
  grid-template-columns: minmax(56px, 110px) minmax(0, 320px) minmax(0, 1fr);
  gap: var(--space-4) var(--space-6);
  align-items: baseline;
  padding: var(--space-6) 0;
}
.feature + .feature {
  border-top: 2px solid var(--color-divider);
}
.f-num {
  position: relative;
  font-family: var(--font-heading);
  font-weight: var(--font-heading-weight);
  font-size: 15px;
  color: var(--color-text);
  margin: 0;
  padding-left: var(--space-4);
}
.f-num::before {
  content: "";
  position: absolute;
  left: 0;
  top: 6px;
  width: 10px;
  height: 10px;
  background: var(--color-accent);
}
.f-title {
  font-family: var(--font-heading);
  font-weight: var(--font-heading-weight);
  font-size: 20px;
  letter-spacing: -0.01em;
  margin: 0;
}
.f-copy {
  font-size: 15px;
  line-height: 1.55;
  margin: 0;
  color: color-mix(in srgb, var(--color-text) 78%, transparent);
  max-width: 52ch;
}
@media (max-width: 880px) {
  .feature { grid-template-columns: 1fr; gap: var(--space-2); }
}

/* ==========================================================================
   Split — grayscale figure + copy
   ========================================================================== */
.split {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: var(--space-6) var(--space-8);
  align-items: center;
}
.split-figure { margin: 0; }
.split-figure img { width: 100%; height: auto; display: block; }
@media (max-width: 720px) {
  .split { grid-template-columns: 1fr; }
  .split-figure { order: -1; }
}

/* ==========================================================================
   Hero — full-bleed photo with the intro copy overlaid as a flat card
   ========================================================================== */
.hero-figure {
  position: relative;
  width: 100%;
  height: clamp(430px, 68vh, 760px);
  overflow: hidden;
  background: var(--color-neutral-900);
}
.hero-figure::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(90deg, rgba(22, 25, 24, 0.48), transparent 68%);
}
.hero-figure.project-hero::after { background: none; }
.hero-bg {
  position: absolute;
  inset: 0;
  margin: 0;
  width: 100% !important;
  max-width: none !important;
  height: 100%;
}
.hero-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
  display: block;
  animation: hero-zoom 12s var(--ease) forwards;
}
@keyframes hero-zoom {
  from { transform: scale(1); }
  to { transform: scale(1.06); }
}
.hero-copy {
  position: absolute;
  left: clamp(20px, 6vw, var(--wp--preset--spacing--40, 64px));
  bottom: clamp(20px, 6vw, var(--wp--preset--spacing--50, 72px));
  width: auto !important;
  max-width: 650px !important;
  background: rgba(245, 242, 237, 0.93);
  border-left: 4px solid var(--color-accent);
  padding: clamp(24px, 4vw, 48px);
  z-index: 1;
}
.hero-copy h1 {
  max-width: 12ch;
  margin: 0;
  font-size: clamp(40px, 5.6vw, 78px);
  line-height: 0.98;
  letter-spacing: -0.04em;
}
.hero-copy .hero-lead {
  max-width: 52ch;
  margin: 20px 0 0;
  font-size: clamp(16px, 1.5vw, 20px);
  line-height: 1.45;
}
.hero-copy .wp-block-buttons { margin-top: 24px; }
.hero-copy .wp-block-button__link { font-size: 15px; padding: 13px 17px !important; }

/* Three services: a clear entry point before the process section. */
.service-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-6);
}
.service-card {
  height: 100%;
  padding: clamp(20px, 3vw, 32px);
  border-top: 4px solid var(--color-accent);
  background: var(--color-surface);
}
.service-card h3 { margin: 0; font-size: clamp(22px, 2.2vw, 32px); }
.service-card p { margin: 16px 0 0; max-width: 36ch; }
@media (max-width: 760px) {
  .service-grid { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .hero-figure { height: 74vh; }
  .hero-copy {
    left: var(--space-3);
    right: var(--space-3);
    bottom: var(--space-3);
    max-width: none;
    padding: var(--space-4);
  }
}

/* ==========================================================================
   Project gallery — two-column grid of grayscale-hover photos
   ========================================================================== */
.project-gallery {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-3);
}
.project-gallery figure { margin: 0; aspect-ratio: 4 / 3; overflow: hidden; background: #f3f3f3; }
.project-gallery .project-lightbox-trigger { display: block; width: 100%; height: 100%; }
.project-gallery img { width: 100%; height: 100%; object-fit: cover; display: block; }
.project-gallery .project-lightbox-trigger:focus-visible { outline: 3px solid var(--color-text); outline-offset: -3px; }
@media (max-width: 900px) {
  .project-gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .project-gallery { gap: var(--space-2); }
}
.project-gallery-more { margin-top: var(--space-4); }
.project-gallery-more > summary {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  padding: 12px 16px;
  border: 1px solid var(--color-divider);
  color: var(--color-text);
  font-size: 14px;
  line-height: 1.4;
  cursor: pointer;
  list-style: none;
}
.project-gallery-more > summary::-webkit-details-marker { display: none; }
.project-gallery-more > summary::marker { content: ""; }
.project-gallery-more > summary::after { content: "+"; font-size: 20px; line-height: 1; }
.project-gallery-more[open] > summary::after { content: "−"; }
.project-gallery-more > summary:hover { border-color: var(--color-text); }
.project-gallery-more > summary:focus-visible { outline: 3px solid var(--color-text); outline-offset: 3px; }
.project-gallery-extra { margin-top: var(--space-3); }
.project-summary {
  max-width: 60ch;
  margin: 18px 0 0;
  color: var(--color-neutral-600);
  font-size: clamp(16px, 1.5vw, 20px);
  line-height: 1.55;
}
.project-collection-label { margin: 0 0 12px; }
.project-lightbox {
  width: min(96vw, 1600px);
  max-width: 96vw;
  max-height: 94vh;
  padding: 54px 20px 20px;
  border: 0;
  background: #111;
  color: #fff;
}
.project-lightbox::backdrop { background: rgb(0 0 0 / 88%); }
.project-lightbox img { display: block; max-width: 100%; max-height: calc(94vh - 74px); width: auto; height: auto; margin: auto; object-fit: contain; }
.project-lightbox-close {
  position: absolute;
  top: 12px;
  right: 16px;
  min-height: 40px;
  padding: 0 14px;
  border: 1px solid #888;
  background: #111;
  color: #fff;
  font: inherit;
  cursor: pointer;
}
.project-lightbox-close:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

/* ==========================================================================
   Close band — ink on ground between two 8px accent rules, one big moment
   ========================================================================== */
.close {
  border-top: 2px solid var(--color-divider);
  border-bottom: 2px solid var(--color-divider);
  background: var(--color-bg);
}
.close h2, .close h3 {
  font-size: clamp(28px, 4vw, 42px);
  letter-spacing: -0.015em;
  margin: 0;
}
.close .wp-block-buttons { margin-top: var(--space-4); }

/* ==========================================================================
   Team / atelier avatar placeholder — flat monochrome initials block
   ========================================================================== */
.avatar-block {
  width: 88px;
  height: 88px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-surface);
  margin-bottom: var(--space-3);
}
.avatar-block p {
  font-family: var(--font-heading);
  font-weight: var(--font-heading-weight);
  font-size: 28px;
  color: var(--color-text);
  margin: 0;
}

/* ==========================================================================
   Motion — restrained: a simple fade/rise, nothing playful
   ========================================================================== */
@keyframes fade-up {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: translateY(0); }
}
.fade-up {
  opacity: 0;
  animation: fade-up 0.7s var(--ease) 0.1s forwards;
}
.animate-on-scroll {
  opacity: 1;
  transform: none;
  transition: opacity 0.6s var(--ease), transform 0.6s var(--ease);
}
.has-js .animate-on-scroll {
  opacity: 0;
  transform: translateY(16px);
}
.has-js .animate-on-scroll.is-visible {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .animate-on-scroll,
  .fade-up {
    opacity: 1 !important;
    transform: none !important;
  }
}

/* === Editor: keep animated content visible while editing === */
.editor-styles-wrapper .fade-up,
.editor-styles-wrapper .animate-on-scroll {
  opacity: 1 !important;
  transform: none !important;
  animation: none !important;
  transition: none !important;
}

@media (max-width: 640px) {
  .nav-brand img { width: 100px !important; }
  .nav { padding: var(--space-4); }
  .feature { padding: var(--space-4) 0; }
  .hero-figure { height: clamp(430px, 72vh, 650px); }
  .hero-figure::after { background: linear-gradient(180deg, rgba(22, 25, 24, 0.18), rgba(22, 25, 24, 0.48)); }
}

/* Reference direction: quiet, editorial, image-led, and responsive. */
body { background: #fff; }
html { scroll-padding-top: 78px; }
header.wp-block-template-part { position: sticky; top: 0; z-index: 50; }
.nav {
  padding: 18px clamp(20px, 4vw, 64px);
}
.nav-brand img { width: 112px !important; }
html[lang^="en"] .nav-cta-fr,
html:not([lang^="en"]) .nav-cta-en,
html[lang^="en"] .footer-contact-fr,
html:not([lang^="en"]) .footer-contact-en { display: none !important; }
.kicker, .card-kicker { color: #737373; }
.card {
  padding: 16px 0 0;
  background: transparent;
}
.card-kicker { font-size: 11px; letter-spacing: .08em; }
.card-title { font-size: clamp(19px, 1.7vw, 24px); }
.card-body { line-height: 1.55; }
.equal-cards figure.wp-block-image,
.equal-cards .wp-block-post-featured-image { aspect-ratio: 4 / 3; }
.wp-block-post-template.is-layout-grid { column-gap: clamp(16px, 2.2vw, 32px); row-gap: 40px; }
.service-grid { gap: clamp(20px, 3vw, 48px); }
.service-card {
  padding: 20px 0 0;
  border-top: 1px solid var(--color-divider);
  background: transparent;
}
.service-grid > .service-card {
  /* Gutenberg's flow block-gap adds a top margin to cards 2 and 3 inside this grid. */
  margin-block-start: 0 !important;
}
.service-card h3 { font-size: clamp(21px, 2vw, 28px); }
.feature + .feature { border-top-width: 1px; }
.f-num { padding-left: 0; color: #737373; }
.f-num::before { display: none; }
.close { border-top-width: 1px; border-bottom-width: 1px; }
.home-intro {
  padding: clamp(48px, 8vw, 112px) 0 clamp(28px, 4vw, 52px);
  max-width: 100%;
}
.home-intro .kicker { margin-bottom: 16px; }
.home-intro .hero-title {
  max-width: 100%;
  margin: 0;
  font-size: clamp(44px, 4vw, 68px);
  line-height: .98;
  letter-spacing: -.055em;
  font-weight: 400;
}
.home-intro .hero-lead {
  max-width: 48ch;
  margin: 20px 0 0;
  color: #555;
  font-size: clamp(16px, 1.5vw, 20px);
  line-height: 1.55;
}
.home-intro .wp-block-buttons { margin-top: 24px; }
.home-hero-image { margin: 0 auto; }
.home-hero-image img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 8.5;
  object-fit: cover;
  object-position: center 52%;
}
.hero-figure.project-hero {
  width: min(100% - 40px, 1440px);
  height: auto;
  aspect-ratio: 16 / 8.2;
  margin-inline: auto;
  background: #f5f5f5;
}
.project-hero .hero-bg { position: absolute; }
.project-hero .hero-bg img { animation: none; }
.fade-up:has(> .alignwide > .wp-block-post-title) { padding-block: clamp(40px, 6vw, 80px) !important; }
.fade-up:has(> .alignwide > .wp-block-post-title) .wp-block-post-title {
  max-width: 14ch;
  margin: 10px 0 0;
  font-size: clamp(42px, 7vw, 96px);
  line-height: .98;
  letter-spacing: -.055em;
  font-weight: 400;
  text-transform: uppercase;
}
.project-copy-layout {
  display: grid;
  grid-template-columns: minmax(180px, .75fr) minmax(0, 1.25fr);
  gap: 24px clamp(32px, 8vw, 120px);
  align-items: start;
}
.project-approach-title { margin: 0; font-size: clamp(25px, 3vw, 40px); letter-spacing: -.035em; }
.project-copy-layout > .wp-block-post-content { display: contents; }
.project-copy-layout > .wp-block-post-content > p:first-child {
  grid-column: 2;
  margin: 0;
  max-width: 58ch;
  color: #555;
  font-size: clamp(16px, 1.55vw, 20px);
  line-height: 1.65;
}
.project-copy-layout .project-gallery {
  grid-column: 1 / -1;
  margin-top: clamp(24px, 4vw, 56px);
}
.project-gallery figure img { transition: transform .45s var(--ease); }
.project-gallery figure:hover img { transform: scale(1.025); }
.project-copy-layout + .alignwide { margin-top: 0; }
@media (max-width: 760px) {
  .home-intro { padding: 44px 16px 28px; }
  .home-intro .hero-title { font-size: clamp(42px, 12vw, 68px); }
  .home-hero-image { width: calc(100% - 32px); }
  .home-hero-image img { aspect-ratio: 4 / 3; }
  .hero-figure.project-hero { width: calc(100% - 32px); aspect-ratio: 4 / 3; }
  .project-copy-layout { grid-template-columns: 1fr; gap: 16px; }
  .project-copy-layout > .wp-block-post-content > p:first-child { grid-column: 1; }
  .project-copy-layout .project-gallery { grid-column: 1; }
}

.contact-intro .alignwide { max-width: 100%; }
.contact-intro .kicker { margin-bottom: 14px; }
.contact-intro h1 {
  max-width: 15ch;
  margin: 0;
  font-size: clamp(42px, 7vw, 88px);
  line-height: .98;
  letter-spacing: -.05em;
  font-weight: 400;
}
.contact-lead {
  max-width: 58ch;
  margin-top: 22px;
  color: #555;
  font-size: clamp(16px, 1.5vw, 20px);
  line-height: 1.6;
}
.contact-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(220px, .65fr);
  gap: clamp(36px, 8vw, 120px);
}
.contact-primary h2 {
  max-width: 16ch;
  margin: 0;
  font-size: clamp(28px, 4vw, 48px);
  letter-spacing: -.04em;
}
.contact-primary > p:not(.kicker) {
  max-width: 54ch;
  margin-top: 20px;
  color: #555;
  line-height: 1.65;
}
.contact-primary .wp-block-buttons { margin-top: 28px; }
.contact-meta {
  border-left: 1px solid var(--color-divider);
  padding-left: clamp(22px, 3vw, 44px);
}
.contact-meta-item + .contact-meta-item {
  margin-top: 28px;
  padding-top: 22px;
  border-top: 1px solid var(--color-divider);
}
.contact-meta-item .kicker { margin-bottom: 8px; }
.contact-meta-item p:not(.kicker) { margin: 0; line-height: 1.65; }
.contact-meta-item a { text-underline-offset: 3px; }
@media (max-width: 760px) {
  .contact-layout { grid-template-columns: 1fr; gap: 40px; }
  .contact-meta { border-left: 0; border-top: 1px solid var(--color-divider); padding: 28px 0 0; }
}

/* ========================================================================
   Blog — quiet editorial index and long-form reading layout
   ======================================================================== */
.blog-intro .alignwide,
.blog-article-intro .alignwide { max-width: 100%; }
.blog-page-title,
.blog-article-title {
  max-width: 14ch;
  margin: 0;
  font-size: clamp(44px, 7vw, 92px);
  line-height: .98;
  letter-spacing: -.055em;
  font-weight: 400;
  text-transform: uppercase;
}
.blog-lead,
.blog-article-lede {
  max-width: 56ch;
  margin: 22px 0 0;
  color: #555;
  font-size: clamp(16px, 1.5vw, 20px);
  line-height: 1.6;
}
.blog-list { margin-top: 0; }
.blog-query > .wp-block-post-template {
  column-gap: clamp(28px, 5vw, 80px);
  row-gap: clamp(40px, 6vw, 72px);
}
.blog-card {
  height: 100%;
  padding-top: 18px;
  border-top: 1px solid var(--color-divider);
}
.blog-card-meta,
.blog-article-meta {
  margin: 0 0 14px;
  color: #737373;
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.blog-card-title {
  margin: 0;
  max-width: 18ch;
  font-size: clamp(25px, 3vw, 42px);
  line-height: 1.02;
  letter-spacing: -.035em;
  font-weight: 400;
}
.blog-card-title a,
.blog-card-title a:hover { color: inherit; text-decoration: none; }
.blog-card-excerpt {
  max-width: 54ch;
  margin: 20px 0 0;
  color: #555;
  line-height: 1.65;
}
.blog-card-link {
  display: inline-block;
  margin-top: 24px;
  color: var(--color-text);
  font-size: 14px;
  text-underline-offset: 4px;
}
.blog-article-title { max-width: 13ch; }
.blog-article-body > .alignwide { width: 100%; }
.blog-article-body .wp-block-post-content {
  max-width: 760px;
  margin-inline: auto;
  font-size: 17px;
  line-height: 1.7;
}
.blog-article-body .wp-block-post-content > p:first-child { margin-top: 0; }
.blog-article-body .wp-block-post-content h2 {
  margin-top: clamp(44px, 7vw, 84px);
  margin-bottom: 18px;
  font-size: clamp(28px, 3.8vw, 48px);
  line-height: 1.02;
  letter-spacing: -.04em;
  font-weight: 400;
}
.blog-article-body .wp-block-post-content h3 {
  margin-top: 36px;
  margin-bottom: 12px;
  font-size: 23px;
  line-height: 1.15;
}
.blog-article-body .wp-block-post-content p { max-width: 68ch; }
.blog-article-body .wp-block-post-content ul {
  max-width: 66ch;
  padding-left: 1.25em;
}
.blog-article-body .wp-block-post-content li + li { margin-top: 5px; }
.density-note {
  margin: 36px 0;
  padding: 22px 24px;
  border-left: 3px solid var(--color-accent);
  background: var(--color-bg);
}
.density-note p { margin: 0; }
.density-note .kicker { margin-bottom: 8px; }
.density-table { margin: 32px 0; }
.density-table table {
  border-collapse: collapse;
  width: 100%;
  font-size: 15px;
  line-height: 1.45;
}
.density-table th,
.density-table td {
  padding: 13px 14px;
  border: 1px solid var(--color-divider);
  text-align: left;
  vertical-align: top;
}
.density-table th {
  background: var(--color-bg);
  font-weight: 600;
}
.blog-article-body .wp-block-post-content .hr { margin: 36px 0; }
@media (max-width: 640px) {
  .blog-page-title,
  .blog-article-title { font-size: clamp(40px, 14vw, 68px); }
  .blog-article-body .wp-block-post-content { font-size: 16px; }
  .density-table { overflow-x: auto; }
  .density-table table { min-width: 560px; }
}

/* Use the existing overlay menu before the full navigation begins to wrap. */
@media (min-width: 600px) and (max-width: 640px) {
  .nav .wp-block-navigation__responsive-container-open:not(.always-shown) {
    display: flex !important;
  }
  .nav .wp-block-navigation__responsive-container:not(.is-menu-open) {
    display: none !important;
  }
}

/* ==========================================================================
   Header menu, 2026-09-23: five items, current-page underline,
   compact FR · EN after the Contact button, hairline once scrolled.
   ========================================================================== */
.nav-brand img { width: 136px !important; }
.nav { transition: box-shadow .2s ease; }
.nav.is-scrolled { box-shadow: 0 1px 0 rgba(23, 23, 23, .12); }
.nav .wp-block-navigation-item.is-current-page > a {
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 6px;
}
.nav .wp-block-navigation__container > .lang-item > a {
  font-size: 11px;
  letter-spacing: .08em;
}
.nav .wp-block-navigation__container > .lang-item.current-lang > a { font-weight: 500; }
.nav .wp-block-navigation__container > .lang-item-first { margin-left: 8px; }
.nav .wp-block-navigation__container > .lang-item + .lang-item { margin-left: -16px; }
.nav .wp-block-navigation__container > .lang-item + .lang-item::before {
  content: "·";
  margin: 0 6px;
  opacity: .62;
}
.nav .wp-block-navigation__responsive-container-open,
.nav .wp-block-navigation__responsive-container-close {
  width: 44px;
  height: 44px;
  align-items: center;
  justify-content: center;
}
.nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item > a { font-size: 20px; }
.nav .wp-block-navigation__responsive-container.is-menu-open .lang-item > a { font-size: 13px; }
.nav .wp-block-navigation__responsive-container.is-menu-open { padding: 16px 24px; }
/* Menu items one per row, FR · EN sharing the last row. */
.nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-end;
  row-gap: 20px;
}
.nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item:not(.lang-item) {
  flex-basis: 100%;
  justify-content: flex-end;
}
.nav .wp-block-navigation__responsive-container.is-menu-open .nav-cta-link > a { padding: 12px 18px !important; }
.nav .wp-block-navigation__responsive-container.is-menu-open .lang-item-first { margin-left: 0; margin-top: 12px; }
.nav .wp-block-navigation__responsive-container.is-menu-open .lang-item + .lang-item { margin-left: -16px; margin-top: 12px; }
@media (max-width: 640px) {
  .nav-brand img { width: 116px !important; }
}
.nav .wp-block-navigation__responsive-container.is-menu-open .lang-item { flex-direction: row; align-items: center; }

/* ==========================================================================
   Project page built in Divi's Theme Builder (2026-09-24)
   The Divi layout's sections carry the class "merlo-project"; the parts come
   from the [merlo_project_*] shortcodes in functions.php. Divi's own reset
   rules are scoped under .et-db #et-boc .et-l, hence the long selectors.
   ========================================================================== */
.et-db #et-boc .et-l .merlo-project { font-family: var(--font-body); color: var(--color-text); }
.et-db #et-boc .et-l .merlo-project p { padding-bottom: 0; }
.et-db #et-boc .et-l .merlo-project h1,
.et-db #et-boc .et-l .merlo-project .et_pb_post_title h1 {
  margin: 10px 0 0;
  padding: 0;
  font-family: var(--font-heading);
  font-size: clamp(42px, 7vw, 96px);
  font-weight: 400;
  line-height: .98;
  letter-spacing: -.055em;
  text-transform: uppercase;
  color: var(--color-text);
}
.et-db #et-boc .et-l .merlo-project .project-breadcrumb { margin: 0; }
.et-db #et-boc .et-l .merlo-project .project-breadcrumb a { color: inherit; text-transform: inherit; letter-spacing: inherit; text-decoration: none; border-bottom: 1px solid var(--color-divider); }
.et-db #et-boc .et-l .merlo-project .project-breadcrumb a:hover { border-color: currentColor; }
.et-db #et-boc .et-l .merlo-project .project-summary { max-width: 52ch; margin: 0; }
.et-db #et-boc .et-l .merlo-project .project-facts {
  display: grid;
  margin: 28px 0 0;
  border-top: 1px solid var(--color-divider);
}
.et-db #et-boc .et-l .merlo-project .project-facts > div {
  display: grid;
  grid-template-columns: minmax(96px, 1fr) 2fr;
  gap: 16px;
  padding: 11px 0;
  border-bottom: 1px solid var(--color-divider);
  font-size: 15px;
  line-height: 1.45;
}
.et-db #et-boc .et-l .merlo-project .project-facts dt {
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #737373;
  padding-top: 2px;
}
.et-db #et-boc .et-l .merlo-project .project-facts dd { margin: 0; }
.et-db #et-boc .et-l .merlo-project .project-hero-image { margin: 0; }
.et-db #et-boc .et-l .merlo-project .project-hero-image img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 8.2;
  object-fit: cover;
  background: #f5f5f5;
}
.et-db #et-boc .et-l .merlo-project .project-section-title {
  margin: 0 0 clamp(20px, 3vw, 36px);
  padding: 0;
  font-family: var(--font-heading);
  font-size: clamp(25px, 3vw, 40px);
  font-weight: var(--font-heading-weight);
  letter-spacing: -.035em;
  line-height: 1.1;
}
.et-db #et-boc .et-l .merlo-project .project-photo-count {
  margin-left: 10px;
  font-size: 13px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #737373;
  vertical-align: middle;
}
.et-db #et-boc .et-l .merlo-project .project-gallery figure { margin: 0; }
.et-db #et-boc .et-l .merlo-project .project-related-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 40px clamp(16px, 2.2vw, 32px);
}
.et-db #et-boc .et-l .merlo-project .project-related-card { display: flex; flex-direction: column; gap: 8px; color: inherit; text-decoration: none; }
.et-db #et-boc .et-l .merlo-project .project-related-image { display: block; aspect-ratio: 4 / 3; overflow: hidden; background: #f3f3f3; margin-bottom: 8px; }
.et-db #et-boc .et-l .merlo-project .project-related-image img { width: 100%; height: 100%; object-fit: cover; transition: transform .45s var(--ease); }
.et-db #et-boc .et-l .merlo-project .project-related-card:hover img { transform: scale(1.025); }
.et-db #et-boc .et-l .merlo-project .project-back-link { margin: 0; font-size: 14px; }
.et-db #et-boc .et-l .merlo-project .project-back-link a { color: inherit; }
.et-db #et-boc .et-l .merlo-project .close-title { margin: 0; padding: 0; font-size: clamp(28px, 4vw, 42px); letter-spacing: -.015em; }
.et-db #et-boc .et-l .merlo-project .wp-block-buttons { margin-top: var(--space-4); }
.et-db #et-boc .et-l .merlo-project .wp-block-button__link { color: var(--color-bg); background: var(--color-text); text-decoration: none; }
@media (max-width: 980px) {
  .et-db #et-boc .et-l .merlo-project .project-related-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .et-db #et-boc .et-l .merlo-project .project-hero-image img { aspect-ratio: 4 / 3; }
  .et-db #et-boc .et-l .merlo-project .project-related-grid { grid-template-columns: 1fr; }
}

/* Photo viewer: previous / next and counter */
.project-lightbox-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 48px;
  height: 64px;
  border: 1px solid #555;
  background: rgb(17 17 17 / 70%);
  color: #fff;
  font: 32px/1 var(--font-body);
  cursor: pointer;
}
.project-lightbox-prev { left: 12px; }
.project-lightbox-next { right: 12px; }
.project-lightbox-nav:hover { border-color: #fff; }
.project-lightbox-nav:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.project-lightbox-counter {
  position: absolute;
  top: 20px;
  left: 20px;
  margin: 0;
  font-size: 13px;
  letter-spacing: .08em;
  color: #bbb;
}
@media (max-width: 640px) {
  .project-lightbox-nav { top: auto; bottom: 12px; transform: none; }
}