/* The Communities page (/communities, communities.html; cards generated by scripts/build-communities.js).
   Deep teal, metallic gold and warm white: the hero with Ekin's Tampa skyline and the eight lifestyle icons,
   then one carousel per county (communities.js) of community cards that open Home Search. */
.communities-page{--cm-teal:#004F55;--cm-teal-deep:#003F45;--cm-navy:#002F34;--cm-gold:#D6A84D;--cm-gold-bright:#E8C370;--cm-gold-text:#B8892F;--cm-gold-deep:#86621F;--cm-ink:#12262B;--cm-muted:#4F5E5C;--cm-paper:#FBF9F5;--cm-line:rgba(0,79,85,.14);background:var(--cm-paper)}
.cm-main{display:block;overflow:hidden;background:linear-gradient(180deg,#FBF9F5 0%,#F8F5EF 55%,#F4EFE6 100%);color:var(--cm-ink)}

/* ---- Hero: Ekin's Tampa skyline across the whole hero (Ekin's design, 2026-10-10). A light warm-white wash from
   the side the words start on (about a third lighter than the drone-frame hero had, so the skyline shows through),
   a soft glow just behind the words for reading, and warm white rising under the icons. The wash comes from the
   right in Arabic (--cm-wash-angle). On computers the wash is measured from where the 1288px column starts
   (--cm-wash-at), so it covers the words the same way at every width (at 1440px: from .9 at the edge to clear at
   55%). The photo is placed by --cm-photo-x and --cm-photo-y: on computers it fills the width, and y keeps the
   tallest tower's top just inside the hero as the screen widens. ---- */
.cm-hero{--cm-wash-angle:90deg;--cm-wash-at:max(0px,50% - 644px);--cm-photo-x:30%;--cm-photo-y:30%;position:relative;isolation:isolate;overflow:hidden;display:flex;min-height:clamp(500px,41vw,620px);background:#dfe8ec}
.cm-hero-media{position:absolute;inset:0;z-index:-2;display:block}
.cm-hero-media img{display:block;width:100%;height:100%;object-fit:cover;object-position:var(--cm-photo-x) var(--cm-photo-y)}
.cm-hero::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:
  linear-gradient(var(--cm-wash-angle),rgba(251,249,245,.9) 0,rgba(251,249,245,.84) calc(var(--cm-wash-at) + 97px),rgba(251,249,245,.7) calc(var(--cm-wash-at) + 241px),rgba(251,249,245,.48) calc(var(--cm-wash-at) + 385px),rgba(251,249,245,.26) calc(var(--cm-wash-at) + 500px),rgba(251,249,245,.08) calc(var(--cm-wash-at) + 615px),rgba(251,249,245,0) calc(var(--cm-wash-at) + 716px)),
  linear-gradient(0deg,#FBF9F5 0,rgba(251,249,245,.97) 48px,rgba(251,249,245,.86) 92px,rgba(251,249,245,.55) 124px,rgba(251,249,245,.22) 160px,rgba(251,249,245,0) 204px)}
.cm-hero-inner{display:flex;flex-direction:column;justify-content:space-between;gap:36px;width:100%;max-width:1288px;margin:0 auto;padding:clamp(44px,6vw,96px) 24px clamp(26px,2.6vw,40px)}
/* The glow behind the words: a soft, blurred patch of warm white just around the copy, so the words read on any
   part of the skyline (it follows the copy at every width and in Arabic). It sits above the wash and under the
   words (.cm-hero is isolated; .cm-hero-copy takes no z-index). */
.cm-hero-copy{position:relative;max-width:min(500px,52%)}
.cm-hero-copy::before{content:"";position:absolute;z-index:-1;inset:-32px -28px -30px;border-radius:44px;background:linear-gradient(180deg,rgba(251,249,245,.52) 0,rgba(251,249,245,.44) 110px);filter:blur(22px);pointer-events:none}
.cm-hero-title{margin:0;color:var(--cm-navy);font:500 clamp(46px,calc(3.2vw + 20px),72px)/1.04 "Playfair Display",Georgia,serif;letter-spacing:-.02em;text-wrap:balance}
.cm-hero-kicker{display:block;margin:0 0 20px;color:var(--cm-gold-deep);font:600 13px/1.2 "DM Sans",Arial,sans-serif;letter-spacing:.3em;text-transform:uppercase}
.cm-hero-text{max-width:430px;margin:22px 0 0;color:#203337;font:400 clamp(16px,1.25vw,18.5px)/1.52 Manrope,Arial,sans-serif}
/* The lifestyle row: decorative gold icons with small labels (not links, not buttons); on computers one row of
   eight with thin dividers between them. */
.cm-lifestyles{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:0;margin:0;padding:0;list-style:none}
.cm-lifestyle{display:flex;flex-direction:column;align-items:center;gap:10px;min-width:0;padding:0 4px;text-align:center;color:var(--cm-ink);font:700 11px/1.3 "DM Sans",Arial,sans-serif;letter-spacing:.16em;text-transform:uppercase}
.cm-lifestyle+.cm-lifestyle{border-inline-start:1px solid rgba(18,38,43,.09)}
.cm-lifestyle svg{flex:none;width:48px;height:48px;color:var(--cm-gold-text)}
.cm-lifestyle span{max-width:100%;overflow-wrap:break-word}

/* ---- County sections: serif heading with a thin gold rule, arrows on the right, the card track ---- */
.cm-directory{padding:clamp(30px,3.6vw,52px) 0 clamp(56px,6vw,88px)}
.cm-county{max-width:1288px;margin:0 auto;padding:0 24px}
.cm-county+.cm-county{margin-top:clamp(30px,3.4vw,46px)}
.cm-county-head{display:flex;align-items:center;justify-content:space-between;gap:12px 20px;margin:0 0 16px}
.cm-county-title{position:relative;flex:1 1 auto;min-width:0;margin:0;padding-inline-start:16px;color:var(--cm-navy);font:500 clamp(23px,2.2vw,31px)/1.2 "Playfair Display",Georgia,serif;letter-spacing:-.01em}
.cm-county-title::before{content:"";position:absolute;inset-inline-start:0;top:.14em;bottom:.14em;width:3px;border-radius:2px;background:linear-gradient(180deg,var(--cm-gold-bright),var(--cm-gold) 55%,var(--cm-gold-text))}
.cm-arrows{display:flex;flex:none;gap:10px}
.cm-arrow{display:grid;place-items:center;width:44px;height:44px;padding:0;border:1.5px solid var(--cm-gold);border-radius:50%;background:#fff;color:var(--cm-gold-text);cursor:pointer;box-shadow:0 6px 16px rgba(60,45,20,.12),0 1px 3px rgba(60,45,20,.1);transition:border-color .2s ease-out,background-color .2s ease-out,box-shadow .2s ease-out,opacity .2s ease-out}
.cm-arrow svg{width:20px;height:20px}
.cm-arrow:hover:not(:disabled){border-color:var(--cm-gold-text);background:#FFF9EC;box-shadow:0 9px 22px rgba(60,45,20,.18),0 1px 3px rgba(60,45,20,.12)}
.cm-arrow:disabled{opacity:.4;cursor:default;box-shadow:none}
.cm-arrow:focus-visible{outline:3px solid var(--cm-teal);outline-offset:3px}
/* Native horizontal scrolling with scroll snap: swipe works by itself, the arrows move one view at a time.
   The track's own padding keeps the cards' shadows and focus rings from being clipped (44px below: the
   hover shadow reaches 42px under a card); the negative margin keeps the layout where it was. */
.cm-track{display:grid;grid-auto-flow:column;grid-auto-columns:calc((100% - 60px)/4);gap:20px;margin:-10px -10px -44px;padding:10px 10px 44px;list-style:none;overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scroll-padding-inline:10px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.cm-track::-webkit-scrollbar{display:none}
.cm-item{min-width:0;scroll-snap-align:start;container-type:inline-size}

/* ---- The card: a fixed 3:2 box, the photo (or plain deep teal), a deep-teal scrim under the name ----
   Stacking: .cc is isolated; the media sits at z-index -2 and the scrim (.cc-copy::before) at -1; the hover
   layer (.cc-hover, no z-index) paints above the scrim and below the name, ZIPs and arrow, which stay sharp.
   .cc-copy must not get a z-index, transform, filter or opacity, or the scrim is trapped inside it. */
.cc{--cc-zip-line:13px;--cc-name-size:clamp(18px,7.3cqi,23px);position:relative;display:block;aspect-ratio:3/2;overflow:hidden;isolation:isolate;border-radius:12px;background:#003F42;color:#fff;text-decoration:none;box-shadow:0 12px 26px -14px rgba(0,47,52,.45),0 2px 6px rgba(0,47,52,.08);transition:box-shadow .32s ease-out}
.cc-media{position:absolute;inset:0;z-index:-2;display:block;transform:scale(1);filter:blur(0);transition:transform .32s ease-out,filter .32s ease-out}
.cc-art{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover}
.cc-hover{position:absolute;inset:0;pointer-events:none}
.cc-veil{position:absolute;inset:0;background:#003F42;opacity:0;pointer-events:none;transition:opacity .32s ease-out}
/* The mark is centred in the photo ABOVE the name block (a line of name, the ZIP line, the gaps), never on the name. */
.cc-logo{position:absolute;inset:0 0 calc(14px + var(--cc-zip-line) + 12px + 1.08 * var(--cc-name-size)) 0;width:auto;height:46%;max-width:none;margin:auto;opacity:0;transform:scale(.92);pointer-events:none;transition:opacity .32s ease-out,transform .32s ease-out}
.cc-copy{position:absolute;left:16px;right:56px;bottom:14px;display:flex;flex-direction:column;align-items:flex-start;gap:6px}
/* A card without a ZIP line keeps the line's space, so every name in a row sits at the same height. */
.cc-copy--solo{padding-bottom:calc(var(--cc-zip-line) + 6px)}
.cc-copy::before{content:"";position:absolute;z-index:-1;left:-16px;right:-56px;bottom:-14px;top:-54px;pointer-events:none;background:linear-gradient(to bottom,rgba(0,47,52,0) 0,rgba(0,47,52,.26) 23px,rgba(0,47,52,.62) 47px,rgba(0,47,52,.88) 76px,rgba(0,47,52,.96) 104px)}
.cc-name{max-width:100%;color:#fff;font:500 var(--cc-name-size)/1.08 "Playfair Display",Georgia,serif;letter-spacing:-.005em;overflow-wrap:anywhere;text-shadow:0 1px 10px rgba(0,30,34,.35)}
.cc-zips{color:rgba(255,255,255,.88);font:600 11px/var(--cc-zip-line) "DM Sans",Arial,sans-serif;letter-spacing:.08em;white-space:nowrap}
.cc-go{position:absolute;right:14px;bottom:14px;display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:var(--cm-gold);color:var(--cm-navy);box-shadow:0 4px 12px rgba(0,30,34,.3);transition:background-color .32s ease-out,box-shadow .32s ease-out}
.cc-go svg{width:17px;height:17px}
.cc:focus-visible{outline:3px solid var(--cm-teal);outline-offset:3px}
/* Hover (a mouse or trackpad) and keyboard focus: the image zooms and softens, the deep teal veil and the
   gold SBE mark fade in, the arrow brightens. Touch screens keep the normal card. CSS only. */
@media (hover:hover) and (pointer:fine){
  .cc:hover{box-shadow:0 20px 38px -16px rgba(0,47,52,.6),0 3px 8px rgba(0,47,52,.12)}
  .cc:hover .cc-media{transform:scale(1.05);filter:blur(3px)}
  .cc:hover .cc-veil{opacity:.82}
  .cc:hover .cc-logo{opacity:1;transform:scale(1)}
  .cc:hover .cc-go{background:var(--cm-gold-bright);box-shadow:0 0 0 4px rgba(232,195,112,.3),0 4px 14px rgba(0,30,34,.35)}
}
.cc:focus-visible{box-shadow:0 20px 38px -16px rgba(0,47,52,.6),0 3px 8px rgba(0,47,52,.12)}
.cc:focus-visible .cc-media{transform:scale(1.05);filter:blur(3px)}
.cc:focus-visible .cc-veil{opacity:.82}
.cc:focus-visible .cc-logo{opacity:1;transform:scale(1)}
.cc:focus-visible .cc-go{background:var(--cm-gold-bright);box-shadow:0 0 0 4px rgba(232,195,112,.3),0 4px 14px rgba(0,30,34,.35)}

/* ---- A card without a photo (yet): plain deep teal, lit softly from above with slightly darker edges, and a
   faint gold edge; no drawing, no pattern, no logo. The name and ZIPs are exactly where a photo card has them.
   The colour is the media layer, so the hover zoom and blur act on it as they do on a photo. ---- */
.cc--plain .cc-media{border-radius:inherit;background-color:#003F42;background-image:
  radial-gradient(120% 120% at 50% 35%,rgba(0,20,24,0) 55%,rgba(0,20,24,.28) 100%),
  radial-gradient(75% 95% at 72% 0%,rgba(96,174,167,.4) 0%,rgba(96,174,167,.12) 46%,rgba(96,174,167,0) 76%),
  linear-gradient(180deg,#00494E 0%,#003F44 55%,#00323A 100%)}
.cc--plain .cc-media::after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 0 0 1px rgba(232,195,112,.2),inset 0 1px 0 rgba(255,255,255,.07)}

/* ---- Widths: about four cards on computers, three or two on tablets, one and the edge of the next on phones ---- */
/* Attribution for a licensed photo (only when a card has a credit). */
.cm-credits{max-width:1288px;margin:clamp(28px,3vw,40px) auto 0;padding:0 24px;color:var(--cm-muted);font:400 12px/1.6 Manrope,Arial,sans-serif}

/* Wide screens: the photo is cropped taller, so it moves up less and the towers keep their tops. */
@media (min-width:1700px){.cm-hero{--cm-photo-y:22%}}
@media (min-width:2100px){.cm-hero{--cm-photo-y:14%}}
@media (max-width:1079px){.cm-track{grid-auto-columns:calc((100% - 40px)/3)}}
@media (max-width:1023px){
  .cm-hero-copy{max-width:min(560px,62%)}
  /* Tablets: two rows of four, no dividers. */
  .cm-lifestyles{grid-template-columns:repeat(4,minmax(0,1fr));gap:18px 14px;max-width:640px}
  .cm-lifestyle{padding:0;font-weight:600}
  .cm-lifestyle+.cm-lifestyle{border-inline-start:0}
  .cm-lifestyle svg{width:44px;height:44px}
  .cm-hero{--cm-photo-x:10%;--cm-photo-y:50%}
  .cm-hero::before{background:
    linear-gradient(var(--cm-wash-angle),rgba(251,249,245,.9) 0,rgba(251,249,245,.84) 97px,rgba(251,249,245,.7) 241px,rgba(251,249,245,.48) 385px,rgba(251,249,245,.26) 500px,rgba(251,249,245,.08) 615px,rgba(251,249,245,0) 716px),
    linear-gradient(0deg,#FBF9F5 0%,rgba(251,249,245,.97) 4%,rgba(251,249,245,.92) 24%,rgba(251,249,245,.5) 36%,rgba(251,249,245,0) 48%)}
}
@media (max-width:879px){.cm-track{grid-auto-columns:calc((100% - 20px)/2)}}
@media (max-width:699px){
  /* Phones: the portrait crop, the words on the sky at the top, the icons on warm white at the bottom. */
  .cm-hero{min-height:0}
  .cm-hero{--cm-photo-x:50%;--cm-photo-y:30%}
  .cm-hero::before{background:linear-gradient(180deg,rgba(251,249,245,.86) 0%,rgba(251,249,245,.7) 26%,rgba(251,249,245,.5) 40%,rgba(251,249,245,.14) 48%,rgba(251,249,245,0) 54%,rgba(251,249,245,0) 60%,rgba(251,249,245,.9) 72%,rgba(251,249,245,.98) 80%,#FBF9F5 94%)}
  .cm-hero-inner{gap:0;padding:34px 16px 22px}
  .cm-hero-copy{max-width:none}
  .cm-hero-copy::before{inset:-28px -24px -32px}
  .cm-hero-title{font-size:clamp(38px,11vw,48px)}
  .cm-hero-kicker{margin-bottom:12px;font-size:12px}
  .cm-hero-text{margin-top:14px;font-size:15.5px;line-height:1.55}
  /* Columns as wide as their longest word needs, so a label never breaks inside a word ("Construction"). */
  .cm-lifestyles{grid-template-columns:repeat(4,auto);gap:16px 6px;margin-top:clamp(150px,52vw,250px);max-width:none}
  .cm-lifestyle{gap:7px;font-size:10px;letter-spacing:.06em}
  .cm-lifestyle svg{width:36px;height:36px}
  .cm-county,.cm-credits{padding:0 16px}
  .cm-county-head{margin-bottom:12px}
  .cm-county-title{font-size:23px}
}
@media (max-width:559px){.cm-track{grid-auto-columns:84%;gap:14px}}
@media (max-width:379px){.cm-lifestyles{column-gap:2px}.cm-lifestyle{letter-spacing:.02em}}
@media (max-width:359px){.cm-arrows{gap:8px}.cm-arrow{width:40px;height:40px}}

/* ---- Right to left (Arabic): the carousel follows the page, so Ekin's first card sits at the right under the
   heading and the cards run leftwards; Previous is on the right and points right, Next on the left points left
   (communities.js measures the RTL track from its right edge). Each card reads right to left: name and ZIPs on
   the right, the arrow on the left, pointing left. ---- */
[dir="rtl"] .cm-hero{--cm-wash-angle:270deg;--cm-photo-x:70%}
[dir="rtl"] .cm-arrow svg{transform:scaleX(-1)}
/* The card is right-to-left, so flex-start is its right edge: the words sit on the right, opposite the arrow. */
[dir="rtl"] .cc-copy{left:56px;right:16px;align-items:flex-start}
[dir="rtl"] .cc-copy::before{left:-56px;right:-16px}
[dir="rtl"] :is(.cc-name,.cc-zips){direction:ltr;unicode-bidi:isolate;text-align:right}
[dir="rtl"] .cc-go{left:14px;right:auto}
[dir="rtl"] .cc-go svg{transform:scaleX(-1)}
[dir="rtl"] .cc--plain .cc-media{background-image:
  radial-gradient(120% 120% at 50% 35%,rgba(0,20,24,0) 55%,rgba(0,20,24,.28) 100%),
  radial-gradient(75% 95% at 28% 0%,rgba(96,174,167,.4) 0%,rgba(96,174,167,.12) 46%,rgba(96,174,167,0) 76%),
  linear-gradient(180deg,#00494E 0%,#003F44 55%,#00323A 100%)}
@media (max-width:1023px){[dir="rtl"] .cm-hero{--cm-photo-x:90%}}
@media (max-width:699px){[dir="rtl"] .cm-hero{--cm-photo-x:50%}}
/* Arabic, Chinese, Japanese and Korean type: no tracking or capitals in Arabic, light tracking in Chinese and Japanese, never under 11px. */
:lang(ar) :is(.cm-hero-kicker,.cm-lifestyle){letter-spacing:0;text-transform:none}
:lang(ar) .cm-lifestyle,:lang(zh-CN) .cm-lifestyle,:lang(ja) .cm-lifestyle,:lang(ko) .cm-lifestyle{font-size:12px}
:lang(ar) .cm-hero-kicker,:lang(zh-CN) .cm-hero-kicker,:lang(ja) .cm-hero-kicker,:lang(ko) .cm-hero-kicker{font-size:14px}
:is(:lang(zh-CN),:lang(ja),:lang(ko)) :is(.cm-hero-kicker,.cm-lifestyle){letter-spacing:.04em}
:lang(ar) .cm-hero-title,:lang(zh-CN) .cm-hero-title,:lang(ja) .cm-hero-title,:lang(ko) .cm-hero-title{line-height:1.25;letter-spacing:0}

/* ---- Reduced motion: no zoom, no scale, no transitions (the veil and the mark simply appear) ---- */
@media (prefers-reduced-motion:reduce){
  .cc,.cc-media,.cc-veil,.cc-logo,.cc-go,.cm-arrow{transition:none}
  .cc-media,.cc:hover .cc-media,.cc:focus-visible .cc-media{transform:none}
  .cc-logo,.cc:hover .cc-logo,.cc:focus-visible .cc-logo{transform:none}
}
@media (forced-colors:active){.cc:focus-visible{outline-color:Highlight}.cm-arrow{border-color:ButtonText}}