/* WorkPortal 2026 brand skin - loaded LAST to guarantee the navy/yellow identity. */
:root{
  --brand-navy:#002659;
  --brand-navy-2:#07386e;
  --brand-yellow:#fdc303;
  --brand-yellow-hover:#eab500;
  --brand-grey:#6b7e9a;
  --brand-pale:#f3f7fb;
  --brand-pale-yellow:#fff9df;
}

body{color:#13233a}
h1,h2,h3,h4,.section-title{color:var(--brand-navy)}
a:focus-visible,button:focus-visible{outline-color:var(--brand-yellow)}

/* HEADER - clearly brand navy */
.header{background:var(--brand-navy)!important;border-bottom-color:rgba(255,255,255,.12)!important;box-shadow:0 8px 26px rgba(0,25,58,.13)!important}
.header .brand img{height:48px;max-width:270px}
.header .nav-item>a{color:#fff!important}
.header .nav-item>a:hover,.header .nav-item.has-drop>a:hover{color:var(--brand-yellow)!important}
.header .nav-item.has-drop>a::after{color:var(--brand-yellow)!important}
.header .btn{color:#fff!important;background:transparent!important;border-color:rgba(255,255,255,.55)!important}
.header .btn:hover{background:rgba(255,255,255,.08)!important;border-color:#fff!important}
.header .btn.primary{background:var(--brand-yellow)!important;color:var(--brand-navy)!important;border-color:var(--brand-yellow)!important;box-shadow:0 8px 22px rgba(253,195,3,.22)!important}
.header .btn.primary:hover{background:var(--brand-yellow-hover)!important;border-color:var(--brand-yellow-hover)!important}
.header .dropdown{border-top:3px solid var(--brand-yellow)}
.header .dropdown a:hover{background:#f3f7fb!important;color:var(--brand-navy)!important}

/* GENERAL BUTTONS */
.btn.primary{background:var(--brand-yellow)!important;color:var(--brand-navy)!important;border-color:var(--brand-yellow)!important;box-shadow:0 8px 22px rgba(253,195,3,.18)!important}
.btn.primary:hover{background:var(--brand-yellow-hover)!important;border-color:var(--brand-yellow-hover)!important}
.btn:not(.primary){color:var(--brand-navy);border-color:#aebdd0}

/* HOME HERO - still light, but visibly uses the new brand */
.hero{background:radial-gradient(circle at 76% 25%,rgba(12,77,138,.13) 0,rgba(12,77,138,.045) 28%,transparent 58%),linear-gradient(90deg,#fff 0 47%,#f4f8fc 100%)!important;border-bottom:1px solid #e2e9f1}
.hero h1{color:var(--brand-navy)!important}
.hero-principle{color:var(--brand-navy)!important}
.hero-principle strong{display:inline-block!important;color:var(--brand-navy)!important;background:linear-gradient(transparent 67%,rgba(253,195,3,.55) 67%);padding-right:3px}
.claim strong,.flow-note strong,.more{color:var(--brand-navy)!important}
.hero-actions .btn:not(.primary){background:#fff;color:var(--brand-navy);border-color:var(--brand-navy)}
.hero-visual::before{background:linear-gradient(135deg,#eaf2fa 0,#f7fafc 72%,#fff8d9 100%)!important}
.hero-card{border-color:#d6e0eb!important;box-shadow:0 14px 34px rgba(0,38,89,.14)!important}
.hero-card.progress{border-top:3px solid var(--brand-yellow)!important}
.hero-card.today{border-top:3px solid var(--brand-navy)!important}
.hero-card.last,.hero-card.photos{border-top:2px solid #90a7c1!important}

/* FLOW */
.flow{background:#fff}
.flow .section-sub{color:var(--brand-grey)}
.flow-step{--step-accent:var(--brand-navy-2)!important}
.flow-number{background:var(--brand-navy)!important;color:#fff!important;box-shadow:0 0 0 6px #fff,0 0 0 7px #d6e3f0!important}
.flow-step:hover h3{color:var(--brand-navy)!important}
.flow-step.is-active .flow-icon svg,.flow-step:hover .flow-icon svg{stroke:var(--brand-navy)!important}
.flow-track .track-line{stroke:var(--brand-navy-2)!important;opacity:.34!important}
.flow-track .marker-halo{fill:#fff!important;stroke:rgba(0,38,89,.30)!important}
.flow-track .marker-arrow{stroke:var(--brand-yellow)!important;stroke-width:2.45!important}
.flow-step:last-child{--step-accent:var(--brand-yellow)!important}
.flow-step:last-child .flow-number{background:var(--brand-yellow)!important;color:var(--brand-navy)!important;box-shadow:0 0 0 6px #fff,0 0 0 7px rgba(253,195,3,.28)!important}
.flow-step:last-child .flow-icon svg{stroke:var(--brand-navy)!important}
.flow-note strong{background:linear-gradient(transparent 69%,rgba(253,195,3,.48) 69%)}
.continuity{gap:14px}
.continuity-item{position:relative;background:#f7fafc!important;border-color:#dfe7f0!important;padding-top:19px!important}
.continuity-item::before{content:"";position:absolute;left:18px;top:0;width:42px;height:3px;border-radius:0 0 4px 4px;background:var(--brand-yellow)}
.continuity-item strong{color:var(--brand-navy)!important}

/* AUDIENCES - one brand, not five unrelated mini brands */
.audiences{background:var(--brand-pale)!important;border-top:1px solid #e4ebf2;border-bottom:1px solid #e4ebf2}
.audience-card{--accent:var(--brand-navy)!important;border-color:#dce5ee!important;box-shadow:none!important}
.audience-card::before{height:3px!important;background:var(--brand-navy)!important;opacity:1!important}
.audience-card .audience-kicker{color:var(--brand-navy)!important}
.audience-card .audience-dot{background:var(--brand-yellow)!important;box-shadow:0 0 0 4px rgba(253,195,3,.15)!important}
.audience-card:hover{border-color:#9eb1c8!important;box-shadow:0 10px 26px rgba(0,38,89,.07)!important}
.audience-card:hover::before{background:var(--brand-yellow)!important}

/* REFERENCES */
.projects{background:linear-gradient(180deg,#fff 0,#f5f8fb 100%)!important}
.project-card{box-shadow:0 3px 14px rgba(0,38,89,.09)!important}
.project-card:hover{box-shadow:0 14px 30px rgba(0,38,89,.16)!important}
.project-status{border:1px solid rgba(0,38,89,.10)}

/* FUNCTION LANDINGS - same identity while preserving semantic status colours */
.mm-hero,.plan-hero,.assign-hero,.share-hero{background:radial-gradient(circle at 72% 18%,rgba(9,73,132,.11) 0,rgba(9,73,132,.035) 29%,transparent 59%),#fff!important}
.mm-eyebrow,.plan-eyebrow,.assign-eyebrow,.share-eyebrow{color:var(--brand-navy)!important}
.mm-related a,.plan-related a,.assign-related a,.share-related a{color:var(--brand-navy)!important}
.mm-tabs .active,.plan-tabs .active,.assign-tabs .active,.share-tabs .active{color:var(--brand-navy)!important;border-bottom-color:var(--brand-yellow)!important}
.plan-side-nav .active,.assign-side-nav .active,.share-side-nav .active{border-left-color:var(--brand-yellow)!important;background:rgba(253,195,3,.10)!important;color:#fff!important}
.mm-points article>span,.plan-points article>span,.assign-points article>span,.role-strip span{color:var(--brand-navy)!important}
.plan-docs,.share-chain-section,.share-continuity,.assign-context{background:var(--brand-pale)!important}
.doc-chip svg{stroke:var(--brand-navy)!important}
.share-mini-flow a.current{border-color:#9eb4cc!important;box-shadow:inset 0 3px 0 var(--brand-yellow)!important}
.share-mini-flow i{color:var(--brand-navy)!important}
.tree-main{border-color:var(--brand-navy)!important}
.tree-badge.blue{color:var(--brand-navy)!important;background:#eaf2fa!important}

/* FINAL CTA strips */
.mm-final,.plan-final,.assign-final,.share-final{background:var(--brand-pale-yellow)!important;border-top-color:#f0e4aa!important}

/* FOOTER */
.footer{background:var(--brand-navy)!important;color:#fff!important;border-top:0!important}
.footer .brand img{height:52px}
.footer h4{color:#fff!important}
.footer a,.footer p{color:#cbd6e4!important}
.footer a:hover{color:var(--brand-yellow)!important}
.footer .btn{background:transparent!important;color:#fff!important;border-color:rgba(255,255,255,.45)!important}
.footer .btn.primary{background:var(--brand-yellow)!important;color:var(--brand-navy)!important;border-color:var(--brand-yellow)!important}
.copyright{border-top-color:rgba(255,255,255,.13)!important;color:#9fb0c7!important}

@media(max-width:820px){
  .header.open .nav{background:var(--brand-navy)!important}
  .header.open .dropdown{background:rgba(255,255,255,.07)!important;border-top:0}
  .header.open .dropdown a{color:#fff!important}
  .header.open .dropdown a:hover{color:var(--brand-yellow)!important;background:rgba(255,255,255,.08)!important}
}

/* v15 - typography + compact new brand lockup */
html,body,button,input,select,textarea{font-family:"Manrope",Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
body{font-weight:450;letter-spacing:-.005em}
h1,h2,h3,h4,.section-title,.nav,.btn{font-family:"Manrope",Inter,ui-sans-serif,system-ui,sans-serif}
h1,h2,.section-title{letter-spacing:-.045em}
h3,h4{letter-spacing:-.025em}
.nav{font-weight:700;letter-spacing:-.015em}
.btn{font-weight:750;letter-spacing:-.015em}
.header .brand img{height:52px;max-width:310px;object-fit:contain}
.footer .brand img{height:58px;max-width:320px;object-fit:contain}
@media(max-width:1100px){.header .brand img{height:46px;max-width:260px}}
@media(max-width:820px){.header .brand img{height:42px;max-width:230px}}

/* v16 - clickable links inside admin mockups */
.mm-tabs a,.plan-tabs a,.assign-tabs a,.share-tabs a{color:inherit;text-decoration:none;display:flex;align-items:center;height:100%;white-space:nowrap}
.mm-tabs a:hover,.plan-tabs a:hover,.assign-tabs a:hover,.share-tabs a:hover{color:var(--brand-navy)!important}
.mm-side-nav a,.plan-side-nav a,.assign-side-nav a,.share-side-nav a{display:block;color:inherit!important;text-decoration:none;font-weight:650}
.mm-side-nav a:hover,.plan-side-nav a:hover,.assign-side-nav a:hover,.share-side-nav a:hover{color:#fff!important}
.mm-admin-top .admin-tree-link,.plan-admin-top .admin-tree-link,.assign-admin-top .admin-tree-link,.share-admin-top .tree-jump{display:inline-flex;align-items:center;justify-content:center;height:35px;border:1px solid #dce4ee;background:#fff;border-radius:8px;padding:0 12px;color:#334155!important;font-weight:650;font-size:9px;text-decoration:none;white-space:nowrap}
.share-admin-top .tree-jump{height:auto;padding:9px 12px}
@media(max-width:840px){.plan-admin-top .admin-tree-link{display:none}}
@media(max-width:600px){.assign-admin-top .admin-tree-link,.share-admin-top .tree-jump{display:none}.assign-side-nav a,.share-side-nav a{font-size:0;text-align:center}.assign-side-nav a::first-letter,.share-side-nav a::first-letter{font-size:15px}}
@media(max-width:560px){.mm-admin-top .admin-tree-link{display:none}.mm-side-nav a,.plan-side-nav a{font-size:0;text-align:center;padding:0}.mm-side-nav a::first-letter,.plan-side-nav a::first-letter{font-size:15px}}

/* v18 - refined hero typography: lighter, calmer, more professional */
.hero h1,
.mm-copy h1,
.plan-copy h1,
.assign-copy h1,
.share-copy h1,
.feature-copy h1{
  font-weight:700!important;
  letter-spacing:-.035em!important;
  line-height:1.01!important;
}
.hero h1{font-size:clamp(46px,4.7vw,72px)!important}
.mm-copy h1,.share-copy h1{font-size:clamp(48px,4.8vw,74px)!important}
.plan-copy h1,.feature-copy h1{font-size:clamp(46px,4.6vw,70px)!important}
.assign-copy h1{font-size:clamp(48px,5vw,78px)!important;max-width:620px}
.assign-lead,.plan-lead,.share-lead,.feature-lead{font-weight:700!important}

@media(max-width:760px){
  .hero h1,.mm-copy h1,.plan-copy h1,.assign-copy h1,.share-copy h1,.feature-copy h1{
    font-size:42px!important;
    line-height:1.03!important;
    letter-spacing:-.03em!important;
  }
}
@media(max-width:480px){
  .hero h1,.mm-copy h1,.plan-copy h1,.assign-copy h1,.share-copy h1,.feature-copy h1{
    font-size:38px!important;
  }
}