/* Shared portfolio-style finish for the interior pages. */
:root {
  --portfolio-border: rgba(255, 255, 255, 0.32);
  --portfolio-border-strong: rgba(255, 255, 255, 0.46);
  --portfolio-glass: rgba(8, 38, 29, 0.34);
  --portfolio-glass-strong: rgba(8, 38, 29, 0.56);
  --portfolio-shadow: 0 22px 60px rgba(8, 38, 29, 0.28);
  --portfolio-green: #10382b;
  --portfolio-green-deep: #08261d;
  --portfolio-gold: #ffc36b;
  --portfolio-cream: #fffaf0;
}

body {
  color: var(--portfolio-cream);
  background: var(--portfolio-green-deep);
}

body > *:not(.fixed-drone-backdrop) {
  position: relative;
  z-index: 1;
}

body > .site-header {
  position: sticky;
  top: 0;
  z-index: 120;
}

.fixed-drone-backdrop {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  background: var(--portfolio-green-deep);
}

.fixed-drone-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.88;
  filter: saturate(0.95) contrast(1.04);
}

.fixed-drone-shade {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(8, 38, 29, 0.78), rgba(16, 56, 43, 0.58) 48%, rgba(68, 104, 104, 0.3)),
    linear-gradient(180deg, rgba(8, 38, 29, 0.42), rgba(8, 38, 29, 0.7));
  mix-blend-mode: multiply;
}

.fixed-drone-shade::after {
  position: absolute;
  inset: 0;
  content: "";
  background: rgba(68, 104, 104, 0.18);
  mix-blend-mode: color;
}

main {
  position: relative;
  z-index: 1;
}

.hero__background,
.hero__shade {
  display: none;
}

main h1,
main h2,
main h3,
main h4,
main p,
main li,
main strong,
main span {
  color: rgba(255, 255, 255, 0.9);
}

main h1,
main h2 {
  color: #ffffff;
}

.eyebrow,
.eyebrow.dark,
.section-kicker,
.service-card-label {
  color: var(--portfolio-gold);
}

.hero,
.service-hero,
.roof-hero,
.metal-hero,
.repair-hero,
.inspection-hero,
.construction-hero,
.storm-hero,
.painting-hero,
.low-slope-hero,
.gallery-section,
.section,
.content-section,
.contact-section,
.contact-layout,
.final-cta,
.trust-strip,
.process-section,
.areas-section,
.warranty-section,
.reviews-section,
.faq-section,
.scope-section,
.fit-section,
.warning-grid {
  background: transparent;
  box-shadow: none;
}

.hero,
.gallery-section,
.section,
.content-section,
.contact-section,
.contact-layout,
.final-cta,
.process-section,
.areas-section,
.warranty-section,
.reviews-section,
.faq-section,
.scope-section,
.fit-section {
  border-color: var(--portfolio-border);
}

.hero-content,
.hero__content,
.hero-copy,
.hero-panel,
.hero-card,
.hero-media,
.hero-image,
.hero-image-card,
.hero__image-card,
.hero-image-stack,
.section-heading,
.feature-card,
.service-card,
.service-tile,
.tile,
.line-art-card,
.project-card,
.photo-card,
.gallery-card,
.media-card,
.info-card,
.detail-card,
.system-card,
.step-card,
.process-card,
.warranty-card,
.review-card,
.contact-card,
.form-card,
.map-card,
.quick-contact,
.quick-contact > *,
.contact-panel,
.option-card,
.compare-card,
.fit-card,
.warning-card,
.callout,
.note-card,
.needs-card,
.trust-card,
.stat-card,
.area-card,
.promise-card,
.proof-card,
.logo-card,
.final-cta,
.trust-strip,
.trust-strip > * {
  border: 1px solid var(--portfolio-border);
  background: var(--portfolio-glass);
  box-shadow: var(--portfolio-shadow);
  backdrop-filter: blur(10px);
}

main img,
main video {
  border: 1px solid var(--portfolio-border);
  border-radius: 28px;
  box-shadow: var(--portfolio-shadow);
}

.tile,
.feature-card,
.service-card,
.service-tile,
.project-card,
.photo-card,
.gallery-card,
.media-card,
.line-art-card,
.system-card,
.map-card,
.compare-card,
.needs-card,
.promise-card,
.proof-card,
.logo-card,
.hero-media,
.hero-image,
.hero-image-card,
.hero__image-card,
.hero-image-stack {
  overflow: hidden;
  border-radius: 28px;
}

.tile img,
.feature-card img,
.service-card img,
.service-tile img,
.project-card img,
.photo-card img,
.gallery-card img,
.media-card img,
.line-art-card img,
.system-card img,
.map-card img,
.compare-card img,
.needs-card img,
.promise-card img,
.proof-card img,
.logo-card img,
.hero-media img,
.hero-image img,
.hero-image-card img,
.hero__image-card img,
.hero-image-stack img {
  border: 0;
  border-radius: inherit;
  box-shadow: none;
}

.button,
.button-primary,
.button--primary,
.button-outline,
.button--secondary {
  border: 1px solid var(--portfolio-border-strong);
}

.button-primary,
.button--primary {
  color: var(--portfolio-green-deep);
  background: var(--portfolio-gold);
}

.button-outline,
.button--secondary {
  color: var(--portfolio-cream);
  background: rgba(255, 250, 240, 0.1);
}

main .button:focus-visible,
main .button-primary:focus-visible,
main .button--primary:focus-visible,
main .button-outline:focus-visible,
main .button--secondary:focus-visible,
main button:focus-visible,
main input:focus-visible,
main textarea:focus-visible,
main select:focus-visible,
main .feature-card:focus-visible,
main .service-card:focus-visible,
main .service-tile:focus-visible,
main .project-card:focus-visible,
main .photo-card:focus-visible,
main .gallery-card:focus-visible,
main .media-card:focus-visible,
main .option-card:focus-visible,
main .compare-card:focus-visible,
main .quick-contact a:focus-visible {
  outline: 3px solid rgba(255, 195, 107, 0.88);
  outline-offset: 4px;
}

.related-service-rail {
  display: grid;
  grid-template-columns: minmax(160px, 0.35fr) minmax(0, 1fr);
  gap: 14px;
  align-items: stretch;
  margin-top: 14px;
  padding: 16px;
  border: 1px solid var(--portfolio-border);
  border-radius: 24px;
  background: rgba(8, 38, 29, 0.42);
  box-shadow: var(--portfolio-shadow);
  backdrop-filter: blur(12px);
}

.related-service-rail__label {
  display: flex;
  align-items: center;
  color: var(--portfolio-gold);
  font-family: "Barlow Condensed", "Barlow", "Trebuchet MS", sans-serif;
  font-size: 0.8rem;
  font-weight: 900;
  letter-spacing: 0.14em;
  line-height: 1.1;
  text-transform: uppercase;
}

.related-service-rail__links {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.related-service-rail a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  padding: 9px 14px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 999px;
  color: rgba(255, 255, 255, 0.9);
  background: rgba(255, 255, 255, 0.08);
  font-family: "Barlow Condensed", "Barlow", "Trebuchet MS", sans-serif;
  font-size: 0.86rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-decoration: none;
  text-transform: uppercase;
}

.related-service-rail a:hover,
.related-service-rail a:focus-visible {
  border-color: rgba(255, 195, 107, 0.58);
  color: var(--portfolio-gold);
  background: rgba(255, 195, 107, 0.14);
}

input,
textarea,
select {
  color: #17231f;
  background: rgba(255, 250, 240, 0.94);
}

label,
.form-card label,
.contact-card span,
.quick-contact span {
  color: rgba(255, 255, 255, 0.78);
}

.brand,
.brand img,
.google-rating,
.google-mark,
.social-link,
.header-call {
  box-shadow: none;
}

.brand img,
.google-mark {
  border: 0;
}

@media (max-width: 760px) {
  main img,
  main video,
  .tile,
  .feature-card,
  .service-card,
  .service-tile,
  .project-card,
  .photo-card,
  .gallery-card,
  .media-card,
  .line-art-card,
  .system-card,
  .map-card,
  .compare-card,
  .needs-card,
  .promise-card,
  .proof-card,
  .logo-card {
    border-radius: 22px;
  }

  .related-service-rail {
    grid-template-columns: 1fr;
    padding: 14px;
  }

  .related-service-rail__links {
    display: grid;
    grid-template-columns: 1fr;
  }

  .related-service-rail a {
    width: 100%;
  }
}

/* Liquid Glass sitewide touches: visual polish only, no layout or copy changes. */
:root {
  --portfolio-glass: rgba(18, 46, 42, 0.58);
  --portfolio-glass-strong: rgba(18, 46, 42, 0.7);
  --portfolio-border: rgba(255, 255, 255, 0.3);
  --portfolio-border-strong: rgba(255, 255, 255, 0.42);
  --portfolio-shadow: 0 22px 68px rgba(0, 0, 0, 0.28);
}

.hero-content,
.hero__content,
.hero-copy,
.hero-panel,
.hero-card,
.hero-media,
.hero-image,
.hero-image-card,
.hero__image-card,
.hero-image-stack,
.section-heading,
.feature-card,
.service-card,
.service-tile,
.tile,
.line-art-card,
.project-card,
.photo-card,
.gallery-card,
.media-card,
.info-card,
.detail-card,
.system-card,
.step-card,
.process-card,
.warranty-card,
.review-card,
.contact-card,
.form-card,
.map-card,
.quick-contact,
.quick-contact > *,
.contact-panel,
.option-card,
.compare-card,
.fit-card,
.warning-card,
.callout,
.note-card,
.needs-card,
.trust-card,
.stat-card,
.area-card,
.promise-card,
.proof-card,
.logo-card,
.final-cta,
.trust-strip,
.trust-strip > *,
.related-service-rail {
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.13), rgba(255, 255, 255, 0.04) 38%, rgba(255, 195, 107, 0.08)),
    var(--portfolio-glass);
  box-shadow:
    var(--portfolio-shadow),
    inset 0 1px 0 rgba(255, 255, 255, 0.45);
  backdrop-filter: blur(20px) saturate(1.22);
  -webkit-backdrop-filter: blur(20px) saturate(1.22);
}

.button,
.button-primary,
.button--primary,
.button-outline,
.button--secondary,
main button,
.related-service-rail a {
  outline: 1px solid var(--portfolio-border-strong);
  outline-offset: -1px;
  box-shadow:
    0 18px 48px rgba(0, 0, 0, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.45);
  backdrop-filter: blur(20px) saturate(1.22);
  -webkit-backdrop-filter: blur(20px) saturate(1.22);
}

.button-primary,
.button--primary,
main button {
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.42), rgba(255, 255, 255, 0.04) 48%),
    var(--portfolio-gold);
}

.button-outline,
.button--secondary,
.button--on-dark,
.related-service-rail a {
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.05)),
    rgba(18, 46, 42, 0.5);
}