/* ============================================================
   WEB DESIGN BRISBANE — Black block 1 (parallax block)
   Sections 3-5: Beinc Description · Custom Build · Built Right.
   Shared dark background + 2 vertical grid (#444444) rails that
   span the whole block (top of Beinc Description → bottom of Built
   Description). Per-section dashed lines defined below.
   Phase 1: structure + copy. The parallax (this block sliding over
   the pinned Who-Beinc image) is layered in Phase 2.
   ============================================================ */
.wdb-block1 {
    position: relative;
    background: var(--color-black2);
}
/* Parallax curtain (desktop + tablet): pull the block up over the
   pinned Who-Beinc image so it slides over it as you scroll. z-index
   lifts it above the frame side-rails (z4) during the overlap; still
   far below the nav (--z-nav 1100). Mobile keeps normal flow. The
   200vh Who runway + this -100vh cancel out, so nothing below shifts. */
@media (min-width: 768px) {
    .wdb-block1 {
        z-index: 6;
        margin-top: -100vh;
    }
}
/* 2 vertical rails @ global pad-x, grid colour, span the block */
.wdb-block1__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-block1__rail--left  { left:  var(--pad-x); }
.wdb-block1__rail--right { right: var(--pad-x); }

/* shared dashed-line helpers (grid colour) */
.wdb-hline {
    position: absolute;
    left: 0;
    width: 100%;
    height: 0;
    border-top: var(--guide-width) var(--guide-style) var(--color-grid);
    pointer-events: none;
}
.wdb-vline {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 0;
    border-left: var(--guide-width) var(--guide-style) var(--color-grid);
    pointer-events: none;
}

/* shared dark-section body copy */
.wdb-block1 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);
}
.wdb-block1 p + p { margin-top: 1.1em; }


/* ---- Button (About us) — simple Phase-1 version; arrow anim later ---- */
.wdb-btn {
    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-btn:hover { background: transparent; color: var(--color-white); }


/* ============================================================
   SECTION 3 — Beinc Description
   Paragraphs inset from the rails by pad-x; top/bottom pad = pad.
   ============================================================ */
.wdb-beinc-desc {
    position: relative;
    padding: var(--wdb-pad) calc(var(--wdb-pad) * 2);
}
.wdb-beinc-desc__inner { max-width: none; }   /* fill the section width */


/* ============================================================
   SECTION 4 — Custom Build
   2 columns (45 / 55). Left: heading (top) + button (bottom).
   Right: paragraphs. 2 horizontal lines (top/bottom, full width)
   + 1 vertical between the columns.
   ============================================================ */
.wdb-custom { position: relative; padding: 0 var(--pad-x); }
.wdb-custom__hline--top    { top: 0; }
.wdb-custom__hline--bottom { bottom: 0; }

.wdb-custom__grid {
    position: relative;
    display: grid;
    grid-template-columns: 45fr 55fr;
}
.wdb-custom__vline { left: 45%; }

.wdb-custom__left {
    padding: calc(var(--wdb-pad) * 1.5) var(--wdb-pad);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-9);
}
.wdb-custom__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-section);
    color: var(--color-white);
    margin: 0;
}
.wdb-custom__right {
    padding: calc(var(--wdb-pad) * 1.5) var(--wdb-pad);
}


/* ============================================================
   SECTION 5 — Built Right (intro · research · description)
   ============================================================ */
.wdb-built {
    position: relative;
    padding: clamp(120px, 18vh, 200px) calc(var(--wdb-pad) * 2) calc(var(--wdb-pad) * 2);
}

/* Built intro — centred heading + body, both capped ~40vw */
.wdb-built__intro {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 40px;
}
.wdb-built__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-display);
    color: var(--color-white);
    max-width: 40vw;
    margin: 0;
}
.wdb-built__intro-body {
    max-width: 40vw;
}

/* Built research — big statement; 75% / 94% accented blue + larger */
.wdb-built__research {
    padding: clamp(60px, 12vh, 140px) 0;
}
/* .wdb-built prefix raises specificity above `.wdb-block1 p` (0,1,1),
   so the research statement actually renders as a heading, not body. */
.wdb-built .wdb-built__stat {
    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-title);     /* ~36px desktop, responsive down */
    color: var(--color-white);
    margin: 0;
}
.wdb-built__num {
    color: var(--color-blue-web);
    font-size: 1.12em;
}
/* The scrambling digits sit in a fixed-width, tabular inline-block so the
   number can cycle (7→9→3…) without changing width — no shake, no reflow,
   no overflow. The '%' stays outside this span, static. */
.wdb-built__num-digits {
    display: inline-block;
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1;
    text-align: center;
    white-space: nowrap;
}

/* Built description — 2 cols (left fills, right 20vw) + 3 dashed lines */
.wdb-built__desc { position: relative; }
/* The built section is inset by (wdb-pad*2); these lines extend back out
   so they reach the page's global padded edges (pad-x) — no end gap. */
.wdb-built__desc-hline--top,
.wdb-built__desc-hline--bottom {
    left: calc(var(--pad-x) - var(--wdb-pad) * 2);
    width: calc(100% + (var(--wdb-pad) * 2 - var(--pad-x)) * 2);
}
.wdb-built__desc-hline--top    { top: 0; }
.wdb-built__desc-hline--bottom { bottom: 0; }

.wdb-built__desc-grid {
    position: relative;
    display: grid;
    grid-template-columns: 1fr 20vw;
}
.wdb-built__desc-vline { left: calc(100% - 20vw); }

.wdb-built__desc-left  { padding: calc(var(--wdb-pad) * 1.5) var(--wdb-pad); }
.wdb-built__desc-right { padding: calc(var(--wdb-pad) * 1.5) var(--wdb-pad); }

.wdb-built__brand-el { max-width: 125px; margin: 0 auto var(--space-6); }
.wdb-built__brand-el svg { display: block; width: 100%; height: auto; }
/* recolour + scope the inlined Brand-element-animated.svg to #262626 */
.wdb-built__brand-el .bar { fill: var(--color-black); transform-box: fill-box; transform-origin: center; }
.wdb-built__brand-el .h1 { animation: wdbBarHOne   2s   cubic-bezier(.45,0,.55,1) infinite; }
.wdb-built__brand-el .h2 { animation: wdbBarHTwo   2.4s cubic-bezier(.45,0,.55,1) .6s infinite; }
.wdb-built__brand-el .h3 { animation: wdbBarHThree 1.8s cubic-bezier(.45,0,.55,1) 1.1s infinite; }
.wdb-built__brand-el .v1 { animation: wdbBarVOne   2.2s cubic-bezier(.45,0,.55,1) .6s infinite; }
.wdb-built__brand-el .v2 { animation: wdbBarVTwo   2s   cubic-bezier(.45,0,.55,1) .2s infinite; }
.wdb-built__brand-el .v3 { animation: wdbBarVThree 2.6s cubic-bezier(.45,0,.55,1) 1.1s infinite; }
@keyframes wdbBarHOne   { 0%,100% { transform: scaleX(1); } 50% { transform: scaleX(.70); } }
@keyframes wdbBarHTwo   { 0%,100% { transform: scaleX(1); } 50% { transform: scaleX(.72); } }
@keyframes wdbBarHThree { 0%,100% { transform: scaleX(1); } 50% { transform: scaleX(.65); } }
@keyframes wdbBarVOne   { 0%,100% { transform: scaleY(1); } 50% { transform: scaleY(.68); } }
@keyframes wdbBarVTwo   { 0%,100% { transform: scaleY(1); } 50% { transform: scaleY(.70); } }
@keyframes wdbBarVThree { 0%,100% { transform: scaleY(1); } 50% { transform: scaleY(.75); } }

/* .wdb-built prefix raises specificity above `.wdb-block1 p` so this
   renders as a heading (Indivisible medium ~24px desktop), not body. */
.wdb-built .wdb-built__shift {
    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);       /* ~24px desktop, responsive down */
    color: var(--color-white);
    margin: 0;
}


/* ============================================================
   DESKTOP (≥1024px) — doubled inner paddings + research side padding
   ============================================================ */
@media (min-width: 1024px) {
    /* Beinc Description: double the section padding on all sides */
    .wdb-beinc-desc { padding: calc(var(--wdb-pad) * 2) calc(var(--wdb-pad) * 4); }
    /* Custom Build: double each column's inner padding */
    .wdb-custom__left,
    .wdb-custom__right { padding: calc(var(--wdb-pad) * 3) calc(var(--wdb-pad) * 2); }
    /* Built research: add the global page side padding */
    .wdb-built__research { padding-left: var(--pad-x); padding-right: var(--pad-x); }
}


/* ============================================================
   TABLET (≤1023px)
   ============================================================ */
@media (max-width: 1023px) {
    .wdb-built__heading,
    .wdb-built__intro-body { max-width: 70vw; }
}


/* ============================================================
   MOBILE (≤767px)
   Block rails hidden. Custom Build + Built Description collapse to a
   single column; their inner vertical lines drop, content stacks.
   ============================================================ */
@media (max-width: 767px) {
    .wdb-block1__rail { display: none; }

    /* Content at the page padding; consistent section rhythm top/bottom. */
    .wdb-beinc-desc { padding: var(--wdb-sec-y) var(--pad-x); }

    /* Custom Build → single column; the CTA drops BELOW the body copy.
       display:contents promotes the heading + button out of __left so
       `order` can interleave them with the right column. .wdb-custom already
       carries pad-x, so inner columns add no extra horizontal padding. */
    .wdb-custom__grid { display: flex; flex-direction: column; }
    .wdb-custom__vline { display: none; }
    .wdb-custom__left { display: contents; }
    .wdb-custom__heading { order: 1; padding: var(--wdb-sec-y) 0 0; }
    .wdb-custom__right { order: 2; padding: calc(var(--wdb-pad) * 1.5) 0; }
    /* button hugs its content rather than stretching to full width */
    .wdb-custom__left > .wdb-btn { order: 3; align-self: flex-start; margin: 0 0 var(--wdb-sec-y); }

    /* Built Right: content at the page padding; consistent section rhythm. */
    .wdb-built { padding: var(--wdb-sec-y) var(--pad-x); }
    .wdb-built__heading,
    .wdb-built__intro-body { max-width: 100%; }
    .wdb-built__desc-left,
    .wdb-built__desc-right { padding-left: 0; padding-right: 0; }
    /* desc top line (after the research stat) spans the full screen width with
       no side padding; trailing bottom line removed */
    .wdb-built__desc-hline--top { left: 50%; transform: translateX(-50%); width: 100vw; }
    .wdb-built__desc-hline--bottom { display: none; }

    .wdb-built__desc-grid { grid-template-columns: 1fr; }
    .wdb-built__desc-vline { display: none; }
    /* the animated icon drops BELOW the shift heading, with more breathing room */
    .wdb-built__desc-right { display: flex; flex-direction: column; }
    .wdb-built__shift { order: 1; }
    .wdb-built__brand-el { order: 2; margin-top: var(--space-8); margin-bottom: 0; }
}