/* ==========================================================================
   O&co — shared components
   Requires tokens.css. Page order of backgrounds (BG v.4 §6 Website):
   Off Black → Platinum → Light Grey → Off White, then Red CTA + Off Black footer.
   ========================================================================== */

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--off-black);
  background: var(--off-black);
  -webkit-font-smoothing: antialiased;
}

img, svg { display: block; max-width: 100%; }
h1, h2, h3, h4, p, ul, ol, dl, dd, blockquote, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; }
button { font: inherit; color: inherit; }

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Skip link: visually hidden until it receives keyboard focus */
.skip-link {
  position: absolute; left: var(--gutter); top: 1rem; z-index: 100;
  width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
  background: var(--off-white); color: var(--off-black);
  font-size: var(--fs-label); font-weight: 600; letter-spacing: var(--ls-nav); text-transform: uppercase;
  text-decoration: none;
}
.skip-link:focus {
  width: auto; height: auto; margin: 0; padding: 0.75rem 1rem;
  overflow: visible; clip: auto; clip-path: none;
}

:focus-visible { outline: 2px solid var(--turquoise); outline-offset: 3px; }

.wrap {
  width: min(100% - 2 * var(--gutter), var(--content-max));
  margin-inline: auto;
}

/* ---------- Section grounds ---------- */
.section { position: relative; padding-block: var(--space-xl); }

.bg-black     { background: var(--off-black);     color: var(--off-white); }
.bg-platinum  { background: var(--platinum-grey); color: var(--off-black); }
.bg-light     { background: var(--light-grey);    color: var(--off-black); }
.bg-offwhite  { background: var(--off-white);     color: var(--off-black); }
.bg-turquoise { background: var(--turquoise);     color: var(--off-white); }
.bg-red       { background: var(--cornell-red);   color: var(--off-white); }

/* A hairline between two adjacent grounds of similar value */
.seam-top { border-top: 1px solid rgb(26 26 26 / 0.12); }

/* ---------- Type roles ---------- */
.display {
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  line-height: var(--lh-head);
  letter-spacing: -0.005em;
}
.label {
  font-family: var(--font-body);
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  line-height: 1.5;
}
.script { font-family: var(--font-accent); font-weight: 400; }
.accent-turquoise { color: var(--turquoise); }
.accent-red { color: var(--cornell-red); }

.prose > * + * { margin-top: 1.1em; }
.prose--light { font-weight: 300; }

/* ---------- Header ---------- */
.site-header {
  position: relative;
  z-index: 10;
  background: var(--off-black);
  color: var(--off-white);
  border-bottom: 1px solid var(--on-dark-rule);
}
.site-header__inner {
  display: flex; align-items: center; justify-content: space-between;
  min-height: clamp(4.5rem, 7.8vw, 7rem);
}
.site-header__logo img { width: clamp(2.5rem, 3.8vw, 3.4rem); height: auto; }

.nav__list { display: flex; gap: clamp(1.25rem, 2.3vw, 2.1rem); }
.nav__link {
  font-size: clamp(0.8125rem, 0.7rem + 0.35vw, 1.125rem);
  font-weight: 500;
  letter-spacing: var(--ls-nav);
  text-transform: uppercase;
  text-decoration: none;
  transition: color 0.2s;
}
.nav__link:hover, .nav__link[aria-current="page"] { color: var(--turquoise); }
/* Contact stands out in Cornell Red; hover/focus/current still go Turquoise */
.nav__link--contact { color: var(--cornell-red); }
.nav__link--contact:hover, .nav__link--contact:focus-visible, .nav__link--contact[aria-current="page"] { color: var(--turquoise); }

.nav-toggle {
  display: none;
  background: none; border: 0; padding: 0.5rem 0; cursor: pointer;
  font-size: var(--fs-label); font-weight: 600;
  letter-spacing: var(--ls-nav); text-transform: uppercase;
}
.nav-toggle__bars { display: inline-block; width: 1.5rem; vertical-align: middle; margin-left: 0.6rem; }
.nav-toggle__bars span { display: block; height: 2px; background: currentColor; transition: transform 0.25s, opacity 0.25s; }
.nav-toggle__bars span + span { margin-top: 5px; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 860px) {
  .nav-toggle { display: block; }
  .nav {
    position: absolute; left: 0; right: 0; top: 100%;
    background: var(--off-black);
    border-bottom: 1px solid var(--on-dark-rule);
    padding: var(--space-s) var(--gutter) var(--space-m);
  }
  .nav[hidden] { display: none; }
  .nav__list { flex-direction: column; gap: 0; }
  .nav__link { display: block; padding: 0.9rem 0; font-size: 1rem; border-top: 1px solid var(--on-dark-rule); }
}
@media (min-width: 861px) {
  .nav[hidden] { display: block; } /* always visible on desktop, whatever JS did */
}

/* With JS, phones open the full-screen menu instead of the drop-down */
@media (max-width: 860px) { .js-menu .nav { display: none; } }

/* ---------- Floating menu control ----------
   Hidden while the hero is on screen; once it scrolls away, an Off Black disc
   with the white mark takes over the upper right. Its own disc and a Silver
   outer ring keep it legible on every section color. While the menu is open
   it becomes the close button. */
.fab {
  position: fixed; z-index: 101;
  top: clamp(0.875rem, 1.6vw, 1.5rem); right: clamp(0.875rem, 1.6vw, 1.5rem);
  width: clamp(3.25rem, 4vw, 3.75rem); aspect-ratio: 1; border-radius: 50%;
  display: grid; place-items: center; padding: 0; border: 0; cursor: pointer;
  background: var(--off-black); color: var(--off-white);
  box-shadow: inset 0 0 0 var(--ring) var(--on-dark-rule);
  opacity: 0; visibility: hidden; transform: scale(0.85);
  transition: opacity 0.3s var(--ease-cta), transform 0.3s var(--ease-cta), visibility 0s 0.3s;
}
.fab.is-visible, .fab[aria-expanded="true"] { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.fab__ring {
  position: absolute; inset: -6px; border-radius: 50%;
  border: 1px solid var(--silver-grey); pointer-events: none;
  transition: transform 0.35s var(--ease-cta), border-color 0.2s;
}
.fab:hover .fab__ring, .fab:focus-visible .fab__ring { transform: scale(1.12); border-color: var(--turquoise); }
.fab__mark { width: 58%; height: auto; transition: opacity 0.25s, transform 0.4s var(--ease-cta); }
/* Menu hint: a small Turquoise badge with three short lines */
.fab__hint {
  position: absolute; left: -5px; bottom: -5px;
  width: 22px; height: 22px; border-radius: 50%;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  background: var(--turquoise); border: 2px solid var(--off-black);
  transition: transform 0.3s var(--ease-cta);
}
.fab__hint span { display: block; width: 9px; height: 1.5px; background: var(--off-black); }
.fab__close { position: absolute; inset: 0; opacity: 0; transition: opacity 0.25s; }
.fab__close::before, .fab__close::after {
  content: ""; position: absolute; left: 32%; right: 32%; top: 50%;
  height: 1.5px; background: var(--off-white);
}
.fab__close::before { transform: rotate(45deg); }
.fab__close::after  { transform: rotate(-45deg); }
.fab[aria-expanded="true"] .fab__mark { opacity: 0; transform: rotate(-60deg) scale(0.6); }
.fab[aria-expanded="true"] .fab__close { opacity: 1; transition-delay: 0.1s; }
.fab[aria-expanded="true"] .fab__hint { transform: scale(0); }
.fab[aria-expanded="true"] .fab__ring { border-color: var(--on-dark-rule); }

/* ---------- Full-screen menu ----------
   Revealed as a circle growing from the control (--menu-x/--menu-y, set by JS),
   with three concentric rings following it out. */
.menu {
  position: fixed; inset: 0; z-index: 100; overflow-y: auto;
  background: var(--off-black); color: var(--off-white);
  --menu-x: calc(100% - 3rem); --menu-y: 3rem;
  clip-path: circle(0 at var(--menu-x) var(--menu-y));
  visibility: hidden;
  transition: clip-path 0.55s var(--ease-cta), visibility 0s 0.55s;
}
.menu[hidden] { display: none; }
.menu.is-open { clip-path: circle(150vmax at var(--menu-x) var(--menu-y)); visibility: visible; transition-delay: 0s; }
.menu__rings { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.menu__rings span {
  position: absolute; left: var(--menu-x); top: var(--menu-y);
  aspect-ratio: 1; border-radius: 50%; border: 1px solid var(--on-dark-rule);
  transform: translate(-50%, -50%) scale(0);
  transition: transform 0.8s var(--ease-cta);
}
.menu__rings span:nth-child(1) { width: 36vw; }
.menu__rings span:nth-child(2) { width: 72vw; border-color: rgb(64 196 180 / 0.35); transition-delay: 0.06s; }
.menu__rings span:nth-child(3) { width: 108vw; transition-delay: 0.12s; }
.menu.is-open .menu__rings span { transform: translate(-50%, -50%) scale(1); }
@media (max-width: 760px) {
  /* Tighter rings on phones so they stay in the corner, clear of the dividers */
  .menu__rings span:nth-child(1) { width: 34vw; }
  .menu__rings span:nth-child(2) { width: 67vw; }
  .menu__rings span:nth-child(3) { display: none; } /* outermost ring crosses the dividers on phones */
}

.menu__inner {
  position: relative; min-height: 100%;
  display: flex; flex-direction: column; justify-content: center;
  padding-block: clamp(5.5rem, 10vh, 7rem) clamp(3rem, 8vh, 5rem);
}
.menu__eyebrow { margin-bottom: var(--space-m); }
/* Dividers only as long as the longest link (plus a little air), so they stay
   clear of the concentric rings fanning out from the control */
.menu__list { width: max-content; max-width: 100%; border-top: 1px solid var(--on-dark-rule); }
.menu__list li {
  border-bottom: 1px solid var(--on-dark-rule);
  opacity: 0; transform: translateY(0.75rem);
  transition: opacity 0.4s var(--ease-cta), transform 0.4s var(--ease-cta);
}
.menu.is-open .menu__list li { opacity: 1; transform: none; }
.menu.is-open .menu__list li:nth-child(1) { transition-delay: 0.12s; }
.menu.is-open .menu__list li:nth-child(2) { transition-delay: 0.16s; }
.menu.is-open .menu__list li:nth-child(3) { transition-delay: 0.20s; }
.menu.is-open .menu__list li:nth-child(4) { transition-delay: 0.24s; }
.menu.is-open .menu__list li:nth-child(5) { transition-delay: 0.28s; }
.menu.is-open .menu__list li:nth-child(6) { transition-delay: 0.32s; }
/* Same type as the header nav, scaled up */
.menu__link {
  display: flex; align-items: baseline; gap: clamp(1rem, 2vw, 1.75rem);
  padding: clamp(0.8rem, 1.6vw, 1.15rem) 2.5rem clamp(0.8rem, 1.6vw, 1.15rem) 0;
  font-size: clamp(1.25rem, 1rem + 1.2vw, 2rem); font-weight: 500;
  letter-spacing: var(--ls-nav); text-transform: uppercase; text-decoration: none;
  transition: color 0.2s;
}
.menu__num { min-width: 2em; font-size: var(--fs-label); font-weight: 600; letter-spacing: var(--ls-meta); color: var(--turquoise); }
.menu__link:hover, .menu__link:focus-visible, .menu__link[aria-current="page"] { color: var(--turquoise); }
.menu__link--contact { color: var(--cornell-red); }
.menu__link--contact:hover, .menu__link--contact:focus-visible, .menu__link--contact[aria-current="page"] { color: var(--turquoise); }
.menu-open { overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
  .fab, .fab__ring, .fab__mark, .fab__hint { transition: opacity 0.2s, visibility 0s; transform: none !important; }
  .menu { clip-path: none; opacity: 0; transition: opacity 0.2s, visibility 0s 0.2s; }
  .menu.is-open { clip-path: none; opacity: 1; }
  .menu__rings { display: none; }
  .menu__list li { transform: none; transition: opacity 0.2s; }
}

/* ---------- Hero (one shared template, every page) ----------
   Spec: WIREFRAMES/handoff 2/ (Design Addendum: Hero + Intro). Only the
   eyebrow label and the two headline lines change per page. */
.hero {
  position: relative; overflow: hidden;
  background: var(--off-black); color: var(--off-white);
  padding: clamp(56px, 9vw, 150px) var(--gutter) clamp(44px, 6vw, 88px);
}
.hero__inner { position: relative; max-width: 1440px; margin: 0 auto; }

.hero__eyebrow {
  display: flex; align-items: center; gap: 16px;
  font: 500 11px/1 var(--font-body);
  letter-spacing: 0.22em; text-transform: uppercase;
}
.hero__rule { flex: none; width: clamp(28px, 6vw, 72px); height: 1px; background: var(--turquoise); }

.hero__head { position: relative; margin-top: clamp(24px, 4vw, 52px); }
/* Trimmed mark (no transparent margin), placed relative to the headline so the
   gap between its two lines sits in the mark's smaller O at every width. */
.hero__mark {
  position: absolute; top: 50%; transform: translateY(-50%);
  left: calc(-22vw - var(--gutter));
  width: min(96vw, 1100px); max-width: none; height: auto;
  filter: invert(1); opacity: 0.13;
  pointer-events: none;
}

/* Same size on every page. min(10.6vw, 152px) keeps the widest line
   ("EVERY BUSINESS", ~7.96em) inside the content width from 320px up. */
.hero__title {
  position: relative;
  font-family: var(--font-display); font-weight: 700;
  font-size: min(10.6vw, 152px);
  line-height: 0.86; letter-spacing: -0.02em;
  text-transform: uppercase; text-align: right;
}
.hero__title > span { display: block; white-space: nowrap; } /* always exactly two lines */
.hero__title em { font-style: normal; color: var(--turquoise); }

.hero__meta {
  margin-top: clamp(36px, 5vw, 72px); padding-top: 22px;
  border-top: 1px solid var(--dark-rule);
  font: 500 11px/1 var(--font-body);
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--silver-grey);
}

/* ---------- Intro (first section after the hero: About, Services) ---------- */
.intro {
  background: var(--off-black); color: var(--off-white);
  padding: clamp(24px, 3vw, 48px) var(--gutter) clamp(64px, 8vw, 130px);
}
.intro__inner {
  max-width: 1440px; margin: 0 auto;
  border-top: 1px solid var(--off-white);
  padding-top: clamp(40px, 5vw, 80px);
}
.intro__display {
  font-size: clamp(1.75rem, 4.6vw, 4.25rem); font-weight: 300;
  line-height: 1.1; letter-spacing: -0.015em;
}
.intro__display { text-wrap: pretty; } /* inherited by the paragraphs */

/* About: three stacked sentences, the last one brighter */
.intro__stack { display: flex; flex-direction: column; gap: clamp(20px, 2.4vw, 36px); }
.intro__stack p { max-width: 24ch; color: var(--silver-grey); }
.intro__stack p:last-child { color: var(--off-white); font-weight: 400; }

/* Services: lead line, then two body paragraphs side by side (stacked on mobile) */
.intro__lead { max-width: 22ch; }
.intro__cols { display: flex; flex-wrap: wrap; gap: clamp(20px, 4vw, 72px); margin-top: clamp(32px, 4vw, 64px); }
.intro__cols p {
  flex: 1 1 min(100%, 380px); min-width: 0;
  font-size: clamp(1.125rem, 1.53vw, 1.375rem); font-weight: 300; line-height: 1.6;
  text-wrap: pretty;
}

/* ---------- Section head: label | counter, heavy rule ---------- */
.section-head {
  display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-s);
  padding-bottom: clamp(1rem, 2vw, 1.75rem);
  border-bottom: var(--rule-heavy) solid currentColor;
}
.bg-black .section-head { border-bottom-color: var(--off-white); }
.section-head__count { font-weight: 600; letter-spacing: var(--ls-meta); color: var(--turquoise); white-space: nowrap; }
.section-head__count--muted { color: var(--silver-grey); }
.section-head__aside { color: var(--turquoise); }

/* Stacked variant: label on top, lede paragraph below, heavy rule under both */
.section-head--stacked { display: block; }
.section-head__lede { margin-top: clamp(1rem, 2vw, 1.75rem); max-width: 60rem; }
.section-head__lede p + p { margin-top: 0.5em; }
/* One-sentence lede meant to sit on a single line on desktop (About: Good Company) */
.section-head__lede--line { max-width: none; }

/* ---------- Buttons (section-level CTAs) ---------- */
/* Spec: WIREFRAMES/handoff-cta/ (Addendum: CTA Buttons). Marks are the pre-tinted
   PNGs in assets/cta/ as backgrounds, not a CSS mask: mask images are blocked when
   pages are opened from file://, background images aren't. */
.btn {
  position: relative; overflow: hidden;
  display: inline-flex; align-items: center;
  height: 60px; border-radius: 30px; padding: 0 88px 0 30px;
  background: var(--off-black); color: var(--off-white);
  font: 600 12px/1 var(--font-body);
  letter-spacing: 0.16em; text-transform: uppercase; white-space: nowrap;
  text-decoration: none; border: 0; cursor: pointer;
  --btn-mark: url("../assets/cta/mark-ow.png");
}
/* Mark: 120×120, off the right end and cropped by the pill. ::before is the rest
   mark, ::after the red hover mark; they move together and cross-fade. */
.btn::before, .btn::after {
  content: ""; position: absolute; top: 50%; right: -40px;
  width: 120px; height: 120px; margin-top: -60px; /* centered without using transform */
  background: center / contain no-repeat;
  pointer-events: none;
  transition: transform 0.55s var(--ease-cta), opacity 0.35s var(--ease-cta);
}
.btn::before { background-image: var(--btn-mark); opacity: 0.22; }
.btn::after  { background-image: url("../assets/cta/mark-r.png"); opacity: 0; }
/* Settles in the right rounded end: center lands 30px in, at 0.36 × 120 ≈ 43px */
.btn:hover::before, .btn:hover::after,
.btn:focus-visible::before, .btn:focus-visible::after { transform: translateX(-10px) scale(0.36); }
.btn:hover::before, .btn:focus-visible::before { opacity: 0; }
.btn:hover::after,  .btn:focus-visible::after  { opacity: 1; }
/* Inverted button for an Off White surface; the hover mark stays red */
.bg-offwhite .btn, .btn--light {
  background: var(--off-white); color: var(--off-black);
  --btn-mark: url("../assets/cta/mark-ob.png");
}
.section-cta { margin-top: var(--space-l); }

/* Placeholder copy marker (copy gaps) — pairs with an HTML comment in markup */
.is-tbd { font-style: normal; opacity: 0.85; }

/* Label column + content column (used by overview rows, offerings intro, etc.) */
.split { display: grid; grid-template-columns: var(--label-col) 1fr; gap: var(--space-m); }
@media (max-width: 760px) { .split { grid-template-columns: 1fr; gap: var(--space-s); } }

/* ---------- Numbered rows (overview style: big numeral + question) ---------- */
.rows > li { padding-block: clamp(2.5rem, 5.5vw, 5rem); }
.rows > li + li { border-top: var(--rule-thin) solid var(--on-dark-rule); }
.bg-platinum .rows > li + li,
.bg-light .rows > li + li,
.bg-offwhite .rows > li + li { border-top-color: var(--silver-grey); }
.rows--closed { border-bottom: var(--rule-thin) solid var(--silver-grey); }

.numeral {
  display: block;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--fs-numeral);
  line-height: 1;
  color: var(--turquoise);
}
.numeral--red { color: var(--cornell-red); }
.row-kicker { margin-top: clamp(0.75rem, 1.5vw, 1.4rem); }
.row-title { font-size: var(--fs-h2); margin-bottom: clamp(0.75rem, 1.6vw, 1.5rem); }

/* ---------- Pattern (always contained: disc, ring, or bounded card) ---------- */
/* Pre-colored pattern tiles (light = Off White, dark = Off Black) so pages work
   from file:// as well as a server. Pick a variant with .pattern--N-light/-dark. */
.pattern {
  background-image: var(--pattern-img);
  background-size: var(--pattern-size, cover);
  background-position: center;
  background-repeat: repeat;
}
.pattern--1-light { --pattern-img: url("../assets/patterns/pattern-1-light.png"); }
.pattern--2-light { --pattern-img: url("../assets/patterns/pattern-2-light.png"); }
.pattern--3-light { --pattern-img: url("../assets/patterns/pattern-3-light.png"); }
.pattern--4-light { --pattern-img: url("../assets/patterns/pattern-4-light.png"); }
.pattern--1-dark  { --pattern-img: url("../assets/patterns/pattern-1-dark.png"); }
.pattern--2-dark  { --pattern-img: url("../assets/patterns/pattern-2-dark.png"); }
.pattern--3-dark  { --pattern-img: url("../assets/patterns/pattern-3-dark.png"); }
.pattern--4-dark  { --pattern-img: url("../assets/patterns/pattern-4-dark.png"); }

.pattern-disc { aspect-ratio: 1; border-radius: 50%; }
/* Ring: pattern clipped to an annulus with a gradient mask (gradients need no
   CORS, so this works from file://). --ring-hole sets the inner radius. */
.pattern-ring {
  aspect-ratio: 1; border-radius: 50%;
  -webkit-mask-image: radial-gradient(circle closest-side, transparent var(--ring-hole, 61%), #000 calc(var(--ring-hole, 61%) + 0.5%));
          mask-image: radial-gradient(circle closest-side, transparent var(--ring-hole, 61%), #000 calc(var(--ring-hole, 61%) + 0.5%));
}

/* ---------- Concentric rings divider (closes the dark opening) ---------- */
.rings {
  position: relative; overflow: hidden;
  height: clamp(16rem, 32vw, 29rem);
  display: grid; place-items: center;
}
.rings::before, .rings::after {
  content: ""; position: absolute; left: 50%; top: 50%;
  border-radius: 50%; transform: translate(-50%, -50%);
  pointer-events: none;
}
.rings::before { width: clamp(22rem, 44vw, 40rem); aspect-ratio: 1; border: var(--ring) solid var(--turquoise); }
.rings::after  { width: clamp(30rem, 62vw, 56rem); aspect-ratio: 1; border: var(--ring) solid var(--on-dark-rule); }
.rings .pattern-disc { width: clamp(11rem, 24vw, 21.5rem); --pattern-size: 108%; }

/* ---------- Ring + line band (Home: black on platinum; About: white on turquoise) ---------- */
.orbit {
  position: relative;
  padding-block: clamp(2rem, 3vw, 2.75rem);
}
.orbit::before {
  content: ""; position: absolute; left: 0; right: 0; top: 50%;
  height: 1.5px; background: var(--orbit-line, var(--cornell-red));
}
.orbit__row { position: relative; display: flex; align-items: center; gap: clamp(1.25rem, 3vw, 2.75rem); }
.orbit__ring { width: clamp(9rem, 20vw, 18rem); flex: none; }
.orbit__dot { flex: none; border-radius: 50%; }
.orbit__dot--solid { width: clamp(2.25rem, 4.1vw, 3.75rem); aspect-ratio: 1; background: var(--orbit-ink, var(--off-black)); }
.orbit__dot--open  { width: clamp(1.25rem, 2vw, 1.875rem); aspect-ratio: 1; border: var(--ring) solid var(--orbit-ink, var(--off-black)); background: var(--orbit-ground, var(--platinum-grey)); }

/* ---------- Brand identity (Mission / Vision / Values) ---------- */
.identity__block + .identity__block { margin-top: var(--space-l); }
.identity__title { font-size: var(--fs-h3); letter-spacing: 0.04em; margin-bottom: clamp(0.75rem, 1.4vw, 1.25rem); }
.values {
  display: grid; grid-template-columns: 1fr 1fr;
  column-gap: clamp(2rem, 4vw, 3.6rem); row-gap: var(--space-l);
  align-items: start;
}
.value__icon {
  /* BRAND/04_graphics: white line art on an Off Black (#1A1A1A) square. Inverted,
     the square becomes #E5E5E5, a step from Platinum, so only the line art reads.
     The art fills the middle ~44% of the image (27% margin each side); negative
     left/bottom margins line it up with the text edge
     (no negative top margin, so the square never covers the "Values" title). */
  --icon: clamp(4.5rem, 6vw, 5.5rem);
  width: var(--icon); height: auto;
  filter: invert(1);
  margin: 0 0 calc(var(--icon) * -0.27 + 1.25rem) calc(var(--icon) * -0.273);
}
.value__name {
  font-size: var(--fs-small); font-weight: 600; letter-spacing: var(--ls-nav); text-transform: uppercase;
  padding-bottom: 0.6em; margin-bottom: 1em;
  border-bottom: var(--rule-thin) solid var(--silver-grey);
}
.value__quote { font-size: clamp(1.375rem, 2.9vw, 2.6rem); line-height: 1.3; margin-bottom: 0.8em; }
.value__by { display: block; margin-top: 0.25em; font-size: 0.72em; } /* person quoted, on its own line */
.value > p:not(.value__quote) { max-width: 60ch; }
/* An odd item left alone in the last row (e.g. Flow in a 3-value set) spans the
   full width, so the longest quote (~28.2em in Dancing Script) stays on one line
   from 761px up: 2.9vw × 28.2 ≈ 82vw < content width. A 4th value would pair up normally. */
@media (min-width: 761px) {
  .values > :last-child:nth-child(odd) { grid-column: 1 / -1; }
}
@media (max-width: 760px) {
  .values { grid-template-columns: 1fr; }
  .value__quote { font-size: 1.625rem; }
}

/* ---------- Offerings (numbered rows with icon) ---------- */
.offerings > li {
  display: grid;
  grid-template-columns: clamp(3rem, 7vw, 6.25rem) 1fr auto;
  column-gap: var(--space-s);
  padding-block: clamp(2rem, 4.2vw, 3.6rem);
  border-bottom: var(--rule-thin) solid var(--silver-grey);
}
.offerings > li:last-child { border-bottom: var(--rule-heavy) solid var(--off-black); }
.offering__num {
  grid-row: 1; align-self: center;
  font-size: var(--fs-label); font-weight: 600; letter-spacing: var(--ls-meta); color: var(--cornell-red);
}
.offering__title { grid-row: 1; align-self: center; font-size: var(--fs-h2); line-height: 1.1; }
.offering__icon {
  grid-row: 1 / span 2; grid-column: 3; align-self: start;
  width: clamp(4rem, 8.6vw, 7.75rem); aspect-ratio: 1;
  border: 3px solid var(--silver-grey); border-radius: 50%;
  display: grid; place-items: center;
  margin-top: clamp(-2rem, -2.2vw, -0.5rem);
  margin-right: clamp(0rem, 6vw, 5.5rem);
}
.offering__icon img { width: 62%; }
.offering__body { grid-column: 2; margin-top: clamp(1.25rem, 3vw, 2.75rem); }
.offering__tags { font-size: var(--fs-small); }
.offering__tags--strong { font-weight: 500; }
.offering__body .prose { margin-top: 1.1em; }
/* "Explore [Service]" link (handoff-cta): label, then a red rule and a red mark
   that grow/reveal on hover. Pseudo-elements are ordered after the label text. */
.explore {
  display: inline-flex; align-items: center; gap: 12px; margin-top: 1.5em;
  font: 600 12px/1.5 var(--font-body);
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--cornell-red); text-decoration: none;
}
.explore::before {
  content: ""; order: 1; flex: none;
  width: 18px; height: 1px; background: var(--cornell-red);
  transition: width 0.35s var(--ease-cta);
}
.explore::after {
  content: ""; order: 2; flex: none;
  width: 22px; height: 22px;
  background: url("../assets/cta/mark-r.png") center / contain no-repeat;
  clip-path: inset(0 64% 0 0);
  transition: clip-path 0.35s var(--ease-cta);
}
.explore:hover::before, .explore:focus-visible::before { width: 28px; }
.explore:hover::after,  .explore:focus-visible::after  { clip-path: inset(0 0 0 0); }
.bg-black .explore { color: var(--off-white); } /* rule and mark stay red */

/* Reduced motion: no transform on the button mark (color/opacity cross-fade only);
   the link's rule and mark change state instantly */
@media (prefers-reduced-motion: reduce) {
  .btn:hover::before, .btn:hover::after,
  .btn:focus-visible::before, .btn:focus-visible::after { transform: none; }
  .btn::before, .btn::after { transition: opacity 0.35s var(--ease-cta); }
  .explore::before, .explore::after { transition: none; }
}

@media (max-width: 700px) {
  .offerings > li { grid-template-columns: 2.25rem 1fr auto; }
  .offering__icon { margin: 0; width: 3.5rem; border-width: 2px; }
  .offering__body { grid-column: 1 / -1; }
}

/* ---------- FAQ (interactive disclosure) ---------- */
.faq { display: grid; grid-template-columns: 33% 1fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: start; }
.faq__title { font-size: var(--fs-display); line-height: 1; margin-top: 0.6em; }
.faq__title::after {
  content: ""; display: block; width: clamp(4rem, 8vw, 7.2rem); height: 2px;
  background: var(--cornell-red); margin-top: clamp(1.25rem, 2.6vw, 2.4rem);
}
.faq__list { border-top: var(--rule-thin) solid var(--silver-grey); border-bottom: var(--rule-heavy) solid var(--off-black); }
.faq__item + .faq__item { border-top: var(--rule-thin) solid var(--silver-grey); }

.faq__q {
  display: grid; grid-template-columns: clamp(2.25rem, 4vw, 3.6rem) 1fr auto; align-items: baseline;
  padding-block: clamp(1.25rem, 2.4vw, 2rem);
  cursor: pointer; list-style: none;
}
.faq__q::-webkit-details-marker { display: none; }
.faq__num { font-size: var(--fs-label); font-weight: 600; letter-spacing: var(--ls-meta); color: var(--silver-grey); }
.faq__text {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(1.25rem, 1rem + 0.9vw, 1.8rem); line-height: 1.25;
  color: var(--cornell-red);
}
.faq__icon {
  position: relative; width: 0.85rem; height: 0.85rem; margin-left: var(--space-s);
  align-self: center;
  transition: transform 0.25s ease;
}
.faq__icon::before, .faq__icon::after {
  content: ""; position: absolute; left: 50%; top: 50%;
  width: 100%; height: 1.5px; background: var(--cornell-red);
  transform: translate(-50%, -50%);
}
.faq__icon::after { transform: translate(-50%, -50%) rotate(90deg); }
/* Closed = "+", open = "×" (matches wireframe's open state) */
.faq__item[open] .faq__icon { transform: rotate(45deg); }
.faq__q:hover .faq__text { text-decoration: underline; text-underline-offset: 0.2em; text-decoration-thickness: 1px; }

.faq__a { padding: 0 0 clamp(1.75rem, 3vw, 2.6rem) clamp(2.25rem, 4vw, 3.6rem); }
.faq__a > * + * { margin-top: 1.1em; }
.faq__lead { font-weight: 600; }

@media (prefers-reduced-motion: no-preference) {
  .faq__item[open] .faq__a { animation: faq-in 0.3s ease; }
  @keyframes faq-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
}
@media (max-width: 860px) { .faq { grid-template-columns: 1fr; } }

.price-table {
  width: 100%; border-collapse: collapse; border: var(--rule-heavy) solid var(--off-black);
  font-size: var(--fs-small);
}
.price-table th, .price-table td { padding: 0.9em 1.3em; text-align: left; font-weight: 400; }
.price-table td { text-align: right; font-weight: 500; white-space: nowrap; }
.price-table tr + tr > * { border-top: var(--rule-thin) solid var(--silver-grey); }

/* ---------- Turquoise ampersand band ---------- */
.amp-band { position: relative; overflow: hidden; height: clamp(15rem, 34vw, 30.5rem); }
.amp-band__amp {
  position: absolute; left: clamp(0.5rem, 2.9vw, 2.6rem); bottom: -0.2em;
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(14rem, 36vw, 32rem); line-height: 0.8;
  color: var(--off-white);
  pointer-events: none; user-select: none;
}
.amp-band__art {
  position: absolute; right: var(--gutter);
  top: 50%; transform: translateY(-50%);
  width: clamp(12rem, 30vw, 27.5rem); aspect-ratio: 1;
}
.amp-band__art .pattern-disc { position: absolute; left: 0; top: 0; width: 90%; --pattern-size: 150%; }
.amp-band__art .amp-band__circle {
  position: absolute; right: 0; bottom: 0; width: 69%; aspect-ratio: 1; border-radius: 50%;
  background: var(--turquoise); border: var(--ring) solid var(--off-white);
}

/* ---------- Social proof ---------- */
.proof-list > li {
  display: grid; grid-template-columns: clamp(3rem, 7vw, 6.25rem) 1fr; align-items: baseline; column-gap: var(--space-s);
  padding-block: clamp(1.25rem, 2.2vw, 1.9rem);
}
.proof-list > li + li { border-top: var(--rule-thin) solid var(--platinum-grey); }
.proof-list { border-bottom: var(--rule-heavy) solid var(--off-black); }
.proof__num { font-size: var(--fs-label); font-weight: 600; letter-spacing: var(--ls-meta); color: var(--turquoise); }
.proof__title { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.2rem, 1rem + 0.9vw, 1.9rem); line-height: 1.25; }
@media (max-width: 700px) { .proof-list > li { grid-template-columns: 2.25rem 1fr; } }

/* Row link: the item's own title is the link — ink by default, red on hover/focus */
.row-link { color: inherit; text-decoration: none; transition: color 0.2s; }
.row-link:hover, .row-link:focus-visible { color: var(--cornell-red); }

/* ---------- Testimonials ---------- */
/* Editorial testimonial: one oversized pull quote at a time (About).
   Left column (the site's label column) holds a large Cornell Red quotation
   mark and the controls; the quote runs in the wide right column. */
.tq {
  display: grid; grid-template-columns: var(--label-col) 1fr;
  column-gap: var(--space-m);
  margin-top: var(--space-l);
}
.tq__aside { display: flex; flex-direction: column; justify-content: space-between; gap: var(--space-m); }
.tq__mark {
  font-family: var(--font-body); font-weight: 700;
  font-size: clamp(8rem, 15vw, 14rem); line-height: 0.8; margin-top: -0.06em;
  color: var(--cornell-red); user-select: none;
}
.tq__controls { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; }
.tq__controls[hidden] { display: none; }
/* Ring buttons echo the site's concentric circles (monograms, offering icons) */
.tq__btn {
  display: grid; place-items: center; flex: none;
  width: 3.25rem; aspect-ratio: 1; border-radius: 50%; padding: 0;
  border: var(--ring) solid var(--off-black); background: transparent; color: var(--off-black);
  cursor: pointer; transition: color 0.2s, border-color 0.2s;
}
.tq__btn svg { width: 1.25rem; height: 1.25rem; fill: none; stroke: currentColor; stroke-width: 1.5; }
.tq__btn:hover, .tq__btn:focus-visible { color: var(--cornell-red); border-color: var(--cornell-red); }
.tq__count { margin-left: 0.5rem; letter-spacing: var(--ls-meta); white-space: nowrap; }
.tq__current { color: var(--cornell-red); }

/* Enhanced: all slides share one grid cell, so the stage is always as tall as
   the longest quote and nothing below it moves. Without JS they stack. */
.tq__slides { display: grid; row-gap: var(--space-l); }
.tq.is-enhanced .tq__slides > .testimonial { grid-area: 1 / 1; }
.tq.is-enhanced .testimonial {
  transition: opacity 0.5s var(--ease-cta), transform 0.5s var(--ease-cta), visibility 0s 0.5s;
}
.tq.is-enhanced .testimonial:not(.is-active) { opacity: 0; transform: translateY(0.75rem); visibility: hidden; }
.tq.is-enhanced .testimonial.is-active { transition-delay: 0s; }

.testimonial { display: flex; flex-direction: column; }
.testimonial__stars { color: var(--cornell-red); font-size: clamp(1.1rem, 1rem + 0.4vw, 1.5rem); letter-spacing: 0.08em; line-height: 1; }
/* Light-weight Montserrat at display scale, like the About intro statements */
.testimonial__quote {
  margin-top: 1em;
  font-size: clamp(1.25rem, 0.8rem + 1.3vw, 2rem); font-weight: 300; line-height: 1.5;
  letter-spacing: -0.005em;
}
/* Placeholder slide (copy gap): same quote type, muted, so it reads as pending */
.testimonial__quote--tbd { color: var(--silver-grey); font-style: italic; }
/* No stars on this slide: reserve their height so the quote lines up with the others */
.testimonial__quote--tbd:first-child { margin-top: calc(clamp(1.1rem, 1rem + 0.4vw, 1.5rem) + 1em); }
.testimonial__by {
  margin-top: 1.75em; padding-top: 1.1em; max-width: 34rem;
  border-top: var(--rule-thin) solid var(--silver-grey);
}
.testimonial__name { font-weight: 600; font-size: var(--fs-small); }
.testimonial__meta {
  margin-top: 0.3em; font-size: var(--fs-label); letter-spacing: var(--ls-meta); text-transform: uppercase;
}
.testimonial__date { margin-top: 0.3em; font-size: var(--fs-label); letter-spacing: 0.05em; color: var(--silver-grey); }

/* Home: slider follows a small "Testimonials" label rather than a section head */
.section-head__aside + .tq { margin-top: var(--space-m); }

@media (max-width: 760px) {
  /* Stacked: small mark above the quote, controls below it */
  .tq { grid-template-columns: 1fr; }
  .tq__aside { display: contents; }
  .tq__mark { order: 1; font-size: 6rem; margin-bottom: -0.15em; }
  .tq__slides { order: 2; }
  .tq__controls { order: 3; margin-top: var(--space-m); }
}
@media (prefers-reduced-motion: reduce) {
  .team__bio { transition: none; }
  .tq.is-enhanced .testimonial { transition: none; }
  .tq.is-enhanced .testimonial:not(.is-active) { transform: none; }
}

/* ---------- Closing CTA ---------- */
.cta { position: relative; overflow: hidden; padding-block: clamp(4rem, 8vw, 7.5rem); }
.cta__amp {
  position: absolute; left: clamp(0.5rem, 2.9vw, 2.6rem); bottom: -0.25em;
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(14rem, 36vw, 32rem); line-height: 0.8;
  color: var(--on-red-ghost); pointer-events: none; user-select: none;
}
.cta__inner { position: relative; }
.cta__title { font-size: var(--fs-script-xl); line-height: 1.15; }
/* Solid white mark, the hero's mirror image: the hero's ghosted mark bleeds off
   the left, this one bleeds off the right edge (about a third cropped). */
/* Platinum Grey mark (assets/logo/oco-icon-platinum.svg). Slightly oversized
   for the section (125% of its height): top and bottom crop, the right edge
   stays on the content column. */
.cta__mark {
  position: absolute; top: 50%;
  right: max(var(--gutter), (100% - var(--content-max)) / 2);
  height: 125%; width: auto; max-width: none;
  transform: translateY(-50%);
  pointer-events: none; user-select: none;
}
@media (max-width: 760px) {
  /* Headline wraps on phones: the mark slides partly off the right edge so
     the Off White type never lands on it */
  .cta__mark { height: 110%; right: 0; transform: translate(45%, -50%); }
  .cta__title { max-width: 68%; }
}
/* Copy-gap marker: dashed outline so it can't be mistaken for a second button */
.tbd {
  display: inline-block;
  padding: 1em 1.5em;
  border: 1px dashed currentColor;
  font-size: var(--fs-label); font-weight: 500; letter-spacing: var(--ls-nav); text-transform: uppercase;
}

/* ---------- Footer ---------- */
.site-footer { background: var(--off-black); color: var(--silver-grey); padding-block: clamp(2.5rem, 4.5vw, 4rem); }
/* Two tiers: contact invitation (prompt + channels), then a hairline and the
   wordmark/meta base row. Channels sit in the label column rhythm used elsewhere. */
.site-footer__contact {
  display: grid; grid-template-columns: 1.4fr 1fr; gap: var(--space-m) var(--space-l);
  align-items: end; padding-bottom: var(--space-l);
}
.site-footer__prompt { color: var(--off-white); font-size: var(--fs-h2); line-height: var(--lh-head); max-width: 20ch; }
.site-footer__channels { display: grid; gap: 1.25rem; }
.site-footer__label {
  margin-bottom: 0.35em; color: var(--turquoise);
  font-size: var(--fs-label); font-weight: 600; letter-spacing: var(--ls-nav); text-transform: uppercase;
}
.site-footer__channels dd { color: var(--off-white); font-size: var(--fs-small); }
.site-footer__link {
  color: inherit; text-decoration: underline;
  text-decoration-thickness: 1px; text-underline-offset: 0.2em; transition: color 0.2s;
}
.site-footer__link:hover, .site-footer__link:focus-visible { color: var(--turquoise); }
.site-footer__btn { margin-top: 1.75rem; }
.site-footer__base {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-m);
  padding-top: var(--space-m); border-top: var(--rule-thin) solid var(--on-dark-rule);
}
.site-footer__wordmark img { width: clamp(12rem, 20vw, 18rem); height: auto; }
.site-footer__meta { font-size: var(--fs-label); letter-spacing: var(--ls-nav); text-transform: uppercase; }
/* Compact: base row only, for pages that are themselves the call to action
   (Contact, Coming Soon). The rule sits at the footer's top edge. */
.site-footer--compact { padding-top: 0; }
@media (max-width: 760px) {
  .site-footer__contact { grid-template-columns: 1fr; align-items: start; }
  .site-footer__base { flex-direction: column; align-items: flex-start; }
}

/* ==========================================================================
   About + Services components
   ========================================================================== */

/* ---------- Monogram (initials in a circle — v1 stand-in for photography) ---------- */
.monogram {
  display: grid; place-items: center; flex: none;
  width: var(--mono-size, 4.75rem); aspect-ratio: 1; border-radius: 50%;
  border: var(--ring) solid currentColor;
  font-family: var(--font-display); font-weight: 700; line-height: 1;
  font-size: calc(var(--mono-size, 4.75rem) * 0.3);
  letter-spacing: 0.02em; white-space: nowrap;
}
.monogram--lg { --mono-size: clamp(7rem, 12vw, 10.75rem); color: var(--turquoise); }

/* ---------- Philosophy ---------- */
.philosophy { max-width: 64rem; }
.philosophy__title { font-size: var(--fs-display); line-height: 1.1; margin-top: var(--space-l); }
.philosophy__sub {
  margin-top: 0.6em; font-family: var(--font-display); font-size: var(--fs-lead);
  color: var(--silver-grey);
}
.philosophy__body { margin-top: var(--space-m); }
.philosophy__stop { font-size: var(--fs-h3); margin-block: 0.4em; }
.philosophy__close {
  margin-top: var(--space-m); padding-top: var(--space-m);
  border-top: var(--rule-thin) solid var(--silver-grey);
  /* Larger than --fs-script so the section's closing idea stands out (22–30px → 26–40px) */
  font-size: clamp(1.625rem, 1.1rem + 1.6vw, 2.5rem); line-height: 1.3;
}

/* ---------- Team roster (numbered rows) ---------- */
.org__intro { margin-top: var(--space-m); max-width: 64rem; }
.org__intro .lead { font-size: var(--fs-lead); }
.team-title { font-size: var(--fs-h3); letter-spacing: 0.04em; margin-top: var(--space-l); margin-bottom: var(--space-s); }
.team { border-bottom: var(--rule-heavy) solid var(--off-black); }
.team > li {
  display: grid; align-items: center; column-gap: var(--space-s);
  grid-template-columns: clamp(3rem, 7vw, 6.25rem) auto 1fr minmax(0, 0.9fr);
  padding-block: clamp(1rem, 2vw, 1.75rem);
}
.team > li + li { border-top: var(--rule-thin) solid var(--silver-grey); }
.team__num { font-size: var(--fs-label); font-weight: 600; letter-spacing: var(--ls-meta); color: var(--cornell-red); }
.team .monogram { color: var(--off-black); margin-right: clamp(0.5rem, 2vw, 2rem); }
.team__name { font-size: var(--fs-h3); line-height: 1.2; }
.team__role { font-size: var(--fs-small); line-height: 1.6; }
/* Expandable bio on a team row (About: Nate's story, formerly the Origins
   section). The toggle sits under the name; the bio spans the full row.
   Collapses with a grid-rows transition; open by default without JS. */
.team__more {
  grid-column: 3 / -1; justify-self: start; margin-top: 0.6rem;
  display: inline-flex; align-items: center; gap: 0.75rem;
  padding: 0; border: 0; background: none; cursor: pointer;
  font: 600 12px/1.5 var(--font-body); letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--cornell-red);
}
.team__more:hover { text-decoration: underline; text-underline-offset: 0.3em; text-decoration-thickness: 1px; }
.team__more-icon { position: relative; width: 0.75rem; height: 0.75rem; transition: transform 0.25s ease; }
.team__more-icon::before, .team__more-icon::after {
  content: ""; position: absolute; left: 50%; top: 50%;
  width: 100%; height: 1.5px; background: currentColor; transform: translate(-50%, -50%);
}
.team__more-icon::after { transform: translate(-50%, -50%) rotate(90deg); }
.team__more[aria-expanded="true"] .team__more-icon { transform: rotate(45deg); }
.team__bio { grid-column: 1 / -1; display: grid; grid-template-rows: 1fr; transition: grid-template-rows 0.45s var(--ease-cta); }
.team__bio.is-collapsed { grid-template-rows: 0fr; }
.team__bio-inner { overflow: hidden; min-height: 0; }
.team__bio-split { align-items: start; padding-top: var(--space-m); padding-bottom: var(--space-s); }
.team__bio-close {
  margin-top: var(--space-l); padding-top: var(--space-m);
  border-top: var(--rule-thin) solid var(--silver-grey);
  font-family: var(--font-display); font-size: var(--fs-lead); line-height: 1.4;
}
.team__bio-close em { font-style: normal; color: var(--turquoise); }
.text-link {
  color: var(--cornell-red); text-decoration: underline;
  text-decoration-thickness: 1px; text-underline-offset: 0.2em;
}
.text-link:hover { text-decoration-thickness: 2px; }
@media (max-width: 760px) {
  .team > li { grid-template-columns: auto 1fr; row-gap: 0.4rem; }
  .team__num { display: none; }
  .team .monogram { --mono-size: 3.5rem; grid-row: span 2; margin-right: 0.5rem; }
  .team__more { grid-column: 2; }
  .team__bio .monogram { display: none; } /* the row's own monogram is right above */
  .team__bio-split { grid-template-columns: 1fr; }
}

/* ---------- Orbit band, mirrored on Turquoise (About) ---------- */
.orbit--on-turquoise {
  --orbit-line: var(--off-white); --orbit-ink: var(--off-white); --orbit-ground: var(--turquoise);
  padding-block: clamp(2.5rem, 3.2vw, 2.75rem);
}

/* ---------- People we like working with (big red numerals) ---------- */
.row-name { font-size: var(--fs-h3); line-height: 1.15; margin-top: 0.6em; }

/* ---------- Logo wall (WIREFRAMES/handoff-logo-wall/) ---------- */
/* Three moving rows of the same hairline tiles (About): two light rows and one
   dark row. The wall draws the outer frame; each tile draws its right/bottom
   rule. JS (js/main.js) clones each row's tiles until one set is wider than
   the wall, then scrolls the track by exactly one set (--shift) at a steady
   pace (--dur). Rows pause on hover or keyboard focus. Without JS, or with
   reduced motion, each row is a static strip you can swipe/scroll. */
.logo-wall {
  container-type: inline-size;
  margin-top: clamp(24px, 3vw, 40px);
  border: 1px solid var(--silver-grey); border-bottom: 0;
}
.logo-row { overflow-x: auto; scrollbar-width: none; }
.logo-row::-webkit-scrollbar { display: none; }
.logo-row__track { display: flex; width: max-content; }
.logo-wall.is-moving .logo-row { overflow: hidden; }
.logo-wall.is-moving .logo-row__track { animation: logo-marquee var(--dur, 60s) linear infinite; }
.logo-wall.is-moving .logo-row[data-dir="right"] .logo-row__track { animation-direction: reverse; }
.logo-row:hover .logo-row__track, .logo-row:focus-within .logo-row__track { animation-play-state: paused; }
@keyframes logo-marquee { to { transform: translateX(calc(-1 * var(--shift, 0px))); } }

.logo-tile {
  flex: none; width: 25cqw; aspect-ratio: 3 / 2; /* four tiles span the wall */
  display: flex; align-items: center; justify-content: center;
  background: var(--tile-bg, var(--off-white));
  border-right: 1px solid var(--tile-rule, var(--silver-grey));
  border-bottom: 1px solid var(--tile-rule, var(--silver-grey));
}
/* Logo files are pre-trimmed; width is set per logo (--logo-w) for equal visual weight */
.logo-tile img { width: var(--logo-w, 80%); height: auto; }
/* Dark tiles: background matched to the logo's own (--tile-bg set per tile) */
.logo-tile--dark { --tile-rule: var(--dark-rule); }
/* Linked tiles: the whole tile is the link (so --logo-w still resolves against the
   tile). Hover/focus draws a Turquoise rule along the tile's base, growing like the
   Explore link's rule; the logo itself is never altered. Focus ring sits inside the
   tile so it isn't hidden under neighboring tiles. */
.logo-wall__link {
  position: relative; align-self: stretch; flex: 1;
  display: flex; align-items: center; justify-content: center;
}
.logo-wall__link::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0;
  height: 3px; background: var(--turquoise);
  transform: scaleX(0); transition: transform 0.35s var(--ease-cta);
}
.logo-wall__link:hover::after, .logo-wall__link:focus-visible::after { transform: scaleX(1); }
.logo-wall__link:focus-visible { outline-offset: -5px; }
.logo-wall__more {
  display: flex; align-items: center; justify-content: center;
  min-height: 104px; padding: clamp(18px, 2vw, 26px);
  background: var(--off-black); color: var(--off-white);
  font-weight: 600; font-size: 1.6rem;
}
@media (max-width: 760px) { .logo-tile { width: 50cqw; } } /* two per row on phones */
@media (prefers-reduced-motion: reduce) {
  .logo-wall__link::after { transition: none; }
}

/* ---------- Ways to work (deliberate card exception) ---------- */
.ways-title { font-size: var(--fs-display); line-height: 1.1; margin-bottom: var(--space-m); }
.ways { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.25rem, 2.5vw, 2.25rem); }
.way {
  position: relative; overflow: hidden;
  border: var(--rule-thin) solid var(--off-black);
  padding: clamp(1.5rem, 3vw, 2.75rem);
  min-height: clamp(16rem, 29vw, 26.5rem);
}
.way > :not(.pattern) { position: relative; }
.way__head { display: flex; justify-content: space-between; align-items: center; }
.way__letter { font-size: var(--fs-label); font-weight: 600; color: var(--silver-grey); }
.way__marker { width: clamp(1.75rem, 3vw, 2.75rem); aspect-ratio: 1; border-radius: 50%; }
.way__marker--open-red  { border: var(--ring) solid var(--cornell-red); }
.way__marker--red       { background: var(--cornell-red); }
.way__marker--turquoise { background: var(--turquoise); }
.way__marker--white     { background: var(--off-white); }
.way__title { font-size: var(--fs-h3); margin-top: clamp(1.25rem, 2.2vw, 2rem); margin-bottom: 0.8em; }
.way--dark { background: var(--off-black); color: var(--off-white); border-color: var(--off-black); }
.way--dark .way__letter { color: var(--silver-grey); }
.way--dark > .pattern { position: absolute; inset: 0; opacity: 0.18; }
@media (max-width: 760px) { .ways { grid-template-columns: 1fr; } .way { min-height: 0; } }

/* Ampersand in the CTA band is a per-page option (About, Services per wireframes) */

/* ==========================================================================
   Contact page
   Spec: WIREFRAMES/handoff-contact/ (Addendum: Contact Page)
   ========================================================================== */
.contact { padding: clamp(64px, 8vw, 130px) var(--gutter); }
.contact__inner {
  max-width: 1440px; margin: 0 auto;
  display: flex; flex-wrap: wrap; gap: clamp(32px, 5vw, 80px);
}

/* Left column: same treatment as the FAQ heading column */
.contact__intro { flex: 0 1 clamp(260px, 30%, 380px); min-width: 0; }
.contact__label {
  font: 600 11px/1.5 var(--font-body);
  letter-spacing: 0.22em; text-transform: uppercase;
}
.contact__title {
  margin-top: 22px;
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(2rem, 4.6vw, 3.6rem);
  line-height: 0.96; letter-spacing: -0.01em; text-transform: uppercase;
}
.contact__title::after {
  content: ""; display: block;
  width: clamp(40px, 8vw, 96px); height: 1px; margin-top: 28px;
  background: var(--cornell-red);
}
.contact__body {
  margin-top: 28px; max-width: 36ch;
  font-size: clamp(0.98rem, 1.1vw, 1.08rem); font-weight: 400; line-height: 1.7;
  text-wrap: pretty;
}

/* Call / Text: moved here from the footer, which is compact on this page.
   Label and number match the global footer's Call / Text, on a light ground. */
.contact__channels { margin-top: 36px; }
.contact__channel-label {
  margin-bottom: 0.35em; color: var(--turquoise);
  font-size: var(--fs-label); font-weight: 600; letter-spacing: var(--ls-nav); text-transform: uppercase;
}
.contact__phone {
  font-size: var(--fs-small); color: var(--off-black);
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.2em;
  transition: color 0.2s;
}
.contact__phone:hover, .contact__phone:focus-visible { color: var(--cornell-red); }

/* Right column: the rule stays whether the form or the success state shows */
.contact__panel { flex: 1 1 min(100%, 520px); min-width: 0; border-top: 1px solid var(--off-black); }

.contact-form, .contact-sent { display: flex; flex-direction: column; padding-top: clamp(28px, 3vw, 44px); }
.contact-form { gap: clamp(28px, 3vw, 40px); }
.contact-form[hidden], .contact-sent[hidden] { display: none; }
.contact-form__pair {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
  gap: clamp(28px, 3vw, 48px);
}

.field { display: flex; flex-direction: column; gap: 12px; }
.field__head {
  display: flex; justify-content: space-between; gap: 12px;
  font: 600 11px/1.5 var(--font-body);
  letter-spacing: 0.18em; text-transform: uppercase;
}
.field__error { color: var(--cornell-red); font-weight: 500; letter-spacing: 0.08em; text-transform: none; }

/* Underline only. The browser outline is replaced by a red underline that
   also thickens, so focus reads without relying on the color change alone. */
.field__input {
  width: 100%; margin: 0;
  -webkit-appearance: none; appearance: none;
  border: 0; border-bottom: 1px solid var(--silver-grey); border-radius: 0;
  background: transparent; color: var(--off-black);
  padding: 8px 0 14px;
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(1.15rem, 1.7vw, 1.5rem); line-height: 1.3;
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.field__input--area {
  font-family: var(--font-body);
  font-size: clamp(1rem, 1.15vw, 1.12rem); line-height: 1.7;
  resize: vertical;
}
.field__input:focus { border-bottom-color: var(--cornell-red); box-shadow: 0 1px 0 0 var(--cornell-red); }
/* Keep autofilled fields on the Off White ground instead of the browser tint */
.field__input:-webkit-autofill { -webkit-text-fill-color: var(--off-black); transition: background-color 0s 600000s; }

/* Honeypot: off screen rather than display:none, which some bots skip */
.contact-form__trap { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

.contact-form__actions {
  display: flex; flex-direction: column; align-items: flex-start; gap: 18px;
  padding-top: 8px;
}
/* Dark fill on Off White (overrides the inverted .bg-offwhite button) */
.contact-form .btn {
  background: var(--off-black); color: var(--off-white);
  --btn-mark: url("../assets/cta/mark-ow.png");
}
.contact-form .btn[aria-disabled="true"] { cursor: progress; opacity: 0.7; }
.contact-form__status {
  max-width: 48ch; color: var(--cornell-red);
  font-size: 13px; font-weight: 500; letter-spacing: 0.04em; line-height: 1.6;
}
.contact-form__status:empty { display: none; }
.contact-form__status a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.2em; }

/* Success state */
.contact-sent { gap: 22px; }
.contact-sent__label {
  color: var(--cornell-red);
  font: 600 11px/1.5 var(--font-body);
  letter-spacing: 0.22em; text-transform: uppercase;
}
.contact-sent__msg {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(1.6rem, 3.2vw, 2.8rem); line-height: 1.1;
  text-wrap: pretty;
}
.contact-sent__msg:focus { outline: none; }
.contact-sent__again {
  align-self: flex-start;
  background: none; border: 0; border-bottom: 1px solid rgb(179 27 27 / 0.35);
  padding: 0 0 4px; cursor: pointer;
  color: var(--cornell-red);
  font: 600 11px/1.5 var(--font-body);
  letter-spacing: 0.18em; text-transform: uppercase;
  transition: border-color 0.2s;
}
.contact-sent__again:hover { border-bottom-color: var(--cornell-red); }

/* ==========================================================================
   Coming Soon (Insights, Portfolio)
   Spec: WIREFRAMES/handoff-coming-soon/ (Addendum: Coming Soon Page)
   Exactly one screen at every size: header, stage, footer bar in a column.
   ========================================================================== */
.page-soon, .page-soon body { height: 100%; overflow: hidden; }
.page-soon body {
  display: flex; flex-direction: column;
  height: 100vh; height: 100dvh;
  background: var(--off-black); color: var(--off-white);
}
.page-soon .site-header, .page-soon .site-footer { flex: 0 0 auto; }

.soon { flex: 1 1 auto; min-height: 0; display: flex; padding: 0 var(--gutter); }
.soon__stage {
  flex: 1 1 auto; min-height: 0; width: 100%; max-width: 1440px; margin: 0 auto;
  display: flex; align-items: center; justify-content: space-between;
  gap: clamp(24px, 5vw, 96px);
}
.soon__text { display: flex; flex-direction: column; gap: clamp(18px, 3.4vh, 36px); min-width: 0; }
.soon__title {
  font-family: var(--font-display); font-weight: 700; text-transform: uppercase;
  font-size: min(12vw, 20vh, 200px); line-height: 0.86; letter-spacing: -0.02em;
}
.soon__title > span { display: block; white-space: nowrap; } /* always exactly two lines */
.soon__title em { font-style: normal; color: var(--turquoise); }
.soon__sub {
  max-width: 44ch;
  font-size: clamp(1rem, min(1.4vw, 2.4vh), 1.25rem); font-weight: 300; line-height: 1.6;
  text-wrap: pretty;
}
.soon__cta { display: flex; }

/* Pattern sphere: the circle stays put, its inner pattern layer turns.
   A square layer rotating inside its inscribed circle always covers it. */
.soon__sphere {
  flex: 0 0 auto; position: relative; overflow: hidden;
  width: min(34vw, 58vh, 620px); aspect-ratio: 1; border-radius: 50%;
}
.soon__sphere::before {
  content: ""; position: absolute; inset: 0;
  background: url("../assets/patterns/pattern-2-light.png") center / cover no-repeat;
  animation: soon-spin 60s linear infinite;
}
@keyframes soon-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .soon__sphere::before { animation: none; } }

.soon__cta .btn { flex: 0 0 auto; }

/* Phones (portrait): the row can't hold the button beside the sphere, so the
   sphere drops below the text, right-aligned, sized by the height left over.
   On shorter phones (up to ~375×667) it would be too small to read, so it's hidden. */
@media (max-width: 640px) {
  .soon__stage { flex-direction: column; align-items: stretch; justify-content: center; }
  .soon__sphere {
    align-self: flex-end;
    flex: 0 1 auto; min-height: 0;
    width: auto; height: min(42vw, 26vh);
  }
}
@media (max-width: 640px) and (max-height: 700px) { .soon__sphere { display: none; } }
/* Short screens: the global footer is taller than the addendum's slim bar,
   so the headline's height term tightens a little to keep one screen. */
@media (max-height: 640px) { .soon__title { font-size: min(12vw, 18vh, 200px); } }

/* Very short screens (phones held sideways): one screen can't fit the copy, so
   the page scrolls normally rather than clipping it. */
@media (max-height: 440px) {
  .page-soon, .page-soon body { height: auto; overflow: visible; }
  .page-soon body { min-height: 100vh; min-height: 100dvh; }
  .soon { padding-block: 24px; }
}