/* ============================================================
     DESIGN TOKENS
     ============================================================ */
  :root{
    --bg:#05070d;
    --ink:#f4f1e9;
    --muted:#a9b0c0;
    --gold:#d4af6a;
    --gold-soft:#e7cd97;
    --glass:rgba(10,13,22,.55);
    --glass-edge:rgba(255,255,255,.12);
    --hairline:rgba(255,255,255,.08);
    --shadow:0 30px 80px -20px rgba(0,0,0,.75);
    --sans:"Helvetica Neue",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
    --fade:1s cubic-bezier(.4,0,.2,1);
  }

  *{margin:0;padding:0;box-sizing:border-box}
  html,body{height:100%}

  body{
    font-family:var(--sans);
    background:var(--bg);
    color:var(--ink);
    overflow-x:hidden;
    -webkit-font-smoothing:antialiased;
    text-rendering:optimizeLegibility;
  }

  /* ============================================================
     LAYER 1 — LIVING BACKGROUND WALLPAPER (loops forever, never paused)
     ============================================================ */
  #bgLayer{
    position:fixed;
    inset:0;
    z-index:1;
    opacity:0;
    transition:opacity var(--fade);
    will-change:opacity;
  }
  #bgVideo{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    object-fit:cover;              /* fill the screen edge-to-edge, immersive */
    object-position:center top;    /* anchor the top so the ESIYNAB wordmark is never cropped */
    transform:translateZ(0);
  }
  /* legibility scrim baked into the background layer */
  #bgLayer::after{
    content:"";
    position:absolute;
    inset:0;
    background:
      radial-gradient(120% 90% at 50% 30%, transparent 0%, rgba(2,4,9,.55) 70%, rgba(2,4,9,.86) 100%),
      linear-gradient(180deg, rgba(2,4,9,.35) 0%, rgba(2,4,9,.65) 100%);
    pointer-events:none;
  }
  /* still-image wallpaper variant (per-page hero trials) — same
     edge-to-edge cover treatment and legibility scrim as the video */
  #bgLayer img{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:center top;
    transform:translateZ(0);
  }
  /* the landing shows the artwork with no text over it, so it can
     run a much lighter scrim than the content pages — lets the
     piece breathe with more light (user request 2026-08-07) */
  .landing #bgLayer::after{
    background:
      radial-gradient(120% 90% at 50% 30%, transparent 0%, rgba(2,4,9,.3) 70%, rgba(2,4,9,.58) 100%),
      linear-gradient(180deg, rgba(2,4,9,.16) 0%, rgba(2,4,9,.38) 100%);
  }
  body.entered #bgLayer{opacity:1}

  /* ============================================================
     LAYER 2 — CREST INTRO VIDEO (locked at z-index:2)
     ============================================================ */
  #introVideo{
    position:fixed;
    inset:0;
    z-index:2;
    width:100%;
    height:100%;
    object-fit:cover;
    opacity:1;
    transition:opacity var(--fade);
    will-change:opacity;
    transform:translateZ(0); /* hardware-accelerated crossfade */
  }
  body.entered #introVideo{
    opacity:0;
    pointer-events:none;
  }

  /* ============================================================
     ENTRANCE GATE — TAP TO ENTER BUTTON
     ============================================================ */
  #enterBtn{
    position:fixed;
    left:50%;
    bottom:14vh;    /* fallback */
    bottom:14dvh;   /* stable under mobile browser toolbars */
    transform:translateX(-50%);
    z-index:4;
    display:inline-flex;
    align-items:center;
    gap:.7em;
    padding:1.05rem 2.4rem;
    font-family:var(--sans);
    font-size:clamp(.72rem,1.7vw,.9rem);
    font-weight:600;
    letter-spacing:.32em;
    text-transform:uppercase;
    color:var(--ink);
    background:rgba(8,10,18,.42);
    border:1px solid rgba(255,255,255,.4);
    border-radius:999px;
    cursor:pointer;
    -webkit-backdrop-filter:blur(10px);
    backdrop-filter:blur(10px);
    box-shadow:0 12px 40px -12px rgba(0,0,0,.7), inset 0 0 0 1px rgba(255,255,255,.05);
    transition:opacity .5s ease, transform .5s ease, background .3s ease, border-color .3s ease;
    animation:breathe 2.6s ease-in-out infinite;
  }
  #enterBtn:hover{
    background:rgba(212,175,106,.16);
    border-color:var(--gold);
    color:var(--gold-soft);
  }
  #enterBtn::before{
    content:"";
    width:.55em;
    height:.55em;
    border-radius:50%;
    background:var(--gold);
    box-shadow:0 0 14px 2px rgba(212,175,106,.8);
  }
  #enterBtn.is-hidden{
    opacity:0;
    transform:translateX(-50%) translateY(10px);
    pointer-events:none;
    animation:none;
  }
  @keyframes breathe{
    0%,100%{box-shadow:0 12px 40px -12px rgba(0,0,0,.7), 0 0 0 0 rgba(212,175,106,.0)}
    50%{box-shadow:0 12px 40px -12px rgba(0,0,0,.7), 0 0 0 10px rgba(212,175,106,.08)}
  }

  /* ============================================================
     TOP-RIGHT SIGNATURE BADGE (branding_signature.png)
     ============================================================ */
  #signature{
    position:fixed;
    top:clamp(14px,2.4vw,30px);
    right:clamp(16px,2.6vw,40px);
    z-index:5;
    width:clamp(84px,12vw,150px);
    height:auto;
    opacity:0;
    transform:translateY(-6px);
    transition:opacity var(--fade), transform var(--fade);
    pointer-events:none;
    filter:drop-shadow(0 8px 24px rgba(0,0,0,.55));
  }
  /* comfortable resting offset — never clips off the top viewport edge */
  body.entered #signature{
    opacity:1;
    transform:translateY(0);
  }

  /* ============================================================
     NGOMANE FAMILY CREST WATERMARK — forced to the top layer
     ============================================================ */
  #crestWatermark{
    position:fixed;
    /* centre-pinned over the intro footage's bottom-right AI sparkle —
       the mark is baked into the 16:9 video (frame point x:1158/1280,
       y:597/720), so both offsets are derived from the frame and the
       50%/50% translate keeps the crest CENTRED on that point at any
       viewport width or browser-chrome height */
    bottom:calc(50vh - 18.52vw);
    right:9.53vw;
    left:auto;
    transform:translate(50%,50%);
    transition:right var(--fade), bottom var(--fade);
    z-index:9999; /* Highest possible layer weight */
    width:clamp(140px,15vw,185px);
    height:auto;
    pointer-events:none;
    opacity:0.95;
    filter:drop-shadow(0px 4px 20px rgba(0,0,0,0.85));
  }
  /* settled position — centred on the wallpaper's diamond AI mark
     (frame point x:1160/1280, y:605/720), riding just off the bottom
     edge, exactly per the owner's marked-up placement */
  body.entered #crestWatermark{
    bottom:calc(50vh - 19.14vw);
    right:9.375vw;
  }
  #crestWatermark img{ width:100%; height:auto; display:block; }

  /* ============================================================
     TOP-RIGHT DROPDOWN NAVIGATION (z-index 100, above all layers)
     ============================================================ */
  .nav-container{
    position:fixed;
    /* fluid clearance: identical on desktop (34vh @ 932px ≈ 320px) but keeps
       the trigger on-screen on short/landscape phones; safe-area for notches */
    top:clamp(120px, 34vh, 320px);
    right:max(40px, env(safe-area-inset-right));
    z-index:100;
  }
  #navMenu{
    opacity:0;
    pointer-events:none;
    transition:opacity var(--fade);
  }
  body.entered #navMenu{
    opacity:1;
    pointer-events:auto;
  }
  .nav-toggle{
    display:inline-flex;
    align-items:center;
    gap:.7em;
    padding:.72rem 1.2rem;
    font-family:var(--sans);
    font-size:.72rem;
    font-weight:600;
    letter-spacing:.24em;
    text-transform:uppercase;
    color:var(--ink);
    background:rgba(8,10,18,.55);
    border:1px solid rgba(212,175,55,.3);   /* thin gold accent border */
    border-radius:12px;
    cursor:pointer;
    -webkit-backdrop-filter:blur(12px);
    backdrop-filter:blur(12px);
    box-shadow:0 12px 36px -14px rgba(0,0,0,.8);
    transition:border-color .3s ease, background .3s ease, color .3s ease;
  }
  .nav-toggle:hover{
    border-color:var(--gold);
    color:var(--gold-soft);
    background:rgba(212,175,106,.12);
  }
  .nav-toggle .chev{
    width:11px;height:11px;
    transition:transform .3s ease;
  }
  #navMenu.open .nav-toggle .chev{transform:rotate(180deg)}
  #navMenu.open .nav-toggle{border-color:var(--gold);color:var(--gold-soft)}

  .nav-dropdown{
    position:absolute;
    top:calc(100% + 10px);
    right:0;
    min-width:330px;   /* wide enough for every title on one line */
    display:flex;
    flex-direction:column;
    background:rgba(8,10,18,.72);
    border:1px solid rgba(212,175,55,.3);
    border-radius:14px;
    -webkit-backdrop-filter:blur(16px);
    backdrop-filter:blur(16px);
    box-shadow:0 24px 60px -18px rgba(0,0,0,.85);
    overflow:hidden;
    opacity:0;
    transform:translateY(-8px);
    pointer-events:none;
    transition:opacity .3s ease, transform .3s ease;
  }
  #navMenu.open .nav-dropdown{
    opacity:1;
    transform:translateY(0);
    pointer-events:auto;
  }
  a.nav-link{text-decoration:none}
  .nav-link{
    position:relative;
    display:flex;
    flex-direction:column;
    gap:.18rem;
    text-align:left;
    padding:.95rem 1.15rem;
    background:none;
    border:none;
    cursor:pointer;
    color:var(--ink);
    font-family:var(--sans);
    transition:background .25s ease, color .25s ease;
  }
  .nav-link + .nav-link{border-top:1px solid var(--hairline)}
  .nav-link:hover{background:rgba(212,175,106,.1);color:var(--gold-soft)}
  .nav-link .nl-title{font-size:.92rem;font-weight:600;letter-spacing:.02em}
  .nav-link .nl-sub{font-size:.68rem;letter-spacing:.06em;color:var(--muted)}
  .nav-link.current{color:var(--gold-soft)}
  .nav-link.current::before{
    content:"";
    position:absolute;
    left:0;top:50%;transform:translateY(-50%);
    width:3px;height:62%;border-radius:2px;
    background:var(--gold);
  }

  /* while the menu is open it must float above the crest watermark
     (z-index 9999), or the dropdown's lower rows hide behind it */
  #navMenu.open{z-index:10001}

  /* ============================================================
     MENU — ESIYNAB digital control surface (approved proposal v1)
     Open ~600ms: trigger flash > frame draws from top-right >
     glass materialises > one scan pass > traces flash & settle >
     six items cascade > active rail ignites last, then breathes.
     Close ~300ms reversed. Transform/opacity only; reduced-motion
     collapses everything via the global rule.
     ============================================================ */
  :root{
    --cyan:#57e6ff;
    --cyan-soft:rgba(87,230,255,.45);
  }
  .nav-toggle{
    position:relative;
    overflow:hidden;
    box-shadow:0 12px 36px -14px rgba(0,0,0,.8), inset 0 0 12px rgba(87,230,255,.08);
  }
  .nav-toggle::before{
    content:"";
    position:absolute;
    left:10%;right:10%;bottom:3px;height:1px;
    background:linear-gradient(90deg, transparent, rgba(87,230,255,.55) 30%, rgba(212,175,106,.6) 70%, transparent);
    opacity:.55;
    pointer-events:none;
  }
  .nav-toggle::after{
    content:"";
    position:absolute;
    inset:0;
    border-radius:inherit;
    box-shadow:inset 0 0 18px rgba(87,230,255,.3), 0 0 22px rgba(212,175,106,.24);
    opacity:0;
    pointer-events:none;
    animation:nav-pulse 6s ease-in-out infinite;
  }
  @keyframes nav-pulse{
    0%,86%,100%{opacity:0}
    92%{opacity:1}
  }
  .nav-toggle.flash{animation:nav-flash .18s ease-out 1}
  @keyframes nav-flash{
    40%{box-shadow:0 0 26px rgba(87,230,255,.55), inset 0 0 16px rgba(212,175,106,.5)}
  }
  .nav-toggle:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
  .nav-link:focus-visible{outline:2px solid var(--gold);outline-offset:-2px;background:rgba(212,175,106,.12)}
  .nd-close:focus-visible{outline:2px solid var(--gold);outline-offset:2px}

  .nav-dropdown{
    transform-origin:top right;
    transform:translateY(-6px) scale(.98);
    background:rgba(6,9,16,.78);
    box-shadow:0 24px 60px -18px rgba(0,0,0,.9), inset 0 0 34px rgba(2,4,9,.55);
    transition:opacity .16s ease .04s, transform .2s cubic-bezier(.4,0,.2,1) .04s;
  }
  #navMenu.open .nav-dropdown{transform:translateY(0) scale(1)}

  .nd-fx{position:absolute;inset:0;pointer-events:none;border-radius:inherit;overflow:hidden}
  .nd-fx i{position:absolute;display:block}
  .nd-e-t,.nd-e-b{left:0;right:0;height:1px;transform:scaleX(0)}
  .nd-e-l,.nd-e-r{top:0;bottom:0;width:1px;transform:scaleY(0)}
  .nd-e-t{top:0;transform-origin:right center;background:linear-gradient(270deg,var(--cyan-soft),rgba(212,175,106,.6))}
  .nd-e-r{right:0;transform-origin:center top;background:linear-gradient(180deg,var(--cyan-soft),rgba(212,175,106,.6))}
  .nd-e-b{bottom:0;transform-origin:right center;background:linear-gradient(270deg,rgba(212,175,106,.6),var(--cyan-soft))}
  .nd-e-l{left:0;transform-origin:center bottom;background:linear-gradient(0deg,var(--cyan-soft),rgba(212,175,106,.6))}
  .nd-e-t,.nd-e-r{transition:transform .09s ease}
  .nd-e-b,.nd-e-l{transition:transform .09s ease .06s}
  #navMenu.open .nd-e-t,#navMenu.open .nd-e-b{transform:scaleX(1)}
  #navMenu.open .nd-e-l,#navMenu.open .nd-e-r{transform:scaleY(1)}
  .nd-corner{width:9px;height:9px;opacity:0;transition:opacity .12s ease .12s}
  .nd-c-tl{top:3px;left:3px;border-top:2px solid var(--gold);border-left:2px solid var(--gold)}
  .nd-c-tr{top:3px;right:3px;border-top:2px solid var(--gold);border-right:2px solid var(--gold)}
  .nd-c-bl{bottom:3px;left:3px;border-bottom:2px solid var(--gold);border-left:2px solid var(--gold)}
  .nd-c-br{bottom:3px;right:3px;border-bottom:2px solid var(--gold);border-right:2px solid var(--gold)}
  #navMenu.open .nd-corner{opacity:.8}
  .nd-grid{
    inset:0;opacity:0;transition:opacity .25s ease .1s;
    background:
      repeating-linear-gradient(0deg, rgba(87,230,255,.03) 0 1px, transparent 1px 9px),
      repeating-linear-gradient(90deg, rgba(212,175,106,.022) 0 1px, transparent 1px 14px);
  }
  #navMenu.open .nd-grid{opacity:1}
  .nd-scan{
    left:0;right:0;top:-14%;height:16%;opacity:0;
    background:linear-gradient(180deg,transparent,rgba(87,230,255,.16) 45%,rgba(87,230,255,.34) 50%,rgba(87,230,255,.16) 55%,transparent);
  }
  #navMenu.open .nd-scan{animation:nd-scan .2s ease-out .12s 1 both}
  @keyframes nd-scan{
    0%{transform:translateY(0);opacity:0}
    15%{opacity:1}
    85%{opacity:1}
    100%{transform:translateY(760%);opacity:0}
  }
  .nd-trace{
    top:12px;bottom:12px;width:1px;left:6px;opacity:0;
    background:linear-gradient(180deg,transparent,var(--cyan-soft) 30%,rgba(212,175,106,.45) 70%,transparent);
  }
  .nd-trace-2{left:auto;right:6px}
  #navMenu.open .nd-trace{animation:nd-trace .34s ease .16s 1 both}
  @keyframes nd-trace{
    0%{opacity:0}
    45%{opacity:.75}
    100%{opacity:.16}
  }

  .nav-dropdown .nav-link{
    opacity:0;
    transform:translateX(14px);
    transition:opacity .18s ease, transform .18s ease, background .22s ease, color .22s ease;
  }
  #navMenu.open .nav-dropdown .nav-link{opacity:1;transform:none}
  #navMenu.open .nav-dropdown a.nav-link:nth-of-type(1){transition-delay:.2s}
  #navMenu.open .nav-dropdown a.nav-link:nth-of-type(2){transition-delay:.256s}
  #navMenu.open .nav-dropdown a.nav-link:nth-of-type(3){transition-delay:.312s}
  #navMenu.open .nav-dropdown a.nav-link:nth-of-type(4){transition-delay:.368s}
  #navMenu.open .nav-dropdown a.nav-link:nth-of-type(5){transition-delay:.424s}
  #navMenu.open .nav-dropdown a.nav-link:nth-of-type(6){transition-delay:.48s}

  .nav-link::after{
    content:"";
    position:absolute;
    left:1.15rem;right:1.15rem;bottom:8px;height:1px;
    background:linear-gradient(90deg,var(--cyan-soft),rgba(212,175,106,.8) 82%,#ffe9bd 96%,transparent);
    transform:scaleX(0);
    transform-origin:left center;
    transition:transform .26s ease;
    pointer-events:none;
  }
  .nav-link:hover::after,.nav-link:focus-visible::after{transform:scaleX(1)}

  .nav-link.current::before{
    opacity:0;
    transition:opacity .2s ease;
    box-shadow:0 0 10px rgba(212,175,106,.75);
  }
  #navMenu.open .nav-link.current::before{
    opacity:1;
    transition-delay:.54s;
    animation:nd-rail 3.5s ease-in-out .7s infinite;
  }
  @keyframes nd-rail{
    0%,100%{opacity:1}
    50%{opacity:.55}
  }

  /* menu titles speak terminal — digital mono, decode shimmer on open.
     Two muted tones only, no flashing, resolves left-to-right. */
  .nav-link .nl-title{
    font-family:"SF Mono",ui-monospace,Menlo,Consolas,monospace;
    letter-spacing:.06em;
  }
  .nl-title .dg1{color:var(--cyan);opacity:.7}
  .nl-title .dg2{color:var(--gold-soft);opacity:.7}

  .nd-close{
    display:none;
    position:absolute;
    top:10px;right:12px;
    width:38px;height:38px;
    font-size:1.5rem;line-height:1;
    color:var(--ink);
    background:rgba(8,10,18,.4);
    border:1px solid rgba(212,175,55,.3);
    border-radius:10px;
    cursor:pointer;
  }

  /* short laptop screens: lift the trigger and let the panel scroll
     so all six entries stay reachable */
  /* short viewports at any width: let the panel scroll rather than clip */
  @media (max-height:800px) and (min-width:769px){
    .nav-dropdown{max-height:calc(100dvh - 230px);overflow-y:auto}
  }

  @media (max-width:768px){
    .nav-dropdown{
      position:fixed;
      top:0;right:0;bottom:0;
      height:100vh;   /* fallback for engines without dvh */
      height:100dvh;
      width:min(86vw,380px);
      min-width:0;
      border-radius:0;
      padding-top:58px;
      padding-top:calc(58px + env(safe-area-inset-top));
      overflow-y:auto;
      transform:translateX(24px);
    }
    #navMenu.open .nav-dropdown{transform:translateX(0)}
    .nd-close{display:block}
    body.nav-locked{overflow:hidden}
  }

  /* ============================================================
     LAYER 3 — CONTENT SHELL (viewport-locked, no external overflow)
     ============================================================ */
  .content-shell{
    position:relative;
    z-index:3;
    display:flex;
    flex-direction:column;
    gap:0;
    width:100%;
    max-width:1180px;
    height:100vh;
    height:100dvh;
    max-height:100dvh;
    margin:0 auto;
    padding:20px 24px;
    opacity:0;
    visibility:hidden;
    transition:opacity var(--fade), visibility var(--fade);
    will-change:opacity;
  }
  body.entered .content-shell{
    opacity:1;
    visibility:visible;
  }

  /* ---------- brand hero (wordmark ensemble) ----------
     Hidden by default: the home view is the living artwork, unobstructed.
     The ensemble appears only on the Biography page. */
  .hero-header{
    flex:0 0 auto;
    max-height:0;
    margin:0;
    opacity:0;
    transform:translateY(-10px);
    pointer-events:none;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    text-align:center;
    gap:.4rem;
    overflow:hidden;
    transition:max-height var(--fade), opacity var(--fade), margin var(--fade), transform var(--fade);
  }
  body[data-view="bio"] .hero-header,
  body[data-view="home"] .hero-header{
    max-height:22vh;
    margin-top:40px;      /* push the wordmark safely down from the top viewport edge */
    margin-bottom:16px;
    opacity:1;
    transform:none;
    pointer-events:auto;
  }
  .eyebrow{
    font-size:clamp(.62rem,1.4vw,.72rem);
    font-weight:600;
    letter-spacing:.36em;
    text-transform:uppercase;
    color:var(--gold);
  }
  .wordmark{
    font-size:clamp(1.9rem,5.2vw,3.4rem);
    font-weight:700;
    letter-spacing:.14em;
    line-height:1;
    background:linear-gradient(180deg,#fff 0%,var(--gold-soft) 60%,var(--gold) 100%);
    -webkit-background-clip:text;
    background-clip:text;
    -webkit-text-fill-color:transparent;
    color:transparent;
  }
  .role{
    font-size:clamp(.72rem,1.5vw,.9rem);
    letter-spacing:.24em;
    text-transform:uppercase;
    color:var(--muted);
  }

  /* ============================================================
     STAGE — holds the swappable view-panels (one visible)
     ============================================================ */
  .stage{
    display:flex;
    flex-direction:column;
    flex:1 1 auto;
    min-height:0;
  }

  /* ---------- view-panel grouping (isolated channels, no stacking) ---------- */
  .view-panel{
    display:none;
    opacity:0;
    flex:1 1 auto;
    min-height:0;
    transition:opacity var(--fade);
    will-change:opacity;
    transform:translateZ(0);          /* hardware-accelerated crossfade */
  }
  .view-panel.is-active{
    display:block;
    opacity:1;
  }
  .view-panel > .glass-card{
    height:100%;
    max-width:760px;
    margin:0 auto;
  }
  /* the companies directory runs wider so cards sit side-by-side */
  #panel-companies > .glass-card{max-width:1060px}

  /* ---------- frosted-glass card ---------- */
  .glass-card{
    position:relative;
    min-height:0;
    display:flex;
    flex-direction:column;
    background:var(--glass);
    border:1px solid var(--glass-edge);
    border-radius:20px;
    padding:clamp(18px,1.9vw,28px);
    -webkit-backdrop-filter:blur(12px);
    backdrop-filter:blur(12px);
    box-shadow:var(--shadow);
    overflow:hidden;
  }
  .glass-card::before{ /* top hairline sheen */
    content:"";
    position:absolute;
    inset:0 0 auto 0;
    height:1px;
    background:linear-gradient(90deg,transparent,rgba(255,255,255,.5),transparent);
    opacity:.6;
  }

  /* fixed card heading — never scrolls */
  .card-title{
    flex:0 0 auto;
    font-size:clamp(1.02rem,1.5vw,1.3rem);
    font-weight:600;
    letter-spacing:.04em;
    padding-bottom:.85rem;
    margin-bottom:.9rem;
    border-bottom:1px solid var(--hairline);
  }

  /* ---------- the only scrollable surface inside each card ---------- */
  .scrollable-body{
    flex:1 1 auto;
    min-height:0;
    overflow-y:auto;
    overflow-x:hidden;
    padding-right:8px;
    scrollbar-width:thin;
    scrollbar-color:rgba(212,175,106,.45) transparent;
    -webkit-overflow-scrolling:touch;
  }
  .scrollable-body::-webkit-scrollbar{width:7px}
  .scrollable-body::-webkit-scrollbar-track{background:transparent}
  .scrollable-body::-webkit-scrollbar-thumb{
    background:rgba(212,175,106,.38);
    border-radius:10px;
  }
  .scrollable-body::-webkit-scrollbar-thumb:hover{background:rgba(212,175,106,.6)}

  /* ---- biography ---- */
  .bio-copy{
    font-size:clamp(.94rem,1.25vw,1.04rem);
    line-height:1.72;
    color:#d9dbe4;
  }
  .bio-copy + .bio-copy{margin-top:1rem}
  .bio-copy strong{color:var(--ink);font-weight:600}

  /* ---------- panoramic image box — sinks to the bottom of the bio body ---------- */
  .profile-card .scrollable-body{display:flex;flex-direction:column}
  .profile-banner-box{
    flex:0 0 auto;
    width:100%;
    height:clamp(150px,24vh,220px);
    margin:auto 0 0;        /* margin-top:auto pushes it to the absolute bottom, clearing the centre */
    border-radius:12px;
    overflow:hidden;
    border:1px solid rgba(212,175,106,.25);
    background:rgba(255,255,255,.03);
  }
  .profile-banner{
    display:block;
    width:100%;
    height:100%;
    object-fit:cover;
  }

  /* ---- professional timeline ---- */
  .timeline-lead{
    font-size:.86rem;
    letter-spacing:.04em;
    color:var(--muted);
    margin-bottom:1.4rem;
  }
  .timeline{list-style:none;display:flex;flex-direction:column;gap:1.1rem}
  .timeline li{
    position:relative;
    padding-left:1.1rem;
    border-left:1px solid var(--hairline);
  }
  .timeline li::before{
    content:"";
    position:absolute;
    left:-4px;top:.3rem;
    width:7px;height:7px;border-radius:50%;
    background:var(--gold);
    box-shadow:0 0 10px 1px rgba(212,175,106,.6);
  }
  .timeline .yr{
    display:block;
    font-size:.7rem;letter-spacing:.16em;
    color:var(--gold);
  }
  .timeline .tl-role{
    display:block;margin-top:.18rem;
    font-size:.98rem;font-weight:600;color:var(--ink);
  }
  .timeline .tl-org{
    display:block;margin-top:.12rem;
    font-size:.84rem;line-height:1.45;color:var(--muted);
  }

  /* ============================================================
     HOME CONTACTS — three-column span: mobile LEFT · email CENTRE · web RIGHT
     ============================================================ */
  .profile-contacts{
    flex:0 0 auto;
    margin-top:1.1rem;
    padding-top:1.1rem;
    border-top:1px solid var(--hairline);
    display:grid;
    grid-template-columns:1fr 1fr 1fr;
    align-items:center;
    gap:1rem;
    width:100%;
  }
  .profile-contacts a{
    display:flex;
    flex-direction:column;
    gap:.16rem;
    color:var(--ink);
    text-decoration:none;
    font-size:.92rem;
    letter-spacing:.01em;
    transition:color .3s ease;
  }
  .profile-contacts a:hover{color:var(--gold-soft)}
  .profile-contacts a:nth-child(1){justify-self:start;align-items:flex-start;text-align:left}
  .profile-contacts a:nth-child(2){justify-self:center;align-items:center;text-align:center}
  .profile-contacts a:nth-child(3){justify-self:end;align-items:flex-end;text-align:right}
  .profile-contacts small{
    font-size:.62rem;
    letter-spacing:.2em;
    text-transform:uppercase;
    color:var(--gold);
  }

  /* ============================================================
     COMPANIES DIRECTORY — itemised, side-by-side grid
     ============================================================ */
  .portfolio-grid{
    display:grid;
    grid-template-columns:repeat(auto-fill,minmax(300px,1fr));
    gap:14px;
    align-items:stretch;
  }
  .venture{
    display:flex;
    flex-direction:column;
    padding:1.1rem 1.2rem;
    border-radius:14px;
    background:rgba(255,255,255,.03);
    border:1px solid var(--hairline);
    transition:background .35s ease, border-color .35s ease, transform .35s ease;
  }
  .venture:hover{
    background:rgba(212,175,106,.07);
    border-color:rgba(212,175,106,.3);
    transform:translateY(-2px);
  }
  .venture-head{
    display:flex;
    align-items:center;
    gap:.8rem;
    margin-bottom:.75rem;
  }
  /* ---- logo frame + active zoom engine (click to expand 300%) ---- */
  .venture-logo{
    width:48px;height:48px;flex:0 0 auto;
    object-fit:contain;
    border-radius:10px;
    background:rgba(255,255,255,.06);
    border:1px solid var(--hairline);
    padding:5px;
    cursor:pointer;
    position:relative;
    transition:transform 0.4s ease;
  }
  .venture-logo.zoomed{
    position:fixed;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%) scale(3.0);  /* absolute-centred 300% expansion */
    z-index:10000;                               /* above the frosted-glass pane and crest */
    background:rgba(10,13,22,.92);
    box-shadow:0 30px 90px -10px rgba(0,0,0,.9);
  }
  .venture-id{min-width:0}
  .venture .name{
    margin:0;
    font-size:1rem;
    font-weight:600;
    letter-spacing:.01em;
    line-height:1.25;
    color:var(--ink);
  }
  .venture .tag{
    display:block;
    margin-top:.22rem;
    font-size:.58rem;
    letter-spacing:.16em;
    line-height:1.4;
    text-transform:uppercase;
    color:var(--gold);
  }
  .venture .desc{
    font-size:.82rem;
    line-height:1.55;
    color:#cdd2dd;
  }
  .venture .caps{
    margin-top:.6rem;
    font-size:.76rem;
    line-height:1.5;
    color:var(--muted);
  }
  .venture .caps strong{
    display:block;
    margin-bottom:.2rem;
    font-size:.6rem;
    letter-spacing:.16em;
    text-transform:uppercase;
    color:var(--gold-soft);
    font-weight:600;
  }
  .venture-contact{
    margin-top:.85rem;
    padding-top:.7rem;
    border-top:1px solid var(--hairline);
    display:flex;
    flex-direction:column;
    gap:.25rem;
  }
  .venture-contact a{
    font-size:.76rem;
    letter-spacing:.01em;
    color:var(--muted);
    text-decoration:none;
    transition:color .3s ease;
    word-break:break-word;
  }
  .venture-contact a:hover{color:var(--gold-soft)}

  /* ============================================================
     EXTRACURRICULAR ACTIVITIES
     ============================================================ */
  .extra-block{margin-bottom:1.7rem}
  .extra-block:last-child{margin-bottom:0}
  .extra-head{
    font-size:.7rem;
    letter-spacing:.2em;
    text-transform:uppercase;
    color:var(--gold);
    font-weight:600;
    margin-bottom:.5rem;
  }
  .extra-block p{
    font-size:.92rem;
    line-height:1.68;
    color:#cdd2dd;
  }

  /* ============================================================
     RESPONSIVE
     ============================================================ */
  @media (max-width:560px){
    .content-shell{padding:16px 16px}
    #enterBtn{bottom:11vh;bottom:11dvh;padding:.95rem 1.9rem;letter-spacing:.26em}
    .portfolio-grid{grid-template-columns:1fr}
  }

  /* phones, tablets and any portrait device: the videos' right edge (and its
     baked-in marks) is cropped off-screen, and the 16:9 centre-pin formula
     no longer applies — return the crest to a plain corner anchor */
  @media (max-width:768px), (orientation:portrait){
    #crestWatermark, body.entered #crestWatermark{
      right:max(4vw, env(safe-area-inset-right));
      bottom:max(2.5vh, env(safe-area-inset-bottom));
      transform:none;
    }
  }

  @media (prefers-reduced-motion:reduce){
    *{animation:none !important;transition-duration:.001ms !important}
  }

  /* ============================================================
     HOME / CONTACTS — details on top, portrait below, per mock-up
     ============================================================ */
  .view-panel > .glass-card.contact-card{
    max-width:460px;
    margin:0;
    height:auto;          /* card ends where the content ends */
    max-height:100%;
  }
  .contact-card .scrollable-body{padding-right:0}
  .contact-list{display:flex;flex-direction:column;gap:1.1rem;margin:1.2rem 0 1.6rem}
  .contact-list a{
    display:flex;flex-direction:column;gap:.22rem;
    color:var(--ink);text-decoration:none;font-size:1.05rem;letter-spacing:.02em;
    transition:color .25s ease;
  }
  .contact-list a:hover{color:var(--gold-soft)}
  .contact-list a small{
    font-size:.66rem;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--gold);
  }
  .contact-photo-box{
    border:1px solid var(--hairline);border-radius:14px;overflow:hidden;
    box-shadow:0 18px 44px -18px rgba(0,0,0,.8);
  }
  .contact-photo{width:100%;height:auto;display:block}

  /* ============================================================
     COMPANIES — one venture at a time. Logo + brief pinned on top;
     click the logo to expand the full brief; auto-advance runs on
     a 5s cadence and pauses while a slide is expanded. Arrows and
     ArrowUp/ArrowDown step manually.
     ============================================================ */
  .companies-card .portfolio-grid{display:block}
  .companies-card .venture{display:none}
  .companies-card .venture.active{
    display:block;
    opacity:0;
    transform:translateY(26px);
    transition:opacity .5s cubic-bezier(.4,0,.2,1), transform .5s cubic-bezier(.4,0,.2,1);
  }
  .companies-card .venture.active.in{opacity:1;transform:none}
  .companies-card .venture-head{cursor:pointer}
  .view-panel > .glass-card.companies-card{max-width:640px;margin:0}
  .companies-card .venture-logo{
    width:96px;
    height:auto;
    transition:width .5s cubic-bezier(.4,0,.2,1);
  }
  /* the reveal: tap the logo and it pops out full size while the
     text steps down beneath it */
  .companies-card .venture.expanded .venture-head{
    flex-direction:column;
    align-items:center;
    text-align:center;
    gap:.9rem;
  }
  .companies-card .venture.expanded .venture-logo{width:min(340px,62%)}
  .companies-card .v-details{max-height:0;overflow:hidden;transition:max-height .6s cubic-bezier(.4,0,.2,1)}
  .companies-card .venture.expanded .v-details{max-height:3000px}  /* one static panel — full histories, no clipping */
  .companies-card .venture-head{flex-wrap:wrap}
  .v-hint{
    flex-basis:100%;
    font-size:.64rem;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);
    margin-top:.6rem;transition:opacity .3s ease;
  }
  .venture.expanded .v-hint{opacity:0}
  .slide-nav{
    position:absolute;right:14px;top:50%;transform:translateY(-50%);
    display:flex;flex-direction:column;align-items:center;gap:.55rem;z-index:3;
  }
  .slide-nav button{
    width:38px;height:38px;border-radius:10px;cursor:pointer;
    color:var(--ink);background:rgba(8,10,18,.55);
    border:1px solid rgba(212,175,55,.3);
    transition:border-color .25s ease, color .25s ease, background .25s ease;
  }
  .slide-nav button:hover{border-color:var(--gold);color:var(--gold-soft);background:rgba(212,175,106,.12)}
  .slide-nav button:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
  .slide-counter{
    font-size:.66rem;letter-spacing:.14em;color:var(--muted);font-variant-numeric:tabular-nums;
  }

  /* ============================================================
     BIOGRAPHY — text lives on the artwork's black void (left),
     portrait beneath it; crest and signature rest on this page;
     menu rides high in the freed top-right corner
     ============================================================ */
  body[data-view="bio"] .view-panel > .glass-card{max-width:560px;margin:0}
  /* the TANDWA / NGOMANE ensemble sits directly on top of the bio card,
     left-aligned with it — not centred over the artwork */
  body[data-view="bio"] .hero-header{
    align-items:flex-start;
    text-align:left;
    max-width:560px;
    padding-left:1.5rem;   /* two spaces right — lines up with the story text */
  }
  /* the signature line rests centred beneath the photograph */
  body[data-view="bio"] .profile-contacts{display:flex;grid-template-columns:none;justify-content:center}
  body[data-view="bio"] .bio-sign{flex:0 1 auto;width:auto}
  body[data-view="bio"] #crestWatermark{display:none}
  body[data-view="bio"] .nav-container{top:28px}
  .bio-sign{
    display:block;
    flex:1;
    width:100%;
    white-space:nowrap;
    text-align:center;
    font-size:.85rem;
    font-weight:600;
    letter-spacing:.26em;
    text-transform:uppercase;
    color:var(--gold-soft);
  }

  /* ============================================================
     RESPONSIVE / ACCESSIBILITY HARDENING (2026-08-07 audit)
     ============================================================ */
  /* long emails and URLs must never force horizontal overflow */
  .venture-contact a, .contact-list a, .profile-contacts a{overflow-wrap:anywhere}
  /* flex text column may shrink below its content width */
  .venture-id{min-width:0}
  /* visible keyboard focus for in-content links */
  main a:focus-visible{outline:2px solid var(--gold);outline-offset:2px;border-radius:4px}
  /* screen-reader-only utility */
  .sr-only{
    position:absolute;width:1px;height:1px;padding:0;margin:-1px;
    overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
  }
  /* comfortable touch targets on coarse pointers only */
  @media (pointer:coarse){
    .nav-toggle{padding:.85rem 1.35rem}
    .slide-nav button, .nd-close{width:44px;height:44px}
    .nav-dropdown .nav-link{padding:1.05rem 1.15rem}
  }
  /* notched-device breathing room for the signature badge */
  #signature{right:max(clamp(16px,2.6vw,40px), env(safe-area-inset-right))}
  /* very large displays: keep the composition deliberate, not stretched */
  @media (min-width:2560px){
    html{font-size:17.5px}
    .content-shell{max-width:1440px}
  }

  /* ============================================================
     PROFESSIONAL EXPERIENCE (timeline page) — six glass cards over
     the businesshands wallpaper; logos ride a light chip so every
     corporate mark stays legible on dark glass. 3 / 2 / 1 columns.
     ============================================================ */
  /* wide grid card leaves clearance for the mid-right menu trigger */
  body[data-view="timeline"] .view-panel > .glass-card{max-width:min(1140px, calc(100vw - 300px))}
  @media (max-width:1024px){
    body[data-view="timeline"] .view-panel > .glass-card{max-width:100%}
  }
  .exp-grid{
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    gap:clamp(12px, 1.4vw, 20px);
    margin-top:.5rem;
  }
  .exp-card{
    display:flex;
    flex-direction:column;
    gap:.45rem;
    min-width:0;
    background:rgba(8,10,18,.52);
    border:1px solid var(--hairline);
    border-radius:14px;
    padding:1.05rem 1.1rem;
    -webkit-backdrop-filter:blur(8px);
    backdrop-filter:blur(8px);
  }
  .exp-logo-box{
    height:72px;
    display:flex;
    align-items:center;
    background:rgba(244,241,233,.94);
    border-radius:10px;
    padding:8px 12px;
    margin-bottom:.3rem;
  }
  .exp-logo-box img{
    max-height:100%;
    max-width:100%;
    width:auto;
    height:auto;
    object-fit:contain;
    display:block;
    margin:0 auto;
  }
  .exp-name{font-size:1.02rem;font-weight:600;letter-spacing:.02em;color:var(--ink)}
  .exp-period{font-size:.7rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--gold)}
  .exp-role{font-size:.82rem;letter-spacing:.05em;color:var(--gold-soft)}
  .exp-desc{font-size:.88rem;line-height:1.62;color:#cdd2dd;overflow-wrap:break-word}
  @media (max-width:1024px){
    .exp-grid{grid-template-columns:repeat(2, 1fr)}
  }
  @media (max-width:640px){
    .exp-grid{grid-template-columns:1fr}
  }

  /* tablets & phones: full-width cards would collide with a mid-height
     trigger — the menu rides in the top-right corner instead */
  @media (max-width:1024px){
    .nav-container{top:72px}   /* below the signature badge, above card body text */
  }

  /* ============================================================
     DIRECTORY STRUCTURE PASS (2026-08-08)
     ============================================================ */
  /* menu titles never wrap — the panel is wide enough for one line */
  .nav-dropdown .nl-title{white-space:nowrap}
  @media (max-width:768px){
    .nav-dropdown{width:min(92vw,380px)}
  }
  /* tiniest phones: allow graceful wrap rather than clipping */
  @media (max-width:359px){
    .nav-dropdown .nl-title{white-space:normal}
  }
  /* trademark rendered by the display layer — consistent on all 20,
     never contaminating the underlying company data */
  .companies-card .venture-id .name::after{
    content:"\2122";
    font-size:.58em;
    vertical-align:super;
    line-height:0;
    margin-left:.12em;
    opacity:.85;
  }
  /* division/subclassification relationship line */
  .v-rel{
    font-size:.72rem;
    letter-spacing:.04em;
    line-height:1.45;
    color:var(--muted);
    font-style:italic;
    margin-top:.25rem;
  }
  /* the description's new heading mirrors the Core Capabilities label */
  .venture .desc strong{
    display:block;
    font-size:.68rem;
    font-weight:600;
    letter-spacing:.2em;
    text-transform:uppercase;
    color:var(--gold);
    margin-bottom:.3rem;
  }

  /* ============================================================
     COMPANY LINKS block — labelled rows per the red-pen style
     ============================================================ */
  .vc-head{
    font-size:.68rem;
    font-weight:600;
    letter-spacing:.2em;
    text-transform:uppercase;
    color:var(--gold);
    margin-bottom:.45rem;
  }
  .vc-row{margin:.22rem 0;font-size:.9rem}
  .vc-row small{
    display:inline-block;
    min-width:5.4rem;
    font-size:.66rem;
    font-weight:600;
    letter-spacing:.18em;
    text-transform:uppercase;
    color:var(--muted);
  }
  .vc-row a{color:var(--ink);text-decoration:none;overflow-wrap:anywhere;transition:color .25s ease}
  .vc-row a:hover{color:var(--gold-soft)}

  /* standardised legal disclaimer at the foot of every company record.
     Heading uses the site's existing muted-gold accent (never white),
     bold + underlined + uppercase so it reads as a formal notice
     rather than decoration. Body stays subordinate but comfortably
     legible against the dark glass card. */
  .v-waiver-head{
    margin-top:1rem;
    padding-top:.85rem;
    border-top:1px solid var(--hairline);
    font-size:.7rem;
    font-weight:700;
    letter-spacing:.16em;
    text-transform:uppercase;
    text-decoration:underline;
    text-underline-offset:3px;
    color:var(--gold);
  }
  .v-waiver{
    margin-top:.5rem;
    font-size:.72rem;
    line-height:1.6;
    font-style:italic;
    color:#b9bfcc;          /* lifted from --muted for comfortable reading */
  }
  .v-waiver + .v-waiver{margin-top:.45rem}

  /* ECA interim: the triptych artwork IS the page — the old content
     card is preserved in markup, hidden until today's revamp */
  /* ============================================================
     EXTRA-CURRICULAR — the triptych leads uncropped; three stories
     sit beneath their panels. The page flows and scrolls naturally.
     ============================================================ */
  body[data-view="extra"] #bgLayer::after{display:none}
  body[data-view="extra"] .content-shell{
    display:block;
    height:auto;
    max-height:none;
    overflow:visible;
    padding-top:96px;    /* clearance beneath the signature badge */
    padding-bottom:64px;
  }
  body[data-view="extra"] .view-panel{display:block;opacity:1}
  .eca-hero{
    width:100%;
    height:auto;
    display:block;
    border-radius:16px;
    border:1px solid var(--hairline);
    box-shadow:var(--shadow);
  }
  .eca-grid{
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    gap:clamp(14px, 1.6vw, 24px);
    margin-top:clamp(14px, 1.6vw, 24px);
  }
  .eca-card{
    background:rgba(8,10,18,.55);
    border:1px solid var(--hairline);
    border-radius:14px;
    padding:1.3rem 1.35rem;
    -webkit-backdrop-filter:blur(8px);
    backdrop-filter:blur(8px);
  }
  .eca-card h2{
    font-size:.78rem;
    font-weight:600;
    letter-spacing:.22em;
    text-transform:uppercase;
    color:var(--gold);
    margin-bottom:.7rem;
  }
  .eca-card p{font-size:.92rem;line-height:1.68;color:#cdd2dd;margin:0 0 .8rem}
  .eca-card p:last-child{margin-bottom:0}
  @media (max-width:1024px){
    .eca-grid{grid-template-columns:1fr}
  }

  /* ============================================================
     ENTRANCE STAGE  (2026-08-11)
     Three rules the owner set in red pen, solved together:
       1. DO NOT CUT   — the artwork lives in a centred 16:9 stage,
                         so the complete frame always renders.
       2. NO BLACK BG  — the surround is filled with the artwork's
                         OWN measured edge tone rgb(16,23,24), not
                         flat black, so the seam disappears.
       3. DO NOT BLOCK — the crest, signature and menu anchor to the
                         STAGE, so they can never float in dead space
                         or straddle the artwork's edge.
     Scoped to body.landing: no other page is affected.
     ============================================================ */
  @media (orientation:landscape){
    body.landing{
      /* largest 16:9 box that fits the viewport, and its offsets */
      --stage-w:min(100vw, calc(100vh * 16 / 9));
      --stage-h:min(100vh, calc(100vw * 9 / 16));
      --stage-x:calc((100vw - var(--stage-w)) / 2);
      --stage-y:calc((100vh - var(--stage-h)) / 2);
      /* surround tuned to the artwork's sampled edge colour so the
         letterbox reads as depth, never as a black bar */
      background:radial-gradient(130% 110% at 50% 50%,
                 #101718 0%, #0b1013 52%, #070a0e 100%);
    }
    body.landing #introVideo,
    body.landing #bgLayer video{
      left:var(--stage-x);
      top:var(--stage-y);
      right:auto;
      bottom:auto;
      width:var(--stage-w);
      height:var(--stage-h);
      object-fit:contain;      /* box is already 16:9 — nothing is cropped */
      background:transparent;
    }
    /* the legibility scrim stays on the artwork, never on the surround */
    body.landing #bgLayer::after{
      left:var(--stage-x);
      top:var(--stage-y);
      right:auto;
      bottom:auto;
      width:var(--stage-w);
      height:var(--stage-h);
    }
    /* XNOSTRA and MENU deliberately stay in the blended surround,
       OFF the artwork, so they can never cover the ESIYNAB flag or
       its wordmark. The surround is no longer black, so they read as
       intentional framing rather than floating in a void. */
    body.landing #enterBtn{
      bottom:calc(var(--stage-y) + var(--stage-h) * 0.13);
    }
    /* crest pinned to the artwork's own diamond mark —
       frame point (1160,605) of the 1280x720 master, so it holds
       that spot at every window shape instead of one fixed size */
    body.landing.entered #crestWatermark{
      right:calc(var(--stage-x) + var(--stage-w) * 0.09375);
      bottom:calc(var(--stage-y) + var(--stage-h) * 0.15972);
      transform:translate(50%,50%);
    }
  }
  /* portrait phones: a 16:9 stage would shrink the art to a strip,
     so the artwork fills the screen as before */
  @media (orientation:portrait){
    body.landing #introVideo,
    body.landing #bgLayer video{
      object-fit:cover;
      object-position:center;
    }
  }

  /* ============================================================
     CONTENT PROTECTION — deterrence layer (2026-08-10)
     Narrative text, artwork and media resist casual capture.
     DELIBERATELY EXEMPT: every link, contact detail and company
     link, so email, telephone and website values stay selectable,
     copyable and clickable exactly as before.
     ============================================================ */
  body{
    -webkit-user-select:none;
    -moz-user-select:none;
    -ms-user-select:none;
    user-select:none;
  }
  a, a *,
  .contact-list, .contact-list *,
  .venture-contact, .venture-contact *,
  .vc-row, .vc-row *,
  input, textarea{
    -webkit-user-select:text;
    -moz-user-select:text;
    -ms-user-select:text;
    user-select:text;
  }
  /* artwork resists drag-to-desktop; clicks still work, so the
     directory logo pop-out and every control behave normally */
  img{
    -webkit-user-drag:none;
    -khtml-user-drag:none;
    -moz-user-drag:none;
    -o-user-drag:none;
  }

  /* ============================================================
     IMAGE RENDERING SMOOTHNESS  (2026-08-11)
     The masters are print-resolution by the owner's mandate, so the
     fix is delivery, never quality: space is reserved before the
     bytes arrive (no shift), decoding runs off the main thread, and
     the browser is told the real intrinsic ratio up front.
     No source file is altered in any way.
     ============================================================ */
  .venture-logo{
    aspect-ratio:1 / 1;        /* reserve the chip before decode */
    object-fit:contain;
  }
  .companies-card .venture.expanded .venture-logo{aspect-ratio:auto}
  .exp-logo-box img{aspect-ratio:auto}
  #signature{aspect-ratio:1704 / 923}
  #crestWatermark img{aspect-ratio:1 / 1}
  .contact-photo{aspect-ratio:1024 / 1536}
  .eca-hero{aspect-ratio:1916 / 821}

  /* ============================================================
     EXTRA-CURRICULAR TILE FIT  (2026-08-11)
     Tighter vertical rhythm so the three tiles sit higher and read
     cleanly, without shrinking type or cramping the lines.
     ============================================================ */
  body[data-view="extra"] .content-shell{padding-top:76px;padding-bottom:48px}
  .eca-grid{margin-top:clamp(12px,1.3vw,18px)}
  .eca-card{padding:1.15rem 1.2rem}
  .eca-card h2{
    margin-bottom:.6rem;
    white-space:nowrap;        /* headings stay on one line */
    letter-spacing:.18em;
  }
  .eca-card p{margin:0 0 .66rem;line-height:1.6}
  @media (max-width:420px){
    .eca-card h2{white-space:normal}   /* never overflow the tiniest phones */
  }