/*
Theme Name: Cas and Cal
Theme URI: https://casandcalsconstruction.com
Author: Red Rooster Web
Author URI: https://redroosterweb.com
Description: Block theme for Cas and Cal Construction & Renovation, LLC. Navy structure, orange actions, red markers, stone surfaces. Built to the approved prototype token set.
Requires at least: 6.7
Tested up to: 7.1
Requires PHP: 8.0
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: cas-and-cal
Tags: block-theme, business, custom-colors, full-site-editing
*/

/* ==========================================================================
   1. Tokens
   ========================================================================== */

:root {
  --navy-950:#0B2136; --navy-900:#10304C; --navy-800:#1B4B77; --navy-700:#1E6398;
  --navy-600:#2F79B0; --navy-400:#6FA8CE; --navy-200:#B9D8EC; --navy-100:#DCEDF7; --navy-50:#EFF7FC;
  --orange-800:#A8410F; --orange-700:#C75516; --orange-600:#E2701F; --orange-500:#F0902E;
  --orange-300:#F8C173; --orange-100:#FCE9CC; --orange-50:#FEF6EA;
  --red-700:#9C2C22; --red-600:#C0392B; --red-100:#F7DEDA;
  --stone-950:#14120E; --stone-900:#1C1A15; --stone-800:#2B2822; --stone-700:#4A453D;
  --stone-500:#8A8175; --stone-400:#ABA294; --stone-300:#CBC2B4; --stone-200:#E3DCD1;
  --stone-100:#F1ECE4; --stone-50:#F8F5F0;

  --sunset-wash: linear-gradient(160deg,#F0902E 0%,#E2701F 42%,#C0392B 100%);
  --hero-scrim: linear-gradient(90deg, rgba(7,23,42,.88), rgba(7,23,42,.45) 55%, transparent);

  --radius-control:2px; --radius-card:4px; --radius-max:8px;
  --shadow-card:0 1px 2px rgba(14,42,71,.10), 0 0 0 1px rgba(14,42,71,.05);

  --t-control:140ms; --t-overlay:200ms; --ease:cubic-bezier(.2,.6,.2,1);

  --container:1200px; --gutter:24px; --measure:720px;
  --rhythm:96px; --rhythm-band:64px;

  --font-heading: Poppins, "Segoe UI", system-ui, sans-serif;
  --font-body: Roboto, "Segoe UI", system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
}

/* ==========================================================================
   2. Base
   ========================================================================== */

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

body {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.55;
  color: var(--stone-800);
  background: #fff;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  font-weight: 600;
  line-height: 1.18;
  letter-spacing: -0.01em;
  color: var(--navy-950);
  margin: 0 0 16px;
}

h1 { font-size: 38px; }
h2 { font-size: 28px; }
h3 { font-size: 22px; }
h4 { font-size: 18px; }

p { margin: 0 0 16px; }
p:last-child { margin-bottom: 0; }

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

a { color: var(--navy-700); }
a:hover { color: var(--navy-800); }

:focus-visible {
  outline: 3px solid var(--orange-500);
  outline-offset: 2px;
}

.ccc-sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skip-link:focus {
  position: fixed; top: 8px; left: 8px; z-index: 999;
  background: #fff; color: var(--navy-900); padding: 12px 16px;
  border-radius: var(--radius-control); box-shadow: var(--shadow-card);
}

/* WordPress flow layout injects margin-block-start between siblings, which
   adds a stray band under the header and slivers between sections. Every gap
   in this theme is set deliberately, so clear the injected ones. */
main.wp-block-group,
.wp-site-blocks > .wp-block-template-part,
.entry-content > *,
.entry-content :where([class*="ccc-"]) > * { margin-block-start: 0; }

/* ==========================================================================
   3. Layout
   ========================================================================== */

.ccc-wrap {
  width: 100%;
  max-width: calc(var(--container) + (var(--gutter) * 2));
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.ccc-section { padding-block: var(--rhythm); }
.ccc-section--tight { padding-block: var(--rhythm-band); }
.ccc-measure { max-width: var(--measure); }
.ccc-center { text-align: center; margin-inline: auto; }

.ccc-grid { display: grid; gap: 24px; }
.ccc-grid--2 { grid-template-columns: repeat(2, 1fr); }
.ccc-grid--3 { grid-template-columns: repeat(3, 1fr); }
.ccc-grid--4 { grid-template-columns: repeat(4, 1fr); }

@media (max-width: 960px) {
  .ccc-grid--3, .ccc-grid--4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .ccc-grid--2, .ccc-grid--3, .ccc-grid--4 { grid-template-columns: 1fr; }
  :root { --rhythm: 64px; --rhythm-band: 48px; }
}


/* WP flow layout adds margin-block-start to siblings; that offsets grid cells. */
.ccc-grid > *,
.ccc-storygrid > *,
.ccc-contactgrid > *,
.ccc-quoteband__inner > *,
.ccc-cta__inner > *,
.ccc-trust__item > *,
.ccc-footer__grid > *,
.ccc-tags > *,
.ccc-filter > * { margin-block: 0; }

/* ==========================================================================
   4. Type helpers
   ========================================================================== */

.ccc-eyebrow {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--red-600);
  margin: 0 0 12px;
  display: block;
}
.ccc-eyebrow--ondark { color: var(--orange-300); }

.ccc-display {
  font-size: clamp(34px, 4.6vw, 54px);
  font-weight: 700;
  line-height: 1.1;
}

.ccc-lede { font-size: 18px; color: var(--stone-700); }
.ccc-lede--ondark { color: var(--navy-100); }

.ccc-meta {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--stone-500);
}

/* ==========================================================================
   5. Buttons
   ========================================================================== */

.ccc-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 48px;
  padding: 0 22px;
  border-radius: var(--radius-control);
  border: 1px solid transparent;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 16px;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--t-control) var(--ease),
              border-color var(--t-control) var(--ease),
              color var(--t-control) var(--ease),
              transform var(--t-control) var(--ease);
}
.ccc-btn--sm { height: 32px; padding: 0 14px; font-size: 14px; }
.ccc-btn--md { height: 40px; padding: 0 18px; }

.ccc-btn:active { transform: translateY(1px); }
.ccc-btn:focus-visible { outline: 3px solid var(--orange-500); outline-offset: 2px; }

.ccc-btn--primary { background: var(--orange-600); color: #fff; }
.ccc-btn--primary:hover { background: var(--orange-700); color: #fff; }
.ccc-btn--primary:active { background: var(--orange-800); }

.ccc-btn--secondary { background: var(--navy-800); color: #fff; }
.ccc-btn--secondary:hover { background: var(--navy-900); color: #fff; }
.ccc-btn--secondary:active { background: var(--navy-950); }

.ccc-btn--outline { background: transparent; color: var(--navy-800); border-color: var(--stone-300); }
.ccc-btn--outline:hover { border-color: var(--navy-800); color: var(--navy-900); background: var(--stone-50); }

.ccc-btn--ghost { background: transparent; color: var(--navy-800); }
.ccc-btn--ghost:hover { background: var(--stone-100); color: var(--navy-900); }

.ccc-btn--ondark { background: #fff; color: var(--navy-900); }
.ccc-btn--ondark:hover { background: var(--navy-50); color: var(--navy-950); }

.ccc-btn--outline-ondark { background: transparent; color: #fff; border-color: rgba(255,255,255,.55); }
.ccc-btn--outline-ondark:hover { background: rgba(255,255,255,.10); color: #fff; border-color: #fff; }

.ccc-btn--danger { background: var(--red-600); color: #fff; }
.ccc-btn--danger:hover { background: var(--red-700); color: #fff; }

.ccc-btn svg { width: 16px; height: 16px; flex: none; }

.ccc-btn-row { display: flex; flex-wrap: wrap; gap: 12px; }

/* ==========================================================================
   6. Cards
   ========================================================================== */

.ccc-card {
  background: #fff;
  border: 1px solid var(--stone-200);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  padding: 24px;
}
.ccc-card--emphasis { border-top: 3px solid var(--orange-600); }

a.ccc-card, .ccc-card--interactive {
  text-decoration: none;
  color: inherit;
  display: block;
  transition: transform var(--t-control) var(--ease),
              border-color var(--t-control) var(--ease);
}
a.ccc-card:hover, .ccc-card--interactive:hover {
  transform: translateY(-2px);
  border-color: var(--navy-800);
}

.ccc-card h3 { font-size: 22px; margin-bottom: 8px; }
:where(.ccc-card) p { color: var(--stone-700); }

/* ==========================================================================
   7. Icons
   ========================================================================== */

.ccc-icon { display: inline-block; vertical-align: middle; flex: none; }
.ccc-icon svg { display: block; width: 100%; height: 100%; stroke-width: 2; }
.ccc-icon--inline { width: 16px; height: 16px; }
.ccc-icon--trust { width: 22px; height: 22px; color: var(--red-600); }
.ccc-icon--service { width: 28px; height: 28px; color: var(--orange-600); }

/* ==========================================================================
   8. Header
   ========================================================================== */

.ccc-header { position: sticky; top: 0; z-index: 100; }

.ccc-bar {
  background: rgba(255,255,255,.95);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--stone-200);
}
.ccc-bar .ccc-wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-height: 76px;
  padding-block: 10px;
}
.ccc-brand { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; }
.ccc-brand img { height: 52px; width: auto; display: block; }

.ccc-nav { display: flex; align-items: center; gap: 28px; }
.ccc-nav a {
  position: relative;
  font-weight: 500;
  color: var(--navy-900);
  text-decoration: none;
  padding: 6px 0;
  transition: color var(--t-control) var(--ease);
}
.ccc-nav a:hover { color: var(--navy-700); }
.ccc-nav a[aria-current="page"] { color: var(--navy-950); }
.ccc-nav a[aria-current="page"]::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 2px;
  background: var(--red-600);
}
.ccc-header__actions { display: flex; align-items: center; gap: 12px; }

.ccc-burger {
  display: none;
  width: 44px; height: 44px;
  align-items: center; justify-content: center;
  background: transparent;
  border: 1px solid var(--stone-300);
  border-radius: var(--radius-control);
  color: var(--navy-900);
  cursor: pointer;
}

@media (max-width: 900px) {
  .ccc-burger { display: inline-flex; }
  .ccc-nav {
    display: none;
    position: absolute;
    left: 0; right: 0; top: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: #fff;
    border-bottom: 1px solid var(--stone-200);
    box-shadow: var(--shadow-card);
    padding: 8px 24px 16px;
  }
  .ccc-nav.is-open { display: flex; }
  .ccc-nav a { padding: 12px 0; border-bottom: 1px solid var(--stone-100); }
  .ccc-nav a[aria-current="page"]::after { display: none; }
  .ccc-nav a[aria-current="page"] { color: var(--red-600); }
  .ccc-bar .ccc-wrap { position: relative; }
  .ccc-header__actions .ccc-btn--secondary { display: none; }
}

/* Header call button collapses to just "Call" on small screens. */
@media (max-width: 620px) {
  .ccc-header__actions .ccc-btn { padding: 0 14px; }
  .ccc-btn__num { display: none; }
}

/* ==========================================================================
   9. Hero
   ========================================================================== */

.ccc-hero { position: relative; background: var(--navy-950); overflow: hidden; }
.ccc-hero__media { position: absolute; inset: 0; }
.ccc-hero__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ccc-hero__scrim { position: absolute; inset: 0; background: var(--hero-scrim); }
.ccc-hero__inner { position: relative; padding-block: 120px; }
.ccc-hero__content { max-width: 640px; color: #fff; }
.ccc-hero__content h1 {
  color: #fff;
  margin-bottom: 20px;
  font-size: clamp(34px, 4.6vw, 54px);
  font-weight: 700;
  line-height: 1.1;
}
.ccc-hero__tagline {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--orange-300);
  margin-bottom: 16px;
  display: block;
}
:where(.ccc-hero__content) p { color: var(--navy-100); font-size: 18px; max-width: 52ch; }
.ccc-hero .ccc-btn-row { margin-top: 28px; }

@media (max-width: 780px) {
  .ccc-hero__inner { padding-block: 72px; }
  .ccc-hero__scrim { background: linear-gradient(180deg, rgba(7,23,42,.86), rgba(7,23,42,.72)); }
}

/* Hero built on core/cover: the photo and the scrim come from the block. */
.ccc-hero.wp-block-cover {
  min-height: 0;
  padding: 0;
  align-items: stretch;
  justify-content: flex-start;
}
.ccc-hero.wp-block-cover > .wp-block-cover__inner-container { width: 100%; }
.ccc-hero .wp-block-cover__image-background { object-position: center; }

/* Section heads */
.ccc-sectionhead { max-width: var(--measure); margin-bottom: 40px; }
.ccc-sectionhead h2 { font-size: clamp(26px, 3vw, 34px); }
:where(.ccc-sectionhead) p { color: var(--stone-700); font-size: 18px; margin-bottom: 0; }
.ccc-sectionhead--center { margin-inline: auto; text-align: center; }

/* Narrow screens: the left-to-right scrim leaves text over bright photo, so go vertical. */
@media (max-width: 780px) {
  .ccc-hero span.wp-block-cover__background.has-background-gradient {
    background: linear-gradient(180deg, rgba(7,23,42,.88), rgba(7,23,42,.74));
  }
}

.ccc-pagehero { background: var(--navy-950); color: #fff; }
.ccc-pagehero__inner { padding-block: 72px; }
.ccc-pagehero h1 { color: #fff; font-size: clamp(30px, 3.8vw, 44px); font-weight: 700; }
:where(.ccc-pagehero) p { color: var(--navy-100); font-size: 18px; max-width: 60ch; }

/* ==========================================================================
   10. Trust strip
   ========================================================================== */

.ccc-trust { background: var(--stone-50); border-bottom: 1px solid var(--stone-200); }
.ccc-trust .ccc-wrap { padding-block: 32px; }
.ccc-trust__item { display: flex; gap: 12px; align-items: flex-start; }
.ccc-trust__item h3 { font-size: 16px; margin: 0 0 4px; }
:where(.ccc-trust__item) p { font-size: 14px; color: var(--stone-700); margin: 0; }

/* ==========================================================================
   11. Service cards
   ========================================================================== */

.ccc-service { display: flex; flex-direction: column; height: 100%; }
.ccc-service .ccc-icon { margin-bottom: 16px; }
.ccc-service h3 { font-size: 22px; }
.ccc-service p { flex: 1; }
.ccc-service__quote {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--stone-200);
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--orange-700);
}

/* ==========================================================================
   12. Owner quote band
   ========================================================================== */

.ccc-quoteband { background: var(--navy-900); color: #fff; }
.ccc-quoteband .ccc-wrap { padding-block: var(--rhythm-band); }
.ccc-quoteband__inner { display: grid; grid-template-columns: 200px 1fr; gap: 40px; align-items: center; }
.ccc-quoteband__photo img {
  width: 200px; height: 200px; object-fit: cover;
  border-radius: var(--radius-card);
  border: 1px solid rgba(255,255,255,.18);
}
.ccc-quoteband blockquote {
  margin: 0;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: clamp(24px, 3vw, 34px);
  line-height: 1.22;
  letter-spacing: -0.01em;
  color: #fff;
}
.ccc-quoteband cite {
  display: block;
  margin-top: 20px;
  font-style: normal;
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--orange-300);
}
.ccc-quoteband cite span { display: block; color: var(--navy-200); margin-top: 4px; }
@media (max-width: 780px) {
  .ccc-quoteband__inner { grid-template-columns: 1fr; gap: 24px; }
  .ccc-quoteband__photo img { width: 120px; height: 120px; }
}

/* ==========================================================================
   13. Reviews
   ========================================================================== */

.ccc-review { display: flex; flex-direction: column; height: 100%; }
.ccc-review__stars { display: flex; gap: 3px; color: var(--orange-500); margin-bottom: 14px; }
.ccc-review__stars svg { width: 16px; height: 16px; fill: currentColor; stroke: none; }
:where(.ccc-review) blockquote { margin: 0 0 18px; flex: 1; color: var(--stone-800); }
.ccc-review__who { border-top: 1px solid var(--stone-200); padding-top: 14px; }
.ccc-review__name { font-weight: 500; color: var(--navy-950); }
.ccc-review__role {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--stone-500);
  margin-top: 2px;
}

/* ==========================================================================
   14. Tags / service area
   ========================================================================== */

.ccc-tags { display: flex; flex-wrap: wrap; gap: 8px; }
.ccc-tag {
  display: inline-flex;
  align-items: center;
  height: 32px;
  padding: 0 14px;
  border-radius: var(--radius-control);
  border: 1px solid var(--stone-300);
  background: #fff;
  color: var(--navy-900);
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  transition: background-color var(--t-control) var(--ease),
              border-color var(--t-control) var(--ease),
              color var(--t-control) var(--ease);
}
.ccc-tag:hover { border-color: var(--navy-800); color: var(--navy-950); }
.ccc-tag[aria-pressed="true"], .ccc-tag.is-selected {
  background: var(--navy-800);
  border-color: var(--navy-800);
  color: #fff;
}
.ccc-tag:focus-visible { outline: 3px solid var(--orange-500); outline-offset: 2px; }

.ccc-counties {
  margin-top: 24px;
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--stone-500);
}

/* ==========================================================================
   15. CTA band (sunset)
   ========================================================================== */

.ccc-cta { background: var(--sunset-wash); color: #fff; }
.ccc-cta .ccc-wrap { padding-block: var(--rhythm-band); }
.ccc-cta h2 { color: #fff; font-size: clamp(26px, 3.2vw, 36px); }
:where(.ccc-cta) p { color: rgba(255,255,255,.92); font-size: 18px; max-width: 56ch; }
.ccc-cta .ccc-btn-row { margin-top: 24px; }
.ccc-cta__inner { display: flex; justify-content: space-between; align-items: center; gap: 40px; flex-wrap: wrap; }

/* ==========================================================================
   16. Process steps
   ========================================================================== */

.ccc-step { position: relative; padding-top: 8px; }
.ccc-step__num {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0.09em;
  color: var(--red-600);
  display: block;
  margin-bottom: 10px;
}
.ccc-step h3 { font-size: 18px; margin-bottom: 6px; }
:where(.ccc-step) p { font-size: 15px; color: var(--stone-700); }
.ccc-step::before {
  content: "";
  display: block;
  height: 2px;
  background: var(--stone-200);
  margin-bottom: 16px;
}
.ccc-step--active::before { background: var(--red-600); }

/* ==========================================================================
   17. Not-maintenance band
   ========================================================================== */

.ccc-notice {
  background: var(--stone-100);
  border-top: 1px solid var(--stone-200);
  border-bottom: 1px solid var(--stone-200);
}
.ccc-notice .ccc-wrap { padding-block: 48px; }
.ccc-notice__inner { display: flex; gap: 16px; align-items: flex-start; max-width: var(--measure); }
.ccc-notice h2 { font-size: 22px; }
:where(.ccc-notice) p { color: var(--stone-700); margin: 0; }

/* ==========================================================================
   18. Tabs
   ========================================================================== */

.ccc-tabs__list {
  display: flex;
  gap: 28px;
  border-bottom: 1px solid var(--stone-200);
  margin-bottom: 32px;
}
.ccc-tabs__tab {
  appearance: none;
  background: none;
  border: 0;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  padding: 12px 2px;
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 500;
  color: var(--stone-700);
  cursor: pointer;
  transition: color var(--t-control) var(--ease), border-color var(--t-control) var(--ease);
}
.ccc-tabs__tab:hover { color: var(--navy-900); }
.ccc-tabs__tab[aria-selected="true"] { color: var(--navy-950); border-bottom-color: var(--red-600); }
.ccc-tabs__tab:focus-visible { outline: 3px solid var(--orange-500); outline-offset: 2px; }
.ccc-tabs__panel[hidden] { display: none; }

/* ==========================================================================
   19. Forms
   ========================================================================== */

.ccc-field { margin-bottom: 20px; }
.ccc-field label {
  display: block;
  font-size: 14px;
  font-weight: 500;
  color: var(--navy-950);
  margin-bottom: 6px;
}
.ccc-field .req { color: var(--orange-600); }
.ccc-field input[type="text"],
.ccc-field input[type="email"],
.ccc-field input[type="tel"],
.ccc-field input[type="date"],
.ccc-field select,
.ccc-field textarea {
  width: 100%;
  height: 40px;
  padding: 0 12px;
  font-family: var(--font-body);
  font-size: 16px;
  color: var(--stone-900);
  background: #fff;
  border: 1px solid var(--stone-300);
  border-radius: var(--radius-control);
  transition: border-color var(--t-control) var(--ease), box-shadow var(--t-control) var(--ease);
}
.ccc-field textarea { height: auto; min-height: 120px; padding: 10px 12px; line-height: 1.55; }
.ccc-field input:focus, .ccc-field select:focus, .ccc-field textarea:focus {
  outline: none;
  border-color: var(--orange-600);
  box-shadow: 0 0 0 3px rgba(240,144,46,.35);
}
.ccc-field .hint { font-size: 13px; color: var(--stone-500); margin-top: 6px; }
.ccc-field .error { font-size: 13px; color: var(--red-600); margin-top: 6px; }
.ccc-field--invalid input, .ccc-field--invalid select, .ccc-field--invalid textarea { border-color: var(--red-600); }

.ccc-hp { position: absolute !important; left: -9999px !important; }

.ccc-formnote { font-size: 13px; color: var(--stone-500); margin-top: 16px; }

.ccc-alert {
  border-radius: var(--radius-card);
  padding: 16px;
  margin-bottom: 24px;
  font-size: 15px;
}
.ccc-alert--ok { background: var(--navy-50); border: 1px solid var(--navy-200); color: var(--navy-900); }
.ccc-alert--err { background: var(--red-100); border: 1px solid #E9B7B1; color: var(--red-700); }

/* Slot picker */
.ccc-slots { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.ccc-slot {
  height: 40px; padding: 0 14px;
  border: 1px solid var(--stone-300);
  border-radius: var(--radius-control);
  background: #fff;
  font-family: var(--font-body);
  font-size: 15px;
  color: var(--navy-900);
  cursor: pointer;
  transition: background-color var(--t-control) var(--ease), border-color var(--t-control) var(--ease), color var(--t-control) var(--ease);
}
.ccc-slot:hover { border-color: var(--navy-800); }
.ccc-slot[aria-pressed="true"] { background: var(--navy-800); border-color: var(--navy-800); color: #fff; }
.ccc-slot:focus-visible { outline: 3px solid var(--orange-500); outline-offset: 2px; }

/* ==========================================================================
   20. Contact card
   ========================================================================== */

.ccc-contactgrid { display: grid; grid-template-columns: 1fr 380px; gap: 48px; align-items: start; }
@media (max-width: 960px) { .ccc-contactgrid { grid-template-columns: 1fr; } }

.ccc-sticky { position: sticky; top: 100px; }
@media (max-width: 960px) { .ccc-sticky { position: static; } }

.ccc-contactcard__row { display: flex; gap: 12px; align-items: flex-start; padding: 14px 0; border-bottom: 1px solid var(--stone-200); }
.ccc-contactcard__row:last-of-type { border-bottom: 0; }
.ccc-contactcard__row .ccc-icon { color: var(--red-600); margin-top: 2px; }
.ccc-contactcard__label {
  font-family: var(--font-mono); font-weight: 500; font-size: 12px;
  text-transform: uppercase; letter-spacing: 0.09em; color: var(--stone-500);
  display: block; margin-bottom: 2px;
}
.ccc-contactcard a { color: var(--navy-900); text-decoration: none; font-weight: 500; }
.ccc-contactcard a:hover { color: var(--orange-700); text-decoration: underline; }
.ccc-contactcard__phone { font-size: 22px; font-family: var(--font-heading); font-weight: 600; }

/* ==========================================================================
   21. Gallery
   ========================================================================== */

.ccc-filter { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 32px; }

.ccc-gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
@media (max-width: 900px) { .ccc-gallery { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .ccc-gallery { grid-template-columns: 1fr; } }

.ccc-project {
  position: relative;
  display: block;
  border: 1px solid var(--stone-200);
  border-radius: var(--radius-card);
  overflow: hidden;
  background: var(--stone-100);
  box-shadow: var(--shadow-card);
  transition: transform var(--t-control) var(--ease), border-color var(--t-control) var(--ease);
}
.ccc-project:hover { transform: translateY(-2px); border-color: var(--navy-800); }
.ccc-project img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; }
.ccc-project__cap {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 12px 14px; background: #fff;
}
.ccc-project__title { font-weight: 500; color: var(--navy-950); font-size: 15px; }
.ccc-project__cat {
  font-family: var(--font-mono); font-weight: 500; font-size: 12px;
  text-transform: uppercase; letter-spacing: 0.09em; color: var(--stone-500);
  white-space: nowrap;
}
.ccc-project[hidden] { display: none; }
.ccc-gallery__empty { color: var(--stone-500); }

/* ==========================================================================
   22. Footer
   ========================================================================== */

.ccc-footer { background: var(--navy-950); color: var(--navy-100); }
.ccc-footer .ccc-wrap { padding-block: 64px 32px; }
.ccc-footer__grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: 40px; }
@media (max-width: 900px) { .ccc-footer__grid { grid-template-columns: 1fr 1fr; gap: 32px; } }
@media (max-width: 560px) { .ccc-footer__grid { grid-template-columns: 1fr; } }

.ccc-footer img.ccc-footer__logo { height: 56px; width: auto; margin-bottom: 16px; }
.ccc-footer h3 {
  color: #fff; font-size: 12px; font-family: var(--font-mono); font-weight: 500;
  text-transform: uppercase; letter-spacing: 0.09em; margin-bottom: 14px;
}
:where(.ccc-footer) p { color: var(--navy-200); font-size: 15px; }
.ccc-footer ul { list-style: none; margin: 0; padding: 0; }
.ccc-footer li { margin-bottom: 8px; }
.ccc-footer a { color: var(--navy-100); text-decoration: none; font-size: 15px; }
.ccc-footer a:hover { color: var(--orange-300); text-decoration: underline; }
.ccc-footer__phone { font-family: var(--font-heading); font-weight: 600; font-size: 22px; color: #fff !important; text-decoration: none !important; }
.ccc-footer__phone:hover { color: var(--orange-300) !important; }

.ccc-footer__bottom {
  margin-top: 48px;
  padding-top: 24px;
  border-top: 1px solid rgba(255,255,255,.12);
  display: flex; justify-content: flex-start; gap: 8px 28px; flex-wrap: wrap;
}
.ccc-footer__licence {
  font-family: var(--font-mono); font-weight: 500; font-size: 12px;
  text-transform: uppercase; letter-spacing: 0.09em; color: var(--navy-200);
}

/* ==========================================================================
   23. Content (single / editor fallback)
   ========================================================================== */

.ccc-prose { max-width: var(--measure); }
.ccc-prose h2 { margin-top: 40px; }
.ccc-prose ul, .ccc-prose ol { padding-left: 22px; margin: 0 0 16px; }
.ccc-prose li { margin-bottom: 6px; }

/* ==========================================================================
   23b. Page furniture
   ========================================================================== */

.ccc-section--stone { background: var(--stone-50); }
.ccc-section--navy { background: var(--navy-950); }
.ccc-section--navy h2, .ccc-section--navy h3 { color: #fff; }
.ccc-section--navy p { color: var(--navy-100); }

/* About: photo beside the story */
.ccc-storygrid { display: grid; grid-template-columns: 420px 1fr; gap: 56px; align-items: start; }
.ccc-storygrid img { width: 100%; border-radius: var(--radius-card); display: block; }
@media (max-width: 900px) { .ccc-storygrid { grid-template-columns: 1fr; gap: 32px; } }

/* Pull quote inside prose */
.ccc-pullquote {
  margin: 32px 0;
  padding: 24px 28px;
  background: var(--stone-50);
  border-top: 3px solid var(--orange-600);
  border-radius: var(--radius-card);
}
.ccc-pullquote p {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 22px;
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--navy-950);
  margin: 0;
}
.ccc-pullquote cite {
  display: block;
  margin-top: 12px;
  font-style: normal;
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--stone-500);
}

/* Anchor offset so the sticky header never covers a jumped-to heading */
[id] { scroll-margin-top: 100px; }

/* ==========================================================================
   24. Motion
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .ccc-btn:active, a.ccc-card:hover, .ccc-card--interactive:hover, .ccc-project:hover { transform: none; }
}

/* Print */
@media print {
  .ccc-header, .ccc-cta, .ccc-footer nav { display: none; }
}

/* ==========================================================================
   25. Featured work strip
   ========================================================================== */

.ccc-gallery--featured { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 900px) { .ccc-gallery--featured { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .ccc-gallery--featured { grid-template-columns: 1fr; } }

a.ccc-project { text-decoration: none; color: inherit; }
a.ccc-project .ccc-project__cap { display: flex; }

/* ==========================================================================
   26. Service detail sections
   ========================================================================== */

.ccc-servicedetail { border-top: 1px solid var(--stone-200); padding-block: 48px; }
.ccc-servicedetail:first-of-type { border-top: 0; padding-top: 0; }
.ccc-servicedetail__inner { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: start; }
@media (max-width: 860px) { .ccc-servicedetail__inner { grid-template-columns: 1fr; gap: 24px; } }

.ccc-servicedetail h2 { font-size: 26px; display: flex; align-items: center; gap: 12px; }
.ccc-servicedetail h2 .ccc-icon { color: var(--orange-600); }
.ccc-servicedetail h3 {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--stone-500);
  margin-bottom: 12px;
}
.ccc-servicedetail ul { list-style: none; margin: 0; padding: 0; }
.ccc-servicedetail li {
  position: relative;
  padding-left: 22px;
  margin-bottom: 8px;
  color: var(--stone-700);
}
.ccc-servicedetail li::before {
  content: "";
  position: absolute;
  left: 0; top: 9px;
  width: 8px; height: 8px;
  border-radius: 1px;
  background: var(--orange-300);
}

/* ==========================================================================
   27. Team
   ========================================================================== */

.ccc-person img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--radius-card);
  margin-bottom: 16px;
  display: block;
}
.ccc-person h3 { font-size: 20px; margin-bottom: 2px; }
.ccc-person__role {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--red-600);
  margin-bottom: 10px;
}

/* ==========================================================================
   28. FAQ (core details block)
   ========================================================================== */

.ccc-faq { max-width: var(--measure); }
.ccc-faq__item {
  border-bottom: 1px solid var(--stone-200);
  padding: 0;
}
.ccc-faq__item summary {
  cursor: pointer;
  list-style: none;
  padding: 20px 40px 20px 0;
  position: relative;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 18px;
  line-height: 1.35;
  color: var(--navy-950);
}
.ccc-faq__item summary::-webkit-details-marker { display: none; }
.ccc-faq__item summary:hover { color: var(--navy-700); }
.ccc-faq__item summary:focus-visible { outline: 3px solid var(--orange-500); outline-offset: 2px; }
.ccc-faq__item summary::after {
  content: "";
  position: absolute;
  right: 6px; top: 27px;
  width: 10px; height: 10px;
  border-right: 2px solid var(--orange-600);
  border-bottom: 2px solid var(--orange-600);
  transform: rotate(45deg);
  transition: transform var(--t-control) var(--ease);
}
.ccc-faq__item[open] summary::after { transform: rotate(-135deg); top: 31px; }
.ccc-faq__item > *:not(summary) { padding-bottom: 20px; }
.ccc-faq__item p { color: var(--stone-700); max-width: 62ch; }

/* ==========================================================================
   29. Steps: what happens next
   ========================================================================== */

.ccc-next { counter-reset: ccc-next; }
.ccc-next__item { display: flex; gap: 16px; align-items: flex-start; }
.ccc-next__num {
  flex: none;
  width: 34px; height: 34px;
  display: grid; place-items: center;
  border-radius: var(--radius-control);
  background: var(--navy-950);
  color: #fff;
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 13px;
}
.ccc-next__item h3 { font-size: 18px; margin-bottom: 4px; }
.ccc-next__item p { color: var(--stone-700); font-size: 15px; margin: 0; }

/* ==========================================================================
   Service pages + photo service cards (added Sept 2026)
   All new ccc- classes; nothing here overrides existing rules.
   ========================================================================== */
.ccc-svccards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px;}
@media (max-width:960px){.ccc-svccards{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media (max-width:560px){.ccc-svccards{grid-template-columns:1fr;}}
.ccc-svccard{display:flex;flex-direction:column;background:#fff;border:1px solid var(--stone-200);border-radius:var(--radius-card);box-shadow:var(--shadow-card);overflow:hidden;text-decoration:none;color:inherit;transition:transform var(--t-overlay) var(--ease),box-shadow var(--t-overlay) var(--ease);}
.ccc-svccard:hover{transform:translateY(-3px);box-shadow:0 10px 28px rgba(14,42,71,.14),0 0 0 1px rgba(14,42,71,.06);}
.ccc-svccard:focus-visible{outline:2px solid var(--orange-600);outline-offset:3px;}
.ccc-svccard__media{display:block;aspect-ratio:4/3;overflow:hidden;background:var(--stone-100);}
.ccc-svccard__media img{width:100%;height:100%;object-fit:cover;display:block;transition:transform 400ms var(--ease);}
.ccc-svccard:hover .ccc-svccard__media img{transform:scale(1.04);}
.ccc-svccard__body{display:flex;flex-direction:column;gap:8px;padding:20px 20px 22px;flex:1;}
.ccc-svccard__title{font-family:var(--font-heading);font-size:19px;font-weight:600;line-height:1.25;color:var(--navy-950);margin:0;}
.ccc-svccard__text{font-size:15px;line-height:1.55;color:var(--stone-700);margin:0;}
.ccc-svccard__more{margin-top:auto;padding-top:10px;font-family:var(--font-mono);font-size:12px;font-weight:500;letter-spacing:.09em;text-transform:uppercase;color:var(--orange-700);}

/* Labeled photo placeholders (swap for real photos as they arrive) */
.ccc-ph{display:flex;align-items:center;justify-content:center;text-align:center;aspect-ratio:4/3;background:repeating-linear-gradient(135deg,var(--stone-100) 0 12px,var(--stone-50) 12px 24px);border:2px dashed var(--stone-300);padding:16px;}
.ccc-svccard__media.ccc-ph,.ccc-work .ccc-ph{border-width:0 0 2px 0;}
.ccc-ph__label{font-family:var(--font-mono);font-size:12px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--stone-700);line-height:1.5;}
.ccc-ph__label small{display:block;font-size:11px;letter-spacing:.03em;text-transform:none;color:var(--stone-500);margin-top:4px;}
.ccc-pagehero .ccc-btn-row{margin-top:26px;}
.ccc-phtag{display:inline-block;margin-top:24px;padding:6px 12px;border:1px dashed var(--orange-300);border-radius:var(--radius-control);font-family:var(--font-mono);font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--orange-300);}

/* Service page layout */
.ccc-split{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:56px;align-items:start;}
@media (max-width:900px){.ccc-split{grid-template-columns:1fr;gap:32px;}}
.ccc-split__copy p{font-size:17px;line-height:1.7;}
.ccc-split__copy h2{margin-bottom:18px;}
.ccc-split__copy p{margin:0 0 16px;}
.ccc-split__copy p:last-child{margin-bottom:0;}
.ccc-checklist{list-style:none;padding:0;margin:12px 0 0;}
.ccc-checklist li{position:relative;padding:11px 0 11px 30px;border-top:1px solid var(--stone-200);}
.ccc-checklist li:first-child{border-top:0;}
.ccc-checklist li::before{content:"";position:absolute;left:2px;top:17px;width:12px;height:7px;border-left:2px solid var(--orange-600);border-bottom:2px solid var(--orange-600);transform:rotate(-45deg);}
.ccc-workgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;}
@media (max-width:780px){.ccc-workgrid{grid-template-columns:1fr;}}
.ccc-work{margin:0;background:#fff;border:1px solid var(--stone-200);border-radius:var(--radius-card);overflow:hidden;box-shadow:var(--shadow-card);}
.ccc-work img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover;}
.ccc-work figcaption{padding:12px 16px;font-size:15px;font-weight:500;color:var(--navy-950);}
.ccc-morelink{margin-top:28px;font-family:var(--font-mono);font-size:13px;letter-spacing:.08em;text-transform:uppercase;}
.ccc-morelink a{color:var(--orange-700);text-decoration:none;}
.ccc-morelink a:hover{text-decoration:underline;}
.ccc-svclinks{display:flex;flex-wrap:wrap;gap:10px;list-style:none;padding:0;margin:0;}
.ccc-svclinks a{display:inline-block;padding:10px 16px;border:1px solid var(--stone-300);border-radius:var(--radius-control);background:#fff;color:var(--navy-900);text-decoration:none;font-weight:500;font-size:15px;transition:border-color var(--t-control),color var(--t-control);}
.ccc-svclinks a:hover{border-color:var(--orange-600);color:var(--orange-700);}

/* Contact map + Google review links (added Sept 2026) */
.ccc-map{margin-top:32px;border:1px solid var(--stone-200);border-radius:var(--radius-card);overflow:hidden;box-shadow:var(--shadow-card);}
.ccc-map iframe{display:block;width:100%;height:380px;border:0;}
.ccc-reviewlinks a{display:inline-block;margin-right:28px;}

/* Google review quote on service pages + hero rating line (added Sept 2026) */
.ccc-quote{margin:40px 0 0;padding:28px 32px;background:#fff;border:1px solid var(--stone-200);border-left:4px solid var(--orange-600);border-radius:var(--radius-card);box-shadow:var(--shadow-card);}
.ccc-quote__stars{color:var(--orange-500);letter-spacing:.12em;font-size:18px;margin-bottom:10px;}
.ccc-quote blockquote{margin:0;padding:0;border:0;}
.ccc-quote blockquote p{font-family:var(--font-heading);font-size:clamp(18px,2vw,21px);line-height:1.5;color:var(--navy-950);margin:0;}
.ccc-quote figcaption{margin-top:14px;font-size:14px;color:var(--stone-700);}
.ccc-quote figcaption strong{color:var(--navy-950);}
.ccc-hero__proof{margin-top:22px;font-size:14px;color:var(--navy-100);}
.ccc-hero__proof a{color:#fff;text-decoration:none;font-weight:500;}
.ccc-hero__proof a:hover{text-decoration:underline;}
.ccc-hero__stars{color:var(--orange-500);letter-spacing:.1em;margin-right:4px;}
.ccc-hero__sep{margin:0 8px;opacity:.6;}

/* ==========================================================================
   Card height fix, gallery button spacing, services dropdown, town links
   (added Sept 2026)
   ========================================================================== */
/* Equal-height project cards: caption fills the card, no beige strip. */
.ccc-gallery .ccc-project{display:flex;flex-direction:column;background:#fff;}
.ccc-gallery .ccc-project__cap{flex:1 1 auto;}
.ccc-gallery--featured + .ccc-btn-row{margin-top:36px;}

/* Services dropdown (desktop) */
.ccc-nav__item{position:relative;display:flex;align-items:center;gap:2px;}
.ccc-nav__toggle{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;padding:0;border:0;background:none;color:var(--navy-900);cursor:pointer;border-radius:var(--radius-control);}
.ccc-nav__toggle svg{transition:transform var(--t-control) var(--ease);}
.ccc-nav__toggle:hover{color:var(--orange-700);}
.ccc-nav__toggle:focus-visible{outline:2px solid var(--orange-600);outline-offset:2px;}
.ccc-subnav{position:absolute;top:100%;left:-18px;margin-top:12px;min-width:270px;display:none;flex-direction:column;padding:8px;background:#fff;border:1px solid var(--stone-200);border-radius:var(--radius-card);box-shadow:0 14px 34px rgba(14,42,71,.16);z-index:120;}
.ccc-subnav::before{content:"";position:absolute;left:0;right:0;top:-14px;height:14px;}
.ccc-nav__item--has-sub:hover .ccc-subnav,.ccc-nav__item--has-sub:focus-within .ccc-subnav,.ccc-nav__item--has-sub.is-open .ccc-subnav{display:flex;}
.ccc-nav__item--has-sub:hover .ccc-nav__toggle svg,.ccc-nav__item--has-sub.is-open .ccc-nav__toggle svg{transform:rotate(180deg);}
.ccc-nav .ccc-subnav a{padding:9px 12px;border-radius:var(--radius-control);font-size:15px;white-space:nowrap;}
.ccc-nav .ccc-subnav a:hover{background:var(--stone-50);color:var(--orange-700);}
.ccc-nav .ccc-subnav a[aria-current="page"]{color:var(--orange-700);}
.ccc-nav .ccc-subnav a[aria-current="page"]::after{display:none;}
.ccc-nav .ccc-subnav a.ccc-subnav__all{margin-top:4px;padding-top:12px;border-top:1px solid var(--stone-200);border-radius:0;font-family:var(--font-mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--orange-700);}

/* Services dropdown (mobile menu) */
@media (max-width: 900px) {
	.ccc-nav__item{flex-wrap:wrap;border-bottom:1px solid var(--stone-100);}
	.ccc-nav .ccc-nav__item > a{flex:1 1 auto;border-bottom:0;}
	.ccc-nav__toggle{width:44px;height:44px;}
	.ccc-nav__item--has-sub:hover .ccc-subnav,.ccc-nav__item--has-sub:focus-within .ccc-subnav{display:none;}
	.ccc-nav__item--has-sub:hover .ccc-nav__toggle svg{transform:none;}
	.ccc-nav__item--has-sub.is-open .ccc-subnav{display:flex;}
	.ccc-nav__item--has-sub.is-open .ccc-nav__toggle svg{transform:rotate(180deg);}
	.ccc-subnav{position:static;flex-basis:100%;min-width:0;margin:0 0 10px;padding:0 0 0 14px;border:0;border-left:2px solid var(--stone-200);border-radius:0;box-shadow:none;}
	.ccc-subnav::before{display:none;}
	.ccc-nav .ccc-subnav a{padding:9px 0 9px 4px;border-bottom:0;white-space:normal;}
}

/* Town tags are links to the location pages */
a.ccc-tag{text-decoration:none;color:inherit;transition:border-color var(--t-control) var(--ease),color var(--t-control) var(--ease);}
a.ccc-tag:hover{border-color:var(--orange-600);color:var(--orange-700);}

/* Areas We Serve dropdown, grouped by region (added Sept 2026) */
.ccc-nav .ccc-subnav--areas{left:50%;transform:translateX(-50%);min-width:0;width:640px;max-width:calc(100vw - 32px);display:none;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px 16px;padding:18px 18px 10px;}
.ccc-nav__item--has-sub:hover .ccc-subnav--areas,.ccc-nav__item--has-sub:focus-within .ccc-subnav--areas,.ccc-nav__item--has-sub.is-open .ccc-subnav--areas{display:grid;}
.ccc-subnav__group{display:flex;flex-direction:column;}
.ccc-subnav__heading{padding:0 12px 6px;margin-bottom:4px;border-bottom:1px solid var(--stone-200);font-family:var(--font-mono);font-size:11px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:var(--stone-500);}
.ccc-nav .ccc-subnav--areas a{padding:7px 12px;}
.ccc-nav .ccc-subnav--areas a.ccc-subnav__all{grid-column:1 / -1;}
@media (max-width: 900px) {
	.ccc-nav .ccc-subnav--areas{transform:none;width:auto;max-width:none;padding:0 0 0 14px;gap:0;}
	.ccc-nav__item--has-sub:hover .ccc-subnav--areas,.ccc-nav__item--has-sub:focus-within .ccc-subnav--areas{display:none;}
	.ccc-nav__item--has-sub.is-open .ccc-subnav--areas{display:flex;}
	.ccc-subnav__heading{padding:10px 0 4px 4px;border-bottom:0;margin:0;}
	.ccc-nav .ccc-subnav--areas a{padding:8px 0 8px 4px;}
}
@media (min-width: 901px) and (max-width: 1120px) {
	.ccc-nav{gap:18px;}
}

/* Step numbers on the Contact page: keep them white on navy (a paragraph color rule was overriding them). */
.ccc-next__item .ccc-next__num{color:#fff;margin:0;line-height:1;}