/* Gary Henson Group — rebuilt from the Claude Design source (black/ember identity) */
:root{
  --black:#000; --white:#fff;
  --ember:#E34234; --crimson:#BB1733; --ink:#1B2233; --blue:#5079BE;
  --charcoal:oklch(0.16 0.012 55); --bone:oklch(0.95 0.01 55); --bone2:oklch(0.96 0.01 55); --slate:oklch(0.4 0.01 55);
  /* --graphite darkened a third time 2026-08-12 per Jenene, settled at 90% black -- was
     oklch(0.22 0.01 55) = #1E1916 (~78%), then oklch(0.15 0.01 55) = #0F0A07 (~85%). Now
     oklch(0.10 0.01 55) = #050302, ~90% black. Only feeds article body copy, the drop cap,
     and the pull-quote (checked -- no other selectors reference this token), so this is
     scoped to the article page redesign only. This is the approved final value -- went live
     in the same pass as the rest of the article redesign. */
  --graphite:oklch(0.10 0.01 55); --stat-grey:oklch(0.58 0 0);
  --display:'Archivo Black',sans-serif; --nav-font:'Urbanist',sans-serif; --body:'Inter',Helvetica,Arial,sans-serif;
  --max:1400px;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
.tm{font-size:.5em !important;font-weight:400 !important;vertical-align:baseline;position:relative;top:-.5em;letter-spacing:0;margin:0 !important;}
/* .mega-b-tile span is display:inline-flex -- text sitting directly in a flex container gets
   promoted to its own anonymous flex item and cross-axis centered, which broke ™'s vertical-align
   (see .pill-name usage in the Programs mega-menu tiles: wraps the name so ™ stays in normal
   inline flow, unaffected by the outer flex row). */
.pill-name{display:inline;}
body{margin:0;background:var(--black);color:var(--bone2);font-family:var(--body);cursor:none;}
a{color:inherit;text-decoration:none;cursor:none;}
img{max-width:100%;display:block;}
p{margin:0;}
.section{padding:100px clamp(24px,6vw,64px);max-width:var(--max);margin:0 auto;box-sizing:border-box;border-bottom:0.5px solid rgba(255,255,255,0.5);}
.light-page .section, .light-page{border-color:rgba(0,0,0,0.3);}
.h1{font-family:var(--display);font-size:clamp(34px,4.2vw,58px);line-height:1.08;margin:0 0 28px;}
.h1-xl{font-family:var(--display);font-size:clamp(32px,6vw,64px);line-height:1.15;margin:0 0 24px;}
.h2{font-family:var(--display);font-size:clamp(24px,2.8vw,34px);margin:0 0 24px;}
.h2-lg{font-family:var(--display);font-size:clamp(28px,3vw,40px);margin:0;line-height:1.2;}
.h3{font-family:var(--display);font-size:20px;margin:0 0 24px;}
.h2.light{color:#fff;}
.eyebrow{font-size:13px;letter-spacing:0.1em;text-transform:uppercase;opacity:0.6;margin-bottom:16px;font-weight:400;}
.eyebrow.center{text-align:center;}
.eyebrow-pill{display:inline-block;font-size:12px;letter-spacing:0.08em;text-transform:uppercase;color:var(--bone2);border:0.5px solid var(--bone2);border-radius:999px;padding:4px 14px;margin-bottom:16px;}
.eyebrow-pill.dark{color:#000;border-color:#000;}
.lead{font-size:18px;line-height:1.6;opacity:0.75;max-width:720px;margin:0 0 32px;}
.lead-sm{font-size:16px;line-height:1.6;opacity:0.75;margin:0 0 28px;}
.lead-lg{font-size:20px;line-height:1.5;max-width:640px;margin:0;}
.body-p{font-size:16px;line-height:1.7;opacity:0.75;margin:0 0 24px;}
.body-p.center{text-align:center;max-width:680px;margin:0 auto 32px;}
.body-p-lg{font-size:18px;line-height:1.7;opacity:0.85;margin:0 0 24px;}
.muted-p{font-size:14px;opacity:0.65;line-height:1.7;}

/* Cursor */
.ghg-cursor{position:fixed;left:0;top:0;width:36px;height:36px;margin-left:-18px;margin-top:-18px;border-radius:50%;background:#fff;pointer-events:none;z-index:9999;transition:transform .1s ease;mix-blend-mode:difference;}

/* Header */
.ghg-header{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:24px clamp(20px,4vw,64px);position:sticky;top:0;z-index:100;background:transparent;}
.ghg-logo{font-family:var(--display);font-size:clamp(14px,1.6vw,18px);letter-spacing:0.02em;color:#fff;display:flex;align-items:center;}
.ghg-logo img{height:clamp(44px,5.5vw,58px);width:auto;display:block;}
.ghg-nav{display:flex;align-items:center;gap:clamp(10px,1.6vw,28px);}
.ghg-nav>a{position:relative;display:flex;align-items:center;line-height:1;font-family:var(--nav-font);font-size:clamp(16px,1.1vw,20px);font-weight:300;letter-spacing:0.022em;white-space:nowrap;padding-bottom:4px;transition:color .2s ease;color:var(--bone2);}
.ghg-nav>a::after{content:'';position:absolute;left:0;right:0;bottom:0;height:1.5px;background:#fff;transform:scaleX(0);transform-origin:left;transition:transform .35s ease;}
.ghg-nav>a:hover{color:#fff;}
.ghg-nav>a:hover::after{transform:scaleX(1);}
.ghg-nav>a.active{color:#fff;}
.ghg-nav>a.active::after{animation:navLineDraw .5s ease forwards;}
.menu-trigger{position:relative;display:flex;align-items:center;}
.menu-trigger>a{position:relative;display:flex;align-items:center;line-height:1;font-family:var(--nav-font);font-size:clamp(16px,1.1vw,20px);font-weight:300;letter-spacing:0.022em;padding-bottom:4px;color:var(--bone2);}
.menu-trigger>a::after{content:'';position:absolute;left:0;right:0;bottom:0;height:1.5px;background:#fff;transform:scaleX(0);transform-origin:left;transition:transform .35s ease;}
.menu-trigger>a:hover{color:#fff;}
.menu-trigger>a:hover::after{transform:scaleX(1);}
.menu-trigger>a.active{color:#fff;}
.menu-trigger>a.active::after{animation:navLineDraw .5s ease forwards;}
@keyframes navLineDraw{from{transform:scaleX(0);}to{transform:scaleX(1);}}
.menu-gap{position:absolute;top:100%;left:0;right:0;height:24px;}
.mega-menu{position:fixed;top:89px;left:0;width:100vw;background:#000;border-bottom:0.5px solid rgba(255,255,255,0.15);padding:40px clamp(24px,5vw,64px);box-shadow:0 30px 60px rgba(0,0,0,0.5);z-index:200;display:none;flex-wrap:wrap;gap:8px 40px;}
.menu-trigger:hover .mega-menu, .menu-trigger.open .mega-menu{display:flex;}
.menu-trigger.open>a{color:#fff;}
.menu-trigger.open>a::after{animation:navLineDraw .5s ease forwards;}
.menu-big-link{display:flex;align-items:baseline;gap:16px;padding:8px 0;color:#fff;}
.menu-big-link:hover{color:var(--bone2);}
.menu-big-name{font-family:var(--display);font-size:clamp(24px,3.6vw,44px);line-height:1.1;white-space:nowrap;text-transform:uppercase;}
.menu-big-tag{font-size:12px;letter-spacing:0.05em;text-transform:uppercase;opacity:0.45;white-space:nowrap;}
.ghg-cta{background:var(--crimson);color:#fff;padding:16px 32px;border-radius:999px;font-size:14px;font-weight:500;letter-spacing:0.04em;text-transform:uppercase;white-space:nowrap;}
.ghg-cta:hover{background:var(--ember);}

/* Header icons: LinkedIn + email (added 2026-08-06) */
.header-icons{display:flex;align-items:center;gap:16px;}
.header-icon{display:flex;align-items:center;justify-content:center;color:var(--bone2);transition:color .2s ease;}
.header-icon:hover{color:#fff;}
.header-icon svg{width:18px;height:18px;}

/* Learn Center mega-menu: visual category grid (approved design, mega-menu-mockup-B-grid.html, 2026-08-06) */
.mega-b-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:16px;width:100%;}
.mega-b-tile{position:relative;aspect-ratio:4/3;border-radius:10px;overflow:hidden;background-size:cover;background-position:center;display:flex;align-items:flex-end;padding:14px;box-sizing:border-box;}
.mega-b-tile::before{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,0) 40%,rgba(0,0,0,.78) 100%);transition:background .25s ease;}
.mega-b-tile span{position:relative;z-index:1;display:inline-flex;align-items:center;gap:6px;font-family:'Urbanist',sans-serif;font-weight:500;font-size:13px;letter-spacing:.02em;color:#fff;background:#000;border-radius:999px;padding:8px 14px;transition:background .25s ease,color .25s ease;}
.mega-b-tile:hover::before{background:linear-gradient(180deg,rgba(0,0,0,0) 20%,rgba(0,0,0,.6) 100%);}
.mega-b-tile:hover span{background:var(--crimson);color:#fff;}
.mega-b-tile.all{background:#000;border:.75px solid #fff;align-items:center;justify-content:center;padding:0;}
.mega-b-tile.all span{font-size:26px;font-weight:300;color:#fff;background:none;padding:0;border-radius:0;}
.mega-b-tile.all:hover span{background:none;color:#fff;}
/* Programs mega-menu (approved design, mockup v35, 2026-08-07): 3-col wide tiles with chrome
   Canva icons + centered label, distinct from the Learn Center's 5-col grid above. */
.mega-b-grid.programs-grid{grid-template-columns:repeat(3,1fr);}
.mega-b-grid.programs-grid .mega-b-tile{aspect-ratio:16/10;}
.mega-b-grid.programs-grid .mega-b-tile.all span{font-size:22px;font-weight:200;}
.mega-b-tile .mega-b-tile-icon{position:absolute;top:20px;right:20px;z-index:2;width:96px;height:96px;background:#000;border-radius:10px;display:flex;align-items:center;justify-content:center;padding:0;pointer-events:none;}
.mega-b-tile-label{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:2;font-family:var(--nav-font);font-size:22px;font-weight:200;color:#fff;white-space:nowrap;text-align:center;pointer-events:none;text-shadow:0 2px 6px rgba(0,0,0,.55);}
.mega-b-tile .chrome-mask{display:block;width:62px;height:62px;background:linear-gradient(180deg,#ffffff 0%,#aab2bd 20%,#ffffff 40%,#7c828c 58%,#ffffff 76%,#8f95a0 100%);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:contain;mask-size:contain;}

/* Contact mega-menu: quote + book QR code (added 2026-08-06) */
.mega-menu-contact{gap:45px;align-items:center;justify-content:flex-end;flex-wrap:nowrap;min-height:238px;}
.contact-menu-quote{max-width:336px;flex-shrink:0;}
.contact-menu-brand{font-family:var(--display);font-weight:700;text-transform:uppercase;letter-spacing:.02em;font-size:13px;color:var(--ember);margin:0 0 16px;}
.contact-menu-quote blockquote{font-family:'Newsreader',Palatino,"Palatino Linotype","Book Antiqua",Georgia,serif;font-style:normal;font-weight:200;font-size:clamp(18px,2.1vw,28px);line-height:1.35;color:#fff;margin:0 0 11px;}
.contact-menu-quote cite{font-family:'Urbanist',sans-serif;font-style:normal;font-size:9px;letter-spacing:.05em;text-transform:uppercase;color:var(--bone2);}
.contact-menu-qr{display:flex;flex-direction:column;align-items:center;gap:10px;flex-shrink:0;}
.contact-menu-qr img{width:154px;height:154px;border-radius:8px;background:#fff;padding:11px;box-sizing:border-box;}
.contact-menu-qr span{font-family:'Urbanist',sans-serif;font-size:9px;letter-spacing:.03em;color:var(--bone2);text-align:center;max-width:154px;}
.contact-menu-cta{align-self:center;flex-shrink:0;font-size:13px;letter-spacing:.04em;text-transform:uppercase;color:#fff;border:1.5px solid rgba(255,255,255,.4);border-radius:999px;padding:14px 26px;white-space:nowrap;}
.contact-menu-cta:hover{border-color:var(--ember);color:var(--ember);}

/* Buttons */
.btn{display:inline-block;padding:16px 32px;border-radius:999px;font-size:14px;font-weight:500;letter-spacing:0.04em;text-transform:uppercase;}
.btn-primary{background:var(--ember);color:#fff;}
.btn-primary:hover{background:var(--crimson);}
.btn-outline{border:1.5px solid var(--bone2);color:var(--bone2);}
.btn-outline:hover{border-color:var(--ember);color:var(--ember);}
.btn-outline-dark{border:1.5px solid var(--ink);color:var(--ink);}
.btn-outline-dark:hover{border-color:var(--ember);color:var(--ember);}
.btn-lg{padding:20px 44px;font-size:15px;}
.btn-row{display:flex;gap:16px;flex-wrap:wrap;}
.text-link{position:relative;display:inline-block;font-weight:500;padding-bottom:2px;}
.text-link::after{content:'';position:absolute;left:0;right:0;bottom:0;height:1.5px;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform .35s ease;}
.text-link:hover::after{transform:scaleX(1);}

/* Home hero */
.hero-band{position:relative;padding:120px clamp(24px,6vw,64px) 100px;max-width:var(--max);margin:0 auto;box-sizing:border-box;border-bottom:0.5px solid rgba(255,255,255,0.5);background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);background-size:48px 48px;}
.hero-word-line{font-family:"futura-pt-condensed","Oswald",var(--display);font-weight:800;letter-spacing:-0.03em;text-transform:uppercase;font-size:clamp(48px,9.4vw,168px);line-height:0.75;margin:0 0 64px;}
.cycling-word{display:inline-block;color:var(--ember);overflow:hidden;}
.cycling-word.flip-out{animation:heroFlipOut .35s cubic-bezier(.55,0,1,.45) forwards;}
.cycling-word.flip-in{animation:heroFlipIn .35s cubic-bezier(0,.55,.45,1) forwards;}
@keyframes heroFlipOut{0%{transform:translateY(0);opacity:1;}100%{transform:translateY(35%);opacity:0;}}
@keyframes heroFlipIn{0%{transform:translateY(-35%);opacity:0;}100%{transform:translateY(0);opacity:1;}}
.tagline-flash{display:inline-block;color:#fff;animation:taglineFlash 1.6s ease-in-out infinite;}
@keyframes taglineFlash{0%,100%{opacity:1;}50%{opacity:.22;}}
.hero-copy-row{display:flex;justify-content:flex-end;}
.hero-copy-row p{font-size:18px;line-height:1.7;opacity:.8;max-width:640px;}
.hero-arrow-icon{flex-shrink:0;margin-top:6px;margin-right:24px;}

.split-hero{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center;}
.split-hero-img{position:relative;width:100%;aspect-ratio:4/5;border-radius:14px;overflow:hidden;}
.split-hero-img img{width:100%;height:100%;object-fit:cover;}

.logos-section{}
.logo-marquee{width:100%;overflow:hidden;}
.logo-track{display:inline-flex;align-items:center;gap:80px;white-space:nowrap;animation:marquee2 38s linear infinite;}
.logo-chip{height:56px;width:235px;background-size:contain;background-repeat:no-repeat;background-position:center;flex-shrink:0;opacity:.65;}
/* Stahl Companies logo -- bumped up 2026-08-12 per Gary's review, see build.py comment
   at logos_track for why (compact badge mark reads smaller than the wordmark logos next
   to it, not a padding/cropping issue -- so the box itself is sized up instead). */
.logo-chip-lg{height:72px;width:270px;}
@keyframes marquee2{0%{transform:translateX(0);}100%{transform:translateX(-50%);}}

.quote-band{background:var(--bone);color:var(--charcoal);text-align:center;max-width:none;width:100%;}
.quote-mark{font-family:var(--display);font-size:110px;line-height:.5;opacity:.15;margin-bottom:8px;}
.quote-text{font-family:var(--display);font-size:clamp(34px,4.2vw,58px);max-width:820px;margin:0 auto 16px;line-height:1.2;}
.quote-caption{font-size:13px;letter-spacing:.06em;text-transform:uppercase;opacity:.6;}

.what-we-do{display:grid;grid-template-columns:1fr 1.2fr;gap:64px;}
.quad-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;}
.quad-card{position:relative;border-radius:14px;padding:28px;aspect-ratio:1/1;display:flex;flex-direction:column;justify-content:flex-end;overflow:hidden;box-sizing:border-box;background-size:cover;background-position:center;transition:transform .25s cubic-bezier(.34,1.56,.64,1);}
.quad-card::before{content:'';position:absolute;inset:0;background:oklch(0.16 0.012 55/.45);transition:background .2s ease;}

/* "Two ways to get started" card band -- added 2026-08-21 per Jenene, approved 2-card
   version of the homepage's What We Do concept, first used on the About page to replace
   the broken picsum.photos placeholder gallery. Larger than .quad-card since there are
   only 2 of them: headline + one-liner + arrow baked into the tile instead of just a tag. */
.card-band-intro{margin-bottom:40px;}
.big-grid-2{display:grid;grid-template-columns:1fr 1fr;gap:28px;}
.big-card{position:relative;border-radius:18px;padding:40px;aspect-ratio:3/4;display:flex;flex-direction:column;justify-content:flex-end;overflow:hidden;box-sizing:border-box;background-size:cover;background-position:center;transition:transform .3s cubic-bezier(.34,1.56,.64,1);text-decoration:none;color:var(--white);}
.big-card::before{content:'';position:absolute;inset:0;background:linear-gradient(180deg, oklch(0.16 0.012 55/.05) 0%, oklch(0.16 0.012 55/.75) 100%);transition:background .2s ease;}
.big-card:hover{transform:scale(1.015);}
.big-card-tag{position:relative;z-index:2;align-self:flex-start;background:var(--crimson);padding:7px 14px;border-radius:999px;font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:#fff;margin-bottom:18px;}
.big-card-title{position:relative;z-index:2;font-family:var(--display);font-size:clamp(30px,3vw,44px);line-height:1.05;margin:0 0 12px;}
.big-card-desc{position:relative;z-index:2;font-family:var(--body);font-size:16px;line-height:1.5;opacity:.85;max-width:340px;margin:0 0 18px;}
.big-card-arrow{position:relative;z-index:2;font-family:var(--nav-font);font-size:13px;letter-spacing:.04em;font-weight:500;}

/* 3-card variant -- added 2026-08-21, same approved "version 2" card treatment sized down
   for a 3-across row (Method + Programs + Learn Center) after Jenene switched back from the
   2-card version once she saw both live on the About page. Smaller type/padding than
   .big-grid-2's cards since each one gets a third of the row instead of half. */
.big-grid-3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:24px;}
.big-grid-3 .big-card{padding:32px;aspect-ratio:4/5;}
.big-grid-3 .big-card-tag{padding:6px 13px;font-size:11px;margin-bottom:14px;}
.big-grid-3 .big-card-title{font-size:clamp(24px,2.3vw,32px);line-height:1.08;margin:0 0 10px;}
.big-grid-3 .big-card-desc{font-size:14px;margin:0 0 14px;max-width:none;}
.big-grid-3 .big-card-arrow{font-size:12px;}
.quad-card:hover{transform:scale(1.03);}
.quad-card:hover::before{background:oklch(0.16 0.012 55/.2);}
.quad-tag{position:relative;z-index:2;align-self:flex-start;background:var(--crimson);padding:6px 12px;border-radius:999px;font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:#fff;}

.testi-section.dark{background:#000;}
.testi-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;}
.testi-card{background:#1C1C1E;border:0.5px solid rgba(255,255,255,.08);border-radius:14px;padding:36px 32px;min-height:280px;box-sizing:border-box;display:flex;flex-direction:column;justify-content:space-between;transition:border-color .2s ease;}
.testi-card:hover{border-color:rgba(255,255,255,.22);}
.testi-mark{font-family:var(--display);font-size:56px;line-height:.5;color:var(--ember);margin-bottom:20px;}
.testi-quote{font-size:16px;line-height:1.65;margin:0 0 28px;color:#fff;}
.testi-person{display:flex;align-items:center;gap:12px;}
.testi-avatar{width:44px;height:44px;border-radius:50%;background-color:var(--ember);background-size:cover;background-position:center;flex-shrink:0;}
.testi-name{font-weight:600;font-size:14px;color:#fff;}
.testi-title{font-size:13px;color:#fff;opacity:.7;}

.cta-band{text-align:center;background:var(--bone);color:var(--charcoal);max-width:none;width:100%;}
.cta-huge{font-family:var(--display);font-size:clamp(28px,6vw,88px);line-height:1.15;margin:0 0 40px;}

.section-head-row{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:40px;flex-wrap:wrap;gap:12px;}
.article-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:32px;}
.article-card,.learn-card{display:block;color:inherit;}
.article-thumb{position:relative;width:100%;aspect-ratio:1/1;border-radius:14px;overflow:hidden;margin-bottom:16px;transition:transform .25s cubic-bezier(.34,1.56,.64,1);}
.article-thumb img,.article-hero img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;}
.article-card:hover .article-thumb,.learn-card:hover .article-thumb{transform:scale(1.04);}
/* Book-cover card thumbnail -- added 2026-08-21 per Jenene: Must Reads cards (learn.html grid
   and "Read More Like This" related-grids) show the real book cover on the same computed
   solid-color background as the in-article .book-cover-band, instead of a generic stock hero
   photo. Background color set inline per-book (style="background:#XXXXXX"), same values used
   for .book-cover-band. */
.article-thumb.book-cover-thumb{display:flex;align-items:center;justify-content:center;padding:12%;box-sizing:border-box;}
.article-thumb.book-cover-thumb img{position:static;width:auto;height:auto;max-width:100%;max-height:100%;object-fit:contain;box-shadow:0 10px 24px oklch(0 0 0/.35);border-radius:4px;}
.article-cat{display:inline-block;font-size:12px;letter-spacing:.06em;text-transform:uppercase;margin-bottom:8px;color:#fff;background:var(--ember);border-radius:999px;padding:4px 12px;}
.article-title{font-family:'Archivo',sans-serif;font-weight:500;font-size:17px;margin-bottom:6px;}
.article-date{font-size:13px;opacity:.5;}
/* Home's "From the Learn Center" cards, restyled to match the actual Learn Center page's
   .learn-v2 card treatment (Jenene, 2026-08-07) -- same layout/typography, colors adapted
   since Home is dark-page and Learn Center is light-page. */
.articles-preview .article-grid{gap:56px 40px;}
.articles-preview .article-thumb{aspect-ratio:4/5;border-radius:10px;margin-bottom:22px;}
.articles-preview .article-cat{background:#fff;color:#000;border:1px solid rgba(255,255,255,.15);margin-bottom:14px;}
.articles-preview .article-title{font-family:'Newsreader',Palatino,"Palatino Linotype","Book Antiqua",Georgia,serif;font-weight:300;font-size:24px;line-height:1.2;letter-spacing:0;color:#fff;margin-bottom:16px;}
.articles-preview .article-desc{font-family:var(--body);font-size:16px;line-height:1.6;opacity:.65;color:#fff;margin:0 0 16px;}
.articles-preview .article-date{display:block;margin-top:16px;}

.marquee{width:100%;overflow:hidden;white-space:nowrap;border-top:1px solid var(--slate);border-bottom:1px solid var(--slate);padding:8px 0;}
.marquee-track{display:inline-block;animation:marquee2 18s linear infinite;font-family:var(--display);font-size:clamp(30px,8.25vw,135px);line-height:1;padding-right:48px;}
.marquee-sm .marquee-track{font-size:clamp(21px,3.75vw,48px);animation-duration:20s;}
.marquee.slow .marquee-track{animation-duration:36s;}
.marquee-sm.slow .marquee-track{animation-duration:40s;}
.marquee.light-font .marquee-track{font-family:var(--nav-font);font-weight:500;}
.marquee-icon{display:inline-block;width:.62em;height:.62em;margin:0 .12em -.06em .12em;background-size:contain;background-repeat:no-repeat;background-position:center;vertical-align:middle;animation:marqueeIconSpin 6s linear infinite;}
@keyframes marqueeIconSpin{from{transform:rotate(0deg);}to{transform:rotate(360deg);}}

/* FAQ */
/* Light background added 2026-08-12 per Jenene, matching the same var(--bone)/var(--charcoal)
   light-section treatment already used for .who-we-work-with. .faq-q/.faq-a-inner already
   use color:inherit/opacity, so they pick up the dark text automatically with no further
   changes needed. Made full-bleed 2026-08-21 per Jenene (see .who-we-work-with comment
   above for the same change/reasoning). */
.faq-section{background:var(--bone);color:var(--charcoal);max-width:none;width:100%;}
.faq-list{display:flex;flex-direction:column;}
.faq-item{border-top:0.5px solid rgba(255,255,255,.3);}
.light-page .faq-item,.faq-section .faq-item{border-top-color:rgba(0,0,0,.2);}
.faq-q{all:unset;display:flex;justify-content:space-between;align-items:center;gap:24px;padding:24px 0;cursor:pointer;width:100%;box-sizing:border-box;font-size:18px;color:inherit;}
.faq-plus{font-size:22px;flex-shrink:0;transition:transform .2s ease;}
.faq-item.open .faq-plus{transform:rotate(45deg);}
.faq-a{max-height:0;overflow:hidden;transition:max-height .25s ease;}
.faq-item.open .faq-a{max-height:240px;}
.faq-a-inner{font-size:17px;line-height:1.6;opacity:.75;padding-bottom:20px;max-width:700px;}

/* Program pages */
.light-page{background:#fff;color:#333;}
.program-hero{max-width:var(--max);margin:0 auto 50px;padding:96px clamp(24px,6vw,64px) 0;}
.program-hero .eyebrow-pill{margin-bottom:20px;}
.program-hero .h1-xl{margin-bottom:24px;}
.program-hero .lead{margin-bottom:52px;}
.program-banner{position:relative;width:100%;max-width:var(--max);margin:0 auto 64px;aspect-ratio:21/9;border-radius:14px;overflow:hidden;background-size:cover;background-position:center;}
.banner-overlay{position:absolute;inset:0;background:rgba(11,18,32,.5);}
.program-block{max-width:var(--max);margin:0 auto;padding:64px clamp(24px,6vw,64px);border-top:0.5px solid rgba(0,0,0,.3);}
.program-block .h2, .program-block .fit-label{max-width:820px;}
.fit-label{font-weight:600;font-size:16px;margin-bottom:16px;}
.fit-list .bullet-row{border-top:0.5px solid rgba(0,0,0,.2);padding:12px 0;}
.bullet-list{}
.bullet-row{display:flex;gap:12px;padding:10px 0;}
.bullet-dot{color:var(--ember);flex-shrink:0;font-size:20px;line-height:1;}
.case-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;}
.case-card{background:var(--ember);border-radius:14px;padding:32px;color:#fff;}
.case-num{font-family:var(--display);font-size:13px;opacity:.7;margin-bottom:14px;}
.case-card h3{font-family:var(--display);font-size:18px;margin:0 0 10px;}
.case-card p{font-size:14px;opacity:.9;line-height:1.6;}
.phase-row{padding:32px 0;border-top:0.5px solid rgba(0,0,0,.2);}
.phase-head{display:flex;gap:16px;align-items:baseline;margin-bottom:12px;}
.phase-num{font-family:var(--display);font-size:14px;opacity:.4;}
.phase-row h3{font-family:var(--display);font-size:20px;margin:0;}
.phase-row p{font-size:15px;opacity:.75;line-height:1.6;margin:0 0 16px;}
.phase-item{font-size:14px;opacity:.65;line-height:1.8;}
.phase-item .dot{color:var(--ember);}
.glance-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:40px;margin-bottom:40px;}
.glance-head{font-weight:600;font-size:15px;margin-bottom:14px;}
.glance-list .bullet-row{font-size:14px;opacity:.7;padding:0;line-height:1.8;}
.glance-meta{display:flex;gap:64px;flex-wrap:wrap;}
.outcome-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;}
.outcome-card{display:flex;gap:16px;padding:20px;border:1px solid rgba(0,0,0,.15);border-radius:14px;font-size:15px;line-height:1.5;}
.outcome-num{font-family:var(--display);color:var(--ember);flex-shrink:0;}
.cta-final{text-align:center;}

/* Programs index */
.dark-page{background:var(--charcoal);color:var(--bone2);}
.programs-intro{padding-bottom:64px;}
.program-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px;}
.program-card{position:relative;background:#1C1C1E;border:0.5px solid rgba(255,255,255,.08);border-radius:14px;padding:40px;display:block;transition:border-color .2s ease;}
.program-card:hover{border-color:rgba(255,255,255,.22);}
.program-card-icon{position:absolute;top:24px;right:24px;width:56px;height:56px;display:flex;align-items:center;justify-content:center;pointer-events:none;}
.program-card-icon .chrome-mask{display:block;width:44px;height:44px;background:linear-gradient(180deg,#ffffff 0%,#aab2bd 20%,#ffffff 40%,#7c828c 58%,#ffffff 76%,#8f95a0 100%);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:contain;mask-size:contain;filter:drop-shadow(0 3px 8px rgba(0,0,0,.5));}
/* Individual program page hero banner icon (same chrome mark as index cards + mega-menu, 2026-08-08) */
.program-banner-icon{position:absolute;bottom:24px;left:24px;z-index:2;width:96px;height:96px;background:#000;border-radius:10px;display:flex;align-items:center;justify-content:center;pointer-events:none;}
.program-banner-icon .chrome-mask{display:block;width:62px;height:62px;background:linear-gradient(180deg,#ffffff 0%,#aab2bd 20%,#ffffff 40%,#7c828c 58%,#ffffff 76%,#8f95a0 100%);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:contain;mask-size:contain;}
.program-tag{font-size:12px;opacity:.55;letter-spacing:.06em;text-transform:uppercase;margin-bottom:10px;}
.program-card h3{font-family:var(--display);font-size:26px;margin:0 0 14px;}
.program-card p{font-size:15px;opacity:.75;line-height:1.6;margin:0 0 20px;}

/* Method page */
.method-intro{display:grid;grid-template-columns:1fr 1.2fr;gap:64px;align-items:start;padding-top:100px;}
.method-phases{background:#fff;color:#333;}
.method-phases-inner{padding:0 clamp(24px,6vw,64px) 96px;max-width:var(--max);margin:0 auto;box-sizing:border-box;}
.method-row{padding:48px 0;border-top:0.5px solid rgba(0,0,0,.15);display:grid;grid-template-columns:1fr 1.2fr;gap:64px;align-items:start;}
.method-num{font-family:var(--display);font-size:14px;color:var(--ember);margin-bottom:14px;}
.method-row h3{font-family:var(--display);font-size:26px;margin:0;}
.method-cta{text-align:center;padding:96px 0 0;}

/* About page */
.about-hero{display:grid;grid-template-columns:1fr 1.2fr;gap:64px;align-items:start;padding-top:100px;}
.brand-quote{font-family:var(--display);font-weight:700;text-transform:uppercase;letter-spacing:.02em;font-size:15px;color:var(--ember);margin:14px 0 0;}
.mission-line{font-size:22px;line-height:1.6;margin:0 0 32px;}
.founder-section{border-top:0.5px solid rgba(255,255,255,.5);}
.founder-grid{display:grid;grid-template-columns:1.2fr 1fr;gap:64px;align-items:start;}
.founder-photo{position:relative;width:100%;border-radius:14px;overflow:hidden;}
.founder-name{margin-top:16px;font-size:20px;font-weight:500;}
.founder-title{font-size:14px;opacity:.6;margin-top:2px;}
/* Changed 2026-08-21 per Jenene: this and .faq-section were deliberately left content-width
   (not full-bleed like .quote-band/.cta-band) on 2026-08-12 -- see the old comment that used
   to sit above .faq-section. She wants both to run the full width of the site after all, so
   both now use the same max-width:none;width:100% override .quote-band/.cta-band already use. */
.who-we-work-with{background:var(--bone);color:var(--charcoal);padding-top:0;max-width:none;width:100%;}
.values-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:oklch(0.16 0.012 55/.15);}
.value-card{background:var(--bone);padding:40px;}
.value-title{font-family:var(--display);font-size:22px;margin-bottom:12px;}
.value-body{font-size:15px;line-height:1.5;opacity:.75;max-width:420px;}
.gallery-section{border-bottom:0;}
.gallery-track{display:flex;gap:24px;overflow-x:auto;padding-bottom:16px;}
.gallery-photo{flex:0 0 340px;aspect-ratio:4/3;background-size:cover;background-position:center;border-radius:4px;}

/* Playbook */
.playbook-page .section{padding-top:96px;}
.playbook-hero{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center;margin-bottom:0;border-bottom:0;padding-bottom:0;}
.playbook-cover{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:14px;}
.chapter-list{max-width:760px;}
.chapter-row{display:flex;gap:20px;padding:20px 0;border-top:1px solid var(--slate);}
.chapter-num{font-family:var(--display);opacity:.4;font-size:14px;min-width:28px;}
.chapter-title{font-weight:600;font-size:16px;margin-bottom:4px;}
.chapter-desc{font-size:14px;opacity:.6;}

/* Media kit */
.logo-demo-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;margin-bottom:12px;}
.logo-demo{padding:48px;display:flex;align-items:center;justify-content:center;gap:16px;}
.logo-demo.dark{border:1px solid var(--slate);}
.logo-demo.light{background:var(--bone);color:var(--charcoal);}
.logo-mark{width:32px;height:32px;border-radius:50%;background:conic-gradient(var(--blue),var(--crimson),var(--ember),var(--blue));display:inline-block;}
.logo-word{font-family:var(--display);font-size:22px;}
.swatch-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:64px;}
.swatch-box{aspect-ratio:1/1;border-radius:6px;}
.swatch-name{font-size:13px;font-weight:600;margin-top:10px;}
.swatch-hex{font-size:12px;opacity:.5;}
.press-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;}
.press-grid img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:14px;}

/* Learn */
.learn-hero{padding-top:96px;padding-bottom:0;border-bottom:none;}
.filter-row{display:flex;flex-wrap:wrap;gap:10px;margin:32px 0 48px;}
.filter-chip{all:unset;font-size:13px;padding:8px 16px;border-radius:999px;border:1px solid rgba(0,0,0,.25);cursor:pointer;}
.filter-chip.active,.filter-chip:hover{background:var(--ember);color:#fff;border-color:var(--ember);}
.learn-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:32px;}

.learn-feature{display:grid;grid-template-columns:1.3fr 1fr;gap:48px;align-items:center;color:inherit;}
.learn-feature-thumb{width:100%;aspect-ratio:4/3;border-radius:16px;overflow:hidden;background-size:cover;background-position:center;}
.learn-feature-copy .article-cat{background:var(--crimson);}
.learn-cat-row{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:24px;}
.learn-cat-card{display:block;color:inherit;}
.learn-cat-card .article-thumb{aspect-ratio:4/3;}

/* Learn Center v2 -- Nike "The Record" structure, confirmed 2026-08-06: wider container,
   10px corners, scroll-crossfade photo hero (masthead fades into the featured story as you
   scroll), Palatino on card/story titles, white/black meta tags. Scoped to .learn-v2 (set on
   the Learn Center page's <main>) so it doesn't touch article-thumb/learn-card styling used
   elsewhere on the site. */
.learn-v2.section,.learn-v2 .section{padding-left:clamp(20px,2.6vw,48px);padding-right:clamp(20px,2.6vw,48px);max-width:1680px;}

.nike-hero-wrap{position:relative;height:180vh;margin-bottom:64px;}
.nike-hero-pin{position:sticky;top:0;height:100vh;overflow:hidden;}
.nike-hero-bg{position:absolute;inset:0;background-size:cover;background-position:center;}
/* Full-quality JS crossfade slideshow (replaces the old animated-GIF background --
   GIF's 256-color palette + the small size needed to keep file size sane looked soft
   when stretched full-bleed; layered real photos + a CSS opacity fade look crisp).
   Real <img> elements instead of CSS background-image: Safari in particular composites
   background-image opacity transitions on the CPU (slow/janky) but handles <img> opacity
   transitions on the GPU (cheap). will-change hints the browser to promote each layer to
   its own compositor layer up front instead of guessing mid-transition. */
.nike-hero-bg-layer{position:absolute;inset:0;width:100%;height:100%;z-index:1;object-fit:cover;object-position:center;opacity:0;transition:opacity 1.8s ease;will-change:opacity;}
.nike-hero-bg-layer.active{opacity:1;}
.nike-hero-overlay{position:absolute;inset:0;z-index:2;background:linear-gradient(180deg,rgba(0,0,0,.68) 0%,rgba(0,0,0,.5) 45%,rgba(0,0,0,.75) 100%);}
.nike-hero-masthead{position:absolute;inset:0;z-index:3;opacity:1;transition:opacity .3s ease;will-change:opacity;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;color:#fff;padding:0 24px;}
.nike-hero-masthead h1{font-family:'Newsreader',Palatino,"Palatino Linotype","Book Antiqua",Georgia,serif;font-style:italic;font-weight:300;text-transform:uppercase;letter-spacing:0.14em;font-size:clamp(44px,8.5vw,140px);line-height:0.95;margin:0;color:#fff;}
.nike-hero-masthead p{font-family:'Newsreader',Palatino,"Palatino Linotype","Book Antiqua",Georgia,serif;font-style:italic;font-weight:300;font-size:18px;opacity:1;color:#fff;margin:18px 0 0;}
/* Default state (before app.js has measured layout and taken over via inline opacity):
   masthead fully visible, story fully hidden and non-interactive. Without this baseline,
   the two blocks could briefly render simultaneously at partial opacity and look muddy/
   overlapping -- the "text behind a transparent overlay" bug. */
.nike-hero-story{position:absolute;left:0;right:0;bottom:0;z-index:4;opacity:0;pointer-events:none;transition:opacity .3s ease;will-change:opacity;padding:64px clamp(24px,4vw,64px);color:#fff;}
.nike-hero-story.story-active{pointer-events:auto;}
.nike-hero-story .article-cat{background:#fff;color:#000;}
.nike-hero-story h2{font-family:'Newsreader',Palatino,"Palatino Linotype","Book Antiqua",Georgia,serif;font-weight:300;letter-spacing:-0.02em;font-size:clamp(30px,4vw,58px);line-height:1.05;margin:16px 0 16px;max-width:820px;color:#fff;}
.nike-hero-story p{font-family:var(--body);font-weight:300;font-size:17px;line-height:1.6;opacity:1;color:#fff;max-width:620px;margin:0 0 24px;}
.nike-hero-story .btn{background:#fff;color:var(--charcoal);}

.learn-v2 .section-label{font-family:'Urbanist',sans-serif;font-weight:500;font-size:26px;letter-spacing:-0.01em;margin:0 0 32px;color:var(--charcoal);}

/* Spacing/type scale measured off Nike's own card pattern (about.nike.com/en/magazine,
   2026-08-06): 13px category label, 8px to a 26px title, 12px to a 16px description.
   Sized up further here per Jenene's request for a cleaner, airier feel -- title bigger
   than Nike's, description bigger too, and more breathing room between every element. */
.learn-v2 .article-thumb{margin-bottom:22px;}
.learn-v2 .article-cat{margin-bottom:14px;background:#fff;color:#000;border:1px solid rgba(0,0,0,.12);}
.learn-v2 .learn-cat-card .article-thumb,
.learn-v2 .learn-card .article-thumb{aspect-ratio:4/5;border-radius:10px;}
.learn-v2 .learn-cat-card .article-title,
.learn-v2 .learn-card .article-title{font-family:'Newsreader',Palatino,"Palatino Linotype","Book Antiqua",Georgia,serif;font-weight:300;font-size:24px;line-height:1.2;letter-spacing:0;color:var(--charcoal);margin-bottom:16px;}
.learn-v2 .learn-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:56px 40px;}
.learn-v2 .article-desc{font-family:var(--body);font-size:16px;line-height:1.6;opacity:.65;margin:0 0 16px;}
.learn-v2 .article-date{display:block;margin-top:16px;}
.learn-v2 .filter-row{margin:0 0 48px;}
@media (max-width:900px){
  .learn-v2 .drives-layout{grid-template-columns:1fr;}
  .learn-v2 .drives-right-grid{grid-template-columns:1fr 1fr;}
}

/* Article -- Nike-magazine styled, matching the Learn Center's wide container and
   Palatino/Inter type pairing (confirmed against about.nike.com/en/magazine article
   pages, 2026-08-06). Full-bleed photo hero with a white serif title over a dark
   overlay, then a wide shell around the body copy, a large pull-quote, and a sourced
   stat callout. */
/* Side padding increased +20px 2026-08-12 per Jenene, then +30px more the same day for
   even more breathing room (total +50px over the original clamp) -- applied to both the
   body-copy shell and the hero content band below so the extra margin reads consistently
   top to bottom, not just in one section. */
.article-v2.section,.article-v2 .section{padding-left:clamp(70px,2.6vw,98px);padding-right:clamp(70px,2.6vw,98px);max-width:1680px;}
.article-hero{position:relative;width:100%;height:70vh;min-height:440px;overflow:hidden;margin-bottom:0;}
.article-hero-overlay{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.35) 0%,rgba(0,0,0,.2) 45%,rgba(0,0,0,.65) 100%);}
.article-hero-content{position:absolute;left:0;right:0;bottom:0;padding:64px clamp(74px,4vw,114px);max-width:1680px;margin:0 auto;box-sizing:border-box;}
.article-hero-content .article-cat{background:#fff;color:#000;}
/* Article H1 revised again 2026-08-12 per Jenene's clarification: the "too wide" note was
   about this title, not the pull-quote below. Left-aligned (was already the default, now
   explicit) and capped at 50% of the hero section's width instead of the previous
   1100px/~65% cap. */
.article-hero-content h1{font-family:'Newsreader',Palatino,"Palatino Linotype","Book Antiqua",Georgia,serif;font-weight:300;letter-spacing:-0.01em;font-size:clamp(32px,5vw,68px);line-height:1.05;color:#fff;margin:16px 0 0;max-width:50%;text-align:left;}
.article-body-section{padding-top:56px;max-width:820px;margin:0 auto;}
.article-meta{font-size:12px;letter-spacing:.06em;text-transform:uppercase;margin:20px 0 16px;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px;}
.buy-on-amazon-btn{padding:10px 20px;font-size:12px;letter-spacing:.04em;}
.article-cat-inline{color:var(--blue);}
.article-date-inline{opacity:.55;}
/* Book cover thumbnail band -- added 2026-08-21 per Jenene, Must Reads only.
   Background is the cover's own computed dominant color (automated per-book, not hand-picked),
   so this stays "easy every time" for the scheduled task -- no manual color picking per article. */
.book-cover-band{display:flex;align-items:center;gap:28px;padding:28px;border-radius:16px;margin:8px 0 32px;}
.book-cover-band img{width:120px;height:auto;border-radius:6px;box-shadow:0 12px 28px oklch(0 0 0/.35);flex-shrink:0;display:block;}
.book-cover-band-text{min-width:0;}
.book-cover-band-label{font-family:var(--nav-font);font-size:11px;letter-spacing:.08em;text-transform:uppercase;opacity:.65;margin:0 0 6px;}
.book-cover-band-title{font-family:var(--display);font-size:clamp(18px,2vw,24px);line-height:1.15;margin:0 0 4px;}
.book-cover-band-author{font-family:var(--body);font-size:14px;opacity:.75;margin:0;}
.book-cover-band.light-text{color:#fff;}
.book-cover-band.dark-text{color:#1a1a1a;}
@media (max-width:600px){.book-cover-band{flex-direction:column;align-items:flex-start;}}
/* Body paragraph revised 2026-08-12 per Jenene: +6px over the sitewide .body-p-lg
   default (18px -> 24px), light weight (300, the lightest Inter weight this site loads),
   and line-height opened up from 1.7 to 1.8 for the same easy-on-the-eyes reading feel
   she pointed out on Nike's magazine body copy. Scoped to .article-body-section only --
   .body-p-lg is shared with Programs/About/etc. and shouldn't change there. */
.article-body-section .body-p-lg{margin-bottom:28px;font-size:24px;font-weight:300;line-height:1.8;color:var(--graphite);}
/* Drop cap added 2026-08-12 per Jenene, matching the magazine feel at
   about.nike.com/en/magazine -- sits on the opening paragraph only via ::first-letter
   (no markup change needed per article). Color matched to --graphite 2026-08-12 so it
   reads as part of the same dark-grey text block as the paragraph, not near-black.
   Re-tuned 2026-08-12 (second pass) -- the original 76px/0.72 sizing was set before the
   paragraph itself got bigger (18px->24px) and looser (1.7->1.8 line-height), so the
   float box no longer matched the surrounding line height and the letter sat too high,
   floating above the first line instead of sitting flush with it. Sized to roughly span
   two paragraph lines at the new metrics (24px * 1.8 * 2 =~ 86px) and switched to a more
   standard line-height so the glyph's own vertical centering isn't fighting the float box.
   Third pass 2026-08-12 -- Jenene flagged it's still sitting too high after the second-pass
   fix. Newsreader's own internal ascender space above the cap-height means the glyph still
   floats above the first line even with line-height tightened, so pushed it down further
   with more top padding (8px -> 22px) rather than continuing to fight it via line-height/
   font-size alone.
   Fourth pass 2026-08-12 -- the 22px padding-top fixed the vertical position but padding
   counts toward the float's own height, so it pushed the float's total height (padding +
   line box) past the 2-line threshold (~86px at these paragraph metrics) into 3-line
   territory -- the paragraph started wrapping a 3rd, mostly-empty indented line before
   clearing the float, which read as "extra space below" the letter (not what Nike's tight
   3-line wrap does). Backed padding-top down to 14px so the float's total height sits just
   under the 2-line mark again (clean 2-line wrap, no orphaned 3rd line), which still reads
   noticeably lower/flusher than the original 8px. */
.article-body-section .body-p-lg:first-of-type::first-letter{font-family:'Newsreader',Palatino,"Palatino Linotype","Book Antiqua",Georgia,serif;font-weight:600;font-size:84px;line-height:0.85;float:left;padding:14px 8px 0 0;color:var(--graphite);}
/* Pull-quote revised again 2026-08-12 per Jenene's clarification: the 700px max-width
   from last pass is reverted (that "too wide" note was actually about the H1, not this) --
   back to unconstrained, matching the body column. Line-height: the 30% cut to 0.98 (from
   1.4) turned out to be too tight -- split the difference at 1.2, more breathing room than
   0.98 without going back to the looser 1.4. Color still --graphite, darkened at the token
   level below. */
.pull-quote{font-family:'Newsreader',Palatino,"Palatino Linotype","Book Antiqua",Georgia,serif;font-weight:300;font-size:clamp(48px,6.2vw,78px);line-height:1.2;letter-spacing:-0.01em;color:var(--graphite);margin:64px 0;}
/* Quotation marks added 2026-08-12 per Jenene, via generated content rather than editing
   every article's quote text -- real curly quotes (U+201C/U+201D), not straight ones. */
.pull-quote::before{content:"\201C";}
.pull-quote::after{content:"\201D";}
.stat-callout{display:flex;align-items:center;gap:24px;flex-wrap:wrap;margin:48px 0;padding:32px 0;border-top:1px solid rgba(0,0,0,.15);border-bottom:1px solid rgba(0,0,0,.15);}
/* Stat number switched off --slate 2026-08-12 per Jenene -- she read that mid-grey (hue
   55, warm-leaning) as brownish at this large display size. Now uses the new --stat-grey
   token: same family as the other greys on this page but hue-neutral (chroma 0, no warm
   cast) and lighter (0.58 vs slate's 0.4). */
.stat-num{font-family:var(--display);font-size:clamp(36px,4.4vw,56px);line-height:1;color:var(--stat-grey);flex-shrink:0;}
.stat-label{font-family:var(--body);font-size:16px;line-height:1.6;opacity:.8;max-width:520px;margin:0;}
.stat-source{opacity:1;font-weight:500;border-bottom:1px solid currentColor;padding-bottom:1px;white-space:nowrap;}

/* "Read More Like This" banner, rebuilt again 2026-08-12 per Jenene: dropped the carousel
   in favor of matching the exact grid used on the filtered category views of learn.html
   (the ".learn-v2 .learn-grid"/".learn-card" combo -- 3-col grid, 4:5 photo tiles,
   Newsreader 300/24px titles, white/black category pill, and the .article-desc teaser
   left completely untouched). Adding "learn-v2" to this section's class list is enough to
   inherit all of that styling as-is -- no new card CSS needed, just the section spacing. */
.related-articles-section{padding-top:64px;padding-bottom:80px;border-top:0.5px solid rgba(0,0,0,.15);}
.related-articles-section .eyebrow{margin-bottom:24px;}

/* Outbound body-copy citation links: visible "leaving the site" icon (WCAG G201 advance
   warning), decorative and aria-hidden since the accessible warning is the .sr-only text
   that follows it. Screen readers don't reliably announce title attributes, so we don't
   rely on one -- this pairs a visual cue with real screen-reader text instead. */
/* Citation links switched from inherit (dark grey body text) to --slate (mid-grey)
   2026-08-12 per Jenene, so they read as a distinct, quieter link color instead of
   blending into the paragraph. */
.body-p-lg a{color:var(--slate);text-decoration:underline;text-decoration-color:rgba(0,0,0,.3);text-underline-offset:2px;}
.ext-icon{font-size:.75em;margin-left:2px;opacity:.6;}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;}

/* Footer */
.ghg-footer{padding:100px clamp(24px,6vw,64px) 40px;border-top:1px solid var(--slate);max-width:var(--max);margin:0 auto;box-sizing:border-box;}
.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:48px;}
.footer-brand{font-family:var(--display);font-size:17px;margin-bottom:16px;color:var(--ember);}
.footer-tagline{font-family:var(--display);font-weight:700;text-transform:uppercase;letter-spacing:.02em;font-size:12px;color:var(--ember);margin:-8px 0 14px;}
.footer-blurb{font-size:14px;line-height:1.6;max-width:320px;opacity:.65;}
/* Footer column headers switched from --ember (red) to --slate (mid-grey) 2026-08-12 per
   Jenene -- brand name/tagline directly above stay red, this was just the section labels
   ("Company", "Programs", etc). */
.footer-head{font-size:12px;opacity:.9;text-transform:uppercase;letter-spacing:.06em;margin-bottom:16px;color:var(--slate);}
.ghg-footer a{display:flex;flex-direction:column;gap:10px;font-size:14px;margin-bottom:0;}
.ghg-footer > .footer-grid > div > a{margin-bottom:10px;}
.footer-contact{font-size:14px;line-height:1.8;opacity:.65;}
.footer-qr{display:flex;flex-direction:column;align-items:flex-start;gap:8px;margin-top:16px;}
.footer-qr img{width:90px;height:90px;border-radius:8px;background:#fff;padding:8px;box-sizing:border-box;}
.footer-qr span{font-family:'Urbanist',sans-serif;font-size:12px;line-height:1.4;opacity:.65;max-width:140px;}
.footer-sig{text-align:center;padding:40px 0 0;}
.footer-sig img{height:60px;width:auto;opacity:.8;margin:0 auto;}
.footer-copy{opacity:.4;font-size:12px;padding:20px 0 0;text-align:center;}

/* Contact page (2026-08-08) */
.contact-hero{padding-bottom:0;border-bottom:none;}
.contact-body{display:grid;grid-template-columns:1fr 340px;gap:64px;align-items:start;padding-top:0;}
.contact-form{display:flex;flex-direction:column;gap:22px;}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:22px;}
.form-field{display:flex;flex-direction:column;gap:8px;}
.form-field label{font-size:13px;font-weight:500;letter-spacing:.02em;}
.form-field input,.form-field select,.form-field textarea{font-family:var(--body);font-size:15px;padding:13px 16px;border:1px solid rgba(0,0,0,.2);border-radius:8px;background:#fff;color:#222;}
.form-field textarea{resize:vertical;min-height:120px;}
.form-field input:focus,.form-field select:focus,.form-field textarea:focus{outline:none;border-color:var(--ember);}
.form-checkbox{display:flex;align-items:center;gap:10px;font-size:14px;opacity:.75;}
.form-checkbox input{width:16px;height:16px;}
.contact-form .btn{align-self:flex-start;margin-top:8px;border:none;cursor:pointer;}
.contact-sidebar{display:flex;flex-direction:column;gap:36px;padding:32px;background:var(--bone);border-radius:14px;}
.contact-sidebar-quote{font-family:'Newsreader',Palatino,"Palatino Linotype","Book Antiqua",Georgia,serif;font-weight:300;font-size:20px;line-height:1.4;margin:0;color:var(--charcoal);}
.contact-sidebar-quote cite{display:block;margin-top:10px;font-family:'Urbanist',sans-serif;font-style:normal;font-size:11px;letter-spacing:.05em;text-transform:uppercase;opacity:.6;}
.contact-sidebar-info{display:flex;flex-direction:column;gap:10px;}
.contact-sidebar-info a{font-size:15px;color:var(--charcoal);}
.contact-sidebar-qr{display:flex;align-items:center;gap:14px;}
.contact-sidebar-qr img{width:64px;height:64px;border-radius:6px;flex-shrink:0;}
.contact-sidebar-qr span{font-size:12px;opacity:.65;line-height:1.4;}

/* Responsive */
@media (max-width:900px){
  .split-hero,.what-we-do,.method-intro,.method-row,.about-hero,.founder-grid,.playbook-hero,.program-grid,.case-grid,.glance-grid,.footer-grid,.learn-feature,.contact-body{grid-template-columns:1fr;}
  .article-grid,.learn-grid,.testi-grid,.quad-grid,.values-grid,.outcome-grid,.swatch-grid,.learn-cat-row,.big-grid-3{grid-template-columns:repeat(2,1fr);}
  .ghg-nav{gap:14px;flex-wrap:wrap;}
  .hero-word-line{font-size:clamp(40px,12vw,80px);}
}
@media (max-width:600px){
  .article-grid,.learn-grid,.testi-grid,.quad-grid,.values-grid,.outcome-grid,.swatch-grid,.press-grid,.logo-demo-grid,.learn-cat-row,.big-grid-2,.big-grid-3{grid-template-columns:1fr;}
  .ghg-header{flex-wrap:wrap;}
  .form-row{grid-template-columns:1fr;}
}