/* ==========================================================================
   About (/about/) — "An operator's profile, not a résumé."
   Markup: resources/views/pages/about.blade.php + components/about/*
   Copy: config/about.php · Brief: design-runs/2026-09-28-site-v3/about/00-brief.md

   Rhythm: warm hero → paper story → warm proof (home 02's cards) → ink band
   (principles) → paper services → warm Rishikesh → paper FAQ → warm CTA.
   Owner (2026-09-28): no full-width photos; every section = text + 1–2 treated
   images (cut-outs, fades into the background, framed/tilted) + icons + texture.
   Reuses: .eyebrow + [data-tone] (base.css), .biz-card (businesses.css),
   .why-cta / .why-btn (why.css). Motion: reveal.js + hover only.
   ========================================================================== */

.abt {
  --abt-pad: calc(var(--hdr-inset) + var(--hdr-pad)); /* same content edge as the header */
  --abt-block: clamp(48px, 5.5vw, 88px); /* owner: no wasted space (2026-09-28) */
}

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

.abt-section { padding-block: var(--abt-block); }

/* ---- Shared type ---------------------------------------------------------------- */

.abt-head { margin-bottom: clamp(24px, 2.6vw, 36px); }

.abt-h2 {
  margin: 12px 0 0;
  color: var(--ink-900);
  font-family: var(--font-serif);
  font-size: clamp(2.25rem, 1.35rem + 3.2vw, 3.75rem);
  font-weight: 600;
  line-height: 1.04;
  letter-spacing: -0.015em;
  text-wrap: balance;
}

.abt-lede {
  max-width: 40rem;
  margin-top: 16px;
  color: var(--slate-700);
  font-size: clamp(1.0625rem, 0.98rem + 0.35vw, 1.25rem);
  line-height: 1.55;
  text-wrap: pretty;
}

.abt-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  margin-top: 18px;
  color: var(--blue-700);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 5px;
}

.abt-link svg { transition: transform var(--t-base) var(--ease-out); }
.abt-link:hover { color: var(--blue-800); }
.abt-link:hover svg { transform: translateX(3px); }

/* Handwritten asides, as on home 02/09. */
.abt-note {
  margin: 0;
  color: var(--slate-700);
  font-family: var(--font-hand);
  font-size: 1.0625rem;
  line-height: 1.3;
}

.abt-note span { display: block; }

/* ==========================================================================
   Hero
   ========================================================================== */

.abt-hero {
  overflow: hidden;
  padding-top: clamp(28px, 4vw, 64px);
  border-bottom: 1px solid var(--color-border);
  background: var(--warm-50);
}

.abt-hero__grid {
  display: grid;
  gap: 36px;
}

.abt-hero__copy { padding-bottom: 8px; }

.abt-crumbs ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 8px;
  margin: -11px 0;
  padding: 0;
  list-style: none;
  color: var(--slate-600);
  font-size: 0.9375rem;
}

.abt-crumbs li + li::before {
  content: "/";
  margin-right: 8px;
  color: var(--slate-400);
}

.abt-crumbs a {
  display: inline-flex;
  align-items: center;
  min-height: 44px; /* touch target; the list's negative margin keeps the visual rhythm */
  color: inherit;
  text-decoration: underline;
  text-decoration-color: var(--slate-300);
  text-underline-offset: 4px;
}

.abt-crumbs a:hover { color: var(--ink-900); text-decoration-color: currentColor; }
.abt-crumbs [aria-current] { color: var(--ink-900); font-weight: 600; }

.abt-hero__title {
  margin: 20px 0 0;
  color: var(--ink-900);
  font-size: clamp(2.375rem, 1.2rem + 3vw, 3.875rem);
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: -0.035em;
  text-wrap: balance;
}

.abt-hero__accent {
  display: block;
  color: var(--blue-600);
}

.abt-hero__lede {
  max-width: 36rem;
  margin-top: 22px;
  color: var(--slate-700);
  font-size: clamp(1.0625rem, 0.98rem + 0.4vw, 1.3125rem);
  line-height: 1.55;
  text-wrap: pretty;
}

/* Four plain facts, ruled like a spec sheet (not pills). */
.abt-facts {
  display: grid;
  gap: 0 28px;
  max-width: 36rem;
  margin: 26px 0 0;
  padding: 0;
  list-style: none;
}

.abt-facts li {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-block: 12px;
  border-top: 1px solid var(--slate-200);
  color: var(--ink-900);
  font-size: 1rem;
  font-weight: 500;
}

.abt-facts svg { flex-shrink: 0; color: var(--blue-600); }

@media (min-width: 560px) {
  .abt-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.abt-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 28px;
}

/* Phones/tablets: a quiet panel with the Rishikesh sketch; he stands on its bottom edge. */
.abt-hero__media {
  position: relative;
  overflow: hidden;
  padding-top: 64px;
  border: 1px solid var(--color-border);
  border-bottom: 0;
  border-radius: var(--r-xl) var(--r-xl) 0 0;
  background: radial-gradient(110% 80% at 50% 100%, color-mix(in srgb, var(--blue-600) 10%, var(--paper)) 0%, var(--paper) 70%);
}

.abt-hero__art {
  position: absolute;
  inset: 4% -4% auto;
  width: 108%;
  height: auto;
  color: var(--slate-400);
  opacity: 0.32;
}

.abt-note--hero {
  position: absolute;
  top: 14px;
  left: 16px;
  z-index: 1;
  transform: rotate(-4deg);
  transform-origin: left top;
}

.abt-note--hero svg { display: none; }

.abt-hero__portrait {
  position: relative;
  display: block;
  width: min(72%, 340px);
  margin-inline: auto;
}

.abt-hero__portrait img {
  display: block;
  width: 100%;
  height: auto;
}

@media (min-width: 640px) {
  .abt-hero__actions .why-btn { flex: 0 0 auto; }
}

/* Phones/tablets: his face comes right after the lede (not after the whole copy),
   cropped waist-up; the facts and buttons follow. */
@media (max-width: 1199.98px) {
  .abt-hero { padding-bottom: 48px; }
  .abt-hero__grid { gap: 0; }
  .abt-hero__copy { display: contents; }
  .abt-crumbs { order: 1; }
  .abt-hero__title { order: 2; }
  .abt-hero__lede { order: 3; }
  .abt-hero__media { order: 4; margin-top: 28px; padding-top: 88px; border-bottom: 1px solid var(--color-border); border-radius: var(--r-xl); }
  .abt-facts { order: 5; }
  .abt-hero__actions { order: 6; }

  .abt-hero__portrait { width: min(80%, 320px); }
  .abt-hero__portrait img { aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 0; }
}

@media (min-width: 640px) and (max-width: 1199.98px) {
  .abt-hero__portrait { width: min(56%, 400px); }
  .abt-note--hero { top: 22px; left: 24px; font-size: 1.25rem; }
}

/* Desktop (from 1200, as home 09): copy left, portrait right standing on the hero's bottom border. */
@media (min-width: 1200px) {
  .abt-hero { padding-top: clamp(32px, 3.2vw, 52px); }

  .abt-hero__grid {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    align-items: end;
    gap: 40px;
  }

  .abt-hero__copy {
    align-self: center;
    padding-bottom: clamp(56px, 6vw, 96px);
  }

  .abt-hero__media {
    overflow: visible;
    padding-top: 0;
    border: 0;
    border-radius: 0;
    background: none;
  }

  /* A soft blue floor-glow behind him instead of a panel. */
  .abt-hero__media::before {
    content: "";
    position: absolute;
    inset: auto 0 0 14%;
    height: 72%;
    border-radius: 50% 50% 0 0 / 60% 60% 0 0;
    background: radial-gradient(closest-side at 50% 100%, color-mix(in srgb, var(--blue-600) 14%, var(--warm-50)), transparent);
  }

  .abt-hero__art { inset: 2% -10% auto; width: 120%; }

  .abt-hero__portrait { width: min(100%, 340px); margin-right: 16px; } /* right: leaves the note room */

  .abt-note--hero {
    top: 12%;
    left: 0;
    font-size: 1.25rem;
    transform: rotate(-6deg);
  }

  .abt-note--hero svg {
    display: block;
    width: 54px;
    height: 40px;
    margin: 6px 0 0 96px;
    color: var(--ink-900);
    transform: scaleX(-1) rotate(-12deg);
  }
}

@media (min-width: 1200px) and (max-width: 1439.98px) {
  .abt-note--hero { font-size: 1.125rem; }
}

@media (min-width: 1440px) {
  .abt-hero__portrait { width: min(100%, 372px); margin-right: 24px; }
}

/* ---- Hero: dot texture + floating proof badges ------------------------------------ */

/* Dot-grid texture (home hero's), masked to a soft patch. Sections move the patch. */
.abt-dots {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image: radial-gradient(circle, color-mix(in srgb, var(--slate-400) 60%, transparent) 1px, transparent 1.5px);
  background-size: 22px 22px;
  -webkit-mask-image: radial-gradient(ellipse 55% 55% at var(--dots-at, 60% 40%), #000 10%, transparent 72%);
  mask-image: radial-gradient(ellipse 55% 55% at var(--dots-at, 60% 40%), #000 10%, transparent 72%);
}

/* Lift the portrait above the dot texture; the art, note and badges keep their own positioning. */
.abt-hero__portrait { z-index: 1; }

.abt-badges {
  position: absolute;
  inset: auto 12px 12px;
  z-index: 2;
  display: flex;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.abt-badge {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 14px 9px 9px;
  border: 1px solid var(--slate-200);
  border-radius: 14px;
  background: color-mix(in srgb, var(--paper) 94%, transparent);
  box-shadow: 0 18px 36px -22px rgb(15 23 42 / 0.45), 0 2px 6px -2px rgb(15 23 42 / 0.08);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

.abt-badge__mark {
  display: grid;
  flex-shrink: 0;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--amber-500) 14%, var(--paper));
  color: #B45309; /* amber mark ≥3:1 on its wash (home 03's fix) */
}

.abt-badge--2 .abt-badge__mark { background: color-mix(in srgb, #25D366 12%, var(--paper)); }
.abt-badge__mark svg { width: 20px; height: 20px; }

.abt-badge__text { display: grid; line-height: 1.25; }
.abt-badge__text strong { color: var(--ink-900); font-size: 0.9375rem; font-weight: 700; }
.abt-badge__text > span { color: var(--slate-600); font-size: 0.875rem; }

.abt-badge--2 { display: none; } /* phones: the WhatsApp button is right below */

@media (min-width: 640px) {
  .abt-badges { inset: auto 20px 20px; }
  .abt-badge--2 { display: flex; }
}

@media (min-width: 1200px) {
  .abt-badges { display: contents; }
  .abt-badge { position: absolute; z-index: 2; }
  .abt-badge--1 { left: 0; bottom: 30%; transform: rotate(-2deg); }
  .abt-badge--2 { right: -12px; bottom: 9%; transform: rotate(2deg); }
}

/* ==========================================================================
   Shared section furniture: icon circles, textures
   ========================================================================== */

.abt-section { position: relative; overflow: clip; }
.abt-section > .abt-wrap { position: relative; z-index: 1; }

/* Icon circles for the story points and the ways we work (paper variant). The fact sheet
   uses ink squares and the FAQ plain glyphs, so one chip never stands in for everything. */
.abt-points__icon,
.abt-ways__icon {
  display: grid;
  flex-shrink: 0;
  place-items: center;
  width: 48px;
  height: 48px;
  border: 1px solid #D6E3FB;
  border-radius: 50%;
  background: #EAF1FE;
  color: var(--blue-600);
}

.abt-ways__icon svg { width: 22px; height: 22px; }

/* ==========================================================================
   01 Story: text + icon points │ photo fading into the paper
   ========================================================================== */

.abt-story { background: var(--paper); }

.abt-story__grid {
  display: grid;
  gap: 28px;
  align-items: center;
}

.abt-story__text p:not(.eyebrow) {
  max-width: 38rem;
  margin-top: 18px;
  color: var(--slate-700);
  font-size: clamp(1.0625rem, 1rem + 0.25vw, 1.1875rem);
  line-height: 1.65;
  text-wrap: pretty;
}

.abt-story__text .abt-h2 + p { margin-top: 24px; color: var(--ink-900); }

.abt-points {
  display: grid;
  gap: 14px;
  max-width: 38rem;
  margin: 28px 0 0;
  padding: 0;
  list-style: none;
}

.abt-points li {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  align-items: center;
  gap: 16px;
  color: var(--slate-700);
  font-size: 1rem;
  line-height: 1.5;
}

.abt-points strong { display: block; color: var(--ink-900); font-weight: 700; }

/* The photo dissolves into the paper on its left and bottom edges (home 05's treatment). */
.abt-story__media {
  --dots-at: 70% 30%;
  position: relative;
  margin: 0;
  padding: 28px 0 0;
}

.abt-story__photo {
  position: relative;
  z-index: 1;
  display: block;
}

.abt-story__photo img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 28px;
}

.abt-story__photo::after {
  content: "";
  position: absolute;
  inset: -2px; /* past the image's anti-aliased edge, so no hairline shows */
  border-radius: 28px;
  background:
    linear-gradient(to right, var(--paper) 1%, transparent 16%),
    linear-gradient(to bottom, var(--paper) 1%, transparent 12%),
    linear-gradient(to top, var(--paper) 1%, transparent 20%);
  pointer-events: none;
}

.abt-floaters { margin: 0; padding: 0; list-style: none; }

.abt-floater {
  position: absolute;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 60px;
  height: 60px;
  border: 1px solid var(--slate-200);
  border-radius: 16px;
  background: linear-gradient(180deg, var(--paper) 0%, var(--slate-50) 100%);
  box-shadow: 0 18px 30px -16px rgb(15 23 42 / 0.45), 0 2px 5px -2px rgb(15 23 42 / 0.1), inset 0 -2px 0 rgb(15 23 42 / 0.04);
}

.abt-floater__logo { display: grid; place-items: center; }
.abt-floater__logo svg { width: 30px; height: 30px; }

.abt-floater--1 { top: 16px; right: 14px; transform: rotate(6deg); }
.abt-floater--2 { left: 10px; bottom: 30%; transform: rotate(-8deg); }
.abt-floater--3 { right: 26px; bottom: 4%; transform: rotate(-4deg); }

.abt-note--story {
  position: absolute;
  top: 0;
  left: 4px;
  z-index: 2;
  font-size: 1.125rem;
  transform: rotate(-5deg);
}

.abt-note--story span { display: inline; }
.abt-note--story span + span::before { content: " "; }

.abt-note--story svg {
  display: none;
}

@media (max-width: 479.98px) {
  .abt-floater { width: 48px; height: 48px; border-radius: 13px; }
  .abt-floater__logo svg { width: 24px; height: 24px; }
}

@media (min-width: 1024px) {
  .abt-story__grid {
    grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
    gap: clamp(40px, 5vw, 80px);
  }

  .abt-story__media { padding: 44px 0 12px; }

  .abt-note--story {
    top: 4px;
    left: 8%;
    font-size: 1.25rem;
  }

  .abt-note--story span { display: block; }
  .abt-note--story span + span::before { content: none; }

  .abt-note--story svg {
    display: block;
    width: 48px;
    height: 36px;
    margin: 2px 0 0 88px;
    color: var(--ink-900);
  }

  .abt-floater--1 { top: 44px; right: -18px; }
  .abt-floater--2 { left: -22px; bottom: 32%; }
  .abt-floater--3 { right: 36px; bottom: -4px; }
}

/* "The short version": an icon grid (index-card cells). */
.abt-sheet {
  margin-top: clamp(24px, 3vw, 40px);
  padding: 24px 20px 20px;
  border: 1px solid var(--color-border);
  border-radius: var(--r-xl);
  background: var(--warm-50);
}

.abt-sheet__title {
  margin: 0 0 18px;
  color: var(--ink-900);
  font-family: var(--font-serif);
  font-size: 1.75rem;
  font-weight: 600;
  line-height: 1.1;
}

/* 1px rules between cells: the grid's own background shows through the gaps. */
.abt-sheet__grid {
  display: grid;
  gap: 1px;
  margin: 0;
  overflow: hidden;
  border: 1px solid var(--slate-200);
  border-radius: var(--r-lg);
  background: var(--slate-200);
}

.abt-sheet__cell {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr);
  grid-template-areas: "icon label" "icon value";
  align-content: start;
  gap: 2px 14px;
  padding: 16px;
  background: var(--paper);
}

.abt-sheet__icon {
  display: grid;
  grid-area: icon;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: var(--ink-900);
  color: var(--paper);
}

.abt-sheet__icon svg { width: 18px; height: 18px; }

.abt-sheet__cell dt {
  grid-area: label;
  color: var(--slate-600);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.abt-sheet__cell dd {
  grid-area: value;
  margin: 0;
  color: var(--ink-900);
  font-size: 1rem;
  line-height: 1.5;
}

.abt-sheet__cell dd a {
  display: flex;
  align-items: center;
  width: fit-content;
  min-height: 36px;
  color: var(--blue-700);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 4px;
  overflow-wrap: anywhere;
}

.abt-sheet__cell dd a:hover { color: var(--blue-800); }

@media (min-width: 640px) {
  .abt-sheet { padding: 28px 28px 28px; }
  .abt-sheet__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1200px) {
  .abt-sheet__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ==========================================================================
   02 The four businesses (cards from businesses.css)
   ========================================================================== */

.abt-biz {
  border-top: 1px solid var(--color-border);
  background: var(--warm-50);
}

.abt-dots--biz { --dots-at: 88% 12%; }

.abt-biz__head { display: grid; gap: 16px; }

.abt-note--biz {
  justify-self: end;
  font-size: 1.125rem;
  transform: rotate(-4deg);
}

.abt-note--biz svg {
  display: block;
  width: 44px;
  height: 34px;
  margin: 2px 0 0 40px;
  color: var(--ink-900);
}

@media (min-width: 1024px) {
  .abt-biz__head {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
  }

  .abt-note--biz { margin-right: 6%; font-size: 1.25rem; }
}

/* ==========================================================================
   03 Principles — the one ink band: portrait fading into the ink, icon rows
   ========================================================================== */

.abt-rules {
  background: var(--ink-900);
  color: var(--paper);
}

/* Faint blueprint grid, strongest top-right. */
.abt-grid-tex {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgb(255 255 255 / 0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgb(255 255 255 / 0.06) 1px, transparent 1px);
  background-size: 56px 56px;
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 80% 20%, #000 10%, transparent 75%);
  mask-image: radial-gradient(ellipse 70% 60% at 80% 20%, #000 10%, transparent 75%);
}

.abt-rules__art {
  position: absolute;
  right: -4%;
  bottom: -2%;
  width: min(62%, 720px);
  height: auto;
  color: var(--paper);
  opacity: 0.07;
  pointer-events: none;
}

.abt-rules .eyebrow { color: var(--paper); }
.abt-rules .eyebrow__num { color: var(--slate-400); }
.abt-rules .eyebrow::after { background: linear-gradient(90deg, var(--teal-500), transparent); }
.abt-rules .abt-h2 { color: var(--paper); }

.abt-rules__grid { display: grid; gap: 32px; }

.abt-rules__media {
  position: relative;
  width: min(62%, 280px);
  margin: 0 auto;
}

/* Teal/blue glow behind him, so the cut-out sits in light rather than on flat ink. */
.abt-rules__media::before {
  content: "";
  position: absolute;
  inset: 12% -18% 0;
  background:
    radial-gradient(closest-side at 50% 55%, rgb(37 99 235 / 0.35), transparent),
    radial-gradient(closest-side at 40% 80%, rgb(20 184 166 / 0.22), transparent);
}

.abt-rules__portrait {
  position: relative;
  display: block;
}

.abt-rules__portrait img {
  display: block;
  width: 100%;
  height: auto;
  -webkit-mask-image: linear-gradient(to bottom, #000 72%, transparent 98%);
  mask-image: linear-gradient(to bottom, #000 72%, transparent 98%);
}

/* Desktop only: sits in the free space left of the portrait, never over him. */
.abt-note--rules { display: none; }

.abt-rules__list {
  margin: 0;
  padding: 0;
  list-style: none;
  border-bottom: 1px solid rgb(255 255 255 / 0.14);
}

.abt-rule {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr);
  align-items: start;
  gap: 18px;
  padding-block: 22px;
  border-top: 1px solid rgb(255 255 255 / 0.14);
}

.abt-rule__icon {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border: 1px solid rgb(20 184 166 / 0.45);
  border-radius: 50%;
  background: rgb(20 184 166 / 0.1);
  color: var(--teal-500);
}

.abt-rule__title {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 10px;
  margin: 2px 0 0;
  color: var(--paper);
  font-size: clamp(1.1875rem, 1.05rem + 0.5vw, 1.375rem);
  font-weight: 600;
  line-height: 1.3;
}

.abt-rule__num {
  color: var(--teal-500);
  font-family: var(--font-serif);
  font-size: 1rem;
  font-variant-numeric: tabular-nums;
}

.abt-rule__text {
  margin-top: 6px;
  color: var(--slate-300);
  font-size: 1rem;
  line-height: 1.6;
  text-wrap: pretty;
}

@media (min-width: 768px) {
  .abt-rule__text { font-size: 1.0625rem; }
}

@media (min-width: 1200px) {
  .abt-rules__grid {
    grid-template-columns: minmax(0, 0.78fr) minmax(0, 1.22fr);
    gap: 72px;
    align-items: start;
  }

  .abt-rules__media { width: min(100%, 360px); margin: 28px 0 0 auto; }

  .abt-note--rules {
    display: block;
    position: absolute;
    top: 30%;
    right: calc(100% - 28px);
    z-index: 1;
    color: var(--slate-300);
    font-size: 1.1875rem;
    text-align: right;
    white-space: nowrap;
    transform: rotate(-6deg);
  }
}

/* ==========================================================================
   04 What I do: flow vector + service rows + tools
   ========================================================================== */

.abt-do { background: var(--paper); }

.abt-dots--do { --dots-at: 18% 78%; }

.abt-do__grid {
  display: grid;
  gap: 32px 64px;
}

.abt-do .abt-head { margin-bottom: 0; }

/* The lead-flow vector: nodes on a dashed line, official logos where a tool is named. */
.abt-flow {
  margin: 28px 0 0;
  padding: 22px 22px 20px;
  border: 1px solid var(--color-border);
  border-radius: var(--r-xl);
  background: color-mix(in srgb, var(--warm-50) 70%, var(--paper));
}

.abt-flow figcaption { display: grid; gap: 4px; }
.abt-flow figcaption strong { color: var(--ink-900); font-size: 1.0625rem; font-weight: 700; }
.abt-flow figcaption span { color: var(--slate-700); font-size: 1rem; line-height: 1.5; }

.abt-flow__steps {
  display: grid;
  gap: 16px;
  margin: 18px 0 0;
  padding: 0;
  list-style: none;
}

.abt-flow__steps li {
  position: relative;
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  align-items: center;
  gap: 14px;
}

.abt-flow__steps li:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 44px;
  bottom: -16px;
  left: 21px;
  border-left: 2px dashed var(--slate-300);
}

.abt-flow__node {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--slate-200);
  border-radius: 50%;
  background: var(--paper);
  box-shadow: 0 8px 16px -12px rgb(15 23 42 / 0.4);
  color: var(--blue-600);
}

.abt-flow__node svg { width: 20px; height: 20px; }

.abt-flow__label { color: var(--ink-900); font-size: 1rem; font-weight: 500; }

.abt-do__list {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--slate-200);
}

.abt-do__list li { border-bottom: 1px solid var(--slate-200); }

.abt-do__row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 16px;
  padding: 18px 12px;
  border-radius: var(--r-md);
  color: inherit;
  text-decoration: none;
  transition: background-color var(--t-fast) var(--ease-out);
}

.abt-do__row:hover { background: var(--tone-bg); }
.abt-do__row:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }

.abt-do__icon {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border: 1px solid var(--tone-line);
  border-radius: 50%;
  background: var(--tone-bg);
  color: var(--tone-mark);
}

.abt-do__text { display: grid; gap: 4px; }

.abt-do__name {
  color: var(--ink-900);
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 1.3;
}

.abt-do__desc {
  color: var(--slate-700);
  font-size: 1rem;
  line-height: 1.5;
}

.abt-do__arrow {
  color: var(--slate-500);
  transition: transform var(--t-base) var(--ease-out), color var(--t-fast) var(--ease-out);
}

.abt-do__row:hover .abt-do__arrow { color: var(--tone-ink); transform: translateX(4px); }

.abt-tools { margin-top: clamp(8px, 2vw, 24px); }

.abt-tools__title {
  margin: 0;
  color: var(--slate-600);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.abt-tools__list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 16px 0 0;
  padding: 0;
  list-style: none;
}

.abt-tools__list li {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 16px 8px 10px;
  border: 1px solid var(--slate-200);
  border-radius: 999px;
  background: var(--paper);
  color: var(--ink-900);
  font-size: 1rem;
  font-weight: 500;
}

.abt-tools__logo { display: grid; place-items: center; width: 24px; height: 24px; }
.abt-tools__logo svg { width: 22px; height: 22px; }

@media (min-width: 1024px) {
  .abt-do__grid {
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
    align-items: start;
  }

  /* Tools sit under the service rows, balancing the taller head + flow column. */
  .abt-do__side { grid-row: 1 / span 2; }
  .abt-tools { grid-column: 2; margin-top: 8px; }
}

/* ==========================================================================
   05 Where I work: text + ways │ arch-framed photo, stamp, location tag
   ========================================================================== */

.abt-place { background: var(--warm-50); }

.abt-place__art {
  position: absolute;
  left: -6%;
  bottom: -12%;
  width: min(62%, 760px);
  height: auto;
  color: var(--slate-400);
  opacity: 0.14;
  pointer-events: none;
}

.abt-place__grid { display: grid; gap: 48px; align-items: center; }

.abt-ways {
  display: grid;
  gap: 14px;
  margin: 28px 0 0;
  padding: 0;
  list-style: none;
}

.abt-ways li {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  align-items: center;
  gap: 16px;
  color: var(--slate-700);
  font-size: 1rem;
  line-height: 1.5;
}

.abt-ways strong { display: block; color: var(--ink-900); font-weight: 700; }
.abt-ways__icon { background: var(--paper); border-color: var(--slate-200); }

.abt-place__subtitle {
  margin: 32px 0 0;
  color: var(--slate-600);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.abt-profiles {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 14px 0 0;
  padding: 0;
  list-style: none;
}

.abt-profiles a {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  padding-inline: 16px;
  border: 1.5px solid var(--slate-300);
  border-radius: var(--r-md);
  background: var(--paper);
  color: var(--ink-900);
  font-weight: 600;
  text-decoration: none;
  transition: border-color var(--t-fast) var(--ease-out);
}

.abt-profiles a:hover { border-color: var(--ink-900); }

/* Arch-topped frame: a paper mat with a soft shadow, the photo inside. */
.abt-place__media {
  position: relative;
  width: min(100%, 440px);
  margin: 0 auto;
  padding: 0 0 28px;
}

.abt-place__photo {
  display: block;
  padding: 10px;
  border-radius: 50% 50% 28px 28px / 40% 40% 28px 28px;
  background: var(--paper);
  box-shadow: var(--shadow-panel);
}

.abt-place__photo img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: 36% 50%;
  border-radius: 50% 50% 20px 20px / 40% 40% 20px 20px;
}

.abt-stamp {
  position: absolute;
  top: 8%;
  left: 0;
  z-index: 1;
  width: 84px;
  height: auto;
  color: var(--slate-600);
  transform: rotate(-8deg);
  filter: drop-shadow(0 10px 14px rgb(15 23 42 / 0.22));
}

.abt-stamp__paper { fill: var(--paper); }

.abt-stamp text {
  fill: var(--ink-900);
  font-family: var(--font-sans);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.12em;
}

.abt-stamp .abt-stamp__sub { fill: var(--slate-600); font-size: 6.5px; }

.abt-place__tag {
  position: absolute;
  left: 50%;
  bottom: 8px;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border: 1px solid var(--slate-200);
  border-radius: 999px;
  background: var(--paper);
  box-shadow: 0 14px 28px -18px rgb(15 23 42 / 0.45);
  color: var(--ink-900);
  font-size: 0.9375rem;
  font-weight: 600;
  white-space: nowrap;
  transform: translateX(-50%);
}

.abt-place__tag svg { color: var(--blue-600); }

@media (min-width: 1024px) {
  .abt-place__grid {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
    gap: clamp(48px, 6vw, 96px);
  }

  .abt-place__media { margin-right: 0; }
  .abt-stamp { left: -14%; width: 116px; }
}

/* ==========================================================================
   06 FAQ: help card │ icon questions
   ========================================================================== */

.abt-faq { background: var(--paper); }

.abt-faq__grid { display: grid; gap: 28px 64px; }

.abt-faq .abt-head { margin-bottom: 24px; }

.abt-help {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr);
  gap: 4px 16px;
  padding: 22px;
  border: 1px solid var(--color-border);
  border-radius: var(--r-xl);
  background: var(--warm-50);
}

.abt-dots--faq { --dots-at: 12% 88%; }

.abt-help__avatar {
  position: relative;
  grid-row: span 2;
  width: 56px;
  height: 56px;
}

.abt-help__avatar img {
  display: block;
  width: 56px;
  height: 56px;
  border: 2px solid var(--paper);
  border-radius: 50%;
  box-shadow: 0 0 0 1px var(--slate-200), 0 10px 20px -12px rgb(15 23 42 / 0.5);
}

/* WhatsApp mark on the avatar: the channel to ask on (not an "online now" status). */
.abt-help__badge {
  position: absolute;
  right: -4px;
  bottom: -2px;
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--paper);
  box-shadow: 0 2px 6px rgb(15 23 42 / 0.2);
  color: #25D366;
}

.abt-help__badge svg { width: 14px; height: 14px; }

.abt-help__title {
  margin: 2px 0 0;
  color: var(--ink-900);
  font-family: var(--font-serif);
  font-size: 1.5rem;
  font-weight: 600;
  line-height: 1.15;
}

.abt-help__text { color: var(--slate-700); font-size: 1rem; line-height: 1.5; }

.abt-help__actions {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 16px;
}

.abt-help__link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding-inline: 16px;
  border: 1.5px solid var(--slate-300);
  border-radius: var(--r-md);
  background: var(--paper);
  color: var(--ink-900);
  font-weight: 600;
  text-decoration: none;
  transition: border-color var(--t-fast) var(--ease-out);
}

.abt-help__link:hover { border-color: var(--ink-900); }
.abt-help__wa { display: grid; color: #25D366; }
.abt-help__wa svg { width: 18px; height: 18px; }

.abt-faq__list { border-top: 1px solid var(--slate-200); }

.abt-qa { border-bottom: 1px solid var(--slate-200); }

.abt-qa summary {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr) 20px;
  align-items: center;
  gap: 16px;
  min-height: 48px;
  padding-block: 16px;
  color: var(--ink-900);
  font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.1875rem);
  font-weight: 600;
  line-height: 1.35;
  list-style: none;
  cursor: pointer;
}

.abt-qa summary::-webkit-details-marker { display: none; }
.abt-qa summary:hover .abt-qa__q { color: var(--blue-700); }
.abt-qa summary:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 4px; border-radius: 4px; }

.abt-qa__icon { display: grid; place-items: center; color: var(--blue-600); }
.abt-qa__icon svg { width: 22px; height: 22px; }

.abt-qa__chev {
  color: var(--slate-500);
  transition: transform var(--t-base) var(--ease-out);
}

.abt-qa[open] .abt-qa__chev { transform: rotate(180deg); }

.abt-qa p {
  max-width: 44rem;
  padding: 0 36px 20px 40px;
  color: var(--slate-700);
  font-size: 1.0625rem;
  line-height: 1.6;
}

@media (max-width: 479.98px) {
  .abt-qa p { padding-left: 0; padding-right: 0; }
}

@media (min-width: 1024px) {
  .abt-faq__grid {
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
    align-items: start;
  }

  .abt-faq__side { position: sticky; top: calc(var(--bar-h) + 32px); }
}

/* ==========================================================================
   Closing CTA (home 09's panel)
   ========================================================================== */

.abt-close {
  padding-block: clamp(36px, 4.5vw, 64px);
  border-top: 1px solid var(--color-border);
  background: var(--warm-50);
}

/* HB monogram disc (x-page.monogram): replaces photo avatars so his photos never repeat. */
.pg-mono {
  display: grid;
  place-items: center;
  width: var(--mono, 56px);
  height: var(--mono, 56px);
  border: 2px solid var(--paper);
  border-radius: 50%;
  background: var(--ink-900);
  box-shadow: 0 0 0 1px var(--slate-200), 0 10px 20px -12px rgb(15 23 42 / 0.5);
  color: var(--paper);
  font-size: calc(var(--mono, 56px) * 0.36);
  font-weight: 700;
  font-stretch: 80%;
  letter-spacing: -0.06em;
  line-height: 1;
}

/* Phones: head notes are decoration that costs a screenful of scrolling — desktop only. */
@media (max-width: 639.98px) {
  .abt-note--biz { display: none; }
}

/* ==========================================================================
   ChatGPT design review, round 1 (2026-09-29) — subtractive pass.
   design-runs/2026-09-28-site-v3/review/about/triage.md
   ========================================================================== */

/* 1. "The short version": 4 cells, one compact row on desktop, 2 × 2 on phones. */
.abt-sheet { padding: 18px; }
.abt-sheet__title { margin-bottom: 12px; font-size: 1.375rem; }
.abt-sheet__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.abt-sheet__cell { grid-template-columns: minmax(0, 1fr); grid-template-areas: "icon" "label" "value"; gap: 6px; padding: 14px; }
.abt-sheet__cell dd { font-size: 0.9375rem; line-height: 1.45; }
@media (min-width: 640px) { .abt-sheet__cell dd { font-size: 1rem; } }
@media (min-width: 1024px) {
  .abt-sheet { display: grid; grid-template-columns: 180px minmax(0, 1fr); align-items: center; gap: 24px; padding: 20px 24px; }
  .abt-sheet__title { margin: 0; }
  .abt-sheet__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .abt-sheet__cell { grid-template-columns: 36px minmax(0, 1fr); grid-template-areas: "icon label" "icon value"; gap: 2px 12px; }
}

/* 2. Four businesses on About: rating first, max 2 tags; phones show no tags. */
.abt-biz .biz-card__tags li:nth-child(n + 3) { display: none; }
@media (max-width: 639.98px) { .abt-biz .biz-card__tags { display: none; } }
.abt-biz__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 24px; margin-top: 16px; }
.abt-biz__foot .abt-link { margin-top: 0; }
.abt-biz__foot .biz__asof { margin-top: 0; }

/* 3. Principles: the rules lead; the portrait supports. */
@media (min-width: 1200px) {
  .abt-rules__grid { grid-template-columns: minmax(0, 0.52fr) minmax(0, 1fr); gap: 56px; }
  .abt-rules__media { width: min(100%, 320px); margin-top: 16px; }
}
@media (max-width: 1199.98px) {
  .abt-rules__media { width: auto; max-width: 100%; }
  .abt-rules__portrait img { width: auto; max-width: 100%; height: 260px; margin-inline: auto; }
}
.abt-rule { padding-block: 18px; }

/* 4. What I do: service rows lead; tools are a quiet, monochrome strip (still the official marks). */
.abt-tools { margin-top: 20px; }
.abt-tools__title { font-size: 0.75rem; color: var(--slate-600); }
.abt-tools__list { gap: 6px; margin-top: 10px; }
.abt-tools__list li { gap: 6px; padding: 5px 11px 5px 8px; border-color: var(--slate-200); background: transparent; color: var(--slate-700); font-size: 0.875rem; }
.abt-tools__logo { width: 18px; height: 18px; color: var(--slate-500) !important; }
.abt-tools__logo svg { width: 16px; height: 16px; }
.abt-do__row { padding: 14px 12px; }
.abt-do__icon { width: 44px; height: 44px; }

/* 5. Hero: portrait ~10% smaller; the note smaller and nearer the image; phones: 3 facts. */
@media (min-width: 1200px) {
  .abt-hero__portrait { width: min(100%, 340px); }
  .abt-note--hero { font-size: 1.0625rem; top: 16%; left: 6%; }
}
@media (min-width: 1440px) {
  .abt-hero__portrait { width: min(100%, 360px); }
}
@media (max-width: 639.98px) {
  .abt-facts li:nth-child(4) { display: none; }
  .abt-hero__media { margin-top: 20px; padding-top: 72px; }
  .abt-hero__portrait { width: min(70%, 280px); }
  .abt-hero__actions { margin-top: 20px; }
}

/* 6. Where I work: ~15% smaller photo, profiles secondary. */
.abt-place__media { width: min(100%, 380px); }
.abt-profiles a { min-height: 44px; padding-inline: 10px; border: 0; background: transparent; color: var(--slate-700); font-weight: 500; }
.abt-profiles a:hover { color: var(--ink-900); }
.abt-place__subtitle { margin-top: 20px; }
.abt-ways { margin-top: 20px; gap: 10px; }

/* Phones: "What I do" is navigation — keep it tight (review r1). */
@media (max-width: 639.98px) {
  .abt-flow { padding: 16px; }
  .abt-flow__steps { gap: 8px; margin-top: 12px; }
  .abt-flow__steps li { grid-template-columns: 36px minmax(0, 1fr); gap: 12px; }
  .abt-flow__node { width: 36px; height: 36px; }
  .abt-flow__node svg { width: 18px; height: 18px; }
  .abt-flow__steps li:not(:last-child)::after { top: 36px; bottom: -8px; left: 17px; }
  .abt-do__row { gap: 12px; padding: 16px 4px; min-height: 80px; }
  .abt-do__grid { gap: 20px; }
}

/* ==========================================================================
   ChatGPT re-review round 2 (2026-09-29): surgical typography + spacing pass.
   Desktop 8.5 / mobile 7.7 → fix truncation, open up principles, lighter mobile photo.
   ========================================================================== */

/* 1. Service rows: never truncate; comfortable rows. */
.abt-do__row { min-height: 76px; padding-block: 16px; }
.abt-do__desc { line-height: 1.5; }

/* 2. Principles: more typographic authority and air between rules. */
.abt-rule { padding-block: 24px; }
.abt-rule__title { font-size: clamp(1.25rem, 1.1rem + 0.5vw, 1.5rem); }
.abt-rule__text { font-size: 1.0625rem; line-height: 1.65; }
@media (max-width: 639.98px) {
  .abt-rule { grid-template-columns: 44px minmax(0, 1fr); gap: 14px; padding-block: 22px; }
  .abt-rule__icon { width: 44px; height: 44px; }
  .abt-rule__text { font-size: 1rem; }
}

/* 3. Where I work on phones: the photo supports, it doesn't dominate. */
@media (max-width: 639.98px) {
  .abt-place__media { width: min(78%, 300px); }
}

/* 4. Four businesses (About only): proof type a step larger. */
@media (min-width: 1200px) {
  .abt-biz .biz-card__name { font-size: 1.1875rem; }
  .abt-biz .biz-card__summary { font-size: 1rem; line-height: 1.5; }
}

/* 5. FAQ → CTA: the closing panel is a real decision point, not a thin strip. */
@media (min-width: 1024px) {
  .abt-close { padding-block: clamp(48px, 5vw, 80px); }
  .abt-close .why-cta { padding-block: 48px; }
}