/* ---------- Reflow — Electronics design 63 (bridge63) ----------
   THE STRUCTURAL MOVE: one strict centre axis, and every band is either
   edge-to-edge or a single narrow column — nothing on this page is ever
   half-width. A LABELLED six-up strip runs flush under the hero and a four-up
   portrait strip runs flush under the type block; between them sits the only
   contained thing on the page, a SILENT six-tile grid with its heading floated
   above it. The one place type ever lands on a photograph is held back to
   second-to-last, and the form closes narrow on the same axis. */
body.t-reflow.ws-body { --bg: #1c211f; --fg: #b9c0b6; --heading: #e6eae1; --text: #b9c0b6; --muted: #8d958a; }
body.t-reflow { background: #1c211f; }
body.t-reflow .ws-nav { background: color-mix(in srgb, #1c211f 62%, transparent); border-bottom-color: transparent; }
body.t-reflow .ws-nav-inner { height: 58px; }
body.t-reflow .ws-brand { text-transform: uppercase; letter-spacing: 0.34em; font-size: 13px; font-weight: 700; }
body.t-reflow .ws-nav-links { gap: 30px; }
body.t-reflow .ws-nav-links a { text-transform: uppercase; letter-spacing: 0.16em; font-size: 11px; font-weight: 600; }
body.t-reflow .ws-section { padding: 116px 0; }
body.t-reflow .ws-section:nth-child(even):not(.ws-cta):not(.ws-shoplink) { background: transparent; }
body.t-reflow .ws-sub, body.t-reflow .ws-title-sub { color: var(--muted); font-size: 15.5px; line-height: 1.7; }
body.t-reflow .ws-footer { border-top-color: #2a312d; }

/* hero — full viewport, type parked on the upper-middle third so the bench in
   every frame stays clear; the CTA is a glass panel, never an outline */
body.t-reflow .ws-hero { min-height: 100vh; align-items: flex-start; --hero-a: rgba(10,13,12,.30); --hero-b: rgba(10,13,12,.66); }
body.t-reflow .ws-hero-inner { max-width: 900px; padding: 30vh 22px 60px; }
body.t-reflow .ws-hero h1 { font-size: clamp(30px, 4.8vw, 58px); font-weight: 700; letter-spacing: -0.035em; line-height: 1.06; max-width: 17ch; }
body.t-reflow .ws-hero p { font-size: 12px; text-transform: uppercase; letter-spacing: 0.2em; max-width: none; opacity: 0.88; margin-bottom: 30px; }
body.t-reflow .ws-hero-cta.btn.brand { background: rgba(255,255,255,.13); color: #ffffff; box-shadow: none; border-radius: 0; backdrop-filter: blur(6px); text-transform: uppercase; letter-spacing: 0.2em; font-size: 11px; font-weight: 700; padding: 16px 34px; }
body.t-reflow .ws-hero-cta.btn.brand:hover { background: rgba(255,255,255,.24); }

/* strip one — six across, edge to edge, flush to the hero, label under each */
body.t-reflow .ws-gallery { padding: 0; }
body.t-reflow .ws-gallery .ws-container { max-width: none; padding: 0; }
body.t-reflow .ws-gallery-grid { grid-template-columns: repeat(6, 1fr); gap: 2px; }
body.t-reflow .ws-gallery-item img { aspect-ratio: 1 / 1; border-radius: 0; }
body.t-reflow .ws-gallery-cap { text-align: center; padding: 15px 8px 26px; gap: 5px; }
body.t-reflow .ws-gallery-cap strong { font-size: 11px; text-transform: uppercase; letter-spacing: 0.18em; color: var(--heading); }
body.t-reflow .ws-gallery-cap span { font-size: 11px; letter-spacing: 0.06em; color: var(--muted); }

/* the one contained block — a heading floated above a silent six-tile grid */
body.t-reflow .ws-titleblock { padding: 118px 0 30px; }
body.t-reflow .ws-title-h { font-size: clamp(24px, 3.2vw, 38px); font-weight: 700; letter-spacing: -0.03em; }
body.t-reflow .ws-title-sub { max-width: 48ch; margin: 12px auto 0; }
body.t-reflow .ws-photogrid { padding: 0; }
body.t-reflow .ws-photogrid-grid { max-width: 860px; margin: 0 auto; padding: 0 22px; grid-template-columns: repeat(3, 1fr); gap: 12px; }

/* the page's breathing point: no heading, no picture, twice the air of anything
   else. :has() and never :nth-of-type — the hero is the first section element */
body.t-reflow .ws-richtext:not(:has(.ws-h2)) { padding: 190px 0; }
body.t-reflow .ws-richtext .ws-container { max-width: 640px; }
body.t-reflow .ws-richtext p { text-align: center; font-size: 18.5px; line-height: 1.85; color: var(--text); }

/* strip two — four across, deliberately breaking the six-up rhythm above */
body.t-reflow .ws-team { padding: 0 0 90px; }
body.t-reflow .ws-team .ws-container { max-width: none; padding: 0 2px; }
body.t-reflow .ws-team .ws-h2 { font-size: 11px; text-transform: uppercase; letter-spacing: 0.22em; font-weight: 700; color: var(--muted); margin: 0 0 32px; }
body.t-reflow .ws-team-grid { grid-template-columns: repeat(4, 1fr); gap: 2px; }
body.t-reflow .ws-member-photo img { width: 100%; height: auto; aspect-ratio: 3 / 4; border-radius: 0; margin: 0 0 16px; }
body.t-reflow .ws-member strong { font-size: 15px; letter-spacing: -0.01em; color: var(--heading); }
body.t-reflow .ws-member .muted { display: block; margin-top: 5px; font-size: 11px; text-transform: uppercase; letter-spacing: 0.16em; color: #b7c48a; }
body.t-reflow .ws-member p { max-width: 32ch; margin: 13px auto 0; padding: 0 16px; font-size: 13.5px; line-height: 1.65; color: var(--muted); }

/* the banner — the only type on a photograph on the whole page */
body.t-reflow #hero-2 { min-height: 58vh; align-items: center; --hero-a: rgba(10,13,12,.42); --hero-b: rgba(10,13,12,.62); }
body.t-reflow #hero-2 .ws-hero-inner { max-width: 820px; padding: 70px 22px; }
body.t-reflow #hero-2 h1 { font-size: clamp(24px, 3.4vw, 42px); max-width: 22ch; }
body.t-reflow #hero-2 p { font-size: 16px; text-transform: none; letter-spacing: 0; max-width: 46ch; margin: 0; }

/* the form closes narrow on the same centre line */
body.t-reflow .ws-contact { padding: 116px 0 132px; }
body.t-reflow .ws-contact .ws-container { max-width: 620px; }
body.t-reflow .ws-contact .ws-h2 { font-size: clamp(22px, 2.8vw, 30px); letter-spacing: -0.02em; }
body.t-reflow .ws-contact .ws-sub { max-width: 46ch; margin-bottom: 40px; }
body.t-reflow .ws-field label, body.t-reflow .ws-fieldset legend { font-size: 11px; text-transform: uppercase; letter-spacing: 0.16em; font-weight: 700; color: var(--muted); }
body.t-reflow .ws-field input, body.t-reflow .ws-field textarea, body.t-reflow .ws-field select { background: #232927; border-color: #333b36; border-radius: 0; color: #e6eae1; }
body.t-reflow .btn.brand { background: #b7c48a; color: #1c211f; border-radius: 0; text-transform: uppercase; letter-spacing: 0.2em; font-size: 11px; font-weight: 700; padding: 15px 30px; }
body.t-reflow .btn.brand:hover { background: #c8d4a0; }

@media (max-width: 900px) {
  body.t-reflow .ws-section { padding: 62px 0; }
  body.t-reflow .ws-hero-inner { padding-top: 25vh; }
  body.t-reflow .ws-gallery-grid { grid-template-columns: repeat(3, 1fr); }
  body.t-reflow .ws-photogrid-grid { grid-template-columns: repeat(2, 1fr); }
  body.t-reflow .ws-team-grid { grid-template-columns: repeat(2, 1fr); }
  body.t-reflow .ws-titleblock { padding: 66px 0 24px; }
  body.t-reflow .ws-richtext:not(:has(.ws-h2)) { padding: 96px 0; }
  body.t-reflow .ws-team { padding: 0 0 56px; }
  body.t-reflow .ws-contact { padding: 66px 0 78px; }
}

html[data-theme="dark"] body.t-reflow.ws-body { --bg: #121614; --fg: #a7aea4; --heading: #e2e7dd; --text: #a7aea4; --muted: #838b80; }
html[data-theme="dark"] body.t-reflow { background: #121614; }
html[data-theme="dark"] body.t-reflow .ws-nav { background: color-mix(in srgb, #121614 62%, transparent); }
html[data-theme="dark"] body.t-reflow .ws-footer { border-top-color: #222925; }
html[data-theme="dark"] body.t-reflow .ws-richtext p { color: var(--text); }
html[data-theme="dark"] body.t-reflow .ws-member p, html[data-theme="dark"] body.t-reflow .ws-sub, html[data-theme="dark"] body.t-reflow .ws-title-sub { color: var(--muted); }
html[data-theme="dark"] body.t-reflow .ws-member .muted { color: #c2ce97; }
html[data-theme="dark"] body.t-reflow .ws-field input, html[data-theme="dark"] body.t-reflow .ws-field textarea, html[data-theme="dark"] body.t-reflow .ws-field select { background: #1a201d; border-color: #2a312d; color: #e2e7dd; }
html[data-theme="dark"] body.t-reflow .btn.brand { background: #c2ce97; color: #121614; }
html[data-theme="dark"] body.t-reflow .btn.brand:hover { background: #d2dcaf; }