/* ===========================================================================
SFR Tint & PDR — EXACT structural clone of tintedmt.com (Tinted Inc., Duda).
Colors swapped: brand yellow #FDEE1F -> SFR orange #F97316.
Black top bar + orange nav bar header. Split hero w/ embedded form.
Persistent floating Google badge (BL) + Get A Quote pill (BR).
=========================================================================== */
:root {
--black: #000000;
--black-soft: #111111;
--orange: #F97316; /* was tintedmt yellow #FDEE1F */
--orange-dark: #EA580C;
--white: #FFFFFF;
--offwhite: #F5F5F5;
--gray: #666666;
--gray-text: #444444;
--border: #DDDDDD;
--font-head: "League Spartan", "Spartan", Montserrat, Arial, sans-serif;
--font-body: "League Spartan", "Spartan", Arial, sans-serif;
--maxw: 1280px;
--gutter: clamp(16px, 4vw, 40px);
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
margin: 0; font-family: var(--font-body);
color: var(--gray-text); background: var(--white);
line-height: 1.6; font-size: 16px;
}
img, video { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
ul { margin: 0; padding: 0; list-style: none; }
h1,h2,h3,h4 { font-family: var(--font-head); color: var(--black); margin: 0 0 .5em; font-weight: 700; line-height: 1.15; }
h1 { font-size: clamp(2rem, 4.4vw, 3rem); }
h2 { font-size: clamp(1.6rem, 3vw, 2.25rem); }
h3 { font-size: 1.5rem; }
p { margin: 0 0 1em; }
.container { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }
.section { padding-block: clamp(40px, 6vw, 80px); }
.section--alt { background: var(--offwhite); }
.text-center { text-align: center; }
.accent { color: var(--orange); }
.lead { font-size: 1.15rem; }
.measure { max-width: 65ch; }
.mx-auto { margin-inline: auto; }
.list-check { list-style: none; padding: 0; }
.list-check li { position: relative; padding-left: 30px; margin-bottom: 12px; }
.list-check li::before { content: "\2713"; position: absolute; left: 0; color: var(--orange); font-weight: 700; }
/* Contact page: Call Us / Location box (bordered, like tintedmt) */
.contact-box {
display: grid; grid-template-columns: 1fr 1fr; gap: 24px; text-align: center;
max-width: 1000px; margin: 44px auto 0; padding: 32px;
border: 3px solid var(--orange); border-radius: 12px;
}
.contact-box h3 { margin-bottom: .4em; }
.contact-box a { font-size: 1.05rem; }
.contact-box a:hover { color: var(--orange); }
@media (max-width: 600px) { .contact-box { grid-template-columns: 1fr; } }
/* ---- buttons (tintedmt: solid black btn w/ white text, OR yellow pill) --- */
.btn {
display: inline-flex; align-items: center; gap: .5em; cursor: pointer;
font-family: var(--font-head); font-weight: 700; font-size: .95rem;
padding: 14px 30px; border: 2px solid var(--black); transition: all .15s ease;
background: var(--white); color: var(--black); text-transform: none;
}
.btn:hover { background: var(--black); color: #fff; }
.btn--dark { background: var(--black); color: #fff; border-color: var(--black); }
.btn--dark:hover { background: var(--orange); border-color: var(--orange); color:#fff; }
.btn--orange { background: var(--orange); color: #fff; border-color: var(--orange); }
.btn--orange:hover { background: var(--orange-dark); border-color: var(--orange-dark); }
/* =====================================================================
HEADER — TWO BARS (exact tintedmt structure)
Bar 1: black. phone left · logo center · social right
Bar 2: ORANGE (was yellow). pipe-separated nav, centered.
===================================================================== */
.site-header { position: sticky; top: 0; z-index: 200; }
.topbar { background: var(--black); color: #fff; }
.topbar-inner {
display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
gap: 16px; min-height: 104px; /* taller black bar (matches tintedmt) */
}
.topbar-phone { display: flex; align-items: center; gap: 12px; font-family: var(--font-head); font-weight: 700; font-size: 1.6rem; }
.topbar-phone .ph-ico { color: var(--orange); display: inline-flex; }
.topbar-phone .ph-ico svg { width: 26px; height: 26px; }
.topbar-phone a:hover { color: var(--orange); }
.topbar-logo { justify-self: center; }
.topbar-logo img { height: 74px; width: auto; }
.topbar-social { justify-self: end; display: flex; gap: 12px; }
.topbar-social a {
width: 42px; height: 42px; border-radius: 50%;
background: var(--orange); color: #fff;
display: grid; place-items: center; transition: transform .15s ease;
}
.topbar-social a svg { width: 20px; height: 20px; fill: currentColor; }
.topbar-social a:hover { transform: scale(1.08); }
.navbar { background: var(--orange); } /* was #FDEE1F */
.navbar-inner { display: flex; align-items: center; justify-content: center; }
.navbar ul { display: flex; align-items: center; flex-wrap: wrap; justify-content: center; }
.navbar > .navbar-inner > ul > li { display: flex; align-items: center; }
.navbar > .navbar-inner > ul > li:not(:last-child)::after {
content: "|"; color: rgba(0,0,0,.45); margin: 0 8px;
}
.navbar a {
display: block; padding: 16px 14px; color: var(--black);
font-family: var(--font-head); font-weight: 700; font-size: 1.28rem; /* larger menu font */
letter-spacing: .03em; /* a touch more spacing */
}
.navbar a:hover, .navbar a[aria-current="page"] {
text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 2px;
}
/* Nested flyout menu — mirrors tintedmt's Services > Window Tinting > (tints) cascade */
.has-sub { position: relative; }
.dropdown {
/* override .navbar ul flex so items stack vertically, one per row */
display: block; flex-wrap: nowrap;
position: absolute; min-width: 268px; z-index: 20; list-style: none; margin: 0;
background: var(--black); padding: 6px;
opacity: 0; visibility: hidden; transform: translateY(6px); transition: opacity .15s ease, transform .15s ease;
box-shadow: 0 10px 30px rgba(0,0,0,.35);
}
/* top-level dropdown drops straight down under "Services" */
.has-sub.depth-0 > .dropdown { top: 100%; left: 0; }
/* nested dropdowns fly out to the RIGHT of their parent item (like tintedmt) */
.has-sub.depth-1 > .dropdown { top: -6px; left: 100%; transform: translateX(6px); }
/* reveal on hover / keyboard focus, at whichever level */
.has-sub:hover > .dropdown,
.has-sub:focus-within > .dropdown { opacity: 1; visibility: visible; transform: none; }
.dropdown li { display: block; width: 100%; text-align: left; }
.dropdown li::after { content: none !important; }
.dropdown a {
display: flex; align-items: center; justify-content: space-between; gap: 10px;
color: #fff; font-family: var(--font-head); font-weight: 600; font-size: .95rem;
padding: 10px 14px; letter-spacing: .01em; white-space: nowrap; text-align: left;
}
.dropdown a:hover, .dropdown a[aria-current="page"] {
color: var(--orange); text-decoration: none; background: rgba(255,255,255,.04);
}
.nav-caret { font-size: .8em; opacity: .8; }
.nav-caret--right { margin-left: auto; }
/* top-level "Services ▾" caret sits inline in the orange bar */
.navbar > .navbar-inner > ul > li > .sub-toggle .nav-caret--down { margin-left: 6px; font-size: .7em; }
.nav-toggle { display:none; background:none; border:0; cursor:pointer; width:46px; height:46px; padding:8px; }
.nav-toggle span { display:block; height:3px; background:var(--black); margin:5px 0; border-radius:2px; }
/* =====================================================================
HERO — full-width aerial video background spanning the WHOLE hero.
Left = semi-transparent black overlay panel with text/badge/btn.
Right = the video shows through + a transparent outlined form.
===================================================================== */
.hero { position: relative; min-height: 640px; display: flex; isolation: isolate; }
/* video covers the entire hero, both sides */
.hero-media {
position: absolute; inset: 0; z-index: -2;
width: 100%; height: 100%; object-fit: cover;
}
/* subtle global darken over the whole video for legibility */
.hero::after { content:""; position:absolute; inset:0; z-index:-1; background: rgba(0,0,0,.30); }
.hero-grid { display: grid; grid-template-columns: 1fr 1fr; width: 100%; }
.hero-left {
position: relative; color: #fff;
display: flex; flex-direction: column; justify-content: center;
padding: clamp(40px, 6vw, 90px) clamp(28px, 5vw, 80px);
}
/* transparent black overlay on the left — fades out earlier so the center
opens up and the video shows through more on the right of this panel */
.hero-left::before {
content:""; position:absolute; inset:0; z-index:-1;
background: linear-gradient(90deg, rgba(0,0,0,.82) 0%, rgba(0,0,0,.70) 35%, rgba(0,0,0,.25) 70%, rgba(0,0,0,0) 100%);
}
.hero-left h1 { color: #fff; max-width: 14ch; }
.hero-rule { width: 90px; height: 3px; background: var(--orange); margin: 6px 0 26px; }
.hero-left .subhead { font-size: 1.2rem; color: #f0f0f0; margin-bottom: 28px; max-width: 42ch; }
.hero-badge { margin-bottom: 28px; }
.hero-badge img { height: 92px; width: auto; background:#fff; padding:6px; border-radius:6px; }
/* form hugs the right edge; narrower so the center opens up */
.hero-right { position: relative; display: flex; align-items: center; justify-content: flex-end; }
.hero-form {
position: relative; z-index: 1;
margin: clamp(24px,4vw,48px) clamp(24px,3vw,40px) clamp(24px,4vw,48px) 0; /* no left margin -> hugs right */
width: min(420px, 100%); /* narrower */
background: rgba(0,0,0,.30); /* transparent panel */
border: 2px solid rgba(255,255,255,.85); /* thicker, brighter border */
padding: 30px; color:#fff;
}
.hero-form h3 { color:#fff; margin-bottom: 20px; font-size: 1.7rem; }
.hero-form .row { display:grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.hero-form input, .hero-form textarea {
width:100%; padding: 13px 14px; margin-bottom: 14px;
background: transparent; /* transparent fields */
border: 2px solid rgba(255,255,255,.85); color:#fff; /* thicker field border */
font-family: var(--font-body); font-size: 1rem;
}
.hero-form input::placeholder, .hero-form textarea::placeholder { color: rgba(255,255,255,.85); }
.hero-form input:focus, .hero-form textarea:focus { outline:none; border-color: var(--orange); }
.hero-form textarea { min-height: 120px; resize: vertical; }
.hero-form .btn { width: auto; }
/* =====================================================================
PAGE BANNER (interior pages) — centered title on light bg
===================================================================== */
.page-title { text-align:center; padding-block: clamp(36px,5vw,60px) 0; }
.page-title h1 { margin-bottom:0; }
/* split content section (service & about pages: img | text) */
.split { display:grid; grid-template-columns: 1fr 1fr; gap: clamp(28px,4vw,60px); align-items:center; }
.split img { width:100%; object-fit:cover; }
.split--rev .split-media { order: 2; }
.fullbody { max-width: 1000px; margin-inline:auto; }
/* 3-tile image band below hero (Services / Recent Projects / Client Testimonials)
Each tile has a WHITE border/frame; image zooms slightly on hover. */
.tile-band { display: grid; grid-template-columns: repeat(3, 1fr); }
.tile {
position: relative; min-height: 360px; display: grid; place-items: center;
text-align: center; overflow: hidden;
border: 3px solid #fff; /* white frame around each tile */
margin-left: -1.5px; /* collapse adjacent borders into one crisp line */
}
.tile img {
position: absolute; inset: 0; width: 100%; height: 100%;
object-fit: cover; z-index: 0; transition: transform .45s ease;
}
.tile--bottom img { object-position: center 70%; } /* testimonials: frame the vehicle body, sit lower */
.tile:hover img { transform: scale(1.06); } /* slight zoom on hover */
.tile::after { content:""; position:absolute; inset:0; background: rgba(0,0,0,.55); z-index:1; transition: background .2s ease; }
.tile:hover::after { background: rgba(0,0,0,.42); }
.tile h3 {
position: relative; z-index: 2; color: #fff; margin: 0;
font-size: clamp(1.8rem, 3vw, 2.6rem); text-shadow: 0 2px 10px rgba(0,0,0,.5);
}
/* welcome / centered intro */
.centered { max-width: 820px; margin-inline:auto; text-align:center; }
.eyebrow { font-family:var(--font-head); font-weight:700; text-transform:uppercase; letter-spacing:.16em; font-size:.82rem; color: var(--orange); display:block; margin-bottom:.6em; }
/* =====================================================================
SERVICE PAGE TEMPLATE (matches tintedmt service pages)
===================================================================== */
/* split intro: image left, H1 + intro right; sub-paragraph full width below */
.svc-intro { padding-block: clamp(40px,6vw,80px) 0; }
/* When svc-intro is the LAST section before the footer (About, Financing),
add bottom padding so the button doesn't butt flush against the footer. */
.svc-intro--end { padding-bottom: clamp(48px,6vw,80px); }
.svc-intro-grid { display:grid; grid-template-columns:1fr 1.2fr; gap:clamp(28px,4vw,56px); align-items:center; }
.svc-intro-grid img { width:100%; border-radius:6px; object-fit:cover; box-shadow:var(--shadow-card); }
.svc-intro-grid h1 { font-size:clamp(1.7rem,3vw,2.4rem); margin-bottom:.6em; }
.svc-intro-sub { max-width:1000px; margin:clamp(28px,4vw,44px) auto 0; text-align:center; color:var(--gray-text); }
/* 2-col dark cards ("...Services We Offer") */
.svc-cards { padding-block: clamp(40px,6vw,80px); }
.svc-cards-head { text-align:center; margin-bottom:40px; }
.svc-cards-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:24px; max-width:1100px; margin-inline:auto; }
.svc-cardbox {
background:var(--black); border:2px solid transparent; border-radius:14px;
/* silver beveled border like tintedmt: gradient border via padding-box/border-box */
background-image: linear-gradient(#0a0a0a,#0a0a0a), linear-gradient(145deg,#9a9a9a,#3a3a3a 45%,#8f8f8f);
background-origin: border-box; background-clip: padding-box, border-box;
box-shadow: 0 6px 20px rgba(0,0,0,.25);
padding:clamp(26px,3vw,40px); text-align:center; color:#dcdcdc;
}
.svc-cardbox h3 { color:#fff; margin-bottom:.6em; }
.svc-cardbox p { margin:0; line-height:1.8; }
/* full-bleed black band ("How We Apply...") */
.svc-band { background:var(--black); color:#dcdcdc; text-align:center; padding-block:clamp(44px,6vw,80px); }
.svc-band h2 { color:var(--orange); margin-bottom:.7em; }
.svc-band p { max-width:900px; margin-inline:auto; line-height:1.9; }
/* centered CTA block ("Reach Out...") */
.svc-cta { text-align:center; padding-block:clamp(44px,6vw,80px); }
.svc-cta h2 { margin-bottom:1em; }
.svc-cta p { max-width:900px; margin:0 auto 1.2em; line-height:1.9; }
.svc-cta .btn { margin-top:14px; }
/* feature row (Why choose us — 4 col) */
.features { display:grid; grid-template-columns:repeat(4,1fr); gap: 28px; }
.feature { text-align:center; }
.feature .fi { font-size:2.4rem; color:var(--orange); margin-bottom:.3em; }
/* centered section rule (under headings like "Services") */
.section-rule { width:90px; height:3px; background:var(--black); margin:14px auto 0; }
/* Welcome — split: photo LEFT (taller than card) + black card w/ thick orange border RIGHT (square) */
.welcome-section { padding-block: clamp(60px,9vw,120px); } /* extra white space above/below */
.welcome-grid { display:grid; grid-template-columns:1fr 1fr; align-items:center; }
.welcome-photo { grid-column:1; grid-row:1; z-index:1; }
.welcome-photo img {
width:100%; height:640px; object-fit:cover; /* image taller than the card */
box-shadow:0 10px 30px rgba(0,0,0,.15);
}
.welcome-card {
grid-column:2; grid-row:1; position:relative; z-index:2;
margin-left:-90px; /* overlap the photo on the left */
background:#141414; border:5px solid var(--orange); border-radius:0; /* thicker border, square corners */
padding:clamp(32px,4vw,56px);
box-shadow:0 14px 44px rgba(0,0,0,.25);
}
.welcome-card h2 { color:#fff; margin-bottom:.5em; }
.welcome-tagline { color:#fff; font-style:italic; font-weight:700; font-family:var(--font-head); margin-bottom:.6em; }
.welcome-rule { width:70px; height:2px; background:#fff; margin:0 0 22px; }
.welcome-card p:last-child { color:#dcdcdc; line-height:1.9; margin:0; }
/* Why Choose Us — PARALLAX dark shop bg; LEFT half tinted (text), right half clearer */
.whychoose-section {
position:relative; isolation:isolate;
background:#111 url("../images/whychoose-tint.webp") center 38% / cover no-repeat; /* non-fixed = reliable framing on the tinted greenhouse */
padding-block: clamp(70px,9vw,120px);
min-height: clamp(480px, 58vh, 660px); /* taller so more of the tint photo shows */
display:flex; align-items:center;
}
.whychoose-overlay { position:absolute; inset:0; z-index:-1;
/* left ~50% has the dark tint for text; fades to clear on the right half */
background: linear-gradient(90deg, rgba(0,0,0,.82) 0%, rgba(0,0,0,.8) 45%, rgba(0,0,0,.25) 60%, rgba(0,0,0,.15) 100%); }
.whychoose-inner { color:#fff; }
.whychoose-inner > h2 { color:#fff; letter-spacing:.02em; margin-bottom:28px; }
.wc-accordion { max-width:560px; }
.wc-item { border-bottom:1px solid rgba(255,255,255,.18); }
.wc-q {
width:100%; text-align:left; background:none; border:0; cursor:pointer; color:#fff;
font-family:var(--font-head); font-weight:700; font-size:1.3rem;
padding:20px 44px 20px 0; position:relative; display:flex; align-items:center; gap:14px;
}
.wc-check { color:var(--orange); font-size:1.1rem; }
.wc-q::after { content:"\25BE"; position:absolute; right:6px; top:50%; transform:translateY(-50%); color:#fff; font-size:1rem; transition:transform .2s ease; }
.wc-item.open .wc-q::after { transform:translateY(-50%) rotate(180deg); }
.wc-a { max-height:0; overflow:hidden; transition:max-height .25s ease; }
.wc-a p { padding:0 0 20px 30px; margin:0; color:#dcdcdc; }
/* Expert Window Tinting — centered black card w/ orange border (matches tintedmt) */
.expert-section { padding-block: clamp(40px,6vw,80px); }
.expert-card {
max-width:1180px; margin-inline:auto; text-align:center;
background:#141414; border:2px solid var(--orange); border-radius:22px;
padding:clamp(36px,5vw,70px) clamp(28px,6vw,90px);
box-shadow:0 10px 40px rgba(0,0,0,.18);
}
.expert-card h2 { color:var(--orange); margin-bottom:1.1em; font-size:clamp(1.7rem,3vw,2.4rem); }
.expert-card p { color:#e8e8e8; line-height:1.95; max-width:70ch; margin-inline:auto; }
.expert-card p:last-child { margin-bottom:0; }
/* Services grid butts up against the next section — gap = same 6px as card trim */
.services-section { padding-bottom: 6px; }
.phonecall-section { margin-top: 0; }
/* SERVICES — full-bleed 2-col image cards: 50/50 edge-to-edge, thin trim between */
.services-grid {
display:grid; grid-template-columns:repeat(2,1fr);
gap:6px; /* the thin white/black trim between cards */
width:100%; /* full viewport width (grid sits outside .container) */
}
.svc-tile {
position:relative; overflow:hidden; min-height:340px; display:flex;
color:#fff; isolation:isolate;
}
.svc-tile::before {
content:""; position:absolute; inset:0; z-index:-2;
background:var(--bg) var(--bgpos,center)/cover no-repeat; transition:transform .5s ease;
}
.svc-tile::after { content:""; position:absolute; inset:0; z-index:-1; background:rgba(0,0,0,.62); transition:background .2s ease; }
.svc-tile:hover::before { transform:scale(1.06); } /* hover zoom */
.svc-tile:hover::after { background:rgba(0,0,0,.5); }
.svc-tile-inner {
margin:auto; text-align:center; padding:36px clamp(24px,5vw,64px); max-width:640px;
display:flex; flex-direction:column; align-items:center; gap:16px;
}
.svc-tile-inner h3 { color:#fff; font-size:clamp(1.5rem,2.4vw,2rem); margin:0; }
.svc-tile-inner p { color:#f0f0f0; margin:0; line-height:1.6; }
.svc-tile-inner .btn { margin-top:6px; }
/* CTA band */
.cta-band { background: var(--black); color:#fff; text-align:center; }
.cta-band h2 { color:#fff; }
.cta-band .phone-xl { display:inline-block; font-family:var(--font-head); font-weight:700; font-size:clamp(1.8rem,4vw,2.8rem); color:var(--orange); margin:.2em 0 .5em; }
/* FAQ accordion */
.faq { max-width: 900px; margin-inline:auto; }
.faq-item { border-bottom:1px solid var(--border); }
.faq-q { width:100%; text-align:left; background:none; border:0; cursor:pointer;
font-family:var(--font-head); font-weight:700; font-size:1.1rem; color:var(--black); padding:20px 40px 20px 0; position:relative; }
.faq-q::after { content:"+"; position:absolute; right:4px; top:50%; transform:translateY(-50%); color:var(--orange); font-size:1.7rem; line-height:1; }
.faq-item.open .faq-q::after { content:"\2013"; }
.faq-a { max-height:0; overflow:hidden; transition:max-height .25s ease; }
.faq-a p { padding-bottom:20px; margin:0; }
/* gallery grid */
.gallery-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
.gallery-grid img { aspect-ratio:4/3; object-fit:cover; cursor:pointer; transition:.15s; }
.gallery-grid img:hover { transform:scale(1.02); }
/* contact page form (light) */
.cform { max-width:900px; margin-inline:auto; display:grid; gap:14px; }
.cform .row { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
.cform input, .cform textarea { width:100%; padding:14px 16px; border:1px solid var(--border); background:var(--offwhite); font-family:var(--font-body); font-size:1rem; }
.cform textarea { min-height:150px; resize:vertical; }
.cform .btn { justify-self:center; }
.contact-cols { display:grid; grid-template-columns:1fr 1fr; gap:40px; margin-top:50px; text-align:center; }
.contact-cols .icon { color:var(--orange); font-size:1.6rem; }
.map-embed iframe { width:100%; height:340px; border:0; }
/* service areas — town bullet list + accordion (matches tintedmt) */
.area-grid { display:grid; grid-template-columns:repeat(5,1fr); gap:12px; }
.area-grid .area { background:var(--black); color:#fff; text-align:center; padding:16px 8px; font-family:var(--font-head); font-weight:700; }
.area-list { display:grid; grid-template-columns:repeat(4,1fr); gap:14px 24px; max-width:1000px; margin:0 auto; list-style:none; padding:0; }
.area-list li { display:flex; align-items:center; gap:8px; font-weight:600; }
.area-pin { color:var(--orange); }
@media (max-width:900px){ .area-list { grid-template-columns:repeat(2,1fr); } }
/* Service Areas accordion — each town expands to its service list (matches tintedmt) */
.area-svc-list { list-style:none; margin:0; padding:0; }
.area-svc-list li { padding:14px 0; border-bottom:1px solid rgba(0,0,0,.06); }
.area-svc-list li:last-child { border-bottom:0; }
.area-svc-list a { color:var(--black); font-weight:600; text-decoration:none; transition:color .15s; }
.area-svc-list a:hover { color:var(--orange); }
/* Service Areas accordion — TWO columns (fills down-left then right, matches tintedmt) */
.area-accordion { column-count: 2; column-gap: 24px; }
.area-accordion .faq-item { break-inside: avoid; -webkit-column-break-inside: avoid; page-break-inside: avoid; display: inline-block; width: 100%; }
@media (max-width: 760px){ .area-accordion { column-count: 1; } }
/* Town page "Our Services in [Town]" — 2-col link list */
.town-svc-list { max-width:900px; margin:0 auto; display:grid; grid-template-columns:1fr 1fr; gap:0 40px; }
.town-svc-list li { padding:13px 0; }
@media (max-width:640px){ .town-svc-list { grid-template-columns:1fr; } }
/* Quality...Phone Call Away — full-bleed dark photo bg, text on the right half */
.phonecall-section {
position:relative; isolation:isolate;
background:#111 url("../images/phonecall-tint-denali.jpg") center 20%/cover no-repeat;
padding-block: clamp(60px,9vw,120px);
}
.phonecall-overlay { position:absolute; inset:0; z-index:-1;
background: linear-gradient(90deg, rgba(0,0,0,.35) 0%, rgba(0,0,0,.55) 50%, rgba(0,0,0,.8) 100%); }
.phonecall-grid { display:grid; grid-template-columns:1fr 1fr; gap:40px; align-items:center; }
.phonecall-text { color:#eee; text-align:center; }
.phonecall-text h2 { color:#fff; }
.pc-rule { width:90px; height:3px; background:var(--orange); margin:14px auto 22px; }
.phonecall-text p { line-height:1.8; }
/* Client Testimonials — full-bleed dark bg photo + overlay, heading + Google reviews widget */
.testimonials-section {
position:relative; isolation:isolate;
background:#111 url("../images/testimonials-bg.jpg") center/cover no-repeat fixed;
padding-block: clamp(50px,7vw,90px);
}
.testimonials-overlay { position:absolute; inset:0; z-index:-1; background:rgba(0,0,0,.72); }
.testimonials-inner { position:relative; text-align:center; }
.testimonials-inner > h2 { color:#fff; margin-bottom:36px; }
.reviews-widget { max-width:1100px; margin-inline:auto; }
/* Call Today For An Estimate — light band, black rules top/bottom, heading+phone left, button right */
.estimate-band { background:#fff; padding-block:0; }
.estimate-inner {
display:flex; align-items:center; justify-content:space-between; gap:30px; flex-wrap:wrap;
border-top:3px solid var(--black); border-bottom:3px solid var(--black);
padding-block:44px; margin-block:60px;
}
.estimate-left h2 { margin:0 0 .3em; }
.estimate-phone { font-family:var(--font-head); font-weight:700; font-size:1.6rem; color:var(--black); display:inline-flex; align-items:center; gap:10px; }
.estimate-phone:hover { color:var(--orange); }
.estimate-phone .ep-ico { color:var(--orange); }
.btn--outline-dark { background:transparent; color:var(--black); border-color:var(--black); }
.btn--outline-dark:hover { background:var(--black); color:#fff; }
/* Facebook page embed section — FB Page Plugin renders at its native max (500px), centered */
.fb-section { padding-block: 40px 60px; }
.fb-embed-wrap { display:flex; justify-content:center; width:100%; }
.fb-embed-wrap .fb-page, .fb-embed-wrap .fb-page span, .fb-embed-wrap .fb-page iframe { max-width:100%; }
/* Recent Projects — rotating carousel; heading + View More OVERLAID on the photos */
.rp-carousel { position:relative; max-width:960px; margin-inline:auto; overflow:hidden; box-shadow: 0 10px 40px rgba(0,0,0,.18); }
.rp-track { display:flex; transition: transform .5s ease; }
.rp-slide { min-width:100%; position:relative; }
.rp-slide img { width:100%; aspect-ratio:16/9; object-fit:cover; display:block; }
/* dark overlay so the centered text is readable over any photo */
.rp-carousel::before { content:""; position:absolute; inset:0; background:rgba(0,0,0,.45); z-index:1; pointer-events:none; }
.rp-overlay {
position:absolute; inset:0; z-index:2; display:flex; flex-direction:column;
align-items:center; justify-content:center; gap:20px; text-align:center; padding:20px;
pointer-events:none;
}
.rp-overlay h2 { color:#fff; margin:0; text-shadow:0 2px 12px rgba(0,0,0,.5); }
.rp-overlay .btn { pointer-events:auto; }
.rp-arrow {
position:absolute; top:50%; transform:translateY(-50%); z-index:3;
width:52px; height:52px; border:0; cursor:pointer; border-radius:50%;
background:rgba(0,0,0,.55); color:#fff; font-size:2rem; line-height:1;
display:grid; place-items:center; transition:background .15s ease;
}
.rp-arrow:hover { background:var(--orange); }
.rp-prev { left:16px; } .rp-next { right:16px; }
.rp-dots { position:absolute; bottom:16px; left:0; right:0; display:flex; justify-content:center; gap:10px; z-index:3; }
.rp-dots button { width:12px; height:12px; border-radius:50%; border:0; cursor:pointer; background:rgba(255,255,255,.55); padding:0; }
.rp-dots button.active { background:var(--orange); }
/* =====================================================================
FOOTER — exact tintedmt layout:
[top strip: Location | Call] → [4 cols: brand/social · Nav · Services · Hours] → [copyright]
===================================================================== */
.site-footer { background: #2b2b2b; color:#cfcfcf; } /* main body = lighter charcoal */
/* top strip = dark black (sits above the lighter footer body) */
.footer-top { background: var(--black); }
.footer-top-inner { display:flex; justify-content:space-between; gap:40px; padding-block:34px; }
.footer-loc, .footer-call { display:flex; align-items:flex-start; gap:16px; color:#fff; }
.footer-loc:hover, .footer-call:hover { color:var(--orange); }
.footer-top .ft-ico { color:#fff; flex:none; }
.footer-top .ft-ico svg { width:34px; height:34px; }
.footer-loc strong, .footer-call strong { display:block; font-family:var(--font-head); font-weight:700; font-size:1.15rem; margin-bottom:4px; color:#fff; }
.footer-loc span, .footer-call span { line-height:1.5; }
/* main 4-col area */
.footer-main { padding-block: 50px 40px; }
.footer-cols { display:grid; grid-template-columns:1.2fr 1fr 1.2fr 1.2fr; gap:40px; }
.fcol { text-align:center; }
.fcol-brand { text-align:center; }
.site-footer h4 { color:#fff; font-family:var(--font-head); font-weight:700; font-size:1.35rem; margin-bottom:1em; }
.footer-logo img { height:70px; width:auto; margin:0 auto 18px; }
.footer-social { display:flex; justify-content:center; gap:20px; }
.footer-social a { color:#fff; transition:color .15s ease; }
.footer-social a svg { width:22px; height:22px; fill:currentColor; }
.footer-social a:hover { color:var(--orange); }
.footer-links li { margin-bottom:14px; }
.footer-links a { color:#dcdcdc; font-size:1.02rem; }
.footer-links a:hover { color:var(--orange); }
.footer-hours { display:flex; flex-direction:column; gap:12px; }
.fh-row { display:flex; justify-content:space-between; gap:24px; max-width:320px; margin-inline:auto; width:100%; font-size:1rem; }
.fh-day { color:#dcdcdc; }
.fh-time { color:#dcdcdc; }
/* copyright (slightly darker than the charcoal body, like tintedmt) */
.footer-bottom { background:#1f1f1f; padding-block:22px; text-align:center; font-family:var(--font-head); font-weight:700; font-size:1rem; color:#fff; }
.footer-credit { background:#141414; padding-block:10px; text-align:center; font-family:var(--font-body); font-size:.72rem; letter-spacing:.02em; color:#6b6b6b; }
.footer-credit a { color:#8a8a8a; text-decoration:none; }
.footer-credit a:hover { color:var(--orange, #F97316); }
/* form status message (success / error under contact forms) */
.form-note { margin:12px 0 0; font-size:.92rem; font-weight:600; }
.form-note--ok { color:#16a34a; }
.form-note--err { color:#dc2626; }
.hero-form .form-note, .hero-form .form-note--ok { color:#fff; }
.hero-form .form-note--err { color:#ffb4b4; }
/* floating persistent badges (both pages) */
.float-quote {
position: fixed; right: 0; bottom: 24px; z-index: 150;
background: var(--orange); color:#fff; font-family:var(--font-head); font-weight:700;
padding: 14px 22px; border-radius: 8px 0 0 8px; box-shadow: 0 4px 16px rgba(0,0,0,.25);
}
.float-quote:hover { background: var(--orange-dark); color:#fff; }
.float-google {
position: fixed; left: 18px; bottom: 24px; z-index: 150;
width: 48px; height: 48px; border-radius:50%; background: var(--orange); color: var(--black);
display:grid; place-items:center; font-family:var(--font-head); font-weight:700; font-size:1.3rem;
box-shadow: 0 4px 16px rgba(0,0,0,.25);
}
/* =====================================================================
RESPONSIVE
===================================================================== */
@media (max-width: 1024px) {
.features { grid-template-columns:repeat(2,1fr); }
.svc-grid { grid-template-columns:repeat(2,1fr); }
.services-grid { grid-template-columns:1fr; }
.footer-cols { grid-template-columns:1fr 1fr; gap:36px; }
.area-grid { grid-template-columns:repeat(4,1fr); }
}
@media (max-width: 860px) {
.topbar-inner { grid-template-columns: 1fr auto; min-height: 64px; }
.topbar-social { display:none; }
.topbar-logo { justify-self:end; }
.navbar-inner { justify-content: space-between; }
.nav-toggle { display:block; }
.navbar > .navbar-inner > ul {
position: fixed; inset: 0 0 0 auto; width:min(86vw,340px); background:var(--black);
flex-direction:column; align-items:stretch; padding:20px; transform:translateX(100%);
transition:transform .25s ease; z-index:120; overflow-y:auto;
}
body.nav-open .navbar > .navbar-inner > ul { transform:translateX(0); }
.navbar > .navbar-inner > ul > li { display:block; }
.navbar > .navbar-inner > ul > li::after { content:none !important; }
.navbar a { color:#fff; padding:12px 4px; }
/* Mobile: nested menus stack and expand on tap, indented per level */
.dropdown {
position:static; opacity:1; visibility:visible; transform:none; display:none;
background:transparent; box-shadow:none; padding:0 0 0 14px; min-width:0;
}
.has-sub.depth-1 > .dropdown { left:auto; }
.has-sub.open > .dropdown { display:block; }
.dropdown a { font-size:1rem; padding:11px 4px; }
.nav-caret--right { transform:rotate(90deg); }
.has-sub.open > .sub-toggle .nav-caret { transform:rotate(180deg); }
.hero-grid { grid-template-columns:1fr; }
.gallery-grid { grid-template-columns:repeat(3,1fr); }
.tile-band { grid-template-columns:1fr; }
.tile { min-height: 240px; }
}
@media (max-width: 600px) {
.features, .svc-grid, .split, .contact-cols { grid-template-columns:1fr; }
.split--rev .split-media { order:0; }
.footer-cols { grid-template-columns:1fr; gap:34px; }
.footer-top-inner { flex-direction:column; gap:24px; }
.gallery-grid, .area-grid { grid-template-columns:repeat(2,1fr); }
.cform .row, .hero-form .row { grid-template-columns:1fr; }
.testimonials-section { background-attachment: scroll; }
.estimate-inner { flex-direction:column; text-align:center; gap:20px; }
.phonecall-grid { grid-template-columns:1fr; }
.phonecall-spacer { display:none; }
.welcome-grid { grid-template-columns:1fr; }
.welcome-photo { grid-column:1; grid-row:1; }
.welcome-card { grid-column:1; grid-row:2; margin-left:0; margin-top:-40px; }
.topbar-phone { font-size:1.05rem; }
}
/* Financing page — split layout matching tintedmt (image left, benefits right) */
.fin-tagline { font-size: 1.15rem; font-weight: 600; margin: 6px 0 18px; }
.fin-benefits-head { font-family: var(--font-head); font-weight: 800; font-size: 1.5rem; margin: 0 0 12px; }
.fin-benefits { margin: 0 0 8px; padding-left: 1.3em; }
.fin-benefits li { font-size: 1.12rem; font-weight: 600; margin-bottom: 10px; line-height: 1.4; }
/* ── Scroll-load reveal (mirrors tintedmt Duda "fadeInCombo / up") ───────────
Elements start slightly lowered + transparent, then fade+slide up into place
when scrolled into view. JS adds .reveal (initial) then .reveal--in (visible). */
.reveal { opacity: 0; transform: translateY(28px); will-change: opacity, transform;
transition: opacity .8s cubic-bezier(.22,.61,.36,1), transform .8s cubic-bezier(.22,.61,.36,1); }
.reveal--in { opacity: 1; transform: none; }
/* Never hide the hero — it's above the fold and must render instantly. */
.hero.reveal, .site-header .reveal { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
.reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
}
/* ============================================================
Gallery + PDR media components (added 2026-07-25 — real SFR photos/video)
============================================================ */
/* Grouped gallery: category heading + grid */
.gallery-group { margin-top: clamp(28px,4vw,48px); }
.gallery-group:first-of-type { margin-top: 0; }
.gallery-group-head { display:flex; align-items:baseline; gap:14px; margin-bottom:18px; flex-wrap:wrap; }
.gallery-group-head h2 { margin:0; font-size:clamp(1.3rem,2.4vw,1.9rem); }
.gallery-group-head .section-rule { flex:1; height:3px; background:var(--orange); min-width:40px; opacity:.9; }
/* media tile that can hold an ![]()
or a