/* ============================================================
   Pics and Fix LLC — handyman / yard services
   Palette: charcoal + safety orange + work-green.
   Sturdy, bold, trustworthy. "We do odd jobs."
   ============================================================ */

:root {
  --charcoal:   #22262B;
  --charcoal-2: #2E343B;
  --ink:        #1A1D21;
  --slate:      #4A5560;
  --fog:        #6B7480;
  --cloud:      #F4F5F7;
  --white:      #FFFFFF;
  --orange:     #F26B21;   /* safety / handyman orange */
  --orange-dk:  #D4551180;
  --orange-solid:#D45511;
  --green:      #3F8E4A;   /* lawn / yard green */
  --green-dk:   #2F6C38;
  --steel:      #E3E6EA;

  --radius:     10px;
  --radius-lg:  18px;
  --shadow:     0 14px 44px rgba(26,29,33,.16);
  --shadow-sm:  0 4px 16px rgba(26,29,33,.10);
  --maxw:       1160px;

  --head: "Barlow Condensed", "Oswald", "Arial Narrow", sans-serif;
  --body: "Inter", -apple-system, "Segoe UI", system-ui, sans-serif;
}

* { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { font-family:var(--body); color:var(--ink); background:var(--white); line-height:1.7; font-size:17px; -webkit-font-smoothing:antialiased; }

h1,h2,h3,h4 { font-family:var(--head); font-weight:700; line-height:1.05; color:var(--charcoal); text-transform:uppercase; letter-spacing:.5px; }
h1 { font-size:clamp(2.8rem,7vw,5rem); }
h2 { font-size:clamp(2.1rem,4.5vw,3.2rem); }
h3 { font-size:1.4rem; }
p { margin-bottom:1rem; color:var(--slate); }
a { color:var(--orange-solid); text-decoration:none; transition:.2s; }
a:hover { color:var(--orange); }
.container { max-width:var(--maxw); margin:0 auto; padding:0 24px; }
img { max-width:100%; display:block; }

/* Buttons */
.btn { display:inline-block; background:var(--orange); color:var(--white); padding:16px 36px; border-radius:8px; font-family:var(--head); font-weight:600; font-size:1.05rem; text-transform:uppercase; letter-spacing:1px; transition:.2s; box-shadow:var(--shadow-sm); border:none; cursor:pointer; }
.btn:hover { background:var(--orange-solid); color:var(--white); transform:translateY(-2px); box-shadow:var(--shadow); }
.btn-green { background:var(--green); }
.btn-green:hover { background:var(--green-dk); color:var(--white); }
.btn-ghost { background:transparent; border:2px solid var(--white); color:var(--white); }
.btn-ghost:hover { background:var(--white); color:var(--charcoal); }

/* Header */
.site-header { position:sticky; top:0; z-index:100; background:var(--charcoal); border-bottom:3px solid var(--orange); }
.nav { display:flex; align-items:center; justify-content:space-between; padding:16px 24px; max-width:var(--maxw); margin:0 auto; }
.logo { font-family:var(--head); font-size:1.7rem; font-weight:700; color:var(--white); text-transform:uppercase; letter-spacing:1px; display:flex; align-items:center; gap:8px; }
.logo .arrow { color:var(--orange); }
.logo .fix { color:var(--orange); }
.nav-links { display:flex; gap:30px; list-style:none; align-items:center; }
.nav-links a { color:var(--cloud); font-family:var(--head); font-weight:500; font-size:1.05rem; text-transform:uppercase; letter-spacing:.5px; }
.nav-links a:hover { color:var(--orange); }
.nav-toggle { display:none; background:none; border:none; font-size:1.7rem; color:var(--white); cursor:pointer; }

/* Hero */
.hero { position:relative; color:var(--white); text-align:center; padding:clamp(90px,14vw,170px) 0; background:linear-gradient(rgba(26,29,33,.78),rgba(26,29,33,.72)), url("../images/curated/hero-work.jpg") center/cover no-repeat; }
.hero h1 { color:var(--white); max-width:960px; margin:0 auto 10px; }
.hero .tagline { font-family:var(--head); text-transform:uppercase; letter-spacing:3px; color:var(--orange); font-size:1.3rem; font-weight:600; margin-bottom:26px; }
.hero p.lede { font-size:1.25rem; max-width:640px; margin:0 auto 36px; color:var(--steel); }
.hero-cta { display:flex; gap:16px; justify-content:center; flex-wrap:wrap; }

/* Trust bar */
.trustbar { background:var(--orange); color:var(--white); }
.trustbar .container { display:flex; justify-content:space-around; flex-wrap:wrap; gap:16px; padding:20px 24px; text-align:center; }
.trustbar .ti { font-family:var(--head); text-transform:uppercase; letter-spacing:1px; font-weight:600; font-size:1.05rem; display:flex; align-items:center; gap:10px; }

/* Sections */
.section { padding:clamp(60px,9vw,110px) 0; }
.section-alt { background:var(--cloud); }
.section-dark { background:var(--charcoal); }
.section-dark h2,.section-dark h3 { color:var(--white); }
.section-dark p { color:var(--fog); }
.section-head { text-align:center; max-width:680px; margin:0 auto 56px; }
.section-head .eyebrow { font-family:var(--head); text-transform:uppercase; letter-spacing:3px; color:var(--orange); font-weight:600; font-size:1rem; margin-bottom:10px; }
.section-head p { font-size:1.12rem; }

/* Services grid */
.services { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.svc { background:var(--white); border:1px solid var(--steel); border-radius:var(--radius); padding:32px 28px; transition:.25s; border-top:4px solid var(--green); }
.svc:hover { transform:translateY(-5px); box-shadow:var(--shadow); border-top-color:var(--orange); }
.svc .ic { font-size:2.3rem; margin-bottom:14px; }
.svc h3 { margin-bottom:8px; font-size:1.3rem; }
.svc p { font-size:.97rem; margin:0; }

/* Before/After gallery */
.gallery { display:grid; grid-template-columns:repeat(2,1fr); gap:24px; }
.ba { border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow-sm); background:var(--white); border:1px solid var(--steel); }
.ba img { width:100%; height:340px; object-fit:cover; }
.ba .cap { padding:16px 20px; font-family:var(--head); text-transform:uppercase; letter-spacing:1px; font-weight:600; color:var(--charcoal); font-size:1.1rem; display:flex; align-items:center; gap:10px; }
.ba .cap .tag { background:var(--green); color:#fff; font-size:.7rem; padding:3px 10px; border-radius:100px; letter-spacing:1px; }
.gallery-strip { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-top:24px; }
.gallery-strip img { width:100%; height:180px; object-fit:cover; border-radius:8px; }

/* About */
.about-grid { display:grid; grid-template-columns:.9fr 1.1fr; gap:56px; align-items:center; }
.about-photo img { border-radius:var(--radius-lg); box-shadow:var(--shadow); width:100%; height:520px; object-fit:cover; object-position:center 20%; }
.about-text h2 { margin-bottom:18px; }
.about-badges { display:flex; gap:12px; flex-wrap:wrap; margin-top:24px; }
.badge { background:var(--charcoal); color:var(--white); padding:8px 18px; border-radius:6px; font-family:var(--head); text-transform:uppercase; letter-spacing:1px; font-size:.85rem; }
.badge.green { background:var(--green); }
.badge.orange { background:var(--orange); }

/* Testimonials */
.reviews { display:grid; grid-template-columns:repeat(2,1fr); gap:24px; }
.review { background:var(--white); border-radius:var(--radius); padding:32px; box-shadow:var(--shadow-sm); border-left:4px solid var(--orange); }
.review .stars { color:var(--orange); font-size:1.15rem; letter-spacing:2px; margin-bottom:12px; }
.review p { font-style:italic; color:var(--slate); }
.review .who { font-family:var(--head); text-transform:uppercase; letter-spacing:1px; color:var(--charcoal); font-weight:600; margin-top:8px; }

/* Contact */
.contact-grid { display:grid; grid-template-columns:1fr 1fr; gap:52px; }
.contact-info h2 { margin-bottom:18px; }
.ci-item { display:flex; gap:14px; align-items:flex-start; margin-bottom:20px; }
.ci-item .ic { font-size:1.4rem; }
.ci-item strong { font-family:var(--head); text-transform:uppercase; letter-spacing:1px; color:var(--charcoal); display:block; font-size:1.05rem; }
.ci-item span { color:var(--slate); }
form { background:var(--white); padding:38px; border-radius:var(--radius-lg); box-shadow:var(--shadow-sm); border:1px solid var(--steel); }
.fg { margin-bottom:18px; }
label { display:block; font-family:var(--head); text-transform:uppercase; letter-spacing:.5px; font-weight:600; margin-bottom:7px; color:var(--charcoal); font-size:.92rem; }
input,select,textarea { width:100%; padding:13px 15px; border:1.5px solid var(--steel); border-radius:8px; font-family:var(--body); font-size:1rem; background:var(--cloud); color:var(--ink); transition:.2s; }
input:focus,select:focus,textarea:focus { outline:none; border-color:var(--orange); background:#fff; }
textarea { resize:vertical; min-height:120px; }

/* CTA banner */
.cta { background:linear-gradient(rgba(242,107,33,.94),rgba(212,85,17,.94)), url("../images/curated/landscaping-4.jpg") center/cover; color:#fff; text-align:center; }
.cta h2 { color:#fff; margin-bottom:14px; }
.cta p { color:#fff; opacity:.95; max-width:560px; margin:0 auto 28px; font-size:1.15rem; }

/* Footer */
.site-footer { background:var(--ink); color:var(--fog); padding:56px 0 26px; }
.footer-grid { display:grid; grid-template-columns:2fr 1fr 1fr; gap:40px; margin-bottom:36px; }
.site-footer .logo { color:#fff; margin-bottom:14px; }
.site-footer h4 { color:#fff; font-family:var(--head); text-transform:uppercase; letter-spacing:1.5px; font-size:.9rem; margin-bottom:16px; }
.site-footer a { color:var(--fog); display:block; margin-bottom:9px; }
.site-footer a:hover { color:var(--orange); }
.footer-bottom { border-top:1px solid var(--charcoal-2); padding-top:22px; text-align:center; font-size:.85rem; color:var(--slate); }

/* Responsive */
@media (max-width:900px){
  .nav-links{ display:none; position:absolute; top:100%; left:0; right:0; background:var(--charcoal); flex-direction:column; gap:0; padding:8px 24px 20px; }
  .nav-links.open{ display:flex; }
  .nav-links li{ width:100%; padding:12px 0; border-bottom:1px solid var(--charcoal-2); }
  .nav-toggle{ display:block; }
  .services,.gallery,.reviews,.contact-grid,.about-grid,.footer-grid{ grid-template-columns:1fr; }
  .gallery-strip{ grid-template-columns:repeat(2,1fr); }
  .about-photo img{ height:400px; }
}

/* ---------- WPForms iframe embed ---------- */
.form-embed { background: var(--white); padding: 16px; border-radius: var(--radius); box-shadow: var(--shadow-sm); border: 1px solid var(--steel); }
.form-embed iframe { width: 100%; min-height: 720px; border: none; display: block; }