/* ============================================================================
   THA — design system
   Layered after mobius.css (a light reset + utility framework). Everything
   here is namespaced .bf-* so the two never collide.
   ========================================================================== */

/* ---------------------------------------------------------------- tokens -- */
:root {
    /* Height of the fixed bottom bar. Anything anchored to the foot of the
       viewport has to clear it — see .bf-screen__inner and [body]. */
    --bar-h: 58px;

    /* Surface */
    --ink: #0E100F;
    --ink-2: #141715;
    --graphite: #232824;
    --graphite-2: #2E342F;
    --paper: #F2EFE8;
    --paper-2: #E6E1D6;
    --stone: #A9A296;

    /* Accent */
    --verdigris: #6C8A76;
    --verdigris-d: #4E6A59;
    --clay: #B26845;

    /* Type on dark / light */
    --on-dark: rgba(242, 239, 232, .94);
    --on-dark-mid: rgba(242, 239, 232, .62);
    --on-dark-dim: rgba(242, 239, 232, .38);
    --on-light: rgba(14, 16, 15, .92);
    --on-light-mid: rgba(14, 16, 15, .62);
    --on-light-dim: rgba(14, 16, 15, .38);

    --line: rgba(242, 239, 232, .16);
    --line-strong: rgba(242, 239, 232, .28);
    --line-light: rgba(14, 16, 15, .14);

    /* Type */
    --display: "Cormorant Garamond", "Iowan Old Style", Georgia, ui-serif, serif;
    --sans: "Instrument Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

    --fs-hero: clamp(2.7rem, 7.4vw, 7.2rem);
    --fs-h1: clamp(2.1rem, 5vw, 4.4rem);
    --fs-h2: clamp(1.6rem, 3.2vw, 2.9rem);
    --fs-h3: clamp(1.2rem, 1.9vw, 1.7rem);
    --fs-lead: clamp(1.05rem, 1.5vw, 1.42rem);
    --fs-body: clamp(.98rem, 1.02vw, 1.09rem);
    --fs-small: .875rem;
    --fs-label: .7rem;

    /* Space */
    --gutter: clamp(20px, 5vw, 76px);
    --maxw: 1560px;
    --sec: clamp(72px, 11vw, 170px);
    --radius: 2px;

    /* Motion */
    --ease: cubic-bezier(.22, .61, .36, 1);
    --ease-out: cubic-bezier(.16, 1, .3, 1);
    --slow: 900ms;
    --med: 520ms;
}

/* ------------------------------------------------------------------ base -- */
*,
*::before,
*::after { box-sizing: border-box; }

html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
    /* mobius.css defaults html/body to #fff and text-align:center — reset both
       so the framework's centring default does not leak into the layout. */
    background: var(--ink);
}

body {
    margin: 0;
    background: var(--ink);
    color: var(--on-dark);
    font-family: var(--sans);
    font-size: var(--fs-body);
    font-weight: 300;
    line-height: 1.65;
    letter-spacing: .005em;
    text-align: left;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
}

img { display: block; max-width: 100%; height: auto; border: 0; }

/* Reset rules Mobius CSS used to provide. Kept explicit so dropping that
   stylesheet does not change how links, images or the html box behave. */
a {
    color: inherit;
    text-decoration: none;
    line-height: inherit;
    position: static;
}

h1, h2, h3, h4, p, figure, blockquote { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
input, textarea, select { font: inherit; color: inherit; }

::selection { background: var(--verdigris); color: #fff; }

/* Keyboard focus — visible, on-brand, never on mouse clicks. */
:focus-visible {
    outline: 1px solid var(--verdigris);
    outline-offset: 3px;
}

.bf-sec--paper :focus-visible { outline-color: var(--verdigris-d); }

/* Keep anchored sections clear of the fixed header. */
[id] { scroll-margin-top: 110px; }

/* Skip link */
.bf-skip {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 200;
    background: var(--paper);
    color: var(--ink);
    padding: 12px 20px;
    font-size: var(--fs-label);
    letter-spacing: .2em;
    text-transform: uppercase;
}

.bf-skip:focus { left: 12px; top: 12px; }

/* Scrollbar */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--ink); }
::-webkit-scrollbar-thumb { background: var(--graphite-2); }
::-webkit-scrollbar-thumb:hover { background: var(--verdigris-d); }

/* --------------------------------------------------------------- layout -- */
.bf-wrap {
    width: 100%;
    max-width: var(--maxw);
    margin-inline: auto;
    padding-inline: var(--gutter);
}

.bf-sec { padding-block: var(--sec); }
.bf-sec--tight { padding-block: clamp(48px, 7vw, 104px); }

.bf-sec--paper {
    background: var(--paper);
    color: var(--on-light);
}

.bf-sec--graphite { background: var(--ink-2); }

.bf-rule {
    height: 1px;
    background: var(--line);
    border: 0;
    margin: 0;
}

.bf-sec--paper .bf-rule { background: var(--line-light); }

/* ------------------------------------------------------------ typography -- */
.bf-label {
    font-family: var(--mono);
    font-size: var(--fs-label);
    font-weight: 400;
    letter-spacing: .13em;
    text-transform: uppercase;
    line-height: 1.45;
}

.bf-label--dim { color: var(--on-dark-dim); }
.bf-sec--paper .bf-label { color: var(--on-light-mid); }

.bf-display {
    font-family: var(--display);
    font-weight: 300;
    font-size: var(--fs-hero);
    line-height: .98;
    letter-spacing: -.015em;
    text-wrap: balance;
}

.bf-h1 {
    font-family: var(--display);
    font-weight: 300;
    font-size: var(--fs-h1);
    line-height: 1.03;
    letter-spacing: -.012em;
    text-wrap: balance;
}

.bf-h2 {
    font-family: var(--display);
    font-weight: 300;
    font-size: var(--fs-h2);
    line-height: 1.08;
    letter-spacing: -.01em;
    text-wrap: balance;
}

.bf-h3 {
    font-family: var(--display);
    font-weight: 400;
    font-size: var(--fs-h3);
    line-height: 1.18;
}

.bf-lead {
    font-size: var(--fs-lead);
    font-weight: 300;
    line-height: 1.5;
    color: var(--on-dark-mid);
    max-width: 46ch;
}

.bf-sec--paper .bf-lead { color: var(--on-light-mid); }

.bf-prose { max-width: 62ch; }
.bf-prose p { margin-bottom: 1.35em; color: var(--on-dark-mid); }
.bf-prose p:last-child { margin-bottom: 0; }
.bf-prose p:first-child { color: var(--on-dark); }
.bf-sec--paper .bf-prose p { color: var(--on-light-mid); }
.bf-sec--paper .bf-prose p:first-child { color: var(--on-light); }

.bf-italic {
    font-family: var(--display);
    font-style: italic;
    font-weight: 300;
}

/* --------------------------------------------------------------- buttons -- */
.bf-btn {
    display: inline-flex;
    align-items: center;
    gap: .7em;
    padding: 1.05em 1.9em;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius);
    font-size: var(--fs-label);
    font-weight: 500;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--on-dark);
    background: transparent;
    transition: background var(--med) var(--ease), color var(--med) var(--ease),
                border-color var(--med) var(--ease);
}

.bf-btn:hover {
    background: var(--paper);
    border-color: var(--paper);
    color: var(--ink);
}

.bf-btn--solid {
    background: var(--paper);
    border-color: var(--paper);
    color: var(--ink);
}

.bf-btn--solid:hover {
    background: var(--verdigris);
    border-color: var(--verdigris);
    color: #fff;
}

.bf-sec--paper .bf-btn { border-color: var(--line-light); color: var(--on-light); }
.bf-sec--paper .bf-btn:hover { background: var(--ink); border-color: var(--ink); color: var(--paper); }

.bf-btn__arrow { transition: transform var(--med) var(--ease); }
.bf-btn:hover .bf-btn__arrow { transform: translateX(4px); }

/* Text link with an animated rule */
.bf-link {
    position: relative;
    display: inline-block;
    padding-bottom: 2px;
    font-size: var(--fs-label);
    font-weight: 500;
    letter-spacing: .2em;
    text-transform: uppercase;
}

.bf-link::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 1px;
    background: currentColor;
    transform: scaleX(0);
    transform-origin: right;
    transition: transform var(--med) var(--ease);
}

.bf-link:hover::after { transform: scaleX(1); transform-origin: left; }

/* ---------------------------------------------------------------- header -- */
.bf-header {
    position: fixed;
    inset: 0 0 auto 0;
    z-index: 60;
    padding-block: clamp(14px, 1.7vw, 24px);
    transition: background var(--med) var(--ease), backdrop-filter var(--med) var(--ease),
                border-color var(--med) var(--ease), padding var(--med) var(--ease);
    border-bottom: 1px solid transparent;
}

.bf-header.is-solid {
    background: rgba(14, 16, 15, .82);
    -webkit-backdrop-filter: blur(14px) saturate(1.2);
    backdrop-filter: blur(14px) saturate(1.2);
    border-bottom-color: var(--line);
    padding-block: 12px;
}

.bf-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
}

.bf-brand {
    display: inline-flex;
    align-items: baseline;
    gap: .55em;
    font-family: var(--display);
    font-size: clamp(1.05rem, 1.5vw, 1.32rem);
    font-weight: 400;
    letter-spacing: .02em;
    white-space: nowrap;
}

.bf-brand__mark { color: var(--verdigris); }

/* The header lockup is the THA wordmark. */
.bf-brand__logo {
    display: block;
    /* THA is a wide wordmark (620x196), so size it by height */
    height: clamp(20px, 2.1vw, 27px);
    width: auto;
    /* the mark ships black on transparent; the site is near-black */
    transition: opacity var(--med) var(--ease);
}

.bf-brand:hover .bf-brand__logo { opacity: .72; }

/* ------------------------------------------------------------ motion toggle */
.bf-motion {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 0;
    background: none;
    border: 0;
    cursor: pointer;
    color: var(--on-dark-mid);
    transition: color var(--med) var(--ease);
}

.bf-motion:hover { color: var(--on-dark); }

.bf-motion__dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--verdigris);
    transition: background var(--med) var(--ease), transform var(--med) var(--ease);
}

.bf-motion[aria-pressed="false"] .bf-motion__dot {
    background: transparent;
    border: 1px solid var(--on-dark-mid);
    transform: scale(.8);
}

/* --------------------------------------------------------------- screens --
   The home page is a stack of full-viewport panels — one per statement — each
   with its own still behind it. This mirrors the reference site's model: plain
   blocks in normal flow, every one exactly one viewport tall, with a rising
   z-index so a later panel paints OVER the one it scrolls across rather than
   the two overlapping. No scroll hijacking, no scroll-snap.

   100svh rather than 100vh: on mobile browsers vh is measured against the
   largest possible chrome, so a 100vh panel is taller than the space the user
   can actually see. */
.bf-screens {
    position: relative;
    z-index: 3;
}

.bf-screen {
    position: relative;
    height: 100svh;
    min-height: 540px;
    display: flex;
    align-items: flex-end;
    overflow: hidden;
    isolation: isolate;
}

/* The stack's z-index ladder. Eight entries covers the opening panel plus the
   six statements; anything beyond that simply paints in document order. */
.bf-screen:nth-child(1) { z-index: 1; }
.bf-screen:nth-child(2) { z-index: 2; }
.bf-screen:nth-child(3) { z-index: 3; }
.bf-screen:nth-child(4) { z-index: 4; }
.bf-screen:nth-child(5) { z-index: 5; }
.bf-screen:nth-child(6) { z-index: 6; }
.bf-screen:nth-child(7) { z-index: 7; }
.bf-screen:nth-child(8) { z-index: 8; }

.bf-screen__media {
    position: absolute;
    inset: 0;
    z-index: 1;
    background-size: cover;
    background-position: center;
    /* THA's photography is lighter than the reference site's, so the stills are
       knocked back a little to keep the overlaid type legible. */
    filter: brightness(.82) saturate(.94);
}

/* Legibility scrim, heavier at the foot where the statements sit. */
.bf-screen::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background:
        linear-gradient(180deg, rgba(14, 16, 15, .62) 0%, rgba(14, 16, 15, .12) 32%,
                        rgba(14, 16, 15, .55) 70%, rgba(14, 16, 15, .93) 100%);
}

.bf-screen__inner {
    position: relative;
    z-index: 2;
    width: 100%;
    /* Clears the fixed bar, which floats over the foot of every panel. */
    padding-bottom: calc(var(--bar-h) + clamp(34px, 5vw, 76px));
    padding-top: 140px;
}

.bf-screen__eyebrow { color: var(--on-dark-mid); margin-bottom: clamp(20px, 2.5vw, 34px); }

.bf-screen__title { max-width: 22ch; }

.bf-screen__sub {
    margin-top: clamp(22px, 2.6vw, 34px);
    max-width: 46ch;
    color: var(--on-dark-mid);
}

.bf-screen__actions {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
    margin-top: clamp(26px, 3vw, 40px);
}

.bf-screen__quote {
    font-family: var(--display);
    font-size: clamp(1.7rem, 3.9vw, 3.4rem);
    font-weight: 300;
    line-height: 1.2;
    letter-spacing: -0.01em;
    color: var(--on-dark);
    max-width: 26ch;
    margin: 0;
}

.bf-screen__foot {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 12px 28px;
    margin-top: clamp(24px, 3vw, 38px);
}

.bf-screen__foot cite:empty { display: none; }

.bf-screen__link {
    font-size: var(--fs-label);
    font-weight: 500;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--verdigris);
    border-bottom: 1px solid currentColor;
    padding-bottom: 3px;
    transition: opacity var(--med) var(--ease);
}

.bf-screen__link:hover { opacity: .65; }

.bf-screen__cue { position: relative; z-index: 2; margin-left: 24px; }

.bf-scrollcue {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    color: var(--on-dark-dim);
}

.bf-scrollcue__line {
    width: 54px;
    height: 1px;
    background: var(--on-dark-dim);
    position: relative;
    overflow: hidden;
}

.bf-scrollcue__line::after {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--on-dark);
    transform: translateX(-100%);
    animation: bf-sweep 2.6s var(--ease) infinite;
}

@keyframes bf-sweep {
    0% { transform: translateX(-100%); }
    55% { transform: translateX(0); }
    100% { transform: translateX(100%); }
}

/* ---------------------------------------------------------------- section -- */
.bf-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: clamp(24px, 4vw, 80px);
    align-items: end;
    margin-bottom: clamp(38px, 5vw, 72px);
}

.bf-head--stack { grid-template-columns: minmax(0, 1fr); }
.bf-head__aside { justify-self: end; text-align: right; }

.bf-eyebrow-row {
    display: flex;
    align-items: baseline;
    gap: 16px;
    margin-bottom: 20px;
}

.bf-eyebrow-row__num { color: var(--verdigris); }

/* ------------------------------------------------------------- work grid -- */
.bf-grid {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: clamp(24px, 3.4vw, 64px) clamp(20px, 2.6vw, 48px);
}

.bf-card { display: block; grid-column: span 12; }

.bf-card--wide { grid-column: span 8; }
.bf-card--narrow { grid-column: span 4; }
.bf-card--half { grid-column: span 6; }
.bf-card--full { grid-column: span 12; }
.bf-card--offset { margin-top: clamp(0px, 6vw, 96px); }

.bf-card__media {
    position: relative;
    overflow: hidden;
    background: var(--graphite);
    aspect-ratio: 4 / 3;
}

.bf-card__media--tall { aspect-ratio: 3 / 4; }
.bf-card__media--wide { aspect-ratio: 16 / 9; }
.bf-card__media--square { aspect-ratio: 1 / 1; }

.bf-card__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: saturate(.9) contrast(1.04) brightness(.96);
    transition: transform 1.1s var(--ease-out), filter var(--slow) var(--ease);
}

.bf-card:hover .bf-card__img {
    transform: scale(1.045);
    filter: saturate(1) contrast(1.02) brightness(1);
}

.bf-card__index {
    position: absolute;
    top: 14px;
    left: 16px;
    color: rgba(255, 255, 255, .72);
    mix-blend-mode: difference;
}

.bf-card__body {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 18px;
    padding-top: 18px;
    border-top: 1px solid var(--line);
    margin-top: 18px;
}

.bf-card__title {
    font-family: var(--display);
    font-size: clamp(1.15rem, 1.75vw, 1.7rem);
    font-weight: 400;
    line-height: 1.15;
    transition: color var(--med) var(--ease);
}

.bf-card:hover .bf-card__title { color: var(--verdigris); }

.bf-card__meta {
    font-size: var(--fs-label);
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--on-dark-dim);
    text-align: right;
    white-space: nowrap;
}

/* --------------------------------------------------------------- filters -- */
.bf-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: clamp(30px, 3.4vw, 52px);
}

/* The index has two facet rows. The typology row carries the weight; the region
   row sits directly beneath it, smaller and quieter, so the eye reads typology
   first and region as the refinement. */
.bf-filters[data-facet="type"] {
    margin-bottom: 10px;
}

.bf-filters--sub {
    margin-bottom: clamp(30px, 3.4vw, 52px);
    opacity: .72;
}

.bf-filters--sub .bf-chip {
    padding: .55em 1em;
    font-size: calc(var(--fs-label) * .92);
}

.bf-chip {
    padding: .72em 1.25em;
    border: 1px solid var(--line);
    border-radius: 100px;
    font-size: var(--fs-label);
    font-weight: 500;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--on-dark-mid);
    transition: all var(--med) var(--ease);
}

.bf-chip:hover { border-color: var(--line-strong); color: var(--on-dark); }

.bf-chip.is-on {
    background: var(--paper);
    border-color: var(--paper);
    color: var(--ink);
}

.bf-chip__count { opacity: .5; margin-left: .5em; }

/* ------------------------------------------------------------ page intro -- */
.bf-pagehead {
    padding-top: clamp(132px, 16vw, 220px);
    padding-bottom: clamp(40px, 5vw, 84px);
}

.bf-pagehead__inner {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
    gap: clamp(28px, 5vw, 88px);
    align-items: end;
    padding-bottom: clamp(26px, 3.2vw, 46px);
    border-bottom: 1px solid var(--line);
}

.bf-pagehead__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 34px;
    justify-content: flex-end;
}

/* ------------------------------------------------------------ split block -- */
.bf-split {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: clamp(28px, 6vw, 110px);
    align-items: start;
}

.bf-split--media { align-items: center; }
.bf-split__media { overflow: hidden; }
.bf-split__media img { width: 100%; filter: saturate(.9) contrast(1.04); }

/* ---------------------------------------------------------------- stats -- */
.bf-stats {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: clamp(20px, 3vw, 48px);
}

.bf-stat { border-top: 1px solid var(--line-light); padding-top: 22px; }
.bf-stat__value {
    font-family: var(--display);
    font-size: clamp(2.2rem, 4.4vw, 4.2rem);
    font-weight: 300;
    line-height: 1;
    letter-spacing: -.02em;
}
.bf-stat__label { margin-top: 12px; font-size: var(--fs-label); letter-spacing: .18em; text-transform: uppercase; color: var(--on-light-mid); }

/* ------------------------------------------------------------ principles -- */
.bf-principles { border-top: 1px solid var(--line); }

.bf-principle {
    display: grid;
    grid-template-columns: 90px minmax(0, 1fr) minmax(0, 1.15fr);
    gap: clamp(18px, 3vw, 56px);
    padding-block: clamp(28px, 3.6vw, 54px);
    border-bottom: 1px solid var(--line);
    align-items: start;
    transition: background var(--med) var(--ease);
}

.bf-principle:hover { background: rgba(242, 239, 232, .025); }
.bf-principle__n { color: var(--verdigris); font-size: var(--fs-label); letter-spacing: .2em; padding-top: .5em; }
.bf-principle__body { color: var(--on-dark-mid); }

/* ------------------------------------------------------------ services -- */
.bf-services {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: clamp(20px, 2.6vw, 44px);
}

.bf-service { border-top: 1px solid var(--line); padding-top: 22px; }
.bf-service__n { color: var(--verdigris); }
.bf-service__title {
    font-family: var(--display);
    font-size: clamp(1.2rem, 1.75vw, 1.62rem);
    font-weight: 400;
    line-height: 1.15;
    margin-top: 16px;
}
.bf-service__body { color: var(--on-dark-mid); margin-top: 12px; }
.bf-service__list { margin-top: 16px; }
.bf-service__list li {
    color: var(--on-dark-dim);
    font-size: var(--fs-small);
    padding-block: 4px;
    border-top: 1px solid var(--line);
}

/* ------------------------------------------------------------------ team -- */
.bf-team {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: clamp(18px, 2.4vw, 40px);
}

.bf-person { border-top: 1px solid var(--line); padding-top: 20px; }

.bf-person__mono {
    aspect-ratio: 1 / 1;
    display: grid;
    place-items: center;
    background: linear-gradient(150deg, var(--graphite) 0%, var(--ink-2) 100%);
    border: 1px solid var(--line);
    font-family: var(--display);
    font-size: clamp(1.6rem, 3vw, 2.6rem);
    font-weight: 300;
    color: var(--verdigris);
    letter-spacing: .04em;
    margin-bottom: 18px;
    transition: border-color var(--med) var(--ease), color var(--med) var(--ease);
}

.bf-person:hover .bf-person__mono { border-color: var(--verdigris); color: var(--paper); }

.bf-person__name { font-size: 1rem; font-weight: 400; }
.bf-person__role { font-size: var(--fs-label); letter-spacing: .16em; text-transform: uppercase; color: var(--on-dark-dim); margin-top: 6px; }

/* ---------------------------------------------------------------- awards -- */
.bf-award {
    display: grid;
    grid-template-columns: 100px minmax(0, 1.2fr) minmax(0, 1fr);
    gap: clamp(16px, 3vw, 48px);
    padding-block: clamp(16px, 1.8vw, 24px);
    border-bottom: 1px solid var(--line-light);
    align-items: baseline;
}

.bf-award__year { font-size: var(--fs-label); letter-spacing: .18em; color: var(--on-light-dim); }
.bf-award__title { font-size: 1.02rem; }
.bf-award__body { color: var(--on-light-mid); font-size: var(--fs-small); }

/* --------------------------------------------------------------- journal -- */
.bf-post {
    display: grid;
    grid-template-columns: 210px minmax(0, 1fr) 130px;
    gap: clamp(18px, 3vw, 52px);
    padding-block: clamp(24px, 3vw, 40px);
    border-bottom: 1px solid var(--line);
    align-items: center;
    transition: background var(--med) var(--ease);
}

.bf-post:hover { background: rgba(242, 239, 232, .03); }

.bf-post__media { overflow: hidden; aspect-ratio: 16 / 10; background: var(--graphite); }
.bf-post__media img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.85) contrast(1.04);
    transition: transform 1.1s var(--ease-out); }
.bf-post:hover .bf-post__media img { transform: scale(1.05); }

.bf-post__title { font-family: var(--display); font-size: clamp(1.3rem, 2.3vw, 2.1rem); font-weight: 400; line-height: 1.12; }
.bf-post__excerpt { color: var(--on-dark-mid); margin-top: 12px; max-width: 68ch; }
.bf-post__meta { text-align: right; font-size: var(--fs-label); letter-spacing: .16em; text-transform: uppercase; color: var(--on-dark-dim); }
.bf-post__meta span { display: block; margin-bottom: 8px; }

/* ------------------------------------------------------- project detail -- */
.bf-project-hero {
    position: relative;
    min-height: 78svh;
    display: flex;
    align-items: flex-end;
    overflow: hidden;
    isolation: isolate;
}

.bf-project-hero__img {
    position: absolute;
    inset: 0;
    z-index: -2;
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: saturate(.9) contrast(1.05);
    transform: scale(1.12);
    will-change: transform;
}

.bf-project-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(180deg, rgba(14, 16, 15, .74) 0%, rgba(14, 16, 15, .1) 40%,
                rgba(14, 16, 15, .88) 100%);
}

.bf-project-hero__inner { width: 100%; padding-bottom: clamp(40px, 5vw, 78px); padding-top: 150px; }

.bf-spec {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: clamp(18px, 2.6vw, 44px);
    padding-block: clamp(30px, 3.6vw, 56px);
    border-bottom: 1px solid var(--line);
}

.bf-spec__k { font-size: var(--fs-label); letter-spacing: .18em; text-transform: uppercase; color: var(--on-dark-dim); margin-bottom: 10px; }
.bf-spec__v { font-size: 1rem; }

.bf-facts { border-top: 1px solid var(--line); }
.bf-fact {
    display: grid;
    grid-template-columns: minmax(0, .8fr) minmax(0, 1.4fr);
    gap: 18px;
    padding-block: 18px;
    border-bottom: 1px solid var(--line);
    align-items: baseline;
}
.bf-fact__k { font-size: var(--fs-label); letter-spacing: .16em; text-transform: uppercase; color: var(--on-dark-dim); }
.bf-fact__v { color: var(--on-dark); }

.bf-gallery { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: clamp(18px, 2.4vw, 40px); }
.bf-gallery figure { grid-column: span 12; overflow: hidden; }
.bf-gallery figure.span-6 { grid-column: span 6; }
.bf-gallery figure.span-7 { grid-column: span 7; }
.bf-gallery figure.span-5 { grid-column: span 5; }
.bf-gallery img { width: 100%; filter: saturate(.9) contrast(1.04); }
.bf-gallery figcaption { margin-top: 12px; font-size: var(--fs-label); letter-spacing: .14em; text-transform: uppercase; color: var(--on-dark-dim); }

/* Next project */
.bf-next {
    position: relative;
    display: block;
    overflow: hidden;
    isolation: isolate;
    padding-block: clamp(64px, 9vw, 140px);
    text-align: center;
}

.bf-next__bg {
    position: absolute;
    inset: 0;
    z-index: -2;
    background-size: cover;
    background-position: center;
    filter: grayscale(.3) brightness(.42) saturate(.8);
    transform: scale(1.02);
    transition: transform 1.4s var(--ease-out), filter var(--slow) var(--ease);
}

.bf-next:hover .bf-next__bg { transform: scale(1.07); filter: grayscale(0) brightness(.52) saturate(.95); }

.bf-next__title { transition: color var(--med) var(--ease); }
.bf-next:hover .bf-next__title { color: var(--verdigris); }

/* ---------------------------------------------------------------- contact -- */
.bf-field { margin-bottom: 26px; }

.bf-field__label {
    display: block;
    font-size: var(--fs-label);
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--on-dark-dim);
    margin-bottom: 10px;
}

.bf-input,
.bf-textarea,
.bf-select {
    width: 100%;
    padding: 14px 2px;
    background: transparent;
    border: 0;
    border-bottom: 1px solid var(--line-strong);
    border-radius: 0;
    outline: none;
    transition: border-color var(--med) var(--ease);
}

.bf-input:focus,
.bf-textarea:focus,
.bf-select:focus { border-bottom-color: var(--verdigris); }

.bf-textarea { min-height: 130px; resize: vertical; }

.bf-select { appearance: none; cursor: pointer; }
.bf-select option { background: var(--ink-2); color: var(--on-dark); }

.bf-notice {
    border: 1px solid var(--verdigris);
    padding: 18px 22px;
    color: var(--on-dark);
    margin-bottom: 26px;
    display: flex;
    gap: 14px;
    align-items: baseline;
}

.bf-studio-card { border-top: 1px solid var(--line); padding-top: 20px; margin-bottom: 38px; }
.bf-studio-card__city { font-family: var(--display); font-size: 1.6rem; font-weight: 400; }
.bf-studio-card__addr { color: var(--on-dark-mid); white-space: pre-line; margin-top: 10px; }
.bf-studio-card__phone { margin-top: 10px; color: var(--on-dark-dim); font-size: var(--fs-small); }

/* ---------------------------------------------------------------- reveal -- */
/* The hidden state applies only once the app has booted — `.bf-ready` is set by
   Reactor.init before the first render. If the runtime never loads, content
   renders normally instead of being trapped at opacity:0. */
.bf-ready [data-reveal] {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 1s var(--ease-out), transform 1s var(--ease-out);
    will-change: opacity, transform;
}

.bf-ready [data-reveal].is-in { opacity: 1; transform: none; }

.bf-ready [data-reveal][data-delay="1"] { transition-delay: 90ms; }
.bf-ready [data-reveal][data-delay="2"] { transition-delay: 180ms; }
.bf-ready [data-reveal][data-delay="3"] { transition-delay: 270ms; }
.bf-ready [data-reveal][data-delay="4"] { transition-delay: 360ms; }

[app] { animation: bf-app-in 700ms var(--ease-out) both; }

/* The bottom bar is fixed, so the document gets equivalent slack or it would
   cover the end of every page. --bar-h is the single source of that height: the
   panels below subtract it too, or a statement sitting at the foot of a
   full-viewport panel would run underneath the bar. */
[body] { padding-bottom: var(--bar-h); }

@keyframes bf-app-in {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* ------------------------------------------------------------- utilities -- */
.bf-mt-s { margin-top: 18px; }
.bf-mt-m { margin-top: clamp(26px, 3vw, 46px); }
.bf-mt-l { margin-top: clamp(42px, 5vw, 78px); }
.bf-center { text-align: center; }
.bf-maxw-60 { max-width: 60ch; }
.bf-sr {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

/* -------------------------------------------------- light-section variants -- */
.bf-sec--paper .bf-principles { border-top-color: var(--line-light); }
.bf-sec--paper .bf-principle { border-bottom-color: var(--line-light); }
.bf-sec--paper .bf-principle:hover { background: rgba(14, 16, 15, .022); }
.bf-sec--paper .bf-principle__body { color: var(--on-light-mid); }

.bf-sec--paper .bf-post { border-bottom-color: var(--line-light); }
.bf-sec--paper .bf-post:hover { background: rgba(14, 16, 15, .022); }
.bf-sec--paper .bf-post__excerpt { color: var(--on-light-mid); }
.bf-sec--paper .bf-post__meta { color: var(--on-light-dim); }
.bf-sec--paper .bf-post__media { background: var(--paper-2); }

.bf-sec--paper .bf-card__body { border-top-color: var(--line-light); }
.bf-sec--paper .bf-card__meta { color: var(--on-light-dim); }
.bf-sec--paper .bf-card__media { background: var(--paper-2); }
.bf-sec--paper .bf-person { border-top-color: var(--line-light); }
.bf-sec--paper .bf-person__mono {
    background: linear-gradient(150deg, var(--paper-2) 0%, #DCD6C9 100%);
    border-color: var(--line-light);
    color: var(--verdigris-d);
}
.bf-sec--paper .bf-person:hover .bf-person__mono { border-color: var(--verdigris-d); color: var(--ink); }
.bf-sec--paper .bf-person__role { color: var(--on-light-dim); }
.bf-sec--paper .bf-facts,
.bf-sec--paper .bf-fact { border-color: var(--line-light); }
.bf-sec--paper .bf-fact__k { color: var(--on-light-dim); }
.bf-sec--paper .bf-fact__v { color: var(--on-light); }

/* -------------------------------------------------------------------- CTA -- */
.bf-cta {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    background-size: cover;
    background-position: center;
    padding-block: clamp(90px, 13vw, 200px);
    text-align: center;
}

.bf-cta::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(180deg, rgba(14, 16, 15, .82) 0%, rgba(14, 16, 15, .68) 50%,
                rgba(14, 16, 15, .9) 100%);
}

.bf-cta__actions {
    display: flex;
    gap: 16px;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: clamp(28px, 3.4vw, 46px);
}

/* ------------------------------------------------------------ facts block -- */
.bf-quote {
    font-family: var(--display);
    font-size: clamp(1.5rem, 3.2vw, 2.7rem);
    font-weight: 300;
    line-height: 1.22;
    letter-spacing: -.01em;
    max-width: 30ch;
}

.bf-quote__by {
    margin-top: 26px;
    font-size: var(--fs-label);
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--on-dark-dim);
}

.bf-sec--paper .bf-quote__by { color: var(--on-light-dim); }

/* Timeline for the studio page */
.bf-timeline { border-top: 1px solid var(--line-light); }
.bf-timeline__row {
    display: grid;
    grid-template-columns: 110px minmax(0, 1fr);
    gap: clamp(16px, 3vw, 48px);
    padding-block: clamp(16px, 2vw, 26px);
    border-bottom: 1px solid var(--line-light);
    align-items: baseline;
}
.bf-timeline__year { font-size: var(--fs-label); letter-spacing: .18em; color: var(--on-light-dim); }
.bf-timeline__what { color: var(--on-light-mid); }
.bf-timeline__what strong { color: var(--on-light); font-weight: 500; }

/* ------------------------------------------------------------- motion ---- */
/* Scroll progress rail */
.bf-progress {
    position: fixed;
    inset: 0 0 auto 0;
    height: 2px;
    z-index: 80;
    pointer-events: none;
    background: linear-gradient(90deg, var(--verdigris), var(--paper));
    transform: scaleX(0);
    transform-origin: 0 50%;
    will-change: transform;
}

/* Parallax. Elements are deliberately over-sized so translation never exposes
   an edge of the frame they sit in. */
[data-parallax] { will-change: transform; }

.bf-card__media[data-parallax-frame] { overflow: hidden; }
.bf-card__media[data-parallax-frame] .bf-card__img {
    height: 120%;
    margin-top: -10%;
}

.bf-gallery figure[data-parallax-frame] { overflow: hidden; }
.bf-gallery figure[data-parallax-frame] img {
    height: 118%;
    margin-top: -9%;
}

.bf-split__media[data-parallax-frame] { overflow: hidden; }
.bf-split__media[data-parallax-frame] img {
    height: 118%;
    margin-top: -9%;
}

/* The main view re-mounts on every navigation, so this doubles as a page
   transition between routes. */
[body] > * { animation: bf-view-in 620ms var(--ease-out) both; }

@keyframes bf-view-in {
    from { opacity: 0; transform: translateY(14px); }
    to { opacity: 1; transform: none; }
}

/* Cursor affordance over work cards — desktop pointers only. */
.bf-cursor {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 70;
    pointer-events: none;
    padding: .78em 1.15em;
    border-radius: 100px;
    background: var(--paper);
    color: var(--ink);
    font-family: var(--mono);
    font-size: .6rem;
    letter-spacing: .14em;
    text-transform: uppercase;
    white-space: nowrap;
    opacity: 0;
    transform: translate(-50%, -50%) scale(.78);
    transition: opacity 300ms var(--ease), transform 300ms var(--ease);
}

.bf-cursor.is-on { opacity: 1; transform: translate(-50%, -50%) scale(1); }

@media (hover: none), (pointer: coarse) {
    .bf-cursor { display: none; }
}

/* Project pager — where you are in the index, and how to keep moving. */
.bf-pager {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: clamp(16px, 4vw, 60px);
    padding-block: clamp(26px, 3.4vw, 48px);
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
}

.bf-pager__side {
    display: flex;
    flex-direction: column;
    gap: 9px;
    /* must be able to shrink, or a long project title overflows the row */
    flex: 1 1 0;
    min-width: 0;
}
.bf-pager__side--next { align-items: flex-end; text-align: right; }
.bf-pager__middle { flex: 0 0 auto; }

.bf-pager__title {
    /* block, so a long title wraps inside the column instead of sizing to
       max-content and spilling past the edge */
    display: block;
    width: 100%;
    max-width: 100%;
    overflow-wrap: anywhere;
    font-family: var(--display);
    font-size: clamp(1.15rem, 1.9vw, 1.75rem);
    font-weight: 400;
    line-height: 1.15;
    transition: color var(--med) var(--ease);
}

.bf-pager__side:hover .bf-pager__title { color: var(--verdigris); }
.bf-pager__count { color: var(--on-dark-dim); font-family: var(--mono); letter-spacing: .1em; }

.bf-pager__mid {
    font-family: var(--mono);
    letter-spacing: .1em;
    color: var(--on-dark-dim);
    white-space: nowrap;
}

@media (max-width: 620px) {
    .bf-pager { flex-direction: column; align-items: flex-start; }
    .bf-pager__side--next { align-items: flex-start; text-align: left; }
}

/* ======================================================== motion system === */
/* Preloader — the logotype on the ink ground while the first frame settles. */
.bf-preloader {
    position: fixed;
    inset: 0;
    z-index: 200;
    display: grid;
    place-items: center;
    background: var(--ink);
    transition: opacity 720ms var(--ease), visibility 720ms;
}

.bf-preloader.is-done { opacity: 0; visibility: hidden; pointer-events: none; }

.bf-preloader__inner { width: min(260px, 56vw); }
.bf-preloader__logo { width: 100%; height: auto; opacity: .92; }
.bf-preloader__bar { height: 1px; background: var(--line); margin-top: 30px; overflow: hidden; }

.bf-preloader__fill {
    height: 100%;
    background: var(--paper);
    transform: scaleX(0);
    transform-origin: 0 50%;
    transition: transform 480ms var(--ease-out);
}

/* Line-mask headline reveals — type rises out of its own baseline. */
.bf-ready [data-lines] .bf-line { display: block; overflow: hidden; }
.bf-ready [data-lines] .bf-line > span {
    display: block;
    transform: translateY(115%);
    transition: transform 1150ms var(--ease-out);
    transition-delay: calc(var(--i, 0) * 95ms);
}
.bf-ready [data-lines].is-in .bf-line > span { transform: none; }

/* Image reveals — the frame opens from the bottom while the image settles. */
[data-reveal-img] { overflow: hidden; }
.bf-ready [data-reveal-img] { clip-path: inset(0 0 100% 0); transition: clip-path 1250ms var(--ease-out); }
.bf-ready [data-reveal-img].is-in { clip-path: inset(0 0 0 0); }
.bf-ready [data-reveal-img] img { transform: scale(1.14); transition: transform 1500ms var(--ease-out); }
.bf-ready [data-reveal-img].is-in img { transform: none; }

/* Images fade in once decoded, so nothing pops mid-transition. */
.bf-ready img[data-fade] { opacity: 0; }
img[data-fade] { transition: opacity 700ms var(--ease); }
img[data-fade].is-loaded { opacity: 1; }

@keyframes bf-slow-zoom { from { transform: scale(1.06); } to { transform: scale(1); } }

/* Section rail — the current page's chapters. Rendered inside the page view,
   not the persistent widget, so it cannot outlive the page it describes.
   Kept narrow enough to sit inside the content gutter without colliding. */
.bf-rail {
    position: fixed;
    left: clamp(12px, 1.1vw, 20px);
    top: 50%;
    transform: translateY(-50%);
    z-index: 50;
    display: flex;
    flex-direction: column;
    gap: 13px;
    pointer-events: none;
}

.bf-rail:empty { display: none; }

.bf-rail__item {
    display: flex;
    align-items: center;
    gap: 7px;
    font-family: var(--mono);
    font-size: .58rem;
    letter-spacing: .1em;
    color: var(--on-dark-dim);
    opacity: .4;
    transition: opacity 500ms var(--ease), color 500ms var(--ease);
}

.bf-rail__item.is-on { opacity: 1; color: var(--on-dark); }
.bf-rail__line { width: 13px; height: 1px; background: currentColor; transition: width 500ms var(--ease); }
.bf-rail__item.is-on .bf-rail__line { width: 22px; }

/* Below this width the gutter is too narrow to keep the rail off the content */
@media (max-width: 1280px) { .bf-rail { display: none; } }

/* Route change: sections lift in sequence */
[body] > * { animation: bf-view-in 700ms var(--ease-out) both; }

/* ------------------------------------------------------------ responsive -- */
@media (max-width: 1180px) {
    .bf-team { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 980px) {
    .bf-services { grid-template-columns: repeat(2, minmax(0, 1fr)); }

    .bf-head { grid-template-columns: minmax(0, 1fr); align-items: start; }
    .bf-head__aside { justify-self: start; text-align: left; }

    .bf-card--wide,
    .bf-card--narrow,
    .bf-card--half { grid-column: span 12; }
    .bf-card--offset { margin-top: 0; }

    .bf-pagehead__inner { grid-template-columns: minmax(0, 1fr); align-items: start; }
    .bf-pagehead__meta { justify-content: flex-start; }

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

    .bf-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .bf-spec { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .bf-team { grid-template-columns: repeat(2, minmax(0, 1fr)); }

    .bf-principle { grid-template-columns: 60px minmax(0, 1fr); }
    .bf-principle__body { grid-column: 2; }

    .bf-award { grid-template-columns: 74px minmax(0, 1fr); }
    .bf-award__body { grid-column: 2; }

    .bf-post { grid-template-columns: 150px minmax(0, 1fr); align-items: start; }
    .bf-post__meta { grid-column: 2; text-align: left; margin-top: 12px; }

    .bf-gallery figure.span-6,
    .bf-gallery figure.span-7,
    .bf-gallery figure.span-5 { grid-column: span 12; }
}

@media (max-width: 620px) {
    .bf-services { grid-template-columns: minmax(0, 1fr); }
    .bf-stats { grid-template-columns: minmax(0, 1fr); }
    .bf-team { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .bf-spec { grid-template-columns: minmax(0, 1fr); }
    .bf-post { grid-template-columns: minmax(0, 1fr); }
    .bf-post__media { aspect-ratio: 16 / 9; }
    .bf-post__meta { grid-column: 1; }
    .bf-fact { grid-template-columns: minmax(0, 1fr); gap: 6px; }
}

/* ---------------------------------------------------- people / play / careers --
   These three pages render an empty state until their data slots are filled, so
   the layouts below only ever apply once real records exist. They are written
   now so the data drops straight in. */
.bf-people {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr));
    gap: clamp(26px, 3vw, 46px);
    margin-top: clamp(26px, 3vw, 42px);
}

.bf-person__media {
    aspect-ratio: 3 / 4;
    overflow: hidden;
    background: var(--line);
    margin-bottom: 18px;
}

.bf-person__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.bf-person__name {
    font-family: var(--display);
    font-size: clamp(1.25rem, 1.8vw, 1.6rem);
    font-weight: 400;
    line-height: 1.2;
}

.bf-person__bio {
    margin-top: 12px;
    font-size: .95rem;
    line-height: 1.6;
    color: var(--ink-mid);
}

.bf-play {
    display: grid;
    gap: clamp(30px, 4vw, 60px);
}

.bf-play__link {
    display: grid;
    gap: clamp(18px, 2.4vw, 34px);
    grid-template-columns: 1fr;
}

@media (min-width: 860px) {
    .bf-play__link { grid-template-columns: 1.15fr 1fr; align-items: center; }
    .bf-play__item:nth-child(even) .bf-play__link { direction: rtl; }
    .bf-play__item:nth-child(even) .bf-play__link > * { direction: ltr; }
}

.bf-play__media {
    position: relative;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background: var(--line);
}

.bf-play__img { width: 100%; height: 100%; object-fit: cover; display: block; }

.bf-play__kind {
    position: absolute;
    left: 14px;
    bottom: 12px;
    color: var(--on-dark);
    background: rgba(0, 0, 0, .45);
    padding: 5px 10px;
}

.bf-play__title {
    font-family: var(--display);
    font-size: clamp(1.5rem, 2.6vw, 2.2rem);
    font-weight: 300;
    line-height: 1.2;
}

.bf-play__excerpt {
    margin-top: 12px;
    line-height: 1.65;
    color: var(--ink-mid);
}

.bf-openings {
    display: grid;
    gap: clamp(20px, 2.4vw, 34px);
}

.bf-opening {
    padding: clamp(24px, 3vw, 40px);
    border: 1px solid var(--line);
}

.bf-opening__head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px 20px;
    margin-bottom: 14px;
}

.bf-opening__title {
    font-family: var(--display);
    font-size: clamp(1.4rem, 2.2vw, 1.9rem);
    font-weight: 400;
    line-height: 1.2;
}

.bf-opening__body { line-height: 1.65; color: var(--ink-mid); max-width: 70ch; }

/* Motion off. Two ways in: the OS preference, or the nav's Motion toggle, which
   sets data-motion="off" on <html> and persists in localStorage. Both need the
   same rules, because collapsing a transition is not the same as removing the
   state change that depended on it. */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
        scroll-behavior: auto !important;
    }
    [data-reveal] { opacity: 1 !important; transform: none !important; }

}

html[data-motion="off"] *, html[data-motion="off"] *::before, html[data-motion="off"] *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
}

html[data-motion="off"] [data-reveal] { opacity: 1 !important; transform: none !important; }

/* ---------------------------------------------------------- menu button --
   The header carries one control, as the reference site's does; everything else
   lives in the overlay below. */
.bf-menubtn {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 0;
    background: none;
    border: 0;
    cursor: pointer;
    color: var(--on-dark-mid);
    transition: color var(--med) var(--ease);
}

.bf-menubtn:hover { color: var(--on-dark); }

.bf-menubtn__bars { display: inline-flex; flex-direction: column; gap: 6px; width: 24px; }

.bf-menubtn__bars span {
    display: block;
    height: 1px;
    background: currentColor;
    transition: transform var(--med) var(--ease);
}

.bf-menubtn.is-open .bf-menubtn__bars span:first-child { transform: translateY(3.5px) rotate(45deg); }
.bf-menubtn.is-open .bf-menubtn__bars span:last-child { transform: translateY(-3.5px) rotate(-45deg); }

@media (max-width: 620px) { .bf-menubtn__text { display: none; } }

/* --------------------------------------------------------- menu overlay --
   Full-screen, opened from the header. Groups are laid out in columns, each
   heading a link with its pages beneath — the reference site's arrangement. */
.bf-overlay {
    position: fixed;
    inset: 0;
    z-index: 90;
    background: var(--ink);
    padding: clamp(104px, 15vh, 176px) 0 clamp(56px, 9vh, 104px);
    overflow-y: auto;
    overscroll-behavior: contain;
    opacity: 0;
    visibility: hidden;
    transition: opacity .45s var(--ease), visibility 0s linear .45s;
}

.bf-overlay.is-open { opacity: 1; visibility: visible; transition-delay: 0s; }

.bf-overlay__cols {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 170px), 1fr));
    gap: clamp(26px, 4vw, 54px);
}

.bf-overlay__group { display: flex; flex-direction: column; align-items: flex-start; gap: 7px; }

.bf-overlay__title {
    font-family: var(--display);
    font-size: clamp(1.5rem, 2.6vw, 2.3rem);
    font-weight: 300;
    line-height: 1.15;
    color: var(--on-dark);
    margin-bottom: 12px;
    transition: color var(--med) var(--ease);
}

.bf-overlay__title:hover,
.bf-overlay__title.is-active { color: var(--verdigris); }

.bf-overlay__sub {
    font-size: var(--fs-label);
    font-weight: 500;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--on-dark-mid);
    padding: 3px 0;
    transition: color var(--med) var(--ease), transform var(--med) var(--ease);
}

.bf-overlay__sub:hover,
.bf-overlay__sub.is-active { color: var(--on-dark); transform: translateX(6px); }

.bf-overlay__foot {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
    gap: 20px;
    margin-top: clamp(44px, 8vh, 96px);
    padding-top: clamp(26px, 4vh, 42px);
    border-top: 1px solid var(--line-dark);
}

.bf-overlay__mail {
    font-family: var(--display);
    font-size: clamp(1.05rem, 1.7vw, 1.5rem);
    color: var(--on-dark);
    display: block;
    margin-bottom: 6px;
}

.bf-overlay__offices,
.bf-overlay__social { display: flex; flex-wrap: wrap; gap: 8px 18px; }

.bf-overlay__close {
    position: absolute;
    top: clamp(22px, 3vw, 40px);
    right: clamp(22px, 4vw, 54px);
    padding: 6px 10px;
    background: none;
    border: 0;
    cursor: pointer;
    font-size: 1.9rem;
    line-height: 1;
    color: var(--on-dark-mid);
    transition: color var(--med) var(--ease);
}

.bf-overlay__close:hover { color: var(--on-dark); }

/* ------------------------------------------------------------ bottom bar --
   Fixed, as the reference site's is. [body] is padded so the bar never covers
   the end of a page. */
.bf-bar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 80;
    background: var(--ink);
    border-top: 1px solid var(--line-dark);
}

.bf-bar__inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px 26px;
    padding: 13px clamp(20px, 4vw, 54px);
}

.bf-bar__links,
.bf-bar__social { display: flex; flex-wrap: wrap; gap: 8px 22px; }

.bf-bar__link,
.bf-bar__social-link {
    font-size: var(--fs-label);
    font-weight: 500;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--on-dark-mid);
    transition: color var(--med) var(--ease);
}

.bf-bar__link:hover,
.bf-bar__social-link:hover,
.bf-bar__link.is-active { color: var(--on-dark); }

.bf-bar__meta { display: flex; align-items: center; gap: 20px; }

/* --------------------------------------------------------- to-top button --
   Sits above the bar and appears only once the visitor has left the first
   viewport. The label fades in on hover rather than sitting there always. */
.bf-totop {
    position: fixed;
    right: 6px;
    bottom: 58px;
    z-index: 85;
    padding: 18px;
    background: none;
    border: 0;
    cursor: pointer;
    color: var(--on-dark);
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--med) var(--ease), visibility 0s linear .3s;
}

.bf-totop.is-on { opacity: 1; visibility: visible; transition-delay: 0s; }
.bf-totop svg { width: 24px; height: 24px; display: block; }

.bf-totop__label {
    display: block;
    margin-top: 5px;
    font-size: var(--fs-label);
    letter-spacing: .2em;
    text-transform: uppercase;
    text-align: center;
    opacity: 0;
    transition: opacity var(--med) var(--ease);
}

.bf-totop:hover .bf-totop__label { opacity: 1; }

/* ------------------------------------------------------- projects slider --
   A fullscreen panel holding a horizontal track. Slides are exactly one
   viewport wide and the track is moved by transform, so the panel has no
   scrollable overflow of its own to fight the page. */
.bf-slider {
    position: relative;
    height: 100svh;
    min-height: 540px;
    overflow: hidden;
    background: var(--ink);
}

.bf-slider__track {
    display: flex;
    height: 100%;
    transition: transform .75s var(--ease);
    will-change: transform;
}

.bf-slide {
    position: relative;
    flex: 0 0 100vw;
    width: 100vw;
    height: 100%;
    display: flex;
    align-items: flex-end;
    overflow: hidden;
    isolation: isolate;
}

.bf-slide__media {
    position: absolute;
    inset: 0;
    z-index: 1;
    background-size: cover;
    background-position: center;
    filter: brightness(.8) saturate(.95);
}

.bf-slide::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background:
        linear-gradient(180deg, rgba(14, 16, 15, .58) 0%, rgba(14, 16, 15, .1) 34%,
                        rgba(14, 16, 15, .5) 68%, rgba(14, 16, 15, .93) 100%);
}

.bf-slide__inner {
    position: relative;
    z-index: 2;
    width: 100%;
    padding-top: 140px;
    padding-bottom: calc(var(--bar-h) + clamp(40px, 6vw, 92px));
}

.bf-slide__type { color: var(--verdigris); margin-bottom: clamp(12px, 1.6vw, 20px); }

.bf-slide__title {
    font-family: var(--display);
    font-size: clamp(2rem, 5vw, 4.2rem);
    font-weight: 300;
    line-height: 1.04;
    letter-spacing: -0.015em;
    color: var(--on-dark);
    max-width: 20ch;
}

.bf-slide__meta { color: var(--on-dark-mid); margin-top: clamp(14px, 1.8vw, 22px); }

.bf-slide__link {
    display: inline-block;
    margin-top: clamp(22px, 2.6vw, 34px);
    font-size: var(--fs-label);
    font-weight: 500;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--on-dark);
    border-bottom: 1px solid currentColor;
    padding-bottom: 4px;
    transition: color var(--med) var(--ease);
}

.bf-slide__link:hover { color: var(--verdigris); }

.bf-slider__arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 4;
    width: 54px;
    height: 54px;
    display: grid;
    place-items: center;
    font-size: 1.1rem;
    color: var(--on-dark);
    background: rgba(14, 16, 15, .38);
    border: 1px solid var(--line-dark);
    cursor: pointer;
    transition: background var(--med) var(--ease), border-color var(--med) var(--ease);
}

.bf-slider__arrow:hover { background: rgba(14, 16, 15, .78); border-color: var(--on-dark-mid); }
.bf-slider__arrow--prev { left: clamp(10px, 2vw, 30px); }
.bf-slider__arrow--next { right: clamp(10px, 2vw, 30px); }

.bf-slider__count {
    position: absolute;
    z-index: 4;
    right: clamp(16px, 3vw, 42px);
    bottom: calc(var(--bar-h) + 20px);
    color: var(--on-dark-mid);
}

/* ------------------------------------------------------------ news panel --
   The photograph takes the frame; the headline sits on a solid block beneath,
   which is how the reference site gives its latest item a whole panel. */
.bf-newspanel {
    position: relative;
    height: 100svh;
    min-height: 540px;
    display: flex;
    flex-direction: column;
    background: var(--ink);
    overflow: hidden;
}

.bf-newspanel__figure { position: relative; flex: 1; margin: 0; overflow: hidden; }

.bf-newspanel__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    filter: brightness(.88) saturate(.96);
}

.bf-newspanel__wrap { background: var(--ink); padding: clamp(26px, 3.4vw, 46px) 0 calc(var(--bar-h) + clamp(22px, 3vw, 38px)); }

.bf-newspanel__title {
    font-family: var(--display);
    font-size: clamp(1.5rem, 3vw, 2.7rem);
    font-weight: 300;
    line-height: 1.1;
    color: var(--on-dark);
    margin-top: 12px;
    max-width: 24ch;
}

.bf-newspanel__excerpt { margin-top: 14px; max-width: 62ch; line-height: 1.65; color: var(--on-dark-mid); }
.bf-newspanel__inner .bf-screen__link { display: inline-block; margin-top: 20px; }

/* --------------------------------------------------------- closing panel --
   The reference site ends its home page on a fullscreen panel pointing at the
   section it most wants visited. */
.bf-closing {
    position: relative;
    height: 100svh;
    min-height: 540px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    isolation: isolate;
    text-align: center;
}

.bf-closing__media {
    position: absolute;
    inset: 0;
    z-index: 1;
    background-size: cover;
    background-position: center;
    filter: brightness(.6) saturate(.9);
}

.bf-closing::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: linear-gradient(180deg, rgba(14, 16, 15, .7) 0%, rgba(14, 16, 15, .55) 50%, rgba(14, 16, 15, .9) 100%);
}

.bf-closing__inner {
    position: relative;
    z-index: 2;
    padding-bottom: var(--bar-h);
}

.bf-closing__title {
    max-width: 22ch;
    margin: clamp(16px, 2vw, 26px) auto 0;
}

.bf-closing__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    justify-content: center;
    margin-top: clamp(26px, 3vw, 42px);
}