/* Benny Property — site.css
   BUILD-SPEC-V3.md is the governing document (26-09-11, Bel's review of v2.1).
   Readability is rule zero: where type DOES sit over a photograph (v3 brings two
   of those back) the scrim is strong enough to clear 4.5:1 and the contrast is
   measured in the walk. Straight lines only — zero border-radius anywhere.
   ONE yellow: #F5B21B, sampled from the logo PNG. No yellow buttons, ever.

   v3.1 addendum (Bel, 26-09-11 — "I like the background colour of Hamilton Marino;
   mimic the style they do"): the ground is PURE WHITE and the concrete texture is
   under the noir band only; names are ink, secondary text grey, tiny labels a lighter
   grey; rules are #E6E6E3; the developments index is rows with a square thumbnail at
   the left; section padding is x1.5 and the container is 1200; the nav is smaller and
   lighter. Everything above this line still holds.

   v3.2 addendum (Bel, 26-09-11, after the v3 screenshots): the map is redrawn — the
   east coast zoomed, a whole-of-Australia locator boxed in the corner, and HTML
   markers that are links; the concrete stays on the noir band and the footer only;
   the CTA strip reads LET'S TALK; and the label grey moves to #6F6F6B, because
   #B0B0AC measured 2.2:1 on white and readability is rule zero.

   v3.4 addendum (Bel, 26-09-11, "after this, it's ready to share"): the home page's
   "Space" head sits tight under its own rule; the cards take the concrete as their
   ground — the same tile as the noir band, baked light over #F4F4F2, with the text
   contrast on it measured off the render, not asserted; and the Developments map
   panel bleeds to the viewport's left edge from 900px up. The map came off all five
   development pages, so the only map on the site is the one on the index. */

/* ── fonts ─────────────────────────────────────────────────────────────── */
@font-face{font-family:'Poppins';font-style:normal;font-weight:300;font-display:swap;
  src:url(fonts/poppins-300.woff2) format('woff2')}
@font-face{font-family:'Poppins';font-style:normal;font-weight:600;font-display:swap;
  src:url(fonts/poppins-600.woff2) format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:100 900;font-display:swap;
  src:url(fonts/inter-var.woff2) format('woff2')}

/* ── tokens ────────────────────────────────────────────────────────────── */
:root{
  /* v3.1: the ground is #FFFFFF — the light sections, the nav and the logo panel
     all sit on it, and nothing behind them is textured any more. */
  --ground:#FFFFFF; --paper:#FFFFFF; --noir:#202020; --ink:#111111;
  --grey:#8A8A86; --hair:#E6E6E3;
  /* v3.2 (Bel, 26-09-11): readability is rule zero, so the label grey is the one
     that CLEARS 4.5:1 on white. #B0B0AC measured 2.2:1 in the v3.1 walk and is gone.
     Everything set under 14px — labels, captions, statuses, the map's place lines —
     uses this; --grey (#8A8A86) is allowed only at 14px and above. */
  --label:#6F6F6B;
  /* v3 §2: ONE yellow, sampled from the logo. The deep amber is deleted. */
  --amber:#F5B21B;
  --body:#3A3A38; --ask:#C0392B;
  /* concrete surfaces (v3 §4). --concrete was the grey the small labels used; v3.2
     moved every one of them to --label, so the token is retired rather than left
     lying around for something to pick up again. */
  --panel:#F7F7F5; --panel-2:#EFEFEC;
  --disp:'Poppins',ui-sans-serif,system-ui,-apple-system,sans-serif;
  --sans:'Inter',ui-sans-serif,system-ui,-apple-system,sans-serif;
  --pad:clamp(20px,4vw,48px);
  /* v3.1: section padding x1.5 */
  --gap:clamp(84px,12vw,180px);
}
*{box-sizing:border-box}
/* spec §3: straight lines, everywhere, without exception */
*,*::before,*::after{border-radius:0}
html{color-scheme:light;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
/* v3.1 addendum: the light ground is PLAIN WHITE. The concrete survives only where
   Bel kept it — under the ticker, the noir bands and the footer — so concrete-light.jpg
   is no longer built or shipped. */
body{margin:0;background:var(--ground);
  color:var(--ink);font-family:var(--sans);
  font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit}
.wrap{max-width:1200px;margin:0 auto;padding:0 var(--pad)}  /* v3.1: 1280 -> 1200 */
.skip{position:absolute;left:-9999px;top:0;background:var(--amber);color:var(--noir);
  padding:12px 18px;z-index:100;font-size:12px;letter-spacing:.16em;text-transform:uppercase}
.skip:focus{left:0}
:focus-visible{outline:2px solid var(--ink);outline-offset:3px}

/* ── type ──────────────────────────────────────────────────────────────── */
.k{font-family:var(--sans);font-size:11px;font-weight:500;letter-spacing:.2em;
  text-transform:uppercase;color:var(--ink);display:block}
.k-grey{color:var(--label)}   /* v3.1: the tiny group labels */
.h{font-family:var(--disp);font-weight:300;text-transform:uppercase;letter-spacing:-.01em;
  line-height:1.02;margin:0}
.h b{font-weight:600}
h1.h{font-size:clamp(2.15rem,5.4vw,4.6rem)}
h2.h{font-size:clamp(1.9rem,4.2vw,3.4rem)}
h3.h{font-size:clamp(1.15rem,1.9vw,1.5rem)}
/* the one amber mark per view */
.rule{display:block;width:48px;height:4px;background:var(--amber);margin:0 0 22px;border:0}
/* spec §3c: 2px hairline section rule in ink */
.srule{display:block;width:100%;height:2px;background:var(--ink);border:0;
  margin:0 0 clamp(26px,3.4vw,40px)}
.lead{color:var(--grey);font-size:clamp(15px,1.15vw,17px);max-width:46ch;margin:0}
.prose p{color:var(--body);max-width:62ch;margin:0 0 1.15em}
.prose p:last-child{margin-bottom:0}

/* ── the logo ──────────────────────────────────────────────────────────── */
/* spec §4: their PNG, untouched. Never re-typeset, never recoloured. v4.20 §1 puts the
   header back on the white ground, so there are two exports of the same file and each
   surface takes the one that belongs on it: the header carries their COLOUR logo (black
   wordmark, yellow mark), the noir footer carries the negative (dark pixels → white,
   the yellow untouched). Both sit straight on the ground — no light chip (v4.9, Bel:
   the chip hid the letters). */
.wmlink{display:inline-block;line-height:0;text-decoration:none}
.wm-img{height:38px;width:auto}
.wm-foot{display:inline-block;line-height:0}
.wm-foot .wm-img{height:40px}

/* ── ticker (static — spec §1) ─────────────────────────────────────────── */
.ticker{background:var(--noir);color:var(--amber);text-align:center;position:relative;
  isolation:isolate;overflow:hidden}
.ticker::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:var(--noir)}
.ticker span{display:inline-block;padding:9px 34px;font-size:10.5px;font-weight:500;
  letter-spacing:.26em;text-transform:uppercase;white-space:nowrap}

/* ── header ────────────────────────────────────────────────────────────── */
/* the type no longer sits over a photograph, so the bar is always the same bar:
   ticker + nav on the light ground, sticky, one hairline under it. */
.topbar{position:sticky;top:0;z-index:40}
.hd{background:var(--ground);border-bottom:1px solid var(--hair)}
.hd__in{display:flex;align-items:center;justify-content:space-between;gap:20px;
  min-height:66px;padding-top:10px;padding-bottom:10px}
.hd nav{display:flex;align-items:center;gap:clamp(16px,2.6vw,34px)}
/* v3.1: the nav is smaller and lighter — 10px, 400, and it sits back from the page */
.hd nav a{font-size:10px;font-weight:400;letter-spacing:.18em;text-transform:uppercase;
  text-decoration:none;color:inherit;opacity:.66}
.hd nav a:hover,.hd nav a[aria-current="page"]{opacity:1}
.hd nav a.btn{font-size:10px;letter-spacing:.16em;padding:13px 22px}
.hd nav a[aria-current="page"]{box-shadow:inset 0 -2px 0 0 var(--amber)}
/* .hd nav a is more specific than .btn, so the nav's own button has to say so */
.hd nav a.btn{margin-left:6px;color:#fff;opacity:1}
.hd nav a.btn:hover{color:var(--ink)}

.burger{display:none;background:none;border:0;padding:8px;margin:-8px -8px -8px 0;
  cursor:pointer;color:inherit}
.burger span{display:block;width:22px;height:1.5px;background:currentColor;margin:5px 0;
  transition:transform .2s,opacity .2s}
.is-open .burger span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
.is-open .burger span:nth-child(2){opacity:0}
.is-open .burger span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}

/* ── buttons (v3 §3) ───────────────────────────────────────────────────── */
/* PRIMARY = a square ink block, white 12px tracked uppercase label. Hover inverts
   to the one yellow with ink text. There is no yellow button anywhere on the site.
   SECONDARY = an underlined text link with an arrow. Nothing else. */
.btn{display:inline-block;font-family:var(--sans);font-size:12px;font-weight:500;
  letter-spacing:.16em;text-transform:uppercase;padding:15px 26px;
  text-decoration:none;border:1px solid var(--ink);background:var(--ink);color:#fff;
  cursor:pointer;transition:background .2s,color .2s,border-color .2s}
.btn:hover,.btn:focus-visible{background:var(--amber);color:var(--ink);border-color:var(--amber)}
/* on the noir band and over a scrim the ink block would disappear — invert it */
.band .btn,.scrim__in .btn{background:#fff;color:var(--ink);border-color:#fff}
.band .btn:hover,.scrim__in .btn:hover{background:var(--amber);color:var(--ink);border-color:var(--amber)}
.tlink{display:inline-flex;align-items:center;gap:9px;font-size:12px;font-weight:500;
  letter-spacing:.16em;text-transform:uppercase;text-decoration:none;
  border-bottom:1px solid var(--ink);padding-bottom:7px;transition:border-color .2s,color .2s}
.tlink:hover{border-color:var(--amber)}

/* ── hero (spec §2: the Zero Estate pattern) ───────────────────────────── */
/* type block on the light ground, photograph full width BELOW it, square corners,
   21:9 on desktop and an art-directed 4:5 crop on phones. Nothing is set over it. */
.hero{padding-top:clamp(40px,5.5vw,72px)}
/* v3.8 (Bel 26-09-13): less air between the hero photo and the developments rule */
.hero + .sec{padding-top:clamp(48px,6vw,88px)}
.hero .copy{padding-bottom:clamp(34px,4.4vw,58px)}
.hero .k{color:var(--ink)}
.hero h1{margin-top:16px;max-width:15ch}
.hero p{max-width:52ch;color:var(--body);margin:22px 0 0;font-size:clamp(15px,1.15vw,17px)}
.hero .btn{margin-top:32px}
.hero--short .copy{padding-bottom:clamp(28px,3.6vw,46px)}

.shot{margin:0}
.shot picture{display:block;width:100%;aspect-ratio:21/9;background:var(--panel-2)}
.shot img{width:100%;height:100%;object-fit:cover}
.shot figcaption{padding:11px var(--pad) 0;font-size:10.5px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--label)}
.shot--cap-right figcaption{text-align:right}
@media (max-width:640px){
  .shot picture{aspect-ratio:3/2}
  .shot--hero picture{aspect-ratio:4/5}
}

/* page head (no photo) */
.phead{padding:clamp(46px,6vw,92px) 0 clamp(28px,4vw,48px)}
.phead h1{margin-top:16px;max-width:18ch}
.phead .lead{margin-top:22px}

/* ── generic section ───────────────────────────────────────────────────── */
.sec{padding:var(--gap) 0}
.sec--tight{padding:clamp(40px,5vw,64px) 0}
/* spec §3c: the 2px ink section rule, carried by the section head itself */
.shead{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:32px;
  align-items:end;margin-bottom:clamp(34px,4.5vw,58px);
  border-top:2px solid var(--ink);padding-top:clamp(22px,2.8vw,34px)}
.shead h2{max-width:16ch}
.shead .k{margin-bottom:14px}
/* v3.4 §1: a section head with nothing in its right-hand column — the home page's
   "Space" — sat 34px under its own rule with an empty half beside it, and the gap
   read as a mistake. This closes it to 24px and drops the eyebrow's leading with it,
   so the rule and the eyebrow sit tight. */
.shead--tight{padding-top:24px}
.shead--tight .k{line-height:1}

/* ── facts (the 4px vertical amber rule as the stat marker) ────────────── */
/* v3 §6: double the vertical air and the gap between the number and its label */
.facts{display:flex;gap:clamp(26px,5vw,72px);flex-wrap:wrap;
  margin-top:clamp(56px,8vw,88px);margin-bottom:clamp(56px,8vw,88px)}
.facts div{border-left:4px solid var(--amber);padding-left:18px;min-width:150px}
.facts b{display:block;font-family:var(--disp);font-weight:300;
  font-size:clamp(2rem,4vw,3.2rem);line-height:1;letter-spacing:-.02em}
.facts span{display:block;margin-top:20px;font-size:11px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--label)}
/* v3.5 (Bel 26-09-13): the facts block sits centred — rule, headline and the three stats */
.factsec{text-align:center}
.factsec .rule{margin-left:auto;margin-right:auto}
.factsec .facts{justify-content:center}
.factsec .facts div{text-align:left}
/* v3.6 (Bel 26-09-13, option A): no dead air under the stats — the block sits evenly
   between the hero photo and the developments rule */
.factsec{padding-bottom:40px}
.factsec .facts{margin-bottom:0}

/* ── Developments page header block (v3.1) ─────────────────────────────── */
/* One statement line at the left, one aerial at the right, then air, then the index.
   Nothing else is in this band. */
.devhead{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  gap:clamp(32px,5vw,72px);align-items:start;margin-top:clamp(38px,5vw,64px)}
.devhead .statement{font-family:var(--disp);font-weight:300;text-transform:none;
  font-size:clamp(1.25rem,2.5vw,2rem);line-height:1.3;letter-spacing:-.01em;
  color:var(--ink);margin:0;max-width:22ch}
.devhead .fig{margin:0}
@media (max-width:900px){.devhead{grid-template-columns:1fr}}

/* ── index rows — a precast-panel grid (spec §3c) ──────────────────────── */
.ix{display:grid;grid-template-columns:minmax(0,1.75fr) minmax(0,.8fr);
  gap:clamp(32px,5vw,72px);align-items:start}
.ixgroup + .ixgroup{margin-top:clamp(30px,4vw,48px)}
.ixgroup > .k{margin-bottom:14px}
.ixlist{list-style:none;margin:0;padding:0;border-top:1px solid var(--ink)}
/* v3.1: every row carries a SQUARE THUMBNAIL at its left — 120px on desktop — then
   the name, the grey secondary line under it, and the status right-aligned in grey.
   The row no longer slides on hover; the large photograph on the right swaps instead
   (see .ixfig), which is the whole point of the Hamilton Marino index. */
.ixlist a{display:grid;grid-template-columns:120px minmax(0,1fr) auto;align-items:center;
  gap:clamp(18px,2.2vw,30px);padding:20px 2px;border-bottom:1px solid var(--hair);
  text-decoration:none;transition:background .22s}
.ixlist li:last-child a{border-bottom:1px solid var(--ink)}
.ixlist a:hover,.ixlist a:focus-visible{background:var(--panel)}
.ixlist .th{width:120px;height:120px;object-fit:cover;display:block;
  background:var(--panel-2);filter:saturate(.92)}
.ixlist a:hover .th,.ixlist a:focus-visible .th{filter:none}
/* v3.1: the name is the loudest thing in the row */
.ixlist .n{font-family:var(--disp);font-weight:600;color:var(--ink);
  font-size:clamp(1.35rem,2.5vw,2rem);letter-spacing:-.015em;text-transform:uppercase;
  line-height:1.05;display:block}
.ixlist .m{display:block;margin-top:7px;font-size:11px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--label)}
/* v3.1: the longest status is "Selling & leasing · final units" — it is allowed to
   take two lines rather than squeeze the name column, and it stays right-aligned. */
.ixlist .s{font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--label);white-space:normal;text-align:right;max-width:15ch;line-height:1.5}
/* square thumbnail, hairline box, caption underneath — never over the image */
.ixfig{margin:0;position:sticky;top:clamp(116px,14vh,150px)}
.ixfig .stage{position:relative;aspect-ratio:1/1;overflow:hidden;background:var(--panel-2)}
.ixfig img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:0;transition:opacity .32s}
.ixfig img.on{opacity:1}
.ixfig figcaption{margin-top:12px;font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--label);min-height:1.2em}
/* v3.1: the hover swap is a DESKTOP affordance. Below 900px the figure is a static
   lead image above the rows and nothing hovers, so the thumbnails carry the photos. */
@media (hover:none){.ixfig{display:none}.ix{grid-template-columns:1fr}}

/* ── tiles — image, then the label beneath it on the ground ────────────── */
.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
  gap:clamp(14px,1.6vw,22px)}
.tile{display:block;text-decoration:none;border:1px solid var(--hair);
  background:var(--paper);transition:border-color .22s}
.tile:hover{border-color:var(--ink)}
.tile .shotwrap{position:relative;display:block;aspect-ratio:4/5;overflow:hidden;
  background:var(--panel-2)}
.tile img{width:100%;height:100%;object-fit:cover;transition:transform .5s}
.tile:hover img{transform:scale(1.035)}
.tile .t{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;
  padding:16px 18px;border-top:1px solid var(--hair)}
.tile .n{font-family:var(--disp);font-weight:600;font-size:1.15rem;text-transform:uppercase;
  letter-spacing:-.01em;display:block;width:100%}
.tile .m{display:block;margin-top:5px;font-size:10.5px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--label)}
/* v3 §9: the status tag reads "In development", never "Coming" */
.tile .flag{margin-top:5px;background:var(--ink);color:#fff;
  font-size:9.5px;font-weight:500;letter-spacing:.18em;text-transform:uppercase;
  padding:4px 9px}

/* ── noir band (spec §2: solid noir, concrete grain, no type over a photo) ── */
.band{position:relative;color:#fff;isolation:isolate;background:var(--noir)}
.band::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:var(--noir) url(img/concrete-noir.jpg) repeat;background-size:900px 900px}
/* .in IS the .wrap: set the vertical padding only, or the shorthand
   zeroes the container's side padding (invisible above 1200px, flush to
   the screen edge below it — the v2 bug this build found at 375). */
.band .in{padding-top:var(--gap);padding-bottom:var(--gap)}
.band .k{color:var(--amber);margin-bottom:16px}
.band h2{max-width:15ch}
.band p{max-width:52ch;color:rgba(255,255,255,.8);margin:22px 0 0}
.band .btn-ghost,.band .tlink{margin-top:32px;color:#fff;border-color:rgba(255,255,255,.35)}
.band .quote{font-family:var(--disp);font-weight:300;text-transform:none;
  font-size:clamp(1.25rem,2.4vw,1.9rem);line-height:1.3;letter-spacing:-.01em;
  max-width:22ch;margin:26px 0 0;color:#fff}
.band .facts span{color:rgba(255,255,255,.66)}
/* v3.2: --label is the grey that clears 4.5:1 on WHITE. On the noir band the same
   value measured 3.23:1 in the walk, so every caption inside the band inverts. */
.band figcaption{color:rgba(255,255,255,.72)}

/* ── founder band — the portrait BESIDE the type, never behind it ──────── */
.founder{display:grid;grid-template-columns:minmax(0,340px) minmax(0,1fr);
  gap:clamp(28px,5vw,72px);align-items:start}
.founder__fig{margin:0}
.founder__fig picture,.founder__fig img{display:block;width:100%;height:auto}
.founder__fig figcaption{margin-top:12px;font-size:10.5px;line-height:1.5;
  letter-spacing:.16em;text-transform:uppercase;color:var(--label);max-width:34ch}
/* this caption only ever appears inside the noir band — it has to beat the rule
   above, which is tuned for the white ground (v3.2 walk: 3.23:1 vs 8.9:1) */
.band .founder__fig figcaption{color:rgba(255,255,255,.72)}
.founder__txt{min-width:0}
.founder__txt > :first-child{margin-top:0}
@media (max-width:760px){
  .founder{grid-template-columns:minmax(0,1fr);gap:28px}
  .founder__fig{max-width:340px}
}

/* ── two-column story ──────────────────────────────────────────────────── */
.duo{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(32px,6vw,88px);align-items:center}
.duo img{width:100%;height:auto}
.duo--rev .duo__txt{order:2}

/* ── cards — 1px hairline boxes, no shadow ─────────────────────────────── */
/* v3.4 §2/§5: the card ground is the concrete. It is the SAME tile the noir band
   uses, baked light instead of dark — concrete-card.jpg, the tile laid over #F4F4F2
   at the same 0.10 strength, so the swing is about four levels either side of the
   ground. The background-COLOUR is declared as well as the image, so the contrast
   audit still reads a real ground under the text if the image ever fails to load,
   and the hairline border stays. Applies to Leasing / Buying on the home page and
   For tenants / buyers / partners on Our story — the only .cards on the site. */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(270px,1fr));
  gap:clamp(16px,2vw,26px)}
.card{background:#F4F4F2;
  border:1px solid var(--hair);
  padding:clamp(24px,3vw,36px);display:flex;flex-direction:column;gap:14px}
.card h3{margin:0}
.card p{margin:0;color:var(--body);font-size:15px}
.card .tlink{margin-top:auto;align-self:flex-start}

/* ── figure ────────────────────────────────────────────────────────────── */
.fig{margin:0}
.fig img{width:100%;height:auto}
.fig figcaption,.cap-under{margin-top:12px;font-size:11px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--label)}

/* ── spec row — a concrete panel ───────────────────────────────────────── */
.spec{display:flex;flex-wrap:wrap;background:var(--panel);
  border-top:2px solid var(--ink);border-bottom:1px solid var(--hair)}
.spec div{flex:1 1 190px;max-width:300px;padding:22px 24px;
  border-right:1px solid var(--panel-2)}
.spec div:last-child{border-right:0}
.spec dt{font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--label);
  margin:0 0 9px}
.spec dd{margin:0;font-size:15px;color:var(--ink);line-height:1.45}

/* ── gallery ───────────────────────────────────────────────────────────── */
.gal{columns:2;column-gap:clamp(14px,1.6vw,22px)}
.gal figure{margin:0 0 clamp(14px,1.6vw,22px);break-inside:avoid}
.gal img{width:100%;height:auto}
.gal figcaption{margin-top:9px;font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--label)}

/* ── next row ──────────────────────────────────────────────────────────── */
.next{border-top:2px solid var(--ink)}
.next a{display:flex;align-items:baseline;justify-content:space-between;gap:20px;
  padding:30px 2px;text-decoration:none;transition:padding-left .22s}
.next a:hover{padding-left:14px}
.next .k{margin-bottom:8px}
.next .n{font-family:var(--disp);font-weight:600;font-size:clamp(1.3rem,2.6vw,2rem);
  text-transform:uppercase;letter-spacing:-.01em}
.next .arrow{color:var(--label);font-size:12px;letter-spacing:.16em;text-transform:uppercase}

/* ── contact / form ────────────────────────────────────────────────────── */
.cgrid{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);
  gap:clamp(32px,5vw,80px);align-items:start}
.form{display:grid;gap:20px}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.f label{display:block;font-size:10.5px;font-weight:500;letter-spacing:.2em;
  text-transform:uppercase;color:var(--label);margin-bottom:9px}
.f input,.f select,.f textarea{width:100%;font-family:var(--sans);font-size:15px;
  color:var(--ink);background:var(--paper);border:1px solid var(--hair);
  padding:14px 15px;transition:border-color .2s}
.f textarea{min-height:140px;resize:vertical}
.f input:focus,.f select:focus,.f textarea:focus{border-color:var(--ink);outline:none}
.f select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--grey) 50%),
  linear-gradient(135deg,var(--grey) 50%,transparent 50%);
  background-position:calc(100% - 19px) 22px,calc(100% - 13px) 22px;
  background-size:6px 6px,6px 6px;background-repeat:no-repeat;padding-right:40px}
.formnote{margin:0;font-size:13px;color:var(--label)}
.formnote__review{color:var(--label)}
.formnote.ok{color:var(--ink);border-left:4px solid var(--amber);padding-left:14px}
/* the contact block: a concrete panel (spec §3b) */
.office{background:var(--panel);border:1px solid var(--hair);border-top:2px solid var(--ink);
  padding:clamp(24px,3vw,34px)}
.office h2{font-size:1.15rem}
.office p{color:var(--body);font-size:15px;margin:16px 0 0;line-height:1.75}
.office a{color:var(--ink);text-decoration:underline;text-underline-offset:3px}

/* ── legal / long prose ────────────────────────────────────────────────── */
.legal{max-width:74ch}
.legal h2{font-family:var(--disp);font-weight:600;font-size:1.05rem;text-transform:uppercase;
  letter-spacing:.02em;margin:2.4em 0 .8em}
.legal h2:first-of-type{margin-top:0}
.legal p{color:var(--body);margin:0 0 1.1em}
.legal ul{color:var(--body);margin:0 0 1.1em;padding-left:1.1em}
.legal li{margin-bottom:.5em}
.legal a{color:var(--ink);text-decoration:underline;text-underline-offset:3px}

/* ── steps ─────────────────────────────────────────────────────────────── */
.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
  gap:clamp(20px,2.6vw,34px);margin-top:clamp(30px,4vw,48px)}
.step{border-top:4px solid var(--amber);padding-top:18px}
.step h3{font-family:var(--disp);font-weight:600;font-size:1rem;text-transform:uppercase;
  letter-spacing:.01em;margin:0 0 10px}
.step p{margin:0;color:var(--body);font-size:14.5px}

/* ── contact strip ─────────────────────────────────────────────────────── */
.strip{border-top:2px solid var(--ink);padding:clamp(40px,5vw,64px) 0}
.strip .in{display:flex;align-items:center;justify-content:space-between;gap:26px;flex-wrap:wrap}
.strip p{margin:14px 0 0;color:var(--body);font-size:15px}
.strip a{color:var(--ink);text-decoration:underline;text-underline-offset:3px}

/* ── footer ────────────────────────────────────────────────────────────── */
footer{position:relative;isolation:isolate;background:var(--noir);
  color:rgba(255,255,255,.72);padding:clamp(52px,6vw,80px) 0 34px;font-size:13.5px}
footer::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:var(--noir) url(img/concrete-noir.jpg) repeat;background-size:900px 900px}
footer .top{display:grid;grid-template-columns:minmax(0,1.35fr) repeat(4,minmax(0,1fr));
  gap:clamp(24px,3vw,44px);padding-bottom:clamp(36px,4vw,54px)}
footer .desc{margin:18px 0 0;max-width:34ch;color:rgba(255,255,255,.6);line-height:1.7}
footer h3{font-size:10.5px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;
  color:var(--amber);margin:0 0 16px}
footer ul{list-style:none;margin:0;padding:0}
footer li{margin-bottom:11px}
footer a{color:rgba(255,255,255,.72);text-decoration:none;transition:color .2s}
footer a:hover{color:#fff}
footer .btm{border-top:1px solid rgba(255,255,255,.14);padding-top:26px;
  display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap;
  font-size:12px;color:rgba(255,255,255,.5)}

/* ── responsive ────────────────────────────────────────────────────────── */
@media (max-width:1040px){
  footer .top{grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,1fr)}
}
@media (max-width:900px){
  .hd nav{position:fixed;inset:0 0 0 auto;width:min(82vw,340px);background:var(--ground);
    color:var(--ink);flex-direction:column;align-items:flex-start;justify-content:center;
    gap:26px;padding:32px var(--pad);transform:translateX(100%);transition:transform .3s;
    border-left:1px solid var(--hair);z-index:50}
  .is-open .hd nav{transform:translateX(0)}
  .hd nav a{font-size:14px;letter-spacing:.18em}
  .hd nav a.btn{margin-left:0}
  .burger{display:block;z-index:60;position:relative}
  .is-open .burger{color:var(--ink)}
  .shead,.ix,.duo,.cgrid{grid-template-columns:1fr}
  .duo--rev .duo__txt{order:0}
  .ixfig{position:static;order:-1;max-width:420px}
}
@media (max-width:760px){
  .gal{columns:1}
  .spec div{flex:1 1 100%;max-width:none;border-right:0;
    border-bottom:1px solid var(--panel-2);padding:18px 20px}
  .spec div:last-child{border-bottom:0}
  .row2{grid-template-columns:1fr}
  footer .top{grid-template-columns:1fr 1fr}
}
@media (max-width:520px){
  h1.h{font-size:clamp(2.15rem,9vw,2.8rem)}
  /* v3.1: the thumbnail survives the phone at 76px; the status drops under the name */
  .ixlist a{grid-template-columns:76px minmax(0,1fr);gap:16px;align-items:center}
  .ixlist .th{width:76px;height:76px}
  /* on the phone the status has no right edge to hang off — it reads as a third
     line of the row, left-aligned under the place, not floating mid-column */
  .ixlist .s{white-space:normal;grid-column:2;margin-top:8px;text-align:left;max-width:none}
  .facts div{min-width:0;flex:1 1 44%}
  .strip .in{flex-direction:column;align-items:flex-start}
  footer .top{grid-template-columns:1fr}
}

/* ══════════════════════════════════════════════════════════════════════════
   BUILD-SPEC-V3 — Bel's review of v2.1, 26-09-11
   Everything below is new in v3. It comes last so it wins over the v2 rules
   it supersedes without those rules having to be hunted through the file.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── §5 the Developments dropdown ─────────────────────────────────────────
   "Developments" keeps its own link to /developments/ AND opens a menu of the
   five sites — on hover with a pointer, on tap on a touch screen (site.js sets
   aria-expanded and .is-sub). Below 900px the whole thing is flat inside the
   slide-in panel, so there is nothing to open. */
.hd nav .sub{position:relative;display:flex;align-items:center;gap:4px}
.hd nav .sub > a{position:relative}
.hd nav .subtoggle{display:none;background:none;border:0;padding:6px;cursor:pointer;
  color:inherit;line-height:0}
.hd nav .subtoggle svg{width:9px;height:9px;display:block;transition:transform .2s}
.submenu{list-style:none;margin:0;padding:8px 0;position:absolute;top:100%;left:-18px;
  min-width:230px;background:var(--ground);border:1px solid var(--hair);
  border-top:2px solid var(--ink);
  opacity:0;visibility:hidden;transform:translateY(-6px);
  transition:opacity .18s,transform .18s,visibility .18s;z-index:55}
.submenu li{margin:0}
.submenu a{display:block;padding:11px 20px;font-size:11px;letter-spacing:.18em;
  text-transform:uppercase;text-decoration:none;color:var(--ink);opacity:.86}
.submenu a:hover,.submenu a:focus-visible{opacity:1;background:var(--panel);
  box-shadow:inset 3px 0 0 0 var(--amber)}
@media (hover:hover) and (min-width:901px){
  .sub:hover .submenu,.sub:focus-within .submenu{opacity:1;visibility:visible;transform:none}
}
@media (min-width:901px){
  .hd nav .subtoggle{display:block}
  .sub.is-sub .submenu{opacity:1;visibility:visible;transform:none}
  .sub.is-sub .subtoggle svg{transform:rotate(180deg)}
}
@media (max-width:900px){
  .hd nav .sub{flex-direction:column;align-items:flex-start;gap:16px;width:100%}
  .submenu{position:static;opacity:1;visibility:visible;transform:none;border:0;
    border-left:2px solid var(--hair);padding:0;margin-left:2px;background:none}
  .submenu a{padding:7px 0 7px 16px;font-size:12px}
  .submenu a:hover{background:none}
}

/* ── §12 text-only blocks never sit left with an empty right half ─────────
   A section with no image gets its text column pulled to ~70% and centred in
   the container, so the measure is deliberate rather than a half-empty page. */
.solo{max-width:min(70%,74ch);margin-inline:auto}
.solo .shead{grid-template-columns:1fr}
.solo .prose p,.solo .lead{max-width:none}
@media (max-width:900px){.solo{max-width:none}}

/* ── §32 the spec row as a VERTICAL list ──────────────────────────────────
   Label over value, one under the other, a hairline between rows. Max 560px. */
.spec{display:block;max-width:560px;background:none;border:0;
  border-top:2px solid var(--ink)}
.spec div{display:block;flex:none;max-width:none;padding:18px 0;
  border:0;border-bottom:1px solid var(--hair)}
.spec dt{font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--label);margin:0 0 7px}
.spec dd{margin:0;font-size:16px;color:var(--ink);line-height:1.45}
@media (max-width:760px){
  .spec div{flex:none;max-width:none;border-right:0;border-bottom:1px solid var(--hair);
    padding:18px 0}
  .spec div:last-child{border-bottom:1px solid var(--hair)}
}

/* ── §33 the open questions, shown rather than omitted ────────────────────
   A client-review build: every fact we do not hold is on the page in red, in
   brackets, addressed to the person who can answer it. Listed in site/README.md. */
.ask{color:var(--ask);font-size:14px;font-style:normal}
dd .ask{display:block}
.asknote{color:var(--ask);font-size:14px;margin:26px 0 0;max-width:62ch}

/* ── type over a photograph, with a scrim that clears 4.5:1 ───────────────
   v3 brings two of these back — "How we work" on the home page and the founder
   band on Our story. The picture is a background layer; over it sits a flat
   scrim at 78% of #141414 plus a slight gradient, which puts white text on an
   effective luminance well under 0.05 whatever the frame does. Measured in the
   walk (qc/WALK-260911-v3.md), not asserted. */
.scrim{position:relative;isolation:isolate;background:var(--noir);color:#fff;overflow:hidden}
.scrim__bg{position:absolute;inset:0;z-index:-2;margin:0}
.scrim__bg img{width:100%;height:100%;object-fit:cover;display:block}
.scrim::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(90deg,rgba(12,12,12,.90) 0%,rgba(12,12,12,.84) 58%,rgba(12,12,12,.78) 100%)}
.scrim__in{padding-top:clamp(64px,9vw,132px);padding-bottom:clamp(64px,9vw,132px)}
.scrim .k{color:var(--amber)}
.scrim h2{max-width:16ch}
.scrim p{max-width:54ch;color:rgba(255,255,255,.92);margin:22px 0 0}
.scrim .quote{font-family:var(--disp);font-weight:300;text-transform:none;
  font-size:clamp(1.25rem,2.4vw,1.9rem);line-height:1.3;letter-spacing:-.01em;
  max-width:24ch;margin:26px 0 0;color:#fff}
.scrim .tlink{margin-top:30px;color:#fff;border-color:rgba(255,255,255,.5)}
/* v3.7 (Bel 26-09-13): the teaser's "How we build" band is back on Home — interior photo,
   scrim, headline, body and the three stats inside it; the separate facts block is gone */
.scrim .facts{margin:44px 0 0;gap:clamp(22px,4vw,56px);flex-wrap:nowrap}
.scrim__txt:has(.facts){max-width:none}
.scrim .facts div{flex:0 0 auto;min-width:0}
@media (max-width:768px){.scrim .facts{flex-wrap:wrap;gap:22px 28px}.scrim .facts div{flex:1 1 40%}}
.scrim .facts b{color:#fff}
.scrim .facts span{color:rgba(255,255,255,.72)}
.scrim .tlink:hover{border-color:var(--amber)}
.scrim figcaption{margin:0;padding:0 var(--pad) clamp(16px,2vw,22px);
  font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;
  color:rgba(255,255,255,.72)}
.scrim__txt{max-width:70ch}

/* ── §28/§34 the map — v3.2 addendum ──────────────────────────────────────
   The panel is the EAST COAST zoomed (lon 149.4–154.2, lat -26.4 to -35.0), drawn
   from real longitude and latitude in tools/aus_map.py and smoothed to Béziers, so
   the line reads as the actual coast. A whole-of-Australia locator sits in the
   top-left corner with the zoomed region boxed.

   The MARKERS are HTML, not SVG: a 14px yellow square with a 2px ink outline and a
   14px Inter 500 label, each one an <a> to that development's page. HTML keeps the
   square and the type at exactly those sizes at every width (SVG text scales with
   the viewBox), gives real :hover / :focus-visible states, and lets the walk measure
   the label boxes with getBoundingClientRect. */
.map{margin:0}
.map__panel{position:relative;width:100%;margin:0}
/* v3.9: two panels of the same coast — WIDE for desktop, TALL for phones */
.map__panel--tall{display:none}
@media (max-width:760px){.map__panel--wide{display:none}.map__panel--tall{display:block}}
.map__geo{display:block;width:100%;height:100%}
.map .land{fill:#F4F4F2}
.map .coast{fill:none;stroke:var(--ink);stroke-width:1.5;stroke-linejoin:round;
  stroke-linecap:round;vector-effect:non-scaling-stroke}
.map .isle{fill:#F4F4F2;stroke:var(--ink);stroke-width:1.5;stroke-linejoin:round;
  vector-effect:non-scaling-stroke}
/* the state border — a hairline, dashed, never louder than the coast */
.map .bdr{fill:none;stroke:#C9C9C4;stroke-width:1;stroke-dasharray:5 5;
  vector-effect:non-scaling-stroke}
.map__reg{position:absolute;left:10px;font-size:11px;font-weight:500;letter-spacing:.18em;
  text-transform:uppercase;color:var(--label);pointer-events:none}
/* the locator: a white inset over the empty inland corner, ~180px */
.map__loc{position:absolute;right:16px;top:16px;width:210px;background:var(--paper);
  border:1px solid var(--hair);padding:8px;z-index:1}
.map__loc svg{display:block;width:100%;height:auto}
.map__loc .land{fill:#F4F4F2;stroke:var(--ink);stroke-width:1;
  stroke-linejoin:round;vector-effect:non-scaling-stroke}
.map__loc .isle{stroke-width:1}
.map__loc .zoom{fill:rgba(245,178,27,.34);stroke:var(--ink);stroke-width:2;
  vector-effect:non-scaling-stroke}

/* ── the markers ──────────────────────────────────────────────────────────*/
.map .mkr{--sq:16px;position:absolute;z-index:2;display:flex;align-items:center;gap:12px;
  text-decoration:none;color:var(--ink);
  /* v3.4: the anchor's BOX is bigger than the two things you can see — a label
     offset above its square on a lead line drags the box across its neighbour, and
     two markers can sit as little as 18px apart. An invisible box must not
     swallow the marker underneath it, so the anchor itself is not a pointer target
     and its two visible parts are. Hover and click still land on the anchor,
     because a hit on a descendant sets :hover on its ancestors and the click
     bubbles; the keyboard focus ring is untouched. Caught by tools/walk-map.py
     driving a real mouse onto every square. */
  pointer-events:none}
.map .mkr__sq,.map .mkr__lbl{pointer-events:auto}
/* the square sits ON the coordinate; the label hangs off it in one of four
   directions, so no two labels have to share the same side of the map */
.map .mkr--right{transform:translate(calc(var(--sq) / -2),-50%)}
.map .mkr--left{flex-direction:row-reverse;text-align:right;
  transform:translate(calc(-100% + var(--sq) / 2 - var(--dx,0px)),-50%)}
.map .mkr--above{flex-direction:column-reverse;align-items:center;gap:8px;text-align:center;
  transform:translate(-50%,calc(-100% + var(--sq) / 2))}
.map .mkr--below{flex-direction:column;align-items:center;gap:8px;text-align:center;
  transform:translate(-50%,calc(var(--sq) / -2))}
.mkr__sq{flex:none;position:relative;width:var(--sq);height:var(--sq);background:var(--amber);
  border:2px solid var(--ink);transition:background .18s}
/* v4.1: the leader-line call-out that held one Sydney square clear of the other is
   deleted with the development it belonged to (Bel, 26-09-16). No two markers sit
   close enough to need one now; the walk measures the label boxes either way. */
.mkr__lbl{position:relative;top:var(--ly,0px);display:block;white-space:nowrap}
/* the 1px halo is what keeps a label readable where it crosses the coastline —
   invisible on the ground, it only ever shows against the ink line itself */
.mkr__n,.mkr__p{text-shadow:0 1px 0 #fff,0 -1px 0 #fff,1px 0 0 #fff,-1px 0 0 #fff,
  1px 1px 0 #fff,-1px 1px 0 #fff,1px -1px 0 #fff,-1px -1px 0 #fff}
.mkr__n{display:block;font-family:var(--sans);font-size:15px;font-weight:500;
  letter-spacing:.12em;text-transform:uppercase;color:var(--ink);line-height:1.1}
.mkr__p{display:block;margin-top:5px;font-size:12px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--label);line-height:1.1}
.map .mkr:hover .mkr__sq{background:var(--ink)}
.map .mkr:hover .mkr__n{text-decoration:underline;text-underline-offset:3px;
  text-decoration-thickness:1px}
/* the ring goes on the two parts, not the anchor: on a phone one label is offset
   from its square, and an outline on the anchor would miss it */
.map .mkr:focus-visible{outline:none}
.map .mkr:focus-visible .mkr__sq,.map .mkr:focus-visible .mkr__lbl{
  outline:2px solid var(--ink);outline-offset:3px}
/* on its own page, this development's square is larger — the others stay links */
.map .mkr--on{--sq:20px}
.map figcaption{margin-top:22px;text-align:center;font-size:10.5px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--label)}

@media (max-width:760px){
  /* the panel goes full width. v4.1: the phone call-out rules that pulled one
     Sydney square and its label clear of the other are gone with the development
     they belonged to. */
  .map__loc{width:110px;right:8px;top:8px;padding:6px}
  .map__reg{left:6px;font-size:10px}
}

/* ── v3.4 §6: the map panel bleeds to the viewport's LEFT edge ─────────────
   On the Developments page the figure sits OUTSIDE .wrap, in a full-width band of
   its own, so the panel's left edge is x=0 by construction — not by 100vw
   arithmetic, which would have folded the scrollbar width into the offset and
   pushed the panel off-screen by several pixels in a real browser. The band keeps
   the container's padding on its RIGHT. Below 900 nothing bleeds: the band carries
   the same padding the container does, which is what it already looked like. */
.mapbleed{padding:0 var(--pad)}
@media (min-width:900px){
  .mapbleed{padding:0 var(--pad) 0 0}
  .mapbleed .map--bleed{width:100%;margin:0}
  .mapbleed .map--bleed .map__panel{margin:0}
}

/* ── §Contact — minimal ───────────────────────────────────────────────────*/
.cgrid{align-items:start}
.office{background:none;border:1px solid var(--hair);border-top:2px solid var(--ink)}
.sitelinks{list-style:none;margin:26px 0 0;padding:0}
.sitelinks li{margin-bottom:13px}
.sitelinks a{font-size:13.5px;color:var(--ink);text-decoration:underline;
  text-underline-offset:3px}
.sitelinks a:hover{text-decoration-color:var(--amber)}

/* ── §Home — the enquiry photo section ────────────────────────────────────*/
.cta-photo{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  border-top:2px solid var(--ink)}
/* the photo runs to the right edge of the page, but the type still has to line
   up with the container every other section uses */
.cta-photo__txt{padding:clamp(40px,6vw,84px) clamp(24px,4vw,64px)
  clamp(40px,6vw,84px) max(var(--pad),calc((100vw - 1200px) / 2 + var(--pad)));
  align-self:center;max-width:none;margin:0}
.cta-photo__txt h2{margin-top:14px}
.cta-photo__txt p{margin:20px 0 0;color:var(--body);max-width:40ch}
/* v3.2: Bel's line, then the office under it, quieter and smaller */
.cta-photo__line{font-size:clamp(15px,1.15vw,17px);max-width:46ch}
.cta-photo__office{margin-top:20px;font-size:14px;line-height:1.75;color:var(--label)}
.cta-photo__office a{color:var(--ink);text-decoration:underline;text-underline-offset:3px}
.cta-photo__office a:hover{text-decoration-color:var(--amber)}
.cta-photo__txt .btn{margin-top:32px}
.cta-photo figure{margin:0;align-self:stretch}
.cta-photo picture{display:block;height:100%}
.cta-photo img{width:100%;height:100%;object-fit:cover;min-height:300px}
@media (max-width:900px){
  .cta-photo{grid-template-columns:1fr}
  .cta-photo__txt{padding-right:var(--pad);padding-left:var(--pad);
    padding-bottom:clamp(28px,4vw,44px)}
}

/* ── §31 gallery: renders are called out, square corners everywhere ───────*/
.gal img,.gal picture,.fig img,.shot img,.tile img{border-radius:0}

.gal--pair{columns:2;margin-top:clamp(30px,4vw,44px)}
@media (max-width:760px){.gal--pair{columns:1}}

/* v3 §20: the developments card is vertically centred against the list */
/* v3.1: the figure is sticky on both pages — it is the hover surface, so it has to
   stay in view while the pointer runs down the rows. The v3 "vertically centred"
   override is withdrawn; with a 120px thumbnail in every row the rows carry
   themselves and a photo pinned halfway down a long list only reads as a mistake. */
.ix--mid{align-items:start}
@media (max-width:900px){.ix--mid .ixfig{order:-1}}

/* ── v4.0 (Bel 26-09-14): TWO STATES left, a small Australia with two pins right ──*/
.states{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:clamp(40px,6vw,96px);align-items:center}
.states .h{margin:0}
.states .lead{margin-top:22px;max-width:36ch}
.map--au{margin:0;width:100%}
.map--au .map__panel{width:100%;margin:0}
.map--au .land{fill:#F4F4F2;stroke:var(--ink);stroke-width:1.2;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.map--au .isle{stroke-width:1.2}
.map--au .mkr{--sq:14px}
.map--au .mkr__p{margin-top:6px;letter-spacing:.06em;text-transform:none;font-size:12.5px;color:var(--label)}
.map--au .mkr__p a{color:var(--ink);text-decoration:none;border-bottom:1px solid var(--hair)}
.map--au .mkr__p a:hover{border-bottom-color:var(--amber)}
.map--au .mkr:hover .mkr__n{text-decoration:none}
/* the labels wrap inside a fixed measure so "South East Queensland" and its two
   developments never run past the panel at any width */
.map--au .mkr__lbl{white-space:nowrap}
.map--au .mkr--above{gap:8px}
.map--au .mkr__n{line-height:1.2}
.map--au .mkr__p{line-height:1.45}
@media (max-width:860px){
  .states{grid-template-columns:1fr;gap:32px}
  .map--au{max-width:520px}
  .map--au .mkr__n{font-size:13px}
  .map--au .mkr__p{font-size:11.5px}
  /* the region line wraps on a phone so the SEQ block never runs past the panel */
  .map--au [data-key="seq"] .mkr__p{white-space:normal;max-width:96px}
  .map--au [data-key="seq"]{margin-top:-6px}   /* 8px of air between the two labels on a phone */
}

/* ── v4.2 (Bel 26-09-16): Our story hero = the drone loop on desktop, the still on phones ── */
.shot--video{position:relative}
.shot--video video{display:block;width:100%;aspect-ratio:21/9;object-fit:cover;background:var(--noir)}
.shot--video picture{display:none}
@media (max-width:900px){.shot--video video{display:none}.shot--video picture{display:block}}
@media (prefers-reduced-motion:reduce){.shot--video video{display:none}.shot--video picture{display:block}}

/* ── v4.4 (Bel 26-09-17) ─────────────────────────────────────────────────────── */
/* charcoal hero on Home only (option A); the menu stays white, Enquire yellow */
.hero--charcoal{background:var(--noir);color:#fff}
.hero--charcoal .k{color:var(--amber)}
.hero--charcoal h1{color:#fff}
.hero--charcoal h1 b{color:var(--amber)}
.hero--charcoal p{color:rgba(255,255,255,.82)}
.hero--charcoal .btn{background:var(--amber);color:#111;border-color:var(--amber)}
.hero--charcoal .btn:hover{background:#fff;color:#111;border-color:#fff}
.hero--charcoal figcaption{color:rgba(255,255,255,.7)}
/* v4.20 §1 (Tom, 22 Sep): the menu's Enquire button is BLACK again — his reference is a
   black ticker strip over a white header with the ink button. The v4.4 yellow-button
   exception is withdrawn, so .btn's own ink block (§143) is what the bar carries. */
/* the founder sections are white now */
/* "why it matters": three columns, hairlines, a yellow rule above each — no boxes */
.why3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}
.why3__col{padding:6px 36px 6px 0}
.why3__col + .why3__col{padding-left:36px;border-left:1px solid var(--hair)}
.why3__col::before{content:"";display:block;width:48px;height:4px;background:var(--amber);margin-bottom:22px}
.why3 h3{margin:0 0 12px}
.why3 p{margin:0}
@media (max-width:760px){.why3{grid-template-columns:1fr}.why3__col{padding:22px 0}.why3__col + .why3__col{padding-left:0;border-left:0;border-top:1px solid var(--hair)}}
/* the spec list and the story side by side on the development pages */
.devgrid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:clamp(40px,6vw,96px);align-items:start}
.devgrid .spec{max-width:none}
@media (max-width:860px){.devgrid{grid-template-columns:1fr;gap:40px}}
/* v4.9 (Bel 26-09-21): the states section is back on the WHITE ground — grey land, ink coast,
   yellow pins, ink labels. v4.11: two pins, one per region — the SEQ block stands above-right of
   its pin with the three developments stacked as links; Sydney's label sits to the right, over the
   sea. No leaders. */
.map .mkr--upright{align-items:flex-end;transform:translate(calc(var(--sq) / -2),calc(-100% + var(--sq) / 2))}
.map--au .mkr__n{text-decoration:none;color:var(--ink)}
.map--au a.mkr__n:hover,.map--au a.mkr__n:focus-visible{text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px;outline:none}
.map--au .mkr__n + .mkr__n{margin-top:4px}
.map--au .mkr__p{margin-top:6px}

/* ── v4.6 (Bel 26-09-21, option B): the Home hero — photo behind the type ────── */
.hero--over{position:relative;isolation:isolate;background:var(--noir);color:#fff;min-height:min(88vh,860px);
  display:flex;align-items:flex-end;padding:0;overflow:hidden}
.hero--over .hero__bg{position:absolute;inset:0;z-index:0}
.hero--over .hero__bg picture,.hero--over .hero__bg img{display:block;width:100%;height:100%;object-fit:cover}
/* the gradient is heavy at the bottom — the type must read first (measured in the walk) */
.hero--over::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,rgba(32,32,32,.45) 0%,rgba(32,32,32,.12) 20%,rgba(32,32,32,.66) 42%,rgba(32,32,32,.82) 66%,rgba(32,32,32,.84) 100%),
             linear-gradient(90deg,rgba(32,32,32,.70) 0%,rgba(32,32,32,.30) 45%,rgba(32,32,32,0) 72%)}
.hero--over .copy{position:relative;z-index:2;padding-top:clamp(220px,34vh,360px);padding-bottom:clamp(44px,5vw,64px)}
.hero--over .k{color:var(--amber)}
.hero--over h1{color:#fff}
.hero--over h1 b{color:var(--amber)}
.hero--over p{color:rgba(255,255,255,.82)}
.hero--over .btn{background:var(--amber);color:#111;border-color:var(--amber)}
.hero--over .btn:hover{background:#fff;color:#111;border-color:#fff}
.hero__stats{display:flex;gap:clamp(28px,4vw,64px);margin-top:clamp(36px,4vw,56px);padding-top:26px;border-top:1px solid rgba(255,255,255,.18);flex-wrap:wrap}
.hero__stats b{display:block;color:var(--amber);font-weight:600;font-size:14px;letter-spacing:.04em}
.hero__stats span{display:block;color:rgba(255,255,255,.62);font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;margin-top:6px}
.hero--over + .sec{padding-top:clamp(64px,8vw,112px)}
@media (max-width:760px){
  .hero--over{min-height:min(84vh,720px)}
  .hero--over .copy{padding-top:clamp(200px,40vh,320px)}
  .hero--over::after{background:linear-gradient(180deg,rgba(32,32,32,.40) 0%,rgba(32,32,32,.15) 22%,rgba(32,32,32,.70) 50%,rgba(32,32,32,.88) 100%)}
  .hero__stats{gap:22px 28px}
}

/* v4.20 §1 (Tom's second review, 22 Sep): THE HEADER IS BACK TO THE ORIGINAL — the
   white bar under the black ticker, the client's own colour logo (black wordmark,
   yellow mark) and the black ENQUIRE button. The v4.6 block that painted the bar noir
   and inverted the logo in CSS is removed here, along with the nav/submenu/drawer
   colour rules that followed it: the base header rules (§119 ff.) are the whole
   treatment again, and the header now uses the colour PNG rather than the negative
   (build-images.py writes both; the footer keeps the negative). Everything else from
   v4.7–v4.19 is untouched — charcoal hero, dark bands, white map, founder band. */

/* ── v4.8 (Bel 26-09-21) ──────────────────────────────────────────────────── */
/* the hero type block spans the container, so it starts on the same left edge as every other section */
.hero--over .copy{width:100%}
/* the founder band exactly as it was — the original .band/.in/.founder geometry — on a white ground */
.band--white{background:#fff;color:var(--ink)}
.band--white .k{color:var(--ink)}
.band--white .h,.band--white h2{color:var(--ink)}
.band--white p{color:var(--body)}
.band--white .quote{color:var(--ink)}
.band--white .tlink{color:var(--ink);border-color:var(--hair)}
.band--white .founder__fig figcaption{color:var(--label)}

/* v4.9: the band's ::before overlay (the old texture layer, flat noir since v4.7) must not paint over the white ground */
.band--white::before{display:none}

/* v4.12 (Bel 26-09-21): the concrete grain is back, in black, on exactly three surfaces — the Beyond zero band
   (Zero Estate), the founder band on Our story, and the footer. The Home founder band stays white
   (.band--white hides the ::before), the ticker and header stay flat. */

/* v4.15 (Bel 26-09-21, "I don't like that transition in the mobile"): on a phone the 4:5 art crop kept
   its own height (469px) inside a 715px hero, so the photo stopped mid-hero and the rest was flat
   charcoal. The picture and the image are pinned to the hero's box now, so the photograph runs
   behind the whole hero on every width and the gradient does the readability, as on desktop. */
.hero--over .hero__bg picture,.hero--over .hero__bg img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}

/* v4.16 (Bel 26-09-21): on desktop the type block sat on the fold — the CTA ended on the screen's bottom
   line. Less air above the block, more below it, so the button clears the fold on a 900px-tall
   laptop and on a 1080px screen alike (measured in the walk). */
.hero--over .copy{padding-top:clamp(160px,24vh,280px);padding-bottom:clamp(76px,9vh,120px)}
@media (max-width:760px){.hero--over .copy{padding-top:clamp(200px,40vh,320px);padding-bottom:clamp(64px,8vh,96px)}}

/* ── v4.20 (Tom's second review, 22 Sep; Bel's rulings 23 Sep) ──────────────── */
/* §3 — Yatala's third property. 43 Computer Road was built by us and SOLD, so it gets
   its own short block under the spec with its own status, rather than a row inside a
   list whose Status cell says the opposite. Same vertical list, one hairline above. */
/* No rule of its own: the last row of the spec above already closes on a hairline, and
   the nested list opens on the same 2px ink rule the main spec does. A third line here
   read as a mistake in the 1440 capture. Air does the separating instead. */
.specsub{margin-top:clamp(34px,4.4vw,52px);max-width:560px}
.specsub .k{display:block;margin-bottom:12px}
.specsub .spec{margin-top:0}

/* Part 2 — the lead form.
   The honeypot is a REAL field with a plausible name, taken off the tab order and out of
   the accessibility tree in the markup. It is hidden here, in CSS, rather than with a
   `hidden` attribute: a hidden attribute is the first thing a scraper skips, and the
   point of the trap is that a bot fills it. Left in the flow at zero size, clipped, so
   it is never announced, never focusable and never seen. */
.hp{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);
  clip-path:inset(50%);white-space:nowrap;border:0;padding:0;margin:-1px}
/* Turnstile sits between the message field and the button; the widget draws its own
   box, so the slot only reserves the height a managed challenge needs and nothing
   jumps when it resolves. A non-interactive or invisible key renders nothing at all. */
.f--turnstile{min-height:1px}
.f--turnstile .cf-turnstile:not(:empty){margin-top:2px}
.f--turnstile iframe{display:block}