/* Empower Rentals landing page.
   Palette sampled from the supplied logo: #BE1F5D raspberry, #3A3A3C charcoal,
   #F0F1F1 the grey panel the logo sits on. Using that grey as the page ground
   lets the logo (which has no transparent background behind the wordmark) sit
   flush, and gives the page a paper tone that suits the offer.
   Literata is a reading serif drawn for book text, which suits an offer that
   is a considered, written review of the owner's property. */

:root {
    --paper: #f0f1f1;
    --sheet: #ffffff;
    --ink: #3a3a3c;
    --ink-deep: #26262a;
    --magenta: #be1f5d;
    --magenta-deep: #96184a;
    --rule: #d8dada;
    --serif: "Literata", Georgia, serif;
    --sans: "Inter", system-ui, -apple-system, sans-serif;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    background: var(--paper);
    color: var(--ink);
    font-family: var(--sans);
    /* 17px floor: a good share of this audience is 60+. */
    font-size: 17px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; }

.skip {
    position: absolute;
    left: -9999px;
}
.skip:focus {
    left: 12px;
    top: 12px;
    z-index: 200;
    background: #fff;
    padding: 10px 16px;
    border-radius: 6px;
}

h1, h2, h3 { font-family: var(--serif); color: var(--ink-deep); }

/* ─── Header ─── */
.header {
    position: sticky;
    top: 0;
    z-index: 100;
    background: var(--paper);
    border-bottom: 1px solid var(--rule);
}

.header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    max-width: 1100px;
    margin: 0 auto;
    padding: 10px 20px;
}

.logo { height: 38px; width: auto; }

.header-contact { display: flex; align-items: center; gap: 18px; }

/* On a phone the header carries the phone number, not the form button: many of
   these owners are 60+ and would rather ring than scroll and type. The body
   repeats the form CTA, so nothing is lost. */
.header-phone {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    color: var(--ink-deep);
    font-size: 18px;
    font-weight: 700;
    text-decoration: none;
    border-bottom: 2px solid var(--magenta);
}
.header-phone:hover { color: var(--magenta); }

.header-cta { display: none; }

/* ─── Hero ─── */
.hero { padding: 48px 20px 0; }

.hero-inner {
    max-width: 1100px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr;
    gap: 44px;
    align-items: center;
}

h1 {
    font-size: clamp(2.1rem, 5.2vw, 3.4rem);
    font-weight: 700;
    line-height: 1.12;
    letter-spacing: -0.015em;
    margin: 0 0 22px;
    max-width: 18ch;
}

.lede {
    font-size: clamp(1.05rem, 1.6vw, 1.2rem);
    max-width: 54ch;
    margin: 0 0 32px;
}

/* Service and patch, stated plainly. The ads for the suburb ad groups name a
   place, so the page confirms it immediately instead of opening on a flourish. */
.service-line {
    margin: 0 0 20px;
    font-size: 1.02rem;
    font-weight: 600;
    color: var(--ink-deep);
    max-width: 54ch;
}

.service-line--list { margin: 24px 0 0; }

.lede-sub {
    margin: -8px 0 20px;
    font-size: 1.05rem;
    opacity: 0.85;
    max-width: 54ch;
}

/* Repeats the offer at the two points people decide: once the report has been
   explained, and once their questions have been answered. The form sits nearly
   seven screens down on a phone, so one CTA in the hero is not enough. */
.cta-band {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 16px 24px;
    margin-top: 36px;
    padding-top: 28px;
    border-top: 1px solid var(--rule);
}

.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 24px; }

.btn-primary {
    display: inline-flex;
    align-items: center;
    min-height: 56px;
    padding: 15px 30px;
    border-radius: 6px;
    background: var(--magenta);
    color: #fff;
    font-size: 18px;
    font-weight: 600;
    text-decoration: none;
    transition: background 0.18s ease;
}
.btn-primary:hover { background: var(--magenta-deep); }
.btn-primary:focus-visible { outline: 3px solid rgba(190,31,93,0.4); outline-offset: 3px; }

/* Phone links carry real weight on this page, so they get a proper tap target.
   The CTA ones are made 44px tall outright; the ones sitting inside prose get
   their hit area padded out without disturbing the line they sit on. */
.link-phone {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    font-size: 17px;
    font-weight: 600;
    color: var(--ink-deep);
    text-decoration: none;
    border-bottom: 2px solid var(--magenta);
}
.link-phone:hover { color: var(--magenta); }

a[href^="tel:"]:not(.link-phone):not(.header-phone) {
    padding: 11px 2px;
    margin: -11px -2px;
}

/* ─── Proof ─── */
.proof {
    max-width: 1100px;
    margin: 56px auto 0;
    padding-top: 24px;
    border-top: 1px solid var(--rule);
    display: grid;
    gap: 10px;
}
.proof p { margin: 0; font-size: 16px; line-height: 1.45; }

/* ─── Sections ─── */
.section { padding: 56px 20px 0; }
.wrap { max-width: 1100px; margin: 0 auto; }

h2 {
    font-size: clamp(1.6rem, 3.2vw, 2.3rem);
    font-weight: 700;
    line-height: 1.2;
    margin: 0 0 20px;
    max-width: 24ch;
}

h3 { font-size: 1.25rem; font-weight: 700; margin: 0 0 10px; }

.body { max-width: 62ch; margin: 0 0 16px; }
.body-strong { max-width: 62ch; margin: 20px 0 0; font-weight: 600; color: var(--ink-deep); }

.motto {
    font-family: var(--serif);
    font-size: clamp(1.3rem, 2.6vw, 1.75rem);
    font-weight: 500;
    color: var(--magenta);
    margin: 32px 0 0;
    padding-left: 20px;
    border-left: 4px solid var(--magenta);
}

/* ─── Report contents ───
   Set like the contents page of the document it describes: full width, two
   columns, ruled rows. */
.contents {
    list-style: none;
    display: grid;
    grid-template-columns: 1fr;
    column-gap: 56px;
    margin: 28px 0 0;
    padding: 0;
    border-top: 1px solid var(--rule);
}
.contents li {
    position: relative;
    padding: 15px 0 15px 28px;
    border-bottom: 1px solid var(--rule);
    font-size: 1.01rem;
}
/* A page mark, not a tick: this is a table of contents. */
.contents li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 24px;
    width: 12px;
    height: 2px;
    background: var(--magenta);
}

/* ─── Two-column sections ───
   Body copy stays at a readable measure and the space beside it earns its keep,
   rather than the text being stretched across the full width to fill it. */
.split { display: grid; grid-template-columns: 1fr; gap: 36px; align-items: start; }
.split-copy { min-width: 0; }

/* ─── The landlord journey ───
   A real sequence, so the connector and the ordering carry meaning. */
.journey {
    list-style: none;
    display: grid;
    grid-template-columns: 1fr;
    gap: 28px;
    margin: 36px 0 0;
    padding: 0;
    counter-reset: journey;
}

.journey-step {
    position: relative;
    padding-top: 26px;
}

.journey-dot {
    position: absolute;
    top: 0;
    left: 0;
    width: 15px;
    height: 15px;
    border-radius: 999px;
    background: var(--magenta);
}

/* The connector spans the gap to the next step, so it is drawn on the step
   rather than the dot, and only where a next step exists. */
.journey-step:not(:last-child)::after {
    content: "";
    position: absolute;
    display: none;
    background: var(--rule);
}

.journey-title {
    font-family: var(--serif);
    font-size: 1.2rem;
    font-weight: 700;
    margin: 0 0 8px;
}

.journey-text { margin: 0; font-size: 0.98rem; line-height: 1.55; max-width: 34ch; }

/* ─── The corridor ─── */
.corridor {
    list-style: none;
    margin: 0;
    padding: 26px 24px;
    background: var(--sheet);
    border: 1px solid var(--rule);
    border-radius: 10px;
}

.corridor-head {
    margin: 0 0 18px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--rule);
    font-family: var(--serif);
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--ink-deep);
}

.corridor-region {
    font-family: var(--serif);
    font-size: 1.02rem;
    font-weight: 700;
    color: var(--ink-deep);
    margin: 0 0 12px;
}
.corridor-region:not(:first-of-type) { margin-top: 24px; }

.corridor-sub {
    display: block;
    margin-top: 2px;
    font-family: var(--sans);
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--magenta);
}

.corridor-stop {
    position: relative;
    padding: 0 0 18px 26px;
    font-size: 1.02rem;
    font-weight: 600;
    color: var(--ink-deep);
}
.corridor-stop:last-child { padding-bottom: 0; }

.corridor-dot {
    position: absolute;
    left: 0;
    top: 7px;
    width: 11px;
    height: 11px;
    border-radius: 999px;
    border: 2px solid var(--magenta);
    background: var(--sheet);
}

/* The connecting line, drawn only between consecutive stops. */
.corridor-stop:not(:last-child) .corridor-dot::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 11px;
    width: 2px;
    height: 22px;
    transform: translateX(-50%);
    background: var(--rule);
}

/* A small heading for the contents list, in the serif and in sentence case:
   an all-caps tracked-out eyebrow would be decoration pretending to be
   structure. */
.contents-label {
    margin: 32px 0 0;
    font-family: var(--serif);
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--ink-deep);
}

/* ─── Reason icons ─── */
.reason-icon {
    display: block;
    width: 30px;
    height: 30px;
    margin-bottom: 14px;
    color: var(--magenta);
}

/* ─── Reasons ───
   Pushed well clear of the journey diagram above it: they were reading as one
   run-on block. */
.reasons {
    max-width: 1100px;
    margin: 56px auto 0;
    padding-top: 8px;
    display: grid;
    gap: 0;
}
.reason { padding: 30px 0; border-top: 1px solid var(--rule); }
.reason .body { margin-bottom: 0; }
.reason h3 { margin-bottom: 12px; }

/* ─── Suburbs ─── */
.suburbs { list-style: none; display: flex; flex-wrap: wrap; gap: 10px 12px; margin: 24px 0 0; padding: 0; }
.suburbs li {
    padding: 8px 16px;
    border: 1px solid var(--rule);
    border-radius: 999px;
    background: var(--sheet);
    font-size: 15px;
    font-weight: 600;
    color: var(--ink-deep);
}

/* ─── Testimonials carousel ───
   Native scroll-snap, so it works with no JavaScript at all: the list is a
   scroll container and swipe already does the right thing on a phone. The
   buttons are an enhancement on top. Nothing auto-advances, deliberately —
   auto-rotating carousels steal control from the reader and fail WCAG 2.2.2. */
.carousel-wrap { margin-top: 24px; }

.carousel {
    display: flex;
    gap: 20px;
    margin: 0;
    padding: 4px 4px 20px;
    list-style: none;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
}

.carousel:focus-visible {
    outline: 3px solid rgba(190, 31, 93, 0.3);
    outline-offset: 4px;
    border-radius: 8px;
}

.quote {
    flex: 0 0 86%;
    scroll-snap-align: start;
    margin: 0;
    padding: 24px;
    background: var(--sheet);
    border: 1px solid var(--rule);
    border-left: 4px solid var(--magenta);
    border-radius: 8px;
}

.quote blockquote { margin: 0; }
.quote blockquote p {
    margin: 0 0 14px;
    font-family: var(--serif);
    font-size: 1.02rem;
    line-height: 1.55;
    color: var(--ink-deep);
}
.quote-by { margin: 0; font-size: 14px; font-weight: 600; opacity: 0.75; }

/* Placeholders are meant to be unmissable. They exist so Angie can see the
   shape of what she needs to send, and so nobody ships them by accident. */
.quote--placeholder {
    background: var(--magenta-wash, #fbeef3);
    border: 2px dashed var(--magenta);
    border-left: 2px dashed var(--magenta);
}
.ph-label {
    margin: 0 0 10px;
    font-family: var(--serif);
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--magenta);
}
.ph-body { margin: 0 0 14px; font-size: 0.95rem; line-height: 1.5; }

.carousel-controls { display: flex; gap: 10px; }
.carousel-controls[hidden] { display: none; }

.carousel-btn {
    width: 48px;
    height: 48px;
    border: 1px solid var(--rule);
    border-radius: 999px;
    background: var(--sheet);
    color: var(--ink-deep);
    font-size: 19px;
    line-height: 1;
    cursor: pointer;
    transition: background 0.18s ease, border-color 0.18s ease;
}
.carousel-btn:hover { border-color: var(--magenta); color: var(--magenta); }
.carousel-btn:focus-visible {
    outline: 3px solid rgba(190, 31, 93, 0.3);
    outline-offset: 2px;
}
.carousel-btn[disabled] { opacity: 0.4; cursor: default; }

@media (prefers-reduced-motion: reduce) {
    .carousel { scroll-behavior: auto; }
}

/* ─── FAQ ───
   Native details/summary: it works without JavaScript, it is keyboard
   operable and screen readers announce the expanded state for free. */
/* Two independent columns on desktop, so opening one answer pushes only its own
   column and the section uses the full width instead of trailing off to the
   right. Answer text still sits at a readable measure inside each column. */
.faq {
    display: grid;
    grid-template-columns: 1fr;
    column-gap: 56px;
    margin-top: 24px;
}

/* Each column is its own stack, so opening an answer never leaves a gap
   opposite it. */
.faq-col { min-width: 0; }
.faq details { border-bottom: 1px solid var(--rule); }
.faq-col details:first-of-type { border-top: 1px solid var(--rule); }

.faq summary {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    padding: 18px 0;
    font-family: var(--serif);
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--ink-deep);
    cursor: pointer;
    list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }

/* A plus that becomes a minus. Drawn in CSS so there is no icon font and no
   stray arrow glyph in the copy. */
.faq summary::after {
    content: "";
    flex: 0 0 auto;
    width: 16px;
    height: 16px;
    margin-top: 6px;
    background:
        linear-gradient(var(--magenta), var(--magenta)) center/16px 2px no-repeat,
        linear-gradient(var(--magenta), var(--magenta)) center/2px 16px no-repeat;
    transition: transform 0.18s ease;
}
.faq details[open] summary::after {
    background: linear-gradient(var(--magenta), var(--magenta)) center/16px 2px no-repeat;
}

.faq summary:focus-visible {
    outline: 3px solid rgba(190, 31, 93, 0.3);
    outline-offset: 2px;
    border-radius: 4px;
}

.faq-a { padding: 0 0 20px; }
.faq-a p { margin: 0; max-width: 62ch; }
.faq-a a { color: var(--ink-deep); font-weight: 600; border-bottom: 2px solid var(--magenta); text-decoration: none; }

/* ─── Form ─── */
.form-section { padding: 72px 20px 0; scroll-margin-top: 80px; }
.form-inner { max-width: 1100px; margin: 0 auto; display: grid; gap: 36px; align-items: start; }

.form-phone { margin: 20px 0 0; font-size: 17px; }
/* The office number sits on its own line, so keep it tucked under the mobile
   number rather than reading as a separate thought. */
.form-phone + .form-phone { margin-top: 6px; }
.form-phone a {
    color: var(--ink-deep);
    font-weight: 600;
    text-decoration: none;
    border-bottom: 2px solid var(--magenta);
}
.form-phone a:hover { color: var(--magenta); }

.form {
    background: var(--sheet);
    border: 1px solid var(--rule);
    border-radius: 10px;
    padding: 24px 20px 20px;
}

.fields { display: flex; flex-direction: column; gap: 18px; }
.field { display: flex; flex-direction: column; gap: 8px; }
.pair { display: grid; grid-template-columns: 1fr; gap: 18px; }

label { font-size: 14px; font-weight: 600; color: var(--ink); }

input, select {
    width: 100%;
    height: 52px;
    padding: 0 16px;
    font-family: var(--sans);
    font-size: 16px;
    font-weight: 600;
    color: var(--ink-deep);
    background: #fff;
    border: 1px solid #b9c2d2;
    border-radius: 8px;
    outline: none;
}
input::placeholder { font-weight: 400; color: #aab2c0; }

input:focus-visible, select:focus-visible, .submit:focus-visible {
    border-color: var(--magenta);
    outline: 3px solid rgba(190,31,93,0.3);
    outline-offset: 2px;
}

input[aria-invalid="true"], select[aria-invalid="true"] {
    border-color: #c0392b;
    background: #fdf1ef;
}

.hint { margin: 0; font-size: 14px; line-height: 1.4; opacity: 0.75; }
.err { margin: 0; font-size: 14px; color: #b00020; }

.divider { height: 1px; border: 0; background: var(--rule); margin: 4px 0; }

.submit {
    width: 100%;
    min-height: 56px;
    margin-top: 24px;
    padding: 14px 24px;
    border: 0;
    border-radius: 6px;
    background: var(--magenta);
    color: #fff;
    font-family: var(--sans);
    font-size: 18px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.18s ease;
}
.submit:hover:not(:disabled) { background: var(--magenta-deep); }
.submit:disabled { opacity: 0.7; cursor: progress; }

.form-error { margin: 14px 0 0; color: #b00020; font-size: 15px; }
.form-error a { color: inherit; font-weight: 600; }
.reassure { margin: 14px 0 0; font-size: 14px; line-height: 1.5; opacity: 0.72; }

.success {
    background: var(--sheet);
    border: 1px solid var(--rule);
    border-top: 4px solid var(--magenta);
    border-radius: 10px;
    padding: 32px 24px;
}
.success h2 { font-size: 26px; margin: 0 0 14px; max-width: none; }
.success p { margin: 0 0 14px; max-width: 48ch; }
.success-call { font-weight: 600; }
.success-call a { color: var(--magenta); }

/* ─── Legal pages ─── */
.prose { max-width: 70ch; }
.legal-h1 { font-size: clamp(1.9rem, 4vw, 2.6rem); line-height: 1.15; margin: 0 0 24px; }
.prose h2 { font-size: 1.3rem; margin: 36px 0 12px; max-width: none; }
.prose a { color: var(--ink-deep); font-weight: 600; border-bottom: 2px solid var(--magenta); text-decoration: none; }
.plain-list { max-width: 62ch; margin: 0 0 16px; padding-left: 22px; }
.plain-list li { margin-bottom: 8px; }

/* ─── Footer ─── */
.footer { border-top: 1px solid var(--rule); margin-top: 72px; padding: 40px 20px 56px; }
.footer-inner { max-width: 1100px; margin: 0 auto; }
.footer-name { font-family: var(--serif); font-size: 22px; font-weight: 700; color: var(--ink-deep); margin: 0 0 8px; }
.footer-area { max-width: 52ch; margin: 0 0 16px; }
.footer-contact { display: flex; flex-wrap: wrap; align-items: center; gap: 20px; margin: 0 0 24px; }
.footer-contact a {
    color: var(--ink-deep);
    font-weight: 600;
    text-decoration: none;
    border-bottom: 2px solid var(--magenta);
}
.footer-hours { opacity: 0.8; }
.footer-links { margin: 0 0 16px; }
.footer-links a { color: var(--ink-deep); font-weight: 600; }
.footer-licence { max-width: 68ch; margin: 0 0 12px; font-size: 14px; line-height: 1.5; color: var(--ink-deep); }
.reassure a { color: var(--ink-deep); font-weight: 600; }
.footer-small { max-width: 68ch; margin: 0; font-size: 14px; line-height: 1.5; opacity: 0.7; }

/* ─── Secondary button ───
   The property review is the second door, so it is drawn quieter than the
   appraisal: same size and shape, outline instead of fill. */
.btn-secondary {
    display: inline-flex;
    align-items: center;
    min-height: 56px;
    padding: 13px 26px;
    border: 2px solid var(--magenta);
    border-radius: 6px;
    background: transparent;
    color: var(--magenta-deep);
    font-size: 18px;
    font-weight: 600;
    text-decoration: none;
    transition: background 0.18s ease, color 0.18s ease;
}
.btn-secondary:hover { background: var(--magenta); color: #fff; }
.btn-secondary:focus-visible { outline: 3px solid rgba(190,31,93,0.4); outline-offset: 3px; }

.hero-call { margin: 18px 0 0; }

/* ─── The review card ───
   One sheet with the review's four questions on it. It shows depth by what
   it answers; there is deliberately no page count anywhere on the page. */
.review-card {
    position: relative;
    margin: 0 10px 10px 0;
    padding: 30px 26px 24px 40px;
    background: var(--sheet);
    border: 1px solid #c3c7c7;
    border-radius: 3px;
    box-shadow: 10px 10px 0 -1px var(--sheet), 10px 10px 0 0 #c3c7c7;
}

/* The bracket from the logo, as the document's mark. */
.review-card::before {
    content: "";
    position: absolute;
    top: 30px;
    left: 20px;
    width: 6px;
    height: 56px;
    background: var(--magenta);
    border-radius: 2px;
}

.review-card-title {
    font-family: var(--serif);
    font-size: 1.3rem;
    font-weight: 700;
    line-height: 1.25;
    color: var(--ink-deep);
    margin: 0 0 18px;
}

.review-card-sub {
    display: block;
    margin-top: 6px;
    font-family: var(--sans);
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--ink);
    opacity: 0.8;
}

.review-rows { margin: 0; border-top: 1px solid var(--rule); }

.review-row {
    display: grid;
    grid-template-columns: 5.5rem 1fr;
    gap: 14px;
    padding: 14px 0;
    border-bottom: 1px solid var(--rule);
}

.review-row dt {
    font-family: var(--serif);
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--magenta);
}

.review-row dd { margin: 0; font-size: 0.98rem; line-height: 1.45; }

.review-card-foot { margin: 16px 0 0; font-size: 0.95rem; font-weight: 600; color: var(--ink-deep); }

/* ─── Three differences ─── */
.diffs {
    max-width: 1100px;
    margin: 8px auto 0;
    display: grid;
    gap: 0;
}
.diff { padding: 28px 0; border-top: 1px solid var(--rule); }
.diff .body { margin-bottom: 0; }
.diff h3 { margin-bottom: 12px; }

/* The team line sits straight under the three differences, where it backs
   all three. Set in the serif so it reads as a statement, not a caption. */
.team-line {
    margin: 8px 0 0;
    padding: 24px 0 0;
    border-top: 1px solid var(--rule);
    font-family: var(--serif);
    font-size: clamp(1.1rem, 2vw, 1.3rem);
    font-weight: 500;
    color: var(--ink-deep);
    max-width: 56ch;
}

/* ─── Paerata Rise note ─── */
.local-note {
    margin-top: 28px;
    padding: 22px 22px 6px;
    background: var(--sheet);
    border: 1px solid var(--rule);
    border-left: 4px solid var(--magenta);
    border-radius: 8px;
}
.local-note h3 { font-size: 1.12rem; }

/* ─── Portrait ─── */
.portrait { margin: 0; }
.portrait img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 5;
    object-fit: cover;
    /* Angie asked that her head is never cut. The image is cropped 4:5 with
       headroom; if a box ever crops it, trim the bottom, not the top. */
    object-position: 50% 0%;
    border-radius: 10px;
    background: #e6e1de;
}
.portrait figcaption { margin-top: 12px; font-size: 14px; font-weight: 600; opacity: 0.75; }

/* Straight after its heading, so no gap for a diagram above it. */
.reasons--three { margin-top: 8px; }

/* The tagline Angie asked for under the logo. Small and in the logo's own
   raspberry, so it reads as part of the mark. */
.brand { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; }
.brand-tagline {
    margin: 0;
    font-family: var(--serif);
    font-size: 12px;
    font-weight: 500;
    line-height: 1.2;
    color: var(--magenta);
    white-space: nowrap;
}

/* On a phone only the mobile number shows; the office line and the review
   button join it on wider screens. */
.header-phone--office { display: none; }

/* Angie's two taglines, stacked under a short raspberry rule. Side by side
   they wrap awkwardly in the hero column. */
.hero-taglines {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin: 0 0 16px;
    padding-left: 14px;
    border-left: 3px solid var(--magenta);
    font-family: var(--serif);
    font-size: 1.05rem;
    font-weight: 500;
    line-height: 1.4;
    color: var(--magenta-deep);
}

.hero-goal {
    margin: 22px 0 10px;
    font-family: var(--serif);
    font-size: clamp(1.15rem, 2.2vw, 1.35rem);
    font-weight: 700;
    color: var(--ink-deep);
}

/* Conditions under a claim: smaller, but still plainly readable. */
.fineprint { margin: 10px 0 0; max-width: 62ch; font-size: 14px; line-height: 1.5; opacity: 0.8; }
.diff .diff-claim { margin-top: 14px; }

/* Personal service and collective expertise, under the three differences. */
.pairing {
    display: grid;
    gap: 20px;
    margin: 8px 0 0;
    padding: 24px 0 0;
    border-top: 1px solid var(--rule);
}
.pairing dt { font-weight: 700; color: var(--ink-deep); margin-bottom: 4px; }
.pairing dd { margin: 0; max-width: 52ch; }
.pairing + .team-line { border-top: 0; padding-top: 4px; margin-top: 20px; }

/* Angie's FAQ answers open with a bold line and close with a slogan. */
.faq-a p + p { margin-top: 12px; }
.faq-a .faq-lead { font-weight: 700; color: var(--ink-deep); }
.faq-a .faq-tag { font-family: var(--serif); font-weight: 700; color: var(--magenta-deep); }

.footer-goal { margin: 0 0 12px; font-family: var(--serif); font-weight: 500; color: var(--magenta-deep); }

/* ─── Wider screens ─── */
@media (min-width: 768px) {
    .quote { flex-basis: calc((100% - 20px) / 2); }
    .header-inner { padding: 12px 32px; }
    .logo { height: 46px; }
    .header-phone { font-size: 17px; font-weight: 600; border-bottom: 0; }
    .header-cta {
        display: inline-flex;
        align-items: center;
        min-height: 44px;
        padding: 10px 20px;
        border-radius: 6px;
        background: var(--magenta);
        color: #fff;
        font-size: 15px;
        font-weight: 600;
        text-decoration: none;
        white-space: nowrap;
        transition: background 0.18s ease;
    }
    .header-cta:hover { background: var(--magenta-deep); }
    .header-cta--secondary { display: none; }
    .header-phone--office { display: inline-flex; }
    .brand-tagline { font-size: 13px; }
    .pairing { grid-template-columns: 1fr 1fr; gap: 32px; }
    .hero { padding: 72px 32px 0; }
    .section { padding: 76px 32px 0; }
    .form-section { padding: 96px 32px 0; }
    .form { padding: 32px 28px 24px; }
    .pair { grid-template-columns: 1fr 1fr; }
    .proof { grid-template-columns: repeat(3, 1fr); gap: 32px; }
}

@media (min-width: 992px) {
    .hero-inner { grid-template-columns: 1.05fr 0.95fr; gap: 64px; }
    .reasons { grid-template-columns: 1fr 1fr; column-gap: 56px; }
    .quote { flex-basis: calc((100% - 40px) / 3); }

    .split { grid-template-columns: 1.15fr 0.85fr; gap: 64px; }
    .split--portrait { grid-template-columns: 1.3fr 0.7fr; }

    /* Three abreast, the connector running from each dot across the gap to the
       next one. 32px gap, 15px dot, so it starts at 22px and overshoots by the
       full gap width. */
    .journey { grid-template-columns: repeat(3, 1fr); gap: 32px; }
    .journey-step:not(:last-child)::after {
        display: block;
        top: 7px;
        left: 22px;
        right: -32px;
        height: 1px;
    }

    .faq { grid-template-columns: 1fr 1fr; }
    .contents { grid-template-columns: 1fr 1fr; }
    .reasons { margin-top: 72px; }
    .reasons--three { grid-template-columns: repeat(3, 1fr); column-gap: 48px; margin-top: 16px; }
    .diffs { grid-template-columns: repeat(3, 1fr); column-gap: 48px; margin-top: 16px; }
    .review-card { margin-top: 8px; }
    .form-inner { grid-template-columns: 0.9fr 1.1fr; gap: 64px; }
    /* Header is ~95px tall since the tagline went under the logo. */
    .form-intro { position: sticky; top: 120px; }

    /* The review card stays in view while the owner reads Angie's opening
       copy beside it, then lets go where the hero ends. Sticky only works
       inside its own grid cell, so it can never ride over the next section. */
    .hero-inner { align-items: start; }
    .review-card { position: sticky; top: 120px; }
}

/* Room for the full header Angie marked up: both numbers and both buttons.
   The review button is the outline version, pink border and pink text on the
   grey, as on the page. */
@media (min-width: 1024px) {
    .header-contact { gap: 14px; }
    .header-phone--office { display: inline-flex; }
    .header-cta--secondary {
        display: inline-flex;
        background: transparent;
        color: var(--magenta-deep);
        border: 2px solid var(--magenta);
        padding: 8px 18px;
    }
    .header-cta--secondary:hover { background: var(--magenta); color: #fff; }
}

/* ─── Motion ───
   Kept small and few. One moment on load (the review's four questions arrive
   in order), and the rest answers something the visitor did: scrolled, opened
   a question, pressed a button. All of it sits inside no-preference, so
   anyone who asks their device for less motion gets none. Hidden starting
   states are keyed to .motion, which main.js sets, so with no JavaScript
   nothing is ever left invisible. */
@media (prefers-reduced-motion: no-preference) {

    /* When the card comes into view (straight away on a computer, after a
       scroll on a phone): the bracket draws down, then Rent, Retain, Sell,
       Reinvest arrive in order. */
    @keyframes er-grow { from { transform: scaleY(0); } to { transform: scaleY(1); } }
    @keyframes er-rise {
        from { opacity: 0; transform: translateY(8px); }
        to { opacity: 1; transform: none; }
    }
    .motion .review-card:not(.is-in)::before { transform: scaleY(0); }
    .motion .review-card:not(.is-in) .review-row,
    .motion .review-card:not(.is-in) .review-card-foot { opacity: 0; }
    .motion .review-card.is-in::before { transform-origin: top; animation: er-grow 0.5s 0.1s ease-out backwards; }
    .motion .review-card.is-in .review-row { animation: er-rise 0.45s ease-out backwards; }
    .motion .review-card.is-in .review-row:nth-child(1) { animation-delay: 0.3s; }
    .motion .review-card.is-in .review-row:nth-child(2) { animation-delay: 0.42s; }
    .motion .review-card.is-in .review-row:nth-child(3) { animation-delay: 0.54s; }
    .motion .review-card.is-in .review-row:nth-child(4) { animation-delay: 0.66s; }
    .motion .review-card.is-in .review-card-foot { animation: er-rise 0.45s 0.8s ease-out backwards; }

    /* Once the card is following the scroll, it lifts slightly off the page. */
    .review-card { transition: box-shadow 0.3s ease, transform 0.3s ease; }
    .review-card.is-stuck {
        transform: translateY(-2px);
        box-shadow: 10px 10px 0 -1px var(--sheet), 10px 10px 0 0 #c3c7c7,
                    0 18px 40px -24px rgba(38, 38, 42, 0.35);
    }

    /* The header picks up a soft edge once the page moves under it. */
    .header { transition: box-shadow 0.25s ease; }
    .header.is-scrolled { box-shadow: 0 6px 18px -12px rgba(38, 38, 42, 0.35); }

    /* The journey: dots arrive in order, then the line between them draws. */
    .motion .journey-dot { transform: scale(0); transition: transform 0.35s cubic-bezier(.3, 1.6, .5, 1); }
    .motion .journey-step:nth-child(2) .journey-dot { transition-delay: 0.25s; }
    .motion .journey-step:nth-child(3) .journey-dot { transition-delay: 0.5s; }
    .motion .journey.is-in .journey-dot { transform: scale(1); }
    .motion .journey-step:not(:last-child)::after {
        transform: scaleX(0);
        transform-origin: left;
        transition: transform 0.5s ease-out 0.2s;
    }
    .motion .journey-step:nth-child(2)::after { transition-delay: 0.45s; }
    .motion .journey.is-in .journey-step::after { transform: scaleX(1); }

    /* Opening a question eases the answer in rather than snapping it. */
    .faq details[open] .faq-a { animation: er-rise 0.28s ease-out; }

    /* Buttons give a little under the finger. */
    .btn-primary:active, .btn-secondary:active, .header-cta:active, .submit:active {
        transform: translateY(1px);
    }
}

@media (prefers-reduced-motion: reduce) {
    .btn-primary, .btn-secondary, .header-cta, .submit { transition: none; }
}