/* ============================================================
   P.A. Vine & Son — modernisation layer (Aztec Media, 2026)
   Loaded AFTER the legacy stylesheets to override the old theme.
   Fresh-green palette, modern type, flat UI. Reversible.
   ============================================================ */

:root{
  --green:#4f9d2f;          /* fresh primary */
  --green-dark:#3a7722;
  --green-deep:#2b5719;
  --charcoal:#222b25;
  --text:#39433d;
  --muted:#6b756e;
  --bg:#ffffff;
  --bg-soft:#f3f6ef;        /* pale stone-green */
  --line:#e4e9dd;
  --shadow:0 6px 24px rgba(20,40,20,.10);
  --radius:14px;
  --wrap:1160px;
}

/* ---------- Base / typography (fonts loaded via <link> in template head) ---------- */
html,body{
  font-family:'Manrope',-apple-system,BlinkMacSystemFont,'Segoe UI',Arial,sans-serif !important;
  font-size:17px !important;
  line-height:1.7 !important;
  color:var(--text) !important;
  background:var(--bg) !important;
}

h1,h2,h3,h4{
  font-family:'Sora','Manrope',Arial,sans-serif !important;
  color:var(--charcoal) !important;
  font-weight:600 !important;
  letter-spacing:-.01em !important;
  line-height:1.2 !important;
  text-transform:none !important;
}
h1{ font-size:2.3rem !important; margin-bottom:.5em !important; }
h2{ font-size:1.7rem !important; margin-bottom:.6em !important; }
h3{ font-size:1.25rem !important; }

#content p{ text-align:left !important; color:var(--text) !important; margin-bottom:1.1em !important; }
#content h1,#content h2{ text-align:left !important; }

a{ color:var(--green-dark); font-weight:500; }
a:hover{ color:var(--green-deep); text-decoration:none; }
#content a{ color:var(--green-dark); }
#content a:hover{ text-decoration:underline; }

.attribute-value{ color:var(--green-dark) !important; font-weight:600 !important; }

/* hide the old fixed Facebook tab + old badges */
a.facebook{ display:none !important; }
#header ul.logos{ display:none !important; }

/* ---------- Layout widths ---------- */
#header, #nav, #content, #footer{ max-width:var(--wrap) !important; }
#content{ padding:54px 28px 64px !important; }

/* ---------- Header ---------- */
#header-wrap{ background:#fff !important; box-shadow:0 2px 14px rgba(0,0,0,.06); position:relative; z-index:50; }
#header{ height:104px !important; display:flex; align-items:center; justify-content:center; }

#header #logo{
  background:url(../images/pa-vine-logo.png) no-repeat center !important;
  background-size:contain !important;
  width:230px !important;
  height:84px !important;
  margin:0 auto !important;
}

#header a.tel, #header a.email{
  background:none !important;
  font-family:'Manrope',sans-serif !important;
  color:var(--charcoal) !important;
  font-weight:600 !important;
  padding:0 !important;
  height:auto !important; line-height:1.4 !important;
}
#header a.tel{ left:auto !important; right:24px !important; top:38px !important; font-size:1.18rem !important; color:var(--green-dark) !important; }
#header a.tel:before{ content:"\f095"; font-family:FontAwesome; margin-right:8px; }
#header a.email{ left:24px !important; top:42px !important; font-size:.95rem !important; }
#header a.email:before{ content:"\f0e0"; font-family:FontAwesome; margin-right:8px; color:var(--green); }

/* ---------- Navigation ---------- */
#nav-container{
  background:#fff !important;
  height:auto !important;
  position:relative; z-index:60;
  border-top:1px solid var(--line);
  box-shadow:0 2px 12px rgba(0,0,0,.06);
}
#nav{ height:auto !important; display:block; padding:0 20px !important; }
#nav .standard-menu{ display:block !important; }
#nav .standard-menu ul{
  display:flex !important; flex-wrap:nowrap; justify-content:center; align-items:center;
  list-style:none; margin:0; padding:0;
}
#nav .standard-menu li{
  float:none !important; width:auto !important;
  font-family:'Sora',sans-serif !important; font-weight:500 !important;
  font-size:.95rem !important; text-transform:uppercase; letter-spacing:.03em;
}
#nav .standard-menu li a{
  background:none !important; color:var(--charcoal) !important;
  height:auto !important; line-height:1 !important;
  padding:20px 22px !important; transition:color .2s, border-color .2s;
  border-bottom:3px solid transparent;
}
#nav .standard-menu li a:hover,
#nav .standard-menu li.menuactive a{
  background:transparent !important;
  color:var(--green-dark) !important;
  border-bottom-color:var(--green) !important;
}
#nav .standard-menu li.projects, #nav .standard-menu li.contact{ float:none !important; }

/* ---------- Header container: kill legacy 50%/100% height (top whitespace) ---------- */
#header-container{ height:auto !important; min-height:0 !important; }
#patios-driveways #header-container{ position:relative; height:auto !important; }
#content-arrow{ display:none !important; }

.hero-carousel{ position:relative; width:100%; background:#1d2a17; }
.hero-carousel .splide__track{ min-height:520px; }
.hero-carousel .splide__slide img{ width:100%; height:100%; object-fit:cover; }
.hero-carousel:after{   /* readability overlay */
  content:""; position:absolute; inset:0; z-index:2; pointer-events:none;
  background:linear-gradient(180deg,rgba(15,28,10,.28),rgba(15,28,10,.58));
}
.hero-caption{
  position:absolute; z-index:5; left:0; right:0; top:50%;
  transform:translateY(-50%); text-align:center; color:#fff; padding:0 24px;
  pointer-events:none;
}
.hero-caption h2{
  color:#fff !important; font-size:3rem !important; max-width:900px; margin:0 auto .35em !important;
  text-shadow:0 2px 20px rgba(0,0,0,.55);
}
.hero-caption p{
  color:#f3f7ef !important; font-size:1.25rem !important; max-width:640px; margin:0 auto 1.5em !important;
  text-shadow:0 1px 12px rgba(0,0,0,.6); text-align:center !important;
}
.hero-cta{ display:inline-flex; gap:14px; flex-wrap:wrap; justify-content:center; pointer-events:auto; }

/* Splide arrows + pagination, themed */
.hero-carousel .splide__arrow{
  width:54px; height:54px; background:rgba(255,255,255,.92); opacity:1; z-index:6;
  box-shadow:0 4px 16px rgba(0,0,0,.3);
}
.hero-carousel .splide__arrow:hover{ background:var(--green); }
.hero-carousel .splide__arrow svg{ fill:var(--green-deep); width:20px; height:20px; transition:fill .2s; }
.hero-carousel .splide__arrow:hover svg{ fill:#fff; }
.hero-carousel .splide__arrow--prev{ left:24px; }
.hero-carousel .splide__arrow--next{ right:24px; }
.hero-carousel .splide__pagination{ bottom:18px; z-index:6; }
.hero-carousel .splide__pagination__page{ background:rgba(255,255,255,.65); }
.hero-carousel .splide__pagination__page.is-active{ background:var(--green); transform:scale(1.3); }
.btn{
  display:inline-block; font-family:'Sora',sans-serif; font-weight:600;
  font-size:1rem; padding:14px 30px; border-radius:50px; cursor:pointer;
  text-decoration:none !important; transition:transform .15s, background .2s, box-shadow .2s;
  border:2px solid transparent;
}
.btn-primary{ background:var(--green); color:#fff !important; box-shadow:0 6px 20px rgba(79,157,47,.4); }
.btn-primary:hover{ background:var(--green-dark); transform:translateY(-2px); color:#fff !important; }
.btn-ghost{ background:rgba(255,255,255,.12); color:#fff !important; border-color:rgba(255,255,255,.7); }
.btn-ghost:hover{ background:#fff; color:var(--green-deep) !important; }

/* keep scroll-down arrow subtle/hidden on modern hero */
#content-arrow{ display:none !important; }

/* ---------- Section intro ---------- */
.section-intro{ text-align:center; max-width:760px; margin:0 auto 40px; }
.section-intro h1,.section-intro h2{ text-align:center !important; }
.section-intro p{ text-align:center !important; color:var(--muted) !important; font-size:1.08rem !important; }
.eyebrow{
  display:inline-block; font-family:'Sora',sans-serif; font-weight:600;
  text-transform:uppercase; letter-spacing:.12em; font-size:.78rem;
  color:var(--green-dark); margin-bottom:.6em;
}

/* ---------- Homepage feature tiles (#features GCB) ---------- */
#features{
  display:grid !important; grid-template-columns:repeat(4,1fr); gap:22px;
  margin:50px 0 10px !important; list-style:none; padding:0;
}
#features li{
  display:block !important; height:auto !important; max-width:none !important; width:auto !important;
  background:var(--bg-soft) !important; border:1px solid var(--line);
  border-radius:var(--radius); padding:30px 22px !important; text-align:center;
  transition:transform .2s, box-shadow .2s; float:none !important;
}
#features li:hover{ transform:translateY(-4px); box-shadow:var(--shadow); }
#features li a{
  background:none !important; color:var(--charcoal) !important; display:block !important;
  height:auto !important; line-height:1.3 !important; font-family:'Sora',sans-serif !important;
  font-size:1.1rem !important; text-transform:none !important; padding:0 !important; max-width:none !important;
}
#features li .fi-ico{ font-size:2.1rem; color:var(--green); margin-bottom:14px; display:block; }
#features li .fi-desc{ display:block; font-family:'Manrope',sans-serif; font-weight:400; font-size:.92rem; color:var(--muted); margin-top:8px; }

/* ---------- CTA band (#which GCB) ---------- */
#which{ background:none !important; }
.cta-band{
  position:relative; overflow:hidden; color:#fff;
  margin:0; padding:120px 40px; min-height:460px;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:26px; text-align:center;
  background:url(/uploads/images/portfolio/12.jpg) center/cover no-repeat; background-attachment:fixed;
}
.cta-band:before{
  content:""; position:absolute; inset:0;
  background:linear-gradient(120deg,rgba(43,87,25,.74),rgba(36,73,26,.66));
}
.cta-band > *{ position:relative; z-index:2; }
.cta-band .cta-text{ max-width:760px; }
.cta-band h3{ color:#fff !important; font-size:2.6rem !important; margin:0; text-shadow:0 2px 16px rgba(0,0,0,.45); }
.cta-band p{ color:#eef7e8 !important; margin:.5em 0 0 !important; text-align:center !important; font-size:1.2rem !important; text-shadow:0 1px 12px rgba(0,0,0,.45); }
.cta-band .btn{ font-size:1.1rem; padding:16px 38px; }
.cta-band .btn-primary{ background:#fff; color:var(--green-deep) !important; box-shadow:0 6px 20px rgba(0,0,0,.3); }
.cta-band .btn-primary:hover{ background:var(--charcoal); color:#fff !important; }

/* ---------- Services grid (What We Do) ---------- */
.svc-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; margin:10px 0 20px; list-style:none; padding:0; }
.svc-card{
  background:#fff; border:1px solid var(--line); border-radius:var(--radius);
  padding:30px 26px; transition:transform .2s, box-shadow .2s;
}
.svc-card:hover{ transform:translateY(-4px); box-shadow:var(--shadow); }
.svc-card .svc-ico{ font-size:1.9rem; color:var(--green); margin-bottom:14px; display:block; }
.svc-card h3{ margin:0 0 .4em; }
.svc-card p{ text-align:left !important; color:var(--muted) !important; font-size:.96rem !important; margin:0 !important; }
.svc-card ul{ margin:.5em 0 0; padding-left:1.1em; }
.svc-card li{ color:var(--text); font-size:.95rem; margin-bottom:.25em; }

/* ---------- Projects gallery ---------- */
.gallery-grid{
  display:grid; grid-template-columns:repeat(4,1fr); gap:16px; list-style:none; padding:0; margin:0;
}
.gallery-grid li{ margin:0; }
.gallery-grid a{
  display:block; border-radius:var(--radius); overflow:hidden; position:relative;
  aspect-ratio:1/1; box-shadow:0 2px 10px rgba(0,0,0,.08); cursor:pointer;
}
.gallery-grid img{
  width:100%; height:100%; object-fit:cover; display:block;
  transition:transform .45s ease;
}
.gallery-grid a:after{
  content:"\f00e"; font-family:FontAwesome; position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center; color:#fff; font-size:1.6rem;
  background:rgba(43,87,25,.0); opacity:0; transition:.3s;
}
.gallery-grid a:hover img{ transform:scale(1.08); }
.gallery-grid a:hover:after{ opacity:1; background:rgba(43,87,25,.45); }

/* lightbox */
.pv-lb{ position:fixed; inset:0; background:rgba(15,20,12,.92); display:none; align-items:center; justify-content:center; z-index:9999; }
.pv-lb.open{ display:flex; }
.pv-lb img{ max-width:92vw; max-height:88vh; border-radius:8px; box-shadow:0 10px 50px rgba(0,0,0,.6); }
.pv-lb .pv-close,.pv-lb .pv-prev,.pv-lb .pv-next{
  position:absolute; color:#fff; font-size:2rem; cursor:pointer; user-select:none;
  width:54px; height:54px; display:flex; align-items:center; justify-content:center;
  background:rgba(255,255,255,.08); border-radius:50%; transition:background .2s;
}
.pv-lb .pv-close:hover,.pv-lb .pv-prev:hover,.pv-lb .pv-next:hover{ background:var(--green); }
.pv-lb .pv-close{ top:22px; right:26px; }
.pv-lb .pv-prev{ left:26px; top:50%; transform:translateY(-50%); }
.pv-lb .pv-next{ right:26px; top:50%; transform:translateY(-50%); }

/* ---------- Contact form ---------- */
.contactform{
  max-width:680px; margin:0 auto 10px; background:var(--bg-soft);
  border:1px solid var(--line); border-radius:18px; padding:40px 40px 36px;
}
.contactform form > div{ margin:0; }
.contactform form > div > div{ margin-bottom:30px; text-align:left !important; }
.contactform label{
  display:block; color:var(--charcoal) !important; text-transform:none !important;
  font-family:'Sora',sans-serif !important; font-weight:600 !important; font-size:.95rem !important;
  text-align:left !important; margin-bottom:20px !important; line-height:1.3 !important; width:auto;
}
.contactform input, .contactform textarea{
  width:100% !important; max-width:none !important; background:#fff !important;
  border:1.5px solid var(--line) !important; border-radius:10px !important;
  color:var(--text) !important; text-align:left !important;
  font-family:'Manrope',sans-serif !important; font-size:1rem !important; padding:14px 16px !important;
  margin:0 !important; box-sizing:border-box;
}
.contactform textarea{ min-height:150px !important; height:auto !important; resize:vertical; }
.contactform input:focus, .contactform textarea:focus{ outline:none; border-color:var(--green) !important; box-shadow:0 0 0 3px rgba(79,157,47,.15); }
.contactform .captcha{ margin:6px 0 26px; }
.contactform .captcha p{ margin:14px 0 0 !important; font-size:.9rem !important; color:var(--muted) !important; text-align:left !important; }
.contactform .submit{ margin-top:10px; text-align:left !important; }
.submit input, .return-link{
  background:var(--green) !important; color:#fff !important; border:none !important; border-radius:50px !important;
  font-family:'Sora',sans-serif !important; font-weight:600 !important; font-size:1.05rem !important; text-transform:none !important;
  width:auto !important; min-width:200px; height:auto !important; line-height:1 !important; padding:16px 40px !important;
  box-shadow:0 6px 18px rgba(79,157,47,.35); cursor:pointer; transition:background .2s, transform .15s;
}
.submit input:hover, .return-link:hover{ background:var(--green-dark) !important; transform:translateY(-2px); }
.form-error{ background:#b3261e !important; color:#fff !important; border-radius:8px; padding:8px 12px; margin-top:8px; width:auto !important; font-size:.9rem; }
.error_message{ display:block !important; background:#fdeeee; border:1px solid #f3c2c2; color:#7a1c16; border-radius:10px; padding:14px 16px; margin-bottom:22px; }
.error_message li{ text-align:left !important; color:#7a1c16 !important; }

#contact-info{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
#contact-info li{
  background:var(--bg-soft) !important; border:1px solid var(--line); border-radius:var(--radius) !important;
  min-height:auto !important; max-width:none !important; padding:26px 20px !important; font-size:.98rem !important;
  display:flex; flex-direction:column; align-items:center; text-align:center;
}
#contact-info li i{ color:var(--green) !important; margin-bottom:10px !important; }
#contact-info li a{ color:var(--green-dark) !important; }

/* ---------- Footer ---------- */
#footer-container{ background:var(--charcoal) !important; height:auto !important; padding:0; }
#footer{ height:auto !important; padding:0 24px; }
.foot-top{
  display:grid; grid-template-columns:1.5fr 1.1fr .9fr; gap:34px;
  padding:52px 0 34px; border-bottom:1px solid rgba(255,255,255,.1);
}
.foot-col{ display:flex; flex-direction:column; gap:11px; }
.foot-name{ font-family:'Sora',sans-serif; font-weight:700; font-size:1.35rem; color:#fff; }
.foot-tag{ color:#9fb098; font-size:.93rem; line-height:1.55; max-width:320px; }
.foot-col a, .foot-col span{ color:#cfe0c6 !important; font-size:.95rem; font-weight:400; }
.foot-contact a, .foot-contact span{ display:flex; align-items:center; gap:10px; }
.foot-contact i{ color:var(--green) !important; width:16px; text-align:center; }
.foot-nav a{ font-family:'Sora',sans-serif; text-transform:uppercase; letter-spacing:.05em; font-size:.84rem; font-weight:500; }
.foot-col a:hover{ color:#fff !important; }
.foot-bottom{
  display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:10px;
  padding:20px 0; font-size:.82rem; color:#8fa088;
}
.foot-bottom a{ color:#9fb098 !important; }
.foot-bottom a:hover{ color:#fff !important; }
.foot-legal i{ color:#56664f; font-style:normal; margin:0 5px; }

/* ---------- Responsive ---------- */
@media (max-width:900px){
  #features{ grid-template-columns:repeat(2,1fr) !important; }
  .svc-grid{ grid-template-columns:repeat(2,1fr); }
  .gallery-grid{ grid-template-columns:repeat(3,1fr); }
  #contact-info{ grid-template-columns:1fr; }
  .hero-caption h2{ font-size:2.1rem !important; }
}
@media (max-width:680px){
  /* mobile nav: show toggle, stack menu */
  #nav{ display:block; }
  #nav .menu{ display:block !important; color:var(--charcoal); font-family:'Sora',sans-serif; font-weight:600;
    text-transform:uppercase; letter-spacing:.05em; padding:16px 0; cursor:pointer; text-align:center; }
  #nav .menu:after{ content:"\f0c9"; font-family:FontAwesome; margin-left:10px; color:var(--green); }
  #nav .standard-menu{ display:none !important; }
  #nav .mobile-menu{ width:100%; }
  #nav .mobile-menu ul{ list-style:none; padding:0; margin:0; }
  #nav .mobile-menu li a{ display:block; color:var(--charcoal); padding:13px 16px; border-top:1px solid var(--line);
    font-family:'Sora',sans-serif; text-transform:uppercase; font-size:.9rem; text-align:center; }
  #nav .mobile-menu li a:hover{ background:var(--bg-soft); color:var(--green-dark); }
  #features{ grid-template-columns:1fr !important; }
  .svc-grid{ grid-template-columns:1fr; }
  .gallery-grid{ grid-template-columns:repeat(2,1fr); }
  #content{ padding:36px 18px 48px !important; }
  .hero-caption h2{ font-size:1.7rem !important; }
  .hero-caption p{ font-size:1rem !important; }
  .hero-carousel .splide__track{ min-height:400px; }
  .hero-carousel .splide__arrow{ width:42px; height:42px; }
  .hero-carousel .splide__arrow--prev{ left:10px; }
  .hero-carousel .splide__arrow--next{ right:10px; }
  .cta-band{ padding:72px 24px; min-height:360px; background-attachment:scroll; }
  .cta-band h3{ font-size:1.9rem !important; }
  .foot-top{ grid-template-columns:1fr; gap:26px; text-align:center; padding:40px 0 28px; }
  .foot-col{ align-items:center; }
  .foot-tag{ max-width:none; }
  .foot-bottom{ flex-direction:column; text-align:center; }
}

/* ===== Contact form spacing — authoritative override (real FormBuilder DOM) =====
   Fields live in: #content .contactform > form > div.contactform > fieldset > div.required
   Higher specificity (#content + .contactform) so nothing in the legacy theme wins. */
#content .contactform fieldset{ border:0 !important; padding:0 !important; margin:0 !important; }
#content .contactform fieldset > div{ margin:0 0 28px 0 !important; }
#content .contactform label{ display:block !important; margin:0 0 12px 0 !important; line-height:1.35 !important; width:auto !important; }
#content .contactform input,
#content .contactform textarea{ margin:0 !important; }
#content .contactform .captcha{ margin:6px 0 26px !important; }
#content .contactform .submit{ margin-top:8px !important; }