/* Milan's Roofing V18 — uppercase inner-page titles + modern mobile call control.
   Loaded last. Keeps the proven V17 layout/spacing system intact. */

/* Inner-page top titles intentionally match the strong uppercase language of Home.
   Only the page-level H1 is affected; section headings remain natural case. */
.inner-page .inner-hero h1,
.inner-page .premium-page-hero h1,
.inner-page main > .hero h1,
.system-detail-page main > .hero h1,
.content-page h1{
  text-transform:uppercase!important;
}

/* Modern handset glyph used on tablet/mobile. No unicode/retro phone symbols. */
@media(max-width:1240px){
  .header-phone,
  header.header .phone{
    width:46px!important;
    min-width:46px!important;
    height:46px!important;
    min-height:46px!important;
    padding:0!important;
    border:1px solid #f36d21!important;
    border-left:1px solid #f36d21!important;
    border-radius:12px!important;
    background:#f36d21!important;
    box-shadow:0 8px 22px rgba(243,109,33,.18)!important;
    overflow:hidden!important;
    transition:background .22s ease,transform .22s ease,box-shadow .22s ease!important;
  }

  .header-phone::before,
  header.header .phone::before{
    content:""!important;
    position:absolute!important;
    left:50%!important;
    top:50%!important;
    bottom:auto!important;
    width:21px!important;
    height:21px!important;
    transform:translate(-50%,-50%)!important;
    background-color:transparent!important;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6A19.79 19.79 0 0 1 2.12 4.18 2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72c.13.96.35 1.9.66 2.8a2 2 0 0 1-.45 2.11L8.05 9.9a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45c.91.31 1.85.53 2.8.66A2 2 0 0 1 22 16.92z'/%3E%3C/svg%3E")!important;
    background-repeat:no-repeat!important;
    background-position:center!important;
    background-size:21px 21px!important;
    -webkit-mask:none!important;
    mask:none!important;
    color:transparent!important;
    opacity:1!important;
  }

  .header-phone::after,
  header.header .phone::after{
    display:none!important;
    content:none!important;
  }

  .header-phone:hover,
  header.header .phone:hover{
    background:#d85814!important;
    transform:translateY(-1px)!important;
    box-shadow:0 10px 26px rgba(216,88,20,.24)!important;
  }

  /* The phone link itself remains the full accessible tap target. */
  .header-phone a,
  header.header .phone > a{
    position:absolute!important;
    inset:0!important;
    z-index:3!important;
    display:block!important;
  }

  /* Drawer call row gets the same modern line icon. */
  .mobile-panel .mobile-call-row::after,
  .mobile-nav .mobile-call-row::after{
    content:""!important;
    width:19px!important;
    height:19px!important;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23f36d21' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6A19.79 19.79 0 0 1 2.12 4.18 2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72c.13.96.35 1.9.66 2.8a2 2 0 0 1-.45 2.11L8.05 9.9a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45c.91.31 1.85.53 2.8.66A2 2 0 0 1 22 16.92z'/%3E%3C/svg%3E")!important;
    background-repeat:no-repeat!important;
    background-position:center!important;
    background-size:19px 19px!important;
    color:transparent!important;
    font-size:0!important;
    flex:0 0 19px!important;
  }
}

@media(max-width:760px){
  .header-phone,
  header.header .phone{
    width:42px!important;
    min-width:42px!important;
    height:42px!important;
    min-height:42px!important;
    border-radius:11px!important;
  }
  .header-phone::before,
  header.header .phone::before{
    width:19px!important;
    height:19px!important;
    background-size:19px 19px!important;
  }
}

@media(prefers-reduced-motion:reduce){
  .header-phone,header.header .phone{transition:none!important}
}

/* =========================================================
   V18.1 — financing hero alignment + quieter mobile call icon
   ========================================================= */

/* Financing should belong to the same dark/image hero family as the
   rest of the inner pages instead of introducing a separate beige top. */
.finance-hero-v8{
  background:#0b0d0d!important;
  color:#fff!important;
  border-bottom:0!important;
}
.finance-hero-v8::after{
  display:none!important;
  content:none!important;
}
.finance-hero-v8 .hero-media{
  display:block!important;
  transform:scale(1.02)!important;
  filter:saturate(.88) contrast(1.02)!important;
}
.finance-hero-v8 .hero-shade{
  display:block!important;
  background:linear-gradient(90deg,rgba(5,7,8,.89) 0%,rgba(5,7,8,.69) 42%,rgba(5,7,8,.30) 72%,rgba(5,7,8,.16) 100%)!important;
}
.finance-hero-v8 h1{
  color:#fff!important;
}
.finance-hero-v8 p{
  color:#d9dad6!important;
}
.finance-hero-v8 .btn.ghost{
  color:#fff!important;
  border-color:rgba(255,255,255,.58)!important;
}
.finance-hero-v8 .btn.ghost:hover{
  border-color:#fff!important;
  background:rgba(255,255,255,.08)!important;
}

/* Mobile call control: retain a generous tap target, but visually reduce it
   to a simple orange line icon. No orange tile, border, or drop shadow. */
@media(max-width:1240px){
  .header-phone,
  header.header .phone{
    position:relative!important;
    width:44px!important;
    min-width:44px!important;
    height:44px!important;
    min-height:44px!important;
    padding:0!important;
    border:0!important;
    border-left:0!important;
    border-radius:0!important;
    background:transparent!important;
    box-shadow:none!important;
    overflow:visible!important;
    transition:opacity .18s ease,transform .18s ease!important;
  }

  .header-phone::before,
  header.header .phone::before{
    width:22px!important;
    height:22px!important;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23f36d21' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6A19.79 19.79 0 0 1 2.12 4.18 2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72c.13.96.35 1.9.66 2.8a2 2 0 0 1-.45 2.11L8.05 9.9a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45c.91.31 1.85.53 2.8.66A2 2 0 0 1 22 16.92z'/%3E%3C/svg%3E")!important;
    background-size:22px 22px!important;
  }

  .header-phone:hover,
  header.header .phone:hover{
    background:transparent!important;
    box-shadow:none!important;
    transform:translateY(-1px)!important;
    opacity:.72!important;
  }

  .header-phone:focus-within,
  header.header .phone:focus-within{
    outline:2px solid rgba(243,109,33,.35)!important;
    outline-offset:2px!important;
  }
}

@media(max-width:760px){
  .header-phone,
  header.header .phone{
    width:40px!important;
    min-width:40px!important;
    height:40px!important;
    min-height:40px!important;
  }
  .header-phone::before,
  header.header .phone::before{
    width:21px!important;
    height:21px!important;
    background-size:21px 21px!important;
  }
}