/* ============================================================
   Door Service — Site chrome & layout
   Built on top of assets/css/tokens/*.css. Uses the same CSS custom
   properties as the design system (readme.md) so this stays swappable
   as the mockup (Door Service Website.html) gets translated section by
   section — see docs/BACKLOG.md for what's not built yet.
   ============================================================ */

/* ---- Buttons (mirrors the design system's Button component) ---- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2, 0.5rem);
  padding: 0.75em 1.5em;
  border-radius: var(--radius-md, 8px);
  font-family: var(--font-sans);
  font-weight: var(--weight-semibold);
  font-size: var(--text-sm);
  border: 1.5px solid transparent;
  cursor: pointer;
  transition: background-color 220ms var(--ease-standard, ease), color 220ms var(--ease-standard, ease), transform 140ms;
  text-decoration: none;
}
.btn:hover { text-decoration: none; }
.btn:active { transform: translateY(1px); }

.btn--accent {
  background: var(--action-accent-bg);
  color: var(--action-accent-text);
}
.btn--accent:hover { background: var(--action-accent-bg-hover); }
.btn--accent:active { background: var(--action-accent-bg-active); }

.btn--secondary,
.btn--ghost {
  background: var(--action-secondary-bg);
  color: var(--action-secondary-text);
  border-color: var(--action-secondary-border);
}
.btn--secondary:hover,
.btn--ghost:hover { background: var(--action-secondary-bg-hover); }

/* ---- Site header ---- */
.site-header {
  background: var(--surface-card);
  border-bottom: 1px solid var(--border-subtle);
  position: sticky;
  top: 0;
  z-index: 40;
}
.site-header__inner {
  display: flex;
  align-items: center;
  gap: var(--space-6, 1.5rem);
  padding-block: var(--space-4, 1rem);
}
/* Larger logo: 56px desktop, 48px mobile (requested 2026-08-10). */
.site-header__logo img { height: 56px; width: auto; }
@media (max-width: 860px) {
  .site-header__logo img { height: 48px; }
}
/* Mockup layout: logo, then nav right beside it; switcher + CTA pushed to
   the far right (dsw-header__cta { margin-left: auto }). */
.site-header__nav { margin-inline-start: var(--space-2, 0.5rem); margin-inline-end: auto; }
.primary-menu {
  display: flex;
  gap: var(--space-6, 1.5rem);
  list-style: none;
  margin: 0;
  padding: 0;
}
.primary-menu a {
  color: var(--text-body);
  font-weight: var(--weight-medium);
}
.primary-menu a:hover { color: var(--text-link); text-decoration: none; }
.site-header__menu-toggle {
  display: none;
  background: none;
  border: none;
  font-size: var(--text-xl);
  cursor: pointer;
}

/* ---- Language switcher (Polylang) — globe dropdown per the design
   system's LanguageSwitcher component; native <details>, no JS ---- */
.language-switcher { position: relative; }
.language-switcher summary {
  list-style: none; cursor: pointer;
  display: inline-flex; align-items: center; gap: 8px;
  border: 1.5px solid var(--border-default, var(--border-subtle));
  border-radius: var(--radius-md, 8px); padding: 8px 10px 8px 12px; height: 40px;
  font-weight: var(--weight-semibold); font-size: var(--text-sm); color: var(--text-heading);
}
.language-switcher summary::-webkit-details-marker { display: none; }
.language-switcher summary:hover { border-color: var(--border-strong, var(--border-default)); background: var(--surface-sunken, var(--surface-card)); }
.language-switcher__globe { color: var(--brand-secondary); }
.language-switcher__code { letter-spacing: 0.03em; }
.language-switcher__caret {
  width: 8px; height: 8px;
  border-right: 2px solid var(--text-muted); border-bottom: 2px solid var(--text-muted);
  transform: translateY(-2px) rotate(45deg);
}
.language-switcher[open] .language-switcher__caret { transform: translateY(1px) rotate(-135deg); }
.language-switcher__menu {
  position: absolute; top: calc(100% + 8px); right: 0; z-index: 60;
  min-width: 184px; margin: 0; padding: 6px; list-style: none;
  background: var(--surface-card); border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg, 12px); box-shadow: var(--shadow-lg);
}
.language-switcher__item {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 10px; border-radius: var(--radius-md, 8px);
  font-size: var(--text-sm); color: var(--text-body);
}
.language-switcher__item:hover { background: var(--surface-sunken, var(--surface-page)); text-decoration: none; }
.language-switcher__item-code { font-family: var(--font-mono); font-size: 11px; color: var(--text-subtle); width: 24px; }
.language-switcher__item-name { font-weight: var(--weight-medium); }
.language-switcher__item.is-active .language-switcher__item-name { color: var(--brand-primary); font-weight: var(--weight-semibold); }

@media (max-width: 860px) {
  .site-header__nav,
  .site-header__cta { display: none; }
  .site-header__menu-toggle { display: block; }
}

/* ---- Hero — mockup's default light ("paper") variant: page background,
   dark heading with the closing words in accent yellow, blue eyebrow ---- */
.hero {
  padding-block: var(--space-20, 5rem) var(--space-20, 5rem);
}
.hero .ds-eyebrow { color: var(--brand-secondary); }
.hero__title {
  color: var(--text-heading); max-width: 14ch;
  font-size: clamp(2.75rem, 6vw, 4.5rem); line-height: 1.02;
  letter-spacing: var(--tracking-tighter, -0.02em);
}
.hero__title-accent { color: var(--brand-accent); }
.hero__lede { max-width: 48ch; color: var(--text-muted); font-size: var(--text-md); }
.hero__actions { display: flex; gap: var(--space-4, 1rem); margin-top: var(--space-8, 2rem); flex-wrap: wrap; }
.hero__trust {
  margin-top: var(--space-7, 1.75rem); font-size: var(--text-sm); color: var(--text-muted);
  display: flex; align-items: center; gap: var(--space-3, 0.75rem); flex-wrap: wrap;
}
.hero__stars { display: inline-flex; gap: 2px; color: var(--brand-accent); }
/* Media column slightly wider than the copy — image-only hero (the
   "Op tijd, binnen budget" chip was removed on request, 2026-08-10). */
.hero--has-image .hero__inner {
  display: grid; grid-template-columns: 1fr 1.08fr;
  gap: clamp(2rem, 5vw, 4rem); align-items: center;
}
.hero__media { position: relative; }
.hero__media img {
  /* height:auto is required — WP's width/height attributes otherwise win
     over aspect-ratio (a presentational-hint height is not "auto"). */
  display: block; width: 100%; height: auto; aspect-ratio: 4 / 3.2; object-fit: cover;
  border-radius: var(--radius-xl, 16px); box-shadow: var(--shadow-lg);
}
@media (max-width: 900px) {
  .hero--has-image .hero__inner { grid-template-columns: 1fr; }
}

/* ---- Stats strip ---- */
.stats-strip { background: var(--surface-inverse); }
.stats-strip__inner {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-7, 1.75rem);
  padding-block: var(--space-10, 2.5rem);
}
.stat { text-align: left; }
.stat__value {
  display: block; font-family: var(--font-display); font-weight: var(--weight-extra);
  font-size: var(--text-4xl); color: var(--stone-50, var(--text-inverse)); line-height: 1;
  letter-spacing: var(--tracking-tighter, -0.02em);
}
.stat__unit { color: var(--brand-accent); }
.stat__label {
  display: block; margin-top: var(--space-2, 0.5rem);
  font-family: var(--font-mono); font-size: var(--text-xs);
  letter-spacing: var(--tracking-caps); text-transform: uppercase;
  color: var(--text-inverse-muted);
}
@media (max-width: 900px) { .stats-strip__inner { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .stats-strip__inner { grid-template-columns: 1fr; } }

/* ---- Homepage: services (3 grouped phases) ---- */
.section--services .section__lede { max-width: 60ch; color: var(--text-muted); margin-top: var(--space-3, 0.75rem); }
.service-phase-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--space-6, 1.5rem); margin-top: var(--space-10, 2.5rem);
}
.service-phase-card {
  background: var(--surface-card); border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg, 12px); padding: var(--space-8, 2rem) var(--space-7, 1.75rem);
  box-shadow: var(--shadow-sm);
  transition: transform 220ms var(--ease-standard, ease), box-shadow 220ms var(--ease-standard, ease);
}
.service-phase-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
.service-phase-card__icon {
  display: inline-grid; place-items: center; width: 56px; height: 56px;
  border-radius: var(--radius-md, 8px); background: var(--blue-50, #eaf2f8);
  color: var(--brand-primary); margin-bottom: var(--space-5, 1.25rem);
}
.service-phase-card h3 { margin-bottom: 0.5em; }
.service-phase-card p { color: var(--text-muted); font-size: var(--text-sm); }
.service-phase-card__link { font-size: var(--text-sm); font-weight: var(--weight-semibold); color: var(--text-link); }

/* ---- Homepage: "Why Door Service" value props — light section with
   amber icon circles, per the mockup ---- */
.section--values .section__head--center h2 { max-width: 24ch; margin-inline: auto; }
.value-prop-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--space-8, 2rem); margin-top: var(--space-10, 2.5rem);
}
.value-prop__icon {
  display: inline-grid; place-items: center; width: 52px; height: 52px;
  border-radius: var(--radius-full, 999px);
  background: var(--yellow-100, #fdf0cd); color: var(--yellow-700, #8a6410);
  margin-bottom: var(--space-4, 1rem);
}
.value-prop h3 { font-size: var(--text-lg); margin-bottom: 0.5em; }
.value-prop p { color: var(--text-muted); font-size: var(--text-sm); margin: 0; }

/* ---- Homepage: testimonial — dark quote band (mockup dsw-quoteband) ---- */
.quoteband {
  background: var(--surface-inverse-2, var(--brand-primary)); color: var(--text-inverse);
  padding-block: clamp(3.5rem, 7vw, 6rem);
}
.quoteband__inner { text-align: center; max-width: 820px; margin-inline: auto; }
.quoteband__mark { color: var(--brand-accent); margin-bottom: var(--space-4, 1rem); }
.quoteband blockquote {
  font-family: var(--font-display); font-weight: var(--weight-semibold);
  font-size: clamp(1.5rem, 3vw, 2.1rem); line-height: 1.3;
  color: var(--stone-50, var(--text-inverse)); margin: 0 0 var(--space-6, 1.5rem);
  text-wrap: balance;
}
.quoteband__by span { color: var(--text-inverse-muted); font-size: var(--text-sm); }

/* ---- CTA band — dark rounded card inside a light section (mockup dsw-cta) ---- */
.cta-band {
  background: var(--surface-inverse); border-radius: var(--radius-2xl, 24px);
  padding: clamp(2.5rem, 5vw, 4rem);
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-10, 2.5rem); flex-wrap: wrap;
}
.cta-band h2 {
  color: var(--stone-50, var(--text-inverse)); max-width: 15ch;
  font-size: clamp(1.8rem, 3.5vw, 2.6rem);
  letter-spacing: var(--tracking-tight, -0.01em);
  margin: 0 0 0.4em;
}
.cta-band p { color: var(--text-inverse-muted); max-width: 46ch; margin: 0; }

/* ---- Sections ---- */
.section { padding-block: var(--space-20, 5rem); }
.section--inverse {
  background: var(--surface-inverse);
  color: var(--text-inverse);
}
.section--inverse h2 { color: var(--text-inverse); }
.section__cta { text-align: center; margin-top: var(--space-10, 2.5rem); }
.section--paper { background: var(--surface-page-alt, var(--surface-card)); }

/* ---- Block-editable homepage (the "Homepage" pattern) ---- */
.hero__title mark,
.hero__title-accent { background: none; color: var(--brand-accent); }
.hero__stars-mark { background: none; color: var(--brand-accent); letter-spacing: 2px; }
.hero__trust--stars { display: block; }
/* Core button blocks carrying our .btn variants render like theme
   buttons: the wrapper div holds the classes, so neutralize the .btn
   visuals on the wrapper and restyle the inner link — otherwise both get
   painted (a pill inside a pill). */
.wp-block-button.btn {
  background: transparent; padding: 0; border: none; box-shadow: none;
}
.wp-block-button.btn .wp-block-button__link {
  display: inline-flex; align-items: center; gap: var(--space-2, 0.5rem);
  padding: 0.75em 1.5em; border-radius: var(--radius-md, 8px);
  font-family: var(--font-sans); font-weight: var(--weight-semibold); font-size: var(--text-sm);
  border: 1.5px solid transparent; text-decoration: none;
}
.wp-block-button.btn--accent .wp-block-button__link {
  background: var(--action-accent-bg); color: var(--action-accent-text);
}
.wp-block-button.btn--accent .wp-block-button__link:hover { background: var(--action-accent-bg-hover); }
.wp-block-button.btn--secondary .wp-block-button__link {
  background: var(--action-secondary-bg); color: var(--action-secondary-text);
  border-color: var(--action-secondary-border);
}
.wp-block-button.btn--secondary .wp-block-button__link:hover { background: var(--action-secondary-bg-hover); }
.home-blocks .wp-block-group { margin-block: 0; }
.home-blocks .hero__media figure { margin: 0; }
/* The blanket margin reset above also strips the grids' top margins, so
   restore the mockup's 48px head-to-grid separation explicitly. */
.home-blocks .section__head { margin-bottom: var(--space-12, 3rem); }
/* Classic themes get an extra .wp-block-group__inner-container inside
   every group block, so the grid/flex layouts must move one level down
   on block-built pages — the outer element goes back to block flow. */
.home-blocks .hero--has-image .hero__inner,
.home-blocks .section__head,
.home-blocks .service-phase-grid,
.home-blocks .value-prop-grid,
.home-blocks .cta-band { display: block; }
.home-blocks .hero--has-image .hero__inner > .wp-block-group__inner-container {
  display: grid; grid-template-columns: 1fr 1.08fr;
  gap: clamp(2rem, 5vw, 4rem); align-items: center;
}
.home-blocks .section__head > .wp-block-group__inner-container {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: var(--space-8, 2rem); flex-wrap: wrap;
}
.home-blocks .section__head--center > .wp-block-group__inner-container {
  display: block; text-align: center;
}
.home-blocks .service-phase-grid > .wp-block-group__inner-container {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--space-6, 1.5rem);
}
.home-blocks .value-prop-grid > .wp-block-group__inner-container {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--space-8, 2rem);
}
.home-blocks .cta-band > .wp-block-group__inner-container {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-10, 2.5rem); flex-wrap: wrap;
}
@media (max-width: 900px) {
  .home-blocks .hero--has-image .hero__inner > .wp-block-group__inner-container { grid-template-columns: 1fr; }
}

/* ---- About page (blocks): story section — image left, text right ---- */
.home-blocks .about-story { display: block; }
.home-blocks .about-story > .wp-block-group__inner-container {
  display: grid; grid-template-columns: 0.9fr 1.1fr;
  gap: clamp(2rem, 5vw, 4rem); align-items: center;
}
.about-story__media { margin: 0; }
.about-story__media img {
  display: block; width: 100%; height: auto; aspect-ratio: 4 / 3.4; object-fit: cover;
  border-radius: var(--radius-xl, 16px); box-shadow: var(--shadow-lg);
}
.about-story__text h2 { margin-bottom: var(--space-4, 1rem); }
.about-story__text p { color: var(--text-muted); max-width: 60ch; }
@media (max-width: 900px) {
  .home-blocks .about-story > .wp-block-group__inner-container { grid-template-columns: 1fr; }
}

/* ---- Section head (heading left, lede/button right — mockup pattern) ---- */
.section__head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: var(--space-8, 2rem); flex-wrap: wrap;
}
/* Mockup's dsw-section__head h2: large, tight, max 18ch. */
.section__head h2 {
  font-size: clamp(2rem, 3.5vw, 2.75rem);
  font-weight: var(--weight-extra, 800);
  letter-spacing: var(--tracking-tight, -0.01em);
  max-width: 18ch; margin: 0;
}
.section__head--center h2 { max-width: 24ch; margin-inline: auto; }
.service-phase-card h3 { font-size: var(--text-xl); }
.section__head .section__lede { max-width: 44ch; color: var(--text-muted); margin: 0; }
.section__head--center {
  display: block; text-align: center; margin-bottom: var(--space-4, 1rem);
}

/* ---- Project / post grids ---- */
.project-grid,
.post-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: var(--space-8, 2rem);
  margin-top: var(--space-10, 2.5rem);
}
.project-card,
.post-card {
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg, 12px);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: transform 220ms var(--ease-standard, ease), box-shadow 220ms var(--ease-standard, ease);
}
.project-card:hover,
.post-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
.project-card__media,
.post-card__media { display: block; position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: var(--surface-sunken); }
.project-card__media img,
.post-card__media img { width: 100%; height: 100%; object-fit: cover; }
.project-card__badge {
  position: absolute; top: var(--space-3, 0.75rem); left: var(--space-3, 0.75rem);
  background: var(--brand-accent); color: var(--action-accent-text, var(--blue-900));
  font-size: var(--text-xs); font-weight: var(--weight-semibold);
  padding: 0.3em 0.8em; border-radius: var(--radius-full, 999px);
}
.project-card__body,
.post-card__body { padding: var(--space-5, 1.25rem); }
.project-card__title,
.post-card__title { font-size: var(--text-lg); margin-block: 0.25em 0.4em; }
.project-card__title a,
.post-card__title a { color: inherit; }
.project-card__excerpt,
.post-card__excerpt { color: var(--text-muted); font-size: var(--text-sm); margin: 0; }

/* ---- Filter bar (Onze Werk archive) ---- */
.filter-bar { display: flex; gap: var(--space-3, 0.75rem); flex-wrap: wrap; margin-top: var(--space-6, 1.5rem); }
.filter-bar__item {
  padding: 0.4em 1em;
  border-radius: var(--radius-full, 999px);
  border: 1px solid var(--border-default);
  color: var(--text-body);
  font-size: var(--text-sm);
}
.filter-bar__item.is-active,
.filter-bar__item:hover {
  background: var(--action-primary-bg);
  border-color: var(--action-primary-bg);
  color: var(--action-primary-text);
  text-decoration: none;
}

/* ---- Generic page (page.php) ---- */
.page-single__hero { background: var(--surface-inverse-2); padding-block: var(--space-16, 4rem) var(--space-10, 2.5rem); }
.page-single__hero h1 { color: var(--text-inverse); margin: 0; }
.page-single__hero .archive-intro { color: var(--text-inverse-muted); max-width: 68ch; margin-top: var(--space-4, 1rem); }
.page-single__body { padding-block: var(--space-12, 3rem); max-width: 780px; }
.page-single__media { aspect-ratio: 16 / 9; overflow: hidden; border-radius: var(--radius-lg, 12px); margin-bottom: var(--space-8, 2rem); }
.page-single__media img { width: 100%; height: 100%; object-fit: cover; }
.page-single__content :is(h2, h3) { margin-top: var(--space-10, 2.5rem); }
.page-single__content p { max-width: 68ch; }

/* ---- Services page ---- */
.services-intro { margin-bottom: var(--space-10, 2.5rem); }
.services-intro p { max-width: 68ch; }
.services-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--space-6, 1.5rem);
}
.service-card {
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg, 12px);
  padding: var(--space-6, 1.5rem);
  box-shadow: var(--shadow-sm);
  transition: transform 220ms var(--ease-standard, ease), box-shadow 220ms var(--ease-standard, ease);
}
.service-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
.service-card__number {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  color: var(--brand-accent);
  letter-spacing: var(--tracking-caps);
  margin-bottom: var(--space-3, 0.75rem);
}
.service-card__title { font-size: var(--text-lg); margin-bottom: 0.5em; }
.service-card__desc { color: var(--text-muted); font-size: var(--text-sm); margin: 0; }

/* ---- Services page: 4-step process (mockup "How we work") ---- */
.process-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--space-8, 2rem); margin-top: var(--space-10, 2.5rem);
}
.process-step__num {
  display: block; font-family: var(--font-mono); font-size: var(--text-2xl);
  font-weight: var(--weight-bold); color: var(--brand-accent);
  margin-bottom: var(--space-3, 0.75rem);
}
.process-step h3 { font-size: var(--text-lg); margin-bottom: 0.4em; }
.process-step p { color: var(--text-muted); font-size: var(--text-sm); margin: 0; }

/* ---- Services page: FAQ (native details/summary) ---- */
.faq-list { max-width: 760px; margin: var(--space-10, 2.5rem) auto 0; }
.faq-item {
  border: 1px solid var(--border-subtle); border-radius: var(--radius-md, 8px);
  background: var(--surface-card); margin-bottom: var(--space-3, 0.75rem);
}
.faq-item summary {
  cursor: pointer; list-style: none; padding: var(--space-4, 1rem) var(--space-5, 1.25rem);
  font-weight: var(--weight-semibold); color: var(--text-heading);
  display: flex; justify-content: space-between; align-items: center;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: "+"; font-size: var(--text-lg); color: var(--text-muted); }
.faq-item[open] summary::after { content: "−"; }
.faq-item p {
  padding: 0 var(--space-5, 1.25rem) var(--space-4, 1rem);
  color: var(--text-muted); font-size: var(--text-sm); margin: 0;
}

/* ---- Single project — mockup detail layout ---- */
.project-detail__top { padding-top: var(--space-10, 2.5rem); }
.project-detail__back {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: var(--text-sm); font-weight: var(--weight-semibold);
  color: var(--text-link); margin-bottom: var(--space-5, 1.25rem);
}
.project-detail__back:hover { text-decoration: none; color: var(--brand-primary); }
.project-detail__top h1 { margin: 0 0 var(--space-4, 1rem); }
.project-detail__chips { display: flex; gap: var(--space-2, 0.5rem); flex-wrap: wrap; margin-bottom: var(--space-5, 1.25rem); }
.project-detail__chip {
  display: inline-block; padding: 0.3em 0.9em;
  border: 1px solid var(--border-default, var(--border-subtle));
  border-radius: var(--radius-full, 999px);
  font-size: var(--text-xs); font-weight: var(--weight-medium); color: var(--text-body);
  background: var(--surface-card);
}
a.project-detail__chip:hover { border-color: var(--brand-secondary); color: var(--brand-secondary); text-decoration: none; }
.project-facts--inline { display: flex; gap: var(--space-8, 2rem); flex-wrap: wrap; margin: 0 0 var(--space-5, 1.25rem); }
.project-detail__desc { max-width: 62ch; }
.project-detail__desc p { color: var(--text-muted); }
.project-detail__featured img {
  display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover;
  border-radius: var(--radius-xl, 16px); box-shadow: var(--shadow-lg);
}
.project-detail__gallery .section__head { margin-bottom: var(--space-6, 1.5rem); }
.project-detail__more { padding-block: 0 var(--space-10, 2.5rem); }

/* ---- Project gallery widget: phase tabs + tiles + lightbox (mockup) ---- */
.pgallery__tabs {
  display: flex; gap: var(--space-6, 1.5rem);
  border-bottom: 1px solid var(--border-subtle);
  margin-bottom: var(--space-8, 2rem);
}
.pgallery__tab {
  background: none; border: none; cursor: pointer;
  padding: 0.6em 0.1em; font-family: var(--font-sans);
  font-size: var(--text-sm); font-weight: var(--weight-medium);
  color: var(--text-muted); border-bottom: 2px solid transparent;
  margin-bottom: -1px;
}
.pgallery__tab:hover { color: var(--text-heading); }
.pgallery__tab.is-active {
  color: var(--text-heading); font-weight: var(--weight-semibold);
  border-bottom-color: var(--brand-accent);
}
.pgallery__count { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--text-subtle); margin-left: 2px; }
.pgallery__grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--space-5, 1.25rem);
}
.pgallery__tile {
  position: relative; display: block; padding: 0; border: none; cursor: zoom-in;
  border-radius: var(--radius-lg, 12px); overflow: hidden; background: var(--surface-sunken, #eee);
  transition: transform 180ms var(--ease-standard, ease), box-shadow 180ms var(--ease-standard, ease);
}
.pgallery__tile:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); }
/* The filter toggles the hidden attribute — it must beat display:block. */
.pgallery__tile[hidden] { display: none; }
.pgallery__tile img,
.pgallery__tile video {
  display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover;
}
.pgallery__tile--video { cursor: pointer; }
.pgallery__play {
  position: absolute; inset: 0; display: grid; place-items: center; color: var(--text-heading);
}
.pgallery__play svg {
  background: var(--surface-card, #fff); border-radius: var(--radius-full, 999px);
  padding: 14px; width: 54px; height: 54px; box-shadow: var(--shadow-lg);
}
.pgallery-lightbox {
  position: fixed; inset: 0; z-index: 100;
  background: rgba(12, 20, 34, 0.88);
  display: flex; align-items: center; justify-content: center;
  padding: var(--space-8, 2rem);
}
/* display:flex above would defeat the hidden attribute — keep it authoritative. */
.pgallery-lightbox[hidden] { display: none; }
.pgallery-lightbox__inner img,
.pgallery-lightbox__inner video {
  max-width: min(1100px, 92vw); max-height: 86vh;
  border-radius: var(--radius-lg, 12px); box-shadow: var(--shadow-lg);
}
.pgallery-lightbox__close {
  position: absolute; top: 18px; right: 22px;
  background: none; border: none; cursor: pointer;
  color: #fff; font-size: 2.2rem; line-height: 1;
}
body.pgallery-lightbox-open { overflow: hidden; }

/* ---- Contact page: form left, icon aside right (mockup ContactPage) ---- */
.contact-layout {
  display: grid; grid-template-columns: 1.15fr 0.85fr;
  gap: clamp(2rem, 5vw, 4rem); align-items: start;
}
.contact-layout__content { margin-bottom: var(--space-6, 1.5rem); }
.contact-layout__form {
  background: var(--surface-card); border: 1px solid var(--border-subtle);
  border-radius: var(--radius-xl, 16px); padding: clamp(1.5rem, 3vw, 2.5rem);
  box-shadow: var(--shadow-sm);
}
.contact-aside h2 { font-size: var(--text-2xl); margin-bottom: var(--space-3, 0.75rem); }
.contact-aside > p { color: var(--text-muted); max-width: 40ch; }
.contact-aside__list {
  list-style: none; margin: var(--space-6, 1.5rem) 0 0; padding: 0;
  display: flex; flex-direction: column; gap: var(--space-5, 1.25rem);
}
.contact-aside__item { display: flex; align-items: flex-start; gap: var(--space-4, 1rem); }
.contact-aside__icon {
  flex-shrink: 0; display: inline-grid; place-items: center;
  width: 44px; height: 44px; border-radius: var(--radius-md, 8px);
  background: var(--blue-50, #eaf2f8); color: var(--brand-primary);
}
.contact-aside__item strong { display: block; font-family: var(--font-display); font-size: var(--text-sm); }
.contact-aside__item a,
.contact-aside__item span:not(.contact-aside__icon) { font-size: var(--text-sm); color: var(--text-muted); }
@media (max-width: 900px) {
  .contact-layout { grid-template-columns: 1fr; }
}

/* ---- Gravity Forms inside the contact card — style the controls like
   the mockup's Input/Select/Textarea components ---- */
.contact-layout__form .gform_wrapper .gfield_label {
  font-family: var(--font-display); font-size: var(--text-sm);
  font-weight: var(--weight-semibold); color: var(--text-heading);
  margin-bottom: 6px;
}
.contact-layout__form .gform_wrapper .gfield_required { color: var(--brand-secondary); }
.contact-layout__form .gform_wrapper input[type="text"],
.contact-layout__form .gform_wrapper input[type="email"],
.contact-layout__form .gform_wrapper input[type="tel"],
.contact-layout__form .gform_wrapper select,
.contact-layout__form .gform_wrapper textarea {
  width: 100%; padding: 0.65em 0.9em;
  font-family: var(--font-sans); font-size: var(--text-sm); color: var(--text-body);
  background: var(--surface-page, #fff);
  border: 1.5px solid var(--border-default, var(--border-subtle));
  border-radius: var(--radius-md, 8px);
  transition: border-color 160ms var(--ease-standard, ease), box-shadow 160ms var(--ease-standard, ease);
}
.contact-layout__form .gform_wrapper select {
  min-height: 2.9em; line-height: 1.4; appearance: auto;
}
.contact-layout__form .gform_wrapper input:focus,
.contact-layout__form .gform_wrapper select:focus,
.contact-layout__form .gform_wrapper textarea:focus {
  outline: none; border-color: var(--brand-secondary);
  box-shadow: 0 0 0 3px var(--blue-50, rgba(63, 135, 174, 0.18));
}
.contact-layout__form .gform_wrapper .gform_fields { gap: var(--space-5, 1.25rem) var(--space-4, 1rem); }
.contact-layout__form .gform_wrapper .ginput_complex label,
.contact-layout__form .gform_wrapper .gfield_description {
  font-size: var(--text-xs); color: var(--text-muted); margin-top: 4px;
}
.contact-layout__form .gform_wrapper .gfield_radio { display: flex; gap: var(--space-6, 1.5rem); flex-wrap: wrap; }
.contact-layout__form .gform_wrapper .gchoice { display: flex; align-items: center; gap: 8px; }
.contact-layout__form .gform_wrapper .gchoice label { font-size: var(--text-sm); color: var(--text-body); }
.contact-layout__form .gform_wrapper input[type="radio"],
.contact-layout__form .gform_wrapper input[type="checkbox"] { accent-color: var(--brand-secondary); width: 16px; height: 16px; }
.contact-layout__form .gform_footer { margin-top: var(--space-6, 1.5rem); padding: 0; }
/* GF's own (Orbital/gravity-theme) button styles load after ours and win
   on specificity — assert the mockup's full-width accent submit. */
.contact-layout__form .gform_wrapper .gform_footer input[type="submit"],
.contact-layout__form .gform_wrapper .gform_footer button,
.contact-layout__form .gform_wrapper .gform_footer .gform_button {
  width: 100% !important; display: inline-flex; align-items: center; justify-content: center;
  gap: var(--space-2, 0.5rem); padding: 0.9em 1.5em !important; border: none !important; cursor: pointer;
  font-family: var(--font-sans) !important; font-weight: var(--weight-semibold) !important; font-size: var(--text-md) !important;
  border-radius: var(--radius-md, 8px) !important;
  background: var(--action-accent-bg) !important; color: var(--action-accent-text) !important;
  transition: background-color 200ms var(--ease-standard, ease);
}
.contact-layout__form .gform_wrapper .gform_footer input[type="submit"]:hover,
.contact-layout__form .gform_wrapper .gform_footer button:hover,
.contact-layout__form .gform_wrapper .gform_footer .gform_button:hover { background: var(--action-accent-bg-hover) !important; }
.contact-layout__form .gform_wrapper .gform_validation_errors {
  border-radius: var(--radius-md, 8px); margin-bottom: var(--space-4, 1rem);
}

/* Legacy single-project pieces still in use */
.project-single__hero-media { aspect-ratio: 16 / 9; overflow: hidden; }
.project-single__hero-media img { width: 100%; height: 100%; object-fit: cover; }
.project-single__hero { background: var(--surface-sunken); padding-bottom: var(--space-8, 2rem); }
.project-single__hero .ds-container { padding-top: var(--space-6, 1.5rem); }
.project-single__body { padding-block: var(--space-12, 3rem); max-width: 860px; }

.project-facts {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-8, 2rem);
  margin: 0 0 var(--space-10, 2.5rem);
  padding: var(--space-6, 1.5rem);
  background: var(--surface-sunken);
  border-radius: var(--radius-lg, 12px);
}
.project-facts__item dt { font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--text-subtle); }
.project-facts__item dd { margin: 0.2em 0 0; font-weight: var(--weight-semibold); color: var(--text-heading); }

.project-quote {
  border-left: 4px solid var(--brand-accent);
  padding-left: var(--space-6, 1.5rem);
  margin: var(--space-10, 2.5rem) 0;
  font-family: var(--font-display);
  font-size: var(--text-xl);
  color: var(--text-heading);
}

/* Native Gutenberg Gallery/Image blocks, scoped to Onze Werk's content —
   this is where the editor builds the voor/tijdens/na photo story (see
   docs/ONZE-WERK-CPT.md), no custom field or JS involved. WP core's own
   "Enlarge on click" block setting handles the lightbox. */
.project-single__content h2,
.project-single__content h3 { margin-top: var(--space-12, 3rem); }
.project-single__content .wp-block-gallery { margin-block: var(--space-6, 1.5rem); }
.project-single__content .wp-block-gallery .wp-block-image img {
  border-radius: var(--radius-md, 8px);
  cursor: zoom-in; /* matches the block's own lightbox affordance */
}
.project-single__content .wp-block-gallery figcaption {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--text-subtle);
}

.project-single__cta { display: flex; gap: var(--space-4, 1rem); align-items: center; margin-top: var(--space-12, 3rem); flex-wrap: wrap; }

/* (Old contact-page rules removed — superseded by the mockup layout:
   .contact-layout/.contact-aside block further up in this file.) */

/* ---- 404 ---- */
.error-404__inner { text-align: center; max-width: 640px; margin-inline: auto; }
.error-404__inner .hero__actions { justify-content: center; }
.error-404__search { display: flex; gap: var(--space-3, 0.75rem); justify-content: center; margin-top: var(--space-10, 2.5rem); flex-wrap: wrap; }
.error-404__search input[type="search"] {
  flex: 1 1 280px; max-width: 360px;
  padding: 0.7em 1em; border: 1.5px solid var(--border-default);
  border-radius: var(--radius-md, 8px); font-family: var(--font-sans); font-size: var(--text-sm);
  background: var(--surface-card); color: var(--text-body);
}
.error-404__search input[type="search"]:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }

/* ---- Footer ---- */
.site-footer { background: var(--surface-inverse-2, var(--brand-primary)); color: var(--text-inverse); padding-block: var(--space-16, 4rem) var(--space-8, 2rem); }
.site-footer a { color: var(--text-inverse-muted); }
.site-footer a:hover { color: var(--text-inverse); }
.site-footer__brand .ds-logo img { height: 56px; width: auto; }
.site-footer__tagline { color: var(--text-inverse-muted); font-family: var(--font-display); margin-top: var(--space-3, 0.75rem); max-width: 32ch; }
.site-footer__grid {
  display: grid; grid-template-columns: 1.4fr repeat(3, 1fr);
  gap: var(--space-8, 2rem); padding-bottom: var(--space-10, 2.5rem);
}
.site-footer__col h2 { color: var(--text-inverse); font-size: var(--text-sm); text-transform: uppercase; letter-spacing: var(--tracking-caps); margin-bottom: var(--space-4, 1rem); }
.site-footer__col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2, 0.5rem); }
.site-footer__col ul li { font-size: var(--text-sm); }
.site-footer__social { display: flex; gap: var(--space-3, 0.75rem); margin-top: var(--space-4, 1rem); }
.site-footer__social a {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: var(--radius-full, 999px);
  border: 1px solid var(--border-inverse, rgba(255,255,255,0.25));
  color: var(--text-inverse-muted);
}
.site-footer__social a:hover { color: var(--text-inverse); border-color: var(--text-inverse); }
.site-footer__meta-row {
  border-top: 1px solid var(--border-inverse); padding-top: var(--space-6, 1.5rem);
  display: flex; justify-content: space-between; gap: var(--space-4, 1rem); flex-wrap: wrap;
}
.site-footer__meta { color: var(--text-inverse-muted); font-size: var(--text-xs); margin: 0; }
@media (max-width: 900px) {
  .site-footer__grid { grid-template-columns: 1fr 1fr; }
  .site-footer__brand { grid-column: 1 / -1; }
}
@media (max-width: 560px) {
  .site-footer__grid { grid-template-columns: 1fr; }
}

.skip-link { position: absolute; left: -9999px; top: 0; }
.skip-link:focus { left: var(--space-2, 0.5rem); top: var(--space-2, 0.5rem); z-index: 100; background: var(--surface-card); padding: var(--space-2, 0.5rem) var(--space-4, 1rem); }
.screen-reader-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }