/* ================= DESIGN TOKENS (geeseproject.com) ================= */
  :root{
  /* Motion. Two curves and three durations, used everywhere — a shared
     vocabulary is what stops transitions feeling arbitrary.
     --ease-out settles decisively without the springy overshoot that reads
     as decoration; --ease-io is for things that move and come back. */
  --ease-out:cubic-bezier(.22,1,.36,1);
  --ease-io:cubic-bezier(.65,0,.35,1);
  --dur-fast:150ms;   /* presses, focus, colour */
  --dur:260ms;        /* hover, lifts, shadows */
  --dur-slow:520ms;   /* entrances */

  /* Spacing scale on a 4px rhythm. Before this the stylesheet carried 39
     distinct padding values, 28 margin and 21 gap — mostly near-duplicates
     (22/24/26/28) with no reason to differ. */
  --sp-1:4px;   --sp-2:8px;   --sp-3:12px;  --sp-4:16px;
  --sp-5:20px;  --sp-6:24px;  --sp-7:28px;  --sp-8:32px;
  --sp-10:40px; --sp-12:48px; --sp-15:60px; --sp-20:80px;

    --primary:#003BA6;      /* Geese blue */
    --primary-2:#4772BF;
    --primary-3:#809DD2;
    --secondary:#CD182A;    /* Geese red/coral */
    --accent:#00215D;       /* deep navy — footer/team dark bg */
    --accent-2:#001946;
    --gold:#FCD01C;         /* yellow — reserved for small accents only (the geese) */
    --gold-light:#D6E0F1;   /* blue-100 — small label text on dark grounds */
    --gold-deep:#00328B;    /* blue-600 — small label text on light (11.5:1) */
    --blue-solid:#00328B;   /* AA-safe blue for text/active states on light backgrounds (6.1:1) */
    --paper:#F5F5F2;
    --white:#ffffff;
    --text:#6B6B6B;
    --ink:#090909;
    --line:#F9F9F9;
    --shadow:0 4px 15px rgba(0,0,0,.5);
    --radius:10px;
    --font-head:'Manrope',sans-serif;
    --font-body:'Inter',sans-serif;
  }
  *{margin:0;padding:0;box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  body{
    font-family:var(--font-body);
    font-size:16px;font-weight:400;line-height:24px;color:var(--text);
    background:var(--white);-webkit-font-smoothing:antialiased;overflow-x:hidden;
  }
  img{max-width:100%;display:block;}
  a{text-decoration:none;color:inherit;}
  h1,h2,h3,h4{font-family:var(--font-head);color:var(--ink);line-height:1.2;}
  .container{max-width:1290px;margin:0 auto;padding:0 24px;}
  /* every section shares the 1200 container so the page gutters line up;
     long-form copy keeps a readable measure via .prose instead of a narrow container */
  .prose{max-width:860px;margin-left:auto;margin-right:auto;}
  .prose-narrow{max-width:760px;margin-left:auto;margin-right:auto;}
  /* legal-page subheadings (cookies/privacy/terms) and compact section
     headings (about/order) were each repeated inline on every occurrence;
     shared here so a size change is a one-line edit instead of N. */
  .legal-h3{font-size:20px;font-weight:800;margin:28px 0 10px;}
  .h2-compact{font-size:28px;font-weight:800;margin-bottom:16px;}
  section{position:relative;}

  /* ================= BUTTONS (Manrope 800 uppercase) ================= */
  .btn{
    display:inline-flex;align-items:center;justify-content:center;gap:8px;
    font-family:var(--font-head);font-weight:800;text-transform:uppercase;
    letter-spacing:.32px;font-size:13px;line-height:1.25;
    border-radius:var(--radius);padding:15px 26px;border:2px solid transparent;
    cursor:pointer;transition:all var(--dur) var(--ease-out);white-space:nowrap;
    text-align:center;
  }
  /* QA: nowrap button labels set a min-content floor that pushed grid/flex tracks
     wider than a 320px viewport. Long labels may wrap on very narrow screens. */
  @media(max-width:480px){
    .btn{white-space:normal;padding:14px 18px;}
  }
  /* QA: grid/flex children default to min-width:auto, so a wide child cannot
     shrink and forces horizontal overflow. */
  .hs-grid > *, .ph-grid > *, .why-wrap > *, .contact-grid > *, .case-wrap > *{min-width:0;}

  /* QA (WCAG 2.4.7): no author focus style existed for buttons/links anywhere.
     Single visible ring, applied only for keyboard focus. */
  a:focus-visible, button:focus-visible, input:focus-visible,
  textarea:focus-visible, select:focus-visible, [tabindex]:focus-visible{
    outline:3px solid var(--primary);
    outline-offset:2px;
    border-radius:2px;
  }
  /* dark surfaces need the lighter gold to stay visible */
  .page-hero a:focus-visible, .cta-band a:focus-visible, .site-footer a:focus-visible,
  .bg-primary a:focus-visible, .bg-dark a:focus-visible, .mobile-menu a:focus-visible{
    outline-color:var(--gold-light);
  }
  .btn-primary{background:var(--primary);border-color:var(--primary);color:#fff;}
  .btn-primary:hover{background:var(--accent);border-color:var(--accent);color:#fff;}
  .btn-secondary{background:var(--secondary);border-color:var(--secondary);color:#fff;}
  .btn-secondary:hover{background:#90111D;border-color:#90111D;color:#fff;}
  .btn-outline-blue{background:#fff;border-color:var(--accent);color:var(--accent);}
  .btn-outline-blue:hover{background:var(--accent);color:#fff;}
  .btn-white{background:#fff;border-color:#fff;color:var(--accent);}
  .btn-white:hover{background:transparent;color:#fff;}
  .btn-amazon{background:#FF9900;border-color:#FF9900;color:#111;}
  .btn-amazon:hover{background:#e88a00;border-color:#e88a00;color:#111;}
  .btn-spotify{background:#1DB954;border-color:#1DB954;color:#fff;}
  .btn-spotify:hover{background:#1aa34a;border-color:#1aa34a;color:#fff;}
  .btn-block{width:100%;}

  /* ================= HEADER ================= */
  .site-header{
    position:sticky;top:0;z-index:1000;background:rgba(255,255,255,.95);
    backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
    box-shadow:0 4px 15px rgba(0,0,0,.08);
  }
  /* header shares the 1200 container so the logo lines up with page content */
  .site-header .container{max-width:1290px;padding:0 24px;}
  .header-inner{display:flex;align-items:center;justify-content:space-between;height:78px;gap:24px;}
  .site-logo img{height:40px;width:auto;}
  .main-nav{display:flex;align-items:center;gap:28px;}
  .nav-list{display:flex;align-items:center;gap:8px;list-style:none;}
  .nav-item{position:relative;}
  .nav-item > a{
    display:flex;align-items:center;gap:5px;padding:12px 12px;
    font-family:var(--font-body);font-size:15px;font-weight:500;color:var(--ink);
    transition:color .3s;
  }
  .nav-item > a:hover,.nav-item.active > a{color:var(--blue-solid);}
  .nav-item > a::after{content:"";position:absolute;left:12px;right:12px;bottom:4px;height:2px;background:var(--primary);transform:scaleX(0);transition:transform var(--dur) var(--ease-out);}
  .nav-item:hover > a::after,.nav-item.active > a::after{transform:scaleX(1);}
  .nav-item .caret{font-size:10px;transition:transform var(--dur) var(--ease-out);}
  .nav-item:hover .caret{transform:rotate(180deg);}
  .dropdown{
    position:absolute;top:100%;left:0;min-width:270px;background:#fff;
    border:1px solid var(--line);border-top:3px solid var(--primary);
    box-shadow:0 15px 40px rgba(0,0,0,.12);border-radius:0 0 10px 10px;
    opacity:0;visibility:hidden;transform:translateY(12px);transition:all var(--dur) var(--ease-out);z-index:50;padding:8px 0;
  }
  .nav-item:hover .dropdown{opacity:1;visibility:visible;transform:translateY(0);}
  .dropdown a{
    display:flex;justify-content:space-between;align-items:center;gap:10px;
    padding:11px 20px;font-size:14px;color:#444;border-bottom:1px solid var(--line);transition:all var(--dur) var(--ease-out);
  }
  .dropdown a:last-child{border-bottom:none;}
  .dropdown a:hover{background:#F6F8FB;color:var(--accent);padding-left:26px;}
  .dropdown a small{color:#999;font-size:12px;}
  .header-cta{display:flex;align-items:center;gap:12px;}
  /* 44px touch minimum at every width — the ≤480 rule left a gap
     between 481-1024px where the header CTA fell back to 41px. */
  .header-cta .btn{padding:11px 20px;font-size:12px;min-height:44px;}
  /* QA: primary mobile nav control was 36x34 — below the 44px touch minimum.
     Padding grows the hit area without changing the icon's visual size. */
  .menu-toggle{
    display:none;background:none;border:none;cursor:pointer;flex-direction:column;
    gap:5px;padding:8px;min-width:44px;min-height:44px;align-items:center;justify-content:center;
  }
  .menu-toggle span{width:26px;height:2.5px;background:var(--ink);border-radius:2px;transition:transform var(--dur) var(--ease-out),opacity var(--dur-fast) linear;}
  .menu-toggle.open span:nth-child(1){transform:translateY(7.5px) rotate(45deg);}
  .menu-toggle.open span:nth-child(2){opacity:0;}
  .menu-toggle.open span:nth-child(3){transform:translateY(-7.5px) rotate(-45deg);}

  /* mobile drawer */
  .mobile-menu{
    display:none;position:fixed;inset:0;z-index:999;background:var(--accent);
    padding:100px 32px 40px;overflow-y:auto;transform:translateX(100%);transition:transform var(--dur) var(--ease-out);
  }
  .mobile-menu.open{transform:translateX(0);display:block;}
  .mobile-menu a.mm-link{
    display:block;color:#fff;font-family:var(--font-head);font-size:22px;font-weight:700;
    padding:14px 0;border-bottom:1px solid rgba(255,255,255,.12);
  }
  .mobile-menu .mm-sub{padding:2px 0 8px 18px;}
  .mobile-menu .mm-sub a{color:#B9C3DE;font-size:15px;font-weight:500;display:block;padding:8px 0;}
  .mobile-menu .btn{margin-top:24px;width:100%;}

  /* ================= HERO (geese video bg) ================= */
  .hero{
    position:relative;min-height:88vh;display:flex;align-items:center;justify-content:center;text-align:center;
    overflow:hidden;background:var(--accent);
  }
  .hero video,.hero img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;}
  .hero-overlay{position:absolute;inset:0;background:rgba(0,33,93,.72);z-index:1;}
  .hero-content{position:relative;z-index:2;padding:120px 24px;max-width:1100px;color:#fff;}
  .hero-grid{display:grid;grid-template-columns:1.25fr .75fr;gap:40px;align-items:center;text-align:left;}
  .hero-kicker{
    font-family:var(--font-head);font-size:14px;letter-spacing:.18em;text-transform:uppercase;color:#D6E0F1;
    margin-bottom:18px;display:flex;align-items:center;gap:14px;justify-content:flex-start;
  }
  .hero-kicker::before,.hero-kicker::after{content:"";height:1px;width:48px;background:#D6E0F1;}
  .hero-kicker::after{display:none;}
  .hero h1{
    font-size:clamp(38px,6vw,72px);font-weight:800;color:#fff;letter-spacing:-1.5px;line-height:1.05;
  }
  .hero h1 .blue{color:var(--gold-light);}
  .hero h1 .red{color:var(--gold);}
  .hero-sub{font-size:clamp(17px,2.4vw,23px);font-weight:500;margin:20px 0 34px;color:#E7ECF9;font-family:var(--font-head);}
  .hero-actions{display:flex;gap:16px;justify-content:flex-start;flex-wrap:wrap;}
  .hs-copy .hero-actions{flex-direction:column;align-items:stretch;max-width:340px;}
  .hs-copy .hero-actions .btn{flex:1 1 auto;width:100%;}
  .hero-micro{margin-top:16px;font-size:13px;color:#D6E0F1;line-height:1.7;}
  .scroll-guide{
    position:absolute;bottom:26px;left:50%;transform:translateX(-50%);z-index:3;
    width:26px;height:44px;border:2px solid #fff;border-radius:20px;display:flex;justify-content:center;padding-top:8px;
  }
  .scroll-guide::after{content:"";width:4px;height:9px;background:#fff;border-radius:4px;animation:scrollDot 1.6s infinite;}
  @keyframes scrollDot{0%{transform:translateY(0);opacity:1}70%{transform:translateY(14px);opacity:0}100%{opacity:0}}

  /* ============ HOME HERO — asymmetric layout (structure per reference peg),
     rendered entirely in the Geese design system: Manrope 800, gold CTAs,
     rounded cards with soft shadows ============ */
  .hero-split{
    background:linear-gradient(180deg,#fff 0%,var(--paper) 100%);
    /* symmetric now that the content is vertically centred in a full-height
       hero; the old 72/96 split left it 12px above centre */
    padding:80px 0;overflow:visible;
    /* Fill the first screen. The header is sticky, so it takes real space in
       flow — subtract it or the hero pushes the fold down by its height.
       min-height, not height: on phones the stacked copy + book + quote is
       taller than the viewport and must be allowed to grow. */
    --header-h:78px;
    min-height:calc(100vh - var(--header-h));
    min-height:calc(100svh - var(--header-h));
    display:grid;
    align-content:center;
  }
  /* Short laptops and landscape phones: the 80px gutters alone can push the
     hero past the fold, which defeats the point of a full-height hero. */
  @media (max-height:700px) and (min-width:901px){
    .hero-split{ padding:36px 0; }
  }
  .hs-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:64px;align-items:center;}
  .hs-copy .hero-kicker{color:var(--gold-deep);}
  .hs-copy .hero-kicker::before{background:var(--gold-deep);}
  .hs-copy h1{
    font-size:clamp(38px,5.4vw,66px);font-weight:800;color:var(--ink);
    letter-spacing:-1.5px;line-height:1.05;
  }
  .hs-copy h1 .blue{color:var(--primary);}
  .hs-copy h1 .gold{color:var(--gold-deep);}
  .hs-copy .hero-sub{
    font-size:clamp(16px,1.6vw,19px);font-weight:500;margin:22px 0 34px;
    color:var(--text);font-family:var(--font-head);max-width:470px;line-height:1.6;
  }
  /* QA (WCAG 1.4.3): #8a8a8a on white was 3.45:1 at 13px; --text is 5.74:1 */
  .hs-copy .hero-micro{margin-top:18px;font-size:13px;color:var(--text);line-height:1.7;}
  .hs-visual{position:relative;}
  /* the book is a product shot: show it whole rather than cropping it like a photo.
     The source is a transparent PNG, so no blend-mode trick is needed to sit it on
     the page — it composites cleanly over any background. */
  .hs-book{
    position:relative;display:flex;align-items:center;justify-content:center;padding:0 8px;
  }
  /* No quote card competing for room here anymore, so the book itself is the
     whole visual — sized up accordingly (was capped at 520px, then 660px). */
  .hs-book img{
    width:100%;max-width:820px;height:auto;aspect-ratio:1448/1086;object-fit:contain;
    filter:drop-shadow(0 22px 34px rgba(9,15,35,.22));
  }
  @media(max-width:1100px){
    .hs-book{padding:0 12px;}
  }
  @media(max-width:900px){
    .hs-grid{grid-template-columns:1fr;gap:44px;}
    .hs-visual{order:-1;max-width:480px;margin:0 auto;}
    .hs-copy .hero-sub{max-width:100%;}
    .hs-book{padding:0;}
    .hs-book img{max-width:100%;}
  }

  /* stat badge that belongs with Richard, on the author strip.
     .why-media clips its children, so this variant lets the badge hang outside */
  .why-media.author-media{position:relative;overflow:visible;}
  .stat-badge{
    position:absolute;top:-22px;left:-22px;z-index:3;width:124px;
    background:var(--accent);color:#fff;border-radius:16px;padding:22px 18px;text-align:center;
    box-shadow:0 18px 40px rgba(0,33,93,.32);
  }
  .stat-badge .num{font-family:var(--font-head);font-size:34px;font-weight:800;color:var(--gold-light);line-height:1;}
  .stat-badge .label{
    font-family:var(--font-head);font-size:11px;font-weight:700;letter-spacing:.12em;
    text-transform:uppercase;color:#D6E0F1;margin-top:8px;line-height:1.4;
  }
  @media(max-width:640px){
    .stat-badge{top:-14px;left:-10px;width:104px;padding:16px 12px;}
    .stat-badge .num{font-size:27px;}
    .stat-badge .label{font-size:9.5px;}
  }

  /* ================= SECTION HEADINGS ================= */
  .section-head{text-align:center;max-width:820px;margin:0 auto 48px;}
  .section-eyebrow{
    font-family:var(--font-head);font-size:13px;font-weight:700;letter-spacing:.16em;
    text-transform:uppercase;color:var(--secondary);margin-bottom:12px;
  }
  .section-head h2{font-size:clamp(28px,4vw,42px);font-weight:800;letter-spacing:-.5px;line-height:1.15;}
  .section-head h2 .blue{color:var(--primary);}
  .section-head h2 .red{color:var(--secondary);}
  .section-head p{font-size:16px;color:var(--text);margin-top:16px;}
  .section-pad{padding:88px 0;}
  .bg-muted{background:var(--paper);}
  .bg-primary{background:var(--accent);color:#fff;}
  .bg-dark{background:var(--accent);color:#fff;}

  /* ================= MANIFESTO (About) =================
     Sat directly under the navy page-hero in the same --accent navy, so the two
     ran together as one block. Drops to the deeper --accent-2 for a clear tonal
     step, with a gold hairline marking the boundary. Everything shares one
     measure column so the heading and body align on the same edges instead of
     the heading spanning the full container. */
  #manifesto{
    background:var(--accent-2);
    border-top:3px solid var(--primary);
    text-align:center;
  }
  #manifesto .mf-col{max-width:780px;margin:0 auto;}
  #manifesto .mf-lead{
    color:#fff;font-weight:800;font-size:clamp(24px,3.2vw,34px);
    line-height:1.35;margin-bottom:30px;letter-spacing:-.3px;
  }
  #manifesto .mf-body{
    text-align:left;font-size:17px;line-height:1.9;color:rgba(255,255,255,.86);
  }
  #manifesto .mf-body p{margin-bottom:18px;}
  #manifesto .mf-body p:last-child{margin-bottom:0;}
  /* the creed's pivot line — given weight rather than just bold text */
  #manifesto .mf-body p.mf-key{
    color:#fff;font-weight:700;font-family:var(--font-head);
    border-left:3px solid var(--secondary);padding:2px 0 2px 20px;margin:26px 0;
  }
  #manifesto .mf-close{
    margin-top:34px;padding-top:30px;border-top:1px solid rgba(254,232,142,.28);
  }
  #manifesto .mf-close h3{
    color:#fff;font-weight:800;font-size:clamp(20px,2.6vw,26px);line-height:1.35;
  }
  #manifesto .mf-sign{
    margin-top:16px;font-family:var(--font-head);font-size:13px;color:var(--gold-light);
    font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  }
  @media(max-width:640px){
    #manifesto .mf-body p.mf-key{padding-left:16px;margin:22px 0;}
  }

  /* ================= INTRO VIDEO ================= */
  .video-shell{
    position:relative;max-width:920px;margin:0 auto;border-radius:18px;overflow:hidden;
    box-shadow:0 30px 80px rgba(0,33,93,.35);aspect-ratio:16/9;background:#000;
  }
  .video-shell iframe,.video-shell video{width:100%;height:100%;border:0;display:block;object-fit:cover;}

  /* ================= 3 CARDS ================= */
  .cards3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--sp-6);}
  .card3{
    position:relative;border-radius:16px;overflow:hidden;min-height:300px;display:flex;
    align-items:flex-end;padding:34px 28px;color:#fff;transition:transform .35s ease,box-shadow .35s;
    cursor:pointer;
  }
  .card3:hover{transform:translateY(-8px);box-shadow:0 25px 55px rgba(0,33,93,.3);}
  .card3 video,.card3 img.bgimg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .45s;}
  .card3:hover video,.card3:hover img.bgimg{opacity:1;}
  .card3 .inner{position:relative;z-index:2;}
  .card3 .ic{
    width:64px;height:64px;border-radius:50%;background:rgba(255,255,255,.18);
    display:flex;align-items:center;justify-content:center;margin-bottom:18px;border:1px solid rgba(255,255,255,.4);
  }
  .card3 h3{color:#fff;font-size:22px;font-weight:800;margin-bottom:10px;}
  .card3 p{color:rgba(255,255,255,.92);font-size:14px;line-height:1.6;}
  .card3.g1{background:linear-gradient(135deg,#003BA6 0%,#003BA6 100%);}
  .card3.g2{background:linear-gradient(135deg,#4772BF 0%,#003BA6 100%);}
  .card3.g3{background:linear-gradient(135deg,#809DD2 0%,#4772BF 100%);}

  /* ================= WHY SECTION ================= */
  .why-wrap{display:grid;grid-template-columns:1fr 1.15fr;gap:56px;align-items:center;}
  .why-wrap.author-wrap{grid-template-columns:0.8fr 1.5fr;}
  .geese-intro{color:#333 !important;}
  .geese-closing{background:#F3F6FC;border-radius:14px;padding:28px 24px;}
  .why-media{position:relative;border-radius:18px;overflow:hidden;aspect-ratio:4/5;box-shadow:0 25px 70px rgba(0,33,93,.3);}
  .why-media video{width:100%;height:100%;object-fit:cover;}
  /* landscape source in the 4/5 portrait frame would crop the composition hard,
     so this variant keeps the photo's own ratio */
  .why-media.is-wide{aspect-ratio:16/10;}
  /* product shot: transparent PNG with its own baked shadows — show it whole,
     no frame, no crop, no second shadow */
  .why-media.is-product{
    aspect-ratio:auto;overflow:visible;border-radius:0;box-shadow:none;background:none;
    display:flex;align-items:center;justify-content:center;
  }
  .why-media.is-product img{width:100%;height:auto;object-fit:contain;}
  .why-media .play-tag{
    position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(0,33,93,.15);
  }
  .why-media .play-tag span{
    width:76px;height:76px;border-radius:50%;background:var(--primary);color:#fff;
    display:flex;align-items:center;justify-content:center;font-size:26px;box-shadow:0 15px 40px rgba(0,0,0,.35);
  }
  .why-copy h2{font-size:clamp(30px,4vw,46px);font-weight:800;margin-bottom:24px;letter-spacing:-.5px;}
  .why-copy h2 .blue{color:var(--primary);}
  .why-copy h2 .red{color:var(--secondary);}
  .why-copy p{font-size:16px;line-height:1.8;color:var(--text);margin-bottom:18px;}
  .why-divider{display:flex;align-items:center;gap:20px;margin:34px 0;color:#C9D0DD;}
  .why-divider::before,.why-divider::after{content:"";height:1px;flex:1;background:#E4E8F0;}
  .why-divider svg{width:22px;height:22px;fill:#fff;}

  /* ================= PHOTO ROW (hover zoom) ================= */
  .photo-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;}
  .photo-row .imgbox{position:relative;border-radius:14px;overflow:hidden;aspect-ratio:4/3;box-shadow:0 15px 40px rgba(0,0,0,.15);}
  .photo-row img{width:100%;height:100%;object-fit:cover;transition:transform var(--dur) var(--ease-out);}
  .photo-row .imgbox:hover img{transform:scale(1.04);}

  /* ================= FLIP CARDS ================= */
  .flip-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--sp-6);perspective:1400px;}
  .flip-card{position:relative;height:340px;cursor:pointer;}
  .flip-inner{position:relative;width:100%;height:100%;transform-style:preserve-3d;transition:transform .75s ease;}
  .flip-card:hover .flip-inner{transform:rotateY(180deg);}
  .flip-face{
    position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;
    border-radius:15px;display:flex;flex-direction:column;align-items:center;justify-content:center;
    padding:30px;text-align:center;color:#fff;box-shadow:0 4px 8px rgba(0,0,0,.2);
  }
  .flip-front{color:#fff;}
  .flip-front img{width:70px;height:70px;margin-bottom:20px;object-fit:contain;filter:brightness(0) invert(1);}
  .flip-front h3{color:#fff;font-size:24px;font-weight:800;}
  .flip-back{transform:rotateY(180deg);background:var(--accent);}
  .flip-back p{color:rgba(255,255,255,.92);font-size:15px;line-height:1.7;}
  .flip-back .tag{font-family:var(--font-head);font-weight:800;letter-spacing:.1em;font-size:12px;text-transform:uppercase;margin-bottom:16px;color:#D6E0F1;}
  .flip-f1{background:var(--secondary);}
  .flip-f2{background:var(--primary);}
  .flip-f3{background:var(--primary);}
  .flip-f4{background:#9AA5B8;}
  .flip-b1{background:#B52C43;}
  .flip-b2{background:#003BA6;}
  .flip-b3{background:#003BA6;}
  .flip-b4{background:var(--secondary);}

  /* ================= RESOURCES GRID ================= */
  .res-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--sp-6);}
  .res-card{
    background:#fff;border-radius:16px;overflow:hidden;box-shadow:0 12px 35px rgba(0,0,0,.08);
    transition:transform var(--dur) var(--ease-out),box-shadow var(--dur) var(--ease-out);
    display:flex;flex-direction:column;height:100%;
  }
  .res-card:hover{transform:translateY(-8px);box-shadow:0 25px 60px rgba(0,0,0,.15);}
  .res-card .thumb{aspect-ratio:1;overflow:hidden;}
  .res-card .thumb img{width:100%;height:100%;object-fit:cover;transition:transform var(--dur) var(--ease-out);}
  .res-card:hover .thumb img{transform:scale(1.04);}
  .res-card .body{padding:var(--sp-7) var(--sp-6) var(--sp-8);text-align:center;}
  .res-card h3{font-size:19px;font-weight:800;margin-bottom:16px;color:var(--ink);}
  /* the universal *{margin:0} reset left the description sitting flush
     against the Download button — group h3+p as one text block, then give
     the CTA its own clear space below. */
  .res-card .body{display:flex;flex-direction:column;flex:1;}
  .res-card .body p{margin-bottom:22px;color:var(--text);line-height:1.6;}
  .res-card .btn{padding:11px 20px;font-size:11.5px;margin-top:auto;align-self:center;}

  /* ================= CAROUSEL / MARQUEE ================= */
  .marquee{overflow:hidden;position:relative;-webkit-mask-image:linear-gradient(to right,transparent,black 8%,black 92%,transparent);mask-image:linear-gradient(to right,transparent,black 8%,black 92%,transparent);}
  .marquee-track{display:flex;gap:28px;width:max-content;animation:scrollL 55s linear infinite;}
  .marquee-track.reverse{animation-name:scrollR;}
  .marquee-track:hover{animation-play-state:paused;}
  @keyframes scrollL{from{transform:translateX(0)}to{transform:translateX(-50%)}}
  @keyframes scrollR{from{transform:translateX(-50%)}to{transform:translateX(0)}}
  .logo-chip{
    flex:0 0 auto;display:flex;align-items:center;justify-content:center;
    height:86px;min-width:168px;padding:16px 24px;background:#fff;border:1px solid #EEF0F6;
    border-radius:12px;box-shadow:0 6px 18px rgba(0,0,0,.05);
  }
  .logo-chip img{max-height:52px;max-width:130px;object-fit:contain;filter:grayscale(1);opacity:.72;transition:filter var(--dur) var(--ease-out),opacity var(--dur) var(--ease-out);}
  .logo-chip:hover img{filter:grayscale(0);opacity:1;}

  .carousel-row{display:flex;gap:16px;overflow:hidden;-webkit-mask-image:linear-gradient(to right,transparent,black 6%,black 94%,transparent);mask-image:linear-gradient(to right,transparent,black 6%,black 94%,transparent);}
  .carousel-track{display:flex;gap:16px;width:max-content;animation:scrollL 42s linear infinite;}
  .carousel-track.rtl{animation-name:scrollR;}
  .carousel-track:hover{animation-play-state:paused;}
  .carousel-row .slide{flex:0 0 auto;width:210px;aspect-ratio:1;border-radius:12px;overflow:hidden;box-shadow:0 8px 22px rgba(0,0,0,.12);}
  .carousel-row .slide img{width:100%;height:100%;object-fit:cover;}

  /* ================= TEAM ================= */
  .team-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:var(--sp-6);}
  .team-card{text-align:center;}
  .team-card .avatar{
    position:relative;width:100%;aspect-ratio:1;border-radius:16px;overflow:hidden;margin-bottom:18px;
    box-shadow:0 15px 40px rgba(0,0,0,.25);
  }
  .team-card .avatar img{width:100%;height:100%;object-fit:cover;transition:transform var(--dur) var(--ease-out);}
  .team-card:hover .avatar img{transform:scale(1.04);}
  .team-card h3{color:#fff;font-size:19px;font-weight:800;margin-bottom:4px;}
  .team-card .role{color:#7FA7D2;font-size:13px;font-weight:600;margin-bottom:12px;}
  .team-card .view-bio{
    font-family:var(--font-head);font-size:11.5px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;
    color:#fff;background:transparent;border:1.5px solid rgba(255,255,255,.4);border-radius:30px;
    padding:8px 18px;cursor:pointer;transition:all var(--dur) var(--ease-out);display:inline-flex;align-items:center;gap:6px;
  }
  .team-card .view-bio:hover{background:var(--primary);border-color:var(--primary);color:#fff;}

  /* ================= CAROUSEL (shared: testimonials + "what's on") ================= */
  /* One component powers every testi-carousel and the promo-carousel: arrows
     page the track by one full view, dots below show how many pages there are,
     and it hides its own arrows/dots when everything already fits (.no-scroll). */
  .testi-carousel,.promo-carousel{position:relative;padding:0 50px;}
  .testi-carousel.no-scroll,.promo-carousel.no-scroll{padding:0;}
  .testi-carousel.no-scroll .carousel-nav,.promo-carousel.no-scroll .carousel-nav,
  .testi-carousel.no-scroll .carousel-dots,.promo-carousel.no-scroll .carousel-dots{display:none;}
  /* The viewport clips to one "page"; the track inside it is slid with a CSS
     transform (translateX), driven by JS — sturdier than native scroll-snap,
     which could fight a programmatic scrollTo (e.g. autoplay firing mid-drag)
     and made the old version feel like it "didn't move well". */
  .carousel-viewport{overflow:hidden;}
  .testi-grid{
    display:flex;gap:var(--sp-6);transition:transform .5s var(--ease-out);will-change:transform;
  }
  .testi-grid > .testi{
    flex:0 0 calc((100% - 2*var(--sp-6)) / 3);min-width:260px;
    display:flex;flex-direction:column;
  }
  /* The original subtle look — a plain white circle — just with the chevron
     drawn in brand blue instead of a thin text character. */
  .carousel-nav{
    position:absolute;top:50%;transform:translateY(-50%);width:44px;height:44px;border-radius:50%;
    background:#fff;border:none;box-shadow:0 8px 20px rgba(0,0,0,.15);
    display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--primary);z-index:2;
    transition:background var(--dur) var(--ease-out),color var(--dur) var(--ease-out);
  }
  .carousel-nav svg{width:20px;height:20px;}
  .carousel-nav:hover{background:var(--primary);color:#fff;}
  .carousel-nav.prev{left:0;}
  .carousel-nav.next{right:0;}
  .carousel-dots{display:flex;justify-content:center;gap:10px;margin-top:28px;}
  .carousel-dot{
    width:10px;height:10px;border-radius:50%;background:#D7DEEA;border:none;padding:0;cursor:pointer;
    transition:background var(--dur) var(--ease-out),transform var(--dur) var(--ease-out);
  }
  .carousel-dot:hover{background:#AAB6CC;}
  .carousel-dot.active{background:var(--primary);transform:scale(1.25);}
  .testi{
    background:#fff;border-radius:16px;padding:34px 32px;box-shadow:0 12px 35px rgba(0,0,0,.07);
    border-top:4px solid var(--secondary);position:relative;
  }
  .testi.red{border-top-color:var(--secondary);}
  .testi .q{
    font-size:42px;font-family:Georgia,serif;line-height:1;margin-bottom:12px;color:var(--gold);
  }
  .testi.red .q{color:var(--gold);}
  .testi p{font-size:15px;line-height:1.75;color:#3A4252;font-style:italic;margin-bottom:20px;}
  /* Pinned to the card's bottom edge via margin-top:auto (the card is a flex
     column) so a short quote doesn't just leave a blank gap above the name —
     every card in the row still matches height (flex stretch), but the
     attribution lines up at the same baseline instead of floating mid-card. */
  .testi .who{
    font-family:var(--font-head);font-weight:800;color:var(--accent);font-size:15px;
    display:flex;align-items:center;gap:10px;margin-top:auto;
  }
  .testi.red .who{color:var(--secondary);}
  .testi .who::before{content:"";width:26px;height:2px;background:currentColor;}
  .testi-herrera{
    max-width:820px;margin:40px auto 0;background:var(--accent);border-radius:16px;padding:40px 44px;
    box-shadow:0 15px 45px rgba(0,33,93,.25);position:relative;text-align:center;
  }
  .testi-herrera .th-label{
    font-family:var(--font-head);font-size:12px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
    color:var(--gold-light);margin-bottom:14px;
  }
  .testi-herrera .q{font-size:42px;font-family:Georgia,serif;line-height:1;margin-bottom:12px;color:var(--gold);}
  .testi-herrera p{font-size:17px;line-height:1.75;color:#fff;font-style:italic;margin-bottom:20px;}
  .testi-herrera .who{font-family:var(--font-head);font-weight:800;color:#fff;font-size:15px;display:flex;align-items:center;justify-content:center;gap:10px;}
  .testi-herrera .who::before{content:"";width:26px;height:2px;background:var(--gold-light);}

  /* ================= VIDEO TESTIMONIALS ================= */
  .vt-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;}
  .vt{position:relative;border-radius:14px;overflow:hidden;aspect-ratio:16/10;background:#000;box-shadow:0 15px 40px rgba(0,0,0,.2);}
  .vt video{width:100%;height:100%;object-fit:cover;}

  /* ================= CASE STUDY ================= */
  .case-wrap{display:grid;grid-template-columns:.9fr 1.6fr;gap:44px;align-items:center;background:#fff;border-radius:18px;padding:44px;box-shadow:0 15px 45px rgba(0,0,0,.08);}
  .case-logo{display:flex;align-items:center;justify-content:center;padding:24px;background:#F6F8FB;border-radius:14px;}
  .case-logo img{max-height:90px;object-fit:contain;}
  .case-body h2{font-size:clamp(24px,3vw,34px);font-weight:800;margin-bottom:18px;}
  .case-body h2 .blue{color:var(--primary);}
  .case-body h2 .red{color:var(--secondary);}
  .case-body p{line-height:1.8;margin-bottom:24px;color:#3A4252;}

  /* ================= CTA BAND ================= */
  .cta-band{text-align:center;padding:88px 24px;color:#fff;}
  .cta-band h2{color:#fff;font-size:clamp(28px,4vw,44px);font-weight:800;margin-bottom:16px;}
  .cta-band p{color:rgba(255,255,255,.88);max-width:640px;margin:0 auto 32px;font-size:17px;}
  .cta-actions{display:flex;gap:16px;justify-content:center;flex-wrap:wrap;}

  /* ================= SUB-PAGE HERO ================= */
  .page-hero{
    position:relative;color:#fff;overflow:hidden;
    padding:76px 24px 0;
    background:
      radial-gradient(ellipse 760px 460px at 12% -12%, rgba(254,232,142,.22), transparent 62%),
      radial-gradient(ellipse 640px 480px at 92% 112%, rgba(0,59,166,.28), transparent 58%),
      linear-gradient(155deg, var(--accent-2) 0%, var(--accent) 55%, #24396f 100%);
  }
  /* 1152 = the 1200 container minus its 24px gutters, so hero content sits on the
     exact same left/right edge as every .container section below it */
  .page-hero .ph-grid{
    position:relative;z-index:2;max-width:1242px;margin:0 auto;padding-bottom:76px;
    display:grid;grid-template-columns:1.15fr .85fr;gap:56px;align-items:center;
  }
  /* no-media heroes keep the same edge; the copy is capped for measure, not centred */
  .page-hero.no-media .ph-grid{grid-template-columns:1fr;max-width:1242px;}
  .page-hero.no-media .ph-copy{max-width:820px;}
  .page-hero .crumbs{margin:0 0 20px;font-size:12.5px;color:#93A7D4;font-family:var(--font-head);text-transform:uppercase;letter-spacing:.07em;}
  .page-hero .crumbs a:hover{color:#fff;}
  .page-hero .eyebrow{
    font-family:var(--font-head);font-size:13px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--gold-light);
    margin-bottom:16px;display:flex;align-items:center;gap:14px;
  }
  .page-hero .eyebrow::before{content:"";height:1px;width:36px;background:var(--gold);}
  .page-hero h1{color:#fff;font-size:clamp(32px,4.4vw,52px);font-weight:800;letter-spacing:-1px;line-height:1.1;}
  .page-hero h1 .accent-gold{color:var(--gold-light);}
  .page-hero .ph-sub{color:#C9D6F0;max-width:560px;margin:18px 0 0;font-size:17px;line-height:1.65;}
  .page-hero .ph-actions{display:flex;gap:14px;flex-wrap:wrap;margin-top:30px;}

  /* ---- has-photo: real framed photo card, not a full-bleed background wash ---- */
  .page-hero .ph-media{position:relative;border-radius:18px;overflow:hidden;aspect-ratio:4/5;box-shadow:0 25px 70px rgba(9,15,35,.45);}
  .page-hero .ph-media img{width:100%;height:100%;object-fit:cover;display:block;}
  .page-hero .ph-media::after{content:"";position:absolute;inset:0;background:linear-gradient(200deg, rgba(252,208,28,.16), transparent 45%);pointer-events:none;}
  /* product-shot variant: the book is an object, not a photo — show it whole with
     no crop, frame, or overlay. Transparent PNG composites straight onto the hero. */
  .page-hero .ph-media.is-book{
    aspect-ratio:auto;overflow:visible;border-radius:0;box-shadow:none;
    display:flex;align-items:center;justify-content:center;
  }
  .page-hero .ph-media.is-book::after{display:none;}
  .page-hero .ph-media.is-book img{
    width:100%;max-width:500px;height:auto;object-fit:contain;
    filter:drop-shadow(0 22px 38px rgba(0,0,0,.4));
  }
  @media(max-width:860px){
    .page-hero .ph-media.is-book img{max-width:100%;}
  }

  /* ---- has-pattern: single-column copy + a subtle flock watermark, not a stock photo ---- */
  .page-hero.has-pattern{overflow:hidden;}
  .ph-flock{position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.42;}
  .ph-chevron{position:absolute;width:46px;height:26px;}
  .ph-chevron::before,.ph-chevron::after{
    content:"";position:absolute;top:0;width:26px;height:3.5px;background:var(--gold);border-radius:2px;
  }
  .ph-chevron::before{left:0;transform:rotate(28deg);transform-origin:left center;}
  .ph-chevron::after{right:0;transform:rotate(-28deg);transform-origin:right center;}

  @media(max-width:860px){
    .page-hero .ph-grid{grid-template-columns:1fr;gap:32px;padding-bottom:56px;}
    .page-hero .ph-media{aspect-ratio:16/10;order:-1;}
    .page-hero .ph-sub{max-width:100%;}
  }

  /* ---- CTA band chevron texture (applies to every .cta-band.bg-primary) ---- */
  .cta-band.bg-primary{position:relative;overflow:hidden;}
  .cta-band.bg-primary .ph-flock{opacity:.42;}
  .cta-band.bg-primary .container{position:relative;z-index:2;}

  /* ================= GENERIC GRIDS / CARDS ================= */
  /* QA: `1fr` resolves to minmax(min-content,1fr), so a track can never shrink
     below its content and the grid overflows instead. minmax(0,1fr) lets the
     columns actually divide the available width. Fixes the whole class of
     between-breakpoint overflow (e.g. Shop's 5-up grid at ~1025-1100px). */
  .g2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sp-6);}
  .g3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--sp-6);}
  .g4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--sp-6);}

  /* contact page: center body content */
  #contact .why-wrap{display:block;text-align:center;}
  #contact .why-copy{max-width:720px;margin:0 auto;}
  #contact .form-grid{text-align:left;}
  #contact .g4{justify-content:center;}
  #contact .g4 .tile{text-align:center;}
  /* Address runs 4 lines, phone/email/online run 1 — without this the row
     of cards reads as wildly uneven. Grid still stretches every card to the
     tallest one's height; centering the content in that space (instead of
     pinning it to the top) is what actually makes the row look balanced. */
  .reach-tile{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:14px;min-height:180px;}
  .reach-tile p{margin:0;}
  .contact-meta-row{margin-top:var(--sp-6);}

  /* Two office cards (Canada / Philippines) — each gets its own icon, address,
     phone, and embedded map, so the two locations no longer have to be
     crammed as extra lines inside a generic "Address"/"Phone" tile. */
  .offices-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sp-6);align-items:stretch;}
  .office-card{display:flex;flex-direction:column;}
  .office-map{margin-top:auto;}
  .office-card{
    background:#fff;border-radius:16px;padding:var(--sp-7);box-shadow:0 12px 35px rgba(0,0,0,.07);
    text-align:center;
  }
  .office-icon{
    width:52px;height:52px;border-radius:50%;background:var(--primary);color:#fff;
    display:flex;align-items:center;justify-content:center;font-size:22px;margin:0 auto 16px;
  }
  .office-card h3{font-size:20px;font-weight:800;margin-bottom:12px;}
  .office-address{color:var(--text);line-height:1.7;margin-bottom:14px;}
  .office-phone{
    font-family:var(--font-head);font-weight:700;color:var(--ink);margin-bottom:20px;
    display:flex;align-items:center;justify-content:center;gap:8px;
  }
  .office-phone .office-icon-sm{font-size:15px;}
  .office-map{border-radius:12px;overflow:hidden;aspect-ratio:16/10;}
  .office-map iframe{width:100%;height:100%;border:0;display:block;}
  @media(max-width:760px){
    .offices-grid{grid-template-columns:1fr;}
  }
  .g5{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:22px;}
  /* QA: 5 columns become unusably narrow before the 1024 breakpoint takes over,
     so step down to 3-up across the intermediate band. */
  @media(max-width:1180px){
    .g5{grid-template-columns:repeat(3,minmax(0,1fr));}
  }
  #home-programs .g3 .tile{display:flex;flex-direction:column;align-items:flex-start;}
  #home-programs .g3 .tile .btn{margin-top:auto;}
  #home-programs .g3 .tile p{margin-bottom:20px;}
  #cohorts .g3 .tile{display:flex;flex-direction:column;align-items:center;}
  #cohorts .g3 .tile .btn{margin-top:auto;}
  .g6{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:20px;}

  /* ===== Light, centred page-hero variant (Workshops) =====
     The base .page-hero is a dark navy gradient with white text and an
     asymmetric grid. This variant flips it light and centres the copy, then
     hands the visual weight to a bento of real workshop photos underneath. */
  .page-hero.ph-light{
    background:linear-gradient(180deg,#fff 0%,var(--paper) 100%);
    color:var(--ink);
  }
  .page-hero.ph-light .ph-grid{
    grid-template-columns:1fr;
    max-width:1242px;
    padding-bottom:64px;
  }
  .page-hero.ph-light .ph-copy{
    max-width:760px;margin:0 auto;text-align:center;
  }
  .page-hero.ph-light .crumbs{color:#6B6B6B;}
  .page-hero.ph-light .crumbs a:hover{color:var(--accent);}
  .page-hero.ph-light .eyebrow{
    color:var(--gold-deep);justify-content:center;
  }
  .page-hero.ph-light .eyebrow::before{background:var(--gold-deep);}
  .page-hero.ph-light .eyebrow::after{
    content:"";height:1px;width:36px;background:var(--gold-deep);
  }
  .page-hero.ph-light h1{color:var(--ink);}
  .page-hero.ph-light h1 .accent-gold{color:var(--gold-deep);}
  .page-hero.ph-light .ph-sub{color:var(--text);margin-left:auto;margin-right:auto;}
  .page-hero.ph-light .ph-actions{justify-content:center;}

  /* bento of workshop photos */
  .hero-bento{
    display:grid;gap:14px;margin-top:44px;
    grid-template-columns:repeat(4,minmax(0,1fr));
    grid-auto-rows:150px;
  }
  .hero-bento .item{
    position:relative;overflow:hidden;border-radius:14px;cursor:pointer;
    box-shadow:0 10px 30px rgba(0,33,93,.14);
  }
  .hero-bento .item img{
    width:100%;height:100%;object-fit:cover;display:block;
    transition:transform .5s ease;
  }
  .hero-bento .item:hover img{transform:scale(1.04);}
  .hero-bento .item:nth-child(1){grid-column:span 2;grid-row:span 2;}
  @media(max-width:860px){
    .hero-bento{grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:132px;}
    .hero-bento .item:nth-child(1){grid-column:span 2;grid-row:span 1;}
  }
  /* compact variant: same bento language, sized for a why-wrap side column
     instead of the full-width hero. The book-cover photos carry their title
     near the top, so a mixed big/small grid (like the hero's) crushed some
     tiles down to a sliver and cropped the titles clean off. Four EQUAL
     tiles, top-aligned crop, keeps every cover legible. */
  .hero-bento.is-compact{
    grid-template-columns:repeat(2,1fr);
    grid-auto-rows:220px;
    margin-top:0;
  }
  .hero-bento.is-compact .item{grid-column:span 1;grid-row:span 1;}
  .hero-bento.is-compact .item img{object-position:top center;}
  @media(max-width:900px){
    .hero-bento.is-compact{grid-auto-rows:180px;}
  }
  @media(max-width:480px){
    .hero-bento{gap:10px;grid-auto-rows:112px;}
  }




  /* ===== CONCEPT 3 — editorial full-bleed split =====
     Photo runs to the viewport edge at full hero height; copy sits on a light
     panel whose left edge lines up with the 1290 container. Distinct from the
     dark asymmetric hero (framed photo) and the light centred one. */
  .page-hero.ph-editorial{
    background:linear-gradient(180deg,#fff 0%,var(--paper) 100%);
    color:var(--ink);padding:0;overflow:hidden;
  }
  .page-hero.ph-editorial .ph-grid{
    grid-template-columns:1.02fr .98fr;
    max-width:none;margin:0;padding:0;gap:0;align-items:stretch;
  }
  .page-hero.ph-editorial .ph-copy{
    max-width:none;
    padding:92px 60px 92px max(24px, calc((100vw - 1242px) / 2));
    align-self:center;
  }
  .page-hero.ph-editorial .crumbs{color:#6B6B6B;}
  .page-hero.ph-editorial .crumbs a:hover{color:var(--accent);}
  .page-hero.ph-editorial .eyebrow{color:var(--gold-deep);}
  .page-hero.ph-editorial .eyebrow::before{background:var(--gold-deep);}
  .page-hero.ph-editorial h1{color:var(--ink);}
  .page-hero.ph-editorial h1 .accent-gold{color:var(--gold-deep);}
  .page-hero.ph-editorial .ph-sub{color:var(--text);}
  .partner-badge{
    display:flex;align-items:center;gap:16px;margin-top:var(--sp-5);
    padding:14px 26px 14px 16px;background:#fff;border-radius:16px;width:fit-content;
    box-shadow:0 14px 34px rgba(0,33,93,.14);border:1px solid #E8ECF3;
    border-left:4px solid var(--gold-deep);
  }
  .partner-badge img{height:52px;width:auto;display:block;}
  .partner-badge .pb-text{display:flex;flex-direction:column;gap:2px;}
  .partner-badge .pb-eyebrow{
    font-family:var(--font-head);font-size:10.5px;font-weight:800;letter-spacing:.12em;
    text-transform:uppercase;color:var(--gold-deep);
  }
  .partner-badge .pb-name{font-family:var(--font-head);font-size:16px;font-weight:800;color:var(--ink);}
  /* media bleeds: no frame, no crop-ratio, fills the column edge to edge */
  .page-hero.ph-editorial .ph-media{
    aspect-ratio:auto;border-radius:0;box-shadow:none;overflow:hidden;
    min-height:520px;height:100%;
  }
  .page-hero.ph-editorial .ph-media::after{
    content:"";position:absolute;inset:0;pointer-events:none;
    /* The copy panel is a vertical #fff -> --paper gradient. A flat-coloured
       scrim therefore matched it only at the bottom, leaving a visible seam up
       top. This carries the SAME vertical gradient and lets a horizontal mask
       do the fade, so the two are identical colour at every height. */
    background:linear-gradient(180deg,#fff 0%,var(--paper) 100%);
    -webkit-mask-image:linear-gradient(90deg,#000 0%,#000 4%,rgba(0,0,0,.97) 11%,rgba(0,0,0,.88) 19%,rgba(0,0,0,.74) 27%,rgba(0,0,0,.56) 36%,rgba(0,0,0,.38) 45%,rgba(0,0,0,.22) 54%,rgba(0,0,0,.10) 63%,rgba(0,0,0,.03) 72%,transparent 82%);
            mask-image:linear-gradient(90deg,#000 0%,#000 4%,rgba(0,0,0,.97) 11%,rgba(0,0,0,.88) 19%,rgba(0,0,0,.74) 27%,rgba(0,0,0,.56) 36%,rgba(0,0,0,.38) 45%,rgba(0,0,0,.22) 54%,rgba(0,0,0,.10) 63%,rgba(0,0,0,.03) 72%,transparent 82%);
  }
  .page-hero.ph-editorial .ph-media img{width:100%;height:100%;object-fit:cover;object-position:center;}
  @media(max-width:900px){
    .page-hero.ph-editorial .ph-grid{grid-template-columns:1fr;}
    .page-hero.ph-editorial .ph-copy{padding:64px 24px 40px;}
    .page-hero.ph-editorial .ph-media{min-height:300px;order:-1;}
    .page-hero.ph-editorial .ph-media::after{
      background:linear-gradient(180deg,#fff 0%,var(--paper) 100%);
      -webkit-mask-image:linear-gradient(0deg,#000 0%,rgba(0,0,0,.92) 9%,rgba(0,0,0,.74) 19%,rgba(0,0,0,.50) 30%,rgba(0,0,0,.28) 41%,rgba(0,0,0,.11) 53%,transparent 66%);
              mask-image:linear-gradient(0deg,#000 0%,rgba(0,0,0,.92) 9%,rgba(0,0,0,.74) 19%,rgba(0,0,0,.50) 30%,rgba(0,0,0,.28) 41%,rgba(0,0,0,.11) 53%,transparent 66%);
    }
  }

  /* ===== CONCEPT 4 — compact typographic hero =====
     For reference pages with no photography. Short, light and type-led, with a
     gold rule instead of imagery, so utility pages stop pretending to be
     landing pages. */
  .page-hero.ph-compact{
    background:linear-gradient(180deg,#fff 0%,var(--paper) 100%);
    color:var(--ink);padding:64px 24px 0;
  }
  .page-hero.ph-compact .ph-grid{
    grid-template-columns:1fr;max-width:1242px;padding-bottom:52px;
  }
  .page-hero.ph-compact .ph-copy{max-width:780px;}
  .page-hero.ph-compact .crumbs{color:#6B6B6B;}
  .page-hero.ph-compact .crumbs a:hover{color:var(--accent);}
  .page-hero.ph-compact .eyebrow{color:var(--gold-deep);}
  .page-hero.ph-compact .eyebrow::before{background:var(--gold-deep);}
  .page-hero.ph-compact h1{
    color:var(--ink);font-size:clamp(30px,3.8vw,44px);
    padding-bottom:22px;position:relative;
  }
  .page-hero.ph-compact h1 .accent-gold{color:var(--gold-deep);}
  .page-hero.ph-compact h1::after{
    content:"";position:absolute;left:0;bottom:0;width:64px;height:3px;background:var(--primary);
  }
  .page-hero.ph-compact .ph-sub{color:var(--text);margin-top:22px;font-size:16.5px;}
  /* Contact and Videos/Resources: this compact hero centered, matching the
     ph-light treatment used elsewhere rather than the default left-aligned
     copy block. */
  #contact .page-hero.ph-compact .ph-copy,
  #videos .page-hero.ph-compact .ph-copy{
    max-width:760px;margin:0 auto;text-align:center;
  }
  #contact .page-hero.ph-compact .eyebrow,
  #videos .page-hero.ph-compact .eyebrow{justify-content:center;}
  /* Match the symmetric "— LABEL —" dash-both-sides look used elsewhere
     (e.g. News) — ph-compact's base rule only draws the left-hand dash. */
  #contact .page-hero.ph-compact .eyebrow::after,
  #videos .page-hero.ph-compact .eyebrow::after{
    content:"";height:1px;width:36px;background:var(--gold-deep);
  }
  #contact .page-hero.ph-compact .ph-sub,
  #videos .page-hero.ph-compact .ph-sub{margin-left:auto;margin-right:auto;}
  #contact .page-hero.ph-compact .ph-actions,
  #videos .page-hero.ph-compact .ph-actions{justify-content:center;}
  /* The h1::after underline bar is positioned left:0, which sits right under
     left-aligned text — but once this hero is centered (above), that left
     edge no longer lines up with the text at all, reading as a stray
     disconnected line. News (a different hero variant) never had this
     decoration, so drop it here too instead of trying to re-center it. */
  #contact .page-hero.ph-compact h1::after,
  #videos .page-hero.ph-compact h1::after{content:none;}



  /* why-wrap with its media removed — lay out as a single readable column */
  .why-wrap.is-solo{grid-template-columns:1fr;}
  .why-wrap.is-solo .why-copy{max-width:820px;}
  /* landscape portrait in the tall editorial slot: bias the crop so the
     subject stays in frame rather than being trimmed off-centre */
  #speaking .page-hero.ph-editorial .ph-media img{object-position:58% center;}

  /* LAC hero runs taller than the other editorial heroes — it carries a
     6-slide carousel, so it earns more vertical presence. Scoped to #lac so
     Speaking / About / News keep the standard height. */
  #lac .page-hero.ph-editorial .ph-copy{padding-top:118px;padding-bottom:118px;}
  #lac .page-hero.ph-editorial .ph-media{min-height:680px;}
  @media(max-width:900px){
    #lac .page-hero.ph-editorial .ph-copy{padding-top:64px;padding-bottom:40px;}
    #lac .page-hero.ph-editorial .ph-media{min-height:380px;}
  }

  /* award pair — back-to-back recognition, centred */
  .award-row{
    display:flex;align-items:stretch;justify-content:center;gap:0;flex-wrap:wrap;
    max-width:760px;margin:44px auto 0;
  }
  .award{flex:1 1 260px;text-align:center;padding:8px 30px;}
  .award .ico{font-size:44px;line-height:1;margin-bottom:14px;}
  .award .ttl{font-family:var(--font-head);font-weight:800;font-size:20px;color:var(--ink);}
  .award .sub{font-size:14px;color:var(--text);margin-top:7px;line-height:1.55;}
  .award-sep{width:1px;background:linear-gradient(180deg,transparent,#DfE3EA 22%,#DfE3EA 78%,transparent);}
  @media(max-width:560px){
    .award-sep{width:100%;height:1px;background:#DfE3EA;margin:24px 0;}
    .award{padding:0 10px;}
  }

  /* ===== geese flock on blue grounds =====
     White chevrons read on the dark blues; on the light bg-blue-soft they'd be
     invisible, so those get navy chevrons at a lower opacity instead. */
  .section-pad.bg-blue .ph-flock,
  .section-pad.bg-primary .ph-flock,
  .section-pad.bg-dark .ph-flock{opacity:.42;}
  .section-pad.bg-blue-soft .ph-flock{opacity:.22;}
  .section-pad.bg-blue-soft .ph-chevron::before,
  .section-pad.bg-blue-soft .ph-chevron::after{background:var(--accent);}
  /* keep content above the pattern */
  .section-pad.bg-blue > .container,
  .section-pad.bg-blue-soft > .container,
  .section-pad.bg-primary > .container,
  .section-pad.bg-dark > .container{position:relative;z-index:2;}

  /* ===== ambient geese video behind the light home hero =====
     v1 ran this full-bleed under a 72% navy scrim with white text. This hero is
     light with dark text, so the video sits behind a light scrim instead: the
     motion reads, the contrast is untouched. */
  .hero-split{position:relative;overflow:hidden;}
  .hero-split .hs-video{
    position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
    z-index:0;opacity:1;
  }
  /* Scrim is now horizontal, not flat: near-opaque behind the copy so dark text
     keeps its contrast, clearing toward the right so the geese footage actually
     reads. A uniform scrim had to stay heavy everywhere to protect the text,
     which is why the video was barely visible. */
  .hero-split::after{
    content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
    background:linear-gradient(100deg,
      rgba(255,255,255,.97) 0%,
      rgba(255,255,255,.95) 26%,
      rgba(255,255,255,.86) 40%,
      rgba(252,252,250,.62) 52%,
      rgba(248,248,245,.38) 64%,
      rgba(245,245,242,.20) 78%,
      rgba(245,245,242,.10) 100%);
  }
  /* stacked layout: copy sits under the visual, so protect it from the top down */
  @media(max-width:900px){
    .hero-split::after{
      background:linear-gradient(180deg,
        rgba(245,245,242,.16) 0%,
        rgba(250,250,248,.42) 26%,
        rgba(255,255,255,.86) 46%,
        rgba(255,255,255,.95) 60%,
        rgba(255,255,255,.97) 100%);
    }
  }
  .hero-split > .container{position:relative;z-index:2;}
  @media(prefers-reduced-motion:reduce){
    .hero-split .hs-video{display:none;}
  }

  /* ===== newsletter + lead-magnet capture ===== */
  .gp-modal{
    position:fixed;inset:0;z-index:3000;display:none;align-items:center;justify-content:center;
    padding:24px;background:rgba(0,25,70,.62);backdrop-filter:blur(3px);
  }
  .gp-modal.open{display:flex;}
  .gp-card{
    position:relative;width:100%;max-width:520px;background:#fff;border-radius:18px;overflow:hidden;
    box-shadow:0 30px 80px rgba(0,25,70,.42);animation:gpPop .35s cubic-bezier(.2,.8,.3,1);
  }
  @keyframes gpPop{from{opacity:0;transform:translateY(16px) scale(.98)}to{opacity:1;transform:none}}
  .gp-card .gp-banner{
    position:relative;background:linear-gradient(140deg,var(--primary) 0%,var(--accent) 100%);
    padding:30px 34px 26px;color:#fff;overflow:hidden;
  }
  .gp-card .gp-banner .ph-flock{opacity:.42;}
  .gp-card .gp-banner > *{position:relative;z-index:2;}
  .gp-card .gp-eyebrow{
    font-family:var(--font-head);font-size:11.5px;font-weight:800;letter-spacing:.16em;
    text-transform:uppercase;color:var(--gold);margin-bottom:10px;
  }
  .gp-card h3{color:#fff;font-size:24px;font-weight:800;line-height:1.2;letter-spacing:-.4px;}
  .gp-card .gp-sub{color:rgba(255,255,255,.9);font-size:14.5px;margin-top:10px;line-height:1.55;}
  .gp-body{padding:var(--sp-7) var(--sp-8) var(--sp-8);}
  .gp-body label{display:block;font-family:var(--font-head);font-size:12.5px;font-weight:700;color:var(--ink);margin-bottom:7px;}
  .gp-body input{
    width:100%;border:1px solid #CFD4DE;border-radius:10px;padding:13px 14px;font-size:15px;
    font-family:var(--font-body);color:var(--ink);
  }
  .gp-body input:focus{border-color:var(--primary);outline:none;box-shadow:0 0 0 3px rgba(0,59,166,.15);}
  .gp-body .gp-row{display:flex;gap:10px;margin-top:14px;flex-wrap:wrap;}
  .gp-body .gp-row .btn{flex:1;min-width:150px;}
  .gp-fine{font-size:12px;color:var(--muted, #6B6B6B);margin-top:14px;line-height:1.5;}
  .gp-close{
    position:absolute;top:14px;right:14px;z-index:3;width:34px;height:34px;border-radius:50%;
    background:rgba(255,255,255,.18);border:none;color:#fff;font-size:19px;cursor:pointer;line-height:1;
  }
  .gp-close:hover{background:rgba(255,255,255,.3);}
  .gp-done{display:none;text-align:center;padding:34px;}
  .gp-done .tick{
    width:60px;height:60px;border-radius:50%;background:#E7F6EC;color:#1A7F3C;font-size:30px;
    display:flex;align-items:center;justify-content:center;margin:0 auto 14px;
  }
  .gp-card.is-done .gp-body,.gp-card.is-done .gp-banner{display:none;}
  .gp-card.is-done .gp-done{display:block;}
  @media(prefers-reduced-motion:reduce){ .gp-card{animation:none;} }

  /* footer newsletter */
  .foot-news{margin-top:var(--sp-5);}
  /* The footer column is ~274px, so the input's 170px minimum plus the button
   never fit on one line — the button was wrapping and sitting half-width under
   a full-width field, which read as a mistake. Stack it deliberately. */
  .foot-news form{display:flex;flex-direction:column;gap:var(--sp-3);}
  .foot-news form .btn{width:100%;}
  .foot-news input{
    flex:1;min-width:170px;border:1px solid rgba(0,33,93,.18);border-radius:10px;
    padding:12px var(--sp-4);font-size:14px;font-family:var(--font-body);min-height:44px;}
  .foot-news input:focus{border-color:var(--primary);outline:none;box-shadow:0 0 0 3px rgba(0,59,166,.14);}
  .foot-news .btn{padding:12px var(--sp-5);font-size:12px;min-height:44px;}
  .foot-news .ok{display:none;font-size:13px;color:#1A7F3C;font-weight:600;margin-top:8px;}
  .foot-news.done .ok{display:block;}
  .foot-news.done form{display:none;}

  /* ===== news article pages ===== */
  .article-media{
    max-width:860px;margin:0 auto 40px;border-radius:16px;overflow:hidden;
    aspect-ratio:16/9;box-shadow:0 18px 44px rgba(0,33,93,.16);
  }
  .article-media img{width:100%;height:100%;object-fit:cover;display:block;}
  .article-body .lead{
    font-size:19px;line-height:1.7;color:var(--ink);font-family:var(--font-head);
    font-weight:600;margin-bottom:22px;
  }
  .article-body p{margin-bottom:18px;}
  .article-body p:last-child{margin-bottom:0;}
  .article-back{max-width:860px;margin:38px auto 0;}
  @media(max-width:640px){
    .article-media{aspect-ratio:4/3;margin-bottom:28px;}
    .article-body .lead{font-size:17px;}
  }

  /* ===== press-release style article content (e.g. event recaps) ===== */
  .article-body .lac-lede{
    font-size:19px;line-height:1.7;color:var(--ink);font-family:var(--font-head);font-weight:600;
  }
  .article-body .lac-meta{
    display:flex;gap:20px;flex-wrap:wrap;font-family:var(--font-head);font-weight:700;font-size:14px;
    color:var(--accent);margin:14px 0 26px;
  }
  .article-body .lac-sig-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin:24px 0 30px;}
  .article-body .lac-sig-card{
    background:var(--paper);border-top:4px solid var(--gold);border-radius:10px;padding:22px 20px;
  }
  .article-body .lac-sig-card h3{font-size:17px;font-weight:800;color:var(--primary);margin-bottom:8px;}
  .article-body .lac-sig-card p{font-size:14.5px;color:var(--text);margin-bottom:0;}
  .article-body .lac-quote{
    background:var(--accent);color:#fff;text-align:center;border-radius:16px;padding:40px 36px;margin:34px 0;
  }
  .article-body .lac-quote p{
    font-size:22px;font-style:italic;font-weight:500;line-height:1.5;margin-bottom:14px;color:#fff;
  }
  .article-body .lac-quote cite{
    font-style:normal;font-weight:700;color:var(--gold-light);font-size:14px;letter-spacing:.03em;
  }
  .article-body .lac-featured-guest{
    display:flex;flex-direction:column;align-items:center;text-align:center;max-width:320px;margin:30px auto;
  }
  .article-body .lac-featured-photo{
    width:100%;border-radius:16px;overflow:hidden;border:5px solid var(--gold);
    box-shadow:0 14px 34px rgba(0,0,0,.16);margin-bottom:16px;
  }
  .article-body .lac-featured-photo img{width:100%;height:auto;display:block;}
  .article-body .lac-featured-guest h4{font-size:19px;font-weight:800;color:var(--ink);margin-bottom:4px;}
  .article-body .lac-featured-guest p{font-size:14px;color:var(--text);margin-bottom:0;}
  .article-body .lac-guest-grid{
    display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:22px;margin-top:12px;
  }
  .article-body .lac-guest-card{text-align:center;}
  .article-body .lac-guest-photo{
    width:100%;aspect-ratio:1/1;border-radius:50%;overflow:hidden;border:4px solid var(--paper);margin:0 auto 12px;
  }
  .article-body .lac-guest-photo img{width:100%;height:100%;object-fit:cover;display:block;}
  .article-body .lac-guest-card h4{font-size:14.5px;font-weight:700;color:var(--ink);margin-bottom:3px;}
  .article-body .lac-guest-card p{font-size:12.5px;color:var(--text);line-height:1.4;margin-bottom:0;}
  .article-body .lac-mission-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;margin:20px 0 30px;}
  .article-body .lac-mission-card{
    background:var(--accent);border-left:4px solid var(--secondary);border-radius:10px;padding:22px 20px;
  }
  .article-body .lac-mission-card h3{color:var(--gold-light);font-size:16px;font-weight:800;margin-bottom:8px;}
  .article-body .lac-mission-card p{color:#e8ecf7;font-size:14.5px;margin-bottom:0;}
  .article-body .lac-cta{
    background:linear-gradient(135deg,var(--secondary),#a10f1f);color:#fff;text-align:center;
    border-radius:16px;padding:44px 28px;margin:34px 0;
  }
  .article-body .lac-cta h2{color:#fff;margin-bottom:10px;}
  .article-body .lac-cta p{color:#fff;opacity:.95;font-size:16px;max-width:520px;margin:0 auto 22px;}
  .article-body .lac-press-footer{
    text-align:center;color:var(--text);font-size:13px;line-height:1.8;margin-top:36px;
    padding-top:24px;border-top:1px solid #E4E8F0;
  }
  @media(max-width:900px){
    .article-body .lac-sig-grid{grid-template-columns:1fr;}
    .article-body .lac-guest-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
    .article-body .lac-mission-grid{grid-template-columns:1fr;}
  }

  /* ===== hero crossfade carousel (LAC) =====
     Slides stack and cross-dissolve; nothing slides, so it stays calm behind
     the headline. Scrim and dots sit above the slides. */
  .ph-carousel{position:relative;}
  .ph-carousel .cs-slide{
    position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;
    opacity:0;transition:opacity 1.4s cubic-bezier(.4,0,.2,1);
  }
  .ph-carousel .cs-slide.is-active{opacity:1;}
  .ph-carousel .cs-dots{
    position:absolute;right:26px;bottom:22px;z-index:3;display:flex;gap:9px;
  }
  .ph-carousel .cs-dot{
    width:9px;height:9px;padding:0;border-radius:50%;cursor:pointer;
    background:rgba(255,255,255,.55);border:1px solid rgba(0,33,93,.25);
    transition:all var(--dur) var(--ease-out);
  }
  .ph-carousel .cs-dot.is-active{background:var(--gold);border-color:var(--gold);width:26px;border-radius:6px;}
  .ph-carousel .cs-dot:hover{background:rgba(255,255,255,.9);}
  @media(max-width:900px){ .ph-carousel .cs-dots{right:16px;bottom:14px;} }
  @media(prefers-reduced-motion:reduce){ .ph-carousel .cs-slide{transition:none;} }

  /* ===== CONCEPT 5 — product hero (Born to Soar) =====
     The book is an object on a transparent PNG, not a scene, so it can't take
     the editorial full-bleed crop. This grounds it on light with a warm
     pedestal glow and a format/price strip under the CTAs. */
  .page-hero.ph-product{
    background:
      radial-gradient(ellipse 900px 520px at 78% 42%, rgba(252,208,28,.10), transparent 66%),
      linear-gradient(180deg,#fff 0%,var(--paper) 100%);
    color:var(--ink);
  }
  .page-hero.ph-product .ph-grid{grid-template-columns:1.02fr .98fr;align-items:center;}
  .page-hero.ph-product .crumbs{color:#6B6B6B;}
  .page-hero.ph-product .crumbs a:hover{color:var(--accent);}
  .page-hero.ph-product .eyebrow{color:var(--gold-deep);}
  .page-hero.ph-product .eyebrow::before{background:var(--gold-deep);}
  .page-hero.ph-product h1{color:var(--ink);font-size:clamp(38px,5vw,60px);}
  .page-hero.ph-product h1 .accent-gold{color:var(--gold-deep);}
  .page-hero.ph-product .ph-sub{color:var(--text);}

  /* pedestal glow sits behind the book so it doesn't float on the page */
  .page-hero.ph-product .ph-media.is-book{position:relative;}
  .page-hero.ph-product .ph-media.is-book::before{
    content:"";position:absolute;left:50%;top:56%;transform:translate(-50%,-50%);
    width:82%;height:78%;border-radius:50%;
    background:radial-gradient(ellipse at center, rgba(0,33,93,.16), transparent 68%);
    filter:blur(6px);z-index:0;
  }
  .page-hero.ph-product .ph-media.is-book img{
    position:relative;z-index:1;
    /* shadow retuned for a light ground — the navy version was far too heavy */
    filter:drop-shadow(0 26px 40px rgba(9,15,35,.24));
  }

  /* format / price strip */
  .ph-meta{
    display:flex;flex-wrap:wrap;gap:0;margin-top:30px;
    border-top:1px solid #E3E5EC;padding-top:20px;
  }
  .ph-meta .m{padding-right:30px;margin-right:30px;border-right:1px solid #E3E5EC;}
  .ph-meta .m:last-child{border-right:none;padding-right:0;margin-right:0;}
  .ph-meta .m .k{
    font-family:var(--font-head);font-size:11px;font-weight:700;letter-spacing:.12em;
    text-transform:uppercase;color:var(--gold-deep);
  }
  .ph-meta .m .v{font-family:var(--font-head);font-weight:800;color:var(--accent);font-size:17px;margin-top:5px;}
  @media(max-width:900px){
    .page-hero.ph-product .ph-grid{grid-template-columns:1fr;}
    .page-hero.ph-product .ph-media.is-book{order:-1;}
  }
  @media(max-width:560px){
    .ph-meta .m{padding-right:18px;margin-right:18px;}
    .ph-meta .m .v{font-size:15px;}
  }

  /* ===== Blue palette section backgrounds =====
     The program pages ran white/paper the whole way down once the heroes went
     light. These bring the brand blue back in as section grounds. */
  .bg-blue-soft{background:linear-gradient(180deg,#EBEFF8 0%,#D6E0F1 100%);}

  /* deep blue ground for a standout section. #003BA6 -> navy keeps white text
     above 5:1 contrast; --primary (#003BA6) would only reach ~3.3:1 and fail. */
  .bg-blue{
    background:linear-gradient(160deg,#003BA6 0%,var(--accent) 100%);
    color:#fff;
  }
  .bg-blue .section-head h2{color:#fff;}
  .bg-blue .section-head h2 .blue{color:var(--gold-light);}
  .bg-blue .section-head h2 .red{color:#fff;}
  .bg-blue .section-eyebrow{color:var(--gold-light);}
  .bg-blue .section-head p{color:rgba(255,255,255,.88);}
  .bg-blue .container > .reveal > p{color:rgba(255,255,255,.88);}
  /* BUGFIX: .bg-blue sets color:#fff for text sitting directly on the blue
     ground, but white cards inside it were inheriting that too — a bare <p>
     has no colour of its own, so card body copy rendered white-on-white and
     read as an empty gap. Headings/lists were unaffected because they set
     their own colour. Cards are a light surface: restore normal text colours. */
  .bg-blue .tile{color:var(--text);}
  .bg-blue .tile p{color:var(--text);}
  .bg-blue .tile h3{color:var(--ink);}
  .bg-blue .tile a:not(.btn){color:var(--blue-solid);}

  /* stat strip — gives a light, media-free hero visual weight without photos */
  .hero-stats{
    display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin-top:46px;
  }
  .hero-stats .stat{
    background:#fff;border:1px solid #E8EAF0;border-radius:14px;padding:26px 18px;text-align:center;
    box-shadow:0 8px 24px rgba(0,33,93,.07);
  }
  .hero-stats .stat .num{
    font-family:var(--font-head);font-size:clamp(28px,3.4vw,38px);font-weight:800;
    color:var(--accent);line-height:1;letter-spacing:-1px;
  }
  .hero-stats .stat .lbl{
    font-family:var(--font-head);font-size:12px;font-weight:700;letter-spacing:.1em;
    text-transform:uppercase;color:var(--gold-deep);margin-top:10px;
  }
  .hero-stats .stat .sub{font-size:13px;color:var(--text);margin-top:6px;line-height:1.5;}
  @media(max-width:860px){
    .hero-stats{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;}
  }
  @media(max-width:400px){
    .hero-stats .stat{padding:20px 12px;}
  }

  /* GPLI course catalogue lists */
  .course-list{list-style:none;margin:0;padding:0;}
  .course-list li{
    position:relative;padding-left:16px;margin-bottom:7px;font-size:14.5px;line-height:1.5;color:var(--text);
  }
  .course-list li::before{
    content:"";position:absolute;left:0;top:8px;width:5px;height:5px;border-radius:50%;background:var(--gold);
  }
  .course-list li:last-child{margin-bottom:0;}
  .tile{
    background:#fff;border-radius:14px;padding:var(--sp-7);box-shadow:0 10px 30px rgba(0,0,0,.07);
    border:1px solid #EEF0F6;
  }
  .tile h3{font-size:19px;font-weight:800;margin-bottom:10px;}
  .tile p{font-size:14.5px;line-height:1.7;}
  .tile .price{font-family:var(--font-head);font-weight:800;color:var(--gold-deep);font-size:22px;margin:14px 0;}
  /* The one highlighted "pull quote" tile in a grid of plain cards — kept as
     an intentional accent, but given the same label-then-text structure as
     its siblings (instead of a lone centered line) so it reads as part of
     the same row rather than a mismatched leftover. */
  .tile-quote{background:var(--accent);border:none;}
  .tile-quote .tile-quote-label{
    font-family:var(--font-head);font-size:12px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;
    color:var(--gold-light);margin-bottom:10px;
  }
  .tile-quote p{color:#fff;font-size:17px;font-style:italic;font-weight:500;line-height:1.55;}

  /* people */
  .people{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--sp-6);}
  .person{
    background:#fff;border-radius:16px;padding:30px 28px;box-shadow:0 10px 30px rgba(0,0,0,.07);
    border:1px solid #EEF0F6;transition:transform var(--dur) var(--ease-out),box-shadow var(--dur) var(--ease-out);
    text-align:center;
  }
  .person:hover{transform:translateY(-6px);box-shadow:0 20px 50px rgba(0,0,0,.13);}
  .person .avatar{width:84px;height:84px;border-radius:50%;overflow:hidden;margin:0 auto 16px;box-shadow:0 8px 20px rgba(0,0,0,.15);}
  /* These headshots are framed with the face in the upper portion of the
     shot (room left below for a nameplate/background), so a plain center
     crop clipped into the top of the head — biasing the crop upward keeps
     the whole head in frame. */
  .person .avatar img{width:100%;height:100%;object-fit:cover;object-position:center 15%;}
  .person h3{font-size:18px;font-weight:800;text-align:center;}
  .person .role{color:var(--accent);font-size:13px;font-weight:700;text-align:center;margin:4px 0;}
  .person .location{color:#8A8A8A;font-size:12px;text-align:center;margin:0 0 12px;}
  .person .view-bio{
    font-family:var(--font-head);font-size:11.5px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;
    color:var(--accent);background:#fff;border:1.5px solid var(--accent);border-radius:30px;
    padding:8px 18px;cursor:pointer;transition:all var(--dur) var(--ease-out);display:inline-flex;align-items:center;gap:6px;
  }
  .person .view-bio:hover{background:var(--accent);color:#fff;}
  .person p{font-size:14px;line-height:1.7;text-align:center;color:#555;}

  /* gallery */
  .gallery{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;}
  .gallery .item{position:relative;border-radius:12px;overflow:hidden;aspect-ratio:4/3;cursor:pointer;box-shadow:0 10px 25px rgba(0,0,0,.12);}
  .gallery .item img{width:100%;height:100%;object-fit:cover;transition:transform var(--dur) var(--ease-out);}
  .gallery .item:hover img{transform:scale(1.1);}

  /* accordion (FAQ) */
  .accordion{max-width:860px;margin:0 auto;}
  .acc-item{background:#fff;border:1px solid #E8ECF3;border-radius:12px;margin-bottom:14px;overflow:hidden;box-shadow:0 6px 18px rgba(0,0,0,.04);}
  .acc-head{
    width:100%;display:flex;justify-content:space-between;align-items:center;gap:16px;text-align:left;
    padding:20px 24px;background:none;border:none;cursor:pointer;
    font-family:var(--font-head);font-size:16px;font-weight:700;color:var(--ink);
  }
  .acc-head .icon{flex:0 0 auto;width:28px;height:28px;border-radius:50%;background:var(--primary);color:#fff;display:flex;align-items:center;justify-content:center;font-size:16px;transition:transform var(--dur) var(--ease-out),background-color var(--dur-fast) linear;}
  .acc-item.open .acc-head .icon{background:var(--accent);transform:rotate(45deg);}
  .acc-body{max-height:0;overflow:hidden;transition:max-height var(--dur-slow) var(--ease-io);}
  .acc-body p{padding:0 24px 22px;color:#555;line-height:1.8;font-size:15px;}
  .acc-item.open .acc-body{max-height:420px;}
  .faq-tabs{max-width:860px;margin:0 auto 28px;display:flex;flex-wrap:wrap;gap:10px;justify-content:center;}
  .faq-tab{font-family:var(--font-body);font-size:14px;font-weight:700;color:var(--accent);background:#F6F8FB;border:1px solid #E8ECF3;border-radius:999px;padding:9px 18px;cursor:pointer;transition:color var(--dur-fast) linear,background-color var(--dur-fast) linear,border-color var(--dur-fast) linear;}
  .faq-tab:hover{background:#EDF1F8;}
  .faq-tab.active{background:var(--accent);border-color:var(--accent);color:#fff;}
  /* Visible by default: filtering is a JS enhancement, so without it every
     question must still be readable rather than the page appearing empty. */
  .acc-item[data-category]{display:block;}
  .js .acc-item[data-category]{display:none;}
  .js .acc-item[data-category].faq-visible{display:block;}

  /* news */
  /* display:flex + margin-top:auto on .more pins "Read More" to the same
     bottom edge on every card, so cards of equal grid height (the grid
     already stretches them) don't read as uneven when one excerpt runs
     longer than another. */
  .news-card{background:#fff;border-radius:16px;overflow:hidden;box-shadow:0 12px 35px rgba(0,0,0,.08);transition:transform var(--dur) var(--ease-out),box-shadow var(--dur) var(--ease-out);display:flex;flex-direction:column;height:100%;}
  .news-card:hover{transform:translateY(-6px);box-shadow:0 22px 55px rgba(0,0,0,.14);}
  .news-card .thumb{aspect-ratio:16/9;overflow:hidden;}
  .news-card .thumb img{width:100%;height:100%;object-fit:cover;transition:transform var(--dur) var(--ease-out);}
  .news-card:hover .thumb img{transform:scale(1.04);}
  .news-card .body{padding:var(--sp-7);display:flex;flex-direction:column;flex:1;}
  .news-card .date{font-family:var(--font-head);font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--accent);margin-bottom:10px;}
  .news-card h3{font-size:19px;font-weight:800;margin-bottom:10px;line-height:1.35;}
  .news-card p{font-size:14px;line-height:1.7;color:#555;}
  .news-card .more{display:inline-flex;align-items:center;gap:6px;margin-top:auto;padding-top:14px;font-family:var(--font-head);font-weight:700;font-size:13px;color:var(--accent);}
  .news-card .more:hover{color:var(--primary);}
  .news-grid{align-items:stretch;}

  /* ---------- News page: search + category filter ---------- */
  .news-filter-bar{
    display:flex;gap:14px;flex-wrap:wrap;align-items:center;margin-bottom:36px;
    padding:18px;background:var(--paper);border-radius:14px;
  }
  .news-filter-field{flex:1 1 200px;}
  .news-filter-bar input[type="search"],
  .news-filter-bar select{
    width:100%;padding:12px 16px;border:1px solid #E4E8F0;border-radius:10px;
    font-family:var(--font-body);font-size:14px;color:var(--ink);background:#fff;
  }
  .news-filter-bar input[type="search"]:focus,
  .news-filter-bar select:focus{outline:2px solid var(--primary);outline-offset:1px;}
  .news-filter-bar .btn{flex:0 0 auto;}
  .news-filter-clear{
    font-family:var(--font-head);font-weight:700;font-size:13px;color:var(--text);
    text-decoration:underline;flex:0 0 auto;
  }
  .news-filter-clear:hover{color:var(--primary);}
  .news-empty{text-align:center;padding:60px 20px;color:var(--text);}

  /* ---------- News page: pagination ---------- */
  .news-pagination{display:flex;justify-content:center;gap:8px;flex-wrap:wrap;margin-top:48px;}
  .news-pagination .page-btn{
    min-width:40px;height:40px;padding:0 12px;border-radius:8px;background:#fff;border:1px solid #E4E8F0;
    display:inline-flex;align-items:center;justify-content:center;font-family:var(--font-head);font-weight:700;
    font-size:13.5px;color:var(--ink);transition:all var(--dur) var(--ease-out);
  }
  .news-pagination .page-btn:hover{border-color:var(--primary);color:var(--primary);}
  .news-pagination .page-btn.active{background:var(--primary);border-color:var(--primary);color:#fff;}
  @media(max-width:640px){
    .news-filter-bar{flex-direction:column;align-items:stretch;}
    .news-filter-bar .btn,.news-filter-clear{width:100%;text-align:center;}
  }

  /* contact */
  .contact-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:44px;align-items:start;}
  .form-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:22px;}
  .field{display:flex;flex-direction:column;}
  .field.full{grid-column:1 / -1;}
  .field label{font-family:var(--font-head);font-size:13px;font-weight:700;margin-bottom:8px;color:var(--ink);}
  .field input,.field select,.field textarea{
    width:100%;border:none;border-bottom:1px solid #767676;padding:4px 0 16px;
    font-family:var(--font-body);font-size:16px;color:var(--ink);background:transparent;transition:border-color .3s;
  }
  .field textarea{resize:none;height:120px;}
  /* QA: outline:none removed. Keyboard focus now shows the global ring plus a
     thicker rule; mouse focus keeps the subtler rule-only treatment. */
  .field input:focus,.field textarea:focus,.field select:focus{border-bottom-color:var(--gold-deep);border-bottom-width:2px;}
  .field input::placeholder,.field textarea::placeholder{color:#6E6E6E;}
  .field-group{border:none;padding:0;margin:0;}
  .field-group legend{font-family:var(--font-head);font-size:13px;font-weight:700;margin-bottom:8px;color:var(--ink);padding:0;}
  .field-checkbox{display:flex;align-items:center;gap:8px;font-size:15px;color:var(--ink);margin-bottom:8px;cursor:pointer;}
  .field-checkbox input{width:auto;border:none;padding:0;}
  .field-help{font-size:12px;color:#767676;margin-top:6px;}
  .form-status{font-size:14px;margin-bottom:12px;color:var(--primary);}
  .form-status.is-error{color:#C0392B;}
  .form-status:empty{display:none;}
  .contact-info .tile{margin-bottom:20px;}
  .contact-info .tile h3{display:flex;align-items:center;gap:10px;}
  .contact-info .tile h3 svg{width:20px;height:20px;fill:var(--primary);}
  .contact-info .tile p{font-size:15px;line-height:1.7;}
  .contact-info .tile a:not(.btn){color:var(--accent);font-weight:600;}
  .contact-info .tile a:not(.btn):hover{color:var(--accent);}

  /* modal */
  .modal{
    position:fixed;inset:0;z-index:3000;background:rgba(0,0,0,.89);display:none;
    align-items:center;justify-content:center;padding:24px;opacity:0;transition:opacity .3s;
  }
  .modal.show{display:flex;opacity:1;}
  .modal-card{background:#fff;border-radius:18px;max-width:760px;width:100%;max-height:86vh;overflow-y:auto;padding:40px;position:relative;animation:fadeInDown .45s ease;}
  @keyframes fadeInDown{from{opacity:0;transform:translateY(-30px)}to{opacity:1;transform:translateY(0)}}
  .modal-close{position:absolute;top:16px;right:16px;width:38px;height:38px;border-radius:50%;background:#F0F2F7;border:none;font-size:20px;cursor:pointer;color:#555;transition:all var(--dur) var(--ease-out);}
  .modal-close:hover{background:var(--primary);color:#fff;}
  .modal-card .m-avatar{width:110px;height:110px;border-radius:50%;overflow:hidden;margin:0 auto 20px;box-shadow:0 12px 30px rgba(0,0,0,.18);}
  .modal-card .m-avatar img{width:100%;height:100%;object-fit:cover;}
  .modal-card .m-name{text-align:center;font-size:24px;font-weight:800;color:var(--ink);}
  .modal-card .m-role{text-align:center;color:var(--accent);font-weight:700;margin-bottom:20px;}
  .modal-card .m-bio{font-size:15px;line-height:1.85;color:#444;}

  /* reveal on scroll */
  .reveal{opacity:1;}
  /* Only hide for the reveal animation when JS is actually running — otherwise
     a script failure leaves the entire page body permanently invisible. */
  .js .reveal{
    opacity:0;
    /* 34px was far enough to read as a slide; 14px reads as the element
       settling into place, which is what a reveal should feel like. */
    transform:translateY(14px);
    transition:opacity var(--dur-slow) var(--ease-out),
               transform var(--dur-slow) var(--ease-out);
    will-change:opacity,transform;
  }
  .js .reveal.visible{opacity:1;transform:none;will-change:auto;}

  /* Stagger within a group so a row of cards arrives in sequence rather than
     in lockstep. Capped at six: past that the last item waits long enough to
     feel broken rather than deliberate. */
  .js .g3 > .reveal:nth-child(1),.js .g4 > .reveal:nth-child(1),
  .js .people > .reveal:nth-child(1),.js .tiles > .reveal:nth-child(1){transition-delay:0ms;}
  .js .g3 > .reveal:nth-child(2),.js .g4 > .reveal:nth-child(2),
  .js .people > .reveal:nth-child(2),.js .tiles > .reveal:nth-child(2){transition-delay:60ms;}
  .js .g3 > .reveal:nth-child(3),.js .g4 > .reveal:nth-child(3),
  .js .people > .reveal:nth-child(3),.js .tiles > .reveal:nth-child(3){transition-delay:120ms;}
  .js .g3 > .reveal:nth-child(4),.js .g4 > .reveal:nth-child(4),
  .js .people > .reveal:nth-child(4),.js .tiles > .reveal:nth-child(4){transition-delay:180ms;}
  .js .g3 > .reveal:nth-child(5),.js .g4 > .reveal:nth-child(5),
  .js .people > .reveal:nth-child(5),.js .tiles > .reveal:nth-child(5){transition-delay:240ms;}
  .js .g3 > .reveal:nth-child(n+6),.js .g4 > .reveal:nth-child(n+6),
  .js .people > .reveal:nth-child(n+6),.js .tiles > .reveal:nth-child(n+6){transition-delay:300ms;}

  /* footer */
  .site-footer{background:var(--paper);color:var(--text);padding:70px 0 0;border-top:1px solid #E6E4DE;}
  .footer-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr 1.2fr;gap:44px;}
  .footer-col .f-logo{display:block;height:36px;width:auto;margin-bottom:18px;}
  .footer-col p{font-size:14px;line-height:1.8;color:var(--text);margin-bottom:20px;}
  /* The socials sat flush against the subscribe button — no margin at all,
   so the two groups read as one. */
  .socials{display:flex;gap:var(--sp-3);margin-top:var(--sp-6);}
  .socials a{
    width:40px;height:40px;border-radius:50%;background:#EEF0F6;display:flex;align-items:center;justify-content:center;
    transition:all var(--dur) var(--ease-out);
  }
  .socials a:hover{background:var(--primary);transform:translateY(-3px);}
  .socials svg{width:18px;height:18px;fill:var(--accent);}
  .socials a:hover svg{fill:#fff;}
  .socials a:hover{color:var(--primary);}
  .footer-col h4{color:var(--accent);font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:.1em;margin-bottom:20px;}
  .footer-col ul{list-style:none;}
  .footer-col ul li{margin-bottom:11px;}
  .footer-col ul a{font-size:14px;color:var(--text);transition:color .3s,padding-left .3s;}
  .footer-col ul a:hover{color:var(--accent);padding-left:6px;}
  .footer-col .contact-item{margin-bottom:14px;font-size:14px;color:var(--text);line-height:1.6;}
  .footer-bottom{
    border-top:1px solid #E6E4DE;margin-top:54px;padding:24px 0;
    display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap;font-size:13px;color:#8a8a85;
  }
  .footer-bottom .legal{display:flex;gap:18px;flex-wrap:wrap;}
  .footer-bottom .legal a:hover{color:var(--accent);}
  .footer-bottom a{color:var(--text);}

  /* page router */
  .page{display:none;}
  .page.active{display:block;animation:pageFade .5s ease;}
  @keyframes pageFade{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}

  /* QA (WCAG 2.3.3): honour the OS "reduce motion" setting. The infinite client/
     logo marquees and scroll indicator are stopped outright; everything else
     collapses to an instant transition. .reveal is forced visible so content
     never depends on an animation that no longer runs. */
  @media(prefers-reduced-motion:reduce){
    *,*::before,*::after{
      animation-duration:.001ms !important;
      animation-iteration-count:1 !important;
      transition-duration:.001ms !important;
      scroll-behavior:auto !important;
    }
    html{scroll-behavior:auto;}
    .marquee-track,.carousel-track{animation:none !important;transform:none !important;}
    .scroll-guide::after{animation:none !important;}
    .reveal{opacity:1 !important;transform:none !important;}
  }

  /* ================= SHOP / CART / BOOK ================= */
  /* QA: as a flex child this was shrinking below its set width (36px actual),
     breaking the touch-target minimum — flex-shrink:0 holds the size. */
  .cart-close{background:none;border:none;font-size:26px;cursor:pointer;color:#666;line-height:1;}
     borderless. Uses a perceivable border, and outline:none removed. */
  .cart-promo-note{font-size:12px;color:#2b8a3e;min-height:16px;margin-bottom:8px;}

  /* ================= RESPONSIVE ================= */
  @media(max-width:1024px){
    .main-nav{display:none;}
    .menu-toggle{display:flex;}
    .cards3,.flip-grid,.g4,.g5,.g6,.vt-grid,.people,.team-grid,.res-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
    .team-grid{grid-template-columns:repeat(3,minmax(0,1fr));}
    .g3{grid-template-columns:1fr;}
    .why-wrap,.contact-grid,.case-wrap,.footer-grid{grid-template-columns:1fr;}
    /* .why-wrap.author-wrap's own rule (two classes) is more specific than the
       plain .why-wrap responsive override above, so it kept winning at every
       width and never actually stacked to one column on mobile — the image
       stayed squeezed into its 0.8fr slice beside the full-width text. */
    .why-wrap.author-wrap{grid-template-columns:1fr;}
    .footer-grid{gap:34px;}
    /* 2-up for the testimonial carousel at tablet width — without resetting
       min-width, the base rule's 260px floor (needed at the 3-up desktop
       width) forced every card wider than its column and overflowed. */
    .testi-grid > .testi{flex-basis:calc((100% - var(--sp-6)) / 2);min-width:0;}
  }
  @media(max-width:480px){
    .site-header .container{padding:0 16px;}
    .site-logo img{height:30px;}
    .header-cta{gap:8px;}
    /* QA: header controls kept a >=44px hit area at mobile (was 33-36px) */
    .header-cta .btn{padding:9px 12px;font-size:10.5px;min-height:44px;}
  }
  @media(max-width:640px){
    .cards3,.flip-grid,.g3,.g4,.g5,.g6,.vt-grid,.people,.team-grid,.res-grid,.g2,.photo-row,.gallery{grid-template-columns:1fr;}
    .team-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
    .testi-grid > .testi{flex-basis:88%;min-width:0;}
    .section-pad{padding:60px 0;}
    .hero{min-height:80vh;}
    .hero-grid{grid-template-columns:1fr;}
    .hero-kicker{justify-content:center;}
    .hero-kicker::after{display:block;}
    .hero-actions{justify-content:center;}
    .hero-actions .btn,.cta-actions .btn{width:100%;}
    .testi-carousel{padding:0 40px;}
    .form-grid{grid-template-columns:1fr;}
    .case-wrap{padding:28px;}
    .hero h1{letter-spacing:-.5px;}
  }

/* News filters + pagination: these are small pill buttons, so they need an
   explicit floor to stay above the 44px minimum touch target on phones. */
.news-filters .btn,
.news-pagination .btn,
.faq-tab{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:44px;
}
@media (max-width:480px){
  .news-filters,
  .news-pagination{ gap:6px; }
  .news-filters .btn,
  .news-pagination .btn{ padding-left:14px; padding-right:14px; }
}

/* Imported page-builder prose: keep inline images at a sane size. Content
   pulled from the old site includes 150px icon graphics that should not be
   blown up to the full column width. */
.prose img{
  max-width:100%;
  height:auto;
  margin:18px 0;
}
.prose img[src*="-150x150"]{ width:96px; }

/* Honeypot: visually and semantically hidden, but still submitted by bots that
   fill every field they find. Never use display:none — some bots skip those. */
.hp-field{
  position:absolute !important;
  left:-9999px;
  width:1px;height:1px;
  overflow:hidden;
}

/* Touch targets: the header logo and "Read More" links fell under the 44px
   minimum on phones. Pad them out without changing how they look. */
@media (max-width:900px){
  .site-logo{ display:inline-flex; align-items:center; min-height:44px; }
  .news-card .more{ display:inline-flex; align-items:center; min-height:44px; }
}

/* Embedded (YouTube) videos in a .vt tile. .vt is 16/10 for self-hosted clips
   that are object-fit:cover'd; an iframe can't be cropped, so an embed needs
   the real 16/9 or the player letterboxes inside the tile. */
.vt-embed{ aspect-ratio:16/9; }
.vt-embed iframe{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  border:0;
}


/* ---------- Press feedback ---------- */
/* Buttons had hover states but no :active, so a click went unacknowledged
   until navigation happened. A 1px settle is enough. */
.btn:active{ transform:translateY(1px); transition-duration:var(--dur-fast); }
.acc-head:active .icon{ transform:scale(.94); }
.faq-tab:active,.news-filters .btn:active,.news-pagination .btn:active{ transform:translateY(1px); }
.person:active,.news-card:active{ transition-duration:var(--dur-fast); }

/* Links pick up the shared curve rather than snapping between colours. */
a{ transition:color var(--dur-fast) linear; }

/* The header carried a permanent shadow, which read as a floating bar even at
   the top of the page. Let it earn its depth once content passes beneath. */
.site-header{
  /* Same geometry, zero alpha — `none` has no interpolatable value, so
     transitioning from it snaps instead of fading. */
  box-shadow:0 4px 15px rgba(0,0,0,0);
  transition:box-shadow var(--dur) var(--ease-out);
}
.site-header.is-stuck{ box-shadow:0 4px 15px rgba(0,0,0,.08); }

@media(prefers-reduced-motion:reduce){
  .btn:active,.faq-tab:active,.acc-head:active .icon,
  .news-filters .btn:active,.news-pagination .btn:active{ transform:none; }
  .site-header{ transition:none; }
}

/* ---------- FAQ search ---------- */
.faq-search{max-width:860px;margin:0 auto 18px;}
.faq-search input[type="search"]{
  width:100%;
  font-family:var(--font-body);font-size:15px;color:var(--ink);
  padding:14px 18px;
  border:1px solid #E8ECF3;border-radius:var(--radius);
  background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%236B6B6B' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E") no-repeat 18px 50%;
  padding-left:48px;
  transition:border-color var(--dur-fast) linear,box-shadow var(--dur) var(--ease-out);
}
.faq-search input[type="search"]::placeholder{color:#6B6B6B;}
.faq-search input[type="search"]:focus{
  outline:none;
  border-color:var(--primary);
  box-shadow:0 0 0 3px rgba(0,59,166,.12);
}
.faq-count{margin:10px 2px 0;font-size:14px;color:#6B6B6B;min-height:20px;}

/* Visually hidden but available to screen readers. */
.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;
}

/* ---------- Promotions ("What's On") ---------- */
.promo-band{background:linear-gradient(180deg,var(--paper) 0%,#fff 100%);}
/* One promotion per slide — a carousel identical in spirit to .testi-carousel,
   so this never turns into a cramped multi-up grid as more events get added. */
.promo-carousel{position:relative;padding:0 50px;max-width:1000px;margin:0 auto;}
.promo-grid{display:flex;gap:var(--sp-6);transition:transform .5s var(--ease-out);will-change:transform;}
.promo-grid > .promo-card{flex:0 0 100%;}
.promo-card{
  display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);align-items:stretch;
  background:#fff;border:1px solid #E8ECF3;border-radius:18px;overflow:hidden;
  box-shadow:0 14px 40px rgba(0,0,0,.07);
  transition:transform var(--dur) var(--ease-out),box-shadow var(--dur) var(--ease-out);
}
.promo-card:hover{transform:translateY(-4px);box-shadow:0 24px 60px rgba(0,0,0,.12);}
/* width:100% is required here, not just aspect-ratio — without it, a box
   whose only sizing hint is aspect-ratio can size itself off a large child
   image's intrinsic pixel dimensions instead of its actual grid column,
   which is exactly what made one event's photo overflow its card while the
   other (a smaller source image) happened to fit. */
.promo-media{background:#0A1B3D;width:100%;}
/* Flyers carry their own text, not a photo meant to be cropped — `cover`
   inside the narrower single-card column was clipping the left edge of the
   poster. `contain` keeps the whole flyer readable, letterboxed on the
   navy background rather than losing content. */
.promo-media img{width:100%;height:100%;object-fit:contain;display:block;}
/* Flex column so the CTA/Facebook-link row pins to the bottom (margin-top:auto
   on .promo-actions) instead of floating right under a short description while
   a taller neighboring slide leaves the card stretched with blank space. */
.promo-body{padding:var(--sp-8) var(--sp-8) var(--sp-8);display:flex;flex-direction:column;}
.promo-actions{margin-top:auto;}
/* align-self:flex-start is required now that .promo-body is a column flex
   container — flex items stretch to fill the cross-axis (full width) by
   default, which was inflating this inline-block badge into a full-width
   bar instead of a content-sized pill. */
.promo-type{
  display:inline-block;align-self:flex-start;font-family:var(--font-head);font-size:11px;font-weight:800;
  letter-spacing:.16em;text-transform:uppercase;color:#fff;background:var(--secondary);
  border-radius:999px;padding:5px 12px;margin-bottom:14px;
}
.promo-body h3{font-family:var(--font-head);font-size:26px;font-weight:800;color:var(--ink);line-height:1.2;}
.promo-sub{color:var(--primary);font-weight:700;margin-top:6px;}
.promo-body p{margin-top:10px;color:var(--text);line-height:1.7;}
.promo-meta{margin:20px 0 24px;display:grid;gap:10px;}
.promo-meta > div{display:grid;grid-template-columns:92px minmax(0,1fr);gap:12px;align-items:baseline;}
.promo-meta dt{
  font-family:var(--font-head);font-size:11px;font-weight:800;letter-spacing:.12em;
  text-transform:uppercase;color:#6B6B6B;
}
.promo-meta dd{margin:0;font-size:15px;color:var(--ink);font-weight:600;}
.promo-fb{
  display:inline-flex;align-items:center;gap:8px;margin-left:14px;font-family:var(--font-head);
  font-size:13px;font-weight:700;color:#1877F2;text-decoration:none;
}
.promo-fb:hover{text-decoration:underline;}
@media(max-width:900px){
  .promo-carousel{padding:0 40px;}
  /* Switched from grid to a plain flex column here — a CSS-grid auto row
     sized around an aspect-ratio box turned out to size some images off
     their own intrinsic pixels instead of the square the aspect-ratio
     asked for (visible only on some source images, not others). Flex
     column stacking doesn't have that row-sizing quirk. */
  .promo-card{display:flex;flex-direction:column;}
  .promo-media{aspect-ratio:1/1;}
  .promo-body{padding:var(--sp-6);}
  .promo-body h3{font-size:22px;}
  .promo-meta > div{grid-template-columns:80px minmax(0,1fr);}
}
@media(max-width:900px){
  .carousel-nav{width:40px;height:40px;}
  .carousel-nav svg{width:16px;height:16px;}
}

/* ---------- In the media ---------- */
/* Two cards of unequal content: a video with a fixed 16:9 embed, and an
   article with none. Stretching both to the tallest and pinning the action to
   the bottom keeps their baselines aligned instead of leaving the shorter card
   floating with dead space beside it. */
.media-grid{
  display:grid;
  /* Exactly two items, so an explicit pair beats auto-fit — that was
     generating a third, empty track and narrowing both cards. */
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:var(--sp-6);
  align-items:stretch;
}
@media(max-width:820px){ .media-grid{grid-template-columns:minmax(0,1fr);} }
.media-item{
  display:flex;flex-direction:column;
  background:#fff;border:1px solid #E8ECF3;border-radius:18px;overflow:hidden;
  box-shadow:0 12px 34px rgba(0,0,0,.07);
  transition:transform var(--dur) var(--ease-out),box-shadow var(--dur) var(--ease-out);
}
.media-item:hover{transform:translateY(-4px);box-shadow:0 22px 52px rgba(0,0,0,.12);}
.media-body{display:flex;flex-direction:column;flex:1;padding:var(--sp-7);}
.media-source{
  font-family:var(--font-head);font-size:11px;font-weight:800;letter-spacing:.14em;
  text-transform:uppercase;color:var(--secondary);margin-bottom:10px;
}
.media-item h3{font-family:var(--font-head);font-size:21px;font-weight:800;color:var(--ink);line-height:1.3;}
.media-body p{margin-top:12px;color:var(--text);line-height:1.7;}
/* margin-top:auto pins the button to the bottom of whichever card is shorter,
   so both actions sit on the same line. */
.media-action{
  margin-top:auto;align-self:flex-start;
  /* The outline and solid buttons render at different heights (border + icon),
     which left the two actions off by a few pixels. Pin the box. */
  min-height:48px;padding-top:0;padding-bottom:0;
}
.media-action svg{margin-right:2px;}
/* margin-top:auto collapses to nothing once the content fills the card, which
   left the button sitting directly against the paragraph. A bottom margin on
   whatever precedes the action guarantees the gap, while auto still pushes it
   down when there is slack. */
.media-body > p:last-of-type,
.media-body > .media-pull{ margin-bottom:var(--sp-6); }

/* The article card has no media, so it carries a tint instead — deliberate
   contrast rather than an empty frame trying to match the video. */
.media-item--article{background:linear-gradient(180deg,#F6F8FB 0%,#EEF2F8 100%);}
/* No justify-content here: centring would override the margin-top:auto that
   pins the action to the bottom, leaving the two buttons on different lines. */
/* Bottom padding must match .media-body's, or the pinned actions end up on
   different lines even though the cards themselves align. */
.media-item--article .media-body{padding:var(--sp-8) var(--sp-8) var(--sp-7);}
.media-item--article h3{font-size:23px;}

@media(max-width:900px){
  .media-body{padding:var(--sp-6);}
  .media-item--article .media-body{padding:var(--sp-6);}
  .media-item h3,.media-item--article h3{font-size:19px;}
}

/* ---------- Awards ---------- */
/* One card per award: each artefact carries its own caption, and the grid grows
   as more are added rather than depending on a fixed three-column split. */
.award-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr));
  gap:var(--sp-6);
  align-items:stretch;
}
.award-card{
  display:flex;flex-direction:column;
  margin:0;
  background:#fff;
  border:1px solid #E8ECF3;
  border-radius:16px;
  overflow:hidden;
  box-shadow:0 12px 34px rgba(0,0,0,.08);
  transition:transform var(--dur) var(--ease-out),box-shadow var(--dur) var(--ease-out);
}
.award-card:hover{transform:translateY(-4px);box-shadow:0 22px 52px rgba(0,0,0,.13);}
/* A fixed ratio so a portrait trophy and a landscape certificate still line up. */
.award-shot{aspect-ratio:4/3;background:#EEF0F6;overflow:hidden;}
.award-shot img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform var(--dur) var(--ease-out);}
.award-card:hover .award-shot img{transform:scale(1.04);}
.award-copy{display:flex;flex-direction:column;flex:1;padding:var(--sp-6);}
.award-copy h3{font-family:var(--font-head);font-size:19px;font-weight:800;color:var(--ink);line-height:1.3;}
.award-meta{margin-top:var(--sp-2);color:var(--primary);font-weight:700;font-size:14px;}
.award-issuer{margin-top:var(--sp-2);color:#6B6B6B;font-size:14px;}


/* ---------- LAC corporate engagement ---------- */
.corp-wrap{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:38px;align-items:center;
  background:#EEF0F6;border-radius:18px;padding:34px;}
.corp-media{margin:0;border-radius:14px;overflow:hidden;background:#fff;box-shadow:0 12px 32px rgba(0,0,0,.10);}
.corp-media img{width:100%;height:auto;display:block;}
.corp-media figcaption{padding:12px 16px;font-size:13px;color:#6B6B6B;background:#fff;}
.corp-copy h2{font-family:var(--font-head);font-size:clamp(24px,3vw,32px);font-weight:800;margin-bottom:14px;}
.corp-copy p{color:var(--text);line-height:1.7;}
.corp-copy .btn{margin-top:24px;}
@media(max-width:900px){
  .corp-wrap{grid-template-columns:minmax(0,1fr);gap:var(--sp-6);padding:var(--sp-6);}
}

/* ---------- Cohort slider ---------- */
/* Continuous glide rather than a stepped carousel: the track holds two copies
   of the run and translates exactly -50%, so it meets itself with no jump and
   never needs JS to reset. Same idea as the partner ticker. */
.cohort-slider{
  position:relative;
  overflow:hidden;
  -webkit-mask-image:linear-gradient(to right,transparent,#000 6%,#000 94%,transparent);
          mask-image:linear-gradient(to right,transparent,#000 6%,#000 94%,transparent);
}
.cohort-slider:focus-visible{outline:2px solid var(--primary);outline-offset:4px;}
.cohort-track{
  display:flex;
  /* Spacing as a trailing margin, not flex gap: with `gap`, 34 slides have 33
     gaps, so translating -50% lands half a gap short of the seam and the loop
     visibly ticks. A margin on every slide makes one run exactly half the
     track. */
  width:max-content;
  animation:cohortScroll 90s linear infinite;
}
/* Stop for anyone actually looking — hover, or keyboard focus on the region. */
.cohort-slider:hover .cohort-track,
.cohort-slider:focus-within .cohort-track{animation-play-state:paused;}
.cohort-shot{
  flex:0 0 auto;
  width:clamp(220px,26vw,300px);
  aspect-ratio:4/3;
  /* one declaration, not margin-right followed by a margin:0 shorthand that
     silently wiped it */
  margin:0 var(--sp-5) 0 0;
  border-radius:12px;
  overflow:hidden;
  background:#EEF0F6;
  box-shadow:0 8px 22px rgba(0,0,0,.08);
}
.cohort-shot img{width:100%;height:100%;object-fit:cover;display:block;}
/* deliberately no :last-child reset — the final margin is what keeps the
   two runs identical in width, and it sits under the mask anyway */
@keyframes cohortScroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}

@media(prefers-reduced-motion:reduce){
  /* No drift; becomes a plain row the visitor scrolls themselves. */
  .cohort-track{animation:none;}
  .cohort-slider{overflow-x:auto;-webkit-overflow-scrolling:touch;}
}

/* ============= GRADUATION DAY / WORD CLOUD ============= */
.grad-wrap{display:grid;grid-template-columns:1fr 1.1fr;gap:56px;align-items:center;}
.grad-wrap:has(.word-cloud-wrap:only-child){grid-template-columns:1fr;}
.grad-photo{border-radius:18px;overflow:hidden;aspect-ratio:4/3;box-shadow:0 25px 70px rgba(0,33,93,.25);}
.grad-photo img{width:100%;height:100%;object-fit:cover;display:block;}
.word-cloud-wrap{width:100%;}
.wc-label{
  text-align:center;font-family:var(--font-head);font-size:12px;font-weight:800;
  letter-spacing:.14em;text-transform:uppercase;color:var(--gold-deep);margin-bottom:6px;
}
/* a real cloud, not a wrapped paragraph: each word is hand-placed at a
   top/left coordinate (set inline per word) so the mass reads as an organic
   circular cluster — biggest word centered, the rest orbiting it — the way
   the actual Mentimeter result looked, instead of a flex-wrap row. */
.word-cloud{
  position:relative;width:100%;min-height:380px;
}
.word-cloud .wc-item{position:absolute;transform:translate(-50%,-50%);white-space:nowrap;}
.word-cloud .wc-item span{
  display:inline-block;font-family:var(--font-head);font-weight:800;line-height:1;
  animation:wordFloat 6.4s ease-in-out infinite;will-change:transform;
}
.word-cloud .wc-xl{font-size:clamp(32px,4.6vw,56px);}
.word-cloud .wc-lg{font-size:clamp(24px,3.4vw,40px);}
.word-cloud .wc-md{font-size:clamp(16px,2.1vw,22px);font-weight:700;}
.word-cloud .wc-sm{font-size:13px;font-weight:700;}
/* three duration/delay variants so the words drift out of phase with each
   other instead of bobbing in unison */
.word-cloud .wc-item:nth-child(3n) span{animation-duration:7.6s;animation-delay:-2.4s;}
.word-cloud .wc-item:nth-child(3n+1) span{animation-duration:5.8s;animation-delay:-4.1s;}
.word-cloud .wc-item:nth-child(3n+2) span{animation-duration:6.9s;animation-delay:-.8s;}
@keyframes wordFloat{
  0%,100%{transform:translateY(0) rotate(0deg);}
  50%{transform:translateY(-9px) rotate(-1.4deg);}
}
@media(prefers-reduced-motion:reduce){
  .word-cloud .wc-item span{animation:none;}
}
@media(max-width:900px){
  .grad-wrap{grid-template-columns:1fr;}
  .word-cloud{min-height:300px;}
}
@media(max-width:520px){
  .word-cloud{min-height:260px;}
}

/* Pull-quote inside the article card: fills the space the summary alone left
   empty, and gives the card a second reading level so it isn't a wall of text. */
.media-pull{
  margin:18px 0 0;
  padding:16px 0 4px 18px;
  border-left:3px solid var(--primary);
}
.media-pull blockquote{
  margin:0;font-size:15px;line-height:1.65;color:var(--ink);font-style:italic;
}
.media-pull figcaption{
  margin-top:10px;font-family:var(--font-head);font-size:11px;font-weight:800;
  letter-spacing:.1em;text-transform:uppercase;color:#6B6B6B;
}

/* ---------- Buttons on dark bands ---------- */
/* On .bg-primary / .bg-dark the band is var(--accent) — the exact colour
   .btn-primary:hover resolves to, so the button vanished on hover. At rest it
   was barely better: #003BA6 on #00215D is 1.58:1.
   Some dark bands already use .btn-white, so the fix is to give .btn-primary
   and .btn-outline-blue that same treatment whenever they sit on a dark
   ground: one consistent idiom instead of three. */
.cta-band .btn-primary,
.bg-primary .btn-primary,
.bg-dark .btn-primary,
.bg-blue .btn-primary,
.cta-band .btn-outline-blue,
.bg-primary .btn-outline-blue,
.bg-dark .btn-outline-blue,
.bg-blue .btn-outline-blue{
  background:#fff;
  border-color:#fff;
  color:var(--accent);
}
.cta-band .btn-primary:hover,
.bg-primary .btn-primary:hover,
.bg-dark .btn-primary:hover,
.bg-blue .btn-primary:hover,
.cta-band .btn-outline-blue:hover,
.bg-primary .btn-outline-blue:hover,
.bg-dark .btn-outline-blue:hover,
.bg-blue .btn-outline-blue:hover{
  background:transparent;
  border-color:#fff;
  color:#fff;
}

/* A section head introducing a sub-group inside a section, rather than the
   section itself — tighter than the 48px used between a section head and its
   content, but one value instead of the 20/30/44 that had accumulated inline. */
.section-head--sub{ margin-top:var(--sp-10); margin-bottom:var(--sp-6); }
.section-head--sub:first-child{ margin-top:0; }
/* category tag: a designed badge (icon chip + label) for the sub-groupings
   inside a resource/video library — a bare emoji-plus-heading read like a
   social caption, not a category system. */
.category-tag{
  display:inline-flex;align-items:center;gap:10px;
  padding:6px 20px 6px 6px;background:#fff;border-radius:999px;
  border:1px solid #E4E8F0;box-shadow:0 4px 14px rgba(0,0,0,.05);
}
/* No icon circle, so the pill needs even padding instead of the icon's
   asymmetric 6px-left allowance. */
.category-tag.category-tag--text{padding:10px 22px;}
.category-tag .ct-icon{
  width:34px;height:34px;border-radius:50%;background:var(--primary);
  display:flex;align-items:center;justify-content:center;font-size:16px;
  flex-shrink:0;
}
.category-tag .ct-label{
  font-family:var(--font-head);font-size:13px;font-weight:800;letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink);
}

/* ---------- Announcement bar ---------- */
/* Slim promo strip above the header. Rendered hidden and revealed by JS only
   once we know it hasn't been dismissed — otherwise it would flash in and
   disappear on every page load for someone who already closed it. */
.announce{
  position:relative;
  background:var(--accent);
  color:#fff;
  font-size:14px;
}
.announce[hidden]{display:none;}
/* Set by the inline head script before paint, so a dismissed bar never
   occupies space and never flashes. */
.announce-dismissed .announce{display:none;}
.announce-inner{
  max-width:1290px;
  margin:0 auto;
  padding:10px var(--sp-12) 10px var(--sp-6);
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:center;
  gap:var(--sp-2) var(--sp-3);
  text-align:center;
}
.announce-text{margin:0;color:rgba(255,255,255,.9);}
.announce-cta{
  color:#fff;
  font-weight:700;
  text-decoration:underline;
  text-underline-offset:3px;
  text-decoration-thickness:1px;
  white-space:nowrap;
  transition:opacity var(--dur-fast) linear;
}
.announce-cta:hover{opacity:.82;}
.announce-close{
  position:absolute;
  top:50%;
  right:var(--sp-3);
  transform:translateY(-50%);
  width:36px;height:36px;
  display:flex;align-items:center;justify-content:center;
  background:transparent;border:0;border-radius:50%;
  color:rgba(255,255,255,.75);
  cursor:pointer;
  transition:background-color var(--dur-fast) linear,color var(--dur-fast) linear;
}
.announce-close:hover{background:rgba(255,255,255,.14);color:#fff;}
.announce-close:focus-visible{outline:2px solid #fff;outline-offset:2px;}

@media(max-width:720px){
  .announce{font-size:13px;}
  .announce-inner{padding:9px 44px 9px var(--sp-4);gap:var(--sp-1) var(--sp-2);}
  .announce-cta{white-space:normal;}
}

/* ---------- Company brochure CTA ---------- */
/* Paired with a primary action: the brochure is the low-commitment option for
   someone not ready to start a conversation, so it sits beside the main CTA
   rather than competing with it. */
.corp-actions{display:flex;flex-wrap:wrap;gap:var(--sp-3);align-items:center;}
.brochure-btn{gap:var(--sp-2);}
.brochure-note{margin-top:var(--sp-3);font-size:13px;color:#6B6B6B;}

.brochure-aside{
  margin-top:var(--sp-8);
  padding:var(--sp-6);
  background:#F6F8FB;
  border:1px solid #E8ECF3;
  border-radius:14px;
}
.brochure-aside h3{
  font-family:var(--font-head);font-size:18px;font-weight:800;color:var(--ink);
}
.brochure-aside p{margin:var(--sp-2) 0 var(--sp-5);color:var(--text);line-height:1.7;}

/* ---------- Contact page: info column + form, side by side ---------- */
.contact-split{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-8);align-items:start;}
.contact-info-col h2,.contact-form-col h2{
  font-family:var(--font-head);font-size:clamp(26px,3vw,32px);font-weight:800;line-height:1.3;margin-bottom:14px;
}
.contact-info-col > p{color:var(--text);line-height:1.7;max-width:420px;margin-bottom:36px;}
.info-list{display:flex;flex-direction:column;gap:8px;}
.info-group{display:flex;flex-direction:column;gap:22px;padding:22px 0;border-bottom:1px solid #E8ECF3;}
.info-group:first-child{padding-top:0;}
.info-group:last-child{border-bottom:none;padding-bottom:0;}
.info-group-title{
  font-family:var(--font-head);font-size:12px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;
  color:var(--primary);
}
.info-item{display:flex;gap:16px;align-items:flex-start;}
.info-icon{
  width:44px;height:44px;border-radius:50%;background:#F1F2F5;color:#555;
  display:flex;align-items:center;justify-content:center;flex:0 0 auto;
}
.info-icon svg{width:19px;height:19px;}
.info-label{font-family:var(--font-head);font-weight:700;color:var(--ink);font-size:15px;margin-bottom:3px;}
.info-value{color:var(--text);font-size:14px;line-height:1.6;}
.info-value a{color:var(--text);}
.info-value a:hover{color:var(--primary);}
.contact-form-col .section-eyebrow{margin-bottom:8px;}
.contact-form-col > p{color:var(--text);line-height:1.7;}
.offices-note{text-align:center;margin-top:var(--sp-6);color:var(--text);}
@media(max-width:900px){
  .contact-split{grid-template-columns:1fr;gap:var(--sp-7);}
}