/* ============================================================
   HIROSHI KUBOTA — DESIGN SYSTEM (v4-derived)
   Single source of truth for tokens + components. Linked by every
   area-page prototype so they stay in lockstep with the v4 homepage.
   Brand source: designs-site/BRAND-SPEC.md · full doc: design-system.md
   Font (link in HTML <head>): Red Hat Display.
   ============================================================ */

:root{
  /* — brand palette (authoritative, no gold) — */
  --navy:#192E47;          /* primary ink / dark sections            */
  --navy-deep:#14263B;     /* hero base behind imagery               */
  --ocean:#1F5676;         /* accent · links · emphasis on light     */
  --sky:#A4D0EB;           /* light accent on dark                   */
  --sand:#CFBDA3;          /* warm accent · eyebrows/CTA on dark     */
  --sand-ink:#706B5C;      /* muted warm label text · was #8B8576 (3.35:1, failed AA) */
  --paper:#F7F4F1;         /* page background (Light Sand)           */
  --cloud:#FDFBFA;         /* card background                        */
  --rule:#E7E0D2;          /* hairline border on light               */
  --rule-soft:#EDE6DA;
  --body:#4A5B70;          /* body copy                              */
  --muted:#636B7A;         /* secondary copy · was #8B94A3 (2.79:1, failed AA)     */
  --star:#E8B54A;          /* review stars only (functional, not brand) */

  /* — fluid type scale — */
  --fs-display:clamp(40px,6.4vw,84px);
  --fs-h1:clamp(34px,5vw,64px);
  --fs-h2:clamp(30px,4.4vw,52px);
  --fs-h3:clamp(19px,2.2vw,26px);
  --fs-lead:clamp(16px,1.8vw,20px);
  --fs-body:clamp(15px,1.35vw,17px);
  --fs-eyebrow:12px;
  --fs-label:11px;

  /* — layout / rhythm — */
  --maxw:1280px;
  --pad-x:clamp(18px,4vw,44px);
  --pad-y:clamp(44px,6vw,88px);
  --gap:clamp(18px,3vw,34px);

  /* — radius (sharp = brochure feel) — */
  --r-sm:3px; --r-md:8px; --r-lg:14px; --r-xl:24px; --r-pill:999px;

  /* — elevation — */
  --sh-card:0 22px 44px -26px rgba(25,46,71,.35);
  --sh-float:0 30px 60px -40px rgba(25,46,71,.45);
  --sh-pop:0 20px 48px -20px rgba(0,0,0,.55);

  --font:'Red Hat Display',system-ui,-apple-system,Segoe UI,sans-serif;
  --ease:cubic-bezier(.2,.7,.2,1);
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--paper);color:var(--navy);font-family:var(--font);line-height:1.5;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:clip}
img{max-width:100%;display:block}
a{color:var(--ocean);text-decoration:none}
a:hover{color:var(--navy)}
::selection{background:var(--navy);color:var(--paper)}

/* ---------- layout ---------- */
.container{max-width:var(--maxw);margin:0 auto;padding-left:var(--pad-x);padding-right:var(--pad-x)}
.section{padding-top:var(--pad-y);padding-bottom:var(--pad-y)}
.section--tight{padding-top:clamp(30px,4vw,56px);padding-bottom:clamp(30px,4vw,56px)}

/* ---------- typography ---------- */
.eyebrow{font-size:var(--fs-eyebrow);font-weight:800;letter-spacing:.2em;text-transform:uppercase;color:var(--ocean)}
.eyebrow--sand{color:var(--sand)}
.display{font-weight:300;font-size:var(--fs-display);line-height:.98;letter-spacing:-.04em}
.h1{font-weight:300;font-size:var(--fs-h1);line-height:1.0;letter-spacing:-.035em}
.h2{font-weight:300;font-size:var(--fs-h2);line-height:1.04;letter-spacing:-.03em}
.h2--bold{font-weight:800}
.h3{font-weight:800;font-size:var(--fs-h3);letter-spacing:-.015em}
.em{font-style:italic;font-weight:400;color:var(--ocean)}       /* emphasis word inside a headline */
.em--sky{color:var(--sky)}
.lead{font-size:var(--fs-lead);line-height:1.5;color:var(--body);font-weight:500}
.body{font-size:var(--fs-body);line-height:1.7;color:var(--body)}
.label{font-size:var(--fs-label);font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--sand-ink)}

/* ---------- buttons + links ---------- */
.btn{display:inline-flex;align-items:center;gap:9px;font-weight:700;font-size:15px;
  padding:14px 24px;border-radius:var(--r-sm);border:1px solid transparent;cursor:pointer;
  white-space:nowrap;transition:transform .15s var(--ease),box-shadow .15s var(--ease),background .15s var(--ease)}
.btn:hover{transform:translateY(-1px)}
.btn--navy{background:var(--navy);color:#fff}
.btn--navy:hover{color:#fff;box-shadow:0 18px 40px -18px rgba(25,46,71,.55)}
.btn--sand{background:var(--sand);color:var(--navy)}
.btn--sand:hover{color:var(--navy)}
.btn--ghost{background:transparent;border-color:var(--rule);color:var(--navy)}
.btn--ghost:hover{border-color:var(--ocean);color:var(--navy)}
.link{display:inline-flex;align-items:center;gap:7px;font-weight:700;font-size:14px;color:var(--ocean);
  border-bottom:2px solid var(--ocean);padding-bottom:2px}

/* ---------- surfaces ---------- */
.card{background:var(--cloud);border:1px solid var(--rule);border-radius:var(--r-lg);overflow:hidden}
.card--pad{padding:clamp(18px,2.4vw,26px)}
.card--hover{transition:transform .18s var(--ease),box-shadow .18s var(--ease),border-color .18s var(--ease)}
.card--hover:hover{transform:translateY(-3px);border-color:var(--sand);box-shadow:var(--sh-card)}

/* the "Design Element" faceted navy section */
.pattern-navy{background-color:var(--navy);
  background-image:url(/designs/assets/pattern-navylight.png);
  background-size:460px auto;background-repeat:repeat;background-position:center top;color:#fff}
.pattern-navy .eyebrow{color:var(--sand)}

/* stat cell (borderless, hairline divider left — the v4 impact style) */
.stat{padding:0 clamp(14px,2vw,26px)}
.stat--divide{border-left:1px solid rgba(164,208,235,.26)}
.stat__big{font-weight:300;font-size:clamp(30px,4vw,52px);line-height:1;letter-spacing:-.02em;color:#fff}
.stat__big .mark{color:var(--sand);font-weight:400}
.stat__label{font-size:11.5px;color:#8FA3BC;margin-top:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;line-height:1.45}
/* light stat variant */
.stat--light .stat__big{color:var(--navy)}
.stat--light .stat__big .mark{color:var(--ocean)}
.stat--light .stat__label{color:var(--sand-ink)}

.chip{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:700;color:var(--navy);
  background:var(--cloud);border:1px solid var(--rule);border-radius:var(--r-pill);padding:7px 14px}
.chip--sand{background:rgba(207,189,163,.16);border-color:rgba(207,189,163,.5)}

/* ---------- imagery ---------- */
.media{position:relative;overflow:hidden;background:var(--rule);border-radius:var(--r-md)}
.media img{width:100%;height:100%;object-fit:cover}
.media--zoom img{transition:transform .55s var(--ease)}
.media--zoom:hover img{transform:scale(1.06)}
.scrim-b{position:absolute;inset:0;background:linear-gradient(to top,rgba(20,38,59,.86),rgba(20,38,59,0) 60%);pointer-events:none}
.scrim-full{position:absolute;inset:0;background:linear-gradient(180deg,rgba(11,26,43,.55) 0%,rgba(11,26,43,0) 26%,rgba(11,26,43,0) 54%,rgba(11,26,43,.72) 100%);pointer-events:none}
/* sand corner-notch device (from the v4 portrait) */
.notch{position:absolute;left:-12px;bottom:-12px;width:64px;height:64px;background:var(--sand);overflow:hidden;z-index:2}
.notch span{position:absolute;left:0;right:0;bottom:0;height:28px;background:var(--navy);
  clip-path:polygon(0 46%,50% 0,100% 46%,100% 100%,0 100%)}

/* ---------- nav ---------- */
.nav{position:relative;z-index:5}
.nav__inner{max-width:var(--maxw);margin:0 auto;padding:clamp(14px,2.2vw,24px) var(--pad-x);
  display:flex;align-items:center;justify-content:space-between;gap:16px}
.nav a[data-nav]{font-size:12.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase}

/* --- logo aspect ratio: do not remove ---------------------------------------
   The logo is a 5.31:1 wordmark (1200x226) and it is the FIRST flex child of
   .nav__inner. With the default flex-shrink:1 the flex algorithm squeezes it
   whenever the nav beside it is wide; and because of `img{max-width:100%}`
   near the top of this file, that squeeze caps the image's WIDTH while the
   inline `height:40px` is still forced. The result is a BROKEN ASPECT RATIO
   rather than an overflow -- the logo renders horizontally compressed.

   Measured at 375px before this rule: 182x40 rendered = 4.56:1 against a
   natural 5.31:1, an 86% squash. (The homepage was worse at 45%; it had no
   mobile nav at all, so the full desktop nav was eating the row.)

   flex:0 0 auto   stops the squeeze.
   max-width:none  makes the ratio unbreakable even if something squeezes it
                   again later -- it would overflow visibly instead of
                   silently distorting, which is the failure we want.
   flex-wrap       lets a narrow phone drop the CTA onto its own line instead
                   of overflowing the row.
   Reported by Hiroshi on mobile, 2026-10-05. */
.nav__inner{flex-wrap:wrap}
.nav__inner > a:first-child{flex:0 0 auto}
.nav__inner > a:first-child img{max-width:none}
/* !important: the <img> carries an inline style="height:40px", which beats a
   stylesheet selector regardless of specificity. 32px => 170px wide, so the
   logo and the CTA fit one row on a 375px phone instead of wrapping. */
@media(max-width:560px){.nav__inner > a:first-child img{height:32px !important}}
.nav--onDark a{color:#DCE2EA}
.nav--onDark a:hover{color:#fff}

/* ---------- reveal (progressive-enhancement; hidden state ONLY when .js present, so no-JS = visible) ---------- */
@media (prefers-reduced-motion:no-preference){
  html.js [data-reveal]{opacity:0;transform:translateY(22px);transition:opacity .7s var(--ease),transform .8s var(--ease)}
  html.js [data-reveal].in{opacity:1;transform:none}
}

/* — nav dropdown (Neighbourhoods) — */
.navdd{position:relative;display:inline-block}
.navdd__btn{font-family:inherit;font-size:12.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  background:none;border:0;padding:0;cursor:pointer;color:inherit;display:inline-flex;align-items:center;gap:7px}
.navdd__btn::after{content:"";width:5px;height:5px;border-right:1.7px solid currentColor;border-bottom:1.7px solid currentColor;
  transform:rotate(45deg) translateY(-2px);transition:transform .2s var(--ease,ease)}
.navdd:hover .navdd__btn::after,.navdd:focus-within .navdd__btn::after{transform:rotate(225deg) translateY(1px)}
.navdd__menu{position:absolute;top:100%;left:50%;margin-top:10px;transform:translateX(-50%) translateY(-6px);
  min-width:216px;background:#fff;border:1px solid var(--rule);border-radius:12px;
  box-shadow:0 26px 52px -26px rgba(25,46,71,.55);padding:7px;z-index:60;
  opacity:0;visibility:hidden;
  /* closing waits .28s so a cursor that clips the edge on its way down doesn't lose the menu;
     visibility trails the fade so the panel stays hit-testable while it closes and re-entering revives it */
  transition:opacity .18s ease,transform .18s ease,visibility 0s linear .18s}
.navdd:hover .navdd__menu,.navdd:focus-within .navdd__menu,.navdd.is-open .navdd__menu{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0);
  transition:opacity .18s ease,transform .18s ease,visibility 0s}
.navdd__menu::before{content:"";position:absolute;left:-12px;right:-12px;top:-14px;height:15px}
.navdd__menu a{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 13px;border-radius:8px;
  font-size:13.5px;font-weight:600;letter-spacing:0;text-transform:none;color:var(--navy);white-space:nowrap}
.navdd__menu a:hover{background:var(--lightsand);color:var(--ocean)}
.navdd__menu a.is-soon{color:var(--muted);cursor:default;pointer-events:none}
.navdd__menu .soon{font-size:10px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--sand-ink,#706B5C)}
.navdd__rule{border:0;border-top:1px solid var(--rule-soft);margin:7px 9px}
.nav--onDark .navdd__rule{border-top-color:rgba(255,255,255,.16)}
@media(max-width:900px){.navdd__menu{display:none}}

/* dark navs colour <a> only — the dropdown trigger is a <button> */
.nav--onDark .navdd__btn{color:#DCE2EA}
.nav--onDark .navdd:hover .navdd__btn,
.nav--onDark .navdd:focus-within .navdd__btn{color:#fff}

/* ---------- shared CTA card + footer ----------
   These were defined inline on every page (audit item D2: three footer
   implementations). Promoted here so new pages inherit them. The inline
   copies are intentionally left in place: they load after this file and
   carry identical values, so no existing page changes. Remove the inline
   copies in the D2 cleanup, not here.
   Note: the pattern URL is relative to THIS file (areas/). */
.ctacard{background-color:var(--navy);background-image:url(/designs/assets/pattern-navylight.png);background-size:460px auto;background-repeat:repeat;border-radius:14px;padding:clamp(28px,3.6vw,44px);color:#fff;display:flex;flex-direction:column;justify-content:center}
.ctacard .k{font-size:11.5px;font-weight:800;letter-spacing:.2em;color:var(--sand)}
.cta-title{font-weight:300;font-size:clamp(30px,3.6vw,38px);letter-spacing:-.03em;line-height:1.1;margin:12px 0 0}
.cta-title em{font-style:italic;font-weight:400;color:var(--sky)}
.ctacard .d{font-size:14px;color:#B9C9DB;line-height:1.6;margin:14px 0 0}
.ctabtns{display:flex;gap:12px;margin-top:24px;flex-wrap:wrap}
.ctabtn-sand{background:var(--sand);color:var(--navy);font-weight:800;font-size:15px;padding:14px 26px;border-radius:var(--r-sm)}
.ctabtn-sand:hover{color:var(--navy)}
.ctabtn-ghost{border:1px solid rgba(255,255,255,.4);color:#fff;font-weight:700;font-size:15px;padding:14px 26px;border-radius:var(--r-sm)}
.ctabtn-ghost:hover{color:#fff}
.arealink{border-bottom:1px solid var(--sand);padding-bottom:1px}
.arealink:hover{color:var(--ocean)}
.arealink--on{border-bottom:0;font-weight:800;color:var(--navy)}
.arealink--off{color:var(--muted);border-bottom:0}
.foot{border-top:1px solid var(--rule);display:flex;align-items:center;justify-content:space-between;gap:16px 24px;flex-wrap:wrap;padding-top:32px;padding-bottom:44px;margin-top:44px}
.foot .mid{font-size:13px;color:var(--body);margin-left:auto}
.foot .fine{flex-basis:100%;font-size:11.5px;color:var(--muted)}
.srcnote{margin-top:14px;font-size:12px;color:var(--muted)}

/* ---------- MyRealPage listing-search embed ----------
   #mrplistings_anchor is REQUIRED — the script appends its iframe to this
   id and silently no-ops without it. Only ONE embed per page: the script
   sets a global one-shot guard, so a second snippet does nothing. */
.embedwrap{min-height:420px}
#mrplistings_anchor iframe{width:100%;border:0;display:block}
.embedfall{border:1px dashed var(--rule);border-radius:14px;padding:clamp(22px,3vw,34px);text-align:center}
.embedfall .t{font-weight:700;color:var(--navy)}
.embedfall .d{font-size:14px;color:var(--body);margin-top:7px}

/* — FAQ accordions, all pages (2026-10-14) ————————————————————————
   Native <details>/<summary>: no script, keyboard and screen-reader
   support built in, and every answer stays in the HTML, which the
   FAQPage structured data needs (Google reads collapsed answers).
   Selectors are id/element-qualified on purpose: each page still has
   its own inline .faq / .faq-item / .faqgrid rules, and these must
   win over them regardless of order. One column everywhere; on the
   four area pages that puts the "Thinking about…" card below the
   questions, which is where it already sits in the markup. */
#faq.faqgrid,#faq .faqgrid,#faq+.faqgrid{grid-template-columns:1fr}  /* contact: #faq is the h2, the grid its sibling */
#faq.faqgrid{row-gap:clamp(32px,4vw,48px)}
#faq.faqgrid .ctacard .d{max-width:62ch}
details.faq,details.faq-item{border-bottom:1px solid var(--rule);padding:0}
details.faq:first-of-type,details.faq-item:first-of-type{border-top:1px solid var(--rule);margin-top:18px}
details.faq>summary,details.faq-item>summary{display:flex;align-items:center;justify-content:space-between;gap:20px;
  padding:18px 2px;cursor:pointer;list-style:none}
details.faq>summary::-webkit-details-marker,details.faq-item>summary::-webkit-details-marker{display:none}
details.faq>summary .q,details.faq-item>summary .q{margin:0;font-size:clamp(16.5px,1.45vw,18.5px);font-weight:700;letter-spacing:-.01em;line-height:1.35}
details.faq>summary::after,details.faq-item>summary::after{content:"";flex:none;width:8px;height:8px;
  border-right:2px solid var(--ocean);border-bottom:2px solid var(--ocean);transform:translateY(-3px) rotate(45deg);transition:transform .2s ease}
details.faq[open]>summary::after,details.faq-item[open]>summary::after{transform:translateY(2px) rotate(225deg)}
details.faq>summary:hover .q,details.faq-item>summary:hover .q{color:var(--ocean)}
details.faq>summary:focus-visible,details.faq-item>summary:focus-visible{outline:2px solid var(--ocean);outline-offset:3px;border-radius:4px}
details.faq>p,details.faq-item>p{max-width:72ch;margin:0 0 22px;font-size:15px;line-height:1.65}
/* "Expand all" (added by ui.js, so it never shows without the script that runs it) */
.faqtools{display:flex;justify-content:flex-end;margin-top:12px}
.faqtools~details:first-of-type{margin-top:8px}
.faqall{font:inherit;font-size:13.5px;font-weight:700;color:var(--ocean);background:none;border:0;padding:6px 2px;cursor:pointer;
  display:inline-flex;align-items:center;gap:8px}
.faqall::after{content:"";width:6px;height:6px;border-right:1.6px solid currentColor;border-bottom:1.6px solid currentColor;transform:translateY(-2px) rotate(45deg)}
.faqall[aria-expanded="true"]::after{transform:translateY(1px) rotate(225deg)}
.faqall:hover{text-decoration:underline;text-underline-offset:3px}
.faqall:focus-visible{outline:2px solid var(--ocean);outline-offset:3px;border-radius:4px}
@media(prefers-reduced-motion:reduce){details.faq>summary::after,details.faq-item>summary::after{transition:none}}

/* — Card-row carousels, four area pages (direction A, 2026-10-14) ————————
   Each "things to do" row is one sideways track inside the content width.
   Aaron, 2026-10-14: whole cards only (no slice of the next card), no
   running to the window edges, 4 across on desktop, and the arrows cycle.
   --v = cards across = the smaller of the row's card count (--n, set by
   ui.js) and what fits at this width (--base: 4 desktop, 2 tablet, 1 phone),
   so a row of 3 still fills the width. Without script the row still scrolls
   by swipe or trackpad. Selectors carry .row to beat each page's inline
   .cards4/.cards3. */
.row .track{--g:18px;--base:4;--v:min(var(--n, 99), var(--base));display:grid;grid-auto-flow:column;grid-template-columns:none;
  grid-auto-columns:calc((100% - (var(--v) - 1) * var(--g)) / var(--v));
  overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scrollbar-width:none;padding-bottom:4px}
.row .track::-webkit-scrollbar{display:none}
.row .track>*{scroll-snap-align:start;min-width:0}
@media(max-width:1020px){.row .track{--base:2}}
@media(max-width:540px){.row .track{--base:1}}
.row .track:focus-visible{outline:2px solid var(--ocean);outline-offset:4px;border-radius:14px}
/* one card style in every row: the few boxed .card items lose the box */
.row .track>.card{background:none;border:0;border-radius:0;overflow:visible}
/* big stat words ("Weekends") can overhang into the card's padding; clip at
   the card edge so they never make a row that fits scroll by a few px */
.row .track>.numcard{overflow:hidden}
/* places with no photo yet: a navy title tile in the photo's place */
.cardimg.cardtile{display:flex;flex-direction:column;justify-content:flex-end;padding:22px;background-color:var(--navy);
  background-image:url(/designs/assets/pattern-navylight.png);background-size:420px auto;background-position:center}
.cardtile .k{font-size:10.5px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--sand)}
.cardtile .cardname{font-weight:300;font-size:clamp(24px,2.3vw,30px);letter-spacing:-.02em;line-height:1.08;color:#fff;margin:8px 0 0}
/* arrows: real buttons; hidden when every card fits; they cycle, so never disabled */
.row .arrows[hidden]{display:none}
.row .arrows .arrow{font:inherit;font-weight:700;padding:0;cursor:pointer;background:var(--navy);border-color:var(--navy);color:#fff;
  transition:background .15s ease,color .15s ease,border-color .15s ease}
.row .arrows .arrow:hover:not(:disabled){background:var(--ocean);border-color:var(--ocean)}
.row .arrows .arrow:disabled{background:transparent;border-color:var(--rule);color:var(--muted);cursor:default}
.row .arrows .arrow:focus-visible{outline:2px solid var(--ocean);outline-offset:3px}

/* — Photo beside text (direction B, Aaron 2026-10-14) ————————————————
   Area pages: Neighbourhoods, Buying, Selling. About: Sellers, Buyers,
   Older homes. On desktop the photo sits beside the text and holds still
   (sticky) while a long list scrolls past; on phones it stacks with the
   text. The home photos are stock for launch, hotlinked like the other
   stock, and each one is on photo-swap-list.md to replace with real shots.
   .split--rev puts the photo on the right; --mid centres short text on it. */
.split{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(28px,4.5vw,72px);align-items:start;margin-top:clamp(22px,3vw,34px)}
.split--rev{grid-template-columns:minmax(0,7fr) minmax(0,5fr)}
.split--mid{align-items:center}
.split__ph{position:sticky;top:24px;margin:0;border-radius:16px;overflow:hidden;aspect-ratio:4/5;background:var(--rule)}
.split__ph--land{position:relative;aspect-ratio:4/3}
.split__ph img{width:100%;height:100%;object-fit:cover;display:block}
.split__q{position:absolute;left:0;right:0;bottom:0;padding:64px 22px 22px;background:linear-gradient(transparent,rgba(20,38,59,.9));
  color:#fff;font-weight:300;font-size:clamp(20px,1.9vw,25px);line-height:1.2;letter-spacing:-.01em}
.split__q b{display:block;font-size:10.5px;font-weight:800;letter-spacing:.16em;color:var(--sand);margin-bottom:8px}
.split>div>:first-child{margin-top:0}
.split .nbgrid{grid-template-columns:1fr;gap:0;margin-top:0}
.split .nb{border-top:1px solid var(--rule);padding:18px 0}
.split .nb:first-child{border-top:0;padding-top:0}
.split .bullets{margin-top:0}
@media(max-width:900px){
  .split,.split--rev{grid-template-columns:1fr}
  .split__ph{position:relative;top:auto;aspect-ratio:4/3;order:-1}  /* photo above its own text, so two photos never meet */
}
/* About: the four areas as photo links into the area pages */
.areatiles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;margin-top:24px;list-style:none;padding:0}
.areatile{display:block;text-decoration:none;color:inherit}
.areatile .im{display:block;aspect-ratio:4/5;border-radius:14px;overflow:hidden;background:var(--rule)}
.areatile .im img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s ease}
.areatile:hover .im img{transform:scale(1.04)}
.areatile .nm{display:block;font-weight:800;font-size:17px;color:var(--navy);margin-top:12px}
.areatile:hover .nm{color:var(--ocean)}
.areatile .ln{display:block;font-size:14px;line-height:1.55;color:var(--body);margin-top:4px}
.areatile:focus-visible{outline:2px solid var(--ocean);outline-offset:4px;border-radius:14px}
@media(max-width:900px){.areatiles{grid-template-columns:1fr 1fr}.areatile .im{aspect-ratio:1}}
@media(prefers-reduced-motion:reduce){.areatile .im img{transition:none}}

/* — Section headings, area pages + Schools (Aaron, 2026-10-14) —————————
   Heavier and larger, matching the homepage's "Homes sold in…" heading
   (900 weight, up to 46px, tight tracking). The emphasised second half
   keeps the ocean colour but drops the italic: a 900 italic isn't loaded,
   so the browser would fake one. h2.rowtitle outranks each page's inline
   .rowtitle rule; an inline font-size (e.g. "Explore nearby areas") still wins. */
h2.rowtitle{font-weight:900;font-size:clamp(28px,4.2vw,46px);letter-spacing:-.035em;line-height:1.02}
h2.rowtitle em{font-style:normal;font-weight:900;color:var(--ocean)}
/* Same heading treatment on every other page's section headings (Aaron,
   2026-10-14: "apply the bold headings to all pages"). Japanese headings
   ([lang]) keep their own size and weight. Emphasis words keep their colour
   (ocean, or sky on navy panels) and go upright for the same reason as above. */
h2.h2:not([lang]){font-weight:900;font-size:clamp(28px,4.2vw,46px);letter-spacing:-.035em;line-height:1.02}
h2.h2:not([lang]) em{font-style:normal;font-weight:900}
h2.cta-title{font-weight:900;letter-spacing:-.035em;line-height:1.04}
h2.cta-title em{font-style:normal;font-weight:900}