/*
Theme Name: CB1 Specialty Concrete Child
Theme URI: https://cb1specialtyconcrete.com/
Template: astra
Description: Hand-coded Astra child theme for CB1 Specialty Concrete. Custom PHP page templates for Home, Commercial, the commercial industry landing pages, Request a Bid and Testimonials.
Version: 1.0.1
Author: CB1 Specialty Concrete
Text Domain: cb1-child
*/

/* ==========================================================================
   FONTS — self-hosted, see assets/fonts/README.md for the files to drop in.
   Variable woff2 with a static fallback so a missing variable file degrades
   to the system stack rather than to an invisible page.
   ========================================================================== */

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('assets/fonts/inter-variable-latin.woff2') format('woff2-variations'),
       url('assets/fonts/inter-variable-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC,
                 U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url('assets/fonts/archivo-variable-latin.woff2') format('woff2-variations'),
       url('assets/fonts/archivo-variable-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC,
                 U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ==========================================================================
   TOKENS
   ========================================================================== */

.cb1 {
  --navy: #0B0B0C;
  --navy-2: #1C1C1F;
  --navy-3: #151517;
  --gold: #D4A526;
  --gold-dark: #A8791C;
  --gray-bg: #F4F5F7;
  --text-dark: #1B2430;
  --text-mid: #5A6472;
  --white: #FFFFFF;
  --line: #E3E6EA;
  --silver: #C9CDD3;

  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
  --font-head: 'Archivo', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;

  --wrap: 1200px;
  --gutter: 24px;
  --radius: 8px;

  /* Vertical rhythm. Every band on every page derives its spacing from these
     three values, so sections align with their siblings no matter which
     template or PHP helper rendered them. See "SECTION RHYTHM" below. */
  --section-y: 72px;          /* standard band, top and bottom */
  --section-y-hero: 88px;     /* page-header bands (hero, inner-page banner) */
  --section-head-gap: 40px;   /* heading block -> section content */

  /* The distance from the viewport edge to the wrap's content column. Lets a
     full-bleed band (the split panels) start its text on exactly the same
     vertical line as every wrapped section above and below it. */
  --bleed: max(var(--gutter), calc((100vw - var(--wrap)) / 2 + var(--gutter)));
}

/* ==========================================================================
   RESET / BASE
   Scoped under .cb1 so Astra's own styling is untouched everywhere this
   theme's templates aren't in play (admin bar, plugin output, etc).
   ========================================================================== */

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

body.cb1 {
  margin: 0;
  font-family: var(--font-body);
  color: var(--text-dark);
  background: var(--white);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* <picture> wraps the <img> as a plain block.
   NOT display:contents. That exposes the <source> children to the parent
   layout, and a grid or flex container then counts each <source> as an item
   of its own: .cb1-gallery-imgs went from 16 items in 4 columns to 32 items
   alternating across 2, which shattered the home page project galleries.
   display:block keeps one box per image, so every existing `.cb1-x img` rule
   and every flex/grid parent behaves exactly as it did before <picture>. */
.cb1 picture { display: block; }

/* Mobile submenu toggle. The caret button is a sibling of the nav link rather
   than a child of it, so it is positioned over the row's right edge instead of
   sitting inside the anchor. Hidden above the mobile breakpoint, where hover
   opens the submenu. */
.cb1-nav .cb1-sub-toggle { display: none; }
@media (max-width: 960px) {
  .cb1-nav li.menu-item-has-children { position: relative; }
  .cb1-nav .cb1-sub-toggle {
    display: inline-flex; align-items: center; justify-content: center;
    position: absolute; right: 0; top: 0;
    width: 44px; height: 44px;
    background: none; border: 0; padding: 0; margin: 0;
    color: inherit; cursor: pointer;
  }
}


.cb1 img { max-width: 100%; display: block; height: auto; }
.cb1 a { text-decoration: none; color: inherit; }

.cb1 h1, .cb1 h2, .cb1 h3, .cb1 h4, .cb1 h5 {
  font-family: var(--font-head);
  font-weight: 700;
  color: var(--navy);
  margin: 0;
  line-height: 1.2;
  letter-spacing: -0.01em;
}

.cb1 p { margin: 0; }
.cb1 ul { margin: 0; }

.cb1 .wrap {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

/* ==========================================================================
   SECTION RHYTHM
   One padding rule for every band, plus three tone modifiers. Tone is always
   a class — never an inline background — so adjacent bands can be reasoned
   about in CSS and the rhythm stays identical across templates.
   ========================================================================== */

.cb1 section { padding: var(--section-y) 0; }

/* background-color, not the shorthand, so a band that also carries a photo
   background (hero, banner, final CTA) keeps its image and uses the tone as
   the colour underneath it. */
.cb1-sec--light { background-color: var(--white); color: var(--text-dark); }
.cb1-sec--alt   { background-color: var(--gray-bg); color: var(--text-dark); }
.cb1-sec--dark  { background-color: var(--navy); color: #fff; }
/* Scoped to the section head, not all descendants, so a light card dropped
   into a dark band keeps its own dark heading colour. */
.cb1-sec--dark .cb1-section-head h2 { color: #fff; }
.cb1-sec--dark .cb1-section-head p { color: var(--silver); }

/* Two bands of the same tone in a row are one visual band: drop the seam so
   the gap between their content stays 72px instead of doubling to 144px. */
.cb1 .cb1-sec--light + .cb1-sec--light,
.cb1 .cb1-sec--alt + .cb1-sec--alt,
.cb1 .cb1-sec--dark + .cb1-sec--dark { padding-top: 0; }

/* Page-header bands share one scale so a hero and an inner-page banner sit
   at the same height relative to the header above them. */
.cb1-hero,
.cb1-banner { padding: var(--section-y-hero) 0; }

.cb1 .eyebrow {
  text-transform: uppercase;
  letter-spacing: 1.5px;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--gold-dark);
}

.cb1 .screen-reader-text {
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%);
  white-space: nowrap;
}

/* Keyboard focus — the mockups had none; this is a baseline a11y requirement. */
.cb1 a:focus-visible,
.cb1 button:focus-visible,
.cb1 input:focus-visible,
.cb1 select:focus-visible,
.cb1 textarea:focus-visible,
.cb1 summary:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 2px;
}

.cb1 .skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 999;
  background: var(--gold); color: var(--navy); padding: 12px 20px; font-weight: 700;
}
.cb1 .skip-link:focus { left: 0; }

/* ==========================================================================
   BUTTONS
   ========================================================================== */

.cb1 .btn {
  display: inline-block;
  padding: 14px 26px;
  border-radius: 4px;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 14.5px;
  letter-spacing: .3px;
  text-align: center;
  cursor: pointer;
  border: none;
  transition: transform .15s ease, background-color .15s ease;
}
.cb1 .btn:hover { transform: translateY(-1px); }
/* Label is navy, not white: white on --gold is 2.28:1 and on --gold-dark 3.88:1,
   both below the 4.5:1 AA needs for the one control the whole site exists to get
   pressed. Navy reads 8.63:1 on gold and 5.07:1 on the hover state, and matches
   the navy-on-gold treatment .cb1-lp-points li::before already uses. */
.cb1 .btn-gold { background: var(--gold); color: var(--navy); }
.cb1 .btn-gold:hover { background: var(--gold-dark); }
.cb1 .btn-navy { background: var(--navy); color: #fff; }
.cb1 .btn-outline { background: transparent; border: 2px solid #fff; color: #fff; }
.cb1 .btn-outline:hover { background: rgba(255,255,255,.12); }
.cb1 .btn-outline-navy { background: transparent; border: 2px solid #E7E8EA; color: #E7E8EA; }
.cb1 .btn-outline-navy:hover { background: rgba(255,255,255,.1); }

/* The arrow nudges forward on hover — same directive cue as .cb1-more links
   elsewhere on the site, applied to a full button instead of a text link. */
.cb1-btn-arrow span { display: inline-block; transition: transform .15s ease; }
.cb1-btn-arrow:hover span { transform: translateX(3px); }
@media (prefers-reduced-motion: reduce) {
  .cb1-btn-arrow span, .cb1-btn-arrow:hover span { transition: none; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .cb1 .btn, .cb1 .btn:hover { transition: none; transform: none; }
}

/* ==========================================================================
   CARD HOVER
   Every bordered/backgrounded card across the site lifts slightly on hover.
   Split in two: light cards (white/gray sections) get a normal dark shadow;
   dark cards (translucent-white on navy sections) get a light glow instead,
   since a black shadow is invisible against a near-black background — and
   also brighten their own background/border a touch, which reads as "lift"
   even before the shadow is visible. Cards with no visible border/background
   of their own (why-card, process-card — plain icon+text, no box) are left
   alone; a shadow appearing around invisible edges would look like a bug.
   ========================================================================== */

.cb1-sys-card, .cb1-ind-card, .cb1-feat-card, .cb1-usecase-card,
.cb1-rec-card, .cb1-testi, .cb1-hero-card {
  transition: transform .2s ease, box-shadow .2s ease,
              background-color .2s ease, border-color .2s ease;
}

.cb1-sys-card:hover, .cb1-ind-card:hover,
.cb1-feat-card:hover, .cb1-usecase-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 40px rgba(11,11,12,.08);
}

.cb1-rec-card:hover, .cb1-testi:hover {
  transform: translateY(-4px);
  background-color: rgba(255,255,255,.1);
  border-color: rgba(255,255,255,.3);
  box-shadow: 0 20px 40px rgba(0,0,0,.22), 0 0 0 1px rgba(255,255,255,.06);
}

/* Skips the background/border brightening the other dark cards get — the
   commercial variant already owns a gold border/background, and a generic
   hover override would fight it. Shadow-only keeps both variants intact. */
.cb1-hero-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 40px rgba(0,0,0,.22), 0 0 0 1px rgba(255,255,255,.06);
}

@media (prefers-reduced-motion: reduce) {
  .cb1-sys-card, .cb1-ind-card, .cb1-feat-card, .cb1-usecase-card,
  .cb1-rec-card, .cb1-testi, .cb1-hero-card,
  .cb1-sys-card:hover, .cb1-ind-card:hover, .cb1-feat-card:hover,
  .cb1-usecase-card:hover, .cb1-rec-card:hover, .cb1-testi:hover,
  .cb1-hero-card:hover { transition: none; transform: none; }
}

/* ==========================================================================
   HEADER
   ========================================================================== */

.cb1-header {
  position: sticky; top: 0; z-index: 50;
  background: var(--navy);
  border-bottom: 1px solid #2A2A2D;
}
/* Admin-bar offsets. The bar is 32px, 46px on tablet — but at 600px and below
   WordPress switches #wpadminbar to position:absolute, so it scrolls away with
   the page. Holding the 46px offset there parked the sticky header 46px down
   from the viewport with nothing behind it: the white band under the topbar.
   Below 600px the header goes back to top:0. Logged-out visitors never had
   this, so it reads as a phone-only bug when it is really an admin-only one. */
body.admin-bar .cb1-header { top: 32px; }
@media (max-width: 782px) { body.admin-bar .cb1-header { top: 46px; } }
@media (max-width: 600px) { body.admin-bar .cb1-header { top: 0; } }

.cb1-topbar { background: var(--navy); color: #cfd8e6; font-size: 12.5px; }
.cb1-topbar .wrap {
  display: flex; justify-content: space-between; align-items: center;
  padding: 6px var(--gutter); gap: 12px;
}
.cb1-topbar a { color: #fff; font-weight: 700; white-space: nowrap; }

.cb1-navrow {
  display: flex; align-items: center; justify-content: space-between;
  gap: 20px; padding: 12px var(--gutter);
  max-width: var(--wrap); margin: 0 auto;
}
.cb1-logo img { height: 58px; width: auto; }
.cb1-logo .cb1-logo-text {
  font-family: var(--font-head); color: #fff; font-size: 20px; font-weight: 800;
  letter-spacing: .5px; line-height: 1.1;
}
.cb1-logo .cb1-logo-text span { color: var(--gold); display: block; font-size: 11px; letter-spacing: 2px; font-weight: 600; }

.cb1-nav ul { list-style: none; padding: 0; margin: 0; }
.cb1-nav > ul {
  display: flex; gap: 28px; align-items: center;
  font-size: 14.5px; font-weight: 600; color: #E7E8EA;
}
.cb1-nav > ul > li { position: relative; }
.cb1-nav > ul > li > a { display: flex; align-items: center; gap: 5px; padding: 6px 0; color: #E7E8EA; }
.cb1-nav > ul > li > a:hover,
.cb1-nav .current-menu-item > a,
.cb1-nav .current_page_item > a,
.cb1-nav .is-current > a { color: var(--gold); }

.cb1-nav .cb1-caret { width: 11px; height: 11px; flex: none; transition: transform .15s ease; }
.cb1-nav > ul > li:hover .cb1-caret { transform: rotate(180deg); }

.cb1-nav .sub-menu {
  display: none; position: absolute; top: 100%; left: 0;
  background: var(--navy-3); border: 1px solid #2A2A2D;
  box-shadow: 0 12px 24px rgba(0,0,0,.4);
  min-width: 240px; padding: 10px 0; border-radius: 6px;
}
.cb1-nav > ul > li:hover .sub-menu,
.cb1-nav > ul > li:focus-within .sub-menu { display: block; }
.cb1-nav .sub-menu a {
  display: block; padding: 9px 18px;
  font-size: 13.5px; font-weight: 500; color: var(--silver);
}
.cb1-nav .sub-menu a:hover,
.cb1-nav .sub-menu .current-menu-item > a,
.cb1-nav .sub-menu .is-current > a { color: var(--gold); background: #1F1F22; }

.cb1-navcta { display: flex; gap: 10px; }
.cb1-navcta .btn { padding: 11px 16px; font-size: 13px; white-space: nowrap; }

/* Mobile toggle — the static mockups simply hid the nav on small screens,
   which left phones with no navigation at all. */
.cb1-nav-toggle {
  display: none; background: transparent; border: 1px solid #3A3A3D;
  border-radius: 5px; padding: 9px 11px; cursor: pointer;
}
.cb1-nav-toggle span {
  display: block; width: 20px; height: 2px; background: #fff; border-radius: 2px;
  transition: transform .2s ease, opacity .2s ease;
}
.cb1-nav-toggle span + span { margin-top: 4px; }
.cb1-nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.cb1-nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.cb1-nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* ==========================================================================
   HERO (home)
   ========================================================================== */

.cb1-hero {
  position: relative; color: #fff; min-height: 560px;
  display: flex; align-items: center;
  background-color: var(--navy);
  overflow: hidden;
}
.cb1-hero h1 { color: #fff; font-size: clamp(28px, 5vw, 44px); max-width: 760px; margin-top: 10px; }
.cb1-hero .sub { font-size: 17px; color: var(--silver); max-width: 620px; margin: 18px 0 32px; }

.cb1-hero-slideshow { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.cb1-hero-slide {
  position: absolute; inset: 0;
  background-size: cover; background-position: center; background-repeat: no-repeat;
  transform: translateX(100%);
  animation-name: cb1-hero-push; animation-iteration-count: infinite; animation-fill-mode: both;
  animation-timing-function: ease-in-out;
}
.cb1-hero-overlay {
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, rgba(10,10,11,.62), rgba(10,10,11,.48));
}
.cb1-hero > .wrap { position: relative; z-index: 2; }
.cb1-hero h1, .cb1-hero .sub, .cb1-hero .eyebrow { text-shadow: 0 2px 10px rgba(0,0,0,.55); }

/* @keyframes cb1-hero-push is generated inline per-template (percentages
   depend on slide count — see template-home.php) so each slide waits
   off-screen right, pushes in over the current slide as it's pushed out to
   the left, holds, then repeats. Both sides stay covered by real slide
   content throughout the transition, so no gap. */

@media (prefers-reduced-motion: reduce) {
  .cb1-hero-slide { animation: none; transform: translateX(100%); }
  .cb1-hero-slide:first-child { transform: translateX(0); }
}

.cb1-hero-split {
  display: grid; grid-template-columns: 1fr 1fr; gap: 20px;
  max-width: 820px; margin-top: 8px;
}
.cb1-hero-card {
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.25);
  border-radius: var(--radius); padding: 22px;
  backdrop-filter: blur(2px);
}
.cb1-hero-card.is-commercial { border-color: var(--gold); background: rgba(212,165,38,.16); }
.cb1-hero-card .tag {
  font-size: 11.5px; letter-spacing: 1px; text-transform: uppercase;
  font-weight: 700; color: var(--gold); margin-bottom: 6px;
}
.cb1-hero-card h2 { color: #fff; font-size: 20px; margin-bottom: 8px; }
.cb1-hero-card p { font-size: 13.5px; color: var(--silver); margin-bottom: 16px; }
.cb1 .cb1-hero-phone { margin-top: var(--gutter); font-size: 15px; color: var(--silver); }
.cb1-hero-phone b { color: #fff; font-weight: 700; }

/* ==========================================================================
   TRUST STRIP
   ========================================================================== */

/* ==========================================================================
   SPLIT INTENT PANELS (home)
   ========================================================================== */

.cb1-split { padding: 0; }
.cb1-split-row { display: grid; grid-template-columns: 3fr 2fr; }

/* The row bleeds edge to edge, but the copy inside it must start on the same
   vertical line as every wrapped section: --bleed on the outer side, and a
   fixed gap on the side that meets the photo. */
.cb1-panel { padding: var(--section-y) 48px; }
.cb1-split-row > .cb1-panel:first-child { padding-left: var(--bleed); }
.cb1-split-row > .cb1-panel:last-child { padding-right: var(--bleed); }
.cb1-panel.is-commercial { background: var(--navy); color: #fff; }
.cb1-panel.is-residential { background: var(--gray-bg); color: var(--text-dark); }
.cb1-panel .eyebrow-light {
  color: var(--gold); font-size: 12.5px; letter-spacing: 1.5px;
  font-weight: 700; text-transform: uppercase;
}
.cb1-panel h2 { font-size: clamp(23px, 3vw, 30px); margin: 10px 0 14px; }
.cb1-panel.is-commercial h2 { color: #fff; }
.cb1-panel .desc { font-size: 15px; max-width: 520px; margin-bottom: 26px; }
.cb1-panel.is-commercial .desc { color: var(--silver); }
.cb1-panel.is-residential .desc { color: var(--text-mid); }

.cb1-tile-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 28px; }
.cb1-tile-grid.is-res { grid-template-columns: repeat(2, 1fr); }
.cb1-tile {
  border: 1px solid rgba(255,255,255,.18); border-radius: 6px;
  padding: 16px 12px; font-size: 13px; font-weight: 600; text-align: center;
  display: flex; align-items: center; justify-content: center;
}
.cb1-panel.is-commercial .cb1-tile { background: rgba(255,255,255,.06); color: #fff; }
.cb1-panel.is-residential .cb1-tile {
  background: #fff; border-color: var(--line); color: var(--text-dark);
  box-shadow: 0 1px 3px rgba(0,0,0,.04);
}
/* Shares the tile grid's 4-track, 12px-gap layout — spanning 2 of 4 columns
   lands on the exact same edge as 1 of 2, at any breakpoint the tile grid
   uses, so the button row's seam lines up with the tile grid's above it. */
.cb1-panel-btns { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.cb1-panel-btns .btn { grid-column: span 2; }
.cb1-panel-btns .btn:only-child { grid-column: 1 / -1; }
.cb1-panel-photo img { width: 100%; height: 100%; object-fit: cover; min-height: 460px; }

/* ==========================================================================
   HUB CARDS — the two-up "pick your path" band
   A wider card than .cb1-feat-card: it carries a tick list and a button, so
   two of them fill the row rather than four. Borrows the same white/--line/
   --radius card treatment used by the feature and use-case grids so the three
   bands read as one family down the page.
   ========================================================================== */

.cb1-hub-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; }
.cb1-hub-card {
  display: flex; flex-direction: column;
  background: #fff; border: 1px solid var(--line); border-radius: 10px;
  padding: 30px;
}
.cb1-hub-card h3 { font-size: 19px; margin-bottom: 10px; }
.cb1-hub-card > p { color: var(--text-mid); font-size: 14px; margin-bottom: 16px; }
.cb1-hub-list { list-style: none; margin: 0 0 22px; padding: 0; }
.cb1-hub-list li {
  font-size: 13.5px; color: var(--text-mid);
  padding: 0 0 0 20px; margin-bottom: 8px; position: relative;
}
/* The tick is decorative — the list already reads as a list, so it is drawn
   with ::before rather than typed into the markup where a screen reader
   would announce it on every row. */
.cb1-hub-list li::before {
  content: ""; position: absolute; left: 2px; top: 6px;
  width: 8px; height: 4px;
  border-left: 2px solid var(--gold-dark); border-bottom: 2px solid var(--gold-dark);
  transform: rotate(-45deg);
}
/* margin-top:auto pins the button to the card floor, so two cards with
   different list lengths still line their buttons up. */
.cb1-hub-card .btn { margin-top: auto; align-self: flex-start; }
/* Same trap as the in-article CTA: .btn-outline-navy is drawn in #E7E8EA for
   the navy header, which on this white card is near-white on near-white.
   Restated in navy, inverting on hover, so the second card still reads as the
   secondary choice without disappearing. */
.cb1-hub-card .btn-outline-navy { border-color: var(--navy); color: var(--navy); }
.cb1-hub-card .btn-outline-navy:hover { background: var(--navy); color: #fff; }

@media (max-width: 860px) {
  .cb1-hub-grid { grid-template-columns: 1fr; }
  .cb1-hub-card { padding: 24px; }
}

/* ==========================================================================
   SECTION HEADS
   ========================================================================== */

.cb1-section-head { margin: 0 0 var(--section-head-gap); }
.cb1-section-head.is-center { text-align: center; margin-left: auto; margin-right: auto; }
.cb1-section-head h2 { font-size: clamp(24px, 3.4vw, 32px); margin: 10px 0 12px; }
.cb1-section-head p { color: var(--text-mid); font-size: 15px; margin-top: 8px; }

/* ==========================================================================
   SYSTEMS GRID (home)
   ========================================================================== */

.cb1-sys-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.cb1-sys-card {
  border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden;
  display: flex; flex-direction: column; background: #fff;
}
.cb1-sys-card img { height: 190px; width: 100%; object-fit: cover; }
.cb1-sys-body { padding: 20px; display: flex; flex-direction: column; flex: 1; }
.cb1-sys-card h3 { font-size: 17px; margin-bottom: 6px; }
.cb1-sys-card p { font-size: 13.5px; color: var(--text-mid); margin-bottom: 12px; flex: 1; }
.cb1-sys-card .cb1-more { font-size: 13px; font-weight: 700; color: var(--gold-dark); }

/* ==========================================================================
   INDUSTRY CARD GRID (commercial)
   ========================================================================== */

.cb1-ind-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.cb1-ind-card {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 26px 20px; display: flex; flex-direction: column;
}
.cb1-ind-icon { width: 42px; height: 42px; margin-bottom: 16px; }
.cb1-ind-card h3 { font-size: 15px; margin-bottom: 8px; }
.cb1-ind-card p { font-size: 12.5px; color: var(--text-mid); margin-bottom: 14px; flex: 1; }
.cb1-ind-card .cb1-more { font-size: 12.5px; font-weight: 700; color: var(--gold-dark); }

/* ==========================================================================
   WHY / NUMBERED GRID
   ========================================================================== */

.cb1-why-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
.cb1-why-num { font-size: 13px; font-weight: 700; color: var(--gold); letter-spacing: 1px; margin-bottom: 10px; }
.cb1-why-card h3 { font-size: 16px; margin-bottom: 8px; }
.cb1-why-card p { font-size: 13.5px; color: var(--text-mid); }

/* ==========================================================================
   DARK CHIP STRIP
   ========================================================================== */

.cb1-chip-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-bottom: 26px; }
.cb1-chip-row span,
.cb1-chip-row a {
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.18);
  border-radius: 30px; padding: 10px 20px; font-size: 13.5px; font-weight: 600;
}
.cb1-chip-row a:hover { border-color: var(--gold); color: var(--gold); }

/* Heading and chips are already centred; the CTA button underneath them
   matches at every width, not just narrow ones. */
.cb1-chip-row + .btn { display: block; width: fit-content; margin: 0 auto; }

/* ==========================================================================
   FEATURES / USE CASES / RECOMMENDATIONS (industry pages)
   ========================================================================== */

.cb1-feat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.cb1-feat-card {
  background: #fff; border: 1px solid var(--line);
  border-radius: var(--radius); padding: 26px 22px;
}
.cb1-feat-icon { width: 38px; height: 38px; margin-bottom: 14px; }
.cb1-feat-card h3 { font-size: 15.5px; margin-bottom: 8px; }
.cb1-feat-card p { font-size: 13.5px; color: var(--text-mid); }

.cb1-usecase-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.cb1-usecase-card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 22px; }
.cb1-usecase-card h3 { font-size: 15px; margin-bottom: 6px; }
.cb1-usecase-card p { font-size: 13px; color: var(--text-mid); }

.cb1-rec-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.cb1-rec-grid.is-two { grid-template-columns: repeat(2, 1fr); }
.cb1-rec-card {
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.18);
  border-radius: var(--radius); padding: 24px;
}
.cb1-rec-card h3 { color: #fff; font-size: 16px; margin-bottom: 8px; }
.cb1-rec-card p { color: var(--silver); font-size: 13.5px; margin-bottom: 14px; }
.cb1-rec-card a { color: var(--gold); font-size: 13px; font-weight: 700; }

/* ==========================================================================
   PAGE BANNER (inner pages)
   ========================================================================== */

.cb1-banner {
  position: relative; color: #fff;
  background-color: var(--navy);
  background-size: cover; background-position: center; background-repeat: no-repeat;
}
.cb1-crumb { font-size: 12.5px; color: var(--silver); margin-bottom: 14px; }
.cb1-crumb a { color: var(--gold); font-weight: 600; }
.cb1-banner h1 { color: #fff; font-size: clamp(26px, 4.4vw, 38px); max-width: 780px; line-height: 1.22; margin-top: 8px; }
.cb1-banner > .wrap > p { color: var(--silver); font-size: 15.5px; max-width: 660px; margin-top: 14px; }
.cb1-banner-cta { display: flex; gap: 14px; margin-top: 28px; flex-wrap: wrap; }
/* Row-gap and column-gap split: items sitting on the same line still get
   full breathing room, but wrapped rows on narrow viewports don't stack up
   the same 28px gap vertically too — that's what read as "huge space"
   between rows once this list wraps to 2-3 lines on a phone. */
.cb1 .cb1-banner-meta {
  display: flex; flex-wrap: wrap; gap: 12px 28px; margin-top: 26px;
  font-size: 13px; color: var(--silver); list-style: none; padding: 0;
}
.cb1-banner-meta b { color: var(--gold); }

/* ==========================================================================
   INTRO COPY
   ========================================================================== */

/* text-align-last keeps the final line of each paragraph left-aligned rather
   than stretched full-width (justify's usual tell), and hyphens gives the
   line-breaking algorithm room to avoid the wide gaps justify text is prone
   to at this column width. */
.cb1-intro-copy {
  color: var(--text-mid); font-size: 15.5px;
  text-align: justify; text-align-last: left;
  hyphens: auto; -webkit-hyphens: auto;
}
.cb1-intro-copy strong { color: var(--text-dark); }
.cb1-intro-copy p + p { margin-top: 16px; }

/* Editor content sitting under an intro block. .cb1-prose supplies the heading,
   list and table rules; this only spaces it from the intro and stops the first
   heading inheriting .cb1-prose h2's 40px top margin against it. Line length is
   held to a readable measure rather than the full 1140px wrap. */
.cb1-page-prose { margin-top: 30px; max-width: none; }
.cb1-page-prose > :first-child { margin-top: 0; }
/* Lists inside editor content need the same vertical rhythm as paragraphs;
   .cb1-prose only spaces the items from each other, not the block from its
   surroundings, because the blog layout supplies that from elsewhere. */
.cb1-page-prose ul, .cb1-page-prose ol { margin: 14px 0 18px; }
.cb1-page-prose li { margin-bottom: 0; }


/* ==========================================================================
   GALLERY
   ========================================================================== */

.cb1-gal-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.cb1-gal-grid.is-four { grid-template-columns: repeat(4, 1fr); }
.cb1-gal-item {
  position: relative; border-radius: var(--radius); overflow: hidden;
  background: var(--gray-bg); margin: 0;
}
.cb1-gal-item img { height: 220px; width: 100%; object-fit: cover; }
.cb1-gal-grid.is-four .cb1-gal-item img { height: 190px; }
.cb1-gal-grid.is-square .cb1-gal-item img { height: auto; aspect-ratio: 1 / 1; }
.cb1-gal-cap {
  position: absolute; bottom: 0; left: 0; right: 0;
  background: linear-gradient(180deg, transparent, rgba(0,0,0,.75));
  color: #fff; font-size: 11.5px; font-weight: 600; padding: 24px 12px 10px;
}

/* Home gallery: two labelled columns */
.cb1-gallery-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; }
.cb1-gallery-col h3 {
  font-size: 14px; letter-spacing: .5px; text-transform: uppercase;
  color: var(--navy); margin-bottom: 14px; text-align: center;
}
.cb1-gallery-imgs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.cb1-gallery-imgs img { width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 6px; }

/* ==========================================================================
   BEFORE / AFTER TRANSFORMATION SLIDER
   ========================================================================== */

/* Modeled on the live site's own before/after widget (Elementor's UAEL, built
   on the "twentytwenty" comparison-slider pattern): labels stay hidden until
   the visitor engages the frame, and there's no visible slider track — the
   handle itself is the only control a sighted user sees. The real <input
   type="range"> that drives it (see the JSON-LD-adjacent markup in
   cb1_before_after_section()) is kept for keyboard/screen-reader use via the
   .screen-reader-text utility, so nothing here costs any accessibility. */
.cb1-ba-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.cb1-ba-frame {
  position: relative; aspect-ratio: 4 / 3; border-radius: var(--radius);
  overflow: hidden; background: var(--gray-bg); cursor: ew-resize;
  touch-action: pan-y;
}
.cb1-ba-frame:focus-within { outline: 3px solid var(--gold); outline-offset: 2px; }
.cb1-ba-img {
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
}
.cb1-ba-img.is-before { clip-path: inset(0 50% 0 0); }
.cb1-ba-handle {
  position: absolute; top: 0; bottom: 0; left: 50%;
  width: 3px; background: #fff; transform: translateX(-50%);
  pointer-events: none;
}
.cb1-ba-handle::before {
  content: ''; position: absolute; inset: 0; box-shadow: 0 0 0 1px rgba(0,0,0,.15);
}
.cb1-ba-handle ion-icon {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 38px; height: 38px; border-radius: 50%;
  background: #fff; color: var(--navy); font-size: 16px;
  border: 3px solid #fff; box-sizing: content-box;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 0 12px rgba(51,51,51,.5);
}
.cb1-ba-tag {
  position: absolute; top: 12px; font-size: 11px; font-weight: 700;
  letter-spacing: .5px; text-transform: uppercase; color: #fff;
  background: rgba(11,11,12,.65); padding: 5px 10px; border-radius: 4px;
  pointer-events: none; opacity: 0; transition: opacity .2s ease;
}
.cb1-ba-tag.is-before { left: 12px; }
.cb1-ba-tag.is-after { right: 12px; }
.cb1-ba-frame:hover .cb1-ba-tag,
.cb1-ba-frame:focus-within .cb1-ba-tag { opacity: 1; }

/* ==========================================================================
   PROCESS
   ========================================================================== */

.cb1-process-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
.cb1-process-card { text-align: center; padding: 0 10px; }
.cb1-process-num {
  width: 46px; height: 46px; border-radius: 50%;
  background: var(--navy); color: #fff; font-family: var(--font-head);
  font-weight: 700; font-size: 17px;
  display: flex; align-items: center; justify-content: center; margin: 0 auto 16px;
}
.cb1-process-card h3 { font-size: 15.5px; margin-bottom: 8px; }
.cb1-process-card p { font-size: 13.5px; color: var(--text-mid); }

/* ==========================================================================
   TESTIMONIALS
   ========================================================================== */

.cb1-stars { color: var(--gold); font-size: 14px; margin-bottom: 10px; letter-spacing: 2px; }

/* Reviews marquee. The track holds two identical halves and slides exactly
   -50%, so the second half is under the cursor at the moment the animation
   snaps back — the loop reads as continuous. Track width comes from the
   card count (see cb1_reviews_marquee), not from CSS. */
.cb1-testi-marquee {
  overflow: hidden; padding: 10px 0 6px;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
}
.cb1-testi-track {
  display: flex; gap: 22px; width: max-content; padding: 0 22px;
  animation: cb1-marquee 60s linear infinite;
}
.cb1-testi-marquee:hover .cb1-testi-track { animation-play-state: paused; }
@keyframes cb1-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

.cb1-testi {
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.15);
  border-radius: var(--radius); padding: 22px; margin: 0;
  flex: 0 0 320px; width: 320px; min-height: 250px;
  display: flex; flex-direction: column; justify-content: center;
  text-align: left;
}
/* Cards stretch to the tallest in the row, so a one-line review would otherwise
   sit at the top of a half-empty card. Centring the group keeps short and long
   quotes looking deliberate at the same card height.

   The reset is for Astra, which styles a bare <blockquote> with a 5px left
   rule, 20px padding, italics and a 3em indent — kept here rather than
   swapping the element for a <div>, so the quote stays semantic. */
.cb1-testi-body {
  --testi-lines: 6;
  --testi-size: 13.5px;
  --testi-leading: 1.55;
  flex: 0 1 auto; min-height: 0; overflow: hidden;
  max-height: calc(var(--testi-size) * var(--testi-leading) * var(--testi-lines));
  margin: 0 0 16px; padding: 0; border: 0;
  font-style: normal; font-size: 1em;
  overscroll-behavior: contain;
  scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.28) transparent;
}
.cb1-testi-body p {
  font-size: var(--testi-size); line-height: var(--testi-leading);
  color: var(--silver); margin: 0; overflow: hidden;
  display: -webkit-box; -webkit-box-orient: vertical;
  -webkit-line-clamp: var(--testi-lines); line-clamp: var(--testi-lines);
}

/* Reveal the rest of a clamped quote by scrolling it in place. max-height is
   already pinned to exactly the clamp height, so unclamping on hover changes
   nothing about the card's shape — a long quote gains a scrollbar, a short one
   is unaffected. Growing the body instead (the usual flex approach) would make
   every short card visibly reflow on hover. The marquee pauses on hover, so the
   card is stationary while being read. */
.cb1-testi:hover .cb1-testi-body { overflow-y: auto; }
.cb1-testi:hover .cb1-testi-body p { -webkit-line-clamp: unset; line-clamp: unset; }

/* Touch has no hover, so leave long quotes scrollable outright — otherwise the
   tail of every clamped review is unreachable on a phone. */
@media (hover: none) {
  .cb1-testi-body { overflow-y: auto; }
  .cb1-testi-body p { -webkit-line-clamp: unset; line-clamp: unset; }
}
.cb1-testi .who { font-size: 13.5px; display: block; color: #fff; }
.cb1-testi .service { font-size: 12px; color: #9A9EA6; display: block; margin-top: 3px; }

@media (max-width: 960px) { .cb1-testi { flex-basis: 280px; width: 280px; } }
@media (prefers-reduced-motion: reduce) {
  .cb1-testi-track { animation: none; }
  .cb1-testi-marquee { overflow-x: auto; }
}

/* Testimonials page trust strip */
.cb1-trust-strip { background: var(--navy); color: #fff; }
.cb1-trust-strip .wrap {
  display: flex; justify-content: space-between; align-items: center;
  flex-wrap: wrap; gap: 16px; text-align: center;
  padding-top: 40px; padding-bottom: 40px;
}
.cb1-trust-item { flex: 1; min-width: 180px; }
.cb1-trust-item b { display: block; font-family: var(--font-head); font-size: 26px; color: var(--gold); margin-bottom: 4px; }
.cb1-trust-item span { font-size: 13px; color: var(--silver); }

/* Outbound link to CB1's Google Business profile, under the reviews marquee
   on the testimonials page. */
.cb1-google-cta {
  display: flex; align-items: center; justify-content: center; gap: 22px;
  flex-wrap: wrap; text-align: center;
}
.cb1-google-cta p { color: var(--text-mid); font-size: 14.5px; margin: 0; max-width: 480px; }

/* ==========================================================================
   SERVICE AREAS
   ========================================================================== */

/* Flex-wrap so each chip stays its own width (no stretched gaps around short
   labels like "Austin"), but capped to a centered column so the 12 cities
   taper into a 7/5 split instead of packing ~10 onto row one and stranding
   2 on their own below it. */
.cb1 .cb1-area-chips {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: 14px; max-width: 960px; margin: 0 auto; list-style: none; padding: 0;
}
.cb1-area-chips li {
  display: inline-flex; align-items: center; gap: 7px;
  border: 1px solid var(--line); border-radius: 30px;
  padding: 9px 18px; font-size: 13.5px; font-weight: 600; color: var(--text-mid);
}
.cb1-area-chips ion-icon { font-size: 15px; flex-shrink: 0; color: var(--gold-dark); }

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

.cb1-faq-list { max-width: 820px; }
.cb1-faq-list.is-center { margin: 0 auto; }
.cb1 details {
  background: #fff; border: 1px solid var(--line);
  border-radius: 6px; padding: 16px 20px; margin-bottom: 10px;
}
.cb1 summary {
  font-family: var(--font-head); font-weight: 700; font-size: 14.5px;
  cursor: pointer; color: var(--navy); list-style-position: inside;
}
.cb1-faq-answer {
  font-size: 13.5px; color: var(--text-mid); margin-top: 10px;
}
.cb1-faq-answer p,
.cb1-faq-answer ul,
.cb1-faq-answer ol { margin-top: 10px; }
.cb1-faq-answer p:first-child,
.cb1-faq-answer ul:first-child,
.cb1-faq-answer ol:first-child { margin-top: 0; }
.cb1-faq-answer strong { color: var(--text-dark); }
.cb1-faq-answer ul,
.cb1-faq-answer ol { padding-left: 20px; }
.cb1-faq-answer li + li { margin-top: 4px; }
.cb1-faq-answer a { color: var(--gold-dark); font-weight: 600; text-decoration: underline; }

/* Grouped FAQ page (template-faq.php). The accordions themselves reuse
   .cb1-faq-list above — only the category heading is new. */
.cb1-faq-cat { margin-bottom: 52px; }
.cb1-faq-cat:last-child { margin-bottom: 0; }
.cb1-faq-cat-head { display: flex; align-items: center; gap: 14px; margin-bottom: 22px; }
.cb1-faq-cat-head h2 { font-size: 22px; }
.cb1-faq-cat-num {
  background: var(--navy); color: var(--gold);
  font-family: var(--font-head); font-weight: 700; font-size: 14px;
  width: 34px; height: 34px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; flex: none;
}
/* Offset for the sticky header so a chip jump doesn't hide the heading. */
.cb1-faq-cat { scroll-margin-top: 110px; }

/* ==========================================================================
   PROCESS PAGE (template-our-process.php)
   ========================================================================== */

.cb1-step-row {
  display: grid; grid-template-columns: 70px 1fr; gap: 24px;
  padding: 28px 0; border-bottom: 1px solid var(--line);
}
.cb1-step-row:last-child { border-bottom: none; }
.cb1-step-num {
  width: 56px; height: 56px; border-radius: 50%;
  background: var(--navy); color: #fff;
  font-family: var(--font-head); font-weight: 700; font-size: 20px;
  display: flex; align-items: center; justify-content: center;
}
.cb1-step-body h3 { font-size: 19px; margin-bottom: 8px; }
.cb1-step-body p { font-size: 14.5px; color: var(--text-mid); }
.cb1-step-tag {
  display: inline-block; font-size: 11.5px; font-weight: 700;
  color: var(--gold-dark); text-transform: uppercase; letter-spacing: .4px;
  background: rgba(212,165,38,.12); padding: 4px 10px; border-radius: 20px;
  margin-bottom: 10px;
}

.cb1-timeline-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.cb1-timeline-card {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 22px; text-align: center;
}
.cb1-timeline-card h3 { font-size: 15px; margin-bottom: 8px; }
.cb1-timeline-card p { font-size: 13px; color: var(--text-mid); }
.cb1-tl-day {
  font-size: 12px; font-weight: 700; color: var(--gold-dark);
  text-transform: uppercase; letter-spacing: .4px; margin-bottom: 10px;
}
.cb1-timeline-note {
  margin-top: 24px; background: var(--gray-bg);
  border-left: 4px solid var(--gold); border-radius: var(--radius);
  padding: 18px 22px; font-size: 13.5px; color: var(--text-mid);
}
.cb1-timeline-note b { color: var(--text-dark); }

/* Cheap-vs-premium comparison. These two carry their own semantic tint rather
   than the usual card palette — the contrast is the point of the section. */
.cb1-compare-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.cb1-compare-card { border-radius: var(--radius); padding: 30px; }
.cb1-compare-card.is-bad { background: #FBEEEE; border: 1px solid #E9C9C9; }
.cb1-compare-card.is-good { background: #FBF6E8; border: 1px solid #E9DBAE; }
.cb1-compare-card h3 { font-size: 18px; margin-bottom: 16px; }
.cb1-compare-card.is-bad h3 { color: #B23B3B; }
.cb1-compare-card.is-good h3 { color: var(--gold-dark); }
.cb1-compare-list { list-style: none; margin: 0 0 16px; padding: 0; }
.cb1-compare-list li {
  font-size: 13.5px; color: var(--text-mid);
  padding: 10px 0; border-bottom: 1px solid rgba(0,0,0,.06);
}
.cb1-compare-list li:last-child { border-bottom: none; }
.cb1-compare-list b { color: var(--text-dark); }
.cb1-compare-result { font-size: 13px; font-weight: 700; padding-top: 10px; }
.cb1-compare-card.is-bad .cb1-compare-result { color: #B23B3B; }
.cb1-compare-card.is-good .cb1-compare-result { color: var(--gold-dark); }

/* ==========================================================================
   FINAL CTA
   ========================================================================== */

.cb1-final-cta {
  background-color: var(--navy);
  background-size: cover; background-position: center; background-repeat: no-repeat;
  color: #fff; text-align: center;
}
.cb1-final-cta h2 { color: #fff; font-size: clamp(23px, 3.4vw, 30px); margin-bottom: 12px; }
.cb1-final-cta p { color: var(--silver); font-size: 15px; margin-bottom: 26px; }
.cb1-final-cta .cb1-btn-row { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }

/* ==========================================================================
   BID FORM (request a bid)
   ========================================================================== */

.cb1-bid-layout { display: grid; grid-template-columns: 1.6fr 1fr; gap: 44px; align-items: start; }

.cb1-form-card {
  background: #fff; border: 1px solid var(--line); border-radius: 10px;
  padding: 40px; box-shadow: 0 2px 10px rgba(0,0,0,.04);
}
.cb1-form-card h2 { font-size: 24px; margin-bottom: 6px; }
.cb1-form-card .cb1-form-intro { color: var(--text-mid); font-size: 14px; margin-bottom: 30px; }
.cb1-form-section { margin-bottom: 30px; border: none; padding: 0; }
.cb1-form-section legend {
  font-family: var(--font-head); font-size: 13px; text-transform: uppercase;
  letter-spacing: 1px; color: var(--gold-dark); font-weight: 700;
  margin-bottom: 16px; padding: 0 0 8px; width: 100%;
  border-bottom: 1px solid var(--line);
}
.cb1-field-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.cb1-field { margin-bottom: 0; }
.cb1-field.is-full { grid-column: 1 / -1; }
.cb1-field label { display: block; font-size: 13px; font-weight: 600; color: var(--text-dark); margin-bottom: 6px; }
.cb1-field .req { color: var(--gold-dark); }
.cb1-field input[type=text],
.cb1-field input[type=email],
.cb1-field input[type=tel],
.cb1-field input[type=number],
.cb1-field select,
.cb1-field textarea {
  width: 100%; border: 1px solid var(--line); border-radius: 6px;
  padding: 11px 12px; font-size: 14px; font-family: inherit;
  color: var(--text-dark); background: #FAFAFA;
}
.cb1-field input:focus, .cb1-field select:focus, .cb1-field textarea:focus {
  border-color: var(--gold); background: #fff;
}
.cb1-field textarea { resize: vertical; min-height: 100px; }

.cb1-radio-row { display: flex; gap: 18px; flex-wrap: wrap; }
.cb1-radio-opt {
  display: flex; align-items: center; gap: 7px; font-size: 13.5px;
  border: 1px solid var(--line); border-radius: 6px; padding: 10px 14px;
  cursor: pointer; flex: 1; min-width: 140px; font-weight: 500 !important;
  margin-bottom: 0 !important;
}
.cb1-radio-opt input { accent-color: var(--gold-dark); }

.cb1-checkbox-row {
  display: flex; align-items: flex-start; gap: 10px;
  font-size: 12.5px; color: var(--text-mid); margin-bottom: 24px; cursor: pointer;
}
.cb1-checkbox-row input { margin-top: 3px; accent-color: var(--gold-dark); flex: none; }

.cb1-submit-row { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.cb1-submit-row .btn { padding: 15px 34px; font-size: 15px; }
.cb1-submit-row .cb1-note { font-size: 12.5px; color: var(--text-mid); }

/* Honeypot — visually gone but not display:none, which some bots detect. */
.cb1-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.cb1-form-alert {
  display: flex; gap: 10px; align-items: flex-start;
  border-radius: 6px; padding: 14px 16px; margin-bottom: 24px; font-size: 14px;
}
.cb1-form-alert.is-success { background: #E8F5EC; border: 1px solid #A8D5B8; color: #1B5E35; }
.cb1-form-alert.is-error { background: #FDECEC; border: 1px solid #F0B4B4; color: #8B1F1F; }

.cb1-side-card { background: var(--navy); color: #fff; border-radius: 10px; padding: 32px; margin-bottom: 20px; }
.cb1-side-card h2 { color: #fff; font-size: 16px; margin-bottom: 16px; }
.cb1-side-list { list-style: none; padding: 0; }
.cb1-side-list li { display: flex; gap: 10px; font-size: 13.5px; color: var(--silver); margin-bottom: 12px; }
.cb1-side-list .dot { color: var(--gold); font-weight: 700; }
.cb1-side-phone { margin-top: 20px; padding-top: 20px; border-top: 1px solid rgba(255,255,255,.15); }
.cb1-side-phone a { color: var(--gold); font-size: 20px; font-weight: 700; }
.cb1-side-phone p { font-size: 12.5px; color: var(--silver); margin-top: 4px; }

.cb1-side-card.is-light { background: #fff; border: 1px solid var(--line); color: var(--text-dark); }
.cb1-side-card.is-light h2 { color: var(--navy); }
/* .cb1-side-list li defaults to --silver for the dark navy card; on the
   white is-light variant that's low-contrast, so darken it here. */
.cb1-side-card.is-light .cb1-side-list li { color: var(--text-mid); }
.cb1-steps { list-style: none; padding: 0; margin: 0; }
.cb1-steps li { display: flex; gap: 12px; margin-bottom: 16px; font-size: 13.5px; color: var(--text-mid); }
.cb1-steps .num {
  width: 24px; height: 24px; border-radius: 50%; background: var(--gold);
  color: var(--navy); font-weight: 700; font-size: 12px;
  display: flex; align-items: center; justify-content: center; flex: none;
}
.cb1-steps b { color: var(--text-dark); display: block; font-size: 13.5px; }

.cb1-industry-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; list-style: none; padding: 0; }
.cb1-industry-chips a {
  display: inline-block; font-size: 12px; font-weight: 600; background: var(--gray-bg);
  border: 1px solid var(--line); border-radius: 20px; padding: 6px 12px; color: var(--text-mid);
  transition: color .15s ease, border-color .15s ease;
}
.cb1-industry-chips a:hover { color: var(--gold-dark); border-color: var(--gold-dark); }

/* ==========================================================================
   FOOTER
   ========================================================================== */

.cb1-footer { background: var(--navy); color: #AFC0D6; padding: 56px 0 24px; font-size: 13.5px; }
.cb1-footer-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.2fr; gap: 36px; margin-bottom: 36px; }
.cb1-footer h2 { color: #fff; font-size: 14px; margin-bottom: 14px; }
.cb1-footer ul { list-style: none; padding: 0; }
.cb1-footer li { margin-bottom: 8px; }
.cb1-footer a:hover { color: var(--gold); }
.cb1-footer .cb1-flogo { height: 64px; width: auto; margin-bottom: 14px; }
.cb1-foot-bottom {
  border-top: 1px solid rgba(255,255,255,.12); padding-top: 20px;
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px; font-size: 12.5px;
}

/* ==========================================================================
   ALL PROJECTS PAGE
   ========================================================================== */

/* This section's own content needs more breathing room than the standard
   section padding gives it, so the wrap gets extra top/bottom padding scoped
   to this page rather than changing .wrap globally. */
.cb1-projects-gallery .wrap { padding-top: 24px; padding-bottom: 24px; }

.cb1-filter-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-bottom: 34px; }
.cb1-filter-tag {
  font-family: inherit; font-size: 13.5px; font-weight: 700; color: var(--text-mid);
  background: #fff; border: 1px solid var(--line); border-radius: 999px;
  padding: 10px 20px; cursor: pointer; transition: color .15s ease, border-color .15s ease, background-color .15s ease, transform .1s ease;
  -webkit-tap-highlight-color: transparent;
}
.cb1-filter-tag:hover { border-color: var(--gold); color: var(--gold-dark); }
.cb1-filter-tag:active { transform: scale(.96); }
.cb1-filter-tag.is-active { background: var(--navy); border-color: var(--navy); color: #fff; }
.cb1-filter-tag.is-active:hover { color: #fff; border-color: var(--navy); }

.cb1-projects-panel-head { font-size: 20px; margin-bottom: 28px; }
[data-gallery-panel] + [data-gallery-panel] { margin-top: 48px; }

/* ==========================================================================
   ABOUT PAGE
   ========================================================================== */

.cb1-story-grid { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 48px; align-items: start; }
.cb1-story-copy p { font-size: 15px; color: var(--text-mid); margin-bottom: 16px; }
.cb1-story-copy strong { color: var(--text-dark); }
.cb1-pull-quote { margin: 0 0 16px; }
.cb1-pull-quote p { font-size: 15px; font-style: italic; color: var(--text-mid); margin-bottom: 6px; }
.cb1-pull-quote cite { font-size: 12.5px; font-weight: 700; color: var(--gold-dark); text-transform: uppercase; letter-spacing: .4px; font-style: normal; }

.cb1-founder-card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.cb1-founder-card img { width: 100%; height: 320px; object-fit: cover; }
.cb1-founder-card-body { padding: 24px; }
.cb1-founder-card-body h3, .cb1-founder-card-body h4 { font-size: 17px; margin-bottom: 4px; }
.cb1-founder-card-body ul { margin-top: 14px; list-style: none; }
.cb1-founder-card-body li { font-size: 13px; color: var(--text-mid); padding: 6px 0; border-bottom: 1px solid var(--line); }
.cb1-founder-role { font-size: 12.5px; font-weight: 700; color: var(--gold-dark); text-transform: uppercase; letter-spacing: .4px; margin-bottom: 4px; }

.cb1-team-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; max-width: 760px; margin: 0 auto; }
.cb1-team-card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; text-align: center; }
.cb1-team-card img { width: 100%; height: 260px; object-fit: cover; }
.cb1-team-card-body { padding: 22px; }
.cb1-team-card-body h3, .cb1-team-card-body h4 { font-size: 17px; margin-bottom: 4px; }

.cb1-culture-grid { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 44px; align-items: center; }
.cb1-culture-img { border-radius: var(--radius); overflow: hidden; }
.cb1-culture-img img { width: 100%; height: 420px; object-fit: cover; }
.cb1-culture-note { background: var(--navy); color: #fff; border-radius: 8px; padding: 22px 24px; margin-top: 18px; margin-bottom: 24px; }
.cb1-culture-note p { font-size: 14px; color: var(--silver); }
.cb1-culture-note b { color: var(--gold); }
.cb1-culture-list { list-style: none; }
.cb1-culture-list li {
  background: #fff; border: 1px solid var(--line); border-radius: 6px; padding: 16px 18px;
  margin-bottom: 10px; font-size: 14px; font-weight: 600; color: var(--text-dark);
  display: flex; align-items: center; gap: 12px;
}
.cb1-culture-num {
  width: 28px; height: 28px; border-radius: 50%; background: var(--navy); color: #fff;
  font-size: 12.5px; font-weight: 700; display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}

/* ==========================================================================
   BLOG — index, category archive and single post
   The card grid, the pills above it and the prose body below all sit on the
   same tokens as the rest of the site, so the blog reads as part of it.
   ========================================================================== */

/* Category pills */
.cb1-blog-cats { margin-bottom: 32px; }
.cb1-blog-cats ul {
  display: flex; flex-wrap: wrap; gap: 8px; list-style: none; padding: 0;
}
.cb1-blog-cat {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 8px 14px; border-radius: 999px;
  border: 1px solid var(--line); background: #fff;
  font-size: 13px; font-weight: 600; color: var(--text-mid);
  transition: color .18s ease, border-color .18s ease, background-color .18s ease;
}
.cb1-blog-cat:hover { color: var(--navy); border-color: var(--silver); }
.cb1-blog-cat.is-active { background: var(--navy); border-color: var(--navy); color: #fff; }
.cb1-blog-cat-count {
  font-size: 11px; font-weight: 700; line-height: 1;
  padding: 3px 6px; border-radius: 999px;
  background: var(--gray-bg); color: var(--text-mid);
}
.cb1-blog-cat.is-active .cb1-blog-cat-count { background: rgba(255,255,255,.16); color: #fff; }

/* Card grid */
.cb1-blog-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }

.cb1-blog-card {
  display: flex; flex-direction: column;
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  overflow: hidden;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.cb1-blog-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 34px rgba(11,11,12,.11);
  border-color: var(--silver);
}

.cb1-blog-media { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: var(--gray-bg); }
.cb1-blog-media img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .45s ease;
}
.cb1-blog-card:hover .cb1-blog-media img { transform: scale(1.045); }
.cb1-blog-media-empty {
  display: block; width: 100%; height: 100%;
  background: linear-gradient(135deg, var(--navy-2), var(--navy));
}
.cb1-blog-chip {
  position: absolute; left: 12px; bottom: 12px;
  background: rgba(11,11,12,.82); color: #fff;
  font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  padding: 6px 10px; border-radius: 4px;
  backdrop-filter: blur(3px);
}

.cb1-blog-card-body { display: flex; flex-direction: column; gap: 9px; padding: 20px 20px 22px; flex: 1; }
.cb1-blog-meta {
  font-size: 12px; font-weight: 600; letter-spacing: .04em;
  text-transform: uppercase; color: var(--gold-dark);
}
.cb1-blog-card-body h2 { font-size: 17.5px; line-height: 1.32; }
.cb1-blog-card-body h2 a { color: var(--navy); }
.cb1-blog-card:hover .cb1-blog-card-body h2 a { color: var(--gold-dark); }
.cb1-blog-excerpt {
  font-size: 13.5px; color: var(--text-mid);
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.cb1-blog-more {
  margin-top: auto; padding-top: 4px;
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 13px; font-weight: 700; color: var(--gold-dark);
}
.cb1-blog-more ion-icon { font-size: 14px; transition: transform .2s ease; }
.cb1-blog-card:hover .cb1-blog-more ion-icon { transform: translateX(3px); }

/* The whole card is the link target; the <a> in the media sits behind the
   title link, so the title keeps the accessible name and the card stays one
   tab stop rather than three. */
.cb1-blog-card-body h2 a::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
}
.cb1-blog-card { position: relative; }

.cb1-blog-empty { color: var(--text-mid); font-size: 15px; }

/* Pagination */
.cb1-pagination { margin-top: 40px; }
.cb1-pagination ul {
  display: flex; flex-wrap: wrap; gap: 8px; list-style: none; padding: 0;
  justify-content: center; align-items: center;
}
.cb1-pagination .page-numbers {
  display: inline-flex; align-items: center; gap: 6px;
  min-width: 40px; height: 40px; padding: 0 13px;
  justify-content: center; border-radius: 6px;
  border: 1px solid var(--line); background: #fff;
  font-size: 14px; font-weight: 600; color: var(--text-mid);
  font-variant-numeric: tabular-nums;
  transition: color .18s ease, border-color .18s ease, background-color .18s ease;
}
.cb1-pagination a.page-numbers:hover { color: var(--navy); border-color: var(--silver); }
.cb1-pagination .page-numbers.current {
  background: var(--navy); border-color: var(--navy); color: #fff;
}
.cb1-pagination .page-numbers.dots { border-color: transparent; background: none; }
.cb1-pagination ion-icon { font-size: 15px; }

/* Single post */

/* Reading progress. Driven by CSS scroll timeline rather than a scroll
   listener, so it costs no JS and never fights the main thread; browsers
   without support simply don't render it. */
/* Pinned to the viewport rather than sticky in flow: as a sticky element it
   shared top:0 with the header and the two stacked on the same line. Fixed at
   the very top edge, above the header, it reads as a progress rule instead of
   a stray divider — and it tracks the same admin-bar offsets the header does. */
.cb1-progress {
  position: fixed; top: 0; left: 0; right: 0; z-index: 55;
  height: 3px; background: transparent; pointer-events: none;
}
body.admin-bar .cb1-progress { top: 32px; }
@media (max-width: 782px) { body.admin-bar .cb1-progress { top: 46px; } }
@media (max-width: 600px) { body.admin-bar .cb1-progress { top: 0; } }
.cb1-progress span {
  display: block; height: 100%; width: 100%;
  background: var(--gold); transform-origin: 0 50%; transform: scaleX(0);
  animation: cb1-progress-grow linear both;
  animation-timeline: scroll(root block);
}
@keyframes cb1-progress-grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@supports not (animation-timeline: scroll(root block)) { .cb1-progress { display: none; } }
@media (prefers-reduced-motion: reduce) { .cb1-progress { display: none; } }

/* Article + contents rail */
.cb1-article-layout {
  display: grid; grid-template-columns: 232px minmax(0, 1fr);
  gap: 48px; align-items: start;
}
.cb1-article-layout.is-solo { grid-template-columns: minmax(0, 1fr); max-width: 760px; margin: 0 auto; }
.cb1-article { min-width: 0; max-width: 760px; }

.cb1-toc-inner { position: sticky; top: 24px; }
.cb1-toc-head {
  font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--muted, var(--text-mid)); margin-bottom: 12px;
}
.cb1-toc-list { list-style: none; margin: 0; padding: 0; counter-reset: toc; }
.cb1-toc-list li { counter-increment: toc; }
.cb1-toc-list a {
  display: block; padding: 7px 0 7px 14px;
  border-left: 2px solid var(--line);
  font-size: 13px; line-height: 1.4; color: var(--text-mid);
  transition: color .18s ease, border-color .18s ease;
}
.cb1-toc-list a:hover { color: var(--navy); border-left-color: var(--gold); }

.cb1-toc-mobile { display: none; }
.cb1-toc-mobile summary {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 13px 16px; border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--gray-bg); cursor: pointer;
  font-size: 14px; font-weight: 700; color: var(--navy);
  list-style: none;
}
.cb1-toc-mobile summary::-webkit-details-marker { display: none; }
.cb1-toc-mobile ion-icon { font-size: 16px; transition: transform .2s ease; }
.cb1-toc-mobile[open] summary ion-icon { transform: rotate(180deg); }
.cb1-toc-mobile .cb1-toc-list { margin-top: 12px; }

/* Mid-article conversion block — the reader is deepest in the topic here, so
   the ask sits inside the article rather than only in the closing band. */
.cb1-article-cta {
  margin-top: 36px; padding: 26px 28px;
  border: 1px solid var(--line); border-left: 3px solid var(--gold);
  border-radius: var(--radius); background: var(--gray-bg);
  display: flex; flex-wrap: wrap; gap: 20px; align-items: center; justify-content: space-between;
}
.cb1-article-cta h2 { font-size: 19px; margin: 6px 0 6px; }
.cb1-article-cta p { font-size: 13.5px; color: var(--text-mid); }
.cb1-article-cta-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.cb1-article-cta-actions .btn { padding: 12px 18px; font-size: 14px; }
/* .btn-outline-navy is drawn for the navy header: #E7E8EA border and text.
   On this light panel that was near-white on near-white — about 1.1:1, which
   is invisible, not merely low. Restated in navy for ~18:1, and it inverts on
   hover so the phone number still reads as the secondary action. */
.cb1-article-cta .btn-outline-navy {
  border-color: var(--navy); color: var(--navy);
}
.cb1-article-cta .btn-outline-navy:hover {
  background: var(--navy); color: #fff;
}

.cb1-prose { color: var(--text-dark); font-size: 16.5px; line-height: 1.75; }
.cb1-prose > * + * { margin-top: 18px; }
.cb1-prose h2 { font-size: clamp(21px, 2.6vw, 26px); margin-top: 40px; }
.cb1-prose h3 { font-size: 18.5px; margin-top: 30px; }
.cb1-prose h4 { font-size: 16px; margin-top: 24px; }
.cb1-prose p { color: var(--text-mid); }
.cb1-prose strong { color: var(--text-dark); }
.cb1-prose a { color: var(--gold-dark); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.cb1-prose ul, .cb1-prose ol { padding-left: 22px; color: var(--text-mid); }
.cb1-prose li + li { margin-top: 7px; }
.cb1-prose img { border-radius: var(--radius); margin-top: 26px; }
.cb1-prose blockquote {
  border-left: 3px solid var(--gold); background: var(--gray-bg);
  padding: 16px 20px; border-radius: 0 var(--radius) var(--radius) 0;
  font-size: 16px; color: var(--text-dark);
}
.cb1-prose blockquote p { color: var(--text-dark); }
.cb1-prose table { width: 100%; border-collapse: collapse; font-size: 14.5px; }
.cb1-prose th, .cb1-prose td { border: 1px solid var(--line); padding: 9px 12px; text-align: left; }
.cb1-prose th { background: var(--gray-bg); font-weight: 700; }
/* Editor content can carry a wide table or a code block; keep the page itself
   from scrolling sideways on a phone. */
.cb1-prose table, .cb1-prose pre { display: block; max-width: 100%; overflow-x: auto; }

.cb1-article-foot {
  margin-top: 40px; padding-top: 22px; border-top: 1px solid var(--line);
  display: flex; flex-wrap: wrap; gap: 14px; align-items: center; justify-content: space-between;
}
.cb1-article-cats { display: flex; flex-wrap: wrap; gap: 8px; }
.cb1-article-back {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 13.5px; font-weight: 700; color: var(--gold-dark);
}
.cb1-article-back ion-icon { font-size: 15px; transition: transform .2s ease; }
.cb1-article-back:hover ion-icon { transform: translateX(-3px); }

@media (max-width: 1024px) {
  /* Below this the rail costs more width than it returns, so the contents
     collapse into a disclosure directly above the article. */
  .cb1-article-layout { grid-template-columns: minmax(0, 1fr); gap: 24px; max-width: 760px; margin: 0 auto; }
  .cb1-toc { display: none; }
  .cb1-toc-mobile { display: block; }
}
@media (max-width: 960px) {
  .cb1-blog-grid { grid-template-columns: repeat(2, 1fr); gap: 20px; }
}
@media (max-width: 640px) {
  .cb1-blog-grid { grid-template-columns: 1fr; }
  .cb1-article-foot { flex-direction: column; align-items: flex-start; }
  .cb1-prose { font-size: 16px; }
  .cb1-article-cta { flex-direction: column; align-items: flex-start; padding: 22px; }
  .cb1-article-cta-actions { width: 100%; }
  .cb1-article-cta-actions .btn { flex: 1; text-align: center; }
}

/* ==========================================================================
   LANDING PAGE (template-lp-garage-estimate.php)
   Ad traffic only, so the chrome is deliberately minimal: a logo-and-phone
   header instead of the site nav, and a sticky call/estimate bar on mobile.
   Everything between those two is the shared section vocabulary above.
   ========================================================================== */

.cb1-lp-header { background: var(--navy); border-bottom: 1px solid #2A2A2D; }
.cb1-lp-header .wrap {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding-top: 14px; padding-bottom: 14px;
}
.cb1-lp-header .cb1-logo img { height: 46px; }
.cb1-lp-call { text-align: right; line-height: 1.3; }
.cb1-lp-call span {
  display: block; font-size: 11px; color: var(--silver);
  text-transform: uppercase; letter-spacing: .5px;
}
.cb1-lp-call a { font-size: 19px; font-weight: 800; color: var(--gold); }

.cb1-lp-hero {
  position: relative; color: #fff; background-color: var(--navy);
  background-size: cover; background-position: center;
  padding: 50px 0 60px;
}
.cb1-lp-hero-grid {
  display: grid; grid-template-columns: 1.15fr .95fr; gap: 48px; align-items: start;
}
.cb1-lp-badges { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 18px; }
.cb1-lp-badges span {
  background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.25);
  border-radius: 20px; padding: 6px 14px; font-size: 12px; font-weight: 700; color: #fff;
}
.cb1-lp-hero h1 { color: #fff; font-size: clamp(28px, 4vw, 38px); margin-bottom: 16px; }
.cb1-lp-hero h1 span { color: var(--gold); }
.cb1-lp-sub { color: var(--silver); font-size: 16.5px; max-width: 560px; margin-bottom: 22px; }
.cb1-lp-points { list-style: none; margin-bottom: 26px; padding: 0; }
.cb1-lp-points li {
  font-size: 14.5px; color: #E7E8EA; padding: 7px 0;
  display: flex; align-items: center; gap: 10px;
}
.cb1-lp-points li::before {
  content: "✓"; background: var(--gold); color: var(--navy); font-weight: 800;
  width: 20px; height: 20px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center; font-size: 12px;
}
.cb1-lp-stars { display: flex; align-items: center; gap: 10px; font-size: 13.5px; color: var(--silver); }
.cb1-lp-stars span { color: var(--gold); font-size: 16px; letter-spacing: 1px; }

.cb1-lp-form { background: #fff; border-radius: 12px; padding: 26px; box-shadow: 0 20px 50px rgba(0,0,0,.35); }
.cb1-lp-form-head { text-align: center; margin-bottom: 18px; }
.cb1-lp-form-head h2 { font-size: 20px; margin-bottom: 6px; }
.cb1-lp-form-head p { font-size: 13px; color: var(--text-mid); }
.cb1-lp-price {
  display: inline-block; background: var(--gray-bg); border-radius: 20px;
  padding: 5px 14px; font-size: 12px; font-weight: 700; color: var(--gold-dark); margin-top: 8px;
}
.cb1-lp-form .cb1-form-card { padding: 0; border: none; box-shadow: none; background: none; }
.cb1-lp-disclaimer { font-size: 11px; color: var(--text-mid); text-align: center; margin-top: 10px; }

.cb1-lp-why { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.cb1-lp-why-card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 26px 22px; }
.cb1-lp-why-num {
  width: 44px; height: 44px; border-radius: 50%; background: var(--navy); color: var(--gold);
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 18px; margin-bottom: 14px;
}
.cb1-lp-why-card h3 { font-size: 15.5px; margin-bottom: 8px; }
.cb1-lp-why-card p { font-size: 13px; color: var(--text-mid); }

.cb1-lp-compare { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.cb1-lp-compare-card { border-radius: 10px; padding: 28px; }
.cb1-lp-compare-card.is-bad { background: #FBEEEE; border: 1px solid #E9C9C9; }
.cb1-lp-compare-card.is-good { background: #FBF6E8; border: 1px solid #E9DBAE; }
.cb1-lp-compare-card h3 { font-size: 17px; margin-bottom: 14px; }
.cb1-lp-compare-card.is-bad h3 { color: #A83232; }
.cb1-lp-compare-card.is-good h3 { color: var(--gold-dark); }
.cb1-lp-compare-card ul { list-style: none; padding: 0; }
.cb1-lp-compare-card li {
  font-size: 13.5px; color: var(--text-mid); padding: 9px 0;
  border-bottom: 1px solid rgba(0,0,0,.06);
}
.cb1-lp-compare-card li:last-child { border-bottom: none; }
.cb1-lp-compare-card li b { color: var(--text-dark); }

.cb1-lp-process { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; list-style: none; padding: 0; }
.cb1-lp-process li { text-align: center; padding: 0 10px; }
.cb1-lp-process-num {
  width: 52px; height: 52px; border-radius: 50%; background: var(--navy); color: var(--gold);
  font-weight: 800; font-size: 19px; display: flex; align-items: center; justify-content: center;
  margin: 0 auto 14px;
}
.cb1-lp-process h3 { font-size: 14.5px; margin-bottom: 6px; }
.cb1-lp-process p { font-size: 12.5px; color: var(--text-mid); }

.cb1-lp-footer { background: var(--navy); color: var(--silver); padding: 30px 0; font-size: 12.5px; text-align: center; }
.cb1-lp-footer a { color: var(--gold); font-weight: 700; }
.cb1-lp-legal { margin-top: 10px; color: #7C8698; font-size: 11.5px; }

@media (max-width: 960px) {
  .cb1-lp-hero-grid { grid-template-columns: 1fr; gap: 32px; }
  .cb1-lp-why { grid-template-columns: 1fr 1fr; }
  .cb1-lp-compare { grid-template-columns: 1fr; }
  .cb1-lp-process { grid-template-columns: 1fr 1fr; gap: 26px; }
}

@media (max-width: 560px) {
  .cb1-lp-header .wrap { flex-direction: column; gap: 10px; }
  .cb1-lp-call { text-align: center; }
  .cb1-lp-why { grid-template-columns: 1fr; }
}

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

@media (max-width: 1100px) {
  .cb1-nav > ul { gap: 18px; font-size: 13.5px; }
  .cb1-navcta .btn { padding: 10px 12px; font-size: 12px; }
}

@media (max-width: 960px) {
  .cb1 {
    --section-y: 56px;
    --section-y-hero: 64px;
    --section-head-gap: 32px;
  }

  .cb1-nav-toggle { display: block; }
  .cb1-navcta { display: none; }

  .cb1-nav {
    display: none; position: absolute; top: 100%; left: 0; right: 0;
    background: var(--navy-3); border-top: 1px solid #2A2A2D;
    padding: 12px var(--gutter) 20px; max-height: 75vh; overflow-y: auto;
  }
  .cb1-nav.is-open { display: block; }
  .cb1-nav > ul { flex-direction: column; align-items: stretch; gap: 0; }
  .cb1-nav > ul > li { border-bottom: 1px solid #262629; }
  .cb1-nav > ul > li > a { padding: 13px 0; justify-content: space-between; }
  .cb1-nav .sub-menu {
    display: none; position: static; border: none; box-shadow: none;
    background: transparent; padding: 0 0 10px 14px; min-width: 0;
  }
  /* On touch the caret button controls the submenu, not hover. */
  .cb1-nav > ul > li:hover .sub-menu,
  .cb1-nav > ul > li:focus-within .sub-menu { display: none; }
  .cb1-nav > ul > li.is-open .sub-menu { display: block; }
  .cb1-nav > ul > li.is-open .cb1-caret { transform: rotate(180deg); }
  .cb1-nav .sub-menu a { padding: 9px 0; }

  /* The cb1-sub-toggle button carries its own cloned caret on mobile — hide
     the original one left in the link so it doesn't show twice. */
  .cb1-nav > ul > li > a > .cb1-caret { display: none; }

  .cb1-navrow { position: relative; }
  .cb1-topbar .wrap { flex-direction: column; gap: 4px; text-align: center; font-size: 11.5px; }

  .cb1-hero { min-height: 0; }
  .cb1-hero-split { grid-template-columns: 1fr; }
  .cb1-split-row { grid-template-columns: 1fr; }
  /* Single column: the panel is now the full width, so both sides align to
     the same gutter every wrapped section uses. */
  .cb1-panel,
  .cb1-split-row > .cb1-panel:first-child,
  .cb1-split-row > .cb1-panel:last-child { padding: var(--section-y) var(--gutter); }
  .cb1-panel-photo { display: none; }
  .cb1-tile-grid { grid-template-columns: repeat(2, 1fr); }

  .cb1-sys-grid,
  .cb1-feat-grid,
  .cb1-usecase-grid { grid-template-columns: 1fr 1fr; }
  .cb1-ind-grid,
  .cb1-why-grid { grid-template-columns: 1fr 1fr; }
  .cb1-rec-grid,
  .cb1-rec-grid.is-two { grid-template-columns: 1fr; }
  .cb1-gal-grid,
  .cb1-gal-grid.is-four { grid-template-columns: 1fr 1fr; }
  .cb1-process-grid { grid-template-columns: 1fr 1fr; }
  .cb1-ba-grid { grid-template-columns: 1fr 1fr; }
  .cb1-gallery-cols { grid-template-columns: 1fr; }
  .cb1-footer-grid { grid-template-columns: 1fr 1fr; }

  .cb1-timeline-grid { grid-template-columns: 1fr 1fr; }
  .cb1-compare-grid { grid-template-columns: 1fr; }
  /* Number and body stack, so drop the fixed number column. */
  .cb1-step-row { grid-template-columns: 1fr; gap: 14px; }

  .cb1-story-grid,
  .cb1-culture-grid { grid-template-columns: 1fr; }
  .cb1-team-grid { grid-template-columns: 1fr 1fr; }

  .cb1-bid-layout { grid-template-columns: 1fr; }
  .cb1-form-card { padding: 24px; }
  .cb1-field-grid { grid-template-columns: 1fr; }

  .cb1-trust-strip .wrap { flex-direction: column; }
  .cb1 .cb1-banner-meta { gap: 10px 24px; }
}

@media (max-width: 560px) {
  .cb1 {
    --section-y: 44px;
    --section-y-hero: 48px;
    --section-head-gap: 24px;
    --gutter: 18px;
  }

  .cb1-sys-grid,
  .cb1-feat-grid,
  .cb1-usecase-grid,
  .cb1-ind-grid,
  .cb1-why-grid,
  .cb1-process-grid,
  .cb1-footer-grid,
  .cb1-ba-grid { grid-template-columns: 1fr; }
  .cb1-gallery-imgs { grid-template-columns: repeat(2, 1fr); }

  /* The primary "Request a Bid" label runs noticeably longer than "Call
     (phone)", so side-by-side content-width buttons wrap into an uneven
     staircase on a phone. Stack and match widths instead — desktop keeps
     its natural side-by-side sizing untouched. */
  .cb1-banner-cta { flex-direction: column; align-items: stretch; }
  .cb1-banner-cta .btn { width: 100%; }

  /* Same reasoning for the meta line: wrapped inline chunks of very
     different lengths ("100+ commercial projects completed" next to "BBB
     A+ rating") break awkwardly at this width, so read as a plain list. */
  .cb1 .cb1-banner-meta { gap: 8px; }

  .cb1-logo img { height: 44px; }
  .cb1-foot-bottom { flex-direction: column; }
}

/* ==========================================================================
   PRINT
   ========================================================================== */

@media print {
  .cb1-header, .cb1-footer, .cb1-final-cta, .cb1-nav-toggle,
  .cb1-lp-header, .cb1-lp-footer { display: none !important; }
  .cb1-banner, .cb1-hero, .cb1-lp-hero { background: none !important; color: #000; }
  .cb1-banner h1, .cb1-hero h1, .cb1-lp-hero h1 { color: #000; }
}