/* Earthly Exteriors service-area pages — layered on styles.css (same palette, fonts, components). */
/* Preview only; not deployed. */

.areas-page { background: var(--paper); }

.areas-hero {
  position: relative;
  min-height: 620px;
  padding: 11rem max(5vw, calc((100vw - 1320px) / 2)) clamp(4.5rem, 8vw, 7rem);
  color: var(--white);
  background: var(--forest-dark) url("/assets/earthly-hero.jpg") center / cover no-repeat;
  overflow: hidden;
}
.areas-hero {
  background-image: image-set(url("/assets/earthly-hero.webp") type("image/webp"), url("/assets/earthly-hero.jpg") type("image/jpeg"));
}
.areas-hero-shade {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(5,24,17,.88) 0%, rgba(5,24,17,.62) 42%, rgba(5,24,17,.2) 78%), linear-gradient(0deg, rgba(3,17,12,.4), transparent 50%);
}
.areas-hero-copy { position: relative; z-index: 1; width: min(760px, 90%); }
.areas-hero h1 { max-width: 900px; font-size: clamp(3rem, 6vw, 6.2rem); line-height: .95; }
.areas-hero-copy > p:not(.eyebrow) {
  max-width: 620px;
  margin: 1.8rem 0 0;
  color: rgba(255,255,255,.83);
  font-size: clamp(1rem, 1.3vw, 1.15rem);
  line-height: 1.7;
}
.areas-hero .hero-actions { margin-top: 2.2rem; }

/* Keep the header readable on these inner pages (same treatment as the blog). */
.areas-page .site-header { color: var(--white); }

/* Proposed mobile menu: the live site hides <nav> under 900px with no replacement. */
.mobile-nav { display: none; }
.mobile-nav summary {
  list-style: none;
  cursor: pointer;
  padding: .65rem 1rem;
  border: 1px solid rgba(255,255,255,.6);
  border-radius: 99px;
  font-size: .76rem;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.mobile-nav summary::-webkit-details-marker { display: none; }
.mobile-nav[open] summary { background: var(--white); color: var(--forest); }
.mobile-nav-panel {
  position: absolute;
  top: calc(100% + .6rem);
  right: 0;
  display: flex;
  flex-direction: column;
  min-width: 220px;
  padding: .6rem 0;
  background: var(--forest-dark);
  border: 1px solid rgba(255,255,255,.18);
  box-shadow: 0 12px 30px rgba(0,0,0,.25);
}
.mobile-nav-panel a {
  padding: .85rem 1.2rem;
  font-size: .82rem;
  font-weight: 700;
  text-decoration: none;
}
.mobile-nav-panel a:hover,
.mobile-nav-panel a[aria-current="page"] { background: rgba(255,255,255,.08); }

.areas-intro {
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  gap: 6vw;
  align-items: start;
}
.areas-intro .section-heading h2 { max-width: 700px; }
.areas-intro-copy { max-width: 640px; color: var(--muted); font-size: 1.08rem; line-height: 1.75; }
.areas-intro-copy p { margin: 0 0 1.3rem; }
.areas-intro-copy p:last-child { margin-bottom: 0; }
.areas-intro-copy a { color: var(--forest); font-weight: 700; }

.areas-prose {
  background: var(--white);
}
.areas-prose-inner {
  width: min(100%, 740px);
  margin: 0 auto;
  color: #2c3a32;
  font-size: 1.08rem;
  line-height: 1.8;
}
.areas-prose-inner h2 {
  margin: 3rem 0 1.1rem;
  color: var(--forest-dark);
  font-size: clamp(2rem, 3.2vw, 2.85rem);
  line-height: 1.06;
  letter-spacing: -.03em;
}
.areas-prose-inner h2:first-child { margin-top: 0; }
.areas-prose-inner h3 {
  margin: 2.2rem 0 .8rem;
  color: var(--forest-dark);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.55rem;
  font-weight: 400;
  letter-spacing: -.02em;
}
.areas-prose-inner p { margin: 0 0 1.35rem; }
.areas-prose-inner ul, .areas-prose-inner ol { margin: 0 0 1.5rem; padding-left: 1.3rem; }
.areas-prose-inner li { margin-bottom: .55rem; padding-left: .35rem; }
.areas-prose-inner ul li::marker { color: var(--forest); }
.areas-prose-inner a { color: var(--forest); font-weight: 700; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.areas-sources {
  margin: 2rem 0 0;
  padding: 1.2rem 1.3rem;
  background: var(--cream);
  border-left: 2px solid var(--leaf);
  color: var(--muted);
  font-size: .92rem;
  line-height: 1.7;
}
.areas-sources strong { color: var(--forest-dark); }
.areas-sources ul { margin: .6rem 0 0; }

.areas-services { background: var(--paper); }
.areas-services .section-heading { margin-bottom: clamp(2.5rem, 5vw, 3.5rem); }
.areas-service-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.4rem;
}
.areas-service {
  display: flex;
  flex-direction: column;
  background: var(--white);
  min-height: 100%;
}
.areas-service img { width: 100%; height: 220px; object-fit: cover; background: var(--cream); }
.areas-service-detail { padding: 1.6rem 1.6rem 1.8rem; }
.areas-service-detail .kicker { margin-bottom: .8rem; }
.areas-service-detail h3 {
  margin: 0 0 .8rem;
  font-family: Georgia, serif;
  font-size: clamp(1.7rem, 2.4vw, 2.2rem);
  font-weight: 400;
  letter-spacing: -.03em;
  line-height: 1.05;
}
.areas-service-detail p { margin: 0; color: var(--muted); line-height: 1.7; }

.areas-cta-band {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  margin-top: 2rem;
  padding: 1.5rem 1.6rem;
  background: var(--cream);
}
.areas-cta-band p { margin: 0; font-family: Georgia, serif; font-size: 1.25rem; color: var(--forest-dark); }
.areas-cta-band .button span { margin-left: .6rem; }

.areas-list { background: var(--forest); color: var(--white); }
.areas-list h2 { max-width: 700px; font-size: clamp(2.6rem, 4.5vw, 4.6rem); line-height: .98; }
.areas-list > p:not(.kicker) { max-width: 620px; margin: 1.5rem 0 2rem; color: rgba(255,255,255,.72); line-height: 1.75; }
.areas-city-links {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 1px;
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.12);
}
.areas-city-links a {
  display: block;
  padding: 1.2rem 1.3rem;
  background: var(--forest);
  text-decoration: none;
  font-family: Georgia, serif;
  font-size: 1.2rem;
}
.areas-city-links a:hover,
.areas-city-links a[aria-current="page"] { background: rgba(220,233,172,.12); }
.areas-city-links small { display: block; margin-top: .35rem; color: var(--leaf); font-family: Inter, ui-sans-serif, system-ui, sans-serif; font-size: .68rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }

/* Proposed footer areas line — visible on these pages, including phones. */
.footer-areas {
  grid-column: 1 / -1;
  margin: 0;
  padding-top: 1.4rem;
  border-top: 1px solid rgba(255,255,255,.14);
  color: rgba(255,255,255,.7);
}
.footer-areas a { color: var(--leaf); font-weight: 700; text-decoration: none; }
.footer-areas a:hover { text-decoration: underline; }
.areas-page footer > p:not(.copyright):not(.footer-areas) { display: block; }

@media (max-width: 900px) {
  .areas-page .site-header { grid-template-columns: 1fr auto auto; gap: .6rem; }
  .areas-page .site-header > nav { display: none; }
  .mobile-nav { display: block; position: relative; justify-self: end; }
  .areas-intro { grid-template-columns: 1fr; }
  .areas-service-grid { grid-template-columns: 1fr; }
  .areas-page footer { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 620px) {
  .areas-hero { min-height: 0; padding: 8.5rem 1.2rem 3.8rem; background-position: 62% center; }
  .areas-hero-copy { width: 100%; }
  .areas-hero h1 { font-size: clamp(2.8rem, 13vw, 4rem); }
  .areas-hero .hero-actions { align-items: stretch; flex-direction: column; width: min(100%, 320px); }
  .areas-prose-inner { font-size: 1.02rem; }
  .areas-service img { height: 200px; }
  .areas-cta-band { flex-direction: column; align-items: stretch; }
  .areas-page footer { grid-template-columns: 1fr; }
}