/* ============================================================
   COMPUTER CENTRAL MSP THEME — DEMO CSS
   Brand: Green #1E8C1E | Dark #111111 | White #FFFFFF
============================================================ */

:root {
  --cc-green:        #1E8C1E;
  --cc-green-dark:   #156815;
  --cc-green-light:  #EDFAF0;
  --cc-green-mid:    #2BA82B;
  --cc-black:        #111111;
  --cc-dark:         #1A1A1A;
  --cc-dark-surface: #242424;
  --cc-gray-900:     #1F2937;
  --cc-gray-700:     #374151;
  --cc-gray-500:     #6B7280;
  --cc-gray-300:     #D1D5DB;
  --cc-gray-100:     #F3F4F6;
  --cc-white:        #FFFFFF;
  --cc-off-white:    #EEF0F3;   /* was #F9FAFB — darkened for real section contrast */
  --cc-border:       #D8DCE3;   /* slightly darker to match new off-white */
  --clr-text:        #111827;
  --clr-text-muted:  #6B7280;
  --clr-text-light:  #9CA3AF;
  --clr-danger:      #DC2626;
  --clr-warning:     #D97706;
  --clr-success:     #16A34A;
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --section-pad: clamp(4rem, 8vw, 6rem);
  --container: 1180px;
  --r-sm: 6px; --r-md: 12px; --r-lg: 20px; --r-xl: 28px;
  --shadow-sm: 0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.05);
  --shadow-md: 0 4px 16px rgba(0,0,0,.10), 0 2px 6px rgba(0,0,0,.07);
  --shadow-lg: 0 10px 40px rgba(0,0,0,.14), 0 4px 12px rgba(0,0,0,.09);
  --shadow-accent: 0 8px 32px rgba(30,140,30,.25);
  --t-fast: 200ms ease;
  --t-mid:  350ms ease;

  /* ── CCG design-token aliases ──────────────────────────────────────────
     Referenced by elementor-overrides.css, integration stylesheets, and
     theme-style-sync.php.  Maps the --ccg-* namespace onto the --cc-*
     values already defined above so there is a single source of truth.
  ──────────────────────────────────────────────────────────────────────── */
  /* Colours */
  --ccg-color-primary:        var(--cc-green);
  --ccg-color-primary-dark:   var(--cc-green-dark);
  --ccg-color-secondary:      #E8451A;
  --ccg-color-secondary-dark: #C4330E;
  --ccg-color-accent:         #00A8E8;
  --ccg-color-charcoal:       var(--cc-gray-900);
  --ccg-color-light-gray:     var(--cc-gray-300);
  --ccg-color-mid-gray:       var(--cc-gray-300);
  --ccg-color-white:          var(--cc-white);
  --ccg-color-off-white:      var(--cc-off-white);
  /* Typography */
  --ccg-font-heading: 'Inter', -apple-system, sans-serif;
  --ccg-font-body:    'Inter', -apple-system, sans-serif;
  --ccg-weight-semibold: 600;
  --ccg-weight-bold:     700;
  /* Leading */
  --ccg-leading-tight:  1.2;
  --ccg-leading-normal: 1.6;
  /* Radii */
  --ccg-radius-sm:  var(--r-sm);
  --ccg-radius-md:  var(--r-md);
  --ccg-radius-lg:  var(--r-lg);
  --ccg-radius-xl:  var(--r-xl);
  --ccg-radius-2xl: 32px;
  /* Layout */
  --ccg-container-xl: var(--container);
  /* Z-index scale */
  --ccg-z-base:    1;
  --ccg-z-raised:  10;
  --ccg-z-sticky:  100;
  --ccg-z-overlay: 200;
  --ccg-z-modal:   300;
  /* Transitions */
  --ccg-transition-fast: var(--t-fast);
  --ccg-transition-base: var(--t-mid);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
/* scroll-behavior: smooth removed from html — caused browser to auto-scroll
   to #contact (or any hash fragment) on page load, bypassing the hero.
   Smooth scrolling for anchor clicks is handled explicitly in app.js via
   window.scrollTo({ behavior:'smooth' }) so click-navigation still animates. */
html { scroll-behavior: auto; }
body { font-family: var(--font-sans); color: var(--clr-text); background: var(--cc-white); -webkit-font-smoothing: antialiased; line-height: 1.6; }

/* ═══════════════════════════════════════════════════════════════════════
   GLOBAL SECTION CONTRAST SYSTEM
   Every interior page section uses one of three tiers:
     .cc-section--white  → #FFFFFF  (pure white)
     .cc-section--light  → #EEF0F3  (visibly grey — NOT near-white)
     .cc-section--dark   → var(--cc-dark)  (near-black)
   Sections must NEVER share the same tier adjacently.
   Apply a top border hairline on light sections to reinforce the edge.
═══════════════════════════════════════════════════════════════════════ */
.cc-section--white {
  background: var(--cc-white);
}
.cc-section--light {
  background: var(--cc-off-white);
  border-top: 1px solid var(--cc-border);
  border-bottom: 1px solid var(--cc-border);
}
.cc-section--dark {
  background: var(--cc-dark);
}

/* ═══════════════════════════════════════════════════════════════════════
   PER-PAGE SECTION CONTRAST — all page templates
   Enforces white / off-white alternation for every section that doesn't
   have an explicit background in its own template <style> block.
   Off-white uses --cc-off-white (#EEF0F3) + hairline borders so the
   edge between adjacent sections is always visible.
═══════════════════════════════════════════════════════════════════════ */

/* ── Service Plans (/service-plans/) ── */
/* dark hero → white (plans) → off-white (addons) → white (right-fit) → dark gradient */
.sp-section                { background: var(--cc-white); }
.sp-section--offwhite      { background: var(--cc-off-white);
                              border-top: 1px solid var(--cc-border);
                              border-bottom: 1px solid var(--cc-border); }

/* ── About (/about/) ── */
/* dark hero → white → white → off-white → white → off-white → dark CTA */
.ab-section                { background: var(--cc-white); }
.ab-section--alt           { background: var(--cc-off-white);
                              border-top: 1px solid var(--cc-border);
                              border-bottom: 1px solid var(--cc-border); }

/* ── Tech Stack (/tech-stack/) ── */
/* dark hero → dark warranty band → off-white → white → dark CTA */
.os-section                { background: var(--cc-white); }
.os-section--alt           { background: var(--cc-off-white);
                              border-top: 1px solid var(--cc-border);
                              border-bottom: 1px solid var(--cc-border); }

/* ── Remote Support (/remote-support/) ── */
/* dark hero → off-white (rs-main) → white (rs-how)                    */
/* rs-main and rs-how already declare backgrounds in the template;      */
/* these rules add the missing top/bottom border on rs-main.            */
.rs-main                   { border-top: 1px solid var(--cc-border);
                              border-bottom: 1px solid var(--cc-border); }

/* ── Contact (/contact/) ── */
/* dark hero → dark CTA band → white (ct-main) */
.ct-main                   { background: var(--cc-white); }

/* ── Schedule (/schedule/) ── */
/* dark hero → off-white (cc-scheduling) */
.cc-scheduling             { background: var(--cc-off-white);
                              border-top: 1px solid var(--cc-border); }

/* ── Shared cross-page sections ── */
/* cc-plans appears on service-plans page (after dark hero) — white     */
.cc-plans                  { background: var(--cc-white); }
/* cc-services appears in multiple contexts — default white             */
.cc-services               { background: var(--cc-white); }

img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
button { font-family: var(--font-sans); cursor: pointer; }
select { font-family: var(--font-sans); }

/* ── GLOBAL SELECT ARROW — clean custom chevron on all <select> ── */
select.cc-input,
.nf-form-cont select,
.cr-input[type=select],
select.cr-input {
  appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%236B7280' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  padding-right: 2.5rem !important;
}

/* ── CONTAINER ── */
.cc-container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: clamp(1rem, 4vw, 2rem); }
.cc-text-center { text-align: center; }
.cc-text-green { color: var(--cc-green); }

/* ── BUTTONS ── */
.cc-btn {
  display: inline-flex; align-items: center; gap: .5rem;
  font-weight: 700; font-size: .9375rem; letter-spacing: -.01em;
  border-radius: var(--r-sm); border: 2px solid transparent;
  transition: all var(--t-fast); text-decoration: none; cursor: pointer; white-space: nowrap;
}
.cc-btn--primary { background: var(--cc-green); color: #fff; border-color: var(--cc-green); padding: .75rem 1.625rem; }
.cc-btn--primary:hover { background: var(--cc-green-dark); border-color: var(--cc-green-dark); transform: translateY(-1px); box-shadow: var(--shadow-accent); }
.cc-btn--outline { background: transparent; color: var(--cc-green); border-color: var(--cc-green); padding: .75rem 1.625rem; }
.cc-btn--outline:hover { background: var(--cc-green); color: #fff; transform: translateY(-1px); }
.cc-btn--dark { background: var(--cc-dark); color: #fff; border-color: var(--cc-dark); padding: .75rem 1.625rem; }
.cc-btn--dark:hover { background: #000; transform: translateY(-1px); }
.cc-btn--ghost-light { background: rgba(255,255,255,.1); color: #fff; border-color: rgba(255,255,255,.3); padding: .75rem 1.625rem; }
.cc-btn--ghost-light:hover { background: rgba(255,255,255,.2); border-color: rgba(255,255,255,.5); }
.cc-btn--sm  { padding: .5rem 1.1rem; font-size: .875rem; }
.cc-btn--md  { padding: .625rem 1.375rem; font-size: .9375rem; }
.cc-btn--lg  { padding: .875rem 1.875rem; font-size: 1rem; }
.cc-btn--xl  { padding: 1rem 2.25rem; font-size: 1.0625rem; }
.cc-btn--full { width: 100%; justify-content: center; }

/* ── SECTION LABELS ── */
.cc-section-label {
  display: inline-flex; align-items: center; gap: .4rem;
  background: var(--cc-green-light); color: var(--cc-green);
  font-size: .8125rem; font-weight: 700; padding: .375rem 1rem;
  border-radius: 999px; border: 1px solid rgba(30,140,30,.2);
  margin-bottom: 1rem; text-transform: uppercase; letter-spacing: .08em;
}
.cc-section-title { font-size: clamp(1.75rem, 4vw, 2.5rem); font-weight: 800; letter-spacing: -.04em; line-height: 1.15; margin-bottom: .875rem; color: var(--cc-black); }
.cc-section-sub   { font-size: 1.0625rem; color: var(--clr-text-muted); line-height: 1.65; max-width: 600px; margin-inline: auto; }

/* ── TOP BAR ── */
.cc-topbar {
  background: #0a0a0a;
  padding: .35rem 0;
  font-size: .775rem;
  color: rgba(255,255,255,.5);
  border-bottom: 1px solid rgba(255,255,255,.06);
  letter-spacing: .01em;
}
.cc-topbar__inner { display: flex; justify-content: space-between; align-items: center; }
.cc-topbar__left { display: flex; align-items: center; gap: .4rem; }
.cc-topbar__left i { color: var(--cc-green-mid); font-size: .7rem; }
.cc-topbar__right { display: flex; align-items: center; gap: 1.25rem; }
.cc-topbar__right a {
  color: rgba(255,255,255,.5);
  display: flex; align-items: center; gap: .35rem;
  transition: color var(--t-fast);
  font-size: .775rem;
}
.cc-topbar__right a i { font-size: .7rem; color: rgba(255,255,255,.3); }
.cc-topbar__right a:hover { color: rgba(255,255,255,.9); }
/* Topbar divider */
.cc-topbar__divider { width: 1px; height: 14px; background: rgba(255,255,255,.1); }
/* Topbar contact button */
.cc-topbar__contact-btn {
  display: inline-flex; align-items: center; gap: .35rem;
  color: var(--cc-green-mid) !important;
  font-weight: 600; font-size: .775rem;
  background: rgba(30,140,30,.12);
  border: 1px solid rgba(30,140,30,.25);
  border-radius: 5px;
  padding: .2rem .625rem;
  transition: background var(--t-fast), color var(--t-fast);
}
.cc-topbar__contact-btn:hover { background: rgba(30,140,30,.22) !important; color: #fff !important; }
/* Footer contact button */
.cc-footer__contact-btn {
  display: inline-flex; align-items: center; gap: .4rem;
  color: rgba(255,255,255,.65);
  font-size: .875rem;
  transition: color var(--t-fast);
}
.cc-footer__contact-btn:hover { color: var(--cc-green-mid); }
/* Topbar social icons */
.cc-topbar__social { display: flex; align-items: center; gap: .3rem; }
.cc-topbar__social-link {
  width: 22px; height: 22px; border-radius: 4px;
  display: flex; align-items: center; justify-content: center;
  color: rgba(255,255,255,.35); font-size: .65rem;
  transition: color var(--t-fast), background var(--t-fast);
}
.cc-topbar__social-link:hover { color: rgba(255,255,255,.9); background: rgba(255,255,255,.08); }
/* Footer social icons */
.cc-footer__social { display: flex; align-items: center; gap: .5rem; margin-top: 1.25rem; flex-wrap: wrap; }
.cc-footer__social-link {
  width: 36px; height: 36px; border-radius: 8px;
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1);
  display: flex; align-items: center; justify-content: center;
  color: rgba(255,255,255,.5); font-size: .875rem;
  transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast), transform var(--t-fast);
}
.cc-footer__social-link:hover {
  background: var(--social-color, var(--cc-green));
  border-color: var(--social-color, var(--cc-green));
  color: #fff !important;
  transform: translateY(-2px);
}

/* ── HEADER ── */
.cc-header {
  position: sticky; top: 0; z-index: 800;
  background: rgba(10,10,10,.96);
  backdrop-filter: blur(20px) saturate(1.8);
  -webkit-backdrop-filter: blur(20px) saturate(1.8);
  border-bottom: 1px solid rgba(255,255,255,.08);
  transition: box-shadow var(--t-fast), border-color var(--t-fast);
}
.cc-header.is-scrolled {
  box-shadow: 0 1px 40px rgba(0,0,0,.5);
  border-bottom-color: rgba(255,255,255,.06);
}
.cc-header__inner { display: flex; align-items: center; gap: 2rem; height: 66px; }

/* Logo */
.cc-logo { display: flex; align-items: center; gap: .7rem; text-decoration: none; flex-shrink: 0; }
.cc-logo__img { width: 42px; height: 42px; border-radius: 10px; object-fit: cover; }
.cc-logo__text span { display: block; font-size: .6875rem; font-weight: 500; color: rgba(255,255,255,.4); line-height: 1; letter-spacing: .04em; text-transform: uppercase; }
.cc-logo__text strong { display: block; font-size: 1.0625rem; font-weight: 800; color: #fff; letter-spacing: -.03em; line-height: 1.15; }

/* Nav */
.cc-nav { flex: 1; display: flex; justify-content: center; }
.cc-nav__menu { display: flex; align-items: center; gap: .125rem; }
.cc-nav__item { position: relative; }
.cc-nav__link {
  display: flex; align-items: center; gap: .3rem;
  padding: .45rem .8rem; font-size: .875rem; font-weight: 500;
  color: rgba(255,255,255,.6); border-radius: 8px;
  transition: color var(--t-fast), background var(--t-fast);
  letter-spacing: -.005em;
  position: relative;
}
.cc-nav__link:hover { color: #fff; background: rgba(255,255,255,.07); }
.cc-nav__link.active { color: #fff; background: rgba(255,255,255,.08); }
/* Subtle underline on active */
.cc-nav__link.active::after {
  content: ''; position: absolute; bottom: 4px; left: 50%; transform: translateX(-50%);
  width: 16px; height: 2px; background: var(--cc-green-mid); border-radius: 2px;
}

/* Actions */
.cc-header__actions { display: flex; align-items: center; gap: .625rem; margin-left: auto; flex-shrink: 0; }
.cc-header__phone {
  display: flex; align-items: center; gap: .35rem;
  font-size: .8125rem; font-weight: 600;
  color: rgba(255,255,255,.55);
  transition: color var(--t-fast);
}
.cc-header__phone:hover { color: rgba(255,255,255,.9); }
.cc-header__phone i { font-size: .7rem; color: var(--cc-green-mid); }

/* Primary CTA */
.cc-header .cc-btn--primary {
  background: var(--cc-green);
  border-color: var(--cc-green);
  color: #fff;
  font-size: .8125rem;
  padding: .5rem 1.1rem;
  border-radius: 8px;
  font-weight: 700;
  letter-spacing: -.01em;
}
.cc-header .cc-btn--primary:hover {
  background: var(--cc-green-dark);
  border-color: var(--cc-green-dark);
  transform: translateY(-1px);
  box-shadow: 0 4px 20px rgba(30,140,30,.35);
}

/* Hamburger */
.cc-hamburger { display: none; flex-direction: column; gap: 4px; background: none; border: none; padding: .5rem; cursor: pointer; }
.cc-hamburger span { display: block; width: 20px; height: 2px; background: rgba(255,255,255,.8); border-radius: 2px; transition: all .3s ease; }

/* ── NAV DROPDOWN ── */
.cc-nav__item--has-drop { position: relative; }
.cc-nav__link--drop { cursor: pointer; }
.cc-nav__link--drop .fa-chevron-down { color: rgba(255,255,255,.3); transition: transform var(--t-fast); }
.cc-nav__item--has-drop:hover .fa-chevron-down { transform: rotate(180deg); }

/* Remote Support pill */
.cc-nav__link--support {
  color: var(--cc-green-mid) !important;
  font-weight: 600 !important;
  background: rgba(30,140,30,.12) !important;
  border: 1px solid rgba(30,140,30,.25);
  border-radius: 8px;
  padding: .45rem .875rem !important;
  letter-spacing: -.01em;
  transition: background var(--t-fast), border-color var(--t-fast), color var(--t-fast), box-shadow var(--t-fast) !important;
}
.cc-nav__link--support i { font-size: .75rem; }
.cc-nav__link--support:hover,
.cc-nav__link--support.active {
  background: rgba(30,140,30,.22) !important;
  border-color: rgba(30,140,30,.5) !important;
  color: #fff !important;
  box-shadow: 0 0 16px rgba(30,140,30,.2);
}
/* No underline dot on support pill */
.cc-nav__link--support.active::after { display: none; }

/* Client Portal pill */
.cc-nav__link--portal {
  color: rgba(255,255,255,.75) !important;
  font-weight: 600 !important;
  background: rgba(255,255,255,.07) !important;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 8px;
  padding: .45rem .875rem !important;
  letter-spacing: -.01em;
  transition: background var(--t-fast), border-color var(--t-fast), color var(--t-fast) !important;
}
.cc-nav__link--portal i { font-size: .8rem; }
.cc-nav__link--portal:hover,
.cc-nav__link--portal.active {
  background: rgba(255,255,255,.13) !important;
  border-color: rgba(255,255,255,.28) !important;
  color: #fff !important;
}
/* No underline dot on portal pill */
.cc-nav__link--portal.active::after { display: none; }

/* Dropdown */
.cc-nav__drop {
  display: none; position: absolute; top: 100%; left: 50%;
  transform: translateX(-50%);
  min-width: 210px;
  background: #141414;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 12px;
  box-shadow: 0 16px 50px rgba(0,0,0,.6);
  padding: .375rem 0;
  /* 12px invisible top padding bridges the gap between nav link and dropdown
     so the mouse never leaves the hover zone mid-travel */
  padding-top: 12px;
  margin-top: -4px; /* pull it up slightly so it visually sits close */
  z-index: 200;
  animation: fadeUp .18s ease;
}
/* Invisible pseudo bridge above the dropdown covers the seam */
.cc-nav__drop::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 12px; /* matches padding-top */
  background: transparent;
}
.cc-nav__item--has-drop:hover .cc-nav__drop,
.cc-nav__item--has-drop:focus-within .cc-nav__drop { display: block; }
.cc-nav__drop-link {
  display: flex; align-items: center; gap: .6rem;
  padding: .6rem 1rem; font-size: .85rem; font-weight: 500;
  color: rgba(255,255,255,.65); transition: all var(--t-fast);
}
.cc-nav__drop-link:hover,
.cc-nav__drop-link.active { color: #fff; background: rgba(255,255,255,.06); }
.cc-nav__drop-link i { width: 15px; text-align: center; color: var(--cc-green-mid); font-size: .8rem; opacity: .8; }

/* fade-in utility used by intersection observer */
.fade-in { opacity: 0; transform: translateY(16px); transition: opacity .5s ease, transform .5s ease; }
.fade-in.is-visible { opacity: 1; transform: none; }

/* ── HERO ── */
.cc-hero {
  background: linear-gradient(135deg, var(--cc-dark) 0%, #0d1117 50%, #0a1a0a 100%);
  padding: clamp(3rem, 8vw, 5.5rem) 0;
  position: relative; overflow: hidden;
}
.cc-hero::before {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(ellipse at 70% 50%, rgba(30,140,30,.18) 0%, transparent 60%);
}
.cc-hero__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: center; position: relative; z-index: 1; }
.cc-hero__badge {
  display: inline-flex; align-items: center; gap: .5rem;
  background: rgba(30,140,30,.15); color: var(--cc-green-mid);
  border: 1px solid rgba(30,140,30,.3); font-size: .8125rem; font-weight: 700;
  padding: .4rem 1rem; border-radius: 999px; margin-bottom: 1.5rem;
  text-transform: uppercase; letter-spacing: .07em;
}
.cc-hero__headline {
  font-size: clamp(2.25rem, 5.5vw, 3.5rem); font-weight: 900;
  letter-spacing: -.05em; line-height: 1.1; color: #fff; margin-bottom: 1.25rem;
}
.cc-hero__sub { font-size: 1.0625rem; color: rgba(255,255,255,.7); line-height: 1.7; margin-bottom: 2rem; max-width: 500px; }
.cc-hero__ctas { display: flex; gap: 1rem; flex-wrap: wrap; margin-bottom: 2.5rem; }
.cc-hero__trust { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; }
.cc-hero__trust-item { display: flex; align-items: center; gap: .4rem; font-size: .8125rem; font-weight: 600; color: rgba(255,255,255,.65); }
.cc-hero__trust-item i { color: var(--cc-green-mid); font-size: .8rem; }
.cc-hero__trust-divider { width: 1px; height: 14px; background: rgba(255,255,255,.2); }

/* Mockup */
.cc-mockup {
  background: #0d1117; border: 1px solid rgba(255,255,255,.1);
  border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow-lg);
  animation: cc-float 4s ease-in-out infinite;
}
@keyframes cc-float { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-8px)} }
.cc-mockup__bar { display: flex; align-items: center; gap: .5rem; background: #161b22; padding: .75rem 1rem; border-bottom: 1px solid rgba(255,255,255,.07); }
.cc-mockup__dot { width: 12px; height: 12px; border-radius: 50%; }
.cc-mockup__dot--r { background: #FF5F57; }
.cc-mockup__dot--y { background: #FEBC2E; }
.cc-mockup__dot--g { background: #28C840; }
.cc-mockup__title { font-size: .75rem; font-weight: 600; color: rgba(255,255,255,.5); margin-left: .5rem; }
.cc-mockup__body { padding: 1rem; display: flex; flex-direction: column; gap: .75rem; }
.cc-mockup__metric {
  display: flex; align-items: center; gap: .75rem;
  background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08);
  border-radius: var(--r-sm); padding: .75rem 1rem; transition: border-color .3s ease;
}
.cc-mockup__metric--ok { border-color: rgba(30,140,30,.3); }
.cc-mockup__metric i { color: var(--cc-green-mid); font-size: 1.125rem; width: 1.5rem; text-align: center; }
.cc-mockup__metric-label { font-size: .7rem; color: rgba(255,255,255,.45); font-weight: 600; text-transform: uppercase; letter-spacing: .06em; }
.cc-mockup__metric-val { font-size: .9375rem; font-weight: 700; color: #fff; }
.cc-mockup__badge { font-size: .65rem; font-weight: 800; padding: .2rem .5rem; border-radius: 999px; text-transform: uppercase; letter-spacing: .05em; margin-left: auto; }
.cc-mockup__badge--green { background: rgba(30,140,30,.2); color: var(--cc-green-mid); }
.cc-mockup__badge--blue { background: rgba(59,130,246,.2); color: #60A5FA; }
.cc-mockup__row { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; }
.cc-mockup__alert { display: flex; align-items: center; gap: .625rem; background: rgba(30,140,30,.08); border: 1px solid rgba(30,140,30,.2); border-radius: var(--r-sm); padding: .625rem .875rem; }
.cc-mockup__alert i { color: var(--cc-green-mid); font-size: .875rem; }
.cc-mockup__alert-text { font-size: .8rem; color: rgba(255,255,255,.7); font-weight: 500; }
.cc-mockup__alert-badge { font-size: .7rem; font-weight: 700; color: var(--cc-green-mid); margin-left: auto; transition: opacity .3s ease; }

/* ── PAIN POINTS BAND ── */
.cc-pain-band { background: var(--cc-off-white); border-top: 1px solid var(--cc-border); border-bottom: 1px solid var(--cc-border); padding: 3rem 0; }
.cc-pain-band__label { font-size: .8125rem; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: var(--clr-text-muted); text-align: center; margin-bottom: 1.5rem; }
.cc-pain-grid { display: flex; flex-wrap: wrap; gap: .75rem; justify-content: center; }
.cc-pain-chip {
  display: flex; align-items: center; gap: .625rem;
  background: var(--cc-white); border: 1px solid var(--cc-border);
  border-radius: 999px; padding: .625rem 1.125rem; font-size: .9rem; font-weight: 500;
  color: var(--clr-text); transition: all var(--t-fast); cursor: default;
}
.cc-pain-chip i { color: var(--cc-green); font-size: .875rem; }
.cc-pain-chip:hover { border-color: var(--cc-green); background: var(--cc-green-light); color: var(--cc-green); transform: translateY(-2px); box-shadow: var(--shadow-sm); }

/* ── SERVICES ── */
.cc-services { padding: var(--section-pad) 0; }
.cc-services__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; margin-top: 3rem; }
.cc-service-card {
  background: var(--cc-white); border: 1px solid var(--cc-border);
  border-radius: var(--r-lg); padding: 1.875rem;
  transition: all var(--t-mid); position: relative; overflow: hidden;
}
.cc-service-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--cc-green); transform: scaleX(0); transform-origin: left; transition: transform var(--t-mid); }
.cc-service-card:hover { box-shadow: var(--shadow-md); border-color: var(--cc-green); transform: translateY(-4px); }
.cc-service-card:hover::before { transform: scaleX(1); }
.cc-service-card--featured { border-color: var(--cc-green); }
.cc-service-card--featured::before { transform: scaleX(1); }
.cc-service-card__badge { position: absolute; top: 1rem; right: 1rem; background: var(--cc-green); color: #fff; font-size: .65rem; font-weight: 800; padding: .2rem .625rem; border-radius: 999px; text-transform: uppercase; letter-spacing: .06em; }
.cc-service-card__icon { width: 52px; height: 52px; background: var(--cc-green-light); color: var(--cc-green); border-radius: var(--r-md); display: flex; align-items: center; justify-content: center; font-size: 1.375rem; margin-bottom: 1.25rem; transition: all var(--t-fast); }
.cc-service-card:hover .cc-service-card__icon { background: var(--cc-green); color: #fff; }
.cc-service-card__title { font-size: 1.0625rem; font-weight: 700; margin-bottom: .5rem; letter-spacing: -.02em; }
.cc-service-card__desc { font-size: .9rem; color: var(--clr-text-muted); line-height: 1.65; margin-bottom: 1.25rem; }
.cc-service-card__link { font-size: .875rem; font-weight: 700; color: var(--cc-green); display: flex; align-items: center; gap: .35rem; }
.cc-service-card__link:hover { text-decoration: underline; }

/* ── PROCESS ── */
.cc-process { background: var(--cc-dark); padding: var(--section-pad) 0; }
.cc-process .cc-section-title { color: #fff; }
.cc-process .cc-section-label { background: rgba(30,140,30,.15); }
.cc-process__steps { display: flex; gap: 0; margin-top: 3.5rem; position: relative; }
.cc-process__step { flex: 1; text-align: center; position: relative; padding: 0 1.25rem; }
.cc-process__step-num {
  width: 56px; height: 56px; border-radius: 50%;
  background: var(--cc-green); color: #fff;
  font-size: 1.25rem; font-weight: 800; display: flex;
  align-items: center; justify-content: center;
  margin: 0 auto 1.25rem; position: relative; z-index: 1;
  box-shadow: 0 0 0 8px rgba(30,140,30,.15);
}
.cc-process__connector {
  position: absolute; top: 28px; left: calc(50% + 28px); right: calc(-50% + 28px);
  height: 2px; background: rgba(255,255,255,.1);
}
.cc-process__step:last-child .cc-process__connector { display: none; }
.cc-process__step-title { font-size: 1rem; font-weight: 700; color: #fff; margin-bottom: .5rem; }
.cc-process__step-desc { font-size: .875rem; color: rgba(255,255,255,.55); line-height: 1.65; }

/* ── STATS STRIP ── */
.cc-stats { background: #0d3d0d; padding: 3rem 0; }
.cc-stats__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2rem; }
.cc-stat { text-align: center; }
.cc-stat__num { font-size: clamp(2rem, 5vw, 3rem); font-weight: 900; color: #fff; letter-spacing: -.04em; line-height: 1; }
.cc-stat__label { font-size: .875rem; color: rgba(255,255,255,.75); font-weight: 500; margin-top: .5rem; }

/* ── WHY US ── */
.cc-why { padding: var(--section-pad) 0; background: var(--cc-off-white); }
.cc-why__inner { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: start; }
.cc-diff-list { display: flex; flex-direction: column; gap: 1rem; margin-top: 1.75rem; }
.cc-diff-item {
  display: flex; gap: 1rem; padding: 1.125rem 1.25rem;
  background: var(--cc-white); border: 1px solid var(--cc-border);
  border-radius: var(--r-md); transition: all var(--t-fast);
}
.cc-diff-item:hover { border-color: var(--cc-green); box-shadow: var(--shadow-sm); }
.cc-diff-item__icon { width: 40px; height: 40px; background: var(--cc-green-light); color: var(--cc-green); border-radius: var(--r-sm); display: flex; align-items: center; justify-content: center; font-size: 1rem; flex-shrink: 0; }
.cc-diff-item__title { font-size: .9375rem; font-weight: 700; margin-bottom: .2rem; }
.cc-diff-item__desc  { font-size: .8375rem; color: var(--clr-text-muted); line-height: 1.55; }

/* Compare table */
.cc-compare { border: 1px solid var(--cc-border); border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow-sm); }
.cc-compare__header, .cc-compare__row { display: grid; grid-template-columns: 1fr 90px 120px; gap: 0; }
.cc-compare__header { background: var(--cc-dark); color: #fff; }
.cc-compare__cell { padding: .875rem 1rem; font-size: .875rem; display: flex; align-items: center; justify-content: center; text-align: center; border-bottom: 1px solid var(--cc-border); }
.cc-compare__cell:first-child { justify-content: flex-start; padding-left: 1.25rem; font-weight: 600; }
.cc-compare__row:last-child .cc-compare__cell { border-bottom: none; }
.cc-compare__row:nth-child(even) .cc-compare__cell { background: var(--cc-off-white); }
.cc-compare__col--cc { background: rgba(30,140,30,.06) !important; }
.cc-compare__col--cc i.fa-check { color: var(--cc-green); font-size: 1rem; font-weight: 900; }
.cc-compare__col--other i.fa-times { color: var(--cc-gray-300); }
.cc-compare__header-cell { padding: .875rem 1rem; font-size: .8rem; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; text-align: center; display: flex; align-items: center; justify-content: center; }
.cc-compare__header-cell:first-child { justify-content: flex-start; padding-left: 1.25rem; }
.cc-compare__header-cell.cc { color: var(--cc-green-mid); }

/* ── TESTIMONIALS ── */
.cc-testimonials { padding: var(--section-pad) 0; background: var(--cc-white); }
.cc-testimonials__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; margin-top: 3rem; }
.cc-testimonial-card { background: var(--cc-white); border: 1px solid var(--cc-border); border-radius: var(--r-lg); padding: 2rem; transition: all var(--t-mid); }
.cc-testimonial-card:hover { box-shadow: var(--shadow-md); border-color: var(--cc-green); transform: translateY(-3px); }
.cc-testimonial-card--featured { border-color: var(--cc-green); background: var(--cc-green-light); transform: translateY(-6px); box-shadow: var(--shadow-md); }
.cc-testimonial__stars { display: flex; gap: .2rem; margin-bottom: 1rem; }
.cc-testimonial__stars i { color: #FBBF24; font-size: .875rem; }
.cc-testimonial__quote { font-size: .9375rem; line-height: 1.75; color: var(--cc-gray-700); margin-bottom: 1.5rem; font-style: italic; }
.cc-testimonial__quote::before { content: '\201C'; font-size: 1.5rem; color: var(--cc-green); line-height: 0; vertical-align: -.4em; margin-right: .15em; }
.cc-testimonial__author { display: flex; align-items: center; gap: .875rem; border-top: 1px solid var(--cc-border); padding-top: 1rem; }
.cc-testimonial__avatar { width: 44px; height: 44px; border-radius: 50%; background: var(--cc-green); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 1rem; flex-shrink: 0; }
.cc-testimonial__name { font-weight: 700; font-size: .9375rem; }
.cc-testimonial__biz  { font-size: .8125rem; color: var(--clr-text-muted); }

/* ── CTA BAND ── */
.cc-cta-band { background: var(--cc-dark); padding: var(--section-pad) 0; }
.cc-cta-band__inner { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: start; }
.cc-cta-band__headline { font-size: clamp(1.75rem, 4vw, 2.5rem); font-weight: 800; letter-spacing: -.04em; color: #fff; line-height: 1.2; margin-bottom: 1rem; }
.cc-cta-band__sub { font-size: 1rem; color: rgba(255,255,255,.65); line-height: 1.7; margin-bottom: 2rem; }
.cc-cta-band__perks { display: flex; flex-direction: column; gap: .75rem; }
.cc-cta-band__perk { display: flex; align-items: center; gap: .75rem; font-size: .9375rem; color: rgba(255,255,255,.8); font-weight: 500; }
.cc-cta-band__perk i { color: var(--cc-green-mid); width: 1.25rem; text-align: center; }
.cc-cta-form { background: var(--cc-white); border-radius: var(--r-xl); padding: 2.5rem; box-shadow: var(--shadow-lg); }
.cc-cta-form__title { font-size: 1.25rem; font-weight: 800; margin-bottom: .375rem; }
.cc-cta-form__sub   { font-size: .875rem; color: var(--clr-text-muted); margin-bottom: 1.5rem; }
.cc-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: .875rem; }
.cc-form-group { display: flex; flex-direction: column; gap: .375rem; }
.cc-form-label { font-size: .8125rem; font-weight: 700; color: var(--clr-text); }
.cc-input {
  width: 100%; border: 2px solid var(--cc-border); border-radius: var(--r-sm);
  padding: .625rem 1rem; font-size: .9375rem; font-family: var(--font-sans);
  outline: none; transition: border-color var(--t-fast), box-shadow var(--t-fast);
  background: var(--cc-off-white);
}
.cc-input:focus { border-color: var(--cc-green); background: #fff; box-shadow: 0 0 0 3px rgba(30,140,30,.12); }
.cc-input--error { border-color: var(--clr-danger) !important; }
.cc-field-error { color: var(--clr-danger); font-size: .8125rem; margin-top: .25rem; }
select.cc-input { cursor: pointer; }
textarea.cc-input { resize: vertical; min-height: 90px; }

/* ── FOOTER ── */
.cc-footer { background: var(--cc-black); color: rgba(255,255,255,.75); padding: 4rem 0 0; }
.cc-footer__top { display: grid; grid-template-columns: 280px 1fr; gap: 4rem; margin-bottom: 3rem; }
.cc-footer__brand p { font-size: .875rem; line-height: 1.7; margin: 1rem 0 1.25rem; }
.cc-footer__contact-links { display: flex; flex-direction: column; gap: .625rem; }
.cc-footer__contact-links a { display: flex; align-items: center; gap: .5rem; font-size: .875rem; color: rgba(255,255,255,.65); transition: color var(--t-fast); }
.cc-footer__contact-links a:hover { color: var(--cc-green-mid); }
.cc-footer__contact-links i { color: var(--cc-green); width: 1rem; text-align: center; }
.cc-footer__cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; }
.cc-footer__col h5 { font-size: .8rem; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: rgba(255,255,255,.4); margin-bottom: 1rem; }
.cc-footer__col ul li { margin-bottom: .5rem; }
.cc-footer__col ul li a { font-size: .875rem; color: rgba(255,255,255,.6); transition: color var(--t-fast); }
.cc-footer__col ul li a:hover { color: var(--cc-green-mid); }
.cc-footer__bottom { display: flex; align-items: center; justify-content: space-between; padding: 1.25rem 0; border-top: 1px solid rgba(255,255,255,.08); font-size: .8125rem; color: rgba(255,255,255,.4); flex-wrap: wrap; gap: .75rem; }
.cc-footer__bottom a { color: rgba(255,255,255,.4); }
.cc-footer__bottom a:hover { color: var(--cc-green-mid); }
.cc-footer__badges { display: flex; gap: 1rem; flex-wrap: wrap; }
.cc-footer__badge { display: flex; align-items: center; gap: .375rem; font-size: .75rem; color: rgba(255,255,255,.35); }
.cc-footer__badge i { color: var(--cc-green); }
.cc-footer__logo-link { display: flex; align-items: center; gap: .75rem; text-decoration: none; margin-bottom: .5rem; }
.cc-footer__logo-link img { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; }
.cc-footer__wordmark span { display: block; font-size: .7rem; color: rgba(255,255,255,.4); }
.cc-footer__wordmark strong { display: block; font-size: 1rem; font-weight: 800; color: #fff; letter-spacing: -.02em; }

/* ── STICKY CTA ── */
.cc-sticky-cta {
  display: none; position: fixed; bottom: 0; left: 0; right: 0;
  background: var(--cc-dark); padding: .875rem 1.25rem;
  border-top: 1px solid rgba(255,255,255,.1);
  gap: .75rem; z-index: 900; box-shadow: 0 -4px 20px rgba(0,0,0,.3);
}
.cc-sticky-cta a { flex: 1; text-align: center; justify-content: center; }

/* ── SCROLL TOP ── */
#cc-scroll-top {
  position: fixed; bottom: 5rem; right: 1.5rem;
  width: 44px; height: 44px; background: var(--cc-green); color: #fff;
  border: none; border-radius: 50%; font-size: 1rem; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  box-shadow: var(--shadow-md); opacity: 0; transform: translateY(12px);
  pointer-events: none; transition: opacity .3s, transform .3s; z-index: 900;
}
#cc-scroll-top.is-visible { opacity: 1; transform: none; pointer-events: auto; }
#cc-scroll-top:hover { background: var(--cc-green-dark); }

/* ── EXIT POPUP ── */
#cc-exit-popup {
  position: fixed; inset: 0; background: rgba(0,0,0,.6);
  display: flex; align-items: center; justify-content: center;
  z-index: 9999; opacity: 0; pointer-events: none;
  transition: opacity .35s; padding: 1rem;
}
#cc-exit-popup.is-visible { opacity: 1; pointer-events: auto; }
.cc-exit-popup__box {
  background: var(--cc-white); border-radius: var(--r-xl); padding: 2.5rem;
  max-width: 480px; width: 100%; position: relative; text-align: center;
  box-shadow: var(--shadow-lg); animation: cc-popIn .3s ease;
}
@keyframes cc-popIn { from{transform:scale(.9);opacity:0} to{transform:none;opacity:1} }
.cc-exit-popup__close {
  position: absolute; top: 1rem; right: 1rem; background: var(--cc-gray-100);
  border: none; border-radius: 50%; width: 32px; height: 32px; cursor: pointer;
  font-size: 1rem; display: flex; align-items: center; justify-content: center; color: var(--clr-text-muted);
}
.cc-exit-popup__close:hover { background: var(--cc-border); }

/* ── PAGE HERO ── */
.cc-page-hero {
  background: linear-gradient(135deg, var(--cc-dark) 0%, var(--cc-dark-surface) 100%);
  padding: 4rem 0 3rem; text-align: center; color: var(--cc-white); position: relative; overflow: hidden;
}
.cc-page-hero::before { content:''; position:absolute; inset:0; background:radial-gradient(ellipse at 50% 100%, rgba(30,140,30,.2) 0%, transparent 70%); }
.cc-page-hero .cc-container { position:relative; z-index:1; }
.cc-page-hero__label { display:inline-flex; align-items:center; gap:.4rem; background:rgba(30,140,30,.2); color:var(--cc-green-mid); border:1px solid rgba(30,140,30,.3); font-size:.8125rem; font-weight:700; padding:.375rem 1rem; border-radius:999px; margin-bottom:1.25rem; text-transform:uppercase; letter-spacing:.08em; }
.cc-page-hero__title { font-size:clamp(1.875rem,5vw,3rem); font-weight:800; letter-spacing:-.04em; line-height:1.15; margin:0 0 1rem; }
.cc-page-hero__sub { font-size:1.0625rem; color:rgba(255,255,255,.7); line-height:1.65; max-width:600px; margin:0 auto 1.75rem; }
.cc-page-hero__ctas { display:flex; gap:1rem; justify-content:center; flex-wrap:wrap; }

/* ── PLANS ── */
.cc-plans { padding: var(--section-pad) 0; }
.cc-plans__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; margin-top: 3rem; }
.cc-plan-card { background: var(--cc-white); border: 1px solid var(--cc-border); border-radius: var(--r-xl); overflow: hidden; display: flex; flex-direction: column; transition: all var(--t-mid); position: relative; }
.cc-plan-card:hover { box-shadow: var(--shadow-md); transform: translateY(-4px); }
.cc-plan-card--featured { border-color: var(--cc-green); transform: translateY(-8px); box-shadow: var(--shadow-accent); }
.cc-plan-card--featured:hover { transform: translateY(-12px); }
.cc-plan-card__badge { position: absolute; top: 1.25rem; right: 1.25rem; background: var(--cc-green); color: #fff; font-size: .65rem; font-weight: 800; padding: .3rem .75rem; border-radius: 999px; text-transform: uppercase; letter-spacing: .06em; }
.cc-plan-card__header { padding: 2rem 2rem 1.25rem; }
.cc-plan-card__name { font-size: .8rem; font-weight: 800; text-transform: uppercase; letter-spacing: .1em; color: var(--cc-green); margin-bottom: .625rem; }
.cc-plan-card__price { font-size: 2.25rem; font-weight: 900; letter-spacing: -.04em; color: var(--cc-black); line-height: 1; }
.cc-plan-card__price span { font-size: 1rem; font-weight: 500; color: var(--clr-text-muted); }
.cc-plan-card__note { font-size: .8rem; color: var(--clr-text-muted); margin: .375rem 0 .875rem; }
.cc-plan-card__tagline { font-size: .9rem; color: var(--clr-text-muted); line-height: 1.6; }
.cc-plan-card__body { padding: 0 2rem 2rem; flex: 1; display: flex; flex-direction: column; }
.cc-plan-card__features { margin-bottom: 1.75rem; flex: 1; }
.cc-plan-card__features li { display: flex; align-items: flex-start; gap: .625rem; padding: .5rem 0; border-bottom: 1px solid var(--cc-border); font-size: .875rem; color: var(--clr-text); }
.cc-plan-card__features li:last-child { border-bottom: none; }
.cc-plan-card__features li i.fa-check { color: var(--cc-green); flex-shrink: 0; margin-top: .2rem; }
.cc-plan-card__features li i.fa-times { color: var(--cc-gray-300); flex-shrink: 0; margin-top: .2rem; }
.cc-plan-cross { color: var(--clr-text-muted) !important; }
.cc-plan-divider { height: 1px; background: var(--cc-border); margin: 1.5rem 0; }

/* ── CONSULTING ── */
.cc-consulting { background: var(--cc-off-white); padding: var(--section-pad) 0; }
.cc-consulting__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; margin-top: 3rem; }
.cc-consult-card { background: var(--cc-white); border: 1px solid var(--cc-border); border-radius: var(--r-lg); padding: 1.875rem; transition: all var(--t-mid); }
.cc-consult-card:hover { box-shadow: var(--shadow-md); border-color: var(--cc-green); transform: translateY(-4px); }
.cc-consult-card__icon { width: 52px; height: 52px; background: var(--cc-green-light); color: var(--cc-green); border-radius: var(--r-md); display: flex; align-items: center; justify-content: center; font-size: 1.375rem; margin-bottom: 1.25rem; transition: all var(--t-fast); }
.cc-consult-card:hover .cc-consult-card__icon { background: var(--cc-green); color: #fff; }
.cc-consult-card__title { font-size: 1.0625rem; font-weight: 700; margin-bottom: .5rem; }
.cc-consult-card__desc { font-size: .875rem; color: var(--clr-text-muted); line-height: 1.65; margin-bottom: 1rem; }
.cc-consult-card__tag { display: inline-flex; align-items: center; gap: .3rem; font-size: .75rem; font-weight: 700; color: var(--cc-green); background: var(--cc-green-light); padding: .2rem .625rem; border-radius: 999px; }

/* ── QUIZ ── */
.cc-quiz-wrap { max-width: 680px; margin: 0 auto; }
.cc-quiz-progress { width: 100%; height: 5px; background: var(--cc-border); border-radius: 999px; margin-bottom: 2rem; overflow: hidden; }
.cc-quiz-progress__fill { height: 100%; background: var(--cc-green); border-radius: 999px; transition: width .4s ease; width: 0; }
.cc-quiz-step { display: none; animation: cc-fadeUp .35s ease; }
.cc-quiz-step.is-active { display: block; }
@keyframes cc-fadeUp { from{opacity:0;transform:translateY(16px)} to{opacity:1;transform:none} }
.cc-quiz-options { display: flex; flex-direction: column; gap: .75rem; margin: 1.5rem 0; }
.cc-quiz-option {
  display: flex; align-items: center; gap: 1rem; padding: 1rem 1.25rem;
  border: 2px solid var(--cc-border); border-radius: var(--r-md);
  cursor: pointer; background: var(--cc-white); text-align: left; width: 100%;
  transition: all var(--t-fast);
}
.cc-quiz-option:hover { border-color: var(--cc-green); background: var(--cc-green-light); }
.cc-quiz-option.is-selected { border-color: var(--cc-green); background: var(--cc-green-light); box-shadow: 0 0 0 3px rgba(30,140,30,.12); }
.cc-quiz-option__icon { width: 42px; height: 42px; background: var(--cc-green-light); color: var(--cc-green); border-radius: var(--r-sm); display: flex; align-items: center; justify-content: center; font-size: 1.125rem; flex-shrink: 0; transition: all var(--t-fast); }
.cc-quiz-option.is-selected .cc-quiz-option__icon { background: var(--cc-green); color: #fff; }
.cc-quiz-option__label { font-size: .9375rem; font-weight: 500; color: var(--clr-text); flex: 1; line-height: 1.4; }
.cc-quiz-q-title { font-size: clamp(1.25rem, 3vw, 1.625rem); font-weight: 800; letter-spacing: -.03em; line-height: 1.25; margin-bottom: .375rem; }
.cc-quiz-step-counter { font-size: .8125rem; font-weight: 700; color: var(--clr-text-muted); margin-bottom: 1.25rem; display: flex; align-items: center; gap: .5rem; }
.cc-quiz-step-counter .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--cc-green); }

/* ── RESULTS ── */
.cc-results-score-card { border: 2px solid; border-radius: var(--r-lg); padding: 1.75rem; margin-bottom: 2rem; }
.cc-results-score-card__header { display: flex; align-items: center; justify-content: space-between; gap: 2rem; flex-wrap: wrap; }
.cc-results-score-card__eyebrow { font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: var(--clr-text-muted); margin-bottom: .25rem; }
.cc-results-score-card__level { font-size: 1.75rem; font-weight: 800; letter-spacing: -.03em; }
.cc-results-score-card__desc { font-size: .9375rem; color: var(--cc-gray-700); line-height: 1.6; margin: .5rem 0 0; max-width: 400px; }
.cc-score-gauge { width: 120px; height: 120px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.cc-score-gauge__inner { width: 86px; height: 86px; background: var(--cc-white); border-radius: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.cc-score-gauge__num { font-size: 2rem; font-weight: 900; line-height: 1; }
.cc-score-gauge__sub { font-size: .7rem; color: var(--clr-text-muted); font-weight: 600; }
.cc-findings-list { display: flex; flex-direction: column; gap: .75rem; margin-bottom: 2rem; }
.cc-finding { display: flex; align-items: flex-start; gap: 1rem; padding: 1rem 1.25rem; border-left: 4px solid; border-radius: 0 var(--r-sm) var(--r-sm) 0; }
.cc-finding__icon { font-size: 1.125rem; flex-shrink: 0; margin-top: .125rem; }
.cc-finding__text strong { display: block; font-size: .9375rem; font-weight: 700; margin-bottom: .25rem; }
.cc-finding__text p { font-size: .875rem; color: var(--cc-gray-700); line-height: 1.6; margin: 0; }
.cc-results-cta { background: var(--cc-dark); border-radius: var(--r-lg); padding: 2.5rem; color: #fff; text-align: center; margin-top: 2rem; }
.cc-results-cta h3 { font-size: 1.5rem; font-weight: 800; margin-bottom: 1rem; }
.cc-results-cta p { font-size: .9375rem; color: rgba(255,255,255,.75); line-height: 1.65; margin-bottom: 1rem; }
.cc-results-cta__btns { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; margin-top: 1.5rem; }

/* ── SCHEDULING ── */
.cc-scheduling { padding: var(--section-pad) 0; }
.cc-scheduling__tabs { display: flex; gap: .75rem; margin-bottom: 1.75rem; }
.cc-scheduling__tab { display: inline-flex; align-items: center; gap: .5rem; padding: .875rem 1.625rem; border: 2px solid var(--cc-border); border-radius: var(--r-sm); font-size: .9375rem; font-weight: 600; background: var(--cc-white); color: var(--clr-text); cursor: pointer; transition: all var(--t-fast); font-family: var(--font-sans); }
.cc-scheduling__tab:hover { border-color: var(--cc-green); color: var(--cc-green); }
.cc-scheduling__tab.is-active { border-color: var(--cc-green); background: var(--cc-green); color: #fff; }
.cc-scheduling__panel { display: none; }
.cc-scheduling__panel.is-active { display: block; }
.cc-booking-placeholder { background: var(--cc-gray-100); border: 2px dashed var(--cc-border); border-radius: var(--r-lg); padding: 4rem 2rem; text-align: center; min-height: 420px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1rem; }
.cc-booking-placeholder i { font-size: 3rem; color: var(--cc-green); }
.cc-booking-placeholder h3 { font-size: 1.25rem; font-weight: 700; }
.cc-booking-placeholder p { color: var(--clr-text-muted); max-width: 400px; }

/* ── FORM SUCCESS ── */
.cc-form-success { text-align: center; padding: 3rem 2rem; background: var(--cc-green-light); border-radius: var(--r-lg); border: 1px solid rgba(30,140,30,.2); }
.cc-form-success__icon { font-size: 3rem; color: var(--cc-green); margin-bottom: 1rem; }
.cc-form-success__title { font-size: 1.375rem; font-weight: 800; margin-bottom: .625rem; }
.cc-form-success__text { color: var(--cc-gray-700); margin-bottom: .5rem; }
.cc-form-success__sub { font-size: .875rem; color: var(--clr-text-muted); }
.cc-form-success__sub a { color: var(--cc-green); font-weight: 600; }

/* ── FADE IN ── */
.cc-fade-in { opacity: 0; transform: translateY(20px); transition: opacity .5s ease, transform .5s ease; }
.cc-fade-in.is-visible { opacity: 1; transform: none; }

/* ── RESPONSIVE ── */
@media (max-width: 1024px) {
  .cc-hero__grid { grid-template-columns: 1fr; }
  .cc-hero__visual { order: -1; max-width: 520px; margin-inline: auto; }
  .cc-services__grid, .cc-consulting__grid { grid-template-columns: repeat(2,1fr); }
  .cc-plans__grid { grid-template-columns: 1fr; max-width: 480px; margin-inline: auto; }
  .cc-plan-card--featured { transform: none; }
  .cc-why__inner { grid-template-columns: 1fr; }
  .cc-cta-band__inner { grid-template-columns: 1fr; gap: 3rem; }
  .cc-testimonials__grid { grid-template-columns: 1fr; }
  .cc-testimonial-card--featured { transform: none; }
  .cc-footer__top { grid-template-columns: 1fr; gap: 2rem; }
  .cc-footer__cols { grid-template-columns: repeat(2,1fr); }
  .cc-process__steps { flex-direction: column; gap: 1.5rem; }
  .cc-process__connector { display: none; }
}
@media (max-width: 768px) {
  .cc-hamburger { display: flex; }
  .cc-nav { display: none; }
  .cc-nav.is-open {
    display: flex; position: absolute; top: 100%; left: 0; right: 0;
    background: #111; flex-direction: column;
    border-top: 1px solid rgba(255,255,255,.08);
    padding: .75rem; box-shadow: 0 16px 40px rgba(0,0,0,.5); z-index: 999;
  }
  .cc-nav__menu { flex-direction: column; width: 100%; gap: .25rem; }
  .cc-nav__link { width: 100%; color: rgba(255,255,255,.7); }
  .cc-nav__link:hover { color: #fff; }
  .cc-header__actions .cc-btn { display: none; }
  .cc-header__inner { position: relative; }
  .cc-services__grid, .cc-consulting__grid { grid-template-columns: 1fr; }
  .cc-stats__grid { grid-template-columns: repeat(2,1fr); }
  .cc-footer__cols { grid-template-columns: 1fr; }
  .cc-form-row { grid-template-columns: 1fr; }
  .cc-sticky-cta { display: flex; }
  body { padding-bottom: 68px; }
  .cc-topbar__left { display: none; }
  .cc-compare__header, .cc-compare__row { grid-template-columns: 1fr 70px 90px; }
}
@media (max-width: 480px) {
  .cc-stats__grid { grid-template-columns: 1fr 1fr; }
  .cc-hero__ctas { flex-direction: column; }
  .cc-footer__bottom { flex-direction: column; text-align: center; }
  .cc-scheduling__tabs { flex-direction: column; }
}

/* ═══════════════════════════════════════════════════════════════════
   GLOBAL RESPONSIVE POLISH — added for all-device support
   ═══════════════════════════════════════════════════════════════════ */

/* ── Touch targets: all interactive elements ≥ 44×44px ──────────── */
@media (max-width: 768px) {
  .cc-btn, button, [role="button"] { min-height: 44px; }
  input, select, textarea { min-height: 44px; font-size: 16px !important; } /* prevent iOS zoom */
  a { min-height: 44px; display: inline-flex; align-items: center; }
  .cc-nav__link { min-height: 44px; padding: .75rem 1rem; }
}

/* ── Prevent horizontal scroll globally ─────────────────────────── */
html, body { overflow-x: hidden; max-width: 100%; }
img, video, iframe { max-width: 100%; height: auto; }

/* ── Header: ensure hamburger visible on all narrow screens ─────── */
@media (max-width: 768px) {
  .cc-header__inner { position: relative; flex-wrap: nowrap; }
  .cc-hamburger { display: flex !important; }
  .cc-nav { display: none; }
  .cc-nav.is-open {
    display: flex;
    position: absolute; top: 100%; left: 0; right: 0;
    background: #111;
    flex-direction: column;
    border-top: 1px solid rgba(255,255,255,.08);
    padding: .75rem;
    box-shadow: 0 16px 40px rgba(0,0,0,.5);
    z-index: 9999;
  }
  .cc-nav__menu { flex-direction: column; width: 100%; gap: .25rem; }
  /* Dropdown on mobile */
  .cc-nav__dropdown { position: static; box-shadow: none; margin-left: 1rem; }
  .cc-nav__item:hover .cc-nav__dropdown { display: block; }
}

/* ── Tablet-specific header fix ─────────────────────────────────── */
@media (min-width: 769px) and (max-width: 1024px) {
  .cc-nav__link { font-size: .8125rem; padding: .5rem .6rem; }
  .cc-header__actions .cc-btn { font-size: .8rem; padding: .5rem .875rem; }
  .cc-hero__title { font-size: clamp(1.75rem, 3.5vw, 2.5rem); }
}

/* ── Container padding on small screens ─────────────────────────── */
@media (max-width: 480px) {
  .cc-container { padding-left: 1rem; padding-right: 1rem; }
}

/* ── Estimator responsive ────────────────────────────────────────── */
@media (max-width: 900px) {
  .est-layout { flex-direction: column !important; }
  .est-sidebar { width: 100% !important; max-width: 100% !important; position: static !important; }
  .est-main { width: 100% !important; }
}
@media (max-width: 768px) {
  .est-steps-row { flex-wrap: wrap; gap: .25rem; }
  .est-step-dot { width: 28px; height: 28px; font-size: .7rem; }
  .prod-grid { grid-template-columns: repeat(auto-fill, minmax(160px,1fr)) !important; }
  .step-card { padding: 1.25rem !important; }
}

/* ── Front-page / homepage ───────────────────────────────────────── */
@media (max-width: 768px) {
  .cc-hero { padding: 3rem 0 2.5rem; }
  .cc-decide { padding: 2.5rem 0; }
  .cc-decide__grid { grid-template-columns: 1fr !important; gap: 1rem; }
  .cc-process__steps { flex-direction: column; }
  .cc-testimonials__grid { grid-template-columns: 1fr !important; }
  .cc-diff-grid { grid-template-columns: 1fr !important; }
}

/* ── Service plans specific ──────────────────────────────────────── */
@media (max-width: 768px) {
  .sp-trust-grid { grid-template-columns: 1fr !important; text-align: left; }
  .sp-trust-item__icon { margin: 0 0 .625rem; }
  .sp-fit-grid { grid-template-columns: 1fr !important; }
  .sp-consulting { grid-template-columns: 1fr !important; }
  .sp-addons-grid { grid-template-columns: 1fr !important; }
  .fp-grid { grid-template-columns: 1fr !important; }
  .fp-sidebar { position: static !important; }
  .fp-row { grid-template-columns: 1fr !important; gap: .5rem; }
  .fp-row__qty { justify-content: flex-start; }
  .fp-row__price { text-align: left; }
}

/* ── Footer ─────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .cc-footer__cols { grid-template-columns: 1fr !important; }
  .cc-footer__bottom { flex-direction: column; text-align: center; gap: .5rem; }
}

/* ── Tables on small screens ─────────────────────────────────────── */
@media (max-width: 768px) {
  table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
}

/* ── Sticky CTA bar on mobile ────────────────────────────────────── */
@media (max-width: 768px) {
  .cc-sticky-cta { display: flex; }
  body { padding-bottom: 68px; }
}

/* ── Print baseline ─────────────────────────────────────────────── */
@media print {
  .cc-header, .cc-footer, .cc-sticky-cta, .cc-topbar { display: none !important; }
  body { font-size: 12pt; color: #000 !important; background: #fff !important; }
  a { color: #000 !important; text-decoration: none; }
}