/* ASMET 2027 — base: reset, scrollbars, header, navigation, responsive
   Generated from the approved design. Edit here, not inline in templates. */

/* <picture> is a wrapper, not a box. Left as the default inline it becomes the
   flex child in .lockup, .flock and .dplate instead of the <img> it contains,
   and every "img{height:...}" rule stops sizing what actually lays out — which
   showed up as 0.088 CLS on the contact page.
   inline-flex makes the picture shrink-wrap its <img>, so those rules keep
   working. display:contents does the same job but was measured at +582 ms of
   Style & Layout and +270 ms TBT on the home page — do not reintroduce it. */
/* the speaker cards size the image, not the wrapper */
.spkphoto picture{display:block;width:100%;height:100%}

/* ============ SCROLLBARS ============ */
/* page — subtle, matches the mist palette */
html{scrollbar-width:thin;scrollbar-color:#B4C6D9 #EFF3F8}
html::-webkit-scrollbar{width:12px;height:12px}
html::-webkit-scrollbar-track{background:#EFF3F8}
html::-webkit-scrollbar-thumb{background:#B4C6D9;border-radius:99px;
border:3px solid #EFF3F8;background-clip:content-box}
html::-webkit-scrollbar-thumb:hover{background:var(--teal-dark);background-clip:content-box}

/* dark surfaces — the menu panel */
.mainnav .wrap{scrollbar-width:thin;scrollbar-color:rgba(127,227,212,.40) rgba(255,255,255,.06)}
.mainnav .wrap::-webkit-scrollbar{width:12px}
.mainnav .wrap::-webkit-scrollbar-track{background:rgba(255,255,255,.05)}
.mainnav .wrap::-webkit-scrollbar-thumb{background:rgba(127,227,212,.40);border-radius:99px;
border:3px solid transparent;background-clip:content-box}
.mainnav .wrap::-webkit-scrollbar-thumb:hover{background:var(--teal);background-clip:content-box}

/* light inner scroll areas — wide tables and the sticky sub-nav */
.tblwrap,.subnav .wrap{scrollbar-width:thin;scrollbar-color:#C4D2E0 transparent}
.tblwrap::-webkit-scrollbar,.subnav .wrap::-webkit-scrollbar{width:10px;height:10px}
.tblwrap::-webkit-scrollbar-track,.subnav .wrap::-webkit-scrollbar-track{background:transparent}
.tblwrap::-webkit-scrollbar-thumb,.subnav .wrap::-webkit-scrollbar-thumb{background:#C4D2E0;
border-radius:99px;border:3px solid transparent;background-clip:content-box}
.tblwrap::-webkit-scrollbar-thumb:hover,.subnav .wrap::-webkit-scrollbar-thumb:hover{
background:var(--teal-dark);background-clip:content-box}

/* ============ SCREEN-READER-ONLY ============ */
.sr{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}

/* ============ SKIP LINK ============ */
.skip{position:fixed;left:12px;top:12px;z-index:300;background:var(--ink);color:#fff;
padding:12px 20px;border-radius:var(--r-sm);text-decoration:none;font-weight:600;
transform:translateY(-160%);transition:transform .16s ease}
.skip:focus{transform:translateY(0)}

/* ============ HEADER ============ */
.topstrip{background:var(--grad);color:#CFE3F2;font-size:12.5px;padding:9px 0}
.topstrip .wrap{display:flex;justify-content:space-between;align-items:center;gap:16px}
.topstrip .mono{color:#9FC2DE;letter-spacing:.05em;font-size:11.5px}
.topstrip nav a{color:#fff;text-decoration:none;font-weight:600;margin-left:22px}
.topstrip nav a:hover{color:#7FE3D4}

.hdr{background:#fff;border-bottom:1px solid var(--line);position:sticky;top:0;z-index:100}
.hdr .wrap{display:flex;align-items:center;justify-content:space-between;gap:22px;padding-top:14px;padding-bottom:14px}
.lockup{display:flex;align-items:center;gap:16px;text-decoration:none}
.lockup img.asmet{height:44px;width:auto;display:block}
.lockup .sep{width:1px;height:46px;background:var(--line);flex:none}
.lockup img.crest{height:56px;width:auto;display:block}
.hdrtext{line-height:1.3}
.hdrtext .k{font-family:var(--disp);font-weight:700;font-size:15px;color:var(--ink)}
.hdrtext .s{font-size:12.5px;color:var(--slate)}
.hdr .cta{display:flex;gap:10px;align-items:center}

.mainnav{background:var(--ink)}
.mainnav .wrap{display:flex;padding:0 24px;gap:0;flex-wrap:wrap}
.mainnav a{color:#C3D3E6;text-decoration:none;font-size:12.5px;font-weight:600;letter-spacing:.04em;
text-transform:uppercase;padding:15px 15px;display:block;border-bottom:3px solid transparent;white-space:nowrap}
.mainnav a:hover{color:#fff;background:rgba(255,255,255,.05)}
.mainnav a.on{color:#fff;border-bottom-color:var(--teal)}
.navtoggle{display:none}
.drawer-top,.drawer-foot{display:none}

/* social */
.social{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.social a{width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;
border:1px solid rgba(255,255,255,.22);background:rgba(255,255,255,.05);color:#C3D3E6;
transition:background .18s,color .18s,border-color .18s}
.social a:hover{background:var(--teal);border-color:var(--teal);color:#052620}
.social svg{width:17px;height:17px;fill:currentColor;display:block}
.social-lbl{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
color:#7F98B4;margin:0 0 12px}

/* dropdowns */
.navitem{position:relative}
.navbtn{font-family:var(--body);color:#C3D3E6;font-size:12.5px;font-weight:600;letter-spacing:.04em;
text-transform:uppercase;padding:15px 15px;background:transparent;border:0;border-bottom:3px solid transparent;
cursor:pointer;display:flex;align-items:center;gap:7px;white-space:nowrap}
.navbtn .car{font-size:9px;opacity:.7;transition:transform .15s}
.navbtn:hover{color:#fff;background:rgba(255,255,255,.05)}
.navitem.on .navbtn{color:#fff;border-bottom-color:var(--teal)}
.navitem:hover .navbtn .car,.navitem.open .navbtn .car{transform:rotate(180deg)}
.drop{position:absolute;top:100%;left:0;min-width:274px;background:#fff;border:1px solid var(--line);
border-top:3px solid var(--teal);box-shadow:var(--sh-lg);border-radius:0 0 var(--r-md) var(--r-md);
padding:8px 0;display:none;z-index:130}
.navitem:hover .drop,.navitem.open .drop{display:block}
.drop a{display:block;color:var(--ink);text-transform:none;font-size:14.5px;font-weight:500;
letter-spacing:0;padding:10px 20px;border-bottom:0;white-space:nowrap}
.drop a:hover{background:var(--mist);color:var(--teal-dark)}

/* ---------------------------------------------------------------------------
   The hidden attribute must win.

   Its UA default is display:none, but that loses to any class rule that sets a
   display - and .field{display:flex} does exactly that. The result was the
   honeypot field ("Leave this field empty") rendering as a real input on the
   register and contact forms: visible to people, and useless as a spam trap
   once a bot can see it is the odd one out.
--------------------------------------------------------------------------- */
[hidden]{display:none!important}