/* Site-wide refinements on top of the template's theme.css (added to every page by site/scripts/patch-pages.py).
   1. In-page sub-menus: numbered (01, 02…) with the footer's vertical hover line, no down arrows.
   2. Quiet motion: content fades up as it scrolls into view; the hero image drifts slightly with scroll.
   3. Homepage logos: a borderless, slowly moving strip instead of the boxed grid.
   Everything that moves stops for visitors who ask for reduced motion. */

/* 1. Sub-menus */
.page-subnav { counter-reset: subnav; padding-left: 12px; margin-left: -12px; }
.page-subnav a { counter-increment: subnav; gap: 10px; }
.page-subnav a > svg { display: none; }
.page-subnav a::before {
  content: counter(subnav, decimal-leading-zero);
  font-weight: 400;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.page-subnav a::after {
  content: "";
  position: absolute;
  left: -11px;
  top: 24px;
  bottom: 24px;
  width: 2px;
  background: var(--brand-green, var(--ink));
  opacity: 0;
  transform: scaleY(.4);
  transition: opacity .2s, transform .2s;
  pointer-events: none;
}
.page-subnav a:is(:hover, :focus-visible)::after { opacity: .8; transform: scaleY(1); }
.page-subnav a:is(:hover, :focus-visible)::before { color: inherit; }

/* 2. Reveal on scroll (refine.js marks elements with data-reveal and adds .is-in when they enter the view) */
html.reveal-on [data-reveal] {
  opacity: 0;
  transform: translate3d(0, 24px, 0);
  transition: opacity .9s cubic-bezier(.2, .65, .3, 1), transform .9s cubic-bezier(.2, .65, .3, 1);
  transition-delay: var(--reveal-delay, 0ms);
}
html.reveal-on [data-reveal].is-in { opacity: 1; transform: none; }
/* the hero picture drifts a little slower than the page */
.hero-media > img, .hero-media > video, .project-hero img { will-change: transform; }

/* 3. Homepage logos: one still row, first logo flush with the heading, same visual weight (width/height set per logo) */
.partners-open .partners-open-marks.is-row { display: flex; justify-content: space-between; align-items: center; gap: 28px; border: 0; padding: 30px 0 4px; flex-wrap: wrap; }
.partners-open .partners-open-marks.is-row .partner-mark { height: 44px; width: auto; padding: 0; border: 0; background: none; display: flex; align-items: center; flex: none; }
.partners-open .partners-open-marks.is-row .partner-mark[hidden] { display: none; }
.partners-open .partners-open-marks.is-row .partner-mark img { max-width: none; max-height: none; object-fit: contain; filter: brightness(0); opacity: .55; transition: opacity .3s; }
.partners-open .partners-open-marks.is-row .partner-mark:hover { background: none; }
.partners-open .partners-open-marks.is-row .partner-mark:hover img { opacity: .9; }
@media (max-width: 900px) { .partners-open .partners-open-marks.is-row { justify-content: flex-start; gap: 22px 32px; } }

@media (prefers-reduced-motion: reduce) {
  html.reveal-on [data-reveal] { opacity: 1; transform: none; transition: none; }
}

/* Footer: test city pages */
.site-footer .test-tag { font-size: 9px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin-left: 3px; }

/* Logo "bogza." (inline, one SVG per letter; see patch-pages.py). "Soft ripple" (Tim's motion study, 2026-10-21): on
   hover each letter in turn lifts, tilts slightly and settles; refine.js plays it once per hover. Refined after
   Tim found the first version glitchy: no overshoot, a softer ease. */
.bz-logo { position: relative; display: block; width: 115px; color: #000; opacity: .88; }
.bz-logo .bz-l { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.brand .bz-logo { width: 115px; }
.footer-wordmark .bz-logo { width: 150px; }
@media (max-width: 760px) { .brand .bz-logo { width: 104px; } .footer-wordmark .bz-logo { width: 130px; } }
@keyframes bz-ripple {
  0% { transform: translateY(0) rotate(0deg); opacity: 1; animation-timing-function: cubic-bezier(.3, 0, .2, 1); }
  38% { transform: translateY(-8%) rotate(-1.5deg); opacity: .72; animation-timing-function: cubic-bezier(.45, 0, .25, 1); }
  100% { transform: translateY(0) rotate(0deg); opacity: 1; }
}
/* one smooth lift and settle per letter (no dip below the line: that read as a second, smaller wave) */
.bz-logo.is-rippling .bz-l { animation: bz-ripple .8s linear both; animation-delay: calc(var(--i) * 55ms); will-change: transform, opacity; }
/* the footer's vertical hover line looked odd next to the logo (Tim) */
.site-footer .footer-wordmark::before { display: none; }

/* Top menu one point larger (Tim) */
.desktop-nav { font-size: 14px; }

/* Residential gallery: a pinned project added at the front of the first row, so that row holds three tiles (ratios 1, 1, .8) */
.mf-project-row:nth-child(1):has(> .mf-project:nth-child(3)) { grid-template-columns: 1fr 1fr .8fr; }

/* ===== One page system (Tim, 2026-10-21): every page's opening block and shared parts look the same as the homepage.
   Intro: eyebrow 48 px below the header, headline 29 px under it, intro text (dark, 16 px) in a 410 px right column,
   bottom-aligned with the headline, with an optional text link under it. Section headings, eyebrows and lead text use
   one size each. Covers the homepage, Work, Services, Studio, Industries, industry pages, Contact, city pages,
   FloorStack and project pages. ===== */
:is(.home-intro, .page-intro, .svc4-intro, .studio-v3-hero, .industry-intro, .mf-intro, .sea-intro, .fs-hero) { padding-top: 48px; }
.project-page > .project-crumbs { padding-top: 48px; margin: 0 auto 29px; }
.project-page > .project-intro { padding-top: 0; }
:is(.home-intro, .page-intro, .svc4-intro, .studio-v3-hero, .industry-intro, .mf-intro, .sea-intro, .fs-hero) > .eyebrow,
.intro-top, .mf-breadcrumb, .sea-overline { margin: 0 0 29px; padding: 0; }
.intro-top > .eyebrow, .mf-breadcrumb .eyebrow, .sea-overline .eyebrow { margin: 0; }
.mf-intro-heading, .sea-lead-layout { padding-top: 0; margin-top: 0; }
:is(.mf-breadcrumb, .sea-overline) .eyebrow { font-size: 11px; }
.intro-aside { padding-bottom: 8px; }
.fs-hero-copy > p { margin-bottom: 24px; }
/* the headline */
:is(.home-intro, .page-intro, .svc4-intro, .studio-v3-hero, .industry-intro, .mf-intro, .sea-intro, .fs-hero, .project-intro) h1 {
  font-size: clamp(46px, 7.5vw, 120px); line-height: 1.04; font-weight: 600; letter-spacing: -.025em; margin: 0;
}
/* headline left, intro text right */
@media (min-width: 1001px) {
  :is(.intro-main, .page-intro-row, .svc4-intro-grid, .studio-v3-heading, .mf-intro-heading, .fs-hero-row, .project-intro) {
    display: grid; grid-template-columns: minmax(0, 1fr) 410px; column-gap: 42px; align-items: end; justify-content: normal;
  }
}
:is(.intro-copy p, .page-intro-row > p, .svc4-intro-grid > p, .studio-v3-heading > p, .mf-intro-copy, .fs-hero-copy > p, .project-kicker, .sea-lead-copy, .intro-text) {
  font-size: 16px; line-height: 1.6; color: var(--ink); max-width: 410px; margin: 0;
}
.intro-copy { padding-bottom: 8px; }
:is(.intro-copy, .intro-aside) .text-link, .intro-aside .text-link { display: flex; width: 100%; justify-content: space-between; margin-top: 24px; }
/* every eyebrow: one size, weight and spacing (colour follows the background) */
.eyebrow { font-size: 11px; font-weight: 600; letter-spacing: .08em; line-height: 16px; text-transform: uppercase; }
:is(.mf-breadcrumb, .sea-overline, .project-crumbs), :is(.mf-breadcrumb, .sea-overline) .eyebrow, .project-crumbs a { color: var(--ink); }
/* section headings: one size (the large closing "Start a project." band keeps its own) */
:is(.industry-index-row, .fs-intro, .fs-split, .cv-firms-head) h2 { font-size: 42px; line-height: 1.12; font-weight: 600; letter-spacing: -.02em; }
.cv-end h2 { font-weight: 600; letter-spacing: -.025em; }
@media (max-width: 760px) { :is(.industry-index-row, .fs-intro, .fs-split, .cv-firms-head) h2 { font-size: 32px; } }
/* lead paragraphs (the first paragraph of a story or brief) */
:is(.studio-v3-story, .fs-intro, .fs-split, .project-brief, .contact-intro) .lead, .project-brief > p:not(.eyebrow), .studio-v3-story p:first-of-type { font-size: 18px; line-height: 1.65; }
.project-intro .project-kicker { text-align: left; align-self: end; padding-bottom: 8px; }
/* page intro on phones and tablets: a little air between the headline and the intro text */
@media (max-width: 1000px) { :is(.intro-aside, .page-intro-row > p, .svc4-intro-grid > p, .studio-v3-heading > p, .mf-intro-copy, .fs-hero-copy) { margin-top: 28px; } .studio-v3-heading > .intro-aside { margin-top: 0; } }  /* the homepage's and Studio's grids already have a 28px gap */

/* Lightbox, site-wide (Tim, 2026-10-22: cleaner, seamless). One dark surface edge to edge: the picture centred with even
   space around it, a slim caption and arrows underneath in light type, close at the top right. No card, no light bars. */
#image-lightbox { width: 100vw; max-width: 100vw; height: 100dvh; max-height: 100dvh; margin: 0; inset: 0; padding: 0; border: 0;
  background: #121613; color: #f1f0e9; box-shadow: none; overflow: hidden; display: none; }
#image-lightbox[open] { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; }
#image-lightbox::backdrop { background: #121613; }
#image-lightbox .gallery-lb-head { border: 0; padding: 18px 28px 6px; background: transparent; }
#image-lightbox .gallery-lb-head > span { color: rgb(241 240 233 / .55); }
#image-lightbox [data-lb-close] { color: #f1f0e9; }
#image-lightbox .gallery-lb-stage { background: transparent; min-height: 0; position: relative; }
#image-lightbox [data-lb-image] { position: absolute; inset: 8px 6vw; width: calc(100% - 12vw); height: calc(100% - 16px); max-height: none; object-fit: contain; }
#image-lightbox [data-lb-status] { color: rgb(241 240 233 / .7); }
#image-lightbox .gallery-lb-foot { background: transparent; border: 0; padding: 14px 28px 22px; }
#image-lightbox [data-lb-title] { color: #f1f0e9; font-size: 17px; }
#image-lightbox [data-lb-location], #image-lightbox [data-lb-count] { color: rgb(241 240 233 / .6); }
#image-lightbox :is([data-lb-prev], [data-lb-next]) { border-color: rgb(241 240 233 / .25); color: #f1f0e9; background: transparent; }
#image-lightbox :is([data-lb-prev], [data-lb-next]):hover { background: #f1f0e9; color: #121613; }
#image-lightbox :focus-visible { outline-color: #d8ee75; }
@media (max-width: 760px) {
  #image-lightbox [data-lb-image] { inset: 4px 0; width: 100%; height: calc(100% - 8px); }
  #image-lightbox .gallery-lb-head { padding: 12px 16px 4px; }
  #image-lightbox .gallery-lb-foot { padding: 12px 16px 18px; }
}

/* Industry galleries (industry-feed.js): hold the tiles while the live set loads from the platform. */
.mf-project-grid.is-loading-feed { opacity: 0; }
.mf-project-grid[data-industry-feed] { transition: opacity .25s ease; }

/* Responsive review (2026-10-23) */
/* Services headline: its two lines may wrap on phones instead of running off the screen. */
@media (max-width: 600px) { .svc4-title-line { white-space: normal; } }
/* Phones: nothing smaller than 11px (footer labels, captions, map and form labels were 8–10px). */
@media (max-width: 600px) {
  .site-footer .eyebrow, .site-footer a.eyebrow, .footer-bottom, .footer-bottom a, .test-tag { font-size: 11px; }
  .media-caption .eyebrow, a > .eyebrow, .industry-preview figcaption, figcaption > span { font-size: 11px; }
  #studio-map-sector-label, #studio-map-state-label, #studio-map-result-count, .studio-map-reset { font-size: 11px; }
  .field > label, fieldset > legend, #contact-files-label, .gallery-search label, .gallery-tools > span { font-size: 12px; }
  .media-control { font-size: 11px; }
}

/* Lightbox "View project" link (lb-project.js) */
.lb-project-link { display: inline-flex; gap: 8px; margin-top: 10px; font-size: 13px; color: inherit; }
.lb-project-link[hidden] { display: none; }
/* Services headline on desktop: "Services to tell your" stays on one line, so between 1000 and 1440px it is sized to the
   column it has (it ran into the intro text at 1024px). */
@media (min-width: 1001px) { .svc4-intro h1 { font-size: min(var(--page-title-size, clamp(60px, 7.5vw, 116px)), calc(10.8vw - 52px)); } }
/* Map sector filter: long values ("Student housing") keep clear of the arrow. */
.studio-map-select-trigger > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Phones: the map list, the What-we-do captions and the Services film and tour captions at 11px too. */
@media (max-width: 600px) {
  .studio-map-project-row span, .studio-map-project-sector, #studio-map-panel-count, .studio-map-fit { font-size: 11px; }
  main figcaption span, .svc4-play, .svc4-duration, .svc4-film-caption span, .svc4-tour-choice-label small, .svc4-tour-caption span { font-size: 11px; }
}
/* (the theme's own phone rules are more specific; these labels must still read at 11px or more) */
@media (max-width: 600px) {
  main .studio-map-project-row .studio-map-project-sector, main .studio-map-project-row span, main figcaption, main figcaption span,
  main .svc4-demo-copy p, main dl dt, main .svc4-price-column p, main .svc4-pricing-footer p, main .studio-map-panel-foot,
  main .studio-map-caption p, main .studio-map-caption span, main p span, main article .eyebrow, main .industry-index-number { font-size: 11px !important; }
}
/* Phones: hero captions stack (place over title, both left) instead of squeezing side by side; the map's record count
   drops under the filters instead of being cut off beside them. */
@media (max-width: 600px) {
  .hero-media .media-caption { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
  .hero-media .media-caption .eyebrow { order: -1; }
  .hero-media .media-caption strong { text-align: left; }
  .studio-map-toolbar { flex-wrap: wrap; row-gap: 12px; }
  .studio-map-toolbar #studio-map-result-count { white-space: nowrap; }
}

/* No plus badge on pictures, anywhere, any screen (Tim, 2026-10-27: "it's just unnecessary"); the pictures still open. */
:is(.gallery-open, .industry-open, .svc4-image-open, .mf-image-open, .sea-open) { display: none !important; }

/* The 360 tour lightbox (Services) looks like the image lightbox: full screen, near-black, light type (Tim, 2026-10-27:
   "closer to what we currently have on our images ... a little more black and more modern"). */
.svc4-tour-dialog { width: 100vw; max-width: 100vw; height: 100dvh; max-height: 100dvh; margin: 0; inset: 0; padding: 0; border: 0;
  background: #121613; color: #f1f0e9; box-shadow: none; }
.svc4-tour-dialog::backdrop { background: #121613; backdrop-filter: none; }
.svc4-tour-dialog-head { padding: 18px 28px 12px; background: transparent; }
.svc4-tour-dialog-head .eyebrow { color: rgb(241 240 233 / .55); }
.svc4-tour-dialog-head h2 { color: #f1f0e9; font-size: 17px; }
.svc4-tour-dialog-head button { color: #f1f0e9; border-color: rgb(241 240 233 / .25); background: transparent; }
.svc4-tour-dialog-head button:is(:hover, :focus-visible) { background: #f1f0e9; color: #121613; }
.svc4-tour-dialog-stage { background: #0c0f0d; margin: 0 28px; }
.svc4-tour-loading { color: rgb(241 240 233 / .7); }
.svc4-tour-dialog-foot { padding: 14px 28px 22px; color: rgb(241 240 233 / .6); background: transparent; }
.svc4-tour-dialog-foot > a { color: #f1f0e9; }
.svc4-tour-dialog :focus-visible { outline-color: #d8ee75; }
@media (max-width: 760px) {
  .svc4-tour-dialog-head { padding: 12px 16px 8px; }
  .svc4-tour-dialog-stage { margin: 0; }
  .svc4-tour-dialog-foot { padding: 12px 16px 18px; }
}

/* Services, 360 tours: the developer or client and the year under each tour's place (patch-pages.py) */
.svc4-tour-choice-meta { display: block; font-size: 11px; color: var(--muted); margin-top: 3px; }

/* Home logo row on phones (Tim, 2026-10-27: "overscaled ... no more than two rows. All scaled down"): the eight logos in
   two rows of four, each scaled down by the same amount so they keep their balanced sizes */
@media (max-width: 760px) {
  .partners-open .partners-open-marks.is-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px 14px; padding-top: 22px; }
  .partners-open .partners-open-marks.is-row .partner-mark { height: 34px; min-width: 0; justify-content: flex-start; }
  .partners-open .partners-open-marks.is-row .partner-mark img { zoom: .62; transform: none; max-width: 160%; }
}

/* Home logo row on desktop: always one row (the eight logos are picked at random per visit, and some sets wrapped because
   this file's flex-wrap overrode home.css's nowrap); the same 0.85 scale as before, as zoom so the row's width shrinks too */
@media (min-width: 1001px) {
  .partners-open .partners-open-marks.is-row { flex-wrap: nowrap; gap: 18px 24px; }
  .partners-open .partners-open-marks.is-row .partner-mark img { transform: none; zoom: .85; }
}

/* Contact: "Prefer to talk? Pick a time." as one short band with a button that opens Calendly's popup
   (Tim, 2026-10-27: the inline calendar was too long and out of place) */
.contact-book { display: flex; align-items: center; justify-content: space-between; gap: 20px 32px; flex-wrap: wrap;
  padding-block: 44px; border-top: 1px solid var(--line); }
.contact-book h2 { margin: 0; font-size: clamp(24px, 2.6vw, 34px); line-height: 1.15; letter-spacing: -.02em; font-weight: var(--section-title-weight, 500); }
.contact-book .button { flex: none; }
@media (max-width: 640px) { .contact-book { padding-block: 36px; } }