.page-title__heading {
  margin: 0; margin-inline: auto; max-inline-size: var(--content-width); color: var(--white); font-size: calc(var(--h1) * 1.25); text-wrap: balance;
}
.site-footer__link {
  color: var(--text-light-muted); font-size: var(--text-xs); letter-spacing: 0.15em; text-decoration: none; text-transform: uppercase; text-underline-offset: 0.3em; transition: color var(--transition-duration); &:hover, &:focus-visible, &[aria-current='page'] { color: var(--white); text-decoration: underline; } &:focus-visible { outline-color: var(--white); } @media (prefers-reduced-motion: reduce) { & { transition: none; } }
}
.site-header {
  position: fixed; inset-block-start: 0; inset-inline: 0; z-index: 10; padding-block: var(--space-s); padding-inline: var(--gutter); background-color: transparent; transition: padding-block var(--transition-duration), box-shadow var(--transition-duration); &:not([data-nav-js]), &[data-scrolled], &[data-nav-open] { padding-block: var(--space-xs); background-image: linear-gradient(45deg, var(--primary) 0%, var(--accent) 100%); box-shadow: var(--box-shadow-1); } &[data-scrolled] .site-header__logo-img, &:not([data-nav-js]) .site-header__logo-img { inline-size: var(--space-xl); } @media (prefers-reduced-motion: reduce) { &, & .site-header__logo-img { transition: none; } } @media (width < 48em) { &[data-nav-js] .site-header__inner { justify-content: space-between; } &[data-nav-js] .site-header__toggle { display: inline-flex; } &[data-nav-js] .site-header__nav { display: none; flex-basis: 100%; padding-block-end: var(--space-xs); } &[data-nav-open] .site-header__nav { display: block; } &[data-nav-js] .site-header__menu { flex-direction: column; align-items: stretch; gap: 0; } &[data-nav-js] .site-header__item + .site-header__item { border-block-start: var(--divider-light); } &[data-nav-js] .site-header__link { display: block; padding-block: var(--space-s); } }
}
.legal__list {
  display: flex; flex-direction: column; gap: calc(var(--space-xs) / 2); margin: 0; padding-inline-start: var(--space-m); color: var(--text-dark); font-size: var(--text-m); list-style: disc outside;
}
.legal__heading {
  margin: 0; margin-block-start: var(--space-m); color: var(--primary); font-size: var(--h3);
}
.hero__lede {
  margin: 0; max-inline-size: 60ch; color: var(--white); font-size: var(--text-m); text-wrap: pretty;
}
.site-header__inner {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-xs) var(--space-m); max-inline-size: var(--content-width); margin-inline: auto; @media (width < 40em) { & { justify-content: center; } }
}
.gallery {
  display: block; padding-block: var(--section-space-m); padding-inline: var(--gutter);
}
.map-embed__placeholder {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-s); padding: var(--space-l); text-align: center;
}
.contact-card__link {
  color: var(--white); text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--white) 50%, transparent); text-underline-offset: 0.2em; &:hover { color: var(--white); text-decoration-color: var(--white); } &:focus-visible { outline-color: var(--white); }
}
.services {
  padding-block: var(--section-space-m); padding-inline: var(--gutter); background-color: var(--white);
}
.services__inner {
  display: flex; flex-direction: column; align-items: center; gap: var(--space-xl); inline-size: 100%; max-inline-size: var(--content-width); margin-inline: auto;
}
.testimonial-slider__track {
  display: grid; gap: var(--space-xl); inline-size: 100%; margin: 0; padding: 0; list-style: none;
}
.map-embed__actions {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--space-s) var(--space-m);
}
.testimonial__role {
  color: var(--text-dark-muted); font-size: var(--text-xs); letter-spacing: 0.1em; text-transform: uppercase;
}
.testimonial__text {
  margin: 0; max-inline-size: none; color: var(--text-dark); font-size: var(--text-l); line-height: var(--text-l-line-height, var(--text-line-height)); font-style: italic; text-align: center; text-wrap: pretty; quotes: '\201C' '\201D'; &::before { content: open-quote; } &::after { content: close-quote; }
}
.page-title--contact {
  background-image: url('../assets/header-background-2.webp');
}
.hero {
  position: relative; isolation: isolate; display: grid; place-items: center; min-block-size: 30vw; padding-block-start: calc(var(--header-offset, 0px) + var(--section-space-s)); padding-block-end: var(--section-space-m); padding-inline: var(--gutter); background-color: var(--black); background-image: url('../assets/dc-plumbing-heating-office-vans.webp'); background-size: cover; background-position: center; background-attachment: fixed; text-align: center; &::before { content: ''; position: absolute; inset: 0; z-index: -1; background: color-mix(in srgb, var(--black) 40%, transparent); }
}
.cta-banner__btn {
  text-transform: uppercase; letter-spacing: 0.08em;
}
.hero__inner {
  display: flex; flex-direction: column; align-items: center; gap: var(--space-m); inline-size: 100%; max-inline-size: var(--content-width);
}
.testimonial-slider__btn {
  display: inline-grid; place-items: center; inline-size: var(--space-l); block-size: var(--space-l); padding: 0; border: 0; border-radius: var(--radius); background-color: var(--base-dark); color: var(--white); cursor: pointer; transition: background-color var(--transition-duration); &:hover { background-color: var(--primary); } &:focus-visible { outline: var(--focus-width, 2px) solid var(--primary); outline-offset: var(--focus-offset, 2px); } @media (prefers-reduced-motion: reduce) { & { transition: none; } }
}
.services__item {
  display: flex; flex-direction: column; align-items: center; gap: var(--space-xs); text-align: center;
}
.hero__title {
  margin: 0; color: var(--white); font-size: calc(var(--h1) * 1.25); text-wrap: balance;
}
.map-embed__link {
  color: var(--primary); font-size: var(--text-s); text-decoration: underline; text-underline-offset: 0.2em; &:hover { color: var(--primary-hover); }
}
.legal__inner {
  display: flex; flex-direction: column; gap: var(--space-s); max-inline-size: 70ch; margin-inline: auto;
}
.contact-card__address {
  color: var(--white); font-style: normal;
}
.site-header__link {
  display: inline-block; padding-block: var(--space-xs); color: var(--white); font-size: var(--text-s); letter-spacing: 0.08em; text-decoration: none; text-transform: uppercase; text-underline-offset: 0.4em; text-decoration-thickness: calc(var(--divider-size) * 2); &:hover, &[aria-current='page'] { color: var(--white); text-decoration: underline; } &:focus-visible { outline-color: var(--white); text-decoration: underline; }
}
.page-title--testimonials {
  background-image: url('../assets/header-background.webp');
}
.site-footer {
  padding-block: var(--space-l); padding-inline: var(--gutter); background-color: var(--base-ultra-dark);
}
.testimonial {
  display: flex; flex-direction: column; align-items: center; gap: var(--space-xs); margin: 0; padding: 0; border: 0; background: none; box-shadow: none; text-align: center;
}
.gallery__grid {
  column-width: calc(var(--space-xxl) * 4); column-gap: var(--grid-gap); margin: 0; padding: 0; list-style: none;
}
.page-title--gallery {
  background-image: url('../assets/dc-plumbing-heating-football-sponsor.webp');
}
.contact-card__role {
  margin: 0; padding-block-end: var(--space-s); border-block-end: var(--divider-light); color: var(--white); font-size: var(--text-s); letter-spacing: 0.1em; text-transform: uppercase;
}
.site-footer__inner {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: var(--space-xs) var(--space-m); max-inline-size: var(--content-width); margin-inline: auto; & > :first-child { justify-self: start; } & > :nth-child(2) { justify-self: center; } & > :last-child { justify-self: end; text-align: end; } @media (width < 48em) { & { grid-template-columns: 1fr; text-align: center; } & > :first-child, & > :nth-child(2), & > :last-child { justify-self: center; text-align: center; } }
}
:where([data-etch-element="container"]) {
  inline-size: 100%;
  display: flex;
  flex-direction: column;
  max-inline-size: var(--content-width, 1366px);
  align-self: center; margin-inline: auto;
}
:where([data-etch-element="flex-div"]) {
  inline-size: 100%;
  display: flex;
  flex-direction: column;
}
:where([data-etch-element="iframe"]) {
  inline-size: 100%;
  height: auto;
 aspect-ratio: 16/9;
}
:where([data-etch-element="section"]) {
  inline-size: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.legal__text {
  margin: 0; color: var(--text-dark); font-size: var(--text-m); text-wrap: pretty;
}
.site-footer__social {
  margin: 0; color: var(--text-light-muted); font-size: var(--text-xs); letter-spacing: 0.15em; text-transform: uppercase;
}
.gallery__item {
  break-inside: avoid; margin-block-end: var(--grid-gap);
}
.testimonial-slider {
  display: flex; flex-direction: column; align-items: center; gap: var(--space-m); max-inline-size: 60ch; margin-inline: auto; &:not([data-slider-js]) .testimonial-slider__controls { display: none; }
}
.contact-card__name {
  margin: 0; color: var(--white); font-size: var(--h4); letter-spacing: 0.05em; text-transform: uppercase;
}
.contact-card__lines {
  display: flex; flex-direction: column; gap: calc(var(--space-xs) / 2); margin: 0; padding: 0; list-style: none;
}
.testimonial-slider__controls {
  display: flex; justify-content: center; gap: calc(var(--space-xs) / 2);
}
.testimonial-slider__slide {
  &[hidden] { display: none; }
}
.map-embed__frame {
  position: absolute; inset: 0; inline-size: 100%; block-size: 100%; border: 0;
}
.contact__map {
  inline-size: 100%;
}
.testimonial__cite {
  display: flex; flex-direction: column; align-items: center; gap: calc(var(--space-xs) / 2); text-align: center;
}
.testimonial__name {
  color: var(--text-dark); font-size: var(--text-l); font-weight: 400;
}
.site-header__menu {
  display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-2xs, var(--space-xs)) var(--space-m); margin: 0; padding: 0; list-style: none;
}
.legal__link {
  color: var(--primary); text-decoration: underline; text-underline-offset: 0.2em; overflow-wrap: anywhere; &:hover { color: var(--primary-hover); }
}
.map-embed__notice {
  margin: 0; max-inline-size: 60ch; color: var(--text-dark-muted); font-size: var(--text-s); text-wrap: pretty;
}
.contact {
  display: block; padding-block: var(--section-space-m); padding-inline: var(--gutter);
}
.testimonials {
  display: block; padding-block: var(--section-space-m); padding-inline: var(--gutter); background-color: var(--white);
}
.gallery__img {
  display: block; inline-size: 100%; block-size: auto; border-radius: var(--radius); box-shadow: var(--box-shadow-1);
}
.site-main {
  --header-offset: calc(var(--space-xxl) + var(--space-s) * 2); display: flex; flex-direction: column; align-items: stretch; inline-size: 100%;
}
.site-footer__social-link {
  color: inherit; text-decoration: none; text-underline-offset: 0.3em; transition: color var(--transition-duration); &:hover, &:focus-visible { color: var(--white); text-decoration: underline; } &:focus-visible { outline-color: var(--white); } @media (prefers-reduced-motion: reduce) { & { transition: none; } }
}
.site-header__logo-img {
  display: block; inline-size: var(--space-xxl); block-size: auto; transition: inline-size var(--transition-duration);
}
.services__title {
  margin: 0; color: var(--primary); font-weight: 400; text-align: center; &::after { content: ''; display: block; inline-size: var(--space-xxl); margin-block-start: var(--space-s); margin-inline: auto; border-block-end: calc(var(--divider-size) * 2) solid var(--primary); }
}
.testimonial__quote {
  margin: 0; padding: 0; border: 0;
}
.cta-banner {
  padding-block: var(--section-space-m); padding-inline: var(--gutter); background-image: linear-gradient(45deg, var(--primary) 0%, var(--accent) 100%); text-align: center;
}
.gallery__inner {
  max-inline-size: var(--content-width); margin-inline: auto;
}
.services__name {
  margin: 0; color: var(--text-dark); font-size: var(--text-m); font-weight: 600;
}
.site-header__toggle-icon {
  position: relative; display: block; inline-size: 1.25em; block-size: calc(var(--divider-size) * 2); background: currentColor; transition: background var(--transition-duration); &::before, &::after { content: ''; position: absolute; inset-inline: 0; block-size: 100%; background: currentColor; transition: transform var(--transition-duration); } &::before { inset-block-start: -0.4em; } &::after { inset-block-start: 0.4em; } @media (prefers-reduced-motion: reduce) { &, &::before, &::after { transition: none; } }
}
.legal {
  display: block; padding-block: var(--section-space-m); padding-inline: var(--gutter); background-color: var(--white);
}
.site-header__toggle {
  display: none; align-items: center; gap: var(--space-xs); padding: var(--space-xs) var(--space-s); border: var(--border-light); border-radius: var(--radius); background: transparent; color: var(--white); font: inherit; font-size: var(--text-s); letter-spacing: 0.08em; text-transform: uppercase; cursor: pointer; &:hover { background: color-mix(in srgb, var(--white) 10%, transparent); } &:focus-visible { outline: var(--focus-width, 2px) solid var(--white); outline-offset: var(--focus-offset, 2px); } &[aria-expanded='true'] .site-header__toggle-icon { background: transparent; } &[aria-expanded='true'] .site-header__toggle-icon::before { transform: translateY(0.4em) rotate(45deg); } &[aria-expanded='true'] .site-header__toggle-icon::after { transform: translateY(-0.4em) rotate(-45deg); }
}
.testimonial-slider__icon {
  display: block; inline-size: 50%; block-size: auto;
}
.cta-banner__inner {
  display: flex; flex-direction: column; align-items: center; gap: var(--space-m); max-inline-size: var(--content-width); margin-inline: auto;
}
.map-embed__address {
  margin: 0; color: var(--text-dark); font-size: var(--text-m); font-weight: 600; text-wrap: balance;
}
.testimonials__inner {
  max-inline-size: var(--content-width); margin-inline: auto;
}
.site-footer__copy {
  margin: 0; color: var(--text-light-muted); font-size: var(--text-xs); letter-spacing: 0.15em; text-transform: uppercase;
}
.page-title--plain {
  background-image: linear-gradient(45deg, var(--primary) 0%, var(--accent) 100%); &::before { display: none; }
}
.contact-card__line {
  color: var(--white); overflow-wrap: anywhere;
}
.page-title {
  position: relative; isolation: isolate; display: block; padding-block-start: calc(var(--header-offset, 0px) + var(--section-space-m)); padding-block-end: var(--section-space-m); padding-inline: var(--gutter); background-color: var(--black); background-size: cover; background-position: center; background-attachment: fixed; text-align: center; &::before { content: ''; position: absolute; inset: 0; z-index: -1; background: color-mix(in srgb, var(--black) 70%, transparent); }
}
.legal__updated {
  margin: 0; color: var(--text-dark-muted); font-size: var(--text-s);
}
.hero__cta {
  margin-block-start: var(--space-xs); text-transform: uppercase; letter-spacing: 0.08em;
}
.legal__item {
  display: list-item; &::marker { color: var(--primary); }
}
.services__icon {
  display: block; inline-size: 100%; max-inline-size: calc(var(--space-xxl) * 3); block-size: auto;
}
.map-embed {
  position: relative; display: grid; inline-size: 100%; aspect-ratio: 3 / 1; min-block-size: calc(var(--space-xxl) * 4); overflow: hidden; border-radius: var(--radius); background-color: var(--neutral-ultra-light); box-shadow: var(--box-shadow-1); &:not([data-map-js]) .map-embed__load { display: none; } &[data-map-loaded] .map-embed__placeholder { display: none; }
}
.contact-card__label {
  font-weight: 700; text-decoration: none;
}
.services__grid {
  display: grid; grid-template-columns: var(--grid-auto-4); gap: var(--space-l) var(--grid-gap); inline-size: 100%; margin: 0; padding: 0; list-style: none;
}
.contact__item {
  display: flex;
}
.contact__inner {
  display: flex; flex-direction: column; gap: var(--space-xl); max-inline-size: var(--content-width); margin-inline: auto;
}
.contact-card {
  display: flex; flex-direction: column; gap: var(--space-xs); inline-size: 100%; padding: var(--space-l); border-radius: var(--radius); background-image: linear-gradient(45deg, var(--primary) 0%, var(--accent) 100%); box-shadow: var(--box-shadow-1); color: var(--white);
}
.site-header__logo {
  display: block; flex-shrink: 0; &:focus-visible { outline-color: var(--white); }
}
.cta-banner__title {
  margin: 0; color: var(--white); text-wrap: balance;
}
.contact__cards {
  display: grid; grid-template-columns: var(--grid-auto-3); gap: var(--grid-gap); margin: 0; padding: 0; list-style: none;
}