/* =========================================
   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;
  }
}