:root{--premium-ivory:#fbf7ed;--premium-navy:#081e3b;--premium-gold:#bd8731}
header.top,header.header{background:linear-gradient(105deg,#fffdf7 0%,#f9f2e2 55%,#efdfc0 100%)!important;border-bottom:1px solid #dac49c!important;box-shadow:0 4px 19px rgba(8,29,57,.06);color:#081e3b!important}
header.top .bar,header.header{color:#081e3b}header.top .nav a,header.top .back,header.header .back,header.header nav a{color:#203653!important}
header.top a.premiumBrand,header.header a.premiumBrand{display:inline-flex;align-items:center;gap:5px!important;flex:0 0 auto;min-width:0;text-decoration:none!important;color:#081e3b!important;letter-spacing:0!important}
header.top .premiumBook,header.header .premiumBook{display:block;flex:0 0 auto;width:55px!important;height:55px!important;object-fit:contain}
header.top .premiumWordmark,header.header .premiumWordmark{display:inline-flex;align-items:baseline;font-family:Arial,Helvetica,sans-serif;letter-spacing:-.058em;white-space:nowrap;font-size:clamp(19px,1.8vw,28px)!important;font-weight:950;line-height:1}
header.top .premiumUs,header.header .premiumUs{color:#061d3d}
header.top .premiumGold,header.header .premiumGold{background:linear-gradient(110deg,#91621a,#eac36f 38%,#b17c2a 73%,#f1d18b);-webkit-background-clip:text;background-clip:text;color:transparent}
header.top .premiumWordmark sup,header.header .premiumWordmark sup{font-family:Arial,sans-serif;color:#ac7b2a;font-size:.45em;line-height:0;letter-spacing:0;position:relative;top:-.62em;margin-left:2px}
header.top .langbtn,header.top .menuBtn{background:#fffaf1!important;color:#19324f!important;border-color:#d7c39f!important}
header.top a:focus-visible,header.header a:focus-visible{outline:2px solid #b88a34;outline-offset:4px}
@media(max-width:900px){header.top .premiumBook,header.header .premiumBook{width:44px!important;height:44px!important}header.top .premiumWordmark,header.header .premiumWordmark{font-size:22px!important}}
@media(max-width:520px){header.top .premiumBook,header.header .premiumBook{width:37px!important;height:37px!important}header.top .premiumWordmark,header.header .premiumWordmark{font-size:18px!important}header.top a.premiumBrand,header.header a.premiumBrand{gap:3px!important}header.top .bar{gap:6px!important}}
#home .heroCopy h1{font-family:Georgia,'Times New Roman',serif!important;letter-spacing:-.045em}
#home .heroPrimaryCta,#home .btnGold{background:linear-gradient(115deg,#f7d988,#dca63c)!important;color:#061b36!important;border-color:#dfb34a!important}
.clubHome{border:1px solid rgba(211,168,78,.7)!important;border-radius:24px!important;box-shadow:0 25px 62px rgba(8,23,45,.2)!important}
.clubHomeCopy{background:radial-gradient(circle at 90% 9%,rgba(214,171,80,.14),transparent 35%),linear-gradient(137deg,#091a36,#112f53)!important}
.clubHomeCopy h2{font-family:Georgia,'Times New Roman',serif!important;font-weight:700!important;letter-spacing:-.045em!important}
.clubPhotoMark{background:linear-gradient(100deg,#06162e,#15385c)!important;border-bottom-color:#d4aa61!important}
.clubHomeImage img{filter:saturate(1.08) contrast(1.02);object-position:center 42%}
.clubHomeButton{background:linear-gradient(115deg,#ffe09a,#dba33c)!important;color:#091d36!important}
@media(max-width:620px){#home .heroCopy h1{font-size:clamp(37px,9.8vw,60px)!important}.clubHome{border-radius:19px!important}}

/* Final identity (14 Oct): header only. Speaking Club and all page content unchanged. */
header.top,header.header{background:linear-gradient(110deg,#040e21,#071d39 54%,#113458)!important;border-bottom:1px solid #b98b48!important;box-shadow:0 4px 20px #03112535!important;color:#f6f8fc!important}
header.top .bar,header.top .w,header.header{color:#f6f8fc!important}
header.top .nav a,header.top .back,header.header .back,header.header nav a{color:#e9eef8!important}
header.top .nav a:hover,header.top .back:hover,header.header a:hover{color:#f5ce85!important}
header.top a.premiumBrand,header.header a.premiumBrand{display:inline-flex!important;align-items:center!important;gap:6px!important;min-width:0;flex:0 0 auto;text-decoration:none!important;color:#fff!important;letter-spacing:0!important}
header.top .premiumBook,header.header .premiumBook{width:44px!important;height:56px!important;flex:0 0 auto;object-fit:contain!important}
header.top .premiumLockup,header.header .premiumLockup{display:flex;flex-direction:column;align-items:flex-start;gap:3px;min-width:0}
header.top .premiumWordmark,header.header .premiumWordmark{display:inline-flex!important;align-items:baseline!important;font:850 clamp(20px,1.8vw,28px)/1 Arial,Helvetica,sans-serif!important;letter-spacing:-.055em!important;white-space:nowrap!important}
header.top .premiumUs,header.header .premiumUs{background:linear-gradient(#fff,#e8edf3 48%,#aebbc9);-webkit-background-clip:text;background-clip:text;color:transparent!important}
header.top .premiumGold,header.header .premiumGold{background:linear-gradient(132deg,#fff2bd,#dca954 52%,#f2cf7b 80%,#b78332);-webkit-background-clip:text;background-clip:text;color:transparent!important}
header.top .premiumWordmark sup,header.header .premiumWordmark sup{position:relative;top:-.55em;margin-left:3px;font-size:.63em!important;line-height:0;color:#f5ce83!important;font-weight:800}
header.top .premiumTagline,header.header .premiumTagline{display:flex;align-items:center;gap:6px;white-space:nowrap;font:600 9px/1.1 Arial,sans-serif;letter-spacing:.1em;color:#edc77e}
header.top .premiumTagline img,header.header .premiumTagline img{display:block;width:27px;height:17px;object-fit:contain}
header.top .premiumTagline i,header.header .premiumTagline i{width:1px;height:15px;background:#cc9f53}
header.top .langbtn,header.top .menuBtn,header.header .langbtn,header.header .menuBtn{background:#0e2745!important;border:1px solid #a4824d!important;color:#f8dfad!important;border-radius:12px!important;min-height:43px!important;box-shadow:none!important}
header.top .langbtn:hover,header.top .menuBtn:hover{background:#1b4265!important;border-color:#e9bf72!important}
header.top .langmenu,header.header .langmenu{background:#071931!important;border:1px solid #b08b50!important;border-radius:12px!important;box-shadow:0 14px 32px #0008!important;z-index:101}
header.top .langmenu button,header.header .langmenu button{background:transparent!important;color:#ecf1fa!important;border-radius:8px!important;min-height:43px}
header.top .langmenu button:hover,header.top .langmenu button:focus-visible{background:#24466b!important;color:#ffe0a0!important}
header.top .studentJoin{background:linear-gradient(115deg,#ffe19a,#d5a046)!important;color:#091e36!important;border:1px solid #ebc67d!important;font-weight:800!important;box-shadow:0 3px 11px #daaa4940!important}
header.top .mobileNav,header.top #mobileNav{background:#07172e!important;color:#eef3fa!important;border-color:#aa8548!important}
header.top .mobileNav a,header.top #mobileNav a{color:#f0e6d1!important}
header.top button:focus-visible,header.top a:focus-visible,header.header a:focus-visible{outline:3px solid #ffce78!important;outline-offset:3px!important}
@media(max-width:1430px){header.top .premiumTagline,header.header .premiumTagline{display:none}}
@media(max-width:900px){header.top .premiumBook,header.header .premiumBook{width:38px!important;height:48px!important}header.top .premiumWordmark,header.header .premiumWordmark{font-size:21px!important}}
@media(max-width:520px){header.top .premiumBook,header.header .premiumBook{width:31px!important;height:41px!important}header.top .premiumWordmark,header.header .premiumWordmark{font-size:clamp(15px,4.1vw,19px)!important}header.top a.premiumBrand,header.header a.premiumBrand{gap:3px!important}header.top .bar{gap:6px!important}header.top .tools{gap:5px!important}header.top .langbtn,header.top .menuBtn{min-width:39px!important;min-height:42px!important}header.top .studentJoin{padding:0 8px!important;min-height:42px!important;font-size:12px!important}}

/* Approved single-piece USFLUENT lockup — 2026-10-14. Logo, wordmark and underline must not be reconstructed as separate elements. */
header.top a.premiumBrand,header.header a.premiumBrand{
  display:block!important;position:relative!important;flex:0 0 224px!important;
  width:224px!important;max-width:224px!important;height:69px!important;min-height:0!important;
  background:url('/usfluent-lockup-2026.png') center center/contain no-repeat!important;
  overflow:visible!important;align-self:center!important;white-space:nowrap;
}
header.top a.premiumBrand>.premiumBook,header.header a.premiumBrand>.premiumBook,
header.top a.premiumBrand>.premiumLockup,header.header a.premiumBrand>.premiumLockup{
  position:absolute!important;width:1px!important;height:1px!important;
  margin:0!important;padding:0!important;overflow:hidden!important;
  clip-path:inset(50%)!important;white-space:nowrap!important;pointer-events:none!important;
}
@media(max-width:900px){
  header.top a.premiumBrand,header.header a.premiumBrand{flex-basis:185px!important;width:185px!important;max-width:185px!important;height:59px!important}
}
@media(max-width:520px){
  header.top a.premiumBrand,header.header a.premiumBrand{flex:0 0 clamp(126px,37vw,164px)!important;width:clamp(126px,37vw,164px)!important;max-width:clamp(126px,37vw,164px)!important;height:50px!important}
}



/* 2026-10-15: Public branded headers must stay navy in BOTH OS appearances.
   Specificity beats theme.css's body:not([data-resource-page="admin"]) .top
   light-mode selector, which previously painted the mobile Safari header white.
   Limit to public premium-brand headers; no change to student/admin content. */
body:not([data-resource-page="admin"]) > header.top:has(> .bar a.premiumBrand),
body:not([data-resource-page="admin"]) > header.header:has(> a.premiumBrand) {
  background:linear-gradient(110deg,#040e21 0%,#071d39 54%,#113458 100%)!important;
  background-color:#071d39!important;
  border-bottom:1px solid #b98b48!important;
  box-shadow:0 4px 20px rgba(3,17,37,.21)!important;
  color:#f6f8fc!important;
}
/* Keep the interior row transparent so it cannot form a white stripe. */
body:not([data-resource-page="admin"]) > header.top .bar {
  background:transparent!important;
  background-image:none!important;
}
/* Speaking Club uses header.header rather than header.top. */
body:not([data-resource-page="admin"]) > header.header a.back,
body:not([data-resource-page="admin"]) > header.header nav a {
  color:#eef3fa!important;
}
body:not([data-resource-page="admin"]) > header.header nav a[aria-current] {
  color:#07152f!important;
  background:#edf1f8!important;
}

/* 2026-10-15: permanent iPhone/iPad premium menu contrast invariant.
   Parent navigation uses warm-white text on navy, but the three utility cards
   deliberately use light fills: they MUST have their own dark typography.
   Use a more specific selector than header.top .mobileNav a !important.
   Applies identically in iOS automatic light and dark modes. */
@media(max-width:1399px){
  header.top .mobileNav.premiumMobileNav{
    background:#07172e!important;color:#f1f4fb!important;
    border-color:#bb9155!important;
    color-scheme:dark;
  }
  header.top .mobileNav.premiumMobileNav .mobileNavSectionLabel{
    color:#e6c37e!important;border-bottom-color:#56617a!important;
  }
  header.top .mobileNav.premiumMobileNav .mobileNavDivider{
    background:linear-gradient(90deg,transparent,#937a50,transparent)!important;
  }
  header.top .mobileNav.premiumMobileNav a.mobileNavItem:not(.active){
    color:#eef3fb!important;
  }
  header.top .mobileNav.premiumMobileNav a.mobileNavItem.active{
    color:#fff!important;
    background:linear-gradient(105deg,#173958,#1c4473)!important;
    border-radius:12px!important;
  }
  header.top .mobileNav.premiumMobileNav a.mobileNavItem .mobileNavArrow,
  header.top .mobileNav.premiumMobileNav a.mobileNavItem .mobileNavBadge{
    color:#f2d28f!important;
  }
  header.top .mobileNav.premiumMobileNav a.mobileNavStudent{
    background:linear-gradient(112deg,#f9f0dd,#f5e3b9)!important;
    color:#132d49!important;
    border:1px solid #d7b56f!important;
    border-radius:15px!important;
  }
  header.top .mobileNav.premiumMobileNav a.mobileNavStudent strong{
    color:#132d49!important;
    opacity:1!important;
  }
  header.top .mobileNav.premiumMobileNav a.mobileNavStudent small{
    color:#4c6077!important;
    opacity:1!important;
  }
  header.top .mobileNav.premiumMobileNav a.mobileNavStudent>b{
    color:#85631f!important;
  }
  header.top .mobileNav.premiumMobileNav .mobileNavUtilities{
    display:grid!important;
    grid-template-columns:minmax(0,1fr) auto!important;
    align-items:stretch!important;
    gap:10px!important;
    width:100%;min-width:0;
  }
  header.top .mobileNav.premiumMobileNav .mobileNavUtilities a.mobileNavLibrary{
    display:flex!important;flex-direction:column!important;
    align-items:flex-start!important;justify-content:center!important;
    gap:3px!important;min-width:0!important;
    padding:13px 15px!important;min-height:64px!important;
    background:#eaf0f6!important;
    color:#132d49!important;border:1px solid #c7d5e4!important;
    border-radius:14px!important;box-shadow:none!important;
  }
  header.top .mobileNav.premiumMobileNav .mobileNavUtilities a.mobileNavLibrary span{
    display:block!important;font-size:14px!important;line-height:1.3!important;
    font-weight:850!important;color:#122d4a!important;opacity:1!important;
  }
  header.top .mobileNav.premiumMobileNav .mobileNavUtilities a.mobileNavLibrary small{
    font-size:11px!important;font-weight:650!important;line-height:1.4!important;
    color:#4b5f75!important;opacity:1!important;
  }
  header.top .mobileNav.premiumMobileNav .mobileNavUtilities a.mobileNavContact{
    display:flex!important;flex-direction:row!important;
    align-items:center!important;justify-content:center!important;
    gap:9px!important;min-width:142px!important;min-height:64px!important;
    padding:13px 15px!important;border:1px solid #dfbb73!important;
    background:linear-gradient(115deg,#fff6e2,#f4dca8)!important;
    border-radius:14px!important;color:#17334d!important;
    font-weight:850!important;font-size:14px!important;
    text-align:center;white-space:nowrap;
  }
  header.top .mobileNav.premiumMobileNav .mobileNavUtilities a.mobileNavContact span,
  header.top .mobileNav.premiumMobileNav .mobileNavUtilities a.mobileNavContact b{
    color:#17334d!important;opacity:1!important;
  }
  header.top .mobileNav.premiumMobileNav .mobileNavUtilities a:focus-visible,
  header.top .mobileNav.premiumMobileNav a.mobileNavStudent:focus-visible{
    outline:3px solid #f6c979!important;outline-offset:3px!important;
  }
}
@media(max-width:360px){
  header.top .mobileNav.premiumMobileNav .mobileNavUtilities{
    grid-template-columns:minmax(0,1fr)!important;
  }
  header.top .mobileNav.premiumMobileNav .mobileNavUtilities a.mobileNavContact{
    min-width:0!important;width:100%;
  }
}

/* Homepage action hierarchy: personal lessons first; quiet corporate alternative. */
#home .heroActionsPremium{gap:12px}
#home .heroActionsPremium .heroPrimaryCta,
#home .heroActionsPremium .heroSecondaryCta{
  justify-content:center;min-height:48px;padding:12px 22px;border-radius:14px;
  font-size:15px;line-height:1.35;text-align:center;box-sizing:border-box;
}
#home .heroActionsPremium .heroPrimaryCta{font-weight:800;box-shadow:0 6px 18px rgba(217,166,46,.14)}
#home .heroActionsPremium .heroSecondaryCta{
  border:1px solid rgba(229,200,137,.42);background:rgba(255,255,255,.025);
  color:#e7eaf0;font-weight:650;text-decoration:none;box-shadow:none;
}
#home .heroActionsPremium .heroSecondaryCta:after{content:none}
#home .heroActionsPremium .heroSecondaryCta:hover{border-color:#d9b96f;background:rgba(255,255,255,.06);color:#fff}
#home .heroActionsPremium a:focus-visible{outline:2px solid #f4d274;outline-offset:4px}
@media(max-width:620px){
  #home .heroActionsPremium .heroPrimaryCta,
  #home .heroActionsPremium .heroSecondaryCta{width:100%;margin:0;padding:12px 16px;font-size:14px}
}

/* Phone-only first-screen contact visibility; no layout or footer size changes. */
@media(max-width:620px){
  html:not(.mobileContactRevealed) body:has(#home) .waFloat:not(.waDocked),html:not(.mobileContactRevealed) .individualPage .waFloat:not(.waDocked){
    visibility:hidden!important;opacity:0!important;pointer-events:none!important;
  }
}