/* ==========================================================================
   BUILDORA CONSTRUCTIONS — Theme Stylesheet
   ========================================================================== */

:root {
    --primary-color: #BF552B;
    --secondary-color: #101820;
    --color-accent: var(--primary-color);
    --color-dark: var(--secondary-color);
    --page-anchor-offset: 76px;
}

body {
    margin: 0;
    overflow-x: clip;
    background-color: #F5F3EF;
    color: #26313A;
    font-family: "Manrope", "Helvetica Neue", Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

@media (prefers-reduced-motion: no-preference) {
    html {
        scroll-behavior: smooth;
    }
}

main > section[id],
body > footer[id] {
    scroll-margin-top: var(--page-anchor-offset);
}

.buildora-services + .buildora-why {
    padding-top: calc(var(--bw-space) * 0.25);
}

@media (max-width: 1439px) { html { --page-anchor-offset: 72px; } }
@media (max-width: 1199px) { html { --page-anchor-offset: 70px; } }
@media (max-width: 1023px) { html { --page-anchor-offset: 68px; } }
@media (max-width: 767px)  { html { --page-anchor-offset: 64px; } }

/* ==========================================================================
   BUILDORA CONSTRUCTIONS — Header
   Component: .buildora-header
   ========================================================================== */

/* --------------------------------------------------------------------------
   Tokens — each falls back to a global theme token when one is defined
   -------------------------------------------------------------------------- */
.buildora-header {
    --bh-dark: var(--color-dark, #101820);
    --bh-text: var(--color-text, #26313A);
    --bh-muted: var(--color-muted, #5E6870);
    --bh-accent: var(--color-accent, #BF552B);
    --bh-accent-dark: var(--color-accent-dark, #A2461F);
    --bh-white: var(--color-white, #FFFFFF);
    --bh-surface: var(--color-off-white, #F5F3EF);
    --bh-surface-raised: #FAF9F7;
    --bh-border: var(--color-border, rgba(16, 24, 32, 0.12));

    --bh-font-display: var(--font-display, "Inter Tight", "Helvetica Neue", Arial, sans-serif);
    --bh-font-body: var(--font-body, "Manrope", "Helvetica Neue", Arial, sans-serif);

    --bh-max: 1440px;
    --bh-gutter: clamp(20px, 4.4vw, 64px);
    --bh-height: 96px;
    --bh-height-scrolled: 76px;
    --bh-nav-gap: clamp(24px, 2.8vw, 44px);
    --bh-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
    --bh-duration: 0.35s;

    /* In-flow placeholder so the fixed bar never causes a layout jump */
    position: relative;
    z-index: 100;
    height: var(--bh-height);
    font-family: var(--bh-font-body);
    color: var(--bh-text);
}

.buildora-header *,
.buildora-header *::before,
.buildora-header *::after {
    box-sizing: border-box;
}

.buildora-header svg {
    display: block;
    flex-shrink: 0;
}

/* --------------------------------------------------------------------------
   Bar (fixed) + inner container
   -------------------------------------------------------------------------- */
.buildora-header__bar {
    position: fixed;
    inset: 0 0 auto 0;
    z-index: 2;
    height: var(--bh-height);
    background-color: var(--bh-surface-raised);
    border-bottom: 1px solid transparent;
    transition:
        height var(--bh-duration) var(--bh-ease),
        background-color var(--bh-duration) var(--bh-ease),
        border-color var(--bh-duration) var(--bh-ease),
        box-shadow var(--bh-duration) var(--bh-ease);
}

.buildora-header.is-scrolled .buildora-header__bar {
    height: var(--bh-height-scrolled);
    background-color: rgba(250, 249, 247, 0.92);
    border-bottom-color: var(--bh-border);
    box-shadow: 0 10px 30px -18px rgba(16, 24, 32, 0.28);
    -webkit-backdrop-filter: saturate(140%) blur(12px);
    backdrop-filter: saturate(140%) blur(12px);
}

/* While the mobile menu is open the bar stays solid and flat */
.buildora-header.is-menu-open .buildora-header__bar {
    background-color: var(--bh-surface);
    border-bottom-color: var(--bh-border);
    box-shadow: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}

.buildora-header__inner {
    display: flex;
    align-items: center;
    gap: clamp(20px, 3vw, 48px);
    width: 100%;
    max-width: var(--bh-max);
    height: 100%;
    margin-inline: auto;
    padding-inline: var(--bh-gutter);
}

/* --------------------------------------------------------------------------
   Logo
   -------------------------------------------------------------------------- */
.buildora-header__logo {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    flex-shrink: 0;
    color: var(--bh-dark);
    text-decoration: none;
    border-radius: 2px;
}

.buildora-header__logo-mark {
    width: 44px;
    height: 48px;
    transition: transform var(--bh-duration) var(--bh-ease);
}

.buildora-header.is-scrolled .buildora-header__logo-mark {
    transform: scale(0.9);
}

.buildora-header__logo-text {
    display: flex;
    flex-direction: column;
    gap: 6px;
    line-height: 1;
}

.buildora-header__logo-name {
    font-family: var(--bh-font-display);
    font-size: 27px;
    font-weight: 800;
    letter-spacing: 0.085em;
    text-transform: uppercase;
}

.buildora-header__logo-tagline {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.46em;
    text-transform: uppercase;
    color: var(--bh-muted);
}

/* --------------------------------------------------------------------------
   Desktop navigation
   -------------------------------------------------------------------------- */
.buildora-header__nav {
    flex: 1 1 auto;
    display: flex;
    justify-content: center;
}

.buildora-header__nav-list {
    display: flex;
    align-items: center;
    gap: var(--bh-nav-gap);
    margin: 0;
    padding: 0;
    list-style: none;
}

.buildora-header__nav-link {
    position: relative;
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    font-size: 15px;
    font-weight: 500;
    letter-spacing: 0.005em;
    color: var(--bh-text);
    text-decoration: none;
    white-space: nowrap;
    transition: color var(--bh-duration) var(--bh-ease);
}

.buildora-header__nav-link::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 4px;
    height: 2px;
    background-color: var(--bh-accent);
    transform: scaleX(0);
    transform-origin: right center;
    transition: transform 0.45s var(--bh-ease);
}

.buildora-header__nav-link:hover,
.buildora-header__nav-link.is-active {
    color: var(--bh-accent);
}

.buildora-header__nav-link:hover::after,
.buildora-header__nav-link.is-active::after {
    transform: scaleX(1);
    transform-origin: left center;
}

/* --------------------------------------------------------------------------
   Actions: search, CTA, hamburger
   -------------------------------------------------------------------------- */
.buildora-header__actions {
    display: flex;
    align-items: center;
    gap: clamp(16px, 2.4vw, 40px);
    flex-shrink: 0;
}

.buildora-header__search {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    color: var(--bh-dark);
    background: none;
    border: 0;
    border-radius: 50%;
    cursor: pointer;
    transition: color var(--bh-duration) var(--bh-ease), background-color var(--bh-duration) var(--bh-ease);
}

.buildora-header__search:hover {
    color: var(--bh-accent);
    background-color: rgba(16, 24, 32, 0.05);
}

.buildora-header__search svg {
    width: 20px;
    height: 20px;
}

.buildora-header__cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    min-height: 50px;
    padding: 0 28px;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 0.01em;
    color: var(--bh-white);
    text-decoration: none;
    white-space: nowrap;
    background-color: var(--bh-accent);
    border-radius: 2px;
    transition: background-color var(--bh-duration) var(--bh-ease);
}

.buildora-header__cta:hover {
    background-color: var(--bh-accent-dark);
}

.buildora-header__cta-icon {
    width: 16px;
    height: 16px;
    transition: transform var(--bh-duration) var(--bh-ease);
}

.buildora-header__cta:hover .buildora-header__cta-icon {
    transform: translateX(4px);
}

/* Hamburger — hidden on desktop */
.buildora-header__toggle {
    position: relative;
    display: none;
    width: 48px;
    height: 48px;
    padding: 0;
    color: var(--bh-dark);
    background: none;
    border: 1px solid var(--bh-border);
    border-radius: 2px;
    cursor: pointer;
    transition: border-color var(--bh-duration) var(--bh-ease);
}

.buildora-header__toggle:hover {
    border-color: var(--bh-dark);
}

.buildora-header__toggle-line {
    position: absolute;
    left: 13px;
    width: 20px;
    height: 1.5px;
    background-color: currentColor;
    transition: transform 0.4s var(--bh-ease), width 0.4s var(--bh-ease), top 0.4s var(--bh-ease);
}

.buildora-header__toggle-line:nth-child(1) { top: 18px; }
.buildora-header__toggle-line:nth-child(2) { top: 28px; width: 13px; }

.buildora-header__toggle:hover .buildora-header__toggle-line:nth-child(2) { width: 20px; }

.buildora-header__toggle[aria-expanded="true"] .buildora-header__toggle-line:nth-child(1) {
    top: 23px;
    transform: rotate(45deg);
}

.buildora-header__toggle[aria-expanded="true"] .buildora-header__toggle-line:nth-child(2) {
    top: 23px;
    width: 20px;
    transform: rotate(-45deg);
}

/* --------------------------------------------------------------------------
   Focus states
   -------------------------------------------------------------------------- */
.buildora-header a:focus-visible,
.buildora-header button:focus-visible {
    outline: 2px solid var(--bh-accent);
    outline-offset: 4px;
}

.buildora-header__cta:focus-visible,
.buildora-header__menu-cta:focus-visible {
    outline-color: var(--bh-dark);
}

/* --------------------------------------------------------------------------
   Mobile menu overlay
   -------------------------------------------------------------------------- */
.buildora-header__menu {
    position: fixed;
    inset: 0;
    z-index: 1;
    display: none;
    flex-direction: column;
    padding: calc(var(--bh-height) + clamp(24px, 6vh, 56px)) var(--bh-gutter) clamp(24px, 5vh, 48px);
    overflow-y: auto;
    overscroll-behavior: contain;
    background-color: var(--bh-surface);
    visibility: hidden;
    opacity: 0;
}

/* No-JS / no-GSAP fallback: CSS-only toggling */
.buildora-header.is-menu-open .buildora-header__menu {
    visibility: visible;
    opacity: 1;
}

/* Fine architectural grid lines behind the menu */
.buildora-header__menu::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background-image: linear-gradient(to right, var(--bh-border) 1px, transparent 1px);
    background-size: calc((100% - 2 * var(--bh-gutter)) / 4) 100%;
    background-position: var(--bh-gutter) 0;
    opacity: 0.45;
}

.buildora-header__menu-nav {
    flex: 1 0 auto;
}

.buildora-header__menu-list {
    margin: 0;
    padding: 0;
    list-style: none;
    border-top: 1px solid var(--bh-border);
}

.buildora-header__menu-item {
    border-bottom: 1px solid var(--bh-border);
    overflow: hidden;
}

.buildora-header__menu-link {
    display: flex;
    align-items: baseline;
    gap: 20px;
    padding: clamp(14px, 2.4vh, 22px) 0;
    font-family: var(--bh-font-display);
    font-size: clamp(30px, 6.4vw, 52px);
    font-weight: 700;
    line-height: 1.05;
    letter-spacing: -0.015em;
    text-transform: uppercase;
    color: var(--bh-dark);
    text-decoration: none;
    transition: color var(--bh-duration) var(--bh-ease);
}

.buildora-header__menu-index {
    min-width: 2ch;
    font-family: var(--bh-font-body);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.2em;
    color: var(--bh-muted);
}

.buildora-header__menu-label {
    transition: transform 0.45s var(--bh-ease);
}

.buildora-header__menu-link:hover,
.buildora-header__menu-link.is-active {
    color: var(--bh-accent);
}

.buildora-header__menu-link:hover .buildora-header__menu-label {
    transform: translateX(8px);
}

.buildora-header__menu-link:focus-visible {
    outline-offset: -2px;
}

.buildora-header__menu-footer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 20px 32px;
    padding-top: clamp(28px, 5vh, 48px);
}

.buildora-header__menu-tagline {
    margin: 0;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.34em;
    text-transform: uppercase;
    color: var(--bh-muted);
}

.buildora-header__menu-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    min-height: 56px;
    padding: 0 32px;
    font-size: 16px;
    font-weight: 600;
    color: var(--bh-white);
    text-decoration: none;
    background-color: var(--bh-accent);
    border-radius: 2px;
    transition: background-color var(--bh-duration) var(--bh-ease);
}

.buildora-header__menu-cta:hover {
    background-color: var(--bh-accent-dark);
}

.buildora-header__menu-cta svg {
    width: 16px;
    height: 16px;
    transition: transform var(--bh-duration) var(--bh-ease);
}

.buildora-header__menu-cta:hover svg {
    transform: translateX(4px);
}

/* Scroll lock while the mobile menu is open */
html.buildora-menu-open,
html.buildora-menu-open body {
    overflow: hidden;
}

/* --------------------------------------------------------------------------
   Intro visibility guard (JS adds .has-js on <html>; header.js reveals).
   The keyframe is a failsafe in case scripts never run.
   -------------------------------------------------------------------------- */
.has-js .buildora-header:not(.is-ready) .buildora-header__inner {
    opacity: 0;
    animation: buildora-header-failsafe 0s linear 2.5s forwards;
}

@keyframes buildora-header-failsafe {
    to { opacity: 1; }
}

/* ==========================================================================
   Laptop — 1200px to 1439px
   ========================================================================== */
@media (max-width: 1439px) {
    .buildora-header {
        --bh-height: 90px;
        --bh-height-scrolled: 72px;
        --bh-nav-gap: clamp(22px, 2.4vw, 36px);
    }

    .buildora-header__logo-name { font-size: 25px; }
}

/* ==========================================================================
   Tablet landscape — 1024px to 1199px
   ========================================================================== */
@media (max-width: 1199px) {
    .buildora-header {
        --bh-height: 84px;
        --bh-height-scrolled: 70px;
        --bh-nav-gap: 22px;
        --bh-gutter: 32px;
    }

    .buildora-header__inner { gap: 20px; }

    .buildora-header__logo { gap: 11px; }
    .buildora-header__logo-mark { width: 38px; height: 42px; }
    .buildora-header__logo-name { font-size: 22px; }
    .buildora-header__logo-tagline { font-size: 9px; letter-spacing: 0.4em; }

    .buildora-header__nav-link { font-size: 14.5px; }

    .buildora-header__actions { gap: 12px; }

    .buildora-header__cta {
        min-height: 46px;
        padding: 0 20px;
        font-size: 14.5px;
    }
}

/* ==========================================================================
   Tablet portrait — 768px to 1023px  (switch to hamburger)
   ========================================================================== */
@media (max-width: 1023px) {
    .buildora-header {
        --bh-height: 80px;
        --bh-height-scrolled: 68px;
    }

    .buildora-header__inner { justify-content: space-between; }

    .buildora-header__nav,
    .buildora-header__search {
        display: none;
    }

    .buildora-header__toggle { display: inline-block; }

    .buildora-header__menu { display: flex; }
}

/* ==========================================================================
   Mobile — up to 767px
   ========================================================================== */
@media (max-width: 767px) {
    .buildora-header {
        --bh-height: 72px;
        --bh-height-scrolled: 64px;
        --bh-gutter: 20px;
    }

    /* CTA lives in the overlay on phones */
    .buildora-header__actions .buildora-header__cta { display: none; }

    .buildora-header__logo-mark { width: 34px; height: 38px; }
    .buildora-header__logo-name { font-size: 20px; }
    .buildora-header__logo-tagline { font-size: 8.5px; letter-spacing: 0.38em; }

    .buildora-header__menu-footer {
        flex-direction: column-reverse;
        align-items: stretch;
    }

    .buildora-header__menu-cta { width: 100%; }
    .buildora-header__menu-tagline { text-align: center; }
}

/* ==========================================================================
   Small mobile — up to 480px
   ========================================================================== */
@media (max-width: 480px) {
    .buildora-header {
        --bh-gutter: 16px;
    }

    .buildora-header__logo { gap: 9px; }
    .buildora-header__logo-mark { width: 30px; height: 34px; }
    .buildora-header__logo-name { font-size: 18px; letter-spacing: 0.07em; }
    .buildora-header__logo-tagline { font-size: 7.5px; letter-spacing: 0.36em; }

    .buildora-header__toggle { width: 44px; height: 44px; }
    .buildora-header__toggle-line { left: 11px; }
    .buildora-header__toggle-line:nth-child(1) { top: 16px; }
    .buildora-header__toggle-line:nth-child(2) { top: 26px; }
    .buildora-header__toggle[aria-expanded="true"] .buildora-header__toggle-line:nth-child(1),
    .buildora-header__toggle[aria-expanded="true"] .buildora-header__toggle-line:nth-child(2) { top: 21px; }

    .buildora-header__menu-link { gap: 14px; }
}

/* ==========================================================================
   Reduced motion
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
    .buildora-header *,
    .buildora-header *::before,
    .buildora-header *::after {
        transition-duration: 0.01ms !important;
    }

    .buildora-header__bar {
        transition: background-color 0.2s linear, border-color 0.2s linear;
    }
}

/* ==========================================================================
   BUILDORA CONSTRUCTIONS — Hero Banner (single cinematic hero, no slider)
   Component: .buildora-hero
   Breakpoints:
     Desktop            1440px+
     Laptop             1200px – 1439px
     Tablet landscape   1024px – 1199px
     Tablet portrait     768px – 1023px   (stacked composition)
     Mobile             up to 767px
     Small mobile       up to 480px
   ========================================================================== */

/* --------------------------------------------------------------------------
   Tokens — each falls back to a global theme token when one is defined
   -------------------------------------------------------------------------- */
.buildora-hero {
    --hero-dark: var(--color-dark, #101820);
    --hero-text: var(--color-text, #26313A);
    --hero-muted: var(--color-muted, #5E6870);
    --hero-accent: var(--color-accent, #BF552B);
    --hero-accent-dark: var(--color-accent-dark, #A2461F);
    --hero-white: var(--color-white, #FFFFFF);
    --hero-surface: var(--color-off-white, #F5F3EF);
    --hero-surface-deep: #ECE7E0;
    --hero-border: var(--color-border, rgba(16, 24, 32, 0.12));

    --hero-font-display: var(--font-display, "Inter Tight", "Helvetica Neue", Arial, sans-serif);
    --hero-font-body: var(--font-body, "Manrope", "Helvetica Neue", Arial, sans-serif);

    /* Layout */
    --hero-max: 1440px;
    --hero-gutter: clamp(20px, 4.4vw, 64px);
    --hero-bleed: max(var(--hero-gutter), calc((100% - var(--hero-max)) / 2 + var(--hero-gutter)));
    --hero-header-offset: 96px;           /* matches the header height */
    --hero-stage-min: clamp(640px, calc(100vh - var(--hero-header-offset) - 120px), 820px);
    --hero-feature-w: clamp(220px, 17vw, 264px);
    --hero-detail-w: clamp(160px, 15.5vw, 236px);
    --hero-overlap: 32px;                 /* tiles rising over the image */

    --hero-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
    --hero-duration: 0.4s;

    position: relative;
    overflow: hidden;
    font-family: var(--hero-font-body);
    color: var(--hero-text);
    background:
        radial-gradient(90% 70% at 18% 100%, rgba(226, 178, 138, 0.22), transparent 62%),
        var(--hero-surface);
}

@supports (height: 100svh) {
    .buildora-hero {
        --hero-stage-min: clamp(640px, calc(100svh - var(--hero-header-offset) - 120px), 820px);
    }
}

.buildora-hero *,
.buildora-hero *::before,
.buildora-hero *::after {
    box-sizing: border-box;
}

.buildora-hero svg {
    display: block;
    flex-shrink: 0;
}

.buildora-hero :where(p, figure, h1, ul) {
    margin: 0;
}

/* --------------------------------------------------------------------------
   Stage — 12-column architectural grid with full-bleed edges
   Column lines: 1 full-start | 2 content-start | 3–13 | 14 content-end | 15 full-end
   -------------------------------------------------------------------------- */
.buildora-hero__stage {
    position: relative;
    display: grid;
    grid-template-columns: var(--hero-bleed) repeat(12, minmax(0, 1fr)) var(--hero-bleed);
    grid-template-rows: minmax(var(--hero-stage-min), auto);
}

/* Soft architectural arc behind the content */
.buildora-hero__arc {
    position: absolute;
    top: -34%;
    left: -6%;
    z-index: 0;
    width: min(64vw, 1000px);
    aspect-ratio: 1;
    border-radius: 50%;
    background: linear-gradient(165deg, rgba(255, 255, 255, 0.85) 12%, rgba(255, 255, 255, 0) 72%);
    pointer-events: none;
}

/* --------------------------------------------------------------------------
   Content
   -------------------------------------------------------------------------- */
.buildora-hero__content {
    position: relative;
    z-index: 2;
    grid-column: 2 / 8;
    grid-row: 1;
    align-self: center;
    padding-block: clamp(56px, 8vh, 96px);
}

.buildora-hero__eyebrow {
    display: flex;
    align-items: flex-start;
    gap: 28px;
    font-size: 12px;
    font-weight: 500;
    line-height: 2;
    letter-spacing: 0.42em;
    text-transform: uppercase;
    color: var(--hero-muted);
}

.buildora-hero__eyebrow-line {
    flex: 0 0 48px;
    height: 1.5px;
    margin-top: 1em;
    background-color: var(--hero-accent);
}

.buildora-hero__title {
    margin: clamp(32px, 3vw, 44px) 0 clamp(28px, 2.4vw, 36px);
    font-family: var(--hero-font-display);
    font-size: clamp(52px, 6.4vw, 104px);
    font-weight: 800;
    line-height: 0.94;
    letter-spacing: -0.028em;
    text-transform: uppercase;
    color: var(--hero-dark);
}

/* Each authored line is its own mask; wrapping inside a line still works */
.buildora-hero__title-line {
    display: block;
    overflow: hidden;
    padding-block: 0.03em;
}

.buildora-hero__title-text {
    display: block;
}

.buildora-hero__title-text--accent {
    color: var(--hero-accent);
}

.buildora-hero__description {
    max-width: 31em;
    font-size: clamp(17px, 1.3vw, 19px);
    line-height: 1.6;
    color: var(--hero-text);
}

.buildora-hero__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 20px clamp(28px, 3vw, 44px);
    margin-top: clamp(32px, 3.4vw, 44px);
}

/* Primary button */
.buildora-hero__button {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    min-height: 58px;
    padding: 0 36px;
    overflow: hidden;
    font-size: 16px;
    font-weight: 600;
    letter-spacing: 0.01em;
    color: var(--hero-white);
    text-decoration: none;
    background-color: var(--hero-accent);
    border-radius: 2px;
    isolation: isolate;
    transition: background-color var(--hero-duration) var(--hero-ease);
}

/* Subtle light sweep on hover */
.buildora-hero__button::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(105deg, transparent 30%, rgba(255, 255, 255, 0.16) 50%, transparent 70%);
    transform: translateX(-110%);
    transition: transform 0.8s var(--hero-ease);
}

.buildora-hero__button:hover {
    background-color: var(--hero-accent-dark);
}

.buildora-hero__button:hover::before {
    transform: translateX(110%);
}

.buildora-hero__button-icon {
    width: 16px;
    height: 16px;
    transition: transform var(--hero-duration) var(--hero-ease);
}

.buildora-hero__button:hover .buildora-hero__button-icon {
    transform: translateX(5px);
}

/* Video button (UI only) */
.buildora-hero__video {
    display: inline-flex;
    align-items: center;
    gap: 18px;
    min-height: 58px;
    padding: 0;
    font: inherit;
    font-size: 16px;
    font-weight: 600;
    color: var(--hero-dark);
    background: none;
    border: 0;
    cursor: pointer;
}

.buildora-hero__video-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border: 1px solid rgba(16, 24, 32, 0.45);
    border-radius: 50%;
    transition:
        transform var(--hero-duration) var(--hero-ease),
        border-color var(--hero-duration) var(--hero-ease),
        background-color var(--hero-duration) var(--hero-ease);
}

.buildora-hero__video-icon svg {
    width: 14px;
    height: 14px;
    margin-left: 3px;
    transition: transform var(--hero-duration) var(--hero-ease);
}

.buildora-hero__video:hover .buildora-hero__video-icon {
    transform: scale(1.07);
    border-color: var(--hero-dark);
    background-color: rgba(255, 255, 255, 0.6);
}

.buildora-hero__video:hover .buildora-hero__video-icon svg {
    transform: translateX(2px);
}

/* --------------------------------------------------------------------------
   Media — single hero image, parallax frame, clip reveal
   -------------------------------------------------------------------------- */
.buildora-hero__media {
    position: relative;
    z-index: 1;
    grid-column: 7 / -1;
    grid-row: 1;
    overflow: hidden;
    background-color: var(--hero-surface-deep);
    /* Feather the left edge into the page surface */
    -webkit-mask-image: linear-gradient(90deg, transparent 0, rgba(0, 0, 0, 0.5) 12%, #000 30%);
    mask-image: linear-gradient(90deg, transparent 0, rgba(0, 0, 0, 0.5) 12%, #000 30%);
}

/* Oversized so parallax travel never exposes an edge */
.buildora-hero__media-frame {
    position: absolute;
    inset: -10% 0;
    will-change: transform;
}

.buildora-hero__image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 45% 45%;
    filter: saturate(0.9) contrast(1.05) sepia(0.1) brightness(1.02);
}

/* Upper-right values notch — cut out of the image in the page surface */
.buildora-hero__values {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 3;
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 30px var(--hero-bleed) 30px 30px;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.6;
    letter-spacing: 0.42em;
    text-transform: uppercase;
    color: var(--hero-muted);
    list-style: none;
    background-color: var(--hero-surface);
}

.buildora-hero__values::before {
    content: "";
    position: absolute;
    top: 30px;
    bottom: 30px;
    left: 0;
    width: 1.5px;
    background-color: var(--hero-accent);
}

/* Lower-right statement panel */
.buildora-hero__statement {
    position: absolute;
    right: 0;
    bottom: var(--hero-overlap);
    z-index: 3;
    width: calc(var(--hero-detail-w) + var(--hero-bleed));
    padding: clamp(28px, 3vw, 44px) var(--hero-bleed) clamp(28px, 3vw, 44px) clamp(28px, 2.6vw, 40px);
    font-size: 12px;
    font-weight: 500;
    line-height: 2.1;
    letter-spacing: 0.4em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.92);
    background-color: rgba(16, 24, 32, 0.84);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
}

.buildora-hero__statement::after {
    content: "";
    display: block;
    width: 40px;
    height: 1.5px;
    margin-top: 20px;
    background-color: var(--hero-accent);
}

/* --------------------------------------------------------------------------
   Scroll indicator
   -------------------------------------------------------------------------- */
.buildora-hero__scroll {
    position: absolute;
    left: calc(var(--hero-bleed) / 2);
    bottom: clamp(40px, 6vh, 72px);
    z-index: 3;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 18px;
    padding: 8px 4px;
    color: var(--hero-dark);
    background: none;
    border: 0;
    cursor: pointer;
    transform: translateX(-50%);
}

.buildora-hero__scroll-label {
    font: inherit;
    font-family: var(--hero-font-body);
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.34em;
    text-transform: uppercase;
    writing-mode: vertical-rl;
    transform: rotate(180deg);
}

.buildora-hero__scroll-track {
    position: relative;
    width: 1px;
    height: 56px;
    overflow: hidden;
    background-color: rgba(16, 24, 32, 0.22);
}

.buildora-hero__scroll-dot {
    position: absolute;
    top: 0;
    left: -1.5px;
    width: 4px;
    height: 14px;
    border-radius: 2px;
    background-color: var(--hero-accent);
}

.buildora-hero__scroll:hover .buildora-hero__scroll-track {
    background-color: rgba(16, 24, 32, 0.45);
}

/* --------------------------------------------------------------------------
   Base — statistics strip + feature tile + detail image
   Column lines: 1 | 2 stats | 3 feature | 4 detail | 5 bleed | 6
   -------------------------------------------------------------------------- */
.buildora-hero__base {
    position: relative;
    z-index: 3;
    display: grid;
    grid-template-columns:
        var(--hero-bleed)
        minmax(0, 1fr)
        var(--hero-feature-w)
        var(--hero-detail-w)
        var(--hero-bleed);
}

.buildora-hero__stats {
    grid-column: 2 / 3;
    grid-row: 1;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    padding: clamp(40px, 4.4vw, 60px) clamp(20px, 2vw, 32px) clamp(40px, 4.4vw, 60px) 0;
    list-style: none;
}

.buildora-hero__stat {
    display: flex;
    align-items: center;
    gap: clamp(16px, 1.8vw, 26px);
    padding-inline: clamp(16px, 2.4vw, 40px);
    border-left: 1px solid var(--hero-border);
}

.buildora-hero__stat:first-child {
    padding-left: 0;
    border-left: 0;
}

.buildora-hero__stat-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: clamp(52px, 4.4vw, 64px);
    height: clamp(52px, 4.4vw, 64px);
    color: var(--hero-dark);
    background-color: var(--hero-surface-deep);
}

.buildora-hero__stat-icon svg {
    width: 44%;
    height: 44%;
}

.buildora-hero__stat-body {
    min-width: 0;
}

.buildora-hero__stat-value {
    font-family: var(--hero-font-display);
    font-size: clamp(26px, 2.2vw, 32px);
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.01em;
    color: var(--hero-dark);
    font-variant-numeric: tabular-nums;
}

.buildora-hero__stat-label {
    margin-top: 12px;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.5;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--hero-muted);
}

.buildora-hero__stat-label::after {
    content: "";
    display: block;
    width: 32px;
    height: 1.5px;
    margin-top: 14px;
    background-color: var(--hero-accent);
}

/* Feature tile (video prompt) */
.buildora-hero__feature {
    position: relative;
    grid-column: 3 / 4;
    grid-row: 1;
    display: flex;
    align-items: center;
    gap: 24px;
    margin-top: calc(-1 * var(--hero-overlap));
    padding: 32px clamp(24px, 2.4vw, 40px);
    overflow: hidden;
    font: inherit;
    text-align: left;
    color: var(--hero-white);
    background-color: var(--hero-accent);
    border: 0;
    border-radius: 0;
    cursor: pointer;
    transition: background-color var(--hero-duration) var(--hero-ease);
}

.buildora-hero__feature:hover {
    background-color: var(--hero-accent-dark);
}

.buildora-hero__feature-pattern {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.buildora-hero__feature-icon {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 48px;
    height: 48px;
    border: 1.5px solid rgba(255, 255, 255, 0.9);
    border-radius: 50%;
    transition: transform var(--hero-duration) var(--hero-ease);
}

.buildora-hero__feature-icon svg {
    width: 12px;
    height: 12px;
    margin-left: 2px;
}

.buildora-hero__feature:hover .buildora-hero__feature-icon {
    transform: scale(1.08);
}

.buildora-hero__feature-text {
    position: relative;
    font-size: 11px;
    font-weight: 600;
    line-height: 2;
    letter-spacing: 0.36em;
    text-transform: uppercase;
}

/* Detail image tile */
.buildora-hero__detail {
    position: relative;
    grid-column: 4 / 6;
    grid-row: 1;
    margin-top: calc(-1 * var(--hero-overlap));
    overflow: hidden;
    background-color: #2A3036;
}

.buildora-hero__detail-image {
    position: absolute;
    inset: -12% 0;
    width: 100%;
    height: 124%;
    object-fit: cover;
    object-position: 30% 40%;
    filter: grayscale(1) contrast(1.12) brightness(0.95);
}

/* --------------------------------------------------------------------------
   Focus states
   -------------------------------------------------------------------------- */
.buildora-hero a:focus-visible,
.buildora-hero button:focus-visible {
    outline: 2px solid var(--hero-accent);
    outline-offset: 4px;
}

.buildora-hero__button:focus-visible,
.buildora-hero__feature:focus-visible {
    outline-color: var(--hero-dark);
}

.buildora-hero__feature:focus-visible {
    outline-offset: -4px;
    outline-color: var(--hero-white);
}

/* --------------------------------------------------------------------------
   Entrance visibility guard (html.has-js set inline; hero-banner.js reveals).
   The keyframe is a failsafe if scripts never run.
   -------------------------------------------------------------------------- */
.has-js .buildora-hero:not(.is-ready) [data-hero-reveal] {
    opacity: 0;
    animation: buildora-hero-failsafe 0s linear 2.5s forwards;
}

@keyframes buildora-hero-failsafe {
    to { opacity: 1; }
}

/* ==========================================================================
   Laptop — 1200px to 1439px
   ========================================================================== */
@media (max-width: 1439px) {
    .buildora-hero {
        --hero-header-offset: 90px;
    }

    .buildora-hero__values {
        padding-block: 26px;
        font-size: 10.5px;
    }

    .buildora-hero__values::before {
        top: 26px;
        bottom: 26px;
    }
}

/* ==========================================================================
   Tablet landscape — 1024px to 1199px (split layout kept, tighter)
   ========================================================================== */
@media (max-width: 1199px) {
    .buildora-hero {
        --hero-gutter: 32px;
        --hero-header-offset: 84px;
        --hero-stage-min: 600px;
        --hero-feature-w: 232px;
        --hero-detail-w: 0px;
        --hero-overlap: 28px;
    }

    .buildora-hero__content { grid-column: 2 / 9; }
    .buildora-hero__media   { grid-column: 8 / -1; }

    .buildora-hero__media {
        -webkit-mask-image: linear-gradient(90deg, transparent 0, rgba(0, 0, 0, 0.6) 10%, #000 24%);
        mask-image: linear-gradient(90deg, transparent 0, rgba(0, 0, 0, 0.6) 10%, #000 24%);
    }

    .buildora-hero__title { font-size: clamp(52px, 6.2vw, 72px); }

    .buildora-hero__description { max-width: 26em; }

    .buildora-hero__arc { width: 70vw; top: -30%; }

    .buildora-hero__scroll { display: none; }

    .buildora-hero__statement {
        width: calc(var(--hero-feature-w) + var(--hero-bleed));
        font-size: 11px;
    }

    .buildora-hero__feature { grid-column: 3 / 6; padding-right: calc(var(--hero-bleed) + 8px); }
    .buildora-hero__detail  { display: none; }

    .buildora-hero__stat { padding-inline: 18px; gap: 14px; }
    .buildora-hero__stat-label { letter-spacing: 0.16em; }
}

/* ==========================================================================
   Tablet portrait — 768px to 1023px (stacked: text → image → stats)
   ========================================================================== */
@media (max-width: 1023px) {
    .buildora-hero {
        --hero-header-offset: 80px;
        --hero-overlap: 0px;
    }

    .buildora-hero__stage {
        grid-template-rows: auto auto;
    }

    .buildora-hero__content {
        grid-column: 2 / 14;
        padding-block: 64px 56px;
    }

    .buildora-hero__title { font-size: clamp(60px, 10.4vw, 100px); }

    .buildora-hero__description { max-width: 34em; }

    .buildora-hero__media {
        grid-column: 2 / -1;
        grid-row: 2;
        height: clamp(460px, 64vw, 620px);
        -webkit-mask-image: none;
        mask-image: none;
    }

    .buildora-hero__arc {
        top: -12%;
        left: auto;
        right: -30%;
        width: 90vw;
    }

    .buildora-hero__values { display: none; }

    .buildora-hero__statement {
        bottom: 0;
        width: auto;
        padding: 28px var(--hero-bleed) 28px 32px;
    }

    /* Base: stats row, then a two-up tile row */
    .buildora-hero__base {
        grid-template-columns: var(--hero-bleed) minmax(0, 1fr) minmax(0, 1fr) var(--hero-bleed);
    }

    .buildora-hero__stats {
        grid-column: 2 / 4;
        padding: 48px 0;
    }

    .buildora-hero__stat {
        flex-direction: column;
        align-items: flex-start;
        gap: 18px;
        padding-inline: 24px;
    }

    .buildora-hero__feature {
        grid-column: 1 / 3;
        grid-row: 2;
        min-height: 220px;
        margin-top: 0;
        padding: 36px 32px 36px var(--hero-bleed);
    }

    .buildora-hero__detail {
        display: block;
        grid-column: 3 / 5;
        grid-row: 2;
        margin-top: 0;
    }
}

/* ==========================================================================
   Mobile — up to 767px (mobile-specific composition)
   ========================================================================== */
@media (max-width: 767px) {
    .buildora-hero {
        --hero-gutter: 20px;
        --hero-header-offset: 72px;
    }

    .buildora-hero__content { padding-block: 44px 40px; }

    .buildora-hero__eyebrow {
        gap: 18px;
        font-size: 11px;
        letter-spacing: 0.32em;
    }

    .buildora-hero__eyebrow-line { flex-basis: 32px; }

    .buildora-hero__title {
        font-size: clamp(46px, 12.4vw, 82px);
        line-height: 0.95;
    }

    .buildora-hero__description { font-size: 17px; }

    .buildora-hero__actions {
        flex-direction: column;
        align-items: stretch;
        gap: 16px;
    }

    .buildora-hero__button { width: 100%; }

    .buildora-hero__video { align-self: flex-start; }

    .buildora-hero__media {
        grid-column: 1 / -1;
        height: 420px;
    }

    .buildora-hero__image { object-position: 55% 50%; }

    .buildora-hero__arc { width: 120vw; right: -60%; top: -8%; }

    .buildora-hero__statement {
        padding: 22px var(--hero-bleed) 22px 24px;
        font-size: 10px;
        line-height: 2;
        letter-spacing: 0.34em;
    }

    .buildora-hero__statement::after { margin-top: 14px; width: 32px; }

    /* Stats become a clean list with horizontal dividers */
    .buildora-hero__stats {
        grid-template-columns: 1fr;
        padding: 16px 0 32px;
    }

    .buildora-hero__stat {
        flex-direction: row;
        align-items: center;
        gap: 20px;
        padding: 22px 0;
        border-left: 0;
        border-top: 1px solid var(--hero-border);
    }

    .buildora-hero__stat:first-child { border-top: 0; }

    .buildora-hero__stat-label::after { margin-top: 10px; }

    .buildora-hero__feature {
        flex-direction: column;
        align-items: flex-start;
        justify-content: space-between;
        min-height: 200px;
        padding: 28px 20px 28px var(--hero-bleed);
    }
}

/* ==========================================================================
   Small mobile — up to 480px
   ========================================================================== */
@media (max-width: 480px) {
    .buildora-hero {
        --hero-gutter: 16px;
    }

    .buildora-hero__content { padding-block: 36px 36px; }

    .buildora-hero__eyebrow {
        font-size: 10.5px;
        letter-spacing: 0.28em;
    }

    .buildora-hero__title { font-size: clamp(42px, 12.6vw, 60px); }

    .buildora-hero__description { font-size: 16px; }

    .buildora-hero__button { min-height: 54px; }

    .buildora-hero__media { height: 400px; }

    .buildora-hero__statement { display: none; }

    .buildora-hero__stat-icon { width: 48px; height: 48px; }
    .buildora-hero__stat-value { font-size: 26px; }
    .buildora-hero__stat-label { letter-spacing: 0.18em; }

    .buildora-hero__feature {
        min-height: 184px;
        padding-right: 16px;
    }

    .buildora-hero__feature-text {
        font-size: 10px;
        letter-spacing: 0.28em;
    }
}

/* ==========================================================================
   Reduced motion
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
    .buildora-hero *,
    .buildora-hero *::before,
    .buildora-hero *::after {
        transition-duration: 0.01ms !important;
    }

    .buildora-hero__media-frame { will-change: auto; }
}

/* ==========================================================================
   BUILDORA CONSTRUCTIONS — Inner Page Banner
   Component: .buildora-inner-banner
   Reused on About Us, Our Services, Our Projects and Contact Us — every
   piece of content lives in the HTML.

   Geometry (desktop): four stacked layers share the section box
     1. __visual  image, right side
     2. __panel   cream plane clipped along one diagonal (--bib-split)
     3. __accent  orange wedge, clipped by the same diagonal so its right
                  edge always meets the image exactly
     4. __content eyebrow, title, breadcrumb (in normal flow — sets height)

   Breakpoints:
     Desktop            1440px+
     Laptop             1200px – 1439px
     Tablet landscape   1024px – 1199px
     Tablet portrait     768px – 1023px   (image moves below content)
     Mobile             481px – 767px
     Small mobile       up to 480px
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. CSS variables
   -------------------------------------------------------------------------- */
.buildora-inner-banner {
    --buildora-dark: #101820;
    --buildora-text: #26313A;
    --buildora-muted: #7A8389;
    --buildora-accent: #C65A2E;
    --buildora-accent-dark: #A94722;
    --buildora-cream: #F5F3EF;
    --buildora-white: #FFFFFF;
    --buildora-border: rgba(16, 24, 32, 0.12);

    --bib-eyebrow: #657078;
    --bib-crumb: #8B9297;

    --bib-font-display: var(--font-display, "Inter Tight", "Helvetica Neue", Arial, sans-serif);
    --bib-font-body: var(--font-body, "Manrope", "Helvetica Neue", Arial, sans-serif);

    /* Architectural line art — shared by the cream panel and the orange wedge */
    --bib-blueprint: url("../images/about-blueprint.svg");
    --bib-blueprint-opacity: 0.055;

    /* Diagonal: x-position of the cream edge at the top and bottom of the banner */
    --bib-diag-top: 46%;
    --bib-diag-bot: 63%;
    --bib-split: polygon(0 0, var(--bib-diag-top) 0, var(--bib-diag-bot) 100%, 0 100%);

    /* Orange wedge top edge: y at the left and right edges of its box (may sit below 100%) */
    --bib-wedge-y0: 113%;
    --bib-wedge-y1: 16%;
    --bib-wedge: polygon(0 var(--bib-wedge-y0), 100% var(--bib-wedge-y1), 100% 130%, 0 130%);

    --bib-visual-left: 38%;
    --bib-img-position: 62% 50%;

    --bib-gutter: clamp(40px, 7vw, 120px);
    --bib-content-w: 56%;
    --bib-min-h: clamp(500px, 40vw, 600px);
    --bib-pad-top: clamp(72px, 7vw, 104px);
    --bib-pad-bottom: clamp(96px, 9vw, 136px);

    --bib-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
    --bib-duration: 0.3s;

    /* 2. Section */
    position: relative;
    isolation: isolate;
    overflow: hidden;              /* clips the parallax overscan of the layers */
    display: flex;
    align-items: center;
    min-height: var(--bib-min-h);
    background-color: var(--buildora-cream);
    font-family: var(--bib-font-body);
    color: var(--buildora-text);
}

.buildora-inner-banner *,
.buildora-inner-banner *::before,
.buildora-inner-banner *::after {
    box-sizing: border-box;
}

/* :where() keeps the reset at zero specificity so component rules win */
:where(.buildora-inner-banner) :where(p, h1, ol) {
    margin: 0;
}

/* --------------------------------------------------------------------------
   3. Blueprint (inside the cream panel)
   -------------------------------------------------------------------------- */
.buildora-inner-banner__blueprint {
    position: absolute;
    inset: -8% -2%;                /* overscan for parallax + mouse drift */
    background: var(--bib-blueprint) 20% 45% / cover no-repeat;
    opacity: var(--bib-blueprint-opacity);
    -webkit-mask-image: radial-gradient(110% 90% at 32% 45%, #000 35%, transparent 80%);
    mask-image: radial-gradient(110% 90% at 32% 45%, #000 35%, transparent 80%);
    translate: calc(var(--bib-mx, 0) * 1px) calc(var(--bib-my, 0) * 1px);
    will-change: transform;
}

/* --------------------------------------------------------------------------
   4. Main layout — layered stack
   -------------------------------------------------------------------------- */
.buildora-inner-banner__visual  { z-index: 1; }
.buildora-inner-banner__panel   { z-index: 2; }
.buildora-inner-banner__accent  { z-index: 3; }
.buildora-inner-banner__content { z-index: 4; }

/* --------------------------------------------------------------------------
   5. Content area
   -------------------------------------------------------------------------- */
.buildora-inner-banner__content {
    position: relative;
    width: var(--bib-content-w);
    padding: var(--bib-pad-top) clamp(24px, 3vw, 48px) var(--bib-pad-bottom) var(--bib-gutter);
}

/* --------------------------------------------------------------------------
   6. Eyebrow
   -------------------------------------------------------------------------- */
.buildora-inner-banner__eyebrow {
    display: flex;
    align-items: center;
    gap: 18px;
    margin-bottom: clamp(18px, 1.8vw, 26px);
    font-size: 12px;
    font-weight: 500;
    line-height: 1.4;
    letter-spacing: 0.26em;
    text-transform: uppercase;
    color: var(--bib-eyebrow);
}

.buildora-inner-banner__eyebrow-line {
    flex: 0 0 auto;
    width: 60px;
    height: 2px;
    background-color: var(--buildora-accent);
    transform-origin: left center;
}

/* --------------------------------------------------------------------------
   7. Title
   -------------------------------------------------------------------------- */
.buildora-inner-banner__title {
    font-family: var(--bib-font-display);
    font-size: clamp(50px, 5vw, 78px);
    font-weight: 600;
    line-height: 1.02;
    letter-spacing: -0.035em;
    color: var(--buildora-dark);
    overflow-wrap: break-word;
}

.buildora-inner-banner__title-line {
    display: block;
}

.buildora-inner-banner__title-line--accent {
    color: var(--buildora-accent);
}

/* --------------------------------------------------------------------------
   8. Breadcrumb
   -------------------------------------------------------------------------- */
.buildora-inner-banner__breadcrumb {
    margin-top: clamp(26px, 2.6vw, 38px);
}

.buildora-inner-banner__breadcrumb-list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 20px;
    padding: 0;
    list-style: none;
    font-size: 17px;
    font-weight: 500;
    line-height: 1.4;
    color: var(--bib-crumb);
}

.buildora-inner-banner__breadcrumb-item {
    display: flex;
    align-items: center;
    gap: 20px;
}

/* Separator is presentational: the alt text after "/" keeps it out of the accessibility tree */
.buildora-inner-banner__breadcrumb-item + .buildora-inner-banner__breadcrumb-item::before {
    content: ">";
    content: ">" / "";
    color: var(--buildora-text);
}

.buildora-inner-banner__breadcrumb-item[aria-current="page"] {
    color: var(--buildora-accent);
}

.buildora-inner-banner__breadcrumb-link {
    position: relative;
    color: var(--bib-crumb);
    text-decoration: none;
    transition: color var(--bib-duration) var(--bib-ease);
}

.buildora-inner-banner__breadcrumb-link::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -3px;
    height: 1px;
    background-color: currentColor;
    transform: scaleX(0);
    transform-origin: right center;
    transition: transform var(--bib-duration) var(--bib-ease);
}

/* --------------------------------------------------------------------------
   9. Architectural image
   -------------------------------------------------------------------------- */
.buildora-inner-banner__visual {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: var(--bib-visual-left);
    overflow: hidden;
    background-color: var(--buildora-dark);
}

/* 116% tall + 8px wider on each side: parallax and mouse drift never expose an edge */
.buildora-inner-banner__image {
    position: absolute;
    top: -8%;
    left: -8px;
    display: block;
    width: calc(100% + 16px);
    height: 116%;
    max-width: none;
    object-fit: cover;
    object-position: var(--bib-img-position);
    translate: calc(var(--bib-mx, 0) * 1px) calc(var(--bib-my, 0) * 1px);
    will-change: transform;
}

/* Subtle warm/dark overlay — architecture stays clearly visible */
.buildora-inner-banner__visual::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(rgba(16, 24, 32, 0.04), rgba(16, 24, 32, 0.12)),
        linear-gradient(90deg, rgba(198, 90, 46, 0.08), transparent 45%);
    pointer-events: none;
}

/* --------------------------------------------------------------------------
   10. Diagonal transition — cream panel
   -------------------------------------------------------------------------- */
.buildora-inner-banner__panel {
    position: absolute;
    inset: 0;
    overflow: hidden;
    background-color: var(--buildora-cream);
    clip-path: var(--bib-split);
    pointer-events: none;
}

/* --------------------------------------------------------------------------
   11. Orange shape
   The wrapper carries the same diagonal clip as the panel; the inner shape
   moves freely (reveal, parallax, mouse) without ever leaving that edge.
   -------------------------------------------------------------------------- */
.buildora-inner-banner__accent {
    position: absolute;
    inset: 0;
    clip-path: var(--bib-split);
    pointer-events: none;
}

.buildora-inner-banner__accent-shape {
    position: absolute;
    inset: 0 0 -10% 0;             /* bleeds below the banner for parallax travel */
    display: block;
    background-color: var(--buildora-accent);
    clip-path: var(--bib-wedge);
    translate: calc(var(--bib-mx, 0) * 1px) calc(var(--bib-my, 0) * 1px);
    will-change: transform;
}

/* Barely-visible linework on the orange plane */
.buildora-inner-banner__accent-shape::after {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--bib-blueprint) 60% 70% / cover no-repeat;
    filter: invert(1);
    opacity: 0.09;
}

/* --------------------------------------------------------------------------
   12. Hover / focus
   -------------------------------------------------------------------------- */
@media (hover: hover) {
    .buildora-inner-banner__breadcrumb-link:hover {
        color: var(--buildora-accent);
    }

    .buildora-inner-banner__breadcrumb-link:hover::after {
        transform: scaleX(1);
        transform-origin: left center;
    }
}

.buildora-inner-banner__breadcrumb-link:focus-visible {
    color: var(--buildora-accent);
    outline: 2px solid var(--buildora-accent);
    outline-offset: 4px;
    border-radius: 2px;
}

/* --------------------------------------------------------------------------
   13. Desktop (1440px+) — base values above
   14. Laptop (1200px – 1439px)
   -------------------------------------------------------------------------- */
@media (max-width: 1439px) {
    .buildora-inner-banner {
        --bib-diag-top: 47%;
        --bib-diag-bot: 64%;
        --bib-wedge-y0: 115%;
        --bib-wedge-y1: 18%;
        --bib-visual-left: 39%;
    }
}

/* --------------------------------------------------------------------------
   15. Tablet
   -------------------------------------------------------------------------- */

/* Tablet landscape (1024px – 1199px): keep the side-by-side composition */
@media (max-width: 1199px) {
    .buildora-inner-banner {
        --bib-diag-top: 50%;
        --bib-diag-bot: 66%;
        --bib-wedge-y0: 120%;
        --bib-wedge-y1: 24%;
        --bib-visual-left: 42%;
        --bib-img-position: 66% 50%;
        --bib-content-w: 60%;
        --bib-min-h: 480px;
    }

    .buildora-inner-banner__title {
        font-size: clamp(46px, 4.9vw, 56px);
    }
}

/* Tablet portrait and below: content on top, image beneath an angled edge */
@media (max-width: 1023px) {
    .buildora-inner-banner {
        --bib-visual-h: 340px;
        --bib-cut: 72px;           /* how far the cream edge drops on the right */
        --bib-img-position: 58% 60%;
        --bib-content-w: 100%;
        --bib-min-h: 0px;
        --bib-pad-top: 80px;
        --bib-pad-bottom: 56px;
        --bib-gutter: 48px;

        /* Cream covers the content and cuts diagonally into the top of the image */
        --bib-split: polygon(
            0 0,
            100% 0,
            100% calc(100% - var(--bib-visual-h) + var(--bib-cut)),
            0 calc(100% - var(--bib-visual-h))
        );

        /* Orange wedge rises from the bottom edge over the lower-right of the image */
        --bib-accent-rise: 170px;
        --bib-accent-start: 52%;

        flex-direction: column;
        align-items: stretch;
    }

    .buildora-inner-banner__content {
        padding-right: var(--bib-gutter);
    }

    .buildora-inner-banner__visual {
        position: relative;
        left: auto;
        height: var(--bib-visual-h);
    }

    .buildora-inner-banner__accent {
        clip-path: none;
    }

    .buildora-inner-banner__accent-shape {
        inset: 0 0 -40px 0;
        clip-path: polygon(
            var(--bib-accent-start) 100%,
            100% calc(100% - 40px - var(--bib-accent-rise)),
            100% 100%
        );
    }

    .buildora-inner-banner__blueprint {
        -webkit-mask-image: radial-gradient(120% 70% at 30% 30%, #000 30%, transparent 80%);
        mask-image: radial-gradient(120% 70% at 30% 30%, #000 30%, transparent 80%);
    }

    .buildora-inner-banner__title {
        font-size: clamp(48px, 7vw, 64px);
    }
}

/* --------------------------------------------------------------------------
   16. Mobile
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
    .buildora-inner-banner {
        --bib-visual-h: clamp(260px, 68vw, 330px);
        --bib-cut: 48px;
        --bib-img-position: 60% 60%;
        --bib-pad-top: 64px;
        --bib-pad-bottom: 44px;
        --bib-gutter: 24px;
        --bib-accent-rise: 110px;
        --bib-accent-start: 58%;
    }

    .buildora-inner-banner__eyebrow {
        gap: 14px;
        margin-bottom: 16px;
        font-size: 11px;
        letter-spacing: 0.22em;
    }

    .buildora-inner-banner__eyebrow-line {
        width: 50px;
    }

    .buildora-inner-banner__title {
        font-size: clamp(40px, 11vw, 54px);
        line-height: 1.04;
    }

    .buildora-inner-banner__breadcrumb {
        margin-top: 24px;
    }

    .buildora-inner-banner__breadcrumb-list,
    .buildora-inner-banner__breadcrumb-item {
        column-gap: 16px;
    }

    .buildora-inner-banner__breadcrumb-list {
        font-size: 15px;
    }
}

/* Small mobile (up to 480px) */
@media (max-width: 480px) {
    .buildora-inner-banner {
        --bib-cut: 40px;
        --bib-pad-top: 56px;
        --bib-gutter: 20px;
        --bib-accent-rise: 90px;
        --bib-accent-start: 60%;
    }

    .buildora-inner-banner__breadcrumb-list {
        font-size: 14px;
    }
}

/* --------------------------------------------------------------------------
   Pre-reveal guard
   Hides animated parts until inner-banner.js has applied its start states
   (it adds .is-ready). The delayed animation is a fallback so content always
   shows, even if a script fails to load.
   -------------------------------------------------------------------------- */
@keyframes buildora-inner-banner-fallback {
    to { visibility: visible; }
}

@media (prefers-reduced-motion: no-preference) {
    .has-js .buildora-inner-banner:not(.is-ready) :is(
        .buildora-inner-banner__content,
        .buildora-inner-banner__visual,
        .buildora-inner-banner__accent,
        .buildora-inner-banner__blueprint
    ) {
        visibility: hidden;
        animation: buildora-inner-banner-fallback 0s 3s forwards;
    }
}

/* --------------------------------------------------------------------------
   17. Reduced motion
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    .buildora-inner-banner *,
    .buildora-inner-banner *::before,
    .buildora-inner-banner *::after {
        transition-duration: 0.01ms !important;
    }

    .buildora-inner-banner [data-inner-banner-depth] {
        translate: none;
        will-change: auto;
    }
}

/* ==========================================================================
   BUILDORA CONSTRUCTIONS — About Us
   Component: .buildora-about
   Blocks:    .buildora-about (intro) · .buildora-about-values · .buildora-about-vision
   Breakpoints:
     Desktop            1440px+
     Laptop             1200px – 1439px
     Tablet landscape   1024px – 1199px
     Tablet portrait     768px – 1023px   (intro stacks from here down)
     Mobile             up to 767px
     Small mobile       up to 480px
   ========================================================================== */

/* --------------------------------------------------------------------------
   Tokens — each falls back to a global theme token when one is defined
   -------------------------------------------------------------------------- */
.buildora-about {
    --ba-dark: var(--color-dark, #101820);
    --ba-text: var(--color-text, #26313A);
    --ba-muted: var(--color-muted, #5E6870);
    --ba-accent: var(--color-accent, #BF552B);
    --ba-accent-dark: var(--color-accent-dark, #A2461F);
    --ba-white: var(--color-white, #FFFFFF);
    --ba-surface: var(--color-off-white, #F5F3EF);
    --ba-surface-raised: #FAF9F7;
    --ba-surface-sunk: #EEECE7;
    --ba-border: var(--color-border, rgba(16, 24, 32, 0.12));

    --ba-font-display: var(--font-display, "Inter Tight", "Helvetica Neue", Arial, sans-serif);
    --ba-font-body: var(--font-body, "Manrope", "Helvetica Neue", Arial, sans-serif);

    /* Architectural line drawing — swap for any texture/photo (lower the opacity for photos) */
    --ba-bg-image: url("../images/about-blueprint.svg");
    --ba-bg-opacity: 0.07;

    --ba-max: 1440px;
    --ba-gutter: clamp(20px, 4.4vw, 64px);
    --ba-space: clamp(88px, 9vw, 140px);
    --ba-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
    --ba-duration: 0.45s;

    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding-top: var(--ba-space);
    background-color: var(--ba-surface);
    font-family: var(--ba-font-body);
    color: var(--ba-text);
}

.buildora-about *,
.buildora-about *::before,
.buildora-about *::after {
    box-sizing: border-box;
}

/* :where() keeps the reset at zero specificity so component margins win */
:where(.buildora-about) :where(figure, p, h2, h3, ul) {
    margin: 0;
}

:where(.buildora-about) ul {
    padding: 0;
    list-style: none;
}

.buildora-about img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.buildora-about svg {
    display: block;
    flex-shrink: 0;
}

/* --------------------------------------------------------------------------
   Background texture (very low contrast, moved by ScrollTrigger)
   -------------------------------------------------------------------------- */
.buildora-about__background {
    position: absolute;
    inset: -12% 0;
    z-index: -1;
    pointer-events: none;
    background-image: var(--ba-bg-image);
    background-size: cover;
    background-position: center top;
    background-repeat: no-repeat;
    opacity: var(--ba-bg-opacity);
    -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 45%, transparent 75%);
    mask-image: linear-gradient(180deg, #000 0%, #000 45%, transparent 75%);
    will-change: transform;
}

/* --------------------------------------------------------------------------
   Container
   -------------------------------------------------------------------------- */
.buildora-about__container {
    width: 100%;
    max-width: var(--ba-max);
    margin-inline: auto;
    padding-inline: var(--ba-gutter);
}

/* --------------------------------------------------------------------------
   Intro layout
   -------------------------------------------------------------------------- */
.buildora-about__intro {
    display: grid;
    grid-template-columns: minmax(0, 41fr) minmax(0, 59fr);
    gap: clamp(40px, 4.5vw, 80px);
    align-items: start;
    padding-bottom: clamp(56px, 5vw, 80px);
}

.buildora-about__content {
    padding-top: clamp(0px, 1vw, 16px);
}

/* --------------------------------------------------------------------------
   Eyebrow (shared by intro + vision)
   -------------------------------------------------------------------------- */
.buildora-about__eyebrow {
    display: flex;
    align-items: center;
    gap: 22px;
    font-family: var(--ba-font-body);
    font-size: 12px;
    font-weight: 600;
    line-height: 1;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--ba-muted);
}

.buildora-about__eyebrow-line {
    display: block;
    width: 44px;
    height: 1px;
    background-color: var(--ba-accent);
    transform-origin: left center;
}

/* --------------------------------------------------------------------------
   Heading + copy
   -------------------------------------------------------------------------- */
.buildora-about__title {
    margin-top: clamp(28px, 2.6vw, 40px);
    font-family: var(--ba-font-display);
    font-size: clamp(52px, 4.9vw, 78px);
    font-weight: 500;
    line-height: 1.02;
    letter-spacing: -0.035em;
    color: var(--ba-dark);
}

.buildora-about__title-line {
    display: block;
}

.buildora-about__title-line--accent {
    color: var(--ba-accent);
}

.buildora-about__description {
    max-width: 50ch;
    margin-top: clamp(24px, 2.2vw, 34px);
    font-size: clamp(15px, 1.12vw, 17px);
    font-weight: 400;
    line-height: 1.75;
    color: var(--ba-muted);
}

/* --------------------------------------------------------------------------
   Actions
   -------------------------------------------------------------------------- */
.buildora-about__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 24px clamp(28px, 3vw, 48px);
    margin-top: clamp(32px, 3vw, 46px);
}

.buildora-about__button {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    min-height: 56px;
    padding: 0 28px;
    background-color: var(--ba-accent);
    border-radius: 2px;
    font-family: var(--ba-font-body);
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 0.01em;
    color: var(--ba-white);
    text-decoration: none;
    transition: background-color var(--ba-duration) var(--ba-ease);
}

.buildora-about__button-arrow {
    transition: transform var(--ba-duration) var(--ba-ease);
}

.buildora-about__button:hover {
    background-color: var(--ba-accent-dark);
}

.buildora-about__button:hover .buildora-about__button-arrow {
    transform: translateX(5px);
}

.buildora-about__video {
    display: inline-flex;
    align-items: center;
    gap: 18px;
    padding: 0;
    background: none;
    border: 0;
    font: inherit;
    color: var(--ba-dark);
    text-align: left;
    cursor: pointer;
}

.buildora-about__video-circle {
    display: grid;
    place-items: center;
    width: 58px;
    height: 58px;
    border: 1px solid rgba(16, 24, 32, 0.35);
    border-radius: 50%;
    transition:
        transform var(--ba-duration) var(--ba-ease),
        border-color var(--ba-duration) var(--ba-ease),
        background-color var(--ba-duration) var(--ba-ease);
}

.buildora-about__video-icon {
    margin-left: 3px;
    transition: transform var(--ba-duration) var(--ba-ease), color var(--ba-duration) var(--ba-ease);
}

.buildora-about__video-text {
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.buildora-about__video-title {
    font-family: var(--ba-font-display);
    font-size: 16px;
    font-weight: 500;
    line-height: 1;
    transition: color var(--ba-duration) var(--ba-ease);
}

.buildora-about__video-meta {
    font-size: 10.5px;
    font-weight: 600;
    line-height: 1;
    letter-spacing: 0.26em;
    text-transform: uppercase;
    color: var(--ba-muted);
    transition: letter-spacing var(--ba-duration) var(--ba-ease), color var(--ba-duration) var(--ba-ease);
}

.buildora-about__video:hover .buildora-about__video-circle {
    transform: scale(1.07);
    border-color: var(--ba-accent);
}

.buildora-about__video:hover .buildora-about__video-icon {
    transform: translateX(2px);
    color: var(--ba-accent);
}

.buildora-about__video:hover .buildora-about__video-title {
    color: var(--ba-accent);
}

.buildora-about__video:hover .buildora-about__video-meta {
    letter-spacing: 0.3em;
}

/* Focus states */
.buildora-about__button:focus-visible,
.buildora-about__video:focus-visible {
    outline: 2px solid var(--ba-accent);
    outline-offset: 4px;
}

.buildora-about__video:focus-visible {
    border-radius: 30px;
}

/* --------------------------------------------------------------------------
   Image composition
   Grid tracks: [ main image ········ ][ experience ]
                [ main ][ secondary + accent stack ]
   Only the parallax offset (CSS `translate`) is driven by JS, so it never
   fights the GSAP reveal transforms.
   -------------------------------------------------------------------------- */
.buildora-about__visual {
    --ba-stack-drop: clamp(12px, 1.6vw, 22px);

    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 44fr) minmax(0, 24.5fr) minmax(0, 31.5fr);
    grid-template-rows: auto auto;
    padding-bottom: var(--ba-stack-drop);
}

[data-ba-depth] {
    translate: calc(var(--ba-mx, 0) * 1px) calc(var(--ba-my, 0) * 1px);
}

.buildora-about__main-image {
    grid-column: 1 / 3;
    grid-row: 1 / 3;
    align-self: start;
    aspect-ratio: 1.12 / 1;
}

.buildora-about__media {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

/* Taller than its frame so the scroll parallax never exposes an edge */
.buildora-about__main-image img {
    position: absolute;
    top: -6%;
    left: 0;
    height: 112%;
}

.buildora-about__experience {
    grid-column: 3;
    grid-row: 1;
    align-self: start;
    padding: clamp(28px, 3vw, 46px) clamp(24px, 2.6vw, 44px) clamp(28px, 2.8vw, 40px);
    background-color: var(--ba-surface-raised);
    border: 1px solid rgba(16, 24, 32, 0.05);
    border-left: 0;
}

.buildora-about__experience-value {
    display: flex;
    align-items: flex-start;
    font-family: var(--ba-font-display);
    font-size: clamp(56px, 5vw, 76px);
    font-weight: 500;
    line-height: 0.9;
    letter-spacing: -0.05em;
    color: var(--ba-dark);
    font-variant-numeric: tabular-nums;
}

.buildora-about__experience-plus {
    margin-top: -0.06em;
    margin-left: 0.04em;
    font-size: 0.5em;
    font-weight: 400;
    color: var(--ba-accent);
}

.buildora-about__experience-label {
    margin-top: 18px;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.7;
    letter-spacing: 0.26em;
    text-transform: uppercase;
    color: var(--ba-text);
}

.buildora-about__experience-divider {
    display: block;
    width: 40px;
    height: 1px;
    margin: clamp(20px, 2vw, 30px) 0;
    background-color: rgba(16, 24, 32, 0.4);
}

.buildora-about__experience-text {
    font-size: clamp(14px, 1.02vw, 15.5px);
    line-height: 1.6;
    color: var(--ba-muted);
}

.buildora-about__stack {
    grid-column: 2 / 4;
    grid-row: 2;
    align-self: end;
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: minmax(0, 60fr) minmax(0, 40fr);
    margin: clamp(16px, 1.6vw, 24px) 3% calc(var(--ba-stack-drop) * -1) 0;
    aspect-ratio: 2.45 / 1;
}

.buildora-about__secondary-image {
    height: 100%;
    padding: clamp(6px, 0.8vw, 12px);
    background-color: var(--ba-surface-raised);
}

.buildora-about__accent-panel {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: clamp(18px, 2vw, 30px);
    min-width: 0;
    height: 100%;
    padding: clamp(16px, 2.4vw, 34px) clamp(16px, 1.8vw, 30px);
    background-color: var(--ba-accent);
    color: var(--ba-white);
}

.buildora-about__accent-list {
    display: flex;
    flex-direction: column;
    gap: clamp(8px, 1vw, 14px);
    font-size: clamp(10px, 0.85vw, 13px);
    font-weight: 500;
    line-height: 1;
    letter-spacing: 0.3em;
    text-transform: uppercase;
}

.buildora-about__accent-line {
    display: block;
    width: 40px;
    height: 1px;
    background-color: rgba(255, 255, 255, 0.85);
    transform-origin: left center;
}

/* --------------------------------------------------------------------------
   Values strip
   -------------------------------------------------------------------------- */
.buildora-about-values {
    position: relative;
    background-color: var(--ba-surface-sunk);
    border-block: 1px solid rgba(16, 24, 32, 0.05);
}

.buildora-about-values__list {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    padding-block: clamp(36px, 3.4vw, 52px);
}

.buildora-about-value {
    display: flex;
    align-items: flex-start;
    gap: clamp(18px, 1.8vw, 28px);
    padding: 10px clamp(20px, 2.6vw, 44px);
}

.buildora-about-value:first-child {
    padding-left: 0;
}

.buildora-about-value:last-child {
    padding-right: 0;
}

.buildora-about-value + .buildora-about-value {
    border-left: 1px solid var(--ba-border);
}

.buildora-about-value__icon {
    width: 44px;
    height: 44px;
    color: var(--ba-accent);
    transition: transform var(--ba-duration) var(--ba-ease), color var(--ba-duration) var(--ba-ease);
}

.buildora-about-value__icon svg {
    width: 100%;
    height: 100%;
    stroke-width: 1.4;
}

.buildora-about-value__icon svg * {
    vector-effect: non-scaling-stroke;
}

.buildora-about-value__content {
    min-width: 0;
    padding-top: 4px;
}

.buildora-about-value__title {
    position: relative;
    display: inline-block;
    padding-bottom: 10px;
    font-family: var(--ba-font-display);
    font-size: clamp(16px, 1.25vw, 19px);
    font-weight: 500;
    line-height: 1.25;
    letter-spacing: -0.01em;
    color: var(--ba-dark);
    transition: transform var(--ba-duration) var(--ba-ease);
}

.buildora-about-value__title::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 4px;
    width: 24px;
    height: 1px;
    background-color: var(--ba-accent);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform var(--ba-duration) var(--ba-ease);
}

.buildora-about-value__text {
    max-width: 26ch;
    font-size: 14.5px;
    line-height: 1.6;
    color: var(--ba-muted);
}

@media (hover: hover) {
    .buildora-about-value:hover .buildora-about-value__icon {
        transform: translateY(-5px);
        color: var(--ba-accent-dark);
    }

    .buildora-about-value:hover .buildora-about-value__title {
        transform: translateX(3px);
    }

    .buildora-about-value:hover .buildora-about-value__title::after {
        transform: scaleX(1);
    }
}

/* --------------------------------------------------------------------------
   Vision (image bleeds to the viewport edge, text aligns to the container)
   -------------------------------------------------------------------------- */
.buildora-about-vision {
    --ba-vision-edge: max(var(--ba-gutter), calc((100% - var(--ba-max)) / 2 + var(--ba-gutter)));

    display: grid;
    grid-template-columns: minmax(0, 64fr) minmax(0, 36fr);
    align-items: center;
    background-color: var(--ba-surface-raised);
}

.buildora-about-vision__image {
    position: relative;
    height: clamp(420px, 38vw, 620px);
    overflow: hidden;
    clip-path: polygon(0 0, 96.5% 0, 100% 100%, 0 100%);
}

.buildora-about-vision__image img {
    position: absolute;
    top: -8%;
    left: 0;
    height: 116%;
    will-change: transform;
}

.buildora-about-vision__content {
    padding: clamp(48px, 5vw, 80px) var(--ba-vision-edge) clamp(48px, 5vw, 80px) clamp(40px, 4.4vw, 72px);
}

.buildora-about-vision__statement {
    max-width: 20ch;
    margin-top: clamp(28px, 2.6vw, 40px);
    font-family: var(--ba-font-display);
    font-size: clamp(26px, 2.35vw, 38px);
    font-weight: 400;
    line-height: 1.22;
    letter-spacing: -0.02em;
    color: var(--ba-dark);
}

/* --------------------------------------------------------------------------
   Laptop — 1200px to 1439px
   -------------------------------------------------------------------------- */
@media (max-width: 1439px) {
    .buildora-about__title {
        font-size: clamp(50px, 4.9vw, 68px);
    }
}

/* --------------------------------------------------------------------------
   Tablet landscape — 1024px to 1199px
   -------------------------------------------------------------------------- */
@media (max-width: 1199px) {
    .buildora-about__intro {
        grid-template-columns: minmax(0, 44fr) minmax(0, 56fr);
        gap: 44px;
    }

    .buildora-about__title {
        font-size: clamp(42px, 4.3vw, 52px);
    }

    .buildora-about__actions {
        gap: 20px 28px;
    }

    .buildora-about__button {
        padding: 0 22px;
    }

    .buildora-about__experience-label {
        margin-top: 14px;
        font-size: 11px;
    }

    .buildora-about__experience-divider {
        margin: 18px 0;
    }

    .buildora-about-value {
        flex-direction: column;
        gap: 18px;
        padding-inline: 24px;
    }

    .buildora-about-vision {
        grid-template-columns: minmax(0, 58fr) minmax(0, 42fr);
    }
}

/* Tablet landscape + small laptops (1024–1365px): the visual column is too
   narrow for the reference side panel (it needs ~1366px+),
   so the main image spans the full width and both panels rise into its
   lower edge.
   [ main image ························ ]
   [ experience ][ secondary | accent    ]                                   */
@media (min-width: 1024px) and (max-width: 1365px) {
    .buildora-about__visual {
        grid-template-columns: minmax(0, 40fr) minmax(0, 60fr);
        grid-template-rows: auto auto;
        padding-bottom: 0;
    }

    .buildora-about__main-image {
        grid-column: 1 / -1;
        grid-row: 1;
        aspect-ratio: 1.3 / 1;
    }

    .buildora-about__experience {
        grid-column: 1;
        grid-row: 2;
        position: relative;
        z-index: 2;
        margin: -64px 0 0 20px;
        padding: 24px 20px;
        border-left: 1px solid rgba(16, 24, 32, 0.05);
    }

    .buildora-about__experience-value {
        font-size: 52px;
    }

    .buildora-about__experience-text {
        font-size: 13.5px;
    }

    .buildora-about__stack {
        grid-column: 2;
        grid-row: 2;
        align-self: start;
        margin: -96px 0 0 16px;
        aspect-ratio: 1.9 / 1;
    }
}

/* --------------------------------------------------------------------------
   Tablet portrait — 768px to 1023px (stacked intro)
   -------------------------------------------------------------------------- */
@media (max-width: 1023px) {
    .buildora-about {
        --ba-space: 88px;
    }

    .buildora-about__intro {
        grid-template-columns: minmax(0, 1fr);
        gap: 56px;
    }

    .buildora-about__content {
        padding-top: 0;
    }

    .buildora-about__title {
        font-size: clamp(48px, 7.4vw, 64px);
    }

    .buildora-about__description {
        max-width: 60ch;
    }

    .buildora-about__visual {
        grid-template-columns: minmax(0, 42fr) minmax(0, 24fr) minmax(0, 34fr);
    }

    .buildora-about__main-image {
        aspect-ratio: 1.02 / 1;
    }

    .buildora-about__stack {
        aspect-ratio: 2.3 / 1;
    }

    .buildora-about-values__list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        padding-block: 16px;
    }

    .buildora-about-value,
    .buildora-about-value:first-child,
    .buildora-about-value:last-child {
        flex-direction: row;
        padding: 28px 28px 28px 0;
    }

    .buildora-about-value + .buildora-about-value {
        border-left: 0;
    }

    .buildora-about-value:nth-child(even) {
        padding-left: 28px;
        padding-right: 0;
        border-left: 1px solid var(--ba-border);
    }

    .buildora-about-value:nth-child(n + 3) {
        border-top: 1px solid var(--ba-border);
    }

    .buildora-about-vision {
        grid-template-columns: minmax(0, 1fr);
    }

    .buildora-about-vision__image {
        height: clamp(360px, 56vw, 520px);
        clip-path: polygon(0 0, 100% 0, 100% 92%, 0 100%);
    }

    .buildora-about-vision__content {
        padding: 56px var(--ba-gutter) 88px;
    }

    .buildora-about-vision__statement {
        max-width: 24ch;
        font-size: clamp(28px, 4.2vw, 36px);
    }
}

/* --------------------------------------------------------------------------
   Mobile — up to 767px
   Main image → experience (overlapping) → secondary + accent row
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
    .buildora-about {
        --ba-space: 72px;
        --ba-bg-opacity: 0.05;
    }

    .buildora-about__intro {
        gap: 48px;
        padding-bottom: 56px;
    }

    .buildora-about__eyebrow {
        gap: 16px;
        font-size: 11px;
    }

    .buildora-about__eyebrow-line {
        width: 36px;
    }

    .buildora-about__title {
        margin-top: 24px;
        font-size: clamp(38px, 10.6vw, 58px);
        line-height: 1.04;
    }

    .buildora-about__description {
        font-size: 15.5px;
        line-height: 1.7;
    }

    .buildora-about__visual {
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: none;
        padding-bottom: 0;
    }

    .buildora-about__main-image {
        grid-column: 1;
        grid-row: auto;
        aspect-ratio: 4 / 3.6;
    }

    .buildora-about__experience {
        grid-column: 1;
        grid-row: auto;
        position: relative;
        z-index: 2;
        display: grid;
        grid-template-columns: auto minmax(0, 1fr);
        align-items: end;
        column-gap: 20px;
        width: calc(100% - 28px);
        margin: -56px 0 0 28px;
        padding: 26px 22px 24px;
        border: 1px solid rgba(16, 24, 32, 0.05);
    }

    .buildora-about__experience-value {
        font-size: 58px;
    }

    .buildora-about__experience-label {
        margin: 0 0 4px;
    }

    .buildora-about__experience-divider {
        grid-column: 1 / -1;
        margin: 20px 0 16px;
    }

    .buildora-about__experience-text {
        grid-column: 1 / -1;
        font-size: 14.5px;
    }

    .buildora-about__stack {
        grid-column: 1;
        grid-row: auto;
        grid-template-columns: minmax(0, 58fr) minmax(0, 42fr);
        margin: 16px 0 0;
        aspect-ratio: 1.75 / 1;
    }

    .buildora-about__secondary-image {
        padding: 0;
    }

    .buildora-about-value,
    .buildora-about-value:first-child,
    .buildora-about-value:last-child,
    .buildora-about-value:nth-child(even) {
        flex-direction: column;
        gap: 16px;
        padding: 28px 20px 28px 0;
    }

    .buildora-about-value:nth-child(even) {
        padding-left: 20px;
        padding-right: 0;
    }

    .buildora-about-value__icon {
        width: 38px;
        height: 38px;
    }

    .buildora-about-vision__image {
        height: clamp(300px, 78vw, 440px);
        clip-path: none;
    }

    .buildora-about-vision__content {
        padding: 48px var(--ba-gutter) 72px;
    }

    .buildora-about-vision__statement {
        margin-top: 24px;
        font-size: clamp(25px, 6.6vw, 32px);
    }
}

/* --------------------------------------------------------------------------
   Small mobile — up to 480px
   -------------------------------------------------------------------------- */
@media (max-width: 480px) {
    .buildora-about__actions {
        flex-direction: column;
        align-items: flex-start;
        gap: 24px;
    }

    .buildora-about__button {
        width: 100%;
        justify-content: space-between;
    }

    .buildora-about__experience {
        width: calc(100% - 16px);
        margin-left: 16px;
        margin-top: -40px;
    }

    .buildora-about__stack {
        aspect-ratio: 1.45 / 1;
    }

    .buildora-about__accent-panel {
        padding: 18px 16px;
    }

    .buildora-about__accent-list {
        font-size: 10.5px;
        letter-spacing: 0.26em;
    }

    .buildora-about-values__list {
        grid-template-columns: minmax(0, 1fr);
        padding-block: 8px;
    }

    .buildora-about-value,
    .buildora-about-value:first-child,
    .buildora-about-value:last-child,
    .buildora-about-value:nth-child(even) {
        flex-direction: row;
        gap: 20px;
        padding: 24px 0;
        border-left: 0;
    }

    .buildora-about-value + .buildora-about-value {
        border-top: 1px solid var(--ba-border);
    }

    .buildora-about-value__text {
        max-width: none;
    }
}

/* --------------------------------------------------------------------------
   Pre-reveal guard
   Hides the intro until about-us.js has applied its start states (it adds
   .is-ready). The delayed animation is a fallback so content always shows,
   even if a script fails to load.
   -------------------------------------------------------------------------- */
@keyframes buildora-about-fallback {
    to { visibility: visible; }
}

@media (prefers-reduced-motion: no-preference) {
    .has-js .buildora-about:not(.is-ready) .buildora-about__intro {
        visibility: hidden;
        animation: buildora-about-fallback 0s 3s forwards;
    }
}

/* --------------------------------------------------------------------------
   Reduced motion
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    .buildora-about *,
    .buildora-about *::before,
    .buildora-about *::after {
        transition-duration: 0.01ms !important;
    }

    [data-ba-depth] {
        translate: none;
    }

    .buildora-about__background,
    .buildora-about-vision__image img {
        will-change: auto;
    }
}

/* ==========================================================================
   BUILDORA CONSTRUCTIONS — Inner About (About Us page, main content)
   Component: .buildora-inner-about
   Layers (z): blueprint 1 · main image 2 · dark shape 4 · experience 5 ·
               secondary image 6 · text 7
   Breakpoints:
     Desktop            1440px+
     Laptop             1200px – 1439px
     iPad landscape     1024px – 1199px
     iPad portrait       768px – 1023px   (vertical composition from here)
     Mobile              481px – 767px
     Small mobile       up to 480px
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Variables — each falls back to a global theme token when defined
   -------------------------------------------------------------------------- */
.buildora-inner-about {
    --ia-dark: var(--color-dark, #101820);
    --ia-dark-alt: #17242C;
    --ia-text: #24313A;
    --ia-muted: #5E6870;                  /* #7B848A darkened for AA contrast on cream */
    --ia-muted-soft: #737D83;
    --ia-accent: var(--color-accent, #BF552B);
    --ia-accent-dark: var(--color-accent-dark, #A2461F);
    --ia-cream: var(--color-off-white, #F5F3EF);
    --ia-white: var(--color-white, #FFFFFF);
    --ia-border: rgba(16, 24, 32, 0.15);

    --ia-font: var(--font-body, "Manrope", "Helvetica Neue", Arial, sans-serif);
    --ia-font-display: var(--font-display, "Inter Tight", "Helvetica Neue", Arial, sans-serif);

    /* Line drawing — swap the file to change the texture */
    --ia-blueprint: url("../images/why-blueprint.svg");

    /* Geometry (desktop) */
    --ia-media-w: 49%;
    --ia-media-clip: polygon(0% 0%, 82% 0%, 55% 47%, 96% 100%, 0% 100%);
    --ia-content-start: 52%;
    --ia-gutter: clamp(20px, 4.4vw, 80px);

    --ia-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
    --ia-duration: 0.4s;

/* --------------------------------------------------------------------------
   2. Section
   -------------------------------------------------------------------------- */
    position: relative;
    isolation: isolate;
    overflow: hidden;
    min-height: clamp(700px, 52vw, 860px);
    font-family: var(--ia-font);
    color: var(--ia-text);
    background-color: var(--ia-cream);
}

.buildora-inner-about *,
.buildora-inner-about *::before,
.buildora-inner-about *::after {
    box-sizing: border-box;
}

/* Zero-specificity reset so component rules always win */
:where(.buildora-inner-about) :where(h2, h3, p, ul, figure) {
    margin: 0;
}

:where(.buildora-inner-about) ul {
    padding: 0;
    list-style: none;
}

.buildora-inner-about svg {
    display: block;
    flex-shrink: 0;
}

.buildora-inner-about img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* --------------------------------------------------------------------------
   3. Layer system — decorative/visual layers are absolute on desktop
   -------------------------------------------------------------------------- */
.buildora-inner-about__blueprint   { z-index: 1; }
.buildora-inner-about__main-image  { z-index: 2; }
.buildora-inner-about__dark-shape  { z-index: 4; }
.buildora-inner-about__experience  { z-index: 5; }
.buildora-inner-about__secondary   { z-index: 6; }
.buildora-inner-about__content     { z-index: 7; }

/* --------------------------------------------------------------------------
   4. Main architectural image — chevron edge, kink hidden by the secondary image
   -------------------------------------------------------------------------- */
.buildora-inner-about__main-image {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: var(--ia-media-w);
    overflow: hidden;
    background-color: var(--ia-dark-alt);
    clip-path: var(--ia-media-clip);
}

/* Frame owns pointer drift; oversized so drift + parallax never show an edge */
.buildora-inner-about__main-frame {
    position: absolute;
    inset: -7% -2%;
}

.buildora-inner-about__main-frame img {
    object-position: 38% 50%;
    filter: saturate(1.04) contrast(1.04);
}

/* --------------------------------------------------------------------------
   5. Cream content
   -------------------------------------------------------------------------- */
.buildora-inner-about__content {
    position: relative;
    display: flex;
    flex-direction: column;
    margin-left: var(--ia-content-start);
    padding: clamp(64px, 5.6vw, 96px) var(--ia-gutter) clamp(56px, 5vw, 84px) 0;
}

/* --------------------------------------------------------------------------
   6. Blueprint — perspective line art in the cream wedge
   -------------------------------------------------------------------------- */
.buildora-inner-about__blueprint {
    position: absolute;
    top: -3%;
    left: 24%;
    width: 36%;
    height: 64%;
    pointer-events: none;
    background-image: var(--ia-blueprint);
    background-repeat: no-repeat;
    background-position: 10% 0;
    background-size: auto 100%;
    opacity: 0.06;
}

/* --------------------------------------------------------------------------
   7. Eyebrow
   -------------------------------------------------------------------------- */
.buildora-inner-about__eyebrow {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 18px;
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: 0.26em;
    text-transform: uppercase;
    color: var(--ia-muted-soft);
}

.buildora-inner-about__eyebrow-line {
    display: block;
    width: 64px;
    height: 2px;
    background-color: var(--ia-accent);
    transform-origin: left center;
}

/* --------------------------------------------------------------------------
   8. Heading
   -------------------------------------------------------------------------- */
.buildora-inner-about__title {
    margin-top: clamp(18px, 1.8vw, 26px);
    font-family: var(--ia-font-display);
    font-size: clamp(42px, 4vw, 72px);
    font-weight: 600;
    line-height: 1.02;
    letter-spacing: -0.04em;
    color: var(--ia-dark);
}

.buildora-inner-about__title-line {
    display: block;
}

.buildora-inner-about__title-line--accent {
    color: var(--ia-accent);
}

/* --------------------------------------------------------------------------
   9. Description
   -------------------------------------------------------------------------- */
.buildora-inner-about__description {
    max-width: 760px;
    margin-top: clamp(20px, 2vw, 30px);
    font-size: clamp(16.5px, 1.2vw, 19px);
    line-height: 1.68;
    color: var(--ia-muted);
}

/* --------------------------------------------------------------------------
   10. Values — three columns with fine dividers
   -------------------------------------------------------------------------- */
.buildora-inner-about__values {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin-top: clamp(36px, 3.6vw, 56px);
}

.buildora-inner-about__value {
    padding-inline: clamp(18px, 2.2vw, 40px);
    border-left: 1px solid var(--ia-border);
}

.buildora-inner-about__value:first-child {
    padding-left: 0;
    border-left: 0;
}

.buildora-inner-about__value-icon {
    display: block;
    width: clamp(42px, 3.4vw, 54px);
    height: clamp(42px, 3.4vw, 54px);
    color: var(--ia-accent);
    transition: transform var(--ia-duration) var(--ia-ease);
}

.buildora-inner-about__value-icon svg {
    width: 100%;
    height: 100%;
}

.buildora-inner-about__value-title {
    margin-top: 18px;
    font-size: clamp(16px, 1.15vw, 18px);
    font-weight: 700;
    line-height: 1.3;
    color: var(--ia-dark);
}

.buildora-inner-about__value-text {
    max-width: 24ch;
    margin-top: 8px;
    font-size: clamp(14px, 1vw, 15.5px);
    line-height: 1.55;
    color: var(--ia-muted);
}

/* --------------------------------------------------------------------------
   11. Experience block — angled orange panel with faint linework
       Outer: position + pointer drift + parallax. Panel: shape + reveal.
   -------------------------------------------------------------------------- */
.buildora-inner-about__experience {
    position: absolute;
    top: 44%;
    left: 0;
    width: clamp(220px, 18vw, 350px);
    height: 47%;
}

.buildora-inner-about__experience-panel {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 100%;
    padding: 12% 24px 10% clamp(28px, 6.8vw, 132px);
    overflow: hidden;
    color: var(--ia-white);
    background-color: var(--ia-accent);
    clip-path: polygon(0% 0%, 100% 16%, 100% 100%, 0% 86%);
}

.buildora-inner-about__experience-panel::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background-image: var(--ia-blueprint);
    background-repeat: no-repeat;
    background-position: 30% 60%;
    background-size: auto 90%;
    filter: invert(1);
    opacity: 0.09;
}

.buildora-inner-about__experience-panel { isolation: isolate; }

.buildora-inner-about__experience-line {
    display: block;
    width: 56px;
    height: 2px;
    background-color: rgba(255, 255, 255, 0.9);
}

.buildora-inner-about__experience-number {
    margin-top: clamp(22px, 2vw, 30px);
    font-family: var(--ia-font-display);
    font-size: clamp(48px, 3.8vw, 68px);
    font-weight: 600;
    line-height: 1;
    letter-spacing: -0.03em;
}

.buildora-inner-about__experience-label {
    margin-top: clamp(14px, 1.4vw, 22px);
    font-size: clamp(11px, 0.85vw, 13px);
    font-weight: 600;
    line-height: 1.7;
    letter-spacing: 0.22em;
    text-transform: uppercase;
}

/* --------------------------------------------------------------------------
   12. Secondary image — framed interior over the diagonal
   -------------------------------------------------------------------------- */
.buildora-inner-about__secondary {
    position: absolute;
    top: 43%;
    left: 26%;
    width: clamp(280px, 21.5vw, 430px);
    aspect-ratio: 388 / 344;
    padding: clamp(10px, 0.8vw, 14px);
    background-color: var(--ia-cream);
    box-shadow: 0 24px 48px -32px rgba(16, 24, 32, 0.45);
}

.buildora-inner-about__secondary-media {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background-color: #E6E2DB;
}

.buildora-inner-about__secondary-media img {
    object-position: 40% 50%;
}

/* --------------------------------------------------------------------------
   13. Our Story + 14. Founder — bottom row
   -------------------------------------------------------------------------- */
.buildora-inner-about__footer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 28px 40px;
    margin-top: clamp(40px, 4vw, 64px);
}

.buildora-inner-about__story {
    display: inline-flex;
    align-items: center;
    gap: clamp(18px, 1.6vw, 26px);
    color: var(--ia-dark);
    text-decoration: none;
    border-radius: 40px;
}

.buildora-inner-about__story-circle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: clamp(60px, 4.8vw, 74px);
    height: clamp(60px, 4.8vw, 74px);
    color: var(--ia-accent);
    border: 1.5px solid var(--ia-accent);
    border-radius: 50%;
    transition:
        background-color var(--ia-duration) var(--ia-ease),
        color var(--ia-duration) var(--ia-ease),
        transform var(--ia-duration) var(--ia-ease);
}

.buildora-inner-about__story-circle svg {
    width: 22px;
    height: 22px;
}

.buildora-inner-about__story-title {
    display: block;
    font-size: clamp(17px, 1.25vw, 19px);
    font-weight: 700;
    line-height: 1.3;
}

.buildora-inner-about__story-sub {
    display: block;
    margin-top: 6px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--ia-muted-soft);
}

.buildora-inner-about__founder {
    display: flex;
    align-items: center;
    gap: 18px;
}

.buildora-inner-about__signature {
    width: clamp(82px, 6.4vw, 104px);
    height: auto;
    color: var(--ia-dark);
}

.buildora-inner-about__founder-name {
    font-size: clamp(16px, 1.2vw, 18px);
    font-weight: 600;
    line-height: 1.3;
    color: var(--ia-dark);
}

.buildora-inner-about__founder-role {
    margin-top: 6px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--ia-muted-soft);
}

/* --------------------------------------------------------------------------
   15. Decorative geometry — dark wedge along the bottom-left
   -------------------------------------------------------------------------- */
.buildora-inner-about__dark-shape {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 47%;
    height: 19%;
    pointer-events: none;
    background-color: var(--ia-dark);
    clip-path: polygon(0% 0%, 100% 100%, 0% 100%);
}

/* --------------------------------------------------------------------------
   16. Hover + focus states
   -------------------------------------------------------------------------- */
@media (hover: hover) {
    .buildora-inner-about__story:hover .buildora-inner-about__story-circle {
        color: var(--ia-white);
        background-color: var(--ia-accent);
        transform: translateX(3px);
    }

    .buildora-inner-about__value:hover .buildora-inner-about__value-icon {
        transform: translateY(-3px);
    }
}

.buildora-inner-about__story:focus-visible {
    outline: none;
}

.buildora-inner-about__story:focus-visible .buildora-inner-about__story-circle {
    color: var(--ia-white);
    background-color: var(--ia-accent);
    outline: 2px solid var(--ia-dark);
    outline-offset: 4px;
}

/* ==========================================================================
   17. Desktop — 1440px+ uses the base rules above
   ========================================================================== */

/* ==========================================================================
   18. Laptop — 1200px to 1439px
   ========================================================================== */
@media (max-width: 1439px) {
    .buildora-inner-about {
        --ia-media-w: 48%;
        --ia-content-start: 51%;
    }

    .buildora-inner-about__secondary { width: clamp(260px, 21vw, 300px); }
    .buildora-inner-about__experience { width: clamp(210px, 17.5vw, 250px); }
}

/* ==========================================================================
   19. Tablet
   ========================================================================== */

/* iPad landscape — 1024px to 1199px: asymmetric layout kept, tighter */
@media (max-width: 1199px) {
    .buildora-inner-about {
        --ia-media-w: 47%;
        --ia-content-start: 50%;
        --ia-gutter: 32px;
        min-height: 720px;
    }

    .buildora-inner-about__title { font-size: clamp(40px, 4.2vw, 48px); }

    .buildora-inner-about__description { font-size: 16px; }

    .buildora-inner-about__value { padding-inline: 16px; }
    .buildora-inner-about__value-title { font-size: 15.5px; }
    .buildora-inner-about__value-text { font-size: 14px; }

    .buildora-inner-about__secondary {
        top: 45%;
        left: 24%;
        width: 236px;
    }

    .buildora-inner-about__experience { width: 200px; }
    .buildora-inner-about__experience-panel { padding-left: 32px; }

    .buildora-inner-about__story-sub,
    .buildora-inner-about__founder-role { letter-spacing: 0.16em; }
}

/* iPad portrait — 768px to 1023px: vertical composition.
   The section becomes a grid; the content wrapper dissolves (display: contents)
   so the secondary image can sit between the introduction and the values. */
@media (max-width: 1023px) {
    .buildora-inner-about {
        --ia-gutter: clamp(20px, 5vw, 48px);
        --ia-media-clip: polygon(0% 0%, 100% 0%, 100% 84%, 0% 100%);
        display: grid;
        grid-template-columns: var(--ia-gutter) minmax(0, 1fr) var(--ia-gutter);
        min-height: 0;
        padding-bottom: clamp(64px, 9vw, 88px);
    }

    .buildora-inner-about__main-image {
        position: relative;
        inset: auto;
        grid-column: 1 / -1;
        grid-row: 1;
        width: 100%;
        height: clamp(400px, 60vw, 540px);
    }

    .buildora-inner-about__dark-shape { display: none; }

    .buildora-inner-about__experience {
        position: relative;
        inset: auto;
        grid-column: 2;
        grid-row: 1;
        align-self: end;
        justify-self: start;
        width: 230px;
        height: 210px;
        margin-bottom: -56px;
    }

    .buildora-inner-about__experience-panel {
        padding: 26px 22px 22px 30px;
        clip-path: polygon(0% 0%, 100% 10%, 100% 100%, 0% 92%);
    }

    .buildora-inner-about__content {
        display: contents;
    }

    .buildora-inner-about__intro,
    .buildora-inner-about__values,
    .buildora-inner-about__footer {
        grid-column: 2;
    }

    .buildora-inner-about__intro {
        grid-row: 2;
        padding-top: 96px;
    }

    .buildora-inner-about__title { font-size: clamp(42px, 6.6vw, 60px); }

    .buildora-inner-about__description { font-size: 17px; }

    .buildora-inner-about__secondary {
        position: relative;
        inset: auto;
        grid-column: 2;
        grid-row: 3;
        justify-self: center;
        width: min(88%, 560px);
        aspect-ratio: 16 / 11;
        margin-top: 48px;
    }

    .buildora-inner-about__values {
        grid-row: 4;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 36px 32px;
        margin-top: 56px;
    }

    .buildora-inner-about__value,
    .buildora-inner-about__value:first-child {
        padding: 28px 0 0;
        border-left: 0;
        border-top: 1px solid var(--ia-border);
    }

    .buildora-inner-about__value-text { max-width: 34ch; }

    .buildora-inner-about__footer {
        grid-row: 5;
        flex-direction: column;
        align-items: flex-start;
        gap: 32px;
        margin-top: 48px;
        padding-top: 36px;
        border-top: 1px solid var(--ia-border);
    }

    .buildora-inner-about__blueprint {
        top: 34%;
        left: auto;
        right: -10%;
        width: 90%;
        height: 36%;
    }
}

/* ==========================================================================
   20. Mobile
   ========================================================================== */

/* 481px – 767px */
@media (max-width: 767px) {
    .buildora-inner-about {
        --ia-gutter: 20px;
        --ia-media-clip: polygon(0% 0%, 100% 0%, 100% 88%, 0% 100%);
    }

    .buildora-inner-about__main-image { height: clamp(320px, 72vw, 400px); }

    .buildora-inner-about__experience {
        width: 200px;
        height: 178px;
        margin-bottom: -48px;
    }

    .buildora-inner-about__experience-panel { padding: 22px 18px 18px 24px; }
    .buildora-inner-about__experience-number { margin-top: 16px; font-size: 50px; }
    .buildora-inner-about__experience-label { margin-top: 10px; font-size: 11px; }

    .buildora-inner-about__intro { padding-top: 80px; }

    .buildora-inner-about__title { font-size: clamp(38px, 10vw, 52px); }

    .buildora-inner-about__description { font-size: 16.5px; }

    .buildora-inner-about__secondary {
        width: 88%;
        aspect-ratio: 4 / 3;
        margin-top: 40px;
    }

    .buildora-inner-about__values { gap: 28px 24px; margin-top: 44px; }
}

/* Small mobile — up to 480px */
@media (max-width: 480px) {
    .buildora-inner-about {
        --ia-gutter: 16px;
    }

    .buildora-inner-about__main-image { height: 320px; }

    .buildora-inner-about__experience {
        width: 180px;
        height: 162px;
    }

    .buildora-inner-about__experience-number { font-size: 46px; }

    .buildora-inner-about__title { font-size: clamp(34px, 10.2vw, 42px); }

    .buildora-inner-about__secondary {
        width: 90%;
        max-height: 300px;
    }

    .buildora-inner-about__values {
        grid-template-columns: minmax(0, 1fr);
        gap: 0;
    }

    .buildora-inner-about__value,
    .buildora-inner-about__value:first-child {
        display: grid;
        grid-template-columns: 44px minmax(0, 1fr);
        column-gap: 16px;
        padding: 22px 0;
    }

    .buildora-inner-about__value:first-child { border-top: 0; padding-top: 0; }

    .buildora-inner-about__value-icon { grid-row: 1 / 3; width: 40px; height: 40px; }
    .buildora-inner-about__value-title { margin-top: 2px; }

    .buildora-inner-about__story-sub { letter-spacing: 0.14em; }
}

@media (prefers-reduced-motion: reduce) {
    .buildora-inner-about *,
    .buildora-inner-about *::before,
    .buildora-inner-about *::after {
        transition-duration: 0.01ms !important;
    }

    .buildora-inner-about__story:hover .buildora-inner-about__story-circle,
    .buildora-inner-about__value:hover .buildora-inner-about__value-icon {
        transform: none;
    }
}

/* ==========================================================================
   BUILDORA CONSTRUCTIONS — Inner Services (Services page grid)
   Component: .buildora-inner-service
   Breakpoints:
     Desktop            1440px+
     Laptop             1200px – 1439px   (3 columns)
     Tablet landscape   1024px – 1199px   (2 columns)
     Tablet portrait     768px – 1023px   (2 columns)
     Mobile             481px – 767px     (1 column, horizontal cards)
     Small mobile       up to 480px       (1 column, stacked cards)
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Variables — each falls back to a global theme token when one is defined
   -------------------------------------------------------------------------- */
.buildora-inner-service {
    --is-dark: var(--color-dark, #101820);
    --is-text: var(--color-text, #24313A);
    --is-muted: var(--color-muted, #6E777D);
    --is-accent: var(--color-accent, #BF552B);
    --is-accent-dark: var(--color-accent-dark, #A2461F);
    --is-white: var(--color-white, #FFFFFF);
    --is-cream: var(--color-off-white, #F5F3EF);
    --is-card: rgba(251, 250, 248, 0.97);
    --is-border: rgba(16, 24, 32, 0.10);

    --is-font-display: var(--font-display, "Inter Tight", "Helvetica Neue", Arial, sans-serif);
    --is-font-body: var(--font-body, "Manrope", "Helvetica Neue", Arial, sans-serif);

    /* Architectural line art — swap for any texture (lower the opacity for photos) */
    --is-bg-image: url("../images/about-blueprint.svg");
    --is-bg-opacity: 0.05;

    --is-max: 1440px;
    --is-gutter: clamp(20px, 3.4vw, 48px);
    --is-space: clamp(80px, 7.6vw, 112px);
    --is-gap: clamp(16px, 1.4vw, 22px);
    --is-image-w: 49%;
    --is-visual-w: 31%;
    --is-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
    --is-duration: 0.45s;

    /* 2. Section */
    position: relative;
    isolation: isolate;
    overflow: hidden;              /* clips the deliberate edge-bleed of the orange visual */
    padding-block: var(--is-space);
    background-color: var(--is-cream);
    font-family: var(--is-font-body);
    color: var(--is-text);
}

.buildora-inner-service *,
.buildora-inner-service *::before,
.buildora-inner-service *::after {
    box-sizing: border-box;
}

/* :where() keeps the reset at zero specificity so component margins win */
:where(.buildora-inner-service) :where(p, h2, h3, ul) {
    margin: 0;
}

:where(.buildora-inner-service) ul {
    padding: 0;
    list-style: none;
}

.buildora-inner-service img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.buildora-inner-service svg {
    display: block;
    flex-shrink: 0;
}

/* Only the mouse offset (CSS `translate`) is driven per-element by JS, so it
   composes with the GSAP reveal/parallax transforms. */
.buildora-inner-service [data-is-depth] {
    translate: calc(var(--is-mx, 0) * 1px) calc(var(--is-my, 0) * 1px);
}

/* --------------------------------------------------------------------------
   3–4. Background + blueprint (strongest around the header, fading out)
   -------------------------------------------------------------------------- */
.buildora-inner-service__blueprint {
    position: absolute;
    top: -6%;
    left: 0;
    z-index: 0;
    width: 78%;
    height: 72%;
    pointer-events: none;
    background-image: var(--is-bg-image);
    background-size: cover;
    background-position: center top;
    background-repeat: no-repeat;
    opacity: var(--is-bg-opacity);
    -webkit-mask-image: linear-gradient(180deg, #000 30%, transparent 90%);
    mask-image: linear-gradient(180deg, #000 30%, transparent 90%);
    will-change: transform;
}

/* --------------------------------------------------------------------------
   5. Architectural visual — orange-toned photograph with a diagonal left
   edge. It runs past the section's top and bottom so parallax never shows
   a gap; the section clips the excess.
   -------------------------------------------------------------------------- */
.buildora-inner-service__visual {
    position: absolute;
    top: -5%;
    bottom: -5%;
    right: 0;
    z-index: 1;
    width: var(--is-visual-w);
    overflow: hidden;
    background-color: var(--is-accent);
    clip-path: polygon(0 0, 100% 0, 100% 100%, 59% 100%);
}

/* 12px larger than the frame on every side so mouse drift never shows an edge */
.buildora-inner-service__visual-media {
    position: absolute;
    inset: -12px;
}

/* Duotone: a desaturated photo multiplied by the Buildora orange keeps the
   building legible as light and shadow rather than hiding it. */
.buildora-inner-service__visual-media img {
    filter: grayscale(1) contrast(1.15) brightness(1.2);
    object-position: 40% 30%;
}

.buildora-inner-service__visual-media::after {
    content: "";
    position: absolute;
    inset: 0;
    background-color: var(--is-accent);
    mix-blend-mode: multiply;
    opacity: 0.92;
}

.buildora-inner-service__visual::after {
    /* soft shade at the top keeps the statement crisp */
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(200deg, rgba(120, 45, 15, 0.35) 0%, rgba(120, 45, 15, 0) 40%);
    pointer-events: none;
}

.buildora-inner-service__statement {
    position: absolute;
    top: calc(5% + clamp(36px, 3.6vw, 56px));
    right: clamp(28px, 4.4vw, 76px);
    z-index: 2;
    color: var(--is-white);
}

.buildora-inner-service__statement-line {
    display: block;
    width: 54px;
    height: 1.5px;
    margin-bottom: clamp(26px, 2.8vw, 40px);
    background-color: rgba(255, 255, 255, 0.9);
    transform-origin: left center;
}

.buildora-inner-service__statement-list {
    font-size: clamp(13px, 1.05vw, 16px);
    font-weight: 500;
    line-height: 1.75;
    letter-spacing: 0.28em;
    text-transform: uppercase;
}

/* --------------------------------------------------------------------------
   Container
   -------------------------------------------------------------------------- */
.buildora-inner-service__container {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: var(--is-max);
    margin-inline: auto;
    padding-inline: var(--is-gutter);
}

/* --------------------------------------------------------------------------
   6. Header
   -------------------------------------------------------------------------- */
.buildora-inner-service__header {
    max-width: 780px;
}

/* 7. Eyebrow */
.buildora-inner-service__eyebrow {
    display: flex;
    align-items: center;
    gap: 20px;
    font-size: 12.5px;
    font-weight: 600;
    line-height: 1;
    letter-spacing: 0.26em;
    text-transform: uppercase;
    color: var(--is-muted);
}

.buildora-inner-service__eyebrow-line {
    display: block;
    width: 60px;
    height: 2px;
    background-color: var(--is-accent);
    transform-origin: left center;
}

/* 8. Heading */
.buildora-inner-service__heading {
    margin-top: clamp(20px, 2vw, 28px);
    font-family: var(--is-font-display);
    font-size: clamp(44px, 5vw, 76px);
    font-weight: 600;
    line-height: 1.01;
    letter-spacing: -0.045em;
    color: var(--is-dark);
}

.buildora-inner-service__heading-line {
    display: block;
}

.buildora-inner-service__heading-line--accent {
    color: var(--is-accent);
}

/* 9. Description */
.buildora-inner-service__intro {
    max-width: 650px;
    margin-top: clamp(20px, 2vw, 28px);
    font-size: clamp(16px, 1.22vw, 18px);
    line-height: 1.6;
    color: var(--is-muted);
}

/* --------------------------------------------------------------------------
   10. Grid — sits above the orange visual (z-index), so the third column
   overlaps it deliberately while every card stays fully opaque.
   -------------------------------------------------------------------------- */
.buildora-inner-service__grid {
    position: relative;
    z-index: 3;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--is-gap);
    margin-top: clamp(40px, 3.6vw, 56px);
}

.buildora-inner-service__item {
    display: flex;
}

/* 11. Service card */
.buildora-inner-service__card {
    display: grid;
    grid-template-columns: var(--is-image-w) minmax(0, 1fr);
    width: 100%;
    min-height: clamp(210px, 16.6vw, 244px);
    overflow: hidden;
    background-color: var(--is-card);
    border: 1px solid var(--is-border);
    box-shadow: 0 18px 40px -30px rgba(16, 24, 32, 0.3);
    color: inherit;
    text-decoration: none;
    transition:
        transform var(--is-duration) var(--is-ease),
        box-shadow var(--is-duration) var(--is-ease);
}

/* 12. Service image */
.buildora-inner-service__image {
    position: relative;
    overflow: hidden;
    background-color: #E6E1DA;
}

/* Taller than its frame for the (very subtle) scroll parallax */
.buildora-inner-service__image-media {
    position: absolute;
    top: -5%;
    left: 0;
    width: 100%;
    height: 110%;
}

.buildora-inner-service__image img {
    transition: transform 0.5s var(--is-ease);
}

/* Hover shade */
.buildora-inner-service__image::after {
    content: "";
    position: absolute;
    inset: 0;
    background-color: rgba(16, 24, 32, 0.2);
    opacity: 0;
    transition: opacity 0.5s var(--is-ease);
    pointer-events: none;
}

/* 13. Service content */
.buildora-inner-service__content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    min-width: 0;
    padding: clamp(20px, 1.8vw, 26px) clamp(18px, 1.6vw, 24px);
}

/* 14. Number */
.buildora-inner-service__number {
    font-family: var(--is-font-display);
    font-size: 13px;
    font-weight: 600;
    line-height: 1;
    letter-spacing: 0.08em;
    color: var(--is-accent);
    font-variant-numeric: tabular-nums;
}

/* 15. Title */
.buildora-inner-service__title {
    margin-top: clamp(12px, 1.1vw, 16px);
    font-family: var(--is-font-display);
    font-size: clamp(17px, 1.42vw, 21px);
    font-weight: 600;
    line-height: 1.18;
    letter-spacing: -0.015em;
    color: var(--is-dark);
    transition: color var(--is-duration) var(--is-ease);
}

/* 16. Description */
.buildora-inner-service__text {
    margin-top: 12px;
    font-size: clamp(14px, 0.98vw, 14.5px);
    line-height: 1.45;
    color: var(--is-muted);
}

/* 17. Arrow — pinned to the bottom of the content column */
.buildora-inner-service__arrow {
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    flex-shrink: 0;
    margin-top: auto;
    border: 1.5px solid var(--is-accent);
    border-radius: 50%;
    color: var(--is-accent);
    transition:
        background-color var(--is-duration) var(--is-ease),
        color var(--is-duration) var(--is-ease),
        transform var(--is-duration) var(--is-ease);
}

/* Keeps a minimum gap above the arrow while margin-top: auto pins it to the bottom */
.buildora-inner-service__text {
    margin-bottom: 18px;
}

/* --------------------------------------------------------------------------
   18. Hover + focus
   -------------------------------------------------------------------------- */
@media (hover: hover) {
    .buildora-inner-service__card:hover {
        transform: translateY(-4px);
        box-shadow: 0 26px 50px -30px rgba(16, 24, 32, 0.4);
    }

    .buildora-inner-service__card:hover .buildora-inner-service__image img {
        transform: scale(1.05);
    }

    .buildora-inner-service__card:hover .buildora-inner-service__image::after {
        opacity: 1;
    }

    .buildora-inner-service__card:hover .buildora-inner-service__arrow {
        background-color: var(--is-accent);
        color: var(--is-white);
        transform: translateX(4px);
    }

    .buildora-inner-service__card:hover .buildora-inner-service__title {
        color: var(--is-accent-dark);
    }
}

.buildora-inner-service__card:focus-visible {
    outline: 2px solid var(--is-accent);
    outline-offset: 3px;
}

.buildora-inner-service__card:focus-visible .buildora-inner-service__arrow {
    background-color: var(--is-accent);
    color: var(--is-white);
}

/* --------------------------------------------------------------------------
   19. Desktop (1440px+) is the base above.
   20. Laptop — 1200px to 1439px: still 3 columns, slimmer image
   -------------------------------------------------------------------------- */
@media (max-width: 1365px) {
    .buildora-inner-service {
        --is-image-w: 45%;
    }

    .buildora-inner-service__content {
        padding: 20px 18px;
    }

    .buildora-inner-service__arrow {
        width: 42px;
        height: 42px;
    }
}

/* --------------------------------------------------------------------------
   21. Tablet — landscape (1024–1199px) and portrait (768–1023px): 2 columns
   -------------------------------------------------------------------------- */
@media (max-width: 1199px) {
    .buildora-inner-service {
        --is-image-w: 48%;
        --is-visual-w: 30%;
    }

    .buildora-inner-service__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .buildora-inner-service__card {
        min-height: 224px;
    }

    .buildora-inner-service__content {
        padding: 24px 22px;
    }

    .buildora-inner-service__title {
        font-size: 19px;
    }

    .buildora-inner-service__statement-list {
        font-size: 12.5px;
        letter-spacing: 0.24em;
    }
}

/* Portrait: the visual shrinks to a top-right architectural corner piece and
   the header narrows so no text sits on the orange. */
@media (max-width: 1023px) {
    .buildora-inner-service {
        --is-image-w: 44%;
    }

    .buildora-inner-service__visual {
        top: 0;
        bottom: auto;
        width: 36%;
        height: clamp(300px, 40vw, 380px);
        clip-path: polygon(0 0, 100% 0, 100% 100%, 62% 100%);
    }

    .buildora-inner-service__statement {
        top: 40px;
        right: 26px;
    }

    .buildora-inner-service__statement-line {
        width: 40px;
        margin-bottom: 20px;
    }

    .buildora-inner-service__statement-list {
        font-size: 11.5px;
        letter-spacing: 0.22em;
    }

    .buildora-inner-service__header {
        max-width: 62%;
    }

    .buildora-inner-service__heading {
        font-size: clamp(40px, 5.6vw, 50px);
    }

    .buildora-inner-service__intro {
        font-size: 16px;
    }

    .buildora-inner-service__content {
        padding: 20px 18px;
    }

    .buildora-inner-service__title {
        font-size: 17.5px;
    }

    .buildora-inner-service__text {
        font-size: 14px;
    }
}

/* --------------------------------------------------------------------------
   22. Mobile — up to 767px: 1 column, horizontal cards
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
    .buildora-inner-service {
        --is-space: 72px;
        --is-image-w: 42%;
        --is-bg-opacity: 0.04;
    }

    /* Small corner piece above the heading; no statement text */
    .buildora-inner-service__visual {
        width: 40%;
        height: 132px;
        clip-path: polygon(0 0, 100% 0, 100% 100%, 58% 100%);
    }

    .buildora-inner-service__statement {
        display: none;
    }

    .buildora-inner-service__header {
        max-width: none;
    }

    .buildora-inner-service__eyebrow {
        gap: 16px;
        font-size: 11.5px;
    }

    .buildora-inner-service__eyebrow-line {
        width: 48px;
    }

    .buildora-inner-service__heading {
        margin-top: 64px;
        font-size: clamp(40px, 10vw, 54px);
        line-height: 1.02;
    }

    .buildora-inner-service__grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 16px;
        margin-top: 36px;
    }

    .buildora-inner-service__card {
        min-height: 210px;
    }

    .buildora-inner-service__content {
        padding: 22px 20px;
    }

    .buildora-inner-service__title {
        font-size: 19px;
    }

    .buildora-inner-service__text {
        font-size: 14.5px;
    }
}

/* Small mobile — up to 480px: image above content so text never cramps */
@media (max-width: 480px) {
    .buildora-inner-service__visual {
        width: 44%;
        height: 118px;
    }

    .buildora-inner-service__heading {
        margin-top: 56px;
    }

    .buildora-inner-service__card {
        grid-template-columns: minmax(0, 1fr);
        min-height: 0;
    }

    .buildora-inner-service__image {
        height: clamp(180px, 52vw, 220px);
    }

    .buildora-inner-service__content {
        padding: 20px 22px 22px;
    }

    .buildora-inner-service__text {
        margin-bottom: 20px;
    }
}

/* --------------------------------------------------------------------------
   Pre-reveal guard
   Hides the content until inner-service.js has applied its start states (it
   adds .is-ready). The delayed animation is a fallback so content always
   shows, even if a script fails to load.
   -------------------------------------------------------------------------- */
@keyframes buildora-inner-service-fallback {
    to { visibility: visible; }
}

@media (prefers-reduced-motion: no-preference) {
    .has-js .buildora-inner-service:not(.is-ready) :is(.buildora-inner-service__container, .buildora-inner-service__visual) {
        visibility: hidden;
        animation: buildora-inner-service-fallback 0s 3s forwards;
    }
}

/* --------------------------------------------------------------------------
   23. Reduced motion — colour feedback stays, movement goes
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    .buildora-inner-service *,
    .buildora-inner-service *::before,
    .buildora-inner-service *::after {
        transition-duration: 0.01ms !important;
    }

    .buildora-inner-service [data-is-depth] {
        translate: none;
    }

    .buildora-inner-service__card:hover,
    .buildora-inner-service__card:hover .buildora-inner-service__image img,
    .buildora-inner-service__card:hover .buildora-inner-service__arrow {
        transform: none;
    }

    .buildora-inner-service__blueprint {
        will-change: auto;
    }
}

/* ==========================================================================
   BUILDORA CONSTRUCTIONS — Our Services (homepage section)
   Component: .buildora-services  ·  repeatable item: .buildora-service-card
   Parts:     services intro (split architectural image) → What We Do grid
   Breakpoints:
     Desktop            1440px+           grid 3 × 2
     Laptop             1200px – 1439px   grid 2 columns
     iPad landscape     1024px – 1199px   grid 2 columns, split intro kept
     iPad portrait       768px – 1023px   intro stacks, cards stack image-under-text
     Mobile              481px – 767px    grid 1 column
     Small mobile       up to 480px
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Variables — each falls back to a global theme token when defined
   -------------------------------------------------------------------------- */
.buildora-services {
    --bs-dark: var(--color-dark, #101820);
    --bs-text: var(--color-text, #26313A);
    --bs-muted: var(--color-muted, #5E6870);
    --bs-accent: var(--color-accent, #BF552B);
    --bs-accent-dark: var(--color-accent-dark, #A2461F);
    --bs-accent-on-dark: #E3875A;
    --bs-white: var(--color-white, #FFFFFF);
    --bs-cream: var(--color-off-white, #F5F3EF);
    --bs-card: #F9F7F3;
    --bs-light: #EEECE7;
    --bs-border: var(--color-border, rgba(16, 24, 32, 0.12));
    --bs-card-border: rgba(16, 24, 32, 0.10);
    --bs-card-border-hover: rgba(16, 24, 32, 0.24);

    --bs-font: var(--font-body, "Manrope", "Helvetica Neue", Arial, sans-serif);

    /* Architectural line drawing behind the intro — swap the file freely */
    --bs-bg-image: url("../images/why-blueprint.svg");
    --bs-bg-opacity: 0.06;

    --bs-max: 1440px;
    --bs-gutter: clamp(20px, 4.4vw, 64px);
    --bs-bleed: max(var(--bs-gutter), calc((100% - var(--bs-max)) / 2 + var(--bs-gutter)));
    --bs-space: clamp(88px, 9vw, 140px);

    /* Signature angled edges */
    --bs-intro-clip: polygon(0 0, 100% 0, 100% 100%, 9% 100%);
    --bs-card-clip: polygon(0 0, 100% 0, 100% 100%, 30% 100%);

    --bs-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
    --bs-duration: 0.45s;

/* --------------------------------------------------------------------------
   2. Section base
   -------------------------------------------------------------------------- */
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding-bottom: var(--bs-space);
    background-color: var(--bs-cream);
    font-family: var(--bs-font);
    color: var(--bs-text);
}

.buildora-services *,
.buildora-services *::before,
.buildora-services *::after {
    box-sizing: border-box;
}

/* Zero-specificity reset so component rules always win */
:where(.buildora-services) :where(h2, h3, p, ul, figure) {
    margin: 0;
}

:where(.buildora-services) ul {
    padding: 0;
    list-style: none;
}

.buildora-services svg {
    display: block;
    flex-shrink: 0;
}

.buildora-services img {
    display: block;
    object-fit: cover;
}

/* Screen-reader-only text (e.g. which service a "Learn More" link opens) */
.buildora-services .buildora-visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

.buildora-services__container {
    width: 100%;
    max-width: var(--bs-max);
    margin-inline: auto;
    padding-inline: var(--bs-gutter);
}

/* Shared eyebrow */
.buildora-services__eyebrow {
    display: flex;
    align-items: center;
    gap: 16px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--bs-accent);
}

.buildora-services__eyebrow-line {
    flex: 0 0 56px;
    height: 1.5px;
    background-color: currentColor;
    transform-origin: left center;
}

/* --------------------------------------------------------------------------
   3. Background — architectural line art behind the intro
   -------------------------------------------------------------------------- */
.buildora-services__background {
    position: absolute;
    top: -2%;
    left: 0;
    right: 0;
    z-index: 0;
    height: min(760px, 70%);
    pointer-events: none;
    background-image: var(--bs-bg-image);
    background-repeat: no-repeat;
    background-position: 22% 0;
    background-size: min(1100px, 80%) auto;
    opacity: var(--bs-bg-opacity);
}

/* --------------------------------------------------------------------------
   4. Services intro — 12-column grid with full-bleed edges
      Lines: 1 full-start | 2 content-start | … | 14 content-end | 15 full-end
   -------------------------------------------------------------------------- */
.buildora-services__intro {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: var(--bs-bleed) repeat(12, minmax(0, 1fr)) var(--bs-bleed);
    grid-template-rows: minmax(clamp(540px, 42vw, 640px), auto);
}

/* --------------------------------------------------------------------------
   5. Intro content
   -------------------------------------------------------------------------- */
.buildora-services__intro-content {
    position: relative;
    z-index: 2;
    grid-column: 2 / 8;
    grid-row: 1;
    align-self: center;
    padding-block: clamp(72px, 7vw, 104px);
    padding-right: clamp(0px, 2vw, 32px);
}

.buildora-services__title {
    margin-top: clamp(20px, 2vw, 28px);
    font-size: clamp(42px, 3.8vw, 60px);
    font-weight: 700;
    line-height: 1.02;
    letter-spacing: -0.035em;
    color: var(--bs-dark);
}

.buildora-services__title-line {
    display: block;
}

.buildora-services__title-line--accent {
    color: var(--bs-accent);
}

.buildora-services__description {
    max-width: 600px;
    margin-top: clamp(20px, 2vw, 28px);
    font-size: clamp(17px, 1.3vw, 19px);
    line-height: 1.7;
    color: var(--bs-muted);
}

/* --------------------------------------------------------------------------
   6. Highlights — compact row with fine dividers
   -------------------------------------------------------------------------- */
.buildora-services__highlights {
    display: flex;
    flex-wrap: wrap;
    margin-top: clamp(32px, 3.4vw, 48px);
}

.buildora-services__highlight {
    display: flex;
    align-items: center;
    gap: 16px;
    padding-inline: clamp(20px, 2.2vw, 36px);
    border-left: 1px solid rgba(16, 24, 32, 0.15);
}

.buildora-services__highlight:first-child {
    padding-left: 0;
    border-left: 0;
}

.buildora-services__highlight-icon {
    width: 40px;
    height: 40px;
    color: var(--bs-accent);
}

.buildora-services__highlight-icon svg {
    width: 100%;
    height: 100%;
}

.buildora-services__highlight-text {
    font-size: 15px;
    font-weight: 600;
    line-height: 1.35;
    color: var(--bs-dark);
}

/* --------------------------------------------------------------------------
   7. Hero image — angled edge + feathered fade into the cream
   -------------------------------------------------------------------------- */
.buildora-services__intro-media {
    position: relative;
    z-index: 1;
    grid-column: 8 / -1;
    grid-row: 1;
    overflow: hidden;
    background-color: var(--bs-light);
    clip-path: var(--bs-intro-clip);
}

/* Soft haze along the angled edge so the cream flows into the image */
.buildora-services__intro-media::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: linear-gradient(90deg, rgba(245, 243, 239, 0.9) 0%, rgba(245, 243, 239, 0.35) 12%, rgba(245, 243, 239, 0) 24%);
}

/* Frame is oversized on both axes: it owns the reveal clip + pointer drift */
.buildora-services__intro-frame {
    position: absolute;
    inset: -7% -2%;
}

.buildora-services__intro-frame img {
    width: 100%;
    height: 100%;
    object-position: 50% 55%;
    filter: saturate(0.95) contrast(1.04);
}

/* --------------------------------------------------------------------------
   8. Image statement — integrated dark overlay, shares the media grid area
   -------------------------------------------------------------------------- */
.buildora-services__statement {
    position: relative;
    z-index: 3;
    grid-column: 8 / -1;
    grid-row: 1;
    justify-self: end;
    align-self: start;
    width: clamp(180px, 14vw, 216px);
    margin: clamp(56px, 6vw, 88px) calc(var(--bs-bleed) - 24px) 0 0;
    padding: clamp(28px, 2.6vw, 40px) clamp(24px, 2.4vw, 36px);
    color: var(--bs-white);
    background: linear-gradient(180deg, rgba(16, 24, 32, 0.7), rgba(16, 24, 32, 0.5));
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
}

.buildora-services__statement-line {
    display: block;
    width: 40px;
    height: 1.5px;
    background-color: var(--bs-accent-on-dark);
    transform-origin: left center;
}

.buildora-services__statement-text {
    margin-top: 22px;
    font-size: clamp(13px, 1.05vw, 15.5px);
    font-weight: 600;
    line-height: 1.95;
    letter-spacing: 0.24em;
    text-transform: uppercase;
}

/* --------------------------------------------------------------------------
   9. What We Do header — editorial row
   -------------------------------------------------------------------------- */
.buildora-services__header {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 460px) auto;
    align-items: end;
    column-gap: clamp(32px, 4vw, 72px);
    margin-top: clamp(72px, 7vw, 112px);
}

.buildora-services__heading {
    margin-top: clamp(16px, 1.6vw, 22px);
    font-size: clamp(40px, 4vw, 60px);
    font-weight: 700;
    line-height: 1.02;
    letter-spacing: -0.035em;
    color: var(--bs-dark);
}

.buildora-services__header-text {
    font-size: 16px;
    line-height: 1.65;
    color: var(--bs-muted);
}

.buildora-services__view-all {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-height: 44px;
    font-size: 15px;
    font-weight: 700;
    color: var(--bs-accent);
    text-decoration: none;
    white-space: nowrap;
    transition: color var(--bs-duration) var(--bs-ease);
}

.buildora-services__view-all svg {
    width: 16px;
    height: 16px;
    transition: transform var(--bs-duration) var(--bs-ease);
}

/* --------------------------------------------------------------------------
   10. Service grid
   -------------------------------------------------------------------------- */
.buildora-services__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(16px, 1.4vw, 22px);
    margin-top: clamp(36px, 3.6vw, 52px);
}

/* --------------------------------------------------------------------------
   11. Service cards — text left, angled image right
   -------------------------------------------------------------------------- */
.buildora-service-card {
    position: relative;
    display: grid;
    grid-template-columns: 50% 50%;
    min-height: clamp(230px, 17vw, 260px);
    background-color: var(--bs-card);
    border: 1px solid var(--bs-card-border);
    transition: border-color var(--bs-duration) var(--bs-ease);
}

.buildora-service-card__content {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: clamp(22px, 1.8vw, 28px) clamp(16px, 1.4vw, 22px) clamp(20px, 1.8vw, 26px) clamp(20px, 1.8vw, 28px);
}

.buildora-service-card__top {
    display: flex;
    align-items: center;
    gap: clamp(18px, 1.8vw, 26px);
}

.buildora-service-card__number {
    font-size: 20px;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: var(--bs-accent);
    font-variant-numeric: tabular-nums;
}

.buildora-service-card__icon {
    width: 40px;
    height: 40px;
    color: var(--bs-accent);
    transition: transform var(--bs-duration) var(--bs-ease);
}

.buildora-service-card__icon svg {
    width: 100%;
    height: 100%;
}

.buildora-service-card__title {
    margin-top: clamp(16px, 1.4vw, 22px);
    font-size: clamp(17px, 1.3vw, 19px);
    font-weight: 700;
    line-height: 1.22;
    letter-spacing: -0.01em;
    color: var(--bs-dark);
}

.buildora-service-card__text {
    max-width: 28ch;
    margin-top: 10px;
    font-size: 13.5px;
    line-height: 1.6;
    color: var(--bs-muted);
}

.buildora-service-card__link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: auto;
    padding-top: 14px;
    font-size: 13.5px;
    font-weight: 700;
    color: var(--bs-accent);
    text-decoration: none;
}

/* Stretch the link so the whole card is clickable */
.buildora-service-card__link::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 3;
}

.buildora-service-card__link svg {
    width: 14px;
    height: 14px;
    transition: transform var(--bs-duration) var(--bs-ease);
}

/* --------------------------------------------------------------------------
   12. Service images — angled edge, zoom layer, oversized image for motion
   -------------------------------------------------------------------------- */
.buildora-service-card__media {
    position: relative;
    overflow: hidden;
    background-color: var(--bs-light);
    clip-path: var(--bs-card-clip);
}

/* Zoom layer (CSS hover) — kept separate from the GSAP-driven image */
.buildora-service-card__zoom {
    position: absolute;
    inset: 0;
    transition: transform 0.6s var(--bs-ease);
}

.buildora-service-card__media img {
    position: absolute;
    top: -6%;
    left: -2%;
    width: 104%;
    height: 112%;
}

/* --------------------------------------------------------------------------
   13. Hover + focus states
   -------------------------------------------------------------------------- */
@media (hover: hover) {
    .buildora-services__view-all:hover { color: var(--bs-accent-dark); }
    .buildora-services__view-all:hover svg { transform: translateX(5px); }

    .buildora-service-card:hover { border-color: var(--bs-card-border-hover); }
    .buildora-service-card:hover .buildora-service-card__zoom { transform: scale(1.05); }
    .buildora-service-card:hover .buildora-service-card__icon { transform: translateY(-3px); }
    .buildora-service-card:hover .buildora-service-card__link svg { transform: translateX(5px); }
}

.buildora-service-card:focus-within {
    border-color: var(--bs-accent);
}

.buildora-services a:focus-visible {
    outline: 2px solid var(--bs-accent);
    outline-offset: 4px;
}

/* ==========================================================================
   14. Responsive
   ========================================================================== */

/* Laptop — 1200px to 1439px: grid moves to 2 columns so card text breathes */
@media (max-width: 1439px) {
    .buildora-services__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .buildora-service-card {
        grid-template-columns: 48% 52%;
        min-height: 250px;
    }

    .buildora-service-card__text { font-size: 14px; }
}

/* iPad landscape — 1024px to 1199px: split intro kept, tighter */
@media (max-width: 1199px) {
    .buildora-services {
        --bs-gutter: 32px;
        --bs-intro-clip: polygon(0 0, 100% 0, 100% 100%, 11% 100%);
    }

    .buildora-services__title { font-size: clamp(40px, 3.9vw, 46px); }

    .buildora-services__description { font-size: 17px; }

    .buildora-services__highlight { gap: 12px; padding-inline: 18px; }
    .buildora-services__highlight-icon { width: 34px; height: 34px; }
    .buildora-services__highlight-text { font-size: 14px; }

    .buildora-services__statement {
        width: 176px;
        margin-right: 20px;
        padding: 26px 22px;
    }

    .buildora-services__header {
        grid-template-columns: minmax(0, 1fr) minmax(0, 400px);
        row-gap: 20px;
    }

    .buildora-services__view-all {
        grid-column: 2;
        justify-self: start;
    }
}

/* iPad portrait — 768px to 1023px: stacked intro, image-under-text cards */
@media (max-width: 1023px) {
    .buildora-services {
        --bs-intro-clip: polygon(0 9%, 100% 0, 100% 100%, 0 100%);
        --bs-card-clip: polygon(0 18%, 100% 0, 100% 100%, 0 100%);
    }

    .buildora-services__intro {
        grid-template-rows: auto auto;
    }

    .buildora-services__intro-content {
        grid-column: 2 / 14;
        padding-block: clamp(64px, 9vw, 88px) 48px;
        padding-right: 0;
    }

    .buildora-services__title { font-size: clamp(42px, 7vw, 64px); }

    .buildora-services__intro-media {
        grid-column: 1 / -1;
        grid-row: 2;
        height: clamp(380px, 58vw, 540px);
    }

    .buildora-services__intro-media::after { display: none; }

    .buildora-services__statement {
        grid-column: 1 / -1;
        grid-row: 2;
        margin: clamp(64px, 10vw, 96px) var(--bs-bleed) 0 0;
    }

    .buildora-services__background {
        background-position: 70% 0;
        background-size: 120% auto;
    }

    .buildora-services__header {
        grid-template-columns: minmax(0, 1fr);
        row-gap: 18px;
    }

    .buildora-services__view-all { grid-column: 1; }

    .buildora-service-card {
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: auto clamp(200px, 28vw, 260px);
    }

    .buildora-service-card__content { padding: 24px 24px 20px; }

    .buildora-service-card__text { max-width: 36ch; }

    .buildora-service-card__media { margin-top: 4px; }
}

/* Mobile — 481px to 767px: single column, statement drops under the image */
@media (max-width: 767px) {
    .buildora-services {
        --bs-gutter: 20px;
        --bs-intro-clip: polygon(0 6%, 100% 0, 100% 100%, 0 100%);
        --bs-card-clip: polygon(0 12%, 100% 0, 100% 100%, 0 100%);
    }

    .buildora-services__title { font-size: clamp(38px, 10.4vw, 56px); }

    .buildora-services__description { font-size: 16.5px; }

    /* Highlights: three compact columns, icon over text, no dividers */
    .buildora-services__highlights {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 16px;
    }

    .buildora-services__highlight {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
        padding: 0;
        border-left: 0;
    }

    .buildora-services__intro-media { height: clamp(320px, 80vw, 440px); }

    .buildora-services__statement {
        grid-row: 3;
        justify-self: stretch;
        width: auto;
        margin: 0;
        padding: 28px var(--bs-bleed);
        background: #17242C;
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
    }

    .buildora-services__statement-text {
        margin-top: 16px;
        font-size: 13px;
        line-height: 1.85;
    }

    .buildora-services__header-text { font-size: 15.5px; }

    .buildora-services__grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .buildora-service-card {
        grid-template-rows: auto clamp(240px, 66vw, 340px);
    }
}

/* Small mobile — up to 480px */
@media (max-width: 480px) {
    .buildora-services {
        --bs-gutter: 16px;
    }

    .buildora-services__eyebrow-line { flex-basis: 40px; }

    .buildora-services__title { font-size: clamp(34px, 10.2vw, 44px); }

    .buildora-services__highlight-icon { width: 32px; height: 32px; }
    .buildora-services__highlight-text { font-size: 13.5px; }

    .buildora-services__intro-media { height: 320px; }

    .buildora-service-card__content { padding: 22px 20px 18px; }
    .buildora-service-card__title { font-size: 17.5px; }
    .buildora-service-card__text { font-size: 14px; }
}

/* ==========================================================================
   15. Reduced motion
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
    .buildora-services *,
    .buildora-services *::before,
    .buildora-services *::after {
        transition-duration: 0.01ms !important;
    }

    .buildora-service-card:hover .buildora-service-card__zoom,
    .buildora-service-card:hover .buildora-service-card__icon,
    .buildora-service-card:hover .buildora-service-card__link svg {
        transform: none;
    }
}

/* ==========================================================================
   BUILDORA CONSTRUCTIONS — Inner Project Showcase
   Component: .buildora-inner-project  (+ .buildora-inner-project__lightbox,
   which lives beside the section so it can sit above any page header)

   Breakpoints:
     Desktop            1440px+           3 columns
     Laptop             1200px – 1439px   3 columns
     Tablet landscape   1024px – 1199px   2 columns
     Tablet portrait     768px – 1023px   2 columns
     Mobile             481px – 767px     1 column
     Small mobile       up to 480px       1 column
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Variables
   -------------------------------------------------------------------------- */
.buildora-inner-project,
.buildora-inner-project__lightbox {
    --buildora-dark: #101820;
    --buildora-dark-alt: #17242C;
    --buildora-text: #24313A;
    --buildora-muted: #7B848A;
    --buildora-accent: #C65A2E;
    --buildora-accent-dark: #A94722;
    --buildora-cream: #F5F3EF;
    --buildora-white: #FFFFFF;
    --buildora-border: rgba(16, 24, 32, 0.10);

    --bip-font-display: var(--font-display, "Inter Tight", "Helvetica Neue", Arial, sans-serif);
    --bip-font-body: var(--font-body, "Manrope", "Helvetica Neue", Arial, sans-serif);

    --bip-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
    --bip-duration: 0.3s;
}

/* --------------------------------------------------------------------------
   2. Section
   -------------------------------------------------------------------------- */
.buildora-inner-project {
    /* Blueprint line art (building elevations) */
    --bip-blueprint: url("../images/why-blueprint.svg");
    --bip-blueprint-opacity: 0.055;

    /* Orange visual: box width + where its diagonal left edge lands at the bottom */
    --bip-visual-w: 31%;
    --bip-visual-h: 112%;          /* taller than the section: parallax never shows its bottom */
    --bip-visual-foot: 58%;        /* bottom-left corner, as % of the visual's width */
    --bip-visual-corner: 100%;     /* bottom-right corner height: < 100% angles the bottom edge */
    --bip-visual-opacity: 1;

    --bip-gutter: clamp(20px, 3vw, 40px);
    --bip-space: clamp(80px, 8vw, 120px);
    --bip-gap: 20px;
    --bip-media-ratio: 16 / 8;

    position: relative;
    isolation: isolate;
    overflow: hidden;              /* clips the deliberate edge bleed of the visual */
    padding-block: var(--bip-space);
    background-color: var(--buildora-cream);
    font-family: var(--bip-font-body);
    color: var(--buildora-text);
}

.buildora-inner-project *,
.buildora-inner-project *::before,
.buildora-inner-project *::after,
.buildora-inner-project__lightbox *,
.buildora-inner-project__lightbox *::before,
.buildora-inner-project__lightbox *::after {
    box-sizing: border-box;
}

/* :where() keeps the reset at zero specificity so component rules win */
:where(.buildora-inner-project, .buildora-inner-project__lightbox) :where(p, h2, h3, ul, figure) {
    margin: 0;
}

.buildora-inner-project svg,
.buildora-inner-project__lightbox svg {
    display: block;
    flex-shrink: 0;
}

/* --------------------------------------------------------------------------
   3. Container
   -------------------------------------------------------------------------- */
.buildora-inner-project__container {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 1440px;
    margin: 0 auto;
    padding-inline: var(--bip-gutter);
}

/* --------------------------------------------------------------------------
   4. Blueprint
   -------------------------------------------------------------------------- */
.buildora-inner-project__blueprint {
    position: absolute;
    z-index: 0;
    top: clamp(-10px, 1vw, 20px);
    left: 30%;
    width: 48%;
    height: clamp(280px, 30vw, 420px);
    background: var(--bip-blueprint) center bottom / contain no-repeat;
    opacity: var(--bip-blueprint-opacity);
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 18%, #000 75%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 18%, #000 75%, transparent);
    translate: calc(var(--bip-mx, 0) * 1px) calc(var(--bip-my, 0) * 1px);
    pointer-events: none;
}

/* --------------------------------------------------------------------------
   5. Architectural visual
   -------------------------------------------------------------------------- */
.buildora-inner-project__visual {
    position: absolute;
    z-index: 1;
    top: 0;
    right: -8px;                   /* covers the ±5px mouse drift at the right edge */
    width: calc(var(--bip-visual-w) + 8px);
    height: var(--bip-visual-h);
    opacity: var(--bip-visual-opacity);
    clip-path: polygon(0 0, 100% 0, 100% var(--bip-visual-corner), var(--bip-visual-foot) 100%);
    translate: calc(var(--bip-mx, 0) * 1px) calc(var(--bip-my, 0) * 1px);
    pointer-events: none;
    will-change: transform;
}

.buildora-inner-project__visual-inner {
    position: absolute;
    inset: 0;
    overflow: hidden;
    background-color: var(--buildora-accent);
}

.buildora-inner-project__visual-image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 40% 30%;
    filter: grayscale(0.35) contrast(1.05);
}

/* Orange overlay — the building stays partially visible */
.buildora-inner-project__visual-inner::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(180deg, rgba(169, 71, 34, 0.18), transparent 40%),
        rgba(198, 90, 46, 0.82);
}

.buildora-inner-project__visual-text {
    position: absolute;
    top: clamp(44px, 4.5vw, 64px);
    right: calc(clamp(32px, 4vw, 72px) + 8px);
    color: var(--buildora-white);
}

.buildora-inner-project__visual-line {
    display: block;
    width: 50px;
    height: 2px;
    margin-bottom: 22px;
    background-color: var(--buildora-white);
    transform-origin: left center;
}

.buildora-inner-project__visual-tagline {
    font-size: clamp(13px, 1.05vw, 16px);
    font-weight: 500;
    line-height: 1.65;
    letter-spacing: 0.26em;
    text-transform: uppercase;
}

.buildora-inner-project__visual-tagline span {
    display: block;
}

/* --------------------------------------------------------------------------
   6. Header
   -------------------------------------------------------------------------- */
.buildora-inner-project__header {
    max-width: 660px;
    margin-bottom: clamp(40px, 3.6vw, 52px);
}

/* --------------------------------------------------------------------------
   7. Eyebrow
   -------------------------------------------------------------------------- */
.buildora-inner-project__eyebrow {
    display: flex;
    align-items: center;
    gap: 18px;
    margin-bottom: clamp(16px, 1.6vw, 22px);
    font-size: 12px;
    font-weight: 500;
    line-height: 1.4;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--buildora-muted);
}

.buildora-inner-project__eyebrow-line {
    flex: 0 0 auto;
    width: 60px;
    height: 2px;
    background-color: var(--buildora-accent);
    transform-origin: left center;
}

/* --------------------------------------------------------------------------
   8. Heading
   -------------------------------------------------------------------------- */
.buildora-inner-project__heading {
    font-family: var(--bip-font-display);
    font-size: clamp(44px, 5vw, 72px);
    font-weight: 600;
    line-height: 1.02;
    letter-spacing: -0.04em;
    color: var(--buildora-dark);
}

.buildora-inner-project__heading-line {
    display: block;
}

.buildora-inner-project__heading-line--accent {
    color: var(--buildora-accent);
}

/* --------------------------------------------------------------------------
   9. Description
   -------------------------------------------------------------------------- */
.buildora-inner-project__description {
    max-width: 620px;
    margin-top: clamp(18px, 1.8vw, 26px);
    font-size: clamp(16px, 1.2vw, 17px);
    line-height: 1.6;
    color: var(--buildora-muted);
}

/* --------------------------------------------------------------------------
   10. Project grid
   -------------------------------------------------------------------------- */
.buildora-inner-project__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--bip-gap);
    padding: 0;
    list-style: none;
}

.buildora-inner-project__item {
    display: flex;
    min-width: 0;
}

/* --------------------------------------------------------------------------
   11. Project card
   -------------------------------------------------------------------------- */
.buildora-inner-project__card {
    position: relative;            /* anchors the stretched arrow link */
    display: flex;
    flex-direction: column;
    width: 100%;
    background-color: var(--buildora-white);
    box-shadow: 0 1px 0 var(--buildora-border), 0 14px 34px -18px rgba(16, 24, 32, 0.22);
}

/* --------------------------------------------------------------------------
   12. Project image
   -------------------------------------------------------------------------- */
.buildora-inner-project__media {
    position: relative;
    overflow: hidden;
    aspect-ratio: var(--bip-media-ratio);
    background-color: var(--buildora-dark-alt);
}

/* 108% tall: the scrubbed parallax (±3%) never exposes an edge */
.buildora-inner-project__image {
    position: absolute;
    top: -4%;
    left: 0;
    display: block;
    width: 100%;
    height: 108%;
    object-fit: cover;
    transition: scale 0.5s var(--bip-ease);
}

/* Subtle hover shade — the architecture stays visible */
.buildora-inner-project__media::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(16, 24, 32, 0.04), rgba(16, 24, 32, 0.2));
    opacity: 0;
    transition: opacity 0.5s var(--bip-ease);
    pointer-events: none;
}

/* --------------------------------------------------------------------------
   13. Zoom button
   -------------------------------------------------------------------------- */
.buildora-inner-project__zoom {
    position: absolute;
    z-index: 2;                    /* above the stretched project link */
    top: 16px;
    right: 16px;
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.94);
    color: var(--buildora-dark);
    box-shadow: 0 6px 18px -6px rgba(16, 24, 32, 0.35);
    cursor: zoom-in;
    transition:
        opacity var(--bip-duration) var(--bip-ease),
        transform var(--bip-duration) var(--bip-ease),
        background-color var(--bip-duration) var(--bip-ease),
        color var(--bip-duration) var(--bip-ease);
}

.buildora-inner-project__zoom svg {
    width: 18px;
    height: 18px;
}

/* --------------------------------------------------------------------------
   14. Project information
   -------------------------------------------------------------------------- */
.buildora-inner-project__info {
    display: flex;
    flex: 1 1 auto;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    min-height: 70px;
    padding: 16px 20px 16px 24px;
    background-color: var(--buildora-white);
}

.buildora-inner-project__content {
    min-width: 0;
}

/* --------------------------------------------------------------------------
   15. Category
   -------------------------------------------------------------------------- */
.buildora-inner-project__category {
    margin-bottom: 6px;
    font-size: 10.5px;
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--buildora-accent);
}

/* --------------------------------------------------------------------------
   16. Project title
   -------------------------------------------------------------------------- */
.buildora-inner-project__title {
    font-family: var(--bip-font-display);
    font-size: clamp(18px, 1.35vw, 20px);
    font-weight: 500;
    line-height: 1.25;
    letter-spacing: -0.01em;
    color: var(--buildora-dark);
}

/* --------------------------------------------------------------------------
   17. Arrow button (the card's single project link)
   Its ::after stretches over the whole card so the card is one click target.
   -------------------------------------------------------------------------- */
.buildora-inner-project__arrow {
    display: inline-grid;
    flex: 0 0 auto;
    place-items: center;
    width: 44px;
    height: 44px;
    border: 1.5px solid var(--buildora-accent);
    border-radius: 50%;
    background-color: transparent;
    color: var(--buildora-accent);
    text-decoration: none;
    transition:
        background-color var(--bip-duration) var(--bip-ease),
        color var(--bip-duration) var(--bip-ease);
}

.buildora-inner-project__arrow::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
}

.buildora-inner-project__arrow svg {
    width: 18px;
    height: 18px;
    transition: transform var(--bip-duration) var(--bip-ease);
}

/* --------------------------------------------------------------------------
   18. Hover states
   -------------------------------------------------------------------------- */
@media (hover: hover) and (pointer: fine) {
    /* Zoom control appears on hover / keyboard focus */
    .buildora-inner-project__zoom {
        opacity: 0;
        transform: translateY(0);
    }

    .buildora-inner-project__card:hover .buildora-inner-project__zoom,
    .buildora-inner-project__card:focus-within .buildora-inner-project__zoom {
        opacity: 1;
        transform: translateY(-5px);
    }

    .buildora-inner-project__zoom:hover {
        background-color: var(--buildora-accent);
        color: var(--buildora-white);
    }

    .buildora-inner-project__card:hover .buildora-inner-project__image {
        scale: 1.05;
    }

    .buildora-inner-project__card:hover .buildora-inner-project__media::after {
        opacity: 1;
    }

    .buildora-inner-project__card:hover .buildora-inner-project__arrow {
        background-color: var(--buildora-accent);
        color: var(--buildora-white);
    }

    .buildora-inner-project__card:hover .buildora-inner-project__arrow svg {
        transform: translateX(3px);
    }
}

.buildora-inner-project__zoom:focus-visible,
.buildora-inner-project__arrow:focus-visible {
    outline: 2px solid var(--buildora-accent);
    outline-offset: 3px;
}

.buildora-inner-project__arrow:focus-visible {
    background-color: var(--buildora-accent);
    color: var(--buildora-white);
}

/* --------------------------------------------------------------------------
   19. Lightbox
   -------------------------------------------------------------------------- */
.buildora-inner-project__lightbox {
    position: fixed;
    z-index: 9999;
    inset: 0;
    display: grid;
    place-items: center;
    padding: clamp(64px, 7vw, 96px) clamp(16px, 4vw, 64px) clamp(32px, 4vw, 56px);
    font-family: var(--bip-font-body);
}

.buildora-inner-project__lightbox[hidden] {
    display: none;
}

.buildora-inner-project__lightbox-backdrop {
    position: absolute;
    inset: 0;
    background-color: rgba(16, 24, 32, 0.9);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    cursor: zoom-out;
}

.buildora-inner-project__lightbox-figure {
    position: relative;
    display: flex;
    flex-direction: column;
    max-width: min(1200px, 100%);
    max-height: 100%;
}

.buildora-inner-project__lightbox-image {
    display: block;
    width: auto;
    max-width: 100%;
    height: auto;
    max-height: calc(100vh - 220px);
    max-height: calc(100dvh - 220px);
    margin-inline: auto;
    object-fit: contain;
    background-color: var(--buildora-dark-alt);
    box-shadow: 0 30px 80px -30px rgba(0, 0, 0, 0.6);
}

.buildora-inner-project__lightbox-caption {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding-top: 18px;
    color: var(--buildora-white);
}

.buildora-inner-project__lightbox-category {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: #E07A4E;                /* lighter orange for contrast on the dark backdrop */
}

.buildora-inner-project__lightbox-title {
    font-family: var(--bip-font-display);
    font-size: clamp(20px, 2vw, 26px);
    font-weight: 500;
    letter-spacing: -0.01em;
}

.buildora-inner-project__lightbox-close {
    position: absolute;
    z-index: 1;
    top: clamp(14px, 2vw, 28px);
    right: clamp(14px, 2vw, 28px);
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    padding: 0;
    border: 1.5px solid rgba(255, 255, 255, 0.4);
    border-radius: 50%;
    background: transparent;
    color: var(--buildora-white);
    cursor: pointer;
    transition:
        background-color var(--bip-duration) var(--bip-ease),
        border-color var(--bip-duration) var(--bip-ease);
}

.buildora-inner-project__lightbox-close svg {
    width: 20px;
    height: 20px;
}

.buildora-inner-project__lightbox-close:hover,
.buildora-inner-project__lightbox-close:focus-visible {
    border-color: var(--buildora-accent);
    background-color: var(--buildora-accent);
}

.buildora-inner-project__lightbox-close:focus-visible {
    outline: 2px solid var(--buildora-white);
    outline-offset: 3px;
}

/* --------------------------------------------------------------------------
   20. Desktop (1440px+) — base values above
   21. Laptop (1200px – 1439px)
   -------------------------------------------------------------------------- */
@media (max-width: 1439px) {
    .buildora-inner-project {
        --bip-visual-w: 30%;
        --bip-gap: 18px;
    }

    .buildora-inner-project__header {
        max-width: 600px;
    }

    .buildora-inner-project__info {
        padding: 14px 18px 14px 20px;
    }
}

/* --------------------------------------------------------------------------
   22. Tablet
   -------------------------------------------------------------------------- */

/* Tablet landscape (1024px – 1199px): 2 columns, smaller visual */
@media (max-width: 1199px) {
    .buildora-inner-project {
        --bip-visual-w: 32%;
        --bip-visual-h: 760px;
        --bip-visual-foot: 45%;
        --bip-visual-corner: 70%;
    }

    .buildora-inner-project__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .buildora-inner-project__header {
        max-width: 60%;
    }
}

/* Tablet portrait (768px – 1023px): 2 columns, visual tucked into the header zone */
@media (max-width: 1023px) {
    .buildora-inner-project {
        --bip-visual-w: 36%;
        --bip-visual-h: 560px;
        --bip-visual-foot: 38%;
        --bip-visual-corner: 68%;
        --bip-gap: 16px;
        --bip-media-ratio: 16 / 9;
    }

    .buildora-inner-project__header {
        max-width: 62%;
    }

    .buildora-inner-project__blueprint {
        left: 18%;
        width: 70%;
    }

    .buildora-inner-project__visual-line {
        width: 40px;
        margin-bottom: 16px;
    }

    .buildora-inner-project__visual-tagline {
        font-size: 12px;
        letter-spacing: 0.22em;
    }
}

/* --------------------------------------------------------------------------
   23. Mobile — 1 column; the visual becomes a faint shape behind the heading
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
    .buildora-inner-project {
        --bip-visual-w: 46%;
        --bip-visual-h: 380px;
        --bip-visual-foot: 30%;
        --bip-visual-corner: 62%;
        --bip-visual-opacity: 0.2;
        --bip-space: 72px;
        --bip-media-ratio: 16 / 9.5;
    }

    .buildora-inner-project__visual-text {
        display: none;
    }

    .buildora-inner-project__header {
        max-width: none;
        margin-bottom: 36px;
    }

    .buildora-inner-project__eyebrow {
        font-size: 11px;
        gap: 14px;
    }

    .buildora-inner-project__eyebrow-line {
        width: 50px;
    }

    .buildora-inner-project__heading {
        font-size: clamp(38px, 10vw, 52px);
        line-height: 1;
    }

    .buildora-inner-project__description {
        font-size: 16px;
    }

    .buildora-inner-project__grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .buildora-inner-project__blueprint {
        top: 0;
        left: -10%;
        width: 120%;
        height: 260px;
    }
}

/* Small mobile (up to 480px) */
@media (max-width: 480px) {
    .buildora-inner-project {
        --bip-space: 64px;
        --bip-visual-w: 52%;
    }

    .buildora-inner-project__zoom {
        top: 12px;
        right: 12px;
    }

    .buildora-inner-project__info {
        padding: 14px 16px 14px 18px;
    }

    .buildora-inner-project__lightbox-image {
        max-height: calc(100vh - 200px);
        max-height: calc(100dvh - 200px);
    }
}

/* --------------------------------------------------------------------------
   Pre-reveal guard
   Hides animated parts until inner-project.js has applied its start states
   (it adds .is-ready). The delayed animation is a fallback so content always
   shows, even if a script fails to load.
   -------------------------------------------------------------------------- */
@keyframes buildora-inner-project-fallback {
    to { visibility: visible; }
}

@media (prefers-reduced-motion: no-preference) {
    .has-js .buildora-inner-project:not(.is-ready) :is(
        .buildora-inner-project__header,
        .buildora-inner-project__grid,
        .buildora-inner-project__visual
    ) {
        visibility: hidden;
        animation: buildora-inner-project-fallback 0s 3s forwards;
    }
}

/* --------------------------------------------------------------------------
   24. Reduced motion
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    .buildora-inner-project *,
    .buildora-inner-project *::before,
    .buildora-inner-project *::after,
    .buildora-inner-project__lightbox * {
        transition-duration: 0.01ms !important;
    }

    .buildora-inner-project [data-inner-project-depth] {
        translate: none;
        will-change: auto;
    }

    .buildora-inner-project__card:hover .buildora-inner-project__image {
        scale: none;
    }

    .buildora-inner-project__card:hover .buildora-inner-project__zoom,
    .buildora-inner-project__card:focus-within .buildora-inner-project__zoom {
        transform: none;
    }
}

/* ==========================================================================
   BUILDORA CONSTRUCTIONS — Why Choose Us
   Component: .buildora-why
   Breakpoints:
     Desktop            1440px+
     Laptop             1200px – 1439px
     iPad landscape     1024px – 1199px
     iPad portrait       768px – 1023px   (stacked from here down)
     Mobile              481px – 767px
     Small mobile       up to 480px
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Variables — each falls back to a global theme token when defined
   -------------------------------------------------------------------------- */
.buildora-why {
    --bw-dark: var(--color-dark, #101820);
    --bw-text: var(--color-text, #26313A);
    --bw-muted: var(--color-muted, #5E6870);
    --bw-accent: var(--color-accent, #BF552B);
    --bw-accent-dark: var(--color-accent-dark, #A2461F);
    --bw-accent-on-dark: #E3875A;          /* orange tuned for contrast on charcoal */
    --bw-white: var(--color-white, #FFFFFF);
    --bw-cream: var(--color-off-white, #F5F3EF);
    --bw-light: #EEECE7;
    --bw-panel: #17242C;
    --bw-border: var(--color-border, rgba(16, 24, 32, 0.12));
    --bw-divider: rgba(16, 24, 32, 0.10);

    --bw-font-display: var(--font-display, "Inter Tight", "Helvetica Neue", Arial, sans-serif);
    --bw-font-body: var(--font-body, "Manrope", "Helvetica Neue", Arial, sans-serif);

    /* Architectural line drawing — swap the file to change the texture */
    --bw-bg-image: url("../images/why-blueprint.svg");
    --bw-bg-opacity: 0.06;

    --bw-max: 1440px;
    --bw-gutter: clamp(20px, 4.4vw, 64px);
    --bw-space: clamp(88px, 9vw, 140px);
    --bw-col-gap: clamp(48px, 5.4vw, 96px);
    --bw-sticky-top: 120px;               /* clears the fixed header */
    --bw-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
    --bw-duration: 0.45s;

/* --------------------------------------------------------------------------
   2. Section base
   -------------------------------------------------------------------------- */
    position: relative;
    isolation: isolate;
    overflow: hidden;
    overflow: clip;              /* clip, not hidden: keeps position: sticky working */
    padding-block: var(--bw-space);
    background-color: var(--bw-cream);
    font-family: var(--bw-font-body);
    color: var(--bw-text);
}

.buildora-why *,
.buildora-why *::before,
.buildora-why *::after {
    box-sizing: border-box;
}

/* Zero-specificity reset so component rules always win */
:where(.buildora-why) :where(h2, h3, p, ul, figure) {
    margin: 0;
}

:where(.buildora-why) ul {
    padding: 0;
    list-style: none;
}

.buildora-why svg {
    display: block;
    flex-shrink: 0;
}

.buildora-why img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* --------------------------------------------------------------------------
   3. Container — asymmetric grid
      Desktop areas:  intro    | visual
                      features | visual
                      cta      | visual
   -------------------------------------------------------------------------- */
.buildora-why__container {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
    grid-template-areas:
        "intro    visual"
        "features visual"
        "cta      visual";
    grid-template-rows: auto auto 1fr;
    column-gap: var(--bw-col-gap);
    width: 100%;
    max-width: var(--bw-max);
    margin-inline: auto;
    padding-inline: var(--bw-gutter);
}

/* --------------------------------------------------------------------------
   4. Header / content
   -------------------------------------------------------------------------- */
.buildora-why__intro {
    grid-area: intro;
}

.buildora-why__eyebrow {
    display: flex;
    align-items: center;
    gap: 16px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.26em;
    text-transform: uppercase;
    color: var(--bw-accent);
}

.buildora-why__eyebrow-line {
    flex: 0 0 64px;
    height: 1.5px;
    background-color: currentColor;
    transform-origin: left center;
}

.buildora-why__title {
    max-width: 11em;
    margin-top: clamp(20px, 2vw, 28px);
    font-family: var(--bw-font-display);
    font-size: clamp(44px, 5vw, 74px);
    font-weight: 500;
    line-height: 1.02;
    letter-spacing: -0.03em;
    color: var(--bw-dark);
}

.buildora-why__description {
    max-width: 600px;
    margin-top: clamp(20px, 2vw, 28px);
    font-size: clamp(17px, 1.35vw, 20px);
    line-height: 1.65;
    color: var(--bw-muted);
}

/* --------------------------------------------------------------------------
   5. Feature grid — integrated, divider-based (no cards)
   -------------------------------------------------------------------------- */
.buildora-why__features {
    grid-area: features;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-top: clamp(44px, 4.6vw, 64px);
}

.buildora-why__feature {
    position: relative;
    display: grid;
    grid-template-columns: 50px minmax(0, 1fr);
    align-content: start;
    gap: 20px;
    padding-block: clamp(26px, 2.4vw, 34px);
    border-bottom: 1px solid var(--bw-divider);
}

.buildora-why__feature:nth-child(odd)  { padding-right: clamp(20px, 2.4vw, 36px); }
.buildora-why__feature:nth-child(even) { padding-left: clamp(20px, 2.4vw, 36px); border-left: 1px solid var(--bw-divider); }

.buildora-why__feature:nth-child(-n + 2)  { padding-top: 0; }
.buildora-why__feature:nth-last-child(-n + 2) { padding-bottom: 0; border-bottom: 0; }

/* Short accent line that draws in on hover, sitting on the divider */
.buildora-why__feature::before {
    content: "";
    position: absolute;
    top: -1px;
    left: 0;
    width: 40px;
    height: 1.5px;
    background-color: var(--bw-accent);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform var(--bw-duration) var(--bw-ease);
}

.buildora-why__feature:nth-child(even)::before {
    left: clamp(20px, 2.4vw, 36px);
}

.buildora-why__feature:nth-child(-n + 2)::before {
    top: -18px;
}

.buildora-why__feature-icon {
    width: 44px;
    height: 44px;
    color: var(--bw-accent);
    transition: transform var(--bw-duration) var(--bw-ease);
}

.buildora-why__feature-icon svg {
    width: 100%;
    height: 100%;
}

.buildora-why__feature-content {
    min-width: 0;
    padding-top: 4px;
}

.buildora-why__feature-title {
    font-family: var(--bw-font-display);
    font-size: clamp(18px, 1.35vw, 20px);
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: -0.005em;
    color: var(--bw-dark);
    transition: transform var(--bw-duration) var(--bw-ease);
}

.buildora-why__feature-text {
    margin-top: 12px;
    font-size: 15px;
    line-height: 1.65;
    color: var(--bw-muted);
}

/* --------------------------------------------------------------------------
   6. CTA
   -------------------------------------------------------------------------- */
.buildora-why__cta {
    grid-area: cta;
    align-self: start;
    margin-top: clamp(44px, 4.6vw, 60px);
}

.buildora-why__button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    min-height: 54px;
    padding: 0 30px;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 0.01em;
    color: var(--bw-white);
    text-decoration: none;
    background-color: var(--bw-accent);
    border-radius: 2px;
    transition:
        background-color var(--bw-duration) var(--bw-ease),
        transform var(--bw-duration) var(--bw-ease),
        box-shadow var(--bw-duration) var(--bw-ease);
}

.buildora-why__button-icon {
    width: 18px;
    height: 18px;
    transition: transform var(--bw-duration) var(--bw-ease);
}

/* --------------------------------------------------------------------------
   7. Visual composition — layered, percentage-positioned
      A .buildora-why__layer owns position + pointer drift;
      its child owns the reveal, so transforms never collide.
   -------------------------------------------------------------------------- */
.buildora-why__visual {
    grid-area: visual;
    position: sticky;
    top: var(--bw-sticky-top);
    align-self: start;
    width: 100%;
    aspect-ratio: 650 / 895;
}

.buildora-why__layer {
    position: absolute;
}

.buildora-why__media {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    overflow: clip;              /* clip, not hidden: keeps position: sticky working */
    background-color: var(--bw-light);
}

/* Oversized so parallax never exposes an edge */
.buildora-why__media img {
    position: absolute;
    inset: -6% 0;
    height: 112%;
}

/* --------------------------------------------------------------------------
   8. Main image
   -------------------------------------------------------------------------- */
.buildora-why__layer--main {
    top: 5.6%;
    left: 0;
    width: 93%;
    height: 87%;
    z-index: 1;
}

.buildora-why__main-image img {
    object-position: 50% 45%;
}

/* --------------------------------------------------------------------------
   9. Statistics panel
   -------------------------------------------------------------------------- */
.buildora-why__layer--stat {
    top: 0;
    right: 0;
    width: 36.5%;
    min-width: 200px;
    z-index: 3;
}

.buildora-why__stat {
    padding: clamp(26px, 2.6vw, 38px) clamp(22px, 2.4vw, 36px) clamp(28px, 2.8vw, 42px);
    color: var(--bw-white);
    background-color: var(--bw-panel);
}

.buildora-why__stat-value {
    display: flex;
    align-items: flex-start;
    font-family: var(--bw-font-display);
    font-size: clamp(48px, 4.4vw, 68px);
    font-weight: 500;
    line-height: 1;
    letter-spacing: -0.03em;
    font-variant-numeric: tabular-nums;
}

.buildora-why__stat-plus {
    color: var(--bw-accent-on-dark);
}

.buildora-why__stat-label {
    margin-top: clamp(18px, 1.8vw, 24px);
    font-size: 11.5px;
    font-weight: 600;
    line-height: 1.75;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--bw-accent-on-dark);
}

.buildora-why__stat-label::after {
    content: "";
    display: block;
    width: 40px;
    height: 1.5px;
    margin-top: clamp(18px, 1.8vw, 24px);
    background-color: var(--bw-accent-on-dark);
}

.buildora-why__stat-text {
    margin-top: clamp(18px, 1.8vw, 24px);
    font-size: 13.5px;
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.82);
}

/* --------------------------------------------------------------------------
   10. Secondary image
   -------------------------------------------------------------------------- */
.buildora-why__layer--secondary {
    top: 70%;
    left: 37%;
    width: 36%;
    height: 30%;
    z-index: 2;
    /* Cream frame separates it from the main image */
    outline: clamp(6px, 0.6vw, 8px) solid var(--bw-cream);
}

.buildora-why__secondary-image img {
    object-position: 45% 50%;
}

/* --------------------------------------------------------------------------
   11. Orange statement panel
   -------------------------------------------------------------------------- */
.buildora-why__layer--statement {
    top: 71.6%;
    left: 73%;
    width: 27%;
    height: 28.4%;
    z-index: 2;
}

.buildora-why__statement {
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 100%;
    padding: clamp(18px, 2vw, 28px) clamp(16px, 1.6vw, 24px);
    font-size: clamp(10px, 0.8vw, 11.5px);
    font-weight: 600;
    line-height: 2;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--bw-white);
    background-color: var(--bw-accent);
}

.buildora-why__statement::after {
    content: "";
    display: block;
    width: 40px;
    height: 1px;
    margin-top: 18px;
    background-color: rgba(255, 255, 255, 0.85);
}

/* --------------------------------------------------------------------------
   12. Background — architectural line art
   -------------------------------------------------------------------------- */
.buildora-why__background {
    position: absolute;
    inset: -4% 0;
    z-index: 0;
    pointer-events: none;
    background-image: var(--bw-bg-image);
    background-repeat: no-repeat;
    background-position: left calc(100% - 2%);
    background-size: min(1200px, 92%) auto;
    opacity: var(--bw-bg-opacity);
}

/* --------------------------------------------------------------------------
   13. Hover + focus states
   -------------------------------------------------------------------------- */
@media (hover: hover) {
    .buildora-why__feature:hover .buildora-why__feature-icon {
        transform: translateY(-4px);
    }

    .buildora-why__feature:hover .buildora-why__feature-title {
        transform: translateX(4px);
    }

    .buildora-why__feature:hover::before {
        transform: scaleX(1);
    }

    .buildora-why__button:hover {
        background-color: var(--bw-accent-dark);
        transform: translateY(-2px);
        box-shadow: 0 14px 28px -18px rgba(162, 70, 31, 0.8);
    }

    .buildora-why__button:hover .buildora-why__button-icon {
        transform: translateX(5px);
    }
}

.buildora-why a:focus-visible {
    outline: 2px solid var(--bw-dark);
    outline-offset: 4px;
}

/* ==========================================================================
   14. Responsive
   ========================================================================== */

/* Laptop — 1200px to 1439px */
@media (max-width: 1439px) {
    .buildora-why {
        --bw-sticky-top: 110px;
    }

    .buildora-why__feature {
        grid-template-columns: 42px minmax(0, 1fr);
        gap: 16px;
    }

    .buildora-why__feature-icon { width: 40px; height: 40px; }
    .buildora-why__feature-text { font-size: 14.5px; }
}

/* iPad landscape — 1024px to 1199px: two columns kept, features stack icon-over-text */
@media (max-width: 1199px) {
    .buildora-why {
        --bw-gutter: 32px;
        --bw-col-gap: 48px;
        --bw-sticky-top: 104px;
    }

    .buildora-why__container {
        grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
    }

    .buildora-why__title { font-size: clamp(44px, 5vw, 56px); }

    .buildora-why__feature {
        grid-template-columns: minmax(0, 1fr);
        gap: 16px;
    }

    .buildora-why__feature-icon { width: 38px; height: 38px; }
    .buildora-why__feature-content { padding-top: 0; }

    .buildora-why__layer--stat { min-width: 180px; }
    .buildora-why__layer--secondary { left: 35%; width: 33%; }
    .buildora-why__layer--statement { left: 68%; width: 32%; }
    .buildora-why__statement { letter-spacing: 0.15em; }
    .buildora-why__stat-text { font-size: 13px; }
}

/* iPad portrait — 768px to 1023px: stacked, wider composition */
@media (max-width: 1023px) {
    .buildora-why__container {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas:
            "intro"
            "features"
            "cta"
            "visual";
        grid-template-rows: none;
    }

    .buildora-why__title { font-size: clamp(44px, 7vw, 64px); }

    .buildora-why__feature {
        grid-template-columns: 42px minmax(0, 1fr);
        gap: 18px;
    }

    .buildora-why__feature-content { padding-top: 2px; }

    .buildora-why__visual {
        position: relative;
        top: auto;
        margin-top: clamp(64px, 9vw, 88px);
        aspect-ratio: 704 / 760;
    }

    .buildora-why__layer--main      { top: 7%;  left: 0;     width: 74%;  height: 76%; }
    .buildora-why__layer--stat      { top: 0;   right: 0;    width: 34%;  min-width: 0; }
    .buildora-why__layer--secondary { top: 64%; left: 36%;   width: 38%;  height: 36%; }
    .buildora-why__layer--statement { top: 66%; left: 74%;   width: 26%;  height: 34%; }

    .buildora-why__statement { font-size: 12px; }
}

/* Mobile — up to 767px: true stacked flow, no absolute layering */
@media (max-width: 767px) {
    .buildora-why {
        --bw-gutter: 20px;
    }

    .buildora-why__title { font-size: clamp(42px, 11vw, 64px); }

    .buildora-why__description { font-size: 17px; }

    .buildora-why__features {
        grid-template-columns: minmax(0, 1fr);
        margin-top: 40px;
    }

    .buildora-why__feature,
    .buildora-why__feature:nth-child(odd),
    .buildora-why__feature:nth-child(even) {
        padding: 26px 0;
        border-left: 0;
        border-bottom: 1px solid var(--bw-divider);
    }

    .buildora-why__feature:first-child { padding-top: 0; }
    .buildora-why__feature:last-child  { padding-bottom: 0; border-bottom: 0; }

    .buildora-why__feature::before,
    .buildora-why__feature:nth-child(even)::before { left: 0; top: -1px; }
    .buildora-why__feature:first-child::before { top: -14px; }

    .buildora-why__feature-title { font-size: 18px; }
    .buildora-why__feature-text { font-size: 15px; margin-top: 8px; }

    .buildora-why__cta { margin-top: 40px; }
    .buildora-why__button { width: 100%; }

    .buildora-why__visual {
        display: grid;
        grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
        aspect-ratio: auto;
        margin-top: 56px;
    }

    .buildora-why__layer,
    .buildora-why__layer--main,
    .buildora-why__layer--stat,
    .buildora-why__layer--secondary,
    .buildora-why__layer--statement {
        position: relative;
        inset: auto;
        width: auto;
        height: auto;
        min-width: 0;
    }

    .buildora-why__layer--main {
        grid-column: 1 / -1;
        height: 420px;
    }

    /* Statistics panel overlaps the image's bottom edge */
    .buildora-why__layer--stat {
        grid-column: 1 / -1;
        margin: -72px 0 0 28px;
    }

    .buildora-why__stat {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr);
        column-gap: 24px;
        align-items: start;
    }

    .buildora-why__stat-value { grid-row: 1 / 3; }
    .buildora-why__stat-label { margin-top: 2px; }
    .buildora-why__stat-text  { grid-column: 1 / -1; }

    .buildora-why__layer--secondary {
        height: 240px;
        margin-top: 16px;
        outline: 0;
    }

    .buildora-why__layer--statement {
        margin-top: 16px;
    }

    .buildora-why__statement {
        font-size: 11px;
        letter-spacing: 0.18em;
    }
}

/* Small mobile — up to 480px */
@media (max-width: 480px) {
    .buildora-why {
        --bw-gutter: 16px;
    }

    .buildora-why__eyebrow-line { flex-basis: 40px; }

    .buildora-why__title { font-size: clamp(38px, 11vw, 48px); }

    .buildora-why__description { font-size: 16px; }

    .buildora-why__feature,
    .buildora-why__feature:nth-child(odd),
    .buildora-why__feature:nth-child(even) {
        grid-template-columns: 36px minmax(0, 1fr);
        gap: 16px;
    }

    .buildora-why__feature-icon { width: 34px; height: 34px; }
    .buildora-why__feature-title { font-size: 17px; }
    .buildora-why__feature-text { font-size: 14.5px; }

    .buildora-why__layer--main { height: 380px; }

    .buildora-why__layer--stat { margin: -56px 0 0 16px; }

    .buildora-why__stat {
        grid-template-columns: minmax(0, 1fr);
    }

    .buildora-why__stat-value { grid-row: auto; }
    .buildora-why__stat-label { margin-top: 14px; }

    .buildora-why__layer--secondary { height: 200px; }

    .buildora-why__statement {
        padding: 18px 16px;
        font-size: 10px;
        letter-spacing: 0.16em;
    }
}

/* ==========================================================================
   15. Reduced motion
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
    .buildora-why *,
    .buildora-why *::before,
    .buildora-why *::after {
        transition-duration: 0.01ms !important;
    }

    .buildora-why__visual {
        position: relative;
        top: auto;
    }
}

/* ==========================================================================
   BUILDORA CONSTRUCTIONS — Testimonials
   Component: .buildora-testimonials (slides: .buildora-testimonial-slide)
   Breakpoints:
     Desktop            1440px+
     Laptop             1200px – 1439px
     Tablet landscape   1024px – 1199px
     Tablet portrait     768px – 1023px   (image field moves below content)
     Mobile             481px – 767px
     Small mobile       up to 480px
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Variables — each falls back to a global theme token when one is defined
   -------------------------------------------------------------------------- */
.buildora-testimonials {
    --ts-dark: var(--color-dark, #101820);
    --ts-text: var(--color-text, #26313A);
    --ts-muted: var(--color-muted, #5E6870);
    --ts-accent: var(--color-accent, #BF552B);
    --ts-accent-dark: var(--color-accent-dark, #A2461F);
    --ts-white: var(--color-white, #FFFFFF);
    --ts-cream: var(--color-off-white, #F5F3EF);
    --ts-surface: #FAF9F7;
    --ts-border: rgba(16, 24, 32, 0.08);
    --ts-divider: rgba(191, 85, 43, 0.45);

    --ts-font-display: var(--font-display, "Inter Tight", "Helvetica Neue", Arial, sans-serif);
    --ts-font-body: var(--font-body, "Manrope", "Helvetica Neue", Arial, sans-serif);

    /* Architectural line art — swap for any texture (lower the opacity for photos) */
    --ts-bg-image: url("../images/about-blueprint.svg");
    --ts-bg-opacity: 0.05;

    --ts-max: 1440px;
    --ts-gutter: clamp(20px, 4.4vw, 64px);
    --ts-space-top: clamp(88px, 8.4vw, 120px);
    --ts-space-bottom: clamp(72px, 7vw, 100px);
    --ts-panel-offset: clamp(0px, 1.6vw, 22px);   /* panel sits slightly inside the heading edge */
    --ts-visual-w: 46%;
    --ts-arrow: 52px;
    --ts-photo: 78px;
    --ts-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
    --ts-duration: 0.45s;

    /* 2. Section */
    position: relative;
    isolation: isolate;
    overflow: hidden;              /* clips the deliberate edge-bleed of the image field */
    padding: var(--ts-space-top) 0 var(--ts-space-bottom);
    background-color: var(--ts-cream);
    font-family: var(--ts-font-body);
    color: var(--ts-text);
}

.buildora-testimonials *,
.buildora-testimonials *::before,
.buildora-testimonials *::after {
    box-sizing: border-box;
}

/* :where() keeps the reset at zero specificity so component margins win */
:where(.buildora-testimonials) :where(figure, blockquote, p, h2, h3, ul, dl, dd) {
    margin: 0;
}

:where(.buildora-testimonials) ul {
    padding: 0;
    list-style: none;
}

.buildora-testimonials img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.buildora-testimonials svg {
    display: block;
    flex-shrink: 0;
}

/* Only the mouse offset (CSS `translate`) is driven per-element by JS, so it
   composes with the GSAP reveal/parallax transforms. */
.buildora-testimonials [data-ts-depth] {
    translate: calc(var(--ts-mx, 0) * 1px) calc(var(--ts-my, 0) * 1px);
}

/* --------------------------------------------------------------------------
   3. Background blueprint (cream area only, very low contrast)
   -------------------------------------------------------------------------- */
.buildora-testimonials__blueprint {
    position: absolute;
    top: -8%;
    bottom: -8%;
    left: 0;
    width: 64%;
    z-index: -1;
    pointer-events: none;
    background-image: var(--ts-bg-image);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    opacity: var(--ts-bg-opacity);
    -webkit-mask-image: linear-gradient(90deg, #000 55%, transparent 100%);
    mask-image: linear-gradient(90deg, #000 55%, transparent 100%);
    will-change: transform;
}

/* --------------------------------------------------------------------------
   4. Main layout
   The image field is a full-height layer on the right; the content column
   sits above it and the testimonial panel deliberately overlaps its edge.
   -------------------------------------------------------------------------- */
.buildora-testimonials__container {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: var(--ts-max);
    margin-inline: auto;
    padding-inline: var(--ts-gutter);
}

.buildora-testimonials__main {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    width: 75%;
}

/* --------------------------------------------------------------------------
   5. Intro
   -------------------------------------------------------------------------- */
.buildora-testimonials__intro {
    max-width: 620px;
}

.buildora-testimonials__eyebrow {
    display: flex;
    align-items: center;
    gap: 18px;
    font-size: 12px;
    font-weight: 600;
    line-height: 1;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--ts-muted);
}

.buildora-testimonials__eyebrow-line {
    display: block;
    width: 50px;
    height: 1px;
    background-color: var(--ts-accent);
    transform-origin: left center;
}

/* 6. Heading */
.buildora-testimonials__title {
    margin-top: clamp(24px, 2.4vw, 34px);
    font-family: var(--ts-font-display);
    font-size: clamp(52px, 5.6vw, 84px);
    font-weight: 600;
    line-height: 0.98;
    letter-spacing: -0.03em;
    color: var(--ts-dark);
}

.buildora-testimonials__title-line {
    display: block;
}

.buildora-testimonials__title-line--accent {
    color: var(--ts-accent);
}

/* 7. Description */
.buildora-testimonials__description {
    max-width: 600px;
    margin-top: clamp(22px, 2.2vw, 30px);
    font-size: clamp(16px, 1.3vw, 19px);
    line-height: 1.65;
    color: var(--ts-muted);
}

/* --------------------------------------------------------------------------
   8. Testimonial panel
   All slides share one grid cell, so the panel is always as tall as the
   longest testimonial and never jumps when the active slide changes.
   -------------------------------------------------------------------------- */
.buildora-testimonials__stage {
    margin-top: clamp(36px, 3.4vw, 50px);
}

.buildora-testimonials__panel {
    position: relative;
    margin-left: var(--ts-panel-offset);
    background-color: rgba(250, 249, 247, 0.96);
    border: 1px solid var(--ts-border);
    box-shadow: 0 30px 60px -48px rgba(16, 24, 32, 0.35);
}

.buildora-testimonials__slides {
    display: grid;
}

.buildora-testimonial-slide {
    grid-area: 1 / 1;
    display: grid;
    grid-template-columns: minmax(0, 60fr) minmax(0, 40fr);
}

.buildora-testimonial-slide:not(.is-active) {
    visibility: hidden;
    opacity: 0;
}

.buildora-testimonial-slide__content {
    padding: clamp(32px, 3.2vw, 48px) clamp(28px, 3.4vw, 52px) clamp(30px, 3vw, 42px);
}

/* 9. Rating */
.buildora-testimonial-slide__rating {
    display: flex;
    gap: 6px;
    color: var(--ts-accent);
}

.buildora-testimonial-slide__rating svg {
    width: 17px;
    height: 17px;
    fill: currentColor;
}

/* 10. Quote */
.buildora-testimonial-slide__quote {
    margin-top: clamp(20px, 2vw, 28px);
}

.buildora-testimonial-slide__quote p {
    font-family: var(--ts-font-display);
    font-size: clamp(19px, 1.62vw, 25px);
    font-weight: 500;
    line-height: 1.42;
    letter-spacing: -0.01em;
    text-indent: -0.38em;          /* hangs the opening quote mark */
    color: var(--ts-dark);
}

.buildora-testimonials__quote-mark {
    position: absolute;
    top: clamp(22px, 2.2vw, 30px);
    right: calc(40% + clamp(12px, 1.4vw, 22px));
    z-index: 0;
    width: clamp(48px, 4.4vw, 64px);
    color: #E4DED6;
    opacity: 0.7;
    pointer-events: none;
}

.buildora-testimonials__quote-mark svg {
    width: 100%;
    height: auto;
}

/* 11. Author */
.buildora-testimonial-slide__author {
    margin-top: clamp(24px, 2.4vw, 34px);
}

.buildora-testimonial-slide__author::before {
    content: "";
    display: block;
    width: 44px;
    height: 1.5px;
    margin-bottom: clamp(18px, 1.8vw, 24px);
    background-color: var(--ts-accent);
}

.buildora-testimonial-slide__name {
    font-family: var(--ts-font-display);
    font-size: clamp(17px, 1.35vw, 20px);
    font-weight: 600;
    line-height: 1.2;
    color: var(--ts-dark);
}

.buildora-testimonial-slide__meta {
    margin-top: 8px;
    font-size: 11.5px;
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--ts-muted);
}

/* 12. Project image */
.buildora-testimonial-slide__media {
    padding: clamp(16px, 1.6vw, 22px) clamp(16px, 1.7vw, 24px) clamp(16px, 1.6vw, 22px) 0;
}

.buildora-testimonial-slide__frame {
    position: relative;
    height: 100%;
    min-height: clamp(220px, 19vw, 270px);
    overflow: hidden;
    background-color: #E6E1DA;
}

.buildora-testimonial-slide__frame img {
    position: absolute;
    inset: 0;
    transition: transform 0.6s cubic-bezier(0.33, 1, 0.68, 1);   /* ≈ power2.out */
}

/* --------------------------------------------------------------------------
   13. Navigation controls
   Previous sits just outside the panel's left edge, next just outside its
   right edge (over the image field). Both are clamped so they never reach
   past the viewport edge.
   -------------------------------------------------------------------------- */
.buildora-testimonials__arrow {
    position: absolute;
    top: 50%;
    z-index: 3;
    display: grid;
    place-items: center;
    width: var(--ts-arrow);
    height: var(--ts-arrow);
    margin-top: calc(var(--ts-arrow) / -2);
    padding: 0;
    border: 1px solid var(--ts-border);
    border-radius: 50%;
    font: inherit;
    cursor: pointer;
    transition:
        background-color var(--ts-duration) var(--ts-ease),
        border-color var(--ts-duration) var(--ts-ease),
        color var(--ts-duration) var(--ts-ease);
}

.buildora-testimonials__arrow svg {
    transition: transform var(--ts-duration) var(--ts-ease);
}

.buildora-testimonials__arrow--prev {
    left: max(-74px, calc((var(--ts-gutter) + var(--ts-panel-offset) - 8px) * -1));
    background-color: var(--ts-surface);
    color: var(--ts-dark);
    box-shadow: 0 10px 24px -14px rgba(16, 24, 32, 0.35);
}

.buildora-testimonials__arrow--next {
    right: -78px;
    background-color: var(--ts-accent);
    border-color: var(--ts-accent);
    color: var(--ts-white);
    box-shadow: 0 12px 26px -12px rgba(16, 24, 32, 0.5);
}

/* --------------------------------------------------------------------------
   14. Client profiles
   -------------------------------------------------------------------------- */
.buildora-testimonials__clients {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 8px;
    width: 88%;
    margin: clamp(28px, 2.6vw, 36px) 0 0 var(--ts-panel-offset);
}

.buildora-testimonials__client {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    padding: 4px 4px 18px;
    background: none;
    border: 0;
    border-radius: 4px;
    font: inherit;
    color: var(--ts-dark);
    text-align: center;
    cursor: pointer;
}

.buildora-testimonials__client-photo {
    display: block;
    width: var(--ts-photo);
    height: var(--ts-photo);
    padding: 3px;
    border: 1.5px solid transparent;
    border-radius: 50%;
    background-color: rgba(16, 24, 32, 0.06);
    background-clip: padding-box;
    transition:
        transform 0.5s var(--ts-ease),
        border-color 0.5s var(--ts-ease),
        background-color 0.5s var(--ts-ease);
}

.buildora-testimonials__client-photo img {
    border-radius: 50%;
    filter: grayscale(0.25);
    transition: filter 0.5s var(--ts-ease);
}

.buildora-testimonials__client-name {
    margin-top: 14px;
    font-family: var(--ts-font-display);
    font-size: clamp(14px, 1.1vw, 16px);
    font-weight: 600;
    line-height: 1.2;
}

.buildora-testimonials__client-role {
    margin-top: 6px;
    font-size: 10.5px;
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--ts-muted);
}

/* Active indicator dot */
.buildora-testimonials__client::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 2px;
    width: 5px;
    height: 5px;
    margin-left: -2.5px;
    border-radius: 50%;
    background-color: var(--ts-accent);
    opacity: 0;
    transform: scale(0);
    transition: opacity 0.5s var(--ts-ease), transform 0.5s var(--ts-ease);
}

.buildora-testimonials__client.is-active .buildora-testimonials__client-photo {
    border-color: var(--ts-accent);
    background-color: transparent;
    transform: scale(1.06);
}

.buildora-testimonials__client.is-active .buildora-testimonials__client-photo img {
    filter: none;
}

.buildora-testimonials__client.is-active::after {
    opacity: 1;
    transform: scale(1);
}

/* --------------------------------------------------------------------------
   15. Statistics
   -------------------------------------------------------------------------- */
.buildora-testimonials__stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    width: min(100%, 740px);
    margin-top: clamp(34px, 3.4vw, 52px);
}

.buildora-testimonials__stat {
    display: flex;
    flex-direction: column-reverse;   /* number above label; dt stays first in the markup */
    justify-content: flex-end;
    padding-right: clamp(20px, 2.4vw, 36px);
}

.buildora-testimonials__stat + .buildora-testimonials__stat {
    padding-left: clamp(24px, 3vw, 44px);
    border-left: 1px solid var(--ts-divider);
}

.buildora-testimonials__stat-value {
    font-family: var(--ts-font-display);
    font-size: clamp(38px, 3.2vw, 48px);
    font-weight: 600;
    line-height: 1;
    letter-spacing: -0.03em;
    color: var(--ts-accent);
    font-variant-numeric: tabular-nums;
}

.buildora-testimonials__stat-label {
    margin-top: 14px;
    font-size: 11.5px;
    font-weight: 600;
    line-height: 1.35;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--ts-text);
}

/* --------------------------------------------------------------------------
   16. Right architectural image
   -------------------------------------------------------------------------- */
.buildora-testimonials__visual {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
    width: var(--ts-visual-w);
}

.buildora-testimonials__visual-frame {
    position: absolute;
    inset: 0;
    overflow: hidden;
    background-color: #1B232A;
    clip-path: polygon(0 0, 100% 0, 100% 100%, 42% 100%);
}

/* Soft shade at the top keeps the white statement readable on any sky */
.buildora-testimonials__visual-frame::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(16, 24, 32, 0.55) 0%, rgba(16, 24, 32, 0.12) 34%, rgba(16, 24, 32, 0) 55%);
    pointer-events: none;
}

/* 12px larger than the frame on every side so the mouse drift never shows an edge */
.buildora-testimonials__visual-media {
    position: absolute;
    inset: -12px;
}

/* Taller than its frame so the scroll parallax never exposes an edge */
.buildora-testimonials__visual-media img {
    position: absolute;
    top: -7%;
    left: 0;
    height: 114%;
    object-position: 58% 50%;
    will-change: transform;
}

/* 17. Vertical statement */
.buildora-testimonials__statement {
    position: absolute;
    top: clamp(72px, 7vw, 100px);
    left: 24%;
    z-index: 2;
    color: var(--ts-white);
}

.buildora-testimonials__statement-line {
    display: block;
    width: 44px;
    height: 1.5px;
    margin-bottom: 22px;
    background-color: var(--ts-accent);
    transform-origin: left center;
}

.buildora-testimonials__statement-list {
    font-size: clamp(12px, 1vw, 15px);
    font-weight: 500;
    line-height: 1.8;
    letter-spacing: 0.25em;
    text-transform: uppercase;
}

/* 18. Orange quote panel */
.buildora-testimonials__relationship {
    position: absolute;
    right: 0;
    bottom: 19%;
    z-index: 2;
    width: clamp(250px, 19.5vw, 300px);
    padding: clamp(34px, 3.2vw, 46px) clamp(28px, 3vw, 44px) clamp(36px, 3.4vw, 48px);
    background-color: var(--ts-accent);
    color: var(--ts-white);
}

.buildora-testimonials__relationship-mark {
    width: clamp(44px, 3.6vw, 54px);
    height: auto;
    color: rgba(255, 255, 255, 0.2);
}

.buildora-testimonials__relationship-text {
    margin-top: clamp(22px, 2.2vw, 30px);
    font-family: var(--ts-font-display);
    font-size: clamp(22px, 1.85vw, 28px);
    font-weight: 400;
    line-height: 1.34;
    letter-spacing: -0.01em;
}

.buildora-testimonials__relationship-line {
    display: block;
    width: 44px;
    height: 1.5px;
    margin-top: clamp(24px, 2.4vw, 32px);
    background-color: rgba(255, 255, 255, 0.85);
    transform-origin: left center;
}

/* --------------------------------------------------------------------------
   19. Hover + focus states
   -------------------------------------------------------------------------- */
@media (hover: hover) {
    .buildora-testimonial-slide__frame:hover img {
        transform: scale(1.04);
    }

    .buildora-testimonials__arrow--prev:hover {
        border-color: var(--ts-accent);
        color: var(--ts-accent);
    }

    .buildora-testimonials__arrow--prev:hover svg {
        transform: translateX(-3px);
    }

    .buildora-testimonials__arrow--next:hover {
        background-color: var(--ts-accent-dark);
        border-color: var(--ts-accent-dark);
    }

    .buildora-testimonials__arrow--next:hover svg {
        transform: translateX(3px);
    }

    .buildora-testimonials__client:hover .buildora-testimonials__client-photo {
        border-color: rgba(191, 85, 43, 0.5);
    }

    .buildora-testimonials__client:hover .buildora-testimonials__client-photo img {
        filter: none;
    }
}

.buildora-testimonials__arrow:focus-visible {
    outline: 2px solid var(--ts-accent);
    outline-offset: 3px;
}

.buildora-testimonials__arrow--next:focus-visible {
    outline-color: var(--ts-white);
    box-shadow: 0 0 0 5px var(--ts-accent);
}

.buildora-testimonials__client:focus-visible {
    outline: 2px solid var(--ts-accent);
    outline-offset: 2px;
}

/* --------------------------------------------------------------------------
   20. Responsive
   -------------------------------------------------------------------------- */

/* Laptop — 1200px to 1439px */
@media (max-width: 1365px) {
    .buildora-testimonials {
        --ts-visual-w: 44%;
    }

    .buildora-testimonials__main {
        width: 78%;
    }

    .buildora-testimonials__title {
        font-size: clamp(50px, 5.4vw, 72px);
    }

    .buildora-testimonial-slide__quote p {
        font-size: clamp(19px, 1.6vw, 22px);
    }

    .buildora-testimonials__arrow--next {
        right: -70px;
    }
}

/* Tablet landscape — 1024px to 1199px */
@media (max-width: 1199px) {
    .buildora-testimonials {
        --ts-visual-w: 40%;
        --ts-arrow: 48px;
        --ts-photo: 64px;
    }

    .buildora-testimonials__main {
        width: 80%;
    }

    .buildora-testimonials__title {
        font-size: clamp(46px, 4.8vw, 56px);
    }

    .buildora-testimonials__description {
        max-width: 540px;
        font-size: 16px;
    }

    .buildora-testimonials__visual-frame {
        clip-path: polygon(0 0, 100% 0, 100% 100%, 46% 100%);
    }

    .buildora-testimonials__statement {
        left: 32%;
    }

    .buildora-testimonials__statement-list {
        font-size: 12px;
        letter-spacing: 0.22em;
    }

    .buildora-testimonials__relationship {
        bottom: 7%;
        width: 236px;
        padding: 30px 26px 32px;
    }

    .buildora-testimonials__relationship-text {
        font-size: 20px;
    }

    .buildora-testimonial-slide__quote p {
        font-size: 19px;
    }

    .buildora-testimonials__arrow--next {
        right: -62px;
    }

    .buildora-testimonials__clients {
        width: 94%;
    }

    .buildora-testimonials__client-role {
        font-size: 9.5px;
        letter-spacing: 0.12em;
    }

    .buildora-testimonials__stat-value {
        font-size: 38px;
    }
}

/* Tablet portrait — 768px to 1023px: content first, image field below */
@media (max-width: 1023px) {
    .buildora-testimonials {
        --ts-panel-offset: 0px;
        --ts-arrow: 48px;
        --ts-photo: 68px;

        display: flex;
        flex-direction: column;
        padding-bottom: 0;
    }

    .buildora-testimonials__blueprint {
        width: 100%;
    }

    .buildora-testimonials__container {
        order: 1;
    }

    .buildora-testimonials__main {
        width: 100%;
    }

    .buildora-testimonials__title {
        font-size: clamp(48px, 7.4vw, 64px);
    }

    .buildora-testimonials__description {
        max-width: 620px;
        font-size: 17px;
    }

    /* Centred on the panel edges, pulled in so they never pass the viewport */
    .buildora-testimonials__arrow--prev {
        left: max(calc(var(--ts-arrow) / -2), calc((var(--ts-gutter) - 8px) * -1));
    }

    .buildora-testimonials__arrow--next {
        right: max(calc(var(--ts-arrow) / -2), calc((var(--ts-gutter) - 8px) * -1));
    }

    .buildora-testimonial-slide__quote p {
        font-size: 20px;
    }

    .buildora-testimonials__clients {
        width: 100%;
    }

    .buildora-testimonials__stats {
        width: 100%;
    }

    .buildora-testimonials__visual {
        order: 2;
        position: relative;
        top: auto;
        right: auto;
        bottom: auto;
        width: 100%;
        margin-top: clamp(64px, 8vw, 88px);
    }

    .buildora-testimonials__visual-frame {
        position: relative;
        inset: auto;
        height: clamp(440px, 64vw, 580px);
        clip-path: polygon(0 12%, 100% 0, 100% 100%, 0 100%);
    }

    /* The statement moves to the image's left side, so shade that side too */
    .buildora-testimonials__visual-frame::after {
        background:
            linear-gradient(90deg, rgba(16, 24, 32, 0.72) 0%, rgba(16, 24, 32, 0.35) 38%, rgba(16, 24, 32, 0) 62%),
            linear-gradient(180deg, rgba(16, 24, 32, 0.35) 0%, rgba(16, 24, 32, 0) 50%);
    }

    .buildora-testimonials__statement {
        top: 22%;
        left: var(--ts-gutter);
    }

    .buildora-testimonials__relationship {
        bottom: 9%;
        width: 300px;
    }
}

/* Mobile — up to 767px */
@media (max-width: 767px) {
    .buildora-testimonials {
        --ts-space-top: 72px;
        --ts-arrow: 44px;
        --ts-photo: 62px;
        --ts-bg-opacity: 0.04;
    }

    .buildora-testimonials__title {
        font-size: clamp(40px, 11vw, 56px);
        line-height: 1.02;
    }

    .buildora-testimonials__description {
        font-size: 16px;
    }

    .buildora-testimonials__stage {
        margin-top: 36px;
    }

    /* Panel stacks: text, then project image */
    .buildora-testimonial-slide {
        grid-template-columns: minmax(0, 1fr);
    }

    .buildora-testimonial-slide__content {
        padding: 30px 26px 26px;
    }

    .buildora-testimonial-slide__quote p {
        font-size: 18.5px;
    }

    .buildora-testimonial-slide__media {
        padding: 0 16px 16px;
    }

    .buildora-testimonial-slide__frame {
        height: clamp(240px, 62vw, 300px);
        min-height: 0;
    }

    .buildora-testimonials__quote-mark {
        top: 24px;
        right: 24px;
        width: 46px;
    }

    /* Arrows sit together on the project image's lower-right corner */
    .buildora-testimonials__arrow {
        top: auto;
        bottom: 30px;
        margin-top: 0;
    }

    .buildora-testimonials__arrow--prev {
        left: auto;
        right: calc(30px + var(--ts-arrow) + 10px);
    }

    .buildora-testimonials__arrow--next {
        right: 30px;
    }

    /* Horizontally scrollable client row, edge to edge */
    .buildora-testimonials__clients {
        display: flex;
        gap: 4px;
        width: auto;
        margin: 28px calc(var(--ts-gutter) * -1) 0;
        padding: 4px var(--ts-gutter) 2px;
        overflow-x: auto;
        overscroll-behavior-x: contain;
        scroll-snap-type: x proximity;
        scroll-padding-inline: var(--ts-gutter);
        scrollbar-width: none;
    }

    .buildora-testimonials__clients::-webkit-scrollbar {
        display: none;
    }

    .buildora-testimonials__clients > li {
        flex: 0 0 auto;
        scroll-snap-align: start;
    }

    .buildora-testimonials__client {
        width: 118px;
    }

    .buildora-testimonials__stat {
        padding-right: 14px;
    }

    .buildora-testimonials__stat + .buildora-testimonials__stat {
        padding-left: 18px;
    }

    .buildora-testimonials__stat-value {
        font-size: 36px;
    }

    .buildora-testimonials__stat-label {
        font-size: 10.5px;
        letter-spacing: 0.12em;
    }

    .buildora-testimonials__visual {
        margin-top: 56px;
        padding-bottom: 56px;
    }

    .buildora-testimonials__visual-frame {
        height: clamp(350px, 100vw, 450px);
        clip-path: polygon(0 8%, 100% 0, 100% 100%, 0 100%);
    }

    .buildora-testimonials__statement {
        top: 17%;
    }

    .buildora-testimonials__statement-line {
        width: 36px;
        margin-bottom: 16px;
    }

    .buildora-testimonials__statement-list {
        font-size: 11px;
        line-height: 1.75;
    }

    /* Orange panel steps out below the image, overlapping its lower edge */
    .buildora-testimonials__relationship {
        position: relative;
        right: auto;
        bottom: auto;
        width: min(88%, 420px);
        margin: -64px 0 0 auto;
        padding: 30px 28px 32px;
    }

    .buildora-testimonials__relationship-mark {
        width: 40px;
    }

    .buildora-testimonials__relationship-text {
        margin-top: 18px;
        font-size: 22px;
    }
}

/* Small mobile — up to 480px */
@media (max-width: 480px) {
    .buildora-testimonial-slide__content {
        padding: 28px 22px 24px;
    }

    .buildora-testimonial-slide__quote p {
        font-size: 17.5px;
    }

    .buildora-testimonials__quote-mark {
        width: 38px;
    }

    .buildora-testimonials__client {
        width: 106px;
    }

    /* Two statistics side by side, the third spans beneath */
    .buildora-testimonials__stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        row-gap: 24px;
    }

    .buildora-testimonials__stat:nth-child(3) {
        grid-column: 1 / -1;
        padding: 24px 0 0;
        border-left: 0;
        border-top: 1px solid var(--ts-divider);
    }

    .buildora-testimonials__relationship {
        width: calc(100% - 32px);
    }
}

/* --------------------------------------------------------------------------
   Pre-reveal guard
   Hides the content until testimonial.js has applied its start states (it
   adds .is-ready). The delayed animation is a fallback so content always
   shows, even if a script fails to load.
   -------------------------------------------------------------------------- */
@keyframes buildora-testimonials-fallback {
    to { visibility: visible; }
}

@media (prefers-reduced-motion: no-preference) {
    .has-js .buildora-testimonials:not(.is-ready) :is(.buildora-testimonials__main, .buildora-testimonials__visual) {
        visibility: hidden;
        animation: buildora-testimonials-fallback 0s 3s forwards;
    }
}

/* --------------------------------------------------------------------------
   21. Reduced motion
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    .buildora-testimonials *,
    .buildora-testimonials *::before,
    .buildora-testimonials *::after {
        transition-duration: 0.01ms !important;
    }

    .buildora-testimonials [data-ts-depth] {
        translate: none;
    }

    .buildora-testimonial-slide__frame:hover img {
        transform: none;
    }

    .buildora-testimonials__blueprint,
    .buildora-testimonials__visual-media img {
        will-change: auto;
    }
}

/* ==========================================================================
   BUILDORA CONSTRUCTIONS — FAQ
   Component: .buildora-faq
   Breakpoints:
     Desktop            1440px+
     Laptop             1200px – 1439px
     Tablet landscape   1024px – 1199px
     Tablet portrait     768px – 1023px   (stacks from here down)
     Mobile             481px – 767px
     Small mobile       up to 480px
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Variables — each falls back to a global theme token when one is defined
   -------------------------------------------------------------------------- */
.buildora-faq {
    --bf-dark: var(--color-dark, #101820);
    --bf-text: var(--color-text, #26313A);
    --bf-muted: var(--color-muted, #5E6870);
    --bf-accent: var(--color-accent, #BF552B);
    --bf-accent-dark: var(--color-accent-dark, #A2461F);
    --bf-accent-on-dark: #E3875A;          /* orange tuned for contrast on charcoal */
    --bf-white: var(--color-white, #FFFFFF);
    --bf-cream: var(--color-off-white, #F5F3EF);
    --bf-surface: #FAF9F7;
    --bf-active: #F1ECE5;
    --bf-panel: #17242C;
    --bf-border: rgba(16, 24, 32, 0.10);
    --bf-divider: rgba(191, 85, 43, 0.55);

    --bf-font-display: var(--font-display, "Inter Tight", "Helvetica Neue", Arial, sans-serif);
    --bf-font-body: var(--font-body, "Manrope", "Helvetica Neue", Arial, sans-serif);

    /* Architectural line art — swap for any texture (lower the opacity for photos) */
    --bf-bg-image: url("../images/about-blueprint.svg");
    --bf-bg-opacity: 0.05;

    --bf-max: 1440px;
    --bf-gutter: clamp(20px, 4.4vw, 64px);
    --bf-space: clamp(88px, 8.4vw, 120px);
    --bf-col-gap: clamp(40px, 4.4vw, 72px);
    /* Distance from the viewport edge to the container's content edge */
    --bf-bleed: max(var(--bf-gutter), calc((100vw - var(--bf-max)) / 2 + var(--bf-gutter)));
    --bf-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
    --bf-duration: 0.4s;

    /* Accordion row metrics (shared by question + answer alignment) */
    --bf-row-pad-x: clamp(20px, 2.2vw, 32px);
    --bf-row-pad-y: clamp(20px, 1.9vw, 27px);
    --bf-row-gap: clamp(16px, 1.7vw, 26px);
    --bf-num-w: 44px;
    --bf-icon: 38px;

    /* 2. Section */
    position: relative;
    isolation: isolate;
    overflow: hidden;              /* clips the deliberate edge-bleed of the visual */
    padding-top: var(--bf-space);
    background-color: var(--bf-cream);
    font-family: var(--bf-font-body);
    color: var(--bf-text);
}

.buildora-faq *,
.buildora-faq *::before,
.buildora-faq *::after {
    box-sizing: border-box;
}

/* :where() keeps the reset at zero specificity so component margins win */
:where(.buildora-faq) :where(figure, p, h2, h3, ul) {
    margin: 0;
}

:where(.buildora-faq) ul {
    padding: 0;
    list-style: none;
}

.buildora-faq img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.buildora-faq svg {
    display: block;
    flex-shrink: 0;
}

/* --------------------------------------------------------------------------
   3. Background line art (very low contrast, moved by ScrollTrigger)
   -------------------------------------------------------------------------- */
.buildora-faq__background {
    position: absolute;
    inset: -10% 0;
    z-index: -1;
    pointer-events: none;
    background-image: var(--bf-bg-image);
    background-size: cover;
    background-position: center top;
    background-repeat: no-repeat;
    opacity: var(--bf-bg-opacity);
    -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 55%, transparent 85%);
    mask-image: linear-gradient(180deg, #000 0%, #000 55%, transparent 85%);
    will-change: transform;
}

/* --------------------------------------------------------------------------
   4. Main grid
   [ intro  ][ accordion ]
   [ visual ][ accordion ]
   -------------------------------------------------------------------------- */
.buildora-faq__container {
    width: 100%;
    max-width: var(--bf-max);
    margin-inline: auto;
    padding-inline: var(--bf-gutter);
}

.buildora-faq__grid {
    display: grid;
    grid-template-columns: minmax(0, 0.84fr) minmax(0, 1.16fr);
    grid-template-rows: auto 1fr;
    grid-template-areas:
        "intro  accordion"
        "visual accordion";
    column-gap: var(--bf-col-gap);
}

/* --------------------------------------------------------------------------
   5. Intro
   -------------------------------------------------------------------------- */
.buildora-faq__intro {
    grid-area: intro;
    position: relative;
    z-index: 3;
}

/* 6. Eyebrow */
.buildora-faq__eyebrow {
    display: flex;
    align-items: center;
    gap: 18px;
    font-size: 12px;
    font-weight: 600;
    line-height: 1;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--bf-muted);
}

.buildora-faq__eyebrow-line {
    display: block;
    width: 54px;
    height: 1px;
    background-color: var(--bf-accent);
    transform-origin: left center;
}

/* 7. Heading */
.buildora-faq__title {
    margin-top: clamp(24px, 2.4vw, 36px);
    font-family: var(--bf-font-display);
    font-size: clamp(46px, 4.7vw, 76px);
    font-weight: 600;
    line-height: 1;
    letter-spacing: -0.03em;
    color: var(--bf-dark);
}

.buildora-faq__title-line {
    display: block;
}

.buildora-faq__title-line--accent {
    color: var(--bf-accent);
}

/* 8. Description */
.buildora-faq__description {
    max-width: 570px;
    margin-top: clamp(22px, 2.2vw, 32px);
    font-size: clamp(16px, 1.3vw, 19px);
    line-height: 1.65;
    color: var(--bf-muted);
}

/* 9. Contact CTA */
.buildora-faq__contact {
    display: inline-flex;
    align-items: center;
    gap: 22px;
    margin-top: clamp(28px, 2.8vw, 40px);
    color: var(--bf-dark);
    text-decoration: none;
    border-radius: 40px;
}

.buildora-faq__contact-circle {
    display: grid;
    place-items: center;
    width: 62px;
    height: 62px;
    flex-shrink: 0;
    border: 1px solid var(--bf-accent);
    border-radius: 50%;
    color: var(--bf-accent);
    transition:
        background-color var(--bf-duration) var(--bf-ease),
        color var(--bf-duration) var(--bf-ease);
}

.buildora-faq__contact-arrow {
    transition: transform var(--bf-duration) var(--bf-ease);
}

.buildora-faq__contact-text {
    display: flex;
    flex-direction: column;
    gap: 9px;
}

.buildora-faq__contact-title {
    font-family: var(--bf-font-display);
    font-size: clamp(17px, 1.35vw, 20px);
    font-weight: 600;
    line-height: 1.1;
    transition: color var(--bf-duration) var(--bf-ease);
}

.buildora-faq__contact-meta {
    font-size: 11.5px;
    font-weight: 600;
    line-height: 1;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--bf-muted);
}

.buildora-faq__contact:hover .buildora-faq__contact-circle {
    background-color: var(--bf-accent);
    color: var(--bf-white);
}

.buildora-faq__contact:hover .buildora-faq__contact-arrow {
    transform: translateX(4px);
}

.buildora-faq__contact:hover .buildora-faq__contact-title {
    color: var(--bf-accent);
}

.buildora-faq__contact:focus-visible {
    outline: 2px solid var(--bf-accent);
    outline-offset: 6px;
}

/* --------------------------------------------------------------------------
   10. Architectural visual
   Bleeds to the viewport's left edge and the section's bottom edge. The
   image's diagonal top crosses the orange shape behind it, leaving the
   orange wedge on the left; a second wedge sits in front along the bottom.
   Only the mouse offset (CSS `translate`) is driven per-element by JS, so it
   composes with the GSAP reveal/parallax transforms.
   -------------------------------------------------------------------------- */
.buildora-faq__visual {
    --bf-visual-h: clamp(500px, 44vw, 680px);

    grid-area: visual;
    align-self: end;
    position: relative;
    z-index: 1;
    width: calc(100% + var(--bf-bleed) + var(--bf-col-gap) * 0.45);
    height: var(--bf-visual-h);
    margin-top: calc(clamp(40px, 7vw, 110px) * -1);
    margin-left: calc(var(--bf-bleed) * -1);
}

[data-bf-depth] {
    translate: calc(var(--bf-mx, 0) * 1px) calc(var(--bf-my, 0) * 1px);
}

.buildora-faq__image {
    position: absolute;
    inset: 0 0 0 -16px;            /* extra 16px sits off-screen, covering mouse drift */
    z-index: 1;
    clip-path: polygon(0 40%, 100% 0, 100% 100%, 0 100%);
}

.buildora-faq__media {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

/* Taller than its frame so the scroll parallax never exposes an edge */
.buildora-faq__media img {
    position: absolute;
    top: -8%;
    left: 0;
    height: 116%;
    object-position: 38% 50%;
    will-change: transform;
}

/* 11. Orange shapes */
.buildora-faq__shape {
    position: absolute;
    inset: 0 0 0 -16px;
    background-color: var(--bf-accent);
    pointer-events: none;
}

.buildora-faq__shape--upper {
    z-index: 0;
    clip-path: polygon(0 16%, 100% 34%, 100% 100%, 0 100%);
}

.buildora-faq__shape--lower {
    z-index: 2;
    clip-path: polygon(0 83%, 94% 100%, 0 100%);
}

/* 12. Trust panel */
.buildora-faq__trust {
    position: absolute;
    left: max(12px, calc(var(--bf-bleed) - 34px));
    bottom: 9%;
    z-index: 3;
    width: clamp(290px, 24vw, 340px);
    padding: clamp(32px, 3.2vw, 48px) clamp(28px, 2.8vw, 42px);
    background-color: var(--bf-panel);
    color: var(--bf-white);
}

.buildora-faq__trust-list {
    display: flex;
    flex-direction: column;
    gap: clamp(26px, 2.6vw, 40px);
}

.buildora-faq__trust-item {
    display: grid;
    grid-template-columns: 50px minmax(0, 1fr);
    gap: 20px;
    align-items: start;
}

.buildora-faq__trust-icon {
    width: 40px;
    height: 40px;
    color: var(--bf-accent-on-dark);
}

.buildora-faq__trust-icon svg {
    width: 100%;
    height: 100%;
    stroke-width: 1.4;
}

.buildora-faq__trust-icon svg * {
    vector-effect: non-scaling-stroke;
}

.buildora-faq__trust-title {
    font-family: var(--bf-font-display);
    font-size: 16px;
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: -0.005em;
}

.buildora-faq__trust-text {
    margin-top: 8px;
    font-size: 13.5px;
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.72);
}

/* --------------------------------------------------------------------------
   13. FAQ accordion
   -------------------------------------------------------------------------- */
.buildora-faq__accordion {
    grid-area: accordion;
    align-self: start;
    position: relative;
    z-index: 2;
    margin-bottom: var(--bf-space);
    background-color: var(--bf-surface);
    border: 1px solid var(--bf-border);
}

/* 14. FAQ item */
.buildora-faq__item {
    position: relative;
    transition: background-color var(--bf-duration) var(--bf-ease);
}

.buildora-faq__item + .buildora-faq__item {
    border-top: 1px solid var(--bf-border);
}

.buildora-faq__heading {
    font: inherit;
}

.buildora-faq__question {
    display: grid;
    grid-template-columns: var(--bf-num-w) 1px minmax(0, 1fr) var(--bf-icon);
    align-items: center;
    column-gap: var(--bf-row-gap);
    width: 100%;
    padding: var(--bf-row-pad-y) var(--bf-row-pad-x);
    background: none;
    border: 0;
    border-radius: 0;
    font: inherit;
    color: var(--bf-dark);
    text-align: left;
    cursor: pointer;
}

.buildora-faq__number {
    font-family: var(--bf-font-display);
    font-size: clamp(20px, 1.65vw, 25px);
    font-weight: 500;
    line-height: 1;
    letter-spacing: -0.01em;
    color: var(--bf-accent);
    font-variant-numeric: tabular-nums;
}

.buildora-faq__divider {
    display: block;
    width: 1px;
    height: 38px;
    background-color: var(--bf-divider);
}

.buildora-faq__question-text {
    font-family: var(--bf-font-display);
    font-size: clamp(17px, 1.28vw, 19px);
    font-weight: 500;
    line-height: 1.35;
    letter-spacing: -0.01em;
    transition: color var(--bf-duration) var(--bf-ease);
}

/* Plus / minus built from two bars so the state change can animate */
.buildora-faq__icon {
    position: relative;
    width: var(--bf-icon);
    height: var(--bf-icon);
    border: 1px solid rgba(16, 24, 32, 0.18);
    border-radius: 50%;
    color: var(--bf-dark);
    transition:
        background-color var(--bf-duration) var(--bf-ease),
        border-color var(--bf-duration) var(--bf-ease),
        color var(--bf-duration) var(--bf-ease);
}

.buildora-faq__icon::before,
.buildora-faq__icon::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 13px;
    height: 1.5px;
    margin: -0.75px 0 0 -6.5px;
    background-color: currentColor;
    border-radius: 1px;
    transition: transform var(--bf-duration) var(--bf-ease);
}

.buildora-faq__icon::after {
    transform: rotate(90deg);
}

.buildora-faq__question:hover .buildora-faq__icon {
    border-color: var(--bf-accent);
    color: var(--bf-accent);
}

.buildora-faq__question:hover .buildora-faq__question-text {
    color: var(--bf-accent-dark);
}

.buildora-faq__question:focus-visible {
    outline: 2px solid var(--bf-accent);
    outline-offset: -4px;
}

.buildora-faq__answer {
    overflow: hidden;
}

.buildora-faq__answer p {
    max-width: 62ch;
    padding:
        0
        calc(var(--bf-row-pad-x) + var(--bf-icon) + var(--bf-row-gap))
        clamp(26px, 2.6vw, 36px)
        calc(var(--bf-row-pad-x) + var(--bf-num-w) + var(--bf-row-gap) * 2 + 1px);
    box-sizing: content-box;
    font-size: 16px;
    line-height: 1.7;
    color: var(--bf-muted);
}

/* --------------------------------------------------------------------------
   15. Active state
   -------------------------------------------------------------------------- */
.buildora-faq__item.is-open {
    background-color: var(--bf-active);
}

.buildora-faq__item.is-open .buildora-faq__number {
    font-weight: 600;
}

.buildora-faq__item.is-open .buildora-faq__icon {
    background-color: var(--bf-accent);
    border-color: var(--bf-accent);
    color: var(--bf-white);
}

.buildora-faq__item.is-open .buildora-faq__icon::after {
    transform: rotate(90deg) scaleX(0);
}

.buildora-faq__item.is-open .buildora-faq__question:hover .buildora-faq__icon {
    background-color: var(--bf-accent-dark);
    border-color: var(--bf-accent-dark);
    color: var(--bf-white);
}

/* --------------------------------------------------------------------------
   16. Responsive
   -------------------------------------------------------------------------- */

/* Laptop — 1200px to 1439px */
@media (max-width: 1439px) {
    .buildora-faq {
        --bf-num-w: 40px;
    }
}

/* Tablet landscape — 1024px to 1199px */
@media (max-width: 1199px) {
    .buildora-faq {
        --bf-col-gap: 40px;
        --bf-row-gap: 18px;
        --bf-row-pad-x: 22px;
        --bf-row-pad-y: 20px;
        --bf-num-w: 34px;
        --bf-icon: 36px;
    }

    .buildora-faq__grid {
        grid-template-columns: minmax(0, 0.86fr) minmax(0, 1.14fr);
    }

    .buildora-faq__title {
        font-size: clamp(42px, 4.4vw, 52px);
    }

    .buildora-faq__description {
        font-size: 16px;
    }

    .buildora-faq__contact {
        gap: 18px;
    }

    .buildora-faq__contact-circle {
        width: 56px;
        height: 56px;
    }

    .buildora-faq__visual {
        --bf-visual-h: 540px;
        margin-top: -40px;
    }

    .buildora-faq__trust {
        width: 272px;
        padding: 30px 26px;
    }

    .buildora-faq__trust-item {
        grid-template-columns: 38px minmax(0, 1fr);
        gap: 16px;
    }

    .buildora-faq__trust-icon {
        width: 34px;
        height: 34px;
    }

    .buildora-faq__trust-title {
        font-size: 15px;
    }

    .buildora-faq__trust-text {
        font-size: 13px;
    }

    .buildora-faq__number {
        font-size: 20px;
    }

    .buildora-faq__divider {
        height: 32px;
    }

    .buildora-faq__question-text {
        font-size: 16.5px;
    }

    .buildora-faq__answer p {
        font-size: 15px;
    }
}

/* Tablet portrait — 768px to 1023px: intro → visual → accordion */
@media (max-width: 1023px) {
    .buildora-faq {
        --bf-row-gap: 22px;
        --bf-row-pad-x: 28px;
        --bf-row-pad-y: 24px;
        --bf-num-w: 40px;
        --bf-icon: 38px;
    }

    .buildora-faq__grid {
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: none;
        grid-template-areas:
            "intro"
            "visual"
            "accordion";
    }

    .buildora-faq__title {
        font-size: clamp(46px, 7.2vw, 64px);
    }

    .buildora-faq__description {
        max-width: 600px;
        font-size: 17px;
    }

    /* Full bleed on both sides */
    .buildora-faq__visual {
        --bf-visual-h: clamp(460px, 66vw, 600px);
        width: auto;
        margin: 40px calc(var(--bf-gutter) * -1) 0;
    }

    .buildora-faq__image,
    .buildora-faq__shape {
        inset: 0;
    }

    .buildora-faq__image {
        clip-path: polygon(0 26%, 100% 0, 100% 100%, 0 100%);
    }

    .buildora-faq__shape--upper {
        clip-path: polygon(0 8%, 100% 30%, 100% 100%, 0 100%);
    }

    .buildora-faq__shape--lower {
        clip-path: polygon(0 88%, 70% 100%, 0 100%);
    }

    .buildora-faq__trust {
        left: var(--bf-gutter);
        bottom: 8%;
        width: 300px;
    }

    .buildora-faq__accordion {
        margin-top: 64px;
    }

    .buildora-faq__question-text {
        font-size: 18px;
    }

    .buildora-faq__answer p {
        font-size: 16px;
    }
}

/* Mobile — up to 767px: image, then the trust panel lifted onto its edge */
@media (max-width: 767px) {
    .buildora-faq {
        --bf-space: 72px;
        --bf-row-gap: 16px;
        --bf-row-pad-x: 20px;
        --bf-row-pad-y: 20px;
        --bf-num-w: 30px;
        --bf-icon: 34px;
        --bf-bg-opacity: 0.04;
    }

    .buildora-faq__eyebrow-line {
        width: 40px;
    }

    .buildora-faq__title {
        font-size: clamp(38px, 10.4vw, 54px);
        line-height: 1.02;
    }

    .buildora-faq__description {
        font-size: 16px;
    }

    .buildora-faq__visual {
        --bf-visual-h: clamp(350px, 96vw, 450px);
        height: auto;
        margin-top: 36px;
    }

    .buildora-faq__image {
        position: relative;
        inset: auto;
        height: var(--bf-visual-h);
        clip-path: polygon(0 14%, 100% 0, 100% 100%, 0 100%);
    }

    .buildora-faq__shape {
        inset: 0 0 auto 0;
        height: var(--bf-visual-h);
    }

    .buildora-faq__shape--upper {
        clip-path: polygon(0 4%, 100% 16%, 100% 100%, 0 100%);
    }

    /* Simplified bottom strip */
    .buildora-faq__shape--lower {
        clip-path: polygon(0 90%, 100% 97%, 100% 100%, 0 100%);
    }

    .buildora-faq__trust {
        position: relative;
        left: auto;
        bottom: auto;
        width: min(92%, 440px);
        margin: -30px auto 0;
        padding: 30px 26px;
    }

    .buildora-faq__trust-list {
        gap: 24px;
    }

    .buildora-faq__accordion {
        margin-top: 48px;
    }

    .buildora-faq__number {
        font-size: 19px;
    }

    .buildora-faq__divider {
        height: 30px;
    }

    .buildora-faq__question-text {
        font-size: 16.5px;
    }

    .buildora-faq__answer p {
        font-size: 15.5px;
    }
}

/* Small mobile — up to 480px */
@media (max-width: 480px) {
    .buildora-faq {
        --bf-row-gap: 13px;
        --bf-row-pad-x: 16px;
        --bf-num-w: 26px;
        --bf-icon: 32px;
    }

    .buildora-faq__contact {
        gap: 16px;
    }

    .buildora-faq__contact-circle {
        width: 54px;
        height: 54px;
    }

    .buildora-faq__trust {
        width: calc(100% - 24px);
        padding: 26px 22px;
    }

    .buildora-faq__trust-item {
        grid-template-columns: 36px minmax(0, 1fr);
        gap: 14px;
    }

    .buildora-faq__trust-icon {
        width: 32px;
        height: 32px;
    }

    .buildora-faq__number {
        font-size: 17px;
    }

    .buildora-faq__question-text {
        font-size: 16px;
    }

    /* Answer runs the full row width so it stays comfortable to read */
    .buildora-faq__answer p {
        max-width: none;
        padding: 0 var(--bf-row-pad-x) 24px;
        box-sizing: border-box;
    }
}

/* --------------------------------------------------------------------------
   Pre-reveal guard
   Hides the section's content until faq.js has applied its start states (it
   adds .is-ready). The delayed animation is a fallback so content always
   shows, even if a script fails to load.
   -------------------------------------------------------------------------- */
@keyframes buildora-faq-fallback {
    to { visibility: visible; }
}

@media (prefers-reduced-motion: no-preference) {
    .has-js .buildora-faq:not(.is-ready) .buildora-faq__grid {
        visibility: hidden;
        animation: buildora-faq-fallback 0s 3s forwards;
    }
}

/* --------------------------------------------------------------------------
   17. Reduced motion
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    .buildora-faq *,
    .buildora-faq *::before,
    .buildora-faq *::after {
        transition-duration: 0.01ms !important;
    }

    [data-bf-depth] {
        translate: none;
    }

    .buildora-faq__background,
    .buildora-faq__media img {
        will-change: auto;
    }
}

/* ==========================================================================
   BUILDORA CONSTRUCTIONS — Get In Touch (contact details + map, no form)
   Component: .buildora-get-in-touch
   Composition: contact content | orange geometry + architectural image | map
   Breakpoints:
     Desktop            1440px+
     Laptop             1200px – 1439px
     iPad landscape     1024px – 1199px   (contact ≈55% / visual ≈45%)
     iPad portrait       768px – 1023px   (vertical flow from here)
     Mobile              481px – 767px
     Small mobile       up to 480px
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Variables — each falls back to a global theme token when defined
   -------------------------------------------------------------------------- */
.buildora-get-in-touch {
    --gt-dark: var(--color-dark, #101820);
    --gt-dark-alt: #17242C;
    --gt-text: #24313A;
    --gt-muted: #5E6870;                  /* #7B848A darkened for AA contrast on cream */
    --gt-muted-soft: #737D83;
    --gt-accent: var(--color-accent, #BF552B);
    --gt-accent-dark: var(--color-accent-dark, #A2461F);
    --gt-cream: var(--color-off-white, #F5F3EF);
    --gt-white: var(--color-white, #FFFFFF);
    --gt-border: rgba(16, 24, 32, 0.10);
    --gt-divider: rgba(191, 85, 43, 0.22);

    --gt-font: var(--font-body, "Manrope", "Helvetica Neue", Arial, sans-serif);
    --gt-font-display: var(--font-display, "Inter Tight", "Helvetica Neue", Arial, sans-serif);

    --gt-blueprint: url("../images/why-blueprint.svg");

    /* Composition widths */
    --gt-visual-w: 58%;
    --gt-content-w: 46%;
    --gt-gutter: clamp(20px, 5.2vw, 104px);

    --gt-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
    --gt-duration: 0.35s;

/* --------------------------------------------------------------------------
   2. Section
   -------------------------------------------------------------------------- */
    position: relative;
    isolation: isolate;
    overflow: hidden;
    min-height: clamp(640px, 42vw, 800px);
    font-family: var(--gt-font);
    color: var(--gt-text);
    background-color: var(--gt-cream);
}

.buildora-get-in-touch *,
.buildora-get-in-touch *::before,
.buildora-get-in-touch *::after {
    box-sizing: border-box;
}

/* Zero-specificity reset so component rules always win */
:where(.buildora-get-in-touch) :where(h2, p, figure, address) {
    margin: 0;
    font-style: normal;
}

.buildora-get-in-touch svg {
    display: block;
    flex-shrink: 0;
}

.buildora-get-in-touch img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* --------------------------------------------------------------------------
   3. Container — the content column (visual layers sit beside it)
   -------------------------------------------------------------------------- */
.buildora-get-in-touch__content {
    position: relative;
    z-index: 3;
    width: var(--gt-content-w);
    padding: clamp(64px, 5.6vw, 100px) 24px clamp(56px, 5vw, 88px) var(--gt-gutter);
}

/* --------------------------------------------------------------------------
   4. Blueprint
   -------------------------------------------------------------------------- */
.buildora-get-in-touch__blueprint {
    position: absolute;
    top: -2%;
    left: 14%;
    z-index: 0;
    width: 42%;
    height: 72%;
    pointer-events: none;
    background-image: var(--gt-blueprint);
    background-repeat: no-repeat;
    background-position: 40% 0;
    background-size: auto 100%;
    opacity: 0.05;
}

/* --------------------------------------------------------------------------
   5. Header  ·  6. Eyebrow
   -------------------------------------------------------------------------- */
.buildora-get-in-touch__eyebrow {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 18px;
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: 0.26em;
    text-transform: uppercase;
    color: var(--gt-muted-soft);
}

.buildora-get-in-touch__eyebrow-line {
    display: block;
    width: 60px;
    height: 2px;
    background-color: var(--gt-accent);
    transform-origin: left center;
}

/* --------------------------------------------------------------------------
   7. Heading
   -------------------------------------------------------------------------- */
.buildora-get-in-touch__title {
    margin-top: clamp(16px, 1.6vw, 24px);
    font-family: var(--gt-font-display);
    font-size: clamp(42px, 4.2vw, 72px);
    font-weight: 600;
    line-height: 1.02;
    letter-spacing: -0.045em;
    color: var(--gt-dark);
}

.buildora-get-in-touch__title-line {
    display: block;
}

.buildora-get-in-touch__title-line--accent {
    color: var(--gt-accent);
}

/* --------------------------------------------------------------------------
   8. Description
   -------------------------------------------------------------------------- */
.buildora-get-in-touch__description {
    max-width: 600px;
    margin-top: clamp(18px, 1.8vw, 26px);
    font-size: clamp(16px, 1.2vw, 18px);
    line-height: 1.6;
    color: var(--gt-muted);
}

/* --------------------------------------------------------------------------
   9. Contact information  ·  10. Contact block  ·  12. Dividers
   -------------------------------------------------------------------------- */
.buildora-get-in-touch__contact {
    display: grid;
    /* Phone + email columns fit their one-line values; location takes the rest */
    grid-template-columns: minmax(0, 1fr) max-content max-content;
    margin-top: clamp(36px, 3.4vw, 52px);
}

.buildora-get-in-touch__contact-item {
    position: relative;
    min-width: 0;
    padding-inline: clamp(14px, 1.6vw, 32px);
}

.buildora-get-in-touch__contact-item:first-child {
    padding-left: 0;
}

.buildora-get-in-touch__contact-item:last-child {
    padding-right: 0;
}

.buildora-get-in-touch__contact-item + .buildora-get-in-touch__contact-item::before {
    content: "";
    position: absolute;
    top: 12px;
    left: 0;
    width: 1px;
    height: min(100%, 200px);
    background-color: var(--gt-divider);
}

.buildora-get-in-touch__contact-body {
    min-width: 0;
}

.buildora-get-in-touch__label {
    margin-top: 22px;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--gt-muted-soft);
}

.buildora-get-in-touch__primary {
    display: inline-block;
    margin-top: 10px;
    font-size: clamp(16px, 1.12vw, 19px);
    font-weight: 700;
    line-height: 1.35;
    color: var(--gt-dark);
    text-decoration: none;
    overflow-wrap: break-word;
}

a.buildora-get-in-touch__primary {
    white-space: nowrap;
    transition: color var(--gt-duration) var(--gt-ease);
}

.buildora-get-in-touch__secondary {
    margin-top: 10px;
    font-size: clamp(14px, 1.05vw, 15.5px);
    line-height: 1.55;
    color: var(--gt-muted);
}

/* --------------------------------------------------------------------------
   11. Icons
   -------------------------------------------------------------------------- */
.buildora-get-in-touch__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 58px;
    height: 58px;
    color: var(--gt-accent);
    background-color: rgba(191, 85, 43, 0.08);
    border-radius: 50%;
}

.buildora-get-in-touch__icon svg {
    width: 26px;
    height: 26px;
}

/* --------------------------------------------------------------------------
   13. Office link
   -------------------------------------------------------------------------- */
.buildora-get-in-touch__offices {
    display: inline-flex;
    align-items: center;
    gap: 22px;
    margin-top: clamp(36px, 3.6vw, 56px);
    color: var(--gt-dark);
    text-decoration: none;
    border-radius: 40px;
}

.buildora-get-in-touch__offices-circle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: clamp(50px, 4vw, 60px);
    height: clamp(50px, 4vw, 60px);
    color: var(--gt-accent);
    border: 1.5px solid var(--gt-accent);
    border-radius: 50%;
    transition:
        color var(--gt-duration) var(--gt-ease),
        background-color var(--gt-duration) var(--gt-ease),
        transform var(--gt-duration) var(--gt-ease);
}

.buildora-get-in-touch__offices-circle svg {
    width: 20px;
    height: 20px;
}

.buildora-get-in-touch__offices-title {
    display: block;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

.buildora-get-in-touch__offices-sub {
    display: block;
    margin-top: 6px;
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--gt-muted-soft);
}

/* --------------------------------------------------------------------------
   Visual stage — holds orange geometry, image and map (desktop: absolute)
   Child geometry is in % of the stage so the three areas stay joined.
   -------------------------------------------------------------------------- */
.buildora-get-in-touch__visual {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 2;
    width: var(--gt-visual-w);
}

/* --------------------------------------------------------------------------
   14. Architectural image — ">" shaped left edge, slanted right edge
   -------------------------------------------------------------------------- */
.buildora-get-in-touch__image {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    z-index: 2;
    width: 53%;
    overflow: hidden;
    background-color: var(--gt-dark-alt);
    clip-path: polygon(18% 0%, 98.5% 0%, 67% 100%, 60% 100%, 39.5% 60%);
}

/* Frame owns pointer drift; oversized so drift + parallax never show an edge */
.buildora-get-in-touch__image-frame {
    position: absolute;
    inset: -8% -3%;
}

.buildora-get-in-touch__image-frame img {
    object-position: 58% 50%;
}

/* Warm orange wash rising from the lower-left, as in the reference */
.buildora-get-in-touch__image::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(200deg, rgba(191, 85, 43, 0) 52%, rgba(191, 85, 43, 0.55) 100%);
}

/* --------------------------------------------------------------------------
   15. Orange geometry — wedge that meets the image at the chevron point
   -------------------------------------------------------------------------- */
.buildora-get-in-touch__geometry {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    z-index: 1;
    width: 53%;
    background: linear-gradient(180deg, #C8602F 0%, var(--gt-accent) 60%, var(--gt-accent-dark) 100%);
    clip-path: polygon(5% 0%, 18% 0%, 39.5% 60%, 60% 100%, 0% 100%, 38% 60%);
}

/* --------------------------------------------------------------------------
   16. Map — a link to Google Maps (static artwork, no API key)
   -------------------------------------------------------------------------- */
.buildora-get-in-touch__map {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 37%;
    z-index: 3;
    display: block;
    min-height: 600px;
    overflow: hidden;
    color: var(--gt-dark);
    text-decoration: none;
    background-color: #EEF0EB;
    clip-path: polygon(26% 0%, 100% 0%, 100% 100%, 0% 100%);
}

/* Canvas holds map + marker together so parallax/drift keep them aligned */
.buildora-get-in-touch__map-canvas {
    position: absolute;
    inset: -4%;
}

/* Kakkanad sits at 55% / 45% of the artwork — object-position keeps it there */
.buildora-get-in-touch__map-canvas img {
    object-position: 55% 45%;
}

.buildora-get-in-touch__map-chip {
    position: absolute;
    right: clamp(16px, 2vw, 28px);
    bottom: clamp(16px, 2vw, 28px);
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 40px;
    padding: 0 16px;
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: var(--gt-dark);
    background-color: var(--gt-white);
    border-radius: 2px;
    box-shadow: 0 8px 24px -12px rgba(16, 24, 32, 0.35);
    transition: color var(--gt-duration) var(--gt-ease), background-color var(--gt-duration) var(--gt-ease);
}

.buildora-get-in-touch__map-chip svg {
    width: 13px;
    height: 13px;
}

/* --------------------------------------------------------------------------
   17. Map marker
   -------------------------------------------------------------------------- */
.buildora-get-in-touch__marker {
    position: absolute;
    top: 45%;
    left: 55%;
    z-index: 1;
    width: 0;
    height: 0;
}

/* Soft pulse at the exact point */
.buildora-get-in-touch__marker::before {
    content: "";
    position: absolute;
    top: -22px;
    left: -22px;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background-color: rgba(191, 85, 43, 0.22);
    animation: buildora-gt-pulse 2.4s var(--gt-ease) infinite;
}

.buildora-get-in-touch__marker-pin {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 38px;
    height: 48px;
    color: var(--gt-accent);
    filter: drop-shadow(0 6px 8px rgba(16, 24, 32, 0.28));
    transform: translateX(-50%);
}

.buildora-get-in-touch__marker-label {
    position: absolute;
    left: 26px;
    top: -52px;
    padding: 8px 14px 9px;
    white-space: nowrap;
    background-color: var(--gt-white);
    border-radius: 2px;
    box-shadow: 0 10px 26px -14px rgba(16, 24, 32, 0.45);
}

.buildora-get-in-touch__marker-name {
    display: block;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.2;
    color: var(--gt-dark);
}

.buildora-get-in-touch__marker-area {
    display: block;
    margin-top: 2px;
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: 0.06em;
    color: var(--gt-muted);
}

@keyframes buildora-gt-pulse {
    0%   { transform: scale(0.5); opacity: 0.9; }
    70%  { transform: scale(1.6); opacity: 0; }
    100% { transform: scale(1.6); opacity: 0; }
}

/* --------------------------------------------------------------------------
   18. Hover + focus states
   -------------------------------------------------------------------------- */
@media (hover: hover) {
    a.buildora-get-in-touch__primary:hover { color: var(--gt-accent); }

    .buildora-get-in-touch__offices:hover .buildora-get-in-touch__offices-circle {
        color: var(--gt-white);
        background-color: var(--gt-accent);
        transform: translateX(3px);
    }

    .buildora-get-in-touch__map:hover .buildora-get-in-touch__map-chip {
        color: var(--gt-white);
        background-color: var(--gt-accent);
    }
}

.buildora-get-in-touch a:focus-visible {
    outline: 2px solid var(--gt-accent);
    outline-offset: 4px;
}

.buildora-get-in-touch__offices:focus-visible {
    outline: none;
}

.buildora-get-in-touch__offices:focus-visible .buildora-get-in-touch__offices-circle {
    color: var(--gt-white);
    background-color: var(--gt-accent);
    outline: 2px solid var(--gt-dark);
    outline-offset: 4px;
}

/* The map is clipped, so show its focus inside the panel */
.buildora-get-in-touch__map:focus-visible {
    outline: none;
}

.buildora-get-in-touch__map:focus-visible .buildora-get-in-touch__map-chip {
    color: var(--gt-white);
    background-color: var(--gt-accent);
    outline: 2px solid var(--gt-dark);
    outline-offset: 3px;
}

/* ==========================================================================
   19. Desktop — 1440px+ uses the base rules above
   ========================================================================== */

/* ==========================================================================
   20. Laptop — 1200px to 1439px
   ========================================================================== */
@media (max-width: 1439px) {
    .buildora-get-in-touch {
        --gt-visual-w: 55%;
        --gt-content-w: 48%;
        min-height: 640px;
    }

    .buildora-get-in-touch__title { font-size: clamp(42px, 4.3vw, 58px); }

    .buildora-get-in-touch__contact-item { padding-inline: 18px; }
    .buildora-get-in-touch__contact-item:first-child { padding-left: 0; }

    .buildora-get-in-touch__icon { width: 52px; height: 52px; }
    .buildora-get-in-touch__icon svg { width: 23px; height: 23px; }

    .buildora-get-in-touch__primary { font-size: 15.5px; }
    .buildora-get-in-touch__secondary { font-size: 14px; }
    .buildora-get-in-touch__label { font-size: 11px; letter-spacing: 0.18em; }
}

/* ==========================================================================
   21. Tablet
   ========================================================================== */

/* iPad landscape — 1024px to 1199px: contact ≈55%, visual/map ≈45% */
@media (max-width: 1199px) {
    .buildora-get-in-touch {
        --gt-visual-w: 45%;
        --gt-content-w: 56%;
        --gt-gutter: 32px;
    }

    .buildora-get-in-touch__content { padding-right: 16px; }

    .buildora-get-in-touch__title { font-size: clamp(40px, 4.4vw, 50px); }

    .buildora-get-in-touch__description { font-size: 16px; }

    .buildora-get-in-touch__contact-item { padding-inline: 14px; }
    .buildora-get-in-touch__contact-item:first-child { padding-left: 0; }

    .buildora-get-in-touch__primary { font-size: 15.5px; }
    .buildora-get-in-touch__secondary { font-size: 13.5px; }

    .buildora-get-in-touch__marker-label { padding: 6px 10px 7px; }
    .buildora-get-in-touch__marker-name { font-size: 13.5px; }
    .buildora-get-in-touch__marker-area { font-size: 10.5px; }
}

/* iPad portrait — 768px to 1023px: contact → image → map */
@media (max-width: 1023px) {
    .buildora-get-in-touch {
        --gt-gutter: clamp(20px, 5vw, 48px);
        min-height: 0;
    }

    .buildora-get-in-touch__content {
        width: 100%;
        padding: clamp(64px, 9vw, 88px) var(--gt-gutter) clamp(56px, 7vw, 72px);
    }

    .buildora-get-in-touch__title { font-size: clamp(42px, 6.8vw, 60px); }

    .buildora-get-in-touch__description { font-size: 17px; }

    .buildora-get-in-touch__contact-item { padding-inline: 22px; }
    .buildora-get-in-touch__contact-item:first-child { padding-left: 0; }

    .buildora-get-in-touch__visual {
        position: relative;
        inset: auto;
        width: 100%;
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: clamp(320px, 46vw, 400px) clamp(380px, 56vw, 460px);
    }

    .buildora-get-in-touch__image,
    .buildora-get-in-touch__geometry,
    .buildora-get-in-touch__map {
        position: relative;
        inset: auto;
        width: 100%;
        min-height: 0;
        grid-column: 1;
    }

    .buildora-get-in-touch__image {
        grid-row: 1;
        clip-path: polygon(0% 8%, 100% 0%, 100% 100%, 0% 100%);
    }

    /* Orange accent: a slim wedge rising from the image's lower-left */
    .buildora-get-in-touch__geometry {
        grid-row: 1;
        z-index: 3;
        clip-path: polygon(0% 44%, 26% 100%, 0% 100%);
        opacity: 0.94;
    }

    .buildora-get-in-touch__map {
        grid-row: 2;
        clip-path: none;
    }

    .buildora-get-in-touch__blueprint {
        left: 30%;
        width: 80%;
        height: 40%;
    }
}

/* ==========================================================================
   22. Mobile
   ========================================================================== */

/* 481px – 767px: single column, icon-left contact cards */
@media (max-width: 767px) {
    .buildora-get-in-touch {
        --gt-gutter: 20px;
    }

    .buildora-get-in-touch__title { font-size: clamp(38px, 10vw, 52px); }

    .buildora-get-in-touch__description { font-size: 16.5px; }

    .buildora-get-in-touch__contact {
        grid-template-columns: minmax(0, 1fr);
        margin-top: 36px;
    }

    .buildora-get-in-touch__contact-item,
    .buildora-get-in-touch__contact-item:first-child {
        display: flex;
        align-items: flex-start;
        gap: 16px;
        padding: 22px 0;
        border-top: 1px solid var(--gt-border);
    }

    .buildora-get-in-touch__contact-item:first-child { border-top: 0; padding-top: 0; }

    .buildora-get-in-touch__contact-item + .buildora-get-in-touch__contact-item::before { display: none; }

    .buildora-get-in-touch__icon { width: 50px; height: 50px; }
    .buildora-get-in-touch__icon svg { width: 22px; height: 22px; }

    .buildora-get-in-touch__label { margin-top: 2px; }
    .buildora-get-in-touch__primary { margin-top: 6px; font-size: 17px; }
    .buildora-get-in-touch__secondary { margin-top: 6px; font-size: 14.5px; }

    .buildora-get-in-touch__offices { margin-top: 28px; }

    .buildora-get-in-touch__visual {
        grid-template-rows: clamp(300px, 62vw, 360px) clamp(350px, 80vw, 420px);
    }

    .buildora-get-in-touch__image { clip-path: polygon(0% 6%, 100% 0%, 100% 100%, 0% 100%); }
}

/* Small mobile — up to 480px */
@media (max-width: 480px) {
    .buildora-get-in-touch {
        --gt-gutter: 16px;
    }

    .buildora-get-in-touch__title { font-size: clamp(34px, 10.2vw, 42px); }

    .buildora-get-in-touch__offices { gap: 16px; }
    .buildora-get-in-touch__offices-title { font-size: 13px; letter-spacing: 0.14em; }
    .buildora-get-in-touch__offices-sub { font-size: 10.5px; letter-spacing: 0.16em; }

    .buildora-get-in-touch__visual {
        grid-template-rows: 300px 360px;
    }

    .buildora-get-in-touch__marker-label { left: 22px; padding: 6px 10px 7px; }
    .buildora-get-in-touch__marker-name { font-size: 13.5px; }
}

/* ==========================================================================
   23. Reduced motion
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
    .buildora-get-in-touch *,
    .buildora-get-in-touch *::before,
    .buildora-get-in-touch *::after {
        transition-duration: 0.01ms !important;
    }

    .buildora-get-in-touch__marker::before {
        animation: none;
        opacity: 0.6;
        transform: none;
    }

    .buildora-get-in-touch__offices:hover .buildora-get-in-touch__offices-circle {
        transform: none;
    }
}

/* ==========================================================================
   BUILDORA CONSTRUCTIONS — Contact Form
   Component: .buildora-contact-form
   Breakpoints:
     Desktop            1440px+
     Laptop             1200px – 1439px
     Tablet landscape   1024px – 1199px
     Tablet portrait     768px – 1023px   (stacks: content, then form)
     Mobile             481px – 767px
     Small mobile       up to 480px
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Variables — each falls back to a global theme token when one is defined
   -------------------------------------------------------------------------- */
.buildora-contact-form {
    --cf-dark: var(--color-dark, #101820);
    --cf-dark-alt: #17242C;
    --cf-text: var(--color-text, #24313A);
    --cf-muted: var(--color-muted, #6E777D);
    --cf-placeholder: #8E959A;
    --cf-accent: var(--color-accent, #BF552B);
    --cf-accent-dark: var(--color-accent-dark, #A2461F);
    --cf-white: var(--color-white, #FFFFFF);
    --cf-cream: var(--color-off-white, #F5F3EF);
    --cf-border: rgba(16, 24, 32, 0.12);
    --cf-divider: rgba(191, 85, 43, 0.22);

    --cf-font-display: var(--font-display, "Inter Tight", "Helvetica Neue", Arial, sans-serif);
    --cf-font-body: var(--font-body, "Manrope", "Helvetica Neue", Arial, sans-serif);

    /* Swap these for any assets; the photo is also reused by the stacked layout */
    --cf-bg-image: url("../images/testimonial-main.jpg");
    --cf-blueprint-image: url("../images/about-blueprint.svg");
    --cf-bg-opacity: 0.05;

    /* Chevron geometry (cream edge + orange band) */
    --cf-cream-shape: polygon(0 0, 46% 0, 59% 53%, 44.5% 100%, 0 100%);
    --cf-band-shape: polygon(0 0, 54% 0, 67% 53%, 53% 100%, 0 100%);

    --cf-max: 1440px;
    --cf-gutter: clamp(20px, 4.4vw, 64px);
    --cf-space: clamp(88px, 7.6vw, 112px);
    --cf-field-h: 56px;
    --cf-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
    --cf-duration: 0.3s;

    /* 2. Main section */
    position: relative;
    isolation: isolate;
    overflow: hidden;              /* clips the deliberate edge-bleed of the layers */
    display: flex;
    align-items: center;
    min-height: clamp(780px, 62vw, 900px);
    padding-block: var(--cf-space);
    background-color: var(--cf-cream);
    font-family: var(--cf-font-body);
    color: var(--cf-text);
}

.buildora-contact-form *,
.buildora-contact-form *::before,
.buildora-contact-form *::after {
    box-sizing: border-box;
}

/* :where() keeps the reset at zero specificity so component margins win */
:where(.buildora-contact-form) :where(figure, p, h2, h3, ul) {
    margin: 0;
}

:where(.buildora-contact-form) ul {
    padding: 0;
    list-style: none;
}

.buildora-contact-form img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.buildora-contact-form svg {
    display: block;
    flex-shrink: 0;
}

/* Only the mouse offset (CSS `translate`) is driven per-element by JS, so it
   composes with the GSAP reveal/parallax transforms. */
.buildora-contact-form [data-cf-depth] {
    translate: calc(var(--cf-mx, 0) * 1px) calc(var(--cf-my, 0) * 1px);
}

/* --------------------------------------------------------------------------
   3. Background photo (right side) — runs past the section edges so
   parallax and mouse drift never reveal a gap.
   -------------------------------------------------------------------------- */
.buildora-contact-form__background {
    position: absolute;
    top: -6%;
    bottom: -6%;
    left: 38%;
    right: -12px;
    z-index: 0;
    background-image: var(--cf-bg-image);
    background-size: cover;
    background-position: 60% center;
    will-change: transform;
}

/* --------------------------------------------------------------------------
   5. Diagonal shapes — orange chevron under a slightly smaller cream chevron;
   the visible orange band is simply the difference between the two.
   -------------------------------------------------------------------------- */
.buildora-contact-form__band {
    position: absolute;
    top: -3%;
    bottom: -3%;
    left: -12px;
    right: 0;
    z-index: 1;
    background-color: var(--cf-accent);
    clip-path: var(--cf-band-shape);
}

.buildora-contact-form__cream {
    position: absolute;
    inset: 0;
    z-index: 2;
    background-color: var(--cf-cream);
    clip-path: var(--cf-cream-shape);
}

/* 4. Blueprint — on the cream only (shares its clip) */
.buildora-contact-form__blueprint {
    position: absolute;
    inset: 0;
    z-index: 3;
    pointer-events: none;
    background-image: var(--cf-blueprint-image);
    background-size: 1400px auto;
    background-position: 30% 20%;
    background-repeat: no-repeat;
    opacity: var(--cf-bg-opacity);
    clip-path: var(--cf-cream-shape);
    will-change: transform;
}

/* --------------------------------------------------------------------------
   Layout
   -------------------------------------------------------------------------- */
.buildora-contact-form__container {
    position: relative;
    z-index: 4;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 520px);
    align-items: center;
    column-gap: clamp(48px, 6vw, 110px);
    width: 100%;
    max-width: var(--cf-max);
    margin-inline: auto;
    padding-inline: var(--cf-gutter);
}

/* 6. Contact content */
.buildora-contact-form__content {
    max-width: 700px;
}

/* 7. Eyebrow */
.buildora-contact-form__eyebrow {
    display: flex;
    align-items: center;
    gap: 20px;
    font-size: 12.5px;
    font-weight: 600;
    line-height: 1;
    letter-spacing: 0.26em;
    text-transform: uppercase;
    color: var(--cf-muted);
}

.buildora-contact-form__eyebrow-line {
    display: block;
    width: 60px;
    height: 2px;
    background-color: var(--cf-accent);
    transform-origin: left center;
}

/* 8. Heading */
.buildora-contact-form__heading {
    margin-top: clamp(20px, 2vw, 28px);
    font-family: var(--cf-font-display);
    font-size: clamp(42px, 4.8vw, 72px);
    font-weight: 600;
    line-height: 1.01;
    letter-spacing: -0.045em;
    color: var(--cf-dark);
}

.buildora-contact-form__heading-line {
    display: block;
}

.buildora-contact-form__heading-line--accent {
    color: var(--cf-accent);
}

/* 9. Description */
.buildora-contact-form__description {
    max-width: 560px;
    margin-top: clamp(18px, 1.8vw, 26px);
    font-size: clamp(16px, 1.2vw, 18px);
    line-height: 1.6;
    color: var(--cf-muted);
}

/* --------------------------------------------------------------------------
   10. Benefits
   -------------------------------------------------------------------------- */
.buildora-contact-form__benefits {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin-top: clamp(32px, 3.2vw, 46px);
}

.buildora-contact-form__benefit {
    padding: 4px clamp(16px, 2.2vw, 32px);
}

.buildora-contact-form__benefit:first-child {
    padding-left: 0;
}

.buildora-contact-form__benefit:last-child {
    padding-right: 0;
}

.buildora-contact-form__benefit + .buildora-contact-form__benefit {
    border-left: 1px solid var(--cf-divider);
}

/* 11. Benefit icons */
.buildora-contact-form__benefit-icon {
    display: block;
    width: clamp(38px, 3.2vw, 46px);
    height: clamp(38px, 3.2vw, 46px);
    color: var(--cf-accent);
}

.buildora-contact-form__benefit-icon svg {
    width: 100%;
    height: 100%;
    stroke-width: 1.4;
}

.buildora-contact-form__benefit-icon svg * {
    vector-effect: non-scaling-stroke;
}

.buildora-contact-form__benefit-title {
    margin-top: 16px;
    font-family: var(--cf-font-display);
    font-size: clamp(16px, 1.28vw, 18.5px);
    font-weight: 600;
    line-height: 1.25;
    color: var(--cf-dark);
}

.buildora-contact-form__benefit-text {
    margin-top: 9px;
    font-size: clamp(14px, 1.04vw, 15px);
    line-height: 1.5;
    color: var(--cf-muted);
}

/* --------------------------------------------------------------------------
   12. Architectural image (with offset frame) + 13. orange panel
   -------------------------------------------------------------------------- */
.buildora-contact-form__showcase {
    display: grid;
    grid-template-columns: minmax(0, 70fr) minmax(0, 30fr);
    width: min(100%, 640px);
    margin-top: clamp(40px, 4vw, 56px);
    margin-bottom: 18px;           /* room for the frame / panel overhang */
    margin-left: 18px;
}

.buildora-contact-form__image {
    position: relative;
    isolation: isolate;
}

/* Offset architectural frame, behind the photo */
.buildora-contact-form__image::before {
    content: "";
    position: absolute;
    top: 22%;
    left: -18px;
    bottom: -18px;
    z-index: -1;
    width: 68%;
    border: 2px solid var(--cf-accent);
    pointer-events: none;
}

.buildora-contact-form__image-frame {
    position: relative;
    overflow: hidden;
    aspect-ratio: 2.2 / 1;
    background-color: #D9D2C8;
}

/* 8px larger than the frame so mouse drift never shows an edge */
.buildora-contact-form__image-media {
    position: absolute;
    inset: -8px;
}

/* Taller than its frame for the scroll parallax */
.buildora-contact-form__image-media img {
    position: absolute;
    top: -6%;
    left: 0;
    height: 112%;
    object-position: 50% 60%;
    will-change: transform;
}

.buildora-contact-form__panel {
    position: relative;
    z-index: 1;
    margin: 0 0 -18px -14px;       /* overlaps the photo and drops below it */
    padding: clamp(24px, 2.2vw, 32px) clamp(20px, 2vw, 28px);
    background-color: var(--cf-accent);
    color: var(--cf-white);
    clip-path: polygon(0 0, 100% 0, 100% 80%, 84% 100%, 0 100%);
}

.buildora-contact-form__panel-line {
    display: block;
    width: 42px;
    height: 1.5px;
    background-color: rgba(255, 255, 255, 0.9);
    transform-origin: left center;
}

.buildora-contact-form__panel-list {
    margin-top: clamp(16px, 1.6vw, 22px);
    font-size: clamp(11.5px, 0.95vw, 13.5px);
    font-weight: 500;
    line-height: 1.95;
    letter-spacing: 0.2em;
    text-transform: uppercase;
}

/* --------------------------------------------------------------------------
   14. Form card
   -------------------------------------------------------------------------- */
.buildora-contact-form__card {
    padding: clamp(32px, 3.6vw, 52px);
    background-color: rgba(255, 255, 255, 0.96);
    border-radius: 2px;
    box-shadow: 0 40px 80px -44px rgba(16, 24, 32, 0.55);
}

/* 15. Form header */
.buildora-contact-form__card-eyebrow {
    font-size: 12px;
    font-weight: 600;
    line-height: 1;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--cf-placeholder);
}

.buildora-contact-form__card-title {
    margin-top: 14px;
    font-family: var(--cf-font-display);
    font-size: clamp(30px, 2.7vw, 40px);
    font-weight: 600;
    line-height: 1.08;
    letter-spacing: -0.035em;
    color: var(--cf-dark);
}

.buildora-contact-form__card-title-accent {
    color: var(--cf-accent);
}

.buildora-contact-form__form {
    margin-top: clamp(24px, 2.4vw, 32px);
}

/* --------------------------------------------------------------------------
   16. Form fields — floating labels: each label sits where a placeholder
   would and lifts when the field is focused or filled, so it stays visible.
   -------------------------------------------------------------------------- */
.buildora-contact-form__fields {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px 16px;
    align-items: start;
}

.buildora-contact-form__field {
    position: relative;
    min-width: 0;
}

.buildora-contact-form__field--full {
    grid-column: 1 / -1;
}

.buildora-contact-form__input {
    display: block;
    width: 100%;
    height: var(--cf-field-h);
    margin: 0;
    padding: 22px 16px 6px;
    background-color: var(--cf-white);
    border: 1px solid var(--cf-border);
    border-radius: 0;
    font-family: var(--cf-font-body);
    font-size: 15.5px;
    line-height: 1.3;
    color: var(--cf-text);
    -webkit-appearance: none;
    appearance: none;
    transition:
        border-color var(--cf-duration) var(--cf-ease),
        background-color var(--cf-duration) var(--cf-ease),
        box-shadow var(--cf-duration) var(--cf-ease);
}

.buildora-contact-form__input::placeholder {
    color: transparent;
}

.buildora-contact-form__textarea {
    height: 132px;
    min-height: 132px;
    max-height: 320px;
    padding-top: 28px;
    resize: vertical;
}

.buildora-contact-form__select {
    padding-right: 42px;
    cursor: pointer;
}

/* Prompt option still selected → placeholder colour */
.buildora-contact-form__select:has(option[value=""]:checked) {
    color: var(--cf-placeholder);
}

.buildora-contact-form__select option {
    color: var(--cf-text);
}

.buildora-contact-form__select-icon {
    position: absolute;
    top: calc(var(--cf-field-h) / 2 - 7px);
    right: 16px;
    color: var(--cf-muted);
    pointer-events: none;
}

.buildora-contact-form__label {
    position: absolute;
    top: 18px;
    left: 17px;
    right: 17px;
    font-size: 15px;
    line-height: 20px;
    color: var(--cf-placeholder);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transform-origin: left top;
    pointer-events: none;
    transition:
        transform var(--cf-duration) var(--cf-ease),
        color var(--cf-duration) var(--cf-ease);
}

/* Lifted: focused, filled, or always for the select (it shows its own prompt) */
.buildora-contact-form__input:focus + .buildora-contact-form__label,
.buildora-contact-form__input:not(:placeholder-shown) + .buildora-contact-form__label,
.buildora-contact-form__select + .buildora-contact-form__label {
    transform: translateY(-11px) scale(0.74);
}

.buildora-contact-form__input:focus {
    outline: none;
    border-color: var(--cf-accent);
    background-color: #FFFCFA;
}

.buildora-contact-form__input:focus-visible {
    box-shadow: 0 0 0 3px rgba(191, 85, 43, 0.14);
}

.buildora-contact-form__input:focus + .buildora-contact-form__label {
    color: var(--cf-accent);
}

/* --------------------------------------------------------------------------
   17. Validation states
   -------------------------------------------------------------------------- */
.buildora-contact-form__input[aria-invalid="true"] {
    border-color: var(--cf-accent-dark);
    box-shadow: inset 0 0 0 1px var(--cf-accent-dark);
}

.buildora-contact-form__input[aria-invalid="true"] + .buildora-contact-form__label {
    color: var(--cf-accent-dark);
}

.buildora-contact-form__error {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-top: 7px;
    font-size: 12.5px;
    font-weight: 600;
    line-height: 1.35;
    color: var(--cf-accent-dark);
}

.buildora-contact-form__error[hidden] {
    display: none;
}

.buildora-contact-form__error::before {
    content: "!";
    display: grid;
    place-items: center;
    width: 15px;
    height: 15px;
    flex-shrink: 0;
    border-radius: 50%;
    background-color: var(--cf-accent-dark);
    font-size: 10px;
    font-weight: 700;
    color: var(--cf-white);
}

.buildora-contact-form__status:empty {
    display: none;
}

.buildora-contact-form__status {
    margin-top: 18px;
    padding: 13px 16px;
    border-left: 2px solid var(--cf-accent);
    background-color: rgba(191, 85, 43, 0.07);
    font-size: 14.5px;
    font-weight: 500;
    line-height: 1.45;
    color: var(--cf-dark);
}

/* --------------------------------------------------------------------------
   18. Submit button
   -------------------------------------------------------------------------- */
.buildora-contact-form__submit {
    display: flex;
    align-items: center;
    gap: 22px;
    width: 100%;
    height: 60px;
    margin-top: 22px;
    padding: 0 clamp(26px, 3vw, 46px);
    background-color: var(--cf-accent);
    border: 0;
    border-radius: 2px;
    font-family: var(--cf-font-body);
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--cf-white);
    cursor: pointer;
    transition: background-color var(--cf-duration) var(--cf-ease);
}

.buildora-contact-form__submit-arrow {
    transition: transform var(--cf-duration) var(--cf-ease);
}

/* --------------------------------------------------------------------------
   19. Hover states
   -------------------------------------------------------------------------- */
.buildora-contact-form__submit:hover {
    background-color: var(--cf-accent-dark);
}

.buildora-contact-form__submit:hover .buildora-contact-form__submit-arrow {
    transform: translateX(6px);
}

.buildora-contact-form__submit:focus-visible {
    outline: 2px solid var(--cf-accent);
    outline-offset: 4px;
}

@media (hover: hover) {
    .buildora-contact-form__input:not(:focus):hover {
        border-color: rgba(16, 24, 32, 0.26);
    }
}

/* --------------------------------------------------------------------------
   20. Desktop (1440px+) is the base above.
   21. Laptop — 1200px to 1439px
   -------------------------------------------------------------------------- */
@media (max-width: 1365px) {
    .buildora-contact-form__container {
        grid-template-columns: minmax(0, 1fr) minmax(0, 480px);
        column-gap: clamp(40px, 5vw, 72px);
    }

    .buildora-contact-form__card {
        padding: 40px 36px;
    }
}

/* --------------------------------------------------------------------------
   22. Tablet landscape — 1024px to 1199px (≈55 / 45)
   -------------------------------------------------------------------------- */
@media (max-width: 1199px) {
    .buildora-contact-form {
        --cf-cream-shape: polygon(0 0, 50% 0, 61% 50%, 48.5% 100%, 0 100%);
        --cf-band-shape: polygon(0 0, 57% 0, 68% 50%, 56% 100%, 0 100%);
        --cf-field-h: 54px;
    }

    .buildora-contact-form__background {
        left: 44%;
    }

    .buildora-contact-form__container {
        grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
        column-gap: 40px;
    }

    .buildora-contact-form__heading {
        font-size: clamp(40px, 4.5vw, 50px);
    }

    .buildora-contact-form__description {
        font-size: 16px;
    }

    .buildora-contact-form__benefit {
        padding-inline: 16px;
    }

    .buildora-contact-form__benefit-title {
        font-size: 16px;
    }

    .buildora-contact-form__benefit-text {
        font-size: 14px;
    }

    .buildora-contact-form__showcase {
        width: calc(100% - 18px);
    }

    .buildora-contact-form__card {
        padding: 34px 28px;
    }

    .buildora-contact-form__fields {
        gap: 16px 12px;
    }

    .buildora-contact-form__input {
        padding-inline: 14px;
        font-size: 15px;
    }

    .buildora-contact-form__select {
        padding-right: 38px;
    }

    .buildora-contact-form__select-icon {
        right: 14px;
    }

    .buildora-contact-form__label {
        left: 15px;
        font-size: 14.5px;
    }
}

/* --------------------------------------------------------------------------
   Tablet portrait — 768px to 1023px: content, then the form on its own
   photographic backdrop (angled top edge + orange strip)
   -------------------------------------------------------------------------- */
@media (max-width: 1023px) {
    .buildora-contact-form {
        display: block;
        min-height: 0;
        padding-bottom: 0;
    }

    .buildora-contact-form__background,
    .buildora-contact-form__band,
    .buildora-contact-form__cream {
        display: none;
    }

    .buildora-contact-form__blueprint {
        bottom: 45%;
        clip-path: none;
        -webkit-mask-image: linear-gradient(180deg, #000 40%, transparent 100%);
        mask-image: linear-gradient(180deg, #000 40%, transparent 100%);
    }

    .buildora-contact-form__container {
        grid-template-columns: minmax(0, 1fr);
    }

    .buildora-contact-form__content {
        max-width: 720px;
    }

    .buildora-contact-form__heading {
        font-size: clamp(44px, 6.8vw, 60px);
    }

    .buildora-contact-form__showcase {
        width: min(calc(100% - 18px), 640px);
    }

    .buildora-contact-form__form-wrap {
        position: relative;
        isolation: isolate;
        margin: clamp(56px, 7vw, 80px) calc(var(--cf-gutter) * -1) 0;
        padding: clamp(96px, 14vw, 132px) var(--cf-gutter) clamp(64px, 8vw, 88px);
    }

    .buildora-contact-form__form-wrap::before,
    .buildora-contact-form__form-wrap::after {
        content: "";
        position: absolute;
        inset: 0;
        pointer-events: none;
    }

    .buildora-contact-form__form-wrap::before {
        z-index: -2;
        background-image: linear-gradient(180deg, rgba(16, 24, 32, 0.1), rgba(16, 24, 32, 0.35)), var(--cf-bg-image);
        background-size: cover;
        background-position: 60% 40%;
        clip-path: polygon(0 9%, 100% 0, 100% 100%, 0 100%);
    }

    .buildora-contact-form__form-wrap::after {
        z-index: -1;
        background-color: var(--cf-accent);
        clip-path: polygon(0 9%, 100% 0, 100% 2.6%, 0 11.6%);
    }

    .buildora-contact-form__card {
        max-width: 680px;
        margin-inline: auto;
        padding: 44px 40px;
    }
}

/* --------------------------------------------------------------------------
   23. Mobile — up to 767px
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
    .buildora-contact-form {
        --cf-space: 72px;
        --cf-bg-opacity: 0.04;
    }

    .buildora-contact-form__eyebrow {
        gap: 16px;
        font-size: 11.5px;
    }

    .buildora-contact-form__eyebrow-line {
        width: 48px;
    }

    .buildora-contact-form__heading {
        font-size: clamp(38px, 10vw, 52px);
        line-height: 1.03;
    }

    .buildora-contact-form__description {
        font-size: 16px;
    }

    /* Benefits stack: icon beside title + text, horizontal separators */
    .buildora-contact-form__benefits {
        grid-template-columns: minmax(0, 1fr);
        margin-top: 32px;
    }

    .buildora-contact-form__benefit,
    .buildora-contact-form__benefit:first-child,
    .buildora-contact-form__benefit:last-child {
        display: grid;
        grid-template-columns: 42px minmax(0, 1fr);
        column-gap: 18px;
        padding: 20px 0;
        border-left: 0;
    }

    .buildora-contact-form__benefit + .buildora-contact-form__benefit {
        border-left: 0;
        border-top: 1px solid var(--cf-divider);
    }

    .buildora-contact-form__benefit-icon {
        grid-row: span 2;
        width: 38px;
        height: 38px;
    }

    .buildora-contact-form__benefit-title {
        margin-top: 2px;
        font-size: 17px;
    }

    .buildora-contact-form__benefit-text {
        font-size: 14.5px;
    }

    /* Image full width, panel steps out below it */
    .buildora-contact-form__showcase {
        grid-template-columns: minmax(0, 1fr);
        width: auto;
        margin: 36px 0 0 10px;
    }

    .buildora-contact-form__image::before {
        left: -10px;
        bottom: -10px;
        width: 60%;
    }

    .buildora-contact-form__image-frame {
        aspect-ratio: auto;
        height: clamp(260px, 70vw, 340px);
    }

    .buildora-contact-form__panel {
        width: 86%;
        margin: -34px 0 0 auto;
        padding: 28px 26px 30px;
        clip-path: polygon(0 0, 100% 0, 100% 76%, 90% 100%, 0 100%);
    }

    /* Two per row reads as "Spaces · That Inspire / Better · Living" */
    .buildora-contact-form__panel-list {
        display: grid;
        grid-template-columns: repeat(2, max-content);
        column-gap: 16px;
        font-size: 12.5px;
    }

    .buildora-contact-form__form-wrap {
        margin-top: 48px;
        padding: 88px var(--cf-gutter) 56px;
    }

    .buildora-contact-form__card {
        padding: 34px 24px;
    }

    .buildora-contact-form__fields {
        grid-template-columns: minmax(0, 1fr);
        gap: 14px;
    }
}

/* Small mobile — up to 480px */
@media (max-width: 480px) {
    .buildora-contact-form__card {
        padding: 30px 18px;
    }

    .buildora-contact-form__card-title {
        font-size: 29px;
    }

    .buildora-contact-form__submit {
        padding-inline: 22px;
        letter-spacing: 0.14em;
    }

    .buildora-contact-form__panel-list {
        column-gap: 12px;
        font-size: 11.5px;
        letter-spacing: 0.16em;
    }
}

/* --------------------------------------------------------------------------
   Pre-reveal guard
   Hides the content until contact-form.js has applied its start states (it
   adds .is-ready). The delayed animation is a fallback so content always
   shows, even if a script fails to load.
   -------------------------------------------------------------------------- */
@keyframes buildora-contact-form-fallback {
    to { visibility: visible; }
}

@media (prefers-reduced-motion: no-preference) {
    .has-js .buildora-contact-form:not(.is-ready) .buildora-contact-form__container {
        visibility: hidden;
        animation: buildora-contact-form-fallback 0s 3s forwards;
    }
}

/* --------------------------------------------------------------------------
   24. Reduced motion
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    .buildora-contact-form *,
    .buildora-contact-form *::before,
    .buildora-contact-form *::after {
        transition-duration: 0.01ms !important;
    }

    .buildora-contact-form [data-cf-depth] {
        translate: none;
    }

    .buildora-contact-form__submit:hover .buildora-contact-form__submit-arrow {
        transform: none;
    }

    .buildora-contact-form__background,
    .buildora-contact-form__blueprint,
    .buildora-contact-form__image-media img {
        will-change: auto;
    }
}

/* ==========================================================================
   BUILDORA CONSTRUCTIONS — Call to Action
   Component: .buildora-cta
   Breakpoints:
     Desktop            1440px+
     Laptop             1200px – 1439px
     Tablet landscape   1024px – 1199px
     Tablet portrait     768px – 1023px   (image scene moves below content)
     Mobile             481px – 767px
     Small mobile       up to 480px
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Variables — each falls back to a global theme token when one is defined
   -------------------------------------------------------------------------- */
.buildora-cta {
    --cta-dark: var(--color-dark, #101820);
    --cta-text: var(--color-text, #26313A);
    --cta-muted: var(--color-muted, #5E6870);
    --cta-accent: var(--color-accent, #BF552B);
    --cta-accent-dark: var(--color-accent-dark, #A2461F);
    --cta-white: var(--color-white, #FFFFFF);
    --cta-cream: var(--color-off-white, #F5F3EF);
    --cta-divider: rgba(191, 85, 43, 0.35);

    --cta-font-display: var(--font-display, "Inter Tight", "Helvetica Neue", Arial, sans-serif);
    --cta-font-body: var(--font-body, "Manrope", "Helvetica Neue", Arial, sans-serif);

    /* Architectural line art — swap for any texture (lower the opacity for photos) */
    --cta-bg-image: url("../images/about-blueprint.svg");
    --cta-bg-opacity: 0.05;

    --cta-max: 1440px;
    --cta-gutter: clamp(20px, 4.4vw, 64px);
    --cta-space: clamp(88px, 8vw, 120px);
    --cta-scene-w: 45%;
    --cta-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
    --cta-duration: 0.3s;

    /* 2. Section */
    position: relative;
    isolation: isolate;
    overflow: hidden;              /* clips the deliberate edge-bleed of the scene */
    display: flex;
    align-items: center;
    min-height: clamp(640px, 50vw, 740px);
    padding-block: var(--cta-space);
    background-color: var(--cta-cream);
    font-family: var(--cta-font-body);
    color: var(--cta-text);
}

.buildora-cta *,
.buildora-cta *::before,
.buildora-cta *::after {
    box-sizing: border-box;
}

/* :where() keeps the reset at zero specificity so component margins win */
:where(.buildora-cta) :where(figure, p, h2, ul) {
    margin: 0;
}

:where(.buildora-cta) ul {
    padding: 0;
    list-style: none;
}

.buildora-cta img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.buildora-cta svg {
    display: block;
    flex-shrink: 0;
}

/* Only the mouse offset (CSS `translate`) is driven per-element by JS, so it
   composes with the GSAP reveal/parallax transforms. */
.buildora-cta [data-cta-depth] {
    translate: calc(var(--cta-mx, 0) * 1px) calc(var(--cta-my, 0) * 1px);
}

/* --------------------------------------------------------------------------
   3. Blueprint (cream area only, very low contrast)
   -------------------------------------------------------------------------- */
.buildora-cta__blueprint {
    position: absolute;
    top: -8%;
    bottom: -8%;
    left: 0;
    width: 64%;
    z-index: -1;
    pointer-events: none;
    background-image: var(--cta-bg-image);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    opacity: var(--cta-bg-opacity);
    -webkit-mask-image: linear-gradient(90deg, #000 50%, transparent 100%);
    mask-image: linear-gradient(90deg, #000 50%, transparent 100%);
    will-change: transform;
}

/* --------------------------------------------------------------------------
   4. Main layout
   Content sits in the container; the image scene is a full-height layer on
   the right whose diagonal edge leaves room for the text column.
   -------------------------------------------------------------------------- */
.buildora-cta__container {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: var(--cta-max);
    margin-inline: auto;
    padding-inline: var(--cta-gutter);
}

/* 5. Content */
.buildora-cta__content {
    width: 56%;
    max-width: 760px;
}

/* 6. Eyebrow */
.buildora-cta__eyebrow {
    display: flex;
    align-items: center;
    gap: 22px;
    font-size: 12.5px;
    font-weight: 600;
    line-height: 1;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--cta-accent);
}

.buildora-cta__eyebrow-line {
    display: block;
    width: 58px;
    height: 1px;
    background-color: var(--cta-accent);
    transform-origin: left center;
}

/* 7. Heading */
.buildora-cta__title {
    margin-top: clamp(24px, 2.4vw, 34px);
    font-family: var(--cta-font-display);
    font-size: clamp(46px, 5vw, 78px);
    font-weight: 600;
    line-height: 1.02;
    letter-spacing: -0.035em;
    color: var(--cta-dark);
}

.buildora-cta__title-line {
    display: block;
}

.buildora-cta__title-line--accent {
    color: var(--cta-accent);
}

/* 8. Description */
.buildora-cta__description {
    max-width: 650px;
    margin-top: clamp(20px, 2vw, 28px);
    font-size: clamp(16px, 1.32vw, 19px);
    line-height: 1.62;
    color: var(--cta-muted);
}

/* --------------------------------------------------------------------------
   9. CTA buttons
   -------------------------------------------------------------------------- */
.buildora-cta__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 22px clamp(32px, 3.6vw, 56px);
    margin-top: clamp(30px, 3vw, 42px);
}

.buildora-cta__button {
    display: inline-flex;
    align-items: center;
    gap: 16px;
    min-height: 68px;
    padding: 0 36px;
    background-color: var(--cta-accent);
    border-radius: 2px;
    font-family: var(--cta-font-body);
    font-size: 16px;
    font-weight: 600;
    letter-spacing: 0.005em;
    color: var(--cta-white);
    text-decoration: none;
    transition: background-color var(--cta-duration) var(--cta-ease);
}

.buildora-cta__button-arrow {
    transition: transform var(--cta-duration) var(--cta-ease);
}

/* 10. Video CTA */
.buildora-cta__video {
    display: inline-flex;
    align-items: center;
    gap: 20px;
    padding: 0;
    background: none;
    border: 0;
    font: inherit;
    color: var(--cta-dark);
    text-align: left;
    cursor: pointer;
}

.buildora-cta__video-circle {
    display: grid;
    place-items: center;
    width: 64px;
    height: 64px;
    flex-shrink: 0;
    border: 2px solid var(--cta-accent);
    border-radius: 50%;
    color: var(--cta-accent);
    transition:
        transform var(--cta-duration) var(--cta-ease),
        background-color var(--cta-duration) var(--cta-ease),
        color var(--cta-duration) var(--cta-ease);
}

.buildora-cta__video-icon {
    margin-left: 4px;
}

.buildora-cta__video-text {
    display: flex;
    flex-direction: column;
    gap: 9px;
}

.buildora-cta__video-title {
    font-family: var(--cta-font-display);
    font-size: clamp(17px, 1.3vw, 19px);
    font-weight: 600;
    line-height: 1.1;
    transition: color var(--cta-duration) var(--cta-ease);
}

.buildora-cta__video-meta {
    font-size: 11.5px;
    font-weight: 600;
    line-height: 1;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--cta-muted);
}

/* --------------------------------------------------------------------------
   11. Benefits
   -------------------------------------------------------------------------- */
.buildora-cta__benefits {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    row-gap: 20px;
    margin-top: clamp(40px, 4.2vw, 64px);
}

.buildora-cta__benefit {
    display: flex;
    align-items: center;
    gap: clamp(16px, 1.5vw, 22px);
    padding-right: clamp(22px, 2.6vw, 40px);
}

.buildora-cta__benefit + .buildora-cta__benefit {
    padding-left: clamp(22px, 2.6vw, 40px);
    border-left: 1px solid var(--cta-divider);
}

.buildora-cta__benefit:last-child {
    padding-right: 0;
}

.buildora-cta__benefit-icon {
    width: clamp(38px, 3.2vw, 46px);
    height: clamp(38px, 3.2vw, 46px);
    color: var(--cta-accent);
}

.buildora-cta__benefit-icon svg {
    width: 100%;
    height: 100%;
    stroke-width: 1.4;
}

.buildora-cta__benefit-icon svg * {
    vector-effect: non-scaling-stroke;
}

.buildora-cta__benefit-text {
    padding-block: 4px;
    font-size: clamp(14.5px, 1.18vw, 17px);
    font-weight: 500;
    line-height: 1.38;
    color: var(--cta-dark);
}

/* --------------------------------------------------------------------------
   12. Architectural visual (scene = image + orange statement)
   -------------------------------------------------------------------------- */
.buildora-cta__scene {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
    width: var(--cta-scene-w);
    overflow: hidden;
}

.buildora-cta__visual {
    position: absolute;
    inset: 0;
}

/* 14. Diagonal transition — the cream cuts in from the bottom-left, and a
   translucent cream plane just inside the edge layers the cut. */
.buildora-cta__frame {
    position: absolute;
    inset: 0;
    overflow: hidden;
    background-color: #1B232A;
    clip-path: polygon(0 0, 100% 0, 100% 100%, 31% 100%);
}

.buildora-cta__frame::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background-color: rgba(245, 243, 239, 0.26);
    clip-path: polygon(0 0, 7% 0, 38% 100%, 31% 100%);
    pointer-events: none;
}

/* 13. Image — 12px larger than the frame on every side so mouse drift never
   shows an edge, and taller than the frame for the scroll parallax. */
.buildora-cta__media {
    position: absolute;
    inset: -12px;
}

.buildora-cta__media img {
    position: absolute;
    top: -7%;
    left: 0;
    height: 114%;
    object-position: 50% 92%;
    filter: sepia(0.2) saturate(1.12) brightness(0.97);   /* warms the photo into the Buildora palette */
    will-change: transform;
}

/* --------------------------------------------------------------------------
   15. Orange statement — an angled plane over the image's right side.
   It runs past the scene's top/bottom/right edges so parallax and mouse
   drift never reveal a gap; the scene clips the excess.
   -------------------------------------------------------------------------- */
.buildora-cta__statement {
    position: absolute;
    top: -4%;
    bottom: -4%;
    right: -12px;
    z-index: 2;
    width: calc(46% + 12px);
    background-color: var(--cta-accent);
    color: var(--cta-white);
    clip-path: polygon(0 39%, 100% 15%, 100% 100%, 70% 100%);
}

/* Barely-there line pattern, inverted to read as white on orange */
.buildora-cta__statement::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: var(--cta-bg-image);
    background-size: 900px auto;
    background-position: 20% 40%;
    filter: invert(1);
    mix-blend-mode: screen;
    opacity: 0.1;
    pointer-events: none;
}

.buildora-cta__statement-inner {
    position: absolute;
    top: 37%;
    left: 38%;
    right: 16px;
}

.buildora-cta__statement-line {
    display: block;
    width: 48px;
    height: 1.5px;
    margin-bottom: clamp(22px, 2.2vw, 30px);
    background-color: rgba(255, 255, 255, 0.9);
    transform-origin: left center;
}

.buildora-cta__statement-list {
    font-size: clamp(13px, 1.1vw, 16px);
    font-weight: 500;
    line-height: 1.95;
    letter-spacing: 0.26em;
    text-transform: uppercase;
}

/* Small orange wedge in the top-right corner */
.buildora-cta__corner {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 2;
    width: 10%;
    height: 14%;
    background-color: var(--cta-accent);
    clip-path: polygon(0 0, 100% 0, 100% 100%);
    pointer-events: none;
}

/* --------------------------------------------------------------------------
   16. Hover + focus states
   -------------------------------------------------------------------------- */
.buildora-cta__button:hover {
    background-color: var(--cta-accent-dark);
}

.buildora-cta__button:hover .buildora-cta__button-arrow {
    transform: translateX(6px);
}

.buildora-cta__video:hover .buildora-cta__video-circle {
    background-color: var(--cta-accent);
    color: var(--cta-white);
    transform: scale(1.05);
}

.buildora-cta__video:hover .buildora-cta__video-title {
    color: var(--cta-accent);
}

.buildora-cta__button:focus-visible,
.buildora-cta__video:focus-visible {
    outline: 2px solid var(--cta-accent);
    outline-offset: 5px;
}

.buildora-cta__video:focus-visible {
    border-radius: 36px;
}

/* --------------------------------------------------------------------------
   17. Responsive
   -------------------------------------------------------------------------- */

/* Laptop — 1200px to 1439px */
@media (max-width: 1365px) {
    .buildora-cta__content {
        width: 57%;
    }
}

/* Tablet landscape — 1024px to 1199px */
@media (max-width: 1199px) {
    .buildora-cta {
        --cta-scene-w: 42%;
    }

    .buildora-cta__content {
        width: 60%;
    }

    .buildora-cta__title {
        font-size: clamp(44px, 4.8vw, 54px);
    }

    .buildora-cta__description {
        font-size: 16px;
    }

    .buildora-cta__actions {
        gap: 20px 32px;
    }

    .buildora-cta__button {
        min-height: 60px;
        padding: 0 28px;
        font-size: 15px;
    }

    .buildora-cta__video {
        gap: 16px;
    }

    .buildora-cta__video-circle {
        width: 56px;
        height: 56px;
    }

    .buildora-cta__benefit {
        gap: 14px;
        padding-right: 22px;
    }

    .buildora-cta__benefit + .buildora-cta__benefit {
        padding-left: 22px;
    }

    .buildora-cta__benefit-icon {
        width: 36px;
        height: 36px;
    }

    .buildora-cta__benefit-text {
        font-size: 14.5px;
    }

    .buildora-cta__statement {
        width: calc(44% + 12px);
    }

    .buildora-cta__statement-inner {
        left: 34%;
    }

    .buildora-cta__statement-list {
        font-size: 12.5px;
        letter-spacing: 0.22em;
    }
}

/* Tablet portrait — 768px to 1023px: content, then the image scene */
@media (max-width: 1023px) {
    .buildora-cta {
        display: block;
        min-height: 0;
        padding-bottom: 0;
    }

    .buildora-cta__blueprint {
        width: 100%;
        bottom: 40%;
    }

    .buildora-cta__content {
        width: 100%;
        max-width: 720px;
    }

    .buildora-cta__title {
        font-size: clamp(46px, 7vw, 62px);
    }

    .buildora-cta__description {
        font-size: 17px;
    }

    .buildora-cta__scene {
        position: relative;
        top: auto;
        right: auto;
        bottom: auto;
        width: 100%;
        height: clamp(440px, 62vw, 560px);
        margin-top: clamp(56px, 7vw, 80px);
    }

    .buildora-cta__frame {
        clip-path: polygon(0 14%, 100% 0, 100% 100%, 0 100%);
    }

    .buildora-cta__frame::after {
        clip-path: polygon(0 14%, 100% 0, 100% 5%, 0 20%);
    }

    .buildora-cta__statement {
        width: calc(44% + 12px);
        clip-path: polygon(0 42%, 100% 18%, 100% 100%, 64% 100%);
    }

    .buildora-cta__statement-inner {
        top: 40%;
        left: 34%;
    }

    .buildora-cta__corner {
        display: none;
    }
}

/* Mobile — up to 767px: image, then the orange panel lifted onto its edge */
@media (max-width: 767px) {
    .buildora-cta {
        --cta-space: 72px;
        --cta-bg-opacity: 0.04;
        padding-bottom: 56px;
    }

    .buildora-cta__eyebrow {
        gap: 16px;
        font-size: 11.5px;
    }

    .buildora-cta__eyebrow-line {
        width: 44px;
    }

    .buildora-cta__title {
        font-size: clamp(38px, 10vw, 52px);
        line-height: 1.04;
    }

    .buildora-cta__description {
        font-size: 16px;
    }

    .buildora-cta__actions {
        flex-direction: column;
        align-items: flex-start;
        gap: 24px;
    }

    .buildora-cta__button {
        width: min(100%, 420px);
        min-height: 62px;
        justify-content: space-between;
    }

    /* Single column with horizontal separators */
    .buildora-cta__benefits {
        flex-direction: column;
        align-items: stretch;
        row-gap: 0;
        margin-top: 40px;
    }

    .buildora-cta__benefit,
    .buildora-cta__benefit + .buildora-cta__benefit {
        padding: 16px 0;
        border-left: 0;
    }

    .buildora-cta__benefit + .buildora-cta__benefit {
        border-top: 1px solid var(--cta-divider);
    }

    .buildora-cta__benefit-text br {
        display: none;
    }

    .buildora-cta__scene {
        height: auto;
        margin-top: 48px;
        overflow: visible;
    }

    .buildora-cta__visual {
        position: relative;
        inset: auto;
        height: clamp(360px, 100vw, 450px);
        overflow: hidden;
    }

    .buildora-cta__frame {
        clip-path: polygon(0 8%, 100% 0, 100% 100%, 0 100%);
    }

    .buildora-cta__frame::after {
        clip-path: polygon(0 8%, 100% 0, 100% 3.5%, 0 11.5%);
    }

    .buildora-cta__statement {
        position: relative;
        top: auto;
        bottom: auto;
        right: auto;
        width: min(92%, 460px);
        margin: -30px auto 0;
        padding: 52px 30px 40px;
        clip-path: polygon(0 12%, 100% 0, 100% 100%, 0 100%);
    }

    .buildora-cta__statement-inner {
        position: static;
    }

    /* Two words per row reads as the three phrases */
    .buildora-cta__statement-list {
        display: grid;
        grid-template-columns: repeat(2, max-content);
        column-gap: 14px;
        font-size: 13px;
        letter-spacing: 0.22em;
    }
}

/* Small mobile — up to 480px */
@media (max-width: 480px) {
    .buildora-cta__button {
        width: 100%;
        padding: 0 24px;
    }

    .buildora-cta__video {
        gap: 16px;
    }

    .buildora-cta__video-circle {
        width: 56px;
        height: 56px;
    }

    .buildora-cta__statement {
        padding: 46px 24px 34px;
    }

    .buildora-cta__statement-list {
        column-gap: 10px;
        font-size: 12px;
        letter-spacing: 0.18em;
    }
}

/* --------------------------------------------------------------------------
   Pre-reveal guard
   Hides the content until cta.js has applied its start states (it adds
   .is-ready). The delayed animation is a fallback so content always shows,
   even if a script fails to load.
   -------------------------------------------------------------------------- */
@keyframes buildora-cta-fallback {
    to { visibility: visible; }
}

@media (prefers-reduced-motion: no-preference) {
    .has-js .buildora-cta:not(.is-ready) :is(.buildora-cta__content, .buildora-cta__scene) {
        visibility: hidden;
        animation: buildora-cta-fallback 0s 3s forwards;
    }
}

/* --------------------------------------------------------------------------
   18. Reduced motion
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    .buildora-cta *,
    .buildora-cta *::before,
    .buildora-cta *::after {
        transition-duration: 0.01ms !important;
    }

    .buildora-cta [data-cta-depth] {
        translate: none;
    }

    .buildora-cta__video:hover .buildora-cta__video-circle {
        transform: none;
    }

    .buildora-cta__blueprint,
    .buildora-cta__media img {
        will-change: auto;
    }
}

/* ==========================================================================
   BUILDORA CONSTRUCTIONS — Footer
   Component: .buildora-footer
   Layout:    dark content column | architectural image with diagonal edge
   Breakpoints:
     Desktop            1440px+
     Laptop             1200px – 1439px
     iPad landscape     1024px – 1199px
     iPad portrait       768px – 1023px   (2-column content, image below)
     Mobile              481px – 767px    (single column)
     Small mobile       up to 480px
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Variables — each falls back to a global theme token when defined
   -------------------------------------------------------------------------- */
.buildora-footer {
    --bf-dark: var(--color-dark, #101820);
    --bf-dark-alt: #17242C;
    --bf-text: #E8ECEE;
    --bf-muted: #AEB8BE;
    --bf-accent: var(--color-accent, #BF552B);
    --bf-accent-light: #E3875A;           /* orange tuned for small text on charcoal */
    --bf-white: var(--color-white, #FFFFFF);
    --bf-border: rgba(255, 255, 255, 0.14);
    --bf-border-soft: rgba(255, 255, 255, 0.10);

    --bf-font: var(--font-body, "Manrope", "Helvetica Neue", Arial, sans-serif);
    --bf-font-display: var(--font-display, "Inter Tight", "Helvetica Neue", Arial, sans-serif);

    /* Line drawing (dark strokes, inverted to light below) — swap freely */
    --bf-blueprint: url("../images/why-blueprint.svg");
    --bf-blueprint-opacity: 0.06;

    /* Image column + its diagonal */
    --bf-image-w: clamp(320px, 30vw, 620px);
    --bf-image-clip: polygon(0% 0%, 100% 0%, 100% 100%, 50% 100%);

    --bf-pad-left: clamp(24px, 5.3vw, 104px);
    --bf-pad-block: clamp(80px, 8vw, 116px);
    --bf-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
    --bf-duration: 0.28s;

/* --------------------------------------------------------------------------
   2. Footer base
   -------------------------------------------------------------------------- */
    position: relative;
    isolation: isolate;
    overflow: hidden;
    display: grid;
    grid-template-columns: minmax(0, 1fr) var(--bf-image-w);
    grid-template-rows: auto auto;
    font-family: var(--bf-font);
    color: var(--bf-text);
    background-color: var(--bf-dark);
}

.buildora-footer *,
.buildora-footer *::before,
.buildora-footer *::after {
    box-sizing: border-box;
}

/* Zero-specificity reset so component rules always win */
:where(.buildora-footer) :where(h2, p, ul, figure, address) {
    margin: 0;
    font-style: normal;
}

:where(.buildora-footer) ul {
    padding: 0;
    list-style: none;
}

.buildora-footer svg {
    display: block;
    flex-shrink: 0;
}

.buildora-footer a {
    color: inherit;
    text-decoration: none;
}

/* --------------------------------------------------------------------------
   3. Background — faint warm glow toward the image side
   -------------------------------------------------------------------------- */
.buildora-footer::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background:
        radial-gradient(60% 80% at 70% 0%, rgba(23, 36, 44, 0.9), transparent 70%),
        linear-gradient(180deg, var(--bf-dark) 0%, #121C24 100%);
}

/* --------------------------------------------------------------------------
   4. Blueprint — inverted to light strokes, bottom-left
   -------------------------------------------------------------------------- */
.buildora-footer__blueprint {
    position: absolute;
    left: -2%;
    bottom: 0;
    z-index: 0;
    width: min(900px, 62%);
    aspect-ratio: 1400 / 520;
    pointer-events: none;
    background-image: var(--bf-blueprint);
    background-repeat: no-repeat;
    background-position: left bottom;
    background-size: contain;
    filter: invert(1);
    opacity: var(--bf-blueprint-opacity);
}

/* --------------------------------------------------------------------------
   5. Main content grid
   -------------------------------------------------------------------------- */
.buildora-footer__main {
    position: relative;
    z-index: 2;
    grid-column: 1;
    grid-row: 1;
    width: 100%;
    max-width: 1480px;            /* keeps columns composed on very wide screens */
    display: grid;
    grid-template-columns:
        minmax(0, 1.3fr)
        minmax(0, 1.05fr)
        minmax(0, 0.8fr)
        minmax(0, 1.2fr);
    padding: var(--bf-pad-block) clamp(24px, 3vw, 48px) clamp(64px, 6vw, 96px) var(--bf-pad-left);
}

.buildora-footer__column {
    min-width: 0;
    padding-left: clamp(24px, 2.8vw, 48px);
    border-left: 1px solid var(--bf-border);
}

.buildora-footer__column--services {
    border-left: 0;
    padding-left: clamp(24px, 3.6vw, 64px);
}

/* --------------------------------------------------------------------------
   6. Brand
   -------------------------------------------------------------------------- */
.buildora-footer__brand {
    min-width: 0;
    padding-right: clamp(16px, 2vw, 32px);
}

.buildora-footer__description {
    max-width: 330px;
    margin-top: clamp(28px, 2.6vw, 40px);
    font-size: clamp(15.5px, 1.1vw, 17px);
    line-height: 1.7;
    color: var(--bf-muted);
}

.buildora-footer__divider {
    display: block;
    width: 64px;
    height: 2px;
    margin-top: 28px;
    background-color: var(--bf-accent);
    transform-origin: left center;
}

/* --------------------------------------------------------------------------
   7. Logo — inline SVG mark + wordmark (no logo asset in /images yet)
   -------------------------------------------------------------------------- */
.buildora-footer__logo {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    color: var(--bf-white);
    border-radius: 2px;
}

.buildora-footer__logo-mark {
    width: 46px;
    height: 50px;
}

.buildora-footer__logo-text {
    display: flex;
    flex-direction: column;
    gap: 7px;
    line-height: 1;
}

.buildora-footer__logo-name {
    font-family: var(--bf-font-display);
    font-size: clamp(24px, 1.9vw, 28px);
    font-weight: 800;
    letter-spacing: 0.085em;
    text-transform: uppercase;
}

.buildora-footer__logo-tagline {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.46em;
    text-transform: uppercase;
    color: var(--bf-muted);
}

/* --------------------------------------------------------------------------
   8. Social icons
   -------------------------------------------------------------------------- */
.buildora-footer__social {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 28px;
}

.buildora-footer__social-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    color: var(--bf-text);
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 50%;
    transition:
        color var(--bf-duration) var(--bf-ease),
        border-color var(--bf-duration) var(--bf-ease),
        transform var(--bf-duration) var(--bf-ease);
}

.buildora-footer__social-link svg {
    width: 18px;
    height: 18px;
}

/* --------------------------------------------------------------------------
   9. Navigation columns
   -------------------------------------------------------------------------- */
.buildora-footer__heading {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--bf-accent-light);
}

.buildora-footer__heading::before {
    content: "";
    flex: 0 0 20px;
    height: 1.5px;
    background-color: var(--bf-accent);
}

.buildora-footer__list {
    margin-top: clamp(22px, 2vw, 30px);
}

.buildora-footer__link {
    display: inline-block;
    padding-block: 7px;
    font-size: clamp(15px, 1.1vw, 16.5px);
    font-weight: 500;
    line-height: 1.5;
    color: var(--bf-text);
    transition: color var(--bf-duration) var(--bf-ease);
}

/* --------------------------------------------------------------------------
   10. Contact
   -------------------------------------------------------------------------- */
.buildora-footer__contact {
    display: grid;
    gap: clamp(24px, 2.4vw, 34px);
    margin-top: clamp(26px, 2.4vw, 34px);
}

.buildora-footer__contact-item {
    display: grid;
    grid-template-columns: 30px minmax(0, 1fr);
    gap: 16px;
    align-items: start;
}

.buildora-footer__contact-icon {
    width: 26px;
    height: 26px;
    margin-top: 1px;
    color: var(--bf-accent-light);
}

.buildora-footer__contact-icon svg {
    width: 100%;
    height: 100%;
}

.buildora-footer__contact-primary {
    display: block;
    font-size: clamp(15px, 1.1vw, 16.5px);
    font-weight: 600;
    line-height: 1.5;
    color: var(--bf-text);
    overflow-wrap: anywhere;
}

a.buildora-footer__contact-primary {
    transition: color var(--bf-duration) var(--bf-ease);
}

.buildora-footer__contact-secondary {
    display: block;
    margin-top: 4px;
    font-size: 13.5px;
    line-height: 1.55;
    letter-spacing: 0.01em;
    color: var(--bf-muted);
}

/* --------------------------------------------------------------------------
   11. Architectural image
       .media owns the diagonal clip (and its GSAP reveal),
       .frame owns pointer drift, img owns scale + parallax.
   -------------------------------------------------------------------------- */
.buildora-footer__media {
    position: relative;
    z-index: 1;
    grid-column: 2;
    grid-row: 1 / 3;
    overflow: hidden;
    background-color: var(--bf-dark-alt);
/* --------------------------------------------------------------------------
   12. Diagonal geometry
   -------------------------------------------------------------------------- */
    clip-path: var(--bf-image-clip);
}

.buildora-footer__media-frame {
    position: absolute;
    inset: -2%;
}

.buildora-footer__media img {
    position: absolute;
    top: -6%;
    left: 0;
    display: block;
    width: 100%;
    height: 112%;
    object-fit: cover;
    object-position: 55% 50%;
    filter: saturate(1.05) contrast(1.04);
}

/* Soft shade along the diagonal so the photo settles into the charcoal */
.buildora-footer__media::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        linear-gradient(100deg, rgba(16, 24, 32, 0.55) 0%, rgba(16, 24, 32, 0) 38%),
        linear-gradient(0deg, rgba(16, 24, 32, 0.35) 0%, rgba(16, 24, 32, 0) 30%);
}

/* --------------------------------------------------------------------------
   13. Bottom bar — spans under the image's retreating diagonal
   -------------------------------------------------------------------------- */
.buildora-footer__bottom {
    position: relative;
    z-index: 2;
    grid-column: 1 / -1;
    grid-row: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px 32px;
    /* Right padding clears the diagonal at the bar's height, not just its base */
    padding: clamp(28px, 2.8vw, 40px) calc(var(--bf-image-w) * 0.62 + 24px) clamp(36px, 3.4vw, 52px) var(--bf-pad-left);
}

/* Divider line stops before the image */
.buildora-footer__bottom::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: calc(var(--bf-image-w) * 0.62);
    height: 1px;
    background-color: var(--bf-border);
}

.buildora-footer__copyright {
    font-size: 13px;
    line-height: 1.6;
    color: var(--bf-muted);
}

.buildora-footer__tagline {
    display: flex;
    align-items: center;
    gap: 22px;
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--bf-muted);
}

.buildora-footer__tagline::before {
    content: "";
    flex: 0 0 56px;
    height: 1.5px;
    background-color: var(--bf-accent);
}

/* --------------------------------------------------------------------------
   14. Hover + focus states
   -------------------------------------------------------------------------- */
@media (hover: hover) {
    .buildora-footer__link:hover,
    a.buildora-footer__contact-primary:hover {
        color: var(--bf-accent-light);
    }

    .buildora-footer__social-link:hover {
        color: var(--bf-accent-light);
        border-color: var(--bf-accent);
        transform: translateY(-3px);
    }
}

.buildora-footer a:focus-visible {
    outline: 2px solid var(--bf-accent-light);
    outline-offset: 4px;
}

.buildora-footer__social-link:focus-visible {
    outline-offset: 3px;
}

/* ==========================================================================
   15. Responsive
   ========================================================================== */

/* Laptop — 1200px to 1439px */
@media (max-width: 1439px) {
    .buildora-footer {
        --bf-image-w: clamp(260px, 21vw, 300px);
    }

    /* Link columns size to their content; the brand takes what remains */
    .buildora-footer__main {
        grid-template-columns: minmax(214px, 1fr) max-content max-content minmax(0, max-content);
        padding-right: 20px;
    }

    .buildora-footer__column { padding-inline: 26px 0; }
    .buildora-footer__column--services { padding-left: 24px; padding-right: 26px; }
    .buildora-footer__column--links { padding-right: 26px; }

    .buildora-footer__heading { letter-spacing: 0.17em; gap: 10px; }
    .buildora-footer__heading::before { flex-basis: 16px; }
    .buildora-footer__link,
    .buildora-footer__contact-primary { font-size: 15px; }
    .buildora-footer__brand { padding-right: 12px; }
    .buildora-footer__social { gap: 8px; }
    .buildora-footer__social-link { width: 44px; height: 44px; }

    .buildora-footer__logo-mark { width: 40px; height: 44px; }
}

/* iPad landscape — 1024px to 1199px: four columns kept, image narrows */
@media (max-width: 1199px) {
    .buildora-footer {
        --bf-image-w: clamp(170px, 17vw, 200px);
        --bf-image-clip: polygon(0% 0%, 100% 0%, 100% 100%, 60% 100%);
        --bf-pad-left: 32px;
    }

    .buildora-footer__main {
        grid-template-columns:
            minmax(0, 1.1fr)
            minmax(0, 1fr)
            minmax(0, 0.72fr)
            minmax(0, 1.08fr);
        padding-right: 20px;
    }

    .buildora-footer__column { padding-left: 20px; }
    .buildora-footer__column--services { padding-left: 24px; }

    .buildora-footer__logo { gap: 11px; }
    .buildora-footer__logo-mark { width: 36px; height: 40px; }
    .buildora-footer__logo-name { font-size: 21px; }
    .buildora-footer__logo-tagline { font-size: 8.5px; letter-spacing: 0.4em; }

    .buildora-footer__description { font-size: 15px; }
    .buildora-footer__social { gap: 10px; }
    .buildora-footer__social-link { width: 44px; height: 44px; }

    .buildora-footer__heading { font-size: 11.5px; letter-spacing: 0.16em; }
    .buildora-footer__heading::before { flex-basis: 14px; }
    .buildora-footer__link { font-size: 14.5px; }

    .buildora-footer__contact-item { grid-template-columns: 24px minmax(0, 1fr); gap: 12px; }
    .buildora-footer__contact-icon { width: 22px; height: 22px; }
    .buildora-footer__contact-primary { font-size: 14.5px; }
    .buildora-footer__contact-secondary { font-size: 12.5px; }
}

/* iPad portrait — 768px to 1023px: 2 × 2 content, image becomes a band below */
@media (max-width: 1023px) {
    .buildora-footer {
        --bf-image-clip: polygon(0% 16%, 100% 0%, 100% 100%, 0% 100%);
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: auto auto auto;
    }

    .buildora-footer__main {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        row-gap: 56px;
        padding: clamp(72px, 9vw, 88px) var(--bf-pad-left) 64px;
    }

    .buildora-footer__column,
    .buildora-footer__column--services {
        padding-left: 0;
        border-left: 0;
    }

    .buildora-footer__column--services { padding-left: 24px; }
    .buildora-footer__column--contact  { padding-left: 24px; }

    .buildora-footer__description { font-size: 16px; }
    .buildora-footer__link { font-size: 15.5px; }
    .buildora-footer__contact-primary { font-size: 15.5px; }
    .buildora-footer__contact-secondary { font-size: 13.5px; }

    .buildora-footer__media {
        grid-column: 1;
        grid-row: 2;
        height: clamp(300px, 44vw, 380px);
    }

    .buildora-footer__media::after {
        background: linear-gradient(0deg, rgba(16, 24, 32, 0.3) 0%, rgba(16, 24, 32, 0) 40%);
    }

    .buildora-footer__bottom {
        grid-row: 3;
        padding: 28px var(--bf-pad-left) 36px;
    }

    .buildora-footer__bottom::before { display: none; }

    .buildora-footer__blueprint {
        bottom: auto;
        top: 38%;
        width: 90%;
    }
}

/* Mobile — 481px to 767px: single column */
@media (max-width: 767px) {
    .buildora-footer {
        --bf-pad-left: 20px;
        --bf-image-clip: polygon(0% 12%, 100% 0%, 100% 100%, 0% 100%);
    }

    .buildora-footer__main {
        grid-template-columns: minmax(0, 1fr);
        row-gap: 0;
        padding-top: 64px;
        padding-bottom: 48px;
    }

    .buildora-footer__column,
    .buildora-footer__column--services,
    .buildora-footer__column--contact {
        padding: 32px 0 0;
        margin-top: 32px;
        border-top: 1px solid var(--bf-border-soft);
    }

    .buildora-footer__brand { padding-right: 0; }
    .buildora-footer__description { max-width: 420px; }

    /* Comfortable tap targets */
    .buildora-footer__list { margin-top: 14px; }
    .buildora-footer__link { padding-block: 10px; }

    .buildora-footer__contact { margin-top: 22px; }

    .buildora-footer__media { height: clamp(280px, 70vw, 360px); }

    .buildora-footer__bottom {
        flex-direction: column;
        align-items: flex-start;
        gap: 14px;
    }
}

/* Small mobile — up to 480px */
@media (max-width: 480px) {
    .buildora-footer {
        --bf-pad-left: 16px;
    }

    .buildora-footer__logo-mark { width: 34px; height: 38px; }
    .buildora-footer__logo-name { font-size: 20px; }
    .buildora-footer__logo-tagline { font-size: 8px; letter-spacing: 0.38em; }

    .buildora-footer__description { font-size: 15.5px; }

    .buildora-footer__social { gap: 10px; }

    .buildora-footer__tagline { gap: 14px; font-size: 10.5px; letter-spacing: 0.16em; }
    .buildora-footer__tagline::before { flex-basis: 32px; }

    .buildora-footer__media { height: 280px; }
}

/* ==========================================================================
   16. Reduced motion
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
    .buildora-footer *,
    .buildora-footer *::before,
    .buildora-footer *::after {
        transition-duration: 0.01ms !important;
    }

    .buildora-footer__social-link:hover {
        transform: none;
    }
}