/*
Theme Name: SO Office & Energy
Theme URI: https://soofficeenenergy.be
Author: SO Office & Energy
Author URI: https://soofficeenenergy.be
Description: Editorial block theme voor SO Office & Energy — combineert administratieve ondersteuning met HVAC. Fraunces + Geist + JetBrains Mono, paper achtergrond, terracotta accenten. One-pager opzet met bewerkbare blokken.
Version: 1.0.4
Requires at least: 6.4
Tested up to: 6.6
Requires PHP: 7.4
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: so-office-energy
Tags: full-site-editing, block-patterns, one-column, custom-colors, custom-logo, editor-style
*/

/* ============================================================
   CSS VARIABLES (mirror theme.json palette for legacy classes)
   ============================================================ */
:root {
  --bg: #f8f8f8;
  --cream: #f0ece8;
  --paper: #FAF6F0;
  --warm: #e5d8cc;
  --ink: #1e1c1b;
  --ink-deep: #050505;
  --ink-soft: #393633;
  --text: #171710;
  --line: #c6c6c5;
  --grey-soft: rgba(205,205,205,0.2);
  --title: rgb(26, 23, 20);
  --subtext: rgb(107, 96, 87);
  --terracotta: #C65D3A;
  --muted: #6B6057;
  --diensten-line: #D8D0C3;
}

/* ============================================================
   BASE
   ============================================================ */
html { scroll-behavior: smooth; }
body.wp-site-blocks,
body {
  margin: 0;
  font-family: 'Geist', 'Helvetica Neue', Helvetica, sans-serif;
  font-weight: 300;
  font-size: 17px;
  color: #000;
  background-color: var(--paper);
  line-height: 1.4;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: 'Fraunces', 'Times New Roman', Times, serif;
  font-weight: 700;
  line-height: 1.1;
  color: var(--ink);
  margin: 0;
}

a { text-decoration: none; color: inherit; }
ul { list-style: none; margin: 0; padding: 0; }
img { max-width: 100%; display: block; }

/* WP core spacing reset for body so our layouts breathe */
.wp-site-blocks { padding: 0 !important; }

/* Stop WP layout-helpers from forcing display/max-width on our custom containers.
   Our own CSS controls grid/flex on these via the className. */
.wp-block-group.hero-grid,
.wp-block-group.diensten__grid,
.wp-block-group.team-grid,
.wp-block-group.why-grid,
.wp-block-group.cta-grid,
.wp-block-group.contact-grid,
.wp-block-group.footer-grid { display: grid; }
.wp-block-group.footer-grid { display: flex; }

/* WordPress adds margin-block-start (block-gap) to every non-first child.
   In our grid/flex rows that shifts the 2nd/3rd card down. Kill it on the
   direct children of our custom layout containers. */
.wp-block-group.hero-grid > *,
.wp-block-group.diensten__grid > *,
.wp-block-group.team-grid > *,
.wp-block-group.why-grid > *,
.wp-block-group.cta-grid > *,
.wp-block-group.contact-grid > *,
.wp-block-group.footer-grid > * { margin-top: 0; margin-block-start: 0; }

/* ------------------------------------------------------------
   WP LAYOUT BASE
   We dequeue the WordPress global stylesheet on the front-end
   (functions.php → soe_dequeue_global_styles). That stylesheet also
   carried the base block-layout rules (.is-layout-flex / -grid +
   justification helpers) that the header row, navigation and button
   blocks rely on. Re-declare the minimal set here so those blocks lay
   out correctly, WITHOUT bringing back the typography/spacing that
   fought our design.
   ------------------------------------------------------------ */
.is-layout-flex { display: flex; flex-wrap: wrap; align-items: center; }
.is-layout-flex.is-nowrap { flex-wrap: nowrap; }
.is-layout-grid { display: grid; }
.is-content-justification-left          { justify-content: flex-start; }
.is-content-justification-center        { justify-content: center; }
.is-content-justification-right         { justify-content: flex-end; }
.is-content-justification-space-between { justify-content: space-between; }
.wp-block-buttons.is-layout-flex { gap: 0.5em; }
/* Header row: logo left, nav right (independent of WP layout classes). */
.site-header .container {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: space-between;
}
.site-header .wp-block-navigation .wp-block-navigation__container {
  display: flex;
  flex-wrap: wrap;
}

/* Constrained-layout adds a max-width on direct children; turn it off where we
   want children to span our own container. */
.wp-block-group.container > *,
.wp-block-group.hero-text > *,
.wp-block-group.hero-feature > *,
.wp-block-group.hero-grid > *,
.wp-block-group.about-text > *,
.wp-block-group.about-prose > *,
.wp-block-group.services-head > *,
.wp-block-group.diensten__grid > *,
.wp-block-group.team-head > *,
.wp-block-group.team-grid > *,
.wp-block-group.team-card > *,
.wp-block-group.team-body > *,
.wp-block-group.why-head > *,
.wp-block-group.why-grid > *,
.wp-block-group.why-card > *,
.wp-block-group.cta-grid > *,
.wp-block-group.cta-text > *,
.wp-block-group.contact-head > *,
.wp-block-group.contact-grid > *,
.wp-block-group.contact-info > *,
.wp-block-group.contact-item > * { max-width: none; }

/* ------------------------------------------------------------
   WP BLOCK NORMALIZATION
   example2 was hand-coded HTML with NO default block margins —
   every margin came from an explicit rule. WordPress injects its
   own block-gap / paragraph / heading margins, which shifts the
   vertical rhythm. Reset those to 0 inside our sections so ONLY
   the example2 rules below govern spacing. Each component then
   re-declares the margins it actually needs.
   ------------------------------------------------------------ */
.team, .services, .hero, .about, .why, .cta, .contact {
  --wp--style--block-gap: 0;
}
:where(.team, .services, .hero, .about, .why, .cta, .contact)
:where(.wp-block-heading, .wp-block-paragraph, p, h1, h2, h3, h4) {
  margin-top: 0;
  margin-bottom: 0;
}

.container,
.soe-container {
  max-width: 1512px;
  margin: 0 auto;
  padding: 0 76px;
  position: relative;
}

/* ============================================================
   ATOMS
   ============================================================ */
.eyebrow {
  font-family: 'Geist', 'Helvetica Neue', Helvetica, sans-serif;
  font-weight: 400;
  font-size: 20px;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--ink);
  display: block;
  margin-bottom: 8px;
}
.eyebrow.light { color: var(--bg); }

.section-title {
  font-family: 'Fraunces', 'Times New Roman', Times, serif;
  font-weight: 300;
  font-size: 36px;
  color: var(--title);
  line-height: 1.1;
  margin-bottom: 20px;
}
.section-title.light { color: var(--bg); }

.accent-line {
  width: 101px;
  height: 2px;
  background: #000;
  border: 0;
  margin: 22px 0 28px;
}
.accent-line.light { background: var(--bg); }

.lead {
  font-family: 'Geist', 'Helvetica Neue', Helvetica, sans-serif;
  font-weight: 300;
  font-size: 20px;
  color: var(--subtext);
  line-height: 1.4;
  max-width: 595px;
}

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 15px 22px;
  border-radius: 20px;
  font-family: 'Geist', 'Helvetica Neue', Helvetica, sans-serif;
  font-weight: 400;
  font-size: 20px;
  cursor: pointer;
  border: 3px solid transparent;
  transition: all 0.25s ease;
  line-height: 1;
}
.btn-dark { background: var(--ink-deep); color: #fff; }
.btn-dark:hover { background: var(--warm); color: var(--ink); }
.btn-outline { background: var(--bg); border: 3px solid #000; color: #020202; }
.btn-outline:hover { background: #000; color: #fff; }

/* When WP puts our btn classes on the BUTTON BLOCK WRAPPER (not the link),
   the atom .btn / .btn-dark / .btn-outline rules above would turn the wrapper
   itself into a padded, coloured box around the already-styled link → a huge
   double button. Neutralise the wrapper; the link keeps the .wp-block-button__link
   styling below. */
.wp-block-button.btn,
.wp-block-button.btn-dark,
.wp-block-button.btn-outline {
  display: inline-block;
  padding: 0;
  border: 0;
  background: none;
  border-radius: 0;
  font-size: inherit;
  line-height: inherit;
}

/* WP core button block — same look as .btn */
.wp-block-button .wp-block-button__link,
.wp-block-button__link.wp-element-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 15px 22px;
  border-radius: 20px;
  font-family: 'Geist', 'Helvetica Neue', Helvetica, sans-serif;
  font-weight: 400;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  border: 3px solid transparent;
  background: var(--ink-deep);
  color: #fff;
  transition: transform 0.25s ease, background 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}
.wp-block-button.btn-dark .wp-block-button__link {
  background: var(--ink-deep);
  color: #fff;
}
.wp-block-button.btn-dark .wp-block-button__link:hover {
  background: var(--warm);
  color: var(--ink);
}
.wp-block-button.btn-outline .wp-block-button__link,
.wp-block-button.is-style-outline .wp-block-button__link {
  background: var(--bg);
  border: 3px solid #000;
  color: #020202;
}
.wp-block-button.btn-outline .wp-block-button__link:hover,
.wp-block-button.is-style-outline .wp-block-button__link:hover {
  background: #000;
  color: #fff;
}
.wp-block-button:hover .wp-block-button__link { transform: translateY(-2px); }

/* ============================================================
   HEADER
   ============================================================ */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background: var(--paper);
  box-shadow: 0 0 0 rgba(0,0,0,0);
  padding: 20px 0;
  z-index: 1000;
  transition: box-shadow 0.3s ease, padding 0.3s ease;
}
.site-header.scrolled {
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
  padding: 14px 0;
}
.site-header nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.site-logo { display: flex; align-items: center; gap: 8px; }
.site-logo img {
  height: 133px;
  width: auto;
  display: block;
  transition: height 0.45s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: height;
}
.site-header.scrolled .site-logo img { height: 60px; }
.nav-links {
  display: flex;
  align-items: center;
  gap: 78px;
}
.nav-links a {
  font-family: 'Geist', 'Helvetica Neue', Helvetica, sans-serif;
  font-size: 20px;
  color: #000;
  transition: color 0.2s;
}
.nav-links a:hover { color: var(--warm); }
.nav-pill {
  background: var(--ink-deep) !important;
  color: #fff !important;
  padding: 10px 22px;
  border-radius: 20px;
}
.nav-pill:hover { background: var(--warm) !important; color: var(--ink) !important; }

/* WP Site Logo block — match the legacy .site-logo img sizing */
.site-header .wp-block-site-logo img {
  height: 133px !important;
  width: auto !important;
  max-width: none;
  display: block;
  transition: height 0.45s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: height;
}
.site-header.scrolled .wp-block-site-logo img { height: 60px !important; }

.site-footer .wp-block-site-logo img {
  height: 90px !important;
  width: auto !important;
  filter: invert(1);
}

/* WP Navigation block — make the primary nav look like .nav-links */
.site-header .wp-block-navigation {
  font-family: 'Geist', 'Helvetica Neue', Helvetica, sans-serif;
  font-size: 20px;
}
.site-header .wp-block-navigation .wp-block-navigation__container {
  gap: 78px;
  align-items: center;
}
.site-header .wp-block-navigation .wp-block-navigation-item a {
  color: #000;
  text-decoration: none;
  transition: color 0.2s;
}
.site-header .wp-block-navigation .wp-block-navigation-item a:hover { color: var(--warm); }
.site-header .wp-block-navigation .wp-block-navigation-item.nav-pill a {
  background: var(--ink-deep);
  color: #fff;
  padding: 10px 22px;
  border-radius: 20px;
}
.site-header .wp-block-navigation .wp-block-navigation-item.nav-pill a:hover {
  background: var(--warm);
  color: var(--ink);
}

/* ============================================================
   LEGAL PAGES (Algemene voorwaarden / Privacy / Cookies)
   ============================================================ */
.legal {
  padding: 160px 0 120px;
  background: var(--paper);
}
.legal .legal-inner {
  max-width: 820px;
  margin: 0 auto;
}
.legal .legal-title {
  font-family: 'Fraunces', 'Times New Roman', Times, serif;
  font-weight: 300;
  font-size: clamp(32px, 5vw, 52px);
  line-height: 1.1;
  color: var(--title);
  margin-bottom: 40px;
}
.legal h2 {
  font-family: 'Fraunces', 'Times New Roman', Times, serif;
  font-weight: 400;
  font-size: 26px;
  line-height: 1.2;
  color: var(--ink);
  margin: 48px 0 14px;
}
.legal h3 {
  font-family: 'Geist', 'Helvetica Neue', Helvetica, sans-serif;
  font-weight: 500;
  font-size: 18px;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  color: var(--ink);
  margin: 28px 0 8px;
}
.legal p {
  font-family: 'Geist', 'Helvetica Neue', Helvetica, sans-serif;
  font-weight: 300;
  font-size: 17px;
  line-height: 1.65;
  color: var(--ink-soft);
  margin: 0 0 14px;
}
.legal ul {
  list-style: disc;
  margin: 0 0 14px;
  padding-left: 22px;
}
.legal ul li {
  font-family: 'Geist', 'Helvetica Neue', Helvetica, sans-serif;
  font-weight: 300;
  font-size: 17px;
  line-height: 1.65;
  color: var(--ink-soft);
  margin: 0 0 6px;
}
.legal a { color: var(--terracotta); text-decoration: underline; }

/* Footer nav: smaller, muted */
.site-footer .wp-block-navigation {
  font-family: 'Geist', sans-serif;
  font-size: 14px;
}
.site-footer .wp-block-navigation .wp-block-navigation__container { gap: 32px; }
.site-footer .wp-block-navigation .wp-block-navigation-item a {
  color: rgba(248,248,248,0.7);
  text-decoration: none;
  transition: color 0.2s;
}
.site-footer .wp-block-navigation .wp-block-navigation-item a:hover { color: var(--warm); }

/* ============================================================
   HERO
   ============================================================ */
.hero {
  padding-top: 180px;
  padding-bottom: 60px;
  position: relative;
  overflow: hidden;
  z-index: 1;
}
.hero .container { position: relative; z-index: 2; }
.hero-grid {
  display: grid;
  grid-template-columns: 1fr 378px;
  gap: 60px;
  align-items: center;
}
.hero-text { padding-top: 30px; }
.hero h1 {
  font-family: 'Fraunces', 'Times New Roman', Times, serif;
  font-weight: 300;
  font-size: 64px;
  line-height: 1.05;
  color: rgb(26, 23, 20);
  margin: 0 0 30px;
  max-width: 665px;
}
.hero-sub {
  font-family: 'Geist', 'Helvetica Neue', Helvetica, sans-serif;
  font-weight: 300;
  font-size: 24px;
  color: rgb(107, 96, 87);
  line-height: 1.3;
  max-width: 625px;
  margin: 0 0 40px;
}
.hero-btns { display: flex; gap: 18px; flex-wrap: wrap; }
.hero-feature {
  position: relative;
  width: 378px;
  height: 752px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.hero-bg-orb {
  position: absolute;
  top: 0;
  left: 0;
  width: 1071px;
  height: 752px;
  border-radius: 300px 0 0 300px;
  overflow: hidden;
  background: var(--cream);
  z-index: 0;
}
.hero-mobile-orb { display: none; }
.hero-bg-orb::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(240,236,232,0.7);
  z-index: 2;
}
.hero-bg-orb img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
}
.hero-portrait {
  position: relative;
  z-index: 3;
  width: 378px;
  height: 587px;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(0,0,0,0.18);
}
.hero-portrait > img,
.hero-portrait .wp-block-image,
.hero-portrait .wp-block-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.hero-portrait .wp-block-image {
  margin: 0;
  position: absolute;
  inset: 0;
}
.hero-portrait .wp-block-image img { display: block; }
.hero-quote {
  position: absolute;
  bottom: 0;
  left: 0;
  background: var(--warm);
  color: var(--ink-soft);
  font-family: 'Fraunces', 'Times New Roman', Times, serif;
  font-weight: 700;
  font-size: 14px;
  padding: 12px 22px;
  border-top-right-radius: 20px;
  border-bottom-left-radius: 20px;
  width: 270px;
  z-index: 4;
}

/* ============================================================
   SERVICES
   ============================================================ */
.services {
  padding: 80px 0 80px;
  position: relative;
  z-index: 2;
}
.services-soft-orb {
  position: absolute;
  top: 0;
  left: -318px;
  width: 1073px;
  height: 540px;
  background: var(--grey-soft);
  border-radius: 270px;
  z-index: 1;
  pointer-events: none;
}
.services .container { position: relative; z-index: 2; }
.services-head { margin-bottom: 50px; }
.diensten__grid {
  display: grid;
  grid-template-columns: 1fr 1px 1fr;
  gap: 80px;
  position: relative;
  margin-top: 30px;
}
.diensten__divider { background: var(--diensten-line); position: relative; }
.diensten__divider::before {
  content: "\00d7";
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  background: var(--paper);
  padding: 8px 10px;
  font-family: 'Fraunces', 'Times New Roman', Times, serif;
  font-size: 28px;
  font-style: italic;
  font-weight: 300;
  color: var(--terracotta);
}
.dienst__num {
  font-family: 'Fraunces', 'Times New Roman', Times, serif;
  font-weight: 300;
  font-style: italic;
  font-size: 64px;
  color: var(--terracotta);
  line-height: 1;
  margin-bottom: 20px;
  font-variation-settings: "opsz" 144;
}
.dienst__cat {
  font-family: 'JetBrains Mono', 'Menlo', 'Consolas', monospace;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.28em;
  color: var(--muted);
  margin-bottom: 28px;
}
.dienst__heading {
  font-family: 'Fraunces', 'Times New Roman', Times, serif;
  font-weight: 400;
  font-size: clamp(28px, 3vw, 40px);
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin-bottom: 24px;
  color: var(--ink);
  font-variation-settings: "opsz" 60;
}
.dienst__lead {
  font-family: 'Geist', 'Helvetica Neue', Helvetica, sans-serif;
  font-weight: 300;
  font-size: 17px;
  line-height: 1.55;
  color: var(--ink);
  margin-bottom: 44px;
  max-width: 40ch;
}
.dienst__list {
  list-style: none;
  padding: 0;
  margin: 0;
  border-top: 1px solid var(--diensten-line);
  counter-reset: dienst-item;
}
.dienst__list li {
  padding: 20px 0;
  border-bottom: 1px solid var(--diensten-line);
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 20px;
  align-items: baseline;
  font-family: 'Geist', 'Helvetica Neue', Helvetica, sans-serif;
  font-size: 15px;
  line-height: 1.5;
  color: rgba(30, 28, 27, 0.8);
  transition: color 0.35s ease, padding-left 0.35s ease;
  list-style: none;
}
.dienst__list li::before {
  counter-increment: dienst-item;
  content: counter(dienst-item, decimal-leading-zero);
  font-family: 'JetBrains Mono', 'Menlo', 'Consolas', monospace;
  font-size: 11px;
  color: var(--terracotta);
  letter-spacing: 0.12em;
}
.dienst__list li::marker { content: none; }
.dienst__list li:hover { color: var(--ink); padding-left: 10px; }

/* ============================================================
   TEAM
   ============================================================ */
.team {
  background: var(--cream);
  padding: 100px 0 110px;
}
.team-head { margin-bottom: 110px; max-width: 600px; }
.team-grid {
  display: grid;
  grid-template-columns: 607px 607px;
  gap: 86px;
  justify-content: center;
  align-items: stretch;
}
.team-grid > .team-card { height: 100%; margin-top: 0; margin-block-start: 0; }
.team-card {
  background: var(--bg);
  border-radius: 20px;
  box-shadow: 0 4px 4px rgba(0,0,0,0.25);
  display: grid;
  grid-template-columns: 233px 1fr;
  grid-template-rows: auto 1fr;
  grid-template-areas:
    "photo body"
    "photo bio";
  min-height: 391px;
  position: relative;
}
.team-photo {
  grid-area: photo;
  border-top-left-radius: 20px;
  border-bottom-left-radius: 20px;
  overflow: hidden;
}
.team-photo img,
.team-photo .wp-block-image img { width: 100%; height: 100%; object-fit: cover; display: block; }
.team-photo .wp-block-image { margin: 0; width: 100%; height: 100%; }
.team-photo .wp-block-image figure,
.team-photo figure { margin: 0; width: 100%; height: 100%; }
.team-body { grid-area: body; padding: 18px 30px 0 18px; }
/* The badge is position:absolute and must anchor to .team-card (which is
   position:relative). WordPress turns inner wp-block-group wrappers into a
   positioning context, which would re-anchor the badge to .team-body and push
   it top-right. Force those inner wrappers back to static. */
.wp-block-group.team-card { position: relative; }
.team-card .wp-block-group { position: static; }
.team-card h3 {
  font-family: 'Fraunces', 'Times New Roman', Times, serif;
  font-weight: 500;
  color: #171710;
  margin: 0;
  line-height: 1;
  padding-top: 0;
  margin-top: 3px;
  letter-spacing: -0.01em;
}
.team-card h3 .first { font-size: 64px; font-weight: 500; }
.team-card h3 .rest  { font-size: 48px; font-weight: 400; }
.team-role {
  font-family: 'Geist', 'Helvetica Neue', Helvetica, sans-serif;
  font-weight: 500;
  font-size: 20px;
  text-transform: uppercase;
  color: rgba(16,17,10,0.8);
  margin-top: 18px;
  margin-bottom: 0;
  letter-spacing: 0.01em;
}
.team-bio,
.wp-block-group.team-card > .team-bio {
  grid-area: bio;
  padding: 10px 0 28px 18px;
  font-family: 'Geist', 'Helvetica Neue', Helvetica, sans-serif;
  font-weight: 300;
  font-size: 20px;
  color: #000;
  line-height: 1.35;
  max-width: 330px;
  align-self: start;
}
.team-badge {
  position: absolute;
  bottom: 19px;
  left: 251px;
  background: #0b1411;
  color: var(--bg);
  font-family: 'Geist', 'Helvetica Neue', Helvetica, sans-serif;
  font-weight: 300;
  font-size: 20px;
  padding: 10px 15px;
  border-radius: 20px;
  line-height: 1;
}

/* ============================================================
   ABOUT
   ============================================================ */
.about {
  background: var(--paper);
  color: var(--ink);
  padding: 180px 0;
}
.about .container { max-width: 780px; }
.about-text { text-align: center; padding-top: 0; }
.about-text .about-headline {
  font-family: 'Fraunces', 'Times New Roman', Times, serif;
  font-weight: 300;
  font-size: clamp(40px, 5.5vw, 82px);
  line-height: 1.02;
  letter-spacing: -0.035em;
  margin-bottom: 80px;
  text-align: center;
  color: var(--ink);
  font-variation-settings: "opsz" 144;
}
.about-text .about-headline em {
  font-style: italic;
  color: var(--terracotta);
  font-weight: 300;
}
.about-prose {
  font-family: 'Fraunces', 'Times New Roman', Times, serif;
  font-weight: 300;
  font-size: clamp(20px, 1.9vw, 26px);
  line-height: 1.48;
  letter-spacing: -0.01em;
  color: var(--ink);
  text-align: left;
  font-variation-settings: "opsz" 48;
}
.about-prose p { margin-bottom: 28px; }
.about-prose p:last-child { margin-bottom: 0; }
.about-prose p::after { content: ""; display: table; clear: both; }
.about-prose .dropcap {
  font-family: 'Fraunces', 'Times New Roman', Times, serif;
  font-weight: 400;
  font-style: italic;
  font-size: 3.6em;
  float: left;
  line-height: 0.88;
  padding: 6px 22px 0 0;
  color: var(--terracotta);
  letter-spacing: -0.04em;
  font-variation-settings: "opsz" 144;
}

/* ============================================================
   WHY
   ============================================================ */
.why {
  padding: 100px 0 30px;
  background: transparent;
  position: relative;
  z-index: 2;
}
.why-head { margin-bottom: 110px; }
.why-grid {
  display: grid;
  grid-template-columns: repeat(3, 421px);
  gap: 44px;
  justify-content: center;
}
.why-card {
  background: #f7f7f6;
  border: 1px solid rgba(0,0,0,0.20);
  border-radius: 20px;
  width: 421px;
  height: 421px;
  padding: 65px 52px 55px 33px;
  display: flex;
  flex-direction: column;
  gap: 21px;
}
.why-num {
  font-family: 'Geist', 'Helvetica Neue', Helvetica, sans-serif;
  font-weight: 900;
  font-size: 48px;
  color: var(--warm);
  text-transform: uppercase;
  line-height: 1;
}
.why-card h3 {
  font-family: 'Geist', 'Helvetica Neue', Helvetica, sans-serif;
  font-weight: 700;
  font-size: 25px;
  text-transform: uppercase;
  color: rgba(16,17,10,0.8);
  line-height: 1.2;
}
.why-card p {
  font-family: 'Geist', 'Helvetica Neue', Helvetica, sans-serif;
  font-weight: 300;
  font-size: 20px;
  color: #000;
  line-height: 1.35;
  max-width: 313px;
}

/* ============================================================
   CTA
   ============================================================ */
.cta {
  position: relative;
  background: var(--cream);
  border-top-left-radius: 300px;
  border-top-right-radius: 300px;
  margin-top: -220px;
  padding: 320px 0 240px;
  overflow: hidden;
  z-index: 1;
}
.cta > * { position: relative; z-index: 2; }
.cta-grid {
  display: grid;
  grid-template-columns: 378px 1fr;
  gap: 80px;
  align-items: center;
  max-width: 1360px;
  margin: 0 auto;
  padding: 0 76px;
}
.cta-img-col { position: relative; width: 378px; height: 567px; }
.cta-img {
  position: absolute;
  right: 0; top: 0;
  width: 808px;
  height: 567px;
  border-radius: 0 300px 300px 0;
  overflow: hidden;
  box-shadow: 0 30px 80px rgba(0,0,0,0.12);
}
.cta-img img { width: 100%; height: 100%; object-fit: cover; opacity: 0.6; }
.cta-img::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(240,236,232,0.7);
  border-radius: 0 300px 300px 0;
}
.cta-corner-orb {
  position: absolute;
  bottom: -460px;
  right: -680px;
  width: 1071px;
  height: 752px;
  border-radius: 300px;
  overflow: hidden;
  background: var(--cream);
  z-index: 0;
  pointer-events: none;
}
.cta-corner-orb img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.cta-corner-orb::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(240,236,232,0.7);
}
.cta-text h2 {
  font-family: 'Fraunces', 'Times New Roman', Times, serif;
  font-weight: 300;
  font-size: 40px;
  color: var(--title);
  line-height: 1.1;
  max-width: 676px;
}
.cta-text .lead {
  font-family: 'Geist', 'Helvetica Neue', Helvetica, sans-serif;
  font-weight: 300;
  font-size: 24px;
  color: var(--subtext);
  line-height: 1.4;
  max-width: 719px;
  margin-top: 8px;
}
.cta-btns { display: flex; gap: 18px; margin-top: 42px; flex-wrap: wrap; }

/* ============================================================
   CONTACT
   ============================================================ */
.contact {
  background: var(--bg);
  padding: 130px 0 110px;
}
.contact-head { margin-bottom: 80px; }
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 823px;
  gap: 60px;
  align-items: start;
}
.contact-item {
  display: grid;
  grid-template-columns: 68px 1fr;
  gap: 24px;
  align-items: start;
  margin-bottom: 32px;
}
.contact-icon { width: 68px; height: 66px; display: block; }
.contact-icon img { width: 100%; height: 100%; }
.contact-icon.box-dark {
  background: #1e1c1b;
  color: #f8f8f8;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.contact-label {
  font-family: 'Geist', 'Helvetica Neue', Helvetica, sans-serif;
  font-size: 14px;
  text-transform: uppercase;
  color: #000;
  letter-spacing: 0.02em;
  margin-bottom: 4px;
}
.contact-value {
  font-family: 'Geist', 'Helvetica Neue', Helvetica, sans-serif;
  font-size: 20px;
  color: #000;
  line-height: 1.35;
}
.contact-value a { text-decoration: underline; color: #000; }
.contact-value a:hover { color: var(--warm); }
.contact-note {
  font-family: 'Geist', 'Helvetica Neue', Helvetica, sans-serif;
  font-size: 14px;
  font-style: italic;
  color: var(--subtext);
  line-height: 1.4;
  margin-top: 8px;
  max-width: 360px;
}

/* FORM */
.contact-form-wrap {
  background: var(--cream);
  border-radius: 20px;
  padding: 50px 50px 40px;
  width: 823px;
  max-width: 100%;
}
.contact-form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px 22px;
}
.form-group { display: flex; flex-direction: column; }
.form-group.full { grid-column: span 2; }
.form-group label {
  font-family: 'Geist', 'Helvetica Neue', Helvetica, sans-serif;
  font-size: 16.5px;
  text-transform: uppercase;
  color: #000;
  margin-bottom: 6px;
  line-height: 2;
}
.form-group input,
.form-group textarea {
  background: #fff;
  border: 1.18px solid var(--line);
  border-radius: 23.5px;
  padding: 12px 18px;
  font-family: 'Geist', 'Helvetica Neue', Helvetica, sans-serif;
  font-weight: 400;
  font-size: 16.5px;
  color: var(--text);
  line-height: 2;
  transition: border-color 0.25s;
}
.form-group input:focus,
.form-group textarea:focus { outline: none; border-color: var(--ink); }
.form-group input::placeholder,
.form-group textarea::placeholder { color: #d2d2d2; }
.form-group textarea {
  resize: vertical;
  min-height: 130px;
  line-height: 1.6;
  padding-top: 14px;
}
.form-submit {
  grid-column: span 2;
  display: flex;
  justify-content: flex-end;
  margin-top: 12px;
}
.form-status {
  grid-column: span 2;
  font-family: 'Geist', sans-serif;
  font-size: 15px;
  padding: 12px 18px;
  border-radius: 12px;
  margin-top: 8px;
}
.form-status.ok    { background: #e3f2e3; color: #155724; border: 1px solid #b6dab6; }
.form-status.err   { background: #fdecea; color: #842029; border: 1px solid #f5c6cb; }

/* Contact Form 7 — match native form styling */
.contact-form-wrap .wpcf7-form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px 22px;
}
.contact-form-wrap .wpcf7-form p { margin: 0; }
.contact-form-wrap .wpcf7-form-control-wrap { display: block; }
.contact-form-wrap .wpcf7-form input[type="text"],
.contact-form-wrap .wpcf7-form input[type="email"],
.contact-form-wrap .wpcf7-form input[type="tel"],
.contact-form-wrap .wpcf7-form textarea {
  width: 100%;
  background: #fff;
  border: 1.18px solid var(--line);
  border-radius: 23.5px;
  padding: 12px 18px;
  font-family: 'Geist', 'Helvetica Neue', Helvetica, sans-serif;
  font-weight: 400;
  font-size: 16.5px;
  color: var(--text);
  line-height: 2;
  transition: border-color 0.25s;
  box-sizing: border-box;
}
.contact-form-wrap .wpcf7-form input:focus,
.contact-form-wrap .wpcf7-form textarea:focus { outline: none; border-color: var(--ink); }
.contact-form-wrap .wpcf7-form input::placeholder,
.contact-form-wrap .wpcf7-form textarea::placeholder { color: #d2d2d2; }
.contact-form-wrap .wpcf7-form textarea {
  resize: vertical;
  min-height: 130px;
  line-height: 1.6;
  padding-top: 14px;
}
.contact-form-wrap .wpcf7-form .wpcf7-submit {
  background: var(--ink-deep);
  color: #fff;
  border: 1.18px solid var(--ink-deep);
  border-radius: 100px;
  padding: 14px 32px;
  font-family: 'Geist', sans-serif;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.25s, color 0.25s;
}
.contact-form-wrap .wpcf7-form .wpcf7-submit:hover {
  background: var(--warm);
  color: var(--ink-deep);
  border-color: var(--warm);
}
.contact-form-wrap .wpcf7-not-valid-tip {
  display: block;
  margin-top: 6px;
  font-size: 13px;
  color: #842029;
}
.contact-form-wrap .wpcf7-response-output {
  grid-column: span 2;
  margin: 8px 0 0 !important;
  padding: 12px 18px !important;
  border-radius: 12px !important;
  font-family: 'Geist', sans-serif;
  font-size: 15px;
}
.contact-form-wrap .wpcf7 form.sent .wpcf7-response-output {
  background: #e3f2e3;
  color: #155724;
  border: 1px solid #b6dab6 !important;
}
.contact-form-wrap .wpcf7 form.invalid .wpcf7-response-output,
.contact-form-wrap .wpcf7 form.failed .wpcf7-response-output,
.contact-form-wrap .wpcf7 form.spam .wpcf7-response-output {
  background: #fdecea;
  color: #842029;
  border: 1px solid #f5c6cb !important;
}
.contact-form-wrap .wpcf7-spinner { margin: 0 12px; }

/* CF7 raw-HTML form-group support (so the field template below renders nicely) */
.contact-form-wrap .wpcf7-form .form-group {
  display: flex;
  flex-direction: column;
}
.contact-form-wrap .wpcf7-form .form-group.full { grid-column: span 2; }
.contact-form-wrap .wpcf7-form .form-group label {
  font-family: 'Geist', sans-serif;
  font-size: 16.5px;
  text-transform: uppercase;
  color: #000;
  margin-bottom: 6px;
  line-height: 2;
}
.contact-form-wrap .wpcf7-form .form-submit {
  grid-column: span 2;
  display: flex;
  justify-content: flex-end;
  margin-top: 12px;
}

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer {
  background: var(--ink);
  color: var(--bg);
  padding: 50px 0 35px;
}
.footer-grid {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 22px;
}
.footer-logo { display: flex; align-items: center; gap: 14px; }
.footer-logo img {
  height: 90px;
  width: auto;
  display: block;
  filter: invert(1);
}
.footer-links { display: flex; gap: 32px; }
.footer-links a {
  color: rgba(248,248,248,0.7);
  font-family: 'Geist', 'Helvetica Neue', Helvetica, sans-serif;
  font-size: 14px;
  transition: color 0.2s;
}
.footer-links a:hover { color: var(--warm); }
.footer-copy {
  font-family: 'Geist', 'Helvetica Neue', Helvetica, sans-serif;
  font-size: 14px;
  color: rgba(248,248,248,0.55);
  margin-top: 26px;
  text-align: center;
  border-top: 1px solid rgba(248,248,248,0.10);
  padding-top: 22px;
}
.footer-credit-wrap {
  text-align: center;
  margin-top: 12px;
}
.footer-credit {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: 'Geist', 'Helvetica Neue', Helvetica, sans-serif;
  font-size: 13px;
  color: rgba(248,248,248,0.45);
  text-decoration: none;
  opacity: 0.85;
  transition: opacity 0.2s, color 0.2s;
}
.footer-credit:hover { opacity: 1; color: rgba(248,248,248,0.85); }
.footer-credit .jovix-mark {
  height: 26px;
  width: auto;
  display: block;
}

/* ============================================================
   ANIMATIONS
   ============================================================ */
[data-anim] {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.8s cubic-bezier(0.22, 1, 0.36, 1), transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: opacity, transform;
}
[data-anim="fade"]  { transform: none; }
[data-anim="scale"] { transform: scale(0.95); }
[data-anim="left"]  { transform: translateX(-40px); }
[data-anim="right"] { transform: translateX(40px); }
[data-anim].in { opacity: 1; transform: translate(0,0) scale(1); }
[data-anim-delay="100"] { transition-delay: 0.10s; }
[data-anim-delay="200"] { transition-delay: 0.20s; }
[data-anim-delay="300"] { transition-delay: 0.30s; }
[data-anim-delay="400"] { transition-delay: 0.40s; }
[data-anim-delay="500"] { transition-delay: 0.50s; }
[data-anim-delay="600"] { transition-delay: 0.60s; }

.team-card, .why-card { transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.4s ease, border-color 0.3s ease; }
.team-card:hover { transform: translateY(-4px); box-shadow: 0 12px 36px rgba(0,0,0,0.16); }
.why-card:hover  { transform: translateY(-4px); border-color: var(--warm); }
.team-photo img, .hero-portrait > img, .cta-img img { transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1); }
.team-card:hover .team-photo img { transform: scale(1.06); }
.hero-portrait:hover > img       { transform: scale(1.04); }
.btn { transition: transform 0.25s ease, background 0.25s ease, color 0.25s ease, border-color 0.25s ease; }
.btn:hover { transform: translateY(-2px); }

@keyframes wa-pulse {
  0%, 100% { box-shadow: 0 6px 20px rgba(37,211,102,0.40), 0 0 0 0 rgba(37,211,102,0.30); }
  50%      { box-shadow: 0 6px 20px rgba(37,211,102,0.40), 0 0 0 14px rgba(37,211,102,0); }
}

@media (prefers-reduced-motion: reduce) {
  [data-anim] { opacity: 1 !important; transform: none !important; transition: none !important; }
  .team-card, .why-card, .team-photo img, .hero-portrait > img, .cta-img img, .btn { transition: none; }
}

.whatsapp-float {
  position: fixed;
  bottom: 32px;
  right: 32px;
  width: 60px;
  height: 60px;
  background: #25d366;
  color: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 30px;
  box-shadow: 0 6px 20px rgba(37,211,102,0.40);
  z-index: 999;
  transition: transform 0.2s;
  animation: wa-pulse 2.4s ease-out infinite;
}
.whatsapp-float:hover { transform: scale(1.08); animation-play-state: paused; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1400px) {
  .container { padding: 0 40px; }
  .hero-grid { gap: 80px; }
  .diensten__grid { gap: 60px; }
  .team-grid { grid-template-columns: 1fr 1fr; gap: 30px; }
  .why-grid { grid-template-columns: repeat(3, 1fr); gap: 30px; }
  .why-card { width: auto; height: auto; min-height: 380px; }
  .cta-grid { grid-template-columns: 280px 1fr; padding: 0 40px; gap: 40px; }
  .cta-img-col { width: 280px; height: 460px; }
  .cta-img { width: 660px; height: 460px; }
  .contact-grid { grid-template-columns: 1fr 1fr; }
  .contact-form-wrap { width: 100%; }
}

@media (max-width: 1100px) {
  .hero-grid { grid-template-columns: 1fr 320px; gap: 40px; }
  .hero-feature { width: 320px; height: 600px; }
  .hero-bg-orb { width: 800px; height: 600px; border-radius: 240px 0 0 240px; }
  .hero-portrait { width: 320px; height: 500px; }
  .hero h1 { font-size: 52px; }
  .cta { border-top-left-radius: 200px; border-top-right-radius: 200px; }
  .cta-text h2 { font-size: 32px; }
}

@media (max-width: 860px) {
  .container { padding: 0 24px; }
  .hero { padding-top: 120px; padding-bottom: 60px; }
  .hero-grid, .team-grid, .why-grid, .cta-grid, .contact-grid { grid-template-columns: 1fr; }
  .hero h1 { font-size: 38px; margin-top: 0; }
  .hero-sub { font-size: 18px; margin: 30px 0 30px; }
  .hero-grid { display: flex; flex-direction: column; gap: 40px; width: 100%; margin: 0; }
  .hero-text { position: relative; z-index: 2; width: 100%; }
  .hero-feature { width: 100%; max-width: none; height: auto; aspect-ratio: auto; margin: 0; justify-content: center; }
  .hero-bg-orb { display: none; }
  .hero-mobile-orb {
    display: block;
    position: absolute;
    top: 80px;
    right: 0;
    width: 280px; height: 280px;
    border-radius: 180px 0 0 180px;
    overflow: hidden;
    background: var(--cream);
    z-index: 0;
  }
  .hero-mobile-orb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
  .hero-mobile-orb::after { content: ''; position: absolute; inset: 0; background: rgba(240,236,232,0.7); }
  .hero-portrait { width: 100%; max-width: 280px; height: auto; aspect-ratio: 378/587; position: relative; z-index: 2; }
  /* Mobile: keep the logo small (no scroll-up growth) */
  .site-header .wp-block-site-logo img,
  .site-header.scrolled .wp-block-site-logo img,
  .site-logo img,
  .site-header.scrolled .site-logo img { height: 56px !important; }

  /* Hamburger button visible + styled */
  .site-header .wp-block-navigation__responsive-container-open {
    display: flex;
    background: none;
    border: 0;
    padding: 6px;
    color: var(--ink);
    cursor: pointer;
  }
  .site-header .wp-block-navigation__responsive-container-open svg { width: 30px; height: 30px; fill: currentColor; }

  /* Overlay panel: full-screen, paper background, contained in viewport.
     !important + the full inner-wrapper chain so the WP navigation block CSS
     can't re-size or re-flow the menu out of the screen. */
  .site-header .wp-block-navigation__responsive-container:not(.is-menu-open) { display: none !important; }
  .site-header .wp-block-navigation__responsive-container.is-menu-open {
    position: fixed !important;
    inset: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    max-width: 100vw !important;
    z-index: 1001 !important;
    background: var(--paper) !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 80px 24px 40px !important;
    box-sizing: border-box !important;
    overflow-y: auto !important;
  }
  /* Inner wrappers WP nests — force them all to fill width and center, never
     impose their own width/offset that pushes items off-screen. */
  .site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-close,
  .site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-dialog,
  .site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    position: static !important;
  }
  /* Close (X) button, top-right */
  .site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close {
    position: fixed !important;
    top: 24px;
    right: 24px;
    background: none !important;
    border: 0;
    padding: 6px;
    color: var(--ink);
    cursor: pointer;
    z-index: 1002;
  }
  .site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close svg { width: 30px; height: 30px; fill: currentColor; }
  /* Menu list: vertical & centered, never a row */
  .site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
    gap: 30px !important;
    width: 100% !important;
    padding: 0 !important;
  }
  .site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item { width: auto !important; }
  .site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__label { font-size: 26px; }

  .services { padding: 60px 0; }
  .diensten__grid { grid-template-columns: 1fr; gap: 64px; }
  .diensten__divider { height: 1px; width: 100%; }
  .dienst__num { font-size: 52px; }
  .team { padding: 70px 0; }
  .team-head { margin-bottom: 50px; }
  .team-card {
    grid-template-columns: 140px 1fr;
    grid-template-rows: auto auto;
    grid-template-areas: "photo body" "bio bio";
    column-gap: 16px;
    padding: 0;
    min-height: auto;
    overflow: hidden;
  }
  .team-photo {
    width: 140px; height: 140px;
    border-top-left-radius: 20px;
    border-top-right-radius: 0;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 16px;
    align-self: start;
  }
  .team-body { padding: 18px 18px 0 0; display: flex; flex-direction: column; gap: 8px; }
  .team-card h3 .first { font-size: 48px; }
  .team-card h3 .rest  { font-size: 36px; }
  .team-role  { margin: 4px 0 0; font-size: 16px; }
  .team-badge { position: static; align-self: flex-start; margin-top: 6px; font-size: 16px; padding: 8px 14px; }
  .team-bio { padding: 14px 18px 18px 18px; margin-top: 0; font-size: 17px; max-width: none; }
  .about { padding: 90px 0; }
  .about-text .about-headline { margin-bottom: 50px; }
  .about-prose .dropcap { font-size: 3em; padding: 4px 16px 0 0; }
  .why { padding: 70px 0; }
  .why-head { margin-bottom: 50px; }
  .why-card { padding: 40px 28px; }
  .cta { border-top-left-radius: 80px; border-top-right-radius: 80px; padding: 80px 0; margin-top: 60px; }
  .cta-grid { padding: 0 24px; grid-template-columns: 1fr; }
  .cta-text h2 { font-size: 28px; }
  .cta-img-col { display: none; }
  .cta-corner-orb { display: none; }
  .contact { padding: 80px 0; }
  .contact-form-wrap { padding: 30px 22px; }
  .contact-form { grid-template-columns: 1fr; }
  .form-group.full, .form-submit { grid-column: span 1; }
  .footer-grid { flex-direction: column; text-align: center; }
  .section-title { font-size: 30px; }
}