/* Mobile overrides — compact menu, no CTA */
img, video { max-width:100%; height:auto }

/* Hamburger (shown on mobile) */
.hamburger{ display:none }
@media (max-width: 768px){
  .hamburger{
    display:flex; width:44px; height:44px; align-items:center; justify-content:center;
    border:1px solid var(--ring, #e5e7eb); border-radius:10px; background:rgba(255,255,255,.8);
  }
  .hamburger span{ display:block; width:22px; height:2px; margin:3px 0; background:currentColor }
}

/* Dropdown menu: full width, vertical list, no horizontal scroll */
@media (max-width: 768px){
  .navlinks{
    display:none; position:absolute; top:100%; left:0; right:0;
    background:var(--bg, #fff); border-top:1px solid var(--ring, #e5e7eb);
    padding:10px 14px; box-shadow:0 8px 24px rgba(0,0,0,.06); z-index:50;
  }
  header.nav-open .navlinks, .nav.nav-open .navlinks{ display:block }
  .navlinks a{
    display:block; padding:12px 8px; white-space:normal; /* wrap text */
  }
  /* Hide CTA if present from previous versions */
  .navlinks .cta-start{ display:none !important }
}

/* Ensure first section is close to header */
main > section:first-of-type, .hero, .section-hero{
  margin-top: 8px;
}

/* On desktop keep horizontal menu visible (site default styles handle this) */

/* v8: compact mobile layout */
@media (max-width: 768px){
  /* Dropdown becomes a 2-column grid so all items are visible without horizontal scroll */
  .navlinks{
    display:none;
    position:absolute; top:100%; left:0; right:0;
    background:var(--bg, #fff);
    border-top:1px solid var(--ring, #e5e7eb);
    padding:8px 10px;
    box-shadow:0 10px 24px rgba(0,0,0,.08);
  }
  header.nav-open .navlinks, .nav.nav-open .navlinks{ display:block }

  .navlinks{
    display:grid;
    grid-template-columns: 1fr 1fr;
    gap:8px 10px;
  }
  .navlinks a{
    display:block;
    padding:10px 8px;
    text-align:center;
    border:1px solid rgba(0,0,0,0.05);
    border-radius:10px;
    white-space:normal;
  }

  /* Tighten hero spacing further for compactness */
  main > section:first-of-type, .hero, .section-hero{
    margin-top: 4px !important;
    padding-top: 4px !important;
  }

  /* Card typography slightly smaller for mobile compactness */
  .card, .service, .box{
    font-size: 15px;
    line-height: 1.55;
  }

  /* Ensure header row elements align nicely */
  header .container.nav, .container.nav{
    gap: 10px;
  }
}



/* v9 — compact header, full hero title, no right square, better menu grid */

/* Hide any legacy checkbox or empty placeholders that render as a square */
header .nav input[type="checkbox"]{ display:none !important; }
header .nav > *:empty{ display:none !important; }

/* Keep hamburger left, nothing on the right */
header .menu{ order: 0 }
header .brand{ order: 1 }
header .navlinks{ order: 2 }

/* Hero adjustments */
.hero, .section-hero{
  background-position: center 35% !important;
  background-size: cover !important;
}
.hero h1, .section-hero h1, .hero .title, .section-hero .title{
  margin: 0;
}
@media (max-width: 768px){
  .hero, .section-hero{ min-height: 44vh !important; }
  .hero h1, .section-hero h1, .hero .title, .section-hero .title{
    font-size: clamp(24px, 5.6vw, 32px) !important;
    line-height: 1.15 !important;
    letter-spacing: 0.2px;
  }
  .hero .lead, .section-hero .lead, .hero p, .section-hero p{
    font-size: clamp(14px, 3.9vw, 16px) !important;
    line-height: 1.45 !important;
  }
}

/* Make dropdown a tight 2-column grid */
@media (max-width: 768px){
  .navlinks{
    display:none;
    position:absolute; top:100%; left:0; right:0;
    background:var(--bg, #fff);
    border-top:1px solid var(--ring, #e5e7eb);
    padding:8px 10px;
    box-shadow:0 10px 24px rgba(0,0,0,.08);
    z-index:50;
  }
  header.nav-open .navlinks, .nav.nav-open .navlinks{ display:grid }
  .navlinks{
    grid-template-columns: 1fr 1fr;
    gap:8px 10px;
  }
  .navlinks a{
    display:block;
    padding:10px 8px;
    text-align:center;
    border:1px solid rgba(0,0,0,0.05);
    border-radius:10px;
    white-space:normal;
  }
}

/* First section spacing (we'll start with services) */
main > section:first-of-type{ margin-top: 8px !important; }


/* v10: small-phone fixes (iPhone 13 mini and similar) */
@media (max-width: 390px){
  header .brand img{ max-height: 62px !important; }
  .hero, .section-hero{ min-height: 50vh !important; background-position: center 38% !important; }
  .hero h1, .section-hero h1, .hero .title, .section-hero .title{ font-size: clamp(22px, 6vw, 28px) !important; line-height:1.15 !important; }
  .hero .lead, .section-hero .lead, .hero p, .section-hero p{ font-size: clamp(13px, 3.5vw, 15px) !important; line-height:1.45 !important; }
  header .container.nav, .container.nav{ gap: 8px !important; }
}

/* Force hero overlay text block to wrap nicely and stay within viewport */
.hero .overlay, .section-hero .overlay{ max-width: 92vw; word-wrap: break-word; overflow-wrap: anywhere; }

/* Hide any checkboxes/labels/placeholders that could render as a square */
header .nav input, header input[type="checkbox"], header label[for*="nav"], header .placeholder, header .box, header .empty{ display:none !important; }

/* Prevent accidental horizontal scroll on mobile */
html, body{ overflow-x: hidden; }



/* v11: start with Services on mobile; hero hidden to avoid cropped text */
@media (max-width: 768px){
  .hero, .section-hero{ display: none !important; }
  main > section:first-of-type{ margin-top: 8px !important; }
}

/* v11: hamburger visible (no empty square), navlinks hidden by default on mobile */
.hamburger span{ background:#0F63B9 !important; border-radius:2px }
@media (max-width: 768px){
  .navlinks{ display:none !important }
  header.nav-open .navlinks, .nav.nav-open .navlinks{ display:grid !important }
  .navlinks{
    grid-template-columns: 1fr 1fr;
    gap:8px 10px;
    position:absolute; top:100%; left:0; right:0;
    background:#fff; border-top:1px solid rgba(0,0,0,.08);
    padding:10px; box-shadow:0 10px 24px rgba(0,0,0,.08); z-index:50;
  }
  .navlinks a{
    display:block; padding:10px 8px; text-align:center;
    border:1px solid rgba(0,0,0,.06); border-radius:10px; white-space:normal;
  }
}

/* v11: hide any stray checkbox/placeholder square */
header input[type="checkbox"], header label[for*="nav"], header .placeholder, header .empty{ display:none !important }



/* v12: show hero on mobile with full title visible */
@media (max-width: 768px){
  .hero, .section-hero{
    display: block !important;
    min-height: 56vh !important;
    padding-top: 28px !important;
    padding-bottom: 18px !important;
    background-position: center 40% !important;
    background-size: cover !important;
  }
  .hero .container, .section-hero .container{ max-width: 92vw !important; }
  .hero h1, .section-hero h1,
  .hero .title, .section-hero .title{
    font-size: clamp(22px, 6vw, 28px) !important;
    line-height: 1.15 !important;
    margin: 0 0 8px 0 !important;
    word-break: break-word;
  }
  .hero .lead, .section-hero .lead,
  .hero p, .section-hero p{
    font-size: clamp(13px, 3.6vw, 15px) !important;
    line-height: 1.45 !important; margin: 0 !important;
    word-break: break-word;
  }
  .hero .overlay, .section-hero .overlay{
    max-width: 92vw !important; padding: 10px 12px !important; border-radius: 12px !important;
  }
  html, body{ overflow-x: hidden; }
}

/* Hide any stray checkbox/square in header */
header input[type="checkbox"],
header label[for*="nav"],
header .placeholder,
header .empty { display: none !important; }

/* Mobile menu: visible as grid when nav-open; all items fit, no horizontal scroll */
.hamburger span{ background:#0F63B9 !important; border-radius:2px; }
@media (max-width: 768px){
  .navlinks{ display: none !important; }
  header.nav-open .navlinks, .nav.nav-open .navlinks{ display: grid !important; }
  .navlinks{
    grid-template-columns: 1fr 1fr;
    gap: 8px 10px;
    position: absolute; top: 100%; left: 0; right: 0;
    background: #fff; border-top: 1px solid rgba(0,0,0,.08);
    padding: 10px; box-shadow: 0 10px 24px rgba(0,0,0,.08); z-index: 50;
  }
  .navlinks a{
    display: block; padding: 10px 8px; text-align: center;
    border: 1px solid rgba(0,0,0,.06); border-radius: 10px; white-space: normal;
  }
}