/*
 * Stijl A — Stille vakmanschap
 * Loaded site-wide AFTER theme-extras.css.
 * Primitives (.rl-overline, .rl-lead, .rl-quiet-cta, .word) are unscoped and
 * usable on any page. Homepage-specific rules stay scoped under body.home.
 */

/* ========================================================================
 * Tokens — site-wide
 * ======================================================================== */
:root {
  --rl-line: #E5DFD7;
  --rl-cream: #FAF8F5;
  --rl-charcoal: #1A1A1A;
  --rl-copper: #C26E3A;
  --rl-body-soft: #555;
}

/* ========================================================================
 * Header — force the "scrolled" look from the very top on the homepage.
 * Stijl A has no dark cover hero, so white-on-transparent (the default)
 * would be invisible. We DON'T touch theme-extras.css or header-scroll.js
 * — we just override the home-page header to always look "scrolled".
 * Other pages (with their dark covers) keep the original state machine.
 * ======================================================================== */
body.home .site-header,
body.home .wp-block-template-part[data-slug="header"] > div {
  background: rgba(250, 248, 245, 0.92);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 1px 0 var(--rl-line);
}
/* Logo: hide white version, show dark version always */
body.home .logo-hero { display: none; }
body.home .logo-scrolled { display: block; }
/* Nav links: dark from the top (override theme-extras !important rule) */
body.home .nav-links a,
body.home .nav-links .wp-block-navigation-item__content { color: #3D3D3D !important; }
body.home .nav-links a:hover,
body.home .nav-links .wp-block-navigation-item__content:hover { color: var(--rl-copper) !important; }
/* Phone number: dark from the top */
body.home .nav-phone,
body.home .nav-phone a { color: var(--rl-charcoal); }
/* Slight elevation increase when actually scrolled (subtle, not a state flip) */
body.home .site-header.scrolled,
body.home .wp-block-template-part[data-slug="header"].scrolled > div {
  background: rgba(250, 248, 245, 0.96);
  box-shadow: 0 1px 24px rgba(80, 60, 40, 0.08);
}

/* Hide the loud copper "Offerte aanvragen" button + the phone block in the
   header for ALL Stijl A pages. Stijl A favours one quiet contact CTA at the
   bottom (or via the standard nav) — the loud copper button is too much. */
body.home .site-header .wp-block-buttons,
body.home .site-header .wp-block-button,
body.home .site-header .nav-phone,
body.stille-page .site-header .wp-block-buttons,
body.stille-page .site-header .wp-block-button,
body.stille-page .site-header .nav-phone {
  display: none !important;
}

/* ========================================================================
 * Reveal primitives — SITE-WIDE
 * On non-homepage pages (no IntersectionObserver), show immediately.
 * ======================================================================== */
.word {
  display: inline-block;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.9s ease, transform 0.9s cubic-bezier(.2,.7,.2,1);
}
.visible .word,
body:not(.home) .word { opacity: 1; transform: translateY(0); }

.rl-overline {
  font-size: 10px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--rl-copper);
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 40px;
}
.rl-overline::before {
  content: '';
  display: block;
  width: 0;
  height: 1px;
  background: var(--rl-copper);
  transition: width 1.4s cubic-bezier(.2,.7,.2,1) 0.2s;
}
.visible .rl-overline::before,
body:not(.home) .rl-overline::before { width: 48px; }

.rl-lead {
  font-size: 17px;
  line-height: 1.65;
  color: var(--rl-body-soft);
  max-width: 56ch;
  margin-top: 32px;
  opacity: 0;
  transition: opacity 1.4s ease 0.8s;
}
.visible .rl-lead,
body:not(.home) .rl-lead { opacity: 1; }

.rl-quiet-cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 0 0 4px 0;
  color: var(--rl-charcoal);
  text-decoration: none;
  font-size: 13px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  border-bottom: 1px solid var(--rl-charcoal);
  transition: gap 0.5s cubic-bezier(.2,.7,.2,1), color 0.3s, border-color 0.3s;
}
.rl-quiet-cta:hover {
  gap: 18px;
  color: var(--rl-copper);
  border-color: var(--rl-copper);
}

/* ========================================================================
 * Site-wide Stijl A page-hero (used by hero-page.php and archive heros)
 * ======================================================================== */
.page-hero-stille {
  background: var(--rl-cream);
  padding: 12rem 3rem 6rem;
  border-bottom: 1px solid var(--rl-line);
}
.page-hero-stille__inner {
  max-width: 1080px;
  margin: 0 auto;
}
.page-hero-stille__title {
  font-family: var(--wp--preset--font-family--playfair, 'Playfair Display', serif);
  font-weight: 400;
  color: var(--rl-charcoal);
  font-size: clamp(36px, 4.6vw, 60px);
  line-height: 1.15;
  letter-spacing: -0.01em;
  max-width: 18ch;
  margin: 0;
}
.page-hero-stille__sub {
  font-size: 17px;
  line-height: 1.65;
  color: var(--rl-body-soft);
  max-width: 56ch;
  margin-top: 28px;
}
/* 2-column variant with photo on the right */
.page-hero-stille.has-photo { padding: 9rem 3rem 5rem; }
.page-hero-stille.has-photo .page-hero-stille__split {
  display: grid;
  grid-template-columns: 6fr 5fr;
  gap: 80px;
  align-items: center;
  max-width: 1180px;
  margin: 0 auto;
}
.page-hero-stille__photo {
  aspect-ratio: 5 / 6;
  overflow: hidden;
}
.page-hero-stille__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: saturate(0.95);
}

/* The Over Ons photo is portrait (800x1200) with the lift cabin low in frame,
   so the mobile 16:10 crop centred on ceiling and cut the cabin off. Bias the
   crop downwards there. Keyed to the filename rather than a page id so the
   rule lapses by itself if the photo is ever swapped. */
@media (max-width: 700px) {
  .page-hero-stille__photo img[src*="atrium-glas-interieur"] {
    object-position: center 70%;
  }
}
@media (max-width: 700px) {
  .page-hero-stille { padding: 8rem 1.5rem 4rem; }
  /* .has-photo sets 3rem side padding at a higher specificity than the line
     above, so photo heroes kept a 48px inset on phones. */
  .page-hero-stille.has-photo { padding: 8rem 1.5rem 4rem; }
  .page-hero-stille.has-photo .page-hero-stille__split { grid-template-columns: 1fr; gap: 40px; }
  .page-hero-stille__photo { aspect-ratio: 16 / 10; }

  /* The hero owns its side padding. theme-extras.css also hands a root-padding
     gutter to every child of an alignfull group below 880px — harmless while
     the root padding was unset, but now that theme.json defines it that gutter
     stacked on top of the hero's own (and __copy's has-global-padding), pushing
     the title to a 64px inset and wrapping it over four lines. */
  .page-hero-stille__inner,
  .page-hero-stille__copy {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  /* 18ch keeps the display title to a short measure on desktop; on a phone it
     just squeezes it into a narrow column with space to spare. */
  .page-hero-stille__title { max-width: none; }
}

/* Page body linkt links uit met de hero (zelfde 1080px-kader, 3rem inset).
 * Tekstregels blijven op leesbare breedte (62ch), links uitgelijnd. */
.rl-page-body {
  max-width: 1180px !important;      /* zelfde kader als de has-photo hero __split */
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  box-sizing: border-box;
}
.rl-page-body > * {
  max-width: 64ch;                   /* leesbare regelbreedte, links uitgelijnd */
  margin-left: 0 !important;
  margin-right: auto !important;
}
@media (max-width: 1228px) {         /* 1180 + wat lucht: dan wél inset-padding */
  .rl-page-body { padding-left: 3rem !important; padding-right: 3rem !important; }
}
@media (max-width: 700px) {
  .rl-page-body { padding-left: 1.5rem !important; padding-right: 1.5rem !important; }
}

/* ========================================================================
 * Header on non-homepage Stijl A pages — cream, dark text (same as homepage)
 * Triggered when body has .page-hero-stille rendered as the first section.
 * Detect via body class .stille-page (added by hero-page pattern at PHP level).
 * ======================================================================== */
body.stille-page .site-header,
body.stille-page .wp-block-template-part[data-slug="header"] > div {
  background: rgba(250, 248, 245, 0.92);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 1px 0 var(--rl-line);
}
body.stille-page .logo-hero { display: none; }
body.stille-page .logo-scrolled { display: block; }
body.stille-page .nav-links a,
body.stille-page .nav-links .wp-block-navigation-item__content { color: #3D3D3D !important; }
body.stille-page .nav-links a:hover,
body.stille-page .nav-links .wp-block-navigation-item__content:hover { color: var(--rl-copper) !important; }
body.stille-page .nav-phone,
body.stille-page .nav-phone a { color: var(--rl-charcoal); }

/* ========================================================================
 * Mobile menu overlay — header must not trap it.
 * backdrop-filter makes the header a containing block for position:fixed
 * descendants, so WP's full-screen overlay (inset:0) was being clipped to
 * the 88px header box — menu items spilled out behind the page content.
 * WP puts .has-modal-open on <html> while the overlay is open; drop the
 * blur only for that moment so the header design is otherwise untouched.
 * ======================================================================== */
html.has-modal-open .site-header,
html.has-modal-open .wp-block-template-part[data-slug="header"] > div {
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
body.stille-page .site-header.scrolled,
body.stille-page .wp-block-template-part[data-slug="header"].scrolled > div {
  background: rgba(250, 248, 245, 0.96);
  box-shadow: 0 1px 24px rgba(80, 60, 40, 0.08);
}

/* ========================================================================
 * prefers-reduced-motion — respect user preference
 * ======================================================================== */
@media (prefers-reduced-motion: reduce) {
  body.home *, body.home *::before, body.home *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
  body.home .word { opacity: 1 !important; transform: none !important; }
  body.home .rl-overline::before { width: 48px !important; }
  body.home .rl-lead { opacity: 1 !important; }
}

/* ========================================================================
 * Hero section
 * ======================================================================== */
/* Bold beeld-hero — full-bleed installatiefoto + Ken Burns + scrim */
.home-hero {
  position: relative;
  min-height: 88vh;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  background: var(--rl-charcoal);
}
.home-hero__slideshow { position: absolute; inset: 0; }
.home-hero__media {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center 42%;
  opacity: 0;
  transition: opacity 1.8s ease;
  will-change: opacity, transform;
}
.home-hero__media.is-active {
  opacity: 1;
  animation: rl-kenburns 11s ease-out forwards;
}
@keyframes rl-kenburns {
  from { transform: scale(1.04); }
  to   { transform: scale(1.13); }
}
.home-hero__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top,
    rgba(18,16,14,0.88) 0%,
    rgba(18,16,14,0.55) 42%,
    rgba(18,16,14,0.28) 100%);
}
.home-hero__inner {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 3rem 9vh;
}
.home-hero__title {
  font-family: var(--wp--preset--font-family--playfair, 'Playfair Display', serif);
  font-weight: 400;
  color: #fff;
  font-size: clamp(46px, 6.2vw, 88px);
  line-height: 1.04;
  letter-spacing: -0.015em;
  max-width: 15ch;
  margin: 0 0 1.4rem;
  text-shadow: 0 2px 40px rgba(0,0,0,0.28);
}
.home-hero .rl-overline--light { color: #EBB78E; }
.home-hero .rl-overline--light::before { background: #EBB78E; }
.home-hero__lead {
  font-size: 17px;
  line-height: 1.65;
  color: rgba(255,255,255,0.82);
  max-width: 54ch;
  margin: 0;
  opacity: 0;
  transition: opacity 1.4s ease 0.7s;
}
.visible .home-hero__lead { opacity: 1; }
.home-hero__scroll {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 2.4rem;
  color: #fff;
  text-decoration: none;
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  opacity: 0.92;
}
.home-hero__scroll span { transition: transform .4s cubic-bezier(.2,.7,.2,1); }
.home-hero__scroll:hover span { transform: translateY(5px); }
@media (max-width: 700px) {
  .home-hero { min-height: 82vh; }
  .home-hero__inner { padding: 0 1.5rem 11vh; }
}
@media (prefers-reduced-motion: reduce) {
  .home-hero__media { animation: none; }
}

/* ========================================================================
 * Stats grid (sits beneath hero, same cream BG)
 * ======================================================================== */
.home-stats { border-top: 1px solid var(--rl-line); }
.home-stats__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px 32px;
  padding-top: 32px;
}
.home-stats__item { display: flex; flex-direction: column; }
.home-stats__n {
  font-family: var(--wp--preset--font-family--playfair, 'Playfair Display', serif);
  font-weight: 400;
  font-size: 36px;
  color: var(--rl-charcoal);
  line-height: 1;
}
.home-stats__l {
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #888;
  margin-top: 8px;
}
@media (max-width: 700px) {
  .home-stats__grid { grid-template-columns: repeat(2, 1fr); }
}

/* ========================================================================
 * Products — vertical list (replaces grid)
 * ======================================================================== */
.home-products__head { margin-bottom: 40px; }
.home-products__title {
  font-family: var(--wp--preset--font-family--playfair, 'Playfair Display', serif);
  font-weight: 400;
  color: var(--rl-charcoal);
  font-size: clamp(32px, 3.6vw, 48px);
  line-height: 1.15;
  max-width: 18ch;
  margin: 0;
}
.home-product-row {
  display: grid;
  grid-template-columns: 52px 240px 1fr auto;
  gap: 28px;
  align-items: center;
  padding: 22px 0;
  border-bottom: 1px solid var(--rl-line);
  color: var(--rl-charcoal);
  text-decoration: none;
  transition: padding 0.5s cubic-bezier(.2,.7,.2,1);
}
.home-product-row:hover {
  padding-left: 16px;
  padding-right: 16px;
}
.home-product-row__num {
  font-family: var(--wp--preset--font-family--playfair, 'Playfair Display', serif);
  font-style: italic;
  color: var(--rl-copper);
  font-size: 14px;
  align-self: center;
}
.home-product-row__photo {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--rl-cream);
}
.home-product-row__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: saturate(0.92);
  transition: filter 0.6s ease, transform 1.2s cubic-bezier(.2,.7,.15,1);
}
.home-product-row:hover .home-product-row__photo img {
  filter: saturate(1.05);
  transform: scale(1.04);
}
.home-product-row__name {
  font-family: var(--wp--preset--font-family--playfair, 'Playfair Display', serif);
  font-weight: 400;
  font-size: 30px;
  color: inherit;
  margin: 0 0 6px 0;
  transition: color 0.3s;
}
.home-product-row:hover .home-product-row__name { color: var(--rl-copper); }
.home-product-row__specs {
  font-size: 13px;
  color: #888;
}
.home-product-row__arrow {
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: gap 0.5s;
}
.home-product-row:hover .home-product-row__arrow { gap: 18px; }
@media (max-width: 900px) {
  .home-product-row { grid-template-columns: 44px 180px 1fr; gap: 20px; }
  .home-product-row__arrow { grid-column: 1 / -1; justify-self: start; margin-top: 8px; }
}
@media (max-width: 600px) {
  .home-product-row { grid-template-columns: 1fr; gap: 12px; padding: 20px 0; }
  .home-product-row__photo { aspect-ratio: 16 / 9; }
  .home-product-row__num { font-size: 12px; }
  .home-product-row__arrow { grid-column: auto; margin-top: 8px; }
}

/* ========================================================================
 * Featured project
 * ======================================================================== */
.home-project__grid {
  display: grid;
  grid-template-columns: 6fr 5fr;
  gap: 80px;
  align-items: center;
}
.home-project__image {
  aspect-ratio: 4 / 5;
  overflow: hidden;
}
.home-project__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.home-project__title {
  font-family: var(--wp--preset--font-family--playfair, 'Playfair Display', serif);
  font-weight: 400;
  color: var(--rl-charcoal);
  font-size: clamp(28px, 3.4vw, 44px);
  line-height: 1.15;
  max-width: 16ch;
  margin: 0 0 24px 0;
}
.home-project__meta {
  color: #888;
  font-size: 12px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  margin-bottom: 24px;
}
.home-project__body-text {
  color: var(--rl-body-soft);
  max-width: 48ch;
  margin-bottom: 36px;
}
@media (max-width: 900px) {
  .home-project__grid { grid-template-columns: 1fr; gap: 32px; }
  .home-project__image { aspect-ratio: 16 / 10; }
}

/* ========================================================================
 * Projects strip — 4 thumbnails after the featured project
 * ======================================================================== */
.home-projects { border-top: 1px solid var(--rl-line); }
.home-projects__head { margin-bottom: 48px; }
.home-projects__title {
  font-family: var(--wp--preset--font-family--playfair, 'Playfair Display', serif);
  font-weight: 400;
  color: var(--rl-charcoal);
  font-size: clamp(24px, 2.6vw, 32px);
  margin: 0;
}
.home-projects__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  margin-bottom: 48px;
}
.home-projects__card {
  text-decoration: none;
  color: var(--rl-charcoal);
  display: block;
  transition: transform 0.5s cubic-bezier(.2,.7,.2,1);
}
.home-projects__card:hover { transform: translateY(-4px); }
.home-projects__img {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: #2a2a2a;
  margin-bottom: 14px;
}
.home-projects__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: saturate(0.92);
  transition: filter 0.6s ease, transform 1.4s cubic-bezier(.2,.7,.15,1);
}
.home-projects__card:hover .home-projects__img img {
  filter: saturate(1.05);
  transform: scale(1.04);
}
.home-projects__meta {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 10px;
  align-items: baseline;
}
.home-projects__num {
  font-family: var(--wp--preset--font-family--playfair, 'Playfair Display', serif);
  font-style: italic;
  color: var(--rl-copper);
  font-size: 13px;
}
.home-projects__name {
  font-family: var(--wp--preset--font-family--playfair, 'Playfair Display', serif);
  font-weight: 400;
  font-size: 17px;
  color: var(--rl-charcoal);
  transition: color 0.3s;
}
.home-projects__card:hover .home-projects__name { color: var(--rl-copper); }
.home-projects__loc {
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #888;
  text-align: right;
}
.home-projects__cta { padding-top: 16px; }
@media (max-width: 900px) {
  .home-projects__grid { grid-template-columns: 1fr 1fr; gap: 20px; }
}
@media (max-width: 500px) {
  .home-projects__grid { grid-template-columns: 1fr; }
}

/* ========================================================================
 * Process steps (4-col, copper italic numerals)
 * ======================================================================== */
.home-process__title {
  font-family: var(--wp--preset--font-family--playfair, 'Playfair Display', serif);
  font-weight: 400;
  color: var(--rl-charcoal);
  font-size: clamp(32px, 3.6vw, 48px);
  line-height: 1.15;
  max-width: 18ch;
  margin: 0 0 64px 0;
}
.home-process__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 48px;
}
.home-process__num {
  font-family: var(--wp--preset--font-family--playfair, 'Playfair Display', serif);
  font-style: italic;
  color: var(--rl-copper);
  font-size: 14px;
  display: block;
  margin-bottom: 16px;
}
.home-process__name {
  font-family: var(--wp--preset--font-family--playfair, 'Playfair Display', serif);
  font-weight: 400;
  font-size: 22px;
  color: var(--rl-charcoal);
  margin: 0 0 12px 0;
}
.home-process__copy {
  font-size: 14px;
  color: #666;
}
@media (max-width: 900px) { .home-process__grid { grid-template-columns: 1fr 1fr; gap: 40px; } }
@media (max-width: 600px) { .home-process__grid { grid-template-columns: 1fr; } }

/* ========================================================================
 * USPs row (cream, 1px copper top border per item)
 * ======================================================================== */
.home-usps__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 48px;
}
.home-usps__item {
  padding-top: 24px;
  border-top: 1px solid var(--rl-copper);
}
.home-usps__name {
  font-family: var(--wp--preset--font-family--playfair, 'Playfair Display', serif);
  font-weight: 400;
  font-size: 18px;
  color: var(--rl-charcoal);
  margin: 0 0 8px 0;
}
.home-usps__copy { font-size: 13px; color: #888; margin: 0; }
@media (max-width: 900px) { .home-usps__grid { grid-template-columns: 1fr 1fr; gap: 36px; } }
@media (max-width: 600px) { .home-usps__grid { grid-template-columns: 1fr; gap: 28px; } }

/* ========================================================================
 * FAQ — targets .faq-item from existing hardcoded markup
 * ======================================================================== */
.home-faq__title {
  font-family: var(--wp--preset--font-family--playfair, 'Playfair Display', serif);
  font-weight: 400;
  color: var(--rl-charcoal);
  font-size: clamp(32px, 3.6vw, 48px);
  line-height: 1.15;
  max-width: 22ch;
  margin: 0 0 64px 0;
}
.home-faq .faq-list { list-style: none; padding: 0; margin: 0; }
.home-faq .faq-item {
  border-bottom: 1px solid var(--rl-line);
  padding: 24px 0;
}
.home-faq .faq-item summary {
  font-family: var(--wp--preset--font-family--playfair, 'Playfair Display', serif);
  font-size: 22px;
  color: var(--rl-charcoal);
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  gap: 24px;
  transition: color 0.3s;
}
.home-faq .faq-item summary::-webkit-details-marker { display: none; }
.home-faq .faq-item summary:hover { color: var(--rl-copper); }
.home-faq .faq-item summary::after {
  content: '+';
  font-family: 'Inter', sans-serif;
  font-weight: 300;
  font-size: 24px;
  color: var(--rl-copper);
  transition: transform 0.3s;
}
.home-faq .faq-item[open] summary::after { transform: rotate(45deg); }
.home-faq .faq-item__body { margin-top: 16px; }
.home-faq .faq-item__body p {
  color: var(--rl-body-soft);
  max-width: 62ch;
  margin: 0;
}

/* ========================================================================
 * Contact CTA — large copper phone + underline CTA
 * ======================================================================== */
.home-contact__grid {
  display: grid;
  grid-template-columns: 7fr 5fr;
  gap: 80px;
  align-items: end;
}
.home-contact__title {
  font-family: var(--wp--preset--font-family--playfair, 'Playfair Display', serif);
  font-weight: 400;
  color: var(--rl-charcoal);
  font-size: clamp(32px, 3.6vw, 48px);
  line-height: 1.15;
  max-width: 14ch;
  margin: 0 0 32px 0;
}
.home-contact__phone-label {
  display: block;
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #888;
}
.home-contact__phone {
  display: block;
  margin-top: 8px;
  font-family: var(--wp--preset--font-family--playfair, 'Playfair Display', serif);
  font-weight: 400;
  font-size: 48px;
  color: var(--rl-copper);
  text-decoration: none;
  transition: color 0.3s;
}
.home-contact__phone:hover { color: var(--rl-charcoal); }
@media (max-width: 900px) {
  .home-contact__grid { grid-template-columns: 1fr; gap: 40px; }
  .home-contact__phone { font-size: 36px; }
}

/* ========================================================================
 * Referenties archive — Stijl A treatment for split-row layout
 * ======================================================================== */
body.post-type-archive-project main {
  padding-top: 0 !important;
  background: #fff;
}
body.post-type-archive-project .split-rows {
  max-width: 1080px;
  margin: 0 auto;
  padding: 4rem 3rem 5rem;
  background: #fff;
}
body.post-type-archive-project .split-row {
  display: grid;
  grid-template-columns: 6fr 5fr;
  gap: 64px;
  padding: 48px 0;
  border-bottom: 1px solid var(--rl-line);
  align-items: center;
}
/* GEEN padding-animatie op hover. Padding verkleint de content box van de rij, dus
   kromp het tekstpaneel van 378.8px naar 364.4px zodra je erover ging. Dat is net
   genoeg om een titel die op de regelgrens balanceert opnieuw te laten afbreken —
   de tekst verspringt dan zichtbaar onder de muis. Gemeten op staging: bij 1440px
   herschikte "Museum Amsterdam — rolstoeltoegankelijk via…" van 377.8|376.2|251.8
   naar 337.8|362.1|306.9. Het trof niet elke rij, want het hangt af van
   vensterbreedte (de titel is clamp(24px,2.6vw,36px)) en titellengte — vandaar dat
   het willekeurig leek. Animeer hier niets dat de layout herberekent; de
   hover-affordance zit al in de fotozoom + saturatie en de copperkleurige titel. */
body.post-type-archive-project .split-row__photo {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--rl-cream);
}
body.post-type-archive-project .split-row__photo img,
body.post-type-archive-project .split-row__photo .wp-block-post-featured-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: saturate(0.92);
  transition: filter 0.6s ease, transform 1.2s cubic-bezier(.2,.7,.15,1);
}
body.post-type-archive-project .split-row:hover .split-row__photo img,
body.post-type-archive-project .split-row:hover .split-row__photo .wp-block-post-featured-image img {
  filter: saturate(1.05);
  transform: scale(1.04);
}
body.post-type-archive-project .split-row__title,
body.post-type-archive-project .split-row__title a {
  font-family: var(--wp--preset--font-family--playfair, 'Playfair Display', serif) !important;
  font-weight: 400 !important;
  color: var(--rl-charcoal) !important;
  font-size: clamp(24px, 2.6vw, 36px) !important;
  line-height: 1.15 !important;
  text-decoration: none !important;
  letter-spacing: -0.005em;
  transition: color 0.3s;
}
body.post-type-archive-project .split-row:hover .split-row__title a { color: var(--rl-copper) !important; }
body.post-type-archive-project .split-row__excerpt {
  color: var(--rl-body-soft);
  font-size: 15px;
  margin-top: 12px;
  max-width: 48ch;
}
body.post-type-archive-project .split-row__link {
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  margin-top: 24px !important;
  padding: 0 0 4px 0 !important;
  color: var(--rl-charcoal) !important;
  text-decoration: none !important;
  font-size: 12px !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  border-bottom: 1px solid var(--rl-charcoal) !important;
  background: transparent !important;
  border-radius: 0 !important;
  transition: gap 0.5s cubic-bezier(.2,.7,.2,1), color 0.3s, border-color 0.3s !important;
}
body.post-type-archive-project .split-row__link:hover {
  gap: 18px !important;
  color: var(--rl-copper) !important;
  border-color: var(--rl-copper) !important;
}
/* theme-extras.css zet deze link op #FFFFFF bij hover op de héle rij — dat stamt uit
   de oude versie met een donker charcoal tekstpaneel. Sinds de Stijl A-behandeling
   hierboven is dat paneel wit, dus werd "Bekijk project" wit-op-wit en verdween de
   tekst onder de muis (alleen het streepje bleef staan). Geverifieerd op staging:
   computed color ging van rgb(26,26,26) naar rgb(255,255,255) bij rijhover.
   Deze selector telt 3 classes (0,3,1) tegen (0,3,0) daar en laadt bovendien later,
   dus hij wint zonder dat theme-extras.css aangepast hoeft te worden. */
body.post-type-archive-project .split-row:hover .split-row__link,
body.post-type-archive-project .split-row:hover .split-row__link a,
body.post-type-archive-project .split-row:hover .wp-block-read-more.split-row__link {
  color: var(--rl-copper) !important;
  border-color: var(--rl-copper) !important;
}
body.post-type-archive-project .wp-block-query-pagination { padding: 32px 3rem 64px; }
@media (max-width: 900px) {
  body.post-type-archive-project .split-row { grid-template-columns: 1fr; gap: 24px; }
}

/* Override theme-extras.css dark panel → Stijl A cream/light panel */
body.post-type-archive-project .split-row__panel {
  background: transparent !important;
  color: var(--rl-charcoal) !important;
  padding: 0 !important;
  display: block !important;
}
body.post-type-archive-project .split-row__type {
  font-size: 11px !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  color: var(--rl-copper) !important;
  margin-bottom: 12px !important;
  font-weight: 500 !important;
  font-style: normal !important;
  font-family: var(--wp--preset--font-family--playfair, 'Playfair Display', serif) !important;
}
body.post-type-archive-project .split-row__type a { color: var(--rl-copper) !important; }
body.post-type-archive-project .split-row__title {
  font-style: normal !important;
  margin-bottom: 12px !important;
}
body.post-type-archive-project .split-row__title a { color: var(--rl-charcoal) !important; font-style: normal !important; }
body.post-type-archive-project .split-row__excerpt {
  color: var(--rl-body-soft) !important;
  font-size: 15px !important;
  line-height: 1.65 !important;
  margin-bottom: 24px !important;
}
/* Disable the alternating photo/text reversal so order is consistent */
body.post-type-archive-project .split-rows .wp-block-post-template > li:nth-child(even) .split-row {
  flex-direction: row !important;
}

/* The rule above outranks the mobile stacking rule in theme-extras.css, so
   even rows stayed side-by-side on phones while odd rows stacked — their text
   panel was squeezed past the row's edge and cut off by overflow:hidden.
   Restate the stack here at matching specificity. */
@media (max-width: 768px) {
  body.post-type-archive-project .split-rows .wp-block-post-template > li:nth-child(even) .split-row {
    flex-direction: column !important;
  }
}

/* ========================================================================
 * Contact page — Stijl A 2-col (form left, details right)
 * ======================================================================== */
.contact-grid {
  display: grid;
  grid-template-columns: 7fr 5fr;
  gap: 80px;
  align-items: start;
}
.contact-grid__title {
  font-family: var(--wp--preset--font-family--playfair, 'Playfair Display', serif);
  font-weight: 400;
  color: var(--rl-charcoal);
  font-size: clamp(24px, 2.6vw, 32px);
  line-height: 1.2;
  margin: 0 0 32px 0;
  max-width: 26ch;
}
/* CF7 form Stijl A polish */
.contact-grid__form .wpcf7-form p { margin: 0 0 18px 0; font-size: 14px; color: #888; }
.contact-grid__form .wpcf7-form-control:not([type="submit"]) {
  width: 100%;
  padding: 12px 14px;
  margin-top: 6px;
  background: var(--rl-cream);
  border: 1px solid var(--rl-line);
  border-radius: 0;
  font-family: 'Inter', sans-serif;
  font-size: 15px;
  color: var(--rl-charcoal);
  transition: border-color 0.3s, background 0.3s;
}
.contact-grid__form .wpcf7-form-control:not([type="submit"]):focus {
  outline: none;
  border-color: var(--rl-copper);
  background: #fff;
}
.contact-grid__form .wpcf7-submit,
.contact-grid__form input[type="submit"] {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 28px;
  background: var(--rl-charcoal);
  color: #fff;
  border: none;
  border-radius: 0;
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  cursor: pointer;
  margin-top: 12px;
  transition: background 0.3s;
}
.contact-grid__form .wpcf7-submit:hover,
.contact-grid__form input[type="submit"]:hover { background: var(--rl-copper); }
.contact-phone-large {
  display: block;
  font-family: var(--wp--preset--font-family--playfair, 'Playfair Display', serif);
  font-weight: 400;
  font-size: 44px;
  color: var(--rl-copper);
  text-decoration: none;
  margin-top: 8px;
  transition: color 0.3s;
}
.contact-phone-large:hover { color: var(--rl-charcoal); }
.contact-phone-meta {
  margin-top: 6px;
  font-size: 13px;
  color: #888;
}
.contact-line {
  height: 1px;
  background: var(--rl-line);
  margin: 36px 0;
}
.contact-block { margin-bottom: 28px; }
.contact-block__label {
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--rl-copper);
  margin-bottom: 8px;
}
.contact-block__text { color: var(--rl-body-soft); font-size: 14px; line-height: 1.65; }
.contact-block__link {
  display: inline-block;
  color: var(--rl-charcoal);
  text-decoration: none;
  border-bottom: 1px solid var(--rl-line);
  padding-bottom: 2px;
  transition: color 0.3s, border-color 0.3s;
}
.contact-block__link:hover { color: var(--rl-copper); border-color: var(--rl-copper); }
@media (max-width: 900px) {
  .contact-grid { grid-template-columns: 1fr; gap: 56px; }
}

/* Explicit bottom padding for contact main (WP block style attrs not always parsed) */
.contact-main {
  padding-top: 5rem !important;
  padding-bottom: 6rem !important;
  padding-left: 3rem !important;
  padding-right: 3rem !important;
}
@media (max-width: 700px) {
  .contact-main { padding-left: 1.5rem !important; padding-right: 1.5rem !important; }
}

/* Generic safety: stille pages should never have content flush against footer.
   Ensures any non-section last block has a baseline breathing room. */
body.stille-page main:last-child,
body.stille-page main + .wp-block-pattern:last-child {
  padding-bottom: 5rem;
}

/* ========================================================================
 * Footer — Stijl A refinement (keep charcoal but more refined)
 * ======================================================================== */
.site-footer {
  padding: 6rem 2rem 2rem !important;
  background: #1A1A1A;
}
.site-footer .footer-grid {
  padding-bottom: 4rem;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  margin-bottom: 2.5rem !important;
}
.site-footer .footer-logo {
  font-family: var(--wp--preset--font-family--playfair, 'Playfair Display', serif) !important;
  font-style: italic !important;
  font-weight: 400 !important;
  font-size: 26px !important;
  color: #fff !important;
  margin-bottom: 1.25rem !important;
}
.site-footer .footer-tagline {
  font-size: 14px !important;
  line-height: 1.7 !important;
  color: rgba(255,255,255,0.55) !important;
  max-width: 30ch;
}
.site-footer .footer-heading {
  font-family: 'Inter', sans-serif !important;
  font-size: 10px !important;
  letter-spacing: 0.24em !important;
  font-weight: 500 !important;
  color: var(--rl-copper) !important;
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 1.5rem !important;
}
.site-footer .footer-heading::before {
  content: '';
  display: block;
  width: 18px;
  height: 1px;
  background: var(--rl-copper);
}
.site-footer .footer-links a {
  font-size: 14px !important;
  font-family: var(--wp--preset--font-family--playfair, 'Playfair Display', serif) !important;
  color: rgba(255,255,255,0.75) !important;
  transition: color 0.3s, padding-left 0.3s !important;
}
.site-footer .footer-links a:hover {
  color: var(--rl-copper) !important;
  padding-left: 8px;
}
.site-footer .footer-links li + li { margin-top: 0.75rem !important; }
.site-footer .footer-bottom {
  border-top: none !important;
  padding-top: 0 !important;
}
.site-footer .footer-bottom p { color: rgba(255,255,255,0.4) !important; font-size: 12px !important; }