/* ============================================================
   Page-specific composition. All values via tokens.
   ============================================================ */

/* ---------- nav ---------- */

.nav {
  position: fixed;
  inset-inline: 0;
  top: 0;
  z-index: 110;
  background: color-mix(in srgb, var(--color-bg) 85%, transparent);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid transparent;
  transition: border-color var(--duration-hover) var(--ease);
}
.nav.is-scrolled { border-bottom-color: var(--color-border); }

.nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding-block: var(--space-4);
}
/* user-directed 2026-08-10: type wordmark replaces the Upswing logo */
.nav__wordmark {
  font-family: var(--font-display);
  font-size: var(--text-h3);
  letter-spacing: var(--tracking-serif);
  color: var(--color-text);
  line-height: 1;
}

.nav__links {
  display: none;
  gap: var(--space-8);
  font-size: var(--text-label);
  font-weight: var(--weight-label);
}
.nav__links a { color: var(--color-text-muted); }
.nav__links a:hover { color: var(--color-text); }
@media (min-width: 900px) { .nav__links { display: flex; } }

.nav__actions { display: flex; align-items: center; gap: var(--space-3); }
.nav__cta { display: none; padding: 10px 20px; }
@media (min-width: 640px) { .nav__cta { display: inline-flex; } }

.nav__menu-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  min-height: 44px;
  padding: var(--space-2) var(--space-4);
  background: transparent;
  border: none;
  border-radius: var(--radius-pill);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: var(--text-label);
  font-weight: var(--weight-label);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  cursor: pointer;
  transition: background var(--duration-hover) var(--ease);
}
.nav__menu-btn:hover { background: var(--card-bg); }

.nav__menu-icon { position: relative; width: 16px; height: 16px; }
.nav__menu-icon span {
  position: absolute;
  background: currentColor;
  border-radius: var(--radius-pill);
  transition: transform 300ms var(--ease);
}
.nav__menu-icon span:first-child {
  top: 50%; left: 0; width: 100%; height: 2px;
  transform: translateY(-50%);
}
.nav__menu-icon span:last-child {
  top: 0; left: 50%; width: 2px; height: 100%;
  transform: translateX(-50%) rotate(90deg);
}
body.menu-open .nav__menu-icon span:first-child { transform: translateY(-50%) rotate(45deg); }
body.menu-open .nav__menu-icon span:last-child { transform: translateX(-50%) rotate(-45deg); }

/* ---------- menu overlay ---------- */

.menu-overlay {
  position: fixed;
  inset: 0;
  z-index: 100;
  pointer-events: none;
}
body.menu-open .menu-overlay { pointer-events: auto; }

.menu-panel {
  position: absolute;
  top: 0; bottom: 0; right: 0;
  width: 100vw;
  background: var(--color-bg-raised);
  border-left: 1px solid var(--color-border);
  padding: calc(var(--space-24) + var(--space-8)) var(--space-8) var(--space-12);
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform 400ms var(--ease);
}
body.menu-open .menu-panel { transform: translateX(0); }
@media (min-width: 900px) {
  .menu-panel { width: 33vw; min-width: 360px; }
}
@media (prefers-reduced-motion: reduce) {
  .menu-panel { transition: none; }
}

.menu-list {
  list-style: none;
  margin: 0; padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
.menu-list a {
  display: flex;
  align-items: baseline;
  gap: var(--space-4);
}
.menu-num {
  font-family: var(--font-mono);
  font-size: var(--text-label);
  color: var(--color-text-subtle);
}
.menu-label {
  font-family: var(--font-display);
  font-size: var(--text-h1);
  line-height: var(--leading-display);
  letter-spacing: var(--tracking-serif);
  color: var(--color-text);
  transition: color var(--duration-hover) var(--ease);
}
.menu-list a:hover .menu-label { color: var(--color-accent); }

.menu-connect { margin-top: auto; padding-top: var(--space-12); }
.menu-connect .label { color: var(--color-text-subtle); margin: 0 0 var(--space-6); }
.menu-connect__list {
  list-style: none;
  margin: 0; padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-8);
}
.menu-connect__list a { color: var(--color-text-muted); padding-block: var(--space-1); display: inline-block; }
.menu-connect__list a:hover { color: var(--color-accent); }
.menu-cta-row {
  margin-top: var(--space-8);
  padding-top: var(--space-6);
  border-top: 1px solid var(--color-border);
  display: flex;
  flex-direction: column;
}

/* ---------- hero ---------- */

.hero {
  position: relative;
  overflow: clip;
  padding-block: calc(var(--space-24) + var(--space-16)) var(--space-16);
  background: var(--bg-atmosphere);
}
@media (min-width: 720px) {
  .hero { padding-block: calc(var(--space-32) + var(--space-12)) var(--space-24); }
}

.hero__motif {
  top: 4%;
  right: -12%;
  width: min(72vw, 900px);
  aspect-ratio: 1;
  /* 2026-08-08: shapes stepped up to visible presence; the internal stroke
     opacities (0.18–0.53) carry the subtlety */
  opacity: 0.8;
}

.hero .container { position: relative; z-index: 1; }
/* hero pours into the terra problems band via a seam (2026-08-10) */
.hero.section--to-seam { padding-bottom: 0; }

/* user-directed 2026-08-10: headline row spans the full container; pitch,
   actions and portrait live in the grid below it */
.hero__head { position: relative; z-index: 1; }

.hero__grid { align-items: start; row-gap: var(--space-12); margin-top: var(--space-8); }
.hero__copy { grid-column: span 12; }
.hero__portrait { grid-column: span 12; }
@media (min-width: 900px) {
  /* two-row grid: copy row 1, proof bar (2x2) row 2, portrait spans both on
     the right. The left stack fills the column so nothing pools under the
     actions, and the portrait sits cleanly in its own column (2026-08-10) */
  .hero__copy { grid-column: span 7; grid-row: 1; align-self: center; }
  .hero__portrait { grid-column: span 5; grid-row: 1 / span 2; }
  .hero__grid .proofbar { grid-column: span 7; grid-row: 2; grid-template-columns: 1fr 1fr; }
}
.hero__grid .proofbar { grid-column: span 12; margin-top: 0; }
@media (min-width: 900px) {
  .hero__grid .proofbar { grid-column: span 7; }
  .hero__portrait { align-items: flex-start; }
}

.hero__name { margin: 0 0 var(--space-4); }
.hero__name-line {
  display: block;
  font-family: var(--font-display);
  font-size: var(--text-h3);
  color: var(--color-text);
}
.hero__title-line {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--text-label);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--color-accent);
  margin-top: var(--space-2);
}

/* the guide's single terracotta hero accent: a small underline */
.hero__rule {
  width: 64px;
  height: 2px;
  background: var(--color-accent);
  margin-bottom: var(--space-6);
}

.hero .accent { color: var(--color-accent); }
.block { display: block; }

.hero__pitch { margin-top: 0; max-width: 36rem; }

.hero__actions {
  margin-top: var(--space-8);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-4);
}
.hero__links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-6);
}
.hero__links .textlink { font-weight: 500; }
.textlink--plain { color: var(--color-text-muted); }
.textlink--plain:hover { color: var(--color-text); }

/* portrait anchored lower-right with negative space above the head (§6) */
.hero__portrait {
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
.hero__portrait img {
  display: block;
  width: min(100%, 420px);
  height: auto;
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
  box-shadow: 0 32px 64px -32px rgba(0, 0, 0, 0.55);
}
@media (min-width: 900px) {
  .hero__portrait { justify-content: flex-end; }
  .hero__portrait img { width: 100%; max-width: 420px; }
}
/* soft olive illumination behind the subject (§7) */
.hero__portrait-glow {
  position: absolute;
  inset: -10% -14%;
  pointer-events: none;
  background: radial-gradient(ellipse 60% 55% at 62% 62%, color-mix(in srgb, var(--color-olive) 28%, transparent), transparent 70%);
}

/* proof row */
.proofbar {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4);
  margin: var(--space-16) 0 0;
  padding: var(--space-6) var(--space-8);
}
@media (min-width: 900px) {
  .proofbar { grid-template-columns: repeat(4, 1fr); }
}
.proofbar__num {
  display: block;
  font-family: var(--font-display);
  font-size: var(--text-h2);
  line-height: 1;
  color: var(--color-accent);
  font-variant-numeric: tabular-nums;
  text-shadow: 0 0 28px color-mix(in srgb, var(--color-accent) 40%, transparent);
}
.proofbar__label {
  display: block;
  margin-top: var(--space-2);
  font-family: var(--font-mono);
  font-size: var(--text-label);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--color-text-muted);
}

/* ---------- shared section furniture ---------- */

.center-head { text-align: center; margin-inline: auto; }
.center-head-wrap { text-align: center; max-width: var(--text-column); margin: 0 auto var(--space-12); }
.center-head-wrap::before {
  content: "";
  display: block;
  width: var(--space-12);
  height: 1px;
  margin: 0 auto var(--space-6);
  background: linear-gradient(to right, transparent, var(--color-accent), transparent);
}
.center-sub { margin: var(--space-6) auto 0; max-width: 60ch; }
.center-note { margin: var(--space-4) auto 0; max-width: 46ch; font-size: var(--text-label); }
.center-eyebrow { display: block; margin-bottom: var(--space-4); }
.accent { color: var(--color-accent); }

.section--flush { padding-bottom: 0; }

/* decorative dividers inside a same-color stretch (structural seams use .sdiv) */
.divider {
  position: relative;
  margin-top: var(--space-16);
  margin-bottom: calc(-1 * var(--space-8));
  height: clamp(60px, 10vw, 140px);
  width: 100%;
  pointer-events: none;
  opacity: 0.55;
}
.divider svg { display: block; width: 100%; height: 100%; }
.divider--signal { height: clamp(70px, 9vw, 120px); }

/* ---------- per-section shape placements (visible presence, 2026-08-08) ---------- */

.problems__shape { top: -4%; right: -6%; width: min(42vw, 470px); aspect-ratio: 1; opacity: 0.7; }  /* user-directed 2026-08-10: stepped up for visibility on terra */
.about__shape { bottom: -14%; right: -7%; width: min(46vw, 520px); aspect-ratio: 1; opacity: 0.35; }
/* inner blob ring reads as a cutout of the cream ground, not a darker fill */
.about__shape { --shape-cream: var(--color-bg); }
.positioning__shape { top: -28%; right: -8%; width: min(62vw, 720px); aspect-ratio: 1; opacity: 0.22; }
.method__shape { bottom: -8%; left: -7%; width: min(38vw, 430px); aspect-ratio: 1; opacity: 0.45; }
.work__shape { top: -2%; right: -5%; width: min(44vw, 500px); aspect-ratio: 1; opacity: 0.35; }
.career__shape { top: 6%; left: -11%; width: min(42vw, 480px); aspect-ratio: 1; opacity: 0.14; }
.skills__shape { top: 3%; right: -3%; width: min(30vw, 330px); aspect-ratio: 1; opacity: 0.5; }
.finalcta__shape { top: -16%; right: -6%; width: min(26vw, 300px); aspect-ratio: 1; opacity: 0.5; }

/* small screens: text columns span the full width, so the fill-heavy shapes
   would sit behind copy (§15). Keep the line-work, drop the heavy fills. */
@media (max-width: 899px) {
  .hero__motif { opacity: 0.35; }
}
@media (max-width: 639px) {
  .method__shape,
  .finalcta__shape { display: none; }
  /* 2026-08-10: both bands now run ink text on light terracotta, so cream
     shapes only raise contrast; the old cream-text dim guard is retired */
  .problems__shape { opacity: 0.45; }
  .positioning__shape { opacity: 0.22; }
}

/* ---------- problems ---------- */

.problems__sup { font-size: 0.5em; vertical-align: super; }
/* on the terra ground the espresso accent is display-size only; the small sup
   asterisk steps to the measured eyebrow tone (4.60) */
.section-terra .problems__sup { color: var(--color-olive); }
.problems__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-8);
  margin-top: var(--space-12);
}
@media (min-width: 640px) { .problems__grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1080px) { .problems__grid { grid-template-columns: repeat(4, 1fr); gap: var(--grid-gap); } }
.problems__item .icon { color: var(--color-accent); display: inline-flex; }
.problems__title { margin: var(--space-4) 0 var(--space-3); font-size: var(--text-body); }
/* user-directed 2026-08-10: on mobile the whole section centers and the
   icons render 50% larger (28px markup size x 1.5 = 42px) */
@media (max-width: 639px) {
  .problems__item { text-align: center; }
  .problems__item .icon svg { width: calc(28px * 1.5); height: calc(28px * 1.5); }
}
.problems__footnote {
  margin: var(--space-12) auto 0;
  max-width: 60ch;
  text-align: center;
  font-size: var(--text-label);
}

/* ---------- logo wall ---------- */

.logos .center-head { margin-bottom: var(--space-8); }
/* two quotes beneath the logo grid, secondary to the marks */
.logos__quotes {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--grid-gap);
  max-width: 56rem;
  margin: var(--space-12) auto 0;
}
@media (min-width: 640px) { .logos__quotes { grid-template-columns: 1fr 1fr; } }
.logos__quotes .career__quote { margin: 0; }
.logos__rows { overflow: hidden; }
/* user-directed 2026-08-10: equal-cell grid so the marks align in columns;
   2 lines of 10 on desktop. Visual order is shuffled via `order` so the DOM
   (and the frozen alt-text sequence) is untouched. */
.logos__row {
  list-style: none;
  margin: 0;
  padding: var(--space-4) var(--gutter-mobile);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  align-items: center;
  justify-items: center;
  gap: var(--space-6) var(--space-6);
}
@media (min-width: 640px) { .logos__row { grid-template-columns: repeat(5, 1fr); } }
@media (min-width: 1080px) {
  .logos__row { grid-template-columns: repeat(10, 1fr); padding-inline: var(--space-12); }
}
.logos__row img {
  height: 56px;
  width: auto;
  max-width: 100%;
  object-fit: contain;
  /* logos ship in mixed colorways; render them as quiet cream marks */
  filter: brightness(0) invert(0.92) sepia(0.08);
  opacity: 0.5;
  transition: opacity var(--duration-hover) var(--ease);
}
.logos__row img:hover { opacity: 0.8; }
@media (min-width: 1080px) { .logos__row img { height: 72px; } }
/* fixed shuffle (visual only) */
.logos__row li:nth-child(1)  { order: 7; }
.logos__row li:nth-child(2)  { order: 14; }
.logos__row li:nth-child(3)  { order: 1; }
.logos__row li:nth-child(4)  { order: 18; }
.logos__row li:nth-child(5)  { order: 10; }
.logos__row li:nth-child(6)  { order: 3; }
.logos__row li:nth-child(7)  { order: 16; }
.logos__row li:nth-child(8)  { order: 9; }
.logos__row li:nth-child(9)  { order: 20; }
.logos__row li:nth-child(10) { order: 5; }
.logos__row li:nth-child(11) { order: 12; }
.logos__row li:nth-child(12) { order: 2; }
.logos__row li:nth-child(13) { order: 19; }
.logos__row li:nth-child(14) { order: 6; }
.logos__row li:nth-child(15) { order: 11; }
.logos__row li:nth-child(16) { order: 4; }
.logos__row li:nth-child(17) { order: 15; }
.logos__row li:nth-child(18) { order: 8; }
.logos__row li:nth-child(19) { order: 13; }
.logos__row li:nth-child(20) { order: 17; }
/* logos__divider removed 2026-08-10 (user direction): the two logo rows
   merged into one sequential group, no hairline between them */

/* ---------- about ---------- */

.about__grid { align-items: center; row-gap: var(--space-12); }
.about__copy { grid-column: span 12; }
.about__media { grid-column: span 12; }
@media (min-width: 900px) {
  .about__copy { grid-column: span 5; }   /* §6 case-study split: 5 text */
  .about__media { grid-column: span 7; }  /* 7 imagery */
}
.about__intro { margin-top: var(--space-6); }
/* user-directed 2026-08-10: on mobile the heading + intro center and the
   working-session photo drops (alt text stays in the DOM for the copy diff) */
@media (max-width: 639px) {
  .about__copy h2,
  .about__intro { text-align: center; }
  .about__media { display: none; }
}
.about__points {
  list-style: none;
  margin: var(--space-6) 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  color: var(--color-text-muted);
}
.about__points li { display: flex; gap: var(--space-3); }
.dot {
  flex-shrink: 0;
  width: 6px; height: 6px;
  margin-top: 0.55em;
  border-radius: var(--radius-pill);
  background: var(--color-accent);
}

/* ---------- positioning (light band) ---------- */

.positioning {
  background: var(--color-bg);
  color: var(--color-text);
  text-align: center;
}
.positioning__statement {
  max-width: 22em;
  margin: 0 auto;
}
.positioning__statement .accent { color: var(--color-accent); }
.positioning__footnote {
  margin: var(--space-8) auto 0;
  font-size: var(--text-label);
  font-family: var(--font-mono);
}
.positioning__quote {
  max-width: 44rem;
  margin: var(--space-12) auto 0;
  text-align: left;
}

/* ---------- method ---------- */

.method__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--grid-gap);
}
@media (min-width: 640px) { .method__grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1080px) { .method__grid { grid-template-columns: repeat(4, 1fr); } }
.method__card { padding-top: var(--space-12); }
.method__num {
  position: absolute;
  top: var(--space-4);
  right: var(--space-6);
  font-family: var(--font-display);
  font-size: var(--text-h1);
  line-height: 1;
  color: var(--color-accent);
  opacity: 0.28;
}
.method__step { display: block; color: var(--color-text); margin-bottom: var(--space-3); }
.method__quote {
  max-width: 44rem;
  margin: var(--space-12) auto 0;
}
.method__footnote {
  margin: var(--space-12) auto 0;
  max-width: 60ch;
  text-align: center;
  font-style: italic;
}

/* ---------- ai systems ---------- */

.syscards {
  display: flex;
  flex-direction: column;
  gap: var(--grid-gap);
  container-type: inline-size;
}
.syscard {
  display: grid;
  grid-template-columns: 1fr;
  padding: 0;
}
/* container query: split only when the card itself is wide enough */
@container (min-width: 760px) {
  .syscard { grid-template-columns: 5fr 7fr; }  /* §6 case-study 5/7 split */
}
.syscard__stretch {
  position: absolute;
  inset: 0;
  z-index: 2;
  border-radius: inherit;
}
.syscard__visual {
  position: relative;
  min-height: 200px;
  background: var(--color-bg-raised);
  border-bottom: 1px solid var(--color-border);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
@container (min-width: 760px) {
  .syscard__visual { border-bottom: none; border-right: 1px solid var(--color-border); min-height: 340px; }
}
.syscard__shape {
  inset: auto -18% -30% auto;
  width: 70%;
  aspect-ratio: 1;
  opacity: 0.1; /* top of the §5 4–10% band */
}
.syscard__shape--dots {
  inset: auto auto -20% -12%;
}
.syscard__watermark {
  font-family: var(--font-display);
  font-size: clamp(2rem, 6cqw, 3.5rem);
  letter-spacing: var(--tracking-serif);
  color: color-mix(in srgb, var(--color-cream) 9%, transparent);
  text-align: center;
  padding: var(--space-6);
  user-select: none;
}
.syscard__body {
  position: relative;
  padding: var(--space-8);
  display: flex;
  flex-direction: column;
}
.syscard__body .eyebrow { margin: 0 0 var(--space-3); }
.syscard__title {
  font-family: var(--font-display);
  font-size: var(--text-h2);
  font-weight: var(--weight-display);
  letter-spacing: var(--tracking-serif);
  line-height: var(--leading-heading);
  margin-bottom: var(--space-4);
}
.syscard__framing {
  color: var(--color-accent);
  border-left: 2px solid color-mix(in srgb, var(--color-accent) 50%, transparent);
  padding-left: var(--space-3);
  font-size: var(--text-label);
  max-width: 36rem;
  margin-top: var(--space-2);
}
.syscard__chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-8);
  margin: var(--space-6) 0 0;
}
.syscard__chip { display: flex; align-items: baseline; gap: var(--space-2); }
.chip-val {
  font-family: var(--font-mono);
  color: var(--color-accent);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.chip-label {
  font-size: var(--text-label);
  color: var(--color-text-subtle);
  text-transform: uppercase;
  letter-spacing: var(--tracking-label);
}
.syscard__proves {
  margin-top: var(--space-6);
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-border);
}
.syscard__proves .label { display: block; margin: 0 0 var(--space-2); }
.syscard__status {
  font-style: italic;
  font-size: var(--text-label);
  margin-top: var(--space-4);
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
}
.syscard__status::before {
  content: "";
  flex-shrink: 0;
  width: 6px;
  height: 6px;
  border-radius: var(--radius-pill);
  background: var(--color-accent);
  box-shadow: 0 0 8px color-mix(in srgb, var(--color-accent) 70%, transparent);
  align-self: center;
}
.syscard__actions {
  margin-top: auto;
  padding-top: var(--space-6);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3) var(--space-6);
}
.syscard__actions .textlink { position: relative; z-index: 3; }
/* the whole card is the link; the visible "button" is presentation only */
.syscard:hover .btn-primary { background: var(--color-cta-hover); }

/* ---------- earlier career ---------- */

.career__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--grid-gap);
  align-items: stretch;
}
@media (min-width: 900px) { .career__grid { grid-template-columns: 1fr 1fr; } }
.career__card { display: flex; flex-direction: column; }
.career__logo {
  position: absolute;
  top: var(--space-6);
  right: var(--space-6);
  height: 48px;
  width: auto;
  max-width: 150px;
  object-fit: contain;
  filter: brightness(0) invert(0.92) sepia(0.08);
  opacity: 0.55;
}
.career__metric {
  font-family: var(--font-display);
  font-size: var(--text-h1);
  line-height: 1;
  color: var(--color-accent);
  font-variant-numeric: tabular-nums;
  text-shadow: 0 0 32px color-mix(in srgb, var(--color-accent) 35%, transparent);
  padding-right: 7rem;
  margin: 0;
}
.career__metric-label { margin: var(--space-2) 0 0; max-width: 20rem; font-size: var(--text-label); }
.career__title { margin-top: var(--space-6); }
.career__role { margin: var(--space-2) 0 0; text-transform: uppercase; letter-spacing: var(--tracking-label); }
.career__outcome { margin-top: var(--space-4); font-size: var(--text-label); }
.career__quote {
  margin: var(--space-6) 0 0;
  padding-left: var(--space-4);
  border-left: 2px solid var(--color-accent);
}
.career__quote p {
  font-style: italic;
  color: var(--color-text-muted);
  font-size: var(--text-label);
  margin: 0;
}
.career__quote footer {
  margin-top: var(--space-2);
  text-transform: uppercase;
  letter-spacing: var(--tracking-label);
  font-size: var(--text-label);
}
.taglist {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin: auto 0 0;
  padding: var(--space-6) 0 0;
}

/* ---------- trust card (single column since its move into #positioning) ---------- */

.trust__card {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-8);
  padding: var(--space-8);
  margin-top: var(--space-12);
  text-align: left;
}
@media (min-width: 1080px) {
  .trust__card { padding: var(--space-12); }
}
/* stars sit at label size; the terra accent token is display-only (3.79:1),
   so on the terra band they step to the eyebrow tone (4.60:1) */
.section-terra .stars { color: var(--color-olive); }
.trust__profiles {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin-top: var(--space-6);
}
@media (min-width: 640px) { .trust__profiles { flex-direction: row; } }
.trust__profile {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  transition: border-color var(--duration-hover) var(--ease), background var(--duration-hover) var(--ease);
}
.trust__profile:hover { border-color: var(--color-border-strong); background: var(--card-bg); }
.trust__gbadge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px; height: 28px;
  border-radius: var(--radius-pill);
  background: var(--color-cream);
  flex-shrink: 0;
}
.trust__gbadge svg { width: 16px; height: 16px; }
.trust__profile-text { display: flex; flex-direction: column; line-height: 1.3; font-size: var(--text-label); }
.trust__stars-row { display: flex; align-items: center; gap: var(--space-2); }
.stars { color: var(--color-accent); letter-spacing: 0.1em; margin: 0; }
.trust__co { font-weight: var(--weight-h3); color: var(--color-text); }
.trust__note { margin-top: var(--space-3); max-width: 24rem; font-size: var(--text-label); }
.trust__quote {
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--text-lead);
  line-height: var(--leading-lead);
  margin: 0 0 var(--space-4);
}
.trust__review-stars { margin-bottom: var(--space-4); }
.trust__attrib { display: flex; flex-direction: column; gap: var(--space-1); margin: 0; }
.trust__attrib-name { font-weight: var(--weight-h3); }

/* ---------- reviews ---------- */

.reviews__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--grid-gap);
}
@media (min-width: 640px) { .reviews__grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1080px) { .reviews__grid { grid-template-columns: repeat(5, 1fr); } }
.review-card { padding: var(--space-6); }
.review-card .stars { font-size: var(--text-label); margin-bottom: var(--space-3); }
.review-card__quote { font-size: var(--text-body); color: var(--color-text-muted); margin-bottom: var(--space-4); }
.review-card__name { font-size: var(--text-label); font-weight: var(--weight-h3); margin: 0; }
.review-card__org { font-size: var(--text-label); margin: var(--space-1) 0 0; }
.review-card--stat { background: color-mix(in srgb, var(--color-accent) 10%, var(--card-bg)); }
.review-card__stat {
  font-family: var(--font-display);
  font-size: var(--text-h1);
  line-height: 1;
  color: var(--color-accent);
  font-variant-numeric: tabular-nums;
  text-shadow: 0 0 32px color-mix(in srgb, var(--color-accent) 35%, transparent);
  margin: 0 0 var(--space-2);
}
.review-card__stat-label { font-size: var(--text-label); }
.review-card__source { display: flex; gap: var(--space-2); font-size: var(--text-label); margin: var(--space-3) 0 0; }
.check { color: var(--color-success); }
.ghost-link { color: var(--color-accent); }
.ghost-link:hover { color: var(--color-accent-hover); }

/* ---------- skills ---------- */

.skills__panel { padding: 0; }
.skills__lane {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
  padding: var(--space-6);
  border-bottom: 1px solid var(--color-border);
}
.skills__lane:last-child { border-bottom: none; }
@media (min-width: 900px) {
  .skills__lane { grid-template-columns: 220px 1fr; gap: var(--space-6); padding: var(--space-8); }
}
.skills__lane-name { font-size: var(--text-lead); }
.skills__lane .taglist { margin: 0; padding: 0; }

/* ---------- final cta ---------- */

.finalcta { text-align: center; }
.finalcta__actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  margin-top: var(--space-8);
}
@media (min-width: 640px) { .finalcta__actions { flex-direction: row; flex-wrap: wrap; } }

/* ---------- footer ---------- */

.footer {
  background: var(--color-bg-raised);
  border-top: 1px solid var(--color-border);
  padding: var(--space-16) 0 var(--space-8);
}
.footer__cols {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-8);
  margin-bottom: var(--space-12);
}
@media (min-width: 720px) { .footer__cols { grid-template-columns: repeat(3, 1fr); } }
.footer__col-head { margin: 0 0 var(--space-3); }
.footer__list {
  list-style: none;
  margin: 0; padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  font-size: var(--text-label);
}
.footer__list a { color: var(--color-text-muted); }
.footer__list a:hover { color: var(--color-text); }
.footer__bottom {
  border-top: 1px solid var(--color-border);
  padding-top: var(--space-6);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
}
.footer__bottom p { margin: 0; font-size: var(--text-label); }
.footer__built {
  margin: var(--space-4) 0 0;
  text-align: center;
  font-size: var(--text-label);
}

/* ---------- section atmosphere (user-directed, 2026-08-10) ----------
   The hero's radial glow extends to every section: one soft olive (dark
   bands), olive-on-cream (light bands), or espresso (terra band) radial per
   section, alternating corners so the rhythm doesn't repeat. Alphas are
   contrast-checked composites (see tools/contrast_check.py). Placed after
   every `background:` shorthand in the cascade so the image layer wins. */
.section {
  background-image: radial-gradient(circle at 82% 10%, color-mix(in srgb, var(--color-olive) 10%, transparent), transparent 44%);
}
.section:nth-of-type(even) {
  background-image: radial-gradient(circle at 14% 88%, color-mix(in srgb, var(--color-olive) 10%, transparent), transparent 44%);
}
.section-light,
.section-light:nth-of-type(even) {
  background-image: radial-gradient(circle at 80% 12%, color-mix(in srgb, var(--color-olive) 5%, transparent), transparent 46%);
}
.section-terra,
.section-terra:nth-of-type(even) {
  background-image: radial-gradient(circle at 78% 16%, color-mix(in srgb, var(--color-espresso) 6%, transparent), transparent 46%);
}

/* ---------- mobile hero card (user-directed, 2026-08-10) ----------
   Photo first, name/title on a glass plate over the lower third. The scrim
   is rgba(bg, 0.65): measured against the photo's brightest patch
   (~rgb 235) the composite holds cream at 4.87, so both lines stay cream.
   Desktop is untouched. */
.hero__mobilecard { display: none; }
@media (max-width: 639px) {
  /* tighter clearance under the fixed nav: 160px -> 96px (user, 2026-08-10) */
  .hero { padding-block: var(--space-24) var(--space-16); }
  .hero__mobilecard { display: block; position: relative; margin-bottom: var(--space-8); }
  .hero__mobilecard img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: var(--radius-lg);
    border: 1px solid var(--color-border);
    box-shadow: 0 32px 64px -32px rgba(0, 0, 0, 0.55);
  }
  .hero__plate {
    position: absolute;
    inset-inline: var(--space-4);
    bottom: var(--space-4);
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    padding: var(--space-4) var(--space-6);
    border-radius: var(--radius-md);
    background: rgba(29, 31, 28, 0.65);
    -webkit-backdrop-filter: blur(16px) saturate(140%);
    backdrop-filter: blur(16px) saturate(140%);
    border: 1px solid var(--color-border);
  }
  .hero__plate-name {
    font-family: var(--font-display);
    font-size: var(--text-h3);
    line-height: 1.1;
    color: var(--color-cream);
  }
  .hero__plate-title {
    font-family: var(--font-mono);
    font-size: var(--text-label);
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
    color: var(--color-cream);
  }
  /* canonical name block stays for AT + copy sequence, visually replaced */
  .hero__name {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }
  .hero__portrait { display: none; }
}

/* ---------- floating circles behind glass cards (user-directed, 2026-08-10)
   The career-section pattern the user singled out: offset_circles drifting
   behind frosted card surfaces. Same asset, three new placements. Composite
   worst case matches the measured career/atmo rows (fills sit behind
   blur(12px) card surfaces or in card-free corners). */
.hero__proofshape { bottom: 4%; left: -6%; width: min(34vw, 380px); aspect-ratio: 1; opacity: 0.3; }
.trust__shape { top: -14%; right: 2%; width: min(30vw, 340px); aspect-ratio: 1; opacity: 0.28; }
.reviews__shape { top: 18%; left: -8%; width: min(36vw, 400px); aspect-ratio: 1; opacity: 0.28; }

/* ---------- mobile shape scale (user-directed, 2026-08-10): 2x ---------- */
@media (max-width: 639px) {
  .hero__motif { width: min(144vw, 1800px); }
  .problems__shape { width: min(84vw, 940px); }
  .about__shape { width: min(92vw, 1040px); }
  .positioning__shape { width: min(124vw, 1440px); }
  .work__shape { width: min(88vw, 1000px); }
  .career__shape { width: min(84vw, 960px); }
  .skills__shape { width: min(60vw, 660px); }
  .hero__proofshape { width: min(68vw, 760px); }
  .trust__shape { width: min(60vw, 680px); }
  .reviews__shape { width: min(72vw, 800px); }
  /* method + finalcta shapes stay hidden below 640 (text-collision guard) */
}