/* Shared header: loaded after page styles on every page. */
html{scrollbar-gutter:stable}
.header{font-family:Inter,Arial,sans-serif;background:#fff}
.header .header-in{min-height:92px;display:flex;align-items:center;justify-content:space-between;gap:24px;width:min(1120px,calc(100% - 64px));margin-inline:auto}
.header .brand{display:block;flex-shrink:0}
.header .brand img{display:block;width:min(240px,39vw);height:auto}
.header .nav{display:flex;align-items:center;gap:34px}
.header .nav a{font-family:Inter,Arial,sans-serif;font-size:.875rem;font-weight:500;line-height:1.4;letter-spacing:normal;text-decoration:none;color:#093463}
.header .nav a:hover{text-decoration:none}
.header .nav a.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:8px 19px;margin:0;border:1px solid #2f80ed;border-radius:8px;background:#2f80ed;color:#fff;box-shadow:0 2px 6px rgba(47,128,237,.10);text-decoration:none;transition:background-color .26s ease,color .26s ease,box-shadow .26s ease}
@media(hover:hover){.header .nav a.btn:hover{background:#fff;color:#2f80ed;text-decoration:none;box-shadow:0 1px 4px rgba(47,128,237,.05)}}
@media(max-width:760px){
.header .header-in{min-height:82px;width:min(1120px,calc(100% - 36px))}
.header .brand img{width:min(240px,60vw)}
.header .nav{display:none;position:absolute;right:18px;top:72px;flex-direction:column;align-items:stretch;gap:34px;min-width:210px;padding:12px;background:#fff;border:1px solid #d8e2ed;border-radius:12px;box-shadow:0 14px 30px rgba(18,38,63,.1)}
.header .nav.open{display:flex}
.header .nav a{padding:10px 12px}
.header .nav a.btn{margin-top:6px}
}
@media(prefers-reduced-motion:reduce){.header .nav a.btn{transition:none}}

/* Current-page and hover states share the same layout dimensions. */
.header .nav a:not(.btn):hover{color:#2f80ed}
.header .nav a:not(.btn)[aria-current="page"]{color:#2f80ed;text-decoration:none}
.header .nav a.btn[aria-current="page"]{background:#fff;color:#2f80ed;box-shadow:none}

/* Compact, accessible LinkedIn link in the shared navigation. */
.header .nav a.social-link{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:24px;min-height:44px;padding:0}
.header .nav a.social-link svg{display:block;width:18px;height:18px}

/* Page links and contact actions form two distinct navigation groups. */
.header .nav{gap:96px}
.header .nav-pages,.header .nav-actions{display:flex;align-items:center}
.header .nav-pages{gap:26px}
.header .nav-actions{gap:20px}
@media(max-width:760px){
.header .nav{gap:20px}
.header .nav-pages{flex-direction:column;align-items:stretch;gap:4px}
.header .nav-actions{justify-content:space-between;gap:20px;padding:8px 12px 0;border-top:1px solid #d8e2ed}
.header .nav-actions a.btn{margin-top:0}
}

/* Mobile heroes show the complete panoramic image below the copy. */
@media(max-width:760px){
  main .hero{
    background-color:#fff;
    background-size:100% 100%,100% auto;
    background-position:center,center bottom;
    background-repeat:no-repeat;
    padding-bottom:calc(33.333vw + 24px);
  }
}

/* Consistent footer across all pages. */
.footer .wrap{align-items:center}
.footer .footer-linkedin{display:inline-flex;align-items:center;justify-content:center;flex:none;width:32px;height:32px;color:#093463;text-decoration:none}
.footer .footer-linkedin svg{display:block;width:18px;height:18px}
.footer .footer-linkedin:hover{color:#2f80ed}
.footer .footer-linkedin:focus-visible{outline:3px solid #2f80ed;outline-offset:3px;border-radius:4px}

.footer .footer-contact{display:flex;align-items:center;justify-content:flex-end;gap:12px;margin-left:auto}
.footer .footer-contact>a[href^="mailto:"]{white-space:nowrap}

/* Compact footer typography shared by all pages. */
.footer{font-size:.75rem}

/* Brand color system v2.0. Keep the logo, hero headings and closing contact section unchanged. */
:root{
 --action:#205FA8;--secondary:#526475;--line:#D5E0E8;--section:#E4EDF3;
 --snow:#F9FCFD;--mist:#E4EDF3;--pearl:#F0F5F8;
 --amber:#F6AF2D;--amber-light:#FFF2D8;--red:#C7171E;--red-light:#FCEAEC;
 --watercolor-light:#DCEEFF;--watercolor-blue:#B9DCFA;--watercolor-deep:#8FC5F5;
}
body,.principles,.intro,.mission-section,.resources-section,.tailored,.formats{background:var(--snow)}
.footer{background:#fff}
.framework{background:var(--pearl)}
.areas{background:var(--pearl)}
.contact-form-section{background:var(--snow)}
.framework .step{background:var(--snow)}
.area-card{background:var(--snow)}
.resources-featured,.article-card,.form-panel,.format{background:var(--pearl)}
.hero p,.truth p,.framework .lede,.step ul,.footer,.coming-soon,
.intro-copy>p:not(.eyebrow),.mission-block p,.mission-statement,.bio-copy p:not(.eyebrow),
.contact-intro p:not(.eyebrow),.required-note,.form-status,
.resources-intro>p,.feature-copy p,.card-content p,.article-pending,
.collection-heading span,.prototype-note,.tailored-copy p,
.section-heading>p:last-child,.area-card p,.examples,.format p{color:var(--secondary)}
.field input::placeholder,.field textarea::placeholder{color:var(--secondary)}
.menu-toggle,.footer,.framework .step,.form-panel,.field input,.field textarea,
.bio-section,.resources-featured,.article-card,.article-pending,.area-card,.format{border-color:var(--line)}
.header .nav,.header .nav-actions{border-color:var(--line)}
.card-rule{background:var(--line)}
.bio-portrait{background:var(--mist)}
/* UI blue is separate from the unchanged bright blue in logo artwork. */
.header .nav a.btn{background:var(--action);border-color:var(--action);color:#fff;box-shadow:0 2px 6px rgba(32,95,168,.10)}
.header .nav a:not(.btn):hover,.header .nav a:not(.btn)[aria-current="page"]{color:var(--action)}
.header .nav a.btn[aria-current="page"]{background:#fff;color:var(--action)}
.btn:not(.contact .btn){background:var(--action);border-color:var(--action);color:#fff;box-shadow:0 2px 6px rgba(32,95,168,.10)}
.read-more,.bio-link,.intro-link,.mission-label,.number,.article-meta,.field label span,
.eyebrow:not(.contact .eyebrow){color:var(--action)}
.read-more:hover,.read-more:focus-visible,.bio-link:hover,.intro-link:hover{color:var(--heading)}
:focus-visible:not(.contact *){outline-color:var(--action)}
.field input:focus,.field textarea:focus{border-color:var(--action);box-shadow:0 0 0 3px rgba(32,95,168,.13)}
.footer .footer-linkedin:hover{color:var(--action)}
.footer .footer-linkedin:focus-visible{outline-color:var(--action)}
@media(hover:hover){
 .btn:not(.contact .btn):hover,.header .nav a.btn:hover{background:#fff;color:var(--action);border-color:var(--action);box-shadow:0 1px 4px rgba(32,95,168,.05)}
}
/* Meaningful accents: opportunities and insight surfaces; risks and validation errors. */
.chip.opportunity{background:var(--amber);color:var(--navy)}
.chip.risk{background:var(--red);color:#fff}
.field input[aria-invalid="true"],.field textarea[aria-invalid="true"]{border-color:var(--red);background:var(--red-light)}
.insight-panel{background:var(--amber-light);color:var(--navy);border-color:var(--amber)}
/* Illustration palette with navy linework. */
.icon-round,.area-mark,.format-icon,.feature-graphic,.card-art,.art-two,.art-three{background:var(--watercolor-light)}
.icon-round svg,.area-mark svg,.format-icon svg{stroke:var(--navy)}
.feature-graphic::before{border-color:var(--watercolor-blue)}
.feature-graphic::after{background:var(--watercolor-blue)}
.feature-line,.art-one i:last-child,.art-two i:last-child,.art-three i:first-child{background:var(--watercolor-deep)}
.feature-line.two,.art-one i:nth-child(2),.art-three i:nth-child(2){background:var(--navy)}
.art-one i:first-child,.art-three i:last-child{border-color:var(--watercolor-blue)}
.art-two i:first-child{background:var(--watercolor-blue)}
.art-two i:nth-child(2){border-color:var(--navy)}
.graphic-label{color:var(--navy)}

/* Recognition follows the same text and surface roles. */
.recognition{background:var(--snow)}
.recognition-label{color:var(--action)}
.recognition-description{color:var(--secondary)}

/* Keep closing-section button hover shadows equally subtle. */
@media(hover:hover){.contact .btn:hover{box-shadow:0 1px 4px rgba(47,128,237,.05)}}

/* Closing call-to-action on Home and Services. */
main#top > section.contact{background:#18477E}

/* Light closing-section buttons on Home and Services. */
main#top > section.contact .btn{
 background:var(--pearl);
 color:var(--navy);
 border-color:var(--pearl);
}
@media(hover:hover){
 main#top > section.contact .btn:hover{
  background:#fff;
  color:var(--navy);
  border-color:#fff;
 }
}

/* About: The person behind the work. */
.bio-section{background:var(--pearl)}


/* Top navigation text links use Action Blue. */
.header .nav-pages a{color:var(--action)}

/* Underline top navigation text links on hover and keyboard focus. */
.header .nav .nav-pages a:hover,
.header .nav .nav-pages a:focus-visible{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:5px}

/* Comfortable mobile touch target; retain compact desktop button. */
@media(max-width:760px){.header .nav a.btn{min-height:44px}}

/* Mobile footer contact details sit below the copyright, aligned left. */
@media(max-width:760px){
 .footer .footer-contact{width:100%;margin-left:0;justify-content:flex-start}
}

/* Collapse navigation before the full desktop header outgrows tablet widths. */
@media(min-width:761px) and (max-width:980px){
 .header .header-in{min-height:82px;width:min(1120px,calc(100% - 36px))}
 .header .menu-toggle{display:block}
 .header .nav{display:none;position:absolute;right:18px;top:72px;flex-direction:column;align-items:stretch;gap:20px;min-width:210px;padding:12px;background:#fff;border:1px solid var(--line);border-radius:12px;box-shadow:0 14px 30px rgba(18,38,63,.1)}
 .header .nav.open{display:flex}
 .header .nav a{padding:10px 12px}
 .header .nav-pages{flex-direction:column;align-items:stretch;gap:4px}
 .header .nav-actions{justify-content:space-between;gap:16px;padding:8px 12px 0;border-top:1px solid var(--line)}
 .header .nav-actions a.btn{margin-top:0;min-height:44px}
}

/* Bold text identifies the current page. */
.header .nav .nav-pages a[aria-current="page"]{
 font-weight:700;
 text-decoration:none;
}
.header .nav a.btn[aria-current="page"]{
 font-weight:700;
 text-decoration:none;
}