/* =========================
   Layout — Heroes, Sections, Prose
   ========================= */

/* ---------- Hero Header / Page Header ---------- */
.welcome-page-header,
.clients-page-header,
.services-page-header,
.contact-page-header,
.about-page-header,
.initiatives-page-header,
.sectors-page-header,
.case-page-header {
    position: relative;
    background-image: url("/media/coding-computer-data-depth-of-field-577585-small.jpg");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    min-height: clamp(320px, 45vh, 480px);
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: var(--color-text-light);
    padding: var(--space-4);
    padding-top: var(--space-10);
    overflow: hidden;
}

.services-page-content {
    padding: var(--space-4);
}

.welcome-page-header {
    background-image: url("/media/werk_office_01.jpeg");
    min-height: clamp(400px, 60vh, 640px);
}

.about-page-header {
    background-image: url("/media/guy_office_01.jpeg");
}

.contact-page-header {
    background-image: url("/media/werk_tafel.jpeg");
}

.initiatives-page-header {
    background-image: url("/media/werk_zon.jpeg");
}

.services-page-header {
    background-image: url("/media/tbd_services_page_hero.jpg");
}

.sectors-page-header {
    background-image: url("/media/tbd_sectors_page_hero.jpg");
}

.clients-page-header,
.case-page-header {
    background-image: url("/media/tbd_home_page_hero.jpg");
}

/* ---------- Gradient overlay — purple tint ---------- */
.welcome-page-header::before,
.clients-page-header::before,
.services-page-header::before,
.contact-page-header::before,
.about-page-header::before,
.initiatives-page-header::before,
.sectors-page-header::before,
.case-page-header::before {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--gradient-hero);
    z-index: 0;
}

/* Homepage hero — animated gradient */
.welcome-page-header::before {
    background: var(--gradient-hero-animated);
    background-size: 200% 200%;
    animation: gradientShift 8s ease infinite;
}

/* Hero noise texture overlay */
.welcome-page-header::after,
.clients-page-header::after,
.services-page-header::after,
.contact-page-header::after,
.about-page-header::after,
.initiatives-page-header::after,
.sectors-page-header::after,
.case-page-header::after {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--texture-noise);
    background-size: 200px 200px;
    mix-blend-mode: overlay;
    opacity: 0.4;
    pointer-events: none;
    z-index: 0;
}

/* Homepage hero radial accents */
.welcome-page-header .hero-orbs::before {
    content: "";
    position: absolute;
    bottom: -10%;
    left: -5%;
    width: 50%;
    height: 60%;
    background: radial-gradient(ellipse, rgba(252, 177, 92, 0.1) 0%, transparent 70%);
    pointer-events: none;
}

.welcome-page-header .hero-orbs::after {
    content: "";
    position: absolute;
    top: -10%;
    right: -5%;
    width: 40%;
    height: 50%;
    background: radial-gradient(ellipse, rgba(6, 182, 212, 0.06) 0%, transparent 70%);
    pointer-events: none;
}

/* Content over overlay */
.welcome-page-header .col,
.clients-page-header .col,
.services-page-header .col,
.contact-page-header .col,
.about-page-header .col,
.initiatives-page-header .col,
.sectors-page-header .col,
.case-page-header .col {
    position: relative;
    z-index: 1;
}

/* ---------- Hero Text ---------- */
.header-text {
    font-size: clamp(var(--text-3xl), 5vw, var(--text-6xl));
    font-weight: 700;
    font-family: var(--font-heading);
    line-height: var(--leading-tight);
    letter-spacing: -0.03em;
    margin-bottom: var(--space-2);
    padding-top: 0;
    color: var(--color-text-light);
    text-shadow: var(--shadow-text);
}

/* Homepage hero — gradient text */
@supports (-webkit-background-clip: text) or (background-clip: text) {
    .welcome-page-header .header-text {
        background: linear-gradient(135deg, var(--color-text-light) 30%, var(--color-primary) 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
        text-shadow: none;
    }
}

/* Payoff text */
.page-payoff {
    font-size: clamp(var(--text-lg), 2.5vw, var(--text-2xl));
    line-height: 1.4;
    color: var(--color-text-light-soft);
    padding-bottom: var(--space-3);
    text-shadow: var(--shadow-text-sm);
    max-width: 640px;
    margin-inline: auto;
}

/* Hero CTA button override */
.btn-header-ca {
    padding: 0.875rem 2.5rem;
    font-size: var(--text-lg);
    border-radius: var(--radius-xl);
}

/* ---------- Hero gradient orbs ---------- */
.hero-orbs {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    z-index: 0;
}

.hero-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
}

.hero-orb-1 {
    width: 300px;
    height: 300px;
    background: var(--color-primary);
    opacity: 0.08;
    top: 10%;
    left: -5%;
}

.hero-orb-2 {
    width: 200px;
    height: 200px;
    background: var(--color-accent);
    opacity: 0.06;
    bottom: 15%;
    right: -3%;
}

.hero-orb-3 {
    width: 250px;
    height: 250px;
    background: var(--color-secondary);
    opacity: 0.05;
    top: 50%;
    left: 40%;
}

/* ---------- Scroll indicator ---------- */
.scroll-indicator {
    position: absolute;
    bottom: var(--space-3);
    left: 50%;
    transform: translateX(-50%);
    z-index: 1;
    transition: opacity var(--transition-base);
}

.scroll-indicator span {
    display: block;
    width: 24px;
    height: 24px;
    border-right: 2px solid var(--color-text-light);
    border-bottom: 2px solid var(--color-text-light);
    opacity: 0.6;
}

/* ---------- Hero microcopy ---------- */
.hero-microcopy {
    font-size: var(--text-sm);
    color: var(--color-text-light-muted);
    margin-top: var(--space-2);
    max-width: 420px;
    margin-inline: auto;
    margin-bottom: 0;
}

/* ---------- Responsive hero ---------- */
@media (max-width: 768px) {
    .header-text {
        font-size: clamp(var(--text-2xl), 8vw, var(--text-4xl));
    }

    .page-payoff {
        font-size: clamp(var(--text-base), 4vw, var(--text-lg));
    }

    .section-intro {
        margin-bottom: var(--space-5);
    }

    .welcome-page-header {
        min-height: clamp(360px, 55vh, 520px);
    }

    /* Ensure WCAG 44px minimum touch targets on mobile */
    .btn-tbd-secondary,
    .custom-primary-btn,
    .card-footer .btn {
        min-height: 44px;
        padding: 0.75rem 1.5rem;
    }
}

/* ---------- Section spacing ---------- */
.custom-container {
    padding: var(--section-padding-y) var(--space-3);
}

@media (max-width: 575.98px) {
    .custom-container {
        padding: var(--space-6) var(--space-2);
    }
}

/* Layout container */
.container {
    max-width: 1200px;
    margin-inline: auto;
    padding-inline: var(--space-3);
}

/* Prose utility for readable content width — 72ch ≈ 75 chars, WCAG best practice */
.prose {
    max-width: 72ch;
    padding-inline: var(--space-3);
}

.prose p,
.prose li {
    line-height: var(--leading-relaxed);
}

.prose h2 {
    margin-top: var(--space-5);
    margin-bottom: var(--space-2);
}

.prose h3 {
    margin-top: var(--space-5);
    margin-bottom: var(--space-2);
}

/* Section intro padding */
.section-intro {
    margin-bottom: var(--space-4);
}

.service-intro,
.initiatives-intro {
    padding-inline: var(--space-3);
}

/* ---------- Section titles ---------- */
.section-intro h2,
.service-intro h2,
.initiatives-intro h2 {
    font-size: clamp(var(--text-2xl), 3vw, var(--text-3xl));
    font-weight: 600;
    font-family: var(--font-heading);
    line-height: var(--leading-tight);
    letter-spacing: -0.02em;
    margin-bottom: var(--space-2);
    color: var(--color-secondary);
}

/* Accent under title — rainbow gradient */
.section-intro h2::after,
.service-intro h2::after,
.initiatives-intro h2::after {
    content: "";
    display: block;
    width: 4rem;
    height: 3px;
    margin-top: 0.75rem;
    background: var(--gradient-rainbow-accent);
    border-radius: 2px;
}

/* Center accent line when section intro is centered */
.section-intro.text-center h2::after,
.service-intro.text-center h2::after,
.initiatives-intro.text-center h2::after {
    margin-inline: auto;
}

/* Section text */
.section-intro p,
.service-intro p,
.initiatives-intro p {
    font-size: var(--text-base);
    line-height: var(--leading-normal);
    color: var(--color-text-muted);
}

/* Subheadings */
.service-intro h3,
.initiatives-intro h3 {
    color: var(--color-primary);
}

/* ---------- Service page layout ---------- */
.service-content {
    padding-top: var(--section-padding-y);
    padding-bottom: var(--space-4);
}

.service-option-col {
    padding: var(--space-4) var(--space-3);
}

/*
 * Detail page CTA banner.
 *
 * Was: full-width dark slab over a glassmorphism photo with a heavy
 * navy overlay. The combination read as a muddy gray bar that fought
 * the surrounding white content and felt like a dead-zone before the
 * footer (Guy's feedback 2026-05-06).
 *
 * Now: section is transparent (lets the page bg flow through), and
 * the CTA is contained in a centered card with a soft surface, a thin
 * brand-gradient accent across the top, and a hover lift that matches
 * the rest of the site's micro-interactions. Reads as intentional
 * call-to-action rather than a section break.
 */
.service-meta {
    position: relative;
    text-align: center;
    padding: var(--section-padding-y) var(--space-3);
    background: transparent;
    color: var(--color-text);
}

.service-meta .meta-container {
    max-width: 640px;
    margin: 0 auto;
    padding: var(--space-8) var(--space-6);
    background: #ffffff;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    position: relative;
    overflow: hidden;
    transition: transform var(--transition-base), box-shadow var(--transition-base);
}

.service-meta .meta-container::before {
    /* Thin amber-to-orange accent so the card is visually anchored to the
       brand. 3px is enough to read at a glance without competing with the
       button below. */
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--gradient-primary);
}

.service-meta .meta-container:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
}

.service-meta .meta-title {
    font-family: var(--font-heading);
    font-size: var(--text-2xl);
    color: var(--color-text);
    margin-bottom: var(--space-5);
}

@media (prefers-reduced-motion: reduce) {
    .service-meta .meta-container,
    .service-meta .meta-container:hover {
        transform: none;
        transition: none;
    }
}

/* List styling */
.no-marker {
    list-style-type: none;
}

/* ============================================================
   SHINE-1 — Homepage hero rework
   ============================================================
   Aesthetic: refined craft + editorial confidence.
   Drops the photo background (it competed with the text and was
   visually generic). Lean into the brand palette directly:
   deep navy bg, two soft brand-color radial glows, a single
   amber→cyan accent stripe along the top, asymmetric left-aligned
   layout with a top-right "developer stamp" of monospace metadata.
   The H1 is the brand wordmark — given a confident type scale
   so the company name carries weight.
   ============================================================ */

/* The legacy heroFadeIn was disabled here in shine-1; shine-7
   replaces it with a scoped entrance choreography in animations.css
   (heroWordmarkIn, heroFadeUp, heroStampSlideIn). Only the legacy
   .btn (which was generic) and .scroll-indicator stay null here so
   they don't double-animate. */
.welcome-page-header.hero-animate .btn:not(.btn-header-ca),
.welcome-page-header.hero-animate .scroll-indicator {
    animation: none;
}

.welcome-page-header {
    /* Override the photo background — embrace brand colour */
    background-image: none;
    background-color: var(--color-text);
    background:
        radial-gradient(ellipse 900px 560px at 12% 110%,
            rgba(252, 177, 92, 0.18) 0%, transparent 65%),
        radial-gradient(ellipse 700px 420px at 92% -8%,
            rgba(6, 182, 212, 0.10) 0%, transparent 55%),
        linear-gradient(180deg, #1a1a2e 0%, #0f0f20 100%);
    min-height: clamp(560px, 80vh, 760px);
    text-align: left;
    align-items: stretch;
    justify-content: flex-start;
    padding: var(--space-12) 0 var(--space-8);
    overflow: hidden;
}

/* Drop the legacy purple gradient overlay — our background already
   carries brand colour, no need for a second wash on top. */
.welcome-page-header::before {
    background: transparent;
    animation: none;
}

/* Drop noise — the gradient mesh is enough atmosphere. */
.welcome-page-header::after {
    opacity: 0;
}

/* The legacy hero orbs + decorative stripe are not used in this layout
   — the gradient mesh on the hero background carries the brand atmosphere.
   Hiding the existing decorative containers without touching the template. */
.welcome-page-header .hero-orb,
.welcome-page-header .hero-orbs::before,
.welcome-page-header .hero-orbs::after,
.welcome-page-header .hero-orbs {
    display: none;
}

/* Inner col — left-aligned, max-width column, generous padding */
.welcome-page-header .col {
    flex: 0 0 100%;
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 var(--space-6);
    text-align: left;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* H1 — confident wordmark scale. The brand name IS the headline.
   Two-tone: "ten Bruggencate" in soft white, the word that breaks
   the visual rhythm via the spans we add inline. The whole headline
   is given weight via type scale + tight tracking, not gradient
   tricks (which proved fragile across rendering modes). */
.welcome-page-header .header-text {
    font-size: clamp(48px, 9vw, 132px);
    font-weight: 700;
    line-height: 0.92;
    letter-spacing: -0.045em;
    margin: 0 0 var(--space-4) 0;
    max-width: 16ch;
    color: var(--color-text-light);
    background: none;
    -webkit-background-clip: initial;
    background-clip: initial;
    -webkit-text-fill-color: initial;
    text-shadow: none;
}
/* Optional accent on the last word of the wordmark — picked up via a
   span we inject in the template if we want to highlight a single
   word. Keep neutral by default. */
.welcome-page-header .header-text .accent {
    color: var(--color-primary);
}

/* Payoff — bigger, confident, single line on desktop */
.welcome-page-header .page-payoff {
    font-size: clamp(20px, 2.4vw, 32px);
    line-height: 1.3;
    color: var(--color-text-light);
    max-width: 36ch;
    margin: 0 0 var(--space-8) 0;
    padding: 0;
    text-shadow: none;
    font-weight: 500;
    letter-spacing: -0.01em;
}

/* CTA cluster — left-aligned, the button has weight, microcopy follows */
.welcome-page-header .btn-header-ca {
    margin: 0;
    align-self: flex-start;
}
.welcome-page-header .hero-microcopy {
    margin: var(--space-2) 0 0 0;
    text-align: left;
    color: var(--color-text-light-dim);
    max-width: 36ch;
}

/* Availability indicator — promoted to a top badge above the H1. The
   green dot + text now reads as a brand signal ("active practice")
   rather than a footnote. */
.welcome-page-header .availability-indicator {
    margin: 0 0 var(--space-6) 0;
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: 6px 14px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 999px;
    color: var(--color-text-light);
    font-size: 0.875rem;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    width: fit-content;
    align-self: flex-start;
}

/* Hero stamp — top-right developer signature in monospace.
   Three short lines, prefixed with an amber chevron. Signals
   "developer who cares about details" without being cringe.
   `top` clears the fixed navbar (~80px tall) plus breathing room.
   Hidden on mobile to keep the small-screen layout focused. */
.hero-stamp {
    position: absolute;
    top: 102px;
    right: var(--space-6);
    z-index: 2;
    text-align: right;
    font-family: ui-monospace, 'SF Mono', 'Menlo', monospace;
    font-size: 0.75rem;
    color: var(--color-text-light-dim);
    line-height: 1.7;
    letter-spacing: 0.02em;
    pointer-events: none;
    user-select: none;
}
.hero-stamp .stamp-line {
    display: block;
}
.hero-stamp .stamp-marker {
    color: var(--color-primary);
    margin-right: 0.4em;
}

/* Scroll indicator — quieter so the eye lands on the H1 */
.welcome-page-header .scroll-indicator {
    bottom: var(--space-3);
    opacity: 0.35;
}

/* Mobile — return to centered, drop the stamp, tighter spacing */
@media (max-width: 768px) {
    .welcome-page-header {
        padding: var(--space-10) 0 var(--space-6);
        min-height: clamp(480px, 70vh, 620px);
        text-align: center;
    }
    .welcome-page-header .col {
        text-align: center;
        align-items: center;
    }
    .welcome-page-header .header-text {
        font-size: clamp(40px, 11vw, 80px);
        max-width: 100%;
        margin-inline: auto;
    }
    .welcome-page-header .page-payoff {
        max-width: 100%;
        margin-inline: auto;
    }
    .welcome-page-header .availability-indicator,
    .welcome-page-header .btn-header-ca {
        align-self: center;
        margin-inline: auto;
    }
    .welcome-page-header .hero-microcopy {
        text-align: center;
        margin-inline: auto;
    }
    .hero-stamp {
        display: none;
    }
}

/* ============================================================
   SHINE-2 — Type rhythm + confident scale
   ============================================================
   Bumps the type scale across the rest of the site so detail-page
   heroes, section intros, lead paragraphs, and prose all carry the
   same editorial confidence the new homepage hero established. The
   homepage hero has its own .welcome-page-header rule that wins via
   specificity, so this block lifts everything else without touching
   the homepage.
   ============================================================ */

/* Detail-page hero H1 — bigger, more presence. */
.header-text {
    font-size: clamp(36px, 6vw, 72px);
    line-height: 1.08;
    letter-spacing: -0.025em;
    text-wrap: balance;
}

/* Detail-page payoff (the subtitle below the H1). Slight bump + a
   readability-friendly max-width so the line doesn't run too wide. */
.page-payoff {
    font-size: clamp(18px, 2vw, 24px);
    line-height: 1.45;
    max-width: 56ch;
    margin-inline: auto;
}

/* Section intros — confident scale for h2, more breathing room.
   The rainbow accent stripe under the heading stays as-is. */
.section-intro h2,
.service-intro h2,
.initiatives-intro h2 {
    font-size: clamp(28px, 4vw, 48px);
    font-weight: 700;
    letter-spacing: -0.025em;
    line-height: 1.1;
}
.section-intro {
    margin-bottom: var(--space-6);
}
.section-intro p,
.service-intro p,
.initiatives-intro p {
    font-size: clamp(16px, 1.6vw, 19px);
    line-height: 1.65;
    margin-top: var(--space-2);
    max-width: 60ch;
    color: var(--color-text-muted);
}
.section-intro.text-center p,
.service-intro.text-center p,
.initiatives-intro.text-center p {
    margin-inline: auto;
}

/* Lead-paragraph treatment — gives the first descriptive paragraph
   on detail pages and the homepage entity-intro editorial weight.
   Bigger, lighter, with comfortable measure. */
.entity-intro,
.lead {
    font-size: clamp(20px, 2vw, 26px);
    line-height: 1.5;
    font-weight: 400;
    color: var(--color-text);
    max-width: 60ch;
    margin-inline: auto;
}

/* Prose H2 — first-class body section break (service / sector /
   initiative / client detail bodies all use .prose). */
.prose h2 {
    font-size: clamp(24px, 2.6vw, 34px);
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.15;
    margin-top: var(--space-7);
    margin-bottom: var(--space-3);
}

/* Prose H3 */
.prose h3 {
    font-size: clamp(18px, 1.6vw, 22px);
    font-weight: 600;
    letter-spacing: -0.01em;
    margin-top: var(--space-5);
    margin-bottom: var(--space-2);
}

/* Prose body — looser line-height for long-form readability. */
.prose p,
.prose li {
    line-height: 1.7;
}

/* First paragraph in prose: subtle lead treatment so the article
   opens with editorial confidence without disrupting the rhythm. */
.prose > p:first-of-type {
    font-size: clamp(17px, 1.3vw, 19px);
    color: var(--color-text);
}

/* ============================================================
   SHINE-10 — About page hero brand treatment
   ============================================================
   Extends the shine-1 brand-led hero pattern to the About page so
   the introduction to Guy + the practice opens with the same
   editorial confidence as the homepage. The previous photo
   background (guy_office_01.jpeg, generic desk photo) competed
   with the H1 + payoff and washed them out.
   ============================================================ */

.about-page-header {
    background-image: none;
    background-color: var(--color-text);
    background:
        radial-gradient(ellipse 820px 480px at 12% 110%,
            rgba(252, 177, 92, 0.16) 0%, transparent 60%),
        radial-gradient(ellipse 620px 360px at 92% -10%,
            rgba(6, 182, 212, 0.08) 0%, transparent 50%),
        linear-gradient(180deg, #1a1a2e 0%, #0f0f20 100%);
    min-height: clamp(380px, 55vh, 520px);
    padding: var(--space-12) 0 var(--space-8);
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.about-page-header::before {
    background: transparent;
    animation: none;
}
.about-page-header::after {
    opacity: 0;
}

.about-page-header .col {
    text-align: center;
    max-width: 900px;
    margin: 0 auto;
    padding: 0 var(--space-6);
}

.about-page-header .header-text {
    font-size: clamp(48px, 8vw, 104px);
    font-weight: 700;
    line-height: 0.96;
    letter-spacing: -0.04em;
    color: var(--color-text-light);
    text-shadow: none;
    margin: 0 0 var(--space-3) 0;
    background: none;
    -webkit-background-clip: initial;
    background-clip: initial;
    -webkit-text-fill-color: initial;
}

.about-page-header .page-payoff {
    font-size: clamp(18px, 2.2vw, 26px);
    line-height: 1.45;
    color: var(--color-text-light-soft);
    max-width: 56ch;
    margin-inline: auto;
    text-shadow: none;
}

/* Same hero-animate kill as shine-1: the legacy heroFadeIn was tuned
   for the old layout and leaves text rendered at low opacity in some
   snapshot tools. About page doesn't need a coordinated entrance. */
.about-page-header.hero-animate .header-text,
.about-page-header.hero-animate .page-payoff {
    animation: none;
}

/* ============================================================
   SHINE-4 — Section transitions + spacing rhythm
   ============================================================
   Bumps the breathing room between major sections so the editorial
   hero+type rhythm from shine-1/2 has room to land. Also gives
   section anchors enough scroll-margin to clear the fixed navbar
   when in-page links are followed.
   ============================================================ */

/* More generous section padding on desktop. The mobile override
   below keeps things tight on small screens (existing rule at line
   289 sets a smaller .custom-container padding for <576px). */
:root {
    --section-padding-y: var(--space-10); /* 80px (was 64px) */
}

/* Anchor scroll offset so #anchor jumps clear the fixed navbar.
   Affects every section that has an id (services, clients,
   testimonials, advantage, werkwijze, faq, etc.). */
section[id],
article[id] {
    scroll-margin-top: 96px;
}

/* Extra breathing room between adjacent same-class sections. The
   visual rhythm now reads as "section · pause · section" rather
   than the previous "block on block". */
.custom-container + .custom-container,
section + section {
    padding-top: calc(var(--section-padding-y) + var(--space-2));
}

/* Tighten up on mobile where 96px of section padding is too much. */
@media (max-width: 768px) {
    :root {
        --section-padding-y: var(--space-8); /* 64px on mobile */
    }
    section[id],
    article[id] {
        scroll-margin-top: 72px;
    }
    .custom-container + .custom-container,
    section + section {
        padding-top: var(--section-padding-y);
    }
}