/* Milan's Roofing V15 — premium UX/UI polish.
   Intent: restrained editorial hierarchy, more air, intentional micro-interactions,
   and a consistent visual language without changing the working content/forms. */
:root{
  --v15-accent:#F67725;
  --v15-accent-deep:#D95B12;
  --v15-ink:#111315;
  --v15-paper:#F5F3EE;
  --v15-paper-warm:#EEEAE1;
  --v15-line:#D8D4CB;
  --v15-shadow:0 18px 55px rgba(17,19,21,.10);
  --v15-shadow-hover:0 26px 70px rgba(17,19,21,.14);
}

/* TYPOGRAPHIC HIERARCHY
   Home H1 is the branded all-caps statement.
   Inner-page H1s and section headings use natural case for a more editorial premium feel.
   Labels, navigation, buttons and eyebrows remain uppercase. */
.home-page .hero h1{text-transform:uppercase!important}
.inner-page .inner-hero h1,
.premium-page-hero h1,
.content-page h1,
.system-detail-page .hero h1{
  text-transform:none!important;
  letter-spacing:-.048em!important;
  line-height:.94!important;
  max-width:880px!important;
}
.inner-page .inner-hero h1{font-size:clamp(54px,5.5vw,86px)!important}
.premium-page-hero h1,.content-page h1{font-size:clamp(52px,5.3vw,84px)!important}

/* BREATHING ROOM + EDITORIAL RHYTHM */
.section{padding-top:124px!important;padding-bottom:124px!important}
.work,.real-projects{padding-top:136px!important;padding-bottom:144px!important}
.final{padding-top:118px!important;padding-bottom:118px!important}
.intro-grid,.owner-grid,.systems-layout,.area-grid,.split{column-gap:clamp(64px,6vw,104px)!important}
.section-head,.work-head,.service-explorer-head,.gallery-head,.notes-head,.related-head{margin-bottom:52px!important}
.display{max-width:840px!important}
.copy,.intro-copy p,.owner-copy>p,.split-copy p{max-width:62ch}

/* A subtle design signature rather than decorative noise. */
.section>.wrap,.work>.wrap,.real-projects>.wrap,.final>.wrap{position:relative}
.section>.wrap:before{
  content:"";position:absolute;top:-1px;left:0;width:42px;height:2px;background:var(--v15-accent);opacity:.72;
}
.section.intro>.wrap:before,.section:has(.contact-premium)>.wrap:before{display:none}
::selection{background:rgba(246,119,37,.22);color:var(--v15-ink)}

/* NAVIGATION: quiet, exact hover affordance. */
.header nav>a,.header .navdrop>a,header.header nav>a{position:relative}
.header nav>a:not(.nav-cta):after,.header .navdrop>a:after,header.header nav>a:not(.nav-cta):after{
  content:"";position:absolute;left:0;right:100%;bottom:-9px;height:2px;background:var(--v15-accent);transition:right .24s ease;
}
.header nav>a:not(.nav-cta):hover:after,.header .navdrop:hover>a:after,header.header nav>a:not(.nav-cta):hover:after{right:0}
.drop{box-shadow:0 22px 60px rgba(17,19,21,.13)!important;border-radius:2px}
.drop a{transition:background .18s ease,color .18s ease,padding-left .18s ease}
.drop a:hover{background:#F3EFE7!important;color:var(--v15-ink)!important;padding-left:14px!important}

/* BUTTONS: tactile but restrained. */
.btn,.nav-cta,.premium-page-hero__actions a{
  transition:transform .2s ease,box-shadow .2s ease,background .2s ease,border-color .2s ease!important;
}
.btn:hover,.nav-cta:hover,.premium-page-hero__actions a:hover{transform:translateY(-2px)!important}
.btn.accent:hover,.nav-cta:hover,.premium-page-hero__primary:hover{box-shadow:0 12px 28px rgba(246,119,37,.23)!important}
.btn:focus-visible,.nav-cta:focus-visible,a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{
  outline:2px solid var(--v15-accent)!important;outline-offset:4px!important;
}

/* CARDS / ROWS: consistent interaction language across the site. */
a.card,a.post,a.project,a.service-tab,a.system-link,a.system-index-row,.area-list a,.blog-row,.related-link{
  transition:transform .24s ease,box-shadow .24s ease,background .24s ease,border-color .24s ease!important;
}
a.card:hover,a.post:hover{transform:translateY(-5px)!important;box-shadow:var(--v15-shadow-hover)!important}
a.project:hover{transform:translateY(-3px)!important}
a.service-tab:hover,a.system-link:hover,a.system-index-row:hover,.area-list a:hover,.blog-row:hover,.related-link:hover{
  background:rgba(246,119,37,.055)!important;
}
.area-list a:hover{padding-left:18px!important;padding-right:14px!important}
.area-action,.arr,.sa,.related-link span{transition:transform .22s ease,color .22s ease!important}
.area-list a:hover .area-action,.row:hover .arr,a.system-link:hover .sa,.related-link:hover span{transform:translateX(4px)!important;color:var(--v15-accent)!important}

/* IMAGE TREATMENT: never intentionally soften project photography. */
.project-img,.card img,.post img,.gallery-item img,.split-img img,.owner-photo img,
.system-index-img img,.service-stage img,.system-preview img,.real-project-grid img,
.premium-page-hero__image img,.premium-page-hero__tile img{
  filter:none!important;
  image-rendering:auto;
}
.project,.card-img,.post,.gallery-item,.split-img,.owner-photo,.system-index-img,.service-stage,.system-preview,.real-project-grid figure{
  background:#DDD8CF;
}
.project:hover .project-img,.card:hover img,.post:hover img,.gallery-item:hover img,.system-index-row:hover img,.real-project-grid figure:hover img{
  transform:scale(1.025)!important;
}

/* Project/gallery overlays feel designed, not pasted on. */
.project-label,.gallery-item span,.real-project-grid figcaption{
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
}
.project-label:before{
  content:"";position:absolute;left:0;top:-12px;width:34px;height:2px;background:var(--v15-accent);
}

/* FINANCING PAGE: make the provider section feel like a designed decision point. */
.finance-panel{
  border:1px solid var(--v15-line)!important;
  border-top:3px solid var(--v15-accent)!important;
  box-shadow:var(--v15-shadow)!important;
  padding:clamp(40px,5vw,68px)!important;
  background:linear-gradient(135deg,#fff 0%,#fff 70%,#F7F3EA 100%)!important;
}
.finance-logo{padding:24px!important;background:#fff!important;border:1px solid #E4E0D7!important}
.finance-logo img{object-fit:contain!important;filter:none!important}
.finance-panel .link{color:var(--v15-ink);font-weight:800!important}
.finance-panel .link:before{content:"";width:8px;height:8px;border-radius:50%;background:var(--v15-accent);margin-right:2px}
.finance-panel .link:hover{color:var(--v15-accent-deep)}

/* FORMS: premium focus states and clear hierarchy. */
.contact-premium{box-shadow:var(--v15-shadow)!important;border-radius:2px;overflow:hidden}
.form-control input,.form-control select,.form-control textarea,.field{
  transition:border-color .18s ease,box-shadow .18s ease,background .18s ease!important;
}
.form-control input:focus,.form-control select:focus,.form-control textarea:focus,.field:focus{
  border-color:var(--v15-accent)!important;background:#FFFCF7!important;box-shadow:0 1px 0 var(--v15-accent)!important;
}

/* FOOTER gets one visual anchor and more breathing room. */
footer,.footer{border-top:3px solid var(--v15-accent)!important}
.footer-grid{row-gap:46px!important}

/* About photo: preserve authenticity and keep the upscaled selfie at a tasteful size. */
.about-page .premium-page-hero__visual{max-width:400px!important;width:400px!important}
.about-page .premium-page-hero__image{width:400px!important;height:400px!important;box-shadow:0 18px 55px rgba(17,19,21,.15)!important}
.about-page .premium-page-hero__image:after{content:"";position:absolute;inset:12px -12px -12px 12px;border:1px solid rgba(246,119,37,.45);z-index:-1}

/* Responsive: retain air, but don't waste narrow screens. */
@media(max-width:1100px){
  .section{padding-top:100px!important;padding-bottom:100px!important}
  .work,.real-projects{padding-top:108px!important;padding-bottom:114px!important}
  .inner-page .inner-hero h1{font-size:clamp(50px,7.5vw,74px)!important}
}
@media(max-width:760px){
  .section{padding-top:78px!important;padding-bottom:78px!important}
  .work,.real-projects,.final{padding-top:82px!important;padding-bottom:86px!important}
  .section-head,.work-head,.service-explorer-head,.gallery-head,.notes-head,.related-head{margin-bottom:34px!important}
  .inner-page .inner-hero h1,.premium-page-hero h1,.content-page h1,.system-detail-page .hero h1{
    font-size:clamp(42px,11.5vw,56px)!important;line-height:.96!important;
  }
  .about-page .premium-page-hero__visual,.about-page .premium-page-hero__image{width:100%!important;max-width:400px!important;height:auto!important;aspect-ratio:1/1!important}
  .section>.wrap:before{width:32px}
}
@media(prefers-reduced-motion:reduce){
  *,*:before,*:after{scroll-behavior:auto!important;transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}
}