:root { --ink:#0b3440; --ink-deep:#082731; --teal:#0f5967; --teal-soft:#e8f1ef; --green:#739c78; --green-light:#dcebdd; --gold:#e0c78f; --paper:#f8faf7; --white:#fff; --line:#d8e3de; --muted:#62757a; --radius:18px; --shadow:0 18px 55px rgba(11,52,64,.10); }
* { box-sizing:border-box; } html { scroll-behavior:smooth; } body { margin:0; color:var(--ink); background:var(--paper); font-family:'Segoe UI',Arial,sans-serif; line-height:1.55; } h1,h2,h3,p { margin-top:0; } h1,h2,h3,strong { font-family:'Trebuchet MS','Segoe UI',Arial,sans-serif; } h1,h2 { letter-spacing:-.045em; line-height:1.06; } h2 { font-size:clamp(2rem,4vw,3.6rem); margin-bottom:1rem; } h3 { line-height:1.2; } a { color:inherit; } button,a { -webkit-tap-highlight-color:transparent; } .skip-link { position:absolute; left:1rem; top:-100px; background:var(--gold); padding:.65rem 1rem; z-index:10; } .skip-link:focus { top:1rem; }
.site-header { position:sticky; top:0; z-index:5; background:rgba(8,39,49,.96); color:#f4f7f0; box-shadow:0 1px 0 rgba(255,255,255,.1); } .nav-shell { width:min(1180px,calc(100% - 48px)); margin:auto; min-height:76px; display:flex; align-items:center; justify-content:space-between; gap:2rem; } .brand { display:flex; align-items:center; gap:.75rem; text-decoration:none; line-height:1.05; } .brand-mark { display:grid; place-items:center; width:38px; height:38px; border:1px solid var(--gold); color:var(--gold); border-radius:50%; font-family:'Manrope'; font-size:1.15rem; font-weight:800; } .brand strong,.brand small { display:block; } .brand strong { font-size:.96rem; letter-spacing:.08em; } .brand small { margin-top:.2rem; color:#a7c1c0; font-size:.68rem; } .site-nav { display:flex; align-items:center; gap:1.55rem; font-size:.83rem; } .site-nav a { text-decoration:none; color:#b5cdca; transition:color .2s ease; } .site-nav a:hover,.site-nav a:focus,.site-nav a.is-active { color:var(--gold); } .menu-toggle { display:none; background:transparent; border:1px solid #5c7b7d; color:#fff; border-radius:99px; padding:.55rem .8rem; font:inherit; }
.hero-illustration { position:absolute; top:1.8rem; right:1.8rem; width:45%; opacity:.9; z-index:1; } .section-illustration { display:block; width:110px; height:90px; object-fit:contain; margin:-1rem 0 1rem; } .activity-illustration { width:84px; height:54px; object-fit:contain; margin-bottom:1rem; } .wide-illustration { display:block; width:180px; height:110px; object-fit:contain; margin:0 auto 1.6rem; } .scope-note { margin:1.2rem 0 0; font-size:.82rem; color:var(--muted); } .scope-note strong { color:var(--teal); } .question-card { margin-top:1.5rem; padding:1rem 1.2rem; border-left:3px solid var(--green); background:#f3f8f3; } .question-card p { margin:0; color:var(--ink); font-weight:600; font-size:.9rem; } .aside-note { padding-top:1rem; border-top:1px solid rgba(255,255,255,.18); font-size:.78rem !important; color:#d7e4df !important; } .closing-illustration { display:block; width:100px; height:72px; object-fit:contain; margin-bottom:1rem; }
.section,.hero { width:min(1180px,calc(100% - 48px)); margin:auto; } .hero { min-height:680px; display:grid; grid-template-columns:1.05fr .95fr; align-items:center; gap:3rem; padding:5rem 0 5.5rem; } .eyebrow { color:var(--teal); font-size:.71rem; font-weight:700; text-transform:uppercase; letter-spacing:.18em; margin-bottom:1.25rem; } .hero h1 { max-width:680px; font-size:clamp(3.3rem,7vw,6.3rem); margin:0 0 1.45rem; } .hero h1 em { color:var(--teal); font-style:normal; } .hero-lead { max-width:520px; color:var(--muted); font-size:1.12rem; } .hero-meta { display:flex; gap:.7rem; flex-wrap:wrap; margin:2rem 0; color:var(--teal); font-size:.85rem; font-weight:600; } .button { display:inline-flex; align-items:center; gap:.8rem; border-radius:999px; padding:.88rem 1.25rem; font-weight:700; text-decoration:none; font-size:.84rem; transition:transform .2s ease,box-shadow .2s ease; } .button:hover,.button:focus-visible { transform:translateY(-2px); box-shadow:0 9px 20px rgba(11,52,64,.16); } .button-primary { background:var(--ink); color:#fff; } .button-light { background:var(--gold); color:var(--ink); }
.hero-visual { position:relative; min-height:465px; overflow:hidden; background:var(--ink); border-radius:var(--radius); box-shadow:var(--shadow); } .hero-visual::before { content:""; position:absolute; inset:0; background:radial-gradient(circle at 70% 25%,rgba(224,199,143,.2),transparent 22%), radial-gradient(circle at 25% 75%,rgba(115,156,120,.22),transparent 28%); } .orbit { position:absolute; border:1px solid rgba(224,199,143,.38); border-radius:50%; transform:rotate(-23deg); } .orbit-one { width:360px; height:185px; left:30px; top:115px; } .orbit-two { width:290px; height:380px; left:100px; top:20px; transform:rotate(34deg); } .node { position:absolute; display:grid; place-items:center; border-radius:50%; color:var(--ink); background:var(--gold); font-size:.75rem; font-weight:700; text-align:center; z-index:1; } .node-main { width:142px; height:142px; left:50%; top:35%; transform:translate(-50%,-50%); background:#f4ead0; font-family:'Manrope'; font-size:1.05rem; } .node-main b { display:block; margin-top:-1rem; color:var(--teal); font-size:.66rem; letter-spacing:.16em; } .node-a,.node-b,.node-c { width:90px; height:90px; background:var(--green-light); } .node-a { left:13%; top:23%; }.node-b { right:11%; top:28%; background:var(--gold); }.node-c { left:17%; bottom:16%; background:#b6d0c3; }.connection { position:absolute; height:1px; width:115px; background:var(--gold); opacity:.75; transform-origin:left; }.connection-a { left:30%; top:32%; transform:rotate(16deg); }.connection-b { left:59%; top:30%; transform:rotate(8deg); }.connection-c { left:31%; top:66%; transform:rotate(-28deg); }.visual-note { position:absolute; left:2rem; bottom:1.5rem; width:200px; color:#a6c5c0; font-size:.78rem; }
.section { padding:7.5rem 0; } .section-soft { width:100%; padding-left:max(24px,calc((100% - 1180px)/2)); padding-right:max(24px,calc((100% - 1180px)/2)); background:var(--teal-soft); } .section-heading { max-width:700px; margin-bottom:3rem; } .section-heading p:not(.eyebrow) { color:var(--muted); max-width:560px; }.context-grid { display:grid; grid-template-columns:1.15fr .85fr; gap:4rem; }.context-card { background:white; border:1px solid var(--line); border-radius:var(--radius); padding:2.5rem; box-shadow:0 10px 35px rgba(11,52,64,.05); }.context-card-featured { border-top:4px solid var(--green); }.card-kicker { display:block; color:var(--teal); text-transform:uppercase; letter-spacing:.13em; font-size:.68rem; font-weight:700; margin-bottom:1rem; }.context-card h3 { font-size:1.7rem; margin-bottom:1rem; }.context-card p { color:var(--muted); }.notice { display:flex; align-items:flex-start; gap:.8rem; margin-top:2rem; padding:1rem; background:var(--teal-soft); border-radius:12px; color:var(--ink); font-size:.85rem; }.notice span { display:grid; place-items:center; flex:0 0 24px; height:24px; border:1px solid var(--teal); border-radius:50%; font-weight:700; }.notice p { color:var(--ink); margin:0; }.prep-list { padding-top:1rem; }.prep-item { display:flex; align-items:center; gap:1.1rem; min-height:58px; border-bottom:1px solid var(--line); }.prep-item span { color:var(--green); font-family:'Manrope'; font-weight:800; font-size:.8rem; }.prep-item p { margin:0; font-weight:600; font-size:.93rem; }
.activity-topline,.activity-heading,.activity-layout { display:flex; justify-content:space-between; align-items:flex-start; gap:2rem; }.activity-topline { align-items:center; border-bottom:1px solid var(--line); padding-bottom:1.1rem; }.activity-topline .eyebrow { margin:0; }.status { padding:.45rem .75rem; border-radius:99px; font-size:.69rem; font-weight:700; }.status-pending { color:#916c2d; background:#f8efd8; }.status-planned { color:#37704a; background:var(--green-light); }.activity-heading { align-items:flex-end; padding:2.7rem 0 3rem; }.activity-heading h2 { max-width:720px; margin-bottom:.8rem; }.activity-subtitle { color:var(--teal); font-weight:700; }.activity-subtitle span { color:var(--green); margin:0 .45rem; }.activity-number { color:var(--green); font:800 5rem/1 'Manrope'; letter-spacing:-.08em; }.activity-layout { align-items:stretch; }.details-table { flex:1; border-top:1px solid var(--line); }.detail-row { display:flex; justify-content:space-between; gap:2rem; padding:1.05rem 0; border-bottom:1px solid var(--line); font-size:.9rem; }.detail-row span { color:var(--muted); }.detail-row strong { font-size:.87rem; font-weight:700; }.activity-aside { width:36%; padding:2rem; background:var(--ink); color:#fff; border-radius:var(--radius); }.pending-icon { display:grid; place-items:center; width:40px; height:40px; margin-bottom:2rem; border:1px solid var(--gold); border-radius:50%; color:var(--gold); font-weight:700; }.activity-aside h3 { font-size:1.2rem; }.activity-aside p { color:#aec1c0; font-size:.9rem; }.text-link { color:var(--gold); font-size:.82rem; font-weight:700; text-decoration:none; }.evidence-grid { display:grid; grid-template-columns:1fr 1fr; gap:1rem; margin-top:1rem; }.evidence-placeholder { min-height:170px; display:grid; place-items:center; align-content:center; gap:.5rem; border:1px dashed #93aaa7; border-radius:var(--radius); color:var(--teal); text-align:center; background:rgba(232,241,239,.42); }.evidence-placeholder span { font-size:2rem; color:var(--green); }.evidence-placeholder p { margin:0; font-weight:700; }.evidence-placeholder small { max-width:230px; color:var(--muted); }.evidence-caption { padding:2rem; border-left:3px solid var(--green); align-self:center; }.evidence-caption p { color:var(--muted); max-width:380px; }.future-note { display:flex; gap:1rem; align-items:center; margin-top:1.3rem; padding:1.2rem 1.5rem; border-radius:12px; background:rgba(115,156,120,.13); }.future-note span { color:var(--green); font-size:1.4rem; }.future-note p { margin:0; color:var(--ink); font-size:.9rem; }
.observation-strip { display:grid; grid-template-columns:.75fr 1fr .55fr; gap:2rem; align-items:start; padding:4rem max(24px,calc((100% - 1180px)/2)); background:#f2f6f1; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }.observation-strip .eyebrow { margin-bottom:.8rem; }.observation-strip h2 { font-size:1.8rem; }.observation-strip p:not(.eyebrow) { margin:0; color:var(--muted); }.observation-strip small { color:var(--teal); font-size:.75rem; }.reflection-band { display:grid; grid-template-columns:1.1fr .9fr; gap:3rem; padding:5.5rem max(24px,calc((100% - 1180px)/2)); background:var(--ink); color:#fff; }.reflection-band .eyebrow { color:var(--gold); }.reflection-band h2 { max-width:580px; }.reflection-band p:not(.eyebrow) { color:#afc4c1; max-width:550px; }.ods-list { align-self:center; display:grid; gap:.75rem; }.ods-list span { padding:1rem 1.2rem; border:1px solid rgba(224,199,143,.45); border-radius:12px; color:#d5e4de; font-size:.87rem; }.ods-list b { display:block; margin-bottom:.2rem; color:var(--gold); font-size:.7rem; letter-spacing:.12em; }.reflection-band-light { background:var(--green-light); color:var(--ink); }.reflection-band-light .eyebrow { color:var(--teal); }.reflection-band-light p:not(.eyebrow) { color:var(--muted); }.reflection-band-light .ods-list span { border-color:rgba(11,52,64,.2); color:var(--ink); }
.split-heading { max-width:none; display:grid; grid-template-columns:1fr .8fr; align-items:end; gap:4rem; }.split-heading > p { margin:0; }.findings-grid { display:grid; grid-template-columns:1fr 1fr; gap:1rem; }.finding-column { border:1px solid var(--line); border-radius:var(--radius); padding:2rem; }.column-label { display:flex; align-items:center; gap:.8rem; border-bottom:1px solid var(--line); padding-bottom:1.25rem; }.column-label h3 { margin:0; font-size:1.05rem; }.label-dot { width:10px; height:10px; border-radius:50%; }.label-dot-blue { background:var(--teal); }.label-dot-green { background:var(--green); }.finding-column ul { margin:0; padding:0; list-style:none; }.finding-column li { padding:1rem 0; border-bottom:1px solid var(--line); font-size:.9rem; }.finding-column li:last-child { border-bottom:0; }.finding-column small { display:block; color:var(--muted); margin-top:.2rem; font-size:.74rem; }.metrics { display:grid; grid-template-columns:repeat(4,1fr); margin-top:3rem; background:var(--teal-soft); border-radius:var(--radius); overflow:hidden; }.metrics div { padding:1.6rem; border-right:1px solid var(--line); }.metrics div:last-child { border:0; }.metrics strong { display:block; color:var(--teal); font-size:2.3rem; line-height:1; margin-bottom:.5rem; }.metrics span { display:block; color:var(--muted); font-size:.78rem; }
.closing-section { background:var(--teal); color:#fff; }.closing-inner { width:min(1180px,calc(100% - 48px)); margin:auto; padding:7.5rem 0; }.closing-section .eyebrow { color:var(--gold); }.closing-section h2 { max-width:800px; }.closing-lead { max-width:700px; font-size:1.25rem; color:#d2e2dd; }.closing-columns { display:grid; grid-template-columns:.7fr 1.3fr; gap:5rem; margin-top:4rem; padding-top:2rem; border-top:1px solid rgba(255,255,255,.22); }.closing-columns p { color:#b7ceca; }.closing-columns blockquote { margin:0; color:#f5efd9; font:600 clamp(1.35rem,2.5vw,2rem)/1.35 'Manrope'; letter-spacing:-.02em; }.references { display:grid; grid-template-columns:.75fr 1.25fr; gap:6rem; }.references-title p:not(.eyebrow) { color:var(--muted); }.reference-list { border-top:1px solid var(--line); }.reference-item { display:grid; grid-template-columns:45px 1fr; gap:1rem; padding:1.5rem 0; border-bottom:1px solid var(--line); }.reference-item span { color:var(--green); font-weight:700; }.reference-item p { margin:0; color:var(--muted); font-size:.9rem; }.site-footer { background:var(--ink-deep); color:#fff; padding:3.5rem max(24px,calc((100% - 1180px)/2)) 1.5rem; }.footer-main { display:grid; grid-template-columns:1.2fr 1fr auto; align-items:center; gap:2rem; padding-bottom:3rem; }.brand-footer small { color:#a7c1c0; }.footer-main p { margin:0; color:#a7bfbd; font-size:.85rem; }.footer-bottom { display:flex; justify-content:space-between; gap:1rem; padding-top:1.2rem; border-top:1px solid rgba(255,255,255,.15); color:#80a19f; font-size:.72rem; }.back-to-top { position:fixed; right:1.5rem; bottom:1.5rem; display:grid; place-items:center; width:42px; height:42px; border:0; border-radius:50%; background:var(--gold); color:var(--ink); font-size:1.2rem; opacity:0; pointer-events:none; transform:translateY(8px); transition:.2s ease; z-index:4; }.back-to-top.is-visible { opacity:1; pointer-events:auto; transform:translateY(0); }
@media (max-width: 820px) { .nav-shell { width:calc(100% - 32px); min-height:66px; }.menu-toggle { display:flex; gap:.5rem; align-items:center; }.site-nav { position:absolute; left:16px; right:16px; top:74px; display:none; flex-direction:column; align-items:stretch; gap:0; padding:.55rem; background:var(--ink-deep); border:1px solid #315860; border-radius:14px; box-shadow:var(--shadow); }.site-nav.is-open { display:flex; }.site-nav a { padding:.8rem; }.hero,.context-grid,.activity-layout,.reflection-band,.references,.closing-columns,.split-heading { grid-template-columns:1fr; }.hero { padding:4.5rem 0 4rem; min-height:auto; }.hero-visual { min-height:390px; }.section { padding:5rem 0; }.section-soft { padding-left:16px; padding-right:16px; }.activity-heading { align-items:flex-start; }.activity-number { font-size:3.7rem; }.activity-aside { width:100%; }.evidence-grid,.findings-grid { grid-template-columns:1fr; }.metrics { grid-template-columns:1fr 1fr; }.metrics div:nth-child(2) { border-right:0; }.metrics div:nth-child(-n+2) { border-bottom:1px solid var(--line); }.footer-main { grid-template-columns:1fr; }.footer-main .button { justify-self:start; }.footer-bottom { flex-direction:column; } }
@media (max-width: 520px) { .section,.hero,.closing-inner { width:calc(100% - 32px); }.hero h1 { font-size:3.2rem; }.hero-visual { min-height:340px; }.node-main { width:120px; height:120px; }.node-a,.node-b,.node-c { width:72px; height:72px; font-size:.65rem; }.orbit-one { width:280px; left:10px; }.orbit-two { left:70px; }.activity-topline { align-items:flex-start; flex-direction:column; gap:.8rem; }.activity-heading { padding:2rem 0; }.detail-row { flex-direction:column; gap:.25rem; }.context-card { padding:1.5rem; }.metrics strong { font-size:1.8rem; } }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior:auto; } *,*::before,*::after { transition-duration:.01ms !important; animation-duration:.01ms !important; animation-iteration-count:1 !important; } }