/* TLT-HEADER-UNIFIED: one header for every page (desktop). Loaded last on each page so it
   replaces the slightly different header rules that individual page files carried.
   Phones and tablets (900px and narrower) are not touched here: global.css and mobile-menu.js handle them. */
@media (min-width:901px){
  header.nav{position:fixed;top:0;left:0;right:0;z-index:100;display:flex;flex-direction:row;align-items:center;justify-content:center;gap:15mm;
    width:auto;margin:0;padding:14px clamp(20px,5vw,64px) 14px;background:#fff;box-shadow:0 1px 0 rgba(20,30,40,.10);
    font-family:'Inter',sans-serif;font-size:16px;line-height:normal;font-weight:400;white-space:normal;box-sizing:border-box}
  header.nav *{box-sizing:border-box}
  header.nav .brand{display:flex;align-items:center;justify-content:flex-start;flex:none}
  header.nav .brand-logo{height:59.375px;width:auto;max-width:none;display:block;flex:none}
  header.nav nav.links{display:flex;gap:34px;align-items:center;flex-wrap:wrap;white-space:normal;line-height:normal}
  header.nav .nav-item{position:relative;white-space:normal;line-height:normal}
  header.nav .nav-item > a{font-family:'Inter',sans-serif;font-size:.862rem;letter-spacing:.06em;text-transform:uppercase;font-weight:600;padding:8px 0;line-height:normal;color:#0A1D30;white-space:normal;text-decoration:none;transition:opacity .3s}
  header.nav .nav-item > a:hover{opacity:.6}
  header.nav .nav-item.current > a{text-decoration:underline;text-decoration-color:currentColor;text-decoration-thickness:1.5px;text-underline-offset:6px}
  header.nav .nav-item .sub{position:absolute;top:100%;left:-19.56px;transform:translateY(6px);background:#FDFCF9;border:1px solid rgba(20,30,40,.10);
    border-radius:10px;padding:7.56px;min-width:236px;box-shadow:0 18px 40px rgba(10,20,30,.14);opacity:0;pointer-events:none;white-space:normal;
    transition:opacity .25s cubic-bezier(.22,.7,.2,1),transform .25s cubic-bezier(.22,.7,.2,1);transition-delay:0s,0s}
  header.nav .nav-item:hover .sub,header.nav .nav-item.open .sub{opacity:1;pointer-events:auto;transform:translateY(10px)}
  header.nav .nav-item.closing .sub{transition-delay:.45s,.45s}
  header.nav .nav-item .sub a{display:block;padding:9px 12px;border-radius:6px;font-family:'Inter',sans-serif;font-size:.9853rem;line-height:normal;color:#151A1F;font-weight:500;text-transform:none;letter-spacing:0;white-space:normal;text-decoration:none}
  header.nav .nav-item .sub a.current{text-decoration:underline;text-decoration-color:currentColor;text-decoration-thickness:1.5px;text-underline-offset:4px}
  header.nav .nav-item .sub a:hover{background:#F4F1E9;text-shadow:0 2px 6px rgba(21,26,31,.15)}
  /* The gold button: the same size on every page, whichever words it carries */
  header.nav .nav-cta{display:inline-flex;align-items:center;justify-content:center;text-align:center;gap:8px;box-sizing:border-box;
    width:17.5em;min-width:17.5em;font-family:'Inter',sans-serif;font-size:.78rem;line-height:normal;letter-spacing:.08em;text-transform:uppercase;font-weight:700;
    padding:12px 24px;border-radius:100px;border:1px solid #9C824A;color:#0A1D30;background:#C9A84C;cursor:pointer;white-space:nowrap;text-decoration:none;
    transition:background .4s cubic-bezier(.22,.7,.2,1),color .4s cubic-bezier(.22,.7,.2,1),box-shadow .4s cubic-bezier(.22,.7,.2,1),transform .3s cubic-bezier(.22,.7,.2,1);
    box-shadow:0 8px 24px rgba(201,168,76,.4);text-shadow:0 1px 1px rgba(255,255,255,.55),0 -1px 0 rgba(10,29,48,.22)}
  header.nav .nav-cta[href*="join-the-mission"]{letter-spacing:.16em}
  header.nav .nav-cta:hover{background:#164C77;border-color:#164C77;color:#fff;box-shadow:0 10px 28px rgba(22,76,119,.4);transform:translateY(-1px);text-shadow:none}
  header.nav .menu-btn{display:none}
}

/* Tablets and smaller laptops where the menu wraps onto two lines: the open dropdown must sit above the second line of menu words. */
@media (min-width:901px){ header.nav .nav-item .sub{z-index:20;} }

/* ===== Tablets held in landscape (touch screens 901px and wider): the whole top menu on one line, menu text at full size.
   Home is hidden (the logo already links home) except on the widest tablets (1300px and up); the logo and button are 10% smaller;
   the button reads "Book a Free Call" (text swapped by mobile-menu.js) with tight side padding; 35% less space between menu words;
   the logo and the button sit the same distance from the left and right edges. Desktop computers are not affected. ===== */
@media (min-width:901px) and (orientation:landscape) and (hover:none) and (pointer:coarse){
  header.nav{justify-content:space-between;gap:24px;padding-left:calc(clamp(20px,5vw,64px)*.6);padding-right:calc(clamp(20px,5vw,64px)*.6);}
  header.nav .brand-logo{height:53.44px;}
  header.nav nav.links{gap:22.1px;flex-wrap:nowrap;}
  header.nav nav.links > .nav-item,header.nav nav.links > .nav-item > a{white-space:nowrap;flex:none;}
  header.nav nav.links > .nav-item:first-child{display:none;}
  header.nav .nav-cta,header.nav .nav-cta[href*="join-the-mission"]{font-size:.702rem;width:auto;min-width:0;padding-left:14px;padding-right:14px;letter-spacing:.08em;}
}
@media (min-width:901px) and (max-width:1100px) and (orientation:landscape) and (hover:none) and (pointer:coarse){
  header.nav{gap:18px;padding-left:20px;padding-right:20px;}
  header.nav .nav-cta,header.nav .nav-cta[href*="join-the-mission"]{letter-spacing:.04em;}
  header.nav .nav-item > a{letter-spacing:.045em;}
}
@media (min-width:901px) and (max-width:1060px) and (orientation:landscape) and (hover:none) and (pointer:coarse){
  header.nav{gap:14px;}
  header.nav nav.links{gap:18px;}
}
/* Widest tablets (iPad Pro 13 and similar): Home comes back and the logo and button get more room from the edges. */
@media (min-width:1300px) and (orientation:landscape) and (hover:none) and (pointer:coarse){
  header.nav{padding-left:60px;padding-right:60px;}
  header.nav nav.links > .nav-item:first-child{display:block;}
}