/* DON Roofing polish pass (November 5, 2026): header fit and section rhythm.
   Loaded after each page stylesheet, so it applies to the shared header,
   footer and the sections pages reuse (projects, reviews, service areas). */

/* ---------- Header ---------- */
.hdr{border-bottom:1px solid rgba(203,162,67,.22)}
.hdr .wrap{max-width:1440px;margin:0 auto}
.nav a{white-space:nowrap;position:relative;transition:color .2s}
.nav a.dr-active{color:var(--gold)}
.nav a.dr-active::after{content:"";position:absolute;left:0;right:0;bottom:-8px;height:2px;background:var(--gold)}
.phone{white-space:nowrap}
.hdr .cta{white-space:nowrap}
@media (min-width:1280px){
  .hdr .wrap{height:86px;padding:0 40px}
  .hdr .logo{width:150px}
  .nav{flex:1;justify-content:center;margin:0 20px;gap:22px;font-size:18px;letter-spacing:.03em}
  .phone{margin-left:0;font-size:20px;gap:8px}
  .hdr .cta{margin-left:22px;height:46px;padding:0 20px;font-size:18px}
}
@media (min-width:1280px) and (max-width:1399px){
  /* Not enough room for the full number beside eight links: show the call icon only. */
  .phone{font-size:0;gap:0;width:44px;height:44px;justify-content:center;border:1.5px solid rgba(203,162,67,.6);border-radius:50%}
}
@media (min-width:1440px){
  .nav{gap:28px;font-size:19px}
}
@media (max-width:1279px){
  .nav{display:none}
  .burger{display:flex}
  .phone{margin-left:auto}
}

/* ---------- Section rhythm (desktop and tablet) ---------- */
@media (min-width:1024px){
  .process{padding:76px 56px 80px 93px}
  .process h2{font-size:48px;line-height:48px}
  .steps{margin-top:36px;gap:30px}
  .steps::before{bottom:70px}
  .process .btn{margin:44px 0 0 0}
  .svcs{padding:56px 56px 56px 40px;gap:28px;justify-content:center}
  .svc img{height:164px}

  .projects{border-top:0;padding:96px 40px 100px}
  .projects h2{font-size:52px;line-height:52px}
  .grid{max-width:1240px;margin-top:40px;gap:20px}
  .projects .btn{margin-top:44px;height:54px;padding:0 40px;font-size:22px}

  .res .wrap{grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);padding:96px 80px 96px 119px;gap:72px;max-width:1440px;margin:0 auto}
  .res p{max-width:460px}
  .res h2{margin-top:12px;font-size:50px;line-height:50px;text-wrap:balance}
  .res p{margin-top:20px}
  .res img{height:320px;border-radius:12px}

  .reviews .wrap{padding:96px 40px 104px;max-width:1306px}
  .rv-head{align-items:flex-end;padding:0}
  .rv-head h2{font-size:48px;line-height:48px;margin-top:8px}
  .score{margin-bottom:0;padding:12px 40px 12px 24px}
  .cards{margin-top:44px;gap:24px}
  .card{padding:28px 32px 28px;border-radius:6px}
  .card q{margin-top:14px;font-size:18px;line-height:28px}
  .card .who{padding-top:24px}

  .serve{padding:80px 40px 88px}
  .serve h2{font-size:42px;line-height:46px}
}
/* Service areas: a dot before every city instead of "|" after it, so no
   divider is ever left dangling at the end of a wrapped line. */
@media (min-width:1181px){
  .cities{margin-top:28px;gap:14px 40px;max-width:1100px}
  .cities li::after{content:none}
  .cities li::before{content:"";flex:none;width:7px;height:7px;border-radius:50%;background:var(--gold);margin-right:12px}
}

/* ---------- Browser surfaces ---------- */
::selection{background:#CBA243;color:#050505}
.dr a:focus-visible,.dr button:focus-visible,.dr input:focus-visible,.dr select:focus-visible,.dr textarea:focus-visible,.dr summary:focus-visible{outline:2px solid #CBA243;outline-offset:3px}

/* The process/services grid is capped at 1440px: carry the beige panel to the
   left edge of wider screens. */
@media (min-width:1024px){
  .how{position:relative}
  .how::before{content:"";position:absolute;top:0;bottom:0;right:100%;width:calc((100vw - 100%) / 2);background:var(--beige)}
}
body{overflow-x:clip}

/* Home hero, enlarged (November 5, 2026): fills the first screen on desktop. */
@media (min-width:1024px){
  .dr-home-0 .hero .wrap{min-height:clamp(620px,calc(100svh - 86px),900px);padding:72px 0 120px 68px;justify-content:center;max-width:1440px}
  .dr-home-0 .hero .bg{width:62%}
  .dr-home-0 .hero .bg::after{background:linear-gradient(90deg,#050505 0%,rgba(5,5,5,.8) 12%,rgba(5,5,5,0) 38%)}
  .dr-home-0 .hero h1{font-size:clamp(96px,8.2vw,132px);line-height:.88;letter-spacing:-.01em}
  .dr-home-0 .hero .sub{margin-top:32px;max-width:540px;font-size:24px;line-height:34px}
  .dr-home-0 .hero .ctas{margin-top:40px;gap:20px}
  .dr-home-0 .hero .ctas .btn{height:62px;padding:0 34px;font-size:26px}
}
@media (min-width:1024px) and (max-width:1279px){
  .dr-home-0 .hero .wrap{padding-left:48px}
}