/*
 * GoToMarket — Main stylesheet
 * Global utilities, component overrides and custom block styles.
 * Design tokens come from theme.json via CSS custom properties.
 */

/* =========================================================
   TOKENS (mirrored from theme.json for use in plain CSS)
   ========================================================= */
:root {
    /* ---- Layout tokens ---- */
    --gtm-width-wide:     1180px;
    --gtm-width-standard: 1040px;
    --gtm-width-reading:  760px;
    --gtm-page-padding:   clamp(1.5rem, 5vw, 4rem);  /* = clamp(24px, 5vw, 64px) */

    /* ---- Brand colours ---- */
    --gtm-teal:        #0E2D2C;
    --gtm-teal-mid:    #1A3A39;
    --gtm-sand:        #F3EDE2;
    --gtm-sand-soft:   #EAE2D2;
    --gtm-gold:        #D4A447;
    --gtm-gold-hover:  #B8902E;
    --gtm-gold-deep:   #9C8E7A;
    --gtm-graphite:    #2A2A2A;
    --gtm-ink-muted:   #4A5E5D;
    --gtm-ink-subtle:  #7A8C8B;
    --gtm-off-white:   #F9F5EE;
    --gtm-white:       #FFFFFF;
    --gtm-faint:       rgba(255,255,255,0.1);

    /* ---- Radii / shadows / transitions ---- */
    /* Canonical tracking tokens (design system colors_and_type.css) */
    --gtm-tracking-eyebrow: 0.06em;
    --gtm-tracking-wide:    0.12em;
    --gtm-tracking-tight:  -0.02em;

    --gtm-radius-sm:   4px;
    --gtm-radius-md:   6px;   /* canonical default card radius */
    --gtm-radius-lg:   12px;  /* rare — hero panels only */
    --gtm-radius-pill: 100px;
    --gtm-transition:  0.2s ease;
    --gtm-shadow-sm:   0 2px 8px rgba(14,45,44,0.08);
    --gtm-shadow-md:   0 8px 32px rgba(14,45,44,0.12);
    --gtm-shadow-lg:   0 24px 64px rgba(14,45,44,0.18);
}

/* =========================================================
   BASE
   ========================================================= */
body {
    font-family: 'Satoshi', 'Inter', system-ui, -apple-system, sans-serif;
    font-size: clamp(1rem, 1.5vw, 1.0625rem);
    line-height: 1.72;
    color: var(--gtm-graphite);
    background: var(--gtm-sand);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
    line-height: 1.08;
    letter-spacing: -0.025em;
    font-weight: 600;
    color: inherit;
}

h1 { font-size: clamp(2.5rem, 6vw, 5.5rem); font-weight: 800; letter-spacing: -0.04em; }
h2 { font-size: clamp(1.75rem, 3.5vw, 2.75rem); }
h3 { font-size: clamp(1.25rem, 2vw, 1.5rem); }

p { margin: 0 0 1.25em; }
p:last-child { margin-bottom: 0; }

a {
    color: var(--gtm-teal);
    text-decoration: underline;
    text-decoration-color: transparent;
    transition: color var(--gtm-transition), text-decoration-color var(--gtm-transition);
}
a:hover {
    color: var(--gtm-gold-deep);
    text-decoration-color: currentColor;
}

img, video, svg { max-width: 100%; height: auto; display: block; }

/* =========================================================
   LAYOUT HELPERS
   ========================================================= */
/*
 * Container classes — centering + max-width ONLY.
 * padding-inline is intentionally absent: the WP root padding
 * (useRootPaddingAwareAlignments) already provides the page gutter
 * for all flow/constrained layout contexts.
 *
 * Exceptions that need explicit padding:
 *   • .gtm-hero__inner  (inside alignfull blocks that break out of root padding)
 *   • header/footer     (standalone full-width sections, see rule below)
 */
.gtm-container {
    max-width: var(--gtm-width-wide);
    margin-inline: auto;
}

.gtm-container--narrow {
    max-width: var(--gtm-width-standard);
    margin-inline: auto;
}

/* Reading-width container (articles, direct-answer panels, resource page) */
.gtm-container-reading {
    max-width: var(--gtm-width-reading);
    margin-inline: auto;
}

/* Wide container alias */
.gtm-container-wide {
    max-width: var(--gtm-width-wide);
    margin-inline: auto;
}

/* Header and footer are full-width standalone sections outside WP constrained flow */
.site-header .gtm-container,
.site-footer .gtm-container {
    padding-inline: var(--gtm-page-padding);
}

.gtm-section {
    padding-block: clamp(4rem, 8vw, 9rem);
}

.gtm-section--sm {
    padding-block: clamp(2.5rem, 4vw, 4rem);
}

/* Dark section utility */
.gtm-dark {
    background: var(--gtm-teal);
    color: var(--gtm-sand);
}
.gtm-dark h1, .gtm-dark h2, .gtm-dark h3 { color: var(--gtm-off-white); }
.gtm-dark a { color: var(--gtm-gold); }
.gtm-dark a:hover { color: var(--gtm-gold-hover); }

/* Light/sand section */
.gtm-light {
    background: var(--gtm-sand);
    color: var(--gtm-graphite);
}

/* =========================================================
   LABEL / EYEBROW
   ========================================================= */
/*
 * ALIGNMENT MODEL:
 * display: flex (block-level) ensures WordPress constrained layout
 * (is-layout-constrained) correctly constrains the eyebrow to the
 * content column — same as H1 and paragraphs.
 *
 * display: inline-flex (previous) was inline-level and bypassed WP's
 * layout constraints, causing the pill to sit at the full-width
 * container edge instead of aligning with the heading it introduces.
 *
 * Left-aligned default:  margin-inline-start: 0; margin-inline-end: auto
 *   → pill sticks to left edge of its content column
 * Centered variant:      .gtm-eyebrow.has-text-align-center → margin-inline: auto
 *   → pill centered within its content column
 */
.gtm-eyebrow {
    /* Index rule — the design system's primary DBA. A 3px gold tick flush-left
       of an all-caps label, replacing letter-spaced type: recognisable at
       thumbnail size, survives any word length, never collapses word gaps.
       (This was previously rendered as the --boxed pill variant at 0.2em
       tracking, which is reserved for badges and chips.) */
    display: flex;
    align-items: center;
    gap: 0.7em;
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--gtm-gold);
    line-height: 1;
    margin-bottom: 2rem;
    /*
     * Full-width on purpose. The previous pill needed `width: fit-content` so
     * its background hugged the text — but a fit-content box inside
     * WordPress's constrained layout gets `margin: auto` applied by core and
     * silently centres itself (measured 15.93px on both sides), pushing the
     * eyebrow out of alignment with the heading it introduces. The index rule
     * has no background to hug, so a normal full-width block keeps the tick
     * flush with the content column without fighting core for the margin.
     */
}

.gtm-eyebrow::before {
    content: '';
    flex: none;
    width: 3px;
    align-self: stretch;
    min-height: 1em;
    background: var(--gtm-gold);
}

/* Centered variant — used when wp:paragraph has {"align":"center"}
   WordPress adds .has-text-align-center class; we center the pill itself */
.gtm-eyebrow.has-text-align-center {
    justify-content: center;
}

.gtm-eyebrow--light {
    /* Deep gold for the cream surfaces — the tick inherits it below. */
    color: var(--gtm-gold-deep);
}
.gtm-eyebrow--light::before { background: var(--gtm-gold-deep); }

/* Phase badge */
.gtm-phase-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.6em;
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: var(--gtm-tracking-wide);
    text-transform: uppercase;
    color: var(--gtm-gold);
    padding: 0.4em 1em 0.4em 0.75em;
    border: 1px solid var(--gtm-gold);
    border-radius: var(--gtm-radius-pill);
}

/* =========================================================
   BUTTONS
   ========================================================= */
.wp-block-button__link,
.gtm-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5em;
    font-family: inherit;
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    text-decoration: none;
    padding: 0.9em 2em;
    border-radius: var(--gtm-radius-pill);
    transition: background var(--gtm-transition), color var(--gtm-transition), transform var(--gtm-transition);
    border: 2px solid transparent;
    cursor: pointer;
    white-space: nowrap;
}

/* Long labels ("Bestill Account Growth Assessment") are wider than a 320–390px
   column with pill padding; let them wrap instead of pushing the page sideways.
   The header CTA keeps its own nowrap rule (higher specificity). */
@media (max-width: 480px) {
    .wp-block-button { max-width: 100%; }
    .wp-block-button__link,
    .gtm-btn {
        white-space: normal;
        justify-content: center;
        text-align: center;
        max-width: 100%;
    }
}

.gtm-btn--primary,
.wp-block-button.is-style-primary .wp-block-button__link {
    background: var(--gtm-gold);
    color: var(--gtm-teal);
    border-color: var(--gtm-gold);
}
.gtm-btn--primary:hover { background: var(--gtm-gold-hover); border-color: var(--gtm-gold-hover); transform: translateY(-1px); }

.gtm-btn--ghost,
.wp-block-button.is-style-ghost .wp-block-button__link {
    background: transparent;
    color: var(--gtm-off-white);
    border-color: rgba(255,255,255,0.28);
}
.gtm-btn--ghost:hover { border-color: var(--gtm-off-white); color: var(--gtm-off-white); }

.gtm-btn--ghost-dark {
    background: transparent;
    color: var(--gtm-teal);
    border-color: rgba(14,45,44,0.28);
}
.gtm-btn--ghost-dark:hover { border-color: var(--gtm-teal); }

/* =========================================================
   HEADER
   ========================================================= */
.site-header {
    position: sticky;
    top: 0;
    z-index: 100;
    background: rgba(10, 33, 32, 0.96);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-bottom: 1px solid var(--gtm-faint);
    /*
     * WordPress applies `:where(.wp-block-group.has-background){padding:1.25em}`
     * to any group block carrying a background — which both header and footer do.
     * That padding stacked on top of the inner container's own padding: vertically
     * it inflated the header by ~42px of unintended height, and horizontally it
     * double-padded the row so the logo never lined up with page content.
     * Spacing here is owned by .site-header__inner / .gtm-container instead.
     */
    padding: 0;
}

.site-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: clamp(1.5rem, 4vw, 3rem);
    padding-block: 1.375rem;
}

/*
 * Logo. `flex-shrink: 0` is load-bearing: the header inner is a flex row and
 * without it the logo was being crushed to a measured 0px wide at 390px, i.e.
 * completely invisible on mobile. Height-driven sizing with width:auto keeps
 * the source aspect ratio regardless of which asset is set as the Site Logo.
 */
.site-header__brand { flex-shrink: 0; display: flex; align-items: center; }
.site-header__logo { flex-shrink: 0; display: flex; align-items: center; }
.site-header__logo a { display: flex; align-items: center; }
.site-header__logo img,
.site-header__logo svg {
    height: 40px;
    width: auto;
    max-width: none;
    display: block;
}

/* Wordmark half of the lockup — live text, not artwork. */
.site-header__wordmark { margin: 0; }
.site-header__wordmark a,
.site-header__wordmark {
    color: var(--gtm-off-white);
    text-decoration: none;
    font-size: 1.25rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1;
    white-space: nowrap;
}
.site-header__wordmark a:hover { color: var(--gtm-off-white); }

.site-header__logo .gtm-logo-text {
    font-size: 1.125rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--gtm-off-white);
    text-decoration: none;
}

.site-header__actions { flex-shrink: 0; }

/*
 * Navigation.
 * Colour is declared on the navigation BLOCK (see parts/header.html) because
 * WordPress core forces `color: inherit` onto the link element at specificity
 * (0,3,0). Anything we set on `.site-nav a` here is ignored for colour — that
 * was the original bug. We therefore style the label span, which is the element
 * that actually paints the text, and leave colour inheritance to the block.
 */
.site-nav { display: flex; align-items: center; gap: 0.25rem; }

.site-nav .wp-block-navigation-item__content {
    font-size: 0.9375rem;
    font-weight: 500;
    letter-spacing: 0.01em;
    text-decoration: none;
    padding: 0.5rem 0.875rem;
    border-radius: var(--gtm-radius-md);
    position: relative;
    transition: background var(--gtm-transition);
}

.site-nav .wp-block-navigation-item__label {
    color: rgba(249,245,238,0.82);
    transition: color var(--gtm-transition);
}

.site-nav .wp-block-navigation-item__content:hover .wp-block-navigation-item__label,
.site-nav .current-menu-item .wp-block-navigation-item__label {
    color: var(--gtm-off-white);
}

.site-nav .wp-block-navigation-item__content:hover {
    background: rgba(255,255,255,0.07);
}

/* Current page — restrained gold underline rather than a filled pill. */
.site-nav .current-menu-item::after {
    content: "";
    position: absolute;
    left: 0.875rem;
    right: 0.875rem;
    bottom: 0.125rem;
    height: 2px;
    border-radius: 2px;
    background: var(--gtm-gold);
}

/* Header CTA — slightly tighter than page-level buttons so it reads as
   navigation furniture, not as the page's own primary action. */
.gtm-header-cta .wp-block-button__link {
    font-size: 0.8125rem;
    padding: 0.75rem 1.375rem;
}

/* Mobile toggle — hidden on desktop. 44px target per touch guidance. */
.site-header__toggle {
    display: none;
    background: none;
    border: none;
    cursor: pointer;
    width: 44px;
    height: 44px;
    align-items: center;
    justify-content: center;
    padding: 0;
    color: var(--gtm-off-white);
    border-radius: var(--gtm-radius-md);
    transition: background var(--gtm-transition);
}
.site-header__toggle:hover { background: rgba(255,255,255,0.07); }

.site-header__toggle-bars {
    display: block;
    position: relative;
    width: 20px;
    height: 14px;
}
.site-header__toggle-bars span {
    position: absolute;
    left: 0;
    width: 100%;
    height: 1.75px;
    border-radius: 2px;
    background: currentColor;
    transition: transform var(--gtm-transition), opacity var(--gtm-transition);
}
.site-header__toggle-bars span:nth-child(1) { top: 0; }
.site-header__toggle-bars span:nth-child(2) { top: 6px; }
.site-header__toggle-bars span:nth-child(3) { top: 12px; }

/* Open state — bars become a close (×) affordance. */
.site-header__toggle[aria-expanded="true"] .site-header__toggle-bars span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.site-header__toggle[aria-expanded="true"] .site-header__toggle-bars span:nth-child(2) { opacity: 0; }
.site-header__toggle[aria-expanded="true"] .site-header__toggle-bars span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

@media (max-width: 900px) {
    .site-header__inner { padding-block: 1rem; }
    .site-header__logo img,
    .site-header__logo svg { height: 34px; }
    .site-header__wordmark, .site-header__wordmark a { font-size: 1.125rem; }

    /*
     * The panel.
     *
     * Two things this selector has to get right, both found by measuring the
     * live DOM rather than reading the markup:
     *
     * 1. It must target the <nav> ONLY. WordPress renders the inner <ul> with
     *    the block's own className too, so the <ul> also matches `.site-nav`.
     *    A bare `.site-nav { display:none }` therefore hid the <ul> as well —
     *    and since only the <nav> ever receives `.is-open`, the panel opened
     *    empty with every item measuring 0px tall. `nav.site-nav` excludes it.
     * 2. Specificity (0,1,1) beats WordPress's
     *    `.wp-block-navigation-is-layout-flex { display:flex }` at (0,1,0),
     *    which is what previously stopped the menu from hiding at all.
     *
     * box-sizing is set explicitly because the navigation block computes as
     * content-box here, so `width:100%` plus padding overflowed the viewport
     * by exactly the horizontal padding (measured 430px on a 390px screen).
     */
    nav.site-nav {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        width: 100%;
        box-sizing: border-box;
        background: var(--gtm-teal);
        border-top: 1px solid var(--gtm-faint);
        box-shadow: 0 18px 40px rgba(0,0,0,0.35);
        padding: 1rem 1.25rem 1.5rem;
        flex-direction: column;
        align-items: stretch;
        gap: 0.125rem;
        max-height: calc(100vh - 100%);
        overflow-y: auto;
    }
    nav.site-nav.is-open { display: flex; }

    /* The inner <ul> stacks and must stay laid out (see note above — it also
       carries .site-nav, so it needs its own explicit display). */
    nav.site-nav .wp-block-navigation__container {
        display: flex;
        position: static;
        flex-direction: column;
        align-items: stretch;
        gap: 0.125rem;
        width: 100%;
        padding: 0;
        background: none;
        box-shadow: none;
        border-top: 0;
    }

    nav.site-nav .wp-block-navigation-item { width: 100%; }

    .site-nav .wp-block-navigation-item__content {
        display: block;
        width: 100%;
        font-size: 1.0625rem;
        padding: 0.875rem 1rem;
        min-height: 48px;
        line-height: 1.5;
    }

    .site-nav .current-menu-item::after { left: 1rem; right: auto; width: 20px; bottom: 0.5rem; }

    .site-header__toggle { display: flex; }

    /* Keep the CTA visible on mobile — it is the primary cold action.
       (The previous rule targeted `.site-header__cta`, a class that does not
       exist in the markup, so it never applied to anything.) */
    .gtm-header-cta .wp-block-button__link {
        font-size: 0.75rem;
        padding: 0.625rem 1rem;
        white-space: nowrap;
    }
}

/* Very narrow phones — the CTA label would otherwise crowd the toggle. */
@media (max-width: 420px) {
    .site-header__logo img,
    .site-header__logo svg { height: 30px; }
    /* Below this width the lockup, a text CTA and a 44px toggle cannot coexist
       without overflowing (measured 327px of content in 272px of usable width).
       The icon alone still identifies the brand, so the wordmark steps aside. */
    .site-header__wordmark { display: none; }
    .gtm-header-cta .wp-block-button__link {
        font-size: 0.6875rem;
        padding: 0.5rem 0.75rem;
        letter-spacing: 0.04em;
    }
}

/* =========================================================
   FOOTER
   ========================================================= */
.site-footer {
    background: var(--gtm-teal);
    color: var(--gtm-sand);
    /* padding-inline reset for the same has-background double-padding described
       on .site-header above; vertical rhythm is set explicitly here. */
    padding: clamp(3.5rem, 6vw, 5.5rem) 0;
    border-top: 1px solid var(--gtm-faint);
}

.site-footer__grid {
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr 1fr;
    gap: 3rem;
}

.site-footer__logo img { height: 44px; width: auto; max-width: none; display: block; }

.site-footer__brand .tagline {
    font-size: 0.9375rem;
    color: rgba(249,245,238,0.6);
    line-height: 1.65;
    margin-top: 0.75rem;
    max-width: 300px;
}

.site-footer__col-label {
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: var(--gtm-tracking-wide);
    text-transform: uppercase;
    color: var(--gtm-gold);
    margin-bottom: 1rem;
}

/* Footer links. The footer group declares its own text colour, so WordPress's
   `color: inherit` on nav links resolves correctly here — the label rule is
   for the muted default and hover, matching the header approach. */
.site-footer nav a,
.site-footer nav .wp-block-navigation-item__content {
    display: block;
    font-size: 0.9375rem;
    text-decoration: none;
    padding-block: 0.4rem;
}
.site-footer nav .wp-block-navigation-item__label {
    color: rgba(249,245,238,0.68);
    transition: color var(--gtm-transition);
}
.site-footer nav a:hover .wp-block-navigation-item__label,
.site-footer nav .wp-block-navigation-item__content:hover .wp-block-navigation-item__label {
    color: var(--gtm-off-white);
}

.site-footer__bottom {
    margin-top: 3rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--gtm-faint);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}

.site-footer__bottom-copy { font-size: 0.8125rem; color: rgba(249,245,238,0.5); }

.site-footer__tagline {
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: var(--gtm-tracking-wide);
    text-transform: uppercase;
    color: var(--gtm-gold);
    font-style: italic;
}

@media (max-width: 900px) {
    .site-footer__grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
    .site-footer__grid { grid-template-columns: 1fr; }
}

/* =========================================================
   HERO — DARK
   ========================================================= */
.gtm-hero {
    background: var(--gtm-teal);
    color: var(--gtm-off-white);
    padding-block: clamp(5rem, 10vw, 10rem);
    position: relative;
    overflow: hidden;
}

.gtm-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");
    opacity: 0.035;
    pointer-events: none;
}

.gtm-hero__inner {
    position: relative;
    z-index: 1;
    /* alignfull heroes break out of root padding — restore gutter here */
    padding-inline: var(--gtm-page-padding);
}

.gtm-hero h1 { color: var(--gtm-off-white); margin: 0 0 1.5rem; }
.gtm-hero .hero-sub {
    font-size: clamp(1rem, 1.8vw, 1.25rem);
    line-height: 1.65;
    color: rgba(249,245,238,0.72);
    max-width: 680px;
    margin: 0 0 2.5rem;
}
.gtm-hero .hero-support {
    font-size: 0.9375rem;
    color: rgba(249,245,238,0.5);
    max-width: 560px;
    margin: 0 0 3rem;
    line-height: 1.7;
}

.gtm-hero__ctas {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    align-items: center;
}

/* Two-column hero */
.gtm-hero--two-col .gtm-hero__inner {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 5rem;
    align-items: end;
}
@media (max-width: 900px) {
    .gtm-hero--two-col .gtm-hero__inner { grid-template-columns: 1fr; gap: 2.5rem; }
}

/* =========================================================
   THREE-PHASE SECTION
   ========================================================= */
.gtm-phases {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2px;
}

.gtm-phase-card {
    background: var(--gtm-teal-mid);
    padding: 2.5rem;
    position: relative;
}

.gtm-phase-card__number {
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: var(--gtm-tracking-wide);
    text-transform: uppercase;
    color: var(--gtm-gold);
    margin-bottom: 1rem;
}

.gtm-phase-card__title {
    font-size: 1.375rem;
    font-weight: 600;
    color: var(--gtm-off-white);
    margin-bottom: 0.75rem;
    letter-spacing: -0.02em;
    line-height: 1.2;
}

.gtm-phase-card__desc {
    font-size: 0.9375rem;
    color: rgba(249,245,238,0.65);
    line-height: 1.65;
    margin-bottom: 1.5rem;
}

.gtm-phase-card__meta {
    font-size: 0.75rem;
    color: var(--gtm-ink-muted);
    letter-spacing: 0.04em;
}

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

/* =========================================================
   MODULE CARDS
   ========================================================= */
.gtm-module-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr));
    gap: 1.5rem;
}
/* When used as a wp:post-template, override WordPress inline grid */
.gtm-module-grid.wp-block-post-template {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr)) !important;
    gap: 1.25rem !important;
    list-style: none;
    margin: 0;
    padding: 0;
}

.gtm-module-card {
    background: var(--gtm-off-white);
    border: 1px solid rgba(14,45,44,0.1);
    border-radius: var(--gtm-radius-lg);
    padding: 2rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    transition: box-shadow var(--gtm-transition), transform var(--gtm-transition);
    text-decoration: none;
    color: inherit;
}
.gtm-module-card:hover {
    box-shadow: var(--gtm-shadow-md);
    transform: translateY(-2px);
}

.gtm-module-card__phase {
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: var(--gtm-tracking-wide);
    text-transform: uppercase;
    color: var(--gtm-gold-deep);
}

.gtm-module-card__title {
    font-size: 1.0625rem;
    font-weight: 600;
    color: var(--gtm-teal);
    letter-spacing: -0.015em;
    line-height: 1.3;
    margin: 0;
}

.gtm-module-card__desc {
    font-size: 0.9375rem;
    color: var(--gtm-graphite);
    line-height: 1.65;
    flex: 1;
}

.gtm-module-card__link {
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--gtm-teal);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 0.4em;
}

/* =========================================================
   CASE CARDS
   ========================================================= */
.gtm-case-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(340px, 100%), 1fr));
    gap: 1.5rem;
}

.gtm-case-card {
    background: var(--gtm-off-white);
    border: 1px solid rgba(14,45,44,0.1);
    border-radius: var(--gtm-radius-lg);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    text-decoration: none;
    color: inherit;
    transition: box-shadow var(--gtm-transition), transform var(--gtm-transition);
}
.gtm-case-card:hover { box-shadow: var(--gtm-shadow-md); transform: translateY(-2px); }

.gtm-case-card__meta {
    padding: 1.5rem 1.75rem 0;
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.gtm-tag {
    font-size: 0.625rem;
    font-weight: 700;
    letter-spacing: var(--gtm-tracking-wide);
    text-transform: uppercase;
    color: var(--gtm-teal);
    background: rgba(14,45,44,0.07);
    border-radius: var(--gtm-radius-pill);
    padding: 0.3em 0.8em;
}

.gtm-case-card__body { padding: 1.25rem 1.75rem 1.5rem; flex: 1; display: flex; flex-direction: column; gap: 0.75rem; }

.gtm-case-card__title {
    font-size: 1.0625rem;
    font-weight: 600;
    color: var(--gtm-teal);
    line-height: 1.3;
    margin: 0;
}

.gtm-case-card__problem { font-size: 0.9375rem; color: var(--gtm-graphite); line-height: 1.6; }

.gtm-case-card__cta {
    margin-top: auto;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--gtm-teal);
    display: inline-flex;
    align-items: center;
    gap: 0.4em;
}

/* =========================================================
   FAQ / ACCORDION
   ========================================================= */
.gtm-faq { border-top: 1px solid rgba(14,45,44,0.12); }
.gtm-faq__item { border-bottom: 1px solid rgba(14,45,44,0.12); }

.gtm-faq__question {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    padding: 1.5rem 0;
    background: none;
    border: none;
    cursor: pointer;
    font-family: inherit;
    font-size: 1rem;
    font-weight: 600;
    color: var(--gtm-teal);
    text-align: left;
    line-height: 1.4;
    letter-spacing: -0.01em;
}

.gtm-faq__icon {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    border: 1.5px solid var(--gtm-teal);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform var(--gtm-transition);
    font-size: 1rem;
    line-height: 1;
}

.gtm-faq__item.is-open .gtm-faq__icon { transform: rotate(45deg); }

.gtm-faq__answer {
    display: none;
    padding: 0 0 1.5rem;
    font-size: 0.9375rem;
    color: var(--gtm-graphite);
    line-height: 1.75;
    max-width: 720px;
}
.gtm-faq__item.is-open .gtm-faq__answer { display: block; }

/* =========================================================
   FIT CHECKLIST
   ========================================================= */
.gtm-fit-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2px;
}

.gtm-fit-col {
    padding: 2.5rem;
}

.gtm-fit-col--good  { background: rgba(14,45,44,0.04); }
.gtm-fit-col--poor  { background: rgba(212,164,71,0.06); }

.gtm-fit-col__label {
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: var(--gtm-tracking-wide);
    text-transform: uppercase;
    margin-bottom: 1.5rem;
}

.gtm-fit-col--good  .gtm-fit-col__label { color: var(--gtm-teal); }
.gtm-fit-col--poor  .gtm-fit-col__label { color: var(--gtm-gold-deep); }

.gtm-fit-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.875rem; }

/* Block + absolutely placed marker (not flex): inline text such as a bold
   label followed by a dash stays one line of prose instead of splitting into
   separate flex items with a gap between them. */
.gtm-fit-list li {
    position: relative;
    padding-left: 1.5rem;
    font-size: 0.9375rem;
    line-height: 1.55;
}

.gtm-fit-list li::before {
    content: '→';
    position: absolute;
    left: 0;
    top: 0.05em;
    font-size: 0.875rem;
}

.gtm-fit-col--good  .gtm-fit-list li::before { color: var(--gtm-teal); }
.gtm-fit-col--poor  .gtm-fit-list li::before { color: var(--gtm-gold-deep); content: '×'; }

@media (max-width: 700px) { .gtm-fit-grid { grid-template-columns: 1fr; } }

/* =========================================================
   WHAT THIS IS / IS NOT
   ========================================================= */
.gtm-what-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
}

@media (max-width: 700px) { .gtm-what-grid { grid-template-columns: 1fr; } }

.gtm-what-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.875rem; }

.gtm-what-list--is li::before   { content: '→'; color: var(--gtm-teal); }
.gtm-what-list--not li::before  { content: '×'; color: var(--gtm-gold-deep); }

.gtm-what-list li {
    display: flex;
    gap: 0.75rem;
    align-items: baseline;
    font-size: 0.9375rem;
    line-height: 1.6;
}

/* =========================================================
   BOOKING LAYOUT
   ========================================================= */
.gtm-booking {
    display: grid;
    grid-template-columns: 1fr 1.15fr;
    min-height: calc(100vh - 80px);
}

.gtm-booking__pitch {
    background: var(--gtm-teal);
    color: var(--gtm-off-white);
    padding: clamp(3rem, 6vw, 5rem) clamp(2rem, 5vw, 4rem);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.gtm-booking__scheduler {
    background: var(--gtm-sand);
    padding: clamp(3rem, 6vw, 5rem) clamp(2rem, 5vw, 4rem);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.gtm-hubspot-embed {
    width: 100%;
    max-width: 640px;
    border-radius: var(--gtm-radius-lg);
    overflow: hidden;
    box-shadow: var(--gtm-shadow-lg);
    background: var(--gtm-off-white);
}

.gtm-hubspot-embed iframe,
.gtm-hubspot-embed .meetings-iframe-container { min-height: 640px; }

/* Gregory bio strip inside booking pitch */
.gtm-booking-bio {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    padding-top: 2rem;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}
.gtm-booking-bio__avatar {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: #D4A447;
    color: #0E2D2C;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.125rem;
    font-weight: 700;
    flex-shrink: 0;
}
.gtm-booking-bio__text { display: flex; flex-direction: column; gap: 0.25rem; }
.gtm-booking-bio__name {
    color: #F9F5EE;
    font-size: 0.9375rem;
    font-weight: 600;
    margin: 0;
}
.gtm-booking-bio__role {
    color: #7A8C8B;
    font-size: 0.8125rem;
    margin: 0;
}

@media (max-width: 900px) {
    .gtm-booking { grid-template-columns: 1fr; }
    .gtm-booking__pitch { padding-bottom: 3rem; }
}

/* =========================================================
   ARTICLE / LONG-FORM
   ========================================================= */
.gtm-article-body {
    font-size: clamp(1rem, 1.5vw, 1.125rem);
    line-height: 1.8;
    color: var(--gtm-graphite);
    max-width: 760px;
    margin-inline: auto;
}

.gtm-article-body h2 { margin-top: 3rem; margin-bottom: 1rem; font-size: clamp(1.375rem, 2.5vw, 1.875rem); }
.gtm-article-body h3 { margin-top: 2rem; margin-bottom: 0.75rem; font-size: clamp(1.125rem, 2vw, 1.375rem); }

.gtm-key-takeaways {
    background: var(--gtm-teal);
    color: var(--gtm-off-white);
    border-radius: var(--gtm-radius-lg);
    padding: 2rem 2.5rem;
    margin-bottom: 2.5rem;
}
.gtm-key-takeaways__label {
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--gtm-gold);
    margin-bottom: 1rem;
}
.gtm-key-takeaways ul { margin: 0; padding-left: 1.25rem; display: flex; flex-direction: column; gap: 0.5rem; }
.gtm-key-takeaways li { font-size: 0.9375rem; line-height: 1.6; }

/* TOC */
.gtm-toc {
    background: var(--gtm-sand-soft);
    border-left: 3px solid var(--gtm-gold);
    border-radius: 0 var(--gtm-radius-md) var(--gtm-radius-md) 0;
    padding: 1.5rem 2rem;
    margin-bottom: 2.5rem;
}
.gtm-toc__label { font-size: 0.6875rem; font-weight: 700; letter-spacing: var(--gtm-tracking-wide); text-transform: uppercase; color: var(--gtm-gold-deep); margin-bottom: 0.875rem; }
.gtm-toc ol { margin: 0; padding-left: 1.25rem; display: flex; flex-direction: column; gap: 0.35rem; }
.gtm-toc a { font-size: 0.9375rem; color: var(--gtm-teal); text-decoration: none; }
.gtm-toc a:hover { color: var(--gtm-gold-deep); }

/* =========================================================
   ASSESSMENT CTA STRIP
   ========================================================= */
.gtm-assessment-strip {
    background: var(--gtm-teal);
    color: var(--gtm-off-white);
    border-radius: var(--gtm-radius-lg);
    padding: 2.5rem 3rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
    flex-wrap: wrap;
}

.gtm-assessment-strip__copy { flex: 1; min-width: 240px; }
.gtm-assessment-strip__copy p { font-size: 1rem; color: rgba(249,245,238,0.72); margin: 0.35rem 0 0; }
.gtm-assessment-strip h3 { font-size: 1.25rem; margin: 0; color: var(--gtm-off-white); }

/* =========================================================
   PROOF / CREDIBILITY
   ========================================================= */
.gtm-proof-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1.5rem;
}

.gtm-proof-item {
    border-left: 3px solid var(--gtm-gold);
    padding-left: 1.5rem;
}

.gtm-proof-item__stat {
    font-size: 2.5rem;
    font-weight: 800;
    letter-spacing: -0.04em;
    color: var(--gtm-off-white);
    line-height: 1;
    margin-bottom: 0.5rem;
}

.gtm-proof-item__label { font-size: 0.875rem; color: rgba(249,245,238,0.65); line-height: 1.5; }

/* =========================================================
   FINAL CTA
   ========================================================= */
.gtm-final-cta {
    background: var(--gtm-teal);
    color: var(--gtm-off-white);
    padding-block: clamp(5rem, 8vw, 8rem);
    text-align: center;
}

.gtm-final-cta h2 {
    font-size: clamp(1.75rem, 4vw, 3rem);
    color: var(--gtm-off-white);
    margin: 0 0 1.25rem;
    max-width: 640px;
    margin-inline: auto;
    margin-bottom: 1.25rem;
}

.gtm-final-cta p {
    font-size: 1.0625rem;
    color: rgba(249,245,238,0.65);
    max-width: 520px;
    margin-inline: auto;
    margin-bottom: 2.5rem;
}

/* =========================================================
   UTILITIES
   ========================================================= */
.sr-only {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    white-space: nowrap;
    border: 0;
}

.text-gold { color: var(--gtm-gold); }
.text-gold-deep { color: var(--gtm-gold-deep); }
.text-muted { color: var(--gtm-ink-subtle); }

@media (max-width: 600px) {
    .hide-mobile { display: none !important; }
}

/* =========================================================
   ACCESSIBILITY — SKIP LINK
   Visible only on keyboard focus; targets #main-content
   ========================================================= */
.skip-link {
    position: absolute;
    top: -200%;
    left: 0;
    z-index: 9999;
    background: var(--gtm-gold);
    color: var(--gtm-teal);
    font-weight: 700;
    font-size: 0.875rem;
    letter-spacing: 0.05em;
    padding: 0.75rem 1.5rem;
    border-radius: 0 0 var(--gtm-radius-md) 0;
    text-decoration: none;
    transition: top 0.15s ease;
}
.skip-link:focus {
    top: 0;
    outline: 3px solid var(--gtm-teal);
    outline-offset: 2px;
}

/* WordPress screen-reader-text convention */
.screen-reader-text {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    white-space: nowrap;
    border: 0;
}
.screen-reader-text:focus {
    position: fixed;
    top: 0.5rem;
    left: 0.5rem;
    width: auto; height: auto;
    padding: 0.75rem 1.5rem;
    clip: auto;
    background: var(--gtm-gold);
    color: var(--gtm-teal);
    font-weight: 700;
    border-radius: var(--gtm-radius-md);
    z-index: 9999;
    text-decoration: none;
}

/* =========================================================
   ACCESSIBILITY — FOCUS STATES
   WCAG 2.1 AA: visible focus on all interactive elements.
   Use :focus-visible (graceful degradation) to avoid
   showing ring on mouse clicks.
   ========================================================= */
:focus-visible {
    outline: 3px solid var(--gtm-gold);
    outline-offset: 3px;
    border-radius: 2px;
}

/* Buttons */
.wp-block-button__link:focus-visible,
.gtm-btn:focus-visible {
    outline: 3px solid var(--gtm-gold);
    outline-offset: 3px;
}

/* Nav links */
.site-nav a:focus-visible {
    outline: 2px solid var(--gtm-gold);
    outline-offset: 2px;
    background: rgba(212,164,71,0.12);
    color: var(--gtm-off-white);
}

/* Module and case cards */
.gtm-module-card:focus-visible,
.gtm-case-card:focus-visible {
    outline: 3px solid var(--gtm-gold);
    outline-offset: 3px;
    box-shadow: var(--gtm-shadow-md);
}

/* FAQ accordion button */
.gtm-faq__question:focus-visible {
    outline: 2px solid var(--gtm-gold);
    outline-offset: 2px;
    border-radius: var(--gtm-radius-sm);
}

/* Footer links */
.site-footer a:focus-visible {
    outline: 2px solid var(--gtm-gold);
    outline-offset: 3px;
    border-radius: 2px;
}

/* Remove outline from non-focus interactions */
:focus:not(:focus-visible) { outline: none; }

/* =========================================================
   SCROLLED HEADER SHADOW
   ========================================================= */
.site-header.is-scrolled {
    box-shadow: 0 4px 24px rgba(0,0,0,0.18);
}

/* =========================================================
   GHOST-DARK BUTTON (on light backgrounds)
   ========================================================= */
.wp-block-button.is-style-ghost-dark .wp-block-button__link {
    background: transparent;
    color: var(--gtm-teal);
    border-color: rgba(14,45,44,0.3);
}
.wp-block-button.is-style-ghost-dark .wp-block-button__link:hover {
    background: rgba(14,45,44,0.05);
    border-color: var(--gtm-teal);
}

/* =========================================================
   DIRECT ANSWER BLOCK — AEO
   Crawlable, semantic, no JS. Used on programme, assessment
   and AI visibility pages.
   ========================================================= */
.gtm-direct-answer {
    background: var(--gtm-sand);
    border-left: 3px solid var(--gtm-gold);
    border-radius: 0 var(--gtm-radius-md) var(--gtm-radius-md) 0;
    padding: 1.5rem 2rem;
    max-width: 760px;
}

.gtm-direct-answer p:first-of-type {
    font-size: 0.625rem;
    font-weight: 700;
    letter-spacing: var(--gtm-tracking-wide);
    text-transform: uppercase;
    color: var(--gtm-gold-deep);
    margin-bottom: 0.625rem;
}

.gtm-direct-answer p:last-of-type {
    font-size: 1.0625rem;
    line-height: 1.72;
    color: var(--gtm-graphite);
    margin: 0;
}

/* =========================================================
   ARTICLE META — E-E-A-T row (date, reading time, author)
   ========================================================= */
.gtm-article-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1.25rem;
    padding-top: 1.25rem;
    border-top: 1px solid rgba(255,255,255,0.1);
    margin-top: 2rem;
}

.gtm-article-meta__avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--gtm-gold);
    color: var(--gtm-teal);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.625rem;
    font-weight: 700;
    flex-shrink: 0;
}

.gtm-reading-time {
    font-size: 0.8125rem;
    color: rgba(249,245,238,0.5);
    display: inline-flex;
    align-items: center;
    gap: 0.4em;
}

/* On light (sand) backgrounds */
.gtm-light .gtm-reading-time,
.gtm-section .gtm-reading-time {
    color: var(--gtm-ink-subtle);
}

/* =========================================================
   BREADCRUMB STYLES
   ========================================================= */
.gtm-breadcrumb-nav {
    font-size: 0.8125rem;
    color: rgba(249,245,238,0.55);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.25em;
}

.gtm-breadcrumb-nav a {
    color: rgba(249,245,238,0.55);
    text-decoration: none;
    transition: color var(--gtm-transition);
}
.gtm-breadcrumb-nav a:hover { color: rgba(249,245,238,0.9); }
.gtm-breadcrumb-nav a:focus-visible {
    outline: 2px solid var(--gtm-gold);
    outline-offset: 2px;
    border-radius: 2px;
}

/* On light backgrounds */
.gtm-breadcrumb-nav--light { color: var(--gtm-ink-subtle); }
.gtm-breadcrumb-nav--light a { color: var(--gtm-ink-subtle); }
.gtm-breadcrumb-nav--light a:hover { color: var(--gtm-teal); }

/* =========================================================
   HUBSPOT FORM COMPATIBILITY
   Prevents theme styles from breaking HubSpot form inputs.
   The HubSpot plugin manages its own form styling — we only
   set layout and container rules here.
   ========================================================= */
.gtm-hubspot-form-wrapper {
    width: 100%;
    overflow: hidden;
}

/* Responsive container for embedded HubSpot forms */
.hbspt-form,
.hs-form-iframe,
[id^="hubspot-form"] {
    width: 100% !important;
    max-width: 100% !important;
}

/* Ensure HubSpot form inputs are touch-friendly on mobile */
.hbspt-form .hs-input,
.hbspt-form input[type="text"],
.hbspt-form input[type="email"],
.hbspt-form select,
.hbspt-form textarea {
    min-height: 44px; /* WCAG touch target */
}

/* Do NOT override HubSpot color/font — let the plugin control styling */

/* Meeting embed container */
.gtm-hubspot-embed {
    width: 100%;
    max-width: 640px;
    border-radius: var(--gtm-radius-lg);
    overflow: hidden;
    box-shadow: var(--gtm-shadow-lg);
    background: var(--gtm-off-white);
}
.gtm-hubspot-embed iframe,
.gtm-hubspot-embed .meetings-iframe-container {
    min-height: 640px;
    width: 100%;
    border: 0;
}
@media (max-width: 600px) {
    .gtm-hubspot-embed iframe,
    .gtm-hubspot-embed .meetings-iframe-container { min-height: 480px; }
}

/* =========================================================
   RESPONSIVE IMAGE UTILITIES
   WordPress adds loading="lazy" automatically from 5.5+.
   Hero images should use loading="eager" — see templates.
   ========================================================= */
.gtm-hero img { loading: eager; } /* reminder class, actual attr set in PHP */

.wp-block-image img {
    border-radius: var(--gtm-radius-md);
}

/* =========================================================
   INTERSECTION OBSERVER REVEAL
   (used by assets/js/main.js)
   ========================================================= */
.gtm-reveal {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.5s ease, transform 0.5s ease;
}
.gtm-reveal.is-visible {
    opacity: 1;
    transform: none;
}

/* Staggered children */
.gtm-reveal-stagger > * {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity 0.4s ease, transform 0.4s ease;
}
.gtm-reveal-stagger.is-visible > *:nth-child(1) { opacity:1; transform:none; transition-delay:0s; }
.gtm-reveal-stagger.is-visible > *:nth-child(2) { opacity:1; transform:none; transition-delay:0.08s; }
.gtm-reveal-stagger.is-visible > *:nth-child(3) { opacity:1; transform:none; transition-delay:0.16s; }
.gtm-reveal-stagger.is-visible > *:nth-child(4) { opacity:1; transform:none; transition-delay:0.24s; }

/* =========================================================
   REDUCED MOTION — respect prefers-reduced-motion
   ========================================================= */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
    .gtm-reveal,
    .gtm-reveal-stagger > * {
        opacity: 1;
        transform: none;
        transition: none;
    }
}

/* =========================================================
   PRINT STYLES — basic legibility
   ========================================================= */
@media print {
    .site-header,
    .site-footer,
    .gtm-assessment-strip,
    .gtm-final-cta,
    .skip-link { display: none !important; }
    body { font-size: 12pt; color: #000; background: #fff; }
    a { color: #000; }
    a[href]::after { content: ' (' attr(href) ')'; font-size: 0.75em; }
}

/* =========================================================
   MODULE LAYERS — /moduler/ Page dynamic grid
   ========================================================= */
.gtm-module-layers {
    display: flex;
    flex-direction: column;
    gap: clamp(2.5rem, 4vw, 4rem);
}

.gtm-module-layer {
    position: relative;
}

.gtm-module-layer__header {
    margin-bottom: 2rem;
    padding-bottom: 1.25rem;
    border-bottom: 1px solid rgba(14,45,44,0.1);
    display: grid;
    grid-template-columns: auto 1fr;
    column-gap: 1.75rem;
    align-items: start;
}

/* Large decorative number — structure indicator, not body copy */
.gtm-module-layer__number {
    font-size: clamp(2.5rem, 5vw, 4rem);
    font-weight: 800;
    letter-spacing: -0.04em;
    color: rgba(14,45,44,0.08);
    line-height: 1;
    margin: 0;
    grid-row: span 2;
    align-self: center;
    user-select: none;
}

.gtm-module-layer__title {
    font-size: clamp(1.375rem, 2.5vw, 1.875rem);
    font-weight: 700;
    color: var(--gtm-teal);
    letter-spacing: -0.025em;
    margin: 0;
    line-height: 1.15;
}

.gtm-module-layer__desc {
    font-size: 1rem;
    color: var(--gtm-ink-muted);
    line-height: 1.7;
    max-width: 580px;
    margin: 0.375rem 0 0;
}

/*
 * Count-agnostic by design — supports any number of published modules
 * per layer (1, 5, 12+) without theme changes and without breaking rows.
 *
 * auto-fit + minmax(280px, 380px): browser computes how many 280–380px
 * tracks fit; unfilled tracks collapse (no dead reserved grid space,
 * unlike auto-fill), so a single card caps at 380px instead of either
 * stretching edge-to-edge or sitting stranded next to empty tracks.
 * min(280px, 100%) prevents overflow on any viewport narrower than 280px.
 * Verified in-browser (measured computed widths, zero overflow) at
 * 1180/1024/900/768/640/480/375/320px container widths, and at 1/2/3/4/5
 * card counts — naturally reflows 3 → 2 → 1 columns with no media query.
 */
.gtm-module-layer__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 380px));
    gap: 1.25rem;
}

.gtm-module-layer__divider {
    border: none;
    border-top: 2px solid rgba(14,45,44,0.07);
    margin: 0;
}

/* =========================================================
   MODULE CARDS — improved readability
   ========================================================= */
.gtm-module-card {
    background: var(--gtm-off-white);
    border: 1px solid rgba(14,45,44,0.1);
    border-radius: var(--gtm-radius-lg);
    padding: 1.75rem;
    display: flex;
    flex-direction: column;
    gap: 0.875rem;
    transition: box-shadow var(--gtm-transition), transform var(--gtm-transition), border-color var(--gtm-transition);
    text-decoration: none;
    color: inherit;
    min-height: 200px; /* consistent card height */
}
.gtm-module-card:hover {
    box-shadow: var(--gtm-shadow-md);
    transform: translateY(-2px);
    border-color: rgba(14,45,44,0.18);
}

.gtm-module-card__phase {
    font-size: 0.625rem;
    font-weight: 700;
    letter-spacing: var(--gtm-tracking-wide);
    text-transform: uppercase;
    color: var(--gtm-gold-deep);
    line-height: 1.4;
}

.gtm-module-card__title {
    font-size: 1.0625rem;
    font-weight: 700;
    color: var(--gtm-teal);
    letter-spacing: -0.015em;
    line-height: 1.25;
    margin: 0;
}

.gtm-module-card__desc {
    font-size: 0.9375rem;
    color: var(--gtm-ink-muted);
    line-height: 1.7;
    flex: 1;
}

.gtm-module-card__link {
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--gtm-teal);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 0.4em;
    margin-top: auto;
    padding-top: 0.5rem;
    border-top: 1px solid rgba(14,45,44,0.07);
}

/* Coming-soon card variant */
.gtm-module-card--coming {
    opacity: 0.45;
    cursor: default;
    pointer-events: none;
    background: var(--gtm-off-white);
    border: 1px solid rgba(14,45,44,0.08);
    border-radius: var(--gtm-radius-lg);
    padding: 1.75rem;
    display: flex;
    flex-direction: column;
    gap: 0.875rem;
}

/* =========================================================
   WORDPRESS LAYOUT-FLOW MARGIN RESET — design-system components
   ---------------------------------------------------------
   Every component below is authored as native wp:group blocks so its
   content stays editable in the Page Editor. WordPress therefore adds
   `is-layout-flow` to those groups and emits, from global-styles:

       :root :where(.is-layout-flow) > * { margin-block-start: <blockGap> }

   With blockGap at 2.5rem that injects a 40px top margin onto every
   non-first child — which breaks our grid/flex components: cards 2..n
   drop 40px below card 1 in a grid row, and stray 40px gaps appear
   inside cards whose spacing is already owned by `gap`.

   Verified against the live staging DOM: this stylesheet loads at
   index 19, global-styles-inline-css at index 15, so at equal
   specificity (0,1,0) these rules win on source order. No !important
   and no specificity escalation required — keep it that way.

   Spacing INSIDE these components is owned by their own `gap` and
   explicit margin declarations below.
   ========================================================= */
.gtm-step-ladder > *,
.gtm-step-card > *,
.gtm-layer-strip > *,
.gtm-layer-strip__item > *,
.gtm-value-cards > *,
.gtm-value-card > *,
.gtm-card-block > *,
.gtm-mini-steps > *,
.gtm-mini-step > * {
    margin-block-start: 0;
}

/* =========================================================
   PROGRAM STEP LADDER — reusable component for the four-step
   Program page (Teardown / Assessment / Sprint / Operating Partner).
   Fixed-length list (4 items) — unlike the module grid, an explicit
   breakpoint grid is correct here since step count is architectural,
   not content-driven. DOM order is preserved at every breakpoint;
   only column count changes.
   Markup: native wp:group/wp:heading/wp:paragraph blocks with these
   classNames — content stays fully editable in the Page Editor.
   ========================================================= */
.gtm-step-ladder {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem;
    position: relative;
}

.gtm-step-card {
    background: rgba(255,255,255,0.045);
    border: 1px solid rgba(255,255,255,0.1);
    border-top: 3px solid rgba(212,164,71,0.35);
    border-radius: var(--gtm-radius-md);
    padding: 2rem 1.75rem 1.75rem;
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
    min-height: 260px;
    position: relative;
    transition: border-color var(--gtm-transition), background var(--gtm-transition), transform var(--gtm-transition);
}
.gtm-step-card:hover {
    background: rgba(255,255,255,0.065);
    border-top-color: var(--gtm-gold);
    transform: translateY(-2px);
}

/* Large decorative number — echoes the module-layer number treatment
   for visual family resemblance across the site's card systems. */
.gtm-step-card__number {
    font-size: 2.25rem;
    font-weight: 800;
    letter-spacing: -0.03em;
    color: rgba(212,164,71,0.3);
    line-height: 1;
    margin: 0 0 0.5rem;
}

/* Role/purpose tag — short label naming this step's function inside
   the system (e.g. "Diagnose", "Kvalifisering"), distinct from the
   descriptive paragraph below it. */
.gtm-step-card__role {
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: var(--gtm-tracking-wide);
    text-transform: uppercase;
    color: var(--gtm-gold);
    margin: 0 0 0.125rem;
}

.gtm-step-card__meta {
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.02em;
    color: rgba(249,245,238,0.5);
    margin: 0 0 0.25rem;
}

.gtm-step-card__title {
    font-size: 1.1875rem;
    font-weight: 700;
    color: var(--gtm-off-white);
    line-height: 1.25;
    margin: 0;
}

.gtm-step-card__desc {
    font-size: 0.9375rem;
    color: rgba(249,245,238,0.7);
    line-height: 1.65;
    flex: 1;
}

/* Teardown card — the one card that links out to its own dedicated
   page, so it carries a stronger visible distinction and an actual
   link element (not the whole card wrapped in an anchor, to keep
   every block independently editable in the Page Editor). */
.gtm-step-card--linked {
    border-color: rgba(212,164,71,0.4);
    border-top-color: var(--gtm-gold);
    background: rgba(212,164,71,0.09);
}
.gtm-step-card--linked:hover {
    background: rgba(212,164,71,0.13);
    border-top-color: var(--gtm-gold);
}
.gtm-step-card--linked .gtm-step-card__number { color: var(--gtm-gold); }

.gtm-step-card__link {
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--gtm-gold);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 0.4em;
    margin-top: auto;
    padding-top: 0.75rem;
    border-top: 1px solid rgba(212,164,71,0.22);
}
.gtm-step-card__link:hover { color: var(--gtm-gold-hover); }

@media (max-width: 1024px) {
    .gtm-step-ladder { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
    .gtm-step-ladder { grid-template-columns: 1fr; }
    .gtm-step-card { min-height: 0; }
}

/* =========================================================
   LAYER STRIP — compact three-layer explanation used on the
   Program page's "Bygget av moduler" section. Conceptual bridge
   to /moduler/, not a repeat of the full live module grid.
   Reusable wherever a short Fundament/Account motion/Operating
   system explanation is needed.
   ========================================================= */
.gtm-layer-strip {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.25rem;
    margin: 2rem 0;
}

.gtm-layer-strip__item {
    background: rgba(14,45,44,0.03);
    border: 1px solid rgba(14,45,44,0.08);
    border-radius: var(--gtm-radius-md);
    padding: 1.5rem;
}

.gtm-layer-strip__number {
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: var(--gtm-tracking-wide);
    text-transform: uppercase;
    color: var(--gtm-gold-deep);
    margin: 0 0 0.625rem;
}

.gtm-layer-strip__title {
    font-size: 1.0625rem;
    font-weight: 700;
    color: var(--gtm-teal);
    line-height: 1.25;
    margin: 0 0 0.5rem;
}

.gtm-layer-strip__desc {
    font-size: 0.875rem;
    color: var(--gtm-ink-muted);
    line-height: 1.6;
    margin: 0;
}

@media (max-width: 900px) {
    .gtm-layer-strip { grid-template-columns: 1fr; }
}

/* =========================================================
   VALUE CARDS — used on the Teardown page's "Hva dere sitter
   igjen med" section. Three outcome-focused cards, WHAT the
   buyer gains clarity on — never HOW the work is done.
   Reusable anywhere a short 3-outcome block is needed.
   ========================================================= */
.gtm-value-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.25rem;
    margin: 2rem 0;
}

.gtm-value-card {
    background: var(--gtm-off-white);
    border: 1px solid rgba(14,45,44,0.09);
    border-radius: var(--gtm-radius-md);
    padding: 1.75rem;
}

.gtm-value-card__number {
    font-size: 1.75rem;
    font-weight: 800;
    letter-spacing: -0.03em;
    color: rgba(212,164,71,0.55);
    line-height: 1;
    margin: 0 0 0.875rem;
}

.gtm-value-card__title {
    font-size: 1.0625rem;
    font-weight: 700;
    color: var(--gtm-teal);
    line-height: 1.3;
    margin: 0 0 0.5rem;
}

.gtm-value-card__desc {
    font-size: 0.9375rem;
    color: var(--gtm-ink-muted);
    line-height: 1.65;
    margin: 0;
}

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

/* Dark-section variant — same structure, inverted surface. Used on the
   Homepage operator/proof section where the band sits on deep teal. */
.gtm-value-cards--dark .gtm-value-card {
    background: rgba(255,255,255,0.045);
    border-color: rgba(255,255,255,0.1);
}
.gtm-value-cards--dark .gtm-value-card__number { color: var(--gtm-gold); }
.gtm-value-cards--dark .gtm-value-card__title  { color: var(--gtm-off-white); }
.gtm-value-cards--dark .gtm-value-card__desc   { color: rgba(249,245,238,0.7); }

/* =========================================================
   CARD BLOCK — simple padded container wrapping an existing
   list component (e.g. .gtm-fit-list) so it reads as an
   intentional block rather than floating text. Generic/reusable.
   ========================================================= */
.gtm-card-block {
    background: var(--gtm-off-white);
    border: 1px solid rgba(14,45,44,0.09);
    border-radius: var(--gtm-radius-md);
    padding: 2rem clamp(1.5rem, 4vw, 2.5rem);
}

/* =========================================================
   MINI STEPS — compact four-segment step indicator showing
   "you are here" within the four-step Program ladder, without
   duplicating the full Program page. Used on the Teardown page's
   "Sammenheng med Program" section.
   ========================================================= */
.gtm-mini-steps {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
    margin: 1.75rem 0;
}

.gtm-mini-step {
    flex: 1 1 120px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.09);
    border-radius: var(--gtm-radius-md);
    padding: 0.875rem 1rem;
}

.gtm-mini-step__number {
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    color: rgba(249,245,238,0.5);
    display: block;
    margin-bottom: 0.25rem;
}

.gtm-mini-step__label {
    font-size: 0.8125rem;
    font-weight: 600;
    color: rgba(249,245,238,0.75);
    line-height: 1.3;
}

.gtm-mini-step--current {
    background: rgba(212,164,71,0.14);
    border-color: var(--gtm-gold);
}
.gtm-mini-step--current .gtm-mini-step__number { color: var(--gtm-gold); }
.gtm-mini-step--current .gtm-mini-step__label { color: var(--gtm-off-white); }

@media (max-width: 640px) {
    .gtm-mini-step { flex-basis: calc(50% - 0.375rem); }
}

/* =========================================================
   PHASE BADGE — single module hero + related modules
   wp:post-terms block renders as <div class="taxonomy-fas gtm-phase-badge wp-block-post-terms">
   Link inside must inherit badge color, not global link color.
   ========================================================= */
.wp-block-post-terms.gtm-phase-badge {
    display: inline-flex !important;
    align-items: center;
    gap: 0.5em;
    padding: 0.45em 1.1em;
    background: transparent;
    border: 1.5px solid var(--gtm-gold);
    border-radius: var(--gtm-radius-pill);
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: var(--gtm-tracking-wide);
    text-transform: uppercase;
    color: var(--gtm-gold);
    width: fit-content;
    max-width: 100%;
    margin-bottom: 1.25rem;
}

/* The inner <a> must inherit the badge's color — not the global link teal */
.wp-block-post-terms.gtm-phase-badge a {
    color: inherit !important;
    text-decoration: none !important;
}

.wp-block-post-terms.gtm-phase-badge a:hover {
    color: var(--gtm-gold-hover) !important;
    text-decoration: none !important;
}

/* Dark-background context (hero): gold already correct */
.gtm-dark .wp-block-post-terms.gtm-phase-badge,
[style*="background-color:#0E2D2C"] .wp-block-post-terms.gtm-phase-badge,
[style*="background-color:#1A3A39"] .wp-block-post-terms.gtm-phase-badge {
    border-color: var(--gtm-gold);
    color: var(--gtm-gold);
}

@media (max-width: 1024px) {
    /* .gtm-module-layer__grid intentionally not overridden here — the
       auto-fit/minmax rule above already reflows column count naturally
       at every width, count-agnostically. Fixing it to repeat(2,1fr)
       would reintroduce a hardcoded-count assumption at this breakpoint. */
    .gtm-module-layer__header { column-gap: 1.25rem; }
}
@media (max-width: 640px) {
    /* Same reasoning — grid reflows to 1 column naturally below ~600px
       once even a single 280px-min track no longer fits two-wide. */
    .gtm-module-layer__header { grid-template-columns: 1fr; }
    .gtm-module-layer__number { grid-row: auto; font-size: 2rem; }
}

/* =========================================================
   INNSIKT — CATEGORY FILTER NAV
   ========================================================= */
.gtm-innsikt-filter {
    background: var(--gtm-off-white);
    border-top: 1px solid rgba(14,45,44,0.07);
    border-bottom: 1px solid rgba(14,45,44,0.07);
}

.gtm-innsikt-filter__scroll {
    max-width: var(--gtm-width-wide);
    margin-inline: auto;
    padding-inline: var(--gtm-page-padding);
    display: flex;
    gap: 0;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}
.gtm-innsikt-filter__scroll::-webkit-scrollbar { display: none; }

.gtm-innsikt-filter__link {
    display: inline-block;
    padding: 0.9rem 1.25rem;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--gtm-ink-subtle);
    text-decoration: none;
    white-space: nowrap;
    border-bottom: 2px solid transparent;
    transition: color var(--gtm-transition), border-color var(--gtm-transition);
    flex-shrink: 0;
}
.gtm-innsikt-filter__link:hover {
    color: var(--gtm-teal);
    border-bottom-color: rgba(14,45,44,0.2);
}
.gtm-innsikt-filter__link.is-active {
    color: var(--gtm-teal);
    border-bottom-color: var(--gtm-teal);
    font-weight: 700;
}

/* =========================================================
   INNSIKT — EDITORIAL ARCHIVE (single card system)
   ---------------------------------------------------------
   Replaces two competing implementations: the original lead-card block
   and a later override layer. The lead card broke because it set
   `flex-direction: row` on a card whose children were not wrapped, so the
   category, image, headline, excerpt and footer each became a column —
   the headline clipped off the right edge and most of the card stood empty.

   Both archive templates (home.html for /innsikt/, archive.html for
   category pages) now share identical card markup:
     image (optional) -> content [ category -> headline -> excerpt -> footer ]

   Rules:
   - Cards size to their content (grid align-items:start). No fixed or
     minimum heights, so a text-only card is never stretched into an empty
     box to match its neighbour.
   - Images keep the 16:9 ratio WordPress sets inline, everywhere, so
     cropping is consistent and nothing has to fight an inline style.
   - Posts without a featured image are styled text-led via WordPress's own
     `has-post-thumbnail` post class — no empty media slot, no stock fallback.
   - The first post is the editorial lead: full width, image left ~42%,
     content right. Positional and data-free, so it works at 1 post or 100.
   ========================================================= */

/* Grid */
.gtm-innsikt-grid.wp-block-post-template {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(1.25rem, 2.5vw, 2rem);
    align-items: start;
    margin: 0;
    padding: 0;
    list-style: none;
}
.gtm-innsikt-grid.wp-block-post-template > .wp-block-post { margin: 0; min-width: 0; }

/* Card */
.gtm-innsikt-grid .gtm-innsikt-card {
    display: flex;
    flex-direction: column;
    gap: 0;
    height: auto;
    background: var(--gtm-off-white);
    border: 1px solid rgba(14,45,44,0.09);
    border-radius: var(--gtm-radius-md);
    overflow: hidden;
    transition: border-color var(--gtm-transition), box-shadow var(--gtm-transition);
}
.gtm-innsikt-grid .gtm-innsikt-card:hover {
    border-color: rgba(14,45,44,0.18);
    box-shadow: 0 10px 28px rgba(14,45,44,0.08);
}
.gtm-innsikt-grid .gtm-innsikt-card > * { margin: 0; }

/* Media */
.gtm-innsikt-card .gtm-innsikt-card__image { margin: 0; line-height: 0; }
.gtm-innsikt-card .gtm-innsikt-card__image a { display: block; }
.gtm-innsikt-card .gtm-innsikt-card__image img {
    display: block;
    width: 100%;
    height: auto;
    object-fit: cover;
    border-radius: 0;
}

/* Content column */
.gtm-innsikt-card .gtm-innsikt-card__content {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: clamp(1.25rem, 2.5vw, 1.625rem);
    min-width: 0;
}
.gtm-innsikt-card .gtm-innsikt-card__content > * { margin: 0; }

/* Category kicker — the index rule, not a grey pill */
.gtm-innsikt-card .wp-block-post-terms {
    display: flex;
    align-items: center;
    gap: 0.55em;
    background: none;
    border: 0;
    border-radius: 0;
    padding: 0;
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: var(--gtm-tracking-wide);
    text-transform: uppercase;
    color: var(--gtm-gold-deep);
}
.gtm-innsikt-card .wp-block-post-terms::before {
    content: "";
    flex: none;
    width: 3px;
    align-self: stretch;
    min-height: 0.8em;
    background: var(--gtm-gold);
}
.gtm-innsikt-card .wp-block-post-terms a { color: inherit; text-decoration: none; }
.gtm-innsikt-card .wp-block-post-terms a:hover { color: var(--gtm-teal); }
.gtm-innsikt-card .wp-block-post-terms .wp-block-post-terms__separator { opacity: 0.5; }

/* Headline — never clipped */
.gtm-innsikt-card .wp-block-post-title {
    font-size: clamp(1.125rem, 1.6vw, 1.3125rem);
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: -0.015em;
    color: var(--gtm-teal);
    text-wrap: balance;
    overflow-wrap: anywhere;
}
.gtm-innsikt-card .wp-block-post-title a { color: inherit; text-decoration: none; }
.gtm-innsikt-card .wp-block-post-title a:hover { color: var(--gtm-gold-deep); }

/* Excerpt */
.gtm-innsikt-card .wp-block-post-excerpt {
    font-size: 0.9375rem;
    line-height: 1.65;
    color: var(--gtm-ink-muted);
}
.gtm-innsikt-card .wp-block-post-excerpt p {
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Footer */
.gtm-innsikt-card .gtm-innsikt-card__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-top: 0.25rem;
    padding-top: 0.875rem;
    border-top: 1px solid rgba(14,45,44,0.08);
}
.gtm-innsikt-card .gtm-innsikt-card__footer > * { margin: 0; }
.gtm-innsikt-card .wp-block-post-date,
.gtm-innsikt-card .wp-block-post-date time {
    font-size: 0.75rem;
    color: var(--gtm-ink-subtle);
    font-variant-numeric: tabular-nums;
}
.gtm-innsikt-card .gtm-innsikt-card__cta {
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: var(--gtm-tracking-wide);
    text-transform: uppercase;
    color: var(--gtm-teal);
    white-space: nowrap;
}

/* Text-led card: a post without a featured image. Deliberate, not missing. */
.gtm-innsikt-grid > .wp-block-post:not(.has-post-thumbnail) .gtm-innsikt-card {
    border-top: 3px solid var(--gtm-gold);
}
.gtm-innsikt-grid > .wp-block-post:not(.has-post-thumbnail) .gtm-innsikt-card__content {
    padding-top: clamp(1.5rem, 3vw, 2rem);
}
.gtm-innsikt-grid > .wp-block-post:not(.has-post-thumbnail) .wp-block-post-title {
    font-size: clamp(1.25rem, 2vw, 1.5rem);
}

/* Editorial lead — first post, full width */
.gtm-archive-grid.wp-block-post-template > .wp-block-post:first-child { grid-column: 1 / -1; }
.gtm-archive-grid > .wp-block-post:first-child .wp-block-post-title {
    font-size: clamp(1.375rem, 2.4vw, 2rem);
    line-height: 1.2;
    letter-spacing: -0.025em;
}
.gtm-archive-grid > .wp-block-post:first-child .wp-block-post-excerpt p { -webkit-line-clamp: 4; }

@media (min-width: 900px) {
    /* With an image: image left, content right. Height follows content. */
    .gtm-archive-grid > .wp-block-post.has-post-thumbnail:first-child .gtm-innsikt-card {
        display: grid;
        grid-template-columns: minmax(0, 42fr) minmax(0, 58fr);
        align-items: center;
    }
    .gtm-archive-grid > .wp-block-post.has-post-thumbnail:first-child .gtm-innsikt-card__content {
        padding: clamp(1.75rem, 3vw, 2.75rem);
    }
    /* Without an image: a text-led feature with a readable measure. */
    .gtm-archive-grid > .wp-block-post:not(.has-post-thumbnail):first-child .gtm-innsikt-card__content {
        max-width: 46rem;
        padding: clamp(2rem, 4vw, 3rem);
    }
}

/* Single column on small screens; everything stacks in DOM order. */
@media (max-width: 700px) {
    .gtm-innsikt-grid.wp-block-post-template { grid-template-columns: minmax(0, 1fr); }
}
/* =========================================================
   SHARED GRID UTILITIES
   Used across archive and CPT query blocks.
   All use !important to override WP inline grid-template-columns.
   ========================================================= */

/* Generic card grid — for static HTML grids in patterns */
.gtm-card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr));
    gap: 1.5rem;
}

/* WP post-template grid override — for dynamic wp:query + wp:post-template */
.gtm-query-grid.wp-block-post-template {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr)) !important;
    gap: 1.5rem !important;
    list-style: none;
    margin: 0;
    padding: 0;
}

/* Featured card — first child spans full width in a 2-col grid */
.gtm-featured-card.wp-block-post-template > li:first-child {
    grid-column: 1 / -1;
}

@media (max-width: 860px) {
    .gtm-card-grid { grid-template-columns: 1fr; }
    .gtm-query-grid.wp-block-post-template { grid-template-columns: 1fr !important; }
    .gtm-featured-card.wp-block-post-template > li:first-child { grid-column: 1; }
}

/* =========================================================
   HOMEPAGE — specific component overrides
   ========================================================= */

/* Trust dots: single inline line in hero */
.gtm-hero-trust {
    margin-top: 2.5rem !important;
    margin-bottom: 0 !important;
    letter-spacing: 0.01em;
}

/* ScaleupXQ quote block */
.gtm-quote-hero {
    border-left: none !important;
    padding-left: 0 !important;
    margin: 0;
}
.gtm-quote-hero p {
    font-size: clamp(1.375rem, 2.5vw, 1.875rem);
    line-height: 1.58;
    font-weight: 500;
    color: var(--gtm-off-white);
}
.gtm-quote-hero cite {
    display: block;
    margin-top: 1.5rem;
    font-style: normal;
    font-size: 0.875rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: rgba(249,245,238,0.6);
}

/* SAGP phase cards — responsive columns */
.gtm-sagp-phases {
    gap: 1.25rem !important;
}
@media (max-width: 900px) {
    .gtm-sagp-phases {
        flex-wrap: wrap !important;
    }
    .gtm-sagp-phases .wp-block-column {
        flex-basis: 100% !important;
        min-width: 0 !important;
    }
}

/* Homepage Fra feltet insight grid */
.gtm-home-insights-grid.wp-block-post-template {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr)) !important;
    gap: 1.5rem !important;
    list-style: none;
    margin: 0;
    padding: 0;
}

/* Homepage insight card hover */
.gtm-home-insight-card {
    height: 100%;
    transition: box-shadow var(--gtm-transition), transform var(--gtm-transition);
}
.gtm-home-insight-card:hover {
    box-shadow: var(--gtm-shadow-md);
    transform: translateY(-2px);
}

/* =========================================================
   VISUAL CONTENT TOOLKIT (Cluster A4)
   ---------------------------------------------------------
   Five primitives that let evidence, artifacts and people appear
   on a page at all. Before these, the theme could only express
   itself through type, cards and background bands — which is why
   every new page started to look like the last one.

   All of them are styling for NATIVE blocks. Nothing here renders
   content from PHP: the image, alt text, caption, quote and copy
   are ordinary block content, edited in WordPress like any other
   page. Applied either via a registered block style (visible in the
   block sidebar) or the block's Additional CSS class field.
   ========================================================= */

/* --- A. FIGURE ------------------------------------------------
   core/image with a caption. Adds a source/note line via an
   optional nested paragraph with .gtm-figure__source.           */
.gtm-figure { margin: 2.5rem 0; }
.gtm-figure img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: var(--gtm-radius-md);
    border: 1px solid rgba(14,45,44,0.09);
}
.gtm-figure figcaption,
.gtm-figure .wp-element-caption {
    font-size: 0.875rem;
    line-height: 1.55;
    color: var(--gtm-ink-muted);
    margin-top: 0.75rem;
    padding-left: 0.875rem;
    border-left: 2px solid var(--gtm-gold);
    text-align: left;
}
.gtm-figure__source {
    font-size: 0.75rem;
    letter-spacing: 0.02em;
    color: var(--gtm-ink-subtle);
    margin-top: 0.375rem;
}
/* Dark sections invert the caption treatment. */
.gtm-dark .gtm-figure img,
.gtm-section.has-background[style*="#0E2D2C"] .gtm-figure img { border-color: rgba(255,255,255,0.12); }
.gtm-dark .gtm-figure figcaption,
.gtm-dark .gtm-figure .wp-element-caption { color: rgba(249,245,238,0.7); }

/* --- B. MEDIA SPLIT / PORTRAIT --------------------------------
   core/columns (image column + text column). Stacks on mobile in
   DOM order, so the image never strands its caption.            */
/* Self-sufficient on purpose: WordPress only enqueues the core columns
   stylesheet on pages that actually contain a columns block, so a component
   relying on it would silently collapse to a single stacked column on any page
   where it is the only columns usage. Verified at 1440px. */
.gtm-media-split {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: clamp(1.75rem, 4vw, 3.5rem);
}
.gtm-media-split > .wp-block-column {
    flex: 1 1 min(320px, 100%);
    min-width: 0;
}
.gtm-media-split img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: var(--gtm-radius-md);
}
.gtm-media-split--portrait img { aspect-ratio: 4 / 5; object-fit: cover; }
@media (max-width: 780px) {
    .gtm-media-split { gap: 1.75rem; }
    .gtm-media-split > .wp-block-column { flex-basis: 100%; }
    .gtm-media-split--portrait img { aspect-ratio: 3 / 2; }
}

/* --- C. EDITORIAL PULL QUOTE ----------------------------------
   Registered as a block style on core/quote, so it appears in the
   block sidebar as "Editorial" rather than needing a class typed
   by hand.                                                       */
.wp-block-quote.is-style-gtm-editorial {
    border: none;
    border-top: 2px solid var(--gtm-gold);
    padding: 1.75rem 0 0;
    margin: 2.75rem 0;
    max-width: 34ch;
}
.wp-block-quote.is-style-gtm-editorial p {
    font-size: clamp(1.25rem, 2.6vw, 1.75rem);
    line-height: 1.42;
    font-weight: 500;
    letter-spacing: -0.015em;
    color: var(--gtm-teal);
    margin: 0 0 0.875rem;
}
.wp-block-quote.is-style-gtm-editorial cite {
    font-style: normal;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--gtm-ink-subtle);
}
.gtm-dark .wp-block-quote.is-style-gtm-editorial p { color: var(--gtm-off-white); }
.gtm-dark .wp-block-quote.is-style-gtm-editorial cite { color: rgba(249,245,238,0.55); }

/* --- D. CONCEPTUAL EXPLAINER ----------------------------------
   A labelled frame for a diagram built from real blocks. The
   meaning stays in HTML text inside it — never baked into an
   image — so it remains readable, translatable and searchable.  */
.gtm-explainer {
    background: var(--gtm-off-white);
    border: 1px solid rgba(14,45,44,0.09);
    border-radius: var(--gtm-radius-md);
    padding: clamp(1.5rem, 4vw, 2.25rem);
    margin: 2.5rem 0;
}
.gtm-explainer__label {
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: var(--gtm-tracking-wide);
    text-transform: uppercase;
    color: var(--gtm-gold-deep);
    margin: 0 0 1.125rem;
}
.gtm-explainer__note {
    font-size: 0.8125rem;
    color: var(--gtm-ink-subtle);
    margin: 1.125rem 0 0;
    padding-top: 0.875rem;
    border-top: 1px solid rgba(14,45,44,0.08);
}
.gtm-dark .gtm-explainer {
    background: rgba(255,255,255,0.045);
    border-color: rgba(255,255,255,0.1);
}
.gtm-dark .gtm-explainer__label { color: var(--gtm-gold); }
.gtm-dark .gtm-explainer__note {
    color: rgba(249,245,238,0.6);
    border-top-color: rgba(255,255,255,0.1);
}

/* --- E. FEATURED IMAGE SURFACING ------------------------------
   Styling for core/post-featured-image wherever a template chooses
   to render it. Deliberately no template rewiring here — that
   belongs to the page clusters.                                  */
.gtm-featured-image img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: var(--gtm-radius-md);
}
.gtm-featured-image--card img {
    aspect-ratio: 16 / 10;
    object-fit: cover;
    border-radius: var(--gtm-radius-md);
}

/* Toolkit components are wp:group/columns blocks, so the same
   WordPress flow-margin injection documented above applies. */
.gtm-explainer > *,
.gtm-figure > * { margin-block-start: 0; }

/* =========================================================
   GRAIN — printed-paper texture on large fills
   ---------------------------------------------------------
   The design system treats flat fills as off-brand: large teal and cream
   surfaces carry a subtle grain. Applied here as an extra background-image
   layer rather than the reference implementation's ::before overlay, because
   these surfaces are WordPress block groups whose background-COLOUR arrives
   from an inline style. Layering the image keeps the inline colour intact and
   avoids colliding with pseudo-elements already used by several components.
   ========================================================= */
.gtm-grain,
.gtm-dark,
.site-header,
.site-footer,
.gtm-section.has-background,
.gtm-section--sm.has-background {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.18 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
    background-repeat: repeat;
}

/* Components that paint their own surface stay flat — the grain belongs to the
   large section fills behind them, not to every card on top. */
.gtm-value-card,
.gtm-step-card,
.gtm-layer-strip__item,
.gtm-card-block,
.gtm-explainer,
.gtm-module-card {
    background-image: none;
}

/* =========================================================
   SECTION BOUNDARIES — full-bleed sections must touch
   ---------------------------------------------------------
   WordPress global styles apply
     :root :where(.is-layout-flow) > * { margin-block-start: <blockGap> }
   which at blockGap 2.5rem put a 40px margin between every direct child of
   a flow container. Our full-bleed sections already carry 64px of their own
   padding, so that margin rendered as a blank horizontal band of page
   background between each pair of coloured sections — measured on Teardown,
   Moduler, Om GoToMarket and Innsikt, including header->hero and
   closing->footer.

   Fixed at the structural level, not per page:
     - sections never carry an outer flow margin, whatever contains them
     - direct children of the page-level flow containers touch

   `.entry-content:not(.gtm-article-body)` is load-bearing: wp:post-content
   renders BOTH classes on the same element, so zeroing `.entry-content > *`
   alone also flattened article paragraph rhythm from 40px to 0. Article and
   list spacing inside prose is deliberately untouched.
   ========================================================= */
.gtm-section,
.gtm-section--sm,
.gtm-hero,
.gtm-final-cta,
.gtm-innsikt-filter,
.site-header,
.site-footer {
    margin-block-start: 0;
    margin-block-end: 0;
}

.wp-site-blocks > * {
    margin-block-start: 0;
    margin-block-end: 0;
}

.entry-content:not(.gtm-article-body) > *,
main.wp-block-group > * {
    margin-block-start: 0;
}



/* =========================================================
   STEP LADDER — light-surface variant
   ---------------------------------------------------------
   The step cards were built for the dark Program hero band. About needs the
   same four-step system on cream, so the surface and text tokens are
   re-bound rather than a second component being written.
   ========================================================= */
.gtm-step-ladder--light .gtm-step-card {
    background: var(--gtm-off-white);
    border-color: rgba(14,45,44,0.09);
    border-top-color: rgba(212,164,71,0.55);
}
.gtm-step-ladder--light .gtm-step-card:hover {
    background: #fff;
    border-top-color: var(--gtm-gold);
}
.gtm-step-ladder--light .gtm-step-card__number { color: rgba(212,164,71,0.75); }
.gtm-step-ladder--light .gtm-step-card__role   { color: var(--gtm-gold-deep); }
.gtm-step-ladder--light .gtm-step-card__meta    { color: var(--gtm-ink-subtle); }
.gtm-step-ladder--light .gtm-step-card__title  { color: var(--gtm-teal); }
.gtm-step-ladder--light .gtm-step-card__desc   { color: var(--gtm-ink-muted); }
.gtm-step-ladder--light .gtm-step-card--linked {
    background: #fff;
    border-top-color: var(--gtm-gold);
}

/* =========================================================
   VALUE CARDS — two-column variant
   ---------------------------------------------------------
   For an even, balanced grid where a three-column row would leave a ragged
   trailing gap (e.g. five principles on About).
   ========================================================= */
.gtm-value-cards--two { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 900px) {
    .gtm-value-cards--two { grid-template-columns: 1fr; }
}

/* =========================================================
   LEAD FORM — reusable HubSpot form panel
   ---------------------------------------------------------
   Used as a page's conversion destination (Teardown first). Styled to sit on
   a dark section: the HubSpot iframe-free embed inherits our type, so labels
   and inputs are restyled here rather than in HubSpot's own editor.
   ========================================================= */
.gtm-leadform { max-width: 560px; margin-inline: auto; }

.gtm-leadform__panel {
    background: var(--gtm-off-white);
    border: 1px solid rgba(14,45,44,0.09);
    border-radius: var(--gtm-radius-md);
    padding: clamp(1.5rem, 4vw, 2.25rem);
}

/* HubSpot markup — scoped so it only affects our embed. */
.gtm-leadform .hs-form-field { margin-bottom: 1.125rem; }
.gtm-leadform .hs-form-field > label {
    display: block;
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    color: var(--gtm-teal);
    margin-bottom: 0.4rem;
}
.gtm-leadform .hs-form-field .hs-field-desc {
    font-size: 0.75rem;
    color: var(--gtm-ink-subtle);
    margin-bottom: 0.4rem;
}
.gtm-leadform input[type="text"],
.gtm-leadform input[type="email"],
.gtm-leadform input[type="tel"],
.gtm-leadform textarea,
.gtm-leadform select {
    width: 100%;
    box-sizing: border-box;
    font: inherit;
    font-size: 1rem;              /* >=16px stops iOS zooming on focus */
    color: var(--gtm-teal);
    background: #fff;
    border: 1px solid rgba(14,45,44,0.18);
    border-radius: var(--gtm-radius-sm);
    padding: 0.7rem 0.85rem;
    min-height: 44px;             /* touch target */
    transition: border-color var(--gtm-transition), box-shadow var(--gtm-transition);
}
.gtm-leadform textarea { min-height: 96px; resize: vertical; }
.gtm-leadform input:focus,
.gtm-leadform textarea:focus,
.gtm-leadform select:focus {
    outline: none;
    border-color: var(--gtm-gold);
    box-shadow: 0 0 0 3px rgba(212,164,71,0.22);
}
.gtm-leadform .hs-button {
    -webkit-appearance: none;
    appearance: none;
    display: inline-block;
    width: 100%;
    cursor: pointer;
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--gtm-teal);
    background: var(--gtm-gold);
    border: none;
    border-radius: var(--gtm-radius-pill);
    padding: 0.95rem 2rem;
    min-height: 48px;
    transition: background var(--gtm-transition);
}
.gtm-leadform .hs-button:hover { background: var(--gtm-gold-hover, #B8902E); }
.gtm-leadform .hs-error-msg,
.gtm-leadform .hs-error-msgs label {
    font-size: 0.75rem;
    color: #A2402F;
}
.gtm-leadform .legal-consent-container,
.gtm-leadform .hs-richtext {
    font-size: 0.75rem;
    line-height: 1.55;
    color: var(--gtm-ink-subtle);
}

/* Confirmation state — replaces the form in place. */
.gtm-leadform__done { text-align: center; }
.gtm-leadform__done-title {
    font-size: 1.125rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--gtm-teal);
    margin: 0 0 0.5rem;
}
.gtm-leadform__done-body {
    font-size: 0.9375rem;
    line-height: 1.65;
    color: var(--gtm-ink-muted);
    margin: 0 0 1.25rem;
}
.gtm-leadform__done-link {
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--gtm-gold-deep);
}

.gtm-leadform__setup {
    background: #fff3cd;
    border: 1px solid #ffc107;
    border-radius: var(--gtm-radius-md);
    padding: 1.25rem;
    font-size: 0.875rem;
    color: #664d03;
}
.gtm-leadform__setup p { margin: 0; }
.gtm-leadform__noscript {
    font-size: 0.8125rem;
    color: rgba(249,245,238,0.7);
    text-align: center;
}

/* Lead form fallback — shown when the form is not configured yet, or when
   the HubSpot script is blocked. Same panel, so the conversion section never
   renders empty. */
.gtm-leadform__fallback { text-align: center; }
.gtm-leadform__fallback p {
    font-size: 0.9375rem;
    line-height: 1.65;
    color: var(--gtm-ink-muted);
    margin: 0 0 1rem;
}
.gtm-leadform__fallback .gtm-leadform__fallback-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.75rem 1.5rem;
    margin: 0;
}
.gtm-leadform__fallback-mail {
    font-weight: 600;
    color: var(--gtm-teal);
}
/* The panel is light even inside a .gtm-dark section, so `.gtm-dark a` (gold)
   must not win here: gold on the cream panel is too faint to read. */
.gtm-leadform__panel a.gtm-leadform__fallback-mail,
.gtm-leadform__panel a.gtm-leadform__done-link { color: var(--gtm-teal); }

/* Compact hero — archive pages, where the reader came for the articles and
   the hero should frame them rather than push them below the fold. */
.gtm-hero.gtm-hero--compact { padding-block: clamp(3rem, 6vw, 5rem); }
.gtm-hero--compact .gtm-eyebrow { margin-bottom: 1.25rem; }
.gtm-hero--compact .wp-block-heading { margin-bottom: 1rem; }
/* No max-width here: inside WordPress's constrained layout a narrower child
   gets margin:auto and centres itself, indenting the intro past the H1. The
   760px content width is already a readable measure. */
.gtm-hero--compact p:last-child { margin-bottom: 0; }
.gtm-hero--compact h1 { text-wrap: balance; }

/* Category strip sits between hero and grid; give the grid section a
   tighter top so the first card is close to the filters. */
.gtm-innsikt-filter + .gtm-section,
.gtm-innsikt-filter ~ .gtm-section.gtm-light { padding-top: clamp(2rem, 4vw, 3rem); }

/* Category archive hero: query-title renders the H1, term-description the
   intro. Match the /innsikt/ hero rhythm. */
.gtm-hero--compact .wp-block-query-title { margin-bottom: 1rem; text-wrap: balance; }
.gtm-hero--compact .wp-block-term-description p { margin: 0; }

/* =========================================================
   PATTERN LIBRARY — small additions for library sections
   ========================================================= */
/* "Siste innsikt" on landing pages: three across on wide screens. */
@media (min-width: 1000px) {
    .gtm-innsikt-grid--three.wp-block-post-template { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
/* Article helpers: list text on the dark takeaways box. */
.gtm-key-takeaways li { color: rgba(249,245,238,0.88); }
/* Value cards adapt when an editor removes cards: two cards fill the row,
   one card stays a readable width. Three or more keep the grid above. */
.gtm-value-cards:has(> :nth-child(2):last-child) { grid-template-columns: repeat(2, 1fr); }
.gtm-value-cards:has(> :only-child) { grid-template-columns: minmax(0, 36rem); }
@media (max-width: 900px) {
    .gtm-value-cards:has(> :nth-child(2):last-child) { grid-template-columns: 1fr; }
}

/* =========================================================
   MODULE PAGE (single-moduler) — aligned with Program/Teardown
   ---------------------------------------------------------
   Hero and body share one 820px column so every left edge lines up; body
   copy uses the same type scale as the page sections elsewhere (17px/1.8
   muted ink, 2rem section headings with a gold rule) instead of article
   prose; related modules reuse the /moduler/ card.
   ========================================================= */
.gtm-module-hero__meta { gap: 0.75rem; margin-bottom: 1.75rem; }
.gtm-module-hero__context { font-size: 0.8125rem; color: rgba(249,245,238,0.55); margin: 0; }
.gtm-module-hero h1 { font-size: clamp(2.25rem, 5vw, 3.75rem); line-height: 1.08; letter-spacing: -0.035em; margin: 0 0 1.5rem; text-wrap: balance; }
.gtm-module-hero__lead { font-size: clamp(1.0625rem, 2vw, 1.25rem); line-height: 1.72; color: rgba(249,245,238,0.80); margin: 0 0 2.5rem; }
.gtm-module-hero__lead p { margin: 0; }
.gtm-module-hero .wp-block-post-excerpt__more-text { display: none; }

.gtm-article-body.gtm-module-body { max-width: 820px; margin-inline: auto; font-size: 1.0625rem; line-height: 1.8; color: #4A5E5D; }
.gtm-module-body > * { margin-block: 0; }
.gtm-module-body > * + * { margin-block-start: 1.25rem; }
.gtm-module-body > h2 {
    margin-block-start: 3.5rem;
    font-size: clamp(1.5rem, 3vw, 2rem);
    font-weight: 700;
    letter-spacing: -0.025em;
    line-height: 1.2;
    color: var(--gtm-teal);
}
.gtm-module-body > h2::before {
    content: '';
    display: block;
    width: 2.5rem;
    height: 2px;
    background: var(--gtm-gold);
    margin-bottom: 1.25rem;
}
.gtm-module-body > h2 + * { margin-block-start: 1rem; }
.gtm-module-body > h3 { margin-block-start: 2.25rem; color: var(--gtm-teal); }
.gtm-module-body > .gtm-explainer,
.gtm-module-body > .wp-block-quote { margin-block: 2.5rem; }
/* The opening "Systemlag: …" line reads as a label, not body copy. */
.gtm-module-body > .gtm-module-layer-line {
    font-size: 0.875rem;
    color: var(--gtm-ink-subtle);
    padding-left: 0.875rem;
    border-left: 2px solid var(--gtm-gold);
}

.gtm-related-modules.wp-block-post-template { gap: 1.25rem; margin-top: 2rem; }
.gtm-related-modules .gtm-module-card { height: 100%; }
.gtm-module-card .wp-block-post-title { margin: 0; font-size: 1.0625rem; }
.gtm-module-card .wp-block-post-title a { color: inherit; text-decoration: none; }
.gtm-module-card .wp-block-post-title a:hover { color: var(--gtm-gold-deep); }
.gtm-module-card .wp-block-post-excerpt__excerpt { margin: 0; }
.gtm-module-card .wp-block-post-excerpt__more-text { display: none; }
.gtm-module-card .wp-block-read-more { margin-top: auto; }
/* Cards space their children with gap; WordPress's flow margin would add 40px on top. */
.gtm-module-card > * { margin-block: 0; }

/* Mini steps on light bands (e.g. "Hvordan modulene brukes" on /moduler/).
   The component was built for dark bands; on cream its near-white text was
   invisible. Re-bound here so existing content is fixed without a reseed. */
.gtm-light .gtm-mini-step,
.gtm-mini-steps--light .gtm-mini-step {
    background: var(--gtm-off-white);
    border-color: rgba(14,45,44,0.1);
}
.gtm-light .gtm-mini-step__number,
.gtm-mini-steps--light .gtm-mini-step__number { color: var(--gtm-gold-deep); }
.gtm-light .gtm-mini-step__label,
.gtm-mini-steps--light .gtm-mini-step__label { color: var(--gtm-teal); }
/* Near-white text set inline on a light band is never intended — it is a
   dark-band colour carried over. Inline styles need !important to override. */
.gtm-light .has-text-color[style*="color:rgba(249,245,238"] { color: #4A5E5D !important; }

/* =========================================================
   EXPLAINERS — visual figures built from ordinary blocks
   ---------------------------------------------------------
   Every label is real, editable text (paragraphs, headings, lists); CSS only
   draws surfaces, chips, connectors and layout. Nothing is text-in-image, so
   the meaning is readable, searchable and translatable, and an editor changes
   a role or a question in the normal block editor.
   ========================================================= */
.gtm-figure-caption {
    font-size: 0.8125rem;
    line-height: 1.55;
    color: var(--gtm-ink-subtle);
    margin: 1.25rem 0 0;
    padding-left: 0.875rem;
    border-left: 2px solid var(--gtm-gold);
}
.gtm-dark .gtm-figure-caption { color: rgba(249,245,238,0.6); }
.gtm-committee > *, .gtm-committee__panel > *, .gtm-committee__account > *,
.gtm-research > *, .gtm-research__lane > *,
.gtm-system-map > *, .gtm-system-map__layers > *, .gtm-system-map__layer > *, .gtm-system-map__core > *,
.gtm-operator > *, .gtm-operator__text > * { margin-block: 0; }

/* --- Role chips (shared by committee + research) --------------- */
.gtm-role {
    display: inline-flex;
    align-items: center;
    gap: 0.5em;
    margin: 0;
    padding: 0.5rem 0.875rem;
    border-radius: var(--gtm-radius-pill);
    border: 1px dashed rgba(14,45,44,0.28);
    background: transparent;
    color: var(--gtm-ink-subtle);
    font-size: 0.8125rem;
    font-weight: 600;
    line-height: 1.2;
}
.gtm-role::before { content: ''; width: 0.5rem; height: 0.5rem; border-radius: 50%; border: 1.5px solid currentColor; flex: none; }
.gtm-role--reached { border-style: solid; border-color: var(--gtm-teal); background: var(--gtm-teal); color: var(--gtm-off-white); }
.gtm-role--reached::before { background: var(--gtm-gold); border-color: var(--gtm-gold); }
.gtm-role--influenced { border-style: solid; border-color: rgba(212,164,71,0.7); background: rgba(212,164,71,0.14); color: var(--gtm-teal); }
.gtm-role--influenced::before { background: linear-gradient(90deg, var(--gtm-gold) 50%, transparent 50%); border-color: var(--gtm-gold); }

/* --- 1A. Buying committee: today vs. with a marketing system ------ */
.gtm-committee { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; margin-top: 2.5rem; }
.gtm-committee__panel {
    background: var(--gtm-off-white);
    border: 1px solid rgba(14,45,44,0.1);
    border-radius: var(--gtm-radius-lg);
    padding: clamp(1.25rem, 3vw, 2rem);
    display: flex; flex-direction: column; gap: 1rem;
}
.gtm-committee__panel--system { border-color: rgba(212,164,71,0.55); box-shadow: var(--gtm-shadow-sm); }
.gtm-committee__label { font-size: 0.6875rem; font-weight: 700; letter-spacing: var(--gtm-tracking-wide); text-transform: uppercase; color: var(--gtm-gold-deep); }
.gtm-committee__account { border-top: 1px solid rgba(14,45,44,0.1); padding-top: 1rem; display: flex; flex-direction: column; gap: 0.875rem; }
.gtm-committee__account-name { font-size: 1.0625rem; font-weight: 700; color: var(--gtm-teal); letter-spacing: -0.01em; }
.gtm-committee__roles { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.gtm-committee__note { font-size: 0.9375rem; line-height: 1.6; color: var(--gtm-ink-muted); margin-top: auto; }
.gtm-committee__legend { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 0.5rem 1.25rem; align-items: center; }
.gtm-committee__legend .gtm-role { padding: 0.25rem 0; border: none; background: none; color: var(--gtm-ink-muted); font-weight: 500; }
.gtm-committee__legend .gtm-role--reached::before { background: var(--gtm-teal); border-color: var(--gtm-teal); }
.gtm-committee__legend .gtm-role--influenced::before { background: linear-gradient(90deg, var(--gtm-gold) 50%, transparent 50%); }
.gtm-committee + .gtm-figure-caption, .gtm-committee .gtm-figure-caption { grid-column: 1 / -1; margin-top: 0; }
@media (max-width: 760px) { .gtm-committee { grid-template-columns: minmax(0, 1fr); } }

/* --- 2. Four-step journey on the existing step ladder -------------- */
.gtm-step-ladder--journey { padding-top: 1.75rem; }
.gtm-step-ladder--journey::before {
    content: ''; position: absolute; left: 0; right: 0; top: 0.5rem; height: 2px;
    background: linear-gradient(90deg, var(--gtm-gold) 0 25%, rgba(212,164,71,0.35) 25% 100%);
}
.gtm-step-ladder--journey .gtm-step-card::before {
    content: ''; position: absolute; top: -1.6rem; left: 1.75rem; width: 0.75rem; height: 0.75rem; border-radius: 50%;
    background: var(--gtm-teal); border: 2px solid rgba(212,164,71,0.6);
}
.gtm-step-ladder--journey .gtm-step-card--linked::before { background: var(--gtm-gold); border-color: var(--gtm-gold); box-shadow: 0 0 0 4px rgba(212,164,71,0.22); }
.gtm-step-ladder--light.gtm-step-ladder--journey .gtm-step-card::before { background: var(--gtm-off-white); }
.gtm-step-ladder--light.gtm-step-ladder--journey .gtm-step-card--linked::before { background: var(--gtm-gold); }
.gtm-step-ladder--journey .gtm-step-card:not(:last-child)::after {
    content: '→'; position: absolute; right: -1.15rem; top: 50%; transform: translateY(-50%);
    font-size: 1rem; color: var(--gtm-gold); z-index: 1;
}
@media (max-width: 1100px) {
    .gtm-step-ladder--journey::before { display: none; }
    .gtm-step-ladder--journey .gtm-step-card::before, .gtm-step-ladder--journey .gtm-step-card::after { display: none; }
    .gtm-step-ladder--journey { padding-top: 0; }
}

/* --- 3. Three layers around the existing sales engine -------------- */
.gtm-system-map { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.42fr); gap: 0; margin-top: 2.5rem; align-items: stretch; }
.gtm-system-map__layers { display: flex; flex-direction: column; gap: 0.75rem; }
.gtm-system-map__layer {
    position: relative; display: grid; grid-template-columns: 5.5rem minmax(0, 1fr); gap: 0.25rem 1rem; align-items: baseline;
    background: var(--gtm-off-white); border: 1px solid rgba(14,45,44,0.1); border-left: 3px solid var(--gtm-gold);
    border-radius: var(--gtm-radius-md); padding: 1.125rem 1.5rem; margin-right: 2.5rem;
}
.gtm-system-map__layer::after { content: ''; position: absolute; right: -2.55rem; top: 50%; width: 2.5rem; height: 2px; background: rgba(212,164,71,0.7); }
.gtm-system-map__layer--1 { margin-left: 0; }
.gtm-system-map__layer--2 { margin-left: 1.25rem; }
.gtm-system-map__layer--3 { margin-left: 2.5rem; }
.gtm-system-map__number { grid-row: span 3; font-size: 0.6875rem; font-weight: 700; letter-spacing: var(--gtm-tracking-wide); text-transform: uppercase; color: var(--gtm-gold-deep); }
.gtm-system-map__title { font-size: 1.125rem; font-weight: 700; color: var(--gtm-teal); letter-spacing: -0.01em; }
.gtm-system-map__desc { font-size: 0.9375rem; line-height: 1.6; color: var(--gtm-ink-muted); }
.gtm-system-map__effect { font-size: 0.8125rem; font-weight: 600; color: var(--gtm-teal); }
.gtm-system-map__effect::before { content: '→ '; color: var(--gtm-gold); }
.gtm-system-map__core {
    background: var(--gtm-teal); color: var(--gtm-off-white); border-radius: var(--gtm-radius-lg);
    padding: clamp(1.5rem, 3vw, 2.25rem); display: flex; flex-direction: column; justify-content: center; gap: 0.75rem;
}
.gtm-system-map__core-label { font-size: 0.6875rem; font-weight: 700; letter-spacing: var(--gtm-tracking-wide); text-transform: uppercase; color: var(--gtm-gold); }
.gtm-system-map__core-title { font-size: 1.375rem; font-weight: 700; letter-spacing: -0.02em; color: var(--gtm-off-white); }
.gtm-system-map__core-desc { font-size: 0.9375rem; line-height: 1.6; color: rgba(249,245,238,0.75); }
@media (max-width: 860px) {
    .gtm-system-map { grid-template-columns: minmax(0, 1fr); gap: 1.25rem; }
    .gtm-system-map__core { order: -1; }
    .gtm-system-map__layer { margin: 0 !important; grid-template-columns: minmax(0, 1fr); }
    .gtm-system-map__layer::after { display: none; }
    .gtm-system-map__number { grid-row: auto; }
}

/* --- 4. Operator: portrait + short text + role timeline ------------ */
.gtm-operator { align-items: center; }
.gtm-operator .wp-block-image img { aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 25%; border-radius: var(--gtm-radius-lg); }
.gtm-operator__text { display: flex; flex-direction: column; gap: 1.125rem; }
.gtm-operator__note { font-size: 0.875rem; color: rgba(249,245,238,0.6); }
.gtm-light .gtm-operator__note, .has-background:not(.gtm-dark) .gtm-operator__note { color: var(--gtm-ink-subtle); }
/* Links in the operator text («Mer om Gregory Gjini →»): teal on light
   sections, gold on dark ones like other dark-section links. A section is dark
   by class (.gtm-dark) or by an inline brand-dark background (the Forside
   operator section), which the light rule above cannot tell apart. */
.gtm-operator__text a { color: var(--gtm-teal); }
.gtm-section:is(.gtm-dark, [style*="#0E2D2C" i], [style*="#1A3A39" i]) .gtm-operator .gtm-operator__text a { color: var(--gtm-gold); }
.gtm-section:is(.gtm-dark, [style*="#0E2D2C" i], [style*="#1A3A39" i]) .gtm-operator .gtm-operator__note { color: rgba(249,245,238,0.6); }
.gtm-timeline { list-style: none; margin: 0.5rem 0 0; padding: 0; position: relative; }
.gtm-timeline::before { content: ''; position: absolute; left: 0.3rem; top: 0.5rem; bottom: 0.5rem; width: 2px; background: rgba(212,164,71,0.45); }
.gtm-timeline li { position: relative; padding: 0 0 1rem 1.75rem; font-size: 0.9375rem; line-height: 1.55; }
.gtm-timeline li:last-child { padding-bottom: 0; }
.gtm-timeline li::before { content: ''; position: absolute; left: 0; top: 0.4rem; width: 0.75rem; height: 0.75rem; border-radius: 50%; background: var(--gtm-gold); box-shadow: 0 0 0 3px rgba(212,164,71,0.2); }
.gtm-timeline li strong { display: block; font-weight: 700; }
@media (max-width: 780px) {
    .gtm-operator .wp-block-image img { aspect-ratio: 3 / 2; object-position: 50% 20%; }
}

/* --- 5A. Pre-pipeline research: one lane per role ------------------- */
.gtm-research { margin-top: 2.5rem; display: grid; grid-template-columns: minmax(0, 1fr) 11rem; gap: 0 1.25rem; }
.gtm-research__head { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr) 11rem; column-gap: 1.25rem; padding-bottom: 0.75rem; }
.gtm-research__head-lane { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.7fr) minmax(0, 1.1fr); gap: 1rem; padding: 0 1.25rem; }
.gtm-research__head-lane > *, .gtm-research__head > *, .gtm-research__lanes > *, .gtm-research__who > *, .gtm-research__dialog > * { margin-block: 0; }
.gtm-research__head-lane p:nth-child(2) { text-align: center; }
.gtm-research__head p { font-size: 0.6875rem; font-weight: 700; letter-spacing: var(--gtm-tracking-wide); text-transform: uppercase; color: var(--gtm-gold-deep); }
.gtm-research__lanes { display: flex; flex-direction: column; gap: 0.75rem; }
.gtm-research__lane {
    display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.7fr) minmax(0, 1.1fr); gap: 1rem; align-items: center;
    background: var(--gtm-off-white); border: 1px solid rgba(14,45,44,0.1); border-radius: var(--gtm-radius-md); padding: 1rem 1.25rem;
}
.gtm-research__who { display: flex; flex-direction: column; gap: 0.5rem; align-items: flex-start; }
.gtm-research__question { font-size: 0.9375rem; line-height: 1.5; color: var(--gtm-teal); font-style: italic; }
.gtm-research__channel { justify-self: center; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.04em; color: var(--gtm-teal); background: rgba(212,164,71,0.16); border: 1px solid rgba(212,164,71,0.6); border-radius: var(--gtm-radius-pill); padding: 0.375rem 0.75rem; position: relative; white-space: nowrap; }
.gtm-research__channel::before, .gtm-research__channel::after { content: ''; position: absolute; top: 50%; width: 1rem; height: 1px; background: rgba(212,164,71,0.8); }
.gtm-research__channel::before { right: 100%; }
.gtm-research__channel::after { left: 100%; }
.gtm-research__finding { font-size: 0.875rem; line-height: 1.55; color: var(--gtm-ink-muted); }
.gtm-research__dialog {
    background: var(--gtm-teal); color: var(--gtm-off-white); border-radius: var(--gtm-radius-md); padding: 1.25rem;
    display: flex; flex-direction: column; justify-content: center; gap: 0.5rem; position: relative;
}
.gtm-research__dialog::before { content: ''; position: absolute; left: -1.25rem; top: 1rem; bottom: 1rem; width: 2px; background: repeating-linear-gradient(180deg, var(--gtm-gold) 0 6px, transparent 6px 12px); }
.gtm-research__dialog-label { font-size: 0.6875rem; font-weight: 700; letter-spacing: var(--gtm-tracking-wide); text-transform: uppercase; color: var(--gtm-gold); }
.gtm-research__dialog-text { font-size: 0.9375rem; line-height: 1.5; }
@media (max-width: 960px) {
    .gtm-research { grid-template-columns: minmax(0, 1fr); gap: 1rem; }
    .gtm-research__head { display: none; }
    .gtm-research__lane { grid-template-columns: minmax(0, 1fr); gap: 0.625rem; }
    .gtm-research__channel { justify-self: start; }
    .gtm-research__channel::before, .gtm-research__channel::after { display: none; }
    .gtm-research__dialog::before { display: none; }
}


.gtm-direct-answer > * { margin-block: 0; }
.gtm-operator > .wp-block-column { align-self: center; }
.gtm-committee__legend + * , .gtm-committee .gtm-figure-caption { margin-top: 0.25rem; }

/* =========================================================
   CASE PAGE (single-caser) — same system as module pages
   ========================================================= */
.gtm-case-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr)); gap: 1.25rem 2rem; }
.gtm-case-facts__item { display: flex; flex-direction: column; gap: 0.375rem; }
.gtm-case-facts__label { margin: 0; font-size: 0.6875rem; font-weight: 700; letter-spacing: var(--gtm-tracking-wide); text-transform: uppercase; color: var(--gtm-gold-deep); }
.gtm-case-facts__value { margin: 0; font-size: 0.9375rem; font-weight: 500; line-height: 1.5; color: var(--gtm-teal); }
.gtm-case-modules { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0 0 2.5rem; }
.gtm-case-modules .gtm-role { text-decoration: none; }
.gtm-case-modules .gtm-role:hover { border-color: var(--gtm-gold); }
.gtm-case-cta__text { font-size: 1.0625rem; line-height: 1.8; color: var(--gtm-ink-muted); }
.gtm-module-hero .gtm-breadcrumb-nav { margin-bottom: 1.5rem; font-size: 0.8125rem; }
.gtm-resource-form__intro { color: rgba(249,245,238,0.75); }
.gtm-resource-form__privacy { font-size: 0.8125rem; color: rgba(249,245,238,0.55); margin-top: 1.25rem; }
.gtm-resource-form__eyebrow { justify-content: center; }
.gtm-resource-form__intro, .gtm-resource-form__privacy { text-align: center; }

/* FAQ (core/details): the question styling the Assessment FAQ used to carry
   inline — core/details has no style attributes for <summary>. */
.wp-block-details > summary { font-weight: 700; font-size: 1.125rem; color: #0E2D2C; }

/* Cookie information notice (inc/cookie-notice.php) — information only. */
.gtm-notice {
    position: fixed; z-index: 99990; left: 1rem; bottom: 1rem; box-sizing: border-box;
    width: min(30rem, calc(100vw - 2rem));
    display: flex; gap: 1rem; align-items: flex-end;
    background: var(--gtm-teal); color: var(--gtm-off-white);
    border: 1px solid rgba(212,164,71,0.45); border-radius: var(--gtm-radius-lg);
    box-shadow: var(--gtm-shadow-lg); padding: 1rem 1.25rem;
    font-size: 0.875rem; line-height: 1.55;
}
.gtm-notice[hidden] { display: none; }
.gtm-notice__text { margin: 0; color: rgba(249,245,238,0.88); }
.gtm-notice__text a { color: var(--gtm-gold); }
.gtm-notice__close {
    flex: none; cursor: pointer; font: inherit; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
    padding: 0.6em 1.2em; border-radius: var(--gtm-radius-pill);
    background: transparent; color: var(--gtm-off-white); border: 1.5px solid rgba(249,245,238,0.7);
}
.gtm-notice__close:hover, .gtm-notice__close:focus-visible { background: var(--gtm-off-white); color: var(--gtm-teal); outline: none; }

/* Very small phones (< 360px): long Norwegian words in page H1s («Byggeklossene»)
   must not split mid-word. Overrides the blocks' inline clamp() only here. */
@media (max-width: 359px) {
    h1.wp-block-heading, h1.wp-block-post-title { font-size: min(2.25rem, 10vw) !important; }
}