/*
 * Rhonda Everitt Real Estate. Mobile first, no framework.
 * Palette: deep navy, warm ivory, white and soft charcoal.
 * Type: Bitter (slab, like the city's painted brick signs) for headings,
 * Public Sans for reading. Both self-hosted, OFL.
 */
@font-face { font-family: "Bitter"; src: url("/assets/fonts/bitter-var.woff2") format("woff2"); font-weight: 500 800; font-display: swap; }
@font-face { font-family: "Public Sans"; src: url("/assets/fonts/public-sans-var.woff2") format("woff2"); font-weight: 400 700; font-display: swap; }
@font-face { font-family: "Public Sans"; src: url("/assets/fonts/public-sans-italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
/* Her signature font (2026-10-24): Bestermind, the script her name is written in on her YouTube banner
   and brochures. File from UAS Marketing, her office's marketing firm, which owns the license. Only her
   name as a signature (header, sign-offs) and a few display words (class "accent-font" or var(--accent)),
   never body text, menus, buttons or forms. */
@font-face { font-family: "Bestermind"; src: url("/assets/fonts/bestermind.woff2") format("woff2"), url("/assets/fonts/bestermind.ttf") format("truetype"); font-display: swap; }

:root {
    --river: #17364d;
    --river-2: #17364d;
    --bridge: #17364d;
    /* Navy, warm ivory, white and soft charcoal. Shared names preserve existing components. */
    --brick: #466b83;
    --brick-dark: #466b83;
    --sandstone: #f7f4ee;
    --sand-soft: #f7f4ee;
    --paper: #f7f4ee;
    --card: #ffffff;
    --ink: #42525a;
    --muted: #42525a;
    --line: #d5d8d7;
    --radius: 6px;
    --head: "Bitter", Georgia, serif;
    --text: "Public Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
    --accent: "Bestermind", var(--head);
    --bar: 64px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 1rem; }
body { margin: 0; font: 400 1.125rem/1.6 var(--text); color: var(--ink); background: var(--paper); padding-bottom: var(--bar); }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--bridge); text-underline-offset: .15em; }
a:hover { color: var(--river); }
:focus-visible { outline: 3px solid var(--brick); outline-offset: 2px; }
h1, h2, h3 { font-family: var(--head); color: var(--river); line-height: 1.15; margin: 0 0 .6em; }
h1 { font-size: clamp(2rem, 7.5vw, 3.4rem); font-weight: 700; letter-spacing: -.01em; }
h2 { font-size: clamp(1.6rem, 5vw, 2.3rem); font-weight: 700; }
h3 { font-size: 1.3rem; font-weight: 600; }
.accent-font { font-family: var(--accent); font-weight: 400; letter-spacing: 0; }
p { margin: 0 0 1em; }

.wrap { width: 100%; max-width: 72rem; margin: 0 auto; padding: 0 1.15rem; }
.skip { position: absolute; left: -999px; top: 0; background: var(--river); color: #fff; padding: .6rem 1rem; z-index: 50; }
.skip:focus { left: 0; }

/* ---- buttons ---- */
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: .75rem 1.3rem; border-radius: var(--radius); font-weight: 700; font-size: 1.05rem; text-decoration: none; line-height: 1.2; transition: background-color .15s, color .15s, box-shadow .15s; }
.btn:hover { box-shadow: 0 2px 6px rgba(23, 54, 77, .22); }
.btn--brick { background: var(--brick-dark); color: #fff; }
.btn--brick:hover { background: var(--river); color: #fff; }
.btn--line { border: 2px solid var(--river); color: var(--river); }
.btn--line:hover { background: var(--river); color: #fff; }
.btn--paper { background: var(--paper); color: var(--river); }
.btn--paper:hover { background: #fff; color: var(--river); }

/* ---- masthead ---- */
.masthead { background: var(--card); border-bottom: 1px solid var(--line); }
.masthead__in { display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding-top: .55rem; padding-bottom: .55rem; }
/* Her name | Comey's logo. Ohio R.C. 4735.16(B)(3) requires the brokerage in at
   least equal prominence, so the logo is never smaller than her name. */
.lockup { flex: none; display: flex; align-items: center; gap: .55rem; text-decoration: none; }
.lockup__me { display: flex; flex-direction: column; }
/* Her name as her signature, like her banner. The script is thin, so at this size it reads lighter than
   the logo beside it; keep it so (equal prominence). */
.lockup__name { font-family: var(--accent); font-weight: 400; font-size: 1.8rem; color: var(--river); line-height: 1.2; padding-top: .12em; white-space: nowrap; }
.lockup__title { font-size: .7rem; color: var(--muted); letter-spacing: .02em; margin-top: .15rem; }
.lockup__rule { width: 1px; align-self: stretch; background: var(--line); }
.lockup__logo { display: block; height: 24px; width: auto; }
.topnav, .masthead__call { display: none; }
/* The smallest phones (320 px) keep her name and the logo on one row. */
@media (max-width: 339px) {
    .lockup { gap: .35rem; }
    .lockup__name { font-size: 1.4rem; }
    .lockup__logo { height: 17px; }
}

/* ---- hero ---- */
.hero { padding: 1.6rem 0 0; }
.kicker { font-size: .85rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--brick-dark); margin-bottom: .7rem; }
.hello { display: flex; gap: 1rem; align-items: flex-start; margin: 0 0 1.3rem; }
.hello__face { width: 112px; height: 112px; object-fit: cover; border-radius: var(--radius); border: 3px solid var(--card); box-shadow: 0 0 0 1px var(--line); flex: none; }
.hello p { margin: 0; }
/* Home hero (Steve, 2026-10-16): an accent welcome at headline size, the headline a step down, her name larger. */
.welcome { font-family: var(--head); font-weight: 800; color: var(--brick); font-size: clamp(1.75rem, 7.5vw, 3.4rem); line-height: 1.08; letter-spacing: -.01em; margin: 0 0 .35em; overflow-wrap: break-word; }
/* Beside the video the column is narrower: "NewCinciHome.com" is about 9.6em wide, so it must fit 5/11 of the page. */
@media (min-width: 960px) { .welcome { font-size: min(3rem, 4.2vw); } }
.welcome + h1 { font-size: clamp(1.45rem, 5.2vw, 2.3rem); margin-bottom: .8em; }
.hello__who { font-family: var(--head); font-weight: 800; color: var(--river); font-size: clamp(1.35rem, 5vw, 1.7rem); line-height: 1.1; margin-bottom: .35rem !important; }
.hello__who span { display: block; font-family: var(--text); font-weight: 600; font-size: .95rem; color: var(--muted); margin-top: .2rem; letter-spacing: .01em; }
.hero__actions { display: grid; gap: .7rem; margin-bottom: 1.6rem; }
.hero__photo { margin: 0 -1.15rem; position: relative; }
.hero__photo img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; object-position: 68% 50%; }
/* Photo credit: a full-width strip along the bottom, text centered. */
.hero__photo figcaption { position: absolute; left: 0; right: 0; bottom: 0; background: color-mix(in srgb, var(--river) 78%, transparent); color: #fff; font-size: .8rem; line-height: 1.35; text-align: center; padding: .35rem .8rem; }
.hero__photo video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .9s ease; }
.hero__photo.is-playing video { opacity: 1; }
.hero__toggle { display: none; position: absolute; right: .6rem; top: .6rem; min-height: 40px; padding: .4rem .8rem; border: 0; border-radius: var(--radius); background: color-mix(in srgb, var(--river) 82%, transparent); color: #fff; font: 600 .85rem var(--text); cursor: pointer; }
.hero__photo.is-playing .hero__toggle { display: block; }
.cap-video, .is-playing .cap-still { display: none; }
.is-playing .cap-video { display: inline; }

/* ---- your move: a numbered list, not a card grid ---- */
.moves { padding: 3rem 0 2.5rem; }
.section-lede { color: var(--muted); max-width: 38rem; font-size: 1.1rem; }
.movelist { list-style: none; counter-reset: move; margin: 1.6rem 0 0; padding: 0; border-top: 2px solid var(--river); }
.movelist li { counter-increment: move; position: relative; padding: 1.3rem 0 1.4rem 3.2rem; border-bottom: 1px solid var(--line); }
.movelist li::before { content: counter(move, decimal-leading-zero); position: absolute; left: 0; top: 1.25rem; font-family: var(--head); font-weight: 800; font-size: 1.5rem; color: var(--sandstone); }
.movelist h3 { margin-bottom: .35rem; }
.movelist p { margin-bottom: .55rem; max-width: 44rem; }
.textme { font-weight: 700; color: var(--brick-dark); }
.textme::after { content: " \2192"; }
.move-links { display: flex; flex-wrap: wrap; gap: .3rem 1.4rem; margin: 0; }
.readmore { font-weight: 700; }

/* ---- reviews ---- */
.praise { padding: 2.6rem 0 2.4rem; background: var(--card); border-top: 1px solid var(--line); }
/* Her Google reviews (Comp Edge widget, drawn in its own shadow DOM; it reads these variables).
   Space is held while it loads so the page does not jump; the fallback links show only if it
   reports "empty", and a home page section marked data-reviews-hide disappears instead. */
.gr { --ces-reviews-accent: var(--brick); --ces-reviews-font: var(--text); --ces-reviews-radius: var(--radius);
    --ces-reviews-card-bg: var(--paper); --ces-reviews-text: var(--ink); --ces-reviews-muted: var(--muted); margin-bottom: 1.2rem; }
.gr:not([data-ces-reviews]) { min-height: 22rem; }
.gr__fallback { display: none; margin: 0; font-size: 1.1rem; }
.gr[data-ces-reviews=empty] .gr__fallback, .gr__fallback--noscript { display: block; }
[data-reviews-hide]:has(.gr[data-ces-reviews=empty]) { display: none; }
/* On phones the home section is centered (Steve, 2026-10-15): our heading and button here; the
   widget centers its own rating line and buttons from --ces-reviews-align (gbp PR #12). */
@media (max-width: 959px) {
    .praise h2, .praise .latest__all { text-align: center; }
    .praise .gr { --ces-reviews-align: center; }
}
.rcard__stars { color: #b7791f; letter-spacing: .08em; }
.rcard__stars span { color: var(--line); }
.rcards { display: grid; gap: 1.1rem; }
.rcard { margin: 0; background: var(--paper); border: 1px solid var(--line); border-left: 4px solid var(--sandstone); border-radius: var(--radius); padding: 1rem 1.1rem; }
.rcard__stars { margin: 0 0 .4rem; font-size: 1.1rem; }
.rcard__text { margin: 0 0 .6rem; }
.rcard__text p { margin: 0; }
.rcard__who { font-weight: 700; color: var(--river); font-size: .98rem; }
.rcard__reply { margin: .7rem 0 0; padding-top: .6rem; border-top: 1px solid var(--line); color: var(--muted); font-size: .98rem; }
.reviews-all { display: grid; gap: 1.1rem; padding-top: 2rem; padding-bottom: 3rem; }
.reviews-write { margin: .6rem 0; }

/* ---- questions ---- */
.questions { background: var(--river); color: #eef3f2; padding: 3rem 0; }
.questions h2 { color: #fff; }
.questions .section-lede { color: #c9d6d6; }
.areas-label { font-weight: 700; color: var(--sandstone); font-size: .85rem; letter-spacing: .08em; text-transform: uppercase; margin: 1.5rem 0 .6rem; }
.areas { list-style: none; padding: 0; margin: 0 0 2rem; display: flex; flex-wrap: wrap; gap: .45rem; }
.areas li { border: 1px solid rgba(200, 180, 140, .55); color: #fff; border-radius: 999px; font-size: .95rem; }
.areas li { padding: .25rem .7rem; }
.areas li:has(a) { padding: 0; }
.areas a { display: block; padding: .25rem .7rem; color: inherit; text-decoration-color: rgba(200, 180, 140, .7); }
.areas-all { color: #fff; font-weight: 700; }
.areas-all:hover, .areas-all:focus-visible { color: var(--sandstone); text-decoration-color: var(--sandstone); }
/* links on dark blue stay readable on hover (the page-wide hover is dark blue) */
.questions a:hover, .textcta a:not(.btn):hover, .foot a:hover { color: var(--sandstone); }
.areas a:hover { background: rgba(255, 255, 255, .14); color: #fff; border-radius: 999px; text-decoration-color: #fff; }
.faq details { border-top: 1px solid rgba(255, 255, 255, .18); }
.faq details:last-child { border-bottom: 1px solid rgba(255, 255, 255, .18); }
.faq summary { cursor: pointer; list-style: none; padding: 1.05rem 2.2rem 1.05rem 0; position: relative; font-family: var(--head); font-weight: 600; font-size: 1.2rem; color: #fff; line-height: 1.3; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: .2rem; top: .85rem; font-size: 1.6rem; color: var(--sandstone); font-family: var(--text); }
.faq details[open] summary::after { content: "\2212"; }
.faq details p { color: #dfe8e7; padding-bottom: .4rem; }

/* ---- latest posts on home ---- */
.latest { padding: 3rem 0 1rem; }
.latest .pcards { margin-top: 1.4rem; }
.latest__all { margin: 1.6rem 0 0; }

/* ---- videos ---- */
.watch { padding: 3rem 0 1rem; }
.watch--area { background: var(--sand-soft); padding: 2.6rem 0 2.2rem; border-top: 1px solid var(--line); }
.vcards { display: grid; gap: 1.2rem; margin-top: 1.4rem; }
.vcard { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.vcard__play { display: block; position: relative; }
.vcard__play img, .vcard iframe { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border: 0; display: block; }
.vcard__play::after { content: ""; position: absolute; left: 50%; top: 50%; width: 64px; height: 64px; margin: -32px 0 0 -32px; border-radius: 50%; background: var(--brick) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M8 5v14l11-7z' fill='%23fff'/%3E%3C/svg%3E") center / 32px no-repeat; }
.vcard__len { position: absolute; right: .5rem; bottom: .5rem; background: rgba(13, 37, 45, .85); color: #fff; font-size: .8rem; font-weight: 700; padding: .1rem .45rem; border-radius: 4px; }
.vcard__body { padding: 1rem 1.1rem 1.2rem; }
.vcard__label { font-size: .8rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--brick-dark); margin-bottom: .35rem; }
.vcard__title { font-size: 1.2rem; margin-bottom: .4rem; }
.vcard__title a { color: var(--river); text-decoration: none; }
.vcard__title a:hover { color: var(--brick-dark); }
.vcard__sum { color: var(--muted); font-size: 1rem; margin-bottom: .4rem; }
.vcard__date { font-size: .85rem; color: var(--muted); margin: 0; }

/* ---- about ---- */
.about { padding: 3rem 0; }
.about__links { display: flex; flex-wrap: wrap; gap: .4rem 1.5rem; }
.about__links a { font-weight: 700; }
.about__photo { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; object-position: 50% 22%; border-radius: var(--radius); margin-bottom: 1.5rem; }
/* Home search form (templates/partials/home-search.php). Selects fill their cell and
   never grow past it: iOS Safari otherwise widens a select to its longest option. */
.homesearch { background: var(--river); color: #dfe9e9; padding: 2rem 0 2.2rem; }
.homesearch h2 { color: #fff; margin-bottom: .9rem; }
.hs__grid { display: grid; grid-template-columns: 1fr; gap: .8rem; }
.hs__field { display: flex; flex-direction: column; gap: .3rem; min-width: 0; font-weight: 700; font-size: .95rem; }
.hs select, .hs input[type=text] { width: 100%; min-width: 0; max-width: 100%; min-height: 48px; padding: .55rem .7rem; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; color: var(--ink); font: 400 1.05rem var(--text); text-overflow: ellipsis; }
.hs__types { border: 0; padding: 0; margin: 0; min-width: 0; }
.hs__types legend { font-weight: 700; font-size: .95rem; margin-bottom: .3rem; padding: 0; }
.hs__checks { display: flex; flex-wrap: wrap; gap: 0 1.2rem; }
.hs__checks label { display: inline-flex; align-items: center; gap: .4rem; min-height: 44px; font-size: 1.05rem; white-space: nowrap; }
.hs__checks input { width: 22px; height: 22px; margin: 0; accent-color: var(--brick-dark); }
.hs__go { display: flex; align-items: flex-end; }
.hs__go .btn { width: 100%; border: 0; font-family: var(--text); cursor: pointer; }
.hs__note { font-size: .9rem; margin: .9rem 0 0; color: var(--muted); }
.homesearch .hs__note { color: #c9d6d6; }
/* Homes by school district (templates/search-schools.php). */
.schools__jump { display: flex; flex-wrap: wrap; gap: .5rem 1rem; margin-bottom: 1.5rem; }
.schools__county { margin-bottom: 2rem; }
.schools__list { list-style: none; padding: 0; margin: 0; display: grid; gap: 1rem; }
.schools__item { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 1rem 1.1rem; }
.schools__item h3 { margin-bottom: .3rem; font-size: 1.2rem; }
.schools__item p { margin: 0 0 .7rem; }
.schools__go { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1.2rem; margin: 0 !important; }
.search-page__schools { margin: -1rem 0 2rem; }
/* School district: its own tinted field, so it reads as a second way to search. */
.hs__field--sd { background: #f3e8d4; border-radius: var(--radius); padding: .55rem .65rem .65rem; }
.hs__field--sd > span { color: var(--brick-dark); }
.homesearch .hs__field--sd { background: rgba(200, 180, 140, .2); }
.homesearch .hs__field--sd > span { color: var(--sandstone); }
.homesearch .hs__note a { color: #fff; }
.search-page .hs { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.2rem; margin-bottom: 2rem; }
.glance__homes { margin: 1.2rem 0 0; display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; }
.glance__homes small { color: var(--muted); font-size: .9rem; }
/* Tablets: two columns; area, zip, kind of home and the button take a full row. */
@media (min-width: 640px) {
    .hs__grid { grid-template-columns: 1fr 1fr; }
    .hs__field--area, .hs__field--sd, .hs__field--zip, .hs__types, .hs__go { grid-column: 1 / -1; }
    .hs__go .btn { width: auto; min-width: 14rem; }
}
/* Home band on desktop, two rows: where and price; beds, baths, kind of home and the button. */
@media (min-width: 960px) {
    .hs--band .hs__grid { grid-template-columns: repeat(12, 1fr); gap: .9rem 1rem; align-items: end; }
    .hs--band .hs__field--area, .hs--band .hs__field--sd { grid-column: span 4; }
    /* The tint reaches past the cell so the select lines up with its neighbours. */
    .hs--band .hs__field--sd { margin: -.55rem -.65rem -.65rem; }
    .hs--band .hs__field--min, .hs--band .hs__field--max { grid-column: span 2; }
    .hs--band .hs__field--beds, .hs--band .hs__field--baths { grid-column: span 2; }
    .hs--band .hs__types { grid-column: span 5; }
    .hs--band .hs__go { grid-column: span 3; }
    .hs--band .hs__go .btn { width: 100%; min-width: 0; }
    .hs--band .hs__checks { flex-wrap: nowrap; gap: 0 1rem; }
}
/* Narrower desktops: more room for the four kinds of home, a tighter button. */
@media (min-width: 960px) and (max-width: 1239px) {
    .hs--band .hs__types { grid-column: span 6; }
    .hs--band .hs__go { grid-column: span 2; }
    .hs--band .hs__checks { gap: 0 .75rem; }
    .hs--band .hs__checks label { font-size: 1rem; gap: .3rem; }
    .hs--band .hs__go .btn { padding-left: .5rem; padding-right: .5rem; font-size: 1rem; white-space: nowrap; }
}
.search-note { background: var(--brick-dark); color: #fff; border-radius: var(--radius); padding: 1.5rem; margin-top: 1rem; }
.search-note h3 { color: #fff; }
.search-note p { color: #fbeee9; }

/* ---- closing ---- */
.closing { background: var(--sand-soft); padding: 2.6rem 0; border-top: 1px solid var(--line); }
.closing h2 { margin-bottom: .3rem; }
.closing p { font-size: 1.2rem; margin: 0; }
.closing a { font-weight: 700; color: var(--brick-dark); white-space: nowrap; }

/* ---- footer ---- */
.foot { background: var(--river); color: #c9d6d6; padding: 2.5rem 0 2rem; font-size: .95rem; }
.foot a { color: #fff; }
.foot__grid { display: grid; gap: 1.8rem; }
.foot__name { font-family: var(--head); font-weight: 700; color: #fff; font-size: 1.2rem; margin-bottom: .3rem; }
.foot__brokerage { margin-top: .3rem; }
.foot__logo { display: block; width: 240px; max-width: 100%; height: auto; margin: .5rem 0 .8rem; }
.foot__brokerage strong { color: #fff; }
.foot__label { font-weight: 700; color: var(--sandstone); font-size: .8rem; letter-spacing: .08em; text-transform: uppercase; }
.foot__links ul { list-style: none; padding: 0; margin: 0 0 1.2rem; display: flex; flex-wrap: wrap; gap: .4rem 1.2rem; }
.foot__links a { display: inline-block; padding: .3rem 0; }
.foot__legal { font-size: .85rem; color: #a9bcbc; }
.foot__policies a { white-space: nowrap; }
/* MLS disclaimers (as on her Comey site). The logos are dark on white, so they sit on a white tile. */
.foot__mls { margin-top: 2rem; padding-top: 1.5rem; border-top: 1px solid rgba(255, 255, 255, .12); font-size: .85rem; color: #a9bcbc; }
.foot__mls h2 { font-family: var(--text); line-height: 1.3; margin: 0 0 .8rem; }
.foot__mls-grid { display: grid; gap: 1.2rem; }
.foot__mls img { display: block; margin-bottom: .6rem; background: #fff; padding: 4px 6px; border-radius: 4px; box-sizing: content-box; }
@media (min-width: 960px) { .foot__mls-grid { grid-template-columns: 1fr 1fr; gap: 2.5rem; } }
.eho { display: flex; align-items: center; gap: .5rem; color: #fff; font-weight: 700; font-size: .95rem; }
.eho svg { width: 30px; height: 30px; }

/* ---- sticky phone actions (phones only) ---- */
.actionbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; height: var(--bar); display: grid; grid-template-columns: repeat(5, 1fr); background: var(--river); border-top: 1px solid var(--river-2); padding-bottom: env(safe-area-inset-bottom); }
.actionbar > a, .menu summary { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .15rem; color: #fff; text-decoration: none; font-weight: 700; font-size: .9rem; }
.actionbar > a + a, .menu { border-left: 1px solid rgba(255, 255, 255, .14); }
.actionbar > a:first-child { background: var(--brick-dark); }
.actionbar svg { width: 22px; height: 22px; fill: currentColor; }
.actionbar > a[aria-current="page"] { box-shadow: inset 0 -4px 0 var(--sandstone); }

/* ---- phone menu: a <details> in the bottom bar, opens as a sheet above it ---- */
.menu { display: block; }
.menu summary { height: 100%; list-style: none; cursor: pointer; color: #fff; font-weight: 700; font-size: .9rem; }
.menu summary::-webkit-details-marker { display: none; }
.menu__close, .menu[open] .menu__open { display: none; }
.menu[open] .menu__close { display: inline; }
.menu[open] summary { background: var(--river-2); }
/* Tapping anywhere outside the sheet lands on the summary's backdrop and closes it. */
.menu[open] summary::before { content: ""; position: fixed; inset: 0 0 var(--bar); background: rgba(13, 37, 45, .55); z-index: 1; }
.menu__panel { position: fixed; left: 0; right: 0; bottom: var(--bar); z-index: 2; max-height: calc(100dvh - var(--bar) - 2.5rem); overflow-y: auto; overscroll-behavior: contain; background: var(--card); border-radius: 14px 14px 0 0; padding: 1.1rem 1.15rem 1.4rem; box-shadow: 0 -8px 30px rgba(0, 0, 0, .25); }
.menu__list, .menu__sub, .menu__social { list-style: none; margin: 0; padding: 0; }
.menu__list > li { border-bottom: 1px solid var(--line); }
.menu__list a { display: block; padding: .7rem 0; color: var(--river); font-family: var(--head); font-weight: 700; font-size: 1.2rem; text-decoration: none; }
.menu__list a[aria-current="page"] { color: var(--brick-dark); }
.menu__sub { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1rem; padding-bottom: .6rem; }
.menu__sub a { padding: .45rem 0; font-family: var(--text); font-weight: 600; font-size: 1rem; color: var(--ink); }
.menu__label { margin: 1.1rem 0 .3rem; font-size: .8rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.menu__social { display: flex; flex-wrap: wrap; gap: .2rem 1.2rem; }
.menu__social a { display: inline-block; padding: .4rem 0; font-weight: 600; }

/* ---- guide and about pages ---- */
.guide__head { background: var(--card); border-bottom: 1px solid var(--line); padding: 1.2rem 0 1.6rem; }
.crumbs ol { list-style: none; margin: 0 0 1rem; padding: 0; display: flex; flex-wrap: wrap; gap: .3rem; font-size: .9rem; color: var(--muted); }
.crumbs li + li::before { content: "/"; margin-right: .3rem; color: var(--sandstone); }
.guide__lede { font-size: 1.2rem; color: var(--ink); }
.byline { display: flex; gap: .75rem; align-items: center; font-size: .95rem; color: var(--muted); margin: 1.2rem 0 0; }
.byline img { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; flex: none; }
.guide__body { padding-top: 1.8rem; padding-bottom: 3rem; }
.toc { border-left: 4px solid var(--sandstone); padding: .3rem 0 .3rem 1rem; margin-bottom: 2.2rem; }
.toc__label { font-weight: 700; font-size: .85rem; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin-bottom: .4rem; }
.toc ol { margin: 0; padding-left: 1.2rem; }
.toc li { margin: .25rem 0; }
.qa { margin-bottom: 2.4rem; }
.qa h2 { font-size: clamp(1.4rem, 4.5vw, 1.8rem); }
.qa ul { padding-left: 1.3rem; }
.qa li { margin: .3rem 0; }
.textcta { background: var(--river); color: #eef3f2; border-radius: var(--radius); padding: 1.6rem 1.4rem; margin-top: 1rem; }
.textcta h2 { color: #fff; font-size: 1.5rem; }
.textcta__actions { display: flex; flex-wrap: wrap; gap: .7rem; }
.btn--ghost-light { border: 2px solid rgba(255, 255, 255, .7); color: #fff; }
.btn--ghost-light:hover { background: #fff; color: var(--river); }
.about-page__summary { font-size: 1.2rem; }
.about-page__photo { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; object-position: 50% 22%; border-radius: var(--radius); margin-top: 1.4rem; }
.honors { list-style: none; margin: 0 0 1.4rem; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem; }
.honors li { background: var(--sand-soft); color: var(--river); padding: .35rem .85rem; border-radius: 999px; font-size: .98rem; }
.badge { display: inline-block; background: var(--sand-soft); color: var(--river); font-weight: 700; padding: .3rem .8rem; border-radius: 999px; }
.facts { list-style: none; padding: 0; margin: 0 0 2.4rem; display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.facts li { background: var(--card); padding: 1rem 1.1rem; }
.facts b { display: block; font-family: var(--head); font-size: 1.35rem; color: var(--river); }
.facts span { color: var(--muted); font-size: .98rem; }
.how dt { font-weight: 700; color: var(--river); margin-top: 1rem; }
.how dd { margin: .2rem 0 0; }
.areas--light li { border-color: var(--line); color: var(--ink); background: var(--card); }
.topnav a[aria-current="page"] { color: var(--brick-dark); text-decoration: underline; text-underline-offset: .3em; }

/* ---- neighborhood guides ---- */
.glance { margin-bottom: 2.2rem; }
.glance h2 { font-size: clamp(1.4rem, 4.5vw, 1.8rem); }
.glance dl { margin: 0; display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.glance dl > div { background: var(--card); padding: .85rem 1rem; }
.glance dt { font-size: .85rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.glance dd { margin: .15rem 0 0; font-family: var(--head); font-size: 1.2rem; font-weight: 600; color: var(--river); line-height: 1.3; }
.glance small { display: block; margin-top: .25rem; font-family: var(--text); font-size: .85rem; font-weight: 400; color: var(--muted); }
.glance__note { font-size: .95rem; color: var(--muted); margin-top: .8rem; }
.others { padding-top: 2.4rem; padding-bottom: 3rem; }
.others .areas a { color: var(--river); text-decoration: none; font-weight: 600; }
.hub { padding-top: 1.6rem; padding-bottom: 3rem; }
.hub__group { font-size: 1.35rem; margin: 1.6rem 0 .8rem; padding-bottom: .4rem; border-bottom: 2px solid var(--river); }
.hub__list { list-style: none; margin: 0 0 1rem; padding: 0; display: grid; gap: .9rem; }
.hub__card { display: block; height: 100%; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 1rem 1.1rem; color: var(--ink); text-decoration: none; }
.hub__card:hover .hub__name { color: var(--brick-dark); }
.hub__name { display: block; font-family: var(--head); font-weight: 700; font-size: 1.3rem; color: var(--river); }
.hub__county { display: block; font-size: .85rem; color: var(--muted); margin-bottom: .35rem; }
.hub__line { display: block; font-size: 1rem; }
.hub .textcta { margin-top: 2rem; }

/* ---- blog ---- */
.blog { padding-top: 2rem; padding-bottom: 3rem; }
.blog__empty { font-size: 1.15rem; }
.pcards { display: grid; gap: 1.2rem; }
.pcard__link { display: block; height: 100%; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; color: var(--ink); text-decoration: none; }
.pcard__link:hover .pcard__title { color: var(--brick-dark); }
.pcard__img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.pcard__body { padding: 1rem 1.1rem 1.2rem; }
.pcard__date { font-size: .85rem; color: var(--muted); margin-bottom: .3rem; }
.pcard__title { font-size: 1.2rem; margin-bottom: .4rem; }
.pcard__excerpt { margin: 0; color: var(--muted); font-size: 1rem; }
.pager { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .8rem; margin-top: 2rem; }
.pager__where { color: var(--muted); }
.post__cover { padding-top: 1.4rem; }
.post__cover img { width: 100%; border-radius: var(--radius); }
.prose h2 { font-size: clamp(1.4rem, 4.5vw, 1.8rem); margin-top: 2rem; }
.prose h3 { margin-top: 1.6rem; }
.prose img { border-radius: var(--radius); margin: 1.2rem 0; }
.prose ul, .prose ol { padding-left: 1.3rem; }
.prose li { margin: .3rem 0; }
.prose blockquote { margin: 1.5rem 0; padding: .3rem 0 .3rem 1.1rem; border-left: 4px solid var(--sandstone); font-size: 1.15rem; color: var(--river); }
.prose table { width: 100%; border-collapse: collapse; margin: 1.2rem 0; font-size: 1rem; }
.prose th, .prose td { border-bottom: 1px solid var(--line); padding: .5rem; text-align: left; }
.video-embed { margin: 1.4rem 0; position: relative; }
.video-embed a { display: block; position: relative; }
.video-embed img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; margin: 0; }
.video-embed a::after { content: ""; position: absolute; left: 50%; top: 50%; width: 72px; height: 72px; margin: -36px 0 0 -36px; border-radius: 50%; background: var(--brick) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M8 5v14l11-7z' fill='%23fff'/%3E%3C/svg%3E") center / 36px no-repeat; }
.prose iframe { width: 100%; aspect-ratio: 16 / 9; border: 0; border-radius: var(--radius); }

/* ---- portal preview banner ---- */
.preview-bar { background: #fbf0d9; color: #6b4b10; padding: .6rem 1rem; text-align: center; font-weight: 600; }

/* ---- plain pages (404 and friends) ---- */
.plain { padding: 3rem 1.15rem; }
.narrow { max-width: 44rem; }

/* ================= larger screens ================= */
@media (min-width: 640px) {
    .pcards, .vcards, .hub__list { grid-template-columns: 1fr 1fr; }
    .glance dl { grid-template-columns: 1fr 1fr; }
    .facts { grid-template-columns: 1fr 1fr; }
    .hero__actions { display: flex; flex-wrap: wrap; }
    .hero__actions .btn { padding-left: 1rem; padding-right: 1rem; } /* both buttons on one row from about 1150 px */
    .hello__face { width: 148px; height: 148px; }
    .foot__grid { grid-template-columns: 1fr 1fr; }
    .foot__legal { grid-column: 1 / -1; }
}

@media (min-width: 960px) {
    .pcards { grid-template-columns: repeat(3, 1fr); }
    .about-page__grid { display: grid; grid-template-columns: 6fr 5fr; gap: 3rem; align-items: center; }
    .about-page__photo { margin-top: 0; }
    .guide__head { padding: 2rem 0 2.4rem; }
    body { padding-bottom: 0; font-size: 1.15rem; }
    .actionbar { display: none; }
    .hub__list { grid-template-columns: repeat(3, 1fr); }
    .rcards { grid-template-columns: repeat(3, 1fr); }
    .topnav { display: flex; gap: 1.5rem; }
    .topnav a { color: var(--ink); text-decoration: none; font-weight: 600; font-size: 1rem; }
    .topnav a:hover { color: var(--brick-dark); }
    .masthead__call { display: inline-block; text-decoration: none; color: var(--river); font-size: .95rem; border: 2px solid var(--river); border-radius: var(--radius); padding: .45rem .9rem; }
    .masthead__call:hover { background: var(--river); color: #fff; }
    /* Each menu item and the call button stay on one line; narrower desktops
       drop the call words, then the button (the hero's Call button is right below). */
    .topnav a, .masthead__call { white-space: nowrap; }
    .masthead__in { padding-top: .8rem; padding-bottom: .8rem; }
    .lockup { gap: .85rem; }
    .lockup__name { font-size: 2.2rem; }
    .lockup__title { font-size: .78rem; }
    .lockup__logo { height: 34px; }

    .hero { padding: 2.5rem 0; }
    .hero__grid { display: grid; grid-template-columns: 5fr 6fr; gap: 3rem; align-items: center; }
    /* The video sits inside the page grid, framed like her other photos, so
       wide screens stay balanced (it used to run off the right edge). */
    .hero__photo { margin: 0; border-radius: 12px; overflow: hidden; box-shadow: 0 10px 30px color-mix(in srgb, var(--river) 18%, transparent); }
    /* 4:3, close to the 16:9 video, so it is barely cropped (4:5 showed only its middle). */
    .hero__photo img { aspect-ratio: 4 / 3; }

    .movelist { display: grid; grid-template-columns: 1fr 1fr; column-gap: 3rem; }
    .movelist li:last-child { grid-column: 1 / -1; }

    .questions__grid { display: grid; grid-template-columns: 4fr 6fr; gap: 4rem; }
    .about__grid { display: grid; grid-template-columns: 7fr 4fr; gap: 4rem; align-items: start; }
    .search-note { margin-top: 0; }
    .foot__grid { grid-template-columns: 1.1fr .8fr .8fr 1.6fr; }
    .foot__legal { grid-column: auto; }
}

/* ---- lead forms (templates/partials/lead-form.php) ---- */
.leadform form { display: grid; gap: .35rem; }
.leadform label { font-weight: 700; color: var(--river); margin-top: .55rem; }
.leadform input, .leadform textarea { width: 100%; font: inherit; font-size: 1.1rem; padding: .75rem .85rem; color: var(--ink); background: #fff; border: 1px solid #a99c86; border-radius: var(--radius); }
.leadform input:focus, .leadform textarea:focus { outline: 3px solid var(--bridge); outline-offset: 1px; border-color: var(--bridge); }
.leadform textarea { min-height: 7rem; resize: vertical; }
.leadform .btn { border: 0; cursor: pointer; margin-top: .4rem; justify-self: start; font-family: inherit; }
.leadform .btn:disabled { opacity: .6; cursor: wait; }
.leadform__hint, .leadform__note { margin: 0; font-size: .95rem; color: var(--muted); }
.leadform__status { margin: .2rem 0 0; min-height: 1.2em; font-weight: 700; color: var(--brick-dark); }
.leadform__status:empty { min-height: 0; }
.consent { display: flex !important; gap: .6rem; align-items: flex-start; font-weight: 700; margin-top: .7rem; cursor: pointer; }
.consent input { width: 1.3rem !important; height: 1.3rem; margin: .15rem 0 0; flex: none; accent-color: var(--bridge); padding: 0 !important; }
.consent__fine { margin: 0; font-size: .85rem; line-height: 1.45; color: var(--muted); }
.leadform--dark .consent__fine { color: #cfdcda; }
.leadform--dark .consent__fine a { color: #fff; }
.leadform--dark label { color: #fff; }
.leadform--dark input, .leadform--dark textarea { border-color: transparent; }
.leadform--dark .leadform__hint, .leadform--dark .leadform__note { color: #cfdcda; }
.leadform--dark .leadform__status { color: #ffd9cf; }
/* ---- booking card (templates/partials/booking-card.php) ---- */
.book { background: #fff; border: 1px solid var(--line); border-radius: calc(var(--radius) * 2); padding: 1.4rem 1.2rem; margin: 0 0 2.2rem; box-shadow: 0 1px 0 rgba(0, 0, 0, .03); scroll-margin-top: 5rem; }
.book h2 { margin: 0 0 .3rem; }
.book__lede { margin: 0 0 1rem; color: var(--muted); }
.book__none { margin: 0; font-weight: 700; }
.book__form { display: grid; gap: 1.2rem; }
.book fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.book legend { font-weight: 700; color: var(--river); font-size: 1.1rem; padding: 0; margin-bottom: .5rem; }
.book__day { border-top: 1px solid var(--line); }
.book__day:last-of-type { border-bottom: 1px solid var(--line); }
.book__day summary { cursor: pointer; padding: .75rem .2rem; display: flex; justify-content: space-between; gap: 1rem; list-style: none; }
.book__day summary::-webkit-details-marker { display: none; }
.book__day summary::after { content: "+"; font-weight: 700; color: var(--bridge); }
.book__day[open] summary::after { content: "\2212"; }
.book__day summary span { margin-left: auto; color: var(--muted); font-size: .95rem; }
.book__times { display: grid; grid-template-columns: repeat(auto-fill, minmax(6.4rem, 1fr)); gap: .5rem; padding: 0 0 .9rem; }
.book__time { position: relative; }
.book__time input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.book__time span { display: block; text-align: center; padding: .65rem .3rem; border: 2px solid var(--bridge); border-radius: var(--radius); color: var(--bridge); font-weight: 700; font-variant-numeric: tabular-nums; }
.book__time input:checked + span { background: var(--bridge); color: #fff; }
.book__time input:focus-visible + span { outline: 3px solid var(--sandstone); outline-offset: 2px; }
.book__who { display: grid; gap: .35rem; }
.book__who label { font-weight: 700; color: var(--river); margin-top: .45rem; }
.book__who input, .book__who textarea { width: 100%; font: inherit; font-size: 1.1rem; padding: .75rem .85rem; color: var(--ink); background: #fff; border: 1px solid #a99c86; border-radius: var(--radius); }
.book__who input:focus, .book__who textarea:focus { outline: 3px solid var(--bridge); outline-offset: 1px; border-color: var(--bridge); }
.book__who .btn { border: 0; cursor: pointer; margin-top: .5rem; justify-self: start; font-family: inherit; }
.book__opt { font-weight: 400; color: var(--muted); }
.book__more > summary { cursor: pointer; padding: .8rem .2rem; font-weight: 700; color: var(--bridge); }
.book__more[open] > summary { border-bottom: 1px solid var(--line); }
/* the contact details appear once a time is picked (browsers without :has show them all along) */
.book__form:not(:has(input[name="slot"]:checked)) .book__who { display: none; }
.textcta__form { margin-top: 1.6rem; padding-top: 1.3rem; border-top: 1px solid rgba(255, 255, 255, .25); }
.textcta__form h3 { color: #fff; font-size: 1.2rem; margin-bottom: .2rem; }

/* ---- contact and home value pages ---- */
.ways { margin-bottom: 2.4rem; }
.ways h2, .writeme h2 { font-size: clamp(1.4rem, 4.5vw, 1.8rem); }
.ways__actions { display: flex; flex-wrap: wrap; gap: .7rem; margin-bottom: 1.4rem; }
.ways__list { margin: 0; display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.ways__list > div { background: var(--card); padding: .85rem 1rem; }
.ways__list dt { font-size: .85rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.ways__list dd { margin: .15rem 0 0; font-size: 1.15rem; }
.writeme { background: var(--card); border: 1px solid var(--line); border-top: 5px solid var(--brick); border-radius: var(--radius); padding: 1.3rem 1.2rem 1.5rem; margin-bottom: 2.4rem; }
.writeme__alt { margin: 1.1rem 0 0; font-size: 1rem; }
.contact__more { font-size: 1.1rem; }

/* ---- thank-you pages (templates/thank-you.php) ---- */
.thanks h2 { font-size: clamp(1.4rem, 4.5vw, 1.8rem); }
.nextsteps { counter-reset: step; list-style: none; margin: 0 0 2rem; padding: 0; display: grid; gap: .8rem; }
.nextsteps li { counter-increment: step; position: relative; padding: .9rem 1rem .9rem 3.4rem; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); }
.nextsteps li::before { content: counter(step); position: absolute; left: .9rem; top: .8rem; width: 1.8rem; height: 1.8rem; border-radius: 50%; background: var(--river); color: #fff; font-family: var(--head); font-weight: 700; display: grid; place-items: center; }
.signoff { display: flex; gap: 1rem; align-items: center; margin: 0 0 2.4rem; }
.signoff img { width: 72px; height: 72px; border-radius: 50%; object-fit: cover; flex: none; }
.signoff p { margin: 0; }
.thanks__book { font-size: 1.1rem; margin: -1rem 0 2.4rem; }
.thanks__book a { font-weight: 700; color: var(--brick-dark); }
.meanwhile { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
.meanwhile a { display: block; padding: .9rem 1rem; background: var(--card); border: 1px solid var(--line); border-left: 4px solid var(--brick); border-radius: var(--radius); font-weight: 700; color: var(--river); text-decoration: none; }
.meanwhile a:hover { border-left-color: var(--river); color: var(--brick-dark); }

/* ---- neighborhoods hub: every area at a glance ---- */
.glance-wrap { overflow-x: auto; margin-bottom: .6rem; border: 1px solid var(--line); border-radius: var(--radius); }
.glance-table { width: 100%; border-collapse: collapse; background: var(--card); font-size: 1rem; }
.glance-table caption { caption-side: bottom; text-align: left; padding: .6rem .9rem; font-size: .9rem; color: var(--muted); background: var(--paper); }
.glance-table th, .glance-table td { padding: .65rem .9rem; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.glance-table thead th { font-size: .8rem; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); background: var(--paper); }
.glance-table tbody th { font-weight: 700; }
.glance-table tbody th a { color: var(--river); text-decoration: none; font-family: var(--head); font-size: 1.08rem; }
.glance-table tbody th a:hover { color: var(--brick-dark); }
.glance-table small { display: block; font-weight: 400; font-size: .82rem; color: var(--muted); }
.glance-table td { font-variant-numeric: tabular-nums; white-space: nowrap; }
.hub .glance__note { margin-bottom: 1.4rem; }

/* ---- shared helpers ---- */
.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; }
.muted { color: var(--muted); }

/* ---- compare two areas (templates/compare.php) ---- */
.picker { display: grid; gap: .8rem; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 1rem 1.1rem 1.2rem; margin: 0 0 1.6rem; }
.picker label { display: grid; gap: .3rem; font-weight: 700; color: var(--river); }
.picker select { font: inherit; font-size: 1.05rem; padding: .7rem .8rem; border: 1px solid #a99c86; border-radius: var(--radius); background: #fff; color: var(--ink); }
.picker .btn { border: 0; cursor: pointer; font-family: inherit; justify-self: start; }
.cmp-table { width: 100%; border-collapse: collapse; background: var(--card); border: 1px solid var(--line); font-size: 1rem; margin-bottom: .8rem; }
.cmp-table th, .cmp-table td { text-align: left; vertical-align: top; padding: .7rem .8rem; border-bottom: 1px solid var(--line); }
.cmp-table thead th { background: var(--river); color: #fff; font-family: var(--head); font-size: 1.1rem; }
.cmp-table thead a { color: #fff; }
.cmp-table tbody th { font-size: .82rem; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); }
.cmp-table small { display: block; margin-top: .25rem; font-size: .82rem; color: var(--muted); }
.cmp-guides { font-size: 1rem; margin-bottom: 2.2rem; }
.cmp-list { list-style: none; padding: 0; margin: 0 0 1.4rem; display: flex; flex-wrap: wrap; gap: .5rem; }
.cmp-list a { display: block; padding: .45rem .9rem; border: 1px solid var(--line); border-radius: 999px; background: var(--card); color: var(--river); font-weight: 600; text-decoration: none; }
.cmp-list a:hover { border-color: var(--brick-dark); color: var(--brick-dark); }
.cmp-cards { list-style: none; padding: 0; margin: 0 0 1.4rem; display: grid; gap: .8rem; }
.others .cmp-h { font-size: 1.35rem; margin-top: 1.8rem; }
/* Phones: each fact becomes a label over two side-by-side values. */
@media (max-width: 639px) {
    .cmp-table thead tr, .cmp-table tbody tr { display: grid; grid-template-columns: 1fr 1fr; }
    .cmp-table thead th:first-child { display: none; }
    .cmp-table tbody th { grid-column: 1 / -1; border-bottom: 0; padding-bottom: 0; }
    .cmp-table td + td { border-left: 1px solid var(--line); }
}

/* ---- videos page (templates/videos.php) ---- */
.chips { display: flex; flex-wrap: wrap; gap: .45rem; margin-top: 1.2rem; }
.chips a { padding: .45rem .9rem; border-radius: 999px; background: var(--sand-soft); color: var(--river); font-weight: 600; text-decoration: none; font-size: .98rem; }
.chips a:hover { background: var(--river); color: #fff; }
.videos-page { padding-top: 1.2rem; padding-bottom: 3rem; }
.vgroup { scroll-margin-top: 1rem; margin-bottom: 1rem; }
.vgroup__intro { color: var(--muted); margin: -.3rem 0 0; }
.videos-more { margin: 2rem 0; }
@media (min-width: 960px) {
    .videos-page .vcards { grid-template-columns: repeat(3, 1fr); }
    .picker { grid-template-columns: 1fr 1fr auto; align-items: end; }
    .cmp-cards { grid-template-columns: 1fr 1fr; }
}

/* ---- share this page (templates/partials/share.php) ---- */
.share { margin: 1.1rem 0 0; display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .8rem; }
.share__label { margin: 0; font-weight: 700; color: var(--river); width: 100%; }
.share__native { display: inline-flex; align-items: center; gap: .45rem; min-height: 44px; padding: .5rem 1rem; border: 2px solid var(--river); border-radius: 999px; background: transparent; color: var(--river); font: 700 1rem var(--text); cursor: pointer; }
.share__native:hover { background: var(--river); color: #fff; }
.share__native svg { width: 20px; height: 20px; fill: currentColor; }
.share__native[hidden] { display: none; }
.share__list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .45rem; }
.share__list[hidden] { display: none; }
.share__list a, .share__list button { display: inline-flex; align-items: center; min-height: 40px; padding: .35rem .85rem; border: 1px solid var(--line); border-radius: 999px; background: var(--card); color: var(--river); font: 600 .95rem var(--text); text-decoration: none; cursor: pointer; }
.share__list a:hover, .share__list button:hover { border-color: var(--river); }
.share__list button[hidden] { display: none; }
.share--end { margin: 2rem 0 1rem; padding-top: 1.2rem; border-top: 1px solid var(--line); }

/* ---- Share badge on the breadcrumb line (templates/partials/share-badge.php) ---- */
.crumbrow { display: flex; align-items: flex-start; justify-content: space-between; gap: .8rem; margin-bottom: 1rem; }
.crumbrow .crumbs { flex: 1; min-width: 0; }
.crumbrow .crumbs ol { margin-bottom: 0; }
.sharebadge { position: relative; flex: none; margin-top: -.2rem; }
.sharebadge summary { list-style: none; display: inline-flex; align-items: center; gap: .3rem; min-height: 34px; padding: .25rem .7rem; border: 1px solid var(--line); border-radius: 999px; background: var(--card); color: var(--river); font: 600 .88rem var(--text); cursor: pointer; }
.sharebadge summary::-webkit-details-marker { display: none; }
.sharebadge summary:hover, .sharebadge[open] summary { border-color: var(--river); background: var(--river); color: #fff; }
.sharebadge svg { width: 16px; height: 16px; fill: currentColor; }
.sharebadge__menu { position: absolute; right: 0; top: calc(100% + .35rem); z-index: 5; list-style: none; margin: 0; padding: .35rem; min-width: 11rem; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: 0 8px 24px color-mix(in srgb, var(--river) 16%, transparent); }
.sharebadge__menu a, .sharebadge__menu button { display: block; width: 100%; padding: .55rem .7rem; border: 0; border-radius: 4px; background: none; color: var(--river); font: 600 .95rem var(--text); text-align: left; text-decoration: none; cursor: pointer; }
.sharebadge__menu a:hover, .sharebadge__menu button:hover { background: var(--paper); }
/* Phones: the current page's crumb repeats the heading just below it, so
   drop it and keep the trail and the badge on one line. */
@media (max-width: 639px) { .crumbs li:last-child:not(:first-child) { display: none; } }

/* Measured 2026-10-16 with the logo lockup and six menu items: the page is
   72rem at most, so the header button shows just the number (the hero's
   "Call or text" button is right below), and below 1160 px it gives way. */
@media (min-width: 960px) {
    .masthead__call-label { display: none; }
    .topnav { gap: 1.25rem; }
}
@media (min-width: 960px) and (max-width: 1159px) {
    .masthead__call { display: none; }
    .topnav { gap: .9rem; }
}

/* "Back to your portal" bar (site.js), shown only to someone arriving from the portal. */
.portal-back { background: #fbf0d9; color: #6b4b10; padding: .6rem 1rem; text-align: center; font-weight: 600; font-size: 1rem; }
.portal-back a { color: var(--bridge); margin-left: .25rem; }

/* Gentle motion (site.js): only what site.js tags, only when motion is allowed. */
/* Things sliding in from the side start past the screen edge: never let that
   make a phone page scroll sideways. clip (not hidden) keeps sticky parts working. */
html.motion main { overflow-x: clip; }
.motion [data-reveal] { opacity: 0; transition: opacity .7s ease, transform .75s cubic-bezier(.2, .7, .2, 1); }
.motion [data-reveal="left"] { transform: translateX(-40px); }
.motion [data-reveal="right"] { transform: translateX(40px); }
.motion [data-reveal="up"] { transform: translateY(26px); }
.motion [data-reveal="fade"] { transform: none; }
.motion [data-reveal].is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .motion [data-reveal] { opacity: 1 !important; transform: none !important; transition: none !important; } }
/* Cards she adds in the editor. */
aside.card { display: grid; gap: .5rem; background: var(--card); border: 1px solid var(--line); border-top: 4px solid var(--brick); border-radius: 10px; padding: 1.1rem 1.25rem; margin: 1.6rem 0; box-shadow: 0 6px 18px color-mix(in srgb, var(--river) 6%, transparent); }
aside.card img { width: 100%; height: auto; border-radius: 6px; margin: 0 0 .3rem; }
aside.card h3 { margin: 0; }
aside.card p { margin: 0; }

/* Branded pop-ups (site.js): "Sending your message...", and what went wrong. */
.rm { border: 0; padding: 0; margin: auto; width: min(92vw, 28rem); background: transparent; color: var(--ink); }
.rm::backdrop { background: color-mix(in srgb, var(--river) 55%, transparent); }
.rm__box { background: var(--card); border-radius: var(--radius); border-top: 6px solid var(--brick); padding: 1.4rem 1.4rem 1.2rem; box-shadow: 0 18px 50px color-mix(in srgb, var(--river) 35%, transparent); }
.rm__title { margin: 0 0 .5rem; font-size: 1.3rem; }
.rm__text { margin: 0; line-height: 1.5; }
.rm__btns { display: flex; justify-content: flex-end; margin-top: 1.2rem; }
.rm__btns .btn { border: 0; font-family: var(--text); cursor: pointer; min-width: 7rem; }
.rm__spin { display: none; }
.rm--busy .rm__box { display: flex; align-items: center; gap: 1rem; border-top-color: var(--bridge); }
.rm--busy .rm__text { font-weight: 600; color: var(--river); }
.rm--busy .rm__btns { display: none; }
.rm--busy .rm__spin { display: block; flex: none; width: 2.2rem; height: 2.2rem; border-radius: 50%; border: 4px solid var(--line); border-top-color: var(--brick-dark); animation: rm-spin .8s linear infinite; }
@keyframes rm-spin { to { transform: rotate(360deg); } }
@media (max-width: 480px) { .rm__btns .btn { width: 100%; } }
@media (prefers-reduced-motion: reduce) { .rm--busy .rm__spin { animation-duration: 2.4s; } }

/* "What's your move?" (templates/your-move.php): one question per screen,
   big tap targets. Without JavaScript every question shows, one under another. */
.mv { background: var(--card); border: 1px solid var(--line); border-top: 5px solid var(--brick); border-radius: var(--radius); padding: 1.2rem 1.1rem 1.4rem; }
.mv__step { border: 0; margin: 0; padding: 0; min-width: 0; display: grid; gap: .45rem; }
.mv__step + .mv__step { margin-top: 2rem; padding-top: 1.6rem; border-top: 1px solid var(--line); }
.mv--js .mv__step + .mv__step { margin-top: 0; padding-top: 0; border-top: 0; }
.mv__step[hidden] { display: none; }
.mv__step:focus { outline: none; }
.mv legend { font-family: var(--head); font-weight: 700; color: var(--river); font-size: clamp(1.45rem, 5vw, 1.9rem); line-height: 1.2; padding: 0; margin-bottom: .6rem; }
.mv__if { margin: -.4rem 0 .2rem; font-size: .9rem; font-weight: 700; color: var(--brick-dark); }
.mv--js .mv__if { display: none; }
.mv__label { margin: .7rem 0 0; font-weight: 700; color: var(--river); }
.mv__hint { margin: 0; font-size: .95rem; color: var(--muted); }
.mv__opts { display: flex; flex-wrap: wrap; gap: .5rem; }
.mv__opts--big { display: grid; gap: .6rem; }
.mv__opts--row .mv__opt { flex: 1 0 3.4rem; }
.mv__opt { position: relative; display: block; margin: 0 !important; cursor: pointer; }
.mv__opt input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.mv__opt span { display: flex; align-items: center; justify-content: center; min-height: 52px; padding: .6rem 1rem; border: 2px solid #a99c86; border-radius: var(--radius); background: #fff; font-weight: 600; color: var(--ink); text-align: center; line-height: 1.25; }
.mv__opts--big .mv__opt span { justify-content: flex-start; text-align: left; min-height: 58px; font-size: 1.12rem; padding-left: 1.1rem; }
.mv__opt:hover span { border-color: var(--bridge); }
.mv__opt input:focus-visible + span { outline: 3px solid var(--brick); outline-offset: 2px; }
.mv__opt input:checked + span { border-color: var(--river); background: var(--river); color: #fff; }
.mv__progress { display: grid; gap: .35rem; margin-bottom: 1.1rem; font-size: .9rem; font-weight: 700; color: var(--muted); }
.mv__progress[hidden] { display: none; }
.mv__bar { display: block; height: 6px; border-radius: 3px; background: var(--sand-soft); overflow: hidden; }
.mv__bar span { display: block; height: 100%; width: 0; background: var(--brick); transition: width .25s ease; }
.mv__nav { display: none; align-items: center; gap: .6rem; margin-top: 1.1rem; }
.mv--js .mv__nav, .mv__nav--send { display: flex; flex-wrap: wrap; }
.mv:not(.mv--js) .mv__back { display: none; }
.mv__nav .btn { margin: 0 0 0 auto !important; border: 0; min-width: 9rem; }
.mv__back, .mv__skip { font: inherit; font-weight: 700; color: var(--bridge); background: none; border: 0; padding: .7rem .4rem; cursor: pointer; text-decoration: underline; text-underline-offset: .15em; }
.mv__alt { margin: 1.2rem 0 0; font-size: 1rem; }
.moves__start { margin: 1.6rem 0 0; display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1rem; }
.moves__start p { margin: 0; font-weight: 600; }
@media (min-width: 640px) {
    .mv { padding: 1.8rem 1.8rem 2rem; }
    .mv__opts--big { grid-template-columns: 1fr 1fr; }
}
@media (prefers-reduced-motion: reduce) { .mv__bar span { transition: none; } }

/* Full-width homepage bridge footage, with an immediate still-image fallback. */
.bridge-hero { position: relative; isolation: isolate; display: grid; align-items: center; min-height: 36rem; min-height: min(54rem, calc(100svh - 5rem)); background: var(--river); color: #fff; overflow: hidden; }
.bridge-hero__media, .bridge-hero__media::after { position: absolute; inset: 0; }
.bridge-hero__media { z-index: -1; }
.bridge-hero__media picture { position: absolute; inset: 0; }
.bridge-hero__media img, .bridge-hero__media video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.bridge-hero__media video { opacity: 0; }
.bridge-hero.is-playing video { opacity: 1; }
/* Lighter than before (.52, Rhonda 2026-10-24) so the bridge shows; the soft text shadow keeps the words readable on the pale sky. */
.bridge-hero__media::after { content: ""; background: rgba(0, 0, 0, .4); }
.bridge-hero__copy h1, .bridge-hero__copy > p { text-shadow: 0 1px 3px rgba(0, 0, 0, .55), 0 0 18px rgba(0, 0, 0, .35); }
.bridge-hero__copy { padding-top: 5rem; padding-bottom: 5rem; text-align: center; }
.bridge-hero h1 { color: #fff; font-size: clamp(2.5rem, 6vw, 5.25rem); font-weight: 500; line-height: 1.08; max-width: 13em; margin: 0 auto 1.25rem; text-wrap: balance; }
.bridge-hero__copy > p { max-width: 32rem; margin: 0 auto 2rem; font-size: clamp(1.05rem, 2vw, 1.35rem); }
.bridge-hero__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: .85rem; }
.bridge-hero__actions .btn { flex: 1 1 10rem; max-width: 12rem; padding: .95rem 1.3rem; white-space: nowrap; }
/* Same height as the outlined Let's Talk button when they stack. */
.bridge-hero__actions .btn:not(.bridge-hero__talk) { border: 2px solid transparent; }
@media (min-width: 640px) { .bridge-hero__actions .btn { flex: 0 0 auto; max-width: none; min-width: 11.5rem; padding: 1.05rem 2.1rem; } }
.bridge-hero__talk { border: 2px solid #fff; color: #fff; background: rgba(0,0,0,.15); }
.bridge-hero__talk:hover { background: #fff; color: var(--river); }
.bridge-hero :focus-visible { outline-color: #fff; outline-offset: 5px; }
.home-intro { padding: clamp(2.5rem, 6vw, 5rem) 0; background: var(--paper); }
.home-intro__grid { display: grid; gap: 1.75rem; max-width: 60rem; align-items: center; }
.home-intro__grid > img { width: 13rem; height: 13rem; object-fit: cover; border-radius: var(--radius); }
.home-intro__name, .home-intro__name span { font-family: var(--head); font-size: clamp(1.3rem, 3vw, 1.75rem); font-weight: 600; line-height: 1.3; color: var(--river); }
.home-intro__name span { display: block; margin-top: .3rem; }
.home-intro p { max-width: 42rem; }
/* Her signature under her own words (home intro, About), decorative: the name is already in the heading. */
.signature { font-family: var(--accent); font-weight: 400; font-size: clamp(2.3rem, 5vw, 3rem); line-height: 1.25; color: var(--river); margin: .1em 0 .5em !important; }
@media (min-width: 640px) { .home-intro__grid { grid-template-columns: 13rem 1fr; gap: 3rem; } }
@media (max-width: 639px) { .bridge-hero { min-height: calc(100svh - 8rem); } .bridge-hero__copy { padding-top: 3rem; padding-bottom: 3rem; } }
@media (prefers-reduced-motion: reduce) { .bridge-hero__media video { display: none; } }