/* =========================================================
   CREWCAST PAGE
   File: css/crewcast.css
========================================================= */

/* =========================================================
   00 — PAGE VARIABLES
========================================================= */

:root {
  --cc-blue: #0e5aa7;
  --cc-blue-dark: #083a70;
  --cc-blue-deep: #061f3c;
  --cc-blue-light: #55b6ff;
  --cc-blue-pale: #eaf5ff;

  --cc-green: var(--site-color-01, #0a7700);
  --cc-green-dark: var(--site-color-01-hover, #075700);
  --cc-green-light: #9fd798;

  --cc-maroon: var(--site-color-02, #63002b);

  --cc-dark: #14171b;
  --cc-dark-soft: #1d2228;
  --cc-dark-medium: #262c33;

  --cc-white: #ffffff;
  --cc-off-white: #f5f7f9;

  --cc-text-dark: #1f2328;
  --cc-text-medium: #59616b;
  --cc-text-light: rgba(255, 255, 255, 0.76);

  --cc-border-dark: rgba(0, 0, 0, 0.1);
  --cc-border-light: rgba(255, 255, 255, 0.14);

  --cc-radius-small: 10px;
  --cc-radius-medium: 16px;
  --cc-radius-large: 24px;

  --cc-shadow-small: 0 10px 28px rgba(0, 0, 0, 0.08);
  --cc-shadow-medium: 0 18px 42px rgba(0, 0, 0, 0.13);
  --cc-shadow-large: 0 24px 60px rgba(0, 0, 0, 0.24);

  --cc-section-padding: 9rem;
}

/* =========================================================
   01 — GENERAL PAGE STYLES
========================================================= */

.cc-section {
  position: relative;
  width: 100%;
  padding: var(--cc-section-padding) 0;
}

.cc-section img {
  display: block;
  max-width: 100%;
}

.cc-section-heading {
  max-width: 880px;
  margin: 0 auto 5.5rem;
  text-align: center;
}

.cc-section-heading h2 {
  margin-bottom: 1.8rem;

  color: var(--cc-text-dark);

  font-size: clamp(3.4rem, 5vw, 5.3rem);
  font-weight: 900;
  line-height: 1.07;

  text-transform: none;
}

.cc-section-heading > p:not(.section-eyebrow) {
  max-width: 760px;
  margin-right: auto;
  margin-left: auto;

  color: var(--cc-text-medium);

  font-size: 1.7rem;
  line-height: 1.72;
}

.cc-section-heading-light h2 {
  color: #ffffff;
}

.cc-section-heading-light > p:not(.section-eyebrow) {
  color: rgba(255, 255, 255, 0.72);
}

.cc-section-heading-light .section-eyebrow {
  color: var(--cc-blue-light);
}

/* =========================================================
   02 — HERO
========================================================= */

.cc-hero {
  position: relative;

  display: flex;
  align-items: center;

  min-height: 760px;

  overflow: hidden;

  background-color: #101317;
}

.cc-hero-background {
  position: absolute;
  inset: 0;
}

.cc-hero-background img {
  width: 100%;
  height: 100%;

  object-fit: cover;
  object-position: center;
}

.cc-hero-overlay {
  position: absolute;
  inset: 0;

  background:
    linear-gradient(
      90deg,
      rgba(4, 9, 15, 0.95) 0%,
      rgba(4, 9, 15, 0.82) 40%,
      rgba(4, 9, 15, 0.42) 72%,
      rgba(4, 9, 15, 0.15) 100%
    ),
    linear-gradient(0deg, rgba(0, 0, 0, 0.35), rgba(0, 0, 0, 0));
}

.cc-hero-content {
  position: relative;
  z-index: 2;

  width: 100%;

  padding-top: 9rem;
  padding-bottom: 8rem;
  padding-left: 4rem;
}

.cc-hero-content > * {
  max-width: 760px;
}

.cc-hero-content .section-eyebrow {
  margin-bottom: 1.4rem;

  color: var(--cc-blue-light);

  font-size: 1.35rem;
  font-weight: 800;
  letter-spacing: 0.06em;
}

.cc-hero-content h1 {
  margin-bottom: 2rem;

  color: #ffffff;

  font-size: clamp(4.4rem, 6.5vw, 6.8rem);
  font-weight: 900;
  line-height: 1.01;

  text-align: left;
  text-transform: none;

  text-shadow: 0 4px 22px rgba(0, 0, 0, 0.5);
}

.cc-hero-summary {
  max-width: 700px;
  margin-bottom: 3rem;

  color: rgba(255, 255, 255, 0.84);

  font-size: 1.75rem;
  line-height: 1.72;
}

.cc-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 1.2rem;
}

/* =========================================================
   03 — COMMUNICATION GAP
========================================================= */

.cc-problem {
  background-color: #ffffff;
}

.cc-problem-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 2rem;

  max-width: 1100px;
  margin: 0 auto;
}

.cc-problem-card {
  padding: 3rem;

  border: 1px solid var(--cc-border-dark);
  border-radius: var(--cc-radius-medium);

  background-color: var(--cc-off-white);

  transition:
    transform 300ms ease,
    box-shadow 300ms ease,
    border-color 300ms ease;
}

.cc-problem-card:hover {
  transform: translateY(-5px);

  border-color: rgba(14, 90, 167, 0.28);

  box-shadow: var(--cc-shadow-medium);
}

.cc-card-number {
  display: inline-block;

  margin-bottom: 1.8rem;

  color: var(--cc-blue);

  font-size: 1.2rem;
  font-weight: 900;
  letter-spacing: 0.1em;
}

.cc-problem-card h3 {
  margin-bottom: 1rem;

  color: var(--cc-text-dark);

  font-size: 2.2rem;
  font-weight: 900;
  line-height: 1.2;

  text-transform: none;
}

.cc-problem-card p {
  margin: 0;

  color: var(--cc-text-medium);

  font-size: 1.45rem;
  line-height: 1.65;
}

.cc-problem-takeaway {
  max-width: 850px;

  margin: 4.5rem auto 0;
  padding: 2.4rem 2.8rem;

  border-left: 5px solid var(--cc-blue);
  border-radius: 0 var(--cc-radius-medium) var(--cc-radius-medium) 0;

  background-color: var(--cc-blue-pale);

  box-shadow: var(--cc-shadow-small);
}

.cc-problem-takeaway strong {
  color: var(--cc-text-dark);

  font-size: 1.9rem;
  font-weight: 900;
  line-height: 1.45;
}

/* =========================================================
   04 — VIDEO SECTION
========================================================= */

.cc-video-section {
  overflow: hidden;

  background:
    radial-gradient(
      circle at 50% 0%,
      rgba(85, 182, 255, 0.18),
      transparent 40%
    ),
    linear-gradient(145deg, #11161c, #1c2732);
}

.cc-video-wrapper {
  position: relative;

  width: 100%;
  max-width: 980px;
  aspect-ratio: 16 / 9;

  margin: 0 auto;

  overflow: hidden;

  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: var(--cc-radius-large);

  background-color: #000000;

  box-shadow:
    0 24px 60px rgba(0, 0, 0, 0.35),
    0 0 50px rgba(14, 90, 167, 0.12);
}

.cc-video-wrapper iframe {
  display: block;

  width: 100%;
  height: 100%;

  border: 0;
}

/* =========================================================
   05 — DONELSON WORKFLOW
========================================================= */

.cc-workflow {
  background: linear-gradient(180deg, #f5f7f9, #edf1f4);
}

.cc-workflow-grid {
  display: grid;

  grid-template-columns: repeat(2, minmax(0, 1fr));

  gap: 2rem;

  max-width: 1100px;
  margin: 0 auto;
}

.cc-workflow-card {
  display: grid;

  grid-template-columns: 70px minmax(0, 1fr);

  gap: 2rem;

  padding: 3rem;

  border: 1px solid var(--cc-border-dark);
  border-radius: var(--cc-radius-medium);

  background-color: #ffffff;

  box-shadow: var(--cc-shadow-small);

  transition:
    transform 300ms ease,
    border-color 300ms ease,
    box-shadow 300ms ease;
}

.cc-workflow-card:hover {
  transform: translateY(-5px);

  border-color: rgba(14, 90, 167, 0.28);

  box-shadow: var(--cc-shadow-medium);
}

.cc-workflow-card-featured {
  grid-column: 1 / -1;

  max-width: 760px;
  width: 100%;

  margin: 0 auto;

  border-color: rgba(10, 119, 0, 0.26);

  background: linear-gradient(145deg, #f2fbf0, #ffffff);
}

.cc-workflow-number {
  display: flex;
  align-items: center;
  justify-content: center;

  width: 62px;
  height: 62px;

  border-radius: 50%;

  background: linear-gradient(145deg, var(--cc-blue), var(--cc-blue-dark));

  color: #ffffff;

  font-size: 1.55rem;
  font-weight: 900;

  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.16);
}

.cc-workflow-card-featured .cc-workflow-number {
  background: linear-gradient(145deg, var(--cc-green), var(--cc-green-dark));
}

.cc-workflow-label {
  margin-bottom: 0.7rem;

  color: var(--cc-blue);

  font-size: 1.15rem;
  font-weight: 900;

  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.cc-workflow-card-featured .cc-workflow-label {
  color: var(--cc-green);
}

.cc-workflow-card h3 {
  margin-bottom: 1rem;

  color: var(--cc-text-dark);

  font-size: 2.25rem;
  font-weight: 900;
  line-height: 1.2;

  text-transform: none;
}

.cc-workflow-card div > p:last-child {
  margin: 0;

  color: var(--cc-text-medium);

  font-size: 1.45rem;
  line-height: 1.65;
}

/* =========================================================
   06 — RESIDENT EXPERIENCE
========================================================= */

.cc-resident-experience {
  background-color: #ffffff;
}

.cc-resident-layout {
  display: grid;

  grid-template-columns:
    minmax(320px, 0.85fr)
    minmax(0, 1.15fr);

  gap: 7rem;

  align-items: center;
}

.cc-resident-visual {
  display: flex;
  justify-content: center;
}

.cc-resident-visual img {
  width: min(100%, 480px);
  height: auto;

  filter: drop-shadow(0 25px 40px rgba(0, 0, 0, 0.24));
}

.cc-resident-content h2 {
  margin-bottom: 2rem;

  color: var(--cc-text-dark);

  font-size: clamp(3.2rem, 4.5vw, 4.9rem);
  font-weight: 900;
  line-height: 1.08;

  text-transform: none;
}

.cc-resident-content > p:not(.section-eyebrow) {
  margin-bottom: 2.4rem;

  color: var(--cc-text-medium);

  font-size: 1.65rem;
  line-height: 1.72;
}

.cc-feature-list {
  display: grid;
  gap: 1rem;
}

.cc-feature-item {
  display: grid;

  grid-template-columns: 48px minmax(0, 1fr);

  gap: 1.3rem;

  padding: 1.7rem;

  border: 1px solid var(--cc-border-dark);
  border-radius: 12px;

  background-color: var(--cc-off-white);
}

.cc-feature-item > span {
  display: flex;
  align-items: center;
  justify-content: center;

  width: 42px;
  height: 42px;

  border-radius: 50%;

  background-color: var(--cc-blue);

  color: #ffffff;

  font-size: 1.15rem;
  font-weight: 900;
}

.cc-feature-item h3 {
  margin-bottom: 0.4rem;

  color: var(--cc-text-dark);

  font-size: 1.7rem;
  font-weight: 900;
  line-height: 1.3;

  text-transform: none;
}

.cc-feature-item p {
  margin: 0;

  color: var(--cc-text-medium);

  font-size: 1.35rem;
  line-height: 1.55;
}

/* =========================================================
   07 — HUMAN + DIGITAL COMMUNICATION
========================================================= */

.cc-human-digital {
  overflow: hidden;

  background:
    radial-gradient(
      circle at 85% 25%,
      rgba(14, 90, 167, 0.18),
      transparent 38%
    ),
    linear-gradient(145deg, #15191e, #242a31);
}

.cc-human-digital-grid {
  display: grid;

  grid-template-columns: repeat(2, minmax(0, 1fr));

  gap: 2.5rem;

  max-width: 1050px;
  margin: 0 auto;
}

.cc-channel-card {
  padding: 3.2rem;

  border: 1px solid var(--cc-border-light);
  border-radius: var(--cc-radius-large);

  background: rgba(255, 255, 255, 0.055);

  box-shadow: var(--cc-shadow-medium);
}

.cc-channel-card-featured {
  border-color: rgba(85, 182, 255, 0.35);

  background: linear-gradient(
    145deg,
    rgba(14, 90, 167, 0.2),
    rgba(255, 255, 255, 0.04)
  );
}

.cc-channel-label {
  margin-bottom: 1rem;

  color: var(--cc-blue-light);

  font-size: 1.15rem;
  font-weight: 900;

  text-transform: uppercase;
  letter-spacing: 0.09em;
}

.cc-channel-card h3 {
  margin-bottom: 1.2rem;

  color: #ffffff;

  font-size: 2.5rem;
  font-weight: 900;
  line-height: 1.2;

  text-transform: none;
}

.cc-channel-card > p:not(.cc-channel-label) {
  margin-bottom: 1.8rem;

  color: rgba(255, 255, 255, 0.7);

  font-size: 1.5rem;
  line-height: 1.68;
}

.cc-channel-card ul {
  display: grid;
  gap: 0.8rem;

  margin-bottom: 2rem;
}

.cc-channel-card li {
  position: relative;

  padding-left: 1.6rem;

  color: rgba(255, 255, 255, 0.78);

  font-size: 1.4rem;
  line-height: 1.5;
}

.cc-channel-card li::before {
  content: "";

  position: absolute;
  top: 0.72rem;
  left: 0;

  width: 7px;
  height: 7px;

  border-radius: 50%;

  background-color: var(--cc-blue-light);
}

.cc-channel-card .learn-more-link {
  color: #8bcaff;
  border-bottom-color: #8bcaff;
}

.cc-channel-card .learn-more-link:hover {
  color: #ffffff;
  border-bottom-color: #ffffff;
}

.cc-channel-takeaway {
  max-width: 860px;

  margin: 4.5rem auto 0;
  padding: 2.5rem 3rem;

  border-left: 5px solid var(--cc-blue);
  border-radius: 0 var(--cc-radius-medium) var(--cc-radius-medium) 0;

  background: rgba(255, 255, 255, 0.07);
}

.cc-channel-takeaway strong {
  display: block;

  margin-bottom: 0.7rem;

  color: #ffffff;

  font-size: 1.9rem;
  font-weight: 900;
}

.cc-channel-takeaway p {
  margin: 0;

  color: rgba(255, 255, 255, 0.7);

  font-size: 1.5rem;
  line-height: 1.65;
}

/* =========================================================
   08 — CITY BENEFITS
========================================================= */

.cc-city-benefits {
  background-color: #ffffff;
}

.cc-benefit-grid {
  display: grid;

  grid-template-columns: repeat(4, minmax(0, 1fr));

  gap: 1.7rem;
}

.cc-benefit-card {
  padding: 2.7rem;

  border: 1px solid var(--cc-border-dark);
  border-radius: var(--cc-radius-medium);

  background-color: var(--cc-off-white);

  transition:
    transform 300ms ease,
    border-color 300ms ease,
    box-shadow 300ms ease;
}

.cc-benefit-card:hover {
  transform: translateY(-5px);

  border-color: rgba(14, 90, 167, 0.3);

  box-shadow: var(--cc-shadow-medium);
}

.cc-benefit-card > span {
  display: inline-block;

  margin-bottom: 1.8rem;

  color: var(--cc-blue);

  font-size: 1.2rem;
  font-weight: 900;
  letter-spacing: 0.1em;
}

.cc-benefit-card h3 {
  margin-bottom: 1rem;

  color: var(--cc-text-dark);

  font-size: 2rem;
  font-weight: 900;
  line-height: 1.25;

  text-transform: none;
}

.cc-benefit-card p {
  margin: 0;

  color: var(--cc-text-medium);

  font-size: 1.4rem;
  line-height: 1.65;
}

/* =========================================================
   09 — CALL REDUCTION STAT
========================================================= */

.cc-call-reduction {
  display: grid;

  grid-template-columns: 300px minmax(0, 1fr);

  gap: 4rem;

  align-items: center;

  max-width: 1000px;

  margin: 6rem auto 0;
  padding: 3.5rem;

  border: 1px solid rgba(14, 90, 167, 0.14);
  border-radius: var(--cc-radius-large);

  background: linear-gradient(145deg, #f0f8ff, #ffffff);

  box-shadow: var(--cc-shadow-medium);
}

.cc-call-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  min-height: 240px;

  padding: 2rem;

  border-radius: var(--cc-radius-medium);

  background: linear-gradient(145deg, var(--cc-blue), var(--cc-blue-dark));

  text-align: center;
}

.cc-call-number {
  display: block;

  color: #ffffff;

  font-size: clamp(5rem, 8vw, 7.5rem);
  font-weight: 900;
  line-height: 1;
}

.cc-call-label {
  display: block;

  max-width: 220px;

  margin-top: 1rem;

  color: rgba(255, 255, 255, 0.78);

  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.5;
}

.cc-call-copy h3 {
  margin-bottom: 1.2rem;

  color: var(--cc-text-dark);

  font-size: 2.7rem;
  font-weight: 900;
  line-height: 1.2;

  text-transform: none;
}

.cc-call-copy p {
  margin-bottom: 1rem;

  color: var(--cc-text-medium);

  font-size: 1.5rem;
  line-height: 1.68;
}

.cc-call-copy .cc-stat-note {
  margin-bottom: 0;

  color: #777f87;

  font-size: 1.2rem;
  font-style: italic;
  line-height: 1.55;
}

/* =========================================================
   10 — PRESSUREPAVE® INTEGRATION
========================================================= */

.cc-pressurepave {
  overflow: hidden;

  background:
    radial-gradient(circle at 10% 20%, rgba(10, 119, 0, 0.18), transparent 38%),
    linear-gradient(145deg, #161916, #252b25);
}

.cc-pressurepave-layout {
  display: grid;

  grid-template-columns:
    minmax(0, 1.05fr)
    minmax(360px, 0.95fr);

  gap: 6rem;

  align-items: center;
}

.cc-pressurepave-content .section-eyebrow {
  color: var(--cc-green-light);
}

.cc-pressurepave-content h2 {
  margin-bottom: 2rem;

  color: #ffffff;

  font-size: clamp(3.2rem, 4.5vw, 4.9rem);
  font-weight: 900;
  line-height: 1.08;

  text-transform: none;
}

.cc-pressurepave-content > p:not(.section-eyebrow) {
  margin-bottom: 1.7rem;

  color: rgba(255, 255, 255, 0.72);

  font-size: 1.65rem;
  line-height: 1.72;
}

/* =========================================================
   10A — PRESSUREPAVE STACK
========================================================= */

.cc-pressurepave-stack {
  display: grid;
  gap: 1rem;
}

.cc-stack-item {
  display: grid;

  grid-template-columns: 46px minmax(0, 1fr);

  gap: 1.3rem;

  padding: 2rem;

  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: 12px;

  background: rgba(255, 255, 255, 0.055);
}

.cc-stack-item > span {
  display: flex;
  align-items: center;
  justify-content: center;

  width: 42px;
  height: 42px;

  border-radius: 50%;

  background-color: var(--cc-green);

  color: #ffffff;

  font-size: 1.15rem;
  font-weight: 900;
}

.cc-stack-item strong {
  display: block;

  margin-bottom: 0.3rem;

  color: #ffffff;

  font-size: 1.8rem;
  font-weight: 900;
}

.cc-stack-item p {
  margin: 0;

  color: rgba(255, 255, 255, 0.62);

  font-size: 1.35rem;
  line-height: 1.5;
}

.cc-stack-plus {
  color: var(--cc-green-light);

  font-size: 2.4rem;
  font-weight: 900;
  line-height: 1;

  text-align: center;
}

/* =========================================================
   11 — PARTNERSHIP / CIVICLINK
========================================================= */

.cc-partnership {
  background: linear-gradient(180deg, #f5f7f9, #eef2f5);
}

.cc-partnership-content {
  max-width: 900px;

  text-align: center;
}

.cc-partnership-content h2 {
  margin-bottom: 1.8rem;

  color: var(--cc-text-dark);

  font-size: clamp(3.4rem, 5vw, 5rem);
  font-weight: 900;
  line-height: 1.08;

  text-transform: none;
}

.cc-partnership-content > p:not(.section-eyebrow) {
  max-width: 780px;

  margin-right: auto;
  margin-bottom: 1.5rem;
  margin-left: auto;

  color: var(--cc-text-medium);

  font-size: 1.65rem;
  line-height: 1.72;
}

.cc-partnership-content .button {
  display: inline-flex;

  margin-top: 1.4rem;
}

/* =========================================================
   12 — FINAL CTA
========================================================= */

.cc-final-cta {
  overflow: hidden;

  background:
    radial-gradient(
      circle at 15% 20%,
      rgba(14, 90, 167, 0.34),
      transparent 38%
    ),
    radial-gradient(circle at 88% 60%, rgba(10, 119, 0, 0.2), transparent 34%),
    linear-gradient(145deg, #101418, #22272d);
}

.cc-final-cta-content {
  max-width: 900px;

  text-align: center;
}

.cc-final-cta-content .section-eyebrow {
  color: var(--cc-blue-light);
}

.cc-final-cta-content h2 {
  margin-bottom: 1.8rem;

  color: #ffffff;

  font-size: clamp(3.4rem, 5vw, 5.3rem);
  font-weight: 900;
  line-height: 1.08;

  text-transform: none;
}

.cc-final-cta-content > p:not(.section-eyebrow) {
  max-width: 760px;

  margin: 0 auto 3rem;

  color: rgba(255, 255, 255, 0.75);

  font-size: 1.7rem;
  line-height: 1.72;
}

.cc-final-cta-actions {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;

  gap: 1.2rem;
}

/* =========================================================
   13 — TABLET
========================================================= */

@media only screen and (max-width: 1000px) {
  :root {
    --cc-section-padding: 7rem;
  }

  .cc-resident-layout,
  .cc-pressurepave-layout {
    grid-template-columns: 1fr;

    gap: 4rem;
  }

  .cc-resident-visual {
    order: 2;
  }

  .cc-resident-content {
    order: 1;
  }

  .cc-call-reduction {
    grid-template-columns: 260px minmax(0, 1fr);
  }

  .cc-benefit-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* =========================================================
   14 — SMALL TABLET
========================================================= */

@media only screen and (max-width: 760px) {
  :root {
    --cc-section-padding: 5.5rem;
  }

  .cc-hero {
    min-height: 650px;
  }

  .cc-hero-overlay {
    background: linear-gradient(
      90deg,
      rgba(4, 9, 15, 0.93),
      rgba(4, 9, 15, 0.62)
    );
  }

  .cc-hero-content {
    padding-top: 8rem;
    padding-right: 2rem;
    padding-bottom: 6rem;
    padding-left: 2rem;
  }

  .cc-hero-content > * {
    max-width: 100%;
  }

  .cc-hero-content h1 {
    font-size: clamp(3.6rem, 10vw, 4.8rem);
  }

  .cc-section-heading {
    margin-bottom: 4rem;

    text-align: left;
  }

  .cc-section-heading > p:not(.section-eyebrow) {
    margin-left: 0;
  }

  .cc-problem-grid,
  .cc-workflow-grid,
  .cc-human-digital-grid {
    grid-template-columns: 1fr;
  }

  .cc-workflow-card-featured {
    grid-column: auto;

    max-width: none;
  }

  .cc-call-reduction {
    grid-template-columns: 1fr;

    gap: 2.5rem;
  }

  .cc-call-stat {
    min-height: 210px;
  }

  .cc-partnership-content,
  .cc-final-cta-content {
    text-align: left;
  }

  .cc-partnership-content > p:not(.section-eyebrow),
  .cc-final-cta-content > p:not(.section-eyebrow) {
    margin-left: 0;
  }

  .cc-final-cta-actions {
    justify-content: flex-start;
  }

  .cc-video-wrapper {
    border-radius: var(--cc-radius-medium);
  }
}

/* =========================================================
   15 — MOBILE
========================================================= */

@media only screen and (max-width: 520px) {
  :root {
    --cc-section-padding: 4.5rem;
  }

  .cc-hero {
    min-height: 600px;
  }

  .cc-hero-background img {
    object-position: 62% center;
  }

  .cc-hero-content h1 {
    font-size: clamp(3.5rem, 12vw, 4.8rem);
  }

  .cc-hero-summary {
    font-size: 1.55rem;
  }

  .cc-hero-actions {
    flex-direction: column;
  }

  .cc-hero-actions .button {
    width: 100%;
  }

  .cc-section-heading h2,
  .cc-resident-content h2,
  .cc-pressurepave-content h2,
  .cc-partnership-content h2,
  .cc-final-cta-content h2 {
    font-size: 3rem;
  }

  .cc-section-heading > p:not(.section-eyebrow),
  .cc-resident-content > p:not(.section-eyebrow),
  .cc-pressurepave-content > p:not(.section-eyebrow),
  .cc-partnership-content > p:not(.section-eyebrow) {
    font-size: 1.5rem;
  }

  .cc-problem-card,
  .cc-benefit-card {
    padding: 2.3rem;
  }

  .cc-workflow-card {
    grid-template-columns: 52px minmax(0, 1fr);

    gap: 1.4rem;

    padding: 2rem;
  }

  .cc-workflow-number {
    width: 48px;
    height: 48px;

    font-size: 1.25rem;
  }

  .cc-workflow-card h3 {
    font-size: 2rem;
  }

  .cc-feature-item {
    grid-template-columns: 42px minmax(0, 1fr);

    padding: 1.4rem;
  }

  .cc-feature-item > span {
    width: 36px;
    height: 36px;
  }

  .cc-channel-card {
    padding: 2.4rem;
  }

  .cc-benefit-grid {
    grid-template-columns: 1fr;
  }

  .cc-call-reduction {
    padding: 2rem;
  }

  .cc-call-copy h3 {
    font-size: 2.3rem;
  }

  .cc-stack-item {
    grid-template-columns: 42px minmax(0, 1fr);

    padding: 1.5rem;
  }

  .cc-final-cta-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .cc-final-cta-actions .button {
    width: 100%;
  }

  .cc-video-wrapper {
    border-radius: 12px;
  }
}

/* =========================================================
   16 — REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {
  .cc-section *,
  .cc-hero * {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}