/* 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 */

/* Self-hosted Cormorant Garamond (variable) — Founder Statement heading only.
   Replaces the Google Fonts request (Stuart: site-wide font localization). */
@font-face { font-family: "Cormorant Garamond"; src: url("../fonts/CormorantGaramond-VariableFont_wght.ttf") format("truetype"); font-weight: 300 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Cormorant Garamond"; src: url("../fonts/CormorantGaramond-Italic-VariableFont_wght.ttf") format("truetype"); font-weight: 300 700; 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); }
.aqf4-deep { background: var(--aqf-navy); 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: #000033;
  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(0,0,51,0) 0%,
    rgba(0,0,51,0) 39%,
    rgba(0,0,51,.18) 47%,
    rgba(0,0,51,.58) 56%,
    rgba(0,0,51,.88) 64%,
    #000033 72%,
    #000033 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(0,0,51,.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(0,0,51,.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. */
.aqf4-lightbox-trigger {
  display: block;
  border: 0;
  padding: 0;
  color: inherit;
  text-decoration: none;
  cursor: zoom-in;
}

.aqf4-lightbox-trigger:hover img {
  transform: scale(1.025);
}

.aqf4-lightbox-trigger img {
  transition: transform .32s ease;
}

/* ENVIRONMENT PREMIUM LIGHTBOX
   Section: Real-World Environments
   Purpose: Adds a refined full-screen image preview for environment cards. */
.aqf4-lightbox {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 28px;
  background:
    radial-gradient(circle at 50% 45%, rgba(0,174,239,.13), rgba(0,0,51,0) 42%),
    rgba(0,0,51,.88);
  backdrop-filter: blur(10px);
}

.aqf4-lightbox.is-open {
  display: flex;
}

.aqf4-lightbox-panel {
  width: min(1120px, 92vw);
  max-height: 88vh;
  display: grid;
  gap: 14px;
}

.aqf4-lightbox-img {
  width: 100%;
  max-height: 78vh;
  object-fit: contain;
  border-radius: 18px;
  box-shadow: 0 28px 80px rgba(0,0,0,.42);
  background: rgba(255,255,255,.06);
}

.aqf4-lightbox-caption {
  margin: 0;
  color: #fff;
  font-family: var(--aqf-sans);
  font-size: .78rem;
  font-weight: 900;
  letter-spacing: .14em;
  text-align: center;
  text-transform: uppercase;
  text-shadow: 0 2px 16px rgba(0,0,51,.9);
}

.aqf4-lightbox-close {
  position: fixed;
  top: 22px;
  right: 24px;
  z-index: 10000;
  width: 44px;
  height: 44px;
  border: 1px solid rgba(255,255,255,.44);
  border-radius: 999px;
  color: #fff;
  background: rgba(0,0,51,.42);
  font-size: 2rem;
  line-height: 1;
  cursor: pointer;
}

.aqf4-lightbox-close:hover {
  border-color: var(--aqf-blue);
  background: rgba(0,174,239,.16);
}

/* ENVIRONMENT LIGHTBOX ARROWS
   Section: Real-World Environments
   Purpose: Adds premium previous/next controls to the lightbox gallery. */
.aqf4-lightbox-arrow {
  position: fixed;
  top: 50%;
  z-index: 10000;
  width: 52px;
  height: 52px;
  border: 1px solid rgba(255,255,255,.44);
  border-radius: 999px;
  color: #fff;
  background: rgba(0,0,51,.42);
  font-family: Georgia, serif;
  font-size: 3rem;
  line-height: .82;
  cursor: pointer;
  transform: translateY(-50%);
}

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

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

.aqf4-lightbox-arrow:hover {
  border-color: var(--aqf-blue);
  background: rgba(0,174,239,.16);
}

@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;
  background: #000033;
  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 DEPTH REMOVAL
   Section: A Doctorate in the Water
   Purpose: Removes overlay gradient because the shortened caption sits cleanly below the image. */
.about-v4-page .aqf4-teacher-photo::after {
  display: none;
}

/* DOCTORATE PRINT-STYLE CAPTION
   Section: A Doctorate in the Water
   Purpose: Forces the shortened Doctorate caption to match the approved clean sans-serif caption style. */
.about-v4-page .aqf4-teacher-photo figcaption {
  position: static !important;
  left: auto !important;
  right: auto !important;
  bottom: auto !important;
  transform: none !important;
  width: 100% !important;
  max-width: none !important;
  margin: 12px auto 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: rgba(255,255,255,.86) !important;
  font-family: var(--aqf-sans) !important;
  font-size: .62rem !important;
  font-weight: 800 !important;
  line-height: 1.22 !important;
  letter-spacing: .045em !important;
  text-align: center !important;
  text-transform: uppercase !important;
  text-shadow: 0 2px 16px rgba(0,0,51,.92), 0 0 10px rgba(0,0,51,.45) !important;
  white-space: normal !important;
  backdrop-filter: none !important;
  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;
  }

  .about-v4-page .aqf4-teacher-photo figcaption {
    margin-top: 10px !important;
    font-size: .58rem !important;
    line-height: 1.2 !important;
  }

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

  .about-v4-page .aqf4-teacher-photo figcaption {
    margin-top: 10px !important;
    font-size: .5rem !important;
    line-height: 1.18 !important;
  }

.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;
  font-family: "Cormorant Garamond", var(--aqf-serif);
  font-size: clamp(3.55rem, 5vw, 5.15rem);
  line-height: .86;
  font-weight: 600;
  letter-spacing: -.055em;
  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));
  width: clamp(430px, 29.4vw, 470px);
  padding: clamp(26px, 2.0vw, 31px) clamp(30px, 2.25vw, 35px);
  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; }
  .about-v4-page .aqf4-founder-letter { left: min(552px, calc(100vw - 660px)); width: 420px; top: 74px; padding: 25px 28px; }
  .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 {
    min-height: 760px;
    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;
  }
  .about-v4-page .aqf4-hero-v2::after {
    background: linear-gradient(
      180deg,
      rgba(0,0,51,.06) 0%,
      rgba(0,0,51,.16) 32%,
      rgba(0,0,51,.68) 68%,
      rgba(0,0,51,.96) 100%
    );
  }

  .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: #000033 !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;
    }

    .about-v4-page .aqf4-hero-v2::after {
      background: linear-gradient(90deg,
        rgba(0,0,51,0) 0%,
        rgba(0,0,51,0) 48%,
        rgba(0,0,51,.08) 56%,
        rgba(0,0,51,.34) 65%,
        rgba(0,0,51,.74) 75%,
        #000033 86%,
        #000033 100%
      ) !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 {
    padding: 68px 0 14px;
  }
  .about-v4-page .aqf4-founder-stage {
    min-height: 740px;
  }
  .about-v4-page .aqf4-founder-letter {
    top: 22px;
    padding: 18px 22px;
  }
  .about-v4-page .aqf4-founder-letter p {
    margin-bottom: .26rem;
    font-size: clamp(.62rem, .70rem, .74rem);
    line-height: 1.38;
  }
  .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;
}

/* About's hero credit renders LARGER than the other pages' (16px/600 vs
   11.5px/600) because `.about-v4-page .aqf4-hero-v2 p` (0,2,1) outranks any
   `.photo-credit` rule. Stuart saw both and said the size does not have to
   match, so this is left alone deliberately — it is not an oversight. If it
   ever needs pinning, the override must carry `.about-v4-page` to win. */