/* ===== Cribbar Creative - shared header (full-width dark nav) + footer =====
   Loaded after each page's inline styles so it is authoritative. Brings every
   page in line with the homepage: full-width black bar, centred links, text
   dropdown, dark mobile menu.                                                */

.tb-email,.nav-links a,.nav-cta,.nav-tools{line-height:1.65}

/* ── Base nav bits ──────────────────────────────────────────────────── */
.logo{display:flex!important;align-items:center;gap:0}
.logo-img{display:block!important;height:38px;width:auto}
.nav-links{display:flex;align-items:center;gap:2px;list-style:none}
.nav-links a:not(.nav-cta){font-size:14px;font-weight:500;color:rgba(255,255,255,.72);padding:9px 15px;border-radius:50px;transition:color .2s,background .2s;position:relative}
.nav-links a:not(.nav-cta):hover{color:#fff;background:transparent}
.burger{display:none;flex-direction:column;gap:5px;background:none;border:none;cursor:pointer;padding:5px}
.burger span{display:block;width:23px;height:2px;border-radius:2px;background:#f3f4f6;transition:all .3s}
.burger.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger.open span:nth-child(2){opacity:0}
.burger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.mob-only{display:none}
nav.nav-hide{transform:translateY(-100%) !important}
/* Some pages (terms, privacy) carry an older inline "pill nav" applied to the
   <nav> element itself rather than .nav-in, with !important. header-footer.css
   only overrode .nav-in, so max-width/width/radius/left/transform leaked through
   and the pill survived. Neutralise them here so the shared bar wins everywhere.
   nav.nav-hide keeps working: its specificity (0,1,1) beats this rule (0,0,1). */
nav{max-width:none !important;width:auto !important;top:var(--top-h) !important;left:0 !important;right:0 !important;transform:none !important;border-radius:0 !important;border-left:0 !important;border-right:0 !important;border-top:0 !important}

/* ── Full-width nav (tablet + desktop) ──────────────────────────────── */
/* Desktop bar and mobile burger menu are mutually exclusive ranges. They used
   to overlap (641-1000px had both), which let the mobile full-width CTA leak
   onto the desktop bar at boundary widths and cover the nav links. */
@media(min-width:1001px){
  nav{position:fixed !important;top:var(--top-h);left:0;right:0;height:var(--nav-h) !important;z-index:200;display:flex;align-items:center;background:rgba(14,15,17,.82) !important;backdrop-filter:blur(18px) saturate(150%) !important;-webkit-backdrop-filter:blur(18px) saturate(150%) !important;border-bottom:1px solid rgba(255,255,255,.09) !important;box-shadow:none !important;padding:0 !important;transition:top .35s cubic-bezier(.4,0,.2,1),background .3s,transform .35s cubic-bezier(.4,0,.2,1) !important}
  nav.stuck{top:0 !important;background:rgba(14,15,17,.94) !important}
  .nav-in{position:relative !important;height:var(--nav-h) !important;max-width:none !important;width:100% !important;margin:0 !important;padding:0 40px !important;display:flex;align-items:center;justify-content:center !important;background:none !important;backdrop-filter:none !important;-webkit-backdrop-filter:none !important;border:none !important;border-radius:0 !important;box-shadow:none !important;transition:none !important}
  nav.stuck .nav-in{background:none !important;box-shadow:none !important;border:none !important}
  .nav-in>a.logo{position:absolute !important;left:40px !important;top:50% !important;transform:translateY(-50%) !important}
  .nav-links{width:auto !important;gap:2px !important;justify-content:center !important}
  .nav-links a:not(.nav-cta){font-size:14px !important;font-weight:500 !important;color:rgba(255,255,255,.72) !important;padding:9px 15px !important;border-radius:50px !important;transition:color .2s,background .2s}
  .nav-links a:not(.nav-cta)::after{display:none !important}
  .nav-links a:not(.nav-cta):hover{color:#fff !important;background:transparent !important}
  .nav-links a.active-link:not(.nav-cta){color:#fff !important}
  .nav-links li:has(.nav-cta){position:absolute !important;right:40px !important;top:50% !important;transform:translateY(-50%) !important;margin:0 !important}
  .nav-links li:has(.nav-tools){position:absolute !important;right:190px !important;top:50% !important;transform:translateY(-50%) !important;margin:0 !important}
  .nav-cta{background:var(--lime-dk) !important;background-image:none !important;color:var(--navy) !important;font-weight:700 !important;font-size:13px !important;padding:10px 21px !important;border-radius:50px !important;margin-left:0 !important;white-space:nowrap;transition:background .25s,box-shadow .25s,transform .2s !important}
  .nav-cta:hover{background:var(--lime) !important;box-shadow:0 8px 22px rgba(158,255,62,.35) !important;transform:translateY(-1px) !important}
}
.nav-links a.nav-tools{border:1.5px solid rgba(13,185,129,.55)!important;color:#0db981!important;border-radius:100px!important;padding:9px 15px!important;font-weight:700!important;white-space:nowrap!important;transition:background .2s,border-color .2s,color .2s!important}
.nav-links a.nav-tools:hover{background:rgba(13,185,129,.12)!important;border-color:#0db981!important;color:#0db981!important}
.nav-links a.nav-tools,.nav-links .nav-cta{display:inline-flex;align-items:center;gap:7px}
.nav-links a.nav-tools i,.nav-links .nav-cta i{font-size:15px}

/* ── Services dropdown - clean text + icon list ─────────────────────── */
.mega-parent{position:relative}
.mega-trigger{display:inline-flex !important;align-items:center;gap:4px}
.nav-chevron{font-size:12px;transition:transform .22s var(--ease);margin-top:1px}
.mega-parent:hover .nav-chevron{transform:rotate(180deg)}
.mega-menu{position:absolute;top:calc(100% + 14px);left:50%;transform:translateX(-50%) translateY(-8px);background:var(--bg);border:1.5px solid rgba(255,255,255,.1);border-radius:16px;padding:7px;min-width:216px;opacity:0;visibility:hidden;transition:opacity .2s var(--ease),transform .2s var(--ease),visibility 0s .2s;box-shadow:0 24px 64px rgba(0,0,0,.45),0 0 0 1px rgba(255,255,255,.03);z-index:300}
.mega-menu::before{content:'';position:absolute;top:-5px;left:50%;margin-left:-4px;width:9px;height:9px;background:var(--bg);border:1.5px solid rgba(255,255,255,.1);border-right:none;border-bottom:none;transform:rotate(45deg)}
.mega-parent:hover .mega-menu{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0);transition:opacity .2s var(--ease),transform .2s var(--ease),visibility 0s 0s}
.mega-item{display:flex;align-items:center;gap:11px;padding:9px 13px;border-radius:9px;text-decoration:none;color:var(--text2);font-size:14px;font-weight:500;white-space:nowrap;transition:background .15s,color .15s}
.mega-item:hover{background:var(--bg2);color:#fff;transform:none}
.mega-ico, .mega-item > i{width:auto !important;height:auto !important;min-width:19px !important;border-radius:0 !important;background:none !important;border:none !important;font-size:17px !important;color:var(--teal) !important;flex-shrink:0;text-align:center;transition:transform .15s}
.mega-item:hover > i{transform:scale(1.08)}
.mega-item:hover .mega-ico{background:none !important;transform:scale(1.08)}
.mega-item-text{display:block}
.mega-item-text strong{display:inline !important;font-size:14px !important;font-weight:500 !important;font-family:inherit !important;color:inherit !important;margin:0 !important;line-height:1.3 !important}
.mega-item-text span{display:none !important}
.mega-sep{height:1px;background:var(--line);margin:6px 8px}
.mega-footer{display:block;padding:0}
.mega-footer a{font-size:14px;font-weight:600;color:var(--teal);display:flex;align-items:center;gap:6px;padding:9px 13px;border-radius:9px;text-decoration:none;transition:background .15s}
.mega-footer a:hover{background:var(--bg2)}

/* ── Mobile nav (<=1000px) - dark full-screen menu ──────────────────── */
@media(max-width:1000px){
  .top-bar{display:none !important}
  nav,nav.stuck{top:0 !important;height:var(--nav-h);background:#0e0f11 !important;backdrop-filter:none !important;-webkit-backdrop-filter:none !important;border-bottom:1px solid rgba(255,255,255,.08) !important;box-shadow:none !important}
  .nav-in{position:relative !important;height:var(--nav-h);max-width:none !important;width:100% !important;margin:0 !important;padding:0 18px !important;display:flex !important;align-items:center;justify-content:space-between !important;background:none !important;border:none !important;border-radius:0 !important;box-shadow:none !important}
  .nav-in>a.logo{position:static !important;transform:none !important}
  .burger{display:flex !important;order:3}
  .burger span{background:#f3f4f6 !important}
  .desk-only{display:none !important}
  .mob-only{display:flex !important}
  .mob-group-label{font-size:11px !important;font-weight:700 !important;letter-spacing:.1em;text-transform:uppercase;color:var(--text3) !important;pointer-events:none;padding:0 !important;margin-top:8px !important}
  .nav-links{position:fixed !important;inset:var(--nav-h) 0 0 0 !important;max-width:none !important;width:auto !important;margin:0 !important;background:#0e0f11 !important;backdrop-filter:none !important;-webkit-backdrop-filter:none !important;border:none !important;border-top:1px solid rgba(255,255,255,.08) !important;border-radius:0 !important;box-shadow:none !important;display:flex !important;flex-direction:column !important;align-items:stretch !important;justify-content:flex-start !important;gap:0 !important;padding:14px 20px 28px !important;overflow-y:auto;-webkit-overflow-scrolling:touch;opacity:0 !important;transform:translateY(-8px) !important;transition:opacity .28s var(--ease),transform .28s var(--ease) !important;pointer-events:none;z-index:9999}
  .nav-links.open{opacity:1 !important;transform:none !important;pointer-events:all !important}
  .nav-links li{width:100% !important;margin:0 !important}
  .nav-links a:not(.nav-cta){display:flex !important;align-items:center;width:100% !important;color:#b1b1b1 !important;font-size:16px !important;font-weight:400 !important;letter-spacing:0 !important;padding:12px 0 !important;background:none !important;border-radius:0 !important;text-align:left !important}
  .nav-links a:not(.nav-cta)::after{display:none !important}
  .nav-links a:not(.nav-cta):hover{color:#fff !important;background:none !important}
  .nav-links .mob-only a i{color:var(--teal)}
  /* grey mail icon beside the hamburger */
  .mob-mail{display:inline-flex !important;align-items:center;justify-content:center;width:40px;height:40px;margin-left:auto;margin-right:2px;order:2;color:#b1b1b1 !important;text-decoration:none}
  .mob-mail i{font-size:21px}
  .mob-mail:active{color:#fff !important}
  /* the current page underlines in the menu */
  .nav-links a.active-link{color:#fff !important;text-decoration:underline !important;text-underline-offset:6px !important;text-decoration-color:var(--lime) !important;text-decoration-thickness:2px !important}
  /* email + button sink to the bottom of the full-height menu, leaving a gap under the
     last link. Needs li.mob-contact specificity to beat `.nav-links li{margin:0}`. */
  /* accordion dropdowns for Services + Resources in the mobile menu */
  .mob-acc{display:block !important}
  .mob-acc-btn{width:100%;display:flex;align-items:center;justify-content:space-between;gap:12px;background:none;border:none;cursor:pointer;font-family:inherit;text-align:left;color:#b1b1b1;font-size:16px;font-weight:400;padding:12px 0}
  .mob-acc-btn i{font-size:15px;color:var(--text3);transition:transform .25s var(--ease)}
  .mob-acc.open .mob-acc-btn{color:#fff}
  .mob-acc.open .mob-acc-btn i{transform:rotate(180deg);color:var(--teal)}
  .mob-acc-btn.active-link{color:#fff;text-decoration:underline;text-underline-offset:6px;text-decoration-color:var(--lime);text-decoration-thickness:2px}
  .mob-acc-list{list-style:none;margin:0;padding:0;max-height:0;overflow:hidden;transition:max-height .32s var(--ease)}
  .mob-acc.open .mob-acc-list{max-height:340px}
  .nav-links .mob-acc-list a{display:flex !important;align-items:center;gap:11px;font-size:15px !important;color:#b1b1b1 !important;padding:10px 0 10px 10px !important}
  .nav-links .mob-acc-list a i{font-size:17px;color:var(--teal)}
  .nav-links .mob-acc-list a:active{color:#fff !important}
  .nav-links li.mob-contact{border-top:1px solid rgba(255,255,255,.08);margin-top:auto !important;padding-top:14px !important}
  /* cookie bar: phone-proof tap targets, clear of browser toolbars / home indicator */
  .cc-bar{padding-bottom:calc(18px + env(safe-area-inset-bottom,0px)) !important}
  .cc-inner{flex-direction:column;align-items:stretch;gap:12px}
  .cc-btns{width:100%;display:flex;gap:10px}
  .cc-btn{flex:1;min-height:46px !important;font-size:14px !important}
  .nav-links .mob-contact a{display:flex !important;align-items:center;gap:10px;color:#b1b1b1 !important;font-size:14px !important;font-weight:400 !important;padding:11px 0 !important}
  .nav-links .mob-contact a i{font-size:18px;color:var(--teal)}
  .nav-links .mob-contact a:active{color:#fff !important}
  .nav-links li:has(.nav-cta){margin-top:14px !important}
  .nav-links .nav-cta{display:flex !important;width:100% !important;height:52px !important;justify-content:center !important;align-items:center !important;gap:8px !important;padding:0 20px !important;font-size:15px !important;font-weight:700 !important;color:var(--navy) !important;background:var(--lime) !important;background-image:none !important;border:none !important;border-radius:16px !important;margin:0 !important}
  .nav-links a.nav-tools{display:flex !important;width:100% !important;height:50px !important;justify-content:center !important;align-items:center !important;gap:8px !important;margin-top:10px !important;border-radius:14px !important;padding:0 20px !important}
}

/* ── Top bar + promo strip ──────────────────────────────────────────── */
.top-bar{position:fixed;top:0;left:0;right:0;z-index:201;height:var(--top-h);background:var(--navy);border-bottom:1px solid rgba(255,255,255,.06);display:flex;align-items:center;transition:transform .35s cubic-bezier(.4,0,.2,1);will-change:transform}
.top-bar.hide{transform:translateY(-100%)}
.tb-inner{max-width:1140px;margin:0 auto;padding:0 28px;width:100%;display:flex;align-items:center;justify-content:flex-end;gap:20px}
.tb-email{display:inline-flex;align-items:center;gap:7px;font-size:12px;font-weight:600;color:var(--text2);text-decoration:none;transition:color .2s;letter-spacing:.01em}
.tb-email i{font-size:14px;color:var(--teal);flex-shrink:0}
.tb-email:hover{color:var(--teal)}
.top-bar:has(.tb-promo){background:#ffd21e;border-bottom:1px solid rgba(0,0,0,.10)}
.tb-inner:has(.tb-promo){justify-content:center}
.tb-promo{display:inline-flex;align-items:center;gap:11px;font-size:12.5px;font-weight:600;color:#0e0f11;text-decoration:none;letter-spacing:.01em}
.tb-promo .tp-msg{display:inline-flex;align-items:center;gap:7px;color:#0e0f11}
.tb-promo .tp-msg i{color:#0e0f11;font-size:14px;flex-shrink:0}
.tb-promo .tp-msg b{color:#0e0f11;font-weight:800}
.tb-promo .tp-cta{display:inline-flex;align-items:center;gap:5px;background:#0e0f11;color:#ffd21e;font-weight:800;font-size:11px;border-radius:50px;padding:3px 12px;transition:background .2s,transform .2s}
.tb-promo:hover .tp-cta{background:#26292f}
.tb-promo:active .tp-cta{transform:scale(.96)}
@media(max-width:760px){.tb-promo{font-size:12px;gap:9px}}

/* ── Forms: readable, consistent fields on the dark theme ───────────── */
/* form panel reads as a real surface (was the same black as the page) */
.contact-form-card{ background:#141517 !important; border:1px solid rgba(255,255,255,.1) !important; box-shadow:0 30px 60px -28px rgba(0,0,0,.6) !important; }
.fg label{ display:block; font-size:12px !important; font-weight:600 !important; color:#cccfd5 !important; text-transform:none !important; letter-spacing:0 !important; margin-bottom:7px !important; }
/* fields sit lighter than the page so the edges are always visible */
input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):not([type="hidden"]),
textarea, select,
.fg input, .fg textarea, .fg select{
  background-color:#1a1d24 !important;
  border-color:rgba(255,255,255,.18) !important;
  color:#f3f4f6 !important;
  transition:border-color .18s ease, box-shadow .18s ease !important;
}
input::placeholder, textarea::placeholder,
.fg input::placeholder, .fg textarea::placeholder{ color:#91949a !important; opacity:1 !important; }
input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):hover,
textarea:hover, select:hover,
.fg input:hover, .fg textarea:hover, .fg select:hover{ border-color:rgba(255,255,255,.3) !important; }
input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):focus,
textarea:focus, select:focus,
.fg input:focus, .fg textarea:focus, .fg select:focus{
  border-color:var(--teal) !important;
  box-shadow:0 0 0 3px rgba(13,185,129,.18) !important;
  outline:none !important;
}
/* clean chevron on selects + readable native dropdown list */
.fg select{
  cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%237aa8c4' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") !important;
  background-repeat:no-repeat !important;
  background-position:right 15px center !important;
  padding-right:40px !important;
}
select option{ background:#141517; color:#f3f4f6; }

/* ── FAQ accordion: card panels instead of hairline rows ────────────── */
.fq{ background:#141517 !important; border:1px solid rgba(255,255,255,.1) !important; border-radius:14px !important; overflow:hidden; margin-bottom:12px; transition:border-color .25s ease, background .25s ease; }
.fq:last-child{ margin-bottom:0; }
.fq:hover{ border-color:rgba(255,255,255,.18) !important; }
.fq.open{ background:#16181d !important; border-color:rgba(13,185,129,.35) !important; }
.fq-q{ width:100% !important; background:none !important; border:none !important; font-family:inherit; color:#f3f4f6 !important; font-size:16.5px !important; font-weight:600 !important; text-align:left !important; padding:20px 22px !important; display:flex !important; justify-content:space-between !important; align-items:center !important; gap:20px !important; cursor:pointer; transition:color .2s ease; }
.fq-q:hover{ color:#fff !important; }
.fq-ico, .fq-icon{ width:28px !important; height:28px !important; border-radius:50% !important; background:rgba(13,185,129,.14) !important; border:1px solid rgba(13,185,129,.28) !important; display:flex !important; align-items:center !important; justify-content:center !important; font-size:15px !important; color:var(--teal) !important; flex-shrink:0 !important; transition:transform .3s cubic-bezier(.4,0,.2,1), background .25s ease, color .25s ease, border-color .25s ease !important; }
.fq.open .fq-ico, .fq.open .fq-icon{ transform:rotate(180deg) !important; background:var(--teal) !important; color:#0e0f11 !important; border-color:var(--teal) !important; }
.fq-a{ max-height:0; overflow:hidden; transition:max-height .42s cubic-bezier(.4,0,.2,1); }
.fq.open .fq-a{ max-height:700px; }
.fq-a-in{ padding:0 22px 22px !important; color:#b1b1b1 !important; font-size:15px !important; line-height:1.8 !important; max-width:none !important; }

/* ── Footer ─────────────────────────────────────────────────────────── */
footer{background:var(--navy);padding:60px 0 28px;text-align:left}
footer .container{max-width:1100px !important;margin-left:auto !important;margin-right:auto !important;padding-left:28px;padding-right:28px}
.footer-inner{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:44px;margin-bottom:44px}
.f-logo-link{display:inline-block;line-height:0;margin-bottom:18px}
.f-logo{height:52px;width:auto;display:block}
.f-brand p{color:rgba(255,255,255,.4);font-size:14px;line-height:1.75;max-width:260px;margin-bottom:20px}
/* St Piran's flag badge. The border keeps the black field visible on the dark footer. */
.f-brand p.f-cornish{display:flex;align-items:center;gap:15px;margin:-6px 0 20px;max-width:none}
.f-cornish svg{flex:none;border:1px solid rgba(255,255,255,.28);border-radius:3px;display:block}
.f-cornish span{font-size:13px;font-weight:600;color:rgba(255,255,255,.55);letter-spacing:.01em}
.f-col h4{font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.35);margin-bottom:15px}
.f-col ul{list-style:none;display:flex;flex-direction:column;gap:9px}
.f-col a{color:rgba(255,255,255,.45);font-size:14px;transition:color .2s}
.f-col a:hover{color:var(--teal)}
.f-bottom{display:flex;justify-content:space-between;align-items:center;padding-top:26px;border-top:1px solid rgba(255,255,255,.07);font-size:13px;color:rgba(255,255,255,.24);flex-wrap:wrap;gap:10px}
.f-bottom a{color:rgba(255,255,255,.45);transition:color .2s}
.f-bottom a:hover{color:var(--teal)}
@media(max-width:820px){
  .footer-inner{grid-template-columns:1fr 1fr;gap:30px}
  .footer-inner .f-brand{grid-column:1/-1}
}
@media(max-width:520px){
  .footer-inner{grid-template-columns:1fr}
}

/* ==========================================================================
   LIGHT-THEME LEFTOVERS -> DARK
   Older pages (services, tools, who-we-help) still carry the original light
   theme via `.section:not(.section-dk){background:#fff}`. This file loads
   after those inline styles, so the overrides below darken them site-wide.

   DELIBERATELY LEFT LIGHT: `.tg-*` (the fake browser mockup on trade pages)
   and `.serp*` (the Google result preview) - both imitate real UI and only
   read correctly on white. Guards at the bottom keep their text dark.
   ========================================================================== */

.section:not(.section-dk){background:var(--bg) !important;color:var(--text2) !important}
.section.grey:not(.section-dk){background:var(--bg2) !important}
.section:not(.section-dk) h2,
.section:not(.section-dk) h3,
.section:not(.section-dk) h4{color:var(--text) !important}
/* teal -> teal-dk (Aug 2026): eyebrows were later standardised on the
   homepage shade sitewide; this !important pair predates that and was
   silently beating the unification rules at the end of this file. */
.section:not(.section-dk) .eyebrow{color:var(--teal-dk) !important}
.section:not(.section-dk) .eyebrow::before{background:var(--teal-dk) !important}

/* body copy */
.section:not(.section-dk) .blk-body,
.section:not(.section-dk) .blk-list li,
.section:not(.section-dk) .drow-t span,
.section:not(.section-dk) .pc-col li,
.section:not(.section-dk) .verdict,
.section:not(.section-dk) .recipe-note,
.section:not(.section-dk) .ex2-top>p,
.section:not(.section-dk) .ex2-lists li,
.section:not(.section-dk) .ex2-for,
.section:not(.section-dk) .ex2-verdict,
.section:not(.section-dk) .guide-card li,
.section:not(.section-dk) .info-block p,
.section:not(.section-dk) .info-block li,
.section:not(.section-dk) .ref-table td,
.section:not(.section-dk) .plat-card p,
.section:not(.section-dk) .fq-a-in,
.section:not(.section-dk) .fq-ico,
.section:not(.section-dk) .fqi .a-in,
.section:not(.section-dk) .incl-list li,
.section:not(.section-dk) .feat-list li,
.section:not(.section-dk) .fit-card p,
.section:not(.section-dk) .cmp-card li,
.section:not(.section-dk) .split-card li,
.section:not(.section-dk) .not span,
.section:not(.section-dk) .why-item span,
.section:not(.section-dk) .price-note,
.section:not(.section-dk) .build-cap span,
.section:not(.section-dk) p:not(.eyebrow),
.section:not(.section-dk) .sh p:not(.eyebrow),
.section:not(.section-dk) .q-card p,
.section:not(.section-dk) .step p,
.section:not(.section-dk) .pc-blurb,
.section:not(.section-dk) .pc-feats li,
.section:not(.section-dk) .pc-lbl,
.section:not(.section-dk) .pc-sub,
.section:not(.section-dk) .pc-note{color:var(--text2) !important}

/* emphasis */
.section:not(.section-dk) .drow-t strong,
.section:not(.section-dk) .inc-item span,
.section:not(.section-dk) .verdict strong,
.section:not(.section-dk) .recipe-head h3,
.section:not(.section-dk) .ex2-top h3,
.section:not(.section-dk) .ex2-for b,
.section:not(.section-dk) .ex2-verdict b,
.section:not(.section-dk) .guide-card h3,
.section:not(.section-dk) .info-block h3,
.section:not(.section-dk) .info-block strong,
.section:not(.section-dk) .info-block li b,
.section:not(.section-dk) .ref-table td:first-child,
.section:not(.section-dk) .plat-card h3,
.section:not(.section-dk) .fq-q,
.section:not(.section-dk) .fqi button,
.section:not(.section-dk) .prose strong,
.section:not(.section-dk) .price-note b,
.section:not(.section-dk) .why-item span b,
.section:not(.section-dk) .not span b,
.section:not(.section-dk) .incl-head h3,
.section:not(.section-dk) .build-cap strong,
.section:not(.section-dk) .wh-t strong,
.section:not(.section-dk) .sh h2,
.section:not(.section-dk) .step h3,
.section:not(.section-dk) .pc-name,
.section:not(.section-dk) .pc-price,
.section:not(.section-dk) .pc-price sup{color:var(--text) !important}

/* the teal "most popular" ribbon sets its own dark text - don't let the
   body-copy override above flatten it into light-grey-on-teal */
#pricing .pc-feat .pc-lbl,
.pc-feat .pc-lbl{color:var(--navy) !important}

/* ghost buttons were dark navy text for a white background - invisible on dark */
.section:not(.section-dk) .btn-ghost,
#pricing .btn-ghost,
#pricing .pc-body .btn-ghost{color:var(--text) !important;border-color:rgba(255,255,255,.25) !important}

/* cards sit one step lighter than the section they're on */
.section:not(.section-dk) .step,
.section:not(.section-dk) .pc-col,
.section:not(.section-dk) .recipe,
.section:not(.section-dk) .ex2-card,
.section:not(.section-dk) .plat-card,
.section:not(.section-dk) .guide-card,
.section:not(.section-dk) .info-block,
.section:not(.section-dk) .split-card,
.section:not(.section-dk) .why-item,
.section:not(.section-dk) .not,
.section:not(.section-dk) .fit-card,
.section:not(.section-dk) .cmp-card,
.section:not(.section-dk) .wh-card,
.section:not(.section-dk) .q-card,
.section:not(.section-dk) .pc,
.section:not(.section-dk) .icv,
.section:not(.section-dk) .ph.real{background:var(--bg3,#1a1b1e) !important;border-color:rgba(255,255,255,.1) !important;box-shadow:0 18px 40px -22px rgba(0,0,0,.6) !important}
.section:not(.section-dk) .icv-chip{background:var(--bg3,#1a1b1e) !important;border-color:rgba(255,255,255,.12) !important;color:var(--teal) !important;box-shadow:0 18px 32px -20px rgba(0,0,0,.6) !important}
/* teal-dk was tuned for white; brighten the icons back up on dark */
.section:not(.section-dk) .q-ico,
.section:not(.section-dk) .icv{color:var(--teal) !important}
.section:not(.section-dk) .ref-table td{border-color:rgba(255,255,255,.08) !important}
.section:not(.section-dk) .ref-table th{background:var(--bg2) !important;color:var(--teal) !important;border-color:rgba(255,255,255,.08) !important}
.wh-img{background:var(--bg3,#1a1b1e) !important}
.wh-img-cta{color:var(--teal) !important}
#pricing .btn-ghost:hover,
#pricing .pc-body .btn-ghost:hover{background:rgba(255,255,255,.08) !important;border-color:rgba(255,255,255,.25) !important;color:#fff !important}

/* guards: mockups that must stay light.
   .ex-card is a Google result example (arial + #1a0dab link blue) - same deal. */
.tg-browser,.tg-site,.tg-card,.tg-url,.serp,.ex-card{color:#0e1d2b !important}
.serp,.tg-browser,.tg-site,.tg-card,.tg-url,.ex-card{background:#fff !important}
.ex-card .ex-why{color:#54687a !important}

/* ==========================================================================
   NEUTRAL TEXT PALETTE
   --text/--text2/--text3 were blue-tinted (#ddeeff / #7aa8c4 / #3e6480),
   carried over from the old navy theme. Against navy they read as neutral;
   against the black theme they read visibly blue. These are the same
   lightness, minus the blue cast, so nothing else in the design shifts.
   Declared here so all 81 pages that load this file pick it up; index.html
   has no stylesheet link, so its :root is edited directly to match.
   ========================================================================== */
:root{
  /* Nav geometry. Some pages (terms, privacy) never declared --top-h, which made
     .top-bar{height:var(--top-h)} and nav{top:var(--top-h)} invalid: the bar
     collapsed and the nav dropped to top:0, overlapping it. Declared here so
     every page has it. All pages that set it themselves use the same 34px. */
  --top-h: 34px;
  --nav-h: 70px;
  --text:  #f2f3f5;
  --text2: #c5c6c9;
  --text3: #8a8b8f;
  /* Brand colours. Same failure mode as --top-h above: the case-study pages
     define --teal but never --teal-dk, so the eyebrow rules at the end of
     this file resolved to an invalid color there and the labels inherited
     white. Values match every page that does declare them. */
  --teal:     #0db981;
  --teal-dk:  #0a9a6a;
  --teal-dim: rgba(13,185,129,0.12);
  --lime:     #9eff3e;
}

/* ==========================================================================
   CUSTOMER-JOURNEY TIMELINE (trade landing pages)
   Replaced a big decorative icon sat next to three paragraphs. The point of
   the section is a sequence, so it is built as one: a vertical spine, one
   node per beat, and a final lime node carrying the closing line.
   No step numbers. The order is carried by the <ol> and the spine, which
   screen readers announce without printing "Step 1" on screen.
   ========================================================================== */

.jrn-head{max-width:660px;margin:0 0 44px}
.jrn-head h2{margin-bottom:14px}
.jrn-head p{font-size:16.5px;line-height:1.75;color:var(--text2);margin:0}

.jrn{list-style:none;margin:0;padding:0;max-width:680px}
.jrn-step{position:relative;padding:0 0 30px 38px;border-left:2px solid rgba(255,255,255,.1)}
.jrn-step::before{content:'';position:absolute;left:-8px;top:5px;width:14px;height:14px;border-radius:50%;
  background:var(--bg);border:2px solid var(--teal)}
.jrn-step h3{font-family:'Outfit',sans-serif;font-size:17px;font-weight:800;letter-spacing:-.01em;
  color:var(--text);line-height:1.3;margin:0 0 6px}
.jrn-step p{font-size:15.5px;line-height:1.7;color:var(--text2);margin:0}

/* closing beat: the spine runs into a lime node and stops there.
   The transparent border keeps this block's geometry identical to a step, so
   the node and the connector line up with the spine above without magic numbers. */
.jrn-end{position:relative;padding:6px 0 0 38px;max-width:680px;border-left:2px solid transparent}
.jrn-end::after{content:'';position:absolute;left:-2px;top:0;width:2px;height:12px;background:rgba(255,255,255,.1)}
.jrn-end::before{content:'';position:absolute;left:-8px;top:11px;width:14px;height:14px;border-radius:50%;z-index:1;
  background:var(--lime);border:2px solid var(--lime);box-shadow:0 0 0 5px rgba(158,255,62,.13)}
.jrn-end strong{display:block;font-family:'Outfit',sans-serif;font-size:clamp(19px,2.3vw,24px);font-weight:900;
  letter-spacing:-.02em;color:var(--lime);line-height:1.25;margin-bottom:9px}
.jrn-end p{font-size:15.5px;line-height:1.7;color:var(--text2);margin:0;max-width:54ch}

/* the three ways of being invisible. Dashes rather than dots, so these do not
   read as more timeline nodes. */
.jrn-miss{list-style:none;margin:15px 0 0;padding:0;display:grid;gap:10px;max-width:56ch}
.jrn-miss li{position:relative;padding-left:19px;font-size:15px;line-height:1.65;color:var(--text2)}
.jrn-miss li::before{content:'';position:absolute;left:0;top:10px;width:10px;height:2px;border-radius:2px;background:var(--lime);opacity:.75}

/* the reveal cascade only ships d1-d3 on these pages */
.reveal.d4{transition-delay:.32s}
.reveal.d5{transition-delay:.40s}

@media(max-width:640px){
  .jrn-head{margin-bottom:34px}
  .jrn-step{padding:0 0 26px 28px}
  .jrn-end{padding-left:28px}
  .jrn-step h3{font-size:16px}
  .jrn-step p,.jrn-end p{font-size:15px}
}

/* ── Eyebrow labels, sitewide ──────────────────────────────────────────
   The small uppercase kickers above section headings ("WHY WE EXIST",
   "OUR PROCESS", "GET IN TOUCH"). Pages declared these at two scales:
   12px/.12em on ~44 pages and 11.5px/.09em on the rest, so the same label
   changed size depending which page you were on. Locked to the 11.5px
   homepage spec here, where every page picks it up from one file.

   Typography only, by design. Roughly 17 pages wrap the eyebrow in a
   teal pill (background + border + padding + pulsing dot); those
   properties are deliberately untouched, so the pill treatment survives
   and only its text metrics fall into line. Colour is likewise left per
   page: teal-dk on plain dark sections, teal inside the tinted pills
   where the darker shade would lose contrast against its own background.

   Doubled class (.eyebrow.eyebrow) raises specificity to (0,2,0) so this
   outranks the ".section-head p" rules that otherwise leak paragraph
   sizing and weight onto the labels, without needing !important. */
.eyebrow.eyebrow{
  font-size:11.5px;
  font-weight:700;
  letter-spacing:.09em;
  line-height:1;
  text-transform:uppercase;
}

/* Same label, other names. Three page types grew their own class for the
   identical component before .eyebrow was shared, so they missed the rule
   above and kept the old 12px/.12em (or 11px) metrics:
     .rc-eyebrow      research centre hub, plain dot variant
     .cat-tag         blog article hero, teal pill
     .cs-tag          case study hero, teal pill
   Scoped to .post-hero for .cat-tag on purpose: the same class is reused as
   a 10px chip inside .more-card, which must stay small. Pill containers,
   dots and colours are untouched here, exactly as with .eyebrow. */
.rc-eyebrow.rc-eyebrow,
.post-hero .cat-tag,
.cs-tag.cs-tag{
  font-size:11.5px;
  font-weight:700;
  letter-spacing:.09em;
  line-height:1;
  text-transform:uppercase;
}

/* Full match to the homepage eyebrow. The pill treatment (~17 pages: tinted
   background, border, padding, pulsing dot) originally survived on purpose;
   the decision was later reversed in favour of one identical style sitewide.
   Container stripped here, and every label gets the homepage's plain 6px dot
   and teal-dk colour. .cat-tag / .cs-tag never had a ::before dot, so one is
   drawn for them; their inline icons are hidden to match. The homepage's
   lime exception (.hwb-head) still wins on specificity from index.html. */
.eyebrow.eyebrow, .rc-eyebrow.rc-eyebrow, .post-hero .cat-tag, .cs-tag.cs-tag{
  display:inline-flex;
  align-items:center;
  gap:8px;
  background:none;
  border:0;
  border-radius:0;
  padding:0;
}
/* Colour needs (0,3,0): several pages scope eyebrow colour per section
   (e.g. seo.html's .section:not(.section-dk) .eyebrow), which outranked a
   double class and left labels two-tone on the same page. Tripled class
   ties the highest page rule and wins as the later stylesheet. */
.eyebrow.eyebrow.eyebrow, .rc-eyebrow.rc-eyebrow.rc-eyebrow,
.post-hero .cat-tag.cat-tag, .cs-tag.cs-tag.cs-tag{
  color:var(--teal-dk);
}
.eyebrow.eyebrow.eyebrow::before, .rc-eyebrow.rc-eyebrow.rc-eyebrow::before{
  width:6px; height:6px;
  background:var(--teal-dk);
  animation:none;
}
.post-hero .cat-tag::before, .cs-tag.cs-tag::before{
  content:''; display:block;
  width:6px; height:6px; flex:none;
  border-radius:50%;
  background:var(--teal-dk);
}
.eyebrow.eyebrow i, .post-hero .cat-tag i, .cs-tag.cs-tag i{display:none}


/* Footer social icons. The brand column already stacks a Cornish-flag badge
   and a JS-injected "Free website audit" button, so a third full-width
   icon-plus-text row read as clutter. An icon button sits at a different
   visual weight and leaves room for more networks later.
   Inline SVG rather than a Tabler glyph: the icons.css subset has no
   ti-brand-facebook and cannot be regenerated here, so a font icon would
   render as a tofu box. currentColor lets it inherit the hover. */
.f-socials{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 22px}
.f-social{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:10px;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.03);color:rgba(255,255,255,.55);text-decoration:none;transition:color .18s ease-out,border-color .18s ease-out,background .18s ease-out,transform .18s ease-out}
.f-social svg{display:block}
.f-social:hover{color:var(--teal);border-color:rgba(13,185,129,.45);background:rgba(13,185,129,.10);transform:translateY(-2px)}
.f-social:active{transform:translateY(0) scale(.96)}
.f-social:focus-visible{outline:2px solid var(--teal);outline-offset:2px}