:root { scroll-padding-top: 125px; }
[data-site-header] .desktop-nav a { color: #5c403f; }
[data-site-header] .desktop-nav a:hover,
[data-site-header] a[aria-current="page"] { color: #9e001f; font-weight: 600; }
.desktop-nav { display: flex; }
.services-nav { position: relative; }
.services-submenu[hidden] { display: none; }
.desktop-nav .services-submenu {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: max-content;
  max-height: calc(100dvh - 125px);
  overflow-y: auto;
  padding: .5rem;
  background: #fff;
  border: 1px solid #e5bdbb;
  border-radius: .25rem;
  box-shadow: 0 .5rem 1rem #0b1c3026;
}
.desktop-nav .services-submenu a { display: block; padding: .55rem .75rem; }


.mobile-nav { display: none; position: relative; flex-shrink: 0; }
.mobile-nav summary {
  display: flex;
  align-items: center;
  gap: .5rem;
  min-height: 44px;
  color: #0b1c30;
  font-weight: 600;
  list-style: none;
  cursor: pointer;
}
.mobile-nav summary::-webkit-details-marker { display: none; }
.menu-icon {
  display: grid;
  place-content: center;
  gap: 3px;
  width: 32px;
  height: 32px;
  border-radius: .25rem;
  background: #c8102e;
}
.menu-icon i { width: 16px; height: 2px; background: #fff; }
.mobile-nav nav {
  position: absolute;
  right: 0;
  top: calc(100% + .5rem);
  width: min(16rem, calc(100vw - 2rem));
  background: #fff;
  padding: .5rem;
  border: 1px solid #e5bdbb;
  max-height: 60vh;
  overflow: auto;
}
.mobile-nav a { display: flex; align-items: center; min-height: 44px; padding: .4rem .6rem; }
.mobile-nav .services-row { display: flex; align-items: center; }
.mobile-nav .services-row a { flex: 1; }
.services-toggle { display: grid; place-items: center; width: 44px; height: 44px; }
.services-toggle span {
  width: 9px;
  height: 9px;
  border: solid #9e001f;
  border-width: 0 2px 2px 0;
  transform: translateY(-2px) rotate(45deg);
}
.services-toggle[aria-expanded="true"] span { transform: translateY(2px) rotate(225deg); }
.mobile-nav .services-submenu { margin-left: .6rem; padding-left: .5rem; border-left: 2px solid #e5bdbb; }
footer[data-site-footer] { background: #213145; color: #f5f3f0; }
[data-site-footer] :is(.text-secondary, .text-on-surface, .text-on-surface-variant) { color: #f5f3f0; }
[data-site-footer] :is(.text-primary, .text-primary-container) { color: #ffb3b1; }
[data-site-footer] :is(.bg-surface-container-lowest, .bg-surface-container) { background: #334459; }
[data-site-footer] a:hover { color: #ffb3b1; text-decoration: underline; }
[data-site-footer] a:has(img) { width: fit-content; padding: .4rem; background: #fff; border-radius: .25rem; }
.service-card-link:hover, .service-card-link:focus-visible { text-decoration: underline; }
:focus-visible { outline: 2px solid #c8102e; outline-offset: 3px; }
[data-site-footer] :focus-visible { outline-color: #ffb3b1; }
#estimate-preview { color: #5c403f; }
#estimate-preview a { text-decoration: underline; }
form button:disabled { opacity: .65; cursor: not-allowed; }
@media (max-width: 1023px) {
  [data-site-header] .desktop-nav { display: none; }
  [data-site-header] .mobile-nav { display: block; }
  [data-site-header] > div:nth-child(2) { padding-inline: 16px; gap: .75rem; }
  [data-site-header] > div:nth-child(2) > div:first-child { min-width: 0; flex-shrink: 1; }

  [data-site-header] img { max-width: 100%; object-position: left center; }
}
@media (max-width: 639px) {
  [data-site-header] > div:first-child > div { padding-inline: 1rem; }
  [data-site-header] a[href^="tel:"] { white-space: nowrap; }
  main .px-margin { padding-inline: 1.25rem; }
  main .h-\[480px\] { height: auto; min-height: 480px; }
  main .h-\[480px\] > .relative { padding-block: 2rem; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; animation: none !important; }
}



.skip-link {
  position: fixed;
  top: .5rem;
  left: .5rem;
  z-index: 100;
  transform: translateY(-150%);
  padding: .5rem 1rem;
  background: #fff;
  color: #9e001f;
}
.skip-link:focus { transform: none; }
#main-content:focus { outline: none; }


#quote-contact-section :is(input, select, textarea):focus-visible {
  outline: 2px solid #c8102e;
  outline-offset: 2px;
}




[data-service-header] .desktop-nav { gap: 1rem; }

@media (min-width: 1024px) and (width < 1350px) {
  [data-service-header] .desktop-nav { display: none; }
  [data-service-header] .mobile-nav { display: block; }

  [data-service-header] > div:nth-child(2) { padding-inline: 16px; }
}






.storefront-home #main-content { padding-top: 0; }
.storefront-home [data-site-header] {
  background: rgb(255 255 255 / .86);
  backdrop-filter: blur(4px);
}
.storefront-home [data-site-header] > div:first-child { background: rgb(229 238 255 / .55); }
.storefront-scroll-linked .storefront-intro::after { content: ""; display: block; height: 70vh; height: 70svh; }
.storefront-scroll-linked .storefront-hero { position: sticky; top: 0; }
.storefront-scroll-linked .storefront-home [data-site-header] {
  --header-progress: var(--intro-header, 0);
  --header-background: var(--intro-background, 0);
  opacity: var(--header-progress);
  transform: translateY(calc(-100% * (1 - var(--header-progress))));
  background: rgb(255 255 255 / calc(.35 + .56 * var(--header-background)));
}
.storefront-scroll-linked .storefront-home [data-site-header] > div:first-child {
  background: rgb(20 48 75 / calc(.40 - .32 * var(--header-background)));
}
.storefront-scroll-linked .storefront-home [data-site-header] :is(.desktop-nav > a, .desktop-nav .services-row > a, summary) {
  color: #0b1c30;
}
.storefront-scroll-linked .storefront-home [data-site-header] > div:first-child > div {
  color: #0b1c30;
}
.storefront-scroll-linked .storefront-home [data-site-header]:has(:focus-visible) { --header-progress: 1; }
.storefront-hero {
  position: relative;
  isolation: isolate;
  display: grid;
  align-items: center;
  min-height: 100vh;
  min-height: 100svh;
  color: white;
  background: #213145;
}
.storefront-photo, .storefront-shade { position: absolute; inset: 0; z-index: -1; }
.storefront-photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgb(0 0 0 / .15), rgb(0 0 0 / .10) 50%, rgb(0 0 0 / .05));
  pointer-events: none;
}
.storefront-image { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 37%; }
.storefront-shade {
  background: linear-gradient(90deg, rgb(11 28 48 / .85), rgb(11 28 48 / .68) 28%, transparent 68%);

}
.storefront-copy { box-sizing: border-box; padding-block: 130px 28px; padding-inline: clamp(20px, 4vw, 40px); }
.storefront-scroll-linked .storefront-title { --copy-progress: var(--intro-title, 0); }
.storefront-scroll-linked .storefront-description { --copy-progress: var(--intro-description, 0); }
.storefront-scroll-linked .storefront-action { --copy-progress: var(--intro-action, 0); }
.storefront-scroll-linked :is(.storefront-title, .storefront-description, .storefront-action) {
  opacity: var(--copy-progress);
  transform: translateX(calc(-24px * (1 - var(--copy-progress))));
}
.storefront-scroll-linked .storefront-shade { opacity: var(--intro-shade, 0); }
.storefront-scroll-linked .storefront-hero:has(.storefront-copy :focus-visible) {
  --intro-title: 1;
  --intro-description: 1;
  --intro-action: 1;
  --intro-shade: 1;
  --intro-indicator: 0;
}
.storefront-scroll {
  position: absolute;
  z-index: 1;
  left: 50%;
  bottom: max(22px, env(safe-area-inset-bottom));
  transform: translateX(-50%);
  display: grid;
  justify-items: center;
  gap: 6px;
  min-width: 52px;
  padding: 5px;
  color: white;
  font: 700 10px/1.2 Inter, sans-serif;
  letter-spacing: .16em;
  text-transform: uppercase;
  text-shadow: 0 1px 4px #0b1c30;
  filter: drop-shadow(0 1px 3px #0b1c30);
  cursor: pointer;
  opacity: 0;
  visibility: hidden;

}
.storefront-scroll-linked .storefront-scroll { opacity: var(--intro-indicator, 1); visibility: var(--intro-indicator-visibility, visible); }
.scroll-mouse { width: 17px; height: 25px; border: 1px solid currentColor; border-radius: 10px; }
.scroll-mouse::after {
  content: "";
  display: block;
  width: 2px;
  height: 5px;
  margin: 4px auto 0;
  border-radius: 2px;
  background: currentColor;
  animation: storefront-wheel 1.8s ease-in-out infinite;
}
.scroll-arrow { width: 7px; height: 7px; border: solid currentColor; border-width: 0 1px 1px 0; transform: rotate(45deg); }
@keyframes storefront-wheel {
  0%, 20% { transform: translateY(0); opacity: 1; }
  70%, 100% { transform: translateY(5px); opacity: .25; }
}
@media (max-width: 767px) {
  .storefront-image { object-position: 50% 42%; }
  .storefront-shade { background: radial-gradient(ellipse 125% 40% at 18% 56%, rgb(11 28 48 / .88) 15%, rgb(11 28 48 / .72) 56%, transparent 100%); }
}








.service-capability-heading > .material-symbols-outlined {
  display: grid;
  place-items: center;
  flex: 0 0 20px;
  width: 20px;
  height: 26px;
  line-height: 1;
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 20;
}


.contact-notice:empty { display: none; }
.contact-notice:not(:empty) { padding: .75rem 1rem; border: 1px solid; border-radius: .25rem; }
.contact-notice[data-kind="success"] { background: #edf9ee; color: #16572d; border-color: #8bbf99; }
.contact-notice[data-kind="error"] { background: #fff3f3; color: #8b2424; border-color: #d45b5b; }
.contact-notice a { text-decoration: underline; }
.contact-field-error { display: block; margin-top: .25rem; color: #8b2424; font-size: .875rem; }
form :is(input, select, textarea)[aria-invalid="true"] { background: #fff3f3; border-color: #d45b5b; }
.contact-bot label { display: block; font-weight: 600; margin-bottom: .25rem; }
.contact-answer { display: block; width: 8rem; max-width: 100%; padding: .5rem 1rem; background: #eff4ff; border: 1px solid #b89897; border-radius: .25rem; }


.project-gallery { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.project-gallery:empty { display: none; }
#our-work:has(.project-gallery):not(.gallery-load-error):not(:has(.project-gallery figure)),
body:not(:has(#our-work .project-gallery figure)) [data-service-gallery-link] { display: none; }
.project-gallery .project-photo { min-width: 0; margin: 0; }
.gallery-enlarge { display: block; width: 100%; aspect-ratio: 1; overflow: hidden; cursor: zoom-in; background: #eff4ff; }
.project-gallery .gallery-enlarge img { width: 100%; height: 100%; aspect-ratio: 1; object-fit: cover; }
.project-photo figcaption { padding: .35rem 0; overflow-wrap: anywhere; font-size: .875rem; }
.gallery-more, .gallery-viewer button { padding: .6rem 1rem; border-radius: .25rem; background: #213145; color: #fff; }
.gallery-more { margin: 1rem auto; display: block; }
.gallery-more[hidden] { display: none; }
.gallery-explore { margin-top: 2rem; }
.gallery-explore ul { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; margin-top: 1rem; }
.gallery-explore a { display: inline-block; padding: .45rem .75rem; color: #213145; border: 1px solid currentColor; border-radius: .25rem; }
.gallery-explore a:hover, .gallery-explore a:focus-visible { background: #213145; color: #fff; }
.gallery-facebook { margin-top: 1.25rem; text-align: center; }
.gallery-facebook a {
  display: inline-block;
  box-sizing: border-box;
  max-width: 100%;
  padding: 12px 20px;
  border: 1px solid #213145;
  border-radius: .375rem;
  background: #fff;
  color: #213145;
  font-size: 14px;
  line-height: 1.4;
  text-decoration: none;
}
.gallery-facebook a:hover { background: #eff4ff; }
.gallery-facebook a:focus-visible { outline: 2px solid #213145; outline-offset: 3px; }
.gallery-viewer { width: min(92vw, 1050px); max-height: 92dvh; padding: 1rem; background: #fff; color: #0b1c30; border-radius: .4rem; }
.gallery-viewer::backdrop { background: #0b1c30d9; }
.gallery-viewer img { display: block; width: 100%; height: auto; max-height: 68dvh; object-fit: contain; margin-block: .5rem; }
.gallery-viewer div { display: flex; justify-content: space-between; gap: 1rem; margin-top: .5rem; }
.gallery-viewer button:disabled { opacity: .55; }
@media (max-width: 850px) { .project-gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 420px) { .project-gallery { grid-template-columns: 1fr; } }


.project-gallery:has(.ss-gallery-grid) { display: block; }


#our-work-section:has(.project-gallery:empty) .mb-space-xl { margin-bottom: 0; }


/* Keep the homepage portfolio at three columns throughout. */
#portfolio-grid[data-gallery="home"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 850px) {
  #portfolio-grid[data-gallery="home"] { gap: .375rem; }
  #portfolio-grid[data-gallery="home"] figcaption { display: none; }
}