/* Mex Landscaping: the light design pass (2026-10-14), loaded after the site's own stylesheet.
   Uses the site's own colour tokens and fonts (Oswald, Inter). Added by improve.py; see IMPROVEMENTS.md. */

/* ---- Closing band: contact card in the empty right half (from 1024 px) ---- */
.mxi-cta-card { display: none; }
@media (min-width: 1024px) {
  .mxi-cta { display: grid; grid-template-columns: minmax(0, 1fr) 24rem; gap: 4rem; align-items: center; }
  .mxi-cta-card {
    display: block; border: 1px solid rgb(255 255 255 / .12); border-radius: 1rem;
    background: rgb(255 255 255 / .04); padding: 2rem; color: #fff;
  }
}
.mxi-cta-card__eyebrow { font-size: .75rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--color-gold-300); }
.mxi-cta-card__phone {
  display: inline-block; margin-top: .5rem; font-family: var(--font-display); font-size: 2.25rem; font-weight: 600;
  line-height: 1.1; letter-spacing: .01em; color: #fff; text-decoration: none;
}
.mxi-cta-card__phone:hover { color: var(--color-leaf-400); }
.mxi-cta-card__list { margin-top: 1.25rem; display: grid; gap: .9rem; border-top: 1px solid rgb(255 255 255 / .12); padding-top: 1.25rem; }
.mxi-cta-card__list dt { font-size: .75rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: rgb(255 255 255 / .55); }
.mxi-cta-card__list dd { margin-top: .15rem; font-size: .95rem; line-height: 1.5; color: rgb(255 255 255 / .88); }
.mxi-cta-card__list a { color: #fff; text-decoration: underline; text-decoration-color: rgb(255 255 255 / .35); text-underline-offset: 3px; }
.mxi-cta-card__list a:hover { text-decoration-color: #fff; }
.mxi-cta-card__note { margin-top: 1.25rem; font-size: .9rem; color: var(--color-leaf-400); font-weight: 600; }

/* ---- Town pages: local planning card ---- */
.mxi-plan {
  margin-top: 3rem; border: 1px solid var(--color-forest-100); border-left: 4px solid var(--color-leaf-500);
  border-radius: 1rem; background: var(--color-forest-50); padding: 1.5rem 1.5rem 1.5rem 1.75rem;
}
.mxi-plan__list { margin-top: 1rem; display: grid; gap: .75rem; padding: 0; list-style: none; }
.mxi-plan__list li { position: relative; padding-left: 1.4rem; color: var(--color-forest-800); line-height: 1.65; }
.mxi-plan__list li::before {
  content: ""; position: absolute; left: 0; top: .62em; width: .5rem; height: .5rem; border-radius: 999px; background: var(--color-leaf-500);
}
@media (min-width: 640px) { .mxi-plan { padding: 2rem 2rem 2rem 2.25rem; } }

/* ---- Town pages: Nearby areas links big enough to tap ---- */
h3 + ul.grid.grid-cols-2.gap-y-1.text-sm { row-gap: 0; }
h3 + ul.grid.grid-cols-2.gap-y-1.text-sm > li > a { display: block; padding: .55rem 0; line-height: 1.35; }

/* ---- Service areas: township line on each card, and the intro ---- */
.mxi-town-meta { margin-top: .5rem; font-size: .85rem; line-height: 1.4; color: var(--color-forest-500); }
.mxi-lead { margin-top: 1rem; font-size: 1.05rem; line-height: 1.7; color: var(--color-forest-700); }
.mxi-lead strong { color: var(--color-forest-900); font-weight: 600; }

.mxi-areas-more {
  display: flex; flex-direction: column; justify-content: center; border: 1px dashed var(--color-forest-300); border-radius: 1rem;
  background: var(--color-forest-50); padding: 1.25rem 1.5rem;
}
@media (min-width: 1024px) { .mxi-areas-more { grid-column: span 2; } }
.mxi-areas-more__title { font-weight: 600; color: var(--color-forest-900); }
.mxi-areas-more__text { margin-top: .35rem; font-size: .9rem; line-height: 1.55; color: var(--color-forest-700); }
.mxi-areas-more__links { margin-top: .75rem; display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; font-weight: 600; }
.mxi-areas-more__links a { color: var(--color-leaf-600); padding-block: .35rem; }
.mxi-areas-more__links a:hover { color: var(--color-leaf-700); }

/* ---- Contact: what happens next, a row of four steps between the form and the map ---- */
.mxi-steps { margin-top: 3.5rem; border-top: 1px solid var(--color-forest-100); padding-top: 2.5rem; }
.mxi-steps__list { margin-top: 1.5rem; display: grid; gap: 1rem; padding: 0; list-style: none; counter-reset: mxi-step; }
@media (min-width: 640px) { .mxi-steps__list { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .mxi-steps__list { grid-template-columns: repeat(4, 1fr); } }
.mxi-steps__list li {
  position: relative; border: 1px solid var(--color-forest-100); border-radius: 1rem; background: var(--color-sand);
  padding: 3.75rem 1.25rem 1.25rem; font-size: .95rem; line-height: 1.55; color: var(--color-forest-700); counter-increment: mxi-step;
}
.mxi-steps__list li strong { display: block; margin-bottom: .25rem; color: var(--color-forest-900); font-weight: 600; }
.mxi-steps__list li::before {
  content: counter(mxi-step); position: absolute; left: 1.25rem; top: 1.25rem; display: grid; place-items: center;
  width: 1.85rem; height: 1.85rem; border-radius: 999px; background: var(--color-leaf-500); color: #fff;
  font-family: var(--font-display); font-weight: 600; font-size: .95rem;
}

/* ---- Blog posts: related links ---- */
.mxi-related { margin-top: 2.5rem; }
.mxi-related__grid { margin-top: 1rem; display: grid; gap: 1rem; }
@media (min-width: 640px) { .mxi-related__grid { grid-template-columns: 1fr 1fr; } }
.mxi-related__item {
  display: block; border: 1px solid var(--color-forest-100); border-radius: 1rem; background: var(--color-forest-50);
  padding: 1.1rem 1.25rem; text-decoration: none; transition: border-color .15s, background-color .15s;
}
.mxi-related__item:hover { border-color: rgb(31 157 79 / .45); background: #fff; }
.mxi-related__title { display: block; font-weight: 600; color: var(--color-forest-900); }
.mxi-related__item:hover .mxi-related__title { color: var(--color-leaf-600); }
.mxi-related__text { display: block; margin-top: .25rem; font-size: .875rem; line-height: 1.5; color: var(--color-forest-600); }

/* ---- Projects: the fifth case study spans the row instead of standing alone ---- */
@media (min-width: 640px) {
  .mxi-wide { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; align-items: stretch; }
  .mxi-wide > .p-6 { display: flex; flex-direction: column; justify-content: center; padding: 2.5rem; }
}

/* ---- Homepage photo grid on a phone: the first photo spans both columns so the fifth is not left alone ---- */
@media (max-width: 639px) {
  .grid.auto-rows-\[180px\].grid-cols-2 > .photo-card:first-child { grid-column: span 2; }
}
/* Captions only showed on hover, which a phone never has: show them on touch screens. */
@media (hover: none) {
  .photo-card > .opacity-0 { opacity: 1; }
}

/* ---- Footer links on a phone: more room between links for a thumb ---- */
@media (max-width: 639px) {
  footer ul a { display: inline-block; padding-block: .3rem; }
}

/* ---- Small type polish ---- */
.body-copy { text-wrap: pretty; }
details > summary { padding-block: .15rem; }