/* Backyard Pods locality pages — Slate Grey / Dusty Olive. */
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Manrope:wght@400;500;600;700;800&display=swap');

:root {
  --slate-grey-50: #f1f4f4;
  --slate-grey-100: #e2e9e9;
  --slate-grey-200: #c5d2d3;
  --slate-grey-300: #a9bcbc;
  --slate-grey-400: #8ca5a6;
  --slate-grey-500: #6f8f90;
  --slate-grey-600: #597273;
  --slate-grey-700: #435656;
  --slate-grey-800: #2c393a;
  --slate-grey-900: #161d1d;
  --slate-grey-950: #101414;

  --dusty-olive-50: #f3f4f0;
  --dusty-olive-100: #e7e9e2;
  --dusty-olive-200: #d0d3c5;
  --dusty-olive-300: #b8bda8;
  --dusty-olive-400: #a0a78b;
  --dusty-olive-500: #88916e;
  --dusty-olive-600: #6d7458;
  --dusty-olive-700: #525742;
  --dusty-olive-800: #373a2c;
  --dusty-olive-900: #1b1d16;
  --dusty-olive-950: #13140f;

  --brand: var(--dusty-olive-700);
  --brand-hover: var(--dusty-olive-800);
  --brand-soft: var(--dusty-olive-200);
  --ink: var(--slate-grey-900);
  --muted: var(--slate-grey-700);
  --surface: #fff;
  --page: var(--slate-grey-50);
  --tint: var(--dusty-olive-100);
  --line: var(--slate-grey-200);
  --forest: var(--dusty-olive-700);
  --forest-dark: var(--dusty-olive-800);
  --lime: var(--dusty-olive-300);
  --focus: var(--dusty-olive-600);
  --radius: 20px;
  --shadow: 0 18px 50px rgb(22 29 29 / 9%);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--page); color: var(--ink); font: 16px/1.7 'DM Sans', sans-serif; }
body :is(h1,h2,h3,h4) { font-family: Manrope, sans-serif; line-height: 1.2; letter-spacing: -.035em; }
body h1 { font-size: clamp(2.5rem,5vw,4.7rem); }
body h2 { font-size: clamp(1.6rem,2.5vw,2.5rem); }
body h3 { font-size: clamp(1.25rem,1.8vw,1.7rem); }
body p { margin: 0 0 1.2rem; }
body img { max-width: 100%; height: auto; }
body a { color: var(--brand); text-underline-offset: 3px; }
body :is(a,button,input,textarea,select,summary):focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }

/* Header composition matched to the supplied reference. */
#header {
  display: grid;
  grid-template-columns: minmax(0,1.08fr) minmax(0,1fr);
  grid-template-rows: auto auto;
  align-content: center;
  align-items: center;
  column-gap: clamp(2.5rem,5vw,5rem);
  row-gap: 0;
  min-height: 620px;
  padding: 58px max(4.4vw,calc((100vw - 1200px)/2));
  background: var(--slate-grey-800);
  color: var(--slate-grey-50);
}
#header > div:first-child {
  grid-column: 1;
  grid-row: 1;
  min-width: 0;
  max-width: 650px;
  text-align: left;
}
#header h1 {
  max-width: 650px;
  margin: 0 0 clamp(2.5rem,5.7vw,4.75rem);
  color: var(--slate-grey-50);
  font-size: clamp(2.6rem,5.2vw,4.3rem);
  font-weight: 800;
  line-height: 1.18;
  letter-spacing: -.04em;
  text-wrap: balance;
}
#header h1::before {
  content: 'BUILT FOR AUSTRALIAN LIVING';
  display: block;
  margin-bottom: 32px;
  color: var(--slate-grey-50);
  font: 800 .78rem/1.5 Manrope,sans-serif;
  letter-spacing: .15em;
}
#header :is(h2,h3) {
  margin: 0 0 34px;
  max-width: 620px;
  color: var(--dusty-olive-400);
  font-size: clamp(1.7rem,3.1vw,2.55rem);
  font-weight: 600;
  line-height: 1.16;
  letter-spacing: -.035em;
  text-wrap: balance;
}
#header > div:nth-child(2) {
  grid-column: 2;
  grid-row: 1 / 3;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  width: 100%;
  min-height: 0;
  margin: 0;
  padding: 0;
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
#header > div:nth-child(2) img {
  display: block;
  width: 100%;
  max-width: 560px;
  height: auto;
  margin: 0;
  border: 2px solid var(--dusty-olive-700);
  border-radius: 12px;
  object-fit: contain;
  object-position: center;
  background: transparent;
  box-shadow: none;
}
#header > p {
  grid-column: 1;
  grid-row: 2;
  align-self: start;
  max-width: 620px;
  margin: 0;
  color: var(--slate-grey-50);
  font-size: 1rem;
  line-height: 1.7;
}
#header > div:first-child > p {
  margin: 0;
  color: var(--slate-grey-50);
  font-size: 1rem;
  line-height: 1.7;
}
#header a { color: var(--dusty-olive-200); }
#header :is(a,button,input,textarea,select,summary):focus-visible { outline-color: var(--dusty-olive-200); }

/* Main features and photographs. */
.band-one { padding: clamp(3rem,6vw,6rem) 24px; background: var(--tint); }
.band-one > .row { display: grid; grid-template-columns: minmax(0,1.15fr) minmax(0,.85fr); align-items: start; gap: 24px; max-width: 1200px; margin: auto; }
.band-one .column { min-width: 0; width: auto; float: none; padding: 0; }
.band-one .card { height: 100%; padding: clamp(1.5rem,3vw,2.8rem); border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow); }
.band-one .card > h2 { margin: 0 0 1rem; }
.band-one .card > h2 strong { display: block; margin: 0 0 .8rem; color: var(--dusty-olive-700); font: 800 .78rem/1.5 Manrope,sans-serif; letter-spacing: .09em; text-transform: uppercase; }
.band-one .custom { margin: 1rem 0; padding: 1rem 1.25rem; border-left: 4px solid var(--brand); border-radius: 0 9px 9px 0; background: var(--page); }
.band-one ol:not(#adress), .band-one ul { padding-left: 1.35rem; }
#object-big { display: grid; grid-template-columns: minmax(0,1fr); width: 100%; gap: 24px; margin-top: 2rem; }
#object-big > div { min-width: 0; width: 100%; }
#object-big a { display: block; width: 100%; height: auto; min-height: 0; overflow: hidden; border: 1px solid var(--line); border-radius: 15px; background: var(--page); }
#object-big img { display: block; width: 100%; max-width: 100%; height: auto; max-height: none; object-fit: contain; }
.band-one details { margin: 1rem 0; padding: 1.1rem 1.25rem; border: 1px solid var(--line); border-radius: 12px; background: var(--page); }
.band-one summary { font-weight: 800; cursor: pointer; }
.band-one details[open] summary { margin-bottom: 1rem; }
#adress { margin: 2rem 0 0; padding: 1.4rem; border-radius: 15px; background: var(--tint); list-style: none; }
#adress li { margin: 0 0 .7rem; overflow-wrap: anywhere; }
#adress li:last-child { margin: 1.3rem 0 0; }

.Button { display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: .8rem 1.5rem; border: 0; border-radius: 10px; background: var(--brand); color: var(--slate-grey-50); font: 800 .95rem/1.3 Manrope,sans-serif; text-align: center; text-decoration: none; cursor: pointer; transition: background .2s, transform .2s; }
.Button:hover { background: var(--brand-hover); color: var(--slate-grey-50); transform: translateY(-2px); }
#adress .Button { width: 100%; }
#header a.Button { color: var(--slate-grey-50); background: var(--slate-grey-700); }
#header a.Button:hover { background: var(--slate-grey-800); }

/* Article content and locality navigation. */
#body > .Details { max-width: 1050px; margin: 0 auto; padding: clamp(3rem,6vw,6rem) 24px; }
#body > .Details > section { margin: 0 0 1.4rem; padding: clamp(1.4rem,3vw,2.5rem); border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
#body > .Details > section h2 { margin: 0 0 1.1rem; color: var(--slate-grey-800); }
#body > .Details > section :is(ul,ol) { padding-left: 1.4rem; }
#body > .Details > section :is(table,img) { max-width: 100%; }
#body > .Details > section table { display: block; overflow-x: auto; border-collapse: collapse; }
#body > .Details > section :is(td,th) { padding: .7rem; border: 1px solid var(--line); }
#body > .Details > section th { background: var(--tint); color: var(--slate-grey-800); text-align: left; }
#body > .Details > h3 { margin: 3rem 0 1rem; padding-bottom: .7rem; border-bottom: 2px solid var(--line); color: var(--slate-grey-800); }
#body > .Details > ol { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; margin: 0; padding: 0; list-style: none; }
#body > .Details > ol li { min-width: 0; }
#body > .Details > ol a { display: block; padding: .85rem 1rem; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); color: var(--brand); font-weight: 700; text-decoration: none; overflow-wrap: anywhere; }
#body > .Details > ol a:hover { background: var(--tint); border-color: var(--dusty-olive-300); }

/* Lead form. */
.bandcontact { padding: clamp(3rem,6vw,6rem) 24px; background: var(--tint); }
.bandcontact .row { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 24px; max-width: 1200px; margin: auto; }
.bandcontact .column { min-width: 0; width: auto; float: none; padding: 0; }
.bandcontact .card { height: 100%; padding: clamp(1.5rem,3vw,2.8rem); border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow); }
.bandcontact h2 { margin: 0 0 1.2rem; color: var(--slate-grey-800); }
.bandcontact .card img { max-width: 100%; }
.bandcontact form { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 14px; }
.bandcontact form :is(input,textarea) { width: 100%; min-width: 0; min-height: 50px; padding: .8rem 1rem; border: 1px solid var(--slate-grey-300); border-radius: 10px; background: var(--slate-grey-50); color: var(--ink); font: inherit; }
.bandcontact form :is(input,textarea)::placeholder { color: var(--muted); opacity: 1; }
.bandcontact form :is(textarea,img,#captcha,.Button,h3) { grid-column: 1 / -1; }
.bandcontact form textarea { min-height: 130px; resize: vertical; }
.bandcontact form img { max-width: 220px; }
.bandcontact form h3 { margin: 0; padding: .8rem 1rem; border-left: 4px solid var(--dusty-olive-600); background: var(--dusty-olive-100); color: var(--slate-grey-900); font-size: 1rem; }
.bandcontact form .Button { width: 100%; border: 0; background: var(--brand); color: var(--slate-grey-50); font: 800 .95rem/1.3 Manrope,sans-serif; }
.bandcontact form .Button:hover { background: var(--brand-hover); }

/* Slate footer with pale olive links. */
#footer { padding: 3.5rem 24px; background: var(--slate-grey-800); color: var(--slate-grey-100); text-align: center; }
#footer img { max-width: 180px; }
#footer p { max-width: 900px; margin: 1.5rem auto 0; }
#footer a { color: var(--brand-soft); }
#footer a:hover { color: var(--dusty-olive-50); }
#footer :is(a,button,input,textarea,select,summary):focus-visible { outline-color: var(--dusty-olive-200); }

@media (max-width: 900px) {
  .band-one > .row, .bandcontact .row { grid-template-columns: 1fr; }
  #header { grid-template-columns: 1fr; grid-template-rows: auto auto auto; gap: 1.5rem; min-height: 0; }
  #header > div:first-child { grid-column: 1; grid-row: 1; max-width: none; }
  #header > p { grid-column: 1; grid-row: 2; max-width: none; }
  #header > div:nth-child(2) { grid-column: 1; grid-row: 3; margin-top: 1rem; }
  #header h1 { margin-bottom: 2rem; }
  #header :is(h2,h3) { margin-bottom: 1.5rem; }
}
@media (max-width: 620px) {
  #header { padding: 3.5rem 24px; }
  #header h1 { font-size: clamp(2rem,8vw,2.8rem); overflow-wrap: anywhere; }
  #header > div:nth-child(2) { min-height: 0; }
  #header > div:nth-child(2) img { height: auto; max-height: none; border-width: 8px; border-radius: 22px; }
  #object-big, #body > .Details > ol, .bandcontact form { grid-template-columns: 1fr; }
  #object-big a { min-height: 0; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; }
}