/* =============================================================================
   sachs-site theme.css — full design system

   Editorial blue design language, modelled on realestateagency.weblium.site
   but with a navy + ice-blue palette (Sachs branding).

   Layout: single design-system file replacing the original seven (main.css,
   reset.css, layout.css, nav.css, dialog.css, typography.css, slideshow.css).
   Organized top-to-bottom:
     1. CSS variables (palette, type scale, spacing)
     2. Reset + base
     3. Typography
     4. Layout primitives (container, section, grid)
     5. Components (topbar, hero, cards, stats, footer)
     6. Utilities

   Fonts: self-hosted Cormorant Garamond (serif headings) + Inter (body).
   ============================================================================= */

/* ---- 1. VARIABLES ---- */

:root {
    /* Palette — Weblium brown → blue mapping */
    --navy:           #0f1e3d;   /* deep navy — primary headings, footer bg, text */
    --navy-700:       #1a2c5b;   /* hovers, secondary text */
    --steel:          #3b6cb5;   /* steel blue — links, accents */
    --cobalt:         #1f47a0;   /* cobalt — buttons, primary actions */
    --cobalt-hover:   #1a3d8c;
    --slate:          #6b7a99;   /* muted slate — eyebrow text, meta */
    --ice:            #f1f5fb;   /* ice-blue tint — section backgrounds */
    --hairline:       #dde5f0;   /* pale blue-grey — borders, dividers */
    --white:          #ffffff;
    --text:           #1a2438;   /* body text — near-black with navy tint */
    --text-soft:      #4a5468;   /* secondary body text */

    /* Type scale */
    --serif: 'Cormorant Garamond', 'Georgia', 'Times New Roman', serif;
    --sans:  'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --fs-eyebrow: 0.78rem;       /* uppercase section labels */
    --fs-body:    1rem;
    --fs-lead:    1.15rem;
    --fs-h6:      0.85rem;
    --fs-h5:      1rem;
    --fs-h4:      1.2rem;
    --fs-h3:      1.5rem;
    --fs-h2:      2.5rem;
    --fs-h1:      3.5rem;
    --fs-display: 4.5rem;        /* hero headline */
    --fs-stat:    4rem;          /* huge stat numerals */

    /* Spacing */
    --space-1:  0.25rem;
    --space-2:  0.5rem;
    --space-3:  0.75rem;
    --space-4:  1rem;
    --space-5:  1.5rem;
    --space-6:  2rem;
    --space-7:  3rem;
    --space-8:  4rem;
    --space-9:  6rem;
    --space-10: 8rem;

    /* Layout */
    --container:    1200px;
    --container-sm: 880px;
    --radius:       4px;
    --radius-lg:    8px;
    --shadow:       0 1px 3px rgba(15,30,61,0.06);
    --shadow-hover: 0 4px 14px rgba(15,30,61,0.1);
    --transition:   200ms ease;
}

/* ---- 2. RESET + BASE ---- */

*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
}

body {
    font-family: var(--sans);
    font-size: var(--fs-body);
    line-height: 1.65;
    color: var(--text);
    background: var(--white);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

a {
    color: var(--cobalt);
    text-decoration: none;
    transition: color var(--transition);
}

a:hover { color: var(--cobalt-hover); }

button {
    font: inherit;
    cursor: pointer;
    background: none;
    border: none;
}

ul, ol {
    list-style: none;
}

/* ---- 3. TYPOGRAPHY ---- */

/* Self-hosted font face declarations */
@font-face {
    font-family: 'Cormorant Garamond';
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url('fonts/cormorant-garamond.woff2') format('woff2');
}

@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url('fonts/inter.woff2') format('woff2');
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--serif);
    color: var(--navy);
    line-height: 1.15;
    font-weight: 500;
}

h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }
h4 { font-size: var(--fs-h4); font-weight: 600; }
h5 { font-size: var(--fs-h5); font-weight: 600; }
h6 { font-size: var(--fs-h6); font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; }

p {
    color: var(--text-soft);
    line-height: 1.7;
}

.eyebrow {
    font-family: var(--sans);
    font-size: var(--fs-eyebrow);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: var(--slate);
    display: inline-block;
    margin-bottom: var(--space-4);
}

.eyebrow::after {
    content: " —";
    margin-left: var(--space-1);
    color: var(--steel);
}

.lead {
    font-size: var(--fs-lead);
    line-height: 1.6;
    color: var(--text);
    font-weight: 400;
}

.text-soft  { color: var(--text-soft); }
.text-slate { color: var(--slate); }
.text-cobalt { color: var(--cobalt); }
.serif      { font-family: var(--serif); }
.sans       { font-family: var(--sans); }

/* ---- 4. LAYOUT PRIMITIVES ---- */

.container {
    width: 100%;
    max-width: var(--container);
    margin: 0 auto;
    padding: 0 var(--space-5);
}

.container-sm {
    width: 100%;
    max-width: var(--container-sm);
    margin: 0 auto;
    padding: 0 var(--space-5);
}

.section {
    padding: var(--space-9) 0;
}

.section--ice {
    background: var(--ice);
}

.section--navy {
    background: var(--navy);
    color: var(--white);
}

.section--navy h1,
.section--navy h2,
.section--navy h3,
.section--navy h4 {
    color: var(--white);
}

.section--navy .eyebrow {
    color: rgba(255,255,255,0.6);
}

.section--navy .eyebrow::after {
    color: rgba(255,255,255,0.4);
}

.section--navy p {
    color: rgba(255,255,255,0.8);
}

.section--narrow {
    padding: var(--space-7) 0;
}

/* Section header — eyebrow + huge faded number + title */
.section-header {
    margin-bottom: var(--space-7);
    position: relative;
}

.section__num {
    font-family: var(--serif);
    font-size: 8rem;
    font-weight: 400;
    color: var(--hairline);
    line-height: 0.8;
    position: absolute;
    top: -1.5rem;
    left: 0;
    z-index: 0;
    pointer-events: none;
    user-select: none;
}

.section--navy .section__num {
    color: rgba(255,255,255,0.08);
}

.section__title {
    font-size: var(--fs-h2);
    color: var(--navy);
    max-width: 780px;
    margin-top: var(--space-4);
    position: relative;
    z-index: 1;
}

.section--navy .section__title {
    color: var(--white);
}

.section__subtitle {
    font-size: var(--fs-lead);
    color: var(--text-soft);
    max-width: 720px;
    margin-top: var(--space-4);
    line-height: 1.5;
}

.section--navy .section__subtitle {
    color: rgba(255,255,255,0.85);
}

.grid {
    display: grid;
    gap: var(--space-6);
}

.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }

@media (max-width: 900px) {
    .grid--2,
    .grid--3,
    .grid--4 {
        grid-template-columns: 1fr;
    }
}

@media (min-width: 901px) and (max-width: 1100px) {
    .grid--3,
    .grid--4 {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Two-column body (Weblium-style about section) */
.two-col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-7);
}

@media (max-width: 900px) {
    .two-col {
        grid-template-columns: 1fr;
    }
}

/* ---- 5. COMPONENTS ---- */

/* 5a. Topbar — sticky white nav with logo + nav links + sell pill */
.topbar {
    position: sticky;
    top: 0;
    z-index: 100;
    background: var(--white);
    border-bottom: 1px solid var(--hairline);
    padding: var(--space-4) 0;
}

.topbar__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-5);
}

.topbar__logo {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    text-decoration: none;
    color: var(--navy);
    flex-shrink: 0;
}

.topbar__logo img {
    height: 40px;
    width: auto;
}

.topbar__nav {
    display: flex;
    align-items: center;
    gap: var(--space-5);
    flex-wrap: nowrap;
}

.topbar__nav a {
    font-family: var(--sans);
    font-size: 0.92rem;
    /* Inter's capital 'A' at weight 500 renders optically heavier than
       surrounding letters (a quirk of the typeface at medium weights).
       Drop to regular (400) so all glyphs render with consistent stroke
       width across the nav. */
    font-weight: 400;
    color: var(--navy);
    letter-spacing: 0.01em;
    transition: color var(--transition);
    white-space: nowrap;
}

.topbar__nav a:hover,
.topbar__nav a.is-active {
    color: var(--cobalt);
}

/* Topbar dropdown for Sachs Sales / Property Management */
.topbar__nav-item {
    position: relative;
}

.topbar__nav-item > a::after {
    content: " ▾";
    font-size: 0.7em;
    margin-left: 0.2em;
    opacity: 0.5;
}

.topbar__nav-item:hover .dropdown,
.topbar__nav-item:focus-within .dropdown {
    display: block;
}

.dropdown {
    display: none;
    position: absolute;
    /* No top offset — dropdown sits flush against the nav link so the
       parent's :hover state stays active while the cursor moves down.
       padding-top provides the visual breathing room. */
    top: 100%;
    left: 0;
    margin-top: 0;
    padding-top: var(--space-3);
    background: var(--white);
    border: 1px solid var(--hairline);
    border-radius: var(--radius);
    min-width: 200px;
    box-shadow: var(--shadow);
}

.dropdown a {
    display: block;
    padding: var(--space-2) var(--space-5);
    color: var(--navy);
    font-size: 0.9rem;
}

.dropdown a:hover {
    background: var(--ice);
    color: var(--cobalt);
}

@media (max-width: 1100px) {
    .topbar__nav {
        display: none; /* Simple narrow-screen fallback — full nav revealed in future */
    }
}

/* 5b. Hero — full-bleed image with overlay + centered text */
.hero {
    position: relative;
    min-height: 540px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--white);
    background-image: url('../_files/668_Pacific_Hwy_Killara_-8.jpg');
    background-size: cover;
    background-position: center;
    overflow: hidden;
}

.hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(15,30,61,0.55) 0%, rgba(15,30,61,0.75) 100%);
    z-index: 1;
}

.hero__inner {
    position: relative;
    z-index: 2;
    text-align: center;
    max-width: 820px;
    padding: var(--space-8) var(--space-5);
}

.hero__eyebrow {
    font-family: var(--sans);
    font-size: var(--fs-eyebrow);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    color: rgba(255,255,255,0.75);
    margin-bottom: var(--space-5);
    line-height: 1.6;
}

.hero__eyebrow .sep {
    color: var(--steel);
    margin: 0 0.4em;
}

.hero__title {
    font-family: var(--serif);
    font-size: var(--fs-display);
    font-weight: 500;
    line-height: 1.05;
    color: var(--white);
    margin-bottom: var(--space-5);
    letter-spacing: -0.01em;
}

.hero__title em {
    font-style: italic;
    color: rgba(255,255,255,0.85);
}

.hero__subtitle {
    font-size: var(--fs-lead);
    color: rgba(255,255,255,0.85);
    max-width: 640px;
    margin: 0 auto var(--space-6);
    line-height: 1.55;
}

.hero__subtitle em {
    font-style: italic;
}

.hero__cta {
    display: inline-block;
    color: var(--white);
    font-size: 0.95rem;
    font-weight: 500;
    letter-spacing: 0.05em;
    padding: 0.75rem 0;
    border-bottom: 1px solid rgba(255,255,255,0.4);
    transition: border-color var(--transition);
}

.hero__cta:hover {
    color: var(--white);
    border-color: var(--white);
}

.hero__cta::after {
    content: " →";
}

/* 5c. Section header — number + eyebrow + title block */
.section__inner {
    position: relative;
    z-index: 1;
}

.section__eyebrow-wrap {
    display: flex;
    align-items: baseline;
    gap: var(--space-5);
    position: relative;
    z-index: 1;
}

.section__eyebrow {
    font-family: var(--sans);
    font-size: var(--fs-eyebrow);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: var(--slate);
}

.section__eyebrow::after {
    content: " —";
    color: var(--steel);
    margin-left: var(--space-1);
}

.section--navy .section__eyebrow {
    color: rgba(255,255,255,0.7);
}

.section--navy .section__eyebrow::after {
    color: rgba(255,255,255,0.4);
}

/* 5d. Service cards — numbered icon + serif title + body */
.service-card {
    padding: var(--space-6);
    border: 1px solid var(--hairline);
    border-radius: var(--radius);
    background: var(--white);
    transition: border-color var(--transition), box-shadow var(--transition);
}

.service-card:hover {
    border-color: var(--steel);
    box-shadow: var(--shadow-hover);
}

.service-card__num {
    font-family: var(--sans);
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--steel);
    letter-spacing: 0.05em;
    margin-bottom: var(--space-3);
}

.service-card__title {
    font-family: var(--serif);
    font-size: var(--fs-h4);
    font-weight: 500;
    color: var(--navy);
    margin-bottom: var(--space-3);
    line-height: 1.2;
}

.service-card__body {
    font-size: 0.95rem;
    color: var(--text-soft);
    line-height: 1.6;
}

/* 5e. Stats — huge serif numerals with eyebrow labels */
.stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-6);
    text-align: center;
}

.stats--narrow {
    max-width: 720px;
    margin: 0 auto;
    grid-template-columns: repeat(2, auto);
    justify-content: center;
}

@media (max-width: 900px) {
    .stats { grid-template-columns: repeat(2, 1fr); }
}

.stat__num {
    font-family: var(--serif);
    font-size: var(--fs-stat);
    font-weight: 500;
    color: var(--white);
    line-height: 1;
    margin-bottom: var(--space-3);
}

.stat__label {
    font-family: var(--sans);
    font-size: var(--fs-eyebrow);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: rgba(255,255,255,0.7);
}

.section--ice .stat__num { color: var(--navy); }
.section--ice .stat__label { color: var(--slate); }

/* 5f. Property card — image top + serif name + meta + view link */
.property-card {
    background: var(--white);
    border: 1px solid var(--hairline);
    border-radius: var(--radius);
    overflow: hidden;
    transition: box-shadow var(--transition), transform var(--transition);
    display: flex;
    flex-direction: column;
}

.property-card:hover {
    box-shadow: var(--shadow-hover);
    transform: translateY(-2px);
}

.property-card__image {
    aspect-ratio: 4/3;
    background: var(--ice);
    overflow: hidden;
    position: relative;
}

.property-card__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.property-card__body {
    padding: var(--space-5);
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

.property-card__suburb {
    font-family: var(--sans);
    font-size: 0.78rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: var(--slate);
    margin-bottom: var(--space-2);
}

.property-card__title {
    font-family: var(--serif);
    font-size: var(--fs-h4);
    font-weight: 500;
    color: var(--navy);
    margin-bottom: var(--space-3);
    line-height: 1.25;
}

.property-card__meta {
    display: flex;
    gap: var(--space-4);
    align-items: center;
    font-size: 0.85rem;
    color: var(--text-soft);
    margin-bottom: var(--space-4);
}

.property-card__meta img {
    height: 18px;
    width: 18px;
    display: inline-block;
    vertical-align: middle;
    margin-right: 0.3em;
}

.property-card__price {
    font-family: var(--serif);
    font-size: var(--fs-h5);
    font-weight: 500;
    color: var(--cobalt);
    margin-top: auto;
}

.property-card__link {
    margin-top: var(--space-4);
    color: var(--cobalt);
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.property-card__link::after { content: " →"; }
.property-card__link:hover { color: var(--cobalt-hover); }

/* "Find Your Home" feature card (Weblium-style) */
.feature-card {
    background: var(--white);
    padding: var(--space-6);
    border: 1px solid var(--hairline);
    border-radius: var(--radius);
}

.feature-card__icon {
    height: 64px;
    width: 64px;
    margin-bottom: var(--space-4);
    border-radius: 50%;
    background: var(--ice);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--steel);
    font-size: 1.6rem;
}

.feature-card__title {
    font-family: var(--serif);
    font-size: var(--fs-h4);
    color: var(--navy);
    margin-bottom: var(--space-3);
}

.feature-card__body {
    font-size: 0.95rem;
    color: var(--text-soft);
}

.contact-image {
    background-size: cover;
    background-position: center;
    border-radius: var(--radius);
    min-height: 380px;
}

.contact-image--office {
    background-image: url('../_files/668_Pacific_Hwy_Killara_-8.jpg');
}

/* 5h. Contact detail card (replaces the contact form on home + Contact-Us) */
.contact-detail-card {
    background: var(--white);
    border: 1px solid var(--hairline);
    border-radius: var(--radius);
    padding: var(--space-6);
    transition: border-color var(--transition), box-shadow var(--transition);
}

.contact-detail-card:hover {
    border-color: var(--steel);
    box-shadow: var(--shadow-hover);
}

.contact-detail-card__label {
    font-family: var(--sans);
    font-size: var(--fs-eyebrow);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: var(--slate);
    margin-bottom: var(--space-3);
}

.contact-detail-card__value {
    display: block;
    font-family: var(--serif);
    font-size: var(--fs-h3);
    font-weight: 500;
    color: var(--navy);
    line-height: 1.15;
    margin-bottom: var(--space-3);
    word-break: break-all;
}

.contact-detail-card__value:hover {
    color: var(--cobalt);
}

.contact-detail-card__note {
    font-size: 0.9rem;
    color: var(--text-soft);
    line-height: 1.5;
    margin-top: 0;
}

/* 5i. Testimonials — base card + marquee container */
.testimonials-marquee {
    position: relative;
    overflow: hidden;
    /* Fade the edges so cards entering/leaving don't look abrupt */
    -webkit-mask-image: linear-gradient(90deg,
        transparent 0,
        #000 60px,
        #000 calc(100% - 60px),
        transparent 100%);
    mask-image: linear-gradient(90deg,
        transparent 0,
        #000 60px,
        #000 calc(100% - 60px),
        transparent 100%);
}

.testimonials-track {
    display: flex;
    gap: var(--space-5);
    width: max-content;
    /* Animate the track horizontally. Distance = 50% (half the doubled
       set) so when it loops, the second copy slides into view seamlessly. */
    animation: testimonials-scroll 60s linear infinite;
    will-change: transform;
}

/* Pause the animation when the user hovers the marquee, so they can
   read a card without it sliding out from under them. */
.testimonials-marquee:hover .testimonials-track,
.testimonials-marquee:focus-within .testimonials-track {
    animation-play-state: paused;
}

/* Respect users who prefer reduced motion. */
@media (prefers-reduced-motion: reduce) {
    .testimonials-track {
        animation: none;
        flex-wrap: wrap;
        justify-content: center;
        width: 100%;
    }
}

@keyframes testimonials-scroll {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}

.testimonial {
    flex: 0 0 360px;
    width: 360px;
    padding: var(--space-6);
    border: 1px solid var(--hairline);
    border-radius: var(--radius);
    background: var(--white);
    /* Slight vertical lift + shadow on hover */
    transition: border-color var(--transition), box-shadow var(--transition);
}

.testimonial:hover {
    border-color: var(--steel);
    box-shadow: var(--shadow-hover);
}

.testimonial__author {
    font-size: 0.78rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: var(--slate);
    margin-bottom: var(--space-3);
}

.testimonial__author .sep {
    color: var(--steel);
    margin: 0 0.4em;
}

.testimonial__quote {
    font-family: var(--serif);
    font-size: var(--fs-h5);
    line-height: 1.45;
    color: var(--navy);
    font-style: italic;
    font-weight: 400;
}

/* 5i. Agent profile card (Executive Team) */
.agent-card {
    background: var(--white);
    border: 1px solid var(--hairline);
    border-radius: var(--radius);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.agent-card__image {
    aspect-ratio: 4/5;
    background: var(--ice);
    overflow: hidden;
}

.agent-card__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.agent-card__body {
    padding: var(--space-5);
    flex-grow: 1;
}

.agent-card__name {
    font-family: var(--serif);
    font-size: var(--fs-h4);
    color: var(--navy);
    margin-bottom: var(--space-1);
}

.agent-card__role {
    font-size: 0.85rem;
    color: var(--slate);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: var(--space-4);
}

.agent-card__contact {
    font-size: 0.9rem;
    color: var(--text-soft);
    line-height: 1.7;
}

/* 5j. Footer */
.footer {
    background: var(--navy);
    color: rgba(255,255,255,0.85);
    padding: var(--space-9) 0 var(--space-6);
}

.footer__brand-mark {
    display: flex;
    justify-content: center;
    margin-bottom: var(--space-7);
}

.footer__brand-mark img {
    /* The full logo is 623x584 — render at ~140px wide so the decorative
       crest sits comfortably above the 4-column site map. */
    width: 140px;
    height: auto;
    /* The logo is navy on transparent — invert it to white-on-transparent
       so it's visible against the dark navy footer. */
    filter: brightness(0) invert(1);
    opacity: 0.95;
}

.footer__top {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr;
    gap: var(--space-7);
    margin-bottom: var(--space-8);
}

@media (max-width: 900px) {
    .footer__top { grid-template-columns: 1fr 1fr; }
}

.footer__brand {
    font-family: var(--serif);
    font-size: 2.4rem;
    color: var(--white);
    margin-bottom: var(--space-4);
    font-weight: 500;
}

.footer__about {
    font-size: 0.95rem;
    line-height: 1.65;
    color: rgba(255,255,255,0.75);
    max-width: 320px;
}

.footer__heading {
    font-family: var(--sans);
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: rgba(255,255,255,0.55);
    margin-bottom: var(--space-4);
}

.footer__list {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.footer__list a {
    color: rgba(255,255,255,0.8);
    font-size: 0.92rem;
    transition: color var(--transition);
}

.footer__list a:hover { color: var(--white); }

.footer__bottom {
    border-top: 1px solid rgba(255,255,255,0.1);
    padding-top: var(--space-5);
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-4);
}

.footer__copy {
    font-size: 0.82rem;
    color: rgba(255,255,255,0.5);
}

/* 5k. Long-scroll editorial layout (Weblium hero+sectioning rhythm) */
.page-header {
    padding: var(--space-8) 0 var(--space-6);
    text-align: left;
    border-bottom: 1px solid var(--hairline);
}

.page-header__eyebrow {
    font-family: var(--sans);
    font-size: var(--fs-eyebrow);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: var(--slate);
    margin-bottom: var(--space-3);
}

.page-header__title {
    font-family: var(--serif);
    font-size: var(--fs-h1);
    color: var(--navy);
    margin-bottom: var(--space-3);
}

.page-header__subtitle {
    font-size: var(--fs-lead);
    color: var(--text-soft);
    max-width: 720px;
}

/* 5l. "About" two-column body */
.about-col p {
    font-size: 0.98rem;
    line-height: 1.75;
    margin-bottom: var(--space-4);
    color: var(--text);
}

/* 5m. Artwork card (Sachs HomeArt) */
.art-card {
    background: var(--white);
    border: 1px solid var(--hairline);
    border-radius: var(--radius);
    overflow: hidden;
    transition: box-shadow var(--transition);
}

.art-card:hover { box-shadow: var(--shadow-hover); }

.art-card__image {
    aspect-ratio: 3/2;
    background: var(--ice);
    overflow: hidden;
}

.art-card__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.art-card__title {
    font-family: var(--serif);
    font-size: var(--fs-h5);
    color: var(--navy);
    padding: var(--space-4) var(--space-5);
    text-align: center;
    font-style: italic;
}

/* 5n. "Virtual tour" callout section */
.virtual-tour {
    position: relative;
    min-height: 360px;
    background-size: cover;
    background-position: center;
    background-image: url('../_files/668_Pacific_Hwy_Killara_-8.jpg');
    display: flex;
    align-items: center;
    border-radius: var(--radius-lg);
    overflow: hidden;
    margin: 0 var(--space-5);
}

.virtual-tour::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(15,30,61,0.85) 0%, rgba(15,30,61,0.4) 100%);
}

.virtual-tour__inner {
    position: relative;
    z-index: 2;
    padding: var(--space-7) var(--space-8);
    color: var(--white);
    max-width: 640px;
}

.virtual-tour__eyebrow {
    font-family: var(--sans);
    font-size: var(--fs-eyebrow);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    color: rgba(255,255,255,0.7);
    margin-bottom: var(--space-3);
}

.virtual-tour__title {
    font-family: var(--serif);
    font-size: var(--fs-h3);
    color: var(--white);
    margin-bottom: var(--space-3);
    line-height: 1.2;
}

.virtual-tour__body {
    color: rgba(255,255,255,0.85);
    margin-bottom: var(--space-5);
}

.virtual-tour__cta {
    display: inline-block;
    color: var(--white);
    background: var(--cobalt);
    padding: 0.85rem 1.6rem;
    border-radius: var(--radius);
    font-size: 0.9rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    transition: background var(--transition);
}

.virtual-tour__cta:hover {
    background: var(--cobalt-hover);
    color: var(--white);
}

@media (max-width: 900px) {
    .virtual-tour {
        margin: 0;
        border-radius: 0;
    }
    .virtual-tour__inner { padding: var(--space-6); }
}

/* 5o. "Why Choose Us" feature row (Weblium-style) */
.why-card {
    background: var(--white);
    padding: var(--space-6);
    border: 1px solid var(--hairline);
    border-radius: var(--radius);
    transition: border-color var(--transition), box-shadow var(--transition);
}

.why-card:hover {
    border-color: var(--steel);
    box-shadow: var(--shadow-hover);
}

.why-card__icon {
    height: 48px;
    width: 48px;
    margin-bottom: var(--space-4);
    border-radius: 50%;
    background: var(--ice);
    color: var(--steel);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--serif);
    font-size: 1.3rem;
    font-weight: 500;
}

.why-card__title {
    font-family: var(--serif);
    font-size: var(--fs-h4);
    color: var(--navy);
    margin-bottom: var(--space-3);
}

.why-card__body {
    font-size: 0.95rem;
    color: var(--text-soft);
    line-height: 1.6;
}

/* ---- 6. UTILITIES ---- */

.mt-0 { margin-top: 0; }
.mt-3 { margin-top: var(--space-3); }
.mt-5 { margin-top: var(--space-5); }
.mt-7 { margin-top: var(--space-7); }

.mb-0 { margin-bottom: 0; }
.mb-3 { margin-bottom: var(--space-3); }
.mb-5 { margin-bottom: var(--space-5); }
.mb-7 { margin-bottom: var(--space-7); }

.text-center { text-align: center; }

.flex { display: flex; }
.flex-center { display: flex; align-items: center; justify-content: center; }
.flex-between { display: flex; align-items: center; justify-content: space-between; }
.gap-3 { gap: var(--space-3); }
.gap-5 { gap: var(--space-5); }

/* Inline link with arrow */
.link-arrow {
    color: var(--cobalt);
    font-weight: 600;
    font-size: 0.85rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.link-arrow::after { content: " →"; }
.link-arrow:hover { color: var(--cobalt-hover); }