/**
 * rstew.art v3.5 - full rebuild (local only)
 * Who sits on a full-bleed solid blue band (live #top language); paper cards keep contrast.
 * No page1 banner, no park video. Scroll-driven pathway remains on the Why trail.
 * Saw CTAs from v3.1. What: v3 lenses/expand + rotating X on Expand right.
 * Study rows with square thumb RIGHT. Footer CSS from v3.
 * Awards and Why restored; provisional How process; When/letterhead parked. No em dashes.
 */

:root {
  --charcoal: #585757;
  --light-grey: #d2d2d2;
  --blue: #1c4e9e;
  --light-blue: #6d8ac6;
  --orange: #f37123;
  --white: #eaeaea;
  --blue-grey: #54656f;
  --blue-green: #233845;
  --museo-sans: "museo-sans", "Museo Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --museo: "museo-slab", "Museo Slab", Georgia, "Times New Roman", serif;
  --shell-max: 1000px;
  --header-h: 3rem;
  --scroll: 0;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

[hidden] {
  display: none !important;
}

html {
  scroll-behavior: smooth;
  /* Sticky navy header clearance for in-page anchors */
  scroll-padding-top: calc(var(--header-h) + 1.75rem);
}

::selection {
  background-color: var(--orange);
  color: var(--white);
}

::-moz-selection {
  background-color: var(--orange);
  color: var(--white);
}

html,
body {
  margin: 0;
  padding: 0;
  width: 100%;
}

body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: center / auto repeat url("assets/ltbg.png"), var(--light-blue);
  font-family: var(--museo-sans);
  color: var(--charcoal);
  line-height: 1.5;
}

/* ---------------------------------- */
/* MINIMAL SHELL                      */
/* ---------------------------------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 200;
  background: var(--blue);
  color: var(--white);
  min-height: var(--header-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.75rem 1.5rem;
  /* Orange fill lives on .progress under the bar (live scroll rail) */
  box-shadow: none;
}

.site-header__brand {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  font-family: var(--museo);
  font-weight: 700;
  font-size: 1.15rem;
  letter-spacing: 0.02em;
  color: var(--white);
  text-decoration: none;
  line-height: 1;
  flex: 0 0 auto;
}

.site-header__word {
  color: var(--white);
}

.site-header__x {
  display: block;
  width: 0.85rem;
  height: 0.85rem;
  margin: 0 0.05rem;
  flex: 0 0 auto;
}

.site-nav {
  flex: 1 1 auto;
  display: flex;
  justify-content: flex-end;
  min-width: 0;
}

.site-nav__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 0.15rem 0.1rem;
}

.site-nav__list a {
  display: inline-block;
  color: rgba(234, 234, 234, 0.78);
  text-decoration: none;
  font-family: var(--museo-sans);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0.35rem 0.55rem;
  border-radius: 3px;
  border-bottom: 2px solid transparent;
  transition:
    color 0.175s ease,
    border-color 0.175s ease,
    background-color 0.175s ease,
    text-shadow 0.175s ease,
    transform 0.175s ease;
}

.site-nav__list a:hover {
  color: var(--white);
  border-bottom-color: rgba(243, 113, 35, 0.55);
  background: rgba(255, 255, 255, 0.06);
}

.site-nav__list a:focus-visible {
  outline: 2px solid var(--orange);
  outline-offset: 2px;
}

.site-nav__list a.is-active,
.site-nav__list a[aria-current="true"] {
  color: var(--white);
  border-bottom-color: var(--orange);
  background: rgba(243, 113, 35, 0.12);
  text-shadow: 0 0 14px rgba(243, 113, 35, 0.55);
  transform: translateY(-1px);
}

@media (max-width: 720px) {
  .site-header {
    flex-wrap: wrap;
    row-gap: 0.35rem;
    padding: 0.55rem 0.85rem 0.65rem;
  }

  .site-nav {
    flex: 1 1 auto;
    justify-content: flex-end;
  }

  .site-nav__list {
    justify-content: flex-end;
  }

  .site-nav__list a {
    font-size: 0.7rem;
    padding: 0.3rem 0.45rem;
  }
}

/* Live .progress rail: orange line under sticky nav, fills L→R with --scroll */
.progress {
  height: 0.3em;
  width: 0%;
  background-color: var(--orange);
  display: block;
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: 1;
  pointer-events: none;
}

.progress.scroll-driven {
  animation-name: progress;
  animation-duration: 1s;
  animation-timing-function: linear;
}

@keyframes progress {
  to {
    width: 100%;
  }
}

.site-main {
  flex: 1 0 auto;
  width: 100%;
  max-width: var(--shell-max);
  margin: 0 auto;
  padding: 1.5rem 1.5rem 0;
}

.path-btn {
  appearance: none;
  font-family: var(--museo-sans);
  font-size: 0.8rem;
  font-weight: 700;
  padding: 0.4rem 0.8rem;
  border-radius: 6px;
  cursor: pointer;
  line-height: 1.2;
  text-decoration: none;
  display: inline-block;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}

.path-btn:focus-visible {
  outline: 2px solid var(--orange);
  outline-offset: 2px;
}

.path-btn--primary {
  background: var(--blue);
  border: 1px solid var(--blue);
  color: var(--white);
}

.path-btn--primary:hover {
  background: var(--orange);
  border-color: var(--orange);
  box-shadow: 0 6px 14px rgba(243, 113, 35, 0.28);
}

.path-btn--ghost {
  background: var(--white);
  border: 1px solid var(--blue-grey);
  color: var(--blue);
}

.path-btn--ghost:hover {
  border-color: var(--orange);
  color: var(--orange);
}

/* ---------------------------------- */
/* WHO: trail CTAs, then fixed blue-topo */
/* ---------------------------------- */

.chapter-who {
  /* No solid section fill. Topo lives on .who-topo after the trail CTA. */
  position: relative;
  z-index: 2;
  width: 100vw;
  max-width: none;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  margin-top: -1.5rem; /* cancel .site-main top padding */
  margin-bottom: 0;
  padding: 0;
  scroll-margin-top: 1.5rem;
  background: transparent;
  border-top: 0.35rem solid var(--orange);
  border-bottom: none;
  box-sizing: border-box;
  overflow: visible;
}

.chapter-who > .who-top {
  max-width: 920px;
  margin-left: auto;
  margin-right: auto;
  padding: 2.75rem 1.5rem 1.35rem;
  box-sizing: border-box;
}

/* Fixed blue-topo band: starts after who-enter; height follows content (no 75vh) */
.who-topo {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  width: 100%;
  min-height: 0;
  margin: 0;
  /* Noticeable top/bottom air; bottom also clears overlapping saw teeth */
  padding: 2.75rem 1.5rem 4.75rem;
  box-sizing: border-box;
  background:
    center / cover fixed no-repeat url("assets/hero/blue-topo-lines.png"),
    var(--light-blue);
  /* No hard bottom border: saw straddles topo → ltbg */
  border-bottom: none;
  overflow: visible;
}

.who-topo > .who-layout {
  max-width: 920px;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  flex: 0 0 auto;
}

/* Hang band under Who card: 2x2 tag stack left half, buck post-it right half. */
.who-hang {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: center;
  gap: clamp(1rem, 3vw, 2.5rem);
  width: 100%;
  max-width: 920px;
  margin: 1.15rem auto 0;
  flex: 0 0 auto;
}

/* Buck sketch on post-it: right column, vertically centered on the 2x2. */
.who-postit {
  position: relative;
  justify-self: center;
  align-self: center;
  width: clamp(11rem, 28vw, 20rem);
  max-width: 100%;
  margin: 0;
  aspect-ratio: 361 / 472;
  transform: rotate(2.5deg);
  filter: drop-shadow(0 10px 15px rgba(0, 0, 0, 0.15));
}

.who-postit__page {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: fill;
}

.who-postit__buck {
  position: absolute;
  left: 50%;
  top: 54%;
  width: 60%;
  height: auto;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

/* Four hang tags: 2x2 grid (axe | wolf, 45 | S), left half under Who card. No fill. */
.who-hang > .who-sketch-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 8.5rem));
  gap: clamp(0.25rem, 1vw, 0.55rem);
  align-items: center;
  justify-content: center;
  align-self: center;
  width: 100%;
  margin: 0;
  padding: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
  flex: 0 0 auto;
}

/* Shared hang-tag look (hero 2x2 + relocated Emmy / blocks). Sway in site.js. */
.hang-tag {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 41 / 63.2;
  object-fit: contain;
  object-position: center;
  background: transparent;
  border: 0;
  /* Pivot at luggage-tag eyelet (~cx 20.5, cy 6.8 in 41x63.2 viewBox). */
  transform-origin: 50% 10.75%;
  transform: rotate(var(--tag-rot, 0deg));
  will-change: transform;
}

/* Relocated single tags: small, transparent, hung off a card corner. */
.hang-spot {
  position: absolute;
  z-index: 3;
  display: block;
  width: 2.9rem;
  margin: 0;
  padding: 0;
  background: transparent;
  border: 0;
  filter: drop-shadow(0 4px 5px rgba(0, 0, 0, 0.22));
  touch-action: pan-y;
}

/* Emmy tag: hung off the top-left corner of the Emmy plaque, beside the trophy. */
.hang-spot--emmy {
  top: -1.6rem;
  left: -1.15rem;
}

/* Blocks tag: "build" marker hung off the top-right corner of Act II Develop. */
.act-slot {
  position: relative;
  display: flex;
  min-width: 0;
}

.act-slot > .act-card {
  flex: 1 1 auto;
  min-width: 0;
}

.hang-spot--build {
  top: -1.35rem;
  right: 0.9rem;
}

@media (max-width: 720px) {
  .hang-spot {
    width: 2.5rem;
  }

  .hang-spot--emmy {
    top: -1.35rem;
    left: -0.7rem;
  }

  .hang-spot--build {
    top: -1.15rem;
    right: 0.75rem;
  }

  /* Stacked acts: a little air so the build tag does not crowd Act I. */
  .act-slot {
    margin-top: 0.4rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hang-tag {
    transform: none;
    will-change: auto;
  }
}

@media (max-width: 720px) {
  .chapter-who > .who-top {
    padding: 2rem 1.15rem 1.1rem;
  }

  .who-hang > .who-sketch-row {
    grid-template-columns: repeat(2, minmax(0, 5.75rem));
    gap: 0.4rem 0.35rem;
  }

  .who-hang {
    grid-template-columns: auto minmax(0, 1fr);
    gap: 0.75rem;
  }

  .who-postit {
    width: min(100%, 11rem);
    transform: rotate(2deg);
  }

  .who-topo {
    padding: 2.15rem 1.15rem 4.5rem;
    /* Match live #top: demote fixed attachment on small screens */
    background:
      center / cover scroll no-repeat url("assets/hero/blue-topo-lines.png"),
      var(--light-blue);
  }
}

/* Very narrow phones: post-it stacks below the tag stack. */
@media (max-width: 380px) {
  .who-hang {
    grid-template-columns: 1fr;
  }

  .who-postit {
    width: min(70%, 11rem);
  }
}

.who-top {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.85rem 1.1rem;
  align-items: start;
  margin: 0; /* topo band begins immediately after trail CTA */
  position: relative;
}

.who-top__main {
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  position: relative;
  z-index: 1;
  margin-left: 0;
  padding-left: 0;
}

.who-hero {
  margin: 0 0 1rem;
  width: 100%;
  padding: 1rem 1.1rem 1.05rem;
  background: rgba(243, 243, 243, 0.96);
  border: 1px solid var(--light-grey);
  border-radius: 10px;
  border-top: 3px solid var(--orange);
  box-shadow: 0 6px 18px rgba(28, 78, 158, 0.18);
}

.who-hero__hook {
  font-family: var(--museo);
  color: var(--blue);
  margin: 0 0 0.5rem;
  font-weight: 700;
  font-size: clamp(1.85rem, 4.5vw, 2.3rem);
  letter-spacing: -0.02em;
  line-height: 1.12;
}

.who-hero__sub {
  margin: 0;
  color: var(--blue-grey);
  font-size: clamp(1.12rem, 2.6vw, 1.4rem);
  font-weight: 500;
  line-height: 1.35;
  max-width: 34rem;
}

.who-enter {
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  /* Stretches the hero column, so buttons share that width evenly */
  justify-content: space-between;
  align-self: stretch;
  width: 100%;
  max-width: 100%;
  gap: 0.5rem 0.75rem;
  padding: 0.45rem 0.5rem;
  background: rgba(234, 234, 234, 0.72);
  border: 1px solid rgba(210, 210, 210, 0.85);
  border-radius: 10px;
  box-shadow: 0 4px 14px rgba(28, 78, 158, 0.12);
}

.who-enter__btn {
  display: inline-block;
  text-decoration: none;
  padding: 0.5rem 1rem;
  font-size: 0.8rem;
}

.who-patch {
  margin: 0.35rem 0 0;
  width: clamp(7.5rem, 18vw, 9.5rem);
  flex-shrink: 0;
  position: relative;
  z-index: 2;
  margin-right: 0;
}

.who-patch img {
  display: block;
  width: 100%;
  height: auto;
  filter: drop-shadow(0 4px 10px rgba(34, 34, 34, 0.35));
}

@media (max-width: 560px) {
  .who-top {
    grid-template-columns: 1fr;
    justify-items: center;
    gap: 0.85rem;
  }

  .who-top__main {
    margin-left: 0;
    padding-left: 0;
    width: 100%;
    align-items: center;
    text-align: center;
  }

  .who-hero {
    padding: 1rem 1.1rem 1.05rem;
    text-align: center;
  }

  .who-hero__sub {
    margin-left: auto;
    margin-right: auto;
  }

  /* Wrapped trail CTAs: space-around keeps a short last row centered, not pinned left */
  .who-enter {
    justify-content: space-around;
    width: 100%;
    gap: 0.55rem 0.65rem;
  }

  .who-patch {
    width: clamp(7rem, 48vw, 9rem);
    margin: 0;
    margin-right: 0;
    order: -1;
    justify-self: center;
  }
}

.chapter-who__tag {
  display: block;
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--orange);
  font-weight: 700;
  margin: 0 0 0.45rem;
}

.who-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  align-items: stretch;
  position: relative;
}

.who-layout__copy {
  position: relative;
  z-index: 1;
  min-width: 0;
  padding: 1.45rem 1.25rem 1.55rem;
  background: rgba(234, 234, 234, 0.96);
  border: 1px solid var(--light-grey);
  border-radius: 10px;
  box-shadow: 0 8px 22px rgba(28, 78, 158, 0.2);
}

.who-about {
  margin: 0 0 1.15rem;
  padding: 0;
}

.who-about__row {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(12rem, 0.95fr);
  gap: 1rem 1.25rem;
  align-items: center;
}

.who-about__p {
  margin: 0;
  color: var(--charcoal);
  font-size: 1.02rem;
  line-height: 1.6;
  font-weight: 500;
  max-width: none;
  min-width: 0;
}

.who-about__map {
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 0;
  width: 100%;
}

.who-about__map img {
  display: block;
  width: 100%;
  max-width: 22rem;
  height: auto;
  filter: drop-shadow(0 4px 12px rgba(34, 34, 34, 0.3));
}

.who-about__map-caption {
  margin: 0.45rem 0 0;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--orange);
  text-align: center;
}

@media (max-width: 640px) {
  .who-about__row {
    grid-template-columns: 1fr;
    justify-items: center;
  }
}

.who-teasers {
  margin: 0;
}

.who-teasers__title {
  font-family: var(--museo);
  color: var(--blue);
  margin: 0 0 0.75rem;
  font-weight: 700;
  font-size: clamp(1.05rem, 2.2vw, 1.25rem);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.who-teasers__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.5rem;
}

@media (min-width: 640px) {
  .who-teasers__list {
    grid-template-columns: repeat(3, 1fr);
    gap: 0.75rem;
  }
}

.who-teasers__list li {
  margin: 0;
  padding: 0.7rem 0.75rem;
  background: #f3f3f3;
  border: 1px solid var(--light-grey);
  border-radius: 8px;
  border-left: 3px solid var(--orange);
  color: var(--charcoal);
  font-size: 0.85rem;
  line-height: 1.4;
  font-weight: 500;
  box-shadow: 0 3px 10px rgba(84, 101, 111, 0.05);
}

.who-saw-line {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 0;
  margin: 0.15rem 0 1.15rem;
  padding: 0;
}

.who-saw-line img {
  display: block;
  width: min(94%, 30rem);
  height: auto;
}

/* ---------------------------------- */
/* SCROLL-DRIVEN TRAIL                 */
/* ---------------------------------- */

.scroll-driven {
  animation-play-state: paused;
  animation-delay: calc(var(--scroll, 0) * -1s);
  animation-iteration-count: 1;
  animation-fill-mode: both;
}

.walking-path {
  display: block;
  width: 100%;
  height: auto;
}

.walking-path.scroll-driven {
  animation-name: walk-trail;
  animation-duration: 1s;
  animation-timing-function: linear;
}

@keyframes walk-trail {
  from { transform: translateX(0%); }
  to { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
  .walking-path.scroll-driven {
    animation: none;
    transform: none;
  }
}

/* ---------------------------------- */
/* CTA SAW BAR (from v3.1)            */
/* ---------------------------------- */

.saw-break-container {
  /* Live/v3.1: pull saw up so top teeth sit ON the blue topo; below = body ltbg */
  position: relative;
  z-index: 95;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  margin-top: -3.5rem;
  margin-bottom: 2.5rem;
  border-top: none;
  padding-top: 0;
  overflow: visible;
}

.saw-break {
  background:
    center / 5em repeat-x url("assets/awards/x-topo.svg"),
    center / cover no-repeat url("assets/cta/top-saw-double.png");
  height: 12rem;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 10;
  margin-top: 0;
}

.cta-btns {
  padding: 0.8em;
  border-radius: 0.5em;
  border: solid 0.08rem var(--blue);
  background-color: rgba(255, 255, 255, 0.5);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: nowrap;
  gap: 0.75rem;
  width: min(600px, calc(100% - 2rem));
  margin-left: auto;
  margin-right: auto;
  transition: background-color 0.4s ease-in-out;
}

.cta-btns:hover {
  background-color: #fff;
}

.cta-btns a {
  text-decoration: none;
  flex: 0 0 auto;
  display: flex;
}

.cta-btns button {
  background: linear-gradient(180deg, var(--blue-grey) 0%, #404f58 100%);
  color: var(--white);
  padding: 15px 1.15rem;
  border-radius: 4px;
  cursor: pointer;
  font-family: var(--museo-sans);
  font-size: clamp(0.8rem, 2.2vw, 1rem);
  font-weight: 700;
  border: 1px solid #334047;
  transition: all 0.2s;
  width: auto;
  text-align: center;
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.2), 0 2px 4px rgba(0, 0, 0, 0.2);
}

.cta-btns button:hover {
  background: linear-gradient(180deg, var(--light-blue) 0%, #5773a8 100%);
  border-color: #465f8f;
  transform: translateY(-1px);
}

@media (max-width: 520px) {
  .saw-break {
    height: auto;
    min-height: 10rem;
    padding: 1.5rem 0;
  }
  .cta-btns {
    flex-wrap: wrap;
    justify-content: space-around;
    width: min(600px, calc(100% - 2rem));
    row-gap: 0.65rem;
  }
  .cta-btns a {
    flex: 0 1 auto;
  }
  .cta-btns button {
    padding: 12px 0.85rem;
  }
}

/* ---------------------------------- */
/* WHAT: lenses + expand bars + X     */
/* (structure from v3; X from v3.1)   */
/* ---------------------------------- */

.chapter-what {
  margin: 0 0 2.75rem;
  scroll-margin-top: 1.5rem;
}

.chapter-what__tag {
  display: block;
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--orange);
  font-weight: 700;
  margin: 0 0 0.4rem;
}

.chapter-what h2 {
  font-family: var(--museo);
  color: var(--blue);
  margin: 0 0 0.45rem;
  font-weight: 700;
  font-size: clamp(1.6rem, 3.5vw, 2.15rem);
  letter-spacing: -0.02em;
}

.chapter-what__lead {
  margin: 0 0 1.25rem;
  color: var(--blue-grey);
  font-size: 1.05rem;
  line-height: 1.55;
  max-width: 40rem;
  font-weight: 500;
}

/* Lens toolbar: light chrome + orange active */
.chrome-bar.lens-bar {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 0.55rem 0.75rem;
  margin: 0 auto 1rem;
  width: 100%;
  max-width: 100%;
  padding: 0.55rem;
  background: #f3f3f3;
  border: 1px solid var(--light-grey);
  border-radius: 8px;
}

@media (max-width: 720px) {
  .chrome-bar.lens-bar {
    justify-content: space-around;
    gap: 0.5rem 0.65rem;
  }
}

.lens-btn {
  appearance: none;
  font-family: var(--museo-sans);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 0.45rem 0.85rem;
  border-radius: 6px;
  border: 1px solid var(--blue-grey);
  background: var(--white);
  color: var(--blue);
  cursor: pointer;
  line-height: 1.2;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}

.lens-btn:hover {
  border-color: var(--orange);
  color: var(--orange);
}

.lens-btn:focus-visible {
  outline: 2px solid var(--orange);
  outline-offset: 2px;
}

.lens-btn.is-active,
.lens-btn[aria-pressed="true"] {
  background: var(--orange);
  border-color: var(--orange);
  color: var(--white);
  box-shadow: 0 6px 14px rgba(243, 113, 35, 0.28);
}

.expand-stack {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.expand-card {
  border: 1px solid #c8cfd4;
  border-radius: 1rem;
  background: #ffffff;
  overflow: hidden;
  box-shadow: 0 8px 20px rgba(35, 56, 69, 0.06);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
  margin: 0;
}

.expand-card.is-filtered-out {
  opacity: 0.35;
}

.expand-card[data-open="true"] {
  border-color: var(--orange);
  box-shadow:
    0 14px 28px rgba(35, 56, 69, 0.1),
    0 0 18px rgba(243, 113, 35, 0.1);
}

.expand-head {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 0.55rem;
  padding: 0.85rem 1.1rem;
  background: #f7f7f7;
  border-bottom: 1px solid transparent;
  cursor: pointer;
  transition: background-color 0.25s ease, border-color 0.25s ease;
}

.expand-head:hover {
  background: rgba(243, 113, 35, 0.04);
}

.expand-head:focus-visible {
  outline: 2px solid var(--orange);
  outline-offset: -4px;
}

.expand-card[data-open="true"] .expand-head {
  border-bottom-color: var(--light-grey);
  background: rgba(243, 113, 35, 0.06);
}

.expand-title {
  flex: 1;
  margin: 0;
  font-family: var(--museo);
  font-weight: 700;
  font-size: 1.1rem;
  color: var(--blue);
  letter-spacing: 0.02em;
  min-width: 0;
}

.expand-actions {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 0.35rem;
  margin-left: auto;
  flex-shrink: 0;
}

/* Rotating X: Skill-Sets pattern, parked to the RIGHT of Expand */
.expand-x {
  appearance: none;
  border: none;
  background: transparent;
  padding: 0;
  margin: 0;
  cursor: pointer;
  line-height: 0;
  border-radius: 50%;
}

.expand-x:focus-visible {
  outline: 2px solid var(--orange);
  outline-offset: 2px;
}

.orange-x-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  transition: transform 0.5s ease-in-out, background-color 0.3s ease;
  flex-shrink: 0;
}

.orange-x-icon img {
  width: 1.2rem;
  height: 1.2rem;
}

.expand-x:hover .orange-x-icon {
  background-color: rgba(243, 114, 35, 0.1);
}

/* Resting = +, open = rotate 45deg to × (v3.1 Skill-Sets behavior) */
.expand-card[data-open="true"] .orange-x-icon {
  transform: rotate(45deg);
}

.expand-body {
  max-height: 0;
  padding: 0 1.15rem;
  background: var(--white);
  opacity: 0;
  overflow: hidden;
  transition: max-height 0.5s ease, opacity 0.35s ease, padding 0.5s ease;
  will-change: max-height, opacity, padding;
}

.expand-body.is-open {
  padding: 1rem 1.15rem 1.75rem;
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  .expand-head,
  .expand-body {
    transition: none;
  }
}

.expand-body > p {
  margin: 0 0 0.75rem;
  color: var(--charcoal);
  font-size: 0.98rem;
  line-height: 1.55;
  font-weight: 500;
}

.expand-label {
  display: block;
  font-size: 0.65rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--blue-grey);
  font-weight: 700;
  margin: 0 0 0.35rem !important;
}

/* Grey-box walls: 1×5 equal squares */
.mason-wall {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 0.75rem;
  margin: 0.85rem 0 1.25rem;
}

@media (max-width: 720px) {
  .mason-wall {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 480px) {
  .mason-wall {
    grid-template-columns: repeat(2, 1fr);
  }
}

.mason-brick {
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
  background: #e4e4e4;
  border: 1px solid var(--light-grey);
  border-radius: 4px;
  margin: 0;
  padding: 0.25rem 0.35rem;
  aspect-ratio: 1 / 1;
  width: 100%;
  min-height: 0;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.4);
}

.mason-brick.mason-sq {
  min-height: 0;
  width: 100%;
  aspect-ratio: 1 / 1;
}

.mason-label {
  font-size: 0.55rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--blue-grey);
  opacity: 0.7;
  font-weight: 700;
  font-family: var(--museo-sans);
}

.mason-brick img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 3px;
}

.mason-brick:has(img) {
  /* Keep the grey-box frame: inset the photo so border + radius still read */
  padding: 0.28rem;
  align-items: stretch;
  justify-content: stretch;
  overflow: hidden;
  box-sizing: border-box;
}

/* ---------------------------------- */
/* WORK STUDIES: 2-col + thumbs       */
/* ---------------------------------- */

.study-callouts {
  margin: 1.35rem 0 0;
  padding: 1rem 1.15rem;
  background: #f3f3f3;
  border: 1px solid var(--light-grey);
  border-radius: 1rem;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.85rem;
  align-items: stretch;
  justify-items: stretch;
}

.study-callouts__label {
  grid-column: 1 / -1;
  margin: 0;
  font-size: 0.65rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--blue-grey);
  font-weight: 700;
  text-align: left;
}

.study-row {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas:
    "copy thumb"
    "btn  btn";
  column-gap: 0.85rem;
  row-gap: 0.75rem;
  align-items: start;
  justify-items: stretch;
  padding: 0.9rem 1rem;
  background: #ffffff;
  border: 2px solid var(--blue-grey);
  border-radius: 0.75rem;
  box-shadow: 0 6px 16px rgba(35, 56, 69, 0.05);
  transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
  min-width: 0;
  text-align: left;
}

.study-row:hover {
  border-color: var(--orange);
  box-shadow:
    0 12px 24px rgba(35, 56, 69, 0.1),
    0 0 16px rgba(243, 113, 35, 0.12);
  transform: translateY(-2px);
}

.study-row__copy {
  grid-area: copy;
  display: grid;
  gap: 0.25rem;
  min-width: 0;
  justify-items: start;
  text-align: left;
}

.study-callout-tag {
  font-size: 0.65rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--orange);
  font-weight: 700;
}

.study-callout-title {
  font-family: var(--museo);
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--blue);
}

.study-callout-desc {
  font-size: 0.88rem;
  color: var(--blue-grey);
  font-weight: 500;
  line-height: 1.45;
}

.study-readmore {
  grid-area: btn;
  margin-top: 0;
  justify-self: start;
  align-self: end;
  padding: 0.55rem 0.95rem;
  font-size: 0.85rem;
}

.study-row__thumb {
  grid-area: thumb;
  align-self: start;
  display: block;
  width: 6.5rem;
  height: 6.5rem;
  flex: 0 0 auto;
  border-radius: 0.55rem;
  overflow: hidden;
  border: 2px solid var(--light-grey);
  text-decoration: none;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}

.study-row__thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Stack Work Studies on mobile / narrow */
@media (max-width: 720px) {
  .study-callouts {
    grid-template-columns: 1fr;
    justify-items: center;
  }

  .study-callouts__label {
    text-align: center;
    width: 100%;
  }

  .study-row {
    justify-self: center;
    width: min(100%, 36rem);
    text-align: center;
    justify-items: center;
  }

  .study-row__copy {
    justify-items: center;
    text-align: center;
    width: 100%;
  }

  .study-readmore {
    justify-self: center;
  }

  .study-row__thumb {
    justify-self: center;
    margin-inline: auto;
  }
}

@media (max-width: 520px) {
  .study-row {
    grid-template-columns: 1fr;
    grid-template-areas:
      "thumb"
      "copy"
      "btn";
  }
  .study-row__thumb {
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
    max-width: 12rem;
    justify-self: center;
    margin-inline: auto;
  }
  /* Expand cards: keep title + Expand/× on one row (no width:100% wrap)
     Slightly tighten title so Experiential/Educational still fit. */
  .expand-title {
    font-size: 1rem;
  }
  .expand-head {
    padding: 0.7rem 0.85rem;
    gap: 0.4rem;
  }
}

/* ---------------------------------- */
/* HOW × PROCESS (live pillar cards)   */
/* ---------------------------------- */

.chapter-how {
  margin: 0 0 2.75rem;
  scroll-margin-top: 1.5rem;
  text-align: center;
}

.chapter-how__tag {
  display: block;
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--orange);
  font-weight: 700;
  margin: 0 0 0.4rem;
}

.chapter-how h2 {
  font-family: var(--museo);
  color: var(--blue);
  margin: 0 0 0.55rem;
  font-weight: 700;
  font-size: clamp(1.55rem, 3.5vw, 2.15rem);
  letter-spacing: -0.01em;
  line-height: 1.2;
}

.chapter-how__lead {
  margin: 0 auto 1.35rem;
  color: var(--blue-grey);
  font-size: 1.05rem;
  line-height: 1.55;
  max-width: 40rem;
  font-weight: 500;
}

.acts {
  display: grid;
  gap: 1.15rem;
  margin: 0 0 1.35rem;
}

@media (min-width: 720px) {
  .acts {
    grid-template-columns: repeat(3, 1fr);
    gap: 1.35rem;
  }
}

/* Live .process-pillar language: light card, blue-grey border, orange hover rail */
.act-card {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  background: #ffffff;
  border: 2px solid var(--blue-grey);
  border-radius: 1rem;
  padding: 1.35rem 1.25rem 1.4rem;
  box-shadow: 0 10px 24px rgba(35, 56, 69, 0.08);
  text-align: center;
  transition:
    transform 0.35s cubic-bezier(0.25, 0.8, 0.25, 1),
    box-shadow 0.35s ease,
    border-color 0.35s ease;
}

.act-card::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 0.45rem;
  background: var(--orange);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 0.35s cubic-bezier(0.25, 0.8, 0.25, 1);
  z-index: 1;
}

.act-card:hover {
  transform: translateY(-0.45rem);
  border-color: var(--orange);
  box-shadow:
    0 18px 36px rgba(35, 56, 69, 0.14),
    0 0 22px rgba(243, 113, 35, 0.12);
}

.act-card:hover::after {
  transform: scaleX(1);
}

.act-card h3 {
  position: relative;
  z-index: 2;
  margin: 0 0 0.75rem;
  font-family: var(--museo);
  color: var(--blue);
  font-size: clamp(1.2rem, 2.2vw, 1.55rem);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  line-height: 1.25;
}

.act-card__act {
  display: block;
  color: var(--orange);
  font-family: var(--museo-sans);
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  margin-bottom: 0.35rem;
  font-weight: 700;
}

.act-copy {
  position: relative;
  z-index: 2;
  margin: 0 0 0.85rem;
  color: var(--charcoal);
  font-size: 0.98rem;
  line-height: 1.55;
  font-weight: 600;
  flex: 1 1 auto;
  text-align: center;
}

.act-micro {
  position: relative;
  z-index: 2;
  margin: 0;
  padding-top: 0.75rem;
  border-top: 1px dashed var(--light-grey);
  color: var(--blue-grey);
  font-size: 0.86rem;
  line-height: 1.45;
  font-style: italic;
  text-align: center;
  font-weight: 500;
}

.bridge-line {
  margin: 0;
  padding: 0.95rem 1.2rem;
  background: var(--blue);
  text-align: center;
  color: var(--white);
  border-radius: 8px;
  font-family: var(--museo-sans);
  font-size: 0.98rem;
  font-weight: 600;
  line-height: 1.45;
  box-shadow: inset 0 -3px 0 var(--orange);
}

.bridge-line a {
  color: var(--white);
  text-decoration: underline;
  text-underline-offset: 0.18em;
  font-weight: 700;
  transition: color 0.2s ease;
}

.bridge-line a:hover {
  color: var(--orange);
}

@media (max-width: 719px) {
  .act-card {
    padding: 1.15rem 1.05rem 1.2rem;
  }

  .act-card h3 {
    letter-spacing: 0.04em;
  }

  .act-card__act {
    letter-spacing: 0.14em;
  }
}


/* ---------------------------------- */
/* WHERE × CARTOGRAPHER + BRANDS       */
/* ---------------------------------- */

.chapter-where {
  margin: 0 0 2.75rem;
  scroll-margin-top: 1.5rem;
  text-align: center;
}

.chapter-where__tag {
  display: block;
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--orange);
  font-weight: 700;
  margin: 0 0 0.75rem;
}

.brands-marquee {
  margin: 0;
  scroll-margin-top: 1.5rem;
  text-align: left;
}

.brands-marquee__container {
  border-radius: 0.6rem;
  background: transparent;
  overflow: hidden;
  cursor: grab;
}

.brands-marquee__container.is-dragging {
  cursor: grabbing;
}

.brands-marquee__viewport {
  overflow: hidden;
  white-space: nowrap;
  position: relative;
  padding: 1.2rem 0;
  display: flex;
  box-shadow: inset 1rem 0 1rem rgba(34, 34, 34, 0.47), inset -1rem 0 1rem rgba(34, 34, 34, 0.47);
  touch-action: pan-y;
}

.brands-marquee__track {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
}

.brand-item {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  min-width: 7rem;
}

.brand-logo {
  display: block;
  filter: grayscale(1);
  padding: 0 1.5em;
  transition: filter 0.3s ease;
  user-select: none;
  -webkit-user-drag: none;
  pointer-events: none;
}

.brand-logo.is-highlighted {
  filter: grayscale(0) drop-shadow(0 4px 4px #999);
}

.brand-logo--short {
  width: auto;
  max-height: 5em;
}

.brand-logo--long {
  height: 3.2em;
  width: auto;
}

.brands-marquee__title {
  color: var(--white);
  text-align: center;
  background: rgba(52, 65, 73, 0.9);
  font-family: var(--museo);
  font-size: 1rem;
  padding: 0.4em;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-top: solid 0.1em var(--light-blue);
}

.brands-marquee__title h3 {
  margin: 0;
  font-size: 1em;
  min-height: 1.2em;
}

@media (prefers-reduced-motion: reduce) {
  .brand-logo {
    transition: none;
  }
}

/* ---------------------------------- */
/* CINEMAGRAPH STRIP                  */
/* ---------------------------------- */

.cinemagraph-strip {
  display: flex;
  flex-direction: row;
  width: 100vw;
  height: clamp(260px, 42vw, 520px);
  margin: 0;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  position: relative;
  z-index: 10;
  overflow: hidden;
  background: var(--light-blue);
  border-top: 2px solid rgba(28, 78, 158, 0.55);
  border-bottom: none;
  scroll-margin-top: 1.5rem;
}

.cinemagraph-strip__panel {
  flex: 1 1 0;
  min-width: 0;
  position: relative;
  overflow: hidden;
  cursor: pointer;
  filter: grayscale(1) sepia(0.22) hue-rotate(175deg) saturate(0.65) brightness(0.55) contrast(1.15);
  transform-origin: center;
  transition:
    flex 0.6s cubic-bezier(0.25, 0.8, 0.25, 1),
    transform 0.6s cubic-bezier(0.25, 0.8, 0.25, 1),
    filter 0.6s ease,
    box-shadow 0.6s ease;
  z-index: 1;
}

.cinemagraph-strip__panel:nth-child(-n + 5) {
  transform-origin: left center;
}

.cinemagraph-strip__panel:nth-child(n + 6) {
  transform-origin: right center;
}

.cinemagraph-strip__panel img,
.cinemagraph-strip__video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transform: scale(1.06);
  transition: transform 0.6s cubic-bezier(0.25, 0.8, 0.25, 1);
  user-select: none;
  -webkit-user-drag: none;
  pointer-events: none;
  background: #0a1628;
}

.cinemagraph-strip:hover .cinemagraph-strip__panel:not(:hover) {
  flex: 1 1 0;
}

.cinemagraph-strip__panel:hover {
  flex: 4 1 0;
  filter: grayscale(0) sepia(0) hue-rotate(0deg) saturate(1) brightness(1) contrast(1);
  transform: scale(1.125);
  box-shadow: 0 0 2em rgba(0, 0, 0, 0.6);
  border-radius: 0.5em;
  border: solid 0.08rem var(--blue-grey);
  z-index: 20;
}

.cinemagraph-strip__panel:hover img,
.cinemagraph-strip__panel:hover .cinemagraph-strip__video,
.cinemagraph-strip__panel:focus-visible img,
.cinemagraph-strip__panel:focus-visible .cinemagraph-strip__video {
  transform: scale(1.125);
}

.cinemagraph-strip__panel:focus-visible {
  flex: 4 1 0;
  filter: grayscale(0) sepia(0) hue-rotate(0deg) saturate(1) brightness(1) contrast(1);
  transform: scale(1.125);
  box-shadow: 0 0 2em rgba(0, 0, 0, 0.6);
  border-radius: 0.5em;
  border: solid 0.08rem var(--blue-grey);
  z-index: 20;
  outline: none;
}

@media (prefers-reduced-motion: reduce) {
  .cinemagraph-strip__panel,
  .cinemagraph-strip__panel img,
  .cinemagraph-strip__video {
    transition: none;
  }

  .cinemagraph-strip__panel:hover,
  .cinemagraph-strip__panel:focus-visible {
    flex: 1 1 0;
    transform: none;
    box-shadow: none;
    border-radius: 0;
    border: none;
  }

  .cinemagraph-strip__panel:hover img,
  .cinemagraph-strip__panel:hover .cinemagraph-strip__video,
  .cinemagraph-strip__panel:focus-visible img,
  .cinemagraph-strip__panel:focus-visible .cinemagraph-strip__video {
    transform: scale(1.06);
  }
}

/* ---------------------------------- */
/* WHEN × CTA (live #cta language)     */
/* ---------------------------------- */

.chapter-when {
  flex-shrink: 0;
  width: 100vw;
  max-width: none;
  margin: 0;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  background-color: #16181d;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 3rem 1rem 3rem;
  scroll-margin-top: 1rem;
}

.cta-page {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 60px 40px;
  margin: 0 auto;
  max-width: 800px;
  width: 100%;
  background: center / cover no-repeat url("assets/chalkboard.jpg"), #1a1a1a;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  box-shadow:
    0 20px 40px rgba(0, 0, 0, 0.5),
    inset 0 0 50px rgba(0, 0, 0, 0.8);
  position: relative;
  overflow: hidden;
}

.cta-page::before {
  content: "";
  position: absolute;
  inset: 0;
  background: center / 20em repeat url("assets/x-topo-white.svg");
  opacity: 0.03;
  z-index: 0;
  pointer-events: none;
}

.chapter-when__tag,
.cta-page h2,
.chapter-when__lead,
.cta-page .contact-form,
.cta-page .contact-thanks,
.when-secondary {
  position: relative;
  z-index: 1;
}

.chapter-when__tag {
  display: block;
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--orange);
  font-weight: 700;
  margin: 0 0 0.75rem;
  text-align: center;
}

.cta-page h2 {
  color: var(--white);
  margin: 0 0 0.85rem;
  font-size: clamp(1.8rem, 4vw, 2.8rem);
  font-family: var(--museo);
  font-weight: 700;
  text-shadow: 0 4px 8px rgba(0, 0, 0, 0.8);
  text-align: center;
  line-height: 1.2;
}

.chapter-when__lead {
  color: var(--light-grey);
  font-size: 1.05rem;
  line-height: 1.55;
  text-align: center;
  max-width: 36rem;
  margin: 0 auto 0.35rem;
  font-weight: 500;
}

.chapter-when .who-saw-line {
  margin: 0.25rem auto 1.5rem;
  max-width: 36rem;
  width: 100%;
}

.chapter-when .who-saw-line img {
  width: 100%;
  max-width: none;
}

.contact-form {
  display: flex;
  flex-direction: column;
  gap: 15px;
  width: 100%;
  max-width: 600px;
  background: rgba(0, 0, 0, 0.4);
  padding: 2rem;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.contact-form input,
.contact-form textarea,
.contact-form select {
  width: 100%;
  padding: 15px;
  border-radius: 6px;
  border: 2px solid #444;
  background-color: rgba(26, 26, 26, 0.7);
  color: var(--white);
  font-family: var(--museo-sans);
  font-size: 1rem;
  outline: none;
  transition: border-color 0.3s ease, background-color 0.3s ease, box-shadow 0.3s ease;
  appearance: none;
  -webkit-appearance: none;
}

.contact-form select {
  background-image: linear-gradient(45deg, transparent 50%, #aaa 50%),
    linear-gradient(135deg, #aaa 50%, transparent 50%);
  background-position: calc(100% - 18px) calc(50% - 3px), calc(100% - 12px) calc(50% - 3px);
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  padding-right: 2.5rem;
  cursor: pointer;
}

.contact-form select option {
  background-color: #1a1a1a;
  color: var(--white);
}

.contact-form input::placeholder,
.contact-form textarea::placeholder {
  color: #aaa;
}

.contact-form input:focus,
.contact-form textarea:focus,
.contact-form select:focus {
  border-color: var(--orange);
  background-color: rgba(0, 0, 0, 0.8);
  box-shadow: 0 0 10px rgba(243, 113, 35, 0.2);
}

.contact-form textarea {
  resize: vertical;
  min-height: 7rem;
}

.contact-method-group {
  display: flex;
  gap: 10px;
  width: 100%;
}

.contact-method-type {
  flex: 1;
  min-width: 0;
}

.contact-method-val {
  flex: 2;
  min-width: 0;
}

.contact-form button,
.cta-bar-btn {
  margin-top: 10px;
  width: 100%;
  background: linear-gradient(180deg, var(--blue-grey) 0%, #404f58 100%);
  color: var(--white);
  padding: 15px 20px;
  border-radius: 4px;
  cursor: pointer;
  font-family: var(--museo-sans);
  font-size: 1rem;
  font-weight: 700;
  border: 1px solid #334047;
  transition: all 0.2s;
  text-align: center;
  box-shadow:
    inset 0 1px 1px rgba(255, 255, 255, 0.2),
    0 2px 4px rgba(0, 0, 0, 0.2);
}

.cta-bar-btn:hover {
  background: linear-gradient(180deg, var(--light-blue) 0%, #5773a8 100%);
  border-color: #465f8f;
  transform: translateY(-1px);
}

.cta-bar-btn--send {
  background: linear-gradient(180deg, var(--orange) 0%, #d15d18 100%);
  border-color: #a8470e;
}

.cta-bar-btn--send:hover {
  background: linear-gradient(180deg, #ff8a3d 0%, var(--orange) 100%);
  border-color: #a8470e;
  transform: translateY(-1px);
}

.form-note {
  margin: 0;
  min-height: 0;
  font-size: 0.85rem;
  color: var(--light-grey);
  text-align: center;
}

.form-note:empty {
  display: none;
}

.contact-thanks {
  margin: 1.35rem 0 0;
  color: var(--light-grey);
  font-family: var(--museo-sans);
  font-size: 1.05rem;
  font-weight: 500;
  line-height: 1.55;
  text-align: center;
  letter-spacing: 0.01em;
}

.when-secondary {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.75rem 1.25rem;
  margin-top: 1.75rem;
}

.when-secondary__link {
  color: var(--light-grey);
  text-decoration: none;
  font-family: var(--museo-sans);
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  padding: 0.55rem 1rem;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 4px;
  transition: color 0.2s ease, border-color 0.2s ease, background-color 0.2s ease;
}

.when-secondary__link:hover {
  color: var(--orange);
  border-color: var(--orange);
  background: rgba(243, 113, 35, 0.08);
}


@media (max-width: 600px) {
  .cta-page {
    padding: 40px 20px;
    width: calc(100% - 0px);
  }

  .contact-form {
    padding: 1.35rem;
  }
}

/* ---------------------------------- */
/* FOOTER (from v3, leave as-is)      */
/* ---------------------------------- */

.site-footer {
  flex-shrink: 0;
  padding: 1.5rem 2rem 1.25rem;
  text-align: center;
  color: var(--light-grey);
  font-family: var(--museo-sans);
  width: 100%;
  background: center / cover no-repeat url("assets/chalkboard.jpg"), #1a1a1a;
  box-shadow: inset 0 12px 14px rgba(0, 0, 0, 0.45);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.25rem;
}

.footer-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  max-width: 1000px;
  flex-wrap: wrap;
  gap: 1.25rem;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  padding: 1.15rem 0;
}

.footer-corp {
  display: flex;
  align-items: center;
  gap: 1rem;
  text-align: left;
}

.footer-logo {
  width: 50px;
  height: 50px;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.5));
}

.footer-dba {
  display: flex;
  flex-direction: column;
}

.footer-dba strong {
  color: var(--white);
  font-size: 1.2rem;
  letter-spacing: 1px;
}

.footer-dba span {
  font-size: 0.9rem;
  color: #999;
}

.footer-nav {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 1rem;
  text-align: right;
}

.footer-chapters {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.85rem 1.5rem;
}

.footer-utils {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.65rem 1.25rem;
  padding-top: 0.35rem;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.footer-link {
  color: var(--light-grey);
  text-decoration: none;
  font-weight: 700;
  font-family: var(--museo);
  font-size: 1.1rem;
  transition: color 0.2s ease;
  position: relative;
}

.footer-link:hover {
  color: var(--orange);
}

.footer-link::after {
  content: "";
  position: absolute;
  width: 0;
  height: 2px;
  bottom: -4px;
  left: 0;
  background-color: var(--orange);
  transition: width 0.3s ease;
}

.footer-link:hover::after {
  width: 100%;
}

.footer-util {
  color: #999;
  text-decoration: none;
  font-weight: 500;
  font-family: var(--museo-sans);
  font-size: 0.9rem;
  letter-spacing: 0.02em;
  transition: color 0.2s ease;
  position: relative;
}

.footer-util:hover {
  color: var(--orange);
}

.footer-util::after {
  content: "";
  position: absolute;
  width: 0;
  height: 1px;
  bottom: -3px;
  left: 0;
  background-color: var(--orange);
  transition: width 0.3s ease;
}

.footer-util:hover::after {
  width: 100%;
}

.footer-bottom {
  margin-top: 1rem;
  color: #777;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem 1.25rem;
}

.footer-bottom small {
  font-size: 0.85rem;
}

.footer-meta {
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(234, 234, 234, 0.55);
  white-space: nowrap;
}

@media (max-width: 900px) {
  .footer-content {
    flex-direction: column;
    justify-content: center;
    text-align: center;
  }

  .footer-bottom {
    flex-direction: column;
    justify-content: center;
    text-align: center;
  }

  .footer-corp {
    flex-direction: column;
    text-align: center;
  }

  .footer-nav {
    align-items: center;
    text-align: center;
  }

  .footer-chapters,
  .footer-utils {
    justify-content: center;
  }
}

/* ---------------------------------- */
/* AWARDS: immediately after studies  */
/* ---------------------------------- */

.chapter-awards {
  margin: 0 0 2.75rem;
  scroll-margin-top: 1.5rem;
}

.chapter-awards__tag {
  display: block;
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--orange);
  font-weight: 700;
  margin: 0 0 0.4rem;
}

.chapter-awards h2 {
  font-family: var(--museo);
  color: var(--blue);
  margin: 0 0 0.75rem;
  font-weight: 700;
  font-size: clamp(1.55rem, 3.5vw, 2.15rem);
  letter-spacing: -0.01em;
  line-height: 1.2;
}

/* Live #awards-container / .award-item gold plaque language. */
.why-awards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
  align-items: stretch;
  background: transparent;
  min-height: 0;
  border: none;
  box-shadow: none;
  border-radius: 0;
  padding: 0;
  max-width: 52rem;
  margin-left: auto;
  margin-right: auto;
  width: 100%;
}

.award-item {
  position: relative;
  min-width: 0;
  max-width: 26rem;
  width: 100%;
  justify-self: center;
  min-height: 10rem;
  display: grid;
  grid-template-columns: 1fr 2fr;
  align-items: center;
  border: double 0.1618rem #e7b621;
  border-radius: 1rem;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.58);
  padding: 1em 0.4rem;
  background: linear-gradient(to right, #cb9b51 0%, #f6e27a 20%, #f6f2c0 50%, #f6e27a 70%, #cb9b51 100%);
  /* Keep the gold treatment static; one soft lift is calmer than border/shimmer/rotate. */
  transform: translate3d(0, 0, 0);
  transition: transform 700ms cubic-bezier(0.22, 1, 0.36, 1), box-shadow 700ms ease, opacity 500ms ease;
  will-change: transform;
  color: #1a1a1a;
}

@media (hover: hover) {
  .award-item:hover {
    transform: translate3d(0, -2px, 0);
    box-shadow: 0 8px 14px rgba(0, 0, 0, 0.5);
    opacity: 0.99;
  }

  .award-item:hover .award-icon-shape {
    transform: translate3d(0, 0, 0) scale(1.05);
    opacity: 0.98;
  }
}

.award-icon {
  background: center / contain no-repeat url("assets/awards/45saw-circle.svg");
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  min-height: 8rem;
}

.award-icon-shape {
  width: 100%;
  height: 100%;
  min-height: 8rem;
  transform: translate3d(0, 0, 0) scale(1);
  transition: transform 700ms cubic-bezier(0.22, 1, 0.36, 1), opacity 500ms ease;
  will-change: transform;
}

#emmy-icon {
  background: center / 45% no-repeat url("assets/awards/emmy.svg");
  filter: drop-shadow(0 8px 6px #222);
}

#w3-icon {
  background: center / 68% no-repeat url("assets/awards/w3gold.png");
  filter: drop-shadow(0 8px 10px #222);
}

.award-text {
  padding-left: 0.85rem;
  padding-right: 0.5rem;
}

.award-text h3 {
  margin: 0 0 0.15rem;
  font-family: var(--museo);
  font-weight: 700;
  font-size: clamp(1.25rem, 2vw, 1.75rem);
  line-height: 1.15;
  color: #1a1a1a;
}

.award-org {
  margin: 0;
  font-weight: 500;
  font-size: clamp(0.8rem, 1vw, 0.95rem);
  line-height: 1.25;
  color: #333;
}

.award-role {
  margin: 0.25rem 0 0.1rem;
  font-weight: 700;
  font-size: clamp(0.95rem, 1.4vw, 1.2rem);
  line-height: 1.25;
  color: #111;
}

.award-work {
  margin: 0;
  font-weight: 500;
  font-size: clamp(0.8rem, 1vw, 0.95rem);
  line-height: 1.25;
  color: #333;
}

.award-cat {
  margin: 0.15rem 0 0;
  font-weight: 700;
  font-size: clamp(0.7rem, 0.9vw, 0.8rem);
  line-height: 1.25;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: #222;
}

@media (max-width: 720px) {
  .why-awards {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  /* Keep icon + copy side-by-side inside each plaque; why-awards stacks the cards. */
  .award-item {
    grid-template-columns: 1fr 2fr;
    text-align: left;
    padding: 0.85rem 0.35rem;
    min-height: 8.5rem;
  }

  .award-icon {
    height: 6.5rem;
    min-height: 6.5rem;
  }

  .award-icon-shape {
    height: 6.5rem;
    min-height: 6.5rem;
  }

  .award-text {
    padding-left: 0.55rem;
    padding-right: 0.35rem;
  }

  .award-text h3 {
    font-size: clamp(1.05rem, 4.5vw, 1.35rem);
  }

  #emmy-icon {
    background-size: 45%;
  }

  #w3-icon {
    background-size: 68%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .award-item,
  .award-icon-shape {
    transition: none;
    will-change: auto;
  }

  .award-item:hover,
  .award-item:hover .award-icon-shape {
    transform: none;
    opacity: 1;
  }
}

/* ---------------------------------- */
/* WHY × DIRECTION (source v3)        */
/* ---------------------------------- */

.why-trail {
  position: relative;
  width: 100vw;
  max-width: 100vw;
  margin: 0 0 1.25rem;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  overflow: hidden;
  pointer-events: none;
}

.why-trail .walking-path {
  width: 220%;
  max-width: none;
}

.chapter-why {
  margin: 0 0 2.75rem;
  scroll-margin-top: 1.5rem;
}

.why-split {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(10rem, 0.85fr);
  gap: 1.25rem 1.5rem;
  align-items: center;
}

.why-split__copy {
  min-width: 0;
}

.why-postit {
  position: relative;
  margin: 0;
  width: 100%;
  max-width: 16rem;
  justify-self: center;
  aspect-ratio: 1;
}

.why-postit__page {
  display: block;
  width: 100%;
  height: auto;
  filter: drop-shadow(0 6px 14px rgba(34, 34, 34, 0.22));
}

.why-postit__buck {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 58%;
  height: auto;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

@media (max-width: 720px) {
  .why-split {
    grid-template-columns: 1fr;
    justify-items: center;
  }

  .why-split__copy {
    width: 100%;
  }

  .why-postit {
    max-width: 12.5rem;
  }
}

.chapter-why__tag {
  display: block;
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--orange);
  font-weight: 700;
  margin: 0 0 0.4rem;
}

.chapter-why h2 {
  font-family: var(--museo);
  color: var(--blue);
  margin: 0 0 0.55rem;
  font-weight: 700;
  font-size: clamp(1.55rem, 3.5vw, 2.15rem);
  letter-spacing: -0.01em;
  line-height: 1.2;
}

.chapter-why__lead {
  margin: 0 0 1.35rem;
  color: var(--blue-grey);
  font-size: 1.05rem;
  line-height: 1.55;
  max-width: 42rem;
  font-weight: 500;
}

.because-lines {
  list-style: none;
  margin: 0 0 1.5rem;
  padding: 0;
  display: grid;
  gap: 0.55rem;
}

.because-lines li {
  background: #f5f5f5;
  border-left: 3px solid var(--orange);
  padding: 0.7rem 0.95rem;
  font-size: 0.98rem;
  color: var(--charcoal);
  font-weight: 600;
  border-radius: 0 6px 6px 0;
  box-shadow: 0 4px 12px rgba(35, 56, 69, 0.05);
}

.because-lines li.because-lines__saw {
  display: flex;
  justify-content: center;
  align-items: center;
  background: transparent !important;
  border: none !important;
  border-left: none !important;
  box-shadow: none !important;
  padding: 0.55rem 0.25rem 0.15rem;
  border-radius: 0;
}

.because-lines__saw img {
  display: block;
  width: min(100%, 22rem);
  height: auto;
}

/* ---------------------------------- */
/* Mason lightbox (Expand-stack thumbs) */
/* ---------------------------------- */

.mason-brick--zoom {
  cursor: pointer;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.mason-brick--zoom:hover,
.mason-brick--zoom:focus-visible {
  border-color: var(--orange);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.4),
    0 0 0 2px rgba(243, 113, 35, 0.35);
  outline: none;
}

.mason-brick--zoom:focus-visible {
  outline: 2px solid var(--orange);
  outline-offset: 2px;
}

html.is-lightbox-open,
html.is-lightbox-open body {
  overflow: hidden;
}

.mason-lightbox {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.25rem;
}

.mason-lightbox[hidden] {
  display: none !important;
}

.mason-lightbox__backdrop {
  position: absolute;
  inset: 0;
  margin: 0;
  padding: 0;
  border: 0;
  cursor: pointer;
  background: rgba(28, 78, 158, 0.88);
  background: linear-gradient(
    160deg,
    rgba(28, 78, 158, 0.92) 0%,
    rgba(35, 56, 69, 0.94) 55%,
    rgba(88, 87, 87, 0.92) 100%
  );
}

.mason-lightbox__stage {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: min(96vw, 1100px);
  height: min(88vh, 900px);
  max-width: 100%;
  pointer-events: none;
}

.mason-lightbox__img {
  display: block;
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: 4px;
  box-shadow: 0 12px 48px rgba(0, 0, 0, 0.45);
  background: rgba(0, 0, 0, 0.25);
  pointer-events: auto;
}

.mason-lightbox__close,
.mason-lightbox__prev,
.mason-lightbox__next {
  position: absolute;
  z-index: 2;
  pointer-events: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  border: 1px solid rgba(234, 234, 234, 0.35);
  border-radius: 999px;
  background: rgba(35, 56, 69, 0.85);
  color: var(--white);
  font-family: var(--museo-sans);
  font-weight: 700;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.mason-lightbox__close:hover,
.mason-lightbox__prev:hover,
.mason-lightbox__next:hover,
.mason-lightbox__close:focus-visible,
.mason-lightbox__prev:focus-visible,
.mason-lightbox__next:focus-visible {
  background: var(--orange);
  border-color: var(--orange);
  color: var(--white);
  outline: none;
}

.mason-lightbox__close:focus-visible,
.mason-lightbox__prev:focus-visible,
.mason-lightbox__next:focus-visible {
  outline: 2px solid var(--orange);
  outline-offset: 3px;
}

.mason-lightbox__close {
  top: -0.35rem;
  right: -0.35rem;
  width: 2.5rem;
  height: 2.5rem;
  font-size: 1.45rem;
  line-height: 1;
}

.mason-lightbox__prev,
.mason-lightbox__next {
  top: 50%;
  transform: translateY(-50%);
  width: 2.75rem;
  height: 2.75rem;
  font-size: 1.65rem;
  line-height: 1;
}

.mason-lightbox__prev {
  left: -0.15rem;
}

.mason-lightbox__next {
  right: -0.15rem;
}

.mason-lightbox__prev[hidden],
.mason-lightbox__next[hidden] {
  display: none !important;
}

@media (max-width: 640px) {
  .mason-lightbox {
    padding: 0.75rem;
  }

  .mason-lightbox__stage {
    width: 100%;
    height: min(82vh, 900px);
  }

  .mason-lightbox__close {
    top: 0.35rem;
    right: 0.35rem;
  }

  .mason-lightbox__prev {
    left: 0.15rem;
  }

  .mason-lightbox__next {
    right: 0.15rem;
  }
}


/* ---------------------------------------------------------- */
/* 2026-10-08: Work studies as full-width rows (3 studies),   */
/* rectangle thumb top right, Read more right under it so the */
/* copy column runs the full card height.                     */
/* Button bars: buttons fill the bar, gap = padding all round */
/* ---------------------------------------------------------- */
.study-callouts {
  grid-template-columns: 1fr;
}

.study-row {
  grid-template-columns: 1fr auto;
  grid-template-areas:
    "copy thumb"
    "copy btn";
  grid-template-rows: auto 1fr;
  column-gap: 1.1rem;
  row-gap: 0.75rem;
  align-items: start;
}

.study-row__copy {
  align-self: start;
}

.study-callout-desc {
  max-width: 46rem;
}

.study-row__thumb {
  width: 11rem;
  height: auto;
  aspect-ratio: 16 / 10;
}

.study-readmore {
  justify-self: end;
  align-self: end;
}

.study-row__thumb--placeholder {
  display: grid;
  place-items: center;
  background: repeating-linear-gradient(135deg, #f3f3f3 0 10px, #e6e6e6 10px 20px);
  border-style: dashed;
  color: var(--blue-grey);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  box-shadow: none;
}

.study-row--placeholder .study-callout-title {
  color: var(--blue-grey);
}

.study-readmore.is-disabled {
  opacity: 0.45;
  cursor: default;
  pointer-events: none;
}

@media (max-width: 520px) {
  .study-row {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    grid-template-areas:
      "thumb"
      "copy"
      "btn";
  }
  .study-row__thumb {
    width: 100%;
    max-width: 18rem;
    aspect-ratio: 16 / 10;
  }
  .study-readmore {
    justify-self: center;
  }
}

/* Button bars fill the space; same gap between buttons and around the edge */
.who-enter {
  --bar-gap: 0.5rem;
  gap: var(--bar-gap);
  padding: var(--bar-gap);
  justify-content: stretch;
}
.who-enter__btn {
  flex: 1 1 0;
  min-width: max-content;
  text-align: center;
}

.chrome-bar.lens-bar {
  --bar-gap: 0.55rem;
  gap: var(--bar-gap);
  padding: var(--bar-gap);
  justify-content: stretch;
}
.lens-btn {
  flex: 1 1 0;
  min-width: max-content;
}

.cta-btns {
  --bar-gap: 0.75rem;
  gap: var(--bar-gap);
  padding: var(--bar-gap);
  flex-wrap: wrap;
  justify-content: stretch;
}
.cta-btns a {
  flex: 1 1 0;
  min-width: max-content;
}
.cta-btns button {
  width: 100%;
}

/* 2026-10-08: Work studies 1x3 on desktop. Rectangle thumb on top,
   copy fills the middle, Read more pinned bottom right. */
@media (min-width: 600px) {
  .study-callouts {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .study-row {
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr auto;
    grid-template-areas:
      "thumb"
      "copy"
      "btn";
    row-gap: 0.75rem;
  }
  .study-row__thumb {
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 10;
    justify-self: stretch;
  }
  .study-readmore {
    justify-self: end;
    align-self: end;
  }
}

/* 2026-10-08: Why post-it carries topo X over axe root + wolf (no tags) */
.why-postit__marks {
  position: absolute;
  inset: 8% 8% 10%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6%;
  pointer-events: none;
}
.why-postit__x {
  width: 58%;
  height: auto;
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.18));
}
.why-postit__pair {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10%;
  width: 100%;
}
.why-postit__axe,
.why-postit__wolf {
  width: 42%;
  height: auto;
}

/* 2026-10-08: Why 50/50, marks sit right on the page (no post-it sheet) */
.why-split {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}
.why-postit--bare {
  max-width: 17rem;
  aspect-ratio: 1;
}
.why-postit--bare .why-postit__marks {
  inset: 0;
}
@media (max-width: 720px) {
  .why-split {
    grid-template-columns: 1fr;
  }
  .why-postit--bare {
    max-width: 15rem;
  }
}

/* 3x1 down to 600px: keep card copy left even inside the old 720 mobile range */
@media (min-width: 600px) {
  .study-row,
  .study-row__copy {
    text-align: left;
    justify-items: start;
  }
  .study-row { justify-self: stretch; width: auto; }
  .study-row__thumb { justify-self: stretch; margin-inline: 0; }
  .study-readmore { justify-self: end; }
}

/* 2026-10-08: bigger Why emblems; axe + wolf overlap the bottom of a larger topo X */
.why-postit--bare {
  max-width: 26rem;
  aspect-ratio: auto;
}
.why-postit--bare .why-postit__marks {
  position: relative;
  inset: auto;
  gap: 0;
}
.why-postit--bare .why-postit__x {
  width: 78%;
  position: relative;
  z-index: 1;
}
.why-postit--bare .why-postit__pair {
  margin-top: -24%;
  gap: 4%;
  position: relative;
  z-index: 2;
}
.why-postit--bare .why-postit__axe,
.why-postit--bare .why-postit__wolf {
  width: 44%;
  filter: drop-shadow(0 6px 12px rgba(34, 34, 34, 0.28));
}
@media (max-width: 720px) {
  .why-postit--bare {
    max-width: 19rem;
  }
}

/* Mobile: Why emblems above the copy */
@media (max-width: 720px) {
  .why-postit--bare { order: -1; }
}

/* 2026-10-08: Fixed blue topo that also holds on phones.
   iOS/Android ignore background-attachment: fixed, so the topo lives on a
   position: fixed layer, clipped to the band by clip-path on its wrapper. */
.who-topo { background: transparent; }
@media (max-width: 720px) {
  .who-topo { background: transparent; }
}
.who-topo__bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  clip-path: inset(0);
  -webkit-clip-path: inset(0);
  pointer-events: none;
}
.who-topo__bg::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  height: 100lvh;
  background:
    center / cover no-repeat url("assets/hero/blue-topo-lines.png"),
    var(--light-blue);
}

/* 2026-10-08 layers: Ryan's topo line drawing as two parallax planes over the
   still blue topo. Both are fixed layers inside the clipped .who-topo__bg, so
   the band stays a window onto them on iOS too. site.js sizes each layer for
   its scroll travel and writes `translate`; without JS (or with reduced
   motion) they simply sit still and cover the viewport.
   Assets are the drawing stacked over its own mirror, so they tile
   seamlessly down the page (repeat-y).
   Back: ::before (light blue + blue-topo-lines, faded, still).
   Mid: white lines, mirrored, 0.15x scroll.
   Front: navy lines, turned 180deg, larger, 0.35x scroll. */
.who-topo__bg::before {
  /* Far plane: wash the still lines back so the moving planes read in front. */
  background:
    linear-gradient(rgba(109, 138, 198, 0.42), rgba(109, 138, 198, 0.42)),
    center / cover no-repeat url("assets/hero/blue-topo-lines.png"),
    var(--light-blue);
}
.who-topo__lines {
  position: fixed;
  top: 0;
  left: -48px;
  width: calc(100% + 96px);
  height: 100vh;
  height: 100lvh;
  background-repeat: repeat-y;
  background-position: 50% 0;
  pointer-events: none;
  will-change: translate;
}
.who-topo__lines--mid {
  background-image: url("assets/backgrounds/topo-lines-white.png");
  background-size: max(1500px, 118vw) auto;
  background-position: 38% 0;
  opacity: 0.42;
}
.who-topo__lines--front {
  background-image: url("assets/backgrounds/topo-lines-blue.png");
  background-size: max(1900px, 150vw) auto;
  background-position: 62% 0;
  transform: rotate(180deg);
  opacity: 0.55;
}
@media (max-width: 720px) {
  .who-topo__lines--mid {
    background-size: 1250px auto;
    opacity: 0.36;
  }
  .who-topo__lines--front {
    background-size: 1750px auto;
    opacity: 0.45;
  }
}
@media (prefers-reduced-motion: reduce) {
  .who-topo__lines { will-change: auto; }
}

/* 2026-10-08: Who card sits on the page1.png paper sheet (tape marks + curl shadow).
   border-image keeps the corners (tape) and bottom curl unstretched at any card height. */
.who-layout__copy {
  background: none;
  border: 0;
  border-style: solid;
  border-width: 36px 40px 44px;
  border-image: url("assets/hero/page1.png") 36 40 44 fill / 36px 40px 44px stretch;
  border-radius: 0;
  box-shadow: none;
  padding: 0.4rem 0.2rem 0.6rem;
}
@media (max-width: 720px) {
  .who-layout__copy {
    border-width: 30px 22px 36px;
    border-image-width: 30px 22px 36px;
    padding: 0.2rem 0 0.4rem;
  }
}

/* 2026-10-08: map caption becomes an italic line (Ryan's take on thinking outside the box). */
.who-about__map-caption {
  margin-top: 0.6rem;
  font-family: var(--museo-sans);
  font-size: 0.95rem;
  font-weight: 500;
  font-style: italic;
  letter-spacing: 0;
  text-transform: none;
  line-height: 1.35;
  color: var(--orange);
  max-width: 16rem;
  margin-left: auto;
  margin-right: auto;
}

/* 2026-10-08: italic caption under the buck on the post-it (pairs with the map caption). */
.who-postit__buck { top: 45%; width: 52%; }
.who-postit__caption {
  position: absolute;
  left: 12%;
  right: 12%;
  bottom: 9%;
  margin: 0;
  font-family: var(--museo-sans);
  font-size: clamp(0.72rem, 1.4vw, 0.95rem);
  font-weight: 500;
  font-style: italic;
  line-height: 1.3;
  text-align: center;
  color: var(--orange);
}
.who-postit__caption { left: 8%; right: 8%; text-wrap: balance; }
.who-postit__caption { color: #585757; }
.who-about__map-caption { color: var(--charcoal); }

/* 2026-10-08: hero keeps blocks + Emmy only, larger to fill the left half. */
.who-hang > .who-sketch-row {
  grid-template-columns: repeat(2, minmax(0, 11.5rem));
  gap: clamp(0.5rem, 1.5vw, 1rem);
}
@media (max-width: 720px) {
  .who-hang > .who-sketch-row {
    grid-template-columns: repeat(2, minmax(0, 7rem));
    gap: 0.5rem;
  }
}

/* 2026-10-08: 45 shield + S tags hang down and right of the What header. */
.what-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: 1rem clamp(1rem, 4vw, 3rem);
}
.what-tags {
  display: grid;
  grid-template-columns: repeat(2, 5.5rem);
  gap: 0.6rem;
  margin: 1.4rem clamp(0rem, 3vw, 2.5rem) 0 0;
  touch-action: pan-y;
}
.what-tags .hang-tag {
  filter: drop-shadow(0 6px 8px rgba(0, 0, 0, 0.18));
}
@media (max-width: 720px) {
  .what-tags {
    grid-template-columns: repeat(2, 3.4rem);
    gap: 0.35rem;
    margin: 1.1rem 0 0;
  }
}
.what-head { margin-bottom: 1rem; }
@media (max-width: 720px) { .what-head { margin-bottom: 0.5rem; } }
/* 2026-10-08: tags lift up to the title line; no extra gap under the lead. */
.what-head { margin-bottom: 0; }
.what-tags { align-self: start; margin-top: -1.75rem; margin-bottom: 0; }
@media (max-width: 720px) {
  .what-head { margin-bottom: 0; }
  .what-tags { margin-top: -0.4rem; }
}

/* 2026-10-08: Ryan's trail-map + topo line drawings behind awards + trail, faded top and bottom. */
.awards-mapband {
  position: relative;
  isolation: isolate;
}
.awards-mapband::before {
  content: "";
  position: absolute;
  top: -3rem;
  bottom: -2rem;
  left: calc(50% - 50vw);
  width: 100vw;
  z-index: -1;
  pointer-events: none;
  background:
    url("assets/backgrounds/map-trail-lines.png") center / cover no-repeat,
    url("assets/backgrounds/map-topo-lines.png") center / cover no-repeat;
  opacity: 0.35;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 30%, #000 70%, transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0%, #000 30%, #000 70%, transparent 100%);
}

/* 2026-10-08: awards + trail band = blue with Ryan's white topo lines, fixed
   (clipped wrapper + fixed layer so it also holds still on iOS). Soft fade top/bottom. */
.awards-mapband::before { content: none; }
.awards-mapband__bg {
  position: absolute;
  top: -3rem;
  bottom: -2rem;
  left: calc(50% - 50vw);
  width: 100vw;
  z-index: -1;
  pointer-events: none;
  clip-path: inset(0);
  -webkit-clip-path: inset(0);
  background: var(--light-blue);
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 22%, #000 48%, rgba(0,0,0,.55) 72%, transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0%, #000 22%, #000 48%, rgba(0,0,0,.55) 72%, transparent 100%);
}
.awards-mapband__lines {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  height: 100lvh;
  background: url("assets/backgrounds/topo-lines-white.png") 50% 50% / cover no-repeat;
  opacity: 0.6;
  pointer-events: none;
}
/* 2026-10-08: band hugs the awards + trail tighter; single (unmirrored) white topo, bottom-aligned. */
.awards-mapband__bg {
  top: -1rem;
  bottom: 0;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 10%, #000 90%, transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0%, #000 10%, #000 90%, transparent 100%);
}
.awards-mapband__lines {
  background: url("assets/backgrounds/topo-lines-white-single.png") 50% 100% / cover no-repeat;
}
.awards-mapband .why-trail { margin-bottom: 0; }
/* 2026-10-08: original soft fade spread back; band kept short. */
.awards-mapband__bg {
  top: -1.5rem;
  bottom: -0.5rem;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 22%, #000 48%, rgba(0,0,0,.55) 72%, transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0%, #000 22%, #000 48%, rgba(0,0,0,.55) 72%, transparent 100%);
}
.awards-mapband .chapter-awards { margin-bottom: 1rem; }

/* 2026-10-08: Ryan's Design / Develop / Display block icons atop each How card. */
.act-card__icon {
  display: block;
  width: auto;
  height: 4.75rem;
  margin: 0.15rem auto 0.85rem;
}
@media (max-width: 720px) { .act-card__icon { height: 4rem; } }

/* Breathing room between awards band fade and How */
.awards-mapband + .chapter-how, .chapter-how { padding-top: 2.75rem; }
@media (max-width: 720px) { .chapter-how { padding-top: 1.75rem; } }

/* 2026-10-08: mobile awards side by side, saw circle pops above the gold block */
@media (max-width: 720px) {
  .why-awards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.6rem;
    padding-top: 2.75rem;
  }
  .award-item {
    grid-template-columns: 1fr;
    align-items: start;
    text-align: center;
    padding: 0 0.4rem 0.85rem;
    min-height: 0;
  }
  .award-icon,
  .award-icon-shape {
    width: 6rem;
    height: 6rem;
    min-height: 6rem;
  }
  .award-icon {
    margin: -3rem auto 0.4rem;
  }
  .award-text {
    padding: 0;
  }
  .award-text h3 {
    font-size: clamp(1rem, 4.4vw, 1.25rem);
  }
  .award-org, .award-work {
    font-size: 0.72rem;
  }
  .award-role {
    font-size: 0.9rem;
  }
  .award-cat {
    font-size: 0.62rem;
  }
}

/* 2026-10-08: enlarge (scale up) the awards trail, mostly on mobile */
.why-trail .walking-path { width: 260%; }
@media (max-width: 720px) {
  .why-trail .walking-path { width: 460%; }
}

/* 2026-10-08: smaller map logo in the Who card */
.who-about__map img { max-width: 15.5rem; }
@media (max-width: 720px) { .who-about__map img { max-width: 12.5rem; } }

/* 2026-10-08: narrowest phones: What header 50/50 with tags; lens buttons 3 + 2, no orphan */
@media (max-width: 600px) {
  .what-head { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0.75rem; }
  .what-tags { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-right: 0; margin-top: 0.25rem; }
  .what-tags > * { width: 100%; min-width: 0; }
  .what-tags img { width: 100%; height: auto; }

  .chrome-bar.lens-bar {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 0.45rem;
  }
  .chrome-bar.lens-bar .lens-btn {
    grid-column: span 2;
    min-width: 0;
    padding: 0.5rem 0.25rem;
    font-size: 0.74rem;
    letter-spacing: 0.02em;
  }
  .lens-btn[data-lens="all"] { order: 1; }
  .lens-btn[data-lens="interactive"] { order: 2; }
  .lens-btn[data-lens="identity"] { order: 3; }
  .lens-btn[data-lens="experiential"] { order: 4; grid-column: span 3 !important; }
  .lens-btn[data-lens="educational"] { order: 5; grid-column: span 3 !important; }
}

/* 2026-10-08: What tags scale smoothly between phone and desktop (no small mid point) */
@media (min-width: 601px) {
  .what-tags { grid-template-columns: repeat(2, clamp(5.5rem, calc(163px - 5.88vw), 8.5rem)); margin-top: -1.25rem; }
  .what-tags > *, .what-tags img { width: 100%; }
}
@media (min-width: 601px) { .what-head { margin-bottom: 0.75rem; } }

/* 2026-10-08: hero hang band = 3 even columns (45 tag | Emmy tag | buck post-it), all sizes */
.who-hang {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: center;
  justify-items: center;
  gap: clamp(0.5rem, 2.5vw, 2rem);
  max-width: 760px;
}
.who-hang > .who-sketch-row { display: contents; }
.who-hang > .who-sketch-row > .hang-tag { width: 84%; height: auto; max-width: none; }
.who-hang > .who-postit { width: 100%; max-width: none; justify-self: stretch; }

/* 2026-10-08: brands marquee runs full bleed, edge to edge of the page. */
.chapter-where .brands-marquee {
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}
.chapter-where .brands-marquee__container { border-radius: 0; }
html, body { overflow-x: clip; }

/* 2026-10-08: active brand gets a shaded backdrop + small caret up from the title bar. */
.brand-item { position: relative; align-self: stretch; }
.brand-item::before {
  content: "";
  position: absolute;
  left: 0; right: 0;
  top: -1.2rem; bottom: -1.2rem;
  background: linear-gradient(180deg, rgba(84, 101, 111, 0.08), rgba(84, 101, 111, 0.22));
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
  z-index: -1;
}
.brand-item::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -1.2rem;
  width: 0; height: 0;
  border-left: 0.55rem solid transparent;
  border-right: 0.55rem solid transparent;
  border-bottom: 0.55rem solid rgba(52, 65, 73, 0.9);
  transform: translate(-50%, 0.55rem);
  opacity: 0;
  transition: opacity 0.3s ease, transform 0.3s ease;
  pointer-events: none;
}
.brand-item.is-active::before { opacity: 1; }
.brand-item.is-active::after { opacity: 1; transform: translate(-50%, 0); }
.brands-marquee__track { position: relative; z-index: 0; }

/* 2026-10-08: caret pinned to the center of the marquee, not riding with each brand. */
.brand-item::after, .brand-item.is-active::after { display: none; }
.brands-marquee__viewport::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 0; height: 0;
  border-left: 0.55rem solid transparent;
  border-right: 0.55rem solid transparent;
  border-bottom: 0.55rem solid rgba(52, 65, 73, 0.9);
  transform: translateX(-50%);
  pointer-events: none;
  z-index: 2;
}

/* 2026-10-08: caret lives on the title bar (outside the scrolling viewport), fixed at center. */
.brands-marquee__viewport::after { display: none; }
.brands-marquee__title { position: relative; }
.brands-marquee__title::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 0;
  width: 0; height: 0;
  border-left: 0.55rem solid transparent;
  border-right: 0.55rem solid transparent;
  border-bottom: 0.55rem solid rgba(52, 65, 73, 0.9);
  transform: translate(-50%, -100%);
  pointer-events: none;
}

/* 2026-10-08: caret and title bar share one solid color; caret covers the blue top rule so they read as one shape. */
.brands-marquee__title { background: #485158; }
.brands-marquee__title::before {
  top: 0.1em;
  border-bottom: calc(0.55rem + 0.1em) solid #485158;
  z-index: 1;
}

/* 2026-10-08: Where marquee sits flush on the When section. */
.chapter-where { margin-bottom: 0; }

/* 2026-10-08: Résumé CTA pill inside the How to When bridge bar. */
.bridge-line .bridge-line__cta {
  display: inline-block;
  margin-left: 0.85rem;
  padding: 0.3em 0.95em;
  background: var(--orange);
  color: var(--white);
  border-radius: 999px;
  text-decoration: none;
  font-weight: 700;
  font-size: 0.9em;
  line-height: 1.3;
  box-shadow: 0 2px 0 rgba(0, 0, 0, 0.18);
  transition: background-color 0.2s ease, transform 0.2s ease;
  vertical-align: middle;
}
.bridge-line .bridge-line__cta:hover {
  color: var(--white);
  background: #d95f14;
  transform: translateY(-1px);
}
@media (max-width: 600px) {
  .bridge-line .bridge-line__cta { margin: 0.55rem 0 0 0.6rem; }
}

/* 2026-10-09: bridge bar redo. Caption on top, Résumé + Get in touch buttons beneath. */
.bridge-line {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.75rem 1.4rem;
  padding: 1.05rem 1.4rem 1.2rem;
}
.bridge-line .bridge-line__caption {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 600;
  line-height: 1.4;
  text-wrap: balance;
}
.bridge-line .bridge-line__btns {
  display: flex;
  flex-wrap: nowrap;
  gap: 0.6rem;
  justify-content: center;
}
.bridge-line .bridge-line__cta {
  margin: 0;
  padding: 0.42em 1.15em;
  background: transparent;
  color: var(--white);
  border: 2px solid rgba(255, 255, 255, 0.85);
  border-radius: 999px;
  text-decoration: none;
  font-weight: 700;
  font-size: 0.9rem;
  line-height: 1.3;
  white-space: nowrap;
  box-shadow: none;
  transform: none;
  transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}
.bridge-line .bridge-line__cta:hover { background: rgba(255, 255, 255, 0.14); color: var(--white); transform: translateY(-1px); }
.bridge-line .bridge-line__cta--primary { background: var(--orange); border-color: var(--orange); }
.bridge-line .bridge-line__cta--primary:hover { background: #d95f14; border-color: #d95f14; }
@media (max-width: 600px) {
  .bridge-line { flex-direction: column; gap: 0.7rem; }
}

/* 2026-10-09: phone lens bar stacks: All full width, then two rows of two. */
@media (max-width: 600px) {
  .chrome-bar.lens-bar { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .chrome-bar.lens-bar .lens-btn { grid-column: span 1 !important; padding: 0.55rem 0.25rem; }
  .lens-btn[data-lens="all"] { order: 1; grid-column: 1 / -1 !important; }
  .lens-btn[data-lens="interactive"] { order: 2; }
  .lens-btn[data-lens="experiential"] { order: 3; }
  .lens-btn[data-lens="identity"] { order: 4; }
  .lens-btn[data-lens="educational"] { order: 5; }
}
@media (max-width: 600px) {
  .chrome-bar.lens-bar .lens-btn[data-lens="all"] { grid-column: 1 / -1 !important; }
}

/* 2026-10-09: phones: label + title left, tags right, intro text full width beneath both. */
@media (max-width: 600px) {
  .what-head__copy { display: contents; }
  .what-head { align-items: start; row-gap: 0.4rem; }
  .what-head .chapter-what__tag { grid-column: 1; grid-row: 1; align-self: end; margin: 0; }
  .what-head #what-title { grid-column: 1; grid-row: 2; align-self: start; margin: 0; }
  .what-head .what-tags { grid-column: 2; grid-row: 1 / span 2; align-self: center; margin-top: 0; }
  .what-head .chapter-what__lead { grid-column: 1 / -1; grid-row: 3; margin: 0.35rem 0 0; }
}

/* 2026-10-09: patch floats gently with two soft glow orbs (blue, orange) and a faint dashed orbit. */
.who-patch { overflow: visible; }
.who-patch .patch-float {
  position: relative;
  z-index: 2;
  animation: patch-hover 7s ease-in-out infinite;
}
.patch-orbit {
  position: absolute;
  left: 50%; top: 50%;
  width: 150%; height: 120%;
  transform: translate(-50%, -50%) rotate(-12deg);
  border: 1.5px dashed rgba(255, 255, 255, 0.55);
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
  animation: orbit-breathe 11s ease-in-out infinite;
}
.patch-orb {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  z-index: 1;
}
.patch-orb--blue {
  width: 46%; aspect-ratio: 1;
  left: -30%; top: 24%;
  background: radial-gradient(circle at 38% 35%, #c9d8f5 0%, #6d8ac6 38%, #1c4e9e 100%);
  box-shadow: 0 0 1.4rem 0.35rem rgba(109, 138, 198, 0.65), 0 0 3.2rem 0.9rem rgba(28, 78, 158, 0.35);
  filter: blur(0.6px);
  animation: orb-drift-a 9s ease-in-out infinite;
}
.patch-orb--orange {
  width: 22%; aspect-ratio: 1;
  right: -26%; top: 40%;
  background: radial-gradient(circle at 38% 35%, #ffd6b4 0%, #f37223 45%, #c85a14 100%);
  box-shadow: 0 0 1.1rem 0.3rem rgba(243, 114, 35, 0.7), 0 0 2.6rem 0.7rem rgba(243, 114, 35, 0.35);
  filter: blur(0.5px);
  animation: orb-drift-b 8s ease-in-out infinite;
}
@keyframes patch-hover {
  0%, 100% { transform: translateY(0) rotate(-1deg); }
  50% { transform: translateY(-0.45rem) rotate(1deg); }
}
@keyframes orb-drift-a {
  0%, 100% { transform: translate(0, 0); }
  50% { transform: translate(-0.35rem, 0.6rem); }
}
@keyframes orb-drift-b {
  0%, 100% { transform: translate(0, 0); }
  50% { transform: translate(0.3rem, -0.7rem); }
}
@keyframes orbit-breathe {
  0%, 100% { transform: translate(-50%, -50%) rotate(-12deg) scale(1); }
  50% { transform: translate(-50%, -50%) rotate(-8deg) scale(1.03); }
}
@media (prefers-reduced-motion: reduce) {
  .who-patch .patch-float, .patch-orb, .patch-orbit { animation: none; }
}
.patch-orbit { border-color: rgba(28, 78, 158, 0.38); }
@media (min-width: 561px) {
  .patch-orb--orange { right: -8%; top: auto; bottom: -14%; width: 20%; }
  .patch-orb--blue { left: -34%; }
  .patch-orbit { width: 140%; }
}
@media (min-width: 561px) { .patch-orb--orange { right: -2%; bottom: -10%; } }

/* 2026-10-09: brand planets (navy topo, orange) replace the plain glow orbs. */
.patch-orb--blue {
  background: url("assets/hero/planet-navy.svg") center / 100% 100% no-repeat;
  filter: none;
  box-shadow: 0 0 1.6rem 0.2rem rgba(109, 138, 198, 0.6), 0 0 3.4rem 0.7rem rgba(28, 78, 158, 0.28);
}
.patch-orb--orange {
  background: url("assets/hero/planet-orange.svg") center / 100% 100% no-repeat;
  filter: none;
  box-shadow: 0 0 1.2rem 0.15rem rgba(243, 114, 35, 0.65), 0 0 2.8rem 0.55rem rgba(243, 114, 35, 0.3);
}

/* 2026-10-09: planets as translucent line illustrations (match Ryan's sketch), soft light only. */
.patch-orb--blue {
  box-shadow: 0 0 1.2rem 0.1rem rgba(109, 138, 198, 0.4);
  opacity: 0.95;
}
.patch-orb--orange {
  box-shadow: 0 0 1rem 0.1rem rgba(243, 114, 35, 0.4);
  opacity: 0.95;
}
.patch-orb { background-color: transparent; }
.patch-orb--blue { width: 54%; left: -36%; top: 20%; }
.patch-orb--orange { width: 26%; }
@media (min-width: 561px) { .patch-orb--orange { width: 22%; } }

/* 2026-10-09: larger planets; orbit ring shrinks to circle the patch and the orange planet. */
.patch-orb--blue { width: 66%; left: -46%; top: 12%; }
.patch-orb--orange { width: 34%; right: -20%; bottom: -16%; top: auto; }
.patch-orbit {
  width: 124%; height: 124%;
  left: 54%; top: 54%;
  transform: translate(-50%, -50%) rotate(-12deg);
}
@media (min-width: 561px) {
  .patch-orb--blue { width: 62%; left: -44%; top: 14%; }
  .patch-orb--orange { width: 30%; right: -16%; bottom: -14%; }
  .patch-orbit { width: 126%; height: 126%; left: 54%; top: 54%; }
}
@keyframes orbit-breathe {
  0%, 100% { transform: translate(-50%, -50%) rotate(-12deg) scale(1); }
  50% { transform: translate(-50%, -50%) rotate(-8deg) scale(1.03); }
}
@media (max-width: 560px) { .patch-orb--orange { bottom: -6%; right: -18%; } }

/* 2026-10-09: blue planet back to its earlier size; only the orange planet stays larger. */
.patch-orb--blue { width: 54%; left: -36%; top: 20%; }
.patch-orb--orange { width: 42%; right: -24%; bottom: -22%; }
@media (min-width: 561px) {
  .patch-orb--blue { width: 54%; left: -36%; top: 20%; }
  .patch-orb--orange { width: 38%; right: -20%; bottom: -20%; }
  .patch-orbit { width: 132%; height: 132%; left: 56%; top: 56%; }
}
@media (max-width: 560px) {
  .patch-orb--orange { width: 42%; right: -22%; bottom: -14%; }
  .patch-orbit { width: 130%; height: 130%; left: 56%; top: 56%; }
}

/* 2026-10-09: dotted ring goes only around the orange planet (travels with it). */
.patch-orbit { display: none; }
.patch-orb--orange::after {
  content: "";
  position: absolute;
  inset: -34%;
  border: 1.5px dashed rgba(243, 114, 35, 0.6);
  border-radius: 50%;
  pointer-events: none;
}

/* 2026-10-09: blue planet, patch, orange planet share one horizontal center line. */
.patch-orb { top: 50% !important; bottom: auto !important; }
.patch-orb--blue { margin-top: -27%; left: -38%; }
.patch-orb--orange { margin-top: -19%; right: -30%; }
@media (max-width: 560px) {
  .patch-orb--blue { left: -42%; }
  .patch-orb--orange { margin-top: -21%; right: -32%; }
}
@media (min-width: 561px) {
  .who-top { column-gap: 4rem; }
  .patch-orb--orange { width: 34%; margin-top: -17%; right: -28%; }
  .patch-orb--orange::after { inset: -26%; }
}

/* 2026-10-09: dotted ring around the orange planet spins slowly, with a fading comet tail. */
.patch-orb--orange::after {
  border: 0;
  background: conic-gradient(from 0deg, rgba(243, 114, 35, 0.08), rgba(243, 114, 35, 0.9));
  -webkit-mask-image:
    radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 1.5px)),
    repeating-conic-gradient(#000 0deg 7deg, transparent 7deg 16deg);
  -webkit-mask-composite: source-in;
  mask-image:
    radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 1.5px)),
    repeating-conic-gradient(#000 0deg 7deg, transparent 7deg 16deg);
  mask-composite: intersect;
  animation: planet-ring-spin 14s linear infinite;
}
@keyframes planet-ring-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .patch-orb--orange::after { animation: none; }
}

/* 2026-10-09: desktop: orange planet may tuck behind the hero card; default column gap restored. */
.who-top__main { position: relative; z-index: 3; }
@media (min-width: 561px) {
  .who-top { column-gap: 1.1rem; }
  .patch-orb--orange { width: 36%; margin-top: -18%; right: -36%; }
}
@media (min-width: 561px) { .patch-orb--orange { right: -22%; } }

/* 2026-10-09: ONE topo drawing (white-single, never mirrored or rotated) drawn three times
   at identical size and position: back (soft blue), mid (white), front (navy).
   They line up at page top and slide apart as you scroll. The old still blue drawing
   behind them is dropped so only one set of lines exists. */
.who-topo__bg::before {
  background: var(--light-blue);
}
.who-topo__lines {
  top: -15lvh;
  left: 0;
  width: 100%;
  height: 130lvh;
  background-image: none !important;
  transform: none !important;
  -webkit-mask: url("assets/backgrounds/topo-lines-white-single.png") center / cover no-repeat;
  mask: url("assets/backgrounds/topo-lines-white-single.png") center / cover no-repeat;
}
.who-topo__lines--back  { background-color: #9db3de; opacity: 0.55; }
.who-topo__lines--mid   { background-color: #ffffff; opacity: 0.6; }
.who-topo__lines--front { background-color: #1c4e9e; opacity: 0.6; }
@media (max-width: 720px) {
  .who-topo__lines--back  { opacity: 0.5; }
  .who-topo__lines--mid   { opacity: 0.55; }
  .who-topo__lines--front { opacity: 0.55; }
}

/* 2026-10-09: buck sketch caption removed; buck larger, centered on the post-it. */
.who-postit__caption { display: none; }
.who-postit__buck { top: 50%; width: 66%; }

@keyframes study-open { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .study-row.is-open .study-callout-desc, .study-row.is-open .study-row__thumb, .study-row.is-open .study-readmore { animation: none; }
}

/* 2026-10-09: phone How cards: icon beside the words instead of stacked above them. */
@media (max-width: 719px) {
  .acts { gap: 0.7rem; margin-bottom: 0.9rem; }
  .act-slot { margin-top: 0; }
  .act-card {
    display: grid;
    grid-template-columns: 3.6rem 1fr;
    grid-template-areas: "icon title" "icon copy" "icon micro";
    column-gap: 0.85rem;
    row-gap: 0.15rem;
    align-items: center;
    padding: 0.85rem 1rem;
    text-align: left;
  }
  .act-card__icon { grid-area: icon; width: 3.6rem; height: auto; margin: 0; align-self: center; }
  .act-card h3 { grid-area: title; margin: 0; font-size: 1.15rem; }
  .act-card .act-copy { grid-area: copy; margin: 0; font-size: 0.95rem; line-height: 1.35; }
  .act-card .act-micro { grid-area: micro; margin: 0.25rem 0 0; padding-top: 0.3rem; font-size: 0.82rem; line-height: 1.3; }
}
@media (max-width: 719px) {
  .act-card .act-copy, .act-card .act-micro, .act-card h3 { text-align: left; justify-self: start; }
}
@media (max-width: 719px) {
  .act-card { column-gap: 1.3rem; }
}
.who-topo__lines { top: -22lvh; height: 144lvh; }

/* 2026-10-09: hero band background is the snowy-plain clip (cinemagraph 05) looped
   back and forth, fixed to the viewport so the band is a window onto it. A light
   blue tint keeps the cards readable. Topo line layers are retired. */
.who-topo__bg::before { display: none; }
.who-topo__lines { display: none !important; }
.who-topo__video {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  height: 100lvh;
  object-fit: cover;
  object-position: 50% 60%;
  pointer-events: none;
}
.who-topo__tint {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  height: 100lvh;
  background: linear-gradient(rgba(28, 78, 158, 0.18), rgba(28, 78, 158, 0.28));
  pointer-events: none;
}
.who-topo__bg { background: var(--light-blue); }
/* 2026-10-09: clip is translucent over the site blue. */
.who-topo__bg { background: #4a73bd; }
.who-topo__video { opacity: 0.5; mix-blend-mode: luminosity; }
.who-topo__tint { background: linear-gradient(rgba(60, 100, 180, 0.35), rgba(28, 78, 158, 0.45)); mix-blend-mode: multiply; opacity: 0.6; }

/* 2026-10-09: Experiential wall gets a sixth square on phones/tablets (even 2-across and 3-across rows).
   It is a "Let's build yours" link to contact; hidden on desktop where five-across stays. */
.mason-cta { display: none; }
@media (min-width: 0px) {
  .mason-cta {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    background: var(--orange);
    border-color: var(--orange);
    color: #fff;
    text-decoration: none;
    text-align: center;
    padding: 0.5rem;
  }
  .mason-cta .mason-cta__x { width: 34%; height: auto; max-width: 3rem; filter: brightness(0) invert(1); object-fit: contain; border-radius: 0; }
  .mason-cta .mason-cta__txt { font-family: var(--museo-sans); font-weight: 800; font-size: 0.95rem; line-height: 1.2; }
  .mason-brick.mason-cta:has(img) { padding: 0.5rem; align-items: center; justify-content: center; }
}

/* 2026-10-09: hero row aligns to the page column: the blue planet's outer edge now sits on the
   left edge of the cards below (patch pushed in by the planet's overhang), and the hero card
   runs to the same right edge. */
@media (min-width: 960px) {
  .chapter-who > .who-top { padding-right: 0; padding-left: 0; }
  .who-top > .who-patch { margin-left: 3.65rem; }
}

/* 2026-10-09: hero hang row is four across: 45 tag, Emmy tag, orange X tag, buck post-it.
   Tags respond to the mouse: lift, soft shadow, grab cursor (swing handled in site.js). */
.who-hang {
  grid-template-columns: repeat(3, minmax(0, 0.8fr)) minmax(0, 1.1fr);
  max-width: 920px;
}
.who-hang > .who-sketch-row > .hang-tag {
  width: 88%;
  cursor: grab;
  filter: drop-shadow(0 6px 8px rgba(20, 40, 90, 0.18));
  transition: filter 0.25s ease, translate 0.25s ease, scale 0.25s ease;
}
.who-hang > .who-sketch-row > .hang-tag.is-hot {
  translate: 0 -5px;
  scale: 1.05;
  filter: drop-shadow(0 12px 14px rgba(20, 40, 90, 0.3));
}
.who-hang > .who-sketch-row > .hang-tag:active { cursor: grabbing; }
@media (hover: none) { .who-hang > .who-sketch-row > .hang-tag { cursor: default; } }

/* 2026-10-09: small grey X marks the start of the dashed orbit and rides around with it. */
.patch-orb--orange .orbit-x {
  position: absolute;
  inset: -34%;
  pointer-events: none;
  animation: planet-ring-spin 14s linear infinite;
}
@media (min-width: 561px) { .patch-orb--orange .orbit-x { inset: -26%; } }
.patch-orb--orange .orbit-x img {
  position: absolute;
  left: 50%;
  top: 0;
  width: 0.8rem;
  height: 0.8rem;
  transform: translate(-50%, -50%);
  display: block;
  opacity: 0.95;
}
@media (prefers-reduced-motion: reduce) { .patch-orb--orange .orbit-x { animation: none; } }
/* 2026-10-09: grey X sits further along the dashes, at the tail end of the comet streak.
   The ring box is rotated 40deg from the top so the X lands down the line; the dashes
   themselves spin as before. */
.patch-orb--orange .orbit-x { rotate: 9deg; }

/* 2026-10-09: bigger patch with the two worlds floating side by side underneath it. */
.who-top > .who-patch {
  --pw: clamp(10.5rem, 24vw, 13.75rem);
  width: var(--pw);
  padding-bottom: calc(var(--pw) * 0.62);
  margin-left: 0;
  box-sizing: content-box;
}
.who-patch .patch-orb {
  top: auto !important;
  bottom: 0 !important;
  margin-top: 0 !important;
  aspect-ratio: 1;
}
.who-patch .patch-orb--blue {
  width: 50% !important;
  left: 2% !important;
  right: auto !important;
}
.who-patch .patch-orb--orange {
  width: 40% !important;
  right: 6% !important;
  left: auto !important;
}
@media (max-width: 560px) {
  .who-top > .who-patch {
    --pw: clamp(10rem, 62vw, 13rem);
    margin-left: 0;
    justify-self: center;
  }
}

/* 2026-10-09: worlds tucked closer under the patch, with clear space between the two. */
.who-top > .who-patch { padding-bottom: calc(var(--pw) * 0.5); }
.who-patch .patch-orb--blue { left: 0 !important; }
.who-patch .patch-orb--orange { right: 0 !important; }
.who-patch .patch-orb { bottom: calc(var(--pw) * -0.04) !important; }

/* 2026-10-09: worlds overlap the bottom edge of the patch like a stacked cluster: larger blue
   one at left in front, orange one tucked at its right, the two just overlapping. */
.who-top > .who-patch { padding-bottom: calc(var(--pw) * 0.36); }
.who-patch .patch-orb { z-index: 4 !important; bottom: calc(var(--pw) * -0.2) !important; }
.who-patch .patch-orb--blue { width: 52% !important; left: -4% !important; right: auto !important; }
.who-patch .patch-orb--orange { width: 42% !important; left: 46% !important; right: auto !important; }
/* patch stays out front; the worlds tuck behind its lower edge */
.who-patch .patch-orb { z-index: 1 !important; }
.who-patch .patch-float { z-index: 3; }
.who-top > .who-patch { padding-bottom: calc(var(--pw) * 0.3); }
.who-patch .patch-orb { bottom: calc(var(--pw) * -0.07) !important; }

/* 2026-10-09: desktop (800px+): big patch left, title block middle, the two worlds floating
   side by side to the right of the title block. Phones and small tablets keep the centered
   patch-over-worlds stack above. */
@media (min-width: 800px) {
  .who-top { --pw: clamp(11.5rem, 25vw, 15rem); }
  .chapter-who > .who-top {
    padding-right: clamp(10rem, 21vw, 16.5rem);
  }
  .who-top > .who-patch {
    display: contents;
  }
  .who-top > .who-patch .patch-float {
    width: var(--pw);
    grid-column: 1;
  }
  .who-top .who-patch .patch-orb {
    top: 50% !important;
    bottom: auto !important;
    left: auto !important;
    aspect-ratio: 1;
  }
  .who-top .who-patch .patch-orb--blue {
    width: clamp(5.2rem, 10vw, 8.6rem) !important;
    margin-top: calc(clamp(5.2rem, 10vw, 8.6rem) * -0.5) !important;
    right: clamp(4.8rem, 10.4vw, 9rem) !important;
  }
  .who-top .who-patch .patch-orb--orange {
    width: clamp(4rem, 8vw, 6.8rem) !important;
    margin-top: calc(clamp(4rem, 8vw, 6.8rem) * -0.5) !important;
    right: clamp(0.3rem, 1vw, 1rem) !important;
  }
}
@media (min-width: 800px) {
  .who-top { --pw: clamp(10.5rem, 22vw, 14rem); }
  .chapter-who > .who-top { padding-right: clamp(8.5rem, 16.5vw, 13rem); }
  .who-top .who-patch .patch-orb--blue {
    width: clamp(4.4rem, 8vw, 7rem) !important;
    margin-top: calc(clamp(4.4rem, 8vw, 7rem) * -0.5) !important;
    right: clamp(3.9rem, 8.3vw, 7.4rem) !important;
  }
  .who-top .who-patch .patch-orb--orange {
    width: clamp(3.4rem, 6.4vw, 5.6rem) !important;
    margin-top: calc(clamp(3.4rem, 6.4vw, 5.6rem) * -0.5) !important;
    right: clamp(0.2rem, 0.8vw, 0.8rem) !important;
  }
}

/* 2026-10-09 (revised): worlds sit ON TOP of the title block at its right side; the block keeps its
   normal full width and layout (no reserved column). */
@media (min-width: 800px) {
  .chapter-who > .who-top { padding-right: 0; }
  .who-top .who-patch .patch-orb { z-index: 6 !important; }
  .who-top .who-patch .patch-orb--blue {
    right: clamp(3.6rem, 7.6vw, 6.8rem) !important;
  }
  .who-top .who-patch .patch-orb--orange {
    right: clamp(0.6rem, 1.4vw, 1.4rem) !important;
  }
}

/* 2026-10-09: worlds centered on the title card's height, with a medium gap between them. */
@media (min-width: 800px) {
  .who-top .who-patch .patch-orb--blue {
    top: 7.3rem !important;
    right: calc(clamp(0.6rem, 1.4vw, 1.4rem) + clamp(3.4rem, 6.4vw, 5.6rem) + 1.5rem) !important;
  }
  .who-top .who-patch .patch-orb--orange {
    top: 7.3rem !important;
  }
}

/* 2026-10-09: phones and small tablets: patch centered out front, blue world tucked behind its left
   side and orange behind its right, both middle aligned with the patch on one line. */
@media (max-width: 799px) {
  .who-top > .who-patch { padding-bottom: 0; }
  .who-top .who-patch .patch-orb { z-index: 1 !important; top: 50% !important; bottom: auto !important; aspect-ratio: 1; }
  .who-top .who-patch .patch-orb--blue {
    width: 48% !important; margin-top: -24% !important;
    left: -44% !important; right: auto !important;
  }
  .who-top .who-patch .patch-orb--orange {
    width: 37% !important; margin-top: -18.5% !important;
    right: -35% !important; left: auto !important;
  }
}

/* 2026-10-09: grey X nudged onto the dashed line (was sitting just outside it). */
.patch-orb--orange .orbit-x img { top: 1px; }

/* 2026-10-09: mid size mobile (481-720px): topo X, axe circle and wolf shield sit three across. */
@media (min-width: 481px) and (max-width: 720px) {
  .why-postit--bare { max-width: 34rem; width: 100%; justify-self: center; }
  .why-postit--bare .why-postit__marks {
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 3%;
  }
  .why-postit--bare .why-postit__pair { display: contents; }
  .why-postit--bare .why-postit__x,
  .why-postit--bare .why-postit__axe,
  .why-postit--bare .why-postit__wolf { width: 31%; margin-top: 0; }
}

/* 2026-10-09: How cards use the textured paper art: top edge, tiling middle, bottom edge. */
.act-card {
  background-color: #f4f4f4;
  background-image: url("assets/how/card-top.jpg"), url("assets/how/card-bottom.jpg"), url("assets/how/card-mid.jpg");
  background-repeat: no-repeat, no-repeat, repeat-y;
  background-position: center top, center bottom, center top;
  background-size: 100% auto, 100% auto, 100% auto;
}

/* 2026-10-09: work study cards use the same textured paper art as the How cards. */
.study-row {
  background-color: #f4f4f4;
  background-image: url("assets/how/card-top.jpg"), url("assets/how/card-bottom.jpg"), url("assets/how/card-mid.jpg");
  background-repeat: no-repeat, no-repeat, repeat-y;
  background-position: center top, center bottom, center top;
  background-size: 100% auto, 100% auto, 100% auto;
}

/* 2026-10-09: phone work studies, reworked. The header (tag, title, caret) is the only toggle and
   stays on top. Open order: header, thumbnail (links to the study), summary, Read more. */
.study-row__head { display: contents; }
@media (max-width: 599px) {
  .study-row,
  .study-row:not(.is-open) {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    grid-template-areas: "head" "thumb" "desc" "btn";
    row-gap: 0.75rem;
    justify-items: stretch;
  }
  .study-row:not(.is-open) { row-gap: 0; }
  .study-row__copy { display: contents; }
  .study-row__head {
    grid-area: head;
    display: grid;
    gap: 0.25rem;
    justify-items: center;
    text-align: center;
    position: relative;
    padding: 0.1rem 2rem;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  .study-row__head::after {
    content: "";
    position: absolute;
    right: 0.5rem;
    top: 50%;
    width: 0.6rem;
    height: 0.6rem;
    margin-top: -0.4rem;
    border-right: 2.5px solid var(--orange);
    border-bottom: 2.5px solid var(--orange);
    transform: rotate(45deg);
    transition: transform 0.25s ease, margin-top 0.25s ease;
  }
  .study-row.is-open .study-row__head::after { transform: rotate(225deg); margin-top: -0.1rem; }
  .study-row__head:focus-visible { outline: 2px solid var(--orange); outline-offset: 4px; border-radius: 0.4rem; }
  .study-row .study-callout-desc { grid-area: desc; display: block; text-align: center; cursor: default; }
  .study-row .study-row__thumb { grid-area: thumb; justify-self: center; width: 100%; max-width: 18rem; aspect-ratio: 16 / 10; }
  .study-row:not(.is-open) .study-callout-desc,
  .study-row:not(.is-open) .study-row__thumb,
  .study-row:not(.is-open) .study-readmore { display: none; }
  .study-row .study-readmore { grid-area: btn; justify-self: center; }
  .study-row.is-open { border-color: var(--orange); }
  .study-row.is-open .study-callout-desc,
  .study-row.is-open .study-row__thumb,
  .study-row.is-open .study-readmore { animation: study-open 0.28s ease both; }
}

/* 2026-10-09: tap tooltips. Any element with data-tip shows a small bubble on tap, hover or focus. */
[data-tip] { cursor: pointer; pointer-events: auto !important; -webkit-tap-highlight-color: transparent; }
.tip-bubble {
  position: fixed;
  z-index: 9999;
  padding: 0.4rem 0.8rem;
  border-radius: 999px;
  background: var(--navy, #1c4e9e);
  color: #fff;
  font-family: var(--museo-sans, inherit);
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  white-space: nowrap;
  pointer-events: none;
  box-shadow: 0 6px 16px rgba(20, 40, 90, 0.28);
  opacity: 0;
  transform: translate(-50%, calc(-100% + 4px));
  transition: opacity 0.18s ease, transform 0.18s ease;
}
.tip-bubble::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 100%;
  margin-left: -0.35rem;
  border: 0.35rem solid transparent;
  border-top-color: var(--navy, #1c4e9e);
}
.tip-bubble.is-on { opacity: 1; transform: translate(-50%, -100%); }
@media (prefers-reduced-motion: reduce) { .tip-bubble { transition: none; } }

/* 2026-10-11: teaser cards, orange wipe from the left; type turns white and bold. */
.who-teasers__list li {
  background-color: #f3f3f3;
  background-image: linear-gradient(var(--orange), var(--orange));
  background-repeat: no-repeat;
  background-position: left center;
  background-size: 0% 100%;
  transition: background-size 0.45s cubic-bezier(.22,.7,.2,1), color 0.25s ease, font-weight 0.25s ease;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
@media (hover: hover) {
  .who-teasers__list li:hover { background-size: 100% 100%; color: #fff; font-weight: 700; }
}
.who-teasers__list li:focus-visible,
.who-teasers__list li.is-on { background-size: 100% 100%; color: #fff; font-weight: 700; outline: none; }
@media (prefers-reduced-motion: reduce) { .who-teasers__list li { transition: none; } }

/* 2026-10-11: "Because" cards, same orange wipe from the left; type turns white and bold. */
.because-lines li:not(.because-lines__saw) {
  background-color: #f5f5f5;
  background-image: linear-gradient(var(--navy, #1c4e9e), var(--navy, #1c4e9e));
  background-repeat: no-repeat;
  background-position: left center;
  border-left: 3px solid var(--orange);
  background-size: 0% 100%;
  transition: background-size 0.45s cubic-bezier(.22,.7,.2,1), color 0.25s ease, font-weight 0.25s ease;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
@media (hover: hover) {
  .because-lines li:not(.because-lines__saw):hover { background-size: 100% 100%; color: #fff; font-weight: 800; }
}
.because-lines li:not(.because-lines__saw):focus-visible,
.because-lines li:not(.because-lines__saw).is-on { background-size: 100% 100%; color: #fff; font-weight: 800; outline: none; }
@media (prefers-reduced-motion: reduce) { .because-lines li:not(.because-lines__saw) { transition: none; } }

/* 2026-10-11: the When saw cuts side to side. It starts at the middle, swings out each way, and always
   finishes a full stroke back at the middle (JS adds/removes .is-sawing on stroke boundaries). */
.chapter-when .who-saw-line img { cursor: pointer; -webkit-tap-highlight-color: transparent; }
@keyframes saw-stroke {
  0%   { transform: translateX(0); animation-timing-function: cubic-bezier(0.61, 1, 0.88, 1); }
  25%  { transform: translateX(4.5%); animation-timing-function: cubic-bezier(0.37, 0, 0.63, 1); }
  75%  { transform: translateX(-4.5%); animation-timing-function: cubic-bezier(0.12, 0, 0.39, 0); }
  100% { transform: translateX(0); }
}
.chapter-when .who-saw-line.is-sawing img { animation: saw-stroke 0.9s linear infinite; will-change: transform; }
@media (prefers-reduced-motion: reduce) {
  .chapter-when .who-saw-line.is-sawing img { animation: none; }
}

/* 2026-10-11: Expand cards, the orange X sits to the left of the title; Expand stays on the right. */
.expand-actions { display: contents; }
.expand-head .expand-x { order: -1; margin-right: 0.15rem; }
.expand-head .expand-title { order: 0; }
.expand-head .path-btn { order: 1; }
.expand-head .path-btn:first-of-type { margin-left: auto; }

/* 2026-10-11: patch spin (driven by the Web Animations API in site.js on the `rotate` property, so the float keeps running). */
.who-patch .patch-float { cursor: pointer; -webkit-tap-highlight-color: transparent; }

/* 2026-10-11: three links under the hang tags: My Story, Awards, Zine. The post-it spans both rows. */
.who-hang { grid-template-rows: auto auto; row-gap: 0.15rem; }
.who-hang > .who-sketch-row > .hang-tag { grid-row: 1; }
.who-hang > .who-postit { grid-row: 1 / span 2; grid-column: 4; align-self: center; }
.hang-links { display: contents; }
.hang-links__a {
  grid-row: 2;
  justify-self: center;
  align-self: start;
  margin-top: 0.35rem;
  min-width: 0;
  max-width: 100%;
  text-align: center;
  white-space: nowrap;
  font-size: clamp(0.72rem, 2.7vw, 0.85rem);
  padding: 0.5rem clamp(0.6rem, 2.4vw, 1.1rem);
  background-image: none;
  border-bottom: 1px solid var(--blue);
}
.hang-links__a:hover { border-bottom-color: var(--orange); }
.hang-links__a--1 { grid-column: 1; }
.hang-links__a--2 { grid-column: 2; }
.hang-links__a--3 { grid-column: 3; }

/* 2026-10-11: hang-link buttons match the Resume / LinkedIn / Contact Me slate buttons; sized to their labels. */
.hang-links__a.path-btn--primary {
  background: linear-gradient(180deg, var(--blue-grey) 0%, #404f58 100%);
  color: var(--white);
  border: 1px solid #334047;
  border-radius: 4px;
  font-weight: 700;
  font-size: clamp(0.78rem, 2.6vw, 0.95rem);
  padding: 0.6rem clamp(0.7rem, 2.6vw, 1.1rem);
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.2), 0 2px 4px rgba(0, 0, 0, 0.2);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  transition: all 0.2s;
}
.hang-links__a.path-btn--primary:hover,
.hang-links__a.path-btn--primary:focus-visible {
  background: linear-gradient(180deg, var(--light-blue) 0%, #5773a8 100%);
  border-color: #465f8f;
  color: var(--white);
  transform: translateY(-1px);
}

/* 2026-10-11: hang-link buttons take the saw line orange (#a8452a). */
.hang-links__a.path-btn--primary {
  background: linear-gradient(180deg, #b84f31 0%, #a8452a 55%, #8f3a22 100%);
  border-color: #7a311d;
  color: #fff;
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.25), 0 2px 4px rgba(0, 0, 0, 0.25);
}
.hang-links__a.path-btn--primary:hover,
.hang-links__a.path-btn--primary:focus-visible {
  background: linear-gradient(180deg, #c95a3a 0%, #b84f31 55%, #a8452a 100%);
  border-color: #8f3a22;
  color: #fff;
}

/* 2026-10-11: hang-link buttons share one width and sit centered under their tags, so the gaps match. */
.hang-links__a.path-btn--primary {
  width: 84%;
  min-width: 0;
  padding-left: 0.3rem;
  padding-right: 0.3rem;
  justify-self: center;
}

/* 2026-10-11: bigger Design / Develop / Display triangles. */
.act-card__icon { height: 6.6rem; margin-bottom: 1rem; }
@media (max-width: 720px) { .act-card__icon { height: 5.4rem; } }
@media (max-width: 719px) {
  .act-card { grid-template-columns: 5.4rem 1fr; column-gap: 1.1rem; }
  .act-card__icon { width: 5.4rem; height: auto; margin: 0; }
}

/* 2026-10-12: hang links as embossed label-maker tape (keep saw orange). */
.hang-links .hang-links__a.path-btn{
  border-radius:2px !important;
  border:0 !important;
  font-family:"Courier New",Courier,monospace !important;
  font-weight:700 !important;
  text-transform:uppercase;
  letter-spacing:.22em;
  color:rgba(255,255,255,.94) !important;
  text-shadow:0 -1px 0 rgba(0,0,0,.35),0 1px 0 rgba(255,255,255,.45),0 0 1px rgba(255,255,255,.6);
  background:
    linear-gradient(180deg,rgba(255,255,255,.14),rgba(255,255,255,0) 30%,rgba(0,0,0,0) 70%,rgba(0,0,0,.16)),
    repeating-linear-gradient(90deg,rgba(0,0,0,.035) 0 1px,transparent 1px 3px),
    #a8452a !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18),inset 0 -1px 0 rgba(0,0,0,.25),0 2px 3px rgba(0,0,0,.28) !important;
  clip-path:polygon(0 0,100% 0,100% 100%,0 100%);
}
.hang-links .hang-links__a--1{transform:rotate(-1deg)}
.hang-links .hang-links__a--2{transform:rotate(.6deg)}
.hang-links .hang-links__a--3{transform:rotate(-.5deg)}
.hang-links .hang-links__a.path-btn:hover,.hang-links .hang-links__a.path-btn:focus-visible{
  color:#fff !important;filter:brightness(1.06);
}

/* 2026-10-12: non-link interactions keep the plain arrow cursor; real links/buttons keep pointer. */
.brands-marquee__container, .brands-marquee__container:active,
.hang-tag, .hang-tag:active, .who-hang > .who-sketch-row > .hang-tag:active,
[data-tip]:not(a):not(button),
.who-teasers__list li,
.because-lines li,
.chapter-when .who-saw-line img,
.who-patch .patch-float, .who-patch img { cursor: default !important; }
a, a *, button, .path-btn { cursor: pointer; }

/* 2026-10-12 swap: hang group moved down into .awards-mapband; awards plaques
   straddle the top saw teeth; fixed blue topo shows below the saw. */
.who-topo { padding-bottom: 3.5rem; }
.awards-mapband > .who-hang { padding: 1.5rem 1.5rem 0.5rem; box-sizing: border-box; }
.saw-break-container { margin-top: -1.5rem; margin-bottom: 0; }
.saw-break-container > .chapter-awards {
  position: relative;
  z-index: 20;
  margin: 0 auto -3.25rem;
  padding: 0 1rem;
  max-width: 54rem;
  pointer-events: none;
}
.saw-break-container > .chapter-awards .award-item {
  pointer-events: auto;
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.45), 0 3px 6px rgba(0, 0, 0, 0.3);
}
.saw-break-container > .saw-break { padding: 0; height: 12rem; }
.awards-mapband > .cta-btns { margin: 1.25rem auto 1.5rem; position: relative; z-index: 2; }
@media (max-width: 600px) {
  .saw-break-container > .chapter-awards { margin-bottom: -2.75rem; }
  .saw-break-container > .chapter-awards .why-awards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.5rem; align-items: stretch; }
  .saw-break-container > .saw-break { padding: 0; height: 10rem; min-height: 0; }
}
@media (max-width: 600px) {
  .awards-mapband > .who-hang { padding: 1.25rem 0.75rem 0.25rem; }
  .awards-mapband > .who-hang .hang-links__a.path-btn { font-size: 0.6rem !important; letter-spacing: 0.04em !important; padding-left: 0.25rem !important; padding-right: 0.25rem !important; white-space: nowrap; }
}

/* 2026-10-12 swap2: hero bg continues behind plaques, saw and trail; lower tag band on paper. */
.who-sky { position: relative; isolation: isolate; }
.who-sky > .who-topo__bg {
  -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 3.5rem), transparent 100%);
  mask-image: linear-gradient(to bottom, #000 calc(100% - 3.5rem), transparent 100%);
}
.who-sky > .who-topo { padding-bottom: 1rem; }
.saw-break-container { margin-top: 0; }
.saw-break-container > .why-trail { margin: 0.5rem 0 0; padding-bottom: 2.5rem; }
.chapter-who { margin-bottom: 1.5rem; }
.awards-mapband > .who-hang { padding-top: 0.5rem; }

/* 2026-10-12 swap3: plaque bottoms align to saw blade center. */
.saw-break-container { --saw-h: 12rem; }
.saw-break-container > .saw-break { height: var(--saw-h); }
.saw-break-container > .chapter-awards { margin-bottom: calc(var(--saw-h) / -2); }
@media (max-width: 600px) {
  .saw-break-container { --saw-h: 10rem; }
  .saw-break-container > .chapter-awards { margin-bottom: calc(var(--saw-h) / -2); }
}

/* 2026-10-12 swap4: Resume / LinkedIn / Contact Me as a second label-tape row under Journey / Awards / Zine. */
.who-hang { grid-template-rows: auto auto auto; }
.who-hang > .who-postit { grid-row: 1 / span 3; }
.hang-links__a--cta { grid-row: 3; margin-top: 0.5rem; }
.hang-links__a--4 { grid-column: 1; }
.hang-links__a--5 { grid-column: 2; }
.hang-links__a--6 { grid-column: 3; }
.hang-links .hang-links__a--4 { transform: rotate(.5deg); }
.hang-links .hang-links__a--5 { transform: rotate(-.7deg); }
.hang-links .hang-links__a--6 { transform: rotate(.4deg); }
@media (max-width: 600px) {
  .awards-mapband > .who-hang .hang-links__a.path-btn { font-size: 0.56rem !important; letter-spacing: 0.02em !important; padding-left: 0.15rem !important; padding-right: 0.15rem !important; width: 94%; }
}

/* 2026-10-12 swap5: white topo lines (same art as the old awards mapband) under the saw, behind the trail. */
.saw-break-container > .saw-lines {
  position: relative;
  z-index: 1;
  margin-top: calc(var(--saw-h) / -2);
  padding-top: calc(var(--saw-h) / 2);
}
.saw-lines__clip {
  position: absolute;
  inset: 0;
  pointer-events: none;
  clip-path: inset(0);
  -webkit-clip-path: inset(0);
  -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 3.5rem), transparent 100%);
  mask-image: linear-gradient(to bottom, #000 calc(100% - 3.5rem), transparent 100%);
}
.saw-lines__art {
  position: fixed;
  inset: 0;
  height: 100lvh;
  background: url("assets/backgrounds/topo-lines-white-single.png") 50% 100% / cover no-repeat;
  opacity: 0.6;
}
.saw-lines > .why-trail { position: relative; z-index: 2; margin: 0.5rem 0 0; padding-bottom: 2.5rem; }

/* 2026-10-12 swap6: under-saw band reuses the old .awards-mapband__bg look exactly
   (light-blue fill, fixed topo-lines-white-single.png 50% 100% / cover at 0.6, 22/78 soft fade). */
.saw-lines__clip {
  background: var(--light-blue);
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 22%, #000 48%, rgba(0,0,0,.55) 72%, transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0%, #000 22%, #000 48%, rgba(0,0,0,.55) 72%, transparent 100%);
}
.saw-lines__art {
  top: 0; left: 0; width: 100%; height: 100vh; height: 100lvh;
  background: url("assets/backgrounds/topo-lines-white-single.png") 50% 100% / cover no-repeat;
  opacity: 0.6;
}

/* 2026-10-12 swap7: plaques stay side by side on phone; contents scaled down. */
@media (max-width: 600px) {
  .saw-break-container > .chapter-awards { padding: 0 0.5rem; }
  .saw-break-container .award-item { padding: 0 0.3rem 0.6rem; min-height: 0; height: 100%; box-sizing: border-box; }
  .saw-break-container .award-icon,
  .saw-break-container .award-icon-shape { width: 4.25rem; height: 4.25rem; min-height: 4.25rem; }
  .saw-break-container .award-icon { margin: -2.1rem auto 0.25rem; }
  .saw-break-container .award-text h3 { font-size: 0.95rem; line-height: 1.15; }
  .saw-break-container .award-org,
  .saw-break-container .award-work { font-size: 0.62rem; line-height: 1.25; }
  .saw-break-container .award-role { font-size: 0.74rem; line-height: 1.2; }
  .saw-break-container .award-cat { font-size: 0.55rem; line-height: 1.2; }
  .saw-break-container .award-text p { overflow-wrap: anywhere; white-space: normal; }
}

/* 2026-10-12: under-saw band lets the moving hero background show through (one continuous blue); topo lines unchanged. */
.saw-lines__clip { background: transparent !important; }

/* 2026-10-12: longer, softer hero fade under the trail + more room before What. */
.who-sky > .who-topo__bg {
  -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 8rem), rgba(0,0,0,.6) calc(100% - 4.5rem), rgba(0,0,0,.2) calc(100% - 2rem), transparent 100%);
  mask-image: linear-gradient(to bottom, #000 calc(100% - 8rem), rgba(0,0,0,.6) calc(100% - 4.5rem), rgba(0,0,0,.2) calc(100% - 2rem), transparent 100%);
}
.saw-break-container > .why-trail { padding-bottom: 5rem; }
.chapter-who { margin-bottom: 3rem; }

/* 2026-10-12 dymo detail: crimped ends, gloss, raised-glyph highlight, start arrow, curl shadow. */
.hang-links .hang-links__a.path-btn{
  position:relative; overflow:visible;
  clip-path:polygon(0 0,100% 0,100% 18%,97.5% 30%,100% 42%,97.5% 54%,100% 66%,97.5% 78%,100% 100%,0 100%,0 82%,2.5% 70%,0 58%,2.5% 46%,0 34%,2.5% 22%,0 10%) !important;
  background:
    linear-gradient(180deg,rgba(255,255,255,.28) 0,rgba(255,255,255,.08) 18%,rgba(255,255,255,0) 40%,rgba(0,0,0,0) 70%,rgba(0,0,0,.22) 100%),
    linear-gradient(90deg,rgba(0,0,0,.12),rgba(0,0,0,0) 6%,rgba(0,0,0,0) 94%,rgba(0,0,0,.12)),
    repeating-linear-gradient(0deg,rgba(255,255,255,.035) 0 1px,transparent 1px 2px),
    repeating-linear-gradient(90deg,rgba(0,0,0,.05) 0 1px,transparent 1px 3px),
    #a8452a !important;
  text-shadow:0 1px 0 rgba(255,255,255,.35),0 -1px 0 rgba(0,0,0,.45),1px 0 0 rgba(0,0,0,.15),0 0 2px rgba(255,255,255,.35) !important;
  filter:drop-shadow(0 2px 2px rgba(0,0,0,.3)) drop-shadow(0 6px 6px rgba(0,0,0,.12));
}
.hang-links .hang-links__a.path-btn::before{
  content:"\25B8"; margin-right:.45em; font-size:.8em; opacity:.85;
}

/* 2026-10-12 swapjt: 45 tag joins Spatial / Hands-on in the What header; .who-hang holds only the buck post-it. */
.what-head .what-tags { grid-template-columns: repeat(3, clamp(4.6rem, calc(140px - 5vw), 7rem)); align-items: start; }
.what-tags > .hang-tag { width: 100%; height: auto; }
@media (max-width: 600px) {
  .what-head .what-tags { grid-template-columns: repeat(3, minmax(0, 3.3rem)); gap: 0.3rem; }
}
.who-hang {
  display: flex !important;
  justify-content: center;
  max-width: none;
  padding: 2rem 1rem 1rem !important;
  margin: 0 auto;
}
.who-hang > .who-postit {
  grid-row: auto;
  grid-column: auto;
  width: clamp(11rem, 24vw, 17rem) !important;
  max-width: 100%;
  justify-self: auto;
  aspect-ratio: 361 / 472;
  transform: rotate(2.5deg);
}

/* 2026-10-12: bigger What header tags to fill the header. */
.what-head .what-tags { grid-template-columns: repeat(3, clamp(6.75rem, calc(60px + 4vw), 8.5rem)); }
@media (max-width: 600px) {
  .what-head .what-tags { grid-template-columns: repeat(3, minmax(0, 4rem)); }
}

/* 2026-10-12: small mobile, What text stays in the left column; tags at right span it. */
@media (max-width: 600px) {
  .what-head { grid-template-columns: minmax(0, 1fr) auto; }
  .what-head .chapter-what__lead { grid-column: 1; }
  .what-head .what-tags { grid-column: 2; grid-row: 1 / span 3; align-self: center; }
}

/* 2026-10-12 cluster: buck post-it joins the Why marks as a collage, pinned behind the topo X
   (upper left, tilted); axe + wolf stay in front. Old .who-hang band removed. */
.why-postit--bare .why-postit__marks { position: relative; }
.why-postit__marks > .why-postit__buckcard {
  position: absolute;
  z-index: 0;
  left: -4%;
  top: -6%;
  width: 36% !important;
  max-width: none;
  margin: 0;
  aspect-ratio: 361 / 472;
  transform: rotate(-7deg);
  pointer-events: auto;
  cursor: pointer;
  filter: drop-shadow(0 8px 14px rgba(0, 0, 0, 0.2));
}
.why-postit__buckcard .who-postit__page { width: 100%; height: 100%; }
.why-postit__buckcard .who-postit__buck { width: 66%; top: 50%; }
.why-postit--bare .why-postit__x { position: relative; z-index: 1; pointer-events: auto; }
.why-postit--bare .why-postit__pair { position: relative; z-index: 2; }
.why-postit--bare .why-postit__axe, .why-postit--bare .why-postit__wolf { pointer-events: auto; position: relative; z-index: 2; }
.why-postit--bare .why-postit__x { margin-left: 10%; }
@media (min-width: 481px) and (max-width: 720px) {
  .why-postit__marks > .why-postit__buckcard { width: 22% !important; left: -2%; top: -14%; }
  .why-postit--bare .why-postit__x { margin-left: 0; }
}
@media (max-width: 480px) {
  .why-postit--bare { padding-top: 0.75rem; }
  .why-postit__marks > .why-postit__buckcard { left: 0; top: -2%; width: 34% !important; }
}

/* 2026-10-12 cluster2: roles swapped. Buck post-it is the big center piece (axe + wolf overlap
   its bottom); the topo X is the small tilted piece tucked behind upper left. */
.why-postit--bare .why-postit__marks > .why-postit__buckcard {
  position: relative;
  left: auto; top: auto;
  z-index: 1;
  width: 60% !important;
  margin: 0 0 0 10%;
  transform: rotate(2.5deg);
}
.why-postit--bare .why-postit__marks > .why-postit__x {
  position: absolute;
  z-index: 0;
  left: -2%;
  top: -4%;
  width: 36%;
  margin: 0;
  transform: rotate(-9deg);
}
@media (min-width: 481px) and (max-width: 720px) {
  .why-postit--bare .why-postit__marks > .why-postit__buckcard { width: 24% !important; margin: 0; }
  .why-postit--bare .why-postit__marks > .why-postit__x { width: 22%; left: -2%; top: -14%; }
}
@media (max-width: 480px) {
  .why-postit--bare .why-postit__marks > .why-postit__buckcard { width: 56% !important; margin-left: 12%; }
  .why-postit--bare .why-postit__marks > .why-postit__x { left: 0; top: -2%; width: 34%; }
}

/* 2026-10-12 cluster3: buck post-it is the large piece on the RIGHT; topo X, axe root and
   wolf shield stack in a column on the LEFT, touching and slightly overlapping. All sizes. */
.why-postit--bare .why-postit__marks {
  display: grid !important;
  grid-template-columns: 36% 1fr;
  grid-template-rows: auto auto auto;
  align-items: center;
  justify-items: center;
  gap: 0;
  position: relative;
  inset: auto;
}
.why-postit--bare .why-postit__pair { display: contents !important; }
.why-postit--bare .why-postit__marks > .why-postit__buckcard {
  position: relative;
  left: auto; top: auto;
  grid-column: 2;
  grid-row: 1 / span 3;
  z-index: 1;
  width: 92% !important;
  margin: 0 0 0 -6%;
  transform: rotate(2.5deg);
}
.why-postit--bare .why-postit__marks > .why-postit__x,
.why-postit--bare .why-postit__axe,
.why-postit--bare .why-postit__wolf {
  position: relative;
  left: auto; top: auto;
  grid-column: 1;
  width: 92% !important;
  margin: 0 !important;
  z-index: 2;
}
.why-postit--bare .why-postit__marks > .why-postit__x { grid-row: 1; transform: rotate(-7deg); margin-bottom: -10% !important; }
.why-postit--bare .why-postit__axe { grid-row: 2; transform: rotate(3deg) translateX(8%); z-index: 3; }
.why-postit--bare .why-postit__wolf { grid-row: 3; transform: rotate(-4deg); width: 80% !important; margin-top: -10% !important; z-index: 3; }
.why-postit--bare .why-postit__marks [data-tip],
.why-postit--bare .why-postit__marks > .why-postit__buckcard { cursor: default; pointer-events: auto; }
@media (min-width: 481px) and (max-width: 720px) {
  .why-postit--bare { max-width: 26rem; }
}
@media (max-width: 480px) {
  .why-postit--bare { max-width: 21rem; padding-top: 0.5rem; }
}

/* 2026-10-12 ctabar: finished bridge bar. Navy plate with white topo lines (under-saw asset),
   orange X lead mark, dotted trail along the bottom, layered offset edge like the plaques/tags.
   Résumé becomes an embossed label-tape button; Get in touch stays orange. */
.bridge-line {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-radius: 12px;
  padding: 1.35rem 1.6rem 1.75rem;
  gap: 0.9rem 1.6rem;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(0, 0, 0, 0.12)),
    var(--blue);
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    0 4px 0 #a8452a,
    0 7px 0 rgba(20, 34, 70, 0.35),
    0 14px 26px rgba(20, 34, 70, 0.28);
  margin-bottom: 0.6rem;
}
.bridge-line::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: url("assets/backgrounds/topo-lines-white-single.png") 50% 60% / cover no-repeat;
  opacity: 0.16;
  pointer-events: none;
}
.bridge-line::after {
  content: "";
  position: absolute;
  left: 1.5rem;
  right: 1.5rem;
  bottom: 0.6rem;
  height: 4px;
  z-index: -1;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.45) 1.6px, transparent 2px) 0 50% / 12px 4px repeat-x;
  pointer-events: none;
}
.bridge-line .bridge-line__caption {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
}
.bridge-line .bridge-line__caption::before {
  content: "";
  flex: 0 0 auto;
  width: 1.35rem;
  height: 1.35rem;
  background: url("assets/hero/x-mark.svg") center / contain no-repeat;
  transform: rotate(-8deg);
  filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.3));
}
.bridge-line .bridge-line__btns { align-items: center; gap: 0.8rem; }
.bridge-line .bridge-line__cta { cursor: pointer; }
/* Résumé: dark embossed label tape, same family as the Dymo hang links. */
.bridge-line .bridge-line__cta:not(.bridge-line__cta--primary) {
  border: 0;
  border-radius: 2px;
  padding: 0.5em 1.1em;
  font-family: "Courier New", Courier, monospace;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.95);
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.45), 0 1px 0 rgba(255, 255, 255, 0.35);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0) 30%, rgba(0, 0, 0, 0) 70%, rgba(0, 0, 0, 0.2)),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.03) 0 1px, transparent 1px 3px),
    #18233c;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), inset 0 -1px 0 rgba(0, 0, 0, 0.35), 0 2px 3px rgba(0, 0, 0, 0.35);
  transform: rotate(-1.2deg);
}
.bridge-line .bridge-line__cta:not(.bridge-line__cta--primary):hover { background-color: #22304f; transform: rotate(-1.2deg) translateY(-1px); }
.bridge-line .bridge-line__cta--primary {
  border-radius: 999px;
  border: 0;
  padding: 0.55em 1.35em;
  background: linear-gradient(180deg, #f6853d 0%, #F37223 55%, #d95f14 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), 0 3px 0 #a8452a, 0 6px 10px rgba(0, 0, 0, 0.25);
}
.bridge-line .bridge-line__cta--primary:hover {
  background: linear-gradient(180deg, #f89252 0%, #f47d33 55%, #e2681c 100%);
  transform: translateY(-1px);
}
@media (max-width: 600px) {
  .bridge-line { padding: 1.25rem 1.1rem 1.7rem; gap: 0.95rem; }
  .bridge-line .bridge-line__caption { flex-direction: column; gap: 0.45rem; font-size: 1rem; }
  .bridge-line .bridge-line__btns { flex-wrap: wrap; width: 100%; }
}

/* 2026-10-12 ctamove: bridge bar sits between Why and How. */
.site-main > .bridge-line { max-width: 920px; margin: 0.5rem auto 0; box-sizing: border-box; }
.site-main > .bridge-line + .chapter-how { padding-top: 3rem; }
@media (max-width: 600px) {
  .site-main > .bridge-line { margin-top: 0; }
  .site-main > .bridge-line + .chapter-how { padding-top: 2.5rem; }
}

/* 2026-10-12 ctablue: Résumé label tape in brand light blue #6d8ac6, white embossed text. */
.bridge-line .bridge-line__cta:not(.bridge-line__cta--primary) {
  color: #fff;
  text-shadow: 0 -1px 0 rgba(20, 40, 90, 0.55), 0 1px 0 rgba(255, 255, 255, 0.3);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0) 32%, rgba(0, 0, 0, 0) 68%, rgba(20, 40, 90, 0.22)),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.05) 0 1px, transparent 1px 3px),
    #6d8ac6;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), inset 0 -1px 0 rgba(20, 40, 90, 0.35), 0 2px 4px rgba(10, 20, 50, 0.4);
}
.bridge-line .bridge-line__cta:not(.bridge-line__cta--primary):hover { background-color: #7d98d0; }

/* 2026-10-12 tipgap: collage tooltips sit just above the visible artwork. The topo X's
   top center is the notch between its arms (about 20% down the image box). */
.why-postit--bare .why-postit__x { --tip-dy: 0.17; }

/* 2026-10-12 lbx: thumbnail lightbox becomes a project panel. Navy panel, copy left
   (title, label-tape lens tag, description), large primary image right with an internal
   slider and a support thumb strip. Outer arrows step between projects. */
.mason-lightbox__stage { pointer-events: none; width: min(94vw, 1180px); height: auto; max-height: 90vh; }
.lbx-panel {
  pointer-events: auto;
  display: grid;
  grid-template-columns: minmax(14rem, 0.36fr) 1fr;
  gap: 1.5rem;
  width: 100%;
  max-height: 90vh;
  box-sizing: border-box;
  padding: 1.6rem 1.6rem 1.4rem;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(0, 0, 0, 0.12)),
    #1c4e9e;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 14px;
  box-shadow: 0 5px 0 #a8452a, 0 9px 0 rgba(10, 20, 50, 0.4), 0 24px 60px rgba(0, 0, 0, 0.45);
  color: #fff;
  overflow: auto;
}
.lbx-copy { align-self: start; padding-top: 0.25rem; }
.lbx-tag {
  display: inline-block;
  margin: 0 0 0.85rem;
  padding: 0.3em 0.8em;
  font-family: "Courier New", Courier, monospace;
  font-weight: 700;
  font-size: 0.72rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #fff;
  background: linear-gradient(180deg, rgba(255,255,255,.14), rgba(0,0,0,.16)), #a8452a;
  border-radius: 2px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 2px 3px rgba(0,0,0,.3);
  transform: rotate(-1.5deg);
}
.lbx-tag:empty { display: none; }
.lbx-title {
  margin: 0 0 0.6rem;
  font-family: var(--museo, serif);
  font-size: clamp(1.4rem, 2.4vw, 2rem);
  line-height: 1.15;
  color: #fff;
}
.lbx-title::after {
  content: "";
  display: block;
  width: 2.5rem;
  height: 3px;
  margin-top: 0.6rem;
  background: #f37123;
  border-radius: 2px;
}
.lbx-desc { margin: 0; font-family: var(--museo-sans); font-size: 1rem; line-height: 1.5; color: rgba(255, 255, 255, 0.9); }
.lbx-desc.is-placeholder { font-style: italic; color: rgba(255, 255, 255, 0.6); }
.lbx-media { min-width: 0; display: flex; flex-direction: column; gap: 0.75rem; }
.lbx-main {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.28);
  border-radius: 8px;
  min-height: 16rem;
  height: min(62vh, 640px);
  overflow: hidden;
}
.lbx-main .mason-lightbox__img {
  max-width: 100%;
  max-height: 100%;
  box-shadow: none;
  background: transparent;
  border-radius: 4px;
  cursor: default;
}
.lbx-step {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 2.4rem;
  height: 2.4rem;
  border: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.92);
  color: #1c4e9e;
  font-size: 1.6rem;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.3);
}
.lbx-step:hover, .lbx-step:focus-visible { background: #f37123; color: #fff; }
.lbx-step--prev { left: 0.6rem; }
.lbx-step--next { right: 0.6rem; }
.lbx-step[hidden] { display: none; }
.lbx-count {
  position: absolute;
  right: 0.7rem;
  bottom: 0.7rem;
  padding: 0.25em 0.65em;
  font-family: "Courier New", Courier, monospace;
  font-weight: 700;
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  color: #fff;
  background: #6d8ac6;
  border-radius: 2px;
  box-shadow: 0 2px 3px rgba(0, 0, 0, 0.3);
}
.lbx-count:empty { display: none; }
.lbx-thumbs { display: flex; gap: 0.5rem; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 0.2rem; }
.lbx-thumbs:empty { display: none; }
.lbx-thumb {
  flex: 0 0 auto;
  width: 5.5rem;
  height: 3.7rem;
  padding: 0;
  border: 2px solid transparent;
  border-radius: 5px;
  overflow: hidden;
  background: rgba(0, 0, 0, 0.25);
  cursor: pointer;
  scroll-snap-align: start;
  opacity: 0.7;
}
.lbx-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lbx-thumb.is-on, .lbx-thumb:hover, .lbx-thumb:focus-visible { border-color: #f37123; opacity: 1; }
@media (max-width: 720px) {
  .mason-lightbox { padding: 0.75rem; align-items: flex-start; }
  .mason-lightbox__stage { width: 100%; max-height: none; margin-top: 3.25rem; }
  .lbx-panel { grid-template-columns: 1fr; gap: 1rem; padding: 1.15rem 1rem 1.1rem; max-height: calc(100vh - 4.5rem); max-height: calc(100dvh - 4.5rem); }
  .lbx-main { height: auto; min-height: 12rem; aspect-ratio: 4 / 3; }
  .lbx-title { font-size: 1.35rem; }
  .lbx-desc { font-size: 0.95rem; }
  .mason-lightbox__close { top: -2.9rem !important; right: 0 !important; }
  .mason-lightbox__prev, .mason-lightbox__next { top: -2.9rem !important; bottom: auto !important; transform: none !important; }
  .mason-lightbox__prev { left: 0 !important; }
  .mason-lightbox__next { left: 3rem !important; right: auto !important; }
}
@media (prefers-reduced-motion: reduce) { .lbx-thumbs { scroll-behavior: auto; } }
@media (min-width: 721px) {
  .mason-lightbox__stage { margin-top: 2.5rem; }
  .mason-lightbox__close { top: -3.1rem; right: 0; }
  .mason-lightbox__prev { left: -3.4rem; }
  .mason-lightbox__next { right: -3.4rem; }
}
@media (min-width: 721px) and (max-width: 1320px) {
  .mason-lightbox__stage { width: calc(100vw - 9rem); }
}
@media (max-width: 720px) { .mason-lightbox__stage { height: auto !important; } }

/* 2026-10-12 lbx2: placeholder image blocks (strip and primary). lbx3: extras row removed. */
.lbx-ph {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  background:
    url("assets/hero/x-mark.svg") 50% 42% / 22% auto no-repeat,
    url("assets/backgrounds/topo-lines-white-single.png") 50% 50% / cover no-repeat,
    linear-gradient(160deg, #dfe5f1, #c3cde2);
  border-radius: 4px;
  overflow: hidden;
}
.lbx-ph::before { content: ""; position: absolute; inset: 0; background: rgba(28, 78, 158, 0.08); }
.lbx-ph span {
  position: absolute;
  left: 50%;
  bottom: 14%;
  transform: translateX(-50%) rotate(-1.5deg);
  padding: 0.2em 0.6em;
  font-family: "Courier New", Courier, monospace;
  font-weight: 700;
  font-size: 0.72rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #fff;
  background: #6d8ac6;
  border-radius: 2px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
}
.lbx-main .lbx-ph--main { display: none; position: absolute; inset: 0; border-radius: 8px; }
.lbx-main.is-ph .lbx-ph--main { display: flex; }
.lbx-main.is-ph .mason-lightbox__img { display: none; }
.lbx-thumb .lbx-ph { border-radius: 0; background-size: 30% auto, cover, auto; }
.lbx-thumb .lbx-ph span { font-size: 0.5rem; bottom: 8%; letter-spacing: 0.12em; }
@media (max-width: 720px) {
  .lbx-panel { display: flex; flex-direction: column; gap: 0.9rem; }
  .lbx-copy { display: contents; }
  .lbx-tag { align-self: flex-start; margin: 0; }
  .lbx-title, .lbx-desc { margin: 0; }
  .lbx-media { order: 1; flex: 0 0 auto; }
  }

/* 2026-10-12 arrows: SVG chevrons, true centering for inner image arrows and outer project arrows. */
.lbx-chev { width: 55%; height: 55%; display: block; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.lbx-step,
.mason-lightbox__prev,
.mason-lightbox__next {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  padding: 0 !important;
  line-height: 1 !important;
  font-size: 0 !important;
}
.lbx-step { top: 50% !important; transform: translateY(-50%) !important; }
.lbx-step--prev { left: 0.75rem !important; right: auto !important; }
.lbx-step--next { right: 0.75rem !important; left: auto !important; }
.lbx-step:hover, .lbx-step:focus-visible { transform: translateY(-50%) !important; }
@media (min-width: 721px) {
  .mason-lightbox__prev, .mason-lightbox__next {
    position: fixed !important;
    top: 50% !important;
    bottom: auto !important;
    transform: translateY(-50%) !important;
  }
  .mason-lightbox__prev { left: max(0.75rem, calc(50vw - (min(94vw, 1180px) / 2) - 3.4rem)) !important; right: auto !important; }
  .mason-lightbox__next { right: max(0.75rem, calc(50vw - (min(94vw, 1180px) / 2) - 3.4rem)) !important; left: auto !important; }
}
@media (min-width: 721px) and (max-width: 1320px) {
  .mason-lightbox__prev { left: 0.9rem !important; }
  .mason-lightbox__next { right: 0.9rem !important; }
}

/* 2026-10-12 sidebar: desktop only. Support strip moves into the left column, anchored at
   its bottom as a 2x2 grid; primary image takes the full right column height. */
@media (min-width: 721px) {
  .lbx-panel { grid-template-rows: auto 1fr auto; row-gap: 1rem; }
  .lbx-media { display: contents; }
  .lbx-copy { grid-column: 1; grid-row: 1; }
  .lbx-main { grid-column: 2; grid-row: 1 / span 3; height: min(70vh, 700px); }
  .lbx-thumbs {
    grid-column: 1;
    grid-row: 3;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.55rem;
    overflow: visible;
    padding: 0;
  }
  .lbx-thumb { width: 100%; height: auto; aspect-ratio: 3 / 2; }
}

/* 2026-10-12 tagsm: small phones (<=480). Same arrangement, smaller What header tags so they clear the title/text. */
@media (max-width: 480px) {
  .what-head .what-tags { grid-template-columns: repeat(3, clamp(2.1rem, 9vw, 2.9rem)); gap: 0.2rem; }
}

/* 2026-10-14 axelink: axe root links to I, Pencil; pointer + slight eased tilt */
.why-postit__axelink{display:contents;cursor:pointer}
.why-postit__axelink img.why-postit__axe[data-tip]{cursor:pointer !important;rotate:0deg;transition:rotate .6s cubic-bezier(.25,.1,.25,1)}
.why-postit__axelink:hover .why-postit__axe,.why-postit__axelink:focus-visible .why-postit__axe{rotate:-4deg}
@media (prefers-reduced-motion:reduce){.why-postit__axelink .why-postit__axe{transition:none}}
/* 2026-10-14 ctatrail: CTA bar uses the brand trail SVG instead of plain dots */
.bridge-line::after {
  height: 14px;
  bottom: 0.4rem;
  background: rgba(255, 255, 255, 0.55);
  -webkit-mask: url("assets/hero/trail.svg") 0 50% / auto 100% repeat-x;
  mask: url("assets/hero/trail.svg") 0 50% / auto 100% repeat-x;
}
/* 2026-10-14 ctarope: CTA bar texture uses Ryan's rope pattern */
.bridge-line::before {
  background: url("assets/backgrounds/rope-saw-pattern.png") 50% 50% / 141px auto repeat;
  opacity: 0.32;
  border-radius: inherit;
}

/* 2026-10-14 wooddiv: wood texture divider between When and the footer */
.wood-divider{display:block;width:100%;height:25px;background:url("assets/divider/wood-divider.png") center / auto 100% repeat-x;box-shadow:0 2px 6px rgba(0,0,0,.45),0 -1px 0 rgba(0,0,0,.35);position:relative;z-index:2}
/* 2026-10-14 wooddepth: plank depth via overlays */
.wood-divider{height:30px;
  background:
    linear-gradient(180deg, rgba(255,235,210,.28) 0, rgba(255,235,210,0) 3px, rgba(0,0,0,0) 55%, rgba(0,0,0,.38) 100%),
    url("assets/divider/wood-divider.png") center / auto 100% repeat-x;
  box-shadow:
    inset 0 1px 0 rgba(255,240,220,.35),
    inset 0 -2px 0 rgba(40,18,6,.55),
    0 -4px 10px rgba(0,0,0,.55),
    0 8px 16px rgba(0,0,0,.7),
    0 2px 3px rgba(0,0,0,.6);
  filter:saturate(1.08) contrast(1.06);
}
.wood-divider::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(90deg, rgba(0,0,0,.25), transparent 12%, transparent 88%, rgba(0,0,0,.25));}
/* 2026-10-14 ctaseam: seamless twill texture behind the rope pattern */
.bridge-line::before {
  background:
    url("assets/backgrounds/rope-saw-pattern.png") 50% 50% / 141px auto repeat,
    url("assets/brands/seamlesstexture-transparent.png") 0 0 / 300px auto repeat;
}

/* 2026-10-14 footnoline: drop the divide line above the footer X */
.site-footer .footer-content { border-top: 0; }

/* 2026-10-14 teaserx: white brand X on the right when the card fills orange */
.who-teasers__list li { position: relative; }
.who-teasers__list li::after {
  content: ""; position: absolute; right: 1.1rem; top: 50%;
  width: 1.4em; height: 1.4em;
  background: #fff;
  -webkit-mask: url("data:image/svg+xml,%3Csvg%20version%3D%221.1%22%20id%3D%22Layer_1%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20xmlns%3Axlink%3D%22http%3A//www.w3.org/1999/xlink%22%20x%3D%220px%22%20y%3D%220px%22%20viewBox%3D%220%200%2018.3%2018.3%22%20style%3D%22enable-background%3Anew%200%200%2018.3%2018.3%3B%22%20xml%3Aspace%3D%22preserve%22%3E%20%3Cstyle%20type%3D%22text/css%22%3E%20.st0%7Bfill%3A%23fff%3B%7D%20%3C/style%3E%20%3Cpath%20class%3D%22st0%22%20d%3D%22M18%2C5.6l-2.8-3.8c-0.2-0.3-0.7-0.4-1-0.2l-3.8%2C2.8c-0.3%2C0.2-0.8%2C0.2-1-0.2L6.6%2C0.4C6.4%2C0.1%2C6%2C0%2C5.7%2C0.2L1.8%2C2.9%20C1.5%2C3.2%2C1.4%2C3.6%2C1.7%2C4l2.8%2C3.8c0.2%2C0.3%2C0.2%2C0.8-0.2%2C1l-3.8%2C2.8c-0.3%2C0.2-0.4%2C0.7-0.2%2C1L3%2C16.5c0.2%2C0.3%2C0.7%2C0.4%2C1%2C0.2l3.8-2.8%20c0.3-0.2%2C0.8-0.2%2C1%2C0.2l2.8%2C3.8c0.2%2C0.3%2C0.7%2C0.4%2C1%2C0.2l3.8-2.8c0.3-0.2%2C0.4-0.7%2C0.2-1l-2.8-3.8c-0.2-0.3-0.2-0.8%2C0.2-1l3.8-3%20C18.2%2C6.4%2C18.3%2C5.9%2C18%2C5.6z%22/%3E%20%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg%20version%3D%221.1%22%20id%3D%22Layer_1%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20xmlns%3Axlink%3D%22http%3A//www.w3.org/1999/xlink%22%20x%3D%220px%22%20y%3D%220px%22%20viewBox%3D%220%200%2018.3%2018.3%22%20style%3D%22enable-background%3Anew%200%200%2018.3%2018.3%3B%22%20xml%3Aspace%3D%22preserve%22%3E%20%3Cstyle%20type%3D%22text/css%22%3E%20.st0%7Bfill%3A%23fff%3B%7D%20%3C/style%3E%20%3Cpath%20class%3D%22st0%22%20d%3D%22M18%2C5.6l-2.8-3.8c-0.2-0.3-0.7-0.4-1-0.2l-3.8%2C2.8c-0.3%2C0.2-0.8%2C0.2-1-0.2L6.6%2C0.4C6.4%2C0.1%2C6%2C0%2C5.7%2C0.2L1.8%2C2.9%20C1.5%2C3.2%2C1.4%2C3.6%2C1.7%2C4l2.8%2C3.8c0.2%2C0.3%2C0.2%2C0.8-0.2%2C1l-3.8%2C2.8c-0.3%2C0.2-0.4%2C0.7-0.2%2C1L3%2C16.5c0.2%2C0.3%2C0.7%2C0.4%2C1%2C0.2l3.8-2.8%20c0.3-0.2%2C0.8-0.2%2C1%2C0.2l2.8%2C3.8c0.2%2C0.3%2C0.7%2C0.4%2C1%2C0.2l3.8-2.8c0.3-0.2%2C0.4-0.7%2C0.2-1l-2.8-3.8c-0.2-0.3-0.2-0.8%2C0.2-1l3.8-3%20C18.2%2C6.4%2C18.3%2C5.9%2C18%2C5.6z%22/%3E%20%3C/svg%3E") center / contain no-repeat;
  opacity: 0; transform: translateY(-50%) scale(0.6) rotate(-20deg);
  transition: opacity 0.3s ease 0.15s, transform 0.4s cubic-bezier(.22,.7,.2,1) 0.15s;
  pointer-events: none;
}
@media (hover: hover) {
  .who-teasers__list li:hover::after { opacity: 1; transform: translateY(-50%) scale(1) rotate(0); }
}
.who-teasers__list li:focus-visible::after,
.who-teasers__list li.is-on::after { opacity: 1; transform: translateY(-50%) scale(1) rotate(0); }

/* 2026-10-14 ropefixed: rope pattern stays fixed to the viewport while the bar scrolls (JS sets --rope-x/--rope-y; works on iOS too) */
.bridge-line::before {
  background-position: var(--rope-x, 50%) var(--rope-y, 50%), 0 0;
}

/* 2026-10-14 ctamobilex: mobile -x- mark (trail dots either side of the X) + trail drifts sideways on scroll */
.bridge-line::after {
  -webkit-mask-position: var(--trail-x, 0px) 50%;
          mask-position: var(--trail-x, 0px) 50%;
}
@media (max-width: 720px) {
  .bridge-line .bridge-line__caption::before {
    width: 7.5rem;
    height: 1.6rem;
    transform: none;
    background:
      url("assets/hero/x-mark.svg") center / 1.5rem 1.5rem no-repeat,
      radial-gradient(circle, rgba(255,255,255,0.7) 1.6px, transparent 2.2px) left center / 9px 9px repeat-x;
    -webkit-mask: linear-gradient(90deg, #000 0 38%, transparent 38% 62%, #000 62% 100%), linear-gradient(#000,#000) center / 1.5rem 100% no-repeat;
            mask: linear-gradient(90deg, #000 0 38%, transparent 38% 62%, #000 62% 100%), linear-gradient(#000,#000) center / 1.5rem 100% no-repeat;
  }
}

/* 2026-10-14 ddd: intro verbs in brand colors */
.who-about__p .w-design { color: var(--orange, #f37123); }
.who-about__p .w-develop { color: #6d8ac6; }
.who-about__p .w-display { color: #1c4e9e; }

/* 2026-10-14 tag45row: small phones, 45 tag drops to a second row under the S tag so tags can show larger */
@media (max-width: 480px) {
  .what-head .what-tags { grid-template-columns: repeat(2, clamp(3.4rem, 15vw, 4.4rem)); gap: 0.35rem 0.4rem; }
  .what-head .what-tags > .hang-tag:nth-child(3) { grid-column: 2; }
}

/* 2026-10-14 whatlead: small phones, caption runs under the first tag; 45 tag stays under S */
@media (max-width: 480px) {
  .what-head { grid-template-columns: minmax(0, 1fr) clamp(3.4rem, 15vw, 4.4rem) clamp(3.4rem, 15vw, 4.4rem); column-gap: 0.4rem; }
  .what-head .what-tags { display: contents; }
  .what-head .what-tags > .hang-tag:nth-child(1) { grid-column: 2; grid-row: 1 / span 2; align-self: center; }
  .what-head .what-tags > .hang-tag:nth-child(2) { grid-column: 3; grid-row: 1 / span 2; align-self: center; }
  .what-head .what-tags > .hang-tag:nth-child(3) { grid-column: 3; grid-row: 3; align-self: start; margin-top: 0.35rem; }
  .what-head .chapter-what__lead { grid-column: 1 / span 2; grid-row: 3; }
}

/* 2026-10-14 ctacenter: rope pattern centered to the frame (no longer scroll-fixed); both trails removed */
.bridge-line::before { background-position: 50% 50%, 0 0 !important; }
.bridge-line::after { display: none !important; }
@media (max-width: 720px) {
  .bridge-line .bridge-line__caption::before {
    width: 1.5rem; height: 1.5rem;
    background: url("assets/hero/x-mark.svg") center / contain no-repeat;
    -webkit-mask: none; mask: none;
  }
}

/* 2026-10-14 whyfx: axe unlinked (keeps tilt), wolf gets matching tilt, topo X presses in, post-it paper sway */
.why-postit__axe, .why-postit--bare .why-postit__wolf { rotate: 0deg; transition: rotate .6s cubic-bezier(.25,.1,.25,1); }
.why-postit__axe:hover, .why-postit__axe.is-on { rotate: -4deg; }
.why-postit--bare .why-postit__wolf:hover, .why-postit--bare .why-postit__wolf.is-on { rotate: 4deg; }
.why-postit--bare .why-postit__marks > .why-postit__x { scale: 1; transition: scale .35s cubic-bezier(.25,.1,.25,1), filter .35s ease; }
.why-postit--bare .why-postit__marks > .why-postit__x:hover,
.why-postit--bare .why-postit__marks > .why-postit__x.is-on {
  scale: .96;
  filter: brightness(.9) drop-shadow(0 -1px 0 rgba(0,0,0,.35)) drop-shadow(0 1px 0 rgba(255,255,255,.6));
}
.why-postit__marks { perspective: 900px; }
.why-postit--bare .why-postit__marks > .why-postit__buckcard { transform-origin: 50% 0; animation: postit-sway 6s ease-in-out infinite; }
@keyframes postit-sway {
  0%, 100% { rotate: x 0deg; }
  50% { rotate: x 8deg; }
}
@media (prefers-reduced-motion: reduce) {
  .why-postit--bare .why-postit__marks > .why-postit__buckcard { animation: none; }
  .why-postit__axe, .why-postit--bare .why-postit__wolf, .why-postit--bare .why-postit__marks > .why-postit__x { transition: none; }
}

/* postit scroll-up lift */
@property --postit-lift { syntax: '<angle>'; inherits: true; initial-value: 0deg; }
.why-postit--bare .why-postit__marks > .why-postit__buckcard { transition: --postit-lift .8s cubic-bezier(.25,.1,.25,1); animation-name: postit-sway2; }
.why-postit--bare .why-postit__marks > .why-postit__buckcard.is-lift { --postit-lift: -14deg; }
@keyframes postit-sway2 { 0%,100% { rotate: x var(--postit-lift); } 50% { rotate: x calc(var(--postit-lift) + 8deg); } }
@media (prefers-reduced-motion: reduce) { .why-postit--bare .why-postit__marks > .why-postit__buckcard { animation: none; transition: none; } }

/* postit scroll-direction sway, flat at rest */
.why-postit--bare .why-postit__marks > .why-postit__buckcard { animation: none !important; rotate: x 0deg; transition: rotate .9s cubic-bezier(.25,.1,.25,1); }
.why-postit--bare .why-postit__marks > .why-postit__buckcard.is-down { rotate: x -10deg; }
.why-postit--bare .why-postit__marks > .why-postit__buckcard.is-up { rotate: x 10deg; }
@media (prefers-reduced-motion: reduce) { .why-postit--bare .why-postit__marks > .why-postit__buckcard { rotate: none !important; transition: none; } }

/* award saw cogs turn on scroll */
.award-icon { position: relative; background: none !important; }
.award-icon::before { content: ""; position: absolute; inset: 0; background: center / contain no-repeat url("assets/awards/45saw-circle.svg"); rotate: var(--cog, 0deg); z-index: 0; pointer-events: none; }
.award-icon > .award-icon-shape { position: relative; z-index: 1; }
@media (prefers-reduced-motion: reduce) { .award-icon::before { rotate: none; } }

/* map trail draws in to the X */
.who-about__map .map-trail { display: block; width: 100%; height: auto; max-width: 360px; }
.map-trail .mt-dash { opacity: 0; transition: opacity .25s ease; transition-delay: calc(var(--i) * 110ms); }
.map-trail .mt-x { opacity: 0; transform-box: fill-box; transform-origin: 50% 50%; scale: .4; transition: opacity .3s ease, scale .5s cubic-bezier(.34,1.56,.64,1); transition-delay: calc(var(--n) * 110ms + 80ms); }
.map-trail.is-drawn .mt-dash, .map-trail.is-drawn .mt-x { opacity: 1; scale: 1; }
.map-trail:not(.is-drawn) .mt-dash, .map-trail:not(.is-drawn) .mt-x { transition-delay: 0s; }
@media (prefers-reduced-motion: reduce) { .map-trail .mt-dash, .map-trail .mt-x { opacity: 1; scale: 1; transition: none; } }
.who-about__map .map-trail { max-width: 15.5rem; filter: drop-shadow(0 4px 12px rgba(34,34,34,.3)); }
@media (max-width: 720px) { .who-about__map .map-trail { max-width: 12.5rem; } }
.who-about__map .map-trail { cursor: pointer; -webkit-tap-highlight-color: transparent; }
.map-trail:not(.is-drawn) .mt-dash, .map-trail:not(.is-drawn) .mt-x { transition-duration: .35s; }

/* act icons gain depth when card is selected */
.act-card__icon { transition: transform .5s cubic-bezier(.22,1,.36,1), filter .5s ease; }
.act-card:hover .act-card__icon, .act-card:focus-within .act-card__icon, .act-card:active .act-card__icon {
  transform: translate(-2px,-3px) scale(1.04);
  filter: drop-shadow(1px 1px 0 rgba(28,78,158,.35)) drop-shadow(2px 2px 0 rgba(28,78,158,.22)) drop-shadow(3px 3px 0 rgba(28,78,158,.12)) drop-shadow(4px 7px 6px rgba(0,0,0,.22));
}
@media (prefers-reduced-motion: reduce) { .act-card__icon { transition: none; } }

/* open study: translucent shade behind header, edge to edge */
@media (max-width: 599px) {
  .study-row { overflow: hidden; }
  .study-row__head { isolation: isolate; }
  .study-row__head::before { content: ""; position: absolute; left: -3rem; right: -3rem; top: -3rem; bottom: -0.65rem; z-index: -1; background: rgba(243,114,35,.12); border-bottom: 1px solid rgba(243,114,35,.25); opacity: 0; transition: opacity .35s ease; pointer-events: none; }
  .study-row.is-open .study-row__head::before { opacity: 1; }
}
@media (max-width: 599px) {
  .study-row__head::before { background: linear-gradient(to bottom, rgba(109,138,198,.2) 0%, rgba(109,138,198,.2) 55%, rgba(109,138,198,0) 100%); border-bottom: 0; bottom: -1.4rem; }
}
@media (max-width: 599px) {
  .study-row__head { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Ccircle cx='20' cy='20' r='18' fill='none' stroke='%23F37223' stroke-width='2' stroke-dasharray='4 3.5' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right -0.05rem center / 2rem 2rem; }
}
@media (max-width: 599px) {
  .study-row__head::after { right: 0.62rem; margin-top: -0.55rem; }
  .study-row.is-open .study-row__head::after { margin-top: -0.12rem; }
}
@media (max-width: 599px) { .study-row:not(.is-open) .study-row__head::after { margin-top: -0.44rem; } }
/* map shadow on wrapper so Safari doesn't box it per animated path */
.who-about__map .map-trail { filter: none !important; }
.map-trail-wrap { display: block; width: 100%; max-width: 15.5rem; filter: drop-shadow(0 4px 12px rgba(34,34,34,.3)); }
.map-trail-wrap .map-trail { max-width: 100%; }
.map-trail .mt-dash, .map-trail .mt-x { will-change: auto; }
@media (max-width: 720px) { .map-trail-wrap { max-width: 12.5rem; } }
.map-trail-wrap, .who-about__map .map-trail { filter: none !important; }

/* 2026-10-15: the Awards "because" band wipes in gold like the award plaques, with dark type. */
.because-lines li:not(.because-lines__saw):nth-child(2) {
  background-image: linear-gradient(to right, #cb9b51 0%, #f6e27a 20%, #f6f2c0 50%, #f6e27a 70%, #cb9b51 100%);
}
@media (hover: hover) {
  .because-lines li:not(.because-lines__saw):nth-child(2):hover { color: #1a1a1a; }
}
.because-lines li:not(.because-lines__saw):nth-child(2):focus-visible,
.because-lines li:not(.because-lines__saw):nth-child(2).is-on { color: #1a1a1a; }
.because-lines li:not(.because-lines__saw):nth-child(2):is(:hover,:focus-visible,.is-on) {
  box-shadow: 0 4px 8px rgba(0,0,0,.4);
}

/* 2026-10-15 whatstack: small phones, three tags across above the title, then one column of text */
@media (max-width: 480px) {
  .what-head { grid-template-columns: minmax(0, 1fr); column-gap: 0; row-gap: 0.4rem; }
  .what-head .what-tags {
    display: grid; grid-column: 1; grid-row: 1; align-self: start; margin: 0 0 0.5rem;
    grid-template-columns: repeat(3, clamp(3.6rem, 21vw, 5.2rem)); gap: 0.6rem; justify-content: start;
  }
  .what-head .what-tags > .hang-tag:nth-child(n) { grid-column: auto; grid-row: auto; align-self: start; margin-top: 0; }
  .what-head .chapter-what__tag { grid-column: 1; grid-row: 2; }
  .what-head #what-title { grid-column: 1; grid-row: 3; }
  .what-head .chapter-what__lead { grid-column: 1; grid-row: 4; }
}

/* 2026-10-15 whatstack2: tighter top, centered tags with more space, room below the text */
@media (max-width: 480px) {
  .what-head { margin-top: -1.6rem; }
  .what-head .what-tags {
    justify-content: center; justify-items: center; margin: 0 0 0.6rem;
    grid-template-columns: repeat(3, clamp(3.6rem, 21vw, 5.2rem)); gap: 1.1rem;
  }
  .what-head .chapter-what__lead { margin-bottom: 1.4rem; }
}

/* 2026-10-15 howband2: the light-blue topo band lives behind the How cards (about three quarters up the
   cards) and continues behind a translucent brand marquee, so the marquee shows a diffused view of it. */
.chapter-how { position: relative; z-index: 1; }
.chapter-where { position: relative; isolation: isolate; z-index: 0; }
.where-lines__clip {
  position: absolute;
  z-index: -1;
  pointer-events: none;
  top: -14rem;
  bottom: 0;
  left: calc(50% - 50vw);
  width: 100vw;
  clip-path: inset(0);
  -webkit-clip-path: inset(0);
  background: linear-gradient(rgba(109, 138, 198, 0.35), rgba(109, 138, 198, 0.35)), var(--light-blue, #6d8ac6);
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,.4) 30%, #000 70%);
  mask-image: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,.4) 30%, #000 70%);
}
.where-lines__art {
  position: fixed;
  top: 0; left: 0; width: 100%;
  height: 100vh; height: 100lvh;
  background: url("assets/backgrounds/topo-lines-white-single.png") 50% 100% / cover no-repeat;
  opacity: 0.6;
}
@media (max-width: 720px) { .where-lines__clip { top: -24rem; } }

/* Marquee: translucent glass over the band, soft inset edges. */
.brands-marquee__viewport {
  background: rgba(255, 255, 255, 0.16);
  -webkit-backdrop-filter: blur(7px);
  backdrop-filter: blur(7px);
  box-shadow: inset 1rem 0 1rem rgba(28, 78, 158, 0.28), inset -1rem 0 1rem rgba(28, 78, 158, 0.28);
}
/* Black and white logos share one blue hue; the active brand still goes full color. */
.brand-logo { filter: grayscale(1) sepia(1) hue-rotate(178deg) saturate(2.4) brightness(0.8); }
.brand-logo.is-highlighted { filter: grayscale(0) drop-shadow(0 4px 4px rgba(28, 78, 158, 0.4)); }

/* 2026-10-15 wheretape: Where title as embossed label-maker tape; marquee top edge feathered. */
.chapter-where__tag {
  display: table;
  margin: 0 auto 1rem;
  padding: 0.38rem 0.8rem 0.38rem 1rem;
  border-radius: 2px;
  font-family: "Courier New", Courier, monospace;
  font-weight: 700;
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(255,255,255,.94);
  text-shadow: 0 -1px 0 rgba(0,0,0,.35), 0 1px 0 rgba(255,255,255,.45), 0 0 1px rgba(255,255,255,.6);
  background:
    linear-gradient(180deg, rgba(255,255,255,.14), rgba(255,255,255,0) 30%, rgba(0,0,0,0) 70%, rgba(0,0,0,.16)),
    repeating-linear-gradient(90deg, rgba(0,0,0,.035) 0 1px, transparent 1px 3px),
    #a8452a;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.18), inset 0 -1px 0 rgba(0,0,0,.25), 0 2px 3px rgba(0,0,0,.28);
  transform: rotate(-0.6deg);
}
.brands-marquee__viewport {
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,.6) 14%, #000 32%);
  mask-image: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,.6) 14%, #000 32%);
}

/* 2026-10-15 marqueefix: fixed marquee height so a taller logo scrolling in never resizes the band. */
.brands-marquee__viewport { height: 8.5rem; min-height: 8.5rem; max-height: 8.5rem; box-sizing: border-box; align-items: center; }
.brands-marquee__track { height: 100%; align-items: center; }
.brand-item { max-height: 100%; }
.brand-logo--short { max-height: 4.6rem; }
.brand-logo--long { height: 3.2em; max-height: 4.6rem; }
.brand-logo { max-width: 14rem; object-fit: contain; }

/* 2026-10-15 steelbecause: the first "Because" line wipes in brushed steel (second stays gold), dark type. */
.because-lines li:not(.because-lines__saw):nth-child(1) {
  background-image: linear-gradient(to right, #7f8b95 0%, #c9d1d8 20%, #f1f4f6 50%, #c9d1d8 70%, #7f8b95 100%);
}
@media (hover: hover) {
  .because-lines li:not(.because-lines__saw):nth-child(1):hover { color: #1f2a33; }
}
.because-lines li:not(.because-lines__saw):nth-child(1):focus-visible,
.because-lines li:not(.because-lines__saw):nth-child(1).is-on { color: #1f2a33; }
.because-lines li:not(.because-lines__saw):nth-child(1):is(:hover,:focus-visible,.is-on) { box-shadow: 0 4px 8px rgba(0,0,0,.35); }

/* 2026-10-15 marqlight: lighter frosted glass with white topo lines so the brands read better. */
.brands-marquee__viewport {
  background:
    url("assets/backgrounds/topo-lines-white-single.png") 50% 50% / cover no-repeat,
    rgba(255, 255, 255, 0.34);
  -webkit-backdrop-filter: blur(9px);
  backdrop-filter: blur(9px);
  box-shadow: inset 1rem 0 1rem rgba(28, 78, 158, 0.18), inset -1rem 0 1rem rgba(28, 78, 158, 0.18);
}

/* 2026-10-15 marqnolines: topo lines removed from the marquee glass; lighter tint kept. */
.brands-marquee__viewport { background: rgba(255, 255, 255, 0.34); }

/* 2026-10-15 tiptape: every tooltip is blue embossed label tape (brand light blue), caret kept at the bottom. */
.tip-bubble {
  border-radius: 2px;
  padding: 0.38rem 0.85rem;
  font-family: "Courier New", Courier, monospace;
  font-weight: 700;
  font-size: 0.8rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.96);
  text-shadow: 0 -1px 0 rgba(20, 40, 90, 0.55), 0 1px 0 rgba(255, 255, 255, 0.3);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0) 32%, rgba(0, 0, 0, 0) 68%, rgba(20, 40, 90, 0.22)),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.05) 0 1px, transparent 1px 3px),
    #6d8ac6;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), inset 0 -1px 0 rgba(20, 40, 90, 0.35), 0 3px 6px rgba(10, 20, 50, 0.35);
}
.tip-bubble::after { border-top-color: #6d8ac6; }

/* 2026-10-15 tipnavy: tooltip label tape in dark brand navy. */
.tip-bubble {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0) 32%, rgba(0, 0, 0, 0) 68%, rgba(0, 0, 0, 0.25)),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.05) 0 1px, transparent 1px 3px),
    #1c4e9e;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.5), 0 1px 0 rgba(255, 255, 255, 0.25);
}
.tip-bubble::after { border-top-color: #1c4e9e; }

/* 2026-10-15 tapetags: all section tags (Who, What, Why, How, Where, When) as embossed orange label tape. */
.chapter-who__tag, .chapter-what__tag, .chapter-why__tag, .chapter-how__tag, .chapter-when__tag {
  display: block;
  width: fit-content;
  padding: 0.38rem 0.8rem 0.38rem 1rem;
  border-radius: 2px;
  font-family: "Courier New", Courier, monospace;
  font-weight: 700;
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(255,255,255,.94);
  text-shadow: 0 -1px 0 rgba(0,0,0,.35), 0 1px 0 rgba(255,255,255,.45), 0 0 1px rgba(255,255,255,.6);
  background:
    linear-gradient(180deg, rgba(255,255,255,.14), rgba(255,255,255,0) 30%, rgba(0,0,0,0) 70%, rgba(0,0,0,.16)),
    repeating-linear-gradient(90deg, rgba(0,0,0,.035) 0 1px, transparent 1px 3px),
    #a8452a;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.18), inset 0 -1px 0 rgba(0,0,0,.25), 0 2px 3px rgba(0,0,0,.28);
  transform: rotate(-0.6deg);
}
.chapter-how__tag, .chapter-when__tag { margin-left: auto; margin-right: auto; margin-bottom: 0.9rem; }
.chapter-who__tag, .chapter-what__tag, .chapter-why__tag { margin-bottom: 0.7rem; }

/* 2026-10-15 tapetilt: each section tag gets its own small tilt. */
.chapter-who__tag { transform: rotate(-1.1deg); }
.chapter-what__tag { transform: rotate(0.7deg); }
.chapter-why__tag { transform: rotate(-0.4deg); }
.chapter-how__tag { transform: rotate(1.2deg); }
.chapter-where__tag { transform: rotate(-0.9deg); }
.chapter-when__tag { transform: rotate(0.5deg); }

/* 2026-10-15 whotape: the Who tape sits on the blue, above the paper card. */
.who-topo > .chapter-who__tag {
  align-self: flex-start;
  margin: 0 0 0.9rem max(0.4rem, calc((100% - 920px) / 2 + 0.4rem));
  position: relative;
  z-index: 3;
}

/* 2026-10-15 wherevideo: the hero sky video loops faintly under the How and marquee band, tying top to bottom. */
.where-lines__video {
  position: fixed;
  top: 0; left: 0; width: 100%;
  height: 100vh; height: 100lvh;
  object-fit: cover; object-position: center bottom;
  opacity: 0.6;
  pointer-events: none;
}
.where-lines__art { opacity: 0.6; }
@media (prefers-reduced-motion: reduce) { .where-lines__video { display: none; } }

/* 2026-10-16 postitgap: small space between the buck post-it and the stack beside it */
.why-postit--bare .why-postit__marks > .why-postit__buckcard { margin-left: 4% !important; }

/* 2026-10-16 postitbig: tighter gap, larger buck post-it */
.why-postit--bare .why-postit__marks > .why-postit__buckcard { margin-left: 0% !important; width: 108% !important; }

/* 2026-10-16 axeshadow: drop shadow on the axe root icon */
.why-postit__axe { filter: drop-shadow(0 6px 8px rgba(0,0,0,.35)); }

/* 2026-10-16 postitsmall: buck post-it smaller */
.why-postit--bare .why-postit__marks > .why-postit__buckcard { width: 92% !important; }