/* ============================================================
   WEB DESIGN BRISBANE — Black block 2 (Sections 7-11)
   Project Runbook · Design Quality · Industries · Brands · Worldwide.
   Dark #191716, grid #444444 dashed lines.
   Phase 1: structure + copy. Horizontal-scroll pin, sticky columns,
   3D earth + map tooltip are scaffolded for later phases.
   ============================================================ */
.wdb-block2 { position: relative; background: var(--color-black2); color: var(--color-white); }
.wdb-block2 p { font-family: var(--font-body); font-weight: var(--font-weight-regular); font-size: var(--text-xs); letter-spacing: var(--tracking-body); line-height: var(--leading-relaxed); color: var(--color-white); margin: 0; }
.wdb-block2 p + p { margin-top: 1.1em; }
.wdb-b2-hline { position: absolute; left: 0; width: 100%; height: 0; border-top: var(--guide-width) var(--guide-style) var(--color-grid); pointer-events: none; }
.wdb-b2-vline { position: absolute; top: 0; bottom: 0; width: 0; border-left: var(--guide-width) var(--guide-style) var(--color-grid); pointer-events: none; }

/* ── Black-block edge rails ───────────────────────────────────
   Runbook rails: 4 vertical dashed lines living inside the sticky pin
   (so they never translate with the sliding card track). The top pair runs
   from the pin's top edge down to 1px above the card track; the bottom pair
   from 1px below the track down to the pin's bottom edge — framing the
   section while leaving the sliding track clear. Their heights are measured
   and set per-breakpoint by wdb-scroll.js (sizeRails). Block2 rails (Pair 2)
   run beside the normal-flow Quality + Industries sections. */
.wdb-block2__rail {
    position: absolute; top: 0; bottom: 0; width: 0;
    border-left: var(--guide-width) var(--guide-style) var(--color-grid);
    pointer-events: none; z-index: 2;
}
.wdb-block2__rail--left  { left:  var(--pad-x); }
.wdb-block2__rail--right { right: var(--pad-x); }
.wdb-block2__railed { position: relative; }

.wdb-runbook__rail {
    position: absolute; width: 0; height: 0;
    border-left: var(--guide-width) var(--guide-style) var(--color-grid);
    pointer-events: none; z-index: 2;
}
.wdb-runbook__rail--top-left,
.wdb-runbook__rail--top-right    { top: 0; }
.wdb-runbook__rail--bottom-left,
.wdb-runbook__rail--bottom-right { bottom: 0; }
.wdb-runbook__rail--top-left,
.wdb-runbook__rail--bottom-left  { left:  var(--pad-x); }
.wdb-runbook__rail--top-right,
.wdb-runbook__rail--bottom-right { right: var(--pad-x); }
/* mobile: runbook is a manual swipe (no pin) — drop the framing rails */
@media (max-width: 767px) {
    .wdb-runbook__rail { display: none; }
}

/* CTA on dark */
.wdb-cta {
    display: inline-flex; align-items: center; gap: var(--space-3);
    font-family: var(--font-btn); font-weight: var(--font-weight-btn);
    letter-spacing: var(--tracking-btn); font-size: var(--text-btn);
    color: var(--color-black2); background: var(--color-white);
    border: 1px solid var(--color-white); border-radius: var(--radius);
    padding: var(--btn-pad-y) var(--btn-pad-x);
    transition: background var(--duration-fast) var(--ease-primary), color var(--duration-fast) var(--ease-primary);
}
.wdb-cta:hover { background: transparent; color: var(--color-white); }


/* ============================================================
   SECTION 7 — Project Runbook (horizontal scroll; Phase-1 = manual scroll)
   ============================================================ */
.wdb-runbook { position: relative; padding: var(--wdb-sec-y) 0; }
.wdb-runbook__top {
    display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-6);
    padding: 0 calc(var(--wdb-pad) * 2);
    margin-bottom: var(--space-10);
}
.wdb-runbook__title {
    font-family: var(--font-heading); font-weight: var(--font-weight-medium);
    letter-spacing: var(--tracking-tight); line-height: var(--leading-tight);
    font-size: var(--wdb-fs-section); color: var(--color-white); margin: 0; max-width: 40%;
}
.wdb-runbook__track {
    display: flex; gap: 0; overflow-x: auto; padding: 0 var(--pad-x);
    scrollbar-width: none;
}
.wdb-runbook__track::-webkit-scrollbar { display: none; }
.wdb-card {
    position: relative; flex: 0 0 420px; max-width: 420px; height: 315px;
    display: flex; flex-direction: column;
    border: var(--guide-width) var(--guide-style) var(--color-grid);
    border-left: none;
}
.wdb-card:first-child { border-left: var(--guide-width) var(--guide-style) var(--color-grid); }
.wdb-card__body { flex: 1 1 auto; padding: 40px; overflow: hidden; }
.wdb-card__body p { font-size: var(--text-xs); }
.wdb-card__title-row { flex: 0 0 60px; display: grid; grid-template-columns: 60px 1fr; }
.wdb-card__num {
    display: flex; align-items: center; justify-content: center;
    border-right: var(--guide-width) var(--guide-style) var(--color-grid);
    font-family: var(--font-heading); font-weight: var(--font-weight-medium);
    font-size: var(--wdb-fs-eyebrow); color: var(--color-blue-web);
}
.wdb-card__title { display: flex; align-items: center; padding-left: 20px; font-family: var(--font-heading); font-weight: var(--font-weight-medium); letter-spacing: var(--tracking-tight); line-height: var(--leading-snug); font-size: var(--wdb-fs-sub); color: var(--color-white); }
/* layout A (default): body on top, title row at the bottom */
.wdb-card__title-row { border-top: var(--guide-width) var(--guide-style) var(--color-grid); }
.wdb-card__body { padding-top: 40px; padding-bottom: 40px; }
/* layout B (alt): title row on top, body below — body keeps a 40px top gap */
.wdb-card--alt { flex-direction: column-reverse; }
.wdb-card--alt .wdb-card__title-row { border-top: none; border-bottom: var(--guide-width) var(--guide-style) var(--color-grid); }
.wdb-card--alt .wdb-card__body { padding-top: 40px; padding-bottom: 40px; }

/* Mobile-only carousel controls (arrows + relocated CTA) and the full-bleed
   divider line. Hidden on desktop/tablet, where the track is the pinned
   horizontal scroll; revealed + styled in the ≤767 block below. */
.wdb-runbook__controls,
.wdb-runbook__hline { display: none; }

/* Pinned horizontal scroll (desktop + tablet): the section becomes a
   runway (height set by wdb-scroll.js = 100vh + horizontal travel); the
   pin wrapper sticks full-viewport and the track is translated left by
   JS as you scroll down. Mobile keeps the native overflow-x swipe. */
@media (min-width: 768px) {
    /* Pin the rows to the 2nd (1fr) grid column explicitly. The indicator used
       to hold column 1 as an in-flow grid item; now that it's absolute (eased
       mode) the rows would otherwise auto-place back into the narrow 84px
       column 1 and wrap badly. Mobile is single-column, so this is ≥768 only. */
    .wdb-industries__rows { grid-column: 2; }

    .wdb-runbook { padding: 0; }
    .wdb-runbook__pin {
        position: sticky;
        top: 0;
        height: 100vh;
        display: flex;
        flex-direction: column;
        justify-content: center;
        overflow: hidden;
    }
    .wdb-runbook__track {
        overflow: visible;      /* JS transform drives it, not scroll */
        will-change: transform;
    }
}


/* ============================================================
   SECTION 8 — Design Quality (2 cols: image | content)
   ============================================================ */
.wdb-quality { position: relative; padding: calc(var(--wdb-pad) * 2 + var(--pad-x)); }
/* Desktop: image spans both rows (heading + body) so it fills the column
   at the right column's full height. */
.wdb-quality__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-areas: "media heading" "media body";
    column-gap: var(--space-8); row-gap: var(--space-6);
}
.wdb-quality__media { grid-area: media; border-radius: var(--radius); overflow: hidden; }
.wdb-quality__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.wdb-quality__heading { grid-area: heading; font-family: var(--font-heading); font-weight: var(--font-weight-medium); letter-spacing: var(--tracking-tight); line-height: var(--leading-tight); font-size: var(--wdb-fs-title); color: var(--color-white); margin: 0; }
.wdb-quality__body { grid-area: body; }
.wdb-quality__hline-bottom { bottom: 0; }


/* ============================================================
   SECTION 9 — Industries (content | [B-indicator | rows])
   ============================================================ */
.wdb-industries { position: relative; padding: calc(var(--wdb-pad) * 2) var(--pad-x) 0 calc(var(--wdb-pad) * 2); }
.wdb-industries__grid { display: grid; grid-template-columns: 1fr 1.1fr; gap: var(--space-8); }
/* bottom padding so the sticky heading releases clear of the column's
   bottom dashed line rather than touching it */
.wdb-industries__content { padding-right: var(--wdb-pad); padding-bottom: var(--space-10); }
.wdb-industries__heading { font-family: var(--font-heading); font-weight: var(--font-weight-medium); letter-spacing: var(--tracking-tight); line-height: var(--leading-tight); font-size: var(--wdb-fs-title); color: var(--color-white); margin: 0 0 var(--space-6); }
.wdb-industries__col { position: relative; display: grid; grid-template-columns: 84px 1fr; }
.wdb-industries__col-vline-left { left: 0; }
.wdb-industries__col-vline-mid { left: 84px; }
.wdb-industries__col-hline-top { top: 0; left: 0; width: 100%; }
/* Indicator: a 44×44 cream rounded box centred in the 84px column, holding a
   ~22px icon that swaps per row as it travels (wdb-industries-indicator.js). */
.wdb-industries__indicator { display: flex; justify-content: center; align-items: flex-start; padding: 20px 0; }
.wdb-industries__indicator-box {
    width: 44px; height: 44px; flex: 0 0 auto;
    background: var(--color-white);
    border-radius: var(--radius);
    display: flex; align-items: center; justify-content: center;
    overflow: hidden;
}
.wdb-industries__indicator-icon { display: block; height: 22px; width: auto; }
.wdb-industries__rows { }
.wdb-industries__row { position: relative; padding: 20px; }
.wdb-industries__row + .wdb-industries__row::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 0; border-top: var(--guide-width) var(--guide-style) var(--color-grid); }
.wdb-industries__row-title { font-family: var(--font-heading); font-weight: var(--font-weight-medium); letter-spacing: var(--tracking-tight); line-height: var(--leading-snug); font-size: var(--wdb-fs-sub); color: var(--color-white); margin: 0 0 var(--space-5); }
/* chevron is injected by JS for the mobile accordion; hidden everywhere else */
.wdb-industries__row-icon { display: none; }
/* per-row lead icon (left of the title) — injected by JS, shown only on the
   mobile accordion; the same cream box treatment as the desktop indicator */
.wdb-industries__row-leadicon { display: none; }

/* Sticky columns (desktop only): the heading and the B-square indicator
   hold while the 7 industry rows scroll past. align-self:start stops the
   grid items stretching (a stretched item can't stick); offset clears nav. */
@media (min-width: 1024px) {
    .wdb-industries__content,
    .wdb-industries__indicator {
        position: sticky;
        top: var(--pad-top-nav);
        align-self: start;
    }
    /* JS-eased mode (wdb-industries-indicator.js): absolute + transform so the
       icon box can glide with a smoothing lag. Mirrors the tablet rule below. */
    .wdb-industries__indicator.is-eased {
        position: absolute; top: 0; left: 0; width: 84px;
        align-self: auto;
        padding: 0;
        will-change: transform;
        z-index: 2;
    }
    .wdb-industries__row { padding: 40px; }
}


/* ============================================================
   SECTION 10 — Brands (reused marquee) + top/bottom lines
   ============================================================ */
.wdb-brands { position: relative; }
.wdb-brands .projects-brands-marquee { width: 100%; height: 30vh; min-height: 160px; background: var(--color-black2); }
.wdb-brands .projects-brands-marquee__logo { background-color: var(--color-white); }
/* z-index lifts the lines above the marquee's own dark background, which
   otherwise paints over them (they're earlier siblings in the same context) */
.wdb-brands__hline--top { top: 0; z-index: 3; }
.wdb-brands__hline--bottom { bottom: 0; z-index: 3; }


/* ============================================================
   SECTION 11 — Worldwide (100vh; 3D earth bg + centred content)
   ============================================================ */
.wdb-world { position: relative; min-height: 100vh; display: flex; align-items: center; justify-content: center; overflow: hidden; padding: calc(var(--wdb-pad) * 2) calc(var(--wdb-pad) * 2); }
.wdb-world__rail { position: absolute; top: 0; bottom: 0; width: 0; border-left: var(--guide-width) var(--guide-style) var(--color-grid); pointer-events: none; z-index: 3; }
.wdb-world__rail--left { left: var(--pad-x); }
.wdb-world__rail--right { right: var(--pad-x); }
.wdb-world__hline-bottom { bottom: var(--wdb-pad); }
/* full-bleed dashed line at the very bottom of the section — no side padding, all viewports */
.wdb-world::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 0; border-top: var(--guide-width) var(--guide-style) var(--color-grid); pointer-events: none; z-index: 4; }
.wdb-world__earth { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }
.wdb-world__earth canvas { display: block; width: 100%; height: 100%; }
/* Circular fade in the dead-centre — same colour as the section background,
   ABOVE the globe but BELOW the text/button/icon/tooltip. Reduces the globe's
   visibility behind the copy. All knobs are number-valued CSS vars (the tuning
   panel drives them; units are applied here via calc). */
.wdb-world__fade {
    position: absolute;
    left: calc(50% + var(--wfade-x, 0) * 1px);
    top:  calc(50% + var(--wfade-y, 0) * 1px);
    width:  calc(var(--wfade-size, 140) * 1vmin);
    height: calc(var(--wfade-size, 140) * 1vmin);
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: radial-gradient(circle,
        var(--wfade-color, #191716) 0%,
        var(--wfade-color, #191716) calc(var(--wfade-solid, 21) * 1%),
        transparent calc(var(--wfade-edge, 50) * 1%));
    opacity: var(--wfade-opacity, 1);
    pointer-events: none; z-index: 1;
}
.wdb-world__inner { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--space-7); max-width: 720px; }
.wdb-world__loc { position: relative; display: inline-flex; align-items: center; gap: 20px; cursor: pointer; }
.wdb-world__loc-icon { width: 21px; height: 25px; color: var(--color-white); flex-shrink: 0; }
.wdb-world__loc-icon svg { display: block; width: 100%; height: 100%; }
.wdb-world__loc-icon svg path { fill: currentColor; }
/* inner diamond = a dark "gap" in the white pin; spins + scales on hover
   (wdb-world-icon.js). No transform-origin/box here — GSAP svgOrigin owns it. */
.wdb-world__loc-icon svg .wdb-world__loc-gap { fill: var(--color-black2); }
.wdb-world__loc-title { font-family: var(--font-heading); font-weight: var(--font-weight-medium); letter-spacing: var(--tracking-tight); line-height: var(--leading-tight); font-size: var(--wdb-fs-title); color: var(--color-white); margin: 0; white-space: nowrap; }
/* Comment bubble, styled + animated like the projects-page hover cursor:
   grows from its bottom-left foot (which sits at the location icon). The
   grow/shrink is driven by GSAP in wdb-world-icon.js; CSS only sets the
   resting look + the foot. */
.wdb-world__tooltip {
    position: absolute; bottom: calc(100% + 14px); left: 15px;
    transform-origin: 0% 100%;       /* bottom-left — grows from the foot */
    padding: 8px 16px; background: var(--color-black); border: 1px solid #6B6B6B;
    border-radius: var(--radius); border-bottom-left-radius: 0;   /* sharp corner the foot attaches to */
    color: var(--color-white); font-family: var(--font-heading); font-weight: var(--font-weight-medium);
    font-size: var(--text-xs); letter-spacing: var(--tracking-tight); white-space: nowrap;
    opacity: 0; pointer-events: none; z-index: 10;
}
/* exact projects-page foot (the bottom-left artifact) — the SVG path lifted
   straight from the project-card cursor, sharp top-right, rounded elsewhere. */
.wdb-world__tooltip::after {
    content: ''; position: absolute;
    left: -10px; top: calc(100% - 1px);
    width: 12px; height: 12px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-1 -1 12 12'%3E%3Cpath d='M4 0.5H9.5V6C9.5 7.933 7.933 9.5 6 9.5H4C2.067 9.5 0.5 7.933 0.5 6V4C0.5 2.067 2.067 0.5 4 0.5Z' fill='%23262626' stroke='%236B6B6B'/%3E%3C/svg%3E") center/100% 100% no-repeat;
}
.wdb-world__body { max-width: 640px; }
.wdb-world__closing { font-family: var(--font-heading); font-weight: var(--font-weight-medium); letter-spacing: var(--tracking-tight); font-size: var(--wdb-fs-sub); color: var(--color-white); margin: 0; }
/* .wdb-block2 p { margin:0 } (0,1,1) outranks .wdb-world__closing (0,1,0), so a
   plain margin here gets zeroed. Bump specificity to actually space the closing
   off the body above it (desktop/tablet — mobile overrides the value below). */
.wdb-world__inner .wdb-world__closing { margin-top: var(--space-6); }

/* Insights section (ported from home): on this page the wdb-world section above
   already draws a full-width bottom dashed line, so DROP the insights top dash
   and trim its big 20vh top padding down to roughly the bottom padding + a touch.
   `section.insights-section` (0,1,1) beats the component's own 0,1,0 `padding`
   shorthand regardless of stylesheet load order (this file loads first). */
section.insights-section {
    padding-top: calc(var(--space-9) + var(--space-5));
    padding-bottom: calc(var(--space-9) + var(--space-5));   /* match the top */
}
section.insights-section .insights-dash-top { display: none; }


/* ============================================================
   RESPONSIVE
   ============================================================ */
/* ---- TABLET (768–1023) ---- */
@media (min-width: 768px) and (max-width: 1023px) {
    /* Runbook cards were floating with too much empty space — tighten the
       card height, centre the body text, and reduce the title gap. */
    .wdb-runbook__top { margin-bottom: var(--space-7); }
    .wdb-runbook__title { max-width: 60%; }
    .wdb-card { height: 280px; }
    .wdb-card__body { display: flex; flex-direction: column; justify-content: center; }
    /* Quality: image (~20vw) beside the heading; body full width below */
    .wdb-quality__grid {
        grid-template-columns: 20vw 1fr;
        grid-template-areas: "media heading" "body body";
        column-gap: var(--space-6);
    }
    .wdb-quality__media { align-self: stretch; min-height: 0; }
    /* Industries keeps its 2 columns; the indicator sticks (CSS fallback /
       reduced-motion). When JS takes over it switches to .is-eased (absolute +
       transform) so it can glide with a smoothing lag — see
       wdb-industries-indicator.js. */
    .wdb-industries__indicator { position: sticky; top: var(--pad-top-nav); align-self: start; }
    .wdb-industries__indicator.is-eased {
        position: absolute; top: 0; left: 0; width: 84px;
        align-self: auto;
        padding: 0;              /* translateY positions the 44px box directly */
        will-change: transform;
        z-index: 2;
    }
}
/* ---- MOBILE (≤767) ---- */
@media (max-width: 767px) {
    .wdb-quality__grid { grid-template-columns: 1fr; grid-template-areas: "media" "heading" "body"; }
    .wdb-quality__media { min-height: 240px; }
    .wdb-runbook__title { max-width: none; }
    .wdb-runbook__top { flex-direction: column; margin-bottom: var(--space-8); }
    /* Equal-height cards driven by the tallest one's content. The track
       stretches every card to the row's natural height (= the tallest card),
       fully responsive with no hard-coded height. The card is a GRID
       (1fr body + fixed 60px title row) instead of a flex column: grid
       reliably fills the stretched height in Safari, where a flex:1 child can
       fail to expand — leaving dead space below and floating the title row up. */
    .wdb-card {
        flex-basis: 80vw; max-width: 80vw; height: auto;
        display: grid; grid-template-rows: 1fr 60px;
    }
    .wdb-card--alt { grid-template-rows: 60px 1fr; }
    .wdb-card--alt .wdb-card__title-row { grid-row: 1; }
    .wdb-card--alt .wdb-card__body { grid-row: 2; }
    .wdb-runbook__track { align-items: stretch; }
    /* mobile: content inset by the page padding only; block-2 side rails off */
    .wdb-quality { padding: var(--wdb-sec-y) var(--pad-x); }
    .wdb-block2__rail { display: none; }
    /* runbook mobile: top CTA relocates below the track, into the controls */
    .wdb-runbook__cta-top { display: none; }
    .wdb-runbook__controls {
        display: flex; flex-direction: column; align-items: center;
        gap: var(--space-6); padding: 0 var(--pad-x); margin-top: var(--space-7);
    }
    .wdb-runbook__arrows { display: flex; justify-content: space-between; width: 100%; }
    .wdb-runbook__arrow {
        width: 50px; height: 56px; flex: 0 0 auto; padding: 0;
        display: inline-flex; align-items: center; justify-content: center;
        background: var(--color-black);
        border: var(--guide-width) var(--guide-style) var(--color-grid);
        border-radius: var(--radius); cursor: pointer;
        -webkit-tap-highlight-color: transparent;
    }
    .wdb-runbook__arrow-icon { display: block; width: 16px; height: auto; }
    .wdb-runbook__arrow-icon path { fill: var(--color-white); }
    .wdb-runbook__arrow--prev .wdb-runbook__arrow-icon { transform: rotate(180deg); }
    /* full-bleed divider after the CTA — 100vw, ignores page padding */
    .wdb-runbook__hline {
        display: block; height: 0; width: 100vw;
        position: relative; left: 50%; transform: translateX(-50%);
        margin-top: var(--space-7);
        border-top: var(--guide-width) var(--guide-style) var(--color-grid);
    }
    .wdb-industries { padding: var(--wdb-sec-y) var(--pad-x); }
    .wdb-industries__grid { grid-template-columns: 1fr; }
    .wdb-industries__col { grid-template-columns: 1fr; }
    .wdb-industries__indicator { display: none; }
    /* vertical grid lines overlapped the text in single-column — hide them */
    .wdb-industries__col-vline-left,
    .wdb-industries__col-vline-mid { display: none; }

    /* ── Industries rows → click-to-expand accordion (mobile only) ──
       Row dividers stay; only the <p> collapses. Content stays in the DOM
       (just visually collapsed) so it remains crawlable / SEO-clean.
       .is-accordion is added by wdb-industries.js. */
    .wdb-industries__rows.is-accordion .wdb-industries__row-title {
        display: flex; align-items: center; justify-content: flex-start;
        gap: var(--space-3); margin: 0; cursor: pointer;
    }
    /* per-row identity icon, left of the title (cream box, ~18px icon) */
    .wdb-industries__rows.is-accordion .wdb-industries__row-leadicon {
        display: flex; flex: 0 0 auto; align-items: center; justify-content: center;
        width: 36px; height: 36px;
        background: var(--color-white); border-radius: var(--radius);
        overflow: hidden;
    }
    .wdb-industries__rows.is-accordion .wdb-industries__row-leadicon img {
        display: block; height: 18px; width: auto;
    }
    .wdb-industries__rows.is-accordion .wdb-industries__row-icon {
        display: inline-flex; flex: 0 0 auto; align-items: center; justify-content: center;
        width: 16px; height: 16px; margin-left: auto;   /* push chevron to the right */
        transform: rotate(90deg);   /* base arrow points right → 90° = down (closed) */
        transition: transform var(--duration-fast) var(--ease-primary);
    }
    .wdb-industries__rows.is-accordion .wdb-industries__row-icon svg { display: block; width: 13px; height: auto; }
    /* a touch less bottom space under the industries content on mobile */
    .wdb-industries__content { padding-bottom: var(--space-8); }
    .wdb-industries__rows.is-accordion .wdb-industries__row-icon svg path { fill: var(--color-white); }
    /* open → chevron points up */
    .wdb-industries__rows.is-accordion .wdb-industries__row.is-open .wdb-industries__row-icon { transform: rotate(-90deg); }
    /* panel collapse/expand */
    .wdb-industries__rows.is-accordion .wdb-industries__row > p {
        overflow: hidden; max-height: 0; opacity: 0; margin-top: 0;
        transition: max-height var(--duration-normal) var(--ease-primary),
                    opacity var(--duration-normal) var(--ease-primary),
                    margin-top var(--duration-normal) var(--ease-primary);
    }
    .wdb-industries__rows.is-accordion .wdb-industries__row.is-open > p {
        max-height: 600px; opacity: 1; margin-top: var(--space-5);
    }
    /* frame the dropdown stack: side vertical lines + a closing bottom line
       under the last row (the top line + row dividers already exist) */
    .wdb-industries__rows {
        border-left: var(--guide-width) var(--guide-style) var(--color-grid);
        border-right: var(--guide-width) var(--guide-style) var(--color-grid);
    }
    .wdb-industries__row:last-child { border-bottom: var(--guide-width) var(--guide-style) var(--color-grid); }
    .wdb-world__rail { display: none; }
    /* Mobile layout (per design): title + body sit at the TOP; the section runs
       LONGER than the viewport and the globe drops into the lower part as a big
       circle (130% width via FILL_W, edges cut off) with the closing line + CTA
       centred over its top. Every position below is a tunable CSS var (the
       panel's "Layout (mobile)" group drives them; the fallbacks ARE the
       production defaults — keep them in sync). */
    .wdb-world {
        padding: calc(var(--wdb-sec-y) + 44px) var(--pad-x) var(--wdb-sec-y);   /* extra top room so the map tooltip clears the edge */
        align-items: flex-start;
        min-height: calc(var(--wmob-world-minh, 100) * 1vh);   /* floor only — content drives; the world cuts off at the bottom */
    }
    /* earth → big circle anchored low, foot pushed below the fold */
    .wdb-world__earth {
        inset: auto 0 calc(var(--wmob-earth-bottom, -36) * 1vh) 0;
        width: 100%;
        height: calc(var(--wmob-earth-h, 92) * 1vh);
        transform: none;
    }
    .wdb-world__inner { align-items: flex-start; text-align: left; width: 100%; }
    /* icon stacks ABOVE the title on mobile; title may wrap */
    .wdb-world__loc { flex-direction: column; align-items: flex-start; }
    .wdb-world__loc-title { white-space: normal; }
    /* closing line + CTA break out of the left stack: centred, dropped lower
       over the top of the globe, with extra breathing room above */
    .wdb-world__inner .wdb-world__closing {
        align-self: center; text-align: center;
        margin-top: calc(var(--wmob-closing-drop, 13) * 1vh);
        max-width: 26ch;
    }
    .wdb-world .wdb-cta { align-self: center; margin-top: var(--space-6); }
    /* keep the soft centre-fade aligned with the lowered globe */
    .wdb-world__fade { top: calc(var(--wmob-fade-top, 80) * 1%); opacity: 0; }
    /* tooltip sits diagonally up-right of the icon: its bottom-left corner ≈ the
       icon's top-right corner, kept close. */
    .wdb-world__tooltip { left: 33px; bottom: calc(100% + 12px); }
}