/*
 * Eenvoud theme styles — only what theme.json tokens cannot express.
 * Tokens are consumed via the --wp--preset--* / --wp--custom--* properties.
 */

/* --- Accessibility ------------------------------------------------------ */

:focus-visible {
    outline: 2px solid var(--wp--preset--color--accent);
    outline-offset: 2px;
}

.skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 100;
    padding: 12px 24px;
    background: var(--wp--preset--color--ink);
    color: var(--wp--preset--color--base);
}

.skip-link:focus {
    left: 0;
}

/* --- Links: ink text with an accent underline (design 1a) --------------- */

.entry-content a,
.wp-block-post-content a,
footer a {
    text-decoration-line: underline;
    text-decoration-color: var(--wp--preset--color--accent);
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
    transition: color var(--wp--custom--motion--duration-fast) var(--wp--custom--motion--easing);
}

/* Hover color (deep) comes from theme.json's link element; the thicker
   accent underline is the visible state change (accent TEXT would sit
   below AA on the warm surfaces) */
.entry-content a:hover,
.entry-content a:focus-visible,
.wp-block-post-content a:hover,
.wp-block-post-content a:focus-visible,
footer a:hover,
footer a:focus-visible {
    text-decoration-thickness: 2px;
}

/* --- Site header / footer ----------------------------------------------- */

.ee-site-header {
    border-bottom: var(--wp--custom--hairline);
}

.ee-site-footer {
    border-top: var(--wp--custom--hairline);
}

/* Shared header/footer gutter (markup stays inline-style free so these
   can respond to the viewport). Full width so their content sits on the
   same 1360px grid as the bands (overrides the alignwide cap). */
.ee-site-header > .ee-header-inner { max-width: none; padding: 24px var(--ee-gutter); }

.ee-site-footer > .ee-footer-inner { max-width: none; padding: 40px var(--ee-gutter) 20px; row-gap: 32px; }

.ee-footer-brand { max-width: 320px; }

.ee-footer-address { margin-top: 14px; line-height: 1.6; }

.ee-footer-nav a {
    color: var(--wp--preset--color--text-secondary);
    text-decoration: none;
    transition: color var(--wp--custom--motion--duration-fast) var(--wp--custom--motion--easing);
}

.ee-footer-nav a:hover,
.ee-footer-nav a:focus-visible {
    color: var(--wp--preset--color--ink);
}

.ee-footer-links { justify-content: flex-end; }

/* Full width (overrides the constrained-layout cap) so the top hairline
   spans the whole viewport like the other section dividers */
.ee-footer-legal {
    max-width: none;
    border-top: var(--wp--custom--hairline);
    padding: 18px var(--ee-gutter);
    color: var(--wp--preset--color--text-muted);
    font-size: var(--wp--preset--font-size--xs);
}

/* Brand: accent square before the site title */
.wp-block-site-title a {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-weight: 600;
    letter-spacing: -0.02em;
    text-decoration: none;
    text-transform: lowercase;
}

.wp-block-site-title a::before {
    content: "";
    inline-size: 11px;
    block-size: 11px;
    background: var(--wp--preset--color--accent);
    flex: none;
}

/* Header right-hand side: language switcher + CTA */
.ee-header-actions { gap: 28px; }

.ee-lang-switcher {
    display: flex;
    align-items: center;
    gap: 10px;
    list-style: none;
    margin: 0;
    padding: 0;
    font-size: var(--wp--preset--font-size--xs);
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.ee-lang-switcher .lang-item + .lang-item::before {
    content: "/";
    color: var(--wp--preset--color--border);
    margin-right: 10px;
}

.ee-lang-switcher a {
    color: var(--wp--preset--color--text-muted);
    text-decoration: none;
    transition: color var(--wp--custom--motion--duration-fast) var(--wp--custom--motion--easing);
}

.ee-lang-switcher .current-lang a {
    color: var(--wp--preset--color--ink);
    border-bottom: 1px solid var(--wp--preset--color--accent);
    padding-bottom: 2px;
}

.ee-lang-switcher a:hover,
.ee-lang-switcher a:focus-visible {
    color: var(--wp--preset--color--accent);
}

/* Header nav links: quiet by default, ink + accent underline sliding in on
   hover/focus; the current page carries a static ink underline instead so
   both states stay distinguishable */
.ee-site-header .wp-block-navigation a {
    position: relative;
    color: var(--wp--preset--color--text-secondary);
    text-decoration: none;
    transition: color var(--wp--custom--motion--duration-fast) var(--wp--custom--motion--easing);
}

.ee-site-header .wp-block-navigation a::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -6px;
    height: 1px;
    background: var(--wp--preset--color--accent);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform var(--wp--custom--motion--duration-fast) var(--wp--custom--motion--easing);
}

.ee-site-header .wp-block-navigation a:hover,
.ee-site-header .wp-block-navigation a:focus-visible {
    color: var(--wp--preset--color--ink);
}

.ee-site-header .wp-block-navigation a:hover::after,
.ee-site-header .wp-block-navigation a:focus-visible::after {
    transform: scaleX(1);
}

.ee-site-header .wp-block-navigation .current-menu-item > a {
    color: var(--wp--preset--color--ink);
}

.ee-site-header .wp-block-navigation .current-menu-item > a::after {
    background: var(--wp--preset--color--ink);
    transform: scaleX(1);
}

/* No underline gymnastics on the big Lora links in the mobile overlay */
.ee-site-header .wp-block-navigation__responsive-container.is-menu-open a::after {
    display: none;
}

/* The blockGap attr doesn't reliably reach the nav container; enforce the
   36px rhythm from the design here */
.ee-site-header .wp-block-navigation__container {
    gap: 36px;
}

/* Services dropdown: quiet panel on the warm base, no core defaults.
   Scoped outside the open mobile overlay, where submenus render inline. */
.ee-site-header .wp-block-navigation__responsive-container:not(.is-menu-open)
.wp-block-navigation__submenu-container {
    min-width: 220px;
    padding: 10px 18px;
    background: var(--wp--preset--color--base);
    border: 1px solid var(--wp--preset--color--border);
    box-shadow: 0 6px 16px rgb(26 24 21 / 14%);
}

.ee-site-header .wp-block-navigation__responsive-container:not(.is-menu-open)
.wp-block-navigation__submenu-container a {
    padding: 6px 0;
}

/* Submenu children in the mobile overlay: readable step below the big
   Lora top-level links */
.ee-site-header .wp-block-navigation__responsive-container.is-menu-open
.wp-block-navigation__submenu-container .wp-block-navigation-item__content {
    font-size: var(--wp--preset--font-size--lg);
}

/* --- Buttons: light sweep + arrow step (design: Dienst Maatwerkapplicaties;
   one pattern for ALL buttons, spec: block-theme "Accessibility") */

/* Hover: a warm-white layer sweeps in from the left under the label, which
   flips to deep - a clear dark→light state change on every button fill
   (deep and accent alike). The persistent 1px deep border (theme.json)
   keeps the hovered light state distinguishable on light backgrounds. The
   arrow (wrapped in .ee-btn-arrow) steps right. Keyboard focus gets the
   same affordance; the global reduced-motion block flattens both to an
   instant state change. */
.wp-block-button__link {
    position: relative;
    overflow: hidden;
    z-index: 0;
    transition: color var(--wp--custom--motion--duration-fast) var(--wp--custom--motion--easing);
}

/* Buttons are <a> elements and would inherit the prose-link accent
   underline inside post content (invisible on the old accent hover fill,
   visible on the light sweep) - header and in-content buttons must match */
a.wp-block-button__link {
    text-decoration: none;
}

.wp-block-button__link::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: var(--wp--preset--color--base);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.45s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.wp-block-button__link:hover::before,
.wp-block-button__link:focus-visible::before {
    transform: scaleX(1);
}

/* The label flips along with the sweep. Hover/focus lives here, NOT in
   theme.json: its :hover background swaps instantly and paints over the
   sweep (which is why the old deep buttons never showed it), and a
   text-only :hover there would leave click-focus with a deep label on a
   deep fill. */
.wp-block-button__link:hover,
.wp-block-button__link:focus-visible {
    color: var(--wp--preset--color--deep);
}

.ee-btn-arrow {
    display: inline-block;
    transition: translate var(--wp--custom--motion--duration-fast) var(--wp--custom--motion--easing);
}

@media (prefers-reduced-motion: no-preference) {
    .wp-block-button__link:hover .ee-btn-arrow,
    .wp-block-button__link:focus-visible .ee-btn-arrow {
        translate: 6px 0;
    }
}

/* Compact button variant (header CTA) — sizing via CSS keeps the block
   markup minimal and validation-proof */
.ee-btn-compact .wp-block-button__link {
    font-size: var(--wp--preset--font-size--sm);
    line-height: 1.2;
    padding: 12px 24px;
}

/* --- Kicker (uppercase label with accent dash) --------------------------- */

.ee-kicker {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: var(--wp--preset--font-size--xs);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--wp--preset--color--text-muted);
}

.ee-kicker::before {
    content: "";
    inline-size: 28px;
    block-size: 1px;
    background: var(--wp--preset--color--accent);
    flex: none;
}

/* --- Homepage sections (design: Homepage 1a v2) --------------------------- */

/* Editor canvas: give full-width sections the same 1360px cap as the
   frontend (.ee-home wrapper) instead of the article contentSize */
.editor-styles-wrapper .is-root-container > .alignfull {
    max-width: 1456px !important; /* 1360px content + 2x 48px gutter */
    margin-left: auto !important;
    margin-right: auto !important;
}

/* Full-bleed bands: sections span the whole viewport (backgrounds and
   hairline dividers run 100% wide); the gutter centers the content on the
   same 1264px box as the old 1360px-capped wrapper. Percentages resolve
   against the full-width parent, so this stays scrollbar-safe (no 100vw). */
:root {
    --ee-gutter: max(48px, calc(50% - 680px));
}

.ee-home {
    overflow-x: clip; /* contains full-bleed graphics like the timeline rule */
}

.ee-section {
    border-bottom: var(--wp--custom--hairline);
    padding: 64px var(--ee-gutter);
}

/* Title band on section pages (Diensten, Cases, Over ons, ...) — the
   gutter lives here, not on the constrained layout, so the H1 never
   touches the viewport edge on small screens. Kept deliberately compact:
   the H1's default margins would double the band height. */
.ee-page-head {
    padding: 32px var(--ee-gutter) 8px;
}

.ee-page-head .wp-block-post-title {
    margin-top: 0;
    margin-bottom: 0;
}

.ee-section-head {
    margin-bottom: 32px;
}

.ee-num {
    font-size: var(--wp--preset--font-size--xs);
    color: var(--wp--preset--color--accent);
    font-weight: 500;
}

.ee-accent { color: var(--wp--preset--color--accent); }
.ee-accent-text { color: var(--wp--preset--color--accent); }
.ee-deep-text { color: var(--wp--preset--color--deep); }

.ee-mono {
    font-family: var(--wp--preset--font-family--mono);
    font-size: var(--wp--preset--font-size--xs);
}

.ee-narrow { max-width: 400px; }

/* Long-form copy reads at case-body width (~2/3), not the full 1360px */
.ee-prose {
    max-width: 940px;
    line-height: 1.7;
}

.ee-link-underline a {
    font-size: var(--wp--preset--font-size--sm);
    text-decoration: none;
    border-bottom: 1px solid var(--wp--preset--color--accent);
    padding-bottom: 2px;
    transition: color var(--wp--custom--motion--duration-fast) var(--wp--custom--motion--easing);
}

/* Hover darkens to deep (accent text measures only 4.37:1 on the warm
   surfaces - below AA) and the accent underline thickens as the visible
   affordance */
.ee-link-underline a:hover,
.ee-link-underline a:focus-visible {
    color: var(--wp--preset--color--deep);
    border-bottom-width: 2px;
}

/* Hero */
.ee-hero {
    position: relative;
    overflow: hidden;
    padding: 110px var(--ee-gutter) 96px;
}

.ee-hero-canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.ee-hero-inner {
    position: relative;
    /* 900px in the design, widened so the longer Dutch headline
       ("Complexe problemen.") stays on one line at full size */
    max-width: 1010px;
}

.ee-hero-title {
    line-height: 1.02;
    letter-spacing: -0.02em;
}

.ee-hero-lead {
    max-width: 520px;
    margin-top: 42px;
}

.ee-hero-actions {
    margin-top: 48px;
    gap: 28px;
}

/* Strips (clients / tech stack) */
.ee-strip {
    padding: 22px var(--ee-gutter);
    background: var(--wp--preset--color--surface);
    gap: 32px;
}

.ee-strip-label {
    font-size: 12px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--wp--preset--color--text-muted);
    flex: none;
}

.ee-strip-items {
    display: flex;
    flex-wrap: wrap;
    gap: 16px 48px;
    font-size: var(--wp--preset--font-size--md);
    font-weight: 500;
    color: var(--wp--preset--color--text-muted);
}

.ee-strip-stack {
    background: var(--wp--preset--color--surface-warm);
}

.ee-strip-stack .ee-strip-items {
    gap: 16px 36px;
    font-family: var(--wp--preset--font-family--mono);
    font-size: var(--wp--preset--font-size--xs);
    color: #6b6553;
    font-weight: 400;
}

/* Services grid — cells carry their own 48px gutter, so the section only
   gets the outer share that centers the content box */
.ee-services {
    padding: 0 max(0px, calc(50% - 728px));
    gap: 0;
}

.ee-service-cell {
    padding: 44px 48px;
    border-right: var(--wp--custom--hairline);
    transition: background-color var(--wp--custom--motion--duration-fast) var(--wp--custom--motion--easing);
}

.ee-service-cell:last-child { border-right: none; }

.ee-service-cell:hover { background: var(--wp--preset--color--surface); }

.ee-service-cell .ee-more a {
    font-size: var(--wp--preset--font-size--sm);
    text-decoration: none;
}

/* How we work */
.ee-how-grid {
    gap: 64px;
    grid-template-columns: 1fr 1.3fr;
}

.ee-steps { display: flex; flex-direction: column; }

.ee-step {
    gap: 24px;
    padding: 26px 0;
    border-bottom: var(--wp--custom--hairline);
    align-items: flex-start;
}

.ee-step:last-child { border-bottom: none; }

.ee-step .ee-num { flex: none; width: 32px; }

.ee-step-title { font-size: 21px; }

/* QuickScan block */
.ee-quickscan {
    background: var(--wp--preset--color--deep);
    color: var(--wp--preset--color--base);
    position: relative;
    overflow: hidden;
}

.ee-quickscan::after {
    content: "";
    position: absolute;
    top: 0; right: 0; bottom: 0;
    width: 34%;
    background-image: radial-gradient(rgb(250 249 247 / 16%) 1.4px, transparent 1.4px);
    background-size: 26px 26px;
    mask-image: linear-gradient(to right, transparent, black 55%);
    pointer-events: none;
}

.ee-quickscan-inner { position: relative; z-index: 1; gap: 48px; }

/* CTA sits beside the copy (design), not under the stats */
.ee-quickscan-inner > .wp-block-buttons { flex: none; margin: 0; }

.ee-quickscan-copy { max-width: 620px; }

.ee-quickscan h2 {
    color: var(--wp--preset--color--base);
    /* design: 38px between the xxl and xxxl presets, tight block */
    font-size: 38px;
    line-height: 1.15;
    letter-spacing: -0.005em;
    margin: 0;
}

.ee-badge {
    display: inline-flex;
    font-size: 12px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    background: var(--wp--preset--color--accent);
    color: var(--wp--preset--color--base);
    padding: 7px 14px;
    margin: 0 0 22px;
}

.ee-quickscan-lead {
    color: var(--wp--preset--color--muted-on-dark);
    font-size: 15px;
    line-height: 1.6;
    margin: 18px 0 0;
}

.ee-quickscan-stats { gap: 36px; margin: 30px 0 0; }

.ee-stat-value {
    font-size: 22px;
    font-weight: 500;
    color: var(--wp--preset--color--accent-soft);
    line-height: 1.2;
    margin: 0;
}

.ee-stat-label {
    font-size: var(--wp--preset--font-size--xs);
    color: var(--wp--preset--color--muted-on-dark);
    line-height: 1.3;
    margin: 3px 0 0;
}

.ee-proof .ee-stat-label { color: var(--wp--preset--color--text-muted); }

.ee-quickscan-copy .wp-block-buttons { margin-top: 34px; }

.ee-quickscan .wp-block-button__link {
    background: var(--wp--preset--color--accent);
}

/* Cases — generous row gap so stacked cards read as separate entries */
.ee-cases-grid { gap: 64px 28px; }

/* Core gives the featured-image figure a bottom margin, which let the
   striped placeholder background peek out under every image */
.ee-case-media .wp-block-post-featured-image,
.ee-member-photo .wp-block-post-featured-image {
    margin: 0;
}

.ee-case-media {
    position: relative;
    min-height: 340px;
    overflow: hidden; /* contains the hover-zoom and parallax image motion */
    border: var(--wp--custom--hairline);
    background: repeating-linear-gradient(45deg, #eeece7 0 10px, var(--wp--preset--color--surface) 10px 20px);
    display: flex;
    align-items: stretch;
}

.ee-case-media .wp-block-post-featured-image,
.ee-case-media .wp-block-post-featured-image a,
.ee-case-media .wp-block-post-featured-image img {
    width: 100%;
    height: 340px;
    object-fit: cover;
    display: block;
}

.ee-case-badge {
    position: absolute;
    top: 16px;
    left: 16px;
    font-size: 11.5px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    background: var(--wp--preset--color--deep);
    color: var(--wp--preset--color--base);
    padding: 6px 12px;
}

.ee-case-badge a { color: inherit; text-decoration: none; }

.ee-case-meta { margin-top: 16px; }

.ee-case-meta h2 a,
.ee-case-meta h3 a { text-decoration: none; }

.ee-case-client {
    margin-top: 16px;
    font-size: var(--wp--preset--font-size--xs);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    font-weight: 600;
    color: var(--wp--preset--color--text-muted);
}

.ee-case-client + .ee-case-meta { margin-top: 6px; }

.ee-view-case {
    display: inline-block;
    font-size: var(--wp--preset--font-size--sm);
    color: var(--wp--preset--color--accent);
    text-decoration: none;
    margin-top: 12px;
}

a.ee-view-case:hover,
a.ee-view-case:focus-visible {
    border-bottom: 1px solid var(--wp--preset--color--accent);
}

.ee-case-excerpt { margin-top: 5px; }

/* Case service filter (cases overview) */
.ee-case-filter ul {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    list-style: none;
    margin: 28px 0 0;
    padding: 0;
}

.ee-filter-chip {
    display: inline-block;
    font-size: var(--wp--preset--font-size--sm);
    color: var(--wp--preset--color--text-secondary);
    text-decoration: none;
    border: 1px solid var(--wp--preset--color--border);
    padding: 8px 18px;
    transition:
        color var(--wp--custom--motion--duration-fast) var(--wp--custom--motion--easing),
        border-color var(--wp--custom--motion--duration-fast) var(--wp--custom--motion--easing),
        background-color var(--wp--custom--motion--duration-fast) var(--wp--custom--motion--easing);
}

.ee-filter-chip:hover,
.ee-filter-chip:focus-visible {
    color: var(--wp--preset--color--ink);
    border-color: var(--wp--preset--color--accent);
}

.ee-filter-chip.is-active {
    background: var(--wp--preset--color--deep);
    border-color: var(--wp--preset--color--deep);
    color: var(--wp--preset--color--base);
}

/* While the AJAX filter fetches, dim the grid (state change stays visible
   under reduced motion because the transition collapses to instant) */
.wp-block-query[aria-busy="true"] {
    opacity: 0.45;
    transition: opacity var(--wp--custom--motion--duration-fast) var(--wp--custom--motion--easing);
}

/* Client quote on the case detail page (hidden entirely when no approved
   quote exists — see the render_block filter in functions.php) */
.ee-case-quote {
    border-left: 2px solid var(--wp--preset--color--accent);
    padding: 8px 0 8px 32px;
    margin-top: var(--wp--preset--spacing--40);
}

.ee-case-quote .ee-quote { font-size: 24px; }

.ee-case-quote .ee-quote-attr {
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    margin-top: 16px;
}

.ee-case-quote .ee-quote-attr-name { font-weight: 500; }

/* Proof */
.ee-proof { gap: 64px; align-items: center; }

/* Three-testimonial layout (proof section) */
.ee-proof-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 48px;
    align-items: start;
}

.ee-proof-grid .ee-quote {
    font-size: 21px;
    line-height: 1.5;
}

.ee-proof-grid + .ee-proof-stats { margin-top: 32px; }

/* Testimonial carousel (JS enhancement of the proof grid): one quote in
   view, the next slides in — see proof-carousel.js. Skipped entirely
   under prefers-reduced-motion, where the static grid remains. */
@media (prefers-reduced-motion: no-preference) {
    .ee-proof-grid.ee-carousel {
        display: block;
        position: relative;
        overflow: hidden;
        max-width: 720px;
    }

    .ee-proof-grid.ee-carousel > * {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        transform: translateX(108%);
        opacity: 0;
        transition:
            transform 600ms var(--wp--custom--motion--easing),
            opacity 600ms var(--wp--custom--motion--easing);
    }

    .ee-proof-grid.ee-carousel > .is-active {
        transform: translateX(0);
        opacity: 1;
    }

    .ee-proof-grid.ee-carousel > .is-leaving {
        transform: translateX(-108%);
        opacity: 0;
    }

    .ee-proof-grid.ee-carousel > .no-transition {
        transition: none;
    }
}

.ee-quote {
    font-family: var(--wp--preset--font-family--lora);
    font-style: italic;
    font-size: 30px;
    line-height: 1.4;
}

.ee-quote-attribution { margin-top: 22px; color: var(--wp--preset--color--text-muted); }

.ee-quote-attribution strong { color: var(--wp--preset--color--ink); font-weight: 500; }

.ee-proof-stats { gap: 0; border-left: var(--wp--custom--hairline); }

.ee-proof-stat { padding: 4px 32px; }

.ee-proof-stat + .ee-proof-stat { border-left: var(--wp--custom--hairline); }

/* Half the original height: the 44px numeral drove the block size */
.ee-proof-number {
    font-family: var(--wp--preset--font-family--lora);
    font-size: 28px;
    line-height: 1.2;
    white-space: nowrap;
}

/* Team */
.ee-team-grid { gap: 28px; align-items: start; }

.ee-photo-ph {
    min-height: 280px;
    border: var(--wp--custom--hairline);
    background: repeating-linear-gradient(45deg, #eeece7 0 10px, var(--wp--preset--color--surface) 10px 20px);
    display: flex;
    align-items: center;
    justify-content: center;
}

.ee-photo-ph-offset { margin-top: 32px; }

.ee-ph-label { color: var(--wp--preset--color--text-muted); }

/* CTA */
.ee-cta {
    padding: 88px var(--ee-gutter);
    text-align: center;
}

.ee-cta-kicker {
    font-size: var(--wp--preset--font-size--xs);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--wp--preset--color--accent);
    margin: 0 0 20px;
}

.ee-cta h2 { line-height: 1.08; letter-spacing: -0.01em; text-wrap: balance; margin: 0; }

.ee-cta .ee-cta-sub {
    color: var(--wp--preset--color--text-secondary);
    margin: 20px auto 0;
    max-width: 640px;
}

.ee-cta .wp-block-buttons { margin-top: 40px; }

/* --- Detail pages (case / vacancy / article) ------------------------------ */

.ee-meta-panel {
    border-top: var(--wp--custom--hairline);
    border-bottom: var(--wp--custom--hairline);
    padding: 26px 0;
    margin-top: var(--wp--preset--spacing--30);
    gap: 32px;
}

.ee-meta-label {
    font-size: var(--wp--preset--font-size--xs);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--wp--preset--color--text-muted);
}

.ee-meta-value {
    margin-top: 6px;
    font-weight: 500;
}

.ee-case-badge-inline {
    position: static;
    display: inline-flex;
    margin-top: 12px;
}

/* --- Case detail ---------------------------------------------------------- */

/* Compact head: kicker, narrative title, one-line summary, meta strip.
   The strip replaces the old three-column meta panel (which overflowed on
   mobile); labels are gone — the values are self-explanatory. */
.ee-case-head .wp-block-post-title {
    margin-top: 12px;
    margin-bottom: 0;
}

.ee-case-summary {
    margin-top: 18px;
    max-width: 720px;
    font-size: var(--wp--preset--font-size--lg);
    line-height: 1.5;
}

.ee-case-meta-strip {
    margin-top: 28px;
    padding: 16px 0;
    border-top: var(--wp--custom--hairline);
    border-bottom: var(--wp--custom--hairline);
    gap: 10px 36px;
}

.ee-case-meta-strip p { margin: 0; }

.ee-case-meta-item {
    font-size: var(--wp--preset--font-size--sm);
    font-weight: 500;
}

.ee-case-meta-period { color: var(--wp--preset--color--text-secondary); }

.ee-case-meta-strip .ee-case-badge-inline { margin-top: 0; }

.ee-case-livelink a {
    color: var(--wp--preset--color--accent);
    text-decoration: none;
}

.ee-case-livelink a:hover,
.ee-case-livelink a:focus-visible {
    border-bottom: 1px solid var(--wp--preset--color--accent);
}

/* Key visual: real product imagery, capped so head + visual roughly fit one
   desktop viewport (the old 340px band was neither hero nor illustration) */
.ee-case-hero {
    margin-top: var(--wp--preset--spacing--30);
    margin-bottom: 0;
}

.ee-case-hero.ee-case-media,
.ee-case-hero .wp-block-post-featured-image,
.ee-case-hero .wp-block-post-featured-image img {
    height: min(48vh, 440px);
}

/* Facts row: up to three real, sourced stats (row hidden entirely without
   a first stat — see the render_block filter in functions.php) */
.ee-case-facts {
    padding: 30px 0;
    border-bottom: var(--wp--custom--hairline);
    gap: 32px;
}

/* Scoped: .ee-stat-value/.ee-stat-label also serve the QuickScan band */
.ee-case-facts .ee-stat-value {
    font-size: var(--wp--preset--font-size--xxl);
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--wp--preset--color--deep);
    line-height: 1.1;
}

.ee-case-facts .ee-stat-label {
    margin-top: 6px;
    font-size: var(--wp--preset--font-size--xs);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--wp--preset--color--text-muted);
}

/* Case body: calm editorial column on the page's left axis — headings,
   text and the head/stats above share one left edge, imagery breaks out
   to the full content width. Headings carry a short accent rule. */
.ee-case-page .wp-block-post-content { margin-top: var(--wp--preset--spacing--40); }

/* Core's constrained layout centers children with !important margins;
   the case body instead left-aligns on the page's axis, at roughly
   two-thirds of the content width and a step up in size */
.ee-case-page .wp-block-post-content > * {
    margin-left: 0 !important;
    margin-right: 0 !important;
    max-width: 940px;
}

.ee-case-page .wp-block-post-content > p,
.ee-case-page .wp-block-post-content > ul {
    font-size: var(--wp--preset--font-size--md);
    line-height: 1.7;
    margin-top: 0;
    margin-bottom: 24px;
}

.ee-case-page .wp-block-post-content > p:first-child {
    font-size: var(--wp--preset--font-size--lg);
    line-height: 1.55;
    margin-bottom: var(--wp--preset--spacing--30);
}

.ee-case-page .wp-block-post-content > h2 {
    margin-top: 72px;
    margin-bottom: 22px;
    font-size: var(--wp--preset--font-size--xxl);
    line-height: 1.1;
    letter-spacing: -0.01em;
}

.ee-case-page .wp-block-post-content > h2::before {
    content: "";
    display: block;
    width: 36px;
    height: 2px;
    background: var(--wp--preset--color--accent);
    margin-bottom: 20px;
}

/* Lists: quiet accent dashes instead of default bullets */
.ee-case-page .wp-block-post-content > ul {
    list-style: none;
    padding-left: 0;
}

.ee-case-page .wp-block-post-content > ul li {
    position: relative;
    padding-left: 28px;
    margin-bottom: 10px;
}

.ee-case-page .wp-block-post-content > ul li::before {
    content: "—";
    position: absolute;
    left: 0;
    color: var(--wp--preset--color--accent);
}

/* Imagery: seeded alignwide, breaks out to full content width,
   hairline-framed, generous vertical air */
.ee-case-page .wp-block-post-content > figure.wp-block-image,
.ee-case-page .wp-block-post-content > .wp-block-columns,
.ee-case-page .wp-block-post-content > .wp-block-gallery {
    max-width: none;
    margin-top: 44px;
    margin-bottom: 52px;
}

.ee-case-page .wp-block-post-content figure.wp-block-image {
    border: var(--wp--custom--hairline);
}

.ee-case-page .wp-block-post-content figure.wp-block-image img {
    width: 100%;
    height: auto;
    display: block;
}

.ee-case-page .wp-block-post-content .wp-block-columns { gap: 28px; }

.ee-case-page .wp-block-post-content .wp-block-columns figure.wp-block-image { margin: 0; }

.ee-case-page .wp-block-post-content .wp-block-gallery { gap: 28px; }

.ee-case-page .wp-block-post-content .wp-block-gallery figure.wp-block-image { margin: 0; }

/* Technologies as badge chips (rendered from the comma-separated meta) */
.ee-case-tech-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: var(--wp--preset--spacing--40);
}

.ee-tech-badge {
    font-family: var(--wp--preset--font-family--mono);
    font-size: var(--wp--preset--font-size--xs);
    color: var(--wp--preset--color--text-secondary);
    border: var(--wp--custom--hairline);
    padding: 6px 12px;
}

/* Related cases (server-rendered: up to two cases sharing a service term) */
.ee-related-cases { margin-top: var(--wp--preset--spacing--50); }

.ee-related-heading {
    font-size: var(--wp--preset--font-size--xl);
    margin: 0 0 4px;
}

.ee-related-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 28px;
    margin-top: 24px;
}

.ee-related-grid .ee-case-media,
.ee-related-grid .ee-case-media a,
.ee-related-grid .ee-case-media img {
    width: 100%;
    height: 260px;
    min-height: 0;
    object-fit: cover;
    display: block;
}

.ee-case-related-title {
    margin: 6px 0 0;
    font-size: var(--wp--preset--font-size--xl);
}

.ee-case-related-title a { text-decoration: none; }

.ee-case-back { margin-top: var(--wp--preset--spacing--40); }

.ee-member-photo { min-height: 280px; margin-bottom: 16px; }

.ee-member-photo .wp-block-post-featured-image img {
    width: 100%;
    height: 280px;
    object-fit: cover;
    display: block;
}

.ee-member-role { margin-top: 4px; }

.ee-team-members { gap: 28px; }

.ee-vacancy-row {
    padding: 26px 0;
    border-bottom: var(--wp--custom--hairline);
    gap: 24px;
}

.ee-vacancy-row h2 a { text-decoration: none; }

.ee-empty-state { padding: var(--wp--preset--spacing--40) 0; }

.ee-post-byline { gap: 16px; margin-top: 14px; }

/* Category terms styled as kicker link */
.ee-kicker a { color: inherit; text-decoration: none; }

/* --- Contact form ---------------------------------------------------------- */

.ee-visually-hidden {
    position: absolute !important;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

.ee-contact-grid { gap: 64px; align-items: start; }

.ee-contact-form { max-width: 560px; }

.ee-contact-form .ee-field { margin: 0 0 22px; }

.ee-contact-form label {
    display: block;
    font-size: var(--wp--preset--font-size--xs);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--wp--preset--color--text-muted);
    margin-bottom: 8px;
}

.ee-contact-form input[type="text"],
.ee-contact-form input[type="email"],
.ee-contact-form textarea {
    box-sizing: border-box;
    width: 100%;
    font: inherit;
    color: var(--wp--preset--color--ink);
    background: var(--wp--preset--color--base);
    border: 1px solid var(--wp--preset--color--border);
    border-radius: 0;
    padding: 14px 16px;
    transition: border-color var(--wp--custom--motion--duration-fast) var(--wp--custom--motion--easing);
}

.ee-contact-form input:focus-visible,
.ee-contact-form textarea:focus-visible {
    outline: none;
    border-color: var(--wp--preset--color--accent);
}

.ee-field-error {
    display: block;
    color: var(--wp--preset--color--accent);
    font-size: var(--wp--preset--font-size--sm);
    margin-top: 6px;
}

.ee-form-status { font-size: var(--wp--preset--font-size--md); min-height: 1.5em; }
.ee-form-status.is-success { color: #2c4a42; }
.ee-form-status.is-error { color: var(--wp--preset--color--accent); }

.ee-form-privacy { margin-top: 14px; }

/* --- Service detail sections (Diensten / Services page) ------------------- */

.ee-svc-detail .ee-svc-grid {
    grid-template-columns: 1fr 1.3fr;
    gap: 64px;
    margin-top: 24px;
}

.ee-svc-detail h2 { max-width: 520px; }

.ee-svc-list { padding-left: 0; margin: 0; list-style: none; }

.ee-svc-list li {
    padding: 12px 0;
    border-bottom: var(--wp--custom--hairline);
}

.ee-svc-list li:last-child { border-bottom: none; }

.ee-svc-tech { margin-top: 22px; color: #6b6553; }

/* --- Mobile navigation overlay -------------------------------------------- */

.ee-site-header .wp-block-navigation__responsive-container.is-menu-open {
    padding: 96px 24px 40px;
}

.ee-site-header .wp-block-navigation__responsive-container.is-menu-open
.wp-block-navigation__container {
    gap: 6px;
}

.ee-site-header .wp-block-navigation__responsive-container.is-menu-open
.wp-block-navigation-item__content {
    font-family: var(--wp--preset--font-family--lora);
    font-size: var(--wp--preset--font-size--xxl);
    line-height: 1.35;
    color: var(--wp--preset--color--ink);
}

/* --- Responsive ----------------------------------------------------------- */

@media (max-width: 1024px) {
    /* Below desktop width the headline/lead overlap the busy right half
       of the hero canvas (the JS fade only protects the left edge), so
       dim the whole layer to keep the text contrast up */
    .ee-hero-canvas { opacity: 0.4; }
    .ee-services { grid-template-columns: 1fr !important; }
    .ee-service-cell { border-right: none; border-bottom: var(--wp--custom--hairline); }
    .ee-service-cell:last-child { border-bottom: none; }
    .ee-how-grid { grid-template-columns: 1fr; gap: 32px; }
    .ee-proof-grid { grid-template-columns: 1fr; gap: 36px; }
    .ee-team-grid { grid-template-columns: 1fr 1fr !important; }
    .ee-svc-detail .ee-svc-grid { grid-template-columns: 1fr; gap: 32px; }
}

@media (max-width: 781px) {
    .ee-section { padding: 48px 24px; }
    .ee-page-head { padding: 24px 24px 0; }
    .ee-cases-grid { gap: 48px; }
    .ee-site-header > .ee-header-inner { padding: 14px 20px; row-gap: 10px; }
    .ee-btn-compact .wp-block-button__link { padding: 9px 16px; font-size: var(--wp--preset--font-size--xs); }
    .ee-header-actions { gap: 16px; }
    .ee-site-footer > .ee-footer-inner { padding: 32px 24px 16px; }
    .ee-footer-links { justify-content: flex-start; }
    .ee-footer-legal { padding: 16px 24px; }
    .ee-hero { padding: 72px 24px 64px; }
    .ee-strip { padding: 22px 24px; }
    .ee-service-cell { padding: 32px 24px; }
    .ee-cta { padding: 64px 24px; }
    .ee-cases-grid,
    .ee-proof,
    .ee-proof-grid,
    .ee-team-grid,
    .ee-contact-grid { grid-template-columns: 1fr !important; }
    .ee-proof-grid { gap: 36px; }
    .ee-contact-grid { gap: 40px; }
    .ee-proof { gap: 32px; }
    /* Stats stack as rows: no wrapped "7 jaar", labels stay attached */
    .ee-proof-stats { grid-template-columns: 1fr !important; border-left: none; }
    .ee-proof-stat { padding: 8px 0; }
    .ee-proof-stat + .ee-proof-stat { border-left: none; border-top: var(--wp--custom--hairline); }
    /* Case meta (Client / Technologies / Outcome) stacks instead of
       squeezing into three columns — prevents horizontal overflow */
    .ee-meta-panel { grid-template-columns: 1fr !important; gap: 20px; }
    /* Case detail: stats stack as rows, key visual and related cards shrink */
    .ee-case-facts { grid-template-columns: 1fr !important; gap: 0; padding: 8px 0; }
    .ee-case-stat { padding: 14px 0; }
    .ee-case-stat + .ee-case-stat { border-top: var(--wp--custom--hairline); }
    .ee-case-hero.ee-case-media,
    .ee-case-hero .wp-block-post-featured-image,
    .ee-case-hero .wp-block-post-featured-image img { height: 240px; }
    .ee-case-meta-strip { gap: 8px 24px; }
    /* Body: the heading rail folds into a single column */
    .ee-case-page .wp-block-post-content { grid-template-columns: minmax(0, 1fr); }
    .ee-case-page .wp-block-post-content > h2,
    .ee-case-page .wp-block-post-content > p:first-child,
    .ee-case-page .wp-block-post-content > figure.wp-block-image,
    .ee-case-page .wp-block-post-content > .wp-block-columns,
    .ee-case-page .wp-block-post-content > .wp-block-gallery { grid-column: 1; }
    .ee-case-page .wp-block-post-content > h2 { margin-top: 20px; margin-bottom: 14px; }
    .ee-related-grid { grid-template-columns: 1fr; gap: 40px; }
    .ee-case-page .wp-block-post-content .wp-block-columns figure.wp-block-image { margin: 0; }
    .ee-photo-ph-offset { margin-top: 0; }
    .ee-quickscan-inner { flex-direction: column; align-items: flex-start; }
}

/* Logowall */
.ee-logowall { padding-top: 34px; padding-bottom: 42px; }

.ee-logowall .ee-strip-label { margin-bottom: 16px; }

.ee-logo-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 1px;
    background: var(--wp--preset--color--border);
    border: var(--wp--custom--hairline);
}

.ee-logo-cell {
    background: var(--wp--preset--color--base);
    min-height: 88px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 18px 24px;
}

.ee-logo-cell figure { margin: 0; display: flex; align-items: center; justify-content: center; }

.ee-logo-cell img {
    max-height: 44px;
    width: auto;
    max-width: 100%;
    object-fit: contain;
    filter: grayscale(1);
    opacity: 0.75;
    transition: filter 0.2s ease, opacity 0.2s ease;
}

.ee-logo-cell:hover img,
.ee-logo-cell a:focus-visible img { filter: none; opacity: 1; }

/* Touch devices have no hover: show the colored logos permanently */
@media (hover: none) {
    .ee-logo-cell img { filter: none; opacity: 1; }
}

/* Featured case (lead) */
.ee-case-lead-body {
    padding: 44px 48px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    justify-content: center;
}

.ee-case-lead-client { font-weight: 600; letter-spacing: 0.04em; }

/* Attributed quote (photo + name + role) */
.ee-quote-attr { gap: 14px; margin-top: 22px; }

.ee-quote-attr figure { margin: 0; }

.ee-quote-attr img {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    object-fit: cover;
    display: block;
}

.ee-quote-attr p { line-height: 1.45; }

.ee-quote-attr strong { font-weight: 500; }

.ee-stat-src {
    display: block;
    font-family: var(--wp--preset--font-family--mono);
    font-size: 11px;
    color: var(--wp--preset--color--text-muted);
    margin-top: 6px;
}

/* Proof on deep background (chosen design: V1 + V2's dark proof band) */
.ee-proof-dark { background: var(--wp--preset--color--deep); }

.ee-proof-dark .ee-quote,
.ee-proof-dark .ee-quote-attr strong { color: var(--wp--preset--color--base); }

.ee-proof-dark .ee-quote-attr p,
.ee-proof-dark .ee-stat-label,
.ee-proof-dark .ee-stat-src { color: var(--wp--preset--color--muted-on-dark); }

.ee-proof-dark .ee-proof-number.ee-accent-text { color: var(--wp--preset--color--accent-soft); }

.ee-proof-dark .ee-proof-number.ee-deep-text { color: var(--wp--preset--color--base); }

.ee-proof-dark .ee-proof-stats,
.ee-proof-dark .ee-proof-stat + .ee-proof-stat { border-color: rgb(147 168 156 / 35%); }

/* Team photos */
.ee-team-photo { border: var(--wp--custom--hairline); overflow: hidden; margin: 0; }

.ee-team-photo img {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 280px;
    object-fit: cover;
}

/* Newsletter */
.ee-newsletter { background: var(--wp--preset--color--surface-warm); }

.ee-newsletter-inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 48px;
    align-items: center;
}

.ee-newsletter-form .ee-newsletter-row {
    display: flex;
    align-items: stretch;
}

.ee-newsletter-form .ee-field {
    margin: 0;
    flex: 1;
    display: flex;
}

.ee-newsletter-form input[type="email"] {
    width: 100%;
    border: 1px solid var(--wp--preset--color--ink);
    border-right: 0;
    background: var(--wp--preset--color--base);
    padding: 12px 16px;
    font: inherit;
}

.ee-newsletter-form input[type="email"]:focus-visible {
    outline: 2px solid var(--wp--preset--color--accent);
    outline-offset: -1px;
}

.ee-newsletter-form .wp-block-buttons,
.ee-newsletter-form .wp-block-button {
    display: flex;
    margin: 0;
}

.ee-newsletter-form .wp-block-button__link {
    border-radius: 0;
    display: flex;
    align-items: center;
    height: 100%;
}

.ee-newsletter-form .ee-field-error:empty,
.ee-newsletter-form .ee-form-status:empty { display: none; }

.ee-newsletter-form .ee-form-status.is-success { color: var(--wp--preset--color--accent); }

@media (max-width: 1024px) {
    .ee-logo-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 781px) {
    .ee-logo-grid { grid-template-columns: repeat(2, 1fr); }
    .ee-case-lead-body { padding: 32px 24px; }
    .ee-newsletter-inner { grid-template-columns: 1fr; gap: 24px; }
    .ee-newsletter-form .ee-newsletter-row { flex-direction: column; }
    .ee-newsletter-form input[type="email"] { border-right: 1px solid var(--wp--preset--color--ink); }
    .ee-newsletter-form .wp-block-buttons,
    .ee-newsletter-form .wp-block-button { width: 100%; }
    .ee-newsletter-form .wp-block-button__link {
        width: 100%;
        justify-content: center;
        padding-top: 14px;
        padding-bottom: 14px;
    }
}

/* --- Landing-page sections (services depth) ------------------------------- */

/* Phase timeline: the how-we-work steps gain a week label in the margin */
.ee-step-when {
    flex: none;
    width: 110px;
    padding-top: 5px;
    font-family: var(--wp--preset--font-family--mono);
    font-size: var(--wp--preset--font-size--xs);
    color: var(--wp--preset--color--accent);
}

/* Personal CTA: a named human instead of an anonymous form link */
.ee-person-cta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 20px 32px;
    border: var(--wp--custom--hairline);
    background: var(--wp--preset--color--surface);
    padding: 32px 40px;
    margin-top: var(--wp--preset--spacing--40);
}

.ee-person-cta p {
    margin: 0;
}

.ee-person-cta .ee-person-copy {
    max-width: 640px;
}

/* Anchored sections clear the header when deep-linked */
#quickscan {
    scroll-margin-top: 88px;
}

/* Standalone service-page quote: the case-quote look without the
   case-meta-driven visibility filter that ee-case-quote carries */
.ee-svc-quote {
    border-left: 2px solid var(--wp--preset--color--accent);
    padding: 8px 0 8px 32px;
    margin-top: var(--wp--preset--spacing--40);
}

.ee-svc-quote .ee-quote {
    font-size: 24px;
}

.ee-svc-quote .ee-quote-attr {
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    margin-top: 16px;
}

/* --- Service landing layout (design: Dienst Maatwerkapplicaties) ---------- */

/* Tinted band: alternates with the base background between sections */
.ee-band-surface { background: var(--wp--preset--color--surface); }

/* Hero: positioning statement left, USP rail right */
.ee-svcl-hero {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 80px;
    padding: 96px var(--ee-gutter) 80px;
}

.ee-svcl-hero-main { max-width: 760px; }

/* Between jumbo (58) and display (92); clamp keeps the long Dutch
   statements on two lines across widths */
.ee-svcl-title {
    font-size: clamp(46px, 6vw, 76px);
    line-height: 1.04;
    letter-spacing: -0.02em;
    margin: 28px 0 0;
}

.ee-svcl-lead { max-width: 560px; margin-top: 36px; }

.ee-svcl-sub { max-width: 560px; margin-top: 18px; font-size: 15.5px; line-height: 1.65; }

.ee-svcl-hero .ee-hero-actions { margin-top: 44px; }

.ee-svcl-usps { flex: none; width: 340px; margin-top: 76px; }

/* Dash list: hairline rows with an accent dash (hero USPs, weigh signals) */
.ee-dash-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.ee-dash-list li {
    display: flex;
    gap: 14px;
    align-items: baseline;
    padding: 16px 0;
    border-top: var(--wp--custom--hairline);
    font-size: var(--wp--preset--font-size--sm);
    line-height: 1.55;
    color: var(--wp--preset--color--text-secondary);
}

.ee-dash-list li:last-child { border-bottom: var(--wp--custom--hairline); }

.ee-dash-list li::before {
    content: "—";
    color: var(--wp--preset--color--accent);
    font-size: var(--wp--preset--font-size--xs);
    flex: none;
}

/* Section header row on the same three-column grid as the cards below:
   the heading spans two columns, the intro aligns above the third card */
.ee-sect-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 48px;
    align-items: end;
    margin-bottom: 64px;
}

.ee-sect-row h2 {
    grid-column: 1 / span 2;
    max-width: 640px;
    margin: 0;
    line-height: 1.12;
}

.ee-sect-row p { margin: 0; }

/* Weighing section: photo + caption left, prose/pull-quote/signals right */
.ee-weigh {
    display: grid;
    grid-template-columns: 1fr 1.3fr;
    gap: 64px;
    align-items: start;
    margin-top: 24px;
}

.ee-weigh h2 { margin: 0; line-height: 1.12; }

.ee-weigh-photo {
    margin: 40px 0 0;
    border: var(--wp--custom--hairline);
}

.ee-weigh-photo img {
    width: 100%;
    height: 300px;
    object-fit: cover;
    display: block;
}

.ee-weigh-caption {
    margin-top: 12px;
    font-size: var(--wp--preset--font-size--xs);
    color: var(--wp--preset--color--text-muted);
}

.ee-pullquote {
    margin: 32px 0;
    padding: 24px 30px;
    border-left: 2px solid var(--wp--preset--color--accent);
    background: var(--wp--preset--color--base);
    font-family: var(--wp--preset--font-family--lora);
    font-size: var(--wp--preset--font-size--lg);
    font-style: italic;
    line-height: 1.5;
}

.ee-list-label {
    font-size: var(--wp--preset--font-size--xs);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--wp--preset--color--text-muted);
    margin-bottom: 6px;
}

/* Sub-service cards: hairline top, accent edge slides in on hover */
.ee-svcl-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 48px;
}

/* The whole card is clickable: the read-more link stretches over it */
.ee-svcl-card {
    position: relative;
    cursor: pointer;
    border-top: var(--wp--custom--hairline);
    padding: 26px 0 8px;
    transition: box-shadow 0.35s ease;
}

.ee-svcl-card .ee-more a::after {
    content: "";
    position: absolute;
    inset: 0;
}

.ee-svcl-card:hover,
.ee-svcl-card:focus-within {
    box-shadow: inset 0 2px 0 var(--wp--preset--color--accent);
}

.ee-svcl-card h3 {
    margin: 0;
    transition: color 0.35s ease;
}

.ee-svcl-card:hover h3,
.ee-svcl-card:focus-within h3 {
    color: var(--wp--preset--color--accent);
}

.ee-svcl-card p { margin: 12px 0 22px; }

.ee-svcl-card .ee-more { margin: 0 0 14px; }

/* Read-more link: underline slides in with the hover (arrow excluded —
   its inline-block display keeps the inherited underline off) */
.ee-svcl-card .ee-more a {
    font-size: var(--wp--preset--font-size--sm);
    text-decoration: underline;
    text-decoration-color: transparent;
    text-decoration-thickness: 1px;
    text-underline-offset: 4px;
    transition: text-decoration-color 0.35s ease;
}

.ee-svcl-card:hover .ee-more a,
.ee-svcl-card:focus-within .ee-more a {
    text-decoration-color: var(--wp--preset--color--accent);
}

/* Overview cards carry two links (proof case + read-more), so the whole-card
   click overlay is dropped and the title itself links to the landing; the
   hairline-top card visual and the hover accent edge are kept. The title is an
   h2 here (correct hierarchy under the page h1), so mirror the h3 title rules. */
.ee-svcl-card.ee-card-multi { cursor: default; }
.ee-svcl-card.ee-card-multi .ee-more a::after { content: none; }
.ee-svcl-card.ee-card-multi h2 { margin: 0; transition: color 0.35s ease; }
.ee-svcl-card.ee-card-multi:hover h2,
.ee-svcl-card.ee-card-multi:focus-within h2 { color: var(--wp--preset--color--accent); }
.ee-svcl-card.ee-card-multi h2 a,
.ee-svcl-card.ee-card-multi h3 a { color: inherit; text-decoration: none; }
.ee-svcl-card.ee-card-multi .ee-svcl-card-proof { margin: 0 0 18px; font-size: var(--wp--preset--font-size--sm); }

/* Static three-column cells: the card look without link affordances
   (lessons learned and other non-navigable sections) */
.ee-cards-static {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 48px;
}

.ee-cards-static .ee-card-cell {
    border-top: var(--wp--custom--hairline);
    padding: 26px 0 8px;
}

.ee-cards-static .ee-card-cell h3 { margin: 0; }

.ee-cards-static .ee-card-cell p { margin: 12px 0 0; }

/* Design font sizes on landing body copy (between the sm/md presets) */
.ee-weigh .has-text-secondary-color { font-size: 15.5px; }

.ee-svcl-card .has-text-muted-color,
.ee-cards-static .ee-card-cell .has-text-muted-color,
.ee-tl-phase .has-text-muted-color {
    font-size: var(--wp--preset--font-size--sm);
}

.ee-faq-item .has-text-muted-color { font-size: 14.5px; }

/* Case-card outcome line: quieter and smaller (design 13.5/#8a857b) */
.ee-case-card .ee-case-excerpt {
    font-size: 13.5px;
    color: var(--wp--preset--color--text-muted);
    line-height: 1.55;
    margin-top: 5px;
}

/* Circular portrait slot in the person strip; striped placeholder until a
   photo lands (swap the group for a wp:image, same class) */
.ee-person-avatar {
    flex: none;
    inline-size: 64px;
    block-size: 64px;
    border-radius: 50%;
    overflow: hidden;
    border: var(--wp--custom--hairline);
    background: repeating-linear-gradient(45deg, #eeece7 0 10px, var(--wp--preset--color--surface) 10px 20px);
}

.ee-person-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Personal CTA strip: full-width band replacing the framed person box */
.ee-person-strip {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 20px 28px;
    padding: 34px var(--ee-gutter);
}

.ee-person-strip p { margin: 0; }

.ee-person-strip .ee-person-copy {
    flex: 1;
    min-width: 300px;
    font-size: 15px;
}

/* Related cases on a landing: block heading reads as a kicker-level label */
.ee-svcl-cases .ee-related-cases { margin-top: 0; }

.ee-svcl-cases .ee-related-heading {
    font-family: var(--wp--preset--font-family--instrument-sans);
    font-size: var(--wp--preset--font-size--xs);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-weight: 400;
    color: var(--wp--preset--color--text-muted);
    margin: 0 0 4px;
}

.ee-svcl-cases .ee-related-grid .ee-case-media,
.ee-svcl-cases .ee-related-grid .ee-case-media a,
.ee-svcl-cases .ee-related-grid .ee-case-media img { height: 340px; }

/* Card title row: title left, view-case arrow right (block-rendered) */
.ee-case-title-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 16px;
    margin-top: 16px;
}

.ee-case-title-row .ee-case-related-title { margin: 0; }

.ee-case-title-row .ee-view-case { margin: 0; flex: none; }

/* Phase timeline: three columns on a shared hairline, square markers */
.ee-timeline {
    position: relative;
    margin-top: 24px;
}

/* The connecting rule runs edge to edge (clipped by .ee-home) */
.ee-timeline::before {
    content: "";
    position: absolute;
    top: 5px;
    left: 50%;
    width: 100vw;
    transform: translateX(-50%);
    height: 1px;
    background: var(--wp--preset--color--border);
}

.ee-timeline-grid {
    position: relative;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 48px;
}

.ee-tl-phase::before {
    content: "";
    display: block;
    inline-size: 11px;
    block-size: 11px;
    background: var(--wp--preset--color--accent);
    margin-bottom: 22px;
}

.ee-tl-phase:last-child::before { background: var(--wp--preset--color--deep); }

/* Doubled class beats the .ee-tl-phase p margin rule below */
.ee-tl-phase .ee-tl-when {
    font-family: var(--wp--preset--font-family--mono);
    font-size: var(--wp--preset--font-size--xs);
    color: var(--wp--preset--color--accent);
    margin: 0 0 12px;
}

.ee-tl-phase h3 { margin: 0; }

.ee-tl-phase p { margin: 10px 0 0; }

/* FAQ: kicker + serif heading left, divided question list right */
.ee-faq-grid {
    display: grid;
    grid-template-columns: 1fr 1.3fr;
    gap: 64px;
    align-items: start;
    margin-top: 24px;
}

.ee-faq-grid h2 { margin: 0; line-height: 1.12; }

.ee-faq-item {
    padding: 24px 0;
    border-bottom: var(--wp--custom--hairline);
}

.ee-faq-item:last-child { border-bottom: none; }

.ee-faq-item h3 {
    margin: 0;
    font-size: var(--wp--preset--font-size--lg);
}

.ee-faq-item p { margin: 10px 0 0; }

/* Deep CTA: the closing band gains the quickscan dot texture */
.ee-cta-deep {
    background: var(--wp--preset--color--deep);
    position: relative;
    overflow: hidden;
}

.ee-cta-deep::after {
    content: "";
    position: absolute;
    top: 0; right: 0; bottom: 0;
    width: 28%;
    background-image: radial-gradient(rgb(250 249 247 / 14%) 1.4px, transparent 1.4px);
    background-size: 26px 26px;
    mask-image: linear-gradient(to right, transparent, black 60%);
    pointer-events: none;
}

.ee-cta-deep > * { position: relative; z-index: 1; }

.ee-cta-deep .ee-cta-kicker { color: var(--wp--preset--color--muted-on-dark); }

.ee-cta-deep .ee-cta-sub { color: var(--wp--preset--color--muted-on-dark); }

.ee-cta-deep h2 { color: var(--wp--preset--color--base); }

.ee-cta-deep .wp-block-button__link { background: var(--wp--preset--color--accent); }

/* Responsive for the landing layout — declared after the base rules above
   (the shared 1024/781 blocks sit earlier in the file and would lose the
   same-specificity race against them) */
@media (max-width: 1024px) {
    .ee-svcl-hero { flex-direction: column; gap: 48px; }
    .ee-svcl-usps { width: 100%; max-width: 560px; margin-top: 0; }
    .ee-sect-row { grid-template-columns: 1fr; gap: 24px; margin-bottom: 40px; }
    .ee-sect-row h2 { grid-column: auto; }
    .ee-weigh { grid-template-columns: 1fr; gap: 40px; }
    .ee-svcl-cards { grid-template-columns: 1fr; gap: 0; }
    .ee-svcl-card { padding: 26px 0 18px; }
    .ee-cards-static { grid-template-columns: 1fr; gap: 0; }
    .ee-cards-static .ee-card-cell { padding: 26px 0 18px; }
    .ee-faq-grid { grid-template-columns: 1fr; gap: 32px; }
    /* Stacked phases: per-phase markers stay, the shared line goes */
    .ee-timeline::before { display: none; }
    .ee-timeline-grid { grid-template-columns: 1fr; gap: 0; }
    .ee-tl-phase { border-top: var(--wp--custom--hairline); padding: 24px 0; }
    .ee-tl-phase:first-child { border-top: none; padding-top: 0; }
    .ee-tl-phase::before { margin-bottom: 16px; }
}

@media (max-width: 781px) {
    .ee-svcl-hero { padding: 64px 24px 56px; }
    .ee-person-strip { padding: 28px 24px; }
    .ee-svcl-cases .ee-related-grid .ee-case-media,
    .ee-svcl-cases .ee-related-grid .ee-case-media a,
    .ee-svcl-cases .ee-related-grid .ee-case-media img { height: 240px; }
}

/* Proof stats: 2x2 between tablet and desktop so four stats never cram */
@media (max-width: 1024px) and (min-width: 782px) {
    .ee-proof-stats {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    .ee-proof-stats .ee-proof-stat:nth-child(odd) {
        border-left: none;
        padding-left: 0;
    }
}

/* --- Motion system: page transitions, cards, parallax, count-up ---------- */

/* Card hover choreography: the image zooms inside its frame and the
   read-more arrow steps right. Triggered from the whole card so text hover
   counts too; :focus-within covers keyboard users. Containment lives on
   .ee-case-media (overflow: hidden, declared with the base rule). */
.ee-case-media img {
    transition: transform var(--wp--custom--motion--duration-reveal) var(--wp--custom--motion--easing);
}

.ee-more .ee-accent,
.ee-view-case {
    display: inline-block;
    transition: translate var(--wp--custom--motion--duration-fast) var(--wp--custom--motion--easing);
}

@media (prefers-reduced-motion: no-preference) {
    .wp-block-post:hover .ee-case-media img,
    .wp-block-post:focus-within .ee-case-media img,
    .ee-related-grid > div:hover img,
    .ee-related-grid > div:focus-within img,
    .ee-case-card:hover .ee-case-media img,
    .ee-case-card:focus-within .ee-case-media img {
        transform: scale(1.03);
    }

    .wp-block-post:hover .ee-view-case,
    .wp-block-post:focus-within .ee-view-case,
    .ee-case-card:hover .ee-view-case,
    .ee-case-card:focus-within .ee-view-case,
    .ee-service-cell:hover .ee-more .ee-accent,
    .ee-service-cell:focus-within .ee-more .ee-accent {
        translate: 4px 0;
    }

    /* Landing cards step further, on the design's easing */
    .ee-svcl-card .ee-more .ee-accent {
        transition: translate 0.35s ease;
    }

    .ee-svcl-card:hover .ee-more .ee-accent,
    .ee-svcl-card:focus-within .ee-more .ee-accent {
        translate: 8px 0;
    }

    /* Case cards zoom on the design's slower, gentler curve */
    .ee-case-card .ee-case-media img {
        transition: transform 0.7s cubic-bezier(0.22, 0.61, 0.36, 1);
    }

    .ee-case-card:hover .ee-case-media img,
    .ee-case-card:focus-within .ee-case-media img {
        transform: scale(1.045);
    }
}

/* Scroll-linked parallax on the case key visual. Compositor-only properties
   (scale/translate), scoped behind @supports: Firefox shows the static
   image. The slight over-scale hides the travel at both edges. */
@media (prefers-reduced-motion: no-preference) {
    @supports (animation-timeline: view()) {
        .ee-case-hero img {
            scale: 1.08;
            animation: ee-parallax linear both;
            animation-timeline: view();
        }
    }
}

@keyframes ee-parallax {
    from { translate: 0 -3%; }
    to { translate: 0 3%; }
}

/* Kicker rule draws in from the left once its section reveals */
@media (prefers-reduced-motion: no-preference) {
    html.ee-js .ee-reveal .ee-kicker::before,
    html.ee-js .ee-stagger .ee-kicker::before {
        transform: scaleX(0);
        transform-origin: left center;
        transition: transform var(--wp--custom--motion--duration-reveal) var(--wp--custom--motion--easing) 200ms;
    }

    html.ee-js .ee-reveal.is-revealed .ee-kicker::before,
    html.ee-js .ee-stagger.is-revealed .ee-kicker::before {
        transform: scaleX(1);
    }
}

/* Case closing CTA band (markup rendered by the ee-case-cta filter in
   functions.php so the copy localizes server-side) */
.ee-case-cta {
    background: var(--wp--preset--color--deep);
    text-align: center;
    padding: 80px var(--ee-gutter);
}

.ee-case-cta .ee-cta-kicker {
    color: var(--wp--preset--color--accent-soft);
}

.ee-case-cta h2 {
    color: var(--wp--preset--color--base);
    font-size: var(--wp--preset--font-size--xxxl);
    line-height: 1.08;
    letter-spacing: -0.01em;
    text-wrap: balance;
    margin: 0 auto;
    max-width: 720px;
}

.ee-case-cta .ee-cta-sub {
    color: var(--wp--preset--color--muted-on-dark);
    margin-top: 16px;
}

.ee-case-cta .wp-block-buttons {
    margin-top: 36px;
    justify-content: center;
    display: flex;
}

.ee-case-cta .wp-element-button {
    background: var(--wp--preset--color--accent);
}

@media (max-width: 781px) {
    .ee-case-cta {
        padding: 56px 24px;
    }
}

/* --- Scroll reveal (progressive enhancement) ----------------------------- */
/* Elements are only hidden when JS is running (html.ee-js) AND the visitor
   has no reduced-motion preference. No JS = everything simply visible. */

@media (prefers-reduced-motion: no-preference) {
    html.ee-js .ee-reveal {
        opacity: 0;
        translate: 0 18px;
        transition:
            opacity var(--wp--custom--motion--duration-reveal) var(--wp--custom--motion--easing),
            translate var(--wp--custom--motion--duration-reveal) var(--wp--custom--motion--easing);
    }

    html.ee-js .ee-reveal.is-revealed {
        opacity: 1;
        translate: 0 0;
    }

    /* Slight stagger inside grids/groups of revealed cards */
    html.ee-js .ee-reveal.is-revealed:nth-child(2) { transition-delay: 80ms; }
    html.ee-js .ee-reveal.is-revealed:nth-child(3) { transition-delay: 160ms; }
    html.ee-js .ee-reveal.is-revealed:nth-child(4) { transition-delay: 240ms; }

    /* Staggered container reveal (how-we-work steps): the children of an
       .ee-stagger group appear one after another, reading as a progression.
       Same observer as .ee-reveal (see reveal.js). */
    html.ee-js .ee-stagger > * {
        opacity: 0;
        translate: 0 14px;
        transition:
            opacity var(--wp--custom--motion--duration-reveal) var(--wp--custom--motion--easing),
            translate var(--wp--custom--motion--duration-reveal) var(--wp--custom--motion--easing);
    }

    html.ee-js .ee-stagger.is-revealed > * {
        opacity: 1;
        translate: 0 0;
    }

    html.ee-js .ee-stagger.is-revealed > :nth-child(2) { transition-delay: 140ms; }
    html.ee-js .ee-stagger.is-revealed > :nth-child(3) { transition-delay: 280ms; }
    html.ee-js .ee-stagger.is-revealed > :nth-child(4) { transition-delay: 420ms; }
    html.ee-js .ee-stagger.is-revealed > :nth-child(5) { transition-delay: 560ms; }
    html.ee-js .ee-stagger.is-revealed > :nth-child(6) { transition-delay: 700ms; }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ============================================================
   Homepage - Claude Design polish (2026-07-08)
   Ported from the "Homepage (implemented)" Claude Design file.
   .ee-home-scoped so the /diensten/ overview keeps its own look.
   The canvas's parallel full-bleed gutter model is deliberately NOT
   ported: the theme's --ee-gutter already centers bands on 1360px and
   keeps them aligned with the header; the canvas rules would narrow the
   homepage ~96px and misalign it against the header.
   ============================================================ */

/* Services band on deep green; the whole cell is one clickable link */
.ee-home .ee-section.ee-services { background: var(--wp--preset--color--deep); }
.ee-home .ee-services .ee-service-cell { border-right-color: #3d5a50; cursor: pointer; position: relative; transition: background-color .35s ease; }
.ee-home .ee-services .ee-service-cell::after { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--wp--preset--color--accent-soft); transform: scaleX(0); transform-origin: left; transition: transform .4s cubic-bezier(.22,.61,.36,1); }
.ee-home .ee-services .ee-service-cell:hover::after { transform: scaleX(1); }
.ee-home .ee-services .ee-service-cell:hover { background: #335249; }
.ee-home .ee-services .ee-service-cell h2 { color: var(--wp--preset--color--base); transition: color .35s ease; }
.ee-home .ee-services .ee-service-cell:hover h2 { color: var(--wp--preset--color--accent-soft); }
.ee-home .ee-services .ee-service-cell p.has-text-muted-color { color: var(--wp--preset--color--muted-on-dark) !important; }
.ee-home .ee-services .ee-more a { color: var(--wp--preset--color--base) !important; border-bottom: 1px solid #3d5a50; padding-bottom: 2px; transition: border-color .35s ease; }
.ee-home .ee-services .ee-service-cell:hover .ee-more a { border-bottom-color: var(--wp--preset--color--accent-soft); }
.ee-home .ee-services .ee-more .ee-accent { color: var(--wp--preset--color--accent-soft); display: inline-block; transition: transform .35s ease; }
.ee-home .ee-services .ee-service-cell:hover .ee-more .ee-accent { transform: translateX(6px); }
/* Stretched link: the "Meer" anchor covers the whole cell (the cell's
   own ::after is the hover top-line, so the stretch lives on the link) */
.ee-home .ee-services .ee-more a::after { content: ""; position: absolute; inset: 0; }

/* How we work: quieter typography with an accent square marker */
.ee-home .ee-section.ee-how { padding-top: 72px; padding-bottom: 72px; }
.ee-home .ee-how .ee-steps .ee-step { padding: 20px 0; }
.ee-home .ee-how .ee-steps .ee-step:first-child { padding-top: 6px; }
.ee-home .ee-how .ee-step-title { font-size: 23px; margin: 0; display: flex; align-items: baseline; gap: 16px; }
.ee-home .ee-how .ee-step-title::before { content: ""; flex: none; width: 10px; height: 10px; background: var(--wp--preset--color--accent); transform: translateY(-1px); }
.ee-home .ee-how .ee-step p { margin: 8px 0 0 26px; max-width: 560px; font-size: 15px; line-height: 1.6; color: var(--wp--preset--color--text-secondary) !important; }

/* Testimonial band: quote left, 2x2 stats right (matches design) */
.ee-home .ee-section.ee-proof { padding-top: 36px; padding-bottom: 36px; }
.ee-home .ee-proof { display: grid; grid-template-columns: 1fr 1fr; align-items: center; }
.ee-home .ee-proof .ee-proof-grid { grid-template-columns: 1fr; }
.ee-home .ee-proof .ee-proof-grid + .ee-proof-stats { margin-top: 0; }
.ee-home .ee-proof .ee-proof-stats { grid-template-columns: 1fr 1fr; row-gap: 30px; }
.ee-home .ee-proof .ee-quote { font-size: 26px; margin: 0; }
.ee-home .ee-proof .ee-proof-number { font-size: 36px; margin: 0; }
.ee-home .ee-proof .ee-stat-label { margin: 6px 0 0; }
.ee-home .ee-proof .ee-proof-stat { padding: 0 28px; }

/* Newsletter: top-aligned columns + brand-green submit button */
.ee-home .ee-newsletter .ee-newsletter-inner { align-items: start; }
.ee-home .ee-newsletter h2 { margin-top: 0; }
.ee-home .ee-newsletter .ee-newsletter-inner > .wp-block-group { margin-top: 6px; }
.ee-home .ee-newsletter .wp-block-button__link { background: var(--wp--preset--color--deep); color: var(--wp--preset--color--base); }
.ee-home .ee-newsletter .wp-block-button__link:hover { background: var(--wp--preset--color--accent); }
.ee-home .ee-newsletter .ee-form-privacy { font-size: 15px; line-height: 24px; color: var(--wp--preset--color--text-secondary); margin-top: 2px; }
.ee-home .ee-newsletter .ee-form-privacy a { color: inherit; }

/* Featured work: bordered lead card + always-on overlay case links.
   The canvas styled its <image-slot> placeholder; real WP featured
   images need the fill rules below to cover the media box. */
.ee-work .ee-media { position: relative; overflow: hidden; }
.ee-work .ee-media .wp-block-post-featured-image { position: absolute; inset: 0; margin: 0; }
.ee-work .ee-media .wp-block-post-featured-image a,
.ee-work .ee-media .wp-block-post-featured-image img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ee-work .ee-open { position: absolute; left: 16px; bottom: 16px; z-index: 2; overflow: hidden; display: inline-flex; align-items: center; gap: 8px; background: var(--wp--preset--color--deep); color: var(--wp--preset--color--base); font-size: 13px; padding: 10px 18px; text-decoration: none; transition: color var(--wp--custom--motion--duration-fast) var(--wp--custom--motion--easing); }
/* Site-standard button hover: a cream sweep wipes in from the left and the
   label flips to deep green (matches .wp-block-button__link) */
.ee-work .ee-open::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--wp--preset--color--base); transform: scaleX(0); transform-origin: left; transition: transform 0.45s cubic-bezier(0.22, 0.61, 0.36, 1); }
.ee-work .ee-open:hover, .ee-work .ee-open:focus-visible { color: var(--wp--preset--color--deep); }
.ee-work .ee-open:hover::before, .ee-work .ee-open:focus-visible::before { transform: scaleX(1); }
.ee-work .ee-lead2 { display: grid; grid-template-columns: 1fr 1fr; border: 1px solid var(--wp--preset--color--border); background: var(--wp--preset--color--surface); margin-bottom: 28px; }
.ee-work .ee-lead2 .wp-block-query,
.ee-work .ee-lead2 .wp-block-post-template,
.ee-work .ee-lead2 .wp-block-post { margin: 0; height: 100%; }
.ee-work .ee-lead2 .ee-media { min-height: 480px; }
.ee-work .ee-cases-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
.ee-work .ee-cases-2 .ee-media { height: 360px; border: 1px solid var(--wp--preset--color--border); }
.ee-work .ee-client { font-size: 12.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--wp--preset--color--text-muted); margin: 28px 0 0; }
.ee-work .ee-cases-2 h3 { margin: 16px 0 0; }
.ee-work .ee-cases-2 h3 a { text-decoration: none; color: inherit; }
.ee-work .ee-excerpt { margin: 14px 0 0; }
/* Restore the hover-zoom on the case image (renamed from .ee-case-media) */
@media (prefers-reduced-motion: no-preference) {
    .ee-work .ee-media img { transition: transform 0.7s cubic-bezier(0.22, 0.61, 0.36, 1); }
    .ee-work .ee-lead2:hover .ee-media img,
    .ee-work .ee-lead2:focus-within .ee-media img,
    .ee-work .ee-case-card:hover .ee-media img,
    .ee-work .ee-case-card:focus-within .ee-media img { transform: scale(1.045); }
}

@media (max-width: 781px) {
    .ee-work .ee-cases-2,
    .ee-work .ee-lead2 { grid-template-columns: 1fr; }
    .ee-work .ee-lead2 .ee-media { min-height: 300px; }
}

/* Footer v2: multi-column sitemap (grid centered on the shared gutter) */
.ee-footer-v2 .ee-f-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 48px; align-items: start; padding: 64px var(--ee-gutter); }
.ee-footer-v2 .ee-f-legal { margin: 16px 0 0; line-height: 1.8; }
.ee-footer-v2 a { text-decoration: none; color: var(--wp--preset--color--text-secondary); transition: color var(--wp--custom--motion--duration-fast) var(--wp--custom--motion--easing); }
.ee-footer-v2 a:hover, .ee-footer-v2 a:focus-visible { color: var(--wp--preset--color--accent); }
.ee-footer-v2 .ee-f-label { font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--wp--preset--color--text-muted); margin: 0 0 18px; }
.ee-footer-v2 .ee-f-col { display: flex; flex-direction: column; gap: 12px; font-size: var(--wp--preset--font-size--sm); }
.ee-footer-v2 .ee-f-contact { color: var(--wp--preset--color--text-secondary); }
.ee-footer-v2 .ee-f-social { display: flex; gap: 10px; margin-top: 28px; }
.ee-footer-v2 .ee-f-social a { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border: 1px solid var(--wp--preset--color--border); color: var(--wp--preset--color--text-secondary); }
.ee-footer-v2 .ee-f-social a:hover, .ee-footer-v2 .ee-f-social a:focus-visible { background: var(--wp--preset--color--deep); border-color: var(--wp--preset--color--deep); color: var(--wp--preset--color--base); }
.ee-footer-v2 .ee-f-social svg { width: 16px; height: 16px; display: block; fill: currentcolor; }

@media (max-width: 1024px) { .ee-footer-v2 .ee-f-grid { grid-template-columns: 1fr 1fr; row-gap: 48px; } }

@media (max-width: 640px) { .ee-footer-v2 .ee-f-grid { grid-template-columns: 1fr; } }