/* ==========================================================================
   Design tokens — from specs/homepage-spec.md
   ========================================================================== */

:root {
  --cream: #F4F1E9;
  --cream-dark: #EDE8DF;
  --violet: #4B2FE0;
  --near-black: #0F0E0D;
  --text-primary: #14120E;
  --text-muted: rgba(20, 18, 14, 0.5);
  --cream-muted: rgba(244, 241, 233, 0.7);

  --font-heading: 'Sora', sans-serif;
  --font-body: 'Manrope', sans-serif;

  --rule-dark: 1px solid rgba(20, 18,14, 0.15);
  --rule-light: 1px solid rgba(244, 241, 233, 0.2);

  /* Form validation only — not part of the brand palette proper, kept
     muted/desaturated so it doesn't compete with the violet accent. */
  --form-error: #B3261E;

  --container-max: 1400px;
  --container-pad: 64px;
  --container-pad-mobile: 24px;
}

/* ==========================================================================
   Reset
   ========================================================================== */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--cream);
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, p, figure {
  margin: 0;
}

a {
  color: inherit;
}

img {
  max-width: 100%;
  display: block;
}

h1, h2, h3, h4 {
  font-family: var(--font-heading);
}

/* ==========================================================================
   Layout
   ========================================================================== */

.container {
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}

@media (max-width: 640px) {
  .container {
    padding-inline: var(--container-pad-mobile);
  }
}

/* ==========================================================================
   Visual identity system (spec: "three repeating marks", used across sections)
   ========================================================================== */

.eyebrow-rule {
  width: 40px;
  height: 1px;
  background: var(--violet);
  margin-bottom: 8px;
}

.eyebrow-rule--cream {
  background: var(--cream);
}

.eyebrow {
  display: inline-block;
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--violet);
}

.eyebrow--cream {
  color: var(--cream);
}

.hero__line--highlight {
  position: relative;
  display: inline-block;
  color: #fff;
  padding: 0 0.15em;
  white-space: nowrap;
}

.hero__line-highlight-bg {
  position: absolute;
  inset: 0;
  background: var(--violet);
  transform-origin: left center;
  transform: scaleX(1);
  z-index: 0;
}

.hero__line-highlight-text {
  position: relative;
  z-index: 1;
}

/* ==========================================================================
   Nav (Section 1)
   ========================================================================== */

.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  background: transparent;
}

.nav__container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-block: 20px;
}

.nav__logo {
  width: 36px;
  height: 36px;
  border-radius: 4px;
  background: var(--violet);
  color: #fff;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  flex-shrink: 0;
}

.nav__links {
  display: flex;
  gap: 8px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav__links a {
  display: block;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 500;
  color: var(--text-primary);
  text-decoration: none;
  padding: 6px 16px;
  border-radius: 999px;
  background: rgba(20, 18, 14, 0.08);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: background-color 0.25s ease, color 0.25s ease;
}

.nav__links a:hover {
  background: rgba(15, 14, 13, 0.85);
  color: var(--cream);
}

/* Over a dark section (Position, About) the light-glass pill loses
   contrast against the black background — swap to a muted grey glass
   that reads clearly without competing with the section. */
.nav--on-dark .nav__links a {
  background: rgba(244, 241, 233, 0.1);
  color: var(--cream-muted);
}

.nav--on-dark .nav__links a:hover {
  background: rgba(244, 241, 233, 0.22);
  color: var(--cream);
}

/* Over a violet section (About page's purple takeover) the near-black
   pill above reads too close to the background's own hue, and the violet
   Contact button disappears entirely against a same-color backdrop — both
   need a near-black pill instead so they stay visible on violet too. */
.nav--on-violet .nav__links a {
  background: rgba(15, 14, 13, 0.28);
  color: #fff;
}

.nav--on-violet .nav__links a:hover {
  background: rgba(15, 14, 13, 0.5);
}

.nav--on-violet .nav__contact {
  background: rgba(15, 14, 13, 0.55);
}

.nav--on-violet .nav__contact:hover {
  background: var(--near-black);
  color: #fff;
}

.nav__contact {
  background: rgba(75, 47, 224, 0.75);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: #fff;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 600;
  padding: 10px 24px;
  border-radius: 999px;
  text-decoration: none;
  flex-shrink: 0;
  transition: background-color 0.25s ease, color 0.25s ease, transform 0.25s ease;
}

/* Inverted (not just a darker violet) so the hover reads clearly even over
   a violet section background, where a same-hue shift is hard to see. */
.nav__contact:hover {
  background: var(--cream);
  color: var(--violet);
  transform: translateY(-1px);
}

@media (max-width: 640px) {
  .nav__links {
    gap: 6px;
  }

  .nav__links a {
    font-size: 12px;
    padding: 5px 12px;
  }

  .nav__contact {
    padding: 8px 16px;
    font-size: 13px;
  }
}

/* ==========================================================================
   Hero (Section 2)
   ========================================================================== */

.hero {
  position: relative;
  min-height: 100vh;
}

/* Anchors the negative space above the content — holds the empty area
   instead of leaving it inert. Same rule vocabulary as the eyebrow rule,
   just vertical. */
.hero__mark {
  position: absolute;
  top: 140px;
  left: var(--container-pad);
  width: 1px;
  height: 14vh;
  background: rgba(75, 47, 224, 0.35);
}

.hero__content {
  position: relative;
  padding-inline: var(--container-pad);
  max-width: 1260px;
  padding-top: 38vh;
  padding-bottom: 6vh;
}

.hero__eyebrow-wrap {
  margin-bottom: 32px;
}

.hero__headline {
  font-size: 76px;
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.01em;
  text-align: left;
}

@media (max-width: 1200px) {
  .hero__headline {
    font-size: 64px;
  }
}

.hero__line-mask {
  display: block;
  overflow: hidden;
}

.hero__line {
  display: block;
}

.hero__marker {
  top: -12px;
  left: 2px;
}

.hero__footer {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 24px;
  margin-top: 24px;
}

.hero__descriptor {
  font-size: 18px;
  font-weight: 400;
  color: var(--text-muted);
  max-width: 560px;
  font-family: var(--font-body);
}

.hero__cta {
  position: relative;
  overflow: hidden;
  font-size: 18px;
  font-family: var(--font-heading);
  font-weight: 500;
  color: var(--near-black);
  text-decoration: none;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 22px;
  border-radius: 999px;
  border: 1.5px solid rgba(20, 18, 14, 0.16);
  z-index: 0;
  transition: color 0.3s ease, border-color 0.3s ease;
}

.hero__cta::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--violet);
  border-radius: 999px;
  transform: scale(0);
  transform-origin: center;
  transition: transform 0.45s cubic-bezier(0.65, 0, 0.35, 1);
}

.hero__cta-arrow {
  display: inline-block;
  transition: transform 0.35s cubic-bezier(0.65, 0, 0.35, 1);
}

.hero__cta:hover {
  color: #fff;
  border-color: var(--violet);
}

.hero__cta:hover::before {
  transform: scale(1);
}

.hero__cta:hover .hero__cta-arrow {
  transform: translateX(6px);
}

@media (max-width: 900px) {
  .hero__headline {
    font-size: 52px;
  }
}

@media (max-width: 640px) {
  .hero__mark {
    display: none;
  }

  .hero__content {
    padding-inline: var(--container-pad-mobile);
    max-width: 100%;
    padding-top: 40vh;
  }

  .hero__headline {
    font-size: 38px;
  }

  .hero__line--highlight {
    white-space: normal;
  }

  .hero__footer {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }

  .hero__descriptor {
    max-width: 100%;
  }
}

/* ==========================================================================
   Evidence marker — one recurring violet motif (crosshair), reused with the
   same geometry/weight/color everywhere it appears (Hero, Approach,
   Services rail, About). Purely decorative (aria-hidden) and never carries
   essential content, so it's safe to leave opacity:0 at rest and let each
   section's motion reveal it.
   ========================================================================== */

.evidence-marker {
  position: absolute;
  width: 16px;
  height: 16px;
  opacity: 0;
  pointer-events: none;
}

.evidence-marker::before,
.evidence-marker::after {
  content: '';
  position: absolute;
  background: var(--violet);
}

.evidence-marker::before {
  top: 50%;
  left: 0;
  width: 100%;
  height: 2px;
  transform: translateY(-50%);
}

.evidence-marker::after {
  left: 50%;
  top: 0;
  width: 2px;
  height: 100%;
  transform: translateX(-50%);
}

/* ==========================================================================
   The Position / Approach (Section 3)
   A solid black stage the whole time — no violet panel fills. A single
   MorphSVG divider (wavy -> straight) is the animation device; Research
   sits left, Creative work sits right, each held as the emphasized side
   for a beat before the divider resolves to a clean line at equilibrium.
   See js/motion.js initPositionSequence.
   ========================================================================== */

.position {
  position: relative;
  background: var(--near-black);
  height: 100vh;
  overflow: hidden;
}

.position__label {
  position: absolute;
  top: 40px;
  left: var(--container-pad);
  z-index: 2;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--cream-muted);
}

.position__stage {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 64px;
  height: 100%;
  text-align: center;
}

/* Hidden on mobile (no overlay loop there — see media query below).
   Visible by default on desktop so it never depends on JS running. */
.position__line {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.position__line-path {
  fill: none;
  stroke: url(#positionGradient);
  stroke-width: 1.5;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
}

.position__group {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;
}

.position__subject {
  font-family: var(--font-heading);
  font-weight: 800;
  text-transform: uppercase;
  line-height: 1;
  color: var(--violet);
  font-size: clamp(56px, 10vw, 168px);
}

.position__desc {
  font-family: var(--font-heading);
  font-weight: 500;
  line-height: 1.3;
  color: #fff;
  font-size: clamp(22px, 2.8vw, 40px);
  max-width: 700px;
}

@media (max-width: 900px) {
  .position {
    height: auto;
    padding-block: 96px 64px;
  }

  .position__label {
    position: static;
    display: block;
    margin-bottom: 32px;
    padding-inline: var(--container-pad-mobile);
  }

  .position__stage {
    flex-direction: column;
    gap: 48px;
    padding-inline: var(--container-pad-mobile);
  }

  .position__line {
    display: none;
  }

  .position__subject {
    font-size: clamp(32px, 10vw, 48px);
  }

  .position__desc {
    font-size: clamp(18px, 5vw, 24px);
  }
}

/* ==========================================================================
   Services (Section 4)
   ========================================================================== */

.services {
  background: var(--cream);
  padding-block: 140px;
}

.services__eyebrow-wrap {
  margin-bottom: 64px;
}

/* Four equal-weight blocks (no flagship distinction — same size, same
   color logic for all). Each gets its own gsap.timeline()+ScrollTrigger
   in js/motion.js (initServicesSequence), not one shared mega-sequence. */
.services__blocks {
  position: relative;
}

.services__block {
  position: relative;
  max-width: 640px;
  padding-block: 96px;
}

.services__block--left {
  margin-right: auto;
}

.services__block--right {
  margin-left: auto;
  text-align: right;
}

.services__block + .services__block {
  border-top: var(--rule-dark);
}

.services__tier {
  display: block;
  font-family: var(--font-heading);
  font-size: 28px;
  font-weight: 700;
  color: var(--violet);
  margin-bottom: 16px;
}

.services__name {
  font-size: clamp(40px, 5vw, 64px);
  font-weight: 700;
  line-height: 1.05;
  margin-bottom: 20px;
}

.services__desc {
  font-size: 20px;
  line-height: 1.55;
  max-width: 460px;
  color: var(--text-primary);
}

@media (min-width: 901px) {
  .services__desc {
    font-size: 26px;
    max-width: 520px;
  }
}

.services__block--right .services__desc {
  margin-left: auto;
}

/* The spine: one gradient line running through the section, generated in
   JS from each block's actual position so it bends toward whichever side
   is active — not a fixed decorative shape. Desktop only. */
.services__spine {
  display: none;
}

@media (min-width: 901px) {
  .services__spine {
    display: block;
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
    pointer-events: none;
    z-index: -1;
  }

  .services__spine-path {
    fill: none;
    stroke: url(#servicesGradient);
    stroke-width: 3;
    stroke-linecap: round;
  }
}

@media (max-width: 900px) {
  .services {
    padding-block: 80px;
  }

  .services__eyebrow-wrap {
    margin-bottom: 40px;
  }

  .services__block {
    max-width: 100%;
    padding-block: 48px;
  }

  .services__block--right {
    margin-left: 0;
    text-align: left;
  }

  .services__block--right .services__desc {
    margin-left: 0;
  }

  .services__name {
    font-size: clamp(32px, 9vw, 44px);
  }
}

/* ==========================================================================
   Services wall — Okalpha-inspired literal services typography field
   (PARKED.md, scoped 2026-07-14; rebuilt same day to read as one
   continuous justified textural block, not a repeated-label grid).
   Exactly one viewport tall, full-bleed, sits below Strategic Refresh
   inside the Services section. js/services-wall.js fills the paragraph
   with just enough repeats of the 9 services to reach this height at the
   font-size below, measured at runtime rather than shrinking the type.
   ========================================================================== */

.services-wall {
  position: relative;
  height: 100svh;
  width: 100%;
  box-sizing: border-box;
  background: var(--near-black);
  padding: clamp(32px, 5vw, 96px);
  display: flex;
  align-items: center;
  overflow: hidden;
}

.services-wall__grid {
  width: 100%;
  overflow: hidden;
  text-align: justify;
  text-justify: inter-word;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: clamp(42px, 4.2vw, 82px);
  line-height: 1.25;
  /* --cream-muted (existing token, 70% alpha) == --cream 30% darker */
  color: var(--cream-muted);
}

.services-wall__item {
  color: inherit;
  text-decoration: none;
  cursor: pointer;
  transition: color 0.2s ease;
}

.services-wall__item:hover,
.services-wall__item:focus-visible {
  color: var(--violet);
  outline: none;
}

.services-wall__detail {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  max-width: var(--container-max);
  margin-inline: auto;
  padding: clamp(32px, 5vw, 96px);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s ease;
}

.services-wall.is-open .services-wall__grid {
  visibility: hidden;
}

.services-wall.is-open .services-wall__detail {
  opacity: 1;
  visibility: visible;
}

.services-wall__close {
  position: absolute;
  top: 40px;
  right: var(--container-pad);
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  padding: 0;
  line-height: 1;
  font-size: clamp(28px, 3vw, 40px);
  color: var(--cream);
  cursor: pointer;
  transition: color 0.2s ease;
}

.services-wall__close:hover,
.services-wall__close:focus-visible {
  color: var(--violet);
  outline: none;
}

.services-wall__detail-title {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: clamp(36px, 6vw, 72px);
  line-height: 1.05;
  color: var(--violet);
  margin-bottom: 24px;
}

.services-wall__detail-desc {
  font-family: var(--font-body);
  font-size: clamp(16px, 2vw, 22px);
  line-height: 1.6;
  color: var(--cream-muted);
  max-width: 640px;
}

/* ==========================================================================
   Selected Work (Section 5)
   ========================================================================== */

.selected-work {
  background: var(--cream);
  padding-block: 140px;
}

.selected-work__eyebrow-wrap {
  margin-bottom: 64px;
}

.selected-work__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
}

/* Juan Mora-style unified card: image, eyebrow, and title live inside one
   bordered box rather than a bare image + text stacked in the grid cell. */
.work-card {
  display: block;
  cursor: pointer;
  padding: 16px;
  border-radius: 12px;
  background: var(--cream-muted);
  text-decoration: none;
  color: inherit;
  transition: transform 0.35s ease, box-shadow 0.35s ease;
}

.work-card:hover,
.work-card:focus-visible {
  transform: translateY(-4px);
  box-shadow: 0 20px 40px rgba(20, 18, 14, 0.08);
}

.work-card:focus-visible {
  outline: 2px solid var(--violet);
  outline-offset: 4px;
}

.work-card__media {
  position: relative;
  aspect-ratio: 1 / 1;
  border-radius: 6px;
  overflow: hidden;
  margin-bottom: 16px;
}

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

.work-card__category {
  display: block;
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--violet);
  padding: 0 4px;
  margin-bottom: 6px;
}

.work-card__title {
  font-size: 24px;
  font-weight: 700;
  color: var(--near-black);
  padding: 0 4px 8px;
}

.selected-work__view-all {
  display: block;
  margin-top: 40px;
  text-align: right;
  font-size: 14px;
  font-family: var(--font-body);
  color: var(--text-primary);
  text-decoration: none;
}

.selected-work__view-all:hover {
  text-decoration: underline;
}

@media (max-width: 900px) {
  .selected-work__grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }
}

@media (max-width: 640px) {
  .selected-work {
    padding-block: 80px;
  }

  .selected-work__eyebrow-wrap {
    margin-bottom: 40px;
  }
}

/* ==========================================================================
   Who I Work With (Section 6)
   ========================================================================== */

.who {
  background: var(--violet);
}

.who__eyebrow-wrap {
  padding-top: 140px;
}

.who__intro {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 40px;
  line-height: 1.2;
  color: #fff;
  margin-top: 24px;
}

.who__band {
  border-top: var(--rule-light);
  padding-block: 64px;
}

/* The one evidence-marker appearance in this section — not repeated per
   band per the brief ("not on every band"). Overrides the base class's
   absolute positioning since it sits inline between two stacked bands. */
.who__marker {
  position: relative;
  display: block;
  margin: 0 auto;
  top: 0;
  left: 0;
  transform: none;
}

.who__band--one {
  padding-top: 96px;
}

.who__band--three {
  padding-bottom: 96px;
}

.who__statement {
  font-family: var(--font-heading);
  font-weight: 700;
  color: #fff;
  line-height: 1.15;
}

.who__caption {
  font-family: var(--font-body);
  font-size: 16px;
  color: var(--cream-muted);
  margin-top: 16px;
}

.who__highlight-text {
  position: relative;
  color: var(--cream);
  padding: 0 0.15em;
}

.who__statement {
  position: relative;
}

.who__band--one .who__statement {
  font-size: 80px;
  max-width: 1100px;
}

.who__band--two {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  column-gap: 48px;
}

.who__band--two .who__statement {
  font-size: 36px;
}

.who__band--two .who__caption {
  font-size: 14px;
}

.who__band--three {
  margin-left: 40%;
}

.who__band--three .who__statement {
  font-size: 64px;
}

@media (max-width: 640px) {
  .who__eyebrow-wrap {
    padding-top: 80px;
  }

  .who__intro {
    font-size: 28px;
    margin-top: 16px;
  }

  .who__band {
    padding-block: 40px;
  }

  .who__band--one {
    padding-top: 80px;
  }

  .who__band--three {
    padding-bottom: 80px;
  }

  .who__band--one .who__statement {
    font-size: 36px;
  }

  .who__band--two {
    grid-template-columns: 1fr;
    row-gap: 40px;
  }

  .who__band--two .who__statement {
    font-size: 32px;
  }

  .who__band--three {
    margin-left: 0;
  }

  .who__band--three .who__statement {
    font-size: 28px;
  }
}

/* ==========================================================================
   About (Section 7)
   ========================================================================== */

.about {
  background: var(--near-black);
  padding-block: 140px;
}

.about__content {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 96px;
}

.about__eyebrow-wrap {
  margin-bottom: 24px;
}

.about__eyebrow-wrap .eyebrow-rule {
  background: var(--violet);
}

.about__headline {
  font-size: 48px;
  font-weight: 700;
  color: #fff;
  line-height: 1.2;
}

.about__right {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.about__body {
  font-size: 18px;
  line-height: 1.7;
  color: var(--cream-muted);
}

.about__glow-phrase {
  color: var(--violet);
  text-shadow: 0 0 0 rgba(75, 47, 224, 0);
}

.about__link {
  position: relative;
  display: inline-block;
  color: #fff;
  font-family: var(--font-heading);
  font-size: 28px;
  font-weight: 700;
  text-decoration: none;
  width: fit-content;
  margin-top: 16px;
  padding-bottom: 8px;
}

.about__link::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 3px;
  background: var(--violet);
  transform-origin: left center;
  transform: scaleX(0.28);
  transition: transform 0.3s ease;
}

.about__link:hover::after {
  transform: scaleX(1);
}

@media (max-width: 640px) {
  .about__link {
    font-size: 22px;
  }
}

@media (max-width: 640px) {
  .about {
    padding-block: 80px;
  }

  .about__content {
    grid-template-columns: 1fr;
    row-gap: 32px;
  }

  .about__headline {
    font-size: 32px;
  }
}

/* ==========================================================================
   Footer (Section 8)
   ========================================================================== */

.footer {
  background: var(--cream);
  border-top: var(--rule-dark);
}

.footer__content {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  align-items: center;
  padding-block: 32px;
}

.footer__logo {
  width: 36px;
  height: 36px;
  border-radius: 4px;
  background: var(--violet);
  color: #fff;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}

.footer__domain {
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--text-primary);
  text-align: center;
}

.footer__copyright {
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--text-muted);
  text-align: right;
}

@media (max-width: 640px) {
  .footer__content {
    grid-template-columns: 1fr;
    row-gap: 12px;
    text-align: center;
    justify-items: center;
    padding-block: 24px;
  }

  .footer__domain,
  .footer__copyright {
    text-align: center;
  }
}

/* ==========================================================================
   About page — Sequence (hero → zoom into "closer." → purple takeover →
   Hello!/photo/lede reveal), one continuous pinned timeline. See
   js/about.js initAboutSequence.

   Base rules below are the accessible, no-JS/reduced-motion fallback:
   everything sits in normal document flow, fully visible, stacked
   top-to-bottom (cream hero, then the violet reveal). JS adds
   .is-enhanced (desktop + motion allowed) to switch the hero and reveal
   layers to absolute/pinned and drive the actual sequence — see the
   .is-enhanced overrides at the bottom of this block.
   ========================================================================== */

.about-sequence {
  position: relative;
  background: var(--cream);
}

.about-hero {
  width: 100%;
  padding-block: 160px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 0.2em;
}

.about-hero__line {
  margin: 0;
  font-family: var(--font-heading);
  font-weight: 800;
  line-height: 1.08;
  font-size: clamp(34px, 6.2vw, 88px);
  color: var(--near-black);
}

.about-hero__line--two {
  font-weight: 500;
}

.about-hero__closer {
  display: inline-block;
  color: var(--violet);
  transform-origin: 50% 50%;
}

.about-hero__scroll-cue {
  margin-top: 56px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.about-hero__scroll-label {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.about-hero__scroll-line {
  width: 1px;
  height: 32px;
  background: var(--text-muted);
}

.about-purple-overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  background: var(--violet);
  opacity: 0;
  pointer-events: none;
}

.about-reveal {
  position: relative;
  z-index: 4;
  background: var(--violet);
  padding-block: 140px;
}

.about-reveal__grid {
  display: grid;
  grid-template-columns: 5fr 7fr;
  column-gap: 80px;
  align-items: center;
}

.about-reveal__media {
  position: relative;
  aspect-ratio: 4 / 5;
  border-radius: 6px;
  overflow: hidden;
  background: #3a3a3a;
}

.about-reveal__photo {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.about-reveal__hello {
  font-size: clamp(40px, 5.5vw, 72px);
  font-weight: 800;
  color: #fff;
  margin: 0 0 20px;
}

.about-reveal__lede {
  font-size: 19px;
  font-weight: 600;
  line-height: 1.6;
  color: var(--cream-muted);
  max-width: 52ch;
}

/* Enhanced (desktop, motion allowed) — added by js/about.js right before it
   builds the pinned timeline. Layers the hero/overlay/reveal on top of each
   other so the scrub sequence can cross-fade between them. */
.about-sequence.is-enhanced {
  height: 100vh;
  overflow: hidden;
}

.about-sequence.is-enhanced .about-hero {
  position: absolute;
  inset: 0;
  z-index: 3;
  padding-block: 0;
}

.about-sequence.is-enhanced .about-reveal {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  padding-block: 0;
  opacity: 0;
  pointer-events: none;
}

@media (max-width: 900px) {
  .about-hero {
    padding-block: 120px 80px;
  }

  .about-reveal {
    padding-block: 96px;
  }

  .about-reveal__grid {
    grid-template-columns: 1fr;
    row-gap: 32px;
  }

  .about-reveal__media {
    max-width: 280px;
  }
}

/* ==========================================================================
   About page — Story (remaining bio + CTA, continues the purple background
   normally after the pinned sequence releases)
   ========================================================================== */

.about-story {
  background: var(--violet);
  padding-block: 0 140px;
}

.about-story__content {
  max-width: 760px;
}

.about-story__body {
  font-size: 18px;
  line-height: 1.7;
  color: var(--cream-muted);
  margin: 0 0 24px;
}

.about-story__cta {
  position: relative;
  display: inline-block;
  color: #fff;
  font-family: var(--font-heading);
  font-size: 24px;
  font-weight: 700;
  text-decoration: none;
  width: fit-content;
  margin-top: 8px;
  padding-bottom: 8px;
}

.about-story__cta::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 3px;
  background: #fff;
  transform-origin: left center;
  transform: scaleX(0.28);
  transition: transform 0.3s ease;
}

.about-story__cta:hover::after {
  transform: scaleX(1);
}

@media (max-width: 900px) {
  .about-story {
    padding-block: 0 80px;
  }
}

@media (max-width: 640px) {
  .about-story__cta {
    font-size: 20px;
  }
}

/* ==========================================================================
   Contact page
   ========================================================================== */

.contact-hero {
  position: relative;
  min-height: 100vh;
  background: var(--cream);
  padding-top: 22vh;
  padding-bottom: 10vh;
}

.contact-hero__grid {
  display: grid;
  grid-template-columns: 5fr 7fr;
  column-gap: 80px;
  align-items: start;
}

.contact-hero__intro {
  padding-top: 8px;
}

.contact-hero__headline {
  font-size: clamp(36px, 4vw, 52px);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: var(--text-primary);
  margin: 0 0 20px;
  max-width: 20ch;
}

.contact-hero__descriptor {
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.6;
  color: var(--text-muted);
  max-width: 36ch;
}

/* Form */

.contact-form {
  display: flex;
  flex-direction: column;
  gap: 24px;
  position: relative;
}

.contact-form__field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.contact-form__label {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
}

.contact-form__input {
  width: 100%;
  font-family: var(--font-body);
  font-size: 15px;
  color: var(--text-primary);
  background: var(--cream);
  border: var(--rule-dark);
  border-radius: 4px;
  padding: 14px 16px;
  transition: border-color 0.2s ease;
}

.contact-form__input:focus {
  outline: none;
  border-color: var(--violet);
}

.contact-form__input--textarea {
  resize: vertical;
  min-height: 120px;
  font-family: var(--font-body);
}

.contact-form__input--select {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%234B2FE0' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  padding-right: 40px;
  cursor: pointer;
}

.contact-form__hint {
  font-family: var(--font-body);
  font-size: 12px;
  color: var(--text-muted);
}

/* Off-screen, not display:none — real visitors never see or tab into this,
   simple bots that autofill every field still get caught. */
.contact-form__honeypot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.contact-form__status {
  font-family: var(--font-body);
  font-size: 14px;
  min-height: 1.4em;
}

.contact-form__status[data-state="error"] {
  color: var(--form-error);
}

.contact-form__status[data-state="error"]::before {
  content: '⚠ ';
}

.contact-form__submit {
  align-self: flex-start;
  background: var(--violet);
  color: #fff;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 600;
  padding: 14px 32px;
  border: none;
  border-radius: 999px;
  cursor: pointer;
  transition: background-color 0.25s ease, transform 0.25s ease, opacity 0.2s ease;
}

.contact-form__submit:hover:not(:disabled) {
  background: var(--near-black);
  transform: translateY(-1px);
}

.contact-form__submit:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
}

.contact-form__fallback {
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--text-muted);
}

.contact-form__fallback a {
  color: var(--violet);
}

/* Success state — form and intro copy fade out, a purple wave rises to
   fill the screen, then the confirmation swaps into the intro's exact
   grid cell at matching type sizes (white, since it now sits over the
   violet wave). Base/reduced-motion state (no JS tween) shows the wave
   already settled and the confirmation already visible — js/contact.js
   skips the animated sequence entirely under prefers-reduced-motion,
   matching the About page's accessible-by-construction pattern. */

/* padding-top matches the ~73px gap between .contact-hero__intro's own
   top and its headline's actual top (intro's 8px padding plus the
   eyebrow — rule + label + its margin-bottom — that precedes the
   headline there). The confirmation has no eyebrow, so without this
   offset its title renders 73px higher than "Let's find the right
   place to begin." did, even though both share the same grid cell. */
.contact-success {
  grid-column: 1;
  grid-row: 1;
  position: relative;
  z-index: 41;
  padding-top: 73px;
}

.contact-success__title {
  font-size: clamp(36px, 4vw, 52px);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: #fff;
  margin: 0 0 20px;
  max-width: 20ch;
}

.contact-success__desc {
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.85);
  max-width: 36ch;
}

/* Fixed full-viewport layer the liquid-fill renders into — sits below the
   fixed .nav (z-index 100) so nav stays usable, and below .contact-success
   (z-index 41) so the confirmation text stays on top once the fill
   completes. js/contact.js draws directly in pixel coordinates (no
   viewBox/preserveAspectRatio scaling) and redraws the path every frame
   while filling; nothing (including this element) has a CSS transform —
   it's just an empty, invisible container until JS fills it. */
.contact-success__wave {
  position: fixed;
  inset: 0;
  z-index: 40;
  overflow: hidden;
  pointer-events: none;
}

.contact-success__wave svg {
  display: block;
  width: 100%;
  height: 100%;
}

.contact-success__wave path {
  fill: var(--violet);
}

@media (max-width: 900px) {
  .contact-hero {
    padding-top: 120px;
  }

  .contact-hero__grid {
    grid-template-columns: 1fr;
    row-gap: 40px;
  }

  .contact-hero__headline {
    max-width: none;
  }
}

/* ==========================================================================
   Work page
   ========================================================================== */

.work-hero {
  background: var(--cream);
  padding-top: 22vh;
  padding-bottom: 8vh;
}

.work-hero__headline {
  font-size: clamp(28px, 3.2vw, 40px);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--text-primary);
  margin: 0 0 20px;
  max-width: 26ch;
}

.work-hero__descriptor {
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.6;
  color: var(--text-muted);
  max-width: 48ch;
}

.work-list {
  background: var(--cream);
  padding-bottom: 40px;
}

/* Shifted right to leave room for the fixed .work-nav sidebar (desktop
   only — the sidebar itself is hidden below that breakpoint too). */
@media (min-width: 1201px) {
  .work-list {
    padding-left: 180px;
  }
}

/* One case study per row: fixed-width media column + fixed-width content
   column (not 1fr) — the row is a contained card sized off the image,
   not a full-bleed strip that keeps stretching on wide viewports.
   Separated by the site's existing rule token rather than a card border,
   per docs/02-design-direction.md ("simple horizontal rules instead of
   cards"). */
.work-item {
  display: grid;
  grid-template-columns: 336px 420px;
  column-gap: 64px;
  padding-block: 56px;
  border-top: var(--rule-dark);
  opacity: 1;
  transition: opacity 0.4s ease;
  /* Anchor targets land below the fixed .nav (76px tall) with breathing
     room, instead of tucking the row's top rule directly under it. */
  scroll-margin-top: 120px;
}

.work-item:last-child {
  border-bottom: var(--rule-dark);
}

/* Scroll-focus dim (js/work.js) — restrained stand-in for the content
   doc's dim-inactive-item GSAP reference, without its decorative hue
   shift (design-direction rules out spectacle motion). */
.work-item.is-dimmed {
  opacity: 0.35;
}

.work-item__media {
  position: relative;
  aspect-ratio: 1 / 1;
  border-radius: 6px;
  overflow: hidden;
  height: fit-content;
}

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

.work-item__meta {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 12px;
}

.work-item__index {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
}

.work-item__category {
  margin: 0;
}

.work-item__year {
  font-family: var(--font-body);
  font-size: 12px;
  color: var(--text-muted);
  margin-left: auto;
}

.work-item__title {
  font-size: clamp(26px, 2.6vw, 34px);
  font-weight: 700;
  color: var(--near-black);
  margin: 0 0 4px;
}

.work-item__tagline {
  font-family: var(--font-body);
  font-size: 15px;
  color: var(--text-muted);
  margin: 0 0 28px;
}

.work-item__field {
  margin-bottom: 18px;
}

.work-item__field:last-child {
  margin-bottom: 0;
}

.work-item__label {
  display: block;
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--violet);
  margin-bottom: 6px;
}

.work-item__text {
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.6;
  color: var(--text-primary);
  max-width: 62ch;
}

/* "More info" toggle (js/work.js) — Role stays collapsed by default so
   the card's default-visible content matches Challenge + Services;
   expands in place rather than navigating anywhere. */
.work-item__more {
  display: inline-flex;
  align-items: center;
  background: none;
  border: var(--rule-dark);
  border-radius: 999px;
  padding: 8px 18px;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
  cursor: pointer;
  margin-bottom: 18px;
  transition: border-color 0.25s ease, color 0.25s ease;
}

.work-item__more:hover {
  border-color: var(--violet);
  color: var(--violet);
}

.work-item__field--role {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  margin-bottom: 0;
  transition: max-height 0.45s ease, opacity 0.35s ease, margin-bottom 0.45s ease;
}

.work-item__field--role.is-expanded {
  max-height: 320px;
  opacity: 1;
  margin-bottom: 18px;
}

.work-cta {
  background: var(--near-black);
  padding-block: 100px;
}

.work-cta__content {
  text-align: center;
}

.work-cta__line {
  font-family: var(--font-heading);
  font-size: clamp(22px, 2.6vw, 30px);
  font-weight: 600;
  color: var(--cream);
  margin: 0 0 20px;
}

.work-cta__link {
  display: inline-block;
  font-family: var(--font-body);
  font-size: 16px;
  color: var(--cream);
  text-decoration: none;
  border-bottom: 1px solid rgba(244, 241, 233, 0.4);
  padding-bottom: 2px;
}

.work-cta__link:hover {
  border-color: var(--cream);
}

@media (max-width: 1200px) {
  .work-item {
    grid-template-columns: 336px 1fr;
  }
}

@media (max-width: 900px) {
  .work-hero {
    padding-top: 120px;
  }

  .work-item {
    grid-template-columns: 1fr;
    row-gap: 24px;
  }

  .work-item__media {
    max-width: 384px;
  }
}

@media (max-width: 640px) {
  .work-hero {
    padding-bottom: 48px;
  }

  .work-item {
    padding-block: 40px;
  }
}

/* ==========================================================================
   Work page — side navigation (case study index)
   ========================================================================== */

/* Fixed left-edge index of all case studies — appears once the hero has
   scrolled out of view (js/work.js toggles .is-visible via the same
   #hero IntersectionObserver pattern used elsewhere on the site). Hidden
   below 1200px: there's no longer room beside the content column (see
   .work-list's matching padding-left), and a fixed sidebar competes with
   a narrow viewport rather than helping. */
.work-nav {
  position: fixed;
  left: 40px;
  top: 50%;
  transform: translateY(-50%) translateX(-6px);
  z-index: 60;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.5s ease, transform 0.5s ease;
}

.work-nav.is-visible {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(-50%) translateX(0);
}

.work-nav__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.work-nav__link {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  color: rgba(20, 18, 14, 0.28);
  text-decoration: none;
  line-height: 1.3;
  transform-origin: left center;
  transition: color 0.3s ease, transform 0.3s ease;
}

.work-nav__link::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--violet);
  flex-shrink: 0;
  opacity: 0;
  transform: scale(0.4);
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.work-nav__link:hover,
.work-nav__link:focus-visible {
  color: var(--violet);
  transform: scale(1.12);
}

.work-nav__link.is-active {
  color: var(--violet);
  font-weight: 700;
}

.work-nav__link.is-active::before {
  opacity: 1;
  transform: scale(1);
}

@media (max-width: 1200px) {
  .work-nav {
    display: none;
  }
}

/* ==========================================================================
   404 page
   ========================================================================== */

.error-404 {
  min-height: 100vh;
  background: var(--cream);
  padding-top: 38vh;
  padding-bottom: 6vh;
}

.error-404__content {
  max-width: 720px;
}

.error-404__headline {
  font-size: 76px;
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.01em;
  color: var(--text-primary);
  margin: 0 0 20px;
}

@media (max-width: 1200px) {
  .error-404__headline {
    font-size: 64px;
  }
}

@media (max-width: 900px) {
  .error-404__headline {
    font-size: 52px;
  }
}

@media (max-width: 640px) {
  .error-404 {
    padding-top: 40vh;
  }

  .error-404__headline {
    font-size: 38px;
  }
}

.error-404__descriptor {
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.6;
  color: var(--text-muted);
  margin: 0 0 32px;
  max-width: 48ch;
}

.error-404__cta {
  position: relative;
  display: inline-block;
  color: var(--violet);
  font-family: var(--font-heading);
  font-size: 20px;
  font-weight: 700;
  text-decoration: none;
  width: fit-content;
  padding-bottom: 6px;
}

.error-404__cta::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 2px;
  background: var(--violet);
  transform-origin: left center;
  transform: scaleX(0.28);
  transition: transform 0.3s ease;
}

.error-404__cta:hover::after {
  transform: scaleX(1);
}