/* ==========================================================
   BRAND COLOURS — swap these two for Arrow Turf's real hex
   ========================================================== */
:root{
  --brand:      #2C6E3F;
  --brand-deep: #1B4428;

  --ink:        #16301F;
  --ink-soft:   #4A5C50;
  --ink-faint:  #7C8A81;
  --clay:       #8E4B24;
  --paper:      #F4F6F1;
  --paper-2:    #FFFFFF;
  --line:       #DCE3D8;
  --line-soft:  #E9EEE5;
  --tint:       #E7F0E6;

  --display:"Bricolage Grotesque",system-ui,sans-serif;
  --body:"Instrument Sans",system-ui,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,monospace;
  --wrap:1420px; 
  --r:10px;
}
*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{ margin:0; background:var(--paper); color:var(--ink); font-family:var(--body); font-size:17px; line-height:1.6; -webkit-font-smoothing:antialiased; }
img{ max-width:100%; display:block; }
a{ color:inherit; }
h1,h2,h3{ font-family:var(--display); font-weight:800; line-height:1.05; letter-spacing:-0.025em; margin:0; }
h2{ font-size:clamp(1.7rem,3.4vw,2.6rem); }
h3{ font-size:1.05rem; font-weight:600; letter-spacing:-0.01em; }
p{ margin:0 0 1rem; }
.wrap{ max-width:var(--wrap); margin:0 auto; padding:0 24px; }
.eyebrow{ font-family:var(--mono); font-size:.7rem; letter-spacing:.14em; text-transform:uppercase; color:var(--brand); margin:0 0 .7rem; }
:focus-visible{ outline:3px solid var(--clay); outline-offset:3px; border-radius:4px; }
.sr{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); }

.btn{ display:inline-flex; align-items:center; gap:.5rem; cursor:pointer; font-family:var(--body); font-size:1rem; font-weight:600; padding:.9rem 1.5rem; border-radius:var(--r); border:1.5px solid transparent; text-decoration:none; transition:background .15s,color .15s,transform .1s; }
.btn:active{ transform:translateY(1px); }
.btn-primary{ background:var(--brand); color:#fff !important; }
.btn-primary:hover{ background:var(--ink);  color: var(--brand); }
.btn-ghost{ border-color:var(--ink); color:var(--ink); background: #fff; }
.btn-ghost:hover{ background:var(--ink); color:var(--paper); }
.btn-light{ background:#fff; color:var(--ink); }
.btn-light:hover{ background:var(--tint); }
.btn-outline-light{ border-color:rgba(255,255,255,.65); color:#fff; }
.btn-outline-light:hover{ background:#fff; color:var(--ink); }

/* ---------- HERO: image is the argument, form is the ask ---------- */
.hero{ position:relative; overflow:hidden; }
.hero > img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.hero-in{ position:relative; z-index:2; padding:clamp(2.5rem,6vw,4.5rem) 0; }
.hero-grid{ display:grid; grid-template-columns:1.15fr .85fr; gap:clamp(2rem,5vw,4rem); align-items:center; }
@media (max-width:960px){ .hero-grid{ grid-template-columns:1fr; gap:2rem; } }
.hero h1{
  color:#fff; font-size:clamp(2.2rem,4.6vw,3.7rem); max-width:15ch;
  text-shadow:0 2px 18px rgba(11,26,16,.55), 0 1px 3px rgba(11,26,16,.4);
}
.hero .eyebrow{ color:#fff; text-shadow:0 1px 8px rgba(11,26,16,.6); }
.hero-lede{
  color:#fff; font-size:clamp(1rem,1.4vw,1.15rem); max-width:48ch; margin:1.1rem 0 0;
  text-shadow:0 1px 12px rgba(11,26,16,.6), 0 1px 3px rgba(11,26,16,.45);
}
/* hero CTAs — sized and coloured to be seen first */
.hero-cta{ display:flex; gap:.85rem; flex-wrap:wrap; margin-top:1.9rem; }
.hero-cta .btn{
  padding:1.1rem 2.2rem; font-size:1.38rem; letter-spacing:-0.01em;
  min-width:220px; justify-content:center; border-radius:8px;
  box-shadow:0 10px 26px rgba(11,26,16,.32);
  transition:transform .16s ease, box-shadow .16s ease, background .16s ease, color .16s ease;
}
.hero-cta .btn:hover{ transform:translateY(-3px); box-shadow:0 16px 36px rgba(11,26,16,.4); }
.hero-cta .btn:active{ transform:translateY(-1px); }
.hero-cta .btn svg{ flex:none; }
.hero-cta .btn-light{ border-color:#fff; }
@media (max-width:520px){
  .hero-cta{ flex-direction:column; gap:.65rem; }
  .hero-cta .btn{ width:100%; min-width:0; }
}

/* hero form */
.hero-form{ background:var(--paper-2); border-radius:var(--r); overflow:hidden; box-shadow:0 18px 50px rgba(0,0,0,.28); }
.hero-form .body{ padding:1.4rem; }
.hero-form h2{ font-size:2rem; text-align:center; }
.hero-form .sub{ font-size:.82rem; color:var(--ink-soft); margin:.25rem 0 1rem; text-align:center; }
.hf-row{ margin-bottom:.65rem; }
.hf-row label{ display:block; font-size:.74rem; font-weight:600; margin-bottom:.25rem; color:var(--ink-soft); }
.hf-row input,.hf-row select,.hf-row textarea{
  width:100%; font-family:var(--body); font-size:.95rem; padding:.6rem .75rem;
  border:1.5px solid var(--line); border-radius:6px; background:var(--paper); color:var(--ink);
}
.hf-row input:focus,.hf-row select:focus,.hf-row textarea:focus{ border-color:var(--brand); outline:none; }
.hf-row textarea{ min-height:64px; resize:vertical; }
.hf-2{ display:grid; grid-template-columns:1fr 1fr; gap:.65rem; }
@media (max-width:420px){ .hf-2{ grid-template-columns:1fr; gap:0; } }
.hero-form .btn{ width:100%; justify-content:center; margin-top:.4rem; }
.hf-note{ font-size:.72rem; color:var(--ink-faint); margin:.7rem 0 0; text-align:center; }
.hf-note a{ color:var(--brand); font-weight:600; text-decoration:none; }
.hf-note a:hover{ text-decoration:underline; }

/* ---------- fact strip: 3 short lines ---------- */
.facts{ background:var(--ink); color:#fff; }
.facts .wrap{
  display:grid; grid-template-columns:repeat(3,1fr); gap:0;
  padding-top:clamp(1.8rem,3.4vw,2.6rem); padding-bottom:clamp(1.8rem,3.4vw,2.6rem);
}
.fact{ text-align:center; padding:.2rem clamp(.8rem,2vw,1.8rem); border-right:1px solid rgba(255,255,255,.14); }
.fact:last-child{ border-right:0; }
.fact .k{
  display:block; font-family:var(--display); font-size:clamp(1.3rem,2.1vw,1.75rem);
  font-weight:800; letter-spacing:-0.025em; line-height:1.15; color:#fff;
}
.fact .v{ display:block; font-size:clamp(.84rem,1.1vw,.95rem); color:#9FD3AE; margin-top:.35rem; }
@media (max-width:760px){
  .facts .wrap{ grid-template-columns:1fr; }
  .fact{ border-right:0; border-bottom:1px solid rgba(255,255,255,.14); padding:1rem 0; }
  .fact:last-child{ border-bottom:0; }
}

section{ padding:clamp(2.8rem,5vw,4.2rem) 0; }
.head{ display:flex; justify-content:space-between; align-items:flex-end; gap:1.5rem; margin-bottom:1.6rem; flex-wrap:wrap; }
.head h2{ max-width:20ch; }
.head-p{ color:var(--ink-soft); font-size:clamp(1rem,1.4vw,1.15rem); margin:.8rem 0 0; max-width:66ch; }
.head-p a:hover{ color:var(--brand-deep); }
.head.center{ display:block; text-align:center; margin-bottom:clamp(2.2rem,4.5vw,3.2rem); }
.head.center h2{ max-width:none; }
.head.center .head-p{ max-width:none; }

/* ---------- GALLERY: the real hero of the page ---------- */
.mosaic{ display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
.mosaic figure{
  margin:0; position:relative; overflow:hidden; border-radius:8px;
  background:var(--tint); aspect-ratio:4/3;
}
.mosaic img{ width:100%; height:100%; object-fit:cover; transition:transform .5s ease; }
.mosaic figure:hover img{ transform:scale(1.05); }
@media (max-width:900px){ .mosaic{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:520px){ .mosaic{ grid-template-columns:1fr; } .mosaic figure{ aspect-ratio:16/10; } }
.mosaic figure.is-hidden{ display:none; }
.mosaic-more{ display:flex; justify-content:center; margin-top:1.4rem; }
.section-cta{ display:flex; justify-content:center; margin-top:1.8rem; }
.inline-cta{ margin-top:1.5rem; }

/* ---------- varieties: image tiles, name only ---------- */
.tiles{ display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:12px; }
.tile{ position:relative; display:block; border-radius:8px; overflow:hidden; text-decoration:none; min-height:390px; background:var(--tint); }
.tile img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform .5s ease; }
.tile::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(to top, rgba(11,26,16,.85) 0%, rgba(11,26,16,.15) 55%, transparent 100%);
  transition:background .35s ease;
}
.tile:hover::after, .tile:focus-visible::after{
  background:linear-gradient(to top, rgba(11,26,16,.93) 0%, rgba(11,26,16,.82) 55%, rgba(11,26,16,.62) 100%);
}
.tile:hover img{ transform:scale(1.06); }
.tile-in{ position:absolute; z-index:2; left:0; right:0; bottom:0; padding:1.1rem 1.2rem; color:#fff; }
.tile-in h3{ color:#fff; font-size:1.15rem; }
.tile-in .for{ font-family:var(--mono); font-size:.64rem; letter-spacing:.11em; text-transform:uppercase; color:#9FD3AE; margin-bottom:.3rem; }
.tile-in p{
  font-size:.86rem; color:#D6E4DA; margin:.5rem 0 0;
  max-height:0; opacity:0; overflow:hidden; transition:max-height .4s ease, opacity .3s ease; line-height: 32px;
}
.tile:hover .tile-in p, .tile:focus-visible .tile-in p{ max-height:18rem; opacity:1; }

/* touch devices have no hover — show the full card instead of an overlay */
@media (hover:none){
  .tile{ min-height:0; background:var(--paper-2); border:1px solid var(--line); }
  .tile img{ position:relative; inset:auto; height:200px; }
  .tile::after{ display:none; }
  .tile-in{ position:relative; padding:1rem 1.1rem 1.2rem; }
  .tile-in h3{ color:var(--ink); }
  .tile-in .for{ color:var(--clay); }
  .tile-in p{ max-height:none; opacity:1; color:var(--ink-soft); }
}

/* ---------- split with disclosure ---------- */
.split{ display:grid; grid-template-columns:1.1fr .9fr; gap:clamp(1.5rem,4vw,3rem); align-items:center; }
.split.rev{ grid-template-columns:.9fr 1.1fr; }
@media (max-width:860px){ .split,.split.rev{ grid-template-columns:1fr; } }
.split img{ border-radius:8px; width:100%; height:clamp(340px,44vw,520px); object-fit:cover; background:var(--tint); }
.split p{ color:var(--ink-soft); }
.more-text{ max-height:0; overflow:hidden; opacity:0; transition:max-height .45s ease, opacity .3s ease; }
.more-text.open{ max-height:40rem; opacity:1; }
#faq-more.open{ max-height:none; }
.more-btn{
  background:none; border:0; cursor:pointer; padding:0; font-family:var(--mono);
  font-size:.94rem; letter-spacing:.1em; text-transform:uppercase; color:var(--brand); font-weight:500; margin-top: 20px;
}
.more-btn:hover{ text-decoration:underline; color:var(--brand); }

/* ---------- why: headings visible, body on demand ---------- */
/* ---------- why choose us: cards ---------- */
.why{ display:grid; grid-template-columns:repeat(auto-fit,minmax(232px,1fr)); gap:16px; }
.why-i{
  background:var(--paper-2); border:1px solid var(--line); border-radius:14px;
  padding:2.1rem 1.5rem 1.9rem; text-align:center;
  transition:border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.why-i:hover{ border-color:var(--brand); transform:translateY(-4px); box-shadow:0 16px 38px rgba(22,48,31,.09); }
.why-ico{
  width:58px; height:58px; border-radius:50%; background:var(--tint);
  display:flex; align-items:center; justify-content:center;
  margin:0 auto 1.2rem; color:var(--brand);
  transition:background .2s ease, color .2s ease;
}
.why-i:hover .why-ico{ background:var(--brand); color:#fff; }
.why-ico svg{ width:26px; height:26px; }
.why-i h3{ margin-bottom:.6rem; }
.why-i p{ font-size:.9rem; color:var(--ink-soft); margin:0; line-height:1.65; }
.faq{ max-width:880px; margin-left:auto; margin-right:auto; }

/* ---------- faq ---------- */
/* ---------- faq accordion ---------- */
details{
  background:var(--paper); border:1px solid var(--line); border-radius:12px;
  margin-bottom:10px; padding:0 1.3rem;
  transition:border-color .2s ease, background .2s ease, box-shadow .2s ease;
}
details:hover{ border-color:var(--brand); }
details[open]{ background:var(--paper-2); border-color:var(--brand); box-shadow:0 10px 30px rgba(22,48,31,.07); }
summary{
  cursor:pointer; list-style:none; padding:1.15rem 0; font-weight:600; font-size:1rem;
  display:flex; justify-content:space-between; gap:1.2rem; align-items:center;
}
summary::-webkit-details-marker{ display:none; }
summary::after{
  content:"+"; display:flex; align-items:center; justify-content:center;
  width:30px; height:30px; border-radius:50%; flex:none;
  background:var(--tint); color:var(--brand);
  font-family:var(--mono); font-size:1.15rem; line-height:1; padding-bottom:2px;
  transition:background .2s ease, color .2s ease;
}
details:hover summary::after{ background:var(--brand); color:#fff; }
details[open] summary::after{ content:"–"; background:var(--brand); color:#fff; }
details p{
  color:var(--ink-soft); font-size:.94rem; line-height:1.7;
  padding:0 0 1.25rem; margin:0; max-width:72ch;
  border-top:1px solid var(--line-soft); padding-top:1.1rem;
}
.faq-toggle{ margin-top:1.6rem; text-align:center; }

/* ---------- contact ---------- */
#contact{ background:var(--brand); }
#contact h2{ color:#fff; }
#contact .eyebrow{ color:#B4DCBF; }
#contact .head-p{ color:#DCEBE0; }
#contact .crow:hover{ border-color:var(--ink); }
.contact{ display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(1.2rem,2.5vw,1.6rem); align-items:start; }
@media (max-width:860px){ .contact{ grid-template-columns:1fr; } }
.form-card{ background:var(--paper-2); border:1px solid var(--line); border-radius:14px; padding:clamp(1.5rem,3vw,2.1rem); }
.f2{ display:grid; grid-template-columns:1fr 1fr; gap:.8rem; }
@media (max-width:420px){ .f2{ grid-template-columns:1fr; gap:0; } }
.frow label{ display:block; font-size:.78rem; font-weight:600; color:var(--ink-soft); }
.frow input,.frow textarea,.frow select{ width:100%; font-family:var(--body); font-size:1rem; padding:.8rem .9rem; border:1.5px solid var(--line) !important; border-radius:8px; background:var(--paper); color:var(--ink); }
.frow input:focus,.frow textarea:focus,.frow select:focus{ border-color:var(--brand); outline:none; }
.frow textarea{ min-height:100px; resize:vertical; height: 80px; }
.form-card .btn{ width:100% !important; justify-content:center; margin-top:.4rem; border-radius: 10px !important; padding: 1.2rem 5.5rem !important;}
.fnote{ font-size:.76rem; color:var(--ink-faint); margin:.85rem 0 0; text-align:center; }
.form-card .btn:hover {
    background: var(--ink);
}

.contact-side{ display:flex; flex-direction:column; gap:10px; }
.crow{
  display:flex; align-items:center; gap:14px; text-decoration:none;
  background:var(--paper-2); border:1px solid var(--line); border-radius:12px;
  padding:1.05rem 1.2rem; transition:border-color .2s ease, transform .2s ease;
}
.crow:hover{ border-color:var(--brand); transform:translateY(-2px); }
.crow-ico{
  width:44px; height:44px; border-radius:50%; background:var(--tint); color:var(--brand);
  display:flex; align-items:center; justify-content:center; flex:none;
  transition:background .2s ease, color .2s ease;
}
.crow:hover .crow-ico{ background:var(--brand); color:#fff; }
.crow-ico svg{ width:20px; height:20px; }
.crow-k{ display:block; font-family:var(--mono); font-size:.62rem; letter-spacing:.13em; text-transform:uppercase; color:var(--brand); }
.crow-v{ display:block; font-size:1rem; font-weight:500; margin-top:.15rem; }
.map{ border:0; width:100%; height:300px; border-radius:12px; margin-top:4px; }

.callbar{ display:none; }
@media (max-width:640px){
  .callbar{ display:flex; position:fixed; bottom:0; left:0; right:0; z-index:90; background:var(--brand); }
  .callbar a{ flex:1; text-align:center; padding:.9rem; color:#fff; text-decoration:none; font-weight:600; font-size:.95rem; }
  .callbar a+a{ border-left:1px solid rgba(255,255,255,.25); }
  body{ padding-bottom:56px; }
}

.more-btn:active, .more-btn:focus {
    background: transparent !important;
    color: var(--brand) !important; 
}

.rv{ opacity:0; transform:translateY(16px); transition:opacity .6s ease, transform .6s ease; }
.rv.in{ opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce){ *{ animation:none!important; transition:none!important; } .rv{ opacity:1; transform:none; } html{ scroll-behavior:auto; } }

/* ---------- band helpers (replaces the mockup's inline styles) ---------- */
.band-white{ background:var(--paper-2); }
.band-white-top{ background:var(--paper-2); border-top:1px solid var(--line); }
.rte p{ margin:0 0 1rem; color:var(--ink-soft); }
.rte p:last-child{ margin-bottom:0; }
.head-p p{ margin:0; }
.head-p p + p{ margin-top:.6rem; }

/* CF7 inside the styled cards */
.hero-form .wpcf7 form.wpcf7-form,
.form-card .wpcf7 form.wpcf7-form{ margin:0; }
.hero-form .wpcf7 .wpcf7-not-valid-tip,
.form-card .wpcf7 .wpcf7-not-valid-tip{ font-size:.78rem; color:var(--text-danger,#A32D2D); margin-top:.3rem; }
.hero-form .wpcf7 .wpcf7-response-output,
.form-card .wpcf7 .wpcf7-response-output{ margin:1rem 0 0; padding:.7rem .9rem; border-radius:8px; font-size:.85rem; border-width:1px; }
.hero-form .wpcf7 .wpcf7-spinner,
.form-card .wpcf7 .wpcf7-spinner{ margin:0 auto; display:block; }

/* ==========================================================
   v33 SITE HEADER — replaces the theme header on the homepage.
   The theme masthead is hidden; the .atf-nav bar is styled to
   match the v33 design. Scoped to .atf-nav so it never affects
   the rest of the site.
   ========================================================== */

/* Hide the theme's own header on this template */
/* Hide the theme header on ALL pages; the shared .atf-nav replaces it site-wide */
#masthead,
.site-header{
  display: none !important;
}

/* v33 nav bar */
.atf-nav{
  background: var(--paper);
  border-bottom: 1px solid var(--line);
  position: sticky;
  top: 0;
  z-index: 60;
}
.atf-nav .wrap{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  height: 70px;
}
.atf-nav .logo img{
  height: 40px;
  width: auto;
}
.atf-nav .navlinks{
  display: flex;
  gap: 1.4rem;
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: .93rem;
  font-weight: 500;
  align-items: center;
}
.atf-nav .navlinks li{ position: relative; margin: 0; }
.atf-nav .navlinks a{
  display: inline-block;
  text-decoration: none;
  color: var(--ink);
  padding: .3rem 0;
  border-bottom: 2px solid transparent;
  line-height: 1.2;
}
.atf-nav .navlinks a:hover{ border-bottom-color: var(--brand); }
/* submenus */
.atf-nav .navlinks ul{
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 220px;
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-radius: 10px;
  box-shadow: 0 14px 34px rgba(22,48,31,.12);
  padding: .5rem;
  margin: .6rem 0 0;
  list-style: none;
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: opacity .15s ease, transform .15s ease, visibility .15s;
  z-index: 70;
}
.atf-nav .navlinks li:hover > ul,
.atf-nav .navlinks li:focus-within > ul{
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.atf-nav .navlinks ul a{
  display: block;
  padding: .5rem .7rem;
  border-radius: 6px;
  border-bottom: 0;
  white-space: nowrap;
  font-weight: 500;
}
.atf-nav .navlinks ul a:hover{
  background: var(--tint);
  border-bottom: 0;
}
/* parent items with a submenu get a caret */
.atf-nav .navlinks .menu-item-has-children > a::after{
  content: "";
  display: inline-block;
  width: .42em;
  height: .42em;
  margin-left: .4em;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
}
.atf-nav .navcta{
  display: flex;
  align-items: center;
  gap: .8rem;
}
.atf-nav .phone{
  font-family: var(--mono);
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
  color: var(--ink);
  font-size: 1.3rem;
}
.atf-nav .navcta .btn{
  white-space: nowrap;
}
@media (max-width: 1080px){
  .atf-nav .navlinks{ display: none; }
}
@media (max-width: 520px){
  .atf-nav .phone{ display: none; }
}

/* Hide the phone (tel:) and email (mailto:) items from the v33
   header menu — they are shown via the phone/Free quote CTA
   instead. Scoped to .atf-nav so the WordPress menu is unchanged
   elsewhere. */
.atf-nav .navlinks li.menu-item-296,
.atf-nav .navlinks li.menu-item-298{
  display: none !important;
}

/* Full-width header + larger menu text */
.atf-nav .wrap{
  max-width: 1420px;
  margin: 0 auto;
  padding-left: 24px;
  padding-right: 24px;
}
.atf-nav .navlinks{
  font-size: 1.10rem;
  gap: 1.7rem;
  text-transform: uppercase;
}
@media (max-width: 640px){
  .atf-nav .wrap{
    padding-left: 20px;
    padding-right: 20px;
  }
}

/* FULLWIDTH-CORP-CONTAINER-OVERRIDE */
body.page-template-page-arrow-turf-home .corp-container{ max-width:none !important; width:100% !important; margin:0 !important; padding:0 !important; }

/* HERO-FORM-COMPACT-FIX */
body.page-template-page-arrow-turf-home .hero-form textarea{ min-height:80px !important; height:80px !important; }
body.page-template-page-arrow-turf-home .hero-form .frow{ height:auto !important; }
body.page-template-page-arrow-turf-home .hero-form input[type=submit],
body.page-template-page-arrow-turf-home .hero-form button[type=submit]{ padding:16px 24px !important; height:auto !important; }
body.page-template-page-arrow-turf-home .hero-form label{ margin-bottom:4px !important; }

body.page-template-page-arrow-turf-home .hero-form input[type=submit]:hover {
    background:var(--ink);
    color: #ffffff; 
}

/* HERO-CTA-ICON-FIX */
body.page-template-page-arrow-turf-home .hero-cta .btn svg{ width:20px !important; height:20px !important; flex:0 0 auto !important; }
body.page-template-page-arrow-turf-home .hero-cta .btn{ white-space:nowrap !important; }

/* HERO-FORM-LABEL-SUBMIT-FIX */
body.page-template-page-arrow-turf-home .hero-form label{ line-height:1.3 !important; margin-bottom:6px !important; }
body.page-template-page-arrow-turf-home .hero-form .wpcf7-form > p{ text-align:center !important; }
body.page-template-page-arrow-turf-home .hero-form input[type=submit],
body.page-template-page-arrow-turf-home .hero-form button[type=submit]{ display:block !important; width:100% !important; justify-content:center !important; }

/* FROW-BR-HIDE-FIX */
body.page-template-page-arrow-turf-home .frow p br{ display:none; }

/* BODY-BG-PAPER-FIX */
body{ background: var(--paper) !important; }

/* FOOTER-ALIGN-CONTAINER */
body.page-template-page-arrow-turf-home .site-footer .corp-container{ max-width:1420px !important; margin:0 auto !important; padding-left:24px !important; padding-right:24px !important; }

/* HEADER-LOGO-DARKBG-FIX */
body.page-template-page-arrow-turf-home .atf-nav{ background: #1B4428 !important; }
body.page-template-page-arrow-turf-home .atf-nav .wrap{ height:80px !important; }
body.page-template-page-arrow-turf-home .atf-nav .logo img{ height:100px !important; width:auto !important; }
body.page-template-page-arrow-turf-home .atf-nav .navlinks a,
body.page-template-page-arrow-turf-home .atf-nav .phone,
body.page-template-page-arrow-turf-home .atf-nav .navcta{ color:#ffffff !important; }
body.page-template-page-arrow-turf-home .atf-nav .navlinks a:hover{ color:#DCE3D8 !important; }

/* HEADER-LOGO-80-BORDER-PAD */
body.page-template-page-arrow-turf-home .atf-nav{ border-bottom:none !important; padding-top:10px !important; padding-bottom:10px !important; }
body.page-template-page-arrow-turf-home .atf-nav .logo img{ height:80px !important; }

/* FONT-OVERRIDE-INSTRUMENT-SANS */
body.page-template-page-arrow-turf-home p,
body.page-template-page-arrow-turf-home li,
body.page-template-page-arrow-turf-home a,
body.page-template-page-arrow-turf-home input,
body.page-template-page-arrow-turf-home textarea,
body.page-template-page-arrow-turf-home input[type="submit"]{ font-family: var(--body) !important; }
body.page-template-page-arrow-turf-home h1,
body.page-template-page-arrow-turf-home h2,
body.page-template-page-arrow-turf-home h3,
body.page-template-page-arrow-turf-home h4,
body.page-template-page-arrow-turf-home h5,
body.page-template-page-arrow-turf-home h6{ font-family: var(--display) !important; }
/* keep intentional mono labels */
body.page-template-page-arrow-turf-home .eyebrow,
body.page-template-page-arrow-turf-home .sub{ font-family: var(--mono) !important; }

/* DROPDOWN-LINK-COLOR-FIX */
body.page-template-page-arrow-turf-home .atf-nav .navlinks .sub-menu a{ color:#16301F !important; }
body.page-template-page-arrow-turf-home .atf-nav .navlinks .sub-menu a:hover{ color:#2C6E3F !important; }

/* MATCH-REFERENCE-PARA-SIZES */
body.page-template-page-arrow-turf-home .corp-container p.eyebrow{ font-size:11.2px !important; }
body.page-template-page-arrow-turf-home .corp-container p{ font-size:17px !important; }
body.page-template-page-arrow-turf-home .corp-container .head-p,
body.page-template-page-arrow-turf-home .corp-container .head-p p{ font-size:clamp(1rem, 1.4vw, 1.15rem) !important; }
body.page-template-page-arrow-turf-home .corp-container .tile-in p{ font-size:13.76px !important; }
body.page-template-page-arrow-turf-home .hero .hero-lede,
body.page-template-page-arrow-turf-home p.hero-lede{ font-size:clamp(1rem, 1.4vw, 1.15rem) !important; }
body.page-template-page-arrow-turf-home .hero-form p.sub{ font-size:13.12px !important; }
body.page-template-page-arrow-turf-home .hero-form p.hf-note{ font-size:11.52px !important; }


/* HERO-FORM-MATCH-REFERENCE */
body.page-template-page-arrow-turf-home .hero-form .f2{ gap:10.4px !important; }
body.page-template-page-arrow-turf-home .hero-form .frow{ margin-bottom:10.4px !important; }
body.page-template-page-arrow-turf-home .hero-form .frow p,
body.page-template-page-arrow-turf-home .hero-form form p{ margin-bottom:0 !important; }
body.page-template-page-arrow-turf-home .hero-form label{ font-size:11.84px !important; margin-bottom:4px !important; line-height:1.6 !important; font-weight:600 !important; }
body.page-template-page-arrow-turf-home .hero-form input:not([type=submit]):not([type=hidden]),
body.page-template-page-arrow-turf-home .hero-form .wpcf7-form-control.wpcf7-text,
body.page-template-page-arrow-turf-home .hero-form input.wpcf7-form-control:not(.wpcf7-submit):not(.wpcf7-textarea){ height:40px !important; min-height:40px !important; padding:9.6px 12px !important; font-size:15.2px !important; border-radius:6px !important; border:1px solid rgb(220,227,216) !important; box-sizing:border-box !important; line-height:normal !important; background:rgb(244,246,241) !important; }
body.page-template-page-arrow-turf-home .hero-form textarea.wpcf7-form-control{ padding:9.6px 12px !important; font-size:15.2px !important; border-radius:6px !important; border:1px solid rgb(220,227,216) !important; box-sizing:border-box !important; line-height:normal !important; background:rgb(244,246,241) !important; }
body.page-template-page-arrow-turf-home .hero-form textarea.wpcf7-form-control,
body.page-template-page-arrow-turf-home .hero-form textarea.wpcf7-textarea,
body.page-template-page-arrow-turf-home .hero-form .frow textarea{ height:64px !important; min-height:64px !important; }
body.page-template-page-arrow-turf-home .hero-form .wpcf7-submit,
body.page-template-page-arrow-turf-home .hero-form button[type=submit],
body.page-template-page-arrow-turf-home .hero-form input[type=submit]{ height:auto !important; padding:14.4px 24px !important; font-size:16px !important; font-weight:600 !important; border-radius:10px !important; width:100% !important; margin-top:6.4px !important; text-transform:none !important; letter-spacing:normal !important; }


/* HTML-FONT-SIZE-RESPONSIVE */
html:has(body.page-template-page-arrow-turf-home){
  font-size: 100% !important;
}


/* ================= 3D IMAGE EFFECT (hero + split images) ================= */
/* Adds depth, layered shadows and an interactive lift/tilt */
.split img,
.hero > img{
  transform: perspective(1000px) rotateX(0deg) rotateY(0deg) translateZ(0);
  transform-style: preserve-3d;
  transition: transform .45s cubic-bezier(.2,.7,.2,1), box-shadow .45s cubic-bezier(.2,.7,.2,1);
  box-shadow: 0 18px 40px rgba(0,0,0,.28), 0 8px 16px rgba(0,0,0,.18), 0 2px 4px rgba(0,0,0,.12);
  border-radius: 10px;
  will-change: transform;
}
.split img:hover,
.hero > img:hover{
  transform: perspective(1000px) rotateX(3deg) rotateY(-5deg) translateY(-10px) translateZ(20px);
  box-shadow: 0 30px 60px rgba(0,0,0,.30), 0 12px 22px rgba(0,0,0,.20);
}

/* ============ PROJECTS + TURF VARIETIES: bottom-right drop shadow ============ */
/* Directional shadow offset to the bottom-right, no border or glow */
.mosaic figure,
.tile{
  box-shadow: 12px 12px 24px rgba(0,0,0,.28);
  transition: box-shadow .35s ease;
}
.mosaic figure:hover,
.tile:hover{
  box-shadow: 20px 20px 40px rgba(0,0,0,.38);
}

@media (prefers-reduced-motion: reduce){
  .split img, .hero > img{ transition:none; }
  .split img:hover, .hero > img:hover{ transform:none; }
}


/* ============ GOOGLE REVIEWS: no top divider, centered ============ */
#google-reviews{
  border-top: 0;
}
#google-reviews .corp-container{
  text-align: center;
}
/* center the widget itself */
#google-reviews .ti-widget{
  margin-left: auto;
  margin-right: auto;
}
/* center the row of review cards (Trustindex flex row) */
#google-reviews .ti-reviews-container-wrapper{
  justify-content: center !important;
  flex-wrap: wrap;
}


/* ================= MOBILE CENTER + HIDE BOTTOM CALLBAR ================= */
@media (max-width:760px){
  /* Center-align all homepage section content on mobile, except the FAQ */
  body.page-template-page-arrow-turf-home section:not(#faq),
  body.page-template-page-arrow-turf-home section:not(#faq) .head,
  body.page-template-page-arrow-turf-home section:not(#faq) .head-p,
  body.page-template-page-arrow-turf-home section:not(#faq) .wrap,
  body.page-template-page-arrow-turf-home section:not(#faq) .corp-container{
    text-align: center;
  }
  /* keep the FAQ questions/answers left-aligned */
  body.page-template-page-arrow-turf-home #faq,
  body.page-template-page-arrow-turf-home #faq *{
    text-align: left;
  }
  /* but center the FAQ heading area (eyebrow + 'Good to know') */
  body.page-template-page-arrow-turf-home #faq .head,
  body.page-template-page-arrow-turf-home #faq .head *{
    text-align: center;
  }
  /* Hide the fixed bottom 'Call the farm' + 'Free quote' bar */
  .callbar{ display: none !important; }
  body{ padding-bottom: 0 !important; }
}


/* ================= MOBILE HEADER: hamburger + phone icon, smaller logo ================= */
/* Reduce header logo height by 40% (80px -> 48px) */
body.page-template-page-arrow-turf-home .atf-nav .logo img{
  height: 48px !important;
  width: auto !important;
}

/* Hamburger + mobile phone icon are hidden on desktop */
.atf-nav .atf-hamburger,
.atf-nav .atf-phone-icon{ display: none; }

/* Hamburger button appearance */
.atf-nav .atf-hamburger{
  background: none; border: 0; padding: 8px; cursor: pointer;
  width: 44px; height: 44px; align-items: center; justify-content: center;
  flex-direction: column; gap: 5px;
}
.atf-nav .atf-hamburger span{
  display: block; width: 26px; height: 3px; border-radius: 3px;
  background: #fff; transition: transform .3s ease, opacity .3s ease;
}
/* animate to an X when open */
.atf-nav.menu-open .atf-hamburger span:nth-child(1){ transform: translateY(8px) rotate(45deg); }
.atf-nav.menu-open .atf-hamburger span:nth-child(2){ opacity: 0; }
.atf-nav.menu-open .atf-hamburger span:nth-child(3){ transform: translateY(-8px) rotate(-45deg); }

/* Mobile phone icon appearance */
.atf-nav .atf-phone-icon{ color:#fff; align-items:center; justify-content:center; width:44px; height:44px; }

@media (max-width:1080px){
  /* show the phone icon + hamburger, keep them on the right */
  .atf-nav .navcta{ display:flex; align-items:center; gap:.4rem; }
  .atf-nav .atf-phone-icon{ display:flex; }
  .atf-nav .atf-hamburger{ display:flex; }
  /* hide the 'Free quote' button and the desktop text phone number on mobile */
  .atf-nav .navcta .btn-primary{ display:none !important; }
  .atf-nav .navcta a.phone{ display:none !important; }

  /* the collapsible menu: hidden by default, revealed when .menu-open */
  .atf-nav .navlinks{
    display: none;
    position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; align-items: stretch;
    background: var(--brand-deep, #1B4428);
    padding: .5rem 1rem 1rem; gap: 0; z-index: 80;
    box-shadow: 0 12px 24px rgba(0,0,0,.25);
  }
  .atf-nav.menu-open .navlinks{ display: flex !important; }
  .atf-nav .navlinks li{ margin: 0; width: 100%; }
  .atf-nav .navlinks a{ display: block; padding: .8rem .2rem; }
  /* make the nav a positioning context for the dropdown menu */
  .atf-nav .wrap{ position: relative; }
}


/* ================= MOBILE HERO: center text + side-by-side buttons ================= */
@media (max-width:520px){
  /* center the banner text */
  body.page-template-page-arrow-turf-home .hero .eyebrow,
  body.page-template-page-arrow-turf-home .hero h1,
  body.page-template-page-arrow-turf-home .hero .hero-lede{
    text-align: center;
  }
  /* put the two hero buttons side by side, centered */
  body.page-template-page-arrow-turf-home .hero-cta{
    flex-direction: row !important;
    flex-wrap: nowrap;
    justify-content: center;
    gap: .6rem;
  }
  /* size buttons to fit two across, with reduced padding */
  body.page-template-page-arrow-turf-home .hero-cta .btn{
    width: auto !important;
    min-width: 0 !important;
    flex: 1 1 0;
    padding: .7rem 1rem !important;
    font-size: 1.05rem !important;
  }
}


/* HERO BANNER: remove border radius (all devices) */
.hero > img { border-radius: 0 !important; }
.hero { border-radius: 0 !important; overflow: hidden; }
/* HERO BANNER: center text on mobile only (desktop stays left) */
@media (max-width:760px){
  .hero .eyebrow, .hero h1, .hero .hero-lede { text-align: center !important; }
  .hero h1 { max-width: none !important; }
  .hero-form h2 { font-size: 22px !important; }
  .hero-form label { text-align: left !important; }
  #varieties .tiles.rv, #varieties .tiles { gap: 28px !important; }
  .tile-in p { line-height: 26px !important; }
  #contact .form-card label { text-align: left !important; }
  /* consistent L/R spacing for contact section on mobile */
  #contact .wrap { padding-left: 20px !important; padding-right: 20px !important; }
  #contact .contact.rv, #contact .form-card, #contact .contact-side { margin-left: 0 !important; margin-right: 0 !important; width: 100% !important; max-width: 100% !important; box-sizing: border-box; }
  .hero .hero-grid, .hero .hero-in { text-align: center !important; }
  .hero .hero-cta { justify-content: center !important; }
}


/* ============================================================
   SHARED HEADER (site-wide) — make .atf-nav look identical on
   every page, matching the homepage dark-green header.
   ============================================================ */
.atf-nav{ background:#1B4428 !important; border-bottom:none !important; padding-top:10px !important; padding-bottom:10px !important; }
.atf-nav .wrap{ height:80px !important; }
.atf-nav .logo img{ height:80px !important; width:auto !important; }
.atf-nav .navlinks a,
.atf-nav .phone,
.atf-nav .navcta{ color:#ffffff !important; }
.atf-nav .navlinks a:hover{ color:#DCE3D8 !important; }
.atf-nav .navlinks .sub-menu a{ color:#16301F !important; }
.atf-nav .navlinks .sub-menu a:hover{ color:#2C6E3F !important; }


/* SHARED HEADER FONT-SIZE CONSISTENCY (match homepage standard, px so root-rem scaling can't shrink) */
.atf-nav .navlinks{ font-size:17.6px !important; }
.atf-nav .navlinks a{ font-size:17.6px !important; }
.atf-nav .phone{ font-size:20.8px !important; }
.atf-nav .navcta .btn, .atf-nav .btn.btn-primary{ font-size:16px !important; }
.atf-nav .navlinks .sub-menu a, .atf-nav .navlinks ul a{ font-size:16px !important; }