/* ==========================================================================
   Page kit — shared patterns for inner pages (services, portfolio, blog,
   resources, contact). Extracted from the About page (about.css, "abt-" →
   "pg-"), which is the design reference together with the home page.
   Wrap page content in <div class="pg">. Components: resources/views/components/page/*.
   Plan: design-runs/2026-09-28-site-v3/pages/00-plan.md

   Pattern index (class → what it is):
   .pg-hero*  .pg-crumbs  .pg-facts  .pg-badge(s)  .pg-note  .pg-dots  .pg-grid-tex
   .pg-section .pg-wrap .pg-head .pg-h2 .pg-lede .pg-link
   .pg-story*  text + icon points │ photo fading into paper + .pg-floater logo tiles
   .pg-points  icon-circle list      .pg-sheet*  ink-square icon spec grid
   .pg-rules*  ink band: cut-out fading into ink + icon rows (+ .pg-grid-tex)
   .pg-flow*   vector step diagram    .pg-do*  tone-coloured link rows   .pg-tools*  logo chips
   .pg-place*  arch-framed photo + .pg-stamp + .pg-ways icon list
   .pg-faq* .pg-qa* .pg-help*  FAQ with icon glyphs + help card   .pg-close  CTA band
   ========================================================================== */

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

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

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

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

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

.pg-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;
}

.pg-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;
}

.pg-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;
}

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

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

.pg-note span { display: block; }

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

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

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

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

.pg-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;
}

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

.pg-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;
}

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

.pg-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;
}

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

.pg-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). */
.pg-facts {
  display: grid;
  gap: 0 28px;
  max-width: 36rem;
  margin: 26px 0 0;
  padding: 0;
  list-style: none;
}

.pg-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;
}

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

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

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

/* Phones/tablets: a quiet panel with the Rishikesh sketch (non-stage media: portfolio, blog). */
.pg-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%);
}

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

.pg-note--hero {
  position: absolute;
  top: 14px;
  left: 16px;
  z-index: 3; /* always above the portrait (it hid behind his head before) */
  transform: rotate(-4deg);
  transform-origin: left top;
}

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

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

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

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

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

@media (min-width: 640px) and (max-width: 1199.98px) {
  .pg-note--hero { top: 22px; left: 24px; font-size: 1.25rem; }
}

/* Desktop (from 1200): two equal halves (owner: "the image's section starts at the half").
   The media column stretches to the row; a floor keeps short-copy pages' photo big too. */
@media (min-width: 1200px) {
  .pg-hero { padding-top: clamp(32px, 3.2vw, 52px); }

  .pg-hero__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: stretch;
    gap: 48px;
  }

  .pg-hero__copy {
    align-self: center;
    padding-bottom: clamp(48px, 5vw, 80px);
  }

  .pg-hero__media {
    min-height: clamp(600px, 40vw + 60px, 780px);
    overflow: visible;
    padding-top: 0;
    border: 0;
    border-radius: 0;
    background: none;
  }

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

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

  .pg-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) {
  .pg-note--hero { font-size: 1.125rem; }
}

/* ---- Hero stage (x-page.cutout) — owner feedback 2026-09-29, review/hero-fix/00-spec.md ----
   A size container. The portrait's height comes from the stage: stage height − headroom,
   divided by --crop (the share of the cut-out that shows; the rest runs under the hero's
   border), capped so its visible width never passes --pw of the stage. It's centred on
   --fx (his head/torso axis, not the file's box), and its bottom edge always stays hidden. */

.pg-hero__media:has(> .pg-stage) {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  overflow: visible;
}

.pg-stage {
  --head: 3cqh;
  --c: var(--crop-sm, var(--crop, 0.8)); /* phones: a tighter crop so his face reads at 390px (review r1) */
  --pw: 0.86;
  --fx: 0.46;
  --h: min(calc((100cqh - var(--head)) / var(--c)), calc(100cqw * var(--pw) / var(--ar, 0.57)));
  --tile: clamp(40px, 10cqw, 64px);
  position: relative;
  container-type: size;
  isolation: isolate;
  overflow: hidden;
  aspect-ratio: 1 / 1.08;
  border: 1px solid var(--color-border);
  border-radius: var(--r-xl);
  background: radial-gradient(110% 80% at 50% 100%, color-mix(in srgb, var(--blue-600) 10%, var(--paper)) 0%, var(--paper) 70%);
}

.pg-stage .pg-hero__art { opacity: 0.2; }

.pg-stage .pg-hero__portrait {
  position: absolute;
  z-index: 1;
  left: 50%;
  bottom: calc(var(--h) * (var(--c) - 1));
  width: auto;
  margin: 0;
  translate: calc(var(--fx) * -100%) 0;
}

.pg-stage .pg-hero__portrait img {
  width: auto;
  max-width: none;
  height: var(--h);
}

/* A soft blue disc behind head and shoulders + a dashed orbit (the home hero's ring, still). */
.pg-stage__disc {
  position: absolute;
  z-index: 0;
  top: 7cqh;
  left: 50%;
  width: min(86cqw, 90cqh);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--blue-600) 15%, var(--paper)) 0%, color-mix(in srgb, var(--blue-600) 7%, var(--paper)) 60%, color-mix(in srgb, var(--blue-600) 2%, transparent) 100%);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--blue-600) 14%, transparent);
  translate: -50% 0;
}

.pg-stage__disc::after {
  content: "";
  position: absolute;
  inset: -6%;
  border: 1px dashed color-mix(in srgb, var(--blue-600) 28%, transparent);
  border-radius: 50%;
}

/* Tool logos: front tiles (z 2) sit on him, back tiles (z 0, smaller, softer) peek out from
   behind his shoulders. Slots are placed per breakpoint below; never on the face zone
   (x 32–62%, y 0–26% of the stage). */
.pg-stage__tools { margin: 0; padding: 0; list-style: none; }

.pg-tool {
  --s: 1;
  position: absolute;
  z-index: 2;
  top: var(--y);
  left: var(--x);
  display: grid;
  place-items: center;
  width: calc(var(--tile) * var(--s));
  height: calc(var(--tile) * var(--s));
  border: 1px solid var(--slate-200);
  border-radius: 28%;
  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);
  translate: -50% -50%;
  rotate: var(--r, 0deg);
}

.pg-tool__logo { display: grid; place-items: center; width: 100%; height: 100%; }
.pg-tool__logo svg { width: 48%; height: 48%; }

.pg-tool.is-back,
.pg-tool--3, .pg-tool--5, .pg-tool--6, .pg-tool--8, .pg-tool--9 {
  --s: 0.78;
  z-index: 0;
  box-shadow: 0 12px 22px -14px rgb(15 23 42 / 0.35), 0 1px 3px -1px rgb(15 23 42 / 0.08);
}

/* Phones: six slots around a centred figure (the rest wait for bigger screens). */
.pg-tool--1 { --x: 87%; --y: 11%; --r: 6deg; --s: 1.08; }
.pg-tool--2 { --x: 9%;  --y: 56%; --r: -7deg; }
.pg-tool--3 { --x: 12%; --y: 12%; --r: -4deg; }
.pg-tool--4 { --x: 91%; --y: 60%; --r: 5deg; }
.pg-tool--5 { --x: 71%; --y: 6%;  --r: 4deg; }
.pg-tool--6 { --x: 90%; --y: 84%; --r: 6deg; }
.pg-tool--7, .pg-tool--8, .pg-tool--9, .pg-tool--10 { display: none; }

@media (max-width: 639.98px) {
  .pg-stage:has(.pg-stage__tools) .pg-note--hero { display: none; } /* the logos carry the corners */

  /* Review r1: his photo arrives sooner — tighter hero rhythm (padding only, type unchanged). */
  .pg-hero__actions { margin-top: 16px; gap: 8px; }
  .pg-hero__media:has(> .pg-stage) { margin-top: 16px; }
  .pg-hero .pg-facts { margin-top: 16px; }

  /* …and a lighter proof badge, so it doesn't compete with him. */
  .pg-stage .pg-badges { inset: auto 10px 10px; }
  .pg-stage .pg-badge { gap: 8px; padding: 5px 12px 5px 5px; border-radius: 12px; box-shadow: 0 12px 24px -18px rgb(15 23 42 / 0.4); }
  .pg-stage .pg-badge__mark { width: 30px; height: 30px; }
  .pg-stage .pg-badge__mark svg { width: 16px; height: 16px; }
}

@media (min-width: 640px) and (max-width: 1199.98px) {
  .pg-hero__media:has(> .pg-stage) { margin-top: 28px; }
  .pg-stage { --c: var(--crop, 0.8); --pw: 0.5; aspect-ratio: 16 / 11; max-height: 540px; width: 100%; }
  .pg-tool--7, .pg-tool--8 { display: grid; }
  .pg-tool--1 { --x: 74%; --y: 14%; }
  .pg-tool--2 { --x: 22%; --y: 46%; }
  .pg-tool--3 { --x: 28%; --y: 20%; }
  .pg-tool--4 { --x: 78%; --y: 56%; }
  .pg-tool--5 { --x: 66%; --y: 28%; }
  .pg-tool--6 { --x: 12%; --y: 70%; }
  .pg-tool--7 { --x: 88%; --y: 82%; --r: -5deg; }
  .pg-tool--8 { --x: 90%; --y: 30%; --r: -3deg; }
}

@media (min-width: 1200px) {
  .pg-stage {
    --c: var(--crop, 0.8);
    --tile: clamp(48px, 10.6cqw, 70px); /* review r1: front ~70px, back ~54px */
    position: absolute;
    inset: 0;
    aspect-ratio: auto;
    overflow: visible;
    border: 0;
    border-radius: 0;
    background: none;
  }

  .pg-stage .pg-hero__art { top: 10%; }
  .pg-stage__disc { top: 6cqh; width: min(88cqw, 84cqh); }

  /* Measured at 1440/1920: his head spans x 34–62%, y 8–42% of the stage; shoulders sit at
     y ≈ 45%, the right arm reaches x ≈ 94%, the left only ≈ 18% (he stands turned). */
  .pg-tool--7, .pg-tool--8, .pg-tool--9, .pg-tool--10 { display: grid; }
  .pg-tool--1  { --x: 84%; --y: 15%; --r: 6deg; --s: 1.1; }
  .pg-tool--2  { --x: 11%; --y: 58%; --r: -7deg; }
  .pg-tool--3  { --x: 22%; --y: 43%; --r: -4deg; }
  .pg-tool--4  { --x: 91%; --y: 55%; --r: 5deg; }
  .pg-tool--5  { --x: 80%; --y: 32%; --r: 4deg; }
  .pg-tool--6  { --x: 18%; --y: 26%; --r: 5deg; }
  .pg-tool--7  { --x: 11%; --y: 77%; --r: 7deg; }
  .pg-tool--8  { --x: 92%; --y: 29%; --r: -4deg; }
  .pg-tool--9  { --x: 92%; --y: 76%; --r: -6deg; }
  .pg-tool--10 { --x: 84%; --y: 90%; --r: -5deg; }
}

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


/* Dot-grid texture (home hero's), masked to a soft patch. Sections move the patch. */
.pg-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%);
}

/* The portrait sits above the dot texture (z 1); tools, note and badges layer around it. */
.pg-hero__portrait { z-index: 1; }

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

.pg-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);
}

.pg-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) */
}

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

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

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

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

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

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

.pg-section { position: relative; overflow: clip; }
.pg-section > .pg-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. */
.pg-points__icon,
.pg-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);
}

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

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

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

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

.pg-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;
}

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

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

.pg-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;
}

.pg-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). */
.pg-story__media {
  --dots-at: 70% 30%;
  position: relative;
  margin: 0;
  padding: 28px 0 0;
}

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

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

.pg-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;
}

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

.pg-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);
}

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

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

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

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

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

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

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

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

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

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

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

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

/* "The short version": an icon grid (index-card cells). */
.pg-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);
}

.pg-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. */
.pg-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);
}

.pg-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);
}

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

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

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

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

.pg-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;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

/* Faint blueprint grid, strongest top-right. */
.pg-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%);
}

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

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

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

.pg-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. */
.pg-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);
}

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

.pg-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. */
.pg-note--rules { display: none; }

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

.pg-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);
}

.pg-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);
}

.pg-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;
}

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

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

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

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

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

  .pg-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
   ========================================================================== */

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

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

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

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

/* The lead-flow vector: nodes on a dashed line, official logos where a tool is named. */
.pg-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));
}

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

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

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

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

.pg-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);
}

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

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

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

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

.pg-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);
}

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

.pg-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);
}

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

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

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

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

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

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

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

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

.pg-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;
}

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

@media (min-width: 1024px) {
  .pg-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. */
  .pg-do__side { grid-row: 1 / span 2; }
  .pg-tools { grid-column: 2; margin-top: 8px; }
}

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

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

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

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

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

.pg-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;
}

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

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

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

.pg-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);
}

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

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

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

.pg-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;
}

.pg-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));
}

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

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

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

.pg-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%);
}

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

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

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

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

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

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

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

.pg-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);
}

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

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

.pg-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). */
.pg-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;
}

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

.pg-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;
}

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

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

.pg-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);
}

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

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

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

.pg-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;
}

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

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

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

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

.pg-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) {
  .pg-qa p { padding-left: 0; padding-right: 0; }
}

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

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

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

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

/* ==========================================================================
   Component extras (components/page/*)
   ========================================================================== */

/* Section head with a hand note on the right (x-page.head :note). */
.pg-head--note { display: grid; gap: 16px; }

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

@media (min-width: 1024px) {
  .pg-head--note { grid-template-columns: minmax(0, 1fr) auto; align-items: end; }
  .pg-note--head { margin-right: 6%; font-size: 1.25rem; }
}

.pg-note__arrow {
  display: block;
  width: 44px;
  height: 34px;
  margin: 2px 0 0 40px;
  color: var(--ink-900);
}

.pg-note__arrow--down-left { transform: scaleX(-1); margin-left: 0; }
.pg-rules .pg-note__arrow, .pg-rules .pg-note { color: var(--slate-300); }

/* 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) {
  .pg-note--head { display: none; }
}