/* Dads Roofing — compiled production CSS (replaces Tailwind CDN). */ *,::before,::after{box-sizing:border-box;border-width:0;border-style:solid} html{-webkit-text-size-adjust:100%;line-height:1.5} body{margin:0} img,svg{display:block;vertical-align:middle;max-width:100%} a{color:inherit;text-decoration:none} ul{list-style:none;margin:0;padding:0} h1,h2,h3,p{margin:0} button,input,select{font:inherit;color:inherit} summary{display:list-item} /* Dads — shared design tokens. Single source of truth for both sites. Change a hex here and it propagates through Tailwind utilities + custom CSS. */ :root { /* NGO (dark) palette */ --ink: #0A0A0A; --ink-2: #161616; --white: #FFFFFF; --gray: #5F6360; --brand-red: #C8102E; /* TODO: confirm exact red from source logo file */ --brand-red-deep: #8E0B20; --flag-blue: #1B2A4A; /* Roofing (daylight) palette */ --roof-bg: #F7F8FA; --roof-ink: #13161A; --roof-steel: #27313B; --trust-green: #1F7A4D; /* shared */ --radius: 14px; --shadow: 0 10px 30px rgba(0,0,0,.18); --maxw: 1180px; } /* Tailwind (CDN) reads these via the inline config in each page's . Plain-CSS fallbacks below so the sites still look right if Tailwind fails to load. */ .btn-primary{background:var(--brand-red);color:#fff;border-radius:999px;padding:.85rem 1.6rem;font-weight:700;display:inline-block;text-decoration:none;transition:.15s} .btn-primary:hover{background:var(--brand-red-deep)} .btn-ghost{border:2px solid var(--brand-red);color:var(--brand-red);border-radius:999px;padding:.8rem 1.55rem;font-weight:700;display:inline-block;text-decoration:none} .container{max-width:var(--maxw);margin-inline:auto;padding-inline:1.25rem} .fist-watermark{opacity:.06;pointer-events:none;user-select:none} .font-body{font-family:Inter,system-ui,sans-serif} .\!border-white{border-color:#ffffff !important} .\!px-4{padding-left:1.0rem !important;padding-right:1.0rem !important} .\!px-5{padding-left:1.25rem !important;padding-right:1.25rem !important} .\!py-2{padding-top:0.5rem !important;padding-bottom:0.5rem !important} .\!text-white{color:#ffffff !important} .backdrop-blur{backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)} .bg-brand-red{background-color:#C8102E} .bg-roof-bg{background-color:#F7F8FA} .bg-roof-ink{background-color:#13161A} .bg-roof-ink\/95{background-color:#13161Af2} .bg-roof-steel{background-color:#27313B} .bg-white{background-color:#ffffff} .block{display:block} .border{border-width:1px;border-style:solid;border-color:currentColor} .border-b{border-bottom-width:1px;border-bottom-style:solid} .border-black\/15{border-color:#00000026} .border-black\/5{border-color:#0000000d} .border-t{border-top-width:1px;border-top-style:solid} .border-white\/10{border-color:#ffffff1a} .border-y{border-top-width:1px;border-bottom-width:1px;border-top-style:solid;border-bottom-style:solid} .cursor-pointer{cursor:pointer} .flex{display:flex} .flex-col{flex-direction:column} .flex-wrap{flex-wrap:wrap} .font-bold{font-weight:700} .font-semibold{font-weight:600} .gap-10{gap:2.5rem} .gap-3{gap:0.75rem} .gap-4{gap:1.0rem} .gap-5{gap:1.25rem} .gap-6{gap:1.5rem} .gap-8{gap:2.0rem} .grid{display:grid} .grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))} .h-11{height:2.75rem} .h-9{height:2.25rem} .h-fit{height:fit-content} .hidden{display:none} .hover\:shadow-md:hover{box-shadow:0 4px 6px -1px rgb(0 0 0 / .1),0 2px 4px -2px rgb(0 0 0 / .1)} .hover\:text-brand-red:hover{color:#C8102E} .inline-block{display:inline-block} .items-center{align-items:center} .justify-between{justify-content:space-between} .leading-\[1\.05\]{line-height:1.05} .leading-none{line-height:1} .leading-tight{line-height:1.25} .max-w-2xl{max-width:42rem} .max-w-3xl{max-width:48rem} .max-w-xl{max-width:36rem} .mb-1{margin-bottom:0.25rem} .mb-2{margin-bottom:0.5rem} .mb-3{margin-bottom:0.75rem} .mb-4{margin-bottom:1.0rem} .mt-1{margin-top:0.25rem} .mt-2{margin-top:0.5rem} .mt-3{margin-top:0.75rem} .mt-4{margin-top:1.0rem} .mt-5{margin-top:1.25rem} .mt-6{margin-top:1.5rem} .mt-7{margin-top:1.75rem} .mt-8{margin-top:2.0rem} .object-contain{object-fit:contain} .overflow-hidden{overflow:hidden} .p-4{padding:1.0rem} .p-5{padding:1.25rem} .p-6{padding:1.5rem} .p-8{padding:2.0rem} .place-items-center{place-items:center} .px-3{padding-left:0.75rem;padding-right:0.75rem} .px-4{padding-left:1.0rem;padding-right:1.0rem} .py-10{padding-top:2.5rem;padding-bottom:2.5rem} .py-12{padding-top:3.0rem;padding-bottom:3.0rem} .py-14{padding-top:3.5rem;padding-bottom:3.5rem} .py-16{padding-top:4.0rem;padding-bottom:4.0rem} .py-2{padding-top:0.5rem;padding-bottom:0.5rem} .py-2\.5{padding-top:0.625rem;padding-bottom:0.625rem} .py-20{padding-top:5.0rem;padding-bottom:5.0rem} .py-3{padding-top:0.75rem;padding-bottom:0.75rem} .py-4{padding-top:1.0rem;padding-bottom:1.0rem} .py-6{padding-top:1.5rem;padding-bottom:1.5rem} .py-8{padding-top:2.0rem;padding-bottom:2.0rem} .rounded-2xl{border-radius:1rem} .rounded-lg{border-radius:0.5rem} .rounded-xl{border-radius:0.75rem} .shadow-sm{box-shadow:0 1px 2px 0 rgb(0 0 0 / 0.05)} .shadow-xl{box-shadow:0 20px 25px -5px rgb(0 0 0 / .1),0 8px 10px -6px rgb(0 0 0 / .1)} .space-y-1 > :not([hidden]) ~ :not([hidden]){margin-top:0.25rem} .space-y-2 > :not([hidden]) ~ :not([hidden]){margin-top:0.5rem} .space-y-3 > :not([hidden]) ~ :not([hidden]){margin-top:0.75rem} .space-y-4 > :not([hidden]) ~ :not([hidden]){margin-top:1.0rem} .sticky{position:sticky} .text-2xl{font-size:1.5rem;line-height:2rem} .text-3xl{font-size:1.875rem;line-height:2.25rem} .text-4xl{font-size:2.25rem;line-height:2.5rem} .text-5xl{font-size:3rem;line-height:1.1} .text-\[10px\]{font-size:10px} .text-\[11px\]{font-size:11px} .text-brand-red{color:#C8102E} .text-center{text-align:center} .text-lg{font-size:1.125rem;line-height:1.75rem} .text-roof-ink{color:#13161A} .text-roof-steel{color:#27313B} .text-roof-steel\/60{color:#27313B99} .text-roof-steel\/70{color:#27313Bb2} .text-roof-steel\/80{color:#27313Bcc} .text-roof-steel\/85{color:#27313Bd9} .text-sm{font-size:0.875rem;line-height:1.25rem} .text-white{color:#ffffff} .text-white\/40{color:#ffffff66} .text-white\/50{color:#ffffff80} .text-white\/55{color:#ffffff8c} .text-white\/60{color:#ffffff99} .text-white\/70{color:#ffffffb2} .text-white\/80{color:#ffffffcc} .text-white\/85{color:#ffffffd9} .text-xl{font-size:1.25rem;line-height:1.75rem} .text-xs{font-size:0.75rem;line-height:1rem} .top-0{top:0} .transition{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:150ms} .underline{text-decoration:underline} .w-11{width:2.75rem} .w-9{width:2.25rem} .w-full{width:100%} .z-50{z-index:50} @media (min-width:640px){.sm\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}} @media (min-width:768px){.md\:col-span-2{grid-column:span 2/span 2}.md\:flex{display:flex}.md\:flex-row{flex-direction:row}.md\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.md\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.md\:grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}.md\:hidden{display:none}.md\:py-20{padding-top:5.0rem;padding-bottom:5.0rem}.md\:py-24{padding-top:6.0rem;padding-bottom:6.0rem}.md\:py-28{padding-top:7.0rem;padding-bottom:7.0rem}.md\:text-4xl{font-size:2.25rem;line-height:2.5rem}.md\:text-5xl{font-size:3rem;line-height:1.1}.md\:text-6xl{font-size:3.75rem;line-height:1.1}.md\:text-right{text-align:right}} @media (min-width:1024px){.lg\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}}