@charset "UTF-8";
/* =============================================================================
   BRIKK — 2026 design system
   =============================================================================

   The single stylesheet for the redesigned brikk.dk. When the redesign is
   complete this file replaces, and allows the deletion of:

     assets/css/brikk.css       (277 KB minified legacy bundle + its scss/ source)
     assets/css/form.css
     css/*                      (bootstrap/general/generalse/style — already dead)
     fonts/fonts.css            (Avenir — the old typeface, unused in the redesign)

   Out of scope: themes/brikk/heatmap/css/* — the heatmap pages are a separate,
   self-contained world and keep their own styling.

   Rollout status
   --------------
   Loaded ONLY on funnel pages (page template "funnel-template.php"), where the
   old brikk.css + form.css are dequeued. Everything else still runs the old CSS.
   See brikk_is_redesigned_page() / brikk_enqueue_styles_scripts() in functions.php.

   Architecture
   ------------
   Sections 1–11 are the FOUNDATION: everything global that any page relies on.
   Section 12 is where reusable COMPONENTS accumulate as the redesign is ported
   (site chrome, heroes, pricing, FAQ, …). Page-scoped work (like the funnel,
   section 13) comes last so it can lean on everything above it.

   1.  Fonts
   2.  Design tokens
   3.  Reset
   4.  Base typography
   5.  Layout
   6.  Primitives (eyebrow, titles, buttons, links, check)
   7.  Forms
   8.  Long-form content flow (.brikk-flow — editor/Gutenberg output)
   9.  WordPress core classes (alignments, captions, screen-reader-text)
   10. Utilities & accessibility
   11. Vendor — minimal slick carousel core (funnel calendar)
   12. Components (site chrome & sections — grows during milestones 2–3)
   13. The booking funnel (milestone 1, page-scoped)

   Conventions
   -----------
   - All custom properties and classes are prefixed `brikk-`; components are
     named `.brikk-block`, elements `.brikk-block__element`, modifiers
     `.brikk-block--modifier` (matches the A/B design's vocabulary).
   - Use tokens, not literals: colours, type sizes, spacing, z-index and motion
     all come from section 2. A raw hex/px value in a component is a smell —
     the only sanctioned literals are one-off geometry (positioning offsets)
     and self-documenting gradients.
   - No `!important`. This file owns the page; nothing needs out-specifying.
     (Single sanctioned exception: the reduced-motion kill switch in §10.)
   - Breakpoints (CSS variables cannot be used in media queries, so these are
     fixed values used consistently throughout):
         1024px  tablet    (paired min/max queries use 1024.98px on the max side
                            so fractional zoom widths never fall between them)
          768px  small tablet — type/gutter only, never section rhythm
          640px  mobile
          420px  small mobile
         1500px  (min-width) the single wide-screen enhancement
     (The A/B file's 1170px was nav scaffolding, not a design breakpoint — dropped.)
   - The DESIGN REFERENCE lives next to this file: assets/css/DESIGN.md. It holds
     the full role tables (type, colour, spacing, components) distilled from the
     A/B test, the canonical values where that file disagreed with itself, and
     the new-section checklist. Consult it before building any section.
   - When porting a section out of the A/B plugin's landing.css: drop the
     .brikk-ab-page/.brikk-ab-template scoping, drop every !important, move the
     values onto tokens (DESIGN.md §9 lists the canonical value where the A/B
     file drifts), and re-home assets into the theme (see CLAUDE.md §6).
   ============================================================================= */


/* =============================================================================
   1. FONTS
   -----------------------------------------------------------------------------
   Self-hosted from assets/fonts/. Cormorant Garamond is a variable font (OFL,
   licence included alongside it); Helvetica Neue ships as four static weights.

   TODO(perf): these are .ttf/.otf originals — ~3.4 MB total. Converting to
   .woff2 would cut that by roughly 80%. Needs fonttools installed; see CLAUDE.md.
   ============================================================================= */

   @font-face {
    font-family: 'Cormorant Garamond';
    src: url('../fonts/cormorant-garamond/CormorantGaramond-VariableFont_wght.ttf') format('truetype-variations'),
    url('../fonts/cormorant-garamond/CormorantGaramond-VariableFont_wght.ttf') format('truetype');
    font-weight: 300 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Cormorant Garamond';
    src: url('../fonts/cormorant-garamond/CormorantGaramond-Italic-VariableFont_wght.ttf') format('truetype-variations'),
    url('../fonts/cormorant-garamond/CormorantGaramond-Italic-VariableFont_wght.ttf') format('truetype');
    font-weight: 300 700;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Helvetica Neue Local';
    src: url('../fonts/helvetica-neue/HelveticaNeueLight.otf') format('opentype');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Helvetica Neue Local';
    src: url('../fonts/helvetica-neue/HelveticaNeueRoman.otf') format('opentype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Helvetica Neue Local';
    src: url('../fonts/helvetica-neue/HelveticaNeueMedium.otf') format('opentype');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Helvetica Neue Local';
    src: url('../fonts/helvetica-neue/HelveticaNeueBold.otf') format('opentype');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

/* Text-field variant of the sans with CORRECTED vertical metrics.
   The OTFs declare ascender 714 (≈ cap height) while Å's ring reaches 952 and
   Ø/å/digit overshoots exceed 714 — and browsers clip a text field's inner
   editor to the font's declared ascent/descent box, so field text loses its
   top pixels and Å renders ringless no matter what the CSS box allows.
   The overrides only re-declare the metrics (96% covers Å, 22% covers the
   214-unit descenders); everything else keeps 'Helvetica Neue Local' so the
   design's verified baseline geometry is untouched. Used via
   --brikk-font-input on input/textarea/select in §7 only. */
@font-face {
    font-family: 'Helvetica Neue Input';
    src: url('../fonts/helvetica-neue/HelveticaNeueLight.otf') format('opentype');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
    ascent-override: 96%;
    descent-override: 22%;
}

@font-face {
    font-family: 'Helvetica Neue Input';
    src: url('../fonts/helvetica-neue/HelveticaNeueRoman.otf') format('opentype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
    ascent-override: 96%;
    descent-override: 22%;
}

@font-face {
    font-family: 'Helvetica Neue Input';
    src: url('../fonts/helvetica-neue/HelveticaNeueMedium.otf') format('opentype');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
    ascent-override: 96%;
    descent-override: 22%;
}

@font-face {
    font-family: 'Helvetica Neue Input';
    src: url('../fonts/helvetica-neue/HelveticaNeueBold.otf') format('opentype');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
    ascent-override: 96%;
    descent-override: 22%;
}


/* =============================================================================
   2. DESIGN TOKENS
   ============================================================================= */

   :root {
    /* --- Type families ---------------------------------------------------- */
    --brikk-font-serif: 'Cormorant Garamond', 'Times New Roman', Times, serif;
    --brikk-font-sans: 'Helvetica Neue Local', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    /* Same face, corrected vertical metrics — text fields only (see §1). */
    --brikk-font-input: 'Helvetica Neue Input', 'Helvetica Neue', Helvetica, Arial, sans-serif;

    /* --- Colour ----------------------------------------------------------- */
    --brikk-bg: #f5f2ee;            /* warm off-white page canvas */
    --brikk-card: #ffffff;          /* ELEVATED surfaces only (featured card, overlays) */
    --brikk-card-soft: #fbfaf8;     /* the standard card on the beige canvas (DESIGN.md §4) */
    --brikk-dark: #1a1a1a;          /* primary text */
    --brikk-dark-2: #2b2b2b;        /* dark panels */
    --brikk-muted: #6b6b6b;         /* secondary text */
    --brikk-line: #e6e0d4;          /* warm hairline */
    --brikk-line-2: #efe9dd;        /* lighter hairline */
    --brikk-line-dark: #c9c4ba;     /* stronger hairline (inactive UI, underlines) */
    --brikk-purple: #6a2cdb;        /* brand / primary action */
    --brikk-purple-hover: #5e25c9;
    --brikk-purple-soft: #f0edfb;   /* tinted background */
    --brikk-purple-tint: #ede7ff;   /* outline-button hover */
    --brikk-green: #00b67a;         /* Trustpilot green */
    --brikk-gold: var(--brikk-green); /* landing.css legacy name — keeps straight ports working */
    --brikk-error: #c0392b;

    /* Text on saturated/brand surfaces (purple buttons, selection). */
    --brikk-on-accent: #ffffff;

    /* Text and hairlines on DARK surfaces (image panels, dark bands like the
       A/B design's .brikk-inc-why / .brikk-midcta — reuse these when porting). */
       --brikk-on-dark: #ffffff;
       --brikk-on-dark-muted: rgba(255, 255, 255, 0.78);
       --brikk-on-dark-faint: rgba(255, 255, 255, 0.62);
       --brikk-on-dark-line: rgba(255, 255, 255, 0.28);

       /* Backdrop behind modals/popups. */
       --brikk-scrim: rgba(26, 26, 26, 0.55);

       /* --- Type scale ------------------------------------------------------- */
    /* Fluid sizes are lifted from the A/B design. `display` approximates the
       landing hero, which is 74px on desktop and steps down per breakpoint. */
       --brikk-fs-display: clamp(38px, 5.6vw, 74px);
       --brikk-fs-h1: clamp(36px, 4.4vw, 52px);
       --brikk-fs-h2: clamp(32px, 4.4vw, 56px);
       --brikk-fs-h3: clamp(26px, 3.4vw, 46px);
       --brikk-fs-h4: clamp(22px, 2.4vw, 30px);
       --brikk-fs-h5: 20px;
       --brikk-fs-h6: 17px;

       --brikk-fs-body: 16px;          /* base */
       --brikk-fs-body-sm: 15px;       /* section leads, dense copy */
       --brikk-fs-ui: 13px;            /* labels, meta, list items */
       --brikk-fs-ui-sm: 12px;         /* buttons, nav */
       --brikk-fs-eyebrow: 11.5px;
       --brikk-fs-micro: 10.5px;

       /* --- Line height ------------------------------------------------------ */
       --brikk-lh-tight: 1.05;         /* serif headings */
       --brikk-lh-heading: 1.15;       /* small headings */
       --brikk-lh-base: 1.4;           /* global default */
       --brikk-lh-copy: 1.6;           /* body paragraphs */

       /* --- Letter spacing --------------------------------------------------- */
       --brikk-ls-heading: -0.01em;    /* serif headings tighten slightly */
       --brikk-ls-ui: 0.2em;           /* buttons, uppercase UI */
       --brikk-ls-eyebrow: 0.34em;     /* wide-tracked eyebrows */
       --brikk-ls-nav: 0.16em;

       /* --- Layout ----------------------------------------------------------- */
       --brikk-max: 1600px;            /* container max width */
       --brikk-max-narrow: 1200px;
       --brikk-pad-x: 65px;            /* container gutter; steps down responsively */
       --brikk-measure: 620px;         /* comfortable reading width */

       /* --- Spacing scale ---------------------------------------------------- */
       --brikk-space-1: 4px;
       --brikk-space-2: 8px;
       --brikk-space-3: 12px;
       --brikk-space-4: 16px;
       --brikk-space-5: 24px;
       --brikk-space-6: 32px;
       --brikk-space-7: 48px;
       --brikk-space-8: 64px;
       --brikk-space-9: 96px;

       /* Vertical rhythm between full-width sections. */
       --brikk-section-y: 96px;

       /* --- Shape ------------------------------------------------------------ */
       /* The design is deliberately square-edged. Keep these at 0. */
       --brikk-radius: 0px;
       --brikk-radius-lg: 0px;
       --brikk-radius-pill: 999px;     /* only for genuinely circular elements */
       --brikk-border: 1px solid var(--brikk-line);

       /* --- Z-index scale ----------------------------------------------------- */
    /* Every positioned layer takes one of these; never invent ad-hoc values.
       Fine-grained ordering inside a band: calc(var(--brikk-z-chrome) + 1). */
       --brikk-z-raised: 1;            /* lifted above siblings (panels, arrows) */
       --brikk-z-chrome: 10;           /* fixed page furniture (bars, step rails) */
       --brikk-z-nav: 100;             /* the future site navigation */
       --brikk-z-modal: 1000;          /* popups, dialogs, scrims */

       /* --- Motion ----------------------------------------------------------- */
       --brikk-transition: 160ms ease;

       /* --- Component tokens -------------------------------------------------- */
       /* Scoped per component but declared here so every knob is discoverable. */
       --brikk-funnel-panel: min(45vw, 800px);   /* funnel: fixed image panel width (design: 45%) */
    --brikk-funnel-step-active: #9871e3;      /* funnel: active step circle on the dark panel
                                                 (design value — brand purple lifted ~32% toward
                                                 white for contrast against the photo) */
    --brikk-funnel-line: #d6d3d4;             /* funnel: NEUTRAL grey hairline. The design draws
                                                 funnel field/cell borders cool-grey (#dadadb
                                                 cells, #d3d2d4 inputs, #d6d3d1 mobile bars) —
                                                 not the warm site hairline. */
    --brikk-funnel-placeholder: #b8b6ba;      /* funnel: field placeholder grey (design ≈ #bcbabd,
                                                 far lighter than the muted text grey) */
                                                 --brikk-on-dark-fill: rgba(255, 255, 255, 0.17); /* completed-step circle fill on the panel */
                                             }

                                             @media (max-width: 1024px) {
                                                :root {
                                                    --brikk-pad-x: 32px;
                                                    --brikk-section-y: 72px;
                                                }
                                            }

                                            @media (max-width: 768px) {
                                                :root {
                                                    --brikk-pad-x: 24px;
                                                }
                                            }

                                            @media (max-width: 640px) {
                                                :root {
                                                    --brikk-pad-x: 20px;
                                                    --brikk-section-y: 56px;
                                                }
                                            }


/* =============================================================================
   3. RESET
   -----------------------------------------------------------------------------
   Deliberately assertive: this file is the only stylesheet on the pages it
   loads on, so there is no inherited browser styling worth preserving.
   ============================================================================= */

   *,
   *::before,
   *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    border: 0;
}

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

body {
    background: var(--brikk-bg);
    color: var(--brikk-dark);
    font-family: var(--brikk-font-sans);
    font-size: var(--brikk-fs-body);
    font-weight: 400;
    line-height: var(--brikk-lh-base);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    /* Catches the .alignfull 100vw scrollbar overhang. ⚠ Makes body a clip
       container: position:sticky inside body will not stick. If milestone 2+
       needs sticky UI, move this clip to a layout wrapper instead. */
       overflow-x: hidden;
   }

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

ul,
ol {
    list-style: none;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
}

/* Kept out of the img/video reset on purpose: height:auto would collapse
   iframes. Width containment only, so embeds can't overflow small screens. */
   iframe {
    max-width: 100%;
}

hr {
    height: 1px;
    background: var(--brikk-line);
    border: 0;
}


/* =============================================================================
   4. BASE TYPOGRAPHY
   ============================================================================= */

   h1,
   h2,
   h3,
   h4,
   h5,
   h6,
   .brikk-serif {
    font-family: var(--brikk-font-serif);
    font-weight: 500;
    line-height: var(--brikk-lh-tight);
    letter-spacing: var(--brikk-ls-heading);
    color: var(--brikk-dark);
    text-wrap: balance;
}

h1 { font-size: var(--brikk-fs-h1); }
h2 { font-size: var(--brikk-fs-h2); }
h3 { font-size: var(--brikk-fs-h3); }
h4 { font-size: var(--brikk-fs-h4); line-height: var(--brikk-lh-heading); }
h5 { font-size: var(--brikk-fs-h5); line-height: var(--brikk-lh-heading); }
h6 { font-size: var(--brikk-fs-h6); line-height: var(--brikk-lh-heading); }

p {
    line-height: var(--brikk-lh-copy);
    text-wrap: pretty;
}

a {
    color: inherit;
    text-decoration: none;
    transition: color var(--brikk-transition);
}

strong,
b {
    font-weight: 500;
}

small {
    font-size: var(--brikk-fs-ui);
}

::selection {
    background: var(--brikk-purple);
    color: var(--brikk-on-accent);
}


/* =============================================================================
   5. LAYOUT
   ============================================================================= */

   .brikk-container {
    width: 100%;
    max-width: var(--brikk-max);
    margin-inline: auto;
    padding-inline: var(--brikk-pad-x);
}

.brikk-container--narrow {
    max-width: var(--brikk-max-narrow);
}

.brikk-section {
    padding-block: var(--brikk-section-y);
}


/* =============================================================================
   6. PRIMITIVES
   ============================================================================= */

/* --- Eyebrow: tiny wide-tracked uppercase label above a heading ------------ */
.brikk-eyebrow {
    display: inline-block;
    font-family: var(--brikk-font-sans);
    font-size: var(--brikk-fs-eyebrow);
    font-weight: 500;
    letter-spacing: var(--brikk-ls-eyebrow);
    text-transform: uppercase;
    color: var(--brikk-muted);
}

/* Eyebrows tighten on small screens — at .34em tracking an 11.5px eyebrow wraps
   awkwardly under ~640px. The design applies this to EVERY eyebrow, so it lives
   on the primitive rather than being repeated per component. */
@media (max-width: 640px) {
    .brikk-eyebrow {
        font-size: var(--brikk-fs-micro);
        letter-spacing: .28em;
    }
}

/* --- Section heading + lead ----------------------------------------------- */
.brikk-section-title {
    font-family: var(--brikk-font-serif);
    font-size: var(--brikk-fs-h2);
    font-weight: 500;
    line-height: var(--brikk-lh-tight);
    letter-spacing: var(--brikk-ls-heading);
    color: var(--brikk-dark);
}

.brikk-section-lead {
    max-width: var(--brikk-measure);
    font-size: var(--brikk-fs-body-sm);
    line-height: var(--brikk-lh-copy);
    color: var(--brikk-muted);
}

/* --- Buttons --------------------------------------------------------------- */
.brikk-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--brikk-space-2);
    /* Asymmetric padding: the uppercase sans sits optically high in its box. */
    padding: 17px 22px 14px;
    border: 1px solid transparent;
    border-radius: var(--brikk-radius);
    font-family: var(--brikk-font-sans);
    font-size: var(--brikk-fs-ui-sm);
    font-weight: 500;
    line-height: 1.3;
    letter-spacing: var(--brikk-ls-ui);
    text-transform: uppercase;
    text-align: center;
    cursor: pointer;
    transition: background var(--brikk-transition),
    color var(--brikk-transition),
    border-color var(--brikk-transition);
}

.brikk-btn--primary {
    background: var(--brikk-purple);
    color: var(--brikk-on-accent);
}

.brikk-btn--primary:hover {
    background: var(--brikk-purple-hover);
    color: var(--brikk-on-accent);
}

.brikk-btn--outline {
    background: transparent;
    color: var(--brikk-purple);
    border-color: var(--brikk-purple);
}

.brikk-btn--outline:hover {
    background: var(--brikk-purple-tint);
}

.brikk-btn--ghost {
    background: transparent;
    color: var(--brikk-dark);
    border-color: var(--brikk-dark);
}

.brikk-btn--ghost:hover {
    background: var(--brikk-dark);
    color: var(--brikk-on-accent);
}

.brikk-btn:disabled,
.brikk-btn[aria-disabled='true'] {
    opacity: 0.45;
    pointer-events: none;
}

/* --- Underlined arrow link ------------------------------------------------- */
.brikk-link-arrow {
    display: inline-flex;
    align-self: flex-start;
    align-items: center;
    gap: var(--brikk-space-2);
    padding-bottom: 2px;
    border-bottom: 1px solid var(--brikk-line-dark);
    font-size: var(--brikk-fs-ui-sm);
    font-weight: 500;
    letter-spacing: var(--brikk-ls-ui);
    text-transform: uppercase;
    color: var(--brikk-dark);
    opacity: 0.6;
    transition: gap var(--brikk-transition), opacity var(--brikk-transition);
}

.brikk-link-arrow:hover {
    gap: var(--brikk-space-3);
    opacity: 1;
}

/* --- Checkmark bullet ------------------------------------------------------ */
/* A circled serif checkmark used in feature and price lists. */
.brikk-check {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    padding-top: 4px;
    border: 1px solid var(--brikk-purple);
    border-radius: var(--brikk-radius-pill);
    font-family: var(--brikk-font-serif);
    font-size: 9px;
    line-height: 1;
    color: var(--brikk-purple);
}


/* =============================================================================
   7. FORMS
   -----------------------------------------------------------------------------
   Base field styling only. Note: the dequeued form.css was Contact Form 7
   styling — .wpcf7-* rules are NOT re-provided yet. Port a slimmed CF7 block
   into §11 Vendor when the first CF7 surface (the exit-intent popup) enters
   the new world.
   ============================================================================= */

   input,
   textarea,
   select,
   button {
    font: inherit;
    color: inherit;
    background: transparent;
    border: 0;
    border-radius: 0;
    outline: 0;
}

button,
input[type='submit'],
input[type='button'] {
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
}

label {
    display: inline-block;
    font-size: var(--brikk-fs-ui);
}

input[type='text'],
input[type='email'],
input[type='tel'],
input[type='number'],
input[type='search'],
input[type='password'],
input[type='url'],
input[type='date'],
textarea,
select {
    width: 100%;
    padding: 15px 16px 13px;
    background: var(--brikk-card);
    border: 1px solid var(--brikk-line);
    border-radius: var(--brikk-radius);
    font-family: var(--brikk-font-input);
    font-size: var(--brikk-fs-body-sm);
    color: var(--brikk-dark);
    transition: border-color var(--brikk-transition);
    /* Kill native chrome (search fields especially: Safari's rounded corners
       and cancel button would override the square hairline look). */
       appearance: none;
       -webkit-appearance: none;
   }

   input[type='search']::-webkit-search-decoration,
   input[type='search']::-webkit-search-cancel-button {
    -webkit-appearance: none;
    display: none;
}

@media (max-width: 1024.98px) {
    /* Field copy is 15px on touch viewports per the design… */
    input[type='text'],
    input[type='email'],
    input[type='tel'],
    input[type='number'],
    input[type='search'],
    input[type='password'],
    input[type='url'],
    input[type='date'],
    textarea,
    select {
        font-size: 15px;
    }

    /* …EXCEPT on iOS: Safari auto-zooms the page when focusing any input
       under 16px and leaves it zoomed. -webkit-touch-callout exists only on
       iOS, so this @supports matches iOS (and nothing else). */
    @supports (-webkit-touch-callout: none) {
        input[type='text'],
        input[type='email'],
        input[type='tel'],
        input[type='number'],
        input[type='search'],
        input[type='password'],
        input[type='url'],
        input[type='date'],
        textarea,
        select {
            font-size: 16px;
        }
    }
}

input:focus,
textarea:focus,
select:focus {
    border-color: var(--brikk-purple);
}

::placeholder {
    color: var(--brikk-muted);
    opacity: 1;
}

textarea {
    min-height: 140px;
    line-height: var(--brikk-lh-copy);
    resize: vertical;
}

select {
    /* Native arrow is removed; the chevron is drawn as a background image so
       the control matches the square, hairline look of the text inputs. */
       appearance: none;
       padding-right: 40px;
       background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%231a1a1a' stroke-width='1.5' d='M1 1.5 6 6.5 11 1.5'/%3E%3C/svg%3E");
       background-repeat: no-repeat;
       background-position: right 16px center;
       cursor: pointer;
   }

   input[type='checkbox'],
   input[type='radio'] {
    width: 16px;
    height: 16px;
    accent-color: var(--brikk-purple);
    cursor: pointer;
}

/* Validation state — matches the class jQuery Validate applies. */
input.error,
textarea.error,
select.error {
    border-color: var(--brikk-error);
}

label.error {
    display: block;
    margin-top: var(--brikk-space-2);
    font-size: var(--brikk-fs-ui-sm);
    color: var(--brikk-error);
}


/* =============================================================================
   8. LONG-FORM CONTENT FLOW
   -----------------------------------------------------------------------------
   The reset in §3 strips ALL margins, which is right for hand-built components
   but wrong for editor output: Gutenberg/long-form content (blog posts, legal
   pages) would collapse into a wall of text. `.brikk-flow` opts a container's
   content back into vertical rhythm and restores the element styling that
   long-form copy needs.

   Everything uses :where() so it has ZERO specificity — any component style
   overrides it with a bare class selector, no fighting.

   NOTE for milestone 3: page.php currently renders the_content() with no
   wrapper element. When Gutenberg pages start landing, either wrap
   the_content() in <div class="brikk-flow"> or extend the selectors here.
   ============================================================================= */

   .brikk-flow {
    --brikk-flow-space: 1.1em;
}

:where(.brikk-flow) > :where(*) + :where(*) {
    margin-top: var(--brikk-flow-space);
}

/* Headings bind to what follows them: generous air above, little below. */
:where(.brikk-flow) > :where(h1, h2, h3, h4, h5, h6) {
    margin-top: calc(var(--brikk-flow-space) * 2);
}

:where(.brikk-flow) > :where(h1, h2, h3, h4, h5, h6) + :where(*) {
    margin-top: 0.65em;
}

/* Restore the list styling the reset removed — inside flowing copy only. */
:where(.brikk-flow) :where(ul) {
    list-style: disc;
    padding-left: 1.3em;
}

:where(.brikk-flow) :where(ol) {
    list-style: decimal;
    padding-left: 1.3em;
}

:where(.brikk-flow) :where(li) + :where(li) {
    margin-top: 0.4em;
}

:where(.brikk-flow) :where(blockquote) {
    padding: var(--brikk-space-4) var(--brikk-space-5);
    border-left: 2px solid var(--brikk-purple);
    background: var(--brikk-card);
    font-family: var(--brikk-font-serif);
    font-size: var(--brikk-fs-h5);
    line-height: 1.45;
}

:where(.brikk-flow) :where(figcaption) {
    margin-top: var(--brikk-space-2);
    font-size: var(--brikk-fs-ui-sm);
    color: var(--brikk-muted);
}

:where(.brikk-flow) :where(a) {
    color: var(--brikk-purple);
    text-decoration: underline;
    text-underline-offset: 2px;
}

:where(.brikk-flow) :where(a):hover {
    color: var(--brikk-purple-hover);
}

:where(.brikk-flow) :where(table) {
    width: 100%;
}

:where(.brikk-flow) :where(pre) {
    padding: var(--brikk-space-4);
    background: var(--brikk-dark);
    color: var(--brikk-on-dark);
    font-size: var(--brikk-fs-ui);
    overflow-x: auto;
}


/* =============================================================================
   9. WORDPRESS CORE CLASSES
   -----------------------------------------------------------------------------
   Classes WordPress emits on editor/theme output. Kept minimal: block-library
   CSS still handles block internals; these cover what a CLASSIC theme must
   provide itself. Wide/full alignments become meaningful at milestone 3, when
   theme.json enables them — the rules are ready.
   ============================================================================= */

   .screen-reader-text {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

/* Skip links (milestone-2 header) must become visible when keyboard-focused. */
.screen-reader-text:focus {
    position: fixed;
    top: var(--brikk-space-3);
    left: var(--brikk-space-3);
    z-index: var(--brikk-z-modal);
    width: auto;
    height: auto;
    padding: var(--brikk-space-3) var(--brikk-space-4);
    clip-path: none;
    background: var(--brikk-card);
    color: var(--brikk-dark);
    font-size: var(--brikk-fs-ui);
}

.alignleft {
    float: left;
    margin: 0 var(--brikk-space-5) var(--brikk-space-4) 0;
}

.alignright {
    float: right;
    margin: 0 0 var(--brikk-space-4) var(--brikk-space-5);
}

.aligncenter {
    display: block;
    margin-inline: auto;
}

/* Inside a constrained flow container, wide/full break out of the measure. */
:where(.brikk-flow) > .alignwide {
    width: 100%;
    max-width: var(--brikk-max-narrow);
    margin-inline: auto;
}

:where(.brikk-flow) > .alignfull {
    width: 100vw;
    max-width: 100vw;
    margin-inline: calc(50% - 50vw);
}

.wp-caption {
    max-width: 100%;
}

.wp-caption-text {
    margin-top: var(--brikk-space-2);
    font-size: var(--brikk-fs-ui-sm);
    color: var(--brikk-muted);
}

/* Theme-check staples — intentionally unstyled, but must exist. */
.sticky {}
.bypostauthor {}


/* =============================================================================
   10. UTILITIES & ACCESSIBILITY
   ============================================================================= */

/* `revert` restores the element's UA default display, so these work on block
   and inline elements alike. */
   .brikk-hide-desktop { display: none; }

   @media (max-width: 640px) {
    .brikk-hide-mobile { display: none; }
    .brikk-hide-desktop { display: revert; }
}

.brikk-text-center { text-align: center; }
.brikk-measure { max-width: var(--brikk-measure); }

/* Visually hidden but available to screen readers. */
.brikk-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

/* Keyboard focus ring. Pointer users never see it; keyboard users always do. */
:focus-visible {
    outline: 2px solid var(--brikk-purple);
    outline-offset: 2px;
}

/* Text fields always match :focus-visible, so the ring would stack on the
   purple :focus border and read as a double border. The border IS their
   focus indicator. */
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
    outline: none;
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}


/* =============================================================================
   11. VENDOR — MINIMAL SLICK CORE
   -----------------------------------------------------------------------------
   The funnel's date carousel is driven by slick (funnel-calendar.js:7). These
   are the structural rules from slick.css that the carousel cannot function
   without; all cosmetics live in the funnel section below. The .slick-dots
   structure is NOT here — add it when a dotted carousel (reviews, sold
   properties) ports at milestone 3.
   ============================================================================= */

   .slick-slider {
    position: relative;
    display: block;
    box-sizing: border-box;
    user-select: none;
    -webkit-touch-callout: none;
    touch-action: pan-y;
}

.slick-list {
    position: relative;
    display: block;
    overflow: hidden;
    margin: 0;
    padding: 0;
}

.slick-list:focus {
    outline: 0;
}

.slick-list.dragging {
    cursor: pointer;
}

.slick-slider .slick-track,
.slick-slider .slick-list {
    transform: translate3d(0, 0, 0);
}

.slick-track {
    position: relative;
    top: 0;
    left: 0;
    display: block;
    margin-inline: auto;
}

.slick-track::before,
.slick-track::after {
    display: table;
    content: '';
}

.slick-track::after {
    clear: both;
}

.slick-slide {
    display: none;
    float: left;
    height: 100%;
    min-height: 1px;
}

.slick-initialized .slick-slide {
    display: block;
}

.slick-arrow.slick-hidden {
    display: none;
}


/* =============================================================================
   12. COMPONENTS — SITE CHROME & SECTIONS
   -----------------------------------------------------------------------------
   Reserved. This is where the reusable pieces of the redesign accumulate:

     12.1  Header / navigation      (milestone 2 — header.php rewrite)
     12.2  Footer                   (milestone 2 — footer.php rewrite)
     12.3  Section components       (milestone 3 — hero, logos strip, features,
           pricing, testimonial, broker search, trust/reviews, marketing,
           results, all-in-one, steps, FAQ, CTA bands, founder, comparison —
           ported one by one from the A/B plugin's landing.css as pages land
           in Gutenberg, following the porting rules in the file header)

   Keep components self-contained, token-driven, and ordered as listed above.

   Ported so far:
     12.3a  Agent search (.brikk-broker) — the postcode → mægler lookup card.
            Markup: [brikk-agent-search] shortcode (brikk-tracking plugin).

   Milestone-2 must-remember globals (legacy provides these today):
     - body scroll lock for the offcanvas (body.brikk-disable-scroll — used by
       assets/js/offcanvas.js)
     - fixed-nav body offset + .logged-in admin-bar offset (32px / 46px ≤782px)
     - a skip link in header.php (styles ready in §9)
     - decide the .brikk-container collision: legacy brikk.css defines it at
       1200px with !important paddings and both files share pages during the
       side-by-side rollout (see CLAUDE.md §8)
   ============================================================================= */


/* -----------------------------------------------------------------------------
   12.3a  AGENT SEARCH  ·  .brikk-broker
   -----------------------------------------------------------------------------
   Postcode → mægler lookup. Rendered by the [brikk-agent-search] shortcode in
   the brikk-tracking plugin; driven by assets/js/agents/agent-search.js, which
   swaps the portrait, name, role, quote and stat columns in place.

   Ported from brikk-design-ab-test/assets/css/landing.css (the .brikk-ab-page
   scope and the shared multi-section selectors are dropped; section rhythm now
   comes from --brikk-section-y, which already steps 96 → 72 → 56).

   The .brikk-broker* class vocabulary is kept deliberately — it is what both
   the JS and the ported design CSS key off. Rename only if both move together.
   -------------------------------------------------------------------------- */

.brikk-broker {
    background: var(--brikk-bg);
    color: var(--brikk-dark);
    padding: var(--brikk-section-y) 0;
}

/* --- head: eyebrow + heading + intro + the postcode form ------------------ */

.brikk-broker__head {
    text-align: center;
    max-width: 720px;
    margin: 0 auto 72px;
}

.brikk-broker--noheader .brikk-broker__head {
    display: none;
}

.brikk-broker__head .brikk-eyebrow {
    display: block;
    margin-bottom: 18px;
}

.brikk-broker__heading {
    font-family: var(--brikk-font-serif);
    font-size: clamp(30px, 3.4vw, 46px);
    font-weight: 500;
    line-height: 1.1;
    letter-spacing: .005em;
    text-wrap: balance;
    margin: 0 0 18px;
}

.brikk-broker__intro {
    color: var(--brikk-muted);
    font-size: var(--brikk-fs-body);
    line-height: 1.7;
    opacity: .85;
    margin: 0 auto 34px;
    max-width: 560px;
}

.brikk-broker__search {
    display: flex;
    align-items: stretch;
    max-width: 440px;
    margin: 0 auto;
    background: var(--brikk-card);
    border: var(--brikk-border);
    padding: 6px;
}

/* The label is present for screen readers only — the placeholder carries the
   visible affordance. Mirrors .screen-reader-text (§9) without coupling to it. */
.brikk-broker__search-label {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Scoped through .brikk-broker__search on purpose: §7 styles input[type='text']
   at specificity (0,1,1), which would otherwise beat a bare class (0,1,0) and
   put a border + 15px type back on this field. The wrapper carries the border. */
.brikk-broker__search .brikk-broker__search-input {
    flex: 1;
    width: auto;
    min-width: 0;
    padding: 14px 18px;
    font-family: var(--brikk-font-input);
    font-size: 14px;
    color: var(--brikk-dark);
    background: transparent;
    border: 0;
    outline: 0;
}

.brikk-broker__search .brikk-broker__search-input::placeholder {
    color: var(--brikk-muted);
    opacity: .7;
}

.brikk-broker__search-btn {
    background: var(--brikk-purple);
    color: var(--brikk-on-accent);
    border: 0;
    padding: 0 28px;
    font-size: var(--brikk-fs-ui-sm);
    letter-spacing: .24em;
    text-transform: uppercase;
    font-weight: 500;
    cursor: pointer;
    transition: background var(--brikk-transition);
}

.brikk-broker__search-btn:hover {
    background: var(--brikk-purple-hover);
}

.brikk-broker__search.is-loading .brikk-broker__search-btn {
    opacity: .6;
    cursor: progress;
}

.brikk-broker__search-msg {
    margin: 14px 0 0;
    font-size: var(--brikk-fs-ui-sm);
    color: var(--brikk-muted);
    letter-spacing: .02em;
}

/* --- the card: portrait + copy -------------------------------------------- */

.brikk-broker__inner {
    display: grid;
    grid-template-columns: 40fr 60fr;
    gap: 64px;
    align-items: center;
}

.brikk-broker__media {
    position: relative;
    aspect-ratio: 5/6;
    overflow: hidden;
    /* Visible only while the portrait loads or if it 404s. */
    background: var(--brikk-line-dark);
}

.brikk-broker__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
}

/* Inset hairline frame over the portrait. Lighter than --brikk-on-dark-line
   because it sits on a photo, not a flat dark surface. */
.brikk-broker__media::after {
    content: "";
    position: absolute;
    inset: 14px;
    border: 1px solid rgba(255, 255, 255, .55);
    pointer-events: none;
}

.brikk-broker__credit {
    position: absolute;
    left: 28px;
    bottom: 24px;
    z-index: var(--brikk-z-raised);
    font-family: var(--brikk-font-serif);
    font-style: italic;
    font-size: 18px;
    color: rgba(245, 242, 238, .92);   /* --brikk-bg over the photo */
    letter-spacing: .01em;
    text-shadow: 0 1px 6px rgba(0, 0, 0, .5);
}

.brikk-broker__copy .brikk-eyebrow {
    display: block;
    font-family: var(--brikk-font-sans);
    text-transform: uppercase;
    color: var(--brikk-muted);
    font-size: var(--brikk-fs-eyebrow);
    letter-spacing: var(--brikk-ls-eyebrow);
    font-weight: 500;
    margin-bottom: 22px;
}

.brikk-broker__copy .brikk-eyebrow::after {
    content: "";
    display: block;
    width: 30px;
    height: 2px;
    background: var(--brikk-line);
    margin-top: 14px;
}

.brikk-broker__lead {
    color: var(--brikk-muted);
    font-size: var(--brikk-fs-body);
    line-height: 1.7;
    opacity: .8;
    margin: 0 0 14px;
    max-width: 600px;
}

/* --- stat columns (overridable per mægler via _brikk_agent_stats) --------- */

.brikk-broker__stats {
    display: grid;
    grid-template-columns: repeat(3, auto);
    gap: var(--brikk-space-7);
    margin: 36px 0 28px;
    padding-top: var(--brikk-space-6);
    border-top: var(--brikk-border);
}

.brikk-broker__stat-value {
    font-family: var(--brikk-font-serif);
    font-size: 40px;
    font-weight: 500;
    line-height: 1;
    margin-bottom: 10px;
}

.brikk-broker__stat-label {
    font-size: var(--brikk-fs-micro);
    letter-spacing: .24em;
    text-transform: uppercase;
    color: var(--brikk-muted);
}

.brikk-broker__name {
    font-family: var(--brikk-font-serif);
    font-style: italic;
    font-size: 24px;
    font-weight: 500;
    line-height: 1.2;
    margin: 60px 0 6px;
}

.brikk-broker__role {
    font-size: var(--brikk-fs-micro);
    letter-spacing: .24em;
    text-transform: uppercase;
    color: var(--brikk-muted);
}

/* --- responsive ----------------------------------------------------------- */

@media (max-width: 1024px) {
    .brikk-broker__inner {
        grid-template-columns: 1fr;
        gap: var(--brikk-space-7);
    }

    .brikk-broker__head {
        margin-bottom: 56px;
    }

    .brikk-broker__media {
        aspect-ratio: 4/3;
        max-width: var(--brikk-measure);
        margin: 0 auto;
    }

    .brikk-broker__copy {
        max-width: var(--brikk-measure);
        margin: 0 auto;
        width: 100%;
    }

    /* Without the head the section fills the container like its neighbours,
       instead of the centred reading column the full version stacks into. */
    .brikk-broker--noheader .brikk-broker__media,
    .brikk-broker--noheader .brikk-broker__copy {
        max-width: none;
        margin: 0;
    }

    .brikk-broker__stats {
        gap: var(--brikk-space-6);
        margin: var(--brikk-space-6) 0 var(--brikk-space-5);
        padding-top: 28px;
    }

    .brikk-broker__stat-value {
        font-size: 34px;
    }

    .brikk-broker__name {
        margin-top: 44px;
    }
}

@media (max-width: 768px) {
    .brikk-broker__heading {
        font-size: clamp(28px, 5.2vw, 38px);
    }
}

@media (max-width: 640px) {
    .brikk-broker__head {
        margin-bottom: 40px;
    }

    .brikk-broker__heading {
        font-size: clamp(26px, 7vw, 36px);
    }

    .brikk-broker__intro {
        font-size: 14.5px;
        line-height: 1.65;
    }

    .brikk-broker__search {
        max-width: 380px;
    }

    .brikk-broker__search .brikk-broker__search-input {
        padding: 12px 14px;
        /* 16px, not the design's 14px: under 16px iOS Safari zooms the page on
           focus and leaves it zoomed. Same guard §7 applies to every field. */
        font-size: var(--brikk-fs-body);
    }

    .brikk-broker__search-btn {
        padding: 0 18px;
        font-size: 11px;
        letter-spacing: var(--brikk-ls-ui);
    }

    .brikk-broker__inner {
        gap: var(--brikk-space-6);
    }

    .brikk-broker__media {
        aspect-ratio: 4/3;
        max-width: 100%;
    }

    .brikk-broker__credit {
        font-size: 15px;
        left: 18px;
        bottom: var(--brikk-space-4);
    }

    .brikk-broker__lead {
        font-size: 14.5px;
        line-height: 1.65;
    }

    /* Name and role lead the stacked card, ahead of the quote. */
    .brikk-broker__copy {
        display: flex;
        flex-direction: column;
    }

    .brikk-broker__name {
        order: 1;
        font-size: 20px;
        margin: 0 0 6px;
    }

    .brikk-broker__role {
        order: 2;
        font-size: 9.5px;
        letter-spacing: var(--brikk-ls-ui);
        margin-bottom: var(--brikk-space-5);
    }

    .brikk-broker__lead {
        order: 3;
    }

    .brikk-broker__stats {
        order: 4;
        gap: var(--brikk-space-3);
        padding-top: var(--brikk-space-5);
        margin: var(--brikk-space-5) 0 var(--brikk-space-4);
        grid-template-columns: repeat(3, 1fr);
    }

    .brikk-broker__stat-value {
        font-size: 26px;
        margin-bottom: 6px;
    }

    .brikk-broker__stat-label {
        font-size: 9px;
        letter-spacing: .16em;
        line-height: 1.3;
    }
}

@media (max-width: 420px) {
    .brikk-broker__stats {
        gap: var(--brikk-space-2);
    }

    .brikk-broker__stat-value {
        font-size: 22px;
    }

    .brikk-broker__stat-label {
        font-size: 8.5px;
        letter-spacing: .14em;
    }
}


/* =============================================================================
   13. THE BOOKING FUNNEL
   -----------------------------------------------------------------------------
   Page-scoped: restyles the EXISTING funnel markup (brikk-tracking plugin) — no
   classes were renamed, no PHP touched. Where the design needs content that the
   markup does not carry (eyebrows, panel copy, the Trustpilot row), it is
   generated with CSS `content`. Those strings are collected at the top of the
   section so copy changes stay one-place edits.

   Step wrappers (ids from the PHP page classes):
     #screen_1 zipcode · #screen_3 calendar · #screen_4 account · #screen_5 thankyou

   Layout model (desktop ≥1025px):
     .brikk-funnel-layout-right   → fixed full-height image panel on the LEFT
     .funnel-top-bar              → fixed logo over the panel
     .funnel-steps                → fixed vertical step list over the panel
     everything else              → normal flow, pushed right by the panel width
   Below 1025px the panel disappears and the funnel becomes a single column
   with a white top bar + horizontal step indicator (the mobile design).
   ============================================================================= */

/* --- 10.1 Template chrome -------------------------------------------------- */

/* The template wraps ONLY the top bar in a .brikk-container. Neutralise the
   container so the bar can be placed freely at each breakpoint. */
   .brikk-container:has(> .funnel-top-bar) {
    max-width: none;
    padding: 0;
}

/* Second .funnel-top-bar-left holds the help-phone line; the design has no
   equivalent, so it is dropped everywhere (the number reappears on request). */
   .funnel-top-bar-left + .funnel-top-bar-left {
    display: none;
}

/* The theme header also renders an offcanvas menu OUTSIDE .brikk-navigation,
   so the template's chrome-hiding inline style misses it. The legacy CSS
   parked it off-screen; without it the offcanvas becomes visible flow content
   that pushes the funnel down. Kill it here. */
   .page-template-funnel-template .brikk-offcanvas {
    display: none;
}

/* The logo lockup (BRIKK + EJENDOMSMÆGLER) ships as pre-coloured PNGs
   (assets/img/logo-{white,purple}-280.png, 2× for retina) — the template's
   <picture> serves white ≥1025px (dark panel) and purple below (warm canvas). */
   .funnel-top-bar-left .brikk-logo {
    display: block;
    width: 140px;
    height: auto;
}

@media (min-width: 1025px) {
    .funnel-top-bar {
        position: fixed;
        top: 42px;
        left: 48px;
        z-index: calc(var(--brikk-z-chrome) + 1);
    }

    /* White wordmark over the dark panel. */
    .funnel-top-bar-left a {
        color: var(--brikk-on-dark);
    }
}

@media (max-width: 1024.98px) {
    /* The mobile design keeps the bars on the warm page canvas, separated by
       neutral-grey hairlines — no white surface. */
       .funnel-top-bar {
        display: flex;
        justify-content: center;
        padding: 14px 20px;
        background: var(--brikk-bg);
        border-bottom: 1px solid var(--brikk-funnel-line);
    }

    .funnel-top-bar-left .brikk-logo {
        width: 116px;
    }

    .funnel-top-bar-left a {
        color: var(--brikk-purple);
    }
}

/* --- 10.2 The split layout ------------------------------------------------- */

@media (min-width: 1025px) {
    .brikk-funnel-layout-right {
        position: fixed;
        top: 0;
        bottom: 0;
        left: 0;
        width: var(--brikk-funnel-panel);
        /* Overlay strength measured off the design PNG (α ≈ .76 top → .85
           bottom against the same photo) — noticeably darker than a "legible
           text" scrim; the photo is meant to sit far back. */
           background:
           linear-gradient(180deg, rgba(17, 13, 23, 0.75) 0%, rgba(17, 13, 23, 0.79) 60%, rgba(17, 13, 23, 0.85) 100%),
           url('../img/funnel-agents.webp') center / cover no-repeat;
           z-index: var(--brikk-z-raised);
        /* The panel now carries real content (the "Derfor Brikk" checklist),
           pinned to its bottom. */
           display: flex;
           flex-direction: column;
           justify-content: flex-end;
           padding: 0 48px 36px;
       }

       .brikk-funnel-layout-wrapper,
       .funnel-steps + .brikk-funnel-layout-wrapper {
        margin-left: var(--brikk-funnel-panel);
    }

    /* Thank-you page has no .funnel-steps sibling but the same wrapper. */
    /* The design centres each step's content vertically in the viewport. */
    .brikk-funnel-layout-left {
        display: flex;
        flex-direction: column;
        justify-content: center;
        min-height: 100vh;
    }

    .brikk-funnel-layout-left-content-inner {
        max-width: 750px;
        padding: 60px 48px 60px 120px;
    }
}

@media (max-width: 1024.98px) {
    .brikk-funnel-layout-right {
        display: none;
    }

    /* The horizontal padding lives on .brikk-container-large — the step bar is
       its direct child and pulls itself full-bleed with a matching negative
       margin (see 10.3). */
       .brikk-container-large {
        padding: 0 20px;
    }

    .brikk-funnel-layout-left-content-inner {
        max-width: 640px;
        margin-inline: auto;
        padding: 22px 0 48px;
    }
}

/* --- 10.3 Left panel: vertical steps + panel copy (desktop) ---------------- */

/* All CSS-generated copy for the panel lives in these few rules. */

@media (min-width: 1025px) {
    .funnel-steps {
        position: fixed;
        top: 160px;
        /* Stops above the fixed "Derfor Brikk" checklist in the panel bottom. */
        bottom: 260px;
        left: 48px;
        width: calc(var(--brikk-funnel-panel) - 96px);
        z-index: var(--brikk-z-chrome);
        display: flex;
        flex-direction: column;
        /* Short viewports (720p-class laptops, browser zoom): scroll rather
           than silently clipping the step list. */
           overflow-y: auto;
       }

       /* "Din booking" eyebrow — real markup from class-menu-funnel.php. */
       .page-template-funnel-template .steps_heading {
        margin: 0 0 22px;
        font-size: var(--brikk-fs-eyebrow);
        font-weight: 500;
        letter-spacing: var(--brikk-ls-eyebrow);
        text-transform: uppercase;
        color: var(--brikk-on-dark-muted);
    }

    .page-template-funnel-template ul.steps {
        display: flex;
        flex-direction: column;
        gap: 22px;
    }

    .page-template-funnel-template ul.steps li,
    .page-template-funnel-template ul.steps li > a {
        display: flex;
        align-items: flex-start;
        gap: 20px;
        color: var(--brikk-on-dark);
    }

    /* Thin connector line between the step circles (design detail). Circle
       edge to circle edge = list gap (22) + the text block's overhang below
       the circle (~15), with 2px of air at each end. */
       .page-template-funnel-template ul.steps li + li .step::before {
        content: '';
        position: absolute;
        bottom: calc(100% + 2px);
        left: 50%;
        width: 1px;
        height: 33px;
        background: var(--brikk-on-dark-line);
    }

    /* Step name + CSS-generated description line. */
    .page-template-funnel-template .step_text {
        padding-top: 3px;
        font-size: 17px;
        font-weight: 500;
        line-height: 1.4;
        color: var(--brikk-on-dark);
    }

    .page-template-funnel-template .step_text::after {
        display: block;
        margin-top: 1px;
        font-size: 13.5px;
        font-weight: 400;
        color: var(--brikk-on-dark-faint);
    }

    /* (Active/completed circle colours for the dark panel live with the shared
       state model below — they must come AFTER the generic rules to win.) */

    /* "Derfor Brikk" checklist — real markup (GenericPage::RenderRightPanel),
       pinned to the panel bottom by the panel's flex column (see 10.2). */
       .brikk-funnel-why {
        border-top: 1px solid var(--brikk-on-dark-line);
        padding-top: 34px;
    }

    .brikk-funnel-why__title {
        margin: 0 0 18px;
        font-size: var(--brikk-fs-eyebrow);
        font-weight: 500;
        letter-spacing: var(--brikk-ls-eyebrow);
        text-transform: uppercase;
        color: var(--brikk-on-dark-muted);
    }

    .brikk-funnel-why__list {
        display: flex;
        flex-direction: column;
        gap: 10px;
        margin: 0;
        padding: 0;
        list-style: none;
    }

    .brikk-funnel-why__list li {
        position: relative;
        padding-left: 30px;
        font-size: 13px;
        line-height: 1.5;
        color: var(--brikk-on-dark-muted);
    }

    .brikk-funnel-why__list li::before {
        content: '✓';
        position: absolute;
        left: 0;
        top: 2px;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 16px;
        height: 16px;
        border-radius: var(--brikk-radius-pill);
        background: var(--brikk-purple);
        color: var(--brikk-on-accent);
        font-size: 9px;
        font-weight: 700;
        padding-top: 5px;
    }

    .page-template-funnel-template ul.steps li:nth-child(1) .step_text::after { content: 'Find din lokale ekspert'; }
    .page-template-funnel-template ul.steps li:nth-child(2) .step_text::after { content: 'Vælg et tidspunkt der passer'; }
    .page-template-funnel-template ul.steps li:nth-child(3) .step_text::after { content: 'Bekræft dine oplysninger'; }
}

/* Tighten the panel on height-constrained desktops so the step list and the
   checklist stay fully visible without scrolling. (The design's reference
   viewport is 714px tall — the standard layout must still apply there, so
   this only kicks in below that.) */
   @media (min-width: 1025px) and (max-height: 660px) {
    .funnel-steps {
        top: 116px;
        bottom: 232px;
    }

    .page-template-funnel-template .steps_heading {
        margin-bottom: 22px;
    }

    .page-template-funnel-template ul.steps {
        gap: 14px;
    }

    .page-template-funnel-template ul.steps li + li .step::before {
        height: 25px;
    }

    .brikk-funnel-why {
        padding-top: 20px;
    }

    .brikk-funnel-why__list {
        gap: 6px;
    }

    .brikk-funnel-why__list li {
        font-size: 12.5px;
    }
}

/* Below 570px of height even the tightened step list can't fit between the
   top bar and the checklist — hide it ("Din booking" heading included). */
@media (min-width: 1025px) and (max-height: 570px) {
    .funnel-steps {
        display: none;
    }
    .brikk-funnel-why {
        border-top:0px;
    }
}

/* Step circles — shared between desktop and mobile. */
.page-template-funnel-template .step {
    position: relative;
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border: 1px solid currentColor;
    border-radius: var(--brikk-radius-pill);
    font-size: 13px;
    font-weight: 500;
    padding-top:4px;
}

/* State model from class-menu-funnel.php:
     completed  = li.funnel-steps-active WITH a link
     current    = li.funnel-steps-active without a link
     upcoming   = li without the class                                        */

     .page-template-funnel-template ul.steps li.funnel-steps-active:not(:has(a)) .step {
        background: var(--brikk-purple);
        border-color: var(--brikk-purple);
        color: var(--brikk-on-accent);
    }

/* The number is hidden by making it transparent, which would also erase the
   currentColor border — so the border colour is pinned per breakpoint below. */
   .page-template-funnel-template ul.steps li.funnel-steps-active:has(a) .step {
    color: transparent;
}

.page-template-funnel-template ul.steps li.funnel-steps-active:has(a) .step::after {
    content: '✓';
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-top:4px;
}

@media (min-width: 1025px) {
    /* On the dark panel the CURRENT circle uses the lifted purple (design
       #9871e2 — the solid brand purple is too dark against the photo). */
       .page-template-funnel-template ul.steps li.funnel-steps-active:not(:has(a)) .step {
        background: var(--brikk-funnel-step-active);
        border-color: var(--brikk-funnel-step-active);
    }

    /* COMPLETED circles are charcoal-filled with a light check (design fill
       ≈ 17% white over the panel), not hollow. */
       .page-template-funnel-template ul.steps li.funnel-steps-active:has(a) .step {
        background: var(--brikk-on-dark-fill);
        border: 1px solid #fff;
    }

    .page-template-funnel-template ul.steps li.funnel-steps-active:has(a) .step::after {
        color: var(--brikk-on-dark);
    }

    .page-template-funnel-template ul.steps li:not(.funnel-steps-active) {
        opacity: 0.55;
    }
}

/* --- Mobile step indicator (horizontal, under the logo bar) ---------------- */

@media (max-width: 1024.98px) {
    .funnel-steps {
        margin: 0 -20px;
        padding: 14px 20px 12px;
        background: var(--brikk-bg);
        border-bottom: 1px solid var(--brikk-funnel-line);
    }

    /* The "Din booking" panel eyebrow has no place in the horizontal bar. */
    .page-template-funnel-template .steps_heading {
        display: none;
    }

    /* The mobile bar sits inside the padded content column; the negative
       margin above needs the column padding to match (see 10.2). */

    .page-template-funnel-template ul.steps {
        display: flex;
        justify-content: center;
        gap: 40px;
        width: 100%;
        margin-left: auto;
        margin-right: auto;
    }

    .page-template-funnel-template ul.steps li,
    .page-template-funnel-template ul.steps li > a {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 7px;
        color: var(--brikk-muted);
    }
        .page-template-funnel-template ul.steps li {
        min-width:86px;
    }
    .page-template-funnel-template .step {
        width: 28px;
        padding-top:3px;
        height: 28px;
        border-color: var(--brikk-line-dark);
        color: var(--brikk-muted);
    }

    .page-template-funnel-template .step_text {
        font-size: 10px;
        font-weight: 500;
        letter-spacing: 0.14em;
        text-transform: uppercase;
    }

    .page-template-funnel-template ul.steps li.funnel-steps-active .step_text {
        color: var(--brikk-dark);
    }

    /* Completed circles: purple check on the light purple tint (design). */
    .page-template-funnel-template ul.steps li.funnel-steps-active:has(a) .step {
        background: var(--brikk-purple-tint);
        border-color: var(--brikk-purple);
    }

    .page-template-funnel-template ul.steps li.funnel-steps-active:has(a) .step::after {
        color: var(--brikk-purple);
    }
}

/* --- 10.4 Step content: shared pieces -------------------------------------- */

/* CSS-generated step eyebrows. */
#screen_1 .brikk-funnel-layout-left-content-inner::before { content: 'Trin 1 · Postnummer'; }
#screen_3 .brikk-funnel-layout-left-content-inner::before { content: 'Trin 2 · Dato og tid'; }
#screen_4 .brikk-funnel-layout-left-content-inner::before { content: 'Trin 3 · Dine oplysninger'; }
#screen_5 .brikk-funnel-layout-left-content-inner::before { content: 'Booking bekræftet'; }

.brikk-funnel-layout-left-content-inner::before {
    display: block;
    margin-bottom: 10px;
    font-size: var(--brikk-fs-eyebrow);
    font-weight: 500;
    letter-spacing: var(--brikk-ls-eyebrow);
    text-transform: uppercase;
    color: var(--brikk-muted);
}

/* Responsive copy variants: several funnel strings differ between the desktop
   and mobile designs (headings, leads, label suffixes). The markup carries
   both; these switches pick one per breakpoint. */
   @media (min-width: 1025px) {
    .page-template-funnel-template .brikk-funnel-only-mobile {
        display: none;
    }
}

@media (max-width: 1024.98px) {
    .page-template-funnel-template .brikk-funnel-hide-mobile {
        display: none;
    }
}

/* Step title (the h2 in every step's markup). Design: 53px on steps 1/3
   (step 2 runs smaller — see 10.6), ~24px in the mobile comps. */
   .brikk-funnel-layout-left h2 {
    margin: 0 0 22px;
    font-size: clamp(30px, 3.7vw, 53px);
}

@media (max-width: 1024.98px) {
    .brikk-funnel-layout-left h2 {
        margin-bottom: 14px;
        font-size: 24px;
    }
}

/* Step lead. On step 1 this is semantically an h1 — visually it is body copy,
   hence the font family override. */
   .brikk-funnel-layout-left-description {
    max-width: 470px;
    margin: 0 0 26px;
    font-family: var(--brikk-font-sans);
    /* Design leads measure ≈16.5px on desktop (between the body tokens). */
    font-size: 16.5px;
    font-weight: 400;
    line-height: var(--brikk-lh-copy);
    letter-spacing: 0;
    color: var(--brikk-muted);
}

@media (max-width: 1024.98px) {
    .brikk-funnel-layout-left-description {
        font-size: 14px;
    }
}

/* Primary action — shared by every step's CTA (#findAddress_btn, the account
   submit and the thank-you/hub links all carry .cta_btn). */
/* Measured off the design: fields are 50px tall, CTAs 55px. Funnel fields use
   the neutral-grey hairline, not the warm site one. */
   .page-template-funnel-template input,
   .page-template-funnel-template select {
    border-color: var(--brikk-funnel-line);
}

.page-template-funnel-template input:focus,
.page-template-funnel-template select:focus {
    border-color: var(--brikk-purple);
}

.page-template-funnel-template ::placeholder {
    color: var(--brikk-funnel-placeholder);
}

.page-template-funnel-template input.form-control,
.page-template-funnel-template select.form-control,
#appointmentForm input:not([type='checkbox']),
#appointmentForm select {
    height: 50px;
    /* The base §7 vertical padding (15/13) over-constrains the fixed height:
       content box 20px vs a 21px line box (22.4px on ≤1024 where the iOS
       guard raises fields to 16px) — the glyph tops get clipped. Zero it and
       let the browser centre the text in the fixed height instead. */
    padding-top: 0;
    padding-bottom: 0;
}

@media (max-width: 1024.98px) {
    .page-template-funnel-template input.form-control,
    .page-template-funnel-template select.form-control,
    #appointmentForm input:not([type='checkbox']),
    #appointmentForm select {
        height: 48px;
    }
}

.page-template-funnel-template .cta_btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 55px;
    padding: 18px 26px 15px;
    border: 1px solid transparent;
    background: var(--brikk-purple);
    color: var(--brikk-on-accent);
    font-family: var(--brikk-font-sans);
    font-size: var(--brikk-fs-ui-sm);
    font-weight: 500;
    line-height: 1.3;
    letter-spacing: var(--brikk-ls-ui);
    text-transform: uppercase;
    cursor: pointer;
    transition: background var(--brikk-transition);
}

.page-template-funnel-template .cta_btn:hover {
    background: var(--brikk-purple-hover);
    color: var(--brikk-on-accent);
}

.page-template-funnel-template .cta_btn::after {
    content: '→';
    font-size: 14px;
    letter-spacing: 0;
}

@media (max-width: 1024.98px) {
    .page-template-funnel-template .cta_btn {
        width: 100%;
        min-height: 50px;
        padding: 16px 22px 14px;
    }
}

/* Action row on steps 2–3: ghost "← Tilbage" + primary "Næste/Bekræft →".
   The mobile design drops the back button and stretches the primary. */
   .brikk-funnel-actions {
    display: flex;
    align-items: stretch;
    gap: 16px;
    margin-top: 28px;
}

.brikk-btn-back {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 55px;
    padding: 18px 26px 15px;
    border: 1px solid var(--brikk-line-dark);
    background: transparent;
    color: var(--brikk-dark);
    font-family: var(--brikk-font-sans);
    font-size: var(--brikk-fs-ui-sm);
    font-weight: 500;
    line-height: 1.3;
    letter-spacing: var(--brikk-ls-ui);
    text-transform: uppercase;
    cursor: pointer;
    transition: border-color var(--brikk-transition);
}

.brikk-btn-back:hover {
    border-color: var(--brikk-dark);
    color: var(--brikk-dark);
}

.brikk-btn-back::before {
    content: '←';
    font-size: 14px;
    letter-spacing: 0;
}

@media (max-width: 1024.98px) {
    .brikk-btn-back {
        display: none;
    }

    .brikk-funnel-actions {
        margin-top: 24px;
    }
}

/* The CSS-generated Trustpilot row under each step's action — steps 1–3
   (screen ids: zipcode=screen_1, calendar=screen_3, account=screen_4).
   One composite SVG (282.42×34.69) replicating the A/B landing page's
   .brikk-tp block pixel-for-pixel: score 14px/500 · "900+ anmeldelser" over
   the stars · wordmark, 12px gaps, vertically centred. It must be a SINGLE
   image: with multiple content pieces ('text' url() url()) browsers wrap
   everything into ONE anonymous flex item, so gap/align-items never apply and
   the pieces sit jammed together on a text baseline. The text is baked in as
   glyph outlines from the theme's own OTFs, so it renders identically on
   every platform (SVG-as-image cannot load webfonts). Copy changes (score,
   review count) therefore mean regenerating the file with
   plugins/brikk-local-dev/tools/gen-trustpilot-row.py. */
   #screen_1 .brikk-funnel-layout-left-content-inner::after,
   #screen_3 .brikk-funnel-layout-left-content-inner::after,
   #screen_4 .brikk-funnel-layout-left-content-inner::after {
    content: url('../img/trustpilot-row.svg');
    display: flex;
    /* Kill the line-box strut so the box hugs the image (the image is an
       anonymous inline box and cannot be styled directly). */
       line-height: 0;
       margin-top: 32px;
   }

   @media (max-width: 1024.98px) {
    #screen_1 .brikk-funnel-layout-left-content-inner::after,
    #screen_3 .brikk-funnel-layout-left-content-inner::after,
    #screen_4 .brikk-funnel-layout-left-content-inner::after {
        justify-content: center;
    }
}

/* --- 10.5 Step 1 — postcode ------------------------------------------------ */

/* The old 4-column "why Brikk" block is replaced by the panel checklist. */
.brikk-funnel-layout-left-why-brikk {
    display: none;
}

.postcode_parent {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 18px;
    max-width: 300px;
}

/* The design gives the CTA more air than the label→input gap (30 vs 18). */
.postcode_parent #findAddress_btn {
    margin-top: 12px;
}

.postcode_parent::before {
    content: 'Dit postnummer';
    font-size: var(--brikk-fs-eyebrow);
    font-weight: 500;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--brikk-muted);
}

@media (max-width: 1024.98px) {
    .postcode_parent {
        max-width: none;
    }
}

#error_postcode {
    margin-top: 12px;
    font-size: 13px;
    color: var(--brikk-error);
}

@media (min-width: 1025px) {
    /* The design breaks the heading "Lad os finde din / lokale ekspert." */
    #screen_1 h2 {
        max-width: 440px;
    }

    /* Two lead paragraphs: tight between themselves, air before the label. */
    #screen_1 h1.brikk-funnel-layout-left-description {
        margin-bottom: 12px;
    }

    #screen_1 p.brikk-funnel-layout-left-description {
        margin-bottom: 30px;
    }
}

/* Step 1 has two lead variants: a long one (desktop) and a short one carrying
   the legacy .hide-desktop class. On mobile the SHORT one is promoted to the
   step heading (matching the mobile design) and the h2 + long lead are hidden. */
   .page-template-funnel-template .hide-desktop {
    display: none;
}

@media (max-width: 1024.98px) {
    #screen_1 h2 {
        display: none;
    }

    /* The short .hide-desktop variant becomes the mobile heading and the long
       lead stays visible below it. DOM order is lead-then-heading, so the
       column is reordered with flex (the ::before eyebrow keeps order 0). */
       #screen_1 .brikk-funnel-layout-left-content-inner {
        display: flex;
        flex-direction: column;
    }

    #screen_1 .hide-desktop {
        display: block;
        order: 1;
        margin: 0 0 12px;
        font-family: var(--brikk-font-serif);
        font-size: clamp(24px, 6.9vw, 28px);
        font-weight: 500;
        line-height: 1.15;
        letter-spacing: var(--brikk-ls-heading);
        color: var(--brikk-dark);
    }

    #screen_1 .brikk-funnel-mobile-lead {
        order: 2;
        margin-bottom: 22px;
    }

    #screen_1 .postcode_parent { order: 3; }
    #screen_1 #error_postcode { order: 4; }
    #screen_1 .brikk-funnel-layout-left-content-inner::after { order: 5; }
}

/* --- 10.6 Step 2 — calendar ------------------------------------------------ */

/* Agent intro under the (full-width) heading: photo left, name + description
   right. The h2 sits OUTSIDE this block in the markup. */
   .brikk-funnel-layout-left-agent-top {
    display: flex;
    align-items: flex-start;
    gap: 18px;
    margin-bottom: 20px;
}

.brikk-funnel-layout-left-agent-top .brikk-funnel-layout-left-agent-top-left {
    flex: 1;
}

.brikk-funnel-layout-left-agent-top .brikk-funnel-layout-left-description {
    margin-bottom: 0;
    max-width: none;
    font-size: 13.5px;
    line-height: 1.55;
}

.brikk-funnel-agent-name {
    margin: 0 0 4px;
    font-size: 15px;
}

/* The design's "choose date first, then time" hint, purple and emphasised. */
.brikk-funnel-pick-hint {
    font-weight: 500;
    color: var(--brikk-purple);
}

.cal_img_box {
    flex: none;
    width: 78px;
    border: 0px;
    background: var(--brikk-card);
}

.cal_img_box img {
    width: 100%;
    height: 84px;
    object-fit: cover;
}

.aggent_first_name {
    font-weight: 700;
    color: var(--brikk-dark);
}

/* In the mobile comp the inline agent name runs in the same grey/weight as
   the rest of the sentence. */
   .brikk-funnel-only-mobile .aggent_first_name {
    font-weight: 700;
    color: inherit;
}

@media (min-width: 1025px) {
    /* Step 2's heading is smaller than the other steps' (design: ~38px). */
    #screen_3 h2 {
        margin-bottom: 18px;
        font-size: 38px;
    }
}

@media (max-width: 1024.98px) {
    /* The mobile design shows no agent photo. */
    #screen_3 .cal_img_box {
        display: none;
    }
}

/* Calendar widget structure:
   .calendar_select_wrapper > .callendar_top (controls + day grid) + .cal_padd
   (time grid). The loading overlay positions against the wrapper. */
   .calendar_select_wrapper {
    position: relative;
}

/* Loading state (2026-07-23): a content-loader skeleton. While the agent +
   calendar AJAX load, the REAL agent block and calendar are hidden entirely
   (sibling rule below) and shimmering grey boxes mirror the ready layout —
   photo + text lines, a day row, a time grid — sized to the measured ready
   state so the column height barely moves and nothing half-loaded (unstyled
   slick stack, empty agent, all-available cells) ever flashes.
   The skeleton div carries the legacy calendar-load-overlay class on purpose:
   the funnel JS removes that element once everything is ready (or fails over
   to kontakt.os), which un-hides the content via the sibling rule — no JS
   involvement in the reveal. */
.brikk-funnel-skeleton ~ .brikk-funnel-layout-left-agent-top,
.brikk-funnel-skeleton ~ .calendar_select_wrapper {
    display: none;
}

.brikk-funnel-skeleton__box {
    display: block;
    background-color: var(--brikk-line);
    background-image: linear-gradient(90deg,
        var(--brikk-line) 42%,
        var(--brikk-line-2) 50%,
        var(--brikk-line) 58%);
    background-size: 300% 100%;
    animation: brikk-skeleton-shimmer 1.4s ease-in-out infinite;
}

@keyframes brikk-skeleton-shimmer {
    0%   { background-position: 100% 0; }
    100% { background-position: -100% 0; }
}

/* Agent: photo 78x84 + name + description lines (matches the ready block). */
.brikk-funnel-skeleton__agent {
    display: flex;
    align-items: flex-start;
    gap: 18px;
    margin-bottom: 20px;
}

.brikk-funnel-skeleton__photo {
    flex: 0 0 78px;
    height: 84px;
}

.brikk-funnel-skeleton__agent-lines {
    flex: 1;
    padding-top: 3px;
}

.brikk-funnel-skeleton__line {
    height: 12px;
    margin-bottom: 10px;
}

.brikk-funnel-skeleton__line--name {
    height: 15px;
    max-width: 180px;
    margin-bottom: 13px;
}

.brikk-funnel-skeleton__line--short {
    max-width: 45%;
    margin-bottom: 0;
}

/* The VÆLG DATO / VÆLG TIDSPUNKT eyebrow stand-ins. */
.brikk-funnel-skeleton__label {
    width: 90px;
    height: 11px;
    margin: 0 0 17px;
}

.brikk-funnel-skeleton__cells {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 10px;
    margin-bottom: 26px;
}

.brikk-funnel-skeleton__cells--days .brikk-funnel-skeleton__box {
    height: 90px;
}

.brikk-funnel-skeleton__cells--times {
    gap: 8px;
    margin-bottom: 0;
}

.brikk-funnel-skeleton__cells--times .brikk-funnel-skeleton__box {
    height: 44px;
}

@media (max-width: 1024.98px) {
    /* Mobile ready-state has no photo and a 2-line description; the time grid
       is 4-up (12 boxes -> 3 rows, ≈ the measured ready height). */
    .brikk-funnel-skeleton__photo,
    .brikk-funnel-skeleton__line--name {
        display: none;
    }

    .brikk-funnel-skeleton__cells--days .brikk-funnel-skeleton__box {
        height: 85px;
    }

    .brikk-funnel-skeleton__cells--times {
        grid-template-columns: repeat(4, 1fr);
    }
}

.callendar_top {
    position: relative;
    padding-top: 38px;
}

.callendar_top::before {
    content: 'Vælg dato';
    position: absolute;
    top: 6px;
    left: 0;
    font-size: var(--brikk-fs-eyebrow);
    font-weight: 500;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--brikk-muted);
}

/* The design shows a static "Denne uge" caption next to the arrows, not the
   selected date. The JS keeps writing the date into #calendar_day_selected —
   the span is hidden and the caption drawn with generated content, so no JS
   behaviour changes. */
   .callendar_controls_wr {
    position: absolute;
    top: 6px;
    right: 76px;
    font-size: 12px;
    color: var(--brikk-muted);
}

#calendar_day_selected span {
    display: none;
}

#calendar_day_selected::before {
    content: 'Denne uge';
}

/* Old per-weekday header row — day names now live inside each cell. */
.days_th {
    display: none;
}

/* Slick navigation arrows, docked in the label row above the carousel. Slick
   appends them inside #calendar_funnel, which is position:relative via the
   slick core — hence the negative top offset (the label strip is the
   .callendar_top padding of 38px directly above the carousel). */
   .slick-prev,
   .slick-next {
    position: absolute;
    top: -40px;
    width: 30px;
    height: 30px;
    border: 1px solid var(--brikk-funnel-line);
    background: var(--brikk-card);
    font-size: 0;
    cursor: pointer;
    transition: border-color var(--brikk-transition);
    z-index: var(--brikk-z-raised);
}

.slick-prev { right: 36px; }
.slick-next { right: 0; }

.slick-prev:hover,
.slick-next:hover {
    border-color: var(--brikk-purple);
}

.slick-prev::before,
.slick-next::before {
    font-size: 16px;
    line-height: 1;
    color: var(--brikk-dark);
}

.slick-prev::before { content: '‹'; }
.slick-next::before { content: '›'; }

.slick-prev.slick-disabled,
.slick-next.slick-disabled {
    background: #f8f7f4;
    border-color: #e6e3e1;
    cursor: default;
}

.slick-prev.slick-disabled::before,
.slick-next.slick-disabled::before {
    color: var(--brikk-muted);
}

/* Day cells. Each slide is one row of 6 weekdays; border-spacing = the gaps. */
.days_nr {
    /* border-spacing also pads the outer edges — bleed it off so the first
       and last cell align flush with the content column. */
       width: calc(100% + 10px);
       margin: 0 -5px;
       border-collapse: separate;
       border-spacing: 5px 0;
       table-layout: fixed;
   }

   td.day_calendar {
    position: relative;
    padding: 13px 2px 12px;
    border: 1px solid var(--brikk-funnel-line);
    background: var(--brikk-card);
    text-align: center;
    cursor: pointer;
    transition: border-color var(--brikk-transition);
}

td.day_calendar:hover {
    border-color: var(--brikk-purple);
}

/* Abbreviated day/month (the design shows "ONS / 22 / jul"). The *-abbrev
   attributes are display-only extras on the cells; the full-name attributes
   stay untouched for the booking JS. */
   td.day_calendar::before {
    content: attr(data-day-abbrev);
    display: block;
    margin-bottom: 6px;
    font-size: 9.5px;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--brikk-muted);
    overflow: hidden;
    white-space: nowrap;
}

td.day_calendar::after {
    content: attr(data-month-abbrev);
    display: block;
    margin-top: 4px;
    font-size: 11px;
    color: var(--brikk-muted);
    overflow: hidden;
    white-space: nowrap;
}

td.day_calendar a {
    display: block;
    font-family: var(--brikk-font-serif);
    font-size: 24px;
    font-weight: 500;
    line-height: 1;
    color: var(--brikk-dark);
    cursor: pointer;
}

/* The JS binds clicks to the <a>; stretch its hit area across the cell. */
td.day_calendar a::after {
    content: '';
    position: absolute;
    inset: 0;
}

td.day_calendar.day_selected {
    border-color: var(--brikk-purple);
    box-shadow: inset 0 0 0 1px var(--brikk-purple);
    background: var(--brikk-purple-tint);
}

td.day_calendar.day_selected a {
    color: var(--brikk-purple);
}

/* Unselectable days are SHOWN, greyed to 0.4, and unclickable (decided
   2026-07-23 — supersedes the earlier display:none on .day_disabled). Two
   classes, both applied by the funnel JS after the calendar loads:
     .day_disabled        not yet bookable (before the first available day)
     .day_no_availability the agent has no free slot that day
   The JS unbinds their click handlers; pointer-events here is the
   belt-and-braces guard against selection. */
td.day_calendar.day_disabled,
td.day_calendar.day_no_availability {
    opacity: 0.4;
    pointer-events: none;
    cursor: default;
}

@media (max-width: 640px) {
    td.day_calendar a {
        font-size: 19px;
    }

    .days_nr {
        width: calc(100% + 6px);
        margin: 0 -3px;
        border-spacing: 3px 0;
    }
}

/* Small phones: the step bar is wider than the column. (The Trustpilot row is
   a single 282px SVG; it fits every viewport ≥ ~325px and on anything smaller
   its right edge is harmlessly clipped by the body clip.) */
   @media (max-width: 380px) {
    .page-template-funnel-template ul.steps {
        gap: 24px;
    }
}

/* Time grid. */
.cal_padd {
    position: relative;
    margin-top: 26px;
    padding-top: 30px;
}

.cal_padd::before {
    content: 'Vælg tidspunkt';
    position: absolute;
    top: 0;
    left: 0;
    font-size: var(--brikk-fs-eyebrow);
    font-weight: 500;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--brikk-muted);
}

#calendar_hours_select {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 8px;
}

.pick_time {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 13px 4px 11px;
    border: 1px solid var(--brikk-funnel-line);
    background: var(--brikk-card);
    font-size: 13.5px;
    letter-spacing: 0.04em;
    color: var(--brikk-dark);
    cursor: pointer;
    transition: border-color var(--brikk-transition), background var(--brikk-transition);
}

.pick_time:hover {
    border-color: var(--brikk-purple);
    background: var(--brikk-purple-soft);
}

/* Chosen slot (set by the funnel JS; confirmed via the Næste button). */
.pick_time.time_selected {
    border-color: var(--brikk-purple);
    box-shadow: inset 0 0 0 1px var(--brikk-purple);
    background: var(--brikk-purple-tint);
    font-weight: 500;
    color: var(--brikk-purple);
}

/* The design hides unavailable slots entirely instead of greying them out. */
.pick_time.is_disabled {
    display: none;
}

@media (max-width: 1024.98px) {
    #calendar_hours_select {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* --- 10.7 Step 3 — account form -------------------------------------------- */

/* The whole form is one 2-column grid and the .form_row wrappers are dissolved
   with display:contents, so every field auto-places 2-up in DOM order:
   (Fornavn·Efternavn)(mail·Telefon)(Adresse·Type) — which is exactly the design,
   including Adresse + Ejendomstype sharing a row even though the markup puts
   them in separate .form_row.full wrappers. The design keeps two columns on
   mobile as well, so there is deliberately no single-column collapse.

   Unknown direct children (the production-only [elementor-template] output, the
   hidden field row, the submit button) span the full width by default — only
   .input_row items flow into the columns. */
   .appointment_form {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px 16px;
    text-align: left;
}

.appointment_form > * {
    grid-column: 1 / -1;
}

.form_row {
    display: contents;
}

.input_row {
    /* relative: anchors the DAWA suggestion dropdown (below). */
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 7px;
    grid-column: auto;
    min-width: 0;
}

/* On narrow phones the address and Ejendomstype rows each get the full row —
   long Danish street names don't fit a half column. */
@media (max-width: 375px) {
    .input_row:has(#adresse),
    .input_row:has(select[name='Type']) {
        grid-column: 1 / -1;
    }
}

/* DAWA address autocomplete (dawa-autocomplete2, initialised on first click
   of #adresse by themes/brikk/assets/js/autocomplete.js). The lib inserts
   .dawa-autocomplete-suggestions as a sibling of the input inside .input_row;
   absolute-position it under the field so the flex column doesn't grow. */
.dawa-autocomplete-suggestions {
    position: absolute;
    top: 100%;
    left: 0;
    /* Full form width (both grid columns + the 16px column gap): addresses
       are long and would wrap cramped inside the half-width address column. */
    width: calc(200% + 16px);
    z-index: var(--brikk-z-raised);
    margin-top: -1px; /* fuse with the field's bottom border */
    /* Cap against small screens with the keyboard up: never taller than 45%
       of the visible viewport. */
    max-height: min(264px, 45dvh);
    overflow-y: auto;
    overscroll-behavior: contain;
    background: var(--brikk-card);
    border: 1px solid var(--brikk-funnel-line);
    box-shadow: 0 12px 24px rgba(26, 26, 26, 0.08);
}

/* ≤375px the address row itself is full-width — so is the dropdown. */
@media (max-width: 375px) {
    .dawa-autocomplete-suggestions {
        width: 100%;
    }
}

.dawa-autocomplete-suggestions .dawa-autocomplete-suggestion {
    padding: 13px 16px;
    font-size: 14px;
    line-height: 1.35;
    color: var(--brikk-dark);
    cursor: pointer;
}

.dawa-autocomplete-suggestions .dawa-autocomplete-suggestion + .dawa-autocomplete-suggestion {
    border-top: 1px solid var(--brikk-funnel-line);
}

.dawa-autocomplete-suggestions .dawa-autocomplete-suggestion:hover,
.dawa-autocomplete-suggestions .dawa-autocomplete-suggestion.dawa-selected {
    background: var(--brikk-purple-tint);
}

/* The consent row is an .input_row too but must span both columns. */
.input_row:has(.brikk-funnel-layout-wrapper-compliance) {
    grid-column: 1 / -1;
}

.input_row > label {
    font-size: var(--brikk-fs-eyebrow);
    font-weight: 500;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--brikk-muted);
}

/* Validation: jQuery Validate's highlight() puts .error on both the field and
   its .input_row; the message span is pre-rendered in the markup. */
   .input_row span.error {
    display: none;
    font-size: 12px;
    color: var(--brikk-error);
}

.input_row.error span.error {
    display: block;
}

.input_row.error input,
.input_row.error select {
    border-color: var(--brikk-error);
}

/* Consent checkbox row. */
.brikk-funnel-layout-wrapper-compliance {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.brikk-funnel-layout-wrapper-compliance label {
    font-size: 13px;
    line-height: 1.5;
    color: var(--brikk-muted);
}

.brikk-funnel-layout-wrapper-compliance a {
    color: var(--brikk-purple);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.brikk-funnel-layout-wrapper-compliance input[type='checkbox'] {
    margin-top: 2px;
}

.brikk-funnel-layout-wrapper-compliance.error label {
    color: var(--brikk-error);
}

/* Confirmation line. The prefix copy differs per breakpoint (desktop: "Vi
   bekræfter din vurdering på …", mobile: "Du har valgt følgende: …"), so it is
   CSS-generated into an empty span; the date/time spans are JS-filled. */
   .brikk-funnel-confirm-prefix::before {
    content: 'Vi bekræfter din vurdering på ';
}

#screen_4 #time_selected,
#screen_4 #date_selected {
    font-weight: 500;
    color: var(--brikk-dark);
}

@media (max-width: 1024.98px) {
    .brikk-funnel-confirm-prefix::before {
        content: 'Du har valgt følgende: ';
    }

    /* The mobile comp labels this step "Trin 3 · Info". */
    #screen_4 .brikk-funnel-layout-left-content-inner::before {
        content: 'Trin 3 · Info';
    }

    /* On mobile the whole "Tir d. 28. jul kl. 10:00" tail is bold. */
    #screen_4 .brikk-funnel-confirm-when {
        font-weight: 700;
        color: var(--brikk-dark);
    }
}

/* The action row is a full-width grid child; the buttons hug their labels. */
#screen_4 .brikk-funnel-actions {
    margin-top: 10px;
}

@media (max-width: 1024.98px) {
    #screen_4 .brikk-funnel-actions {
        margin-top: 6px;
    }
}

/* --- 10.8 Step 4 — thank you ----------------------------------------------- */
/* Design: claude-new-designs/funnel/{desktop,mobile}/step-4-funnel-confirmation.png
   Two cards: booking summary (.thanks_right, first) and the local expert
   (.thanks_left, second). The legacy Brikk Hub block and the raw
   #time_selected/#date_selected spans stay in the DOM but are hidden — the
   comp has no Hub CTA (deliberate deviation, confirm with Andreas). */

/* The comp centres a ~688px block in the area right of the panel instead of
   the other steps' 120px indent. */
@media (min-width: 1025px) {
    #screen_5 .brikk-funnel-layout-left-content-inner {
        width: 100%;
        max-width: 768px;
        margin-inline: auto;
        padding: 60px 40px;
    }

    #screen_5 h2 {
        margin-bottom: 18px;
        font-size: 38px;
    }

    /* Step 4 is the one step whose comp shows the top-bar help line —
       pinned to the viewport's top right, mirroring the fixed top bar. */
    .page-id-72647 .funnel-top-bar-left + .funnel-top-bar-left {
        display: block;
        position: fixed;
        top: 34px;
        right: 48px;
        z-index: var(--brikk-z-chrome);
        font-size: 13px;
        color: var(--brikk-muted);
    }

    .page-id-72647 .funnel-top-bar-left + .funnel-top-bar-left a {
        font-weight: 500;
        color: var(--brikk-purple);
        text-decoration: none;
    }
}

.thanks_ctn {
    display: grid;
    grid-template-columns: 1.5fr 1fr;
    gap: 18px;
    margin-top: 34px;
}

.thanks_left,
.thanks_right {
    padding: 30px;
    border: 1px solid var(--brikk-funnel-line);
    background: var(--brikk-card-soft);
}

/* --- Booking card ---------------------------------------------------------- */

.funnel_thanks_intro {
    margin-bottom: 16px;
    font-size: var(--brikk-fs-eyebrow);
    font-weight: 500;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--brikk-muted);
}

.brikk-funnel-booked-slot {
    display: block;
    font-family: var(--brikk-font-serif);
    font-size: 33px;
    font-weight: 500;
    line-height: 1.35;
    color: var(--brikk-dark);
}

/* Desktop comp breaks before "kl. 16:00"; mobile keeps one line. */
.brikk-funnel-booked-slot-time {
    display: block;
}

/* Replaced by .brikk-funnel-booked-slot (comp format); kept in the DOM. */
#screen_5 #time_selected,
#screen_5 #date_selected {
    display: none;
}

.brikk-funnel-confirm-note {
    margin-top: 14px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--brikk-funnel-line);
    font-size: 13.5px;
    color: var(--brikk-muted);
}

/* The Brikk Hub description + CTA are not in the comp. */
.funnel_thanks_hub_description,
#screen_5 .tr_respons .cta_btn {
    display: none;
}

/* Lowercase muted line per the comp — unlike the card eyebrow above it. */
.funnel_thanks_export {
    margin: 20px 0 12px;
    font-size: 12.5px;
    color: var(--brikk-muted);
}

.export_list {
    display: flex;
    gap: 28px;
}

.export_list li a {
    font-size: 14.5px;
    font-weight: 500;
    color: var(--brikk-purple);
    transition: color var(--brikk-transition);
}

.export_list li a:hover {
    color: var(--brikk-purple-hover);
}

/* --- Local expert card ----------------------------------------------------- */

.thanks_left {
    text-align: center;
}

.funnel_agent_intro {
    margin-bottom: 16px;
    font-size: var(--brikk-fs-micro);
    font-weight: 500;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--brikk-muted);
}

#screen_5 .cal_img_box {
    width: 76px;
    margin: 0 auto 14px;
    padding: 0;
    border: 0;
}

#screen_5 .cal_img_box img {
    width: 76px;
    height: 90px;
    object-fit: cover;
}

.agent_name {
    display: block;
    font-size: 15.5px;
    font-weight: 700;
    color: var(--brikk-dark);
}

.agent_phone {
    display: block;
    margin: 10px 0 4px;
    font-size: 14px;
    font-weight: 500;
    color: var(--brikk-purple);
}

.agent_phone::before {
    content: 'Tel. ';
    font-weight: 400;
    color: var(--brikk-muted);
}

.brikk-funnel-agent-email {
    font-size: 14px;
    color: var(--brikk-muted);
}

.brikk-funnel-agent-email .agent_email {
    font-weight: 500;
    color: var(--brikk-purple);
}

.funnel_contact_anytime {
    font-size: 13px;
    line-height: 1.5;
    color: var(--brikk-muted);
}

/* The comp runs the name in the same weight as the sentence. */
.funnel_contact_anytime .aggent_first_name {
    font-weight: 400;
    color: inherit;
}

.thanks_left .funnel_contact_anytime {
    margin-top: 16px;
}

/* JS reveals .tr_respons blocks by toggling .tr_show. */
.tr_respons {
    display: none;
}

.tr_respons.tr_show {
    display: block;
}

/* --- Mobile ---------------------------------------------------------------- */

@media (max-width: 1024.98px) {
    /* The mobile comp shows no step bar on the confirmation page. */
    .thankyou-page .funnel-steps {
        display: none;
    }

    .thanks_ctn {
        grid-template-columns: 1fr;
        gap: 16px;
        margin-top: 26px;
    }

    .thanks_left,
    .thanks_right {
        padding: 22px 20px;
    }

    .brikk-funnel-booked-slot {
        font-size: 24px;
    }

    .brikk-funnel-booked-slot-time {
        display: inline;
    }

    /* Expert card flips horizontal: photo left, text right. */
    .thanks_left {
        display: grid;
        grid-template-columns: 64px 1fr;
        column-gap: 16px;
        align-items: start;
        text-align: left;
    }

    #screen_5 .cal_img_box {
        grid-column: 1;
        grid-row: 1 / span 4;
        width: 64px;
        margin: 0;
    }

    #screen_5 .cal_img_box img {
        width: 64px;
        height: 80px;
    }

    .funnel_agent_intro,
    .agent_name,
    .agent_phone,
    .brikk-funnel-agent-email {
        grid-column: 2;
    }

    .funnel_agent_intro {
        margin-bottom: 4px;
    }

    .agent_phone {
        margin: 6px 0 2px;
    }

    /* The "kontakt når som helst" line moves below the cards. */
    .brikk-funnel-only-mobile.funnel_contact_anytime {
        margin-top: 18px;
        text-align: center;
    }
}

/* --- 10.9 Error popup ------------------------------------------------------ */
/* Hidden until the funnel JS calls .show() on it. */

#error_popup {
    display: none;
    position: fixed;
    inset: 0;
    background: var(--brikk-scrim);
    z-index: var(--brikk-z-modal);
}

.error_inner {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: calc(100% - 40px);
    max-width: 440px;
    padding: 36px 32px;
    background: var(--brikk-card);
    text-align: center;
}

.error_inner h2 {
    margin-bottom: 20px;
    font-size: 24px;
}