/*
Theme Name: Middletown Painting
Theme URI: https://middletownpainting.com/
Author: Middletown Painting
Description: One-page residential and commercial painting website with responsive split hero and flip cards.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: middletown-painting
*/
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700;800&display=swap');
:root{--blue:#0876b9;--sky:#28a8dc;--orange:#ff7418;--ink:#13263b;--muted:#5c6b78;--line:#e7edf2}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;color:var(--ink);font-family:"DM Sans",Arial,sans-serif;background:white}a{color:inherit;text-decoration:none}button,input,textarea,select{font:inherit}.header{height:90px;display:flex;align-items:center;justify-content:space-between;padding:12px max(4vw,22px);background:white;position:sticky;top:0;z-index:20;box-shadow:0 1px 12px #0b203016}.brand{display:flex;align-items:center;gap:10px;font-weight:800;letter-spacing:.04em;font-size:15px}.brand img{height:64px;width:80px;object-fit:contain}.brand small{display:block;font-size:11px;letter-spacing:.22em;text-align:center}nav{display:flex;align-items:center;gap:23px;font-size:13px;font-weight:700}nav a:hover{color:var(--blue)}.nav-cta,.btn{background:var(--orange);color:white!important;border:0;border-radius:6px;padding:15px 21px;font-weight:800;display:inline-block;cursor:pointer}.nav-cta{padding:13px 17px}.menu{display:none}.hero{min-height:510px;display:grid;grid-template-columns:51% 49%;overflow:hidden;background:#f9fcfe}.hero-copy{padding:80px 0 60px max(6vw,26px);z-index:2}.eyebrow{font-size:12px;letter-spacing:.16em;color:var(--blue);font-weight:800;margin-bottom:16px}.hero h1{font-size:clamp(32px,3.5vw,61px);letter-spacing:-.055em;line-height:1.12;margin:0 0 24px;max-width:710px}.hero h1 em{font-style:normal;color:var(--blue)}.hero p{color:var(--muted);font-size:17px;line-height:1.7;max-width:510px}.actions{display:flex;gap:12px;margin-top:28px}.secondary{background:white;color:var(--blue)!important;border:1px solid var(--blue)}.hero-highlights{display:flex;gap:18px;flex-wrap:wrap;margin-top:44px;font-size:12px;font-weight:800;color:var(--blue)}.hero-image{background:url('assets/hero.jpg') center/cover;clip-path:polygon(0 0,100% 0,100% 100%,15% 100%);margin-left:-10%;width:110%}.section{padding:75px max(5vw,24px);max-width:1600px;margin:auto;scroll-margin-top:90px}.section h2{font-size:clamp(29px,3vw,43px);margin:0 0 20px;letter-spacing:-.04em}.section-title{display:flex;align-items:end;justify-content:space-between;gap:20px;margin-bottom:27px}.section-title p,.about p,.contact p{color:var(--muted);line-height:1.7}.service-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:12px}.flip{border:0;background:none;perspective:1100px;cursor:pointer;padding:0;height:220px;text-align:center;color:inherit}.flip-inner{display:block;width:100%;height:100%;position:relative;transform-style:preserve-3d;transition:transform .6s}.flip:hover .flip-inner,.flip.is-flipped .flip-inner{transform:rotateY(180deg)}.flip-face{position:absolute;inset:0;backface-visibility:hidden;border:1px solid var(--line);border-radius:10px;box-shadow:0 7px 22px #102c4210;padding:18px 12px;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:13px;background:white}.flip-face strong{font-size:15px}.flip-face small{font-size:10px;color:var(--blue)}.service-icon{font-size:28px;font-weight:800;color:var(--blue)}.flip-face.back{transform:rotateY(180deg);background:var(--blue);color:white}.flip-face.back span{font-size:12px;line-height:1.5}.flip-face.back small{color:white}.work{background:#f7fafc;max-width:none}.work>.section-title,.work>.gallery{max-width:1450px;margin-left:auto;margin-right:auto}.gallery{display:grid;grid-template-columns:repeat(5,1fr);gap:12px}.gallery img{width:100%;height:230px;object-fit:cover;border-radius:9px}.about{display:grid;grid-template-columns:1fr 1.3fr;gap:60px}.benefits{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}.benefits b{color:var(--blue);font-size:30px}.benefits h3{font-size:17px}.benefits p{font-size:13px}.reviews{background:#f8fbfd;max-width:none}.reviews>.eyebrow,.reviews>h2,.review-grid{max-width:1450px;margin-left:auto;margin-right:auto}.review-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}.review-grid blockquote{background:white;border:1px solid var(--line);padding:26px;margin:0;border-radius:9px;line-height:1.7;font-size:15px}.review-grid cite{display:block;font-style:normal;font-weight:800;margin-top:18px}.contact{display:grid;grid-template-columns:1fr 1.4fr;gap:60px}.contact a{color:var(--blue)}form{padding:25px;background:#f6faff;border-radius:12px;border:1px solid var(--line)}label{display:block;font-size:13px;font-weight:800;margin-bottom:15px}input,textarea,select{display:block;width:100%;margin-top:7px;padding:12px;border:1px solid #cfdce6;border-radius:6px;background:white;color:var(--ink)}.two{display:grid;grid-template-columns:1fr 1fr;gap:15px}.trap{position:absolute;left:-10000px}.form-note{font-size:11px}footer{background:#f6f9fc;border-top:1px solid var(--line);padding:30px 5vw;display:flex;align-items:center;justify-content:space-between;gap:20px;font-size:12px;color:var(--muted)}.footer-brand{font-weight:800;color:var(--blue)}.footer-brand span{color:var(--orange)}
@media(max-width:1100px){.service-grid{grid-template-columns:repeat(4,1fr)}nav{gap:12px}.hero-copy{padding-top:60px}.gallery img{height:180px}}@media(max-width:760px){.header{height:75px}.brand img{height:50px;width:55px}.menu{display:block;background:none;border:0;font-size:25px;cursor:pointer}nav{display:none;position:absolute;top:75px;left:0;right:0;background:white;flex-direction:column;align-items:stretch;padding:20px;box-shadow:0 10px 20px #0002}nav.open{display:flex}.hero{display:flex;flex-direction:column}.hero-copy{padding:45px 24px 30px}.hero-image{height:310px;margin:0;width:100%;clip-path:none}.hero-highlights{margin-top:26px}.section{padding:55px 24px}.service-grid{grid-template-columns:repeat(2,1fr)}.section-title{display:block}.gallery{grid-template-columns:repeat(2,1fr)}.gallery img{height:175px}.about,.contact{grid-template-columns:1fr;gap:24px}.benefits{grid-template-columns:1fr}.review-grid{grid-template-columns:1fr}.two{grid-template-columns:1fr;gap:0}footer{flex-wrap:wrap}.actions{flex-wrap:wrap}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.flip-inner{transition:none}}