/* Krystal7 Consultants brand layer, October 2026.
   Loaded last on every public page. Holds the palette tokens, the floating
   navigation and the accent rules. Page colours themselves were swapped in
   place, so this file stays small. Fonts are unchanged (Inter). */

:root{
  --k7-indigo:#011a6a;
  --k7-red:#e4220c;
  --k7-red-dark:#ae1a09;
  --k7-cream:#f6f1e7;
  --k7-charcoal:#1a1818;
  --k7-white:#ffffff;
}

::selection{background:var(--k7-red);color:#fff}

/* ------------------------------------------------------------------
   Floating navigation
   Over a hero: a frosted glass pill with the white logo.
   Past the hero, or on pages without one: a solid white pill with the
   colour logo. navigation.js already toggles .k7-over-hero.
   ------------------------------------------------------------------ */
html body nav.k7-header:not(#k7-brand),
html body nav.k7-header.scrolled:not(#k7-brand),
html body nav.k7-header.k7-over-hero:not(#k7-brand){
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
  -webkit-backdrop-filter:none!important;backdrop-filter:none!important;
  padding:12px 0 0!important;
  pointer-events:none;
  
}
html body nav.k7-header .k7-nav-wrap{
  pointer-events:auto;
  height:66px;
  width:min(1280px,100% - 48px);
  padding:0 12px 0 26px;
  border-radius:999px;
  background:#fff;
  border:1px solid #011a6a14;
  box-shadow:0 10px 30px #011a6a1f;
  transition:background-color .28s ease,border-color .28s ease,box-shadow .28s ease;
}
html body nav.k7-header.k7-over-hero .k7-nav-wrap{
  background:rgba(255,255,255,.1);
  border-color:rgba(255,255,255,.24);
  box-shadow:0 8px 32px rgba(0,8,40,.22),inset 0 1px 0 rgba(255,255,255,.12);
  -webkit-backdrop-filter:blur(16px) saturate(150%);
  backdrop-filter:blur(16px) saturate(150%);
}

/* logo: two images stacked, crossfaded by state */
html body .k7-header .k7-nav-logo{position:relative;display:block;height:46px}
html body .k7-header .k7-nav-logo img{width:auto!important;height:46px!important;object-fit:contain;transition:opacity .28s ease}
html body .k7-header .k7-nav-logo .k7-logo-white{position:absolute;left:0;top:0;opacity:0}
html body .k7-header.k7-over-hero .k7-nav-logo .k7-logo-white{opacity:1}
html body .k7-header.k7-over-hero .k7-nav-logo .k7-logo-colour{opacity:0}

/* links */
html body .k7-header .k7-nav-link,
html body .k7-header summary{color:var(--k7-charcoal)!important;font-size:14px;padding:20px 0!important}
html body .k7-header.k7-over-hero .k7-nav-link,
html body .k7-header.k7-over-hero summary{color:#fff!important}
html body .k7-header .k7-nav-link:hover,
html body .k7-header summary:hover,
html body .k7-header .k7-nav-menu[open]>summary{color:var(--k7-red)!important}
html body .k7-header.k7-over-hero .k7-nav-link:hover,
html body .k7-header.k7-over-hero summary:hover,
html body .k7-header.k7-over-hero .k7-nav-menu[open]>summary{color:#fff!important;opacity:.78}

/* call to action: British red pill in both states */
html body .k7-header .k7-nav-cta{background:var(--k7-red)!important;color:#fff!important;border-radius:999px;padding:12px 20px;transition:background-color .2s}
html body .k7-header .k7-nav-cta:hover{background:var(--k7-red-dark)!important}
html body .k7-header a:focus-visible,
html body .k7-header summary:focus-visible,
html body .k7-menu-toggle:focus-visible{outline:2px solid var(--k7-red)!important;outline-offset:4px}
html body .k7-header.k7-over-hero a:focus-visible,
html body .k7-header.k7-over-hero summary:focus-visible{outline-color:#fff!important}

/* dropdown panels hang below the pill as their own rounded cards */
html body .k7-header .k7-nav-panel{top:calc(100% + 10px);border-radius:18px;border:1px solid #011a6a14}
html body .k7-header .k7-services-panel{border-top:3px solid var(--k7-red)}
html body .k7-header .k7-nav-menu>summary{position:relative}

/* mobile and tablet */
@media(max-width:991px){
  html body nav.k7-header:not(#k7-brand){padding-top:10px!important}
  html body nav.k7-header .k7-nav-wrap{height:58px;width:calc(100% - 24px);padding:0 8px 0 18px}
  html body .k7-header .k7-nav-logo,
  html body .k7-header .k7-nav-logo img{height:38px!important}
  html body .k7-menu-toggle{border:1px solid #011a6a33!important;color:var(--k7-indigo)!important;border-radius:999px!important;padding:8px 16px!important;}
  html body .k7-header.k7-over-hero .k7-menu-toggle{border-color:rgba(255,255,255,.45)!important;color:#fff!important}
  html body .k7-header .k7-navigation{top:calc(100% + 8px);left:0;right:0;border-radius:20px;background:var(--k7-indigo)!important;box-shadow:0 18px 40px #011a6a40}
  html body .k7-header .k7-navigation .k7-nav-link,
  html body .k7-header .k7-navigation summary{color:#fff!important;padding:13px 0!important}
  html body .k7-header .k7-nav-panel{top:auto;border-radius:12px}
}
@media(prefers-reduced-motion:reduce){
  html body nav.k7-header .k7-nav-wrap,
  html body .k7-header .k7-nav-logo img{transition:none}
}

/* ------------------------------------------------------------------
   British red on indigo is too dark to read on its own.
   Large text (headings, accent words, stat marks): keeps the brand red
   with a white outline. Small text (eyebrows, links, badges): turns white,
   because an outline on small letters makes them unreadable. The red dash
   beside eyebrows stays red. brand-2026.js applies the same split on every
   page; the known spots are listed here so they never flash.
   ------------------------------------------------------------------ */
.k7-red-outline,
.k7v2-hero .k7v2-h1 em,.k7v2-geo .k7v2-h2 em,
.about-hero .accent,.standards-section .accent,.final-cta .accent,
.k7v2-stat-plus{
  color:var(--k7-red)!important;
  -webkit-text-stroke:3px #fff;
  paint-order:stroke fill;
}
.k7-on-dark-white,
.k7v2-eyebrow.is-dark,.about-badge,.standards-section .section-badge,
.k7cc-card a,.k7cc-card .k7cc-foot,
.k7v2-hero a:not(.k7v2-btn){
  color:#fff!important;
  -webkit-text-stroke:0!important;
}

/* every call to action is British red with white text */
.op-button,.k7v2-btn--primary,.k7-art-button,.cf-submit,.k7-submit-btn,
.calc-actions button:not([type=reset]){background:var(--k7-red)!important;border-color:var(--k7-red)!important}
.op-button,.op-button *,
.k7v2-btn--primary,.k7v2-btn--primary *,
.k7-art-button,.k7-art-button *,
.cf-submit,.calc-actions button:not([type=reset]),.calc-actions button:not([type=reset]) *{color:#fff!important}
.op-button:hover,.k7v2-btn--primary:hover,.k7-art-button:hover,.cf-submit:hover,.k7-submit-btn:hover{background:var(--k7-red-dark)!important}

.k7v2-stars{color:#f2a23a!important}
.k7cc-card .k7cc-title{color:#fff!important}
.k7cc-card .k7cc-text{color:rgba(255,255,255,.86)!important}
.k7-footer .k7-footer-heading{color:rgba(255,255,255,.74)!important}

/* secondary calls to action: red outline on light, red outline with white text on dark */
.k7v2-btn--quiet,.btn-outline-primary,.op-inline-btn,.calc-next{color:var(--k7-red)!important;border-color:var(--k7-red)!important}
.k7v2-btn--quiet:hover,.btn-outline-primary:hover,.op-inline-btn:hover{background:var(--k7-red)!important;color:#fff!important}
.k7v2-btn--ghost,.btn-about-secondary{border:2px solid var(--k7-red)!important;color:#fff!important}
.k7v2-btn--ghost:hover,.btn-about-secondary:hover{background:var(--k7-red)!important}
.btn.btn-primary{background:var(--k7-red)!important;border-color:var(--k7-red)!important;color:#fff!important}
.k7v2-wa{background:var(--k7-red)!important;color:#fff!important}

/* homepage insights strip: white background, heading on one line */
.k7v2 .k7v2-insights{background:#fff!important}
.k7v2 .k7v2-insights .k7v2-carousel-head h2.k7v2-h2{max-width:none!important;text-align:center!important}

/* accent variant vermilion: #e4220c fills with white text; #ff5a36 for accent text on indigo, no outline */
.k7-red-outline,.k7v2-hero .k7v2-h1 em,.k7v2-geo .k7v2-h2 em,.about-hero .accent,.standards-section .accent,.final-cta .accent,.k7v2-stat-plus{-webkit-text-stroke:0!important;color:#ff5a36!important}
.k7-on-dark-white,.k7v2-eyebrow.is-dark,.about-badge,.standards-section .section-badge,.k7cc-card a,.k7cc-card .k7cc-foot,.k7v2-hero a:not(.k7v2-btn){color:#ff5a36!important}

/* Vermilion leftovers, 18 Oct 2026: form asterisks, form errors, warning cards and calculator errors
   were still on the old crimson (#dc3545 / #ae2626). */
.k7-required,.required,.lm-form-label .required,.cf label span,.k7-lead-form__error,.lm-error,.k7-tag__remove:hover,
.mistake-card h4,.rescue-item h5{color:#e4220c!important}
.mistake-card,.rescue-item{border-left-color:#e4220c!important}
#calc-error{color:#ae1a09!important}

/* Alignment, 19 Oct 2026. Home "Also handled in house" line follows the centred intro above it and
   spans the same width as the card grid. Older service pages: navigation.css pushes every section
   heading left, which broke groups built to be centred (badge, heading, underline, intro). */
.k7v2 .k7v2-practice .k7v2-lede.is-centred.k7v2-alsoline{text-align:center!important;max-width:none!important;margin-left:0!important;margin-right:0!important}
.k7-service-page .text-center .section-title,.k7-service-page .text-center .section-header,.k7-service-page .text-center .section-subtitle,
.k7-service-page .foundation-header .section-title,.k7-service-page .foundation-header .section-subtitle{text-align:center}