/* Ori — shared site styles.
   Linked by every public page before its own <style> block, which holds
   page-specific rules. Change the shared nav, buttons, newsletter strip,
   footer and layout here once instead of on every page. */

:root{color-scheme:light;--green-text:#3A6E47;--hc-bg:#2E4F7A;--hc-ink:#F5EFE4;--hc-hover:#223B5C;--icon-moon:block;--icon-sun:none;--bg:#F5EFE4;--surface:#FFFFFF;--surface-glass:rgba(255,255,255,.6);--surface-hover:#EDE6D9;--surface-soft:#F7FAF5;--surface-muted:rgba(245,239,228,.5);--panel:#E8D5B7;--panel-hover:#DFC6A0;--nav-bg:rgba(245,239,228,.96);--band:#3D2B1F;--text:#3D2B1F;--text-2:#7A5C3E;--text-3:#A89B8C;--moss-text:#6B7B5E;--motif:#2E4F7A;--btn:#3D2B1F;--btn-ink:#F5EFE4;--btn-hover:#2a1e14;--clay-text:#9E5432;--k-gold:#C9963A;--k-yellow:#E2C145;--k-green:#3A6E47;--k-blue:#2E4F7A;--k-red:#B83830;--k-black:#1C1008;--clay:#C4714A;--earth:#7A5C3E;--sand:#E8D5B7;--cream:#F5EFE4;--bark:#3D2B1F;--moss:#6B7B5E;--smoke:#A89B8C;--light-border:rgba(168,155,140,.25);--serif:"Cormorant Garamond",Georgia,serif;--sans:"Jost",sans-serif}
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}html{scroll-behavior:smooth}
body{font-family:var(--sans);background:var(--bg);color:var(--text);font-weight:400;line-height:1.7;overflow-x:hidden}
a{color:inherit;text-decoration:none}
body::before{content:"";position:fixed;inset:0;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");pointer-events:none;z-index:9999;opacity:.5}
h1,h2,h3,h4{font-family:var(--serif);font-weight:400;line-height:1.15}
h1{font-size:clamp(2.8rem,6vw,5rem)}h2{font-size:clamp(2rem,4vw,3rem)}h3{font-size:1.5rem}h4{font-size:1.2rem}
.label{font-size:.884rem;letter-spacing:.176em;text-transform:uppercase;font-weight:400;color:var(--text-2)}
.ori-device .o{color:var(--clay);font-style:italic}
.ori-device .rest{color:var(--cream)}
.ori-device.ori-light .pipe{color:var(--text-2)}
.ori-device.ori-light .rest{color:var(--text-2)}

/* NAV */
nav{position:fixed;top:0;left:0;right:0;z-index:100;display:flex;align-items:center;justify-content:space-between;padding:1.5rem 4rem;transition:background .4s,box-shadow .4s,padding .3s}
nav.scrolled,nav.solid{background:var(--nav-bg);backdrop-filter:blur(10px);box-shadow:0 1px 0 var(--light-border)}
nav.scrolled{padding:1rem 4rem}
.logo{display:flex;align-items:center;gap:10px}
.logo-mark{width:36px;height:36px;min-width:36px;flex-shrink:0;display:block}
.logo-wordmark{font-family:var(--serif);font-size:1.5rem;font-weight:500;letter-spacing:.12em;color:var(--text);display:block}
.logo-tagline{font-size:.81rem;letter-spacing:.16em;text-transform:uppercase;color:var(--text-2);display:block;margin-top:-3px}
.nav-links{display:flex;align-items:center;gap:2.5rem}
.nav-links a{font-size:.84rem;letter-spacing:.12em;text-transform:uppercase;color:var(--text-2);transition:color .2s;position:relative}
.nav-links a:hover{color:var(--clay)}
.nav-links a.active{color:var(--text)}
.nav-links a.active::after{content:"";position:absolute;bottom:-4px;left:0;right:0;height:1px;background:var(--moss)}
.nav-cta{background:var(--btn)!important;color:var(--btn-ink)!important;padding:.55rem 1.4rem!important;border-radius:2px;transition:background .2s!important}
.nav-cta:hover{background:var(--clay)!important}
.nav-cta.active::after{display:none!important}
.mobile-toggle{display:none;background:none;border:none;cursor:pointer;color:var(--text)}

/* PAGE HERO */
.page-hero{padding:10rem 4rem 5rem;background:var(--band);color:var(--cream);position:relative;overflow:hidden}
.page-hero::before{content:"";position:absolute;right:-5%;top:-20%;width:40%;height:140%;background:radial-gradient(ellipse,rgba(196,113,74,.12) 0%,transparent 60%);pointer-events:none}
.page-hero .label{color:var(--sand);margin-bottom:1rem;display:block}
.page-hero h1{color:var(--cream);margin-bottom:1.25rem}
.page-hero h1 em{color:var(--clay);font-style:italic}
.page-hero p{color:rgba(245,239,228,.7);font-size:1.176rem;max-width:560px;line-height:1.85}

/* SECTIONS */
section{padding:6rem 4rem}
.section-header{margin-bottom:3.5rem}
.section-header .label{margin-bottom:.75rem;display:block}
.section-header h2{color:var(--text)}
.section-header p{font-size:1.12rem;color:var(--text-2);max-width:560px;margin-top:.75rem;line-height:1.8}

/* BUTTONS */
.btn-primary{background:var(--btn);color:var(--btn-ink);padding:.85rem 2rem;font-family:var(--sans);font-size:.95rem;letter-spacing:.14em;text-transform:uppercase;border:none;cursor:pointer;border-radius:2px;transition:background .2s;display:inline-block}
.btn-primary:hover{background:var(--clay)}
.btn-outline{background:transparent;color:var(--text);padding:.85rem 2rem;font-family:var(--sans);font-size:.95rem;letter-spacing:.14em;text-transform:uppercase;border:1.5px solid var(--text);cursor:pointer;border-radius:2px;transition:all .2s;display:inline-block}
.btn-outline:hover{background:var(--btn);color:var(--btn-ink)}

/* MARQUEE */
.marquee-section{background:var(--band);padding:1.1rem 0;overflow:hidden}
.marquee-track{display:flex;animation:marquee 28s linear infinite;white-space:nowrap}
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* NEWSLETTER */
.newsletter-strip{background:var(--clay);padding:5rem 4rem;text-align:center;position:relative;overflow:hidden}
.newsletter-strip::before{content:"THE SHIPPING FORECAST";position:absolute;font-family:var(--serif);font-size:10rem;font-weight:300;color:rgba(255,255,255,.04);white-space:nowrap;top:50%;left:50%;transform:translate(-50%,-50%);pointer-events:none;letter-spacing:.05em}
.newsletter-inner{position:relative;z-index:1;max-width:520px;margin:0 auto}
.newsletter-strip .label{color:var(--k-black);margin-bottom:.75rem;display:block}
.newsletter-strip h2{color:var(--cream);font-size:clamp(1.6rem,3vw,2.4rem);margin-bottom:.85rem}
.newsletter-strip p{color:var(--k-black);margin-bottom:2rem;font-size:1.15rem;line-height:1.8}
.newsletter-form{display:flex;max-width:400px;margin:0 auto}
.newsletter-form input{flex:1;padding:.85rem 1.25rem;font-family:var(--sans);font-size:1.105rem;background:rgba(255,255,255,.15);border:1px solid rgba(255,255,255,.3);border-right:none;color:var(--cream);outline:none;border-radius:2px 0 0 2px}
.newsletter-form input::placeholder{color:rgba(245,239,228,.5)}
.newsletter-form button{white-space:nowrap;padding:.85rem 1.5rem;background:var(--btn);color:var(--btn-ink);font-family:var(--sans);font-size:.936rem;letter-spacing:.14em;text-transform:uppercase;border:none;cursor:pointer;border-radius:0 2px 2px 0;transition:background .2s}
.newsletter-form button:hover{background:var(--btn-hover)}

/* FOOTER */
footer{background:var(--band);color:var(--sand);padding:5rem 4rem 2.5rem}
.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:3rem;margin-bottom:4rem}
.footer-brand .logo{margin-bottom:1.25rem}
.footer-brand .logo-wordmark{color:var(--cream)}.footer-brand .logo-tagline{color:var(--text-3)}
.footer-brand p{font-size:1.079rem;color:rgba(232,213,183,.7);line-height:1.8;max-width:280px}
.footer-col h2{line-height:1.7;font-family:var(--sans);font-size:.878rem;letter-spacing:.16em;text-transform:uppercase;color:var(--text-3);margin-bottom:1.25rem;font-weight:400}
.footer-col a{display:block;padding:.15rem 0;font-size:1.079rem;color:rgba(232,213,183,.7);margin-bottom:.6rem;transition:color .2s}
.footer-col a:hover{color:var(--clay)}
.footer-bottom{border-top:1px solid rgba(232,213,183,.1);padding-top:2rem;display:flex;justify-content:space-between;align-items:center;font-size:.936rem;color:rgba(232,213,183,.7);letter-spacing:.08em}

/* REVEAL — content is only hidden for animation once site.js has run (html.js), so it still shows if scripts fail */
.js .reveal{opacity:0;transform:translateY(24px);transition:opacity .7s ease,transform .7s ease}
.js .reveal.visible{opacity:1;transform:translateY(0)}
.reveal-delay-1{transition-delay:.1s}.reveal-delay-2{transition-delay:.2s}.reveal-delay-3{transition-delay:.3s}.reveal-delay-4{transition-delay:.4s}

/* RESPONSIVE */
@media(max-width:1024px){nav{padding:1.5rem 2rem}nav.scrolled,nav.solid{padding:1rem 2rem}section{padding:5rem 2rem}.page-hero{padding:8rem 2rem 4rem}.newsletter-strip{padding:4rem 2rem}footer{padding:4rem 2rem 2rem}.footer-grid{grid-template-columns:1fr 1fr}}
@media(max-width:768px){.nav-links{display:none;flex-direction:column;background:var(--bg);position:absolute;top:100%;left:0;right:0;padding:1.5rem 2rem;border-bottom:1px solid var(--light-border);gap:1.25rem}.nav-links.show{display:flex}.mobile-toggle{display:block}.footer-grid{grid-template-columns:1fr}.newsletter-form{flex-direction:column}.newsletter-form input{border-right:1px solid rgba(255,255,255,.3);border-bottom:none;border-radius:2px 2px 0 0}.newsletter-form button{border-radius:0 0 2px 2px}.footer-bottom{flex-direction:column;gap:.75rem;text-align:center}}

/* ── DARK MODE ─────────────────────────────────────────────────────────
   Follows the visitor's system setting unless they pick a theme with the
   header toggle (stored as data-theme on <html>). Only the semantic tokens
   change; brand colours stay fixed. Dark bands (headers, footer) stay dark. */
:root[data-theme="dark"]{color-scheme:dark;--bg:#16100C;--surface:#211812;--surface-glass:rgba(255,255,255,.04);--surface-hover:#2A2019;--surface-soft:#1D2118;--surface-muted:rgba(255,255,255,.02);--panel:#2B2019;--panel-hover:#3A2C22;--nav-bg:rgba(22,16,12,.94);--band:#2E2219;--text:#F1E7D8;--text-2:#D2C0A8;--text-3:#B3A595;--moss-text:#A9B99B;--motif:#9DB4D6;--btn:#E8D5B7;--btn-ink:#2A1E15;--btn-hover:#F5EFE4;--clay-text:#E7A17C;--light-border:rgba(232,213,183,.16);--green-text:#93C4A0;--hc-bg:#C9963A;--hc-ink:#1C1008;--hc-hover:#E2C145;--icon-moon:none;--icon-sun:block;}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){color-scheme:dark;--bg:#16100C;--surface:#211812;--surface-glass:rgba(255,255,255,.04);--surface-hover:#2A2019;--surface-soft:#1D2118;--surface-muted:rgba(255,255,255,.02);--panel:#2B2019;--panel-hover:#3A2C22;--nav-bg:rgba(22,16,12,.94);--band:#2E2219;--text:#F1E7D8;--text-2:#D2C0A8;--text-3:#B3A595;--moss-text:#A9B99B;--motif:#9DB4D6;--btn:#E8D5B7;--btn-ink:#2A1E15;--btn-hover:#F5EFE4;--clay-text:#E7A17C;--light-border:rgba(232,213,183,.16);--green-text:#93C4A0;--hc-bg:#C9963A;--hc-ink:#1C1008;--hc-hover:#E2C145;--icon-moon:none;--icon-sun:block;}}

/* ── ADDITIONS ─────────────────────────────────────────────────────── */

/* Accessibility */
.skip-link{position:absolute;left:1rem;top:-4rem;z-index:300;background:var(--btn);color:var(--btn-ink);padding:.7rem 1.1rem;font-size:1.04rem;letter-spacing:.08em;border-radius:2px;transition:top .2s}
.skip-link:focus{top:1rem}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible{outline:2px solid var(--clay);outline-offset:3px}
.footer-bottom a{display:inline-block;padding:.4rem 0;transition:color .2s}.footer-bottom a:hover{color:var(--clay)}

/* Newsletter — "coming soon" state until The Shipping Forecast launches */
.soon-badge{display:inline-block;font-size:.81rem;letter-spacing:.144em;text-transform:uppercase;font-weight:500;color:var(--btn-ink);background:var(--btn);padding:.3rem .7rem;border-radius:100px;margin-bottom:1rem}
.newsletter-form input:disabled{cursor:not-allowed;opacity:.75}
.newsletter-form button:disabled{cursor:not-allowed;opacity:.9}
.newsletter-form button:disabled:hover{background:var(--btn)}
.newsletter-strip .newsletter-note{font-size:.95rem;color:var(--k-black);margin:1rem 0 0}
.footer-col .soon{font-size:.743rem;letter-spacing:.14em;text-transform:uppercase;color:var(--k-gold);margin-left:.35rem;vertical-align:middle}

/* Mobile "Book a Call" bar — site.js shows it after the visitor scrolls */
.mobile-cta{display:none}
@media(max-width:768px){
  .mobile-cta{display:block;position:fixed;left:16px;right:16px;bottom:16px;z-index:90;text-align:center;background:var(--btn);color:var(--btn-ink);font-size:.95rem;letter-spacing:.14em;text-transform:uppercase;padding:1rem;border-radius:2px;box-shadow:0 8px 24px rgba(61,43,31,.25);transform:translateY(160%);transition:transform .3s ease}
  .mobile-cta.show{transform:none}
  footer{padding-bottom:6rem}
}

/* Testimonial quote (home hero proof, service cards) */
.proof-quote{background:var(--panel);padding:4rem;text-align:center}
.proof-quote blockquote{max-width:760px;margin:0 auto}
.proof-quote blockquote p{font-family:var(--serif);font-size:clamp(1.3rem,2.4vw,1.75rem);font-style:italic;line-height:1.45;color:var(--text)}
.proof-quote cite{display:block;margin-top:1.25rem;font-style:normal;font-size:.936rem;letter-spacing:.128em;text-transform:uppercase;color:var(--text-2)}
.proof-quote .proof-link{display:inline-block;font-weight:400;margin-top:1.25rem;font-size:.936rem;letter-spacing:.14em;text-transform:uppercase;color:var(--text);border-bottom:1px solid rgba(196,113,74,.35);padding-bottom:2px}
.svc-quote{margin:1.75rem 0 0;padding:1.25rem 1.5rem;border-left:2px solid var(--clay);background:var(--bg)}
.service-full .svc-quote p{font-family:var(--serif);font-style:italic;font-size:1.176rem;line-height:1.55;color:var(--text);margin:0}
.svc-quote cite{display:block;margin-top:.6rem;font-style:normal;font-size:.878rem;letter-spacing:.128em;text-transform:uppercase;color:var(--text-2)}

/* Next event strip (home) — filled by site.js from /api/events */
.next-event{background:var(--bg);border-top:1px solid var(--light-border);border-bottom:1px solid var(--light-border);padding:1.5rem 4rem}
.next-event[hidden]{display:none}
.next-event a{display:flex;align-items:center;gap:1.5rem;flex-wrap:wrap;max-width:1100px;margin:0 auto}
.next-event .ne-kicker{font-size:.878rem;letter-spacing:.16em;text-transform:uppercase;color:var(--clay-text)}
.next-event .ne-title{font-family:var(--serif);font-size:1.3rem;color:var(--text);flex:1;min-width:220px}
.next-event .ne-meta{font-size:1.066rem;color:var(--text-2)}
.next-event .ne-seats{font-size:.91rem;letter-spacing:.12em;text-transform:uppercase;color:var(--cream);background:var(--moss);padding:.3rem .7rem;border-radius:100px}
.next-event .ne-go{font-size:.936rem;letter-spacing:.14em;text-transform:uppercase;color:var(--text);border-bottom:1px solid var(--text);padding-bottom:2px}
.next-event a:hover .ne-go{color:var(--clay);border-color:var(--clay)}

/* Project Health Check promo band (home, articles) */
.hc-promo{background:var(--band);color:var(--cream);padding:5rem 4rem;position:relative;overflow:hidden}
.hc-promo-inner{max-width:1100px;margin:0 auto;display:grid;grid-template-columns:1.4fr 1fr;gap:3rem;align-items:center;position:relative;z-index:1}
.hc-promo .label{color:var(--sand);display:block;margin-bottom:.75rem}
.hc-promo h2{color:var(--cream);margin-bottom:1rem}
.hc-promo h2 em{color:var(--clay)}
.hc-promo p{color:rgba(245,239,228,.72);line-height:1.85;max-width:520px}
.hc-promo ul{list-style:none;margin-top:1.25rem}
.hc-promo li{font-size:1.105rem;color:rgba(245,239,228,.8);padding:.3rem 0;display:flex;gap:.6rem}
.hc-promo li::before{content:"—";color:var(--clay)}
.hc-promo-cta{text-align:center}
.hc-promo-cta .project-health-check{font-size:1.12rem}
.hc-promo-cta small{display:block;margin-top:1rem;font-size:.95rem;color:rgba(245,239,228,.78);letter-spacing:.04em}

/* FAQ (services) */
.faq-section{border-top:1px solid var(--light-border)}
.faq{max-width:820px;margin:0 auto}
.faq details{border-bottom:1px solid var(--light-border)}
.faq summary{list-style:none;cursor:pointer;padding:1.4rem 2.5rem 1.4rem 0;font-family:var(--serif);font-size:1.25rem;color:var(--text);position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:.25rem;top:50%;transform:translateY(-50%);font-family:var(--sans);font-weight:400;font-size:1.5rem;color:var(--clay);transition:transform .2s}
.faq details[open] summary::after{transform:translateY(-50%) rotate(45deg)}
.faq details p{font-size:1.15rem;color:var(--text-2);line-height:1.85;padding:0 0 1.5rem;max-width:700px}
.faq details p a{color:var(--clay-text);border-bottom:1px solid rgba(196,113,74,.35)}

@media(max-width:1024px){.proof-quote{padding:3.5rem 2rem}.next-event{padding:1.5rem 2rem}.hc-promo{padding:4rem 2rem}.hc-promo-inner{grid-template-columns:1fr}.hc-promo-cta{text-align:left}}

/* Theme toggle (sun/moon) and the menu button sit together at the right of the header */
.nav-tools{display:flex;align-items:center;gap:.6rem;margin-left:1.25rem;flex-shrink:0}
.theme-toggle{display:inline-flex;align-items:center;justify-content:center;width:42px;height:42px;border-radius:50%;border:1px solid var(--light-border);background:transparent;color:var(--text);cursor:pointer;transition:border-color .2s,color .2s}
.theme-toggle:hover{border-color:var(--clay);color:var(--clay)}
.theme-toggle svg{width:19px;height:19px}
.theme-toggle .i-moon{display:var(--icon-moon)}.theme-toggle .i-sun{display:var(--icon-sun)}
.mobile-toggle{color:var(--text)}
@media(max-width:420px){nav,nav.scrolled,nav.solid{padding-left:1.1rem;padding-right:1.1rem}.nav-tools{margin-left:.5rem;gap:.35rem}.theme-toggle{width:38px;height:38px}nav .logo-tagline{letter-spacing:.12em}}
/* Header menu: tighter spacing on mid-size screens, menu button below 1180px */
.nav-links a{white-space:nowrap}
.logo{flex-shrink:0}.logo-tagline{white-space:nowrap}
@media(max-width:1640px){.nav-links .hc-word{display:none}.nav-links{gap:1.6rem}.nav-links a.project-health-check{padding:.75rem 1.2rem}}
@media(max-width:1500px){.nav-links{gap:1.15rem}}
@media(max-width:1360px){.nav-links .hc-word{display:inline}.nav-links{display:none;flex-direction:column;align-items:flex-start;background:var(--bg);position:absolute;top:100%;left:0;right:0;padding:1.5rem 2rem;border-bottom:1px solid var(--light-border);gap:1.25rem}.nav-links.show{display:flex}.mobile-toggle{display:block}}

/* Respect "reduce motion" */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .marquee-track{animation:none}
  .js .reveal{opacity:1;transform:none;transition:none}
  .mobile-cta,.stat-card,.service-full,.project-health-check{transition:none}
}

/* ── KENTE ACCENTS & ADIRE MOTIFS ────────────────────────────────────
   Per the Ori colour system, Kente colours are accents used sparingly:
   Indigo (--k-blue) marks the Project Health Check and colours the Adire
   motifs; Asante Gold (--k-gold) highlights the mark's cardinal points,
   pull quotes and calls to action on dark sections. Kente Red is not
   used because it competes with Clay. */

/* Project Health Check button: indigo on light backgrounds (7.3:1 with cream),
   gold with dark text on dark sections. Leaf = Ewe Gbin, the healing-herb motif. */
.project-health-check,.nav-links a.project-health-check{display:inline-flex;align-items:center;gap:.55rem;padding:.8rem 1.6rem;background:var(--hc-bg);color:var(--hc-ink);border:none;border-radius:100px;font-family:var(--sans);font-size:.95rem;font-weight:500;letter-spacing:.08em;text-transform:uppercase;text-decoration:none;box-shadow:0 2px 0 rgba(28,16,8,.15);transition:background .2s,transform .2s,box-shadow .2s}
.project-health-check::before{content:"";width:1.45em;height:1.45em;margin:-.2em 0;flex-shrink:0;background:currentColor;-webkit-mask:url(assets/motifs/ewe-gbin-leaf.svg) center/contain no-repeat;mask:url(assets/motifs/ewe-gbin-leaf.svg) center/contain no-repeat}
.project-health-check:hover,.nav-links a.project-health-check:hover{background:var(--hc-hover);color:var(--hc-ink);transform:translateY(-2px);box-shadow:0 8px 24px rgba(46,79,122,.3)}
.nav-links a.project-health-check.active::after{display:none}
.hc-promo .project-health-check{background:var(--k-gold);color:var(--k-black);font-size:1.105rem;padding:1rem 2rem}
.hc-promo .project-health-check:hover{background:var(--k-yellow);color:var(--k-black);box-shadow:0 8px 24px rgba(201,150,58,.3)}

/* Motif utility: <span class="motif motif-leaf" aria-hidden="true"></span>, coloured by `color` */
.motif{display:inline-block;background:currentColor;-webkit-mask:var(--m) center/contain no-repeat;mask:var(--m) center/contain no-repeat}
.motif-circles{--m:url(assets/motifs/olokun-circles.svg)}
.motif-dots{--m:url(assets/motifs/oniko-dots.svg)}
.motif-zigzag{--m:url(assets/motifs/ibadan-dun-zigzag.svg)}
.motif-leaf{--m:url(assets/motifs/ewe-gbin-leaf.svg)}
.motif-compass{--m:url(assets/motifs/elewe-merin-four-leaves.svg)}
.motif-tree{--m:url(assets/motifs/odan-tree.svg)}

/* Kente woven strip — brand divider along the top of the footer */
footer{position:relative}
footer::before{content:"";position:absolute;top:0;left:0;right:0;height:6px;background:repeating-linear-gradient(90deg,var(--k-gold) 0 64px,var(--k-black) 64px 70px,var(--k-yellow) 70px 134px,var(--k-black) 134px 140px,var(--k-green) 140px 204px,var(--k-black) 204px 210px,var(--k-blue) 210px 274px,var(--k-black) 274px 280px)}

/* Olokun concentric circles — faint watermark in page headers */
.page-hero::after{content:"";position:absolute;right:4rem;top:50%;width:min(34vw,380px);aspect-ratio:1;transform:translateY(-38%);background:var(--sand);opacity:.07;pointer-events:none;-webkit-mask:url(assets/motifs/olokun-circles.svg) center/contain no-repeat;mask:url(assets/motifs/olokun-circles.svg) center/contain no-repeat}
.page-hero.hero-tree::after{-webkit-mask-image:url(assets/motifs/odan-tree.svg);mask-image:url(assets/motifs/odan-tree.svg);top:auto;bottom:-6px;transform:none;width:min(28vw,320px);opacity:.09}
.page-hero>*{position:relative;z-index:1}
@media(max-width:768px){.page-hero::after{right:-18%;width:70vw;opacity:.05}}

/* Gold accents on pull quotes; Oniko resist dots above, Ibadan Dun zigzag below */
.proof-quote{position:relative}
.proof-quote .quote-dots{width:92px;height:26px;color:var(--k-gold);margin:0 auto 1.5rem;display:block}
.proof-quote::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:12px;background:var(--motif);opacity:.85;-webkit-mask:url(assets/motifs/ibadan-dun-zigzag.svg) left bottom/auto 12px repeat-x;mask:url(assets/motifs/ibadan-dun-zigzag.svg) left bottom/auto 12px repeat-x}
.svc-quote{border-left-color:var(--k-gold)}
.hc-promo .label{color:var(--k-gold)}
.hc-promo::after{content:"";position:absolute;right:-60px;bottom:-80px;width:420px;height:420px;background:var(--k-gold);opacity:.06;pointer-events:none;-webkit-mask:url(assets/motifs/ewe-gbin-leaf.svg) center/contain no-repeat;mask:url(assets/motifs/ewe-gbin-leaf.svg) center/contain no-repeat}

/* Motif icons on small elements */
.next-event .ne-icon{width:26px;height:26px;color:var(--motif);flex-shrink:0}
.faq-ornament{width:34px;height:34px;color:var(--motif);display:block;margin:0 auto 1rem}
.soon-badge{background:var(--k-blue);color:var(--cream)}

/* Print: drop site chrome, keep the content readable on paper */
@media print{
  :root,:root:not([data-theme="light"]),:root[data-theme="dark"]{--green-text:#3A6E47;--hc-bg:#2E4F7A;--hc-ink:#F5EFE4;--hc-hover:#223B5C;--icon-moon:block;--icon-sun:none;--bg:#F5EFE4;--surface:#FFFFFF;--surface-glass:rgba(255,255,255,.6);--surface-hover:#EDE6D9;--surface-soft:#F7FAF5;--surface-muted:rgba(245,239,228,.5);--panel:#E8D5B7;--panel-hover:#DFC6A0;--nav-bg:rgba(245,239,228,.96);--band:#3D2B1F;--text:#3D2B1F;--text-2:#7A5C3E;--text-3:#A89B8C;--moss-text:#6B7B5E;--motif:#2E4F7A;--btn:#3D2B1F;--btn-ink:#F5EFE4;--btn-hover:#2a1e14;--clay-text:#9E5432;--k-gold:#C9963A;--k-yellow:#E2C145;--k-green:#3A6E47;--k-blue:#2E4F7A;--k-red:#B83830;--k-black:#1C1008;--clay:#C4714A;--earth:#7A5C3E;--sand:#E8D5B7;--cream:#F5EFE4;--bark:#3D2B1F;--moss:#6B7B5E;--smoke:#A89B8C;--light-border:rgba(168,155,140,.25);--serif:"Cormorant Garamond",Georgia,serif;--sans:"Jost",sans-serif}
  nav,footer,.mobile-cta,.skip-link,.marquee-section,.newsletter-strip,.hc-promo,.next-event,.book-tabs,#panel-cal{display:none!important}
  body{background:#fff}
  body::before{display:none}
  .page-hero{background:#fff;color:var(--bark);padding:0 0 1.5rem;border-bottom:1px solid var(--sand)}
  .page-hero::before,.page-hero::after{display:none}
  .page-hero h1,.page-hero p{color:var(--bark)}
  .page-hero .label{color:var(--clay-text)}
  .js .reveal{opacity:1;transform:none}
  section{padding:1.5rem 0}
}