/* =========================================
   CC Underground - About Us + Contact Us
   Loads after main.css and services.css (banner, "Trusted by" strip,
   buttons, CTA and FAQ come from there). Only the sections of these
   two pages live here. Desktop sizes match the Figma frames (1440).
   ========================================= */

/* ================= BANNER (About + Contact) ================= */
/* Figma "Blue shade": one even navy layer over the photo */
.pg-banner .banner-shade {
  background: rgba(0, 16, 32, 0.78);
}

.pg-banner .banner-content h1 {
  max-width: 530px;
  font-size: 42px;
  line-height: 54px;
  letter-spacing: -0.5px;
}

.pg-banner .banner-content p {
  max-width: 516px;
  font-size: 17px;
  font-weight: 500;
  line-height: 28px;
  color: rgba(255, 255, 255, 0.92);
}

/* desktop: buttons sit on the right, top in line with the paragraph,
   whatever the length of the title */
@media (min-width: 1101px) {
  .pg-banner {
    padding-top: 169px;
  }

  .pg-banner .sv-banner-row {
    display: grid;
    grid-template-columns: 530px 1fr auto;
    align-items: start;
    gap: 0;
  }

  .pg-banner .sv-banner-text {
    display: contents;
  }

  .pg-banner .breadcrumbs {
    grid-column: 1;
    grid-row: 1;
  }

  .pg-banner .banner-content h1 {
    grid-column: 1;
    grid-row: 2;
  }

  .pg-banner .banner-content p {
    grid-column: 1;
    grid-row: 3;
  }

  .pg-banner .sv-banner-btns {
    grid-column: 3;
    grid-row: 3;
    margin: 1px 0 0;
  }
}

/* stats strip: the About stats are longer, so the white strip is 1183px
   wide (Figma) with the slant on the right */
@media (min-width: 1181px) {
  .pg-banner .banner-stats {
    width: calc((100% - 1200px) / 2 + 1063px);
    clip-path: polygon(0 0, calc(100% - 103px) 0, 100% 100%, 0 100%);
  }

  .pg-banner .stat,
  .pg-banner .stat:first-child {
    padding: 0 16px 0 0;
    margin-right: 16px;
    border-left: 0;
    border-right: 1px solid #dddddd;
  }

  .pg-banner .stat:last-child {
    margin-right: 0;
    border-right: 0;
  }
}

@media (min-width: 1181px) and (max-width: 1240px) {
  .pg-banner .banner-stats {
    width: auto;
  }
}

@media (max-width: 767px) {
  .pg-banner .banner-content h1 {
    font-size: 32px;
    line-height: 40px;
  }

  .pg-banner .banner-content p {
    font-size: 16px;
    line-height: 26px;
  }
}


/* ================= CONTACT: FORM + MAP ================= */

.contact-form-sec {
  padding: 81px 0 72px;
  background: #fff;
}

.contact-form-grid {
  display: flex;
  gap: 48px;
}

.form-card {
  width: 704px;
  min-height: 580px;
  padding: 64px 59px 80px 48px;
  background: #fff;
  border-radius: 20px;
  box-shadow: 0 12px 40px rgba(15, 23, 42, 0.1);
}

.form-card h2 {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 600;
  font-size: 32px;
  line-height: 24px;
  letter-spacing: -0.4px;
  color: #104164;
  margin-bottom: 40px;
}

.map-card {
  width: 448px;
  flex-shrink: 0;
  padding: 16px;
  background: #fff;
  border-radius: 20px;
  box-shadow: 0 12px 40px rgba(15, 23, 42, 0.1);
}

.map-card iframe {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 548px;
  border: 0;
  border-radius: 8px;
}

/* ================= CONTACT: KEY TEAM CONTACTS (602px) ================= */

.team-contacts {
  padding: 64px 0 72px;
  background: #f0f9ff;
  border-top: 8px solid #00afe7;
}

.team-contacts .sec-header {
  margin-bottom: 48px;
}

.team-contacts .sec-header h2 {
  line-height: 64px;
  margin-bottom: 6px;
}

.team-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 29.67px;
}

.team-card {
  min-height: 310px;
  padding: 20px;
  background: #fff;
  border: 1px solid #e3effd;
  border-radius: 16px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  transition: box-shadow 0.3s, transform 0.3s;
}

.team-card:hover {
  box-shadow: 0 12px 28px rgba(16, 65, 100, 0.1);
  transform: translateY(-4px);
}

.team-group {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.team-row {
  display: flex;
  align-items: flex-start;
  gap: 16px;
}

.team-group .team-row > div {
  padding-top: 7px;
}

.team-icon {
  width: 56px;
  height: 56px;
  border-radius: 12px;
  background: #e6f0f6;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.team-icon svg {
  width: 24px;
  height: 24px;
  fill: none;
  stroke: #104164;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.team-row small {
  display: block;
  margin-bottom: 2px;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  color: #5b6f80;
}

.team-row strong,
.team-row a {
  display: block;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 15px;
  font-weight: 700;
  line-height: 20px;
  color: #104164;
}

.team-row a {
  transition: color 0.2s;
}

.team-row a:hover {
  color: #3c84c8;
}

.team-row ul {
  margin-top: 12px;
  padding-left: 16px;
  list-style: disc;
}

.team-row li {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  color: #5b6f80;
}

.team-row li + li {
  margin-top: 4px;
}

/* ================= ABOUT: GREY INTRO (trust strip + what we do), 1143px ================= */

.about-intro {
  position: relative;
  height: 1143px;
  padding-top: 71px;
  background: #f4f5f7;
}

/* trust strip: same component as the home page, no overlap here */

.about-intro .trust-wrap {
  padding: 0;
  margin: 0;
  background: none;
}

.about-clip {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

/* 1181px blue circle behind the plough (Figma: x 375, y 816 in this block) */

.does-circle {
  position: absolute;
  top: 816px;
  left: calc(50% - 345px);
  width: 1181px;
  height: 1181px;
  border-radius: 50%;
  /* Figma gradient: light blue at the bottom left, deeper blue at the top right */
  background: linear-gradient(45deg, #9cc0d9 45%, #75a6c8 57.4%, #6099c1 64.3%, #4f8ebb 74.1%, #3880b3 79.6%, #317bb0 84.4%, #2c77ae 100%);
}

.about-intro .container {
  position: relative;
  z-index: 1;
}

.about-does-head {
  margin: 72px auto 86px;
}

.about-does-head h2 {
  margin-bottom: 20px;
}

.does-cols {
  display: flex;
  align-items: flex-start;
}

.does-left {
  width: 539px;
  margin-left: 42px;
}

.does-left h3 {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 32px;
  font-weight: 500;
  line-height: 42px;
  letter-spacing: -0.3px;
  color: #104164;
  margin-bottom: 24px;
}

.does-left p {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 15.5px;
  font-weight: 400;
  line-height: 32px;
  color: #6b7a87;
}

.blue-lead {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 24px;
  font-weight: 500;
  line-height: 1;
  color: #3a86d0;
}

.does-right {
  width: 464px;
  margin-left: 131px;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 19.5px;
  font-weight: 400;
  line-height: 37.5px;
  color: #6b7a87;
}

.does-right .blue-lead {
  font-size: 34px;
}

/* plough sits across the grey / navy edge (Figma: x 158, y 1277, 1039 x 709) */

.does-plough {
  position: absolute;
  z-index: 5;
  top: 721px;
  left: calc(50% - 562px);
  width: 1039px;
  max-width: none;
  height: auto;
  pointer-events: none;
}

/* ================= ABOUT: TIMELINE (1083px) ================= */

.timeline-sec {
  position: relative;
  overflow: hidden;
  padding: 287px 0 184px;
  background: #0a2238;
}

.tl-glow {
  position: absolute;
  top: 216px;
  left: calc(50% - 470px);
  width: 834px;
  height: 834px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(31, 104, 170, 0.6) 0%, rgba(31, 104, 170, 0.25) 45%, rgba(10, 34, 56, 0) 70%);
  pointer-events: none;
}

.timeline-sec .container {
  position: relative;
  z-index: 1;
}

.timeline-sec .sec-header {
  margin-bottom: 38px;
}

.timeline-sec .sec-header h2 {
  line-height: 64px;
  margin-bottom: 6px;
  color: #fff;
}

.timeline-sec .sec-header p {
  color: rgba(255, 255, 255, 0.92);
}

/* column lines = Figma card edges inside the 1200px container:
   top cards 53.33 / 405.33 / 757.33, bottom cards 176 / 528 / 880, all 320 wide */

.timeline {
  position: relative;
  display: grid;
  grid-template-columns: 53.33fr 122.67fr 197.33fr 32fr 90.67fr 32fr 197.33fr 32fr 90.67fr 32fr 197.33fr 122.67fr;
  grid-template-rows: 190px 77px 207px;
}

.tl-line {
  grid-column: 1 / -1;
  grid-row: 2;
  align-self: start;
  height: 1.5px;
  margin-top: 36.5px;
  margin-right: 43px;
  background: #78afe4;
}

.tl-card {
  position: relative;
  padding: 15.67px 18.67px;
  border-radius: 10px;
  background: rgba(40, 80, 115, 0.55);
  border: 1px solid rgba(140, 180, 215, 0.22);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.3);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  transition: background 0.3s, border-color 0.3s;
}

.tl-card:hover {
  background: rgba(29, 95, 146, 0.75);
  border-color: rgba(140, 180, 215, 0.45);
}

.tl-card:nth-child(1) {
  grid-column: 2 / 4;   grid-row: 1; --dot: 33.33px;
}

.tl-card:nth-child(2) {
  grid-column: 3 / 6;   grid-row: 3; --dot: 90.67px;
}

.tl-card:nth-child(3) {
  grid-column: 5 / 8;   grid-row: 1; --dot: 33.33px;
}

.tl-card:nth-child(4) {
  grid-column: 7 / 10;  grid-row: 3; --dot: 113.33px;
}

.tl-card:nth-child(5) {
  grid-column: 9 / 12;  grid-row: 1; --dot: 33.33px;
}

.tl-card:nth-child(6) {
  grid-column: 11 / 13; grid-row: 3; --dot: 166.67px;
}

/* connector line + dot (22.67px ring, 12px centre) */

.tl-card::before,
.tl-card::after {
  content: "";
  position: absolute;
  left: var(--dot);
}

.tl-card::before {
  width: 1.5px;
  margin-left: -0.75px;
  background: #78afe4;
}

.tl-card::after {
  width: 22.67px;
  height: 22.67px;
  margin-left: -11.33px;
  border-radius: 50%;
  background: radial-gradient(circle, #087bff 0, #087bff 6px, #fff 6.6px);
  box-shadow: 0 0 6px rgba(120, 175, 228, 0.55);
  transition: transform 0.3s;
}

.tl-card:hover::after {
  transform: scale(1.15);
}

.tl-top::before {
  top: 100%; height: 37px;
}

.tl-top::after {
  top: calc(100% + 26px);
}

.tl-bottom::before {
  bottom: 100%; height: 40px;
}

.tl-bottom::after {
  bottom: calc(100% + 29px);
}

.tl-icon {
  position: absolute;
  top: 16.67px;
  right: 18px;
  width: 57.33px;
  height: 57.33px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.3s;
}

.tl-card:hover .tl-icon {
  background: rgba(255, 255, 255, 0.16);
}

.tl-icon img {
  display: block;
  width: 32px;
  height: 32px;
}

.tl-card h3 {
  width: 241px;
  margin-bottom: 10px;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 32px;
  font-weight: 600;
  line-height: 39px;
  letter-spacing: -0.4px;
  color: #fff;
}

.tl-card h4 {
  width: 266px;
  margin-bottom: 4px;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  color: #6fb0e8;
}

.tl-card p {
  width: 276px;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 12.5px;
  font-weight: 500;
  line-height: 18px;
  color: rgba(255, 255, 255, 0.92);
}

/* ================= ABOUT: PART OF NEU (card 1200 x 1081) ================= */

.neu-sec {
  padding: 72px 0 82px;
  background: #fff;
}

.neu-card {
  position: relative;
  height: 1081px;
  padding: 48px;
  background: #fff;
  border-radius: 20px;
  box-shadow: 0 14px 44px rgba(15, 23, 42, 0.1);
  overflow: hidden;
}

.neu-card h2 {
  width: 496px;
  margin-bottom: 20px;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 500;
  font-size: 48px;
  line-height: 64px;
  letter-spacing: -0.8px;
  color: #104164;
}

.neu-card h2,
.neu-cols {
  position: relative;
  z-index: 1;
}

.neu-cols {
  display: flex;
  align-items: flex-start;
}

.neu-left {
  width: 499px;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 33px;
  color: #5b798e;
}

.neu-left strong {
  font-weight: 700;
  color: #104164;
}

.neu-right {
  width: 450px;
  margin-left: 132px;
}

.neu-quote {
  width: 439px;
  padding-left: 18px;
  border-left: 8px solid #4285f4;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 18px;
  line-height: 28px;
  color: #5b798e;
  margin-bottom: 64px;
}

.neu-right em {
  display: block;
  max-width: 436px;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 19.5px;
  font-style: italic;
  line-height: 32px;
  color: #5b6f80;
}

/* drill photo: full card width, starts 464px down, cut by the card bottom */

.neu-img {
  position: absolute;
  left: 0;
  right: 0;
  top: 464px;
}

.neu-img img {
  display: block;
  width: 100%;
  height: auto;
}

/* ================= ABOUT: CLEARED BEFORE WE ARRIVE ================= */

.cleared {
  padding: 64px 0 72.5px;
  border-top: 8px solid #00afe7;
  background: linear-gradient(180deg, #104164 0, #104164 470px, #fff 470px);
}

.cleared-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: 48px;
}

.cleared-head h2 {
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  font-size: 48px;
  line-height: 56px;
  letter-spacing: -0.96px;
  color: #fff;
  margin-bottom: 12px;
}

.cleared-head p {
  width: 467px;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 18px;
  line-height: 30px;
  color: rgba(255, 255, 255, 0.9);
}

.cleared-head .btn-outline {
  width: 489px;
  height: 64px;
  font-size: 17px;
}

.cleared-card {
  padding: 39px;
  background: #fff;
  border: 1px solid #e3ebf2;
  border-radius: 20px;
  box-shadow: 0 -2px 10px rgba(0, 12, 24, 0.35), 0 12px 40px rgba(15, 23, 42, 0.08);
  display: grid;
  grid-template-columns: 536px 536px;
  grid-auto-rows: 101.5px;
  column-gap: 48px;
  row-gap: 32px;
}

.check-item {
  display: flex;
  gap: 12px;
  padding: 21px 21px 0;
  border: 1px solid #aed1e8;
  border-radius: 16px;
  background: #f0f9ff;
  transition: background 0.25s, border-color 0.25s;
}

.check-item:hover {
  background: #e4f3fe;
  border-color: #65b7f2;
}

.check-ic {
  width: 30px;
  height: 30px;
  flex-shrink: 0;
  border-radius: 50%;
  background: #fff;
  border: 1px solid #d6e9f6;
  display: flex;
  align-items: center;
  justify-content: center;
}

.check-ic svg {
  width: 17.44px;
  height: 17.44px;
  fill: none;
  stroke: #65b7f2;
  stroke-width: 2.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.check-item h3 {
  margin-bottom: 12px;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 20px;
  font-weight: 600;
  line-height: 19.5px;
  color: #104164;
}

.check-item p {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 18px;
  line-height: 28px;
  color: #5b798e;
}

.cleared-note {
  align-self: start;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 16px;
  line-height: 26px;
  color: #6b7a87;
}

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

@media (max-width: 1240px) {
  .form-card {
    flex: 1;
    width: auto;
    padding-right: 48px;
  }

  .map-card {
    width: 38%;
  }

  .does-left {
    width: 48%;
    margin-left: 0;
  }

  .does-right {
    width: 42%;
    margin-left: auto;
  }

  .neu-left {
    width: 48%;
  }

  .neu-right {
    width: 44%;
    margin-left: auto;
  }

  .neu-quote {
    width: auto;
  }

  .cleared-card {
    grid-template-columns: 1fr 1fr;
  }

  .cleared-head .btn-outline {
    width: auto;
  }
}

@media (max-width: 1100px) {
  .contact-form-grid {
    flex-direction: column;
  }

  .map-card {
    width: 100%;
  }

  .map-card iframe {
    height: 348px;
    min-height: 0;
  }

  .team-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /* intro: let the height follow the content */

  .about-intro {
    height: auto;
    padding-bottom: 300px;
  }

  .does-circle {
    top: auto;
    bottom: -900px;
    left: 35%;
  }

  .does-plough {
    top: auto;
    bottom: -150px;
    left: 20px;
    width: calc(100% - 40px);
    max-width: 760px;
  }

  .timeline-sec {
    padding-top: 220px;
  }

  /* timeline: one column with the line on the left */

  .timeline {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding-left: 34px;
  }

  .tl-line {
    position: absolute;
    left: 6px;
    top: 0;
    bottom: 0;
    width: 1.5px;
    height: auto;
    margin: 0;
  }

  .tl-card::before {
    display: none;
  }

  .tl-top::after,
  .tl-bottom::after {
    top: 30px;
    bottom: auto;
    left: -28px;
    margin-left: -11.33px;
  }

  .tl-card h3,
  .tl-card h4 {
    width: auto;
    padding-right: 70px;
  }

  .tl-card p {
    width: auto;
  }

  .neu-card {
    height: auto;
    padding-bottom: 0;
  }

  .neu-img {
    position: static;
    margin: 32px -48px 0;
  }
}

@media (max-width: 991px) {
  .neu-card h2,
  .cleared-head h2 {
    font-size: 38px;
    line-height: 46px;
  }

  .neu-card h2 {
    width: auto;
  }

  .does-cols,
  .neu-cols {
    flex-direction: column;
    gap: 32px;
  }

  .does-left,
  .does-right,
  .neu-left,
  .neu-right {
    width: auto;
    margin: 0;
  }

  .cleared-head {
    flex-direction: column;
    align-items: flex-start;
    gap: 28px;
  }

  .cleared-head p {
    width: auto;
  }

  .cleared {
    background: linear-gradient(180deg, #104164 0, #104164 520px, #fff 520px);
  }
}

@media (max-width: 767px) {
  .contact-form-sec {
    padding: 56px 0;
  }

  .form-card {
    min-height: 0;
    padding: 32px 20px;
  }

  .form-card h2 {
    font-size: 28px;
    line-height: 36px;
    margin-bottom: 28px;
  }

  .team-contacts {
    padding: 56px 0;
  }

  .team-contacts .sec-header h2,
  .timeline-sec .sec-header h2 {
    line-height: 38px;
  }

  .team-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .team-card {
    min-height: 0;
  }

  .about-intro {
    padding: 30px 0 220px;
  }

  .about-does-head {
    margin: 48px auto 40px;
  }

  .does-left h3 {
    font-size: 24px;
    line-height: 32px;
  }

  .does-right {
    font-size: 17px;
    line-height: 30px;
  }

  .does-right .blue-lead {
    font-size: 28px;
  }

  .does-circle {
    left: 25%;
    bottom: -1000px;
  }

  .does-plough {
    bottom: -90px;
  }

  .timeline-sec {
    padding: 140px 0 56px;
  }

  .tl-card h3 {
    font-size: 26px;
  }

  .neu-sec {
    padding: 56px 0;
  }

  .neu-card {
    padding: 32px 20px 0;
  }

  .neu-card h2,
  .cleared-head h2 {
    font-size: 30px;
    line-height: 38px;
    letter-spacing: -0.6px;
  }

  .neu-quote {
    margin-bottom: 28px;
  }

  .neu-right em {
    font-size: 17px;
    line-height: 29px;
  }

  .neu-img {
    margin: 24px -20px 0;
  }

  .cleared {
    padding: 56px 0;
    background: linear-gradient(180deg, #104164 0, #104164 480px, #fff 480px);
  }

  .cleared-head .btn-outline {
    width: 100%;
    height: auto;
    min-height: 56px;
    padding: 12px 20px;
    font-size: 14px;
    white-space: normal;
    text-align: center;
  }

  .cleared-card {
    grid-template-columns: 1fr;
    grid-auto-rows: auto;
    padding: 20px;
    gap: 16px;
  }

  .cleared-note {
    grid-column: 1;
    grid-row: auto;
  }

  .check-item {
    padding: 18px 18px 20px;
  }

  .check-item h3 {
    font-size: 17px;
    margin-bottom: 6px;
  }

  .check-item p {
    font-size: 14.5px;
    line-height: 22px;
  }
}

/* ================= QUOTE FORM ON SERVICE PAGES ================= */
/* Same card as the Contact page form. Optional image on the right. */
.sv-form-sec {
  padding: 72px 0;
  background: #fff;
}

/* no image: the form card sits in the middle */
.contact-form-grid.is-single {
  justify-content: center;
}

.form-image-card {
  padding: 16px;
  background: #fff;
}

.form-image-card img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 548px;
  border-radius: 8px;
  object-fit: cover;
}

@media (max-width: 1100px) {
  .form-image-card img {
    height: 348px;
    min-height: 0;
  }

  .contact-form-grid.is-single .form-card {
    width: 100%;
  }
}

@media (max-width: 767px) {
  .sv-form-sec {
    padding: 56px 0;
  }
}

/* =====================================================================
   ABOUT US + CONTACT US - MOBILE (767px and below)
   Matched to the 360px Figma mobile frames. Sizes scale a little with
   the screen (clamp) so a 360px phone gets the exact Figma size and
   wider phones stay in proportion. Scoped to these two pages only, so
   the service pages are not touched. Kept last so it wins.
   ===================================================================== */
@media (max-width: 767px) {

  /* ---------- banner ---------- */
  body.pg-about .sv-banner .banner-content,
  body.pg-contact .sv-banner .banner-content {
    padding: 150px clamp(24px, 9vw, 40px) 130px;
  }

  body.pg-about .sv-banner-row,
  body.pg-contact .sv-banner-row {
    gap: 32px;
  }

  body.pg-about .sv-banner .breadcrumbs,
  body.pg-contact .sv-banner .breadcrumbs {
    margin-bottom: 12px;
    font-size: 11px;
    line-height: 16px;
  }

  body.pg-about .sv-banner .banner-content h1,
  body.pg-contact .sv-banner .banner-content h1 {
    max-width: 300px;
    margin-bottom: 14px;
    font-size: clamp(24px, 6.67vw, 28px) !important;
    line-height: 1.34 !important;
    font-weight: 700;
  }

  body.pg-about .sv-banner .sv-banner-text p,
  body.pg-contact .sv-banner .sv-banner-text p {
    max-width: 320px;
    font-size: clamp(14px, 3.9vw, 16px) !important;
    line-height: 1.6 !important;
    font-weight: 400;
  }

  body.pg-about .sv-banner-btns,
  body.pg-contact .sv-banner-btns {
    gap: 22px;
  }

  body.pg-about .sv-banner .sv-banner-btns .btn-primary.is-white,
  body.pg-about .sv-banner .sv-banner-btns .btn-outline.is-light,
  body.pg-contact .sv-banner .sv-banner-btns .btn-primary.is-white,
  body.pg-contact .sv-banner .sv-banner-btns .btn-outline.is-light {
    height: 48px;
    gap: 10px;
    font-size: 14px;
    letter-spacing: 1.4px;
  }

  body.pg-about .sv-banner .sv-banner-btns .btn-primary.is-white .btn-arrow,
  body.pg-about .sv-banner .sv-banner-btns .btn-primary.is-white .btn-arrow svg,
  body.pg-contact .sv-banner .sv-banner-btns .btn-primary.is-white .btn-arrow,
  body.pg-contact .sv-banner .sv-banner-btns .btn-primary.is-white .btn-arrow svg {
    width: 16px;
    height: 16px;
  }

  body.pg-about .sv-banner .btn-phone-icon,
  body.pg-contact .sv-banner .btn-phone-icon {
    width: 24px;
    height: 24px;
  }

  body.pg-about .sv-banner .btn-phone-icon svg,
  body.pg-contact .sv-banner .btn-phone-icon svg {
    width: 12px;
    height: 12px;
  }

  /* stats card */
  body.pg-about .sv-banner .banner-stats,
  body.pg-contact .sv-banner .banner-stats {
    left: 16px;
    right: 16px;
    bottom: -62px;
    grid-auto-rows: minmax(60px, auto);
  }

  body.pg-about .sv-banner .banner-stats .stat,
  body.pg-contact .sv-banner .banner-stats .stat {
    padding: 8px 8px 8px 14px;
    gap: 8px;
    font-size: 13px;
    line-height: 18px;
  }

  body.pg-about .sv-banner .banner-stats .stat svg,
  body.pg-contact .sv-banner .banner-stats .stat svg {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
  }

  body.pg-about .banner.sv-banner,
  body.pg-contact .banner.sv-banner {
    margin-bottom: 84px;
  }

  /* ---------- shared section titles ---------- */
  body.pg-about .sec-header h2,
  body.pg-contact .sec-header h2 {
    font-size: clamp(22px, 6.2vw, 26px) !important;
    line-height: 1.3 !important;
    letter-spacing: -0.2px;
  }

  body.pg-about .sec-header p,
  body.pg-contact .sec-header p {
    font-size: clamp(13px, 3.75vw, 15px) !important;
    line-height: 1.6 !important;
  }

  /* ---------- CTA band ---------- */
  body.pg-about .sv-cta .cta-content h2,
  body.pg-contact .sv-cta .cta-content h2 {
    max-width: 250px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    font-size: clamp(28px, 7.8vw, 32px) !important;
    line-height: 1.3 !important;
  }

  body.pg-about .sv-cta .cta-content p,
  body.pg-contact .sv-cta .cta-content p {
    font-size: clamp(13px, 3.75vw, 15px) !important;
    line-height: 1.65 !important;
  }

  body.pg-about .sv-cta .btn-primary,
  body.pg-contact .sv-cta .btn-primary {
    height: 56px;
    padding: 0 26px;
    font-size: 15px;
    letter-spacing: 1.5px;
  }

  /* ---------- FAQ ---------- */
  body.pg-about .faq .faq-header h2,
  body.pg-contact .faq .faq-header h2 {
    max-width: 280px !important;
    font-size: clamp(23px, 6.4vw, 27px) !important;
    line-height: 1.3 !important;
  }

  body.pg-about .faq .faq-header p,
  body.pg-contact .faq .faq-header p {
    font-size: clamp(13.5px, 3.9vw, 15.5px) !important;
    line-height: 1.6 !important;
  }

  body.pg-about .faq-q,
  body.pg-contact .faq-q {
    padding: 16px 18px !important;
    gap: 12px;
    font-size: 15px !important;
    line-height: 22px !important;
  }

  body.pg-about .faq-a,
  body.pg-contact .faq-a {
    font-size: 14px !important;
    line-height: 22px !important;
  }

  body.pg-about .faq-chev,
  body.pg-contact .faq-chev {
    width: 22px !important;
    height: 22px !important;
    flex-shrink: 0;
  }


  /* =================== CONTACT US =================== */

  /* form card */
  body.pg-contact .contact-form-sec {
    padding: 40px 0 48px;
  }

  body.pg-contact .contact-form-grid {
    gap: 24px;
  }

  body.pg-contact .form-card {
    padding: 32px 26px 36px;
    border-radius: 14px;
  }

  body.pg-contact .form-card h2 {
    margin-bottom: 22px;
    font-size: clamp(22px, 6.2vw, 26px);
    line-height: 1.3;
  }

  body.pg-contact .form-card .field label {
    font-size: 11.5px;
  }

  body.pg-contact .form-card .wpcf7-form-control:not(.wpcf7-submit):not(.wpcf7-acceptance) {
    font-size: 14.5px;
  }

  body.pg-contact .form-card .wpcf7-list-item-label {
    font-size: 12px;
  }

  body.pg-contact .form-card .btn-submit {
    height: 46px;
    font-size: 14px;
  }

  /* map: its own rounded card */
  body.pg-contact .map-card {
    min-height: 330px;
    overflow: hidden;
    border-radius: 14px;
  }

  body.pg-contact .map-card iframe {
    min-height: 330px;
  }

  /* key team contacts */
  body.pg-contact .team-contacts {
    padding: 48px 0;
    background: #fff;
  }

  body.pg-contact .team-contacts .sec-header {
    max-width: 290px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 28px;
  }

  body.pg-contact .team-contacts .sec-header h2 {
    max-width: 240px;
    margin-left: auto;
    margin-right: auto;
  }

  body.pg-contact .team-grid {
    gap: 14px;
  }

  body.pg-contact .team-card {
    gap: 0;
    padding: 6px 18px;
    border: 1px solid #e3ebf2;
    border-radius: 12px;
    box-shadow: none;
  }

  body.pg-contact .team-row {
    gap: 14px;
    padding: 14px 0;
    border-bottom: 1px solid #edf1f5;
  }

  body.pg-contact .team-card > .team-row:last-child,
  body.pg-contact .team-group .team-row:last-child {
    border-bottom: 0;
  }

  body.pg-contact .team-group {
    gap: 0;
  }

  body.pg-contact .team-group .team-row > div {
    padding-top: 0;
  }

  body.pg-contact .team-card > .team-row:first-child {
    border-bottom: 1px solid #edf1f5;
  }

  body.pg-contact .team-icon {
    width: 36px;
    height: 36px;
    flex-shrink: 0;
    border-radius: 8px;
  }

  body.pg-contact .team-icon svg {
    width: 16px;
    height: 16px;
  }

  body.pg-contact .team-row small {
    font-size: 12px;
    line-height: 17px;
  }

  body.pg-contact .team-row strong,
  body.pg-contact .team-row a,
  body.pg-contact .team-row b {
    font-size: 14px;
    line-height: 20px;
    word-break: break-word;
  }

  body.pg-contact .team-row ul {
    margin-top: 6px;
  }

  body.pg-contact .team-row li {
    font-size: 12.5px;
    line-height: 19px;
  }


  /* =================== ABOUT US =================== */

  /* intro: "What CC Underground Does" sits left, Figma light panel */
  body.pg-about .about-does-head {
    margin: 40px 0 28px;
    text-align: left;
  }

  body.pg-about .about-does-head h2 {
    max-width: 220px;
    margin-left: 0 !important;
    margin-right: 0 !important;
    text-align: left !important;
  }

  body.pg-about .about-does-head p {
    max-width: 260px;
    margin-left: 0 !important;
    margin-right: 0 !important;
    text-align: left !important;
  }

  body.pg-about .does-cols {
    gap: 28px;
  }

  body.pg-about .does-left h3 {
    margin-bottom: 16px;
    font-size: clamp(18px, 5vw, 21px);
    line-height: 1.45;
    font-weight: 500;
  }

  body.pg-about .does-left p,
  body.pg-about .does-right {
    font-size: clamp(14px, 3.9vw, 16px);
    line-height: 1.75;
  }

  body.pg-about .does-left .blue-lead {
    font-size: clamp(18px, 5vw, 21px);
  }

  body.pg-about .does-right .blue-lead {
    font-size: clamp(23px, 6.4vw, 27px);
  }

  /* timeline */
  body.pg-about .timeline-sec .sec-header {
    max-width: 300px;
    margin-left: auto;
    margin-right: auto;
  }

  body.pg-about .timeline-sec .sec-header h2 {
    font-size: clamp(20px, 5.6vw, 24px) !important;
  }

  body.pg-about .tl-card {
    padding: 18px 16px 20px;
  }

  body.pg-about .tl-card h3 {
    font-size: clamp(20px, 5.6vw, 23px);
    line-height: 1.3;
  }

  body.pg-about .tl-card h4 {
    font-size: 13px;
    line-height: 19px;
  }

  body.pg-about .tl-card p {
    font-size: 12.5px;
    line-height: 19px;
  }

  body.pg-about .tl-icon {
    width: 40px;
    height: 40px;
  }

  body.pg-about .tl-icon img {
    width: 18px;
    height: 18px;
  }

  /* Part of National Energies & Utilities */
  body.pg-about .neu-sec {
    padding: 48px 0;
  }

  body.pg-about .neu-card {
    padding: 28px 20px 0;
  }

  body.pg-about .neu-card h2 {
    font-size: clamp(21px, 5.8vw, 25px);
    line-height: 1.3;
    letter-spacing: -0.2px;
  }

  body.pg-about .neu-card .sec-header p,
  body.pg-about .neu-card h2 + p {
    font-size: 13.5px;
    line-height: 21px;
  }

  body.pg-about .neu-left {
    font-size: clamp(14px, 3.9vw, 16px);
    line-height: 1.75;
  }

  body.pg-about .neu-left .blue-lead {
    font-size: clamp(20px, 5.6vw, 24px);
  }

  body.pg-about .neu-quote {
    padding-left: 18px;
    font-size: clamp(15px, 4.2vw, 17px);
    line-height: 1.6;
  }

  body.pg-about .neu-right em {
    font-size: 14.5px;
    line-height: 24px;
  }

  /* Cleared Before We Arrive: centred head, solid white button */
  body.pg-about .cleared-head {
    text-align: center;
  }

  body.pg-about .cleared-head h2 {
    font-size: clamp(21px, 5.8vw, 25px);
    line-height: 1.3;
    letter-spacing: -0.2px;
  }

  body.pg-about .cleared-head p {
    max-width: 320px;
    margin-left: auto;
    margin-right: auto;
    font-size: clamp(14px, 3.9vw, 16px);
    line-height: 1.6;
  }

  body.pg-about .cleared-head .btn-outline {
    justify-content: space-between;
    min-height: 54px;
    padding: 12px 18px;
    border-color: #fff;
    background: #fff;
    color: #104164;
    font-size: 13px;
    letter-spacing: 1.2px;
    text-align: left;
  }

  body.pg-about .cleared-head .btn-outline svg {
    flex-shrink: 0;
  }

  body.pg-about .cleared-card {
    padding: 16px;
    gap: 12px;
  }

  body.pg-about .check-item {
    padding: 16px 16px 18px;
  }

  body.pg-about .check-item h3 {
    font-size: 15px;
    line-height: 21px;
  }

  body.pg-about .check-item p {
    font-size: 13px;
    line-height: 20px;
  }

  body.pg-about .cleared-note {
    font-size: 13px;
    line-height: 21px;
    text-align: center;
  }
}


/* =====================================================================
   ABOUT US - MACHINE ON THE BLUE CIRCLE (all screens)
   The machine now sits in the normal page flow under the text, so it
   can never run over the paragraphs again. Everything is sized from
   one width (--plough-w), so desktop and mobile keep the Figma look:
   machine centred, the blue half circle behind its right side, the
   grey / navy edge crossing the machine a little below its middle.
   ===================================================================== */
body.pg-about {
  --plough-w: min(960px, calc(100vw - 40px));
}

body.pg-about .about-intro {
  display: flow-root;
  height: auto;
  padding-bottom: 0;
}

body.pg-about .does-plough {
  position: relative;
  z-index: 5;
  top: auto;
  right: auto;
  bottom: auto;
  left: auto;
  display: block;
  width: var(--plough-w);
  max-width: none;
  height: auto;
  margin: 64px auto calc(var(--plough-w) * -0.2285);
}

/* blue circle: its top shows above the navy edge, behind the machine */
body.pg-about .does-circle {
  top: auto;
  right: auto;
  bottom: calc(var(--plough-w) * -0.4);
  left: calc(50% - var(--plough-w) * 0.041);
  width: calc(var(--plough-w) * 0.706);
  height: calc(var(--plough-w) * 0.706);
}

/* navy section starts with room for the part of the machine over it */
body.pg-about .timeline-sec {
  padding-top: calc(var(--plough-w) * 0.2285 + 80px);
}

@media (max-width: 767px) {
  body.pg-about {
    --plough-w: calc(100vw - 24px);
  }

  body.pg-about .does-plough {
    margin-top: 36px;
  }

  /* smaller circle so its right side stays on screen (Figma mobile) */
  body.pg-about .does-circle {
    bottom: calc(var(--plough-w) * -0.28);
    left: calc(50% - var(--plough-w) * 0.135);
    width: calc(var(--plough-w) * 0.59);
    height: calc(var(--plough-w) * 0.59);
  }

  body.pg-about .timeline-sec {
    padding-top: calc(var(--plough-w) * 0.2285 + 48px);
  }
}


/* =====================================================================
   ABOUT US - TIMELINE LINE ON TABLET + MOBILE (1100px and below)
   The single absolute line had no height in the one-column layout, so
   it never showed. Each card now draws its own piece of the line, from
   its dot down to the next card's dot, so the line always joins every
   dot whatever the card heights.
   ===================================================================== */
@media (max-width: 1100px) {
  body.pg-about .timeline {
    gap: 20px;
  }

  body.pg-about .tl-line {
    display: none;
  }

  /* one piece per card: the vertical line down to the next dot, plus a
     short line across from the dot to the card's left edge */
  body.pg-about .tl-card::before {
    display: block;
    top: 40.5px;
    bottom: auto;
    left: -28px;
    width: 28.75px;
    height: calc(100% + 20px);
    margin-left: -0.75px;
    background:
      linear-gradient(#78afe4, #78afe4) left top / 1.5px 100% no-repeat,
      linear-gradient(#78afe4, #78afe4) left top / 100% 1.5px no-repeat;
  }

  /* last card: only the short line across, no line going down */
  body.pg-about .tl-card:last-of-type::before {
    height: 1.5px;
  }

  /* dot sits on top of the line */
  body.pg-about .tl-card::after {
    z-index: 1;
  }
}


/* FAQ arrow icon (mobile): the arrow is centred in the smaller circle */
@media (max-width: 767px) {
  body.pg-about .faq-chev,
  body.pg-contact .faq-chev {
    width: 22px !important;
    height: 22px !important;
    margin-left: 0;
    background: #c3d0da;
  }

  body.pg-about .faq-chev::after,
  body.pg-contact .faq-chev::after {
    top: 50%;
    left: 50%;
    width: 6px;
    height: 6px;
    border-right: 2px solid #fff;
    border-bottom: 2px solid #fff;
    transform: translate(-50%, -70%) rotate(45deg);
  }
}


/* =====================================================================
   ABOUT US - "WHAT CC UNDERGROUND DOES" + "PART OF NEU" (mobile)
   Figma mobile: text straight on the light background, thin lines
   between the blocks, no white card around the NEU text, drill photo
   running edge to edge at the bottom.
   ===================================================================== */
@media (max-width: 767px) {

  /* ---------- What CC Underground Does ---------- */
  body.pg-about .does-cols {
    gap: 0;
  }

  body.pg-about .does-left {
    padding-top: 26px;
    border-top: 1px solid #dde5ed;
  }

  body.pg-about .does-left h3 {
    margin-bottom: 18px;
    color: #104164;
  }

  body.pg-about .does-left p {
    font-size: clamp(14px, 3.9vw, 15.5px);
    line-height: 1.7;
    color: #6b7a87;
  }

  body.pg-about .does-right {
    margin-top: 26px;
    padding-top: 26px;
    border-top: 1px solid #dde5ed;
    font-size: clamp(16px, 4.45vw, 18px);
    line-height: 1.7;
    color: #6b7a87;
  }

  /* ---------- Part of National Energies & Utilities ---------- */
  body.pg-about .neu-sec {
    padding: 48px 0 0;
    background: #eef3f8;
  }

  body.pg-about .neu-card {
    height: auto;
    padding: 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
    overflow: visible;
  }

  body.pg-about .neu-card h2 {
    width: auto;
    max-width: 230px;
    margin-bottom: 24px;
  }

  body.pg-about .neu-cols {
    gap: 0;
  }

  body.pg-about .neu-left {
    padding-bottom: 26px;
    border-bottom: 1px solid #d9e2eb;
    font-size: clamp(14px, 3.9vw, 15.5px);
    line-height: 1.7;
  }

  body.pg-about .neu-right {
    margin-top: 26px;
  }

  body.pg-about .neu-quote {
    width: auto;
    margin-bottom: 24px;
    padding-left: 18px;
    border-left: 6px solid #4285f4;
    font-size: clamp(15px, 4.2vw, 17px);
    line-height: 1.6;
    color: #5b798e;
  }

  body.pg-about .neu-right em {
    max-width: none;
    font-size: clamp(14px, 3.9vw, 15.5px);
    line-height: 1.7;
  }

  /* drill photo: full screen width, no card corners */
  body.pg-about .neu-img {
    position: static;
    width: 100vw;
    margin: 32px 0 0 calc(50% - 50vw);
  }

  body.pg-about .neu-img img {
    border-radius: 0;
  }
}


/* =====================================================================
   ABOUT US - "VISIT NEU" BUTTON (new, under the blue quote)
   Shows when the "Button link" field is filled in the NEU section.
   ===================================================================== */
.neu-right .neu-btn {
  width: auto;
  margin: -40px 0 28px;
  padding: 0 30px;
  background: #104164;
}

.neu-right .neu-btn:hover {
  background: #1271b5;
}

@media (max-width: 767px) {
  body.pg-about .neu-right .neu-btn {
    display: flex;
    width: 100%;
    height: 52px;
    margin: 6px 0 0;
    font-size: 15px;
    letter-spacing: 1.6px;
  }

  /* Figma mobile: quote, button, then the photo */
  body.pg-about .neu-right em {
    display: none;
  }

  /* photo faces the other way on mobile, as in the Figma frame */
  body.pg-about .neu-img img {
    transform: scaleX(-1);
  }
}