/* =========================================================
   About page — same visual language as Home (NHG + mono labels,
   © subheads, WDX dividers, red accent, black bands), new layouts.
   ========================================================= */

/* ---------- 01 · hello: black section, chrome lettermark + submark in the left column ---------- */
.a-intro { background: #0b0b0b; color: #fff; margin-top: -80px; padding: 150px 0 96px; min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; }   /* fills the viewport, running up under the fixed nav */
.a-intro .lbl--muted { color: #4a4a4f; }
.a-intro .work__labels { border-bottom-color: rgba(255,255,255,.12); }
.a-intro__split { flex: 1; padding-top: 80px; min-height: 0; }
.a-intro .split__aside { min-height: 100%; }
.a-intro__mark { position: relative; width: min(460px, 100%); aspect-ratio: 2.1845; margin: 48px 0; }
.a-intro__mark .liquid-chrome { position: absolute; inset: 0; }
.a-intro .aside__link { color: #6e6e74; }
.a-intro .aside__link:hover { color: #fff; }
.a-intro .icon--hello { filter: brightness(0) invert(1); }
.icon--hello { width: 42px; height: 40px; }
.a-intro__statement { font-weight: 400; font-size: 52px; line-height: 1.08; letter-spacing: -0.02em; max-width: 640px; text-wrap: pretty; }
.a-intro__log { margin-top: 56px; font-size: 11px; line-height: 1.25; color: #5c5c62; letter-spacing: .02em; }

/* ---------- 03 · story: portrait + text + timeline ---------- */
.a-story {
  width: min(var(--content), 100% - 2 * var(--pad)); margin: 0 auto; padding-top: 140px;
  display: grid; grid-template-columns: 5fr 6fr; column-gap: var(--gap); align-items: start;
}
.a-story__portrait { position: sticky; top: 110px; }
.a-story__frame { overflow: hidden; aspect-ratio: 4 / 5; background: #eee; }
.a-story__frame img { width: 100%; height: 112%; object-fit: cover; object-position: 50% 30%; transform: translate3d(0, var(--py, -6%), 0); will-change: transform; }
.a-story__portrait figcaption { display: flex; justify-content: space-between; margin-top: 12px; font-size: 11px; color: var(--dark-grey); letter-spacing: .02em; }

.a-story__lead { margin-top: 40px; font-size: 34px; line-height: 1.16; letter-spacing: -0.02em; text-wrap: pretty; }
.a-fn { font-size: .45em; vertical-align: super; color: var(--red); margin-left: 1px; }
.a-story__body { margin-top: 32px; max-width: 520px; font-size: 16px; line-height: 1.45; color: var(--darker-grey); }

.a-timeline { list-style: none; margin: 72px 0 0; padding: 0; border-top: 1px solid var(--light-grey); }
.a-timeline li {
  position: relative; display: grid; grid-template-columns: 120px 1fr auto; column-gap: 24px; align-items: baseline;
  padding: 20px 4px; border-bottom: 1px solid var(--light-grey); cursor: default;
}
.a-timeline li::before { content: ""; position: absolute; left: 0; bottom: -1px; height: 1px; width: 100%; background: var(--red); transform: scaleX(0); transform-origin: left; transition: transform .6s cubic-bezier(.65,0,.35,1); }
.a-timeline li:hover::before { transform: scaleX(1); }
.a-timeline__yr { font-size: 11px; color: var(--dark-grey); letter-spacing: .02em; transition: color .3s; }
.a-timeline li:hover .a-timeline__yr { color: var(--red); }
.a-timeline__role { font-weight: 500; font-size: 20px; letter-spacing: -0.01em; transition: transform .45s cubic-bezier(.22,.8,.2,1); }
.a-timeline__role em { font-style: normal; font-weight: 400; color: var(--darker-grey); margin-left: 10px; font-size: 15px; }
.a-timeline li:hover .a-timeline__role { transform: translateX(8px); }
.a-timeline__where { font-size: 11px; color: var(--dark-grey); letter-spacing: .02em; }
.a-timeline__note {
  grid-column: 2 / -1; font-size: 14px; line-height: 1.4; color: var(--darker-grey);
  max-height: 0; opacity: 0; overflow: hidden; transition: max-height .5s cubic-bezier(.65,0,.35,1), opacity .4s, margin .5s;
}
.a-timeline li:hover .a-timeline__note, .a-timeline li:focus-within .a-timeline__note { max-height: 60px; opacity: 1; margin-top: 8px; }
.a-fn-note { margin-top: 18px; font-size: 10px; color: var(--dark-grey); letter-spacing: .02em; }

/* ---------- 03 · process ---------- */
.a-process { width: min(var(--content), 100% - 2 * var(--pad)); margin: 0 auto; padding-top: 140px; }
.a-process__head { display: flex; justify-content: space-between; align-items: flex-start; gap: 40px; }
.icon--flag { width: 28px; height: 40px; }
.a-phases { list-style: none; margin: 96px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); }
.a-phase { position: relative; padding: 28px 32px 48px 0; border-top: 1px solid #000; }
.a-phase + .a-phase { padding-left: 28px; border-left: 1px solid var(--light-grey); }
.a-phase__top { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; }
.a-phase__num { display: block; font-weight: 300; font-size: 120px; line-height: .9; letter-spacing: -0.05em; color: var(--light-grey); transition: color .5s, transform .6s cubic-bezier(.22,.8,.2,1); transform-origin: left bottom; }
.a-phase:hover .a-phase__num { color: var(--red); transform: translateY(-6px); transition-delay: .12s; }   /* short delay on the way in only */
.a-phase__icon { height: 40px; width: auto; flex: none; margin-bottom: 6px; transition: transform .6s cubic-bezier(.22,.8,.2,1); }   /* same motion as the number */
.a-phase:hover .a-phase__icon { transform: translateY(-6px); transition-delay: .12s; }
.a-phase__title { margin: 56px 0 0; font-weight: 500; font-size: 24px; letter-spacing: -0.01em; }
.a-phase__text { margin-top: 14px; max-width: 300px; font-size: 15px; line-height: 1.45; color: var(--darker-grey); }

/* ---------- 05 · what I do (+ the director's-frame easter egg) ---------- */
.a-do { position: relative; padding-top: 140px; }
.a-do__link { gap: 29px; }
.a-do__link a { color: var(--dark-grey); transition: color .2s; }
.a-do__link a:hover { color: #000; }
.a-do__link a:hover .arrow { transform: translateX(4px); }
.a-do__icon { display: block; line-height: 0; cursor: pointer; transition: transform .3s; }
.a-do__icon.is-play { animation: a-wiggle .5s ease-in-out; }
.a-do__icon:focus-visible { outline: 2px solid var(--red); outline-offset: 6px; }
.icon--art { width: 63px; height: 60px; }
@keyframes a-wiggle { 25% { transform: rotate(-8deg); } 75% { transform: rotate(6deg); } }
.a-do__statement { font-size: 52px; line-height: 1.08; letter-spacing: -0.02em; max-width: 640px; text-wrap: pretty; }
.a-services { list-style: none; margin: 64px 0 0; padding: 0; max-width: 620px; display: grid; grid-template-columns: 1fr 1fr; column-gap: 24px; }
.a-services li { display: flex; gap: 14px; align-items: baseline; padding: 12px 0; border-bottom: 1px solid var(--light-grey); font-size: 16px; transition: padding .35s cubic-bezier(.22,.8,.2,1), color .25s; }
.a-services li .mono { font-size: 10px; color: var(--dark-grey); }
.a-services li:hover { padding-left: 8px; color: var(--red); }

/* the flying clapper: a clone of the icon animated by js/about.js */
.a-director { position: absolute; z-index: 5; pointer-events: auto; cursor: pointer; transform-origin: 50% 50%; line-height: 0; }
.a-director img { width: 100%; height: 100%; }
.a-do__icon.is-away { visibility: hidden; }

/* ---------- 06 · red closing band ---------- */
.a-cta { margin-top: 200px; }
.a-cta__inner { width: min(var(--content), 100% - 2 * var(--pad)); margin: 0 auto; padding: 120px 0 140px; }
.a-cta__status { display: flex; align-items: center; gap: 10px; font-size: 11px; letter-spacing: .02em; color: rgba(255,255,255,.75); }
.a-cta__dot { width: 7px; height: 7px; border-radius: 50%; background: #fff; animation: a-pulse 1.8s ease-in-out infinite; }
@keyframes a-pulse { 50% { opacity: .25; transform: scale(.7); } }
.a-cta__title { margin-top: 28px; font-weight: 500; font-size: clamp(48px, 8.4vw, 124px); line-height: .98; letter-spacing: -0.04em; max-width: 12ch; }
.a-cta__actions { margin-top: 56px; display: flex; align-items: center; gap: 40px; flex-wrap: wrap; }
.a-cta__mail { font-size: 18px; border-bottom: 1px solid rgba(255,255,255,.4); padding-bottom: 4px; transition: border-color .25s; }
.a-cta__mail:hover { border-color: #fff; }
.a-cta__mail:hover .arrow { transform: translateX(4px); }

/* =========================================================
   TABLET
   ========================================================= */
@media (max-width: 1439px) {
  .a-intro { padding: 150px 0 100px; }
  .a-intro__split { padding-top: 64px; min-height: 0; row-gap: 40px; }
  .a-intro .split__aside { min-height: 0; flex-direction: column; align-items: flex-start; }
  .a-intro__mark { width: min(420px, 100%); margin: 40px 0; }
  .a-phases { grid-template-columns: 1fr 1fr; row-gap: 40px; }
  .a-phase:nth-child(3) { padding-left: 0; border-left: 0; }
  .a-phase__num { font-size: 104px; }
  .a-intro__statement { font-size: 44px; max-width: none; }
  .a-story { grid-template-columns: 1fr 1fr; column-gap: 56px; padding-top: 100px; }
  .a-story__lead { font-size: 28px; }
  .a-process, .a-do { padding-top: 100px; }
  .a-do__statement { font-size: 40px; max-width: none; }
  .a-services { max-width: none; }
  .a-cta { margin-top: 140px; }
}

/* =========================================================
   PHONE
   ========================================================= */
@media (max-width: 809px) {
  .a-intro { margin-top: -72px; padding: 120px 0 72px; }
  .a-intro__split { padding-top: 40px; }
  .a-intro__mark { width: 100%; margin: 32px 0; }
  .a-intro__statement { font-size: 30px; line-height: 1.12; }
  .a-intro__log { margin-top: 32px; }
  .a-story { grid-template-columns: 1fr; row-gap: 48px; padding-top: 56px; }
  .a-story__portrait { position: relative; top: 0; }
  .a-story__lead { margin-top: 28px; font-size: 24px; }
  .a-story__body { font-size: 15px; }
  .a-timeline { margin-top: 48px; }
  .a-timeline li { grid-template-columns: 1fr auto; row-gap: 6px; }
  .a-timeline__yr { grid-column: 1 / -1; }
  .a-timeline__role { font-size: 17px; }
  .a-timeline__role em { display: block; margin: 2px 0 0; font-size: 14px; }
  .a-timeline__note { grid-column: 1 / -1; }

  /* phone: résumé rows and phases are tap-to-expand (about.js toggles .is-open); the open row takes the desktop hover look */
  .a-timeline li, .a-phase { cursor: pointer; -webkit-tap-highlight-color: transparent; }
  .a-timeline__yr, .a-phase__title { display: flex; justify-content: space-between; align-items: baseline; }
  .a-timeline__yr::after, .a-phase__title::after { content: "+"; font-family: inherit; font-weight: 400; font-size: 18px; line-height: 1; color: #000; transition: transform .45s cubic-bezier(.22,.8,.2,1); }
  .is-open > .a-timeline__yr::after, .is-open > .a-phase__title::after { transform: rotate(45deg); }
  .a-timeline li:hover::before, .a-timeline li:hover .a-timeline__role { transform: none; }
  .a-timeline li:hover .a-timeline__yr { color: var(--dark-grey); }
  .a-timeline li:hover .a-timeline__note, .a-timeline li:focus-within .a-timeline__note { max-height: 0; opacity: 0; margin-top: 0; }
  .a-timeline li.is-open::before { transform: scaleX(1); }
  .a-timeline li.is-open .a-timeline__yr { color: var(--red); }
  .a-timeline li.is-open .a-timeline__note { max-height: 120px; opacity: 1; margin-top: 4px; }
  .a-phase:hover .a-phase__num { color: var(--light-grey); transform: none; }
  .a-phase:hover .a-phase__icon { transform: none; }
  .a-phase.is-open .a-phase__num { color: var(--red); transform: translateY(-6px); }
  .a-phase.is-open .a-phase__icon { transform: translateY(-6px); }
  .a-phase__text { max-height: 0; opacity: 0; overflow: hidden; margin-top: 0; transition: max-height .5s cubic-bezier(.65,0,.35,1), opacity .4s, margin .5s; }
  .a-phase.is-open .a-phase__text { max-height: 160px; opacity: 1; margin-top: 14px; }
  .a-process { padding-top: 56px; }
  .a-process__head { flex-direction: column; gap: 28px; }
  .a-phases { grid-template-columns: 1fr; margin-top: 48px; row-gap: 0; }
  .a-phase, .a-phase + .a-phase, .a-phase:nth-child(3) { padding: 20px 0 36px; border-left: 0; }
  .a-phase + .a-phase { border-top: 1px solid var(--light-grey); }
  .a-phase__num { font-size: 80px; }
  .a-phase__title { margin-top: 28px; font-size: 20px; }
  .a-do { padding-top: 56px; }
  .a-do__statement { font-size: 28px; line-height: 1.14; text-align: left; }
  .a-services { grid-template-columns: 1fr; margin-top: 40px; }
  .a-cta { margin-top: 96px; }
  .a-cta__inner { padding: 64px 0 80px; }
  .a-cta__title { font-size: 48px; }
  .a-cta__actions { margin-top: 40px; gap: 24px; }
}

@media (prefers-reduced-motion: reduce) {
  .a-story__frame img { transform: none; height: 100%; }
  .a-cta__dot { animation: none; }
}