/*
 * SQ Lenssens & Partners — client-overrides (live-getrouwe details van sqlawoffices.com).
 *
 * GOUDEN REGEL: dit bestand zet NOOIT mood-tokens (--font-heading, --color-primary, …)
 * in :root. Het consumeert ze enkel via var() en zet niet-tokeniseerbare regels
 * (hero-overlay, header-gedrag, footer-kolommen, blockquote-skin). Geladen door
 * bouw_client_branding_css() ná bouw-design-tokens.
 *
 * Live referentiewaarden (Blocksy + Elementor, mei 2026):
 *   header 100px wit / transparant boven hero · menu 12px uppercase 700, 55px spacing
 *   hero: video-bg + overlay #144651 @ .61 · titel Playfair 100px → 30px mobiel
 *   blockquote: 10px teal border-left, 20px italic wit
 *   footer: teal #56bdc8, 100px padding, 4 kolommen, hover #CAFAFF
 */

/* ------------------------------------------------------------------
 * CLIENT-CONSTANTEN — géén mood-tokens, eigen --sqlaw-* namespace.
 * Waarden gespiegeld aan config/clients/sqlaw.php (branding.colors).
 * ------------------------------------------------------------------ */
body {
    --sqlaw-coral: #e45c42;            /* palette 5 — secundair accent */
    --sqlaw-teal-soft: #CAFAFF;        /* footer link-hover */
    --sqlaw-cream: #fcf3e0;            /* palette 3 — alt sectie-bg */
    --sqlaw-offwhite: #FBFBFC;         /* palette 7 */
    --sqlaw-overlay: rgba(20, 70, 81, 0.61); /* #144651 @ 61% — hero/page-hero overlay */
    --sqlaw-container: 1290px;         /* Blocksy normal-container-max-width */
    --sqlaw-header-shadow: 0px 10px 20px rgba(43, 61, 80, 0.06);
}

/* ------------------------------------------------------------------
 * BASIS-TYPOGRAFIE — live schaal (Playfair 700 h1-h4, Lato h5/h6 + body)
 * h1 40 · h2 35 · h3 30 · h4 25 · lh 1.5 — body 16px lh 1.65
 * ------------------------------------------------------------------ */
.wp-site-blocks h1,
.wp-site-blocks h2,
.wp-site-blocks h3,
.wp-site-blocks h4,
.editor-styles-wrapper h1,
.editor-styles-wrapper h2,
.editor-styles-wrapper h3,
.editor-styles-wrapper h4 {
    font-family: var(--font-heading, 'Playfair Display', Georgia, serif);
    font-weight: var(--weight-heading, 700);
    color: var(--color-primary, #144651);
    line-height: 1.5;
}

.wp-site-blocks h1 { font-size: 2.5rem; }    /* 40px */
.wp-site-blocks h2 { font-size: 2.1875rem; } /* 35px */
.wp-site-blocks h3 { font-size: 1.875rem; }  /* 30px */
.wp-site-blocks h4 { font-size: 1.5625rem; } /* 25px */

.wp-site-blocks h5,
.wp-site-blocks h6 {
    font-family: var(--font-body, 'Lato', sans-serif);
    font-weight: 700;
    color: var(--color-primary, #144651);
    line-height: 1.5;
}

.wp-site-blocks h5 { font-size: 1.25rem; } /* 20px */
.wp-site-blocks h6 { font-size: 1rem; }    /* 16px */

body {
    background-color: var(--surface-body, #ffffff); /* expliciet — anders rendert UA-darkmode zwart */
    font-family: var(--font-body, 'Lato', sans-serif);
    font-size: 16px;
    line-height: 1.65;
    color: var(--ink-primary, #131a27);
}

.wp-site-blocks a {
    color: var(--color-accent, #56bdc8);
}

.wp-site-blocks a:hover {
    color: var(--color-primary, #144651);
}

/* ------------------------------------------------------------------
 * KNOPPEN — live: Lato 700 15-16px, min-height 40px
 * Primair (CTA):  teal bg → petrol hover (hero) / petrol bg → teal hover (header)
 * Ghost: transparant, 2px witte border → wit bg + petrol tekst
 * ------------------------------------------------------------------ */
.sqlaw-btn,
.wp-block-button .wp-block-button__link.sqlaw-btn {
    display: inline-block;
    font-family: var(--font-body, 'Lato', sans-serif);
    font-size: 16px;
    font-weight: 700;
    line-height: 1;
    min-height: 40px;
    padding: 16px 23px;
    border-radius: var(--radius-md, 4px);
    text-decoration: none;
    transition: background-color var(--motion-duration, 200ms) ease,
                color var(--motion-duration, 200ms) ease,
                border-color var(--motion-duration, 200ms) ease;
}

/* NB: selectors dragen bewust .wp-site-blocks/a-prefixes — de generieke
   linkkleur (.wp-site-blocks a → teal) mag knoptekst nooit overschrijven. */
.sqlaw-btn--accent,
a.sqlaw-btn--accent,
.wp-site-blocks a.sqlaw-btn--accent,
.wp-block-button .wp-block-button__link.sqlaw-btn--accent {
    background-color: var(--color-accent, #56bdc8);
    color: var(--ink-inverse, #ffffff);
}

.sqlaw-btn--accent:hover,
.wp-site-blocks a.sqlaw-btn--accent:hover,
.wp-block-button .wp-block-button__link.sqlaw-btn--accent:hover {
    background-color: var(--color-primary, #144651);
    color: var(--ink-inverse, #ffffff);
}

.sqlaw-btn--ghost,
a.sqlaw-btn--ghost,
.wp-site-blocks a.sqlaw-btn--ghost,
.wp-block-button .wp-block-button__link.sqlaw-btn--ghost {
    background-color: transparent;
    color: var(--ink-inverse, #ffffff);
    border: 2px solid var(--ink-inverse, #ffffff);
    padding: 14px 21px;
}

.sqlaw-btn--ghost:hover,
.wp-site-blocks a.sqlaw-btn--ghost:hover,
.wp-block-button .wp-block-button__link.sqlaw-btn--ghost:hover {
    background-color: var(--ink-inverse, #ffffff);
    color: var(--color-primary, #144651);
}

/* De .is-scrolled selectors hieronder zijn nodig: de gescrolde nav-regels
   verderop (.sqlaw-header--transparent.is-scrolled .sqlaw-header__nav a)
   hebben gelijke specificiteit als de kortere stapel hier en winnen dan op
   bron-volgorde — de Contact-knop kreeg zo donkere tekst op petrol (en
   teal-op-teal bij hover). Eén klasse extra beslecht dat zonder !important. */
.sqlaw-btn--primary,
a.sqlaw-btn--primary,
.wp-site-blocks a.sqlaw-btn--primary,
.sqlaw-header__nav a.sqlaw-btn--primary,
.sqlaw-header--transparent .sqlaw-header__nav a.sqlaw-btn--primary,
.sqlaw-header--transparent.is-scrolled .sqlaw-header__nav a.sqlaw-btn--primary,
.wp-block-button .wp-block-button__link.sqlaw-btn--primary {
    background-color: var(--color-primary, #144651);
    color: var(--ink-inverse, #ffffff);
    padding: 5px 20px;
    display: inline-flex;
    align-items: center;
}

.sqlaw-btn--primary:hover,
.wp-site-blocks a.sqlaw-btn--primary:hover,
.sqlaw-header__nav a.sqlaw-btn--primary:hover,
.sqlaw-header--transparent .sqlaw-header__nav a.sqlaw-btn--primary:hover,
.sqlaw-header--transparent.is-scrolled .sqlaw-header__nav a.sqlaw-btn--primary:hover,
.wp-block-button .wp-block-button__link.sqlaw-btn--primary:hover {
    background-color: var(--color-accent, #56bdc8);
    color: var(--ink-inverse, #ffffff);
}

/* ------------------------------------------------------------------
 * HEADER — live: 100px hoog, wit + zachte schaduw; transparant boven hero.
 * Menu: Lato 12px uppercase 700, 55px onderlinge afstand, teal hover.
 * ------------------------------------------------------------------ */
.sqlaw-header {
    min-height: 100px;
    background: var(--surface-body, #ffffff);
    box-shadow: var(--sqlaw-header-shadow);
    position: relative;
    z-index: 50;
}

.sqlaw-header__inner {
    max-width: var(--sqlaw-container, 1290px);
    margin: 0 auto;
    padding: 0 2rem;
    min-height: 100px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
}

.sqlaw-header__logo img {
    max-height: 60px;   /* wordmerk 1000x414 — live --logo-max-height:100px, visueel ±60px hoog */
    width: auto;
    display: block;
    transition: max-height var(--motion-duration, 200ms) ease,
                filter var(--motion-duration, 200ms) ease;
}

.sqlaw-header__nav {
    display: flex;
    align-items: center;
    gap: 55px; /* live --menu-items-spacing */
}

.sqlaw-header__nav a {
    font-family: var(--font-body, 'Lato', sans-serif);
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    line-height: 1.3;
    color: var(--ink-primary, #131a27);
    text-decoration: none;
}

.sqlaw-header__nav a:hover {
    color: var(--color-accent, #56bdc8);
}

/* Transparante variant boven de (page-)hero — witte navigatie.
   Live-gedrag (Blocksy sticky "shrink"): transparant bovenaan de pagina,
   bij scrollen wordt de balk VOL WIT met schaduw en krimpt het logo (0.7).
   Kleine vanilla JS in parts/header-sqlaw.html zet .is-scrolled bij
   scrollY > drempel. */
.sqlaw-header--transparent {
    background: transparent;
    box-shadow: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    transition: background-color var(--motion-duration, 200ms) ease,
                box-shadow var(--motion-duration, 200ms) ease;
}

.sqlaw-header--transparent .sqlaw-header__nav a {
    color: rgba(255, 255, 255, 0.75);
    transition: color var(--motion-duration, 200ms) ease;
}

.sqlaw-header--transparent .sqlaw-header__nav a:hover {
    color: var(--ink-inverse, #ffffff);
}

.sqlaw-header--transparent .sqlaw-header__inner {
    transition: min-height var(--motion-duration, 200ms) ease;
}

/* GESCROLDE STAAT — vol wit + schaduw, donkere nav, gekrompen logo.
   Live: sticky rij wordt #ffffff met 0px 10px 20px rgba(43,61,80,.06),
   menu-links vallen terug op de donkere tekstkleur, logo-shrink 0.7. */
.sqlaw-header--transparent.is-scrolled {
    background: var(--surface-body, #ffffff);
    box-shadow: var(--sqlaw-header-shadow);
    min-height: 0;
}

.sqlaw-header--transparent.is-scrolled .sqlaw-header__inner {
    min-height: 72px;
}

.sqlaw-header--transparent.is-scrolled .sqlaw-header__nav a {
    color: var(--ink-primary, #131a27);
}

.sqlaw-header--transparent.is-scrolled .sqlaw-header__nav a:hover {
    color: var(--color-accent, #56bdc8);
}

/* LOGO-SWAP — de klant leverde (nog) geen kleur-logo-variant aan;
   het witte wordmerk zou op de witte balk onzichtbaar zijn.
   PLACEHOLDER-AANPAK: CSS-filter die het witte PNG naar de LICHTE teal
   (#56bdc8 = --color-accent; correctie Jef — niet het donkere petrol)
   kleurt — brightness(0) maakt alles zwart, daarna invert/sepia/saturate/
   hue-rotate naar de doeltint. Zodra de echte kleurversie er is: filter
   schrappen en in parts/header-sqlaw.html een tweede <img>
   (default-logo/scrolled-logo) swappen, zoals live (Blocksy sticky-logo). */
.sqlaw-header--transparent.is-scrolled .sqlaw-header__logo img {
    max-height: 42px; /* 60px × 0.7 — live logo-sticky-shrink */
    /* wit → teal; canvas-gemeten resultaat rgb(85,188,199) ≈ #56bdc8 = rgb(86,189,200) (±1) */
    filter: brightness(0) invert(68%) sepia(30%) saturate(600%) hue-rotate(137deg) brightness(91%);
}

/* ------------------------------------------------------------------
 * HERO (homepage) — live: video-bg + overlay, padding 300/200 → 150/100.
 * De video is bekend lastig (autoplay/gewicht): .sqlaw-hero heeft een
 * statische image-fallback via background-image; de <video> is optioneel
 * en progressive enhancement. Titel: Playfair wit, 100px → 30px.
 * ------------------------------------------------------------------ */
.sqlaw-hero {
    position: relative;
    overflow: hidden;
    background-color: var(--color-primary, #144651);
    background-size: cover;
    background-position: center;
    padding: 300px 2rem 200px;
}

.sqlaw-hero__video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
}

.sqlaw-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--sqlaw-overlay, rgba(20, 70, 81, 0.61));
    z-index: 1;
}

.sqlaw-hero__inner {
    position: relative;
    z-index: 2;
    max-width: var(--sqlaw-container, 1290px);
    margin: 0 auto;
}

.sqlaw-hero__content {
    max-width: 67%; /* live: content-kolom 67% */
}

.sqlaw-hero__title,
.wp-site-blocks h1.sqlaw-hero__title {
    font-family: var(--font-heading, 'Playfair Display', Georgia, serif);
    font-weight: 700; /* live vraagt 800; Playfair is enkel op 700 geladen (zoals live → synthetisch) */
    font-size: clamp(1.875rem, 1rem + 5.2vw, 6.25rem); /* 30px → 100px */
    line-height: 1.2;
    color: var(--ink-inverse, #ffffff);
    margin: 0 0 16px;
}

.sqlaw-hero__subtitle,
.wp-site-blocks h2.sqlaw-hero__subtitle {
    font-family: var(--font-heading, 'Playfair Display', Georgia, serif);
    font-weight: 700;
    font-size: clamp(1.5rem, 1rem + 1.6vw, 2.1875rem); /* → 35px */
    color: var(--ink-inverse, #ffffff);
    margin: 0 0 2rem;
}

.sqlaw-hero__buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}

@media (max-width: 1024px) {
    .sqlaw-hero { padding: 250px 2rem 150px; }
    .sqlaw-hero__content { max-width: 100%; text-align: center; }
    .sqlaw-hero__buttons { justify-content: center; }
}

@media (max-width: 767px) {
    .sqlaw-hero { padding: 150px 1.25rem 100px; }
}

/* ------------------------------------------------------------------
 * PAGE-HERO (wie/wat/expertise/cases + expertise-detail) — live:
 * min-height 100vh, foto-bg + overlay, alles wit en gecentreerd,
 * kolom-padding 200px → 20px mobiel. Detailpagina's gebruiken een
 * compactere variant (--compact) zodat de prose sneller in beeld komt.
 * ------------------------------------------------------------------ */
.sqlaw-page-hero {
    position: relative;
    overflow: hidden;
    background-color: var(--color-primary, #144651);
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center;
    min-height: 100vh;
}

.sqlaw-page-hero--compact {
    min-height: 60vh;
}

.sqlaw-page-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--sqlaw-overlay, rgba(20, 70, 81, 0.61));
    z-index: 1;
}

.sqlaw-page-hero__inner {
    position: relative;
    z-index: 2;
    max-width: var(--sqlaw-container, 1290px);
    margin: 0 auto;
    padding: 200px;
    text-align: center;
    color: var(--ink-inverse, #ffffff);
}

.sqlaw-page-hero__title,
.wp-site-blocks h1.sqlaw-page-hero__title {
    font-family: var(--font-heading, 'Playfair Display', Georgia, serif);
    font-weight: 700;
    font-size: clamp(1.875rem, 1rem + 5.2vw, 6.25rem); /* 30px → 100px */
    line-height: 1.2;
    color: var(--ink-inverse, #ffffff);
    margin: 0 0 16px;
}

.sqlaw-page-hero__subtitle,
.wp-site-blocks h2.sqlaw-page-hero__subtitle {
    font-family: var(--font-heading, 'Playfair Display', Georgia, serif);
    font-weight: 700;
    font-size: clamp(1.5rem, 1rem + 1.6vw, 2.1875rem);
    color: var(--ink-inverse, #ffffff);
    margin: 0 0 16px;
}

.sqlaw-page-hero__text {
    font-size: 18px;
    text-align: justify;
    color: var(--ink-inverse, #ffffff);
}

@media (max-width: 1024px) {
    .sqlaw-page-hero__inner { padding: 150px 60px; }
}

@media (max-width: 767px) {
    .sqlaw-page-hero { min-height: 0; }
    .sqlaw-page-hero__inner { padding: 120px 20px 60px; }
    .sqlaw-page-hero__text { text-align: center; }
}

/* ------------------------------------------------------------------
 * BLOCKQUOTE — live skin-border: 10px teal linker-rand, 20px italic.
 * Op donkere secties wit (default), in prose petrol.
 * ------------------------------------------------------------------ */
.sqlaw-blockquote,
.wp-site-blocks blockquote.sqlaw-blockquote {
    border-left: 10px solid var(--color-accent, #56bdc8);
    padding-left: 28px;
    margin: 50px;
    font-size: 20px;
    font-style: italic;
    color: var(--ink-inverse, #ffffff);
    text-align: left; /* live: quote links uitgelijnd, ook in gecentreerde hero */
}

.sqlaw-blockquote cite,
.sqlaw-blockquote footer {
    display: block;
    margin-top: 5px;
    font-size: 20px;
    font-style: normal;
    color: inherit;
}

.sqlaw-prose .sqlaw-blockquote,
.sqlaw-prose blockquote.sqlaw-blockquote {
    color: var(--color-primary, #144651);
}

@media (max-width: 767px) {
    .sqlaw-blockquote,
    .wp-site-blocks blockquote.sqlaw-blockquote { margin: 30px 0; }
}

/* ------------------------------------------------------------------
 * PROSE — expertise-detailpagina's: lichte sectie na de donkere header.
 * ------------------------------------------------------------------ */
.sqlaw-prose {
    max-width: 800px;
    margin: 0 auto;
    padding: clamp(3rem, 8vw, 6rem) 2rem;
}

.sqlaw-prose p {
    margin: 0 0 1.5em;
}

.sqlaw-prose h2,
.sqlaw-prose h3 {
    margin: 1.6em 0 0.6em;
}

.sqlaw-prose ul {
    padding-left: 1.25em;
    margin: 0 0 1.5em;
}

.sqlaw-prose li {
    margin-bottom: 0.5em;
}

/* Alternatieve crème sectie (palette 3) — bv. quote- of CTA-band */
.sqlaw-section--cream {
    background-color: var(--sqlaw-cream, #fcf3e0);
}

/* ------------------------------------------------------------------
 * FAQ — expertise-detail: strakke lijst, petrol vraag, teal indicator.
 * Skin op het bestaande bouw/accordion of bouw/faq-accordion blok.
 * ------------------------------------------------------------------ */
.sqlaw-faq {
    max-width: 800px;
    margin: 0 auto;
    padding: 0 2rem clamp(3rem, 8vw, 6rem);
}

.sqlaw-faq details,
.sqlaw-faq .bouw-accordion-item {
    border-bottom: 1px solid var(--color-primary-light, #cde8ec);
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

.sqlaw-faq summary,
.sqlaw-faq .bouw-accordion-title {
    font-family: var(--font-body, 'Lato', sans-serif);
    font-size: 18px;
    font-weight: 700;
    color: var(--color-primary, #144651);
    padding: 1.1rem 0;
    cursor: pointer;
    list-style: none;
    position: relative;
    padding-right: 2rem;
}

.sqlaw-faq summary::-webkit-details-marker { display: none; }

.sqlaw-faq summary::after {
    content: "+";
    position: absolute;
    right: 0.25rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--color-accent, #56bdc8);
    font-size: 1.4rem;
    font-weight: 400;
    transition: transform var(--motion-duration, 200ms) ease;
}

.sqlaw-faq details[open] summary::after {
    content: "–";
}

.sqlaw-faq details > *:not(summary) {
    padding: 0 0 1.25rem;
    color: var(--ink-primary, #131a27);
}

/* ------------------------------------------------------------------
 * TEAM — overzicht (grid: foto/naam/rol) + detailprofiel.
 * Data-bron: team_member CPT uit de sq-law-schema plugin (velden _sq_*);
 * zelfde look als de rest: wit, Playfair-petrol koppen, teal accenten.
 * ------------------------------------------------------------------ */
.sqlaw-team {
    max-width: var(--sqlaw-container, 1290px);
    margin: 0 auto;
    padding: clamp(3rem, 8vw, 6rem) 2rem;
}

.sqlaw-team__intro {
    max-width: 800px;
    margin: 0 0 3rem;
}

.sqlaw-team-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 2rem;
}

.sqlaw-team-card,
.wp-site-blocks a.sqlaw-team-card {
    display: block;
    text-decoration: none;
    color: var(--ink-primary, #131a27);
    background: var(--surface-body, #ffffff);
    border: 1px solid var(--color-primary-light, #cde8ec);
    border-radius: var(--radius-md, 4px);
    overflow: hidden;
    transition: box-shadow var(--motion-duration, 200ms) ease,
                transform var(--motion-duration, 200ms) ease;
}

.sqlaw-team-card:hover {
    box-shadow: 0 10px 20px rgba(43, 61, 80, 0.12); /* zelfde familie als header-schaduw */
    transform: translateY(-3px);
}

.sqlaw-team-card__photo {
    aspect-ratio: 4 / 5;
    background: var(--color-primary-light, #cde8ec);
    overflow: hidden;
}

.sqlaw-team-card__photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.sqlaw-team-card__body {
    padding: 1.25rem 1.5rem 1.5rem;
}

.sqlaw-team-card__name,
.wp-site-blocks h3.sqlaw-team-card__name {
    font-size: 1.375rem; /* 22px — kaart-schaal van de Playfair-koppen */
    line-height: 1.3;
    margin: 0 0 0.25rem;
}

.sqlaw-team-card:hover .sqlaw-team-card__name {
    color: var(--color-accent, #56bdc8);
}

.sqlaw-team-card__role {
    font-family: var(--font-body, 'Lato', sans-serif);
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em; /* nav-stijl van de header */
    color: var(--color-accent, #56bdc8);
    margin: 0;
}

/* --- Detailprofiel: foto + contact links, bio/expertise/publicaties rechts --- */
.sqlaw-team-profile {
    max-width: var(--sqlaw-container, 1290px);
    margin: 0 auto;
    padding: clamp(3rem, 8vw, 6rem) 2rem;
    display: grid;
    grid-template-columns: 340px 1fr;
    gap: clamp(2rem, 5vw, 4.5rem);
    align-items: start;
}

.sqlaw-team-profile__aside {
    position: sticky;
    top: 96px; /* onder de gescrolde (72px) fixed header */
}

.sqlaw-team-profile__photo {
    aspect-ratio: 4 / 5;
    background: var(--color-primary-light, #cde8ec);
    border-radius: var(--radius-md, 4px);
    overflow: hidden;
    margin: 0 0 1.5rem;
}

.sqlaw-team-profile__photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Contactblok — crème kaart (palette 3), zoals de alt-sectie-bg live */
.sqlaw-team-contact {
    background: var(--sqlaw-cream, #fcf3e0);
    border-radius: var(--radius-md, 4px);
    padding: 1.5rem;
}

.sqlaw-team-contact h4,
.wp-site-blocks .sqlaw-team-contact h4 {
    font-size: 1.25rem;
    margin: 0 0 0.75rem;
}

.sqlaw-team-contact p {
    margin: 0 0 0.5rem;
    font-size: 15px;
}

.sqlaw-team-contact .sqlaw-btn {
    margin-top: 0.75rem;
}

.sqlaw-team-profile__main .sqlaw-team-profile__name,
.wp-site-blocks h1.sqlaw-team-profile__name {
    font-size: clamp(2rem, 1.5rem + 2vw, 3.125rem); /* → 50px */
    line-height: 1.2;
    margin: 0 0 0.25rem;
}

.sqlaw-team-profile__role {
    font-family: var(--font-body, 'Lato', sans-serif);
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-accent, #56bdc8);
    margin: 0 0 2rem;
}

.sqlaw-team-profile__bio p {
    margin: 0 0 1.5em;
}

.sqlaw-team-profile__main h2,
.wp-site-blocks .sqlaw-team-profile__main h2 {
    font-size: 1.5625rem; /* 25px — h4-schaal, past bij subsecties */
    margin: 2em 0 0.6em;
}

.sqlaw-team-profile__main h2:first-child,
.wp-site-blocks .sqlaw-team-profile__main h2:first-child {
    margin-top: 0; /* eerste sectiekop lijnt uit met de bovenkant van de foto */
}

/* Specialisaties — teal-omrande chips, compact */
.sqlaw-team-tags {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    padding: 0;
    margin: 0 0 1rem;
}

.sqlaw-team-tags li {
    font-family: var(--font-body, 'Lato', sans-serif);
    font-size: 13px;
    font-weight: 700;
    color: var(--color-primary, #144651);
    border: 1px solid var(--color-accent, #56bdc8);
    border-radius: 999px;
    padding: 0.35rem 0.9rem;
    line-height: 1.3;
}

/* Publicaties & media — lijst met teal streep, sluit aan bij blockquote-taal */
.sqlaw-team-pubs {
    list-style: none;
    padding: 0;
    margin: 0 0 1rem;
}

.sqlaw-team-pubs li {
    border-left: 4px solid var(--color-accent, #56bdc8);
    padding: 0.25rem 0 0.25rem 1rem;
    margin-bottom: 0.9rem;
}

.sqlaw-team-pubs .pub-source {
    display: block;
    font-size: 13px;
    color: var(--ink-secondary, #4d5d6d);
}

@media (max-width: 1024px) {
    .sqlaw-team-profile { grid-template-columns: 300px 1fr; }
}

@media (max-width: 820px) {
    .sqlaw-team-profile { grid-template-columns: 1fr; }
    .sqlaw-team-profile__aside { position: static; max-width: 340px; }
}

/* ------------------------------------------------------------------
 * CONTACT SERVICE-BOXEN — live contactpagina: 3 kolommen (Vind/Mail/Bel ons)
 * ------------------------------------------------------------------ */
.sqlaw-contact-cards {
    max-width: var(--sqlaw-container, 1290px);
    margin: 0 auto;
    padding: clamp(2rem, 6vw, 4rem) 2rem;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
}

.sqlaw-contact-cards h5 {
    margin: 0 0 0.4em;
}

/* Contactpagina-content gebruikt h3 (correcte heading-volgorde na de
   hero-H1/H2) — zelfde look als de h5-variant: Lato 20px petrol. */
.sqlaw-contact-cards h3,
.wp-site-blocks .sqlaw-contact-cards h3 {
    font-family: var(--font-body, 'Lato', sans-serif);
    font-size: 1.25rem;
    line-height: 1.5;
    margin: 0 0 0.4em;
}

.sqlaw-contact-cards a {
    color: var(--color-accent, #56bdc8);
    text-decoration: none;
}

.sqlaw-contact-cards a:hover {
    color: var(--color-primary, #144651);
}

@media (max-width: 900px) {
    .sqlaw-contact-cards { grid-template-columns: 1fr; }
}

/* ------------------------------------------------------------------
 * VIDEO — 16:9 blok (homepage/expertise) + 9:16 reels (team/cases)
 * + social-links-regel. Media: self-hosted <video preload=none poster>
 * of lazy iframe-embed; nooit autoplay (zie patterns sqlaw-video/-reels).
 * ------------------------------------------------------------------ */
.sqlaw-video-section {
    max-width: var(--sqlaw-container, 1290px);
    margin: 0 auto;
    padding: clamp(3rem, 8vw, 6rem) 2rem;
}

.sqlaw-video-section--narrow {
    max-width: 800px; /* volgt de prose-kolom op expertise-detailpagina's */
    padding-top: 0;   /* sluit aan op de prose erboven */
}

.sqlaw-video {
    margin: 0;
}

.sqlaw-video video,
.sqlaw-video .sqlaw-video__frame {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    border: 0;
    border-radius: var(--radius-md, 4px);
    background: var(--color-primary, #144651); /* petrol letterbox vóór eerste frame */
    object-fit: cover;
}

.sqlaw-video__caption {
    font-size: 14px;
    color: var(--ink-secondary, #4d5d6d);
    margin-top: 0.75rem;
}

/* Reels — rij van 2-3 telefoon-verhouding kaarten */
.sqlaw-reels {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 2rem;
    max-width: 980px; /* 3 kaarten à ±300px — reels blijven telefoon-formaat */
}

.sqlaw-reel {
    margin: 0;
}

.sqlaw-reel video {
    display: block;
    width: 100%;
    aspect-ratio: 9 / 16;
    border-radius: var(--radius-md, 4px);
    background: var(--color-primary, #144651);
    object-fit: cover;
}

.sqlaw-reel__title,
.wp-site-blocks h3.sqlaw-reel__title {
    font-family: var(--font-body, 'Lato', sans-serif);
    font-size: 14px;
    font-weight: 700;
    color: var(--ink-primary, #131a27);
    line-height: 1.4;
    margin: 0.75rem 0 0;
}

/* Social-links-regel — LinkedIn primair (icoon + label), rest alleen icoon */
.sqlaw-social-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
    margin-top: 1.5rem;
}

.sqlaw-social-row__label {
    font-family: var(--font-body, 'Lato', sans-serif);
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--ink-secondary, #4d5d6d);
}

.sqlaw-social-row__link,
.wp-site-blocks a.sqlaw-social-row__link {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-family: var(--font-body, 'Lato', sans-serif);
    font-size: 14px;
    font-weight: 700;
    color: var(--color-primary, #144651);
    text-decoration: none;
}

.sqlaw-social-row__icon,
.wp-site-blocks a.sqlaw-social-row__icon {
    display: inline-flex;
    color: var(--color-primary, #144651);
}

.sqlaw-social-row__link:hover,
.wp-site-blocks a.sqlaw-social-row__link:hover,
.sqlaw-social-row__icon:hover,
.wp-site-blocks a.sqlaw-social-row__icon:hover {
    color: var(--color-accent, #56bdc8);
}

@media (max-width: 767px) {
    .sqlaw-reels { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 1rem; }
}

/* ------------------------------------------------------------------
 * FOOTER — live: teal bg, 100px padding, 4 kolommen 25%,
 * witte tekst/links, hover #CAFAFF, logo 70% breed, kop 25px wit.
 * ------------------------------------------------------------------ */
.sqlaw-footer {
    background-color: var(--color-accent, #56bdc8);
    padding: 100px 2rem;
    color: var(--ink-inverse, #ffffff);
}

.sqlaw-footer__inner {
    max-width: var(--sqlaw-container, 1290px);
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2rem;
    align-items: start;
}

.sqlaw-footer__logo img {
    width: 70%;
    height: auto;
    display: block;
}

.sqlaw-footer h4,
.wp-site-blocks .sqlaw-footer h4 {
    font-family: var(--font-heading, 'Playfair Display', Georgia, serif);
    font-size: 25px;
    color: var(--ink-inverse, #ffffff);
    margin: 0 0 0.8em;
}

.sqlaw-footer p {
    margin: 0 0 0.4em;
    color: var(--ink-inverse, #ffffff);
}

.sqlaw-footer a {
    color: var(--ink-inverse, #ffffff);
    text-decoration: none;
}

.sqlaw-footer a:hover {
    color: var(--sqlaw-teal-soft, #CAFAFF);
}

.sqlaw-footer__menu {
    display: flex;
    flex-direction: column;
    gap: 10px; /* live: 10px tussen menu-items */
}

.sqlaw-footer__small {
    font-size: 13px;
    margin-top: 1.5em;
}

@media (max-width: 900px) {
    .sqlaw-footer { padding: 60px 1.5rem; }
    .sqlaw-footer__inner { grid-template-columns: 1fr; gap: 2.5rem; }
    .sqlaw-footer__logo img { width: min(70%, 280px); }
}

/* ------------------------------------------------------------------
 * IMPORT-CONTENT BLOKKEN — klassen uit het content-importpakket
 * (SQLawOffices/_import): .sq-lede (motto-lede), .sq-direct-answer
 * (AI/SEO-antwoordblok) en .sq-cta (standaard contactblok). De
 * achtergrondkleuren zitten inline in de content (bron = contentjob);
 * hier alleen vorm, spacing en typografie — token-gedreven.
 * ------------------------------------------------------------------ */
.sqlaw-prose .sq-lede {
    font-size: 20px;
    font-style: italic;
    color: var(--ink-secondary, #4d5d6d);
}

.sqlaw-prose .sq-direct-answer,
.sqlaw-prose .sq-cta {
    border-radius: var(--radius-md, 4px);
    margin: 2.5rem 0;
}

.sqlaw-prose .sq-direct-answer h2,
.sqlaw-prose .sq-cta h2,
.wp-site-blocks .sqlaw-prose .sq-direct-answer h2,
.wp-site-blocks .sqlaw-prose .sq-cta h2 {
    font-size: 1.5625rem; /* h4-schaal — blok-kop, geen paginakop */
    margin: 0 0 0.6em;
}

.sqlaw-prose .sq-direct-answer p:last-child,
.sqlaw-prose .sq-cta p:last-child {
    margin-bottom: 0;
}

/* ------------------------------------------------------------------
 * EXPERTISE-GRID — teaser-kaarten voor de 12 materies (homepage +
 * /expertise/ hub). Kaarttaal = team-kaarten (rand, hover-lift) met
 * teal linker-accent; motto in italic zoals de PDF-lede's.
 * ------------------------------------------------------------------ */
.sqlaw-exp-section {
    max-width: var(--sqlaw-container, 1290px);
    margin: 0 auto;
    padding: clamp(3rem, 8vw, 6rem) 2rem;
}

.sqlaw-exp-section__intro {
    max-width: 800px;
    margin: 0 0 2.5rem;
}

.sqlaw-exp-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1.5rem;
}

.sqlaw-exp-card,
.wp-site-blocks a.sqlaw-exp-card {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    padding: 1.5rem;
    background: var(--surface-body, #ffffff);
    border: 1px solid var(--color-primary-light, #cde8ec);
    border-left: 4px solid var(--color-accent, #56bdc8);
    border-radius: var(--radius-md, 4px);
    text-decoration: none;
    color: var(--ink-primary, #131a27);
    transition: box-shadow var(--motion-duration, 200ms) ease,
                transform var(--motion-duration, 200ms) ease;
}

.sqlaw-exp-card:hover {
    box-shadow: 0 10px 20px rgba(43, 61, 80, 0.12); /* team-kaart familie */
    transform: translateY(-3px);
}

.sqlaw-exp-card__title,
.wp-site-blocks h3.sqlaw-exp-card__title {
    font-size: 1.375rem; /* 22px — kaart-schaal, zoals team-kaartnamen */
    line-height: 1.3;
    margin: 0;
}

.sqlaw-exp-card:hover .sqlaw-exp-card__title {
    color: var(--color-accent, #56bdc8);
}

.sqlaw-exp-card__motto {
    font-style: italic;
    font-size: 15px;
    color: var(--ink-secondary, #4d5d6d);
    margin: 0;
    flex: 1;
}

.sqlaw-exp-card__more {
    font-family: var(--font-body, 'Lato', sans-serif);
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em; /* nav-stijl */
    color: var(--color-accent, #56bdc8);
    margin-top: 0.5rem;
}

.sqlaw-exp-section__actions {
    margin-top: 2.5rem;
}

/* ------------------------------------------------------------------
 * HOMEPAGE INTRO — twee kolommen: wie-verhaal + "wat doen wij"-kaart.
 * Layoutpatroon hergebruikt van de YC-theme two-column-secties,
 * restyled naar de sqlaw-tokens (crème kaart = palette 3, teal checks).
 * ------------------------------------------------------------------ */
.sqlaw-intro {
    max-width: var(--sqlaw-container, 1290px);
    margin: 0 auto;
    padding: clamp(3rem, 8vw, 6rem) 2rem;
    display: grid;
    grid-template-columns: 3fr 2fr;
    gap: clamp(2rem, 5vw, 4.5rem);
    align-items: start;
}

.sqlaw-intro .sqlaw-blockquote,
.sqlaw-intro blockquote.sqlaw-blockquote {
    color: var(--color-primary, #144651); /* lichte sectie → petrol quote */
    margin: 2rem 0 0;
}

.sqlaw-intro__aside {
    background: var(--sqlaw-cream, #fcf3e0);
    border-radius: var(--radius-md, 4px);
    padding: 2rem;
}

.sqlaw-intro__aside h3,
.wp-site-blocks .sqlaw-intro__aside h3 {
    font-size: 1.5625rem; /* h4-schaal binnen de kaart */
    margin: 0 0 1rem;
}

.sqlaw-what-list {
    list-style: none;
    padding: 0;
    margin: 0 0 1.5rem;
}

.sqlaw-what-list li {
    position: relative;
    padding-left: 1.75rem;
    margin-bottom: 0.9rem;
    font-size: 15px;
}

.sqlaw-what-list li::before {
    content: "\2713"; /* teal check — YC services-list patroon */
    position: absolute;
    left: 0;
    top: 0;
    color: var(--color-accent, #56bdc8);
    font-weight: 700;
}

@media (max-width: 900px) {
    .sqlaw-intro { grid-template-columns: 1fr; }
}

/* ------------------------------------------------------------------
 * TEAM-TEASER (homepage) — compacte variant van het team-grid:
 * 2 kaarten op kaartbreedte i.p.v. containerbreed uitgerekt.
 * ------------------------------------------------------------------ */
.sqlaw-team-grid--teaser {
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    max-width: 640px;
}

.sqlaw-team__actions {
    margin-top: 2.5rem;
}

/* ------------------------------------------------------------------
 * CASES / TRACK-RECORD — petrol band met dossier-namenrij (patroon
 * hergebruikt van de YC trust-bar, restyled: Lato uppercase + teal
 * streep op donker) en wit blockquote (bestaande default).
 * ------------------------------------------------------------------ */
.sqlaw-cases {
    background-color: var(--color-primary, #144651);
    padding: clamp(3rem, 8vw, 6rem) 2rem;
    color: var(--ink-inverse, #ffffff);
}

.sqlaw-cases__inner {
    max-width: var(--sqlaw-container, 1290px);
    margin: 0 auto;
}

.sqlaw-cases h2,
.wp-site-blocks .sqlaw-cases h2 {
    color: var(--ink-inverse, #ffffff);
}

.sqlaw-cases p {
    color: var(--ink-inverse-muted, rgba(255, 255, 255, 0.85));
    max-width: 800px;
}

.sqlaw-cases a {
    color: var(--sqlaw-teal-soft, #CAFAFF);
}

.wp-site-blocks .sqlaw-cases a {
    color: var(--sqlaw-teal-soft, #CAFAFF);
}

.wp-site-blocks .sqlaw-cases a:hover {
    color: var(--ink-inverse, #ffffff);
}

.sqlaw-cases-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem 2.5rem;
    margin: 2rem 0 2.5rem;
    padding: 0;
    list-style: none;
}

.sqlaw-cases-bar li {
    font-family: var(--font-body, 'Lato', sans-serif);
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--ink-inverse, #ffffff);
    border-left: 4px solid var(--color-accent, #56bdc8);
    padding-left: 0.75rem;
    line-height: 1.4;
}

.sqlaw-cases .sqlaw-blockquote {
    margin: 2.5rem 0 0;
}

/* ------------------------------------------------------------------
 * CONTACT-CTA BAND — crème sectie (palette 3) met 24u-belofte +
 * de bestaande 3 service-boxen (Vind/Mail/Bel ons). Patroon
 * hergebruikt van de YC cta-break, restyled naar sqlaw.
 * ------------------------------------------------------------------ */
.sqlaw-cta-band {
    padding: clamp(3rem, 8vw, 6rem) 2rem clamp(2rem, 5vw, 3rem);
}

.sqlaw-cta-band__head {
    max-width: 800px;
    margin: 0 auto;
    text-align: center;
}

.sqlaw-cta-band__head .sqlaw-btn {
    margin-top: 1rem;
}

.sqlaw-cta-band .sqlaw-contact-cards {
    text-align: center;
    padding-bottom: 0;
}

/* ------------------------------------------------------------------
 * PAGE-HERO CONTENT-ANATOMIE — SOP-HEADINGS (Jef-canon 7/7, zie
 * docs/SOP-HEADINGS.md): H1 = de exacte doelterm, klein gestyled als
 * eyebrow bovenaan de hero; de grote Playfair-kop eronder is een H2
 * met de creatieve hook. DOM-volgorde H1 → H2; de styling keert de
 * visuele hiërarchie om. Motto-lede eronder in Lato italic.
 * ------------------------------------------------------------------ */
.sqlaw-page-hero__eyebrow,
.wp-site-blocks h1.sqlaw-page-hero__eyebrow {
    font-family: var(--font-body, 'Lato', sans-serif);
    font-weight: 700;
    font-size: 0.875rem; /* 14px — bewust klein: relevantiesignaal, geen display-kop */
    line-height: 1.4;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--color-accent, #56bdc8);
    margin: 0 0 14px;
}

.sqlaw-page-hero__hook,
.wp-site-blocks h2.sqlaw-page-hero__hook {
    font-family: var(--font-heading, 'Playfair Display', Georgia, serif);
    font-weight: 700;
    font-size: clamp(1.75rem, 1rem + 2.6vw, 3.125rem); /* 28px → 50px */
    line-height: 1.25;
    color: var(--ink-inverse, #ffffff);
    max-width: 1000px;
    margin: 0 auto 16px;
}

.sqlaw-page-hero__lede,
.wp-site-blocks p.sqlaw-page-hero__lede {
    font-family: var(--font-body, 'Lato', sans-serif);
    font-weight: 400;
    font-style: italic;
    font-size: clamp(1.125rem, 1rem + 0.6vw, 1.375rem);
    color: var(--ink-inverse-muted, rgba(255, 255, 255, 0.85));
    max-width: 800px;
    margin: 0 auto;
}

/* ------------------------------------------------------------------
 * HEADER MOBIEL — live gebruikt een Blocksy-hamburger; die is (nog)
 * niet nagebouwd. Fallback: nav wrapt onder het logo met compacte
 * spacing, zodat er geen horizontale overflow ontstaat op telefoons.
 * ------------------------------------------------------------------ */
@media (max-width: 900px) {
    .sqlaw-header__inner {
        flex-wrap: wrap;
        justify-content: center;
        min-height: 0;
        padding: 1rem 1.25rem;
        gap: 0.75rem 1.5rem;
    }

    .sqlaw-header__nav {
        flex-wrap: wrap;
        justify-content: center;
        gap: 0.6rem 1.25rem;
    }

    .sqlaw-header__logo img { max-height: 44px; }
}

/* Pre-footer variant van de CTA-band: symmetrische padding + compacte
   mail/tel-regel onder de knop. Zit site-breed net boven de teal footer. */
.sqlaw-cta-band--prefooter {
    padding: clamp(3rem, 7vw, 5rem) 2rem;
}

.sqlaw-cta-band__contact {
    margin-top: 1.5rem;
    font-size: 15px;
}

/* ------------------------------------------------------------------
 * RELATIEBLOKKEN — expertises ↔ advocaten ↔ cases (inc/sqlaw-relations.php).
 * Render-time placeholders (data-sqlaw-rel) op expertise-detail, single-case,
 * single-team_member en de /cases/-pagina. Kaarttaal = bestaande team-/
 * expertise-kaarten; blokken verdwijnen volledig bij 0 relaties.
 * ------------------------------------------------------------------ */
.sqlaw-rel {
    max-width: 800px; /* uitlijnen op de prose-kolom erboven */
    margin: 0 auto;
    padding: 0 2rem clamp(2.5rem, 6vw, 4rem);
}

.sqlaw-rel h2,
.wp-site-blocks .sqlaw-rel h2 {
    font-size: 1.5625rem; /* h4-schaal — sectiekop onder de prose, geen paginakop */
    margin: 0 0 1.25rem;
}

/* compactere kaarten dan het volle team-grid (2 advocaten naast elkaar) */
.sqlaw-rel .sqlaw-team-grid {
    grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
    gap: 1.5rem;
}

/* case-kaarten in relatieblokken en in het /cases/-overzicht (prose-breedte) */
.sqlaw-exp-grid--rel {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1.5rem;
    margin: 0 0 1.5rem;
}

/* expertise-linklijst als chips met linktaal (case-meta + team-profiel) */
.sqlaw-rel-links li {
    padding: 0;
}

.sqlaw-rel-links a,
.wp-site-blocks .sqlaw-rel-links a {
    display: inline-block;
    padding: 0.35rem 0.9rem;
    color: var(--color-primary, #144651);
    text-decoration: none;
}

.sqlaw-rel-links a:hover {
    color: var(--color-accent, #56bdc8);
}

/* single-case: expertises + advocaten naast elkaar */
.sqlaw-rel--case-meta {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(1.5rem, 4vw, 3rem);
    align-items: start;
    border-top: 1px solid var(--color-primary-light, #cde8ec);
    padding-top: 2rem;
}

@media (max-width: 720px) {
    .sqlaw-rel--case-meta {
        grid-template-columns: 1fr;
    }
}