/* ==========================================================================
   BuildrLabs — REVAMP DESIGN LAYER (2026-09)
   --------------------------------------------------------------------------
   The site's visual system, re-pointed to match the BuildrLabs social feed:
   warm-white canvas, heavy uppercase black + orange headlines, white rounded
   cards with orange icons on peach tiles, handwritten notes with an orange
   swoosh, floating "workflow" UI cards, and the Lego cast.

   Loaded LAST (functions.php :: buildrlabs_enqueue_revamp, priority 99).
   Three layers, in order:
     1. Tokens      — re-point redesign.css's Tailwind variables.
     2. Globals     — restyle existing markup patterns site-wide (headings,
                      buttons, cards, icon boxes, nav, footer) so every page
                      inherits the new look without touching its template.
     3. Components  — new bl- building blocks used by rebuilt sections.
   redesign.css is a PURGED Tailwind bundle: never rely on a utility class
   that is not already compiled there. New visuals belong in this file.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. TOKENS
   -------------------------------------------------------------------------- */
:root {
    /* Social palette (sampled from the carousel exports) */
    --bl-canvas:      #FAF9F7;   /* page background            */
    --bl-canvas-2:    #F5F1EC;   /* alternate band             */
    --bl-white:       #FFFFFF;
    --bl-ink:         #111111;   /* headlines                  */
    --bl-ink-2:       #3D3D3D;   /* card titles                */
    --bl-body:        #5A5A5A;   /* body copy                  */
    --bl-hand:        #3A3F4A;   /* handwritten notes          */
    --bl-line:        #ECE7E1;   /* hairlines                  */
    --bl-orange:      #F36D24;   /* social orange              */
    --bl-orange-2:    #FF8A4C;   /* highlight                  */
    --bl-orange-3:    #CC5514;   /* deep / pressed             */
    --bl-peach:       #FFF1E8;   /* icon tiles                 */
    --bl-peach-2:     #FDE3D2;
    --bl-radius:      22px;
    --bl-radius-sm:   14px;
    --bl-shadow:      0 1px 2px rgba(17,17,17,.04), 0 14px 34px -14px rgba(17,17,17,.14);
    --bl-shadow-lg:   0 2px 4px rgba(17,17,17,.04), 0 30px 60px -24px rgba(17,17,17,.22);
    --bl-display:     "DM Sans", system-ui, sans-serif;
    --bl-mono:        "Space Mono", ui-monospace, monospace;
    --bl-script:      "Caveat", "Segoe Print", cursive;

    /* Re-pointed Tailwind tokens (consumed by redesign.css utilities) */
    --background:          var(--bl-canvas);
    --cream:               var(--bl-canvas-2);
    --foreground:          var(--bl-ink);
    --card:                var(--bl-white);
    --card-foreground:     var(--bl-ink);
    --popover:             var(--bl-white);
    --popover-foreground:  var(--bl-ink);
    --primary:             var(--bl-orange);
    --primary-foreground:  #FFFFFF;
    --accent:              var(--bl-orange);
    --accent-foreground:   #FFFFFF;
    --ring:                var(--bl-orange);
    --secondary:           #F3EEE8;
    --secondary-foreground:var(--bl-ink);
    --muted:               #F3EEE8;
    --muted-foreground:    var(--bl-body);
    --border:              var(--bl-line);
    --input:               #E2DCD5;
    --dark:                #121212;
    --dark-foreground:     #FAF9F7;
    --radius:              .9rem;
}

/* --------------------------------------------------------------------------
   2. GLOBALS
   -------------------------------------------------------------------------- */
html { -webkit-text-size-adjust: 100%; }
body {
    background: var(--bl-canvas);
    color: var(--bl-ink);
    font-family: var(--bl-display);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}
::selection { background: var(--bl-orange); color: #fff; }

/* Headlines — the social feed's heavy uppercase DM Sans, not Space Mono.
   Space Mono stays for the logo, eyebrows, labels and data. */
h1.font-mono, h2.font-mono,
h1.bl-display, h2.bl-display {
    font-family: var(--bl-display) !important;
    font-weight: 800;
    letter-spacing: -.025em;
    text-transform: uppercase;
    line-height: 1.02;
}
h3.font-mono, h4.font-mono, summary.font-mono,
.font-mono.font-bold.text-lg, .font-mono.font-bold.text-xl, .font-mono.font-bold.text-2xl {
    font-family: var(--bl-display);
    font-weight: 700;
    letter-spacing: -.01em;
}
h3.font-mono { color: inherit; }
/* Big numbers (prices, stats) keep the builder mono voice */
.font-mono.font-bold.text-3xl:not(h2):not(h1),
.font-mono.font-bold.text-4xl:not(h2):not(h1) { font-family: var(--bl-mono); letter-spacing: -.03em; }

/* The short orange rule under section titles becomes the social swoosh */
.w-12.h-1.bg-primary {
    width: 84px; height: 10px; background: none !important; margin-top: .9rem;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 84 10'%3E%3Cpath d='M2 7.5C22 3 50 1.8 82 2.6' fill='none' stroke='%23F36D24' stroke-width='3.2' stroke-linecap='round'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important; background-size: contain !important;
}

/* Buttons — every legacy mono uppercase button becomes a social pill */
a.rounded-md.font-mono.uppercase,
button.rounded-md.font-mono.uppercase,
a.rounded-lg.font-mono.uppercase,
button.rounded-lg.font-mono.uppercase,
input[type="submit"], .bl-btn {
    border-radius: 999px !important;
    font-family: var(--bl-display) !important;
    font-weight: 700 !important;
    text-transform: none !important;
    letter-spacing: -.005em !important;
    font-size: 15px !important;
}
a.bg-primary.rounded-md, button.bg-primary.rounded-md, a.bg-primary.rounded-lg, button.bg-primary.rounded-lg {
    box-shadow: 0 10px 24px -10px rgba(243,109,36,.55);
}
a.bg-primary:hover, button.bg-primary:hover { background-color: var(--bl-orange-3) !important; color: #fff !important; }

/* Cards — white, rounded, soft shadow, no hard borders or left bars */
.bg-card.border, .bg-card.rounded-lg, .bg-card.rounded-xl, .bg-card.rounded-2xl {
    border-color: rgba(17,17,17,.05) !important;
    border-radius: var(--bl-radius) !important;
    box-shadow: var(--bl-shadow);
}
.bg-card.border-l-4 { border-left-width: 1px !important; }
.bg-card.border-dashed { border-color: rgba(243,109,36,.35) !important; box-shadow: none; }
.bg-card.hover\:shadow-lg:hover, .bg-card.hover\:border-primary:hover { box-shadow: var(--bl-shadow-lg); }

/* A bare orange icon at the top of a card sits on a peach tile, like the feed */
.bg-card > svg.text-primary:first-child,
.bg-card > .text-primary:first-child > svg:only-child {
    box-sizing: content-box; padding: 13px; background: var(--bl-peach);
    border-radius: 16px; stroke-width: 2;
}
/* Small icon boxes */
.w-10.h-10.rounded-md, .w-11.h-11.rounded-md, .w-12.h-12.rounded-md { border-radius: 14px !important; }
.bg-primary\/20, .bg-primary\/15, .bg-primary\/10 { background-color: var(--bl-peach) !important; }

/* Pills / eyebrows */
span.rounded-full.bg-primary.font-mono { letter-spacing: .12em; }
.rounded-md { border-radius: 12px; }
.rounded-lg { border-radius: 16px; }
.rounded-2xl { border-radius: 24px; }

/* Photos come back in colour. The feed is warm and human, not grayscale stock. */
.grayscale { filter: none !important; }
.group-hover\:grayscale-0 { filter: none !important; }

/* Alternate bands carry the faint diagonal peach sweeps from the posts */
.bg-cream, .bg-secondary\/40, .bg-secondary\/30, .bg-secondary\/50 {
    background-color: var(--bl-canvas-2) !important;
    background-image:
        linear-gradient(162deg, transparent 0 58%, rgba(243,109,36,.045) 58% 78%, transparent 78%),
        linear-gradient(20deg, rgba(243,109,36,.035) 0 22%, transparent 22%);
}

/* Dark bands stay as the "occasional contrast" — softened with a warm glow */
section.bg-dark:not(.bl-keep-flat) {
    background-color: #121212 !important;
    background-image: radial-gradient(900px 420px at 88% 0%, rgba(243,109,36,.20), transparent 60%),
                      radial-gradient(700px 380px at 0% 100%, rgba(243,109,36,.10), transparent 60%);
}
/* Orange CTA bands get the same sweep, lighter */
section.bg-primary {
    background-color: var(--bl-orange) !important;
    background-image:
        linear-gradient(160deg, transparent 0 55%, rgba(255,255,255,.10) 55% 80%, transparent 80%),
        radial-gradient(800px 400px at 100% 0%, rgba(255,255,255,.14), transparent 60%);
}
section.bg-primary h2 { color: #fff; }
section.bg-primary a.bg-foreground { background: #111 !important; color: #fff !important; }
section.bg-primary a.bg-foreground:hover { background: #fff !important; color: var(--bl-orange) !important; }

/* FAQ accordions — white rounded rows */
details.group { transition: background .2s; }
.divide-y.divide-border.border-y.border-border { border: 0 !important; display: grid; gap: 12px; }
.divide-y.divide-border.border-y.border-border > * { border: 0 !important; }
.divide-y.divide-border.border-y.border-border details.group {
    background: #fff; border-radius: 18px; padding: 18px 22px; box-shadow: var(--bl-shadow);
}
details.group > summary { font-size: 1.02rem; }
details.group > summary .text-primary { display:inline-flex; width: 30px; height: 30px; border-radius: 999px; background: var(--bl-peach); align-items:center; justify-content:center; font-size: 20px; flex-shrink:0; margin-left: 16px; }

/* Forms */
input[type="text"], input[type="email"], input[type="tel"], input[type="number"], select, textarea {
    border-radius: 14px !important;
}

/* ---- Navigation: light, frosted, always legible on the warm canvas ---- */
#site-nav {
    color: var(--bl-ink) !important;
    background: rgba(250,249,247,.78);
    -webkit-backdrop-filter: saturate(1.4) blur(14px);
    backdrop-filter: saturate(1.4) blur(14px);
    border-bottom: 1px solid transparent;
}
#site-nav.bg-\[\#1a1a1a\] {
    background: rgba(255,255,255,.92) !important;
    border-bottom-color: var(--bl-line);
    box-shadow: 0 6px 24px -18px rgba(17,17,17,.35) !important;
}
#site-nav nav a, #site-nav nav button { color: var(--bl-ink); font-weight: 500; }
#site-nav nav a:hover, #site-nav nav button:hover, #site-nav nav a.text-primary { color: var(--bl-orange); }
#site-nav .bg-foreground.border-foreground { background: #fff !important; border-color: var(--bl-line) !important; border-radius: 18px !important; box-shadow: var(--bl-shadow-lg) !important; padding: 8px !important; }
#site-nav .bg-foreground.border-foreground a { color: var(--bl-ink) !important; border-radius: 10px; font-weight: 500; }
#site-nav .bg-foreground.border-foreground a:hover { background: var(--bl-peach) !important; color: var(--bl-orange-3) !important; }
#site-nav a.bg-primary { box-shadow: 0 10px 24px -10px rgba(243,109,36,.6) !important; --tw-ring-color: transparent !important; padding: 12px 22px !important; }
#site-nav a.bg-primary:hover { transform: none; }
#nav-mobile { background: #fff !important; }
/* The countdown banner (countdown-banner.css) forces the bar dark; keep it light */
#site-nav.bl-nav-has-banner { background: rgba(255,255,255,.94) !important; }

/* ---- Footer: dark, with the orange URL band from the posts above it ---- */
footer[role="contentinfo"] { background: #121212 !important; }

/* Scroll-reveal: slightly more lift than before */
.reveal { transform: translateY(18px); }

/* --------------------------------------------------------------------------
   3. COMPONENTS
   -------------------------------------------------------------------------- */

/* ---- Pill (the "Applied AI" outline tag in the top-right of every post) ---- */
.bl-pill {
    display: inline-flex; align-items: center; gap: .5rem;
    border: 1.5px solid var(--bl-ink); border-radius: 999px;
    padding: .45rem 1.05rem; font-size: .9rem; font-weight: 500; color: var(--bl-ink);
    background: rgba(255,255,255,.6); line-height: 1.2; white-space: nowrap;
}
.bl-pill--solid { background: var(--bl-orange); border-color: var(--bl-orange); color: #fff; }
.bl-pill--soft  { background: var(--bl-peach); border-color: transparent; color: var(--bl-orange-3); font-weight: 600; }
.bl-pill .bl-dot { width: 8px; height: 8px; border-radius: 999px; background: var(--bl-orange); box-shadow: 0 0 0 4px rgba(243,109,36,.18); animation: bl-pulse 2s infinite; }
.bl-pill--solid .bl-dot { background: #fff; box-shadow: 0 0 0 4px rgba(255,255,255,.25); }
@keyframes bl-pulse { 50% { box-shadow: 0 0 0 7px rgba(243,109,36,0); } }

.bl-eyebrow {
    font-family: var(--bl-mono); font-size: 11px; font-weight: 700;
    letter-spacing: .2em; text-transform: uppercase; color: var(--bl-orange);
}

/* ---- Display type ---- */
.bl-display {
    font-family: var(--bl-display); font-weight: 800; text-transform: uppercase;
    letter-spacing: -.02em; line-height: .98; color: var(--bl-ink); margin: 0;
}
.bl-display > span { display: block; }
.bl-display .bl-k   { font-size: clamp(2.1rem, 4.4vw, 3.6rem); }
.bl-display .bl-o   { font-size: clamp(2.9rem, 7.2vw, 6.2rem); color: var(--bl-orange); letter-spacing: -.028em; }
.bl-display .bl-k-lg{ font-size: clamp(2.9rem, 7.2vw, 6.2rem); }
.bl-display .bl-o-sm{ font-size: clamp(2.1rem, 4.4vw, 3.6rem); color: var(--bl-orange); }
.bl-h2 {
    font-family: var(--bl-display); font-weight: 800; text-transform: uppercase;
    letter-spacing: -.018em; line-height: 1.02; color: var(--bl-ink);
    font-size: clamp(2rem, 4.2vw, 3.4rem); margin: 0;
}
.bl-h2 em { font-style: normal; color: var(--bl-orange); }
.bl-lede { font-size: clamp(1.1rem, 1.6vw, 1.35rem); line-height: 1.45; color: var(--bl-body); max-width: 36rem; }
.bl-sub  { font-size: 1.05rem; line-height: 1.6; color: var(--bl-body); max-width: 44rem; }
.bl-section { padding: clamp(4.5rem, 9vw, 7.5rem) 0; position: relative; }
.bl-section--alt { background: var(--bl-canvas-2); }
.bl-section-head { display: grid; gap: 1rem; max-width: 52rem; }
.bl-section-head--center { margin: 0 auto; text-align: center; justify-items: center; }

/* ---- Buttons ---- */
.bl-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
    padding: 1rem 1.6rem; min-height: 52px; line-height: 1.1;
    background: var(--bl-orange); color: #fff !important; text-decoration: none;
    box-shadow: 0 12px 26px -12px rgba(243,109,36,.7);
    transition: transform .15s ease, background .15s ease, box-shadow .15s ease;
}
.bl-btn:hover { background: var(--bl-orange-3); transform: translateY(-1px); }
.bl-btn svg { transition: transform .15s ease; }
.bl-btn:hover svg { transform: translateX(3px); }
.bl-btn--ghost { background: transparent; color: var(--bl-ink) !important; border: 1.5px solid var(--bl-ink); box-shadow: none; }
.bl-btn--ghost:hover { background: var(--bl-ink); color: #fff !important; }
.bl-btn--dark { background: var(--bl-ink); box-shadow: 0 12px 26px -14px rgba(0,0,0,.6); }
.bl-btn--dark:hover { background: #000; }
.bl-btn--white { background: #fff; color: var(--bl-orange-3) !important; box-shadow: 0 12px 26px -14px rgba(0,0,0,.35); }
.bl-btn--white:hover { background: var(--bl-ink); color: #fff !important; }
.bl-btn--sm { min-height: 42px; padding: .7rem 1.15rem; font-size: 14px !important; }
.bl-link { color: var(--bl-orange-3); font-weight: 700; text-decoration: none; display: inline-flex; align-items: center; gap: .4rem; }
.bl-link:hover { gap: .65rem; }
.bl-link svg { transition: transform .15s; }
.bl-cta-row { display: flex; flex-wrap: wrap; gap: .75rem; }

/* ---- Icon tile (orange icon on peach) ---- */
.bl-tile {
    width: 56px; height: 56px; border-radius: 16px; background: var(--bl-peach);
    color: var(--bl-orange); display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.bl-tile svg { width: 26px; height: 26px; }
.bl-tile--lg { width: 72px; height: 72px; border-radius: 20px; }
.bl-tile--lg svg { width: 32px; height: 32px; }
.bl-tile--sm { width: 40px; height: 40px; border-radius: 12px; }
.bl-tile--sm svg { width: 20px; height: 20px; }
.bl-tile--solid { background: var(--bl-orange); color: #fff; }

/* ---- Card ---- */
.bl-card {
    background: #fff; border-radius: var(--bl-radius); box-shadow: var(--bl-shadow);
    border: 1px solid rgba(17,17,17,.04); padding: 1.6rem;
    transition: transform .2s ease, box-shadow .2s ease;
}
a.bl-card { display: block; color: inherit; text-decoration: none; }
a.bl-card:hover, .bl-card--hover:hover { transform: translateY(-3px); box-shadow: var(--bl-shadow-lg); }
.bl-card h3 { font-family: var(--bl-display); font-weight: 700; font-size: 1.2rem; color: var(--bl-ink-2); letter-spacing: -.01em; margin: 0; line-height: 1.25; }
.bl-card p  { color: var(--bl-body); margin: .4rem 0 0; line-height: 1.55; }
.bl-row-card { display: flex; gap: 1.1rem; align-items: flex-start; }
.bl-row-card h3 { font-size: 1.15rem; }

/* ---- Handwritten note with the orange swoosh ---- */
.bl-note {
    font-family: var(--bl-script); font-weight: 500; color: var(--bl-hand);
    font-size: clamp(1.7rem, 2.6vw, 2.3rem); line-height: 1.02;
    transform: rotate(-9deg); display: inline-block; position: relative;
    padding-bottom: 14px; white-space: pre-line;
}
.bl-note::after {
    content: ""; position: absolute; left: 12%; right: -8%; bottom: -4px; height: 16px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 16' preserveAspectRatio='none'%3E%3Cpath d='M3 13C45 6 100 3 157 3' fill='none' stroke='%23F36D24' stroke-width='3.4' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center / 100% 100%;
}
.bl-note--card { background: rgba(255,255,255,.75); border-radius: 22px; padding: 22px 26px 30px; box-shadow: var(--bl-shadow); }

/* ---- Floating UI cards (the workflow cards around the characters) ---- */
.bl-float {
    position: absolute; z-index: 3; background: #fff; border-radius: 18px;
    box-shadow: 0 2px 4px rgba(17,17,17,.04), 0 22px 44px -20px rgba(17,17,17,.28);
    padding: 14px 16px 16px; width: 188px; font-size: 14px; line-height: 1.2; color: var(--bl-ink-2);
    animation: bl-float 7s ease-in-out infinite;
}
.bl-float__top { display: flex; align-items: center; gap: 10px; font-weight: 500; }
.bl-float__top .bl-tile { width: 34px; height: 34px; border-radius: 10px; background: var(--bl-orange); color: #fff; }
.bl-float__top .bl-tile svg { width: 18px; height: 18px; }
.bl-float__lines { margin-top: 12px; display: grid; gap: 7px; }
.bl-float__lines i { display: block; height: 7px; border-radius: 99px; background: #ECEAE7; }
.bl-float__lines i:nth-child(2) { width: 62%; }
.bl-float__ok { position: absolute; right: -10px; bottom: -10px; width: 30px; height: 30px; border-radius: 999px; background: var(--bl-orange); color: #fff; display: flex; align-items: center; justify-content: center; box-shadow: 0 6px 14px -6px rgba(243,109,36,.8); }
.bl-float:nth-of-type(2n) { animation-delay: -2.5s; }
.bl-float:nth-of-type(3n) { animation-delay: -4.5s; }
@keyframes bl-float { 0%,100% { translate: 0 0; } 50% { translate: 0 -8px; } }

/* ---- Hero ---- */
.bl-hero {
    position: relative; overflow: hidden; background: var(--bl-canvas);
    /* header.php prints .bl-cd-spacer for the countdown bar, so only clear the nav here */
    padding: 7.5rem 0 clamp(3rem, 6vw, 5rem);
}
.bl-hero__sweep, .bl-sweep {
    position: absolute; inset: 0; pointer-events: none; z-index: 0;
    background:
        linear-gradient(158deg, transparent 0 52%, rgba(243,109,36,.07) 52% 74%, transparent 74%),
        linear-gradient(200deg, transparent 0 70%, rgba(243,109,36,.05) 70% 86%, transparent 86%),
        radial-gradient(60% 55% at 100% 30%, rgba(255,138,76,.13), transparent 70%),
        radial-gradient(45% 40% at 0% 100%, rgba(255,138,76,.09), transparent 70%);
}
.bl-hero .container-x { position: relative; z-index: 1; }
.bl-hero__grid { display: grid; gap: 2.5rem; align-items: center; }
@media (min-width: 1024px) {
    .bl-hero__grid { grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); gap: 2rem; }
}
.bl-hero__top { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; margin-bottom: 1.6rem; }
.bl-hero__copy .bl-lede { margin-top: 1.4rem; }
.bl-hero__copy .bl-cta-row { margin-top: 2rem; }
.bl-hero__meta { margin-top: 1rem; font-family: var(--bl-mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: #8a8580; }
.bl-hero__extra { margin-top: 1.1rem; }
.bl-hero__art { position: relative; min-height: 420px; display: flex; align-items: flex-end; justify-content: center; }
.bl-hero__fig {
    position: relative; z-index: 2; width: min(100%, 470px); height: auto;
    filter: drop-shadow(0 28px 26px rgba(17,17,17,.16));
}
.bl-hero__note { position: absolute; z-index: 4; right: 0; top: 2%; }
.bl-hero__art .bl-float--a { left: 0;    top: 18%; }
.bl-hero__art .bl-float--b { right: -2%; top: 40%; }
.bl-hero__art .bl-float--c { left: 4%;   bottom: 12%; }
.bl-hero__art .bl-float--d { right: 4%;  bottom: 4%; }
/* connector lines between floating cards */
.bl-hero__art::before, .bl-hero__art::after {
    content: ""; position: absolute; z-index: 1; border: 2px solid var(--bl-orange); opacity: .8;
}
.bl-hero__art::before { left: 10%; top: 33%; width: 2px; height: 30%; border-width: 0 0 0 2px; }
.bl-hero__art::after  { right: 12%; top: 56%; width: 20%; height: 2px; border-width: 2px 0 0 0; }
.bl-hero--no-lines .bl-hero__art::before, .bl-hero--no-lines .bl-hero__art::after { display: none; }

.bl-facts { margin-top: 2.2rem; display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: .75rem; max-width: 40rem; }
@media (min-width: 640px) { .bl-facts { grid-template-columns: repeat(4, minmax(0,1fr)); } }
.bl-fact { background: #fff; border-radius: 16px; padding: .85rem 1rem; box-shadow: var(--bl-shadow); }
.bl-fact b { display: block; font-family: var(--bl-mono); font-size: 1.35rem; color: var(--bl-orange); letter-spacing: -.03em; line-height: 1.1; }
.bl-fact span { display: block; font-size: 12.5px; color: var(--bl-body); margin-top: .2rem; line-height: 1.3; }

@media (max-width: 1023px) {
    .bl-hero { padding-top: 6.5rem; }
    .bl-hero__art { min-height: 360px; max-width: 520px; margin: 0 auto; width: 100%; }
    .bl-hero__fig { width: min(78%, 380px); }
    .bl-hero__note { top: -2%; right: 2%; }
    .bl-note { font-size: 1.55rem; }
}
@media (max-width: 639px) {
    .bl-float { width: 150px; font-size: 12.5px; padding: 11px 12px 13px; border-radius: 14px; }
    .bl-float__top .bl-tile { width: 28px; height: 28px; border-radius: 8px; }
    .bl-float__top .bl-tile svg { width: 15px; height: 15px; }
    .bl-hero__art .bl-float--c, .bl-hero__art .bl-float--d { display: none; }
    .bl-hero__art { min-height: 320px; }
    .bl-hero__art::before, .bl-hero__art::after { display: none; }
    .bl-pill { font-size: .8rem; padding: .4rem .85rem; }
}

/* ---- Step marker (the "1/6 ●●●" pager from the carousels) ---- */
.bl-step { display: inline-flex; align-items: center; gap: .7rem; }
.bl-step b { width: 46px; height: 46px; border-radius: 999px; background: var(--bl-orange); color: #fff; font-weight: 500; font-size: 15px; display: inline-flex; align-items: center; justify-content: center; }
.bl-step i { width: 9px; height: 9px; border-radius: 99px; background: #BDBAB6; display: inline-block; }
.bl-step i.on { background: var(--bl-orange); }

/* ---- Orange URL band (bottom strip of every post) ---- */
.bl-band { background: var(--bl-orange); color: #fff; overflow: hidden; }
.bl-band__track { display: flex; gap: 3rem; white-space: nowrap; padding: 1rem 0; font-weight: 700; font-size: 1.05rem; letter-spacing: -.005em; width: max-content; animation: bl-marquee 38s linear infinite; }
.bl-band__track span { display: inline-flex; align-items: center; gap: 3rem; }
.bl-band__track span::after { content: ""; width: 8px; height: 8px; border-radius: 2px; background: rgba(255,255,255,.7); }
@keyframes bl-marquee { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
    .bl-band__track, .bl-float, .bl-pill .bl-dot { animation: none; }
}

/* ---- Audience paths ("Which one are you?") ---- */
.bl-paths { display: grid; gap: 1.25rem; margin-top: 3rem; }
@media (min-width: 900px) { .bl-paths { grid-template-columns: repeat(3, minmax(0,1fr)); } }
.bl-path { position: relative; display: flex; flex-direction: column; padding: 0; overflow: hidden; }
.bl-path__art { position: relative; height: 250px; background: linear-gradient(180deg, #FFF6F0, #fff); display: flex; align-items: flex-end; justify-content: center; overflow: hidden; }
.bl-path__art img { height: 232px; width: auto; max-width: 90%; object-fit: contain; object-position: bottom; filter: drop-shadow(0 16px 16px rgba(17,17,17,.14)); }
.bl-path__art .bl-pill { position: absolute; top: 16px; left: 16px; font-size: .8rem; }
.bl-path__body { padding: 1.6rem; display: flex; flex-direction: column; flex: 1; }
.bl-path__kicker { font-family: var(--bl-display); font-weight: 800; text-transform: uppercase; letter-spacing: -.02em; font-size: 1.7rem; line-height: 1; color: var(--bl-ink); }
.bl-path__kicker em { font-style: normal; color: var(--bl-orange); display: block; }
.bl-path__roles { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: 1rem; }
.bl-chip { display: inline-flex; align-items: center; gap: .35rem; padding: .32rem .7rem; border-radius: 999px; background: var(--bl-canvas-2); color: var(--bl-ink-2); font-size: 13px; font-weight: 500; }
.bl-chip svg { width: 14px; height: 14px; color: var(--bl-orange); }
.bl-path__list { list-style: none; margin: 1.1rem 0 0; padding: 0; display: grid; gap: .55rem; color: var(--bl-body); font-size: .96rem; }
.bl-path__list li { display: flex; gap: .6rem; align-items: flex-start; line-height: 1.4; }
.bl-path__list li::before { content: ""; flex-shrink: 0; margin-top: .3rem; width: 16px; height: 16px; border-radius: 99px; background: var(--bl-orange) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center / 10px no-repeat; }
.bl-path__foot { margin-top: auto; padding-top: 1.4rem; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem; border-top: 1px dashed var(--bl-line); margin-top: 1.4rem; }
.bl-path__meta { font-family: var(--bl-mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: #8a8580; }

/* ---- Role explorer (tabs: Sales / Finance / Marketing / HR / Ops / Engineering) ---- */
.bl-roles { margin-top: 2.5rem; }
.bl-roles__tabs { display: flex; gap: .5rem; overflow-x: auto; padding: 4px 2px 10px; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.bl-roles__tabs::-webkit-scrollbar { display: none; }
.bl-roles__tab {
    flex-shrink: 0; display: inline-flex; align-items: center; gap: .5rem; cursor: pointer;
    border: 1.5px solid var(--bl-line); background: #fff; color: var(--bl-ink-2);
    border-radius: 999px; padding: .6rem 1.1rem; font: 600 15px/1 var(--bl-display); transition: all .15s;
}
.bl-roles__tab svg { width: 17px; height: 17px; color: var(--bl-orange); }
.bl-roles__tab:hover { border-color: var(--bl-orange); }
.bl-roles__tab[aria-selected="true"] { background: var(--bl-ink); border-color: var(--bl-ink); color: #fff; }
.bl-roles__tab[aria-selected="true"] svg { color: var(--bl-orange-2); }
.bl-roles__panel { margin-top: 1.25rem; }
.bl-roles__panel[hidden] { display: none; }
.bl-roles__grid { display: grid; gap: 1.25rem; }
@media (min-width: 1024px) { .bl-roles__grid { grid-template-columns: 300px minmax(0,1fr); gap: 2rem; } }
.bl-roles__intro { background: #fff; border-radius: var(--bl-radius); box-shadow: var(--bl-shadow); padding: 1.6rem; display: flex; flex-direction: column; position: relative; overflow: hidden; }
.bl-roles__intro h3 { font-family: var(--bl-display); font-weight: 800; text-transform: uppercase; font-size: 1.9rem; letter-spacing: -.025em; line-height: 1; margin: 0; }
.bl-roles__intro h3 em { font-style: normal; color: var(--bl-orange); display: block; }
.bl-roles__intro p { color: var(--bl-body); margin: .9rem 0 0; line-height: 1.5; }
.bl-roles__intro img { display: block; width: 180px; height: auto; margin: 1rem auto -1.6rem; filter: drop-shadow(0 16px 16px rgba(17,17,17,.14)); }
.bl-roles__intro .bl-btn { margin-top: 1.2rem; align-self: flex-start; }
.bl-levels { display: grid; gap: 1rem; }
@media (min-width: 768px) { .bl-levels { grid-template-columns: repeat(3, minmax(0,1fr)); } }
.bl-level { background: #fff; border-radius: var(--bl-radius); box-shadow: var(--bl-shadow); padding: 1.35rem; }
.bl-level__tag { font-family: var(--bl-display); font-weight: 800; text-transform: uppercase; font-size: .85rem; letter-spacing: .02em; color: var(--bl-ink); }
.bl-level__title { font-family: var(--bl-display); font-weight: 800; text-transform: uppercase; color: var(--bl-orange); font-size: 1.5rem; letter-spacing: -.025em; line-height: 1; margin-top: .15rem; }
.bl-level ul { list-style: none; padding: 0; margin: 1rem 0 0; display: grid; gap: .8rem; }
.bl-level li { display: flex; gap: .75rem; align-items: flex-start; }
.bl-level li .bl-tile { width: 38px; height: 38px; border-radius: 11px; }
.bl-level li .bl-tile svg { width: 19px; height: 19px; }
.bl-level li > div > b { display: block; color: var(--bl-ink-2); font-size: .98rem; }
.bl-level li > div > span { display: block; color: var(--bl-body); font-size: .9rem; line-height: 1.4; margin-top: .1rem; }

/* ---- Social feed strip ---- */
.bl-feed { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(250px, 1fr); gap: 1rem; overflow-x: auto; scroll-snap-type: x mandatory; padding: 6px 2px 18px; scrollbar-width: thin; }
@media (min-width: 1024px) { .bl-feed { grid-auto-columns: 1fr; overflow: visible; } }
.bl-feed a { scroll-snap-align: start; display: block; border-radius: 20px; overflow: hidden; box-shadow: var(--bl-shadow); background: #fff; transition: transform .2s, box-shadow .2s; }
.bl-feed a:hover { transform: translateY(-4px) rotate(-.4deg); box-shadow: var(--bl-shadow-lg); }
.bl-feed img { display: block; width: 100%; height: auto; aspect-ratio: 4/5; object-fit: cover; }

/* ---- Photo mosaic (real Hatch photos) ---- */
.bl-mosaic { display: grid; gap: .9rem; grid-template-columns: repeat(2, minmax(0,1fr)); }
@media (min-width: 768px) { .bl-mosaic { grid-template-columns: repeat(4, minmax(0,1fr)); grid-auto-rows: 170px; } }
.bl-mosaic figure { margin: 0; border-radius: 20px; overflow: hidden; position: relative; box-shadow: var(--bl-shadow); background: #eee; min-height: 150px; }
.bl-mosaic figure img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s ease;
    filter: sepia(.32) saturate(1.5) hue-rotate(-8deg) contrast(1.03) brightness(1.02); } /* Hatch archive is B&W: warm it to the brand */
.bl-mosaic figure:hover img { transform: scale(1.04); }
@media (min-width: 768px) {
    .bl-mosaic .bl-m-big  { grid-column: span 2; grid-row: span 2; }
    .bl-mosaic .bl-m-wide { grid-column: span 2; }
}
.bl-mosaic figcaption { position: absolute; left: 12px; bottom: 12px; background: rgba(255,255,255,.92); border-radius: 999px; padding: .3rem .75rem; font-size: 12.5px; font-weight: 600; color: var(--bl-ink-2); }

/* ---- Photo frame ---- */
.bl-photo { border-radius: 24px; overflow: hidden; box-shadow: var(--bl-shadow-lg); background: #eee; }
.bl-photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.bl-warm { filter: sepia(.32) saturate(1.5) hue-rotate(-8deg) contrast(1.03) brightness(1.02) !important; }

/* ---- Comparison / programme table ---- */
.bl-compare { display: grid; gap: 1.25rem; margin-top: 3rem; }
@media (min-width: 900px) { .bl-compare { grid-template-columns: repeat(3, minmax(0,1fr)); } }
.bl-plan { display: flex; flex-direction: column; }
.bl-plan--hot { outline: 2px solid var(--bl-orange); outline-offset: -2px; }
.bl-plan__who { font-size: .9rem; color: var(--bl-body); margin-top: .35rem; }
.bl-plan__price { font-family: var(--bl-mono); font-weight: 700; color: var(--bl-orange); font-size: 2rem; letter-spacing: -.04em; margin-top: 1.1rem; line-height: 1; }
.bl-plan__price small { font-family: var(--bl-display); font-size: .9rem; color: var(--bl-body); letter-spacing: 0; font-weight: 500; }
.bl-plan dl { margin: 1.2rem 0 0; display: grid; gap: .55rem; }
.bl-plan dl div { display: flex; justify-content: space-between; gap: 1rem; font-size: .93rem; border-bottom: 1px dashed var(--bl-line); padding-bottom: .55rem; }
.bl-plan dt { color: var(--bl-body); }
.bl-plan dd { margin: 0; font-weight: 600; color: var(--bl-ink-2); text-align: right; }
.bl-plan .bl-btn { margin-top: 1.4rem; width: 100%; }

/* ---- Instructor card ---- */
.bl-person { display: grid; grid-template-columns: 112px minmax(0,1fr); gap: 1.2rem; align-items: start; }
.bl-person img { width: 112px; height: 112px; border-radius: 22px; object-fit: cover; background: var(--bl-peach); }
.bl-person h3 { margin: 0; }
.bl-person .bl-role { color: var(--bl-orange-3); font-weight: 600; font-size: .9rem; margin-top: .2rem; }
@media (max-width: 480px) { .bl-person { grid-template-columns: 1fr; } }

/* ---- Utility ---- */
.bl-grid-2 { display: grid; gap: 1.25rem; }
@media (min-width: 768px) { .bl-grid-2 { grid-template-columns: repeat(2, minmax(0,1fr)); } }
.bl-grid-3 { display: grid; gap: 1.25rem; }
@media (min-width: 768px) { .bl-grid-3 { grid-template-columns: repeat(3, minmax(0,1fr)); } }
.bl-grid-4 { display: grid; gap: 1.25rem; grid-template-columns: repeat(1, minmax(0,1fr)); }
@media (min-width: 640px) { .bl-grid-4 { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (min-width: 1024px) { .bl-grid-4 { grid-template-columns: repeat(4, minmax(0,1fr)); } }
.bl-split { display: grid; gap: 2.5rem; align-items: center; }
@media (min-width: 1024px) { .bl-split { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 4rem; } }
.bl-mt-1 { margin-top: .5rem; } .bl-mt-2 { margin-top: 1rem; } .bl-mt-3 { margin-top: 1.5rem; } .bl-mt-4 { margin-top: 2rem; } .bl-mt-6 { margin-top: 3rem; }
.bl-center { text-align: center; }
.bl-muted { color: var(--bl-body); }
.bl-orange { color: var(--bl-orange); }
.bl-sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* When a page ends on an orange CTA band, the orange URL band would merge into it */
section.bg-primary + .bl-band, main > section.bg-primary:last-child + .bl-band { background: var(--bl-ink); }
section.bg-primary + .bl-band .bl-band__track span::after { background: var(--bl-orange); }

/* Two-character hero (engineer + professional) and the landscape group render */
.bl-hero__pair { position: relative; z-index: 2; display: flex; align-items: flex-end; justify-content: center; width: 100%; }
.bl-hero__pair .bl-hero__fig { width: min(52%, 300px); }
.bl-hero__pair .bl-hero__fig--2 { margin-left: -9%; transform: translateY(4%); }
.bl-hero__fig--wide { width: min(100%, 640px); align-self: center; }
@media (max-width: 639px) { .bl-hero__pair .bl-hero__fig { width: 48%; } }
/* Two-figure heroes: figures own the centre, cards and note move to the edges */
.bl-hero__art:has(.bl-hero__pair) { min-height: 470px; }
.bl-hero__art:has(.bl-hero__pair) .bl-hero__pair .bl-hero__fig { width: min(54%, 320px); }
.bl-hero__art:has(.bl-hero__pair) .bl-float--a { left: -4%; top: 30%; }
.bl-hero__art:has(.bl-hero__pair) .bl-float--b { right: -6%; top: auto; bottom: 10%; }
.bl-hero__art:has(.bl-hero__pair) .bl-float--c,
.bl-hero__art:has(.bl-hero__pair) .bl-float--d { display: none; }
.bl-hero__art:has(.bl-hero__pair) .bl-hero__note { top: -8%; right: -4%; }
.bl-hero__art:has(.bl-hero__pair)::before { left: 4%; top: 52%; height: 26%; }
.bl-hero__art:has(.bl-hero__pair)::after { display: none; }

/* H1 kicker: the programme name, small, so the H1 still carries the keyword */
.bl-display .bl-kick { font-family: var(--bl-mono); font-weight: 700; font-size: 13px; letter-spacing: .18em; color: var(--bl-orange-3); margin-bottom: .9rem; line-height: 1.3; }
/* Figures size by HEIGHT, not width: narrow renders (lead, sales) otherwise
   grow to 1000px+ tall, crop at the top and push the headline down. */
.bl-hero__fig { width: auto !important; max-width: 100%; height: min(540px, 64vh); object-fit: contain; object-position: bottom center; }
.bl-hero__pair .bl-hero__fig { height: min(480px, 58vh); max-width: 56%; }
.bl-hero__fig--wide { height: auto; width: min(100%, 640px) !important; }
@media (max-width: 1023px) {
    .bl-hero__fig { height: 380px; }
    .bl-hero__pair .bl-hero__fig { height: 330px; }
}
@media (max-width: 639px) {
    .bl-hero__fig { height: 320px; }
    .bl-hero__pair .bl-hero__fig { height: 270px; }
}

/* ---- Student stories video (vertical testimonial) ---- */
.bl-video-split { display: grid; gap: 2.5rem; align-items: center; }
@media (min-width: 900px) { .bl-video-split { grid-template-columns: minmax(0, 380px) minmax(0, 1fr); gap: 4rem; } }
.bl-video-frame { position: relative; width: 100%; max-width: 380px; margin: 0 auto; aspect-ratio: 9 / 16; border-radius: 28px; overflow: hidden; background: #111; box-shadow: var(--bl-shadow-lg), 0 0 0 8px #fff; transform: rotate(-1.5deg); }
.bl-video-frame video { width: 100%; height: 100%; object-fit: cover; display: block; }
.bl-video-play { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: linear-gradient(180deg, rgba(0,0,0,0) 45%, rgba(0,0,0,.35)); border: 0; cursor: pointer; }
.bl-video-play span { width: 84px; height: 84px; border-radius: 999px; background: var(--bl-orange); color: #fff; display: flex; align-items: center; justify-content: center; box-shadow: 0 0 0 10px rgba(243,109,36,.28), 0 18px 30px -10px rgba(0,0,0,.5); transition: transform .2s; padding-left: 5px; }
.bl-video-play:hover span, .bl-video-play:focus-visible span { transform: scale(1.08); }
.bl-video-frame.is-playing .bl-video-play, .bl-video-frame.is-playing .bl-video-badge { display: none; }
.bl-video-badge { position: absolute; left: 14px; top: 14px; background: rgba(255,255,255,.92); color: var(--bl-ink); border-radius: 999px; padding: .35rem .75rem; font: 600 12.5px/1 var(--bl-display); pointer-events: none; }
.bl-video-thumbs { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: .6rem; max-width: 520px; }
.bl-video-thumbs figure { margin: 0; border-radius: 14px; overflow: hidden; aspect-ratio: 4/3; box-shadow: var(--bl-shadow); }
.bl-video-thumbs img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ---- Classroom gallery + lightbox ---- */
.bl-gallery { columns: 2; column-gap: .8rem; }
@media (min-width: 768px) { .bl-gallery { columns: 3; column-gap: 1rem; } }
@media (min-width: 1200px) { .bl-gallery { columns: 4; } }
.bl-gallery__item { display: block; break-inside: avoid; margin-bottom: .8rem; border-radius: 18px; overflow: hidden; box-shadow: var(--bl-shadow); background: #eee; }
@media (min-width: 768px) { .bl-gallery__item { margin-bottom: 1rem; } }
.bl-gallery__item img { display: block; width: 100%; height: auto; transition: transform .5s ease; }
.bl-gallery__item:hover img { transform: scale(1.035); }
.bl-gallery__item:focus-visible { outline: 3px solid var(--bl-orange); outline-offset: 3px; }
dialog.bl-lightbox { border: 0; padding: 0; background: transparent; max-width: 94vw; max-height: 92vh; }
dialog.bl-lightbox::backdrop { background: rgba(10,10,10,.86); }
dialog.bl-lightbox img { display: block; max-width: 94vw; max-height: 86vh; border-radius: 16px; }
dialog.bl-lightbox button { position: absolute; top: 10px; right: 10px; width: 44px; height: 44px; border-radius: 999px; border: 0; background: #fff; color: var(--bl-ink); font-size: 24px; line-height: 1; cursor: pointer; }
dialog.bl-lightbox p { color: #fff; text-align: center; margin: .6rem 0 0; font-size: .95rem; }
.bl-mosaic figure.bl-real img { filter: none; } /* real colour classroom photos */
@media (max-width: 639px) { .bl-video-frame { max-width: 300px; transform: none; box-shadow: var(--bl-shadow-lg), 0 0 0 6px #fff; } .bl-video-thumbs { gap: .45rem; } }
.bl-roles__tab { min-height: 44px; } /* 44px tap target on phones */
@media (max-width: 1023px) { .bl-hero__art:has(.bl-hero__pair) { min-height: 340px; } .bl-hero__art:has(.bl-hero__pair) .bl-hero__note { top: 0; right: 0; } }

/* ==========================================================================
   FIRST THREE SECONDS — hero hierarchy, composition, balance (2026-09-24)
   Order of attention on load: 1) headline  2) figure  3) the one primary CTA.
   Everything else (pills, proof line, caption, cards, note) is deliberately
   quieter. The whole message fits in the first viewport on every page.
   ========================================================================== */

/* Composition: headline starts high, no dead band under the fixed chrome */
.bl-hero { padding-top: 6.25rem; padding-bottom: clamp(2.25rem, 4vw, 3.5rem); }
.bl-hero__top { margin-bottom: 1.1rem; }
.bl-hero__grid { min-height: min(560px, calc(100vh - 230px)); }

/* Scale contrast: one dominant line, one supporting line */
.bl-display .bl-k    { font-size: clamp(1.9rem, 3.4vw, 3.1rem); }
.bl-display .bl-o    { font-size: clamp(2.7rem, 6.2vw, 5.5rem); }
.bl-display .bl-k-lg { font-size: clamp(2.7rem, 6.2vw, 5.5rem); }
.bl-display .bl-o-sm { font-size: clamp(1.9rem, 3.4vw, 3.1rem); }
.bl-display .bl-kick { margin-bottom: .7rem; }
.bl-hero__copy .bl-lede { margin-top: 1.1rem; font-size: clamp(1.02rem, 1.3vw, 1.18rem); max-width: 33rem; line-height: 1.5; }

/* One primary action; the rest are text links */
.bl-hero__actions { margin-top: 1.7rem; display: flex; flex-wrap: wrap; align-items: center; gap: .9rem 1.4rem; }
.bl-btn--hero { min-height: 58px; padding: 1.05rem 1.9rem; font-size: 16px !important; box-shadow: 0 16px 34px -14px rgba(243,109,36,.85); }
.bl-hero__link { display: inline-flex; align-items: center; gap: .45rem; min-height: 44px; font-weight: 700; color: var(--bl-ink); text-decoration: none; border-bottom: 2px solid rgba(17,17,17,.15); padding: .2rem 0; transition: border-color .15s, gap .15s; }
.bl-hero__link:hover { border-color: var(--bl-orange); gap: .7rem; }
.bl-hero__extra { margin: 0; flex-basis: 100%; }
.bl-hero__extra:empty { display: none; }

/* Proof: a quiet line, not four cards shouting for attention */
.bl-proof { list-style: none; padding: 0; margin: 1.6rem 0 0; display: flex; flex-wrap: wrap; gap: .5rem 0; max-width: 36rem; }
.bl-proof li { display: inline-flex; align-items: baseline; gap: .35rem; font-size: 13.5px; color: var(--bl-body); padding-right: 1rem; margin-right: 1rem; border-right: 1px solid var(--bl-line); line-height: 1.3; }
.bl-proof li:last-child { border-right: 0; margin-right: 0; padding-right: 0; }
.bl-proof b { font-family: var(--bl-mono); font-weight: 700; color: var(--bl-ink); font-size: 15px; letter-spacing: -.02em; }
.bl-hero__meta { margin-top: .9rem; }

/* Balance: the figure is the counterweight to the text block, sized to the
   viewport so it never pushes the fold, anchored bottom-centre */
.bl-hero__art { min-height: 0; align-self: stretch; }
.bl-hero__fig { height: min(500px, calc(100vh - 290px)); min-height: 300px; }
.bl-hero__pair .bl-hero__fig { height: min(450px, calc(100vh - 320px)); min-height: 260px; }

/* Choreography: the eye is led in order during the first second */
@media (prefers-reduced-motion: no-preference) {
    .bl-hero__top, .bl-hero .bl-display > span, .bl-hero__copy .bl-lede,
    .bl-hero__actions, .bl-proof, .bl-hero__meta,
    .bl-hero__fig, .bl-hero__art .bl-float, .bl-hero__note {
        animation: bl-in .6s cubic-bezier(.2,.7,.2,1) both;
    }
    .bl-hero__top                        { animation-delay: 0ms; }
    .bl-hero .bl-display > span:nth-child(1) { animation-delay: 60ms; }
    .bl-hero .bl-display > span:nth-child(2) { animation-delay: 140ms; }
    .bl-hero .bl-display > span:nth-child(3) { animation-delay: 220ms; }
    .bl-hero .bl-display > span:nth-child(4) { animation-delay: 300ms; }
    .bl-hero__copy .bl-lede              { animation-delay: 320ms; }
    .bl-hero__actions                    { animation-delay: 420ms; }
    .bl-proof, .bl-hero__meta            { animation-delay: 560ms; }
    .bl-hero__fig                        { animation: bl-rise .8s cubic-bezier(.2,.7,.2,1) 180ms both; }
    .bl-hero__pair .bl-hero__fig--2      { animation-delay: 320ms; }
    .bl-hero__art .bl-float              { animation: bl-pop .5s cubic-bezier(.3,1.4,.5,1) both, bl-float 7s ease-in-out 1.6s infinite; }
    .bl-hero__art .bl-float--a           { animation-delay: 750ms, 1.6s; }
    .bl-hero__art .bl-float--b           { animation-delay: 900ms, 2.4s; }
    .bl-hero__note                       { animation-delay: 1050ms; }
}
@keyframes bl-in   { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes bl-rise { from { opacity: 0; transform: translateY(30px) scale(.97); } to { opacity: 1; transform: none; } }
@keyframes bl-pop  { from { opacity: 0; transform: scale(.85) translateY(8px); } to { opacity: 1; transform: none; } }

/* Phones: headline, lede and the primary CTA all inside the first screen;
   the figure follows as the second beat */
@media (max-width: 1023px) {
    .bl-hero { padding-top: 5.4rem; }
    .bl-hero__grid { min-height: 0; gap: 1.5rem; }
    .bl-hero__fig { height: 330px; min-height: 0; }
    .bl-hero__pair .bl-hero__fig { height: 280px; min-height: 0; }
}
@media (max-width: 639px) {
    .bl-hero__top { margin-bottom: .8rem; }
    .bl-hero__top .bl-pill:not(.bl-pill--soft) { display: none; } /* one pill on phones: keep the dated badge */
    .bl-display .bl-kick { font-size: 11px; margin-bottom: .5rem; }
    .bl-hero__copy .bl-lede { margin-top: .8rem; }
    .bl-hero__actions { margin-top: 1.2rem; gap: .6rem 1.1rem; }
    .bl-btn--hero { width: 100%; }
    .bl-hero__meta { display: none; }
    .bl-proof li { font-size: 12.5px; padding-right: .7rem; margin-right: .7rem; }
}

/* Autoplaying student film: sound + pause controls (replaces the play overlay) */
.bl-video-play { display: none !important; }
.bl-video-ctrls { position: absolute; left: 12px; right: 12px; bottom: 12px; display: flex; justify-content: space-between; align-items: center; gap: .5rem; }
.bl-video-sound, .bl-video-pause { display: inline-flex; align-items: center; justify-content: center; gap: .45rem; min-height: 44px; border: 0; border-radius: 999px; cursor: pointer; font: 700 14px/1 var(--bl-display); box-shadow: 0 10px 20px -10px rgba(0,0,0,.5); }
.bl-video-sound { background: var(--bl-orange); color: #fff; padding: 0 1.05rem; }
.bl-video-pause { width: 44px; background: rgba(255,255,255,.92); color: var(--bl-ink); }
.bl-video-sound .bl-i-on, .bl-video-frame.is-sound .bl-video-sound .bl-i-off { display: none; }
.bl-video-frame.is-sound .bl-video-sound .bl-i-on { display: inline; }
.bl-video-frame.is-sound .bl-video-sound { background: rgba(255,255,255,.92); color: var(--bl-ink); }
.bl-video-pause .bl-i-play, .bl-video-frame.is-paused .bl-video-pause .bl-i-pause { display: none; }
.bl-video-frame.is-paused .bl-video-pause .bl-i-play { display: inline; }
.bl-video-sound:focus-visible, .bl-video-pause:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
@media (prefers-reduced-motion: no-preference) {
    .bl-video-sound { animation: bl-nudge 2.4s ease-in-out 2s 3; }
}
@keyframes bl-nudge { 0%,100% { transform: none; } 50% { transform: scale(1.06); } }
.bl-hero__art:has(.bl-hero__pair) .bl-hero__note { top: 0; right: -2%; }

/* ---- Declutter pass 2 (2026-09-24) ---- */
/* No connector lines: they were decoration competing with the figure */
.bl-hero__art::before, .bl-hero__art::after { display: none !important; }
/* Seats chip rides on the CTA line instead of taking its own row */
.bl-hero__extra { flex-basis: auto; }
.bl-hero__art .bl-float--a { left: -2%; top: 26%; }
/* Countdown bar on desktop: title + timer + CTA only (details live on the programme page) */
@media (min-width: 768px) {
    :root { --bl-cd-h: 56px; }
    .bl-cd__sub, .bl-cd__meta, .bl-cd__rowbreak { display: none !important; }
    .bl-cd__title { margin: 0; }
}

/* ==========================================================================
   INSTRUCTORS — one consistent treatment (2026-09-24)
   Source headshots are a mix of colour and B&W, so every instructor renders
   in black and white and blooms into colour on hover / keyboard focus. On
   touch screens (no hover) js/revamp.js adds .bl-lit while the card crosses
   the middle of the viewport.
   ========================================================================== */
.bl-trainer__photo, .bl-person { overflow: hidden; }
.bl-trainer__photo img, .bl-person > img {
    filter: grayscale(1) contrast(1.06) brightness(1.02) !important;
    transition: filter .6s ease, transform .8s cubic-bezier(.2,.7,.2,1);
}
.bl-trainer:hover .bl-trainer__photo img, .bl-trainer:focus-within .bl-trainer__photo img, .bl-trainer.bl-lit .bl-trainer__photo img,
.bl-person:hover > img, .bl-person:focus-within > img, .bl-person.bl-lit > img {
    filter: none !important; transform: scale(1.04);
}
.bl-trainer, .bl-person { transition: box-shadow .3s ease, transform .3s ease; }
.bl-trainer:hover, .bl-person:hover { box-shadow: var(--bl-shadow-lg); }

/* ==========================================================================
   SCROLL ANIMATIONS (2026-09-24)
   html.bl-anim is set by js/revamp.js only when motion is allowed and
   IntersectionObserver exists, so without JS everything is simply visible.
   ========================================================================== */
@media (prefers-reduced-motion: no-preference) {
    html.bl-anim .reveal { opacity: 0; transform: translateY(26px); transition: opacity .75s cubic-bezier(.2,.7,.2,1), transform .75s cubic-bezier(.2,.7,.2,1); }
    html.bl-anim .reveal.in-view { opacity: 1; transform: none; }
    html.bl-anim .bl-sa { opacity: 0; transform: translateY(30px); transition: opacity .75s cubic-bezier(.2,.7,.2,1), transform .75s cubic-bezier(.2,.7,.2,1); transition-delay: var(--sr-d, 0ms); }
    html.bl-anim .bl-sa--pop  { transform: translateY(24px) scale(.9); }
    html.bl-anim .bl-sa--zoom { transform: scale(.94); }
    html.bl-anim .bl-sa--left { transform: translateX(-36px); }
    html.bl-anim .bl-sa.bl-sa-in { opacity: 1; transform: none; }
    /* the orange half of every section headline gets its brush stroke drawn in */
    html.bl-anim .bl-h2 em { background: linear-gradient(transparent 78%, rgba(243,109,36,.22) 78%) no-repeat 0 0 / 0% 100%; transition: background-size .9s cubic-bezier(.2,.7,.2,1) .25s; }
    html.bl-anim .in-view .bl-h2 em, html.bl-anim .bl-sa-in .bl-h2 em, html.bl-anim .bl-h2.bl-sa-in em { background-size: 100% 100%; }
}

/* ==========================================================================
   ACCESSIBILITY PASS (pre-launch audit, 2026-09-24)
   The social orange #F36D24 stays the brand colour for icons, tiles,
   swooshes and decoration. Anything that carries TEXT uses a shade that
   passes WCAG AA:
     --bl-action       #BD551C  fills behind white text (4.69:1)
     --bl-action-hover #9C4515
     --bl-orange-text  #B84A0F  small orange text on light (4.96:1)
     --bl-orange-disp  #DE6421  large display type (>=3:1 on the canvas)
     --bl-label        #77726D  grey mono labels (4.52:1)
   ========================================================================== */
:root {
    --bl-action: #BD551C; --bl-action-hover: #9C4515;
    --bl-orange-text: #B84A0F; --bl-orange-disp: #DE6421; --bl-label: #77726D;
    --primary: #B84A0F;          /* legacy text-primary / bg-primary utilities */
    --bl-cd-orange: #BD551C;     /* countdown bar CTA + chips */
}
.bl-btn, a.bg-primary, button.bg-primary, .bl-btn--hero { background-color: var(--bl-action) !important; }
.bl-btn:hover, a.bg-primary:hover, button.bg-primary:hover { background-color: var(--bl-action-hover) !important; }
.bl-btn--ghost, .bl-btn--ghost:hover { background-color: transparent !important; }
.bl-btn--ghost:hover { background-color: var(--bl-ink) !important; }
.bl-btn--dark { background-color: var(--bl-ink) !important; }
.bl-btn--dark:hover { background-color: #000 !important; }
.bl-btn--white { background-color: #fff !important; color: var(--bl-orange-text) !important; }
.bl-btn--white:hover { background-color: var(--bl-ink) !important; color: #fff !important; }
section.bg-primary, .bl-band { background-color: var(--bl-action) !important; }
.bl-pill--solid { background: var(--bl-action); border-color: var(--bl-action); }
.bl-video-sound { background: var(--bl-action); }
.bl-step b, .bl-float__ok { background: var(--bl-action); }

.bl-eyebrow, .bl-link, .bl-person .bl-role, .bl-pill--soft, .bl-seats,
.bl-display .bl-kick, .text-primary { color: var(--bl-orange-text) !important; }
.bl-display .bl-o, .bl-display .bl-o-sm, .bl-h2 em, .bl-path__kicker em, .bl-roles__intro h3 em,
.bl-level__title, .bl-plan__price, .bl-fact b { color: var(--bl-orange-disp); }
.bl-hero__meta, .bl-path__meta, .bl-plan dt { color: var(--bl-label); }

/* Tap targets >= 44px on touch */
#site-nav > .container-x > a:first-child { min-height: 44px; display: inline-flex; align-items: center; }
@media (max-width: 1023px) { #site-nav a[href^="tel:"], #nav-toggle { min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; } } /* phones/tablets only: these are hidden on desktop */
details > summary { min-height: 44px; }
.bl-btn--sm { min-height: 44px; }
/* Visible focus on the light header */
#site-nav a:focus-visible, #site-nav button:focus-visible, .bl-btn:focus-visible, .bl-hero__link:focus-visible {
    outline: 3px solid var(--bl-orange-text) !important; outline-offset: 3px;
}
/* On the dark bands and footer the bright oranges are the accessible ones */
.bg-dark .text-primary, .bg-dark .bl-eyebrow, .bg-dark .bl-link, .bg-dark .bl-h2 em, .bg-dark .bl-seats,
footer .text-primary, footer .bl-link, .bl-ent-rhythm .bl-eyebrow { color: var(--bl-orange-2) !important; }
section.bg-primary .bl-h2 em, section.bg-primary .bl-eyebrow { color: #fff !important; }
/* In-page jumps clear the fixed nav + countdown bar + section-rail bar */
section[id], div[id].bl-section-head, [id].scroll-mt-20, [id].scroll-mt-24 { scroll-margin-top: calc(84px + var(--bl-cd-h, 0px) + var(--bl-bar-h, 0px)); }
/* No JS or reduced motion: nothing is ever left hidden */
html:not(.bl-anim) .reveal, html:not(.bl-anim) .bl-sa { opacity: 1 !important; transform: none !important; }

/* ---- Hatch experience: film + photos in one section ---- */
.bl-hatch { display: grid; gap: 2.5rem; align-items: center; }
@media (min-width: 960px) { .bl-hatch { grid-template-columns: minmax(0, 360px) minmax(0, 1fr); gap: 3.5rem; } }
.bl-hatch .bl-video-frame { max-width: 360px; }
.bl-hatch__chips { list-style: none; padding: 0; margin: 1.2rem 0 0; display: flex; flex-wrap: wrap; gap: .45rem; }
.bl-hatch__grid { margin-top: 1.4rem; display: grid; gap: .6rem; grid-template-columns: repeat(3, minmax(0,1fr)); grid-auto-rows: 118px; }
.bl-hatch__ph { display: block; border-radius: 14px; overflow: hidden; box-shadow: var(--bl-shadow); }
.bl-hatch__ph img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s ease; }
.bl-hatch__ph:hover img { transform: scale(1.05); }
.bl-hatch__ph--big { grid-column: span 2; grid-row: span 2; }
@media (max-width: 639px) { .bl-hatch__grid { grid-auto-rows: 92px; gap: .45rem; } }

/* Countdown bar urgency: seats remaining always visible, as a live pill */
@media (min-width: 768px) {
    .bl-cd__seats { display: inline-flex !important; align-items: center !important; gap: .45rem !important; background: var(--bl-action); border-color: var(--bl-action) !important; color: #fff; padding: .38rem .8rem !important; }
    .bl-cd__seats .bl-cd__seats-count { color: #fff !important; }
    .bl-cd__seats .bl-cd__seats-lbl { display: inline !important; color: rgba(255,255,255,.92) !important; font-weight: 600; }
    .bl-cd__seats .bl-cd__seats-icon { display: none !important; }
    .bl-cd__seats::before { content: ""; width: 7px; height: 7px; border-radius: 99px; background: #fff; box-shadow: 0 0 0 0 rgba(255,255,255,.7); animation: bl-cd-live 1.8s infinite; flex-shrink: 0; }
}
@keyframes bl-cd-live { 70% { box-shadow: 0 0 0 7px rgba(255,255,255,0); } 100% { box-shadow: 0 0 0 0 rgba(255,255,255,0); } }
@media (prefers-reduced-motion: reduce) { .bl-cd__seats::before { animation: none; } }

/* Cycling hero card (Sales → Finance → HR → Marketing → Ops) */
.bl-float__cycle { position: relative; min-height: 38px; perspective: 400px; }
.bl-cyc { display: none; }
.bl-cyc.is-on { display: block; animation: bl-cyc-in .5s cubic-bezier(.2,.8,.2,1) both; }
.bl-cyc .bl-float__top > span:last-child { display: flex; flex-direction: column; line-height: 1.15; }
.bl-cyc b { font-weight: 700; color: var(--bl-ink); font-size: 15px; }
.bl-cyc small { font-size: 12px; color: var(--bl-body); margin-top: 2px; }
.bl-float:has(.bl-float__cycle) { width: 210px; }
@keyframes bl-cyc-in { from { opacity: 0; transform: rotateX(-70deg) translateY(6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .bl-cyc.is-on { animation: none; } }

/* Trainer row (programme pages): one swipeable row instead of a 1,800px wall */
.bl-trainers.bl-trainers--scroll { display: grid !important; grid-auto-flow: column; grid-auto-columns: minmax(210px, 230px); grid-template-columns: none !important; gap: 1rem; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding: 0 4px; padding: 4px 4px 18px; scrollbar-width: thin; -webkit-overflow-scrolling: touch; }
.bl-trainers--scroll .bl-trainer { scroll-snap-align: start; }
.bl-trainers--scroll:focus-visible { outline: 3px solid var(--bl-orange-text); outline-offset: 4px; border-radius: 16px; }
.bl-scroller-nav { display: none; justify-content: flex-end; gap: .5rem; margin-top: 1rem; }
@media (min-width: 700px) { .bl-scroller-nav { display: flex; } }
.bl-scroller-btn { width: 44px; height: 44px; border-radius: 999px; border: 1.5px solid var(--bl-ink); background: #fff; color: var(--bl-ink); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; transition: background .15s, color .15s; }
.bl-scroller-btn:hover { background: var(--bl-ink); color: #fff; }
.bl-scroller-btn[data-bl-scroll="-1"] svg { transform: rotate(180deg); }