/* We C2 IT — C2 brand guidelines layer (handover 70, approved by Joe 27 Oct 2026).
   Linked last in every page's <head>, so it wins over the styles written into each page.
   Changes colours, fonts, font weights, the logo size and the header height only. No layout, no words.
   Selectors ending :not(#h70) carry an id-level weight on purpose: they must beat every page's own rules. */

:root{
  --gold-deep-metal:linear-gradient(135deg,#8F6E20 0%,#C9A347 55%,#A9862F 100%);
  --gold-dark:#8F6E20;--gold-icon:#B08D3C;--text-on-dark-72:rgba(226,232,240,.72);
  --site-header-height:96px
}

/* ============ A2. The three policy pages' first section sat close under the bar: add the 40px ============ */
.article-opener[data-theme="dark"]{padding-top:calc(clamp(100px,12vh,140px) + 40px)!important}

/* ============ A1–A3. Header logo: official files, 48px tall, 24px clear above and below, no fade ============ */
.nav-inner,.header-inner,.site-nav .nav-inner{height:96px}
.nav-logo,.header-logo,.site-nav .nav-logo{height:48px;width:auto}
.nav-logo:hover,.site-nav .nav-logo:hover,.header-logo:hover{opacity:1}

/* ============ C1. Reading text in General Sans; headings, names, figures and big statements in Satoshi ============ */
body{font-family:'General Sans',system-ui,-apple-system,sans-serif}
h1,h2,h3,h4,h5,h6,
.faq-q,.faq-q span,.t-name,.tf-quote,.stat-num,.lg-name,.lg-waste,.tk2-title,.wd-chip,.mk-amt,
.resource-card-title,.info-card-title,.group-inner>p.d2,.showcase-hero .subtitle,.faq-title,.tool-subheading,
blockquote{font-family:'Satoshi',system-ui,-apple-system,sans-serif}
/* quotes under 24px are reading text */
.svc-detail-inner blockquote,.prose blockquote{font-family:'General Sans',system-ui,-apple-system,sans-serif}
/* bold words inside reading text: General Sans Semibold */
:is(p,li,td,dd,figcaption,label,.tui-flag,.calc-onboarding-chip,.t-quote,.hc-formfoot) :is(strong,b):not(#h70){font-weight:600}
/* ...but inside Satoshi statements and headings they stay Satoshi Bold */
:is(h1,h2,h3,.tf-quote,.group-inner>p.d2,.showcase-hero .subtitle) :is(strong,b):not(#h70){font-weight:700}
.tf-quote strong{font-family:'Satoshi',system-ui,-apple-system,sans-serif}
/* new font can leave one word alone on a line */
h1,h2,.svc-opener-inner>p,.article-opener-inner>p,.calc-opener-inner>p,.contact-opener-inner>p,.insights-opener-inner>p{text-wrap:pretty}

/* ============ C2. Heading weights ============ */
/* every heading 20px and over: Satoshi Medium */
h1:not(#h70),h2:not(#h70),h3:not(#h70),
.info-card-title:not(#h70),blockquote:not(#h70){font-weight:500}
.prose blockquote p:not(#h70),.svc-detail-inner blockquote:not(#h70){font-weight:400}
/* Cormorant quotes keep Cormorant Italic Regular */
.contact-promise blockquote:not(#h70),.contact-promise-inner blockquote:not(#h70),.proof-line:not(#h70){font-weight:400}
/* small headings and titles, question titles and names: Satoshi Bold (what shows today) */
:is(.why-card,.included-col,.ladder-step,.pillar-card,.detail-card,.why-feature) h3:not(#h70),
.article-opener[data-theme="dark"]~.article-body .prose h3:not(#h70),
.faq-q:not(#h70),.faq-q span:not(#h70),.faq-q button:not(#h70),
.t-name:not(#h70),.lg-name:not(#h70),.lg-waste:not(#h70),.tk2-title:not(#h70),.resource-card-title:not(#h70),
.mk-amt small:not(#h70){font-weight:700}
.lg-waste i:not(#h70){font-weight:500}
/* big figures: Satoshi Regular */
.stat-num:not(#h70){font-weight:400}

/* ============ C3. General Sans weights: Regular (400) and Semibold (600) only ============ */
.nav-link:not(#h70),.nav-dropdown-menu a:not(#h70),.nav-phone:not(#h70),
.article-date:not(#h70),.card-date:not(#h70),
.hero-trust,.hero-trust .ht-item,.hero-trust .ht-stars,
.mk-bar,.tui-bar,.tk2-meta,.lg-legend span,.mk-foot span,.calc-onboarding-chip span,
.section-row td,.collapse-toggle td,.iw-prefix,.trig-link,.cc-decline,.t-quote strong,.proof-card p strong,
.form-group label,.tui-sum{font-weight:400}
/* Medium (500) cells, links and labels -> Regular; 700 -> Semibold */
tbody td:first-child:not(#h70),.grp-alt td:not(#h70),.rowspan-table tbody td:not(#h70),.cell-detail:not(#h70),.frontline-bar-label:not(#h70),
.collapse-toggle td:not(#h70),.trig-link:not(#h70),.input-prefix:not(#h70),.input-suffix:not(#h70),
.nf-links li a:not(#h70),.nf-links a:not(#h70){font-weight:400}
.section-row td:not(#h70){font-weight:600}
.req-row td:first-child:not(#h70),.bccmp-h:not(#h70){font-weight:600}
.btn-icon{font-family:'General Sans',system-ui,sans-serif}
.nav-link.cta:not(#h70),.cc-accept,.t-avatar,.featured-flag:not(#h70),.kicker:not(#h70),.feature-num,
.prose ol li::before,.tui-flag strong{font-weight:600}
.feature-caption:not(#h70),figcaption:not(#h70){font-style:normal}
.form-group.required label::after{font-weight:400}

/* ============ C4. Cormorant Italic Regular everywhere ============ */
.proof-line,.contact-promise-inner blockquote,.contact-promise blockquote,.cp-quote{font-weight:400}

/* ============ B1. Small gold words on light backgrounds -> Dark gold #8F6E20 ============ */
.card-arrow,.svc-insights .insight-card .card-arrow,.insight-card .card-arrow,
.article-back a,.article-back a span,
.article-category,.card-category,.svc-insights .insight-card .card-category,.insight-card .card-category,
.featured-flag,
.svc-opener .label,.svc-depth-header .label,.svc-detail-header .label,.svc-process-header .label,
.svc-insights-header .label,.faq-header .label,.svc-pillars-header .label,.svc-included-header .label,
.svc-practice-header .label,.calc-head .label,.calc-embed .calc-head .label,.section-header .label,
.opener .label,.opener-inner .label,.group .label,.about-hero .label,.history-head .label,.wa-built-head .label,
.wa-principle .label,.svc-detail .label,.contact-opener .label,.calc-opener .label,.insights-opener .label,
.services-header .label,.why-left .label,.diff-intro .label,.wd-intro .label,.triggers-header .label,
.t-rating,.svcx-bar .t-rating,
.orbit-link,.orbit-link span,
.contact-opener .label a,
.info-item-label,
.history .tl-yr,.tl-yr,
.wd-kicker,.trig-tag,.showcase-closing .kicker,
.detail-link a,.detail-card .detail-link a,
.note-label,
.wd-chip.active span,.g-card.active .tag,
.prose ol li::before,
.form-group.required label::after{color:var(--gold-dark)}
.t-rating .rstars svg{fill:var(--gold-dark)}
.t-rating .arr{stroke:var(--gold-dark)}
/* mouse-over and selected states on light backgrounds */
.prose a:hover{color:var(--gold-dark);text-decoration-color:var(--gold-dark)}
nav.nav-light .nav-dropdown-menu a.active{color:var(--gold-dark)}
.faq-a a:hover,.detail-link a:hover,.info-item a:hover,.trig-link:hover,.next-link:hover,.tool-status a:hover{color:var(--gold-dark)}
/* the light version of the dark local section stays as it was */
.svcx-local .svc-depth-header .label{color:var(--gold)}

/* ============ B2. Gold icons, ticks and bullets on light backgrounds -> Icon gold #B08D3C ============ */
.prose ul li::before,.detail-card ul li::before{background:var(--gold-icon)}
.prose .checklist li::before,.ways-list li::before{border-color:var(--gold-icon)}
.trig-ico svg,.calc-onboarding-chip svg{stroke:var(--gold-icon)}
.bccmp-ey::before,.tk2-ey::before{background:var(--gold-icon)}

/* ============ B3. Gold italic phrase in headings on light backgrounds -> Deep metallic gold (as on the home page) ============ */
.svc-opener h1 em,.calc-opener h1 em,.contact-opener h1 em,.insights-opener h1 em,.about-hero h1 em,
.calc-embed .calc-head h2 em,.calc-head h2 em,.svc-depth-header h2 em,.result-intro h2 em,.wa-bcard h3 em,
.showcase-closing h2 em{
  font-family:'Cormorant',serif;font-style:italic;font-weight:400;
  background:var(--gold-deep-metal);-webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
  padding-right:.12em;margin-right:-.12em;padding-bottom:.08em
}
.depth-pull{
  background:var(--gold-deep-metal);-webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent
}
/* the dark local section keeps its own gold */
.svcx-local .svc-depth-header h2 em{background:linear-gradient(135deg,var(--gold) 0%,var(--gold-light) 50%,var(--gold) 100%);-webkit-background-clip:text;background-clip:text}

/* ============ B4. Accent blue on light backgrounds -> Secondary text #5A7186 ============ */
.field label,.field-optional,.step-note,.article-date,.card-date,.faq-more p,
.feature-caption,.prose figcaption,figure.shot figcaption,.prose thead th,.wa-built~.group .g-card:not(.active) .tag,
.tui-k,.tui-ph,.showcase-closing p{color:var(--text-secondary)}
.card-date:not(#h70),.article-date:not(#h70),figcaption:not(#h70),.tui-ph:not(#h70),.tui-k:not(#h70){color:var(--text-secondary)}
label span[style*="text-accent"],label[style*="text-accent"],span[style*="text-accent"]{color:var(--text-secondary)!important}
.article-body .article-body-inner .prose p[style*="text-accent"]{color:var(--text-secondary)!important}

/* ============ B5. Main text on light backgrounds -> Text on light #1B3F5C ============ */
.article-body .article-body-inner .prose p,
.article-body .article-body-inner .prose li,
.article-body .article-body-inner .prose td{color:var(--text-primary)!important}
.prose p,.prose li,.prose td{color:var(--text-primary)}
/* paragraphs of 16px and over in the main part of a section (not cards, boxes, captions or form hints) */
.faq-a p:not(#h70),.svc-depth-inner p:not(#h70),.article-opener-inner p.lead:not(#h70),
.svc-opener-body p:not(#h70),.svc-opener-inner>p:not(.label):not(#h70),.svcx-local-copy p:not(#h70),.svcx-2col p:not(#h70),
.calc-head p:not(.label):not(#h70),.calc-opener-inner p:not(.label):not(#h70),.contact-opener-inner p:not(.label):not(#h70),
.opener-inner p.intro:not(#h70),.insights-opener-inner p.intro:not(#h70),.section-header>p:not(#h70),
.feature-block-inner>p:not(.feature-caption):not(#h70),.showcase-intro-inner>p:not(#h70),.trig-row-r p:not(#h70),
.group-inner>p.d2:not(#h70),.svc-detail-body p:not(#h70),.svc-detail-inner>p.svcx-wide:not(#h70),
.contact-promise-inner>p:not(#h70),.wd-intro>p:not(.label):not(#h70),.wd-ftext>p:not(#h70),.wd-grouphead>p:not(#h70),
.sec-head-r:not(#h70),.about-hero-inner>p.subtitle:not(#h70),.history-head>p:not(.label):not(#h70),
.wa-built-head>p:not(.label):not(#h70),.wa-principle-inner>p:not(.label):not(#h70){color:var(--text-primary)}

/* ============ B6. Words on dark sections: Text on dark / Accent text ============ */
.hc-field label:not(#h70),.hc-formfoot:not(#h70),.t-role:not(#h70),.stat-lbl:not(#h70),.ln:not(#h70),.nf-links-h:not(#h70){color:var(--text-accent)}
.hc-intro:not(#h70),.pillar-card p:not(#h70),.proof-card p:not(#h70),.included-col li:not(#h70),.practice-card p:not(#h70),
.loc-hero-text p:not(#h70),.pkg-section--dark>p:not(#h70),.showcase-hero .subtitle:not(#h70){color:var(--text-on-dark-72)}

/* ============ B7. Colours that are not in the guidelines ============ */
.svc-opener a:not([class]),.svc-depth a:not([class]),.faq-a a:not([class]),.svcx-local-copy a:not([class]),
.showcase-intro-inner a:not([class]),.feature-block-inner a:not([class]){
  color:var(--navy-deep);text-decoration:underline;text-decoration-color:rgba(201,163,71,.4);text-underline-offset:3px}
.svcx-local p{color:rgba(226,232,240,.72)}
.svcx-note{color:rgba(226,232,240,.55)}
.svcx-local .faq-more p{color:rgba(226,232,240,.6)}
.svcx-local .wd-badge{color:rgba(226,232,240,.58)}
.hero-trust{color:rgba(226,232,240,.62)}
.tick{background:rgba(46,125,50,.1)}
.tick svg{stroke:#2E7D32}
.cross{background:rgba(90,113,134,.08)}
.cross svg{stroke:#5A7186}
@media(max-width:600px){.req-row td:first-child{background:rgba(201,163,71,.10)!important}}
.field-error,.freemail-warning{color:#B42318}
[style*="#c0392b"],[style*="#C0392B"]{color:#B42318!important}
.btn-submit:hover,.btn-next:hover{background:#0F1F2D}
footer,.footer{border-top-color:rgba(226,232,240,.12)}
.nav-dropdown-menu hr{border-top-color:rgba(226,232,240,.12)!important}
nav.nav-light .nav-dropdown-menu hr{border-top-color:rgba(27,63,92,.12)!important}
/* retired package column (staff price page): Secondary text grey, white words for 4.5:1 */
#managed-it thead th.pkg-retired{background:#5A7186;color:#fff}
.lg-bar .use{background:linear-gradient(180deg,#3E587B,#355170)}
.lg-legend .k.use{background:#355170}
.lg-bar .un{background:linear-gradient(180deg,#DAB161,#C9A347)}
.lg-bar .lv{background:linear-gradient(180deg,#B08D3C,#8F6E20)}
.tk2-ava{background:linear-gradient(135deg,#3E587B,#14283A)}
.tui-btn.gold{color:#14283A}
.bccmp-row,.mk{background:linear-gradient(180deg,#fff 0%,#F8FAFC 100%)}
/* locations map: labels in General Sans Semibold; region names in Accent text */
.loc-map svg text{font-family:'General Sans',system-ui,sans-serif;font-weight:600}
.loc-map svg text[font-size="7"]{fill:#7694B8}
/* the phone version of the map: region names in Accent text, place names Regular */
.mobile-locations .mob-region-title:not(#h70){color:#7694B8;opacity:1;font-weight:600}
.mobile-locations .mob-loc:not(#h70){font-weight:400}

/* ============ Fixes after Brandon's check of live (27 Oct 2026, Joe's go msgs 14814/14832 via Pepper HQ#12132) ============ */
/* 1. Location pages, dark "Local to…" / "Based in Farnsfield" / "The bigger picture": Text on dark at 72%
      (closing line 60%), small labels gold */
.svcx-local[data-theme="dark"] p:not(#h70){color:rgba(226,232,240,.72)}
.svcx-local[data-theme="dark"] .faq-more p:not(#h70){color:rgba(226,232,240,.6)}
.svcx-local[data-theme="dark"] .label:not(#h70){color:#C9A347}
/* 2. Dark testimonials: the line beside the heading stays white at 50% */
.testimonials .sec-head-r:not(#h70){color:rgba(255,255,255,.5)}
/* 3. Small gold labels on dark sections stay gold (B1 is for light backgrounds only) */
.svc-pillars .label:not(#h70),.svc-practice .label:not(#h70),.svc-included .label:not(#h70),
.ladder-step.hot .ln:not(#h70){color:#C9A347}
/* …and "Rated 5" in the home page's dark testimonials (its stars and arrow with it) */
.hero~.testimonials .t-rating:not(#h70){color:#C9A347}
.hero~.testimonials .t-rating .rstars svg{fill:#C9A347}
.hero~.testimonials .t-rating .arr{stroke:#C9A347}
/* 4. Small labels in the light depth sections: Dark gold */
.svc-depth[data-theme="light"] .svc-depth-header .label:not(#h70){color:#8F6E20}
/* 5. Home page group cards: all three tags Dark gold (the B4 grey above is now scoped to Who we are) */
/* 6. "AI." in the Meet Tora closing heading: Deep metallic gold (added to B3 above) */
/* 7. Tora screen picture labels: Secondary text */
.tui-pane .tui-ph:not(#h70){color:#5A7186}