/* ============================================================
   Walter North Adelaide — additions to the approved design system.
   Loads LAST, after walter-tokens / site-system / forms-frame-v2, so it
   reads as a diff. Tokens only, never a raw hex: law 2 of the design
   system, and styling a Walter web surface off-token is the exact error
   that made downsizer calculator v1 off-brand.
   ============================================================ */

/* The form error state.

   The design pack has no error style because its forms cannot fail: the
   delivered forms.js never submits, so there is nothing to report. Real
   forms fail, and between 22/07/26 and 30/07/26 a Walter buyer who hit a
   failure got no message at all, just a dead button. Anything the buyer
   must read to recover has to be impossible to miss on a phone, at 60+,
   in daylight.

   --w-alert is the system's sanctioned alert colour (8.9:1 on white), the
   same value the calculator uses to express a shortfall. */
.wna-form-error {
  margin: 0 0 var(--space-m);
  padding: var(--space-s) var(--space-m);
  background: var(--white);
  border-left: 3px solid var(--w-alert);
  color: var(--w-alert);
  font-family: var(--font-body);
  font-size: 2rem;
  line-height: var(--body-line-height);
  font-stretch: 67.5%;
  font-variation-settings: "wght" 400, "wdth" 67.5;
}

.wna-form-error:focus {
  outline: 0.2rem solid var(--primary-dark);
  outline-offset: 0.2rem;
}

/* Inside a dark modal foot the white plane still reads, so no variant is
   needed. Keep the rule single-purpose. */

/* The submit button while a request is in flight. The label changes to
   "Sending..." in forms.ts; this stops the width jumping as it does and
   makes the disabled state legible rather than merely faded. */
.ap-submit[disabled] {
  opacity: 0.55;
  cursor: not-allowed;
}

/* ------------------------------------------------------------------
   Hero headline on phones — a specificity fix, not a design change.

   The design intends 3rem for the hero h1 at <=900px, and says so: each
   page's own style block carries `.hero h1 { font-size: 3rem; }` inside
   its 900px query. That rule never wins. site-system.css line 165, inside
   the 1200px query, sets `.w-calc .hero h1 { font-size: 4.4rem; }` at
   specificity (0,2,1), which beats the page rule's (0,1,1) — so every
   phone got 44px.

   At 44px "opportunity." alone needs 468px of line box in a 341px column,
   so the home hero headline was CLIPPED at every phone width tested (360,
   390 and 414). Nothing overflowed the document, because the hero clips its
   own overflow, which is why the scrollWidth check read clean and only a
   screenshot showed it.

   This restates the design's own value at matching specificity. It does not
   invent a new size. Body copy is untouched: the 24px body and 15px floor
   are for reading, and the audience is 60+.
   ------------------------------------------------------------------ */
@media (max-width: 900px) {
  .w-calc .hero h1,
  .w-calc .f-hero h1 {
    font-size: 3rem;
  }
}

/* Very narrow phones. The longest single word in the headline sets the
   floor here, not the sentence. */
@media (max-width: 400px) {
  .w-calc .hero h1,
  .w-calc .f-hero h1 {
    font-size: 2.8rem;
  }
}

/* ------------------------------------------------------------------
   NOTE ON THE `html` PREFIX BELOW.

   Every page carries its own <style is:global> block, inherited from the
   design prototypes. Astro compiles those into /_astro/<page>.css and
   loads them AFTER these stylesheets. They contain the very same
   `.w-calc .w-head` selectors at identical specificity, so source order
   decided the winner and the page always won — the first version of
   these fixes deployed and changed nothing at all.

   `html .w-calc ...` adds one element to the selector, which is enough
   to win deterministically without reaching for !important.
   ------------------------------------------------------------------ */

/* ==================================================================
   MOBILE FIXES — Keith's review, 31/07/26
   ================================================================== */

/* ------------------------------------------------------------------
   1. THE POP-UP FORMS WERE UNUSABLE ON A PHONE.

   Verified on an iPhone 12 profile: the appointment modal filled the
   screen with its heading and intro, the date strip was clipped
   mid-number, and NOT ONE contact field was reachable. .ap-card carries
   `overflow: hidden` with `max-height: 100vh`, so everything below the
   fold was simply cut off with no way to scroll to it. A buyer could
   not have booked an appointment on a phone at all.

   Three changes, in order of importance:
     a. the card scrolls
     b. the head stops eating the screen
     c. the action stays reachable while you scroll

   100dvh, not 100vh: on mobile Safari 100vh is the height WITHOUT the
   collapsing address bar, so a 100vh panel is taller than what you can
   actually see and the bottom sits permanently off-screen.
   ------------------------------------------------------------------ */
@media (max-width: 900px) {
  html .w-calc .ap-modal { padding: 0; align-items: stretch; }

  /* The modal is a full-screen page on a phone, and it scrolls as ONE page.
     Nothing is pinned.

     The version before this pinned the action bar to the bottom. It meant the
     fields were reachable, but only through a letterbox: a fixed head above, a
     fixed bar below, and a cramped strip between them doing all the scrolling
     (Keith, 31/07 — "head and button are fixed which is making the content
     area have to scroll to see all the fields, this is poor UI"). He is right.
     On a phone the honest shape is a normal page you scroll top to bottom, so
     the head scrolls away, the fields get the full width and height of the
     screen, and the button is simply the last thing you reach.

     min-height rather than height: fill the screen when the form is short,
     grow past it when the form is long. */
  /* Kill the entrance animation on phones. This is NOT about motion taste.
     ap-rise animates transform with fill-mode `both`, so when it finishes the
     card is left holding transform: matrix(1,0,0,1,0,0) — an IDENTITY
     transform, visually nothing, but still a transform, and any transform
     makes an element the containing block for its position:fixed descendants.
     That is what pinned the close button to the scrolling card instead of the
     viewport, so it scrolled away and a buyer at the bottom of the form had no
     way out. Diagnosed by walking the ancestor chain rather than guessing:
     .ap-card reported CREATES_CONTAINING_BLOCK true while .ap-modal did not. */
  html .w-calc .ap-card {
    animation: none;
    transform: none;
    min-height: 100dvh;
    height: auto;
    max-height: none;
    overflow: visible;
    border-radius: 0;
    display: block;
  }

  /* The MODAL is the scroll container now, not the card. */
  html .w-calc .ap-modal {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    /* backdrop-filter has to go, and not for looks: an element with a
       backdrop-filter becomes the CONTAINING BLOCK for any position:fixed
       descendant. With it, the pinned close button was fixed relative to the
       scrolling modal rather than the viewport, so it scrolled away with the
       head and a buyer at the bottom of the form had no way out. The modal
       covers the whole screen on a phone, so there is no backdrop to blur. */
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  /* The head was over half the screen. The display face is beautiful and
     enormous; at 390px it needs to introduce the form, not become it. */
  html .w-calc .ap-head { padding: 2rem var(--space-m) 1.6rem; }
  html .w-calc .ap-head h2 { font-size: 2.2rem; margin: 0 0 1rem; }
  html .w-calc .ap-head .ap-kicker { font-size: 1.6rem; margin-bottom: .8rem; }
  html .w-calc .ap-head p { font-size: 1.7rem; line-height: 1.45; }

  html .w-calc .ap-col { padding: 2rem var(--space-m); }
  html .w-calc .ap-col h3 { margin-top: 1.6rem; font-size: 2rem; }
  html .w-calc .ap-col h3:first-child { margin-top: 0; }

  /* The date strip was clipped mid-number at three columns. Four fits the
     eight offered days in two tidy rows. */
  html .w-calc .ap-dates { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .6rem; }
  html .w-calc .ap-times { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .6rem; }
  html .w-calc .ap-date { padding: .8rem .4rem; }
  html .w-calc .ap-date .dom { font-size: 2rem; }
  html .w-calc .ap-time { padding: 1rem .4rem; font-size: 1.6rem; }

  /* The action pins to the bottom of the card so it is always one tap
     away, however far down the form the buyer has scrolled. */
  /* Not sticky. It is the end of the page, where it belongs. */
  html .w-calc .ap-foot {
    position: static;
    background: var(--secondary);
    padding: 1.6rem var(--space-m) calc(2.4rem + env(safe-area-inset-bottom));
  }
  /* The pinned bar was ~230px of a 664px screen. The summary line is real
     feedback and stays; the legal note scrolls with the form instead of
     being pinned, where it was costing a third of the visible form. */
  html .w-calc .ap-foot .ap-summary { font-size: 1.6rem; margin: 0 0 .8rem; }
  html .w-calc .ap-foot .ap-legal { position: static; font-size: 1.3rem; margin: .8rem 0 0; line-height: 1.35; }
  html .w-calc .ap-submit { width: 100%; padding: 1.4rem 2rem; font-size: 1.6rem; }

  /* The close button is the ONE thing that stays put, and it has to: with the
     whole modal scrolling, an absolutely-positioned close scrolls away with
     the head, and a buyer who has scrolled to the bottom has no way out.
     44px is the accepted minimum thumb target and matters more than usual
     for a 60-plus audience. */
  /* sticky, not fixed. position:fixed kept resolving against an ancestor
     rather than the viewport — .ap-card carries a filled transform animation,
     which is enough to make it the containing block — so the close scrolled
     away with the head and a buyer at the bottom of the form had no way out.
     sticky resolves against the nearest scrollport, which IS the modal, so it
     stays put no matter what any ancestor declares. float keeps it out of the
     flow so it does not push the heading down. */
  html .w-calc .ap-close {
    position: fixed;
    top: .8rem;
    right: .8rem;
    z-index: 5;
    width: 4.4rem;
    height: 4.4rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(78, 42, 10, .55);
    border-radius: 100px;
    color: var(--primary-ultra-light);
  }
  html .w-calc .ap-chip { padding: 1rem 1.6rem; }
}

/* ------------------------------------------------------------------
   2. THE FOOTER MARKS — MJ's mobile design, matched.

   Keith: "mobile footer should look like MJ design". It is
   2468_Walter Website Mobile V4 - Footer Only.jpg. Every value below is
   MEASURED off that file rather than judged by eye: the artwork is a
   1500px canvas for a 390pt screen, so 3.846x, and the marks row was
   sampled for each mark's bounding box.

     mark      artwork px    at 390pt      gap to next
     Walter    366 x 213     95 x 55       15.6
     Enzo      340 x 170     88 x 44       15.6
     Instagram 172 x 172     45 x 45       15.1
     Facebook  173 x 172     45 x 45       -

   One row, all four, CENTRED as a group: the artwork spans x 112-1396 on a
   1500 canvas, so the group centre is 754 against a canvas centre of 750.

   MJ's own reversed logo (Links/ECA Logo Horiz_REV.png) turned out to be
   byte-identical to the eca-logo.png already shipping, so the asset was never
   the problem — the earlier version was only ever laid out wrongly.
   ------------------------------------------------------------------ */
@media (max-width: 900px) {
  html .w-calc .foot-marks {
    width: 100%;
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: center;
    gap: 1.55rem;
    margin: 0;
  }

  /* Sized by HEIGHT so each mark keeps its own aspect ratio; the widths above
     are what these heights produce. */
  html .w-calc .foot-marks .lockup { height: 55px; width: auto; flex: 0 0 auto; }
  html .w-calc .foot-marks .eca    { height: 44px; width: auto; flex: 0 0 auto; }
  html .w-calc .foot-marks .social {
    width: 4.5rem;
    height: 4.5rem;
    flex: 0 0 auto;
    border-color: rgba(246, 215, 187, .55);
  }
  html .w-calc .foot-marks .social svg { width: 20px; height: 20px; }

  /* MJ centres the legal line too, and lets it wrap rather than squeeze. */
  html .w-calc .foot-legal {
    justify-content: center;
    text-align: center;
    flex-wrap: wrap;
    gap: 1rem 2rem;
  }
}

/* Below 360px the four marks no longer fit on one line at MJ's sizes. Step
   them down together rather than let the row wrap, which would break the
   composition he drew. */
@media (max-width: 360px) {
  html .w-calc .foot-marks { gap: 1.1rem; }
  html .w-calc .foot-marks .lockup { height: 46px; }
  html .w-calc .foot-marks .eca    { height: 37px; }
  html .w-calc .foot-marks .social { width: 3.8rem; height: 3.8rem; }
}

/* ------------------------------------------------------------------
   3. THE HEADER TOOK TOO MUCH OF THE SCREEN.

   83px of a 664px viewport, and it is sticky, so it is gone for good —
   and that is before mobile Safari's own chrome. Trimming the logo and
   the padding brings it to about 56px, a third smaller, without losing
   the phone number or the booking CTA, which are the two things a buyer
   on a phone actually reaches for.
   ------------------------------------------------------------------ */
@media (max-width: 900px) {
  html .w-calc .w-head { padding: .8rem var(--space-m); gap: 1rem; }
  html .w-calc .w-head img { height: 34px; }
  html .w-calc .w-head .w-head-cta { padding: .9rem 1.4rem; font-size: 1.5rem; }
  html .w-calc .w-head .w-head-tel-icon { width: 4rem; height: 4rem; }
}

/* ==================================================================
   DESKTOP FORMS — no scrolling to reach a field (Keith, 31/07)
   ==================================================================

   "form issue on desktop, i dont want users to have to scroll to enter
   form fields. this is terrible UI."

   Measured on the deployed preview, 1440x900. .ap-card is overflow:hidden,
   so the real scroll container was .ap-body: it had 473px of room for 856px
   of content, and Mobile, Postcode and the whole time picker sat below the
   fold of a sub-panel that has no scrollbar of its own. Reachable, but only
   by scrolling inside a panel nobody knows scrolls.

   Where the 856px actually went, measured rather than guessed:
     textarea            360px   <- the single biggest offender
     dates    4 x 2 grid 196px   items 94px tall
     times    3 x 3 grid 184px
     head                220px   a heading and an intro, before any field
     foot                153px
     each text field      99px   33px label + 60px input

   The notes textarea carried rows="6" and rendered 360px — 42% of the form,
   for an optional field. A min-height cannot shrink that; only an explicit
   height can, which is why the first attempt at this changed nothing.

   Budget below is set for 1366x768, the smallest laptop in real use. If it
   fits there it fits everywhere larger. The body keeps overflow:auto purely
   as a fallback for a freak window; at 768 and up nothing should reach it.
   ------------------------------------------------------------------ */
@media (min-width: 901px) {
  /* Sizes to content, capped — not a fixed tall box that clips the rest. */
  html .w-calc .ap-card { max-height: 96vh; height: auto; }

  /* The head introduces the form; it does not get to be a third of it.
     The intro paragraph goes: the button the buyer just pressed said "Book
     an appointment", so the sentence explaining that it books an appointment
     is costing 60px to say nothing. */
  html .w-calc .ap-head { padding: 2rem 4.8rem 1.6rem; }
  html .w-calc .ap-head h2 { font-size: 2.8rem; line-height: 1.1; margin: 0; }
  html .w-calc .ap-head .ap-kicker { margin: 0 0 .6rem; font-size: 1.5rem; }
  html .w-calc .ap-head p { display: none; }

  html .w-calc .ap-col { padding: 2rem 4rem; }
  html .w-calc .ap-col h3 { font-size: 1.9rem; margin: 0 0 1rem; }
  html .w-calc .ap-col h3:not(:first-child) { margin-top: 1.6rem; }

  /* Date and time pickers. Same grids, shorter cells — a date needs to be
     legible, not 94px tall. Times go to 5 across so nine slots take two rows
     instead of three. */
  html .w-calc .ap-dates { gap: .6rem; }
  html .w-calc .ap-date { padding: .8rem .4rem; min-height: 0; }
  html .w-calc .ap-date .ap-dow { font-size: 1.3rem; }
  html .w-calc .ap-date .ap-dnum { font-size: 2rem; line-height: 1.1; }
  html .w-calc .ap-date .ap-dmon { font-size: 1.2rem; }
  html .w-calc .ap-times { grid-template-columns: repeat(5, 1fr); gap: .6rem; }
  html .w-calc .ap-time { padding: .8rem .3rem; font-size: 1.5rem; min-height: 0; }
  /* The hint repeats what the picker already shows. */
  html .w-calc .ap-hint { display: none; }

  html .w-calc .ap-fieldset { margin-top: 1.2rem; }
  html .w-calc .ap-chips { gap: .6rem; }
  html .w-calc .ap-chip { padding: .8rem 1.4rem; font-size: 1.5rem; }

  /* Fields: 99px -> ~82px. The 20px ink stays legible; only the box shrinks. */
  html .w-calc .ap-field { margin-bottom: 1.2rem; }
  html .w-calc .ap-field label { margin-bottom: .4rem; font-size: 1.5rem; }
  html .w-calc .ap-field input { padding: 1rem 1.4rem; font-size: 1.9rem; }
  html .w-calc .ap-row { gap: 1.4rem; }

  /* THE textarea. height, not min-height — rows="6" beats a minimum. */
  html .w-calc .ap-field textarea {
    height: 7rem;
    min-height: 0;
    padding: 1rem 1.4rem;
    font-size: 1.8rem;
    resize: vertical; /* a buyer with more to say can still open it up */
  }

  html .w-calc .ap-foot { padding: 1.6rem 4rem; }
  html .w-calc .ap-foot .ap-legal { margin: .6rem 0 0; font-size: 1.3rem; }
  html .w-calc .ap-submit { padding: 1.4rem 3.2rem; }
  html .w-calc .ap-summary { margin: 0; font-size: 1.5rem; }
}

/* ------------------------------------------------------------------
   SHORT DESKTOP WINDOWS — the extra squeeze, scoped by HEIGHT

   The problem was never screen width; it is window height. At 1512x982 and
   1920x1080 the block above already fits with room to spare. At 1366x768 the
   body still overflowed by 135px and at 1280x800 by 105px.

   So the tightening belongs behind a height query, not a width one. A 27in
   monitor keeps the roomier grid; a 13in laptop gets the compact one. Both
   reach every field without scrolling, which is the requirement.

   860px is the threshold: 1440x900 was 9px over, so it needs this too.
   ------------------------------------------------------------------ */
@media (min-width: 901px) and (max-height: 910px) {
  html .w-calc .ap-card { max-height: 98vh; }

  html .w-calc .ap-head { padding: 1.4rem 4rem 1.2rem; }
  html .w-calc .ap-head h2 { font-size: 2.4rem; }
  html .w-calc .ap-head .ap-kicker { font-size: 1.3rem; margin-bottom: .4rem; }

  html .w-calc .ap-col { padding: 1.6rem 3.2rem; }
  html .w-calc .ap-col h3 { font-size: 1.7rem; margin: 0 0 .8rem; }
  html .w-calc .ap-col h3:not(:first-child) { margin-top: 1.2rem; }

  /* One row each. Eight dates across a ~600px column is 72px per cell and
     nine times is 64px — both comfortably legible at these sizes, and it
     buys back a whole row from each grid. */
  html .w-calc .ap-dates { grid-template-columns: repeat(8, 1fr); gap: .5rem; }
  html .w-calc .ap-date { padding: .6rem .2rem; }
  html .w-calc .ap-date .ap-dow { font-size: 1.1rem; }
  html .w-calc .ap-date .ap-dnum { font-size: 1.7rem; }
  html .w-calc .ap-date .ap-dmon { font-size: 1.1rem; }
  html .w-calc .ap-times { grid-template-columns: repeat(9, 1fr); gap: .5rem; }
  html .w-calc .ap-time { padding: .7rem .2rem; font-size: 1.35rem; }

  html .w-calc .ap-chip { padding: .7rem 1.2rem; font-size: 1.4rem; }
  html .w-calc .ap-fieldset { margin-top: 1rem; }

  html .w-calc .ap-field { margin-bottom: .9rem; }
  html .w-calc .ap-field label { font-size: 1.4rem; margin-bottom: .3rem; }
  html .w-calc .ap-field input { padding: .8rem 1.2rem; font-size: 1.8rem; }
  html .w-calc .ap-field textarea { height: 5rem; padding: .8rem 1.2rem; font-size: 1.7rem; }

  html .w-calc .ap-foot { padding: 1.2rem 3.2rem; }
  html .w-calc .ap-submit { padding: 1.2rem 2.8rem; }
  html .w-calc .ap-foot .ap-legal { font-size: 1.2rem; margin-top: .4rem; }
}

/* ------------------------------------------------------------------
   .status must never push the page wide

   The line is `white-space: nowrap` by design — one clean display-face
   sentence. That is fine until the copy gets longer: "Twenty-one residences.
   More than half now sold, ten still available." measured 1763px inside a
   1300px box and took the whole document to 1833px at a 1440px viewport,
   giving the entire homepage a horizontal scrollbar.

   The copy is back to the short form, so this is a guard rather than a fix.
   It means the next person to lengthen this sentence gets a second line
   instead of a broken page — a wrapped heading is a design compromise, a
   horizontally scrolling homepage is a defect.
   ------------------------------------------------------------------ */
html .w-calc .status,
html .status {
  max-width: 100%;
}
@supports (width: min(1px, 1px)) {
  html .status { white-space: normal; }
  /* Keep the single-line look wherever the sentence genuinely fits. */
  @media (min-width: 1024px) {
    html .status { white-space: nowrap; }
  }
}

/* ------------------------------------------------------------------
   Interest chips carry the from-price (Keith, 01/08)

   Two lines, not one: "Two-bedroom from $1,275,000" on a single line makes
   the chip about 240px wide, which wraps the three-chip row onto two rows on
   a phone and pushes the appointment modal — which had 0px of spare height at
   1366x768 — back into scrolling. The price sits under the label instead, at
   a lighter weight, so the chip grows ~14px rather than doubling in width.
   ------------------------------------------------------------------ */
html .ap-chip { display: flex; flex-direction: column; align-items: center; gap: .2rem; line-height: 1.15; }
html .ap-chip-from { font-size: .82em; opacity: .72; font-variant-numeric: tabular-nums; white-space: nowrap; }
/* "Either" has no price, so it would sit taller-centred next to the other two
   without this — the row must align on the label, not the box. */
html .ap-chips { align-items: stretch; }
html .ap-chip:not(:has(.ap-chip-from)) { justify-content: center; }

/* ------------------------------------------------------------------
   FOOTER FORM — submits in place (Keith, 01/08)

   "The footer form can have it on the page on website, footer form doesnt
   need modal popup, form on homepage > button > submit."

   It used to carry data-form-open="register": the button copied the fields
   into the register modal and opened it, so a buyer who had already filled in
   five fields was shown the same five fields again. It now posts where it
   stands, through the identical submit path, validation and tracking as the
   modals.

   The chips inherit .ap-chip from the modal styles; only the dark-footer
   colours and the panel's own rhythm are set here.
   ------------------------------------------------------------------ */
.foot-form .wdz-interest {
  border: 0;
  margin: 0 0 1.6rem;
  padding: 0;
}
.foot-form .wdz-interest legend {
  padding: 0;
  margin-bottom: .9rem;
  font-size: 1.5rem;
  letter-spacing: .02em;
  opacity: .85;
}
/* The design's own .ap-chip rule is UNSCOPED and already correct here: white
   fill, brown ink, brown border. My first pass overrode it with cream-on-
   translucent, which was written for a DARK footer — but this form panel is
   rgb(243,242,241), so the chips rendered near-white text on a near-white
   panel and only the pressed one was legible. Nothing to override; the layout
   below is all the footer needs. */
.foot-form .ap-chips { display: flex; flex-wrap: wrap; gap: .8rem; margin-bottom: 0; }
.foot-form .ap-chip { flex: 1 1 auto; text-align: center; }

/* showError() injects .wna-form-error; style it for the dark footer. */
.foot-form .wna-form-error {
  margin: 1rem 0 0;
  font-size: 1.5rem;
  color: #ffd9c9;
}

/* The confirmation swaps for the form, rather than an overlay — there is no
   dialog here to close. */
.foot-form .foot-done { display: none; }
.foot-form[data-done='1'] form { display: none; }
.foot-form[data-done='1'] .foot-done { display: block; }
.foot-form .foot-done h3 { margin: 0 0 .8rem; font-size: 2.4rem; }
.foot-form .foot-done p { margin: 0; opacity: .85; }

/* The residence choice is required (Keith, 01/08) — the marker says so before
   a buyer presses submit and gets told. */
html .ap-fieldset legend .req { color: #a8452f; margin-left: .2rem; font-weight: 600; }
html .foot-form .wdz-interest legend .req { color: #e8a08c; }

/* ------------------------------------------------------------------
   The mobile result bar must read as a LAYER, not as part of the page

   Reported 01/08 as "weird result showing on bottom of page": the
   "Your whole position" heading appeared to collide with "Shortfall to cover
   $162,768" and the Book now button.

   Content scrolling under a fixed CTA is correct behaviour — the bar is a
   persistent call to action and it is meant to stay. The defect is that
   nothing separates it from what passes behind. Its own shadow is
   rgba(72,43,17,.18), dark brown, and the section it overlaps is also dark
   brown, so the boundary is invisible and the two sets of type read as one
   broken block.

   A hairline in the ultra-light ink gives the bar an edge against ANY
   section it passes over, dark or light, and a deeper shadow lifts it.
   ------------------------------------------------------------------ */
@media (max-width: 900px) {
  html .wdz-stickybar {
    border-top: 1px solid rgba(252, 242, 232, .28);
    box-shadow: 0 -10px 30px rgba(30, 16, 4, .45);
  }
  /* The bar is ~118px. Any section that ends against it needs to clear it, not
     just the footer — a heading half-covered by a CTA reads as a bug. */
  html body:has(.wdz-stickybar.show) .w-calc > section:last-of-type { padding-bottom: 13rem; }
}

/* --- the walkthrough poster carries its own play glyph (04/08/26) -------------
   video-poster.webp is the video's own poster frame and has a play button inside
   the artwork. The module's overlay button is suppressed on that one module so
   the poster does not render two. Every other .vid-mod keeps its overlay: their
   posters are plain renders. The module keeps role="button", tabindex and its
   aria-label, so nothing changes for a keyboard or screen-reader user. */
html .vid-mod--posterplay .vid-play { display: none; }

/* --- the walkthrough heading on a phone (04/08/26) ----------------------------
   MEASURED at 390 × 844 in a real browser: "Watch a walkthrough of a residence."
   at 32px needs 376px inside a 341px column, so the home page scrolled sideways
   by 11px. "walkthrough" is the token that will not fit, and breaking a word in
   half is worse than a smaller line, so the size steps rather than the word. */
@media (max-width: 480px) {
  html .walk .h2 { font-size: 2.8rem; }
}

/* --- 320px: the width the design never specified (06/08/26) --------------------
   Keith asked for an end-to-end check, and at 320px the home page scrolled
   sideways by 33px, the calculator by 24px, and residence 402's saving figure
   painted 9px past its brown bar. The site's narrowest declared step is 360px, so
   nothing below it had ever been sized, and at 320 a single display-face word is
   simply wider than the column: "calculator." alone overflows an h1 by 31px, and a
   price token like $1,275,000 overflows the type card by 19px.

   Sideways scroll is a defect at any width, so this step exists. It is the
   SMALLEST intervention that removes it: the same proportional step down the site
   already uses between its 480 and 360 breakpoints, applied only to the elements
   measured as overflowing, and nothing else. It cannot affect 360px and up.

   VERIFIED: at 360, 390 and 1440 every heading's computed font-size and every
   page height is byte-identical before and after this block. */
@media (max-width: 359px) {
  html .w-calc .hero h1,
  html .w-calc .f-hero h1 { font-size: 2.5rem; }
  html .w-calc .h2,
  html .w-calc .ex-head h2 { font-size: 2.6rem; }
  html .w-calc .hood { font-size: 2.2rem; }
  /* A price is one unbroken token. It may wrap onto a second line rather than
     push the page sideways; it must never break mid-number, so nowrap stays and
     only the size steps. */
  html .w-calc .type-price { font-size: 3rem; }
  /* The saving bar's gutters again, 9px tighter than the 560px step, and its
     figure steps down too: at 3.2rem "$70,830" still painted past the brown. */
  #brx-content .duty-panel .dsave { padding-left: 2rem; padding-right: 2rem; }
  #brx-content .dsave b { font-size: 2.6rem; }
  /* The panel rows need the same step. "Up to $28,000" replaced the old range on
     06/08 and is one nowrap phrase, so at 2.6rem it painted 8px past the panel
     edge at this width. Caught by the ux-gate's spill check on the very change
     that introduced it.
     residence-detail.css is bundled by Astro and loads AFTER this file, so an
     equal-specificity selector loses on source order. The html prefix wins
     deterministically, same reason as the note at the top of this file. */
  html #brx-content .irow b,
  html #brx-content .drow b { font-size: 2.2rem; }

  /* THE PAGE GUTTER STEPS DOWN, VIA THE TOKEN. Every band's .inner reads
     --section-padding-x, which is 24px at this width and leaves several bands a
     few px short. Narrowing the token once fixes them all together and keeps this
     file's own law: change the token, not thirty selectors. */
  html.w-calc, html .w-calc { --section-padding-x: 1.6rem; }

  html .w-calc .type-price { font-size: 2.6rem; }
  html .w-calc .m-steps { font-size: 1.6rem; }

  /* "walkthrough" is the longest single token on the home page and the reason the
     480px step already exists for this heading. At 320 it needs one more step: at
     2.6rem the word is 18px wider than its 288px column, which is the entire 2px
     the document was still scrolling by. Same reasoning as the 480 step — the
     size gives way, never the word. */
  html .w-calc .walk .h2 { font-size: 2.2rem; }

  /* THE PRIVACY POLICY CARRIES A BARE URL, www.walternorthadelaide.com.au, which
     is one unbreakable 30-character token 35px wider than the column. Prose may
     break a URL: it is the only thing on the page that can, and the alternative
     is a page that scrolls sideways by 51px. */
  html .w-calc .sp-prose,
  html .w-calc .sp-body { overflow-wrap: break-word; }
}

/* --- the three one-line headings, 1400 to 1540 (06/08/26) ---------------------
   Keith: "fix the width of the inner frame so these stop going onto two lines."
   The frame was the cause and it is fixed — --content-width went 1360 to 1480, and
   every carrier of the site measure now reads that token instead of hard-coding
   1360 in five places. At 1728 and 1920 all three headings sit on one line.

   At 1440 two of them still cannot, and no frame can help: the viewport is 1440,
   the gutter takes 60, so the widest possible measure is 1380 while the two
   headings need 1427 and 1448. The only remaining lever is the type, so between
   1400 and 1540 these two step down by about one point. Above 1540 they are
   untouched, and below 1400 they wrap, which is ordinary for a laptop.

     "Register your interest in Walter North Adelaide"  1427 at 31.68px -> 1306 at 29px
     "The downsizer stamp duty calculator."             1448 at 44px    -> 1316 at 40px
   -------------------------------------------------------------------------- */
@media (min-width: 1400px) and (max-width: 1540px) {
  html .w-calc .foot-head { font-size: 2.9rem; }
  html .w-calc .ex-head h2 { font-size: 4rem; }
}

/* ============================================================================
   THE FOOTER CREDIT STACK — Claude Design footer handoff, 06/08/26 (option 2G)
   ============================================================================
   Applied to Keith's scope: everything BELOW the register form. The register
   block, the agent cards and the form are untouched.

   The handoff ships literal hex so it drops in standalone; its own README gives
   the token mapping and it is followed here, so this file stays token-only per
   the law at the top. Values are rem because the site sets html{font-size:62.5%}
   and the handoff's px divide by ten exactly.

   ⚠ THE THREE MARKS ARE SIZED OPTICALLY, NOT EQUALISED. This reverses the cap
   height work of 05/08. The handoff is explicit: "Cap heights differ across the
   three marks, so they are sized optically rather than to a single height. Do
   not equalise them." ECA 54px, Enoki 32px, Cluse & Co 28px, and the marks are
   larger than they were — ECA goes from about 40px to 54.
   ------------------------------------------------------------------------- */
html .w-calc .wf-credits {
  position: relative;
  /* 98rem, not the handoff's literal 900px: this site sets box-sizing:border-box
     and the handoff file does not, so its 900px max-width plus 40px of padding
     each side renders 980. Measured both, and 98rem is what reproduces the
     design's actual box. */
  max-width: 98rem;
  margin: 0 auto;
  padding: 7.2rem 4rem 4.4rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
html .w-calc .wf-credits__lockup { width: 21rem; height: auto; display: block; margin-bottom: 2rem; }
html .w-calc .wf-credits__address {
  font-size: 1.7rem;
  color: rgba(252, 242, 232, .8);
  text-decoration: none;
  margin-bottom: .8rem;
  transition: color .2s;
}
html .w-calc .wf-credits__address:hover { color: var(--accent); }
html .w-calc .wf-credits__rla { font-size: 1.5rem; color: rgba(252, 242, 232, .5); }
html .w-calc .wf-credits__divider {
  width: 6.4rem;
  height: 1px;
  background: rgba(252, 242, 232, .28);
  margin: 5.6rem 0;
}

/* THE LABELS ARE TRACKED UPPERCASE HERE, which is a deliberate exception to the
   site rule that .w-submit is the only uppercase. The design sets them that way
   and they are 12px fine print above a logo, not running copy. */
html .w-calc .wf-label {
  font-family: "acumin-variable", "Helvetica Neue", Arial, sans-serif;
  font-stretch: 67.5%;
  font-variation-settings: "wght" 300, "wdth" 67.5;
  font-size: 1.2rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: rgba(252, 242, 232, .52);
}

html .w-calc .wf-partners { display: flex; justify-content: center; align-items: flex-end; gap: 9.6rem; }
html .w-calc .wf-partner { display: flex; flex-direction: column; align-items: center; gap: 2rem; }
html .w-calc .wf-partner a { display: block; line-height: 0; text-decoration: none; border: 0; }
html .w-calc .wf-partner a:focus-visible { outline: 2px solid rgba(252, 242, 232, .85); outline-offset: .6rem; }
html .w-calc .wf-partner img { width: auto; display: block; }
html .w-calc .wf-partner img[alt*="Enzo"]  { height: 5.4rem; }
html .w-calc .wf-partner img[alt*="Enoki"] { height: 3.2rem; }
html .w-calc .wf-partner img[alt*="Cluse"] { height: 2.8rem; }

html .w-calc .wf-social { display: flex; gap: 1.2rem; margin: 5.6rem 0 3.2rem; }
html .w-calc .wf-social a {
  width: 4.2rem;
  height: 4.2rem;
  border: 1px solid rgba(252, 242, 232, .3);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(252, 242, 232, .8);
  transition: color .2s, border-color .2s;
}
html .w-calc .wf-social a:hover { color: var(--accent); border-color: var(--accent); }

html .w-calc .wf-legal {
  font-size: 1.5rem;
  color: rgba(252, 242, 232, .55);
  text-decoration: none;
  transition: color .2s;
}
html .w-calc .wf-legal:hover { color: var(--accent); }

@media (max-width: 1150px) {
  html .w-calc .wf-credits { padding: 5.6rem 2.4rem 4rem; }
  html .w-calc .wf-credits__divider { margin: 4.4rem 0; }
}
@media (max-width: 1280px) {
  html .w-calc .wf-partners { gap: 6.4rem; }
}
@media (max-width: 900px) {
  html .w-calc .wf-partners { flex-direction: column; align-items: center; gap: 4.4rem; }
}
@media (max-width: 620px) {
  html .w-calc .wf-credits__lockup { width: 16.8rem; }
}