/* ============================================================
     DESIGN TOKENS — PURPLE · GOLD · WHITE · BLACK only.
     No greys, no other hues. Neutrals are black or white at
     reduced opacity so they stay inside the palette.
     ============================================================ */
  :root{
    --paper: #FFFFFF;          /* Pure white canvas */
    --cream: #FBEEFF;          /* Lightest purple tint — section blocks */
    --linen: #F7EDFB;          /* Second purple tint — structural blocks */

    --ink:   #111111;          /* Black — headings, primary text */
    --ink-2: #1A1A1A;          /* Black, secondary */
    --muted: rgba(17,17,17,.72);   /* Black at opacity — body copy */
    --faint: rgba(17,17,17,.48);   /* Black at opacity — meta text */
    --rule:  rgba(72,1,105,.14);   /* Purple hairline borders */

    --brand-purple:  #480169;  /* Approved brand deep purple */
    --purple-deep:   #2E0142;  /* Darker purple for full-bleed bands */
    --purple-ink:    #1C0128;  /* Near-black purple, hero overlays */
    --brand-lavender:#FBEEFF;  /* Lightest purple tint */

    --gold:       #C89434;     /* Primary gold — buttons, numerals, accents */
    --gold-light: #E0B45C;     /* Gold highlight, gloss and hover */
    --gold-deep:  #876223;     /* Gold shadow / pressed state */

    --display: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --body:    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --script:  "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

    --container: 1320px;
    --gutter: 48px;
    --radius: 0px;             /* BOX buttons and cards — square corners */

    --shadow-1: 0 1px 2px rgba(72,1,105,.02), 0 4px 12px rgba(72,1,105,.02);
    --shadow-2: 0 8px 24px rgba(72,1,105,.04), 0 24px 60px rgba(72,1,105,.05);
    --shadow-card: 0 2px 4px rgba(72,1,105,.02), 0 12px 28px rgba(72,1,105,.03);

    /* The 3D card depth, as tokens.
       shop.css loads after site.css, so a .pcard rule there beat the shared
       card rule here no matter where in this file it sat. Rather than write
       the same five layers into two stylesheets and let them drift apart -
       which is how the same figure came to read 9 on one page and 500+ on
       another - both files now reference these. */
    --card-3d: 0 2px 3px rgba(28,1,40,.19), 0 8px 11px rgba(28,1,40,.18),
               0 18px 26px rgba(28,1,40,.17), 0 34px 50px rgba(28,1,40,.14),
               0 62px 92px rgba(28,1,40,.11);
    --card-3d-hover: 0 3px 4px rgba(28,1,40,.21), 0 12px 17px rgba(28,1,40,.20),
               0 26px 38px rgba(28,1,40,.19), 0 52px 74px rgba(28,1,40,.16),
               0 92px 130px rgba(28,1,40,.13);
    --card-3d-dark: 0 12px 22px rgba(0,0,0,.52), 0 32px 54px rgba(0,0,0,.46),
               0 66px 100px rgba(0,0,0,.38);
    --card-3d-dark-hover: 0 18px 32px rgba(0,0,0,.56), 0 46px 74px rgba(0,0,0,.50),
               0 92px 136px rgba(0,0,0,.42);

    --t-fast: 180ms cubic-bezier(.2,.7,.3,1);
    --t-med:  300ms cubic-bezier(.2,.7,.3,1);
  }


  /* Accessibility visually hidden */
  .visually-hidden {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
  }

  /* Reduced motion */
  @media (prefers-reduced-motion: reduce){
    *,*::before,*::after{
      animation-duration:0.001ms !important;
      animation-iteration-count:1 !important;
      transition-duration:0.001ms !important;
      scroll-behavior:auto !important;
    }
  }

  *,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
  html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
  body{
    background:var(--paper);color:var(--ink);
    font-family:var(--body);font-weight:400;font-size:16px;line-height:1.65;
    -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
    overflow-x:hidden;
  }
  img{display:block;max-width:100%;height:auto}
  a{color:inherit;text-decoration:none;transition:color var(--t-fast)}
  button{font:inherit;cursor:pointer;background:none;border:0;color:inherit}

  /* Skip link */
  .skip-link{
    position:absolute;top:-200%;left:1rem;background:var(--ink);color:var(--paper);
    padding:.75rem 1rem;border-radius:var(--radius);z-index:1000;font-weight:600;
  }
  .skip-link:focus{top:1rem}

  /* Focus ring */
  :focus-visible{outline:2px solid var(--brand-purple);outline-offset:3px;border-radius:2px}

  .container{max-width:var(--container);margin:0 auto;padding:0 var(--gutter)}
  @media (max-width:720px){:root{--gutter:22px}}

  /* ---------- Typography helpers ---------- */
  .serif{font-family:var(--display)}
  .italic{}
  .brand-purple{color:var(--brand-purple)}
  .script{font-family: var(--body); font-weight: 800;font-weight:400}
  .eyebrow{
    display:inline-block;font-family:var(--body);
    font-size:12px;font-weight:700;letter-spacing:.28em;text-transform:uppercase;
    color:var(--brand-purple);
  }
  .eyebrow.with-line::before{
    content:"";display:inline-block;width:36px;height:1.5px;background:var(--brand-purple);
    vertical-align:middle;margin-right:14px;
  }
  h1,h2,h3,h4,h5,h6{font-family:var(--display);font-weight:500;line-height:1.05;color:var(--ink);letter-spacing:-.005em}
  h1{font-size:clamp(48px,7vw,96px)}
  h2{font-size:clamp(38px,5vw,72px)}
  h3{font-size:clamp(28px,3.4vw,42px)}
  h4{font-size:clamp(22px,2.4vw,30px)}
  p{max-width:62ch}
  .lede{font-family:var(--display);font-size:clamp(20px,2.2vw,26px);line-height:1.45;color:var(--ink-2);font-weight:400}

  /* ---------- BOX BUTTONS (Foundation style) ----------
     Square corners, uppercase, letter-spaced. Gold is the
     primary action: it reads on white, on purple and on photos,
     and black-on-gold clears AA contrast where white would not. */
  .btn{
    display:inline-flex;align-items:center;gap:11px;
    padding:17px 32px;border-radius:0;
    font-family:var(--body);font-weight:800;font-size:12px;
    letter-spacing:.13em;text-transform:uppercase;line-height:1;
    border:2px solid var(--gold);background:var(--gold);color:var(--ink);
    transition:background var(--t-fast),border-color var(--t-fast),color var(--t-fast),box-shadow var(--t-fast),transform var(--t-fast);
    text-decoration:none;cursor:pointer;position:relative;
    box-shadow:0 3px 0 var(--gold-deep);
  }
  .btn:hover,.btn:focus-visible{
    background:var(--gold-light);border-color:var(--gold-light);
    color:var(--ink);transform:translateY(-2px);box-shadow:0 5px 0 var(--gold-deep);
  }
  .btn:active{transform:translateY(1px);box-shadow:0 1px 0 var(--gold-deep)}

  /* Ghost — gold outline, transparent fill. Inherits surrounding text colour. */
  .btn--ghost{background:transparent;color:var(--ink);border-color:var(--gold);box-shadow:none}
  .btn--ghost:hover,.btn--ghost:focus-visible{background:var(--gold);color:var(--ink);border-color:var(--gold);box-shadow:0 3px 0 var(--gold-deep)}
  .on-dark .btn--ghost,.btn--ghost.on-dark{color:var(--paper)}
  .on-dark .btn--ghost:hover,.btn--ghost.on-dark:hover{color:var(--ink)}

  /* Purple — secondary weight, for when gold would compete */
  .btn--brand-purple{background:var(--brand-purple);border-color:var(--brand-purple);color:var(--paper);box-shadow:0 3px 0 var(--purple-ink)}
  .btn--brand-purple:hover,.btn--brand-purple:focus-visible{background:var(--purple-deep);border-color:var(--purple-deep);color:var(--paper);box-shadow:0 5px 0 var(--purple-ink)}

  .btn--lg{padding:20px 40px;font-size:13px}
  .btn--sm{padding:12px 20px;font-size:11px;letter-spacing:.11em}

  .btn .ic{display:inline-flex;align-items:center;justify-content:center;width:auto;height:auto;border-radius:0;background:none;transition:transform var(--t-fast)}
  .btn:hover .ic{transform:translateX(4px)}
  .btn--ghost .ic{background:none;color:inherit}
  .btn--ghost:hover .ic{background:none;color:var(--ink)}

  .link-arrow{
    display:inline-flex;align-items:center;gap:10px;
    font-family:var(--body);font-weight:600;font-size:13px;letter-spacing:.05em;
    color:var(--ink);padding-bottom:6px;border-bottom:1.5px solid var(--brand-purple);
    transition:all var(--t-fast);
  }
  .link-arrow:hover{color:var(--brand-purple);gap:14px}

  /* ============================================================
     TOP UTILITY BAR
     ============================================================ */
  .topbar{
    background:var(--ink);color:rgba(255,255,255,.9);
    font-size:12px;letter-spacing:.08em;padding:10px 0;
  }
  .topbar__inner{display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap}
  .topbar a{color:rgba(255,255,255,.9);transition:color var(--t-fast)}
  .topbar a:hover{color:var(--brand-lavender)}
  .topbar__contact{display:flex;gap:24px;align-items:center}
  .topbar__contact span{display:inline-flex;align-items:center;gap:8px}
  .topbar__socials{display:flex;gap:14px}
  .topbar__socials a{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:50%}
  @media (max-width:720px){.topbar__contact{font-size:11px;gap:14px}.topbar__contact span:first-child{display:none}}

  /* ============================================================
     HEADER / NAV
     ============================================================ */
  .site-header{
    position:sticky;top:0;z-index:90;background:var(--paper);
    border-bottom:1px solid var(--rule);
  }
  .nav{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:32px;padding:22px 0}
  .brand{display:flex;align-items:center;gap:14px;text-decoration:none}
  /* The supplied lockup, at the 48px the roundel used to occupy, so the
     header's height and rhythm are unchanged. Its own aspect ratio sets the
     width; the intrinsic size is on the img tag so nothing shifts on load. */
  .brand__logo{display:block;height:48px;width:auto}
  /* The header tagline is hidden, so its wrapper is an empty flex item that
     would still claim the 14px gap beside the lockup. */
  .site-header .brand__name{display:none}
  .brand__name{
    display:flex;flex-direction:column;line-height:1.1;
  }
  .brand__name .t{font-family:var(--body);font-size:10px;font-weight:700;letter-spacing:.28em;color:var(--brand-purple);text-transform:uppercase;margin-top:2px}

  .navlist{display:flex;justify-content:center;gap:6px;list-style:none}
  .navlist > li > a, .navlist > li > button{
    display:inline-flex;align-items:center;gap:5px;
    padding:12px 15px;border-radius:0;
    font-family:var(--body);font-size:12.5px;font-weight:800;
    text-transform:uppercase;letter-spacing:.09em;
    color:var(--ink);transition:color var(--t-fast),border-color var(--t-fast);
    position:relative;border-bottom:3px solid transparent;
  }
  .navlist > li > a:hover, .navlist > li > button:hover,
  .navlist > li > a:focus-visible, .navlist > li > button:focus-visible,
  .navlist > li[aria-current] > a, .navlist > li > a.is-active{
    background:none;color:var(--brand-purple);border-bottom-color:var(--gold);
  }
  .navlist > li.has-menu{position:relative}
  .navlist > li.has-menu > button::after{
    content:"";display:inline-block;width:0;height:0;
    border-left:4px solid transparent;border-right:4px solid transparent;
    border-top:5px solid currentColor;margin-left:4px;transition:transform var(--t-fast);
  }
  .navlist > li.has-menu:hover > button::after,
  .navlist > li.has-menu:focus-within > button::after{transform:rotate(180deg)}
  .submenu{
    position:absolute;top:100%;left:50%;transform:translate(-50%,8px);
    background:var(--paper);border:0;border-top:3px solid var(--gold);border-radius:0;
    box-shadow:0 18px 38px rgba(72,1,105,.16);padding:8px 0;min-width:256px;list-style:none;
    opacity:0;visibility:hidden;transition:opacity var(--t-med),transform var(--t-med),visibility var(--t-med);
  }
  .has-menu:hover .submenu,.has-menu:focus-within .submenu{opacity:1;visibility:visible;transform:translate(-50%,0)}
  .submenu li a{
    display:block;padding:11px 22px;border-radius:0;font-size:13px;color:var(--ink);
    font-weight:600;letter-spacing:.03em;transition:all var(--t-fast);
  }
  .submenu li a:hover{background:var(--cream);color:var(--brand-purple);padding-left:28px}
  .nav-cta-wrap{display:flex;align-items:center;gap:14px}
  .menu-toggle{display:none;width:48px;height:48px;border-radius:50%;border:1.5px solid var(--ink)}
  .menu-toggle span{display:block;width:20px;height:1.5px;background:var(--ink);margin:4px auto;transition:transform var(--t-fast)}

  @media (max-width:980px){
    .navlist{display:none}
    .menu-toggle{display:inline-flex;align-items:center;justify-content:center;flex-direction:column}
    .brand__name .t{display:none}
  }

  /* ============================================================
     HERO
     ============================================================ */
  .hero{padding:64px 0 96px;position:relative;overflow:hidden}
  .hero::before{
    content:"";position:absolute;top:80px;right:-200px;width:540px;height:540px;border-radius:50%;
    background:radial-gradient(circle,rgba(72, 1, 105, 0.05),transparent 70%);
    pointer-events:none;z-index:0;
  }
  .hero__grid{display:grid;grid-template-columns:.95fr 1.05fr;gap:80px;align-items:center;position:relative;z-index:1}
  .hero__copy .greet{
    display:inline-flex;align-items:center;gap:12px;font-family:var(--body);
    font-size:14px;font-weight:600;color:var(--brand-purple);margin-bottom:24px;
  }
  .hero__copy .greet .wave{font-size:22px;animation:wave 2.4s ease-in-out infinite}
  @keyframes wave{0%,60%,100%{transform:rotate(0)}10%{transform:rotate(14deg)}20%{transform:rotate(-8deg)}30%{transform:rotate(14deg)}40%{transform:rotate(-4deg)}50%{transform:rotate(10deg)}}
  .hero__copy h1{
    font-family:var(--display);font-size:clamp(52px,7.4vw,108px);
    line-height:1;font-weight:500;letter-spacing:-.018em;margin-bottom:24px;color:var(--ink);
  }
  .hero__copy h1 .it{font-weight:400;color:var(--brand-purple)}
  .hero__roles{
    display:inline-block;font-family:var(--display);font-weight:500;
    color:var(--brand-purple);font-size:clamp(40px,5.6vw,80px);line-height:1.05;
    min-height:1.2em;position:relative;
  }
  .hero__roles::after{content:"";display:inline-block;width:2px;height:.85em;background:currentColor;vertical-align:baseline;animation:caret 1s steps(2) infinite;margin-left:4px}
  @keyframes caret{50%{opacity:0}}
  .hero__copy .intro{font-size:17px;line-height:1.75;color:var(--muted);margin:28px 0 36px;max-width:54ch}
  .hero__ctas{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:48px}
  .hero__find{
    display:flex;align-items:center;gap:24px;flex-wrap:wrap;
    padding-top:32px;border-top:1px solid var(--rule);
  }
  .hero__find .lbl{font-size:11px;font-weight:700;letter-spacing:.28em;color:var(--muted);text-transform:uppercase}
  .hero__find .socials{display:flex;gap:10px}
  .hero__find .socials a{
    display:inline-flex;width:42px;height:42px;border-radius:50%;border:1.5px solid var(--rule);
    align-items:center;justify-content:center;color:var(--ink);transition:all var(--t-fast);
  }
  .hero__find .socials a:hover,.hero__find .socials a:focus-visible{background:var(--ink);color:var(--paper);border-color:var(--ink);transform:translateY(-2px)}

  .hero__photo-wrap{
    position:relative;aspect-ratio:5/6;
  }
  .hero__photo{
    position:absolute;inset:0;
    background:var(--linen);border-radius:280px 280px 32px 32px;overflow:hidden;
    box-shadow:var(--shadow-2);
  }
  .hero__photo img{width:100%;height:100%;object-fit:cover;object-position:center 20%}
  .hero__photo::after{
    content:"";position:absolute;inset:14px;
    border:1.5px solid rgba(255,255,255,.5);border-radius:268px 268px 24px 24px;
    pointer-events:none;
  }
  .hero__badge{
    position:absolute;bottom:28px;left:-28px;background:var(--paper);
    padding:18px 22px;border-radius:14px;display:flex;align-items:center;gap:14px;
    box-shadow:var(--shadow-card);max-width:280px;z-index:2;
  }
  .hero__badge .av{width:48px;height:48px;border-radius:50%;background:var(--brand-purple);color:var(--brand-lavender);overflow:hidden;flex-shrink:0;display:grid;place-items:center;font-family:var(--display);font-weight:600;font-size:20px}
  .hero__badge .av img{width:100%;height:100%;object-fit:cover}
  .hero__badge .b strong{display:block;font-family:var(--display);font-size:18px;font-weight:500;color:var(--ink);line-height:1.1}
  .hero__badge .b span{display:block;font-size:11px;color:var(--muted);margin-top:4px;letter-spacing:.04em}
  .hero__chip{
    position:absolute;top:36px;right:-28px;background:var(--ink);color:var(--paper);
    padding:18px 22px;border-radius:14px;box-shadow:var(--shadow-card);z-index:2;
    text-align:center;min-width:120px;
  }
  .hero__chip .n{font-family:var(--display);font-size:36px;font-weight:600;color:var(--brand-lavender);line-height:1}
  .hero__chip .l{font-size:10px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:rgba(255,255,255,.8);margin-top:6px}
  .hero__dots{
    position:absolute;top:-20px;left:-20px;width:120px;height:120px;
    background-image:radial-gradient(var(--brand-purple) 1.5px,transparent 1.5px);
    background-size:14px 14px;opacity:.45;z-index:0;border-radius:8px;
  }
  @media (max-width:980px){
    .hero{padding:32px 0 64px}
    .hero__grid{grid-template-columns:1fr;gap:48px}
    .hero__chip{right:18px;top:18px}
    .hero__badge{left:18px;bottom:18px}
  }

  /* ============================================================
     LOGOS STRIP (As Featured In)
     ============================================================ */
  .logos{padding:48px 0;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);background:var(--cream)}
  .logos__inner{display:grid;grid-template-columns:auto 1fr;gap:48px;align-items:center}
  .logos__lbl{
    font-family:var(--display);font-size:18px;color:var(--ink-2);
    padding-right:32px;border-right:1.5px solid var(--brand-purple);max-width:200px;line-height:1.3;
  }
  .logos__lbl strong{font-style:normal;font-weight:600;color:var(--brand-purple)}
  .logos__list{display:flex;justify-content:space-around;align-items:center;gap:32px;flex-wrap:wrap}
  .logos__list span{font-family:var(--display);color:var(--ink-2);opacity:.65;font-size:24px;font-weight:500;letter-spacing:.02em;transition:opacity var(--t-fast)}
  .logos__list span.b{font-family:var(--body);font-weight:800;letter-spacing:.18em;text-transform:uppercase;font-size:14px}
  .logos__list span.i{}
  .logos__list span:hover{opacity:1;color:var(--brand-purple)}
  @media (max-width:720px){.logos__inner{grid-template-columns:1fr;gap:24px}.logos__lbl{border-right:0;border-bottom:1.5px solid var(--brand-purple);padding:0 0 16px;max-width:none;text-align:center}}

  /* ============================================================
     STATS COUNTER STRIP
     ============================================================ */
  .stats{padding:112px 0;background:var(--paper)}
  .stats__head{text-align:center;max-width:680px;margin:0 auto 64px}
  .stats__head h2{margin:14px 0 16px}
  .stats__head h2 .it{color:var(--brand-purple);font-weight:400}
  .stats__head p{color:var(--muted);margin:0 auto}
  .stats__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
  .stat-card{
    background:var(--paper);border:1px solid var(--rule);border-radius:18px;
    padding:36px 28px;text-align:center;position:relative;transition:all var(--t-med);
  }
  .stat-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-card);border-color:var(--brand-lavender)}
  .stat-card .ic{
    width:56px;height:56px;border-radius:50%;background:var(--cream);color:var(--brand-purple);
    display:grid;place-items:center;margin:0 auto 18px;
  }
  .stat-card .num{
    font-family:var(--display);font-size:clamp(48px,5vw,68px);font-weight:500;
    line-height:1;color:var(--ink);letter-spacing:-.02em;
  }
  .stat-card .num .sup{color:var(--brand-purple);font-size:.6em;vertical-align:top;margin-left:4px}
  .stat-card .lbl{margin-top:10px;font-size:13px;font-weight:600;color:var(--muted);letter-spacing:.04em}
  .stat-card .ph{position:absolute;top:10px;right:10px;font-size:9px;letter-spacing:.24em;color:var(--brand-purple);font-weight:700;text-transform:uppercase}
  @media (max-width:980px){.stats__grid{grid-template-columns:repeat(2,1fr)}}

  /* ============================================================
     ABOUT — two stacked images
     ============================================================ */
  .about{padding:120px 0;background:var(--cream)}
  .about__grid{display:grid;grid-template-columns:1fr 1.1fr;gap:96px;align-items:center}
  .about__photos{position:relative;aspect-ratio:5/6}
  .about__photos .p1{
    position:absolute;left:0;top:0;width:78%;aspect-ratio:4/5;
    border-radius:160px 160px 18px 18px;overflow:hidden;background:var(--linen);
    box-shadow:var(--shadow-2);
  }
  .about__photos .p1 img{width:100%;height:100%;object-fit:cover}
  .about__photos .p2{
    position:absolute;right:0;bottom:0;width:58%;aspect-ratio:4/5;
    border-radius:18px;overflow:hidden;background:var(--linen);
    box-shadow:var(--shadow-2);border:6px solid var(--paper);
  }
  .about__photos .p2 img{width:100%;height:100%;object-fit:cover}
  .about__photos .badge{
    position:absolute;left:-14px;top:42%;background:var(--brand-purple);color:var(--paper);
    padding:24px;border-radius:50%;width:120px;height:120px;display:grid;place-items:center;
    text-align:center;box-shadow:var(--shadow-card);z-index:2;
  }
  .about__photos .badge strong{display:block;font-family:var(--display);font-size:32px;font-weight:600;line-height:1}
  .about__photos .badge span{display:block;font-size:9px;letter-spacing:.22em;text-transform:uppercase;font-weight:700;margin-top:6px;color:var(--brand-lavender)}
  .about__photos .dots{position:absolute;right:-18px;top:-18px;width:120px;height:120px;background-image:radial-gradient(var(--brand-purple) 1.5px,transparent 1.5px);background-size:14px 14px;opacity:.5;border-radius:6px;z-index:0}

  .about__copy h2{margin:14px 0 24px}
  .about__copy h2 .it{color:var(--brand-purple);font-weight:400}
  .about__copy .lede{margin-bottom:24px}
  .about__copy p{color:var(--muted);margin-bottom:16px;max-width:54ch}
  .about__highlights{
    display:grid;grid-template-columns:1fr 1fr;gap:18px;margin:32px 0 36px;
  }
  .about__highlights .h{
    background:var(--paper);padding:18px;border-radius:14px;border:1px solid var(--rule);
    display:flex;align-items:flex-start;gap:14px;
  }
  .about__highlights .h svg{flex-shrink:0;width:40px;height:40px;padding:8px;background:var(--cream);border-radius:10px;color:var(--brand-purple)}
  .about__highlights .h strong{display:block;font-family:var(--display);font-size:20px;font-weight:600;color:var(--ink);margin-bottom:4px}
  .about__highlights .h span{font-size:13px;color:var(--muted);line-height:1.5}
  .about__signature{display:flex;align-items:center;gap:24px;flex-wrap:wrap}
  .about__signature .sig{font-family: var(--body); font-weight: 800;font-size:54px;color:var(--brand-purple);line-height:.9}
  .about__signature .sm{font-size:11px;font-weight:700;letter-spacing:.22em;color:var(--muted);text-transform:uppercase}
  .about__signature .sm b{display:block;font-family:var(--display);font-weight:500;color:var(--ink);font-size:17px;letter-spacing:0;text-transform:none;margin-bottom:4px}
  @media (max-width:980px){.about__grid{grid-template-columns:1fr;gap:64px}.about__highlights{grid-template-columns:1fr}}

  /* ============================================================
     VENTURES (3 service cards)
     ============================================================ */
  .ventures{padding:120px 0}
  .ventures__head{text-align:center;margin-bottom:72px;max-width:680px;margin-left:auto;margin-right:auto}
  .ventures__head h2{margin:14px 0 16px}
  .ventures__head h2 .it{color:var(--brand-purple);font-weight:400}
  .ventures__head p{color:var(--muted);margin:0 auto}
  .ventures__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:32px}
  .venture{
    background:var(--paper);border:1px solid var(--rule);border-radius:24px;
    overflow:hidden;display:flex;flex-direction:column;
    transition:all var(--t-med);position:relative;
  }
  .venture:hover{transform:translateY(-6px);box-shadow:var(--shadow-2);border-color:var(--brand-lavender)}
  .venture__img{aspect-ratio:5/4;background:var(--linen);overflow:hidden;position:relative}
  .venture__img img{width:100%;height:100%;object-fit:cover;transition:transform 800ms ease}
  .venture:hover .venture__img img{transform:scale(1.04)}
  .venture__num{
    position:absolute;top:18px;left:18px;background:var(--paper);
    padding:8px 14px;border-radius:999px;
    font-family:var(--display);font-size:14px;font-weight:600;color:var(--brand-purple);
  }
  .venture__num small{font-family:var(--body);font-style:normal;font-weight:700;letter-spacing:.2em;font-size:9px;text-transform:uppercase;color:var(--ink);display:block;margin-top:2px}
  .venture__body{padding:32px;display:flex;flex-direction:column;flex:1}
  .venture h3{margin-bottom:14px}
  .venture h3 .it{color:var(--brand-purple);font-weight:400}
  .venture p{color:var(--muted);margin-bottom:24px;font-size:15px;line-height:1.7;flex:1}
  .venture__meta{
    display:flex;gap:20px;padding:18px 0;margin:0 0 24px;
    border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);
  }
  .venture__meta div{flex:1;text-align:center}
  .venture__meta div b{display:block;font-family:var(--display);font-size:20px;font-weight:600;color:var(--ink)}
  .venture__meta div span{display:block;font-size:11px;font-weight:600;color:var(--muted);letter-spacing:.04em;margin-top:2px}
  @media (max-width:980px){.ventures__grid{grid-template-columns:1fr;gap:24px}}

  /* ============================================================
     PROCESS — 3 numbered steps
     ============================================================ */
  .process{padding:120px 0;background:var(--paper);color:var(--ink);position:relative;overflow:hidden;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);}
  .process::before{
    content:"";position:absolute;top:-100px;left:-100px;width:400px;height:400px;border-radius:50%;
    background:radial-gradient(circle,rgba(72, 1, 105, 0.05),transparent 70%);pointer-events:none;
  }
  .process__head{text-align:center;max-width:680px;margin:0 auto 72px;position:relative;z-index:1}
  .process__head .eyebrow{color:var(--brand-lavender)}
  .process__head h2{color:var(--ink);margin:14px 0 16px}
  .process__head h2 .it{color:var(--brand-lavender);font-weight:400}
  .process__head p{color:var(--muted);margin:0 auto}
  .process__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:32px;position:relative;z-index:1}
  .step{
    background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.12);
    border-radius:24px;padding:40px 32px;text-align:center;position:relative;
    transition:all var(--t-med);
  }
  .step:hover{background:var(--paper);border-color:var(--primary);transform:translateY(-4px)}
  .step__num{
    width:64px;height:64px;border-radius:50%;
    background:var(--brand-purple);color:var(--paper);
    display:grid;place-items:center;
    font-family:var(--display);font-size:28px;font-weight:600;
    margin:0 auto 24px;border:1px solid var(--brand-purple);
  }
  .step h3{color:var(--ink);font-size:24px;margin-bottom:14px}
  .step p{color:var(--muted);font-size:14px;line-height:1.7;margin:0 auto}
  @media (max-width:980px){.process__grid{grid-template-columns:1fr;gap:18px}}

  /* ============================================================
     PROPERTIES — portfolio grid with filter tabs
     ============================================================ */
  .properties{padding:120px 0}
  .properties__head{display:grid;grid-template-columns:1fr auto;gap:48px;align-items:end;margin-bottom:48px}
  .properties__head h2{margin:14px 0 0}
  .properties__head h2 .it{color:var(--brand-purple);font-weight:400}
  .properties__head p{color:var(--muted);margin-top:14px;max-width:46ch}
  .properties__filters{display:flex;gap:8px;flex-wrap:wrap}
  .filter{
    padding:10px 20px;border-radius:999px;border:1.5px solid var(--rule);
    font-family:var(--body);font-size:13px;font-weight:600;color:var(--ink);
    background:transparent;transition:all var(--t-fast);cursor:pointer;
  }
  .filter:hover,.filter:focus-visible{border-color:var(--ink)}
  .filter.is-active{background:var(--ink);color:var(--paper);border-color:var(--ink)}
  
  .properties__grid{display:grid;grid-template-columns:repeat(12,1fr);gap:24px}
  .apt{
    position:relative;overflow:hidden;border-radius:16px;background:var(--linen);
    transition:transform var(--t-med);border:1px solid var(--rule);
  }
  .apt:hover{transform:translateY(-4px)}
  .apt img{width:100%;height:100%;object-fit:cover;transition:transform 800ms ease}
  .apt:hover img{transform:scale(1.04)}
  .apt__info{
    position:absolute;left:0;right:0;bottom:0;padding:24px;
    background:linear-gradient(to top,rgba(20,20,20,.85) 30%,rgba(20,20,20,.0));
    color:var(--paper);display:flex;justify-content:space-between;align-items:end;gap:16px;
  }
  .apt__info .nm{font-family:var(--display);font-size:22px;font-weight:500;line-height:1.1}
  .apt__info .nm small{display:block;font-family:var(--body);font-style:normal;font-size:11px;letter-spacing:.18em;text-transform:uppercase;font-weight:700;color:var(--brand-lavender);margin-top:6px}
  .apt__info .price{
    background:var(--paper);color:var(--ink);padding:6px 12px;border-radius:6px;
    font-family:var(--body);font-size:11px;font-weight:700;letter-spacing:.06em;white-space:nowrap;
  }
  .apt__tag{
    position:absolute;top:18px;left:18px;background:var(--paper);
    padding:6px 12px;border-radius:6px;font-family:var(--body);font-size:10px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--ink);
  }
  .apt--lg{grid-column:span 7;aspect-ratio:7/5}
  .apt--md{grid-column:span 5;aspect-ratio:5/5}
  .apt--sm{grid-column:span 4;aspect-ratio:4/4}
  
  /* Filter Animation Classes */
  .apt.fade-out {
    opacity: 0;
    transform: scale(0.95) translateY(10px);
    pointer-events: none;
    position: absolute;
    width: 0; height: 0; padding: 0; margin: 0; border: 0;
  }
  .apt.fade-in {
    opacity: 1;
    transform: scale(1) translateY(0);
    transition: opacity var(--t-med), transform var(--t-med);
  }

  .properties__cta{display:flex;justify-content:center;margin-top:48px}
  @media (max-width:980px){
    .properties__head{grid-template-columns:1fr}
    .properties__grid{grid-template-columns:1fr;gap:18px}
    .apt--lg,.apt--md,.apt--sm{grid-column:1/-1;aspect-ratio:4/3}
  }

  /* ============================================================
     TESTIMONIALS
     ============================================================ */
  .testi{padding:120px 0;background:var(--cream);position:relative;overflow:hidden}
  .testi__head{text-align:center;max-width:680px;margin:0 auto 64px}
  .testi__head h2{margin:14px 0 16px}
  .testi__head h2 .it{color:var(--brand-purple);font-weight:400}
  .testi__head p{color:var(--muted);margin:0 auto}
  .testi__grid{display:grid;grid-template-columns:repeat(2,1fr);gap:24px}
  .tcard{
    background:var(--paper);border:1px solid var(--rule);border-radius:20px;
    padding:36px;display:flex;flex-direction:column;gap:18px;
    transition:all var(--t-med);position:relative;
  }
  .tcard:hover{transform:translateY(-4px);box-shadow:var(--shadow-card);border-color:var(--brand-lavender)}
  .tcard__head{display:flex;justify-content:space-between;align-items:start;gap:18px}
  .tcard__stars{color:var(--brand-purple);letter-spacing:4px;font-size:14px}
  .tcard__mark{font-family:var(--display);font-size:60px;color:var(--brand-lavender);line-height:.4;height:24px}
  .tcard q{font-family:var(--display);font-size:20px;line-height:1.5;color:var(--ink);quotes:none; font-style: normal;}
  .tcard q::before,.tcard q::after{content:""}
  .tcard__who{display:flex;align-items:center;gap:14px;padding-top:18px;margin-top:auto;border-top:1px solid var(--rule)}
  .tcard__av{width:54px;height:54px;border-radius:50%;overflow:hidden;border:2px solid var(--brand-purple);background:var(--brand-lavender);flex-shrink:0}
  .tcard__av img{width:100%;height:100%;object-fit:cover}
  .tcard__nm{font-family:var(--display);font-size:20px;font-weight:600;color:var(--ink);line-height:1.1}
  .tcard__role{font-size:12px;color:var(--muted);margin-top:4px;letter-spacing:.04em}
  @media (max-width:980px){.testi__grid{grid-template-columns:1fr}.tcard{padding:28px}}

  /* ============================================================
     SPEAKING / UPCOMING EVENTS
     ============================================================ */
  .speaking{padding:120px 0;background:var(--paper)}
  .speaking__grid{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:stretch}
  .speaking__intro h2{margin:14px 0 24px}
  .speaking__intro h2 .it{color:var(--brand-purple);font-weight:400}
  .speaking__intro p{color:var(--muted);margin-bottom:14px;max-width:46ch}
  .speaking__intro .btn{margin-top:18px}
  
  /* No fixed aspect and no max-width: the photograph stretches to whatever the
     copy column beside it needs, so the two sides finish level instead of the
     picture stopping short with empty ground under it. */
  .speaking__photo-card {
    width:100%;margin:0;align-self:stretch;
    border-radius:24px;overflow:hidden;
    box-shadow:var(--shadow-2);border:1px solid var(--rule);
    background:var(--cream);min-height:100%;
  }
  .speaking__photo-card img{width:100%;height:100%;object-fit:cover}

  .speaking__right {
    display: flex;flex-direction: column;gap: 20px;
  }
  
  .speaking__intro .calendar-card{margin-top:28px;max-width:none}

  /* Calendar Styles */
  .calendar-card {
    background:var(--paper);border:1px solid var(--rule);border-radius:18px;
    padding:24px;box-shadow:var(--shadow-card);max-width:480px;
  }
  .calendar-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:18px}
  .calendar-header .m{font-family:var(--display);font-size:20px;font-weight:700;color:var(--ink)}
  .calendar-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:8px;text-align:center}
  .day-name{font-size:11px;font-weight:700;color:var(--muted);text-transform:uppercase;padding-bottom:6px}
  .day{
    font-size:13px;font-weight:600;color:var(--ink);padding:10px 0;
    border-radius:8px;transition:all var(--t-fast);display:flex;align-items:center;justify-content:center;
  }
  .day.prev-month,.day.next-month{color:rgba(0,0,0,.15);font-weight:400}

  .day.booked{background:var(--cream);color:var(--brand-purple);font-weight:700}
  .day.active-booking{background:var(--brand-purple);color:var(--paper);font-weight:700;cursor:help;position:relative}
  .day.active-booking::after{content:"Keynote";position:absolute;bottom:2px;font-size:6px;letter-spacing:.05em;text-transform:uppercase;font-weight:700;opacity:.9}
  .calendar-legend{display:flex;gap:18px;margin-top:16px;font-size:11px;font-weight:700;color:var(--muted);border-top:1px solid var(--rule);padding-top:14px}
  .calendar-legend .leg{display:inline-flex;align-items:center;gap:6px}
  .calendar-legend .dot{width:8px;height:8px;border-radius:50%}
  .calendar-legend .dot--avail{background:var(--rule);border:1px solid rgba(0,0,0,.1)}
  .calendar-legend .dot--booked{background:var(--cream);border:1px solid var(--brand-purple)}
  .calendar-legend .dot--active{background:var(--brand-purple)}

  @media (max-width:980px){.speaking__grid{grid-template-columns:1fr;gap:48px}}

  /* ============================================================
     LEAD MAGNET — eBook
     ============================================================ */
  .magnet{padding:120px 0;background:var(--linen);position:relative;overflow:hidden}
  .magnet__grid{display:grid;grid-template-columns:1.1fr .9fr;gap:80px;align-items:center}
  .magnet h2{margin:14px 0 20px}
  .magnet h2 .it{color:var(--brand-purple);font-weight:400}
  .magnet .lede{margin-bottom:28px}
  .magnet ul{list-style:none;display:grid;gap:12px;margin-bottom:32px;max-width:54ch}
  .magnet ul li{display:flex;gap:14px;align-items:flex-start;font-size:15px;color:var(--ink-2);line-height:1.6}
  .magnet ul li svg{flex-shrink:0;width:20px;height:20px;padding:2px;background:var(--brand-purple);border-radius:50%;color:var(--paper);margin-top:2px}
  .magnet__form{
    display:flex;border:1.5px solid var(--ink);background:var(--paper);border-radius:999px;
    overflow:hidden;max-width:520px;
  }
  .magnet__form input{
    flex:1;border:0;background:transparent;padding:16px 24px;font-family:var(--body);font-size:14px;color:var(--ink);outline:0;
  }
  /* --muted is a dark ink for light grounds. The Starter Letter section runs
     near-black, so this rendered the placeholder black on black - which is
     precisely the complaint, and it did not show up in a contrast sweep of the
     section because a placeholder is a pseudo-element and carries its own
     colour, not the input's. */
  .magnet__form input::placeholder{color:rgba(255,255,255,.55)}
  /* Vertical padding and a floor on the height, because on a phone the form
     wraps and the button lands on a line of its own. Until now it had no
     vertical padding at all and relied on the flex row stretching it to the
     input's height - so the moment it stopped sharing a line with the input it
     collapsed to a 12px line box with its text spilling out. Nothing should
     depend on a sibling for its height. */
  .magnet__form button{
    background:var(--ink);color:var(--paper);border:0;padding:16px 26px;
    min-height:52px;display:inline-flex;align-items:center;justify-content:center;gap:6px;
    font-family:var(--body);font-weight:700;font-size:12px;letter-spacing:.16em;text-transform:uppercase;transition:background var(--t-fast);
  }
  .magnet__form button:hover,.magnet__form button:focus-visible{background:var(--brand-purple)}
  .magnet .fine{margin-top:14px;font-size:11px;letter-spacing:.12em;color:var(--muted);font-weight:600}

  .magnet__cover{position:relative;perspective:1200px}
  .booklet{
    aspect-ratio:3/4;background:var(--paper);border-radius:8px;
    box-shadow:30px 30px 0 var(--ink),60px 60px 80px rgba(0,0,0,.15);
    padding:40px 32px;border:1.5px solid var(--ink);position:relative;
    transform:rotateY(-8deg) rotate(-4deg);
  }
  .booklet::after{content:"";position:absolute;inset:12px;border:1px solid var(--brand-purple);pointer-events:none}
  .booklet .top{display:flex;justify-content:space-between;align-items:start;margin-bottom:48px}
  .booklet .lbl{font-family:var(--body);font-size:9px;letter-spacing:.32em;text-transform:uppercase;font-weight:700;color:var(--brand-purple)}
  .booklet .iss{font-family:var(--display);font-size:14px;color:var(--brand-purple);font-weight:600}
  .booklet h3{font-family:var(--display);font-size:44px;line-height:.95;letter-spacing:-.02em;font-weight:600}
  .booklet h3 .it{color:var(--brand-purple);font-weight:400}
  .booklet .meta{position:absolute;bottom:32px;left:32px;right:32px;border-top:1px solid var(--rule);padding-top:14px;display:flex;justify-content:space-between;font-family:var(--body);font-size:9px;letter-spacing:.28em;text-transform:uppercase;font-weight:700;color:var(--muted)}
  .magnet__sticker{
    position:absolute;top:-14px;left:-14px;background:var(--brand-purple);color:var(--paper);
    width:96px;height:96px;border-radius:50%;display:grid;place-items:center;
    font-family:var(--display);font-weight:600;text-align:center;line-height:1.1;
    transform:rotate(-8deg);font-size:14px;
  }
  .magnet__sticker strong{display:block;font-size:24px;font-style:normal}
  @media (max-width:980px){.magnet__grid{grid-template-columns:1fr;gap:64px}.magnet__cover{max-width:360px;margin:0 auto}}

  /* ============================================================
     BLOG
     ============================================================ */
  .blog{padding:120px 0}
  .blog__head{display:flex;justify-content:space-between;align-items:end;margin-bottom:56px;gap:24px;flex-wrap:wrap}
  .blog__head h2{margin:14px 0 0}
  .blog__head h2 .it{color:var(--brand-purple);font-weight:400}
  .blog__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
  .post{
    background:var(--paper);border:1px solid var(--rule);border-radius:18px;
    overflow:hidden;display:flex;flex-direction:column;transition:all var(--t-med);
  }
  .post:hover{transform:translateY(-4px);box-shadow:var(--shadow-card);border-color:var(--brand-lavender)}
  .post__img{aspect-ratio:4/3;background:var(--linen);overflow:hidden;position:relative}
  .post__img img{width:100%;height:100%;object-fit:cover;transition:transform 800ms ease}
  .post:hover .post__img img{transform:scale(1.04)}
  .post__date{
    position:absolute;top:18px;left:18px;background:var(--paper);
    padding:8px 14px;border-radius:8px;font-family:var(--body);font-size:11px;font-weight:700;letter-spacing:.06em;color:var(--ink);
  }
  .post__date b{display:block;font-family:var(--display);font-size:18px;font-weight:600;color:var(--brand-purple);text-align:center;letter-spacing:-.02em}
  .post__body{padding:28px;display:flex;flex-direction:column;flex:1}
  .post__meta{display:flex;gap:12px;font-size:11px;letter-spacing:.16em;text-transform:uppercase;font-weight:700;color:var(--brand-purple);margin-bottom:14px}
  .post h3{font-size:22px;line-height:1.25;margin-bottom:16px;flex:1}
  .post h3 a{color:var(--ink);transition:color var(--t-fast)}
  .post h3 a:hover{color:var(--brand-purple)}
  .post__read{font-family:var(--body);font-size:12px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--ink);border-bottom:1.5px solid var(--brand-purple);padding-bottom:4px;align-self:flex-start}
  @media (max-width:980px){.blog__grid{grid-template-columns:1fr;gap:18px}}

  /* ============================================================
     BIG CTA STRIP
     ============================================================ */
  /* CTA strip — single definition, purple ground, gold action */
  .cta-strip{padding:88px 0;background:var(--brand-purple);color:var(--paper);text-align:center;position:relative;overflow:hidden;border:0}
  .cta-strip::before{content:"";position:absolute;top:-220px;left:50%;transform:translateX(-50%);width:640px;height:640px;border-radius:50%;background:radial-gradient(circle,rgba(200,148,52,.16),transparent 70%);pointer-events:none}
  .cta-strip__inner{position:relative;z-index:1;max-width:780px;margin:0 auto}
  .cta-strip .container{position:relative;z-index:1}
  .cta-strip .eyebrow{color:var(--gold-light)}
  .cta-strip .eyebrow.with-line::before{background:var(--gold)}
  .cta-strip h2{color:var(--paper);margin:14px auto 16px;max-width:18ch;font-size:clamp(28px,3.6vw,46px);letter-spacing:-.025em}
  .cta-strip h2 .it,.cta-strip h2 em{color:var(--gold-light);font-style:normal;font-weight:700}
  .cta-strip p{color:rgba(255,255,255,.82);margin:0 auto 30px;max-width:54ch}
  .cta-strip .btns,.cta-strip__btns{display:flex;gap:13px;justify-content:center;flex-wrap:wrap}
  .cta-strip .btn--ghost{color:var(--paper);border-color:var(--gold)}
  .cta-strip .btn--ghost:hover,.cta-strip .btn--ghost:focus-visible{background:var(--gold);color:var(--ink);border-color:var(--gold)}

  /* ============================================================
     FOOTER
     ============================================================ */
  footer{background:#0e0e0e;color:rgba(255,255,255,.7);padding:80px 0 32px}
  .footer__top{display:grid;grid-template-columns:1.6fr 1fr 1fr 1.4fr;gap:48px;padding-bottom:48px;border-bottom:1px solid rgba(255,255,255,.1)}
  /* The reverse lockup carries the name inside the artwork, so there is no
     typed name and no roundel here any more — only the strapline. */
  .footer__brand .brand__name .t{color:var(--brand-lavender)}
  .footer__brand p{margin-top:22px;font-family:var(--display);color:rgba(255,255,255,.6);font-size:16px;max-width:32ch;line-height:1.6}
  .footer__brand .socials{display:flex;gap:10px;margin-top:24px}
  .footer__brand .socials a{display:inline-flex;width:42px;height:42px;border-radius:50%;border:1px solid rgba(255,255,255,.18);align-items:center;justify-content:center;color:rgba(255,255,255,.8);transition:all var(--t-fast)}
  .footer__brand .socials a:hover{background:var(--brand-purple);border-color:var(--brand-purple);color:var(--paper);transform:translateY(-2px)}
  footer h5{font-family:var(--body);font-size:11px;letter-spacing:.28em;text-transform:uppercase;color:var(--brand-lavender);font-weight:700;margin-bottom:22px}
  .footer__col ul{list-style:none;display:grid;gap:12px;font-size:14px}
  .footer__col ul a{color:rgba(255,255,255,.75)}
  .footer__col ul a:hover{color:var(--brand-lavender)}
  .footer__col p{font-size:14px;color:rgba(255,255,255,.7);line-height:1.6;margin-bottom:6px}
  .newsletter p{font-size:13px;color:rgba(255,255,255,.6);line-height:1.6;margin-bottom:18px;max-width:32ch}
  .newsletter form{display:flex;border-radius:999px;border:1px solid rgba(255,255,255,.2);overflow:hidden;background:rgba(255,255,255,.04)}
  .newsletter input{flex:1;background:transparent;border:0;color:var(--paper);padding:14px 22px;font-family:var(--body);font-size:14px;outline:0}
  .newsletter input::placeholder{color:rgba(255,255,255,.4)}
  .newsletter button{background:var(--brand-purple);color:var(--paper);border:0;padding:0 22px;font-family:var(--body);font-weight:700;font-size:11px;letter-spacing:.16em;text-transform:uppercase;transition:background var(--t-fast)}
  .newsletter button:hover,.newsletter button:focus-visible{background:var(--brand-purple)}
  .footer__bottom{padding-top:32px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:14px;font-size:12px;letter-spacing:.08em;color:rgba(255,255,255,.45)}
  .footer__bottom a{color:rgba(255,255,255,.6)}
  .footer__bottom a:hover{color:var(--brand-lavender)}
  @media (max-width:980px){.footer__top{grid-template-columns:1fr 1fr;gap:32px}}
  @media (max-width:600px){.footer__top{grid-template-columns:1fr}}

  /* ============================================================
     Guaranteed Mobile Responsiveness & Accessibility Overrides
     ============================================================ */
  @media (max-width: 980px) {
    /* Prevent horizontal scrolling entirely */
    html, body {
      overflow-x: hidden;
      width: 100%;
      position: relative;
    }
    
    /* Concurrently constrain and correct absolute hero offsets */
    .hero__photo-wrap {
      width: 100% !important;
      max-width: 480px !important;
      margin: 0 auto !important;
      aspect-ratio: 5/6 !important;
      height: auto !important;
    }
    .hero__photo {
      border-radius: 40px;
    }
    .hero__chip {
      right: 12px !important;
      top: 12px !important;
      padding: 10px 14px !important;
      min-width: auto !important;
      box-shadow: 0 4px 12px rgba(0,0,0,0.1) !important;
    }
    .hero__badge {
      left: 12px !important;
      bottom: 12px !important;
      padding: 10px 14px !important;
      max-width: calc(100% - 24px) !important;
      box-shadow: 0 4px 12px rgba(0,0,0,0.1) !important;
    }
    .hero__dots {
      display: none !important; /* Hide background clutter on mobile */
    }
    
    /* Correct About section overlap */
    .about__photos {
      aspect-ratio: auto;
      height: 420px;
      margin-bottom: 24px;
    }
    .about__photos .p1 {
      width: 100% !important;
      height: 100% !important;
      border-radius: 24px !important;
      position: relative !important;
    }
    .about__photos .p2 {
      display: none !important; /* Hide overlapping photo on smaller mobile screens for extreme clarity */
    }
    .about__photos .badge {
      left: 12px !important;
      bottom: 12px !important;
      top: auto !important;
      width: 80px !important;
      height: 80px !important;
      padding: 10px !important;
      border-radius: 50% !important;
    }
    .about__photos .badge strong {
      font-size: 20px !important;
    }
    .about__photos .badge span {
      font-size: 8px !important;
      margin-top: 2px !important;
    }
    .about__photos .dots {
      display: none !important;
    }
    
    /* Concurrently constrain Lead Magnet offsets */
    .magnet__cover {
      max-width: 100% !important;
      padding: 20px 0 !important;
    }
    .booklet {
      transform: none !important;
      box-shadow: 12px 12px 0 var(--ink) !important;
      padding: 24px 20px !important;
    }
    .magnet__sticker {
      top: 0px !important;
      left: 0px !important;
      width: 76px !important;
      height: 76px !important;
      font-size: 11px !important;
    }
    .magnet__sticker strong {
      font-size: 18px !important;
    }
    
    /* Prevent absolute clipping in columns and form layouts */
      /* Rounded-pill magnet form overrides removed - 12px radius on a
         square-button design, white field on a dark ground. */
    
    /* Smooth fluid spacing for testimonials and stages */
    .testi__grid {
      grid-template-columns: 1fr !important;
      gap: 16px !important;
    }
    .tcard {
      padding: 24px !important;
    }
    .ventures__grid {
      grid-template-columns: 1fr !important;
      gap: 20px !important;
    }
    
    /* Mobile nav fix to ensure it flows nicely */
    .nav {
      grid-template-columns: 1fr auto !important;
      padding: 16px 0 !important;
    }
    .nav-cta-wrap {
      gap: 8px !important;
    }
    .nav-cta-wrap .btn {
      display: none !important; /* Hide button on mobile header to save space, visible in footer */
    }
  }
  
  @media (max-width: 480px) {
    /* Fluid smaller headings for mobile browsers */
    h1 { font-size: 34px !important; }
    h2 { font-size: 28px !important; }
    h3 { font-size: 22px !important; }
    .hero__roles { font-size: 28px !important; }
    
    .container {
      padding: 0 16px !important;
    }
    
    .hero__photo-wrap {
      max-width: 100% !important;
    }
    .about__photos {
      height: 320px !important;
    }
    
    /* Adjust quick date bars on speaking stages to stack cleanly */
    .ev {
      grid-template-columns: 1fr !important;
      text-align: center !important;
      gap: 12px !important;
      padding: 18px 0 !important;
    }
    .ev__date {
      margin: 0 auto !important;
    }
    .ev__role {
      margin: 0 auto !important;
      display: inline-block !important;
    }
  }
  /* ============================================================
     Guaranteed Accessibility (A11y) Contrast & Readability Fixes
     ============================================================ */
  
  /* Enforce zero italics globally in clean version */
  * {
    font-style: normal !important;
  }
  
  /* Ensure clean dark charcoal text on the light canvas */
  body {
    color: var(--ink) !important;
  }
  
  /* Hero intro text clarity (must meet WCAG AAA contrast) */
  .hero__copy .intro {
    color: var(--muted) !important; /* Force highly readable charcoal gray */
    opacity: 1.0 !important;
    font-weight: 500 !important;
  }
  
  /* About section paragraphs readability */
  .about__copy p {
    color: var(--muted) !important;
    opacity: 1.0 !important;
    font-weight: 500 !important;
  }
  .about__copy .lede {
    color: var(--ink) !important;
    font-weight: 600 !important;
  }
  
  /* Muted metadata texts contrast correction */
  .venture p, .post p, .stat-card .lbl, .about__highlights .h span {
    color: var(--muted) !important;
    opacity: 0.95 !important;
  }
  /* .logos__list span override removed - the strip is a marquee on near-black. */

  
  /* PROCESS SECTION - COMPLETE CONTRAST CORRECTION removed. The process section is deep purple by design now.
     It forced a light ground with 16 !important rules. */

  /* ------------------------------------------------------------
     CTA-STRIP SECTION - COMPLETE CONTRAST CORRECTION
     ------------------------------------------------------------ */
  /* (legacy .cta-strip !important overrides removed — the single purple/gold
     definition above now applies) */

  /* LEAD MAGNET SECTION removed. The Letter runs on near-black by design now.
     It forced a light ground with 11 !important rules. */

  /* ------------------------------------------------------------
     The testimonials contrast correction that stood here forced
     .testi to paper with !important. It was written when the
     section ran dark and the fix was to lighten it; the section is
     dark again by design now, and the .tcard rules it carried
     target a component the carousel replaced. Removed rather than
     out-specified - another !important would just move the problem.
     ------------------------------------------------------------ */

  /* ------------------------------------------------------------
     CALENDAR CARD & BOOKING STYLES
     ------------------------------------------------------------ */
  .calendar-card {
    background: var(--paper) !important;
    border: 1px solid var(--rule) !important;
    border-radius: 16px !important;
    padding: 24px !important;
    /* box-shadow deliberately not set here any more. It was
       `var(--shadow-card) !important`, which out-ranked the shared card
       treatment and left this one card on the old flat haze. Removed rather
       than out-specified - adding a second !important would leave two rules
       arguing over the same card. */
    max-width: 380px;
    width: 100%;
    margin: 0 auto;
  }
  .calendar-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 18px;
    border-bottom: 1px solid var(--rule);
    padding-bottom: 14px;
  }
  .calendar-header .m {
    font-family: var(--body);
    font-size: 18px;
    font-weight: 700;
    color: var(--ink);
  }
  .calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 6px;
    text-align: center;
    margin-bottom: 18px;
  }
  .calendar-grid .day-name {
    font-size: 11px;
    font-weight: 700;
    color: var(--muted);
    text-transform: uppercase;
    padding: 2px 0;
  }
  .calendar-grid .day {
    font-size: 12px;
    font-weight: 600;
    color: var(--ink);
    padding: 6px 0;
    border-radius: 50%;
    cursor: pointer;
    transition: all var(--t-fast);
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 1;
  }
  .calendar-grid .day:hover {
    background: var(--cream);
    color: var(--brand-purple);
  }
  .calendar-grid .day.booked {
    background: var(--linen);
    color: var(--rule);
    text-decoration: line-through;
    cursor: not-allowed;
  }
  .calendar-grid .day.active-booking {
    background: var(--brand-purple) !important;
    color: var(--paper) !important;
    font-weight: 700;
  }
  .calendar-grid .day.prev-month, .calendar-grid .day.next-month {
    color: var(--rule);
    opacity: 0.4;
  }

  /* Not bookable: already past, or a weekday Marie does not take calls.
     Muted and not clickable, so the days that ARE free stand out. Scoped to
     .calendar-grid and placed after .calendar-grid .day, which sets the ink
     colour at the same specificity and would otherwise win on order. */
  .calendar-grid .day.is-past {
    color: rgba(0,0,0,.30);
    font-weight: 400;
    cursor: default;
  }
  .calendar-grid .day:not(.is-past):not(.prev-month):not(.next-month):not(.booked) {
    color: var(--brand-purple);
    font-weight: 800;
    background: var(--cream);
  }
  .calendar-legend {
    display: flex;
    gap: 16px;
    font-size: 11px;
    font-weight: 600;
    color: var(--muted);
    border-top: 1px solid var(--rule);
    padding-top: 14px;
  }
  .calendar-legend .leg {
    display: flex;
    align-items: center;
    gap: 6px;
  }
  .calendar-legend .dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    display: inline-block;
  }
  .calendar-legend .dot--avail {
    background: var(--brand-purple);
  }
  .calendar-legend .dot--booked {
    background: var(--rule);
  }

  /* ------------------------------------------------------------
     FINAL VISUAL BUG FIXES (List styles, Placeholder, Gold Blend)
     ------------------------------------------------------------ */
  
  /* 1. Remove browser default list numbers next to step cards */
  .process__grid, .step {
    list-style: none !important;
    list-style-type: none !important;
  }

  /* ============================================================
     HERO CAROUSEL  (Achebe Hope Foundation pattern, recoloured)
     Full-bleed photo, purple-black scrim, gold eyebrow chip,
     box buttons, dots + arrows, autoplay with pause on hover.
     ============================================================ */
  .hcar{position:relative;overflow:hidden;background:var(--purple-ink);min-height:min(86vh,760px)}
  .hcar__track{position:relative;min-height:min(86vh,760px)}
  .hcar__slide{
    position:absolute;inset:0;opacity:0;visibility:hidden;
    transition:opacity 900ms cubic-bezier(.4,0,.2,1),visibility 900ms;
    display:flex;align-items:center;
  }
  .hcar__slide.is-active{opacity:1;visibility:visible;z-index:2}
  .hcar__bg{position:absolute;inset:0;overflow:hidden}
  .hcar__bg img{width:100%;height:100%;object-fit:cover;transform:scale(1)}
  .hcar__slide.is-active .hcar__bg img{animation:hcarKb 9000ms ease-out forwards}
  @keyframes hcarKb{from{transform:scale(1.001)}to{transform:scale(1.09)}}
  .hcar__scrim{
    position:absolute;inset:0;
    background:linear-gradient(90deg,rgba(28,1,40,.93) 0%,rgba(28,1,40,.78) 42%,rgba(28,1,40,.30) 100%);
  }
  .hcar__inner{position:relative;z-index:3;width:100%;padding:96px 0}
  .hcar__copy{max-width:660px}
  .hcar__chip{
    display:inline-block;background:var(--gold);color:var(--ink);
    font-size:11px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;
    padding:8px 15px;margin-bottom:22px;
  }
  .hcar h1{
    color:var(--paper);font-size:clamp(38px,5.4vw,68px);line-height:1.06;
    font-weight:700;letter-spacing:-.02em;margin-bottom:20px;
  }
  .hcar h1 em{font-style:normal;color:var(--gold-light)}
  .hcar__copy p{
    color:rgba(255,255,255,.86);font-size:clamp(15px,1.5vw,18px);
    line-height:1.62;max-width:54ch;margin-bottom:34px;
  }
  .hcar__ctas{display:flex;gap:14px;flex-wrap:wrap}

  .hcar__arrow{
    position:absolute;top:50%;transform:translateY(-50%);z-index:6;
    width:52px;height:52px;border:2px solid rgba(255,255,255,.34);
    background:rgba(28,1,40,.34);color:#fff;display:grid;place-items:center;
    cursor:pointer;transition:all var(--t-fast);
  }
  .hcar__arrow:hover{background:var(--gold);border-color:var(--gold);color:var(--ink)}
  .hcar__arrow--prev{left:22px}
  .hcar__arrow--next{right:22px}
  .hcar__dots{
    position:absolute;bottom:34px;left:50%;transform:translateX(-50%);
    z-index:6;display:flex;gap:11px;
  }
  .hcar__dot{
    width:36px;height:4px;background:rgba(255,255,255,.34);border:0;cursor:pointer;
    transition:background var(--t-fast);padding:0;
  }
  .hcar__dot.is-active{background:var(--gold)}
  @media (max-width:860px){
    /*
    | A real height, not auto.
    |
    | Every .hcar__slide is position:absolute - that is what makes the crossfade
    | work - so nothing inside the hero contributes height. min-height:auto
    | therefore resolved to zero and the entire hero disappeared on every screen
    | narrower than 861px: the page went from the header straight to the counter
    | strip. It measured as no overflow and no errors, because an element of
    | zero height is perfectly well-behaved.
    */
    .hcar,.hcar__track{min-height:min(88vh,660px)}
    .hcar__inner{padding:64px 0 76px}
    .hcar__scrim{background:linear-gradient(180deg,rgba(28,1,40,.80) 0%,rgba(28,1,40,.90) 100%)}
    .hcar__arrow{display:none}
    .hcar__ctas .btn{flex:1 1 100%;justify-content:center}
  }

  /* ============================================================
     COUNTER STRIP  (sits directly under the hero)
     ============================================================ */
  .counter{background:var(--brand-purple);padding:0;position:relative}
  .counter__grid{
    display:grid;grid-template-columns:repeat(5,1fr);
  }
  .counter__cell{
    padding:38px 18px;text-align:center;
    border-right:1px solid rgba(255,255,255,.13);
  }
  .counter__cell:last-child{border-right:0}
  .counter__n{
    display:block;font-size:clamp(30px,3.4vw,44px);font-weight:800;
    color:var(--gold);letter-spacing:-.02em;line-height:1;margin-bottom:9px;
  }
  .counter__l{
    display:block;font-size:11px;font-weight:700;letter-spacing:.15em;
    text-transform:uppercase;color:rgba(255,255,255,.80);
  }
  @media (max-width:900px){
    .counter__grid{grid-template-columns:repeat(2,1fr)}
    .counter__cell{border-bottom:1px solid rgba(255,255,255,.13)}
    .counter__cell:nth-child(2n){border-right:0}
    .counter__cell:last-child{grid-column:1/-1;border-bottom:0}
  }

  /* Scrolling category ticker under the counter */
  .ticker{background:var(--paper);border-bottom:1px solid var(--rule);overflow:hidden;padding:15px 0}
  .ticker__row{display:flex;gap:0;white-space:nowrap;animation:tickerRun 34s linear infinite}
  .ticker:hover .ticker__row{animation-play-state:paused}
  @keyframes tickerRun{from{transform:translateX(0)}to{transform:translateX(-50%)}}
  .ticker__i{
    display:inline-flex;align-items:center;gap:14px;padding:0 26px;
    font-size:11.5px;font-weight:800;letter-spacing:.17em;text-transform:uppercase;
    color:var(--brand-purple);
  }
  .ticker__i::after{content:"";width:5px;height:5px;background:var(--gold);display:inline-block}

  /* ============================================================
     GALLERY — "Moments of Impact" mosaic
     ============================================================ */
  .gal{padding:96px 0;background:var(--paper)}
  .gal__head{text-align:center;margin-bottom:44px}
  .gal__grid{
    display:grid;grid-template-columns:repeat(4,1fr);
    grid-auto-rows:190px;gap:14px;
    grid-auto-flow:dense;          /* backfill holes left by the w2/h2 spans */
  }
  .gal__item{
    position:relative;overflow:hidden;display:block;background:var(--cream);
    border:0;padding:0;cursor:pointer;
  }
  .gal__item img{width:100%;height:100%;object-fit:cover;transition:transform 700ms cubic-bezier(.2,.7,.3,1)}
  .gal__item:hover img{transform:scale(1.07)}
  .gal__item::after{
    content:"";position:absolute;inset:0;
    background:linear-gradient(180deg,rgba(28,1,40,0) 45%,rgba(28,1,40,.82) 100%);
    opacity:0;transition:opacity var(--t-med);
  }
  .gal__item:hover::after{opacity:1}
  .gal__cap{
    position:absolute;left:0;right:0;bottom:0;z-index:2;padding:14px 16px;
    font-size:10.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
    color:var(--gold-light);text-align:left;
    transform:translateY(8px);opacity:0;transition:all var(--t-med);
  }
  .gal__item:hover .gal__cap{transform:translateY(0);opacity:1}
  .gal__item--w2{grid-column:span 2}
  .gal__item--h2{grid-row:span 2}
  @media (max-width:900px){
    .gal{padding:64px 0}
    .gal__grid{grid-template-columns:repeat(2,1fr);grid-auto-rows:150px;gap:10px}
    .gal__item--w2{grid-column:span 2}
    .gal__item--h2{grid-row:span 1}
  }

  /* Lightbox */
  .glb{position:fixed;inset:0;z-index:300;display:none;align-items:center;justify-content:center;padding:32px}
  .glb.is-open{display:flex}
  .glb__scrim{position:absolute;inset:0;background:rgba(28,1,40,.94)}
  .glb__img{position:relative;max-width:min(1100px,92vw);max-height:88vh;z-index:2}
  .glb__img img{max-width:100%;max-height:88vh;object-fit:contain;border:3px solid var(--gold)}
  .glb__x,.glb__nav{
    position:absolute;z-index:4;width:50px;height:50px;border:2px solid rgba(255,255,255,.34);
    background:rgba(28,1,40,.5);color:#fff;display:grid;place-items:center;cursor:pointer;
    transition:all var(--t-fast);
  }
  .glb__x:hover,.glb__nav:hover{background:var(--gold);border-color:var(--gold);color:var(--ink)}
  .glb__x{top:26px;right:26px;font-size:22px;line-height:1}
  .glb__nav--prev{left:26px;top:50%;transform:translateY(-50%)}
  .glb__nav--next{right:26px;top:50%;transform:translateY(-50%)}
  .glb__count{position:absolute;bottom:26px;left:50%;transform:translateX(-50%);z-index:4;color:rgba(255,255,255,.7);font-size:12px;letter-spacing:.12em;font-weight:700}
  @media (max-width:720px){.glb__nav{width:42px;height:42px}.glb__nav--prev{left:8px}.glb__nav--next{right:8px}}

  /* ---------- Hero carousel refinements ---------- */
  /* Crop faces from the top third, not dead centre */
  .hcar__bg img{object-position:50% 18%}

  /* Arrows moved out of the headline's path, paired bottom-right */
  .hcar__arrow{top:auto;bottom:26px;transform:none;width:46px;height:46px}
  .hcar__arrow--prev{left:auto;right:80px}
  .hcar__arrow--next{right:22px}
  .hcar__dots{left:var(--gutter);transform:none;bottom:44px}
  @media (max-width:860px){
    .hcar__dots{left:50%;transform:translateX(-50%);bottom:24px}
  }

  /* ---------- Header refinements ---------- */
  .nav-cta-wrap .btn{white-space:nowrap;padding:14px 22px;font-size:11px;letter-spacing:.11em}
  .brand__name .t{white-space:nowrap;font-size:9px;letter-spacing:.14em}
  @media (max-width:1440px){
    .navlist{gap:0}
    .navlist > li > a,.navlist > li > button{padding:12px 9px;font-size:11px;letter-spacing:.05em}
    .nav{gap:16px}
    .nav-cta-wrap .btn{padding:13px 16px;font-size:10px}
  }
  @media (max-width:1180px){
    .brand__name .t{display:none}
    .navlist > li > a,.navlist > li > button{padding:12px 7px;font-size:10.5px;letter-spacing:.03em}
  }

  /* ============================================================
     INDIVIDUAL PAGES — shared furniture
     ============================================================ */
  .phero{position:relative;overflow:hidden;background:var(--purple-ink);min-height:clamp(360px,52vh,520px);display:flex;align-items:center}
  .phero__bg{position:absolute;inset:0}
  .phero__bg img{width:100%;height:100%;object-fit:cover;object-position:50% 22%}
  .phero__scrim{position:absolute;inset:0;background:linear-gradient(90deg,rgba(28,1,40,.94) 0%,rgba(28,1,40,.80) 48%,rgba(28,1,40,.42) 100%)}
  .phero__inner{position:relative;z-index:3;padding:76px 0}
  .phero h1{color:var(--paper);font-size:clamp(34px,4.8vw,60px);line-height:1.07;font-weight:700;letter-spacing:-.02em;margin:18px 0 16px;max-width:16ch}
  .phero h1 em{font-style:normal;color:var(--gold-light)}
  .phero p{color:rgba(255,255,255,.85);font-size:clamp(15px,1.5vw,18px);line-height:1.6;max-width:56ch}
  .phero__ctas{display:flex;gap:13px;flex-wrap:wrap;margin-top:30px}

  .sec{padding:88px 0;background:var(--paper)}
  .sec--tint{background:var(--cream)}
  .sec__head{margin-bottom:38px}
  .sec__head h2{font-size:clamp(30px,3.8vw,50px);letter-spacing:-.025em;line-height:1.08;margin-top:12px}
  .sec p{color:var(--muted)}

  .split{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center}
  .split__copy p{margin-bottom:16px}
  .split__media img{width:100%;aspect-ratio:4/5;object-fit:cover;border:0}

  .grid3{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:26px}
  .mini{background:var(--paper);border:1px solid var(--rule);padding:30px 26px;position:relative}
  .mini__n{display:block;font-size:12px;font-weight:800;letter-spacing:.16em;color:var(--gold);margin-bottom:14px}
  .mini h3{font-size:19px;letter-spacing:-.01em;margin-bottom:11px}
  .mini p{font-size:14.5px;line-height:1.6;margin:0}

  .vgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(330px,1fr));gap:28px}
  .vcard{border:1px solid var(--rule);background:var(--paper);display:flex;flex-direction:column;
         transition:transform var(--t-med),box-shadow var(--t-med),border-color var(--t-med)}
  .vcard:hover{transform:translateY(-6px);border-color:var(--gold);box-shadow:0 4px 0 var(--gold-deep),0 22px 48px rgba(72,1,105,.16)}
  .vcard__media{height:210px;overflow:hidden;background:var(--cream)}
  .vcard__media img{width:100%;height:100%;object-fit:cover;transition:transform 700ms cubic-bezier(.2,.7,.3,1)}
  .vcard:hover .vcard__media img{transform:scale(1.06)}
  .vcard__media--mark{display:grid;place-items:center;background:var(--brand-purple)}
  .vcard__media--mark span{font-size:66px;font-weight:800;color:var(--gold);letter-spacing:-.04em}
  .vcard__body{padding:26px;display:flex;flex-direction:column;flex:1}
  .vcard__tag{font-size:10.5px;font-weight:800;letter-spacing:.17em;text-transform:uppercase;color:var(--brand-purple);margin-bottom:10px}
  .vcard h2,.vcard h3{font-size:21px;letter-spacing:-.015em;margin-bottom:11px}
  .vcard p{font-size:14.5px;line-height:1.6;margin-bottom:22px;flex:1}
  .vcard .btn{align-self:flex-start}

  .feat{list-style:none;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:24px}
  .feat li{display:flex;gap:14px;align-items:flex-start}
  .feat svg{flex-shrink:0;color:var(--gold);margin-top:3px}
  .feat strong{display:block;font-size:16px;font-weight:700;color:var(--ink);margin-bottom:5px}
  .feat span{font-size:14.5px;line-height:1.6;color:var(--muted)}



  @media (max-width:900px){
    .sec{padding:60px 0}
    .split{grid-template-columns:1fr;gap:32px}
    .phero__scrim{background:linear-gradient(180deg,rgba(28,1,40,.82),rgba(28,1,40,.93))}
    .phero__inner{padding:54px 0}
    .cta-strip__btns .btn{flex:1 1 100%;justify-content:center}
  }

  /* ---------- Journal ---------- */
  .jgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(330px,1fr));gap:30px}
  .jcard{border:1px solid var(--rule);background:var(--paper);display:flex;flex-direction:column;
         transition:transform var(--t-med),box-shadow var(--t-med),border-color var(--t-med)}
  .jcard:hover{transform:translateY(-6px);border-color:var(--gold);box-shadow:0 4px 0 var(--gold-deep),0 22px 48px rgba(72,1,105,.16)}
  .jcard__media{position:relative;display:block;height:210px;overflow:hidden;background:var(--cream)}
  .jcard__media img{width:100%;height:100%;object-fit:cover;transition:transform 700ms cubic-bezier(.2,.7,.3,1)}
  .jcard:hover .jcard__media img{transform:scale(1.06)}
  .jcard__tag{position:absolute;top:0;left:0;background:var(--gold);color:var(--ink);
              font-size:10px;font-weight:800;letter-spacing:.15em;text-transform:uppercase;padding:8px 13px}
  .jcard__tag--inline{position:static;display:inline-block;margin-bottom:16px}
  .jcard__body{padding:24px;display:flex;flex-direction:column;flex:1}
  .jcard__meta{font-size:11.5px;font-weight:700;letter-spacing:.11em;text-transform:uppercase;color:var(--faint);margin-bottom:12px}
  .jcard h2,.jcard h3{font-size:20px;line-height:1.28;letter-spacing:-.015em;margin-bottom:11px}
  .jcard h2 a:hover,.jcard h3 a:hover{color:var(--brand-purple)}
  .jcard p{font-size:14.5px;line-height:1.6;color:var(--muted);margin-bottom:20px;flex:1}
  .jcard__read{font-size:12px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--brand-purple)}
  .jcard__read:hover{color:var(--gold-deep)}

  /* ---------- Article ---------- */
  .post{padding:40px 0 88px;background:var(--paper)}
  .post .container{max-width:820px}
  .post__head{margin:28px 0 30px}
  .post__head h1{font-size:clamp(30px,4.2vw,52px);line-height:1.08;letter-spacing:-.03em;margin-bottom:14px}
  .post__meta{font-size:12px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--faint)}
  .post__hero{margin-bottom:38px}
  .post__hero img{width:100%;aspect-ratio:16/9;object-fit:cover}
  .post__body h2{font-size:clamp(21px,2.4vw,28px);letter-spacing:-.02em;margin:38px 0 14px}
  .post__body p{font-size:17px;line-height:1.75;color:var(--muted);margin-bottom:20px;max-width:none}
  .post__foot{margin-top:46px;padding:26px;background:var(--cream);border-left:4px solid var(--gold)}
  .post__foot p{font-size:14px;color:var(--muted);margin-bottom:18px}

  /* ============================================================
     MOBILE NAV DRAWER — the hamburger now actually opens something
     ============================================================ */
  .menu-toggle{border-radius:0;border:2px solid var(--ink);gap:5px}
  .menu-toggle span{display:block;width:20px;height:2px;background:var(--ink);transition:transform var(--t-fast),opacity var(--t-fast)}
  .menu-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
  .menu-toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
  .menu-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

  /* 1180, not 980. The hamburger replaces the navlist at 1180 — the block
     further down hides .navlist and shows .menu-toggle there — but this block
     is the one that supplies the two-column grid and the .navlist.is-open
     drawer. Between the two numbers the header kept its three-column desktop
     grid with the middle track empty, so the hamburger sat mid-header with the
     rest of the row blank, and .navlist.is-open matched no rule at all: the
     button flipped aria-expanded and nothing opened. There was no navigation
     between 981px and 1180px — iPad landscape and the common laptop widths.
     One number, so the two blocks cannot disagree again. */
  @media (max-width:1180px){
    .site-header{position:sticky}
    .nav{grid-template-columns:1fr auto;gap:12px}
    .nav-cta-wrap{gap:10px}
    .nav-cta-wrap .btn{display:none}

    .navlist.is-open{
      /* flex-start, explicitly. .navlist centres its items for the desktop row;
         this rule changes the axis to a column but not the justification, so a
         drawer taller than the screen was centred too — and the half that
         overflowed above the top edge cannot be scrolled to, because scrollTop
         has no negative range. The menu opened part-way down the Ventures
         submenu and About and Ventures were unreachable on every phone. */
      display:flex;flex-direction:column;justify-content:flex-start;align-items:stretch;gap:0;
      position:absolute;left:0;right:0;top:100%;
      background:var(--paper);border-top:3px solid var(--gold);
      box-shadow:0 22px 44px rgba(72,1,105,.20);
      padding:8px 0;max-height:calc(100vh - 100%);overflow-y:auto;z-index:120;
    }
    .navlist.is-open > li{width:100%}
    .navlist.is-open > li > a,
    .navlist.is-open > li > button{
      width:100%;justify-content:space-between;padding:16px var(--gutter);
      font-size:13px;letter-spacing:.11em;border-bottom:1px solid var(--rule);
      border-left:3px solid transparent;
    }
    .navlist.is-open > li > a:hover,
    .navlist.is-open > li > button:hover{border-bottom-color:var(--rule);border-left-color:var(--gold);background:var(--cream)}

    /* submenu always expanded inside the drawer */
    .navlist.is-open .submenu{
      position:static;transform:none;opacity:1;visibility:visible;
      box-shadow:none;border-top:0;border-left:3px solid var(--gold);
      min-width:0;margin:0 var(--gutter) 6px;background:var(--cream);padding:4px 0;
    }
    .navlist.is-open .submenu li a{padding:11px 18px;font-size:12.5px}
    .navlist.is-open .has-menu > button::after{border-top-color:var(--gold)}
  }

  /* Hamburger -> X, positioned absolutely so the cross always lands true */
  .menu-toggle{position:relative;gap:0}
  .menu-toggle span{position:absolute;left:50%;top:50%;width:20px;height:2px;background:var(--ink);
                    margin-left:-10px;transition:transform var(--t-fast),opacity var(--t-fast)}
  .menu-toggle span:nth-child(1){transform:translateY(-7px)}
  .menu-toggle span:nth-child(2){transform:translateY(0)}
  .menu-toggle span:nth-child(3){transform:translateY(7px)}
  .menu-toggle[aria-expanded="true"] span:nth-child(1){transform:rotate(45deg)}
  .menu-toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
  .menu-toggle[aria-expanded="true"] span:nth-child(3){transform:rotate(-45deg)}

  /* ---------- FAQ (accordion) ---------- */
  .faq{max-width:900px}
  .faq__i{border-bottom:1px solid var(--rule);background:transparent}
  .faq__i:first-child{border-top:1px solid var(--rule)}
  .faq__i summary{
    list-style:none;cursor:pointer;display:flex;align-items:flex-start;justify-content:space-between;
    gap:24px;padding:24px 0;font-size:17px;font-weight:700;color:var(--ink);letter-spacing:-.01em;
  }
  .faq__i summary::-webkit-details-marker{display:none}
  .faq__i summary:hover{color:var(--brand-purple)}
  .faq__i summary svg{flex-shrink:0;color:var(--gold);margin-top:4px;transition:transform var(--t-med)}
  .faq__i[open] summary svg{transform:rotate(45deg)}
  .faq__a{padding:0 44px 24px 0}
  .faq__a p{font-size:15.5px;line-height:1.72;color:var(--muted);margin:0;max-width:74ch}

  /* ---------- Press page ---------- */
  .facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:2px;background:var(--rule)}
  .facts__i{background:var(--paper);padding:28px 22px;text-align:center}
  .facts__i strong{display:block;font-size:32px;font-weight:800;color:var(--brand-purple);letter-spacing:-.03em;line-height:1}
  .facts__i span{display:block;margin-top:8px;font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
  .biobox{border-left:4px solid var(--gold);background:var(--paper);padding:24px 26px;margin-bottom:16px}
  .biobox h3{font-size:11.5px;font-weight:800;letter-spacing:.15em;text-transform:uppercase;color:var(--brand-purple);margin-bottom:11px}
  .biobox p{font-size:15.5px;line-height:1.7;color:var(--muted);margin:0;max-width:none}
  .shots{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:20px}
  .shots__i{margin:0}
  .shots__i img{width:100%;aspect-ratio:3/4;object-fit:cover;object-position:50% 18%}
  .shots__i figcaption{margin-top:10px;font-size:11.5px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--muted)}

  /* ---------- Printable speaker one-sheet ---------- */
  .kit{background:var(--cream);padding:28px 0 72px}
  .kit__bar{display:flex;justify-content:space-between;align-items:center;margin-bottom:22px}
  .kit__sheet{max-width:860px;margin:0 auto;background:var(--paper);padding:52px 56px;border:1px solid var(--rule);box-shadow:var(--shadow-2)}
  .kit__head{display:flex;gap:32px;align-items:flex-start;justify-content:space-between;
             padding-bottom:26px;margin-bottom:26px;border-bottom:3px solid var(--gold)}
  .kit__eyebrow{font-size:10.5px;font-weight:800;letter-spacing:.2em;text-transform:uppercase;color:var(--gold-deep)}
  .kit__sheet h1{font-size:44px;letter-spacing:-.03em;margin:8px 0 8px;line-height:1}
  .kit__role{font-size:13.5px;color:var(--muted);margin:0;max-width:46ch}
  .kit__photo{width:132px;height:132px;object-fit:cover;flex-shrink:0;border:3px solid var(--gold)}
  .kit__row{margin-bottom:26px}
  .kit__row h2{font-size:11.5px;font-weight:800;letter-spacing:.17em;text-transform:uppercase;
               color:var(--brand-purple);margin-bottom:12px}
  .kit__row p{font-size:14.5px;line-height:1.66;color:var(--muted);max-width:none}
  .kit__facts{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
  .kit__facts div{border-left:3px solid var(--gold);padding-left:12px}
  .kit__facts strong{display:block;font-size:21px;font-weight:800;color:var(--ink);letter-spacing:-.02em}
  .kit__facts span{font-size:10.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
  .kit__talks{list-style:none;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:9px}
  .kit__talks li{font-size:14.5px;color:var(--muted);padding-left:16px;position:relative}
  .kit__talks li::before{content:"";position:absolute;left:0;top:9px;width:6px;height:6px;background:var(--gold)}
  .kit__foot{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;padding-top:22px;border-top:1px solid var(--rule);
             font-size:13px;line-height:1.6;color:var(--muted)}
  .kit__foot strong{color:var(--ink);font-size:10.5px;letter-spacing:.13em;text-transform:uppercase}
  @media (max-width:720px){
    .kit__sheet{padding:30px 24px}.kit__head{flex-direction:column-reverse;gap:18px}
    .kit__facts,.kit__talks,.kit__foot{grid-template-columns:1fr}
  }
  @media print{
    .demobar,.topbar,.site-header,footer,.kit__bar,.skip-link{display:none !important}
    .kit{background:#fff;padding:0}
    .kit__sheet{box-shadow:none;border:0;max-width:none;padding:0}
    @page{margin:14mm}
  }

  /* ---------- Footer heading fix ----------
     The generated footer uses <h4>; only footer h5 was styled, so the
     column headings were rendering black-on-black. */
  footer h2,footer h3,footer h4{
    font-family:var(--body);font-size:11px;letter-spacing:.28em;text-transform:uppercase;
    color:var(--gold-light);font-weight:800;margin-bottom:22px;
  }

  /* ---------- Speaker one-sheet: don't inherit the site footer ----------
     .kit__foot is a <footer> element, so footer{background:#0e0e0e}
     was painting it black and hiding the contact details. */
  .kit__foot{
    background:transparent;color:var(--muted);padding:22px 0 0;
  }
  .kit__foot strong{color:var(--ink)}
  .kit__foot a{color:var(--ink)}

  /* FAQ sits in a 900px measure for readability — centre it so the
     section doesn't read as lopsided inside the 1320px container. */
  .faq{margin-left:auto;margin-right:auto}
  .sec:has(.faq) .sec__head{max-width:900px;margin-left:auto;margin-right:auto}

  /* Arrows removed — recentre the dots */
  .hcar__dots{left:50%;transform:translateX(-50%);bottom:30px}
  .hcar__arrow{display:none}

  /* ============================================================
     HERO UNIFICATION
     .phero was display:flex, so its .container became a content-width
     flex item and centred itself — while the homepage hero's copy sat
     at the container's left edge. That's what made the pages look
     disjointed. Both now share one left-aligned treatment.
     ============================================================ */
  .phero{display:block;position:relative}
  .phero__inner{
    width:100%;max-width:var(--container);margin:0 auto;padding-left:var(--gutter);padding-right:var(--gutter);
    display:flex;flex-direction:column;justify-content:center;
    min-height:clamp(380px,54vh,540px);
  }
  .phero__inner > *{max-width:660px}

  /* identical scrim to the homepage carousel */
  .phero__scrim{
    background:linear-gradient(90deg,rgba(28,1,40,.93) 0%,rgba(28,1,40,.78) 42%,rgba(28,1,40,.30) 100%);
  }
  /* identical chip, heading and body treatment */
  .phero .hcar__chip{margin-bottom:22px}
  .phero h1{font-size:clamp(38px,5.4vw,64px);line-height:1.06;margin:0 0 20px;max-width:15ch}
  .phero p{font-size:clamp(15px,1.5vw,18px);line-height:1.62;max-width:54ch;margin:0}
  .phero__ctas{margin-top:32px}

  @media (max-width:860px){
    .phero__scrim{background:linear-gradient(180deg,rgba(28,1,40,.80) 0%,rgba(28,1,40,.92) 100%)}
    .phero__inner{min-height:auto;padding-top:56px;padding-bottom:64px}
  }

  /* No image motion anywhere in product/venture/journal cards */
  .pcard:hover .pcard__media img,
  .vcard:hover .vcard__media img,
  .jcard:hover .jcard__media img{transform:none}
  .vcard__media img,.jcard__media img{transition:none}

  /* ---------- Gallery video tiles ---------- */
  .gal__item video{width:100%;height:100%;object-fit:cover;display:block}
  .gal__item--video .gal__play{
    position:absolute;top:12px;left:12px;z-index:3;
    width:26px;height:26px;display:grid;place-items:center;
    background:var(--gold);color:var(--ink);
  }
  /* stills never move; video is the only motion in the grid */
  .gal__item img{transition:none}
  .gal__item:hover img{transform:none}

  /* ============================================================
     WHO I AM — Foundation's "Who We Are" pattern
     Big statement left, body copy right, CTA under the copy.
     ============================================================ */
  .whoami{background:var(--paper);padding:96px 0}
  .whoami__grid{display:grid;grid-template-columns:1fr 1.05fr;gap:72px;align-items:start}
  .whoami__left h2{font-size:clamp(30px,3.8vw,50px);line-height:1.1;letter-spacing:-.03em;margin-top:14px}
  .whoami__left h2 .gold{color:var(--gold)}
  .whoami__right p{font-size:16.5px;line-height:1.75;color:var(--muted);margin-bottom:18px;max-width:60ch}
  .whoami__right .btn{margin-top:12px}
  @media (max-width:900px){
    .whoami{padding:60px 0}
    .whoami__grid{grid-template-columns:1fr;gap:26px}
  }

  /* ============================================================
     DARK SECTIONS — break up the white
     .on-black  = black ground, gold accents
     .on-purple = deep purple ground, gold accents
     ============================================================ */
  .sec--black,.sec--purple{color:var(--paper)}
  .sec--black{background:var(--ink)}
  .sec--purple{background:var(--purple-deep)}

  .sec--black h1,.sec--black h2,.sec--black h3,.sec--black h4,
  .sec--purple h1,.sec--purple h2,.sec--purple h3,.sec--purple h4{color:var(--paper)}
  .sec--black p,.sec--purple p{color:rgba(255,255,255,.80)}
  .sec--black .lede,.sec--purple .lede{color:rgba(255,255,255,.92)}
  .sec--black .eyebrow,.sec--purple .eyebrow{color:var(--gold-light)}
  .sec--black .eyebrow.with-line::before,.sec--purple .eyebrow.with-line::before{background:var(--gold)}
  .sec--black .gold,.sec--purple .gold{color:var(--gold-light)}

  /* cards sitting on a dark ground */
  .sec--black .mini,.sec--purple .mini{
    background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.14);
  }
  .sec--black .mini h3,.sec--purple .mini h3{color:var(--paper)}
  .sec--black .mini p,.sec--purple .mini p{color:rgba(255,255,255,.72)}
  .sec--black .feat strong,.sec--purple .feat strong{color:var(--paper)}
  .sec--black .feat span,.sec--purple .feat span{color:rgba(255,255,255,.74)}
  .sec--black .btn--ghost,.sec--purple .btn--ghost{color:var(--paper);border-color:var(--gold)}
  .sec--black .btn--ghost:hover,.sec--purple .btn--ghost:hover{background:var(--gold);color:var(--ink)}
  .sec--black .faq__i,.sec--purple .faq__i{border-color:rgba(255,255,255,.16)}
  .sec--black .faq__i summary,.sec--purple .faq__i summary{color:var(--paper)}
  .sec--black .faq__a p,.sec--purple .faq__a p{color:rgba(255,255,255,.76)}

  /* gallery on black */
  .gal--dark{background:var(--ink)}
  .gal--dark h2{color:var(--paper)}
  .gal--dark p{color:rgba(255,255,255,.75)}
  .gal--dark .eyebrow{color:var(--gold-light)}
  .gal--dark .eyebrow.with-line::before{background:var(--gold)}

  /* venture / journal cards on a dark ground */
  .sec--black .vcard,.sec--purple .vcard,
  .sec--black .jcard,.sec--purple .jcard{
    background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.15);
  }
  .sec--black .vcard :is(h2,h3),.sec--purple .vcard :is(h2,h3),
  .sec--black .jcard :is(h2,h3),.sec--purple .jcard :is(h2,h3){color:var(--paper)}
  .sec--black .vcard p,.sec--purple .vcard p,
  .sec--black .jcard p,.sec--purple .jcard p{color:rgba(255,255,255,.74)}
  .sec--black .vcard__tag,.sec--purple .vcard__tag{color:var(--gold-light)}
  .sec--black .jcard__meta,.sec--purple .jcard__meta{color:rgba(255,255,255,.55)}
  .sec--black .jcard__read,.sec--purple .jcard__read{color:var(--gold-light)}
  .sec--black .vcard__media--mark,.sec--purple .vcard__media--mark{background:rgba(255,255,255,.06)}
  .sec--black .sec__head h2,.sec--purple .sec__head h2{color:var(--paper)}

  /* .phero__inner is a flex column; default align-items:stretch was
     expanding the inline-block chip into a full-width bar. */
  .phero__inner{align-items:flex-start}
  .phero__inner > h1,.phero__inner > p{width:100%}
  .phero .hcar__chip{align-self:flex-start;width:auto;display:inline-block}

  /* Mobile: stack hero CTAs full width so both heroes behave the same */
  @media (max-width:640px){
    .phero__ctas,.hcar__ctas{flex-direction:column;align-items:stretch;width:100%}
    .phero__ctas .btn,.hcar__ctas .btn{width:100%;justify-content:center}
    .cta-strip__btns .btn,.cta-strip .btns .btn{width:100%;justify-content:center}
  }

  /* The legacy mobile block forces h2{font-size:28px !important} at
     <=480px, which squashed the one-sheet's small label headings.
     These are labels, not headings — hold their size. */
  @media (max-width:480px){
    .kit__row h2{font-size:11.5px !important;letter-spacing:.17em !important}
    .kit__sheet h1{font-size:32px !important}
  }

  /* ============================================================
     ==  DESIGN SYSTEM v2  —  built to the brand document  ==
     §3 Visual Brand Direction:
       Luxury Editorial x Apple Simplicity x African Sophistication
     ============================================================ */

  /* ---------- 1. EDITORIAL TYPOGRAPHY ----------
     Bodoni Moda for display, Inter for everything functional.
     High-contrast didone = editorial/fashion register, and it
     carries the monumental name treatment on About. */
  :root{
    --display: "Bodoni Moda", "Times New Roman", Georgia, serif;
    --body:    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  }
  h1,h2,h3{
    font-family:var(--display);
    font-weight:600;
    letter-spacing:-.015em;
    font-optical-sizing:auto;
  }
  h1{line-height:1.02}
  h2{line-height:1.06}
  h3{line-height:1.14}
  /* Functional headings stay Inter — labels, cards, UI */
  h4,h5,h6,
  .pcard__title,.vcard :is(h2,h3),.jcard :is(h2,h3),.mini h3,.rcard h3,
  .cbox h3,.trust__item strong,.feat strong,.kit__row h2,
  .shop-group__head h2,.faq__i summary,.biobox h3{
    font-family:var(--body);letter-spacing:-.01em;
  }
  .lede{font-family:var(--body)}
  /* Display italic — Bodoni's italic is the brand's flourish */
  h1 em,h2 em,h1 .it,h2 .it{font-style:italic;font-weight:500}

  /* ---------- 2. THE MARKER  ----------
     One key phrase per screen, blocked in gold. Seen on BOTH
     bossbabe and Mel Robbins — it is how this category makes a
     single claim unmissable. Use sparingly: once per view. */
  .mark{
    background:var(--gold);
    color:var(--ink);
    padding:.04em .22em .08em;
    box-decoration-break:clone;-webkit-box-decoration-break:clone;
    font-style:normal;
  }
  .mark--purple{background:var(--brand-purple);color:var(--paper)}
  .on-dark .mark,.sec--black .mark,.sec--purple .mark,.phero .mark,.hcar .mark{
    background:var(--gold);color:var(--ink);
  }

  /* ---------- 3. RATION THE GOLD ----------
     Document says "controlled gold accents". Gold is reserved for
     the primary action, the counter numerals, the chip and the
     marker. Everything decorative moves to purple. */
  .mini__n{color:var(--brand-purple)}
  .feat svg{color:var(--brand-purple)}
  .jcard__read{color:var(--brand-purple)}
  .pcard__rating{color:var(--brand-purple)}
  .cbox{border-left-color:var(--brand-purple)}
  .biobox{border-left-color:var(--brand-purple)}
  .post__foot{border-left-color:var(--brand-purple)}
  .kit__facts div{border-left-color:var(--brand-purple)}
  .kit__talks li::before{background:var(--brand-purple)}
  .ticker__i::after{background:var(--brand-purple)}
  .faq__i summary svg{color:var(--brand-purple)}
  .gal__cap{color:var(--paper)}
  /* card hover edges: purple, not gold */
  .vcard:hover,.jcard:hover{border-color:var(--brand-purple);box-shadow:0 4px 0 var(--purple-ink),0 22px 48px rgba(72,1,105,.18)}
  /* gold stays on: .btn, .counter__n, .hcar__chip, .mark, footer h3, submenu border */

  /* ---------- 4. ELEGANT MOVEMENT ----------
     §3: "Elegant movement and transitions". Sections rise in on
     first view; hero imagery drifts. All disabled for
     prefers-reduced-motion via the global guard already in place. */
  .reveal{opacity:0;transform:translateY(26px);transition:opacity .9s cubic-bezier(.2,.7,.3,1),transform .9s cubic-bezier(.2,.7,.3,1)}
  .reveal.is-in{opacity:1;transform:none}
  .reveal--d1{transition-delay:.09s}
  .reveal--d2{transition-delay:.18s}
  .reveal--d3{transition-delay:.27s}
  @media (prefers-reduced-motion:reduce){
    .reveal{opacity:1 !important;transform:none !important}
  }
  .parallax{will-change:transform}

  /* ---------- Chips (curriculum, story filters) ---------- */
  .chipwrap{display:flex;flex-wrap:wrap;gap:10px}
  .chip{
    display:inline-block;padding:9px 15px;border:1px solid var(--rule);
    font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ink);
    background:var(--paper);
  }
  .sec--black .chip,.sec--purple .chip{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.18);color:var(--paper)}
  .chip--btn{cursor:pointer;transition:all var(--t-fast);font-family:var(--body)}
  .chip--btn:hover{border-color:var(--brand-purple);color:var(--brand-purple)}
  .chip--btn.is-on{background:var(--brand-purple);border-color:var(--brand-purple);color:var(--paper)}
  .filterbar{display:flex;flex-wrap:wrap;gap:9px;margin-bottom:32px}

  /* ---------- Success story cards ---------- */
  .scard__top{display:flex;align-items:center;gap:13px;padding:20px 22px;border-bottom:1px solid var(--rule);position:relative}
  .scard__top img{width:52px;height:52px;border-radius:50%;object-fit:cover;flex-shrink:0}
  .jcard__mono{
    width:52px;height:52px;border-radius:50%;flex-shrink:0;display:grid;place-items:center;
    background:var(--brand-purple);color:var(--gold);font-family:var(--display);font-size:22px;font-weight:700;
  }
  .scard__name{font-size:16px;font-weight:700;color:var(--ink);font-family:var(--body)}
  .scard__meta{font-size:12px;color:var(--faint);letter-spacing:.04em}
  .scard__flag{
    position:absolute;top:14px;right:14px;background:var(--ink);color:var(--paper);
    font-size:9px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;padding:4px 8px;
  }
  .scard__result{
    display:inline-block;background:var(--gold);color:var(--ink);font-family:var(--body);
    font-size:11px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;
    padding:6px 11px;margin-bottom:13px;
  }
  .scard .jcard__body p q{quotes:none;font-style:italic}
  .scard__note{font-size:13px;color:var(--muted);background:var(--cream);border-left:4px solid var(--brand-purple);padding:14px 18px;margin-top:16px}

  /* ---------- Story detail: BEFORE / ACTION / AFTER / RESULT ---------- */
  .bigq{margin:0 0 40px;padding:30px 34px;background:var(--cream);border-left:5px solid var(--gold)}
  .bigq q{quotes:none;font-family:var(--display);font-size:clamp(19px,2.3vw,27px);line-height:1.42;color:var(--ink);font-style:italic}
  .steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:2px;background:var(--rule)}
  .stepx{background:var(--paper);padding:26px 24px}
  .stepx__l{display:block;font-family:var(--body);font-size:10.5px;font-weight:800;letter-spacing:.18em;text-transform:uppercase;color:var(--brand-purple);margin-bottom:11px}
  .stepx p{font-size:15px;line-height:1.65;color:var(--muted);margin:0;max-width:none}

  /* ---------- Marie TV ---------- */
  .tvgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:24px}
  .tvcard{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.14)}
  .tvcard__media{position:relative;aspect-ratio:16/9;overflow:hidden;background:var(--purple-ink)}
  .tvcard__media video{width:100%;height:100%;object-fit:cover;display:block}
  .tvcard__play{position:absolute;top:12px;left:12px;width:28px;height:28px;display:grid;place-items:center;background:var(--gold);color:var(--ink)}
  .tvcard__body{padding:20px 22px}
  .tvcard__tag{display:block;font-family:var(--body);font-size:10.5px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--gold-light);margin-bottom:9px}
  .tvcard h3{font-size:18px;line-height:1.3;color:var(--paper);font-family:var(--body)}

  @media (max-width:720px){
    .steps{grid-template-columns:1fr}
    .bigq{padding:22px 20px}
  }

  /* ---------- Nav fits 10 items ----------
     The expanded navigation overflowed at 1310px: navlist measured
     790px and a centre-anchored submenu spilled past the right edge. */
  .submenu{left:0;transform:translateY(8px)}
  .has-menu:hover .submenu,.has-menu:focus-within .submenu{transform:translateY(0)}
  /* menus in the right half open leftwards so they cannot spill */
  .navlist > li.has-menu:nth-last-child(-n+4) .submenu{left:auto;right:0}

  @media (max-width:1560px){
    .navlist{gap:0}
    .navlist > li > a,.navlist > li > button{padding:12px 8px;font-size:10.5px;letter-spacing:.04em}
    .nav{gap:14px}
    .nav-cta-wrap .btn{padding:12px 14px;font-size:9.5px;letter-spacing:.08em}
    .brand__name .t{font-size:8px;letter-spacing:.09em}
  }
  @media (max-width:1300px){
    .brand__name .t{display:none}
    .navlist > li > a,.navlist > li > button{padding:12px 6px;font-size:10px;letter-spacing:.02em}
  }
  /* collapse to the drawer sooner — 10 items need the room */
  @media (max-width:1180px){
    .navlist{display:none}
    .menu-toggle{display:inline-flex}
    .nav-cta-wrap .btn{display:none}
  }

  /* The five-dimension descriptor is long; it must not widen the brand
     block enough to push the nav CTA off-screen. */
  .brand__name .t{max-width:340px;white-space:normal;line-height:1.35}
  @media (max-width:1560px){ .brand__name .t{display:none} }

  /* ============================================================
     NAME HERO — the person IS the graphic (document §7)
     Monumental Bodoni name; the portrait overlaps the letters so
     she stands in front of her own name.
     ============================================================ */
  .namehero{position:relative;background:var(--paper);padding:64px 0 0;overflow:hidden}
  .namehero .container{position:relative}
  .namehero__type{
    position:absolute;top:0;left:var(--gutter);right:var(--gutter);z-index:1;
    font-family:var(--display);font-weight:700;color:var(--brand-purple);
    line-height:.82;letter-spacing:-.035em;pointer-events:none;user-select:none;
    display:flex;flex-direction:column;
  }
  .namehero__l1,.namehero__l2{display:block;font-size:clamp(72px,15.5vw,232px)}
  .namehero__l2{color:var(--gold);align-self:flex-end}
  .namehero__photo{
    position:relative;z-index:2;width:min(430px,46%);margin:clamp(40px,7vw,96px) auto 0;
    box-shadow:0 40px 90px rgba(28,1,40,.34);
  }
  .namehero__photo img{width:100%;height:auto;display:block;aspect-ratio:3/4;object-fit:cover;object-position:50% 12%}
  .namehero__copy{
    position:relative;z-index:3;max-width:660px;margin:0 auto;
    padding:40px 0 88px;text-align:center;
  }
  .namehero__roles{
    font-family:var(--body);font-size:clamp(12px,1.3vw,15px);font-weight:800;
    letter-spacing:.15em;text-transform:uppercase;color:var(--ink);
    margin:14px auto 20px;max-width:none;
  }
  .namehero__lede{font-size:clamp(16px,1.7vw,19px);line-height:1.65;color:var(--muted);margin:0 auto 30px}
  .namehero__ctas{display:flex;gap:13px;justify-content:center;flex-wrap:wrap}

  @media (max-width:860px){
    .namehero{padding-top:40px}
    .namehero__photo{width:min(300px,72%)}
    .namehero__l1,.namehero__l2{font-size:clamp(52px,17vw,110px)}
    .namehero__copy{padding-bottom:56px}
    .namehero__ctas .btn{flex:1 1 100%;justify-content:center}
  }

  /* ---------- Persistent "New Here?" ---------- */
  .newhere{
    position:fixed;right:22px;bottom:22px;z-index:150;
    width:82px;height:82px;border-radius:50%;
    background:var(--gold);color:var(--ink);display:grid;place-items:center;text-align:center;
    font-family:var(--body);font-size:12px;font-weight:800;letter-spacing:.06em;line-height:1.2;
    box-shadow:0 10px 26px rgba(28,1,40,.34);transition:transform var(--t-fast),background var(--t-fast);
  }
  .newhere:hover{transform:translateY(-3px) scale(1.04);background:var(--gold-light);color:var(--ink)}
  @media (max-width:720px){.newhere{width:64px;height:64px;font-size:10.5px;right:14px;bottom:14px}}

  /* ---------- Entry popup (The Marie Achebe Letter) ---------- */
  .letterpop{position:fixed;inset:0;z-index:260;display:flex;align-items:center;justify-content:center;padding:24px}
  .letterpop__scrim{position:absolute;inset:0;background:rgba(17,17,17,.62);backdrop-filter:blur(3px)}
  .letterpop__panel{
    position:relative;z-index:2;background:var(--paper);width:min(880px,100%);
    display:grid;grid-template-columns:1fr 1fr;box-shadow:0 40px 90px rgba(0,0,0,.34);
    animation:mdlIn 300ms cubic-bezier(.2,.7,.3,1);
  }
  .letterpop__art{
    background:var(--purple-deep);padding:44px 38px;display:flex;flex-direction:column;justify-content:flex-end;min-height:330px;
  }
  .letterpop__kicker{font-family:var(--body);font-size:10.5px;font-weight:800;letter-spacing:.2em;text-transform:uppercase;color:var(--gold-light);margin-bottom:14px}
  .letterpop__big{font-family:var(--display);font-size:clamp(24px,3vw,34px);line-height:1.14;color:var(--paper);margin:0}
  .letterpop__big em{font-style:italic;color:var(--gold-light)}
  .letterpop__body{padding:44px 38px;display:flex;flex-direction:column;justify-content:center}
  .letterpop__body h3{font-family:var(--body);font-size:21px;line-height:1.3;margin-bottom:12px}
  .letterpop__body p{font-size:14.5px;color:var(--muted);margin-bottom:20px}
  .letterpop__body .btn{width:100%;justify-content:center}
  .letterpop__note{font-size:11.5px;color:var(--faint);text-align:center;margin:12px 0 0}
  .letterpop__x{
    position:absolute;top:12px;right:12px;z-index:4;width:32px;height:32px;
    background:var(--paper);border:1px solid var(--rule);font-size:18px;line-height:1;cursor:pointer;color:var(--muted);
  }
  .letterpop__x:hover{background:var(--cream);color:var(--ink)}
  @media (max-width:760px){
    .letterpop__panel{grid-template-columns:1fr}
    .letterpop__art{min-height:170px;padding:28px 24px}
    .letterpop__body{padding:28px 24px}
  }

  /* ---------- Hero slide 1: name headline + roles descriptor ----------
     The five roles set as a 5-line H1 overflowed the hero: the chip
     clipped under the sticky header and the CTAs fell behind the next
     section. Document §4 puts the NAME first with the roles beneath. */
  .hcar__name{
    font-size:clamp(44px,7.2vw,104px);line-height:.98;letter-spacing:-.02em;
    color:var(--paper);margin:0 0 16px;
  }
  .hcar__roles{
    font-family:var(--body);font-size:clamp(11px,1.25vw,15px);font-weight:800;
    letter-spacing:.16em;text-transform:uppercase;color:var(--gold-light);
    margin:0 0 20px;max-width:44ch;line-height:1.7;
  }
  /* never let slide content spill out of the hero */
  .hcar__slide{overflow:hidden}
  .hcar__inner{padding:72px 0 96px}
  @media (max-width:860px){
    .hcar__inner{padding:44px 0 84px}
    .hcar__roles{letter-spacing:.12em;line-height:1.6}
  }

  /* ============================================================
     LEGIBILITY PASS
     Bodoni Moda is a high-contrast didone: its hairlines disappear
     below roughly 34px. Restrict it to genuinely large display, give
     it more weight, and hand everything smaller to Inter. Then lift
     the small-text sizes across the board.
     ============================================================ */

  /* 1. Serif only at display scale, and heavier so strokes hold */
  h1,h2{font-weight:700}
  h3{font-family:var(--body);font-weight:700;letter-spacing:-.01em}

  /* section headings: keep the serif but never let it go small */
  .sec__head h2{font-size:clamp(34px,3.9vw,52px);font-weight:700}
  .gal__head h2{font-size:clamp(34px,3.9vw,50px);font-weight:700}
  .cta-strip h2{font-size:clamp(32px,3.7vw,48px);font-weight:700}
  .artzone__head h2{font-weight:700}
  .whoami__left h2{font-weight:700}
  .meetm__copy h2{font-weight:700}

  /* smaller headings hand back to Inter — thin serif is unreadable here */
  .shop-group__head h2,.trust__item strong,.faq__i summary,
  .pdp__block h2,.post__body h2,.scard__name,.tvcard h3,
  .stepx__l,.cbox h3,.biobox h3,.kit__row h2{font-family:var(--body)}
  .shop-group__head h2{font-size:22px;font-weight:800;letter-spacing:-.01em}
  .pdp__block h2{font-size:24px;font-weight:800}
  .post__body h2{font-size:clamp(22px,2.3vw,28px);font-weight:800}

  /* 2. Lift small text so it reads on white */
  body{font-size:17px}
  .pcard__desc{font-size:14.5px;line-height:1.62}
  .pcard__title{font-size:19px}
  .pcard__kicker,.vcard__tag{font-size:11.5px;letter-spacing:.14em}
  .vcard p,.jcard p{font-size:15.5px;line-height:1.64}
  .vcard h3,.jcard h3{font-size:21px}
  .mini p{font-size:15.5px;line-height:1.64}
  .mini h3{font-size:20px}
  .feat span{font-size:15.5px;line-height:1.64}
  .feat strong{font-size:16.5px}
  .trust__item span{font-size:14.5px}
  .trust__item strong{font-size:15.5px}
  .scard__meta{font-size:13px}
  .jcard__meta{font-size:12.5px;letter-spacing:.09em}
  .jcard__read,.pcard__learn{font-size:13px}
  .counter__l{font-size:12px;letter-spacing:.13em}
  .chip{font-size:12.5px}
  .cbox p,.legal p,.legal li{font-size:16px}
  .faq__i summary{font-size:18px;font-weight:800}
  .faq__a p{font-size:16px}
  .eyebrow{font-size:12.5px}
  .topbar{font-size:12.5px}
  .footer__col ul a{font-size:15px}
  .stepx p{font-size:16px}
  .namehero__lede{font-size:clamp(17px,1.8vw,20px)}

  /* 3. Body copy contrast — 72% black was light for 17px on white */
  :root{--muted:rgba(17,17,17,.78);--faint:rgba(17,17,17,.68)}

  /* ============================================================
     DARK-CONTEXT ACCENTS
     The gold-rationing pass moved decorative accents to purple.
     Deep purple on black or on the purple ground is unreadable, so
     on dark grounds those accents go back to gold.
     ============================================================ */
  .sec--black .mini__n,.sec--purple .mini__n,
  .artzone .mini__n,.gal--dark .mini__n{color:var(--gold-light)}

  .sec--black .feat svg,.sec--purple .feat svg{color:var(--gold-light)}
  .sec--black .jcard__read,.sec--purple .jcard__read,
  .artzone .jcard__read{color:var(--gold-light)}
  .sec--black .stepx__l,.sec--purple .stepx__l{color:var(--gold-light)}
  .sec--black .faq__i summary svg,.sec--purple .faq__i summary svg{color:var(--gold-light)}
  .sec--black .pcard__kicker,.sec--purple .pcard__kicker,
  .artzone .pcard__kicker{color:var(--brand-purple)}   /* cards keep white bodies */
  .sec--black .scard__meta,.sec--purple .scard__meta{color:rgba(255,255,255,.62)}
  .sec--black .scard__name,.sec--purple .scard__name{color:var(--paper)}
  .sec--black .jcard__mono,.sec--purple .jcard__mono{background:var(--gold);color:var(--ink)}
  .sec--black .chip,.sec--purple .chip{color:var(--paper)}
  .sec--black .cbox h3,.sec--purple .cbox h3{color:var(--gold-light)}
  .sec--black .lede,.sec--purple .lede{color:rgba(255,255,255,.94)}

  /* purple ground: never place brand-purple text on it */
  .sec--purple .mini__n,.sec--purple .vcard__tag{color:var(--gold-light)}

  /* ---------- Name hero with a true cut-out ----------
     Background removed with rembg (u2net human segmentation), so the
     figure genuinely stands in front of the letters — no frame. */
  .namehero{background:linear-gradient(180deg,var(--cream) 0%,var(--paper) 62%)}
  .namehero__cut{
    position:relative;z-index:2;width:min(560px,62%);margin:clamp(20px,4vw,54px) auto -8px;
    filter:drop-shadow(0 34px 46px rgba(28,1,40,.30));
  }
  .namehero__cut img{width:100%;height:auto;display:block}
  .namehero__type{top:clamp(10px,4vw,58px)}
  .namehero__l1{color:var(--brand-purple)}
  .namehero__l2{color:var(--gold)}
  @media (max-width:860px){ .namehero__cut{width:min(340px,80%)} }

  /* ============================================================
     FOOTER — The Marie Achebe Letter signup
     The form had no styling at all and rendered as a raw browser
     input on black. Proper treatment below.
     ============================================================ */
  .footer__news p{max-width:38ch;margin-bottom:20px}
  .footer__form{display:flex;flex-direction:column;gap:10px;max-width:340px}
  .footer__form input[type="email"]{
    width:100%;padding:15px 16px;
    background:rgba(255,255,255,.06);
    border:1px solid rgba(255,255,255,.22);
    border-radius:0;
    color:var(--paper);
    font-family:var(--body);font-size:15px;line-height:1.2;
    transition:border-color var(--t-fast),background var(--t-fast);
  }
  .footer__form input[type="email"]::placeholder{color:rgba(255,255,255,.48)}
  .footer__form input[type="email"]:hover{background:rgba(255,255,255,.09);border-color:rgba(255,255,255,.34)}
  .footer__form input[type="email"]:focus{
    outline:none;background:rgba(255,255,255,.11);
    border-color:var(--gold);box-shadow:0 0 0 3px rgba(200,148,52,.22);
  }
  .footer__form .btn{width:100%;justify-content:center;padding:15px 20px;font-size:11.5px}
  .footer__note{font-size:12px;color:rgba(255,255,255,.46);margin-top:10px;line-height:1.5}

  /* footer type + spacing generally */
  footer{padding:88px 0 34px}
  .footer__top{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.4fr;gap:52px}
  .footer__brand p{font-size:15px;line-height:1.68;color:rgba(255,255,255,.72);max-width:34ch}
  .footer__col ul{list-style:none;padding:0;display:flex;flex-direction:column;gap:11px}
  .footer__col ul a{color:rgba(255,255,255,.76);transition:color var(--t-fast)}
  .footer__col ul a:hover{color:var(--gold-light)}
  .footer__socials{display:flex;gap:12px;margin-top:22px}
  .footer__socials a{
    width:38px;height:38px;display:grid;place-items:center;
    border:1px solid rgba(255,255,255,.22);color:rgba(255,255,255,.8);
    transition:all var(--t-fast);
  }
  .footer__socials a:hover{background:var(--gold);border-color:var(--gold);color:var(--ink)}
  .footer__bottom{
    display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap;
    margin-top:56px;padding-top:26px;border-top:1px solid rgba(255,255,255,.13);
    font-size:13.5px;color:rgba(255,255,255,.56);
  }
  .footer__bottom a{color:rgba(255,255,255,.62)}
  .footer__bottom a:hover{color:var(--gold-light)}

  @media (max-width:1000px){ .footer__top{grid-template-columns:1fr 1fr;gap:40px} }
  @media (max-width:620px){
    footer{padding:56px 0 28px}
    .footer__top{grid-template-columns:1fr;gap:32px}
    .footer__form{max-width:none}
    .footer__bottom{flex-direction:column;align-items:flex-start;gap:14px}
  }

  /* ---------- Social icons: proper size, spacing and hit area ---------- */
  .topbar__socials{display:flex;gap:10px;align-items:center}
  .topbar__socials a{
    width:30px;height:30px;border-radius:0;display:grid;place-items:center;
    color:rgba(255,255,255,.72);transition:color var(--t-fast),background var(--t-fast);
  }
  .topbar__socials a:hover{color:var(--gold-light);background:rgba(255,255,255,.08)}
  .topbar__socials svg{width:15px;height:15px;display:block}

  .footer__socials{display:flex;gap:10px;margin-top:24px;flex-wrap:wrap}
  .footer__socials a{
    width:42px;height:42px;display:grid;place-items:center;
    border:1px solid rgba(255,255,255,.2);color:rgba(255,255,255,.82);
    transition:all var(--t-fast);
  }
  .footer__socials a:hover{background:var(--gold);border-color:var(--gold);color:var(--ink);transform:translateY(-2px)}
  .footer__socials svg{width:17px;height:17px;display:block}

  .hero__find .socials{display:flex;gap:10px}
  .hero__find .socials a{
    width:40px;height:40px;display:grid;place-items:center;
    border:1px solid var(--rule);color:var(--ink);transition:all var(--t-fast);
  }
  .hero__find .socials a:hover{background:var(--brand-purple);border-color:var(--brand-purple);color:var(--paper)}
  .hero__find .socials svg{width:16px;height:16px;display:block}

  /* remove the legacy duplicate divider above the footer bottom bar */
  .footer__top{border-bottom:0;padding-bottom:0}
  .footer__bottom{margin-top:44px}

  /* "New Here?" must not sit on top of the footer links */
  .newhere{transition:transform var(--t-fast),background var(--t-fast),opacity var(--t-med),visibility var(--t-med)}
  .newhere.is-hidden{opacity:0;visibility:hidden;pointer-events:none}

  /* Layout guarantee: reserve space so the floating button can never
     sit on the footer links, even if the observer has not fired. */
  .footer__bottom{padding-right:124px}
  @media (max-width:620px){ .footer__bottom{padding-right:0;padding-bottom:74px} }

  /* ============================================================
     EDITORIAL SPLIT — images run edge to edge, floor to ceiling
     No padding, no floating. The image column is the section.
     ============================================================ */
  .sec--split{padding:0 !important;overflow:hidden}
  .sec--split > .container{max-width:none;padding:0}
  .sec--split .sec__head{
    max-width:var(--container);margin:0 auto;
    padding:clamp(56px,6vw,88px) var(--gutter) 0;
  }
  .sec--split .split{
    display:grid;grid-template-columns:1fr 1fr;gap:0;align-items:stretch;margin-top:clamp(28px,3.4vw,44px);
  }
  .sec--split .split__copy{
    padding:clamp(40px,5vw,76px) clamp(38px,5vw,80px) clamp(56px,6vw,88px);
    display:flex;flex-direction:column;justify-content:center;
    max-width:760px;margin-left:auto;
  }
  .sec--split .split__copy > *:last-child{margin-bottom:0}
  .sec--split .split__media{position:relative;min-height:clamp(420px,52vw,700px)}
  .sec--split .split__media img{
    position:absolute;inset:0;width:100%;height:100%;
    object-fit:cover;aspect-ratio:auto;display:block;
  }
  /* alternate the image to the left on every second split */
  .sec--split.is-flipped .split{direction:rtl}
  .sec--split.is-flipped .split > *{direction:ltr}

  @media (max-width:900px){
    .sec--split .split{grid-template-columns:1fr}
    .sec--split .split__media{min-height:320px;order:-1}
    .sec--split .split__copy{padding:34px var(--gutter) 46px;margin-left:0}
    .sec--split .sec__head{padding:44px var(--gutter) 0}
  }

  /* ---------- Tighten section headers ----------
     The gap between a section heading and its copy was cavernous. */
  .sec__head{margin-bottom:26px}
  .sec__head h2{margin-top:10px}
  .sec__head p{margin-top:12px}
  .sec{padding:clamp(56px,6.5vw,84px) 0}
  .split__copy .lede{margin-bottom:16px}
  .split__copy p{margin-bottom:14px}

  /* ============================================================
     HOMEPAGE v2 — editorial register, matching the hero
     ============================================================ */
  .world{background:var(--ink);padding:clamp(64px,7vw,104px) 0;color:var(--paper)}
  .world .sec__head h2{color:var(--paper)}
  .world .sec__head h2 em{color:var(--gold-light);font-style:italic}
  .world .sec__head p{color:rgba(255,255,255,.74);margin-top:12px}
  .world .eyebrow{color:var(--gold-light)}
  .world .eyebrow.with-line::before{background:var(--gold)}
  .vtiles{display:grid;grid-template-columns:repeat(3,1fr);gap:2px;background:rgba(255,255,255,.13)}
  .vtile{position:relative;display:block;background:var(--ink);overflow:hidden;min-height:290px}
  .vtile__img{position:absolute;inset:0}
  .vtile__img img{width:100%;height:100%;object-fit:cover;opacity:.42;transition:opacity var(--t-med),transform 700ms cubic-bezier(.2,.7,.3,1)}
  .vtile:hover .vtile__img img{opacity:.62;transform:scale(1.05)}
  .vtile__body{position:relative;z-index:2;padding:28px 26px;height:100%;display:flex;flex-direction:column;justify-content:flex-end;min-height:290px;
    background:linear-gradient(180deg,rgba(17,17,17,0) 34%,rgba(17,17,17,.86) 100%)}
  .vtile__tag{font-family:var(--body);font-size:10.5px;font-weight:800;letter-spacing:.17em;text-transform:uppercase;color:var(--gold-light);margin-bottom:9px}
  .vtile h3{font-family:var(--body);font-size:20px;font-weight:700;color:var(--paper);line-height:1.24;margin-bottom:12px}
  .vtile__go{font-family:var(--body);font-size:12px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--paper);opacity:.72;display:inline-flex;align-items:center;gap:8px}
  .vtile:hover .vtile__go{opacity:1;color:var(--gold-light)}

  .shopstrip{background:var(--cream);padding:clamp(64px,7vw,100px) 0}

  /* The Letter — full band */
  .letter{background:var(--brand-purple);color:var(--paper);overflow:hidden}
  .letter__grid{display:grid;grid-template-columns:1.1fr .9fr;gap:0;align-items:center}
  .letter__copy{padding:clamp(56px,6vw,92px) clamp(0px,2vw,40px) clamp(56px,6vw,92px) 0}
  .letter__copy h2{color:var(--paper);font-size:clamp(30px,3.8vw,50px);line-height:1.08;margin:12px 0 16px}
  .letter__copy h2 em{color:var(--gold-light);font-style:italic}
  .letter__copy p{color:rgba(255,255,255,.84);margin-bottom:24px;max-width:46ch}
  .letter .eyebrow{color:var(--gold-light)}
  .letter .eyebrow.with-line::before{background:var(--gold)}
  .letter__form{display:flex;gap:10px;max-width:460px;flex-wrap:wrap}
  .letter__form input{flex:1 1 220px;padding:16px 18px;background:rgba(255,255,255,.1);
    border:1px solid rgba(255,255,255,.28);color:var(--paper);font-family:var(--body);font-size:15px}
  .letter__form input::placeholder{color:rgba(255,255,255,.55)}
  .letter__form input:focus{outline:none;border-color:var(--gold);background:rgba(255,255,255,.15)}
  .letter__note{font-size:12px;color:rgba(255,255,255,.55);margin-top:12px}
  .letter__media{position:relative;min-height:clamp(360px,42vw,540px);margin-right:calc(var(--gutter) * -1)}
  .letter__media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 14%}

  @media (max-width:1000px){ .vtiles{grid-template-columns:repeat(2,1fr)} }
  @media (max-width:820px){
    .vtiles{grid-template-columns:1fr}
    .letter__grid{grid-template-columns:1fr}
    .letter__media{min-height:300px;margin-right:calc(var(--gutter) * -1);margin-left:calc(var(--gutter) * -1)}
    .letter__copy{padding:48px 0 40px}
  }

  /* ============================================================
     ACHEBE KIDS WORLD — sub-brand hero
     The logo is rainbow by nature; the page furniture stays on the
     sitewide palette so the brand rule holds. Colour comes from the
     artwork, not from new tokens.
     ============================================================ */
  .kidshero{
    background:var(--brand-purple);color:var(--paper);
    padding:clamp(52px,6vw,88px) 0 clamp(56px,6vw,92px);position:relative;overflow:hidden;
  }
  .kidshero::before{
    content:"";position:absolute;top:-28%;right:-8%;width:58%;height:150%;
    background:radial-gradient(circle,rgba(200,148,52,.20),transparent 62%);pointer-events:none;
  }
  .kidshero__inner{position:relative;z-index:2;display:grid;grid-template-columns:1.05fr .95fr;gap:52px;align-items:center}
  .kidshero__art{margin:0}
  .kidshero__art img{width:100%;height:auto;display:block;filter:drop-shadow(0 26px 44px rgba(0,0,0,.34))}
  .kidshero__chip{
    display:inline-block;background:var(--gold);color:var(--ink);
    font-family:var(--body);font-size:11px;font-weight:800;letter-spacing:.16em;
    text-transform:uppercase;padding:8px 15px;margin-bottom:20px;
  }
  .kidshero h1{color:var(--paper);font-size:clamp(38px,5.2vw,66px);line-height:1.04;margin:0 0 18px}
  .kidshero h1 em{font-style:italic;color:var(--gold-light)}
  .kidshero p{color:rgba(255,255,255,.86);font-size:clamp(16px,1.7vw,19px);line-height:1.6;max-width:48ch;margin:0 0 16px}
  .kidshero__motto{
    font-family:var(--body);font-size:13px;font-weight:800;letter-spacing:.22em;
    text-transform:uppercase;color:var(--gold-light);margin:0 0 30px !important;
  }
  .kidshero__motto span{color:rgba(255,255,255,.45);margin:0 4px}
  .kidshero .phero__ctas{margin-top:0}
  .kidshero .btn--ghost{color:var(--paper);border-color:var(--gold)}
  .kidshero .btn--ghost:hover{background:var(--gold);color:var(--ink)}
  @media (max-width:900px){
    .kidshero__inner{grid-template-columns:1fr;gap:30px}
    .kidshero__art{order:-1;max-width:420px}
  }

  /* ============================================================
     HOMEPAGE REBUILD
     Shared 3D card, looping logo marquee, testimonial carousel,
     uniform gallery, and the alternating section grounds.
     ============================================================ */

  /* ---------- the 3D card ----------
     One treatment, reused everywhere cards appear. The depth is a
     stacked shadow rather than one soft blur - the same approach the
     product cards already use, so the two read as one system. */
  .card3d{
    position:relative;background:var(--paper);border:1px solid rgba(72,1,105,.14);
    display:flex;flex-direction:column;
    box-shadow:
      0 1px 1px rgba(28,1,40,.10),
      0 4px 6px rgba(28,1,40,.09),
      0 10px 14px rgba(28,1,40,.08),
      0 20px 28px rgba(28,1,40,.06);
    transform:translateZ(0);
    transition:transform var(--t-med), box-shadow var(--t-med), border-color var(--t-med);
  }
  .card3d:hover{
    transform:translateY(-6px);
    border-color:rgba(72,1,105,.30);
    box-shadow:
      0 2px 2px rgba(28,1,40,.10),
      0 8px 10px rgba(28,1,40,.10),
      0 18px 24px rgba(28,1,40,.09),
      0 34px 46px rgba(28,1,40,.08);
  }
  /* On dark grounds the shadow disappears, so the edge carries the depth. */
  .sec--black .card3d,.sec--purple .card3d,.on-dark .card3d{
    background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.16);
    box-shadow:0 18px 40px rgba(0,0,0,.45);
  }
  .sec--black .card3d:hover,.sec--purple .card3d:hover,.on-dark .card3d:hover{
    background:rgba(255,255,255,.09);border-color:var(--gold);
    box-shadow:0 30px 60px rgba(0,0,0,.55);
  }
  .sec--black .card3d h3,.sec--purple .card3d h3,.on-dark .card3d h3{color:var(--paper)}
  .sec--black .card3d p,.sec--purple .card3d p,.on-dark .card3d p{color:rgba(255,255,255,.76)}

  @media (prefers-reduced-motion:reduce){
    .card3d,.card3d:hover{transition:none;transform:none}
  }

  /* ---------- looping marquee ----------
     The track is rendered twice and translated by exactly -50%, so the
     second copy arrives where the first began and the seam never shows.
     Duration scales with item count via --marquee-time. */
  .marquee{position:relative;overflow:hidden;width:100%;
    -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
            mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);}
  .marquee__track{display:flex;width:max-content;align-items:center;
    animation:marquee var(--marquee-time,42s) linear infinite;}
  .marquee:hover .marquee__track{animation-play-state:paused}
  @keyframes marquee{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}
  @media (prefers-reduced-motion:reduce){
    .marquee__track{animation:none}
    .marquee{overflow-x:auto}
  }

  /* ---------- WHO I AM: image left, copy right ---------- */
  .whoami__grid{display:grid;grid-template-columns:.86fr 1.14fr;gap:0;align-items:stretch}
  .whoami__figure{position:relative;overflow:hidden;min-height:520px;background:var(--purple-ink)}
  .whoami__figure img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 22%}
  /* The section's own vertical padding is dropped so the figure can run edge
     to edge; the copy column carries it instead. */
  .whoami{padding:0}
  .whoami > .container{padding-left:0;padding-right:0;max-width:none}
  .whoami__right{display:flex;flex-direction:column;justify-content:center;
    padding:96px 6vw 96px 68px;max-width:820px}
  .whoami__right h2 .gold{color:var(--gold)}
  .whoami__right .eyebrow{margin-bottom:20px}
  /* The headline sits under the copy, which is the point of this layout. */
  .whoami__right h2{margin:30px 0 26px;font-size:clamp(30px,3.6vw,50px);line-height:1.06}
  .whoami__right p{margin-bottom:16px;max-width:56ch}
  @media (max-width:900px){
    .whoami__grid{grid-template-columns:1fr}
    .whoami__figure{min-height:340px}
    .whoami__right{padding:44px 0}
  }

  /* ---------- ABOUT: one photo, cards beneath it ---------- */
  .about__left{display:flex;flex-direction:column;gap:26px}
  .about__portrait{position:relative;overflow:hidden;background:var(--cream)}
  .about__portrait img{width:100%;aspect-ratio:4/5;object-fit:cover;object-position:50% 18%;display:block}
  .about__cards{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
  .about__cards .card3d{padding:22px 20px;gap:10px}
  .about__cards .ico{
    width:40px;height:40px;display:grid;place-items:center;flex:0 0 auto;
    background:var(--cream);color:var(--brand-purple);border-radius:50%;
  }
  .about__cards h3{font-family:var(--display);font-size:18px;line-height:1.2;margin:0}
  .about__cards p{font-size:13.5px;line-height:1.5;color:var(--muted);margin:0}
  @media (max-width:600px){ .about__cards{grid-template-columns:1fr} }

  /* ---------- VENTURES: equal height, compact, 3D ----------
     Every card is a flex column of the same height. The description takes
     the slack, so the figures and the link sit directly beneath the copy
     instead of being pushed to a fixed position - which is what left the
     shorter cards with a gulf through the middle. */
  .ventures__grid{align-items:stretch}
  .venture{
    display:flex;flex-direction:column;height:100%;background:var(--paper);
    border:1px solid rgba(72,1,105,.14);
    box-shadow:
      0 1px 1px rgba(28,1,40,.10),
      0 4px 6px rgba(28,1,40,.09),
      0 10px 14px rgba(28,1,40,.08),
      0 20px 28px rgba(28,1,40,.06);
    transition:transform var(--t-med), box-shadow var(--t-med), border-color var(--t-med);
  }
  .venture:hover{
    transform:translateY(-6px);border-color:rgba(72,1,105,.30);
    box-shadow:
      0 2px 2px rgba(28,1,40,.10),
      0 8px 10px rgba(28,1,40,.10),
      0 18px 24px rgba(28,1,40,.09),
      0 34px 46px rgba(28,1,40,.08);
  }
  .venture__img{aspect-ratio:16/10;flex:0 0 auto}
  .venture__img img{width:100%;height:100%;object-fit:cover;display:block}
  .venture__num{
    font-family:var(--body);font-size:10px;font-weight:800;letter-spacing:.16em;
    text-transform:uppercase;padding:7px 14px;line-height:1;
  }
  .venture__num small{display:none}
  .venture__body{display:flex;flex-direction:column;flex:1;padding:22px 22px 20px;gap:10px}
  .venture__body h3{margin:0;font-size:20px;line-height:1.2}
  .venture__body > p{flex:1;margin:0;font-size:14px;line-height:1.6}
  /* The original rule carried margin-bottom:24px and a border-bottom, which
     together with the link's own border left a dead band between the figures
     and the call to action. One rule between them is enough. */
  .venture__meta{margin:2px 0 0;padding:14px 0 0;border-top:1px solid var(--rule);border-bottom:0}
  .venture__body .link-arrow{margin-top:12px;align-self:flex-start}

  /* A wordmark is not a photograph: cropping one to the card's frame cuts
     through the lettering. These show whole, on the dark ground they were
     drawn against. */
  .venture__img--mark{background:var(--purple-ink)}
  .venture__img--mark img{object-fit:contain;padding:14px}
  @media (prefers-reduced-motion:reduce){ .venture,.venture:hover{transition:none;transform:none} }

  /* ---------- PROCESS: six cards ---------- */
  .process__grid{grid-template-columns:repeat(3,1fr);gap:22px}
  .process .card3d{padding:30px 24px 26px;text-align:center;align-items:center;gap:12px}
  .process .step__n{
    width:52px;height:52px;display:grid;place-items:center;border-radius:50%;
    background:var(--brand-purple);color:var(--paper);
    font-family:var(--display);font-size:21px;font-weight:600;
  }
  .process .card3d h3{font-family:var(--body);font-size:17px;font-weight:800;margin:0}
  .process .card3d p{font-size:13.5px;line-height:1.55;margin:0}
  @media (max-width:980px){ .process__grid{grid-template-columns:repeat(2,1fr)} }
  @media (max-width:560px){ .process__grid{grid-template-columns:1fr} }

  /* ---------- GALLERY: one shape throughout ----------
     The mosaic spans are dropped deliberately. Every tile is the same
     3:2 frame, so the wall reads as a set rather than a jumble. */
  .gal__grid{grid-template-columns:repeat(4,1fr);grid-auto-rows:auto;gap:14px;grid-auto-flow:row}
  .gal__item,.gal__item--w2,.gal__item--h2{grid-column:auto;grid-row:auto;aspect-ratio:3/2;height:auto}
  .gal__item img,.gal__item video{width:100%;height:100%;object-fit:cover}
  @media (max-width:900px){
    .gal__grid{grid-template-columns:repeat(2,1fr);grid-auto-rows:auto;gap:10px}
    .gal__item,.gal__item--w2,.gal__item--h2{grid-column:auto;grid-row:auto}
  }

  /* ---------- TESTIMONIAL CAROUSEL ---------- */
  .tcar{position:relative}
  .tcar__viewport{overflow:hidden}
  .tcar__track{display:flex;gap:24px;transition:transform 600ms cubic-bezier(.2,.7,.3,1);will-change:transform}
  .tcar__item{flex:0 0 calc((100% - 48px)/3);min-width:0}
  .tcar .card3d{padding:28px 26px;height:100%;gap:14px}
  .tcar__quote{font-family:var(--display);font-size:17px;line-height:1.5;margin:0;flex:1}
  .tcar__who{display:flex;align-items:center;gap:12px;padding-top:16px;border-top:1px solid var(--rule)}
  .tcar__who img{width:44px;height:44px;border-radius:50%;object-fit:cover;flex:0 0 auto}
  .tcar__name{font-weight:800;font-size:14px;margin:0}
  .tcar__role{font-size:12px;color:var(--muted);margin:0}
  .tcar__nav{display:flex;gap:10px;justify-content:center;margin-top:32px}
  .tcar__btn{
    width:46px;height:46px;display:grid;place-items:center;cursor:pointer;
    background:transparent;border:1px solid var(--rule);color:inherit;
    transition:all var(--t-fast);
  }
  .tcar__btn:hover{background:var(--brand-purple);border-color:var(--brand-purple);color:var(--paper)}
  .sec--black .tcar__btn,.sec--purple .tcar__btn{border-color:rgba(255,255,255,.28);color:var(--paper)}
  .sec--black .tcar__btn:hover,.sec--purple .tcar__btn:hover{background:var(--gold);border-color:var(--gold);color:var(--ink)}
  .sec--black .tcar__who,.sec--purple .tcar__who{border-top-color:rgba(255,255,255,.18)}
  .sec--black .tcar__role,.sec--purple .tcar__role{color:rgba(255,255,255,.66)}
  @media (max-width:980px){ .tcar__item{flex:0 0 calc((100% - 24px)/2)} }
  @media (max-width:640px){ .tcar__item{flex:0 0 100%} }

  /* ---------- the Skool testimonial wall ---------- */
  .skool{display:grid;grid-template-columns:repeat(2,1fr);gap:26px;max-width:900px;margin:0 auto}
  .skool figure{margin:0;background:var(--paper);border:1px solid var(--rule);padding:12px;
    box-shadow:0 10px 14px rgba(28,1,40,.08),0 20px 28px rgba(28,1,40,.06)}
  .skool img{width:100%;height:auto;display:block}
  .skool figcaption{font-size:12px;color:var(--muted);text-align:center;padding-top:10px}
  @media (max-width:700px){ .skool{grid-template-columns:1fr} }


  /* The journal card is a flex column already; the 3D class supplies the
     depth and the lift, so only the internals need adjusting. */
  .post.card3d{overflow:hidden}
  .post.card3d .post__body{display:flex;flex-direction:column;flex:1;gap:8px}
  .post.card3d .post__read{margin-top:auto;align-self:flex-start}
  .blog__grid{align-items:stretch}
  .blog__grid > *{height:100%}

  /* ============================================================
     SECTION RHYTHM
     White, black, cream, purple - alternating down the page so no
     two neighbours share a ground. Every dark section restates its
     text colours rather than inheriting: purple-on-black is the
     unreadable combination this palette can produce, so accents
     flip to gold wherever the ground is dark.
     ============================================================ */

  /* --- shared treatment for any dark section --- */
  .sec-dark{color:var(--paper)}
  .sec-dark h1,.sec-dark h2,.sec-dark h3,.sec-dark h4{color:var(--paper)}
  .sec-dark p,.sec-dark li{color:rgba(255,255,255,.78)}
  .sec-dark .lede{color:rgba(255,255,255,.9)}
  .sec-dark .eyebrow{color:var(--gold)}
  .sec-dark .eyebrow.with-line::before{background:var(--gold)}
  .sec-dark .it,.sec-dark .gold,.sec-dark .mark{color:var(--gold-light)}
  .sec-dark .link-arrow{color:var(--paper);border-bottom-color:var(--gold)}
  .sec-dark .link-arrow:hover{color:var(--gold)}
  .sec-dark .btn--ghost{color:var(--paper);border-color:rgba(255,255,255,.42)}
  .sec-dark .btn--ghost:hover{background:var(--gold);border-color:var(--gold);color:var(--ink)}
  .sec-dark .stars{color:var(--gold)}

  /* --- the rhythm, in page order --- */

  /* Who I Am - white; the full-height portrait supplies the contrast. */
  .whoami{background:var(--paper)}

  /* The ecosystem strip - cream, kept exactly as the proof of concept had it.
     A background is declared for it again further down; that later rule is the
     one that actually applies. Left alone deliberately: the strip is specified
     to match preview, so the alternation is resolved on either side of it
     rather than by changing it. */

  /* About - white, so it does not sit against the cream strip above it. */
  .about{background:var(--paper)}

  /* Ventures - cream. It was white, but About is white now and the two are
     neighbours; cream is light enough that the stacked shadows still read. */
  .ventures{background:var(--cream)}

  /* How I build - deep purple. The statement beat of the page. */
  .process{background:var(--purple-deep);border-top:0;border-bottom:0}
  .process::before{opacity:.12}
  .process .card3d{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.16)}
  .process .card3d:hover{background:rgba(255,255,255,.10);border-color:var(--gold)}
  .process .card3d h3{color:var(--paper)}
  .process .card3d p{color:rgba(255,255,255,.76)}
  .process .step__n{background:var(--gold);color:var(--ink)}

  /* Properties - white. */
  .properties{background:var(--paper)}

  /* The gallery already runs dark; keep it and make it explicit. */
  .gal{background:var(--ink)}

  /* Testimonials - near black, so the ecosystem quotes land hard. */
  .testi{background:var(--purple-ink)}
  .testi .card3d{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.16)}
  .testi .card3d:hover{background:rgba(255,255,255,.10);border-color:var(--gold)}
  .testi__head h2{color:var(--paper)}
  .testi__head p{color:rgba(255,255,255,.78)}

  /* Speaking - cream. */
  .speaking{background:var(--cream)}

  /* The Letter - near black, so the one form on the page is unmissable. */
  .magnet{background:var(--ink)}

  /* Journal - white, so the article cards carry their depth. */
  .blog{background:var(--paper)}

  /* The per-section heading accents (.testi__head h2 .it and friends) are
     three classes deep and set brand purple. On a dark ground that is the
     unreadable combination this palette can produce, so they need selectors
     that actually out-rank them rather than a bare .sec-dark .it. */
  .sec-dark .testi__head h2 .it,
  .sec-dark .process__head h2 .it,
  .sec-dark .gal__head h2 .it,
  .sec-dark .magnet__copy h2 .it,
  .sec-dark .ventures__head h2 .it,
  .sec-dark .properties__head h2 .it,
  .sec-dark h1 .it,
  .sec-dark h2 .it,
  .sec-dark h1 .gold,
  .sec-dark h2 .gold{color:var(--gold-light)}

  /* The tile backing shows through while a video's poster decodes. Cream on a
     near-black section reads as a hole in the wall; this is the ground the
     section is actually on. */
  .gal__item{background:#1a1a1a}
  .gal__item video{background:#1a1a1a}

  /* ---------- the booking page on large screens ----------
     The slot picker is the whole point of the page and it was a column of
     71x40 chips inside a 554px track on a 1600px screen. The form column
     widens and the chips grow into proper targets. */
  @media (min-width:1200px){
    .book .split{grid-template-columns:1fr 1.05fr;gap:64px;align-items:start}
    #bookform .chips{gap:12px}
    #bookform .chip{font-size:15px;padding:15px 22px;letter-spacing:.06em;min-width:92px;text-align:center}
    #bookform select,#bookform input[type=text],#bookform input[type=email],#bookform textarea{
      font-size:16px;padding:15px 16px;
    }
    #bookform .fld > label,#bookform label{font-size:12px;letter-spacing:.16em}
    #bookform .btn{font-size:14px;padding:18px 30px}
  }
  @media (min-width:1500px){
    #bookform .chip{font-size:16px;padding:17px 26px;min-width:104px}
  }

  .skool figure{max-height:620px;overflow-y:auto;scrollbar-width:thin}
  .skool figure::-webkit-scrollbar{width:8px}
  .skool figure::-webkit-scrollbar-thumb{background:var(--brand-purple)}
  .sec-dark .skool figure{background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.16)}
  .sec-dark .skool figcaption{color:rgba(255,255,255,.66)}

  /* ---------- the logo strip ----------
     Preview's frame kept exactly: the label sits left behind a vertical rule,
     the list runs to its right. The list scrolls now, and every mark is the
     same muted tone so the row reads as one set rather than a row of competing
     colours - which is how emmagrede.com handles the same problem. */
  .logos{padding:44px 0;background:var(--cream);
    border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
  .logos__inner{display:grid;grid-template-columns:auto 1fr;gap:44px;align-items:center}
  .logos__lbl{
    font-family:var(--display);font-size:18px;color:var(--ink-2);line-height:1.3;
    padding-right:32px;border-right:1.5px solid var(--brand-purple);max-width:200px;
    margin:0;text-align:left;text-transform:none;letter-spacing:normal;font-weight:400;
  }
  .logos__lbl strong{font-style:normal;font-weight:600;color:var(--brand-purple)}

  .logomark{
    flex:0 0 auto;display:flex;align-items:center;justify-content:center;
    height:74px;padding:0 44px;white-space:nowrap;
    font-family:var(--display);font-size:34px;font-weight:500;letter-spacing:.01em;
    color:var(--ink-2);opacity:.62;
    transition:opacity var(--t-fast),color var(--t-fast);
  }
  .logomark--word{
    font-family:var(--body);font-size:22px;font-weight:800;
    letter-spacing:.18em;text-transform:uppercase;
  }
  .logomark:hover{opacity:1;color:var(--brand-purple)}

  @media (max-width:720px){
    .logos__inner{grid-template-columns:1fr;gap:22px}
    .logos__lbl{border-right:0;border-bottom:1.5px solid var(--brand-purple);
      padding:0 0 14px;max-width:none;text-align:center}
    .logomark{height:58px;padding:0 26px;font-size:24px}
    .logomark--word{font-size:16px}
  }

  /* ============================================================
     NO SECTION PADDING
     The alternating grounds do the separating now - where the colour
     changes, the section has changed, and a band of empty space on
     top of that is just scrolling. Sections carry none; the content
     inside keeps enough to stay off the edges.
     ============================================================ */

  .about,.ventures,.process,.properties,.testi,.speaking,.magnet,.blog,
  .gal,.sec,.logos,.counter{padding-top:0;padding-bottom:0}

  /*
  | Padding depends on what the section holds.
  |
  | "No padding at all" was about the sections where a picture runs from the top
  | edge to the bottom one - Who I Am, About, the gallery, the Starter Letter.
  | A band of empty ground above and below an image is exactly the fault that
  | was being reported.
  |
  | Applying it to the text sections as well was me following the words instead
  | of the point, and it left headings and copy touching the colour change with
  | nowhere to breathe.
  */

  /* Image runs edge to edge. Nothing above it, nothing below it. */
  .about > .container,.magnet > .container,.gal > .container{padding-top:0;padding-bottom:0}

  /* Text and cards. Enough to sit in, far less than the 120px this started at. */
  .ventures > .container,.process > .container,.properties > .container,
  .testi > .container,.speaking > .container,.blog > .container,
  .sec > .container{padding-top:56px;padding-bottom:56px}

  .logos > .container,.counter > .container{padding-top:26px;padding-bottom:26px}

  /* Section headings sat 40px above their content; 24 is enough. */
  .ventures__head,.process__head,.testi__head,.gal__head,
  .about__grid,.blog__head,.properties__head{margin-bottom:26px}
  .sec__head{margin-bottom:24px}

  .cta-strip{padding-top:56px;padding-bottom:56px}

  @media (max-width:900px){
    .ventures > .container,.process > .container,.properties > .container,
    .testi > .container,.speaking > .container,.blog > .container,
    .sec > .container{padding-top:40px;padding-bottom:40px}
    .ventures__head,.process__head,.testi__head,.gal__head,
    .sec__head{margin-bottom:20px}
  }

  /* ---------- About: portrait left at full height, cards right ---------- */
  .about__grid{grid-template-columns:.92fr 1.08fr;gap:0;align-items:stretch}
  .about__left{display:block;position:relative}
  .about__portrait{position:absolute;inset:0;overflow:hidden;background:var(--cream)}
  .about__portrait img{width:100%;height:100%;aspect-ratio:auto;object-fit:cover;object-position:50% 18%}
  .about__copy{padding:44px 0 44px 56px}
  .about__cards{grid-template-columns:repeat(2,1fr);gap:14px;margin-top:26px}
  @media (max-width:900px){
    .about__grid{grid-template-columns:1fr}
    .about__left{min-height:380px}
    .about__copy{padding:30px 0}
  }

  /* ---------- Gallery: fewer per row, so each is bigger ---------- */
  .gal__grid{grid-template-columns:repeat(3,1fr);gap:12px}
  @media (max-width:900px){ .gal__grid{grid-template-columns:repeat(2,1fr);gap:10px} }

  /* ---------- Venture cards: every logo fitted whole ----------
     Marlex and Campus are photographs and stay as they are. */
  .venture__img--mark{background:var(--purple-ink);aspect-ratio:16/10}
  .venture__img--mark img{object-fit:contain;padding:18px;width:100%;height:100%}

  /* ---------- hero: the brand wall slide ---------- */
  .hcar__copy--wide{max-width:none}
  .hcar__slide--brands .hcar__copy{margin-bottom:22px}
  .hcar__slide--brands h1{font-size:clamp(30px,4vw,52px);margin-bottom:8px}
  .hcar__slide--brands p{max-width:62ch}
  .brandwall{
    display:grid;grid-template-columns:repeat(5,1fr);gap:12px;margin-bottom:24px;
  }
  .brandwall__tile{
    /* 4:3 rather than square - most of these marks are wide, and a square
       tile left them floating in bands of empty space. */
    margin:0;position:relative;aspect-ratio:4/3;overflow:hidden;
    background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.18);
  }
  .brandwall__tile img{
    width:100%;height:100%;object-fit:contain;padding:8px 10px 20px;display:block;
    transition:transform var(--t-med);
  }
  .brandwall__tile:hover{border-color:var(--gold)}
  .brandwall__tile figcaption{
    position:absolute;left:0;right:0;bottom:0;padding:7px 8px;
    background:linear-gradient(180deg,rgba(28,1,40,0),rgba(28,1,40,.92));
    font-size:9.5px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;
    color:var(--paper);text-align:center;line-height:1.25;
  }
  @media (max-width:980px){ .brandwall{grid-template-columns:repeat(4,1fr)} }
  @media (max-width:640px){
    .brandwall{grid-template-columns:repeat(3,1fr);gap:8px}
    .brandwall__tile figcaption{font-size:8px;padding:5px 4px}
  }

  /* ---------- slideshow inside a venture card ---------- */
  .vcar{position:relative;aspect-ratio:16/10;overflow:hidden;background:var(--purple-ink)}
  .vcar__slide{
    position:absolute;inset:0;margin:0;opacity:0;transition:opacity 620ms ease;
    display:flex;align-items:center;justify-content:center;
  }
  .vcar__slide.is-on{opacity:1}
  .vcar__slide img{width:100%;height:100%;object-fit:cover;display:block}
  /* A wordmark shows whole; a tall screenshot shows its top rather than its middle. */
  .vcar__slide--mark img{object-fit:contain;padding:10px}
  .vcar__slide--tall img{object-fit:cover;object-position:50% 0}
  .vcar__dots{
    position:absolute;left:0;right:0;bottom:10px;z-index:3;
    display:flex;gap:6px;justify-content:center;
  }
  .vcar__dot{
    width:22px;height:3px;border:0;padding:0;cursor:pointer;
    background:rgba(255,255,255,.42);transition:background var(--t-fast);
  }
  .vcar__dot.is-on{background:var(--gold)}
  .vcar .venture__num{position:absolute;top:12px;left:12px;z-index:3}

  /* ---------- Starter Letter: pick your sneak peek ---------- */
  .magnet__grid{display:grid;grid-template-columns:1.15fr .85fr;gap:0;align-items:stretch}
  .magnet__copy{padding:44px 48px 44px 0;display:flex;flex-direction:column;justify-content:center}
  .magnet__art{position:relative;overflow:hidden;background:var(--purple-ink);min-height:420px}
  .magnet__art img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 18%}
  .magnet__sticker{
    position:absolute;top:18px;right:18px;z-index:3;
    display:flex;flex-direction:column;align-items:center;justify-content:center;
    width:82px;height:82px;border-radius:50%;background:var(--gold);color:var(--ink);
    font-size:10px;font-weight:800;letter-spacing:.10em;text-transform:uppercase;line-height:1.25;
  }
  .magnet__sticker strong{font-size:15px;display:block}

  .peek{display:grid;gap:10px;margin:22px 0 24px}
  .peek__opt{
    text-align:left;cursor:pointer;padding:14px 16px;
    background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.18);
    color:var(--paper);transition:all var(--t-fast);
  }
  .peek__opt strong{display:block;font-size:14.5px;margin-bottom:3px;color:var(--paper)}
  .peek__opt span{display:block;font-size:12.5px;line-height:1.5;color:rgba(255,255,255,.68)}
  .peek__opt:hover{border-color:rgba(255,255,255,.42)}
  .peek__opt.is-on{border-color:var(--gold);background:rgba(200,148,52,.14)}
  .peek__opt.is-on strong{color:var(--gold-light)}

  /* A square field, matching the buttons - it was rendering as a white pill. */
  .magnet__form{display:flex;gap:10px;flex-wrap:wrap}
  /* The white pill is the FORM's background, not the input's - the input is
     transparent and was showing it through. Both are reset here. */
  .magnet .magnet__form{
    flex-direction:row;border:0;border-radius:0;background:transparent;
    overflow:visible;max-width:none;align-items:stretch;
  }
  .magnet .magnet__form input[type=email]{
    flex:1;min-width:220px;border-radius:0;padding:15px 16px;font-size:15px;width:auto;
    background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.28);color:var(--paper);
  }
  /* The section is background:var(--ink) and so was this button - the same
     colour as the thing it sits on, so the primary call to action of the
     block rendered as floating text with no button around it at all, at
     every width and not only on a phone. Gold on ink is the brand's
     dark-ground pairing and clears AA at about 6.3:1 either way.

     Height was never the problem here. The button measured correctly and
     carried a valid colour on both properties; nothing about it read as
     wrong until it was on screen next to its own background. */
  .magnet .magnet__form button{
    width:auto;border-radius:0;
    background:var(--gold);color:var(--ink);
  }
  .magnet .magnet__form button:hover,
  .magnet .magnet__form button:focus-visible{background:var(--gold-light);color:var(--ink)}
  .magnet__form .btn{border-radius:0;flex:0 0 auto}
  .magnet__note{margin-top:12px;font-size:12.5px;color:rgba(255,255,255,.62)}

  @media (max-width:900px){
    .magnet__grid{grid-template-columns:1fr}
    .magnet__copy{padding:32px 0}
    .magnet__art{min-height:300px;order:-1}
  }

  /* .sec-dark was added for the background rhythm after the card rules were
     written, so cards inside one kept their white ground while .sec-dark
     turned their text white - white on white. */
  .sec-dark .card3d{
    background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.16);
    box-shadow:0 18px 40px rgba(0,0,0,.45);
  }
  .sec-dark .card3d:hover{
    background:rgba(255,255,255,.10);border-color:var(--gold);
    box-shadow:0 30px 60px rgba(0,0,0,.55);
  }
  .sec-dark .card3d h3{color:var(--paper)}
  .sec-dark .card3d p{color:rgba(255,255,255,.78)}
  .sec-dark .card3d .step__n{background:var(--gold);color:var(--ink)}
  .sec-dark a.card3d{color:var(--paper)}
  .sec-dark a.card3d:hover h3{color:var(--gold-light)}

  /* The step badge and card heading were sized only inside .process, so reusing
     .card3d elsewhere gave a full-width gold bar and a display-size heading. */
  .step__n{
    width:46px;height:46px;flex:0 0 auto;display:grid;place-items:center;border-radius:50%;
    background:var(--brand-purple);color:var(--paper);
    font-family:var(--display);font-size:19px;font-weight:600;line-height:1;
  }
  .card3d h3{font-family:var(--body);font-size:17px;font-weight:800;line-height:1.3;margin:0}
  .card3d p{font-size:13.5px;line-height:1.55;margin:0}
  .card3d{padding:24px 22px;gap:11px}
  .sec-dark .card3d .step__n{background:var(--gold);color:var(--ink)}

  /* ---------- The guide, handed over in the browser ---------- */
  .magnet__ready{display:flex;flex-direction:column;align-items:flex-start;gap:12px;margin-top:14px}
  .magnet__ready .btn{margin:0}
  .magnet__hint{font-size:13px;color:rgba(255,255,255,.6)}

  /* A logo contained in a landscape card can only ever fill part of it - a
     square mark reaches 62%, a wide one 53%. The empty space is what read as
     "tiny", so the slide carries a ground of its own and the mark is presented
     on it deliberately rather than floating in a gap. */
  .vcar__slide--mark{background:var(--cream)}
  .sec-dark .vcar__slide--mark{background:rgba(255,255,255,.06)}

  /* ---------- Items 2 and 3: no dead ground beside or under a picture ----------
     Who I Am and About both put a full-height portrait against a column of copy.
     Centring the copy left a pool of empty space under it on one side and under
     the picture on the other, depending on which ran longer. Both grids stretch
     now, and the copy centres inside its own column rather than the grid row -
     so whichever side is shorter is padded internally and the section still ends
     level on both sides. */
  .whoami__grid,.about__grid{align-items:stretch}
  .whoami__right,.about__copy{display:flex;flex-direction:column;justify-content:center}
  .whoami__figure,.about__portrait{height:100%;margin:0}
  .whoami__figure img,.about__portrait img{width:100%;height:100%;object-fit:cover;display:block}

  /* ---------- Spotlight card carousels ----------
     The carousels and the video live here rather than in the ventures grid,
     because these cards are several times the size and a screenshot or a room
     is legible at this scale. The ventures grid carries logos and nothing else. */
  .acar{position:absolute;inset:0;overflow:hidden}
  .acar__slide{position:absolute;inset:0;margin:0;opacity:0;transition:opacity 700ms ease}
  .acar__slide.is-on{opacity:1}
  .acar__slide img,.acar__slide video{width:100%;height:100%;object-fit:cover;display:block}
  .acar__dots{position:absolute;left:0;right:0;bottom:14px;z-index:3;
    display:flex;gap:7px;justify-content:center}
  .acar__dot{width:24px;height:3px;border:0;padding:0;cursor:pointer;
    background:rgba(255,255,255,.42);transition:background var(--t-fast)}
  .acar__dot.is-on{background:var(--gold)}
  .apt:hover .acar__slide.is-on img{transform:none}

  /* ---------- Full-bleed, the way Who I Am does it ----------
     Who I Am works because its container drops the gutters and the max-width,
     so the portrait reaches the edge of the screen. About and the Starter
     Letter were left inside the container, which is where the band of ground
     beside and beneath their pictures came from.
     The copy column takes the padding instead, so the words still sit in from
     the edge while the picture does not. */
  .about > .container,
  .magnet > .container,
  .gal > .container{padding-left:0;padding-right:0;max-width:none}

  .about__copy,.about__left{padding:clamp(28px,4vw,64px)}
  .about__left{padding-left:0;padding-top:0;padding-bottom:0}
  .magnet__copy{padding:clamp(28px,4vw,64px)}
  .magnet__grid,.about__grid{gap:0}

  /* The gallery heading still needs the gutter; only the tiles run edge to edge. */
  .gal__head{padding-left:clamp(20px,4vw,64px);padding-right:clamp(20px,4vw,64px)}

  .about__portrait,.magnet__art{height:100%;margin:0}
  .about__portrait img,.magnet__art img{width:100%;height:100%;object-fit:cover;display:block}

  @media (max-width:900px){
    .about__copy,.magnet__copy{padding:32px 20px}
    .about__left{padding:0}
  }

  /* ---------- The brands slide, to the supplied banner ----------
     Black and gold, because that is what the reference does and what the marks
     themselves are: a row of gold-on-black logos on a purple ground reads as
     nine stickers. */
  .hcar__slide--brands{background:#0d0d0d}
  .bwall{position:absolute;inset:0;display:flex;align-items:center;
    background:radial-gradient(120% 90% at 50% 0%,#1c0128 0%,#0d0d0d 62%)}
  .bwall > .container{width:100%;padding-top:18px;padding-bottom:44px}

  .bwall__marks{display:grid;grid-template-columns:repeat(9,1fr);gap:10px;margin-bottom:16px}
  .bwall__tile{margin:0;text-align:center}
  .bwall__tile img{width:100%;height:62px;object-fit:contain;
    background:rgba(255,255,255,.03);border:1px solid rgba(200,148,52,.28);
    border-radius:9px;padding:7px;display:block}
  .bwall__tile figcaption{margin-top:5px;font-size:9.5px;font-weight:700;letter-spacing:.12em;
    text-transform:uppercase;color:rgba(255,255,255,.55)}

  .bwall__mid{display:grid;grid-template-columns:1.4fr .6fr;gap:32px;align-items:center}
  .bwall__eyebrow{font-size:11px;font-weight:800;letter-spacing:.24em;text-transform:uppercase;color:var(--gold)}
  .bwall__name h1{font-family:var(--display);font-size:clamp(36px,4.6vw,66px);line-height:1;
    margin:8px 0 10px;color:#fff;font-weight:400}
  .bwall__name h1 em{font-style:normal;color:var(--gold)}
  .bwall__roles{font-size:13px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
    color:rgba(255,255,255,.72);margin-bottom:10px}
  .bwall__tag{font-family:var(--display);font-size:clamp(17px,1.7vw,23px);color:#fff;margin-bottom:14px}
  .bwall__tag span{color:var(--gold)}

  .bwall__portrait{margin:0;border-radius:14px;overflow:hidden;aspect-ratio:4/5;
    max-height:360px;margin-left:auto;border:1px solid rgba(200,148,52,.3)}
  .bwall__portrait img{width:100%;height:100%;object-fit:cover;display:block}

  /* The carousel prints its dots across the foot of the slide, so the figures
     stop short of it rather than sharing the same band. */
  .bwall__stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(110px,1fr));gap:8px;
    margin-top:16px;padding-top:14px;border-top:1px solid rgba(200,148,52,.28)}
  .bwall__stat b{display:block;font-family:var(--display);font-size:clamp(19px,2vw,26px);color:var(--gold);line-height:1.1}
  .bwall__stat span{display:block;font-size:10.5px;font-weight:700;letter-spacing:.12em;
    text-transform:uppercase;color:rgba(255,255,255,.55);margin-top:3px}

  @media (max-width:900px){
    .bwall{position:relative;padding:28px 0}
    .bwall__marks{grid-template-columns:repeat(5,1fr)}
    .bwall__mid{grid-template-columns:1fr}
    .bwall__portrait{display:none}
  }

  /* ---------- Calendar legibility ----------
     The out-of-month and past days were set at 14% and 30% alpha, which
     composites to roughly 1.3:1 and 2.3:1 on white - the "white on white" that
     was reported. A colour at low alpha has to be composited over its ground
     before its contrast means anything; reading the declared value alone says
     dark purple on white and reports a pass. */
  .calendar-card .day.prev-month,
  .calendar-card .day.next-month{color:rgba(17,17,17,.6);font-weight:400}
  .calendar-card .day.is-past{color:rgba(17,17,17,.6)}
  .calendar-card .day{color:var(--ink)}
  .calendar-card .day.is-open,.calendar-card .day.booked{color:var(--brand-purple);font-weight:700}

  /* ---------- Spotlight reels ----------
     A strip of photographs playing like film. No controls, because there is
     nothing for a reader to drive. */
  .reel{position:absolute;inset:0;overflow:hidden;background:#0d0d0d}
  .reel__frame{position:absolute;inset:0;margin:0;opacity:0;transition:opacity 900ms ease}
  .reel__frame.is-on{opacity:1}
  /* Cropped from the top, not the middle: the subject of an interior or a
     portrait sits high, and centring the crop is what took the tops off. */
  /* Fashion shots are full-figure and the face sits near the top; 22% was
     still low enough to take heads off in a square card. */
  .reel__frame img{width:100%;height:100%;object-fit:cover;object-position:50% 12%;display:block}
  /* The card's hover zoom fights a crossfade. */
  .apt:hover .reel__frame img{transform:none}

  /* ---------- Text still needs its gutter ----------
     The gallery runs its tiles edge to edge, but its heading is text and was
     left touching the top of the section. Only the tiles are full-bleed. */
  .gal__head{padding-top:56px;padding-bottom:8px}
  .gal__grid{padding-bottom:56px}

  /* ---------- No padding where a picture runs the height ----------
     Speaking puts a photograph against the copy, so the section's own padding
     was showing above and below the picture. The copy column carries it
     instead, which is the same rule as About and the Starter Letter. */
  .speaking > .container{padding-top:0;padding-bottom:0;padding-left:0;padding-right:0;max-width:none}
  .speaking__grid{gap:0}
  .speaking__intro{padding:clamp(28px,4vw,64px)}
  .speaking__photo-card{border-radius:0;border:0;box-shadow:none;height:100%}
  .speaking__photo-card img{object-position:50% 18%}

  @media (max-width:900px){
    .speaking__intro{padding:32px 20px}
    .gal__head{padding-top:36px}
  }

  /* ---------- Venture page copy ---------- */
  .brandcopy{display:grid;grid-template-columns:1.55fr .45fr;gap:56px;align-items:start}
  .brandcopy__main{max-width:68ch}
  .brandcopy__main > p{font-size:16.5px;line-height:1.75;color:var(--muted);margin-bottom:18px}
  .brandcopy__main > p:first-child{font-size:19px;line-height:1.65;color:var(--ink)}
  .brandcopy__main h3{font-family:var(--body);font-size:17px;font-weight:800;
    letter-spacing:.01em;color:var(--ink);margin:30px 0 10px}
  .brandcopy__side{position:sticky;top:96px}
  .brandcopy__list{list-style:none;margin:16px 0 0;padding:0;
    border-top:1px solid rgba(17,17,17,.12)}
  .brandcopy__list li{padding:15px 0;border-bottom:1px solid rgba(17,17,17,.12)}
  .brandcopy__list strong{display:block;font-size:14px;margin-bottom:3px;color:var(--ink)}
  .brandcopy__list span{display:block;font-size:13.5px;line-height:1.6;color:var(--muted)}

  /* On dark grounds the neutrals flip, or the copy disappears into the ground. */
  .sec-dark .brandcopy__main > p,.sec-dark .brandcopy__list span{color:rgba(255,255,255,.74)}
  .sec-dark .brandcopy__main > p:first-child,.sec-dark .brandcopy__main h3,
  .sec-dark .brandcopy__list strong{color:#fff}
  .sec-dark .brandcopy__list,.sec-dark .brandcopy__list li{border-color:rgba(255,255,255,.16)}

  @media (max-width:900px){
    .brandcopy{grid-template-columns:1fr;gap:32px}
    .brandcopy__side{position:static}
  }

  /* ---------- A venture's photographs ----------
     Edge to edge, like the homepage gallery: the pictures are the point and a
     gutter round them only makes them smaller. The heading keeps its gutter,
     because a heading is text. */
  .bgal{padding:0}
  .bgal > .container{display:none}
  .bgal__head{padding:56px clamp(20px,4vw,64px) 22px;max-width:760px}
  .bgal__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:2px}
  .bgal__item{margin:0;overflow:hidden;aspect-ratio:4/5;background:var(--cream)}
  .bgal__item img{width:100%;height:100%;object-fit:cover;object-position:50% 22%;display:block;
    transition:transform 900ms ease}
  /* A product mockup is artwork on a transparent ground, not a photograph.
     Cover-cropping one cuts the device in half and leaves it floating; these
     are shown whole on a tint instead. */
  .bgal__item--fit{background:var(--cream)}
  .bgal__item--fit img{object-fit:contain;object-position:50% 50%;padding:22px}
  .bgal__item--fit:hover img{transform:none}
  .bgal__item:hover img{transform:scale(1.03)}

  @media (max-width:900px){
    .bgal__grid{grid-template-columns:repeat(2,1fr)}
    .bgal__head{padding:36px 20px 18px}
  }

  /* ---------- Ventures index ---------- */
  .sec--tint{background:var(--cream)}
  .vcard__points{list-style:none;margin:12px 0 16px;padding:0;
    border-top:1px solid rgba(17,17,17,.1)}
  .vcard__points li{padding:8px 0 8px 20px;position:relative;font-size:13.5px;
    line-height:1.5;color:var(--muted);border-bottom:1px solid rgba(17,17,17,.08)}
  .vcard__points li::before{content:'';position:absolute;left:0;top:15px;
    width:8px;height:1.5px;background:var(--gold)}
  .vcard__body h3{font-size:20px;margin:0 0 8px}
  .sec--tint .vcard{background:var(--paper)}

  /* A carousel panel is not the page's heading. Only the first slide carries
     the h1; the rest are paragraphs given a heading role at level two, so they
     still read as headings to a screen reader without claiming to be the
     title of the page. They inherit the h1's type so nothing changes on screen. */
  .hcar__h{font-family:var(--display);font-size:clamp(34px,5vw,64px);line-height:1.04;
    letter-spacing:-.02em;color:#fff;font-weight:400;margin:0 0 14px}
  .hcar__h em{font-style:normal;color:var(--gold)}

  /* ---------- Questions, answered on the page ---------- */
  .faqs{max-width:820px;margin:0 auto}
  .faq{border-bottom:1px solid rgba(255,255,255,.16)}
  .faq summary{cursor:pointer;list-style:none;padding:18px 0;font-size:16.5px;font-weight:600;
    color:#fff;display:flex;justify-content:space-between;align-items:center;gap:20px}
  .faq summary::-webkit-details-marker{display:none}
  .faq summary::after{content:'+';font-size:22px;font-weight:400;color:var(--gold);
    transition:transform var(--t-fast);line-height:1}
  .faq[open] summary::after{content:'–'}
  .faq__a{padding:0 0 18px;max-width:68ch}
  .faq__a p{font-size:15.5px;line-height:1.7;color:rgba(255,255,255,.76);margin:0 0 10px}

  /* ---------- Legal pages ----------
     They had real content and no structure: one section, a "back to shop" link
     and twelve headings with no way to reach any of them. */
  .phero--slim{min-height:280px;background:var(--purple-ink)}
  .phero--slim .phero__inner{padding-top:64px;padding-bottom:44px}
  .phero--slim h1{font-size:clamp(32px,4vw,52px)}

  .legal__grid{display:grid;grid-template-columns:230px 1fr;gap:56px;align-items:start}
  .legal__toc{position:sticky;top:96px}
  .legal__toc ol{list-style:none;margin:14px 0 0;padding:0;counter-reset:toc}
  .legal__toc li{counter-increment:toc}
  .legal__toc a{display:block;padding:7px 0 7px 26px;position:relative;font-size:13.5px;
    line-height:1.45;color:var(--muted);text-decoration:none;border-left:2px solid rgba(17,17,17,.1)}
  .legal__toc a::before{content:counter(toc);position:absolute;left:10px;font-size:11px;
    font-weight:700;color:rgba(17,17,17,.35)}
  .legal__toc a:hover{color:var(--ink)}
  .legal__toc a.is-on{color:var(--brand-purple);border-left-color:var(--gold);font-weight:600}
  .legal__toc a.is-on::before{color:var(--gold)}

  .page h2{scroll-margin-top:96px}

  @media (max-width:900px){
    .legal__grid{grid-template-columns:1fr;gap:26px}
    .legal__toc{position:static}
  }

  /* ---------- Margins must not escape a section ----------
     .about__grid carries margin-bottom:26px. Once the container's padding went
     to zero there was nothing to contain it, so the margin collapsed straight
     out of the section and pushed the next one down - which reads as a band of
     empty ground under a full-height photograph, and measures as zero padding
     on both sections because it belongs to neither.

     The picture-led sections hold their children in rather than removing the
     margins one by one, so a rule added later cannot leak the same way. */
  .about > .container,
  .whoami > .container,
  .magnet > .container,
  .gal > .container,
  .speaking > .container{display:flow-root}

  /* The grid itself has no reason to carry a bottom margin: it is the whole
     section, edge to edge. */
  .about__grid{margin-bottom:0}

  /* ---------- How I Build: cards that read as cards ----------
     They were rgba(255,255,255,.06) on deep purple - six per cent lighter than
     the thing they sat on, which is purple on purple.

     Going darker instead did not fix it: purple-ink on purple-deep measures
     1.11:1, because both are dark purples and the eye has nothing to separate.
     The only version that actually reads is the one the rest of the site
     already uses - a white card with a stacked shadow. On this ground that is
     roughly 13:1, the shadow works because there is a light surface to cast
     from, and the section keeps its purple as the surface the cards sit on. */
  .process .card3d{
    background:var(--paper);
    border:1px solid rgba(255,255,255,.10);
    border-radius:12px;
    box-shadow:
      0 1px 1px rgba(0,0,0,.28),
      0 4px 6px rgba(0,0,0,.24),
      0 10px 16px rgba(0,0,0,.22),
      0 22px 34px rgba(0,0,0,.18);
    transition:transform var(--t-med),box-shadow var(--t-med),border-color var(--t-fast);
  }
  .process .card3d:hover{
    background:var(--paper);
    transform:translateY(-5px);
    border-color:var(--gold);
    box-shadow:
      0 2px 3px rgba(0,0,0,.30),
      0 8px 12px rgba(0,0,0,.26),
      0 18px 28px rgba(0,0,0,.24),
      0 34px 54px rgba(0,0,0,.20);
  }
  .process .card3d h3{color:var(--ink)}
  .process .card3d p{color:var(--muted)}
  /* The numeral keeps the gold, which now has a light ground to sit on and
     needs the deep gold to clear contrast. */
  .process .step__n{background:var(--brand-purple);color:var(--gold-light);box-shadow:none}

  /* ---------- The masthead is the name, and nothing else ----------
     The five dimensions were set beside the mark and shown above 1560px, where
     they wrapped to five lines - taking the brand from 48px to 115px and the
     header from 93px to 160px, with the text crammed against the monogram.

     They are not lost: the hero states them at full size, which is where the
     positioning belongs, and the footer carries them too. A masthead that has
     to explain itself in five lines of 10px type is not a masthead. */
  .site-header .brand__name .t{display:none}

  /* The name is a lockup, not a paragraph. It broke to two lines above 1560px
     because the block was still sized around the descriptor that used to sit
     under it - which is now gone from the masthead. */
  .site-header .brand__name{max-width:none}
  .site-header .brand__name .n{white-space:nowrap}

  /* ---------- The brands slide has to fit the hero it is given ----------
     It was a fixed-size layout inside an absolutely positioned box. In a 580px
     hero the content ran about 150px long, so the marks row was clipped off the
     top, the portrait was cut at the forearm and the figures collided with the
     carousel dots. Everything I had tested was 900px tall.

     It now sizes from the height available rather than from a set of fixed
     numbers, and the foot of the slide keeps a band clear for the dots. */
  .bwall{align-items:stretch}
  .bwall > .container{
    display:flex;flex-direction:column;justify-content:center;
    gap:clamp(10px,2.2vh,26px);
    padding-top:clamp(12px,2.5vh,26px);
    /* The dots print across the foot; the content stops short of them. */
    padding-bottom:clamp(38px,7vh,64px);
    overflow:hidden;
  }

  .bwall__marks{
    gap:clamp(6px,.8vw,10px);
    margin-bottom:0;
    flex:0 0 auto;
  }
  .bwall__tile img{height:clamp(34px,7.2vh,62px)}
  .bwall__tile figcaption{
    font-size:clamp(7.5px,1.1vh,9.5px);
    margin-top:clamp(2px,.5vh,5px);
  }

  .bwall__mid{gap:clamp(16px,2.4vw,32px);flex:0 1 auto;min-height:0}
  .bwall__name h1{font-size:clamp(30px,7.2vh,66px);margin:clamp(4px,1vh,8px) 0 clamp(5px,1vh,10px)}
  .bwall__roles{font-size:clamp(10.5px,1.6vh,13px);margin-bottom:clamp(5px,1vh,10px)}
  .bwall__tag{font-size:clamp(14px,2.6vh,23px);margin-bottom:clamp(8px,1.6vh,14px)}
  .bwall__eyebrow{font-size:clamp(9px,1.4vh,11px)}
  .bwall__name .btn{padding-top:clamp(9px,1.6vh,14px);padding-bottom:clamp(9px,1.6vh,14px)}

  /* The portrait takes what is left rather than a fixed 360px, so it is never
     cut off at the bottom of the slide. */
  .bwall__portrait{max-height:min(360px,46vh);height:100%;aspect-ratio:auto}

  .bwall__stats{
    margin-top:clamp(8px,1.6vh,16px);
    padding-top:clamp(8px,1.4vh,14px);
    gap:clamp(4px,.6vw,8px);
    flex:0 0 auto;
  }
  .bwall__stat b{font-size:clamp(16px,3vh,26px)}
  .bwall__stat span{font-size:clamp(8px,1.2vh,10.5px);margin-top:2px}

  /* Below this the portrait costs more than it gives: it squeezes the name and
     the figures into nothing. */
  /* The portrait still goes on a genuinely short window, where it would
     squeeze the name and the marks into nothing. */
  @media (max-height:600px){
    .bwall__portrait{display:none}
    .bwall__mid{grid-template-columns:1fr}
  }

  /* Still ran over: 22px at a 760px hero, 57px at 499px. The parts are trimmed
     again, and below 700px the figures strip goes - the marks and the name are
     what the slide is for, and a row of numbers clipped in half is worse than
     no row at all. */
  .bwall > .container{
    gap:clamp(6px,1.4vh,18px);
    padding-top:clamp(8px,1.6vh,18px);
    padding-bottom:clamp(34px,6vh,54px);
  }
  .bwall__tile img{height:clamp(28px,5.6vh,52px)}
  .bwall__name h1{font-size:clamp(26px,6vh,58px)}
  .bwall__portrait{max-height:min(320px,40vh)}
  .bwall__stats{margin-top:clamp(6px,1.2vh,12px);padding-top:clamp(6px,1.1vh,11px)}
  .bwall__stat b{font-size:clamp(15px,2.6vh,24px)}

  /* ---------- Real marks in the strip ----------
     The row was one muted tone all the way across, which reads as a list of
     words rather than a set of marks. The platforms she actually trades on now
     appear as their own logos in their own colours, alongside the names that
     were already there - added to, not replaced.

     Each carries its wordmark beside the glyph, because a symbol on its own is
     recognisable to the people who already know it and meaningless to everyone
     else. */
  .logomark--brand{
    display:inline-flex;align-items:center;gap:10px;
    padding:0 32px;height:74px;white-space:nowrap;
    opacity:.9;
  }
  .logomark--brand svg{
    width:auto;height:26px;flex:0 0 auto;display:block;
    filter:saturate(1.05);
  }
  .logomark__t{
    font-family:var(--body);font-size:17px;font-weight:800;
    letter-spacing:.02em;color:var(--ink-2);text-transform:none;
  }
  .logomark--brand:hover{opacity:1}

  /* On a dark ground the wordmark flips; the glyph keeps its own colour, which
     is the point of putting it there. */
  .sec-dark .logomark__t,.logos.sec-dark .logomark__t{color:rgba(255,255,255,.86)}

  @media (max-width:720px){
    .logomark--brand{padding:0 20px;height:56px;gap:8px}
    .logomark--brand svg{height:20px}
    .logomark__t{font-size:14px}
  }

  /* Skool has no glyph in the set, so it keeps a wordmark - in its own colour,
     or it reads as the one that was forgotten. */
  .logomark--skool .logomark__t{color:#FF6B00}

  /* ---------- The Starter Letter takes the left ----------
     Speaking puts its photograph on the right and the Starter Letter sat on the
     right directly beneath it - two pictures stacked down the same edge, which
     stops the page alternating and reads as a column of images. */
  .magnet__grid{direction:rtl}
  .magnet__grid > *{direction:ltr}

  /* ---------- The calendar is black, not grey ----------
     Past and out-of-month days were black at 60% alpha, which composites to
     grey - and grey was removed from this palette deliberately. They are ink
     now, held back by weight rather than by washing the colour out. */
  .calendar-card .day{color:var(--ink)}
  .calendar-card .day.prev-month,
  .calendar-card .day.next-month{color:var(--ink);font-weight:400;opacity:.55}
  .calendar-card .day.is-past{color:var(--ink);font-weight:400;opacity:.55}

  /* ---------- The room, unedited ----------
     The pair was capped at 900px and centred, so on a 1300px screen most of the
     section was empty ground either side, and each screenshot sat inside a 12px
     frame that made it smaller again.

     They run edge to edge now with a hairline between them. The frame goes: a
     screenshot of a community does not need a mount, and the mount was the
     thing making them look cramped.

     The sources are 2560px tall, so they are capped and anchored to the top -
     a screenshot is read from the first post down, and the fade says there is
     more rather than pretending the conversation ends mid-sentence. */
  .skool{
    grid-template-columns:repeat(2,1fr);
    gap:2px;
    max-width:none;
    margin:0;
  }
  .skool figure{
    padding:0;border:0;box-shadow:none;background:transparent;
    position:relative;overflow:hidden;
    height:clamp(420px,78vh,760px);
  }
  .skool img{width:100%;height:100%;object-fit:cover;object-position:50% 0}
  .skool figure::after{
    content:'';position:absolute;left:0;right:0;bottom:0;height:120px;
    background:linear-gradient(to bottom,rgba(17,17,17,0),rgba(17,17,17,.92));
    pointer-events:none;
  }

  /* The section holds pictures, so it keeps its heading's gutter and nothing
     else - the same rule as the galleries. */
  .skool-sec > .container{padding-left:0;padding-right:0;max-width:none}
  .skool-sec .sec__head{padding-left:clamp(20px,4vw,64px);padding-right:clamp(20px,4vw,64px)}

  @media (max-width:700px){
    .skool{grid-template-columns:1fr}
    .skool figure{height:clamp(360px,60vh,520px)}
  }

  /* ---------- Contrast, measured rather than judged ----------
     axe put 33 elements just under the line: the calendar's out-of-month days
     at 4.17:1 and the journal card meta at 4.29:1, both needing 4.5. Small
     misses, and both are black at an opacity chosen by eye rather than
     calculated. Raised until they clear it.

     --faint went from .56 to .68 alpha, which takes it from about 4.3:1 to
     5.1:1 on white and fixes every use of it at once. */
  .calendar-card .day.prev-month,
  .calendar-card .day.next-month,
  .calendar-card .day.is-past{color:var(--ink);opacity:.72}

  /* ---------- Everything on the page belongs to a landmark ----------
     The floating "New Here?" button was appended bare to the body, outside
     main, header and footer - unreachable to anyone navigating by landmark.
     It sits in its own nav now; the wrapper carries no box of its own. */
  .newhere-region{display:contents}

  /* A subhead inside the copy block. It is an h2 because the page's h1 is the
     only thing above it - jumping straight to h3 is a level skip, and a screen
     reader reading by heading hears a missing rung. It is styled as the h3 it
     looked like, so nothing changes on screen. */
  .brandcopy__sub{font-family:var(--body);font-size:17px;font-weight:800;
    letter-spacing:.01em;color:var(--ink);margin:30px 0 10px}
  .sec-dark .brandcopy__sub{color:#fff}

  /* ---------- Gold on white, measured ----------
     #C89434 on white is 2.71:1. AA asks 3:1 even for large text, so the gold
     highlight failed everywhere it sat on a light ground - the only serious
     contrast failure left on the site.

     The bright gold is kept where it passes, which is every dark section: on
     near-black it is 6.96:1 and on deep purple higher still. On light grounds
     it becomes --gold-deep #876223, 5.52:1, which is the same hue carried
     further down rather than a different colour.

     This was on the pre-launch list as a decision rather than a fix, because it
     changes the look. It changes it on light grounds only, and the alternative
     is shipping text nobody with average eyesight can read at arm's length. */
  .gold,
  h1 .gold, h2 .gold, h3 .gold{color:var(--gold-deep)}

  /* .mark is a highlighter - its own background is gold, so its text has to be
     ink. Setting it gold-deep put gold on gold at 2.03:1, which is worse than
     what it replaced. */
  .mark{color:var(--ink)}

  /* On any dark ground the bright gold returns - it is legible there, and it is
     what the palette is for. */
  .sec-dark .gold, .on-dark .gold, .sec--black .gold, .sec--purple .gold,
  .sec-dark .mark, .on-dark .mark,
  .sec-dark h1 .gold, .sec-dark h2 .gold, .sec-dark h3 .gold,
  .on-dark h1 .gold, .on-dark h2 .gold, .on-dark h3 .gold,
  /* The counter strip runs on brand purple, so its numerals keep the bright
     gold - gold-deep on purple is 2.56:1, darker text on a dark ground. The
     section carries neither .sec-dark nor .on-dark, which is why the blanket
     rule reached it. */
  .counter .counter__n,
  .sec-dark .counter__n, .on-dark .counter__n{color:var(--gold)}

  /* ---------- The marks read as large as the words beside them ----------
     The text marks are 34px Bodoni; the logos were a 26px glyph with a 17px
     wordmark, so the real brands were the smallest thing in a row that exists
     to show them. Sized up to match, and they lead the row now rather than
     following three publication names in grey. */
  .logomark--brand{gap:13px;padding:0 38px}
  .logomark--brand svg{height:38px}
  .logomark__t{font-size:26px;font-weight:700;letter-spacing:.005em}
  .logomark--skool .logomark__t{font-size:30px}

  @media (max-width:720px){
    .logomark--brand{padding:0 22px;gap:9px}
    .logomark--brand svg{height:26px}
    .logomark__t{font-size:18px}
    .logomark--skool .logomark__t{font-size:20px}
  }

  /* ---------- The popup's email field ----------
     It was an unstyled browser input inside a designed panel - rounded, grey
     bordered, system font, nothing to do with the rest of the site. Square and
     brand-bordered like every other field here, and the button sits with it. */
  .letterpop__form{display:flex;flex-direction:column;gap:10px;margin-top:18px}
  .letterpop__form input[type=email]{
    width:100%;border-radius:0;border:1.5px solid rgba(17,17,17,.22);
    background:#fff;color:var(--ink);
    padding:14px 15px;font-family:var(--body);font-size:15px;line-height:1.2;
    transition:border-color var(--t-fast),box-shadow var(--t-fast);
  }
  .letterpop__form input[type=email]::placeholder{color:rgba(17,17,17,.45)}
  .letterpop__form input[type=email]:focus{
    outline:0;border-color:var(--brand-purple);
    box-shadow:0 0 0 3px rgba(72,1,105,.12);
  }
  .letterpop__form .btn{width:100%;justify-content:center;border-radius:0}
  .letterpop__note{margin-top:10px;font-size:12.5px;color:rgba(17,17,17,.6);text-align:center}

  /* ---------- Gold on light grounds, reaching the rules that outrank it ----------
     .whoami__right h2 .gold and .whoami__left h2 .gold are three classes deep,
     so the earlier `h2 .gold` rule never got near them and those headings were
     still 2.71:1. Named explicitly here rather than reaching for !important,
     which would leave two rules arguing over the same heading. */
  .whoami__left h2 .gold,
  .whoami__right h2 .gold,
  .whoami h2 .gold,
  .about h2 .gold,
  .ventures h2 .gold,
  .properties h2 .gold,
  .speaking h2 .gold,
  .blog h2 .gold,
  .sec:not(.sec-dark):not(.sec--black):not(.sec--purple) h2 .gold{color:var(--gold-deep)}

  /* And meta text: measured at 4.23:1 where 4.5 is needed. */
  .jcard__meta,.post__meta,.scard__meta{color:rgba(17,17,17,.7)}
  .sec-dark .jcard__meta,.sec--black .jcard__meta,.sec--purple .jcard__meta,
  .sec-dark .post__meta,.sec-dark .scard__meta{color:rgba(255,255,255,.72)}

  /* ---------- The split's picture runs the whole row ----------
     .split already stretched, but the row carried margin-top and the media had
     only a min-height - so where the copy ran longer the picture stopped short
     of the bottom, and the margin left ground above it. A 655x681 image in an
     837px section, 50px clear underneath.

     The margin goes, and the media takes the row's height rather than a
     minimum. Where a heading sits above the split it keeps its own space,
     because a heading is text. */
  .sec--split .split{margin-top:0}
  .sec--split .split__media{height:100%;min-height:clamp(360px,44vw,640px)}
  .sec--split .sec__head{margin-bottom:0}

  /* ---------- The padding rule must not reach the full-bleed sections ----------
     .sec--split > .container is set to padding:0 around line 2131. The
     "text sections get 56px" rule I added later matches .sec > .container at
     the same specificity and comes after it in the file, so it won - which is
     why the split pictures still had 56px above and below them after being
     made full-bleed.

     Same duplicate-rule trap as the ecosystem strip and the About margin. The
     exclusion is written here rather than by editing the earlier rule, so the
     reason survives next to it. */
  .sec--split > .container,
  .skool-sec > .container,
  .bgal > .container{padding-top:0;padding-bottom:0}

  /* ---------- The split picture spans the heading row too ----------
     The section is: heading, then a two-column split. So the picture began
     below the heading and left a band of white above it - 163px on About -
     while the copy beside it started at the top.

     The container becomes the grid and .split becomes display:contents, so the
     heading and the copy stack in column one while the picture takes column two
     across both rows. It now runs from the very top of the section to the very
     bottom, which is what Who I Am does. */
  .sec--split > .container{
    display:grid;
    grid-template-columns:1fr 1fr;
    grid-template-rows:auto 1fr;
    align-items:stretch;
  }
  .sec--split .sec__head{grid-column:1;grid-row:1;padding-bottom:0}
  .sec--split .split{display:contents}
  .sec--split .split__copy{grid-column:1;grid-row:2;max-width:none;margin-left:0}
  .sec--split .split__media{grid-column:2;grid-row:1 / -1;min-height:clamp(360px,42vw,620px)}

  /* Flipped puts the picture on the left. direction:rtl cannot do that once
     the children are grid items of the container, so the columns are named. */
  .sec--split.is-flipped > .container{direction:ltr}
  .sec--split.is-flipped .split{direction:ltr}
  .sec--split.is-flipped .sec__head,
  .sec--split.is-flipped .split__copy{grid-column:2}
  .sec--split.is-flipped .split__media{grid-column:1}

  @media (max-width:860px){
    .sec--split > .container{grid-template-columns:1fr;grid-template-rows:auto auto auto}
    .sec--split .sec__head,
    .sec--split .split__copy,
    .sec--split .split__media,
    .sec--split.is-flipped .sec__head,
    .sec--split.is-flipped .split__copy,
    .sec--split.is-flipped .split__media{grid-column:1}
    .sec--split .split__media{grid-row:1;min-height:300px}
    .sec--split .sec__head{grid-row:2}
    .sec--split .split__copy{grid-row:3}
  }

  /* ---------- The last two picture blocks ----------
     .artzone is a gallery grid on /art with 88px of section padding, so its
     tiles stopped short of the edges while the same grid on the homepage runs
     edge to edge. Its heading keeps its gutter; the tiles do not.

     .kidshero holds one picture, 552x368 inside a 554px section - the picture
     nearly the height of the block, with padding either side of it. It fills
     its column now.

     .shop-main is left alone: eighteen product cards in a grid is not a
     picture block, and taking the padding off a card grid pushes the cards
     into the screen edge. */
  .artzone{padding-top:0;padding-bottom:0}
  .artzone > .container{padding-left:0;padding-right:0;max-width:none}
  .artzone .sec__head,.artzone__head{padding:clamp(40px,5vw,72px) clamp(20px,4vw,64px) 20px}
  .artzone .gal__grid,.artzone__grid{gap:2px}

  .kidshero{padding-top:0;padding-bottom:0}
  .kidshero > .container{padding-top:0;padding-bottom:0}
  .kidshero__art{height:100%;margin:0;align-self:stretch}
  /* contain, not cover. This is a logo, and cover cut ACHEBE off at both ends
     and pushed KIDS WORLD past the edge - the same mistake as the venture
     marks. The block still fills its column; the artwork sits whole inside it. */
  .kidshero__art img{width:100%;height:100%;object-fit:contain;object-position:50% 50%;display:block;
    filter:drop-shadow(0 26px 44px rgba(0,0,0,.34))}
  .kidshero__copy{padding:clamp(40px,5vw,80px) clamp(24px,4vw,60px)}

  /* ---------- The hero name, after it stopped being an h1 ----------
     .hcar__name never declared a font-family: as an <h1> it inherited the
     display face from the global heading rule. Turning it into a <p> with a
     heading role - so the carousel stopped claiming five page titles - took
     that inheritance away, and a two-selector paragraph rule then out-ranked
     its font-size too. On mobile the name rendered as small plain body text
     under a gold chip already saying the same words.

     Declared outright now, so it does not depend on what tag it happens to be. */
  .hcar__copy .hcar__name,
  .hcar .hcar__name{
    font-family:var(--display);
    font-size:clamp(44px,7.2vw,104px);
    font-weight:400;
    line-height:.98;
    letter-spacing:-.02em;
    color:var(--paper);
    margin:0 0 14px;
  }

  /* ---------- The carousel headlines, which were never display type ----------
     Exactly the trap described above, on the element next to it. `.hcar__h` was
     written at (0,1,0) with clamp(34px,5vw,64px); `.hcar__copy p` is (0,1,1)
     with clamp(15px,1.5vw,18px) and simply out-ranks it. So on slides 1-4 the
     headline rendered at body size, the same size as the paragraph beneath it,
     and the class that was supposed to make it a headline never applied at all.

     Worth knowing what that meant on screen: the carousel's headline was the
     one thing a visitor read first, set no larger than the sentence explaining
     it. And it put Bodoni Moda at 18px, under the ~34px floor below which its
     hairlines disappear - the exact legibility rule this stylesheet enforces
     everywhere else.

     The slides were left alone when the fix above went in for `.hcar__name`,
     because that fix was written for a specific complaint about the name. This
     one is the same correction applied to its neighbour, from the same block,
     for the same reason. */
  .hcar__copy .hcar__h,
  .hcar .hcar__h{
    font-family:var(--display);
    font-size:clamp(34px,5vw,64px);
    font-weight:400;
    line-height:1.04;
  }

  /* The roles sit under the name and must not compete with it. */
  .hcar .hcar__roles{font-size:clamp(11px,1.2vw,15px)}

  /* ---------- The floating shortcut must not sit on a button ----------
     At 390px it landed on top of "Explore my world". It lifts clear of the
     hero's own calls to action. */
  @media (max-width:860px){
    .newhere{bottom:auto;top:auto}
    .newhere{transform:translateY(-8px)}
  }

  /* ============================================================
     PHONES — the things that only go wrong at this width
     ============================================================
     Found by auditing all 39 pages at 390px after the hero was
     discovered collapsed to zero height. Kept in one block at the end
     of the file on purpose: roughly 123 legacy !important rules live
     above, and appending at equal specificity wins without adding a
     124th for the next person to unpick.

     Not included, having checked rather than assumed:
     - The gallery caption reports as clipped. It is: .gal__cap sits at
       translateY(8px) behind overflow:hidden and slides up on hover.
       That is the closed state of a hover reveal, not a defect.
     - Several images measure wider than the screen. They sit inside a
       clipped frame and no page scrolls sideways.
     ============================================================ */
  @media (max-width:860px){

    /* Tap targets. WCAG 2.5.8 asks for 24x24 CSS pixels; a thumb wants
       more than the floor. Every one of these was under it. */

    /* The carousel dots were 36x4 - a four-pixel-tall control. The bar
       stays four pixels; the target around it becomes 24. content-box
       plus background-clip means the padding enlarges the hit area
       without painting any of it. */
    .hcar__dot{
      box-sizing:content-box;height:4px;padding:10px 0;
      background-clip:content-box;
    }

    /* 166x18 in the top bar, on all 39 pages. */
    .topbar__contact a{
      display:inline-flex;align-items:center;min-height:32px;
    }

    /* Card and detail links, all landing at 20-22px tall. */
    .jcard__read,.pcard__learn,.pdp__back,.post__read,.link-arrow{
      display:inline-flex;align-items:center;gap:6px;min-height:32px;
    }

    /* Card titles. inline-block rather than inline-flex, so a long title
       still wraps as ordinary text. These only measure short enough to fail
       at the widths where the title happens to fit on one line - at 390 the
       same links wrap to two and clear the threshold by accident. */
    .post__body h3 a,.jcard__body h3 a,.scard h3 a{
      display:inline-block;min-height:24px;
    }

    /* Labels that resolved below 12px on a phone. These are uppercase
       and letter-spaced, which costs legibility again at small sizes. */
    .hcar__chip,.kidshero__chip{font-size:12px}
    .hcar .hcar__roles{font-size:12px}
    .vcard__tag,.tvcard__tag,.kit__eyebrow,.shots__i figcaption{font-size:12px}

    /* 1.1vh resolved to 9.28px on a 844px-tall screen. The tile is sized
       in vh so the whole slide fits without scrolling, so this is raised
       to a floor of 12px and then checked on screen at 360, 390 and 768
       to confirm the slide still fits rather than assuming it does. */
    .bwall__tile figcaption{font-size:clamp(12px,1.4vh,13px)}

    /* The footer's venture and section links were 19px tall - the largest
       group of undersized targets left, and the ones a thumb reaches for
       most often. */
    .footer__col ul li a,.footer__bottom a{
      display:inline-flex;align-items:center;min-height:32px;
    }

    /* The homepage ticker, and the fact strips - which are the same four
       claims rendered by three different components under three different
       class names, hence three selectors for one piece of content. */
    .ticker__i{font-size:12px}
    .facts__i span,.kit__facts div span,.venture__meta div span{font-size:12px}
    .apt__tag,.gal__cap{font-size:12px}

    /* The journal card badge now carries a full brand name - "Achebe Africa
       Digital Academy" rather than a two-word label - so 10px stopped being
       readable at this width. */
    .jcard__tag{font-size:12px}

    /* A whole sentence set in 11px uppercase at .18em tracking, under each
       venture name. <small> is the right element for it; 11px is not the
       right size for it on a phone. */
    .apt__info .nm small{font-size:12px}

    /* ---------- Full bleed survives the phone ----------
       On desktop each of these pictures runs to its own screen edge - Who I
       Am and About to the left, Speaking to the right. On a phone the columns
       stack and the picture was left sitting inside the container's 16px
       gutters, so the one section treatment that was asked for site-wide was
       the one thing that stopped happening at the width most people read at.

       calc(50% - 50vw) rather than a negative --gutter margin, so it does not
       matter what the gutter is at any given width. */
    .whoami__figure,
    .about__portrait,
    .speaking__photo-card,
    .magnet__art,
    /* The gallery tiles are full bleed at 1310 and were inset at 390. Only
       the grid breaks out - the section heading above it is text and keeps
       its gutter. */
    .gal__grid,
    .sec--split .split__media{
      margin-left:calc(50% - 50vw);
      margin-right:calc(50% - 50vw);
      width:100vw;max-width:100vw;
    }
    .whoami__figure img,
    .about__portrait img,
    .speaking__photo-card img,
    .magnet__art img,
    .sec--split .split__media img{width:100%;display:block}

    /* An email address or a phone number is a standalone target even when it
       sits in a paragraph of its own, so the inline exemption does not apply
       to it. Both were landing at 19-20px on /contact and /cookies. */
    a[href^="mailto:"],a[href^="tel:"]{
      display:inline-flex;align-items:center;min-height:32px;
    }
  }

  /* ============================================================
     MARKS ARE SHOWN WHOLE, PHOTOGRAPHS ARE CROPPED
     ============================================================
     object-fit:cover always passes a checker - the box is filled, the file
     loaded, nothing overflows. What it cannot report is a 3:1 wordmark
     pushed into a 4:5 slot. On /leadership-legacy the Achebe Hope Foundation
     lockup was showing 31% of itself at 1310 and 43% at 390, which on screen
     read "CHEBE FOUNDATIO".

     Only files that are a mark on their own ground are listed. Each one's
     corners were sampled to confirm it carries a flat ground rather than
     photography, and the background below is that measured colour, so the
     letterboxing reads as one panel instead of two bands:

       foundation-cover  1200x400   corners rgb(17,15,13)   spread 7
       media-mark        1100x1100  corners rgb(0,0,0)      spread 2
       waiting-room       433x434   corners rgb(3,3,3)      spread 4

     ugc-cover, dpba-logo and marie-speaking measured photographic - corner
     spreads of 212, 54 and 172 - so cover is right for them and they are
     deliberately not here. Cropping a photograph is what cover is for.

     The [src] is repeated to raise specificity. .sec--split .split__media img
     scores (0,2,1) and a plain img[src*=...] scores (0,1,1), so the first
     attempt at this lost outright and the mark carried on being cropped.
     Three attribute selectors score (0,3,1), which clears the class-based
     rules without adding a 124th !important to a file whose existing ones
     are already the first thing to check when a style refuses to apply. */
  img[src*="foundation-cover"][src][src]{object-fit:contain;background:rgb(17,15,13)}
  img[src*="media-mark"][src][src]{object-fit:contain;background:#000}
  img[src*="waiting-room"][src][src]{object-fit:contain;background:rgb(3,3,3)}

  /* The World Current masthead, on the white ground the artwork carries.
     The venture card slot is a fixed 210px tall against a width that runs from
     356 to 1212, so its ratio swings from 1.7:1 to 5.77:1 and cover cropped
     "THE" off the top and the tagline off the bottom at desktop. */
  img[src*="world-current"][src][src]{object-fit:contain;background:rgb(253,253,253)}

  /* The brand attribution under a journal headline.
     Deliberately quiet: the editorial direction for these pieces is that the
     headline carries the intrigue and the brand follows as attribution, so
     this is set in the body face at reading size rather than as another gold
     chip competing with the headline above it. */
  .post__attrib{
    color:var(--gold-light);
    font-family:var(--body);
    font-size:clamp(13px,1.3vw,15px);
    font-weight:700;
    letter-spacing:.14em;
    text-transform:uppercase;
    margin:2px 0 14px;
  }

  /* ============================================================
     .prose — long-form copy
     ============================================================
     The wrapper for a journal article's body and a product's description,
     and until now it had no rules at all. Line 66 resets every element to
     margin:0, so nothing put paragraph spacing back and an article rendered
     as one solid block: every paragraph butted against the next with only
     the line-height between them.

     It matters more than usual here because the journal pieces are written
     in short, single-line paragraphs where the break between them is the
     rhythm of the writing. Removing that spacing removes the punctuation.
     ============================================================ */
  .prose{color:var(--ink);font-size:17px;line-height:1.65;max-width:68ch}
  /* Spacing lives on the sibling combinator so the first child never carries
     a leading gap. There was a `.prose p{margin:0}` here to neutralise the
     browser default; it sat after this rule at equal specificity and the
     shorthand reset the very margin-top being set two lines above. The reset
     on line 66 already zeroes p margins, so it was doing nothing but that. */
  .prose > * + *{margin-top:1.15em}

  .prose h2,.prose h3{
    font-family:var(--body);color:var(--ink);
    line-height:1.25;letter-spacing:-.01em;
  }
  .prose h2{font-size:24px;font-weight:700;margin-top:1.9em}
  .prose h3{font-size:19px;font-weight:700;margin-top:1.6em}

  .prose ul,.prose ol{padding-left:1.25em}
  .prose li + li{margin-top:.5em}
  .prose li::marker{color:var(--brand-purple)}

  .prose a{color:var(--brand-purple);text-decoration:underline;text-underline-offset:2px}
  .prose a:hover{color:var(--purple-deep)}
  .prose strong{font-weight:700;color:var(--ink)}
  .prose em{font-style:italic}

  .prose blockquote{
    border-left:3px solid var(--gold);
    padding:2px 0 2px 20px;
    font-size:19px;line-height:1.55;
    color:rgba(17,17,17,.82);
  }
  .prose img{max-width:100%;height:auto;display:block}
  .prose hr{border:0;height:1px;background:rgba(17,17,17,.14);margin:2.2em 0}

  /* On a dark ground the body ink and the purple links both disappear. */
  .sec-dark .prose,.on-dark .prose{color:rgba(255,255,255,.86)}
  .sec-dark .prose h2,.sec-dark .prose h3,
  .on-dark .prose h2,.on-dark .prose h3,
  .sec-dark .prose strong,.on-dark .prose strong{color:var(--paper)}
  .sec-dark .prose a,.on-dark .prose a{color:var(--gold-light)}
  .sec-dark .prose li::marker,.on-dark .prose li::marker{color:var(--gold)}
  .sec-dark .prose blockquote,.on-dark .prose blockquote{color:rgba(255,255,255,.8)}

  /* ============================================================
     THE 3D CARD, EVERYWHERE
     ============================================================
     The brief was one 3D treatment reused on every card, a little
     exaggerated. An audit of all 40 pages found it on 6 of 34 distinct
     card types - essentially the homepage's .card3d blocks and nothing
     else - and even those carried a first layer of
     0 1px 1px rgba(28,1,40,.10), which is not exaggerated by any reading.

     So: the same stacked shadow, deepened, applied to every content card
     on the site. Five layers rather than four, roughly 40% more opacity
     in each, and an 8px hover lift instead of 6.

     Deliberately NOT included, because neither is a card:
       - .gal__item / .bgal__item — the gallery mosaic runs edge to edge
         with a 10px gap and tiles butt against each other; shadows there
         fight the full-bleed treatment rather than lift anything.
       - .feat > li and .brandcopy__list > li — rows in a list, ruled off
         from each other, not free-standing blocks.
     Say the word and either joins.

     No !important. This block sits at the end of the file, so at equal
     specificity it wins on order - and the next person can still
     out-specify it without unpicking an override war.
     ============================================================ */
  .card3d,
  .mini,
  .jcard,
  .vcard,
  .apt,
  .tvcard,
  .scard,
  .pcard,
  .peek__opt,
  .tcar__item,
  .venture,
  .calendar-card,
  .kit__sheet,
  article.post{
    position:relative;
    border:1px solid rgba(72,1,105,.16);
    box-shadow:var(--card-3d);
    transform:translateZ(0);
    transition:transform var(--t-med), box-shadow var(--t-med), border-color var(--t-med);
  }

  .card3d:hover,
  .mini:hover,
  .jcard:hover,
  .vcard:hover,
  .apt:hover,
  .tvcard:hover,
  .scard:hover,
  .pcard:hover,
  .peek__opt:hover,
  .tcar__item:hover,
  .venture:hover,
  .calendar-card:hover,
  .kit__sheet:hover,
  article.post:hover{
    transform:translateY(-8px);
    border-color:rgba(72,1,105,.34);
    box-shadow:var(--card-3d-hover);
  }

  /* On a dark ground a purple-black shadow is invisible, so the edge and a
     lifted surface carry the depth instead. Same rule the original .card3d
     already followed - extended to the rest. */
  .sec-dark .card3d,.sec--black .card3d,.sec--purple .card3d,.on-dark .card3d,
  .sec-dark .mini,.sec--black .mini,.sec--purple .mini,.on-dark .mini,
  .sec-dark .jcard,.on-dark .jcard,
  .sec-dark .vcard,.on-dark .vcard,
  .sec-dark .apt,.on-dark .apt,
  .sec-dark .tvcard,.on-dark .tvcard,
  .sec-dark .scard,.on-dark .scard,
  .sec-dark .pcard,.on-dark .pcard,
  .sec-dark .peek__opt,.on-dark .peek__opt,
  .sec-dark .tcar__item,.on-dark .tcar__item,
  .sec-dark article.post,.on-dark article.post{
    border-color:rgba(255,255,255,.18);
    box-shadow:var(--card-3d-dark);
  }
  .sec-dark .card3d:hover,.sec--black .card3d:hover,.sec--purple .card3d:hover,.on-dark .card3d:hover,
  .sec-dark .mini:hover,.sec--black .mini:hover,.sec--purple .mini:hover,.on-dark .mini:hover,
  .sec-dark .jcard:hover,.on-dark .jcard:hover,
  .sec-dark .vcard:hover,.on-dark .vcard:hover,
  .sec-dark .apt:hover,.on-dark .apt:hover,
  .sec-dark .tvcard:hover,.on-dark .tvcard:hover,
  .sec-dark .scard:hover,.on-dark .scard:hover,
  .sec-dark .pcard:hover,.on-dark .pcard:hover,
  .sec-dark .peek__opt:hover,.on-dark .peek__opt:hover,
  .sec-dark .tcar__item:hover,.on-dark .tcar__item:hover,
  .sec-dark article.post:hover,.on-dark article.post:hover{
    border-color:var(--gold);
    box-shadow:var(--card-3d-dark-hover);
  }

  /* A lift that cannot be turned off is a motion problem, not a style. */
  @media (prefers-reduced-motion:reduce){
    .card3d,.mini,.jcard,.vcard,.apt,.tvcard,.scard,.pcard,.peek__opt,
    .tcar__item,.venture,.calendar-card,.kit__sheet,article.post,
    .card3d:hover,.mini:hover,.jcard:hover,.vcard:hover,.apt:hover,
    .tvcard:hover,.scard:hover,.pcard:hover,.peek__opt:hover,
    .tcar__item:hover,.venture:hover,.calendar-card:hover,
    .kit__sheet:hover,article.post:hover{transition:none;transform:none}
  }

  /* Tables and embedded video inside long-form copy.
     The editor can produce both; the stylesheet had rules for neither, so a
     table came out as words running into each other and a video had no shape
     of its own. */
  .prose table{
    width:100%;border-collapse:collapse;margin:1.4em 0;
    font-size:15.5px;line-height:1.5;
  }
  .prose table th,
  .prose table td{
    border:1px solid rgba(17,17,17,.14);
    padding:11px 14px;text-align:left;vertical-align:top;
  }
  .prose table th{
    background:var(--cream);font-weight:700;color:var(--ink);
    font-size:12.5px;letter-spacing:.09em;text-transform:uppercase;
  }
  .prose table tr:nth-child(even) td{background:rgba(72,1,105,.025)}

  /* An embed carries its own 16:9 from the sanitiser; this gives it the same
     edge and depth as every other block on the page. */
  .prose iframe{
    display:block;width:100%;aspect-ratio:16/9;border:0;margin:1.6em 0;
    box-shadow:var(--card-3d);
  }
  .prose video{
    display:block;width:100%;height:auto;margin:1.6em 0;
    border:1px solid rgba(72,1,105,.16);box-shadow:var(--card-3d);
  }

  .sec-dark .prose table th,.on-dark .prose table th{
    background:rgba(255,255,255,.06);color:var(--paper);
  }
  .sec-dark .prose table th,.sec-dark .prose table td,
  .on-dark .prose table th,.on-dark .prose table td{border-color:rgba(255,255,255,.18)}
  .sec-dark .prose table tr:nth-child(even) td,
  .on-dark .prose table tr:nth-child(even) td{background:rgba(255,255,255,.03)}