/* Written by build.py from site/css/pages/*.css. Edit those, not this file. */

/* ==== about-contact.css ==== */
/* About, Contact, Privacy and Accessibility (stage B group E). Reuses the
   tokens, grounds, .band, .wrap, .band-head, .lead, .actions, .btn, .crumbs,
   .steps and .faq* from styles.css; everything new is prefixed about-,
   contact- or policy-. */

/* ---------------------------------------------------------------- about */
.about-hero { padding-block: clamp(32px, 5vw, 64px) var(--band); }
.about-hero-grid { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, .7fr); gap: clamp(28px, 5vw, 72px); align-items: center; }
.about-hero-text { display: grid; gap: 22px; }
.about-hero-photo { display: grid; gap: 10px; width: 100%; max-width: 400px; justify-self: end; }
.about-hero-photo img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; border-radius: var(--radius-photo); }
.about-hero-photo figcaption { color: var(--muted); font-size: var(--fs-sm); }

.about-story-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); gap: clamp(28px, 5vw, 72px); align-items: start; }
.about-story-text { display: grid; gap: 18px; }
.about-story-text p { max-width: 62ch; }

.about-facts { border-radius: var(--radius); padding: clamp(22px, 3vw, 32px); display: grid; gap: 16px; position: sticky; top: 100px; }
.about-facts h3 { font-size: var(--fs-h3); }
.about-facts-list { display: grid; gap: 12px; }
.about-facts-list div { display: grid; gap: 2px; padding-bottom: 12px; border-bottom: 1px solid var(--rule); }
.about-facts-list div:last-child { border-bottom: 0; padding-bottom: 0; }
.about-facts-list dt { font-weight: 700; font-size: var(--fs-sm); color: var(--muted); }
.about-facts-list dd { margin: 0; font-size: var(--fs-ui); line-height: 1.45; }

.about-partner-grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(24px, 5vw, 72px); align-items: start; }
.about-partner-text { display: grid; gap: 16px; }
.about-partner-text p { max-width: 60ch; }
.about-legal { font-size: var(--fs-sm); }

.about-work-list { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(24px, 3vw, 36px) clamp(28px, 4vw, 56px); }
.about-work-list li { display: grid; gap: 8px; align-content: start; padding-top: 18px; border-top: 3px solid var(--bark); }
.about-work-list p { max-width: 52ch; }
.about-work-foot { margin-top: clamp(32px, 4vw, 48px); display: grid; gap: 12px; max-width: 72ch; }
.about-work-foot .muted { font-size: var(--fs-ui); }

.about-crew-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2.4vw, 28px); }
.about-crew-item { display: grid; gap: 12px; align-content: start; }
.about-crew-item a { display: block; border-radius: var(--radius-photo); overflow: hidden; }
.about-crew-item img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; transition: transform .3s; }
.about-crew-item a:hover img { transform: scale(1.02); }
.about-crew-item a:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
.about-crew-item figcaption { display: grid; gap: 2px; }
.about-crew-item strong { font-family: var(--font-head); font-size: var(--fs-h4); line-height: 1.25; }
.about-crew-item span { color: var(--muted); font-size: var(--fs-sm); }

/* ---------------------------------------------------------------- contact */
.contact-hero { padding-block: clamp(32px, 5vw, 64px) var(--band); }
.contact-hero-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: clamp(28px, 5vw, 72px); align-items: center; }
.contact-hero-text { display: grid; gap: 22px; }
.contact-card { border-radius: var(--radius); padding: clamp(22px, 3vw, 36px); display: grid; gap: 20px; border-top: 6px solid var(--manzanita); }
.contact-card-title { font-size: var(--fs-h3); }
.contact-nap { font-style: normal; font-size: var(--fs-lead); line-height: 1.5; }
main .contact-nap a.contact-phone { display: inline-block; margin-top: 6px; font-family: var(--font-head); font-size: var(--fs-h3-lg); font-weight: 800; line-height: 1.15; text-decoration-thickness: 2px; }
.contact-hours { width: 100%; border-collapse: collapse; font-size: var(--fs-ui); font-variant-numeric: tabular-nums; }
.contact-hours caption { text-align: left; font-weight: 700; padding-bottom: 8px; border-bottom: 2px solid var(--bark); }
.contact-hours th, .contact-hours td { padding: 10px 0; border-bottom: 1px solid var(--rule); text-align: left; vertical-align: top; }
.contact-hours th { font-weight: 500; padding-right: 16px; }
.contact-hours td { text-align: right; font-weight: 700; white-space: nowrap; }
.contact-note { font-size: var(--fs-sm); }

main a.contact-tel { white-space: nowrap; }

.contact-ready-grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(24px, 5vw, 72px); align-items: start; }
.contact-ready-grid .band-head { margin-bottom: 0; }
.contact-ready-list { gap: 14px; border-top: 2px solid var(--bark); padding-top: 20px; }

.contact-area-grid { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, .7fr); gap: clamp(28px, 5vw, 72px); align-items: center; }
.contact-area-text { display: grid; gap: 16px; }
.contact-area-text > p { max-width: 62ch; }
.contact-area-text h3 { margin-top: 8px; font-size: var(--fs-h4); }
.contact-towns { list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 24px; border-top: 2px solid var(--bark); }
.contact-towns li { padding: 12px 0; border-bottom: 1px solid var(--rule); font-size: var(--fs-ui); }
.contact-area-photo { display: grid; gap: 10px; width: 100%; max-width: 380px; justify-self: end; }
.contact-area-photo img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; border-radius: var(--radius-photo); }
.contact-area-photo figcaption { color: var(--muted); font-size: var(--fs-sm); }

/* ---------------------------------------------------------------- privacy, accessibility */
.policy-hero { padding-block: clamp(32px, 5vw, 64px) clamp(40px, 5vw, 64px); }
.policy-hero-text { display: grid; gap: 18px; }
.policy-hero-text .muted { font-size: var(--fs-sm); }
.policy-sections { display: grid; gap: clamp(32px, 4vw, 44px); }
.policy-section { display: grid; gap: 12px; }
.policy-section h2 { font-size: var(--fs-h3-lg); }
.policy-section p { max-width: 64ch; }
.policy-list { padding-left: 1.3em; display: grid; gap: 8px; max-width: 62ch; }
.policy-list li::marker { color: var(--manzanita); }

/* ---------------------------------------------------------------- responsive */
@media (max-width: 1000px) { .contact-towns { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 900px) {
  .about-hero-grid, .about-story-grid, .about-partner-grid, .contact-hero-grid, .contact-ready-grid, .contact-area-grid { grid-template-columns: 1fr; }
  .about-hero-photo, .contact-area-photo { justify-self: start; }
  .about-facts { position: static; }
}
@media (max-width: 700px) {
  .about-work-list { grid-template-columns: 1fr; }
  .about-crew-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .about-crew-item:first-child { grid-column: 1 / -1; }
}
@media (max-width: 560px) {
  .about-hero-photo { max-width: 340px; }
  .contact-area-photo { max-width: 300px; }
}
@media (prefers-reduced-motion: reduce) { .about-crew-item img { transition: none; } }

/* ==== blog.css ==== */
/* Blog index and posts. A post reads like a written field guide: the short
   answer sits up top on a white slip with the straw rule the hub's town index
   uses, the contents run down a narrow rail beside the text on wide screens,
   and the body keeps a 66ch measure. Tokens and grounds come from styles.css. */

/* ---------------------------------------------------------------- post head */
.post-head { padding-block: clamp(32px, 5vw, 64px) clamp(48px, 6vw, 80px); }
.post-head-grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: clamp(28px, 5vw, 64px); align-items: start; }
.post-head-grid.no-photo { grid-template-columns: minmax(0, 1fr); max-width: 860px; }
.post-head-text { display: grid; gap: 22px; }
.post-byline { display: grid; gap: 2px; font-size: var(--fs-sm); color: var(--muted); }
.post-byline-who { color: var(--bark); font-weight: 700; }
.post-answer {
  display: grid; gap: 8px; padding: clamp(20px, 3vw, 30px);
  border-top: 4px solid var(--straw); border-radius: var(--radius);
  box-shadow: 0 18px 40px -24px rgba(43,28,22,.45);
}
.post-answer-label { font-family: var(--font-head); font-weight: 700; font-size: var(--fs-h4); }
.post-answer p:last-child { font-size: var(--fs-lead); line-height: 1.55; }
.post-hero-photo { display: grid; gap: 10px; }
.post-hero-photo img { width: 100%; max-height: 600px; object-fit: cover; border-radius: var(--radius-photo); }
.post-hero-photo figcaption { color: var(--muted); font-size: var(--fs-sm); }

/* ---------------------------------------------------------------- post body */
.post-body { padding-top: clamp(48px, 6vw, 72px); }
.post-layout { display: grid; grid-template-columns: minmax(0, 1fr); justify-items: start; }
.post-layout.has-toc { grid-template-columns: 260px minmax(0, 1fr); gap: clamp(32px, 5vw, 72px); align-items: start; }
.post-article { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(36px, 5vw, 56px); width: 100%; max-width: 66ch; min-width: 0; }

.post-toc { position: sticky; top: 100px; padding: 20px 22px; border-radius: var(--radius); }
.post-toc-title { font-family: var(--font-head); font-weight: 700; font-size: var(--fs-h4); margin-bottom: 10px; }
.post-toc ol { list-style: none; display: grid; }
.post-toc li { border-top: 1px solid var(--rule); }
main .post-toc a:not(.btn) {
  display: block; padding: 10px 0; font-weight: 500; font-size: var(--fs-sm); line-height: 1.4;
  text-decoration: none; color: var(--bark);
}
main .post-toc a:not(.btn):hover { color: var(--manzanita); text-decoration: underline; text-decoration-thickness: 1px; }

.prose { font-size: var(--fs-body); line-height: 1.65; min-width: 0; }
.prose > * + * { margin-top: 1.05em; }
.prose h2 { font-size: var(--fs-h3-lg); line-height: 1.15; margin-top: 2em; }
.prose > h2:first-child { margin-top: 0; }
.prose h3 { font-size: var(--fs-h3); margin-top: 1.6em; }
.prose h2 + *, .prose h3 + * { margin-top: .6em; }
.prose ul, .prose ol { padding-left: 1.4em; display: grid; gap: .5em; }
.prose li::marker { color: var(--manzanita); font-weight: 700; }
.prose ol li::marker { font-family: var(--font-head); }
.prose li { padding-left: .2em; }
.prose strong { color: var(--bark); }
.prose blockquote { padding: 4px 0 4px 22px; border-left: 4px solid var(--sage); font-family: var(--font-head); font-size: var(--fs-lead); }
.prose a { overflow-wrap: anywhere; }
.prose table { width: 100%; border-collapse: collapse; font-size: var(--fs-ui); line-height: 1.45; margin-top: 1.4em; }
.prose th, .prose td { text-align: left; vertical-align: top; padding: 14px 16px 14px 0; border-bottom: 1px solid var(--rule); }
.prose thead th { font-size: var(--fs-sm); color: var(--muted); border-bottom: 2px solid var(--bark); padding-block: 0 10px; }
.prose tbody td:first-child { font-weight: 700; }
.prose table + * { margin-top: 1.4em; }
/* The sources list at the end of every post reads smaller. */
.prose h2#sources { font-size: var(--fs-h3); }
.prose h2#sources + ul { font-size: var(--fs-sm); gap: .6em; }

.post-deeper { display: grid; gap: 14px; padding: clamp(22px, 3vw, 32px); border-radius: var(--radius); border-left: 6px solid var(--manzanita); }
.post-deeper h2 { font-size: var(--fs-h3); }
.post-deeper ul { list-style: none; display: grid; gap: 14px; }
.post-deeper li { display: grid; gap: 2px; }
.post-deeper span { color: var(--muted); font-size: var(--fs-sm); }
.post-about { font-size: var(--fs-sm); color: var(--muted); padding-top: 20px; border-top: 1px solid var(--rule); }

/* ---------------------------------------------------------------- cta, related */
.post-cta-grid { display: grid; grid-template-columns: minmax(0, 1.3fr) auto; gap: clamp(24px, 4vw, 56px); align-items: center; }
.post-cta-text { display: grid; gap: 14px; max-width: 60ch; }
.post-cta .actions { justify-content: flex-end; }

.post-related h2 { margin-bottom: clamp(24px, 3vw, 36px); }
.post-related-list { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px clamp(28px, 4vw, 48px); }
.post-related-item { position: relative; display: grid; grid-template-columns: 160px minmax(0, 1fr); gap: 20px; align-items: start; padding-top: 20px; border-top: 2px solid var(--bark); }
.post-related-item img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius-photo); }
.post-related-item div { display: grid; gap: 8px; }
.post-related-item h3 { font-size: var(--fs-h4); line-height: 1.3; }
main .post-related-item h3 a:not(.btn) { color: var(--bark); text-decoration: none; }
main .post-related-item h3 a:not(.btn)::after { content: ""; position: absolute; inset: 0; }
main .post-related-item:hover h3 a:not(.btn) { color: var(--manzanita); text-decoration: underline; text-decoration-thickness: 2px; }
.post-related-item p { font-size: var(--fs-sm); color: var(--muted); }

/* ---------------------------------------------------------------- blog index */
/* Built for a guide a week, after the case studies grid on Kate's Bramwell-McKay site
   (Vazul, Oct 18 2026): a short head, a full-width search bar with one row of topic
   buttons, then equal photo squares three across with the title on a dark fade. Nine
   show, then nine more a click (blog.js). */
.blog-head { padding-block: clamp(32px, 5vw, 56px) clamp(40px, 5vw, 60px); }
.blog-head-inner { display: grid; gap: 18px; }

.blog-list-band { padding-top: clamp(40px, 5vw, 64px); }
.blog-search { display: grid; gap: 14px; margin-bottom: clamp(36px, 4vw, 52px); }
.blog-search-field { position: relative; }
.blog-search-icon { position: absolute; left: 18px; top: 50%; transform: translateY(-50%); color: var(--ash); pointer-events: none; }
.blog-search input {
  width: 100%; min-height: 60px; padding: 12px 18px 12px 54px; border: 2px solid #8C807A; border-radius: var(--radius);
  background: var(--white); color: var(--bark); font-size: var(--fs-body);
}
.blog-search input::placeholder { color: var(--ash); opacity: 1; }
.blog-search input:focus-visible { outline: 3px solid var(--straw-deep); outline-offset: 1px; border-color: var(--bark); }
.blog-topics { display: flex; flex-wrap: wrap; gap: 10px; }
.blog-topic {
  min-height: 44px; padding: 8px 16px; border: 2px solid #8C807A; border-radius: var(--radius);
  background: transparent; color: var(--bark); font-size: var(--fs-sm); font-weight: 600; cursor: pointer;
}
.blog-topic:hover { border-color: var(--bark); }
.blog-topic[aria-pressed="true"] { background: var(--bark); border-color: var(--bark); color: var(--white); }
.blog-topic:focus-visible { outline: 3px solid var(--straw-deep); outline-offset: 2px; }
/* Without scripting the bar could not search, so it is not shown. */
@media (scripting: none) { .blog-search { display: none; } }

.blog-list-head {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 24px;
  padding-bottom: 16px; margin-bottom: clamp(24px, 3vw, 32px); border-bottom: 1px solid var(--rule);
}
.blog-list-head h2 { font-size: var(--fs-h3-lg); }
.blog-list { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2vw, 24px); }
/* Photo, topic badge and text share one grid cell. They are grid items, so z-index
   layers them without positioning, and the title link's ::after still spans the card. */
.blog-card {
  position: relative; display: grid; grid-template: minmax(0, 1fr) / minmax(0, 1fr);
  aspect-ratio: 1; overflow: hidden; border-radius: var(--radius-photo);
}
.blog-card > * { grid-area: 1 / 1; }
.blog-card-photo { z-index: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .25s; }
.blog-card:hover .blog-card-photo { transform: scale(1.03); }
.blog-card-topic {
  z-index: 1; align-self: start; justify-self: start; margin: 16px; padding: 2px 10px; border-radius: 3px;
  font-size: var(--fs-sm); font-weight: 700; line-height: 1.5;
}
.blog-card .blog-card-text {
  z-index: 1; align-self: end; display: grid; gap: 8px;
  padding: 80px clamp(18px, 2vw, 24px) clamp(18px, 2vw, 22px);
  /* Dark under every line of text; only the 80px above the title fades into the photo. */
  background: linear-gradient(to top, rgba(43,28,22,.94), rgba(43,28,22,.8) calc(100% - 80px), rgba(43,28,22,0));
}
.blog-card h3 { font-size: var(--fs-h3); line-height: 1.25; }
main .blog-card h3 a:not(.btn) { color: var(--white); text-decoration: none; }
main .blog-card h3 a:not(.btn)::after { content: ""; position: absolute; inset: 0; }
main .blog-card:hover h3 a:not(.btn) { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .15em; }
main .blog-card h3 a:not(.btn):focus-visible { outline: none; }
.blog-card:has(a:focus-visible) { outline: 3px solid var(--straw-deep); outline-offset: 3px; }
.blog-card-meta { font-size: var(--fs-sm); color: var(--muted); }

.blog-empty { padding-block: 8px 24px; max-width: 60ch; }
.blog-empty button {
  padding: 0; border: 0; background: none; cursor: pointer;
  color: var(--link); font-weight: 600; text-decoration: underline; text-underline-offset: .15em;
}
.blog-more { display: flex; justify-content: center; margin-top: clamp(40px, 5vw, 56px); }

/* ---------------------------------------------------------------- narrow */
@media (max-width: 1000px) {
  .post-layout.has-toc { grid-template-columns: minmax(0, 1fr); }
  .post-toc { position: static; width: 100%; max-width: 66ch; }
}
@media (max-width: 860px) {
  .post-head-grid { grid-template-columns: minmax(0, 1fr); }
  .post-hero-photo img { aspect-ratio: 4 / 3; max-height: none; }
  .post-cta-grid { grid-template-columns: minmax(0, 1fr); }
  .post-cta .actions { justify-content: flex-start; }
  .post-related-list { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 700px) {
  /* Wide tables scroll sideways inside their own box, never the page. */
  .prose table { display: block; overflow-x: auto; }
  .prose th, .prose td { padding-right: 12px; }
}
@media (max-width: 560px) {
  .post-related-item { grid-template-columns: 112px minmax(0, 1fr); gap: 16px; }
  .post-cta .actions .btn { width: 100%; }
}
@media (max-width: 1000px) {
  .blog-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  /* Phones: one card a row, a little shorter than square. */
  .blog-search input { padding-inline: 46px 12px; font-size: var(--fs-ui); }
  .blog-search-icon { left: 14px; }
  .blog-list { grid-template-columns: minmax(0, 1fr); }
  .blog-card { aspect-ratio: 4 / 3; }
  .blog-card .blog-card-text { padding-top: 56px; background: linear-gradient(to top, rgba(43,28,22,.94), rgba(43,28,22,.8) calc(100% - 56px), rgba(43,28,22,0)); }
  .blog-more .btn { width: 100%; }
}
@media (max-width: 560px) {
  /* The post title is the H1 right below, so the last crumb is not repeated on phones. */
  .post-head .crumbs li:last-child { display: none; }
}

/* ==== rules.css ==== */
/* Pillar page: /defensible-space-rules-sonora. Reads like a well-kept code
   book: a dated hero with the contents beside it, then one rule per band,
   answer first, the source under every band. The one loud thing is the
   zone drawing from the homepage, held still here with its bands tinted. */

.rules-hero { padding-block: clamp(32px, 5vw, 64px) var(--band); }
.rules-hero-grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: clamp(28px, 5vw, 64px); align-items: start; }
.rules-hero-text { display: grid; gap: 20px; }
.rules-hero-text > p:not(.lead):not(.rules-checked) { max-width: 62ch; }
.rules-checked { font-size: var(--fs-ui); color: var(--muted); padding-left: 14px; border-left: 4px solid var(--manzanita); }
.rules-checked strong { color: var(--bark); }

.rules-toc {
  padding: clamp(22px, 3vw, 32px); border-radius: var(--radius);
  border-top: 4px solid var(--straw); box-shadow: 0 18px 40px -24px rgba(43,28,22,.45);
}
.rules-toc-title { font-family: var(--font-head); font-size: var(--fs-h3); font-weight: 700; line-height: 1.2; padding-bottom: 12px; margin-bottom: 6px; border-bottom: 2px solid var(--bark); }
.rules-toc ul { list-style: none; }
.rules-toc li { border-bottom: 1px solid var(--rule); }
.rules-toc li:last-child { border-bottom: 0; }
main .rules-toc a:not(.btn) { display: flex; align-items: center; min-height: 44px; padding-block: 6px; font-weight: 500; font-size: var(--fs-ui); line-height: 1.3; text-decoration-thickness: 1px; }

.rules-sec { scroll-margin-top: 76px; }
.rules-sec-grid { display: grid; gap: clamp(28px, 5vw, 64px); }
.rules-sec-grid.has-figure { grid-template-columns: minmax(0, 1.35fr) minmax(0, .85fr); align-items: start; }
.rules-sec-main { display: grid; gap: 20px; max-width: 780px; align-content: start; }
.rules-sec-main > p:not(.lead) { max-width: 66ch; }
.rules-h3 { margin-top: 8px; }

.rules-list { list-style: none; display: grid; gap: 10px; max-width: 66ch; }
.rules-list li { position: relative; padding-left: 26px; }
.rules-list li::before { content: ""; position: absolute; left: 2px; top: .62em; width: 9px; height: 9px; background: var(--manzanita); border-radius: 1px; }

.rules-timeline { list-style: none; display: grid; gap: 0; border-left: 3px solid var(--bark); margin-left: 6px; max-width: 66ch; }
.rules-timeline li { position: relative; display: grid; gap: 2px; padding: 0 0 18px 24px; }
.rules-timeline li:last-child { padding-bottom: 0; }
.rules-timeline li::before { content: ""; position: absolute; left: -9px; top: .45em; width: 15px; height: 15px; border-radius: 50%; background: var(--white); border: 3px solid var(--bark); }
.rules-timeline li:last-child::before { background: var(--manzanita); border-color: var(--manzanita); }
.rules-when { font-family: var(--font-head); font-weight: 700; font-size: var(--fs-h4); }

.rules-status { border-radius: var(--radius); padding: clamp(18px, 2.5vw, 26px); display: grid; gap: 6px; max-width: 66ch; }
.rules-status-label { font-weight: 700; font-size: var(--fs-ui); }
.rules-status-big { font-family: var(--font-head); font-size: var(--fs-h3-lg); font-weight: 800; line-height: 1.1; }

.rules-note { border-left: 4px solid var(--manzanita); padding: 4px 0 4px 16px; max-width: 66ch; }
.rules-extlink { font-size: var(--fs-ui); }

.rules-figure { display: grid; gap: 10px; }
.rules-figure img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius-photo); }
.rules-figure figcaption { color: var(--muted); font-size: var(--fs-sm); }

.rules-aside { display: grid; gap: 20px; align-content: start; padding-top: 18px; border-top: 2px solid var(--bark); }
.rules-cta .btn { flex: 1 1 220px; }
.rules-aside .rules-tbl caption { font-size: var(--fs-h4); }

.rules-wide { display: grid; gap: clamp(28px, 4vw, 44px); margin-top: clamp(32px, 4vw, 48px); }
.rules-wide .rules-list { margin-top: -12px; }

.rules-source { margin-top: clamp(28px, 4vw, 40px); padding-top: 14px; border-top: 1px solid var(--rule); color: var(--muted); font-size: var(--fs-sm); }
main .rules-source a:not(.btn) { font-weight: 500; text-decoration-thickness: 1px; }

/* Tables: the shared .rules-table, widths reset for three and four columns. */
.rules-tbl caption { caption-side: top; text-align: left; font-family: var(--font-head); font-size: var(--fs-h4); font-weight: 700; padding-bottom: 14px; }
.rules-tbl.rules-table tbody th { width: auto; min-width: 9em; }
.rules-tbl.rules-table td:last-child { width: auto; }
.rules-tbl td { min-width: 8em; }
.rules-tbl tbody tr:last-child th, .rules-tbl tbody tr:last-child td { border-bottom: 0; }

/* The drawing, still: bands tinted by how strict the zone is, no picking. */
.rules-drawing { display: grid; gap: 12px; }
.rules-drawing figcaption { color: var(--muted); font-size: var(--fs-sm); }
.rules-drawing .zone-svg .band { cursor: default; transition: none; }
.rules-drawing .zone-svg [data-zone-shape="zone-0"] { fill: rgba(232,184,74,.62); }
.rules-drawing .zone-svg [data-zone-shape="zone-1"] { fill: rgba(232,184,74,.36); }
.rules-drawing .zone-svg [data-zone-shape="zone-2"] { fill: rgba(232,184,74,.14); }

.rules-source-list { list-style: none; columns: 2 380px; column-gap: clamp(28px, 4vw, 56px); }
.rules-source-list li { break-inside: avoid; display: grid; gap: 2px; padding-block: 10px; border-bottom: 1px solid var(--rule); }
main .rules-source-list a:not(.btn) { font-weight: 500; font-size: var(--fs-ui); line-height: 1.35; text-decoration-thickness: 1px; }
.rules-source-list span { color: var(--muted); font-size: var(--fs-sm); }

@media (max-width: 900px) {
  .rules-hero-grid, .rules-sec-grid.has-figure { grid-template-columns: 1fr; }
  .rules-figure { max-width: 560px; }
}
@media (max-width: 700px) {
  .rules-tbl td, .rules-tbl.rules-table tbody th { min-width: 0; }
  .rules-tbl caption { padding-bottom: 4px; }
  .rules-tbl tbody tr:last-child { border-bottom: 0; }
}
@media (max-width: 560px) {
  .rules-hero-text .actions .btn { flex: 1 1 100%; }
}

/* ==== services.css ==== */
/* Services hub (svchub-) and the three service pages (svc-). Same tokens,
   grounds and type as the homepage; rules in bark, photos at 4px radius,
   no shadowed card kits. */

/* ---------------------------------------------------------------- service hero */
.svc-hero { padding-block: clamp(28px, 4.5vw, 64px) clamp(44px, 6vw, 80px); }
.svc-hero-grid {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  grid-template-areas: "text photo" "facts facts";
  column-gap: clamp(28px, 4.5vw, 64px); row-gap: clamp(28px, 4vw, 44px); align-items: start;
}
.svc-hero-text { grid-area: text; display: grid; gap: 20px; }
.svc-hero-text p { max-width: 60ch; }
.svc-hero-photo { grid-area: photo; display: grid; gap: 10px; margin-top: 6px; }
.svc-hero-photo img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius-photo); }
.svc-hero-photo figcaption { color: var(--muted); font-size: var(--fs-sm); }
.svc-facts {
  grid-area: facts; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px 28px;
  border-top: 2px solid var(--bark); padding-top: 20px;
}
.svc-facts div { display: grid; gap: 4px; align-content: start; }
.svc-facts dt { font-family: var(--font-head); font-weight: 700; font-size: var(--fs-h4); line-height: 1.25; }
.svc-facts dd { margin: 0; font-size: var(--fs-ui); line-height: 1.45; color: var(--muted); }
@media (max-width: 960px) {
  .svc-hero-grid { grid-template-columns: 1fr; grid-template-areas: "text" "photo" "facts"; }
  .svc-hero-photo { margin-top: 0; }
  .svc-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .svc-hero .actions .btn { flex: 1 1 100%; }
  .svc-facts { grid-template-columns: 1fr; gap: 14px; }
  .svc-facts div { grid-template-columns: 8.5rem minmax(0, 1fr); gap: 12px; }
}

/* ---------------------------------------------------------------- split sections */
.svc-split { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .9fr); gap: clamp(28px, 5vw, 72px); align-items: start; }
.svc-split-main { display: grid; gap: 20px; }
.svc-split-wide { grid-template-columns: minmax(0, .85fr) minmax(0, 1.25fr); }
.svc-split-head { display: grid; gap: 18px; position: sticky; top: 100px; }
.svc-split-body { display: grid; gap: 20px; }
.svc-split-body h3 { font-size: var(--fs-h3); margin-top: 6px; }
.svc-split-body p { max-width: 64ch; }
@media (max-width: 900px) {
  .svc-split, .svc-split-wide { grid-template-columns: 1fr; }
  .svc-split-head { position: static; }
}

/* A wide table gets the full row: heading on top, table under it. */
.svc-stack { display: grid; gap: clamp(28px, 4vw, 44px); }
.svc-stack .svc-split-head { position: static; max-width: 860px; }
.svc-stack .svc-split-body > p { max-width: 70ch; }

/* Who it is for: a ruled list, the lead review beside it. */
.svc-who-list { list-style: none; border-top: 2px solid var(--bark); }
.svc-who-list li { display: grid; grid-template-columns: minmax(0, 13rem) minmax(0, 1fr); gap: 6px 24px; padding: 16px 0; border-bottom: 1px solid var(--rule); }
.svc-who-list strong { font-family: var(--font-head); font-size: var(--fs-h4); line-height: 1.3; }
.svc-who-list span { font-size: var(--fs-ui); }
@media (max-width: 640px) { .svc-who-list li { grid-template-columns: 1fr; } }
.svc-split-side { position: sticky; top: 100px; }
@media (max-width: 900px) { .svc-split-side { position: static; } }

.svc-review { margin: 0; padding: 26px 26px 22px; border-radius: var(--radius); display: grid; gap: 14px; border-top: 4px solid var(--straw); }
.svc-review blockquote { margin: 0; font-size: var(--fs-lead); line-height: 1.5; }
.svc-review figcaption { display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: center; font-size: var(--fs-sm); }
.svc-review figcaption strong { font-size: var(--fs-ui); }
.svc-review .job { color: var(--muted); }
.svc-review-note { font-size: var(--fs-sm); color: var(--muted); }

/* ---------------------------------------------------------------- what is included */
.svc-includes-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 40px; margin-bottom: clamp(32px, 4vw, 48px); max-width: 1000px; }
@media (max-width: 760px) { .svc-includes-list { grid-template-columns: 1fr; } }
.svc-table { font-size: var(--fs-ui); }
.svc-table td p + ul, .svc-table td ul { margin-top: 0; }
.svc-table .check-list { gap: 6px; }
.svc-table .check-list li { padding-left: 26px; }
.svc-table .check-list li::before { width: 13px; height: 7px; }
.svc-table tbody th span { display: block; font-family: var(--font-body); font-weight: 500; font-size: var(--fs-sm); color: var(--muted); margin-top: 2px; }
.svc-zone-table tbody th { width: 16%; }
.svc-zone-table td:last-child { width: 32%; }
.svc-zone-status { font-weight: 700; margin-bottom: 10px; padding-left: 12px; border-left: 4px solid var(--straw-deep); }
.svc-note { margin-top: 24px; max-width: 70ch; }
/* Two-column tables (fines, seasons) do not need the 30% last column. */
.svc-split-body .svc-table td:last-child { width: auto; }
.svc-split-body .svc-table tbody th { width: 30%; }

/* ---------------------------------------------------------------- proof: pair and photo band */
.svc-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(12px, 2vw, 24px); }
.svc-pair figure, .svc-band figure { margin: 0; display: grid; gap: 10px; align-content: start; }
.svc-photo-link { position: relative; display: block; overflow: hidden; border-radius: var(--radius-photo); background: var(--bark); }
.svc-photo-link img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; transition: transform .3s; }
@media (hover: hover) { .svc-photo-link:hover img { transform: scale(1.02); } }
.svc-photo-link:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
.svc-pair figcaption, .svc-band figcaption { font-size: var(--fs-sm); color: var(--muted); line-height: 1.45; }
.svc-pair figcaption strong, .svc-band figcaption strong { color: var(--white); }
.svc-tag { position: absolute; top: 12px; left: 12px; padding: 4px 10px; border-radius: 3px; font-size: var(--fs-sm); font-weight: 700; line-height: 1.3; }
.svc-tag-before { background: var(--manzanita); color: var(--white); box-shadow: 0 0 0 1px rgba(255,255,255,.35); }
.svc-tag-after { background: var(--straw); color: var(--bark); }
.svc-pair-note { margin-top: 18px; max-width: 70ch; font-size: var(--fs-ui); }
.svc-band-title { font-size: var(--fs-h3); margin: clamp(40px, 5vw, 64px) 0 18px; padding-top: 20px; border-top: 1px solid var(--rule); }
/* The first photo prints large, the other two stack beside it. */
.svc-band { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr); gap: clamp(12px, 2vw, 24px); align-items: start; }
.svc-band figure:first-child .svc-photo-link img { aspect-ratio: 4 / 3; }
.svc-band figure:not(:first-child) .svc-photo-link img { aspect-ratio: 3 / 4; }
@media (max-width: 900px) {
  .svc-band { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .svc-band figure:first-child { grid-column: 1 / -1; }
}
@media (max-width: 520px) { .svc-tag { top: 8px; left: 8px; } }

/* ---------------------------------------------------------------- cost */
.svc-cost-foot { margin-top: clamp(36px, 5vw, 56px); display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 64px); align-items: start; }
.svc-cost-foot h3 { font-size: var(--fs-h3); margin-bottom: 14px; }
.svc-cost-link { margin-top: 22px; }
@media (max-width: 900px) { .svc-cost-foot { grid-template-columns: 1fr; } }

/* ---------------------------------------------------------------- where */
.svc-where-grid { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 64px); align-items: start; }
.svc-where-grid > div:first-child { display: grid; gap: 20px; }
.svc-towns { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 28px; border-top: 2px solid var(--bark); }
.svc-towns li { display: flex; align-items: center; gap: 10px; min-height: 48px; padding-block: 8px; border-bottom: 1px solid var(--rule); font-size: var(--fs-ui); }
.svc-towns li::before { content: ""; width: 10px; height: 10px; flex: none; border: 3px solid var(--manzanita); border-radius: 50%; }
main .svc-towns a:not(.btn) { font-weight: 500; text-decoration-thickness: 1px; }
.svc-hub-link { font-size: var(--fs-ui); }
.svc-reading { border-radius: var(--radius); padding: clamp(22px, 3vw, 32px); border-left: 6px solid var(--manzanita); display: grid; gap: 14px; }
.svc-reading h3 { font-size: var(--fs-h3); }
.svc-reading ul { list-style: none; display: grid; gap: 0; }
.svc-reading li { display: grid; gap: 2px; padding: 12px 0; border-bottom: 1px solid var(--rule); }
.svc-reading li:last-child { border-bottom: 0; padding-bottom: 0; }
.svc-reading span { color: var(--muted); font-size: var(--fs-sm); }
@media (max-width: 900px) { .svc-where-grid { grid-template-columns: 1fr; } }
@media (max-width: 480px) { .svc-towns { grid-template-columns: 1fr; } }

/* ---------------------------------------------------------------- services hub */
.svchub-hero { padding-block: clamp(28px, 4.5vw, 64px) clamp(48px, 6vw, 88px); }
.svchub-hero-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: clamp(28px, 5vw, 72px); align-items: center; }
.svchub-hero-text { display: grid; gap: 22px; }
/* The chooser: what you have in hand, then the service that answers it. */
.svchub-pick { border-radius: var(--radius); padding: clamp(22px, 3vw, 34px); border-top: 4px solid var(--straw); display: grid; gap: 4px; box-shadow: 0 18px 40px -26px rgba(43,28,22,.5); }
.svchub-pick-title { font-size: var(--fs-h3); margin-bottom: 8px; }
.svchub-pick ul { list-style: none; }
.svchub-pick li { display: grid; gap: 4px; padding: 16px 0; border-bottom: 1px solid var(--rule); }
.svchub-pick li span { font-size: var(--fs-ui); color: var(--muted); line-height: 1.45; }
main .svchub-pick li a:not(.btn) { font-family: var(--font-head); font-size: var(--fs-h4); }
.svchub-pick-note { padding-top: 14px; font-size: var(--fs-sm); color: var(--muted); }
main .svchub-pick-note a:not(.btn) { font-weight: 700; }
@media (max-width: 900px) { .svchub-hero-grid { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .svchub-hero .actions .btn { flex: 1 1 100%; } }

/* Three services as columns under a bark rule, photo first. */
.svchub-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px clamp(24px, 3vw, 40px); }
.svchub-card { display: grid; gap: 14px; align-content: start; grid-template-rows: auto auto auto auto 1fr auto auto; }
.svchub-card img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius-photo); margin-bottom: 6px; }
.svchub-card h3 { font-size: var(--fs-h3-lg); padding-top: 14px; border-top: 2px solid var(--bark); }
.svchub-terms { color: var(--muted); font-size: var(--fs-sm); }
.svchub-card > p { font-size: var(--fs-ui); }
.svchub-for { font-weight: 700; }
.svchub-card .check-list li { font-size: var(--fs-ui); }
.svchub-card-link { padding-top: 6px; }
@media (max-width: 960px) {
  .svchub-cards { grid-template-columns: 1fr; gap: 48px; max-width: 640px; }
  .svchub-card { grid-template-rows: none; }
}

.svchub-also-grid { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.4fr); gap: clamp(28px, 5vw, 64px); align-items: start; }
.svchub-also-grid .band-head { margin-bottom: 0; }
.svchub-also-list { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 36px; border-top: 1px solid var(--rule); }
.svchub-also-list li { display: grid; gap: 4px; align-content: start; padding: 18px 0; border-bottom: 1px solid var(--rule); }
.svchub-also-list strong { font-family: var(--font-head); font-size: var(--fs-h4); }
.svchub-also-list span { font-size: var(--fs-ui); color: var(--muted); }
.svchub-also-list .svchub-part { font-size: var(--fs-sm); color: var(--white); }
@media (max-width: 900px) { .svchub-also-grid { grid-template-columns: 1fr; } }
@media (max-width: 600px) { .svchub-also-list { grid-template-columns: 1fr; } }

.svchub-not-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 72px); align-items: start; }
.svchub-not-grid > div:first-child { display: grid; gap: 18px; }
.svchub-not-list { list-style: none; border-top: 2px solid var(--bark); }
.svchub-not-list li { position: relative; padding: 14px 0 14px 32px; border-bottom: 1px solid var(--rule); font-weight: 500; }
/* A short bar, not an X: "not this" without echoing a close icon. */
.svchub-not-list li::before { content: ""; position: absolute; left: 2px; top: calc(14px + .78em); width: 16px; height: 3px; border-radius: 2px; background: var(--manzanita); }
.svchub-handoff { margin-top: 20px; max-width: 60ch; }
@media (max-width: 860px) { .svchub-not-grid { grid-template-columns: 1fr; } }

/* ==== town.css ==== */
/* Town pages (/service-areas/<slug>). Same parts as the homepage and the hub:
   granite hero with the road tag from the hub card, a white band with the
   local story beside a manzanita facts panel, a dark photo band, the services
   with the town's lead service first, then nearby towns, FAQ and the form. */

.town-hero { padding-block: clamp(28px, 4.5vw, 60px) var(--band); }
.town-hero-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: clamp(28px, 5vw, 64px); align-items: center; }
.town-hero-text { display: grid; gap: 20px; }
.town-hero-text .lead { max-width: 58ch; }
.town-hero .town-route { margin-top: 4px; }
.town-hero-photo { display: grid; gap: 10px; }
.town-hero-photo img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius-photo); box-shadow: 0 1px 0 var(--bark); }
.town-hero-photo figcaption { color: var(--muted); font-size: var(--fs-sm); }

.town-local-grid { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 72px); align-items: start; }
.town-local-text { display: grid; gap: 20px; }
.town-local-text p { max-width: 64ch; }
.town-facts { position: sticky; top: 100px; border-top: 6px solid var(--straw); }
.town-facts-list { display: grid; gap: 0; }
.town-facts-list div { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 4px 16px; padding: 14px 0; border-bottom: 1px solid var(--rule); }
.town-facts-list div:first-child { padding-top: 0; }
.town-facts-list dt { font-weight: 700; font-size: var(--fs-ui); }
.town-facts-list dd { margin: 0; font-size: var(--fs-ui); line-height: 1.45; }
.town-facts-note { color: var(--muted); font-size: var(--fs-sm); }

/* Photo band: the first photo large, the rest stacked beside it. */
.town-photo-band { display: grid; gap: clamp(12px, 1.6vw, 20px); }
.town-photo-band-3 { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); grid-template-rows: auto auto; }
.town-photo-band-3 .town-photo:first-child { grid-row: 1 / 3; }
.town-photo-band-2 { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); }
.town-photo { display: grid; gap: 10px; align-content: start; }
.town-photo-link { display: block; overflow: hidden; border-radius: var(--radius-photo); background: var(--bark); }
main .town-photo-link { text-decoration: none; }
.town-photo-link img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; transition: transform .3s; }
.town-photo-link:hover img { transform: scale(1.02); }
.town-photo-link:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
/* The big photo fills the height the two stacked ones set, whatever its own shape. */
.town-photo-band-3 .town-photo:first-child { grid-template-rows: 1fr auto; }
.town-photo-band-3 .town-photo:first-child .town-photo-link { position: relative; min-height: 320px; }
.town-photo-band-3 .town-photo:first-child img { position: absolute; inset: 0; height: 100%; aspect-ratio: auto; }
.town-photo figcaption { color: var(--muted); font-size: var(--fs-sm); max-width: 52ch; }

.town-proof { margin-top: clamp(36px, 5vw, 56px); padding-top: clamp(28px, 4vw, 44px); border-top: 1px solid var(--rule); display: grid; gap: clamp(24px, 3.5vw, 44px); }
.town-proof.has-both { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); align-items: center; }
.town-pair { display: grid; gap: 14px; }
.town-pair figcaption { display: grid; gap: 8px; align-content: start; }
.town-pair figcaption h3 { font-size: var(--fs-h3); }
.town-pair figcaption p { color: var(--muted); font-size: var(--fs-ui); max-width: 44ch; }
.town-pair .town-pair-where { font-size: var(--fs-sm); font-weight: 700; color: var(--straw); }
/* Alone, the slider takes two thirds and its caption sits beside it, as in the homepage jobs. */
.town-proof:not(.has-both) .town-pair { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: clamp(18px, 3vw, 44px); align-items: center; }
.town-review { margin: 0; }
.town-review-head { font-family: var(--font-head); font-weight: 700; font-size: var(--fs-h3); line-height: 1.2; }
.town-review-note { color: var(--muted); font-size: var(--fs-sm); }

/* Services: the town's lead service as a photo card, the other two beside it. */
.town-services-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 56px); align-items: start; }
.town-service-lead { border-radius: var(--radius); overflow: hidden; display: grid; box-shadow: 0 18px 40px -26px rgba(43,28,22,.5); }
.town-service-photo img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.town-service-body { display: grid; gap: 14px; padding: clamp(22px, 3vw, 32px); }
.town-service-body h3, .town-service h3 { font-size: var(--fs-h3-lg); }
main .town-services h3 a:not(.btn) { color: var(--bark); text-decoration-color: var(--manzanita); }
.town-service-more { display: grid; gap: 0; border-top: 2px solid var(--bark); }
.town-service { display: grid; gap: 10px; padding: 24px 0 26px; border-bottom: 1px solid var(--rule); }
.town-service-more .actions { padding-top: 26px; }

.town-nearby-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: clamp(28px, 5vw, 64px); align-items: start; }
.town-nearby-list { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 32px; border-top: 2px solid var(--bark); }
.town-nearby-list li { display: grid; gap: 2px; padding: 14px 0; border-bottom: 1px solid var(--rule); }
main .town-nearby-list a:not(.btn) { font-family: var(--font-head); font-size: var(--fs-h4); }
.town-nearby-list span { color: var(--muted); font-size: var(--fs-sm); }

@media (max-width: 960px) {
  .town-services-grid { grid-template-columns: 1fr; }
}
@media (max-width: 900px) {
  .town-hero-grid, .town-local-grid, .town-nearby-grid { grid-template-columns: 1fr; }
  /* Phones: the photo comes straight under the H1, so real work is on the first screen. */
  .town-hero-grid { gap: 20px; }
  .town-hero-text { display: contents; }
  .town-hero-text > .crumbs { order: 1; }
  .town-hero-text > .town-route { order: 2; margin-top: -8px; }
  .town-hero-text > h1 { order: 3; }
  .town-hero-photo { order: 4; }
  .town-hero-text > .lead { order: 5; }
  .town-hero-text > .actions { order: 6; }
  .town-proof:not(.has-both) .town-pair { grid-template-columns: 1fr; }
  .town-facts { position: static; }
  .town-proof.has-both { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .town-photo-band-3, .town-photo-band-2 { grid-template-columns: 1fr; grid-template-rows: auto; }
  .town-photo-band-3 .town-photo:first-child { grid-row: auto; }
  .town-photo-band-3 .town-photo:first-child .town-photo-link { position: static; min-height: 0; }
  .town-photo-band-3 .town-photo:first-child img { position: static; height: auto; aspect-ratio: 4 / 3; }
}
@media (max-width: 560px) {
  .town-hero .actions .btn { flex: 1 1 100%; }
  .town-nearby-list { grid-template-columns: 1fr; }
  .town-facts-list div { grid-template-columns: 1fr; }
}