/* R&R Roofing design system — ported verbatim from lls-foundation style.css */ /* ============================================================ Brand tokens — defaults; overridable via Customizer (printed as an inline :root override in by lls_brand_css_vars()). Both naming sets (homepage --spruce/--brass, inner --blue/--cyan-text) are aliased so all extracted component CSS resolves. ============================================================ */ :root{ /* Font families — set inline from theme-config 'fonts' by lls_font_css_vars(); these are fallbacks if that inline block is absent. */ --font-head:'Archivo',sans-serif; --font-body:'Inter',sans-serif; /* R&R Roofing teal/charcoal palette (from the approved mockup). */ --spruce:#3A646E; --blue:#3A646E; /* accent teal (primary) */ --spruce-deep:#2C4E56; --blue-deep:#2C4E56; /* deep teal */ --mist:#E6EFF0; --celery:#E6EFF0; /* mist light */ --paper:#FAFBFC; --cream:#FAFBFC; /* near-white */ --ink:#141618; --ink-soft:#4E5A64; --brass:#3A646E; --cyan-text:#2C4E56; /* text-safe teal accent */ --brass-soft:#5C8A93; --line:#E2E7E9; --gold:#C7DDE0; /* no brand gold; light mist FILL */ --cyan:#5C8A93; /* mid teal */ } *{margin:0;padding:0;box-sizing:border-box} html{scroll-behavior:smooth} body{font-family:var(--font-body);color:var(--ink);background:var(--paper);line-height:1.6;font-size:17px} h1,h2,h3,h4{font-family:var(--font-head);line-height:1.12;letter-spacing:-0.015em} a{color:inherit;text-decoration:none} img{max-width:100%;height:auto} .wrap{max-width:1180px;margin:0 auto;padding:0 28px} .eyebrow{font-family:var(--font-head);font-weight:700;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--brass)} .skip-link{position:absolute;left:-9999px} .skip-link:focus{left:8px;top:8px;background:#fff;color:var(--spruce);padding:8px 14px;border-radius:4px;z-index:1000} /* ===== Buttons ===== */ .btn{display:inline-block;font-family:var(--font-head);font-weight:700;font-size:15px;padding:13px 26px;border-radius:4px;transition:transform .12s ease;cursor:pointer;border:none} .btn:hover{transform:translateY(-1px)} .btn-solid,.btn-gold{background:var(--spruce);color:#fff} /* Primary CTA: teal fill + white text */ .btn-ghost,.btn-line{border:2px solid var(--spruce);color:var(--spruce);background:transparent} .btn-light{background:#fff;color:var(--spruce)} .btn-blue{background:var(--blue);color:#fff} .verify{font-size:11px;font-weight:700;color:#6B5A0E;background:var(--gold);padding:1px 6px;border-radius:3px;vertical-align:middle;font-family:var(--font-body)} /* ===== Header ===== */ header.site-header{background:#fff;border-bottom:1px solid var(--line);position:sticky;top:0;z-index:100} .topline{background:var(--spruce-deep);color:#DFEAE5;font-size:13.5px;padding:7px 0} .topline .wrap{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap} .topline strong{color:#fff} .navrow{display:flex;align-items:center;justify-content:space-between;padding:18px 0;gap:24px;position:relative} .brand{display:flex;flex-direction:column;align-items:flex-start;gap:2px} .brand img{height:72px;width:auto;max-width:300px;object-fit:contain;display:block} .brand-license{font-size:11px;font-weight:600;letter-spacing:.02em;color:var(--spruce);opacity:.75} .logo{font-family:var(--font-head);font-weight:800;font-size:21px;color:var(--spruce);line-height:1.05} .logo span{display:block;font-size:11px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:#0D9ACF} .main-nav > ul{display:flex;gap:26px;list-style:none;font-weight:600;font-size:15.5px;margin:0;font-family:var(--font-head);align-items:center} .main-nav a:hover{color:var(--brass)} .main-nav > ul > li{position:relative} .nav-toggle{display:none;background:none;border:none;font-size:26px;line-height:1;color:var(--spruce);cursor:pointer;padding:4px 8px} .dd-trigger{background:none;border:none;font:inherit;font-weight:600;color:inherit;cursor:pointer;padding:0} .dd-trigger:hover{color:var(--brass)} .submenu-toggle{display:none;background:none;border:none;cursor:pointer;color:inherit} .dropdown{display:none;position:absolute;top:100%;left:0;background:#fff;border:1px solid var(--line);border-top:3px solid var(--cyan);border-radius:0 0 8px 8px;box-shadow:0 18px 40px rgba(5,80,138,.14);padding:18px 22px;z-index:50} .has-dropdown:hover > .dropdown,.has-dropdown:focus-within > .dropdown{display:block} .dropdown ul{display:block;list-style:none;margin:0;font-size:14.5px;font-weight:600} .dropdown a{display:block;padding:6px 0;white-space:nowrap;color:var(--ink-soft)} .dropdown a:hover{color:var(--brass)} .dropdown-services{grid-template-columns:1fr 1fr;gap:4px 36px;min-width:470px} /* services dropdown lays out as a 2-col grid only when actually shown (hover/focus) */ .has-dropdown:hover > .dropdown-services,.has-dropdown:focus-within > .dropdown-services{display:grid} .dd-head{display:block;font-family:var(--font-head);font-weight:800;font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--spruce);margin-bottom:6px;border-bottom:1px solid var(--line);padding-bottom:6px} .dd-all{grid-column:1 / -1;display:block;margin-top:8px;padding-top:10px;border-top:1px solid var(--line);font-family:var(--font-head);font-weight:700;font-size:13px;letter-spacing:.04em;text-transform:uppercase;color:var(--brass)} .dropdown-locations{min-width:330px} .dropdown-locations ul{columns:2;column-gap:34px} .dropdown-locations li{break-inside:avoid} /* ===== Hero (front page) ===== */ .hero{background:linear-gradient(160deg,var(--spruce) 0%,var(--spruce-deep) 100%);color:#fff;padding:78px 0 86px;position:relative;overflow:hidden} .hero.has-photo{background-size:cover;background-position:center 38%} .hero::after{content:"";position:absolute;right:-140px;top:-140px;width:520px;height:520px;border-radius:50%;border:90px solid rgba(255,255,255,.05)} .hero-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:56px;align-items:start;position:relative;z-index:1} .hero h1{font-size:clamp(34px,4.6vw,54px);font-weight:800;color:#fff;margin:14px 0 22px} .hero h1 em{font-style:normal;color:var(--brass-soft)} .answer-card{background:rgba(255,255,255,.07);border-left:4px solid var(--brass-soft);padding:22px 24px;border-radius:0 6px 6px 0;font-size:18px;color:#EAF2EE;margin-bottom:30px} .answer-card strong{color:#fff} .hero-ctas{display:flex;gap:14px;flex-wrap:wrap} .hero-aside{background:#fff;color:var(--ink);border-radius:8px;padding:30px 28px;box-shadow:0 24px 60px rgba(0,0,0,.28)} .hero-aside h3{font-size:20px;color:var(--spruce);margin-bottom:6px} .hero-aside p.small{font-size:14px;color:var(--ink-soft);margin-bottom:18px} .field{margin-bottom:12px} .field label{display:block;font-size:12.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-soft);margin-bottom:4px} .field input,.field select,.field textarea{width:100%;padding:11px 12px;border:1.5px solid var(--line);border-radius:4px;font:inherit;font-size:15px;background:var(--paper)} .field input:focus,.field select:focus,.field textarea:focus{outline:2px solid var(--cyan);border-color:var(--cyan)} .hero-aside .btn{width:100%;text-align:center;margin-top:6px} .form-note{font-size:12.5px;color:var(--ink-soft);margin-top:10px;text-align:center} /* ===== Photo gallery ===== */ .rr-gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:14px;margin:26px 0} .rr-gallery figure{margin:0;border-radius:8px;overflow:hidden;border:1px solid var(--line);background:var(--fog,#f1f4f5)} .rr-gallery img{display:block;width:100%;height:220px;object-fit:cover} /* ===== Mobile sticky call bar ===== */ .mobile-callbar{display:none} @media(max-width:768px){ .mobile-callbar{display:flex;align-items:center;justify-content:center;gap:8px;position:fixed;left:0;right:0;bottom:0;z-index:200;background:var(--spruce);color:#fff;padding:13px 14px;font-family:var(--font-head);font-weight:700;font-size:15px;box-shadow:0 -6px 20px rgba(0,0,0,.18)} .mobile-callbar .cb-icon{font-size:17px} .mobile-callbar .cb-num{color:#fff} body{padding-bottom:54px} } /* ===== Lead form ===== */ .lls-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden} .lead-form .btn{width:100%;text-align:center;margin-top:8px} .lead-heading{font-size:20px;color:var(--spruce);margin-bottom:10px} .lead-ok{background:var(--mist);border-left:4px solid var(--spruce);padding:14px 16px;border-radius:0 6px 6px 0;margin-bottom:16px;font-size:15px;color:var(--ink)} .lead-err{background:#FDECEC;border-left:4px solid #C0392B;padding:14px 16px;border-radius:0 6px 6px 0;margin-bottom:16px;font-size:15px;color:#7A241B} /* ===== Trust bar ===== */ .trust{background:var(--mist);border-bottom:1px solid var(--line);padding:22px 0} .trust .wrap{display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap} .trust-item{display:flex;align-items:center;gap:10px;font-weight:600;font-size:15px;color:var(--spruce)} .trust-item .dot{width:9px;height:9px;border-radius:50%;background:var(--cyan);flex:none} /* ===== Generic sections ===== */ section{padding:74px 0} .sec-head{max-width:680px;margin-bottom:40px} .sec-head h2{font-size:clamp(27px,3.4vw,38px);color:var(--spruce);margin:12px 0 14px} .sec-head p{color:var(--ink-soft);font-size:17.5px} .lead-answer{border-left:4px solid var(--gold);padding:6px 0 6px 22px;font-size:18.5px;color:var(--ink);max-width:680px;margin-bottom:18px} .lead-answer strong{color:var(--spruce)} /* ===== Service grids ===== */ .svc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px} .svc{background:#fff;border:1px solid var(--line);border-radius:8px;padding:26px 24px;transition:border-color .15s ease, box-shadow .15s ease} .svc:hover{border-color:var(--cyan);box-shadow:0 10px 30px rgba(23,63,56,.08)} .svc h3{font-size:18.5px;color:var(--spruce);margin-bottom:8px} .svc p{font-size:15px;color:var(--ink-soft);margin-bottom:12px} .svc a{font-family:var(--font-head);font-weight:700;font-size:13.5px;letter-spacing:.05em;text-transform:uppercase;color:var(--brass)} .resi,.resi-bg{background:var(--spruce);color:#fff} .resi .sec-head h2,.resi-bg .sec-head h2{color:#fff} .resi .sec-head p,.resi-bg .sec-head p{color:#CFE0D9} .resi .eyebrow,.resi-bg .eyebrow{color:var(--gold)} .resi .svc,.resi-bg .svc{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.16)} .resi .svc h3,.resi-bg .svc h3{color:#fff} .resi .svc p,.resi-bg .svc p{color:#C8D8D1} .resi .svc a,.resi-bg .svc a{color:var(--gold)} /* ===== Founder / E-E-A-T — portrait supports circle OR rectangle ===== */ .founder-grid,.about-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:54px;align-items:center} .portrait{aspect-ratio:4/4.6;border-radius:8px;background:linear-gradient(155deg,var(--mist),#cfdfd6);display:flex;align-items:flex-end;justify-content:center;overflow:hidden;position:relative;border:1px solid var(--line)} .portrait .ph{font-family:var(--font-head);font-weight:700;color:var(--spruce);opacity:.45;font-size:14px;letter-spacing:.1em;text-transform:uppercase;padding-bottom:24px;text-align:center} .portrait img{width:100%;height:100%;object-fit:cover} /* circular variant (default for the current Judith asset) */ .portrait.is-circle{aspect-ratio:4/4.6;background:linear-gradient(155deg,var(--mist),#cfdfd6);border:1px solid var(--line);align-items:center} .portrait.is-circle img{width:86%;height:auto;aspect-ratio:1/1;border-radius:50%;object-fit:cover;box-shadow:0 14px 36px rgba(5,80,138,.22)} .cred-list{list-style:none;margin-top:22px;display:grid;gap:12px} .cred-list li{display:flex;gap:12px;align-items:flex-start;font-size:16px} .cred-list .dot,.cred-list .d{width:9px;height:9px;border-radius:50%;background:var(--cyan);flex:none;margin-top:8px} blockquote{border-left:3px solid var(--gold);padding-left:18px;margin-top:24px;font-style:italic;color:var(--ink-soft);font-size:17px} blockquote cite{display:block;font-style:normal;font-weight:700;color:var(--spruce);margin-top:8px;font-size:14.5px} /* ===== Values (About) ===== */ .values{background:var(--mist)} .val-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px} .val{background:#fff;border:1px solid var(--line);border-radius:8px;padding:26px 24px} .val h3{font-size:19px;color:var(--spruce);margin-bottom:8px;font-weight:800} .val p{font-size:15px;color:var(--ink-soft)} /* ===== Locations ===== */ .loc{background:var(--mist)} .loc-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:16px} .loc-grid.cols-3{grid-template-columns:repeat(3,1fr);gap:20px} .loc-card{background:#fff;border:1px solid var(--line);border-radius:8px;padding:22px 18px;text-align:center;transition:transform .12s ease} .loc-card:hover{transform:translateY(-3px);border-color:var(--cyan)} .loc-card.hq{background:var(--spruce);border-color:var(--spruce)} .loc-card.hq h3{color:var(--gold)} .loc-card.hq p{color:#CFE3F2} .loc-card h3{font-size:17px;color:var(--spruce)} .loc-card p{font-size:13px;color:var(--ink-soft);margin-top:4px} .loc-note{margin-top:26px;font-size:15px;color:var(--ink-soft);max-width:720px} /* ===== Page banner (inner pages) ===== */ .banner{background:linear-gradient(160deg,var(--spruce),var(--spruce-deep));color:#fff;padding:60px 0 64px;position:relative;overflow:hidden} .banner::after{content:"";position:absolute;right:-120px;top:-120px;width:420px;height:420px;border-radius:50%;border:80px solid rgba(255,255,255,.05)} /* Hero photo variant: real photo behind a navy overlay so the H1 stays legible. */ .banner.has-hero{background-size:cover;background-position:center 42%} .banner.has-hero{padding:78px 0 82px} .banner.has-hero::before{content:"";position:absolute;inset:0;background:linear-gradient(100deg,rgba(3,58,102,.85) 0%,rgba(5,80,138,.58) 55%,rgba(5,80,138,.40) 100%);z-index:0} .banner.has-hero .wrap{position:relative;z-index:1} .banner .crumbs{font-size:13px;color:#9CC8E8;font-weight:600;margin-bottom:10px;position:relative;z-index:1} .banner h1{font-size:clamp(32px,4.4vw,50px);font-weight:800;color:#fff;letter-spacing:-0.015em;position:relative;z-index:1} .banner p{color:#CFE3F2;font-size:18px;max-width:640px;margin-top:14px;position:relative;z-index:1} /* ===== Default page content ===== */ .page-content{padding:64px 0} .page-content .wrap{max-width:1040px} /* In-content page photo (clean, clearly visible; floats beside the opening prose) */ .page-photo{float:right;width:min(44%,400px);margin:4px 0 20px 32px;border-radius:10px;overflow:hidden;box-shadow:0 16px 38px rgba(5,80,138,.16);aspect-ratio:4/3;background:var(--mist)} .page-photo img{display:block;width:100%;height:100%;object-fit:cover} @media (max-width:680px){.page-photo{float:none;width:100%;margin:0 0 20px;aspect-ratio:16/10}} .page-content h2{color:var(--spruce);font-size:clamp(24px,3vw,32px);margin:28px 0 12px} .page-content h3{color:var(--spruce);font-size:21px;margin:22px 0 10px} .page-content p{margin-bottom:16px;color:var(--ink)} .page-content ul,.page-content ol{margin:0 0 16px 22px} .page-content li{margin-bottom:8px} /* ===== Contact ===== */ .contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:48px} .info-card{display:grid;gap:22px} .info-item h4{font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:var(--cyan-text);margin-bottom:6px;font-weight:800} .info-item p{font-size:17px;color:var(--ink)} .info-item strong{color:var(--spruce)} .map-ph{margin-top:8px;height:220px;border-radius:8px;background:linear-gradient(135deg,var(--mist),#dde6e6);border:1px solid var(--line);display:flex;align-items:center;justify-content:center;font-family:var(--font-head);font-weight:800;color:var(--spruce);opacity:.55;font-size:13px;letter-spacing:.08em;text-transform:uppercase} .form-card{background:#fff;border:1px solid var(--line);border-radius:10px;padding:32px 30px;box-shadow:0 16px 40px rgba(5,80,138,.07)} .form-card h3{font-size:22px;color:var(--spruce);font-weight:800;margin-bottom:6px} .form-card .sub{font-size:14.5px;color:var(--ink-soft);margin-bottom:20px} .form-card .btn{width:100%;text-align:center;margin-top:4px} /* ===== FAQ ===== */ .faq-cluster{margin-bottom:14px} .faq-cluster > .eyebrow{margin-bottom:18px;display:block} .faq-item{border-bottom:1px solid var(--line);padding:22px 0;max-width:860px} .faq-item h3{font-size:18.5px;color:var(--spruce);margin-bottom:8px} .faq-item p{color:var(--ink-soft);font-size:16px} .faq-more{margin-top:26px} /* ===== CTA band ===== */ .cta-band{background:var(--spruce-deep);color:#fff;text-align:center;padding:70px 0} .cta-band h2{font-size:clamp(26px,3.4vw,38px);color:#fff;margin-bottom:14px} .cta-band p{color:#C8D8D1;max-width:560px;margin:0 auto 28px} /* ===== Footer ===== */ footer.site-footer{background:var(--ink);color:#B9C4BF;padding:56px 0 28px;font-size:14.5px} .foot-grid{display:grid;grid-template-columns:1.3fr 1fr 1fr 1fr;gap:36px;margin-bottom:36px} .site-footer h4{color:#fff;font-size:14px;letter-spacing:.1em;text-transform:uppercase;margin-bottom:14px} .site-footer ul{list-style:none;display:grid;gap:8px} .site-footer a:hover{color:var(--gold)} .foot-brand .footer-logo{display:block;width:auto;height:auto;max-width:210px;border-radius:8px;background:#fff;padding:12px 16px;box-sizing:border-box;margin-bottom:16px} .nap{line-height:1.7} .nap strong{color:#fff;font-size:16px} .legal{border-top:1px solid #333d39;padding-top:22px;display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;font-size:13px;color:#7f8b86} /* ===== Responsive ===== */ @media (max-width:920px){ .hero-grid,.founder-grid,.about-grid,.contact-grid{grid-template-columns:1fr} .svc-grid,.val-grid{grid-template-columns:1fr 1fr} .loc-grid,.loc-grid.cols-3{grid-template-columns:repeat(2,1fr)} .foot-grid{grid-template-columns:1fr 1fr} /* mobile nav */ .nav-toggle{display:block} .nav-cta{display:none} .main-nav{display:none;position:absolute;left:0;right:0;top:100%;background:#fff;border-top:1px solid var(--line);box-shadow:0 20px 40px rgba(0,0,0,.14);z-index:60;max-height:78vh;overflow:auto} .main-nav.open{display:block} .main-nav > ul{flex-direction:column;gap:0;padding:6px 0;align-items:stretch} .main-nav > ul > li{position:static;border-bottom:1px solid var(--line)} .main-nav > ul > li > a,.dd-trigger{display:block;padding:13px 22px} .submenu-toggle{display:inline-block;position:absolute;right:10px;margin-top:4px;padding:9px 14px;font-size:16px} .dropdown{display:none;position:static;box-shadow:none;border:none;border-top:1px solid var(--line);border-radius:0;padding:4px 28px 12px;background:var(--paper)} .has-dropdown:hover > .dropdown,.has-dropdown:focus-within > .dropdown{display:none} .has-dropdown.open > .dropdown{display:block} .dropdown-services{grid-template-columns:1fr;min-width:0;gap:6px} } @media (max-width:560px){ .svc-grid,.loc-grid,.loc-grid.cols-3,.val-grid,.foot-grid{grid-template-columns:1fr} } @media (prefers-reduced-motion:reduce){ *{transition:none!important;animation:none!important} html{scroll-behavior:auto} } /* Homepage service card photos (janitorial section, added 2026-07) */ .svc.has-img{padding:0;overflow:hidden;display:flex;flex-direction:column} .svc.has-img .svc-body{padding:26px 24px} .svc-img{display:block;width:100%;height:200px;object-fit:cover;object-position:center;border-radius:0} @media(max-width:600px){.svc-img{height:210px}} /* ============================================================ MOCKUP HOMEPAGE (Phase 2) — scoped under .mk so the framed cinematic homepage design never touches the shared inner-page styles. Ported from the approved rnrroofinghomemockupv3_2.html. ============================================================ */ .mk{ --char-2:#111315; --mist:#A6C5CB; /* logo accent — dusty blue (local to homepage) */ --mist-2:#C7DDE0; --mist-3:#E6EFF0; --teal:#5C8A93; --accent:#3A646E; --accent-2:#2C4E56; --gray:#6B7280; --fog:#F1F4F5; --fog-2:#FAFBFC; --line:#E2E7E9; --white:#FFFFFF; --ink:#141618; } .mk section{position:relative;padding:0} .mk h1,.mk h2,.mk h3,.mk .display{font-family:var(--font-head);font-weight:800} .mk h1{font-size:clamp(42px,6vw,76px);line-height:.98;letter-spacing:-.02em;font-weight:900;text-transform:uppercase;color:#fff} .mk h2{font-size:clamp(30px,3.8vw,46px);line-height:1.08;letter-spacing:-.015em;font-weight:800;color:var(--ink)} .mk p.lead{color:#4b5260;line-height:1.75;font-size:17px;font-weight:400} .mk img{display:block;max-width:100%} .mk .btn{display:inline-flex;align-items:center;gap:10px;padding:16px 30px;border-radius:8px;font-weight:700;font-size:14.5px;letter-spacing:.02em;cursor:pointer;border:none;transition:.25s;font-family:var(--font-body);text-transform:uppercase;line-height:1} .mk .btn .arr{transition:.25s} .mk .btn:hover .arr{transform:translateX(4px)} .mk .btn-ink{background:var(--ink);color:#fff;box-shadow:0 10px 24px -10px rgba(20,22,24,.55)} .mk .btn-ink:hover{background:var(--accent-2);transform:translateY(-2px)} .mk .btn-mist{background:var(--mist);color:var(--ink);box-shadow:0 10px 26px -10px rgba(166,197,203,.7)} .mk .btn-mist:hover{background:var(--mist-2);transform:translateY(-2px)} .mk .btn-teal{background:var(--accent);color:#fff} .mk .btn-teal:hover{background:var(--accent-2);transform:translateY(-2px)} .mk .btn-ghost{background:transparent;color:#fff;border:1.5px solid rgba(255,255,255,.4)} .mk .btn-ghost:hover{border-color:#fff;background:rgba(255,255,255,.1)} .mk .btn-ghost-dark{background:transparent;color:var(--ink);border:1.5px solid rgba(20,22,24,.2)} .mk .btn-ghost-dark:hover{border-color:var(--ink);background:rgba(20,22,24,.05)} .mk .eyebrow{display:inline-flex;align-items:center;gap:8px;color:var(--accent);font-size:12.5px;font-weight:800;letter-spacing:.22em;text-transform:uppercase;margin-bottom:16px;font-family:var(--font-body)} .mk .eyebrow::before{content:"";width:26px;height:3px;background:var(--accent);border-radius:2px} .mk .rv{opacity:0;transform:translateY(28px);transition:opacity .7s ease,transform .7s ease} .mk .rv.in{opacity:1;transform:none} /* ===== HERO ===== */ .mk .hero{padding:16px;background:var(--white)} .mk .hero-frame{position:relative;border-radius:26px;overflow:hidden;min-height:600px;background:var(--ink);display:flex;align-items:center;isolation:isolate} .mk .hero-frame .bg{position:absolute;inset:0;z-index:0} .mk .hero-frame .bg img{width:100%;height:100%;object-fit:cover} .mk .hero-frame .ov{position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,rgba(12,14,16,.9) 0%,rgba(12,14,16,.55) 46%,rgba(12,14,16,.2) 74%),linear-gradient(0deg,rgba(12,14,16,.55) 0%,rgba(12,14,16,0) 42%)} .mk .hero-inner{position:relative;z-index:6;width:100%;max-width:1200px;margin:0 auto;padding:64px 48px;display:flex;align-items:center;justify-content:space-between;gap:44px} .mk .hero-copy{max-width:520px;flex:0 1 auto} .mk .hero-copy .eb{display:inline-flex;align-items:center;gap:9px;color:var(--mist);font-size:12.5px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;margin-bottom:16px} .mk .hero-copy .eb::before{content:"";width:24px;height:2px;background:var(--mist)} .mk .hero-copy h1{text-shadow:0 6px 30px rgba(0,0,0,.45)} .mk .hero-copy h1 span{color:var(--mist)} .mk .hero-copy p{color:#d6dbe0;font-size:15.5px;line-height:1.65;margin:18px 0 26px;max-width:420px} .mk .hero-copy .ctas{display:flex;gap:12px;flex-wrap:wrap} .mk .hero-cards{display:flex;align-items:center;flex:0 0 auto} .mk .hcard{position:relative;width:138px;height:196px;border-radius:16px;overflow:hidden;flex:0 0 auto;margin-left:-16px;box-shadow:0 20px 40px -16px rgba(0,0,0,.6);transition:.35s;cursor:pointer;transform:rotate(var(--rot,0deg));border:2px solid rgba(255,255,255,.14);display:block} .mk .hcard:first-child{margin-left:0} .mk .hcard:hover{transform:translateY(-14px) rotate(0deg);z-index:3;width:150px;height:210px;border-color:var(--mist)} .mk .hcard img{width:100%;height:100%;object-fit:cover} .mk .hcard .g{position:absolute;inset:0;background:linear-gradient(to top,rgba(10,12,14,.85),transparent 55%)} .mk .hcard .lbl{position:absolute;left:12px;bottom:12px;right:12px;z-index:2} .mk .hcard .lbl .t{font-size:9.5px;color:var(--mist);text-transform:uppercase;letter-spacing:.12em;font-weight:700;margin-bottom:3px} .mk .hcard .lbl .n{font-family:var(--font-head);font-weight:800;font-size:14px;color:#fff;line-height:1.1} .mk .hcard .go{position:absolute;top:10px;right:10px;z-index:2;width:28px;height:28px;border-radius:50%;background:rgba(255,255,255,.22);backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;color:#fff;transition:.25s} .mk .hcard:hover .go{background:var(--mist);color:var(--ink)} /* ===== BADGE BAR ===== */ .mk .badgebar{background:linear-gradient(120deg,var(--accent),var(--accent-2));position:relative;z-index:4} .mk .badgebar .wrap{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;padding-top:34px;padding-bottom:34px} .mk .bb{display:flex;align-items:center;gap:16px;color:#fff} .mk .bb + .bb{border-left:1px solid rgba(255,255,255,.18);padding-left:24px} .mk .bb .ic{flex:0 0 50px;height:50px;border:2px solid rgba(255,255,255,.5);border-radius:12px;display:flex;align-items:center;justify-content:center;color:var(--mist)} .mk .bb h4{font-family:var(--font-head);font-weight:800;font-size:16px;letter-spacing:.01em;line-height:1.1;color:#fff} .mk .bb p{font-size:12.5px;color:rgba(255,255,255,.85);margin-top:3px} /* ===== ABOUT ===== */ .mk .about{padding:110px 0 100px;background:var(--white)} .mk .about .wrap{display:grid;grid-template-columns:1fr 1.05fr;gap:64px;align-items:center} .mk .about-media{position:relative} .mk .about-media .frame{border-radius:14px;overflow:hidden;aspect-ratio:4/4.3;background:linear-gradient(150deg,#2a2f38,#0E1013);position:relative;box-shadow:0 30px 60px -24px rgba(20,22,24,.4)} .mk .about-media .frame img{width:100%;height:100%;object-fit:cover} .mk .about-media .redbar{position:absolute;bottom:-1px;left:-1px;width:64%;height:14px;background:var(--mist)} .mk .exp-chip{position:absolute;bottom:34px;right:-22px;background:var(--accent);color:#fff;border-radius:12px;padding:22px 26px;text-align:center;box-shadow:0 18px 40px -14px rgba(58,100,110,.6);z-index:2} .mk .exp-chip .n{font-family:var(--font-head);font-weight:900;font-size:40px;line-height:1} .mk .exp-chip .l{font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;opacity:.95;margin-top:5px;font-weight:600} .mk .about-media .dots{position:absolute;top:-18px;left:-18px;width:120px;height:120px;z-index:-1;background-image:radial-gradient(var(--mist) 2px,transparent 2px);background-size:16px 16px;opacity:.55} .mk .checks{display:grid;grid-template-columns:1fr 1fr;gap:14px 24px;margin:28px 0 34px} .mk .checks li{list-style:none;display:flex;gap:11px;align-items:center;font-size:14.5px;color:#2f3742;font-weight:600} .mk .checks .ck{flex:0 0 22px;height:22px;border-radius:6px;background:var(--accent);display:flex;align-items:center;justify-content:center} /* ===== SERVICES ===== */ .mk .services{padding:110px 0;background:var(--fog);position:relative} .mk .services .head{text-align:center;max-width:680px;margin:0 auto 58px} .mk .svc-grid{display:flex;flex-wrap:wrap;justify-content:center;gap:18px} .mk .svc{flex:0 1 auto;width:calc((100% - 72px)/5);background:#fff;border-radius:14px;overflow:hidden;box-shadow:0 8px 24px -14px rgba(20,22,24,.2);transition:.3s;display:flex;flex-direction:column;border:1px solid var(--line)} .mk .svc:hover{transform:translateY(-8px);box-shadow:0 34px 54px -24px rgba(20,22,24,.35);border-color:transparent} .mk .svc-media{aspect-ratio:4/3.1;position:relative;overflow:hidden;background:linear-gradient(150deg,#2a2f38,#0E1013)} .mk .svc-media img{width:100%;height:100%;object-fit:cover;transition:.5s} .mk .svc:hover .svc-media img{transform:scale(1.06)} .mk .svc-media .chip{position:absolute;top:12px;left:12px;background:var(--accent);color:#fff;font-size:9px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;padding:5px 9px;border-radius:5px;z-index:2} .mk .svc-media::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(14,16,19,.4),transparent 55%)} .mk .svc-body{padding:22px 20px 24px;display:flex;flex-direction:column;gap:9px;flex:1} .mk .svc-body h3{font-size:17px;font-weight:800;line-height:1.15;color:var(--ink)} .mk .svc-body p{font-size:13px;color:#5a626e;line-height:1.6;font-weight:400;flex:1} .mk .svc-body .go{color:var(--accent);font-weight:700;font-size:11.5px;display:inline-flex;align-items:center;gap:7px;text-transform:uppercase;letter-spacing:.05em} .mk .svc:hover .go{gap:12px} /* ===== BEFORE / AFTER ===== */ .mk .ba{background:var(--ink);color:#fff;position:relative;overflow:hidden} .mk .ba .grid{display:grid;grid-template-columns:1.1fr 1fr;align-items:stretch;min-height:560px} .mk .ba-copy{padding:96px 6vw;display:flex;flex-direction:column;justify-content:center;position:relative;z-index:2;max-width:640px;margin-left:auto} .mk .ba-copy h2{color:#fff;margin:6px 0 18px} .mk .ba-copy p{color:#b8bec8;font-size:16px;line-height:1.75;margin-bottom:30px} .mk .ba-copy .pills{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:32px} .mk .ba-copy .pill{display:flex;align-items:center;gap:9px;font-size:13.5px;font-weight:600;color:#e7eaee;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);padding:10px 16px;border-radius:100px} .mk .ba-copy .pill.red{background:var(--accent);border-color:var(--accent)} .mk .ba-stage{position:relative;overflow:hidden;user-select:none} .mk .ba-stage .layer{position:absolute;inset:0} .mk .ba-stage .layer img{width:100%;height:100%;object-fit:cover} .mk .ba-before{background:linear-gradient(160deg,#1a2330,#0a0d12)} .mk .ba-after{background:linear-gradient(160deg,#3b4657,#1a2330);clip-path:inset(0 0 0 50%)} .mk .ba-tag{position:absolute;top:24px;z-index:5;font-family:var(--font-head);font-weight:800;font-size:13px;text-transform:uppercase;letter-spacing:.08em;padding:8px 14px;border-radius:6px} .mk .ba-tag.before{left:24px;background:rgba(14,16,19,.8);color:#fff} .mk .ba-tag.after{right:24px;background:var(--accent);color:#fff} .mk .ba-handle{position:absolute;top:0;bottom:0;left:50%;width:3px;background:#fff;z-index:6;transform:translateX(-50%);box-shadow:0 0 14px rgba(0,0,0,.4)} .mk .ba-handle .knob{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:46px;height:46px;border-radius:50%;background:#fff;display:flex;align-items:center;justify-content:center;color:var(--accent);font-weight:900;box-shadow:0 6px 18px rgba(0,0,0,.4)} .mk .ba-range{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:ew-resize;z-index:7;margin:0} /* ===== STEPS ===== */ .mk .steps{background:var(--fog-2);padding:110px 0} .mk .steps .head{text-align:center;max-width:660px;margin:0 auto 58px} .mk .step-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;position:relative} .mk .step{background:#fff;border:1px solid var(--line);border-radius:14px;padding:38px 30px;position:relative;transition:.3s;overflow:hidden} .mk .step::before{content:"";position:absolute;top:0;left:0;width:100%;height:4px;background:var(--accent);transform:scaleX(0);transform-origin:left;transition:.35s} .mk .step:hover{transform:translateY(-6px);box-shadow:0 26px 46px -24px rgba(20,22,24,.3)} .mk .step:hover::before{transform:scaleX(1)} .mk .step .num{position:absolute;top:24px;right:28px;font-family:var(--font-head);font-weight:900;font-size:56px;color:var(--fog);line-height:1} .mk .step .ic{width:64px;height:64px;border-radius:14px;background:linear-gradient(135deg,var(--accent),var(--accent-2));display:flex;align-items:center;justify-content:center;margin-bottom:22px;box-shadow:0 14px 28px -12px rgba(58,100,110,.5)} .mk .step h3{font-size:20px;margin-bottom:10px;font-weight:800;color:var(--ink)} .mk .step p{font-size:14.5px;color:#5a626e;line-height:1.7;font-weight:400} /* ===== STORM CTA ===== */ .mk .storm{color:#fff;text-align:center;padding:130px 32px;overflow:hidden;background:var(--char-2)} .mk .storm .bg{position:absolute;inset:0;z-index:0} .mk .storm .bg img{width:100%;height:100%;object-fit:cover} .mk .storm .ov{position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(14,16,19,.86),rgba(14,16,19,.78)),radial-gradient(ellipse at 50% 40%,rgba(58,100,110,.5),transparent 60%)} .mk .storm .inner{position:relative;z-index:2;max-width:780px;margin:0 auto} .mk .storm h2{color:#fff;margin-bottom:18px} .mk .storm p{color:#d4d9e0;font-size:17px;line-height:1.75;margin:0 auto 34px;max-width:600px} .mk .storm .stat-row{display:flex;gap:16px;justify-content:center;margin-top:52px;flex-wrap:wrap} .mk .stat{background:rgba(255,255,255,.07);backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.16);border-radius:12px;padding:22px 32px;min-width:150px} .mk .stat .n{font-family:var(--font-head);font-weight:900;font-size:34px;color:#fff} .mk .stat .l{font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:#aab2bd;margin-top:5px;font-weight:600} /* ===== REVIEWS ===== */ .mk .reviews{padding:110px 0;background:var(--white)} .mk .reviews .head{text-align:center;max-width:620px;margin:0 auto 56px} .mk .rev-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px} .mk .rev{background:var(--fog-2);border-radius:14px;padding:34px 32px;border:1px solid var(--line);position:relative;transition:.3s} .mk .rev:hover{transform:translateY(-6px);box-shadow:0 26px 46px -24px rgba(20,22,24,.28);background:#fff} .mk .rev .stars{color:#E8A33D;font-size:15px;letter-spacing:2px} .mk .rev .q{font-family:var(--font-head);font-size:64px;color:var(--accent);line-height:0;position:absolute;top:44px;right:28px;opacity:.16} .mk .rev p{font-size:14.5px;color:#3f4753;line-height:1.75;margin:16px 0 22px;font-weight:400} .mk .rev .who{display:flex;align-items:center;gap:13px} .mk .rev .av{width:46px;height:46px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700;font-size:15px;font-family:var(--font-head)} .mk .rev .who b{display:block;font-size:14.5px;color:var(--ink);font-weight:700} .mk .rev .who span{font-size:12.5px;color:#8b95a2} /* ===== CONTACT ===== */ .mk .contact{background:var(--fog);padding:110px 0 0;position:relative} .mk .contact .head{text-align:center;max-width:640px;margin:0 auto 50px} .mk .contact .grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:32px;align-items:start} .mk .cinfo{display:grid;gap:16px} .mk .cinfo .card{background:#fff;border:1px solid var(--line);border-radius:14px;padding:24px;display:flex;gap:16px;align-items:flex-start;transition:.25s} .mk .cinfo .card.dark{background:var(--ink);color:#fff;border-color:var(--ink)} .mk .cinfo .card:hover{transform:translateX(5px);box-shadow:0 18px 34px -20px rgba(20,22,24,.3)} .mk .cinfo .ic{flex:0 0 46px;height:46px;border-radius:10px;background:var(--accent);display:flex;align-items:center;justify-content:center} .mk .cinfo h4{font-family:var(--font-head);font-weight:800;font-size:17px;margin-bottom:5px;color:inherit} .mk .cinfo p{font-size:13.5px;line-height:1.6;color:#5a626e} .mk .cinfo .card.dark p{color:#b8bec8} .mk .form{background:#fff;border:1px solid var(--line);border-radius:16px;padding:38px;box-shadow:0 30px 60px -34px rgba(20,22,24,.35)} .mk .form h3{font-size:24px;margin-bottom:6px;font-weight:800;color:var(--ink)} .mk .form .sub{font-size:13.5px;color:#8b95a2;margin-bottom:24px} /* lead-form shortcode fields restyled to match the mockup card */ .mk .form .field{margin-bottom:14px} .mk .form .field label{display:block;font-size:11.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:#8b95a2;margin-bottom:6px} .mk .form input,.mk .form select,.mk .form textarea{width:100%;padding:15px 16px;border:1.5px solid var(--line);border-radius:9px;font-size:14px;background:var(--fog-2);font-family:var(--font-body);transition:.2s;color:var(--ink)} .mk .form input:focus,.mk .form select:focus,.mk .form textarea:focus{outline:none;border-color:var(--accent);background:#fff;box-shadow:0 0 0 4px rgba(58,100,110,.12)} .mk .form textarea{height:110px;resize:none} .mk .form .lead-form .btn,.mk .form button.btn{width:100%;justify-content:center;background:var(--ink);color:#fff;margin-top:6px;display:inline-flex;align-items:center;gap:10px;padding:16px 30px;border-radius:8px;font-weight:700;font-size:14.5px;text-transform:uppercase;border:none;cursor:pointer;font-family:var(--font-body)} .mk .form .lead-form .btn:hover,.mk .form button.btn:hover{background:var(--accent-2)} .mk .form .form-note{font-size:12px;color:#8b95a2;margin-top:10px;text-align:center} .mk .hours{display:flex;gap:34px;align-items:center;margin-top:22px;padding-top:22px;border-top:1px solid var(--line);flex-wrap:wrap} .mk .hours .h{display:flex;gap:12px;align-items:center} .mk .hours .h .ic{width:38px;height:38px;border-radius:9px;background:var(--mist-3);display:flex;align-items:center;justify-content:center} .mk .hours b{font-family:var(--font-head);font-size:13.5px;color:var(--ink)} .mk .hours span{font-size:12.5px;color:#6b7280} .mk .map{margin-top:70px;height:340px;background:linear-gradient(120deg,#d9dde2,#eef0f2);position:relative;overflow:hidden} .mk .map .pin{position:absolute;top:50%;left:50%;transform:translate(-50%,-100%)} .mk .map .lbl{position:absolute;top:calc(50% + 14px);left:50%;transform:translateX(-50%);background:#fff;padding:8px 16px;border-radius:8px;font-size:12.5px;font-weight:600;color:var(--ink);box-shadow:0 8px 20px -8px rgba(0,0,0,.3);white-space:nowrap} .mk .map .placeholder-txt{position:absolute;top:20px;left:20px;background:rgba(255,255,255,.8);font-size:11px;letter-spacing:.15em;text-transform:uppercase;color:#8b95a2;padding:6px 12px;border-radius:6px;font-weight:600} /* ===== Responsive ===== */ @media(max-width:1100px){.mk .svc{width:calc((100% - 36px)/3)}} @media(max-width:1040px){.mk .hero-cards{display:none}} @media(max-width:960px){ .mk .about .wrap,.mk .contact .grid,.mk .ba .grid{grid-template-columns:1fr} .mk .badgebar .wrap,.mk .step-grid,.mk .rev-grid{grid-template-columns:1fr} .mk .bb + .bb{border-left:none;padding-left:0} .mk .ba-copy{margin:0;padding:70px 32px} .mk .ba-stage{min-height:420px} .mk .exp-chip{right:16px} .mk .hero-frame{min-height:520px} .mk .hero-inner{padding:56px 28px} .mk .hero-copy{max-width:none} } @media(max-width:720px){.mk .svc{width:calc((100% - 18px)/2)}} @media(max-width:460px){.mk .svc{width:100%}} /* About page banner: show more roof, less sky (scoped to page-id-42) */ /* (banner position is now global; see .banner.has-hero) */ /* ============================================================ FAQ card accordion (template-faq.php) — centered pill/heading, rounded question cards, circular +/x toggle, soft answer panel. ============================================================ */ .faqx-head{text-align:center;max-width:640px;margin:0 auto 40px} .faqx-pill{display:inline-block;font-family:var(--font-head);font-weight:700;font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--brass);background:var(--mist);padding:8px 18px;border-radius:100px;margin-bottom:20px} .faqx-title{font-family:var(--font-head);font-weight:800;font-size:clamp(28px,4.2vw,46px);color:var(--ink);line-height:1.08;letter-spacing:-.02em} .faqx-lead{color:var(--ink-soft);font-size:16px;line-height:1.65;margin-top:16px} .faqx-lead p{margin:0} .faqx{max-width:820px;margin:0 auto;display:flex;flex-direction:column;gap:14px} .faqx-item{background:#fff;border:1px solid var(--line);border-radius:16px;box-shadow:0 10px 26px -20px rgba(20,22,24,.32);overflow:hidden;transition:box-shadow .25s,border-color .25s} .faqx-item:hover{border-color:var(--cyan)} .faqx-item.open{box-shadow:0 16px 38px -22px rgba(20,22,24,.4)} .faqx-q{display:flex;align-items:center;justify-content:space-between;gap:20px;width:100%;background:none;border:0;cursor:pointer;text-align:left;padding:22px 24px;font-family:var(--font-body)} .faqx-text{font-family:var(--font-head);font-weight:700;font-size:clamp(16px,1.8vw,19px);color:var(--ink);line-height:1.3} .faqx-toggle{position:relative;flex:0 0 34px;width:34px;height:34px;border-radius:50%;border:1px solid var(--line);transition:background .25s,border-color .25s} .faqx-item.open .faqx-toggle{background:var(--ink);border-color:var(--ink)} .faqx-toggle::before,.faqx-toggle::after{content:"";position:absolute;left:50%;top:50%;background:var(--ink);transition:transform .28s ease,background .25s} .faqx-toggle::before{width:13px;height:1.7px;transform:translate(-50%,-50%)} .faqx-toggle::after{width:1.7px;height:13px;transform:translate(-50%,-50%)} .faqx-item.open .faqx-toggle::before,.faqx-item.open .faqx-toggle::after{background:#fff} .faqx-item.open .faqx-toggle::before{transform:translate(-50%,-50%) rotate(45deg)} .faqx-item.open .faqx-toggle::after{transform:translate(-50%,-50%) rotate(45deg)} .faqx-a{max-height:0;overflow:hidden;transition:max-height .35s ease} .faqx-a-inner{margin:0 18px 18px;padding:20px 22px;background:var(--mist);border-radius:12px;color:var(--ink-soft);font-size:15.5px;line-height:1.7} .faqx-a-inner p{margin-bottom:12px} .faqx-a-inner p:last-child{margin-bottom:0} .faqx-a-inner a{color:var(--brass);text-decoration:underline} @media(max-width:560px){ .faqx-q{padding:18px 18px} .faqx-a-inner{margin:0 14px 14px;padding:16px 18px} } /* ============================================================ Location page — "Serving & the Tulsa metro" map + areas (template-location.php) ============================================================ */ .loc-map-sec{background:#fff;padding-top:0} .loc-map-h{font-family:var(--font-head);font-weight:800;font-size:clamp(22px,2.6vw,30px);color:var(--ink);letter-spacing:-.01em;margin-bottom:18px} .loc-map{position:relative;border-radius:14px;overflow:hidden;border:1px solid var(--line);box-shadow:0 14px 34px -22px rgba(20,22,24,.4);aspect-ratio:16/8;background:var(--mist);margin-bottom:36px} .loc-map iframe{width:100%;height:100%;border:0;display:block} .loc-map-open{position:absolute;top:16px;left:16px;z-index:2;display:inline-flex;align-items:center;gap:8px;background:#fff;color:var(--spruce);font-family:var(--font-head);font-weight:700;font-size:13.5px;padding:10px 16px;border-radius:9px;box-shadow:0 6px 18px -6px rgba(20,22,24,.35)} .loc-map-open:hover{color:var(--brass);transform:translateY(-1px)} .loc-areas-h{font-family:var(--font-head);font-weight:800;font-size:clamp(19px,2.2vw,24px);color:var(--ink);margin:6px 0 20px} .loc-pills{display:flex;flex-wrap:wrap;gap:12px} .loc-pill{display:inline-block;padding:11px 22px;border:1px solid var(--line);border-radius:100px;font-family:var(--font-body);font-weight:600;font-size:14.5px;color:var(--ink);background:#fff;transition:border-color .2s,color .2s,transform .12s} .loc-pill:hover{border-color:var(--cyan);color:var(--spruce);transform:translateY(-1px)} .loc-pill.is-current{background:var(--ink);border-color:var(--ink);color:#fff;cursor:default} @media(max-width:640px){ .loc-map{aspect-ratio:4/3} .loc-pill{padding:9px 17px;font-size:13.5px} } /* ============================================================ Contact page — soft rounded design (template-contact.php) ============================================================ */ .contactx-grid{display:grid;grid-template-columns:1.6fr 1fr;gap:28px;align-items:stretch} .contactx-form{background:#fff;border:1px solid var(--line);border-radius:24px;padding:34px 34px 38px;box-shadow:0 16px 40px -28px rgba(20,22,24,.35)} .contactx-form h2{font-family:var(--font-head);font-weight:800;font-size:26px;color:var(--ink);margin-bottom:8px} .contactx-sub{font-size:14.5px;color:var(--ink-soft);margin-bottom:24px;line-height:1.6} .contactx-sub a{color:var(--brass);font-weight:600} /* lead-form shortcode -> rounded pills */ .contactx-form .field{margin-bottom:14px} .contactx-form .field label{display:block;font-size:11.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-soft);margin-bottom:7px;padding-left:8px} .contactx-form input,.contactx-form select{width:100%;padding:15px 22px;border:1px solid var(--line);border-radius:100px;background:var(--mist);font-size:14.5px;font-family:var(--font-body);color:var(--ink);transition:.2s} .contactx-form textarea{width:100%;padding:16px 22px;border:1px solid var(--line);border-radius:22px;background:var(--mist);font-size:14.5px;font-family:var(--font-body);color:var(--ink);min-height:120px;resize:vertical;transition:.2s} .contactx-form input:focus,.contactx-form select:focus,.contactx-form textarea:focus{outline:none;border-color:var(--cyan);background:#fff;box-shadow:0 0 0 4px rgba(58,100,110,.12)} .contactx-form .lead-form .btn,.contactx-form button.btn{width:auto;min-width:220px;margin-top:8px;background:var(--ink);color:#fff;border-radius:100px;padding:15px 34px;font-family:var(--font-head);font-weight:700;font-size:14.5px;border:0;cursor:pointer;transition:.2s} .contactx-form .lead-form .btn:hover,.contactx-form button.btn:hover{background:var(--spruce-deep);transform:translateY(-1px)} .contactx-form .form-note{font-size:12px;color:var(--ink-soft);margin-top:12px} .contactx-side{background:linear-gradient(155deg,var(--spruce),var(--spruce-deep));color:#fff;border-radius:24px;padding:34px 32px;display:flex;flex-direction:column;box-shadow:0 20px 44px -26px rgba(44,78,86,.7)} .contactx-side h3{font-family:var(--font-head);font-weight:800;font-size:23px;color:#fff;margin-bottom:12px;line-height:1.2} .contactx-side p{font-size:14.5px;line-height:1.65;color:rgba(255,255,255,.82);margin-bottom:26px} .contactx-call{display:inline-flex;align-items:center;justify-content:center;gap:10px;background:#fff;color:var(--spruce-deep);font-family:var(--font-head);font-weight:800;font-size:17px;padding:16px 26px;border-radius:100px;transition:.2s;box-shadow:0 10px 24px -12px rgba(0,0,0,.5)} .contactx-call:hover{transform:translateY(-2px)} .contactx-side-note{margin-top:18px;font-size:12.5px;letter-spacing:.04em;color:rgba(255,255,255,.72)} .contactx-info{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin:44px 0} .cx-card{display:block;background:var(--mist);border:1px solid transparent;border-radius:20px;padding:28px 26px;transition:transform .18s,box-shadow .18s,border-color .18s} .cx-card:hover{transform:translateY(-4px);box-shadow:0 22px 40px -26px rgba(20,22,24,.4);border-color:var(--cyan)} .cx-icon{display:flex;align-items:center;justify-content:center;width:52px;height:52px;border-radius:14px;background:#fff;color:var(--spruce);margin-bottom:18px} .cx-card b{display:block;font-family:var(--font-head);font-weight:800;font-size:18px;color:var(--ink);margin-bottom:8px;line-height:1.25;word-break:break-word} .cx-card p{font-size:13.5px;color:var(--ink-soft);line-height:1.6} .cx-map{margin-bottom:0} @media(max-width:860px){ .contactx-grid{grid-template-columns:1fr} .contactx-info{grid-template-columns:1fr} } /* Contact side-card photo (fills the teal card below the text) */ .contactx-side-photo{flex:1;margin-top:24px;border-radius:16px;overflow:hidden;min-height:170px;line-height:0;box-shadow:0 16px 32px -20px rgba(0,0,0,.55)} .contactx-side-photo img{width:100%;height:100%;min-height:170px;object-fit:cover;display:block} /* Location page — two-column "Explore the area" map layout (mockup) */ .loc-explore{background:#fff} .loc-explore-grid{display:grid;grid-template-columns:.92fr 1.12fr;gap:52px;align-items:center;margin-bottom:46px} .loc-explore-eyebrow{display:inline-block;font-family:var(--font-head);font-weight:700;font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--brass);margin-bottom:14px} .loc-explore-copy h2{font-family:var(--font-head);font-weight:800;font-size:clamp(26px,3.4vw,40px);color:var(--ink);line-height:1.08;letter-spacing:-.01em;margin-bottom:18px} .loc-explore-copy p{color:var(--ink-soft);font-size:16px;line-height:1.75;margin-bottom:28px;max-width:440px} .loc-explore-btn{display:inline-flex;align-items:center;gap:9px;border-radius:8px} .loc-explore-btn:hover{transform:translateY(-2px)} .loc-explore-map{position:relative} .loc-explore-blob{position:absolute;width:64%;aspect-ratio:1;border-radius:50%;background:var(--mist);top:-9%;right:-11%;z-index:0} .loc-explore-map .loc-map{position:relative;z-index:1;aspect-ratio:4/3.2;margin-bottom:0} @media(max-width:860px){ .loc-explore-grid{grid-template-columns:1fr;gap:30px} .loc-explore-copy p{max-width:none} .loc-explore-blob{display:none} .loc-explore-map .loc-map{aspect-ratio:16/10} } /* Remove decorative circle behind the location map (per client) */ .loc-explore-blob{display:none} /* ===== Location page — designed body prose + benefits cards ===== */ .loc-body .wrap{max-width:860px} .loc-body-eyebrow{display:inline-block;font-family:var(--font-head);font-weight:700;font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--brass);margin-bottom:18px} .loc-body p{font-size:16.5px;line-height:1.85;color:#3f4753} .loc-body > .wrap > p:first-of-type{font-size:19px;line-height:1.7;color:var(--ink)} .loc-body h2{margin-top:40px} .loc-benefits{background:#fff} .loc-benefits-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:52px;align-items:start} .loc-benefits-eyebrow{display:inline-block;font-family:var(--font-head);font-weight:700;font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--brass);margin-bottom:14px} .loc-benefits-intro h2{font-family:var(--font-head);font-weight:800;font-size:clamp(26px,3.2vw,36px);color:var(--ink);line-height:1.12;letter-spacing:-.01em;margin-bottom:16px} .loc-benefits-intro p{color:var(--ink-soft);font-size:16px;line-height:1.7;margin-bottom:24px;max-width:360px} .loc-benefits-link{display:inline-flex;align-items:center;gap:8px;font-family:var(--font-head);font-weight:700;font-size:12.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--brass);border-bottom:2px solid currentColor;padding-bottom:3px;transition:gap .2s} .loc-benefits-link:hover{gap:12px} .loc-benefits-cards{display:grid;gap:14px} .lb-card{position:relative;background:var(--mist);border-radius:16px;padding:26px 28px;transition:transform .18s,box-shadow .18s} .lb-card:hover{transform:translateY(-3px);box-shadow:0 20px 38px -26px rgba(20,22,24,.4)} .lb-card .lb-ic{position:absolute;top:26px;right:26px;color:var(--spruce);opacity:.9} .lb-card h3{font-family:var(--font-head);font-weight:800;font-size:18px;color:var(--ink);margin-bottom:8px;padding-right:40px} .lb-card p{font-size:14px;color:var(--ink-soft);line-height:1.65} @media(max-width:860px){ .loc-benefits-grid{grid-template-columns:1fr;gap:28px} .loc-benefits-intro p{max-width:none} } /* ===== Location page — designed intro (top) ===== */ .loc-intro{background:#fff;padding-bottom:40px} .loc-intro-grid{display:grid;grid-template-columns:1.55fr 1fr;gap:46px;align-items:start} .loc-intro-eyebrow{display:inline-block;font-family:var(--font-head);font-weight:700;font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--brass);margin-bottom:16px} .loc-intro-copy p{font-size:16.5px;line-height:1.8;color:#3f4753;margin-bottom:16px} .loc-intro-copy p:first-of-type{font-size:20px;line-height:1.65;color:var(--ink)} .loc-intro-copy a{color:var(--brass);font-weight:600} .loc-intro-card{background:linear-gradient(155deg,var(--spruce),var(--spruce-deep));color:#fff;border-radius:22px;padding:32px 30px;box-shadow:0 22px 46px -26px rgba(44,78,86,.7)} .loc-intro-card h3{font-family:var(--font-head);font-weight:800;font-size:22px;color:#fff;margin-bottom:12px;line-height:1.2} .loc-intro-card p{font-size:14.5px;line-height:1.65;color:rgba(255,255,255,.82);margin-bottom:24px} .loc-intro-call{display:inline-flex;align-items:center;justify-content:center;gap:10px;width:100%;background:#fff;color:var(--spruce-deep);font-family:var(--font-head);font-weight:800;font-size:18px;padding:15px 22px;border-radius:100px;box-shadow:0 10px 24px -12px rgba(0,0,0,.5);transition:transform .2s} .loc-intro-call:hover{transform:translateY(-2px)} .loc-intro-note{margin-top:16px;text-align:center;font-size:12.5px;color:rgba(255,255,255,.72)} /* body first paragraph is no longer the lead (lead moved to intro) */ .loc-body > .wrap > p:first-of-type{font-size:16.5px;line-height:1.85;color:#3f4753} @media(max-width:860px){.loc-intro-grid{grid-template-columns:1fr;gap:26px}} /* Align location body prose left-edge with the intro copy (was centered) */ .loc-body > .wrap{max-width:1180px} .loc-body > .wrap > *{max-width:760px} /* ===== Location page — photos ===== */ .loc-intro-card{display:flex;flex-direction:column} .loc-intro-photo{margin-top:22px;border-radius:16px;overflow:hidden;line-height:0;box-shadow:0 16px 32px -20px rgba(0,0,0,.55)} .loc-intro-photo img{width:100%;height:160px;object-fit:cover;display:block} .loc-photos{background:#fff;padding-top:0} .loc-photos-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px} .loc-photos-grid figure{margin:0;border-radius:16px;overflow:hidden;border:1px solid var(--line);line-height:0;box-shadow:0 14px 30px -22px rgba(20,22,24,.4)} .loc-photos-grid img{width:100%;height:230px;object-fit:cover;display:block;transition:transform .5s} .loc-photos-grid figure:hover img{transform:scale(1.05)} @media(max-width:760px){.loc-photos-grid{grid-template-columns:1fr}.loc-photos-grid img{height:220px}} /* ===== Service page — 'Explore our services' card grid ===== */ .svc-explore{background:#fff} .svc-explore-head{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;margin-bottom:30px;flex-wrap:wrap} .svc-explore-head h2{font-family:var(--font-head);font-weight:800;font-size:clamp(24px,3vw,34px);color:var(--ink);line-height:1.1;letter-spacing:-.01em;margin-top:6px} .svc-explore-all{font-family:var(--font-head);font-weight:700;font-size:12.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--brass);display:inline-flex;align-items:center;gap:8px;border-bottom:2px solid currentColor;padding-bottom:3px;transition:gap .2s} .svc-explore-all:hover{gap:12px} .svc-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:16px} .svc-card{display:flex;flex-direction:column;background:var(--mist);border:1px solid transparent;border-radius:16px;padding:24px 26px;transition:transform .18s,box-shadow .18s,border-color .18s} .svc-card:hover{transform:translateY(-4px);box-shadow:0 22px 40px -26px rgba(20,22,24,.4);border-color:var(--cyan)} .svc-card h3{font-family:var(--font-head);font-weight:800;font-size:17px;color:var(--ink);margin-bottom:8px;line-height:1.2} .svc-card p{font-size:13.5px;color:var(--ink-soft);line-height:1.6;margin-bottom:14px;flex:1} .svc-card-go{color:var(--brass);font-weight:700;font-size:11.5px;letter-spacing:.05em;text-transform:uppercase;display:inline-flex;align-items:center;gap:7px} .svc-card:hover .svc-card-go{gap:11px} @media(max-width:860px){.svc-cards{grid-template-columns:1fr 1fr}} @media(max-width:560px){.svc-cards{grid-template-columns:1fr}} /* ===== [lls_cards] icon-card row (inspo 'Why choose us') ===== */ .lls-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin:22px 0 10px} .lls-card{background:#fff;border:1px solid var(--line);border-radius:16px;padding:28px 26px;box-shadow:0 12px 28px -22px rgba(20,22,24,.32);transition:transform .18s,box-shadow .18s} .lls-card:hover{transform:translateY(-4px);box-shadow:0 26px 46px -26px rgba(20,22,24,.42)} .lls-card-ic{display:flex;align-items:center;justify-content:center;width:54px;height:54px;border-radius:50%;background:var(--mist);color:var(--spruce);margin-bottom:18px} .lls-card h3{font-family:var(--font-head);font-weight:800;font-size:19px;color:var(--ink);margin:0 0 10px;line-height:1.2} .lls-card-body p{font-size:14px;color:var(--ink-soft);line-height:1.7;margin:0} .lls-card-body p + p{margin-top:10px} @media(max-width:860px){.lls-cards{grid-template-columns:1fr}} /* lls_cards — featured first card + CTA pill (match inspo) */ .lls-card{display:flex;flex-direction:column} .lls-card-body{flex:1} .lls-card.is-feat{background:var(--mist);border-color:transparent} .lls-card.is-feat .lls-card-ic{background:#fff} .lls-card-btn{align-self:flex-start;margin-top:20px;background:var(--spruce);color:#fff;border-radius:100px;padding:11px 24px;font-family:var(--font-head);font-weight:700;font-size:12.5px;letter-spacing:.03em;transition:background .2s,transform .2s} .lls-card-btn:hover{background:var(--spruce-deep);transform:translateY(-2px)} /* Stronger tint on the featured lls_cards card (more visible like the inspo) */ .lls-card.is-feat{background:var(--gold)} /* ===== Service page — alternating image/text body sections ===== */ .svc-body{background:#fff} .svc-body .wrap{max-width:1120px} .svc-sec{display:grid;grid-template-columns:1fr 1fr;gap:52px;align-items:center;padding:44px 0} .svc-sec + .svc-sec{border-top:1px solid var(--line)} .svc-sec.is-flip .svc-sec-text{order:2} .svc-sec.is-flip .svc-sec-img{order:1} .svc-sec-text h2{font-family:var(--font-head);font-weight:800;font-size:clamp(23px,2.8vw,32px);color:var(--ink);line-height:1.14;letter-spacing:-.01em;margin:0 0 14px} .svc-sec-text h3{font-family:var(--font-head);font-weight:800;font-size:18px;color:var(--ink);margin:18px 0 8px} .svc-sec-text p{font-size:15.5px;line-height:1.8;color:#3f4753;margin:0 0 12px} .svc-sec-text p:last-child{margin-bottom:0} .svc-sec-text a{color:var(--brass);font-weight:600} .svc-sec-text ul,.svc-sec-text ol{margin:0 0 12px 20px;color:#3f4753;font-size:15.5px;line-height:1.8} .svc-sec-img{margin:0;border-radius:18px;overflow:hidden;aspect-ratio:4/3.3;box-shadow:0 24px 46px -28px rgba(20,22,24,.45);border:1px solid var(--line)} .svc-sec-img img{width:100%;height:100%;object-fit:cover;display:block} .svc-sec-full{padding:36px 0} .svc-sec-full h2{font-family:var(--font-head);font-weight:800;font-size:clamp(24px,3vw,34px);color:var(--ink);line-height:1.12;margin:0 0 12px} .svc-sec-full > p{font-size:16px;color:var(--ink-soft);line-height:1.7;max-width:660px;margin:0 0 6px} @media(max-width:820px){ .svc-sec{grid-template-columns:1fr;gap:22px;padding:30px 0} .svc-sec.is-flip .svc-sec-text{order:0} .svc-sec.is-flip .svc-sec-img{order:0} } /* ============================================================ Financing page — loan option cards (page 43) ============================================================ */ .fin-cards{margin:26px 0 14px} .fin-cards .lls-card{padding-top:24px} .fin-rate{display:inline-block;font-family:var(--font-head);font-weight:800;font-size:30px;line-height:1;letter-spacing:-.01em;color:var(--spruce);background:var(--mist);border-radius:100px;padding:12px 20px;margin-bottom:16px} .fin-cards .lls-card-btn{align-self:flex-start;text-align:center} .fin-disclaimer{font-size:13px;color:var(--ink-soft);line-height:1.65;max-width:760px;margin:6px 0 30px} @media(max-width:860px){.fin-rate{font-size:26px}} /* ============================================================ Roofr instant estimator — top bar link + on-page embed ============================================================ */ .topline-right{display:flex;align-items:center;gap:10px;flex-wrap:wrap} .topline-cta{display:inline-flex;align-items:center;background:#fff;color:var(--spruce-deep);font-family:var(--font-head);font-weight:800;font-size:13px;letter-spacing:.02em;padding:3px 13px;border-radius:999px;transition:background .2s,transform .12s ease} .topline-cta:hover{background:var(--mist);transform:translateY(-1px)} .topline-sep{opacity:.5} @media(max-width:600px){ .topline .wrap{justify-content:center;text-align:center} .topline-right{justify-content:center} } /* instant-estimate launch panel (Free Instant Roof Estimate page) */ .est-cta{background:var(--mist);border-radius:18px;padding:34px 32px;margin:26px 0 30px;text-align:center} .est-cta-ic{display:inline-flex;align-items:center;justify-content:center;width:56px;height:56px;border-radius:50%;background:#fff;color:var(--spruce);margin-bottom:14px} .est-cta h3{font-family:var(--font-head);font-weight:800;font-size:24px;color:var(--ink);margin:0 0 10px;line-height:1.2} .est-cta > p{font-size:15.5px;color:var(--ink-soft);line-height:1.7;max-width:560px;margin:0 auto 20px} .est-cta-btn{display:inline-flex;align-items:center;gap:8px} .est-cta .est-note{font-size:13px;color:var(--ink-soft);margin:16px auto 0;max-width:520px} @media(max-width:600px){.est-cta{padding:28px 20px}.est-cta h3{font-size:21px}} /* Seamless Gutters (page 26) intro card: the source photo puts the gutter run low in frame, so the default centered cover crop clipped it at the bottom edge. Shift the crop down to keep the full gutter and downspout elbow in view. Page-scoped on purpose: .loc-intro-photo is shared by all 27 service and location intro cards. */ .page-id-26 .loc-intro-photo img{object-position:center 85%} /* Financing page: callout for the downloadable Regions 3-option financing sheet. */ .fin-doc{background:var(--mist);border-radius:18px;padding:26px 28px;margin:0 0 32px;max-width:760px} .fin-doc h3{font-family:var(--font-head);font-weight:800;font-size:20px;color:var(--ink);margin:0 0 10px;line-height:1.25} .fin-doc p{font-size:15px;color:var(--ink-soft);line-height:1.7;margin:0 0 18px} @media(max-width:600px){.fin-doc{padding:22px 20px}} .fin-doc-sheet{margin:0 0 20px;border-radius:12px;overflow:hidden;border:1px solid var(--line);background:#fff;line-height:0} .fin-doc-sheet img{width:100%;height:auto;display:block}