/* Mega menu, cards, and motion. Loaded on every page. */

/* ---- header shell ------------------------------------------------------ */
.hd{position:sticky}
.hd .wrap{gap:26px}
.pnav{margin-right:auto}
.pnav-l{display:flex;align-items:center;gap:4px;list-style:none;margin:0;padding:0}
.pnav-l > li{position:static}
.pnav-l a,.mtrig{font:500 14px/1 'Inter',sans-serif;color:var(--body);text-decoration:none;
 background:none;border:0;padding:10px 12px;border-radius:5px;cursor:pointer;
 display:inline-flex;align-items:center;gap:6px}
.pnav-l a:hover,.mtrig:hover{color:var(--teald);background:var(--tint)}
.mtrig[aria-expanded=true]{color:var(--teald);background:var(--tint)}
.chev{transition:transform .18s ease;opacity:.6}
.mtrig[aria-expanded=true] .chev{transform:rotate(180deg)}
.pnav-l a:focus-visible,.mtrig:focus-visible{outline:2px solid var(--teal);outline-offset:2px}

/* ---- mega panel -------------------------------------------------------- */
.mega{position:absolute;left:50%;transform:translateX(-50%) translateY(-6px);top:100%;
 width:min(var(--shell),calc(100vw - 32px));background:#fff;border:1px solid var(--line);
 border-radius:10px;box-shadow:0 18px 48px -16px rgba(0,32,50,.28),0 2px 6px rgba(0,32,50,.06);
 z-index:60;opacity:0;pointer-events:none;transition:opacity .16s ease,transform .16s ease}
.mega[data-open]{opacity:1;transform:translateX(-50%) translateY(0);pointer-events:auto}
.mega > .wrap{padding:26px 30px 22px;max-width:none}
.mgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px 34px}
.mgrid-4{grid-template-columns:repeat(4,1fr)}
.mgrid-3{grid-template-columns:1.1fr 1fr .9fr}
.mch{font-size:11px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;
 color:var(--teald);margin:0 0 4px}
.mcb{font-size:12.5px;color:var(--body);opacity:.72;margin:0 0 10px;line-height:1.45}
.mcol ul{list-style:none;margin:0;padding:0}
.mcol li{margin:0}
.mcol li a{display:flex;align-items:center;gap:9px;padding:7px 8px;margin-left:-8px;
 font-size:13.5px;color:var(--ink);border-radius:6px;line-height:1.3}
.mcol li a .ico{color:var(--teal);flex:none;transition:transform .16s ease}
.mcol li a:hover{background:var(--tint);color:var(--teald)}
.mcol li a:hover .ico{transform:translateX(2px)}
.mcol-cta{border-left:1px solid var(--line);padding-left:26px}
.mcol-cta .btn{margin-top:4px;font-size:13px;padding:10px 16px}
.mfoot{display:flex;flex-wrap:wrap;gap:20px;margin-top:22px;padding-top:16px;
 border-top:1px solid var(--line)}
.mfoot a{font-size:13px;font-weight:600;color:var(--teald);text-decoration:none}
.mfoot a:hover{text-decoration:underline;text-underline-offset:3px}

/* ---- mobile drawer ----------------------------------------------------- */
.navtog{display:none;background:none;border:1px solid var(--line);border-radius:6px;
 padding:9px 11px;cursor:pointer;color:var(--ink);margin-left:auto}
.navtog:focus-visible{outline:2px solid var(--teal);outline-offset:2px}
@media(max-width:900px){
 .navtog{display:inline-flex}
 .hd .cta{display:none}
 /* .hd nav in site.css sets display:flex at a higher specificity than a bare
    .pnav, so the drawer rules have to be qualified or it never closes. */
 .hd .pnav{position:fixed;inset:64px 0 0;background:var(--paper);overflow-y:auto;
  margin:0;padding:8px 20px 40px;border-top:1px solid var(--line);display:none;z-index:70}
 .hd .pnav[data-open]{display:block}
 .pnav-l{flex-direction:column;align-items:stretch;gap:0}
 .pnav-l > li{border-bottom:1px solid var(--line);position:static}
 .pnav-l > li > a,.mtrig{width:100%;justify-content:space-between;padding:15px 4px;
  font-size:16px;border-radius:0}
 .mega{position:static;transform:none;width:auto;border:0;box-shadow:none;opacity:1;
  pointer-events:auto;background:transparent;border-radius:0}
 .mega > .wrap{padding:0 0 14px}
 .mgrid,.mgrid-3,.mgrid-4{grid-template-columns:1fr;gap:16px}
 .mcol-cta{border-left:0;padding-left:0}
 .mcol li a{font-size:15px;padding:9px 8px}
 .mfoot{margin-top:14px}
}

/* ---- card grids -------------------------------------------------------- */
/* Hairlines are drawn by each card rather than by a coloured container showing
   through the gaps, so a family that does not fill its last row leaves white
   space instead of a grey slab. */
/* --cols is set per grid by card_cols(), and is the count that fills the last
   row at full width. The max() hands the decision back to the 228px minimum as
   soon as that many columns would be too narrow, so the grid still collapses on
   its own down the breakpoints. */
.cards{display:grid;
 grid-template-columns:repeat(auto-fill,minmax(max(228px,calc(100%/var(--cols,5) - .02px)),1fr));
 background:#fff;border:1px solid var(--line);border-radius:8px;overflow:hidden}
.card{background:#fff;padding:18px 18px 16px;text-decoration:none;display:block;
 box-shadow:inset -1px -1px 0 0 var(--line);
 transition:background .16s ease}
.card:hover{background:var(--tint)}
.card .ico{color:var(--teal);display:block;margin:0 0 12px;transition:transform .2s ease}
.card:hover .ico{transform:translateY(-2px)}
.card b{display:block;font-size:14.5px;font-weight:650;color:var(--ink);margin:0 0 5px;
 letter-spacing:-.01em}
.card span{display:block;font-size:12.5px;color:var(--body);opacity:.78;line-height:1.5}
.card:focus-visible{outline:2px solid var(--teal);outline-offset:-2px}

.famhead{display:flex;align-items:baseline;flex-wrap:wrap;gap:12px;margin:26px 0 12px}
.famhead h3{margin:0;font-size:12px;letter-spacing:.13em;text-transform:uppercase;color:var(--teald)}
.famhead p{margin:0;font-size:13px;opacity:.7;max-width:48ch}
.famhead:first-of-type{margin-top:4px}
/* A point that holds across a whole family rather than any one category in it. */
.famnote{flex-basis:100%;display:flex;align-items:flex-start;gap:8px;margin:2px 0 0;
 font-size:13px;line-height:1.5;color:var(--teald);background:var(--tint);
 border-radius:8px;padding:9px 12px;max-width:74ch;opacity:1}
.famnote .ico{flex:none;margin-top:2px;color:var(--teal)}
/* auto-fill leaves empty tracks, which is right under a family heading where the
   grid is one of several. A standalone set of three wants the row filled instead. */
.cards.fit{grid-template-columns:repeat(auto-fit,minmax(228px,1fr))}
/* A grid that follows prose directly has no famhead above it to space it off. */
.wrap > p + .cards,.split-c > p + .cards{margin-top:24px}
.wrap > .cards + .lg{margin-top:18px}

/* ---- hero canvas ------------------------------------------------------- */
.hero{position:relative;overflow:hidden}
.hero > .wrap{position:relative;z-index:2}
#loopfx{position:absolute;inset:0;width:100%;height:100%;z-index:1;opacity:0;
 transition:opacity 1.1s ease;pointer-events:none}
#loopfx[data-ready]{opacity:1}
.hero-fallback{position:absolute;right:-8%;top:50%;transform:translateY(-50%);
 width:min(560px,52vw);aspect-ratio:1;z-index:0;pointer-events:none;
 background:radial-gradient(circle at 50% 50%,rgba(8,144,160,.16),rgba(8,144,160,0) 62%)}
@media(max-width:900px){.hero-fallback{right:-30%;opacity:.7}}

/* ---- scroll reveal ----------------------------------------------------- */
.js [data-reveal]{opacity:0;transform:translateY(14px);
 transition:opacity .55s cubic-bezier(.22,.61,.36,1),transform .55s cubic-bezier(.22,.61,.36,1)}
.js [data-reveal][data-shown]{opacity:1;transform:none}

@media(prefers-reduced-motion:reduce){
 .mega,.chev,.card,.card .ico,.mcol li a .ico,#loopfx{transition:none}
 .js [data-reveal]{opacity:1;transform:none;transition:none}
}