/*
 * Florida Real Estate Services Inc. — site styles (2026 redesign).
 * Colours, type and spacing come from the FRES design system
 * (https://claude.ai/artifact/7eFWNdsTNawJ3ixntWvK2v). Every page uses this one file;
 * see docs/CHANGES.md for the reason behind the accessibility rules.
 */

:root {
    --navy: #12263A;
    --navy-deep: #0E1D2C;
    --scrim-rgb: 10, 22, 36;        /* tint over the sunset photo in the hero and banners (r, g, b) */
    --border-navy: #2E4560;
    --border-footer: #24384F;
    --gold: #D4A24C;
    --gold-light: #F0D29A;
    --gold-ink: #7A5212;
    --sand: #F5F0E8;
    --sand-deep: #EDE6D9;
    --border: #E3DED4;
    --border-sand: #D9D1C2;
    --border-field: #8A949E;
    --border-trust: #E8E2D6;
    --ink: #1E2933;
    --ink-body: #33404C;
    --ink-muted: #55606B;
    --ink-placeholder: #5B6672;
    --ink-on-navy: #C5CED8;
    --ink-on-navy-strong: #E6EBF0;
    --ink-nav: #D7DEE6;
    --error: #B3261E;
    --focus: #FFBF47;
    --font-display: 'Playfair Display', Georgia, serif;
    --font-sans: Inter, system-ui, -apple-system, 'Segoe UI', sans-serif;
    --radius-s: 10px;
    --radius-m: 14px;
    --radius-l: 16px;
    --radius-pill: 999px;
    --page: 1240px;
    --gutter: 32px;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
    margin: 0;
    font-family: var(--font-sans);
    font-size: 16px;
    line-height: 1.6;
    color: var(--ink);
    background: #FFFFFF;
    -webkit-text-size-adjust: 100%;
}
img { max-width: 100%; height: auto; }
a { color: var(--gold-ink); }
a:hover { color: var(--navy); }
h1, h2, h3 { font-family: var(--font-display); font-weight: 600; color: var(--navy); margin: 0; }
/* Playfair Display's default numbers are "old-style" (29 sits low, like lowercase letters).
   Use full-height numbers in every Playfair heading so "SR 29" and "25 years" line up with capitals. */
h1, h2, h3, .trust-value, .brand-name, .footer-name { font-variant-numeric: lining-nums; }
p, ul { margin: 0; }

/* ---- Screen-reader-only text ---- */
.sr-only {
    position: absolute !important;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0, 0, 0, 0);
    white-space: nowrap; border: 0;
}

/* ---- Skip link (WCAG 2.4.1) ---- */
.skip-link {
    position: absolute;
    left: 8px; top: -200px;
    z-index: 1000;
    padding: 10px 16px;
    background: #FFFFFF;
    color: var(--navy);
    font-weight: 600;
    border-radius: var(--radius-s);
}
.skip-link:focus { top: 8px; }
main:focus { outline: none; }

/* ---- Visible keyboard focus (WCAG 2.4.7) ---- */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible,
textarea:focus-visible, [tabindex]:focus-visible {
    outline: 3px solid var(--focus);
    outline-offset: 2px;
}

/* ---- Layout helpers ---- */
.wrap { max-width: var(--page); margin: 0 auto; padding-left: var(--gutter); padding-right: var(--gutter); }
.section { padding-top: 96px; padding-bottom: 96px; }
.section-sand { background: var(--sand); }
.section-navy { background: var(--navy); color: #FFFFFF; }
.stack { display: flex; flex-direction: column; gap: 20px; }
.stack-lg { gap: 40px; }
.section-tight { padding-top: 64px; }
.eyebrow {
    font-size: 13px; font-weight: 600; letter-spacing: 3px; text-transform: uppercase;
    color: var(--gold-ink);
}
.section-navy .eyebrow, .banner .eyebrow, .hero .eyebrow { color: var(--gold-light); }
.h-section { font-size: clamp(30px, 3.4vw, 44px); line-height: 1.15; }
.section-navy .h-section { color: #FFFFFF; }
.lead { font-size: 18px; line-height: 1.7; color: var(--ink-body); }
.body-text { font-size: 17px; line-height: 1.7; color: var(--ink-body); }
.section-head { display: flex; flex-direction: column; gap: 12px; max-width: 680px; }
.section-head-row { display: flex; flex-wrap: wrap; gap: 16px 40px; align-items: end; justify-content: space-between; }
.more-link { font-weight: 600; font-size: 16px; }
.section-navy .more-link { color: var(--gold-light); }
.section-navy .more-link:hover { color: #FFFFFF; }

/* ---- Buttons ---- */
.btn {
    display: inline-flex; align-items: center; justify-content: center;
    min-height: 52px; padding: 0 28px;
    border: 1.5px solid transparent; border-radius: var(--radius-pill);
    font: inherit; font-size: 16px; font-weight: 600; text-decoration: none;
    cursor: pointer;
}
.btn-gold { background: var(--gold); color: var(--navy); }
.btn-gold:hover { background: var(--gold-light); color: var(--navy); }
.btn-navy { background: var(--navy); color: #FFFFFF; }
.btn-navy:hover { background: var(--navy-deep); color: #FFFFFF; }
.btn-outline { border-color: var(--navy); color: var(--navy); background: transparent; }
.btn-outline:hover { background: var(--navy); color: #FFFFFF; }
.btn-outline-light { border-color: #FFFFFF; color: #FFFFFF; background: transparent; }
.btn-outline-light:hover { background: #FFFFFF; color: var(--navy); }
.btn-row { display: flex; flex-wrap: wrap; gap: 14px; }
.btn-row.center { justify-content: center; }

/* ---- Header ---- */
.site-header { background: var(--navy); color: #FFFFFF; }
.site-header .wrap {
    padding-top: 18px; padding-bottom: 18px;
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 32px;
}
.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; color: #FFFFFF; }
.brand:hover { color: #FFFFFF; }
.brand svg { flex: 0 0 auto; stroke: var(--gold); }
.brand-text { display: flex; flex-direction: column; line-height: 1.1; }
.brand-name { font-family: var(--font-display); font-size: 21px; font-weight: 600; }
.brand-sub { font-size: 11px; letter-spacing: 2.5px; text-transform: uppercase; color: var(--ink-on-navy); margin-top: 5px; }
.nav-toggle {
    display: none; align-items: center; justify-content: center;
    width: 48px; height: 48px; padding: 0;
    border: 1px solid var(--border-navy); border-radius: 12px;
    background: transparent; color: #FFFFFF; cursor: pointer;
}
.nav-toggle .icon-close { display: none; }
.nav-toggle[aria-expanded="true"] .icon-open { display: none; }
.nav-toggle[aria-expanded="true"] .icon-close { display: block; }
.site-nav { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 24px; font-size: 15px; }
.site-nav a {
    display: inline-flex; align-items: center; min-height: 44px;
    color: var(--ink-nav); font-weight: 500; text-decoration: none;
    border-bottom: 2px solid transparent;
}
.site-nav a:hover { color: #FFFFFF; border-bottom-color: var(--border-navy); }
.site-nav a[aria-current="page"] { color: #FFFFFF; font-weight: 600; border-bottom-color: var(--gold); }
.site-nav a.nav-call {
    padding: 0 20px; border: 0; border-radius: var(--radius-pill);
    background: var(--gold); color: var(--navy); font-weight: 600;
}
.site-nav a.nav-call:hover { background: var(--gold-light); }

/* ---- Home hero and page banners (the signature sunset photo under a navy scrim) ---- */
.hero, .banner {
    background-color: var(--navy);
    background-image: linear-gradient(90deg, rgba(var(--scrim-rgb), 0.85) 0%, rgba(var(--scrim-rgb), 0.55) 100%),
                      url(../images/gulf-sunset-960.jpg);
    background-size: cover;
    background-position: center 60%;
    color: #FFFFFF;
}
@media (min-width: 961px) {
    .hero, .banner {
        background-image: linear-gradient(90deg, rgba(var(--scrim-rgb), 0.85) 0%, rgba(var(--scrim-rgb), 0.55) 100%),
                          url(../images/gulf-sunset-1920.jpg);
    }
}
.hero {
    min-height: 640px; display: flex; align-items: center;
    background-image: linear-gradient(90deg, rgba(var(--scrim-rgb), 0.82) 0%, rgba(var(--scrim-rgb), 0.55) 55%, rgba(var(--scrim-rgb), 0.25) 100%),
                      url(../images/gulf-sunset-960.jpg);
}
@media (min-width: 961px) {
    .hero {
        background-image: linear-gradient(90deg, rgba(var(--scrim-rgb), 0.82) 0%, rgba(var(--scrim-rgb), 0.55) 55%, rgba(var(--scrim-rgb), 0.25) 100%),
                          url(../images/gulf-sunset-1920.jpg);
    }
}
.hero .wrap { width: 100%; padding-top: 96px; padding-bottom: 96px; }
.hero-inner { max-width: 720px; display: flex; flex-direction: column; gap: 24px; }
.hero .eyebrow { font-size: 14px; }
.hero h1 { font-size: clamp(38px, 5vw, 64px); line-height: 1.1; color: #FFFFFF; }
.hero-lead { font-size: 19px; line-height: 1.6; color: var(--ink-on-navy-strong); max-width: 600px; }
.hero .btn-row { margin-top: 8px; }
.banner .wrap { padding-top: 88px; padding-bottom: 88px; display: flex; flex-direction: column; gap: 16px; }
.banner .eyebrow { font-size: 14px; }
.banner h1 { font-size: clamp(36px, 4.4vw, 56px); line-height: 1.1; color: #FFFFFF; max-width: 820px; }
.banner-lead { font-size: 18px; line-height: 1.6; color: var(--ink-on-navy-strong); max-width: 680px; }

/* ---- Trust strip ---- */
.trust { border-bottom: 1px solid var(--border-trust); }
.trust .wrap { padding-top: 40px; padding-bottom: 40px; display: flex; flex-wrap: wrap; gap: 28px 40px; justify-content: space-between; }
.trust-item { flex: 1 1 220px; display: flex; flex-direction: column; gap: 6px; }
.trust-value { font-family: var(--font-display); font-size: 30px; font-weight: 600; color: var(--navy); }
.trust-label { font-size: 15px; line-height: 1.5; color: var(--ink-muted); }

/* ---- Split section: text beside a photo ---- */
.split { display: flex; flex-wrap: wrap; gap: 56px; align-items: center; }
.split-text { flex: 999 1 520px; min-width: 0; display: flex; flex-direction: column; gap: 20px; }
.split-media { flex: 1 1 360px; display: flex; flex-direction: column; gap: 12px; }
.split-media img { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--radius-l); }
.split-media .caption { font-size: 14px; color: var(--ink-muted); }

/* ---- Cards ---- */
.card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 24px; }
.card { border: 1px solid var(--border); border-radius: var(--radius-l); padding: 36px; display: flex; flex-direction: column; gap: 16px; background: #FFFFFF; }
.card h2, .card h3 { font-size: 26px; }
.card-lg { padding: 40px; gap: 18px; }
.card-lg h2 { font-size: 32px; }
.card .btn { align-self: flex-start; margin-top: auto; min-height: 48px; padding: 0 24px; }
.ticks { padding-left: 20px; display: flex; flex-direction: column; gap: 10px; font-size: 16px; line-height: 1.6; color: var(--ink-body); }
.ticks strong { color: var(--navy); }

/* ---- Area cards (home communities band) ---- */
.area-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 20px; }
.area-card { border: 1px solid var(--border-navy); border-radius: var(--radius-m); padding: 24px; display: flex; flex-direction: column; gap: 8px; }
.area-card h3 { font-size: 22px; color: #FFFFFF; }
.area-count { font-size: 14px; font-weight: 600; color: var(--gold-light); }
.area-names { font-size: 14px; line-height: 1.6; color: var(--ink-on-navy); }

/* ---- Centred call to action ---- */
.cta { max-width: 860px; margin: 0 auto; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 20px; }
.cta .btn-row { justify-content: center; margin-top: 8px; }
.section-navy .cta .lead { color: var(--ink-on-navy); }

/* ---- Chips ---- */
.chips { padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 10px; }
.chips li { padding: 8px 16px; border-radius: var(--radius-pill); background: #FFFFFF; border: 1px solid var(--border-sand); font-size: 15px; color: var(--navy); }

/* ---- Two text columns ---- */
.cols-2 { display: flex; flex-wrap: wrap; gap: 48px; }
.cols-2 > * { flex: 1 1 420px; display: flex; flex-direction: column; gap: 16px; }
.h-sub { font-size: clamp(28px, 3vw, 38px); line-height: 1.2; }

/* ---- Tip note ---- */
.tip {
    display: flex; flex-wrap: wrap; gap: 16px 32px; align-items: center; justify-content: space-between;
    background: var(--sand); border-radius: var(--radius-m); padding: 20px 24px;
}
.tip p { flex: 1 1 420px; font-size: 16px; line-height: 1.6; color: var(--ink-body); }
.tip strong { color: var(--navy); }
.tip .btn { min-height: 44px; padding: 0 22px; }

/* ---- Communities ---- */
.jump { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.jump-label { font-size: 14px; font-weight: 600; letter-spacing: 2px; text-transform: uppercase; color: var(--ink-muted); margin-right: 6px; }
.jump a {
    display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px;
    border-radius: var(--radius-pill); border: 1px solid var(--border-sand);
    font-size: 15px; color: var(--navy); text-decoration: none;
}
.jump a:hover { border-color: var(--navy); }
.area-groups { columns: 3 260px; column-gap: 48px; }
.area-group { break-inside: avoid; margin-bottom: 32px; scroll-margin-top: 24px; }
.area-group.area-group-long { break-inside: auto; }
.area-group h2 { margin: 0 0 12px; font-size: 24px; border-bottom: 2px solid var(--gold); padding-bottom: 8px; break-after: avoid; }
.area-group ul { padding: 0; list-style: none; display: flex; flex-direction: column; gap: 9px; font-size: 16px; line-height: 1.4; }
.area-group li { break-inside: avoid; }
.area-group a { color: var(--navy); text-decoration: underline; }
.area-group a:hover { color: var(--gold-ink); }

/* ---- Text pages (Terms, Privacy, Accessibility, Sitemap) ---- */
.prose { max-width: 760px; font-size: 17px; line-height: 1.7; color: var(--ink-body); }
.prose > * + * { margin-top: 1em; }
.prose h2 { font-size: 26px; line-height: 1.25; margin-top: 1.8em; }
.prose ul { padding-left: 1.4em; }
.prose li + li { margin-top: 0.4em; }
.prose strong { color: var(--navy); }
.prose a { color: var(--gold-ink); }
.sitemap-cols { display: flex; flex-wrap: wrap; gap: 2em 4em; }
.sitemap-cols section { flex: 1 1 14em; }
.sitemap-cols h2 { margin-top: 0; }
.sitemap-cols ul ul { margin-top: 0.4em; }

/* ---- Contact ---- */
.contact-top { display: flex; flex-wrap: wrap; gap: 32px 48px; align-items: flex-start; }
.contact-details { flex: 1 1 300px; display: flex; flex-direction: column; gap: 22px; }
.contact-details h2, .contact-form h2 { font-size: 30px; }
.detail { display: flex; flex-direction: column; gap: 4px; }
.detail-label { font-size: 13px; font-weight: 600; letter-spacing: 2px; text-transform: uppercase; color: var(--ink-muted); }
.detail-value { font-size: 18px; color: var(--navy); }
.detail-value strong { font-weight: 600; }
.detail a { color: var(--navy); }
.detail a:hover { color: var(--gold-ink); }
.detail p.detail-text { font-size: 16px; line-height: 1.6; color: var(--ink-body); }
.contact-form-col { flex: 2 1 520px; min-width: 0; }
.contact-form {
    border: 1px solid var(--border); border-radius: var(--radius-l); padding: 36px;
    display: flex; flex-direction: column; gap: 16px;
}
.contact-form h2 { margin-bottom: 4px; }
.field-row { display: flex; flex-wrap: wrap; gap: 16px; }
.field-row > .field { flex: 1 1 220px; }
.field { display: flex; flex-direction: column; gap: 6px; }
.field-label { font-size: 14px; font-weight: 600; color: var(--ink-body); }
.field input, .field select, .field textarea {
    width: 100%; min-height: 52px; padding: 0 16px;
    border: 1px solid var(--border-field); border-radius: var(--radius-s);
    font: inherit; font-size: 16px; color: var(--ink); background: #FFFFFF;
}
.field select { padding: 0 12px; }
.field textarea { padding: 14px 16px; line-height: 1.6; resize: vertical; min-height: 160px; }
.field input::placeholder, .field textarea::placeholder { color: var(--ink-placeholder); opacity: 1; }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--navy); }
.field [aria-invalid="true"] { border-color: var(--error); }
.field-error { font-size: 14px; color: var(--error); }
.form-note { font-size: 13px; color: var(--ink-muted); }
.form-status {
    border-radius: var(--radius-s); background: var(--sand); padding: 16px 18px;
    font-size: 15px; line-height: 1.6; color: var(--ink-body);
}
.form-status:empty { display: none; }
/* Hidden box only spam bots fill in (the Worker throws those messages away). */
.hp-field { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.contact-form .btn[disabled] { opacity: 0.6; cursor: wait; }
.contact-form .btn { align-self: flex-start; padding: 0 32px; }
.contact-map { padding-top: 40px; display: flex; flex-direction: column; gap: 12px; }
.service-area-map { display: block; width: 100%; height: 420px; border: 0; border-radius: var(--radius-l); background: var(--sand-deep); }
.map-caption { font-size: 15px; line-height: 1.6; color: var(--ink-body); }

/* ---- Footer ---- */
.site-footer { background: var(--navy-deep); color: var(--ink-on-navy); }
.site-footer .wrap { padding-top: 64px; padding-bottom: 32px; display: flex; flex-direction: column; gap: 40px; }
.footer-top { display: flex; flex-wrap: wrap; gap: 40px 56px; }
.footer-about { flex: 2 1 320px; display: flex; flex-direction: column; gap: 14px; }
.footer-name { font-family: var(--font-display); font-size: 22px; font-weight: 600; color: #FFFFFF; }
.footer-about p:not(.footer-name) { font-size: 15px; line-height: 1.7; max-width: 420px; }
.footer-col { flex: 1 1 200px; display: flex; flex-direction: column; gap: 10px; font-size: 15px; }
.footer-head { margin: 0 0 6px; font-size: 12px; font-weight: 600; letter-spacing: 2.5px; text-transform: uppercase; color: #FFFFFF; }
.footer-col a { color: var(--ink-on-navy); text-decoration: none; }
.footer-col a:hover { color: #FFFFFF; text-decoration: underline; }
.footer-col a.footer-contact { color: var(--gold); text-decoration: underline; }
.footer-col a.footer-contact:hover { color: var(--gold-light); }
.footer-broker { color: #FFFFFF; font-weight: 600; }
.footer-legal { border-top: 1px solid var(--border-footer); padding-top: 28px; display: flex; flex-wrap: wrap; gap: 20px 28px; align-items: flex-start; }
.footer-legal img { flex: 0 0 auto; width: 52px; height: 52px; background: #FFFFFF; border-radius: 6px; }
.footer-legal-text { flex: 1 1 520px; display: flex; flex-direction: column; gap: 8px; font-size: 13px; line-height: 1.7; }
.footer-legal-text strong { color: #FFFFFF; }
.footer-legal-text a { color: var(--ink-on-navy); }
.footer-bottom { display: flex; flex-wrap: wrap; gap: 10px 24px; justify-content: space-between; font-size: 13px; }
.footer-bottom nav { display: flex; flex-wrap: wrap; gap: 8px 20px; }
.footer-bottom a { color: var(--ink-on-navy); }
.footer-bottom a:hover { color: #FFFFFF; }
.todo-license { background: var(--focus); color: #000000; padding: 0 4px; }

/* ---- Phones and small tablets ---- */
@media (max-width: 760px) {
    :root { --gutter: 16px; }
    .section { padding-top: 64px; padding-bottom: 64px; }
    .hero { min-height: 0; }
    .hero .wrap { padding-top: 72px; padding-bottom: 72px; }
    .banner .wrap { padding-top: 56px; padding-bottom: 56px; }
    /* The company name shrinks (and may wrap) so the menu button stays beside it. */
    .brand { flex: 1 1 0; min-width: 0; }
    .brand svg { width: 34px; height: 34px; }
    .brand-name { font-size: 18px; }
    .brand-sub { font-size: 10px; letter-spacing: 2px; }
    /* Without JavaScript the menu simply stays open; with it, the button shows and hides it. */
    .js .nav-toggle { display: inline-flex; }
    .js .site-nav { display: none; }
    .site-nav {
        width: 100%; flex-direction: column; align-items: stretch; gap: 0;
        padding: 8px 0 4px; border-top: 1px solid var(--border-navy);
    }
    .js .site-nav.is-open { display: flex; }
    .site-nav a { min-height: 48px; }
    .site-nav a.nav-call { justify-content: center; margin-top: 8px; }
    .card, .contact-form { padding: 24px; }
    .card-lg { padding: 28px; }
    .split { gap: 32px; }
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { transition: none !important; animation: none !important; }
}