/* Shared visual system. Static CSS, no runtime or third-party dependencies. */
:root { --dark:#142d39; --cream:#f7f5ef; --accent:#82602e; --muted:#c1d0d3; --white:#fff; --teal:#28645e; --gold:#dfbb7a; --line:#d9e0dc; --text:#465a60; }
html { scroll-padding-top:100px; }
body { background:var(--cream); color:var(--dark); -webkit-font-smoothing:antialiased; }
::selection { background:#cce2dc; color:var(--dark); }
a { text-underline-offset:4px; }
a, button, input, textarea, summary { -webkit-tap-highlight-color:transparent; }
:focus-visible { outline:3px solid var(--teal); outline-offset:5px; }
h1,h2,h3 { text-wrap:balance; letter-spacing:-.035em; }
p { text-wrap:pretty; }
.container,.container-wide { width:100%; max-width:1180px; padding-inline:32px; }
section,section.container { padding-block:88px; }
.eyebrow,.eyebrow-small,#hero p.eyebrow { color:var(--teal); font-size:.76rem; font-weight:600; letter-spacing:.12em; text-transform:uppercase; margin-bottom:20px; }
body > nav { padding:14px max(24px,calc((100vw - 1116px)/2)); background:var(--dark); border-bottom:1px solid #ffffff18; z-index:902; gap:16px; }
.brand { display:flex; align-items:center; gap:12px; color:var(--cream); text-decoration:none; flex-shrink:0; }
body > nav .logo-box img { height:42px; width:42px; object-fit:contain; border-radius:8px; }
.brand-name { font-size:.95rem; font-weight:600; letter-spacing:-.02em; }
.desktop-links { display:flex; align-items:center; gap:24px; margin-left:auto; }
.desktop-links a { color:var(--muted); font-size:.85rem; text-decoration:none; padding-block:10px; }
.desktop-links a:hover,.desktop-links a[aria-current] { color:var(--gold); }
.nav-btn { display:inline-flex; align-items:center; text-decoration:none; border:1px solid #b8ccc566; color:var(--cream); border-radius:100px; padding:10px 18px; }
.nav-btn:hover { border-color:var(--gold); color:var(--gold); }
.menu-toggle { border-radius:50%; border:1px solid #b8ccc544; }
.menu-toggle span { width:20px; height:2px; }
.menu-toggle.is-open span:nth-child(1) { transform:translateY(7px) rotate(45deg); }
.menu-toggle.is-open span:nth-child(3) { transform:translateY(-7px) rotate(-45deg); }
.site-menu { width:min(400px,100%); background:var(--dark); padding:100px 28px 28px; visibility:hidden; }
.site-menu.is-open { visibility:visible; }
.site-menu-link { font-size:1.15rem; color:var(--cream); }
.site-menu-link.active { color:var(--gold); background:#dfbb7a15; }
body > nav :focus-visible,.site-menu :focus-visible,footer :focus-visible { outline-color:var(--gold); }
.skip-link { position:fixed; top:10px; left:20px; z-index:11000; padding:12px 20px; background:var(--cream); transform:translateY(-150%); }
.skip-link:focus { transform:none; }
#hero { padding-block:88px 68px; }
#hero h1 { font-size:clamp(2.5rem,5.1vw,4.6rem); max-width:960px; line-height:1.06; margin-bottom:24px; }
#hero p { color:var(--text); max-width:660px; font-size:1.1rem; line-height:1.75; }
.page-home #hero { gap:64px; grid-template-columns:1.15fr .85fr; }
.page-home #hero h1 { font-size:clamp(2.7rem,4.6vw,4.3rem); }
#hero .hero-photo { position:relative; overflow:hidden; border-radius:140px 140px 18px 18px; box-shadow:14px 14px 0 #dce8e0; margin:0 14px 14px 0; }
#hero .hero-photo img { width:100%; height:500px; object-fit:cover; }
.hero-photo figcaption { position:absolute; bottom:0; inset-inline:0; padding:48px 20px 20px; color:#fff; background:linear-gradient(transparent,#142d39e8); font-size:.8rem; letter-spacing:.025em; }
.btn,.submit-btn { display:inline-flex; justify-content:center; align-items:center; min-height:48px; border:1px solid transparent; border-radius:100px; background:var(--teal); color:#fff; padding:13px 24px; font-size:.9rem; text-decoration:none; transition:background .2s,box-shadow .2s; }
.btn:hover,.submit-btn:hover { background:var(--dark); color:#fff; box-shadow:0 5px 16px #142d3918; }
.btn-row { display:flex; flex-wrap:wrap; gap:12px; margin-top:28px; }
.btn-row .btn { margin:0; }
.btn-row .btn + .btn { color:var(--dark); border-color:#a9bdb6; background:transparent; }
.btn-row .btn + .btn:hover { background:#e3ece5; }
#proof { background:#eaf0e9; }
#proof .proof-grid { border-color:var(--line); }
#proof .proof-item { padding:30px 24px; border-color:var(--line); }
#proof .proof-label { color:var(--text); }
#firms:not(.container),#practice,#systems,#services,#progress { background:var(--dark); color:var(--cream); }
#firms:not(.container) .eyebrow,#practice .eyebrow,#services .eyebrow,#progress .eyebrow { color:var(--gold) !important; }
#firms h2,#work h2,#practice h2,#systems h2,#services h2,#progress h2,#faq h2 { font-size:clamp(2rem,3.3vw,3rem); letter-spacing:-.035em; }
.firms-grid { gap:24px; }
.firm-card { padding:32px; border-radius:18px; box-shadow:none; border:1px solid var(--line); }
#firms:not(.container) .firm-card { background:#1c3945; border-color:#ffffff20; }
#firms:not(.container) .firm-card p { color:var(--muted); }
#firms:not(.container) .btn { background:var(--gold); color:var(--dark); }
#firms:not(.container) .btn:hover { background:#f0d4a3; }
.firm-card h2,.firm-card h3 { font-size:1.7rem; }
.firm-photo { width:100%; height:auto; aspect-ratio:16/9; object-fit:cover; border-radius:10px; margin-bottom:28px; }
.page-companies #firms { padding-top:12px; }
.page-companies #firms h2 { font-size:2rem; }
.card,.work-card { border:1px solid var(--line); border-radius:16px; box-shadow:0 8px 24px #142d3906; }
.card-body,.work-card .work-body { padding:26px; }
.card-body p,.work-card p,#work p.lede { color:var(--text); line-height:1.7; }
.card-body h3,.work-card h3 { font-size:1.2rem; line-height:1.25; overflow-wrap:anywhere; }
.card-link,.work-card .work-go { color:var(--teal); }
.work-card .work-client,.tag { color:var(--teal); }
.tag { background:#e9f1ed; border-radius:100px; padding:5px 10px; display:inline-block; margin-bottom:12px; }
.work-card img,.card img { aspect-ratio:16/10; height:auto; object-fit:cover; }
.grid-3,.work-grid { gap:24px; }
.section-heading { margin-bottom:30px; }
.section-heading h2 { font-size:clamp(1.8rem,3vw,2.6rem); }
.page-portfolio section.container:not(#hero):not(#cta) { border-top:1px solid var(--line); }
.portfolio-index { display:flex; gap:10px; flex-wrap:wrap; margin-top:32px; }
.portfolio-index a { padding:9px 16px; border:1px solid #b9ccc4; border-radius:100px; font-size:.85rem; text-decoration:none; }
.portfolio-index a:hover { background:#e3ece5; }
#practice ol li b { color:var(--gold); }
#practice .flow-caption { color:var(--muted); }
#cta { padding-block:96px; }
#cta h2 { font-size:clamp(2rem,3.5vw,3.2rem); max-width:800px; }
#cta p { color:var(--text); line-height:1.75; }
#faq .faq-list { border-color:var(--line); }
#faq details { border-color:var(--line); }
#faq summary { padding-block:24px; font-size:1.05rem; }
#faq .faq-a { color:var(--text); }
.page-about #hero { display:grid; grid-template-columns:1.3fr .7fr; align-items:center; gap:64px; }
.page-about #hero h1 { font-size:clamp(2.5rem,4.3vw,4rem); }
.page-about #hero .hero-photo img { height:410px; }
#story { max-width:850px; }
#story h2,#projects h2 { font-size:clamp(1.8rem,3vw,2.6rem); }
#story p { font-size:1.06rem; line-height:1.85; color:var(--text); }
.page-thriveworks-ghana #hero .hero-image { border-radius:20px; margin-top:44px; max-width:1080px; }
#progress p { color:var(--muted); line-height:1.8; max-width:760px; }
#form-section { gap:48px; padding-top:12px; padding-bottom:88px; }
#contact-form { background:#fff; border:1px solid var(--line); padding:32px; border-radius:20px; gap:22px; }
input,textarea { border:1px solid #adbfba; background:#fafbf8; padding:14px 16px; font-size:1rem; border-radius:9px; }
input:focus,textarea:focus { border-color:var(--teal); box-shadow:0 0 0 3px #28645e18; outline:2px solid transparent; }
label { color:var(--dark); }
.side-note { background:#e8efe8; border:0; box-shadow:none; border-radius:20px; padding:32px; }
.side-note h2 { font-size:1.65rem; }
.side-note p { color:var(--text); line-height:1.8; }
.side-note a { color:var(--teal); overflow-wrap:anywhere; }
.page-privacy-policy #hero,.page-privacy-policy main { max-width:850px; }
.page-privacy-policy section.policy-block { padding-block:0; }
.page-privacy-policy .policy-block h2 { font-size:1.4rem; }
.page-privacy-policy th { background:#e8efe8; }
footer { background:#102631; margin-top:0; padding:64px 24px 28px; }
footer .container { padding-inline:0; }
footer .footer-inner { max-width:1116px; padding:0; }
footer h3 { font-size:1.5rem; }
footer .tagline { color:var(--gold); }
footer p,footer a { color:var(--muted); }
footer nav.footer-nav { position:static; justify-content:flex-start; gap:18px; }
footer nav.footer-nav a { padding-block:8px; text-decoration:none; }
footer a:hover { color:var(--gold); }
.copyright { border-top:1px solid #ffffff18; padding-top:24px; opacity:1; color:#a3b7bf; }
.cc-footer-link { font-size:.8rem; margin-top:10px; }
#cookie-consent-banner { background:#f7f5effa; color:var(--dark); border:1px solid var(--line); box-shadow:0 8px 36px #142d3930; }
#cookie-consent-banner .cc-icon { color:var(--teal); }
#cookie-consent-banner .cc-text,#cookie-consent-banner .cc-text a { color:var(--text); }
#cookie-consent-banner .cc-btn-accept { background:var(--teal); color:#fff; }
#cookie-consent-banner .cc-btn-accept:hover { background:var(--dark); }
#cookie-consent-banner .cc-btn-reject { background:#e6ede8; color:var(--dark); border-color:#b7c7bf; }
#cookie-consent-banner .cc-btn-manage { color:var(--dark); border-color:#b7c7bf; }
.page-404 { background:var(--dark); color:var(--cream); }
.page-404 main { max-width:650px; }
.page-404 .label { color:var(--gold); }
.page-404 h1 { color:var(--cream); font-family:Georgia,serif; font-size:clamp(3rem,7vw,5.5rem); }
.page-404 nav { position:static; background:none; padding:0; justify-content:flex-start; }
.page-404 a:focus-visible { outline-color:var(--gold); }
@media (min-width:761px) { .page-thriveworks-ghana #hero { display:grid; grid-template-columns:1.05fr .95fr; column-gap:48px; align-content:center; } .page-thriveworks-ghana #hero .hero-image { grid-column:2; grid-row:1/5; align-self:center; margin-top:0; } .page-thriveworks-ghana #hero h1 { font-size:clamp(2.5rem,4vw,3.8rem); } .page-thriveworks-ghana #hero .btn { justify-self:start; } }
@media (max-width:1000px) { .desktop-links { display:none; } .page-home #hero,.page-about #hero { gap:36px; } body > nav { padding-inline:24px; } .page-home #hero .hero-photo img { height:430px; } }
@media (max-width:760px) {
  .container,.container-wide { padding-inline:24px; }
  section,section.container { padding-block:60px; }
  #hero { padding-block:56px 48px; }
  #hero h1,.page-home #hero h1,.page-about #hero h1 { font-size:clamp(2.4rem,8.5vw,3.7rem); }
  #hero p { font-size:1rem; }
  .page-home #hero,.page-about #hero { grid-template-columns:1fr; gap:36px; }
  #hero .hero-photo { border-radius:100px 100px 16px 16px; width:calc(100% - 12px); max-width:460px; }
  .page-home #hero .hero-photo img,.page-about #hero .hero-photo img { height:380px; }
  .grid-3,.work-grid,.firms-grid { grid-template-columns:1fr; }
  .firm-card,.card-body,.work-card .work-body { padding:24px; }
  #contact-form,.side-note { padding:24px; }
  #cta { padding-block:64px; }
  .brand-name { font-size:.85rem; }
  body > nav { padding:12px 20px; }
  #form-section { gap:24px; }
  .page-privacy-policy #hero { padding-inline:24px; }
}
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { scroll-behavior:auto !important; transition:none !important; animation:none !important; } .work-card,.work-card img { transform:none !important; } }