/* ==========================================================================
   We Are Fourth — the sections
   Ported from the CSS modules of the previous build; class names are now
   explicit because Elementor renders them.
   ========================================================================== */

/* A class-level `display` beats the user-agent rule for [hidden], which is
   how the "View more" rows ended up visible from the start. */
[hidden] {
  display: none !important;
}

/* Buttons in this theme are type, not controls. */
.waf-nav button,
.waf-row,
.waf-more,
.waf-contact__action,
.waf-sheet__close,
.waf-sheet__next,
.waf-invite,
.waf-panel__close,
.waf-chip {
  font: inherit;
  color: inherit;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
}

/* ==========================================================================
   Nav
   ========================================================================== */
.waf-nav {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 72;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gutter);
  padding-block: clamp(0.85rem, 0.6rem + 1vw, 1.35rem);

  /* Frosted glass rather than difference blending. Blending kept the bar
     legible but let content read *through* the type; this keeps the nav
     sitting clearly on top of everything, paper or ink. */
  color: var(--ink);
  background: rgba(237, 235, 230, 0.62);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  backdrop-filter: blur(18px) saturate(140%);
  border-bottom: var(--rule) solid rgba(11, 11, 10, 0.08);
}

/* The admin bar is fixed chrome the browser knows nothing about, so a nav
   pinned to top:0 slides underneath it. Only logged-in editors ever see this,
   which is exactly who is least able to ignore it. */
body.admin-bar .waf-nav {
  top: 32px;
}

@media screen and (max-width: 782px) {
  body.admin-bar .waf-nav {
    top: 46px;
  }
}

/* A one-pixel highlight along the top edge — the detail that reads as glass
   rather than as a translucent block. */
.waf-nav::after {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.7), transparent);
  pointer-events: none;
}

/* Browsers without backdrop-filter get a solid bar instead of a muddy one. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .waf-nav {
    background: rgba(237, 235, 230, 0.94);
  }
}

.waf-nav__logo {
  height: clamp(1.5rem, 1.1rem + 1.6vw, 2.1rem);
  width: auto;
  display: block;
}

.waf-nav__mark {
  display: inline-flex;
  align-items: center;
  gap: 0.7em;
  font-size: var(--step-0);
  letter-spacing: -0.02em;
  color: inherit;
  text-decoration: none;
}

.waf-nav__num {
  font-size: var(--step--1);
  letter-spacing: 0.08em;
  opacity: 0.55;
  white-space: nowrap;
}

.waf-nav__links {
  display: flex;
  align-items: center;
  gap: clamp(1.2rem, 0.6rem + 2vw, 2.6rem);
}

.waf-nav__links a {
  font-size: var(--step-0);
  letter-spacing: -0.01em;
  color: inherit;
  text-decoration: none;
}

/* A bordered pill rather than a filled one — a solid fill reads as a muddy
   block over the dark sections. */
.waf-nav__promise {
  display: inline-flex;
  align-items: center;
  border: 1px solid currentColor;
  border-radius: 100px;
  padding: 0.42em 1em;
  white-space: nowrap;
  transition: opacity 0.4s var(--ease-out);
}

.waf-nav__promise:hover {
  opacity: 0.62;
}

.waf-nav__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
}

.waf-nav__cta i {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: currentColor;
  display: block;
}

@media (max-width: 720px) {
  .waf-hide-sm,
  .waf-nav__num {
    display: none;
  }

  .waf-nav {
    padding-block: 1.1rem;
  }

  .waf-nav__links {
    gap: 1.1rem;
  }

  .waf-cta-long {
    display: none;
  }
}

@media (min-width: 721px) {
  .waf-cta-short {
    display: none;
  }
}

/* ==========================================================================
   Hero — one pinned sequence
   ========================================================================== */
.waf-hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding-block: clamp(7rem, 5rem + 6vw, 10rem) clamp(1.5rem, 1rem + 2vw, 2.5rem);
  overflow: hidden;
}

.waf-hero__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gutter);
  justify-content: space-between;
  align-items: flex-start;
}

.waf-hero__metaitem {
  display: flex;
  flex-direction: column;
  gap: 0.35em;
  min-width: 0;
}

.waf-hero__metaitem span:last-child {
  color: var(--ink);
  font-size: var(--step-0);
  letter-spacing: -0.01em;
}

.waf-hero__status {
  display: inline-flex;
  align-items: center;
  gap: 0.55em;
}

.waf-hero__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--ink);
  flex: none;
}

.waf-hero__dot::after {
  content: "";
  display: block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--ink);
  animation: waf-pulse 2.8s var(--ease-out) infinite;
}

@keyframes waf-pulse {
  0% { transform: scale(1); opacity: 0.5; }
  70%, 100% { transform: scale(4.5); opacity: 0; }
}

/* The statement and the promise share one cell. minmax(0,1fr) stops the
   nowrap promise lines widening the grid, which would refit them larger and
   widen it again. */
.waf-hero__stage {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
  margin-block: auto;
  padding-block: clamp(2rem, 1.5rem + 4vw, 5rem);
}

.waf-hero__statement,
.waf-hero__promise {
  grid-area: 1 / 1;
  min-width: 0;
}

.waf-hero__statement {
  will-change: transform, filter, opacity;
}

.waf-hero__promise {
  opacity: 0;
  will-change: transform, filter, opacity;
}

.waf-hero__promiselabel {
  display: block;
  margin-bottom: clamp(0.8rem, 0.5rem + 1vw, 1.6rem);
}

.waf-hero__lettering {
  color: var(--shift-blue);
}

.waf-hero__statement h1 {
  font-size: var(--step-4);
  line-height: 0.85;
  letter-spacing: -0.05em;
  font-weight: 400;
  max-width: 16ch;
  margin: 0;
}

/* The second half of the statement steps in — asymmetry keeps it from
   reading like a centred template. */
.waf-indent {
  padding-left: clamp(0rem, -2rem + 12vw, 9rem);
}

.waf-hero__statement em {
  font-style: italic;
  letter-spacing: -0.04em;
}

.waf-hero__belief {
  display: flex;
  gap: var(--gutter);
  flex-wrap: wrap;
  align-items: baseline;
  opacity: 0;
  margin-bottom: clamp(1.5rem, 1rem + 2vw, 2.5rem);
}

.waf-hero__belief p {
  max-width: 46ch;
  color: var(--charcoal-500);
  margin: 0;
}

.waf-hero__foot {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--gutter);
  align-items: end;
}

.waf-hero__note {
  grid-column: 1 / span 5;
  max-width: 42ch;
  margin: 0;
}

.waf-hero__scroll {
  grid-column: 11 / -1;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.7em;
  white-space: nowrap;
}

.waf-hero__scrollline {
  display: block;
  width: 1px;
  height: 3.4rem;
  background: var(--hairline);
  position: relative;
  overflow: hidden;
}

.waf-hero__scrollline::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--ink);
  transform-origin: top;
  animation: waf-trace 2.4s var(--ease-in-out) infinite;
}

@keyframes waf-trace {
  0% { transform: scaleY(0); transform-origin: top; }
  45% { transform: scaleY(1); transform-origin: top; }
  55% { transform: scaleY(1); transform-origin: bottom; }
  100% { transform: scaleY(0); transform-origin: bottom; }
}

/* No pin runs under reduced motion, and none runs in the Elementor editor, so
   nothing would ever raise these off zero. Show them, and let the statement
   and the promise simply stack. */
@media (prefers-reduced-motion: reduce) {
  .waf-hero__promise,
  .waf-hero__belief { opacity: 1; }
  .waf-hero__stage { grid-template-rows: auto auto; }
  .waf-hero__statement { grid-area: 1 / 1; }
  .waf-hero__promise {
    grid-area: 2 / 1;
    margin-top: clamp(2rem, 1.5rem + 3vw, 4rem);
  }
}

.waf-static .waf-hero__promise,
.waf-static .waf-hero__belief { opacity: 1; }
.waf-static .waf-hero__stage { grid-template-rows: auto auto; }
.waf-static .waf-hero__statement { grid-area: 1 / 1; }
.waf-static .waf-hero__promise {
  grid-area: 2 / 1;
  margin-top: clamp(2rem, 1.5rem + 3vw, 4rem);
}

@media (max-width: 800px) {
  .waf-hero__meta {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    row-gap: 1.6rem;
  }
  .waf-hero__note { grid-column: 1 / -1; }
  .waf-hero__scroll { display: none; }
  .waf-hero__statement h1 { max-width: none; }
  .waf-indent { padding-left: 0; }
}

/* ==========================================================================
   The typewriter
   ========================================================================== */
.waf-type {
  width: 100%;
  min-width: 0;
  position: relative;
  /* The lines are nowrap at display size; never let them push the layout. */
  overflow: hidden;
  font-family: var(--brush);
  font-weight: var(--brush-weight, 400);
  line-height: 0.96;
  letter-spacing: 0;
  text-transform: uppercase;
}

/* Measured, never seen. Kept in flow-free space at a fixed reference size so
   the ratio maths stays honest. */
.waf-type__ghosts {
  position: absolute;
  left: -9999px;
  top: 0;
  visibility: hidden;
  pointer-events: none;
  white-space: nowrap;
  font-size: 100px;
  font-family: inherit;
  font-weight: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
}

/* width:max-content is the point — a plain block span would inherit the
   container's width and every line would measure identically. */
.waf-type__ghosts span {
  display: block;
  width: max-content;
  white-space: nowrap;
}

.waf-type__line {
  display: block;
  white-space: nowrap;
  /* Holds the line's height while it is still empty, so nothing jumps. */
  min-height: 0.96em;
}

.waf-type__caret {
  display: inline-block;
  width: 0.07em;
  height: 0.72em;
  margin-left: 0.06em;
  background: currentColor;
  vertical-align: baseline;
  animation: waf-blink 1s steps(1, end) infinite;
}

/* Once the line is finished the caret keeps blinking but stops feeling like
   part of the word. */
.waf-type__caret[data-done="true"] {
  opacity: 0.5;
}

@keyframes waf-blink {
  0%, 49% { opacity: 1; }
  50%, 100% { opacity: 0; }
}

.waf-type__tm {
  font-family: var(--sans);
  font-size: 0.14em;
  font-weight: 400;
  font-style: normal;
  vertical-align: super;
  letter-spacing: 0;
  margin-left: 0.1em;
}

@media (prefers-reduced-motion: reduce) {
  .waf-type__caret { animation: none; }
}

/* ==========================================================================
   Shared editorial section
   ========================================================================== */
.waf-section {
  padding-block: var(--section);
  position: relative;
}

/* Sticky label in the left margin, content in the right — the spine of the
   whole page. */
.waf-spread {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--gutter);
}

.waf-spread__label { grid-column: 1 / span 3; }

.waf-spread__sticky {
  position: sticky;
  top: clamp(5.5rem, 4rem + 4vw, 7.5rem);
  display: flex;
  flex-direction: column;
  gap: 0.6em;
}

.waf-spread__body { grid-column: 5 / -1; }

@media (max-width: 900px) {
  .waf-spread__label,
  .waf-spread__body { grid-column: 1 / -1; }

  .waf-spread__sticky {
    position: static;
    flex-direction: row;
    align-items: baseline;
    gap: 1em;
    margin-bottom: 1.5rem;
  }
}

.waf-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--gutter);
  flex-wrap: wrap;
  margin-bottom: clamp(2.5rem, 1.5rem + 4vw, 5rem);
}

/* --- manifesto ------------------------------------------------------------- */
.waf-manifesto p {
  font-size: var(--step-2);
  line-height: 1.14;
  letter-spacing: -0.032em;
  max-width: 22ch;
  margin: 0;
}

.waf-manifesto p + p { margin-top: 1.1em; }

/* Facts run the full measure — four even columns read as a ledger, which is
   the point. */
.waf-facts {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--gutter);
  margin-top: clamp(3.5rem, 2rem + 6vw, 7rem);
}

@media (max-width: 760px) {
  .waf-facts {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    row-gap: 2.5rem;
  }
}

.waf-fact {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

/* A real element rather than a border, so it can draw itself on scroll
   without scaling the text with it. */
.waf-fact__rule {
  display: block;
  height: var(--rule);
  width: 100%;
  background: var(--hairline);
  transform-origin: left center;
  margin-bottom: 0.6rem;
}

.waf-fact__n {
  font-size: var(--step-2);
  letter-spacing: -0.04em;
  line-height: 1;
}

.waf-fact__t {
  color: var(--charcoal-500);
  max-width: 26ch;
  font-size: var(--step--1);
  line-height: 1.45;
}

/* ==========================================================================
   Work index
   ========================================================================== */
.waf-index {
  border-top: var(--rule) solid var(--hairline);
}

.waf-row {
  position: relative;
  display: grid;
  grid-template-columns: 4rem minmax(0, 1.15fr) minmax(0, 1fr) auto;
  gap: var(--gutter);
  align-items: baseline;
  padding-block: clamp(1.4rem, 1rem + 1.8vw, 2.6rem);
  border-bottom: var(--rule) solid var(--hairline);
  width: 100%;
  text-align: left;
  isolation: isolate;
  transition: color 0.5s var(--ease-out);
  text-decoration: none;
}

/* A wash sweeps in from the left on hover instead of a flat background swap. */
.waf-row::before {
  content: "";
  position: absolute;
  inset: 0 calc(var(--gutter) * -0.6);
  background: var(--paper-deep);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.6s var(--ease-out);
  z-index: -1;
}

.waf-row:hover::before,
.waf-row:focus-visible::before { transform: scaleX(1); }

.waf-row__n {
  font-size: var(--step--1);
  letter-spacing: 0.08em;
  color: var(--charcoal-500);
}

.waf-row__client {
  font-size: var(--step-2);
  letter-spacing: -0.035em;
  line-height: 1;
  display: block;
}

.waf-row__client i {
  display: inline-block;
  font-style: normal;
  transition: transform 0.6s var(--ease-out);
}

.waf-row:hover .waf-row__client i { transform: translateX(0.35em); }

.waf-row__scope {
  color: var(--charcoal-500);
  font-size: var(--step--1);
  letter-spacing: 0.02em;
}

.waf-row__year {
  color: var(--charcoal-500);
  font-size: var(--step--1);
  letter-spacing: 0.06em;
  text-align: right;
}

@media (max-width: 820px) {
  .waf-row { grid-template-columns: 2.5rem minmax(0, 1fr) auto; }
  .waf-row__scope { grid-column: 2 / span 1; }
}

/* Floating preview that trails the cursor across the index.

   No fixed ratio: the artwork here runs from square social posts to 40x7
   billboards, and a single tile shape cropped the wide ones in half. The box
   now takes its size from the image, bounded by the viewport. */
.waf-preview {
  position: fixed;
  top: 0;
  left: 0;
  pointer-events: none;
  z-index: 40;
  opacity: 0;
  will-change: transform;
}

.waf-preview__inner {
  display: block;
  line-height: 0;
  background: var(--paper-deep);
  box-shadow: 0 24px 60px -30px rgba(11, 11, 10, 0.45);
}

.waf-preview__inner img {
  display: block;
  width: auto;
  height: auto;
  max-width: min(34vw, 520px);
  max-height: min(48vh, 560px);
  object-fit: contain;
}

@media (max-width: 900px), (pointer: coarse) {
  .waf-preview { display: none; }
}

/* --- view more ------------------------------------------------------------- */
.waf-morewrap {
  display: flex;
  justify-content: center;
  margin-top: clamp(2.5rem, 2rem + 2vw, 4rem);
}

.waf-more {
  display: inline-flex;
  align-items: center;
  gap: 1em;
  font-size: var(--step-1);
  letter-spacing: -0.02em;
}

.waf-more__disc {
  width: clamp(2.6rem, 2rem + 2vw, 3.6rem);
  aspect-ratio: 1;
  border-radius: 50%;
  border: var(--rule) solid var(--hairline);
  display: grid;
  place-items: center;
  flex: none;
  position: relative;
  overflow: hidden;
  transition: color 0.5s var(--ease-out);
}

.waf-more__disc::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--ink);
  border-radius: 50%;
  transform: scale(0);
  transition: transform 0.55s var(--ease-out);
}

.waf-more:hover .waf-more__disc::before { transform: scale(1); }
.waf-more:hover .waf-more__disc { color: var(--paper); }

.waf-more__disc svg {
  position: relative;
  width: 40%;
}

/* ==========================================================================
   Practice
   ========================================================================== */
.waf-cap {
  display: grid;
  grid-template-columns: 4rem minmax(0, 0.9fr) minmax(0, 1.4fr);
  gap: var(--gutter);
  padding-block: clamp(1.8rem, 1.2rem + 2vw, 3rem);
  border-top: var(--rule) solid var(--hairline-inv);
  align-items: start;
}

.waf-cap:last-child { border-bottom: var(--rule) solid var(--hairline-inv); }

.waf-cap__title {
  font-size: var(--step-2);
  letter-spacing: -0.035em;
  line-height: 1;
  margin: 0;
}

.waf-cap__body { max-width: 46ch; }
.waf-cap__body p { margin: 0; }

.waf-cap__items {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 0.9rem;
  margin: 1.4rem 0 0;
  padding: 0;
  list-style: none;
}

.waf-cap__items li {
  font-size: var(--step--1);
  letter-spacing: 0.04em;
  color: var(--charcoal-300);
  border: var(--rule) solid var(--hairline-inv);
  border-radius: 100px;
  padding: 0.35em 0.9em;
}

@media (max-width: 820px) {
  .waf-cap { grid-template-columns: 2.5rem minmax(0, 1fr); }
  .waf-cap__body { grid-column: 2 / -1; }
}

/* ==========================================================================
   The SHIFT Method
   ========================================================================== */
.waf-method { padding-block: var(--section); }

.waf-method__intro {
  font-size: var(--step-2);
  letter-spacing: -0.032em;
  line-height: 1.04;
  max-width: 20ch;
  margin: 0 0 clamp(2rem, 4vw, 3.5rem);
}

.waf-stage {
  display: grid;
  grid-template-columns: clamp(5rem, 12vw, 11rem) minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--gutter);
  padding-block: clamp(2.2rem, 1.6rem + 3vw, 4rem);
  border-top: var(--rule) solid var(--hairline);
  align-items: start;
}

.waf-stage:last-of-type { border-bottom: var(--rule) solid var(--hairline); }

/* The initial is the whole point of the ladder — set it big and let it carry
   the column. */
.waf-stage__letterwrap {
  position: relative;
  display: block;
}

.waf-stage__letter {
  font-size: clamp(3.5rem, 2rem + 7vw, 8rem);
  line-height: 0.8;
  letter-spacing: -0.06em;
  display: block;
  will-change: transform, filter, opacity;
}

/* Forge — fragments that converge on the letter and are struck into it. */
.waf-stage__particles {
  position: absolute;
  inset: 0;
  display: block;
  pointer-events: none;
  z-index: 1;
}

.waf-stage__particles i {
  position: absolute;
  top: 45%;
  left: 32%;
  width: 7px;
  height: 7px;
  background: var(--ink);
  display: block;
  opacity: 0;
}

.waf-stage__name {
  font-size: var(--step-2);
  letter-spacing: -0.035em;
  line-height: 1;
  margin: 0;
  will-change: transform, filter, opacity;
}

.waf-stage__line {
  color: var(--charcoal-500);
  margin: 0.5em 0 0;
  letter-spacing: -0.01em;
}

.waf-stage__body {
  max-width: 46ch;
  color: var(--charcoal-700);
  line-height: 1.5;
}

.waf-stage__body p { margin: 0; }

.waf-stage__question {
  margin-top: 1.5em;
  padding-top: 1em;
  border-top: var(--rule) solid var(--hairline-soft);
  display: block;
  max-width: 42ch;
  letter-spacing: -0.012em;
}

.waf-stage__qlabel {
  display: block;
  margin-bottom: 0.35em;
}

.waf-stage__outputs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 0.8rem;
  margin: 1.4rem 0 0;
  padding: 0;
  list-style: none;
}

.waf-stage__outputs li {
  font-size: var(--step--1);
  letter-spacing: 0.04em;
  color: var(--charcoal-500);
  border: var(--rule) solid var(--hairline);
  border-radius: 100px;
  padding: 0.35em 0.9em;
}

@media (max-width: 900px) {
  .waf-stage { grid-template-columns: clamp(3.5rem, 14vw, 6rem) minmax(0, 1fr); }
  .waf-stage__body { grid-column: 2 / -1; }
}

.waf-bookend {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--gutter);
  margin-top: clamp(3rem, 2rem + 4vw, 5.5rem);
}

.waf-bookend__item {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}

.waf-bookend__q {
  font-size: var(--step-2);
  letter-spacing: -0.032em;
  line-height: 1.04;
  max-width: 20ch;
}

@media (max-width: 700px) {
  .waf-bookend {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 2rem;
  }
}

/* ==========================================================================
   The system
   ========================================================================== */
.waf-system {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--gutter);
  align-items: start;
}

.waf-system__aside {
  grid-column: 1 / span 4;
  position: sticky;
  top: 22vh;
}

.waf-system__count {
  font-size: var(--step-3);
  letter-spacing: -0.04em;
  line-height: 1;
  display: flex;
  align-items: baseline;
  gap: 0.15em;
}

.waf-system__count small {
  font-size: var(--step-0);
  letter-spacing: 0.06em;
  color: var(--charcoal-300);
}

.waf-system__note {
  margin: 1.4rem 0 0;
  max-width: 30ch;
}

.waf-system__col { grid-column: 6 / -1; }

.waf-system__col ol {
  list-style: none;
  margin: 0;
  padding: 0;
}

.waf-system__how {
  font-size: var(--step--1);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 400;
  color: var(--charcoal-300);
  margin: 0 0 1.6rem;
}

.waf-system__item {
  padding-block: clamp(2.5rem, 2rem + 4vw, 5rem);
  border-top: var(--rule) solid var(--hairline-inv);
  opacity: 0.28;
  transition: opacity 0.6s var(--ease-out);
}

.waf-system__item[data-active="true"] { opacity: 1; }

.waf-system__role {
  display: flex;
  align-items: baseline;
  gap: 0.8em;
  margin-bottom: 0.7em;
}

.waf-system__name {
  font-size: var(--step-2);
  letter-spacing: -0.035em;
  line-height: 1;
  margin: 0;
}

.waf-system__does {
  max-width: 44ch;
  color: var(--charcoal-300);
  line-height: 1.5;
  margin: 0.8em 0 0;
}

@media (max-width: 900px) {
  .waf-system__aside {
    grid-column: 1 / -1;
    position: static;
    margin-bottom: 2rem;
  }
  .waf-system__col { grid-column: 1 / -1; }
  .waf-system__item { opacity: 1; }
}

/* ==========================================================================
   Contact
   ========================================================================== */
.waf-contact {
  /* Extra floor so the fixed assistant pill never lands on the colophon. */
  padding-block: var(--section) clamp(5.5rem, 4rem + 4vw, 7rem);
}

.waf-contact__big {
  font-size: var(--step-4);
  line-height: 0.86;
  letter-spacing: -0.05em;
  font-weight: 400;
  margin: 0;
}

.waf-contact__action {
  display: inline-flex;
  align-items: center;
  gap: 1em;
  margin-top: clamp(2.5rem, 2rem + 3vw, 4rem);
  font-size: var(--step-1);
  letter-spacing: -0.02em;
  text-align: left;

  /* It is a button with the assistant on and a mailto link with it off, and
     the band should not be able to tell which. */
  text-decoration: none;
}

.waf-contact__disc {
  width: clamp(3rem, 2rem + 3vw, 4.5rem);
  aspect-ratio: 1;
  border-radius: 50%;
  border: var(--rule) solid var(--hairline-inv);
  display: grid;
  place-items: center;
  flex: none;
  overflow: hidden;
  position: relative;
  transition: color 0.5s var(--ease-out);
}

.waf-contact__disc::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--paper);
  transform: scale(0);
  border-radius: 50%;
  transition: transform 0.55s var(--ease-out);
}

.waf-contact__action:hover .waf-contact__disc::before { transform: scale(1); }
.waf-contact__action:hover .waf-contact__disc { color: var(--ink); }

.waf-contact__disc svg {
  position: relative;
  width: 40%;
}

.waf-contact__direct {
  margin-top: 2rem;
  max-width: 44ch;
}

.waf-colophon {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem var(--gutter);
  justify-content: space-between;
  align-items: baseline;
  margin-top: clamp(5rem, 3rem + 8vw, 10rem);
  padding-top: 1.4rem;
  border-top: var(--rule) solid var(--hairline-inv);
  font-size: var(--step--1);
  letter-spacing: 0.04em;
  color: var(--charcoal-300);
}

.waf-colophon__links {
  display: flex;
  gap: 1.4rem;
  flex-wrap: wrap;
}

/* ==========================================================================
   A standalone page
   ========================================================================== */
.waf-page { padding-top: clamp(8rem, 6rem + 6vw, 12rem); }

.waf-prose {
  max-width: 62ch;
  font-size: var(--step-1);
  line-height: 1.45;
  letter-spacing: -0.015em;
  color: var(--charcoal-700);
}

.waf-prose h2,
.waf-prose h3 {
  font-weight: 400;
  letter-spacing: -0.03em;
  color: var(--ink);
  margin: 2em 0 0.6em;
}

.waf-prose a { color: inherit; }

/* ==========================================================================
   Case study sheets
   ========================================================================== */
.waf-scrim {
  position: fixed;
  inset: 0;
  background: rgba(11, 11, 10, 0.55);
  z-index: 100;
  opacity: 0;
  pointer-events: none;
}

.waf-scrim[data-open="true"] { pointer-events: auto; }

.waf-sheet {
  position: fixed;
  inset: 0;
  z-index: 110;
  background: var(--paper);
  color: var(--ink);
  overflow-y: auto;
  overscroll-behavior: contain;
  transform: translateY(100%);
  will-change: transform;
}

.waf-sheet__bar {
  position: sticky;
  top: 0;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gutter);
  padding: 1.1rem var(--gutter);
  background: var(--paper);
  border-bottom: var(--rule) solid var(--hairline);
}

.waf-sheet__meta {
  display: flex;
  align-items: baseline;
  gap: 1.2rem;
  min-width: 0;
}

.waf-sheet__meta strong {
  font-weight: 400;
  letter-spacing: -0.02em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.waf-sheet__close {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  font-size: var(--step--1);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  flex: none;
}

.waf-sheet__close svg { width: 0.85em; }

.waf-sheet__hero {
  padding: clamp(3rem, 2rem + 6vw, 7rem) var(--gutter) clamp(2rem, 1.5rem + 3vw, 4rem);
}

.waf-sheet__hero h2 {
  font-size: var(--step-3);
  line-height: 0.94;
  letter-spacing: -0.038em;
  font-weight: 400;
  max-width: 20ch;
  margin: 0;
}

.waf-sheet__facts {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--gutter);
  margin-top: clamp(2.5rem, 2rem + 3vw, 4rem);
  padding-top: 1.1rem;
  border-top: var(--rule) solid var(--hairline);
}

.waf-sheet__fact {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.waf-sheet__fact span:last-child { letter-spacing: -0.01em; }

.waf-sheet__deliverables {
  margin: clamp(1.6rem, 1.2rem + 1.5vw, 2.4rem) 0 0;
  max-width: 66ch;
  font-size: var(--step-1);
  line-height: 1.35;
  letter-spacing: -0.018em;
  color: var(--charcoal-700);
}

/* --- the work ------------------------------------------------------------- */
.waf-gallery {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--gutter);
  padding: clamp(1.5rem, 1rem + 2vw, 3rem) var(--gutter);
}

/* A single image gets the full measure; pairs sit side by side. */
.waf-gallery[data-count="1"] { grid-template-columns: minmax(0, 1fr); }

.waf-plate {
  width: 100%;
  height: auto;
  background: var(--paper-deep);
  display: block;
}

@media (max-width: 720px) {
  .waf-gallery { grid-template-columns: minmax(0, 1fr); }
}

/* --- chapters ------------------------------------------------------------- */
.waf-chapter {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--gutter);
  padding: clamp(3rem, 2rem + 4vw, 5.5rem) var(--gutter);
  border-top: var(--rule) solid var(--hairline);
}

.waf-chapter__label { grid-column: 1 / span 3; }
.waf-chapter__body { grid-column: 5 / span 7; }

.waf-chapter__body p {
  font-size: var(--step-1);
  line-height: 1.35;
  letter-spacing: -0.018em;
  max-width: 54ch;
  margin: 0;
}

.waf-list {
  list-style: none;
  margin: 2rem 0 0;
  padding: 0;
  border-top: var(--rule) solid var(--hairline-soft);
}

.waf-list li {
  display: grid;
  grid-template-columns: 2.2rem 1fr;
  gap: 1rem;
  padding-block: 0.85rem;
  border-bottom: var(--rule) solid var(--hairline-soft);
  color: var(--charcoal-700);
}

.waf-list li span:first-child {
  font-size: var(--step--1);
  letter-spacing: 0.08em;
  color: var(--charcoal-300);
}

.waf-step {
  padding-block: 1.6rem;
  border-bottom: var(--rule) solid var(--hairline-soft);
}

.waf-step:first-child { border-top: var(--rule) solid var(--hairline-soft); }

.waf-step__head {
  display: flex;
  align-items: baseline;
  gap: 0.9em;
  margin-bottom: 0.6em;
}

.waf-step__stage {
  font-size: var(--step-1);
  letter-spacing: -0.025em;
}

.waf-step p {
  color: var(--charcoal-700);
  font-size: var(--step-0) !important;
  line-height: 1.5;
  max-width: 60ch;
}

/* One column — a credit block reads as a list, and long names stop colliding
   with the role label. */
.waf-credits {
  list-style: none;
  margin: 0.5rem 0 0;
  padding: 0;
  max-width: 44ch;
}

.waf-credit {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding-block: 0.8rem;
  border-bottom: var(--rule) solid var(--hairline-soft);
}

.waf-credit dt {
  font-size: var(--step--1);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--charcoal-300);
}

.waf-credit dd {
  letter-spacing: -0.01em;
  text-align: right;
  margin: 0;
}

.waf-sheet__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gutter);
  flex-wrap: wrap;
  padding: clamp(2.5rem, 2rem + 3vw, 4rem) var(--gutter) clamp(4rem, 3rem + 4vw, 6rem);
  border-top: var(--rule) solid var(--hairline);
}

.waf-sheet__next {
  display: inline-flex;
  align-items: baseline;
  gap: 0.8em;
  font-size: var(--step-2);
  letter-spacing: -0.032em;
}

@media (max-width: 900px) {
  .waf-chapter__label,
  .waf-chapter__body { grid-column: 1 / -1; }
  .waf-chapter__label { margin-bottom: 0.6rem; }
  .waf-sheet__facts {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    row-gap: 1.6rem;
  }
}

/* ==========================================================================
   The studio assistant
   ========================================================================== */
.waf-invite {
  position: fixed;
  right: var(--gutter);
  bottom: var(--gutter);
  z-index: 70;
  display: inline-flex;
  align-items: center;
  gap: 0.75em;
  padding: 0.75em 1.2em 0.75em 0.95em;
  background: var(--ink);
  color: var(--paper);
  border-radius: 100px;
  font-size: var(--step-0);
  letter-spacing: -0.01em;
  transform: translateY(180%);
  will-change: transform;
  transition: transform 0.75s var(--ease-out), gap 0.5s var(--ease-out);
}

/* Appears only once you're actually reading — an offer, not an ambush. */
.waf-invite[data-show="true"] { transform: translateY(0); }

/* Flips when it's sitting over one of the ink sections, so it never sinks
   into the ground behind it. */
.waf-invite[data-dark="true"] {
  background: var(--paper);
  color: var(--ink);
}

.waf-invite[data-dark="true"] .waf-invite__dot,
.waf-invite[data-dark="true"] .waf-invite__dot::after {
  background: var(--ink);
}

.waf-invite:hover { gap: 1.1em; }

.waf-invite__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--paper);
  flex: none;
  position: relative;
}

.waf-invite__dot::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: var(--paper);
  animation: waf-halo 2.6s var(--ease-out) infinite;
}

@keyframes waf-halo {
  0% { transform: scale(1); opacity: 0.45; }
  70%, 100% { transform: scale(3.6); opacity: 0; }
}

.waf-a-scrim {
  position: fixed;
  inset: 0;
  background: rgba(11, 11, 10, 0.42);
  z-index: 80;
  opacity: 0;
  pointer-events: none;
}

.waf-a-scrim[data-open="true"] { pointer-events: auto; }

.waf-panel {
  position: fixed;
  top: 0;
  right: 0;
  height: 100svh;
  width: min(460px, 100vw);
  background: var(--paper);
  color: var(--ink);
  z-index: 90;
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  will-change: transform;
  box-shadow: -1px 0 0 var(--hairline);
}

.waf-panel__top {
  padding: 1.4rem var(--gutter) 1rem;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  flex: none;
}

.waf-panel__who {
  display: flex;
  flex-direction: column;
  gap: 0.3em;
}

.waf-panel__name { letter-spacing: -0.02em; }

.waf-panel__close {
  font-size: var(--step--1);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--charcoal-500);
  padding: 0.3em 0;
  transition: color 0.35s var(--ease-out);
}

.waf-panel__close:hover { color: var(--ink); }

.waf-progress {
  height: 1px;
  background: var(--hairline);
  flex: none;
  margin-inline: var(--gutter);
  position: relative;
  overflow: hidden;
}

.waf-progress__fill {
  position: absolute;
  inset: 0;
  background: var(--ink);
  transform-origin: left center;
  transform: scaleX(0);
  transition: transform 0.9s var(--ease-out);
}

.waf-log {
  flex: 1;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 1.6rem var(--gutter) 1rem;
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
  scrollbar-width: thin;
}

.waf-msg {
  max-width: 30ch;
  line-height: 1.45;
  letter-spacing: -0.012em;
  margin: 0;
}

/* The assistant speaks in plain set text with a rule above — it reads like a
   note, not a chat app. */
.waf-msg--a { align-self: flex-start; }

.waf-msg--u {
  align-self: flex-end;
  text-align: right;
  color: var(--charcoal-500);
  max-width: 26ch;
}

.waf-msg--u::before {
  content: "";
  display: block;
  width: 1.4rem;
  height: 1px;
  background: var(--hairline);
  margin: 0 0 0.5rem auto;
}

.waf-typing {
  align-self: flex-start;
  display: inline-flex;
  gap: 0.32em;
  padding-block: 0.4em;
}

.waf-typing i {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--charcoal-300);
  animation: waf-dots 1.25s var(--ease-in-out) infinite;
}

.waf-typing i:nth-child(2) { animation-delay: 0.14s; }
.waf-typing i:nth-child(3) { animation-delay: 0.28s; }

@keyframes waf-dots {
  0%, 100% { opacity: 0.25; transform: translateY(0); }
  40% { opacity: 1; transform: translateY(-2px); }
}

.waf-answer {
  flex: none;
  padding: 1rem var(--gutter) calc(var(--gutter) * 0.9);
  border-top: 1px solid var(--hairline);
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}

.waf-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.waf-chip {
  border: 1px solid var(--hairline);
  border-radius: 100px;
  padding: 0.5em 1em;
  font-size: var(--step--1);
  letter-spacing: 0.01em;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  transition: color 0.4s var(--ease-out), border-color 0.4s var(--ease-out);
}

.waf-chip::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--ink);
  transform: translateY(101%);
  transition: transform 0.45s var(--ease-out);
  z-index: -1;
}

.waf-chip:hover {
  color: var(--paper);
  border-color: var(--ink);
}

.waf-chip:hover::before { transform: translateY(0); }

.waf-field {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  border-bottom: 1px solid var(--hairline);
  padding-bottom: 0.55rem;
  transition: border-color 0.4s var(--ease-out);
}

.waf-field:focus-within { border-color: var(--ink); }

.waf-field input {
  flex: 1;
  min-width: 0;
  outline: none;
  font: inherit;
  color: inherit;
  background: none;
  border: none;
}

.waf-field input::placeholder { color: var(--charcoal-300); }

.waf-send {
  flex: none;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background: var(--ink);
  color: var(--paper);
  display: grid;
  place-items: center;
  border: none;
  cursor: pointer;
  transition: transform 0.4s var(--ease-out), opacity 0.3s linear;
}

.waf-send:disabled {
  opacity: 0.22;
  cursor: default;
}

.waf-send:not(:disabled):hover { transform: translateX(2px); }
.waf-send svg { width: 45%; }

.waf-error {
  font-size: var(--step--1);
  color: var(--charcoal-700);
}

.waf-done {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}

.waf-summary {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.4rem 1rem;
  font-size: var(--step--1);
  line-height: 1.5;
  margin: 0;
}

.waf-summary dt {
  color: var(--charcoal-300);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.waf-summary dd {
  color: var(--ink);
  margin: 0;
}

@media (max-width: 520px) {
  .waf-panel { width: 100vw; }
  .waf-invite span { display: none; }
  .waf-invite { padding: 0.9em; }
}

/* ==========================================================================
   Elementor editor: no pinning, no scrubbing, nothing hidden
   ========================================================================== */
body.elementor-editor-active .waf-nav,
body.elementor-editor-preview .waf-nav {
  position: relative;
}

body.elementor-editor-active .waf-invite,
body.elementor-editor-preview .waf-invite,
body.elementor-editor-active .waf-panel,
body.elementor-editor-preview .waf-panel,
body.elementor-editor-active .waf-sheet,
body.elementor-editor-preview .waf-sheet {
  position: relative;
  transform: none;
  height: auto;
  inset: auto;
  width: 100%;
  box-shadow: none;
}

body.elementor-editor-active .waf-sheet,
body.elementor-editor-preview .waf-sheet {
  display: none;
}

/* A target for an in-page link that takes no space of its own. */
.waf-anchor {
  display: block;
  height: 0;
}

/* The nav is fixed, so an in-page jump would park the target's first line
   underneath it. Reserve the bar's own height above anchored sections. */
.waf-anchor,
#method,
#hero,
#top {
  scroll-margin-top: 5.5rem;
}