/* ============================================================================
   Localist — Candidate C stylesheet
   A transcription of docs/design-source/localist-kerub-mock.html ("Yellow
   Ground"): its inline styles moved into classes, values unchanged — radii,
   sizes, colours, spacing, shell width and breakpoint are the mock's.
   Owner decision (localist-database#214): design to the Kerub mock as
   outputted; the Brand Guide is visual direction only where the mock is
   silent. That is limited here to the focus ring and reduced-motion.
   ========================================================================= */

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body { margin: 0; background: #F3AC3A; color: #093F56; font-family: "Be Vietnam Pro", system-ui, sans-serif; font-size: 16px; line-height: 1.55; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
.wrap { width: min(100% - 3rem, 1560px); margin-inline: auto; }
h1, h2, h3 { margin: 0; text-wrap: balance; }
p { margin: 0; }
img, svg { display: block; max-width: 100%; }
.navlink { font-size: 16px; font-weight: 500; color: #093F56; text-decoration: none; }
.navlink:hover { opacity: .7; }
.eyebrow { font-size: 12px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: #093F56; opacity: .62; }
h2.sec { font-size: 40px; font-weight: 700; letter-spacing: -0.035em; line-height: 1.08; color: #093F56; }

/* Not in the mock: the guide's focus ring (§10) and a skip link, both invisible until used */
:where(a, button, [tabindex]):focus-visible { outline: 2px solid #0C84B1; outline-offset: 3px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: absolute; left: -9999px; top: 12px; background: #FFFFFF; color: #093F56; padding: 10px 16px; border-radius: 999px; z-index: 200; }
.skip:focus { left: 12px; }

/* ── Header ────────────────────────────────────────────────────────────── */
.header { background: #EFE6D6; border-bottom: 1px solid #E0D4BE; }
.headrow { display: flex; align-items: center; gap: 22px; padding: 18px 0; flex-wrap: wrap; }
.logo { width: 152px; flex: none; }
.nav-links { display: flex; gap: 32px; margin-inline: auto; }
.lang { display: flex; border: 1.5px solid #D6C7AB; border-radius: 999px; overflow: hidden; font-size: 13px; font-weight: 700; flex: none; }
.lang span, .lang a { padding: 7px 14px; text-decoration: none; color: #7B929D; }
.lang [aria-current="true"] { background: #093F56; color: #FFFFFF; }
.btn-find { background: #E52A79; color: #FFFFFF; font-weight: 600; font-size: 15px; padding: 14px 26px; border-radius: 999px; text-decoration: none; white-space: nowrap; }
.btn-list { background: transparent; color: #093F56; border: 1.5px solid #093F56; font-weight: 600; font-size: 15px; padding: 12.5px 24px; border-radius: 999px; text-decoration: none; white-space: nowrap; }

/* ── Hero ──────────────────────────────────────────────────────────────── */
.herowrap { margin-top: 30px; }
.hero { position: relative; border-radius: 34px; overflow: hidden; min-height: 560px; display: flex; align-items: center; justify-content: center; }
/* The mock's photograph is not cleared for reuse: the image slot is a placeholder field under the mock's own gradient */
.hero .ph { position: absolute; inset: 0; width: 100%; height: 100%; background: #FBE7C6; background-image: repeating-linear-gradient(-45deg, transparent 0 14px, rgba(243,172,57,.22) 14px 28px); }
.hero .scrim { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(9,63,86,0.42) 0%, rgba(9,63,86,0.58) 55%, rgba(9,63,86,0.72) 100%); }
.hero-inner { position: relative; display: flex; flex-direction: column; align-items: center; gap: 22px; padding: 88px 32px 104px; }
.hero-h1 { font-size: 78px; line-height: 1.04; letter-spacing: -0.04em; font-weight: 700; text-align: center; color: #FFFFFF; max-width: 16ch; }
.hero-p { font-size: 18px; line-height: 1.5; text-align: center; color: #FFFFFF; opacity: 0.92; max-width: 52ch; }
.btn-hero { background: #E52A79; color: #FFFFFF; font-weight: 700; font-size: 17px; padding: 18px 44px; border-radius: 999px; text-decoration: none; margin-top: 6px; }
.ph-label { position: absolute; left: 0; right: 0; top: 0; z-index: 1; display: flex; align-items: center; gap: 8px; font-size: 12px; line-height: 1.5; padding: 6px 16px; color: #FFFFFF; background: rgba(9,63,86,0.72); }
.ph-label svg { width: 14px; height: 14px; }

/* ── Search bar ────────────────────────────────────────────────────────── */
.searchbar { display: grid; grid-template-columns: 1fr 1fr 1fr 1.5fr auto; gap: 8px; align-items: center; background: #FFFFFF; border-radius: 999px; box-shadow: 0 22px 50px -26px rgba(9,63,86,0.6); padding: 12px 12px 12px 34px; margin: -46px auto 0; position: relative; z-index: 2; width: min(100%, 1180px); }
.sfield { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding-right: 18px; border-right: 1px solid #EFE7DA; }
.sfield span { font-size: 16px; color: #093F56; font-weight: 500; }
.sfield svg { width: 14px; height: 14px; }
.shint { font-size: 16px; color: #7B929D; padding-left: 6px; }
.sgo { width: 58px; height: 58px; border-radius: 50%; background: #093F56; display: flex; align-items: center; justify-content: center; justify-self: end; }
.sgo svg { width: 21px; height: 21px; }
/* Not in the mock: the truthfulness note for a static candidate */
.note { margin-top: 14px; font-size: 13px; line-height: 1.5; color: #093F56; opacity: .85; width: min(100%, 1180px); margin-inline: auto; }

/* ── Homes ─────────────────────────────────────────────────────────────── */
.homes { padding: 70px 0 20px; display: flex; flex-direction: column; gap: 30px; }
.homes-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 14px; }
.sort { font-size: 15px; color: #093F56; opacity: .7; }
.g3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 26px; }
.card { display: flex; flex-direction: column; background: #FFFFFF; border-radius: 22px; overflow: hidden; }
.media { position: relative; }
.media .ph { width: 100%; aspect-ratio: 16 / 11; display: block; background: #FBE7C6; background-image: repeating-linear-gradient(-45deg, transparent 0 9px, rgba(243,172,57,.22) 9px 18px); }
.media .ph-label { top: auto; bottom: 0; font-size: 11px; padding: 5px 16px; }
.badge { position: absolute; left: 16px; top: 16px; display: inline-flex; align-items: center; gap: 6px; background: #FFFFFF; color: #093F56; font-size: 12px; font-weight: 700; padding: 7px 13px; border-radius: 999px; }
.badge svg { width: 13px; height: 13px; }
.cbody { display: flex; flex-direction: column; gap: 9px; padding: 18px 20px 20px; flex: 1; }
.loc { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: #43616F; }
.loc svg { width: 15px; height: 15px; }
.trow { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.title { font-size: 21px; font-weight: 600; letter-spacing: -0.02em; color: #093F56; }
.offers { font-size: 13px; font-weight: 600; color: #0B84B1; white-space: nowrap; }
.facts { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; padding-top: 2px; }
.facts .f { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: #43616F; }
.facts .f svg { width: 17px; height: 17px; }
.facts .sep { width: 1px; height: 14px; background: #E4DACA; }
.unknown { font-size: 12px; padding: 3px 9px; border: 1px dashed #C9D6DC; border-radius: 4px; color: #7B929D; }
.prow { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-top: auto; padding-top: 12px; border-top: 1px solid #EFE7DA; }
.price { font-size: 19px; font-weight: 800; letter-spacing: -0.02em; color: #093F56; }
.price .unit { font-size: 12px; font-weight: 500; color: #7B929D; }
.posted { font-size: 12px; color: #7B929D; }

/* ── What Localist does ────────────────────────────────────────────────── */
.band { background: #093F56; margin-top: 88px; }
.band .wrap { padding: 84px 0 88px; display: flex; flex-direction: column; gap: 18px; }
.band h2.sec { max-width: 18ch; color: #FFFFFF; }
.band .lede { font-size: 19px; line-height: 1.6; color: #A9C4D0; max-width: 70ch; }
.panel { background: #FFFFFF; border-radius: 26px; padding: 34px 34px 30px; margin-top: 22px; }
.panel svg { width: 100%; height: auto; display: block; }

/* ── Neighbourhoods ────────────────────────────────────────────────────── */
.hoods { padding: 84px 0 20px; display: flex; flex-direction: column; gap: 20px; }
.hoods h2.sec { max-width: 26ch; }
.hoods .lede { font-size: 19px; line-height: 1.55; color: #093F56; opacity: .85; max-width: 64ch; }
.g4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; margin-top: 14px; }
.hood { display: flex; flex-direction: column; gap: 10px; background: #FFFFFF; border-radius: 20px; padding: 24px; }
.hood h3 { font-size: 21px; font-weight: 600; letter-spacing: -0.02em; color: #093F56; }
.hood p { font-size: 15px; line-height: 1.55; color: #43616F; }
.tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: auto; padding-top: 6px; }
.tag { font-size: 12px; padding: 4px 10px; border-radius: 999px; background: #FBF7F0; border: 1px solid #EFE7DA; color: #43616F; }
.tag.flood { background: #FBEFD8; border-color: #F3AC3A; color: #8A5A12; }

/* ── Footer ────────────────────────────────────────────────────────────── */
.foot { background: #093F56; margin-top: 88px; }
.foot .wrap { padding: 56px 0 52px; display: flex; flex-wrap: wrap; gap: 32px 60px; justify-content: space-between; }
.footabout { display: flex; flex-direction: column; gap: 16px; max-width: 46ch; }
.footabout .logo { width: 150px; }
.footabout .p1 { font-size: 15px; line-height: 1.6; color: #A9C4D0; }
.footabout .p2 { font-size: 14px; color: #7FA3B4; }
.footcols { display: flex; gap: 56px; flex-wrap: wrap; }
.footcol { display: flex; flex-direction: column; gap: 11px; }
.footcol h3 { font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #7FA3B4; }
.footcol a { font-size: 15px; color: #EAF2F5; text-decoration: none; }

/* ── The mock's one breakpoint ─────────────────────────────────────────── */
@media (max-width: 960px) {
  .nav-links { display: none !important; }
  .hero-h1 { font-size: 42px !important; }
  .searchbar { grid-template-columns: 1fr !important; border-radius: 24px !important; padding: 16px !important; }
  .sfield { border-right: 0; padding-right: 0; padding: 12px 0; border-bottom: 1px solid #EFE7DA; }
  .sgo { justify-self: start; }
  .g3 { grid-template-columns: 1fr !important; }
  .g4 { grid-template-columns: 1fr 1fr !important; }
  h2.sec { font-size: 30px; }
}