/* ============================================================
   /about, rebuilt 2026-09-24 to More Better's about-us frame
   (Figma s3OB1YtX1ctalxmNGbm2gN, 3304:11318). Values are the 1512
   artboard; layouts collapse at the shared 1100 / 720 / 640 breakpoints.
   Hand-drawn edges use the #sh-wavy filter the shared footer carries.
   ============================================================ */

/* ---- Hero (3304:11319): Sunny slab, 64px H2, photo in a hand-drawn frame ---- */
.ab-hero {
  position: relative; isolation: isolate;
  display: flex; align-items: center; gap: 48px;
  /* 64px under the photo: the frame's hero is 648 tall (3304:11319). */
  padding: 144px 112px 64px;
  background: var(--sunny, #FFD100);
  border-radius: 0 0 32px 32px;
}
.ab-hero::after {
  content: ""; position: absolute; inset: 0 0 -5px; border-radius: 0 0 34px 34px;
  border: 5px solid var(--sunny, #FFD100); border-top: 0;
  pointer-events: none; filter: url(#sh-wavy); z-index: -1;
}
.ab-hero-copy { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.ab-hero-title {
  font-family: 'Fredoka', system-ui, sans-serif; font-weight: 600;
  font-size: clamp(38px, 4.3vw, 64px); line-height: 1.1; letter-spacing: -.75px;
  color: var(--sunny-950, #342304); margin: 0;
}
.ab-hero-art { position: relative; flex: 0 1 671px; min-width: 0; aspect-ratio: 671 / 440; border-radius: 31px; }
.ab-hero-art img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 31px; }
/* The 8px Sunny frame sits over the photo edge, so the photo reads as torn out. */
.ab-hero-art::after {
  content: ""; position: absolute; inset: -1px; border-radius: 31px;
  border: 8px solid var(--sunny, #FFD100); pointer-events: none; filter: url(#sh-wavy);
}

/* ---- How we create change (3350:11649): sticky header beside four steps ---- */
.ab-impact { display: flex; justify-content: center; padding: 112px 64px; background: #fff; }
.ab-impact-inner { display: flex; gap: 44px; align-items: flex-start; justify-content: center; width: 100%; max-width: 1140px; }
.ab-impact-head {
  flex: 0 1 509px; min-width: 0; display: flex; flex-direction: column; gap: 10px; align-items: flex-start;
  position: sticky; top: 140px;
}
.ab-impact-title {
  font-family: 'Fredoka', system-ui, sans-serif; font-weight: 600;
  font-size: clamp(32px, 3.2vw, 48px); line-height: 1.12; letter-spacing: -.5px;
  color: var(--grass-900, #2D3113); margin: 0;
}
.ab-impact-body { font-size: 18px; line-height: 1.6; color: #22250E; margin: 0; max-width: 472px; }
.ab-steps { flex: 0 1 586px; min-width: 0; display: flex; flex-direction: column; gap: 16px; margin: 0; padding: 0; list-style: none; }
.ab-step {
  display: flex; align-items: center; gap: 44px; padding: 48px;
  background: var(--magnolia, #FDF9F1); border: 1px solid var(--magnolia, #FDF9F1); border-radius: 16px;
}
.ab-step-icon { width: 142px; height: 142px; flex: none; display: flex; align-items: center; justify-content: center; }
.ab-step-icon img { width: 100%; height: 100%; object-fit: contain; display: block; }
.ab-step-text { display: flex; flex-direction: column; gap: 10px; color: var(--grass-900, #2D3113); }
.ab-step-text h3 { font-family: 'Work Sans', system-ui, sans-serif; font-weight: 600; font-size: 20px; line-height: 1.6; margin: 0; color: inherit; }
.ab-step-text p { font-size: 16px; line-height: 1.6; margin: 0; color: inherit; }

/* ---- Our story (3350:11784): Magnolia card with a hand-drawn edge ---- */
.ab-story-sec { padding: 40px 64px; background: #fff; display: flex; justify-content: center; }
.ab-story {
  position: relative; isolation: isolate;
  display: flex; align-items: center; justify-content: center; gap: 56px;
  width: 100%; max-width: 1384px;
  /* Isabel 10-13: the frame's two columns sit 90px inside the card at 1512.
     Below that the card narrowed but the columns did not, so the inset fell
     to 55px at 1440 and the section read crowded. The inset now scales and
     the columns give way instead. */
  padding: 40px clamp(10px, 6vw, 90px);
  background: var(--magnolia, #FDF9F1); border-radius: 24px;
}
.ab-story::after {
  content: ""; position: absolute; inset: -2px; border-radius: 26px;
  border: 5px solid var(--magnolia, #FDF9F1); pointer-events: none; filter: url(#sh-wavy); z-index: -1;
}
.ab-story-copy { flex: 0 1 540px; min-width: 0; display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.ab-story-title {
  font-family: 'Fredoka', system-ui, sans-serif; font-weight: 600;
  font-size: clamp(32px, 3.2vw, 48px); line-height: 1.12; letter-spacing: -.5px;
  color: var(--carbon, #28201C); margin: 0; max-width: 504px;
}
.ab-story-lede { font-family: 'Fredoka', system-ui, sans-serif; font-weight: 500; font-size: 22px; line-height: 1.3; color: var(--carbon, #28201C); margin: 0; }
.ab-story-founder { display: flex; flex-direction: column; gap: 16px; }
.ab-story-who { font-weight: 600; font-size: 20px; line-height: 1.6; color: var(--carbon, #28201C); margin: 0; }
.ab-story-body { font-size: 16px; line-height: 1.6; color: var(--grass-900, #2D3113); margin: 0; }
.ab-story-media { flex: 0 1 607px; min-width: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.ab-story-photo { height: 504px; border: 4px solid var(--neutral-200, #F1EDE5); border-radius: 24px; overflow: hidden; }
.ab-story-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ab-story-media figcaption {
  font-family: 'Fredoka', system-ui, sans-serif; font-weight: 500;
  font-size: clamp(22px, 1.9vw, 28px); line-height: 1.25; color: var(--forest, #455115); text-align: center;
}

/* ---- Team (3350:11817): centred 64px heading, three-up biography cards ---- */
.ab-team-sec { padding: 96px 104px; background: #fff; display: flex; flex-direction: column; align-items: center; gap: 64px; }
.ab-team-head { display: flex; flex-direction: column; align-items: center; gap: 16px; text-align: center; }
.ab-team-title {
  font-family: 'Fredoka', system-ui, sans-serif; font-weight: 600;
  font-size: clamp(34px, 4.3vw, 64px); line-height: 1.1; letter-spacing: -.75px;
  color: var(--carbon, #28201C); margin: 0; max-width: 1025px;
}
/* One line in the frame (768 wide); 800 leaves room for font rounding. */
.ab-team-sub { font-size: 20px; line-height: 1.6; color: var(--neutral-600, #5C534D); margin: 0; max-width: 800px; }
.ab-team { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 48px 32px; width: 100%; max-width: 1304px; margin: 0; padding: 0; list-style: none; }
.ab-tcard {
  position: relative; isolation: isolate;
  display: flex; flex-direction: column; gap: 12px; padding: 12px;
  background: var(--neutral-200, #F1EDE5); border: 4px solid var(--neutral-200, #F1EDE5); border-radius: 16px;
  transition: background .2s ease, border-color .2s ease;
}
.ab-tcard::after {
  content: ""; position: absolute; inset: -4px; border-radius: 18px;
  border: 4px solid var(--neutral-200, #F1EDE5); pointer-events: none; filter: url(#sh-wavy); z-index: -1;
  transition: border-color .2s ease;
}
.ab-tcard.is-open { background: var(--neutral-300, #E5E1D8); border-color: var(--neutral-300, #E5E1D8); }
.ab-tcard.is-open::after { border-color: var(--neutral-300, #E5E1D8); }
/* Design shape (357x275) at every width, not a fixed 275px height: with a
   fixed height, wide two-column cards (1024-1280px) cut heads to a forehead
   strip (Ken Illingworth's note, 2026-09-24). */
.ab-tcard-photo { aspect-ratio: 357 / 275; width: 100%; border-radius: 12px; overflow: hidden; background: var(--neutral-300, #E5E1D8); }
.ab-tcard-photo img { width: 100%; height: 100%; object-fit: cover; object-position: center 22%; display: block; }
.ab-tcard-id { display: flex; flex-direction: column; gap: 4px; }
.ab-tcard-name { font-family: 'Fredoka', system-ui, sans-serif; font-weight: 500; font-size: clamp(22px, 1.9vw, 28px); line-height: 1.25; color: #171211; margin: 0; }
/* The design keeps a 20px row under the name; the role sits in it. */
/* Label style in Carbon, 14px with 2px tracking (3350:12776). */
.ab-tcard-role { font-family: 'Work Sans', system-ui, sans-serif; font-weight: 600; font-size: 14px; line-height: 1.25; letter-spacing: 2px; text-transform: uppercase; color: var(--carbon, #28201C); margin: 0; min-height: 20px; }
.ab-tcard-desc { font-size: 18px; line-height: 1.6; color: var(--carbon, #28201C); margin: 0; }
.ab-tcard-btn {
  align-self: flex-start; display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 20px; border-radius: 9999px; background: transparent; border: 0;
  font-family: 'Work Sans', system-ui, sans-serif; font-weight: 600; font-size: 16px; line-height: 1.6;
  color: var(--carbon, #28201C); cursor: pointer; transition: background .15s ease;
}
.ab-tcard-btn:hover { background: rgba(0,0,0,.05); }
.ab-tcard-btn:focus-visible { outline: 2px solid var(--carbon, #28201C); outline-offset: 2px; }
.ab-tcard-btn svg { width: 16px; height: 16px; transition: transform .2s ease; }
.ab-tcard-btn[aria-expanded="true"] svg { transform: rotate(180deg); }


/* ---- Breakpoints ---- */
@media (max-width: 1100px) {
  .ab-hero { flex-direction: column; align-items: stretch; padding: 168px 40px 40px; gap: 40px; }
  .ab-hero-art { flex: none; width: 100%; }
  .ab-impact { padding: 72px 40px; }
  .ab-impact-inner { flex-direction: column; gap: 32px; }
  .ab-impact-head { position: static; flex: none; }
  .ab-steps { flex: none; width: 100%; }
  .ab-story-sec { padding: 40px; }
  .ab-story { flex-direction: column; align-items: stretch; padding: 40px 32px; gap: 32px; }
  .ab-story-copy, .ab-story-media { flex: none; }
  .ab-story-photo { height: auto; aspect-ratio: 607 / 504; }
  .ab-team-sec { padding: 72px 40px; gap: 48px; }
  .ab-team { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 24px; }
}
@media (max-width: 720px) {
  .ab-step { flex-direction: column; align-items: flex-start; gap: 16px; padding: 28px 24px; }
  .ab-step-icon { width: 96px; height: 96px; }
  .ab-team { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .ab-hero { padding: 132px 16px 32px; border-radius: 0 0 24px 24px; }
  .ab-hero-art, .ab-hero-art img, .ab-hero-art::after { border-radius: 20px; }
  .ab-impact { padding: 56px 16px; }
  .ab-story-sec { padding: 24px 16px; }
  .ab-story { padding: 32px 20px; }
  .ab-story-lede { font-size: 20px; }
  .ab-team-sec { padding: 56px 16px; gap: 32px; }
  .ab-team-sub { font-size: 17px; }
  .ab-tcard-photo { aspect-ratio: 4 / 3; }
}

/* The team and story headings balance (theme.css default): a greedy override
   left one word alone on the last line ("up." at 390 and 768, "turn." at
   1280). The hero and impact headings keep the frame's greedy wrap above
   phone width; on phones every heading balances. */
@media (min-width: 721px) { .ab-hero-title, .ab-impact-title, .ab-story-title { text-wrap: wrap; } }

/* Section badges carry the hand-drawn ring in their own fill (3350:11652). */
.d-badge--grass.wavy-edge { --wavy-color: var(--grass, #A7C434); }
.d-badge--sunny.wavy-edge { --wavy-color: var(--sunny, #FFD100); }

/* Visible keyboard focus (the theme bevel shadow hides its ring). */
/* Carbon, not Grass 600: the green ring was too faint beside Sunny and beige. */
.d-givex :is(a, .btn, .d-gcard):focus-visible { outline: 2px solid var(--carbon, #28201C); outline-offset: 2px; box-shadow: none; }
.d-crumb a:focus-visible { outline: 2px solid var(--carbon, #28201C); outline-offset: 2px; }

/* Per-person crop: keep the crown in frame (never trim the top of the head)
   and the chin clear of the bottom edge. Default 22% suits most; these sit
   higher or lower in their original photos. */
.ab-tcard-photo img[src*="/team/illingworth"],
.ab-tcard-photo img[src*="/team/murdock"],
.ab-tcard-photo img[src*="/team/katz"],
.ab-tcard-photo img[src*="/team/serna"] { object-position: center 8%; }
/* Art 10-25: Matt, Alec and Jason had their chins cut off. These centre the
   crown-to-chin span in the frame. Alec's beard makes that span taller than
   the frame shows, so his photo has 30px of background added on each side
   (stall-wide-*), which gives the frame more height to show. */
.ab-tcard-photo img[src*="/team/geck"] { object-position: center 24%; }
.ab-tcard-photo img[src*="/team/york"] { object-position: center 40%; }
.ab-tcard-photo img[src*="/team/stall-wide"] { object-position: center 48%; }

/* Face-safe crops (YuNet audit 2026-09-24). */
img[src*="nicaragua-proof"] { object-position: 50% 16% !important; }
.ab-tcard-photo img[src*="/team/stall"] { object-position: center 26%; }

/* ============================================================
   Phone frame "About - Mobile" (Figma WmKUes42Xq4m4lJ956wuwe,
   3788:24087, 375 wide), 2026-10-02. 24px gutters, sections 40px
   top and bottom. Mobile type: H3 36/1.2 -0.5px, H5 28/1.25,
   Body Large 18, Body 16, Label 14 with 2px tracking.
   ============================================================ */
@media (max-width: 720px) {
  /* Hero (3788:24088) */
  .ab-hero { padding: 160px 24px 40px; gap: 16px; border-radius: 0 0 32px 32px; }
  .ab-hero-title { font-size: 36px; line-height: 1.2; letter-spacing: -.5px; }
  .ab-hero-art { aspect-ratio: 327 / 214; }
  .ab-hero-art, .ab-hero-art img, .ab-hero-art::after { border-radius: 31px; }

  /* How we create change (3788:24093): copy inset 40px, then a sideways
     scroller of 236px Magnolia cards with centred text and 142px art. */
  .ab-impact { padding: 40px 24px; }
  .ab-impact-inner { padding: 16px; gap: 16px; align-items: stretch; }
  .ab-impact-head { gap: 12px; }
  .ab-impact-title { font-size: 36px; line-height: 1.2; letter-spacing: -.5px; }
  .ab-impact-body { font-size: 16px; max-width: none; }
  .ab-steps {
    flex-direction: row; flex-wrap: nowrap; gap: 16px; align-items: stretch;
    width: auto; align-self: stretch;
    overflow-x: auto; scroll-snap-type: x mandatory;
    margin-inline: -40px; padding-inline: 40px; scroll-padding-inline: 40px;
  }
  .ab-step { flex: 0 0 236px; flex-direction: column; align-items: center; text-align: center; gap: 12px; padding: 16px; scroll-snap-align: start; }
  .ab-step-icon { width: 142px; height: 142px; }
  .ab-step-text { gap: 8px; align-items: center; }
  .ab-step-text h3 { font-size: 18px; }
  .ab-impact .sc-dots { margin-top: 4px; }

  /* Our story (3788:24121): the intro is body text, not a second heading. */
  .ab-story-sec { padding: 40px 24px; }
  .ab-story { padding: 28px; gap: 16px; border-radius: 24px; }
  .ab-story-copy { gap: 16px; }
  .ab-story-title { font-size: 36px; line-height: 1.2; letter-spacing: -.5px; max-width: none; }
  .ab-story-lede { font-family: 'Work Sans', system-ui, sans-serif; font-weight: 400; font-size: 16px; line-height: 1.6; }
  .ab-story-founder { gap: 8px; }
  .ab-story-who { font-size: 18px; }
  .ab-story-media { gap: 8px; }
  .ab-story-photo { aspect-ratio: auto; height: 272px; }
  .ab-story-media figcaption { font-size: 28px; line-height: 1.25; }

  /* Team (3788:24132) */
  .ab-team-sec { padding: 40px 24px; gap: 16px; }
  .ab-team-head { gap: 8px; }
  .ab-team-title { font-size: 36px; line-height: 1.2; letter-spacing: -.5px; }
  .ab-team-sub { font-size: 16px; }
  .ab-team { gap: 16px; }
  .ab-tcard-photo { aspect-ratio: 295 / 225; }
  .ab-tcard-name { font-size: 28px; line-height: 1.25; }
  .ab-tcard-role { font-size: 14px; letter-spacing: 2px; line-height: 1.25; color: var(--carbon, #28201C); }
  .ab-tcard-desc { font-size: 16px; }
  .ab-tcard-btn { min-height: 44px; }
}

/* Team photos, desktop three-up: 381 x 275 in the frame (3350:12776), a
   shallower box than the 357 x 275 it was built to. */
@media (min-width: 1101px) { .ab-tcard-photo { aspect-ratio: 381.33 / 275; } }
/* Headshots whose hair starts within 5% of the top of the file: crop from the
   very top so the crown keeps all the clear space the photo has. */
.ab-tcard-photo img[src*="/team/illingworth"],
.ab-tcard-photo img[src*="/team/murdock"],
.ab-tcard-photo img[src*="/team/katz"],
.ab-tcard-photo img[src*="/team/serna"] { object-position: center top; }