/* ── Harcourts Webbook — page-specific layout styles ─────────────────────── */
/* Brand tokens come from the master stylesheet (static/harcourts.css).
   This file holds ONLY webbook-specific layout; it must never declare a
   parallel palette, off-palette hex, or forbidden fonts. Use var(--h-*).
   The Harcourts Script @font-face and Source Sans Pro live in the master
   harcourts.css / brand-fonts.css respectively — never redeclared here. */

/* Local aliases — map the legacy var names this file used onto the master
   tokens so the layout rules below need no further edits. No new colours. */
:root {
    --navy:       var(--h-blue);
    --cyan:       var(--h-cyan);
    --cyan-lt:    var(--h-info-soft);
    --mid-grey:   var(--h-grey-30);
    --light-grey: var(--h-grey-10);
    --white:      var(--h-white);
    --black:      var(--h-black);
    --font:       var(--h-font-sans);
}

/* ── Reset ────────────────────────────────────────────────────────────────── */
/* The master stylesheet sets box-sizing + body margin; this page additionally
   zeroes default margins/padding so the full-bleed hero + sections line up. */
*, *::before, *::after { margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; }
body {
    font-family: var(--h-font-sans);
    font-weight: var(--h-fw-light);
    letter-spacing: var(--h-tracking-tight);
    color: var(--h-blue);
    background: var(--h-white);
    line-height: var(--h-lh-base);
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--h-cyan); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ── Container ────────────────────────────────────────────────────────────── */
.container { max-width: 1100px; margin: 0 auto; padding: 0 1.5rem; }

/* ── Navigation ───────────────────────────────────────────────────────────── */
.nav {
    position: fixed; top: 0; left: 0; right: 0; z-index: 100;
    background: var(--navy);
    transition: box-shadow 0.3s;
}
.nav-inner {
    max-width: 1100px; margin: 0 auto;
    display: flex; align-items: center; justify-content: space-between;
    padding: 0 1.5rem; height: 56px;
}
.nav-logo { display: flex; align-items: center; text-decoration: none; min-width: 0; }
.nav-logo-img {
    height: 36px; width: auto; max-width: none;
    display: block; flex-shrink: 0; object-fit: contain;
}
.nav-links {
    display: none; list-style: none;
}
.nav-links.open {
    display: flex; flex-direction: column;
    position: absolute; top: 56px; left: 0; right: 0;
    background: var(--navy); padding: 1rem;
    border-top: 1px solid rgba(255,255,255,0.1);
    gap: 0.25rem;
}
.nav-links li a {
    display: block;
    color: rgba(255,255,255,0.8); font-size: 0.9rem; font-weight: 400;
    padding: 0.6rem 0.8rem; border-radius: 4px; transition: all 0.2s;
    text-decoration: none;
}
.nav-links li a:hover { color: var(--white); background: rgba(255,255,255,0.1); }
.nav-toggle {
    display: flex; background: none; border: none; cursor: pointer;
    flex-direction: column; gap: 5px; padding: 8px;
}
.nav-toggle span {
    display: block; width: 22px; height: 2px; background: var(--white);
    transition: transform 0.3s;
}

/* ── Hero ──────────────────────────────────────────────────────────────────── */
.hero { position: relative; margin-top: 56px; background: var(--navy); width: 100%; overflow: hidden; }
.hero-overlay {
    position: absolute; bottom: 0; left: 0; right: 0;
    /* Legibility scrim — fades to navy so the address text reads over any
       photo. All-token stops keep it on-brand (not a decorative gradient). */
    background: linear-gradient(transparent, var(--h-blue));
    padding: 3rem 2rem 2rem;
    display: flex; justify-content: space-between; align-items: flex-end;
    pointer-events: none;
}
/* Harcourts Script — every suburb, one or two words (a place name is a
   single accent unit per BRAND.md). Cyan, not navy: navy disappears into
   darker hero photos. No rotation. */
.hero-suburb-script {
    font-family: var(--h-font-script);
    font-weight: 400; font-size: 5rem; letter-spacing: -0.025em;
    text-transform: none; line-height: 0.95;
    display: inline-block;
    color: var(--cyan);
    margin-bottom: 0.25rem;
}
.hero-street {
    color: var(--white); font-weight: 900; font-size: 2.85rem;
    text-transform: uppercase; letter-spacing: -0.075em; line-height: 1.1;
}

/* ── Gallery ──────────────────────────────────────────────────────────────── */
.gallery { position: relative; }
.gallery-main { position: relative; overflow: hidden; width: 100vw; height: 75vh; }
.gallery-hero {
    width: 100%; height: 100%; object-fit: cover;
    cursor: pointer; transition: opacity 0.3s;
}
.gallery-prev, .gallery-next {
    position: absolute; top: 50%; transform: translateY(-50%);
    background: rgba(0,31,73,0.6); color: var(--white); border: none;
    font-size: 2.5rem; width: 48px; height: 64px; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: background 0.2s; line-height: 1;
}
.gallery-prev { left: 0; border-radius: 0 4px 4px 0; }
.gallery-next { right: 0; border-radius: 4px 0 0 4px; }
.gallery-prev:hover, .gallery-next:hover { background: rgba(0,31,73,0.85); }
.gallery-counter {
    position: absolute; top: 1rem; right: 1rem;   /* clear of the address band */
    background: rgba(0, 31, 73, 0.85); color: var(--white);
    padding: 0.35rem 0.9rem; border-radius: 4px;
    font-size: 0.95rem; font-weight: 600;
}
.gallery-thumbs {
    display: flex; gap: 4px; padding: 4px;
    overflow-x: auto; background: var(--navy);
    scrollbar-width: thin; scrollbar-color: var(--cyan) var(--navy);
}
.gallery-thumb {
    width: 80px; height: 60px; object-fit: cover;
    cursor: pointer; opacity: 0.5; transition: opacity 0.2s;
    flex-shrink: 0; border: 2px solid transparent;
}
.gallery-thumb:hover { opacity: 0.8; }
.gallery-thumb.active { opacity: 1; border-color: var(--cyan); }

/* ── Lightbox ─────────────────────────────────────────────────────────────── */
.lightbox {
    display: none; position: fixed; inset: 0; z-index: 200;
    background: rgba(0,0,0,0.95); align-items: center; justify-content: center;
}
.lightbox.active { display: flex; }
.lightbox-img { max-width: 92vw; max-height: 90vh; object-fit: contain; }
.lightbox-close {
    position: absolute; top: 1rem; right: 1.5rem;
    background: none; border: none; color: var(--white);
    font-size: 2.5rem; cursor: pointer; line-height: 1;
}
.lightbox-prev, .lightbox-next {
    position: absolute; top: 50%; transform: translateY(-50%);
    background: rgba(255,255,255,0.1); border: none; color: var(--white);
    font-size: 3rem; padding: 0.5rem 1rem; cursor: pointer;
    transition: background 0.2s; line-height: 1;
}
.lightbox-prev { left: 1rem; }
.lightbox-next { right: 1rem; }
.lightbox-prev:hover, .lightbox-next:hover { background: rgba(255,255,255,0.2); }
.lightbox-counter {
    position: absolute; bottom: 1.5rem; left: 50%;
    transform: translateX(-50%); color: rgba(255,255,255,0.7);
    font-size: 0.9rem;
}

/* ── Sections ─────────────────────────────────────────────────────────────── */
.section { padding: 3.5rem 0; background: var(--white); }
.section:nth-of-type(even) { background: var(--light-grey); }
.section-grey { background: var(--light-grey); }
.section-navy,
.section.section-navy:nth-of-type(even) { background: var(--navy); color: var(--white); }
.section-title {
    /* Display-heading system, matched to the Hub (26/07/2026): light weight
       at size + cyan accent rule, natural case. */
    font-family: 'Source Sans Pro', sans-serif;
    font-weight: 300; font-size: clamp(1.6rem, 2.4vw, 2rem);
    text-transform: none;
    letter-spacing: -0.025em; color: var(--navy);
    margin-bottom: 1.8rem; line-height: 1.1;
}
.section-title::after {
    content: ""; display: block; width: 36px; height: 3px;
    border-radius: 2px; background: var(--cyan); margin-top: 8px;
}
.section-title-white { color: var(--white); }
.section-title--headline {
    font-weight: 600; font-size: clamp(1.35rem, 2.2vw, 1.7rem);
    line-height: 1.3; max-width: 26ch;
}
.section-title--headline::after { display: none; }

/* ── Key Facts ────────────────────────────────────────────────────────────── */
.keyfacts {
    display: flex; flex-wrap: wrap; gap: 2rem;
    justify-content: center;
}
.keyfact {
    display: flex; flex-direction: column; align-items: center;
    min-width: 100px;
}
.keyfact-icon {
    width: 34px; height: 34px;
    color: var(--navy);                /* stroke icons inherit currentColor */
    margin-bottom: 0.5rem;
}
.keyfact-value { font-weight: 700; font-size: 1.8rem; line-height: 1; }
.keyfact-label { font-weight: 300; font-size: 0.85rem; color: var(--h-grey-50); margin-top: 0.25rem; }

/* ── Description ──────────────────────────────────────────────────────────── */
/* One measure for the whole block. Previously the paragraphs were capped at
   68ch (~550px) while the tick list ran the full 1100px container, so on desktop
   the prose stopped a third of the way across and the ticks kept going — a
   ragged right edge that read as a bug (MG 28/07). Capping .description instead
   of .description p gives prose and ticks the same left AND right edge, and the
   heading still sits on the page's 1100px container so it stays aligned with
   every other section heading down the scroll. */
.description {
    font-size: 1.0625rem; line-height: 1.75;
    max-width: 640px;
}
.description p { max-width: none; }
.owner-story {
    font-size: 1.05rem; line-height: 1.8; max-width: 800px;
    font-style: italic; color: var(--h-grey-70);
    border-left: 3px solid var(--cyan); padding-left: 1.5rem;
}
.description p { margin-bottom: 1rem; }
/* Bullet runs read as a two-column tick list — skimmable without the
   boxed-chip look (MG 26/07: "a bit Claude built"). Ticks are inline SVG
   data-URIs in brand cyan. */
/* Hairline rules top and bottom turn the tick run into a deliberate "at a
   glance" panel, so the shift from flowing prose to a two-up list reads as a
   designed break rather than the paragraphs suddenly changing shape.
   grid-template-columns stays auto-fill (NOT a hard repeat(2)) so the count
   falls out of the available width: 2 columns inside the 640px block on
   desktop, 1 column on a phone. Hardcoding 2 would cram phones. */
.description ul {
    margin: 1.9rem 0; padding: 1.6rem 0; list-style: none;
    display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
    gap: 0.55rem 2.2rem;
    border-top: 1px solid var(--mid-grey);
    border-bottom: 1px solid var(--mid-grey);
}
.description li {
    margin: 0; padding: 0.15rem 0 0.15rem 1.7rem;
    position: relative;
    font-size: 0.98rem; line-height: 1.5;
}
.description li::before {
    content: "";
    position: absolute; left: 0; top: 0.42em;
    width: 15px; height: 15px;
    background-color: var(--cyan);
    -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="3.2" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>') center / contain no-repeat;
    mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="3.2" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>') center / contain no-repeat;
}
@media (max-width: 768px) {
    .description:not(.description--open) {
        max-height: 34rem; overflow: hidden;
        border-bottom: 1px solid var(--mid-grey);   /* clean cut, no gradient */
    }
    .description-more { margin-top: 0.75rem; }
}

/* ── Features ─────────────────────────────────────────────────────────────── */
.features-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 0.75rem;
}
.feature-item {
    display: flex; align-items: center; gap: 0.5rem;
    font-weight: 400; font-size: 0.95rem;
}
.feature-check { width: 20px; height: 20px; fill: var(--cyan); flex-shrink: 0; }

/* ── Property Features Accordion ──────────────────────────────────────────── */
.accordion { max-width: 800px; }
.accordion-item {
    border-bottom: 1px solid var(--mid-grey);
}
.accordion-header {
    display: flex; align-items: center; gap: 0.75rem;
    padding: 1rem 0; cursor: pointer;
    list-style: none; /* remove default marker */
    user-select: none;
}
.accordion-header::-webkit-details-marker { display: none; }
.accordion-header::marker { display: none; content: ''; }
.accordion-title {
    font-weight: 600; font-size: 1rem; color: var(--navy);
    flex: 1;
}
.accordion-chevron {
    width: 24px; height: 24px; fill: var(--navy);
    transition: transform 0.3s ease; flex-shrink: 0;
}
.accordion-item[open] .accordion-chevron {
    transform: rotate(180deg);
}
.accordion-header:hover .accordion-title { color: var(--cyan); }
.accordion-header:hover .accordion-chevron { fill: var(--cyan); }
.accordion-body {
    list-style: none; padding: 0 0 1.25rem 0;
    display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 0.35rem 1.5rem;
    animation: accordionOpen 0.3s ease;
}
.accordion-body li {
    font-size: 0.9rem; font-weight: 300; color: var(--h-grey-70);
    padding-left: 1rem; position: relative;
}
.accordion-body li::before {
    content: ''; position: absolute; left: 0; top: 0.55em;
    width: 5px; height: 5px; border-radius: 50%;
    background: var(--cyan);
}
.accordion-body li.accordion-subheading {
    grid-column: 1 / -1;
    font-weight: 600; color: var(--navy);
    padding-left: 0; margin-top: 0.5rem;
    text-transform: uppercase; font-size: 0.75rem; letter-spacing: 0.06em;
}
.accordion-body li.accordion-subheading::before { display: none; }
@keyframes accordionOpen {
    from { opacity: 0; transform: translateY(-8px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ── Status ribbons (Sold / Under Contract) ───────────────────────────────── */
.status-ribbon {
    position: absolute; top: 1.25rem; left: 1.25rem; z-index: 5;
    display: inline-flex; align-items: baseline; gap: 0.6rem;
    padding: 0.55rem 1.1rem; border-radius: 4px;
    font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase;
    box-shadow: 0 2px 12px rgba(0,0,0,0.25);
    pointer-events: none;
}
.status-ribbon-sold        { background: var(--navy); color: var(--h-white); }
.status-ribbon-contract    { background: var(--cyan); color: var(--navy); }
.status-ribbon-coming-soon { background: var(--h-warning); color: var(--navy); }
.status-ribbon-label { font-size: 0.95rem; }
.status-ribbon-price {
    font-size: 0.9rem; font-weight: 700;
    letter-spacing: -0.01em; text-transform: none;
    padding-left: 0.6rem; border-left: 1px solid rgba(255,255,255,0.45);
}

/* ── Price / Sale ─────────────────────────────────────────────────────────── */
.sale-info { text-align: center; }
.sale-info-sold { padding-top: 0.5rem; }
.sale-sold-label {
    font-size: 1.45rem; font-weight: 600; color: var(--cyan);
    text-transform: uppercase; letter-spacing: 0.18em;
    margin-bottom: 0.6rem;
}
.sale-price {
    font-weight: 700; font-size: 2.6rem; color: var(--navy);
    letter-spacing: -0.03em; line-height: 1.1;
    margin-bottom: 2rem;
}
.sale-price-sold {
    font-size: 5rem; color: var(--cyan);
    letter-spacing: -0.04em; line-height: 1;
    margin-bottom: 0.75rem;
}
.sale-sold-by {
    font-size: 1.5rem; font-weight: 600; color: var(--navy);
    margin-bottom: 2rem;
}
.sale-info .keyfacts {
    padding: 2rem 1rem;
    border-top: 1px solid var(--mid-grey);
    border-bottom: 1px solid var(--mid-grey);
    gap: 3rem;
}
.sale-subtitle {
    font-weight: 700; font-size: 1.1rem; margin: 2rem 0 0.75rem;
    text-transform: uppercase; letter-spacing: -0.05em;
}
.sale-info .open-homes { max-width: 520px; margin: 0 auto; }
.sale-info .section-title { margin-top: 2.5rem; }
.highlights-title { margin-top: 2.5rem; margin-bottom: 1.5rem; text-align: left; max-width: 560px; margin-left: auto; margin-right: auto; }
.highlights {
    list-style: none; padding: 0; margin: 0 auto;
    max-width: 560px;
    display: flex; flex-direction: column; gap: 0.85rem;
}
.highlight-item {
    display: flex; align-items: center; justify-content: flex-start;
    gap: 0.85rem;
    font-size: 1.05rem; line-height: 1.4;
    text-align: left;
}
.highlight-dot {
    width: 7px; height: 7px; border-radius: 50%;
    background: var(--cyan); flex-shrink: 0;
}
.open-homes { display: flex; flex-direction: column; gap: 0.5rem; }
.open-home {
    display: flex; gap: 1rem; align-items: center; justify-content: center; flex-wrap: wrap;
    padding: 0.75rem 1rem; background: var(--light-grey); border-radius: 6px;
    text-align: center;
}
.open-home-date { font-weight: 600; }
.open-home-time { color: var(--h-grey-70); }
.open-home-agent { color: var(--cyan); font-weight: 400; }
.ideal-for { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.ideal-tag {
    background: var(--cyan-lt); color: var(--navy); padding: 0.4rem 1rem;
    border-radius: var(--h-radius-pill); font-size: 0.9rem; font-weight: 400;
}

/* ── Documents ────────────────────────────────────────────────────────────── */
.documents-grid { display: flex; flex-direction: column; gap: 1rem; }
.document-card {
    display: flex; align-items: center; gap: 1.25rem;
    padding: 1.5rem; background: var(--white); border-radius: 8px;
    border: 1px solid var(--mid-grey);
}
.document-icon { width: 40px; height: 40px; fill: var(--navy); flex-shrink: 0; }
.document-info h3 { font-weight: 600; font-size: 1rem; margin-bottom: 0.25rem; }
.document-type { font-size: 0.85rem; color: var(--h-grey-50); display: block; margin-bottom: 0.5rem; }
.document-info p { font-size: 0.95rem; line-height: 1.55; margin: 0 0 0.75rem; color: var(--h-grey-70); }
.document-info .report-note { font-size: 0.85rem; color: var(--h-grey-50); }
.document-info .h-btn { margin-top: 0.5rem; }

/* Buttons are the master .h-btn / .h-btn-primary / .h-btn-accent components —
   no local button styles here. */

/* ── Make an Offer ────────────────────────────────────────────────────────── */
.offer-subtitle {
    font-weight: 700; font-size: 1.15rem;
    text-transform: uppercase; letter-spacing: -0.03em;
    text-align: center; margin: 2.5rem 0 1rem;
    color: var(--navy);
}
.offer-body {
    max-width: 760px; margin: 0 auto;
    font-size: 1rem; line-height: 1.7;
}
.offer-body p { margin-bottom: 1rem; }

/* ── Financial Particulars ────────────────────────────────────────────────── */
.financials { max-width: 500px; }
.financials { max-width: 560px; }
.financial-row {
    display: flex; justify-content: space-between; align-items: baseline;
    gap: 2rem;
    padding: 0.9rem 0;
    border-bottom: 1px solid var(--mid-grey);
}
.financial-row:first-child { border-top: 1px solid var(--mid-grey); }
.financial-label {
    font-weight: 600; font-size: 0.8rem;
    text-transform: uppercase; letter-spacing: 0.06em;
    color: var(--h-grey-50);
}
.financial-value { font-weight: 700; font-size: 1.15rem; white-space: nowrap; }

/* ── Steps ────────────────────────────────────────────────────────────────── */
.steps { max-width: 700px; }
.step { display: flex; gap: 1.25rem; margin-bottom: 1.5rem; }
.step-number {
    width: 40px; height: 40px; flex-shrink: 0;
    background: var(--navy); color: var(--white);
    border-radius: 50%; display: flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: 1.1rem;
}
.step-content h3 { font-weight: 700; font-size: 1.05rem; margin-bottom: 0.4rem; color: var(--navy); }
.step-content p { font-size: 0.95rem; line-height: 1.6; color: var(--h-grey-70); margin-bottom: 0.5rem; }
.step-content p:last-child { margin-bottom: 0; }
.step-list {
    margin: 0.25rem 0 0 1.1rem; padding: 0;
    font-size: 0.95rem; line-height: 1.6; color: var(--h-grey-70);
}
.step-list li { margin-bottom: 0.25rem; }

.steps-intro {
    max-width: 780px; margin: 0 auto 2.5rem;
    font-size: 1rem; line-height: 1.7; color: var(--h-grey-70);
}
.steps-intro p { margin-bottom: 1rem; }

.steps-summary {
    font-size: 1rem; line-height: 1.7; color: var(--h-grey-70);
    text-align: left;
}
.steps-summary p { margin: 0; }

.steps-card { margin-top: 2rem; }

/* ── Enquiry Form ─────────────────────────────────────────────────────────── */
.enquiry-form { max-width: 600px; margin: 0 auto; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.form-group { margin-bottom: 1rem; }
.form-group label {
    display: block; font-weight: 400; font-size: 0.85rem;
    color: rgba(255,255,255,0.7); margin-bottom: 0.3rem;
}
.form-group input, .form-group textarea {
    width: 100%;
    padding: 0.7rem 0.9rem;
    background: rgba(255, 255, 255, 0.10);   /* was near-invisible navy-on-navy */
    border: 1px solid rgba(255, 255, 255, 0.28);
    border-radius: 6px;
    color: var(--white);
    font-family: inherit;
    font-size: 1rem;
}
.form-group input:focus, .form-group textarea:focus {
    outline: none; border-color: var(--cyan);
}
.form-group input::placeholder, .form-group textarea::placeholder {
    color: rgba(255,255,255,0.4);
}

/* Appraisal form sits on a white background — override the dark-section input styling */
.appraisal-intro {
    max-width: 600px; margin: 0 auto 1.5rem auto; text-align: center;
    color: var(--h-grey-70); font-weight: 300;
}
.appraisal-form .form-group label { color: var(--navy); }
.appraisal-form .form-group input,
.appraisal-form .form-group textarea {
    border: 1px solid var(--mid-grey); background: var(--white); color: var(--navy);
}
.appraisal-form .form-group input::placeholder,
.appraisal-form .form-group textarea::placeholder {
    color: var(--h-grey-50);
}
.appraisal-address-container { width: 100%; }
gmp-place-autocomplete {
    width: 100%; display: block;
    color-scheme: light;
    --gmpx-color-surface: var(--h-white);
    --gmpx-color-on-surface: var(--h-blue);
    --gmpx-color-on-surface-variant: var(--h-grey-70);
    --gmpx-color-primary: var(--h-cyan);
    --gmpx-color-outline: var(--h-grey-30);
    --gmpx-font-family-base: var(--h-font-sans);
    --gmpx-font-family-headings: var(--h-font-sans);
    --gmpx-font-size-base: 1rem;
    background: var(--h-white);
}
.appraisal-address-confirm {
    display: none; margin-top: 0.6rem; padding: 0.6rem 0.9rem;
    background: var(--h-info-soft); border: 1px solid var(--h-cyan); border-radius: var(--h-radius);
    color: var(--h-info-ink); font-size: 0.95rem;
}

/* ── Agent Card ───────────────────────────────────────────────────────────── */
.agents-grid { display: flex; flex-wrap: wrap; gap: 1.5rem; justify-content: flex-start; }
.agent-card {
    /* Aligned, finished card (MG 26/07): photo and info sit in one framed
       unit on the section's left edge like every other section's content —
       the old free-floating centre-right layout read as unfinished. */
    display: flex; gap: 1.6rem; align-items: center;
    max-width: 460px;
    padding: 1.25rem 1.5rem;
    background: var(--white);
    border: 1px solid var(--mid-grey);
    border-radius: 8px;
}
.agent-photo {
    width: 128px; height: 160px; object-fit: cover;
    border-radius: 6px; flex-shrink: 0;
    background: var(--h-grey-10);       /* placeholder tone while lazy-loading */
}
.agent-info { display: flex; flex-direction: column; gap: 0.3rem; min-width: 0; }
.agent-name { font-weight: 700; font-size: 1.3rem; line-height: 1.15; }
.agent-position { color: var(--cyan); font-weight: 600; font-size: 0.82rem;
    text-transform: uppercase; letter-spacing: 0.06em; }
.agent-contact {
    display: flex; align-items: center; gap: 0.5rem;
    color: var(--navy); font-weight: 400; font-size: 0.9rem;
    margin-top: 0.25rem; text-decoration: none;
}
.agent-contact:hover { color: var(--cyan); }
.agent-contact-icon { width: 18px; height: 18px; fill: var(--navy); }
.agent-contact:hover .agent-contact-icon { fill: var(--cyan); }

/* ── Floor Plans ──────────────────────────────────────────────────────────── */
.floorplan-grid { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: center; }
.floorplan-link { display: block; }
.floorplan-img {
    /* width/height attrs are square placeholders — without these overrides
       the browser squashes every non-square plan to 1:1 (the "skew",
       MG 26/07, 13 Wallabah Way). */
    width: auto; height: auto;
    max-width: 100%; max-height: 560px;
    border: 1px solid var(--mid-grey); border-radius: 4px;
}

/* ── Location Map ─────────────────────────────────────────────────────────── */
.map-wrap {
    position: relative; width: 100%; aspect-ratio: 16 / 9;
    border-radius: 4px; overflow: hidden;
    box-shadow: 0 2px 12px rgba(0,31,73,0.1);
}
.map-frame { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.map-address {
    margin-top: 1rem; text-align: center; color: var(--navy);
    font-weight: 600; font-size: 0.95rem;
}

/* ── Footer ───────────────────────────────────────────────────────────────── */
.footer {
    background: var(--navy); color: rgba(255,255,255,0.6);
    padding: 2.5rem 0; text-align: center;
}
.footer-brand { margin-bottom: 1.25rem; display: flex; justify-content: center; }
.footer-logo-img { height: 110px; width: auto; display: block; }
.disclaimer { font-size: 0.8rem; line-height: 1.5; max-width: 700px; margin: 0 auto 1rem; }
.footer-copy { font-size: 0.75rem; }

/* ── Responsive ───────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
    .nav-inner { padding: 0 1rem; gap: 0.75rem; }
    .nav-logo { flex: 1 1 auto; min-width: 0; }
    .nav-logo-img { height: auto; max-height: 28px; max-width: 100%; width: auto; }
    .nav-toggle { flex-shrink: 0; }

    .hero-overlay {
        flex-direction: column; align-items: flex-start;
        padding: 2rem 1.5rem 1.5rem; gap: 0.5rem;
    }
    .hero-street { font-size: 2.3rem; letter-spacing: -0.05em; }
    .hero-suburb-script { font-size: 3.4rem; }
    .hero-suburb-script { font-size: 4.25rem; }

    .gallery-main { height: 50vh; }
    .gallery-prev, .gallery-next { width: 36px; height: 48px; font-size: 1.8rem; }

    .section { padding: 2.5rem 0; }
    .section-title { font-size: 1.3rem; }
    .keyfacts { gap: 1.25rem; }
    .keyfact-value { font-size: 1.5rem; }

    .form-row { grid-template-columns: 1fr; }

    .agent-card { flex-direction: column; align-items: center; text-align: center;
        margin: 0 auto; }
    .agent-photo { width: 120px; height: 150px; }
    .agent-actions { justify-content: center; }
    .agent-contact { justify-content: center; }
}

@media (max-width: 480px) {
    .hero-street { font-size: 1.6rem; }
    .hero-suburb-script { font-size: 3.5rem; }
    .sale-price { font-size: 1.9rem; }
    .sale-price-sold { font-size: 3.1rem; }
    .sale-sold-label { font-size: 1.05rem; }
    .sale-sold-by { font-size: 1.15rem; }
    .status-ribbon { top: 0.75rem; left: 0.75rem; padding: 0.4rem 0.75rem; }
    .status-ribbon-label { font-size: 0.8rem; }
    .status-ribbon-price { font-size: 0.75rem; padding-left: 0.45rem; }
    .sale-info .keyfacts { gap: 1.5rem; padding: 1.25rem 0.5rem; }
    .features-grid { grid-template-columns: 1fr; }
}

/* ── Map facade (26/07/2026 speed pass) ──────────────────────────────── */
.map-wrap { position: relative; }
.map-static {
  width: 100%;
  height: 100%;
  min-height: 320px;
  object-fit: cover;
  display: block;
  border-radius: inherit;
}
.map-activate {
  position: absolute;
  left: 50%;
  bottom: 18px;
  transform: translateX(-50%);
  box-shadow: 0 4px 14px rgba(0, 31, 73, 0.35);
}

/* [hidden] must beat the h-btn display class (26/07: button leaked on desktop) */
.description-more[hidden] { display: none !important; }

/* ── Features accordion upgrade (26/07/2026 audit item 2) ───────────────── */
.accordion-head-row {
    display: flex; align-items: flex-start; justify-content: space-between;
    gap: 1rem;
}
.accordion-titles { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.accordion-preview {
    font-size: 0.82rem; font-weight: 400; color: var(--h-grey-50);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    max-width: 52ch;
}
details[open] .accordion-preview { display: none; }  /* redundant when open */
@media (min-width: 900px) {
    .accordion--columns { column-count: 2; column-gap: 2rem; }
    .accordion--columns .accordion-item {
        break-inside: avoid; -webkit-column-break-inside: avoid;
    }
}

/* ── Agent card actions (MG 26/07: "call or message an agent") ─────────── */
.agent-actions { display: flex; gap: 10px; margin: 0.7rem 0 0.4rem; }
.agent-action { font-size: 0.92rem; }