/* Clybourn Creative Group: one bold sans (Jost), a near-black ground, bone type, and flat brass, the metal of
 * the engraving plate, as the only accent. No lines, no glass, no shadows at rest: tone steps and space do the work. The page sells a vision, not a shop: no hours, no directions.
 * Motion is scroll-driven CSS where the browser supports it; everything reads fully without it.
 */

/* ── Base ─────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html, body { overflow-x: clip; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0; background: var(--ground); color: var(--ink);
  font-family: var(--sans); font-size: var(--t-body); line-height: 1.6; font-weight: 400;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
img { display: block; max-width: 100%; height: auto; }
picture { display: contents; }
figure, p, dl, dd, ul, h1, h2, h3 { margin: 0; }
ul { padding: 0; list-style: none; }
h1, h2, h3 { font-weight: inherit; }
a { color: inherit; }
a, button, summary { touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
button { font: inherit; color: inherit; cursor: pointer; }
:focus-visible { outline: 2px solid var(--brass-ink); outline-offset: 3px; }
::selection { background: var(--brass); color: var(--engrave); }
main:focus { outline: none; }
.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; }
.wrap {
  width: 100%; max-width: calc(var(--wrap) + 2 * var(--gutter)); margin-inline: auto;
  padding-left: max(var(--gutter), env(safe-area-inset-left, 0px));
  padding-right: max(var(--gutter), env(safe-area-inset-right, 0px));
}

/* ── Type roles ───────────────────────────────────────────────── */
.display, .hero__title, .sec__title, .stats dd {
  font-weight: 700; text-transform: uppercase; letter-spacing: -0.03em; line-height: 0.86;
}
/* small type is sentence case at a readable size: captions, links, buttons, credits, the clock */
.bar__nav a, .menu summary, .motion-toggle, .skip, .btn, .ethos__link, .tree__go, .clients__label, .clip__by, .clip__who, .clip__link,
.since__cap, .group__big dt, .tree__stats dt, .cabinet__item figcaption, .work__item figcaption, .reel__credit,
.reel__watch-label, .rail__count, .bar__clock, .menu__clock, .foot__legal, .story__note {
  font-size: var(--t-small); font-weight: 500; letter-spacing: 0; text-transform: none; line-height: 1.45;
}

/* One button shape (square corners everywhere), brass for the main action */
.btn {
  display: inline-flex; align-items: center; justify-content: center; min-height: 3.25rem; padding: 0 1.75rem; white-space: nowrap;
  background: var(--btn); color: var(--btn-ink); text-decoration: none;
  transition: transform 160ms var(--ease), background-color 220ms ease;
}
.btn--brass { background: var(--brass-ink); }
.btn:active { transform: scale(0.97); transition-duration: 100ms; }
/* one flat fill; the arrow sits in the label and leans toward where it goes */
.btn, .bar__cta { gap: 0.6rem; }
.btn__ico { display: inline-block; flex: none; transition: transform 200ms var(--ease-out); }

.skip { position: absolute; z-index: 60; left: max(1rem, env(safe-area-inset-left, 0px)); top: 1rem; padding: 0.75rem 1.25rem; background: var(--btn); color: var(--btn-ink); text-decoration: none; transform: translateY(-200%); }
.skip:focus-visible { transform: none; outline-color: var(--btn-ink); outline-offset: -4px; }

/* ── Top bar (68px) ───────────────────────────────────────────── */
/* clear over the film; once the page moves, a plain bar one tone up from the page follows it down */
.bar { position: fixed; inset: 0 0 auto 0; z-index: 30; transition: background-color 300ms var(--ease-out); }
.bar.is-solid { background: var(--ground-3); }
@media (prefers-contrast: more) { :root { --muted: var(--ink-2); } .bar.is-solid { background: var(--ground-2); } }
.top-mark { position: absolute; top: 0; left: 0; width: 1px; height: 6rem; pointer-events: none; }
:root { --bar-h: 4.25rem; }
section[id], [id="top"] { scroll-margin-top: var(--bar-h); }
.bar__inner { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; min-height: 4.25rem; padding-top: env(safe-area-inset-top, 0px); }
.bar :focus-visible { outline-color: var(--ink); }
.brand { display: inline-flex; align-items: center; gap: 0.85rem; min-height: 2.75rem; text-decoration: none; line-height: 1; }
.brand__mark { display: block; flex: none; height: 1.75rem; width: auto; aspect-ratio: 116 / 50; color: var(--ink); }   /* the engraved CCG (assets/logo) */
.brand__rule { flex: none; width: 2px; height: 1.6rem; background: currentColor; opacity: 0.3; }
.brand__words { display: inline-block; white-space: nowrap; }
.brand__name, .brand__sub { font-size: var(--t-small); text-transform: uppercase; letter-spacing: 0.12em; }
.brand__name { font-weight: 600; }
.brand__sub { font-weight: 400; color: var(--ink-2); }
@media (max-width: 47.99rem) {   /* the one-line name and Menu share a phone's width */
  .bar__inner { gap: 0.75rem; }
  .brand { gap: 0.55rem; }
  .brand__mark { height: 1.35rem; }
  .brand__rule { height: 1.2rem; }
  .brand__name, .brand__sub { font-size: 0.8125rem; letter-spacing: 0.05em; }
}
@media (max-width: 29.99rem) { .menu__word { display: none !important; } .menu summary { padding: 0 0.5rem; } }   /* on a phone the two lines say Menu; the word needs the room the name takes */
/* the time in Chicago, set by site.js */
.bar__clock { display: none; margin: 0 auto 0 0; color: var(--ink-2); white-space: nowrap; font-variant-numeric: tabular-nums; }
.bar__clock time { color: var(--ink); }
.menu__clock { margin: 0.25rem 0 1rem; color: var(--ink-2); white-space: nowrap; }
.menu__clock[hidden], .bar__clock[hidden] { display: none; }
.bar__nav { display: none; align-items: center; gap: 2rem; }
.bar__nav a { position: relative; display: inline-flex; align-items: center; justify-content: center; min-height: 2.75rem; min-width: 2.75rem; text-decoration: none; white-space: nowrap; }
.bar__nav a:not(.bar__cta)::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0.55rem; height: 2px; background: currentColor; transform: scaleX(0); transform-origin: right; transition: transform 250ms var(--ease-out); }
.bar__cta { padding: 0 1.1rem; background: var(--brass-ink); color: var(--btn-ink); transition: background-color 200ms ease; }   /* brass: the one main action on every screen */
.menu { position: relative; }
.menu summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: center; min-height: 2.75rem; min-width: 2.75rem; padding: 0 0.25rem; }
.menu summary::-webkit-details-marker { display: none; }
.menu__panel { position: fixed; inset: 0; z-index: 1; display: grid; align-content: center; gap: 0.25rem; padding: 6rem max(var(--gutter), 1.5rem) 3rem;
  background: var(--ground); }
.menu summary { position: relative; z-index: 2; gap: 0.7rem; }
.menu__icon { position: relative; display: inline-block; width: 1.15rem; height: 0.7rem; }
.menu__icon i { position: absolute; left: 0; right: 0; height: 2px; background: currentColor; transition: transform 260ms var(--ease-out); }
.menu__icon i:first-child { top: 0; }
.menu__icon i:last-child { bottom: 0; }
.menu[open]:not(.is-out) .menu__icon i:first-child { transform: translateY(calc(0.35rem - 1px)) rotate(45deg); }
.menu[open]:not(.is-out) .menu__icon i:last-child { transform: translateY(calc(-0.35rem + 1px)) rotate(-45deg); }
.menu__word--close, .menu[open]:not(.is-out) .menu__word--open { display: none; }
.menu[open]:not(.is-out) .menu__word--close { display: inline; }
.menu[open] .menu__panel a { font-size: var(--t-chapter); font-weight: 700; text-transform: uppercase; letter-spacing: -0.02em; line-height: 1.05; min-height: 3.75rem; color: var(--ink); }
.bar .brand { position: relative; z-index: 2; }
html.menu-open { overflow: hidden; }
.menu__panel a { display: flex; align-items: center; min-height: 2.75rem; text-decoration: none; }

/* ── Hero: the film through the words ─────────────────────────── */
.hero { position: relative; background: var(--ground-2); }
.hero__stage { position: relative; height: 100svh; min-height: 36rem; overflow: hidden; isolation: isolate; }
.hero__film { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero__shade { position: absolute; inset: 0; background: linear-gradient(to top, rgba(10, 9, 8, 0.8) 0%, rgba(10, 9, 8, 0.38) 24%, rgba(10, 9, 8, 0) 44%), linear-gradient(to bottom, rgba(10, 9, 8, 0.62) 0%, rgba(10, 9, 8, 0) 24%); }   /* taste-skill-ignore: a neutral scrim, kept low so the film leads; the top band keeps the header readable on bright frames */
.hero__copy { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; display: grid; gap: 1.5rem; padding-bottom: calc(2rem + env(safe-area-inset-bottom, 0px)); }
.hero__words { display: grid; gap: 1rem; }
.hero__title { color: var(--ink); font-size: var(--t-head); }
.hero__title span { display: inline-block; white-space: nowrap; }
.hero__lede { max-width: 28rem; line-height: 1.5; color: var(--ink); }
.hero__actions { display: flex; align-items: center; gap: 1.5rem; }
.hero :focus-visible { outline-color: var(--ink); }

/* Pause / play for the film and the logos */
.motion-toggle { display: inline-flex; align-items: center; gap: 0.6rem; min-height: 2.75rem; padding: 0 0.25rem 0 0; border: 0; background: none; color: var(--ink); }
.motion-toggle::before { content: ""; flex: none; width: 0.55rem; height: 0.7rem; border-inline: 2px solid currentColor; }
.motion-toggle[data-state="paused"]::before { border: 0; width: 0; height: 0; border-block: 0.36rem solid transparent; border-inline-start: 0.6rem solid currentColor; }
html:not(.js) .motion-toggle { display: none; }

/* ── Clients ──────────────────────────────────────────────────── */
.logos__title { display: flex; align-items: center; justify-content: center; gap: 0.6rem; font-size: var(--t-name); font-weight: 500; line-height: 1; color: var(--ink-2); }   /* centred over the logos */
.logos__mark { height: 1.45rem; width: auto; flex: none; color: var(--brass-ink); }
.logos { padding-block: clamp(2.75rem, 5vw, 4rem); display: grid; gap: 2rem; background: var(--ground-2); }   /* the film's band carries on under the clients */
.marquee { display: flex; overflow: hidden; }
.marquee__track { flex: none; display: flex; align-items: center; gap: clamp(3rem, 6vw, 5.5rem); padding-inline-end: clamp(3rem, 6vw, 5.5rem); }
.marquee__track li { flex: none; height: 4.5rem; display: grid; place-items: center; }
.mq-logo { display: block; height: var(--h); aspect-ratio: var(--ar); background: var(--ink-2); opacity: 0.82; -webkit-mask: var(--m) center / contain no-repeat; mask: var(--m) center / contain no-repeat; }   /* one tone for every client, trimmed to the ink so the gaps are true */

/* ── Company logos: one flat finish for all three ─────────────
 * Each logo is a one-colour mask (assets/logos/mono) painted in the page ink; a link to the company warms it to brass. */
.co-logo {
  display: block; background-color: var(--ink);
  -webkit-mask: var(--m) center / contain no-repeat; mask: var(--m) center / contain no-repeat;
  transition: background-color 250ms ease;
}
.co-logo--fc { --m: var(--m-l-frame-chicago-mono); aspect-ratio: 1; }
.co-logo--cas { --m: var(--m-l-cas-mark-mono); aspect-ratio: 1; }
.co-logo--el { --m: var(--m-l-engrave-live-mono); aspect-ratio: 843 / 192; }

/* ── Section heads ────────────────────────────────────────────── */
.sec__title { font-size: var(--t-chapter); }   /* the hero line and the 600,000+ keep the bigger size */
@media (max-width: 47.99rem) { .sec__title { font-size: var(--t-head); } }   /* a phone keeps its edge-to-edge heads */

/* ── The ethos of each company, told in photographs ───────────── */
.ethos { padding-block: clamp(4.5rem, 9vw, 8rem); }
.ethos--cas { background: var(--ground-3); }   /* the middle chapter one tone up, so the three read apart without a line */
.ethos__grid { display: grid; gap: 2.5rem; align-items: center; }
.ethos__text { display: grid; justify-items: start; gap: 1.25rem; max-width: 34rem; }
.ethos__text .co-logo--fc, .ethos__text .co-logo--cas { height: 4.5rem; }
.ethos__text .co-logo--el { width: 12rem; }
.ethos__title { font-weight: 700; text-transform: uppercase; letter-spacing: -0.02em; line-height: 0.95; font-size: var(--t-chapter); }
.ethos__body { line-height: 1.55; color: var(--ink-2); }
.ethos__link { display: inline-flex; align-items: center; gap: 0.5em; min-height: 2.75rem; color: var(--ink); text-decoration: underline; text-decoration-color: var(--brass-ink); text-decoration-thickness: 2px; text-underline-offset: 0.4em; }
.ph { overflow: hidden; background: var(--ground-2); }
.ph__img { width: 100%; height: 100%; object-fit: cover; transition: transform 300ms var(--ease-out); }
.ethos__photos { display: grid; gap: 0.75rem; }
.ethos__photos--fc { grid-template-columns: 1fr 1fr; grid-template-rows: auto auto; }
.ethos__photos--fc .ph--tall { grid-row: span 2; }   /* fills the height of the two beside it */
.ethos__photos--fc .ph--wide, .ethos__photos--fc .ph--wide2 { aspect-ratio: 4 / 3; }
.ethos__photos--el { grid-template-columns: 1fr 1fr; grid-template-rows: auto auto auto; }   /* as Frame Chicago's, with the runners across the foot */
.ethos__photos--el .ph--tall { grid-row: span 2; }
.ethos__photos--el .ph--wide, .ethos__photos--el .ph--wide2 { aspect-ratio: 4 / 3; }
.ethos__photos--el .ph--pano { grid-column: 1 / -1; aspect-ratio: 2 / 1; }
/* the full-width chapter: the photograph fills the screen, the words sit over its shaded lower half */
/* Frame Chicago: a wall of recently framed work, two rows drifting in opposite directions */
.work { margin-top: clamp(4rem, 8vw, 6.5rem); display: grid; gap: clamp(1.5rem, 3vw, 2.25rem); }
.work__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 0.5rem 2rem; }
.work__title { font-weight: 600; font-size: var(--t-statement); line-height: 1.1; color: var(--ink); letter-spacing: -0.01em; }
.work__note { max-width: 60ch; color: var(--ink-2); }
.work__rows { display: grid; gap: clamp(1.5rem, 3vw, 2.5rem); }
.work__row { display: flex; overflow: hidden; }
.work__track { flex: none; display: flex; align-items: flex-start; gap: clamp(1rem, 2vw, 1.75rem); padding-inline-end: clamp(1rem, 2vw, 1.75rem); }
.work__item figure { margin: 0; display: grid; gap: 0.75rem; }
.work__item img { height: clamp(12rem, 22vw, 20rem); width: auto; background: var(--ground-2); transition: transform 300ms var(--ease-out); }
.work__item figcaption { width: 0; min-width: 100%; display: grid; gap: 0.15rem; }
.work__item figcaption b { color: var(--ink); font-weight: 600; }
.work__item figcaption span { color: var(--muted); }

/* Chicago Award Source: real pieces from the shop, set out like a cabinet */
.cas__head { display: grid; gap: 1.5rem 3rem; margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.cas__intro, .cas__more { display: grid; justify-items: start; gap: 1.25rem; align-content: end; }
.cas__intro .co-logo--cas { height: 4.5rem; }
.cas__more .ethos__body { max-width: 34rem; }
.cabinet { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(0.75rem, 1.6vw, 1.25rem); }
.cabinet__item figure { margin: 0; display: grid; gap: 0.75rem; }
.cabinet__img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; background: var(--ground-2); transition: transform 300ms var(--ease-out); }
.cabinet__item figure { overflow: hidden; }
.cabinet__item figcaption { color: var(--ink-2); }

/* ── What we make: the 81, the line, and the wall it's about ──── */
.story { padding-block: var(--section); }
.story__grid { display: grid; gap: clamp(2.5rem, 5vw, 4rem); }
.story__words { display: grid; gap: clamp(1.75rem, 3vw, 2.5rem); justify-items: start; align-content: center; }
.since { display: grid; justify-items: start; gap: 0.75rem; }
.since__mark { width: min(17rem, 56vw); height: auto; display: block; overflow: visible; color: var(--brass-ink); }
.since__cut { stroke: var(--ground); }   /* the cut is the section's ground, drawn through the brass */
.since__cap { color: var(--muted); }
.mission { display: grid; gap: 0.4em; font-size: var(--t-statement); }
.mission__line { font-weight: 600; font-size: var(--t-statement); line-height: 1.2; letter-spacing: -0.015em; color: var(--ink); }
.mission__line span { display: block; }
.mission__kept { color: var(--brass-ink); }   /* the engraved line: brass, like the 81 above it */
.story--bench { position: relative; isolation: isolate; overflow: hidden; min-height: min(56rem, 92svh); display: grid; align-items: end; background: var(--ground-2); }
.story__photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 60% 50%; }   /* picture is display: contents in the reset, so the image itself is placed */
.story__shade { position: absolute; inset: 0; background: rgba(10, 9, 8, 0.66); }   /* taste-skill-ignore: a flat neutral scrim so the words and the 81 read over the bench */
.story__wm { position: absolute; right: calc(max(0px, (100% - var(--wrap) - 2 * var(--gutter)) / 2) + var(--gutter)); bottom: var(--section); width: min(34vw, 30rem); opacity: 0.42; pointer-events: none; }   /* the 81, as a watermark on the bench, level with the words */
.story__wm .since__mark { width: 100%; }
.story__wm .since__cut { stroke: var(--ink); }   /* over the dark bench the cut is drawn in bone, so it reads as it engraves */
.story--bench .story__words { position: relative; }
.story__note { margin: 0; color: var(--ink-2); }
@media (max-width: 47.99rem) {   /* on a phone the bench fills the screen: the 81 at the top right, the words at the foot */
  .story--bench { min-height: 100svh; }
  .story__wm { right: var(--gutter); bottom: auto; top: 12%; width: 58vw; }
}

/* ── The group: the name and the one figure, then the three companies ── */
.group { padding-block: var(--section); display: grid; gap: clamp(3rem, 6vw, 5rem); background: var(--ground-3); }
.group__top { display: grid; gap: 1.5rem 3rem; }
.group__words { display: grid; gap: 1.25rem; }
.group__lede { font-weight: 600; font-size: var(--t-statement); line-height: 1.2; color: var(--ink); letter-spacing: -0.01em; }

/* ── On Instagram ───────────────────────────────────────────── */
.insta { padding-block: var(--section); background: var(--ground-3); }
.insta__grid { display: grid; gap: clamp(1.5rem, 3vw, 2.5rem); }
.insta__head { display: grid; gap: 1.25rem 3rem; align-items: end; }
.insta__side { display: grid; justify-items: start; gap: 1.25rem; }
.insta__side .insta__btn { margin: 0; }
.insta__n { font-weight: 700; font-size: var(--t-head); line-height: 0.9; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--ink); }
.insta__what { max-width: 30rem; line-height: 1.55; color: var(--ink-2); }
.insta__btn { margin-top: 0.25rem; }
.insta--crowd { position: relative; isolation: isolate; overflow: hidden; }
.insta__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 38%; }   /* picture is display: contents in the reset, so the image itself is placed */
.insta__shade { position: absolute; inset: 0; background: rgba(10, 9, 8, 0.66); }   /* taste-skill-ignore: a flat neutral scrim so the figure reads over the crowd */
.insta--crowd .insta__grid { position: relative; }

/* the team, framed the way Frame Chicago frames a print: a dark mat, a brass fillet, and a gallery wall label */
.careers__photo { margin-top: clamp(3rem, 6vw, 5rem); }
.framed { position: relative; margin: 0; }
.framed__mat { position: relative; padding: clamp(0.9rem, 2vw, 1.5rem); background: var(--ground-2); }
.framed__pic { overflow: hidden; border: 3px solid var(--brass); }   /* the fillet: a gilded strip, not a hairline */
.framed__pic img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; object-position: 50% 50%; transform: scale(1.18); transform-origin: 45% 90%; transition: transform 300ms var(--ease-out); }   /* on a phone, in close on the people */
.wall-label { position: relative; z-index: 1; display: grid; gap: 0.15rem; width: min(calc(100% - 2rem), 20rem); margin: -1.75rem clamp(1rem, 3vw, 2.5rem) 0 auto; padding: 1rem 1.15rem 1.1rem;
  background: #f1f0ed; color: #1b1a18; font-size: var(--t-small); line-height: 1.4; }
.wall-label__mark { height: 0.95rem; width: auto; color: #1b1a18; margin-bottom: 0.5rem; }
.wall-label__who { font-weight: 600; }
.wall-label__what { color: #45423d; margin-top: 0.15rem; }
.wall-label__credit { margin-top: 0.45rem; color: #5f5b55; }

/* client and venue rows inside the company chapters */
.clients { display: flex; flex-wrap: wrap; align-items: center; gap: 0.85rem 1.75rem; margin-top: 0.75rem; }
.clients__label { color: var(--muted); }
.clients__list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 2rem; }
.client-logo { display: block; height: var(--h); aspect-ratio: var(--ar); max-width: 100%; background: var(--ink-2); -webkit-mask: var(--m) center / contain no-repeat; mask: var(--m) center / contain no-repeat; }

/* The group: one root, three companies branching from it */
.group__big { margin: 0; display: grid; gap: 0.4rem; }
.group__big dd { margin: 0; font-weight: 700; font-size: var(--t-head); line-height: 0.95; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; color: var(--ink); }
.group__big dt { max-width: 22ch; color: var(--muted); }
.tree { position: relative; }
.tree__branches { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; position: relative; }
.tree__co { position: relative; display: grid; justify-items: center; align-content: start; gap: 0.85rem; padding: 2rem 1rem 0; text-align: center; }
.tree__co .co-logo--fc, .tree__co .co-logo--cas { height: 5rem; }
.tree__co .co-logo--el { width: 12rem; margin-block: calc((5rem - 12rem * 192 / 843) / 2); }   /* same box height as the square marks, so the columns line up */
.tree__field { font-weight: 700; font-size: var(--t-statement); line-height: 1; letter-spacing: -0.01em; text-transform: uppercase; color: var(--ink); }
.tree__value { font-weight: 600; font-size: var(--t-name); line-height: 1.2; color: var(--brass-ink); }   /* the value each company carries, cut in brass like a plate */
.tree__claim { font-weight: 600; line-height: 1.3; color: var(--ink-2); max-width: 20ch; }
.tree__go { display: inline-flex; align-items: center; gap: 0.5em; min-height: 2.75rem; margin-bottom: 1.5rem; color: var(--brass-ink); text-decoration: underline; text-decoration-color: transparent; text-decoration-thickness: 2px; text-underline-offset: 0.4em; transition: text-decoration-color 250ms ease; }
.tree__go:focus-visible { text-decoration-color: var(--brass-ink); }
#companies { scroll-margin-top: calc(var(--bar-h) + 1rem); }
.tree__stats { margin: 0.5rem 0 0.25rem; display: flex; justify-content: center; gap: 2.25rem; }
.tree__stats div { display: flex; flex-direction: column; gap: 0.35rem; }   /* the figure, then what it counts */
.tree__stats dd { margin: 0; font-weight: 700; font-size: var(--t-statement); line-height: 1; color: var(--ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
.tree__stats dt { color: var(--muted); }
@media (max-width: 63.99rem) {
  .tree__branches { gap: 0; padding-left: 2.25rem; }
  .tree__co { justify-items: start; text-align: left; padding: 0 0 3.5rem; }
  .tree__co:last-child { padding-bottom: 0; }
  .tree__stats { justify-content: flex-start; }
  .tree__co::after { content: ""; position: absolute; left: -2.25rem; top: 0; bottom: 0; width: 3px; background: var(--brass); transform-origin: top; }   /* the stem */
  .tree__co:last-child::after { bottom: auto; height: calc(2.5rem + 1.5px); }   /* it ends at the last branch */
  .tree__co::before { content: ""; position: absolute; left: -2.25rem; top: calc(2.5rem - 1.5px); width: 1.5rem; height: 3px; background: var(--brass); transform-origin: left; }   /* a branch to the logo's middle */
}

/* ── White papers: three outside figures, each a way into its paper on thesis.html (styles in thesis.css) ── */
.thesis { padding-block: var(--section); background: var(--ground-2); }
.thesis__grid { display: grid; gap: 0; }
.thesis__head { display: grid; justify-items: start; gap: 1.25rem; }
.thesis__lede { max-width: 44ch; font-size: var(--t-name); line-height: 1.4; color: var(--ink-2); }
.thesis__all { display: inline-flex; align-items: center; gap: 0.5em; min-height: 2.75rem; color: var(--ink); text-decoration: underline; text-decoration-color: var(--brass-ink); text-decoration-thickness: 2px; text-underline-offset: 0.4em; }

/* ── In the press ─────────────────────────────────────────────
 * One clipping per story on a rail the reader swipes, scrolls sideways or steps through with the arrows. */
.press-sec { padding-top: var(--section); overflow: hidden; }
.press-head { display: grid; gap: 1.25rem; margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.press-head__lede { max-width: 34rem; color: var(--ink-2); }

/* the rail: one card per story, side by side; the reader swipes, scrolls sideways or uses the arrows */
.rail { margin-top: clamp(3rem, 6vw, 4.5rem); padding-bottom: var(--section); }
.rail__top { display: flex; justify-content: flex-end; align-items: center; gap: 1rem; margin-bottom: 1.5rem; }
.reel__label { margin: 0; font-size: var(--t-name); font-weight: 600; line-height: 1.2; color: var(--ink); }
.rail__nav { display: flex; align-items: center; gap: 0.75rem; }
.rail__count { margin-right: 0.5rem; font-variant-numeric: tabular-nums; color: var(--muted); }
.rail__count b { color: var(--ink); font-weight: 600; }
.rail__btn { width: 2.75rem; height: 2.75rem; display: grid; place-items: center; background: var(--ground-3); color: var(--ink); border: 0; font-size: var(--t-body); cursor: pointer; transition: background-color 200ms ease, color 200ms ease, opacity 200ms ease; }
.rail__btn:focus-visible { background: var(--brass-ink); color: var(--ground); }
.rail__btn:disabled { opacity: 0.35; cursor: default; background: var(--ground-3); color: var(--ink); }
.rail__list { list-style: none; margin: 0; display: grid; grid-auto-flow: column; grid-auto-columns: min(86vw, 26rem); gap: clamp(0.85rem, 1.6vw, 1.25rem);
  overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none;
  padding: 0.25rem max(var(--gutter), calc((100% - var(--wrap)) / 2 + var(--gutter))); scroll-padding-inline: max(var(--gutter), calc((100% - var(--wrap)) / 2 + var(--gutter))); }
.rail__list::-webkit-scrollbar { display: none; }
.rail__list img { -webkit-user-drag: none; user-select: none; }
@media (hover: hover) and (pointer: fine) { .rail__list { cursor: grab; } }
.rail__list.is-grabbing, .rail__list.is-gliding { scroll-snap-type: none; scroll-behavior: auto; }   /* the hand or the spring has the rail; snapping waits */
.rail__list.is-grabbing { cursor: grabbing; user-select: none; }
.rail__list:focus-visible { outline: 2px solid var(--brass-ink); outline-offset: 4px; }
/* each story is its own article page on paper: the outlet's masthead in its real colours, the headline, the byline
 * and date as printed, a verbatim excerpt, and the phrase that matters marked like a highlighter, behind the words */
.rail__card { scroll-snap-align: start; display: flex; flex-direction: column; background: var(--paper); color: var(--paper-ink); }   /* every card the same size: the row sets the height */
.clip { flex: 1; display: flex; flex-direction: column; gap: 0.85rem; padding: clamp(1.15rem, 2.4vw, 1.9rem); }
.clip__mast { display: block; max-width: 100%; margin-bottom: 0.35rem; }
img.clip__mast { object-fit: contain; object-position: left center; }   /* every masthead one height; a wide one only shrinks to fit */
.clip__mast--ink { aspect-ratio: var(--ar); background-color: #111111; -webkit-mask: var(--m) left center / contain no-repeat; mask: var(--m) left center / contain no-repeat; }
.clip__head { margin: 0; font-family: var(--serif); font-weight: 700; font-size: var(--t-name); line-height: 1.12; letter-spacing: -0.01em; color: var(--paper-ink); text-wrap: balance; }
.clip__by { margin: 0; color: var(--paper-muted); }
.clip__by b { font-weight: 500; color: #45423c; }
.clip__ex { margin: 0.35rem 0 0; }
.clip__ex p { margin: 0; font-family: var(--serif); font-size: var(--t-body); line-height: 1.55; color: var(--paper-ink); text-wrap: pretty; }
.clip__mark { color: inherit; background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 20' preserveAspectRatio='none'><path d='M3 4.2 L62 2.8 L131 3.9 L199 2.4 L268 3.6 L337 2.5 L397 3.8 L399 17.2 L331 18.4 L262 16.9 L193 18.3 L124 17 L55 18.1 L1 16.8 Z' fill='%23efcd62'/></svg>") 0 90% / 100% 0.82em no-repeat; }   /* a muted highlighter with a slightly uneven edge */
.clip__who { margin: 0; color: var(--paper-muted); }
.clip__links { margin: auto 0 0; padding-top: 0.25rem; display: flex; flex-wrap: wrap; gap: 0 1.25rem; }
.clip__link { display: inline-flex; align-items: center; gap: 0.3em; min-height: 2.75rem; color: var(--paper-ink); text-decoration: underline; text-decoration-color: rgba(27, 26, 23, 0.35); text-decoration-thickness: 2px; text-underline-offset: 0.3em; transition: text-decoration-color 200ms ease; }
.clip__link span { display: inline-block; transition: transform 200ms var(--ease-out); }
.clip__link:focus-visible { text-decoration-color: var(--paper-ink); }
.rail__card :focus-visible { outline-color: var(--paper-ink); }
/* the story's photograph, credited, above its clipping; a television story's still plays the segment */
.rail__pic { position: relative; margin: 0; aspect-ratio: 3 / 2; overflow: hidden; background: #0b0a09; }
.rail__pic img { width: 100%; height: 100%; object-fit: cover; transition: transform 300ms var(--ease-out); }
.reel__credit { position: absolute; left: 0; right: 0; bottom: 0; padding: 2rem 0.8rem 0.6rem; font-weight: 400; color: var(--ink); background: linear-gradient(to top, rgba(10, 9, 8, 0.78), rgba(10, 9, 8, 0)); }   /* taste-skill-ignore: a neutral scrim under the credit */
.rail__pic--video .reel__credit { top: 0.6rem; left: 0.6rem; bottom: auto; right: auto; padding: 0.3rem 0.6rem; background: rgba(10, 9, 8, 0.72); }   /* on a broadcast still, a plain chip clear of the channel's own caption */
.reel__watch { position: absolute; inset: 0; display: block; }
.reel__play { position: absolute; left: 50%; top: 50%; width: 4rem; height: 4rem; margin: -2rem 0 0 -2rem; border-radius: 50%; background: var(--brass-ink); transition: transform 200ms var(--ease-out), background-color 200ms ease; }
.reel__play::after { content: ""; position: absolute; left: 54%; top: 50%; transform: translate(-50%, -50%); border-style: solid; border-width: 0.55rem 0 0.55rem 0.9rem; border-color: transparent transparent transparent var(--ground); }
.reel__watch:focus-visible .reel__play { transform: scale(1.08); background: var(--ink); }
.reel__watch-label { position: absolute; right: 0.6rem; top: 0.6rem; padding: 0.3rem 0.6rem; background: rgba(10, 9, 8, 0.72); color: var(--ink); }
.clip__head { font-family: var(--serif); }   /* the article's own title, quoted: set as text, not as one of our headings */
.rail__bar { margin-top: 1.5rem; height: 4px; background: var(--ground-3); overflow: hidden; }
.rail__bar i { display: block; height: 100%; width: 100%; background: var(--brass-ink); transform-origin: left; transform: scaleX(0.08); transition: transform 200ms linear; }

/* ── Careers ──────────────────────────────────────────────────── */
.careers { padding-block: var(--section); background: var(--ground-3); }
.careers__grid { display: grid; gap: clamp(2.5rem, 5vw, 4rem); }
.careers__head { display: grid; gap: 1.25rem; }
.careers__lede { max-width: 32rem; color: var(--ink-2); }
.careers__head { justify-items: start; }
.careers__btn { margin-top: 0.5rem; }
.careers__areas { display: grid; gap: 2.25rem 2rem; }
.careers__areas > div { display: grid; gap: 0.6rem; }
.careers__areas dt { font-weight: 600; font-size: var(--t-name); line-height: 1.2; color: var(--ink); }
.careers__areas dd { margin: 0; color: var(--ink-2); }

/* ── Contact ──────────────────────────────────────────────────── */
.contact { padding-block: var(--section); background: var(--ground-2); }
.contact__grid { display: grid; gap: 2rem 3rem; align-items: end; }
.contact__body { display: grid; gap: 1.75rem; max-width: 34rem; color: var(--ink-2); }
.contact__row { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.75rem; }
.contact__phone { font-weight: 600; font-size: var(--t-name); color: var(--ink); letter-spacing: 0.02em; }

/* ── Footer ───────────────────────────────────────────────────── */
.foot { background: var(--ground-2); padding-block: 1rem calc(2rem + env(safe-area-inset-bottom, 0px)); display: grid; gap: 2.5rem; }   /* the contact band runs on into the footer */
.foot__top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 2rem; }
/* the footer lockup is the header lockup, scaled as one piece: mark twice the type, same rule, same gap ratio */
.brand--foot .brand__mark { height: 1.75rem; }
.brand--foot .brand__name, .brand--foot .brand__sub { font-size: var(--t-small); letter-spacing: 0.12em; }
.foot__brands { display: flex; flex-wrap: wrap; align-items: center; gap: 1.5rem 2.5rem; }
.foot__brands a { display: grid; place-items: center; min-height: 3rem; }
.foot__brands .co-logo--fc, .foot__brands .co-logo--cas { height: 3rem; }
.foot__brands .co-logo--el { width: 9rem; }
.foot__base { padding-top: 0.5rem; }
.foot__legal { font-weight: 400; color: var(--muted); }
.foot :focus-visible { outline-color: var(--ink); }


/* hover movement only where there is a real pointer; a tap on a phone would leave it stuck */
@media (hover: hover) and (pointer: fine) {   /* hover only where there is a pointer to hover with; on a touch screen it would stick after a tap */
  .btn:hover { background: var(--btn-hover); }
  .btn--brass:hover { background: #e6cb95; }
  .bar__cta:hover { background: #e6cb95; }
  .motion-toggle:hover, .ethos__link:hover, .thesis__all:hover { color: var(--brass-ink); }
  .rail__btn:hover { background: var(--brass-ink); color: var(--ground); }
  .tree__go:hover { text-decoration-color: var(--brass-ink); }
  .clip__link:hover { text-decoration-color: var(--paper-ink); }
  .foot__brands a:hover .co-logo { background-color: var(--brass-ink); }
  .reel__watch:hover .reel__play { transform: scale(1.08); background: var(--ink); }
  .btn:hover .btn__ico, .bar__cta:hover .btn__ico { transform: translate(2px, -2px) scale(1.05); }
  .btn:hover .btn__ico--down { transform: translateY(3px) scale(1.05); }
  .ph:hover .ph__img { transform: scale(1.04); }
  .work__item:hover img { transform: translateY(-6px); }
  .cabinet__item:hover .cabinet__img { transform: scale(1.03); }
  .framed:hover .framed__pic img { transform: scale(1.03); }
  .clip__link:hover span { transform: translate(3px, -3px); }
  .rail__card:hover .rail__pic img { transform: scale(1.04); }
  .bar__nav a:not(.bar__cta):hover::after { transform: scaleX(1); transform-origin: left; }
  .tree__co:hover .co-logo { background-color: var(--brass-ink); }
}
.bar__nav a:not(.bar__cta):focus-visible::after { transform: scaleX(1); transform-origin: left; }

/* press feedback on everything pressable */
a, button, summary { -webkit-tap-highlight-color: transparent; }
.rail__btn, .bar__cta, .motion-toggle { transition-property: transform, border-color, color, background-color, opacity; transition-duration: 100ms; transition-timing-function: var(--ease-out); }
.bar__nav a:active, .menu__panel a:active, .ethos__link:active, .thesis__all:active, .tree__go:active, .clip__link:active, .brand:active, .foot__brands a:active { opacity: 0.6; transition: none; }   /* the highlight shows the instant the press lands */
.rail__btn:active:not(:disabled), .bar__cta:active, .motion-toggle:active, .menu summary:active { transform: scale(0.97); }
.rail__card .reel__watch:active .reel__play { transform: scale(0.98); }

/* ── Motion ───────────────────────────────────────────────────── */
@media (prefers-reduced-motion: no-preference) {
  .hero__title span { animation: rise 1200ms var(--ease) both; }
  .hero__title span:nth-of-type(2) { animation-delay: 90ms; }
  .hero__lede, .hero__actions { animation: rise-soft 1000ms var(--ease) 500ms both; }
  .marquee__track { animation: marquee 60s linear infinite; }
  .motion-paused .marquee__track { animation-play-state: paused; }
  .js .tree::before { transform: scaleY(0); transition: transform 450ms var(--ease-out) 100ms; }
  .js .tree__branches::before { transform: scaleX(0); transition: transform 600ms var(--ease-in-out) 350ms; }
  .js .tree__co::before { transform: scaleY(0); transition: transform 350ms var(--ease-out) 850ms; }
  .js .tree.is-in::before, .js .tree.is-in .tree__branches::before, .js .tree.is-in .tree__co::before { transform: none; }
  @media (max-width: 63.99rem) {   /* on a phone the stem draws down, then each branch reaches out */
    .js .tree__co::after { transform: scaleY(0); transition: transform 500ms var(--ease-out) calc(var(--b, 0) * 250ms); }
    .js .tree__co::before { transform: scaleX(0); transition: transform 350ms var(--ease-out) calc(var(--b, 0) * 250ms + 350ms); }
    .js .tree__co:nth-child(2) { --b: 1; } .js .tree__co:nth-child(3) { --b: 2; }
    .js .tree.is-in .tree__co::after { transform: none; }
  }
  .js .framed .wall-label { opacity: 0; transform: translateY(1rem); transition: opacity 600ms var(--ease-out) 400ms, transform 700ms var(--ease-out) 400ms; }
  .js .framed.is-in .wall-label { opacity: 1; transform: none; }
  /* The CCG is engraved wherever it appears: each letter is cut along its own line (C, C, the G, then its bar
   * pulled in), and once the letters stand the hairline runs through them. About 2.3 s; without script or with
   * reduced motion the mark is simply there. */
  /* the marker draws across its phrase, line after line, once the page is mostly in view */
  .js .clip__mark { background-size: 0% 0.82em; transition: background-size var(--d, 1200ms) cubic-bezier(0.45, 0, 0.55, 1) var(--w, 300ms); }
  .js .clip.is-marked .clip__mark { background-size: 100% 0.82em; }
  .js .ccg mask path { stroke-dasharray: 1.02 1.2; stroke-dashoffset: 1.02; }   /* the long gap keeps the hidden dash's edge off both ends of the path */
  .js .ccg.is-cut .ccg__ink path { animation: ccg-cut 620ms var(--ease-in-out) forwards; }
  .js .ccg.is-cut .ccg__ink path:nth-child(2) { animation-delay: 140ms; }
  .js .ccg.is-cut .ccg__ink path:nth-child(3) { animation-delay: 280ms; animation-duration: 640ms; }
  .js .ccg.is-cut .ccg__ink path:nth-child(4) { animation-delay: 880ms; animation-duration: 260ms; animation-timing-function: var(--ease-out); }
  .js .ccg.is-cut .ccg__cut path { animation: ccg-cut 900ms var(--ease) 1100ms forwards; }
  .js .ccg.is-cut .ccg__cut path:nth-child(2) { animation-delay: 1250ms; }
  .js .ccg.is-cut .ccg__cut path:nth-child(3) { animation-delay: 1400ms; }
  .work__track { animation: marquee 120s linear infinite; }
  .work__row--rev .work__track { animation-direction: reverse; animation-duration: 140s; }
  .work__row:focus-within .work__track, .motion-paused .work__track { animation-play-state: paused; }
  @media (hover: hover) and (pointer: fine) {   /* a mouse can hold a strip still to read it; a touch would freeze it */
    .marquee:hover .marquee__track, .work__row:hover .work__track { animation-play-state: paused; }
  }
  .js [data-reveal] { opacity: 0; transform: translateY(16px); transition: opacity 700ms var(--ease-out) var(--d, 0ms), transform 700ms var(--ease-out) var(--d, 0ms); }
  .js [data-reveal].is-in { opacity: 1; transform: none; }
  .js [data-reveal] .sec__title, .js .sec__title[data-reveal] { filter: blur(8px); }
  .js .sec__title[data-reveal] { transition: opacity 700ms var(--ease-out) var(--d, 0ms), transform 700ms var(--ease-out) var(--d, 0ms), filter 800ms var(--ease-out) var(--d, 0ms); }
  .js [data-reveal] .sec__title { transition: filter 800ms var(--ease-out); }
  .js [data-reveal].is-in .sec__title, .js .sec__title[data-reveal].is-in { filter: none; }
  /* the sheet runs on transitions, not keyframes, so it can be reversed mid-way; .is-out is both where it starts and where it goes */
  .menu__panel { transition: opacity 260ms var(--ease-out); }
  .menu__panel > * { transition: opacity 360ms var(--ease-out), transform 360ms var(--ease-out); }
  .menu__panel > :nth-child(2) { transition-delay: 40ms; } .menu__panel > :nth-child(3) { transition-delay: 80ms; }
  .menu__panel > :nth-child(4) { transition-delay: 120ms; } .menu__panel > :nth-child(5) { transition-delay: 160ms; } .menu__panel > :nth-child(6) { transition-delay: 200ms; }
  .menu.is-out .menu__panel { opacity: 0; transition-duration: 240ms; }
  .menu.is-out .menu__panel > * { opacity: 0; transform: translateY(1.5rem); transition-duration: 240ms; transition-delay: 0ms; }
  .js .since .since__cut > * { stroke-dasharray: 1.01 1; stroke-dashoffset: 1.01;   /* the 1% overlap closes the seam where each cut meets itself */
  transition: stroke-dashoffset 1800ms var(--ease) 300ms; }
  .js .since.is-in .since__cut > * { stroke-dashoffset: 0; }
  .js .since .since__cut > :nth-child(2) { transition-delay: 600ms; } .js .since .since__cut > :nth-child(3) { transition-delay: 900ms; } .js .since .since__cut > :nth-child(4) { transition-delay: 1100ms; }
  /* when GSAP is running (site.js) the scroll draws these lines instead of the one-off transitions above */
  .js.has-gsap .since .since__cut > *, .js.has-gsap .since.is-in .since__cut > * { stroke-dashoffset: var(--cut, 0); transition: none; }
  .js.has-gsap .tree::before, .js.has-gsap .tree.is-in::before { transform: scaleY(var(--trunk, 1)); transition: none; }
  .js.has-gsap .tree .tree__branches::before, .js.has-gsap .tree.is-in .tree__branches::before { transform: scaleX(var(--bar, 1)); transition: none; }
  .js.has-gsap .tree .tree__co::before, .js.has-gsap .tree.is-in .tree__co::before { transform: scaleY(var(--leg, 1)); transition: none; }
  @media (max-width: 63.99rem) {
    .js.has-gsap .tree .tree__co::after, .js.has-gsap .tree.is-in .tree__co::after { transform: scaleY(var(--stem, 1)); transition: none; }
    .js.has-gsap .tree .tree__co::before, .js.has-gsap .tree.is-in .tree__co::before { transform: scaleX(var(--leg, 1)); }
  }
}
@keyframes rise { from { transform: translateY(40%); opacity: 0.001; } to { transform: none; opacity: 1; } }
@keyframes rise-soft { from { transform: translateY(20px); opacity: 0.001; } to { transform: none; opacity: 1; } }
@keyframes ccg-cut { to { stroke-dashoffset: 0; } }
@keyframes marquee { to { transform: translateX(-100%); } }
@media (prefers-reduced-motion: reduce) {
  .marquee { flex-wrap: wrap; }
  .marquee__track { flex: 1 1 100%; flex-wrap: wrap; gap: 2rem 3.5rem; padding-inline: max(var(--gutter), calc((100% - var(--wrap)) / 2)); }
  .marquee__track[aria-hidden="true"] { display: none; }
  .marquee__track { justify-content: center; }
  @media (max-width: 47.99rem) {
    .marquee { flex-wrap: nowrap; overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none; }
    .marquee::-webkit-scrollbar { display: none; }
    .marquee__track { flex: none; flex-wrap: nowrap; justify-content: flex-start; padding-inline: var(--gutter); }
    .marquee__track li { scroll-snap-align: start; }
  }
  .work__row { overflow-x: auto; scroll-snap-type: x proximity; }
  .work__track[aria-hidden="true"] { display: none; }
  .work__item { scroll-snap-align: start; }
}

/* ── ≥ 48rem ──────────────────────────────────────────────────── */
@media (min-width: 48rem) {
  .brand--foot { gap: 1.1rem; }
  .brand--foot .brand__mark { height: 2.25rem; }
  .brand--foot .brand__rule { height: 2.05rem; }
  .brand--foot .brand__name, .brand--foot .brand__sub { font-size: var(--t-body); }
  .framed__pic img { aspect-ratio: 21 / 9; object-position: 50% 69%; transform: none; }   /* wide crop on the faces and the art wall */
  .wall-label { margin-top: -3.25rem; }
  .bar__clock:not([hidden]) { display: block; }
  .cabinet { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .hero__copy { grid-template-columns: minmax(0, 1fr) auto; align-items: end; }
  .careers__areas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ── ≥ 64rem ──────────────────────────────────────────────────── */
@media (min-width: 64rem) {
  .press-head { grid-template-columns: 5fr 7fr; align-items: end; gap: 2rem clamp(2rem, 4vw, 4rem); }
  .story__grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: center; gap: clamp(3rem, 6vw, 6rem); }
  .group__top { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: end; }
  .tree { margin-top: clamp(1rem, 3vw, 2rem); padding-top: 3.5rem; }
  .tree::before { content: ""; position: absolute; left: calc(50% - 1.5px); top: 0; width: 3px; height: 3.5rem; background: var(--brass); transform-origin: top; }
  .tree__branches { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: repeat(6, auto); gap: 0.85rem 0; }
  .tree__co { grid-row: span 6; grid-template-rows: subgrid; align-items: start; }   /* logo, field, value, claim, numbers and link line up across the three */
  .tree__branches::before { content: ""; position: absolute; top: 0; left: calc(16.667% - 1.5px); right: calc(16.667% - 1.5px); height: 3px; background: var(--brass); }
  .tree__co { padding-top: 3rem; }
  .tree__co::before { content: ""; position: absolute; top: 0; left: calc(50% - 1.5px); width: 3px; height: 2rem; background: var(--brass); transform-origin: top; }
  .insta__side { grid-template-columns: minmax(0, 36rem) auto; justify-content: space-between; align-items: end; gap: 2rem; }
  .cabinet { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .cas__head { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: end; }
  .bar__nav { display: flex; }
  .bar__clock:not([hidden]) { display: none; }   /* room for the full nav first; the clock returns on wide screens */
  .menu { display: none; }
  .ethos__grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(3rem, 6vw, 6rem); }
  .ethos--flip .ethos__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
  .contact__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
  .careers__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: start; }
}
@media (min-width: 82rem) {
  .bar__clock:not([hidden]) { display: block; }
}