:root { color-scheme: dark; }
* { box-sizing: border-box; }
html, body {
  margin: 0;
  width: 100%;
  height: 100%;
  background: #000;
  overflow: hidden;
  font-family: Arial, Helvetica, sans-serif;
}
.page-stage {
  position: relative;
  width: min(100vw, calc(100vh * 1.77683316));
  height: min(100vh, calc(100vw / 1.77683316));
  max-width: 3344px;
  max-height: 1882px;
  margin: auto;
  background: #000;
}
.page-art {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: fill;
  image-rendering: auto;
  -webkit-font-smoothing: antialiased;
  backface-visibility: hidden;
  transform: translateZ(0);
  user-select: none;
  -webkit-user-drag: none;
}
.hotspot {
  position: absolute;
  z-index: 10;
  display: block;
  border: 0;
  background: transparent;
  color: transparent;
  text-indent: -9999px;
  overflow: hidden;
}
.hotspot:focus-visible {
  outline: 3px solid #ef7200;
  outline-offset: -3px;
}
.hotspot.no-focus:focus-visible {
  outline: none;
}
.contact-form {
  position: absolute;
  inset: 0;
  z-index: 20;
  pointer-events: none;
}
.contact-control {
  position: absolute;
  pointer-events: auto;
  border: 0;
  outline: 0;
  background: transparent;
  color: transparent;
  caret-color: #fff;
  padding: 4px 9px;
  font-size: clamp(10px, .82vw, 15px);
}
.contact-control::placeholder { color: transparent; }
.contact-control:focus,
.contact-control:not(:placeholder-shown),
select.contact-control:valid {
  background: rgba(5,5,5,.94);
  color: #fff;
  outline: 2px solid #ec6a00;
}
select.contact-control option { background: #090909; color: #fff; }
.contact-file {
  position: absolute;
  pointer-events: auto;
  opacity: .01;
  cursor: pointer;
}
.contact-submit {
  position: absolute;
  pointer-events: auto;
  opacity: .01;
  cursor: pointer;
}
.mobile-bar, .mobile-menu, .mobile-contact { display: none; }



@media (max-width: 760px) {
  html, body { height: auto; min-height: 100%; overflow: auto; }
  body { padding-top: 58px; }
  .page-stage {
    width: 100vw;
    height: auto;
    aspect-ratio: 1672 / 941;
  }
  .hotspot, .contact-form { display: none; }
  .mobile-bar {
    position: fixed;
    inset: 0 0 auto 0;
    z-index: 100;
    height: 58px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 14px;
    background: #050505;
    border-bottom: 1px solid #ec6a00;
  }
  .mobile-brand {
    color: #fff;
    text-decoration: none;
    text-transform: uppercase;
    font-weight: 900;
    font-size: 14px;
  }
  .mobile-brand span { color: #ec6a00; }
  .mobile-toggle {
    border: 1px solid #ec6a00;
    background: #111;
    color: #fff;
    padding: 9px 13px;
    text-transform: uppercase;
    font-weight: 900;
  }
  .mobile-menu {
    position: fixed;
    top: 58px;
    left: 0;
    right: 0;
    z-index: 99;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    padding: 10px;
    background: rgba(0,0,0,.98);
    border-bottom: 1px solid #ec6a00;
  }
  .mobile-menu.open { display: grid; }
  .mobile-menu a {
    display: flex;
    min-height: 42px;
    align-items: center;
    justify-content: center;
    padding: 7px;
    background: #101010;
    border: 1px solid #333;
    color: #fff;
    text-decoration: none;
    text-transform: uppercase;
    text-align: center;
    font-weight: 800;
    font-size: 12px;
  }
  .mobile-menu a.active { color: #ec6a00; border-color: #ec6a00; }
  .mobile-contact {
    display: block;
    padding: 18px 14px 30px;
    background: #080808;
    border-top: 1px solid #ec6a00;
    color: #fff;
  }
  .mobile-contact h2 {
    margin: 0 0 14px;
    text-transform: uppercase;
    font-size: 22px;
  }
  .mobile-contact h2 strong { color: #ffe600; }
  .mobile-contact label {
    display: block;
    margin: 11px 0 4px;
    text-transform: uppercase;
    font-size: 12px;
    font-weight: 900;
  }
  .mobile-contact input,
  .mobile-contact select,
  .mobile-contact textarea {
    width: 100%;
    padding: 11px;
    border: 1px solid #555;
    background: #111;
    color: #fff;
    font-size: 16px;
  }
  .mobile-contact textarea { min-height: 100px; }
  .mobile-contact button {
    width: 100%;
    min-height: 52px;
    margin-top: 15px;
    border: 1px solid #ff8c1d;
    background: linear-gradient(#e96800,#b84500);
    color: #fff;
    text-transform: uppercase;
    font-weight: 900;
  }
  .mobile-contact button strong { color: #ffe600; }
}




/* Mobile-only readable layouts. Desktop page artwork and hotspots remain unchanged. */
.mobile-page,
.mobile-sticky-assessment { display: none; }

@media (max-width: 760px) {
  body {
    padding-top: 58px;
    padding-bottom: 72px;
    background: #050505;
  }

  /* Hide the desktop screenshot layout on phones so text does not shrink. */
  .page-stage { display: none; }

  .mobile-page {
    display: block;
    width: 100%;
    background: #050505;
    color: #fff;
  }

  .mobile-hero-image {
    width: 100%;
    height: 220px;
    overflow: hidden;
    border-bottom: 2px solid #ec6a00;
    background: #000;
  }

  .mobile-hero-image img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    object-position: center;
  }

  .mobile-page-inner {
    padding: 24px 16px 22px;
  }

  .mobile-eyebrow {
    margin: 0 0 8px;
    color: #f07a00;
    font-size: 14px;
    line-height: 1.35;
    font-weight: 900;
    letter-spacing: .05em;
    text-transform: uppercase;
  }

  .mobile-page h1 {
    margin: 0;
    color: #fff;
    font-size: clamp(30px, 9vw, 44px);
    line-height: 1.04;
    letter-spacing: -.025em;
    text-transform: uppercase;
  }

  .mobile-intro {
    margin: 16px 0 0;
    color: #e4e4e4;
    font-size: 18px;
    line-height: 1.55;
  }

  .mobile-actions {
    display: grid;
    gap: 12px;
    margin-top: 22px;
  }

  .mobile-primary-cta,
  .mobile-call-cta {
    display: flex;
    width: 100%;
    min-height: 58px;
    align-items: center;
    justify-content: center;
    padding: 13px 16px;
    border-radius: 4px;
    text-decoration: none;
    text-transform: uppercase;
    text-align: center;
    font-size: 16px;
    line-height: 1.2;
    font-weight: 900;
  }

  .mobile-primary-cta {
    border: 1px solid #ff9a30;
    background: linear-gradient(#ec6a00, #c84e00);
    color: #fff;
    box-shadow: 0 8px 22px rgba(0,0,0,.35);
  }

  .mobile-call-cta {
    border: 1px solid #ec6a00;
    background: #111;
    color: #fff;
  }

  .mobile-card-grid {
    display: grid;
    gap: 14px;
    margin-top: 24px;
  }

  .mobile-card {
    padding: 18px;
    border: 1px solid #3b3b3b;
    border-left: 4px solid #ec6a00;
    border-radius: 5px;
    background: linear-gradient(145deg, #151515, #0b0b0b);
  }

  .mobile-card h2 {
    margin: 0 0 8px;
    color: #f07a00;
    font-size: 20px;
    line-height: 1.2;
    text-transform: uppercase;
  }

  .mobile-card p {
    margin: 0;
    color: #ededed;
    font-size: 17px;
    line-height: 1.5;
  }

  .mobile-contact {
    padding-bottom: 92px;
  }

  .mobile-sticky-assessment {
    position: fixed;
    z-index: 120;
    left: 10px;
    right: 10px;
    bottom: max(10px, env(safe-area-inset-bottom));
    display: flex;
    min-height: 54px;
    align-items: center;
    justify-content: center;
    padding: 11px 15px;
    border: 1px solid #ff9a30;
    border-radius: 5px;
    background: linear-gradient(#ec6a00, #bd4500);
    color: #fff;
    text-decoration: none;
    text-align: center;
    text-transform: uppercase;
    font-size: 15px;
    line-height: 1.15;
    font-weight: 900;
    box-shadow: 0 8px 25px rgba(0,0,0,.65);
  }
}


.photo-compression-note {
  margin: 6px 0 12px;
  color: #d9d9d9;
  font-size: 14px;
  line-height: 1.45;
}

.photo-compression-status {
  min-height: 22px;
  margin: 8px 0 12px;
  color: #ff9a30;
  font-size: 14px;
  line-height: 1.4;
  font-weight: 700;
}

.desktop-photo-status {
  position: absolute;
  z-index: 4;
  margin: 0;
  color: #ff9a30;
  font-size: clamp(9px, .68vw, 13px);
  pointer-events: none;
}

.assessment-upload-form button[disabled] {
  cursor: wait;
  opacity: .72;
}

@media (max-width: 760px) {
  .photo-compression-note,
  .photo-compression-status {
    font-size: 15px;
  }
}


/* Mobile navigation cleanup:
   Crop the desktop navigation artwork out of mobile hero images.
   The working mobile menu remains the only navigation shown on phones. */
@media (max-width: 760px) {
  .mobile-hero-image {
    height: 205px;
    position: relative;
    overflow: hidden;
  }

  .mobile-hero-image img {
    width: 100%;
    height: 126%;
    object-fit: cover;
    object-position: center 48%;
    transform: translateY(-13%);
  }
}


/* Premium mobile redesign. Desktop artwork remains unchanged. */
@media (max-width: 760px) {
  body {
    background:
      radial-gradient(circle at top right, rgba(240,122,0,.10), transparent 34%),
      linear-gradient(180deg, #080808 0%, #050505 100%);
    color: #fff;
  }

  .mobile-bar {
    min-height: 62px;
    padding: 0 16px;
    background: rgba(5,5,5,.97);
    border-bottom: 1px solid rgba(240,122,0,.35);
    box-shadow: 0 8px 24px rgba(0,0,0,.28);
    backdrop-filter: blur(10px);
  }

  .mobile-brand {
    font-size: 18px;
    font-weight: 900;
    letter-spacing: -.02em;
    text-transform: uppercase;
  }

  .mobile-brand span {
    color: #f07a00;
  }

  .mobile-toggle {
    min-width: 82px;
    min-height: 40px;
    border: 1px solid #f07a00;
    border-radius: 999px;
    background: transparent;
    color: #fff;
    font-size: 14px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .06em;
  }

  .mobile-menu {
    top: 62px;
    background: rgba(8,8,8,.99);
    border-bottom: 1px solid rgba(240,122,0,.4);
    box-shadow: 0 18px 40px rgba(0,0,0,.55);
  }

  .mobile-menu a {
    padding: 17px 20px;
    border-bottom: 1px solid #1e1e1e;
    font-size: 17px;
    font-weight: 800;
  }

  .mobile-page {
    background: transparent;
  }

  /* Remove screenshot-style hero images on all mobile pages. */
  .mobile-hero-image {
    display: none !important;
  }

  /* Keep one premium Home image only. */
  body:has(.mobile-page .mobile-eyebrow:first-of-type) .mobile-page {
    position: relative;
  }

  .mobile-page-inner {
    max-width: 680px;
    margin: 0 auto;
    padding: 34px 20px 34px;
  }

  .mobile-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 12px;
    color: #f07a00;
    font-size: 13px;
    font-weight: 900;
    letter-spacing: .12em;
  }

  .mobile-eyebrow::before {
    content: "";
    width: 28px;
    height: 2px;
    background: linear-gradient(90deg, #f07a00, #ffb15a);
  }

  .mobile-page h1 {
    max-width: 12ch;
    font-size: clamp(38px, 11vw, 58px);
    line-height: .98;
    letter-spacing: -.045em;
  }

  .mobile-intro {
    max-width: 33rem;
    margin-top: 18px;
    color: #d6d6d6;
    font-size: 19px;
    line-height: 1.6;
  }

  .mobile-actions {
    gap: 12px;
    margin-top: 26px;
  }

  .mobile-primary-cta,
  .mobile-call-cta {
    min-height: 62px;
    border-radius: 8px;
    font-size: 16px;
    letter-spacing: .02em;
  }

  .mobile-primary-cta {
    border: 1px solid #ffad57;
    background:
      linear-gradient(180deg, rgba(255,255,255,.08), transparent 35%),
      linear-gradient(135deg, #f47c00, #c94d00);
    box-shadow:
      0 16px 34px rgba(190,70,0,.28),
      inset 0 1px 0 rgba(255,255,255,.18);
  }

  .mobile-call-cta {
    background: linear-gradient(145deg, #171717, #0d0d0d);
    border-color: #4a4a4a;
  }

  .mobile-card-grid {
    gap: 16px;
    margin-top: 30px;
  }

  .mobile-card {
    position: relative;
    overflow: hidden;
    padding: 22px 20px 22px 22px;
    border: 1px solid #2b2b2b;
    border-left: 0;
    border-radius: 10px;
    background:
      linear-gradient(145deg, rgba(255,255,255,.035), transparent 38%),
      linear-gradient(145deg, #151515, #0b0b0b);
    box-shadow: 0 16px 34px rgba(0,0,0,.28);
  }

  .mobile-card::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background: linear-gradient(180deg, #ff9d3c, #d65300);
  }

  .mobile-card h2 {
    margin-bottom: 10px;
    color: #fff;
    font-size: 22px;
    letter-spacing: -.02em;
  }

  .mobile-card p {
    color: #cfcfcf;
    font-size: 17px;
    line-height: 1.58;
  }

  .mobile-contact {
    max-width: 680px;
    margin: 0 auto;
    padding: 0 20px 110px;
  }

  .mobile-contact form {
    padding: 22px 18px;
    border: 1px solid #2b2b2b;
    border-radius: 12px;
    background:
      linear-gradient(145deg, rgba(255,255,255,.035), transparent 40%),
      #0d0d0d;
    box-shadow: 0 18px 38px rgba(0,0,0,.32);
  }

  .mobile-contact label {
    color: #fff;
    font-size: 15px;
    font-weight: 800;
  }

  .mobile-contact input,
  .mobile-contact textarea,
  .mobile-contact select {
    min-height: 52px;
    border: 1px solid #3a3a3a;
    border-radius: 7px;
    background: #111;
    color: #fff;
    font-size: 16px;
  }

  .mobile-contact button[type="submit"] {
    min-height: 60px;
    border: 1px solid #ffad57;
    border-radius: 8px;
    background: linear-gradient(135deg, #f47c00, #c94d00);
    font-size: 16px;
    font-weight: 900;
    text-transform: uppercase;
    box-shadow: 0 14px 30px rgba(190,70,0,.25);
  }

  .mobile-sticky-assessment {
    left: 12px;
    right: 12px;
    min-height: 58px;
    border-radius: 8px;
    font-size: 15px;
    letter-spacing: .02em;
  }
}


@media (max-width: 760px) {
  .premium-mobile-home-image {
    position: relative;
    display: block;
    width: 100%;
    height: 250px;
    overflow: hidden;
    border-bottom: 1px solid rgba(240,122,0,.45);
    background: #090909;
  }

  .premium-mobile-home-image img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    object-position: center 45%;
    transform: scale(1.04);
    filter: contrast(1.05) saturate(.92) brightness(.82);
  }

  .premium-mobile-home-image-overlay {
    position: absolute;
    inset: 0;
    background:
      linear-gradient(180deg, rgba(0,0,0,.08), rgba(0,0,0,.18) 58%, #080808 100%),
      linear-gradient(90deg, rgba(0,0,0,.26), transparent 55%);
  }
}


/* Final mobile Home hero: correct logo, full grill, no embedded fake buttons. */
@media (max-width: 760px) {
  .premium-mobile-home-image {
    height: auto;
    aspect-ratio: 1672 / 753;
    background: #000;
  }

  .premium-mobile-home-image img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center top;
    transform: none;
    filter: contrast(1.04) saturate(.95) brightness(.88);
  }

  .premium-mobile-home-image-overlay {
    background:
      linear-gradient(180deg, rgba(0,0,0,.02), rgba(0,0,0,.06) 65%, #080808 100%);
  }
}


/* Approved final mobile Home hero image. */
@media (max-width: 760px) {
  .premium-mobile-home-image {
    height: auto;
    aspect-ratio: 900 / 1225;
    overflow: hidden;
    background: #000;
  }

  .premium-mobile-home-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
    transform: none;
    filter: none;
  }

  .premium-mobile-home-image-overlay {
    display: none;
  }
}

/* Mobile V2 — true responsive layout inspired by image-led service galleries. */
@media (max-width: 760px) {
  body { padding-top: 68px; background:#070707; }
  .mobile-bar { height:68px; min-height:68px; padding:0 18px; }
  .mobile-brand { font-size:17px; }
  .mobile-menu { top:68px; grid-template-columns:1fr; padding:8px 14px 14px; }
  .mobile-menu a { min-height:48px; justify-content:flex-start; padding:12px 16px; border-radius:4px; }
  .mobile-v2-home { display:block; overflow:hidden; background:#080808; }
  .mobile-v2-hero { width:100%; aspect-ratio:900/1225; background:#000; overflow:hidden; border-bottom:1px solid #dc6800; }
  .mobile-v2-hero img { display:block; width:100%; height:100%; object-fit:cover; object-position:center; }
  .mobile-v2-intro { padding:34px 20px 40px; background:linear-gradient(180deg,#111,#080808); }
  .mobile-v2-kicker,.mobile-v2-section-head p { margin:0 0 10px; color:#ef7900; font-size:12px; line-height:1.3; font-weight:900; letter-spacing:.14em; text-transform:uppercase; }
  .mobile-v2-intro h1,.mobile-v2-section h2,.mobile-v2-final-cta h2 { margin:0; color:#fff; text-transform:uppercase; letter-spacing:-.035em; }
  .mobile-v2-intro h1 { font-size:clamp(38px,12vw,60px); line-height:.96; }
  .mobile-v2-intro>p:not(.mobile-v2-kicker) { margin:20px 0 0; color:#d7d7d7; font-size:18px; line-height:1.55; }
  .mobile-v2-actions { display:grid; gap:11px; margin-top:26px; }
  .mobile-v2-primary,.mobile-v2-secondary,.mobile-v2-final-cta a { display:flex; min-height:58px; align-items:center; justify-content:center; padding:14px 16px; border-radius:3px; text-align:center; text-decoration:none; text-transform:uppercase; font-weight:900; letter-spacing:.02em; }
  .mobile-v2-primary,.mobile-v2-final-cta a { background:#e96f00; color:#fff; border:1px solid #ff9a35; }
  .mobile-v2-secondary { background:transparent; color:#fff; border:1px solid #555; }
  .mobile-v2-section { padding:46px 20px; }
  .mobile-v2-section-head { margin-bottom:24px; }
  .mobile-v2-section h2 { font-size:clamp(31px,9vw,46px); line-height:1.02; }
  .mobile-v2-gallery-section { background:#f3f1ed; color:#111; }
  .mobile-v2-gallery-section h2 { color:#111; }
  .mobile-v2-gallery { display:grid; gap:22px; }
  .mobile-v2-gallery figure { margin:0; background:#fff; box-shadow:0 10px 30px rgba(0,0,0,.16); }
  .mobile-v2-gallery img { display:block; width:100%; aspect-ratio:4/3; object-fit:cover; }
  .mobile-v2-gallery figcaption { padding:14px 16px 16px; color:#111; font-size:15px; font-weight:900; text-transform:uppercase; letter-spacing:.04em; }
  .mobile-v2-text-link { display:inline-block; margin-top:25px; color:#b85200; font-weight:900; text-decoration:none; }
  .mobile-v2-dark-section { background:#0c0c0c; }
  .mobile-v2-service-list { display:grid; gap:0; border-top:1px solid #333; }
  .mobile-v2-service-list article { display:grid; grid-template-columns:46px 1fr; gap:13px; padding:22px 0; border-bottom:1px solid #333; }
  .mobile-v2-service-list article>span { color:#ef7900; font-size:14px; font-weight:900; }
  .mobile-v2-service-list h3 { margin:0 0 7px; color:#fff; font-size:20px; line-height:1.15; text-transform:uppercase; }
  .mobile-v2-service-list p { margin:0; color:#cfcfcf; font-size:16px; line-height:1.5; }
  .mobile-v2-process { background:#151515; }
  .mobile-v2-process ol { list-style:none; margin:0; padding:0; counter-reset:steps; }
  .mobile-v2-process li { position:relative; padding:0 0 26px 48px; counter-increment:steps; }
  .mobile-v2-process li::before { content:counter(steps); position:absolute; left:0; top:0; display:grid; width:31px; height:31px; place-items:center; border:1px solid #ef7900; border-radius:50%; color:#ef7900; font-weight:900; }
  .mobile-v2-process li::after { content:""; position:absolute; left:15px; top:34px; bottom:3px; width:1px; background:#555; }
  .mobile-v2-process li:last-child::after { display:none; }
  .mobile-v2-process strong,.mobile-v2-process span { display:block; }
  .mobile-v2-process strong { color:#fff; font-size:19px; text-transform:uppercase; }
  .mobile-v2-process span { margin-top:5px; color:#ccc; font-size:16px; line-height:1.45; }
  .mobile-v2-final-cta { position:relative; min-height:500px; display:flex; align-items:flex-end; overflow:hidden; }
  .mobile-v2-final-cta>img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center; }
  .mobile-v2-final-cta::after { content:""; position:absolute; inset:0; background:linear-gradient(180deg,rgba(0,0,0,.05),rgba(0,0,0,.92) 70%); }
  .mobile-v2-final-cta>div { position:relative; z-index:1; width:100%; padding:38px 20px 44px; }
  .mobile-v2-final-cta p { margin:0 0 8px; color:#ef7900; font-weight:900; text-transform:uppercase; }
  .mobile-v2-final-cta h2 { font-size:36px; line-height:1; }
  .mobile-v2-final-cta a { margin-top:22px; }
  .mobile-v2-footer { display:grid; gap:9px; padding:28px 20px 94px; background:#030303; border-top:1px solid #272727; color:#bdbdbd; font-size:14px; line-height:1.45; }
  .mobile-v2-footer strong { color:#fff; font-size:17px; text-transform:uppercase; }
  .mobile-v2-footer a { color:#ef7900; text-decoration:none; font-weight:900; }
  .mobile-sticky-assessment { border-radius:999px; left:14px; right:14px; }
}


/* Authorized Before & After portfolio — desktop and mobile. */
.desktop-before-after {
  display:block;
  padding:84px 32px 92px;
  background:linear-gradient(180deg,#0b0b0b,#030303);
  border-top:1px solid #d86700;
  color:#fff;
}
.desktop-ba-inner { max-width:1440px; margin:0 auto; }
.desktop-ba-heading { max-width:760px; margin:0 auto 44px; text-align:center; }
.desktop-ba-heading p { margin:0 0 10px; color:#ee7600; font-weight:900; letter-spacing:.18em; text-transform:uppercase; }
.desktop-ba-heading h2 { margin:0; font-size:clamp(48px,5.4vw,82px); line-height:.95; text-transform:uppercase; letter-spacing:-.045em; }
.desktop-ba-heading span { display:block; margin-top:20px; color:#c9c9c9; font-size:20px; line-height:1.55; }
.before-after-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:28px; }
.before-after-card { overflow:hidden; background:#111; border:1px solid #292929; box-shadow:0 24px 55px rgba(0,0,0,.35); }
.ba-images { display:grid; grid-template-columns:1fr 1fr; }
.ba-images figure { position:relative; margin:0; min-width:0; background:#090909; }
.ba-images figure+figure { border-left:2px solid #ef7900; }
.ba-images img { display:block; width:100%; height:390px; object-fit:cover; }
.ba-images span { position:absolute; z-index:2; top:14px; left:14px; padding:8px 12px; background:rgba(0,0,0,.82); border:1px solid rgba(255,255,255,.3); color:#fff; font-size:13px; font-weight:900; letter-spacing:.12em; text-transform:uppercase; }
.ba-images figure:last-child span { background:#e56d00; border-color:#ff9a35; }
.portfolio-credit { margin:26px 0 0; color:#8e8e8e; font-size:13px; text-align:center; }
.desktop-ba-cta { display:flex; width:max-content; min-height:58px; align-items:center; justify-content:center; margin:34px auto 0; padding:0 28px; background:#e96f00; border:1px solid #ff9a35; color:#fff; text-decoration:none; text-transform:uppercase; font-weight:900; letter-spacing:.03em; }

@media (max-width:760px) {
  .desktop-before-after { display:none; }
  .mobile-before-after .before-after-grid { grid-template-columns:1fr; gap:22px; }
  .mobile-before-after .before-after-card { background:#fff; border:0; box-shadow:0 10px 30px rgba(0,0,0,.18); }
  .mobile-before-after .ba-images { grid-template-columns:1fr 1fr; }
  .mobile-before-after .ba-images img { height:220px; object-fit:cover; }
  .mobile-before-after .ba-images span { top:9px; left:9px; padding:6px 8px; font-size:10px; }
  .mobile-before-after .portfolio-credit { color:#6d6d6d; line-height:1.45; }
}


/* Desktop Home page scroll fix:
   the approved desktop artwork remains the first full-width section,
   and the Before & After gallery follows directly beneath it. */
@media (min-width: 761px) {
  html,
  body {
    width: 100%;
    height: auto;
    min-height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
  }

  .page-stage {
    position: relative;
    width: 100%;
    height: auto;
    max-width: none;
    max-height: none;
    aspect-ratio: 3344 / 1882;
    margin: 0;
  }

  .page-art {
    width: 100%;
    height: 100%;
    object-fit: fill;
  }

  .desktop-before-after {
    position: relative;
    z-index: 2;
    display: block;
    width: 100%;
  }
}

/* One-page website */
html{scroll-behavior:smooth;scroll-padding-top:74px}.single-page-site{margin:0;background:#080808;color:#fff;overflow-x:hidden}.one-page-header{position:sticky;top:0;z-index:1000;display:flex;align-items:center;gap:24px;min-height:74px;padding:0 3vw;background:rgba(5,5,5,.96);border-bottom:1px solid rgba(255,255,255,.12);backdrop-filter:blur(12px)}.one-page-brand{color:#fff;text-decoration:none;font-weight:800;font-size:20px;white-space:nowrap}.one-page-brand span{color:#f47b20}.one-page-nav{display:flex;align-items:center;gap:18px;margin-left:auto}.one-page-nav a{color:#fff;text-decoration:none;font-size:13px;font-weight:700;white-space:nowrap}.one-page-nav a:hover{color:#f47b20}.one-page-nav .nav-call{padding:11px 15px;border:1px solid #f47b20;border-radius:4px}.one-page-toggle{display:none;margin-left:auto;background:#f47b20;color:#fff;border:0;padding:10px 14px;font-weight:800;border-radius:4px}.one-page-hero img,.desktop-art-section img{display:block;width:100%;height:auto}.one-page-hero{position:relative}.mobile-hero-copy,.mobile-native-section{display:none}.desktop-art-section{background:#000;overflow:hidden}.one-page-gallery{padding:80px 5vw;background:#0d0d0d}.section-heading,.contact-heading{text-align:center;max-width:800px;margin:0 auto 40px}.section-heading p,.contact-heading p,.section-kicker{margin:0 0 8px;color:#f47b20;text-transform:uppercase;letter-spacing:.15em;font-weight:800;font-size:13px}.section-heading h2,.contact-heading h2{font-size:46px;margin:0 0 12px}.section-heading span,.contact-heading span{color:#bbb}.one-page-contact{padding:80px 5vw;background:#111}.one-page-form{max-width:920px;margin:auto;display:grid;grid-template-columns:1fr 1fr;gap:18px}.one-page-form label{display:flex;flex-direction:column;gap:8px;color:#ddd;font-weight:700;font-size:14px}.one-page-form input,.one-page-form select,.one-page-form textarea{box-sizing:border-box;width:100%;padding:14px;border:1px solid #444;background:#191919;color:#fff;border-radius:4px;font:inherit}.one-page-form textarea{min-height:110px;resize:vertical}.one-page-form .full-width{grid-column:1/-1}.one-page-form button{padding:16px;background:#f47b20;color:#fff;border:0;border-radius:4px;font-size:16px;font-weight:900;cursor:pointer}.one-page-footer{display:flex;justify-content:center;align-items:center;gap:45px;padding:35px 5vw;background:#030303;color:#bbb;text-align:center}.one-page-footer strong{color:#fff}.one-page-footer a{color:#f47b20;text-decoration:none}.back-to-top{position:fixed;right:24px;bottom:24px;z-index:900;width:44px;height:44px;display:grid;place-items:center;border-radius:50%;background:#f47b20;color:#fff;text-decoration:none;font-size:22px;font-weight:900}.single-page-site .mobile-bar,.single-page-site .mobile-menu,.single-page-site>.page-stage,.single-page-site>.desktop-before-after{display:none!important}
@media(max-width:1100px){.one-page-nav{gap:10px}.one-page-nav a{font-size:11px}.one-page-nav .nav-call{display:none}}
@media(max-width:760px){html{scroll-padding-top:62px}.one-page-header{min-height:62px;padding:0 18px}.one-page-brand{font-size:17px}.one-page-toggle{display:block}.one-page-nav{position:absolute;top:62px;left:0;right:0;display:none;flex-direction:column;align-items:stretch;gap:0;margin:0;background:#080808;border-bottom:1px solid #333}.one-page-nav.open{display:flex}.one-page-nav a{padding:14px 20px;font-size:14px;border-top:1px solid #222}.one-page-nav .nav-call{display:block}.one-page-hero picture img{width:100%;height:auto;min-height:280px;object-fit:cover}.one-page-hero .mobile-hero-copy{display:block;padding:26px 20px 34px;background:#090909;text-align:center}.mobile-hero-copy p{color:#f47b20;text-transform:uppercase;letter-spacing:.1em;font-size:12px;font-weight:800}.mobile-hero-copy h1{font-size:34px;margin:8px 0 12px}.mobile-hero-copy span{display:block;color:#ccc;line-height:1.6}.mobile-hero-copy div{display:grid;gap:10px;margin-top:22px}.mobile-hero-copy a{padding:14px;text-decoration:none;font-weight:900;border-radius:4px;background:#f47b20;color:#fff}.mobile-hero-copy a+ a{background:transparent;border:1px solid #666}.desktop-art-section{display:none}.mobile-native-section{display:block;padding:54px 20px;background:#0b0b0b;border-top:1px solid #222}.mobile-native-section:nth-of-type(even){background:#121212}.mobile-native-section h2{font-size:31px;margin:0 0 20px}.native-intro{color:#ccc;line-height:1.7}.native-card-grid{display:grid;gap:14px}.native-card-grid article{padding:20px;background:#171717;border:1px solid #333;border-left:4px solid #f47b20}.native-card-grid h3{margin:0 0 8px;font-size:19px}.native-card-grid p{margin:0;color:#bbb;line-height:1.6}.mobile-process-list{list-style:none;padding:0;margin:0;display:grid;gap:15px}.mobile-process-list li{display:flex;flex-direction:column;gap:6px;padding:18px;background:#171717;border-left:4px solid #f47b20}.mobile-process-list span{color:#bbb;line-height:1.55}.one-page-gallery{padding:54px 16px}.section-heading h2,.contact-heading h2{font-size:34px}.before-after-grid{grid-template-columns:1fr!important}.ba-images{grid-template-columns:1fr 1fr!important}.one-page-contact{padding:54px 18px 90px}.one-page-form{grid-template-columns:1fr}.one-page-form .full-width{grid-column:auto}.one-page-footer{flex-direction:column;gap:14px;padding-bottom:90px}.back-to-top{right:14px;bottom:82px}.single-page-site .mobile-sticky-assessment{display:block!important}}


/* Functional navigation and CTA overlays for desktop artwork */
.scroll-anchor {
  display: block;
  position: relative;
  height: 0;
  scroll-margin-top: 74px;
}

.desktop-clickable {
  position: relative;
}

.desktop-hotspots {
  position: absolute;
  inset: 0;
  z-index: 15;
  pointer-events: none;
}

.desktop-hotspots .hs {
  position: absolute;
  display: block;
  pointer-events: auto;
  cursor: pointer;
  background: transparent;
}

/* Navigation embedded in the 1648 × 928 desktop artwork */
.hs-home { left: 17.4%; top: 2.4%; width: 5.0%; height: 6.2%; }
.hs-services { left: 22.2%; top: 2.4%; width: 6.5%; height: 6.2%; }
.hs-process { left: 28.8%; top: 2.4%; width: 7.7%; height: 6.2%; }
.hs-assessment-nav { left: 36.5%; top: 2.4%; width: 8.0%; height: 6.2%; }
.hs-maintenance { left: 44.3%; top: 2.4%; width: 11.5%; height: 6.2%; }
.hs-why { left: 55.7%; top: 2.4%; width: 6.8%; height: 6.2%; }
.hs-contact { left: 62.0%; top: 2.4%; width: 6.7%; height: 6.2%; }
.hs-phone-top { left: 70.7%; top: 1.4%; width: 13.9%; height: 8.3%; }
.hs-assessment-top { left: 85.2%; top: 1.2%; width: 12.8%; height: 10.5%; }

/* Home hero CTA buttons */
.hs-home-assessment { left: 2.0%; top: 83.1%; width: 23.4%; height: 5.8%; }
.hs-home-call { left: 26.2%; top: 83.1%; width: 17.3%; height: 5.8%; }

/* Bottom CTA buttons used on the interior desktop artwork */
.hs-bottom-assessment { left: 52.8%; top: 89.2%; width: 24.7%; height: 6.6%; }
.hs-bottom-call { left: 78.3%; top: 89.2%; width: 17.5%; height: 6.6%; }

@media (max-width: 760px) {
  .desktop-hotspots {
    display: none !important;
  }

  .scroll-anchor {
    scroll-margin-top: 62px;
  }
}


/* Navigation alignment and mobile menu reliability */
.one-page-header {
  isolation: isolate;
}

.one-page-toggle {
  position: relative;
  z-index: 1003;
  cursor: pointer;
  touch-action: manipulation;
}

@media (max-width: 760px) {
  .one-page-header {
    overflow: visible;
  }

  .one-page-nav {
    z-index: 1002;
    max-height: calc(100vh - 62px);
    overflow-y: auto;
    visibility: hidden;
    opacity: 0;
    transform: translateY(-8px);
    pointer-events: none;
    transition: opacity .18s ease, transform .18s ease, visibility .18s ease;
  }

  .one-page-nav.open {
    display: flex !important;
    visibility: visible;
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
  }

  body.mobile-menu-open {
    overflow-x: hidden;
  }

  [data-mobile-target],
  #gallery,
  #contact,
  #home {
    scroll-margin-top: 70px;
  }
}

@media (min-width: 761px) {
  [data-desktop-target],
  #gallery,
  #contact,
  #home {
    scroll-margin-top: 84px;
  }
}
\n
/* Final panel alignment correction.
   Desktop artwork already contains its own navigation, so desktop sections
   must land at their exact top edge with no artificial sticky-header offset. */
@media (min-width: 761px) {
  html { scroll-padding-top: 0 !important; }
  .scroll-anchor,
  [data-desktop-target],
  #gallery,
  #contact,
  #home {
    scroll-margin-top: 0 !important;
  }
}

@media (max-width: 760px) {
  html { scroll-padding-top: 62px !important; }
}


/* FINAL: one live sticky menu only; duplicated artwork menus removed from image files */
.one-page-header {
  position: sticky !important;
  top: 0 !important;
  z-index: 5000 !important;
  display: flex;
  align-items: center;
  min-height: 70px;
  padding: 0 2.5vw;
  background: rgba(3,3,3,.98);
  border-bottom: 1px solid rgba(244,123,32,.32);
  backdrop-filter: blur(12px);
}

.one-page-nav {
  display: flex;
  align-items: center;
  margin-left: auto;
  gap: clamp(10px, 1.05vw, 20px);
}

.one-page-nav .nav-call,
.one-page-nav .nav-assessment {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  padding: 0 15px;
  border-radius: 4px;
  white-space: nowrap;
  font-weight: 900;
}

.one-page-nav .nav-call {
  border: 1px solid #f47b20;
  color: #fff;
}

.one-page-nav .nav-assessment {
  background: linear-gradient(180deg,#ef7200,#c84d00);
  border: 1px solid #ff9b2f;
  color: #fff;
  text-transform: uppercase;
  letter-spacing: .025em;
}

/* Restore original artwork proportions. The images themselves now have the duplicate menu removed. */
@media (min-width: 761px) {
  .one-page-hero,
  .desktop-art-section {
    height: auto !important;
    min-height: 0 !important;
    overflow: hidden;
  }

  .one-page-hero > picture {
    display: block;
    height: auto !important;
    transform: none !important;
  }

  .one-page-hero > picture img,
  .desktop-art-section > img {
    display: block;
    width: 100%;
    height: auto !important;
    min-height: 0 !important;
    object-fit: contain !important;
    object-position: top center !important;
    transform: none !important;
  }

  .desktop-cta-hotspots {
    inset: 0 !important;
    height: auto !important;
    transform: none !important;
  }
}

@media (max-width: 1200px) and (min-width: 761px) {
  .one-page-brand { font-size: 17px; }
  .one-page-nav { gap: 8px; }
  .one-page-nav a { font-size: 11px; }
  .one-page-nav .nav-call,
  .one-page-nav .nav-assessment { padding-inline: 10px; }
}

@media (max-width: 760px) {
  .one-page-nav .nav-assessment {
    display: block;
    width: auto;
    margin: 8px 14px 14px;
    text-align: center;
  }
}


/* ABSOLUTE FINAL HEADER BEHAVIOR */
:root {
  --live-header-height: 72px;
}

html {
  scroll-padding-top: var(--live-header-height);
}

body {
  padding-top: var(--live-header-height) !important;
}

.one-page-header {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  height: var(--live-header-height) !important;
  min-height: var(--live-header-height) !important;
  z-index: 99999 !important;
  background: #050505 !important;
}

@media (min-width: 761px) {
  .one-page-hero,
  .desktop-art-section {
    scroll-margin-top: var(--live-header-height) !important;
  }
}

@media (max-width: 760px) {
  :root {
    --live-header-height: 64px;
  }

  body {
    padding-top: var(--live-header-height) !important;
  }
}


/* BIRMINGHAM SERVICE AREA — REFINED DESKTOP + MOBILE */
.desktop-service-area {
  position: absolute;
  z-index: 25;
  left: 4.7%;
  top: 37.1%;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
  color: rgba(255,255,255,.88);
  font-size: clamp(13px,.92vw,16px);
  line-height: 1.25;
  font-weight: 600;
  letter-spacing: .01em;
  text-transform: none;
  white-space: nowrap;
  pointer-events: none;
  text-shadow: 0 2px 8px rgba(0,0,0,.85);
}
.desktop-service-area::after {
  content: "";
  width: 44px;
  height: 1px;
  margin-left: 4px;
  background: linear-gradient(90deg, rgba(244,123,32,.9), rgba(244,123,32,0));
}
.service-pin {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #f47b20;
  font-size: 1.05em;
  font-weight: 700;
  line-height: 1;
  text-shadow: 0 0 10px rgba(244,123,32,.3);
}
.mobile-service-area { display:none; }
.one-page-footer { flex-direction: column; gap: 20px; }
.footer-service-area {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: rgba(255,255,255,.82);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: .01em;
}
.footer-business {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 45px;
}
@media (max-width:1200px) and (min-width:761px) {
  .desktop-service-area {
    left: 4.5%;
    top: 36.8%;
    font-size: 12px;
  }
  .desktop-service-area::after { width: 30px; }
}
@media (max-width:760px) {
  .desktop-service-area { display:none; }
  .mobile-service-area {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    margin-top: 15px;
    color: rgba(255,255,255,.84);
    font-size: 13px;
    line-height: 1.4;
    font-weight: 600;
    letter-spacing: .005em;
  }
  .one-page-footer { gap: 16px; }
  .footer-service-area {
    max-width: 330px;
    line-height: 1.5;
    text-align: center;
  }
  .footer-business { flex-direction: column; gap: 12px; }
}

/* Approved service-area treatment: one clean line directly below the sticky menu. */
.service-area-bar {
  position: relative;
  z-index: 990;
  display: flex;
  min-height: 58px;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 10px 24px;
  background: #050505;
  color: #e7e7e7;
  font-size: clamp(16px, 1.35vw, 22px);
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: .005em;
  text-align: center;
}
.service-area-pin {
  flex: 0 0 auto;
  color: #f47b20;
  font-size: 1.15em;
  line-height: 1;
}
.desktop-service-area,
.mobile-service-area { display: none !important; }

@media (max-width: 760px) {
  .service-area-bar {
    min-height: 68px;
    gap: 9px;
    padding: 11px 18px 12px;
    font-size: clamp(15px, 4.25vw, 18px);
    line-height: 1.35;
  }
  .service-area-bar span:last-child {
    max-width: 31rem;
  }
}

/* Assessment artwork uses a left-aligned bottom CTA. Scope this fix only to that section. */
.desktop-art-section[data-page="assessment"] .hs-bottom-assessment {
  left: 3.05%;
  top: 86.05%;
  width: 25.15%;
  height: 7.15%;
  z-index: 50;
}