@import "tailwindcss";

:root { --ink: #0b1820; --cream: #f5f0e8; --orange: #e7602a; --orange-dark: #bc4116; --line: rgba(255,255,255,.22); }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--cream); color: var(--ink); font-family: Inter, "Helvetica Neue", Arial, sans-serif; }
a { color: inherit; text-decoration: none; }
button, input, select { font: inherit; }
.site-header { height: 78px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 28px; padding: 0 clamp(24px,5vw,76px); background: #fff; position: relative; z-index: 10; }
.brand { display: inline-flex; align-items: center; gap: 11px; width: max-content; }
.brand-mark { width: 42px; height: 42px; display: grid; place-items: center; background: var(--orange); color: #fff; font-weight: 900; font-size: 21px; clip-path: polygon(50% 0,95% 23%,87% 77%,50% 100%,13% 77%,5% 23%); }
.brand b,.brand small { display: block; letter-spacing: .08em; line-height: 1; }
.brand b { font-size: 18px; }
.brand small { font-size: 9px; margin-top: 4px; font-weight: 800; color: #66727a; }
nav { display: flex; gap: 30px; font-size: 14px; font-weight: 700; }
nav a { padding: 29px 0; border-bottom: 2px solid transparent; }
nav a:hover { border-color: var(--orange); }
.header-phone { justify-self: end; text-align: right; }
.header-phone span,.header-phone strong { display: block; }
.header-phone span { color: #68757d; font-size: 11px; text-transform: uppercase; letter-spacing: .12em; margin-bottom: 3px; }
.header-phone strong { font-size: 17px; }
.offer-bar { min-height: 54px; padding: 10px clamp(24px,5vw,76px); background: var(--ink); color: #fff; display: flex; justify-content: center; align-items: center; gap: 18px; position: relative; z-index: 9; font-size: 14px; }
.offer-bar strong { color: #ffb99d; font-size: 23px; letter-spacing: .02em; }
.offer-kicker { font-size: 11px; letter-spacing: .16em; padding: 6px 9px; border: 1px solid rgba(255,255,255,.35); }
.offer-bar a { margin-left: 16px; font-weight: 800; border-bottom: 1px solid currentColor; }
.hero { min-height: calc(100vh - 132px); position: relative; overflow: hidden; display: grid; grid-template-columns: minmax(0,1.04fr) minmax(390px,.76fr); gap: clamp(48px,7vw,110px); align-items: center; padding: clamp(62px,8vh,96px) clamp(24px,6vw,92px) clamp(82px,10vh,116px); background-image: url("/neighbors-watch-roof-replacement.png"); background-size: cover; background-position: center; color: #fff; }
.hero-shade { position: absolute; inset: 0; background: linear-gradient(90deg,rgba(6,19,27,.95) 0%,rgba(6,19,27,.82) 47%,rgba(6,19,27,.36) 76%,rgba(6,19,27,.2) 100%),linear-gradient(0deg,rgba(6,19,27,.45),transparent 45%); }
.hero-copy { position: relative; z-index: 1; width:100%; min-width:0; max-width: 710px; }
.eyebrow { margin: 0 0 20px; color: #ffc3aa; letter-spacing: .19em; font-size: 12px; font-weight: 900; }
.hero h1 { margin: 0; font-size: clamp(54px,6.6vw,106px); line-height: .86; letter-spacing: -.058em; text-transform: uppercase; font-weight: 900; }
.hero h1 em { color: #ff7a43; font-style: normal; }
.hero-lede { max-width: 640px; font-size: clamp(18px,1.5vw,23px); line-height: 1.5; margin: 28px 0 30px; color: rgba(255,255,255,.84); }
.hero-actions { display: flex; gap: 12px; flex-wrap: wrap; }
.button { min-height: 54px; padding: 0 24px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid transparent; font-size: 13px; text-transform: uppercase; letter-spacing: .08em; font-weight: 900; cursor: pointer; transition: transform .2s ease,background .2s ease; }
.button:hover { transform: translateY(-2px); }
.button-primary { background: var(--orange); color: #fff; }
.button-primary:hover { background: var(--orange-dark); }
.button-ghost { border-color: rgba(255,255,255,.6); color: #fff; backdrop-filter: blur(5px); }
.button-ghost:hover { background: #fff; color: var(--ink); }
.hero-proof { display: flex; gap: 0; margin-top: 36px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); width: max-content; max-width: 100%; }
.hero-proof span { padding: 16px 22px 16px 0; margin-right: 22px; border-right: 1px solid var(--line); font-size: 12px; color: rgba(255,255,255,.74); }
.hero-proof span:last-child { border-right: 0; margin-right: 0; }
.hero-proof b { color: #fff; font-size: 15px; margin-right: 4px; }
.quote-card { position: relative; z-index: 2; background: rgba(255,255,255,.97); color: var(--ink); padding: clamp(28px,3.2vw,44px); box-shadow: 0 24px 70px rgba(0,0,0,.32); border-top: 5px solid var(--orange); transform: translateY(46px); opacity: 0; transition: transform .75s cubic-bezier(.2,.75,.2,1),opacity .55s ease; }
.quote-card.is-visible { transform: translateY(0); opacity: 1; }
.quote-heading p { margin: 0 0 8px; color: var(--orange-dark); font-size: 10px; font-weight: 900; letter-spacing: .15em; }
.quote-heading h2 { margin: 0 0 24px; font-size: clamp(26px,2.4vw,38px); line-height: 1; letter-spacing: -.04em; }
.quote-card form { display: grid; gap: 14px; }
.quote-card label { display: grid; gap: 7px; color: #4a5962; font-size: 10px; font-weight: 900; text-transform: uppercase; letter-spacing: .09em; }
.quote-card input,.quote-card select { width: 100%; min-width: 0; height: 48px; border: 1px solid #c9cfd2; background: #fff; padding: 0 13px; color: var(--ink); outline: none; }
.quote-card input:focus,.quote-card select:focus { border-color: var(--orange); box-shadow: 0 0 0 3px rgba(231,96,42,.12); }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.quote-card .button { width: 100%; margin-top: 4px; border: 0; }
.quote-card small { color: #718087; font-size: 10px; line-height: 1.45; text-align: center; }
.quote-success { min-height: 330px; display: flex; flex-direction: column; justify-content: center; text-align: center; }
.quote-success > span { width: 54px; height: 54px; margin: 0 auto 18px; display: grid; place-items: center; border-radius: 50%; background: #e7f5eb; color: #207d42; font-size: 25px; }
.quote-success h2 { font-size: 34px; margin: 0 0 10px; }
.quote-success p { line-height: 1.55; color: #52616a; }
.quote-success a { color: var(--orange-dark); font-weight: 800; margin-top: 10px; }
.hero-location { position: absolute; left: clamp(24px,6vw,92px); bottom: 26px; z-index: 2; color: rgba(255,255,255,.7); text-transform: uppercase; letter-spacing: .14em; font-size: 10px; }
@media (max-width:940px) { .site-header { grid-template-columns: 1fr auto; } nav { display:none; } .hero { grid-template-columns:minmax(0,1fr); min-height:auto; gap:44px; } .hero-copy { padding-top:8px; } .quote-card { max-width:620px; } }
@media (max-width:600px) { .site-header { height:68px; padding-inline:17px; } .brand-mark { width:36px; height:36px; } .brand b { font-size:15px; } .header-phone span { display:none; } .header-phone strong { font-size:14px; } .offer-bar { gap:8px; min-height:48px; padding:8px 12px; } .offer-kicker,.offer-bar > span:not(.offer-kicker) { display:none; } .offer-bar strong { font-size:18px; } .offer-bar a { margin-left:8px; font-size:12px; } .hero { padding:58px 18px 76px; background-position:62% center; } .hero h1 { max-width:100%; font-size:44px; line-height:.91; letter-spacing:-.045em; } .hero-lede { max-width:100%; font-size:17px; } .hero-actions { display:grid; } .hero-proof { width:100%; overflow-x:auto; } .hero-proof span { min-width:max-content; padding-right:14px; margin-right:14px; } .quote-card { padding:28px 20px; } .form-row { grid-template-columns:1fr; } .hero-location { left:18px; } }
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } .quote-card { opacity:1; transform:none; transition:none; } .button { transition:none; } }

/* Shared conversion sections */
.section { padding: clamp(78px,9vw,138px) clamp(24px,6vw,92px); }
.section-heading { display:grid; grid-template-columns:1.2fr .8fr; gap:clamp(44px,8vw,120px); align-items:end; margin-bottom:54px; }
.section-heading h2,.story-copy h2,.process-section h2,.project-copy h2,.lead-band h2,.material-band h2,.dark-info h2,.faq-section h2,.warranty-section h2,.origin-section h2,.team-section h2,.expect-section h2 { margin:0; font-size:clamp(38px,4.3vw,68px); line-height:.98; letter-spacing:-.05em; }
.section-heading > p,.story-copy > p,.process-section .section-heading > p,.origin-section > div:last-child,.team-section > div:last-child { margin:0; color:#59676f; font-size:17px; line-height:1.7; }
.eyebrow.dark { color:var(--orange-dark); }
.trust-ribbon { display:grid; grid-template-columns:repeat(4,1fr); background:#fff; padding:0 clamp(24px,6vw,92px); border-bottom:1px solid #ddd8d0; }
.trust-ribbon div { padding:25px 30px; border-right:1px solid #e3dfd8; display:flex; align-items:center; gap:12px; justify-content:center; }
.trust-ribbon div:last-child { border:0; }
.trust-ribbon b { font-size:24px; }
.trust-ribbon span { color:#68747a; font-size:12px; text-transform:uppercase; letter-spacing:.08em; }
.intro-section { background:#f5f0e8; }
.service-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.service-card { min-height:520px; position:relative; overflow:hidden; background-size:cover; background-position:center; color:#fff; display:flex; flex-direction:column; justify-content:space-between; padding:28px; }
.service-card:nth-child(2) { background-image:url("/neighbors-watch-roof-replacement.png") !important; }
.service-card:nth-child(3) { background-image:url("/roof-damage-inspection.png") !important; }
.service-card::before { content:""; position:absolute; inset:0; background:linear-gradient(180deg,rgba(6,19,27,.05),rgba(6,19,27,.95)); transition:background .3s ease; }
.service-card:hover::before { background:linear-gradient(180deg,rgba(231,96,42,.12),rgba(6,19,27,.98)); }
.service-number,.service-content { position:relative; z-index:1; }
.service-number { width:44px; height:44px; display:grid; place-items:center; border:1px solid rgba(255,255,255,.5); font-weight:800; font-size:12px; }
.service-content h3 { font-size:36px; line-height:1; margin:0 0 12px; letter-spacing:-.04em; text-transform:uppercase; }
.service-content p { max-width:310px; line-height:1.5; color:rgba(255,255,255,.76); }
.service-content b { display:block; margin-top:26px; color:#ff9c74; font-size:12px; text-transform:uppercase; letter-spacing:.08em; }
.urgent-strip { display:grid; grid-template-columns:1fr 1fr auto; align-items:center; gap:30px; background:var(--orange); color:#fff; padding:26px clamp(24px,6vw,92px); }
.urgent-strip div,.urgent-strip a { font-weight:900; }
.urgent-strip div { font-size:14px; letter-spacing:.06em; }
.urgent-strip p { margin:0; color:rgba(255,255,255,.82); }
.urgent-strip a { border-bottom:1px solid currentColor; }
.pulse { width:9px; height:9px; border-radius:50%; background:#fff; display:inline-block; margin-right:10px; box-shadow:0 0 0 7px rgba(255,255,255,.18); }
.split-story { display:grid; grid-template-columns:1fr 1fr; min-height:730px; }
.story-photo { background:url("/roof-damage-inspection.png") 58% center/cover; position:relative; }
.story-stat { position:absolute; right:0; bottom:0; width:min(330px,72%); background:var(--orange); color:#fff; padding:30px; display:flex; align-items:center; gap:17px; }
.story-stat b { font-size:48px; }
.story-stat span { font-size:12px; line-height:1.4; text-transform:uppercase; letter-spacing:.08em; }
.story-copy { background:#fff; padding:clamp(55px,7vw,110px); display:flex; justify-content:center; flex-direction:column; }
.story-copy h2 { margin-bottom:27px; }
.check-list { list-style:none; padding:0; margin:30px 0; display:grid; gap:14px; }
.check-list li { display:flex; align-items:center; gap:12px; font-weight:700; }
.check-list span { width:27px; height:27px; display:grid; place-items:center; background:var(--ink); color:#fff; font-size:12px; }
.inline-actions { display:flex; gap:26px; flex-wrap:wrap; }
.text-link { color:var(--orange-dark); font-weight:900; font-size:12px; text-transform:uppercase; letter-spacing:.07em; border-bottom:1px solid currentColor; padding-bottom:3px; width:max-content; }
.process-section { padding:clamp(78px,9vw,138px) clamp(24px,6vw,92px); background:#e9e5de; }
.process-grid { display:grid; grid-template-columns:repeat(4,1fr); border-top:1px solid #aeb3b2; }
.process-grid article { padding:28px 28px 10px 0; margin-right:28px; border-right:1px solid #b8b9b5; }
.process-grid article:last-child { border:0; }
.process-grid b,.detail-card-grid article > span,.values-grid article > span { color:var(--orange-dark); font-size:12px; letter-spacing:.1em; }
.process-grid h3 { font-size:28px; margin:42px 0 12px; }
.process-grid p { color:#5d686d; line-height:1.6; }
.project-feature { display:grid; grid-template-columns:1.2fr .8fr; min-height:660px; background:var(--ink); color:#fff; }
.project-image { position:relative; background:linear-gradient(90deg,transparent 49.7%,#fff 50%,#fff 50.3%,transparent 50.3%),url("/neighbors-watch-roof-replacement.png") center/cover; display:flex; justify-content:space-between; align-items:flex-end; padding:24px; }
.project-image span { background:rgba(11,24,32,.86); padding:8px 12px; font-size:10px; letter-spacing:.12em; font-weight:900; }
.project-copy { padding:clamp(55px,6vw,96px); display:flex; flex-direction:column; justify-content:center; }
.project-copy p { color:rgba(255,255,255,.7); font-size:16px; line-height:1.7; }
.project-meta { display:flex; gap:30px; margin:20px 0 34px; }
.project-meta span { display:grid; color:rgba(255,255,255,.65); text-transform:uppercase; font-size:10px; letter-spacing:.08em; }
.project-meta b { color:#fff; font-size:22px; margin-bottom:4px; text-transform:none; }
.review-section { display:grid; grid-template-columns:.45fr 1fr auto; align-items:center; gap:60px; padding:70px clamp(24px,6vw,92px); background:#fff; }
.review-score { display:grid; border-right:1px solid #ddd8d0; }
.review-score > span { color:var(--orange); letter-spacing:.15em; }
.review-score b { font-size:58px; line-height:1; margin:8px 0; }
.review-score small { color:#6c777c; letter-spacing:.08em; }
.review-section blockquote { margin:0; font-size:clamp(21px,2vw,29px); line-height:1.5; letter-spacing:-.02em; }
.review-section blockquote footer { margin-top:14px; color:#68747a; font-size:13px; }
.lead-band { display:grid; grid-template-columns:1.2fr .8fr; align-items:center; gap:60px; padding:clamp(62px,7vw,100px) clamp(24px,6vw,92px); background:var(--orange); color:#fff; }
.lead-band h2 { max-width:820px; }
.lead-band p:not(.eyebrow) { color:rgba(255,255,255,.8); font-size:17px; line-height:1.6; max-width:700px; }
.lead-band-actions { display:grid; gap:12px; }
.button-light { background:#fff; color:var(--ink); }
.button-outline { border-color:rgba(255,255,255,.6); color:#fff; }
.site-footer { background:#071218; color:#fff; padding:70px clamp(24px,6vw,92px) 28px; }
.footer-main { display:grid; grid-template-columns:1.5fr repeat(3,.55fr); gap:70px; }
.brand-light small { color:rgba(255,255,255,.55); }
.footer-main > div:first-child > p { color:rgba(255,255,255,.58); line-height:1.6; max-width:410px; margin:24px 0; }
.footer-phone { color:#ff9468; font-size:24px; font-weight:900; }
.footer-main h3 { color:#ff9c74; font-size:11px; letter-spacing:.14em; text-transform:uppercase; margin:8px 0 20px; }
.footer-main > div:not(:first-child) { display:flex; flex-direction:column; gap:13px; }
.footer-main > div:not(:first-child) a,.footer-main > div:not(:first-child) span { color:rgba(255,255,255,.67); font-size:13px; }
.footer-bottom { display:flex; justify-content:space-between; border-top:1px solid rgba(255,255,255,.13); margin-top:60px; padding-top:24px; color:rgba(255,255,255,.42); font-size:11px; }
.sticky-actions { display:none; }

/* Interior pages */
.page-hero { min-height:620px; position:relative; display:flex; align-items:flex-end; background-size:cover; background-position:center; color:#fff; padding:100px clamp(24px,6vw,92px) 84px; }
.page-hero-overlay { position:absolute; inset:0; background:linear-gradient(90deg,rgba(5,17,24,.94),rgba(5,17,24,.62) 55%,rgba(5,17,24,.12)),linear-gradient(0deg,rgba(5,17,24,.48),transparent); }
.page-hero-copy { position:relative; z-index:1; max-width:970px; }
.page-hero h1 { margin:0; max-width:920px; font-size:clamp(52px,6.2vw,98px); line-height:.9; letter-spacing:-.06em; text-transform:uppercase; }
.page-hero-copy > p:not(.eyebrow) { max-width:670px; margin:26px 0 30px; color:rgba(255,255,255,.8); font-size:20px; line-height:1.55; }
.detail-card-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:#cfd2cf; border:1px solid #cfd2cf; }
.detail-card-grid article { min-height:320px; padding:34px; background:#fff; display:flex; flex-direction:column; }
.detail-card-grid h3 { font-size:27px; margin:34px 0 12px; }
.detail-card-grid p { color:#637077; line-height:1.6; }
.detail-card-grid a { color:var(--orange-dark); margin-top:auto; font-size:12px; font-weight:900; text-transform:uppercase; }
.material-band,.dark-info,.warranty-section { display:grid; grid-template-columns:1fr 1fr; gap:80px; padding:clamp(78px,9vw,130px) clamp(24px,6vw,92px); background:var(--ink); color:#fff; }
.material-band p,.dark-info p,.warranty-section p { color:rgba(255,255,255,.68); line-height:1.7; }
.system-list { display:grid; grid-template-columns:1fr 1fr; border-top:1px solid rgba(255,255,255,.2); }
.system-list span { padding:22px 5px; border-bottom:1px solid rgba(255,255,255,.2); font-weight:700; }
.symptom-section { display:grid; grid-template-columns:.7fr 1.3fr; gap:80px; padding:clamp(78px,9vw,130px) clamp(24px,6vw,92px); }
.symptom-section > div:first-child { align-self:center; }
.symptom-section h2 { font-size:clamp(40px,4.5vw,68px); line-height:.95; margin:0 0 22px; }
.symptom-section > div:first-child > p:not(.eyebrow) { color:#607078; line-height:1.7; margin-bottom:28px; }
.symptom-grid { display:grid; grid-template-columns:1fr 1fr; gap:1px; background:#ccd0ce; }
.symptom-grid article { background:#fff; padding:33px; min-height:245px; }
.symptom-grid b { color:var(--orange-dark); }
.symptom-grid h3 { font-size:25px; margin:35px 0 10px; }
.symptom-grid p { color:#657279; line-height:1.55; }
.steps-list { display:grid; gap:0; }
.steps-list article { display:grid; grid-template-columns:58px 1fr; gap:20px; border-top:1px solid rgba(255,255,255,.2); padding:24px 0; }
.steps-list span { width:42px; height:42px; display:grid; place-items:center; background:var(--orange); font-weight:900; }
.steps-list h3 { margin:0 0 7px; }
.steps-list p { margin:0; }
.faq-section { display:grid; grid-template-columns:.8fr 1.2fr; gap:100px; padding:clamp(78px,9vw,130px) clamp(24px,6vw,92px); background:#fff; }
details { border-top:1px solid #cfd1ce; padding:22px 0; }
details:last-child { border-bottom:1px solid #cfd1ce; }
summary { cursor:pointer; font-weight:900; font-size:17px; }
details p { color:#607078; line-height:1.6; }
.option-grid { display:grid; grid-template-columns:1fr 1fr; gap:20px; }
.option-grid article { background:#fff; padding:42px; border-top:5px solid var(--ink); box-shadow:0 12px 35px rgba(0,0,0,.07); }
.option-chip { color:var(--orange-dark); font-size:10px; font-weight:900; letter-spacing:.12em; }
.option-grid h3 { font-size:34px; margin:30px 0 15px; }
.option-grid p,.option-grid li { color:#607078; line-height:1.6; }
.option-grid ul { padding-left:20px; margin:24px 0 34px; }
.option-grid a { color:var(--orange-dark); font-weight:900; font-size:12px; text-transform:uppercase; }
.warranty-number { display:flex; align-items:center; justify-content:center; border:1px solid rgba(255,255,255,.2); }
.warranty-number b { font-size:110px; color:#ff8050; line-height:1; }
.warranty-number span { max-width:150px; text-transform:uppercase; letter-spacing:.1em; font-weight:800; }
.gallery-grid { display:grid; grid-template-columns:1fr 1fr; gap:44px 24px; }
.gallery-photo { min-height:390px; background-size:cover; background-position:center; display:flex; align-items:flex-end; padding:18px; }
.gallery-photo span { background:var(--ink); color:#fff; padding:9px 12px; font-size:10px; font-weight:900; letter-spacing:.1em; }
.gallery-grid h3 { font-size:25px; margin:18px 0 4px; }
.gallery-grid p { color:#68757b; margin:0 0 15px; }
.gallery-grid a { color:var(--orange-dark); font-weight:900; font-size:11px; text-transform:uppercase; }
.reviews-wall { display:grid; grid-template-columns:.75fr 1.25fr; gap:90px; padding:clamp(78px,9vw,130px) clamp(24px,6vw,92px); background:var(--ink); color:#fff; }
.reviews-wall h2 { font-size:clamp(38px,4vw,62px); line-height:1; margin:0 0 20px; }
.reviews-wall > div:first-child > p:not(.eyebrow) { color:rgba(255,255,255,.65); line-height:1.6; }
.big-rating { display:flex; align-items:center; gap:18px; margin-top:40px; }
.big-rating > b { font-size:72px; }
.big-rating > span { color:#ff8050; display:grid; letter-spacing:.12em; }
.big-rating small { color:rgba(255,255,255,.52); letter-spacing:0; margin-top:5px; }
.review-cards { display:grid; gap:14px; }
.review-cards blockquote { background:#fff; color:var(--ink); padding:30px; margin:0; font-size:18px; line-height:1.55; }
.review-cards footer { margin-top:16px; color:#68757b; font-size:12px; }
.origin-section { display:grid; grid-template-columns:1fr 1fr; gap:100px; padding:clamp(78px,9vw,130px) clamp(24px,6vw,92px); background:#fff; }
.origin-section > div:last-child p { margin-top:0; }
.values-grid { display:grid; grid-template-columns:repeat(4,1fr); padding:0 clamp(24px,6vw,92px) clamp(78px,9vw,130px); background:#fff; }
.values-grid article { padding:35px; border:1px solid #dedbd4; margin-right:-1px; }
.values-grid h3 { font-size:25px; margin:38px 0 12px; }
.values-grid p { color:#657279; line-height:1.6; }
.numbers-section { display:grid; grid-template-columns:repeat(4,1fr); background:var(--orange); color:#fff; padding:50px clamp(24px,6vw,92px); }
.numbers-section div { display:grid; text-align:center; border-right:1px solid rgba(255,255,255,.25); }
.numbers-section div:last-child { border:0; }
.numbers-section b { font-size:55px; }
.numbers-section span { text-transform:uppercase; letter-spacing:.1em; font-size:10px; }
.team-section { display:grid; grid-template-columns:1fr 1fr; min-height:680px; }
.team-image { background:url("/roofing-crew-team.png") center 30%/cover; }
.team-section > div:last-child { padding:clamp(55px,7vw,105px); display:flex; flex-direction:column; justify-content:center; background:#f2ede5; }
.team-section h2 { margin-bottom:25px; }
.contact-hero { display:grid; grid-template-columns:1fr 1fr; gap:clamp(50px,8vw,120px); padding:clamp(70px,8vw,120px) clamp(24px,6vw,92px); background:linear-gradient(90deg,rgba(6,19,27,.97),rgba(6,19,27,.75)),url("/roofing-crew-team.png") center 38%/cover; color:#fff; }
.contact-copy { align-self:center; }
.contact-copy h1 { margin:0; font-size:clamp(55px,6vw,96px); line-height:.88; letter-spacing:-.06em; text-transform:uppercase; }
.contact-copy > p:not(.eyebrow) { color:rgba(255,255,255,.72); font-size:19px; line-height:1.6; max-width:650px; }
.contact-phone { display:grid; margin:34px 0; }
.contact-phone small { color:#ff9c74; font-weight:900; letter-spacing:.1em; text-transform:uppercase; }
.contact-phone a { font-size:clamp(35px,4vw,62px); font-weight:900; letter-spacing:-.04em; }
.contact-phone span { color:rgba(255,255,255,.55); }
.contact-points { display:flex; flex-wrap:wrap; gap:12px 24px; font-size:12px; }
.contact-form-wrap { background:#fff; color:var(--ink); padding:clamp(30px,4vw,55px); border-top:5px solid var(--orange); }
.contact-form-wrap > div > span { color:var(--orange-dark); font-size:10px; font-weight:900; letter-spacing:.13em; }
.contact-form-wrap h2 { margin:8px 0 28px; font-size:36px; letter-spacing:-.04em; }
.lead-form { display:grid; gap:14px; }
.lead-form label { display:grid; gap:7px; color:#4a5962; font-size:10px; font-weight:900; text-transform:uppercase; letter-spacing:.09em; }
.lead-form input,.lead-form select { width:100%; min-width:0; height:49px; border:1px solid #c9cfd2; padding:0 13px; outline:none; background:#fff; }
.lead-form input:focus,.lead-form select:focus { border-color:var(--orange); box-shadow:0 0 0 3px rgba(231,96,42,.12); }
.lead-form .button { width:100%; border:0; }
.lead-form small { color:#728087; text-align:center; line-height:1.45; }
.inline-success { min-height:360px; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; background:#eef7f0; color:#23683c; padding:40px; }
.inline-success b { font-size:30px; }
.inline-success span { margin-top:12px; color:#4f6958; }
.expect-section { display:grid; grid-template-columns:.65fr 1.35fr; gap:100px; padding:clamp(78px,9vw,130px) clamp(24px,6vw,92px); background:#fff; }
.expect-steps { display:grid; }
.expect-steps article { display:grid; grid-template-columns:52px 1fr; gap:24px; border-top:1px solid #d4d3ce; padding:24px 0; }
.expect-steps b { width:42px; height:42px; display:grid; place-items:center; background:var(--orange); color:#fff; }
.expect-steps p { margin:0; color:#627078; line-height:1.6; }
.expect-steps strong { display:block; color:var(--ink); font-size:18px; }
.service-area { padding:clamp(78px,9vw,130px) clamp(24px,6vw,92px); min-height:470px; display:flex; align-items:center; background:linear-gradient(90deg,rgba(7,18,24,.96),rgba(7,18,24,.52)),url("/neighbors-watch-roof-replacement.png") center/cover; color:#fff; }
.service-area > div { max-width:760px; }
.service-area h2 { font-size:clamp(42px,5vw,76px); margin:0; line-height:.95; letter-spacing:-.05em; }
.service-area p { color:rgba(255,255,255,.7); font-size:17px; line-height:1.6; max-width:610px; }

@media (max-width:940px) {
  .section-heading,.lead-band,.material-band,.dark-info,.warranty-section,.origin-section,.expect-section { grid-template-columns:1fr; gap:35px; }
  .service-grid,.detail-card-grid { grid-template-columns:1fr 1fr; }
  .trust-ribbon { grid-template-columns:1fr 1fr; }
  .trust-ribbon div:nth-child(2) { border-right:0; }
  .split-story,.project-feature,.team-section,.contact-hero { grid-template-columns:1fr; }
  .story-photo,.team-image { min-height:560px; }
  .process-grid,.values-grid { grid-template-columns:1fr 1fr; }
  .process-grid article:nth-child(2) { border-right:0; }
  .review-section { grid-template-columns:.45fr 1fr; }
  .review-section > a { grid-column:2; }
  .footer-main { grid-template-columns:1.2fr 1fr 1fr; }
  .footer-main > div:last-child { display:none; }
  .symptom-section,.faq-section,.reviews-wall { grid-template-columns:1fr; gap:50px; }
}

@media (max-width:600px) {
  body { padding-bottom:62px; }
  .section { padding:70px 18px; }
  .section-heading { margin-bottom:34px; }
  .section-heading h2,.story-copy h2,.process-section h2,.project-copy h2,.lead-band h2,.material-band h2,.dark-info h2,.faq-section h2,.warranty-section h2,.origin-section h2,.team-section h2,.expect-section h2 { font-size:40px; }
  .trust-ribbon { padding:0; }
  .trust-ribbon div { padding:18px 8px; display:grid; text-align:center; gap:4px; }
  .trust-ribbon b { font-size:20px; }
  .trust-ribbon span { font-size:9px; }
  .service-grid,.detail-card-grid,.option-grid,.gallery-grid { grid-template-columns:1fr; }
  .service-card { min-height:430px; }
  .urgent-strip { grid-template-columns:1fr; gap:9px; }
  .urgent-strip p { display:none; }
  .story-photo,.team-image { min-height:420px; }
  .story-copy,.project-copy,.team-section > div:last-child { padding:60px 18px; }
  .process-section,.material-band,.dark-info,.faq-section,.warranty-section,.reviews-wall,.origin-section,.contact-hero,.expect-section { padding:70px 18px; }
  .process-grid,.values-grid,.numbers-section { grid-template-columns:1fr 1fr; }
  .process-grid article { margin-right:0; padding-right:16px; }
  .process-grid article:nth-child(odd) { margin-right:16px; }
  .values-grid { padding:0 18px 70px; }
  .values-grid article { padding:24px; }
  .project-image { min-height:420px; }
  .review-section { grid-template-columns:1fr; gap:30px; padding:60px 18px; }
  .review-score { border:0; }
  .review-section > a { grid-column:auto; }
  .lead-band { padding:60px 18px; }
  .footer-main { grid-template-columns:1fr 1fr; gap:45px 25px; }
  .footer-main > div:first-child { grid-column:1 / -1; }
  .footer-bottom { display:grid; gap:10px; }
  .sticky-actions { display:grid; grid-template-columns:.8fr 1.2fr; position:fixed; z-index:50; left:0; right:0; bottom:0; height:62px; box-shadow:0 -8px 25px rgba(0,0,0,.18); }
  .sticky-actions a { display:grid; place-items:center; background:#fff; color:var(--ink); font-weight:900; font-size:13px; text-transform:uppercase; letter-spacing:.05em; }
  .sticky-actions a:last-child { background:var(--orange); color:#fff; }
  .page-hero { min-height:560px; padding:74px 18px 58px; }
  .page-hero h1 { font-size:52px; }
  .page-hero-copy > p:not(.eyebrow) { font-size:17px; }
  .symptom-section { grid-template-columns:1fr; padding:70px 18px; gap:40px; }
  .symptom-grid { grid-template-columns:1fr; }
  .system-list { grid-template-columns:1fr; }
  .warranty-number { padding:35px 15px; }
  .gallery-photo { min-height:300px; }
  .big-rating > b { font-size:58px; }
  .reviews-wall { gap:40px; }
  .numbers-section { padding:30px 18px; }
  .numbers-section div { padding:18px 5px; }
  .numbers-section div:nth-child(2) { border-right:0; }
  .numbers-section b { font-size:38px; }
  .contact-copy h1 { font-size:56px; }
  .contact-form-wrap { padding:28px 20px; }
}