/* ==========================================================================
   ohuruogu.com — consolidated theme stylesheet (v1.6.4)
   One file, four layers:
     1. Tokens & base        (shared everywhere)
     2. WP layout guard      (neutralises core-injected margins in our grids)
     3. Shared components    (nav, footer, buttons, hero, sections, CTA)
     4. Page layers          (scoped by body class ohu-{slug} — never global)
   Rule: anything that differs between pages MUST be scoped by body class.
   ========================================================================== */

/* ---------- 1. TOKENS & BASE ---------- */
:root{--ink:#12151A;--ink2:#1B1F26;--bone:#F5F2EB;--paper:#FFFFFF;--copper:#B4551F;--copper-lt:#D08A5C;--copper-dark:#9C4818;--text:#23272E;--muted:#5C636E;--muted-on-dark:#9AA1AB;--text-on-dark:#EAE7DF;--line:#E2DDD2;--line-dark:#2A2F38;--max:1120px;--copper-txt:#A64E1A;--line-strong:#8A8275;--line-strong-dark:#666D78}
*{margin:0;padding:0;box-sizing:border-box}
body{font-family:'Inter',system-ui,sans-serif;color:var(--text);background:var(--bone);font-size:17px;line-height:1.65;-webkit-font-smoothing:antialiased}
h1,h2,h3{font-family:'Fraunces',Georgia,serif;font-weight:600;line-height:1.12;letter-spacing:-.01em}
.wrap{max-width:var(--max);margin:0 auto;padding:0 28px}
.eyebrow{font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--copper-txt);margin-bottom:16px}
/* v1.6.4 contrast: --copper (#B4551F) is 4.41:1 on bone and 3.71:1 on ink — both under
   the 4.5:1 normal-text floor at eyebrow/link sizes. Small copper TEXT therefore uses
   --copper-txt (5.0:1+ on bone/paper) on light and --copper-lt (6.5:1 on ink) on dark;
   --copper itself remains the brand accent for buttons, borders and decorative marks. */
.hero .eyebrow,.offer .eyebrow,.process .eyebrow,.book .eyebrow,.section-dark .eyebrow,.is-style-section-dark .eyebrow,body.ohu-audit .final .eyebrow,body.ohu-insights .final .eyebrow,body.ohu-article .final .eyebrow,body.ohu-about .proof .eyebrow{color:var(--copper-lt)}
a:focus-visible,button:focus-visible{outline:2px solid var(--copper);outline-offset:3px}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* ---------- 2. WP LAYOUT GUARD ----------
   WordPress prints flow-layout base styles that give every 2nd+ child of a
   group block a margin-block-start (~24px). In normal document flow those
   margins collapse into ours and disappear; inside CSS grid/flex containers
   they DON'T collapse — they push cells down, misalign column tops and
   expose the 1px-gap grid background as tan strips. This stylesheet owns
   all spacing, so injected margins are zeroed inside every layout container.
   !important intentionally guards against WP versions that print these
   rules without :where() (higher specificity).                              */
.leak-grid>*,.breadth-grid>*,.offer-grid>*,.fit-grid>*,.lens-grid>*,
.deliver-grid>*,.hero-grid>*,.story-grid>*,.art-grid>*,.li-grid>*,
.book-grid>*,.enq-grid>*,.field-row>*,.logos>*,.split-grid>*,.stats-grid>*,
.cta-row>*,.wp-block-buttons.cta-row>*,.foot-inner>*,.foot-links>*,.nav-inner>*,.nav-right>*,
.ohu-cookie__inner>*,.ohu-cookie__actions>*,.ohu-cat>*{
  margin-block-start:0!important;margin-block-end:0!important
}

/* ---------- 3. SHARED COMPONENTS ---------- */
/* NAV — native blocks: paragraph.wordmark, core/navigation.nav-links, buttons.nav-cta, html toggle.
   Desktop layout: wordmark left; links pushed right (margin-left:auto) so they
   cluster beside the CTA — matches the approved design, no space-between spread. */
.site-head{background:var(--ink);position:sticky;top:0;z-index:50;border-bottom:1px solid var(--line-dark)}
.nav-inner{max-width:var(--max);margin:0 auto;padding:18px 28px;display:flex;align-items:center;gap:26px}
.wordmark{font-family:'Fraunces',serif;font-weight:600;font-size:19px;letter-spacing:.08em;text-transform:uppercase}
.wordmark a{color:var(--text-on-dark);text-decoration:none}
.wordmark a::after{content:".";color:var(--copper-lt)}
.nav-links{margin-left:auto}
.nav-links .wp-block-navigation__container,.nav-links ul{display:flex;gap:26px!important;align-items:center;list-style:none;margin:0;padding:0}
.nav-links a{color:var(--muted-on-dark);text-decoration:none;font-size:14.5px;font-weight:500;white-space:nowrap}
.nav-links a:hover{color:var(--text-on-dark)}
/* v1.5.1: the core Navigation block ships `.wp-block-navigation …__content.…__content{color:inherit}`
   at specificity (0,3,0), which outranks `.nav-links a` (0,1,1) and forces the links to inherit the
   body text colour (unreadable charcoal on ink). Pin the colour with a scoped rule that beats core
   (0,3,1 / 0,4,1) regardless of stylesheet load order. */
.site-head .nav-links a.wp-block-navigation-item__content{color:var(--muted-on-dark)}
.site-head .nav-links a.wp-block-navigation-item__content:hover{color:var(--text-on-dark)}
.nav-right{display:flex;align-items:center;gap:14px}
/* CTA is a native Buttons block: pin the compact nav size + kill any inherited underline */
.nav-cta .wp-block-button__link{font-size:14.5px;font-weight:500;padding:9px 18px;text-decoration:none}
.nav-toggle{display:none;background:none;border:0;padding:8px;cursor:pointer;flex-direction:column;gap:5px}
.nav-toggle-bar{display:block;width:22px;height:2px;background:var(--text-on-dark);border-radius:1px;transition:transform .2s ease,opacity .2s ease}
.nav-toggle.open .nav-toggle-bar:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav-toggle.open .nav-toggle-bar:nth-child(2){opacity:0}
.nav-toggle.open .nav-toggle-bar:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
/* FOOTER — native blocks: paragraphs inside .foot-inner / .foot-links */
.site-foot{background:var(--ink);color:var(--muted-on-dark);padding:54px 0}
body.ohu-audit .site-foot,body.ohu-insights .site-foot{border-top:1px solid var(--line-dark)}
.foot-inner{display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap;font-size:14px}
.foot-inner p{margin:0}
.foot-inner a{color:var(--muted-on-dark);text-decoration:none}
.foot-inner a:hover{color:var(--text-on-dark)}
.foot-links{display:flex;gap:22px}
/* BUTTONS (anchor, <button>, and native Buttons block adapters) */
.btn,button.btn{display:inline-block;background:var(--copper);color:#fff;text-decoration:none;font-weight:600;font-size:15.5px;padding:14px 26px;border-radius:4px;border:none;cursor:pointer;font-family:'Inter',sans-serif}
.btn:hover,button.btn:hover{background:var(--copper-dark)}
.btn-ghost{background:transparent;border:1px solid var(--line-dark);color:var(--text-on-dark)}
.btn-ghost:hover{background:var(--ink2);border-color:var(--muted-on-dark)}
.cta-row,.wp-block-buttons.cta-row{display:flex;gap:16px;flex-wrap:wrap;align-items:center}
.wp-block-button__link{background:var(--copper);color:#fff;text-decoration:none;font-weight:600;font-size:15.5px;padding:14px 26px;border-radius:4px;display:inline-block}
.wp-block-button:hover .wp-block-button__link{background:var(--copper-dark)}
.wp-block-button.btn-ghost .wp-block-button__link{background:transparent;border:1px solid var(--line-dark);color:var(--text-on-dark)}
.wp-block-button.btn-ghost:hover .wp-block-button__link{background:var(--ink2);border-color:var(--muted-on-dark)}
/* SECTIONS — base rhythm; per-page density scoped below */
section{padding:96px 0}
body.ohu-audit section{padding:92px 0}
body.ohu-insights section{padding:88px 0}
.sec-head{max-width:62ch;margin-bottom:56px}
.sec-head h2{font-size:clamp(28px,3.4vw,40px);color:var(--ink)}
.sec-head p{color:var(--muted);margin-top:16px}
body.ohu-audit .sec-head,body.ohu-about .sec-head{margin-bottom:52px}
body.ohu-audit .sec-head h2,body.ohu-about .sec-head h2{font-size:clamp(27px,3.2vw,38px)}
body.ohu-audit .sec-head p{margin-top:14px}
/* HERO — dark base shared; padding scoped per page */
.hero{background:var(--ink);color:var(--text-on-dark);padding:100px 0 90px}
body.ohu-home .hero{padding:110px 0 0}
body.ohu-insights .hero{padding:90px 0 80px}
body.ohu-privacy .hero{padding:76px 0 64px}
.hero h1 em{font-style:italic;color:var(--copper-lt)}
.hero .lede{font-size:19px;color:var(--muted-on-dark)}
.hero .lede strong{color:var(--text-on-dark);font-weight:500}
.hero .btn-ghost{border-color:var(--line-dark);color:var(--text-on-dark)}
/* FINAL CTA — bone/centred base (home, about); dark variant scoped */
.final{background:var(--bone);text-align:center;scroll-margin-top:80px}
.final h2{font-size:clamp(28px,3.6vw,42px);color:var(--ink);max-width:20ch;margin:0 auto}
.final p{color:var(--muted);margin:20px auto 34px;max-width:52ch}
.final .alt-line{margin-top:22px;font-size:14.5px}
.final .alt-line a{color:var(--copper-txt);font-weight:500}
body.ohu-audit .final .alt-line a,body.ohu-insights .final .alt-line a,body.ohu-article .final .alt-line a{color:var(--copper-lt)}
.final .cta-row,.final .wp-block-buttons{justify-content:center}
body.ohu-audit .final,body.ohu-insights .final,body.ohu-article .final{background:var(--ink)}
body.ohu-audit .final h2{color:var(--text-on-dark);max-width:22ch}
body.ohu-article .final h2{color:var(--text-on-dark)}
body.ohu-insights .final h2{color:var(--text-on-dark);font-size:clamp(26px,3.4vw,38px);max-width:24ch}
body.ohu-audit .final p,body.ohu-article .final p{color:var(--muted-on-dark)}
body.ohu-insights .final p{color:var(--muted-on-dark);margin:18px auto 32px}
.final .btn-ghost{border-color:var(--line-dark);color:var(--text-on-dark)}

/* ---------- 3b. GENERIC SECTION LIBRARY (block patterns + block styles) ----------
   Page-agnostic building blocks for the editor. is-style-* classes are the
   registered block styles (Styles panel); the plain classes are the same
   look applied via patterns. */
.section-dark,.is-style-section-dark{background:var(--ink);color:var(--text-on-dark)}
.section-dark .sec-head h2,.is-style-section-dark .sec-head h2,.section-dark h2,.is-style-section-dark h2{color:var(--text-on-dark)}
.section-dark .sec-head p,.is-style-section-dark .sec-head p{color:var(--muted-on-dark)}
.section-dark p,.is-style-section-dark p{color:var(--muted-on-dark)}
.section-paper,.is-style-section-paper{background:var(--paper);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.split-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:64px;align-items:center}
.split-figure{border:1px solid var(--line);border-radius:6px;overflow:hidden;background:var(--paper);margin:0}
.split-figure img{width:100%;height:auto;display:block}
.section-dark .split-figure,.is-style-section-dark .split-figure{background:var(--ink2);border-color:var(--line-dark)}
.stats-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line)}
.stat{background:var(--paper);padding:34px 30px}
.stat .stat-n{font-family:'Fraunces',serif;font-size:44px;font-weight:600;color:var(--ink);line-height:1;display:block}
.stat p{font-size:14.5px;color:var(--muted);margin-top:10px}
.wp-block-button.is-style-ghost .wp-block-button__link{background:transparent;border:1px solid var(--line-dark);color:var(--text-on-dark)}
.wp-block-button.is-style-ghost:hover .wp-block-button__link{background:var(--ink2);border-color:var(--muted-on-dark)}

/* ---------- 4a. HOME (ohu-home) ---------- */
body.ohu-home .hero h1{font-size:clamp(38px,5.2vw,60px);max-width:15ch}
body.ohu-home .hero .lede{max-width:56ch;margin:26px 0 36px}
.pipe{margin-top:76px;padding-bottom:0}
.pipe svg{display:block;width:100%;height:auto}
.pipe-caption{max-width:var(--max);margin:0 auto;padding:14px 28px 34px;font-size:13px;color:var(--muted-on-dark);letter-spacing:.04em}
.leaks{background:var(--paper);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.leak-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line)}
.leak{background:var(--paper);padding:34px 30px}
.leak svg{display:block;margin-bottom:20px}
.leak h3{font-size:19px;margin-bottom:10px;color:var(--ink)}
.leak p{font-size:15px;color:var(--muted)}
.breadth{background:var(--bone)}
.breadth-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:44px}
.breadth-col h3{font-size:20px;color:var(--ink);padding-bottom:14px;border-bottom:2px solid var(--copper);margin-bottom:18px;display:flex;align-items:center;gap:10px}
.breadth-col ul{list-style:none}
.breadth-col li{font-size:15px;color:var(--text);padding:9px 0 9px 20px;border-bottom:1px solid var(--line);position:relative}
.breadth-col li::before{content:"";position:absolute;left:2px;top:18px;width:7px;height:7px;border:1.5px solid var(--copper);border-radius:50%}
.breadth-note{margin-top:44px;font-size:15px;color:var(--muted);max-width:66ch}
.breadth-note a{color:var(--copper-txt);font-weight:500}
.offer{background:var(--ink);color:var(--text-on-dark)}
.offer-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:64px;align-items:center}
.offer h2{font-size:clamp(28px,3.4vw,40px)}
.offer p{color:var(--muted-on-dark);margin-top:18px}
.offer p strong{color:var(--text-on-dark);font-weight:500}
.offer-facts{list-style:none;margin-top:26px;border-top:1px solid var(--line-dark)}
.offer-facts li{display:flex;justify-content:space-between;gap:20px;padding:13px 0;border-bottom:1px solid var(--line-dark);font-size:15px}
.offer-facts li span:first-child{color:var(--muted-on-dark)}
.offer-facts li span:last-child{color:var(--text-on-dark);font-weight:500;text-align:right}
.offer .cta-row{margin-top:34px}
.offer-diagram{background:var(--ink2);border:1px solid var(--line-dark);border-radius:6px;padding:30px}
.offer-diagram svg{width:100%;height:auto;display:block}
/* PROOF quote — paper base (home); dark variant scoped to About below */
.proof{background:var(--paper);border-top:1px solid var(--line)}
.quote{max-width:820px;margin:0 auto;text-align:center}
.quote blockquote{font-family:'Fraunces',serif;font-size:clamp(22px,2.8vw,30px);font-weight:500;line-height:1.35;color:var(--ink)}
.quote cite{display:block;margin-top:22px;font-style:normal;font-size:14.5px;color:var(--muted)}
.quote cite strong{color:var(--text);font-weight:600}
.logos-note{margin:54px auto 0;text-align:center;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.logos{display:flex;justify-content:center;gap:40px;flex-wrap:wrap;margin-top:54px;font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.logos-note+.logos{margin-top:22px}

/* ---------- 4b. AUDIT (ohu-audit) ---------- */
body.ohu-audit .hero h1{font-size:clamp(36px,4.8vw,56px);max-width:17ch}
body.ohu-audit .hero .lede{max-width:58ch;margin:24px 0 34px}
body.ohu-audit .btn-ghost{background:transparent;border:1px solid var(--line);color:var(--text)}
body.ohu-audit .btn-ghost:hover{border-color:var(--muted)}
body.ohu-audit .hero .btn-ghost,body.ohu-audit .final .btn-ghost{border-color:var(--line-dark);color:var(--text-on-dark)}
.fit{background:var(--paper);border-bottom:1px solid var(--line)}
.fit-grid{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);border:1px solid var(--line)}
.fit-col{background:var(--paper);padding:36px 34px}
.fit-col h3{font-size:19px;margin-bottom:18px;color:var(--ink)}
.fit-col ul{list-style:none}
.fit-col li{font-size:15.5px;padding:9px 0 9px 26px;position:relative;color:var(--text)}
.fit-col.yes li::before{content:"";position:absolute;left:0;top:15px;width:12px;height:7px;border-left:2px solid var(--copper);border-bottom:2px solid var(--copper);transform:rotate(-45deg)}
.fit-col.no li{color:var(--muted)}
.fit-col.no li::before{content:"—";position:absolute;left:0;color:var(--muted)}
.lenses{background:var(--bone)}
.lens-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line)}
.lens{background:var(--bone);padding:30px 28px}
.lens .n{font-family:'Fraunces',serif;font-size:15px;color:var(--copper-txt);letter-spacing:.06em;display:block;margin-bottom:12px}
.lens h3{font-size:17.5px;color:var(--ink);margin-bottom:8px}
.lens p{font-size:14.5px;color:var(--muted)}
.process{background:var(--ink);color:var(--text-on-dark)}
.process .sec-head h2{color:var(--text-on-dark)}
.process .sec-head p{color:var(--muted-on-dark)}
.process .tl{list-style:none;border-left:1.5px solid var(--line-dark);margin-left:8px}
.process .tl li{padding:0 0 34px 34px;position:relative;max-width:64ch}
.process .tl li:last-child{padding-bottom:0}
.process .tl li::before{content:"";position:absolute;left:-8px;top:4px;width:13px;height:13px;border-radius:50%;background:var(--ink);border:1.5px solid var(--copper-lt)}
.process .tl li:last-child::before{background:var(--copper);border-color:var(--copper)}
.tl .wk{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--copper-lt);display:block;margin-bottom:5px}
.process .tl strong{color:var(--text-on-dark);font-weight:600;display:block;margin-bottom:4px;font-size:16.5px}
.process .tl p{font-size:15px;color:var(--muted-on-dark)}
.deliver{background:var(--paper);border-top:1px solid var(--line)}
.deliver-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:64px;align-items:start}
.dl{list-style:none}
.dl li{padding:16px 0;border-bottom:1px solid var(--line);font-size:15.5px}
.dl li strong{display:block;color:var(--ink);font-weight:600;margin-bottom:3px}
.dl li span{color:var(--muted);font-size:14.5px}
.price-card{background:var(--ink);color:var(--text-on-dark);border-radius:6px;padding:38px 36px;position:sticky;top:96px}
.price-card .eyebrow{color:var(--copper-lt)}
.price{font-family:'Fraunces',serif;font-size:46px;font-weight:600;line-height:1}
.price small{font-size:16px;font-family:'Inter',sans-serif;font-weight:500;color:var(--muted-on-dark)}
.price-card p{font-size:14.5px;color:var(--muted-on-dark);margin:16px 0 24px}
.price-card .btn{width:100%;text-align:center}
.price-card .alt{display:block;text-align:center;margin-top:14px;font-size:14px;color:var(--muted-on-dark)}
.price-card .alt a{color:var(--copper-lt);font-weight:500}
.faq{background:var(--bone)}
.faq details{border-bottom:1px solid var(--line);padding:4px 0}
.faq summary{cursor:pointer;font-weight:600;font-size:16.5px;color:var(--ink);padding:18px 0;list-style:none;display:flex;justify-content:space-between;gap:16px}
.faq summary::after{content:"+";color:var(--copper);font-size:22px;font-weight:400;flex-shrink:0}
.faq details[open] summary::after{content:"–"}
.faq details p{padding:0 0 20px;color:var(--muted);font-size:15.5px;max-width:70ch}

/* ---------- 4c. ABOUT (ohu-about) ---------- */
body.ohu-about{line-height:1.7}
body.ohu-about .hero h1{font-size:clamp(34px,4.6vw,52px);max-width:16ch}
body.ohu-about .hero .lede{max-width:52ch;margin-top:24px}
.hero-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:64px;align-items:center}
.portrait{aspect-ratio:4/5;background:var(--ink2);border:1px solid var(--line-dark);border-radius:6px;display:flex;align-items:center;justify-content:center;text-align:center;color:var(--muted-on-dark);font-size:12px;letter-spacing:.12em;line-height:2}
.portrait img{width:100%;height:100%;object-fit:cover;border-radius:6px;display:block}
.story{background:var(--paper);border-bottom:1px solid var(--line);padding:96px 0}
.story-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:72px;align-items:start}
.story-copy h2{font-size:clamp(26px,3vw,36px);color:var(--ink);margin-bottom:26px}
.story-copy p{margin-bottom:22px;max-width:62ch}
.story-copy p strong{color:var(--ink);font-weight:600}
.glance{position:sticky;top:96px;background:var(--bone);border:1px solid var(--line);border-radius:6px;padding:34px 32px}
.glance h3{font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--copper-txt);font-family:'Inter',sans-serif;font-weight:600;margin-bottom:20px}
.glance ul{list-style:none}
.glance li{display:flex;justify-content:space-between;gap:16px;padding:11px 0;border-bottom:1px solid var(--line);font-size:14.5px}
.glance li:last-child{border-bottom:none}
.glance li span:first-child{color:var(--muted)}
.glance li span:last-child{color:var(--ink);font-weight:500;text-align:right}
.career{background:var(--bone);padding:96px 0}
body.ohu-about .tl{list-style:none;border-left:1.5px solid var(--line);margin-left:8px}
body.ohu-about .tl li{padding:0 0 36px 34px;position:relative;max-width:68ch}
body.ohu-about .tl li:last-child{padding-bottom:0}
body.ohu-about .tl li::before{content:"";position:absolute;left:-8px;top:5px;width:13px;height:13px;border-radius:50%;background:var(--bone);border:1.5px solid var(--copper)}
.tl .co{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--copper-txt);display:block;margin-bottom:5px}
body.ohu-about .tl strong{color:var(--ink);font-weight:600;display:block;font-size:17px;margin-bottom:4px}
body.ohu-about .tl p{font-size:15px;color:var(--muted)}
body.ohu-about .proof{background:var(--ink);color:var(--text-on-dark);padding:96px 0;border-top:none}
body.ohu-about .quote blockquote{color:var(--text-on-dark)}
body.ohu-about .quote cite{color:var(--muted-on-dark)}
body.ohu-about .quote cite strong{color:var(--text-on-dark)}
body.ohu-about .final{background:var(--bone)}

/* ---------- 4d. INSIGHTS (ohu-insights) ---------- */
body.ohu-insights .hero h1{font-size:clamp(34px,4.6vw,52px)}
body.ohu-insights .hero .lede{max-width:56ch;margin-top:22px}
body.ohu-insights .sec-head{display:flex;justify-content:space-between;align-items:baseline;gap:24px;flex-wrap:wrap;margin-bottom:44px;max-width:none}
body.ohu-insights .sec-head h2{font-size:clamp(25px,3vw,34px)}
.sec-head .note{font-size:14px;color:var(--muted)}
.articles{background:var(--paper);border-bottom:1px solid var(--line)}
.art-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
.art-card{background:var(--bone);border:1px solid var(--line);border-radius:6px;padding:30px 28px;display:flex;flex-direction:column;text-decoration:none;transition:border-color .15s}
.art-card:hover{border-color:var(--copper)}
.art-card .cat{font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--copper);font-weight:600;margin-bottom:14px}
.art-card h3{font-size:19px;color:var(--ink);margin-bottom:12px}
.art-card p{font-size:14.5px;color:var(--muted);flex-grow:1}
.art-card .meta{font-size:13px;color:var(--muted);margin-top:20px;padding-top:16px;border-top:1px solid var(--line)}
.art-card .wp-block-post-excerpt__more-link{display:none}
.art-card .wp-block-post-title a{color:inherit;text-decoration:none}
.art-card .eyebrow a{color:var(--copper-txt);text-decoration:none}
.wp-block-query-pagination{margin-top:48px;display:flex;gap:14px;font-size:14.5px}
.wp-block-query-pagination a{color:var(--copper-txt);text-decoration:none}
.li{background:var(--bone)}
.li-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:28px}
.li-card{background:var(--paper);border:1px solid var(--line);border-radius:6px;padding:28px;text-decoration:none;display:block;transition:border-color .15s}
.li-card:hover{border-color:var(--copper)}
.li-card .src{display:flex;align-items:center;gap:10px;margin-bottom:16px;font-size:13px;color:var(--muted)}
.li-card .src .dot{width:8px;height:8px;border-radius:50%;background:var(--copper)}
.li-card p{font-size:15.5px;color:var(--text);line-height:1.6}
.li-card .read{display:inline-block;margin-top:18px;font-size:14px;font-weight:600;color:var(--copper-txt)}

/* ---------- 4e. BOOK (ohu-book) ---------- */
.book{background:var(--ink);color:var(--text-on-dark);padding:96px 0}
.book-grid{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:start}
.book h1{font-size:clamp(32px,4.4vw,48px);max-width:14ch}
.book .lede{font-size:18px;color:var(--muted-on-dark);margin:22px 0 30px;max-width:46ch}
.expect{list-style:none}
.expect li{padding:14px 0 14px 30px;border-bottom:1px solid var(--line-dark);font-size:15px;color:var(--muted-on-dark);position:relative}
.expect li::before{content:"";position:absolute;left:2px;top:23px;width:8px;height:8px;border:1.5px solid var(--copper-lt);border-radius:50%}
.expect li strong{display:block;color:var(--text-on-dark);font-weight:600;margin-bottom:2px;font-size:15.5px}
.avail-note{margin-top:24px;font-size:13.5px;color:var(--muted-on-dark);border-left:2px solid var(--copper);padding-left:14px}
.scheduler{background:var(--ink2);border:1px solid var(--line-dark);border-radius:6px;min-height:560px;display:flex;align-items:center;justify-content:center;text-align:center}
.scheduler .ph{color:var(--muted-on-dark);font-size:12px;letter-spacing:.14em;line-height:2.2}
.enquire{background:var(--paper);padding:96px 0;border-bottom:1px solid var(--line)}
.enq-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:64px;align-items:start}
.enquire h2{font-size:clamp(26px,3.2vw,38px);color:var(--ink);max-width:16ch}
.enquire .lede{color:var(--muted);margin-top:18px;max-width:44ch}
.enquire .lede strong{color:var(--text);font-weight:600}
.enq-alt{margin-top:26px;font-size:14.5px;color:var(--muted)}
.enq-alt a{color:var(--copper-txt);font-weight:500}
/* form styles = the design spec the HubSpot form gets themed to */
.form-card{background:var(--bone);border:1px solid var(--line);border-radius:6px;padding:38px 36px}
.form-note{font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-bottom:24px}
.field{margin-bottom:20px}
.field label{display:block;font-size:13.5px;font-weight:600;color:var(--ink);margin-bottom:7px}
/* v1.6.4: form-control boundaries need >=3:1 (WCAG 1.4.11) — --line is 1.2:1 on the card */
.field input,.field select,.field textarea{width:100%;padding:12px 14px;border:1px solid var(--line-strong);border-radius:4px;background:var(--paper);font-family:'Inter',sans-serif;font-size:15px;color:var(--text)}
.field input:focus,.field select:focus,.field textarea:focus{outline:2px solid var(--copper);outline-offset:1px;border-color:var(--copper)}
.field textarea{min-height:120px;resize:vertical}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.consent{display:flex;gap:10px;align-items:flex-start;font-size:13px;color:var(--muted);margin:22px 0}
.consent input{margin-top:3px}
.consent a{color:var(--copper-txt)}
.reply-line{font-size:13.5px;color:var(--muted);margin-top:16px}

/* ---------- 4f. PRIVACY (ohu-privacy) ---------- */
body.ohu-privacy{font-size:16.5px;line-height:1.7}
body.ohu-privacy h1,body.ohu-privacy h2{line-height:1.15}
body.ohu-privacy .hero h1{font-size:clamp(30px,4vw,44px)}
body.ohu-privacy .hero p{color:var(--muted-on-dark);margin-top:14px;font-size:15px}
.policy{background:var(--paper);padding:80px 0;border-bottom:1px solid var(--line)}
.policy-inner{max-width:760px}
.policy h2{font-size:22px;color:var(--ink);margin:44px 0 14px}
.policy h2:first-child{margin-top:0}
.policy p,.policy li{color:var(--text);margin-bottom:14px}
.policy ul{padding-left:22px;margin-bottom:14px}
.policy a{color:var(--copper-txt)}
.callout{background:var(--bone);border-left:3px solid var(--copper);padding:16px 20px;font-size:14.5px;color:var(--muted);margin-bottom:32px;border-radius:0 4px 4px 0}

/* ---------- 4g. ARTICLES — single, archive, search, 404 ---------- */
.art-hero{background:var(--ink);color:var(--text-on-dark);padding:96px 0 64px}
.art-hero-inner{max-width:760px}
.art-hero .art-cat,.art-hero .art-cat a{color:var(--copper-lt);text-decoration:none;font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase}
.art-hero h1{font-size:clamp(32px,4.4vw,50px);color:var(--text-on-dark);max-width:22ch;margin-top:14px}
.art-hero .art-date{font-size:13.5px;color:var(--muted-on-dark);margin-top:20px}
.art-body{max-width:760px;padding-top:64px;padding-bottom:8px}
.art-body>p{margin-bottom:1.45em;font-size:17.5px}
.art-body h2{font-size:30px;margin:1.9em 0 .7em;color:var(--ink)}
.art-body h3{font-size:22px;margin:1.6em 0 .6em;color:var(--ink)}
.art-body ul,.art-body ol{margin:0 0 1.45em 1.25em}
.art-body li{margin-bottom:.55em}
.art-body a{color:var(--copper-txt)}
.art-body blockquote{border-left:3px solid var(--copper);padding:2px 0 2px 22px;margin:1.8em 0;color:var(--muted);font-style:italic;font-size:18px}
.art-body figure{margin:2em 0}
.art-body .art-featured{margin:0 0 40px}
.art-body .art-featured img{display:block;width:100%;aspect-ratio:16/9;height:auto;object-fit:cover;object-position:center;border:1px solid var(--line);border-radius:6px}
.art-cta{margin-top:72px}
.hero-slim{background:var(--ink);color:var(--text-on-dark);padding:78px 0}
.hero-slim h1,.hero-slim .wp-block-query-title{font-family:'Fraunces',Georgia,serif;font-size:clamp(28px,3.6vw,42px);color:var(--text-on-dark);font-weight:600}

/* COOKIE CONSENT — global site chrome, injected via wp_footer (functions.php),
   NOT a page block. Global (unscoped) like .site-head/.site-foot. Bottom bar on
   ink to match header/footer. Accept reuses .btn (copper) as the visual anchor;
   Decline/Save reuse .btn-ghost at the SAME size — UK GDPR/PECR equal prominence,
   deliberately not a demoted text link. assets/js/consent.js sets a first-party
   ohu_consent cookie and gates any consent-tagged analytics script. */
.ohu-cookie{position:fixed;left:0;right:0;bottom:0;z-index:60;background:var(--ink);border-top:1px solid var(--line-dark);box-shadow:0 -10px 30px rgba(0,0,0,.18);max-height:100vh;max-height:100dvh;overflow-y:auto}
.ohu-cookie[hidden]{display:none}
.ohu-cookie__inner{max-width:var(--max);margin:0 auto;padding:18px 24px;display:flex;align-items:center;gap:24px;flex-wrap:wrap}
.ohu-cookie__copy{flex:1;min-width:260px}
.ohu-cookie__title{color:var(--text-on-dark);font-size:14.5px;font-weight:600;margin:0 0 3px}
.ohu-cookie__text{color:var(--muted-on-dark);font-size:13px;line-height:1.55;margin:0}
.ohu-cookie__text a{color:var(--copper-lt);text-decoration:underline;text-underline-offset:2px}
.ohu-cookie__actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.ohu-cookie__link{background:none;border:none;color:var(--muted-on-dark);font-size:13px;text-decoration:underline;text-underline-offset:2px;cursor:pointer;font-family:'Inter',sans-serif;padding:6px 4px}
.ohu-cookie__link:hover{color:var(--text-on-dark)}
.ohu-cookie .btn,.ohu-cookie button.btn{font-size:14px;padding:11px 22px;white-space:nowrap}
/* Ghost on <button>: out-specify `button.btn` (0,1,1) which the anchor-based
   .btn-ghost (0,1,0) can't beat — Decline/Save must read as outline, not copper. */
.ohu-cookie button.btn-ghost{background:transparent;border:1px solid var(--line-dark);color:var(--text-on-dark)}
.ohu-cookie button.btn-ghost:hover{background:var(--ink2);border-color:var(--muted-on-dark)}
.ohu-cookie__panel{max-width:var(--max);margin:0 auto;padding:2px 24px 4px}
.ohu-cookie__panel[hidden]{display:none}
.ohu-cat{display:flex;align-items:flex-start;gap:14px;padding:14px 0;border-bottom:1px solid var(--line-dark)}
.ohu-cat:last-child{border-bottom:none}
.ohu-cat__body{flex:1;min-width:220px}
.ohu-cat__name{color:var(--text-on-dark);font-size:13.5px;font-weight:600;margin:0 0 2px}
.ohu-cat__desc{color:var(--muted-on-dark);font-size:12.5px;line-height:1.5;margin:0}
.ohu-cat__state{color:var(--muted-on-dark);font-size:12px;white-space:nowrap;padding-top:2px}
.ohu-switch{position:relative;width:42px;height:24px;flex:0 0 auto}
.ohu-switch input{position:absolute;opacity:0;width:100%;height:100%;margin:0;cursor:pointer}
.ohu-switch .ohu-track{position:absolute;inset:0;background:var(--line-strong-dark);border-radius:24px;transition:background .2s;pointer-events:none}
.ohu-switch .ohu-track::before{content:"";position:absolute;height:18px;width:18px;left:3px;top:3px;background:var(--text-on-dark);border-radius:50%;transition:transform .2s}
.ohu-switch input:checked+.ohu-track{background:var(--copper)}
.ohu-switch input:checked+.ohu-track::before{transform:translateX(18px)}
.ohu-switch input:disabled{cursor:default}
.ohu-switch input:disabled+.ohu-track{opacity:.55}
/* v1.6.3: visible keyboard focus on the custom switch track (the real input is
   opacity:0, so the default UA ring is invisible without this). */
.ohu-switch input:focus-visible+.ohu-track{outline:2px solid var(--copper-lt);outline-offset:3px}
/* Footer "Cookie settings" re-entry control — injected by consent.js into
   .foot-links, styled to sit flush with the footer's text links. */
.foot-links .ohu-foot-consent{background:none;border:0;padding:0;color:var(--muted-on-dark);font-size:14px;font-family:'Inter',sans-serif;cursor:pointer;line-height:inherit}
.foot-links .ohu-foot-consent:hover{color:var(--text-on-dark)}

/* ---------- RESPONSIVE ---------- */
@media(max-width:920px){
  .nav-toggle{display:inline-flex}
  .nav-inner{flex-wrap:wrap}
  .nav-right{margin-left:auto}
  /* v1.5.1: `.site-head` prefix raises these to beat WP's layout base rule on the same
     <nav>. Confirmed live on ohuruogu.com: WP emits `body .is-layout-flex{display:flex}`
     at specificity (0,1,1), which OUT-SPECIFIES a bare `.nav-links{display:none}` (0,1,0).
     v1.5.2: element-qualified to `nav.nav-links`. The core Navigation block stamps the
     block's className onto BOTH the wrapper <nav> AND its inner <ul>
     (`<ul class="wp-block-navigation__container nav-links …">`) — confirmed in the live
     DOM. A bare `.nav-links` hide therefore also hid the <ul>, and since nav.js only adds
     `.open` to the <nav>, the revealed panel contained an <ul> still stuck at display:none
     — i.e. the hamburger opened to an EMPTY menu. Scoping the hide to the element
     (`nav.nav-links`, an <ul> is never a <nav>) means only the wrapper toggles; the list
     inside follows its normal flow and shows when the panel opens. */
  .site-head nav.nav-links{display:none;flex-basis:100%;order:4;margin-left:0;padding:6px 0 4px}
  .site-head nav.nav-links.open{display:block}
  .nav-links .wp-block-navigation__container,.nav-links ul{flex-direction:column;align-items:stretch;gap:0!important}
  .nav-links li{width:100%}
  .nav-links a{display:block;padding:13px 0;font-size:16px;border-bottom:1px solid var(--line-dark)}
  .nav-links li:last-child a{border-bottom:0}
  section{padding:72px 0}
  body.ohu-audit section{padding:68px 0}
  body.ohu-insights section{padding:64px 0}
  .book,.enquire{padding:68px 0}
  .leak-grid,.breadth-grid,.fit-grid,.lens-grid,.art-grid,.li-grid,.field-row,.stats-grid{grid-template-columns:1fr}
  .offer-grid,.deliver-grid,.hero-grid,.story-grid,.book-grid,.enq-grid,.split-grid{grid-template-columns:1fr;gap:44px}
  .price-card,.glance{position:static}
  .ohu-cookie__inner{align-items:stretch;gap:14px}
  .ohu-cookie__actions{width:100%}
  .ohu-cookie__actions .btn{flex:1;text-align:center}
  .ohu-cookie__link{order:3;flex-basis:100%;text-align:center}
  /* v1.6.3: expanded category rows must never widen the document at 320px —
     let the row wrap and the text column shrink below its 220px preference. */
  .ohu-cat{flex-wrap:wrap}
  .ohu-cat__body{min-width:0;flex-basis:200px}
}