/* =========================================================
   KICKSTART FRAMEWORK V2
   Updated: May 2026
   Changes from V1:
   - Added Hero System section
   - Added grid-divider column variants to Grid System
   - Added card internals, model tags to Card System
   - Added callout-dark to Panel System
   - Added arrow list, trust pills to Utility System
   - Added Trust System section (2x2 grid, founding bar)
   - Added button variants: ghost, dark, outline-dark
   - Added insight and insight-dark to Card System
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Barlow:wght@400;600;700;800&display=swap');

/* =========================================================
   ROOT VARIABLES
   ========================================================= */

:root{

  /* BRAND COLOURS */
  --ks-orange:#E8920A;

  --ks-black:#1a1a1a;
  --ks-dark:#232323;
  --ks-dark-2:#2e2e2e;

  --ks-light:#f5f4f2;
  --ks-white:#ffffff;

  /* TEXT */
  --ks-text-dark:#444444;
  --ks-text-light:#cccccc;
  --ks-text-muted:#aaaaaa;
  --ks-text-subtle:#888888;

  /* BORDERS */
  --ks-border-light:#e8e6e1;
  --ks-border-dark:#3a3a3a;
  --ks-divider-dark:#2a2a2a;

  /* LAYOUT */
  --ks-container:1200px;
  --ks-container-md:1100px;
  --ks-container-sm:980px;
  --ks-container-lg:1400px;

  /* SPACING */
  --ks-section-padding:72px 60px;
  --ks-section-padding-mobile:48px 24px;

  /* RADIUS */
  --ks-radius:3px;

  /* TRANSITIONS */
  --ks-transition:0.2s ease;
}

/* =========================================================
   GLOBAL RESETS
   ========================================================= */

*,
*::before,
*::after{
  box-sizing:border-box;
}

body{
  font-family:'Barlow',sans-serif;
}

img{
  max-width:100%;
  height:auto;
}

/* =========================================================
   LAYOUT SYSTEM
   ========================================================= */

.ks-section{
  padding:var(--ks-section-padding);
}

.ks-container{
  max-width:var(--ks-container);
  margin:0 auto;
}

.ks-container-md{
  max-width:var(--ks-container-md);
  margin:0 auto;
}

.ks-container-sm{
  max-width:var(--ks-container-sm);
  margin:0 auto;
}

.ks-container-lg{
  max-width:var(--ks-container-lg);
  margin:0 auto;
}

/* =========================================================
   THEME SYSTEM
   ========================================================= */

.ks-dark{
  background:var(--ks-dark)!important;
  color:var(--ks-white)!important;
}

.ks-light{
  background:var(--ks-light)!important;
}

.ks-light *{
  color:var(--ks-text-dark)!important;
}

.ks-orange{
  background:var(--ks-orange)!important;
}

.ks-orange *{
  color:var(--ks-black)!important;
}

.ks-teal{
  background:#1a5f6f!important;
}

.ks-teal *{
  color:var(--ks-white)!important;
}

/* =========================================================
   TYPOGRAPHY SYSTEM
   ========================================================= */

.ks-label{
  display:inline-block;
  font-size:11px;
  font-weight:800;
  letter-spacing:2.5px;
  text-transform:uppercase;
  color:var(--ks-orange)!important;
  margin-bottom:16px;
}

.ks-heading-xl{
  font-size:38px;
  font-weight:800;
  line-height:1.2;
  margin:0 0 20px;
  color:inherit!important;
}

.ks-heading-lg{
  font-size:32px;
  font-weight:800;
  line-height:1.2;
  margin:0 0 18px;
  color:inherit!important;
}

.ks-heading-md{
  font-size:24px;
  font-weight:800;
  line-height:1.3;
  margin:0 0 16px;
  color:inherit!important;
}

.ks-text{
  font-size:16px;
  line-height:1.75;
  color:inherit!important;
}

.ks-text-muted{
  color:#b8b8b8!important;
}

.ks-text-dark{
  color:var(--ks-text-dark)!important;
}

/* =========================================================
   HERO SYSTEM
   New in V2 — reusable across all brand and product pages
   ========================================================= */

/* Two-column hero layout — 1.1fr content / 0.9fr image */
.ks-hero-grid {
  display: grid !important;
  grid-template-columns: 1.1fr 0.9fr !important;
  gap: 64px !important;
  align-items: center !important;
}

/* Dark inset positioning panel — orange left border */
.ks-hero-panel {
  font-size: 15px !important;
  font-weight: 600 !important;
  line-height: 1.65 !important;
  color: #ffffff !important;
  border-left: 3px solid #E8920A !important;
  background: #232323 !important;
  padding: 14px 18px !important;
  margin: 0 0 32px !important;
}

/* CTA button row */
.ks-hero-ctas {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 12px !important;
  margin-bottom: 40px !important;
  list-style: none !important;
  padding: 0 !important;
  margin-left: 0 !important;
}

.ks-hero-ctas li {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

.ks-hero-ctas li::before { display:none!important; content:none!important }
.ks-hero-ctas li::marker { display:none!important; content:none!important }

/* Trust pills row */
.ks-trust-pills {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

.ks-trust-pills li {
  list-style: none !important;
  margin: 0 !important;
  padding: 3px 10px !important;
  background: #2e2e2e !important;
  border: 1px solid #3a3a3a !important;
  color: #cccccc !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  border-radius: 2px !important;
}

.ks-trust-pills li::before { display:none!important; content:none!important }
.ks-trust-pills li::marker { display:none!important; content:none!important }

/* Trust pills on orange sections — dark pill, orange text */
.ks-trust-pills-orange li {
  background: #1a1a1a !important;
  color: #E8920A !important;
  border-color: #1a1a1a !important;
}

/* Hero image */
.ks-hero-img {
  width: 100% !important;
  height: auto !important;
  display: block !important;
  border-radius: 3px !important;
  border: 1px solid #2a2a2a !important;
}

/* =========================================================
   GRID SYSTEM
   ========================================================= */

.ks-grid{
  display:grid !important;
  gap:32px !important;
}

.ks-grid-2{
  grid-template-columns:repeat(2,1fr) !important;
}

.ks-grid-3{
  grid-template-columns:repeat(3,1fr) !important;
}

.ks-grid-4{
  grid-template-columns:repeat(4,1fr) !important;
}

.ks-grid-sidebar{
  grid-template-columns:1fr 2fr !important;
}

/* Orange gap divider grid — base */
.ks-grid-divider {
  display: grid !important;
  gap: 2px !important;
  background: #E8920A !important;
}

/* Column variants — combine with ks-grid-divider */
.ks-grid-divider-2 {
  grid-template-columns: repeat(2, 1fr) !important;
}

.ks-grid-divider-3 {
  grid-template-columns: repeat(3, 1fr) !important;
}

.ks-grid-divider-4 {
  grid-template-columns: repeat(4, 1fr) !important;
}

/* =========================================================
   CARD SYSTEM
   ========================================================= */

.ks-card{
  background:var(--ks-white)!important;
  border-radius:var(--ks-radius)!important;
  padding:32px!important;
  position:relative!important;
}

.ks-card-dark{
  background:var(--ks-dark-2)!important;
}

.ks-card-dark *{
  color:var(--ks-white)!important;
}

.ks-card-light{
  background:var(--ks-white)!important;
}

.ks-card-light *{
  color:var(--ks-text-dark)!important;
}

.ks-card-accent{
  border-top:4px solid var(--ks-orange)!important;
}

.ks-card-title{
  font-size:22px!important;
  font-weight:800!important;
  line-height:1.3!important;
  margin:0 0 16px!important;
}

.ks-card-text{
  font-size:15px!important;
  line-height:1.75!important;
  margin:0!important;
}

/* Card number label — Category 01, Question 02 etc */
.ks-card-num {
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 2px !important;
  text-transform: uppercase !important;
  color: #E8920A !important;
  margin: 0 0 8px !important;
}

/* Card title — smaller than ks-card-title, used inside content cards */
.ks-card-title-sm {
  font-size: 18px !important;
  font-weight: 800 !important;
  line-height: 1.3 !important;
  margin: 0 0 12px !important;
}

/* Card body text — slightly smaller than ks-text */
.ks-card-body {
  font-size: 14px !important;
  line-height: 1.75 !important;
  margin: 0 0 12px !important;
}

/* Model / product tag pills inside cards */
.ks-tags {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
  list-style: none !important;
  padding: 0 !important;
  margin: 0 0 14px !important;
}

.ks-tags li {
  list-style: none !important;
  margin: 0 !important;
  padding: 3px 9px !important;
  background: #f5f4f2 !important;
  border: 1px solid #e0deda !important;
  color: #444444 !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  border-radius: 2px !important;
}

.ks-tags li::before { display:none!important; content:none!important }
.ks-tags li::marker { display:none!important; content:none!important }

/* Insight box — light section cards */
.ks-insight {
  background: #f5f4f2 !important;
  border-left: 3px solid #E8920A !important;
  padding: 12px 14px !important;
  font-size: 13px !important;
  font-style: italic !important;
  line-height: 1.65 !important;
  color: #555555 !important;
}

/* Insight box — dark section cards */
.ks-insight-dark {
  background: #1a1a1a !important;
  border-left: 3px solid #E8920A !important;
  padding: 12px 14px !important;
  font-size: 13px !important;
  font-style: italic !important;
  line-height: 1.65 !important;
  color: #aaaaaa !important;
}

/* =========================================================
   BUTTON SYSTEM
   ========================================================= */

.ks-btn{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  padding:16px 26px!important;
  font-size:15px!important;
  font-weight:700!important;
  text-decoration:none!important;
  border-radius:var(--ks-radius)!important;
  transition:all var(--ks-transition)!important;
  cursor:pointer!important;
  border:2px solid transparent!important;
}

/* Primary — orange, used on dark sections */
.ks-btn-primary{
  background:var(--ks-orange)!important;
  color:var(--ks-black)!important;
}

.ks-btn-primary:hover{
  background:#ff9f12!important;
}

/* Outline — orange border, used on light sections */
.ks-btn-outline{
  background:transparent!important;
  border:2px solid var(--ks-orange)!important;
  color:var(--ks-orange)!important;
}

.ks-btn-outline:hover{
  background:var(--ks-orange)!important;
  color:var(--ks-black)!important;
}

/* Ghost — white border, used as secondary on dark/hero sections */
.ks-btn-ghost {
  background: transparent !important;
  border: 2px solid rgba(255,255,255,0.35) !important;
  color: #ffffff !important;
}

.ks-btn-ghost:hover {
  border-color: rgba(255,255,255,0.7) !important;
}

/* Dark — dark background orange text, primary button on orange CTA sections */
/* NOTE: Also add inline style="background:#1a1a1a!important;color:#E8920A!important;
   border-color:#1a1a1a!important;" on the <a> tag — WordPress strips this class */
.ks-btn-dark {
  background: #1a1a1a !important;
  color: #E8920A !important;
  border-color: #1a1a1a !important;
}

.ks-btn-dark:hover {
  background: #2e2e2e !important;
}

/* Outline dark — secondary button on orange CTA sections */
.ks-btn-outline-dark {
  background: transparent !important;
  border: 2px solid #1a1a1a !important;
  color: #1a1a1a !important;
}

.ks-btn-outline-dark:hover {
  background: #1a1a1a !important;
  color: #E8920A !important;
}

/* =========================================================
   SECTION HEADER SYSTEM
   ========================================================= */

.ks-section-header{
  margin-bottom:36px!important;
}

.ks-section-header-center{
  text-align:center!important;
}

.ks-section-intro{
  max-width:760px!important;
  font-size:17px!important;
  line-height:1.8!important;
  margin-top:18px!important;
}

.ks-section-header-center .ks-section-intro{
  margin-left:auto!important;
  margin-right:auto!important;
}

.ks-accent-line{
  width:80px!important;
  height:4px!important;
  background:var(--ks-orange)!important;
  margin-top:18px!important;
}

.ks-section-header-center .ks-accent-line{
  margin-left:auto!important;
  margin-right:auto!important;
}

/* =========================================================
   FAQ SYSTEM
   ========================================================= */

.ks-faq{
  display:flex!important;
  flex-direction:column!important;
  gap:18px!important;
}

.ks-faq-item{
  background:var(--ks-white)!important;
  border-top:4px solid var(--ks-orange)!important;
  padding:28px 30px!important;
  border-radius:var(--ks-radius)!important;
}

.ks-faq-question{
  font-size:20px!important;
  font-weight:800!important;
  line-height:1.4!important;
  cursor:pointer!important;
  margin:0!important;
  color:var(--ks-black)!important;
}

.ks-faq-answer{
  display:none!important;
  margin-top:18px!important;
  font-size:15px!important;
  line-height:1.8!important;
  color:var(--ks-text-dark)!important;
}

.ks-faq-item.active .ks-faq-answer{
  display:block!important;
}

/* =========================================================
   PANEL SYSTEM
   ========================================================= */

.ks-panel{
  padding:48px!important;
  border-radius:var(--ks-radius)!important;
}

.ks-panel-dark{
  background:var(--ks-dark-2)!important;
}

.ks-panel-dark *{
  color:var(--ks-white)!important;
}

.ks-panel-light{
  background:var(--ks-white)!important;
}

.ks-panel-light *{
  color:var(--ks-text-dark)!important;
}

.ks-panel-teal{
  background:#1a5f6f!important;
}

.ks-panel-teal *{
  color:var(--ks-white)!important;
}

/* Dark callout — "who should not buy" and similar honest advisory panels */
.ks-callout-dark {
  background: #232323 !important;
  border-left: 4px solid #E8920A !important;
  padding: 20px 24px !important;
  margin-bottom: 32px !important;
}

.ks-callout-dark p {
  font-size: 15px !important;
  line-height: 1.75 !important;
  color: #cccccc !important;
  margin: 0 !important;
}

.ks-callout-dark strong {
  color: #ffffff !important;
}

/* =========================================================
   TRUST SYSTEM
   New in V2 — Why Kickstart section components
   ========================================================= */

/* Two-column image + content layout for Why Kickstart sections */
.ks-trust-layout {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 64px !important;
  align-items: center !important;
}

/* 2x2 trust point grid with orange gap divider */
.ks-trust-grid-2x2 {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 2px !important;
  background: #E8920A !important;
  margin: 28px 0 !important;
}

.ks-trust-cell {
  background: #232323 !important;
  padding: 24px 20px !important;
}

.ks-trust-cell-title {
  font-size: 14px !important;
  font-weight: 800 !important;
  color: #ffffff !important;
  margin: 0 0 8px !important;
  line-height: 1.3 !important;
}

.ks-trust-cell-text {
  font-size: 13px !important;
  line-height: 1.65 !important;
  color: #aaaaaa !important;
  margin: 0 !important;
}

/* Founding year bar */
.ks-founding-bar {
  background: #E8920A !important;
  padding: 14px 20px !important;
  border-radius: 3px !important;
  display: flex !important;
  align-items: center !important;
  gap: 16px !important;
}

.ks-founding-bar-year {
  font-size: 28px !important;
  font-weight: 800 !important;
  color: #1a1a1a !important;
  line-height: 1 !important;
  white-space: nowrap !important;
}

.ks-founding-bar-text {
  font-size: 14px !important;
  font-weight: 600 !important;
  color: #1a1a1a !important;
  line-height: 1.5 !important;
  margin: 0 !important;
}

/* Contact line below founding bar */
.ks-trust-contact {
  margin-top: 20px !important;
  font-size: 14px !important;
  color: #aaaaaa !important;
  line-height: 1.65 !important;
}

.ks-trust-contact strong {
  color: #ffffff !important;
}

.ks-trust-contact a {
  color: #E8920A !important;
  text-decoration: none !important;
  font-weight: 700 !important;
}

/* =========================================================
   UTILITY SYSTEM
   ========================================================= */

.ks-link-arrow{
  display:inline-flex!important;
  align-items:center!important;
  font-size:15px!important;
  font-weight:700!important;
  color:var(--ks-orange)!important;
  text-decoration:none!important;
  transition:all var(--ks-transition)!important;
}

/* Arrow list — → prefix, used in cards and room size sections */
.ks-arrow-list {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
}

.ks-arrow-list li {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 0 0 14px !important;
  font-size: 14px !important;
  position: relative !important;
}

.ks-arrow-list li::before {
  content: '→' !important;
  position: absolute !important;
  left: 0 !important;
  color: #E8920A !important;
  font-size: 12px !important;
}

.ks-arrow-list li::marker { display:none!important; content:none!important }

/* Arrow list — light text variant for dark sections */
.ks-arrow-list-light li {
  color: #cccccc !important;
}

/* Arrow list — dark text variant for light sections */
.ks-arrow-list-dark li {
  color: #444444 !important;
}

.ks-divider{
  height:1px!important;
  background:var(--ks-divider-dark)!important;
  margin:48px 0!important;
}

.ks-flex{
  display:flex!important;
}

.ks-flex-between{
  justify-content:space-between!important;
}

.ks-flex-center{
  align-items:center!important;
}

.ks-flex-wrap{
  flex-wrap:wrap!important;
}

.ks-text-center{
  text-align:center!important;
}

.ks-mb-0{
  margin-bottom:0!important;
}

/* =========================================================
   MOBILE RESPONSIVE
   ========================================================= */

@media(max-width:900px){

  .ks-section{
    padding:var(--ks-section-padding-mobile);
  }

  .ks-heading-xl{
    font-size:30px;
  }

  .ks-heading-lg{
    font-size:26px;
  }

  .ks-heading-md{
    font-size:22px;
  }

  .ks-grid-2,
  .ks-grid-3,
  .ks-grid-4,
  .ks-grid-sidebar{
    grid-template-columns:1fr!important;
  }

  /* Divider grids collapse on mobile */
  .ks-grid-divider-2,
  .ks-grid-divider-3,
  .ks-grid-divider-4 {
    grid-template-columns: 1fr !important;
  }

  /* Hero grid collapses — image moves above content */
  .ks-hero-grid {
    grid-template-columns: 1fr !important;
    gap: 40px !important;
  }

  /* Trust layout collapses */
  .ks-trust-layout {
    grid-template-columns: 1fr !important;
    gap: 40px !important;
  }

  .ks-trust-grid-2x2 {
    grid-template-columns: 1fr !important;
  }

  .ks-card{
    padding:24px!important;
  }

  .ks-card-title{
    font-size:20px!important;
  }

  .ks-btn{
    width:100%!important;
  }

  .ks-faq-item{
    padding:24px!important;
  }

  .ks-faq-question{
    font-size:18px!important;
  }

  .ks-panel{
    padding:32px!important;
  }

}

/* =========================================================
   WORDPRESS OVERRIDE NOTES
   =========================================================
   1. Final CTA section — use <div> not <section> for orange
      background blocks. WordPress overrides background on
      <section> elements. Always use !important on background.

   2. Trust pills / list items — add BOTH ::before AND ::marker
      suppression on all <li> elements. WordPress themes inject
      bullets via ::marker as well as ::before.

   3. Grid layouts inside list items — use <span> with
      display:block!important instead of <p> tags inside <li>.
      WordPress injects paragraph margins that break card layouts.

   4. Every layout-critical property needs !important — grid-
      template-columns, display:grid, background, padding, margin
      on any element WordPress theme CSS might touch.

   5. Buttons on orange CTA sections — ks-btn-dark needs inline
      !important overrides to prevent WordPress theme stripping
      styles. Always add:
      style="background:#1a1a1a!important;color:#E8920A!important;
      border-color:#1a1a1a!important;"
      directly on the <a> tag as well as the framework class.

   6. Trust pills on orange background — use background:#1a1a1a
      and color:#E8920A. Semi-transparent rgba blends into orange
      and disappears. Always use solid dark on orange sections.
      Use .ks-trust-pills-orange modifier class.
   ========================================================= */