/* ─────────── Brand faces — SELF-HOSTED, licensed (B&Co. brand-pdf-kit), vendored as woff2 ───────
   Canon: Didot for titles/headings, Avenir Next for body. Served from our own origin — no Google
   Fonts, no CDN — so the true brand faces render for every visitor, Apple or not. Didot 600-req
   maps to Bold; Avenir Next uses Regular and DemiBold for all emphasis weights.
   Font files remain unchanged. Measured local fallbacks reduce reflow during swap. */
@font-face{font-family:"Didot";src:url("/assets/fonts/Didot-Regular.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Didot";src:url("/assets/fonts/Didot-Bold.woff2") format("woff2");font-weight:600 900;font-style:normal;font-display:swap}
@font-face{font-family:"Didot";src:url("/assets/fonts/Didot-Italic.woff2") format("woff2");font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:"Avenir Next";src:url("/assets/fonts/AvenirNext-Regular.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Avenir Next";src:url("/assets/fonts/AvenirNext-DemiBold.woff2") format("woff2");font-weight:500 900;font-style:normal;font-display:swap}
/* Fallback advance widths and hhea metrics measured against the shipped faces.
   These aliases only reference visitor-local system fonts; no extra font downloads. */
@font-face{font-family:"BCoSansFallback";src:local("Arial");font-weight:400;font-style:normal;size-adjust:102.430%;ascent-override:97.627%;descent-override:35.732%;line-gap-override:0%}
@font-face{font-family:"BCoSansFallback";src:local("Arial Bold");font-weight:500 900;font-style:normal;size-adjust:97.030%;ascent-override:103.061%;descent-override:37.720%;line-gap-override:0%}
@font-face{font-family:"BCoDidotFallback";src:local("Times New Roman");font-weight:400;font-style:normal;size-adjust:110.875%;ascent-override:84.871%;descent-override:26.967%;line-gap-override:2.165%}

/* Blend only peripheral scenery; opaque silhouettes retain the complete source architecture. */
#view-design-build [data-db-extended="church-st"] .db-original{mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20100%20100%22%20preserveAspectRatio%3D%22none%22%3E%3Cdefs%3E%3Cfilter%20id%3D%22f%22%20x%3D%22-50%25%22%20y%3D%22-50%25%22%20width%3D%22200%25%22%20height%3D%22200%25%22%3E%3CfeGaussianBlur%20stdDeviation%3D%223.5%22%2F%3E%3C%2Ffilter%3E%3C%2Fdefs%3E%3Crect%20x%3D%227%22%20y%3D%227%22%20width%3D%2286%22%20height%3D%2286%22%20fill%3D%22white%22%20filter%3D%22url%28%23f%29%22%2F%3E%3Cpolygon%20points%3D%222%2C37%2095%2C37%2095%2C72%202%2C72%22%20fill%3D%22white%22%2F%3E%3C%2Fsvg%3E");mask-size:100% 100%;mask-repeat:no-repeat}
#view-design-build [data-db-extended="berkery-pl"] .db-original{mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20100%20100%22%20preserveAspectRatio%3D%22none%22%3E%3Cdefs%3E%3Cfilter%20id%3D%22f%22%20x%3D%22-50%25%22%20y%3D%22-50%25%22%20width%3D%22200%25%22%20height%3D%22200%25%22%3E%3CfeGaussianBlur%20stdDeviation%3D%223.5%22%2F%3E%3C%2Ffilter%3E%3C%2Fdefs%3E%3Crect%20x%3D%227%22%20y%3D%227%22%20width%3D%2286%22%20height%3D%2286%22%20fill%3D%22white%22%20filter%3D%22url%28%23f%29%22%2F%3E%3Cpolygon%20points%3D%2220%2C28%2034%2C28%2038%2C2%2067%2C2%2073%2C20%2091%2C20%2091%2C78%2020%2C78%22%20fill%3D%22white%22%2F%3E%3C%2Fsvg%3E");mask-size:100% 100%;mask-repeat:no-repeat}
#view-design-build [data-db-extended="close-rd"] .db-original{mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20100%20100%22%20preserveAspectRatio%3D%22none%22%3E%3Cdefs%3E%3Cfilter%20id%3D%22f%22%20x%3D%22-50%25%22%20y%3D%22-50%25%22%20width%3D%22200%25%22%20height%3D%22200%25%22%3E%3CfeGaussianBlur%20stdDeviation%3D%223.5%22%2F%3E%3C%2Ffilter%3E%3C%2Fdefs%3E%3Crect%20x%3D%227%22%20y%3D%227%22%20width%3D%2286%22%20height%3D%2286%22%20fill%3D%22white%22%20filter%3D%22url%28%23f%29%22%2F%3E%3Cpolygon%20points%3D%220%2C25%2015%2C25%2023%2C1%2062%2C1%2069%2C15%2080%2C17%2082%2C20%20100%2C23%20100%2C65%200%2C65%22%20fill%3D%22white%22%2F%3E%3C%2Fsvg%3E");mask-size:100% 100%;mask-repeat:no-repeat}
#view-design-build [data-db-extended="polygon-plaza"] .db-original{mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20100%20100%22%20preserveAspectRatio%3D%22none%22%3E%3Cdefs%3E%3Cfilter%20id%3D%22f%22%20x%3D%22-50%25%22%20y%3D%22-50%25%22%20width%3D%22200%25%22%20height%3D%22200%25%22%3E%3CfeGaussianBlur%20stdDeviation%3D%223.5%22%2F%3E%3C%2Ffilter%3E%3C%2Fdefs%3E%3Crect%20x%3D%227%22%20y%3D%227%22%20width%3D%2286%22%20height%3D%2286%22%20fill%3D%22white%22%20filter%3D%22url%28%23f%29%22%2F%3E%3Cpolygon%20points%3D%220%2C19%2028%2C9%2074%2C30%2075%2C52%20100%2C52%20100%2C91%200%2C91%22%20fill%3D%22white%22%2F%3E%3C%2Fsvg%3E");mask-size:100% 100%;mask-repeat:no-repeat}
#view-design-build [data-db-extended="denver"] .db-original{mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20100%20100%22%20preserveAspectRatio%3D%22none%22%3E%3Cdefs%3E%3Cfilter%20id%3D%22f%22%20x%3D%22-50%25%22%20y%3D%22-50%25%22%20width%3D%22200%25%22%20height%3D%22200%25%22%3E%3CfeGaussianBlur%20stdDeviation%3D%223.5%22%2F%3E%3C%2Ffilter%3E%3Cfilter%20id%3D%22h%22%20x%3D%22-50%25%22%20y%3D%22-50%25%22%20width%3D%22200%25%22%20height%3D%22200%25%22%3E%3CfeMorphology%20operator%3D%22dilate%22%20radius%3D%222%22%2F%3E%3CfeGaussianBlur%20stdDeviation%3D%222%22%2F%3E%3C%2Ffilter%3E%3C%2Fdefs%3E%3Crect%20x%3D%227%22%20y%3D%227%22%20width%3D%2286%22%20height%3D%2286%22%20fill%3D%22white%22%20filter%3D%22url%28%23f%29%22%2F%3E%3Cpolygon%20points%3D%2216%2C21%2056%2C21%2068%2C10%2085%2C32%2083%2C87%2016%2C87%22%20fill%3D%22white%22%20filter%3D%22url%28%23h%29%22%2F%3E%3Cpolygon%20points%3D%2216%2C21%2056%2C21%2068%2C10%2085%2C32%2083%2C87%2016%2C87%22%20fill%3D%22white%22%2F%3E%3C%2Fsvg%3E");mask-size:100% 100%;mask-repeat:no-repeat}
#view-design-build [data-db-extended="dubois"] .db-original{mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20100%20100%22%20preserveAspectRatio%3D%22none%22%3E%3Cdefs%3E%3Cfilter%20id%3D%22f%22%20x%3D%22-50%25%22%20y%3D%22-50%25%22%20width%3D%22200%25%22%20height%3D%22200%25%22%3E%3CfeGaussianBlur%20stdDeviation%3D%223.5%22%2F%3E%3C%2Ffilter%3E%3C%2Fdefs%3E%3Crect%20x%3D%227%22%20y%3D%227%22%20width%3D%2286%22%20height%3D%2286%22%20fill%3D%22white%22%20filter%3D%22url%28%23f%29%22%2F%3E%3Cpolygon%20points%3D%2215%2C22%2079%2C9%2082%2C58%2058%2C80%2013%2C80%22%20fill%3D%22white%22%2F%3E%3C%2Fsvg%3E");mask-size:100% 100%;mask-repeat:no-repeat}


/* Highwood's accepted source ends at its right facade. Extend only the left scenery. */
#view-design-build .concept-grid .concept-card [data-db-extended="highwood"] img.db-original{z-index:2;mask-image:linear-gradient(to right,transparent,#000 9%);mask-size:100% 100%}
#view-design-build .concept-grid .concept-card [data-db-extended="highwood"] img.db-aligned-extension{z-index:1;left:.926308%;top:-.022403%;width:94.323612%;height:94.323612%;mask-image:linear-gradient(to bottom,#000 88%,transparent),linear-gradient(to right,transparent,#000 3%);mask-composite:intersect}

/* Complete original photographs over registered, background-only extensions. */
#view-design-build .proj-grid .cat-media[data-db-extended],#view-design-build .concept-grid .concept-card figure[data-db-extended]{aspect-ratio:4/3;isolation:isolate}
#view-design-build .proj-grid .cat-media[data-slot][data-db-extended] img.db-original,#view-design-build .concept-grid .concept-card [data-db-extended] img.db-original{inset:auto;left:var(--db-photo-left);top:var(--db-photo-top);width:var(--db-photo-width);height:var(--db-photo-height);object-fit:contain;z-index:1}
#view-design-build .proj-grid .cat-media[data-slot][data-db-extended] img.db-extension,#view-design-build .concept-grid .concept-card [data-db-extended] img.db-extension{inset:0;width:100%;height:100%;object-fit:cover;z-index:0;pointer-events:none}

/* ════════════════════ TOKENS — LOCKED PALETTE (three colors only) ════════ */
:root{
  --crimson:#a70008;            /* punctuation, never wallpaper            */
  --ink:#0a0a0a;                /* structural typography & lines           */
  --paper:#ffffff;              /* default ground                          */
  --ink-60:rgba(10,10,10,.6);
  --ink-35:rgba(10,10,10,.35); --ink-14:rgba(10,10,10,.14); --ink-06:rgba(10,10,10,.06);
  --paper-70:rgba(255,255,255,.7);
  --paper-45:rgba(255,255,255,.56); --paper-18:rgba(255,255,255,.18); --paper-08:rgba(255,255,255,.08);
  --font-display:"Didot","BCoDidotFallback","Didot LP","Didot LT STD","Bodoni 72",Georgia,"Times New Roman",serif;
  --font-body:"Avenir Next","BCoSansFallback",Avenir,"Helvetica Neue",Helvetica,Arial,system-ui,sans-serif;
  --font-mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  --w:1180px; --gutter:clamp(20px,4vw,48px);
  --ease:cubic-bezier(.22,1,.36,1);
  --r:18px; /* Apple-style curved edges on every box */
}
*{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%;font-synthesis-weight:none}
/* Native smooth scrolling is scoped to the devices where ScrollSmoother is
   never created (it is desktop fine-pointer only). Running both on the same
   axis is what reads as scroll jank. Igor 2026-07-25. */
@media(hover:none),(pointer:coarse){html{scroll-behavior:smooth}}
body{
  font-family:var(--font-body);font-weight:400;color:var(--ink);
  background:var(--paper);line-height:1.6;font-size:16px;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
::selection{background:var(--crimson);color:var(--paper)}
h1,h2,.pull{text-wrap:balance}
p{text-wrap:pretty}
body{font-synthesis:none}
:focus-visible{outline:2px solid var(--crimson);outline-offset:3px;border-radius:4px}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
.wrap{max-width:var(--w);margin:0 auto;padding:0 var(--gutter)}

/* ════════════════════ BRAND TYPOGRAPHY ═══════════════════════════════════ */
/* The crimson italic ampersand is kerned tight so every lockup reads "B&Co." /
   "Beyder&Co." — not "B & Co." (Igor 2026-07-03: fix the spacing site-wide). */
.amp{font-family:var(--font-display);font-style:italic;color:var(--crimson);font-weight:400;margin:0 -.02em;letter-spacing:0}
/* Brand lockups ALWAYS in Didot (Igor 2026-07-03) — B&Co. / Beyder&Co. and the
   three verticals read in the display serif wherever they appear inline. */
.bco{font-family:var(--font-display);font-weight:400}
.pipe{font-weight:300;opacity:.4;padding:0 .05em}
/* Header-band separator reads clearly, not ghosted (Igor 2026-07-04) — scoped to the
   nav so the softer .pipe elsewhere (cards/footer) is unchanged. */
.navlinks .pipe{opacity:.9;font-weight:400;padding:0 .12em}
/* NOT flex — flex made "Beyder", the & span, and "Co." separate flex items with a
   14px gap between each, rendering "B & Co." Normal flow keeps the lockup tight. */
.eyebrow{
  font-family:var(--font-body);font-weight:600;font-size:11px;
  letter-spacing:.22em;text-transform:uppercase;color:var(--crimson);
  margin-bottom:26px;
}
.eyebrow::after{content:"";display:inline-block;height:1px;width:56px;background:var(--crimson);opacity:.6;vertical-align:middle;margin-left:14px}
.on-ink .eyebrow{color:var(--crimson)}
h1,h2,.display{font-family:var(--font-display);font-weight:400;line-height:1.08;letter-spacing:.005em}
h1{font-size:clamp(40px,6.2vw,82px)}
h2{font-size:clamp(30px,4.2vw,54px)}
h3{font-family:var(--font-display);font-weight:600;font-size:21px;line-height:1.25}
.lede{font-size:clamp(16px,1.6vw,19px);font-weight:400;color:var(--ink-60);max-width:62ch}
.on-ink .lede{color:var(--paper-70)}
.num{font-family:var(--font-display);font-style:italic;color:var(--crimson);font-weight:400}
.section-title-compact{font-size:clamp(30px,3.8vw,54px)}
.founder-role{font-size:12px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-60);margin-top:10px}
.founder-meta{font-size:13.5px;color:var(--ink-60)}

/* ════════════════════ NAV ════════════════════════════════════════════════ */
.skip{position:absolute;left:-9999px;top:0;background:var(--ink);color:var(--paper);padding:10px 18px;z-index:300}
.skip:focus{left:12px;top:12px}
header{
  position:fixed;inset:0 0 auto 0;z-index:120;background:rgba(255,255,255,.55);
  -webkit-backdrop-filter:blur(16px) saturate(150%);backdrop-filter:blur(16px) saturate(150%);
  border-bottom:1px solid var(--ink-14);
  /* Flicker fix (Igor 2026-07-04): pin the glass bar to its OWN stable GPU layer so its
     backdrop-filter is rastered once and re-composited — not re-rastered every frame —
     against ScrollSmoother's per-frame sub-pixel transform of #smooth-content. translateZ(0)
     must be a REAL transform (will-change alone can drop backdrop-filter on some Safari
     builds); it stays on the header ELEMENT only (an ancestor transform would break fixed +
     the glass). Do NOT add contain:paint / isolation:isolate — they blank the glass on WebKit. */
  -webkit-transform:translateZ(0);
  transform:translateZ(0);
  will-change:transform;
  -webkit-backface-visibility:hidden;
  backface-visibility:hidden;
}
/* Header is static — it never retreats on scroll (Igor 2026-07-03). */
body.menu-open header{z-index:240}
.nav{display:flex;align-items:center;justify-content:space-between;height:72px;max-width:var(--w);margin:0 auto;padding:0 var(--gutter)}
.brand{display:flex;align-items:center;gap:12px;font-family:var(--font-display);font-size:25px;letter-spacing:.01em;line-height:1}
.brand img{height:34px;width:auto}
.brand .dot{font-size:.9em}
.navlinks{display:flex;gap:clamp(14px,2vw,30px);align-items:center;list-style:none}
.navlinks a{
  font-family:var(--font-body);font-size:11.5px;font-weight:400;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink);padding:6px 2px;
  transition:color .25s var(--ease);white-space:nowrap;
}
.navlinks a:hover,.navlinks a:active,.navlinks a[aria-current="page"]{color:var(--crimson)}
.burger{display:none;background:none;border:0;cursor:pointer;width:44px;height:44px;position:relative;z-index:220}
.burger span{display:block;width:24px;height:1.5px;background:var(--ink);margin:6px auto;transition:transform .35s var(--ease),opacity .25s}
body.menu-open .burger span:nth-child(1){transform:translateY(7.5px) rotate(45deg)}
body.menu-open .burger span:nth-child(2){opacity:0}
body.menu-open .burger span:nth-child(3){transform:translateY(-7.5px) rotate(-45deg)}
body.menu-open .burger span{background:var(--paper)}
.mobile-menu{
  position:fixed;inset:0;background:var(--ink);z-index:200;display:flex;
  flex-direction:column;justify-content:flex-start;padding:calc(84px + env(safe-area-inset-top)) var(--gutter) calc(24px + env(safe-area-inset-bottom));height:100dvh;overflow-y:auto;overscroll-behavior:contain;
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .4s var(--ease),visibility 0s .4s;
}
body.menu-open .mobile-menu{opacity:1;visibility:visible;pointer-events:auto;transition:opacity .4s var(--ease)}
.mobile-menu a{
  font-family:var(--font-display);font-size:clamp(30px,7vw,44px);color:var(--paper);
  padding:12px 0;border-bottom:1px solid var(--paper-08);
}
:where(main [id]){scroll-margin-top:105px}
@media(max-width:1120px){:where(main [id]){scroll-margin-top:93px}}
.mobile-menu a small{display:block;font-family:var(--font-body);font-size:10px;letter-spacing:.25em;text-transform:uppercase;color:var(--paper-45);margin-bottom:2px}
.mobile-menu a:hover,.mobile-menu a:active,.mobile-menu a[aria-current="page"]{color:var(--paper);border-bottom-color:var(--crimson)}
.mobile-menu a[aria-current="page"]::after{content:" ·";color:var(--paper)}
.mobile-menu a:focus-visible{outline:2px solid var(--paper);outline-offset:3px}
@media(max-height:600px){.mobile-menu a{font-size:28px;padding:8px 0;line-height:1.25}.mobile-menu a small{font-size:9px}}
@media(max-width:1120px){.navlinks{display:none}.burger{display:block}}

/* ════════════════════ TEN QUIET MOVES (Igor 2026-08-22; withheld cards and
   territory map retired the same evening at Igor's direction) ══════════════ */
/* 2 · The Publications on Home */
.mag-cover:focus-visible{outline:2px solid var(--crimson);outline-offset:3px}
.pub-trio{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(28px,4vw,64px);margin-top:54px;align-items:end}
.pub-item{width:100%;max-width:430px;justify-self:center;display:flex;flex-direction:column;align-items:center;gap:20px;min-width:0}
.pub-item .mag-cover{width:100%;max-width:430px;margin:0}
.pub-cap{font-family:var(--font-body);font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-60);margin:0;text-align:center}
.pub-cap .bco,.pub-cap .pipe{text-transform:none}
@media(max-width:860px){.pub-trio{grid-template-columns:1fr;justify-items:center;gap:46px}}
/* 4 · Market micro-columns — twelve slim bars, newest month in crimson */
.bmt-spark{display:block;width:96px;height:26px;margin:9px auto 0;color:var(--ink-60);flex:none}
.bmt-spark rect{fill:currentColor;opacity:.3}
.bmt-spark rect.sp-last{fill:var(--crimson);opacity:1}
.bmt--realty .bmt-spark{color:var(--paper-45)}
.bmt--realty .bmt-spark rect{opacity:.45}
.bmt--realty .bmt-spark rect.sp-last{opacity:1}
/* 5 · Journal, set like the book */
.ab-first > p:first-of-type::first-letter{font-family:var(--font-display);font-size:3.1em;line-height:.83;float:left;padding:5px 10px 0 0}
.jr-end{display:inline-block;width:8px;height:8px;background:var(--crimson);margin-left:12px}
.article-related{margin:44px 0 6px;padding-top:26px;border-top:1px solid var(--ink-14)}
.article-related .ar-label{font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--ink-60);margin:0 0 10px;font-family:var(--font-body)}
.article-related a{display:block;font-family:var(--font-display);font-size:21px;color:var(--ink);text-decoration:none;padding:7px 0;border-bottom:0}
.article-related a:hover,.article-related a:focus-visible{color:var(--crimson)}
/* 6 · The Dossier hover — the file, opened a crack */
.dossier{position:absolute;left:0;right:0;bottom:0;transform:translateY(102%);transition:transform .45s var(--ease);background:rgba(10,10,10,.88);border-top:2px solid var(--crimson);padding:13px 16px 12px;display:flex;flex-direction:column;gap:5px;pointer-events:none}
.dossier span{font-family:var(--font-body);font-size:11px;letter-spacing:.15em;text-transform:uppercase;color:rgba(255,255,255,.82);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dossier .df-open{color:rgba(255,255,255,.55)}
@media(hover:hover) and (pointer:fine){
  a.work-card:hover .dossier,a.work-card:focus-visible .dossier,a.cat-card:hover .dossier,a.cat-card:focus-visible .dossier{transform:translateY(0)}
}
@media(prefers-reduced-motion:reduce){.dossier{transition:none}}
/* 7 · Paper grain — felt before it is seen */
body::after{content:"";position:fixed;inset:0;z-index:58;pointer-events:none;opacity:.022;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)'/%3E%3C/svg%3E")}
@media print{body::after{display:none}}
/* 9 · In His Own Words */
.fw{margin:clamp(30px,4vw,52px) 0 0}
.fw-quote{font-family:var(--font-display);font-style:italic;font-weight:400;font-size:clamp(27px,2.9vw,44px);line-height:1.28;max-width:26ch;margin:0;position:relative;padding-left:clamp(26px,3vw,44px)}
.fw-quote::before{content:"\201C";position:absolute;left:0;top:-2px;color:var(--crimson);font-style:normal}
.fw-attr{margin-top:22px;font-family:var(--font-body);font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-60);padding-left:clamp(26px,3vw,44px)}
.fw-attr .fw-name{color:var(--ink)}
.fw-attr a{color:var(--crimson);text-decoration:none;text-transform:none;letter-spacing:.04em}
.fw-attr a:hover,.fw-attr a:focus-visible{text-decoration:underline}
.fw-dots{display:flex;gap:8px;margin-top:24px;padding-left:clamp(26px,3vw,44px)}
.fw-dot{width:26px;height:26px;border:0;border-radius:50%;background:none;cursor:pointer;padding:0;position:relative}
.fw-dot::after{content:"";position:absolute;inset:8px;border-radius:50%;border:1px solid var(--ink-60)}
.fw-dot[aria-pressed="true"]::after{background:var(--crimson);border-color:var(--crimson)}
.fw-dot:focus-visible{outline:2px solid var(--crimson);outline-offset:2px}
/* 10 · Hero sound — one quiet invitation (two pulses, then still) */
@keyframes hs-pulse{0%{box-shadow:0 0 0 0 rgba(255,255,255,.32)}100%{box-shadow:0 0 0 16px rgba(255,255,255,0)}}
.hero-sound:not([hidden]){animation:hs-pulse 1.9s var(--ease) .9s 2;border-radius:50%}
@media(prefers-reduced-motion:reduce){.hero-sound:not([hidden]){animation:none}}

/* ════════════════════ ROUTER / VIEWS ═════════════════════════════════════ */
main{display:block}
.view{display:none}
.view.active{display:block}
#veil{
  position:fixed;inset:0;background:var(--ink);z-index:180;
  transform:scaleY(0);transform-origin:bottom;pointer-events:none;
}
#veilEdge{
  position:fixed;left:0;top:0;width:100%;height:2px;background:var(--crimson);
  z-index:181;transform:translateY(105vh);opacity:0;pointer-events:none;
}

/* ════════════════════ SIGNATURE FX LAYER ════════════════════════════════ */
#progress{position:fixed;top:0;left:0;height:2px;width:100%;transform:scaleX(0);transform-origin:left;background:var(--crimson);z-index:140;pointer-events:none}

/* First-visit entrance — shown only when html.intro is set pre-paint.
   CSS escape hatch guarantees it always lifts, even if scripts die. */
#intro{
  position:fixed;inset:0;z-index:390;background:var(--ink);display:none;
  flex-direction:column;align-items:center;justify-content:center;gap:22px;
}
html.intro #intro{display:flex;pointer-events:none;animation:introEscape .25s .65s var(--ease) forwards}
.intro-mark{font-family:var(--font-display);font-size:clamp(34px,5vw,56px);color:var(--paper);letter-spacing:.01em}
.intro-rule{width:120px;height:1px;background:var(--crimson);transform-origin:left}
@keyframes introEscape{to{opacity:0;visibility:hidden}}
html:not(.intro) #intro{display:none}
/* Keep complete watermark numerals inside the gutter throughout their 26% upward drift. */
.wm{
  position:absolute;right:var(--gutter);top:max(4%,calc(var(--gutter) + .26em));font-family:var(--font-display);font-style:italic;
  font-size:clamp(170px,26vw,400px);line-height:1;color:rgba(10,10,10,.04);
  pointer-events:none;user-select:none;z-index:0;
}
.on-ink .wm{color:rgba(255,255,255,.05)}
section{overflow:hidden}
.wrap{position:relative;z-index:1}

/* Masked word reveals */
.w{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.1em;margin-bottom:-.1em}
.wi{display:inline-block}

/* B.E.A.M. editorial stage styles live in the signature-scene stylesheet. */
#beam-h{display:inline-block;--beamu:1}
#beam-h::after{content:"";display:block;height:1px;width:92px;background:var(--crimson);margin-top:16px;transform:scaleX(var(--beamu));transform-origin:left center}

/* Editorial photography bands */
.band{margin:0;position:relative;height:clamp(320px,52vh,560px);border-radius:0;overflow:hidden;background:var(--ink-06)}
.on-ink .band{background:var(--paper-08)}
.band img{width:100%;height:100%;object-fit:cover;will-change:transform;backface-visibility:hidden}
.band .ph{position:absolute;inset:0;min-height:0;border-radius:0}
/* Full-bleed parallax bands — these figures/duo are pulled OUT of the centered .wrap
   (they were its only child) and sit directly in the full-width section, so width:100%
   runs them edge-to-edge with square corners, scrollbar-proof (no 100vw), and the
   figure[data-slot]{margin:0} reset can't offset them (Igor 2026-07-03). */
.band-full{width:100%}
.band-duo{display:grid;grid-template-columns:1fr 1fr;gap:clamp(18px,2.5vw,30px)}
.band-tall{height:clamp(380px,58vh,620px)}
/* Bands that must show their WHOLE image, uncut: the per-figure inline aspect-ratio
   (matched to the photo) drives the height, so object-fit:cover fills it exactly —
   no crop, no letterbox. Overrides the fixed .band/.band-hero/.band-tall heights.
   The cropping zoom-parallax is also removed from these (see JS). (Igor 2026-07-03) */
.band-whole{height:auto!important}
/* Realty band — taller, to fill the space and give the parallax room (Igor 2026-07-03) */
.band-hero{height:clamp(460px,76vh,880px)}
@media(max-width:760px){.band-duo{grid-template-columns:1fr}.band-hero{height:clamp(340px,52vh,520px)}}

/* Selected Work is a true grid: three properties per desktop row, two on tablet,
   one on mobile. There is deliberately no horizontal overflow or drag behavior. */
.work-grid-wrap{margin-top:54px}
.work-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,2vw,28px);max-width:var(--w);margin:0 auto;padding:0 var(--gutter)}
.work-card{min-width:0;border:1px solid var(--paper-18);border-radius:var(--r);overflow:hidden;background:var(--paper-08);display:flex;flex-direction:column;transform:translateZ(0);transition:border-color .4s var(--ease),transform .5s var(--ease),box-shadow .5s var(--ease)}
a.work-card:hover,a.work-card:focus-visible{border-color:var(--crimson);box-shadow:0 34px 76px -38px rgba(0,0,0,.9)}
.work-media{aspect-ratio:16/10;position:relative;overflow:hidden;margin:0;flex:none}
.work-media img{width:100%;height:100%;object-fit:cover;transition:transform .9s var(--ease)}
@media(hover:hover) and (pointer:fine){
  a.work-card:hover{transform:translateY(-10px)}
  a.work-card:hover .work-media img{transform:scale(1.045)}
}
a.work-card:focus-visible{transform:translateY(-8px);outline-offset:5px}
.withheld-fill{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:repeating-linear-gradient(135deg,transparent 0 16px,rgba(255,255,255,.045) 16px 17px)}
[data-slot].loaded .withheld-fill{display:none}
.tag-chip{font-size:9.5px;font-weight:700;letter-spacing:.26em;text-transform:uppercase;color:var(--paper-45);border:1px solid var(--paper-18);border-radius:999px;padding:7px 16px}
.work-body{padding:22px 24px 24px;display:flex;flex-direction:column;gap:7px;flex:1}
.work-tag{font-size:10px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:var(--crimson)}
.work-name{font-family:var(--font-display);font-size:23px;color:var(--paper);line-height:1.2}
.work-meta{font-size:13px;color:var(--paper-45);line-height:1.5}
.work-link{margin-top:14px;font-size:11px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--paper-70)}
.work-link .arrow{color:var(--crimson);font-family:var(--font-display);font-style:italic}
@media(max-width:900px){.work-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:560px){.work-grid{grid-template-columns:1fr}}

/* Quiet crimson breath on ink CTA bands */
.cta-band{overflow:hidden}
.on-ink.cta-band::after{
  content:"";position:absolute;inset:-40%;pointer-events:none;
  background:radial-gradient(circle at 28% 55%, rgba(167,0,8,.09), transparent 44%);
  animation:glowdrift 18s var(--ease) infinite alternate;
}
@keyframes glowdrift{from{transform:translate3d(-6%,-4%,0)}to{transform:translate3d(9%,7%,0)}}
@media(prefers-reduced-motion:reduce){.on-ink.cta-band::after{animation:none}}

section{padding:clamp(72px,10vw,128px) 0;position:relative}
.on-ink{background:var(--ink);color:var(--paper)}

/* ════════════════════ HERO (HOME) ════════════════════════════════════════ */
.hero{min-height:100svh;display:flex;align-items:center;padding:0;background:var(--ink);color:var(--paper);position:relative;overflow:hidden}
.hero-media,.hero-ph{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
/* Poster and film share the same opening shot and bottom-right framing. The film's
   B&Co. mark is part of its pixels, so centered cover crops would cut the mark. */
.hero-media{object-position:100% 100%}
.hero-ph{background:var(--ink)}
video.hero-media{opacity:0;transition:opacity .7s var(--ease)}
video.hero-media.live{opacity:1}
/* YouTube embed fallback (double-clicked file only) — same reveal contract */
.hero-yt{position:absolute;inset:0;overflow:hidden;pointer-events:none;opacity:0;transition:opacity 1.6s var(--ease)}
.hero-yt.live{opacity:1}
.hero-yt iframe{
  position:absolute;top:50%;left:50%;border:0;
  width:max(100vw,177.78vh);height:max(100vh,56.25vw);
  transform:translate(-50%,-50%);
}
.hero-scrim{position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,10,10,.42) 0%,rgba(10,10,10,.28) 45%,rgba(10,10,10,.82) 100%)}
.hero-media-trigger{position:absolute;inset:0;z-index:1;border:0;padding:0;background:transparent;cursor:zoom-in}
.hero-media-trigger:focus-visible{outline:2px solid var(--paper);outline-offset:-8px}
.image-lightbox{position:fixed;inset:0;z-index:450;display:flex;align-items:center;justify-content:center;padding:clamp(20px,4vw,56px);background:rgba(10,10,10,.94);opacity:0;visibility:hidden;pointer-events:none;transition:opacity .28s var(--ease),visibility .28s var(--ease)}
.image-lightbox.open{opacity:1;visibility:visible;pointer-events:auto}
.image-lightbox img{display:block;max-width:min(1600px,94vw);max-height:88vh;object-fit:contain;box-shadow:0 24px 90px rgba(0,0,0,.62)}
.image-lightbox-close{position:absolute;top:20px;right:24px;width:46px;height:46px;border:1px solid rgba(255,255,255,.38);border-radius:50%;background:rgba(10,10,10,.48);color:var(--paper);font-size:28px;line-height:1;cursor:pointer}
.image-lightbox-close:hover,.image-lightbox-close:focus-visible{background:var(--crimson);border-color:var(--crimson);outline:none}
body.image-lightbox-open{overflow:hidden}
/* Vertically centred (raised out of the old bottom-hug) so the block fills the
   space under the header rather than sinking to the bottom (Igor 2026-07-03). */
.hero-inner{position:relative;z-index:2;width:100%;max-width:var(--w);margin:0 auto;padding:96px var(--gutter) 84px}
.hero h1{color:var(--paper);max-width:11ch}
.hero .lede{margin-top:26px;color:var(--paper);text-shadow:0 1px 24px rgba(10,10,10,.5)}
.hero-cta{display:flex;gap:16px;margin-top:44px;flex-wrap:wrap}
/* The hero carries a single CTA as of 2026-07-26 — the second, ghost-style button
   was removed. The ecosystem section it jumped to is unchanged and is still reached
   by scrolling. The fixed width stays deliberately: it holds the lone button at a
   designed size instead of letting it shrink to its label, and the integer
   line-height keeps it on a whole-pixel box (34px padding + 2px border + 18px line
   = 54px) (Igor 2026-07-26). */
.hero-cta .btn{width:284px;min-width:284px;box-sizing:border-box;justify-content:center;line-height:18px}
@media(max-width:400px){.hero-cta .btn{width:100%;min-width:0}}
/* Hero film sound — a discreet icon top-right, no chip (Igor 2026-07-03): just
   the speaker, muted / crossed-out by default. One click turns the film's sound
   on (the icon swaps to the sound-wave glyph). */
.hero-sound{
  position:absolute;right:var(--gutter);top:calc(72px + 18px);z-index:4;
  display:inline-flex;align-items:center;justify-content:center;cursor:pointer;
  padding:6px;border:0;background:none;color:var(--paper);opacity:.5;
  transition:opacity .35s var(--ease),transform .35s var(--ease);
}
.hero-sound[hidden]{display:none}
.hero-sound:hover{opacity:1;transform:translateY(-1px)}
.hero-sound:focus-visible{outline:2px solid var(--crimson);outline-offset:4px;opacity:1;border-radius:6px}
.hero-sound svg{width:23px;height:23px;display:block;flex:none;filter:drop-shadow(0 1px 4px rgba(10,10,10,.6))}
.hero-sound .hs-on{display:none}
.hero-sound[aria-pressed="true"] .hs-off{display:none}
.hero-sound[aria-pressed="true"] .hs-on{display:block}
.hero-sound[aria-pressed="true"]{opacity:.9}
@media(max-width:620px){ .hero-sound{top:calc(72px + 12px)} }
.ph-tag{
  position:absolute;left:18px;bottom:18px;z-index:4;display:inline-flex;gap:10px;align-items:center;
  background:rgba(10,10,10,.78);border:1px dashed var(--paper-18);border-radius:12px;padding:9px 14px;max-width:min(92%,640px);
}
.ph-tag b{font-size:9px;letter-spacing:.2em;color:var(--crimson);text-transform:uppercase;font-weight:700;white-space:nowrap}
.ph-tag code{font-family:var(--font-mono);font-size:10.5px;color:var(--paper-70);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ════════════════════ BUTTONS ════════════════════════════════════════════ */
.btn{
  position:relative;isolation:isolate;overflow:hidden;
  display:inline-flex;align-items:center;justify-content:center;gap:12px;cursor:pointer;
  font-family:var(--font-body);font-size:11.5px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;
  padding:17px 30px;border:0;border-radius:999px;background:transparent;color:var(--ink);
  text-shadow:0 1px 1px rgba(255,255,255,.45);
  box-shadow:0 5px 18px rgba(10,10,10,.12),0 1px 3px rgba(10,10,10,.08);
  transition:color .3s var(--ease),box-shadow .3s var(--ease),transform .3s var(--ease);
}
/* One flagship button material, derived from the 74 Berkery liquid-glass control:
   pale refractive glass at rest, crimson glass only on hover/focus. Negative
   pseudo-element layers keep every existing direct text node above the material,
   so all legacy .btn variants share this exact appearance without markup drift. */
.btn::before{
  content:"";position:absolute;inset:0;z-index:-2;border-radius:inherit;
  background:
    radial-gradient(120% 180% at 8% -70%,rgba(255,255,255,.62) 0 18%,transparent 48%),
    radial-gradient(105% 175% at 96% 150%,rgba(255,255,255,.24) 0 16%,transparent 50%),
    linear-gradient(112deg,transparent 22%,rgba(255,255,255,.16) 43%,transparent 62%);
  -webkit-backdrop-filter:blur(3px) saturate(1.6);backdrop-filter:blur(3px) saturate(1.6);
}
.btn::after{
  content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;pointer-events:none;
  background:
    linear-gradient(180deg,rgba(255,255,255,.72) 0%,rgba(255,255,255,.30) 34%,rgba(255,255,255,.10) 54%,rgba(255,255,255,.18) 100%),
    linear-gradient(177deg,rgba(255,255,255,.56) 0%,rgba(244,242,238,.42) 50%,rgba(220,218,214,.34) 100%);
  box-shadow:inset 1.5px 1.5px 2px rgba(255,255,255,.88),inset -1px -1.5px 2px rgba(255,255,255,.30),inset 0 0 0 1px rgba(255,255,255,.42);
  transition:background .3s var(--ease),box-shadow .3s var(--ease);
}
.btn-crimson,.btn-ghost,.btn-ink{background:transparent;color:var(--ink)}
.btn .amp{color:var(--crimson)!important;transition:color .3s var(--ease)}
.btn:hover,.btn:focus-visible{
  color:var(--paper);text-shadow:0 1px 2px rgba(70,0,4,.55);transform:translateY(-2px);
  box-shadow:0 9px 25px rgba(10,10,10,.18),0 2px 4px rgba(10,10,10,.10);
}
.btn:hover::after,.btn:focus-visible::after{
  background:
    linear-gradient(180deg,rgba(255,255,255,.32) 0%,rgba(255,255,255,.07) 34%,rgba(255,255,255,0) 52%),
    linear-gradient(177deg,rgba(214,30,38,.88) 0%,rgba(176,4,12,.92) 48%,rgba(143,0,7,.96) 100%);
  box-shadow:inset 1.5px 1.5px 2px rgba(255,255,255,.76),inset -1px -1.5px 2px rgba(255,255,255,.24),inset 0 0 0 1px rgba(255,255,255,.22);
}
.btn:hover .amp,.btn:focus-visible .amp{color:var(--paper)!important}
.btn:active{transform:translateY(0)}
.btn:disabled{opacity:.58;cursor:wait;transform:none}
.btn .arrow{font-family:var(--font-display);font-style:italic;font-size:1.25em;line-height:0}

/* ════════════════════ SHARED LAYOUT BLOCKS ═══════════════════════════════ */
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(36px,6vw,90px);align-items:start}
@media(max-width:860px){.split{grid-template-columns:1fr}}
/* B.E.A.M. section — the graphic column is widened and the constellation is
   vertically centered so it reads at the scale of the text beside it, not as a
   small tile in a half-column (Igor 2026-07-03). Collapses to one column on mobile. */
.split-beam{grid-template-columns:minmax(0,1fr) minmax(0,1.42fr);align-items:center}
@media(max-width:1279px){
  .split-beam{grid-template-columns:1fr;align-items:start}
  .split-beam .beam-viz{justify-self:center;max-width:800px;margin-top:18px}
}
@media(max-width:860px){.split-beam .beam-viz{justify-self:start;max-width:600px;margin-top:10px}}
.rule-list{list-style:none}
.rule-list li{padding:22px 0;position:relative}
.rule-list li::before{
  content:"";position:absolute;top:0;left:0;width:100%;height:1px;
  background:var(--ink-14);transform:scaleX(var(--lw,1));transform-origin:left;
}
.rule-list li:first-child{padding-top:0}
.rule-list li:first-child::before{display:none}
.on-ink .rule-list li::before{background:var(--paper-18)}
.rule-list p{color:var(--ink-60);margin-top:6px;font-size:15px;max-width:54ch}
.on-ink .rule-list p{color:var(--paper-70)}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,2.5vw,30px)}
@media(max-width:900px){.grid-3{grid-template-columns:1fr}}
.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(18px,2.5vw,30px)}
@media(max-width:760px){.grid-2{grid-template-columns:1fr}}
.town{border:1px solid var(--paper-18);border-radius:12px;padding:15px 20px;font-family:var(--font-body);font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--paper-70);text-align:center}
a.town{transition:border-color .3s,color .3s}
a.town:hover,a.town:focus-visible{border-color:var(--crimson);color:var(--paper);outline:none}
a.town[aria-current="page"]{border-color:var(--crimson);color:var(--paper)}
/* ── The Journal (blog): index cards + long-form article ─────────────────── */
.jr-list{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,2.5vw,34px)}
@media(max-width:900px){.jr-list{grid-template-columns:1fr;max-width:520px;margin-left:auto;margin-right:auto}}
.jr-card{display:flex;flex-direction:column;border:1px solid var(--ink-14);border-radius:var(--r);overflow:hidden;background:var(--paper);transition:transform .55s var(--ease),box-shadow .55s var(--ease)}
.jr-card:hover{transform:translateY(-5px);box-shadow:0 34px 66px -42px rgba(10,10,10,.42)}
.jr-card-media{aspect-ratio:3/2;overflow:hidden;background:var(--ink-06)}
.jr-card-media img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .9s var(--ease)}
.jr-card:hover .jr-card-media img{transform:scale(1.045)}
.jr-card-body{padding:22px 24px 26px;display:flex;flex-direction:column;gap:11px;flex:1}
.jr-kicker{font-size:10.5px;font-weight:700;letter-spacing:.22em;text-transform:uppercase}
.jr-card h3{font-family:var(--font-display);font-weight:600;font-size:clamp(21px,2.1vw,26px);line-height:1.16;color:var(--ink)}
.jr-dek{color:var(--ink-60);font-size:14.5px;line-height:1.55;flex:1}
.jr-meta{font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-60)}
.jr-more{font-size:11px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--ink)}
.jr-more .arrow{color:var(--crimson);font-family:var(--font-display);font-style:italic;margin-left:6px}
.article-head,.article-standfirst,.article-body.article{max-width:720px;margin-left:auto;margin-right:auto;padding-left:var(--gutter);padding-right:var(--gutter)}
/* Journal articles are routed views with section padding intentionally reset to zero.
   Restore a header-safe opening inset so the fixed 72px navigation never covers the
   eyebrow or title, including narrow screens where a title wraps to multiple lines. */
section.view[id^="view-jr-"] .article-head{padding-top:clamp(118px,12vw,156px)}
.article-head h1{font-size:clamp(34px,5vw,60px);max-width:17ch}
/* Article hero + inline images are full-bleed, square-cornered parallax .band elements (edge-to-
   edge, no rounded corners — the site-wide parallax rule); this just gives them vertical rhythm. */
article>figure.band{margin:clamp(30px,4vw,52px) 0}
.article-byline{margin-top:16px;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-60)}
.article-standfirst{font-family:var(--font-display);font-size:clamp(21px,2.5vw,29px);line-height:1.4;color:var(--ink);margin-top:clamp(30px,4vw,46px)}
.article-body{margin-top:clamp(26px,3.4vw,42px)}
.article-body h2{font-family:var(--font-display);font-weight:600;font-size:clamp(22px,2.6vw,30px);line-height:1.2;color:var(--ink);margin:clamp(34px,4vw,50px) 0 14px}
.article-body p{color:rgba(10,10,10,.82);font-size:17px;line-height:1.75;margin-bottom:18px}
.article-pull{font-family:var(--font-display);font-style:italic;font-size:clamp(25px,3.2vw,38px);line-height:1.28;color:var(--ink);border-top:1px solid var(--ink-14);border-bottom:1px solid var(--ink-14);padding:clamp(26px,3.2vw,42px) 0;margin:clamp(34px,4.2vw,54px) 0}
.article-foot{margin-top:clamp(38px,5vw,62px);padding:clamp(26px,3vw,38px) 0 clamp(52px,6vw,84px);border-top:1px solid var(--ink-14);display:flex;flex-wrap:wrap;gap:18px 26px;align-items:center;justify-content:space-between}
.article-back{font-size:11px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-60)}
.article-back:hover{color:var(--crimson)}

/* Cards — ecosystem "One brand. Three disciplines." (Igor 2026-07-03): a LARGE
   CENTERED logo over centered role + description, NO outline/border. They're
   links, so the only hover cue is a soft lift + the go-arrow — never a box. */
.disc-card{
  border:0;border-radius:var(--r);padding:clamp(20px,2.2vw,34px);
  display:flex;flex-direction:column;align-items:center;text-align:center;
  min-height:360px;background:transparent;
}
.disc-logo{height:clamp(118px,12.5vw,168px);background:none;border-radius:0;display:flex;align-items:center;justify-content:center;margin:0 0 22px;overflow:visible;flex:none}
figure.disc-logo img{max-height:100%;max-width:100%;width:auto;height:auto;object-fit:contain;object-position:center;border-radius:0}
.disc-logo .logo-fallback{font-family:var(--font-display);font-size:32px;line-height:1.2;color:var(--ink);text-align:center;padding:0}
[data-slot].loaded .logo-fallback{display:none}
/* Discipline lockups — the discipline name alone, set large in the display serif and
   centered over the card text below it (Igor 2026-07-04: drop the "B&Co." logo image;
   keep just Realty / Design | Build / Surfaces, larger and centered). */
.disc-name{font-family:var(--font-display);font-weight:600;color:var(--ink);
  font-size:clamp(38px,4.6vw,60px);line-height:1.02;letter-spacing:-.01em;text-align:center;
  /* FIXED height (not min-height) so a 2-line "Design | Build" and the single-word lockups all
     occupy the same box → the role + description below start at the same y across the three cards
     (top-aligned); grid-equal-height + the flex-grow description keeps the bottoms aligned too. */
  height:clamp(128px,13vw,168px);display:flex;align-items:center;justify-content:center;margin:0 0 22px}
.disc-name .pipe{font-weight:300;opacity:.5;padding:0 .06em}
/* Each vertical keeps its own signature (Igor 2026-07-05): Realty = black ink; Design | Build =
   warm grey #9b9292; Surfaces = pale stone #cabdb7. Scoped to the homepage lockup so the rest of
   the site keeps the locked crimson accent. */
.dn-realty{color:var(--ink)}
.dn-db{color:#9b9292}
.dn-surfaces{color:#cabdb7}
.disc-role{font-size:11.5px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:var(--ink-60);margin-bottom:14px}
.disc-card p{color:var(--ink-60);font-size:14.5px;line-height:1.62;flex-grow:1;max-width:38ch}
.disc-card .go{margin-top:24px;font-size:11px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-35);transition:color .3s}
.disc-card:hover .go{color:var(--ink)}
.disc-card .go .arrow{color:var(--crimson);font-family:var(--font-display);font-style:italic;margin-left:8px}

/* Differentiators (paper · names rendered in BLACK per canon) */
.diff{padding:30px 6px 34px;position:relative}
.diff::before{
  content:"";position:absolute;top:0;left:0;width:100%;height:1px;
  background:var(--ink-14);transform:scaleX(var(--lw,1));transform-origin:left;
}
.diff .idx{font-family:var(--font-display);font-style:italic;font-size:14px;color:var(--crimson)}
.diff h3{color:var(--ink);font-weight:600;font-size:22px;margin:14px 0 10px}
.diff p{color:var(--ink-60);font-size:14.5px;max-width:38ch}
/* Inverted differentiators (ink ground) — the home "03 · The Difference" band runs
   black end to end (Igor 2026-07-25). Scoped to .on-ink so every paper-ground .diff
   grid — Realty's "The Work", Design | Build, Surfaces — is untouched. The crimson
   punctuation needs no override: .idx and the eyebrow are #a70008 on every ground. */
.on-ink .diff::before{background:var(--paper-18)}
.on-ink .diff h3{color:var(--paper)}
.on-ink .diff p{color:var(--paper-70)}
/* Titles on an ink ground are set in Avenir Next Demi Bold; only the large
   headings (h1/h2) stay Didot. The crimson Didot-italic indices (.idx/.num)
   and the brand lockups are untouched. Igor 2026-07-25. */
.on-ink h3,.on-ink .work-name{font-family:var(--font-body);font-weight:600;letter-spacing:-.008em}

/* Values strip */
.values-row{display:flex;flex-wrap:wrap;gap:14px 0;align-items:baseline;justify-content:space-between;border-bottom:1px solid var(--ink-14);padding:34px 0}
.values-row span{font-family:var(--font-display);font-size:clamp(17px,1.9vw,23px);letter-spacing:.02em}
.values-row i{font-style:normal;color:var(--crimson);padding:0 clamp(8px,1.6vw,22px)}
@media(max-width:700px){.values-row{flex-direction:column;gap:10px}.values-row i{display:none}}

/* Pull-quote */
.pull{font-family:var(--font-display);font-size:clamp(34px,4.6vw,60px);line-height:1.12;color:var(--ink);max-width:13ch}
.period{color:var(--crimson)}

/* Asset placeholder (paper + ink variants) */
.ph{
  border:1px dashed var(--ink-35);border-radius:var(--r);min-height:300px;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:12px;text-align:center;padding:30px;background:var(--ink-06);
}
.on-ink .ph{border-color:var(--paper-18);background:var(--paper-08)}
.ph b{font-size:9.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--crimson);font-weight:700}
.ph code{font-family:var(--font-mono);font-size:11px;color:var(--ink-60);word-break:break-all;max-width:46ch}
.on-ink .ph code{color:var(--paper-70)}
.ph small{font-size:11px;color:var(--ink-60);max-width:40ch}
.on-ink .ph small{color:var(--paper-45)}
figure[data-slot]{margin:0}
/* The 18px --r rounding applies to slot imagery in general, but NOT the magazine
   preview covers — those are square-edged like a real magazine (Igor 2026-07-04).
   Without this exclusion the cover <img> won this rule (specificity 0,2,2) over
   .mag-book img (0,1,1) and rendered 18px-rounded despite .mag-book being square. */
figure[data-slot]:not(.disc-logo):not(.mag-cover):not(.surf-row) img{border-radius:var(--r)}
.work-media img,.band img{border-radius:0}
/* Surfaces "Material studies" — one source-faithful transparent composition with
   its own approved spacing. It stays at native width on large screens and scales
   proportionally below it, so no label or swatch can overlap or crop. */
.surf-material-grid{margin:0 auto;max-width:1536px;aspect-ratio:1536/717;overflow:hidden;position:relative}
.surf-material-grid img{display:block;width:100%;height:auto;border-radius:0;pointer-events:none}
/* The approved overview is one source image, but each of its eight material studies
   is a real control: a source-aligned overlay opens that exact catalogue page without
   changing the approved composition or its responsive crop. */
.surf-material-hotspots{position:absolute;inset:0;z-index:1}
.surf-material-hotspot{display:block;position:absolute;width:22.2%;min-width:0;min-height:0;border:0;padding:0;background:transparent;color:inherit;cursor:pointer;appearance:none;touch-action:manipulation;-webkit-tap-highlight-color:transparent}
.surf-material-hotspot--top{top:0;height:45.05%}
.surf-material-hotspot--bottom{top:53.56%;height:43.67%}
.surf-material-hotspot--c1{left:2.995%}
.surf-material-hotspot--c2{left:27.344%}
.surf-material-hotspot--c3{left:51.693%}
.surf-material-hotspot--c4{left:76.042%}
/* Surfaces catalogue controls receive their neutral lift and focus treatment in the material flow stylesheet. */
section.view{padding:0}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
[data-slot] img{display:none}
[data-slot].loaded img{display:block}
[data-slot].loaded .ph{display:none}
[data-slot].loaded .wordmark{display:none}

/* Page heros (interior) */
.page-hero{padding-top:clamp(150px,18vh,200px)}
.page-hero .eyebrow{margin-bottom:18px}
.page-hero h1{max-width:14ch}
.page-hero .lede{margin-top:22px}

/* Chips */
.chips{display:flex;flex-wrap:wrap;gap:10px}
.chip{border:1px solid var(--ink-14);border-radius:999px;padding:10px 18px;font-size:12.5px;font-weight:500;letter-spacing:.06em}
.on-ink .chip{border-color:var(--paper-18);color:var(--paper-70)}

/* Stats / facts */
/* Facts strip — centered, balanced wraps, a crimson hairline under each figure
   so it reads as intentional editorial rather than a plain data row (Igor 2026-07-03). */
.facts{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--ink-14);border:1px solid var(--ink-14);border-radius:var(--r);overflow:hidden;margin-top:54px}
.facts>div{background:var(--paper);padding:32px 24px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;min-height:158px}
.facts b{display:block;font-family:var(--font-display);font-size:clamp(20px,2vw,27px);font-weight:400;line-height:1.12}
/* The self-hosted Didot ships oldstyle (x-height) figures only — no lnum feature
   — so "$1M" set its digits visibly smaller than the cap M. .fig scales the
   numeric runs back to cap height (Igor 2026-07-25: numbers as large as the M).
   Measured from the rendered page: an oldstyle digit is .1786em of ink, the cap
   M is .30em, so cap parity needs 1.68em — 1.4em left the digits short while the
   dollar sign, then still inside the span, towered 66% over the cap and made the
   whole tile read shrunken. The $ now sets at 1em with everything else. */
.facts b .fig{font-size:1.68em;line-height:1}
.facts b::after{content:"";display:block;width:24px;height:2px;background:var(--crimson);border-radius:2px;margin:12px auto 11px;opacity:.85}
.facts span{font-size:12px;color:var(--ink-60);letter-spacing:.05em;line-height:1.55;text-wrap:balance;max-width:26ch}
@media(max-width:900px){.facts{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.facts{grid-template-columns:1fr}.facts>div{min-height:0;padding:26px 24px}}

/* Realty page hero — full-bleed minimalist bedroom, black display type set into
   the arch, subtext dropped to the floor line (Igor 2026-07-03, per his mockup). */
.realty-hero{position:relative;overflow:hidden;background:var(--paper);width:100%;aspect-ratio:3/2;min-height:600px;max-height:97vh}
.realty-hero .rh-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 50%;z-index:0;border-radius:0}
/* Realty hero in PHOTO mode — the header IS Igor's exact lobby image (headline + lede
   baked in). The hero box matches the image's aspect (4000/3091) so the whole image
   and its text show uncropped; the scrim is dropped, and the live headline/lede stay
   in the DOM as screen-reader-only text so semantics/SEO survive without the text
   visually doubling over the baked lockup (Igor 2026-07-03). */
.realty-hero.rh-photo{aspect-ratio:4000/3091;min-height:0;max-height:none;background:var(--paper)}
.realty-hero.rh-photo .rh-bg{object-fit:cover;object-position:center;will-change:transform;backface-visibility:hidden}
.realty-hero.rh-photo .rh-scrim{display:none}
.realty-hero.rh-photo .rh-content{position:absolute;width:1px;height:1px;padding:0;margin:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
/* On narrow screens the aspect-matched lobby image is short, so its baked headline
   lands under the 72px fixed header. Drop the whole hero below the header (the header
   covers the margin — no visible gap) so the lockup always clears it (Igor 2026-07-04). */
@media(max-width:900px){.realty-hero.rh-photo{margin-top:74px}}
.realty-hero .rh-scrim{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(90deg,rgba(255,255,255,.32),rgba(255,255,255,0) 42%),
             linear-gradient(0deg,rgba(255,255,255,.44),rgba(255,255,255,0) 22%)}
.rh-inner{position:absolute;inset:0;z-index:2;display:flex}
.rh-content{width:100%;display:flex;flex-direction:column;position:relative;
  padding-top:clamp(80px,9vh,104px);padding-bottom:clamp(24px,3.2vw,50px)}
.rh-eyebrow{color:var(--ink);text-transform:none;letter-spacing:.01em;margin:0;align-self:flex-start;
  font-family:var(--font-body);font-weight:600;font-size:clamp(13px,1.3vw,15.5px)}
.rh-eyebrow::after{display:none}
.rh-title{color:var(--ink);text-align:right;align-self:flex-end;max-width:13ch;
  font-size:clamp(44px,8.4vw,116px);line-height:1.0;margin-top:clamp(4px,1.2vh,14px)}
.rh-lede{color:rgba(10,10,10,.88);text-align:right;align-self:flex-end;max-width:46ch;
  margin-top:auto;font-size:clamp(17px,1.75vw,23px);line-height:1.5;text-shadow:0 1px 14px rgba(255,255,255,.6)}
@media(max-width:720px){
  .realty-hero{aspect-ratio:auto;min-height:clamp(500px,80vh,680px);max-height:none}
  .rh-content{padding-top:clamp(86px,12vh,120px)}
  .rh-title{text-align:left;align-self:flex-start;max-width:14ch;font-size:clamp(38px,10.5vw,60px)}
  .rh-lede{text-align:left;align-self:flex-start;font-size:clamp(16px,4.4vw,20px)}
  .realty-hero .rh-scrim{background:linear-gradient(0deg,rgba(255,255,255,.6),rgba(255,255,255,.12) 42%),linear-gradient(90deg,rgba(255,255,255,.48),rgba(255,255,255,0) 62%)}
}

/* Design | Build page hero — full-bleed golden-hour château, parallax image,
   text overlaid legibly on a dark scrim (Igor 2026-07-03, replaced the logo). */
.db-hero{position:relative;overflow:hidden;background:var(--ink);min-height:clamp(560px,86vh,860px);display:flex}
.db-hero .db-hero-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 42%;z-index:0;border-radius:0;will-change:transform;backface-visibility:hidden}
.db-hero .db-hero-scrim{position:absolute;inset:0;bottom:-1px;z-index:1;pointer-events:none;
  background:linear-gradient(100deg,rgba(10,10,10,.80),rgba(10,10,10,.44) 42%,rgba(10,10,10,0) 68%),
             linear-gradient(0deg,#0a0a0a,rgba(10,10,10,.42) 18%,rgba(10,10,10,0) 52%)}
/* ^ the bottom layer lands on solid ink so the inverted section below (D|B Process,
   Surfaces Collection) fades out of the hero photograph with no visible seam. */
.db-hero-inner{position:relative;z-index:2;width:100%;display:flex;align-items:center}
.db-hero-content{width:100%;padding-top:clamp(96px,13vh,148px);padding-bottom:clamp(40px,6vh,78px)}
.db-hero-eyebrow{color:var(--paper)}
/* The ampersand carries the one locked red on every ground, dark included — the
   --crimson-on-dark lightening (#d81f28) was retired 2026-07-25: #a70008 is the
   only red in the system, and at lockup size it holds against ink. */
.db-hero-eyebrow .amp,
footer .amp,.on-ink .amp{color:var(--crimson)}
.db-hero-eyebrow::after{background:var(--crimson);opacity:.95}
.db-hero h1{color:var(--paper);max-width:17ch;text-shadow:0 2px 26px rgba(10,10,10,.55)}
.db-hero-lede{color:var(--paper);max-width:52ch;margin-top:22px;text-shadow:0 1px 18px rgba(10,10,10,.65)}
@media(max-width:720px){
  .db-hero{min-height:clamp(520px,82vh,720px)}
  .db-hero .db-hero-scrim{background:linear-gradient(0deg,#0a0a0a,rgba(10,10,10,.5) 24%,rgba(10,10,10,0) 58%),linear-gradient(100deg,rgba(10,10,10,.6),rgba(10,10,10,0) 70%)}
}

/* Process rail */
.rail{counter-reset:step;display:grid;grid-template-columns:repeat(5,1fr);gap:0;border-top:1px solid var(--ink-14)}
.rail>div{padding:26px 18px 8px;border-right:1px solid var(--ink-14);position:relative}
.rail>div:last-child{border-right:0}
.rail .idx{font-family:var(--font-display);font-style:italic;color:var(--crimson);font-size:14px}
.rail h3{font-size:18px;margin:10px 0 8px}
.rail p{font-size:13.5px;color:var(--ink-60)}
@media(max-width:900px){.rail{grid-template-columns:1fr}.rail>div{border-right:0;border-bottom:1px solid var(--ink-14);padding:22px 0}}
/* Inverted rail (ink ground) — D|B "The Process" runs black (Igor 2026-07-25);
   the crimson indices stand, the hairlines lift to paper-18. */
.on-ink .rail{border-top-color:var(--paper-18)}
.on-ink .rail>div{border-right-color:var(--paper-18)}
.on-ink .rail p{color:var(--paper-70)}
@media(max-width:900px){.on-ink .rail>div{border-bottom-color:var(--paper-18)}}

/* Magazine bands + catalogue/portfolio grids (2026-07-02) */
[hidden]{display:none!important}
.mag-band{display:grid;grid-template-columns:minmax(0,.72fr) minmax(0,1fr);gap:clamp(36px,5vw,80px);align-items:center}
@media(max-width:860px){.mag-band{grid-template-columns:1fr}}
/* Magazine preview — a dimensional publication you can pick up, not a flat card.
   The figure keeps its scroll-drift (data-plx); the inner .mag-book carries the
   3-D tilt, spine, page-stack edge and the hover curl. Click / Enter opens the
   flipbook (JS: [data-mag-open]). Same treatment on all three publications. (Igor 2026-07-04) */
.mag-cover{width:100%;max-width:430px;margin:0;position:relative;border:0;background:none;box-shadow:none;
  border-radius:0;overflow:visible;cursor:pointer;perspective:1700px}
.mag-cover:focus:not(:focus-visible){outline:none}
.mag-book{position:relative;display:block;transform-style:preserve-3d;
  /* Gentle resting tilt (was -15deg — too steep; it foreshortened the top corner and made the
     light B&Co mark on the Surfaces cover read as clipped). -8deg keeps the 3-D book feel while
     showing the full cover mark on every publication. (Igor 2026-07-05) */
  transform:rotateY(-8deg);transition:transform .85s var(--ease),box-shadow .85s var(--ease);
  border-radius:0;aspect-ratio:.7727;
  box-shadow:0 30px 60px -34px rgba(10,10,10,.62),-2px 6px 18px -10px rgba(10,10,10,.3)}
.mag-cover:hover .mag-book,.mag-cover:focus-visible .mag-book{transform:rotateY(-4deg) translateY(-5px);
  box-shadow:0 46px 82px -38px rgba(10,10,10,.7),-2px 8px 22px -10px rgba(10,10,10,.34)}
.mag-book img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;border-radius:inherit;z-index:1}
.mag-cover .ph{position:absolute;inset:0;min-height:0;border-radius:inherit;border:0;z-index:0}
/* bound edge / spine (left) */
.mag-book::before{content:"";position:absolute;left:0;top:0;bottom:0;width:16px;z-index:3;
  border-radius:inherit;pointer-events:none;
  background:linear-gradient(90deg,rgba(0,0,0,.34),rgba(0,0,0,.08) 34%,transparent 64%),
             linear-gradient(90deg,rgba(255,255,255,.14),transparent 14%)}
/* stacked page edges (open side, right) */
.mag-pages{position:absolute;top:2.5%;bottom:2.5%;right:-6px;width:8px;z-index:0;
  border-radius:0;transform:translateZ(-1px);
  background:repeating-linear-gradient(90deg,#fbf9f4 0 1.5px,#d8d3c6 1.5px 2.6px)}
/* A lower-right paper curl lifts on hover/focus, with a softly shaded reverse.
   The full cover is visible at rest; all six previews use the same geometry. */
.mag-book img{clip-path:polygon(0 0,100% 0,100% 100%,100% 100%,0 100%);
  transition:clip-path .72s cubic-bezier(.22,.61,.36,1)}
.mag-book::after{content:"";position:absolute;right:0;bottom:0;width:0;height:0;z-index:4;
  pointer-events:none;clip-path:polygon(0 0,100% 0,0 100%);border-radius:0 0 0 5px;
  background:linear-gradient(135deg,#fffefa 3%,#f0ede6 38%,#d6d2c9 48%,#fffdf6 62%,#b8b3a8 100%);
  filter:drop-shadow(-3px -3px 4px rgba(0,0,0,.18));
  transition:width .72s cubic-bezier(.22,.61,.36,1),height .72s cubic-bezier(.22,.61,.36,1)}
.mag-cover:focus-visible .mag-book img{clip-path:polygon(0 0,100% 0,100% calc(100% - 52px),calc(100% - 52px) 100%,0 100%)}
.mag-cover:focus-visible .mag-book::after{width:52px;height:52px}
@media(hover:hover) and (pointer:fine){
  .mag-cover:hover .mag-book img{clip-path:polygon(0 0,100% 0,100% calc(100% - 52px),calc(100% - 52px) 100%,0 100%)}
  .mag-cover:hover .mag-book::after{width:52px;height:52px}
}
@media(prefers-reduced-motion:reduce){.mag-book,.mag-book img,.mag-book::after{transition:none}}

/* The publication meta line is now a single "Download PDF" affordance whose left
   edge aligns with the button above it. Same on all three magazines. (Igor 2026-07-04) */
.mag-meta{margin-top:18px}
.mag-dl{display:inline-flex;align-items:center;gap:9px;font-family:var(--font-body);
  font-size:11px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-60);
  border-bottom:1px solid var(--ink-14);padding:0 0 3px;transition:color .3s var(--ease),border-color .3s var(--ease)}
.mag-dl:hover,.mag-dl:focus-visible{color:var(--crimson);border-color:var(--crimson)}
.mag-dl svg{width:13px;height:13px;flex:none}
/* Gallery + D|B "Selected Projects" share ONE grid spec — 3 columns — so every property/project
   box is the SAME size on both pages (Igor 2026-07-05). Realty Gallery = 6 boxes → 2 rows of 3
   (four book estates then the two active listings); D|B = 6 boxes → residential row / commercial row. */
.cat-grid,.proj-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,1.8vw,24px)}
@media(max-width:1020px){.cat-grid,.proj-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.cat-grid,.proj-grid{grid-template-columns:1fr}}
/* Gallery/project cards are STATIC by default (no hover). Two exceptions carry the crimson hover
   cue: the Realty Gallery's active-listing anchors (→ their landing pages), and the D|B
   "Selected Projects" boxes, which open the Design | Build flipbook to that project's own page
   ([data-mag-open], JS-driven — same behavior as the Surfaces collection tiles). (Igor 2026-07-08) */
.cat-card{border:1px solid var(--ink-14);border-radius:var(--r);overflow:hidden;background:var(--paper);display:flex;flex-direction:column}
a.cat-card,.cat-card[data-mag-open]{text-decoration:none;color:inherit;transform:translateZ(0);
  transition:border-color .35s var(--ease),transform .5s var(--ease),box-shadow .5s var(--ease)}
a.cat-card:hover,.cat-card[data-mag-open]:hover,.cat-card[data-mag-open]:focus-visible{
  border-color:var(--crimson);transform:translateY(-7px)!important;box-shadow:0 28px 62px -38px rgba(10,10,10,.58)}
.cat-card[data-mag-open]{cursor:pointer}
.cat-card[data-mag-open]:focus{outline:none}
.cat-card[data-mag-open]:focus-visible{outline:2px solid var(--crimson);outline-offset:3px}
.cat-media{height:190px;position:relative;overflow:hidden;flex:none}
/* Realty keeps the base gallery framing. D|B uses its scoped whole-image card
   treatment below, per Igor's 2026-09-05 request for uniform uncropped buildings. */
.cat-media[data-slot] img{width:100%;height:100%;object-fit:cover;border-radius:0;transition:transform .9s var(--ease)}
a.cat-card:hover .cat-media img,.cat-card[data-mag-open]:hover .cat-media img,.cat-card[data-mag-open]:focus-visible .cat-media img{transform:scale(1.03)}
.cat-media .ph{position:absolute;inset:0;min-height:0;border-radius:0;border:0}
.cat-body{padding:16px 18px 19px}
.cat-tag{display:block;font-size:9.5px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:var(--crimson);margin-bottom:7px}
.cat-name{font-family:var(--font-display);font-weight:600;font-size:17.5px;line-height:1.25;color:var(--ink)}
.cat-line{margin-top:5px;font-size:12.5px;color:var(--ink-60);line-height:1.55}
.cat-sub{margin:46px 0 20px;display:flex;align-items:center;gap:14px;font-size:11px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--ink)}
.cat-sub:first-of-type{margin-top:44px}
.cat-sub::after{content:"";height:1px;flex:1;background:var(--ink-14)}

/* 04 · The Market — Bergen County live ticker (Igor 2026-07-06; replaces the
   "Values Become A Home" Three.js build). A quietly auto-rolling tape of Bergen County
   market metrics, hydrated from the SAME same-origin /data/market.json feed as the
   Realty strip. The body stays hidden until real, dated data is present — never a
   fabricated number. Vanilla JS: no GSAP, no Three.js. AUTO-ROLL ONLY (no controls);
   the rAF loop stops when the section leaves the viewport. Figures count up once on
   reveal. ▲ gains render green, ▼ declines crimson. Reduced-motion / no-data degrade
   to a static (or absent) rail. */
.bmt{padding:clamp(70px,10vh,130px) 0;display:flex;flex-direction:column;gap:clamp(40px,6vh,72px)}
.bmt-body[hidden]{display:none}
.bmt-body:not([hidden]){animation:bmtIn .7s ease both}
@keyframes bmtIn{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
.bmt-rail{position:relative;width:100%;overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
.bmt-track{display:flex;align-items:center;width:max-content;padding:12px 0;flex-wrap:wrap}
.bmt-rail.bmt-on .bmt-track{flex-wrap:nowrap}
.bmt-stat{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:10px;flex:0 0 auto;padding:6px clamp(18px,3vw,34px);min-width:180px}
.bmt-label{font-family:var(--font-body);font-size:11px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-60)}
.bmt-value{font-family:var(--font-body);font-weight:500;font-size:clamp(40px,5.6vw,64px);letter-spacing:-.005em;line-height:1.05;color:var(--ink);white-space:nowrap;font-variant-numeric:tabular-nums}
.bmt-delta{font-size:13px;color:var(--ink-60);letter-spacing:.02em}
.bmt-arrow{font-style:normal;font-weight:600}
.bmt-arrow.bmt-up{color:#1a7f43}
.bmt-arrow.bmt-down{color:var(--crimson)}
.bmt-note{font-size:12px;color:var(--ink-60)}
.bmt-div{flex:0 0 auto;color:var(--crimson);font-size:22px;padding:0 clamp(38px,5.5vw,84px)}
.bmt-dupe{display:none}
.bmt-rail.bmt-on .bmt-dupe{display:flex}
.bmt-foot{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:14px 26px}
.bmt-live{grid-column:1;justify-self:start;display:flex;align-items:center;gap:12px;margin:0;font-family:var(--font-body);font-size:15px;font-weight:600;letter-spacing:.24em;text-transform:uppercase;color:var(--ink)}
.bmt-dot{width:13px;height:13px;border-radius:50%;background:var(--crimson);animation:bmtDot 2.4s ease-in-out infinite}
@keyframes bmtDot{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.32;transform:scale(.68)}}
.bmt-source{grid-column:2;justify-self:center;margin:0;font-size:10px;font-weight:600;letter-spacing:.14em;text-align:center;text-transform:uppercase;color:var(--ink-60)}
/* Inverted ticker (Igor 2026-07-25) — the Realty market read runs as one black band:
   heading, lede, stat labels, figures, deltas, notes and both footer lines read white
   on ink. Scoped to .bmt--realty so the home ticker (#mktTicker) keeps its paper
   ground. Crimson stays #a70008 throughout — the dividers, the Live dot and the
   decline arrow inherit the locked token and take no on-dark substitute. */
.bmt--realty{padding:clamp(64px,8vw,112px) 0;background:var(--ink);color:var(--paper)}
.bmt--realty .bmt-body{margin-top:clamp(4px,1vw,14px)}
.bmt--realty .lede,
.bmt--realty .bmt-label,
.bmt--realty .bmt-delta,
.bmt--realty .bmt-note,
.bmt--realty .bmt-source{color:var(--paper-70)}
.bmt--realty .bmt-value,
.bmt--realty .bmt-live{color:var(--paper)}
@media(max-width:760px){
  .bmt-foot{grid-template-columns:1fr;justify-items:center;text-align:center}
  .bmt-live,.bmt-source{grid-column:1;justify-self:center}
  .bmt-source{width:100%}
}
@media(prefers-reduced-motion:reduce){
  .bmt-body:not([hidden]){animation:none}
  .bmt-rail{overflow-x:auto;-webkit-overflow-scrolling:touch;-webkit-mask-image:none;mask-image:none}
  .bmt-track{flex-wrap:nowrap;transform:none!important}
  .bmt-dupe{display:none!important}
  .bmt-dot{animation:none}
}
/* Founder */
/* Founder — a smaller framed headshot floated left; the bio wraps to its right
   AND continues underneath it, one aligned column (Igor 2026-07-03). */
.founder{max-width:880px}
.founder::after{content:"";display:block;clear:both}
/* Scoped as `.founder .founder-portrait` (specificity 0,2,0) so it outranks the
   general `figure[data-slot]{margin:0}` reset (0,1,1) — otherwise the portrait's
   right margin was zeroed and the bio text ran flush against it (Igor 2026-07-03). */
.founder .founder-portrait{float:left;width:clamp(168px,20vw,240px);margin:6px clamp(40px,4vw,60px) 14px 0}
.founder-portrait img{width:100%;height:auto;aspect-ratio:1/1;object-fit:contain;border-radius:0}
.founder-portrait .ph{aspect-ratio:1/1;min-height:0}
.founder-bio{margin-top:22px}
.founder-bio p + p{margin-top:15px}
/* Section headings clear the floated headshot so "Professional Career" (and the rest)
   start below it, full-width and aligned with the other headings — not indented beside
   the portrait (Igor 2026-07-03). */
.bio-h{font-family:var(--font-display);font-weight:400;font-size:clamp(18px,1.7vw,22px);line-height:1.2;color:var(--ink);margin:30px 0 9px;clear:left}
.founder-bio p:first-child{margin-top:0}
@media(max-width:620px){.founder .founder-portrait{float:none;width:clamp(180px,58vw,250px);margin:0 0 22px}}
.sig-block{margin-top:34px;border-top:1px solid var(--ink-14);padding-top:22px}
.anthem{margin-top:18px;font-size:14px;color:var(--ink-60)}
.anthem em{font-family:var(--font-display);color:var(--ink)}

/* Lenses */
.lenses{display:flex;flex-wrap:wrap;gap:10px 0;align-items:center;font-family:var(--font-display);font-size:clamp(19px,2.4vw,28px)}
.lenses .arrow{color:var(--crimson);font-style:italic;padding:0 clamp(10px,2vw,24px);font-size:.85em}

/* Contact */
.contact-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;background:var(--ink-14);border:1px solid var(--ink-14);border-radius:var(--r);overflow:hidden;margin:54px 0}
.contact-grid>div{background:var(--paper);padding:28px 24px}
.contact-grid b{display:block;font-size:10.5px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:var(--crimson);margin-bottom:12px}
.contact-grid a{display:block;font-family:var(--font-display);font-size:17.5px;line-height:1.45}
.contact-grid a:hover{color:var(--crimson)}
.contact-grid p{font-size:13.5px;color:var(--ink-60);line-height:1.55}
@media(max-width:1120px){.contact-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:560px){.contact-grid{grid-template-columns:1fr}}
.contact-lifestyle{width:100%;aspect-ratio:16/9;margin-top:clamp(30px,3vw,44px);overflow:hidden;
  border-radius:var(--r);background:var(--ink-06);box-shadow:0 24px 54px -34px rgba(10,10,10,.46)}
.contact-lifestyle img{display:block;width:100%;height:100%;object-fit:cover;object-position:center center}
form{max-width:680px}
.field{margin-bottom:22px}
.field label{display:block;font-size:10.5px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-60);margin-bottom:8px}
.field input,.field select,.field textarea{
  width:100%;border:0;border-bottom:1px solid var(--ink-35);background:transparent;
  font-family:var(--font-body);font-size:16px;padding:10px 2px;color:var(--ink);border-radius:0;
  transition:border-color .3s;
}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-bottom-color:var(--crimson)}
.field textarea{min-height:110px;resize:vertical}
.form-note{font-size:12px;color:var(--ink-60);margin-top:14px;max-width:52ch}
.form-done{display:none}
form.sent .field,form.sent button[type="submit"],form.sent .form-note,form.sent .form-err{display:none}
form.sent .form-done{display:block}
.form-err{color:var(--crimson);font-size:13px;font-weight:600;margin-top:14px}
/* Honeypot — display:none (NOT off-screen): off-screen fields get autofilled by password
   managers, which would flag a real visitor as a bot and silently drop their lead. display:none
   is still submitted with the form but is skipped by autofill (matches bco-main). Igor 2026-07-04. */
.hp{display:none!important}
.done-line{font-family:var(--font-display);font-size:clamp(26px,3vw,38px)}
.done-sub{color:var(--ink-60);font-size:14.5px;margin:14px 0 26px;max-width:46ch;line-height:1.7}
.done-sub a{border-bottom:1px solid var(--ink-14)}
.done-sub a:hover{color:var(--crimson)}

/* CTA band */
.cta-band{text-align:left}
.cta-band h2{color:var(--paper);max-width:14ch}
.cta-band .btn{margin-top:36px}
.cta-quiet{margin-top:18px;font-size:13px;color:var(--paper-45)}

/* ════════════════════ FOOTER ═════════════════════════════════════════════ */
footer{background:var(--ink);color:var(--paper);padding:clamp(56px,7vw,90px) 0 40px;border-top:1px solid var(--paper-08)}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1.2fr;gap:clamp(30px,5vw,70px)}
@media(max-width:860px){.foot-grid{grid-template-columns:1fr}}
.foot-brand{font-family:var(--font-display);font-size:30px;line-height:1}
.foot-brand img{height:40px;width:auto}
footer address{font-style:normal;font-size:13.5px;color:var(--paper-45);line-height:1.8;margin-top:18px}
footer address a:hover{color:var(--paper)}
.foot-nav{list-style:none;display:flex;flex-direction:column;gap:10px}
.foot-nav a{font-size:11.5px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--paper-45)}
.foot-nav a:hover{color:var(--paper)}
.foot-legal{font-size:11.5px;color:var(--paper-45);line-height:1.8}
.eho{display:flex;gap:10px;align-items:center;margin-top:14px;color:var(--paper-45);font-size:11px;letter-spacing:.08em}
.foot-base{border-top:1px solid var(--paper-08);margin-top:54px;padding-top:24px;display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap;font-size:11px;color:var(--paper-45);letter-spacing:.06em}

/* ═══════════════ SURFACES CATALOGUE — EDITORIAL PAGE-TILES ═══════════════
   Every collection is shown AS its page from the magazine; the whole tile is a
   button that opens the flipbook at that exact page. Tile aspect == page aspect,
   so the editorial page shows entire — no crop, no letterbox. (Igor 2026-07-04) */
.pagetile-grid{
  --pagetile-gap:clamp(14px,1.8vw,26px);display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:var(--pagetile-gap);max-width:1560px;margin-inline:auto
}
.pagetile{display:block;position:relative;cursor:pointer;border:0;background:none;padding:0;
  width:100%;min-width:0;text-align:left;-webkit-tap-highlight-color:transparent;font:inherit;color:inherit}
/* The primary material families are sets of four. Keep that complete four-up row
   through desktop zoom; below the navigation's tablet breakpoint, switch those
   families directly to an even two-up grid rather than stranding a fourth tile. */
@media(max-width:1120px){.pagetile-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
.pagetile-inner{display:block;width:100%;position:relative;aspect-ratio:.7727;border-radius:var(--r);overflow:hidden;background:var(--ink-06);
  box-shadow:0 16px 34px -22px rgba(10,10,10,.5),0 0 0 1px rgba(10,10,10,.05);
  transform:translateY(0);transition:transform .5s var(--ease),box-shadow .5s var(--ease)}
.pagetile-inner img{width:100%;height:100%;object-fit:cover;display:block}
.pagetile-inner::before{content:"";position:absolute;left:0;top:0;bottom:0;width:9px;z-index:2;pointer-events:none;
  background:linear-gradient(90deg,rgba(0,0,0,.2),rgba(0,0,0,.04) 40%,transparent 72%)}
.pagetile-shine{position:absolute;inset:0;z-index:3;pointer-events:none;overflow:hidden;border-radius:inherit}
.pagetile-shine::after{content:"";position:absolute;inset:-40% -60%;
  background:linear-gradient(115deg,transparent 40%,rgba(255,255,255,.42) 50%,transparent 62%);
  transform:translateX(-140%);transition:transform .85s var(--ease);mix-blend-mode:screen}
.pagetile:hover .pagetile-inner,.pagetile:focus-visible .pagetile-inner{transform:translateY(-7px);
  box-shadow:0 30px 54px -26px rgba(10,10,10,.62),0 0 0 1px rgba(10,10,10,.08)}
.pagetile:hover .pagetile-shine::after,.pagetile:focus-visible .pagetile-shine::after{transform:translateX(140%)}
.pagetile-open{position:absolute;z-index:4;right:12px;bottom:12px;opacity:0;transform:translateY(6px);
  transition:opacity .45s var(--ease),transform .45s var(--ease);width:34px;height:34px;border-radius:50%;
  background:rgba(167,0,8,.92);color:var(--paper);display:flex;align-items:center;justify-content:center;
  box-shadow:0 8px 18px -8px rgba(10,10,10,.6);pointer-events:none}
.pagetile-open svg{width:15px;height:15px}
.pagetile:hover .pagetile-open,.pagetile:focus-visible .pagetile-open{opacity:1;transform:translateY(0)}
.pagetile:focus{outline:none}
@media(prefers-reduced-motion:reduce){.pagetile-inner,.pagetile-shine::after{transition:none}}

/* (D|B project boxes now match the Realty Gallery exactly — 4-col grid + base .cat-media,
   see the .proj-grid rule above. Igor 2026-07-04) */

/* ═══════════════════ MAGAZINE FLIPBOOK VIEWER ═══════════════════
   A publication that opens and turns. Sits OUTSIDE #smooth-content so its fixed
   positioning holds. Soft paper curl turn — pages are pre-rendered web JPGs at
   /assets/mag/<slug>/pNNN.jpg (no runtime PDF library). (Igor 2026-07-04) */
.mag-viewer{position:fixed;inset:0;z-index:400;display:none;align-items:center;justify-content:center;
  --pw:clamp(220px,40vh,440px);--mvGut:0px}
.mag-viewer.open{display:flex}
html.mv-lock{overflow:hidden}
html.mv-lock header{visibility:hidden}   /* the site nav never peeks through the viewer backdrop */
.mv-backdrop{position:absolute;inset:0;background:rgba(8,8,8,.9);
  -webkit-backdrop-filter:blur(12px) saturate(120%);backdrop-filter:blur(12px) saturate(120%);
  opacity:0;transition:opacity .5s var(--ease)}
.mag-viewer.in .mv-backdrop{opacity:1}
.mv-stage{position:relative;z-index:2;perspective:2800px;
  transform:scale(.9) translateY(10px);opacity:0;transition:transform .6s var(--ease),opacity .5s var(--ease)}
.mag-viewer.in .mv-stage{transform:scale(1) translateY(0);opacity:1}
.mv-book{position:relative;transform-style:preserve-3d;
  width:calc(var(--pw)*2 + var(--mvGut));height:calc(var(--pw) / .7727);background:var(--paper);
  box-shadow:0 22px 65px rgba(0,0,0,.3)}
.mv-book.single{width:var(--pw)}
/* Pages are SQUARE-edged (real magazine) — no corner radius anywhere. (Igor 2026-07-04) */
.mv-half{position:absolute;top:0;height:100%;width:var(--pw);overflow:hidden;background:#111}
.mv-half img{width:100%;height:100%;object-fit:cover;display:block}
.mv-half.left{left:0;box-shadow:inset -34px 0 52px -36px rgba(0,0,0,.62)}
.mv-half.right{right:0;box-shadow:inset 34px 0 52px -36px rgba(0,0,0,.62)}
.mv-book.single .mv-half.left{display:none}
.mv-book.single .mv-half.right{left:0;right:auto;box-shadow:none}
.mv-half.blank{background:#0e0e0e}
.mv-half.blank img{display:none}
/* The curl renderer exists only during a turn. Original page images stay below
   it, ready before the sheet moves, and take over seamlessly when it settles. */
.mv-book>.mv-curl{position:absolute;inset:0;z-index:5;pointer-events:none;overflow:hidden}
.mv-curl-page{background:#f7f5f0;overflow:hidden}
.mv-curl-page.blank{background:#0e0e0e}
.mv-curl-page img{display:block;width:100%;height:100%;object-fit:contain}
.mv-half img{object-fit:contain}
.mv-book:not(.single)::after{content:"";position:absolute;top:0;bottom:0;left:calc(50% - 13px);
  width:26px;z-index:6;pointer-events:none;background:linear-gradient(90deg,transparent,rgba(0,0,0,.13) 49%,rgba(0,0,0,.07) 51%,transparent)}
/* chrome */
.mv-close{position:absolute;top:20px;right:24px;z-index:8;width:46px;height:46px;border-radius:50%;
  border:1px solid var(--paper-18);background:rgba(255,255,255,.06);color:var(--paper);
  font-size:20px;line-height:1;cursor:pointer;transition:background .3s,border-color .3s,transform .4s var(--ease)}
.mv-close:hover{background:rgba(167,0,8,.85);border-color:var(--paper);transform:rotate(90deg)}
.mv-title{position:absolute;top:26px;left:28px;z-index:8;color:var(--paper);
  font-family:var(--font-body);font-weight:500;font-size:18px;letter-spacing:.02em;pointer-events:none;opacity:.92}
.mv-nav{position:absolute;top:50%;z-index:7;transform:translateY(-50%);width:56px;height:56px;border-radius:50%;
  border:1px solid var(--paper-18);background:rgba(255,255,255,.05);color:var(--paper);font-size:20px;cursor:pointer;
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);display:flex;align-items:center;justify-content:center;
  transition:background .3s,border-color .3s,opacity .3s var(--ease)}
.mv-nav:hover{background:rgba(167,0,8,.8);border-color:var(--paper)}
.mv-nav[disabled]{opacity:.22;cursor:default;pointer-events:none}
.mv-prev{left:clamp(10px,3vw,42px)}
.mv-next{right:clamp(10px,3vw,42px)}
.mv-counter{position:absolute;bottom:22px;left:50%;transform:translateX(-50%);z-index:8;color:var(--paper-70);
  font-family:var(--font-body);font-size:11px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;
  display:flex;gap:18px;align-items:center;white-space:nowrap}
.mv-counter a{color:var(--paper-70);border-bottom:1px solid var(--paper-18);padding-bottom:2px}
.mv-counter a:hover{color:var(--paper)}
@media(max-width:640px){.mv-title{font-size:14px;top:18px;left:16px}.mv-nav{width:44px;height:44px}
  .mv-close{width:40px;height:40px;top:14px;right:14px}}
@media(prefers-reduced-motion:reduce){.mv-stage{transition:opacity .2s}}

/* Fluid desktop scale lock — the canonical large-screen presentation. The previous
   1440px ceiling made the entire flagship read as a small island on 1920–2560px
   desktop displays. The canvas, type, controls and cards now continue growing to a
   restrained 2048px editorial maximum instead of freezing at laptop scale. */
@media(min-width:1021px){
  :root{--w:min(2048px,100vw);--gutter:clamp(32px,4vw,96px);--r:clamp(22px,1.1vw,28px)}
  body{font-size:clamp(20px,1.05vw,23px)}
  .nav{height:clamp(84px,4.6vw,104px)}
  .brand img{height:clamp(42px,2.15vw,52px)}
  .navlinks{gap:clamp(24px,2.1vw,44px)}
  .navlinks a{font-size:clamp(15px,.72vw,17px)}
  .eyebrow{font-size:clamp(15px,.76vw,17px);margin-bottom:clamp(30px,1.8vw,40px)}
  h1{font-size:clamp(76px,7vw,148px)}
  h2{font-size:clamp(46px,4.8vw,94px)}
  h3{font-size:clamp(25px,1.45vw,32px)}
  .lede{font-size:clamp(21px,1.55vw,30px)}
  section{padding:clamp(112px,10vw,192px) 0}
  .hero-inner{padding:clamp(120px,8vw,180px) var(--gutter) clamp(100px,7vw,150px)}
  .hero-sound{top:calc(clamp(84px,4.6vw,104px) + 20px)}
  .btn{font-size:clamp(15.5px,.78vw,18px);padding:clamp(22px,1.2vw,29px) clamp(38px,2vw,50px);border-radius:999px}
  .hero-cta{gap:clamp(18px,1.2vw,26px);margin-top:clamp(46px,2.6vw,60px)}
  .hero-cta .btn{width:clamp(360px,19vw,430px);min-width:clamp(360px,19vw,430px);min-height:76px;line-height:25px}
  .pull{font-size:clamp(46px,5.1vw,96px)}
  .split{gap:clamp(56px,6vw,120px)}
  .rule-list li{padding:clamp(24px,1.7vw,34px) 0}
  .rule-list p{font-size:clamp(18px,1vw,22px)}
  .grid-3,.grid-2{gap:clamp(24px,1.8vw,38px)}
  .disc-card{min-height:clamp(450px,27vw,560px);padding:clamp(32px,2.6vw,52px)}
  .disc-name{font-size:clamp(52px,4.2vw,78px);height:clamp(156px,11vw,210px)}
  .disc-role{font-size:clamp(15px,.74vw,17px)}
  .disc-card p,.diff p{font-size:clamp(18px,1vw,22px)}
  .disc-card .go{font-size:clamp(15px,.72vw,17px)}
  .diff{padding:clamp(42px,2.6vw,58px) 10px clamp(46px,2.9vw,64px)}
  .diff .idx{font-size:clamp(17px,.82vw,20px)}
  .diff h3{font-size:clamp(28px,1.5vw,34px)}
  .values-row{padding:clamp(38px,2.5vw,54px) 0}
  .values-row span{font-size:clamp(22px,1.55vw,30px)}
  .town{font-size:clamp(15px,.76vw,17px);padding:clamp(18px,1vw,23px) clamp(24px,1.4vw,32px)}
  .chip{font-size:clamp(15px,.8vw,18px);padding:clamp(13px,.8vw,17px) clamp(22px,1.2vw,30px)}
  .bmt-label{font-size:clamp(15px,.76vw,17px)}
  .bmt-value{font-size:clamp(56px,4vw,76px)}
  .bmt-delta,.bmt-note{font-size:clamp(15px,.78vw,18px)}
  .bmt-source{font-size:clamp(9.75px,.468vw,11.05px)}
  .bmt-live{font-size:clamp(16px,.82vw,19px)}
  .bmt-stat{min-width:clamp(240px,14vw,320px);padding:8px clamp(30px,2.2vw,48px)}
  .bmt-div{font-size:clamp(26px,1.5vw,34px);padding:0 clamp(54px,4vw,92px)}
  .section-title-compact{font-size:clamp(48px,3.2vw,68px)}
  .mag-cover{max-width:430px}
  .mag-dl{font-size:clamp(15.5px,.76vw,17px)}
  .beam-viz{max-width:1000px}
  .rail p{font-size:clamp(17px,.92vw,20px)}
  .rail .idx{font-size:clamp(16px,.8vw,19px)}
  .rail h3{font-size:clamp(24px,1.35vw,30px)}
  .founder{max-width:1160px}
  .founder-role{font-size:clamp(15px,.76vw,17px)}
  .founder-meta,.cta-quiet{font-size:clamp(16px,.82vw,19px)}
  .bio-h{font-size:clamp(27px,1.5vw,34px)}
  form{max-width:820px}
  .facts>div{min-height:clamp(180px,11vw,240px);padding:clamp(36px,2vw,48px) clamp(28px,1.7vw,38px)}
  .facts b{font-size:clamp(27px,1.9vw,40px)}
  .facts span{font-size:clamp(15px,.82vw,18px)}
  .ph b{font-size:clamp(13px,.68vw,15px)}
  .ph code{font-size:clamp(14px,.72vw,16px)}
  .work-grid-wrap{margin-top:clamp(68px,4vw,88px)}
  .work-grid{gap:clamp(24px,1.6vw,38px)}
  .work-media{aspect-ratio:3/2}
  .work-body{padding:clamp(28px,1.7vw,38px) clamp(30px,1.8vw,40px) clamp(32px,2vw,44px);gap:clamp(8px,.6vw,13px)}
  .work-tag,.tag-chip{font-size:clamp(15.5px,.76vw,17px)}
  .work-name{font-size:clamp(30px,1.7vw,38px)}
  .work-meta{font-size:clamp(17px,.9vw,20px)}
  .work-link{font-size:clamp(15px,.74vw,17px);margin-top:clamp(16px,1vw,22px)}
  .cat-grid,.proj-grid{gap:clamp(22px,1.5vw,34px)}
  .cat-media{height:clamp(250px,14vw,340px)}
  .cat-body{padding:clamp(24px,1.5vw,34px) clamp(26px,1.6vw,36px) clamp(28px,1.8vw,40px)}
  .cat-tag,.cat-sub{font-size:clamp(15.5px,.76vw,17px)}
  .cat-name{font-size:clamp(24px,1.35vw,30px)}
  .cat-line{font-size:clamp(16px,.9vw,20px)}
  .jr-list{gap:clamp(26px,1.8vw,40px)}
  .jr-card-body{padding:clamp(28px,1.7vw,38px) clamp(30px,1.8vw,40px) clamp(32px,2vw,44px)}
  .jr-kicker,.jr-meta{font-size:clamp(15.5px,.76vw,17px)}
  .jr-card h3{font-size:clamp(28px,1.8vw,38px)}
  .jr-dek{font-size:clamp(17px,.95vw,21px)}
  .jr-more,.article-byline,.article-back{font-size:clamp(15.5px,.76vw,17.5px)}
  .article-head,.article-standfirst,.article-body.article{max-width:920px}
  .article-body p{font-size:clamp(19px,1vw,22px)}
  .contact-grid{margin:clamp(62px,3.8vw,84px) 0}
  .contact-grid>div{padding:clamp(38px,2.2vw,50px) clamp(34px,2vw,46px)}
  .contact-grid b{font-size:clamp(15.5px,.76vw,17px)}
  .contact-grid a{font-size:clamp(23px,1.35vw,30px)}
  .contact-grid p{font-size:clamp(17px,.92vw,20px)}
  .field label{font-size:clamp(15.5px,.76vw,17px)}
  .field input,.field select,.field textarea{font-size:clamp(19px,1vw,22px);padding:clamp(14px,.8vw,18px) 2px}
  .form-note,.form-err{font-size:clamp(15.5px,.76vw,17px)}
  .foot-brand{font-size:clamp(38px,2.2vw,50px)}
  footer address{font-size:clamp(17px,.92vw,20px)}
  .foot-nav a,.foot-legal,.foot-base,.eho{font-size:clamp(15.5px,.76vw,17px)}
}

/* Type discipline: Didot is a high-contrast Modern face — its hairlines thin out
   and the colour on the page goes patchy below roughly 24px. At >=1021px the
   fluid scale already carries these selectors to 23-38px, so they stay in Didot
   there. Below it they fall back to 17.5-23px, which is body-copy territory, so
   they read in Avenir Next instead. Brand lockups, section numerals and arrow
   glyphs are deliberately excluded — those are marks, not text. Igor 2026-07-25. */
@media(max-width:1020px){
  h3,.jr-card h3,.work-name,.cat-name,.bio-h,.contact-grid a{font-family:var(--font-body);letter-spacing:-.008em}
  .values-row span{font-family:var(--font-body)}
}

/* Small text on ink stays readable; crimson remains the rule and marker accent. */
.on-ink .eyebrow,.on-ink .eyebrow .num,.on-ink .diff .idx{color:var(--paper-70)}
.bmt--realty .bmt-arrow{color:var(--paper)}
.on-ink .mag-dl:hover,.on-ink .mag-dl:focus-visible{color:var(--paper);border-color:var(--crimson)}
.on-ink :is(a,button):focus-visible{outline-color:var(--paper)}
/* Preserve navigation geometry after removing the optional playback controls. */
@media(min-width:1121px){.navlinks{gap:clamp(10px,1.35vw,22px)}}
@media(max-width:1120px){.nav>.brand{margin-right:auto}.nav>nav{display:none}}
.hero-sound:focus-visible{outline:2px solid white;outline-offset:4px}
.bmt-rail.bmt-static{overflow-x:auto;-webkit-mask-image:none;mask-image:none;scrollbar-width:thin}
.bmt-rail.bmt-static .bmt-track{transform:none!important;flex-wrap:nowrap}
.bmt-rail.bmt-static .bmt-dupe{display:none!important}
.form-email{display:block;margin:12px 0 20px;padding:8px 0;min-height:44px;border:0;border-bottom:1px solid currentColor;background:none;color:var(--ink);font:500 13px var(--font-body);cursor:pointer}
form.sent .form-email{display:none}
.bco-offscreen,.bco-offscreen::before,.bco-offscreen::after{animation-play-state:paused!important}
html.bco-motion-paused *,html.bco-motion-paused *::before,html.bco-motion-paused *::after{animation-play-state:paused!important}
html.bco-reduced *,html.bco-reduced *::before,html.bco-reduced *::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
[data-r]:focus-within{visibility:visible!important;opacity:1!important}
/* Reveal pre-state is applied by JS only (progressive enhancement) */
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .hero-ph{animation:none}
  a.work-card:hover,a.work-card:focus-visible{transform:none}
  a.work-card:hover .work-media img{transform:none}
  a.cat-card:hover,.cat-card[data-mag-open]:hover,.cat-card[data-mag-open]:focus-visible{transform:none!important}
  a.cat-card:hover .cat-media img,.cat-card[data-mag-open]:hover .cat-media img,.cat-card[data-mag-open]:focus-visible .cat-media img{transform:none}
  *{transition-duration:.01ms!important}
}
.realty-quicklinks{display:flex;flex-wrap:wrap;gap:12px 42px;padding-top:22px;padding-bottom:4px}
#view-design-build .db-hero h1{font-size:clamp(44px,5.8vw,88px);max-width:17ch}
/* Uniform property cards preserve each complete source image, including on hover. */
#view-design-build .proj-grid,#view-design-build .concept-grid{--db-image-inset:clamp(16px,1.65vw,26px);display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-auto-rows:1fr;gap:clamp(16px,1.8vw,28px)}
#view-design-build .concept-grid{margin-top:38px}
#view-design-build .cat-card,#view-design-build .concept-card{display:flex;flex-direction:column;min-width:0;height:100%;border:1px solid var(--ink-14);border-radius:var(--r);overflow:hidden;background:var(--paper);color:inherit;text-decoration:none}
#view-design-build .proj-grid .cat-media,#view-design-build .concept-grid .concept-card figure{width:100%;height:auto;min-width:0;min-height:0;aspect-ratio:4/3;margin:0;padding:0;position:relative;flex:none;background:#eae8e3}
/* One neutral field around each complete original; no inner white frame. */
#view-design-build .proj-grid .cat-media[data-slot] img,#view-design-build .concept-grid .concept-card img{box-sizing:border-box;position:absolute;inset:var(--db-image-inset);width:calc(100% - 2 * var(--db-image-inset));height:calc(100% - 2 * var(--db-image-inset));min-width:0;min-height:0;padding:0;border:0;background:transparent;object-fit:contain;object-position:center;border-radius:0;transform:none;transition:none}
#view-design-build .cat-body{min-height:clamp(174px,12.5vw,214px);height:auto;flex:1;display:flex;flex-direction:column;padding:clamp(18px,1.6vw,28px)}
#view-design-build .cat-name,#view-design-build .concept-card h3{font-size:clamp(20px,1.65vw,30px);line-height:1.25;margin:0;font-weight:600}
#view-design-build .cat-tag,#view-design-build .concept-meta{display:block;font:600 clamp(10px,.85vw,14px)/1.5 var(--font-body);letter-spacing:.12em;text-transform:uppercase;margin-bottom:9px}
#view-design-build .concept-meta{color:var(--ink-60)}
#view-design-build .cat-line{font-size:clamp(13px,1vw,18px);line-height:1.55;margin-top:9px}
#view-design-build .concept-card .editorial-link{margin-top:18px;font-size:clamp(12px,.95vw,17px)}
#view-design-build .concept-card:focus-visible{outline:2px solid var(--crimson);outline-offset:4px}
#view-design-build .bco-process-images img,#view-design-build .bco-process-mobile{object-fit:contain;background:#171717}
@media(max-width:1200px){#view-design-build .proj-grid,#view-design-build .concept-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:520px){#view-design-build .proj-grid,#view-design-build .concept-grid{grid-template-columns:1fr}#view-design-build .cat-body{min-height:140px}}
/* Editorial refinement — the work leads; detail remains immediately usable. */
#view-home .hero .lede{max-width:32ch}
#view-home #ecosystem .disc-card{padding:0 0 30px;min-height:0;overflow:hidden;border-radius:0;align-items:flex-start;text-align:left}
.disc-image{width:100%;aspect-ratio:4/3;margin:0 0 26px;overflow:hidden;background:var(--ink-06)}
.disc-image img{display:block;width:100%;height:100%;object-fit:cover;transition:none}
.disc-image--surfaces img{object-position:center 90%}
#ecosystem .disc-name{height:auto;min-height:1.15em;font-size:clamp(34px,3vw,54px);justify-content:flex-start;margin-bottom:18px}
#ecosystem .dn-db{color:#746a6a}#ecosystem .dn-surfaces{color:#74665f}
#ecosystem .disc-card p{max-width:35ch}#ecosystem .disc-card .go{color:var(--ink-60)}
.editorial-link{display:inline-flex;align-items:center;gap:22px;font-size:15px;margin-top:22px;padding:8px 0;border-bottom:1px solid currentColor}
.on-ink .editorial-link{color:var(--paper)}
.editorial-link span{transition:transform .3s var(--ease)}.editorial-link:hover span{transform:translateX(4px)}
#view-journal .page-hero{padding-bottom:20px}
#view-journal .page-hero h1{font-size:clamp(46px,5.4vw,78px);max-width:18ch}
#view-journal .page-hero .lede{font-size:clamp(18px,1.35vw,22px)}
.journal-tools{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:18px;margin-bottom:36px;padding-bottom:18px;border-bottom:1px solid var(--ink-14)}
.journal-tools[hidden]{display:none}.journal-filters{display:flex;flex-wrap:wrap;gap:8px 22px}
.journal-filters button{font-family:var(--font-body);font-size:15px;background:none;border:0;border-bottom:2px solid transparent;padding:10px 0;cursor:pointer;color:var(--ink-60)}
.journal-filters button[aria-pressed="true"]{color:var(--ink);border-bottom-color:var(--crimson)}
.journal-filters button:focus-visible{outline:2px solid var(--crimson);outline-offset:4px}
.journal-count{font-size:14px;color:var(--ink-60)}
#view-journal .jr-list{grid-template-columns:repeat(2,minmax(0,1fr));gap:0 36px;max-width:none}
#view-journal .jr-card{flex-direction:row;gap:24px;padding:28px 0;border:0;border-top:1px solid var(--ink-14);border-radius:0;box-shadow:none;align-items:flex-start;transform:none}
#view-journal .jr-card[hidden]{display:none!important}
#view-journal .jr-card-media{width:28%;flex:none;aspect-ratio:4/5}
#view-journal .jr-card-body{padding:0;gap:10px}
#view-journal [data-topic="design-build"] .jr-kicker{color:#78613a!important}
#view-journal [data-topic="surfaces"] .jr-kicker{color:#75644e!important}
#view-journal .jr-card h3{font-size:clamp(24px,2vw,32px)}
#view-journal .jr-dek{font-size:16px;line-height:1.6}#view-journal .jr-meta{font-size:13px}
#view-journal .jr-card.jr-feature{grid-column:1/-1;flex-direction:column;align-items:stretch;gap:clamp(26px,3vw,44px);padding:0 0 60px;border:0}
#view-journal .jr-feature .jr-card-media{width:100%;height:clamp(420px,65svh,780px);aspect-ratio:auto}
#view-journal .jr-feature .jr-card-media img{transition:none;transform:none}
#view-journal .jr-feature .jr-card-body{max-width:1050px}
#view-journal .jr-feature h3{font-family:var(--font-display);font-size:clamp(38px,4vw,64px);font-weight:400}
#view-journal .jr-feature .jr-dek{font-size:clamp(18px,1.3vw,22px)}
#view-about .page-hero{padding-bottom:20px}
#view-about .founder{display:grid;grid-template-columns:minmax(190px,1fr) minmax(0,2.3fr);column-gap:clamp(32px,6vw,90px);max-width:1180px;align-items:start}
#view-about .founder::after{display:none}
#view-about .founder .founder-portrait{float:none;grid-column:1;grid-row:1/5;width:100%;margin:0}
#view-about .founder>h2,#view-about .founder-role,#view-about .founder-bio,#view-about .sig-block{grid-column:2}
#view-about .founder-bio{max-width:62ch}.founder-bio .bio-h{font-family:var(--font-body);font-size:22px}
#view-about .founder-role{margin-top:14px}#view-about .sig-block{margin-top:30px}
#view-contact .connect-intake{gap:clamp(36px,6vw,110px);align-items:start;padding-bottom:32px}
#view-contact h1{font-size:clamp(42px,5.8vw,86px)}
#view-contact .connect-direct{font-size:17px;line-height:1.9;margin-top:24px}
#view-contact .connect-direct a{border-bottom:1px solid var(--ink-14)}
#view-contact .contact-lifestyle{box-shadow:none;border-radius:0}
#view-contact form{width:100%;padding-top:6px}
#view-contact .enquiry-context{font-size:16px;border-left:2px solid var(--crimson);padding:8px 0 8px 18px;margin-bottom:24px}
.form-note a{text-decoration:underline;text-underline-offset:3px}
.data-use{padding:24px 0 60px;max-width:68ch;scroll-margin-top:120px}
.data-use p:not(.eyebrow){font-size:17px;line-height:1.8;margin-top:20px}.data-use a{text-decoration:underline;text-underline-offset:3px}
.market-method{margin-top:20px;font-size:14px;color:var(--ink-60)}
.on-ink .market-method{color:var(--paper-70)}
.market-method summary{cursor:pointer;display:inline-block;padding:10px 0;text-decoration:underline;text-underline-offset:4px}
.market-method p{font-size:14px;line-height:1.7;max-width:86ch;margin:10px 0}.market-method a{text-decoration:underline}
.market-method .market-history{overflow:auto;max-height:340px;margin-top:20px}
.market-method table{border-collapse:collapse;width:100%;font-size:13px;white-space:nowrap}
.market-method th,.market-method td{padding:10px;text-align:right;border-bottom:1px solid var(--ink-14)}
.market-method th:first-child,.market-method td:first-child{text-align:left}
@media(max-width:1000px){#view-journal .jr-list{grid-template-columns:1fr}#view-journal .jr-card-media{width:25%;aspect-ratio:3/2}#view-journal .jr-feature .jr-card-media{width:100%}}
@media(max-width:760px){
  #ecosystem .disc-card{margin-bottom:24px}.disc-image{aspect-ratio:3/2}
  #view-journal .jr-card.jr-feature{flex-direction:column;align-items:stretch;padding-bottom:36px}
  #view-journal .jr-feature .jr-card-media{width:100%;height:clamp(320px,55svh,480px)}
  #view-journal .jr-card{gap:18px;padding:24px 0}#view-journal .jr-card-media{width:27%;aspect-ratio:4/5}
  #view-journal .jr-card:not(.jr-feature) .jr-dek{display:none}#view-journal .jr-meta{font-size:13px}
  #view-journal .jr-kicker{font-size:11px;letter-spacing:.12em}.journal-filters{gap:2px 20px}
  #view-about .founder{display:block}#view-about .founder .founder-portrait{width:min(220px,65%);margin:0 0 26px}
  #view-contact .contact-lifestyle{display:none}#view-contact .connect-intake{gap:32px}
}
@media(prefers-reduced-motion:reduce){.disc-image img,.editorial-link span{transition:none}}


.nojs-nav{position:relative;font:500 15px var(--font-body);color:var(--ink)}
.nojs-nav summary{cursor:pointer;min-height:44px;display:flex;align-items:center;padding:8px}
.nojs-nav nav{position:absolute;right:0;top:100%;display:grid;min-width:220px;max-height:65svh;overflow:auto;padding:14px;background:white;border:1px solid var(--ink-14)}
.nojs-nav nav a{padding:12px;line-height:1.5}.nojs-nav a:focus-visible{outline:2px solid var(--crimson)}
@media(min-width:1121px){.nojs-nav{display:none}}
@media(max-width:860px){#view-contact .contact-lifestyle{display:none}}
@media(min-width:1800px){
  #view-design-build .bco-process-steps p,#view-surfaces .bco-material-copy>p:not(.eyebrow),#view-surfaces .bco-scene-intro{font-size:22px}
  #view-realty .bco-beam-steps p{font-size:20px}
  #view-surfaces .bco-material-modes button,#view-surfaces .bco-material-choices button,#view-surfaces .bco-scene-text-button,#view-realty .bco-scene-text-button{font-size:16px}
  #view-design-build .bco-process-stage figcaption,#view-design-build .bco-process-source,#view-surfaces .bco-material-note,#view-realty .bco-beam-caption{font-size:14px}
  #view-design-build .bco-process-steps .bco-process-question{font-size:16px}
}