/* QGB-WEB-PAGE-APPROACH-01: supplied images; all rules stay on Approach. */
#page-approach .approach-hero { min-height: 760px; color: #ffffff; background: #1b2935; }
#page-approach .approach-hero::before { background-image: url('assets/approach/QGB-APPROACH-START-BG-01.png'); filter: none; transform: none; background-position: center; }
#page-approach .approach-hero::after { background: linear-gradient(90deg, rgba(27,41,53,.76), rgba(27,41,53,.56) 48%, rgba(27,41,53,.08) 85%); }
#page-approach .approach-hero .page-hero-inner { width: min(100% - 96px, 1200px); padding: 160px 0 100px; border: 0; border-radius: 0; background: none; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; }
#page-approach .approach-hero h1 { max-width: 660px; font-size: clamp(36px, 4vw, 52px); line-height: 1.08; }
#page-approach .approach-hero .eyebrow { color: #ffffff; font-size: 12px; }
#page-approach .approach-hero p { max-width: 590px; color: rgba(255,255,255,.94); font-size: 18px; }
#page-approach .approach-hero .button-light { background: #ffffff; color: #1b2935; }
#page-approach .qg-section.dark { background: #f7f4ee; color: #1b2935; }
#page-approach .qg-section.dark .qg-kicker { color: #445f71; }
#page-approach #approach-system-heading { font-size: clamp(32px, 4vw, 45px); }
#page-approach .dark .principle-card { position: relative; overflow: hidden; padding: 270px 28px 28px; background: #ffffff; border-color: #d8d0c0; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; }
#page-approach .dark .principle-card:hover { background: #ffffff; }
#page-approach .principle-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 240px; background: center / cover no-repeat; }
#page-approach .principle-card:nth-child(1)::before { background-image: url('assets/approach/QGB-APPROACH-THINKING-SET-01-01.png'); }
#page-approach .principle-card:nth-child(2)::before { background-image: url('assets/approach/QGB-APPROACH-THINKING-SET-01-02.png'); }
#page-approach .principle-card:nth-child(3)::before { background-image: url('assets/approach/QGB-APPROACH-THINKING-SET-01-03.png'); }
#page-approach .dark .card-index { color: #445f71; }
#page-approach .principle-card h3 { margin-top: 20px; font-size: 24px; }
#page-approach .dark .principle-card p { color: #445f71; font-size: 14px; }
#page-approach .final-cta::before { background-image: url('assets/approach/QGB-APPROACH-HERO-01.png'); }
#page-approach .final-cta::after { background: radial-gradient(ellipse at center, rgba(27,41,53,.68), rgba(27,41,53,.34)); }
#page-approach .final-cta h2 { font-size: clamp(34px, 4vw, 45px); }
#page-approach .final-cta p { color: #ffffff; font-size: 17px; }
@media (max-width: 980px) {
  #page-approach .approach-hero .page-hero-inner { width: calc(100% - 72px); }
  #page-approach .approach-hero h1 { max-width: 620px; }
  #page-approach .dark .principle-card { padding: 250px 24px 28px; }
  #page-approach .principle-card::before { height: 220px; }
}
@media (max-width: 640px) {
  #page-approach .approach-hero { min-height: 760px; }
  #page-approach .approach-hero .page-hero-inner { width: calc(100% - 48px); padding: 140px 0 90px; }
  #page-approach .approach-hero::before { background-position: 48% center; }
  #page-approach .approach-hero::after { background: rgba(27,41,53,.62); }
  #page-approach .approach-hero h1 { font-size: clamp(34px, 9vw, 42px); }
  #page-approach .approach-hero p { font-size: 17px; }
  #page-approach .final-cta::before { background-position: 40% center; }
}