/* ATREZZO / Communities directory · 2026 editorial refresh
   Scoped to /neighborhoods/ only; no impact on the immersive homepage. */
.ci-page{
 --ci-ink:#161819;--ci-muted:#706e68;--ci-gold:#b69a69;
 width:100%;overflow:clip;background:#f9f8f5;color:var(--ci-ink);
}
.ci-page *, .ci-page *::before,.ci-page *::after{box-sizing:border-box}
.ci-page h1,.ci-page h2,.ci-page h3{
 font-family:var(--sans,Arial,sans-serif);font-weight:400;letter-spacing:-.058em;
}
.ci-page a{text-decoration:none}
.ci-page a:focus-visible{outline:2px solid #c19b61;outline-offset:5px}
.ci-line{display:inline-block;width:33px;height:1px;background:currentColor;vertical-align:middle}
.ci-hero{
 min-height:min(790px,calc(100svh - 86px));
 display:grid;grid-template-columns:49% 51%;
 background:#111417;color:#fff;
}
.ci-hero__story{
 display:flex;flex-direction:column;align-items:flex-start;justify-content:center;
 min-width:0;padding:clamp(70px,8vw,138px) clamp(40px,6.1vw,115px) 47px;
}
.ci-hero__eyebrow{
 display:flex;gap:14px;align-items:center;flex-wrap:wrap;
 font-size:10px;font-weight:500;letter-spacing:.16em;line-height:1.7;color:#d0b682;
}
.ci-hero__eyebrow .ci-separator{color:#ffffff7e}
.ci-hero__story h1{
 color:#fff;font-size:clamp(67px,7.3vw,121px);line-height:.96;
 margin:clamp(44px,6vh,82px) 0 35px;
}
.ci-hero__story h1 em{font-style:normal;color:#dfd5c5}
.ci-hero__story>p{
 max-width:550px;color:#ffffffb6;
 font-size:clamp(15px,1.14vw,18px);line-height:1.8;
 margin:0 0 clamp(30px,4vh,53px);
}
.ci-hero__explore{
 display:inline-flex;align-items:center;gap:28px;
 padding:0 0 15px;border-bottom:1px solid #c6af82;
 color:#fff;font-size:12px;font-weight:500;letter-spacing:.025em;
 transition:color .24s ease,gap .24s ease;
}
.ci-hero__explore span{font-size:23px;line-height:1;color:#cfaf77}
.ci-hero__explore:hover{color:#ebd2a4;gap:39px}
.ci-hero__foot{
 margin-top:auto;padding-top:clamp(65px,8vh,135px);width:100%;
 display:flex;align-items:center;justify-content:space-between;
 gap:22px;border-bottom:1px solid #ffffff30;
 padding-bottom:18px;font-size:9px;line-height:1.6;
 letter-spacing:.14em;color:#ffffff9f;
}
.ci-hero__visual{position:relative;min-height:560px;overflow:hidden;isolation:isolate}
.ci-hero__visual img{
 display:block;position:absolute;inset:0;
 width:100%;height:100%;object-fit:cover;object-position:center;
 filter:saturate(.92) contrast(1.02);
}
.ci-hero__visual:after{
 content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
 background:linear-gradient(0deg,#090c0c77,transparent 32%);
}
.ci-hero__visual-label{
 position:absolute;left:clamp(24px,3vw,58px);bottom:36px;z-index:2;
 display:flex;align-items:center;gap:17px;
 font-size:10px;letter-spacing:.18em;font-weight:500;color:#fff;
}
.ci-hero__visual-label span{font-size:18px;color:#e9d1a4}
.ci-introduction{
 display:grid;grid-template-columns:24% 1fr;gap:6%;
 padding:clamp(95px,10vw,180px) var(--gutter);
 scroll-margin-top:100px;
}
.ci-introduction__eyebrow{
 display:flex;gap:17px;align-items:center;align-self:start;
 padding-top:12px;color:#987950;white-space:nowrap;
 font-size:10px;font-weight:500;letter-spacing:.18em;
}
.ci-introduction__body{min-width:0}
.ci-introduction h2{
 font-size:clamp(48px,5.5vw,91px);line-height:1.075;
 margin:0 0 34px;
}
.ci-introduction h2 em{font-style:normal;color:#978974}
.ci-introduction p{
 max-width:630px;font-size:15px;line-height:1.8;
 color:var(--ci-muted);margin:0;
}
.ci-spotlights{
 padding:0 var(--gutter) clamp(95px,9vw,155px);
}
.ci-section-head{
 display:flex;align-items:end;justify-content:space-between;gap:35px;
 border-top:1px solid #c9c4b9;
 padding-top:27px;margin-bottom:clamp(38px,5vw,75px);
}
.ci-section-kicker{
 color:#9e8155;font-size:10px;font-weight:600;
 letter-spacing:.17em;line-height:1.5;
}
.ci-section-head h2{
 font-size:clamp(34px,3.55vw,61px);line-height:1.13;
 margin:18px 0 0;
}
.ci-section-range{
 padding-bottom:8px;flex-shrink:0;
 color:#2f302e;font-size:11px;
 letter-spacing:.1em;white-space:nowrap;
}
.ci-section-range span{color:#98938a}
.ci-spotlights__grid{
 display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
 gap:clamp(52px,5.5vw,90px) clamp(22px,2.6vw,50px);
}
.ci-card{
 display:block;min-width:0;color:var(--ci-ink);
}
.ci-card__visual{
 position:relative;display:block;overflow:hidden;
 background:#d5d5cd;isolation:isolate;
}
.ci-spotlights .ci-card--large .ci-card__visual{aspect-ratio:1.43}
.ci-spotlights .ci-card--medium .ci-card__visual{aspect-ratio:1.7}
.ci-card__visual img{
 display:block;width:100%;height:100%;object-fit:cover;object-position:center;
 transform:scale(1);transition:transform 1s cubic-bezier(.18,.7,.25,1);
}
.ci-card:hover .ci-card__visual img,
.ci-card:focus-visible .ci-card__visual img{transform:scale(1.045)}
.ci-card__visual:after{
 content:"";position:absolute;inset:0;pointer-events:none;z-index:1;
 background:linear-gradient(180deg,#080b0c4a,transparent 29%,transparent 70%,#080b0c31);
}
.ci-card__count{
 position:absolute;z-index:2;left:25px;top:24px;
 color:#fff;font-size:10px;letter-spacing:.13em;font-weight:500;
}
.ci-card__visual-action{
 position:absolute;z-index:2;right:23px;top:20px;
 display:flex;align-items:center;justify-content:center;
 width:40px;height:40px;border:1px solid #ffffff8a;border-radius:50%;
 color:#fff;transition:background .25s ease,color .25s ease;
}
.ci-card__visual-action svg{width:19px;height:19px}
.ci-card:hover .ci-card__visual-action,.ci-card:focus-visible .ci-card__visual-action{
 background:#fff;color:#20221f;
}
.ci-card__content{padding:23px 0 0}
.ci-card__heading{
 display:flex;align-items:center;justify-content:space-between;
 gap:15px;
}
.ci-card__heading h3{
 font-size:clamp(31px,3.15vw,53px);line-height:1.08;margin:0;
 color:#1a1c1d;
}
.ci-card__arrow{display:none}
.ci-card__content p{
 max-width:560px;margin:15px 0 22px;
 color:#6e6e69;font-size:13px;line-height:1.7;
}
.ci-card__link{
 display:inline-block;border-bottom:1px solid #82765e;
 padding-bottom:8px;font-size:10px;font-weight:600;
 letter-spacing:.11em;color:#635542;
 transition:color .2s ease,border-color .2s ease;
}
.ci-card:hover .ci-card__link{color:#1b1d1c;border-color:#1b1d1c}
.ci-more{
 padding:clamp(88px,8vw,140px) 0;
 background:#eceae5;
}
.ci-more__inner{padding:0 var(--gutter)}
.ci-more .ci-section-head{border-color:#c5c1b9}
.ci-more__grid{
 display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
 gap:clamp(45px,4.4vw,75px) clamp(17px,1.9vw,34px);
}
.ci-more .ci-card__visual{aspect-ratio:1.32}
.ci-more .ci-card__content{padding-top:18px}
.ci-more .ci-card__heading h3{
 font-size:clamp(25px,2.2vw,37px);
 letter-spacing:-.048em;
}
.ci-more .ci-card__content p{font-size:12px;line-height:1.65;margin:14px 0 18px}
.ci-more .ci-card__count{left:17px;top:17px}
.ci-more .ci-card__visual-action{top:13px;right:14px;width:34px;height:34px}
.ci-more .ci-card__visual-action svg{width:17px;height:17px}
.ci-next{
 background:#111416;color:#fff;
 padding:clamp(90px,9vw,150px) var(--gutter);
}
.ci-next .ci-section-kicker{color:#c1a879}
.ci-next__body{
 display:grid;grid-template-columns:1.35fr .7fr;align-items:end;
 gap:clamp(60px,8vw,135px);
 margin-top:30px;
}
.ci-next h2{
 font-size:clamp(45px,5.7vw,93px);line-height:1.08;
 margin:0;color:#fff;
}
.ci-next__aside p{
 color:#ffffffaa;font-size:14px;line-height:1.85;
 max-width:450px;margin:0 0 35px;
}
.ci-next__links{display:flex;flex-wrap:wrap;gap:18px 35px}
.ci-next__links a{
 display:inline-flex;align-items:center;gap:18px;white-space:nowrap;
 color:#fff;border-bottom:1px solid #d9c3969a;padding-bottom:13px;
 font-size:12px;font-weight:500;
 transition:color .2s ease;
}
.ci-next__links a:hover{color:#e4cca0}
.ci-next__links svg{width:19px;height:19px}
.ci-empty{padding:90px var(--gutter)}
@media(max-width:1120px){
 .ci-hero{grid-template-columns:50% 50%}
 .ci-hero__story{padding-inline:clamp(32px,5vw,64px)}
 .ci-hero__story h1{font-size:clamp(60px,7.3vw,88px)}
 .ci-hero__foot{flex-wrap:wrap}
 .ci-more__grid{grid-template-columns:repeat(2,minmax(0,1fr))}
 .ci-next__body{grid-template-columns:1fr 1fr;gap:35px}
}
@media(max-width:767px){
 .ci-hero{display:flex;flex-direction:column-reverse;min-height:0}
 .ci-hero__visual{height:47svh;min-height:300px}
 .ci-hero__story{padding:56px 24px 33px;min-height:500px}
 .ci-hero__story h1{font-size:clamp(65px,13vw,94px);margin:27px 0 25px}
 .ci-hero__story>p{font-size:14px;line-height:1.75;max-width:480px;margin-bottom:25px}
 .ci-hero__explore{font-size:11px}
 .ci-hero__foot{padding-top:75px;font-size:8px}
 .ci-hero__visual-label{left:24px;bottom:22px;font-size:9px}
 .ci-introduction{grid-template-columns:1fr;gap:27px;padding:80px 24px 90px}
 .ci-introduction h2{font-size:clamp(47px,9.3vw,67px)}
 .ci-introduction p{font-size:14px}
 .ci-spotlights{padding:0 24px 85px}
 .ci-section-head{gap:17px;margin-bottom:35px}
 .ci-section-head h2{font-size:clamp(34px,7.5vw,49px);margin-top:12px}
 .ci-section-range{font-size:9px}
 .ci-spotlights__grid,.ci-more__grid{grid-template-columns:1fr;gap:47px}
 .ci-spotlights .ci-card--large .ci-card__visual,
 .ci-spotlights .ci-card--medium .ci-card__visual,
 .ci-more .ci-card__visual{aspect-ratio:1.35}
 .ci-card__heading h3,.ci-more .ci-card__heading h3{font-size:clamp(31px,7vw,45px)}
 .ci-card__content{padding-top:18px}
 .ci-card__content p{font-size:13px;margin:12px 0 18px}
 .ci-more{padding:78px 0}
 .ci-more__inner{padding:0 24px}
 .ci-next{padding:85px 24px 95px}
 .ci-next__body{grid-template-columns:1fr;gap:32px}
 .ci-next h2{font-size:clamp(43px,8.9vw,63px)}
 .ci-next__aside p{font-size:14px}
}
@media(max-width:430px){
 .ci-hero__story{min-height:485px}
 .ci-hero__eyebrow{font-size:8px;gap:10px}
 .ci-hero__foot{gap:10px 22px}
 .ci-introduction h2{font-size:clamp(41px,10.8vw,52px)}
 .ci-card__heading h3,.ci-more .ci-card__heading h3{font-size:30px}
 .ci-card__visual-action{width:35px;height:35px}
 .ci-section-head{align-items:start}
}
@media(prefers-reduced-motion:reduce){
 .ci-card__visual img,.ci-card__visual-action,
 .ci-card__link,.ci-hero__explore,.ci-next__links a{transition:none}
 .ci-card:hover .ci-card__visual img{transform:none}
}

/* SVG-only editorial arrows: never rely on emoji-capable Unicode glyphs. */
.ci-hero__explore span svg{width:19px;height:19px;transform:rotate(90deg);stroke:currentColor}
.ci-hero__visual-label span svg{width:19px;height:19px;stroke:currentColor}