/* Approach page composition. Maps 1:1 to the plain-HTML mockup in
   reference/Design/Page_Samples_PLAINHTML/Approach.html. */

/* ── §1 Page Hero ──────────────────────────────────────────── */

.approach-hero {
  position: relative;
  background: var(--sg-cape-navy);
  color: var(--sg-white);
  /* Pull up under the sticky nav so the navy extends behind it,
     matching the home page pattern. */
  margin-top: calc(-1 * var(--sg-nav-height));
  padding: calc(var(--sg-nav-height) + 120px) 56px 120px;
  overflow: hidden;
  isolation: isolate;
}

.approach-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(900px 600px at 15% 10%, rgba(26, 86, 219, 0.32), transparent 65%),
    radial-gradient(700px 500px at 85% 90%, rgba(26, 86, 219, 0.18), transparent 70%);
  z-index: -1;
}

.approach-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.018) 0 1px, transparent 1px 64px),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.018) 0 1px, transparent 1px 64px);
  z-index: -1;
  pointer-events: none;
}

.approach-hero__intro {
  max-width: 800px;
  margin: 0 auto 80px;
  text-align: center;
}

.approach-hero__eyebrow {
  margin: 0 0 24px;
}

.approach-hero__h1 {
  font-family: var(--sg-font-display);
  font-weight: var(--sg-w-black);
  font-size: clamp(40px, 5vw, 56px);
  line-height: 1.04;
  letter-spacing: -0.025em;
  color: var(--sg-white);
  margin: 0 0 28px;
  text-wrap: balance;
}

.approach-hero__sub {
  font-size: 18px;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.65);
  margin: 0;
  text-wrap: pretty;
}

.approach-hero__inner {
  max-width: 1280px;
  margin: 0 auto;
  width: 100%;
}

.routing-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

.route-card {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  padding: 36px;
  min-height: 280px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  color: var(--sg-white);
  text-decoration: none;
  transition: background 0.25s ease, border-color 0.25s ease,
              transform 0.25s ease, box-shadow 0.25s ease;
}

.route-card:hover {
  background: rgba(26, 86, 219, 0.08);
  border-color: var(--sg-hero-blue);
  transform: translateY(-2px);
  box-shadow: 0 0 0 1px var(--sg-hero-blue), 0 8px 24px rgba(26, 86, 219, 0.20);
  text-decoration: none;
}

.route-card__domain {
  font-family: var(--sg-font-display);
  font-weight: var(--sg-w-black);
  font-size: 32px;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--sg-white);
  margin: 0 0 18px;
}

.route-card__statement {
  font-size: 17px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.70);
  margin: 0;
  text-wrap: pretty;
}

.route-card__arrow {
  margin-top: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  color: var(--sg-hero-blue);
  transition: transform 0.25s ease;
}
.route-card__arrow svg { width: 100%; height: 100%; display: block; }
.route-card:hover .route-card__arrow { transform: translateY(4px); }

@media (max-width: 1080px) {
  .routing-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .routing-grid { grid-template-columns: 1fr; }
  .approach-hero { padding: calc(var(--sg-nav-height) + 80px) 28px 96px; }
}

/* ── Domain sections shared (GTM / Product / AI Transformation) ── */

.domain-section { position: relative; }

.domain-section__opener {
  padding: 100px 56px 80px;
  background: var(--sg-white);
}

.domain-section__opener-inner {
  max-width: 1280px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 58fr 42fr;
  gap: 80px;
  align-items: center;
}

/* Large domain label (Plus Jakarta Sans 24px, Hero Blue, uppercase,
   tracked, with a 3px Hero Blue left rule). This is bigger than the
   site's standard 11px .eyebrow. */
.domain-label {
  font-family: var(--sg-font-display);
  font-size: 24px;
  font-weight: var(--sg-w-bold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--sg-hero-blue);
  margin: 0 0 24px;
  padding-left: 12px;
  border-left: 3px solid var(--sg-hero-blue);
  line-height: 1;
}

.domain-section__h2 {
  font-family: var(--sg-font-display);
  font-weight: var(--sg-w-black);
  font-size: clamp(44px, 5.5vw, 72px);
  line-height: 1.02;
  letter-spacing: -0.03em;
  margin: 16px 0 0;
  text-wrap: balance;
  max-width: 18ch;
}

.domain-section__h2 .primary { color: var(--sg-ink); }
.domain-section__h2 .muted   { color: var(--sg-steel); }

.domain-section__pull {
  font-size: 22px;
  line-height: 1.4;
  color: var(--sg-hero-red);
  margin: 0 0 20px;
  font-weight: var(--sg-w-semibold);
  text-wrap: balance;
}

.domain-section__lede {
  font-size: 18px;
  line-height: 1.55;
  color: var(--sg-steel);
  margin: 0;
  max-width: 46ch;
  text-wrap: pretty;
}

.domain-section__pillars {
  padding: 60px 56px 120px;
  background: var(--sg-white);
  position: relative;
}

.domain-section__pillars::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 80px;
  height: 3px;
  background: var(--sg-hero-blue);
  border-radius: 2px;
}

.domain-section__pillars-inner {
  max-width: 1280px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

.pillar-card {
  background: var(--sg-white);
  border: 1px solid var(--sg-rule);
  border-radius: 12px;
  padding: 32px;
  display: flex;
  flex-direction: column;
  min-height: 400px;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.pillar-card:hover {
  transform: scale(1.02);
  border-color: var(--sg-hero-blue);
  box-shadow: 0 8px 32px rgba(26, 86, 219, 0.12);
}

.pillar-card__num {
  font-family: ui-monospace, "SFMono-Regular", Menlo, monospace;
  font-size: 12px;
  letter-spacing: 0.12em;
  color: var(--sg-steel);
  margin: 0 0 52px;
}

.pillar-card__title {
  font-family: var(--sg-font-display);
  font-weight: var(--sg-w-bold);
  font-size: 28px;
  line-height: 1.2;
  letter-spacing: -0.015em;
  color: var(--sg-ink);
  margin: 0 0 16px;
  text-wrap: balance;
}

.pillar-card__body {
  font-size: 15px;
  line-height: 1.55;
  color: var(--sg-steel);
  flex: 1;
  text-wrap: pretty;
  margin: 0;
}

.pillar-card__footer {
  margin-top: 28px;
  display: flex;
  align-items: center;
  gap: 12px;
}

.pillar-card__rule {
  width: 24px;
  height: 3px;
  background: var(--sg-hero-red);
  border-radius: 2px;
  flex: 0 0 auto;
}

.pillar-card__tag {
  font-family: ui-monospace, "SFMono-Regular", Menlo, monospace;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--sg-steel);
}

/* Product section: Cape Navy variant */
.domain-section--product .domain-section__opener,
.domain-section--product .domain-section__pillars {
  background: var(--sg-cape-navy);
  position: relative;
  isolation: isolate;
}
.domain-section--product .domain-section__opener::before,
.domain-section--product .domain-section__pillars::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(900px 600px at 15% 20%, rgba(26, 86, 219, 0.22), transparent 65%),
    radial-gradient(700px 500px at 85% 80%, rgba(26, 86, 219, 0.14), transparent 70%);
  z-index: -1;
  pointer-events: none;
}
.domain-section--product .domain-section__h2 .primary { color: var(--sg-white); }
.domain-section--product .domain-section__h2 .muted   { color: rgba(255, 255, 255, 0.45); }
.domain-section--product .domain-section__lede { color: rgba(255, 255, 255, 0.75); }
.domain-section--product .domain-section__pull { color: var(--sg-white); }
.domain-section--product .pillar-card {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.10);
}
.domain-section--product .pillar-card:hover {
  background: rgba(26, 86, 219, 0.12);
  border-color: var(--sg-hero-blue);
  box-shadow: 0 8px 32px rgba(26, 86, 219, 0.28);
}
.domain-section--product .pillar-card__num   { color: rgba(255, 255, 255, 0.5); }
.domain-section--product .pillar-card__title { color: var(--sg-white); }
.domain-section--product .pillar-card__body  { color: rgba(255, 255, 255, 0.72); }
.domain-section--product .pillar-card__tag   { color: rgba(255, 255, 255, 0.55); }
.domain-section--product .domain-section__pillars::before {
  background: rgba(255, 255, 255, 0.25);
}

/* AI Transformation section: Warm Cream variant */
.domain-section--transformation .domain-section__opener,
.domain-section--transformation .domain-section__pillars {
  background: var(--sg-cream);
}

@media (max-width: 1080px) {
  .domain-section__opener-inner { grid-template-columns: 1fr; gap: 40px; }
  .domain-section__pillars-inner { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .domain-section__opener { padding: 80px 28px 56px; }
  .domain-section__pillars { padding: 48px 28px 80px; }
  .domain-section__pillars-inner { grid-template-columns: 1fr; }
}

/* ── §5 Fundraising ────────────────────────────────────────── */

.fundraising {
  background: var(--sg-cape-navy);
  color: var(--sg-white);
  padding: 140px 56px;
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.fundraising::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(900px 600px at 88% 10%, rgba(26, 86, 219, 0.22), transparent 65%),
    radial-gradient(700px 500px at 10% 90%, rgba(200, 32, 47, 0.10), transparent 70%);
  z-index: -1;
}

.fundraising::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.018) 0 1px, transparent 1px 64px),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.018) 0 1px, transparent 1px 64px);
  z-index: -1;
  pointer-events: none;
}

.fundraising__inner { max-width: 1280px; margin: 0 auto; }

.fundraising__top { margin-bottom: 64px; }

.fundraising__label {
  /* Same large prominent label as the domain sections but on dark */
  font-family: var(--sg-font-display);
  font-size: 24px;
  font-weight: var(--sg-w-bold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--sg-hero-blue);
  margin: 0 0 16px;
  padding-left: 12px;
  border-left: 3px solid var(--sg-hero-blue);
  line-height: 1;
}

.fundraising__scope {
  font-family: var(--sg-font-display);
  font-weight: var(--sg-w-semibold);
  font-size: 16px;
  color: var(--sg-white);
  margin: 0 0 24px;
  letter-spacing: 0.01em;
}

.fundraising__h2 {
  font-family: var(--sg-font-display);
  font-weight: var(--sg-w-bold);
  font-size: clamp(36px, 4.2vw, 48px);
  line-height: 1.06;
  letter-spacing: -0.02em;
  color: var(--sg-white);
  margin: 0;
  max-width: 22ch;
  text-wrap: balance;
}

.fundraising__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 96px;
  align-items: start;
}

.fundraising__bold {
  font-family: var(--sg-font-display);
  font-weight: var(--sg-w-bold);
  font-size: 24px;
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--sg-white);
  margin: 0 0 24px;
  text-wrap: balance;
}

.fundraising__followon {
  font-size: 17px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.75);
  margin: 0;
  max-width: 50ch;
  text-wrap: pretty;
}

.fundraising__list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.fundraising__list li {
  padding: 24px 0;
  border-bottom: 1px solid rgba(228, 226, 220, 0.18);
}

.fundraising__list li:first-child { padding-top: 0; }
.fundraising__list li:last-child  { border-bottom: 0; padding-bottom: 0; }

.fundraising__item {
  font-family: var(--sg-font-display);
  font-weight: var(--sg-w-bold);
  font-size: 20px;
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--sg-white);
  margin: 0;
}

@media (max-width: 1080px) {
  .fundraising__grid { grid-template-columns: 1fr; gap: 48px; }
}
@media (max-width: 640px) {
  .fundraising { padding: 96px 28px; }
}

/* ── §6 Engagement Models ─────────────────────────────────── */

.engagement {
  background: var(--sg-white);
  padding: 140px 56px 140px;
}

.engagement__inner { max-width: 1280px; margin: 0 auto; }

.engagement__header { margin-bottom: 56px; }

.engagement__label {
  font-family: var(--sg-font-display);
  font-size: 24px;
  font-weight: var(--sg-w-bold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--sg-hero-blue);
  margin: 0 0 20px;
  padding-left: 12px;
  border-left: 3px solid var(--sg-hero-blue);
  line-height: 1;
}

.engagement__h2 {
  font-family: var(--sg-font-display);
  font-weight: var(--sg-w-bold);
  font-size: clamp(36px, 4vw, 48px);
  line-height: 1.06;
  letter-spacing: -0.02em;
  color: var(--sg-ink);
  margin: 0;
  text-wrap: balance;
}

.eng-tabs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  position: relative;
  border-bottom: 1px solid var(--sg-rule);
}

.eng-tab {
  background: transparent;
  border: 1px solid transparent;
  border-bottom: none;
  border-radius: 4px 4px 0 0;
  padding: 24px 28px 22px;
  text-align: left;
  cursor: pointer;
  font-family: inherit;
  color: var(--sg-ink);
  position: relative;
  bottom: -1px;
  transition: background 0.2s ease, border-color 0.2s ease;
}

.eng-tab:hover:not(.is-active) { background: rgba(17, 19, 24, 0.03); }

.eng-tab.is-active {
  border: 1px solid var(--sg-hero-blue);
  border-bottom: 1px solid var(--sg-white);
  color: var(--sg-hero-blue);
  background: var(--sg-white);
  z-index: 1;
}

.eng-tab__label {
  font-family: ui-monospace, Menlo, monospace;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--sg-steel);
  display: block;
  margin-bottom: 10px;
}
.eng-tab.is-active .eng-tab__label { color: var(--sg-hero-blue); }

.eng-tab__name {
  font-family: var(--sg-font-display);
  font-weight: var(--sg-w-bold);
  font-size: 22px;
  line-height: 1.2;
  letter-spacing: -0.015em;
  display: block;
}

.eng-tab__hint {
  display: block;
  font-size: 13px;
  color: var(--sg-steel);
  margin-top: 6px;
}

.eng-panel {
  display: none;
  grid-template-columns: 60fr 40fr;
  min-height: 580px;
  border: 1px solid var(--sg-rule);
  border-top: none;
  overflow: hidden;
}
.eng-panel.is-active { display: grid; }

.eng-text {
  padding: 64px 64px 80px 56px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.eng-text__opener {
  font-family: var(--sg-font-display);
  font-weight: var(--sg-w-bold);
  font-size: 24px;
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--sg-ink);
  margin: 0;
  text-wrap: balance;
}

.eng-text__body {
  font-size: 17px;
  line-height: 1.6;
  color: var(--sg-steel);
  margin: 0;
  text-wrap: pretty;
}

.eng-text__ideal-label {
  font-family: var(--sg-font-display);
  font-size: 11px;
  font-weight: var(--sg-w-bold);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--sg-hero-blue);
  margin: 8px 0 0;
}

.eng-text__bullets {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.eng-text__bullets li {
  font-size: 15px;
  line-height: 1.5;
  color: var(--sg-steel);
  padding-left: 20px;
  position: relative;
}

.eng-text__bullets li::before {
  /* en dash, not em dash, to honor the "no em dashes" rule */
  content: "\2013";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--sg-hero-blue);
  font-size: 13px;
  line-height: 1.5;
}

.eng-image {
  position: relative;
  /* Match the surrounding .engagement section's background so a
     white-bg photo blended via multiply lands seamlessly. */
  background: var(--sg-white);
  overflow: hidden;
  isolation: isolate;
}
.eng-image .img-slot { background-color: var(--sg-white); }

/* White-background photos: multiplying with the warm-white container
   makes the image's white pixels match the section background. The
   radial-gradient mask then feathers the alpha at the edges so the
   figure (which often runs close to the image boundary) fades into
   the section instead of hard-stopping at a rectangle.

   Two effects stacked:
     - mix-blend-mode: multiply → image bg color disappears into bg
     - mask-image radial      → image edges fade to transparent

   object-fit: contain keeps the figure un-cropped at any input
   aspect ratio. */
.eng-image .img-slot img {
  mix-blend-mode: multiply;
  object-fit: contain;
  -webkit-mask-image: radial-gradient(ellipse at center, black 55%, transparent 100%);
          mask-image: radial-gradient(ellipse at center, black 55%, transparent 100%);
}

@media (max-width: 1080px) {
  .eng-panel { grid-template-columns: 1fr; }
  .eng-image { aspect-ratio: 4 / 3; position: relative; min-height: 0; }
}

@media (max-width: 640px) {
  .engagement { padding: 96px 28px; }
  .eng-tabs {
    grid-template-columns: 1fr;
    border-bottom: 0;
  }

  /* Reset BOTH default and active tab styling on mobile. The desktop
     active rule (.eng-tab.is-active) has higher specificity than a
     bare .eng-tab selector, so we explicitly cover both states. Flat
     list look: bottom border only, no card outline. */
  .eng-tab,
  .eng-tab.is-active {
    border: 0;
    border-bottom: 1px solid var(--sg-rule);
    border-radius: 0;
    bottom: 0;
    background: transparent;
    padding: 18px 0;
    color: var(--sg-ink);
  }

  .eng-tab.is-active {
    border-bottom: 2px solid var(--sg-hero-blue);
    color: var(--sg-hero-blue);
  }

  /* The panel border made a confusing rectangle around the content
     when stacked below a flat-list tab row. Strip it on mobile and
     let the section's own padding carry the page rhythm. */
  .eng-panel {
    border: none;
    grid-template-columns: 1fr;
  }

  .eng-text { padding: 32px 0 24px; }
  .eng-image { aspect-ratio: 4 / 3; min-height: 0; }
}

/* ── §7 Supergrover + Friends ─────────────────────────────── */

.sgf {
  background: var(--sg-cream);
  padding: 120px 56px 140px;
  /* Contain the slide-from-right animation. Without this, the image
     wrap's off-screen start position would create horizontal
     scrollbars at the page level. */
  overflow-x: hidden;
}

.sgf__inner { max-width: 1280px; margin: 0 auto; }

.sgf__label {
  font-family: var(--sg-font-display);
  font-size: 24px;
  font-weight: var(--sg-w-bold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--sg-hero-blue);
  margin: 0 0 32px;
  padding-left: 12px;
  border-left: 3px solid var(--sg-hero-blue);
  line-height: 1;
}

.sgf__intro {
  display: grid;
  /* Slightly more room for the image side now that it bleeds right.
     Text column on the left stays comfortable. */
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr);
  gap: 64px;
  align-items: center;
  margin-bottom: 96px;
}

/* When .scroll-in lives on .sgf__intro, treat the parent as a pure
   intersection trigger — don't run the default fade-up on the
   container itself. Children animate independently via descendant
   selectors below. This pattern is required because the image wrap
   starts off-screen via translateX(110%); if it carried its own
   .scroll-in, IntersectionObserver would never report it as
   intersecting the viewport. */
.sgf__intro.scroll-in,
.sgf__intro.scroll-in.is-visible {
  opacity: 1;
  transform: none;
  transition: none;
}

.sgf__intro-text {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}
.sgf__intro.is-visible .sgf__intro-text {
  opacity: 1;
  transform: translateY(0);
}

.sgf__h2 {
  font-family: var(--sg-font-display);
  font-weight: var(--sg-w-bold);
  font-size: clamp(32px, 4vw, 48px);
  line-height: 1.06;
  letter-spacing: -0.02em;
  color: var(--sg-ink);
  margin: 0 0 24px;
  text-wrap: balance;
}

.sgf__body {
  font-size: 17px;
  line-height: 1.6;
  color: var(--sg-steel);
  margin: 0;
  text-wrap: pretty;
}

/* Image as a crisp, right-bleed frame, Bain-pattern. Image starts at
   the end of the text column and extends to the viewport's right
   edge — no fade, no multiply blend. Left corners rounded; right
   corners flush with the viewport.

   The bleed math has two tiers:
     - On wide viewports (>1392px) the .sgf__inner is capped at 1280px
       centered, so the bleed is the half-gutter past the inner
       (negative margin: 640px - 50vw) plus the 56px section padding.
       Combined into a single negative margin via calc.
     - On narrower viewports (≤1392px) the .sgf__inner is constrained
       by the section's 56px padding, so a flat -56px is enough.
   The min() keeps whichever is more negative. */
.sgf__intro-img-wrap {
  position: relative;
  align-self: stretch;
  overflow: hidden;
  border-radius: 12px 0 0 12px;
  /* 2px gray rule, same color as the tab borders, so the image's
     edge reads as a deliberate frame regardless of the photo's bg
     color. Right border bleeds off the viewport with the wrap, so
     visually you see top + left + bottom only. */
  border: 2px solid var(--sg-rule);
  margin-right: min(-56px, calc(640px - 50vw - 56px));
  background: var(--sg-cream);
  /* Rest state for the slide-in: fully off the right edge.
     translateX(110%) = element's own width + a cushion so the border
     and image fully clear the viewport at the start. Animation fires
     when the parent .sgf__intro gets .is-visible from scroll-in.js. */
  opacity: 0;
  transform: translateX(110%);
  transition:
    opacity 1.1s cubic-bezier(0.16, 1, 0.3, 1),
    transform 1.1s cubic-bezier(0.16, 1, 0.3, 1);
}

.sgf__intro.is-visible .sgf__intro-img-wrap {
  opacity: 1;
  transform: translateX(0);
}

@media (prefers-reduced-motion: reduce) {
  .sgf__intro-text,
  .sgf__intro-img-wrap {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

.sgf__intro-img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center;
}

.sgf__row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-bottom: 20px;
}

.sgf__row--3 {
  grid-template-columns: repeat(3, 1fr);
  max-width: 960px;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 0;
}

.sgf-card {
  background: var(--sg-white);
  border: 1px solid var(--sg-rule);
  border-radius: 12px;
  padding: 32px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.sgf-card:hover {
  transform: scale(1.02);
  border-color: var(--sg-hero-blue);
  box-shadow: 0 8px 32px rgba(26, 86, 219, 0.12);
}

.sgf-card__icon {
  width: 28px;
  height: 28px;
  color: var(--sg-hero-blue);
  display: block;
}
.sgf-card__icon svg { width: 100%; height: 100%; display: block; }

.sgf-card__title {
  font-family: var(--sg-font-display);
  font-weight: var(--sg-w-bold);
  font-size: 18px;
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--sg-ink);
  margin: 0;
}

.sgf-card__body {
  font-size: 15px;
  line-height: 1.55;
  color: var(--sg-steel);
  margin: 0;
  text-wrap: pretty;
}

@media (max-width: 1080px) {
  .sgf__intro { grid-template-columns: 1fr; gap: 40px; }
  /* Reset the bleed on mobile; image returns to the container width
     with both sides rounded equally. */
  .sgf__intro-img-wrap {
    margin-right: 0;
    border-radius: 12px;
    align-self: auto;
  }
  .sgf__row { grid-template-columns: repeat(2, 1fr); }
  .sgf__row--3 { grid-template-columns: repeat(2, 1fr); max-width: none; }
}

@media (max-width: 640px) {
  .sgf { padding: 96px 28px; }
  .sgf__row, .sgf__row--3 { grid-template-columns: 1fr; }
}

/* ── §8 Closing CTA ────────────────────────────────────────── */

/* Same CTA background pattern as the home page: image bleeds through
   a cream-tinted overlay so the section reads atmospheric without
   competing with the headline. Same wash strength as home (.40/.55). */
.approach-close {
  background-color: var(--sg-cream);
  background-image:
    linear-gradient(rgba(243, 240, 234, 0.40), rgba(243, 240, 234, 0.55)),
    url('/img/home-cta-bg.webp');
  background-position: center center, center center;
  background-size: cover, cover;
  background-repeat: no-repeat, no-repeat;
  padding: 140px 56px;
  position: relative;
}

.approach-close__inner {
  max-width: 720px;
  margin: 0 auto;
  text-align: center;
}

.approach-close__h2 {
  font-family: var(--sg-font-display);
  font-weight: var(--sg-w-bold);
  font-size: clamp(28px, 3.4vw, 40px);
  line-height: 1.12;
  letter-spacing: -0.02em;
  color: var(--sg-ink);
  margin: 0 0 24px;
  text-wrap: balance;
}

.approach-close__sub {
  font-size: 17px;
  line-height: 1.6;
  color: var(--sg-steel);
  margin: 0 0 40px;
  text-wrap: pretty;
}

/* Side-by-side button row, matches the home page closing CTA. */
.approach-close__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 12px;
}

@media (max-width: 640px) {
  .approach-close { padding: 96px 28px; }
}

/* ── Scroll-in animation (shared) ─────────────────────────── */

.scroll-in {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.5s ease-out, transform 0.5s ease-out;
}

.scroll-in.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.scroll-in--delay {
  transition-delay: 0.15s;
}

/* Variant: slide in from off-viewport. Used on the SGF image wrap so
   the frame visibly travels in from beyond the right edge as the
   section enters the viewport. translateX(110%) puts the wrap fully
   off-screen (its own width + a bit of cushion). The longer duration
   and the easeOutQuint curve make it feel deliberate: fast start,
   pronounced deceleration into rest. */
.scroll-in.slide-from-right {
  transform: translateX(110%);
  transition:
    opacity 1.1s cubic-bezier(0.16, 1, 0.3, 1),
    transform 1.1s cubic-bezier(0.16, 1, 0.3, 1);
}
.scroll-in.slide-from-right.is-visible {
  transform: translateX(0);
}

@media (prefers-reduced-motion: reduce) {
  .scroll-in {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .scroll-in.slide-from-right {
    transform: none;
  }
}