/* Sydney Excavation Co - BEM stylesheet
   Note: no `border` shorthand is used anywhere; longhand only. */

:root {
  --colour-ink: #14181b;
  --colour-ink-soft: #4c565d;
  --colour-ink-mute: #5a646b;
  --colour-label: #3d484d;
  --colour-white: #fdfdfc;
  /* v2 "concrete" — warm light neutral for every muted/alternate section. */
  --colour-muted: #efeee9;
  --colour-line: #e3e2dc;
  --colour-line-strong: #d7d8d2;
  /* v2 "carbon" — the near-black used for every full-bleed/dark band.
     Cooler and deeper than before so the warm earth photography pops. */
  --colour-dark: #0b0f11;
  --colour-dark-2: #12181b;
  /* Secondary dark, for cards/depth variation sitting on a dark band. */
  --colour-steel: #20282c;
  --colour-on-dark: #dbe2e4;
  --colour-on-dark-soft: #aab3b8;
  /* v2 brand orange — pushed brighter/warmer than the previous #d9691a. */
  --colour-brand: #e07a24;
  --colour-brand-hover: #f08a30;
  --colour-brand-deep: #b85712;
  --colour-brand-light: #f0a35e;
  --shell: 1220px;
  --shell-narrow: 920px;
  --gutter: 26px;
  --radius: 12px;
  --radius-sm: 6px;
  --font-body: "Archivo", Helvetica, Arial, sans-serif;
  /* v2 display face — Anton, a heavy condensed grotesque, always set
     uppercase. Loaded from Google Fonts in BaseLayout; falls back to a
     condensed system stack until the webfont lands. */
  --font-display: "Anton", "Arial Narrow", Arial, sans-serif;
  --font-mono: ui-monospace, Menlo, Consolas, monospace;
}

*,
*::before,
*::after { box-sizing: border-box; }

/* v2 type system: Anton is a single-weight (400) uppercase display face.
   Every display heading site-wide (home, service and suburb pages) is set
   in it, uppercase, with the slight positive tracking Anton wants — this
   one rule carries the new look across the whole site. */
.hero__title,
.hero__eyebrow,
.section__title,
.section__eyebrow,
.quote-card__title,
.cta-tile__title,
.step__title,
.quote-band__title,
.stat-strip__value,
.spec-grid__value,
.final-cta__title,
.brand__name {
  font-family: var(--font-display);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}
/* Eyebrows stay small/tracked but keep the body face — override the display
   inheritance the group rule above would otherwise give them. */
.hero__eyebrow,
.section__eyebrow {
  font-family: var(--font-body);
  font-weight: 700;
  letter-spacing: 0.18em;
}

body {
  margin: 0;
  background: var(--colour-muted);
  color: var(--colour-ink);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

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

a { color: var(--colour-brand-deep); text-decoration: none; }
a:hover { color: #8f4110; }

input,
select,
textarea { font-family: inherit; font-size: inherit; }

.shell {
  max-width: var(--shell);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
  width: 100%;
}

.shell--narrow { max-width: var(--shell-narrow); }

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* ---------- Buttons ---------- */

.btn {
  display: inline-block;
  border-width: 0;
  border-style: none;
  border-radius: var(--radius-sm);
  font-family: inherit;
  font-weight: 700;
  font-size: 15px;
  padding: 11px 20px;
  cursor: pointer;
  text-align: center;
}

.btn--primary { background: var(--colour-brand); color: #fff; }
.btn--primary:hover { background: var(--colour-brand-hover); color: #fff; }

.btn--light { background: var(--colour-white); color: #12181b; }
.btn--light:hover { background: #f0d9c6; color: #12181b; }

.btn--block { display: block; width: 100%; }
.btn--large { font-size: 16px; padding: 15px 20px; }

/* ---------- Header ---------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 60;
  background: var(--colour-white);
  border-bottom-width: 1px;
  border-bottom-style: solid;
  border-bottom-color: var(--colour-line);
  box-shadow: 0 1px 0 rgba(20, 27, 30, 0.06);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-height: 72px;
}

.brand { display: flex; align-items: center; gap: 12px; color: var(--colour-ink); }
.brand:hover { color: var(--colour-ink); }
.brand__mark {
  width: 30px;
  height: 30px;
  background: var(--colour-brand);
  border-radius: 4px;
  transform: rotate(45deg);
  flex: none;
}
.brand__text { display: flex; flex-direction: column; line-height: 1.15; }
.brand__name { font-size: 17px; font-weight: 700; letter-spacing: -0.01em; }
.brand__tag {
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #7c8a90;
}

.nav { display: flex; align-items: center; gap: 30px; }
.nav__link { color: #39464b; font-size: 15px; font-weight: 500; }
.nav__link:hover { color: var(--colour-brand-deep); }

/* ---------- Services dropdown ---------- */
.nav__services { position: relative; display: inline-flex; align-items: center; }
.nav__services-toggle { display: inline-flex; align-items: center; gap: 5px; cursor: pointer; }
.nav__caret { font-size: 11px; line-height: 1; transition: transform 0.15s ease; }
/* The wrapper sits flush under the link (top:100%) and holds the visual gap
   as padding-top, so the hover target runs unbroken from link to panel. */
.nav__panel-wrap {
  position: absolute; top: 100%; left: 0; padding-top: 12px;
  display: none; z-index: 200;
}
.nav__panel {
  min-width: 268px; background: #ffffff; border: 1px solid #ececec;
  border-radius: 10px; box-shadow: 0 20px 48px rgba(15, 20, 22, 0.16);
  padding: 8px; display: flex; flex-direction: column;
}
.nav__panel-link {
  font-family: inherit; font-size: 14px; font-weight: 600; color: #39464b;
  padding: 10px 12px; border-radius: 7px; white-space: nowrap;
  transition: color 0.12s ease, background 0.12s ease;
}
.nav__panel-link:hover { color: var(--colour-brand); background: #f6f3ee; }
.nav__services.is-open .nav__panel-wrap { display: block; }
.nav__services.is-open .nav__caret { transform: rotate(180deg); }

/* ---------- Hero ---------- */

.hero {
  position: relative;
  background-color: var(--colour-dark);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  color: #fff;
  padding-top: 56px;
  display: flex;
  flex-direction: column;
  min-height: calc(82svh - 88px);
}

.hero--short { min-height: calc(75svh - 88px); }

.hero__inner {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: 44px;
  align-items: start;
  padding-bottom: 48px;
}

.hero__eyebrow {
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--colour-brand-light);
  font-weight: 700;
}

.hero__title {
  margin: 16px 0 0;
  font-family: var(--font-display);
  font-size: 60px;
  line-height: 0.98;
  letter-spacing: -0.01em;
  font-weight: 400;
  text-wrap: pretty;
  text-shadow: 0 2px 18px rgba(10, 14, 16, 0.45);
}

.hero__title--flush { margin-top: 0; }

.hero__lead {
  margin: 18px 0 0;
  max-width: 560px;
  font-size: 19px;
  color: #e2e8ea;
  text-wrap: pretty;
  text-shadow: 0 1px 3px rgba(8, 12, 14, 0.85), 0 2px 16px rgba(8, 12, 14, 0.6);
}

.hero__rating {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 18px 0 0;
}

.hero__rating-stars {
  display: flex;
  gap: 2px;
}

.hero__rating-stars svg {
  fill: var(--colour-brand-light);
}

.hero__rating-text {
  font-size: 14px;
  font-weight: 700;
  color: #fff;
  letter-spacing: -0.005em;
  text-shadow: 0 1px 8px rgba(8, 12, 14, 0.6);
}

.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 22px;
  padding: 0;
  list-style: none;
  font-size: 13px;
  color: #e2e8ea;
  text-shadow: 0 1px 8px rgba(8, 12, 14, 0.7);
}
.breadcrumb__item { display: flex; gap: 8px; align-items: center; }
.breadcrumb__item::after { content: "/"; color: #b3bfc4; }
.breadcrumb__item:last-child::after { content: ""; }
.breadcrumb__link { color: #e2e8ea; }
.breadcrumb__link:hover { color: #fff; }
.breadcrumb__current { color: #fff; font-weight: 700; }

/* ---------- Quote card + forms ---------- */

.quote-card {
  background: var(--colour-white);
  color: var(--colour-ink);
  border-radius: 12px;
  padding: 22px;
  box-shadow: 0 20px 48px rgba(0, 0, 0, 0.38);
}

.quote-card--plain { box-shadow: none; padding: 30px; }

.quote-card__title {
  margin: 0 0 12px;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 22px;
  letter-spacing: -0.005em;
}

.form { display: grid; gap: 10px; }
.form--roomy { gap: 13px; }

.form__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 10px;
}
.form--roomy .form__row { gap: 13px; }

.form__field { display: grid; gap: 4px; margin: 0; }
.form--roomy .form__field { gap: 5px; }

.form__label { font-size: 12px; font-weight: 700; line-height: 1.2; color: var(--colour-label); }
.form--roomy .form__label { font-size: 13px; }

.form__input,
.form__select,
.form__textarea {
  padding: 9px 12px;
  border-width: 1px;
  border-style: solid;
  border-color: var(--colour-line-strong);
  border-radius: var(--radius-sm);
  background: #fff;
  color: var(--colour-ink);
  line-height: 1.3;
  width: 100%;
}

.form__textarea { resize: vertical; }

.form__input:focus,
.form__select:focus,
.form__textarea:focus {
  outline-width: 2px;
  outline-style: solid;
  outline-color: var(--colour-brand);
  outline-offset: 1px;
}

.form__note {
  text-align: center;
  font-size: 13px;
  color: #77848a;
}

.form__submit { margin-top: 4px; }

.form-success { padding: 36px 4px; }
.form-success__mark {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #f7e6d7;
  color: var(--colour-brand-deep);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  font-weight: 700;
}
.form-success__text { margin: 20px 0 0; font-size: 19px; text-wrap: pretty; }
.is-hidden { display: none; }

/* ---------- Trust bar ---------- */

.trust-bar {
  margin-top: auto;
  background: var(--colour-dark-2);
  border-top-width: 1px;
  border-top-style: solid;
  border-top-color: rgba(255, 255, 255, 0.1);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.trust-bar__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  margin-top: 0;
  margin-bottom: 0;
  padding-top: 0;
  padding-bottom: 0;
  list-style: none;
}

.trust-bar__item {
  flex: 1 1 210px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 11px;
  padding: 20px 16px;
  border-left-width: 1px;
  border-left-style: solid;
  border-left-color: rgba(255, 255, 255, 0.09);
}

.trust-bar__icon { flex: none; }

.trust-bar__label {
  font-size: 15px;
  font-weight: 700;
  color: #eef3f5;
  letter-spacing: -0.005em;
  white-space: nowrap;
}

/* ---------- Sections ---------- */

.section { padding: 92px 0; }
.section--light { background: var(--colour-white); }
.section--muted { background: var(--colour-muted); }
.section--dark { background: var(--colour-dark); color: #fff; }
.section--tight { padding: 56px 0; }
.section--pull-up { padding-bottom: 72px; }
.section--push-down { padding-top: 72px; }

.section--ruled {
  border-top-width: 1px;
  border-top-style: solid;
  border-top-color: var(--colour-line);
  border-bottom-width: 1px;
  border-bottom-style: solid;
  border-bottom-color: var(--colour-line);
}

.section--ruled-bottom {
  border-bottom-width: 1px;
  border-bottom-style: solid;
  border-bottom-color: var(--colour-line);
}

.section--photo {
  background-color: var(--colour-dark);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  color: #fff;
  padding: 120px 0;
}

.section__head { max-width: 680px; }
.section__head--wide { max-width: none; }

.section__eyebrow {
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--colour-brand-deep);
  font-weight: 700;
}
.section--dark .section__eyebrow,
.section--photo .section__eyebrow { color: var(--colour-brand-light); }

.section__title {
  margin: 16px 0 0;
  font-family: var(--font-display);
  font-size: 40px;
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: -0.005em;
  text-wrap: pretty;
}
.section__title--flush { margin-top: 0; }
.section--photo .section__title { text-shadow: 0 1px 12px rgba(8, 12, 14, 0.5); }

.section__lead { margin: 14px 0 0; color: var(--colour-ink-soft); text-wrap: pretty; }
.section--dark .section__lead { color: var(--colour-on-dark-soft); }
.section--photo .section__lead {
  color: var(--colour-on-dark);
  font-size: 19px;
  text-shadow: 0 1px 8px rgba(8, 12, 14, 0.6);
}

.prose { margin: 0; color: var(--colour-ink-soft); text-wrap: pretty; }
.prose + .prose { margin-top: 18px; }
.prose--large { font-size: 18px; color: #465257; }

/* ---------- Split (text + media) ---------- */

.split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 64px;
  align-items: start;
}
.split--roomy { gap: 56px; }
.split--lead { grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); }

.split__col { display: flex; flex-direction: column; gap: 28px; }

.split__media {
  flex: 1;
  min-height: 320px;
  border-radius: var(--radius);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}
.split__media--tall { min-height: 440px; }

/* ---------- Tick list ---------- */

.tick-list {
  margin: 28px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 12px;
}

.tick-list__item { display: flex; align-items: center; gap: 12px; }

.tick-list__mark {
  width: 22px;
  height: 22px;
  flex: none;
  border-radius: 50%;
  background: #f7e6d7;
  color: var(--colour-brand-deep);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
}

.tick-list__text { font-weight: 700; font-size: 16px; }

.checklist {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 14px;
}
.checklist__item { display: flex; align-items: flex-start; gap: 13px; }
.checklist__mark {
  width: 22px;
  height: 22px;
  flex: none;
  margin-top: 2px;
  border-radius: 50%;
  background: rgba(232, 123, 40, 0.18);
  color: var(--colour-brand-light);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
}
.checklist__text { font-size: 16px; color: var(--colour-on-dark); text-wrap: pretty; }

/* ---------- Scope tiles ---------- */

.scope-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.scope-tile {
  position: relative;
  height: 230px;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 0 0 rgba(15, 21, 24, 0);
  transition: box-shadow 0.35s ease;
}

.scope-tile:hover {
  box-shadow: 0 16px 32px -12px rgba(15, 21, 24, 0.45);
}

.scope-tile__copy {
  position: relative;
  z-index: 1;
  padding: 0 18px 16px;
  overflow: hidden;
  width: 100%;
}

.scope-tile__label {
  font-size: 16px;
  font-weight: 700;
  color: #fff;
  letter-spacing: -0.005em;
  text-shadow: 0 1px 8px rgba(8, 12, 14, 0.6);
}

/* ---------- Services ---------- */

.service-grid {
  margin-top: 44px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
  list-style: none;
  padding: 0;
}

.service-card {
  background: var(--colour-white);
  border-width: 1px;
  border-style: solid;
  border-color: var(--colour-line);
  border-radius: var(--radius);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  color: var(--colour-ink);
  height: 100%;
}
.service-card:hover { border-color: var(--colour-brand); color: var(--colour-ink); }

.service-card__media {
  position: relative;
  height: 170px;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}

.service-card__chip {
  position: absolute;
  top: 12px;
  left: 12px;
  background: var(--colour-white);
  color: var(--colour-brand-deep);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 6px 10px;
  border-radius: 4px;
}

.service-card__body {
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
}

.service-card__title { margin: 0; font-size: 20px; letter-spacing: -0.01em; }
.service-card__text { margin: 0; font-size: 15px; color: var(--colour-ink-mute); text-wrap: pretty; }

.cta-tile {
  background: var(--colour-brand);
  color: #fff;
  border-radius: var(--radius);
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  height: 100%;
}

.cta-tile__chip {
  align-self: flex-start;
  background: rgba(255, 255, 255, 0.18);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 6px 10px;
  border-radius: 4px;
}

.cta-tile__title {
  margin: 8px 0 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 26px;
  line-height: 1.15;
  letter-spacing: -0.005em;
  text-wrap: pretty;
}

.cta-tile__text { margin: 0; font-size: 16px; color: #fbe7d8; text-wrap: pretty; }
.cta-tile__action { margin-top: auto; padding-top: 18px; }

/* ---------- Steps ---------- */

.steps {
  margin: 48px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 32px;
}

.steps--stacked { grid-template-columns: minmax(0, 1fr); gap: 24px; }

.step {
  border-top-width: 2px;
  border-top-style: solid;
  border-top-color: var(--colour-brand);
  padding-top: 24px;
}

.step__num {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--colour-brand-light);
}
.step__title { margin: 12px 0 10px; font-family: var(--font-display); font-weight: 400; font-size: 24px; letter-spacing: 0.01em; }
.step__text { margin: 0; color: var(--colour-on-dark-soft); font-size: 16px; text-wrap: pretty; }

/* ---------- Reasons ---------- */

.reason-grid {
  margin: 44px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1px;
  background: var(--colour-line);
  border-width: 1px;
  border-style: solid;
  border-color: var(--colour-line);
  border-radius: var(--radius);
  overflow: hidden;
}

.reason { background: var(--colour-white); padding: 30px; }
.reason__title { margin: 0 0 10px; font-size: 19px; letter-spacing: -0.01em; }
.reason__text { margin: 0; font-size: 15px; color: var(--colour-ink-mute); text-wrap: pretty; }

/* ---------- FAQ ---------- */

.faq {
  border-top-width: 1px;
  border-top-style: solid;
  border-top-color: var(--colour-line);
}

.faq__item {
  border-bottom-width: 1px;
  border-bottom-style: solid;
  border-bottom-color: var(--colour-line);
}

.faq__question {
  display: flex;
  gap: 20px;
  align-items: flex-start;
  justify-content: space-between;
  width: 100%;
  padding: 22px 0;
  background: none;
  border-width: 0;
  border-style: none;
  font-family: inherit;
  font-size: 19px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--colour-ink);
  text-align: left;
  cursor: pointer;
}
.faq__question:hover { color: var(--colour-brand-deep); }

.faq__toggle {
  flex: none;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border-width: 1px;
  border-style: solid;
  border-color: var(--colour-line-strong);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  color: var(--colour-brand-deep);
}

.faq__answer {
  margin: 0;
  padding: 0 60px 26px 0;
  color: var(--colour-ink-soft);
  text-wrap: pretty;
}

/* ---------- Quote band ---------- */

.quote-band {
  background-color: var(--colour-dark);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  color: #fff;
  padding: 92px 0;
}

.quote-band__title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 36px;
  line-height: 1.08;
  letter-spacing: -0.005em;
  text-wrap: pretty;
}

.quote-band__lead { margin: 18px 0 0; font-size: 18px; color: #b8c3c7; text-wrap: pretty; }

.assurance-list {
  margin: 30px 0 0;
  padding-top: 26px;
  padding-left: 0;
  list-style: none;
  border-top-width: 1px;
  border-top-style: solid;
  border-top-color: rgba(255, 255, 255, 0.12);
  display: grid;
  gap: 18px;
}

.assurance { display: flex; align-items: center; gap: 14px; }

.assurance__icon {
  width: 40px;
  height: 40px;
  flex: none;
  border-radius: 8px;
  background: rgba(232, 123, 40, 0.14);
  display: flex;
  align-items: center;
  justify-content: center;
}

.assurance__text { font-size: 16px; color: var(--colour-on-dark); }

/* Plain/light variant - used on the homepage so the quote band and the
   full-bleed final CTA band right after it don't read as two identical
   dark bands back to back. */
.quote-band--light {
  background-color: var(--colour-muted);
  background-image: none !important;
  color: var(--colour-ink);
}
.quote-band--light .quote-band__lead { color: var(--colour-ink-soft); }
.quote-band--light .assurance-list { border-top-color: var(--colour-line-strong); }
.quote-band--light .assurance__text { color: var(--colour-ink); }

/* ---------- Areas ---------- */

.area-grid {
  margin: 40px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 32px;
}

.area-group__title {
  margin: 0 0 12px;
  font-size: 15px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--colour-ink);
}

.area-group__list { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; }
.area-group__item { font-size: 15px; color: var(--colour-ink-mute); }

.chip-list { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; padding: 0; list-style: none; }

.chip {
  background: var(--colour-white);
  border-width: 1px;
  border-style: solid;
  border-color: var(--colour-line);
  border-radius: 20px;
  padding: 8px 16px;
  font-size: 15px;
  color: #39464b;
}

.map-embed {
  min-height: 380px;
  height: 100%;
  border-radius: var(--radius);
  border-width: 1px;
  border-style: dashed;
  border-color: #b9bdba;
  background: repeating-linear-gradient(135deg, #e9e7e2 0 10px, #e2dfd9 10px 20px);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 24px;
}

.map-embed__note {
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.7;
  letter-spacing: 0.06em;
  color: #77817f;
  text-transform: uppercase;
}

.subheading {
  margin: 36px 0 14px;
  font-size: 15px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--colour-ink);
}

/* ---------- Footer ---------- */

.site-footer { background: var(--colour-dark); color: #8d9ba1; padding: 36px 0; }

.site-footer__inner {
  display: flex;
  flex-wrap: wrap;
  gap: 20px 40px;
  align-items: center;
  justify-content: space-between;
}

.site-footer__note { font-size: 14px; margin: 0; }
.site-footer__note-link { color: inherit; text-decoration: none; }
.site-footer__note-link:hover { text-decoration: underline; }
.site-footer__nav { display: flex; gap: 24px; }
.site-footer__link { color: #d7dee1; font-size: 14px; }
.site-footer__link:hover { color: var(--colour-brand-light); }

/* Footer services column */
.site-footer__services { margin-bottom: 28px; }
.site-footer__heading {
  font-family: inherit; font-size: 13px; font-weight: 800; letter-spacing: 0.08em;
  text-transform: uppercase; color: #eef3f5; margin: 0 0 16px;
}
.site-footer__list {
  list-style: none; margin: 0; padding: 0; display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px 32px;
}
.site-footer__services + .site-footer__inner {
  border-top: 1px solid rgba(255, 255, 255, 0.1); padding-top: 26px;
}
@media (max-width: 900px) {
  .site-footer__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 480px) {
  .site-footer__list { grid-template-columns: minmax(0, 1fr); }
  .nav__services { display: none; }
}


/* ---------- Sticky mobile call bar ---------- */
/* Hidden by default; shown only under the 720px breakpoint below, where
   it replaces the header's phone number and nav links as the primary
   mobile conversion path. */

.mobile-call-bar {
  display: none;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 70;
  grid-template-columns: 1fr;
  box-shadow: 0 -4px 16px rgba(15, 21, 24, 0.16);
}

.mobile-call-bar__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 12px;
  font-weight: 700;
  font-size: 15px;
}

.mobile-call-bar__btn--quote { background: var(--colour-brand); color: #fff; }

/* ---------- Stat strip ---------- */

.stat-strip {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 24px;
}

.stat-strip__item {
  border-top-width: 3px;
  border-top-style: solid;
  border-top-color: var(--colour-brand);
  padding-top: 14px;
  text-align: center;
}

.stat-strip__value {
  margin: 0;
  font-family: var(--font-display);
  font-size: 30px;
  font-weight: 400;
  letter-spacing: -0.005em;
}

/* Homepage flips the strip onto the asphalt band; numbers go bold amber
   so they read as the page's one "energy" pop moment rather than sitting
   at the same muted value as everything around them. */
.stat-strip--dark .stat-strip__value { color: var(--colour-brand-light); }
.stat-strip--dark .stat-strip__label { color: var(--colour-on-dark-soft); }
.stat-strip--dark .stat-strip__item { border-top-color: var(--colour-brand); }

.stat-strip__label {
  margin: 4px 0 0;
  font-size: 14px;
  color: var(--colour-ink-mute);
}

/* ---------- Spec grid ("at a glance") ---------- */

.spec-grid {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.spec-grid__item {
  padding: 20px;
  border-width: 1px;
  border-style: solid;
  border-color: var(--colour-line);
  border-radius: var(--radius-sm);
  background: var(--colour-muted);
}

.spec-grid__label {
  margin: 0 0 6px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--colour-ink-mute);
}

.spec-grid__value {
  margin: 0;
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 400;
  letter-spacing: -0.005em;
}

.spec-grid__caption {
  margin: 4px 0 0;
  font-size: 13px;
  color: var(--colour-ink-mute);
}

/* Homepage "accent" treatment: an amber icon chip + a left rule instead
   of a plain grey box on all four sides, so the spec sheet reads as
   designed rather than a bare data table. Service pages keep the plain
   box (unaffected, opt-in via the modifier only). */
.spec-grid--accent .spec-grid__item {
  background: var(--colour-white);
  border-color: var(--colour-line);
  border-left-width: 3px;
  border-left-color: var(--colour-brand);
  transition: box-shadow 0.2s ease, border-color 0.2s ease;
}
.spec-grid--accent .spec-grid__item:hover {
  box-shadow: 0 10px 24px -12px rgba(30, 34, 39, 0.28);
}
.spec-grid--accent .spec-grid__icon {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: rgba(217, 105, 26, 0.14);
  color: var(--colour-brand-deep);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 12px;
}

/* ---------- Suitability columns ---------- */

.suitability {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 40px;
}

.suitability__title {
  margin: 0 0 16px;
  font-size: 19px;
  letter-spacing: -0.01em;
}

/* ---------- Gallery ---------- */

.gallery {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
}

.gallery__item { transition: transform 0.25s ease; }
.gallery__item--2 { transform: rotate(-1.4deg); }
.gallery__item--3 { transform: rotate(1.6deg); }
.gallery__item--4 { transform: rotate(-0.8deg); }
.gallery__item:hover { transform: rotate(0deg) translateY(-4px); }

.gallery__media {
  position: relative;
  display: block;
  height: 200px;
  border-radius: var(--radius);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  box-shadow: 0 12px 28px rgba(15, 21, 24, 0.18);
}

.gallery__tag {
  position: absolute;
  top: 12px;
  left: 12px;
  background: rgba(255, 255, 255, 0.94);
  color: var(--colour-ink);
  font-size: 12px;
  font-weight: 700;
  padding: 6px 10px;
  border-radius: 4px;
}

/* ---------- Related services ---------- */

.related-grid {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}

.related-card {
  display: block;
  border-width: 1px;
  border-style: solid;
  border-color: var(--colour-line);
  border-radius: var(--radius);
  overflow: hidden;
  color: var(--colour-ink);
}
.related-card:hover { border-color: var(--colour-brand); color: var(--colour-ink); }

.related-card__media {
  display: block;
  height: 110px;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}

.related-card__title {
  display: block;
  padding: 16px 16px 4px;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.related-card__text {
  display: block;
  padding: 0 16px 16px;
  font-size: 14px;
  color: var(--colour-ink-mute);
}

/* ---------- Service-area map ---------- */

.area-map {
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--colour-white);
  border-width: 1px;
  border-style: solid;
  border-color: var(--colour-line);
}

.area-map__svg { display: block; width: 100%; height: auto; }
.area-map__svg rect:first-child { fill: var(--colour-white); }
.area-map__outline { fill: var(--colour-muted); stroke: var(--colour-line-strong); stroke-width: 1.5; }
.area-map__region { fill: var(--colour-steel); opacity: 0.06; }
.area-map__pin { fill: var(--colour-brand); }
.area-map__pin-ring { fill: none; stroke: var(--colour-brand); stroke-width: 1.5; opacity: 0.35; }
.area-map__pin-label {
  font-family: var(--font-body);
  font-size: 7.5px;
  font-weight: 700;
  fill: var(--colour-ink-soft);
  text-anchor: middle;
}

/* ---------- Final CTA band ---------- */

.final-cta {
  background: var(--colour-dark);
  color: #fff;
  padding: 56px 0;
}

.final-cta__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.final-cta__title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 32px;
  letter-spacing: -0.005em;
}

/* Full-bleed photo variant used on the homepage's closing band, per the
   redesign brief ("full-bleed dusk-site image with scrim"). Service
   pages keep the plain asphalt band (the default .final-cta rules
   above are untouched). */
.final-cta--photo {
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  padding: 96px 0;
}
.final-cta--photo .final-cta__meta { color: var(--colour-on-dark); }
.final-cta__phone { margin: 16px auto 0; text-align: right; }
.final-cta__phone a { color: #fff; font-weight: 700; font-size: 15px; }
.final-cta__phone a:hover { color: var(--colour-brand-light); }

.final-cta__meta {
  margin: 8px 0 0;
  color: var(--colour-on-dark-soft);
  font-size: 15px;
}

.final-cta__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

/* ---------- Homepage redesign: colour-blocked, asymmetric layout kit ---------- */
/* Everything below is scoped with its own class names (bleed hero,
   edge-split, ground-band, icon chips, reason-grid variants, dark stat
   strip, etc.) rather than changed in place on the shared base rules
   above, so the already-shipped service/suburb pages keep their current
   look untouched — the homepage opts into these on top of it. */

.btn--ghost {
  background: none;
  color: #fff;
  border-width: 2px;
  border-style: solid;
  border-color: rgba(255, 255, 255, 0.55);
}
.btn--ghost:hover { background: rgba(255, 255, 255, 0.12); color: #fff; border-color: #fff; }

/* Icon chips (trust bar + "why choose us") - a small icon sitting in an
   amber-tinted circle, replacing the plain-text/plain-icon line the
   brief calls out as one of the AI-generated tells. */
.icon-chip {
  width: 38px;
  height: 38px;
  flex: none;
  border-radius: 50%;
  background: rgba(217, 105, 26, 0.16);
  color: var(--colour-brand-light);
  display: flex;
  align-items: center;
  justify-content: center;
}
.section--light .icon-chip,
.section--muted .icon-chip { color: var(--colour-brand-deep); }

.trust-bar__icon-wrap { margin-right: 1px; }
.trust-bar__item { gap: 13px; }

/* A small floating badge overlapping an image corner (stat/label card
   sitting half-on the photo) - used on the "what's included" bleed image. */
.chip-float {
  position: absolute;
  left: 20px;
  bottom: -18px;
  background: var(--colour-brand);
  color: #fff;
  font-weight: 700;
  font-size: 14px;
  padding: 10px 18px;
  border-radius: var(--radius-sm);
  box-shadow: 0 14px 28px -10px rgba(30, 34, 39, 0.5);
}

/* ---------- Hero: home-variant extras (kicker, ticks, floating review) ---------- */

.hero__title--upper { text-transform: uppercase; }

.hero__ticks {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 22px;
  margin: 22px 0 0;
  padding: 0;
  list-style: none;
}

.hero__tick {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 700;
  color: #fff;
  text-shadow: 0 1px 8px rgba(8, 12, 14, 0.6);
}

.hero__tick-mark {
  width: 18px;
  height: 18px;
  flex: none;
  border-radius: 50%;
  background: var(--colour-brand);
  display: flex;
  align-items: center;
  justify-content: center;
}

.hero__cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 24px;
}

/* Floating Google-style review card, overlapping the lower part of the
   hero photo on desktop; becomes a plain in-flow card under the CTA row
   on narrower screens (see Responsive) rather than fighting an absolute
   position against a hero height that changes a lot once things stack. */
.hero-review-card {
  /* Sits under the quote-card, not the text column - the text column's
     height varies with copy length and would otherwise collide with the
     CTA buttons underneath it. */
  position: absolute;
  right: max(24px, calc((100vw - var(--shell)) / 2 + 24px));
  bottom: 96px;
  z-index: 2;
  background: var(--colour-white);
  color: var(--colour-ink);
  border-radius: var(--radius);
  padding: 14px 18px;
  max-width: 280px;
  box-shadow: 0 16px 32px -10px rgba(15, 21, 24, 0.4);
}

.hero-review-card__stars {
  display: flex;
  align-items: center;
  gap: 2px;
  margin-bottom: 6px;
}
.hero-review-card__stars svg { fill: var(--colour-brand); }

.hero-review-card__rating {
  margin-left: 6px;
  font-size: 13px;
  font-weight: 700;
  color: var(--colour-ink);
}

.hero-review-card__quote {
  margin: 0;
  font-size: 13px;
  font-style: italic;
  color: var(--colour-ink-soft);
}

/* ---------- Audience tiles: hover descriptor reveal ---------- */

.scope-tile { display: flex; align-items: flex-end; }

.scope-tile__desc {
  margin: 6px 0 0;
  max-height: 0;
  opacity: 0;
  font-size: 13px;
  color: #eef3f5;
  text-wrap: pretty;
  transition: max-height 0.3s ease, opacity 0.25s ease;
}
.scope-tile:hover .scope-tile__desc,
.scope-tile:focus-within .scope-tile__desc {
  max-height: 60px;
  opacity: 1;
}

/* ---------- Steps: connecting line ---------- */

.steps--connected { position: relative; }
.steps--connected::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--colour-brand);
}
.steps--connected .step { border-top-color: transparent; }

/* ---------- Edge split: image bleeds flush to one viewport edge ---------- */
/* Used for "what's included" (media on the right, text aligned to the
   shell's left edge) and the "why it matters" flush variant (media on
   the left instead) - never the same shape twice in a row. */

.edge-split {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  align-items: stretch;
  min-height: 480px;
}
.edge-split--media-left { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); }

.edge-split__text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 72px 40px 72px max(24px, calc((100vw - var(--shell)) / 2 + 24px));
}
.edge-split--media-left .edge-split__text {
  padding: 72px max(24px, calc((100vw - var(--shell)) / 2 + 24px)) 72px 40px;
}

.edge-split__media {
  position: relative;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}

/* ---------- Ground band: full-bleed image + overlay content ---------- */

.ground-band {
  position: relative;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  color: #fff;
  padding: 100px 0;
}
.ground-band .shell { display: flex; justify-content: flex-end; }
.ground-band__content { max-width: 460px; }

@media (min-width: 1040px) {
  .ground-band--parallax { background-attachment: fixed; }
}

/* ---------- Reason grid variants ---------- */

/* "cards" - homepage's warmed-up "why choose us": soft cards on the
   concrete band instead of hairline-divided white cells. */
.reason-grid--cards {
  background: none;
  border-width: 0;
  gap: 20px;
}
.reason-grid--cards .reason {
  border-radius: var(--radius);
  padding: 32px;
  box-shadow: 0 1px 2px rgba(30, 34, 39, 0.05);
}
.reason-grid--cards .reason__icon { margin-bottom: 16px; }

/* "quotes" - homepage's dark social-proof band: steel cards on asphalt
   with an oversized amber quotation mark behind the copy. */
.reason-grid--quotes {
  background: none;
  border-width: 0;
  gap: 20px;
}
.reason-grid--quotes .reason {
  position: relative;
  background: var(--colour-steel);
  color: #fff;
  overflow: hidden;
  padding: 40px 32px 32px;
}
.reason-grid--quotes .reason::before {
  content: '\201C';
  position: absolute;
  top: -18px;
  left: 14px;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 110px;
  line-height: 1;
  color: var(--colour-brand);
  opacity: 0.4;
}
.reason-grid--quotes .reason__text {
  position: relative;
  z-index: 1;
  color: #fff;
}

/* ---------- Service-area map: pulsing pins ---------- */

@media (prefers-reduced-motion: no-preference) {
  .area-map__pin-ring { animation: pin-pulse 2.4s ease-out infinite; transform-origin: center; }
}

@keyframes pin-pulse {
  0% { transform: scale(0.8); opacity: 0.6; }
  70% { transform: scale(1.8); opacity: 0; }
  100% { transform: scale(1.8); opacity: 0; }
}

/* ---------- Motion ---------- */
/* One orchestrated moment: the hero content fades/rises in on load.
   Everything else (card hovers) is a fast border/shadow state change,
   not a lift, and all of it is skipped for reduced-motion users. */

@media (prefers-reduced-motion: no-preference) {
  .hero__content,
  .hero .quote-card {
    animation: hero-reveal 0.6s ease both;
  }
  .hero .quote-card { animation-delay: 0.12s; }
}

@keyframes hero-reveal {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ---------- Responsive ---------- */

@media (max-width: 1040px) {
  .hero { min-height: 0; padding-top: 48px; }
  .hero__inner,
  .split,
  .steps { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .hero__title { font-size: 44px; }
  .quote-card { max-width: 540px; margin-left: auto; margin-right: auto; }
  .nav { gap: 18px; }
  .service-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .trust-bar__item { flex: 1 1 45%; justify-content: flex-start; padding: 14px 16px; }
  .stat-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
  .spec-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .related-grid { grid-template-columns: minmax(0, 1fr); }

  /* The floating review card can't safely track "the lower part of the
     hero photo" once the hero stacks into a single column (its height
     swings a lot once the quote-card drops below the content) - fall
     back to a plain in-flow card right under the CTA row instead. */
  .hero-review-card {
    position: static;
    margin: 20px 0 0;
    max-width: none;
    display: inline-block;
  }

  /* Edge-split (the "what's included" / "why it matters" bleed sections)
     loses its bleed at this width - stack it like every other split. */
  .edge-split,
  .edge-split--media-left { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .edge-split__media { min-height: 280px; }
  .edge-split__text,
  .edge-split--media-left .edge-split__text {
    padding: 48px var(--gutter);
  }

  .ground-band { padding: 72px 0; }
  .ground-band .shell { justify-content: center; }
  .ground-band__content { max-width: none; text-align: left; }
}

@media (max-width: 720px) {
  .nav__link { font-size: 14px; }
  .nav__link--secondary { display: none; }
  .hero__title { font-size: 36px; }
  .section__title { font-size: 30px; }
  .service-grid { grid-template-columns: minmax(0, 1fr); }
  .scope-tile { height: 180px; }
  .form__row { grid-template-columns: minmax(0, 1fr); }
  .faq__answer { padding-right: 0; }
  .trust-bar__item { justify-content: center; }
  .suitability { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .gallery__item { transform: none !important; }
  .mobile-call-bar { display: grid; }
  body { padding-bottom: 56px; }
}

@media (max-width: 560px) {
  .scope-grid { grid-template-columns: minmax(0, 1fr); }
  .stat-strip { grid-template-columns: minmax(0, 1fr); }
  .spec-grid { grid-template-columns: minmax(0, 1fr); }
  .gallery { grid-template-columns: minmax(0, 1fr); }
  .final-cta__inner { justify-content: center; text-align: center; }
  .final-cta__phone { text-align: center; }
}

@media (max-width: 480px) {
  /* Brand text + the header CTA both wrapped onto multiple lines at
     phone widths with nothing to stop them, and since the header's
     height was fixed rather than flexible, that overflow spilled out
     underneath the bar instead of the bar growing to fit it. Trim what's
     shown so it fits on one line, and the min-height fix above means
     anything that still wraps is contained rather than clipped. */
  .site-header .shell { padding-left: 16px; padding-right: 16px; }
  .site-header__inner { gap: 10px; }
  .brand { gap: 8px; }
  .brand__mark { width: 24px; height: 24px; }
  .brand__name { font-size: 13px; white-space: nowrap; }
  .brand__tag { display: none; }
  .nav { gap: 8px; }
  .nav__link:not(.nav__link--secondary) { display: none; }
  .site-header .btn--primary { font-size: 12px; padding: 8px 12px; white-space: nowrap; }
}

/* ---------- Page backgrounds ---------- */

.hero--home {
  background-image: radial-gradient(ellipse 60% 54% at 19% 46%, rgba(13,18,21,0.82) 0%, rgba(13,18,21,0.62) 40%, rgba(13,18,21,0.26) 70%, rgba(13,18,21,0.06) 90%, rgba(13,18,21,0) 100%), linear-gradient(to bottom, rgba(13,18,21,0) 50%, rgba(13,18,21,0.06) 75%, rgba(13,18,21,0.16) 92%, rgba(13,18,21,0.22) 100%), url("../img/hero-home.webp");
  background-position: center, center, 22% 28%;
}

.hero--service {
  background-image: linear-gradient(to bottom, rgba(13,18,21,0.16) 0%, rgba(13,18,21,0.12) 26%, rgba(13,18,21,0.04) 40%, rgba(13,18,21,0) 52%), radial-gradient(ellipse 60% 54% at 19% 46%, rgba(13,18,21,0.7) 0%, rgba(13,18,21,0.5) 40%, rgba(13,18,21,0.2) 70%, rgba(13,18,21,0.04) 90%, rgba(13,18,21,0) 100%), linear-gradient(to bottom, rgba(13,18,21,0) 50%, rgba(13,18,21,0.06) 75%, rgba(13,18,21,0.16) 92%, rgba(13,18,21,0.22) 100%), url("../img/service-earthworks.webp");
  background-position: center, center, center, 50% 62%;
}

.hero--suburb {
  background-image: linear-gradient(to bottom, rgba(13,18,21,0.16) 0%, rgba(13,18,21,0.12) 26%, rgba(13,18,21,0.04) 40%, rgba(13,18,21,0) 52%), radial-gradient(ellipse 60% 54% at 19% 46%, rgba(13,18,21,0.7) 0%, rgba(13,18,21,0.5) 40%, rgba(13,18,21,0.2) 70%, rgba(13,18,21,0.04) 90%, rgba(13,18,21,0) 100%), linear-gradient(to bottom, rgba(13,18,21,0) 50%, rgba(13,18,21,0.06) 75%, rgba(13,18,21,0.16) 92%, rgba(13,18,21,0.22) 100%), url("../img/hero-suburb.webp");
  background-position: center, center, center, center;
}

.section--expect {
  background-image: linear-gradient(to right, rgba(11,16,18,0.86) 0%, rgba(11,16,18,0.72) 55%, rgba(11,16,18,0.5) 100%), url("../img/expect-band.webp");
}

.quote-band--photo {
  background-image: linear-gradient(to bottom, rgba(11,16,18,0.86) 0%, rgba(11,16,18,0.82) 100%), url("../img/quote-band.webp");
}

.split__media--why { background-image: url("../img/why-it-matters.webp"); }
.split__media--included { background-image: url("../img/expect-band.webp"); }

/* Full-bleed "Built for Sydney ground" band (home page) - darker on the
   right where the overlaid content sits, per the redesign brief. */
.ground-band--sydney {
  background-image: linear-gradient(to left, rgba(30,34,39,0.92) 0%, rgba(30,34,39,0.58) 45%, rgba(30,34,39,0.18) 100%), url("../img/service-rock.webp");
}

/* Full-bleed final CTA band (home page). */
.final-cta--photo {
  background-image: linear-gradient(to bottom, rgba(30,34,39,0.82) 0%, rgba(30,34,39,0.88) 100%), url("../img/service-earthworks.webp");
}

/* Photo layer lives on ::before (separate from the tile box) so it can
   scale on hover without moving the label or affecting layout. The dark
   gradient overlay sits on top of it, unscaled, via ::after. */
.scope-tile::before {
  content: '';
  position: absolute;
  inset: 0;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  transition: transform 0.35s ease;
}

.scope-tile::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: linear-gradient(to top, rgba(11,16,18,0.82) 0%, rgba(11,16,18,0.34) 45%, rgba(11,16,18,0.06) 100%);
}

.scope-tile:hover::before { transform: scale(1.08); }

.scope-tile--residential::before { background-image: url("../img/scope-residential.webp"); }
.scope-tile--commercial::before { background-image: url("../img/scope-commercial.webp"); }
.scope-tile--civil::before { background-image: url("../img/scope-civil.webp"); }

.service-card__media--earthworks { background-image: url("../img/service-earthworks.webp"); }
.service-card__media--land-clearing { background-image: url("../img/service-land-clearing.webp"); }
.service-card__media--trenching { background-image: url("../img/service-trenching.webp"); }
.service-card__media--rock { background-image: url("../img/service-rock.webp"); }
.service-card__media--pool { background-image: url("../img/service-pool.webp"); }
.service-card__media--basement { background-image: url("../img/service-basement.webp"); }
.service-card__media--mini { background-image: url("../img/service-mini.webp"); }
.service-card__media--demolition { background-image: url("../img/service-demolition.webp"); }

@media (max-width: 1040px) {
  .hero--home,
  .hero--service,
  .hero--suburb {
    background-image: linear-gradient(to bottom, rgba(13,18,21,0.2) 0%, rgba(13,18,21,0.26) 35%, rgba(13,18,21,0.38) 70%, rgba(13,18,21,0.48) 100%), var(--hero-photo);
    background-position: center, center;
  }
  .hero--home { --hero-photo: url("../img/hero-home.webp"); background-position: center, 22% 28%; }
  .hero--service { --hero-photo: url("../img/service-earthworks.webp"); }
  .hero--suburb { --hero-photo: url("../img/hero-suburb.webp"); }
}