/* R W Dawson Roofing: shared styles (Tailwind Play CDN handles utilities) */
:root { --orange:#F27D16; --amber:#FA9804; --yellow:#FFD200; --ink:#17140F; --stone:#E9E6DF; }
.font-display { font-family: "Barlow Condensed", "Arial Narrow", sans-serif; }
.font-body, body { font-family: "Barlow", system-ui, sans-serif; }
html { -webkit-text-size-adjust: 100%; }
body { overflow-x: hidden; }
.eyebrow { font-size: .8rem; font-weight: 700; text-transform: uppercase; letter-spacing: .22em; }

.site-header { background: rgba(23,20,15,.55); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
.site-header.is-scrolled { background: rgba(23,20,15,.92); box-shadow: 0 8px 30px rgba(0,0,0,.25); }
.nav-link { position: relative; color: #e7e5e4; font-weight: 600; font-size: 15px; padding: .5rem 0; transition: color .2s; }
.nav-link:hover, .nav-link[aria-current="page"] { color: #fff; }
.nav-link::after { content:""; position:absolute; left:0; right:0; bottom:-2px; height:2px; background:var(--orange); transform:scaleX(0); transform-origin:left; transition:transform .25s; }
.nav-link:hover::after, .nav-link[aria-current="page"]::after { transform:scaleX(1); }

.btn-primary, .btn-ghost, .btn-dark { display:inline-flex; align-items:center; gap:.6rem; border-radius:999px; padding:1rem 1.75rem; font-weight:700; min-height:48px; transition: transform .2s, background-color .2s, box-shadow .2s, color .2s; }
.btn-primary { background: var(--orange); color: var(--ink); box-shadow: 0 10px 30px -10px rgba(242,125,22,.7); }
.btn-primary:hover { background: var(--yellow); transform: translateY(-2px); }
.btn-ghost { background: rgba(255,255,255,.08); color:#fff; box-shadow: inset 0 0 0 1px rgba(255,255,255,.25); }
.btn-ghost:hover { background: rgba(255,255,255,.16); transform: translateY(-2px); }
.btn-dark { background: var(--ink); color:#fff; }
.btn-dark:hover { background: var(--orange); color: var(--ink); transform: translateY(-2px); }
.btn-primary:disabled { opacity:.6; cursor:wait; transform:none; }

/* slate-tile texture echoing their slate roofs */
.slate-pattern { background-image:
  linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
  linear-gradient(90deg, rgba(255,255,255,.03) 1px, transparent 1px);
  background-size: 64px 32px, 32px 64px; background-position: 0 0, 16px 0; }

/* "Quality Guaranteed" diamond from their original header */
.diamond { position: relative; display:flex; align-items:center; justify-content:center; }
.diamond::before { content:""; position:absolute; inset:14%; transform: rotate(45deg); background: linear-gradient(135deg, #F69B0F, #F27F16); border: 3px solid #fff; box-shadow: 0 20px 40px -10px rgba(0,0,0,.5); }
.diamond span { position:relative; font-family:"Barlow Condensed",sans-serif; font-weight:800; text-transform:uppercase; color:#fff; text-align:center; line-height:.95; font-size: clamp(.95rem, 2.2vw, 1.35rem); letter-spacing:.02em; }

.zoom { position:relative; display:block; overflow:hidden; background: #2a251f; }
.zoom img { width:100%; height:100%; object-fit:cover; transition: transform .8s cubic-bezier(.2,.7,.2,1); }
.zoom:hover img, .zoom:focus-visible img { transform: scale(1.07); }
.lb-item { cursor: zoom-in; }

.field-label { display:block; font-weight:600; font-size:.95rem; margin-bottom:.4rem; }
.field { width:100%; border-radius: 14px; border: 1.5px solid rgba(23,20,15,.15); background:#faf9f6; padding: .85rem 1rem; font-size: 1rem; min-height: 50px; transition: border-color .2s, box-shadow .2s; }
.field:focus { outline:none; border-color: var(--orange); box-shadow: 0 0 0 4px rgba(242,125,22,.18); background:#fff; }
.hp { position:absolute !important; left:-10000px; width:1px; height:1px; overflow:hidden; }
.form-status.is-ok { background:#ecfdf3; color:#14532d; border:1.5px solid #86efac; }
.form-status.is-err { background:#fef2f2; color:#7f1d1d; border:1.5px solid #fca5a5; }
.grecaptcha-badge { visibility: hidden; }

.no-scrollbar { scrollbar-width:none; } .no-scrollbar::-webkit-scrollbar { display:none; }
.first-letter-drop > p:first-child::first-letter { font-family:"Barlow Condensed",sans-serif; font-weight:800; float:left; font-size:4.2rem; line-height:.85; margin:.2rem .6rem 0 0; color: var(--orange); }

.reveal { opacity:0; transform: translateY(24px); transition: opacity .8s ease, transform .8s cubic-bezier(.2,.7,.2,1); }
.reveal.in { opacity:1; transform:none; }
.hero-in { animation: heroIn 1s cubic-bezier(.2,.7,.2,1) both; }
@keyframes heroIn { from { opacity:0; transform: translateY(30px); } to { opacity:1; transform:none; } }
#lightbox.open { display:flex; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto !important; }
  .reveal { opacity:1; transform:none; transition:none; }
  .hero-in { animation:none; }
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}