:root {
  --ink: #1c2c22;
  --forest: #173f31;
  --green: #447a52;
  --lime: #dce98a;
  --sage: #dfe6c2;
  --cream: #f5f0e6;
  --paper: #fffaf2;
  --ochre: #e3b365;
  --orange: #d76d38;
  --line: rgba(23, 61, 45, 0.16);
  --shadow-soft: 0 18px 34px rgba(23, 61, 45, 0.08);
  --shadow-strong: 0 34px 52px rgba(23, 61, 45, 0.14);
  --serif: 'Fraunces', Georgia, serif;
  --sans: 'DM Sans', sans-serif;
}

  width: calc(100% - 8vw);
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background:
    var(--cream);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.5;
}
::selection { background: rgba(68, 122, 82, 0.18); }
a { color: inherit; text-decoration: none; }
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible { outline: 3px solid rgba(68, 122, 82, 0.36); outline-offset: 3px; }

.site-header {
  align-items: center;
  display: flex;
  justify-content: space-between;
  margin: auto;
  max-width: 1500px;
  padding: 24px 4vw;
  position: sticky;
  top: 0;
  z-index: 20;
  background: rgba(245, 240, 230, 0.72);
  backdrop-filter: blur(12px);
}
.brand { align-items: center; display: flex; gap: 10px; line-height: 0.86; }
.brand-mark { align-items: center; background: var(--lime); border: 3px solid var(--green); border-radius: 50%; display: flex; height: 47px; justify-content: center; overflow: hidden; position: relative; transform: none !important; width: 47px; box-shadow: 0 10px 18px rgba(23, 61, 45, 0.08); }
.brand-mark img { display: block; height: 100%; object-fit: cover; transform: none !important; width: 100%; }
.brand-name { font-family: var(--serif); font-size: 15px; font-weight: 600; }
.brand-name b { color: var(--green); font-size: 17px; }
.nav-links { display: flex; gap: 36px; margin-left: auto; margin-right: 40px; }
.nav-links a, .footer-links a { font-size: 14px; font-weight: 700; letter-spacing: 0.02em; }
.nav-links a:hover, .footer-links a:hover, .text-link:hover { color: var(--green); }
.header-cta, .button { border-radius: 999px; font-size: 14px; font-weight: 700; padding: 13px 19px; }
.header-cta { background: var(--forest); color: var(--cream); box-shadow: var(--shadow-soft); }
.action-icon { display: inline-block; height: 15px; margin-left: 8px; vertical-align: -3px; width: 15px; }
.action-icon svg { height: 100%; stroke-width: 2.4; width: 100%; }

.hero {
  display: grid;
  grid-template-columns: 43% 57%;
  margin: auto;
  max-width: 1500px;
  min-height: 600px;
  padding: 52px 4vw 70px;
  align-items: center;
}
.hero-copy { align-self: center; padding-bottom: 20px; max-width: 560px; }
.eyebrow { align-items: center; color: var(--green); display: flex; font-size: 11px; font-weight: 700; gap: 9px; letter-spacing: 0.11em; text-transform: uppercase; }
.eyebrow-dot { background: var(--orange); border-radius: 50%; height: 8px; width: 8px; box-shadow: 0 0 0 7px rgba(215, 109, 56, 0.12); }
.hero h1, .section h2 { font-family: var(--serif); font-size: clamp(48px, 6vw, 86px); letter-spacing: -0.04em; line-height: 0.97; margin: 25px 0; }
.hero h1 em, .section h2 em { color: var(--green); font-style: normal; }
.hero-intro { font-size: 18px; max-width: 390px; }
.hero-actions { align-items: center; display: flex; gap: 25px; margin-top: 34px; }
.button { border: 0; cursor: pointer; display: inline-block; transition: transform 0.2s ease, background 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease; }
.button-dark { background: var(--forest); color: var(--paper); box-shadow: 0 10px 20px rgba(23, 61, 45, 0.12); }
.button-dark:hover { background: var(--green); transform: translateY(-2px); box-shadow: 0 16px 26px rgba(23, 61, 45, 0.16); }
.button:disabled { cursor: wait; opacity: 0.82; transform: none; }
.text-link { border-bottom: 1px solid currentColor; font-size: 14px; font-weight: 700; padding-bottom: 4px; transition: color 0.2s; }
.hero-art {
  background: linear-gradient(135deg, #cfe785 0%, #b8d96d 48%, #9dc65d 100%);
  border: 1px solid rgba(23, 61, 45, 0.08);
  border-radius: 18px 18px 14px 14px;
  box-shadow: var(--shadow-strong);
  min-height: 460px;
  overflow: hidden;
  position: relative;
  isolation: isolate;
}
.hero-art:before { background: rgba(255, 253, 245, 0.28); content: ''; height: 180%; left: 38%; position: absolute; top: -20%; transform: rotate(24deg); width: 1px; }
.hero-art:after {
  content: '';
  position: absolute;
  inset: 18px 18px auto auto;
  width: 170px;
  height: 170px;
  border-radius: 50%;
  background: rgba(255,255,255,0.1);
}
.sun { background: #f2c66f; border-radius: 50%; height: 115px; position: absolute; right: 16%; top: 13%; width: 115px; box-shadow: 0 0 0 12px rgba(242, 198, 111, 0.18); }
.ground { background: #3c7e48; border-radius: 50% 50% 0 0; bottom: -12%; height: 45%; left: -5%; position: absolute; transform: rotate(-5deg); width: 115%; }
.plant { bottom: 23%; position: absolute; z-index: 1; }
.plant:before, .plant:after { background: #247044; border-radius: 100% 0 100% 0; content: ''; height: 36px; position: absolute; width: 21px; }
.plant:before { left: -22px; top: -28px; transform: rotate(-35deg); }
.plant:after { right: -22px; top: -9px; transform: rotate(60deg); }
.plant span { background: #247044; border-radius: 100% 0 100% 0; display: block; height: 47px; transform: rotate(7deg); width: 27px; }
.plant i { background: var(--orange); border-radius: 50%; height: 14px; left: -12px; position: absolute; top: 7px; width: 14px; }
.plant b { background: #f7bd5c; border-radius: 50%; height: 11px; position: absolute; right: -15px; top: -20px; width: 11px; }
.plant-one { left: 31%; transform: scale(1.45); }
.plant-two { bottom: 19%; left: 62%; transform: scale(1.05); }
.plant-three { bottom: 29%; left: 78%; transform: scale(0.72); }
.art-note { background: var(--paper); font-size: 12px; line-height: 1.15; padding: 9px 11px; position: absolute; z-index: 2; }
.art-note b { color: var(--green); font-family: var(--serif); font-size: 16px; }
.note-one { left: 9%; top: 14%; transform: rotate(-5deg); }
.note-two { right: 6%; top: 42%; transform: rotate(5deg); }
.trowel { bottom: 12%; left: 15%; position: absolute; transform: rotate(-28deg); z-index: 2; }
.blade { border-bottom: 55px solid #e8eee3; border-left: 20px solid transparent; border-right: 20px solid transparent; height: 0; width: 0; }
.handle { background: var(--orange); border-radius: 8px; height: 67px; margin-left: 12px; margin-top: -3px; width: 15px; }

.ticker { background: var(--orange); color: var(--paper); font-size: 13px; font-weight: 700; letter-spacing: 0.12em; overflow: hidden; padding: 10px 0; }
.ticker-track { animation: ticker-scroll 10s linear infinite; animation-play-state: running; display: flex; transform: translate3d(0, 0, 0); will-change: transform; width: max-content; }
.ticker-set { align-items: center; display: flex; flex: 0 0 auto; gap: 28px; padding: 0 12px; }
.ticker-photo { border: 2px solid rgba(255, 250, 242, 0.9); border-radius: 50%; display: block; flex: 0 0 34px; height: 34px; object-fit: cover; width: 34px; }
@keyframes ticker-scroll { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-25%, 0, 0); } }
.section { margin: auto; max-width: 1500px; padding: 115px 4vw; }
.section-heading { display: flex; justify-content: space-between; }
.section h2 { font-size: clamp(42px, 5vw, 68px); margin-top: 10px; }
.section-heading h2 { margin-right: 12%; }
.service-grid { display: grid; gap: 18px; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 46px; }
.service-card {
  background: rgba(255, 250, 242, 0.82);
  border: 1px solid rgba(23, 61, 45, 0.08);
  border-radius: 18px;
  box-shadow: var(--shadow-soft);
  min-height: 285px;
  padding: 29px;
  position: relative;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.service-card:nth-child(2) { transform: translateY(16px); }
.service-card:nth-child(3) { transform: translateY(-10px); }
.service-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-strong);
  border-color: rgba(68, 122, 82, 0.26);
}
.service-card-lime { background: linear-gradient(180deg, rgba(220, 233, 138, 0.9), rgba(220, 233, 138, 1)); }
.service-number { font-size: 12px; font-weight: 700; }
.service-icon { align-items: center; color: var(--orange); display: flex; height: 42px; margin: 38px 0 12px; width: 52px; }
.service-icon svg { height: 40px; stroke-width: 1.8; width: 40px; }
.service-card h3 { font-family: var(--serif); font-size: 24px; margin: 0 0 9px; }
.service-card p { font-size: 14px; margin: 0; max-width: 285px; }

.story {
  align-items: center;
  background: linear-gradient(135deg, #5f9f55 0%, #24734f 100%);
  box-sizing: border-box;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 28px;
  box-shadow: 0 24px 55px rgba(23, 61, 45, 0.16);
  color: var(--cream);
  display: grid;
  gap: 10%;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1fr);
  margin: 48px auto;
  max-width: 1320px;
  padding-left: 10%;
  padding-right: 10%;
  position: relative;
  overflow: hidden;
  min-width: 0;
  width: calc(100% - 8vw);
}
.story:after { border: 1px solid rgba(255, 255, 255, 0.16); border-radius: 20px; content: ''; inset: 12px; pointer-events: none; position: absolute; }
.story:before {
  background: radial-gradient(circle, rgba(220, 233, 138, 0.2) 0%, rgba(220, 233, 138, 0) 70%);
  border-radius: 50%;
  content: '';
  height: 560px;
  left: 8%;
  position: absolute;
  top: 12%;
  width: 560px;
}
.story-stamp {
  align-items: center;
  border: 2px solid var(--lime);
  border-radius: 50%;
  color: var(--lime);
  display: flex;
  flex-direction: column;
  font-size: 17px;
  font-weight: 700;
  height: 245px;
  justify-content: center;
  letter-spacing: 0.1em;
  line-height: 1.3;
  position: relative;
  transform: rotate(-10deg);
  width: 245px;
  box-shadow: 0 0 0 12px rgba(220, 233, 138, 0.1);
}
.story-stamp b { font-family: var(--serif); font-size: 29px; }
.story-copy { min-width: 0; position: relative; }
.story-copy .eyebrow { margin-bottom: 18px; }
.story-copy h2 { margin-top: 0; margin-bottom: 28px; }
.story-copy h2 em { color: var(--lime); }
.story-copy p { max-width: 480px; }
.story-copy .text-link { color: var(--lime); display: inline-block; margin-top: 15px; }
.contact { display: grid; gap: 10%; grid-template-columns: 50% 40%; padding-bottom: 130px; }
.contact { align-items: stretch; }
.contact-heading { display: flex; flex-direction: column; }
.contact-heading h2 { margin-bottom: 24px; }
.contact-heading > p:last-child { max-width: 340px; }
.contact-team-gallery { align-items: end; display: flex; gap: 10px; justify-content: center; margin-top: auto; min-height: 202px; overflow: visible; padding-top: 42px; width: 100%; }
.contact-team-gallery figure { aspect-ratio: 3 / 4; border: 4px solid var(--paper); border-radius: 16px; box-shadow: 0 12px 22px rgba(23, 61, 45, 0.2); flex: 0 0 96px; height: auto; margin: 0; overflow: hidden; position: relative; transform: rotate(-8deg); transition: flex-basis 0.35s cubic-bezier(0.2, 0.8, 0.2, 1), flex-grow 0.35s cubic-bezier(0.2, 0.8, 0.2, 1), transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.35s ease, z-index 0s linear 0.35s; }
.contact-team-gallery figure:nth-child(2) { transform: translateY(10px) rotate(2deg); }
.contact-team-gallery figure:nth-child(3) { transform: rotate(8deg); }
.contact-team-gallery figure:hover { flex-basis: 220px; flex-grow: 0; box-shadow: 0 22px 32px rgba(23, 61, 45, 0.3); transform: translateY(-28px) rotate(0deg); z-index: 3; }
.contact-team-gallery:has(figure:nth-child(1):hover) figure:nth-child(2) { transform: translateX(7px) translateY(7px) rotate(8deg); }
.contact-team-gallery:has(figure:nth-child(1):hover) figure:nth-child(3) { transform: translateX(12px) rotate(13deg); }
.contact-team-gallery:has(figure:nth-child(2):hover) figure:nth-child(1) { transform: translateX(-7px) translateY(7px) rotate(-13deg); }
.contact-team-gallery:has(figure:nth-child(2):hover) figure:nth-child(3) { transform: translateX(7px) rotate(13deg); }
.contact-team-gallery:has(figure:nth-child(3):hover) figure:nth-child(1) { transform: translateX(-12px) rotate(-13deg); }
.contact-team-gallery:has(figure:nth-child(3):hover) figure:nth-child(2) { transform: translateX(-7px) translateY(7px) rotate(-8deg); }
.contact-team-gallery img { display: block; height: 100%; object-fit: cover; width: 100%; }
.builder-page { display: block; }
.builder-page .contact-heading { margin: 0 auto; max-width: 760px; text-align: center; }
.builder-page .contact-heading .eyebrow { justify-content: center; }
.builder-page .contact-heading h1 { font-family: var(--serif); font-size: clamp(48px, 6vw, 86px); letter-spacing: -0.04em; line-height: 0.97; margin: 20px 0 24px; }
.builder-page .contact-heading h1 em { color: var(--green); font-style: normal; }
.builder-page .contact-heading > p:last-child { margin-left: auto; margin-right: auto; max-width: 520px; }
.builder-page .quote-form { margin: 58px auto 0; max-width: none; }
.builder-page .choice-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.quote-form {
  display: flex;
  flex-direction: column;
  gap: 22px;
  background: rgba(255, 250, 242, 0.7);
  border: 1px solid rgba(23, 61, 45, 0.08);
  border-radius: 18px;
  box-shadow: var(--shadow-soft);
  padding: 28px;
}
.quote-form label { font-size: 12px; font-weight: 700; }
.quote-form input, .quote-form textarea { background: transparent; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; color: var(--ink); display: block; font: inherit; margin-top: 7px; outline: 0; padding: 10px 0; resize: vertical; width: 100%; }
.quote-form input:focus, .quote-form textarea:focus { border-color: var(--green); }
.choice-group { border: 1px solid var(--line); border-radius: 12px; margin: 0; padding: 18px; background: rgba(220, 233, 138, 0.08); }
.choice-group legend { font-size: 12px; font-weight: 700; padding: 0 8px; }
.choice-group legend span, .image-attachment span { border: 1px solid rgba(59, 155, 67, 0.45); border-radius: 4px; color: var(--green); display: inline-block; font-size: 9px; font-weight: 700; letter-spacing: 0.05em; margin-left: 5px; padding: 2px 6px; text-transform: uppercase; vertical-align: 1px; }
.choice-grid { display: grid; gap: 10px 12px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.choice {
  align-items: center;
  background: rgba(255, 250, 242, 0.9);
  border: 1px solid transparent;
  border-radius: 10px;
  cursor: pointer;
  display: flex;
  font-size: 12px !important;
  font-weight: 500 !important;
  gap: 8px;
  min-height: 42px;
  padding: 9px 10px;
  transition: background 0.2s, border-color 0.2s, transform 0.2s, box-shadow 0.2s;
}
.choice:hover { border-color: rgba(59, 155, 67, 0.45); transform: translateY(-1px); box-shadow: 0 10px 18px rgba(23, 61, 45, 0.05); }
.choice:has(input:checked) { background: var(--lime); border-color: var(--green); font-weight: 700 !important; }
.choice input { accent-color: var(--green); flex: 0 0 auto; height: 16px; margin: 0; width: 16px; }
.choice > svg { color: var(--orange); height: 17px; stroke-width: 2; width: 17px; }
.choice > .tool-icon { fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; }
.choice > img.tool-icon { flex: 0 0 86px; height: 58px; object-fit: contain; width: 86px; }
.image-attachment input { border: 0; cursor: pointer; font-size: 13px; padding: 8px 0; }
.image-attachment input::file-selector-button { background: var(--lime); border: 0; border-radius: 99px; color: var(--ink); cursor: pointer; font: inherit; font-weight: 700; margin-right: 12px; padding: 9px 13px; }
.quote-form .button { align-self: flex-start; margin-top: 7px; }
.form-note { font-size: 11px; margin: 0; opacity: 0.65; }
.form-note a, .form-confirmation a { color: var(--green); font-weight: 700; }
.form-status { color: var(--forest); font-size: 11px; font-weight: 700; letter-spacing: 0.04em; margin: -6px 0 0; text-transform: uppercase; }
.privacy-consent { align-items: flex-start; display: flex; font-size: 11px !important; font-weight: 400 !important; gap: 9px; line-height: 1.45; }
.privacy-consent input { accent-color: var(--green); flex: 0 0 auto; height: 15px; margin: 1px 0 0; width: 15px; }
.privacy-consent a, .privacy-notice a { color: var(--green); font-weight: 700; }
.form-confirmation { background: var(--lime); font-family: var(--serif); font-size: 20px; margin: 0; padding: 24px; }
.site-footer { align-items: center; background: linear-gradient(180deg, rgba(220, 233, 138, 0.9), rgba(220, 233, 138, 1)); display: flex; justify-content: space-between; padding: 34px 5vw; }
.footer-center { font-family: var(--serif); font-size: 15px; }
.footer-links { display: flex; gap: 25px; }
.privacy-notice {
  background: linear-gradient(180deg, #17251e 0%, #10261b 100%);
  color: var(--paper);
  font-size: 12px;
  line-height: 1.6;
  padding: 35px 5vw;
}
.privacy-notice h2 { color: var(--lime); font-family: var(--serif); font-size: 24px; margin: 0 0 10px; }
.privacy-notice p { margin: 7px 0; max-width: 760px; }
.privacy-notice a { color: var(--lime); }
.reveal { animation: rise 0.7s both; }
.reveal-delay { animation-delay: 0.15s; }
.reveal-delay-two { animation-delay: 0.3s; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

@keyframes rise {
  from { opacity: 0; transform: translateY(18px); }
  to { opacity: 1; transform: none; }
}

@media (max-width: 760px) {
  .site-header { padding: 16px 6vw; }
  .brand { gap: 8px; }
  .brand-mark { height: 40px; width: 40px; }
  .brand-name { font-size: 13px; }
  .brand-name b { font-size: 15px; }
  .nav-links { display: none; }
  .header-cta { font-size: 11px; padding: 10px 12px; }
  .hero { display: block; padding: 42px 6vw 55px; }
  .hero h1 { font-size: clamp(48px, 14vw, 58px); margin: 20px 0; }
  .hero-intro { font-size: 16px; }
  .hero-art { margin-top: 42px; min-height: 340px; }
  .ticker-set { gap: 18px; padding: 0 12px; }
  .ticker-photo { flex-basis: 30px; height: 30px; width: 30px; }
  .section { padding: 68px 6vw; }
  .section-heading { display: block; }
  .section-heading h2 { margin-right: 0; }
  .service-grid, .contact, .story { grid-template-columns: 1fr; }
  .service-grid { gap: 12px; }
  .service-card { min-height: 0; }
  .story { border-radius: 22px; gap: 55px; margin: 28px 5vw; padding: 80px 10vw 155px; }
  .story:before { height: 230px; left: -70px; top: 6%; width: 230px; }
  .story-stamp { height: 190px; width: 190px; }
  .story-stamp b { font-size: 23px; }
  .story-copy h2 { font-size: clamp(38px, 10vw, 52px); }
  .site-footer { align-items: flex-start; flex-direction: column; gap: 25px; padding: 35px 6vw; }
  .footer-center { max-width: 220px; }
  .footer-links { gap: 18px; }
  .hero-actions { align-items: flex-start; flex-direction: column; gap: 18px; }
  .contact { gap: 38px; padding-bottom: 82px; }
  .contact-heading h2 { font-size: clamp(42px, 12vw, 52px); margin-bottom: 18px; }
  .contact-heading > p:last-child { font-size: 15px; }
  .contact-team-gallery { margin-top: 34px; padding-top: 0; }
  .builder-page .contact-heading h1 { font-size: clamp(48px, 14vw, 58px); }
  .builder-page .quote-form { margin-top: 42px; }
  .builder-page .choice-grid { grid-template-columns: 1fr; }
  .quote-form { gap: 19px; }
  .quote-form label:not(.privacy-consent) { font-size: 11px; }
  .quote-form input, .quote-form textarea { font-size: 16px; min-height: 45px; padding: 10px 0; }
  .quote-form textarea { min-height: 92px; }
  .privacy-consent { background: rgba(23, 61, 45, 0.05); border-radius: 4px; gap: 10px; padding: 12px; }
  .privacy-consent input { height: 18px; width: 18px; }
  .quote-form .button { margin-top: 2px; min-height: 46px; padding-left: 20px; padding-right: 20px; }
  .form-note { line-height: 1.5; }
  .privacy-notice { font-size: 12px; padding: 30px 6vw 34px; }
  .privacy-notice h2 { font-size: 22px; }
}

/* Home hero: photographic, bright, and intentionally separate from the builder UI. */
.home-page {
  background: var(--cream);
  overscroll-behavior-y: none;
}

.home-page .site-header {
  background: linear-gradient(110deg, rgba(18, 58, 38, 0.72), rgba(37, 91, 54, 0.54));
  border: 1px solid rgba(255, 255, 255, 0.42);
  border-radius: 22px;
  box-shadow: 0 16px 40px rgba(8, 27, 14, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.3), inset 0 -1px 0 rgba(8, 27, 14, 0.2);
  color: #fff;
  left: 50%;
  margin: 0;
  max-width: 1160px;
  padding: 14px 18px 14px 22px;
  position: fixed;
  top: 20px;
  transform: translateX(-50%);
  width: calc(100% - 48px);
  -webkit-backdrop-filter: blur(18px) saturate(125%);
  backdrop-filter: blur(18px) saturate(125%);
}

.home-page .brand-mark {
  background: rgba(255, 255, 255, 0.84);
  border-color: rgba(255, 255, 255, 0.78);
  box-shadow: 0 8px 18px rgba(8, 27, 14, 0.12);
}

.home-page .brand-name,
.home-page .brand-name b,
.home-page .nav-links a {
  color: #fff;
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.2);
}

.home-page .nav-links a:hover { color: #e3f5d0; }

.home-page .header-cta {
  background: rgba(8, 42, 27, 0.42);
  border: 1px solid rgba(255, 255, 255, 0.38);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.24);
  color: #fff;
}

.home-page .header-cta:hover { background: rgba(255, 255, 255, 0.3); }

.home-page .hero {
  align-items: center;
  background-image: linear-gradient(180deg, rgba(5, 30, 12, 0.18), rgba(5, 30, 12, 0.34)), url("https://images.unsplash.com/photo-1490750967868-88aa4486c946?auto=format&fit=crop&w=2200&q=88");
  background-position: center;
  background-size: cover;
  box-sizing: border-box;
  display: flex;
  height: 100vh;
  justify-content: center;
  max-width: none;
  min-height: 100vh;
  overflow: hidden;
  padding: 150px 6vw 90px;
  position: relative;
}

.home-page #top { scroll-margin-top: 0; }

.home-page .hero-copy {
  color: #fff;
  max-width: 960px;
  padding: 0;
  position: relative;
  text-align: center;
  z-index: 1;
}

.home-page .hero-copy .eyebrow {
  color: rgba(255, 255, 255, 0.92);
  justify-content: center;
  margin-bottom: 20px;
}

.home-page .hero-copy .eyebrow-dot { background: #c8ed89; box-shadow: none; isolation: isolate; position: relative; }
.home-page .hero-copy .eyebrow-dot::after { background: radial-gradient(circle, rgba(200, 237, 137, 0.36) 0%, rgba(200, 237, 137, 0.22) 42%, transparent 74%); border-radius: 50%; content: ''; inset: -8px; position: absolute; z-index: -1; }
.home-page .hero-copy .eyebrow-dot { animation: eyebrow-pulse 2.4s ease-in-out infinite; }
@keyframes eyebrow-pulse {
  0%, 100% { opacity: 0.52; }
  50% { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .home-page .hero-copy .eyebrow-dot { animation: none; }
}

.home-page .hero h1 {
  font-family: var(--sans);
  font-size: clamp(44px, 7vw, 94px);
  font-weight: 300;
  letter-spacing: -0.055em;
  line-height: 0.98;
  margin: 0;
  text-transform: uppercase;
  text-shadow: 0 3px 30px rgba(0, 0, 0, 0.16);
}

.home-page .hero h1 strong {
  display: block;
  font-weight: 800;
  letter-spacing: -0.065em;
}

.home-page .hero-intro {
  color: rgba(255, 255, 255, 0.9);
  font-size: 16px;
  margin: 25px auto 0;
  max-width: 520px;
  text-shadow: 0 2px 15px rgba(0, 0, 0, 0.18);
}

.home-page .hero-actions { justify-content: center; margin-top: 28px; }
.home-page .button-dark { background: #4bbd68; box-shadow: 0 12px 24px rgba(13, 69, 26, 0.22); }
.home-page .button-dark:hover { background: #62d47d; }

.service-areas { padding-top: 76px; }
.service-areas .section-heading { align-items: end; }
.areas-intro { max-width: 330px; margin: 0 0 10px; }
.area-links { border-top: 1px solid var(--line); margin-top: 45px; }
.area-link { align-items: center; border-bottom: 1px solid var(--line); display: grid; gap: 20px; grid-template-columns: 42px 1fr auto; padding: 22px 4px; transition: color 0.2s, padding 0.2s; }
.area-link span { color: var(--orange); font-size: 12px; font-weight: 700; }
.area-link strong { font-family: var(--serif); font-size: clamp(20px, 2.4vw, 30px); font-weight: 600; }
.area-link svg { height: 20px; width: 20px; }
.area-link:hover { color: var(--green); padding-left: 12px; }

.suburb-page { background: var(--cream); }
.suburb-page .site-header { position: relative; }
.suburb-hero { display: grid; gap: 8%; grid-template-columns: minmax(0, 1fr) minmax(280px, 0.72fr); margin: auto; max-width: 1280px; padding: 92px 6vw 90px; }
.suburb-hero h1 { font-family: var(--serif); font-size: clamp(52px, 7vw, 96px); letter-spacing: -0.055em; line-height: 0.94; margin: 22px 0 25px; max-width: 760px; }
.suburb-hero h1 em, .suburb-content h2 em { color: var(--green); font-style: normal; }
.suburb-lead { font-size: 18px; max-width: 560px; }
.suburb-actions { display: flex; flex-wrap: wrap; gap: 15px; margin-top: 32px; }
.suburb-note { align-self: end; background: var(--lime); border-radius: 50% 50% 45% 45%; box-shadow: var(--shadow-soft); display: grid; min-height: 260px; padding: 48px 38px; place-content: center; position: relative; transform: rotate(4deg); }
.suburb-note::before { border: 1px solid rgba(23, 61, 45, 0.24); border-radius: inherit; content: ''; inset: 12px; position: absolute; }
.suburb-note strong { font-family: var(--serif); font-size: 30px; line-height: 1; max-width: 210px; position: relative; }
.suburb-note span { font-size: 11px; font-weight: 700; letter-spacing: 0.1em; margin-top: 14px; position: relative; text-transform: uppercase; }
.suburb-content { background: var(--paper); display: grid; gap: 8%; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); margin: 0 auto; max-width: 1320px; padding: 90px 8%; }
.suburb-content h2 { font-family: var(--serif); font-size: clamp(38px, 5vw, 62px); letter-spacing: -0.04em; line-height: 0.98; margin: 0 0 22px; }
.suburb-content p { max-width: 520px; }
.suburb-service-list { border-top: 1px solid var(--line); list-style: none; margin: 0; padding: 0; }
.suburb-service-list li { align-items: center; border-bottom: 1px solid var(--line); display: flex; gap: 14px; padding: 17px 0; }
.suburb-service-list svg { color: var(--orange); height: 18px; width: 18px; }
.suburb-cta { align-items: center; background: var(--forest); color: var(--paper); display: flex; gap: 28px; justify-content: space-between; margin: 0 auto 90px; max-width: 1320px; padding: 48px 8%; }
.suburb-cta h2 { font-family: var(--serif); font-size: clamp(30px, 4vw, 48px); line-height: 1; margin: 0; }
.suburb-cta .button { background: var(--lime); color: var(--ink); flex: 0 0 auto; }
.suburb-cta .button:hover { background: var(--paper); }

@media (max-width: 760px) {
  .home-page .site-header { padding: 11px 12px 11px 14px; top: 12px; width: calc(100% - 24px); }
  .home-page .hero { min-height: 88svh; padding: 130px 7vw 72px; }
  .home-page .hero h1 { font-size: clamp(34px, 10vw, 58px); }
  .home-page .hero-intro { font-size: 14px; margin-top: 20px; }
  .home-page .hero-actions { align-items: center; }
  .service-areas { padding-top: 35px; }
  .service-areas .section-heading { display: block; }
  .areas-intro { margin-top: 22px; }
  .area-links { margin-top: 30px; }
  .suburb-hero { display: block; padding: 58px 6vw 70px; }
  .suburb-hero h1 { font-size: clamp(48px, 14vw, 66px); }
  .suburb-lead { font-size: 16px; }
  .suburb-note { margin: 55px auto 0; max-width: 310px; min-height: 220px; }
  .suburb-content { display: block; padding: 68px 6vw; }
  .suburb-content > div + div { margin-top: 48px; }
  .suburb-cta { align-items: flex-start; flex-direction: column; margin-bottom: 55px; padding: 42px 6vw; }
}