/*  About (/about) only. Linked right after site.css, before any other sheet, so these
 *  rules keep the place in the cascade they had inside site.css.
 *
 *  site.css is render-blocking on every page, and most visitors arrive on a phone, half of
 *  them inside Instagram's browser, so a rule only one page uses no longer rides along
 *  with every other page (October 2026).
 */

/* ══════════════════════════════════════════════════════════════════════════════
   About — /about
   ══════════════════════════════════════════════════════════════════════════════
   A straight port of About.dc.html from the Claude Design project. Every number here
   comes from that file; the design's inline styles cannot ship, because style-src
   'self' drops them silently in production and nowhere else.

   The original coloured accents are retained; step cards use the shared white
   panel background to fit the site palette. */

body.about-page {
  --abt-wide: min(1240px, calc(100% - 64px));
  --abt-paper: var(--panel);
  --abt-ink-lede: #4a4a4a;
  --abt-ink-body: #5c5c5c;
  --abt-ink-mut: #8a8a93;
  --abt-hair: rgba(47, 47, 47, .14);
}

/* ── the three circles behind this page ────────────────────────────────────── */
/* Gold top right, green on the left, dusty rose low and right. Not the Win Win set:
   that page leads with green and carries a coral third. */
body.about-page .site-orb-1 {
  top: -14vh;
  right: -8vw;
  width: 46vw;
  height: 46vw;
  background: radial-gradient(circle, rgba(213, 185, 66, .2), transparent 68%);
  animation-duration: 28s;
}

body.about-page .site-orb-2 {
  top: 40vh;
  left: -12vw;
  width: 38vw;
  height: 38vw;
  background: radial-gradient(circle, rgba(26, 147, 111, .16), transparent 68%);
  animation-duration: 34s;
  animation-direction: reverse;
}

body.about-page .site-orb-3 {
  right: 16vw;
  bottom: -10vh;
  width: 32vw;
  height: 32vw;
  background: radial-gradient(circle, rgba(162, 103, 105, .14), transparent 70%);
  animation-duration: 30s;
}

/* ── shared shell ──────────────────────────────────────────────────────────── */
.abt-sec {
  width: var(--abt-wide);
  margin: 0 auto;
}

.abt-eyebrow {
  margin: 0 0 12px;
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.abt-eyebrow.gold { color: #7a6410; }
.abt-eyebrow.green { color: #147a5c; }
.abt-eyebrow.coral { color: #c4381f; }

.abt-eyebrow.mute {
  font-size: 11px;
  font-weight: 400;
  letter-spacing: .14em;
  color: var(--abt-ink-mut);
}

.abt-sec-head {
  max-width: 700px;
  margin-bottom: 38px;
}

.abt-sec-head h2 {
  margin: 0;
  font-size: clamp(30px, 3.6vw, 48px);
  font-weight: 700;
  line-height: 1.04;
  letter-spacing: -.025em;
}

/* ── hero ──────────────────────────────────────────────────────────────────── */
.abt-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  gap: 64px;
  align-items: start;
  padding: 88px 0 60px;
}

.abt-hero .abt-eyebrow {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
}

.abt-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--gold);
  animation: ww-pulse 2.4s ease-in-out infinite;
}

.abt-hero h1 {
  margin: 0 0 22px;
  font-size: clamp(40px, 5.4vw, 70px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.035em;
  text-wrap: balance;
}

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

.abt-lede {
  margin: 0 0 20px;
  max-width: 50ch;
  color: var(--abt-ink-lede);
  font-size: 20px;
  line-height: 1.55;
  text-wrap: pretty;
}

.abt-hero-copy > p:last-child {
  margin: 0;
  max-width: 50ch;
  color: var(--abt-ink-body);
  font-size: 17px;
  line-height: 1.65;
}

.abt-studio {
  margin: 0;
  animation: ww-float 13s ease-in-out infinite;
}

.abt-studio img {
  display: block;
  width: 100%;
  height: clamp(420px, 54vh, 560px);
  border-radius: 14px;
  object-fit: cover;
  object-position: 50% 32%;
  box-shadow: 0 40px 90px rgba(47, 47, 47, .24);
}

.abt-studio figcaption {
  margin-top: 14px;
  color: var(--abt-ink-mut);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
}

/* ── the portrait ──────────────────────────────────────────────────────────── */
.abt-portrait-sec { padding: 16px 0 8px; }

.abt-portrait {
  margin: 0;
  animation: ww-float-slow 16s ease-in-out infinite;
}

.abt-portrait img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 16px;
  box-shadow: 0 40px 90px rgba(47, 47, 47, .22);
}

/* ── the method ────────────────────────────────────────────────────────────── */
.abt-method { padding: 96px 0 92px; }

.abt-method-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 44px;
}

.abt-method-col {
  padding-left: 22px;
  border-left: 1px solid var(--abt-hair);
}

.abt-method-col h3 {
  margin: 0 0 10px;
  font-size: 21px;
  font-weight: 700;
  letter-spacing: -.01em;
}

.abt-method-col p {
  margin: 0;
  color: var(--abt-ink-body);
  font-size: 17px;
  line-height: 1.6;
}

/* ── say hello ─────────────────────────────────────────────────────────────── */
.abt-hello { padding: 0 0 104px; }

.abt-hello-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 36px;
  padding: 52px 0;
  border-top: 1px solid var(--abt-hair);
  border-bottom: 1px solid var(--abt-hair);
}

.abt-hello-copy { max-width: 50ch; }

.abt-hello-copy h2 {
  margin: 0 0 14px;
  font-size: clamp(26px, 3vw, 40px);
  font-weight: 700;
  line-height: 1.06;
  letter-spacing: -.02em;
}

.abt-hello-copy p {
  margin: 0;
  color: var(--abt-ink-body);
  font-size: 17px;
  line-height: 1.6;
}

.abt-hello-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.abt-btn {
  display: inline-flex;
  align-items: center;
  min-height: 52px;
  padding: 14px 28px;
  border-radius: 999px;
  background: var(--ink);
  color: var(--bg);
  font-weight: 700;
  text-decoration: none;
  transition: transform .18s ease;
}

.abt-btn:hover { transform: translateY(-3px); }

.abt-btn.ghost {
  padding: 14px 24px;
  border: 1px solid rgba(47, 47, 47, .2);
  background: none;
  color: var(--ink);
  transition: transform .18s ease, border-color .18s ease;
}

.abt-btn.ghost:hover { border-color: var(--accent); }

/* ── narrower screens ──────────────────────────────────────────────────────── */
/* The design is one 1440px canvas with no breakpoints of its own, so these follow
   the site's: the two-column shapes collapse at 980 and the multi-column grids
   finish collapsing at 640. */
@media (max-width: 980px) {
  .abt-hero {
    grid-template-columns: minmax(0, 1fr);
    gap: 40px;
    padding: 64px 0 48px;
  }

  .abt-studio img { height: clamp(320px, 42vh, 460px); }

  .abt-method { padding: 72px 0 68px; }
  .abt-method-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; }
  .abt-steps-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ── less motion ───────────────────────────────────────────────────────────── */
/* The shared block above stops the orbs and the reveal. Everything else that moves
   on this page is a float or a pulse, and the design kills those too — a page whose
   photographs and cards are still drifting has not honoured the setting. */
@media (prefers-reduced-motion: reduce) {
  .abt-dot,
  .abt-studio,
  .abt-portrait,
  .abt-step { animation: none; }

  .abt-step-card { transition: none; }
}

@media (max-width: 640px) {
  body.about-page { --abt-wide: min(1240px, calc(100% - 40px)); }

  .abt-hero { padding: 48px 0 40px; }
  .abt-lede { font-size: 18px; }

  .abt-method { padding: 56px 0 52px; }
  .abt-method-grid { grid-template-columns: minmax(0, 1fr); gap: 26px; }

  .abt-steps { padding: 0 0 72px; }
  .abt-steps-grid { grid-template-columns: minmax(0, 1fr); }

  .abt-hello { padding: 0 0 76px; }
  .abt-hello-inner { padding: 40px 0; gap: 28px; }
  .abt-hello-actions { width: 100%; }
  .abt-btn { flex: 1 1 auto; justify-content: center; }
}