/* ============================================================
   /about — shared styles for /about/pxl-design and /about/ismail
   Reuses the svc-section light/dark alternation from services.css
   and adds layouts specific to these pages: person hero, numbered
   feature cards, skill pill groups, vertical timeline, featured
   work grid, and a photo+text contractor block.
   ============================================================ */

/* ---------- Hero — plain text (pxl-design) ---------- */
.about-hero {
  /* min-height matches the rest of the site's heroes (svc-hero,
     work-hero) so they all reserve the same amount of viewport space
     for the visual on the right. */
  min-height: 78svh;
  /* Top padding matches every other hero on the site so the eyebrow
     line sits the same distance from the nav across pages. */
  padding: calc(var(--nav-h) + 40px) var(--pad-x) clamp(64px, 8vh, 120px);
  display: flex;
  flex-direction: column;
  /* Eyebrow pins to padding-top so the nav-to-text gap matches every
     other hero on the site. min-height still reserves room for the
     pixel-grid visual on the right via the grid override below. */
  justify-content: flex-start;
  gap: clamp(18px, 2.4vw, 28px);
  border-bottom: 1px solid var(--border);
  background-color: var(--bg);
  background-image: radial-gradient(circle, rgba(255, 255, 255, 0.035) 1px, transparent 1px);
  background-size: 28px 28px;
  position: relative;
}

/* Two-column variant — heading left, animated pixels canvas right. */
.about-hero--with-vis {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  align-items: start;
  gap: clamp(32px, 5vw, 80px);
}
.about-hero--with-vis .about-hero__main {
  display: flex;
  flex-direction: column;
  gap: clamp(18px, 2.4vw, 28px);
  /* Centre the text column vertically so the headline sits in the
     optical centre of the hero rather than at the very top. */
  align-self: center;
}
.about-hero__vis {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  /* Centre the grid in its column. */
  justify-self: center;
  /* Light vertical offset so the pixel grid reads as visually
     centred against the headline rather than pinned to the eyebrow
     line directly. */
  padding-top: clamp(8px, 1.5vh, 24px);
}
@media (max-width: 900px) {
  .about-hero--with-vis {
    grid-template-columns: 1fr;
    gap: clamp(28px, 6vw, 56px);
    position: relative;
  }
  .about-hero__vis { max-width: 360px; aspect-ratio: auto; justify-self: start; }
}
@media (max-width: 768px) {
  /* Single column on mobile — pixel grid stacks ABOVE the copy and
     sits a little higher than the column-top so it hugs the nav.
     The grid is z-index-layered BEHIND the copy so where the
     rotating grid extends down into the headline area the text
     reads cleanly on top. Wider gap below the grid gives the
     subtitle clear breathing room. */
  .about-hero__vis {
    order: -1;
    aspect-ratio: auto;
    width: auto;
    max-width: none;
    justify-self: start;
    padding-top: 0;
    margin-top: clamp(-24px, -2vh, -8px);
    position: relative;
    z-index: 0;
  }
  .about-hero--with-vis .about-hero__main {
    position: relative;
    z-index: 1;
  }
}

/* Headline mark variants — "This is" in italic blue, "PXL." in normal
   white. Overrides the default em colour rule on .about-hero__title em. */
.about-hero__title-this {
  font-style: italic;
  font-weight: 500;
  color: var(--blue);
}
.about-hero__title-mark {
  color: #ffffff;
  font-style: normal;
  font-weight: var(--heading-weight);
  /* PXL. carries a touch more letter-spacing than the surrounding
     headline so the wordmark feels like a deliberate logotype rather
     than a tighter heading word. */
  letter-spacing: .04em;
  margin-left: .12em;
}

/* Individual pixel — large brand-colour square that drifts, scales,
   and fades across the canvas. Each instance gets its own --x / --y
   anchor and a --d animation-delay so the field reads as organic
   rather than in-step. */
.pxl-bit {
  position: absolute;
  left: var(--x, 50%);
  top: var(--y, 50%);
  width: clamp(40px, 5vw, 80px);
  height: clamp(40px, 5vw, 80px);
  transform: translate(-50%, -50%);
  border-radius: 2px;
  opacity: 0;
  animation: pxl-bit-drift 14s ease-in-out infinite;
  animation-delay: var(--d, 0s);
  will-change: transform, opacity;
}
.pxl-bit--blue   { background: #5B5AFF; box-shadow: 0 0 32px rgba(91, 90, 255, .3); }
.pxl-bit--red    { background: #E8453C; box-shadow: 0 0 32px rgba(232, 69, 60, .25); }
.pxl-bit--cream  { background: #F5F0DC; box-shadow: 0 0 24px rgba(245, 240, 220, .18); }
.pxl-bit--white  { background: rgba(255, 255, 255, .85); }
.pxl-bit--grey   { background: rgba(255, 255, 255, .35); }
@keyframes pxl-bit-drift {
  0%   { opacity: 0;   transform: translate(-50%, -50%) translate3d(-12px, 8px, 0)  scale(.7); }
  20%  { opacity: .9;  transform: translate(-50%, -50%) translate3d(0, 0, 0)        scale(1); }
  50%  { opacity: 1;   transform: translate(-50%, -50%) translate3d(14px, -10px, 0) scale(1.05); }
  80%  { opacity: .6;  transform: translate(-50%, -50%) translate3d(-6px, 4px, 0)   scale(.95); }
  100% { opacity: 0;   transform: translate(-50%, -50%) translate3d(0, 12px, 0)     scale(.7); }
}
@media (prefers-reduced-motion: reduce) {
  .pxl-bit {
    animation: none;
    opacity: .85;
    transform: translate(-50%, -50%) scale(1);
  }
  .pxl-bit--white { opacity: .7; }
  .pxl-bit--grey  { opacity: .35; }
}
.about-hero__eye {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--muted);
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.about-hero__eye .dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--blue);
  box-shadow: 0 0 0 3px rgba(91, 90, 255, .15);
}
.about-hero__title {
  font-family: var(--font-display);
  font-weight: var(--heading-weight);
  font-size: clamp(38px, 5.6vw, 108px);
  letter-spacing: -.035em;
  line-height: 1.03;
  max-width: 22ch;
}
.about-hero__title em { font-style: italic; font-weight: 500; color: var(--blue); }
.about-hero__sub {
  font-size: clamp(17px, .4vw + 1rem, 20px);
  line-height: 1.55;
  color: #cfcfcf;
  max-width: 68ch;
  letter-spacing: var(--body-letter-spacing);
}

/* ---------- Person hero — photo right, meta left (ismail) ---------- */
.person-hero {
  padding: calc(var(--nav-h) + 40px) var(--pad-x) clamp(56px, 7vh, 100px);
  border-bottom: 1px solid var(--border);
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(40px, 6vw, 96px);
  background-color: var(--bg);
  background-image: radial-gradient(circle, rgba(255, 255, 255, 0.035) 1px, transparent 1px);
  background-size: 28px 28px;
  position: relative;
}
.person-hero__meta { display: flex; flex-direction: column; gap: clamp(18px, 2vw, 28px); }
.person-hero__eye {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--muted);
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.person-hero__eye .dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--red);
  box-shadow: 0 0 0 3px rgba(232, 69, 60, .18);
}
.person-hero__name {
  font-family: var(--font-display);
  font-weight: var(--heading-weight);
  font-size: clamp(42px, 5.8vw, 96px);
  letter-spacing: -.035em;
  line-height: 1.02;
  max-width: 16ch;
}
.person-hero__name em { font-style: italic; font-weight: 500; color: var(--red); }
.person-hero__role {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(18px, .6vw + 1rem, 22px);
  letter-spacing: -.012em;
  line-height: 1.35;
  color: #e6e6e6;
  max-width: 36ch;
}
.person-hero__facts {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
  padding-top: 6px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
}
.person-hero__facts span b {
  color: #fff;
  font-weight: 500;
  margin-left: 6px;
}
.person-hero__photo {
  position: relative;
  aspect-ratio: 4/5;
  border-radius: 6px;
  overflow: hidden;
  background:
    radial-gradient(120% 90% at 20% 0%, rgba(255,255,255,.04), transparent 55%),
    #151515;
  background-image: repeating-linear-gradient(135deg, rgba(255,255,255,.03) 0 1px, transparent 1px 12px);
  border: 1px solid var(--border);
}
.person-hero__photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.person-hero__photo .pcard__placeholder .ini { color: #555; }

@media (max-width: 900px) {
  .person-hero { grid-template-columns: 1fr; }
  .person-hero__photo { max-width: 480px; aspect-ratio: 4/5; }
}

/* ---------- Availability badge ---------- */
.avail-badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  border-radius: 999px;
  background: rgba(124, 225, 124, .08);
  border: 1px solid rgba(124, 225, 124, .35);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #7CE17C;
  width: max-content;
}
.avail-badge__dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: #7CE17C;
  box-shadow: 0 0 0 3px rgba(124, 225, 124, .18);
  animation: avail-pulse 2.2s ease-in-out infinite;
}
@keyframes avail-pulse {
  0%, 100% { box-shadow: 0 0 0 3px rgba(124, 225, 124, .18); }
  50%      { box-shadow: 0 0 0 6px rgba(124, 225, 124, .06); }
}
.svc-section--light .avail-badge {
  background: rgba(42, 146, 42, .08);
  border-color: rgba(42, 146, 42, .35);
  color: #2a7a2a;
}
.svc-section--light .avail-badge__dot { background: #2a7a2a; box-shadow: 0 0 0 3px rgba(42, 146, 42, .15); }

/* ---------- Numbered feature cards (three things) ---------- */
.num-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin-top: clamp(24px, 3vw, 40px);
}
@media (max-width: 900px) { .num-cards { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) { .num-cards { grid-template-columns: 1fr; } }

.num-card {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 28px;
  background: linear-gradient(180deg, #141414, #111);
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-height: 340px;
  transition: transform .3s ease, border-color .25s;
}
.num-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 0%, rgba(91, 90, 255, .12) 0%, transparent 65%);
  opacity: 0;
  transition: opacity 400ms ease;
  pointer-events: none;
  z-index: 0;
}
.num-card > * { position: relative; z-index: 1; }
.num-card:hover {
  transform: translateY(-3px);
  border-color: var(--blue);
}
.num-card:hover::before { opacity: 1; }
/* Card icon — small SVG glyph above the number. Each card overrides
   the colour via .num-card--{accent}. Animates on scroll-reveal: the
   surrounding [data-reveal] flow translates the whole card up + fades
   in, but we add a touch of stagger to the icon so it lands a beat
   before the title for an editorial feel. */
.num-card__icon {
  display: inline-flex;
  width: 32px;
  height: 32px;
  align-items: center;
  justify-content: center;
  color: var(--blue);
  margin-bottom: 4px;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .6s var(--ease-out, cubic-bezier(.2,.8,.2,1)) .1s,
              transform .6s var(--ease-out, cubic-bezier(.2,.8,.2,1)) .1s;
}
.num-card__icon svg { width: 100%; height: 100%; }
.num-card.in .num-card__icon,
[data-reveal].in .num-card__icon {
  opacity: 1;
  transform: translateY(0);
}
.num-card--blue  .num-card__icon { color: #5B5AFF; }
.num-card--red   .num-card__icon { color: #E8453C; }
.num-card--cream .num-card__icon { color: #F5F0DC; }

.num-card__num {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--muted);
}
.num-card__title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(22px, 1.4vw + .5rem, 28px);
  letter-spacing: -.02em;
  line-height: 1.15;
}
.num-card__body {
  color: #b8b8b8;
  font-size: 14.5px;
  line-height: 1.6;
  margin-top: auto;
}

/* ---------- Skill pill groups ---------- */
.skill-groups {
  display: flex;
  flex-direction: column;
  gap: clamp(22px, 2.4vw, 32px);
}
.skill-group__label {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 10px;
  display: block;
}
.skill-group__pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.skill-group__pills span {
  font-family: var(--font-ui);
  font-weight: 400;
  font-size: 13px;
  letter-spacing: .02em;
  color: #e6e6e6;
  padding: 8px 14px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: rgba(255, 255, 255, .02);
  white-space: nowrap;
}

/* ---------- Vertical timeline ---------- */
.timeline {
  position: relative;
  padding-left: 28px;
  display: flex;
  flex-direction: column;
  gap: clamp(28px, 3vw, 48px);
  max-width: 72ch;
}
.timeline::before {
  content: "";
  position: absolute;
  left: 7px;
  top: 8px;
  bottom: 8px;
  width: 1px;
  background: rgba(255, 255, 255, .12);
}
.svc-section--light .timeline::before { background: rgba(15, 15, 15, .14); }

.timeline__entry { position: relative; }
.timeline__entry::before {
  content: "";
  position: absolute;
  left: -28px;
  top: 6px;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: #0f0f0f;
  border: 2px solid var(--red);
  box-shadow: 0 0 0 3px rgba(232, 69, 60, .12);
}
.svc-section--light .timeline__entry::before {
  background: #fff;
  box-shadow: 0 0 0 3px rgba(232, 69, 60, .08);
}
.timeline__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 14px;
  margin-bottom: 6px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--muted);
}
.timeline__title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(22px, 1.4vw + .4rem, 28px);
  letter-spacing: -.02em;
  line-height: 1.2;
  margin: 0 0 4px;
}
.svc-section--light .timeline__title { color: #111; }
.timeline__company {
  font-family: var(--font-display);
  font-weight: 400;
  font-style: italic;
  font-size: clamp(15px, .3vw + .85rem, 18px);
  color: #cfcfcf;
  margin-bottom: 12px;
}
.svc-section--light .timeline__company { color: #444; }
.timeline__body {
  font-size: 15.5px;
  line-height: 1.65;
  color: #cfcfcf;
  max-width: 66ch;
}
.svc-section--light .timeline__body { color: #444; }

/* ============================================================
   Featured work — mirrors the homepage Selected-work pattern
   (tabs + per-category .work-cat sections with 1 big + 4 regular
   cards). Scoped entirely under .about-work and tuned for the
   cream .svc-section--light background the whole block sits on.
   ============================================================ */
.about-work {
  margin-top: clamp(24px, 3vw, 40px);
}

/* Filter tabs — pill group, right-aligned. Each tab shows one .work-cat. */
.about-work .work-head {
  display: flex;
  justify-content: flex-end;
  margin-bottom: clamp(20px, 2.4vw, 32px);
}
.about-work .filters {
  display: inline-flex;
  gap: 4px;
  padding: 4px;
  border: 1px solid #d9d3bc;
  background: rgba(255, 255, 255, .7);
  border-radius: 999px;
  flex-wrap: wrap;
}
.about-work .filters button {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  padding: 8px 14px;
  border-radius: 999px;
  color: #4a4331;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: background .2s, color .2s;
  cursor: none;
}
.about-work .filters button .cd {
  width: 8px; height: 8px; border-radius: 50%;
  background: currentColor;
  opacity: .9;
}
.about-work .filters button:not(.active):hover {
  background: rgba(0, 0, 0, .04);
  color: var(--ink);
}
.about-work .filters button.active {
  background: var(--ink);
  color: #fff;
}
/* Active state per filter — the selected tab takes on its service
   colour (websites=blue, ui-ux=red) so the active state is unmistakably
   tied to the work category being shown. AI Products inverts to ink on
   this light cream band because the cream accent would disappear
   against the cream surface. The `All` tab keeps the ink default. */
.about-work .filters button.active[data-filter="websites"] { background: var(--blue); color: #fff; }
.about-work .filters button.active[data-filter="uiux"]     { background: var(--red);  color: #fff; }
.about-work .filters button.active[data-filter="products"] { background: var(--ink);  color: #fff; }
/* When the tab is active the dot colour follows the button text so it
   stays legible against the new background — the inline dotColor is
   only used for the resting state. */
.about-work .filters button.active .cd { color: #fff !important; }

/* Category section — heading row + card grid */
.about-work .work-cat { margin-bottom: clamp(24px, 2.6vw, 36px); }
.about-work .work-cat[hidden] { display: none; }
.about-work .work-cat-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 18px;
  padding-bottom: 14px;
  border-bottom: 1px solid #d9d3bc;
}
.about-work .work-cat-head .dotc {
  width: 10px; height: 10px; border-radius: 50%;
  flex: 0 0 10px;
}
.about-work .work-cat-head h3 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(18px, .6vw + 1rem, 22px);
  letter-spacing: -.01em;
  color: var(--ink);
}
.about-work .work-cat-head .count {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #6a6250;
  margin-left: auto;
}
.about-work .work-cat-head .see-all {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink);
  border: 1px solid #d9d3bc;
  padding: 6px 12px;
  border-radius: 999px;
  transition: background .2s, color .2s, border-color .2s;
}
.about-work .work-cat-head .see-all:hover {
  background: var(--ink);
  color: #fff;
  border-color: var(--ink);
}
.about-work .work-cat-head .see-all span {
  display: inline-block;
  transition: transform .2s;
}
.about-work .work-cat-head .see-all:hover span { transform: translate(2px, -2px); }

/* Card grid — 12-col so one "big" card can span 8 while the rest
   fill 4 each, matching the homepage Selected-work rhythm. */
.about-work .work-list {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 14px;
}
.about-work .proj {
  grid-column: span 4;
  position: relative;
  border: 1px solid #d9d3bc;
  border-radius: 4px;
  overflow: hidden;
  background: #fff;
  display: flex;
  flex-direction: column;
  transition: transform .35s cubic-bezier(.2, .8, .2, 1), border-color .25s;
  color: inherit;
  text-decoration: none;
}
.about-work .proj.big { grid-column: span 8; }
.about-work .proj:hover { transform: translateY(-4px); }
.about-work .proj.blue:hover  { border-color: var(--blue); }
.about-work .proj.red:hover   { border-color: var(--red); }
.about-work .proj.cream:hover { border-color: #b3a464; }

.about-work .proj .ph {
  aspect-ratio: 4/3;
  position: relative;
  overflow: hidden;
  background: #F5F5F0;
  background-image: repeating-linear-gradient(135deg, rgba(0, 0, 0, .03) 0 1px, transparent 1px 12px);
}
.about-work .proj.big .ph { aspect-ratio: 16/9; }
.about-work .proj .ph::after {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity .35s;
  pointer-events: none;
}
.about-work .proj.blue:hover .ph::after  { opacity: 1; background: radial-gradient(600px 280px at 30% 40%, rgba(91, 90, 255, .12), transparent 60%); }
.about-work .proj.red:hover .ph::after   { opacity: 1; background: radial-gradient(600px 280px at 30% 40%, rgba(232, 69, 60, .12), transparent 60%); }
.about-work .proj.cream:hover .ph::after { opacity: 1; background: radial-gradient(600px 280px at 30% 40%, rgba(179, 164, 100, .14), transparent 60%); }

.about-work .proj .ph-label {
  position: absolute;
  left: 14px; bottom: 12px;
  font-family: var(--font-mono);
  font-size: 10px;
  color: #6a6250;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.about-work .proj .proj-media {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .6s cubic-bezier(.2, .8, .2, 1);
  z-index: 1;
}
.about-work .proj:hover .proj-media { transform: scale(1.03); }

/* Industry badge — same liquid-glass chip as work.css but retuned
   for a light surface. The shared rule in base.css already sets
   position / display / inline-flex / white-space and anchors the chip
   to top-right (top: 14px; right: 14px). We only override colour,
   border and blur here. Keeping the default top/right pin means the
   chip hugs its text instead of stretching between left+right
   anchors — we leave right: 14px alone and NEVER set left so the
   absolute element sizes to its content. */
.about-work .proj .ph-badge {
  background: rgba(255, 255, 255, .82);
  border-color: #d9d3bc;
  color: #4a4331;
  backdrop-filter: blur(6px) saturate(160%);
  -webkit-backdrop-filter: blur(6px) saturate(160%);
}

.about-work .proj .info {
  padding: 18px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
}
.about-work .proj h4 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(18px, .6vw + 1rem, 22px);
  letter-spacing: -.02em;
  line-height: 1.15;
  color: var(--ink);
}
.about-work .proj .ctx {
  font-family: var(--font-mono);
  font-size: 10px;
  color: #6a6250;
  letter-spacing: .14em;
  text-transform: uppercase;
  margin-top: 6px;
}
.about-work .proj .accent {
  width: 8px; height: 8px;
  border-radius: 50%;
  margin-top: 8px;
  flex: 0 0 8px;
}

/* "Coming soon" placeholder tile — borderless, muted, no media. */
.about-work .proj.coming .ph {
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    linear-gradient(180deg, #fafaf2, #f0ecd9);
}
.about-work .proj.coming .ph-label {
  position: static;
  font-size: 18px;
  font-family: var(--font-display);
  color: #6a6250;
  text-transform: none;
  letter-spacing: -.01em;
}

@media (max-width: 1024px) {
  .about-work .proj      { grid-column: span 6; }
  .about-work .proj.big  { grid-column: span 12; }
}
@media (max-width: 768px) {
  /* About-page work filters — same vertical-stack treatment as the
     homepage and /work filters, so the active selection isn't
     squashed against the outer pill border at 375px. */
  .about-work .work-head {
    justify-content: stretch;
    margin-bottom: 18px;
  }
  .about-work .filters {
    flex-direction: column;
    border-radius: 12px;
    padding: 6px;
    gap: 2px;
    width: 100%;
  }
  .about-work .filters button {
    width: 100%;
    justify-content: flex-start;
    padding: 14px 16px;
    border-radius: 8px;
    font-size: 12px;
  }
}
@media (max-width: 640px) {
  .about-work .proj      { grid-column: span 12; }
  .about-work .work-cat-head { flex-wrap: wrap; }
  .about-work .work-cat-head .count { flex: 1 1 100%; margin-left: 0; order: 3; }
}

/* ---------- Contractor block with photo (dark) ---------- */
.contract-block {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, .6fr);
  gap: clamp(32px, 4vw, 64px);
  align-items: center;
  background:
    radial-gradient(60% 120% at 0% 0%, rgba(91, 90, 255, .10), transparent 60%),
    #0a0a0a;
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: clamp(28px, 3.6vw, 48px);
  position: relative;
}
@media (max-width: 860px) { .contract-block { grid-template-columns: 1fr; } }

.contract-block__head {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(26px, 2vw + .5rem, 38px);
  letter-spacing: -.025em;
  line-height: 1.1;
  margin-bottom: 14px;
  max-width: 24ch;
}
.contract-block__head em { color: var(--blue); font-style: italic; font-weight: 500; }
.contract-block__sub {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 18px;
  color: #cfcfcf;
  margin-bottom: 18px;
  max-width: 52ch;
}
.contract-block__body p {
  font-size: 15.5px;
  line-height: 1.65;
  color: #cfcfcf;
  max-width: 64ch;
}
.contract-block__body p + p { margin-top: 1em; }
.contract-block__actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 24px;
}
.contract-block__photo {
  position: relative;
  aspect-ratio: 4/5;
  border-radius: 6px;
  overflow: hidden;
  background:
    radial-gradient(120% 90% at 20% 0%, rgba(255,255,255,.04), transparent 55%),
    #151515;
  background-image: repeating-linear-gradient(135deg, rgba(255,255,255,.03) 0 1px, transparent 1px 12px);
  border: 1px solid var(--border);
}
.contract-block__photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ---------- Clients logo strip (reused on about/pxl-design) ---------- */
.about-clients {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 28px;
  margin-top: clamp(24px, 3vw, 40px);
  font-family: var(--font-display);
  font-weight: 500;
  font-style: italic;
  font-size: clamp(22px, 1.6vw + .5rem, 34px);
  letter-spacing: -.02em;
  color: #111;
  line-height: 1.25;
}
.svc-section--light .about-clients span {
  opacity: .9;
}
.svc-section--light .about-clients .dotsep {
  width: 5px; height: 5px;
  border-radius: 50%;
  background: #c6bfad;
  flex: 0 0 5px;
  opacity: .8;
}
.about-clients .alt { color: #6a6250; font-style: normal; font-weight: 400; }

/* ---------- Label above featured work (small eyebrow) ---------- */
.section-label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 10px;
  display: block;
}

/* ---------- Section helpers for about pages ---------- */
.about-section__sub {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(17px, .3vw + 1rem, 20px);
  color: #e7e7e7;
  margin-bottom: clamp(14px, 1.4vw, 22px);
  max-width: 60ch;
}
.svc-section--light .about-section__sub { color: #333; }

/* ---------- CTA on about pages overrides ---------- */
.about-cta .btn-secondary { background: transparent; }

/* ---------- Logo reel (SVG client logos, marquee) ----------
   Reusable across /about/ismail, /about/pxl-design, and the homepage.
   The SVGs have fixed fills (black or white); we pick the set that
   matches the section background and dial opacity down so they read
   as a texture rather than a branded wall. */
.logo-reel {
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding: clamp(24px, 3vw, 40px) var(--pad-x);
  display: flex;
  align-items: center;
  gap: clamp(24px, 4vw, 56px);
  overflow: hidden;
}
.logo-reel--dark {
  background-color: var(--bg);
  background-image: radial-gradient(circle, rgba(255, 255, 255, .035) 1px, transparent 1px);
  background-size: 28px 28px;
}
.logo-reel--light {
  background: #F5F5F0;
  --border: #E3E0D3;
  --muted: #6a6250;
}
.logo-reel__label {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--muted);
  letter-spacing: .18em;
  text-transform: uppercase;
  flex: 0 0 auto;
  min-width: 200px;
}
.logo-reel__mq {
  flex: 1 1 auto;
  overflow: hidden;
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.logo-reel__track {
  display: flex;
  /* No `gap` here — gap creates a half-step offset between original
     and duplicated halves, which makes translateX(-50%) land mid-
     item and the loop "jumps" each cycle. We use margin-right on
     every item instead so each logo carries its own trailing space
     and -50% always lands cleanly at the start of the duplicate. */
  align-items: center;
  white-space: nowrap;
  width: max-content;
  animation: logo-reel-marq 46s linear infinite;
}
@keyframes logo-reel-marq { to { transform: translateX(-50%); } }
.logo-reel__track img {
  flex: 0 0 auto;
  height: clamp(28px, 2.6vw, 42px);
  width: auto;
  max-width: 160px;
  object-fit: contain;
  /* Logos are pre-coloured SVGs. Drop opacity so they read as a
     brand field rather than a logo wall. */
  opacity: .7;
  transition: opacity .25s;
  margin-right: clamp(40px, 5vw, 72px);
}
.logo-reel--light .logo-reel__track img { opacity: .55; }
.logo-reel__track img:hover { opacity: 1; }

@media (max-width: 720px) {
  .logo-reel { flex-direction: column; align-items: stretch; gap: 14px; }
  .logo-reel__label { min-width: 0; }
}

/* Pause the marquee when the user prefers reduced motion */
@media (prefers-reduced-motion: reduce) {
  .logo-reel__track { animation: none; }
}

/* ---------- Global Reach section (pxl-design) ----------
   Default svc-section 2-col layout: narrow heading on the left,
   wide body on the right. Body prose flows first, the London video
   sits below it — mirroring the illustration-under-prose rhythm on
   the service pages. */
.about-reach__body p + p { margin-top: 1em; }
.about-reach__visual {
  width: 100%;
  margin-top: clamp(28px, 3.2vw, 44px);
}

/* ----------------------------------------------------------
   Section-with-vis layout. Used on the agency section + the why-
   design-matters section on /about/pxl-design. The visual sits
   below the body copy on its own, full-width row inside the prose
   column. On mobile the whole thing stays stacked since svc-section
   already drops to 1-col below 820px.

   The visual is mounted by /assets/js/components.js via the
   data-vis="<key>" attribute, pulling markup from window.PXL_HERO_VIS.
   ---------------------------------------------------------- */
.about-section--with-vis .svc-section__body {
  display: flex;
  flex-direction: column;
  gap: clamp(24px, 3vw, 40px);
}
.about-section__vis {
  position: relative;
  width: 100%;
  max-width: 720px;
  aspect-ratio: 16 / 10;
  border-radius: 8px;
  overflow: hidden;
  background:
    radial-gradient(120% 90% at 70% 10%, rgba(91, 90, 255, .08), transparent 60%),
    linear-gradient(180deg, #0e0e0e, #0a0a0a);
  border: 1px solid rgba(255, 255, 255, .08);
}
/* Wider format when the UX process illustration is the child — it's
   designed against a 24:9 stage and needs the extra horizontal room
   to keep the journey rail readable. */
.about-section__vis:has(.uxp-stage) {
  max-width: 920px;
  aspect-ratio: 24 / 9;
}
/* Light variant — used inside .svc-section--light. Adopts the cream
   surface so it reads as an inset panel instead of a dark cutout. */
.svc-section--light .about-section__vis,
.about-section__vis--light {
  background:
    radial-gradient(120% 90% at 70% 10%, rgba(91, 90, 255, .04), transparent 60%),
    linear-gradient(180deg, #FCFAF2, #F5F0DC);
  border: 1px solid #E3E0D3;
}
/* The reused service-hero illustration scales to fill its container
   exactly the way services.css already targets. We just need to ensure
   the inner svc-hero__vis sits flush.

   Excludes .uxp-stage because the UX process illustration is full-
   bleed by design (its own absolute layout + internal padding). The
   flex centring + 40px padding here would break its rail and quote
   pane positioning. */
.about-section__vis .svc-hero__vis:not(.uxp-stage) {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(20px, 3vw, 40px);
}

/* ----------------------------------------------------------
   UX PROCESS visual — verbatim from the PXL design system
   illustrations preview. Five-phase journey rail with red
   traveller dot, artifact pop-ins per node, cycling research
   quote, three insight metric bars. Used on /about/pxl-design
   "Why design matters" + /services/ui-ux-design "Why it matters".

   Inherits theme tokens via --pg-* which we map per surface
   (dark stage → bg-2 / fg-1 / border; light stage → cream
   palette). The illustration carries its own internal layout
   regardless of the host card.
   ---------------------------------------------------------- */
.uxp-stage {
  --pg-bg: var(--bg);
  --pg-bg2: var(--bg-2, #0d0d0d);
  --pg-fg: var(--fg-1, #fff);
  --pg-fg2: var(--fg-2, #d6d6d6);
  --pg-fg3: var(--fg-3, #b8b8b8);
  --pg-muted: var(--muted, #888);
  --pg-border: var(--border, #2a2a2a);
  --pg-border-2: #1f1f1f;
  --pg-surface: var(--surface, #1a1a1a);
  --pg-stage-bg: var(--bg-2, #0d0d0d);
  --blue-fg: var(--blue);
  position: absolute;
  inset: 0;
  display: block;
  background: var(--pg-bg2);
  aspect-ratio: 24 / 9;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
/* Light variant — cream surface, ink text, cream-line hairlines. */
.svc-section--light .uxp-stage,
.about-section__vis--light .uxp-stage {
  --pg-bg: var(--cream-bg, #fafaf7);
  --pg-bg2: #f0ece0;
  --pg-fg: var(--ink, #0f0f0f);
  --pg-fg2: #333;
  --pg-fg3: var(--cream-fg, #4c4635);
  --pg-muted: var(--cream-meta, #7a7360);
  --pg-border: var(--cream-line, #d9d3bc);
  --pg-border-2: #e6e0cb;
  --pg-surface: #fbfaf4;
  --pg-stage-bg: #fbfaf4;
  background: #f0ece0;
}

.uxp { position: absolute; inset: 0; padding: 22px 24px; display: flex; flex-direction: column; gap: 14px; font-family: var(--font-ui); color: var(--pg-fg); container-type: inline-size; }
.uxp__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.uxp__eyebrow { display: flex; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .18em; text-transform: uppercase; color: var(--pg-muted); }
.uxp__eyebrow::before { content: ""; width: 6px; height: 6px; border-radius: 999px; background: var(--red); box-shadow: 0 0 0 4px rgba(232,69,60,.14); animation: uxp-pulse 1.6s ease-in-out infinite; }
@keyframes uxp-pulse { 0%,100% { box-shadow: 0 0 0 3px rgba(232,69,60,.10); } 50% { box-shadow: 0 0 0 6px rgba(232,69,60,.22); } }
.uxp__title { font-family: var(--font-display); font-weight: 600; font-size: 18px; letter-spacing: -.02em; color: var(--pg-fg); }
.uxp__title em { font-style: italic; font-weight: 500; color: var(--cream); }
.svc-section--light .uxp__title em,
.about-section__vis--light .uxp__title em { color: var(--red); }
.uxp__counter { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--pg-muted); }
.uxp__counter b { font-weight: 500; color: var(--pg-fg); font-variant-numeric: tabular-nums; }

/* Journey rail */
.uxp__rail { position: relative; flex: 0 0 auto; height: 150px; margin-top: 8px; padding: 0 4px; }
.uxp__rail svg { position: absolute; inset: 0 4px; width: calc(100% - 8px); height: 100%; overflow: visible; }
.uxp__rail .rail-bg { stroke: var(--pg-border); stroke-width: 1.5; stroke-dasharray: 2 4; fill: none; }
.uxp__rail .rail-fg { stroke: var(--red); stroke-width: 2; fill: none; stroke-linecap: round; stroke-dasharray: 600; stroke-dashoffset: 600; animation: uxp-draw 9s ease-in-out infinite; }
@keyframes uxp-draw { 0% { stroke-dashoffset: 600; } 70%,100% { stroke-dashoffset: 0; } }
.uxp__rail .rail-traveller { fill: var(--red); }

.uxp__nodes { position: absolute; inset: 0 4px; display: grid; grid-template-columns: repeat(5, 1fr); align-items: end; padding-bottom: 4px; }
.uxp__node { position: relative; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.uxp__dot { width: 14px; height: 14px; border-radius: 999px; background: var(--pg-bg2); border: 1.5px solid var(--pg-border-2); position: relative; z-index: 2; transition: all .3s ease; }
.svc-section--light .uxp__dot,
.about-section__vis--light .uxp__dot { background: #fff; }
.uxp__node.is-active .uxp__dot { background: var(--red); border-color: var(--red); box-shadow: 0 0 0 4px rgba(232,69,60,.18); }
.uxp__node.is-done .uxp__dot { background: var(--red); border-color: var(--red); }
.uxp__node.is-done .uxp__dot::after { content: ""; position: absolute; inset: 3px; border-radius: 999px; background: var(--pg-bg2); }
.svc-section--light .uxp__node.is-done .uxp__dot::after,
.about-section__vis--light .uxp__node.is-done .uxp__dot::after { background: #fff; }
.uxp__lbl { font-family: var(--font-mono); font-size: 9px; letter-spacing: .14em; text-transform: uppercase; color: var(--pg-muted); white-space: nowrap; }
.uxp__node.is-active .uxp__lbl, .uxp__node.is-done .uxp__lbl { color: var(--pg-fg); }

/* Artifacts above each node */
.uxp__artifact { position: absolute; bottom: 32px; width: 52px; height: 40px; opacity: 0; transform: translateY(6px) scale(.92); transition: all .45s cubic-bezier(.2,.7,.2,1); }
.uxp__node.is-active .uxp__artifact, .uxp__node.is-done .uxp__artifact { opacity: 1; transform: translateY(0) scale(1); }
.uxp__artifact .sticky { position: absolute; inset: 6px 4px 0 4px; background: #f7e3a3; border-radius: 2px; box-shadow: 0 4px 10px -4px rgba(0,0,0,.35); transform: rotate(-3deg); }
.uxp__artifact .sticky::before, .uxp__artifact .sticky::after { content: ""; position: absolute; left: 6px; right: 14px; height: 1.5px; background: rgba(0,0,0,.35); border-radius: 1px; }
.uxp__artifact .sticky::before { top: 8px; }
.uxp__artifact .sticky::after { top: 14px; right: 22px; }
.uxp__artifact .cluster i { position: absolute; width: 5px; height: 5px; border-radius: 999px; background: var(--red); }
.uxp__artifact .cluster i:nth-child(1) { top: 8px; left: 14px; background: var(--cream); }
.uxp__artifact .cluster i:nth-child(2) { top: 14px; left: 22px; }
.uxp__artifact .cluster i:nth-child(3) { top: 22px; left: 16px; background: var(--blue-fg); }
.uxp__artifact .cluster i:nth-child(4) { top: 18px; left: 30px; }
.uxp__artifact .cluster i:nth-child(5) { top: 26px; left: 26px; background: var(--cream); }
.uxp__artifact .cluster::before { content: ""; position: absolute; inset: 4px; border: 1.5px dashed var(--pg-border-2); border-radius: 999px; opacity: .6; }
.uxp__artifact .wire { position: absolute; inset: 4px; background: var(--pg-bg2); border: 1px solid var(--pg-border-2); border-radius: 4px; padding: 4px; display: flex; flex-direction: column; gap: 3px; }
.svc-section--light .uxp__artifact .wire,
.about-section__vis--light .uxp__artifact .wire { background: #fff; }
.uxp__artifact .wire span { display: block; height: 3px; background: var(--pg-border-2); border-radius: 1px; }
.uxp__artifact .wire span:nth-child(1) { width: 60%; background: var(--pg-fg2); }
.uxp__artifact .wire span:nth-child(2) { width: 90%; }
.uxp__artifact .wire span:nth-child(3) { width: 75%; }
.uxp__artifact .wire span:nth-child(4) { width: 30%; height: 8px; background: var(--red); margin-top: 2px; border-radius: 2px; }
.uxp__artifact .proto { position: absolute; inset: 4px; display: flex; gap: 3px; }
.uxp__artifact .proto .frame { flex: 1; background: var(--pg-bg2); border: 1px solid var(--pg-border-2); border-radius: 3px; position: relative; overflow: hidden; }
.svc-section--light .uxp__artifact .proto .frame,
.about-section__vis--light .uxp__artifact .proto .frame { background: #fff; }
.uxp__artifact .proto .frame::before { content: ""; position: absolute; left: 3px; right: 3px; top: 4px; height: 2px; background: var(--pg-fg2); border-radius: 1px; }
.uxp__artifact .proto .frame::after { content: ""; position: absolute; left: 3px; right: 12px; bottom: 4px; height: 6px; background: var(--cream); border-radius: 1px; }
.uxp__artifact .proto .arrow { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); width: 14px; height: 14px; border-radius: 999px; background: var(--red); display: grid; place-items: center; color: #fff; font-size: 8px; }
.uxp__artifact .check { position: absolute; inset: 0; display: grid; place-items: center; }
.uxp__artifact .check svg { width: 32px; height: 32px; stroke: var(--red); fill: none; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.uxp__artifact .check svg circle { stroke-dasharray: 88; stroke-dashoffset: 88; animation: uxp-draw-circle 1.4s ease-out forwards; }
.uxp__node.is-active .uxp__artifact .check svg circle, .uxp__node.is-done .uxp__artifact .check svg circle { animation-play-state: running; }
@keyframes uxp-draw-circle { to { stroke-dashoffset: 0; } }

/* Bottom: insight pane */
.uxp__below { display: grid; grid-template-columns: 1.4fr 1fr; gap: 12px; flex: 1; min-height: 0; }
.uxp__quote { background: var(--pg-stage-bg); border: 1px solid var(--pg-border); border-radius: 8px; padding: 12px 14px 11px; display: flex; flex-direction: column; gap: 6px; position: relative; overflow: hidden; min-width: 0; }
.uxp__quote::before { content: "“"; position: absolute; top: -10px; left: 8px; font-family: var(--font-display); font-style: italic; font-size: 56px; color: var(--red); opacity: .18; line-height: 1; }
.uxp__quote-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.uxp__avatar { width: 22px; height: 22px; border-radius: 999px; background: linear-gradient(135deg, var(--cream), var(--red)); flex: 0 0 auto; }
.uxp__quote-name { font-size: 11px; color: var(--pg-fg2); font-weight: 500; }
.uxp__quote-name b { font-weight: 500; color: var(--pg-fg); }
.uxp__quote-tag { margin-left: auto; font-family: var(--font-mono); font-size: 8.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--pg-muted); white-space: nowrap; }
.uxp__quote-text { font-family: var(--font-display); font-style: italic; font-weight: 400; font-size: 14px; line-height: 1.4; letter-spacing: -.005em; color: var(--pg-fg); position: relative; min-width: 0; overflow: hidden; }
.uxp__quote-text .swap { position: relative; display: inline-block; }
.uxp__quote-text .swap span { position: absolute; left: 0; top: 0; opacity: 0; white-space: nowrap; animation: uxp-quote-cycle 12s steps(1) infinite; }
.uxp__quote-text .swap span:nth-child(1) { animation-delay: 0s; }
.uxp__quote-text .swap span:nth-child(2) { animation-delay: -8s; }
.uxp__quote-text .swap span:nth-child(3) { animation-delay: -4s; }
.uxp__quote-text .swap span:first-child { position: relative; }
@keyframes uxp-quote-cycle { 0%,30% { opacity: 1; } 33%,100% { opacity: 0; } }
.uxp__quote-tags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 2px; }
.uxp__quote-tags span { font-family: var(--font-mono); font-size: 8.5px; letter-spacing: .12em; text-transform: uppercase; padding: 2px 6px; border-radius: 999px; border: 1px solid var(--pg-border-2); color: var(--pg-fg2); }
.uxp__quote-tags span.is-hi { background: var(--red); border-color: var(--red); color: #fff; }

.uxp__metrics { display: grid; grid-template-rows: auto auto auto; gap: 8px; }
.uxp__metric { background: var(--pg-stage-bg); border: 1px solid var(--pg-border); border-radius: 8px; padding: 8px 10px; display: flex; align-items: center; gap: 8px; }
.uxp__metric-lbl { font-family: var(--font-mono); font-size: 8.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--pg-muted); flex: 0 0 auto; width: 68px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.uxp__bar { flex: 1; height: 6px; background: var(--pg-border); border-radius: 999px; overflow: hidden; position: relative; }
.uxp__bar i { position: absolute; left: 0; top: 0; bottom: 0; background: var(--red); border-radius: 999px; transform-origin: left center; transform: scaleX(0); animation: uxp-bar 9s ease-out infinite; }
.uxp__bar i.bar-1 { background: var(--cream); --to: .42; }
.uxp__bar i.bar-2 { background: var(--red); --to: .68; animation-delay: .3s; }
.uxp__bar i.bar-3 { background: var(--blue-fg); --to: .88; animation-delay: .6s; }
@keyframes uxp-bar { 0%,8% { transform: scaleX(0); } 60%,100% { transform: scaleX(var(--to, .7)); } }
.uxp__metric-val { font-family: var(--font-mono); font-size: 11px; font-variant-numeric: tabular-nums; color: var(--pg-fg); flex: 0 0 auto; width: 34px; text-align: right; }

@media (prefers-reduced-motion: reduce) {
  .uxp__eyebrow::before,
  .uxp__rail .rail-fg,
  .uxp__bar i,
  .uxp__quote-text .swap span,
  .uxp__rail .rail-traveller animateMotion { animation: none; }
  .uxp__bar i { transform: scaleX(var(--to, .7)); }
  .uxp__rail .rail-fg { stroke-dashoffset: 0; }
}

/* Mobile: drop the rail height + collapse quote/metrics into one
   stacked column so the illustration stays readable below 700px. */
@media (max-width: 700px) {
  .uxp { padding: 16px; gap: 10px; }
  .uxp__rail { height: 110px; }
  .uxp__below { grid-template-columns: 1fr; }
  .uxp__lbl { font-size: 8px; }
  .uxp__title { font-size: 15px; }
}

/* ---------- Meet our founder (pxl-design) ----------
   Photo left, profile right. Uses the .svc-section--wide/light shell
   so the heading rhythm matches the surrounding bands. */
.about-founder__grid {
  display: grid;
  grid-template-columns: 280px minmax(0, 1fr);
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
}
@media (max-width: 820px) {
  .about-founder__grid {
    grid-template-columns: 1fr;
    gap: clamp(24px, 4vw, 40px);
    justify-items: start;
  }
}
.about-founder__photo {
  width: 100%;
  max-width: 280px;
  aspect-ratio: 4 / 5;
  border-radius: 8px;
  border: 1px solid #d9d3bc;
  overflow: hidden;
  position: relative;
  background:
    radial-gradient(120% 90% at 20% 0%, rgba(0, 0, 0, .04), transparent 55%),
    #F5F0DC;
}
.about-founder__photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.about-founder__photo .pcard__placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 10px;
}
.about-founder__photo .pcard__placeholder .ini {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(56px, 7vw, 96px);
  color: var(--ink);
  opacity: .85;
}
.about-founder__photo .pcard__placeholder .soon {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #7a7360;
}

.about-founder__meta {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.about-founder__name {
  font-family: var(--font-display);
  font-weight: var(--heading-weight);
  font-size: clamp(32px, 3.6vw, 56px);
  letter-spacing: -.035em;
  line-height: 1.05;
  color: var(--ink);
  margin: 6px 0 4px;
}
.about-founder__name em {
  font-style: italic;
  font-weight: 500;
  color: var(--blue);
}
.about-founder__role {
  font-family: var(--font-ui);
  font-weight: 500;
  font-size: clamp(17px, .4vw + 1rem, 19px);
  color: var(--ink);
  margin-bottom: 10px;
}
.about-founder__bio {
  font-family: var(--font-ui);
  font-weight: 300;
  font-size: clamp(15.5px, .3vw + .9rem, 17px);
  line-height: 1.6;
  color: #4a4331;
  max-width: 58ch;
}
.about-founder__cta { margin-top: 18px; }
.svc-section--light .about-founder__cta .btn-primary {
  background: var(--ink);
  color: #fff;
  border-color: var(--ink);
}
.svc-section--light .about-founder__cta .btn-primary:hover { background: #000; }