/*
Theme Name: Kadence Child
Theme URI: https://www.liquidweb.com/software/kadence/
Template: kadence
Author: Kadence WP
Author URI: https://www.liquidweb.com/
Description: Kadence Theme is a lightweight yet full featured WordPress theme for creating beautiful fast loading and accessible websites, easier than ever. It features an easy to use drag and drop header and footer builder to build any type of header in minutes. It features a full library of gorgeous starter templates that are easy to modify with our intelligent global font and color controls. With extensive integration with the most popular 3rd party plugins, you can quickly build impressive ecommerce websites, course websites, business websites, and more.
Tags: translation-ready,accessibility-ready,two-columns,right-sidebar,left-sidebar,footer-widgets,blog,custom-logo,custom-background,custom-menu,rtl-language-support,editor-style,threaded-comments,custom-colors,featured-images,wide-blocks,full-width-template,theme-options,e-commerce
Version: 1.5.2.1789847728
Updated: 2026-09-19 19:55:28

*/

@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@500;600;700;800;900&family=Hanken+Grotesk:wght@400;500;600;700&family=Space+Mono:wght@400;700&display=swap');

/* ============================================================
   SEVEN LIFESTYLES — FOUNDATION STYLESHEET
   One source of truth. Edit tokens here, the whole site updates.

   SETUP
   1. Paste this into your Kadence CHILD THEME style.css (or WPCode
      global CSS). It loads the fonts itself via the @import above —
      for best performance move that font URL into functions.php
      (wp_enqueue_style) later; it works as-is either way.
   2. Everything is namespaced .sl- so it never collides with Kadence.
   3. Each section = a <section class="sl-section ..."> pasted into a
      Custom HTML block inside a Kadence Section/Row.
   4. Pair with sl-scripts.js for count-up, scroll reveals, accordion.
   ============================================================ */

:root {
  /* ---- COLOR — andrewstorms.com Kadence Global Palette, mapped 1:1 ---- */
  /* Ink / text (Kadence "contrast") */
  --sl-ink:        #0C1A30;   /* darkest — primary text */
  --sl-ink-soft:   #41506A;   /* secondary text */
  --sl-muted:      #6C7A90;   /* captions / meta */

  /* Surfaces (Kadence "base") */
  --sl-bg:         #FFFFFF;   /* page background */
  --sl-surface:    #F7F9FC;   /* soft section background */
  --sl-surface-2:  #EEF2FA;   /* alt band (replaces old light-blue) */
  --sl-line:       #DDE3EC;   /* borders / dividers */

  /* Accents (Kadence "accent") */
  --sl-brand:      #1E56C0;   /* primary — buttons, links, eyebrow */
  --sl-brand-2:    #4C82E6;   /* lighter accent — emphasis, hovers */
  --sl-brand-deep: #0B2145;   /* deep navy accent */

  /* Dark sections */
  --sl-dark:       #0B2145;   /* deep navy band / hero base */
  --sl-on-dark:    #F7F9FC;   /* text on dark */

  /* State / notice colors (Kadence "notices") */
  --sl-success:#13612E; --sl-info:#1159AF; --sl-danger:#B82105;
  --sl-warning:#F7630C; --sl-amber:#F5A524;

  /* ---- TYPE — Seven Lifestyles type system ---- */
  --sl-font-head: "Archivo", system-ui, sans-serif;         /* headings + wordmark */
  --sl-font-body: "Hanken Grotesk", system-ui, sans-serif;  /* body */
  --sl-font-mono: "Space Mono", ui-monospace, monospace;    /* eyebrows, labels, buttons, stats */

  --sl-h1:  clamp(2.6rem, 1.5rem + 4.4vw, 4.6rem);
  --sl-h2:  clamp(1.9rem, 1.3rem + 2.4vw, 3rem);
  --sl-h3:  clamp(1.25rem, 1.05rem + 1vw, 1.6rem);
  --sl-lead: clamp(1.1rem, 1rem + 0.5vw, 1.3rem);
  --sl-body: 1.125rem;      /* 18px, matches source */
  --sl-eyebrow: 0.8rem;

  /* ---- SPACING ---- */
  --sl-space-xs:.5rem; --sl-space-sm:1rem; --sl-space-md:2rem;
  --sl-space-lg:3.5rem; --sl-space-xl:6rem;

  /* ---- LAYOUT ---- */
  --sl-container: 1240px;                             /* matches source --maxw */
  --sl-container-narrow: 820px;
  --sl-section-y: clamp(3.5rem, 2rem + 6vw, 7rem);
  --sl-gutter: clamp(1.25rem, 4vw, 2.5rem);

  /* ---- DETAIL — sharp / editorial, matching your aesthetic ---- */
  --sl-radius: 3px;
  --sl-radius-lg: 6px;
  --sl-shadow: 0 12px 34px -18px rgba(12,26,48,.22);
  --sl-transition:.25s ease;
}

/* ============================================================
   BASE  (scoped so it won't fight WordPress/Kadence)
   ============================================================ */
.sl-section, .sl-section * { box-sizing: border-box; }
.sl-section {
  font-family: var(--sl-font-body);
  color: var(--sl-ink);
  background: var(--sl-bg);
  padding-block: var(--sl-section-y);
  padding-inline: var(--sl-gutter);
  font-size: var(--sl-body);
  line-height: 1.6;
}
.sl-inner { width:100%; max-width:var(--sl-container); margin-inline:auto; }
.sl-inner.is-narrow { max-width: var(--sl-container-narrow); }

/* Section background variants */
.sl-section.is-surface   { background: var(--sl-surface); }
.sl-section.is-surface-2 { background: var(--sl-surface-2); }
.sl-section.is-dark      { background: var(--sl-dark); color: var(--sl-on-dark); }

/* ============================================================
   TYPOGRAPHY
   ============================================================ */
.sl-eyebrow {
  font-family: var(--sl-font-mono);
  font-size: var(--sl-eyebrow);
  letter-spacing: .18em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--sl-brand);
  margin: 0 0 var(--sl-space-sm);
}
.sl-h1 {
  font-family: var(--sl-font-head); font-size: var(--sl-h1);
  line-height:1.02; font-weight:800; letter-spacing:-.02em;
  margin:0 0 var(--sl-space-md);
}
.sl-h2 {
  font-family: var(--sl-font-head); font-size: var(--sl-h2);
  line-height:1.08; font-weight:800; letter-spacing:-.02em;
  margin:0 0 var(--sl-space-sm);
}
.sl-h3 {
  font-family: var(--sl-font-head); font-size: var(--sl-h3);
  line-height:1.2; font-weight:700; margin:0 0 var(--sl-space-xs);
}
/* <em> inside headings = accent, not italic (matches your H1 treatment) */
.sl-h1 em, .sl-h2 em { font-style: normal; color: var(--sl-brand); }
.sl-section.is-dark .sl-h1 em, .sl-section.is-dark .sl-h2 em { color: var(--sl-brand-2); }

.sl-lead { font-size:var(--sl-lead); line-height:1.5; color:var(--sl-ink-soft); margin:0 0 var(--sl-space-md); max-width:60ch; }
.sl-body { color: var(--sl-ink-soft); }
.sl-section.is-dark .sl-h1, .sl-section.is-dark .sl-h2, .sl-section.is-dark .sl-h3 { color: var(--sl-on-dark); }
.sl-section.is-dark .sl-lead, .sl-section.is-dark .sl-body { color: rgba(247,249,252,.82); }

/* ============================================================
   BUTTONS  (Space Mono, uppercase, sharp — matches your style)
   ============================================================ */
.sl-btn {
  display:inline-flex; align-items:center; gap:.5rem;
  font-family:var(--sl-font-mono); font-weight:700; font-size:.85rem;
  text-transform:uppercase; letter-spacing:.08em; line-height:1;
  padding:1.05rem 1.6rem; border-radius:var(--sl-radius);
  text-decoration:none; cursor:pointer;
  border:2px solid var(--sl-brand); background:var(--sl-brand); color:#fff;
  transition:transform var(--sl-transition), background var(--sl-transition), color var(--sl-transition);
}
.sl-btn:hover { transform:translateY(-2px); background:var(--sl-brand-2); border-color:var(--sl-brand-2); }
.sl-btn.is-ghost { background:transparent; color:var(--sl-ink); border-color:var(--sl-line); }
.sl-btn.is-ghost:hover { background:transparent; border-color:var(--sl-brand); color:var(--sl-brand); }
.sl-section.is-dark .sl-btn.is-ghost { color:var(--sl-on-dark); border-color:rgba(247,249,252,.4); }
.sl-section.is-dark .sl-btn.is-ghost:hover { border-color:#fff; color:#fff; }
/* Text-link CTA (the ".go" style) */
.sl-go {
  font-family:var(--sl-font-mono); font-size:.8rem; text-transform:uppercase;
  letter-spacing:.08em; color:var(--sl-brand); text-decoration:none;
  border-bottom:1px solid currentColor; padding-bottom:2px;
}
.sl-go:hover { color:var(--sl-brand-2); }

/* ============================================================
   LAYOUT HELPERS  (mobile-first: stacks, widens at breakpoints)
   ============================================================ */
.sl-grid { display:grid; gap:var(--sl-gutter); }
.sl-split { display:grid; grid-template-columns:1fr; gap:var(--sl-space-lg); align-items:center; }
.sl-split img { width:100%; height:auto; border-radius:var(--sl-radius-lg); display:block; }
.sl-card {
  background:var(--sl-bg); border:1px solid var(--sl-line);
  border-radius:var(--sl-radius-lg); padding:var(--sl-space-md);
}
@media (min-width:768px){
  .sl-grid.cols-2{grid-template-columns:repeat(2,1fr)}
  .sl-grid.cols-3{grid-template-columns:repeat(3,1fr)}
  .sl-split{grid-template-columns:1fr 1fr}
  .sl-split.image-right .sl-split__media{order:2}
}
@media (min-width:1024px){ .sl-grid.cols-4{grid-template-columns:repeat(4,1fr)} }

/* Scroll-reveal (paired with sl-scripts.js). Reduced-motion safe. */
@media (prefers-reduced-motion: no-preference){
  .sl-reveal{opacity:0; transform:translateY(16px); transition:opacity .6s ease, transform .6s ease}
  .sl-reveal.in{opacity:1; transform:none}
}

/* ============================================================
   SECTION MODULES  (one per section, added as we build)
   ------------------------------------------------------------
   01 — HERO
   ============================================================ */
.sl-hero {
  position:relative; min-height:88vh; display:grid; align-items:end;
  text-align:left; color:var(--sl-on-dark); background:var(--sl-dark);
  overflow:hidden; isolation:isolate;
}
.sl-hero__video{ position:absolute; inset:0; z-index:-2; overflow:hidden; }
.sl-hero__video iframe{
  position:absolute; top:50%; left:50%;
  width:100vw; height:56.25vw;            /* 16:9 cover */
  min-height:100%; min-width:177.78vh;
  transform:translate(-50%,-50%); border:0; pointer-events:none;
}
.sl-hero::before{
  content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(180deg, rgba(11,33,69,.35), rgba(11,33,69,.82));
}
.sl-hero .sl-inner{ padding-bottom:clamp(2rem,6vh,5rem); }
.sl-hero .sl-h1{ color:#fff; max-width:18ch; }
.sl-hero .sl-lead{ color:rgba(255,255,255,.9); max-width:56ch; }
.sl-hero__cta{ display:flex; flex-wrap:wrap; gap:.9rem; margin-top:var(--sl-space-md); }
@media (max-width:640px){ .sl-hero__eyebrow{ display:none; } }  /* eyebrow hidden on mobile, per source */

/* ------------------------------------------------------------
   02 — PROOF TICKER
   ------------------------------------------------------------ */
.sl-ticker{ display:grid; grid-template-columns:1fr; gap:var(--sl-space-lg); text-align:center; }
@media (min-width:768px){ .sl-ticker{ grid-template-columns:repeat(4,1fr); } }
.sl-tk__n{
  font-family:var(--sl-font-head); font-weight:800;
  font-size:clamp(2.6rem, 1.6rem + 3vw, 3.6rem);
  line-height:1; letter-spacing:-.02em; color:var(--sl-brand);
}
.sl-tk__label{
  display:block; margin-top:.7rem; font-family:var(--sl-font-mono);
  font-size:.78rem; text-transform:uppercase; letter-spacing:.12em;
  color:var(--sl-ink-soft); line-height:1.4;
}

/* 03 — NEXT SECTION appended here as we build... */