/* ==========================================================================
   KREATED V2 — /about/ · PAGE-SPECIFIC
   Built on services.css + leaf.css. The only thing this page needs that the
   leaf system does not already provide is the four-column identity row under
   the hero — the same device the /work/ project pages use for their facts,
   which is why it looks familiar rather than new.
   ========================================================================== */
.ab__hero{padding-bottom:clamp(28px,3.2vw,44px)}
/* hero weight now comes from .shero__h in leaf.css — see the note there */
.ab__h span{display:block;color:var(--ink-4)}
/* ---- THE HERO — headline and claim left, portrait right, 2026-09-10 ------
   Replaces the 2026-09-07 layout (claim left, facts right). The facts only
   sat in the right half because it was empty; the portrait is what that half
   was missing, so the facts return under the paragraph as a 2 x 2.

   ⚠ The portrait column is the NARROWER one. The headline has to hold
   "in Wilmington." on one line at the hero size, and a wider photo column
   pushed it to two. 🚫 Do not widen the portrait past ~0.66fr.
   ⚠ align-self:start on the figure. Stretched to the row it grows with the
   left column's text, and the 4:5 crop turns into a letterbox. */
.ab__grid{
  display:grid;
  grid-template-columns:minmax(0,1.34fr) minmax(0,.66fr);
  grid-template-areas:"h photo" "lede photo";
  grid-template-rows:auto 1fr;
  column-gap:clamp(36px,5vw,84px);
}
.ab__grid > .ab__h{grid-area:h;margin-bottom:0}
.ab__portrait{grid-area:photo;align-self:start;margin:clamp(6px,0.8vw,12px) 0 0}
.ab__portrait img{display:block;width:100%;height:auto;aspect-ratio:4 / 5;object-fit:cover;
  border-radius:14px;background:var(--hair-soft, rgba(2,12,46,.06))}
.ab__portrait figcaption{margin-top:12px;font:600 10.5px/1.5 'General Sans',system-ui;
  letter-spacing:.2em;text-transform:uppercase;color:var(--gray)}
.ab__lede{grid-area:lede;margin:clamp(26px,3vw,40px) 0 0}
.ab__lede .shero__foot{max-width:58ch}
.ab__facts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(18px,2.2vw,28px) clamp(24px,3vw,44px);
  max-width:560px;margin:clamp(26px,3vw,38px) 0 0;padding:clamp(20px,2.2vw,26px) 0 0;
  border-top:1px solid rgba(2,12,46,.10)}
.ab__facts dt{font:600 10.5px/1.5 'General Sans',system-ui;letter-spacing:.2em;
  text-transform:uppercase;color:var(--gray)}
.ab__facts dd{margin:8px 0 0;font-size:clamp(14.5px,1.15vw,16px);line-height:1.45;
  color:var(--ink-1)}
@media (max-width:900px){
  /* one column: headline, then the portrait, then the claim and facts */
  .ab__grid{grid-template-columns:1fr;grid-template-areas:"h" "photo" "lede";grid-template-rows:none}
  .ab__portrait{width:min(420px,86vw);margin-top:clamp(26px,5vw,34px)}
}
@media (max-width:560px){ .ab__facts{grid-template-columns:1fr;gap:16px} }

/* ==========================================================================
   THE THREE CLAIMS — 2026-09-06.
   The page was nine near-identical blocks: a small left label and a column of
   paragraphs, repeated. Nothing carried more weight than anything else, so the
   argument had no shape and the eye had nowhere to land.

   Three sentences in the body ARE the page's argument — that a website should
   do more than look good, that marketing is what puts people in front of it,
   and that clients are partners rather than transactions. They were already
   marked <b> and rendered like every other bold. Here they become the thing
   the section is built around.

   ⚠ This is a scale-and-space change, not a colour one. The claim keeps ink
   rather than taking the accent: three blue paragraphs on one page is a banner,
   which is the same trap the .lin rule in theme.css exists to avoid. The
   emphasis comes from size, measure and the rule above it.
   🚫 Do not add a fourth. Three is what the copy actually contains, and a
   device that appears everywhere stops being one.
   ========================================================================== */
.ab__claim{
  margin:clamp(26px,3vw,40px) 0 clamp(18px,2vw,26px);
  padding-top:clamp(20px,2.2vw,28px);
  border-top:1px solid var(--stroke);
  max-width:30ch;
}
.ab__claim b{
  font-weight:500;
  font-size:clamp(20px,1.9vw,26px);
  line-height:1.28;
  letter-spacing:-.016em;
  color:var(--ink-1);
}

/* the heading accent, so the eight sections read as a sequence rather than a
   stack. The <em> is one word per heading and takes the site's serif italic —
   the same device /services/ uses for "in order". */
.sec__h em{color:var(--accent);text-shadow:var(--glow-soft)}