/* Phase 3C: owner-approved imagery layered onto the accepted Visual v4 system. */
:root {
  --c3-ink: #152a2b;
  --c3-teal: #386f6a;
  --c3-teal-soft: #dcebe6;
  --c3-paper: #f6f2e8;
  --c3-warm: #e9ded0;
}

.story-figure { position: relative; margin: 0; overflow: hidden; background: #d9e4df; }
.story-figure picture, .story-figure img { display: block; width: 100%; height: 100%; }
.story-figure img { object-fit: cover; }
.story-figure figcaption { position: absolute; right: 0; bottom: 0; max-width: 72%; padding: 9px 12px; background: rgba(20,38,39,.88); color: #edf3f0; font-size: 9px; line-height: 1.55; letter-spacing: .02em; }
.c3-section-number { display: block; margin-bottom: 28px; color: var(--c3-teal); font: 800 9px Arial, sans-serif; letter-spacing: .16em; }

/* Homepage: aspiration first, evidence close at hand. */
.c3-home-hero { position: relative; overflow: hidden; border-bottom: 1px solid var(--v4-line-dark); background: var(--c3-paper); }
.c3-home-hero::before { position: absolute; inset: 0 0 0 55%; background: var(--c3-teal-soft); content: ""; }
.c3-home-hero__grid { position: relative; display: grid; grid-template-columns: minmax(0,.88fr) minmax(470px,1.12fr); align-items: stretch; min-height: 690px; }
.c3-home-hero__copy { z-index: 1; align-self: center; padding: 88px 72px 88px 0; }
.c3-home-hero h1 { max-width: 650px; margin: 15px 0 27px; font-family: var(--v4-display); font-size: clamp(47px,5vw,68px); font-weight: 500; line-height: 1.34; letter-spacing: -.045em; }
.c3-home-hero__lead { max-width: 590px; margin: 0; font-size: 15px; line-height: 2.05; }
.c3-home-hero__actions { display: flex; flex-wrap: wrap; gap: 10px 28px; margin-top: 38px; }
.c3-home-hero__actions a { border-bottom: 1px solid var(--c3-ink); padding: 0 2px 7px; color: var(--c3-ink); font-size: 11px; font-weight: 750; text-decoration: none; }
.c3-home-hero__trust { margin: 34px 0 0; padding-left: 20px; border-left: 2px solid var(--c3-teal); color: #5d7070; font-size: 10px; }
.story-figure--home { min-height: 690px; }
.story-figure--home img { object-position: center; }

.c3-brand-story { border-bottom: 1px solid var(--v4-line); padding: 116px 0; background: #f0ece2; }
.c3-brand-story__grid { display: grid; grid-template-columns: minmax(380px,.95fr) minmax(0,.75fr); align-items: center; gap: clamp(60px,8vw,130px); }
.story-figure--brand { aspect-ratio: 1 / 1; }
.c3-brand-story h2, .c3-method-story h2 { margin: 0 0 25px; font-family: var(--v4-display); font-size: clamp(37px,4vw,52px); font-weight: 500; line-height: 1.48; letter-spacing: -.035em; }
.c3-brand-story p { max-width: 530px; margin: 0 0 28px; font-size: 14px; line-height: 2.05; }

.c3-method-story { border-bottom: 1px solid var(--v4-line-dark); padding: 105px 0; background: #e4ece7; }
.c3-method-story__grid { display: grid; grid-template-columns: minmax(0,.82fr) minmax(420px,1fr); align-items: center; gap: clamp(60px,8vw,130px); }
.c3-method-story ol { margin: 36px 0 0; border-top: 1px solid rgba(21,42,43,.35); padding: 0; list-style: none; }
.c3-method-story li { display: grid; grid-template-columns: 150px 1fr; gap: 22px; border-bottom: 1px solid rgba(21,42,43,.22); padding: 17px 0; }
.c3-method-story li b { font-size: 12px; }
.c3-method-story li span { color: #566c6b; font-size: 11px; }
.story-figure--method { aspect-ratio: 4 / 3; }

/* Category imagery is illustrative, never an exact model depiction. */
.v4-category-hero__grid { grid-template-columns: minmax(0,1fr) minmax(360px,520px); align-items: center; }
.story-figure--category { width: 100%; aspect-ratio: 4 / 3; border: 1px solid rgba(21,42,43,.32); }
.story-figure--underwear { aspect-ratio: 1 / 1; max-width: 470px; justify-self: end; }
.story-figure--category::before { position: absolute; z-index: 1; inset: 14px; border: 1px solid rgba(255,255,255,.62); pointer-events: none; content: ""; }

/* Comparisons retain matrix priority; the image is a short editorial preface. */
.c3-compare-intro { padding: 48px 0 36px; }
.c3-compare-intro .breadcrumbs { margin-bottom: 28px; }
.c3-compare-intro__grid { display: grid; grid-template-columns: minmax(0,1fr) 300px; align-items: center; gap: 70px; }
.c3-compare-intro__grid h1 { margin-bottom: 17px; }
.c3-compare-intro__grid > div > p:last-child { max-width: 680px; margin: 0; font-size: 13px; line-height: 1.9; }
.story-figure--compare { aspect-ratio: 16 / 9; }
.story-figure--compare figcaption { max-width: 100%; padding: 6px 8px; font-size: 8px; }

/* Navigator visual explains method without behaving like a diagnostic result. */
.c3-navigator-method { border-bottom: 1px solid var(--v4-line); padding: 44px 0; background: #e5ece8; }
.c3-navigator-method__grid { display: grid; grid-template-columns: 250px minmax(0,610px); align-items: center; gap: 48px; }
.story-figure--navigator { aspect-ratio: 16 / 9; }
.story-figure--navigator figcaption { max-width: 100%; padding: 5px 7px; font-size: 7px; }
.c3-navigator-method .c3-section-number { margin-bottom: 11px; }
.c3-navigator-method h2 { margin: 0 0 8px; font-family: var(--v4-display); font-size: 27px; font-weight: 500; line-height: 1.5; }
.c3-navigator-method p { margin: 0; font-size: 11px; line-height: 1.85; }

@media (max-width: 1100px) {
  .c3-home-hero__grid { grid-template-columns: minmax(0,.9fr) minmax(420px,1.1fr); min-height: 600px; }
  .c3-home-hero__copy { padding-right: 45px; }
  .story-figure--home { min-height: 600px; }
  .c3-brand-story__grid, .c3-method-story__grid { gap: 65px; }
  .v4-category-hero__grid { grid-template-columns: minmax(0,1fr) 390px; }
}

@media (max-width: 900px) {
  .c3-home-hero::before { display: none; }
  .c3-home-hero__grid { grid-template-columns: 1fr; padding-block: 60px; }
  .c3-home-hero__copy { padding: 0 0 40px; }
  .story-figure--home { min-height: 0; aspect-ratio: 16 / 10; }
  .c3-brand-story__grid, .c3-method-story__grid { grid-template-columns: 1fr; }
  .c3-brand-story__grid { gap: 55px; }
  .c3-method-story__grid { gap: 50px; }
  .c3-method-story__grid > .story-figure { grid-row: 1; }
  .story-figure--brand, .story-figure--method { width: min(100%,650px); }
  .v4-category-hero__grid { grid-template-columns: 1fr; }
  .story-figure--category, .story-figure--underwear { width: min(100%,620px); max-width: none; justify-self: start; }
  .c3-compare-intro__grid { grid-template-columns: 1fr 250px; gap: 35px; }
}

@media (max-width: 720px) {
  .story-figure figcaption { max-width: 88%; font-size: 8px; }
  .c3-home-hero__grid { min-height: 0; padding-block: 42px 48px; }
  .c3-home-hero__copy { padding-bottom: 30px; }
  .c3-home-hero h1 { margin-top: 12px; font-size: clamp(38px,11.6vw,46px); line-height: 1.35; }
  .c3-home-hero__lead { font-size: 14px; line-height: 1.9; }
  .c3-home-hero__actions { display: grid; margin-top: 28px; }
  .c3-home-hero__actions a { width: fit-content; }
  .c3-home-hero__trust { margin-top: 25px; }
  .story-figure--home { aspect-ratio: 4 / 5; }
  .c3-brand-story, .c3-method-story { padding: 70px 0; }
  .c3-brand-story__grid, .c3-method-story__grid { gap: 38px; }
  .c3-brand-story h2, .c3-method-story h2 { font-size: 34px; }
  .c3-method-story li { grid-template-columns: 1fr; gap: 4px; }
  .story-figure--brand, .story-figure--method { aspect-ratio: 4 / 5; }
  .story-figure--category, .story-figure--underwear { aspect-ratio: 4 / 5; height: auto; }
  .c3-compare-intro { padding: 38px 0 28px; }
  .c3-compare-intro__grid { grid-template-columns: 1fr; gap: 23px; }
  .story-figure--compare { width: min(100%,430px); aspect-ratio: 16 / 9; }
  .c3-navigator-method { padding: 34px 0; }
  .c3-navigator-method__grid { grid-template-columns: 1fr; gap: 23px; }
  .story-figure--navigator { width: min(100%,430px); }
  .c3-navigator-method h2 { font-size: 24px; }
}

@media (max-width: 390px) {
  .c3-home-hero h1 { font-size: 38px; }
  .c3-brand-story h2, .c3-method-story h2 { font-size: 31px; }
}

@media (prefers-reduced-motion: reduce) {
  .story-figure img { transition: none !important; }
}