/* ═══════════════════════════════════════════════════════════════════════════
   BEST GOED — THEME STYLESHEET
   All design tokens, global styles, nav, footer, utilities, and page-specific
   layouts. Gutenberg editor styles are loaded separately (editor-style.css).
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 1. GOOGLE FONTS ──────────────────────────────────────────────────────── */
/* ── LOCAL FONTS ─────────────────────────────────────────────────────────────
   Font files live in assets/fonts/. Download from fonts.google.com:
   - Instrument Serif (regular + italic): instrument-serif-v1-latin-regular.woff2
                                           instrument-serif-v1-latin-italic.woff2
   - Geist (300, 400, 500):               geist-v1-latin-300.woff2
                                           geist-v1-latin-regular.woff2
                                           geist-v1-latin-500.woff2
   ─────────────────────────────────────────────────────────────────────────── */
@font-face {
  font-family: 'Instrument Serif';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../../assets/fonts/instrument-serif-v1-latin-regular.woff2') format('woff2');
}
@font-face {
  font-family: 'Instrument Serif';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('../../assets/fonts/instrument-serif-v1-latin-italic.woff2') format('woff2');
}
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('../../assets/fonts/geist-v1-latin-300.woff2') format('woff2');
}
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../../assets/fonts/geist-v1-latin-regular.woff2') format('woff2');
}
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../../assets/fonts/geist-v1-latin-500.woff2') format('woff2');
}

/* ── 2. DESIGN TOKENS ─────────────────────────────────────────────────────── */
:root {
  --ink:         #1C1C1E;
  --ink-mid:     #4A4A4D;
  --ink-light:   #8E8E93;
  --paper:       #F7F5F1;
  --paper-warm:  #EEEAE4;
  --paper-card:  #ffffff;
  --accent:      #a0402e;
  --accent-dark: #7a2f1f;
  --rule:        #E2DDD6;

  --font-display: 'Instrument Serif', Georgia, serif;
  --font-body:    'Geist', system-ui, sans-serif;

  --max-w:    1200px;
  --side-pad: 5vw;
  --nav-h:    64px;
}

/* ── 3. RESET & BASE ──────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font-body);
  background: var(--paper);
  color: var(--ink);
  font-size: 18px;
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, video { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
button { font-family: var(--font-body); cursor: pointer; }
ul, ol { list-style: none; }

/* ── 4. NAVIGATION ────────────────────────────────────────────────────────── */
#site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--paper);
  border-bottom: 1px solid var(--rule);
  padding: 0 var(--side-pad);
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--nav-h);
  gap: 24px;
  transition: box-shadow 0.25s;
}
#site-header.scrolled { box-shadow: 0 1px 12px rgba(28,28,30,0.08); }

.nav-logo {
  font-family: var(--font-display);
  font-size: 31px;
  font-weight: 400;
  letter-spacing: 0.01em;
  color: var(--ink);
  text-decoration: none;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 10px;
}
.nav-logo img {
  height: auto;
  max-height: 21px;
  width: auto;
  display: block;
}

/* WordPress outputs the logo as a sibling .custom-logo-link after .nav-logo */
.custom-logo-link {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  order: -1;
}
.custom-logo-link img {
  height: auto;
  max-height: 20px;
  width: auto;
  display: block;
}

.nav-links {
  display: flex;
  gap: 0;
  list-style: none;
  flex-shrink: 1;
  align-self: stretch;
}
.nav-links li { display: flex; align-items: stretch; }
.nav-links a {
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0.07em;
  white-space: nowrap;
  text-transform: uppercase;
  color: var(--ink-mid);
  text-decoration: none;
  transition: color 0.2s, background 0.2s;
  padding: 0 14px;
  display: flex;
  align-items: center;
}
.nav-links a:hover,
.nav-links .current-menu-item > a,
.nav-links .current_page_item > a { color: var(--ink); background: var(--paper-warm); }

.nav-right {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-shrink: 0;
}

/* Language toggle */
.lang-toggle { display: flex; align-items: center; gap: 4px; }
.lang-btn {
  background: none;
  border: none;
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-light);
  padding: 2px 0;
  transition: color 0.2s;
}
.lang-btn.active { color: var(--ink); font-weight: 500; }
.lang-btn:hover { color: var(--ink); }
.lang-sep { font-size: 11px; color: var(--rule); }

/* CTA button in nav */
.nav-cta {
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink);
  border: 1px solid var(--ink);
  padding: 8px 20px;
  text-decoration: none;
  transition: background 0.2s, color 0.2s;
}
.nav-cta:hover { background: var(--ink); color: var(--paper); }

/* Hidden by default on desktop — cloned into hamburger menu for mobile only */
.nav-links li.nav-lang-mobile { display: none; }

/* Hamburger */
.hamburger-btn {
  display: none;
  flex-direction: column;
  justify-content: space-between;
  width: 24px;
  height: 16px;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
}
.hamburger-btn span {
  display: block;
  width: 100%;
  height: 1px;
  background: var(--ink);
  transition: transform 0.25s, opacity 0.25s;
}
.hamburger-btn.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hamburger-btn.is-open span:nth-child(2) { opacity: 0; }
.hamburger-btn.is-open span:nth-child(3) { transform: translateY(-9px) rotate(-45deg); }

/* ── 5. FOOTER ────────────────────────────────────────────────────────────── */
#site-footer {
  border-top: 1px solid var(--rule);
  background: var(--paper);
  padding: 64px var(--side-pad) 0;
}
.footer-inner { max-width: var(--max-w); margin: 0 auto; }
.footer-top {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 60px;
  padding-bottom: 48px;
}

/* Brand */
.footer-brand .footer-logo {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 400;
  color: var(--ink);
  text-decoration: none;
  display: block;
  margin-bottom: 12px;
}
.footer-brand img { height: 24px; width: auto; margin-bottom: 12px; }
.footer-brand p { font-size: 13px; font-weight: 400; color: var(--ink-mid); line-height: 1.6; }

/* Contact column */
.footer-col-label {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-light);
  margin-bottom: 16px;
  display: block;
}
.footer-col-desc { font-size: 13px; font-weight: 300; color: var(--ink-light); margin-bottom: 4px; }
.footer-contact-link {
  display: block;
  font-size: 14px;
  font-weight: 400;
  color: var(--ink-mid);
  text-decoration: none;
  margin-top: 8px;
  transition: color 0.2s;
}
.footer-contact-link:hover { color: var(--ink); }
.linkedin-link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 14px;
  font-weight: 400;
  color: var(--ink-mid);
  text-decoration: none;
  margin-top: 8px;
  transition: color 0.2s;
}
.linkedin-link:hover { color: var(--ink); }

/* Newsletter column */
.footer-newsletter p { font-size: 13px; font-weight: 400; color: var(--ink-mid); line-height: 1.6; margin-bottom: 16px; }
.newsletter-form,
.footer-newsletter .wpcf7 { margin: 0; width: 100%; display: flex; flex-direction: column; }
.footer-newsletter .wpcf7-form { display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; align-items: stretch !important; border: 1px solid var(--rule); overflow: hidden; width: 100%; align-self: flex-start; }
.footer-newsletter .wpcf7 br { display: none !important; }
.footer-newsletter .wpcf7 p { margin: 0 !important; display: contents !important; }
.footer-newsletter .wpcf7-form-control-wrap { flex: 1 1 auto !important; display: block !important; min-width: 0 !important; margin: 0 !important; padding: 0 !important; width: auto !important; }
.footer-newsletter .wpcf7-form .wpcf7-email { display: block !important; width: 100% !important; height: 100% !important; min-width: 0 !important; margin: 0 !important; border: none !important; box-sizing: border-box !important; }
.footer-newsletter .wpcf7-submit { flex: 0 0 auto !important; display: block !important; width: auto !important; margin: 0 !important; align-self: stretch !important; }
.newsletter-input,
.footer-newsletter .wpcf7-email {
  flex: 1;
  width: 100%;
  border: none !important;
  box-shadow: none !important;
  background: transparent;
  padding: 10px 14px;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 300;
  color: var(--ink);
  outline: none;
  height: 100%;
}
.newsletter-input::placeholder,
.footer-newsletter .wpcf7-email::placeholder { color: var(--ink-light); }
.newsletter-btn,
.footer-newsletter .wpcf7-submit {
  background: var(--ink);
  color: var(--paper);
  border: none !important;
  box-shadow: none !important;
  padding: 10px 16px;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.2s;
  flex-shrink: 0;
  align-self: stretch;
}
.newsletter-btn:hover,
.footer-newsletter .wpcf7-submit:hover { background: var(--ink-mid); }

/* Footer bottom bar */
.footer-bottom {
  border-top: 1px solid var(--rule);
  padding: 24px 0 40px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
}
.footer-meta { font-size: 12px; font-weight: 400; color: var(--ink-mid); letter-spacing: 0.04em; }
.footer-legal { display: flex; gap: 24px; list-style: none; }
.footer-legal a { font-size: 13px; font-weight: 400; color: var(--ink-mid); text-decoration: none; transition: color 0.2s; }
.footer-legal a:hover { color: var(--ink); }

/* ── 6. SHARED UTILITY CLASSES ────────────────────────────────────────────── */
.container { max-width: var(--max-w); margin: 0 auto; padding: 0 var(--side-pad); }

.section-eyebrow {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
}
.section-eyebrow::before {
  content: '';
  display: inline-block;
  width: 24px;
  height: 1px;
  background: var(--accent);
}

.btn-primary {
  display: inline-block;
  background: var(--ink);
  color: var(--paper);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 14px 28px;
  text-decoration: none;
  transition: background 0.2s;
}
.btn-primary:hover { background: var(--ink-mid); color: var(--paper); }

.btn-ghost {
  display: inline-block;
  color: var(--ink-mid);
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  border-bottom: 1px solid var(--rule);
  padding-bottom: 2px;
  transition: color 0.2s, border-color 0.2s;
}
.btn-ghost:hover { color: var(--ink); border-color: var(--ink); }

.btn-accent {
  display: inline-block;
  background: var(--accent);
  color: #ffffff;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 14px 28px;
  text-decoration: none;
  transition: background 0.2s;
}
.btn-accent:hover { background: var(--accent-dark); }

/* Section background helpers */
.bg-paper      { background: var(--paper); }
.bg-warm       { background: var(--paper-warm); }
.bg-dark       { background: var(--ink); color: var(--paper); }
.border-bottom { border-bottom: 1px solid var(--rule); }

/* Project / post tag pill */
.tag-pill {
  display: inline-block;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  border: 1px solid var(--accent);
  padding: 4px 10px;
}

/* ── 7. ANIMATE-IN (scroll fade) ──────────────────────────────────────────── */
.animate-in {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.55s ease, transform 0.55s ease;
}
.animate-in.visible {
  opacity: 1;
  transform: none;
}

/* ── 8. HERO WORD ANIMATION ───────────────────────────────────────────────── */
.hero-word {
  display: inline-block;
  opacity: 0;
  transform: translateY(10px);
  animation: heroWord 0.5s ease forwards;
  animation-delay: var(--word-delay, 0ms);
}
@keyframes heroWord {
  to { opacity: 1; transform: none; }
}

/* Hide the entire hero inner container from first paint until JS has finished
   wrapping words. This prevents both the NL flash (TranslatePress pre-renders
   .hero-word spans which JS must strip before re-wrapping) and the layout
   shift where surrounding text appears before the h1 animates in.
   The `hero-words-ready` class is added to the h1 by JS after wrapping — we
   use :has() to target the parent container. Where :has() is unsupported
   (old browsers) the hero simply appears immediately, which is fine. */
.section-hero .hero-inner:has(h1:not(.hero-words-ready)),
.section-page-hero:has(h1:not(.hero-words-ready)),
.page-hero-inner:has(h1:not(.hero-words-ready)) {
  visibility: hidden;
}

/* ── 9. GUTENBERG CONTENT STYLES ──────────────────────────────────────────── */
/* Applied to .entry-content so Gutenberg blocks inherit brand typography */
.entry-content {
  max-width: 780px;
  margin: 0 auto;
}
.entry-content p,
.entry-content .wp-block-paragraph {
  font-size: 18px;
  font-weight: 400;
  color: #6f6f77;
  line-height: 1.85;
  margin-bottom: 28px;
}
.entry-content h2,
.entry-content .wp-block-heading:is(h2) {
  font-family: var(--font-display);
  font-size: clamp(22px, 2.5vw, 32px);
  font-weight: 400;
  color: var(--ink);
  line-height: 1.2;
  letter-spacing: -0.01em;
  margin: 52px 0 20px;
}
.entry-content h3,
.entry-content .wp-block-heading:is(h3) {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 400;
  color: var(--ink);
  margin: 40px 0 16px;
}
.entry-content h4,
.entry-content .wp-block-heading:is(h4) {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 400;
  color: var(--ink);
  margin: 32px 0 12px;
}
.entry-content blockquote,
.entry-content .wp-block-quote {
  border-left: 2px solid var(--accent);
  padding: 4px 0 4px 28px;
  margin: 44px 0;
  background: none;
}
.entry-content blockquote p,
.entry-content .wp-block-quote p {
  font-family: var(--font-display);
  font-size: clamp(18px, 2vw, 24px);
  font-weight: 400;
  font-style: italic;
  color: var(--ink);
  line-height: 1.5;
  margin-bottom: 0;
}
/* Remove Gutenberg's default quote border/padding since we set our own */
.entry-content .wp-block-quote {
  border: none;
  padding: 0 0 0 28px;
  border-left: 2px solid var(--accent);
}
.entry-content ul,
.entry-content ol,
.entry-content .wp-block-list {
  padding-left: 1.4em;
  margin-bottom: 28px;
  font-size: 18px;
  font-weight: 300;
  color: var(--ink-mid);
  line-height: 1.85;
}
.entry-content ul,
.entry-content .wp-block-list:not(ol) { list-style: disc; }
.entry-content ol { list-style: decimal; }
.entry-content li { margin-bottom: 8px; }
.entry-content a { color: var(--accent); text-decoration: underline; text-decoration-thickness: 1px; }
.entry-content a:hover { color: var(--accent-dark); }
.entry-content img { border-radius: 0; margin: 40px 0; }
.entry-content .wp-block-image { margin: 40px 0; }
.entry-content .wp-block-image img { border-radius: 0; }
.entry-content hr,
.entry-content .wp-block-separator { border: none; border-top: 1px solid var(--rule); margin: 52px 0; }
.entry-content .wp-block-separator:not(.is-style-dots)::before { display: none; }

/* Wide / full width blocks break out of the max-width */
.entry-content .alignwide  { max-width: 1000px; margin-left: auto; margin-right: auto; }
.entry-content .alignfull  { max-width: 100%; margin-left: calc(-1 * var(--side-pad)); margin-right: calc(-1 * var(--side-pad)); }

/* ── 10. BLOG / INSIGHTS ARCHIVE ──────────────────────────────────────────── */
.insights-header {
  padding: 72px var(--side-pad) 56px;
  max-width: var(--max-w);
  margin: 0 auto;
}
.insights-header h1 {
  font-family: var(--font-display);
  font-size: clamp(32px, 4vw, 54px);
  font-weight: 400;
  color: var(--ink);
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin-top: 12px;
}

.post-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--rule);
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 var(--side-pad);
}
.post-card {
  padding: 32px 28px;
  border-right: 1px solid var(--rule);
  cursor: pointer;
  transition: background 0.2s;
  text-decoration: none;
  display: block;
  color: inherit;
}
.post-card:nth-child(3n) { border-right: none; }
.post-card:hover { background: var(--paper-warm); }

.post-card-img {
  width: 100%;
  aspect-ratio: 16/9;
  background: var(--paper-warm);
  margin-bottom: 24px;
  overflow: hidden;
  position: relative;
}
.post-card-img img { width: 100%; height: 100%; object-fit: cover; }
.post-card-img-placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--paper-warm);
  background-image:
    repeating-linear-gradient(0deg, transparent, transparent 29px, rgba(28,28,30,0.04) 29px, rgba(28,28,30,0.04) 30px),
    repeating-linear-gradient(90deg, transparent, transparent 29px, rgba(28,28,30,0.04) 29px, rgba(28,28,30,0.04) 30px);
}

.post-card h3 {
  font-family: var(--font-display);
  font-size: 21px;
  font-weight: 400;
  color: var(--ink);
  line-height: 1.25;
  margin: 16px 0 14px;
}
.post-card p {
  font-size: 16px;
  font-weight: 300;
  color: var(--ink-mid);
  line-height: 1.75;
  margin-bottom: 20px;
}
.post-card-meta {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-top: 16px;
  border-top: 1px solid var(--rule);
}
.post-card-meta span { font-size: 12px; font-weight: 300; color: var(--ink-light); }
.post-card-meta .divider { width: 1px; height: 10px; background: var(--rule); }
.post-card-meta .read-link {
  margin-left: auto;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
  border-bottom: 1px solid var(--accent);
  padding-bottom: 1px;
}

.insights-pagination {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 48px var(--side-pad);
  display: flex;
  gap: 8px;
  justify-content: center;
}
.insights-pagination a,
.insights-pagination span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  font-size: 13px;
  font-weight: 400;
  color: var(--ink-mid);
  border: 1px solid var(--rule);
  text-decoration: none;
  transition: background 0.2s, color 0.2s;
}
.insights-pagination a:hover { background: var(--paper-warm); color: var(--ink); }
.insights-pagination .current { background: var(--ink); color: var(--paper); border-color: var(--ink); }

/* ── 11. SINGLE BLOG POST ─────────────────────────────────────────────────── */
.post-nav-back {
  background: var(--paper);
  border-bottom: 1px solid var(--rule);
  padding: 16px var(--side-pad);
}
.post-back-btn {
  background: none;
  border: none;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-light);
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0;
  transition: color 0.2s;
}
.post-back-btn:hover { color: var(--ink); }
.post-back-btn svg { width: 13px; height: 13px; stroke: currentColor; fill: none; stroke-width: 1.8; }

.post-hero-wrap {
  background: var(--paper);
  border-bottom: 1px solid var(--rule);
  padding: 64px var(--side-pad) 60px;
}
.post-hero-inner { max-width: 760px; margin: 0 auto; }
.post-h1 {
  font-family: var(--font-display);
  font-size: clamp(28px, 4vw, 50px);
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin: 24px 0;
}
.post-h1 em { font-style: italic; color: var(--accent); }
.post-lede {
  font-size: 19px;
  font-weight: 300;
  color: var(--ink-mid);
  line-height: 1.8;
  margin-bottom: 32px;
}
.post-meta {
  display: flex;
  align-items: center;
  gap: 16px;
  padding-top: 24px;
  border-top: 1px solid var(--rule);
  flex-wrap: wrap;
}
.post-meta-author { font-size: 13px; font-weight: 500; color: var(--ink); }
.post-meta-divider { width: 1px; height: 12px; background: var(--rule); flex-shrink: 0; }
.post-meta-detail { font-size: 13px; font-weight: 300; color: var(--ink-light); }

.post-cover-wrap {
  background: var(--paper-warm);
  border-bottom: 1px solid var(--rule);
  aspect-ratio: 16/7;
  overflow: hidden;
}
.post-cover-wrap img { width: 100%; height: 100%; object-fit: cover; }
.post-cover-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background-image:
    repeating-linear-gradient(0deg, transparent, transparent 59px, rgba(28,28,30,0.04) 59px, rgba(28,28,30,0.04) 60px),
    repeating-linear-gradient(90deg, transparent, transparent 59px, rgba(28,28,30,0.04) 59px, rgba(28,28,30,0.04) 60px);
}
.post-body-wrap {
  background: var(--paper);
  padding: 72px var(--side-pad);
}

/* Post end (author + next article) */
.post-end-wrap {
  background: var(--paper-warm);
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  padding: 60px var(--side-pad);
}
.post-end-inner {
  max-width: 760px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: start;
}
.author-row { display: flex; gap: 18px; align-items: flex-start; }
.author-avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--rule);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border: 1px solid var(--rule);
}
.author-avatar img { width: 100%; height: 100%; object-fit: cover; }
.author-avatar svg { width: 22px; height: 22px; stroke: var(--ink-light); fill: none; stroke-width: 1.2; }
.author-name { font-size: 14px; font-weight: 500; color: var(--ink); margin-bottom: 3px; }
.author-role { font-size: 12px; font-weight: 300; color: var(--ink-light); letter-spacing: 0.04em; margin-bottom: 10px; }
.author-bio  { font-size: 14px; font-weight: 300; color: var(--ink-mid); line-height: 1.7; }

.next-up-label { font-size: 10px; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-light); margin-bottom: 12px; display: block; }
.next-up-title {
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 400;
  color: var(--ink);
  line-height: 1.3;
  margin-bottom: 14px;
  text-decoration: none;
  display: block;
  transition: color 0.2s;
}
.next-up-title:hover { color: var(--accent); }
.next-up-cta {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
  border-bottom: 1px solid var(--accent);
  padding-bottom: 1px;
  text-decoration: none;
}

/* ── 12. CASE STUDY (SINGLE) ──────────────────────────────────────────────── */
.cs-hero-wrap {
  background: var(--paper);
  border-bottom: 1px solid var(--rule);
  padding: 64px var(--side-pad) 60px;
}
.cs-hero-inner { max-width: var(--max-w); margin: 0 auto; }
.cs-h1 {
  font-family: var(--font-display);
  font-size: clamp(28px, 4vw, 52px);
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--ink);
  max-width: 760px;
  margin: 24px 0 40px;
}
.cs-h1 em { font-style: italic; color: var(--accent); }

.cs-meta-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  border-top: 1px solid var(--rule);
  padding-top: 32px;
}
.cs-meta-item { padding-right: 24px; border-right: 1px solid var(--rule); }
.cs-meta-item:not(:first-child) { padding-left: 24px; }
.cs-meta-item:last-child { border-right: none; }
.cs-meta-label {
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-light);
  margin-bottom: 8px;
  display: block;
}
.cs-meta-value { font-size: 14px; font-weight: 400; color: var(--ink); }

.cs-cover-wrap {
  background: #2A2826;
  border-bottom: 1px solid var(--rule);
  aspect-ratio: 16/7;
  overflow: hidden;
}
.cs-cover-wrap img { width: 100%; height: 100%; object-fit: cover; }

/* Case study sections */
.cs-section {
  padding: 72px var(--side-pad);
  border-bottom: 1px solid var(--rule);
}
.cs-section.bg-warm { background: var(--paper-warm); }
.cs-section.bg-dark {
  background: var(--ink);
  border-bottom: none;
}

.cs-section-inner {
  max-width: var(--max-w);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 80px;
}
.cs-label {
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
  padding-top: 6px;
}
.cs-h2 {
  font-family: var(--font-display);
  font-size: clamp(22px, 2.5vw, 34px);
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin-bottom: 20px;
}
.cs-h2.light { color: var(--paper); }
.cs-p {
  font-size: 18px;
  font-weight: 400;
  color: #6f6f77;
  line-height: 1.85;
  margin-bottom: 24px;
}
.cs-p.light { color: rgba(247,245,241,0.82); }
.cs-p em { font-style: italic; color: var(--accent); }

/* Findings grid */
.cs-findings {
  max-width: var(--max-w);
  margin: 40px auto 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--rule);
}
.cs-finding {
  padding: 32px 28px 32px 0;
  border-right: 1px solid var(--rule);
}
.cs-finding:last-child { border-right: none; padding-right: 0; }
.cs-finding:not(:first-child) { padding-left: 28px; }
.cs-finding-num { font-family: var(--font-display); font-size: 11px; color: var(--ink-light); margin-bottom: 14px; display: block; }
.cs-finding h3 { font-family: var(--font-display); font-size: 19px; font-weight: 400; color: var(--ink); line-height: 1.3; margin-bottom: 10px; }
.cs-finding p  { font-size: 15px; font-weight: 300; color: var(--ink-mid); line-height: 1.75; }

/* Outcome stats */
.cs-stats {
  max-width: var(--max-w);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid rgba(255,255,255,0.1);
  padding-top: 40px;
}
.cs-stat { padding-right: 40px; border-right: 1px solid rgba(255,255,255,0.08); }
.cs-stat:not(:first-child) { padding-left: 40px; }
.cs-stat:last-child { border-right: none; }
.cs-stat-n {
  font-family: var(--font-display);
  font-size: clamp(36px, 5vw, 60px);
  font-weight: 400;
  color: var(--paper);
  display: block;
  line-height: 1;
  margin-bottom: 12px;
}
.cs-stat-n em { font-style: italic; color: var(--accent); }
.cs-stat-label { font-size: 15px; font-weight: 300; color: rgba(247,245,241,0.5); line-height: 1.65; }

/* ── 13. WORK / PORTFOLIO ARCHIVE ─────────────────────────────────────────── */
/* ── OUR WORK — Filter bar ─────────────────────────────────────────────────
   Mockup style: "Filter by" label + borderless tab buttons with count badges
   ────────────────────────────────────────────────────────────────────────── */
.work-filter-bar {
  padding: 0 var(--side-pad);
}
.work-filter-bar-inner {
  max-width: var(--max-w);
  margin: 0 auto;
  display: flex;
  align-items: stretch;
}
.work-filter-label {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-light);
  padding: 20px 28px 20px 0;
  border-right: 1px solid var(--rule);
  display: flex;
  align-items: center;
  flex-shrink: 0;
}
.filter-btn {
  background: none;
  border: none;
  border-right: 1px solid var(--rule);
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-mid);
  cursor: pointer;
  padding: 20px 24px;
  transition: color 0.2s, background 0.2s;
  display: flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}
.filter-btn:hover  { color: var(--ink); background: var(--paper-warm); }
.filter-btn.active { color: var(--ink); font-weight: 500; }
.filter-count {
  font-size: 10px;
  font-weight: 400;
  color: var(--ink-light);
  background: var(--paper-warm);
  border: 1px solid var(--rule);
  padding: 1px 6px;
  letter-spacing: 0.04em;
}
.filter-btn.active .filter-count {
  background: var(--accent);
  border-color: var(--accent);
  color: #ffffff;
}

/* ── OUR WORK — Project rows ───────────────────────────────────────────────
   Mockup style: full-width rows separated by bottom border (no card border),
   hover background, taller image column, spacious content padding
   ────────────────────────────────────────────────────────────────────────── */
.work-projects-section {
  padding: 0 var(--side-pad);
}
.work-projects-inner {
  max-width: var(--max-w);
  margin: 0 auto;
}

.work-project-row {
  display: grid;
  grid-template-columns: 500px 1fr;
  border-bottom: 1px solid var(--rule);
  text-decoration: none;
  color: inherit;
  transition: background 0.2s;
}
.work-project-row:hover { background: var(--paper-warm); }

/* Image column */
.work-project-img-col {
  border-right: 1px solid var(--rule);
  overflow: hidden;
  min-height: 340px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.work-project-img-placeholder {
  width: 100%;
  height: 100%;
  min-height: 340px;
  background: linear-gradient(135deg, #E2DDD6 0%, #CCC8C0 100%);
  display: flex;
  align-items: center;
  justify-content: center;
}
.work-project-img-placeholder img { width: 100%; height: 100%; object-fit: cover; }
.work-project-img-label {
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-light);
}

/* Content column */
.work-project-content-col {
  padding: 64px 56px 64px 60px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.work-project-top { flex: 1; }

/* Tags — all categories shown, not just first */
.work-project-tags {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 20px;
}
.work-project-tag {
  display: inline-block;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
  border: 1px solid var(--accent);
  padding: 4px 10px;
}

/* Title */
.work-project-content-col h2 {
  font-family: var(--font-display);
  font-size: clamp(20px, 2.2vw, 28px);
  font-weight: 400;
  color: var(--ink);
  line-height: 1.25;
  margin-bottom: 16px;
}

/* Excerpt */
.work-project-top > p {
  font-size: 17px;
  font-weight: 400;
  color: var(--ink-mid);
  line-height: 1.75;
  max-width: 540px;
}

/* Meta row: Methods · Technology · CTA */
.work-project-meta {
  margin-top: 48px;
  padding-top: 28px;
  border-top: 1px solid var(--rule);
  display: grid;
  grid-template-columns: 1fr 1fr auto;
  gap: 24px;
  align-items: end;
}
.work-project-meta-label {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-light);
  margin-bottom: 6px;
}
.work-project-meta-item p {
  font-size: 13px;
  font-weight: 300;
  color: var(--ink-mid);
  line-height: 1.55;
}

/* CTA link */
.work-project-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
  border-bottom: 1px solid var(--accent);
  padding-bottom: 1px;
  transition: color 0.2s, border-color 0.2s;
  white-space: nowrap;
  align-self: flex-end;
}
.work-project-row:hover .work-project-cta {
  color: var(--ink);
  border-color: var(--ink);
}

/* ── 14. POLICY / LEGAL PAGES ─────────────────────────────────────────────── */
.policy-page { padding: 72px var(--side-pad) 96px; }
.policy-page .policy-inner { max-width: 760px; margin: 0 auto; }
.policy-page h1 {
  font-family: var(--font-display);
  font-size: clamp(28px, 3.5vw, 44px);
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin-bottom: 8px;
}
.policy-page .policy-date { font-size: 13px; font-weight: 300; color: var(--ink-light); margin-bottom: 48px; }
.policy-page h2 {
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 400;
  color: var(--ink);
  margin: 40px 0 16px;
}
.policy-page p { font-size: 16px; font-weight: 300; color: var(--ink-mid); line-height: 1.85; margin-bottom: 20px; }

/* ── 15. RESPONSIVE ───────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  .nav-links { display: none; }
  .hamburger-btn { display: flex; }
  .custom-logo-link img, .nav-logo img { max-height: 13px; height: auto; }
  .nav-links.nav-open {
    display: flex;
    flex-direction: column;
    position: absolute;
    top: var(--nav-h);
    left: 0;
    right: 0;
    background: var(--paper);
    border-bottom: 1px solid var(--rule);
    padding: 16px 0;
    align-self: auto;
  }
  .nav-links.nav-open li { border-bottom: 1px solid var(--rule); }
  .nav-links.nav-open a { padding: 14px var(--side-pad); }
  .lang-toggle { display: none; }

  /* Lang toggle inside the hamburger menu */
  .nav-links li.nav-lang-mobile {
    display: block;
    border-bottom: none !important;
    padding: 14px var(--side-pad);
  }
  .nav-lang-mobile .lang-toggle {
    display: flex;
  }
  .nav-lang-mobile .lang-btn {
    font-size: 13px;
    padding: 4px 0;
  }

  .footer-top { grid-template-columns: 1fr; gap: 40px; }
  .post-grid  { grid-template-columns: 1fr; }
  .post-card  { border-right: none; border-bottom: 1px solid var(--rule); }
  .post-card:last-child { border-bottom: none; }
  .post-end-inner { grid-template-columns: 1fr; gap: 40px; }
  .cs-meta-grid   { grid-template-columns: 1fr 1fr; gap: 24px; }
  .cs-section-inner { grid-template-columns: 1fr; gap: 12px; }
  .cs-findings    { grid-template-columns: 1fr; }
  .cs-finding     { border-right: none; padding: 28px 0; border-bottom: 1px solid var(--rule); }
  .cs-stats       { grid-template-columns: 1fr; }
  .cs-stat        { border-right: none; padding: 24px 0; border-bottom: 1px solid rgba(255,255,255,0.08); }
  .work-project-row         { grid-template-columns: 1fr; }
  .work-project-img-col     { border-right: none; border-bottom: 1px solid var(--rule); }
  .work-project-img-placeholder { min-height: 220px; }
  .work-project-content-col { padding: 32px 24px; }
  .work-project-meta        { grid-template-columns: 1fr; gap: 16px; }
  .hd-featured-row          { grid-template-columns: 1fr; }
  .hd-featured-img-col      { border-right: none; border-bottom: 1px solid var(--rule); }
  .hd-featured-img-placeholder { min-height: 220px; }
  .hd-featured-content-col  { padding: 32px 24px; }
}

@media (max-width: 600px) {
  .cs-meta-grid { grid-template-columns: 1fr; }
  .work-filter-bar-inner { flex-wrap: wrap; }
  .work-filter-label     { width: 100%; border-right: none; padding: 16px 0 8px; }
  .filter-btn            { text-align: left; border-right: none; border-bottom: 1px solid var(--rule); }
  .footer-bottom { flex-direction: column; align-items: flex-start; }
}


/* ═══════════════════════════════════════════════════════════════════════════
   HOMEPAGE SECTIONS
   Classes for all homepage Custom HTML blocks. These replace inline styles
   so blocks in the editor are clean and readable.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Hero ─────────────────────────────────────────────────────────────────── */
.section-hero {
  padding: 110px var(--side-pad) 96px;
  border-bottom: 1px solid var(--rule);
  text-align: center;
}
.section-hero .hero-inner {
  max-width: 860px;
  margin: 0 auto;
}
.hero-eyebrow {
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}
.hero-eyebrow::before,
.hero-eyebrow::after {
  content: '';
  display: inline-block;
  width: 24px;
  height: 1px;
  background: var(--accent);
}
.hero-h1 {
  font-family: var(--font-display);
  font-size: clamp(38px, 5vw, 64px);
  font-weight: 400;
  line-height: 1.12;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin-bottom: 28px;
}
.hero-h1 em { font-style: italic; color: var(--accent); }
.hero-sub {
  font-size: 19px;
  font-weight: 400;
  color: var(--ink-mid);
  line-height: 1.7;
  max-width: 580px;
  margin: 0 auto 48px;
}
.hero-actions {
  display: flex;
  gap: 16px;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
}

/* ── Testimonials ─────────────────────────────────────────────────────────── */
.section-testimonials {
  padding: 56px var(--side-pad);
  background: var(--paper-warm);
  border-bottom: 1px solid var(--rule);
}
.section-testimonials > * {
  max-width: var(--max-w);
  margin-left: auto;
  margin-right: auto;
}
.testimonial-slider { max-width: 720px; margin-top: 32px; position: relative; overflow: hidden; }
.testimonial-track  { display: flex; transition: transform 0.5s ease; width: 100%; will-change: transform; }
.testimonial-slide  { min-width: 100%; width: 100%; flex-shrink: 0; box-sizing: border-box; overflow: hidden; }
.testimonial-text   { white-space: normal; word-wrap: break-word; }
.testimonial-text {
  font-family: var(--font-display);
  font-size: clamp(18px, 2.2vw, 26px);
  font-weight: 300;
  color: var(--ink);
  line-height: 1.6;
  margin-bottom: 28px;
}
.testimonial-byline { display: flex; align-items: center; gap: 12px; margin-top: 28px; }
.testimonial-avatar {
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--rule);
  border: 1px solid var(--rule);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  overflow: hidden;
}
.testimonial-avatar img { width: 100%; height: 100%; object-fit: cover; }
.testimonial-avatar svg { width: 22px; height: 22px; stroke: var(--ink-light); fill: none; stroke-width: 1.2; }
.testimonial-author { font-size: 14px; font-weight: 500; color: var(--accent); }
.testimonial-role   { font-size: 12px; font-weight: 300; color: var(--ink-light); letter-spacing: 0.06em; text-transform: uppercase; margin-top: 4px; }
.testimonial-dots   { display: flex; gap: 8px; margin-top: 32px; }
.dot { width: 20px; height: 2px; background: var(--rule); border: none; cursor: pointer; padding: 0; transition: background 0.2s; }
.dot.active { background: var(--accent); }

/* ── Shifts callout (dark band) ───────────────────────────────────────────── */
.section-shifts {
  background: var(--ink);
  padding: 72px var(--side-pad);
}
.shifts-inner {
  max-width: var(--max-w);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
}
.shifts-left h2 {
  font-family: var(--font-display);
  font-size: clamp(28px, 3.2vw, 42px);
  font-weight: 400;
  line-height: 1.2;
  color: var(--paper);
  margin-top: 16px;
  margin-bottom: 0;
}
.shifts-left h2 em { font-style: italic; color: var(--accent); }
.shifts-left p {
  font-size: 16px;
  font-weight: 300;
  color: rgba(247,245,241,0.95);
  line-height: 1.75;
  margin-top: 16px;
}
.shifts-right { display: flex; flex-direction: column; gap: 20px; }
.shift-item {
  padding: 20px 24px;
  border: 1px solid rgba(255,255,255,0.12);
  display: flex;
  gap: 16px;
  align-items: flex-start;
}
.shift-icon {
  width: 32px; height: 32px;
  flex-shrink: 0;
  border: 1px solid var(--accent);
  display: flex; align-items: center; justify-content: center;
  margin-top: 2px;
}
.shift-icon svg { width: 14px; height: 14px; stroke: var(--accent); fill: none; stroke-width: 1.5; }
.shift-item-label {
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 4px;
}
.shift-item p { font-size: 16px; font-weight: 300; color: rgba(247,245,241,0.95); line-height: 1.6; }

/* ── Context band (warm, 1/3 + 2/3) ──────────────────────────────────────── */
.section-context {
  background: var(--paper-warm);
  border-bottom: 1px solid var(--rule);
  padding: 72px var(--side-pad);
}
.context-inner {
  max-width: var(--max-w);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 80px;
  align-items: start;
}
.context-label {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  margin-top: 6px;
}
.context-body h2 {
  font-family: var(--font-display);
  font-size: clamp(24px, 2.8vw, 36px);
  font-weight: 400;
  line-height: 1.25;
  color: var(--ink);
  margin-bottom: 24px;
}
.context-body p {
  font-size: 16px;
  font-weight: 300;
  color: var(--ink-mid);
  line-height: 1.75;
  max-width: 600px;
}

/* ── Pillars (where we can help) ──────────────────────────────────────────── */
.section-pillars {
  background: var(--paper);
  border-bottom: 1px solid var(--rule);
  padding: 80px var(--side-pad);
}
.pillars-inner { max-width: var(--max-w); margin: 0 auto; }
.pillars-header {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  margin-bottom: 60px;
  align-items: end;
}
.pillars-header h2 {
  font-family: var(--font-display);
  font-size: clamp(28px, 3vw, 40px);
  font-weight: 400;
  line-height: 1.2;
  color: var(--ink);
}
.pillars-header p {
  font-size: 17px;
  font-weight: 400;
  color: var(--ink-mid);
  line-height: 1.8;
}
.pillars-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--rule);
}
.pillar {
  padding: 40px 36px 40px 0;
  border-right: 1px solid var(--rule);
}
.pillar:last-child  { border-right: none; padding-right: 0; }
.pillar:not(:first-child) { padding-left: 36px; }
.pillar-num {
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 400;
  letter-spacing: 0.1em;
  color: var(--ink-light);
  margin-bottom: 20px;
  display: block;
}
.pillar h3 {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 400;
  color: var(--ink);
  margin-bottom: 14px;
  line-height: 1.3;
}
.pillar p { font-size: 17px; font-weight: 400; color: var(--ink-mid); line-height: 1.8; }
.pillar-link {
  display: inline-block;
  margin-top: 20px;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
  text-decoration: none;
  border-bottom: 1px solid var(--accent);
  padding-bottom: 1px;
  transition: color 0.2s, border-color 0.2s;
}
.pillar-link:hover { color: var(--ink); border-color: var(--ink); }

/* ── Why section (3 cards) ────────────────────────────────────────────────── */
.section-why {
  background: var(--paper-warm);
  padding: 80px var(--side-pad);
}
.why-inner  { max-width: var(--max-w); margin: 0 auto; }
.why-header { margin-bottom: 56px; }
.why-header h2 {
  font-family: var(--font-display);
  font-size: clamp(24px, 2.8vw, 36px);
  font-weight: 400;
  color: var(--ink);
  margin-top: 12px;
}
.why-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
}
.why-card {
  background: var(--paper-warm);
  padding: 32px;
  border: 1px solid var(--rule);
}
.why-card-label {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.why-card-label::before {
  content: '';
  display: inline-block;
  width: 18px;
  height: 1px;
  background: var(--accent);
}
.why-card h3 { font-family: var(--font-display); font-size: 20px; font-weight: 400; color: var(--ink); margin-bottom: 12px; }
.why-card p  { font-size: 17px; font-weight: 400; color: var(--ink-mid); line-height: 1.8; }

/* ── CTA band ─────────────────────────────────────────────────────────────── */
.section-cta {
  border-bottom: 1px solid var(--rule);
  padding: 96px var(--side-pad);
  text-align: center;
}
.cta-inner { max-width: 700px; margin: 0 auto; }
.cta-inner h2 {
  font-family: var(--font-display);
  font-size: clamp(28px, 3.5vw, 46px);
  font-weight: 400;
  line-height: 1.2;
  color: var(--ink);
  margin-bottom: 20px;
}
.cta-inner h2 em { font-style: italic; color: var(--accent); }
.cta-inner p {
  font-size: 17px;
  font-weight: 400;
  color: var(--ink-mid);
  margin-bottom: 40px;
  line-height: 1.7;
}
.cta-actions {
  display: flex;
  justify-content: center;
  gap: 20px;
  flex-wrap: wrap;
  align-items: center;
}

/* ── Responsive overrides for homepage sections ───────────────────────────── */
@media (max-width: 900px) {
  .shifts-inner    { grid-template-columns: 1fr; gap: 48px; }
  .context-inner   { grid-template-columns: 1fr; gap: 16px; }
  .pillars-header  { grid-template-columns: 1fr; gap: 16px; }
  .pillars-grid    { grid-template-columns: 1fr; }
  .pillar          { border-right: none; padding: 32px 0; border-bottom: 1px solid var(--rule); }
  .pillar:last-child { border-bottom: none; }
  .pillar:not(:first-child) { padding-left: 0; }
  .why-grid        { grid-template-columns: 1fr; gap: 24px; }
}

/* ── Group block layout overrides ─────────────────────────────────────────
   Gutenberg wraps Group blocks in a constrained layout by default.
   These rules restore the grid layouts our CSS classes expect.
   ─────────────────────────────────────────────────────────────────────── */

/* Reset WP's max-width constraint — only when inside a Gutenberg Group block */
.wp-block-group .shifts-inner,
.wp-block-group .context-inner,
.wp-block-group .pillars-inner,
.wp-block-group .pillars-header,
.wp-block-group .pillars-grid,
.wp-block-group .why-inner,
.wp-block-group .why-grid {
  max-width: none;
  margin-left: 0;
  margin-right: 0;
}

/* Gutenberg adds a default gap to Group blocks — remove it for our grids */
.wp-block-group.pillars-grid,
.wp-block-group.why-grid,
.wp-block-group.shifts-inner,
.wp-block-group.context-inner {
  gap: unset;
}

/* section-eyebrow inside a Group loses its ::before pseudo by default
   if Gutenberg wraps it — ensure it still shows */
.wp-block-group .section-eyebrow::before {
  content: '';
  display: inline-block;
  width: 24px;
  height: 1px;
  background: var(--accent);
}

/* Buttons: override WP's default button styling so our classes win */
.wp-block-button.btn-primary .wp-block-button__link {
  background: var(--ink);
  color: var(--paper);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 14px 28px;
  border-radius: 0;
  border: none;
  transition: background 0.2s;
}
.wp-block-button.btn-primary .wp-block-button__link:hover {
  background: var(--ink-mid);
}
.wp-block-button.btn-ghost .wp-block-button__link {
  background: transparent;
  color: var(--ink-mid);
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0;
  border-radius: 0;
  border: none;
  border-bottom: 1px solid var(--rule);
  padding-bottom: 2px;
  box-shadow: none;
  transition: color 0.2s, border-color 0.2s;
}
.wp-block-button.btn-ghost .wp-block-button__link:hover {
  color: var(--ink);
  border-color: var(--ink);
  background: transparent;
}

/* Heading inside hero — override WP margin defaults */
.section-hero .wp-block-heading.hero-h1 {
  font-family: var(--font-display);
  font-size: clamp(38px, 5vw, 64px);
  font-weight: 400;
  line-height: 1.12;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin-bottom: 28px;
  margin-top: 0;
}
.section-hero .wp-block-heading.hero-h1 em {
  font-style: italic;
  color: var(--accent);
}

/* Headings inside dark shifts section */
.section-shifts .wp-block-heading {
  font-family: var(--font-display);
  font-size: clamp(28px, 3.2vw, 42px);
  font-weight: 400;
  line-height: 1.2;
  color: var(--paper);
  margin-top: 16px;
  margin-bottom: 0;
}
.section-shifts .wp-block-heading em { color: var(--accent); font-style: italic; }
.section-shifts .wp-block-paragraph { color: rgba(247,245,241,0.85); font-size: 16px; font-weight: 300; line-height: 1.75; margin-top: 16px; }

/* Headings in context section */
.context-body .wp-block-heading {
  font-family: var(--font-display);
  font-size: clamp(24px, 2.8vw, 36px);
  font-weight: 400;
  line-height: 1.25;
  color: var(--ink);
  margin-bottom: 24px;
}
.context-body .wp-block-paragraph { font-size: 16px; font-weight: 300; color: var(--ink-mid); line-height: 1.75; }

/* Pillars headings */
.pillars-header .wp-block-heading {
  font-family: var(--font-display);
  font-size: clamp(28px, 3vw, 40px);
  font-weight: 400;
  line-height: 1.2;
  color: var(--ink);
}
.pillars-header .wp-block-paragraph { font-size: 17px; font-weight: 400; color: var(--ink-mid); line-height: 1.8; }
.pillar .wp-block-heading { font-family: var(--font-display); font-size: 20px; font-weight: 400; color: var(--ink); line-height: 1.3; margin-bottom: 14px; margin-top: 0; }
.pillar .wp-block-paragraph { font-size: 17px; font-weight: 400; color: var(--ink-mid); line-height: 1.8; }

/* Why cards headings */
.why-card .wp-block-heading { font-family: var(--font-display); font-size: 20px; font-weight: 400; color: var(--ink); margin-bottom: 12px; margin-top: 0; }
.why-card .wp-block-paragraph { font-size: 17px; font-weight: 400; color: var(--ink-mid); line-height: 1.8; }

/* CTA band headings */
.cta-inner .wp-block-heading {
  font-family: var(--font-display);
  font-size: clamp(28px, 3.5vw, 46px);
  font-weight: 400;
  line-height: 1.2;
  color: var(--ink);
  margin-bottom: 20px;
}
.cta-inner .wp-block-heading em { font-style: italic; color: var(--accent); }
.cta-inner .wp-block-paragraph { font-size: 17px; font-weight: 400; color: var(--ink-mid); line-height: 1.7; margin-bottom: 40px; }

/* ── Featured project shortcode ───────────────────────────────────────────── */
.section-featured-project {
  background: var(--paper);
  border-bottom: 1px solid var(--rule);
}
.hd-featured-inner {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 80px var(--side-pad);
}
.hd-featured-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 36px;
}

/* Row — mirrors .work-project-row */
.hd-featured-row {
  display: grid;
  grid-template-columns: 500px 1fr;
  border-bottom: 1px solid var(--rule);
  text-decoration: none;
  color: inherit;
  overflow: hidden;
  transition: background 0.2s;
}
.hd-featured-row:hover { background: var(--paper-warm); }

/* Image column */
.hd-featured-img-col {
  border-right: 1px solid var(--rule);
  overflow: hidden;
}
.hd-featured-img-placeholder {
  width: 100%;
  height: 100%;
  min-height: 340px;
  background: linear-gradient(135deg, #E2DDD6 0%, #CCC8C0 100%);
  display: flex;
  align-items: center;
  justify-content: center;
}
.hd-featured-img-placeholder img { width: 100%; height: 100%; object-fit: cover; }
.hd-featured-img-label {
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-light);
}

/* Content column */
.hd-featured-content-col {
  padding: 64px 56px 64px 60px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.hd-featured-top { flex: 1; }
.hd-featured-content-col h3 {
  font-family: var(--font-display);
  font-size: clamp(20px, 2.2vw, 28px);
  font-weight: 400;
  color: var(--ink);
  line-height: 1.25;
  margin-bottom: 16px;
}
.hd-featured-top > p {
  font-size: 17px;
  font-weight: 400;
  color: var(--ink-mid);
  line-height: 1.75;
  max-width: 540px;
}
/* Tags reuse .work-project-tags and .work-project-tag */
/* Meta row reuses .work-project-meta, .work-project-meta-label, .work-project-cta */

/* ── Insights preview shortcode ───────────────────────────────────────────── */
.section-insights-preview {
  background: var(--paper-warm);
  border-bottom: 1px solid var(--rule);
}
.insights-preview-inner {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 88px var(--side-pad);
}
.insights-preview-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 48px;
}
.insights-preview-header h2 {
  font-family: var(--font-display);
  font-size: clamp(28px, 3vw, 40px);
  font-weight: 400;
  color: var(--ink);
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin-top: 12px;
}
.insights-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--rule);
}
.insights-card {
  padding: 32px 28px 32px 0;
  border-right: 1px solid var(--rule);
  text-decoration: none;
  color: inherit;
  display: flex;
  flex-direction: column;
  transition: background 0.2s;
}
.insights-card:hover { background: var(--rule); }
.insights-card--last { border-right: none; padding-left: 28px; padding-right: 0; }
.insights-card:not(.insights-card--last):not(:first-child) { padding-left: 28px; }
.insights-card-img {
  width: 100%;
  aspect-ratio: 16/9;
  overflow: hidden;
  margin-bottom: 24px;
  background: var(--paper-warm);
}
.insights-card-img img { width: 100%; height: 100%; object-fit: cover; }
.insights-card-img-placeholder {
  width: 100%; height: 100%; min-height: 160px;
  background-image:
    repeating-linear-gradient(0deg, transparent, transparent 29px, rgba(28,28,30,0.04) 29px, rgba(28,28,30,0.04) 30px),
    repeating-linear-gradient(90deg, transparent, transparent 29px, rgba(28,28,30,0.04) 29px, rgba(28,28,30,0.04) 30px);
}
.insights-card h3 {
  font-family: var(--font-display);
  font-size: 21px;
  font-weight: 400;
  color: var(--ink);
  line-height: 1.25;
  margin: 16px 0 14px;
}
.insights-card p {
  font-size: 16px;
  font-weight: 300;
  color: var(--ink-mid);
  line-height: 1.75;
  margin-bottom: 20px;
  flex: 1;
}
.insights-card-meta {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-top: 16px;
  border-top: 1px solid var(--rule);
  margin-top: auto;
}
.insights-card-meta span {
  font-size: 12px;
  font-weight: 300;
  color: var(--ink-light);
}
.insights-card-meta-divider {
  width: 1px;
  height: 10px;
  background: var(--rule);
}
.insights-card-read {
  margin-left: auto !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent) !important;
  border-bottom: 1px solid var(--accent);
  padding-bottom: 1px;
}

@media (max-width: 900px) {
  .hd-featured-row          { grid-template-columns: 1fr; }
  .hd-featured-img-col      { border-right: none; border-bottom: 1px solid var(--rule); }
  .hd-featured-header       { flex-direction: column; gap: 12px; }
  .insights-cards           { grid-template-columns: 1fr; }
  .insights-card            { border-right: none; border-bottom: 1px solid var(--rule); padding: 32px 0; }
  .insights-card--last      { border-bottom: none; padding-left: 0; }
  .insights-card:not(.insights-card--last):not(:first-child) { padding-left: 0; }
  .insights-preview-header  { flex-direction: column; gap: 16px; }
}

/* ── Polylang language switcher ───────────────────────────────────────────── */
/* When Polylang is active, lang-btn becomes an <a> tag instead of <button>.
   These rules ensure both look identical. */
a.lang-btn {
  background: none;
  border: none;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-light);
  padding: 2px 0;
  text-decoration: none;
  transition: color 0.2s;
  display: inline-block;
}
a.lang-btn.active { color: var(--ink); font-weight: 500; }
a.lang-btn:hover  { color: var(--ink); }

/* ── Insights page ────────────────────────────────────────────────────────── */
.section-page-hero {
  border-bottom: 1px solid var(--rule);
  padding: 96px var(--side-pad) 80px;
}
.section-page-hero--wide .page-hero-inner {
  grid-template-columns: 1fr;
}
.section-page-hero--wide .page-hero-inner h1 {
  max-width: 60%;
}
.page-hero-inner {
  max-width: var(--max-w);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 100px;
  align-items: end;
}
.page-hero-inner h1 {
  font-family: var(--font-display);
  font-size: clamp(36px, 4.5vw, 58px);
  font-weight: 400;
  line-height: 1.12;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin-top: 16px;
}
.page-hero-inner h1 em { font-style: italic; color: var(--accent); }
.page-hero-right p {
  font-size: 17px;
  font-weight: 400;
  color: var(--ink-mid);
  line-height: 1.8;
}

/* ── Newsletter band ──────────────────────────────────────────────────────── */
.section-newsletter {
  background: var(--paper-warm);
  padding: 72px var(--side-pad);
  border-bottom: 1px solid var(--rule);
}
.newsletter-band-inner {
  max-width: var(--max-w);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 100px;
  align-items: center;
}
.newsletter-band-inner h2 {
  font-family: var(--font-display);
  font-size: clamp(24px, 2.8vw, 34px);
  font-weight: 400;
  line-height: 1.25;
  color: var(--ink);
  margin-bottom: 12px;
}
.newsletter-band-inner h2 em { font-style: italic; color: var(--accent); }
.newsletter-band-inner p {
  font-size: 17px;
  font-weight: 400;
  color: var(--ink-mid);
  line-height: 1.8;
}
.nl-wrap { display: flex; flex-direction: column; gap: 12px; }
/* .wpcf7 is a flex column: form row on top, response message below */
.nl-wrap .wpcf7 { margin: 0; display: flex; flex-direction: column; width: 100%; }
.nl-form,
.nl-wrap .wpcf7-form { display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; align-items: stretch !important; border: 1px solid var(--rule); overflow: hidden; background: var(--paper-card); width: 100%; align-self: flex-start; }
.nl-wrap .wpcf7 br { display: none !important; }
.nl-wrap .wpcf7 p { margin: 0 !important; display: contents !important; }
.nl-wrap .wpcf7-form-control-wrap { flex: 1 1 auto !important; display: block !important; min-width: 0 !important; margin: 0 !important; padding: 0 !important; width: auto !important; }
.nl-wrap .wpcf7-submit { flex: 0 0 auto !important; display: block !important; width: auto !important; margin: 0 !important; align-self: stretch !important; }
.nl-input,
.nl-wrap .wpcf7-email {
  flex: 1; width: 100%; border: none !important; box-shadow: none !important; background: transparent;
  padding: 14px 18px; font-family: var(--font-body);
  font-size: 15px; font-weight: 300; color: var(--ink); outline: none; height: 100%;
}
.nl-input::placeholder,
.nl-wrap .wpcf7-email::placeholder { color: var(--ink-light); }
.nl-btn,
.nl-wrap .wpcf7-submit {
  background: var(--ink); color: var(--paper); border: none !important; box-shadow: none !important;
  padding: 14px 24px; font-family: var(--font-body);
  font-size: 12px; font-weight: 500; letter-spacing: 0.08em;
  text-transform: uppercase; cursor: pointer; transition: background 0.2s; flex-shrink: 0;
  align-self: stretch;
}
.nl-btn:hover,
.nl-wrap .wpcf7-submit:hover { background: var(--ink-mid); }
.nl-disclaimer { font-size: 12px; font-weight: 300; color: var(--ink-light); line-height: 1.6; margin-top: 10px; }

@media (max-width: 900px) {
  .page-hero-inner      { grid-template-columns: 1fr; gap: 24px; }
  .newsletter-band-inner { grid-template-columns: 1fr; gap: 40px; }
}

/* ── Global: em inside headings gets accent colour ────────────────────────
   Covers all page sections without needing inline styles on <em> tags.
   This means you never need style="color:var(--accent)" on an <em> — just
   wrap the italic text in <em> and it will be terracotta automatically.    */
.section-hero h1 em,
.section-page-hero h1 em,
.section-shifts h2 em,
.section-context h2 em,
.section-pillars h2 em,
.section-why h2 em,
.section-cta h2 em,
.section-newsletter h2 em,
.section-featured-project h2 em,
.section-insights-preview h2 em,
.page-hero-inner h1 em,
.page-hero-inner h2 em {
  font-style: italic;
  color: var(--accent);
}

/* ── Broad em accent rule ─────────────────────────────────────────────────
   Any <em> inside a heading anywhere on the site gets accent colour.
   This is intentional — em in headings is only ever used for the terracotta
   italic effect. Body text em remains plain italic via the cascade.        */
h1 em, h2 em, h3 em { 
  font-style: italic; 
  color: var(--accent); 
}

/* ═══════════════════════════════════════════════════════════════════════════
   SHORTCODE & TEMPLATE COMPONENT CLASSES
   Replaces all inline styles in functions.php, home.php, single-case_study.php
   and homepage-dynamic.php.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Post grid (home.php + [bestgoed_post_grid] shortcode) ────────────────── */
.pg-wrap          { max-width: var(--max-w); margin: 0 auto; }
.pg-no-posts      { padding: 48px var(--side-pad); }

/* Featured post */
.pg-featured {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-bottom: 1px solid var(--rule);
  text-decoration: none;
  color: inherit;
  transition: background 0.2s;
}
.pg-featured:hover           { background: var(--paper-warm); }
.pg-featured-img             { border-right: 1px solid var(--rule); min-height: 420px; overflow: hidden; }
.pg-featured-img img         { width: 100%; height: 100%; object-fit: cover; }
.pg-featured-img-placeholder {
  width: 100%; height: 100%; min-height: 420px;
  background: linear-gradient(135deg, #E2DDD6 0%, #C4BEB4 100%);
  display: flex; align-items: flex-end; padding: 32px;
}
.pg-featured-body            { padding: 64px 56px; display: flex; flex-direction: column; justify-content: space-between; }
.pg-featured-body h2 {
  font-family: var(--font-display);
  font-size: clamp(22px, 2.5vw, 32px);
  font-weight: 400;
  color: var(--ink);
  line-height: 1.25;
  margin: 20px 0 16px;
}
.pg-featured-body > div > p  { font-size: 17px; font-weight: 400; color: var(--ink-mid); line-height: 1.8; }

/* Post card grid */
.pg-grid         { display: grid; grid-template-columns: repeat(2, 1fr); border-bottom: 1px solid var(--rule); }
.pg-card         { text-decoration: none; color: inherit; display: flex; flex-direction: column; justify-content: space-between; transition: background 0.2s; }
.pg-card:hover   { background: var(--paper-warm); }
.pg-card--left   { padding: 56px 56px 56px 0; border-right: 1px solid var(--rule); }
.pg-card--right  { padding: 56px 0 56px 56px; }
.pg-card-img     { width: 100%; aspect-ratio: 16/9; overflow: hidden; margin-bottom: 32px; background: var(--paper-warm); }
.pg-card-img img { width: 100%; height: 100%; object-fit: cover; }
.pg-card-img-placeholder {
  width: 100%; height: 100%; min-height: 200px;
  background: linear-gradient(135deg, #E2DDD6 0%, #C8C4BC 100%);
  display: flex; align-items: center; justify-content: center;
}
.pg-card h3 {
  font-family: var(--font-display);
  font-size: clamp(18px, 2vw, 24px);
  font-weight: 400;
  color: var(--ink);
  line-height: 1.25;
  margin: 20px 0 16px;
}
.pg-card p { font-size: 17px; font-weight: 400; color: var(--ink-mid); line-height: 1.8; }
.pg-card p p { margin: 0; } /* nested p from wpautop */

/* Post meta row (shared by featured + cards) */
.pg-meta         { display: flex; align-items: center; gap: 16px; margin-top: 40px; padding-top: 24px; border-top: 1px solid var(--rule); }
.pg-meta-date    { font-size: 12px; font-weight: 300; color: var(--ink-light); }
.pg-meta-divider { width: 1px; height: 12px; background: var(--rule); flex-shrink: 0; }
.pg-meta-read    { font-size: 12px; font-weight: 300; color: var(--ink-light); }
.pg-meta-cta     { margin-left: auto; font-size: 12px; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent); border-bottom: 1px solid var(--accent); padding-bottom: 1px; white-space: nowrap; }

/* Placeholder label (no image) */
.pg-img-label    { font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-light); }

/* Pagination */
.pg-pagination   { display: flex; gap: 8px; justify-content: center; padding: 48px var(--side-pad); }
.pg-page-link    { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; font-size: 13px; font-weight: 400; color: var(--ink-mid); border: 1px solid var(--rule); text-decoration: none; transition: background 0.2s, color 0.2s; }
.pg-page-link:hover   { background: var(--paper-warm); color: var(--ink); }
.pg-page-link.current { background: var(--ink); color: var(--paper); border-color: var(--ink); }

/* ── Case study single (single-case_study.php) ────────────────────────────── */
.cs-cover-placeholder {
  width: 100%; height: 100%; min-height: 300px;
  display: flex; align-items: center; justify-content: center;
  background: var(--ink);
  background-image:
    repeating-linear-gradient(0deg, transparent, transparent 59px, rgba(255,255,255,.03) 59px, rgba(255,255,255,.03) 60px),
    repeating-linear-gradient(90deg, transparent, transparent 59px, rgba(255,255,255,.03) 59px, rgba(255,255,255,.03) 60px);
}
.cs-cover-placeholder-label { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: rgba(247,245,241,0.3); }
.cs-body-section  { padding: 72px var(--side-pad); border-bottom: 1px solid var(--rule); }
.cs-body-inner    { max-width: 760px; margin: 0 auto; }
.cs-outcome-section { background: var(--ink); padding: 80px var(--side-pad); }
.cs-outcome-inner { max-width: var(--max-w); margin: 0 auto; }
.cs-outcome-label { font-size: 10px; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent); display: block; margin-bottom: 40px; }
.cs-cta-section   { background: var(--paper); padding: 96px var(--side-pad); text-align: center; }
.cs-cta-inner     { max-width: 580px; margin: 0 auto; }
.cs-cta-inner h2  { font-family: var(--font-display); font-size: clamp(24px, 3vw, 38px); font-weight: 400; line-height: 1.2; color: var(--ink); margin-bottom: 16px; letter-spacing: -0.01em; }
.cs-cta-inner p   { font-size: 17px; font-weight: 300; color: var(--ink-mid); line-height: 1.75; margin-bottom: 36px; }
.cs-cta-actions   { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; align-items: center; }

/* ── Homepage dynamic sections (homepage-dynamic.php) ─────────────────────── */
.hd-featured-header { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 36px; }
.hd-featured-card {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border: 1px solid var(--rule);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: border-color 0.2s;
}
.hd-featured-card:hover        { border-color: var(--accent); }
.hd-featured-card-img          { border-right: 1px solid var(--rule); min-height: 260px; overflow: hidden; background: var(--paper-warm); }
.hd-featured-card-img img      { width: 100%; height: 100%; object-fit: cover; }
.hd-featured-card-img-empty    { width: 100%; height: 100%; min-height: 260px; background: linear-gradient(135deg, #E2DDD6 0%, #CCC8C0 100%); display: flex; align-items: center; justify-content: center; }
.hd-featured-card-body         { padding: 40px; display: flex; flex-direction: column; gap: 12px; justify-content: center; background: var(--paper-card); }
.hd-featured-card-body h3      { font-family: var(--font-display); font-size: clamp(18px, 2vw, 24px); font-weight: 400; color: var(--ink); line-height: 1.3; }
.hd-featured-card-body p       { font-size: 17px; font-weight: 400; color: var(--ink-mid); line-height: 1.8; }
.hd-featured-card-cta          { font-size: 12px; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent); margin-top: 8px; }

.hd-insights-header            { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 48px; }
.hd-insights-header h2         { font-family: var(--font-display); font-size: clamp(28px, 3vw, 40px); font-weight: 400; color: var(--ink); line-height: 1.15; letter-spacing: -0.02em; margin-top: 12px; }
.hd-insights-grid              { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--rule); }
.hd-insights-card              { text-decoration: none; color: inherit; display: block; transition: background 0.2s; }
.hd-insights-card:hover        { background: var(--rule); }
.hd-insights-card--0           { padding: 32px 28px 32px 0; border-right: 1px solid var(--rule); }
.hd-insights-card--1           { padding: 32px 28px; border-right: 1px solid var(--rule); }
.hd-insights-card--2           { padding: 32px 0 32px 28px; }
.hd-insights-card-img          { width: 100%; aspect-ratio: 16/9; overflow: hidden; margin-bottom: 24px; position: relative; background: var(--paper-warm); }
.hd-insights-card-img img      { width: 100%; height: 100%; object-fit: cover; }
.hd-insights-card-img-empty    { position: absolute; inset: 0; background-image: repeating-linear-gradient(0deg,transparent,transparent 29px,rgba(28,28,30,0.04) 29px,rgba(28,28,30,0.04) 30px),repeating-linear-gradient(90deg,transparent,transparent 29px,rgba(28,28,30,0.04) 29px,rgba(28,28,30,0.04) 30px); }
.hd-insights-card h3           { font-family: var(--font-display); font-size: 21px; font-weight: 400; color: var(--ink); line-height: 1.25; margin: 16px 0 14px; }
.hd-insights-card p            { font-size: 16px; font-weight: 300; color: var(--ink-mid); line-height: 1.75; margin-bottom: 20px; }
.hd-insights-card-meta         { display: flex; align-items: center; gap: 12px; padding-top: 16px; border-top: 1px solid var(--rule); }
.hd-insights-card-meta-date    { font-size: 12px; font-weight: 300; color: var(--ink-light); }
.hd-insights-card-meta-divider { width: 1px; height: 10px; background: var(--rule); flex-shrink: 0; }
.hd-insights-card-meta-read    { font-size: 12px; font-weight: 300; color: var(--ink-light); }
.hd-insights-card-meta-cta     { margin-left: auto; font-size: 11px; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent); border-bottom: 1px solid var(--accent); padding-bottom: 1px; }

@media (max-width: 900px) {
  .pg-featured      { grid-template-columns: 1fr; }
  .pg-featured-img  { border-right: none; border-bottom: 1px solid var(--rule); min-height: 260px; }
  .pg-grid          { grid-template-columns: 1fr; }
  .pg-card--left,
  .pg-card--right   { padding: 40px 0; border-right: none; border-bottom: 1px solid var(--rule); }
  .hd-featured-card { grid-template-columns: 1fr; }
  .hd-featured-card-img { border-right: none; border-bottom: 1px solid var(--rule); }
  .hd-insights-grid { grid-template-columns: 1fr; }
  .hd-insights-card--0,
  .hd-insights-card--1,
  .hd-insights-card--2 { padding: 32px 0; border-right: none; border-bottom: 1px solid var(--rule); }
}

/* ── Case study entry content (max-width override) ───────────────────────── */
.cs-entry-content { max-width: none; width: 100%; }

/* ── Homepage dynamic card grid (featured card inner grid) ───────────────── */
.hd-featured-card-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

@media (max-width: 900px) {
  .hd-featured-card-grid { grid-template-columns: 1fr; }
  .cs-cta-actions { flex-direction: column; align-items: center; }
}

/* ── em in section body paragraphs (newsletter, context etc.) ─────────────── */
.section-newsletter p em,
.section-context p em,
.section-testimonials p em {
  font-style: italic;
  color: var(--accent);
}

/* ═══════════════════════════════════════════════════════════════════════════
   OUR APPROACH PAGE
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Service cards list ───────────────────────────────────────────────────── */
.section-services { border-bottom: 1px solid var(--rule); padding: 80px var(--side-pad); }
.services-inner   { max-width: var(--max-w); margin: 0 auto; }
.services-header  { margin-bottom: 56px; }
.services-header h2 {
  font-family: var(--font-display);
  font-size: clamp(28px, 3vw, 40px);
  font-weight: 400;
  line-height: 1.2;
  color: var(--ink);
  margin-top: 16px;
}
.services-list    { display: flex; flex-direction: column; border-top: 1px solid var(--rule); }

.service-card {
  display: grid;
  grid-template-columns: 80px 1fr 1fr;
  border-bottom: 1px solid var(--rule);
  transition: background 0.2s;
}
.service-card:hover { background: var(--paper-warm); }

.service-num {
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 400;
  letter-spacing: 0.1em;
  color: var(--ink-light);
  padding: 52px 0 48px;
  border-right: 1px solid var(--rule);
  display: flex;
  align-items: flex-start;
}
.service-main {
  padding: 48px 48px 48px 40px;
  border-right: 1px solid var(--rule);
}
.service-tag {
  display: inline-block;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
  border: 1px solid var(--accent);
  padding: 4px 10px;
  margin-bottom: 20px;
}
.service-main h3 {
  font-family: var(--font-display);
  font-size: clamp(22px, 2.5vw, 30px);
  font-weight: 400;
  color: var(--ink);
  line-height: 1.25;
  margin-bottom: 16px;
}
.service-main p {
  font-size: 17px;
  font-weight: 400;
  color: var(--ink-mid);
  line-height: 1.75;
  max-width: 480px;
}
.service-main p + p { margin-top: 16px; }

.service-detail {
  padding: 48px 40px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 28px;
}
.service-outcome {
  background: var(--paper-warm);
  border: 1px solid var(--rule);
  padding: 24px 28px;
}
.service-outcome-label {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.service-outcome-label::before {
  content: '';
  display: inline-block;
  width: 14px;
  height: 1px;
  background: var(--accent);
}
.service-outcome p { font-size: 16px; font-weight: 400; color: var(--ink); line-height: 1.65; }
.service-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
  text-decoration: none;
  border-bottom: 1px solid var(--accent);
  padding-bottom: 1px;
  transition: color 0.2s, border-color 0.2s;
  align-self: flex-start;
}
.service-link:hover { color: var(--ink); border-color: var(--ink); }

/* ── In practice (warm, 2-col image + text) ───────────────────────────────── */
.section-in-practice {
  background: var(--paper-warm);
  border-bottom: 1px solid var(--rule);
}
.in-practice-inner {
  max-width: var(--max-w);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: stretch;
}
.in-practice-text {
  padding: 72px 80px 72px 0;
}
.in-practice-text h2 {
  font-family: var(--font-display);
  font-size: clamp(24px, 2.8vw, 34px);
  font-weight: 400;
  line-height: 1.25;
  color: var(--ink);
  margin: 16px 0 20px;
}
.in-practice-text p {
  font-size: 17px;
  font-weight: 400;
  color: var(--ink-mid);
  line-height: 1.75;
}
.in-practice-img {
  background: transparent;
  position: relative;
  overflow: visible;
  padding: 48px 0 48px 56px;
  display: flex;
  flex-direction: column;
}
.in-practice-img img {
  display: block;
  width: 100%;
  object-fit: cover;
  flex: 1;
  min-height: 260px;
}
.in-practice-img-label {
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-light);
  display: block;
  margin-top: 8px;
}

/* ── Benefits section ─────────────────────────────────────────────────────── */
.section-benefits {
  padding: 80px var(--side-pad);
  border-bottom: 1px solid var(--rule);
}
.benefits-inner  { max-width: var(--max-w); margin: 0 auto; }
.benefits-header {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: end;
  margin-bottom: 60px;
}
.benefits-header h2 {
  font-family: var(--font-display);
  font-size: clamp(26px, 3vw, 38px);
  font-weight: 400;
  line-height: 1.2;
  color: var(--ink);
  margin-top: 12px;
}
.benefits-header p { font-size: 17px; font-weight: 400; color: var(--ink-mid); line-height: 1.8; }
.benefits-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--rule);
}
.benefit-item {
  padding: 40px 36px 40px 0;
  border-right: 1px solid var(--rule);
}
.benefit-item:last-child  { border-right: none; padding-right: 0; }
.benefit-item:not(:first-child) { padding-left: 36px; }
.benefit-item-label {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.benefit-item-label::before {
  content: '';
  display: inline-block;
  width: 14px;
  height: 1px;
  background: var(--accent);
}
.benefit-item h3 { font-family: var(--font-display); font-size: 20px; font-weight: 400; color: var(--ink); margin-bottom: 10px; }
.benefit-item p  { font-size: 16px; font-weight: 400; color: var(--ink-mid); line-height: 1.75; }

/* ── Sprint section (dark) ────────────────────────────────────────────────── */
.section-sprint {
  background: var(--ink);
  padding: 80px var(--side-pad);
  border-bottom: 1px solid var(--rule);
}
.sprint-inner {
  max-width: var(--max-w);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 100px;
  align-items: start;
}
.sprint-eyebrow {
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.sprint-eyebrow::before { content: ''; display: inline-block; width: 24px; height: 1px; background: var(--accent); }
.sprint-left h2 {
  font-family: var(--font-display);
  font-size: clamp(28px, 3vw, 40px);
  font-weight: 400;
  color: var(--paper);
  line-height: 1.2;
  margin-bottom: 12px;
}
.sprint-left h2 em { font-style: italic; color: var(--accent); }
.sprint-left p {
  font-size: 17px;
  font-weight: 300;
  color: rgba(247,245,241,0.82);
  line-height: 1.75;
  margin-top: 20px;
}
.sprint-cta {
  display: inline-block;
  margin-top: 36px;
  background: var(--accent);
  color: #ffffff;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 14px 28px;
  text-decoration: none;
  transition: background 0.2s;
}
.sprint-cta:hover { background: var(--accent-dark); color: #fff; }
.sprint-steps { display: flex; flex-direction: column; }
.sprint-step {
  display: flex;
  gap: 20px;
  align-items: flex-start;
  padding: 24px 0;
  border-bottom: 1px solid rgba(255,255,255,0.1);
}
.sprint-step:last-child { border-bottom: none; }
.step-n {
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 400;
  color: var(--accent);
  width: 28px;
  flex-shrink: 0;
  margin-top: 2px;
}
.step-content h4 { font-size: 16px; font-weight: 500; color: var(--paper); margin-bottom: 6px; }
.step-content p  { font-size: 17px; font-weight: 400; color: rgba(247,245,241,0.88); line-height: 1.65; }

/* ── Responsive: Our Approach ─────────────────────────────────────────────── */
@media (max-width: 900px) {
  /* Service cards: stack to single column */
  .service-card {
    grid-template-columns: 1fr;
  }
  .service-num {
    padding: 24px 0 0;
    border-right: none;
    border-bottom: none;
  }
  .service-main {
    padding: 16px 0 24px;
    border-right: none;
  }
  .service-main p { max-width: none; }
  .service-detail {
    padding: 0 0 40px;
    border-top: 1px solid var(--rule);
  }

  /* In practice: stack */
  .in-practice-inner { grid-template-columns: 1fr; }
  .in-practice-text  { padding: 48px 0; border-right: none; border-bottom: 1px solid var(--rule); }
  .in-practice-img   { min-height: 260px; }

  /* Benefits: stack */
  .benefits-header { grid-template-columns: 1fr; gap: 16px; margin-bottom: 40px; }
  .benefits-grid   { grid-template-columns: 1fr; }
  .benefit-item    { border-right: none; padding: 32px 0; border-bottom: 1px solid var(--rule); }
  .benefit-item:last-child { border-bottom: none; }
  .benefit-item:not(:first-child) { padding-left: 0; }

  /* Sprint: stack */
  .sprint-inner { grid-template-columns: 1fr; gap: 48px; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   ABOUT PAGE
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Mission section ──────────────────────────────────────────────────────── */
.section-mission {
  padding: 88px var(--side-pad);
  border-bottom: 1px solid var(--rule);
}
.mission-inner {
  max-width: var(--max-w);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 100px;
  align-items: start;
}
.mission-left h2 {
  font-family: var(--font-display);
  font-size: clamp(26px, 3vw, 36px);
  font-weight: 400;
  line-height: 1.25;
  color: var(--ink);
  margin: 16px 0 32px;
}
.mission-left p {
  font-size: 17px;
  font-weight: 400;
  color: var(--ink-mid);
  line-height: 1.8;
  margin-bottom: 20px;
}
.mission-left p strong { font-weight: 500; color: var(--ink); }
.mission-img {
  width: 100%;
  aspect-ratio: 4/3;
  background: linear-gradient(135deg, #E2DDD6 0%, #C4BEB4 100%);
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  padding: 20px;
  margin-bottom: 8px;
}
.mission-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.mission-pull {
  font-family: var(--font-display);
  font-size: clamp(18px, 2.2vw, 24px);
  font-weight: 400;
  font-style: italic;
  color: var(--ink-mid);
  line-height: 1.6;
  padding-left: 28px;
  border-left: 2px solid var(--accent);
}

/* ── Studio section ───────────────────────────────────────────────────────── */
.section-studio {
  background: var(--paper-warm);
  padding: 88px var(--side-pad);
  border-bottom: 1px solid var(--rule);
}
.studio-inner {
  max-width: var(--max-w);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 100px;
  align-items: start;
}
.studio-img {
  width: 100%;
  aspect-ratio: 3/4;
  background: linear-gradient(135deg, #E2DDD6 0%, #C4BEB4 100%);
  display: flex;
  align-items: flex-end;
  padding: 24px;
}
.studio-img img { width: 100%; height: 100%; object-fit: cover; }
.studio-img-label { font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-light); margin-bottom: 32px; display: block; }
.studio-right h2 {
  font-family: var(--font-display);
  font-size: clamp(26px, 3vw, 36px);
  font-weight: 400;
  line-height: 1.25;
  color: var(--ink);
  margin: 16px 0 32px;
}
.studio-right p {
  font-size: 17px;
  font-weight: 400;
  color: var(--ink-mid);
  line-height: 1.8;
  margin-bottom: 20px;
}
.studio-right p strong { font-weight: 500; color: var(--ink); }
.studio-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 32px;
  padding-top: 32px;
  border-top: 1px solid var(--rule);
}

/* ── Name section ─────────────────────────────────────────────────────────── */
.section-name {
  padding: 88px var(--side-pad);
  border-bottom: 1px solid var(--rule);
}
.name-inner {
  max-width: var(--max-w);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 80px;
  align-items: start;
}
.name-display {
  font-family: var(--font-display);
  font-size: clamp(48px, 7vw, 88px);
  font-weight: 400;
  font-style: italic;
  color: var(--ink);
  line-height: 1;
  letter-spacing: -0.02em;
  margin-top: 24px;
  display: block;
}
.name-right h2 {
  font-family: var(--font-display);
  font-size: clamp(24px, 2.8vw, 34px);
  font-weight: 400;
  line-height: 1.25;
  color: var(--ink);
  margin-bottom: 28px;
}
.name-right p {
  font-size: 17px;
  font-weight: 400;
  color: var(--ink-mid);
  line-height: 1.8;
  margin-bottom: 18px;
}
.pronunciation {
  display: block;
  margin-top: 16px;
  padding: 16px 20px;
  border: 1px solid var(--rule);
  background: var(--paper-warm);
  font-size: 13px;
  font-weight: 300;
  color: var(--ink-mid);
  font-style: italic;
  line-height: 1.7;
}
.pronunciation strong { font-weight: 500; color: var(--ink); font-style: normal; }
.pronunciation a { color: var(--accent); text-decoration: none; border-bottom: 1px solid var(--accent); padding-bottom: 1px; }

/* ── Founder section ──────────────────────────────────────────────────────── */
.section-founder {
  background: var(--ink);
  padding: 88px var(--side-pad);
  border-bottom: 1px solid var(--rule);
}
.founder-inner {
  max-width: var(--max-w);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 340px 1fr;
  gap: 80px;
  align-items: start;
}
.founder-img {
  aspect-ratio: 3/4;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.08);
  background: var(--paper-warm);
}
.founder-img img { width: 100%; height: 100%; object-fit: cover; }
.founder-img-placeholder {
  width: 100%; height: 100%;
  background: linear-gradient(160deg, #2a2620 0%, #1C1C1E 100%);
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
  padding: 24px;
  min-height: 400px;
}
.founder-img-label { font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(247,245,241,0.3); }
.founder-eyebrow {
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 20px;
}
.founder-eyebrow::before { content: ''; display: inline-block; width: 24px; height: 1px; background: var(--accent); }
.founder-name {
  font-family: var(--font-display);
  font-size: clamp(28px, 3.5vw, 44px);
  font-weight: 400;
  color: var(--paper);
  line-height: 1.15;
  margin-bottom: 6px;
}
.founder-title {
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 36px;
}
.founder-bio {
  font-size: 17px;
  font-weight: 400;
  color: rgba(247,245,241,0.85);
  line-height: 1.8;
  max-width: 560px;
}
.founder-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 40px; }
.founder-tag {
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(247,245,241,0.5);
  border: 1px solid rgba(255,255,255,0.12);
  padding: 6px 14px;
}

/* ── Responsive: About ────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  .mission-inner  { grid-template-columns: 1fr; gap: 40px; }
  .studio-inner   { grid-template-columns: 1fr; gap: 40px; }
  .studio-img     { aspect-ratio: 16/9; }
  .name-inner     { grid-template-columns: 1fr; gap: 32px; }
  .name-display   { font-size: clamp(48px, 10vw, 72px); }
  .founder-inner  { grid-template-columns: 1fr; gap: 40px; }
  .founder-img    { max-width: 280px; }
  .founder-bio    { max-width: none; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   CONTACT PAGE
   ═══════════════════════════════════════════════════════════════════════════ */

.section-contact {
  padding: 88px var(--side-pad);
  border-bottom: 1px solid var(--rule);
}
.contact-inner {
  max-width: var(--max-w);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 100px;
  align-items: start;
}
.contact-detail-block {
  padding: 32px 0;
  border-bottom: 1px solid var(--rule);
}
.contact-detail-block:first-child { padding-top: 0; }
.contact-detail-block:last-child  { border-bottom: none; }
.contact-detail-label {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.contact-detail-label::before {
  content: '';
  display: inline-block;
  width: 14px;
  height: 1px;
  background: var(--accent);
}
.contact-detail-block h3 {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 400;
  color: var(--ink);
  margin-bottom: 8px;
}
.contact-detail-block p {
  font-size: 16px;
  font-weight: 400;
  color: var(--ink-mid);
  line-height: 1.7;
  margin-bottom: 16px;
}
.contact-link {
  display: block;
  font-size: 16px;
  font-weight: 400;
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid var(--rule);
  padding-bottom: 2px;
  margin-bottom: 10px;
  transition: color 0.2s, border-color 0.2s;
  width: fit-content;
}
.contact-link:hover { color: var(--accent); border-color: var(--accent); }
.contact-location { font-size: 16px; font-weight: 400; color: var(--ink-mid); line-height: 1.6; }
.contact-location strong { display: block; font-weight: 500; color: var(--ink); margin-bottom: 4px; }

/* Contact form */
.contact-form-wrap {
  background: var(--paper-card);
  border: 1px solid var(--rule);
  padding: 48px;
}
.form-heading {
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 400;
  color: var(--ink);
  margin-bottom: 8px;
}
.form-subheading {
  font-size: 16px;
  font-weight: 400;
  color: var(--ink-mid);
  line-height: 1.65;
  margin-bottom: 40px;
}
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.form-field { margin-bottom: 24px; }
.form-label {
  display: block;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-light);
  margin-bottom: 8px;
}
.form-label .required { color: var(--accent); margin-left: 2px; }
.form-input,
.form-textarea {
  width: 100%;
  background: var(--paper);
  border: 1px solid var(--rule);
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 300;
  color: var(--ink);
  padding: 12px 16px;
  outline: none;
  transition: border-color 0.2s;
  border-radius: 0;
  -webkit-appearance: none;
}
.form-input:focus,
.form-textarea:focus   { border-color: var(--accent); }
.form-input::placeholder,
.form-textarea::placeholder { color: var(--ink-light); }
.form-textarea         { resize: vertical; min-height: 148px; line-height: 1.65; }
.form-submit {
  display: block;
  width: 100%;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 16px 32px;
  border: none;
  cursor: pointer;
  transition: background 0.2s;
  margin-top: 8px;
}
.form-submit:hover { background: var(--ink-mid); }
.form-note {
  font-size: 12px;
  font-weight: 300;
  color: var(--ink-light);
  margin-top: 16px;
  line-height: 1.6;
}

/* Contact newsletter */
.section-contact-newsletter {
  background: var(--paper-warm);
  padding: 72px var(--side-pad);
  border-bottom: 1px solid var(--rule);
}
.contact-newsletter-inner {
  max-width: var(--max-w);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 100px;
  align-items: center;
}
.contact-newsletter-inner h2 {
  font-family: var(--font-display);
  font-size: clamp(24px, 2.8vw, 34px);
  font-weight: 400;
  line-height: 1.25;
  color: var(--ink);
  margin: 12px 0;
}
.contact-newsletter-inner p {
  font-size: 17px;
  font-weight: 400;
  color: var(--ink-mid);
  line-height: 1.8;
}

/* ── Responsive: Contact ──────────────────────────────────────────────────── */
@media (max-width: 900px) {
  .contact-inner             { grid-template-columns: 1fr; gap: 48px; }
  .contact-form-wrap         { padding: 32px 24px; }
  .form-row                  { grid-template-columns: 1fr; }
  .contact-newsletter-inner  { grid-template-columns: 1fr; gap: 40px; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   CONTACT FORM 7 — Style overrides to match the Best Goed form design
   ═══════════════════════════════════════════════════════════════════════════ */

/* Remove CF7 default browser outline and box-shadow */
.wpcf7 { margin: 0; }
.wpcf7 form { margin: 0; }

/* All text inputs, email, tel, url */
.wpcf7 .wpcf7-text,
.wpcf7 .wpcf7-email,
.wpcf7 .wpcf7-tel,
.wpcf7 .wpcf7-url,
.wpcf7 .wpcf7-number,
.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 input[type="tel"],
.wpcf7 input[type="url"] {
  width: 100%;
  background: var(--paper);
  border: 1px solid var(--rule);
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 300;
  color: var(--ink);
  padding: 12px 16px;
  outline: none;
  border-radius: 0;
  -webkit-appearance: none;
  transition: border-color 0.2s;
  box-shadow: none;
}
.wpcf7 .wpcf7-text:focus,
.wpcf7 .wpcf7-email:focus,
.wpcf7 input[type="text"]:focus,
.wpcf7 input[type="email"]:focus { border-color: var(--accent); }

.wpcf7 .wpcf7-text::placeholder,
.wpcf7 .wpcf7-email::placeholder,
.wpcf7 input::placeholder { color: var(--ink-light); }

/* Textarea */
.wpcf7 .wpcf7-textarea,
.wpcf7 textarea {
  width: 100%;
  background: var(--paper);
  border: 1px solid var(--rule);
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 300;
  color: var(--ink);
  padding: 12px 16px;
  outline: none;
  border-radius: 0;
  -webkit-appearance: none;
  resize: vertical;
  min-height: 148px;
  line-height: 1.65;
  transition: border-color 0.2s;
  box-shadow: none;
}
.wpcf7 textarea:focus { border-color: var(--accent); }
.wpcf7 textarea::placeholder { color: var(--ink-light); }

/* Submit button */
.wpcf7 .wpcf7-submit,
.wpcf7 input[type="submit"] {
  display: block;
  width: 100%;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 16px 32px;
  border: none;
  border-radius: 0;
  cursor: pointer;
  transition: background 0.2s;
  -webkit-appearance: none;
  margin-top: 8px;
}
.wpcf7 .wpcf7-submit:hover,
.wpcf7 input[type="submit"]:hover { background: var(--ink-mid); }

/* Labels */
.wpcf7 label {
  display: block;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-light);
  margin-bottom: 8px;
  font-family: var(--font-body);
}

/* Field spacing */
.wpcf7 p,
.wpcf7 .wpcf7-form-control-wrap { display: block; margin-bottom: 24px; }
.wpcf7 br { display: none; } /* CF7 adds <br> tags — hide them */

/* Validation messages */
.wpcf7 .wpcf7-not-valid-tip {
  font-size: 12px;
  color: var(--accent);
  margin-top: 4px;
  display: block;
}
.wpcf7 .wpcf7-not-valid {
  border-color: var(--accent) !important;
}
.wpcf7 .wpcf7-response-output {
  font-size: 13px;
  font-weight: 400;
  padding: 12px 16px;
  margin-top: 16px;
  border: 1px solid var(--rule);
  border-radius: 0;
}
.wpcf7 .wpcf7-mail-sent-ok {
  border-color: #4a7c59;
  color: #4a7c59;
  background: #f0f7f2;
}
.wpcf7 .wpcf7-mail-sent-ng,
.wpcf7 .wpcf7-spam-blocked {
  border-color: var(--accent);
  color: var(--accent);
  background: #fdf2f0;
}

/* ── Newsletter form feedback (footer + contact page) ────────────────────── */
/* CF7's native output is hidden; theme.js injects .nl-feedback instead      */
.footer-newsletter .wpcf7,
.nl-wrap .wpcf7 { display: flex; flex-direction: column; width: 100%; }
.footer-newsletter .wpcf7-response-output,
.nl-wrap .wpcf7-response-output { display: none !important; }

.nl-feedback { display: none; }
.nl-feedback.nl-feedback--success,
.nl-feedback.nl-feedback--error {
  display: block;
  margin-top: 14px;
  padding: 0;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.6;
  letter-spacing: 0.02em;
  background: transparent;
  border: none;
}
.nl-feedback.nl-feedback--success {
  color: #2e5e3e;
}
.nl-feedback.nl-feedback--error {
  color: var(--accent);
}

/* Disclaimer text below newsletter forms */
.nl-disclaimer {
  font-size: 12px;
  font-weight: 300;
  color: var(--ink-light);
  line-height: 1.6;
  margin-top: 10px;
}

/* Spinner */
.wpcf7 .wpcf7-spinner {
  display: none;
}

/* ── CF7 additional selectors — catches all input variants ───────────────── */
.wpcf7 .wpcf7-form-control,
.wpcf7 input.wpcf7-form-control,
.wpcf7 textarea.wpcf7-form-control,
.contact-form-wrap input,
.contact-form-wrap textarea,
.contact-form-wrap select {
  width: 100%;
  background: var(--paper);
  border: 1px solid var(--rule);
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 300;
  color: var(--ink);
  padding: 12px 16px;
  outline: none;
  border-radius: 0;
  -webkit-appearance: none;
  transition: border-color 0.2s;
  box-shadow: none;
}
.wpcf7 .wpcf7-form-control:focus,
.contact-form-wrap input:focus,
.contact-form-wrap textarea:focus { border-color: var(--accent); }

.wpcf7 .wpcf7-form-control::placeholder,
.contact-form-wrap input::placeholder,
.contact-form-wrap textarea::placeholder { color: var(--ink-light); }

/* The submit button specifically */
.wpcf7 input.wpcf7-submit {
  display: block;
  width: 100%;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 16px 32px;
  border: none;
  border-radius: 0;
  cursor: pointer;
  transition: background 0.2s;
  margin-top: 8px;
}
.wpcf7 input.wpcf7-submit:hover { background: var(--ink-mid); }

/* Remove the spin buttons on number inputs */
.wpcf7 input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; }

/* CF7 wraps each field in a span — make it block so width:100% works */
.wpcf7-form-control-wrap { display: block; width: 100%; }

/* ── Text page template (Privacy, Terms, etc.) ────────────────────────────── */
.text-page {
  padding: 72px var(--side-pad) 96px;
  background: var(--paper);
}
.text-page-inner {
  max-width: 760px;
  margin: 0 auto;
}
.text-page-title {
  font-family: var(--font-display);
  font-size: clamp(28px, 3.5vw, 44px);
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin-bottom: 48px;
  padding-bottom: 32px;
  border-bottom: 1px solid var(--rule);
}

/* ═══════════════════════════════════════════════════════════════════════════
   CASE STUDY BODY — GUTENBERG NATIVE BLOCKS
   All editing done in the native Gutenberg editor.
   The body column is 760px. Images and groups can break out using
   Gutenberg's alignment options (Wide = 1200px, Full = 100%).
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Image alignment ──────────────────────────────────────────────────────── */
/* Default: constrained to text column (760px via .cs-body-inner) */
.cs-entry-content .wp-block-image { margin: 40px 0; }
.cs-entry-content .wp-block-image img { width: 100%; height: auto; display: block; }
.cs-entry-content .wp-block-image figcaption {
  font-size: 13px;
  font-weight: 300;
  color: var(--ink-light);
  margin-top: 10px;
  font-style: italic;
}

/* Wide image — breaks out to 1200px */
.cs-entry-content .wp-block-image.alignwide {
  max-width: var(--max-w);
  width: calc(100% + ((100vw - 760px) / 2));
  margin-left: calc(-1 * (100vw - 760px) / 4);
  margin-right: calc(-1 * (100vw - 760px) / 4);
}

/* Full-width image — edge to edge */
.cs-entry-content .wp-block-image.alignfull {
  max-width: 100vw;
  width: calc(100% + (2 * var(--side-pad)));
  margin-left: calc(-1 * var(--side-pad));
  margin-right: calc(-1 * var(--side-pad));
}

/* ── Columns block ────────────────────────────────────────────────────────── */
.cs-entry-content .wp-block-columns {
  display: flex;
  gap: 48px;
  margin: 40px 0;
  align-items: flex-start;
}
.cs-entry-content .wp-block-column { flex: 1; min-width: 0; }
.cs-entry-content .wp-block-column p { margin-bottom: 16px; }
.cs-entry-content .wp-block-column h3 {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 400;
  color: var(--ink);
  margin-bottom: 12px;
}

/* ── Group blocks as section bands ───────────────────────────────────────── */
/* Add a background colour to a Group block via the block settings sidebar.
   These presets match the brand palette.                                    */
.cs-entry-content .wp-block-group {
  padding: 40px 48px;
  margin: 40px 0;
}
/* Remove padding if the group is just used as a layout wrapper (no bg) */
.cs-entry-content .wp-block-group:not([style*="background"]):not(.has-background) {
  padding: 0;
}

/* ── Pull quote ───────────────────────────────────────────────────────────── */
.cs-entry-content .wp-block-pullquote {
  border-top: 2px solid var(--accent);
  border-bottom: 2px solid var(--accent);
  padding: 32px 0;
  margin: 52px 0;
  text-align: left;
}
.cs-entry-content .wp-block-pullquote blockquote { margin: 0; border: none; padding: 0; }
.cs-entry-content .wp-block-pullquote p {
  font-family: var(--font-display);
  font-size: clamp(20px, 2.5vw, 28px);
  font-weight: 400;
  font-style: italic;
  color: var(--ink);
  line-height: 1.5;
  margin-bottom: 0;
}
.cs-entry-content .wp-block-pullquote cite {
  display: block;
  font-size: 13px;
  font-weight: 400;
  font-style: normal;
  color: var(--accent);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-top: 16px;
}

/* ── Separator ────────────────────────────────────────────────────────────── */
.cs-entry-content .wp-block-separator {
  border: none;
  border-top: 1px solid var(--rule);
  margin: 52px 0;
}

/* ── Media & Text block ───────────────────────────────────────────────────── */
.cs-entry-content .wp-block-media-text {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: center;
  margin: 40px 0;
}
.cs-entry-content .wp-block-media-text .wp-block-media-text__media img {
  width: 100%; height: auto; display: block;
}
.cs-entry-content .wp-block-media-text .wp-block-media-text__content { padding: 0; }
.cs-entry-content .wp-block-media-text.has-media-on-the-right .wp-block-media-text__media {
  order: 2;
}
.cs-entry-content .wp-block-media-text.has-media-on-the-right .wp-block-media-text__content {
  order: 1;
}

/* ── Table block ─────────────────────────────────────────────────────────── */
.cs-entry-content .wp-block-table { margin: 40px 0; }
.cs-entry-content .wp-block-table table {
  width: 100%;
  border-collapse: collapse;
  font-size: 16px;
}
.cs-entry-content .wp-block-table th {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-light);
  padding: 12px 16px;
  border-bottom: 1px solid var(--rule);
  text-align: left;
}
.cs-entry-content .wp-block-table td {
  padding: 12px 16px;
  border-bottom: 1px solid var(--rule);
  color: var(--ink-mid);
  font-weight: 300;
}
.cs-entry-content .wp-block-table tr:last-child td { border-bottom: none; }

/* ── Cover block ──────────────────────────────────────────────────────────── */
.cs-entry-content .wp-block-cover {
  margin: 40px 0;
  min-height: 320px;
}

/* ── Responsive: case study body blocks ──────────────────────────────────── */
@media (max-width: 900px) {
  .cs-entry-content .wp-block-columns    { flex-direction: column; gap: 32px; }
  .cs-entry-content .wp-block-media-text { grid-template-columns: 1fr; }
  .cs-entry-content .wp-block-media-text.has-media-on-the-right .wp-block-media-text__media { order: 1; }
  .cs-entry-content .wp-block-media-text.has-media-on-the-right .wp-block-media-text__content { order: 2; }
  .cs-entry-content .wp-block-image.alignwide,
  .cs-entry-content .wp-block-image.alignfull { width: 100%; margin-left: 0; margin-right: 0; }
}


/* ═══════════════════════════════════════════════════════════════════════════
   COMPLIANZ COOKIE BANNER — Best Goed brand overrides
   Targets the Complianz | GDPR/CCPA plugin banner and its buttons.
   All colours use the existing CSS custom properties so changes to the
   design tokens automatically flow through here too.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Banner container ─────────────────────────────────────────────────────── */
.cmplz-cookiebanner {
  font-family: var(--font-body) !important;
  background: var(--paper) !important;
  border-top: 1px solid var(--rule) !important;
  border-radius: 0 !important;
  box-shadow: 0 -4px 32px rgba(28,28,30,0.08) !important;
  color: var(--ink) !important;
  padding: 28px var(--side-pad) !important;
  max-width: 100% !important;
}

/* Positioned variants — Complianz supports bottom-bar, popup, etc. */
.cmplz-cookiebanner.cmplz-bottom {
  border-top: 1px solid var(--rule) !important;
  border-bottom: none !important;
}
.cmplz-cookiebanner.cmplz-top {
  border-top: none !important;
  border-bottom: 1px solid var(--rule) !important;
  box-shadow: 0 4px 32px rgba(28,28,30,0.08) !important;
}

/* Popup / box variant */
.cmplz-cookiebanner.cmplz-popup {
  border: 1px solid var(--rule) !important;
  border-radius: 0 !important;
  max-width: 480px !important;
  padding: 36px !important;
}

/* ── Inner layout ─────────────────────────────────────────────────────────── */
.cmplz-cookiebanner .cmplz-header {
  font-family: var(--font-display) !important;
  font-size: 20px !important;
  font-weight: 400 !important;
  color: var(--ink) !important;
  margin-bottom: 10px !important;
}

.cmplz-cookiebanner .cmplz-body,
.cmplz-cookiebanner p {
  font-size: 15px !important;
  font-weight: 400 !important;
  color: var(--ink-mid) !important;
  line-height: 1.7 !important;
  margin: 0 0 20px !important;
}

/* Consent / preferences form text */
.cmplz-cookiebanner .cmplz-consent-message,
.cmplz-cookiebanner .cmplz-title,
.cmplz-cookiebanner .cmplz-message {
  font-size: 15px !important;
  font-weight: 400 !important;
  color: var(--ink-mid) !important;
  line-height: 1.7 !important;
}

.cmplz-cookiebanner a {
  color: var(--ink) !important;
  text-decoration: underline !important;
  text-underline-offset: 2px !important;
}
.cmplz-cookiebanner a:hover {
  color: var(--accent) !important;
}

/* ── Banner layout: three rows stacked, always — never grid ──────────────── */
/* Scoped to .cmplz-show so that Complianz can still hide with display:none */
.cmplz-cookiebanner.cmplz-show,
.cmplz-cookiebanner.cmplz-show.cmplz-categories-visible,
.cmplz-cookiebanner.cmplz-show.cmplz-categories-type-view-preferences {
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
  grid-template-columns: unset !important;
  grid-template-rows: unset !important;
  max-width: 760px !important;
}
/* Hide the dividers — they break the flex flow */
.cmplz-cookiebanner .cmplz-divider {
  display: none !important;
}

/* Hide the manage-options links row (separate from documents) */
.cmplz-cookiebanner .cmplz-links.cmplz-information {
  display: none !important;
}

/* Row 1: body — stack message and categories vertically, always full width */
.cmplz-cookiebanner .cmplz-body {
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  width: 100% !important;
  grid-column: unset !important;
  grid-row: unset !important;
}

/* Prevent Complianz's internal grid from splitting body into columns */
.cmplz-cookiebanner .cmplz-body .cmplz-message,
.cmplz-cookiebanner .cmplz-body .cmplz-categories {
  width: 100% !important;
  grid-column: unset !important;
  float: none !important;
}

/* Row 2: categories — hidden by default, only shown after "View Preferences" is clicked.
   Complianz adds .cmplz-categories-visible to the banner when preferences are open. */
.cmplz-cookiebanner .cmplz-categories {
  display: none !important;
}

.cmplz-cookiebanner.cmplz-categories-visible .cmplz-categories {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
  align-items: flex-start !important;
}

.cmplz-cookiebanner .cmplz-category {
  flex: 1 1 auto !important;
}

/* Row 3: buttons — horizontal, side by side */
.cmplz-cookiebanner .cmplz-buttons {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
  align-items: center !important;
  order: 2 !important;
}

/* Row 3: document links — last */
.cmplz-cookiebanner .cmplz-links.cmplz-documents {
  order: 3 !important;
}

/* Base reset for all Complianz buttons */
.cmplz-cookiebanner .cmplz-btn {
  font-family: var(--font-body) !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  letter-spacing: 0.07em !important;
  text-transform: uppercase !important;
  border-radius: 0 !important;
  padding: 10px 22px !important;
  cursor: pointer !important;
  transition: background 0.2s, color 0.2s, border-color 0.2s !important;
  text-decoration: none !important;
  line-height: 1 !important;
  width: auto !important;
  flex: 0 0 auto !important;
  /* No display override here — Complianz JS controls show/hide via inline style */
}

/* Accept / primary button — filled ink */
.cmplz-cookiebanner .cmplz-accept,
.cmplz-cookiebanner .cmplz-btn-accept {
  background: var(--ink) !important;
  color: var(--paper) !important;
  border: 1px solid var(--ink) !important;
}
.cmplz-cookiebanner .cmplz-accept:hover,
.cmplz-cookiebanner .cmplz-btn-accept:hover {
  background: var(--accent) !important;
  border-color: var(--accent) !important;
  color: var(--paper) !important;
}

/* Deny / reject button — ghost */
.cmplz-cookiebanner .cmplz-deny,
.cmplz-cookiebanner .cmplz-btn-deny {
  background: transparent !important;
  color: var(--ink) !important;
  border: 1px solid var(--ink) !important;
}
.cmplz-cookiebanner .cmplz-deny:hover,
.cmplz-cookiebanner .cmplz-btn-deny:hover {
  background: var(--paper-warm) !important;
}

/* Manage preferences — text link style */
.cmplz-cookiebanner .cmplz-manage-consent,
.cmplz-cookiebanner .cmplz-btn-manage {
  background: transparent !important;
  color: var(--ink-light) !important;
  border: none !important;
  padding: 10px 4px !important;
  text-decoration: underline !important;
  text-underline-offset: 2px !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  font-size: 13px !important;
  font-weight: 400 !important;
}
.cmplz-cookiebanner .cmplz-manage-consent:hover,
.cmplz-cookiebanner .cmplz-btn-manage:hover {
  color: var(--ink) !important;
}

/* Hide the duplicate "View preferences" <a> link (the tcf one) —
   the <button> version is sufficient */
.cmplz-cookiebanner .cmplz-buttons a.cmplz-manage-options {
  display: none !important;
}

/* ── Preferences / category checkboxes ───────────────────────────────────── */
.cmplz-cookiebanner .cmplz-categories {
  margin: 0 !important;
}
.cmplz-cookiebanner .cmplz-category label {
  font-size: 13px !important;
  color: var(--ink-mid) !important;
  font-weight: 400 !important;
}
.cmplz-cookiebanner input[type="checkbox"]:checked {
  accent-color: var(--ink) !important;
}

/* ── Close / X button ────────────────────────────────────────────────────── */
.cmplz-cookiebanner .cmplz-close {
  color: var(--ink-light) !important;
  opacity: 1 !important;
}
.cmplz-cookiebanner .cmplz-close:hover {
  color: var(--ink) !important;
}

/* ── Mobile ──────────────────────────────────────────────────────────────── */
@media (max-width: 600px) {
  .cmplz-cookiebanner {
    padding: 24px var(--side-pad) !important;
  }
  .cmplz-cookiebanner .cmplz-buttons {
    flex-direction: column !important;
  }
  .cmplz-cookiebanner .cmplz-btn {
    width: 100% !important;
    text-align: center !important;
  }
  .cmplz-cookiebanner .cmplz-manage-consent,
  .cmplz-cookiebanner .cmplz-btn-manage {
    width: auto !important;
    text-align: left !important;
  }
}