/* Cablecon colour refresh — layered industrial tones with restrained brand accents. */
:root {
  --navy: #082d3d;
  --navy-deep: #051f2b;
  --navy-soft: #123f51;
  --red: #d9271c;
  --red-deep: #b91f16;
  --sky: #d9edf5;
  --sky-soft: #edf7fa;
  --sand: #f3eee5;
  --mist: #e8f0f2;
  --ink-muted: #526a74;
}

body {
  background: var(--navy-deep);
}

.site-header {
  background: rgba(248, 252, 253, .96) !important;
  border-bottom: 1px solid rgba(8, 45, 61, .1);
  backdrop-filter: blur(14px);
}

.site-header .nav-link.active {
  color: var(--red);
}

.hero-slide,
.services-cta {
  background-color: var(--sky);
}

.hero .contact-strip {
  background: linear-gradient(120deg, var(--red), #b91f16);
  box-shadow: -20px 18px 44px rgba(8, 45, 61, .18);
}

/* Home page */
.page-home .about {
  background:
    radial-gradient(circle at 94% 12%, rgba(217, 39, 28, .08), transparent 27%),
    linear-gradient(135deg, var(--sky-soft), #f8fbfb 62%, var(--sand));
}

.page-home .about-photo {
  box-shadow: -18px 18px 0 var(--sky), 0 26px 55px rgba(8, 45, 61, .16);
}

.page-home .values {
  background: linear-gradient(125deg, var(--navy-deep), var(--navy) 58%, var(--navy-soft));
}

.page-home .services {
  background:
    linear-gradient(115deg, rgba(217, 39, 28, .045), transparent 32%),
    var(--sand);
}

.page-home .service-card:not(.featured) {
  background: rgba(255, 255, 255, .82);
  border: 1px solid rgba(8, 45, 61, .1);
  box-shadow: 0 14px 32px rgba(8, 45, 61, .07);
}

.page-home .service-card:not(.featured):nth-child(odd) {
  background: linear-gradient(145deg, #fff, var(--sky-soft));
}

.page-home .service-card.featured {
  background: linear-gradient(145deg, #e23125, var(--red-deep));
  box-shadow: 0 18px 38px rgba(185, 31, 22, .2);
}

.page-home .testimonial {
  background:
    radial-gradient(circle at 86% 42%, rgba(217, 39, 28, .09), transparent 25%),
    linear-gradient(120deg, #f8fbfc, var(--sky));
}

.page-home .faq {
  background: linear-gradient(125deg, var(--sand), #f9f7f2 48%, var(--mist));
}

.page-home .faq .accordion {
  padding: 12px 30px;
  border: 1px solid rgba(8, 45, 61, .1);
  border-radius: 4px;
  background: rgba(255, 255, 255, .66);
  box-shadow: 0 16px 40px rgba(8, 45, 61, .06);
}

.page-home .newsletter {
  background: linear-gradient(110deg, var(--navy-deep), var(--navy-soft));
  color: #fff;
}

.page-home .newsletter h2 { color: #fff; }
.page-home .newsletter p { color: #c8d8de; }
.page-home .newsletter .logos { color: #a9c1ca; }

/* Inner pages */
.about-page,
.services-page,
.projects-page,
.contact-page {
  background: var(--sky-soft);
}

.about-intro,
.projects-gallery,
.services-catalog,
.contact-form-section {
  background:
    radial-gradient(circle at 90% 8%, rgba(217, 39, 28, .065), transparent 24%),
    linear-gradient(135deg, var(--sky-soft), #f9fbfa 55%, var(--sand));
}

.about-intro-photo {
  box-shadow: -16px 16px 0 var(--sky), 0 24px 52px rgba(8, 45, 61, .15);
}

.about-team {
  background: linear-gradient(120deg, var(--sky), #f4f9fa 52%, var(--sand));
}

.about-awards,
.profile-pillars,
.contact-cards {
  background: linear-gradient(125deg, var(--mist), var(--sand));
}

.timeline,
.pillar-grid article,
.contact-card-grid article {
  border: 1px solid rgba(8, 45, 61, .09);
  box-shadow: 0 16px 36px rgba(8, 45, 61, .08);
}

.timeline {
  background: rgba(255, 255, 255, .84);
}

.pillar-grid article:not(.pillar-featured),
.contact-card-grid article:not(.featured) {
  background: linear-gradient(145deg, #fff, var(--sky-soft));
}

.about-story,
.profile-standards,
.contact-office,
.service-accordion {
  background: linear-gradient(130deg, var(--navy-deep), var(--navy) 55%, var(--navy-soft));
}

.services-catalog .catalog-card:not(.featured) {
  background: linear-gradient(145deg, rgba(255,255,255,.96), var(--sky-soft));
  border: 1px solid rgba(8, 45, 61, .09);
  box-shadow: 0 12px 28px rgba(8, 45, 61, .06);
}

.services-catalog .catalog-card:nth-child(3n + 1):not(.featured) {
  background: linear-gradient(145deg, #fff, #f5eee3);
}

.catalog-card.featured,
.contact-card-grid .featured,
.profile-commitment {
  background: linear-gradient(145deg, #e23125, var(--red-deep));
}

.services-faq {
  background: linear-gradient(120deg, var(--sand), var(--sky-soft));
}

.project-card {
  padding: 16px 16px 82px;
  background: rgba(255, 255, 255, .76);
  border: 1px solid rgba(8, 45, 61, .09);
  box-shadow: 0 16px 38px rgba(8, 45, 61, .08);
}

.project-meta {
  left: 16px;
}

.projects-newsletter {
  background: linear-gradient(115deg, var(--sky), var(--sand));
}

.contact-form,
.response-note {
  background: rgba(255, 255, 255, .78);
  border: 1px solid rgba(8, 45, 61, .09);
  box-shadow: 0 16px 38px rgba(8, 45, 61, .07);
}

.response-note {
  border-left: 4px solid var(--red);
}

.contact-form input,
.contact-form select,
.contact-form textarea {
  background: rgba(255, 255, 255, .9);
}

footer {
  background:
    radial-gradient(circle at 15% 20%, rgba(217, 39, 28, .13), transparent 24%),
    linear-gradient(120deg, #041b25, var(--navy) 62%, #103c4e);
}

@media (max-width: 767px) {
  .page-home .about-photo,
  .about-intro-photo { box-shadow: -8px 8px 0 var(--sky), 0 18px 38px rgba(8,45,61,.13); }
  .page-home .faq .accordion { padding: 8px 18px; }
  .project-card { padding: 10px 10px 76px; }
  .project-meta { left: 10px; }
}