/* community-page additions */
.wr-root .wr-signal{ display:block; margin:20px 0 14px; padding:13px 17px; background:var(--wr-peri-tint); border-left:4px solid var(--wr-navy); border-radius:8px; font-size:14px; line-height:1.55; color:var(--wr-ink); }
.wr-root .wr-signal b{ color:var(--wr-navy); font-weight:700; }
.wr-root .wr-asof{ font-size:12.5px; color:var(--wr-faint); margin:14px 0 4px; }
.wr-root .wr-reportlink{ display:inline-flex; align-items:center; gap:6px; font-weight:600; color:var(--wr-navy); text-decoration:none; }
.wr-root .wr-reportlink:hover{ text-decoration:underline; }
/* prose bullet list, matched to the kit (theme default <ul> is off-brand) */
/* The WP theme re-applies its own <li> marker, which showed up as a second, black
 bullet beside the periwinkle dot. list-style:none alone loses to the theme, so use
 the locked three-part kill from the design standard: !important + ::marker + the
 theme marker rule. The kit re-adds its own dot on .wr-list li::before below. */
.wr-root .wr-list{ list-style:none !important; margin:16px 0 6px; padding:0; }
.wr-root .wr-list li::marker{ content:"" !important; }
.wr-root .wr-list li{ list-style:none !important; }
.wr-root .wr-list li{ position:relative; padding-left:20px; margin:0 0 10px; font-size:14.5px; line-height:1.6; color:var(--wr-charcoal); }
.wr-root .wr-list li:last-child{ margin-bottom:0; }
/* The dot rides IN THE FLOW of the first line (hanging marker), not absolutely
 positioned. The theme puts padding:8px 0 on every li, which pushed the text down
 while an absolute top:8px dot stayed put, so the bullets sat 8px high. In flow the
 dot tracks the first line whatever vertical padding the theme adds. Measured against
 the live theme: -18/11 margins keep the old x-positions (dot at 2px, text at 20px)
 and vertical-align .14em centres it on the text, including on wrapping items. */
.wr-root .wr-list li::before{ content:""; display:inline-block; width:7px; height:7px; margin-left:-18px; margin-right:11px; vertical-align:.14em; border-radius:50%; background:var(--wr-peri); }
.wr-root .wr-list li b{ color:var(--wr-navy); font-weight:700 !important; }
/* Definition tooltips on the snapshot cards. The circled i is the affordance;
 native title= was invisible on touch, which is why this exists. The panel overlays
 its own card (never positioned outside it) so it can never be clipped by the grid
 or the band, at any width. */
.wr-root .wr-stat{ position:relative; }
/* The [whats_near] tool renders its own eyebrow, serif title and deck in navy.
 On the navy band that is navy on navy, so repaint them here. Deliberately NOT
 scoped under .wr-root: the shortcode opens a second, nested .wr-root of its own. */
/* The nested .wr-root the shortcode opens inherits the kit background:#fff,
 which paints white straight over the navy band. This is the fix; without it
 the white heading text below lands on a white box. */
/* Third-party floating widgets (the chat bubble) sit above the kit dialog at
 z-index 99999, so the popup was not really on top. Raise ours over them. */
.wr-root .wr-modal{ z-index:2147483000; }
.wr-band--navy .wr-root{ background:transparent !important; }
/* The [whats_near] shortcode opens a SECOND .wr-root inside the band, and our
 page rule .wr-root{width:100vw; margin-left:calc(50% - 50vw)} is not scoped to
 the outer one, so the nested root broke out to the full viewport and shifted
 left, running wider than every other band and clipping its own heading. The
 shortcode CSS is correct standalone; this is our full-bleed rule leaking into
 it. Reset the breakout on any nested root. */
.wr-root .wr-root{ width:auto !important; max-width:none !important; margin-left:0 !important; margin-right:0 !important; overflow-x:visible !important; }
.wr-band--navy .wnth .wr-eyebrow{ color:#fff !important; }
/* keep the signature pink dash on navy; it inherits to white otherwise */
.wr-band--navy .wnth .wr-eyebrow::before{ background:var(--wr-pink) !important; }
.wr-band--navy h2.wnth-title{ color:#fff !important; }
.wr-band--navy .wnth-deck{ color:rgba(255,255,255,.85) !important; }
/* sibling community photo cards: reuse the city pages .wr-ccard look, but the
 whole card is the link and there is no stats body. auto-fit so 3, 5 or 6
 siblings all lay out evenly instead of leaving a ragged last row. */
.wr-root .wr-cards--photos{ grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); margin-top:20px; text-align:left; }
.wr-root a.wr-ccard--photo{ text-decoration:none !important; color:inherit !important; }
.wr-root a.wr-ccard--photo .wr-ccard-name{ text-align:center; padding:11px 12px; flex:1; display:flex; align-items:center; justify-content:center; text-wrap:balance; }
/* Sign-off above the footer. Mike preferred it here over the header, where it
 would have been a fifth stacked line before any content. */
/* Download button sits BELOW the stat cards. In the old head row it wrapped on
 narrow screens and orphaned itself between the heading and the sub-line. */
.wr-root .wr-snapshot-dl{ display:flex; justify-content:flex-end; margin:14px 0 0; }
@media (max-width:640px){ .wr-root .wr-snapshot-dl{ justify-content:stretch; }
  .wr-root .wr-snapshot-dl .wr-download-action{ width:100%; justify-content:center; } }
/* Buyer brief: metrics left, buyer paths right, one tight row. The note spans
 underneath on its own rule. First build put everything in the top-left corner
 of a wide card and left ~60px of dead space below the buttons. */
/* FLEX-WRAP, not a two-column grid with a viewport breakpoint. The old version laid the metrics and the buttons side by side and only stacked them at a 980px VIEWPORT. The constraint is the CARD, and the card is narrower than the viewport whenever the theme adds a sidebar or the browser has devtools open, so the buttons kept their width, the metrics column shrank under them, and the median ran underneath the primary button. Wrapping is decided by the space that actually exists: when the two do not fit, the buttons drop to their own row. */
.wr-root .wr-brief{ margin:22px 0 0; padding:22px 26px 20px; border:1px solid var(--wr-line); border-radius:14px; background:var(--wr-white); display:flex; flex-wrap:wrap; align-items:center; gap:18px 34px; }
.wr-root .wr-brief-stats{ flex:1 1 380px; min-width:0; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); }
.wr-root .wr-brief-asof{ flex:1 1 100%; margin:0 0 2px !important; font-size:10.5px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:var(--wr-muted); }
.wr-root .wr-brief-stat{ padding:0 26px; border-left:1px solid var(--wr-line); }
.wr-root .wr-brief-stat:first-child{ padding-left:0; border-left:0; }
.wr-root .wr-brief-lbl{ margin:0 0 5px !important; font-size:10.5px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:var(--wr-muted); }
.wr-root .wr-brief-num{ margin:0 !important; font-family:var(--wr-serif); font-size:31px; font-weight:600; line-height:1; color:var(--wr-navy); letter-spacing:-.01em; }
.wr-root .wr-brief-actions{ margin:0 !important; display:flex; flex-wrap:wrap; gap:10px; flex:0 1 auto; }
.wr-root .wr-brief-note{ flex:1 1 100%; margin:0 !important; padding-top:16px; border-top:1px solid var(--wr-line); font-size:12.5px; line-height:1.55; color:var(--wr-muted); }
@media (max-width:560px){ .wr-root .wr-brief{ padding:20px; }
  .wr-root .wr-brief-stats{ grid-template-columns:1fr; gap:16px; }
  .wr-root .wr-brief-stat{ padding:0 0 14px; border-left:0; border-bottom:1px solid var(--wr-line); }
  .wr-root .wr-brief-stat:last-child{ padding-bottom:0; border-bottom:0; }
  .wr-root .wr-brief-actions{ display:grid; grid-template-columns:1fr; width:100%; }
  .wr-root .wr-brief-actions .wr-btn{ width:100%; text-align:center; justify-content:center; } }
.wr-root .wr-byline{ margin:30px 0 0; padding-top:20px; border-top:1px solid var(--wr-line); font-size:13px; line-height:1.6; color:var(--wr-muted); text-align:center; }
.wr-root .wr-byline a{ color:var(--wr-navy) !important; font-weight:700; text-decoration:none !important; }
.wr-root .wr-byline a:hover{ text-decoration:underline !important; }
.wr-root .wr-byline-sep{ color:var(--wr-muted); padding:0 4px; }
.wr-root .wr-fees{ margin-top:38px; padding-top:32px; border-top:1px solid var(--wr-line); }
.wr-root .wr-fee-table th[scope="row"]{ white-space:normal; color:var(--wr-navy); font-weight:700; }
/* the kit right-aligns table cells for numbers; the middle column here is prose */
.wr-root .wr-fee-table td:first-of-type{ text-align:left; }
.wr-root .wr-fee-table thead th:nth-child(2){ text-align:left; }
.wr-root .wr-fee-amt{ white-space:nowrap; font-weight:700; color:var(--wr-navy); }
.wr-root .wr-fee-total{ margin:18px 0 4px; padding:14px 18px; border-radius:10px; background:var(--wr-peri-tint); font-size:14.5px; line-height:1.6; color:var(--wr-ink); }
.wr-root .wr-fee-total b{ color:var(--wr-navy); }
.wr-root .wr-nowrap{ white-space:nowrap; }
.wr-root .wr-stat-i{ -webkit-appearance:none; appearance:none; border:0; background:none; padding:0; margin:0 0 0 6px; line-height:0; cursor:pointer; color:var(--wr-peri); vertical-align:-2px; border-radius:50%; transition:color .15s ease; }
.wr-root .wr-stat-i svg{ width:14px; height:14px; display:block; }
.wr-root .wr-stat-i:hover{ color:var(--wr-navy); }
.wr-root .wr-stat-i[aria-expanded="true"]{ color:var(--wr-navy); }
.wr-root .wr-stat-i:focus-visible{ outline:2px solid var(--wr-navy); outline-offset:3px; }
/* pointer-events:none is load-bearing: the panel overlays its own card, so without it the open panel sits on top of the i button and swallows the click that would close it (caught by the browser test, not by reading the CSS). Nothing in the panel is interactive, so letting clicks pass straight through is correct. */
.wr-root .wr-stat-tip{ position:absolute; inset:auto 6px 6px 6px; z-index:30; pointer-events:none; display:block; margin:0; padding:11px 13px; border-radius:11px; background:var(--wr-peri); color:var(--wr-navy); font-size:12.5px; line-height:1.5; font-weight:500; text-align:left; overflow:auto; max-height:calc(100% - 12px); box-shadow:0 6px 18px rgba(14,42,71,.16); }
.wr-root .wr-stat-tip[hidden]{ display:none; }
@media (prefers-reduced-motion:no-preference){
  .wr-root .wr-stat-tip{ animation:wr-tip-in .12s ease-out; }
  @keyframes wr-tip-in{ from{ opacity:0; transform:translateY(3px); } to{ opacity:1; transform:none; } }
}
.wr-root .wr-about-img{ width:100%; height:auto; border-radius:14px; margin:22px 0 6px; }

/* ---- resident-led community layout (ported from the Lexington v2 build,
   2026-08-29). Six components the generator had never emitted: the navy hero
   brief, the people/location/dining band, the shared-amenities strip, the
   location shell around the What's Near tool, the at-purchase fee callout, and
   the inline link-button used where a sentence opens a modal. */

@media (max-width:760px){
  .wr-root .wr-fee-table tbody td:nth-of-type(6){ order:6; }
  .wr-root .wr-fee-table tbody td:nth-of-type(5){ order:7; }
}
.wr-root .wr-fx-home{ display:flex; flex-wrap:wrap; gap:8px 22px; margin:14px 0 0 !important; padding:12px 0 0; border-top:1px solid var(--wr-line); font-size:var(--wr-t-small); line-height:1.55; color:var(--wr-charcoal); }
.wr-root .wr-fx-home span{ display:inline-flex; gap:6px; }
.wr-root .wr-fx-home b{ color:var(--wr-navy); }
.wr-root .wr-brief--community{ background:linear-gradient(135deg,var(--wr-navy) 0%,#0E2A47 100%); border-color:transparent; }
.wr-root .wr-brief--community .wr-brief-asof{ color:rgba(255,255,255,.74); }
.wr-root .wr-brief--community .wr-brief-lbl{ color:rgba(255,255,255,.74); }
.wr-root .wr-brief--community .wr-brief-note{ color:rgba(255,255,255,.74); }
.wr-root .wr-brief--community .wr-brief-num{ color:#fff; }
.wr-root .wr-brief--community .wr-brief-num small{ font-family:var(--wr-sans); font-size:.38em; font-weight:700; letter-spacing:.02em; }
.wr-root .wr-brief--community .wr-brief-stat{ border-color:rgba(255,255,255,.18); }
.wr-root .wr-brief--community .wr-btn-primary{ background:#fff !important; border-color:#fff !important; color:var(--wr-navy) !important; }
.wr-root .wr-brief--community .wr-btn-primary:hover{ background:var(--wr-peri-tint) !important; border-color:var(--wr-peri-tint) !important; }
.wr-root .wr-brief--community .wr-btn-ghost{ background:transparent !important; border-color:rgba(255,255,255,.44) !important; color:#fff !important; }
.wr-root .wr-brief--community .wr-btn-ghost:hover{ background:rgba(255,255,255,.12) !important; border-color:rgba(255,255,255,.7) !important; }
.wr-root .wr-life-lead{ display:grid; grid-template-columns:minmax(0,1.15fr) minmax(280px,.65fr); gap:clamp(28px,5vw,72px); align-items:end; }
.wr-root .wr-life-lead .wr-section-sub{ margin-bottom:0; }
.wr-root .wr-life-note{ margin:0; padding:22px 24px; border:1px solid var(--wr-peri); border-radius:14px; background:var(--wr-peri-tint); }
.wr-root .wr-life-note-lbl{ margin:0 0 7px !important; font-size:var(--wr-t-micro); font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:var(--wr-navy); }
.wr-root .wr-life-note-copy{ margin:0 !important; font-family:var(--wr-serif); font-size:clamp(18px,2.3vw,23px); line-height:1.36; color:var(--wr-navy); }
.wr-root .wr-life-grid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; margin:32px 0 0; }
.wr-root .wr-life-card{ position:relative; min-width:0; padding:26px 24px 24px; border:1px solid var(--wr-line); border-radius:16px; background:var(--wr-white); box-shadow:0 10px 28px rgba(14,42,71,.055); overflow:hidden; }
.wr-root .wr-life-card::after{ content:""; position:absolute; inset:auto 0 0; height:4px; background:var(--wr-peri); }
.wr-root .wr-life-card:nth-child(2)::after{ background:var(--wr-pink); }
.wr-root .wr-life-card:nth-child(3)::after{ background:var(--wr-navy); }
.wr-root .wr-life-ico{ width:46px; height:46px; display:grid; place-items:center; margin-bottom:18px; border-radius:50%; background:var(--wr-peri-tint); color:var(--wr-navy); }
.wr-root .wr-life-ico svg{ width:24px; height:24px; }
.wr-root .wr-life-kicker{ margin:0 0 7px !important; font-size:var(--wr-t-micro); font-weight:800; letter-spacing:.09em; text-transform:uppercase; color:var(--wr-muted); }
.wr-root .wr-life-h{ margin:0 0 11px !important; font-family:var(--wr-serif); font-size:clamp(21px,2.4vw,27px); font-weight:600; line-height:1.18; color:var(--wr-navy); }
.wr-root .wr-life-p{ margin:0 !important; font-size:var(--wr-t-body); line-height:1.7; color:var(--wr-charcoal); }
.wr-root .wr-life-actions{ margin-top:26px; }
.wr-root .wr-location-shell{ border:1px solid rgba(182,199,231,.7); border-radius:20px; background:var(--wr-white); box-shadow:0 18px 44px rgba(14,42,71,.08); overflow:hidden; }
.wr-root .wr-location-map{ padding:clamp(18px,3vw,28px); }
.wr-root .wr-location-map .wr-whatsnear{ margin:0; }
.wr-root .wr-location-ask{ display:flex; align-items:center; justify-content:space-between; gap:24px; padding:19px clamp(22px,4vw,40px); border-top:1px solid var(--wr-line); background:#fff; }
.wr-root .wr-location-ask p{ margin:0 !important; font-size:var(--wr-t-small); line-height:1.55; color:var(--wr-charcoal); }
.wr-root .wr-location-ask b{ color:var(--wr-navy); }
.wr-root .wr-onetime{ display:grid; grid-template-columns:auto minmax(0,1fr); gap:16px; align-items:start; margin:22px 0 0; padding:18px 20px; border:1px solid var(--wr-line); border-left:4px solid var(--wr-pink); border-radius:0 12px 12px 0; background:var(--wr-peri-tint); }
.wr-root .wr-onetime-badge{ padding:7px 10px; border-radius:999px; background:var(--wr-navy); color:#fff; font-size:var(--wr-t-micro); font-weight:800; letter-spacing:.06em; text-transform:uppercase; white-space:nowrap; }
.wr-root .wr-onetime-copy{ margin:0 !important; font-size:var(--wr-t-small); line-height:1.65; color:var(--wr-charcoal); }
.wr-root .wr-onetime-copy b{ color:var(--wr-navy); }
.wr-root .wr-linkbtn{ -webkit-appearance:none; appearance:none; display:inline !important; vertical-align:baseline; border:0; background:none; padding:0; margin:0; font:inherit; line-height:inherit; text-align:left; white-space:normal; cursor:pointer; color:var(--wr-navy-soft); text-decoration:underline; text-underline-offset:2px; }
.wr-root .wr-linkbtn:hover{ color:var(--wr-navy); }
.wr-root .wr-linkbtn:focus-visible{ outline:2px solid var(--wr-navy); outline-offset:3px; border-radius:3px; }
.wr-root .wr-play-note .wr-linkbtn--light{ color:#fff; font-weight:700; text-decoration-color:rgba(255,255,255,.45); text-underline-offset:3px; }
.wr-root .wr-band--navy .wr-linkbtn--light{ color:#fff; font-weight:700; text-decoration-color:rgba(255,255,255,.45); text-underline-offset:3px; }
.wr-root .wr-play-note .wr-linkbtn--light:hover{ text-decoration-color:#fff; }
.wr-root .wr-band--navy .wr-linkbtn--light:hover{ text-decoration-color:#fff; }
.wr-root .wr-band--navy .wr-linkbtn--light:focus-visible{ outline:2px solid #fff; outline-offset:3px; }
.wr-root .wr-fee-table td[data-label="Residences"]{ font-variant-numeric:tabular-nums; }
.wesun .src a{ color:var(--wr-navy-soft) !important; text-decoration:underline; text-underline-offset:2px; display:inline !important; white-space:normal; }
.wesun .src a:hover{ color:var(--wr-navy) !important; }
.wr-root .wr-shared{ margin:22px 0 0; padding:26px 28px 22px; border:1px solid var(--wr-line); border-radius:16px; background:var(--wr-white); box-shadow:0 10px 28px rgba(14,42,71,.055); }
.wr-root .wr-shared-h{ margin:0 0 9px !important; font-family:var(--wr-serif); font-size:var(--wr-t-h3); font-weight:600; line-height:1.18; color:var(--wr-navy); text-wrap:balance; }
.wr-root .wr-shared-sub{ margin:0 !important; font-size:var(--wr-t-body); line-height:1.65; color:var(--wr-charcoal); text-wrap:pretty; }
.wr-root .wr-shared-grid{ display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); margin:22px 0 0; border-top:1px solid var(--wr-line); }
.wr-root .wr-shared-item{ min-width:0; padding:18px 20px 2px; border-left:1px solid var(--wr-line); }
.wr-root .wr-shared-item:first-child{ border-left:0; padding-left:0; }
.wr-root .wr-shared-n{ margin:0 0 6px !important; font-family:var(--wr-serif); font-size:clamp(23px,2.5vw,30px); font-weight:600; line-height:1.05; color:var(--wr-navy); letter-spacing:-.01em; }
.wr-root .wr-shared-l{ margin:0 !important; font-size:var(--wr-t-small); line-height:1.45; color:var(--wr-muted); text-wrap:pretty; }
.wr-root .wr-shared-foot{ margin:20px 0 0 !important; padding-top:16px; border-top:1px solid var(--wr-line); font-size:var(--wr-t-small); line-height:1.6; color:var(--wr-charcoal); }
.wr-root .wr-location-ask p{ flex:1 1 auto; min-width:0; }
.wr-root .wr-location-ask .wr-btn{ flex:0 0 auto; white-space:nowrap; }
@media (max-width:900px){
  .wr-root .wr-life-lead{ grid-template-columns:1fr; align-items:start; }
  .wr-root .wr-life-grid{ grid-template-columns:1fr; }
}
@media (max-width:620px){
  .wr-root .wr-location-ask{ align-items:stretch; flex-direction:column; }
  .wr-root .wr-location-ask .wr-btn{ width:100%; justify-content:center; }
  .wr-root .wr-onetime{ grid-template-columns:1fr; }
  .wr-root .wr-onetime-badge{ justify-self:start; }
}
@media (max-width:1060px){
  .wr-root .wr-shared-grid{ grid-template-columns:repeat(3,minmax(0,1fr)); }
  .wr-root .wr-shared-item{ border-left:1px solid var(--wr-line); padding-left:20px; }
  .wr-root .wr-shared-item:nth-child(3n+1){ border-left:0; padding-left:0; }
}
@media (max-width:560px){
  .wr-root .wr-shared{ padding:22px; }
  .wr-root .wr-shared-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .wr-root .wr-shared-item{ border-left:1px solid var(--wr-line); padding-left:18px; }
  .wr-root .wr-shared-item:nth-child(3n+1){ border-left:1px solid var(--wr-line); padding-left:18px; }
  .wr-root .wr-shared-item:nth-child(odd){ border-left:0; padding-left:0; }
}

/* TYPE SCALE. Six steps, not twenty-three. Sizes here drifted a half-pixel at a time
   until the page had 13px, 13.5px, 14px, 14.5px and 15px all doing similar work,
   which reads as noise rather than hierarchy. --wr-t-micro is the floor at 11.5px:
   the mobile metric labels had been squeezed to 8.5px, which is not a size, it is a
   surrender. Shorten the words instead of shrinking them. */
.wr-root{
  --wr-t-micro:11.5px;   /* labels, eyebrows, source lines           */
  --wr-t-small:13.5px;   /* supporting copy, table cells, captions   */
  --wr-t-body:15.5px;    /* ordinary prose                           */
  --wr-t-lead:19px;      /* sub-heads, card titles, intros           */
  --wr-t-h3:23px;        /* section sub-headings                     */
  --wr-t-h2:clamp(26px,3.1vw,32px);
  --wr-t-display:clamp(31px,4vw,40px);
}
/* .wr-lead is also the modal's title class, so scope the display size to the page
   header - unscoped it blew the popup heading up to 40px. */
.wr-root .wr-header .wr-lead{ font-size:var(--wr-t-display); line-height:1.12; letter-spacing:-.015em;
  margin:0 0 12px; text-wrap:balance; }
.wr-root .wr-header .wr-deck{ font-size:var(--wr-t-body); line-height:1.65; }
/* Headings break by font metrics, so what looks balanced in one font orphans in
   another. balance evens the lines whatever the font does, which matters here:
   the live site loads Amethyste and any local render falls back to Georgia. */
.wr-root .wr-section-title{ font-size:var(--wr-t-h2); line-height:1.16; letter-spacing:-.01em;
  text-wrap:balance; }
/* NO MAX-WIDTH ON PROSE. House rule, worthington-style-guide.md "Text measure":
   left-aligned body copy fills its container. Capping a deck or a section sub leaves
   an empty right gutter and reads as text wrapping early. Constrain a wrapping
   CONTAINER when a narrower measure is genuinely wanted, as .wr-shead does, never the
   paragraph. Centred blurbs are the only exception.

   THIS RULE WAS OVERRIDDEN ON 2026-08-29 AND HAD TO BE PUT BACK THE SAME DAY. The
   measurement behind the override was real: prose ran 170 characters a line on the
   hero deck and 208 on the rate-card footnote, and that is genuinely hard to read.
   The fix was not. Capping twenty-odd selectors moved every paragraph into a 640px
   column on a 1,344px frame and left the right half of the page empty, so the page
   looked broken rather than composed. A reading measure is a LAYOUT decision: either
   the container narrows so the whole section composes, or the space the cap frees has
   to be given a job. Squeezing text and walking away is neither.
   If the measure is worth doing, it gets designed. It does not get bolted on. */
.wr-root .wr-section-sub{ font-size:var(--wr-t-body); line-height:1.6; }
/* These two stay. Neither one narrows anything: pretty pulls a word back off a last
   line that would otherwise carry one word, and balance evens a heading's lines. */
.wr-root .wr-header .wr-deck,
.wr-root .wr-section-sub,
.wr-root .wr-summary,
.wr-root .wr-fg-d,
.wr-root .wr-flow > p,
.wr-root .wr-analysis > p,
.wr-root .answer-detail,
.wr-root .answer-lead{ text-wrap:pretty; }
.wr-root .wr-h3,
.wr-root .wr-fg-h,
.wr-root .wr-fs-name{ text-wrap:balance; }


.wr-root .wr-shead{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,250px); gap:16px 44px; align-items:end; margin:0 0 24px; }
/* No callout: the copy column still stops short of the full grid, which is what gives
   an introduction a readable line. The empty column is composition, not waste. */
.wr-root .wr-shead--solo{ grid-template-columns:minmax(0,1fr) minmax(0,300px); align-items:start; }
.wr-root .wr-shead .wr-section-title{ margin:0 0 10px; }
.wr-root .wr-shead .wr-section-sub{ margin:0; }
@media (max-width:860px){ .wr-root .wr-shead{ grid-template-columns:1fr; align-items:start; gap:18px; } }
.wr-root .wr-callout{ padding:1px 0 1px 18px; border-left:3px solid var(--wr-pink); }
.wr-root .wr-callout-lbl{ margin:0 0 7px !important; font-size:var(--wr-t-micro); font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:var(--wr-muted); }
/* Display type in a 250px column. Balanced, so a two-line value splits evenly
   instead of leaving the unit stranded on a line by itself. */
.wr-root .wr-callout-val{ margin:0 !important; font-family:var(--wr-serif); font-size:var(--wr-t-h3); line-height:1.08; font-weight:600; color:var(--wr-navy);  text-wrap:balance; }
.wr-root .wr-callout-note{ margin:8px 0 0 !important; font-size:var(--wr-t-small); line-height:1.5; color:var(--wr-muted); }
.wr-root .wr-band--navy .wr-callout-lbl{ color:rgba(255,255,255,.84); }
.wr-root .wr-band--navy .wr-callout-val{ color:#fff; }
.wr-root .wr-band--navy .wr-callout-note{ color:rgba(255,255,255,.88); }
/* JUMP NAV. Pills at every width. It used to be plain text with hairline dividers on
   desktop and pills only on a phone, on the theory that a row of pills under a hero,
   an H1 and a deck was one chunky element too many. Two treatments for one control is
   worse than either: the desktop version did not read as tappable for the same reason
   the phone version did not, and a reader moving between devices met a different
   thing each time. One control, one look.
   The phone adds what only a phone needs: the row scrolls, so it gets a fade that
   follows the scroll position, and the tap target grows to 44px without the pill
   growing with it. */
.wr-root .wr-nav{ align-items:center; gap:9px; margin:26px 0 32px; padding:12px 0;
  border-top:1px solid var(--wr-line); border-bottom:1px solid var(--wr-line); }
.wr-root .wr-nav::before{ content:"On this page"; flex:0 0 auto; margin-right:9px;
  font-size:var(--wr-t-micro); font-weight:800; letter-spacing:.1em; text-transform:uppercase;
  color:var(--wr-muted); }
.wr-root .wr-nav-link{ position:relative; background:var(--wr-white) !important;
  border:1px solid var(--wr-line) !important; border-radius:999px !important;
  padding:9px 15px !important; font-size:var(--wr-t-small) !important; font-weight:600;
  white-space:nowrap; transform:none !important; box-shadow:none !important; }
.wr-root .wr-nav-link:hover{ background:var(--wr-white) !important;
  border-color:var(--wr-navy) !important; color:var(--wr-navy) !important;
  text-decoration:none !important; }
/* The painted pill is 35px tall, which is the height the design wants and which clears
   WCAG's 24px minimum. It is under the 44px WCAG lists as the enhanced target and that
   Apple's guidance uses for a finger. Growing the pill would make the row heavy again,
   so the target grows instead: an invisible layer centred on each pill, 44px tall, the
   pill's own width. A click on a pseudo-element is delivered to the element that owns
   it, so the whole band is live. It sits inside the nav's 12px vertical padding, so
   nothing overlaps and the horizontal scroller does not clip it. */
.wr-root .wr-nav-link::after{ content:""; position:absolute; left:0; right:0; top:50%;
  height:44px; transform:translateY(-50%); }
/* THE ROW ON A PHONE. Nothing said it continued: it scrolls with the scrollbar hidden,
   which removes the only affordance there was, and the last item being half-cut at the
   edge was doing that work by accident. The mask fades the trailing edge so content
   visibly runs out of the viewport instead of stopping at a hard crop. Where
   scroll-driven animation is supported the fade follows the scroll position, showing on
   whichever side has more to see and clearing at each end. Where it is not, the fixed
   right-hand fade still reads correctly at rest, which is where a reader starts. No
   JavaScript either way. */
@property --wr-nav-fade-l{ syntax:'<length>'; inherits:false; initial-value:0px; }
@property --wr-nav-fade-r{ syntax:'<length>'; inherits:false; initial-value:38px; }
@media (max-width:1000px){
  .wr-root .wr-nav::before{ display:none; }
  .wr-root .wr-nav{
    flex-wrap:nowrap; overflow-x:auto;
    -webkit-overflow-scrolling:touch; scrollbar-width:none;
    scroll-snap-type:x proximity; scroll-padding-left:2px;
    -webkit-mask-image:linear-gradient(to right, transparent 0, #000 var(--wr-nav-fade-l),
                       #000 calc(100% - var(--wr-nav-fade-r)), transparent 100%);
            mask-image:linear-gradient(to right, transparent 0, #000 var(--wr-nav-fade-l),
                       #000 calc(100% - var(--wr-nav-fade-r)), transparent 100%);
  }
  .wr-root .wr-nav::-webkit-scrollbar{ display:none; }
  .wr-root .wr-nav-link{ flex:0 0 auto; scroll-snap-align:start; }
  /* Trailing spacer for browsers without scroll-driven animation. There the right fade
     is fixed at 38px, so without this the last pill would still be half faded once the
     reader reaches the end. The spacer parks that fade over blank space; the @supports
     block removes it, since there the fade clears by itself. */
  .wr-root .wr-nav-link:last-child{ margin-right:38px; }
}
@supports (animation-timeline: scroll(self inline)){
  @media (max-width:1000px){
    .wr-root .wr-nav{ animation:wr-nav-fade linear both; animation-timeline:scroll(self inline); }
    .wr-root .wr-nav-link:last-child{ margin-right:0; }
    @keyframes wr-nav-fade{
      0%   { --wr-nav-fade-l:0px;  --wr-nav-fade-r:38px; }
      8%   { --wr-nav-fade-l:38px; --wr-nav-fade-r:38px; }
      92%  { --wr-nav-fade-l:38px; --wr-nav-fade-r:38px; }
      100% { --wr-nav-fade-l:38px; --wr-nav-fade-r:0px;  }
    }
  }
}
/* Village comparison: one container, one divider, two-column field grid. */
.wr-root .wr-vwrap{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); border:1px solid var(--wr-line); border-radius:16px; background:var(--wr-white); overflow:hidden; }
.wr-root .wr-vcard{ display:flex; flex-direction:column; padding:26px 28px 24px; }
.wr-root .wr-vcard + .wr-vcard{ border-left:1px solid var(--wr-line); }
@media (max-width:760px){ .wr-root .wr-vwrap{ grid-template-columns:1fr; }
  .wr-root .wr-vcard + .wr-vcard{ border-left:0; border-top:1px solid var(--wr-line); } }
.wr-root .wr-vcard-head{ display:flex; align-items:center; gap:12px; }
.wr-root .wr-vcard-num{ flex:0 0 auto; display:inline-flex; align-items:center; justify-content:center; width:27px; height:27px; border-radius:50%; background:var(--wr-pink); color:var(--wr-ink); font-size:var(--wr-t-micro); font-weight:800; }
.wr-root .wr-vcard-name{ margin:0 !important; font-family:var(--wr-serif); font-size:var(--wr-t-h3); font-weight:600;
  line-height:1.15; color:var(--wr-navy); text-wrap:balance; }
.wr-root .wr-vcard-sub{ margin:4px 0 0 39px; font-size:var(--wr-t-micro); font-weight:800; letter-spacing:.09em; text-transform:uppercase; color:var(--wr-muted); }
/* One field per row, label left and value right, with a rule between. A reader
   comparing two villages tracks straight across from one card to the other, and the
   rules give the eye a line to follow. The previous two-up grid packed four fields
   into two rows and broke that tracking. Labels are sentence case at a readable size:
   a stack of wide-tracked uppercase micro-labels is visual static, not hierarchy. */
.wr-root .wr-vcard-rows{ flex:1 0 auto; display:block; margin:16px 0 0; padding:0;
  border-top:1px solid var(--wr-line); }
.wr-root .wr-vcard-row{ display:grid; grid-template-columns:minmax(0,152px) minmax(0,1fr);
  gap:3px 20px; padding:12px 0; border-bottom:1px solid var(--wr-line); }
.wr-root .wr-vcard-row:last-child{ border-bottom:0; padding-bottom:2px; }
.wr-root .wr-vcard-row dt{ margin:0; font-size:var(--wr-t-small); font-weight:600; letter-spacing:0;
  text-transform:none; color:var(--wr-muted); }
.wr-root .wr-vcard-row dd{ margin:0; font-size:var(--wr-t-body); line-height:1.5; color:var(--wr-ink); }
@media (max-width:520px){ .wr-root .wr-vcard-row{ grid-template-columns:1fr; gap:2px; } }
.wr-root .wr-play-note{ margin:18px 0 0; padding:0; font-size:var(--wr-t-small);
  line-height:1.6; color:rgba(255,255,255,.86); }
.wr-root .wr-play-note a{ color:#fff !important; font-weight:700;
  text-decoration:underline; text-underline-offset:3px;
  text-decoration-color:rgba(255,255,255,.45); }
.wr-root .wr-play-note a:hover,.wr-root .wr-play-note a:focus{ text-decoration-color:#fff; }
.wr-root .wr-vcard-foot{ margin:20px 0 0; align-self:stretch; padding:12px 15px; border-left:3px solid var(--wr-peri); border-radius:0 9px 9px 0; background:var(--wr-peri-tint); font-size:var(--wr-t-small); line-height:1.55; color:var(--wr-charcoal); }
@media (max-width:520px){ .wr-root .wr-vcard{ padding:22px; } .wr-root .wr-vcard-rows{ grid-template-columns:1fr; } }
/* Tried a translucent fill over the navy gradient first. Even at .13 it read as blue
   text on blue, which is exactly the complaint. The panel is now solid white on the
   navy band, so the rows keep full ink contrast and the band still frames them. */
.wr-root .wr-band--navy .wr-vwrap{ background:var(--wr-white); border-color:rgba(255,255,255,.20);
  box-shadow:0 18px 40px rgba(14,42,71,.28); }
/* Published club rate sheet. The village cards say WHETHER you pay greens fees;
   this says WHAT A ROUND COSTS, which is the number a buyer actually wants. Two
   headline figures carry the comparison, and the complete sheet sits under a
   <details> so the section stays short without hiding anything from a crawler. */
.wr-root .wr-rates{ margin:20px 0 0; border:1px solid var(--wr-line); border-radius:16px;
  background:var(--wr-white); overflow:hidden; }
.wr-root .wr-band--navy .wr-rates{ border-color:rgba(255,255,255,.20);
  box-shadow:0 18px 40px rgba(14,42,71,.28); }
.wr-root .wr-rates-head{ display:flex; flex-wrap:wrap; align-items:baseline; gap:6px 14px;
  padding:20px 26px 0; }
.wr-root .wr-rates-h{ margin:0 !important; font-family:var(--wr-serif); font-size:var(--wr-t-h3);
  font-weight:600; line-height:1.15; color:var(--wr-navy); }
.wr-root .wr-rates-season{ margin:0 !important; font-size:var(--wr-t-micro); font-weight:800;
  letter-spacing:.09em; text-transform:uppercase; color:var(--wr-muted); }
.wr-root .wr-rates-hi{ display:flex; flex-wrap:wrap; gap:14px; padding:16px 26px 0; }
.wr-root .wr-rate-hi{ flex:1 1 240px; padding:15px 18px; border-radius:12px;
  border:1px solid var(--wr-line); background:var(--wr-offwhite); }
.wr-root .wr-rate-hi-lbl{ margin:0 0 6px !important; font-size:var(--wr-t-micro); font-weight:800;
  letter-spacing:.09em; text-transform:uppercase; color:var(--wr-muted); }
.wr-root .wr-rate-hi-val{ margin:0 !important; font-family:var(--wr-serif);
  font-size:var(--wr-t-display); line-height:1.02; font-weight:600; color:var(--wr-navy); }
.wr-root .wr-rate-hi-sub{ margin:6px 0 0 !important; font-size:var(--wr-t-small); line-height:1.45;
  color:var(--wr-charcoal); }
.wr-root .wr-rates-note{ margin:0 !important; padding:16px 26px 0; font-size:var(--wr-t-small);
  line-height:1.6; color:var(--wr-charcoal); }
.wr-root .wr-rates-all{ margin:18px 0 0; border-top:1px solid var(--wr-line); }
.wr-root .wr-rates-all > summary{ list-style:none; cursor:pointer; padding:14px 26px;
  font-size:var(--wr-t-small); font-weight:700; color:var(--wr-navy); }
.wr-root .wr-rates-all > summary::-webkit-details-marker{ display:none; }
.wr-root .wr-rates-all > summary::after{ content:" +"; font-weight:800; }
.wr-root .wr-rates-all[open] > summary::after{ content:" –"; }
.wr-root .wr-rates-all > summary:focus-visible{ outline:2px solid var(--wr-navy); outline-offset:-2px; }
.wr-root .wr-rates-grid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
  gap:0 0; border-top:1px solid var(--wr-line); }
.wr-root .wr-rates-col{ padding:20px 26px 24px; }
.wr-root .wr-rates-col + .wr-rates-col{ border-left:1px solid var(--wr-line); }
.wr-root .wr-rates-col--full{ grid-column:1 / -1; border-left:0 !important;
  border-top:1px solid var(--wr-line); }
.wr-root .wr-rates-col--full .wr-rates-body{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
  gap:0 40px; align-items:start; }
@media (max-width:760px){ .wr-root .wr-rates-col--full .wr-rates-body{ grid-template-columns:1fr; } }
.wr-root .wr-rates-col-h{ margin:0 0 2px !important; font-size:var(--wr-t-small); font-weight:800;
  letter-spacing:.06em; text-transform:uppercase; color:var(--wr-navy); }
.wr-root .wr-rates-col-d{ margin:0 0 14px !important; font-size:var(--wr-t-micro); font-weight:700;
  letter-spacing:.06em; text-transform:uppercase; color:var(--wr-muted); }
.wr-root .wr-rates-grp{ margin:0 0 16px; }
.wr-root .wr-rates-grp:last-child{ margin-bottom:0; }
.wr-root .wr-rates-grp-h{ margin:0 0 6px !important; padding-bottom:5px;
  border-bottom:2px solid var(--wr-pink); font-size:var(--wr-t-micro); font-weight:800;
  letter-spacing:.09em; text-transform:uppercase; color:var(--wr-navy); }
.wr-root .wr-rates-dl{ display:block; margin:0; padding:0; }
.wr-root .wr-rates-r{ display:flex; align-items:baseline; gap:8px; padding:5px 0;
  border-bottom:1px solid var(--wr-pale); }
.wr-root .wr-rates-r:last-child{ border-bottom:0; }
.wr-root .wr-rates-r dt{ margin:0; flex:1 1 auto; font-size:var(--wr-t-small); color:var(--wr-charcoal); }
.wr-root .wr-rates-r dd{ margin:0; flex:0 0 auto; font-size:var(--wr-t-small); font-weight:700;
  font-variant-numeric:tabular-nums; color:var(--wr-ink); }
.wr-root .wr-rates-foot{ margin:0 !important; padding:14px 26px 20px; border-top:1px solid var(--wr-line);
  font-size:var(--wr-t-micro); line-height:1.6; color:var(--wr-muted); }
@media (max-width:760px){ .wr-root .wr-rates-grid{ grid-template-columns:1fr; }
  .wr-root .wr-rates-col + .wr-rates-col{ border-left:0; border-top:1px solid var(--wr-line); } }
@media (max-width:520px){ .wr-root .wr-rates-head,.wr-root .wr-rates-hi,.wr-root .wr-rates-note,
  .wr-root .wr-rates-all > summary,.wr-root .wr-rates-col,.wr-root .wr-rates-foot{
  padding-left:20px; padding-right:20px; } }
/* ShowcaseIDX widgets draw their own fixed-width panel and pin it left. Centre the
   wrapper so a narrow form sits in the middle of the card rather than against one
   edge, and cap it so the panel is never stranded in a very wide dialog. */
.wr-root .wr-modal-card .wr-idx{ max-width:540px; margin-left:auto; margin-right:auto; }
.wr-root .wr-modal-card .wr-idx > *{ margin-left:auto; margin-right:auto; }
/* In-context CTA. Copy left, one button right, dropping to stacked on a phone.
   Deliberately quiet: it sits inside a section rather than interrupting it. */
.wr-root .wr-ask{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;
  gap:14px 22px; margin:18px 0 0; padding:19px 24px; border:1px solid var(--wr-navy);
  border-radius:14px; background:var(--wr-navy); box-shadow:0 14px 40px rgba(23,63,108,.10); }
.wr-root .wr-ask-t{ margin:0 !important; flex:1 1 300px; font-size:var(--wr-t-small); line-height:1.6;
  color:rgba(255,255,255,.90); }
.wr-root .wr-ask-t b{ color:#fff; }
.wr-root .wr-ask .wr-btn{ flex:0 0 auto; }
/* A navy button on a navy panel is invisible, and the theme overrides button colour
   with !important, so the inverse has to fight back at the same weight. */
.wr-root .wr-ask .wr-btn-primary{ background:var(--wr-white) !important; color:var(--wr-navy) !important;
  border-color:var(--wr-white) !important; }
.wr-root .wr-ask .wr-btn-primary:hover{ background:var(--wr-offwhite) !important;
  color:var(--wr-navy) !important; }
@media (max-width:560px){ .wr-root .wr-ask .wr-btn{ width:100%; justify-content:center; } }
/* The updates strip closes the page under the two paths: one low-commitment offer,
   full width, visually subordinate to the primary buttons above it. */
.wr-root .wr-updates{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;
  gap:12px 22px; margin:16px 0 0; padding:16px 22px; border:1px solid var(--wr-line);
  border-radius:14px; background:var(--wr-offwhite); }
.wr-root .wr-updates-t{ margin:0 !important; flex:1 1 320px; font-size:var(--wr-t-small);
  line-height:1.6; color:var(--wr-charcoal); }
.wr-root .wr-updates-t b{ color:var(--wr-navy); }
@media (max-width:560px){ .wr-root .wr-updates .wr-btn{ width:100%; justify-content:center; } }
/* Leasing. Numbered because it IS a sequence - sign the lease, get it approved,
   then separately buy your tenant into the club - and buyers who miss that the third
   step is separate are the ones who get surprised. Steps carry the process; the
   caveat and the source sit under it, in that order, because a caveat that appears
   before the thing it qualifies just reads as hedging. */
.wr-root .wr-lease-steps{ list-style:none; display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
  gap:0; margin:24px 0 0 !important; padding:0 !important; border:1px solid var(--wr-line);
  border-radius:16px; background:var(--wr-white); overflow:hidden; }
/* list-style goes on the ITEM, not just the list. The theme sets a decimal marker on
   every li at a specificity that beats list-style:none inherited from the ol, so on the
   live site the markers for the right-hand cards printed "2." and "4." in the gutter
   between the two columns. Nobody saw it locally because the theme stylesheet is not
   loaded there. Any list styled as cards needs this on the item. */
.wr-root .wr-lease-step{ margin:0 !important; padding:20px 22px 22px; border-top:1px solid var(--wr-line);
  border-left:1px solid var(--wr-line); list-style:none !important; }
.wr-root .wr-lease-step:nth-child(-n+2){ border-top:0; }
.wr-root .wr-lease-step:nth-child(odd){ border-left:0; }
@media (max-width:1060px){ .wr-root .wr-lease-steps{ grid-template-columns:1fr; }
  .wr-root .wr-lease-step{ border-left:0; }
  .wr-root .wr-lease-step:nth-child(2){ border-top:1px solid var(--wr-line); } }
.wr-root .wr-lease-n{ display:inline-flex; align-items:center; justify-content:center; width:25px; height:25px;
  border-radius:50%; background:var(--wr-pink); color:var(--wr-ink); font-size:var(--wr-t-micro); font-weight:800; }
.wr-root .wr-lease-h{ margin:10px 0 7px !important; font-size:var(--wr-t-lead); font-weight:700;
  line-height:1.25; color:var(--wr-navy); text-wrap:balance; }
.wr-root .wr-lease-b{ margin:0 !important; font-size:var(--wr-t-small); line-height:1.62; color:var(--wr-charcoal); }
.wr-root .wr-lease-rates{ margin:16px 0 0; padding:20px 24px 22px; border:1px solid var(--wr-navy);
  border-radius:14px; background:var(--wr-navy); box-shadow:0 14px 40px rgba(23,63,108,.10); }
.wr-root .wr-lease-rates-h{ margin:0 0 3px !important; font-size:var(--wr-t-micro); font-weight:800;
  letter-spacing:.09em; text-transform:uppercase; color:#fff; }
.wr-root .wr-lease-rates-d{ margin:0 0 14px !important; font-size:var(--wr-t-small); line-height:1.55;
  color:rgba(255,255,255,.86); }
.wr-root .wr-lease-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); gap:12px 22px; }
.wr-root .wr-lease-cell{ padding-top:9px; border-top:2px solid var(--wr-pink); }
.wr-root .wr-lease-cell-l{ margin:0 0 3px !important; font-size:var(--wr-t-micro); font-weight:800;
  letter-spacing:.06em; text-transform:uppercase; color:rgba(255,255,255,.82); }
.wr-root .wr-lease-cell-v{ margin:0 !important; font-family:var(--wr-serif); font-size:var(--wr-t-h3);
  line-height:1.05; font-weight:600; font-variant-numeric:tabular-nums; color:#fff; }
.wr-root .wr-lease-cell-s{ margin:4px 0 0 !important; font-size:var(--wr-t-micro);
  color:rgba(255,255,255,.78); }
.wr-root .wr-lease-caveat{ margin:16px 0 0 !important; padding:12px 16px; border-left:3px solid var(--wr-peri);
  border-radius:0 9px 9px 0; background:var(--wr-peri-tint); font-size:var(--wr-t-small); line-height:1.6;
  color:var(--wr-charcoal); }
/* Fees now open their own band, so the divider that separated them from the
   village cards inside a shared band is gone. */


.wr-root .wr-fees{ margin-top:0; padding-top:0; border-top:0; }

.wr-root .wr-fees .wr-src{ margin-top:22px; }
/* The kit sets white-space:nowrap on every table cell, which is right for a grid of
   figures and wrong for the prose column in the fee-component table - it pushed the
   Amount column, the whole point of the table, off the right edge. */
.wr-root .wr-fee-table td:first-of-type{ white-space:normal; }
/* Village encoded on the row's left edge: the table scans without reading the
   village column, and the colours match the two cards above it. */
.wr-root .wr-fee-table tbody th[scope="row"]{ border-left:3px solid transparent; padding-left:13px; }
.wr-root .wr-fee-table tbody tr.wr-fee-row--a th[scope="row"]{ border-left-color:var(--wr-navy); }
.wr-root .wr-fee-table tbody tr.wr-fee-row--b th[scope="row"]{ border-left-color:var(--wr-pink); }
.wr-root .wr-fee-table tbody tr.wr-fee-row--c th[scope="row"]{ border-left-color:var(--wr-navy-soft); }
.wr-root .wr-fee-table tbody tr.wr-fee-row--d th[scope="row"]{ border-left-color:var(--wr-peri); }
.wr-root .wr-fee-total{ margin:20px 0 0; padding:16px 20px; border-radius:12px; }
/* CONTRAST. --wr-muted #6B6F78 on the grey band #EAEAE6 measures 4.17:1, under the
   4.5:1 WCAG AA minimum for body text, and it is the colour on the deck, the as-of
   line, the callout labels, the source lines, the byline and the whole footer: ten
   failures, one token. #5F636C keeps the same hue and clears it everywhere the kit
   puts it (4.99 on the grey band, 6.02 on white, 5.26 on the periwinkle tint).
   The city pages use the same token from the same kit and need the same change in
   worthington-kit.css. Found by an axe scan, not by looking. */
.wr-root{ --wr-muted:#5F636C; --wr-faint:#5F636C; }
/* FOCUS. Every control has to show where the keyboard is. The kit covers buttons and
   nav links; inline prose links and the FAQ copy-link button were missing. */
.wr-root a:focus-visible,
.wr-root button:focus-visible{ outline:2px solid var(--wr-navy); outline-offset:2px; border-radius:3px; }
.wr-root .wr-band--navy a:focus-visible,
.wr-root .wr-band--navy button:focus-visible{ outline-color:#fff; }
/* Village key + labelled pills. The coloured row edge is reinforcement; these two
   carry the meaning, so the table still reads in greyscale, in print, and to a
   screen reader. Never ship a colour-coded table without both. */
.wr-root .wr-legend{ display:flex; flex-wrap:wrap; gap:8px 22px; margin:0 0 12px; font-size:var(--wr-t-small); font-weight:600; color:var(--wr-charcoal); }
.wr-root .wr-legend-item{ display:inline-flex; align-items:center; gap:8px; }
.wr-root .wr-legend-dot{ width:11px; height:11px; border-radius:3px; flex:0 0 auto; }
.wr-root .wr-legend-dot--a{ background:var(--wr-navy); }
.wr-root .wr-legend-dot--b{ background:var(--wr-pink); }
.wr-root .wr-legend-dot--c{ background:var(--wr-navy-soft); }
.wr-root .wr-legend-dot--d{ background:var(--wr-peri); }
.wr-root .wr-pill{ display:inline-block; padding:3px 11px; border-radius:999px; font-size:var(--wr-t-micro); font-weight:800; letter-spacing:.04em; white-space:nowrap; }
.wr-root .wr-pill--a{ background:var(--wr-navy); color:#fff; }
.wr-root .wr-pill--b{ background:var(--wr-pink); color:var(--wr-ink); }
.wr-root .wr-pill--c{ background:var(--wr-navy-soft); color:#fff; }
.wr-root .wr-pill--d{ background:var(--wr-peri); color:var(--wr-ink); }
.wr-root .wr-fee-special{ font-weight:600 !important; color:var(--wr-charcoal) !important; }
.wr-root .wr-fee-verify{ margin:16px 0 0; padding:15px 18px; border:1px solid var(--wr-line);
  border-left:3px solid var(--wr-pink); border-radius:0 12px 12px 0; background:var(--wr-white);
  font-size:var(--wr-t-small); line-height:1.65; color:var(--wr-charcoal); }
.wr-root .wr-fee-verify b{ color:var(--wr-navy); }
.wr-root .wr-ledger{ margin-top:34px; }
/* MOBILE: the fee tables stop being tables. Horizontal scrolling put the two facts a
   buyer most needs - the annual obligation and the special - off the right edge, and a
   scroll cue does not fix a financial table that hides its consequential columns by
   default. Each row becomes a card, every value keeps a visible label, and the order is
   reshuffled so the annual figure leads. Roles are restored explicitly because changing
   display drops the implicit table semantics in some screen readers. */
@media (max-width:760px){
  .wr-root .wr-fee-table,
  .wr-root .wr-fee-table tbody,
  .wr-root .wr-fee-table tr,
  .wr-root .wr-fee-table th,
  .wr-root .wr-fee-table td{ display:block; width:auto; min-width:0; }
  .wr-root .wr-fee-table{ min-width:0; }
  .wr-root .wr-fee-table thead{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
  .wr-root .wr-fee-table tbody tr{ display:flex; flex-direction:column; margin:0 0 12px; padding:16px 18px;
    border:1px solid var(--wr-line); border-left-width:4px; border-radius:12px; background:var(--wr-white) !important; }
  .wr-root .wr-fee-table tbody tr.wr-fee-row--a{ border-left-color:var(--wr-navy); }
  .wr-root .wr-fee-table tbody tr.wr-fee-row--b{ border-left-color:var(--wr-pink); }
  .wr-root .wr-fee-table tbody th[scope="row"]{ order:1; padding:0 0 10px; border:0; border-bottom:1px solid var(--wr-line);
    font-size:var(--wr-t-body); text-align:left; white-space:normal; }
  .wr-root .wr-fee-table tbody td{ padding:9px 0 0; border:0; text-align:left !important; white-space:normal; }
  .wr-root .wr-fee-table tbody td::before{ content:attr(data-label); display:block; margin-bottom:2px;
    font-size:var(--wr-t-micro); font-weight:800; letter-spacing:.09em; text-transform:uppercase; color:var(--wr-muted); }
  .wr-root .wr-fee-table tbody td:nth-of-type(1){ order:2; }
  .wr-root .wr-fee-table tbody td:nth-of-type(3){ order:3; }
  .wr-root .wr-fee-table tbody td:nth-of-type(4){ order:4; }
  .wr-root .wr-fee-table tbody td:nth-of-type(2){ order:5; }
  .wr-root .wr-fee-table tbody tr:nth-child(even){ background:var(--wr-white) !important; }
  .wr-root .wr-fee-table .wr-fee-amt{ font-size:var(--wr-t-body); }
  .wr-root .wr-table-wrap:has(.wr-fee-table){ overflow:visible; border:0; }
}
/* MOBILE: three metrics stay on one row. Stacked, they pushed the listings link most
   of a second screen down on a page whose whole promise is homes for sale. */
@media (max-width:560px){
  .wr-root .wr-brief-stats{ grid-template-columns:repeat(3,minmax(0,1fr)) !important; gap:0 !important; }
  .wr-root .wr-brief-stat{ padding:0 10px !important; border-left:1px solid var(--wr-line) !important;
    border-bottom:0 !important; }
  .wr-root .wr-brief-stat:first-child{ padding-left:0 !important; border-left:0 !important; }
  .wr-root .wr-brief-stat:last-child{ padding-right:0 !important; }
  /* 'Under contract' wraps to two lines where the others do not, which drops its
     number below the other two. Reserve two lines for every label so the three
     figures sit on one baseline. */
  /* 11.5px floor. These labels had been squeezed to 8.5px to fit three across, which
     is not a type size, it is a surrender. Shorten the words, not the letters. */
  .wr-root .wr-brief-lbl{ font-size:var(--wr-t-micro)!important; letter-spacing:.04em;
    min-height:2.6em; display:flex; align-items:flex-start; }
  .wr-root .wr-brief-num{ font-size:21px!important; }
  .wr-root .wr-brief-stat{ padding:0 7px!important; }
}
/* This block used to carry a second, fixed 26px right-hand fade. It sat later in the
   sheet than the scroll-driven mask above, so it quietly won the cascade and the
   scroll-following fade never ran: the custom properties animated, the mask ignored
   them. Only the two rules that are still doing work are kept. */
@media (max-width:720px){
  .wr-root .wr-nav{ position:relative; }
  .wr-root .wr-nav-link{ flex:0 0 auto; }
}
.wr-root .wr-fee-sub{ display:block; margin-top:3px; font-size:var(--wr-t-micro); font-weight:500; line-height:1.4; letter-spacing:0; white-space:normal; color:var(--wr-muted); }
.wr-root .wr-fee-callout{ margin:14px 0 0; padding:12px 16px; border-left:3px solid var(--wr-navy); border-radius:0 9px 9px 0; background:var(--wr-peri-tint); font-size:var(--wr-t-body); font-weight:700; line-height:1.55; color:var(--wr-navy); }
.wr-root .wr-fee-basis{ margin:14px 0 0; font-size:var(--wr-t-small); line-height:1.65; color:var(--wr-charcoal); }
/* Two conversion paths side by side. */
.wr-root .wr-paths{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1px; border:1px solid var(--wr-line); border-radius:16px; background:var(--wr-line); overflow:hidden; }
.wr-root .wr-path{ display:flex; flex-direction:column; padding:26px 28px; background:var(--wr-white); }
.wr-root .wr-path-h{ margin:8px 0 8px !important; font-family:var(--wr-serif); font-size:var(--wr-t-lead); font-weight:600;
  line-height:1.2; color:var(--wr-navy); text-wrap:balance; }
.wr-root .wr-path-sub{ margin:0 0 20px !important; font-size:var(--wr-t-body); line-height:1.6; color:var(--wr-charcoal); }
.wr-root .wr-path .wr-actions{ margin-top:auto !important; display:flex; flex-wrap:wrap; gap:10px; }
@media (max-width:760px){ .wr-root .wr-paths{ grid-template-columns:1fr; }
  .wr-root .wr-path .wr-actions{ display:grid; grid-template-columns:1fr; }
  .wr-root .wr-path .wr-btn{ width:100%; text-align:center; justify-content:center; } }
.wr-root .wr-ledger-note{ margin:0 0 12px; font-size:var(--wr-t-small); line-height:1.55; color:var(--wr-muted); }
/* One collected sources block, low-key by design: it is reference material, not a
   section, so it gets no eyebrow, no H2 and no band of its own. */
.wr-root .wr-sources{ margin:26px 0 0; border-top:1px solid var(--wr-line); }
.wr-root .wr-sources > summary{ list-style:none; cursor:pointer; padding:13px 0 0;
  font-size:var(--wr-t-small); font-weight:700; color:var(--wr-navy); }
.wr-root .wr-sources > summary::-webkit-details-marker{ display:none; }
.wr-root .wr-sources > summary::after{ content:" +"; font-weight:800; }
.wr-root .wr-sources[open] > summary::after{ content:" –"; }
.wr-root .wr-sources > summary:focus-visible{ outline:2px solid var(--wr-navy); outline-offset:2px; }
.wr-root .wr-cites{ display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:16px 34px; margin:16px 0 0 !important; padding:0 !important; }
.wr-root .wr-cite{ padding-top:9px; border-top:2px solid var(--wr-pink); }
.wr-root .wr-cite-l{ margin:0 0 4px !important; font-size:var(--wr-t-micro); font-weight:800;
  letter-spacing:.09em; text-transform:uppercase; color:var(--wr-navy); }
.wr-root .wr-cite-b{ margin:0 !important; font-size:var(--wr-t-small); line-height:1.62; color:var(--wr-muted); }
.wr-root .wr-cite-docs{ margin:18px 0 0 !important; font-size:var(--wr-t-small); line-height:1.65;
  color:var(--wr-muted); }
/* Sources are evidence, not fine print. The kit sets .wr-src at 11.5px, which reads as
   something a page is trying to bury. These pages are asking to be cited; the citation
   should be legible. */
.wr-root .wr-src{ font-size:var(--wr-t-small) !important; line-height:1.65 !important; color:var(--wr-charcoal) !important; }
.wr-root .wr-src a{ color:var(--wr-navy) !important; }
/* Definition row: the same trailing notes, laid out as reference cards. */
/* Snapshot cards. Every card runs the same three-part rhythm now - label row, figure,
   change chip - sitting on shared baselines across a row, instead of each card sizing
   itself around its own label. What was wrong: the circled i dropped onto a line of its
   own under a long label, the icon floated vertically centred against nothing, a
   two-line label pushed its figure below its neighbours', and the chips landed wherever
   each card happened to end. */
.wr-root .wr-stats{ align-items:stretch; }
.wr-root .wr-stat{ display:grid; grid-template-columns:auto minmax(0,1fr); gap:0 14px;
  align-items:start; align-content:start; padding:18px 20px 16px; }
.wr-root .wr-stat-ico{ align-self:start; margin:1px 0 0; }
.wr-root .wr-stat-body{ display:flex; flex-direction:column; height:100%; }
/* Label and its i are one flex row, so the button cannot be orphaned onto a line of its
   own however the label wraps. Two lines are reserved for every label so the figures
   underneath share a baseline across the row. */
.wr-root .wr-stat-lbl{ display:flex !important; align-items:flex-start; gap:7px;
  min-height:2.5em; margin:0 !important; }
/* the text shrinks, the button never does */
.wr-root .wr-stat-lbl-t{ min-width:0; flex:1 1 auto; }
.wr-root .wr-stat-i{ flex:0 0 auto; margin:1px 0 0 !important; }
.wr-root .wr-stat-num{ margin:4px 0 12px !important; font-variant-numeric:tabular-nums;
  letter-spacing:-.015em; }
.wr-root .wr-stat .wr-chip{ margin-top:auto !important; align-self:flex-start; }
@media (max-width:560px){
  .wr-root .wr-stat{ padding:16px; gap:0 11px; }
  .wr-root .wr-stat-lbl{ min-height:2.6em; }
}
/* Phones: the icon sits above the label instead of beside it. Two cards across a
   390px screen left about 90px for the figure once the icon took its column, and a
   seven-figure median ($1,302,500 at WildBlue, $1,007,500 at Esplanade) ran out of
   the card on a real iPhone. The tests' fallback font is narrower than Amethysta,
   which is why the wrap and overlap sweeps passed. */
@media (max-width:560px){
  .wr-root .wr-stat{ grid-template-columns:minmax(0,1fr); gap:10px 0; }
  .wr-root .wr-stat-ico{ width:34px; height:34px; }
  .wr-root .wr-stat-num{ font-size:clamp(20px,6.2vw,24px); white-space:nowrap; }
}
/* Separate cards with a real gap, not cells in one bordered container. Five items in
   a four-across container left a grey hole where the fifth row ran out, which read as
   a broken cell rather than as empty space. */
/* 200px so five definitions sit on one row at desktop rather than four plus a
   stranded fifth, and still fall back cleanly to 3, 2 and 1 as it narrows. */
/* Editorial float. The house pattern from the city pages: the image sits right and
   the prose runs beside it, so a tall photo does not leave a gap under a short
   paragraph. It also pulls the widest paragraph on the page in to a comfortable
   measure by taking the space, rather than by capping the paragraph. */
.wr-root .wr-flow::after{ content:""; display:block; clear:both; }
.wr-root .wr-flow-fig{ float:right; width:42%; max-width:520px; margin:4px 0 20px 34px; }
.wr-root .wr-flow-fig .wr-flow-img{ display:block; width:100%; height:auto; border-radius:14px;
  float:none; max-width:none; aspect-ratio:auto; margin:0; }
.wr-root .wr-flow-fig figcaption{ margin:10px 2px 0; font-size:var(--wr-t-small); line-height:1.55;
  color:var(--wr-muted); }
@media (max-width:760px){
  .wr-root .wr-flow-fig{ float:none; width:100%; max-width:none; margin:6px 0 18px; }
}
/* ---------------------------------------------------------------------------
   FEE CHOOSER. The section used to be two tables, a tinted total, a bordered
   caution and four bordered notes, and a reader still had to assemble their own
   answer. One question, one answer, one bar showing where the money goes.
   The full table lives under it in a <details> so nothing is lost to a crawler
   or to anyone without JavaScript.
   --------------------------------------------------------------------------- */
.wr-root .wr-fx{ display:grid; grid-template-columns:minmax(0,320px) minmax(0,1fr);
  gap:0; margin:26px 0 0; border:1px solid var(--wr-line); border-radius:16px;
  background:var(--wr-white); overflow:hidden; }
@media (max-width:860px){ .wr-root .wr-fx{ grid-template-columns:1fr; } }
.wr-root .wr-fx-pick{ padding:22px 24px; background:var(--wr-offwhite);
  border-right:1px solid var(--wr-line); }
@media (max-width:860px){ .wr-root .wr-fx-pick{ border-right:0; border-bottom:1px solid var(--wr-line); } }
.wr-root .wr-fx-q{ margin:0 0 12px !important; font-family:var(--wr-serif); font-size:var(--wr-t-lead);
  font-weight:600; color:var(--wr-navy); }
.wr-root .wr-fx-pick .wr-legend{ margin:0 0 14px; font-size:var(--wr-t-small); }
.wr-root .wr-fx-chips{ display:flex; flex-wrap:wrap; gap:8px; }
.wr-root .wr-fx-chip{ -webkit-appearance:none; appearance:none; cursor:pointer;
  display:inline-flex; align-items:center; gap:8px; white-space:nowrap; min-height:44px;
  padding:10px 16px 10px 13px; border:1px solid var(--wr-line); border-radius:999px;
  background:var(--wr-white); font-family:var(--wr-sans); font-size:var(--wr-t-small); font-weight:600;
  color:var(--wr-navy); line-height:1.2; text-align:left; transition:background .14s ease,
  border-color .14s ease, color .14s ease; }
.wr-root .wr-fx-cdot{ width:9px; height:9px; border-radius:3px; flex:0 0 auto; background:var(--wr-navy); }
.wr-root .wr-fx-chip--b .wr-fx-cdot{ background:var(--wr-pink); }
.wr-root .wr-fx-chip[aria-checked="true"] .wr-fx-cdot{ background:#fff; }
.wr-root .wr-fx-chip--b[aria-checked="true"] .wr-fx-cdot{ background:var(--wr-ink); }
.wr-root .wr-fx-chip:hover{ border-color:var(--wr-navy); }
.wr-root .wr-fx-chip:focus-visible{ outline:2px solid var(--wr-navy); outline-offset:2px; }
/* The selected chip carries its village colour, so the choice and the key agree. */
.wr-root .wr-fx-chip[aria-checked="true"]{ color:#fff; border-color:var(--wr-navy); background:var(--wr-navy); }
.wr-root .wr-fx-chip--b[aria-checked="true"]{ color:var(--wr-ink); background:var(--wr-pink); border-color:var(--wr-pink); }
.wr-root .wr-fx-out{ padding:24px 26px 22px; display:flex; flex-direction:column; }
.wr-root .wr-fx-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:18px; }
.wr-root .wr-fx-lbl{ margin:0 0 6px !important; font-size:var(--wr-t-micro); font-weight:700;
  letter-spacing:.06em; text-transform:uppercase; color:var(--wr-muted); }
.wr-root .wr-fx-big{ margin:0 !important; font-family:var(--wr-serif);
  font-size:var(--wr-t-display); line-height:1; font-weight:600; color:var(--wr-navy);
  letter-spacing:-.02em; font-variant-numeric:tabular-nums; }
.wr-root .wr-fx-sub{ margin:8px 0 0 !important; font-size:var(--wr-t-body); color:var(--wr-charcoal); }
.wr-root .wr-fx-pill{ margin:0 !important; flex:0 0 auto; padding:5px 13px; border-radius:999px;
  font-size:var(--wr-t-small); font-weight:800; background:var(--wr-navy); color:#fff; white-space:nowrap; }
.wr-root .wr-fx-pill[data-slot="b"]{ background:var(--wr-pink); color:var(--wr-ink); }
/* One bar, four parts, drawn to scale. It IS the arithmetic: the segments are the
   quarterly figure and four of them is the annual number above. */
.wr-root .wr-fx-bar{ display:flex; height:14px; margin:22px 0 0; border-radius:999px;
  overflow:hidden; background:var(--wr-pale); }
.wr-root .wr-fx-seg{ display:block; height:100%; transition:flex-basis .22s ease; flex:0 0 0%; }
.wr-root .wr-fx-seg--comm{ background:var(--wr-navy); }
.wr-root .wr-fx-seg--golf{ background:var(--wr-pink); }
.wr-root .wr-fx-seg--nb{ background:var(--wr-peri); }
.wr-root .wr-fx-seg--dine{ background:var(--wr-navy-soft); }
.wr-root .wr-fx-keys{ margin:16px 0 0; }
.wr-root .wr-fx-key{ display:grid; grid-template-columns:auto minmax(0,1fr) auto;
  align-items:baseline; gap:0 12px; padding:9px 0; border-bottom:1px solid var(--wr-line);
  font-size:var(--wr-t-small); line-height:1.5; color:var(--wr-charcoal); }
.wr-root .wr-fx-key:last-child{ border-bottom:0; }
.wr-root .wr-fx-key[hidden]{ display:none; }
.wr-root .wr-fx-key b{ color:var(--wr-navy); font-weight:700; }
.wr-root .wr-fx-dot{ width:10px; height:10px; border-radius:3px; transform:translateY(1px); }
.wr-root .wr-fx-dot--comm{ background:var(--wr-navy); }
.wr-root .wr-fx-dot--golf{ background:var(--wr-pink); }
.wr-root .wr-fx-dot--nb{ background:var(--wr-peri); }
.wr-root .wr-fx-dot--dine{ background:var(--wr-navy-soft); }
.wr-root .wr-fx-dot--c0{ background:var(--wr-navy); }
.wr-root .wr-fx-dot--c1{ background:var(--wr-pink); }
.wr-root .wr-fx-key-amt{ font-weight:700; color:var(--wr-navy); white-space:nowrap;
  font-variant-numeric:tabular-nums; }
/* THE FEE LADDER, an alternative to the chip explorer above.
   Used where a community's fee rows carry ONE component each. A stacked bar needs
   parts to stack; The Plantation's Bridgetown categories have a single assessment,
   so the explorer drew the same solid block fourteen times and the chart said
   nothing that the number above it had not already said. Here the bar length IS
   the fee, measured on one scale across every row, so the comparison a buyer
   actually wants is the thing the eye reads first. A row splits into two colours
   only where the owner genuinely pays two associations, which is the one real
   structural difference in this community's fee schedule. Every row is on screen
   at once, so nobody clicks fourteen chips to find out where their home sits. */
.wr-root .wr-fl{ margin:26px 0 0; }
/* THE CHOOSER. Three tabs, one per fee structure, over the panel they open. The
   selected one fills navy: on a row of otherwise identical white cards, a border
   colour or a shadow is not a strong enough signal for "this is the one you are
   looking at", and the panel below only makes sense if you can see which card it
   belongs to without hunting. */
.wr-root .wr-fs{ margin:0 0 30px; }
.wr-root .wr-fs-q{ margin:0 0 12px !important; font-size:var(--wr-t-micro); font-weight:800;
  letter-spacing:.09em; text-transform:uppercase; color:var(--wr-muted); }
.wr-root .wr-fs-list{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }
.wr-root .wr-fs-card{ display:flex; flex-direction:column; align-items:flex-start; gap:2px;
  width:100%; height:100%; margin:0; padding:16px 18px 15px; cursor:pointer; text-align:left;
  border:1px solid var(--wr-line); border-radius:14px; background:var(--wr-white);
  color:var(--wr-charcoal); font-family:inherit; text-decoration:none !important;
  transition:background .15s ease, border-color .15s ease, box-shadow .15s ease; }
.wr-root .wr-fs-card:hover{ text-decoration:none !important; }
/* Before the script runs these are jump links, not tabs. The selected fill and the
   notch are painted only from aria-selected, which the script sets, so with no
   JavaScript all three cards read as equal links to three visible panels, which is
   exactly what they are. */
.wr-root .wr-fs-card:hover{ border-color:var(--wr-navy); }
.wr-root .wr-fs-card[aria-selected="true"]{ background:var(--wr-navy); border-color:var(--wr-navy);
  color:#fff; box-shadow:0 3px 16px rgba(23,63,108,.22); }
/* The selected card points at its panel. A small notch is cheaper to read than an
   arrow glyph and survives the cards stacking on a phone, where it moves to the side. */
.wr-root .wr-fs-card{ position:relative; }
.wr-root .wr-fs-card[aria-selected="true"]::after{ content:""; position:absolute; left:50%;
  bottom:-7px; width:14px; height:14px; background:var(--wr-navy); transform:translateX(-50%) rotate(45deg);
  border-radius:2px; }
.wr-root .wr-fs-name{ font-family:var(--wr-serif); font-size:var(--wr-t-h3); font-weight:600;
  line-height:1.15; color:var(--wr-navy); letter-spacing:-.01em; text-wrap:balance; }
.wr-root .wr-fs-card[aria-selected="true"] .wr-fs-name{ color:#fff; }
.wr-root .wr-fs-kind{ font-size:var(--wr-t-micro); line-height:1.45; color:var(--wr-charcoal); }
.wr-root .wr-fs-amt{ margin-top:auto; padding-top:12px; font-size:var(--wr-t-body); font-weight:700;
  color:var(--wr-navy); font-variant-numeric:tabular-nums; }
/* The count rides with the price rather than taking a line of its own: how many
   profiles sit behind a card is a property of the range, not a separate fact. */
.wr-root .wr-fs-per{ display:block; font-size:var(--wr-t-micro); font-weight:500;
  color:var(--wr-muted); }
.wr-root .wr-fs-status{ margin-top:7px; font-size:var(--wr-t-micro); color:var(--wr-muted); }
.wr-root .wr-fs-card[aria-selected="true"] .wr-fs-kind{ color:rgba(255,255,255,.9); }
.wr-root .wr-fs-card[aria-selected="true"] .wr-fs-per,
.wr-root .wr-fs-card[aria-selected="true"] .wr-fs-status{ color:rgba(255,255,255,.78); }
.wr-root .wr-fs-card[aria-selected="true"] .wr-fs-amt{ color:#fff; }
.wr-root .wr-fs-card:focus-visible{ outline:3px solid var(--wr-peri); outline-offset:2px; }
/* No ch cap here. A ch is relative to THIS element's font size, and at micro size a
   74ch cap comes out at about 400px, which is how the old group description ended up
   as a narrow column with empty space beside it. Measure is set in pixels or not at
   all on anything smaller than body text. */
.wr-root .wr-fs-note{ margin:16px 0 0 !important; font-size:var(--wr-t-micro); line-height:1.6;
  color:var(--wr-muted); }
@media (max-width:820px){
  .wr-root .wr-fs-list{ grid-template-columns:1fr; gap:9px; }
  .wr-root .wr-fs-card{ display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:baseline;
    column-gap:16px; padding:14px 16px; }
  .wr-root .wr-fs-name{ grid-column:1; }
  .wr-root .wr-fs-amt{ grid-column:2; grid-row:1; margin-top:0; padding-top:0; text-align:right; }
  .wr-root .wr-fs-kind{ grid-column:1; }
  .wr-root .wr-fs-per{ text-align:right; }
  .wr-root .wr-fs-status{ grid-column:1 / -1; margin-top:6px; }
  /* No notch when the cards stack. It would point at the next card rather than at the
     panel, which sits below all three. The navy fill is doing the work anyway. */
  .wr-root .wr-fs-card[aria-selected="true"]::after{ display:none; }
}
/* With the tabs live the panel's own heading and count line repeat the selected card,
   so they are read but not shown. Without JavaScript the container never gets
   data-tabs, every panel stays open, and those headings are the only thing telling one
   stack of figures from the next. */
.wr-root .wr-fl[data-tabs] .wr-fg-h,
.wr-root .wr-fl[data-tabs] .wr-fg-m{ position:absolute; width:1px; height:1px; padding:0;
  margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }
.wr-root .wr-fl[data-tabs] .wr-fg{ margin-bottom:0; }
/* PRINT. With the tabs live two panels carry hidden, so a printout would have carried
   one fee group out of three and no sign that the other two existed. Printing shows
   every panel with its heading back, and drops the chooser, which is a control and
   cannot be operated on paper. The script also unhides the panels on beforeprint,
   because hidden is an attribute and CSS alone cannot override it. */
@media print{
  .wr-root .wr-fs{ display:none; }
  .wr-root .wr-fl[data-tabs] .wr-fg{ margin-bottom:26px; }
  .wr-root .wr-fl[data-tabs] .wr-fg-h,
  .wr-root .wr-fl[data-tabs] .wr-fg-m{ position:static; width:auto; height:auto; margin:0 0 4px;
    overflow:visible; clip:auto; white-space:normal; }
  .wr-root .wr-fg[hidden]{ display:block !important; }
  .wr-root .wr-fg{ break-inside:avoid; }
}
/* A GROUP: heading, the range and count on one line, the explanation at a readable
   measure, then the table. The old version capped the explanation at 66ch and left
   the rest of the row empty, which read as a column that had failed to fill. It is a
   paragraph now, and paragraphs are allowed to be narrower than the thing below them
   only when nothing else is competing for that space. Here the table is, so the
   measure is set by the container and the type size instead. */
.wr-root .wr-fg{ margin:0 0 40px; }
/* Every jump target clears the sticky site header. Without this a link lands with the
   heading it was aimed at hidden behind the header, so the reader arrives mid-paragraph
   and has to scroll back up to find out where they are. */
.wr-root [id]{ scroll-margin-top:104px; }
.wr-root .wr-fg:last-of-type{ margin-bottom:0; }
.wr-root .wr-fg-h{ margin:0 0 3px !important; font-family:var(--wr-serif); font-size:var(--wr-t-h3);
  line-height:1.2; font-weight:600; color:var(--wr-navy); letter-spacing:-.01em; }
.wr-root .wr-fg-m{ margin:0 0 10px !important; font-size:var(--wr-t-micro); font-weight:700;
  letter-spacing:.05em; text-transform:uppercase; color:var(--wr-muted);
  font-variant-numeric:tabular-nums; }
.wr-root .wr-fg-d{ margin:0 0 16px !important; font-size:var(--wr-t-small); line-height:1.65;
  color:var(--wr-charcoal); }
/* Column alignment, set here rather than left to the kit's blanket right-align. Names
   and descriptions read from the left; counts and money line up on the right. */
/* The row's first cell is a th, so the tds start at nth-child(2). Counting them from
   1 put the alignment one column to the left of where it belonged. */
.wr-root .wr-fg-t thead th:nth-child(2), .wr-root .wr-fg-t tbody td:nth-child(2){ text-align:left; }
.wr-root .wr-fg-t thead th:nth-child(3), .wr-root .wr-fg-t tbody td:nth-child(3){ text-align:right; }
.wr-root .wr-fg-t thead th:first-child{ width:25%; }
.wr-root .wr-fg-t thead th:nth-child(2){ width:24%; }
.wr-root .wr-fg-t thead th:nth-child(3){ width:12%; }
.wr-root .wr-fg-t thead th:nth-child(4){ width:19%; }
.wr-root .wr-fg-t tbody td:nth-child(3){ font-variant-numeric:tabular-nums; }
.wr-root .wr-fg-t{ margin:0 !important; }
.wr-root .wr-fg-split{ display:block; margin-top:3px; font-size:var(--wr-t-micro); font-weight:500;
  line-height:1.45; color:var(--wr-muted); font-variant-numeric:tabular-nums; }
.wr-root .wr-fg-na{ color:var(--wr-muted); font-style:italic; }
.wr-root .wr-fl-foot{ margin:26px 0 0 !important; font-size:var(--wr-t-micro); line-height:1.6;
  color:var(--wr-muted); }
@media (max-width:760px){
  /* The shared stacked-card rules order the cells by nth-of-type for a three-cell
     row. This table has four, so it names its own order: what it costs first, then
     how it is billed, then what kind of home and how many of them. */
  .wr-root .wr-fg-t tbody td:nth-of-type(1){ order:5; }
  .wr-root .wr-fg-t tbody td:nth-of-type(2){ order:4; }
  .wr-root .wr-fg-t tbody td:nth-of-type(3){ order:3; }
  .wr-root .wr-fg-t tbody td:nth-of-type(4){ order:2; }
}
/* THE RESEARCH DECK. One navy end-matter band carrying Worthington's own statement,
   the Preferred Sources card as its right-hand anchor, and the monthly update across
   the foot. Same gradient as the villages and winter bands so it belongs to the page
   rather than arriving as a new idea at the bottom.
   The heading is deliberately --wr-t-h2, NOT --wr-t-display. A 60px line at the very
   bottom of the page outranks every section title above it, which inverts the page's
   own hierarchy at exactly the point the reader is deciding what to do next. */
.wr-root .wr-research{ margin:34px 0 0; padding:0; border-radius:var(--wr-radius); overflow:hidden;
  background:linear-gradient(155deg,var(--wr-navy),var(--wr-ink)); color:#fff; }
/* The right column has a floor of 420px because the card's identity row ellipsises
   below about 440px of content width: "Worthington Realty" truncated to "Worthingt..."
   at 330px, which is a worse look than any layout gain from a narrower column. */
.wr-root .wr-rd-main{ display:grid; grid-template-columns:minmax(0,1.16fr) minmax(392px,1fr);
  gap:30px; padding:52px 44px 42px; align-items:center; }
.wr-root .wr-rd-eyebrow{ color:#fff !important; }
.wr-root .wr-rd-eyebrow::before{ background:var(--wr-pink) !important; }
.wr-root .wr-rd-h{ margin:14px 0 !important; font-family:var(--wr-serif); font-size:var(--wr-t-h2);
  line-height:1.1; font-weight:600; letter-spacing:-.02em; color:#fff; max-width:15ch; text-wrap:balance; }
.wr-root .wr-rd-sub{ margin:0 !important; font-size:var(--wr-t-lead); line-height:1.6;
  color:rgba(255,255,255,.85); max-width:50ch; }
/* THE ANCHOR. Square on purpose: the site's 14px card radius would soften it back
   into a card, and against navy it reads better as a cut block.
   ONE LESS LAYER. The card's identity row is a rounded, tinted, bordered container
   inside this white block inside the navy band: three nested surfaces for one link.
   The white block is already the object, so the row loses its own surface and the
   identity and Google's badge sit directly on the white. It stays the same
   <a class="wps-btn"> with the same href, so Google's control and the analytics push
   are untouched. Removing a visible container from a link costs affordance, so hover
   and focus are restated rather than dropped. */
.wr-root .wr-rd-anchor{ background:var(--wr-white); border-radius:var(--wr-radius); padding:24px 22px 22px; }
.wr-root .wr-rd-anchor .wr-prefsource{ margin:0 !important; }
.wr-root .wr-rd-anchor .wps{ padding:0 !important; }
.wr-root .wr-rd-anchor .wps-mid{ max-width:none !important; }
.wr-root .wr-rd-anchor .wps-head{ justify-content:flex-start !important; }
.wr-root .wr-rd-anchor .wps-mid,
.wr-root .wr-rd-anchor .wps-title,
.wr-root .wr-rd-anchor .wps-sub,
.wr-root .wr-rd-anchor .wps-foot{ text-align:left !important; }
.wr-root .wr-rd-anchor .wps-title{ margin:14px 0 8px !important; }
.wr-root .wr-rd-anchor .wps-sub{ margin:0 !important; }
.wr-root .wr-rd-anchor .wps-foot{ margin:14px 0 0 !important; }
.wr-root .wr-rd-anchor .wps-row{ background:transparent !important; border:0 !important;
  border-radius:0 !important; box-shadow:none !important; padding:0 !important;
  min-height:0 !important; margin-top:18px; gap:14px; transform:none !important; }
.wr-root .wr-rd-anchor .wps-row:hover{ background:transparent !important;
  box-shadow:none !important; }
.wr-root .wr-rd-anchor .wps-row:hover .wps-name{ text-decoration:underline; text-underline-offset:3px; }
.wr-root .wr-rd-anchor .wps-row:focus-visible{ outline:3px solid var(--wr-navy) !important; outline-offset:4px; }
/* The badge and mark carry their display size in the component's own CSS, which wins
   locally and LOSES on the live site: something in the theme sets image widths from a
   stylesheet scripts cannot read, so Google's 430px badge rendered at full size and
   squeezed the identity column to 22px, turning "Worthington Realty" into "W...".
   It looked perfect in every local render, which is the whole argument for checking a
   page on the site it actually ships to. Restated here at a specificity the theme
   cannot beat, same as the ghost button below. */
.wr-root .wr-rd-anchor .wps-badge{ width:196px !important; height:auto !important; max-width:100% !important; }
.wr-root .wr-rd-anchor .wps-mark{ width:44px !important; height:44px !important; }
.wr-root .wr-rd-foot{ display:grid; grid-template-columns:minmax(0,1fr) auto; gap:14px 30px;
  align-items:center; padding:24px 44px 26px; border-top:1px solid rgba(255,255,255,.20); }
.wr-root .wr-rd-foot-l{ display:block; font-size:var(--wr-t-micro); font-weight:800; letter-spacing:.13em;
  text-transform:uppercase; color:var(--wr-peri); margin-bottom:7px; }
.wr-root .wr-rd-foot-t{ margin:0 !important; font-size:var(--wr-t-body); line-height:1.45; color:#fff; }
.wr-root .wr-rd-foot-q{ margin:5px 0 0 !important; font-size:var(--wr-t-small); color:rgba(255,255,255,.62); }
/* .wr-root .wr-btn-ghost sets navy with !important, so a ghost button on a dark band
   has to answer in kind. Same shape as the .wr-cta override above. */
.wr-root .wr-research .wr-rd-btn{ border-color:rgba(255,255,255,.55) !important;
  color:#fff !important; background:transparent !important; }
.wr-root .wr-research .wr-rd-btn:hover{ border-color:#fff !important; background:rgba(255,255,255,.10) !important; }
.wr-root .wr-research .wr-rd-btn:focus-visible{ outline:2px solid #fff; outline-offset:3px; }
@media (max-width:900px){
  /* "Worthington Realty" is the most important string in this interaction and the
     component ellipsises it below about 150px of row width. The name wraps in full
     here rather than being shortened. */
  .wr-root .wr-rd-main{ grid-template-columns:1fr; gap:26px; padding:36px 22px 26px; }
  .wr-root .wr-rd-foot{ grid-template-columns:1fr; padding:20px 22px 22px; }
  .wr-root .wr-rd-btn{ justify-self:start; }
  .wr-root .wr-rd-h, .wr-root .wr-rd-sub{ max-width:none; }
  .wr-root .wr-rd-anchor{ padding:20px 18px 18px; }
  .wr-root .wr-rd-anchor .wps-name,
  .wr-root .wr-rd-anchor .wps-domain{ white-space:normal !important; overflow:visible !important;
    text-overflow:clip !important; }
  .wr-root .wr-rd-anchor .wps-row{ margin-top:14px; row-gap:12px; }
  .wr-root .wr-rd-anchor .wps-title{ margin:12px 0 7px !important; }
  .wr-root .wr-rd-anchor .wps-foot{ margin:12px 0 0 !important; }
  /* Keep "Google Search" beside "Preferred Sources" rather than dropping it to its
     own line. Both labels also stop wrapping inside themselves, which is what made
     flex-wrap alone read worse than the original two-line version. */
  .wr-root .wr-rd-anchor .wps-head{ flex-wrap:nowrap !important; gap:7px !important; }
  .wr-root .wr-rd-anchor .wps-kicker,
  .wr-root .wr-rd-anchor .wps-in{ white-space:nowrap !important; }
}
/* The complete table, one disclosure away and always in the DOM. */
.wr-root .wr-fx-all{ margin:20px 0 0; }
.wr-root .wr-fx-all > summary{ cursor:pointer; display:inline-flex; align-items:center; gap:8px;
  font-size:var(--wr-t-small); font-weight:700; color:var(--wr-navy); padding:9px 0; }
.wr-root .wr-fx-all > summary{ list-style:none; }
.wr-root .wr-fx-all > summary::-webkit-details-marker{ display:none; }
.wr-root .wr-fx-all > summary::after{ content:""; width:8px; height:8px; border-right:2px solid currentColor;
  border-bottom:2px solid currentColor; transform:rotate(45deg) translateY(-2px); transition:transform .15s ease; }
.wr-root .wr-fx-all[open] > summary::after{ transform:rotate(-135deg) translateY(2px); }
.wr-root .wr-fx-all > summary:focus-visible{ outline:2px solid var(--wr-navy); outline-offset:3px; }
/* Secondary facts, with no boxes around them. */
.wr-root .wr-fx-alsos{ margin:26px 0 0; padding-top:20px; border-top:1px solid var(--wr-line); }
.wr-root .wr-fx-alsos-h{ margin:0 0 14px !important; font-size:var(--wr-t-micro); font-weight:700;
  letter-spacing:.06em; text-transform:uppercase; color:var(--wr-muted); }
.wr-root .wr-fx-alsos-g{ display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:18px 30px; }
.wr-root .wr-fx-also-l{ margin:0 0 4px !important; font-size:var(--wr-t-body); font-weight:700; color:var(--wr-navy); }
.wr-root .wr-fx-also-b{ margin:0 !important; font-size:var(--wr-t-small); line-height:1.6; color:var(--wr-charcoal); }
/* Four notes, so the row tiles evenly at 4, 2 and 1 across and never strands one.
   A thin pink rule on top ties them to the rest of the page rather than leaving
   four plain boxes sitting in the margin. */
.wr-root .wr-defs{ display:grid; grid-template-columns:repeat(auto-fit,minmax(215px,1fr)); gap:14px; margin:24px 0 0; }
.wr-root .wr-def{ padding:16px 18px 18px; background:var(--wr-white); border:1px solid var(--wr-line);
  border-top:3px solid var(--wr-pink); border-radius:3px 3px 12px 12px; }
.wr-root .wr-def-lbl{ margin:0 0 9px !important; font-size:var(--wr-t-micro); font-weight:800; letter-spacing:.09em;
  text-transform:uppercase; color:var(--wr-navy); min-height:2.2em; }
.wr-root .wr-def-body{ margin:0 !important; font-size:var(--wr-t-small); line-height:1.62; color:var(--wr-charcoal); }

/* FAQ answer deck (from seller-faqs.html) */
.faq-grid{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); align-items:start; gap:16px;}
.faq-card{min-width:0; border:1px solid var(--wr-line); border-radius:16px; background:var(--wr-white); color:var(--wr-charcoal); transition:border-color .2s ease, box-shadow .2s ease;}
.faq-card[open]{grid-column:1/-1; border-color:var(--wr-peri); box-shadow:0 20px 46px rgba(14,42,71,.10);}
.faq-card summary{min-height:88px; padding:20px 22px; list-style:none; cursor:pointer; display:grid; grid-template-columns:32px minmax(0,1fr) 30px; align-items:center; gap:12px; color:var(--wr-navy);}
.faq-card summary::-webkit-details-marker{display:none;}
.faq-card summary:focus-visible{outline:3px solid rgba(23,63,108,.25); outline-offset:2px; border-radius:14px;}
.question-number{align-self:start; padding-top:3px; color:var(--wr-faint); font-size:10px; font-weight:800; letter-spacing:.1em;}
.question-text{font-family:var(--wr-serif); font-size:17.5px; font-weight:600; line-height:1.28;}
.question-toggle{position:relative; width:30px; height:30px; border:1px solid rgba(23,63,108,.25); border-radius:50%; display:grid; place-items:center; transition:background .2s ease, transform .3s ease;}
.question-toggle::before, .question-toggle::after{content:""; position:absolute; width:11px; height:1.6px; border-radius:2px; background:var(--wr-navy);}
.question-toggle::after{transform:rotate(90deg); transition:opacity .2s ease;}
.faq-card[open] .question-toggle{background:var(--wr-navy); transform:rotate(180deg);}
.faq-card[open] .question-toggle::before, .faq-card[open] .question-toggle::after{background:#fff;}
.faq-card[open] .question-toggle::after{opacity:0;}
.faq-card[open] summary{border-bottom:1px solid rgba(182,199,231,.55);}
.answer-shell{padding:30px 26px 24px;}
.answer-layout{display:grid; grid-template-columns:minmax(0,1fr); gap:38px; align-items:start;}
.answer-layout.has-visual{grid-template-columns:minmax(0,1fr) minmax(300px,.62fr);}
.answer-lead-label{display:inline-flex; align-items:center; gap:8px; margin-bottom:12px; color:var(--wr-navy); font-size:9px; font-weight:800; letter-spacing:.14em; text-transform:uppercase;}
.answer-lead-label::before{content:""; width:20px; height:2px; background:var(--wr-pink); display:inline-block;}
.answer-lead{margin:0 0 14px; font-family:var(--wr-serif); font-size:24px; font-weight:600; line-height:1.26; color:var(--wr-navy); max-width:40ch;}
.answer-detail{margin:0; font-size:15px; line-height:1.78; color:var(--wr-charcoal); max-width:72ch;}
.wr-root a.answer-resource, .wr-root button.answer-resource{width:fit-content; margin-top:20px; padding:11px 16px; border:1px solid rgba(23,63,108,.2); border-radius:10px; background:#fff; display:inline-flex; align-items:baseline; gap:6px; color:var(--wr-navy) !important; font-family:var(--wr-sans); font-size:14px; font-weight:700; text-decoration:none !important; cursor:pointer; transition:border-color .2s ease, box-shadow .2s ease, transform .2s ease;}
.answer-resource span{color:var(--wr-muted); font-weight:500; font-size:12.5px;}
.wr-root a.answer-resource:hover, .wr-root button.answer-resource:hover{border-color:var(--wr-navy); box-shadow:0 7px 18px rgba(14,42,71,.09); transform:translateY(-1px);}
.copy-link{margin-top:24px; padding:0; border:0; background:transparent; display:inline-flex; align-items:center; gap:7px; color:var(--wr-muted); cursor:pointer; font-family:var(--wr-sans); font-size:10.5px; font-weight:700; letter-spacing:.04em;}
.copy-link svg{width:14px; height:14px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round;}
.copy-link:hover{color:var(--wr-navy);}
.copy-link:focus-visible{outline:3px solid rgba(23,63,108,.25); outline-offset:3px; border-radius:6px;}
@media (max-width:620px){ .faq-grid{grid-template-columns:1fr;} }
@media (max-width:620px){ .faq-card[open]{grid-column:auto;} }
@media (max-width:1100px){ .answer-layout.has-visual{grid-template-columns:1fr;} }
@media (max-width:560px){ .wr-root a.answer-resource, .wr-root button.answer-resource{width:100%; padding:13px 15px; display:block; line-height:1.35; text-align:left;} .answer-resource span{display:block; margin:0 0 3px; font-size:11.5px; line-height:1.3;} }

/* community pages have no section rail; let the answer fill the card */
.wr-root .answer-lead{ max-width:none; }
.wr-root .answer-detail{ max-width:none; }
.wr-root .wr-hero{ position:relative; display:flex; align-items:flex-end; min-height:clamp(440px,74vh,680px); overflow:hidden; background:var(--wr-ink); }
.wr-root .wr-hero-img{ position:absolute; inset:0; z-index:0; width:100%; height:100%; object-fit:cover; object-position:50% 58%; margin:0; border:0; border-radius:0; }
.wr-root .wr-hero{ --wr-hero-scrim:.45; }
.wr-root .wr-hero-scrim{ position:absolute; inset:0; z-index:1; pointer-events:none; background:rgba(0,0,0,var(--wr-hero-scrim)); }
.wr-root .wr-hero .wr-inner{ position:relative; z-index:2; width:100%; padding-top:150px; padding-bottom:58px; }
.wr-root .wr-hero .wr-eyebrow{ color:#fff !important; margin:0 0 6px; text-shadow:0 1px 2px rgba(0,0,0,.95), 0 3px 14px rgba(0,0,0,.45); }
.wr-root .wr-hero .wr-eyebrow::before{ background:var(--wr-pink) !important; }
.wr-root .wr-hero-h1{ font-family:var(--wr-serif); font-weight:600; color:#fff; font-size:clamp(34px,5.1vw,60px); line-height:1.08; letter-spacing:-.018em; margin:12px 0 16px; text-wrap:balance; max-width:18ch; text-shadow:0 4px 25px rgba(0,0,0,.79); }
.wr-root .wr-hero-deck{ margin:0; font-family:var(--wr-sans); font-size:17px; line-height:1.6; color:rgba(255,255,255,.96); max-width:62ch; text-shadow:0 1px 2px rgba(0,0,0,.95), 0 3px 14px rgba(0,0,0,.45); }
.wr-root .wr-hero-actions{ display:flex; flex-wrap:wrap; gap:12px; margin:30px 0 0; }
.wr-root .wr-hero .wr-btn{ min-height:48px; display:inline-flex; align-items:center; justify-content:center; }
.wr-root .wr-hero .wr-btn-primary{ background:var(--wr-white) !important; color:var(--wr-navy) !important; border-color:var(--wr-white); box-shadow:0 6px 20px rgba(6,20,36,.30); }
.wr-root .wr-hero .wr-btn-primary:hover{ background:var(--wr-peri-tint) !important; }
.wr-root .wr-hero .wr-btn-ghost{ background:rgba(255,255,255,.10) !important; color:#fff !important; border-color:rgba(255,255,255,.70); }
.wr-root .wr-hero .wr-btn-ghost:hover{ background:rgba(255,255,255,.20) !important; border-color:#fff; }
.wr-root .wr-hero .wr-btn:focus-visible{ outline:3px solid rgba(255,255,255,.92); outline-offset:3px; }
@media (max-width:900px){ .wr-root .wr-hero{ min-height:clamp(400px,66vh,560px); }
  .wr-root .wr-hero .wr-inner{ padding-top:130px; padding-bottom:46px; } }
@media (max-width:560px){ .wr-root .wr-hero .wr-inner{ padding-top:118px; padding-bottom:36px; }
  .wr-root .wr-hero-h1{ max-width:none; }
  .wr-root .wr-hero-actions .wr-btn{ width:100%; } }

/* fee-profile picker. LAST on purpose: the four-column modifier and the
 chip rules override base rules declared above, and at equal specificity the
 later declaration wins. Moving this block up turns four category cards back
 into three plus an orphan. */
.wr-root .wr-fs-list--4{ grid-template-columns:repeat(4,minmax(0,1fr)); }
@media (max-width:1100px){ .wr-root .wr-fs-list--4{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:820px){ .wr-root .wr-fs-list--4{ grid-template-columns:1fr; } }
.wr-root .wr-bn-pq{ margin:18px 0 9px; font-family:var(--wr-sans); font-size:12px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--wr-navy); }
.wr-root .wr-bn-chips{ display:flex; flex-wrap:wrap; gap:8px; }
.wr-root .wr-bn-chip{ -webkit-appearance:none; appearance:none; cursor:pointer; display:inline-flex; align-items:center; min-height:44px; padding:10px 16px; border:1px solid var(--wr-line); border-radius:999px; background:var(--wr-white); color:var(--wr-charcoal); font-family:var(--wr-sans); font-size:14px; line-height:1.2; text-decoration:none !important; white-space:nowrap; }
.wr-root .wr-bn-chip:hover{ border-color:var(--wr-navy); text-decoration:none !important; }
.wr-root .wr-bn-chip:focus-visible{ outline:3px solid var(--wr-peri); outline-offset:2px; }
.wr-root .wr-bn-chip[aria-current="true"], .wr-root .wr-bn-chip[aria-checked="true"]{ background:var(--wr-navy); border-color:var(--wr-navy); color:#fff; }
.wr-root .wr-bn-answer{ margin:18px 0 0; border:1px solid var(--wr-line); border-radius:16px; overflow:hidden; background:var(--wr-white); box-shadow:0 10px 34px rgba(23,63,108,.08); }
.wr-root .wr-bn-ahead{ padding:16px 20px 13px; background:var(--wr-navy); color:#fff; }
.wr-root .wr-bn-acat{ margin:0 0 4px; font-size:11px; font-weight:800; letter-spacing:.11em; text-transform:uppercase; color:rgba(255,255,255,.80); }
.wr-root .wr-bn-aname{ margin:0; font-family:var(--wr-serif); font-size:21px; line-height:1.2; color:#fff; }
.wr-root .wr-bn-answer[data-neutral="1"] .wr-bn-aname{ font-size:27px; line-height:1.1; }
.wr-root .wr-bn-afigs{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; padding:16px 20px 15px; }
.wr-root .wr-bn-afigs[hidden]{ display:none; }
.wr-root .wr-bn-av{ font-family:var(--wr-serif); font-size:31px; line-height:1.05; font-weight:600; color:var(--wr-navy); }
.wr-root .wr-bn-av--sm{ font-size:21px; color:var(--wr-charcoal); }
.wr-root .wr-bn-al{ margin-top:4px; font-size:11.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--wr-muted); }
.wr-root .wr-bn-asplit{ margin:0; padding:13px 20px 16px; border-top:1px solid var(--wr-line); font-size:13.5px; line-height:1.6; color:var(--wr-charcoal); background:var(--wr-peri-tint); }
.wr-root .wr-bn-all{ margin:16px 0 0; }
.wr-root .wr-bn-all>summary{ cursor:pointer; display:inline-flex; align-items:center; gap:8px; list-style:none; font-family:var(--wr-sans); font-size:13.5px; font-weight:700; color:var(--wr-navy); padding:9px 0; }
.wr-root .wr-bn-all>summary::-webkit-details-marker{ display:none; }
.wr-root .wr-bn-all>summary::after{ content:""; width:8px; height:8px; border-right:2px solid currentColor; border-bottom:2px solid currentColor; transform:rotate(45deg) translateY(-2px); transition:transform .15s ease; }
.wr-root .wr-bn-all[open]>summary::after{ transform:rotate(-135deg) translateY(2px); }
.wr-root .wr-bn-all>summary:focus-visible{ outline:2px solid var(--wr-navy); outline-offset:3px; }
.wr-root .wr-bn-all .wr-table-wrap{ margin-top:8px; }
@media (prefers-reduced-motion:reduce){ .wr-root .wr-bn-all>summary::after{ transition:none; } }
@media (max-width:640px){ .wr-root .wr-bn-afigs{ grid-template-columns:1fr; gap:12px; } .wr-root .wr-bn-chips{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); } .wr-root .wr-bn-chip{ justify-content:center; padding:10px 8px; font-size:13.5px; } }


.wr-cost-bonita{
  --cb-navy:var(--wr-navy,#173F6C);
  --cb-ink:var(--wr-ink,#0E2A47);
  --cb-peri:var(--wr-peri,#B6C7E7);
  --cb-peri-soft:var(--wr-peri-tint,#EAF0FA);
  --cb-pink:var(--wr-pink,#FFBDCB);
  --cb-charcoal:var(--wr-charcoal,#42434C);
  --cb-muted:var(--wr-muted,#5F636C);
  --cb-line:var(--wr-line,#DADFEA);
  --cb-paper:var(--wr-white,#FFFFFF);
  --cb-wash:var(--wr-offwhite,#F4F4F7);
  --cb-serif:var(--wr-serif,'Amethyste',Georgia,serif);
  --cb-sans:var(--wr-sans,'Inter',system-ui,sans-serif);
  color:var(--cb-charcoal);
  font-family:var(--cb-sans);
  font-size:16px;
  line-height:1.55;
}
.wr-cost-bonita *{box-sizing:border-box}
.wr-cost-bonita button,.wr-cost-bonita input,.wr-cost-bonita select{font:inherit}
.wr-cost-bonita button,.wr-cost-bonita select{cursor:pointer}
.wr-cost-bonita .wr-cb-shell{width:100%;background:var(--cb-paper);border-radius:24px;box-shadow:0 22px 65px rgb(14 42 71 / 12%);overflow:hidden}
.wr-cost-bonita .wr-cb-intro{padding:clamp(30px,5vw,64px) clamp(22px,6vw,72px) 28px}
.wr-root .wr-header + .wr-cost-bonita .wr-cb-intro,.wr-root .wr-cost-bonita .wr-cb-intro{padding-top:0}
.wr-cost-bonita .wr-cb-eyebrow{display:flex;align-items:center;gap:12px;margin:0 0 10px;color:var(--cb-navy);font-size:.75rem;font-weight:800;letter-spacing:.15em;text-transform:uppercase}
.wr-cost-bonita .wr-cb-eyebrow::before{content:"";width:30px;height:2px;background:var(--cb-pink)}
.wr-cost-bonita .wr-cb-h2{max-width:780px;margin:0;color:var(--cb-ink);font-family:var(--cb-serif);font-size:clamp(2rem,4vw,3.65rem);font-weight:600;letter-spacing:-.025em;line-height:1.02;text-wrap:balance}
.wr-cost-bonita .wr-cb-lede{max-width:760px;margin:16px 0 0;color:var(--cb-muted);font-size:clamp(1rem,1.5vw,1.12rem)}
.wr-cost-bonita .wr-cb-range{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 14px;margin:24px 0 0;padding-top:20px;border-top:1px solid var(--cb-line)}
.wr-cost-bonita .wr-cb-range strong{color:var(--cb-navy);font-family:var(--cb-serif);font-size:1.45rem;font-weight:600}
.wr-cost-bonita .wr-cb-range span{color:var(--cb-muted);font-size:.88rem}
.wr-cost-bonita .wr-cb-finder{margin:0 clamp(14px,4vw,48px) clamp(30px,5vw,60px);border:1px solid var(--cb-line);border-radius:20px;background:var(--cb-wash);overflow:hidden}
.wr-cost-bonita .wr-cb-fhead{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:20px 24px;background:var(--cb-ink);color:#fff}
.wr-cost-bonita .wr-cb-fhead h3{margin:0;font-family:var(--cb-serif);font-size:clamp(1.35rem,2vw,1.8rem);font-weight:600;color:#fff}
.wr-cost-bonita .wr-cb-fhead p{margin:2px 0 0;color:rgb(255 255 255 / 75%);font-size:.84rem}
.wr-cost-bonita .wr-cb-step{flex:0 0 auto;color:rgb(255 255 255 / 72%);font-size:.72rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase}
.wr-cost-bonita .wr-cb-fallback{padding:22px 24px;background:#fff;border-bottom:1px solid var(--cb-line)}
.wr-cost-bonita .wr-cb-fblead{margin:0 0 16px;color:var(--cb-muted);font-size:.88rem}
.wr-cost-bonita .wr-cb-fbgroup{margin:0 0 18px}
.wr-cost-bonita .wr-cb-fbhead{margin:0 0 8px;color:var(--cb-navy);font-family:var(--cb-sans);font-size:.75rem;font-weight:800;letter-spacing:.09em;text-transform:uppercase}
.wr-cost-bonita .wr-cb-fbhead span{margin-left:8px;color:var(--cb-muted);font-weight:650;letter-spacing:0;text-transform:none}
.wr-cost-bonita .wr-cb-fblist{display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0;list-style:none}
.wr-cost-bonita .wr-cb-fblist li{margin:0}
.wr-cost-bonita .wr-cb-fblist a{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:8px 15px;border:1px solid var(--cb-line);border-radius:999px;background:#fff;color:var(--cb-charcoal);font-size:.88rem;font-weight:700;text-decoration:none}
.wr-cost-bonita .wr-cb-fblist a b{color:var(--cb-navy);font-weight:800}
.wr-cost-bonita .wr-cb-fblist a:hover{border-color:var(--cb-navy);background:var(--cb-peri-soft)}
.wr-cost-bonita .wr-cb-controls{display:grid;grid-template-columns:1fr 1fr 1.25fr;border-bottom:1px solid var(--cb-line);background:#fff}
.wr-cost-bonita .wr-cb-field{min-width:0;margin:0;padding:22px 24px;border:0;border-right:1px solid var(--cb-line)}
.wr-cost-bonita .wr-cb-field:last-child{border-right:0}
.wr-cost-bonita .wr-cb-legend{display:block;margin:0 0 10px;padding:0;color:var(--cb-navy);font-size:.75rem;font-weight:800;letter-spacing:.09em;text-transform:uppercase;line-height:1.4}
.wr-cost-bonita .wr-cb-row{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.wr-cost-bonita .wr-cb-choice{position:relative}
.wr-cost-bonita .wr-cb-choice input{position:absolute;opacity:0;pointer-events:none}
.wr-cost-bonita .wr-cb-choice span{display:flex;min-height:46px;align-items:center;justify-content:center;padding:9px 10px;border:1px solid var(--cb-line);border-radius:999px;color:var(--cb-charcoal);font-size:.88rem;font-weight:700;transition:.16s ease}
.wr-cost-bonita .wr-cb-choice input:checked + span{border-color:var(--cb-navy);background:var(--cb-navy);color:#fff;box-shadow:0 6px 16px rgb(23 63 108 / 16%)}
.wr-cost-bonita .wr-cb-choice input:focus-visible + span,
.wr-cost-bonita select:focus-visible,.wr-cost-bonita a:focus-visible,
.wr-cost-bonita summary:focus-visible,.wr-cost-bonita button:focus-visible{outline:3px solid var(--cb-peri);outline-offset:3px}
.wr-cost-bonita .wr-cb-select{width:100%;min-height:46px;padding:9px 38px 9px 13px;border:1px solid var(--cb-line);border-radius:10px;background:#fff;color:var(--cb-ink);font-weight:650;appearance:auto}
.wr-cost-bonita .wr-cb-result{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(270px,.7fr);background:#fff}
.wr-cost-bonita .wr-cb-answer{padding:clamp(24px,4vw,46px)}
.wr-cost-bonita .wr-cb-kicker{margin:0 0 8px;color:var(--cb-muted);font-size:.72rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase}
.wr-cost-bonita .wr-cb-aname{margin:0;color:var(--cb-ink);font-family:var(--cb-serif);font-size:clamp(1.25rem,2vw,1.65rem);font-weight:600}
.wr-cost-bonita .wr-cb-money{display:flex;align-items:flex-end;gap:26px;margin-top:18px}
.wr-cost-bonita .wr-cb-main strong{display:block;color:var(--cb-navy);font-family:var(--cb-serif);font-size:clamp(3rem,6vw,5.2rem);font-weight:600;letter-spacing:-.04em;line-height:.9}
.wr-cost-bonita .wr-cb-main span,.wr-cost-bonita .wr-cb-side span{display:block;margin-top:8px;color:var(--cb-muted);font-size:.7rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase}
.wr-cost-bonita .wr-cb-side{padding:0 0 5px 26px;border-left:1px solid var(--cb-line)}
.wr-cost-bonita .wr-cb-side strong{color:var(--cb-ink);font-family:var(--cb-serif);font-size:clamp(1.5rem,3vw,2.15rem);font-weight:600;line-height:1}
.wr-cost-bonita .wr-cb-break{display:grid;margin:28px 0 0;padding:0;border-top:1px solid var(--cb-line)}
.wr-cost-bonita .wr-cb-break div{display:grid;grid-template-columns:1fr auto;gap:14px;padding:12px 0;border-bottom:1px solid var(--cb-line)}
.wr-cost-bonita .wr-cb-break dt{color:var(--cb-charcoal);font-weight:650}
.wr-cost-bonita .wr-cb-break dd{margin:0;color:var(--cb-navy);font-weight:750;text-align:right}
.wr-cost-bonita .wr-cb-district{display:flex;align-items:flex-start;justify-content:space-between;gap:18px;margin-top:18px;padding:14px 16px;border-radius:12px;background:var(--cb-peri-soft)}
.wr-cost-bonita .wr-cb-district strong{display:block;color:var(--cb-navy);font-size:.9rem}
.wr-cost-bonita .wr-cb-district span{display:block;color:var(--cb-muted);font-size:.78rem}
.wr-cost-bonita .wr-cb-district output{color:var(--cb-ink);font-weight:800;white-space:nowrap}
.wr-cost-bonita .wr-cb-prompt{padding:clamp(24px,4vw,46px)}
.wr-cost-bonita .wr-cb-prompt .wr-cb-pr{display:block;margin:0 0 6px;color:var(--cb-navy);font-family:var(--cb-serif);font-size:clamp(1.9rem,3.4vw,2.7rem);font-weight:600;letter-spacing:-.02em;line-height:1.05}
.wr-cost-bonita .wr-cb-prompt .wr-cb-prl{display:block;margin:0 0 14px;color:var(--cb-muted);font-size:.7rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase}
.wr-cost-bonita .wr-cb-prompt p{margin:0;color:var(--cb-charcoal);font-size:.95rem;max-width:44ch}
.wr-cost-bonita .wr-cb-closing{display:flex;flex-direction:column;justify-content:center;padding:clamp(24px,4vw,40px);background:var(--cb-peri-soft);border-left:1px solid var(--cb-line)}
.wr-cost-bonita .wr-cb-badge{align-self:flex-start;padding:6px 10px;border-radius:999px;background:var(--cb-pink);color:var(--cb-ink);font-size:.68rem;font-weight:850;letter-spacing:.1em;text-transform:uppercase}
.wr-cost-bonita .wr-cb-closing output{display:block;margin:16px 0 5px;color:var(--cb-navy);font-family:var(--cb-serif);font-size:clamp(2.4rem,4vw,3.7rem);font-weight:600;letter-spacing:-.03em;line-height:1}
.wr-cost-bonita .wr-cb-ckind{margin:0;font-family:var(--cb-sans);font-size:.78rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--cb-ink)}
.wr-cost-bonita .wr-cb-closing p{margin:14px 0 0;color:var(--cb-muted);font-size:.84rem;line-height:1.55}
.wr-cost-bonita .wr-cb-note{margin:0;padding:18px 24px;border-top:1px solid var(--cb-line);background:#fff;color:var(--cb-muted);font-size:.83rem}
.wr-cost-bonita .wr-cb-below{padding:0 clamp(22px,6vw,72px) clamp(34px,6vw,72px)}
.wr-cost-bonita details{border-top:1px solid var(--cb-line)}
.wr-cost-bonita summary{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:20px 0;color:var(--cb-navy);font-weight:750;cursor:pointer;list-style:none}
.wr-cost-bonita summary::-webkit-details-marker{display:none}
.wr-cost-bonita summary::after{content:"+";font-size:1.35rem;font-weight:400}
.wr-cost-bonita details[open]>summary::after{content:"\2212"}
.wr-cost-bonita .wr-cb-schednote,.wr-cost-bonita .wr-cb-source{margin:0 0 16px;color:var(--cb-muted);font-size:.82rem}
.wr-cost-bonita .wr-cb-method{margin:12px 0 0;color:var(--cb-muted);font-size:.8rem;line-height:1.6}
.wr-cost-bonita .wr-cb-wrap{overflow-x:auto;border:1px solid var(--cb-line);border-radius:12px}
.wr-cost-bonita .wr-cb-table{width:100%;min-width:820px;border-collapse:collapse;background:#fff;font-size:.78rem}
.wr-cost-bonita .wr-cb-table th,.wr-cost-bonita .wr-cb-table td{padding:10px 12px;border-bottom:1px solid var(--cb-line);text-align:left;vertical-align:top}
.wr-cost-bonita .wr-cb-table thead th{background:var(--cb-ink);color:#fff;font-size:.68rem;letter-spacing:.08em;text-transform:uppercase}
.wr-cost-bonita .wr-cb-table tbody th{color:var(--cb-navy);font-weight:750}
.wr-cost-bonita .wr-cb-table .wr-cb-num{white-space:nowrap;text-align:right}
.wr-cost-bonita .wr-cb-table tr:target{background:var(--cb-peri-soft);outline:2px solid var(--cb-navy)}
.wr-cost-bonita .wr-cb-verify{margin-top:22px;padding:18px 20px;border-radius:12px;background:var(--cb-wash);color:var(--cb-muted);font-size:.86rem}
.wr-cost-bonita .wr-cb-verify strong{color:var(--cb-navy)}
.wr-cost-bonita .wr-cb-cta{display:flex;align-items:center;justify-content:space-between;gap:24px;margin-top:18px;padding:20px 22px;border-radius:14px;background:var(--cb-navy);color:#fff}
.wr-cost-bonita .wr-cb-cta p{margin:0;font-size:.9rem;color:#fff}
.wr-cost-bonita .wr-cb-cta a{flex:0 0 auto;padding:12px 22px;border-radius:999px;background:#fff;color:var(--cb-navy);font-weight:800;text-decoration:none}
.wr-cost-bonita [hidden]{display:none !important}
@media(max-width:820px){
  .wr-cost-bonita .wr-cb-controls{grid-template-columns:1fr 1fr}
  .wr-cost-bonita .wr-cb-field--select{grid-column:1/-1;border-top:1px solid var(--cb-line);border-right:0}
  .wr-cost-bonita .wr-cb-field:nth-child(2){border-right:0}
  .wr-cost-bonita .wr-cb-result{grid-template-columns:1fr}
  .wr-cost-bonita .wr-cb-closing{border-top:1px solid var(--cb-line);border-left:0}
}
@media(max-width:560px){
  .wr-cost-bonita .wr-cb-shell{border-radius:0;box-shadow:none}
  .wr-cost-bonita .wr-cb-intro{padding-top:32px}
  .wr-cost-bonita .wr-cb-finder{margin-inline:12px;border-radius:16px}
  .wr-cost-bonita .wr-cb-fhead{padding:17px 18px}
  .wr-cost-bonita .wr-cb-step{display:none}
  .wr-cost-bonita .wr-cb-controls{grid-template-columns:1fr}
  .wr-cost-bonita .wr-cb-field{padding:18px;border-right:0;border-bottom:1px solid var(--cb-line)}
  .wr-cost-bonita .wr-cb-field--select{grid-column:auto;border-top:0}
  .wr-cost-bonita .wr-cb-answer,.wr-cost-bonita .wr-cb-prompt{padding:24px 18px}
  .wr-cost-bonita .wr-cb-money{align-items:flex-start;flex-direction:column;gap:15px}
  .wr-cost-bonita .wr-cb-side{padding:0;border-left:0}
  .wr-cost-bonita .wr-cb-side span{margin-top:4px}
  .wr-cost-bonita .wr-cb-district{flex-direction:column;gap:8px}
  .wr-cost-bonita .wr-cb-closing{padding:25px 18px}
  .wr-cost-bonita .wr-cb-below{padding-inline:18px}
  .wr-cost-bonita .wr-cb-cta{align-items:stretch;flex-direction:column}
  .wr-cost-bonita .wr-cb-cta a{text-align:center}
  .wr-cost-bonita .wr-cb-fallback{padding:18px}
}
@media(prefers-reduced-motion:reduce){.wr-cost-bonita *{transition:none !important}}
@media print{
  .wr-cost-bonita .wr-cb-shell{box-shadow:none}
  .wr-cost-bonita .wr-cb-controls,.wr-cost-bonita .wr-cb-cta{display:none}
  .wr-cost-bonita details{display:block}
  .wr-cost-bonita details>*{display:block}
}
/* ---- the complete schedule on a phone ----
   Twenty-one rows of five columns squeezed to 390px is not readable, and "no
   horizontal overflow" is not the same as legible. Below the breakpoint each row
   becomes its own card, with every figure printed beside the column it came from
   using the labels already carried on the cells. */
@media (max-width:640px){
  .wr-cost-bonita .wr-cb-wrap{border:0;border-radius:0;overflow:visible}
  .wr-cost-bonita .wr-cb-table{min-width:0;width:100%;border-collapse:separate;border-spacing:0;font-size:.95rem}
  /* The header is removed rather than visually hidden: a clipped thead still has
     real width and pushes the page sideways. Every cell carries its own label. */
  .wr-cost-bonita .wr-cb-table thead{display:none}
  .wr-cost-bonita .wr-cb-table tbody tr{display:block;margin:0 0 12px;border:1px solid var(--cb-line);
    border-radius:12px;background:#fff;overflow:hidden}
  /* label above value: side by side, a long column name squeezes the figure off the
     card. Stacked, both are always fully readable. */
  .wr-cost-bonita .wr-cb-table tbody tr > *{display:block;width:auto;padding:9px 14px;
    border:0;border-bottom:1px solid var(--cb-line);text-align:left}
  .wr-cost-bonita .wr-cb-table tbody tr > *:last-child{border-bottom:0}
  .wr-cost-bonita .wr-cb-table tbody tr th[scope="row"]{background:var(--cb-peri-soft);
    font-family:var(--cb-serif);font-size:1.1rem;font-weight:600;color:var(--cb-ink)}
  .wr-cost-bonita .wr-cb-table tbody td::before{content:attr(data-label);display:block;
    margin:0 0 2px;color:var(--cb-muted);font-size:.72rem;font-weight:750;
    letter-spacing:.04em;text-transform:uppercase}
  .wr-cost-bonita .wr-cb-table .wr-cb-num{text-align:left;white-space:normal;font-weight:750;color:var(--cb-navy)}
}