/* Approach — company overview page */

/* Shared left-alignment anchor: all left-justified content on this page
   starts at var(--gbd-content-left-pad), lined up with the "by" in the
   "Gather By Design" logo wordmark in the nav (nav's own side padding +
   the fixed width of "Gather " at the nav's font size/weight). None of
   these containers use auto-margin centering anymore — centering caused
   the left edge to drift away from the nav on wide viewports, since the
   nav is full-width but a centered max-width box picks up extra margin
   as the viewport grows. Instead every container is left-aligned and
   only capped with max-width, so the left edge stays pinned exactly to
   the nav regardless of viewport width. When adding new left-justified
   content, reuse the existing .approach-*-inner containers (hero-inner,
   section-inner) rather than introducing a new container with its own
   padding math. */
:root {
  --gbd-content-left-pad: calc(clamp(1.5rem, 5vw, 4rem) + 125.79px);
}

body.approach-page {
  background: var(--parchment);
  color: var(--shadow-grey);
  align-items: stretch;
  justify-content: flex-start;
  padding: 0;
}

.approach-hero {
  position: relative;
  width: 100%;
  flex-shrink: 0;
  overflow: hidden;
  background: var(--velvet-orchid);
  color: var(--parchment);
}

.approach-hero::before {
  content: "";
  position: absolute;
  width: 46vmax;
  height: 46vmax;
  border-radius: 50%;
  border: 5.5vmax solid rgba(248, 244, 238, 0.05);
  top: 50%;
  right: -18vmax;
  transform: translateY(-50%);
  pointer-events: none;
}

.approach-hero-inner {
  /* Full-width (no max-width) with extra right-side room so the headline
     can run long without wrapping. */
  position: relative;
  padding-top: 3rem;
  padding-bottom: 5rem;
  padding-right: clamp(1rem, 3vw, 2.5rem);
  padding-left: var(--gbd-content-left-pad);
}

.approach-hero-headline {
  font-size: clamp(2.25rem, 5vw, 3.25rem);
  font-weight: 700;
  line-height: 1.15;
  /* Brandbook Display/H1 spec: -2% tracking, not the +tracking/uppercase
     recipe reserved for small labels (see .services-eyebrow-brand). Matches
     the treatment already used by .founder-name and .services-headline. */
  letter-spacing: -0.02em;
  margin-bottom: 2rem;
}

/* Keeps the closing phrase together as one unit so the line only ever
   breaks right before it (never mid-clause). On screens wide enough to
   fit the whole headline on one line it has no effect; on narrower
   screens it produces a clean, intentional-looking break instead of an
   arbitrary wrap. Disabled below the nav's own mobile breakpoint (see
   .site-nav media query in styles.css) — the nav re-centers and drops
   the logo-alignment premise at that width, and forcing this phrase to
   stay on one line at small phone widths would overflow the screen and
   force the whole page to zoom out. */
.approach-hero-headline-keep {
  white-space: nowrap;
}

.approach-hero-copy {
  max-width: 660px;
  font-size: 1.25rem;
  line-height: 1.6;
  opacity: 0.85;
}

.approach-section {
  padding: clamp(3.5rem, 8vw, 5.5rem) 0;
}

.approach-section-inner {
  /* max-width is widened beyond the band's 1080px by the same amount as
     --gbd-content-left-pad's extra offset over the plain side padding, so
     the USABLE content width (max-width minus left+right padding) matches
     what it was before this container switched from centered to
     left-aligned. Without this, left-aligning silently narrowed the
     services grid and made the cards taller/narrower than intended. */
  max-width: calc(1080px + 125.79px);
  padding-right: clamp(1.5rem, 5vw, 4rem);
  padding-left: var(--gbd-content-left-pad);
}

.approach-heading {
  font-size: clamp(1.6rem, 3vw, 2.1rem);
  font-weight: 700;
  line-height: 1.25;
  margin-bottom: 1rem;
  color: var(--velvet-orchid);
}

/* Two-tier masthead heading — large sentence-case title, optionally with a
   small uppercase label-style subtitle underneath, sharing one underline +
   spacing rhythm. Checked against the brandbook's Major Third type scale:
   .masthead-title's line-height (120%) and letter-spacing (-1%) match the H2
   tier exactly, and .masthead-subtitle's font-size (~10.2pt) closely matches
   the Label/Button tier's 10.5pt. (Both elements' font-weight 700, and the
   subtitle's wider +12% tracking, deviate from the brandbook's literal
   "Medium"/+2% spec — but that deviation matches the bold, wide-tracked
   treatment used for every other heading/label site-wide, so it's an
   intentional, consistent choice rather than an oversight.)

   Replaces the old single-line, all-caps .approach-eyebrow treatment
   (font-size ~13.8pt vs. the H3 tier's 18pt, and +15% tracking vs. H3's
   -0.5% — a bigger miss from spec than this masthead) on both About pages.
   Shared here in approach.css rather than living only in about.css since
   both About pages use it now: About GBD uses just .masthead +
   .masthead-title (a single heading line, no subtitle), About Diana adds
   .masthead-subtitle underneath for the "Founder & Culture Strategist"
   line. */
.masthead {
  display: inline-block;
  padding-bottom: 0.6rem;
  border-bottom: 3px solid var(--velvet-orchid);
  margin-bottom: 2.5rem;
}

.masthead-title {
  font-size: clamp(1.6rem, 3vw, 2.1rem);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--velvet-orchid);
}

.masthead-subtitle {
  margin-top: 0.4rem;
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--periwinkle-shade);
}

.approach-body {
  font-size: 1rem;
  line-height: 1.75;
  opacity: 0.85;
  margin-bottom: 1rem;
}

/* About GBD page only: match the body-copy treatment exactly to
   .founder-story p / .founder-bio on the About Diana page (about.css) — same
   responsive font-size (scales up to 1.1rem on wider viewports instead of
   staying fixed at 1rem), same weight (default/400, unchanged), and color
   pinned explicitly to --shadow-grey to mirror the founder page rather than
   relying on inherited body color. Scoped to .about-gbd-page so the
   Welcome/home page's own .approach-body usage (index.html) is untouched. */
.about-gbd-page .approach-body {
  font-size: clamp(1rem, 1.5vw, 1.1rem);
  color: var(--shadow-grey);
}

/* Was margin-bottom when this button sat above its section's body copy;
   flipped to margin-top now that the homepage's 2nd section leads with the
   copy and ends with this button, so the gap still separates the button
   from the text instead of trailing off into the next section's own
   padding. 1.5rem on top of the preceding paragraph's own 1rem
   margin-bottom matches the spacing .approach-section-cta uses for the
   same "button right after body copy" pattern on About GBD. */
.approach-intro-cta {
  margin-top: 1.5rem;
}

/* Extra breathing room above a CTA button that follows directly after a
   .approach-quote/.approach-pullquote block, so the button doesn't crowd
   the bolded closing line above it. */
.approach-section-cta {
  margin-top: 1.5rem;
}

.approach-readmore-link {
  display: inline-block;
  margin-top: 0.5rem;
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--velvet-orchid);
  text-decoration: none;
}

.approach-readmore-link:hover {
  text-decoration: underline;
}

/* Same pulled-quote treatment as .founder-pullquote/.founder-superpower on
   the About Diana page (about.css) — solid orchid left border, bold,
   non-italic, orchid text — reused here so both bio-style pages share one
   visual language for pulled-out lines. .approach-pullquote is for a line
   lifted out of the body copy mid-flow; .approach-quote is the closing
   statement at the end of the section. max-width matches the .approach-body
   paragraphs' own 680px cap so the bolded lines wrap at the same width as
   the surrounding text instead of stretching wider and running long on the
   right, mirroring how .founder-pullquote/.founder-superpower naturally
   wrap within the same column width as their surrounding paragraphs. */
.approach-pullquote,
.approach-quote {
  max-width: 680px;
  margin: 2rem 0;
  padding: 0.25rem 0 0.25rem 1.5rem;
  border-left: 3px solid var(--velvet-orchid);
  font-size: clamp(1.05rem, 1.8vw, 1.25rem);
  font-weight: 600;
  font-style: normal;
  line-height: 1.6;
  color: var(--velvet-orchid);
}

/* Same light-purple-circle backdrop treatment as .about-backdrop (about-diana.css)
   on the About Diana page — reused here so About GBD shares the same subtle
   depth instead of a flat parchment background. Relies on the base
   .backdrop element/pseudo-elements defined in styles.css.
   Both blobs now match About Diana's fix: one Soft Periwinkle hue at the
   same 0.14 strength for both, instead of the second blob sitting on an
   off Orchid tint (0.06) that didn't match the first. */
.approach-backdrop {
  background: var(--parchment);
}

.approach-backdrop::before,
.approach-backdrop::after {
  background: rgba(131, 119, 209, 0.14);
}

.approach-cta-band {
  background: var(--velvet-orchid);
  color: var(--parchment);
  text-align: center;
  padding: clamp(3rem, 8vw, 4.5rem) clamp(1.5rem, 5vw, 4rem);
}

.approach-cta-heading {
  font-size: clamp(1.6rem, 3.5vw, 2.25rem);
  font-weight: 700;
  margin-bottom: 0.75rem;
}

.approach-cta-copy {
  max-width: 480px;
  margin: 0 auto 1.75rem;
  opacity: 0.85;
  line-height: 1.6;
}

/* Below the nav's own mobile breakpoint (see .site-nav media query in
   styles.css) the nav re-centers and drops the logo-alignment premise,
   so fall back to plain, symmetric side padding here too. This must
   stay the last rule in the file so it wins over the base .approach-*-
   inner rules above at matching specificity. */
@media (max-width: 640px) {
  .approach-hero-inner,
  .approach-section-inner {
    padding-left: clamp(1.5rem, 5vw, 4rem);
  }

  .approach-hero-inner {
    padding-right: clamp(1.5rem, 5vw, 4rem);
  }

  .approach-hero-headline-keep {
    white-space: normal;
  }
}