/* MyFonts license counter for the Glober webfont kit (build 3196409). The kit's
   license requires this import and it must be the first rule in the stylesheet.
   Keep it at the top of whatever file or <style> block these rules end up in. */
@import url("//hello.myfonts.net/count/30c5f9");

/* ==========================================================================
   CloudCover brand tokens + base styles
   Source of truth: computed styles of https://cloudcover.cc (Divi/WordPress),
   captured Aug 2026. Load this file (or paste it into a <style> block) before
   any page-specific CSS. Everything else in a CloudCover site should read
   from these variables rather than hard-coding colors, fonts or radii.
   ========================================================================== */

/* ---- Fonts ----------------------------------------------------------------
   Body: Open Sans (Google Fonts). Headings: Glober SemiBold (Fontfabric), from
   CloudCover's MyFonts webfont kit, which ships with this skill in ../fonts/
   (Book, Regular, SemiBold as woff2 + woff). The kit is licensed to CloudCover
   for CloudCover web properties — see fonts/LICENSE-MyFonts.txt — so use it only
   on CloudCover sites. The url()s below are relative to this CSS file; if you
   paste these rules into a page's <style> block, point them at wherever you put
   the fonts folder. If the files are missing, the stack falls through to
   Figtree 600 (Google Fonts), the closest freely licensed match.
   Put this in <head> (Google Fonts is the one external host allowed on
   Artifact pages):
   <link rel="preconnect" href="https://fonts.googleapis.com">
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
   <link href="https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400&family=Figtree:wght@500;600;700&display=swap" rel="stylesheet">
   -------------------------------------------------------------------------- */
@font-face {
  font-family: "GloberBook";
  src: url("fonts/30C5F9_0_0.woff2") format("woff2"), url("fonts/30C5F9_0_0.woff") format("woff");
  font-weight: 100 900; font-style: normal; font-display: swap;   /* single-weight face; the range stops browsers faux-bolding it */
}
@font-face {
  font-family: "GloberRegular";           /* the weight the wordmark is drawn in */
  src: url("fonts/30C5F9_1_0.woff2") format("woff2"), url("fonts/30C5F9_1_0.woff") format("woff");
  font-weight: 100 900; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "GloberSemiBold";          /* headings */
  src: url("fonts/30C5F9_2_0.woff2") format("woff2"), url("fonts/30C5F9_2_0.woff") format("woff");
  font-weight: 100 900; font-style: normal; font-display: swap;
}

:root {
  /* ---- Core palette (measured on cloudcover.cc) ---- */
  --cc-blue:        #2C4F86;  /* Brand blue: top bar, CTA band, links, nav hover, outlined buttons */
  --cc-logo-blue:   #1D56AF;  /* Logo mark blue (cloud-in-circle). Logo + accents only */
  --cc-navy:        #233049;  /* Logo wordmark navy; base body text color */
  --cc-ink:         #000207;  /* Near-black. Used at 91% opacity for dark sections */
  --cc-ink-91:      rgba(0, 2, 7, 0.91);
  --cc-ink-solid:   #17191D;  /* What --cc-ink-91 resolves to over white; use when you need a flat color */
  --cc-slate:       #525864;  /* Paragraph / nav / footer text */
  --cc-grey:        #999999;  /* Muted copy on DARK sections only (fails contrast on light) */
  --cc-mist:        #CDD6D6;  /* Light grey-cyan section background ("One platform." band) */
  --cc-cloud:       #F2F2F2;  /* Light grey panel / card background */
  --cc-white:       #FFFFFF;
  --cc-black:       #000000;  /* Solid black pill button; headline color on mist */
  --cc-accent-blue: #2C4F86;  /* Secondary accent seen once (product-page H1). Sparingly */
  --cc-accent-blue-10: rgba(44, 79, 134, 0.10);

  /* Social */
  --cc-linkedin: #007BB6;
  --cc-facebook: #3B5998;

  /* ---- Semantic aliases ---- */
  --cc-bg:            var(--cc-white);
  --cc-bg-dark:       var(--cc-ink-91);
  --cc-bg-mist:       var(--cc-mist);
  --cc-bg-panel:      var(--cc-cloud);
  --cc-bg-brand:      var(--cc-blue);
  --cc-text:          var(--cc-navy);
  --cc-text-body:     var(--cc-slate);
  --cc-text-on-dark:  var(--cc-white);
  --cc-text-muted-on-dark: var(--cc-grey);
  --cc-link:          var(--cc-blue);
  --cc-header-bg:     rgba(255, 255, 255, 0.90);

  /* ---- Type ---- */
  --cc-font-body:     "Open Sans", Helvetica, Arial, sans-serif;
  --cc-font-heading:  "GloberSemiBold", "Figtree", Arial, sans-serif;
  --cc-font-wordmark: "GloberRegular", "Figtree", Arial, sans-serif;   /* text that sits beside the logo */
  --cc-fs-display: 5rem;      /* 80px  hero H1 */
  --cc-fs-h1:      4rem;      /* 64px */
  --cc-fs-h2:      3rem;      /* 48px */
  --cc-fs-h2-band: 2rem;      /* 32px  CTA band heading */
  --cc-fs-h3:      2.3rem;    /* 36.8px */
  --cc-fs-h4:      1.9rem;    /* 30.4px stat lines */
  --cc-fs-lead:    1.5rem;    /* 24px  dark-section body copy (weight 300) */
  --cc-fs-body-lg: 1.2rem;    /* 19.2px standard paragraph (weight 500) */
  --cc-fs-body:    1rem;      /* 16px */
  --cc-fs-nav:     0.875rem;  /* 14px */
  --cc-fs-small:   0.875rem;  /* 14px legal / footer */
  --cc-lh-tight:   1.1;
  --cc-lh-heading: 1.2;
  --cc-lh-body:    1.7;

  /* ---- Layout ---- */
  --cc-container-text: 950px;   /* narrow text rows */
  --cc-container-wide: 1280px;  /* feature grids */
  --cc-gutter: 5.5%;            /* Divi column gutter */
  --cc-section-pad: clamp(3rem, 4vw, 4.5rem);
  --cc-topbar-h: 48px;
  --cc-nav-h: 80px;

  /* ---- Shape ---- */
  --cc-radius-pill: 100px;      /* every button on the site is a pill */
  --cc-radius-panel: 0;         /* panels are square-cornered */
}

/* ---- Base ---------------------------------------------------------------- */
html { font-size: 16px; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--cc-bg);
  color: var(--cc-text);
  font-family: var(--cc-font-body);
  font-size: var(--cc-fs-body);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4, h5 {
  font-family: var(--cc-font-heading);
  font-weight: 600;            /* real 600 when Figtree substitutes; Glober faces are declared 100–900 so this never triggers faux bold */
  font-synthesis: none;        /* belt and braces: never synthesize bold/italic for heading faces */
  line-height: var(--cc-lh-heading);
  margin: 0 0 0.5em;
  color: inherit;
}
h1 { font-size: var(--cc-fs-h1); }
h2 { font-size: var(--cc-fs-h2); }
h3 { font-size: var(--cc-fs-h3); line-height: var(--cc-lh-tight); }
h4 { font-size: var(--cc-fs-h4); }
.cc-display { font-size: var(--cc-fs-display); line-height: var(--cc-lh-tight); letter-spacing: 1px; }
p { margin: 0 0 1.2em; }
a { color: var(--cc-link); text-decoration: none; }
a:hover, a:focus-visible { text-decoration: underline; }
img, svg { max-width: 100%; height: auto; }

/* ---- Text roles ---------------------------------------------------------- */
.cc-lead    { font-size: var(--cc-fs-lead); font-weight: 300; line-height: 1.6; }
.cc-body-lg { font-size: var(--cc-fs-body-lg); font-weight: 500; line-height: var(--cc-lh-body); color: var(--cc-text-body); }
.cc-small   { font-size: var(--cc-fs-small); line-height: var(--cc-lh-body); color: var(--cc-text-body); }
.cc-stat    { font-family: var(--cc-font-heading); font-size: var(--cc-fs-h4); line-height: 1.2; color: var(--cc-text-body); }
.cc-quote   { font-family: var(--cc-font-heading); font-size: var(--cc-fs-h3); line-height: 1.1; color: var(--cc-text-body); }
.cc-quote-attrib { font-size: var(--cc-fs-body-lg); font-weight: 700; color: var(--cc-text-body); }

/* ---- Containers / sections ---------------------------------------------- */
.cc-container      { width: 100%; max-width: var(--cc-container-text); margin: 0 auto; padding: 0 1.25rem; box-sizing: border-box; }
.cc-container-wide { width: 100%; max-width: var(--cc-container-wide); margin: 0 auto; padding: 0 1.25rem; box-sizing: border-box; }
.cc-section        { padding: var(--cc-section-pad) 0; }
.cc-section--dark  { background: var(--cc-bg-dark); color: var(--cc-text-on-dark); }
.cc-section--dark p { color: var(--cc-text-muted-on-dark); }
.cc-section--dark .cc-lead { color: var(--cc-text-muted-on-dark); }
.cc-section--mist  { background: var(--cc-bg-mist); color: var(--cc-black); }
.cc-section--mist p { color: var(--cc-black); }
.cc-section--mist h1, .cc-section--mist h2, .cc-section--mist h3 { color: var(--cc-ink); }
.cc-section--mist .cc-stat, .cc-section--mist .cc-quote, .cc-section--mist .cc-quote-attrib { color: var(--cc-slate); }
.cc-section--panel { background: var(--cc-bg-panel); color: var(--cc-text); }
.cc-section--brand { background: var(--cc-bg-brand); color: var(--cc-white); }
.cc-section--brand p, .cc-section--brand h2 { color: var(--cc-white); }

/* ---- Buttons (pills) ------------------------------------------------------ */
.cc-btn {
  display: inline-block;
  font-family: var(--cc-font-body);
  font-weight: 500;
  font-size: 1.25rem;               /* 20px in content; use .cc-btn--sm (15px) in the header */
  line-height: 1.7;
  padding: 3px 35px 5px;
  border-radius: var(--cc-radius-pill);
  border: 2px solid transparent;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}
.cc-btn:hover, .cc-btn:focus-visible { text-decoration: none; }
.cc-btn--sm { font-size: 0.9375rem; padding: 3px 30px 5px; }
/* 1. Outlined blue — on white/light backgrounds (header CTA) */
.cc-btn--outline-blue { color: var(--cc-blue); border-color: var(--cc-blue); background: transparent; }
.cc-btn--outline-blue:hover { background: var(--cc-blue); color: var(--cc-white); }
/* 2. Solid black — primary CTA over hero media */
.cc-btn--black { color: var(--cc-white); background: var(--cc-black); border-color: var(--cc-black); }
.cc-btn--black:hover { background: var(--cc-navy); border-color: var(--cc-navy); }
/* 3. Solid white — primary CTA on dark sections */
.cc-btn--white { color: var(--cc-blue); background: var(--cc-white); border-color: var(--cc-white); }
.cc-btn--white:hover { background: var(--cc-cloud); }
/* 4. Outlined white — on brand-blue band / dark sections */
.cc-btn--outline-white { color: var(--cc-white); border-color: var(--cc-white); background: transparent; }
.cc-btn--outline-white:hover { background: rgba(255,255,255,0.2); }
/* 5. Solid blue — not on the live site, but the natural primary for forms/apps */
.cc-btn--blue { color: var(--cc-white); background: var(--cc-blue); border-color: var(--cc-blue); }
.cc-btn--blue:hover { background: var(--cc-navy); border-color: var(--cc-navy); }

/* ---- Header ---------------------------------------------------------------- */
.cc-topbar { background: var(--cc-blue); color: var(--cc-white); height: var(--cc-topbar-h); display: flex; align-items: center; justify-content: flex-end; padding: 0 2rem; gap: 1.25rem; font-size: 0.9rem; font-weight: 500; }
.cc-topbar a { color: var(--cc-white); text-decoration: underline; }
.cc-nav { background: var(--cc-header-bg); backdrop-filter: blur(6px); height: var(--cc-nav-h); display: flex; align-items: center; padding: 0 2rem; box-sizing: border-box; }
.cc-nav__logo { width: 187px; display: block; }
.cc-nav__menu { display: flex; gap: 2rem; margin: 0 auto; padding: 0; list-style: none; font-size: var(--cc-fs-nav); font-weight: 500; }
.cc-nav__menu a { color: var(--cc-slate); }
.cc-nav__menu a:hover { color: var(--cc-blue); text-decoration: none; }
.cc-header--sticky { position: sticky; top: 0; z-index: 100; }
/* Sub-brand qualifier next to the logo (CloudCover Texas, a partner program, …) */
.cc-nav__sub { display: inline-flex; align-items: center; gap: 14px; margin-left: 14px; font-family: var(--cc-font-wordmark); font-size: 1.25rem; font-weight: normal; color: var(--cc-navy); white-space: nowrap; }
.cc-nav__sub::before { content: ""; width: 1px; height: 28px; background: var(--cc-slate); }
/* Mobile menu: a toggle button that shows the menu as a white panel under the nav bar */
.cc-nav__toggle { display: none; width: 40px; height: 40px; padding: 0; margin-left: auto; margin-right: 0.75rem; border: 0; background: none; cursor: pointer; }
.cc-nav__toggle span { display: block; width: 22px; height: 2px; margin: 5px auto; background: var(--cc-blue); transition: transform .2s, opacity .2s; }
.cc-nav.is-open .cc-nav__toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.cc-nav.is-open .cc-nav__toggle span:nth-child(2) { opacity: 0; }
.cc-nav.is-open .cc-nav__toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ---- Footer ---------------------------------------------------------------- */
.cc-footer { color: var(--cc-slate); font-size: var(--cc-fs-small); line-height: var(--cc-lh-body); }
.cc-footer h4 { font-family: var(--cc-font-body); font-weight: 700; font-size: 1rem; color: var(--cc-slate); margin-bottom: 0.75rem; }
.cc-footer a { color: var(--cc-slate); }
.cc-footer a:hover { color: var(--cc-blue); }
.cc-footer__grid { display: grid; grid-template-columns: 1fr 2fr 1fr; gap: var(--cc-gutter); }
.cc-footer__legal { border-top: 1px solid var(--cc-cloud); padding-block: 1.5rem 2rem; }
.cc-social { display: inline-flex; gap: 0.5rem; }
.cc-social a { width: 32px; height: 32px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: var(--cc-white); }
.cc-social a.linkedin { background: var(--cc-linkedin); }
.cc-social a.facebook { background: var(--cc-facebook); }
.cc-social a.x        { background: var(--cc-black); }

/* ---- Grids / feature blocks ------------------------------------------------ */
.cc-grid { display: grid; gap: 2.5rem var(--cc-gutter); }
.cc-grid--2 { grid-template-columns: repeat(2, 1fr); }
.cc-grid--3 { grid-template-columns: repeat(3, 1fr); }
.cc-grid--4 { grid-template-columns: repeat(4, 1fr); }
.cc-feature { text-align: left; }
.cc-feature__icon { width: 120px; height: 120px; margin-bottom: 1.25rem; }
.cc-feature h3 { font-size: 1.9rem; }
.cc-panel { background: var(--cc-bg-panel); padding: 2rem; }

/* ---- Responsive ------------------------------------------------------------ */
@media (max-width: 980px) {
  :root { --cc-fs-display: 3.5rem; --cc-fs-h1: 3rem; --cc-fs-h2: 2.4rem; --cc-fs-h3: 1.9rem; --cc-fs-h4: 1.6rem; --cc-fs-lead: 1.3rem; }
  .cc-grid--4 { grid-template-columns: repeat(2, 1fr); }   /* three-up grids stay three-up until phone width so no block is orphaned */
  .cc-footer__grid { grid-template-columns: 1fr 1fr; }
  .cc-nav__toggle { display: block; }
  .cc-nav__menu { display: none; position: absolute; left: 0; right: 0; top: 100%; margin: 0; padding: 0.75rem 1.25rem 1rem; flex-direction: column; gap: 0.9rem; background: var(--cc-white); border-top: 1px solid var(--cc-cloud); box-shadow: 0 8px 16px rgba(0,2,7,0.08); font-size: 1rem; }
  .cc-nav { position: relative; }
  .cc-nav.is-open .cc-nav__menu { display: flex; }
  .cc-nav__menu a { color: var(--cc-blue); }
}
@media (max-width: 767px) {
  :root { --cc-fs-display: 2.6rem; --cc-fs-h1: 2.4rem; --cc-fs-h2: 2rem; --cc-fs-h3: 1.6rem; --cc-fs-h4: 1.4rem; --cc-fs-lead: 1.2rem; --cc-fs-body-lg: 1.1rem; }
  .cc-grid--2, .cc-grid--3, .cc-grid--4, .cc-footer__grid { grid-template-columns: 1fr; }
  .cc-topbar { padding: 0 1.25rem; }
  .cc-nav { padding: 0 1.25rem; }
  .cc-nav__logo { width: 150px; }
  .cc-nav__sub { display: none; }   /* restate the sub-brand in the hero instead */
  .cc-btn { font-size: 1.05rem; padding: 3px 26px 5px; }
  .cc-btn--sm { font-size: 0.85rem; padding: 2px 16px 4px; }
}