/* Light theme for the live site.
   Loaded last on every page, after the pages' own <style> blocks, so it can lighten the
   dark navy blocks without touching page markup or copy.
   The page ground is white (--c-paper in site-extra.css). The former dark blocks become a
   very pale mint-grey (#F3F7F5) with navy text and the brand green as the accent, and cards
   inside them stay white. Navy buttons, the green closing panel and all copy are unchanged.
   Palette: navy #0B1626, body #33404F / #48586B, muted #5E6878, green #0B7A55, pale tint
   #F3F7F5, hairline #DCE6E1. Every text/background pair here is at least 4.5:1. */

/* ---------- logo: the lockup is wide, so phones show the mark ---------- */
.logo img{display:block;width:auto}
.logo .logo__lockup{height:20px}
.logo .logo__mark{display:none;height:32px}
@media(max-width:480px){
  .logo .logo__lockup{display:none}
  .logo .logo__mark{display:block}
}
.foot .lockup{height:22px;width:auto}

/* ---------- ivory to white where the page hard-codes the old paper colour ---------- */
html body .nav--ivory,html body .nav{background:#FFFFFF !important}
@media(max-width:1080px){html body .nav--ivory .navlinks,html body .nav .navlinks{background:#FFFFFF}}
html body .hb{background:#FFFFFF}
html body .nav--ivory{border-bottom-color:#E4EAE7}
html body p.xr__terms,html body nav.legal__contents{background:#F3F7F5}

/* ---------- footer (every page) ---------- */
html body .foot,html body footer.foot{background:#F3F7F5 !important;color:#48586B !important;border-top:1px solid #DCE6E1}
html body .foot a{color:#48586B}
html body .foot a:hover{color:#0B7A55}
html body .foot h4,html body .foot h2.foot__h{color:#5E6878}
html body .foot__mail{color:#0B1626;border-bottom:1px solid rgba(11,22,38,.25)}
html body .foot__mail:hover{border-color:#0B7A55}
html body .foot__bar{border-top:1px solid rgba(11,22,38,.12);color:#5E6878}
html body .foot__legal a,html body .foot__reg,html body .foot__terms{color:#5E6878 !important}
html body .foot__legal a:hover{color:#0B7A55}

/* ---------- home: "a cold caller is only one part" box ---------- */
html body .xp__band{background:#EAF5EF;border:1px solid #CFE5DA}
html body .xp__band p{color:#0B1626}
html body .xp__band p span{color:#0B7A55}
html body .xp__band a{background:#0B7A55;color:#FFFFFF}
html body .xp__band a:hover{background:#0B1626;color:#FFFFFF}

/* ---------- home: Managed card ---------- */
html body .xr__card--dark{background:#EAF5EF;border-color:#BFDCCF}
html body .xr__card--dark h3,html body .xr__card--dark .xr__price,html body .xr__card--dark .xr__met{color:#0B1626}
html body .xr__card--dark .xr__best,html body .xr__card--dark .xr__list li,html body .xr__card--dark{color:#33404F}
html body .xr__card--dark .xr__price span,html body .xr__card--dark .xr__meter-l{color:#48586B !important}
html body .xr__card--dark .xr__meter{border-color:rgba(11,22,38,.12)}
html body .xr__card--dark .xr__bars i{background:rgba(11,22,38,.14)}
html body .xr__card--dark .xr__bars i.on{background:#0B7A55}
html body .xr__card--dark .xr__bars i.on,html body .xr__card--dark .xr__list .is-us b{color:#0B7A55}
html body .xr__card--dark .xr__list .is-you,html body .xr__card--dark .xr__list .is-you b{color:#5E6878 !important}
html body .xr__card--dark .xr__terms{background:rgba(11,22,38,.06);color:#0B1626}
html body .xr__card--dark .xr__go{color:#0B1626}
html body .xr__card--dark .xr__go:hover{color:#0B7A55}

/* ---------- home: "Cold calling is all we do" ---------- */
html body .xw{background:#F3F7F5 !important;border-top:1px solid #DCE6E1;border-bottom:1px solid #DCE6E1}
html body .xw__h{color:#0B1626 !important}
html body .xw__h .tint{color:#0B7A55 !important}
html body .xw__side > p{color:#33404F}
html body .xw__facts{border-top-color:rgba(11,22,38,.12)}
html body .xw__facts div{border-bottom-color:rgba(11,22,38,.12)}
html body .xw__facts dt{color:#5E6878}
html body .xw__facts dd,html body .xw__facts a{color:#0B1626}
html body .xw__facts a{border-bottom-color:rgba(11,22,38,.3)}
html body .xw__more{color:#0B7A55}
html body .xw__more:hover{color:#0B1626}

/* ---------- about: "How we work" band (token-driven, so re-point the tokens) ---------- */
html body .band--deep{
  --bg:#F3F7F5;--bg-2:#FFFFFF;--surface:#FFFFFF;--surface-2:#FFFFFF;
  --line:rgba(11,22,38,.14);--line-soft:rgba(11,22,38,.08);
  --tx:#0B1626;--tx-mid:#33404F;--tx-dim:#5E6878;
  --accent:#0B7A55;--accent-ink:#0B7A55;--shadow:0 1px 2px rgba(11,22,38,.04);
  background:#F3F7F5 !important;color:#0B1626;
}
html body .band--deep h2,html body .plate h2,html body .costs h2,html body .std h2{color:#0B1626 !important}
html body .band--deep h2 .tint,html body .plate h2 .tint,html body .costs h2 .tint,html body .std h2 .tint{color:#0B7A55 !important}
html body .band--deep [class*="eyebrow"],html body .plate [class*="eyebrow"],html body .costs [class*="eyebrow"],html body .costs [class*="__label"]{color:#0B7A55 !important}

/* ---------- hire: "What it costs" ---------- */
html body .costs{background:#F3F7F5 !important;color:#0B1626;border-top:1px solid #DCE6E1;border-bottom:1px solid #DCE6E1}
html body .costs__eyebrow,html body .costs__label{color:#0B7A55}
html body .costs__h{color:#0B1626}
html body .costs__h .tint{color:#0B7A55}
html body .costs__lede{color:#33404F}
html body .costs__grid{background:rgba(11,22,38,.12);border:1px solid rgba(11,22,38,.12)}
html body .costs__card{background:#FFFFFF}
html body .costs__num{color:#0B1626}
html body .costs__num small,html body .costs__unit,html body .costs__foot{color:#48586B}
html body .costs__foot a{color:#0B7A55}

/* ---------- build and managed: the hero price panel ---------- */
html body .hero--green .price-panel,html body .hero--navy .price-panel{background:#FFFFFF !important;border-color:#D9E2DD !important;box-shadow:0 1px 2px rgba(0,15,38,.04),0 10px 28px rgba(0,15,38,.06) !important}
html body .hero--green .price-panel__label,html body .hero--navy .price-panel__label,html body .hero--green .price-panel .price-panel__label,html body .hero--navy .price-panel .price-panel__label{color:#0B7A55 !important}
html body .hero--green .price-panel__price,html body .hero--green .price-panel__own,html body .hero--navy .price-panel__price,html body .hero--navy .price-panel__own{color:#0B1626}
html body .hero--green .price-panel__best,html body .hero--navy .price-panel__best,html body .hero--green .price-panel .price-panel__best,html body .hero--navy .price-panel .price-panel__best{color:#33404F !important;border-top-color:#DCE6E1 !important}
html body .hero--green .price-panel__best b,html body .hero--navy .price-panel__best b{color:#0B1626}
html body .hero--green .price-panel__promise,html body .hero--navy .price-panel__promise{color:#0B1626}

/* ---------- build: "At handover" ---------- */
html body #handover,html body section.ramp#handover{background:#F3F7F5 !important}
html body #handover .ramp__eyebrow{color:#0B7A55 !important}
html body #handover .ramp__h{color:#0B1626 !important}
html body #handover .ramp__h .tint{color:#0B7A55 !important}
html body #handover .ramp__lede p{color:#33404F !important}
html body #handover .own-tile{background:#FFFFFF !important;border-color:#DCE6E1 !important}
html body #handover .own-tile h3{color:#0B1626 !important}
html body #handover .own-tile p{color:#33404F !important}

/* ---------- managed: "What's included" ---------- */
html body #capacity,html body section.cap#capacity{background:#F3F7F5 !important}
html body #capacity .cap-stat{color:#0B1626 !important}
html body #capacity .cap-unit{color:#33404F !important}
html body #capacity .inc{background:#FFFFFF !important;border-color:#DCE6E1 !important}
html body #capacity .inc h3{color:#0B7A55 !important}
html body #capacity .inc li{color:#1A2638 !important;border-top-color:#E4EBE7 !important}
html body #capacity .inc li::before{background:#0B7A55 !important}

/* ---------- home: Managed card meter ---------- */
html body .xr__card--dark .xr__meter-n{color:#0B1626 !important}

/* ---------- about: "How we work" plate ---------- */
html body .plate{background:#F3F7F5 !important;color:#0B1626}
html body .plate__eyebrow,html body .plate__label{color:#0B7A55 !important}
html body .plate__h{color:#0B1626 !important}
html body .plate__h .tint{color:#0B7A55 !important}
html body .plate__lede{color:#33404F}
html body .plate__row{border-color:rgba(11,22,38,.12)}
html body .plate__row dt{color:#0B1626}
html body .plate__row dd{color:#33404F}
html body .plate__foot{color:#0B1626}
html body .plate__foot i{color:#0B7A55}

/* ---------- managed: the section headings inside "What's included" ---------- */
html body #capacity .model__eyebrow{color:#0B7A55 !important}
html body #capacity .model__h{color:#0B1626 !important}
html body #capacity .model__h .tint{color:#0B7A55 !important}
html body #capacity .model__lede p{color:#33404F !important}

/* ---------- book a call, thanks: the sections that hard-code the old paper colour ---------- */
html body .bk,html body .ty,html body section.bk,html body section.ty{background:#FFFFFF !important}
html body .ty{border-bottom:1px solid #E4EAE7}

/* ---------- the "Talk to Kai" card follows the light theme ---------- */
html body .booking-card{background:#FFFFFF;color:#0B1626;border:1px solid rgba(11,22,38,.14);box-shadow:0 18px 44px rgba(11,22,38,.20)}
html body .booking-card__face{border-color:rgba(11,22,38,.2)}
html body .booking-card__name{color:#0B1626}
html body .booking-card__role{color:#5E6878}
html body .booking-card__close{color:#5E6878}
html body .booking-card__close:hover{color:#0B1626}
html body .booking-card__h{color:#0B1626}
html body .booking-card__body{color:#33404F}
html body .booking-card__note{color:#0B7A55}
html body .booking-card__cta{background:#0B7A55;border-color:#0B7A55;color:#FFFFFF}
html body .booking-card__cta:hover{background:#0B1626;border-color:#0B1626;color:#FFFFFF}