/* ======================================================================
   LEADINGLIGHT UI FOUNDATION — LAUNCH STABILIZATION
   Canonical final layer. This file intentionally sits after legacy phase
   styles so the public ecosystem has one predictable responsive baseline.
   ====================================================================== */
:root{
  --ll-header-height:78px;
  --ll-content-max:1240px;
  --ll-page-gutter:clamp(1rem,3.2vw,3rem);
  --ll-section-gap:clamp(4rem,7vw,7rem);
  --ll-card-radius:20px;
}
html{overflow-x:hidden}
body{overflow-x:hidden}
.container{width:100%;max-width:var(--ll-content-max);padding-inline:var(--ll-page-gutter)}

/* Header: one stable geometry across the public site */
.site-header{position:fixed;inset:0 0 auto;min-height:var(--ll-header-height);z-index:var(--z-header);}
.site-header__inner{min-height:var(--ll-header-height);display:flex;align-items:center;gap:clamp(.75rem,2vw,1.5rem)}
.site-header .brand{display:flex;align-items:center;flex:0 0 auto;min-width:205px!important}
.site-header .brand__lockup,.site-header .brand img{display:block;width:205px!important;max-width:205px!important;height:44px!important;max-height:44px!important;object-fit:contain;object-position:left center}
.site-header .primary-nav{margin-left:auto;min-width:0;overflow:visible}
.site-header .primary-nav ul{list-style:none;padding:0;margin:0}
.site-header .primary-nav ul{display:flex;align-items:center;gap:clamp(.8rem,1.6vw,1.5rem);white-space:nowrap}
.site-header .primary-nav a{font-size:.86rem;font-weight:600;padding:.35rem 0}
.site-header .header-actions{flex:0 0 auto;display:flex;align-items:center;gap:.65rem}
.site-header .header-actions .btn{white-space:nowrap}
.site-header .menu-toggle{margin-left:auto;flex:0 0 auto;align-items:center;justify-content:center;min-width:44px;min-height:44px}
.menu-toggle{cursor:pointer}

/* Canonical mobile menu. JS supplies the same navigation on every public page. */
.mobile-nav{position:fixed;inset:0;visibility:hidden;pointer-events:none;z-index:calc(var(--z-header) - 1);padding:calc(var(--ll-header-height) + 1.5rem) var(--ll-page-gutter) 2rem;overflow-y:auto;-webkit-overflow-scrolling:touch;opacity:0;transform:translateY(-8px);transition:opacity .2s ease,transform .2s ease,visibility 0s linear .2s}
.mobile-nav.is-open{visibility:visible;pointer-events:auto;opacity:1;transform:translateY(0);transition-delay:0s}
.mobile-nav ul{gap:.35rem;margin:0 0 1.5rem}
.mobile-nav li a{display:block;padding:.55rem 0;font-family:var(--font-display);font-size:clamp(1.35rem,6vw,1.8rem);line-height:1.15}
.mobile-nav .header-actions{display:flex;flex-direction:column;align-items:stretch;gap:.7rem;margin-top:.5rem}
.mobile-nav .header-actions .btn{display:flex!important;width:100%;justify-content:center;text-align:center}
.mobile-nav .header-actions .btn--outline{display:flex!important}

/* Buttons stay tappable and visually consistent */
.btn,.primary-btn,.secondary-btn,.ghost-btn{min-height:44px}
.btn-row{display:flex;flex-wrap:wrap;gap:.75rem;align-items:center}

/* Section rhythm */
main>section{scroll-margin-top:calc(var(--ll-header-height) + 1rem)}
section{min-width:0}
.card,.glass-panel,.form-card,.contact-info-card,.eco-visual{border-radius:var(--ll-card-radius)}
img{max-width:100%}

/* Prevent long content from breaking mobile layouts */
.grid,.split,.hero__grid,.site-header__inner{min-width:0}
input,select,textarea{min-width:0}

@media (max-width:1180px){
  :root{--ll-header-height:74px}
  .site-header .brand{min-width:185px!important}
  .site-header .brand__lockup,.site-header .brand img{width:185px!important;height:40px!important;max-width:185px!important;max-height:40px!important}
  .site-header .primary-nav ul{gap:.9rem}
  .site-header .primary-nav a{font-size:.79rem}
  .site-header .header-actions .btn{padding-inline:.9rem}
}

@media (max-width:980px){
  :root{--ll-header-height:70px}
  .site-header{padding-block:0}
  .site-header .brand{min-width:180px!important}
  .site-header .brand__lockup,.site-header .brand img{width:180px!important;height:38px!important;max-width:180px!important;max-height:38px!important}
  .site-header .primary-nav,.site-header>.container>.header-actions{display:none}
  .site-header .menu-toggle{display:flex}
}

@media (max-width:700px){
  :root{--ll-header-height:66px;--ll-page-gutter:1rem}
  .site-header .brand{min-width:165px!important}
  .site-header .brand__lockup,.site-header .brand img{width:165px!important;height:36px!important;max-width:165px!important;max-height:36px!important}
  section{padding-block:clamp(3rem,9vw,4.5rem)}
  .btn-row,.hero .btn-row{width:100%;align-items:stretch}
  .btn-row .btn,.hero .btn-row .btn{flex:1 1 100%;width:100%}
  .eco-visual-grid{grid-template-columns:1fr!important}
  .eco-visual-split{grid-template-columns:1fr!important}
}

@media (max-width:430px){
  :root{--ll-header-height:62px;--ll-page-gutter:.875rem}
  .site-header .brand{min-width:150px!important}
  .site-header .brand__lockup,.site-header .brand img{width:150px!important;height:32px!important;max-width:150px!important;max-height:32px!important}
  .mobile-nav{padding-inline:1rem}
  .mobile-nav li a{font-size:1.35rem}
}

@media (prefers-reduced-motion:reduce){
  .mobile-nav{transition:none!important}
}


/* FINAL HOMEPAGE CONTRAST + BRAND CORRECTION
   The hero must use the official vector lockup, and ecosystem pathway cards
   must never render white text on a white surface. */
.hero--consultium .brand-stage__logo{
  width:min(540px,92vw)!important;
  height:auto!important;
  min-height:0!important;
  padding:0!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
  backdrop-filter:none!important;
  animation:none!important;
}
.hero--consultium .brand-stage__logo:after{display:none!important}
.hero--consultium .brand-stage__logo img{
  display:block!important;
  width:100%!important;
  height:auto!important;
  object-fit:contain!important;
  filter:drop-shadow(0 18px 28px rgba(0,0,0,.28))!important;
}

/* FINAL OFFICIAL HERO LOGO
   Use the exact supplied LeadingLight Consult Ltd artwork on a clean white plate.
   This intentionally avoids any recreated/3D logo artwork. */
.hero--consultium .ll17-home-logo{
  width:min(540px,92vw)!important;
  height:auto!important;
  aspect-ratio:auto!important;
  padding:0!important;
  overflow:visible!important;
  background:transparent!important;
  border:0!important;
  border-radius:0!important;
  box-shadow:none!important;
}
.hero--consultium .ll17-home-logo img{
  display:block!important;
  width:100%!important;
  height:auto!important;
  object-fit:contain!important;
  filter:drop-shadow(0 18px 28px rgba(0,0,0,.28))!important;
  border-radius:18px!important;
}

/* Ecosystem pathway cards: readable light surface + dark type. */
.ll-p14-card{
  background:#fff!important;
  color:#10222d!important;
  border:1px solid #dbe5e9!important;
  box-shadow:0 18px 55px rgba(7,25,34,.09)!important;
  backdrop-filter:none!important;
}
.ll-p14-card h3{color:#10222d!important}
.ll-p14-card p{color:#54636d!important}
.ll-p14-card__num{color:#008f87!important}
.ll-p14-card .btn,.ll-p14-card a{color:#007f78!important}
.ll-p14-card__body{background:#fff!important;color:#10222d!important}
.ll-p14-card__body h3{color:#10222d!important}
.ll-p14-card__body p{color:#54636d!important}

/* Any legacy ecosystem pathway image wrapper keeps its media visible. */
.ll-p14-card__image-wrap{background:#071a27!important}
.ll-p14-card__image-wrap img{display:block;width:100%;height:100%;object-fit:cover}

.p19-rich-card{background:#fff!important;color:#10222d!important}
.p19-rich-card h3{color:#10222d!important}
.p19-rich-card p{color:#425762!important}

@media(max-width:700px){
  .hero--consultium .brand-stage__logo{width:min(430px,88vw)!important}
}

/* FINAL FIX: homepage ecosystem pathway cards generated by Phase 15.
   These cards use ll-p15-card, not ll-p14-card. Keep the light card surface
   while forcing readable dark typography. */
.ll-p15-card{
  background:#fff!important;
  color:#10222d!important;
  border:1px solid #dbe5e9!important;
  box-shadow:0 18px 55px rgba(7,25,34,.09)!important;
  backdrop-filter:none!important;
}
.ll-p15-card__body{background:#fff!important;color:#10222d!important}
.ll-p15-card h3{color:#10222d!important}
.ll-p15-card p{color:#54636d!important}
.ll-p15-card__index{color:#008f87!important}


/* ======================================================================
   BRAND AUTHORITY PASS — OFFICIAL FLAT COMPANY LOGO
   The supplied LeadingLight Consult Ltd artwork is the single visible
   company lockup across public/authenticated brand headers. The old
   reconstructed/fake lockup is no longer used for visible branding.
   ====================================================================== */
.site-header .brand{
  background:#fff!important;
  border:1px solid rgba(7,21,34,.10)!important;
  border-radius:10px!important;
  padding:4px 8px!important;
  min-width:0!important;
  box-shadow:0 6px 18px rgba(0,0,0,.10)!important;
}
.site-header .brand__lockup,.site-header .brand img{
  width:190px!important;
  max-width:190px!important;
  height:40px!important;
  max-height:40px!important;
  object-fit:contain!important;
  object-position:center!important;
  border-radius:6px!important;
}
.ll17-auth-logo{
  display:block!important;
  width:min(280px,100%)!important;
  height:auto!important;
  max-height:none!important;
  object-fit:contain!important;
  border-radius:14px!important;
  background:#fff!important;
}
.auth-brand-panel .brand,
.auth-form-panel__inner .brand,
.portal-sidebar .brand,
.cms-brand,
.wf-brand{
  display:inline-flex!important;
  align-items:center!important;
  background:#fff!important;
  border-radius:12px!important;
  padding:5px 8px!important;
}
.auth-brand-panel .brand .ll17-auth-logo,
.auth-form-panel__inner .brand .ll17-auth-logo{width:min(300px,100%)!important}
.portal-sidebar .brand .ll17-auth-logo{width:190px!important}
.cms-brand img,.wf-brand img{width:170px!important;height:auto!important;max-height:52px!important;object-fit:contain!important;border-radius:8px!important}

/* Keep the large homepage brand presentation prominent, but never oversized. */
.hero--consultium .ll17-home-logo img{
  width:100%!important;
  height:auto!important;
}
@media(max-width:980px){
  .site-header .brand__lockup,.site-header .brand img{width:170px!important;max-width:170px!important;height:36px!important;max-height:36px!important}
}
@media(max-width:700px){
  .site-header .brand{padding:3px 6px!important}
  .site-header .brand__lockup,.site-header .brand img{width:150px!important;max-width:150px!important;height:32px!important;max-height:32px!important}
}
@media(max-width:430px){
  .site-header .brand__lockup,.site-header .brand img{width:136px!important;max-width:136px!important;height:29px!important;max-height:29px!important}
}


/* AUTH BRAND BACKGROUND CLEANUP
   Do not surface legacy/premium logo artwork as a faded background. */
.auth-brand-panel:before{display:none!important;background:none!important}
.auth-brand-panel{background:radial-gradient(circle at 70% 22%,rgba(24,212,192,.26),transparent 28%),linear-gradient(145deg,#061529,#092a3b 55%,#0b5b5a)!important}


/* ======================================================================
   2026 SIMPLICITY + READABILITY PASS
   One clear hierarchy, stronger contrast, shorter reading blocks and
   larger leadership photography. This layer intentionally overrides
   older visual experiments without changing application functionality.
   ====================================================================== */
:root{
  --ll-readable-ink:#10222d;
  --ll-readable-muted:#4d5e69;
  --ll-readable-teal:#087a72;
  --ll-readable-line:#d6e0e5;
}
body{color:var(--ll-readable-ink)}
main p, main li{line-height:1.68}
.section-head{max-width:780px}
.section-head h2{font-family:'Poppins','Segoe UI',Arial,sans-serif!important;font-weight:800!important;font-size:clamp(2rem,3.2vw,3.25rem)!important;line-height:1.06!important;letter-spacing:-.025em!important;color:var(--ll-readable-ink)!important}
.section-head p:not(.eyebrow){max-width:700px;color:var(--ll-readable-muted)!important;font-size:1rem;line-height:1.68}
.eyebrow{font-family:'Poppins','Segoe UI',Arial,sans-serif!important;font-weight:800!important;letter-spacing:.12em!important;line-height:1.25!important}
/* Dark sections keep a deliberately light eyebrow for contrast. */
.hero .eyebrow,.hero--consultium .eyebrow,.page-hero .eyebrow,.sbu-hero .eyebrow,.ict-hero .eyebrow,
.corporate-band .eyebrow,.cta-band .eyebrow,.p18-shell--dark .eyebrow,.ll-p14-heading .eyebrow,.ll-p15-heading .eyebrow{color:#18cfc0!important}
/* Stronger, readable body copy on image backgrounds. */
.hero .lede,.page-hero p,.sbu-hero__lead,.ict-hero .sbu-hero__lead{color:rgba(255,255,255,.92)!important;text-shadow:0 2px 16px rgba(0,0,0,.35)}
.hero--consultium h1 span,.ict-hero h1 span{color:#22cfc0!important;text-shadow:0 2px 14px rgba(0,0,0,.3)}
/* Prevent pale accent text from disappearing on white surfaces. */
.card .eyebrow,.bg-mist .eyebrow,.trusted-by .eyebrow,.ecosystem-section .eyebrow,
.section-head .eyebrow{color:var(--ll-readable-teal)!important}
.card h3,.panel h3,.model-card h3{font-weight:800!important;color:var(--ll-readable-ink)!important}
.card p,.panel p,.model-card p{color:var(--ll-readable-muted)!important}
/* Make text-over-image captions sit on a real readable plate. */
.eco-visual__caption,.ll17-story__copy,.ll-film__caption{background-color:rgba(4,17,27,.88)}
.ll17-story__copy{padding:1rem 1.1rem;border-radius:16px;left:22px;right:22px;bottom:20px}
/* Leadership photographs: substantially larger and easier to behold. */
.board-grid{gap:30px}
.director-card{padding:28px}
.director-top{gap:26px;align-items:center}
.director-photo{width:220px;height:280px;border-radius:20px;box-shadow:0 18px 42px rgba(10,30,50,.14);object-position:center top}
.director-card h2{font-size:clamp(1.45rem,2.2vw,2rem)!important;font-weight:800!important;line-height:1.08!important}
.director-title{font-size:1rem;font-weight:800;color:#087a72!important}
.director-meta h4{font-weight:800!important;color:#52626c!important}
.director-meta li,.director-bio{color:#344650!important}
.director-message{font-size:1rem;line-height:1.7}
/* Reserved seats remain calm and readable rather than visually competing. */
.director-card--reserved{background:#f7fafb}
.director-empty{color:#52626c!important}
/* Simpler action hierarchy: primary action first, secondary actions quieter. */
.btn-row{gap:.7rem}
.btn--primary{font-weight:800!important}
.btn--outline{font-weight:750!important}
/* Reduce visual clutter from overly wide reading blocks. */
main .container>p,main .container>.lead,main .section-head>p:not(.eyebrow){max-width:720px}
@media(max-width:900px){
  .director-photo{width:190px;height:240px}
  .director-top{align-items:flex-start}
}
@media(max-width:700px){
  .section-head h2{font-size:clamp(1.85rem,8vw,2.55rem)!important}
  .section-head p:not(.eyebrow){font-size:.97rem}
  .director-top{flex-direction:column;align-items:stretch}
  .director-photo{width:100%;height:360px}
  .director-card{padding:22px}
}
@media(max-width:430px){.director-photo{height:330px}}


/* ======================================================================
   FINAL VISIBILITY + LEADERSHIP PHOTOGRAPHY CORRECTION
   2026-09-15 — simplicity and accessibility acceptance pass
   ====================================================================== */
/* The visual-story rail is a dark presentation band. Keep its heading and
   supporting copy light even though the generic section-head rules are dark. */
.ll-visual-story{
  background:linear-gradient(180deg,#071522 0%,#0a2635 62%,#f5f8f7 62%,#f5f8f7 100%)!important;
}
.ll-visual-story .ll-visual-story__head h2{
  color:#fff!important;
  font-family:'Poppins','Segoe UI',Arial,sans-serif!important;
  font-weight:800!important;
  font-size:clamp(2rem,3.2vw,3.25rem)!important;
  line-height:1.06!important;
  letter-spacing:-.025em!important;
}
.ll-visual-story .ll-visual-story__head p:not(.eyebrow){color:rgba(255,255,255,.86)!important}
.ll-visual-story .ll-visual-story__head .eyebrow{color:#18cfc0!important}
/* Dark verification band: never allow the generic light-surface heading rule
   to turn its white heading into near-black text. */
.p19-verify-band .section-head h2,
.p19-verify-band .section-head p:not(.eyebrow){color:#fff!important}
.p19-verify-band .section-head h2{font-weight:800!important}
/* Large, clear leadership photography on desktop. */
.board-grid .director-photo,
.director-card .director-photo{
  width:300px!important;
  height:390px!important;
  flex:0 0 300px!important;
  object-fit:cover!important;
  object-position:center top!important;
  border-radius:22px!important;
}
.board-grid .director-top{gap:30px!important;align-items:flex-start!important}
.board-grid .director-card h2{font-size:clamp(1.65rem,2.4vw,2.35rem)!important}
@media(max-width:1200px){
  .board-grid .director-photo,.director-card .director-photo{width:260px!important;height:340px!important;flex-basis:260px!important}
}
@media(max-width:900px){
  .board-grid .director-photo,.director-card .director-photo{width:100%!important;height:380px!important;flex-basis:auto!important}
}
@media(max-width:430px){
  .board-grid .director-photo,.director-card .director-photo{height:350px!important}
}