/* AQF BUILD VERSION: about-v4.css founder-letter-locked-v1 | 2026-06-28 | Letter locked: no aspect-ratio, editorial blockquote, sig PNG, splash watermark, .76rem font | 2026-06-27 | Founder Statement Vivid lagoon/high-step inset/letter rendering audit pass; isolated About CSS; no styles.css changes */

/* DM Serif Display — Founder Statement heading ("The Way of Water").
   History (2026-07-29): was Cormorant Garamond, which Stuart rejected outright.
   Cabin was tried next and rejected too — the heading wants a SERIF.
   DM Serif Display is the right serif for it: a DISPLAY face built for large
   headlines, where Libre Baskerville is a TEXT face already carrying the letter
   body on this same page — using one face for both would flatten the section.
   Same file the Muscle Hypertrophy page self-hosts as 'DMSerifLocal'.
   Declared here, not in styles.css: about.html is the only page that needs it,
   and styles.css loads on all 14. See reference_sow_font_rules. */
@font-face { font-family: "DM Serif Display"; src: url("../fonts/DMSerifDisplay-Regular.ttf") format("truetype"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "DM Serif Display"; src: url("../fonts/DMSerifDisplay-Italic.ttf") format("truetype"); font-weight: 400; font-style: italic; font-display: swap; }

.about-v4-page {
  --aqf-blue: #00AEEF;
  --aqf-orange: #F7931F;
  --aqf-navy: #000033;
  --aqf-ink: #071E2D;
  --aqf-sand: #f6f1e8;
  --aqf-aqua-soft: #e7f9fc;
  --aqf-serif: "Libre Baskerville", Georgia, serif;
  --aqf-sans: "Montserrat", Arial, sans-serif;
  background: #fff;
  color: var(--aqf-ink);
}

.about-v4-page .main-nav a.active { color: var(--aqf-blue); }
.about-v4-page .nav-cta:hover { background: var(--aqf-blue); color: var(--aqf-navy) !important; }

/* Footer logo chip: orange background instead of the translucent-white default */
.about-v4-page .footer-logo-wrap {
  background: var(--aqf-orange);
  border-color: rgba(255,255,255,0.30);
  padding: 2px;
  overflow: hidden;
}

/* Let the splash mark fill more of the chip — closer to the edge, still breathing */
.about-v4-page .footer-logo-wrap img { transform: scale(1.18); }

.about-v4-page h1,
.about-v4-page h2,
.about-v4-page h3 { font-family: var(--aqf-serif); letter-spacing: -.045em; line-height: 1.02; }

.aqf4-label {
  margin: 0 0 14px;
  color: var(--aqf-orange);
  font-family: var(--aqf-sans);
  font-size: .72rem;
  font-weight: 900;
  letter-spacing: .16em;
  line-height: 1.1;
  text-transform: uppercase;
}

.aqf4-section { padding: clamp(72px, 8vw, 112px) 0; }

/* REAL-WORLD ENVIRONMENTS SECTION TIGHTENING */
.aqf4-aqua {
  padding-top: 110px;
  padding-bottom: 12px;
  background: var(--aqf-aqua-soft);
}
.aqf4-sand { background: var(--aqf-sand); }
/* Doctorate section only. Deliberately NOT var(--aqf-navy): Stuart's call
   2026-07-29 was to darken the hero and this section to #061426 and leave
   every other navy on the page at #000033. Do not "tidy" this back into
   the token — that would drag the whole page with it. */
.aqf4-deep { background: #061426; color: #fff; }
.aqf4-light h2,
.aqf4-light p,
.aqf4-deep h2,
.about-v4-page .aqf4-deep .aqf4-copy h2 {
  color: #fff;
}

.aqf4-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(42px, 6vw, 86px);
  align-items: center;
}

.aqf4-copy h2,
.aqf4-section-head h2 {
  margin: 0 0 20px;
  color: var(--aqf-navy);
  font-size: clamp(2rem, 4vw, 3.55rem);
}

.aqf4-copy p,
.aqf4-section-head p,
.aqf4-story-head p,
.aqf4-recognition-intro {
  margin: 0 0 1rem;
  font-size: clamp(1rem, 1.1vw, 1.1rem);
  line-height: 1.78;
  font-weight: 600;
}

.aqf4-section-head { max-width: 820px; margin: 0 auto; text-align: center; }
/* REAL-WORLD ENVIRONMENTS HEADLINE WIDTH REFINEMENT */
.aqf4-pools-head {
  max-width: 1080px;
}

.aqf4-pools-head h2 {
  max-width: 1040px;
  margin-left: auto;
  margin-right: auto;
}
.aqf4-section-head h3 { margin: 0 0 14px; color: var(--aqf-navy); font-size: clamp(1.55rem, 2.5vw, 2.25rem); }
.aqf4-center { text-align: center; margin-top: 30px; }

/* REAL CLIENT STORIES CTA SPACING */
.aqf4-stories-sand .aqf4-center {
  margin-top: 80px;
}

/* HERO V2 ISOLATED BUILD
   Section: Hero
   Purpose: Rebuilds the About Hero with independent class names, right-side copy, right-side navy gradient, and hero.jpg. */
/* HERO V2 FIGMA-INSPIRED DESKTOP FOUNDATION
   Section: Hero V2
   Purpose: Anchors the image left at a controlled width and creates a regal #000033 right-side gradient panel for the content. */
.aqf4-hero-v2 {
  position: relative;
  min-height: 92vh;
  overflow: hidden;
  display: grid;
  align-items: center;
  background: #061426;
  color: #fff;
  padding-top: 86px;
  padding-bottom: 76px;
}

/* HERO V2 IMAGE CLEANUP
   Section: Hero V2
   Purpose: Keeps the image side brighter and extends the photo slightly farther right so the navy blend starts closer to Stu's left shoulder. */
.aqf4-hero-v2-img {
  position: absolute;
  top: 0;
  left: 0;
  width: 82%;
  height: 100%;
  object-fit: cover;
  object-position: left 24%;
  filter: saturate(1.04) contrast(1.04) brightness(1);
  z-index: 0;
}

/* HERO V2 FIGMA-STYLE REGAL NAVY PANEL
   Section: Hero V2
   Purpose: Moves the navy blend farther right, keeps Stu's face/body cleaner, and locks the text side to true #000033. */
.aqf4-hero-v2::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg,
    rgba(6,20,38,0) 0%,
    rgba(6,20,38,0) 39%,
    rgba(6,20,38,.18) 47%,
    rgba(6,20,38,.58) 56%,
    rgba(6,20,38,.88) 64%,
    #061426 72%,
    #061426 100%
  );
  z-index: 1;
}

.aqf4-hero-v2-inner {
  position: relative;
  z-index: 2;
}

.aqf4-hero-v2-copy {
  width: min(460px, 40vw);
  margin-left: auto;
  color: #fff;
}

/* HERO V2 PREMIUM EYEBROW
   Section: Hero V2
   Purpose: Adds Figma-inspired aqua line label above the headline. */
.aqf4-hero-v2-eyebrow {
  display: flex;
  align-items: center;
  gap: 14px;
  max-width: none;
  margin: 0 0 22px;
  color: rgba(255,255,255,.82);
  font-family: var(--aqf-sans);
  font-size: .72rem;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: .18em;
  text-transform: uppercase;
}

.aqf4-hero-v2-eyebrow span {
  display: inline-block;
  width: 42px;
  height: 1px;
  background: var(--aqf-blue);
}

/* HERO V2 TITLE TYPOGRAPHY REFINEMENT
   Section: Hero V2
   Purpose: Creates a Figma-inspired headline with a regular first sentence and italic supporting phrase. */
.aqf4-hero-v2 h1 {
  margin: 0;
  max-width: 650px;
  color: #fff;
  font-family: var(--aqf-serif);
  font-size: clamp(1.95rem, 2.45vw, 2.85rem);
  line-height: 1.12;
  letter-spacing: -.045em;
  font-weight: 400;
  text-shadow: 0 8px 28px rgba(6,20,38,.46);
}

/* HERO V2 TITLE WEIGHT CONTRAST
   Section: Hero V2
   Purpose: Makes the first sentence slightly stronger while softening the italic supporting line for a more editorial Figma-style hierarchy. */
.aqf4-hero-v2-title-main {
  display: block;
  white-space: nowrap;
  font-style: normal;
  font-weight: 700;
}

.aqf4-hero-v2 h1 em {
  display: block;
  font-style: italic;
  font-weight: 400;
  opacity: .88;
}

.aqf4-hero-v2 p:not(.aqf4-hero-v2-eyebrow) {
  max-width: 480px;
  margin: 24px 0 30px;
  color: rgba(255,255,255,.92);
  font-weight: 600;
  line-height: 1.7;
}

/* HERO V2 PREMIUM CTA
   Section: Hero V2
   Purpose: Creates isolated outline CTA style inspired by the Figma hero without changing global buttons. */
.aqf4-hero-v2-cta {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  padding: 15px 24px;
  border: 1px solid rgba(255,255,255,.72);
  color: #fff;
  font-family: var(--aqf-sans);
  font-size: .74rem;
  font-weight: 900;
  line-height: 1;
  letter-spacing: .13em;
  text-transform: uppercase;
  text-decoration: none;
  background: rgba(6,20,38,.18);
}

.aqf4-hero-v2-cta span {
  display: inline-block;
  width: 34px;
  height: 1px;
  background: var(--aqf-blue);
}

/* Photos and captions */
.aqf4-photo,
.aqf4-env-card {
  position: relative;
  overflow: hidden;
  border-radius: 20px;
  box-shadow: 0 22px 54px rgba(0,0,51,.14);
  background: #fff;
}
/* ORIGIN PHOTO CORNER REFINEMENT */
.aqf4-origin-media .aqf4-photo {
  border-radius: 12px;
}
.aqf4-photo img,
.aqf4-env-card img { width: 100%; height: 100%; object-fit: cover; }
.aqf4-photo figcaption,
.aqf4-env-card figcaption {
  position: absolute;
  left: 16px;
  bottom: 14px;
  max-width: calc(100% - 32px);
  color: #fff;
  font-family: var(--aqf-serif);
  font-size: .74rem;
  line-height: 1.25;
  font-weight: 700;
  letter-spacing: .045em;
  text-transform: uppercase;
  text-shadow: 0 2px 16px rgba(0,0,51,.92), 0 0 10px rgba(0,0,51,.45);
  z-index: 2;
}

/* ENVIRONMENT CARD CAPTIONS - MATCH RECOVERY HERO CAPTION */
.aqf4-env-card figcaption,
.aqf4-env-caption {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 14px;
  width: max-content;
  max-width: calc(100% - 32px);
  color: #fff;
  font-family: var(--aqf-sans);
  font-size: .72rem;
  font-weight: 800;
  line-height: 1.2;
  text-align: center;
  letter-spacing: .045em;
  text-transform: uppercase;
  text-shadow: 0 2px 16px rgba(0,0,51,.92), 0 0 10px rgba(0,0,51,.45);
  z-index: 2;
}
.aqf4-photo::after,
.aqf4-env-card::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 44%;
  background: linear-gradient(0deg, rgba(0,0,51,.62), rgba(0,0,51,0));
}

/* ORIGIN IMAGE GROUP POSITION REFINEMENT */
.aqf4-origin-media {
  position: relative; 
  min-height: 700px;
  transform: translate(-28px, -78px);
}
/* ORIGIN MAIN IMAGE SIZE + PORTRAIT FEATURE SHAPE
   Section: The Beginning
   Purpose: Makes the swapped main image taller/narrower so it functions as the intended portrait-style hero image. */
.aqf4-origin-main { 
  width: 100%; 
  height: 650px; 
}

/* ORIGIN MAIN IMAGE CROP REFINEMENT
   Section: The Beginning
   Purpose: Raises the crop to include more cap/head while allowing some shoulder crop. */
.aqf4-origin-main img {
  object-fit: cover;
  object-position: 59% 50%;
  background: #fff;
}
/* ORIGIN INSET IMAGE DEPTH + LOWER RIGHT PLACEMENT */
.aqf4-origin-inset {
  position: absolute;
  right: -22%;
  bottom: -92px;
  width: 46%;
  height: 235px;
  border: 4px solid rgba(255,255,255,.92);
  box-shadow: 0 10px 24px rgba(0,0,0,.12);
}
.aqf4-origin-grid .aqf4-copy {
  padding-top: 0px;
}
.aqf4-origin-inset img { filter: saturate(1.15) contrast(1.11) brightness(1.04); }
/* ORIGIN PHOTO CAPTION FINAL
   Section: The Beginning
   Purpose: Prevents the main caption from running into the inset while keeping both captions premium and readable. */
.aqf4-origin-main figcaption,
.aqf4-origin-inset figcaption {
  bottom: 14px;
  color: #ffffff;
  font-family: var(--aqf-sans);
  font-size: .72rem;
  font-weight: 800;
  line-height: 1.2;
  text-transform: uppercase;
  letter-spacing: .045em;
  padding: 0;
  background: transparent;
  border-radius: 0;
  text-shadow: 0 2px 16px rgba(0,0,51,.92), 0 0 10px rgba(0,0,51,.45);
}

/* ORIGIN MAIN CAPTION DESKTOP
   Section: The Beginning
   Purpose: Keeps long main caption away from the overlapping inset image. */
.aqf4-origin-main figcaption {
  left: 18px;
  right: auto;
  transform: none;
  width: 44%;
  max-width: 270px;
  text-align: left;
}

/* ORIGIN INSET CAPTION DESKTOP
   Section: The Beginning
   Purpose: Centers the shorter inset caption inside the inset image. */
.aqf4-origin-inset figcaption {
  left: 50%;
  right: auto;
  transform: translateX(-50%);
  width: calc(100% - 24px);
  max-width: none;
  text-align: center;
  font-size: .62rem;
}

.aqf4-origin-main::after,
.aqf4-origin-inset::after {
  display: block;
}
/* RECOVERY BACKGROUND TEST - TEAL SEPARATION */
.aqf4-recovery { background: linear-gradient(135deg, #000033 0%, #004669 48%, #007f8f 100%); color: #fff; }
.aqf4-recovery h2 { color: #fff; }

/* RECOVERY MEDIA GROUP BASE
   Section: Recovery Changed the Work
   Purpose: Keeps recovery media mobile-safe by default. Desktop width is applied separately below. */
.aqf4-recovery-media {
  width: 100%;
  justify-self: center;
  align-self: center;
  margin-top: 0;
}

/* RECOVERY MEDIA DESKTOP WIDTH
   Section: Recovery Changed the Work
   Purpose: Preserves the locked desktop layout without forcing desktop width onto mobile. */
@media (min-width: 981px) {
  .aqf4-recovery-media {
    width: 113%;
    justify-self: end;
  }
}

.aqf4-recovery-photo { 
  height: 360px;
  margin: 0;
}

/* RECOVERY HERO CAPTION FINAL */
.aqf4-recovery-photo figcaption {
  left: 50%;
  transform: translateX(-50%);
  bottom: 14px;
  width: max-content;
  max-width: calc(100% - 32px);
  font-family: var(--aqf-sans);
  font-size: .72rem;
  font-weight: 800;
  text-align: center;
}

/* RECOVERY INSET IMAGE ROW FINAL - OUTSIDE EDGE ALIGNMENT
   Section: Recovery Changed the Work
   Purpose: Aligns the two smaller recovery images with the outside edge of the main recovery image for stronger symmetry. */
.aqf4-recovery-insets {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-top: 14px;
  width: 100%;
  margin-left: 0;
}

.aqf4-recovery-inset {
  height: 178px;
  border-radius: 16px;
  margin: 0;
}

.aqf4-recovery-inset img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* RECOVERY INSET IMAGE CROP REFINEMENT
   Section: Recovery Changed the Work
   Purpose: Keeps the sling inset balanced and raises the crutches inset crop so more of Stu's head is visible. */
.aqf4-recovery-inset:first-child img {
  object-position:0% 58%;
}

.aqf4-recovery-inset:last-child img {
  object-position: 76% 0%;
}

/* RECOVERY QUOTE SIZE + SECTION WIDTH REFINEMENT - FINAL BALANCE */
.aqf4-quote {
  margin-top: 30px !important;
  width: 104%;
  max-width: 700px;
  color: #fff;
  font-family: var(--aqf-serif);
  font-size: clamp(1.12rem, 1.65vw, 1.58rem) !important;
  line-height: 1.28 !important;
  font-weight: 700 !important;
  letter-spacing: -.03em;
  text-shadow: 0 8px 28px rgba(0,0,51,.36);
}
.aqf4-quote::before { content: "“"; color: var(--aqf-blue); }
.aqf4-quote::after { content: "”"; color: var(--aqf-blue); }

/* RECOVERY DESKTOP GRID SPACING REFINEMENT
   Section: Recovery Changed the Work
   Purpose: Preserves the wide horizontal spacing while reducing the oversized vertical gap between title and copy. */
.aqf4-recovery-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  column-gap: clamp(42px, 6vw, 86px);
  row-gap: 26px;
  align-items: center;
}

.aqf4-recovery-head,
.aqf4-recovery-copy {
  grid-column: 1;
}

/* RECOVERY LABEL SIZE ALIGNMENT
   Section: Recovery Changed the Work
   Purpose: Increases the Recovery label to match the stronger label scale used elsewhere on the About page. */
.aqf4-recovery-head .aqf4-label {
  margin: 0 0 14px;
  color: var(--aqf-orange);
  font-family: var(--aqf-sans);
  font-size: .88rem;
  font-weight: 900;
  letter-spacing: .16em;
  line-height: 1.1;
  text-transform: uppercase;
}

.aqf4-recovery-head h2 {
  margin: 0 0 20px;
  color: #fff;
  font-size: clamp(2rem, 4vw, 3.55rem);
}

.aqf4-recovery-media {
  grid-column: 2;
  grid-row: 1 / span 2;
}

.aqf4-recovery-copy p {
  margin: 0 0 1rem;
  color: rgba(255,255,255,.9);
  font-size: clamp(1rem, 1.1vw, 1.1rem);
  line-height: 1.78;
  font-weight: 600;
}

/* RECOVERY MOBILE VIEWPORT LOCK
   Section: Recovery Changed the Work
   Purpose: Locks recovery media to the phone viewport so images cannot force horizontal page overflow. */
@media (max-width: 980px) {
  .about-v4-page .aqf4-recovery-layout {
    display: grid;
    grid-template-columns: 1fr;
    width: calc(100vw - 48px);
    max-width: 620px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 0;
    padding-right: 0;
    box-sizing: border-box;
    gap: 26px;
  }

  .about-v4-page .aqf4-recovery-head,
  .about-v4-page .aqf4-recovery-copy,
  .about-v4-page .aqf4-recovery-media {
    grid-column: 1;
    grid-row: auto;
    width: 100%;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
    box-sizing: border-box;
  }

  .about-v4-page .aqf4-recovery-media {
    overflow: hidden;
    margin-top: 0;
    margin-bottom: 0;
  }

  .about-v4-page .aqf4-recovery-photo {
    width: 100%;
    max-width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    margin: 0;
    box-sizing: border-box;
  }

  .about-v4-page .aqf4-recovery-insets {
    width: 100%;
    max-width: 100%;
    margin: 14px 0 0;
    padding: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 14px;
    box-sizing: border-box;
  }

  .about-v4-page .aqf4-recovery-inset {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    height: auto;
    aspect-ratio: 16 / 9;
    margin: 0;
    box-sizing: border-box;
  }

  .about-v4-page .aqf4-recovery-photo img,
  .about-v4-page .aqf4-recovery-inset img {
    display: block;
    width: 100%;
    max-width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .about-v4-page .aqf4-recovery-photo figcaption {
    left: 50%;
    transform: translateX(-50%);
    width: calc(100% - 24px);
    max-width: none;
    text-align: center;
    white-space: normal;
    font-size: .62rem;
  }
}

/* Pool story */
.aqf4-pool-story {
  position: relative;
  min-height: 700px;
  overflow: hidden;
  display: grid;
  align-items: center;
  color: #fff;
  background: var(--aqf-navy);
}
.aqf4-pool-story > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; }
/* POOL STORY OVERLAY FINAL - LIGHTER LEFT-SHIFTED GRADIENT */
.aqf4-pool-story::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg,
  rgba(0,0,51,.90) 0%,
  rgba(0,0,51,.73) 21%,
  rgba(0,0,51,.15) 57%,
  rgba(0,0,51,.04) 85%);
}

/* POOL STORY SECTION DIVIDER */
.aqf4-pool-story {
  border-top: 5px solid var(--aqf-orange);
}
.aqf4-pool-copy { position: relative; z-index: 2; max-width: 650px; margin-left: max(20px, calc((100vw - 1180px)/2)); }

/* POOL STORY LABEL SIZE ALIGNMENT
   Section: From One Pool, to Many
   Purpose: Increases the pool-story label to match the stronger label scale used elsewhere on the About page. */
.aqf4-pool-copy .aqf4-label {
  font-size: .88rem;
  letter-spacing: .16em;
}

.aqf4-pool-copy h2 { margin: 0 0 20px; color: #fff; font-size: clamp(2.2rem, 4.2vw, 3.75rem); }
.aqf4-pool-copy p:not(.aqf4-label) { color: rgba(255,255,255,.9); font-weight: 600; }
.aqf4-location { position: absolute; z-index: 2; left: max(24px, calc((100vw - 1180px)/2)); bottom: 28px; color: #fff; font-size: .75rem; font-weight: 900; letter-spacing: .15em; text-transform: uppercase; text-shadow: 0 2px 16px rgba(0,0,51,.8); }

/* ENVIRONMENT CARDS - RESPONSIVE FIVE-CARD ROW */
.aqf4-env-grid {
  margin-top: 10px;
  display: grid;
  grid-template-columns: repeat(5, minmax(190px, 260px));
  gap: 14px;
  width: min(92vw, 1360px);
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
  justify-content: center;
}
/* ENVIRONMENT CARD MARGIN RESET - ENABLE TIGHT SPACING */
.aqf4-env-card {
  aspect-ratio: 16 / 9;
  border-radius: 16px;
  margin: 0;
}

/* ENVIRONMENT LIGHTBOX TRIGGER
   Section: Real-World Environments
   Purpose: Makes environment cards clickable while preserving the approved visual card layout. */
/* Lightbox styles MOVED to styles.css (2026-07-26) so the home page triptych
   can reuse the same component. Class names kept so about.html markup is
   untouched. */

@media (max-width: 640px) {
  .aqf4-lightbox-arrow {
    width: 42px;
    height: 42px;
    font-size: 2.35rem;
  }

  .aqf4-lightbox-prev {
    left: 12px;
  }

  .aqf4-lightbox-next {
    right: 12px;
  }
}

/* REAL CLIENT STORIES SECTION - SOFT AQUA TO SAND TRANSITION */
.aqf4-stories-sand {
  background: linear-gradient(
    180deg,
    var(--aqf-aqua-soft) 0%,
    var(--aqf-sand) 18%,
    var(--aqf-sand) 100%
  );
  padding-top: 96px;
  padding-bottom: 128px;
}

.aqf4-stories-sand .aqf4-story-head {
  margin-top: 0;
}

/* REAL CLIENT STORIES PREMIUM CTA
   Section: Real Client Stories
   Purpose: Replaces the standard orange pill with a refined editorial CTA aligned with the locked hero style. */
.about-v4-page .aqf4-story-cta {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  width: auto;
  padding: 15px 24px;
  border: 1px solid rgba(0,0,51,.72);
  border-radius: 0;
  color: var(--aqf-navy);
  background: rgba(255,255,255,.38);
  box-shadow: none;
  font-family: var(--aqf-sans);
  font-size: .74rem;
  font-weight: 900;
  line-height: 1;
  letter-spacing: .13em;
  text-transform: uppercase;
  text-decoration: none;
}

.about-v4-page .aqf4-story-cta span {
  display: inline-block;
  width: 34px;
  height: 1px;
  background: var(--aqf-blue);
  transition: background .22s ease, width .22s ease;
}

.about-v4-page .btn.btn-primary.aqf4-story-cta:hover {
  border-color: var(--aqf-blue);
  color: var(--aqf-navy) !important;
  background: rgba(0,174,239,.18);
}

.about-v4-page .btn.btn-primary.aqf4-story-cta:hover span {
  width: 42px;
  background: var(--aqf-blue);
}

/* Recognition */
/* RECOGNITION SPACING - SEPARATE FROM ENVIRONMENT CARD ROW */
.aqf4-recognition { margin-top: 120px; padding: 0; text-align: center; max-width: 960px; }
.aqf4-recognition h2 { margin: 0; color: var(--aqf-navy); font-size: clamp(2rem, 4vw, 3.25rem); }
.aqf4-recognition-intro { max-width: 760px; margin: 18px auto 28px; color: rgba(7,30,45,.78); }
.aqf4-proof-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.aqf4-proof { display: block; padding: 24px; background: rgba(255,255,255,.72); border-radius: 18px; text-align: left; text-decoration: none; box-shadow: 0 16px 42px rgba(0,0,51,.08); border-top: 3px solid var(--aqf-blue); }
.aqf4-proof span { display: block; color: var(--aqf-navy); font-size: .78rem; font-weight: 900; letter-spacing: .11em; text-transform: uppercase; }
.aqf4-proof strong { display: inline-block; margin-top: 14px; color: var(--aqf-orange); font-size: .82rem; letter-spacing: .08em; text-transform: uppercase; }

/* REAL CLIENT STORIES - PREMIUM COLLAGE CARD REFINEMENT */
.aqf4-story-head {
  margin-top: 0;
}

.aqf4-story-grid {
  margin-top: 38px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
}

.aqf4-story-card {
  overflow: hidden;
  border-radius: 24px;
  background: #fff;
  box-shadow: 0 26px 70px rgba(0,0,51,.13);
  border-top: 4px solid var(--aqf-blue);
  display: flex;
  flex-direction: column;
}

.aqf4-story-card > div:last-child {
  padding: 26px 26px 30px;
}

.aqf4-story-card h3 {
  margin: 0 0 8px;
  color: var(--aqf-navy);
  font-size: 1.32rem;
  line-height: 1.15;
}

.aqf4-story-card p {
  margin: 8px 0;
  font-size: .94rem;
  line-height: 1.58;
  font-weight: 600;
}

/* CLIENT STORY COLLAGES - PREMIUM FEATURE IMAGE LAYOUT */
.aqf4-collage {
  display: grid;
  grid-template-columns: 1.35fr 1fr 1fr;
  grid-template-rows: repeat(3, 86px);
  gap: 4px;
  background: #fff;
}

.aqf4-collage img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.aqf4-collage img:first-child {
  grid-column: 1 / 2;
  grid-row: 1 / 4;
}

.aqf4-collage img:nth-child(2) {
  grid-column: 2 / 4;
  grid-row: 1 / 2;
}

.aqf4-collage img:nth-child(3) {
  grid-column: 2 / 3;
  grid-row: 2 / 3;
}

.aqf4-collage img:nth-child(4) {
  grid-column: 3 / 4;
  grid-row: 2 / 3;
}

.aqf4-collage img:nth-child(5) {
  grid-column: 2 / 4;
  grid-row: 3 / 4;
}
/* CLIENT STORY COLLAGE IMAGE CROP CONTROLS */

/* Story 1: Car Accident Survivor */
.aqf4-story-card:nth-child(1) .aqf4-collage img:nth-child(1) { object-position: 60% 50%; }
.aqf4-story-card:nth-child(1) .aqf4-collage img:nth-child(2) { object-position: 50% 50%; }
.aqf4-story-card:nth-child(1) .aqf4-collage img:nth-child(3) { object-position: 36% 50%; }
.aqf4-story-card:nth-child(1) .aqf4-collage img:nth-child(4) { object-position: 50% 50%; }
.aqf4-story-card:nth-child(1) .aqf4-collage img:nth-child(5) { object-position: 50% 20%; }

/* Story 2: Pregnant With Twins */
.aqf4-story-card:nth-child(2) .aqf4-collage img:nth-child(1) { object-position: 50% 50%; }
.aqf4-story-card:nth-child(2) .aqf4-collage img:nth-child(2) { object-position: 50% 50%; }
.aqf4-story-card:nth-child(2) .aqf4-collage img:nth-child(3) { object-position: 50% 50%; }
.aqf4-story-card:nth-child(2) .aqf4-collage img:nth-child(4) { object-position: 50% 50%; }
.aqf4-story-card:nth-child(2) .aqf4-collage img:nth-child(5) { object-position: 50% 50%; }

/* Story 3: Ankle Replacement Surgery */
.aqf4-story-card:nth-child(3) .aqf4-collage img:nth-child(1) { object-position: 46% 50%; }
.aqf4-story-card:nth-child(3) .aqf4-collage img:nth-child(2) { object-position: 54% 50%; }
.aqf4-story-card:nth-child(3) .aqf4-collage img:nth-child(3) { object-position: 50% 50%; }
.aqf4-story-card:nth-child(3) .aqf4-collage img:nth-child(4) { object-position: 54% 50%; }
.aqf4-story-card:nth-child(3) .aqf4-collage img:nth-child(5) { object-position: 50% 50%; }

/* TEACHER SECTION TOP-TITLE MAGAZINE LAYOUT
   Section: A Doctorate in the Water
   Purpose: Creates a stable cross-browser print-magazine section with real DOM order: label, title, image/caption, copy. */
.about-v4-page section[aria-labelledby="teacher-title"] {
  position: relative;
  overflow: hidden;
  /* #061426 per Stuart 2026-07-29 — the doctorate section and the hero are the
     ONLY two places on About that darken; the rest of the page stays #000033.
     This selector (0,2,1) outranks .aqf4-deep, so this is the line that paints. */
  background: #061426;
  color: #fff;
  padding-top: clamp(86px, 7vw, 116px);
  padding-bottom: clamp(90px, 7vw, 122px);
}

/* DOCTORATE MAGAZINE STAGE
   Section: A Doctorate in the Water
   Purpose: Overrides the global .aqf4-split grid so the Doctorate inner grid receives the full section width. */
.about-v4-page section[aria-labelledby="teacher-title"] .aqf4-split {
  display: block;
  width: min(1180px, calc(100vw - 56px));
  max-width: 1180px;
  margin-left: auto;
  margin-right: auto;
}

/* DOCTORATE MAGAZINE GRID
   Section: A Doctorate in the Water
   Purpose: Uses one true grid so the title spans the top and the image/copy pair underneath stays stable across browsers. */
.about-v4-page section[aria-labelledby="teacher-title"] .aqf4-copy {
  display: grid;
  grid-template-columns: minmax(430px, .47fr) minmax(0, .53fr);
  column-gap: clamp(56px, 5.5vw, 96px);
  row-gap: 0;
  align-items: start;
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
}

/* DOCTORATE LABEL
   Section: A Doctorate in the Water
   Purpose: Keeps the Doctorate label consistent with the stronger section-label scale used elsewhere on the page. */
.about-v4-page section[aria-labelledby="teacher-title"] .aqf4-label {
  grid-column: 1 / -1;
  margin: 0 0 14px;
  color: var(--aqf-orange);
  font-family: var(--aqf-sans);
  font-size: .88rem;
  font-weight: 900;
  line-height: 1.1;
  letter-spacing: .18em;
  text-transform: uppercase;
}

/* DOCTORATE TITLE
   Section: A Doctorate in the Water
   Purpose: Keeps the locked title as a one-line desktop headline while allowing safe wrapping on smaller screens. */
.about-v4-page section[aria-labelledby="teacher-title"] h2 {
  grid-column: 1 / -1;
  width: min(1180px, 100%);
  max-width: 1180px;
  margin: 0 0 clamp(34px, 3.6vw, 50px);
  color: #fff;
  font-size: clamp(2.2rem, 3.05vw, 3.25rem);
  line-height: 1.02;
  letter-spacing: -.052em;
  text-shadow: 0 12px 34px rgba(0,0,51,.42);
}
@media (min-width: 1101px) {
  .about-v4-page section[aria-labelledby="teacher-title"] h2 {
    white-space: nowrap;
  }
}

/* DOCTORATE PROOF IMAGE
   Section: A Doctorate in the Water
   Purpose: Places the proof image in the left column under the title without absolute positioning. */
.about-v4-page .aqf4-teacher-photo {
  grid-column: 1;
  grid-row: 3;
  width: 100%;
  max-width: 540px;
  margin: 0;
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

/* DOCTORATE IMAGE CROP
   Section: A Doctorate in the Water
   Purpose: Keeps the 4x3 proof image focused on Stu and the aquatic setting with rounded corners. */
.about-v4-page .aqf4-teacher-photo img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  object-position: 56% 42%;
  border-radius: 18px;
  filter: saturate(1.06) contrast(1.05) brightness(.96);
  box-shadow:
    0 28px 72px rgba(0,0,0,.28),
    0 0 34px rgba(0,174,239,.06);
}

/* DOCTORATE IMAGE CAPTION — OVERLAID   (Stuart item #11, 2026-07-29)
   Section: A Doctorate in the Water

   WAS: a "print-style" caption sitting BELOW the image, with the ::after
   overlay gradient switched off because nothing needed to be legible over the
   photo. That made it the ONLY caption on the page not on its image — the
   other three (origin-main, origin-inset, recovery) are all absolute overlays.
   Stuart: "the doctorate caption is the only one under the image instead of on
   it; correct and make it fit phone portrait."

   NOW: matches `.aqf4-recovery-photo figcaption`, the nearest sibling pattern —
   centred, absolute, 14px off the bottom of the image. The gradient is
   re-enabled (the rule that killed it is gone) so the type has a ground to sit
   on; without it white 800 caps over open water is unreadable.

   Sizes now match the recovery caption at every breakpoint: .72rem desktop,
   .62rem tablet and phone. The old phone value was .5rem = 8.00px, which is
   what made it unreadable in portrait. */
.about-v4-page .aqf4-teacher-photo figcaption {
  position: absolute;
  left: 50%;
  right: auto;
  bottom: 14px;
  transform: translateX(-50%);
  width: max-content;
  max-width: calc(100% - 32px);
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: rgba(255,255,255,.94);
  font-family: var(--aqf-sans);
  font-size: .72rem;
  font-weight: 800;
  line-height: 1.22;
  letter-spacing: .045em;
  text-align: center;
  text-transform: uppercase;
  text-shadow: 0 2px 16px rgba(0,0,51,.92), 0 0 10px rgba(0,0,51,.45);
  white-space: normal;
  z-index: 2;
}

.about-v4-page .aqf4-teacher-photo figcaption::before {
  display: none !important;
  content: none !important;
}

/* DOCTORATE BODY COPY COLUMN
   Section: A Doctorate in the Water
   Purpose: Places the restored four-paragraph copy in the right column beside the proof image. */
.about-v4-page .aqf4-teacher-text {
  grid-column: 2;
  grid-row: 3;
  align-self: center;
  max-width: 620px;
}

.about-v4-page .aqf4-teacher-text p {
  margin: 0 0 .98rem;
  color: rgba(255,255,255,.88);
  font-size: clamp(.96rem, 1vw, 1.03rem);
  line-height: 1.6;
  font-weight: 600;
  text-shadow: 0 2px 16px rgba(0,0,51,.34);
}

/* DOCTORATE TABLET STACK
   Section: A Doctorate in the Water
   Purpose: Uses the real HTML order on tablet: label, title, image/caption, copy. */
@media (max-width: 980px) {
  .about-v4-page section[aria-labelledby="teacher-title"] {
    padding-top: 104px;
    padding-bottom: 88px;
  }

  .about-v4-page section[aria-labelledby="teacher-title"] .aqf4-split {
    width: min(620px, calc(100vw - 48px));
    max-width: 620px;
  }

  .about-v4-page section[aria-labelledby="teacher-title"] .aqf4-copy {
    display: block;
    width: 100%;
    max-width: 620px;
  }

  .about-v4-page section[aria-labelledby="teacher-title"] .aqf4-label {
    margin: 0 0 10px;
    font-size: .82rem;
  }

  .about-v4-page section[aria-labelledby="teacher-title"] h2 {
    width: 100%;
    max-width: 620px;
    margin: 0 0 28px;
    font-size: clamp(2.1rem, 6vw, 3.2rem);
    line-height: 1.05;
    white-space: normal;
  }

  .about-v4-page .aqf4-teacher-photo {
    width: 100%;
    max-width: 620px;
    margin: 8px auto 32px;
  }

  .about-v4-page .aqf4-teacher-photo img {
    border-radius: 16px;
  }

  /* overlaid caption, tablet — matches .aqf4-recovery-photo figcaption (.62rem).
     margin-top is gone: it did nothing useful once the caption is absolute. */
  .about-v4-page .aqf4-teacher-photo figcaption {
    width: calc(100% - 24px);
    max-width: none;
    font-size: .62rem;
    line-height: 1.2;
  }

  .about-v4-page .aqf4-teacher-text {
    max-width: 620px;
  }

.about-v4-page .aqf4-teacher-text p {
  margin: 0 0 1.12rem;
  line-height: 1.54;
}
}

/* DOCTORATE PHONE STACK
   Section: A Doctorate in the Water
   Purpose: Keeps the Doctorate section proportional and readable on phones with one clean phone override. */
@media (max-width: 640px) {
  .about-v4-page section[aria-labelledby="teacher-title"] {
    padding-top: 72px;
    padding-bottom: 76px;
  }

  .about-v4-page section[aria-labelledby="teacher-title"] .aqf4-label {
    font-size: .8rem;
    margin-bottom: 9px;
  }

  .about-v4-page section[aria-labelledby="teacher-title"] h2 {
    font-size: clamp(1.92rem, 8.4vw, 2.5rem);
    margin-bottom: 24px;
  }

  .about-v4-page .aqf4-teacher-photo {
    margin: 6px auto 28px;
  }

  .about-v4-page .aqf4-teacher-photo img {
    border-radius: 14px;
  }

  /* overlaid caption, PHONE PORTRAIT. Was .5rem = 8.00px, the smallest type on
     the page and the reason Stuart flagged it. Now .62rem, same as the recovery
     caption. The line is 61 characters so it wraps to two centred lines here —
     that is the intended read, matching the origin-main caption which also
     wraps to two lines on phone. */
  .about-v4-page .aqf4-teacher-photo figcaption {
    width: calc(100% - 24px);
    max-width: none;
    font-size: .62rem;
    line-height: 1.18;
  }

.about-v4-page .aqf4-teacher-text p {
  margin: 0 0 1.12rem;
  line-height: 1.56;
}
}
/* Teacher / water / education / founder */
.aqf4-water { position: relative; overflow: hidden; padding: clamp(76px, 9vw, 116px) 0; color: #fff; background: linear-gradient(rgba(0,0,51,.78), rgba(0,0,51,.86)), url('../images/about/water-texture.jpg') center/cover; }
.aqf4-water-inner { max-width: 920px; text-align: center; }
.aqf4-water h2 { margin: 0 0 18px; color: #fff; font-size: clamp(2rem, 4vw, 3.45rem); }

/* WATER THINKING LABEL SIZE ALIGNMENT
   Section: A Different Way to Think About Water
   Purpose: Matches this label to the stronger section-label scale used throughout the About page. */
.about-v4-page .aqf4-water .aqf4-label {
  color: var(--aqf-orange);
  font-size: .88rem;
  letter-spacing: .16em;
}

.aqf4-water p { color: rgba(255,255,255,.88); font-weight: 600; }

/* WATER THINKING TITLE TABLET + MOBILE BREATHING ROOM
   Section: A Different Way to Think About Water
   Purpose: Gives the large title more readable spacing on phone and iPad without changing the desktop layout. */
@media (max-width: 980px) {
  .about-v4-page .aqf4-water h2 {
    max-width: 720px;
    margin-left: auto;
    margin-right: auto;
    font-size: clamp(2.05rem, 7.2vw, 3.2rem);
    line-height: 1.12;
  }
}

@media (max-width: 640px) {
  .about-v4-page .aqf4-water h2 {
    max-width: 340px;
    font-size: clamp(2rem, 9.2vw, 2.75rem);
    line-height: 1.12;
    letter-spacing: -.04em;
  }
}

.aqf4-pillars { margin-top: 34px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; text-align: left; }
.aqf4-pillars div { padding: 22px; border-radius: 18px; background: rgba(255,255,255,.1); }
.aqf4-pillars h3 { color: #fff; margin: 0 0 8px; font-size: 1rem; }
.aqf4-pillars p { margin: 0; font-size: .92rem; line-height: 1.55; }

.aqf4-icon-grid { margin-top: 36px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.aqf4-icon-grid article { padding: 26px 22px; border-radius: 18px; background: #fff; box-shadow: 0 18px 46px rgba(0,0,51,.09); }
/* EXPERIENCE + EDUCATION ICON SIZE ALIGNMENT
   Section: A Career Built in the Pool. An Education Built Through Experience.
   Purpose: Matches these icons to the medium icon scale used elsewhere on the site without overpowering the About section. */
.aqf4-icon-grid img { width: 46px; height: 46px; object-fit: contain; margin-bottom: 18px; }
.aqf4-icon-grid h3 { margin: 0; color: var(--aqf-navy); font-size: 1rem; }
.aqf4-icon-grid p { margin: 10px 0 0; font-size: .88rem; line-height: 1.55; }

/* FOUNDER STATEMENT — EDITORIAL LAGOON MOCKUP V15
   Section: Founder Statement
   Purpose: Corrective pass from trusted v12 only: preserves the approved Vivid lagoon asset, high-step inset, and locked principle-card stack while rebuilding the lagoon as a seamless navy-vignetted visual field and keeping the founder-letter text on a non-transformed plane for cleaner rendering. */
.aqf4-founder {
  position: relative;
  overflow: hidden;
  padding: 48px 0 18px;
  background: #000033;
  color: #fff;
  border-bottom: 0;
}

.aqf4-founder::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(0,0,51,.10) 0%, rgba(0,0,51,0) 18%, rgba(0,0,51,0) 78%, rgba(0,0,51,.18) 100%),
    linear-gradient(90deg, rgba(0,0,51,.10) 0%, rgba(0,0,51,0) 24%, rgba(0,0,51,0) 74%, rgba(0,0,51,.10) 100%);
  pointer-events: none;
}

.aqf4-founder-stage {
  position: relative;
  z-index: 1;
  width: min(1500px, calc(100vw - 70px));
  max-width: none;
  min-height: 840px;
  margin-inline: auto;
}

.aqf4-founder-title {
  position: absolute;
  z-index: 10;
  left: 0;
  top: 0;
  width: min(660px, 43vw);
}

.aqf4-founder-title .aqf4-label {
  margin: 0 0 14px;
  color: var(--aqf-orange);
  font-size: .76rem;
  letter-spacing: .22em;
}

.aqf4-founder-title .aqf4-label::after {
  content: "";
  display: block;
  width: 60px;
  height: 2px;
  margin-top: 12px;
  background: var(--aqf-orange);
}

.aqf4-founder h2 {
  margin: 0;
  color: #fff;
  /* DM SERIF DISPLAY (Stuart, 2026-07-29, item #9A). Cormorant was rejected,
     then Cabin — the heading needs to stay a SERIF. DM Serif Display ships ONE
     weight (400), so do not ask for 700: there is no bold cut and a synthesised
     one would smear a high-contrast display face. Weight comes from its own
     heavy stems at this size.
     Tracking eased from Cormorant's -.055em to -.015em (that value existed to
     close up Cormorant's wide fitting; DM Serif is already tightly fitted) and
     line-height .86 -> .92 to stop the descenders colliding. */
  font-family: "DM Serif Display", "Libre Baskerville", var(--aqf-serif);
  font-size: clamp(3.2rem, 4.6vw, 4.7rem);
  line-height: .92;
  font-weight: 400;
  font-style: italic;        /* Stuart, 2026-07-29 — real cut, not synthesised */
  letter-spacing: -.015em;
  white-space: nowrap;
  text-shadow: 0 20px 48px rgba(0,0,33,.48);
}


/* Seamless lagoon field: Vivid lagoon asset stays locked; masks/vignettes hide all rectangular edges and let the paper overlap the right side like the approved mockup. */
.aqf4-founder-visual-field {
  position: absolute;
  z-index: 2;
  left: clamp(-34px, -2.1vw, -18px);
  top: 88px;
  width: clamp(960px, 68vw, 1110px);
  height: clamp(514px, 34.7vw, 588px);
  overflow: visible;
  background: transparent;
}

.aqf4-founder-lagoon-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 47% 50%;
  filter: none;
  transform: none;
  box-shadow: none;
  -webkit-mask-image:
    linear-gradient(to right, transparent 0%, black 16%, black 70%, transparent 88%),
    linear-gradient(to bottom, transparent 0%, black 13%, black 90%, transparent 100%);
  mask-image:
    linear-gradient(to right, transparent 0%, black 16%, black 70%, transparent 88%),
    linear-gradient(to bottom, transparent 0%, black 13%, black 90%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
}

.aqf4-founder-visual-field::before {
  content: "";
  position: absolute;
  z-index: 2;
  inset: -1px;
  background:
    linear-gradient(90deg, rgba(0,0,51,.72) 0%, rgba(0,0,51,.30) 12%, rgba(0,0,51,0) 22%, rgba(0,0,51,0) 66%, rgba(0,0,51,.32) 80%, rgba(0,0,51,.88) 93%, #000033 100%),
    linear-gradient(180deg, rgba(0,0,51,.60) 0%, rgba(0,0,51,.18) 12%, rgba(0,0,51,0) 22%, rgba(0,0,51,0) 86%, rgba(0,0,51,.55) 100%);
  pointer-events: none;
}

.aqf4-founder-visual-vignette {
  position: absolute;
  z-index: 3;
  inset: -18% -16% -20% -18%;
  background:
    radial-gradient(circle at 28% 38%, rgba(255,255,255,.055), rgba(255,255,255,0) 23%),
    radial-gradient(ellipse at 52% 52%, rgba(0,0,51,0) 0%, rgba(0,0,51,0) 48%, rgba(0,0,51,.22) 73%, #000033 100%);
  pointer-events: none;
}

/* High-step inset: locked image/path, square editorial crop, and mockup-like upper-left placement inside the lagoon field. */
.aqf4-founder-inset-card {
  position: absolute;
  z-index: 5;
  left: clamp(108px, 7.8vw, 138px);
  top: clamp(78px, 5.6vw, 94px);
  width: clamp(170px, 12.2vw, 202px);
  aspect-ratio: 4 / 3;
  margin: 0;
  padding: 0;
  border: 5px solid rgba(255,255,255,.94);
  border-radius: 0;
  overflow: visible;
  background: #fff;
  box-shadow: 0 20px 46px rgba(0,0,33,.32);
  transform: rotate(-4.5deg);
}

.aqf4-founder-inset-card::after { display: none; }

.aqf4-founder-inset-card img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 62%;
  filter: saturate(1.08) contrast(1.05) brightness(1.04);
}

.aqf4-founder-corner {
  position: absolute;
  z-index: -1;
  width: 77px;
  height: 77px;
  border-color: rgba(247,147,31,.86);
  border-style: solid;
  pointer-events: none;
}

.aqf4-founder-corner--tl {
  left: -31px;
  top: -29px;
  border-width: 2px 0 0 2px;
}

.aqf4-founder-corner--br {
  right: -27px;
  bottom: -27px;
  border-width: 0 2px 2px 0;
}

.aqf4-founder-water-quote { display: none; }

/* Founder letter: text is not transformed; paper angle is created behind it so the letter can read crisply. */
.aqf4-founder-letter {
  position: absolute;
  z-index: 7;
  top: 38px;
  left: min(calc(100vw - 689px), clamp(720px, 49.2vw, 805px));
  /* ENLARGED ~1.35x (Stuart, 2026-07-29, item #9B). The card and its type scale
     TOGETHER, so the measure stays ~67 characters while everything gets
     physically bigger — widening alone would have pushed the line length past
     the readable range and made it worse. Paired with the font-size bump in the
     `max-height: 920px` block near the end of this file; change both or neither.
     Measured room before this: 188px spare to the right of the card at 1024,
     220px at 1440. */
  width: clamp(560px, 38.5vw, 620px);
  padding: clamp(30px, 2.4vw, 38px) clamp(34px, 2.7vw, 42px);
  box-sizing: border-box;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: #000033;
  box-shadow: none;
  transform: none;
  transform-origin: center center;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: auto;
  backface-visibility: hidden;
}

.aqf4-founder-letter::before {
  content: "";
  position: absolute;
  inset: -5px -7px -7px -7px;
  z-index: -1;
  border: 1px solid rgba(255,255,255,.64);
  border-radius: 0;
  background:
    linear-gradient(180deg, rgba(255,255,255,.988), rgba(248,244,235,.993)),
    #f8f4eb;
  box-shadow:
    0 38px 86px rgba(0,0,33,.42),
    -18px 16px 42px rgba(0,174,239,.08),
    inset 0 0 0 1px rgba(255,255,255,.58);
  transform: none;
  pointer-events: none;
}

.aqf4-founder-letterhead {
  position: relative;
  z-index: 1;
  display: block;
  margin: 0 0 14px;
  padding-bottom: 10px;
  border-bottom: 2px solid rgba(0,174,239,.48);
}

.aqf4-founder-letterhead img {
  display: block;
  width: clamp(142px, 10.2vw, 164px);
  height: auto;
}

.aqf4-founder-letterhead span {
  color: var(--aqf-blue);
  font-family: var(--aqf-sans);
  font-size: clamp(.40rem, .36vw, .46rem);
  font-weight: 900;
  letter-spacing: .16em;
  line-height: 1;
  text-align: right;
  text-transform: uppercase;
}

.aqf4-founder-letter-body,
.aqf4-founder-signature {
  position: relative;
  z-index: 1;
}

.aqf4-founder-letter p {
  margin: 0 0 .40rem;
  color: rgba(0,0,51,.93);
  font-family: "Libre Baskerville", Georgia, "Times New Roman", serif;
  font-size: .76rem;
  line-height: 1.44;
  font-weight: 400;
  letter-spacing: 0;
  text-shadow: none;
}

.aqf4-founder-philosophy {
  margin: .72rem 0 .76rem;
  padding: .56rem 0 .56rem 0;
  border-top: 1px solid rgba(0,0,40,.16);
  border-bottom: 1px solid rgba(0,0,40,.16);
  color: #000033;
}

.aqf4-founder-philosophy p {
  margin: 0;
  color: rgba(0,0,40,.82);
  font-family: "Libre Baskerville", Georgia, "Times New Roman", serif;
  font-size: clamp(.74rem, .80rem, .84rem);
  line-height: 1.30;
  font-weight: 400;
  font-style: italic;
  letter-spacing: .012em;
}

.aqf4-founder-letter strong {
  color: #000033;
  font-weight: 700;
}

.aqf4-founder-final {
  margin: .80rem 0 0 !important;
  color: #000033 !important;
  font-family: "Libre Baskerville", Georgia, "Times New Roman", serif !important;
  font-size: clamp(1.02rem, .86vw, 1.14rem) !important;
  line-height: 1.06 !important;
  font-weight: 700 !important;
  letter-spacing: -.014em;
}

.aqf4-founder-signature {
  display: grid;
  gap: 2px;
  margin-top: .44rem;
  padding-top: 4px;
  color: #000033;
  font-family: var(--aqf-sans);
}

.aqf4-founder-signature-img {
  display: block;
  width: clamp(88px, 7.0vw, 110px);
  height: auto;
  margin-bottom: 2px;
  margin-left: -4px;
}

.aqf4-founder-signature strong,
.aqf4-founder-signature span:not(.aqf-founder-signature-script) {
  color: rgba(0,0,51,.78);
  font-family: var(--aqf-sans);
  font-size: .52rem;
  line-height: 1.28;
  /* 700, not 500: at .52rem these three lines are very small, and the extra
     weight is what gives them presence (Stuart, 2026-07-26). */
  font-weight: 700;
  letter-spacing: .02em;
}

.aqf4-founder-emboss {
  position: absolute;
  right: 18px;
  bottom: 18px;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: rgba(0,0,51,.035);
  opacity: .45;
}


.aqf4-founder-splash {
  position: absolute;
  right: -2%;
  bottom: 3%;
  width: 68%;
  opacity: .12;
  mix-blend-mode: multiply;
  pointer-events: none;
  transform: rotate(-6deg);
  z-index: 0;
}

/* PRINCIPLE CARDS — VERTICAL STACK (desktop)
   Aside is a child of .aqf4-founder-letter so it moves with the letter.
   Flex column keeps cards in a clean readable stack with no overlap. */
.aqf4-founder-principles {
  position: absolute;
  z-index: 8;
  left: calc(100% - 12px);
  right: auto;
  top: 0;
  width: 196px;
  height: 0;
  overflow: visible;
  display: block;
}

.aqf4-founder-card {
  position: relative;
  width: 100%;
  min-height: 108px;
  padding: 14px 14px 13px;
  border: 1px solid rgba(0,0,51,.14);
  box-shadow: 0 14px 28px rgba(0,0,33,.22);
  color: #000033;
  transform-origin: center center;
}

.aqf4-founder-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(255,255,255,.24), rgba(255,255,255,0));
  pointer-events: none;
}

.aqf4-founder-card--adapt {
  position: absolute;
  top: 40px;
  background: #d7fbff;
  transform: rotate(-3deg);
}

.aqf4-founder-card--ride {
  position: absolute;
  top: 200px;
  min-height: 136px;
  background-color: white;
  background-image: linear-gradient(rgba(247,147,31,0.70), rgba(247,147,31,0.70));
  transform: rotate(2.5deg);
}

.aqf4-founder-card--movement {
  position: absolute;
  top: 390px;
  min-height: 108px;
  background-color: white;
  background-image: linear-gradient(rgba(50,185,236,0.70), rgba(50,185,236,0.70));
  transform: rotate(-2deg);
}

.aqf4-founder-card-icon {
  position: relative;
  display: block;
  width: 28px;
  height: 28px;
  margin-bottom: 10px;
}

.aqf4-founder-card-icon::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -4px;
  width: 48px;
  height: 2px;
  background: rgba(0,0,51,.48);
}

.aqf4-founder-card--ride .aqf4-founder-card-icon::after {
  background: rgba(255,255,255,.60);
}

.aqf4-founder-card-icon--target::before {
  content: "\f140";
  position: absolute;
  left: 0;
  top: -1px;
  color: #000033;
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  font-size: 1.4rem;
  line-height: 1;
}

.aqf4-founder-card-icon--waves::before {
  content: "\f773";
  position: absolute;
  left: 0;
  top: -1px;
  color: #000033;
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  font-size: 1.4rem;
  line-height: 1;
}

.aqf4-founder-card-icon--stack::before {
  content: "\f0c9";
  position: absolute;
  left: 0;
  top: -1px;
  color: #000033;
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  font-size: 1.4rem;
  line-height: 1;
}

.aqf4-founder-card p,
.aqf4-founder-card li {
  position: relative;
  z-index: 1;
  margin: 0;
  color: #000033;
  font-family: "Comic Sans MS", "Comic Sans", "Chalkboard SE", "Marker Felt", cursive;
  font-weight: 700;
  letter-spacing: 0.01em;
  text-transform: uppercase;
}

.aqf4-founder-card p {
  font-size: clamp(1.05rem, 1.08vw, 1.20rem);
  line-height: 1.10;
}

.aqf4-founder-card--ride p {
  margin-bottom: 8px;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
  white-space: normal;
}

.aqf4-founder-card ul {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 3px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.aqf4-founder-card li {
  font-size: clamp(.83rem, .85vw, .94rem);
  line-height: 1.03;
}

.aqf4-founder-card--movement p {
  font-size: clamp(1rem, 1.05vw, 1.18rem);
}

@media (max-width: 1280px) {
  .about-v4-page .aqf4-founder-stage {
    width: min(1160px, calc(100vw - 52px));
    min-height: 851px;
  }

  .about-v4-page .aqf4-founder-title { width: 540px; }
  .about-v4-page .aqf4-founder h2 { font-size: clamp(3.45rem, 5.2vw, 4.8rem); }
  .about-v4-page .aqf4-founder-visual-field { width: 735px; height: 562px; top: 150px; }
  .about-v4-page .aqf4-founder-inset-card { left: 72px; top: 64px; width: 186px; }
  /* width 420 -> 540 to match the ~1.3x enlargement of the card + type (Stuart,
     item #9B). This hard-coded width was silently overriding the base rule's
     clamp for EVERY width <= 1280, so tablet kept a 420px card while the font
     grew to 15px — the measure collapsed to 48 characters and the letter grew
     to 1037px, overhanging its overflow:hidden section by 139px.
     540 leaves ~86px clear of the stage edge at 1024. */
  .about-v4-page .aqf4-founder-letter { left: min(552px, calc(100vw - 660px)); width: 540px; top: 74px; padding: 30px 34px; }
  .about-v4-page .aqf4-founder-principles { left: calc(100% - 12px); width: 185px; }
  .about-v4-page .aqf4-founder-card { padding: 12px; min-height: 96px; }
  .about-v4-page .aqf4-founder-card--adapt { top: 30px; }
  .about-v4-page .aqf4-founder-card--ride { top: 178px; min-height: 122px; }
  .about-v4-page .aqf4-founder-card--movement { top: 350px; min-height: 96px; }
}

@media (max-width: 980px) {
  .about-v4-page .aqf4-founder {
    padding-top: 72px;
    padding-bottom: 82px;
  }

  .about-v4-page .aqf4-founder-stage {
    display: grid;
    grid-template-columns: 1fr;
    gap: 24px;
    width: min(680px, calc(100vw - 48px));
    min-height: 0;
  }

  .about-v4-page .aqf4-founder-title,
  .about-v4-page .aqf4-founder-visual-field,
  .about-v4-page .aqf4-founder-letter {
    position: relative;
    left: auto;
    right: auto;
    top: auto;
    bottom: auto;
    width: 100%;
  }

  .about-v4-page .aqf4-founder-principles {
    position: relative;
    left: auto;
    right: auto;
    top: auto;
    width: 100%;
    height: auto;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
    margin-top: 20px;
  }

  .about-v4-page .aqf4-founder-card {
    position: relative;
    top: auto;
    min-height: 150px;
    transform: rotate(-1.5deg);
  }

  .about-v4-page .aqf4-founder-card--ride {
    top: auto;
    min-height: 150px;
    transform: rotate(1.5deg);
  }

  .about-v4-page .aqf4-founder-card--movement {
    top: auto;
    min-height: 150px;
    transform: rotate(-1.8deg);
  }

  .about-v4-page .aqf4-founder h2 {
    white-space: normal;
    font-size: clamp(3.3rem, 11vw, 4.6rem);
  }


  .about-v4-page .aqf4-founder-visual-field {
    height: auto;
    aspect-ratio: 1.35 / 1;
    overflow: hidden;
  }

  .about-v4-page .aqf4-founder-inset-card {
    left: 8%;
    top: 12%;
    width: 44%;
  }

  .about-v4-page .aqf4-founder-letter {
    justify-self: center;
    width: min(520px, 92%);
    transform: none;
  }

  .about-v4-page .aqf4-founder-letter p {
    font-size: .80rem;
    line-height: 1.48;
  }

  .about-v4-page .aqf4-founder-philosophy p {
    font-size: 1.02rem;
  }
}

@media (max-width: 640px) {
  .about-v4-page .aqf4-founder-stage {
    width: min(380px, calc(100vw - 34px));
    gap: 18px;
  }

  .about-v4-page .aqf4-founder-title .aqf4-label { font-size: .72rem; }

  .about-v4-page .aqf4-founder h2 {
    font-size: clamp(3rem, 16vw, 4rem);
    line-height: .88;
  }


  .about-v4-page .aqf4-founder-visual-field { aspect-ratio: 1 / 1.02; }

  .about-v4-page .aqf4-founder-inset-card {
    width: 58%;
    left: 8%;
    top: 9%;
  }

  .about-v4-page .aqf4-founder-letter {
    width: 100%;
    padding: 22px 18px 24px;
    transform: none;
  }

  .about-v4-page .aqf4-founder-letterhead {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .about-v4-page .aqf4-founder-letterhead span { text-align: left; }

  .about-v4-page .aqf4-founder-letter p {
    font-size: .73rem;
    line-height: 1.48;
  }

  .about-v4-page .aqf4-founder-philosophy { padding-left: 16px; }

  .about-v4-page .aqf4-founder-philosophy p { font-size: .9rem; }

  .about-v4-page .aqf4-founder-principles {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 980px) {
  .aqf4-split,
  .aqf4-proof-grid,
  .aqf4-story-grid,
  .aqf4-icon-grid,
  .aqf4-pillars {
    grid-template-columns: 1fr;
  }

  .aqf4-env-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: min(92vw, 720px);
  }

  /* REAL CLIENT STORIES TABLET STACK
     Section: Real Client Stories
     Purpose: Centers stacked story cards on tablet and keeps spacing premium. */
  .aqf4-story-grid {
    width: min(92vw, 620px);
    margin-left: auto;
    margin-right: auto;
    gap: 34px;
  }

  /* REAL CLIENT STORIES TABLET COLLAGE HEIGHT
     Section: Real Client Stories
     Purpose: Slightly reduces collage row height for tablet layout. */
  .aqf4-collage {
    grid-template-rows: repeat(3, 82px);
  }


/* THE BEGINNING TABLET/MOBILE IMAGE GROUP RESET
   Section: The Beginning
   Purpose: Centers the image group, removes desktop offset, and tightens the space before the title on smaller screens. */
.aqf4-origin-media {
  min-height: auto;
  padding-top: 34px;
  padding-bottom: 18px;
  transform: none;
}

.aqf4-origin-main {
  width: 92%;
  margin-left: auto;
  margin-right: auto;
}

.aqf4-origin-inset {
  width: 54%;
  right: 6%;
  bottom: -48px;
}

  .aqf4-pool-story {
    min-height: 640px;
  }
}

/* THE BEGINNING TABLET CAPTION SAFETY
   Section: The Beginning
   Purpose: Keeps the main caption inside the left side of the main image so it cannot run into the overlapping inset on iPad. */
@media (min-width: 641px) and (max-width: 980px) {
  .about-v4-page .aqf4-origin-main figcaption {
    left: 14px !important;
    right: auto !important;
    bottom: 18px !important;
    transform: none !important;
    width: 34% !important;
    max-width: 210px !important;
    text-align: left !important;
    font-size: .56rem !important;
    line-height: 1.18 !important;
  }
}
@media (max-width: 640px) {
  .aqf4-section {
    padding: 58px 0;
  }

  /* THE BEGINNING MOBILE PREMIUM FLOW
     Section: The Beginning
     Purpose: Tightens title-to-image spacing and reduces the oversized stacked-image feel on phones. */
  .aqf4-origin-grid {
    gap: 24px;
  }

  .aqf4-origin-media {
    padding-top: 0;
    padding-bottom: 8px;
  }

  .aqf4-env-grid {
    grid-template-columns: 1fr;
  }

  .aqf4-env-card {
    aspect-ratio: 16 / 10;
  }
/* THE BEGINNING MOBILE CAPTIONS
   Section: The Beginning
   Purpose: Allows captions to center and wrap cleanly on phones without bleeding into the inset. */
.aqf4-origin-main figcaption,
.aqf4-origin-inset figcaption {
  left: 14px !important;
  right: 14px !important;
  bottom: 18px !important;
  transform: none !important;
  width: auto !important;
  max-width: none !important;
  text-align: center !important;
  font-size: .58rem !important;
  line-height: 1.18 !important;
}
/* THE BEGINNING MOBILE MAIN IMAGE
   Section: The Beginning
   Purpose: Keeps the main image premium while reducing the oversized stacked-image feel on phones. */
.aqf4-origin-main {
  width: 88%;
  height: 330px;
  margin-left: auto;
  margin-right: auto;
}

/* THE BEGINNING MOBILE INSET IMAGE
   Section: The Beginning
   Purpose: Converts the inset to a cleaner 16:9 supporting image without pulling it into the main image caption. */
.aqf4-origin-inset {
  position: relative;
  width: 74%;
  aspect-ratio: 16 / 9;
  height: auto;
  margin: 12px auto 0;
  right: auto;
  bottom: auto;
}

/* THE BEGINNING MOBILE CONTENT ORDER
   Section: The Beginning
   Purpose: Places the label/title above the images while keeping the story copy below the image group on phones. */
.aqf4-origin-grid .aqf4-copy {
  display: contents;
}

.aqf4-origin-grid .aqf4-label {
  order: 1;
}

.aqf4-origin-grid h2 {
  order: 2;
}

.aqf4-origin-media {
  order: 3;
}

.aqf4-origin-grid .aqf4-copy p:not(.aqf4-label) {
  order: 4;
}

  /* REAL CLIENT STORIES MOBILE COLLAGE HEIGHT
     Section: Real Client Stories
     Purpose: Keeps collage images proportional on phones. */
  .aqf4-collage {
    grid-auto-rows: 62px;
  }

/* REAL CLIENT STORIES MOBILE CTA
   Section: Real Client Stories
   Purpose: Keeps the premium story CTA proportional on phones. */
.about-v4-page .aqf4-story-cta {
  width: auto;
  max-width: calc(100vw - 48px);
  padding: 16px 24px;
  margin-left: auto;
  margin-right: auto;
}
}

/* REAL CLIENT STORIES TABLET + MOBILE CARD REBUILD
   Section: Real Client Stories
   Purpose: Uses aspect-ratio control instead of competing fixed row heights so story collages stay premium on iPad/mobile. */
@media (min-width: 641px) and (max-width: 980px) {
  .about-v4-page .aqf4-story-grid {
    width: min(86vw, 560px);
    gap: 38px;
  }

  .about-v4-page .aqf4-story-card {
    border-radius: 22px;
    overflow: hidden;
  }

  .about-v4-page .aqf4-collage {
    width: 100%;
    aspect-ratio: 4 / 3;
    grid-template-columns: 1.25fr 1fr 1fr;
    grid-template-rows: repeat(3, minmax(0, 1fr)) !important;
    grid-auto-rows: unset !important;
    gap: 4px;
  }

  .about-v4-page .aqf4-collage img {
    min-width: 0;
    min-height: 0;
  }

  .about-v4-page .aqf4-story-card > div:last-child {
    position: relative;
    z-index: 2;
    background: #fff;
    padding: 26px 28px 30px;
  }
}

@media (max-width: 640px) {
  .about-v4-page .aqf4-stories-sand {
    padding-top: 72px;
  }

  .about-v4-page .aqf4-story-head {
    width: calc(100vw - 48px);
    max-width: 360px;
  }

  .about-v4-page .aqf4-story-head h3 {
    font-size: clamp(1.75rem, 7vw, 2.18rem);
    line-height: 1.06;
  }

  .about-v4-page .aqf4-story-head p {
    max-width: 330px;
    margin-left: auto;
    margin-right: auto;
    font-size: 1rem;
    line-height: 1.65;
  }

  .about-v4-page .aqf4-story-grid {
    width: calc(100vw - 60px);
    max-width: 390px;
    gap: 38px;
  }

  .about-v4-page .aqf4-story-card {
    border-radius: 20px;
    overflow: hidden;
  }

  .about-v4-page .aqf4-collage {
    width: 100%;
    aspect-ratio: 1 / 1;
    grid-template-columns: 1.08fr 1fr 1fr;
    grid-template-rows: repeat(3, minmax(0, 1fr)) !important;
    grid-auto-rows: unset !important;
    gap: 3px;
  }

  .about-v4-page .aqf4-collage img {
    min-width: 0;
    min-height: 0;
  }

  .about-v4-page .aqf4-story-card > div:last-child {
    position: relative;
    z-index: 2;
    background: #fff;
    padding: 22px 22px 28px;
  }

  .about-v4-page .aqf4-story-card h3 {
    font-size: 1.42rem;
    line-height: 1.12;
  }

  .about-v4-page .aqf4-story-card p {
    font-size: .95rem;
    line-height: 1.55;
  }
}

/* REAL CLIENT STORIES IPAD LANDSCAPE CARD REBUILD
   Section: Real Client Stories
   Purpose: Prevents iPad landscape from using the cramped desktop 3-column card layout that causes collage/text overlap. */
@media (min-width: 981px) and (max-width: 1023px) {
  .about-v4-page .aqf4-story-grid {
    grid-template-columns: 1fr;
    width: min(62vw, 620px);
    max-width: 620px;
    margin-left: auto;
    margin-right: auto;
    gap: 42px;
  }

  .about-v4-page .aqf4-story-card {
    border-radius: 22px;
    overflow: hidden;
  }

  .about-v4-page .aqf4-collage {
    width: 100%;
    aspect-ratio: 4 / 3;
    grid-template-columns: 1.25fr 1fr 1fr;
    grid-template-rows: repeat(3, minmax(0, 1fr)) !important;
    grid-auto-rows: unset !important;
    gap: 4px;
  }

  .about-v4-page .aqf4-collage img {
    min-width: 0;
    min-height: 0;
  }

  .about-v4-page .aqf4-story-card > div:last-child {
    position: relative;
    z-index: 2;
    background: #fff;
    padding: 26px 28px 30px;
  }

  .about-v4-page .aqf4-story-card h3 {
    font-size: 1.42rem;
    line-height: 1.12;
  }

  .about-v4-page .aqf4-story-card p {
    font-size: .96rem;
    line-height: 1.58;
  }
}

/* POOL STORY TABLET READABILITY REFINEMENT
   Section: From Private Pool Sessions
   Purpose: Improves iPad/tablet readability with a balanced overlay and subtle premium text shadow. */
@media (min-width: 641px) and (max-width: 980px) {
  .about-v4-page .aqf4-pool-story::after {
    background: linear-gradient(
      90deg,
      rgba(0,0,51,.72) 0%,
      rgba(0,0,51,.58) 32%,
      rgba(0,0,51,.44) 60%,
      rgba(0,0,51,.36) 100%
    );
  }

  .about-v4-page .aqf4-pool-copy h2,
  .about-v4-page .aqf4-pool-copy p:not(.aqf4-label),
  .about-v4-page .aqf4-location {
    text-shadow: 0 2px 16px rgba(0,0,51,.92), 0 0 10px rgba(0,0,51,.42);
  }

  .about-v4-page .aqf4-pool-copy .aqf4-label {
    text-shadow: 0 2px 14px rgba(0,0,51,.72);
  }
}

/* POOL STORY MOBILE READABILITY REFINEMENT
   Section: From Private Pool Sessions
   Purpose: Lightens the mobile image overlay while adding subtle text shadow so white copy stays readable without washing out the photo. */
@media (max-width: 640px) {
  .about-v4-page .aqf4-pool-story::after {
    background: linear-gradient(
      90deg,
      rgba(0,0,51,.68) 0%,
      rgba(0,0,51,.54) 34%,
      rgba(0,0,51,.42) 62%,
      rgba(0,0,51,.30) 100%
    );
  }

  .about-v4-page .aqf4-pool-copy h2,
  .about-v4-page .aqf4-pool-copy p:not(.aqf4-label),
  .about-v4-page .aqf4-location {
    text-shadow: 0 2px 16px rgba(0,0,51,.92), 0 0 10px rgba(0,0,51,.42);
  }

  .about-v4-page .aqf4-pool-copy .aqf4-label {
    text-shadow: 0 2px 14px rgba(0,0,51,.72);
  }
}
/* AQF v4 isolation guard */
.about-v4-page .aqf4-label { font-weight: 900; }


/* ABOUT HEADER IPAD STATIC REFINEMENT
   Section: About Header
   Purpose: Keeps the About header/nav from anchoring on iPad portrait and landscape while preserving desktop behavior above common iPad widths. */
@media (min-width: 981px) and (max-width: 1366px) {
  .about-v4-page .header-inner {
    min-height: auto;
    padding: 10px 0;
    gap: 18px;
  }

  .about-v4-page .brand-logo {
    width: 220px;
  }

  .about-v4-page .main-nav {
    gap: 20px;
    font-size: .68rem;
    letter-spacing: .11em;
  }

  .about-v4-page .main-nav a {
    line-height: 1.25;
  }

  .about-v4-page .nav-cta {
    padding: 14px 24px;
    min-width: 220px;
    font-size: .68rem;
  }
}

/* ABOUT PHONE LANDSCAPE MENU COMPACT REFINEMENT
   Section: About Header
   Purpose: Keeps the opened hamburger menu compact on phone landscape instead of taking over the top half of the screen. */
@media (max-width: 980px) and (orientation: landscape) and (max-height: 520px) {
  .about-v4-page .header-inner {
    padding: 8px 0;
    gap: 8px;
  }

  .about-v4-page .brand-logo {
    width: 170px;
  }

  .about-v4-page .menu-toggle {
    width: 40px;
    height: 36px;
    border-radius: 10px;
  }

  .about-v4-page .main-nav {
    padding: 6px 0 2px;
    gap: 6px;
  }

  .about-v4-page .main-nav.is-open {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    max-height: calc(100vh - 64px);
    overflow-y: auto;
  }

  .about-v4-page .main-nav a {
    min-height: 34px;
    padding: 7px 10px;
    font-size: .68rem;
    line-height: 1.15;
  }

  .about-v4-page .nav-cta {
    grid-column: 1 / -1;
    min-height: 36px;
    justify-content: center;
  }
}

/* HERO DESKTOP RIGHT-TEXT TEST
   Section: Hero
   Purpose: Moves hero.jpg visually left and places the title/copy/CTA on the right so the right gradient can soften the building. */

/* HERO DESKTOP RIGHT-TEXT TEST
   Section: Hero
   Purpose: Moves hero.jpg visually left and places the title/copy/CTA on the right so the right gradient can soften the building. */
@media (min-width: 981px) {
  .about-v4-page .aqf4-hero .aqf4-hero-img {
    width: 104% !important;
    max-width: none !important;
    height: 104% !important;
    object-fit: cover !important;
    object-position: 38% 42% !important;
    transform: translateX(-4%) !important;
  }

  .about-v4-page .aqf4-hero .aqf4-hero-copy {
    margin-left: auto !important;
    margin-right: 0 !important;
    max-width: 760px !important;
    transform: none !important;
  }

  .about-v4-page .aqf4-hero .btn-primary {
    margin-left: 0 !important;
  }
}




/* HERO V2 TABLET + MOBILE
   Section: Hero
   Purpose: Keeps Hero V2 readable on smaller screens with image-overlay layout and no dependency on old Hero mobile CSS. */
@media (max-width: 980px) {
  .about-v4-page .aqf4-hero-v2 {
    /* 620px, was 760 (Stuart, 2026-07-29: "is there room to zoom out a little on
       mobile mode?"). Yes — and shortening the hero IS the zoom-out here.
       The hero is 0.99:1 against a 1.78:1 image, so `cover` fills by HEIGHT: the
       full image height always shows and the SIDES get cropped. At 760px only
       56% of the image width was visible (598px cut). Reducing the height scales
       the image down to keep covering, which reveals more width — 68% at 620px.
       Nothing is lost vertically. Floor is ~423px (zero crop) but the copy block
       needs 351px, so that leaves no breathing room; 620 is the modest step. */
    min-height: 620px;
    align-items: end;
    padding: 120px 0 64px;
  }

    /* HERO V2 TABLET IMAGE EDGE FIX
     Section: Hero V2
     Purpose: Removes the hard navy edge beside Stu's face by allowing the hero image to fill the full tablet/mobile width. */
  .about-v4-page .aqf4-hero-v2-img {
    width: 100%;
    object-position: center top;
  }
  /* SCRIM PULLED OFF STU'S FACE (Stuart, 2026-07-29, list item #8: "is there a
     filter at all over my face? it looks a little blue").
     Measured: his skin tones concentrate at 62-69% of the hero height, and the
     old ramp hit .68 at exactly 68% — so his face was sitting under roughly
     two-thirds of solid navy. That scrim was not decorative: the white h1 sits at
     51-69%, i.e. ON his face, so simply lightening it would have killed the
     headline. Nor could the photo be panned clear — the hero is 0.99:1 against a
     1.78:1 image, so `cover` fills by HEIGHT and there is zero vertical slack
     (the `object-position: ... top` above has a dead vertical axis here).
     So the contrast moves from the PHOTOGRAPH to the TYPE: this ramp stays light
     through the face zone (~.24 at 62-70% instead of ~.65) and only climbs hard
     BELOW it, where the deck and CTA sit and there is no face to protect. The
     headline is carried by a tight text-shadow instead — see .aqf4-hero-v2 h1
     below. Change one without the other and legibility breaks. */
  .about-v4-page .aqf4-hero-v2::after {
    background: linear-gradient(
      180deg,
      rgba(6,20,38,.06) 0%,
      rgba(6,20,38,.12) 40%,
      rgba(6,20,38,.24) 70%,
      rgba(6,20,38,.74) 88%,
      rgba(6,20,38,.96) 100%
    );
  }

  /* Contrast bound to the letterforms, not smeared across the photo. Two layers:
     a 2px hard edge for definition against skin/highlights, and a tighter 14px
     spread at .85 for mass. Replaces the inherited soft 0 8px 28px / .46 glow,
     which is depth, not contrast, and cannot hold white text over a lit face. */
  .about-v4-page .aqf4-hero-v2 h1,
  .about-v4-page .aqf4-hero-v2-eyebrow,
  .about-v4-page .aqf4-hero-v2-copy > p {
    text-shadow:
      0 1px 2px rgba(6,20,38,.95),
      0 2px 14px rgba(6,20,38,.85);
  }

  .about-v4-page .aqf4-hero-v2-inner {
    display: block;
  }

  .about-v4-page .aqf4-hero-v2-copy {
    width: min(680px, calc(100vw - 40px));
    max-width: 680px;
    margin: 0 auto;
  }

   .about-v4-page .aqf4-hero-v2 h1 {
    max-width: 680px;
    font-size: clamp(2rem, 5.4vw, 3rem);
    line-height: 1.08;
  }

  .about-v4-page .aqf4-hero-v2-title-main {
    white-space: normal;
  }

  .about-v4-page .aqf4-hero-v2 p {
    max-width: 620px;
    font-size: 1rem;
    line-height: 1.6;
  }
}

@media (max-width: 640px) {
  .about-v4-page .aqf4-hero-v2 {
    min-height: 735px;
    padding: 350px 0 50px;
  }

  /* HERO V2 PHONE IMAGE EDGE FIX
     Section: Hero V2
     Purpose: Keeps the image full-width on phones so no solid navy strip appears beside the face. */
  .about-v4-page .aqf4-hero-v2-img {
    width: 100%;
    object-position: center top;
  }

  .about-v4-page .aqf4-hero-v2-copy {
    width: min(340px, calc(100vw - 34px));
    max-width: 340px;
  }

  .about-v4-page .aqf4-hero-v2 h1 {
    max-width: 340px;
    font-size: 1.82rem;
    line-height: 1.12;
  }

  .about-v4-page .aqf4-hero-v2-title-main {
    white-space: normal;
  }

  .about-v4-page .aqf4-hero-v2 p {
    max-width: 340px;
    margin-top: 22px;
    font-size: .96rem;
    line-height: 1.55;
  }

  .about-v4-page .aqf4-hero-v2 .btn-primary {
    width: auto;
    max-width: 320px;
    padding: 16px 28px;
  }
}

/* HERO CTA HOVER - PREMIUM AQUA OUTLINE
   Section: Hero V2
   Purpose: Adds a refined aqua hover without turning the button into a bright filled block. */
.about-v4-page .aqf4-hero .btn-primary:hover,
.about-v4-page .aqf4-hero-v2 .btn-primary:hover,
.about-v4-page .aqf4-hero-v2-cta:hover {
  border-color: var(--aqf-blue) !important;
  background: rgba(0,174,239,.12) !important;
  color: #fff !important;
  box-shadow: 0 0 26px rgba(0,174,239,.18);
}

.about-v4-page .aqf4-hero-v2-cta:hover span {
  width: 34px;
  background: var(--aqf-blue);
}

/* REAL CLIENT STORIES CTA HOVER - WHITE TEXT */
.about-v4-page .aqf4-stories-sand .btn-primary:hover {
  color: #fff !important;
}
/* DOCTORATE IPAD LANDSCAPE STACK
   Section: A Doctorate in the Water
   Purpose: Keeps iPad landscape readable by using the proven stacked tablet-style order without affecting desktop. */
@supports (-webkit-touch-callout: none) {
  @media (orientation: landscape) and (min-width: 900px) {
    .about-v4-page section[aria-labelledby="teacher-title"] .aqf4-split {
      width: min(760px, calc(100vw - 96px)) !important;
      max-width: 760px !important;
    }

    .about-v4-page section[aria-labelledby="teacher-title"] .aqf4-copy {
      display: block !important;
      width: 100% !important;
      max-width: 760px !important;
    }

    .about-v4-page section[aria-labelledby="teacher-title"] h2 {
      width: 100% !important;
      max-width: 760px !important;
      margin-bottom: 34px !important;
      white-space: normal !important;
      font-size: clamp(2.35rem, 4.1vw, 3.15rem) !important;
      line-height: 1.05 !important;
    }

    .about-v4-page .aqf4-teacher-photo {
      width: 100% !important;
      max-width: 680px !important;
      margin: 0 auto 34px !important;
    }

    .about-v4-page .aqf4-teacher-text {
      max-width: 720px !important;
      margin: 0 auto !important;
    }

    .about-v4-page .aqf4-teacher-text p {
      margin: 0 0 1.12rem !important;
      font-size: 1.02rem !important;
      line-height: 1.66 !important;
    }
  }
}

/* RECOVERY IPAD LANDSCAPE STACK
   Section: The Recoveries That Changed Everything
   Purpose: Prevents iPad landscape from using the desktop 113% media layout that pushes recovery copy into the main and inset images. */
@media (min-width: 981px) and (max-width: 1023px) and (orientation: landscape) {
  .about-v4-page .aqf4-recovery-layout {
    display: grid !important;
    grid-template-columns: 1fr !important;
    width: min(760px, calc(100vw - 96px)) !important;
    max-width: 760px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    gap: 28px !important;
  }

  .about-v4-page .aqf4-recovery-head,
  .about-v4-page .aqf4-recovery-media,
  .about-v4-page .aqf4-recovery-copy {
    grid-column: 1 !important;
    grid-row: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  .about-v4-page .aqf4-recovery-media {
    justify-self: center !important;
    overflow: hidden !important;
  }

  .about-v4-page .aqf4-recovery-photo {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 16 / 9 !important;
    margin: 0 !important;
  }

  .about-v4-page .aqf4-recovery-insets {
    width: 100% !important;
    margin: 14px 0 0 !important;
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 14px !important;
  }

  .about-v4-page .aqf4-recovery-inset {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 16 / 9 !important;
    margin: 0 !important;
  }

  .about-v4-page .aqf4-recovery-copy p {
    font-size: 1.02rem !important;
    line-height: 1.66 !important;
  }
}

/* HERO V2 IPAD LANDSCAPE DESKTOP-STYLE REFINEMENT
   Section: Hero V2
   Purpose: Moves Stu farther left while extending the image behind the navy panel so the hard vertical image edge disappears. */
@supports (-webkit-touch-callout: none) {
  @media (orientation: landscape) and (min-width: 900px) {
    .about-v4-page .aqf4-hero-v2 {
      min-height: 82vh !important;
      align-items: center !important;
      padding-top: 72px !important;
      padding-bottom: 72px !important;
      background: #061426 !important;
    }

    .about-v4-page .aqf4-hero-v2-img {
      width: 116% !important;
      height: 100% !important;
      object-fit: cover !important;
      object-position: left 24% !important;
      transform: translateX(-14%) !important;
    }

    /* RAMP MOVED OFF STU'S FACE (Stuart, 2026-07-29: "tablet horizontal and my
       face is half blue").
       Measured at 1024x768: his face spans ~41%-58% of the hero width, and the
       copy block does not begin until 57.4% — but the old ramp started at 48%,
       so 9.4% of navy wash was sitting on the right half of his face BEFORE the
       copy needed any ground at all. And it was only .12 at the copy's left edge,
       so that early wash was buying almost no legibility either.
       Now transparent to 57% (clear of his face), then a steeper ramp that gives
       the copy MORE cover than before from 65% onward. Solid navy still lands at
       86% so the right edge is unchanged. */
    .about-v4-page .aqf4-hero-v2::after {
      background: linear-gradient(90deg,
        rgba(6,20,38,0) 0%,
        rgba(6,20,38,0) 57%,
        rgba(6,20,38,.14) 62%,
        rgba(6,20,38,.44) 68%,
        rgba(6,20,38,.80) 78%,
        #061426 86%,
        #061426 100%
      ) !important;
    }

    /* The copy now starts over lighter water (alpha ~.03 at its left edge instead
       of .12), so the type carries its own contrast — same two-layer shadow used
       in the portrait block: a 2px hard edge plus a tighter 14px spread. The
       inherited 0 8px 28px/.46 glow is depth, not contrast. */
    .about-v4-page .aqf4-hero-v2 h1,
    .about-v4-page .aqf4-hero-v2-eyebrow,
    .about-v4-page .aqf4-hero-v2-copy > p {
      text-shadow:
        0 1px 2px rgba(6,20,38,.95),
        0 2px 14px rgba(6,20,38,.85) !important;
    }

    .about-v4-page .aqf4-hero-v2-copy {
      width: min(420px, 36vw) !important;
      max-width: 420px !important;
      margin-left: auto !important;
      margin-right: 0 !important;
    }

    .about-v4-page .aqf4-hero-v2 h1 {
      max-width: 620px !important;
      font-size: clamp(1.9rem, 2.28vw, 2.65rem) !important;
      line-height: 1.12 !important;
    }

    .about-v4-page .aqf4-hero-v2-title-main {
      white-space: nowrap !important;
    }

    .about-v4-page .aqf4-hero-v2 p:not(.aqf4-hero-v2-eyebrow) {
      max-width: 420px !important;
      margin: 24px 0 30px !important;
      font-size: .98rem !important;
      line-height: 1.68 !important;
    }
  }
}
/* FOUNDER STATEMENT — DESKTOP STALE OVERRIDE REMOVAL V9
   Section: Founder Statement
   Purpose: Removed the old V8 desktop refinement overrides so the V9 Founder placement is the single desktop source of truth. */
/* FOUNDER STATEMENT — SPLASH MARK CLEANUP V8
   Section: Founder Statement
   Purpose: Removes the extra floating splash mark on desktop so the title, letter, and water imagery remain the only visual anchors. */
@media (min-width: 981px) {
  .about-v4-page .aqf4-founder-splash-mark {
    display: none;
  }
}

/* FOUNDER SECTION — CARD FIT: 1281-1408px viewports
   At these widths the letter's base clamp-min (720px) pushes cards past the viewport edge.
   Move the letter left by exactly the amount needed so cards always clear by 30px. */
@media (max-width: 1408px) and (min-width: 1281px) {
  .about-v4-page .aqf4-founder-letter {
    left: calc(100vw - 709px);
  }
}

/* FOUNDER SECTION — TOP BREATHING ROOM ON TALL VIEWPORTS
   Threshold 921px = just above the max-height:920px compact-layout cutoff, so these
   two queries are mutually exclusive. On FHD 1080p monitors the visible viewport is
   ~950-960px (after OS taskbar + browser chrome), which clears the 921px threshold. */
@media (min-height: 921px) and (min-width: 981px) {
  .about-v4-page .aqf4-founder {
    padding-top: 56px;
  }
}

/* FOUNDER SECTION — VIEWPORT HEIGHT ADAPTATION
   At shorter viewport heights (14" laptops, zoomed browsers) scale down the section
   so the full letter + all three cards fit without scrolling and with breathing room. */
@media (max-height: 920px) and (min-width: 981px) {
  .about-v4-page .aqf4-founder {
    /* bottom padding 14 -> 40: the enlarged letter (item #9B) is ~806px tall and
       was overhanging the section by 74px. .aqf4-founder is overflow:hidden, so
       that overhang was CLIPPED, not scrolled — the last lines of the letter and
       the signature simply vanished. */
    padding: 68px 0 40px;
  }
  .about-v4-page .aqf4-founder-stage {
    min-height: 880px;   /* was 740 — must clear letter top (22) + height (806) */
  }
  .about-v4-page .aqf4-founder-letter {
    top: 22px;
    padding: 24px 30px;
  }
  .about-v4-page .aqf4-founder-letter p {
    margin-bottom: .34rem;
    /* .70rem (11.2px) -> .94rem (15px), matching the ~1.35x card enlargement
       above (Stuart, item #9B). The old value existed to keep the whole section
       inside a short viewport WITHOUT SCROLLING — see this block's comment — and
       Stuart has explicitly lifted that constraint: "I dont care if the viewer
       has to scroll a little, at least the copy will be easier to read."
       11.2px was below the 11.5px minimum applied everywhere else on the site. */
    font-size: clamp(.86rem, .94rem, 1rem);
    line-height: 1.5;
  }
  .about-v4-page .aqf4-founder-philosophy {
    margin: .52rem 0 .56rem;
    padding: .42rem 0 .42rem;
  }
  .about-v4-page .aqf4-founder-philosophy p {
    font-size: .74rem;
  }
  .about-v4-page .aqf4-founder-final {
    font-size: .92rem !important;
    margin-top: .6rem !important;
  }
  .about-v4-page .aqf4-founder-signature {
    margin-top: .3rem;
  }
  .about-v4-page .aqf4-founder-signature-img {
    width: 80px;
  }
  .about-v4-page .aqf4-founder-card {
    min-height: 88px;
    padding: 12px 12px 11px;
  }
  .about-v4-page .aqf4-founder-card--adapt { top: 30px; }
  .about-v4-page .aqf4-founder-card--ride {
    top: 168px;
    min-height: 112px;
  }
  .about-v4-page .aqf4-founder-card--movement {
    top: 330px;
    min-height: 88px;
  }
}

/* Letter P.S. — the lagoon behind the founder letter is the one digitally
   enhanced photograph on the site, and this is how the reader gets to the
   original. Stuart's idea, and the right one: earlier attempts pinned a control
   to the image itself, but .aqf4-founder-visual-field is wider than the viewport
   (clamp(960px, 68vw, 1110px) at a negative left offset), so anything anchored
   to its right edge is clipped off-screen. A P.S. in the letter's own voice sits
   where people are already reading. */
.aqf4-founder-ps {
  margin: 22px 0 0;
  padding-top: 16px;
  border-top: 1px solid rgba(0, 0, 51, 0.12);
  font-family: "Libre Baskerville", Georgia, "Times New Roman", serif;
  font-style: italic;
  /* SAME clamp as .aqf4-founder-letter-body p, deliberately — a fixed rem here
     matched the body at desktop by luck but drifted at other widths, so the P.S.
     now scales with the letter at every viewport including phones. */
  font-size: clamp(1.02rem, .86vw, 1.14rem);
  line-height: 1.6;
  color: rgba(0, 0, 51, 0.72);
}
.aqf4-founder-ps .original-link {
  color: #007fa9;
  font-style: italic;
  text-decoration: none;
  border-bottom: 1px solid rgba(0, 127, 169, 0.45);
  transition: color 0.22s ease, border-color 0.22s ease;
}
.aqf4-founder-ps .original-link:hover {
  color: var(--brand-orange, #ff6a00);
  border-bottom-color: var(--brand-orange, #ff6a00);
}
.aqf4-founder-ps .original-link:focus-visible {
  outline: 2px solid var(--brand-orange, #ff6a00);
  outline-offset: 2px;
}

/* SUPERSEDED 2026-07-29 — do not act on this paragraph.
   It used to record that About's larger hero credit (16px vs 11.5px) was
   deliberate and should be left alone. Stuart reversed that decision: all
   photo credits now share one size and weight. About is pinned to
   11.52px / 600 in the HERO V2 — PHOTO CREDIT block at the end of this file.
   Kept only so the earlier reasoning is not rediscovered as if it were live. */

/* ==========================================================================
   HERO V2 — TABLET LANDSCAPE, ALL BROWSERS   (Stuart, 2026-07-29)
   --------------------------------------------------------------------------
   WHY THIS EXISTS: the landscape hero refinement above is wrapped in
   `@supports (-webkit-touch-callout: none)`, which is an iOS-Safari-ONLY hack.
   Firefox and Chrome skip it entirely, so at 1024x768 they fell through to the
   BASE desktop gradient — which ramps to .58 at 56% and .88 at 64% of the width.
   Stuart's face spans ~41%-58%, so it was washed navy across its right half
   ("tablet horizontal and my face is half blue"). He spotted it in Firefox's
   responsive mode, where the iOS block does not apply.
   This block repeats the corrected values WITHOUT the @supports gate so every
   browser gets them. Capped at 1200px so real desktops keep their own gradient
   (which is tuned for a copy column that starts much further right).
   Placed at the end of the file so it also wins on iOS.
   ========================================================================== */
@media (orientation: landscape) and (min-width: 900px) and (max-width: 1200px) {
  /* Transparent until 57% — clear of his face; the copy block does not start
     until 57.4%, and the old ramp was buying only .12 there anyway.

     ⚠️ SOLID NAVY MUST LAND AT 81%, NOT LATER. `.aqf4-hero-v2-img` is
     `width: 82%`, so the photo's hard right edge always falls at 82% of the hero
     — at ANY width, since both are percentages. A gradient that was still
     translucent there (the first version reached solid only at 86%) left a 4%
     strip where the image edge showed through a partly-transparent scrim, over
     the flat #000033 behind it. Stuart: "really bad scrim opacity on the right
     probably due to the image ending."
     Going solid at 81% buries the edge. The ramp is steepened to compensate so
     the copy still gains cover progressively rather than hitting a wall.
     If the 82% image width is ever changed, change this stop with it. */
  .about-v4-page .aqf4-hero-v2::after {
    background: linear-gradient(90deg,
      rgba(6,20,38,0) 0%,
      rgba(6,20,38,0) 57%,
      rgba(6,20,38,.16) 62%,
      rgba(6,20,38,.52) 69%,
      rgba(6,20,38,.86) 76%,
      #061426 81%,
      #061426 100%
    ) !important;
  }
  /* copy now begins over lighter water, so contrast binds to the letterforms */
  .about-v4-page .aqf4-hero-v2 h1,
  .about-v4-page .aqf4-hero-v2-eyebrow,
  .about-v4-page .aqf4-hero-v2-copy > p {
    text-shadow:
      0 1px 2px rgba(6,20,38,.95),
      0 2px 14px rgba(6,20,38,.85) !important;
  }
}

/* ==========================================================================
   HERO V2 — PHOTO CREDIT MARGIN   (Stuart item #10, 2026-07-29)
   --------------------------------------------------------------------------
   BUG: on phone the credit OVERLAPPED the "Request a Consultation" CTA by
   22px vertically across a 225px-wide strip.

   CAUSE: the credit is a <p> sitting directly inside .aqf4-hero-v2, so the
   hero's BODY-PARAGRAPH rules capture it — the eyebrow is excluded via
   :not(.aqf4-hero-v2-eyebrow), the credit never was. Those rules set
   margin-bottom: 30px, and on an element anchored with `bottom: 18px` a
   bottom margin pushes it UP, not down. 18px of intended clearance became
   -12px, and the credit climbed onto the button.

   FIX: zero the margin so `bottom` means what it says. Specificity here is
   (0,3,0), which clears the (0,2,1) paragraph rules.

   SIZE + WEIGHT — RULE CHANGED 2026-07-29. An older note here said About's
   larger credit was deliberate and must not be touched. Stuart has since
   REVERSED that: "All photo credit font size and weight should be the same."
   A site-wide audit found About was the ONLY main-site page out of step —
   11.52px on desktop but 16.00px on tablet and 15.36px on phone, because the
   same body-paragraph rules that broke the margin also override font-size at
   <=980px and <=640px. Every other main-site page renders 11.52px / 600 at
   all three breakpoints, so About is pinned to match.

   The only sanctioned exception is the HOME hero's .hero-credit__photo, which
   stays at weight 500: it sits inside an existing caption block rather than
   alone on an image, so 600 would read as content. Exceptions exist to stop a
   credit intruding on a hero — not to let sizes drift.

   !important on font-size is required, not lazy: the tablet-landscape block
   sets `font-size: .98rem !important` on p:not(.aqf4-hero-v2-eyebrow), which
   a plain (0,3,0) selector cannot beat.
   ========================================================================== */
.about-v4-page .aqf4-hero-v2 .photo-credit {
  margin: 0;
  font-size: 0.72rem !important;   /* 11.52px — site-wide credit size */
  font-weight: 600 !important;
}

/* Phone only: with the margin zeroed the credit cleared the CTA by 8px but sat
   18px off the hero's bottom edge — lopsided, and 8px is thin under a 43px
   button that it overlaps horizontally by 225px. The free band between the CTA
   and the hero bottom is 50px and the credit is 24px tall, so 13px splits the
   remaining 26px evenly above and below. */
@media (max-width: 640px) {
  .about-v4-page .aqf4-hero-v2 .photo-credit { bottom: 13px; }
}