/* 10aiagents.com v2.2 */
  :root{
    --stone-0:#0e0b08;
    --stone-1:#1b1611;
    --stone-2:#292019;
    --stone-3:#3a2d22;
    --wood-dark:#241407;
    --wood-mid:#4a2a12;
    --wood-light:#6f4420;
    --iron:#2a2622;
    --gold:#c9a227;
    --gold-bright:#f0c869;
    --ember:#ff7a33;
    --ember-soft:#ffb069;
    --parchment:#efe3c6;
    --parchment-dim:#b8a988;
    --shadow-deep: 0 30px 80px rgba(0,0,0,.7);
  }

  *{box-sizing:border-box;}
  html,body{margin:0;padding:0;}
  body{
    background:var(--stone-0);
    color:var(--parchment);
    font-family:'EB Garamond', Georgia, serif;
    overflow-x:hidden;
    min-height:100%;
  }
  h1,h2,h3,.display{
    font-family:'Cinzel', Georgia, serif;
    text-wrap:balance;
    letter-spacing:.03em;
  }
  img{max-width:100%;display:block;}
  button{font-family:inherit;cursor:pointer;}
  a{color:var(--gold-bright);}
  [hidden]{display:none!important;}
  ::selection{background:var(--gold); color:var(--stone-0);}

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

  /* ============ MAIN ============ */
  .main{
    background:
      radial-gradient(ellipse 70% 40% at 50% 0%, rgba(201,162,39,.08), transparent 60%),
      var(--stone-0);
    min-height:100vh;
    animation:fadeInMain 1s ease both;
  }
  @keyframes fadeInMain{ from{opacity:0;} to{opacity:1;} }

  .site-header{
    position:sticky; top:env(safe-area-inset-top,0px);
    z-index:20;
    background:linear-gradient(180deg, rgba(14,11,8,.96), rgba(14,11,8,.86));
    border-bottom:1px solid var(--stone-3);
    backdrop-filter:blur(6px);
    padding:14px 20px;
    display:flex; align-items:center; justify-content:space-between; gap:16px;
    flex-wrap:wrap;
  }
  /* v1.33: network status panel (counts only, read from status.json that Mark uploads every 5 minutes) */
  .net-status{margin:0; padding:0 20px; text-align:center; display:flex; align-items:center; justify-content:center; gap:14px 36px; flex-wrap:wrap;}  /* v1.52: total sits to the right of the title */  /* v1.38: no box */
  .net-status[hidden]{display:none;}
  .net-status h3{margin:0 0 2px; font-size:.95rem; letter-spacing:.14em; text-transform:uppercase; color:var(--gold-bright); font-weight:600;}
  .net-status .net-updated{color:var(--parchment-dim); font-style:italic; font-size:.76rem; margin:0;}
  .net-totals{display:flex; flex-wrap:wrap; justify-content:center; gap:10px 26px; margin-bottom:0;}
  .net-totals div{min-width:90px;}
  .net-totals b{display:block; font-size:1.4rem; color:var(--parchment); line-height:1.1;}
  .net-totals span{font-size:.72rem; letter-spacing:.12em; text-transform:uppercase; color:var(--parchment-dim);}
  .net-totals .n-live b{color:#6fcf8e;}
  .net-totals .n-off b{color:#d98a7a;}
  .brand{display:flex; align-items:baseline; gap:10px; text-decoration:none; color:inherit; cursor:pointer;}
  .brand:hover h1{color:var(--gold);}
  .brand h1{font-size:1.3rem; margin:0; color:var(--gold-bright); letter-spacing:.08em;}
  .brand span{color:var(--parchment-dim); font-style:italic; font-size:.85rem; font-family:'EB Garamond',serif;}
  .version-tag{
    font-style:normal; font-size:.68rem; letter-spacing:.04em; color:var(--parchment-dim); opacity:.75;
    border:1px solid var(--stone-3); border-radius:10px; padding:2px 8px;
  }
  /* v1.39: header middle buttons + message box */
  .header-actions{display:flex; gap:10px; flex-wrap:wrap; justify-content:center;}
  @media (min-width:900px){
    /* brand left, buttons right */
    .site-header{ display:grid; grid-template-columns:1fr auto 1fr; }
    .site-header .brand{ grid-column:1; justify-self:start; }
    .site-header .net-status{ grid-column:2; }
    .site-header .header-actions{ grid-column:3; justify-self:end; justify-content:flex-end; }
  }
  @media (max-width:899px){
    .header-actions{ order:3; width:100%; justify-content:flex-end; }
    .site-header .net-status{ order:2; width:100%; justify-content:center; }
  }
  .header-btn{
    font-family:'Cinzel',serif; font-size:.72rem; letter-spacing:.08em; text-transform:uppercase;
    color:var(--gold-bright); background:transparent; border:1px solid var(--gold);
    border-radius:16px; padding:6px 14px; cursor:pointer; white-space:nowrap;
  }
  .header-btn:hover, .header-btn:focus-visible{ background:var(--gold); color:#241a08; outline:none; }
  .modal textarea{
    width:100%; min-height:130px; resize:vertical; padding:11px 12px; margin-bottom:14px;
    background:var(--stone-0); border:1px solid var(--stone-3); border-radius:6px;
    color:var(--parchment); font-family:'EB Garamond',serif; font-size:1rem; line-height:1.45;
  }
  .modal textarea:focus{ outline:2px solid var(--gold); outline-offset:1px; }
  .modal .msg-sub{ text-align:center; margin:0 0 18px; color:var(--parchment-dim); font-size:.92rem; line-height:1.45; }
  .modal .hp-field{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
  /* v1.51: clickable breadcrumbs under the header line */
  .crumbs{max-width:none; margin:0; padding:10px 20px 0; text-align:left; font-family:'Cinzel',serif; font-size:.72rem; letter-spacing:.08em; text-transform:uppercase; color:var(--parchment-dim);}
  .crumbs ol{list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; align-items:center; gap:4px 8px;}
  .crumbs li+li::before{content:"\203A"; margin-right:8px; color:var(--stone-3,#6b5a3a);}
  .crumbs a{color:var(--gold-bright); text-decoration:none; border-bottom:1px solid transparent; cursor:pointer;}
  .crumbs a:hover,.crumbs a:focus-visible{border-bottom-color:var(--gold-bright); outline:none;}
  .crumbs [aria-current]{color:var(--parchment);}
  .quicknav{display:flex; gap:14px; flex-wrap:wrap;}
  .quicknav a{
    font-size:.78rem; letter-spacing:.08em; text-transform:uppercase;
    color:var(--parchment-dim); text-decoration:none;
    border-bottom:1px solid transparent; padding-bottom:2px;
  }
  .quicknav a:hover{color:var(--gold-bright); border-color:var(--gold);}

  .intro{
    max-width:760px; margin:0 auto; padding:4px 20px 8px; text-align:center;
  }
  .intro h2{ font-size:clamp(1.4rem,4vw,2.1rem); color:var(--parchment); margin:0 0 10px;}
  .intro p{color:var(--parchment-dim); font-size:1.05rem; line-height:1.6; margin:0;}

  .section-block{ padding:40px 20px 8px; max-width:1280px; margin:0 auto;}
  .section-head{
    display:flex; align-items:center; gap:16px; margin-bottom:26px;
  }
  .section-head .rule{ flex:1; height:1px; background:linear-gradient(90deg, transparent, var(--stone-3) 20%, var(--stone-3) 80%, transparent);}
  .section-head .glyph{ font-size:1.3rem; color:var(--gold);}
  .section-titles{text-align:center;}
  .section-titles .eyebrow{
    display:block; font-size:.72rem; letter-spacing:.24em; text-transform:uppercase;
    color:var(--parchment-dim); margin-bottom:4px;
  }
  .section-titles h2{ margin:0; font-size:clamp(1.3rem,3.4vw,1.8rem); color:var(--gold-bright);}

  .card-grid{
    display:grid;
    grid-template-columns:repeat(auto-fill, minmax(210px, 1fr));
    gap:22px;
  }

  .card{
    background:linear-gradient(180deg, var(--stone-2), var(--stone-1));
    border:1px solid var(--stone-3);
    border-radius:10px;
    overflow:hidden;
    display:flex; flex-direction:column;
    transition:transform .3s ease, box-shadow .3s ease, border-color .3s ease;
    position:relative;
  }
  .card:hover{
    transform:translateY(-6px);
    box-shadow:0 18px 40px rgba(0,0,0,.55), 0 0 0 1px rgba(201,162,39,.4);
    border-color:var(--gold);
  }
  .card-frame{
    position:relative;
    aspect-ratio:1/1;
    overflow:hidden;
    background:var(--stone-1);
    border-bottom:1px solid var(--stone-3);
  }
  .card-frame img{ width:100%; height:100%; object-fit:cover; }
  .card-frame::after{
    content:"";
    position:absolute; inset:0;
    background:linear-gradient(180deg, rgba(0,0,0,0) 60%, rgba(0,0,0,.55) 100%);
  }
  .badge{
    position:absolute; top:10px; left:10px;
    background:rgba(14,11,8,.85); border:1px solid var(--gold);
    color:var(--gold-bright); font-size:.65rem; letter-spacing:.1em; text-transform:uppercase;
    padding:4px 8px; border-radius:3px; z-index:2;
  }
  .card-body{ padding:16px 16px 18px; display:flex; flex-direction:column; gap:5px; flex:1;}
  .card-name{ margin:0; font-size:1.1rem; color:var(--parchment);}
  /* the talent line is the single most important fact on the card --
     bigger and brighter than the name above it and the tagline below. */
  .card-role{ margin:0 0 2px; font-size:1rem; font-weight:700; letter-spacing:.02em; color:var(--gold-bright);}
  .card-tagline{
    margin:0 0 10px; font-size:.82rem; color:var(--parchment-dim); font-style:italic; line-height:1.4; flex:1;
    display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
  }
  .request-btn{
    align-self:stretch;
    background:transparent;
    border:1px solid var(--gold);
    color:var(--gold-bright);
    font-family:'Cinzel', Georgia, serif;
    font-size:.75rem; letter-spacing:.1em; text-transform:uppercase;
    padding:10px 12px; border-radius:4px;
    transition:background .25s ease, color .25s ease;
  }
  .request-btn:hover{ background:var(--gold); color:#241a08;}

  .no-portrait{
    width:100%; height:100%;
    display:flex; align-items:center; justify-content:center;
    background:
      repeating-linear-gradient(45deg, rgba(255,255,255,.02) 0 2px, transparent 2px 14px),
      linear-gradient(160deg, #23190f, #161009);
  }
  .no-portrait .np-inner{ text-align:center; color:var(--parchment-dim);}
  .no-portrait svg{ width:42px; height:42px; opacity:.75; margin-bottom:6px;}
  .no-portrait .np-text{ font-family:'Cinzel',serif; font-size:.72rem; letter-spacing:.12em; text-transform:uppercase; color:var(--gold);}
  .no-portrait .np-sub{ font-size:.7rem; font-style:italic; opacity:.8; display:block; margin-top:2px;}

  /* ============ HUB (Personal / Business chooser -- no agents yet) ============ */
  .hub{
    max-width:940px; margin:8px auto 64px; padding:0 20px;
    display:grid; grid-template-columns:1fr 1fr; gap:28px;
  }
  /* v1.29: four tiles (Personal / Business / Sports / Education). v1.36: five tiles (+ Fitness) -- on a wide
     screen three across with the last two centred under them; 2 + 2 + 1 (centred) on a tablet; one column on a phone. */
  .hub{ max-width:1180px; grid-template-columns:repeat(6, 1fr); gap:22px; }
  .hub > .track-tile{ grid-column:span 2; }
  .hub > .track-tile:nth-child(4){ grid-column:2 / span 2; }
  .track-glyph svg{ display:block; margin:0 auto; }
  @media (max-width:1199px){
    .hub{ max-width:940px; grid-template-columns:1fr 1fr; gap:24px; }
    .hub > .track-tile, .hub > .track-tile:nth-child(4){ grid-column:auto; }
    .hub > .track-tile:last-child{ grid-column:1 / -1; justify-self:center; width:calc(50% - 12px); }
  }
  /* four narrow tiles: a smaller ribbon so "Under Maintenance - Ready Jan 1, 2027" fits across the diagonal */
  @media (min-width:1200px){
    .hub .maintenance-ribbon{ font-size:.56rem; letter-spacing:.06em; padding:7px 0; }
  }
  .track-tile{
    background:linear-gradient(180deg, var(--stone-2), var(--stone-1));
    border:1px solid var(--stone-3);
    border-radius:14px;
    padding:44px 26px 32px;
    text-align:center;
    color:var(--parchment);
    display:flex; flex-direction:column; align-items:center; gap:12px;
    transition:transform .3s ease, box-shadow .3s ease, border-color .3s ease;
  }
  .track-tile:hover{
    transform:translateY(-6px);
    box-shadow:0 20px 44px rgba(0,0,0,.55), 0 0 0 1px rgba(201,162,39,.45);
    border-color:var(--gold);
  }
  /* v1.20: a track can be taken out of service without removing its tile. The tile keeps its
     place in the hub but is a disabled button (no click, no hover lift, dimmed contents) with
     a diagonal "under maintenance" ribbon across it. Set/clear by adding or removing the
     is-maintenance class + disabled attribute on the tile, and the matching entry in
     MAINTENANCE_TRACKS in the script below (which also disables the header quick-link). */
  .track-tile{ position:relative; overflow:hidden; }
  .track-tile.is-maintenance,
  .track-tile.is-maintenance:hover{
    cursor:not-allowed;
    transform:none;
    box-shadow:none;
    border-color:var(--stone-3);
  }
  .track-tile.is-maintenance > :not(.maintenance-ribbon){
    opacity:.38;
    filter:grayscale(.55);
  }
  .maintenance-ribbon{
    position:absolute; left:50%; top:50%;
    width:170%;
    transform:translate(-50%,-50%) rotate(-24deg);
    padding:9px 0;
    text-align:center; white-space:nowrap;
    font-family:'Cinzel', Georgia, serif;
    font-size:.8rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase;
    color:var(--stone-0);
    background:linear-gradient(90deg, rgba(201,162,39,.94), rgba(240,200,105,.98) 50%, rgba(201,162,39,.94));
    border-top:1px solid rgba(255,255,255,.4);
    border-bottom:1px solid rgba(0,0,0,.45);
    box-shadow:0 8px 22px rgba(0,0,0,.55);
    pointer-events:none;
    z-index:2;
  }
  .quicknav a.is-maintenance,
  .quicknav a.is-maintenance:hover{
    color:var(--parchment-dim); opacity:.45; cursor:not-allowed;
    border-color:transparent; text-decoration:line-through;
  }
  .track-glyph{ font-size:2.4rem; color:var(--gold); line-height:1;}
  .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; }
  /* v1.60: tiles with sub-categories list them as small buttons for one-click access */
  .track-tile.has-subs{ cursor:pointer; }
  .tile-subs{ display:flex; flex-wrap:wrap; justify-content:center; gap:6px; margin-top:6px; }
  .tile-sub{ font-family:'Cinzel',serif; font-size:.62rem; letter-spacing:.06em; text-transform:uppercase; color:var(--parchment); background:rgba(201,162,39,.08); border:1px solid rgba(201,162,39,.35); border-radius:14px; padding:4px 10px; cursor:pointer; }
  .tile-sub:hover,.tile-sub:focus-visible{ background:var(--gold); color:#241a08; outline:none; }
  .track-tile h3{ margin:0; font-size:1.5rem; color:var(--gold-bright);}
  .track-tile p{ margin:0; color:var(--parchment-dim); font-size:.95rem; line-height:1.5; max-width:30ch;}
  .track-count{
    margin-top:8px; font-size:.72rem; letter-spacing:.14em; text-transform:uppercase;
    color:var(--gold); border:1px solid rgba(201,162,39,.4); padding:5px 14px; border-radius:20px;
  }
  /* v1.29: "In Training" sits on its own line under the count, so four tiles across never wrap mid-phrase. */
  .track-count .track-sub{ display:block; margin-top:3px; font-size:.64rem; letter-spacing:.2em; opacity:.8; }
  .track-count:has(.track-sub){ border-radius:16px; padding:6px 16px; line-height:1.4; }

  /* ============ TRACK VIEW (paired by talent, not split by gender) ============ */
  .track-view, .abilities-view{ max-width:1580px; margin:0 auto; padding:0 20px 40px; }
  .back-link{
    background:none; border:none; color:var(--parchment-dim);
    font-family:'EB Garamond', Georgia, serif;
    font-size:.88rem; letter-spacing:.02em; cursor:pointer; padding:0; margin-bottom:28px;
  }
  .back-link:hover{ color:var(--gold-bright); }
  .track-view-head{ text-align:center; margin-bottom:8px; }
  .track-view-head .eyebrow{
    display:block; font-size:.72rem; letter-spacing:.24em; text-transform:uppercase;
    color:var(--parchment-dim); margin-bottom:4px;
  }
  .track-view-head h2{ margin:0 0 8px; font-size:clamp(1.4rem,3.6vw,2rem); color:var(--gold-bright);}
  .track-view-count{
    margin:0; font-size:.72rem; letter-spacing:.12em; text-transform:uppercase; color:var(--parchment-dim);
  }

  /* pair-grid alone now -- the "what agents can do" box used to sit beside
     it as a sidebar; it now lives full-width, above this, right under the
     "N talents / N agents" line (see .abilities-box below). */
  .track-body{
    margin-top:34px;
  }
  /* full-width banner, above the agent grid. */
  .abilities-box{
    margin-top:34px;
    background:linear-gradient(180deg, var(--stone-2), var(--stone-1));
    border:1px solid var(--stone-3); border-radius:12px;
    padding:22px 26px 26px;
  }
  .abilities-box h3{
    margin:0 0 6px; font-size:1.05rem; color:var(--gold-bright);
    font-family:'Cinzel', Georgia, serif; text-align:center;
  }
  .abilities-sub{
    margin:0 0 18px; font-size:.74rem; color:var(--parchment-dim); line-height:1.45;
    text-align:center;
  }
  .abilities-top10{
    margin:0 0 20px; padding-left:0; list-style:none; counter-reset:ability;
    display:grid; grid-template-columns:repeat(5, 1fr); gap:14px 22px;
  }
  @media (max-width:1100px){
    .abilities-top10{ grid-template-columns:repeat(3, 1fr); }
  }
  @media (max-width:700px){
    .abilities-top10{ grid-template-columns:repeat(2, 1fr); }
  }
  @media (max-width:480px){
    .abilities-top10{ grid-template-columns:1fr; }
  }
  .abilities-top10 li{
    counter-increment:ability;
    font-size:.76rem; color:var(--parchment); line-height:1.38;
    padding-left:26px; position:relative;
  }
  .abilities-top10 li::before{
    content:counter(ability);
    position:absolute; left:0; top:0;
    width:18px; height:18px; border-radius:50%;
    background:rgba(201,162,39,.15); border:1px solid var(--gold);
    color:var(--gold-bright); font-size:.62rem; font-family:'Cinzel',serif; font-weight:700;
    display:flex; align-items:center; justify-content:center;
  }
  .abilities-link{
    display:block; width:max-content; margin:0 auto; text-align:center;
    background:transparent; border:1px solid var(--gold); color:var(--gold-bright);
    font-family:'Cinzel', Georgia, serif; font-size:.72rem; letter-spacing:.06em; text-transform:uppercase;
    padding:11px 28px; border-radius:6px; cursor:pointer;
    transition:background .2s ease, color .2s ease;
  }
  .abilities-link:hover{ background:var(--gold); color:#241a08; }

  /* full-page abilities view, grouped by kind of task -- fixed 5-wide,
     10 categories lands as exactly 2 rows of 5, same pattern as pair-grid. */
  .abilities-categories{
    display:grid; grid-template-columns:repeat(5, 1fr);
    gap:22px; margin-top:34px;
  }
  @media (max-width:1360px){
    .abilities-categories{ grid-template-columns:repeat(3, 1fr); }
  }
  @media (max-width:900px){
    .abilities-categories{ grid-template-columns:repeat(2, 1fr); }
  }
  @media (max-width:560px){
    .abilities-categories{ grid-template-columns:1fr; }
  }
  .ability-cat{
    background:linear-gradient(180deg, var(--stone-2), var(--stone-1));
    border:1px solid var(--stone-3); border-radius:10px; padding:18px 18px 20px;
  }
  .ability-cat h3{
    margin:0 0 13px; font-size:.95rem; color:var(--gold-bright);
    font-family:'Cinzel', Georgia, serif; letter-spacing:.02em;
  }
  .ability-cat ul{ margin:0; padding-left:18px; display:flex; flex-direction:column; gap:8px; }
  .ability-cat li{ font-size:.78rem; color:var(--parchment-dim); line-height:1.42; }


  /* fixed 5-wide -- 10 pairs per track lands as exactly 2 rows of 5. */
  /* v1.17: portraits line up across every card in a row, however many fit on screen.
     Each card spans THREE grid rows -- title, description, people -- and re-uses the
     parent's rows via `grid-template-rows:subgrid`, so those three rows are sized by the
     tallest card in that row and every card's portraits start at the same y.

     Why subgrid rather than a min-height on the description: the description isn't the only
     thing that varies. "Co-Author & Scene Partner" wraps the TITLE to two lines while its
     neighbours keep one, so a fixed description height still left that card's photos 21px
     low. Subgrid equalises every row at once, and it keeps working when the copy is edited
     -- a hardcoded height is only correct until someone rewrites a sentence. It also needs
     no JavaScript, so nothing has to re-run on resize or after the webfont loads.

     Two things this relies on, both true here and worth knowing if you change them:
       * every .pair-card has the SAME padding, so the uniform inset shifts all cards
         identically and alignment survives it;
       * the card sets its own `row-gap:0` -- otherwise the grid's 14px row gap would be
         inserted between the title, description and photos of every card, because those
         are now real grid rows. The 14px still separates one row of cards from the next. */
  .pair-grid{
    display:grid;
    grid-template-columns:repeat(5, 1fr);
    grid-auto-rows:auto;
    gap:14px;
    /* no margin-top here -- .track-body already spaces itself from
       whatever's above it. */
  }
  .pair-card{
    position:relative;
    background:linear-gradient(180deg, var(--stone-2), var(--stone-1));
    border:1px solid var(--stone-3);
    border-radius:10px;
    padding:13px 10px 15px;
    transition:transform .3s ease, box-shadow .3s ease, border-color .3s ease;
    /* v1.17: see the .pair-grid comment. Three rows: title, description, people. */
    grid-row:span 3;
    display:grid;
    grid-template-rows:subgrid;
    row-gap:0;
    align-content:start;
  }
  /* v1.17 fallback: a browser without subgrid support ignores grid-template-rows:subgrid
     and would otherwise make each card a 3-row grid of its own, which looks the same as
     the old flow layout -- cards render correctly, portraits just aren't aligned. This
     query gives those browsers back the plain block card rather than a grid one, so
     nothing about the old layout changes for them. Chrome 117+, Safari 16+ and Firefox 71+
     all support subgrid, so in practice this is a safety net, not a code path. */
  @supports not (grid-template-rows: subgrid){
    .pair-card{ display:block; grid-row:auto; }
  }
  .pair-card:hover{
    transform:translateY(-4px);
    box-shadow:0 16px 36px rgba(0,0,0,.5), 0 0 0 1px rgba(201,162,39,.35);
    border-color:var(--gold);
  }
  /* the talent is the one headline for both people -- seen first, shown once. */
  .pair-talent{
    margin:0 0 8px; text-align:center;
    font-family:'Cinzel', Georgia, serif;
    font-size:1rem; font-weight:700; letter-spacing:.01em; line-height:1.3;
    color:var(--gold-bright);
  }
  /* what the talent itself can do -- sits between the title and the photos. */
  .pair-explain{
    margin:0 0 14px; font-size:.82rem; line-height:1.48; color:var(--parchment-dim);
    border-top:1px solid var(--stone-3); border-bottom:1px solid var(--stone-3);
    padding:9px 0;
  }
  .pair-people{ display:flex; align-items:flex-start; justify-content:center; gap:8px; }
  .pair-person{
    background:none; border:none; padding:0; margin:0; cursor:pointer;
    display:flex; flex-direction:column; align-items:center; gap:5px;
    width:50%; max-width:120px; color:inherit; text-align:center;
  }
  .pair-frame{
    position:relative; width:100%; aspect-ratio:1/1;
    border-radius:7px; overflow:hidden;
    background:var(--stone-1); border:1px solid var(--stone-3);
    transition:border-color .25s ease, box-shadow .25s ease;
  }
  .pair-person:hover .pair-frame{ border-color:var(--gold); box-shadow:0 0 0 1px rgba(201,162,39,.4); }
  .pair-frame img{ width:100%; height:100%; object-fit:cover; }
  .pair-frame .badge{ font-size:.58rem; padding:2px 5px; top:4px; left:4px;}
  .pair-frame .no-portrait .np-text{ font-size:.6rem; }
  .pair-frame .no-portrait .np-sub{ font-size:.56rem; }
  .pair-frame .no-portrait svg{ width:20px; height:20px; margin-bottom:2px;}
  .pair-name{ margin:0; font-size:.92rem; color:var(--parchment); font-family:'Cinzel',Georgia,serif;}
  /* full description, no clamp/ellipsis -- card just grows taller to fit it. */
  .pair-tag{
    margin:0; font-size:.8rem; color:var(--parchment-dim); font-style:italic; line-height:1.38;
  }
  .pair-request{
    margin-top:1px; font-size:.66rem; letter-spacing:.06em; text-transform:uppercase;
    color:var(--gold); border:1px solid rgba(201,162,39,.4); border-radius:12px; padding:3px 9px;
    transition:background .2s ease, color .2s ease;
  }
  .pair-person:hover .pair-request{ background:var(--gold); color:#241a08; }
  .pair-divider{ align-self:center; color:var(--stone-3); font-size:1rem; padding-top:18px; font-family:'Cinzel',serif;}

  /* v1.25: "Agents in Training" -- agents that are still being trained, in their own grid under
     the live cards. .training-grid reuses .pair-grid, so a training card is exactly the size of
     every other card. A training card can't be requested: its two people are plain <div>s (no
     click, no data-id, so wireCards() never opens the request modal), the "Request Access" chip is
     dimmed and marked aria-disabled, and a diagonal "In Training" ribbon -- same look as
     .maintenance-ribbon -- runs across the card. Hovering a photo still enlarges the card.
     To graduate an agent: move its TRAINING_PAIRS entry into PAIRS and its TRAINING_AGENTS entries
     into AGENTS in the script below, and stand up its bot. */
  /* v1.30: Education chooser (two choices), Professional category chips / search / class index. */
  .edu-chooser[hidden], .abilities-box[hidden], .track-body[hidden], .pro-tools[hidden], .back-link[hidden]{ display:none !important; }
  .edu-chooser{ display:grid; grid-template-columns:1fr 1fr; gap:24px; max-width:900px; margin:30px auto 10px; }
  /* v1.45: Education has three choices; v1.46: four (BS & BA Degree, Junior & Senior Years, Professional, K-12) -- 2 x 2 */
  #eduChooser{ grid-template-columns:repeat(2, 1fr); max-width:1000px; }
  /* v1.47: five choices; v1.48: six -- three across on wide screens (3 x 2), two across on tablets (2 x 3) */
  @media (min-width:1001px){ #eduChooser{ grid-template-columns:repeat(3, 1fr); max-width:1240px; } }
  .major-head{ grid-column:1 / -1; margin:6px 0 -4px; text-align:center; color:var(--parchment-dim); font-family:'Cinzel', Georgia, serif;
    font-size:.95rem; letter-spacing:.04em; }
  .cluster-note{ grid-column:1 / -1; margin:-6px 0 4px; text-align:center; color:var(--parchment-dim); font-size:.85rem; }
  .edu-choice, .biz-choice{
    background:linear-gradient(180deg, rgba(40,30,20,.75), rgba(20,15,10,.9)); border:1px solid var(--stone-3);
    border-radius:14px; padding:28px 22px; text-align:center; cursor:pointer; color:inherit; font:inherit;
    transition:border-color .2s, transform .2s;
  }
  .edu-choice:hover, .edu-choice:focus-visible, .biz-choice:hover, .biz-choice:focus-visible{ border-color:var(--gold); transform:translateY(-2px); outline:none; }
  .edu-choice h3, .biz-choice h3{ margin:0 0 10px; font-family:'Cinzel', Georgia, serif; color:var(--gold-bright); font-size:clamp(1.15rem,2.6vw,1.5rem); }
  .edu-choice p, .biz-choice p{ margin:0 0 14px; color:var(--parchment-dim); line-height:1.45; }
  /* v1.40: Business -> Small Business / Enterprise Business (same chooser look as Education) */
  .biz-soon[hidden]{ display:none !important; }
  .biz-soon{ max-width:620px; margin:34px auto 20px; text-align:center; padding:30px 24px;
    border:1px solid var(--stone-3); border-radius:14px; background:linear-gradient(180deg, rgba(40,30,20,.6), rgba(20,15,10,.85)); }
  .biz-soon h3{ margin:0 0 10px; font-family:'Cinzel', Georgia, serif; color:var(--gold-bright); font-size:clamp(1.1rem,2.4vw,1.4rem); }
  .biz-soon p{ margin:0 0 18px; color:var(--parchment-dim); line-height:1.5; }
  .edu-count{ display:block; font-size:.78rem; letter-spacing:.14em; text-transform:uppercase; color:var(--gold); }
  .pro-tools{ max-width:1000px; margin:6px auto 26px; text-align:center; }
  .pro-search{
    width:100%; max-width:560px; box-sizing:border-box; padding:12px 16px; border-radius:10px;
    background:rgba(14,11,8,.85); border:1px solid var(--stone-3); color:inherit; font:inherit; font-size:1rem;
  }
  .pro-search:focus{ outline:none; border-color:var(--gold); }
  .pro-chips{ display:flex; flex-wrap:wrap; gap:8px; justify-content:center; margin:16px 0 10px; }
  .pro-chip{
    background:none; border:1px solid var(--stone-3); border-radius:999px; padding:7px 14px; cursor:pointer;
    color:var(--parchment-dim); font:inherit; font-size:.88rem;
  }
  .pro-chip:hover{ border-color:var(--gold); color:var(--gold-bright); }
  .pro-chip.is-on{ background:var(--gold); color:#241a08; border-color:var(--gold); }
  .pro-result{ margin:6px 0 14px; color:var(--parchment-dim); font-size:.9rem; min-height:1.2em; }
  .pro-index{ text-align:left; columns:2 340px; column-gap:34px; }
  .pro-index-group{ break-inside:avoid; margin:0 0 16px; }
  .pro-index-group h4{ margin:0 0 6px; font-family:'Cinzel', Georgia, serif; font-size:.82rem; letter-spacing:.06em; color:var(--gold-bright); }
  .pro-index-group button{
    display:block; background:none; border:none; padding:3px 0; cursor:pointer; text-align:left;
    color:var(--parchment-dim); font:inherit; font-size:.9rem; line-height:1.3;
  }
  .pro-index-group button:hover{ color:var(--gold-bright); text-decoration:underline; }
  .cluster-head{
    grid-column:1 / -1; margin:18px 0 0; padding-top:18px; border-top:1px solid var(--stone-3);
    font-family:'Cinzel', Georgia, serif; font-size:clamp(1.05rem,2.4vw,1.3rem); color:var(--gold-bright); text-align:center;
  }
  .cluster-head:first-child{ border-top:none; margin-top:0; padding-top:0; }
  .pair-card.is-flash{ outline:2px solid var(--gold-bright); outline-offset:4px; }
  @media (max-width:700px){ .edu-chooser, #eduChooser{ grid-template-columns:1fr; } }
  .training-section{ margin-top:0; }
  .training-head{ display:none !important; }  /* v1.35: no "Agents in Training" heading any more */
  .training-section[hidden]{ display:none; }
  /* v1.27: a track with no live agents (Sports) hides its empty live grid and drops the gap. */
  .pair-grid[hidden]{ display:none; }
  .pair-grid[hidden] + .training-section{ margin-top:0; }
  .training-head{
    text-align:center; margin-bottom:22px; padding-top:34px;
    border-top:1px solid var(--stone-3);
  }
  .training-head h3{
    margin:0 0 6px; font-family:'Cinzel', Georgia, serif;
    font-size:clamp(1.3rem,3.2vw,1.8rem); color:var(--gold-bright);
  }
  .training-head p{
    margin:0; font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:var(--parchment-dim);
  }
  .pair-card.is-training{ overflow:hidden; cursor:default; }
  .pair-card.is-training:hover{
    transform:none; box-shadow:none; border-color:var(--stone-3);
  }
  /* the words are dimmed (disabled look); the portraits stay full colour so the pair can be seen,
     and the ribbon crosses the explanation paragraph rather than the faces and names. */
  .pair-card.is-training .pair-talent,
  .pair-card.is-training .pair-explain,
  .pair-card.is-training .pair-name,
  .pair-card.is-training .pair-tag,
  .pair-card.is-training .pair-divider{ opacity:.68; }
  .pair-card.is-training .pair-person{ cursor:default; }
  .pair-person.is-training{ cursor:default; }  /* v1.37: an agent in training inside a live card */
  .pair-request.is-disabled,
  .pair-person:hover .pair-request.is-disabled{
    color:var(--parchment-dim); background:none;
    border-color:var(--stone-3); opacity:.7; cursor:not-allowed;
    text-decoration:line-through;
  }
  .training-ribbon{
    position:absolute; left:50%; top:27%;
    width:190%;
    transform:translate(-50%,-50%) rotate(-28deg);
    padding:9px 0;
    text-align:center; white-space:nowrap;
    font-family:'Cinzel', Georgia, serif;
    font-size:.82rem; font-weight:700; letter-spacing:.2em; text-transform:uppercase;
    color:var(--stone-0);
    background:linear-gradient(90deg, rgba(201,162,39,.94), rgba(240,200,105,.98) 50%, rgba(201,162,39,.94));
    border-top:1px solid rgba(255,255,255,.4);
    border-bottom:1px solid rgba(0,0,0,.45);
    box-shadow:0 8px 22px rgba(0,0,0,.55);
    pointer-events:none;
    z-index:2;
  }

  /* v1.16: the "SHOW LARGER" caption pill itself is hidden by request -- but the element
     stays in the DOM (display:none, not deleted) because wireCards() below still checks
     for its presence to decide whether a .pair-frame gets the hover-to-enlarge behavior
     (hovering a card's photo still opens the big preview; the explicit enlarge button
     that used to sit in the corner of each card has been removed by request). */
  .show-larger{
    display:none;
    position:absolute; left:0; right:0; bottom:0; z-index:2;
    background:linear-gradient(0deg, rgba(0,0,0,.8), transparent);
    color:var(--gold-bright);
    font-family:'EB Garamond', Georgia, serif;
    font-size:.5rem; letter-spacing:.05em; text-transform:uppercase;
    text-align:center; padding:9px 2px 3px;
    cursor:pointer;
  }
  .show-larger:hover{ color:#fff; }

  /* the big preview -- a scaled-up clone of the whole talent card (title,
     explanation, both photos, names, tags and buttons), centered over the
     page so everything reads bigger and clearer, not just one photo. */
  .card-preview{
    position:fixed; inset:0; z-index:500;
    display:flex; align-items:center; justify-content:center;
    padding:26px;
    background:rgba(8,6,4,.6);
    opacity:0; visibility:hidden;
    transition:opacity .18s ease;
    pointer-events:none; /* the dark backdrop is visual only -- it never
                            blocks clicks/hover on the rest of the page */
  }
  .card-preview.visible{ opacity:1; visibility:visible; }
  .card-preview-card{
    width:min(320px, 84vw);
    transform:scale(1.7);
    transform-origin:center center;
    pointer-events:none;
  }
  /* only the enlarged card itself is interactive, not the full-screen backdrop */
  .card-preview.visible .card-preview-card{ pointer-events:auto; }
  .card-preview-card .pair-card{
    box-shadow:0 40px 100px rgba(0,0,0,.8);
  }
  .card-preview-card .pair-card,
  .card-preview-card .pair-card:hover{
    transform:none; /* the grid's lift-on-hover doesn't apply inside the preview */
  }
  @media (max-width:600px){
    .card-preview-card{ transform:scale(1.3); }
  }

  @media (max-width:1100px){
    .pair-grid{ grid-template-columns:repeat(3, 1fr); }
  }
  @media (max-width:760px){
    .hub{ grid-template-columns:1fr; gap:18px; margin-bottom:48px;}
    .hub > .track-tile:last-child{ width:auto; justify-self:stretch; }
    .pair-grid{ grid-template-columns:repeat(2, 1fr); }
  }
  @media (max-width:480px){
    .pair-grid{ grid-template-columns:1fr; }
  }

  footer{
    margin-top:60px; padding:36px 20px max(36px, env(safe-area-inset-bottom,0px));
    text-align:center; color:var(--parchment-dim);
    border-top:1px solid var(--stone-3);
    font-size:.85rem;
  }
  footer .fine{ max-width:560px; margin:10px auto 0; opacity:.75; font-style:italic; font-size:.8rem;}

  /* ============ MODAL ============ */
  .modal-overlay{
    /* Must beat .card-preview's z-index:500 -- Request Access can be
       clicked from inside the enlarged card view, and the email form
       needs to land on top of it, not hidden behind it. */
    position:fixed; inset:0; z-index:900;
    background:rgba(6,4,3,.82);
    display:flex; align-items:center; justify-content:center;
    padding:20px;
    animation:fadeInMain .25s ease both;
  }
  .modal{
    width:min(420px, 100%);
    background:linear-gradient(180deg, var(--stone-2), var(--stone-1));
    border:1px solid var(--gold);
    border-radius:12px;
    padding:26px 24px 24px;
    position:relative;
    box-shadow:var(--shadow-deep);
    max-height:92vh; overflow-y:auto;
  }
  .modal-close{
    position:absolute; top:12px; right:14px;
    background:none; border:none; color:var(--parchment-dim);
    font-size:1.6rem; line-height:1; padding:4px;
  }
  .modal-close:hover{color:var(--gold-bright);}
  .modal-img{
    width:96px; height:96px; border-radius:50%; object-fit:cover;
    border:2px solid var(--gold); margin:0 auto 14px;
  }
  .modal h3{ text-align:center; margin:0 0 2px; color:var(--parchment); font-size:1.3rem;}
  .modal .modal-role{ text-align:center; margin:0 0 18px; color:var(--gold); font-size:.78rem; letter-spacing:.08em; text-transform:uppercase;}
  .modal label{ display:block; font-size:.85rem; color:var(--parchment-dim); margin-bottom:6px;}
  .modal input[type=email]{
    width:100%; padding:11px 12px; margin-bottom:14px;
    background:var(--stone-0); border:1px solid var(--stone-3); border-radius:6px;
    color:var(--parchment); font-family:'EB Garamond',serif; font-size:1rem;
  }
  .modal input[type=email]:focus{ outline:2px solid var(--gold); outline-offset:1px; }
  .submit-btn{
    width:100%; padding:12px; border-radius:6px; border:1px solid var(--gold);
    background:linear-gradient(180deg, var(--gold-bright), var(--gold));
    color:#241a08; font-family:'Cinzel',serif; letter-spacing:.08em; text-transform:uppercase; font-size:.85rem;
  }
  .submit-btn:hover{ filter:brightness(1.08); }
  .modal-status{ margin:14px 0 0; font-size:.88rem; text-align:center; color:var(--parchment-dim); line-height:1.5;}
  .modal-status.ok{ color:var(--gold-bright); }
  .modal-status.err{ color:var(--ember-soft); }
  .age-step{ text-align:center; }
  .age-q{ margin:4px 0 14px; font-size:1.05rem; color:var(--parchment); }
  .age-btns{ display:flex; flex-direction:column; gap:10px; }
  .age-btns .submit-btn{ width:100%; }
  .age-btns .age-no{ background:transparent; color:var(--parchment-dim); border:1px solid var(--stone-3); }

  @media (max-width:520px){
    .site-header{padding:12px 14px;}
    .quicknav{gap:10px;}
    .section-block{padding:30px 14px 4px;}
    .card-grid{gap:14px;}
    .track-tile{padding:34px 20px 26px;}
    .maintenance-ribbon{ font-size:.64rem; letter-spacing:.12em; padding:7px 0; }
    .pair-person{ max-width:none; }
  }
  /* ============ v1.72: big search on every page ============ */
  .finder{ position:relative; max-width:900px; margin:18px auto 22px; padding:0 20px; z-index:15; }
  .finder-box{
    position:relative; display:flex; align-items:center; gap:12px;
    background:linear-gradient(180deg, #1f1912, #15100b);
    border:2px solid rgba(201,162,39,.65); border-radius:40px;
    padding:0 14px 0 22px; min-height:68px;
    box-shadow:0 0 0 6px rgba(201,162,39,.07), 0 18px 40px rgba(0,0,0,.45);
    transition:border-color .2s ease, box-shadow .2s ease;
  }
  .finder-box:focus-within{ border-color:var(--gold-bright); box-shadow:0 0 0 6px rgba(240,200,105,.14), 0 18px 40px rgba(0,0,0,.5); }
  .finder-icon{ color:var(--gold); flex:none; display:flex; }
  .finder-field{ position:relative; flex:1; min-width:0; }
  .finder-field input, .finder-ghost{
    font-family:'EB Garamond', Georgia, serif; font-size:clamp(1.12rem, 2.4vw, 1.45rem); letter-spacing:.01em;
    padding:16px 0; margin:0; border:0; line-height:1.3; white-space:pre;
  }
  .finder-field input{
    position:relative; z-index:2; width:100%; background:transparent; color:var(--parchment); outline:none;
  }
  .finder-field input::placeholder{ color:#8f8166; opacity:1; }
  .finder-ghost{ position:absolute; left:0; top:0; right:0; z-index:1; pointer-events:none; overflow:hidden; color:transparent; }
  .finder-ghost #finderGhostRest{ color:#7d7058; }
  .finder-btn{
    flex:none; background:transparent; border:1px solid rgba(201,162,39,.45); color:var(--gold-bright);
    border-radius:18px; padding:5px 11px; font-family:'Cinzel',serif; font-size:.68rem; letter-spacing:.06em; cursor:pointer;
  }
  .finder-btn:hover, .finder-btn:focus-visible{ background:var(--gold); color:#241a08; outline:none; }
  .finder-clear{ border:none; font-size:1.3rem; line-height:1; padding:4px 8px; color:var(--parchment-dim); }
  .finder-tip{ margin:10px 0 0; text-align:center; color:var(--parchment-dim); font-size:.92rem; }
  .finder-tip kbd, .fr-foot kbd{
    font-family:'EB Garamond',serif; font-size:.78rem; border:1px solid var(--stone-3); border-bottom-width:2px;
    border-radius:4px; padding:0 5px; color:var(--parchment); background:var(--stone-1);
  }
  .finder-try{ display:inline; }
  .finder-try button{
    background:none; border:none; padding:0 2px; color:var(--gold-bright); font-family:inherit; font-size:inherit; cursor:pointer;
    border-bottom:1px dotted rgba(240,200,105,.5);
  }
  .finder-try button:hover{ border-bottom-style:solid; }
  .finder-list{
    position:absolute; left:0; right:0; top:calc(100% + 8px);
    background:#17120c; border:1px solid var(--gold); border-radius:14px; box-shadow:0 24px 60px rgba(0,0,0,.7);
    max-height:min(70vh, 640px); overflow:auto; padding:8px 0 4px; text-align:left;
  }
  .fr-dym{ padding:8px 18px 10px; color:var(--parchment); font-size:1rem; border-bottom:1px solid var(--stone-3); }
  .fr-dym span{ color:var(--parchment-dim); font-size:.88rem; }
  .fr-dym-btn{ background:none; border:none; padding:0; font:inherit; font-weight:600; font-style:italic; color:var(--gold-bright); cursor:pointer; text-decoration:underline; }
  .fr-empty{ padding:16px 18px; color:var(--parchment-dim); }
  .fr-group{ padding:4px 0; }
  .fr-group + .fr-group{ border-top:1px solid var(--stone-3); }
  .fr-head{ padding:8px 18px 4px; font-family:'Cinzel',serif; font-size:.66rem; letter-spacing:.14em; text-transform:uppercase; color:var(--parchment-dim); }
  .fr-head span{ color:var(--gold); margin-left:4px; }
  .fr-item{ display:flex; align-items:center; gap:12px; padding:7px 18px; cursor:pointer; }
  .fr-item.is-active, .fr-item:hover{ background:rgba(201,162,39,.13); }
  .fr-thumb{ flex:none; display:flex; gap:3px; }
  .fr-thumb img, .fr-noimg{ width:38px; height:48px; object-fit:cover; object-position:50% 18%; border-radius:6px; border:1px solid var(--stone-3); background:var(--stone-1); display:block; }
  .fr-two img, .fr-two .fr-noimg{ width:30px; height:40px; }
  .fr-glyph{ flex:none; width:38px; height:38px; border-radius:50%; display:flex; align-items:center; justify-content:center; color:var(--gold-bright); border:1px solid rgba(201,162,39,.45); background:rgba(201,162,39,.08); }
  .fr-text{ min-width:0; display:flex; flex-direction:column; }
  .fr-title{ color:var(--parchment); font-size:1.02rem; line-height:1.25; }
  .fr-title mark{ background:none; color:var(--gold-bright); font-weight:700; }
  .fr-sub{ color:var(--parchment-dim); font-size:.8rem; line-height:1.3; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .fr-more{ display:block; margin:2px 18px 6px 68px; background:none; border:none; padding:2px 0; color:var(--gold); font-family:inherit; font-size:.86rem; cursor:pointer; }
  .fr-more:hover{ color:var(--gold-bright); text-decoration:underline; }
  .fr-foot{ padding:8px 18px 6px; border-top:1px solid var(--stone-3); color:var(--parchment-dim); font-size:.78rem; }
  @media (max-width:640px){
    .finder{ padding:0 12px; margin-top:12px; }
    .finder-box{ min-height:58px; padding:0 8px 0 14px; gap:8px; }
    .fr-foot{ display:none; }
    .finder-tip .finder-keys{ display:none; }
  }

  /* ============ v1.72: email only -- why it's safer ============ */
  .email-safe{
    max-width:1180px; margin:18px auto 26px; padding:0; border:1px solid rgba(201,162,39,.55); border-radius:16px;
    background:linear-gradient(180deg, rgba(201,162,39,.10), rgba(201,162,39,.03) 40%, rgba(20,15,10,.6));
    box-shadow:0 16px 40px rgba(0,0,0,.35);
  }
  .email-safe-wrap{ padding:0 20px; }
  .email-safe > summary{
    list-style:none; cursor:pointer; display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:8px 14px;
    padding:16px 20px; text-align:center;
  }
  .email-safe > summary::-webkit-details-marker{ display:none; }
  .es-icon{ color:var(--gold-bright); display:flex; }
  .es-title{ font-family:'Cinzel', Georgia, serif; font-size:clamp(1.05rem, 2.4vw, 1.45rem); color:var(--gold-bright); letter-spacing:.03em; }
  .es-more{ font-family:'Cinzel',serif; font-size:.66rem; letter-spacing:.1em; text-transform:uppercase; color:var(--parchment); border:1px solid rgba(201,162,39,.5); border-radius:14px; padding:4px 11px; }
  .email-safe .es-hide{ display:none; }
  .email-safe[open] .es-why{ display:none; }
  .email-safe[open] .es-hide{ display:inline; }
  .email-safe[open] > summary{ padding-bottom:4px; }
  .es-body{ padding:0 24px 22px; }
  .es-lead{ max-width:860px; margin:4px auto 18px; text-align:center; color:var(--parchment); font-size:1.08rem; line-height:1.55; }
  .es-grid{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; justify-content:center; gap:14px; }
  .es-grid li{ flex:0 1 calc((100% - 28px) / 3); }   /* v1.73: five reasons -- three, then two centred */
  .es-grid li{
    background:rgba(14,11,8,.55); border:1px solid var(--stone-3); border-radius:12px; padding:14px 16px 15px;
    color:var(--parchment-dim); font-size:.92rem; line-height:1.48;
  }
  .es-grid li b{ display:flex; align-items:center; gap:8px; color:var(--parchment); font-family:'Cinzel', Georgia, serif; font-size:.9rem; letter-spacing:.02em; margin-bottom:5px; }
  .es-grid li b svg{ color:var(--gold-bright); flex:none; }
  .es-close{ display:block; margin:14px auto 0; background:none; border:none; color:var(--parchment-dim); font-family:inherit; font-size:.85rem; cursor:pointer; text-decoration:underline; }
  @media (max-width:980px){ .es-grid li{ flex-basis:calc((100% - 14px) / 2); } }
  @media (max-width:620px){ .es-grid li{ flex-basis:100%; } .es-body{ padding:0 14px 16px; } }

  /* ============ v1.72: "Where to start" paths for series categories ============ */
  .path-box{ max-width:1240px; margin:26px auto 4px; border:1px solid rgba(201,162,39,.5); border-radius:14px;
    background:linear-gradient(180deg, var(--stone-2), var(--stone-1)); scroll-margin-top:96px; }
  .path-box > summary{ list-style:none; cursor:pointer; padding:16px 22px; text-align:center; }
  .path-box > summary::-webkit-details-marker{ display:none; }
  .path-box > summary h3{ display:inline; margin:0; font-family:'Cinzel', Georgia, serif; font-size:1.15rem; color:var(--gold-bright); }
  .path-box > summary span{ display:block; margin-top:3px; font-size:.82rem; color:var(--parchment-dim); }
  .path-box:not([open]) > summary span::after{ content:" \2014  show"; color:var(--gold); }
  #pathBody{ padding:0 22px 20px; }
  .path-note{ max-width:900px; margin:0 auto 14px; text-align:center; color:var(--parchment); font-size:.98rem; line-height:1.5; }
  .path-start{ display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:10px; margin:0 0 16px; }
  .path-label{ font-family:'Cinzel',serif; font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:#241a08; background:var(--gold-bright); border-radius:12px; padding:4px 10px; }
  .path-group{ border-top:1px solid var(--stone-3); padding:12px 0 6px; }
  .path-group h4{ margin:0 0 8px; font-family:'Cinzel', Georgia, serif; font-size:.9rem; color:var(--gold-bright); letter-spacing:.02em; }
  .pg-kind{ font-family:'EB Garamond',serif; font-style:italic; font-size:.8rem; color:var(--parchment-dim); letter-spacing:0; margin-left:6px; }
  .path-steps{ display:flex; flex-wrap:wrap; align-items:center; gap:6px 6px; }
  .ps-arrow{ color:var(--gold); font-size:.95rem; }
  .path-step{
    display:inline-flex; align-items:baseline; gap:6px; text-align:left; background:rgba(14,11,8,.55); color:var(--parchment);
    border:1px solid var(--stone-3); border-radius:10px; padding:6px 10px; font-family:inherit; font-size:.88rem; cursor:pointer; line-height:1.25;
  }
  .path-step:hover, .path-step:focus-visible{ border-color:var(--gold); background:rgba(201,162,39,.12); outline:none; }
  .path-step.is-big{ font-size:1rem; padding:9px 14px; border-color:rgba(201,162,39,.7); }
  .ps-n{ font-family:'Cinzel',serif; font-size:.7rem; color:#241a08; background:var(--gold); border-radius:50%; min-width:19px; height:19px; display:inline-flex; align-items:center; justify-content:center; align-self:center; }
  .ps-t{ color:var(--parchment); }
  .ps-who{ color:var(--parchment-dim); font-style:italic; font-size:.8em; }
  .path-pick{ display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:10px; margin:0 0 14px; }
  .path-pick label{ font-family:'Cinzel',serif; font-size:.78rem; letter-spacing:.08em; text-transform:uppercase; color:var(--parchment); }
  .path-pick select{
    max-width:100%; background:var(--stone-0); color:var(--parchment); border:1px solid var(--gold); border-radius:8px;
    padding:9px 12px; font-family:'EB Garamond',serif; font-size:1rem;
  }
  .pair-card, .cluster-head, .major-head{ scroll-margin-top:100px; }
  .back-row{ display:flex; flex-wrap:wrap; gap:6px 26px; margin:4px 0 6px; }
  .back-row .back-link{ margin-bottom:0; }
  @media (max-width:620px){ #pathBody{ padding:0 12px 16px; } .ps-who{ display:none; } }

  /* ============ v2.0: one page per category, ability and course ============ */
  .pair-talent a{ color:inherit; text-decoration:none; }
  .pair-talent a:hover, .pair-talent a:focus-visible{ text-decoration:underline; text-underline-offset:3px; outline:none; }
  .major-head a{ color:inherit; text-decoration:none; border-bottom:1px dotted rgba(240,200,105,.45); }
  .major-head a:hover{ color:var(--gold-bright); border-bottom-style:solid; }
  a.path-step{ text-decoration:none; color:inherit; }
  #trackView.is-single .pair-grid{ grid-template-columns:minmax(0, 640px); justify-content:center; }
  #trackView.is-single .pair-card{ padding:18px 18px 20px; }
  #trackView.is-single .pair-talent{ font-size:1.35rem; }
  #trackView.is-single .pair-explain{ font-size:.98rem; line-height:1.55; }
  #trackView.is-single .pair-person{ max-width:250px; }
  #trackView.is-single .pair-name{ font-size:1.1rem; }
  #trackView.is-single .pair-tag{ font-size:.9rem; }
  #trackView.is-single .pair-request{ font-size:.8rem; padding:6px 14px; }
  .related-box{ max-width:1180px; margin:34px auto 0; padding:20px 24px 22px; border:1px solid var(--stone-3); border-radius:12px;
    background:linear-gradient(180deg, var(--stone-2), var(--stone-1)); }
  .related-box h3{ margin:0 0 12px; text-align:center; font-family:'Cinzel', Georgia, serif; font-size:1.05rem; color:var(--gold-bright); }
  .related-list{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; justify-content:center; gap:8px 10px; }
  .related-list a{ display:inline-block; padding:5px 12px; border:1px solid rgba(201,162,39,.35); border-radius:14px;
    color:var(--parchment); text-decoration:none; font-size:.9rem; line-height:1.3; }
  .related-list a:hover, .related-list a:focus-visible{ border-color:var(--gold); background:rgba(201,162,39,.12); outline:none; }
  .related-all{ margin:14px 0 0; text-align:center; }
  .related-all a{ color:var(--gold-bright); }
  .site-links{ display:grid; grid-template-columns:repeat(auto-fit, minmax(170px, 1fr)); gap:14px 26px; max-width:1180px;
    margin:0 auto 26px; padding:0 4px 20px; text-align:left; border-bottom:1px solid var(--stone-3); }
  .site-links h4{ margin:0 0 6px; font-family:'Cinzel', Georgia, serif; font-size:.82rem; letter-spacing:.04em; }
  .site-links h4 a{ color:var(--gold-bright); text-decoration:none; }
  .site-links ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:3px; }
  .site-links li a{ color:var(--parchment-dim); text-decoration:none; font-size:.86rem; }
  .site-links a:hover{ text-decoration:underline; }

  /* ============ v2.2 (2026-10-18): the "We use email -- never chat" bar in a friendly green ============ */
  /* Troy: "change to green to make it more friendly". Only this bar (and its open panel) changes colour. */
  .email-safe{ border-color:rgba(110,205,125,.6);
    background:linear-gradient(180deg, rgba(90,190,110,.16), rgba(90,190,110,.05) 40%, rgba(12,22,14,.62)); }
  .email-safe > summary:hover{ background:rgba(110,205,125,.06); border-radius:16px; }
  .es-icon, .es-title{ color:#8fe3a0; }
  .es-more{ color:#d9f5df; border-color:rgba(110,205,125,.6); }
  .email-safe > summary:hover .es-more, .email-safe > summary:focus-visible .es-more{ background:rgba(110,205,125,.16); }
  .es-grid li{ border-color:rgba(110,205,125,.28); }
  .es-grid li b svg{ color:#8fe3a0; }