/* Area + city craft finish — aligns with homepage / service polish */

.area-landing-page{
  --area-soft:#f3ebe0;
  --area-panel:#fcfaf5;
  --area-moss-soft:#e7efe5;
}
.area-landing-page .page-hero.service-page-hero,
.area-landing-page .service-page-hero{
  padding:clamp(44px,6.5vw,80px) var(--gutter) clamp(36px,5vw,56px);
  background:
    radial-gradient(ellipse at 12% 0%,rgba(201,137,74,.14),transparent 46%),
    linear-gradient(180deg,#fbf7f0,#f3ebe0);
  border-bottom:1px solid var(--line-strong);
  color:var(--pine);
}
.area-landing-page .service-page-hero .eyebrow{color:var(--oak)}
.area-landing-page .service-page-hero h1{
  font:600 clamp(38px,5vw,68px)/1.05 var(--serif);
  letter-spacing:-.03em;
  text-wrap:balance;
}
.area-landing-page .service-page-hero>p:last-of-type{
  max-width:38rem;
  margin-top:16px;
  color:var(--muted);
  font-size:16px;
  line-height:1.65;
}
.area-landing-page .service-page-hero .action-row{margin-top:1.25rem;gap:16px}

.area-landing-page .info-wrap{
  max-width:1160px;
  margin:auto;
  padding:var(--section-y) var(--gutter);
}
.area-landing-page .info-wrap>section{margin-bottom:clamp(40px,5.5vw,72px)}
.area-landing-page .info-wrap h2{
  font:600 clamp(30px,3.8vw,48px)/1.05 var(--serif);
  letter-spacing:-.03em;
  margin:0 0 14px;
}
.area-landing-page .info-wrap p,
.area-landing-page .info-wrap li{
  font-size:15px;
  line-height:1.65;
  color:var(--muted);
}

/* City gallery — craft frames */
.area-city-gallery{
  display:grid;
  grid-template-columns:1.35fr .65fr;
  gap:12px;
}
.area-city-gallery figure{
  min-width:0;
  margin:0;
  overflow:hidden;
  border:1px solid var(--line-strong);
  border-radius:var(--radius-lg);
  background:var(--area-soft);
  box-shadow:var(--shadow-soft);
}
.area-city-gallery img{
  width:100%;
  height:clamp(260px,36vw,420px);
  object-fit:cover;
  display:block;
}
.area-city-gallery figcaption{
  display:grid;
  align-content:start;
  gap:6px;
  min-height:0;
  padding:14px 16px;
  background:linear-gradient(180deg,#fcfaf5,#f4eee6);
  border-top:1px solid var(--line);
}
.area-city-gallery figcaption strong{
  font:600 18px/1.2 var(--serif);
  letter-spacing:-.02em;
  color:var(--pine);
}
.area-city-gallery figcaption small{
  color:var(--muted-soft);
  font:500 10px/1.5 var(--mono);
  letter-spacing:.02em;
}
.area-city-gallery figcaption a,
.area-sources a{
  color:var(--oak);
  text-decoration:underline;
  text-underline-offset:3px;
}
.area-city-gallery figcaption a:hover,
.area-sources a:hover{color:var(--pine)}

/* Statement band */
.area-statement{
  position:relative;
  overflow:hidden;
  isolation:isolate;
  padding:clamp(36px,5vw,64px);
  border:1px solid var(--line-strong);
  border-radius:var(--radius-lg);
  background:
    radial-gradient(ellipse at 90% 120%,rgba(255,255,255,.22),transparent 50%),
    linear-gradient(135deg,#c9894a,#b07a3a 55%,#9a6a32);
  color:#27392f;
  box-shadow:var(--shadow-soft);
}
.area-statement::after{
  content:"LOCAL";
  position:absolute;
  right:-.04em;
  bottom:-.29em;
  z-index:-1;
  color:rgba(255,252,247,.14);
  font:600 clamp(100px,20vw,280px)/1 var(--serif);
  letter-spacing:-.08em;
  pointer-events:none;
}
.area-statement .eyebrow{color:#3d2a14}
.area-landing-page .info-wrap .area-statement h2{
  max-width:980px;
  margin:0;
  font:600 clamp(40px,6.2vw,88px)/.94 var(--serif);
  letter-spacing:-.045em;
  color:#1f2c24;
  text-wrap:balance;
}
.area-statement>div{
  display:grid;
  grid-template-columns:1fr auto;
  gap:28px;
  align-items:end;
  margin-top:28px;
}
.area-statement>div>p{
  max-width:640px;
  margin:0!important;
  color:#3d3224!important;
  font-size:15px!important;
  line-height:1.55!important;
}
.area-statement-tags{display:flex;justify-content:flex-end;gap:8px;flex-wrap:wrap}
.area-statement-tags span{
  padding:8px 11px;
  border:1px solid rgba(54,50,34,.35);
  border-radius:999px;
  background:rgba(255,252,247,.28);
  font:600 9px/1 var(--mono);
  letter-spacing:.08em;
}
.area-statement-hub{
  background:
    radial-gradient(ellipse at 10% 0%,rgba(201,137,74,.22),transparent 45%),
    linear-gradient(145deg,#24352c,#2f4638 60%,#1c2a22);
  color:#fbf7f0;
  border-color:#1a2620;
}
.area-statement-hub::after{color:rgba(255,255,255,.05)}
.area-statement-hub .eyebrow{color:var(--sun)}
.area-landing-page .info-wrap .area-statement-hub h2{color:#fbf7f0}
.area-statement-hub>div>p{color:#dce8de!important}
.area-statement-hub .area-statement-tags span{
  border-color:rgba(255,255,255,.28);
  background:rgba(255,255,255,.06);
  color:#f4eee4;
}

/* Town story + stats */
.area-town-story{
  display:grid;
  grid-template-columns:1fr .8fr;
  gap:clamp(28px,4.5vw,64px);
  align-items:start;
}
.area-town-copy>p:not(.eyebrow){max-width:650px}
.area-town-copy .eyebrow{color:var(--oak)}
.area-fun-fact{
  margin-top:24px;
  padding:20px 22px;
  border:1px solid rgba(176,122,58,.35);
  border-left:5px solid var(--brass);
  border-radius:var(--radius);
  background:linear-gradient(180deg,#fcfaf5,#f6eddb);
  box-shadow:var(--shadow-soft);
}
.area-fun-fact span{
  font:600 10px/1.4 var(--mono);
  letter-spacing:.12em;
  color:var(--oak);
}
.area-fun-fact p{
  margin:9px 0 0;
  font:600 clamp(17px,1.9vw,24px)/1.35 var(--serif)!important;
  color:var(--pine)!important;
}
.area-stats{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:1px;
  background:var(--line-strong);
  border:1px solid var(--line-strong);
  border-radius:var(--radius-lg);
  overflow:hidden;
  counter-reset:local-stat;
  box-shadow:var(--shadow-soft);
}
.area-stat{
  position:relative;
  display:flex;
  flex-direction:column;
  justify-content:end;
  min-height:132px;
  padding:20px;
  background:linear-gradient(180deg,#fcfaf5,#e7efe5);
  overflow:hidden;
  counter-increment:local-stat;
}
.area-stat::before{
  content:"0" counter(local-stat);
  position:absolute;
  right:14px;
  top:12px;
  color:rgba(53,83,66,.28);
  font:600 10px var(--mono);
  letter-spacing:.08em;
}
.area-stat:first-child{
  grid-column:1/-1;
  background:linear-gradient(135deg,#24352c,#355342);
  color:#fbf7f0;
  min-height:148px;
}
.area-stat:first-child::before{color:rgba(255,255,255,.45)}
.area-stat:nth-child(2){background:linear-gradient(180deg,#fcfaf5,#f6eddb)}
.area-stat:nth-child(3){background:linear-gradient(180deg,#fcfaf5,#e1e9df)}
.area-stat strong{
  display:block;
  font:600 clamp(30px,3.4vw,48px)/.96 var(--serif);
  letter-spacing:-.04em;
}
.area-stat:not(:first-child) strong{font-size:clamp(26px,2.8vw,38px);line-height:1}
.area-stat span{
  display:block;
  margin-top:10px;
  font:600 11px/1.4 var(--mono);
  letter-spacing:.04em;
  text-transform:uppercase;
}
.area-sources{
  margin-top:18px!important;
  font-size:12px!important;
  color:var(--muted-soft)!important;
}
.area-sources a{display:inline-block;margin:0 0 3px 10px}

/* Floor inspiration */
.area-floor-inspiration>div:first-child{max-width:700px;margin-bottom:20px}
.area-floor-inspiration>div:first-child .eyebrow{color:var(--oak)}
.area-floor-inspiration>div:first-child p:last-child{margin-bottom:0}
.area-floor-brief{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:10px;
  margin:0 0 14px;
}
.area-floor-brief>div{
  display:flex;
  min-height:100px;
  padding:16px 18px;
  flex-direction:column;
  border:1px solid var(--line-strong);
  border-radius:var(--radius);
  background:linear-gradient(180deg,#fcfaf5,#edf2e9);
  box-shadow:var(--shadow-soft);
}
.area-floor-brief>div:nth-child(2){background:linear-gradient(180deg,#fcfaf5,#f6eddb)}
.area-floor-brief>div:nth-child(3){background:linear-gradient(180deg,#fcfaf5,#e4e8df)}
.area-floor-brief b{
  color:var(--oak);
  font:600 10px var(--mono);
  letter-spacing:.1em;
}
.area-floor-brief span{
  margin-top:auto;
  font:600 16px/1.25 var(--serif);
  letter-spacing:-.02em;
  color:var(--pine);
}
.area-photo-pair{
  display:grid;
  grid-template-columns:1.2fr .8fr;
  gap:12px;
}
.area-photo-pair figure{
  position:relative;
  margin:0;
  min-height:300px;
  overflow:hidden;
  border:1px solid var(--line-strong);
  border-radius:var(--radius-lg);
  background:#294b3c;
  box-shadow:var(--shadow-soft);
}
.area-photo-pair img{
  width:100%;
  height:100%;
  min-height:300px;
  object-fit:cover;
  display:block;
}
.area-photo-pair figcaption{
  position:absolute;
  left:12px;
  bottom:12px;
  padding:7px 10px;
  border:1px solid var(--line);
  border-radius:999px;
  background:rgba(255,252,247,.92);
  color:var(--pine);
  font:600 10px/1.4 var(--mono);
  letter-spacing:.04em;
  text-transform:uppercase;
}

/* Service direction cards */
.area-service-section{
  padding:clamp(28px,4vw,48px);
  border:1px solid var(--line-strong);
  border-radius:var(--radius-lg);
  background:
    radial-gradient(ellipse at 0% 0%,rgba(201,137,74,.1),transparent 40%),
    linear-gradient(180deg,#fbf7f0,#ebe4d8);
  box-shadow:var(--shadow-soft);
}
.area-service-section .eyebrow{color:var(--oak)}
.area-service-section>h2,
.area-service-section>p{max-width:710px}
.area-service-section>p,
.area-nearby>p{max-width:680px}
.area-service-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:12px;
  margin-top:24px;
}
.area-service-card{
  display:flex;
  flex-direction:column;
  min-height:0;
  padding:clamp(18px,2.5vw,28px);
  border:1px solid var(--line-strong);
  border-radius:var(--radius-lg);
  background:linear-gradient(180deg,#fcfaf5,#f3ebe0);
  box-shadow:var(--shadow-soft);
  transition:transform .2s,box-shadow .2s,border-color .2s;
}
.area-service-card:hover{
  transform:translateY(-4px);
  border-color:rgba(176,122,58,.45);
  box-shadow:var(--shadow-lift);
}
.area-service-card span{
  font:600 10px var(--mono);
  letter-spacing:.1em;
  color:var(--oak);
}
.area-service-card h3{
  margin:16px 0 8px;
  font:600 clamp(22px,2.4vw,30px)/1.08 var(--serif);
  letter-spacing:-.03em;
  color:var(--pine);
}
.area-service-card p{
  margin:0;
  font-size:14px!important;
  line-height:1.55!important;
  color:var(--muted)!important;
}
.area-service-card b{
  margin-top:auto;
  padding-top:18px;
  font-size:11px;
  letter-spacing:.04em;
  text-transform:uppercase;
  color:var(--pine);
}

/* Plan steps + FAQ */
.area-plan,
.area-faq{
  display:grid;
  grid-template-columns:.85fr 1.15fr;
  gap:clamp(24px,4vw,56px);
}
.area-plan .eyebrow,
.area-faq .eyebrow,
.area-nearby .eyebrow{color:var(--oak)}
.area-plan ol{
  margin:0;
  padding:0;
  list-style:none;
  counter-reset:step;
}
.area-plan li{
  position:relative;
  padding:16px 0 18px 48px;
  border-top:1px solid var(--line);
  counter-increment:step;
}
.area-plan li:last-child{border-bottom:1px solid var(--line)}
.area-plan li:before{
  content:counter(step,decimal-leading-zero);
  position:absolute;
  left:0;
  top:18px;
  color:var(--oak);
  font:600 10px var(--mono);
  letter-spacing:.08em;
}
.area-plan h3{
  margin:0 0 6px;
  font:600 22px/1.12 var(--serif);
  letter-spacing:-.02em;
  color:var(--pine);
}
.area-plan li p{margin:0;font-size:14px}

.area-faq details{
  border:1px solid rgba(53,83,66,.16)!important;
  border-radius:var(--radius);
  padding:0!important;
  margin:0 0 10px;
  background:rgba(255,252,247,.88);
  box-shadow:var(--shadow-soft);
}
.area-faq details:last-child{border-bottom:1px solid rgba(53,83,66,.16)!important}
.area-faq summary{
  cursor:pointer;
  padding:16px 18px;
  font:600 18px/1.2 var(--serif);
  letter-spacing:-.02em;
  color:var(--pine);
  list-style:none;
}
.area-faq summary::-webkit-details-marker{display:none}
.area-faq details p{
  margin:0 18px 16px!important;
  font-size:14px;
  color:var(--muted);
}

/* Nearby chips */
.area-nearby .info-links{margin:0 0 14px;gap:10px}
.area-landing-page .info-links a{
  padding:9px 14px;
  border:1px solid var(--line-strong);
  border-radius:999px;
  background:linear-gradient(180deg,#fcfaf5,#f3ebe0);
  color:var(--pine);
  font:600 12px/1 var(--sans);
  letter-spacing:.02em;
  box-shadow:var(--shadow-soft);
  transition:border-color .2s,transform .2s,box-shadow .2s;
}
.area-landing-page .info-links a:hover{
  border-color:rgba(176,122,58,.45);
  transform:translateY(-2px);
  box-shadow:var(--shadow-lift);
}

/* Hub community cards */
.area-landing-page .area-grid{
  gap:12px;
  background:transparent;
  counter-reset:community;
}
.area-landing-page .area-card{
  position:relative;
  display:flex;
  min-height:0;
  padding:clamp(20px,2.8vw,32px);
  flex-direction:column;
  overflow:hidden;
  border:1px solid var(--line-strong);
  border-radius:var(--radius-lg);
  background:linear-gradient(180deg,#fcfaf5,#f3ebe0);
  box-shadow:var(--shadow-soft);
  counter-increment:community;
  transition:transform .2s,box-shadow .2s,border-color .2s;
}
.area-landing-page .area-card:hover{
  transform:translateY(-4px);
  border-color:rgba(176,122,58,.45);
  box-shadow:var(--shadow-lift);
}
.area-landing-page .area-card::after{
  content:counter(community,decimal-leading-zero);
  position:absolute;
  right:14px;
  top:8px;
  color:rgba(176,122,58,.28);
  font:600 clamp(34px,4.5vw,58px)/1 var(--serif);
  letter-spacing:-.04em;
}
.area-landing-page .area-card:nth-child(4n+1){background:linear-gradient(180deg,#fcfaf5,#e3eddf)}
.area-landing-page .area-card:nth-child(4n+2){background:linear-gradient(180deg,#fcfaf5,#f6eddb)}
.area-landing-page .area-card:nth-child(4n+3){background:linear-gradient(180deg,#fcfaf5,#e7e2d8)}
.area-landing-page .area-card:nth-child(4n){background:linear-gradient(180deg,#fcfaf5,#dfe9e7)}
.area-landing-page .area-card h2{
  position:relative;
  z-index:1;
  max-width:78%;
  margin:0 0 10px;
  font:600 clamp(28px,3.4vw,42px)/1.05 var(--serif);
  letter-spacing:-.03em;
  color:var(--pine);
}
.area-landing-page .area-card p{
  font-size:14px!important;
  line-height:1.55!important;
  color:var(--muted)!important;
}
.area-landing-page .area-card a{
  margin-top:auto;
  padding-top:18px;
  font:600 11px/1 var(--sans);
  letter-spacing:.04em;
  text-transform:uppercase;
  color:var(--pine);
}

.area-landing-page .contact-callout{
  padding:clamp(56px,8vw,92px) clamp(18px,5vw,40px);
}

@media(max-width:850px){
  .area-town-story,
  .area-photo-pair,
  .area-plan,
  .area-faq{grid-template-columns:1fr;gap:22px}
  .area-service-grid{grid-template-columns:1fr}
  .area-statement>div{grid-template-columns:1fr}
  .area-statement-tags{justify-content:flex-start}
  .area-floor-brief{grid-template-columns:1fr}
  .area-floor-brief>div{min-height:84px}
  .area-floor-brief span{margin-top:14px}
}
@media(max-width:620px){
  .area-city-gallery{grid-template-columns:1fr}
  .area-city-gallery img,
  .area-city-gallery figure:first-child img{height:240px}
  .area-stats{grid-template-columns:1fr}
  .area-stat,
  .area-stat:first-child{grid-column:auto;min-height:118px}
  .area-stat:not(:first-child) strong{font-size:32px}
  .area-statement{padding:32px 20px}
  .area-landing-page .info-wrap .area-statement h2{font-size:clamp(36px,11vw,58px)}
  .area-statement-tags{display:grid;grid-template-columns:1fr}
  .area-statement-tags span{text-align:center}
}
@media(max-width:520px){
  .area-photo-pair figure,
  .area-photo-pair img{min-height:220px}
  .area-service-section{padding:22px 18px}
  .area-sources a{margin:5px 9px 0 0}
  .area-stat strong{font-size:34px}
}

.area-landing-page .page-hero.service-page-hero,
.area-landing-page .service-page-hero,
.area-landing-page .info-wrap,
.area-landing-page .contact-callout{
  width:100%;
  max-width:none;
  margin-inline:0;
  padding-inline:max(var(--gutter), calc((100% - var(--rail)) / 2));
}

.area-landing-page .area-statement .eyebrow,
.area-landing-page .area-statement-tags span{
  color:#24180c;
}
.area-landing-page .area-statement-hub .eyebrow{color:#f6d48a}
.area-landing-page .area-statement-hub .area-statement-tags span{color:#f4eee4}
