/* Milan's Roofing — authoritative premium refinement layer */
:root {
  --accent: #f36d21;
  --accent-dark: #c94f0d;
  --ink: #111311;
  --paper: #f5f3ed;
  --line: #d6d2c8;
  --max: 1640px;
}

html { scroll-behavior: auto; }
body {
  font-family: Manrope, Arial, sans-serif !important;
  font-size: 17px;
  line-height: 1.65;
  text-rendering: optimizeLegibility;
}
.wrap { width: min(var(--max), calc(100% - 72px)) !important; }

/* One calm, properly aligned header system. */
.header-shell,
.header-shell.scrolled {
  position: sticky !important;
  inset: auto !important;
  top: 0 !important;
  min-height: 98px !important;
  height: 98px !important;
  background: rgba(248, 247, 243, .985) !important;
  border-bottom: 1px solid rgba(17, 19, 17, .13) !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  z-index: 1000 !important;
}
.header,
.header-shell.scrolled .header {
  min-height: 98px !important;
  height: 98px !important;
  display: grid !important;
  grid-template-columns: 248px minmax(0, 1fr) 154px !important;
  align-items: center !important;
  gap: 28px !important;
  padding: 0 !important;
}
.brand { align-self: center !important; min-width: 0 !important; }
.brand img,
.header-shell.scrolled .brand img {
  width: 236px !important;
  height: 64px !important;
  object-fit: contain !important;
  object-position: left center !important;
  background: transparent !important;
  box-shadow: none !important;
  transform: none !important;
}
.header nav {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: clamp(18px, 1.45vw, 29px) !important;
  min-width: 0 !important;
}
.header nav > a,
.header .navdrop > a {
  color: #181a18 !important;
  font-size: 12px !important;
  font-weight: 750 !important;
  line-height: 1 !important;
  letter-spacing: .055em !important;
  padding: 14px 0 !important;
  white-space: nowrap !important;
}
.header .navdrop { padding: 26px 0 !important; }
.header .drop {
  top: 70px !important;
  width: 260px !important;
  padding: 12px !important;
  border: 1px solid rgba(17, 19, 17, .1) !important;
  border-top: 3px solid var(--accent) !important;
  border-radius: 0 !important;
  box-shadow: 0 24px 60px rgba(15, 16, 15, .13) !important;
}
.header .drop a { font-size: 13px !important; padding: 12px 13px !important; }
.header .nav-cta {
  min-height: 52px !important;
  padding: 0 22px !important;
  background: var(--accent) !important;
  color: #fff !important;
  font-size: 12px !important;
  letter-spacing: .07em !important;
  border: 1px solid var(--accent) !important;
}
.header .nav-cta:hover { background: var(--accent-dark) !important; transform: none !important; }
.header-phone {
  min-width: 154px !important;
  padding-left: 20px !important;
  border-left: 1px solid var(--line) !important;
  align-self: center !important;
}
.header-phone small { font-size: 10px !important; letter-spacing: .1em !important; margin-bottom: 7px !important; }
.header-phone a { font-size: 16px !important; letter-spacing: -.01em !important; }

/* Stronger typography and readable labels. */
.eyebrow,
.section-no,
.hero-kicker { font-size: 11px !important; letter-spacing: .15em !important; }
.copy,
.intro-copy p,
.owner-copy > p,
.split-copy p { font-size: 17px !important; line-height: 1.75 !important; }
.btn {
  min-height: 54px !important;
  padding: 0 24px !important;
  font-size: 12px !important;
  letter-spacing: .09em !important;
  border-radius: 0 !important;
}
.display { letter-spacing: -.045em !important; }

/* Premium hero: cleaner composition, no expensive blur/zoom. */
.hero {
  height: calc(100svh - 98px) !important;
  min-height: 720px !important;
  max-height: 960px !important;
}
.hero-media {
  transform: none !important;
  transition: none !important;
  background-position: center 48% !important;
}
.hero:hover .hero-media { transform: none !important; }
.hero-shade {
  background:
    linear-gradient(90deg, rgba(6, 8, 8, .90) 0%, rgba(6, 8, 8, .70) 42%, rgba(6, 8, 8, .18) 76%, rgba(6, 8, 8, .06) 100%),
    linear-gradient(0deg, rgba(6, 8, 8, .58), transparent 55%) !important;
}
.hero-content { padding-top: 0 !important; }
.hero h1 {
  font-size: clamp(78px, 7.2vw, 132px) !important;
  line-height: .84 !important;
  letter-spacing: -.055em !important;
  max-width: 1080px !important;
}
.hero-copy { font-size: 19px !important; line-height: 1.58 !important; max-width: 720px !important; }
.hero-proof {
  width: 330px !important;
  padding: 28px !important;
  background: rgba(13, 15, 14, .91) !important;
  backdrop-filter: none !important;
}

/* Replace the constantly moving ticker with a precise trust strip. */
.kinetic-trust { overflow: hidden !important; }
.kinetic-track {
  width: 100% !important;
  display: grid !important;
  grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
  animation: none !important;
  transform: none !important;
}
.kinetic-item { min-width: 0 !important; justify-content: center !important; padding: 22px 18px !important; }
.kinetic-item:nth-child(n+7) { display: none !important; }

/* Cleaner image presentation and less layout work below the fold. */
main > section:not(.hero),
body > section:not(.hero):not(.kinetic-trust),
footer { content-visibility: auto; contain-intrinsic-size: 800px; }
.reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
.project-img,
.gallery-item img,
.owner-photo img,
.service-stage img,
.system-preview img { filter: none !important; }
.project:hover .project-img,
.gallery-item:hover img { transform: scale(1.015) !important; }
.service-stage,
.system-preview,
.owner-photo,
.project { box-shadow: none !important; }

/* Curated project gallery: consistent, editorial, and professional. */
.gallery {
  columns: auto !important;
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 18px !important;
}
.gallery-item { margin: 0 !important; height: 430px !important; background: #d5d2ca !important; }
.gallery-item:nth-child(3n+1) { grid-row: span 2; height: 878px !important; }
.gallery-item img { width: 100% !important; height: 100% !important; object-fit: cover !important; }
.gallery-item span {
  left: 20px !important;
  bottom: 20px !important;
  padding: 10px 13px !important;
  font-size: 10px !important;
  background: rgba(14, 16, 15, .88) !important;
}

@media (max-width: 1280px) {
  .header { grid-template-columns: 218px minmax(0, 1fr) 134px !important; gap: 20px !important; }
  .brand img { width: 208px !important; height: 58px !important; }
  .header nav { gap: 17px !important; }
  .header nav > a, .header .navdrop > a { font-size: 11px !important; }
  .header .nav-cta { padding: 0 15px !important; }
  .header-phone { min-width: 134px !important; padding-left: 15px !important; }
  .header-phone a { font-size: 14px !important; }
}

@media (max-width: 1080px) {
  .header-shell, .header-shell.scrolled, .header, .header-shell.scrolled .header { height: 82px !important; min-height: 82px !important; }
  .header { display: flex !important; justify-content: space-between !important; }
  .brand img { width: 210px !important; height: 56px !important; }
  .header nav, .header-phone { display: none !important; }
  .mobile-menu-btn { display: inline-flex !important; font-size: 12px !important; }
  .mobile-panel.open { top: 82px !important; }
  .hero { height: auto !important; min-height: 720px !important; max-height: none !important; }
  .kinetic-track { grid-template-columns: repeat(3, 1fr) !important; }
}

@media (max-width: 680px) {
  .wrap { width: calc(100% - 32px) !important; }
  .brand img { width: 184px !important; height: 52px !important; }
  .hero { min-height: 700px !important; }
  .hero h1 { font-size: clamp(58px, 17vw, 78px) !important; }
  .hero-copy { font-size: 16px !important; }
  .hero-actions { gap: 10px !important; }
  .kinetic-track { grid-template-columns: repeat(2, 1fr) !important; }
  .kinetic-item:nth-child(n+5) { display: none !important; }
  .gallery { grid-template-columns: 1fr !important; }
  .gallery-item,
  .gallery-item:nth-child(3n+1) { height: 340px !important; grid-row: auto !important; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition-duration: .01ms !important; }
}

/* Iteration 5: exact header alignment + premium navigation interaction */
.header nav { height: 100% !important; }
.header .navdrop {
  height: 100% !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
}
.header nav > a:not(.nav-cta),
.header .navdrop > a {
  position: relative !important;
  height: 100% !important;
  display: inline-flex !important;
  align-items: center !important;
  padding: 0 !important;
  transform: translateY(0);
  transition: color .22s ease, transform .22s ease !important;
}
.header nav > a:not(.nav-cta)::after,
.header .navdrop > a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 24px;
  height: 2px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform .28s cubic-bezier(.2,.7,.2,1);
}
.header nav > a:not(.nav-cta):hover,
.header .navdrop:hover > a {
  color: var(--accent-dark) !important;
  transform: translateY(-1px);
}
.header nav > a:not(.nav-cta):hover::after,
.header .navdrop:hover > a::after {
  transform: scaleX(1);
  transform-origin: left;
}
.header .nav-cta {
  align-self: center !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  transform: translateY(0);
  box-shadow: 0 0 0 rgba(0,0,0,0);
  transition: background .22s ease, transform .22s ease, box-shadow .22s ease !important;
}
.header .nav-cta:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 10px 24px rgba(201,79,13,.18) !important;
}
.header .drop { top: 98px !important; }

@media (max-width: 1080px) {
  .header nav > a:not(.nav-cta)::after,
  .header .navdrop > a::after { display: none !important; }
}

/* Premium action feedback across the site */
.btn.accent,
.btn.dark,
.btn.ghost {
  transition: transform .22s ease, box-shadow .22s ease, background .22s ease, color .22s ease, border-color .22s ease !important;
}
.btn.accent:hover,
.btn.dark:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 12px 28px rgba(17,19,17,.14) !important;
}
.btn.ghost:hover {
  background: rgba(255,255,255,.96) !important;
  color: #111311 !important;
  border-color: #fff !important;
  transform: translateY(-2px) !important;
}
.btn span { transition: transform .22s ease !important; }
.btn:hover span { transform: translate(3px,-3px) !important; }

/* V8 — restore the original desktop home hero proportions after V7 navigation work. */
@media(min-width:1181px){
  .hero{height:calc(100svh - 92px) !important;min-height:650px !important;max-height:850px !important}
  .hero h1{font-size:clamp(72px,6.6vw,116px) !important}
  .hero-proof{width:300px !important;padding:24px !important}
}