/* ==========================================================================
   Beveridge Driveways — site styles
   Colours, fonts and spacing live in :root. Change them there.
   ========================================================================== */

:root {
  /* Palette: warm tan header, cream type over photos, lime call-to-action */
  --ink: #2a2320;
  --ink-2: #3b322c;
  --tan: #a06c4c;
  --tan-dk: #8a5a3b;
  --terracotta: #955a39;
  --paper: #faf6ef;
  --card: #fffdf9;
  --sand: #f1e8da;
  --line: #e3d7c4;
  --muted: #685b4f;
  --cream: #fbf5ea;
  --on-photo: #fbf5ea;
  --on-photo-2: #ece3d4;
  --photo-eyebrow: #f3dcbb;
  --lime: #b8cb5c;
  --lime-dk: #a5b947;
  --lime-ink: #1f2614;
  --logo: #9a5b36;        /* the logo tile's background, also the button hover */
  --night: #26201c;
  --error: #a3271b;

  --heading: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --serif: "Cormorant Garamond", Georgia, "Times New Roman", serif; /* numbers and footer logo */
  --sans: "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --maxw: 1240px;
  --radius: 20px;
  --radius-lg: 28px;
  --header-h: 76px;
  --shadow: 0 1px 2px rgba(42, 35, 32, 0.06), 0 18px 40px -18px rgba(42, 35, 32, 0.25);
  --shadow-lg: 0 2px 6px rgba(0, 0, 0, 0.1), 0 40px 80px -30px rgba(0, 0, 0, 0.5);
  --ease-out: cubic-bezier(0.2, 0.7, 0.2, 1);
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
/* The html background is what phones show when you pull past the top or bottom of the
   page. main.js switches it between the header tan (top half) and the footer colour
   (bottom half) so there's never a light strip at either end. */
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; background-color: var(--night); }
html.at-top { background-color: var(--tan); }
/* Anchor jumps and focused fields stop below the fixed header. (Set per element rather than as
   page-wide scroll-padding, which made the page jump when a dropdown list opened near the top.) */
main [id] { scroll-margin-top: calc(var(--header-h) + 16px); }
body {
  margin: 0;
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.65;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, svg { display: block; max-width: 100%; }
a { color: var(--terracotta); }
@media (hover: hover) and (pointer: fine) { a:hover { color: var(--tan-dk); } }
:focus-visible { outline: 3px solid var(--lime); outline-offset: 3px; border-radius: 6px; }
h1, h2, h3 { text-wrap: balance; }
p { text-wrap: pretty; }

.container { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip-link {
  position: absolute; left: 16px; top: -80px; z-index: 100;
  background: var(--ink); color: var(--cream); padding: 12px 18px; border-radius: 10px; font-weight: 700; text-decoration: none;
}
.skip-link:focus { top: 12px; color: var(--cream); }
.icon { width: 20px; height: 20px; flex: none; }

/* ---------- Type helpers ---------- */
.eyebrow {
  display: flex; align-items: center; gap: 14px;
  margin: 0 0 20px;
  font-family: var(--mono); font-size: 12.5px; font-weight: 500;
  letter-spacing: 0.28em; text-transform: uppercase; color: var(--terracotta);
}
.eyebrow::before { content: ""; width: 32px; height: 1px; background: currentColor; }
.display {
  margin: 0;
  font-family: var(--heading); font-weight: 700;
  font-size: clamp(34px, 4.2vw, 56px); line-height: calc(1.05em + 2px); letter-spacing: -0.04em;
}
/* Italic words in headings use a lighter weight for contrast */
.display em, .hero__title em { font-style: italic; font-weight: 400; }
/* The tight letter-spacing also squeezes the spaces, so give the words a little more room */
.display, .hero__title, .quote-card__title, .svc__title, .step__title, .process h3, .split__panel h3 { word-spacing: 0.08em; }
.lede { margin: 0; font-size: clamp(17px, 1.3vw, 19px); line-height: 1.75; color: var(--muted); }
.lede strong, .faq details p strong, .svc-note strong, .areas__note strong { font-weight: 700; color: var(--ink); }
.hero__lede strong, .estates .lede strong, .cta .lede strong, .simple .lede strong,
.timeframes__foot strong { font-weight: 700; color: var(--on-photo); }

/* ---------- Sections ---------- */
.section { padding: clamp(84px, 10vw, 136px) 0; }
.section--sand { background: var(--sand); }
.section-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 28px 64px; margin-bottom: clamp(44px, 5vw, 64px); }
.section-head > div { flex: 1 1 520px; min-width: 0; max-width: 700px; }
.section-head > .lede { flex: 0 1 380px; }
.section-head > .btn { flex: none; }

/* Photo-backed sections (hero, estates, final call to action) */
.photo-bg { position: absolute; inset: 0; background: #5a4535; overflow: hidden; }
.photo-bg img { width: 100%; height: 100%; object-fit: cover; }
.photo-bg picture { display: contents; }
.photo-bg::after { content: ""; position: absolute; inset: 0; }

/* Lazy photos fade in once loaded (main.js adds .is-loading) */
img[loading="lazy"] { transition: opacity 0.7s ease; }
img.is-loading { opacity: 0; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 54px; padding: 14px 28px;
  border: 1.5px solid transparent; border-radius: 999px;
  font-family: inherit; font-size: 16px; font-weight: 700; line-height: 1.2; text-decoration: none;
  cursor: pointer;
  transition: background-color 0.3s, border-color 0.3s, color 0.3s, transform 0.3s var(--ease-out);
}
.btn .icon { width: 18px; height: 18px; transition: transform 0.25s var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .btn:hover .icon--arrow { transform: translateX(4px); } }
.btn--lime { background: var(--lime); color: var(--lime-ink); }
.btn--outline { border-color: rgba(251, 245, 234, 0.7); color: var(--on-photo); }
.btn--cream { background: var(--cream); color: var(--ink); min-height: 44px; padding: 10px 20px; font-size: 15px; }
.btn--dark { background: var(--ink); color: var(--cream); }
.btn--block { width: 100%; }
/* Every button gets the same hover: logo-brown fill and a slight grow. Hover only
   applies with a mouse, so on phones the colour doesn't stick after a tap; touch
   screens get the same colour while the button is pressed instead. */
@media (hover: hover) and (pointer: fine) {
  .btn:hover, .btn:focus-visible { background: var(--logo); border-color: var(--logo); color: var(--cream); transform: scale(1.06); }
}
.btn:active { transform: scale(1.02); }
/* Touch screens (phones, tablets): main.js adds .is-pressed when a button is tapped
   and keeps it for a set time. Fill and text change together, like the desktop hover,
   and both return to normal together. Quick fade in, normal fade out. */
.btn.is-pressed { background: var(--logo); border-color: var(--logo); color: var(--cream); transition-duration: 0.08s; }

/* ---------- Header ---------- */
.site-header {
  position: fixed; inset: 0 0 auto 0; z-index: 50;
  background: rgba(160, 108, 76, 0.92);
  background: color-mix(in srgb, var(--tan) 92%, transparent);
  -webkit-backdrop-filter: saturate(1.2) blur(12px);
  backdrop-filter: saturate(1.2) blur(12px);
  border-bottom: 1px solid rgba(251, 245, 234, 0.22);
  transition: background-color 0.35s ease, box-shadow 0.35s ease;
}
.site-header.is-scrolled { background: rgba(138, 90, 59, 0.96); background: color-mix(in srgb, var(--tan-dk) 96%, transparent); box-shadow: 0 10px 30px -14px rgba(0, 0, 0, 0.4); }
.header-inner { height: var(--header-h); display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.brand {
  font-family: var(--serif); font-size: 28px; font-weight: 700; line-height: 1;
  color: var(--cream); text-decoration: none; white-space: nowrap;
}
.brand em { font-weight: 600; }
.brand:hover { color: var(--cream); }
.brand--icon { display: inline-flex; align-items: center; gap: 12px; flex: none; border-radius: 12px; }
.brand--icon img { flex: none; }
.brand__name { font-family: var(--heading); font-size: 20px; font-weight: 700; letter-spacing: -0.03em; color: var(--cream); }
.brand__name em { font-style: italic; font-weight: 400; }
.site-header .brand__name { position: relative; top: -1px; }
/* Desktop: menu links sit right next to the logo; phone number and quote button stay right */
.header-inner > .nav { margin-right: auto; margin-left: 16px; }
.brand--icon img { width: 44px; height: 44px; border-radius: 12px; box-shadow: 0 0 0 1.5px rgba(251, 245, 234, 0.35); }
.nav ul { list-style: none; margin: 0; padding: 0; display: flex; gap: clamp(22px, 2vw, 36px); }
.nav a { position: relative; display: block; padding: 6px 0; color: var(--cream); font-size: 15px; font-weight: 600; text-decoration: none; white-space: nowrap; }
.brand__name, .header-actions .btn { white-space: nowrap; }
.nav a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1.5px;
  background: currentColor; transform: scaleX(0); transform-origin: right; transition: transform 0.3s var(--ease-out);
}
.nav a:hover::after, .nav a[aria-current="page"]::after { transform: scaleX(1); transform-origin: left; }
.header-actions { display: flex; align-items: center; gap: 20px; }
.header-phone { display: inline-flex; align-items: center; gap: 8px; color: var(--cream); font-size: 15px; font-weight: 700; text-decoration: none; white-space: nowrap; transition: color 0.2s; }
.header-phone:hover { color: #fff; }
.header-phone .icon { width: 16px; height: 16px; }
.nav-toggle {
  display: none; width: 44px; height: 44px; padding: 0;
  align-items: center; justify-content: center;
  border: 1px solid rgba(251, 245, 234, 0.4); border-radius: 12px;
  background: transparent; color: var(--cream); cursor: pointer;
  transition: background-color 0.2s, border-color 0.2s;
}
@media (hover: hover) and (pointer: fine) { .nav-toggle:hover { background: rgba(251, 245, 234, 0.1); border-color: rgba(251, 245, 234, 0.7); } }
.nav-toggle .icon--close { display: none; }
.nav-toggle[aria-expanded="true"] .icon--menu { display: none; }
.nav-toggle[aria-expanded="true"] .icon--close { display: block; animation: spin-in 0.3s var(--ease-out); }
@keyframes spin-in { from { opacity: 0; transform: rotate(-90deg) scale(0.6); } }

@media (max-width: 1100px) {
  .nav-toggle { display: inline-flex; }
  .nav {
    position: fixed; top: var(--header-h); left: 0; right: 0;
    max-height: calc(100vh - var(--header-h)); overflow-y: auto;
    padding: 8px 24px 28px;
    background: var(--tan-dk);
    border-bottom: 1px solid rgba(251, 245, 234, 0.18);
    box-shadow: 0 30px 40px -20px rgba(0, 0, 0, 0.45);
    visibility: hidden; opacity: 0; transform: translateY(-10px);
    transition: opacity 0.25s ease, transform 0.3s var(--ease-out), visibility 0s linear 0.3s;
  }
  .nav.is-open { visibility: visible; opacity: 1; transform: none; transition-delay: 0s; }
  .nav ul { flex-direction: column; gap: 0; }
  .nav a { padding: 16px 0; font-size: 18px; border-bottom: 1px solid rgba(251, 245, 234, 0.16); }
  .nav a::after { display: none; }
}
@media (max-width: 760px) { .header-phone { display: none; } }
/* Desktop widths where the full menu, wordmark and phone can't all fit on one line */
@media (min-width: 1101px) and (max-width: 1239px) { .header-phone { display: none; } }
@media (max-width: 480px) {
  .header-actions .btn--cream { display: none; }
}

/* ---------- Hero ---------- */
.hero {
  position: relative; overflow: hidden;
  display: flex; flex-direction: column; justify-content: center;
  min-height: clamp(590px, calc(88vh + 30px), 890px);
  padding-top: calc(var(--header-h) + clamp(40px, 5vw, 72px));
  color: var(--on-photo);
  background: #5a4535;
}
.hero .photo-bg img { object-position: center 60%; }
/* Copy sits in the middle of the photo, so darken it evenly */
.hero .photo-bg::after { background: linear-gradient(180deg, rgba(36, 24, 16, 0.62) 0%, rgba(36, 24, 16, 0.72) 55%, rgba(36, 24, 16, 0.84) 100%); }

/* Page-load motion (thank-you page only; the home hero shows instantly) */
@keyframes settle { from { transform: scale(1.08); } }
@keyframes rise { from { opacity: 0; transform: translateY(20px); } }
.simple .photo-bg img { animation: settle 2.6s var(--ease-out) both; }
.simple__card > * { animation: rise 0.9s var(--ease-out) both; }
.simple__card > :nth-child(1) { animation-delay: 0.05s; }
.simple__card > :nth-child(2) { animation-delay: 0.14s; }
.simple__card > :nth-child(3) { animation-delay: 0.24s; }
.simple__card > :nth-child(4) { animation-delay: 0.34s; }
.simple__card > :nth-child(5) { animation-delay: 0.44s; }
.hero__inner { position: relative; padding-bottom: calc(clamp(64px, 8vw, 112px) + 30px); }
.hero__copy { max-width: 900px; margin: 0 auto; text-align: center; }
.crumbs ol {
  list-style: none; margin: 0 0 30px; padding: 0;
  display: flex; flex-wrap: wrap; justify-content: center; row-gap: 6px;
  font-family: var(--mono); font-size: 12.5px; font-weight: 500;
  letter-spacing: 0.26em; text-transform: uppercase; color: var(--on-photo-2);
}
.crumbs li + li::before { content: "\2192"; margin: 0 0.85em; letter-spacing: 0; opacity: 0.75; }
.crumbs a { color: inherit; text-decoration: none; }
.crumbs a:hover { color: #fff; }
.hero__title {
  margin: 0;
  font-family: var(--heading); font-weight: 700;
  font-size: clamp(40px, 5.8vw, 84px); line-height: calc(1.02em + 2px); letter-spacing: -0.045em;
  color: var(--on-photo);
  text-shadow: 0 2px 30px rgba(30, 20, 12, 0.35);
}
.hero__title span { display: block; }
.hero__title em { font-style: italic; color: #f7ebd2; }
.hero__lede { margin: 28px auto 0; max-width: 640px; font-size: clamp(17px, 1.35vw, 19px); line-height: 1.75; color: var(--on-photo-2); text-shadow: 0 1px 14px rgba(30, 20, 12, 0.4); }
.hero__cta { margin-top: 38px; display: flex; flex-wrap: wrap; justify-content: center; gap: 18px; }
.simple .hero__cta { justify-content: flex-start; }
.hero__proof { list-style: none; margin: 38px 0 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 28px; font-size: 14.5px; font-weight: 700; color: var(--on-photo); }
.hero__proof li { display: flex; align-items: center; gap: 9px; }
.hero__proof .icon { width: 18px; height: 18px; color: var(--lime); }

@media (max-width: 560px) {
  .crumbs ol { font-size: 11px; letter-spacing: 0.2em; }
}

/* Short estimate card beside the headline: desktop only. Below 1000px it's hidden
   and the hero stays centred. */
.hero__card { display: none; }
@media (min-width: 1000px) {
  .hero__inner { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 400px); gap: 56px; align-items: center; }
  .hero__copy { max-width: none; margin: 0; text-align: left; }
  .hero .crumbs ol, .hero .hero__cta, .hero .hero__proof { justify-content: flex-start; }
  .hero .hero__lede { margin-left: 0; }
  .hero__title { font-size: clamp(40px, 4.6vw, 68px); }
  .hero__card { display: block; }
  /* Slightly tighter spacing inside this card so it fits the hero with the "Tell us more" box */
  .hero__card.quote-card { padding: 28px 30px; }
  .hero__card .quote-card__title { font-size: 26px; }
  .hero__card .quote-card__sub { margin: 6px 0 18px; font-size: 15px; }
  .hero__card .form-grid--stack { gap: 12px; }
  .hero__card .field { gap: 6px; }
  .hero__card .field input, .hero__card .field select { min-height: 48px; padding-top: 11px; padding-bottom: 11px; }
  .hero__card .field textarea { min-height: 76px; }
  .hero__card .btn--block { min-height: 50px; }
  .hero__inner { padding-bottom: 84px; }
}
/* Shorter laptop screens: trim the spacing so the whole card stays in view */
@media (min-width: 1000px) and (max-height: 820px) {
  .hero { padding-top: calc(var(--header-h) + 32px); }
  .hero__inner { padding-bottom: 60px; }
  .hero__card.quote-card { padding: 24px 28px; }
  .hero__card .quote-card__sub { margin: 4px 0 14px; }
  .hero__card .form-grid--stack { gap: 10px; }
  .hero__card .field input, .hero__card .field select { min-height: 46px; padding-top: 10px; padding-bottom: 10px; }
  .hero__card .field textarea { min-height: 64px; }
}

/* ---------- Quote card + forms ---------- */
.quote-card {
  background: var(--card); color: var(--ink);
  border-radius: var(--radius-lg); padding: clamp(26px, 3vw, 36px);
  box-shadow: var(--shadow-lg);
}
/* Estimate box: same type scale as the rest of the site (heading font + light italic,
   Manrope body text, bold small labels like the hero ticks) */
.quote-card__title { margin: 0; font-family: var(--heading); font-size: 30px; font-weight: 700; line-height: calc(1.1em + 2px); letter-spacing: -0.035em; }
.quote-card__title em { font-style: italic; font-weight: 400; }
.quote-card__sub { margin: 10px 0 24px; font-size: 16px; line-height: 1.65; color: var(--muted); }

.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.form-grid--stack { grid-template-columns: 1fr; gap: 14px; }
.field { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.field--full, .form-grid > .btn { grid-column: 1 / -1; }
.field label { font-size: 14.5px; font-weight: 700; color: var(--ink); }
.field .req { margin-left: 1px; color: var(--terracotta); }
.field input, .field select, .field textarea {
  width: 100%; min-height: 52px; padding: 13px 15px;
  font: inherit; font-size: 16px; color: var(--ink);
  background: #fff; border: 1px solid var(--line); border-radius: 12px;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.field input::placeholder, .field textarea::placeholder { color: #a3968a; opacity: 1; }
/* Suburb shows a faint "Select your suburb" until one is picked (that option is hidden from the list) */
.field select:invalid { color: #a3968a; }
.field select option { color: var(--ink); }
.field select option[hidden] { display: none; }
@media (hover: hover) and (pointer: fine) { .field input:hover, .field select:hover, .field textarea:hover { border-color: #cdb999; } }
.field textarea { min-height: 120px; resize: vertical; }
/* Dropdowns: chevron sits in a small light-green badge on the right, matching the trust-strip icons */
.field select {
  -webkit-appearance: none; appearance: none; padding-right: 52px; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 28 28'%3E%3Crect width='28' height='28' rx='8' fill='%23e9f0c8'/%3E%3Cpath d='m9.5 12 4.5 4.5 4.5-4.5' fill='none' stroke='%234d5a1c' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center; background-size: 28px 28px;
}
/* Browsers that allow styling the open list (Chrome/Edge 135+): rounded panel,
   roomy options with a hover highlight and a tick on the chosen one */
@supports (appearance: base-select) {
  .field select, .field select::picker(select) { appearance: base-select; }
  .field select { display: flex; align-items: center; background-image: none; padding-right: 12px; }
  .field select::picker-icon {
    content: ""; width: 28px; height: 28px; margin-left: auto; flex: none;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 28 28'%3E%3Crect width='28' height='28' rx='8' fill='%23e9f0c8'/%3E%3Cpath d='m9.5 12 4.5 4.5 4.5-4.5' fill='none' stroke='%234d5a1c' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 28px no-repeat;
    transition: rotate 0.25s var(--ease-out);
  }
  .field select:open::picker-icon { rotate: 180deg; }
  .field select:open { border-color: var(--tan); box-shadow: 0 0 0 4px rgba(160, 108, 76, 0.2); }
  /* Open on whichever side has more room, and never taller than half the screen,
     so the list always fits without the page scrolling to make space */
  .field select::picker(select) {
    position-try-order: most-block-size;
    position-try-fallbacks: flip-block;
    max-height: calc(50dvh - 40px); overflow-y: auto;
    margin-block: 6px; padding: 6px;
    background: #fff; border: 1px solid var(--line); border-radius: 14px;
    box-shadow: 0 2px 4px rgba(42, 35, 32, 0.06), 0 18px 40px -12px rgba(42, 35, 32, 0.3);
  }
  .field option {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 12px; border-radius: 9px; font-size: 16px; color: var(--ink); cursor: pointer;
  }
  .field option::checkmark { order: 1; margin-left: auto; color: var(--terracotta); font-weight: 700; }
  .field option:hover, .field option:focus-visible { background: var(--sand); outline: none; }
  .field option:checked { font-weight: 700; }
  .field option[hidden] { display: none; }
}
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--tan); box-shadow: 0 0 0 4px rgba(160, 108, 76, 0.2);
}
.field__error { display: none; font-size: 13.5px; font-weight: 700; color: var(--error); }
.field.is-invalid input, .field.is-invalid select { border-color: var(--error); }
.field.is-invalid input:focus, .field.is-invalid select:focus { box-shadow: 0 0 0 4px rgba(163, 39, 27, 0.15); }
.field.is-invalid .field__error { display: block; animation: drop-in 0.25s var(--ease-out); }
@keyframes drop-in { from { opacity: 0; transform: translateY(-4px); } }
@media (max-width: 560px) { .form-grid { grid-template-columns: 1fr; } }

/* Phone: fixed +61 box, then the rest of the number (faint 0s as a guide) */
.phone-input { display: flex; gap: 8px; }
.phone-input__prefix {
  display: grid; place-items: center; flex: none; min-width: 64px; padding: 0 12px;
  border: 1px solid var(--line); border-radius: 12px;
  font-size: 16px; font-weight: 600; color: var(--ink);
}
.field .phone-input input { flex: 1; min-width: 0; }
.phone-input input::placeholder { color: #cdbfac; opacity: 1; }
.field.is-invalid .phone-input__prefix { border-color: var(--error); }

/* "Other" suburb: sits inside the Suburb field and slides open (main.js) */
.field[hidden] { display: none; }
.field--other { margin-top: 14px; }

/* ---------- Trust strip ---------- */
.trust { background: var(--card); border-bottom: 1px solid var(--line); }
.trust__list { list-style: none; margin: 0 auto; padding: 30px 24px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px 32px; }
.trust__item { display: flex; align-items: center; gap: 14px; font-size: 15px; font-weight: 700; line-height: 1.35; }
.trust__icon { width: 44px; height: 44px; flex: none; border-radius: 12px; display: grid; place-items: center; background: #e9f0c8; color: #4d5a1c; }
.trust__icon .icon { width: 22px; height: 22px; }
@media (max-width: 960px) { .trust__list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .trust__list { grid-template-columns: 1fr; } }

/* ---------- Grids ---------- */
.grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
@media (max-width: 980px) { .grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .grid-3 { grid-template-columns: 1fr; } }

/* ---------- Service cards (with photos) ---------- */
.svc {
  display: flex; flex-direction: column;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  overflow: hidden; color: inherit; text-decoration: none;
  transition: transform 0.35s var(--ease-out), box-shadow 0.35s ease, border-color 0.35s ease;
}
.svc:focus-visible { transform: translateY(-4px); box-shadow: var(--shadow); border-color: #d2c1a6; color: inherit; }
.svc__img { aspect-ratio: 16 / 11; overflow: hidden; background: #d9cbb5; }
.svc__img img { width: 100%; height: 100%; object-fit: cover; transition: opacity 0.7s ease, transform 0.8s var(--ease-out); }
.svc:focus-visible .svc__img img { transform: scale(1.05); }
.svc__body { padding: 26px 28px 28px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.svc__title { margin: 0; font-family: var(--heading); font-size: 22px; font-weight: 700; line-height: calc(1.2em + 2px); letter-spacing: -0.025em; }
.svc__text { margin: 0; font-size: 16px; line-height: 1.65; color: var(--muted); }
.svc__more { margin-top: auto; padding-top: 14px; display: inline-flex; align-items: center; gap: 6px; font-size: 14.5px; font-weight: 700; color: var(--terracotta); }
.svc__more .icon { width: 16px; height: 16px; transition: transform 0.25s var(--ease-out); }
.svc:focus-visible .svc__more .icon { transform: translateX(4px); }
.svc-note { margin: 36px 0 0; text-align: center; font-size: 16px; color: var(--muted); }

/* ---------- Feature split (image + text) ---------- */
.feature { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px 88px; align-items: center; }
.feature__img { position: relative; border-radius: var(--radius-lg); overflow: hidden; aspect-ratio: 4 / 5; background: #d9cbb5; }
.feature__img img { width: 100%; height: 100%; object-fit: cover; object-position: 28% center; }
.feature__badge {
  position: absolute; left: 20px; bottom: 20px; right: 20px;
  display: flex; align-items: center; gap: 12px;
  padding: 16px 18px; border-radius: 16px;
  background: rgba(251, 245, 234, 0.94); color: var(--ink);
  font-size: 15px; font-weight: 700; line-height: 1.35;
}
.feature__badge .icon { width: 22px; height: 22px; color: var(--terracotta); }
.feature .lede { margin-top: 24px; }
.ticks { list-style: none; margin: 32px 0 0; padding: 0; display: grid; gap: 16px; }
.ticks li { display: flex; gap: 14px; align-items: flex-start; }
.ticks .tick { width: 30px; height: 30px; flex: none; border-radius: 50%; display: grid; place-items: center; background: var(--lime); color: var(--lime-ink); }
.ticks .tick .icon { width: 16px; height: 16px; }
.ticks strong { display: block; font-size: 17px; font-weight: 800; }
.ticks div span { font-size: 15.5px; color: var(--muted); }
@media (max-width: 900px) {
  .feature { grid-template-columns: 1fr; }
  .feature__img { aspect-ratio: 4 / 3; }
}

/* ---------- Estates (photo section) ---------- */
.estates { position: relative; color: var(--on-photo); overflow: hidden; }
.estates .photo-bg::after { background: linear-gradient(90deg, rgba(36, 25, 17, 0.88) 0%, rgba(36, 25, 17, 0.74) 55%, rgba(36, 25, 17, 0.55) 100%); }
.estates .container { position: relative; }
.estates .eyebrow { color: var(--photo-eyebrow); }
.estates .lede { color: var(--on-photo-2); }
/* main.js sets the timeframes box's top margin so its middle lines up with the
   gap between the heading and the paragraph */
.estates__top { position: relative; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); gap: 48px 80px; align-items: start; margin-bottom: clamp(48px, 6vw, 72px); }
.estates__top .lede { margin-top: 26px; max-width: 620px; }
.timeframes { border: 1px solid rgba(251, 245, 234, 0.22); border-radius: var(--radius); padding: 28px 30px; background: rgba(30, 21, 14, 0.4); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.timeframes__label { margin: 0 0 6px; font-family: var(--mono); font-size: 12px; font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase; color: var(--photo-eyebrow); }
.timeframes ul { list-style: none; margin: 0; padding: 0; }
.timeframes li { display: flex; align-items: center; gap: 14px; padding: 16px 0; border-bottom: 1px solid rgba(251, 245, 234, 0.14); font-size: 17px; font-weight: 600; }
.timeframes li:last-child { border-bottom: 0; padding-bottom: 4px; }
.timeframes .icon { color: var(--lime); }
.timeframes__foot { margin: 14px 0 0; font-size: 13.5px; color: var(--on-photo-2); }
.timeframes__help { margin: 12px 0 0; padding-top: 12px; border-top: 1px solid rgba(251, 245, 234, 0.14); font-size: 13.5px; color: var(--on-photo-2); }
.timeframes__help strong { color: var(--on-photo); }
.timeframes__help a { color: var(--photo-eyebrow); text-underline-offset: 3px; }
.timeframes__help a:hover { color: #fff; }
.step { padding: 30px; border: 1px solid rgba(251, 245, 234, 0.2); border-radius: var(--radius); background: rgba(30, 21, 14, 0.35); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
/* Same type as the phone number in the estimate section */
.step__num { font-family: var(--heading); font-weight: 700; font-size: 52px; line-height: 0.9; letter-spacing: -0.02em; color: var(--lime); }
.step__title { margin: 18px 0 8px; font-family: var(--heading); font-size: 19px; font-weight: 700; letter-spacing: -0.02em; }
.step__text { margin: 0; font-size: 15.5px; line-height: 1.65; color: var(--on-photo-2); }
@media (max-width: 980px) {
  .estates__top { grid-template-columns: 1fr; align-items: start; }
  .estates .photo-bg::after { background: rgba(36, 25, 17, 0.84); }
}

/* ---------- Process ---------- */
.process { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; position: relative; }
.process::before { content: ""; position: absolute; left: 28px; right: 28px; top: 28px; height: 1px; background: #d6c6ab; transform-origin: left; }
/* The connecting line draws across once the steps scroll into view */
.js .process::before { transform: scaleX(0); transition: transform 1.4s var(--ease-out) 0.2s; }
.js .process.is-visible::before { transform: none; }
.process li { position: relative; }
.process__num {
  width: 56px; height: 56px; border-radius: 50%;
  display: grid; place-items: center; position: relative; z-index: 1;
  background: var(--card); border: 1px solid var(--line); color: var(--terracotta);
}
.process__num .icon { width: 24px; height: 24px; }
.process h3 { margin: 22px 0 8px; font-family: var(--heading); font-size: 19px; font-weight: 700; letter-spacing: -0.02em; }
.process p { margin: 0; font-size: 15.5px; line-height: 1.65; color: var(--muted); }
@media (max-width: 900px) {
  .process { grid-template-columns: 1fr; gap: 28px; }
  .process::before { left: 28px; right: auto; top: 28px; bottom: 28px; width: 1px; height: auto; transform-origin: top; }
  .js .process::before { transform: scaleY(0); }
  .process li { display: grid; grid-template-columns: 56px 1fr; column-gap: 20px; }
  .process h3 { margin-top: 12px; }
  .process p { grid-column: 2; }
}

/* ---------- Areas ---------- */
/* Heading and paragraph stack on the left. The location list sits to the right with
   its middle level with the gap between them: it starts at the paragraph's row, then
   shifts up by half its own height plus half the 28px row gap. On narrower side-by-side
   screens the column gap and the list's nudge to the right shrink so the chips still fit. */
.areas { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 28px clamp(40px, 6vw, 80px); }
.areas__head { grid-column: 1; grid-row: 1; container-type: inline-size; }
.areas .lede { grid-column: 1; grid-row: 2; margin-top: 0; }
.areas__list { grid-column: 2; grid-row: 2; align-self: start; margin-left: clamp(0px, calc((100vw - 900px) * 0.12), 40px); translate: 0 calc(-50% - 14px); }
/* "northern growth corridor" stays on one line: the heading scales to its column width */
.areas__title { font-size: min(56px, 8.3cqi); }
.areas__title em { display: block; white-space: nowrap; }
.chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 12px; }
.chip {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 48px; padding: 10px 22px; border-radius: 999px;
  background: var(--card); border: 1px solid #d6c6ab; color: var(--ink);
  font-size: 15.5px; font-weight: 700;
}
.chip .icon { width: 16px; height: 16px; color: var(--terracotta); }
.areas__note { margin: 22px 0 0; padding-left: 3px; font-size: 15px; color: var(--muted); }
@media (max-width: 900px) {
  .areas { grid-template-columns: 1fr; }
  .areas__head, .areas .lede, .areas__list { grid-column: auto; grid-row: auto; margin-left: 0; translate: none; }
}

/* ---------- Split panels (suburb pages) ---------- */
.split { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; }
.split__panel { border-radius: var(--radius); background: var(--card); border: 1px solid var(--line); overflow: hidden; }
.split__img { aspect-ratio: 16 / 9; overflow: hidden; background: #d9cbb5; }
.split__img img { width: 100%; height: 100%; object-fit: cover; transition: opacity 0.7s ease, transform 0.8s var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .split__panel:hover .split__img img { transform: scale(1.04); } }
.split__body { padding: clamp(26px, 3vw, 36px); }
.split__panel h3 { margin: 0 0 12px; font-family: var(--heading); font-size: 24px; font-weight: 700; line-height: calc(1.15em + 2px); letter-spacing: -0.03em; }
.split__panel p { margin: 0 0 16px; color: var(--muted); }
.split__panel ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.split__panel li { display: flex; gap: 10px; align-items: flex-start; font-size: 15.5px; font-weight: 600; }
.split__panel li .icon { width: 18px; height: 18px; margin-top: 3px; color: var(--terracotta); }
@media (max-width: 860px) { .split { grid-template-columns: 1fr; } }

/* ---------- FAQ ---------- */
.faq { max-width: 900px; margin: 0 auto; }
.faq .display { margin-bottom: 40px; }
/* flow-root keeps the answer's spacing inside the item, so the slide animation measures it consistently */
.faq details { display: flow-root; border-top: 1px solid var(--line); }
.faq details:last-of-type { border-bottom: 1px solid var(--line); }
.faq summary {
  display: flex; justify-content: space-between; align-items: center; gap: 24px;
  padding: 26px 0; cursor: pointer; list-style: none;
  font-size: clamp(18px, 1.5vw, 20px); font-weight: 700; line-height: 1.4;
  transition: color 0.2s;
}
.faq summary::-webkit-details-marker { display: none; }
@media (hover: hover) and (pointer: fine) { .faq summary:hover { color: var(--terracotta); } }
.faq summary .icon { width: 22px; height: 22px; color: var(--terracotta); transition: transform 0.35s var(--ease-out); }
.faq details[open] summary .icon { transform: rotate(135deg); }
.faq details.is-closing summary .icon { transform: none; }
.faq details p { margin: -6px 0 26px; max-width: 760px; font-size: 16.5px; line-height: 1.75; color: var(--muted); }
.faq details[open] p { animation: drop-in 0.35s var(--ease-out); }

/* ---------- Final call to action (photo section) ---------- */
.cta { position: relative; color: var(--on-photo); overflow: hidden; }
.cta .photo-bg::after { background: linear-gradient(90deg, rgba(36, 25, 17, 0.86) 0%, rgba(36, 25, 17, 0.7) 50%, rgba(36, 25, 17, 0.55) 100%); }
.cta__inner { position: relative; display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 56px 80px; align-items: center; }
.cta .eyebrow { color: var(--photo-eyebrow); }
.cta .lede { margin-top: 24px; color: var(--on-photo-2); }
.cta__phone { display: inline-flex; align-items: center; gap: 14px; margin-top: 32px; font-family: var(--heading); font-size: clamp(30px, 3vw, 40px); font-weight: 700; letter-spacing: -0.02em; color: var(--on-photo); text-decoration: none; transition: color 0.2s; }
.cta__phone:hover { color: #fff; }
.cta__phone .icon { width: 28px; height: 28px; color: var(--lime); transition: transform 0.3s var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .cta__phone:hover .icon { transform: rotate(-12deg) scale(1.1); } }
.cta__hours { margin: 6px 0 0; font-size: 14.5px; font-weight: 600; color: var(--on-photo-2); }
@media (max-width: 980px) {
  .cta__inner { grid-template-columns: 1fr; }
  /* Lighter than desktop's darkest edge: the dusk photo is already dark, so a heavy
     overlay hid it. Still dark enough behind the text, darkest at the top. */
  .cta .photo-bg::after { background: linear-gradient(180deg, rgba(36, 25, 17, 0.62) 0%, rgba(36, 25, 17, 0.5) 100%); }
}

/* ---------- Simple page (thank you) ---------- */
.simple { position: relative; min-height: 100vh; display: flex; align-items: center; padding: calc(var(--header-h) + 64px) 0 80px; color: var(--on-photo); overflow: hidden; }
.simple .photo-bg::after { background: rgba(36, 25, 17, 0.72); }
.simple .container { position: relative; }
.simple__card { max-width: 680px; }
.simple__card .eyebrow { color: var(--photo-eyebrow); }
.simple__card .lede { margin-top: 24px; color: var(--on-photo-2); }
.simple__steps { margin: 32px 0 0; padding: 0; list-style: none; display: grid; gap: 14px; }
.simple__steps li { display: flex; gap: 14px; align-items: flex-start; font-weight: 600; }
.simple__steps .icon { color: var(--lime); margin-top: 3px; }

/* ---------- Footer ---------- */
.site-footer { background: var(--night); color: #cfc3b3; padding: 72px 0 36px; font-size: 15px; }
.footer-grid { display: grid; grid-template-columns: minmax(0, 1.6fr) repeat(2, minmax(0, 1fr)); gap: 40px 64px; }
.site-footer .brand { font-size: 30px; }
.footer-about { margin: 16px 0 0; max-width: 460px; line-height: 1.75; }
.footer-title { margin: 0 0 14px; font-family: var(--mono); font-size: 12px; font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase; color: var(--photo-eyebrow); }
.footer-links { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.footer-links span { display: inline-block; padding: 6px 0; color: var(--cream); }
.footer-links a { display: inline-block; padding: 6px 0; color: var(--cream); text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 4px; transition: color 0.2s, text-decoration-color 0.2s; }
@media (hover: hover) and (pointer: fine) { .footer-links a:hover { color: #fff; text-decoration-color: currentColor; } }
.footer-bottom { margin-top: 56px; padding-top: 24px; border-top: 1px solid rgba(251, 245, 234, 0.12); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 24px; font-size: 13.5px; }
.footer-bottom a { color: inherit; }
.footer-legal { margin: 0; max-width: 720px; }
.footer-contact { margin: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 12px; }
.footer-contact a { color: var(--cream); font-weight: 700; }
.nowrap { white-space: nowrap; }

/* Devices that can't make calls (tablets, laptops, desktops: html.no-calls, set in <head>):
   the phone number is shown as plain text, never as something to click. main.js removes
   the link (leaving data-tel); the [href] versions cover the moment before it runs. */
.no-calls a[href^="tel:"], .no-calls a[data-tel] { pointer-events: none; cursor: default; }
.no-calls .btn[href^="tel:"], .no-calls .btn[data-tel] {
  background: transparent; border-color: transparent; transform: none;
  padding-left: 10px; padding-right: 10px;
}
.no-calls .callbar a[href^="tel:"], .no-calls .callbar a[data-tel] { display: none; }
.no-calls .footer-contact a { text-decoration: none; }

/* Brief lime ring on the card a link takes you to (estimate boxes, service cards) */
@keyframes landed { 0% { box-shadow: 0 0 0 0 rgba(184, 203, 92, 0.9); } 100% { box-shadow: 0 0 0 16px rgba(184, 203, 92, 0); } }
.is-landed { animation: landed 1.1s var(--ease-out) 0.15s; }
@media (max-width: 860px) { .footer-grid { grid-template-columns: 1fr 1fr; } .footer-grid > :first-child { grid-column: 1 / -1; } }

/* ---------- Mobile call bar ---------- */
.callbar {
  position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 60;
  display: none; gap: 8px; padding: 8px;
  border-radius: 999px; background: rgba(38, 32, 28, 0.94);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  box-shadow: 0 12px 30px -10px rgba(0, 0, 0, 0.55);
  transition: transform 0.3s ease, opacity 0.3s ease;
}
.callbar .btn { flex: 1; min-height: 50px; padding: 10px 14px; font-size: 15px; }
.callbar.is-hidden { transform: translateY(140%); opacity: 0; pointer-events: none; }
@media (max-width: 760px) {
  .callbar { display: flex; }
  body.has-callbar { padding-bottom: 84px; }
}

/* ---------- Reveal on scroll (only when JS is running) ---------- */
.js .reveal { opacity: 0; transform: translateY(24px); transition: opacity 0.8s ease, transform 0.9s var(--ease-out); }
.js .reveal.is-visible { opacity: 1; transform: none; }
.js .reveal-delay-1 { transition-delay: 0.08s; }
.js .reveal-delay-2 { transition-delay: 0.16s; }
.js .reveal-delay-3 { transition-delay: 0.24s; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
  .js .reveal { opacity: 1; transform: none; }
  .js .process::before { transform: none; }
}