/* Modern, accessible, mobile-first styles */
:root{
  --brand-900:#0a3d91;
  --brand-600:#1b73ff;
  --ink:#0b1220;
  --ink-70:rgba(11,18,32,.7);
  --bg:#ffffff;
  --muted:#f6f8fc;
  --ring: 0 0 0 3px rgba(27,115,255,.25);
  --radius:14px;
  --shadow:0 10px 30px rgba(0,0,0,.08);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  color:var(--ink); background:var(--bg); line-height:1.6;
}
img{max-width:100%; display:block}
a{color:var(--brand-600); text-decoration:none}
a:hover{text-decoration:underline}
.container{width:min(1120px, 92vw); margin-inline:auto}
.section{padding:72px 0}
.section--muted{background:var(--muted)}
.section-title{font-size:clamp(1.6rem, 1.2rem + 1.8vw, 2.4rem); margin:0 0 24px}

.skip-link{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}
.skip-link:focus{left:16px;top:16px;width:auto;height:auto;z-index:1000;background:#fff;padding:8px 12px;border-radius:8px;box-shadow:var(--shadow)}

.site-header{position:sticky; top:0; background:rgba(255,255,255,.9); backdrop-filter:saturate(180%) blur(8px); border-bottom:1px solid #eee; z-index:100}
.header-inner{display:flex; align-items:center; justify-content:space-between; min-height:64px; gap:16px}
.brand{display:flex; align-items:center; gap:10px; font-weight:700}
.brand-mark{width:28px; height:28px}
.brand-name{letter-spacing:.2px}
.site-nav{display:flex; gap:20px; align-items:center}
.site-nav a{padding:10px 12px; border-radius:10px}
.nav-toggle{display:none; padding:10px 12px; border:1px solid #ddd; background:#fff; border-radius:10px}

.btn{display:inline-block; padding:12px 18px; background:var(--brand-600); color:#fff; border-radius:12px; border:none; cursor:pointer; box-shadow:var(--shadow)}
.btn:hover{text-decoration:none; opacity:.95}
.btn--ghost{background:#fff; color:var(--brand-900); border:1px solid #dbe6ff}
.btn--small{padding:8px 12px; font-size:.95rem}
.btn--block{display:block; text-align:center}



.hero{position:relative; isolation:isolate}
.hero-bg{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:-1}
.hero-inner{padding:88px 0 70px; color:#fff; text-shadow:0 2px 12px rgba(0,0,0,.25)}
.hero-inner {
  padding: 150px 0 64px; /* increased top padding */
  color: #fff;
  text-shadow: 0 2px 12px rgba(0,0,0,.25);}
.hero h1{font-size:clamp(2rem, 1.6rem + 2.5vw, 3rem); margin:0 0 12px}
.hero p{font-size:1.1rem; max-width:700px}
.cta-row{display:flex; gap:12px; margin:20px 0 12px}
.trust{display:flex; gap:10px; flex-wrap:wrap}
.badge{background:rgba(255,255,255,.15); border:1px solid rgba(255,255,255,.35); padding:6px 10px; border-radius:999px}

.grid{display:grid; gap:22px}
.cards{grid-template-columns:repeat( auto-fit, minmax(240px,1fr) );}
.card{background:#fff; border:1px solid #eef2ff; border-radius:var(--radius); padding:18px; box-shadow:var(--shadow)}
.card h3{margin-top:8px}
.tick{padding-left:18px}
.tick li{margin:6px 0}

.two-col{display:grid; grid-template-columns:1.1fr .9fr; gap:30px; align-items:center}
@media (max-width: 860px){
  .two-col{grid-template-columns:1fr}
  .site-nav{display:none}
  .nav-toggle{display:inline-block}
}

.pricing{display:grid; grid-template-columns:repeat(3,1fr); gap:18px; align-items:stretch}
@media (max-width: 900px){.pricing{grid-template-columns:1fr}}
.price-card{background:#fff; border:1px solid #e8eeff; border-radius:16px; padding:22px; box-shadow:var(--shadow); position:relative}
.price-card--featured{border:2px solid var(--brand-600)}
.flag{position:absolute; top:-12px; right:16px; background:var(--brand-600); color:#fff; padding:6px 10px; font-size:.85rem; border-radius:10px}
.price{font-size:2.2rem; margin:10px 0 4px}
.price span{font-size:1.2rem; opacity:.7}
.hint{color:var(--ink-70); font-size:.95rem}

.contact-form{display:grid; gap:12px}
.contact-form label{display:grid; gap:6px; font-weight:600}
input, textarea{border:1px solid #d6def8; border-radius:12px; padding:12px 14px; font:inherit}
input:focus, textarea:focus{outline:none; box-shadow:var(--ring); border-color:#b6ccff}
.row{display:flex; gap:12px; flex-wrap:wrap}
.visually-hidden{position:absolute; left:-9999px}

.contact-card{align-self:start}
.contact-list{list-style:none; padding:0; margin:0 0 8px; display:grid; gap:8px}
.socials{display:flex; gap:12px; flex-wrap:wrap}
.socials a{background:#fff; border:1px solid #e7ecff; padding:8px 12px; border-radius:10px}

.site-footer{border-top:1px solid #eee; padding:24px 0; background:#fafbff}
.footer-inner{display:flex; gap:16px; align-items:center; justify-content:space-between; flex-wrap:wrap}

.hero-logo-top {
  position: absolute;
  top: 24px;
  left: -75px;
  width: 400px;
  z-index: 10;
  margin-bottom: 40px; /* creates space below logo */
}

/* --- container for the two top-right images --- */
.hero-images {
  position: absolute;
  top: 60px;      /* distance from top edge */
  right: 20px;    /* distance from right edge */
  display: flex;
  flex-direction: column; /* stack vertically */
  gap: 10px;      /* space between pictures */
  z-index: 9;     /* keep above background */
}
.hero-images img:first-child {
  position: relative;
  left: -200px;   /* negative value moves it left */
}

.hero-pic-1{
  width: 140px;
  height: 140px;
  object-fit: cover;
  border-radius: 10px;
  box-shadow: 0 4px 12px rgba(0,0,0,.25);
  border: 2px solid #fff;
}

.hero-pic-2{
  width: 140px;
  height: 140px;
  object-fit: cover;
  border-radius: 10px;
  box-shadow: 0 4px 12px rgba(0,0,0,.25);
  border: 2px solid #fff;
}

.hero-pic-3{
  width: 140px;
  height: 140px;
  object-fit: cover;
  border-radius: 10px;
  box-shadow: 0 4px 12px rgba(0,0,0,.25);
  border: 2px solid #fff;
}

.hero-pic-4{
  width: 140px;
  height: 140px;
  object-fit: cover;
  border-radius: 10px;
  box-shadow: 0 4px 12px rgba(0,0,0,.25);
  border: 2px solid #fff;
}

.hero-images {
  position: absolute;
  top: 30px;
  right: 30px;
}




.hero-pic-1 {
  top: 0;
  right: 0;
}

.hero-pic-2 {
  position: absolute;
  top: 150px;   /* moves down below the first */
  right: 200px;  /* moves slightly left */
}

.hero-pic-3 {
  position: absolute;
  top: 0px;   /* moves below 2nd */
  right: 50px;
}

.hero-pic-4 {
  position: absolute;
  top: 150px;   /* lowest one */
  right: 50px;
}

.services-banner {
  display: block;
  margin: -60px auto 0 330px;       /* centers and adds top/bottom spacing */
  max-width: 70%;         /* keeps it responsive */
  border-radius: 12px;     /* optional: soft rounded corners */
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2); /* subtle shadow */
}


.team-illustration {
  display: block;
  max-width: 100%;
  position: relative;
  top: -800px;   /* moves it UP — try -40, -60, etc. */
}

/* Reduce spacing between Services and About Us */
#about.section {
  padding-top: 10px; /* default is probably 100px+ */
  margin-top: -180px; /* pulls it up closer to Services */
}

.about-flex {
  display: flex;
  align-items: center;       /* vertically centers them */
  justify-content: space-between; /* space between text and image */
  gap: 100px;                 /* space between text and image */
  flex-wrap: wrap;           /* ensures it looks good on mobile */
}

.about-text {
  flex: 1;                   /* make text area flexible */
  max-width: 50%;            /* limit width */
}

.about-media {
  flex: 1;
  display: flex;
  justify-content: center;   /* center the image horizontally */
}

.team-illustration {

  width: 80%;
  max-width: 400px;
  height: auto;
  position: relative;
  top: -20px;                /* nudge it up slightly */
}

/* Move only the About Us text upward */
#about .two-col > div:first-child {
  position: relative;
  top: -80px;   /* moves text upward; adjust number as needed */
}

/* Keep image fixed in place */
#about .about-media {
  position: relative;
  top: 0;
}

#about {
  padding-bottom: 0;
  margin-bottom: 0;
}

#pricing.section {
  padding-top: 10px; /* reduce the default 80–100px space */
  margin-top: -200px; /* pull it up slightly if needed */
}

#about {
  margin-bottom: 0;    /* remove space below the section */
  padding-bottom: 0;   /* remove internal space */
}

#testimonials {
  margin-top: -250px;   /* pull the testimonials section up */
  padding-top: 20px;   /* optional: add a little internal space */
}

.testimonial-video {
  width: 200px;     /* narrower */
  height: 360px;    /* shorter */
  border-radius: 10px;
  box-shadow: 0 3px 10px rgba(0,0,0,0.2);
  object-fit: cover;
}

.video2 {
  position: relative;
  left: 200px;   /* moves it 20 px right */
}

.video3 {
  position: relative;
  left: 350px;   /* moves it 20 px right */
}

.video1 {
  position: relative;
  left: 60px;   /* moves it 20 px right */
}

/* =========================================
   MOBILE LAYOUT (phones ≤ 680px) — CLEAN SLATE
   Keeps desktop intact. Fixes overlap, spacing,
   hero photos, services banner, videos, and 2-col.
   ========================================= */


/* OPTIONAL: if you still want the video positioned on DESKTOP only, add this */
@media (min-width: 861px){
  /* adjust these values to taste for desktop */
  /* .site-video-vertical{ position:absolute; left:42px; top:120px; width:300px; height:420px; margin:0; } */
}



/* ---------- DESKTOP (≥861px): restore left overlay video ---------- */
@media (min-width: 861px){
  .site-video-vertical{
    position: absolute;      /* bring it back as an overlay */
    left: 42px;              /* adjust to taste */
    top: 425px;              /* adjust to taste */
    width: 300px;
    height: 440px;
    margin: 0;               /* cancel any residual margins */
    border-radius: 12px;
    box-shadow: 0 4px 15px rgba(0,0,0,.25);
    object-fit: cover;
    z-index: 6;              /* above background, below header */
  }
}

@media (min-width: 861px){
  .site-video-vertical{
    position: absolute;
    left: 42px;
    top: 425px;
    width: 300px;
    height: 420px;
    border-radius: 12px;
    box-shadow: 0 4px 15px rgba(0,0,0,.25);
    object-fit: cover;
    z-index: 6;
  }
}

/* ===== Phone layout only (≤ 680px) ===== */

/* Phone-only tweaks for the 4 hero photos */


@media (max-width: 680px){
  /* give the text a little breathing room first */
  .hero-inner { margin-bottom: 10px; }

  .hero-images{
    /* move the grid farther down */
    margin-top: 18px;          /* increase this if you want more space */
    padding: 0 12px 8px;
    gap: 12px;                 /* a bit more space between tiles */
    justify-content: center;   /* center the grid nicely */
  }

  .hero-images img{
    /* make each tile smaller */
    width: 42vw;               /* ↓ shrink size (try 38–45vw to taste) */
    max-width: 150px;          /* hard cap so small phones don’t blow up */
    aspect-ratio: 1 / 1;
    height: auto;
  }
}



@media (max-width: 680px){

  /* Core safety */
  html, body { overflow-x:hidden; }
  img, video { max-width:100%; height:auto; display:block; }
  .container { width:100%; padding-left:16px; padding-right:16px; }

  /* HERO: text first, photos underneath in a neat grid */
  .hero { position:relative; overflow:hidden; padding:20px 0; }
  .hero-bg { width:100%; height:auto; }
  .hero-inner { position:relative; z-index:1; padding:0 16px 8px; }
  .hero h1, .hero p { position:relative; z-index:1; margin:0 0 10px; }

  /* kill all absolute positioning on the four photos */
  .hero-images,
  .hero-images img,
  .hero-pic, .hero-pic-1, .hero-pic-2, .hero-pic-3, .hero-pic-4 {
    position: static !important;
    top:auto !important; right:auto !important; bottom:auto !important; left:auto !important;
    margin:0 !important;
  }

  .hero-images{
    display:grid !important;
    grid-template-columns: 1fr 1fr;
    gap:12px;
    margin:12px 16px 0;
    justify-items:center;
    z-index:0;
  }

  .hero-images img{
    width:100% !important;
    height:auto !important;
    aspect-ratio:1/1;
    border-radius:12px;
    box-shadow:0 6px 16px rgba(0,0,0,.14);
    border:2px solid #fff;
  }

  /* Services banner: stop the rightward push / negative margins */
  .services-banner{
    position:static !important;
    display:block !important;
    width:100% !important;
    max-width:100% !important;
    height:auto !important;
    margin:20px auto 0 !important;
    box-shadow:none;
    border-radius:12px;
  }

  /* Vertical video: inline, not absolute on phones */
  .site-video-vertical{
    position:static !important;
    width:100% !important;
    max-width:360px;
    margin:16px auto !important;
    height:auto !important;
    aspect-ratio:9/16;
    border-radius:12px;
    left:auto !important; top:auto !important;
  }

  /* Two-column sections stack and remove “pull-up” hacks */
  .two-col{ display:block !important; }
  .two-col > * + * { margin-top:20px; }

  #about, #pricing, #testimonials{
    margin:0 !important;
    padding:24px 16px !important;
  }
}

/* === PHONE FINAL TWEAKS – place at very end of CSS === */
@media (max-width: 680px){

  /* Let the hero grow and allow spacing to take effect */
  .hero{ overflow: visible; padding-bottom: 8px; }

  /* Tighten the text a bit (optional) */
  .hero-inner{ padding-top: 8px; padding-bottom: 0; margin-bottom: 0; }

  /* Make the photo block NORMAL flow (not absolute) and push it down */
  .hero .hero-images{
    position: static !important;     /* cancel desktop absolute */
    top: auto !important;
    right: auto !important;
    left: auto !important;
    transform: none !important;

    display: grid !important;
    grid-template-columns: repeat(2, minmax(0,1fr));
    gap: 14px;

    margin-top: 220px !important;     /* <-- move the pictures DOWN */
    padding: 0 16px;                  /* nice side breathing room */
    z-index: 0;
  }

  /* Make sure the images size nicely */
  .hero .hero-images img{
    width: 100% !important;
    height: auto !important;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0,0,0,.18);
    border: 2px solid #fff;
  }
}

/* === PHONE FINAL TEXT POSITION FIX === */
@media (max-width: 680px){
  .hero-inner{
    position: relative;
    margin-top: -55px;     /* moves the text UP closer to logo */
    padding-top: 0;
    z-index: 2;
  }

  /* optional: keep the images well below */
  .hero-images{
    margin-top: 64px !important;   /* ensures gap below text */
  }
}

/* === FINAL PHONE HERO TEXT FIX === */
@media (max-width: 680px){
  /* Move just the text upward inside the hero */
  .hero-inner {
    position: relative;
    top: -400px;         /* raises only the text */
    margin-bottom: -20px; /* compensates space below */
  }

  /* Keep everything else (blue box, photos, etc.) in place */
  .hero {
    overflow: visible;  /* make sure it doesn't clip */
    padding-bottom: 0; 
  }

  /* Maintain spacing for photos */
  .hero-images {
    margin-top: 48px !important; /* keep image grid lower */
  }
}

/* === PHONE LOGO POSITION TWEAK === */
@media (max-width: 680px){
  .hero-logo-top {
    top: 10px !important;     /* was 24px — move it closer to the top */
    left: -50px;              /* keep it aligned left */
    width: 230px;            /* slightly smaller for balance */
  }
}

/* === PHONE FONT SIZE TWEAK === */
@media (max-width: 680px){
  .hero-inner p {
    font-size: 14px !important;   /* was ~16px */
    line-height: 1.4;             /* keeps it readable */
  }

  .hero h1 {
    font-size: 20px !important;   /* slightly smaller title */
    line-height: 1.2;
  }
}

/* === MOBILE ONLY: move Services banner up === */
@media (max-width: 680px){
  .services-banner {
    position: relative !important;
    top: -100px !important;     /* lift upward — adjust to -60px or -80px if needed */
    margin-top: 0 !important;  /* remove extra space above */
  }
}

/* === MOBILE ONLY: move Yardwork video upward === */
@media (max-width: 680px){
  video[src*="iAssistJobs.mp4"],
  .iassistjobs,
  .site-video-vertical {
    position: relative !important;
    top: -165px !important;      /* move up — try -70px or -90px if needed */
    margin-top: 0 !important;   /* remove extra gap above */
  }
}

/* === MOBILE ONLY: move "About Us" section upward === */
@media (max-width: 680px){
  #about {
    position: relative;
    top: -80px;       /* move up — try -60px or -80px if you need more */
    margin-top: 0;    /* prevent added spacing above */
  }
}

/* === MOBILE ONLY: move LogoOval2.jpg upward === */
@media (max-width: 680px){
  img[src*="LogoOval2.jpg"] {
    position: relative !important;
    top: -150px !important;   /* move upward — tweak value as needed */
    margin-top: 0 !important;
    display: block;
  }
}

/* === MOBILE ONLY: tighten space between LogoOval2 and "What Customers Say" === */
@media (max-width: 680px){
  img[src*="LogoOval2.jpg"] {
    margin-bottom: 0 !important;
  }

  /* Target only the heading inside the testimonials section */
  #testimonials h2,
  #testimonials .section-title {
    margin-top: -100px !important;  /* pull up the "What Customers Say" title only */
  }
}

/* === MOBILE ONLY: tighten space below LogoOval2.jpg === */
@media (max-width: 680px){
  img[src*="LogoOval2.jpg"] {
    display: block;
    width: 300px !important;        /* adjust size as you prefer */
    height: auto !important;
    margin-top: 5px !important;    /* move logo up slightly */
    margin-bottom: -300px !important; /* reduce gap below logo */
    padding: 0 !important;
    margin-left: auto;
    margin-right: auto;             /* keeps it centered */
  }
}

/* ===== MOBILE: center all testimonial videos ===== */
@media (max-width: 680px){

  /* Center the videos' container */
  #testimonials .testimonials-videos,
  .testimonials-videos {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;   /* <— centers horizontally */
    justify-content: flex-start !important;
    gap: 14px !important;             /* consistent space between videos */
  }

  /* Neutralize any offsets and center each video */
  .video1, .video2, .video3,
  .testimonial-video,
  .site-video-vertical,
  #testimonials video {
    position: static !important;
    left: auto !important;
    right: auto !important;
    display: block !important;
    width: 92% !important;            /* tweak to 85–95% if you like */
    max-width: 380px !important;
    height: auto !important;
    margin: 12px auto !important;     /* <— centers the element */
    border-radius: 12px;
  }
}

/* Hide nav by default on small screens */
@media (max-width: 860px) {
  .site-nav {
    display: none;
    flex-direction: column;
    background: white;
    position: absolute;
    top: 64px; /* below the header */
    right: 0;
    left: 0;
    padding: 20px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    z-index: 99;
  }

  /* When .open is toggled, display it */
  .site-nav.open {
    display: flex;
  }

  .site-nav a {
    padding: 12px;
    text-align: center;
  }
}

/* --- Mobile navigation (slide-down effect) --- */
@media (max-width: 860px) {
  .site-nav {
    display: flex;
    flex-direction: column;
    background: white;
    position: absolute;
    top: 64px; /* right below header */
    right: 0;
    left: 0;
    padding: 0 20px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    z-index: 99;

    /* animation behavior */
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transform: translateY(-10px);
    transition: all 0.3s ease;
  }

  .site-nav.open {
    max-height: 300px;  /* enough space for all links */
    opacity: 1;
    transform: translateY(0);
    padding: 20px;
  }

  .site-nav a {
    padding: 12px;
    text-align: center;
    color: #0a3d91;
    font-weight: 600;
  }
}

@media (min-width: 681px) {
  /* Move Request Quote button to the left on desktop only */
  a.btn {
    display: inline-flex !important;
    margin-left: 0 !important;   /* left-align */
    margin-right: auto !important;
    justify-content: flex-start !important;
  }
}


/* Force the "Request Quote" button to normal size on mobile and desktop */
a.btn{
  display: inline-flex !important;   /* beat any display:block */
  width: auto !important;            /* beat width:100% */
  flex: 0 0 auto !important;         /* beat flex:1 from a parent row */
  padding: 12px 20px !important;     /* keep a tidy pill */
  border-radius: 12px !important;
  text-decoration: none;
  align-items: center;
  max-width: 100%;
}

/* Optional: center it on its line */
.btn-center { display:inline-flex !important; margin: 12px auto 0 !important; }