/* Shared About and Service Areas page styles */
.content-body { background: #f7f8f7; }

/* About page */
.about-page {
  position: relative;
  isolation: isolate;
  padding: 70px 0 0;
  color: #12262b;
  background:
    linear-gradient(180deg, rgba(7, 34, 27, .08), rgba(7, 34, 27, .48)),
    url('assets/south-australian-hills.jpg') center top / cover fixed;
}

.about-page::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, rgba(7, 24, 21, .04), rgba(7, 24, 21, .42));
  pointer-events: none;
}

.about-main {
  width: min(1280px, calc(100% - 80px));
  margin: 0 auto;
}

.about-hero,
.about-section {
  width: min(800px, 72%);
  padding: clamp(40px, 5vw, 64px);
  border-radius: 22px;
  box-shadow: 0 28px 80px rgba(0, 0, 0, .25);
}

.about-hero {
  color: #fff;
  background: rgba(9, 34, 28, .94);
  border-left: 8px solid var(--blue);
  border-radius: 4px 22px 22px 4px;
}

.content-kicker {
  margin: 0 0 14px;
  color: #52caff;
  font-size: .9rem;
  font-weight: 950;
  letter-spacing: .15em;
  text-transform: uppercase;
}

.about-hero h1,
.about-section h2,
.service-areas-hero h1,
.service-area-card h2,
.service-area-cta h2 {
  margin: 0;
  font-weight: 950;
  font-style: italic;
  letter-spacing: -.055em;
  line-height: .97;
}

.about-hero h1 {
  color: #fff;
  font-size: clamp(4rem, 7vw, 7.2rem);
  text-shadow: 0 4px 24px rgba(0, 0, 0, .34);
}

.about-hero h1 span { color: var(--blue); }

.about-lead {
  margin: 28px 0 8px;
  color: #fff;
  font-size: clamp(1.35rem, 2.2vw, 1.8rem);
  font-weight: 800;
  line-height: 1.3;
}

.about-but {
  margin: 0 0 28px;
  color: #58d17c;
  font-size: clamp(1.5rem, 2.5vw, 2rem);
  font-weight: 950;
  font-style: italic;
}

.about-hero > p:not(.content-kicker):not(.about-lead):not(.about-but):not(.about-purpose) {
  color: #e9f1ed;
  font-size: 1.08rem;
  line-height: 1.7;
}

.about-questions {
  margin: 28px 0;
  padding: 24px 26px;
  color: #fff;
  background: rgba(255, 255, 255, .08);
  border-left: 5px solid #58d17c;
  border-radius: 5px;
  font-size: clamp(1.05rem, 1.8vw, 1.25rem);
  line-height: 1.65;
}

.about-purpose {
  margin: 30px 0 0;
  color: #fff;
  font-size: clamp(1.35rem, 2.3vw, 1.75rem);
  font-weight: 800;
  font-style: italic;
  line-height: 1.4;
}

.about-section {
  margin-top: 100px;
}

.about-section h2 {
  margin-bottom: 28px;
  font-size: clamp(3rem, 5vw, 5.5rem);
}

.about-section p {
  margin: 18px 0 0;
  font-size: 1.08rem;
  line-height: 1.7;
}

.about-process {
  margin-left: auto;
  color: #12262b;
  background: rgba(255, 255, 255, .97);
}

.about-process .content-kicker { color: #007fb8; }
.about-process h2 { color: #12262b; }

.about-question-line {
  color: #176d37;
  font-size: 1.22rem !important;
  font-weight: 800;
}

.about-respect {
  margin-bottom: 100px;
  color: #fff;
  background: rgba(8, 31, 25, .94);
  border: 1px solid rgba(255, 255, 255, .15);
}

.about-respect h2 {
  color: #fff;
  text-shadow: 0 3px 18px rgba(0, 0, 0, .3);
}

.about-respect p { color: #e6efea; }
.about-confidence { color: #58d17c !important; font-size: 1.2rem !important; font-weight: 800; }

.content-cta {
  padding: 58px 0;
  color: #fff;
  background: linear-gradient(110deg, #252c32, #303940);
}

.content-cta-inner {
  width: min(var(--max), calc(100% - 80px));
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
}

.content-cta-copy {
  margin: 0;
  font-size: clamp(2.3rem, 4.5vw, 4.8rem);
  font-weight: 950;
  font-style: italic;
  letter-spacing: -.05em;
  line-height: 1;
}

.content-cta-copy span { color: var(--blue); }

/* Service Areas page */
.service-areas-page { background: #f5f6f5; }

.service-areas-hero {
  position: relative;
  color: #fff;
  background:
    radial-gradient(circle at 82% 35%, rgba(8, 170, 242, .24) 0 2px, transparent 3px),
    linear-gradient(118deg, #1b252c 0%, #25313a 61%, #314753 100%);
  overflow: hidden;
}

.service-areas-hero::after {
  content: "";
  position: absolute;
  inset: 0 0 0 58%;
  opacity: .2;
  background-image:
    linear-gradient(28deg, transparent 46%, var(--blue) 47% 48%, transparent 49%),
    linear-gradient(-31deg, transparent 55%, var(--blue) 56% 57%, transparent 58%);
  background-size: 92px 82px, 126px 102px;
  pointer-events: none;
}

.service-areas-hero-inner {
  position: relative;
  z-index: 1;
  width: min(1180px, calc(100% - 80px));
  min-height: 470px;
  margin: 0 auto;
  padding: 66px 0;
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(230px, .55fr);
  align-items: center;
  gap: 70px;
}

.service-areas-hero h1 {
  max-width: 820px;
  color: #fff;
  font-size: clamp(4rem, 6.7vw, 7.3rem);
  text-shadow: 0 4px 28px rgba(0, 0, 0, .25);
}

.service-areas-hero-copy {
  max-width: 760px;
  margin: 26px 0 0;
  color: #e6eef1;
  font-size: clamp(1.12rem, 1.8vw, 1.45rem);
  line-height: 1.65;
}

.service-radius {
  justify-self: end;
  width: min(100%, 270px);
  padding: 34px 26px;
  color: #1b252c;
  background: rgba(255, 255, 255, .96);
  border-radius: 18px;
  box-shadow: 0 18px 46px rgba(5, 17, 24, .25);
  text-align: center;
}

.service-radius strong {
  display: block;
  font-size: clamp(3.7rem, 6vw, 5.4rem);
  font-weight: 950;
  font-style: italic;
  letter-spacing: -.07em;
  line-height: .9;
}

.service-radius span {
  display: block;
  margin-top: 13px;
  color: #55636c;
  font-size: .82rem;
  font-weight: 900;
  letter-spacing: .08em;
  line-height: 1.45;
  text-transform: uppercase;
}

.service-areas-intro {
  width: min(900px, calc(100% - 80px));
  margin: 0 auto;
  padding: 62px 0 24px;
  color: #56636b;
  font-size: clamp(1.15rem, 1.8vw, 1.4rem);
  line-height: 1.7;
  text-align: center;
}

.service-areas-grid {
  width: min(1180px, calc(100% - 80px));
  margin: 0 auto;
  padding: 26px 0 78px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px;
}

.service-area-card {
  min-height: 285px;
  padding: 36px 34px;
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 10px 32px rgba(29, 45, 55, .08);
}

.service-area-card::before {
  content: "";
  display: block;
  width: 46px;
  height: 7px;
  margin-bottom: 24px;
  background: var(--blue);
  transform: skew(-28deg);
}

.service-area-card h2 {
  margin-bottom: 16px;
  color: #1b252c;
  font-size: clamp(1.65rem, 2.5vw, 2.35rem);
}

.service-area-card p {
  margin: 0;
  color: #55636c;
  font-size: 1.02rem;
  line-height: 1.7;
}

.service-area-wide {
  grid-column: 1 / -1;
  min-height: auto;
  background: #e9f8ff;
}

.service-area-cta {
  padding: 70px 0;
  color: #fff;
  background: #1b252c;
  text-align: center;
}

.service-area-cta-inner {
  width: min(820px, calc(100% - 80px));
  margin: 0 auto;
}

.service-area-cta h2 {
  color: #fff;
  font-size: clamp(3rem, 5.3vw, 5.6rem);
}

.service-area-cta p {
  margin: 22px auto 30px;
  color: #d9e4e9;
  font-size: 1.12rem;
  line-height: 1.7;
}

.service-area-motto {
  margin: 28px 0 0 !important;
  color: var(--blue) !important;
  font-size: 1.25rem !important;
  font-weight: 950;
  font-style: italic;
}

@media (max-width: 900px) {
  .about-page { background-attachment: scroll; }
  .about-hero,
  .about-section { width: min(850px, 88%); }
  .service-areas-hero-inner { grid-template-columns: 1fr; gap: 34px; }
  .service-radius { justify-self: start; width: 230px; }
}

@media (max-width: 650px) {
  .about-page { padding-top: 22px; }
  .about-main,
  .content-cta-inner,
  .service-areas-hero-inner,
  .service-areas-intro,
  .service-areas-grid,
  .service-area-cta-inner { width: calc(100% - 28px); }

  .about-hero,
  .about-section {
    width: 100%;
    margin-top: 22px;
    padding: 34px 24px;
    border-radius: 14px;
  }

  .about-hero { margin-top: 0; border-radius: 3px 14px 14px 3px; }
  .about-respect { margin-bottom: 22px; }
  .content-cta { padding: 42px 0; }
  .content-cta-inner { align-items: stretch; flex-direction: column; }
  .content-cta .button { width: 100%; }

  .service-areas-hero-inner { min-height: 0; padding: 52px 0; }
  .service-areas-hero::after { left: 35%; }
  .service-areas-intro { padding: 42px 0 18px; }
  .service-areas-grid { grid-template-columns: 1fr; gap: 14px; padding-bottom: 52px; }
  .service-area-card { min-height: 0; padding: 28px 24px; }
  .service-area-wide { grid-column: auto; }
  .service-area-cta { padding: 52px 0; }
}