/* Inner pages — Quiet Confidence editorial system */

.site-header.inner-header {
  background: rgba(18, 19, 16, 0.96);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  box-shadow:
    0 1px 0 var(--line),
    var(--shadow-1);
}

.inner-page {
  overflow: hidden;
}

.inner-hero {
  min-height: 620px;
  padding: 112px 0 72px;
  display: grid;
  align-items: center;
  border-bottom: 1px solid var(--line);
  background:
    linear-gradient(135deg, rgba(224, 87, 143, 0.055), transparent 38%),
    var(--bg);
}

.inner-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(420px, 0.92fr);
  gap: clamp(42px, 7vw, 86px);
  align-items: center;
}

.breadcrumb ol {
  display: flex;
  align-items: center;
  gap: 9px;
  list-style: none;
  margin: 0 0 28px;
  padding: 0;
  color: var(--muted);
  font-size: 0.8rem;
}

.breadcrumb li + li::before {
  content: "/";
  margin-right: 9px;
  color: var(--line-strong);
}

.breadcrumb a {
  text-underline-offset: 4px;
}

.inner-hero h1 {
  max-width: 760px;
  margin: 0 0 24px;
  font-family: var(--font-display);
  font-size: clamp(2.8rem, 5vw, 4.7rem);
  font-weight: 400;
  line-height: 1.02;
  letter-spacing: -0.025em;
  text-wrap: balance;
}

.inner-hero-lede {
  max-width: 620px;
  margin: 0;
  color: var(--muted);
  font-size: 1.12rem;
}

.confirmation-page .inner-hero {
  min-height: 72svh;
}

.confirmation-copy {
  max-width: 780px;
}

.confirmation-copy .actions {
  margin-top: 32px;
}

.inner-proof {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
  list-style: none;
  margin: 24px 0 0;
  padding: 18px 0 0;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 700;
}

.inner-proof li + li::before {
  content: "·";
  margin-right: 22px;
  color: var(--accent-tint);
}

.inner-hero-media {
  margin: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  background: var(--surface-1);
  box-shadow: var(--shadow-2);
}

.inner-hero-media img {
  width: 100%;
  height: clamp(420px, 46vw, 560px);
  object-fit: cover;
  filter: saturate(0.9) contrast(1.04);
}

.inner-hero-media figcaption {
  padding: 14px 18px;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 0.78rem;
}

.inner-hero-panel {
  min-height: 440px;
  padding: clamp(30px, 5vw, 52px);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  background:
    linear-gradient(145deg, rgba(224, 87, 143, 0.14), transparent 48%),
    var(--surface-1);
  box-shadow: var(--shadow-2);
}

.inner-hero-panel h2 {
  max-width: 12ch;
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(2rem, 4vw, 3.25rem);
  font-weight: 400;
  line-height: 1.06;
}

.inner-hero-panel p {
  max-width: 44ch;
  margin: 24px 0 0;
  color: var(--muted);
}

.panel-links {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 32px;
}

.panel-links a {
  padding: 8px 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--ink);
  font-size: 0.82rem;
  font-weight: 700;
  text-decoration: none;
}

.service-index-grid,
.town-county-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

.service-hub-card,
.town-county-card,
.gallery-state {
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  background: var(--surface-1);
}

.service-hub-card {
  display: flex;
  min-height: 100%;
  flex-direction: column;
  padding: 28px;
}

.service-hub-card h3,
.town-county-card h3,
.gallery-state h2 {
  margin: 0 0 12px;
  font-family: var(--font-display);
  font-size: 1.55rem;
  font-weight: 400;
}

.service-hub-card p,
.town-county-card p,
.gallery-state p {
  color: var(--muted);
}

.service-hub-card ul {
  margin: 0 0 24px;
  padding-left: 20px;
  color: var(--muted);
}

.service-hub-card .text-link {
  margin-top: auto;
  font-weight: 800;
  text-underline-offset: 4px;
}

.town-county-card {
  padding: 26px;
}

.town-count {
  color: var(--accent-tint);
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.town-list {
  columns: 2;
  gap: 26px;
  margin: 20px 0 0;
  padding: 20px 0 0;
  border-top: 1px solid var(--line);
  list-style: none;
}

.town-list li {
  break-inside: avoid;
  margin-bottom: 9px;
  color: var(--ink);
}

.gallery-state {
  min-height: 360px;
  padding: clamp(34px, 6vw, 64px);
  display: grid;
  place-items: center;
  text-align: center;
  background:
    radial-gradient(circle at 50% 0%, rgba(224, 87, 143, 0.13), transparent 42%),
    var(--surface-1);
}

.gallery-state > div {
  max-width: 680px;
}

.gallery-state .actions {
  justify-content: center;
  margin-bottom: 0;
}

/* Native project gallery */
.gallery-hero .inner-hero-grid,
.service-area-hero .inner-hero-grid {
  align-items: center;
}

/* On every other inner page the media is a supporting illustration, so the text
   column leads. On the gallery the lead photograph IS the argument, and at the
   inherited 1.08/0.92 split it rendered at almost exactly the area of a grid
   thumbnail — the feature image carried no more weight than the items it was
   meant to introduce. Widening the media column puts it at roughly 1.5x a
   thumbnail.

   Scoped above 980px on purpose: an unscoped `.gallery-hero .inner-hero-grid`
   out-specifies the `.inner-hero-grid { grid-template-columns: 1fr }` stacking
   rule in the 980 block, which kept the hero in two columns on tablets and
   squeezed the text to 274px. */
@media (min-width: 981px) {
  .gallery-hero .inner-hero-grid {
    grid-template-columns: minmax(0, 0.85fr) minmax(460px, 1.15fr);
  }
}

.gallery-category-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 28px;
}

.gallery-category-nav a {
  padding: 9px 13px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 800;
  text-decoration: none;
}

.gallery-category-nav a:hover,
.gallery-category-nav a:focus-visible,
.gallery-category-nav a[aria-current] {
  border-color: var(--accent-tint);
  color: var(--ink);
}

.gallery-lead,
.gallery-grid figure {
  margin: 0;
}

.gallery-lead {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  background: var(--surface-1);
  box-shadow: var(--shadow-2);
}

/* The source is a true 4:3 (1600x1200), so honouring the ratio crops nothing.
   The previous fixed `height` silently defeated `aspect-ratio` — when width and
   height are both set, the ratio is ignored — which forced this image into a
   0.90 box and cut a third of it away. */
.gallery-lead img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.gallery-lead figcaption {
  display: grid;
  gap: 5px;
  padding: 18px 20px 20px;
  color: var(--ink);
  font-size: 0.92rem;
}

.gallery-lead figcaption span {
  color: var(--accent-tint);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.gallery-section-heading,
.service-area-intro {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(280px, 0.85fr);
  gap: clamp(28px, 7vw, 90px);
  align-items: end;
  margin-bottom: 34px;
}

.gallery-section-heading h2,
.service-area-intro h2 {
  margin-bottom: 0;
}

.gallery-section-heading > p,
.service-area-intro > p {
  margin: 0;
  color: var(--muted);
}

/* Masonry rather than a fixed grid.

   The library is 8 portrait 3:4 phone photos and 1 landscape 4:3. The previous
   layout assigned two "feature" cells a 16/11 landscape ratio and cropped the
   portrait sources into them, discarding 48% of each image; the lone landscape
   shot was squeezed into a portrait cell and lost 42% of its width. In a
   gallery the crop is the product, so the layout now adapts to the photograph
   instead of the other way round.

   CSS columns give true masonry with no JS and no fixed heights, so every
   image keeps its own ratio and nothing is cut. */
.gallery-grid {
  display: block;
  column-count: 3;
  column-gap: 18px;
}

.gallery-grid figure {
  break-inside: avoid;
  margin-bottom: 18px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  background: var(--surface-1);
}

/* A category holding a single photograph would otherwise fill column one and
   leave two empty, reading as a broken grid. Self-correcting: the rule stops
   applying as soon as a second image is added to that category. */
.gallery-grid:has(> figure:only-child) {
  column-count: 1;
  max-width: 460px;
}

.gallery-grid figure img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
  transition: transform var(--dur-mid) var(--ease);
}

.gallery-grid figcaption {
  padding: 15px 17px 17px;
  color: var(--ink);
  font-size: 0.86rem;
}

.gallery-image-button {
  display: block;
  width: 100%;
  padding: 0;
  overflow: hidden;
  border: 0;
  background: transparent;
  color: inherit;
  cursor: zoom-in;
}

.gallery-image-button:hover img,
.gallery-image-button:focus-visible img {
  transform: scale(1.025);
}

.gallery-image-button:focus-visible {
  outline: 3px solid var(--accent-tint);
  outline-offset: -3px;
}

.gallery-lightbox {
  width: min(92vw, 1100px);
  max-width: none;
  max-height: 92vh;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-card);
  background: var(--surface-1);
  color: var(--ink);
  box-shadow: var(--shadow-2);
}

.gallery-lightbox::backdrop {
  background: rgba(5, 5, 5, 0.86);
  backdrop-filter: blur(5px);
}

.gallery-dialog-bar {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  align-items: center;
  padding: 13px 16px;
  border-bottom: 1px solid var(--line);
}

.gallery-dialog-bar p {
  margin: 0;
  font-size: 0.86rem;
}

.gallery-dialog-close {
  padding: 8px 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: 0.78rem;
  font-weight: 800;
  cursor: pointer;
}

.gallery-lightbox > img {
  display: block;
  width: 100%;
  height: min(78vh, 820px);
  object-fit: contain;
  background: #080808;
}

/* Accurate Connecticut service-area atlas */
.service-area-map {
  margin: 0;
  padding: clamp(22px, 3vw, 34px);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  background:
    radial-gradient(circle at 22% 12%, rgba(224, 87, 143, 0.12), transparent 38%),
    var(--surface-1);
  box-shadow: var(--shadow-2);
}

.service-map-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 150px;
  gap: 18px;
  align-items: center;
}

.service-area-map svg {
  display: block;
  width: 100%;
  height: auto;
}

.county-base path,
.county-selected path {
  vector-effect: non-scaling-stroke;
}

.county-base path {
  fill: rgba(255, 255, 255, 0.018);
  stroke: rgba(242, 239, 232, 0.24);
  stroke-width: 1.2;
}

.county-selected path {
  fill: rgba(224, 87, 143, 0.025);
  stroke: var(--accent-tint);
  stroke-width: 2;
}

.county-markers circle {
  fill: var(--accent-tint);
  stroke: var(--surface-1);
  stroke-width: 2;
}

.county-markers text {
  fill: #121310;
  font-size: 11px;
  font-weight: 900;
  text-anchor: middle;
}

.service-map-legend {
  display: grid;
  gap: 7px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.service-map-legend a {
  display: grid;
  grid-template-columns: 24px 1fr auto;
  gap: 8px;
  align-items: center;
  padding: 8px 9px;
  border: 1px solid var(--line);
  border-radius: 10px;
  color: var(--ink);
  font-size: 0.72rem;
  text-decoration: none;
}

.service-map-legend a:hover,
.service-map-legend a:focus-visible {
  border-color: var(--accent-tint);
}

.service-map-legend span {
  display: grid;
  width: 22px;
  height: 22px;
  place-items: center;
  border-radius: 50%;
  background: var(--accent-tint);
  color: #121310;
  font-weight: 900;
}

.service-map-legend b {
  color: var(--accent-tint);
}

.service-area-map figcaption {
  margin-top: 18px;
  padding-top: 15px;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 0.72rem;
  line-height: 1.55;
}

.service-area-page .town-county-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.service-area-page .town-county-card:first-child {
  grid-row: span 2;
}

.service-area-page .town-list {
  columns: 3;
}

.service-area-page .town-county-card:not(:first-child) .town-list {
  columns: 2;
}

.service-confirmation-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  justify-content: flex-end;
}

.detail-section {
  padding: var(--space-section) 0;
}

.detail-section.alt {
  border-block: 1px solid var(--line);
  background: var(--surface-1);
}

.detail-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(320px, 0.92fr);
  gap: clamp(46px, 7vw, 84px);
  align-items: start;
}

.detail-copy {
  max-width: 720px;
}

.detail-copy h2,
.about-story h2,
.owner-deep-dive h2,
.related-services h2,
.final-cta h2 {
  margin: 0 0 24px;
  font-family: var(--font-display);
  font-size: var(--fs-h2);
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

.detail-copy h3 {
  margin: 34px 0 10px;
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 400;
}

.detail-copy p,
.about-story p,
.owner-deep-dive p {
  color: var(--muted);
}

.detail-copy .lede,
.about-story .lede {
  color: var(--ink);
  font-family: var(--font-display);
  font-size: clamp(1.3rem, 2.2vw, 1.75rem);
  line-height: 1.42;
}

.detail-list {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--line);
}

.detail-list li {
  padding: 17px 2px;
  border-bottom: 1px solid var(--line);
}

.detail-list strong {
  display: block;
  margin-bottom: 3px;
  color: var(--ink);
}

.detail-list span {
  color: var(--muted);
  font-size: 0.94rem;
}

.detail-media {
  margin: 0;
}

.detail-media img {
  width: 100%;
  max-height: 520px;
  object-fit: cover;
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-1);
}

.detail-media figcaption {
  margin-top: 10px;
  color: var(--muted);
  font-size: 0.76rem;
}

.problem-grid,
.values-grid,
.related-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}

.problem-card,
.value-card,
.related-card {
  padding: 26px;
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  background: var(--surface-1);
}

.problem-card h3,
.value-card h3,
.related-card h3 {
  margin: 0 0 8px;
  font-family: var(--font-display);
  font-size: 1.28rem;
  font-weight: 400;
}

.problem-card p,
.value-card p,
.related-card p {
  margin: 0;
  color: var(--muted);
  font-size: 0.94rem;
}

.related-card {
  position: relative;
  transition:
    transform var(--dur-mid) var(--ease),
    border-color var(--dur-mid) var(--ease);
}

.related-card:hover {
  transform: translateY(-3px);
  border-color: var(--line-strong);
}

.related-card a {
  font-weight: 700;
  text-underline-offset: 4px;
}

.about-story {
  max-width: 820px;
  margin-inline: auto;
}

.about-story p {
  margin: 0 0 24px;
  font-size: 1.08rem;
}

.family-statement {
  margin: 50px 0 0;
  padding: 34px 0 0;
  border-top: 1px solid var(--line);
  font-family: var(--font-display);
  font-size: clamp(2rem, 4vw, 3.7rem);
  line-height: 1.05;
  text-wrap: balance;
}

.family-statement em {
  color: var(--accent-tint);
  font-weight: 400;
}

.owner-deep-dive {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(42px, 7vw, 80px);
  align-items: center;
}

.owner-deep-dive figure {
  margin: 0;
}

.owner-deep-dive img {
  width: 100%;
  height: auto;
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-2);
}

.owner-deep-dive .owner-title {
  color: var(--accent-tint);
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}

.owner-deep-dive .actions {
  margin-bottom: 0;
}

.credential-strip {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0 28px;
  list-style: none;
  margin: 52px auto 0;
  padding: 10px 0 0;
  border-top: 1px solid var(--line);
}

.credential-strip li {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
  font-size: 0.9rem;
}

.credential-strip > li > span:first-child {
  color: var(--muted);
}

.credential-strip > li > span:last-child {
  font-weight: 700;
  text-align: right;
}

.credential-strip .manufacturer-credentials {
  display: grid;
  gap: 8px;
}

.credential-strip .credential-stack {
  display: grid;
  gap: 5px;
  justify-items: end;
  text-align: right;
}

.credential-strip .credential-stack > span,
.credential-strip .credential-stack a {
  color: var(--ink);
}

.credential-strip .credential-stack a {
  display: inline-grid;
  gap: 2px;
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, var(--accent-tint) 72%, transparent);
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}

.credential-strip .credential-stack a:hover,
.credential-strip .credential-stack a:focus-visible {
  color: var(--accent-tint);
}

.credential-strip .credential-stack .credential-link-note {
  color: var(--muted);
  font-size: 0.8rem;
  font-weight: 400;
  line-height: 1.35;
  text-align: inherit;
  text-decoration: none;
}

.final-cta {
  padding: clamp(3.5rem, 8vw, 6.5rem) 0;
  border-block: 1px solid var(--line);
  background:
    linear-gradient(110deg, rgba(224, 87, 143, 0.1), transparent 45%),
    var(--surface-1);
}

.final-cta-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 40px;
  align-items: center;
}

.final-cta h2 {
  max-width: 720px;
  margin-bottom: 0;
}

.final-cta .actions {
  margin: 0;
}

.inner-page + .site-footer {
  padding-bottom: 120px;
}

/* Meet Our Team — text-led editorial roster */
.team-hero .actions {
  margin-bottom: 0;
}

.team-hero-roster {
  align-self: stretch;
  display: grid;
  align-content: center;
}

.team-hero-roster ol {
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--line);
  list-style: none;
}

.team-hero-roster li {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) minmax(130px, 0.78fr);
  gap: 16px;
  align-items: center;
  padding: 18px 0;
  border-bottom: 1px solid var(--line);
}

.team-initials,
.team-roster-role,
.team-member-role {
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.team-initials,
.team-member-role {
  color: var(--accent-tint);
}

.team-roster-name {
  font-family: var(--font-display);
  font-size: 1.18rem;
  line-height: 1.2;
}

.team-roster-role {
  color: var(--muted);
  line-height: 1.45;
  text-align: right;
}

.team-opening-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.82fr) minmax(360px, 1.18fr);
  gap: clamp(42px, 8vw, 104px);
  align-items: start;
}

.team-opening h2,
.team-directory-heading h2 {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--fs-h2);
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

.team-opening-copy {
  max-width: 60ch;
  margin: 0;
  color: var(--muted);
  font-family: var(--font-display);
  font-size: clamp(1.3rem, 2.2vw, 1.7rem);
  line-height: 1.45;
}

.team-directory-heading {
  max-width: 720px;
  margin-bottom: 38px;
}

.team-directory {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: clamp(42px, 7vw, 88px);
}

.team-member {
  padding: 30px 0 36px;
  border-top: 1px solid var(--line);
}

.team-member-role {
  margin: 0 0 12px;
}

.team-member h3 {
  margin: 0 0 18px;
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 3vw, 2.4rem);
  font-weight: 400;
  line-height: 1.08;
  letter-spacing: -0.015em;
}

.team-member > p:last-child {
  max-width: 58ch;
  margin: 0;
  color: var(--muted);
}

.team-closing-copy {
  max-width: 760px;
}

.team-closing-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(340px, 0.72fr);
  gap: clamp(42px, 7vw, 88px);
  align-items: center;
}

.team-closing-copy p:last-child {
  max-width: 67ch;
  margin: 0;
  color: var(--muted);
}

.team-closing-copy .actions {
  justify-content: flex-start;
  margin: 32px 0 0;
}

.team-closing-media {
  width: min(100%, 430px);
  margin: 0;
  justify-self: end;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  background: var(--surface-2);
  box-shadow: var(--shadow-2);
}

.team-closing-media picture,
.team-closing-media img {
  display: block;
  width: 100%;
}

.team-closing-media img {
  height: auto;
}

@media (max-width: 980px) {
  .inner-hero {
    min-height: 0;
  }
  .inner-hero-grid,
  .detail-grid,
  .owner-deep-dive,
  .final-cta-inner {
    grid-template-columns: 1fr;
  }
  .inner-hero-media img {
    height: 420px;
  }
  .problem-grid,
  .values-grid,
  .related-grid {
    grid-template-columns: 1fr 1fr;
  }
  .credential-strip {
    grid-template-columns: 1fr 1fr;
  }
  .final-cta .actions {
    justify-content: flex-start;
  }
  .service-index-grid,
  .town-county-grid {
    grid-template-columns: 1fr 1fr;
  }
  .gallery-section-heading,
  .service-area-intro {
    grid-template-columns: 1fr;
    gap: 14px;
  }
  .gallery-grid {
    column-count: 2;
  }
  .service-area-page .town-list,
  .service-area-page .town-county-card:not(:first-child) .town-list {
    columns: 2;
  }
  .service-confirmation-actions {
    justify-content: flex-start;
  }
  .team-opening-grid,
  .team-directory {
    grid-template-columns: 1fr;
  }
  .team-opening-grid {
    gap: 26px;
  }
  .team-closing-layout {
    grid-template-columns: 1fr;
  }
  .team-closing-media {
    width: min(100%, 520px);
    justify-self: start;
  }
}

@media (max-width: 760px) {
  /* Small-label floor. These are uppercase and letter-spaced, which costs
     legibility on top of the small size, and several were rendering at 11.2px
     on a phone. Raised to 13px on small screens only — the desktop type scale
     is part of the approved system and is left alone. */
  .eyebrow,
  .gallery-lead figcaption span,
  .team-initials,
  .team-roster-role,
  .team-member-role,
  .gallery-category-nav a,
  .town-county-card .town-note {
    font-size: 0.8125rem;
  }

  .inner-hero {
    padding: 88px 0 64px;
  }
  /* Service-page H1s carry service + location since 2026-08-08, so they run
     ~80 chars and wrap to 6 lines here. At the previous 48px/112px the primary
     CTA fell past a toolbar-visible iPhone viewport (~664px). */
  .inner-hero h1 {
    font-size: clamp(2.1rem, 10.5vw, 2.65rem);
  }
  .inner-hero-lede {
    font-size: 1rem;
  }
  .inner-hero-media img {
    height: 300px;
  }
  .inner-proof {
    display: grid;
    gap: 8px;
  }
  .inner-proof li + li::before {
    content: none;
  }
  .problem-grid,
  .values-grid,
  .related-grid,
  .credential-strip {
    grid-template-columns: 1fr;
  }
  .credential-strip .credential-stack {
    justify-items: start;
    text-align: left;
  }
  .detail-section {
    padding: 70px 0;
  }
  .family-statement {
    padding-top: 26px;
  }
  .final-cta .actions,
  .final-cta .button {
    width: 100%;
  }
  .compact-mobile-hero .breadcrumb,
  .compact-mobile-hero .inner-proof,
  .compact-mobile-hero .inner-hero-panel,
  .compact-mobile-hero .team-hero-roster,
  .compact-mobile-hero .actions .button:not(.primary) {
    display: none;
  }
  .compact-mobile-hero .inner-hero-grid {
    display: block;
  }
  .compact-mobile-hero .inner-hero {
    min-height: calc(100svh - 68px);
    padding-top: 124px;
    align-items: start;
  }
  .compact-mobile-hero .actions {
    margin-bottom: 0;
  }
  .compact-mobile-hero .actions .button.primary {
    width: 100%;
  }
  .service-index-grid,
  .town-county-grid {
    grid-template-columns: 1fr;
  }
  .gallery-hero,
  .service-area-hero {
    padding-top: 98px;
  }
  .gallery-category-nav {
    flex-wrap: nowrap;
    margin-right: calc(50% - 50vw);
    padding-right: 20px;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .gallery-category-nav a {
    flex: 0 0 auto;
  }
  /* Two columns on phones. The images stay at their own ratio here too — the
     old `height: 260px; aspect-ratio: 4/3` cropped the portrait sources hardest
     on the screen where the photos matter most. Uncropped full-width portraits
     would run the page past 7,000px, so this stays a browsable index and the
     existing lightbox does the detail viewing. */
  .gallery-grid {
    column-count: 2;
    column-gap: 14px;
  }
  .gallery-grid figure {
    margin-bottom: 14px;
  }
  .gallery-lightbox {
    width: calc(100vw - 20px);
    max-height: calc(100svh - 20px);
  }
  .gallery-lightbox > img {
    height: calc(100svh - 92px);
  }
  .service-map-layout {
    grid-template-columns: 1fr;
  }
  .service-map-legend {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .service-area-page .town-county-grid {
    grid-template-columns: 1fr;
  }
  .service-area-page .town-county-card:first-child {
    grid-row: auto;
  }
  .service-area-page .town-list,
  .service-area-page .town-county-card:not(:first-child) .town-list {
    columns: 2;
  }
  .service-confirmation-actions,
  .service-confirmation-actions .button {
    width: 100%;
  }
  .town-list {
    columns: 1;
  }
  .gallery-state .actions,
  .gallery-state .button {
    width: 100%;
  }
  .team-closing-copy .actions,
  .team-closing-copy .button,
  .team-closing-media {
    width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .gallery-grid figure img {
    transition: none;
  }
}