/* UEB readability review · 2026-07-22
   Temporary visual layer for a lighter, higher-contrast version of the site. */

:root{
  --black:#0c141d!important;
  --ink:#121f2b!important;
  --deep:#17293a!important;
  --navy:#203a52!important;
  --navy-l:#2b506d!important;
  --lh:#17293a!important;
  --lb:#346482!important;
  --l2:#79a3b8!important;
  --l3:#abc7d6!important;
  --gold:#d4a24a!important;
  --gold-l:#f0c36c!important;
  --gold-d:#a97d32!important;
  --gold-bg:rgba(212,162,74,.14)!important;
  --gold-bd:rgba(212,162,74,.42)!important;
  --cream:#fff8ec!important;
  --muted:#c5d6e3!important;
  --text:#edf5fb!important;
  --tw:#ffffff!important;
  --t1:#edf5fb!important;
  --t2:#c5d6e3!important;
  --t3:#a8bfce!important;
  --w1:rgba(255,255,255,.14)!important;
  --w2:rgba(255,255,255,.24)!important;
  --w3:rgba(255,255,255,.34)!important;
  --fs:"Inter Tight",Arial,sans-serif!important;
  --fc:"Inter Tight",Arial,sans-serif!important;
  --fb:"Inter",Arial,sans-serif!important;
  --fm:"JetBrains Mono",monospace!important;
  --bg:#0c141d!important;
  --t:#ffffff!important;
  --line:rgba(255,255,255,.18)!important;
  --soft:rgba(255,255,255,.08)!important;
  --ueb-menu-black:#0c141d!important;
  --ueb-menu-ink:#121f2b!important;
  --ueb-menu-gold:#d4a24a!important;
  --ueb-menu-gold-soft:#f0c36c!important;
  --ueb-menu-gold-line:rgba(212,162,74,.42)!important;
  --ueb-menu-text:#ffffff!important;
  --ueb-menu-muted:#c5d6e3!important;
  --ueb-menu-dim:#a8bfce!important;
  --ueb-menu-line:rgba(255,255,255,.16)!important;
  --ueb-menu-line-strong:rgba(255,255,255,.28)!important;
}

html{
  background:#0c141d!important;
}

body{
  background:
    radial-gradient(circle at 22% 0%,rgba(52,100,130,.36),transparent 34%),
    radial-gradient(circle at 82% 18%,rgba(212,162,74,.14),transparent 32%),
    linear-gradient(180deg,#0c141d 0%,#121f2b 48%,#0c141d 100%)!important;
  color:var(--text)!important;
  font-family:var(--fb)!important;
  font-size:17.5px!important;
  line-height:1.72!important;
  text-rendering:optimizeLegibility!important;
}

h1,h2,h3,h4,
.h1,.h2,.h3,
.hero h1,.hero-title,.section-title,.blog-hero h1,.article-hero h1,
.intro-grid h2,.related h2,.article-content h2,.cs h3,
.team-name,.team-name-full,.profile h3,.card h3,.blog-card h3{
  font-family:var(--fc)!important;
  font-weight:750!important;
  letter-spacing:-.015em!important;
  color:#fff!important;
  text-wrap:balance;
}

p,li,
.lead,.leadp,.hero-sub,.section-lead,.intro-grid p,.article-content p,
.team-bio,.team-spec,.profile p,.blog-card p,.aside-box p,.foot-tag{
  color:var(--text)!important;
}

.muted,.eyebrow,.hero-k,.article-k,.lbl,.label,
.nav-tag,.nav-clock-lbl,.blog-card-top span{
  color:var(--gold-l)!important;
}

.lead,.hero-sub,.section-lead,.article-hero p,.blog-hero p{
  max-width:820px!important;
}

#nav{
  background:rgba(15,25,36,.94)!important;
  border-bottom-color:var(--gold-bd)!important;
  box-shadow:0 14px 36px rgba(0,0,0,.24)!important;
}

#nav,
#nav *,
#mob-menu,
#mob-menu *{
  font-family:var(--fb)!important;
}

#nav .nav-tag,
#nav .nav-clock,
#nav .nav-clock-lbl,
#nav .nav-clock-t,
#nav .lang-btn,
#nav .nav-cta,
#nav .nav-links>a,
#nav .nav-dd-trigger,
#nav .nav-dd-menu a,
#mob-menu .mob-lang-btn{
  font-family:var(--fm)!important;
}

#nav .nav-name,
.mob-links>a,
.mob-partners-h{
  font-family:var(--fc)!important;
}

#nav .nav-links>a,
#nav .nav-dd-trigger,
#nav .nav-dd-menu a,
.lang-btn,
.lang-opt-name{
  color:var(--t2)!important;
}

#nav .nav-links>a:hover,
#nav .nav-dd-trigger:hover,
#nav .nav-links>a.active,
#nav .nav-dd-menu a:hover,
#nav .nav-dd-menu a.active{
  color:var(--gold-l)!important;
}

#nav .nav-dd-menu,
.lang-dd{
  background:rgba(18,31,43,.98)!important;
  border-color:var(--gold-bd)!important;
}

#mob-menu{
  background:rgba(15,25,36,.985)!important;
}

.team-card,.team-card-full,.why-card,.cap-card,.partner-card,.metric,.profile,
.cat-card,.blog-card,.aside-box,.article-cta,.cs-in,.form,.contact-copy,
.course-card,.course-strip,.product-tile,.featured-img,.story-media,
.exclusive-pill,.exclusivity-panel,.module,.panel,.card,.feature-card,
.op-card,.step-card,.trust-card,.stat-card,.logo-card{
  background:linear-gradient(180deg,rgba(31,58,82,.78),rgba(18,31,43,.88))!important;
  border-color:rgba(255,255,255,.18)!important;
  box-shadow:0 18px 52px rgba(0,0,0,.18)!important;
}

.team-card:hover,.team-card-full:hover,.why-card:hover,.cap-card:hover,
.partner-card:hover,.profile:hover,.cat-card:hover,.blog-card:hover,
.product-tile:hover,.course-card:hover,.feature-card:hover,.op-card:hover{
  border-color:var(--gold-bd)!important;
  background:linear-gradient(180deg,rgba(43,80,109,.82),rgba(22,43,61,.92))!important;
}

.hero::before,.blog-hero:after,.article-hero:after{
  background:
    linear-gradient(180deg,rgba(12,20,29,.32),rgba(12,20,29,.86)),
    linear-gradient(90deg,rgba(12,20,29,.86),rgba(12,20,29,.48),rgba(12,20,29,.70))!important;
}

footer{
  background:#101b27!important;
  border-top-color:rgba(255,255,255,.16)!important;
}

footer a,.foot-col a,.foot-bot,.foot-bot a{
  color:var(--t2)!important;
}

.foot-address,
.foot-col .foot-address{
  display:block!important;
  font-family:var(--fm)!important;
  font-size:.62rem!important;
  line-height:1.55!important;
  letter-spacing:.02em!important;
  color:rgba(237,245,251,.82)!important;
  padding:5px 0!important;
}

input,select,textarea{
  background:rgba(255,255,255,.08)!important;
  border-color:rgba(255,255,255,.22)!important;
  color:#fff!important;
}

input::placeholder,textarea::placeholder{
  color:rgba(237,245,251,.58)!important;
}

.btn-g,.cbg,.aside-cta,.nav-cta{
  background:linear-gradient(135deg,var(--gold),var(--gold-l))!important;
  color:#10131a!important;
}

.btn-o,.cbo{
  border-color:rgba(255,255,255,.28)!important;
  color:#fff!important;
  background:rgba(255,255,255,.06)!important;
}

@media(max-width:720px){
  body{font-size:16.5px!important}
  .w{padding-inline:max(18px,env(safe-area-inset-left))!important}
}

/* UEB contrast correction · 2026-07-22
   Light surfaces need dark text. This layer intentionally sits after the
   global readability rules so it wins over earlier white text overrides. */
:root{
  --light-ink:#102235!important;
  --light-text:#263c50!important;
  --light-muted:#5d7284!important;
  --light-line:rgba(16,34,53,.18)!important;
  --light-soft:rgba(16,34,53,.07)!important;
  --light-gold:#94691f!important;
}

:is(
  #caps,
  #cta,
  .nos-numbers,
  .cap,
  .dist-card,
  .cert-logo-card,
  .cert-logo-box,
  .sol-card,
  .aud-card,
  .product-card,
  .shop-band,
  .shop-item,
  .price-box,
  .price-main,
  .price-side,
  .light,
  .section-light,
  .surface-light,
  .light-card,
  .white-card,
  .cream-card,
  .paper-card,
  .legal,
  .legal-card,
  .company,
  .logo-card,
  .logos-card,
  .logo-tile,
  .logo-strip,
  .logo-wall,
  .brand-logo,
  .brand-tile,
  .partner-logo,
  .partner-logo-card,
  .partners-logo-card,
  .cert-card,
  .certification-card,
  .cert-grid > *,
  .training-logo,
  .recognition-card,
  .organism-card,
  .showroom-card,
  .showroom-copy,
  .showroom-panel,
  .course-light,
  .course-price-card,
  .course-table,
  .pricing-card,
  .price-card,
  .shop-card,
  .product-spec,
  .product-info,
  .landing-light,
  .faq-light
){
  color:var(--light-text)!important;
  text-shadow:none!important;
}

:is(
  #caps,
  #cta,
  .nos-numbers,
  .cap,
  .dist-card,
  .cert-logo-card,
  .cert-logo-box,
  .sol-card,
  .aud-card,
  .product-card,
  .shop-band,
  .shop-item,
  .price-box,
  .price-main,
  .price-side,
  .light,
  .section-light,
  .surface-light,
  .light-card,
  .white-card,
  .cream-card,
  .paper-card,
  .legal,
  .legal-card,
  .company,
  .logo-card,
  .logos-card,
  .logo-tile,
  .logo-strip,
  .logo-wall,
  .brand-logo,
  .brand-tile,
  .partner-logo,
  .partner-logo-card,
  .partners-logo-card,
  .cert-card,
  .certification-card,
  .cert-grid > *,
  .training-logo,
  .recognition-card,
  .organism-card,
  .showroom-card,
  .showroom-copy,
  .showroom-panel,
  .course-light,
  .course-price-card,
  .course-table,
  .pricing-card,
  .price-card,
  .shop-card,
  .product-spec,
  .product-info,
  .landing-light,
  .faq-light
) :is(
  h1,h2,h3,h4,
  .h1,.h2,.h3,
  .hero-title,
  .section-title,
  .team-name,
  .team-name-full,
  .card-title,
  .price,
  strong
){
  color:var(--light-ink)!important;
  text-shadow:none!important;
}

:is(
  #caps,
  #cta,
  .nos-numbers,
  .cap,
  .dist-card,
  .cert-logo-card,
  .cert-logo-box,
  .sol-card,
  .aud-card,
  .product-card,
  .shop-band,
  .shop-item,
  .price-box,
  .price-main,
  .price-side,
  .light,
  .section-light,
  .surface-light,
  .light-card,
  .white-card,
  .cream-card,
  .paper-card,
  .legal,
  .legal-card,
  .company,
  .logo-card,
  .logos-card,
  .logo-tile,
  .logo-strip,
  .logo-wall,
  .brand-logo,
  .brand-tile,
  .partner-logo,
  .partner-logo-card,
  .partners-logo-card,
  .cert-card,
  .certification-card,
  .cert-grid > *,
  .training-logo,
  .recognition-card,
  .organism-card,
  .showroom-card,
  .showroom-copy,
  .showroom-panel,
  .course-light,
  .course-price-card,
  .course-table,
  .pricing-card,
  .price-card,
  .shop-card,
  .product-spec,
  .product-info,
  .landing-light,
  .faq-light
) :is(
  p,li,span,small,em,
  .lead,
  .leadp,
  .section-lead,
  .muted,
  .team-bio,
  .team-spec,
  .foot-tag,
  .desc,
  .copy
){
  color:var(--light-text)!important;
  text-shadow:none!important;
}

:is(
  #caps,
  #cta,
  .nos-numbers,
  .cap,
  .dist-card,
  .cert-logo-card,
  .cert-logo-box,
  .sol-card,
  .aud-card,
  .product-card,
  .shop-band,
  .shop-item,
  .price-box,
  .price-main,
  .price-side,
  .light,
  .section-light,
  .surface-light,
  .light-card,
  .white-card,
  .cream-card,
  .paper-card,
  .legal,
  .legal-card,
  .company,
  .logo-card,
  .logos-card,
  .logo-tile,
  .logo-strip,
  .logo-wall,
  .brand-logo,
  .brand-tile,
  .partner-logo,
  .partner-logo-card,
  .partners-logo-card,
  .cert-card,
  .certification-card,
  .cert-grid > *,
  .training-logo,
  .recognition-card,
  .organism-card,
  .showroom-card,
  .showroom-copy,
  .showroom-panel,
  .course-light,
  .course-price-card,
  .course-table,
  .pricing-card,
  .price-card,
  .shop-card,
  .product-spec,
  .product-info,
  .landing-light,
  .faq-light
) :is(
  .eyebrow,
  .hero-k,
  .article-k,
  .lbl,
  .label,
  .tag,
  .badge
){
  color:var(--light-gold)!important;
  text-shadow:none!important;
}

:is(
  #caps,
  #cta,
  .nos-numbers,
  .cap,
  .dist-card,
  .cert-logo-card,
  .cert-logo-box,
  .sol-card,
  .aud-card,
  .product-card,
  .shop-band,
  .shop-item,
  .price-box,
  .price-main,
  .price-side,
  .light,
  .section-light,
  .surface-light,
  .light-card,
  .white-card,
  .cream-card,
  .paper-card,
  .legal-card,
  .company,
  .logo-card,
  .logos-card,
  .logo-tile,
  .logo-strip,
  .logo-wall,
  .brand-tile,
  .partner-logo-card,
  .partners-logo-card,
  .cert-card,
  .certification-card,
  .cert-grid > *,
  .training-logo,
  .recognition-card,
  .organism-card,
  .course-price-card,
  .pricing-card,
  .price-card,
  .shop-card
) :is(a:not(.btn-g):not(.nav-cta), .btn-o, .cbo){
  color:var(--light-ink)!important;
  border-color:var(--light-line)!important;
  text-shadow:none!important;
}

:is(
  #caps,
  #cta,
  .nos-numbers,
  .cap,
  .dist-card,
  .cert-logo-card,
  .cert-logo-box,
  .sol-card,
  .aud-card,
  .product-card,
  .shop-band,
  .shop-item,
  .price-box,
  .price-main,
  .price-side,
  .light,
  .section-light,
  .surface-light,
  .light-card,
  .white-card,
  .cream-card,
  .paper-card,
  .legal-card,
  .company,
  .logo-card,
  .logos-card,
  .logo-tile,
  .logo-strip,
  .logo-wall,
  .brand-tile,
  .partner-logo-card,
  .partners-logo-card,
  .cert-card,
  .certification-card,
  .cert-grid > *,
  .training-logo,
  .recognition-card,
  .organism-card,
  .course-price-card,
  .pricing-card,
  .price-card,
  .shop-card
){
  border-color:var(--light-line)!important;
}

/* Showroom is a dark premium block, not a light surface. */
#showroom,
#showroom .showroom-card,
#showroom .showroom-copy{
  color:var(--text)!important;
}

#showroom .showroom-card{
  background:linear-gradient(135deg,rgba(31,58,82,.72),rgba(12,20,29,.94))!important;
  border-color:var(--gold-bd)!important;
}

#showroom .lbl{
  color:var(--gold-l)!important;
}

#showroom .showroom-copy h2,
#showroom .showroom-copy h2 *{
  color:#fff!important;
  text-shadow:none!important;
}

#showroom .showroom-copy h2 em{
  color:var(--gold-l)!important;
}

#showroom .showroom-copy p{
  color:var(--text)!important;
  text-shadow:none!important;
}

#showroom .showroom-tags span{
  color:var(--gold-l)!important;
  border-color:var(--gold-bd)!important;
  background:rgba(212,162,74,.12)!important;
  text-shadow:none!important;
}

#showroom .btn-g{
  color:#10131a!important;
  background:linear-gradient(135deg,var(--gold),var(--gold-l))!important;
  border-color:var(--gold)!important;
}

#showroom .btn-o{
  color:#fff!important;
  border-color:rgba(255,255,255,.34)!important;
  background:rgba(255,255,255,.07)!important;
}

#showroom .btn-o:hover{
  color:var(--gold-l)!important;
  border-color:var(--gold-bd)!important;
}

/* Link color reset · keep navigation and CTAs clean on the review version. */
body a:not(.btn-g):not(.nav-cta):not(.course-cta):not(.aside-cta),
body a:not(.btn-g):not(.nav-cta):not(.course-cta):not(.aside-cta) span,
.dist-link,
.foot-col a,
.foot-bot a,
.mob-links a,
.nav-links a,
.nav-dd-menu a{
  color:#fff!important;
  text-shadow:none!important;
}

body a:not(.btn-g):not(.nav-cta):not(.course-cta):not(.aside-cta):hover,
.dist-link:hover,
.foot-col a:hover,
.foot-bot a:hover,
.mob-links a:hover,
.nav-links a:hover,
.nav-dd-menu a:hover{
  color:var(--gold-l)!important;
}

/* Mobile menu normalization · consistent, calmer off-canvas navigation. */
@media(max-width:1100px){
  #nav{
    height:64px!important;
  }

  #nav .nav-i{
    height:64px!important;
    padding:0 clamp(16px,5vw,24px)!important;
    gap:12px!important;
  }

  #nav .nav-brand{
    gap:10px!important;
    min-width:0!important;
  }

  #nav .nav-brand img{
    width:40px!important;
    height:40px!important;
    flex:0 0 40px!important;
  }

  #nav .nav-brand-b{
    display:flex!important;
    max-width:170px!important;
  }

  #nav .nav-tag{
    font-family:var(--fm)!important;
    font-size:9px!important;
    line-height:1!important;
    letter-spacing:.14em!important;
    color:var(--gold-l)!important;
  }

  #nav .nav-name{
    font-family:var(--fb)!important;
    font-size:13px!important;
    font-weight:700!important;
    line-height:1.05!important;
    letter-spacing:0!important;
    color:#fff!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
  }

  #nav .nav-links,
  #nav .nav-clock,
  #nav .nav-mini-contact,
  #nav .lang-sel{
    display:none!important;
  }

  #nav .nav-r{
    gap:10px!important;
  }

  #nav .nav-cta{
    height:38px!important;
    padding:0 13px!important;
    font-family:var(--fb)!important;
    font-size:11px!important;
    font-weight:800!important;
    letter-spacing:.03em!important;
    text-transform:none!important;
  }

  #nav .nav-mob{
    display:flex!important;
    width:42px!important;
    height:42px!important;
    flex:0 0 42px!important;
    border:1px solid rgba(255,255,255,.24)!important;
    background:rgba(255,255,255,.05)!important;
  }

  #nav .nav-mob span{
    width:18px!important;
    height:2px!important;
    background:#fff!important;
  }

  #mob-menu{
    position:fixed!important;
    inset:0!important;
    width:100%!important;
    max-width:none!important;
    display:flex!important;
    align-items:stretch!important;
    justify-content:flex-start!important;
    background:
      radial-gradient(circle at 12% 8%,rgba(212,162,74,.16),transparent 30%),
      linear-gradient(180deg,rgba(15,25,36,.99),rgba(8,15,24,.995))!important;
    border:0!important;
    box-shadow:none!important;
    opacity:0!important;
    pointer-events:none!important;
    transform:none!important;
    transition:opacity .28s var(--ease)!important;
    overflow-y:auto!important;
    -webkit-overflow-scrolling:touch!important;
  }

  #mob-menu.open{
    opacity:1!important;
    pointer-events:auto!important;
    transform:none!important;
  }

  #mob-menu,
  #mob-menu *{
    font-family:var(--fb)!important;
    letter-spacing:0!important;
    text-transform:none!important;
    text-shadow:none!important;
    box-sizing:border-box!important;
  }

  #mob-menu .mob-close{
    position:fixed!important;
    top:16px!important;
    right:16px!important;
    width:44px!important;
    height:44px!important;
    border:1px solid rgba(255,255,255,.22)!important;
    background:rgba(255,255,255,.06)!important;
    color:#fff!important;
    font-family:Arial,sans-serif!important;
    font-size:28px!important;
    font-weight:300!important;
    line-height:1!important;
    border-radius:0!important;
  }

  #mob-menu .mob-links{
    width:100%!important;
    max-width:480px!important;
    margin:0 auto!important;
    padding:82px 20px 28px!important;
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:8px!important;
    align-items:stretch!important;
  }

  #mob-menu .mob-links>a,
  #mob-menu .mob-partners-h{
    min-height:50px!important;
    width:100%!important;
    display:flex!important;
    align-items:center!important;
    justify-content:space-between!important;
    padding:0 15px!important;
    border:1px solid rgba(255,255,255,.14)!important;
    background:rgba(255,255,255,.045)!important;
    color:#fff!important;
    font-family:var(--fb)!important;
    font-size:15px!important;
    font-weight:750!important;
    line-height:1.15!important;
    text-align:left!important;
    transition:background .2s ease,border-color .2s ease,color .2s ease!important;
  }

  #mob-menu .mob-links>a::before,
  #mob-menu .mob-links>a::after{
    display:none!important;
  }

  #mob-menu .mob-links>a:hover,
  #mob-menu .mob-partners-h:hover,
  #mob-menu .mob-links>a.active{
    padding-left:15px!important;
    background:rgba(212,162,74,.12)!important;
    border-color:var(--gold-bd)!important;
    color:var(--gold-l)!important;
  }

  #mob-menu .mob-course{
    background:linear-gradient(135deg,var(--gold),var(--gold-l))!important;
    border-color:var(--gold)!important;
    color:#10131a!important;
    font-weight:850!important;
  }

  #mob-menu .mob-course:hover{
    color:#10131a!important;
    background:linear-gradient(135deg,var(--gold-l),#ffd989)!important;
  }

  #mob-menu .mob-partners-arrow{
    flex:0 0 auto!important;
    margin-left:12px!important;
    color:var(--gold-l)!important;
    font-family:var(--fb)!important;
    font-size:16px!important;
    line-height:1!important;
  }

  #mob-menu .mob-sub{
    max-height:0!important;
    overflow:hidden!important;
    display:grid!important;
    gap:6px!important;
    padding:0!important;
    transition:max-height .26s ease,padding .26s ease!important;
  }

  #mob-menu .mob-sub.open{
    max-height:360px!important;
    padding:2px 0 4px!important;
  }

  #mob-menu .mob-sub a{
    min-height:42px!important;
    display:flex!important;
    align-items:center!important;
    padding:0 14px 0 28px!important;
    border:1px solid rgba(255,255,255,.10)!important;
    background:rgba(255,255,255,.026)!important;
    color:var(--text)!important;
    font-family:var(--fb)!important;
    font-size:14px!important;
    font-weight:650!important;
    line-height:1.2!important;
    text-align:left!important;
  }

  #mob-menu .mob-sub a:hover,
  #mob-menu .mob-sub a.active{
    padding-left:28px!important;
    color:var(--gold-l)!important;
    border-color:var(--gold-bd)!important;
    background:rgba(212,162,74,.10)!important;
  }

  #mob-menu .mob-lang,
  #mob-menu .mob-lang-btn{
    display:none!important;
  }
}

@media(max-width:520px){
  #nav .nav-brand-b{
    max-width:145px!important;
  }

  #nav .nav-name{
    font-size:12px!important;
  }

  #nav .nav-cta{
    display:none!important;
  }

  #mob-menu .mob-links{
    padding-left:16px!important;
    padding-right:16px!important;
  }
}

/* Team photo alignment: use the same loading and crop behavior for every card. */
#team .team-photo{
  background:var(--navy-l)!important;
}

#team .team-photo img{
  width:100%!important;
  height:100%!important;
  object-fit:cover!important;
  object-position:center 16%!important;
  transform:scale(1.03)!important;
  filter:none!important;
}

#team .team-card:hover .team-photo img{
  transform:scale(1.03)!important;
}

/* David's source image is square, so it needs a slightly stronger crop. */
#team .team-photo-david img{
  object-position:center 18%!important;
  transform:scale(1.08)!important;
}

#team .team-card:hover .team-photo-david img{
  transform:scale(1.08)!important;
}

@media(max-width:680px){
  #team .team-photo img{
    object-fit:cover!important;
    object-position:center 16%!important;
    transform:scale(1.03)!important;
  }

  #team .team-photo-david img{
    object-position:center 18%!important;
    transform:scale(1.08)!important;
  }
}