/* Skip link accessibility */
.skip-link {
  position: absolute;
  left: -999px;
  top: 8px;
  background: #ffc720;
  color: #000;
  padding: .6em 1.2em;
  border-radius: 8px;
  z-index: 200;
  font-weight: bold;
  text-decoration: none;
  transition: left .2s;
}
.skip-link:focus {
  left: 12px;
  outline: 2px solid #000;
}
:root{
  --brand:#ffc720;
  --black:#000000;
  --text:#1f2937;
  --muted:#f7f7f8;
  --line:#e5e7eb;
}
*{box-sizing:border-box}
body{margin:0;font:16px/1.6 system-ui,Segoe UI,Roboto,Arial;color:var(--text);background:#fff}
html,body{overflow-x:hidden}
.site-header{position:relative;z-index:80}
.container{width:min(1100px,92%);margin:auto}
.site-header{background:var(--black);color:#fff}
.nav{display:flex;align-items:center;justify-content:space-between;padding:14px 0}
.brand{display:flex;align-items:center;gap:.6rem;color:#fff;text-decoration:none}
.brand img{height:44px;width:auto}
.brand span{font-weight:700;letter-spacing:.2px}
nav a{color:#fff;text-decoration:none;margin-left:1rem}
nav a.btn-ghost{padding:.45rem .8rem;border:1px solid #fff;border-radius:10px}
nav a:hover, nav a:focus {
  color: var(--brand);
  background: rgba(255,199,32,0.08);
  text-decoration: underline;
  text-underline-offset: 4px;
  border-radius: 8px;
  transition: background .18s, color .18s;
}
nav a.btn-ghost:hover, nav a.btn-ghost:focus {
  border-color: var(--brand);
  color: #000;
  background: var(--brand);
}
.hero{padding:56px 0 36px}
.hero h1{font-size:clamp(28px,4.5vw,48px);margin:.2em 0}
.hero h1 {
  position: relative;
  z-index: 1;
}
.hero h1::after {
  content: "";
  display: block;
  width: 60px;
  height: 5px;
  background: var(--brand);
  border-radius: 3px;
  margin: 12px 0 0 0;
}
.hero p{max-width:65ch}
.section{padding:56px 0}
.section h2{font-size:clamp(22px,3.2vw,34px);margin:.2em 0 10px}
.split{display:grid;grid-template-columns:1.1fr 1fr;gap:1.2rem;align-items:center}
.split img{width:100%;height:320px;object-fit:cover;border-radius:12px;border:1px solid var(--line)}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
.imgs img{width:100%;height:230px;object-fit:cover;border-radius:12px;border:1px solid var(--line)}
.wide{width:100%;height:360px;object-fit:cover;border-radius:12px;border:1px solid var(--line);margin-top:12px}
.btn{display:inline-block;border-radius:12px;text-decoration:none;cursor:pointer}
.btn-primary{background:var(--brand);color:#000;padding:.8rem 1.1rem;font-weight:700;border:none}
.btn-primary:hover, .btn-primary:focus {
  filter: brightness(1.08) drop-shadow(0 2px 8px rgba(255,199,32,0.18));
  transform: translateY(-2px) scale(1.03);
  box-shadow: 0 2px 12px rgba(255,199,32,0.13);
  transition: filter .18s, transform .18s, box-shadow .18s;
}
.form input,.form textarea{width:100%;border:1px solid #d1d5db;border-radius:10px;padding:.7rem .8rem}
.form label{display:block;font-weight:600;margin:.6rem 0}
.form .policy{
  display: flex;
  align-items: center;
  gap: .25rem;
  font-weight: 400;
  margin-top: .5rem;
  margin-bottom: .5rem;
}
.form .policy input[type="checkbox"] {
  margin-right: .5em;
  margin-left: 0;
}

/* Fix: don't let checkbox inherit width:100% from general input rule */
.form input[type="checkbox"],
.form input[type="radio"]{
  width: auto;
  height: auto;
  display: inline-block;
  vertical-align: middle;
}

@media (max-width:820px){
  .form .policy{flex-wrap:wrap;gap:.35rem}
  .form .policy label{flex:1 1 100%}
}
.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:1rem}
.contact-card{border:1px solid var(--line);background:var(--muted);border-radius:12px;padding:1rem;margin-bottom:1rem}
/* Form feedback messages */
.form-msg{border-radius:10px;padding:1rem;margin-bottom:1rem;font-weight:600}
.form-msg.success{background:linear-gradient(180deg, #ecfdf5, #d1fae5);border:1px solid #10b981;color:#065f46}
.form-msg.notice{background:linear-gradient(180deg,#fffbeb,#feefc3);border:1px solid #f59e0b;color:#92400e}
.form-msg.error{background:linear-gradient(180deg,#fff1f2,#fee2e2);border:1px solid #ef4444;color:#7f1d1d}
.site-footer{background:var(--muted);border-top:4px solid var(--brand);padding:16px 0}
.footer{display:flex;align-items:center;justify-content:center}
strong{font-weight:700}
a{color:inherit}
.btn-primary:hover{filter:brightness(0.95)}

/* Slider */
.slider{position:relative; width:100%; overflow:hidden; border-radius:12px; border:1px solid var(--line);}
.slides{display:flex; width:100%; transition:transform .5s ease;}
.slides{touch-action: pan-y;}
.slides .slide{min-width:100%;}
.slider img{width:100%; height:420px; object-fit:cover; display:block;}
.slider-controls{display:flex; gap:.5rem; justify-content:flex-end; margin-top:.5rem;}
.nav{background:var(--black); color:#fff; border:none; padding:.5rem .8rem; border-radius:10px; cursor:pointer}
.nav:hover{opacity:.9}

/* dots / pagination */
.slider-dots{display:flex; gap:.4rem; align-items:center; margin-left:.5rem}
.slider-dots button{width:10px;height:10px;border-radius:50%;border:1px solid rgba(0,0,0,0.15);background:#fff;opacity:.7;padding:0;cursor:pointer}
.slider-dots button[aria-pressed="true"]{background:var(--brand);opacity:1;border-color:transparent}

/* pause on hover/focus */
.slider:focus, .slider:hover{outline:none}
.slider:hover + .slider-controls .nav, .slider:focus + .slider-controls .nav{opacity:1}

@media (max-width:900px){
  .split{grid-template-columns:1fr}
  .grid-3{grid-template-columns:1fr}
  .grid-2{grid-template-columns:1fr}
  .hero{padding:40px 0 24px}
  nav a{margin-left:.6rem}
  .slider img{height:280px;}
}

/* Ensure hero text doesn't sit under the hamburger on small screens */
@media (max-width:720px){
  /* give the header/nav area some breathing room on the right */
  .site-header .container.nav{padding-right:3.4rem;}
  /* make sure the hero content has extra right padding so the h1 can't slide under the menu */
  .hero{padding-right:2.6rem}
  .hero h1{padding-right:1rem}
  /* keep the hamburger visually above content */
  .menu-toggle{position:relative;z-index:130}
}

/* When the mobile nav is open we add .no-scroll to body; hide the large hero title to
   prevent it from bleeding through the menu on some devices/browsers */
body.no-scroll .hero h1 {
  visibility: hidden;
}

/* Mobile navigation */
.menu-toggle{display:none;background:transparent;border:1px solid rgba(255,255,255,0.12);color:#fff;padding:.4rem .7rem;border-radius:8px;cursor:pointer}
/* hide the close button by default (desktop) */
.menu-close{display:none}

@media (max-width:720px){
  .menu-toggle{display:inline-block}
  nav#siteNav{position:fixed;top:0;right:0;height:100vh;width:260px;background:var(--black);padding:3.6rem 1rem 1rem;transform:translateX(100%);transition:transform .25s ease;z-index:110}
  /* ensure overlay covers header/content but sits under the sliding nav */
  .nav-overlay{position:fixed;inset:0;background:rgba(0,0,0,0.45);opacity:0;pointer-events:none;transition:opacity .2s ease;z-index:105}
  /* Promote overlay to its own compositing layer to avoid text flicker during opacity transition */
  .nav-overlay{will-change:opacity;transform:translateZ(0)}
  .nav-overlay.show{opacity:1;pointer-events:auto}
  .menu-close{display:block;position:absolute;top:8px;right:8px;background:transparent;border:none;color:#fff;font-size:1.4rem;padding:.4rem;cursor:pointer}
  nav#siteNav a{display:block;margin:0 0.25rem 0.8rem 0;padding:.6rem .8rem;border-radius:8px;background:transparent}
  nav#siteNav a.btn-ghost{border-color:rgba(255,255,255,0.12)}
  nav#siteNav.show{transform:translateX(0)}
  /* hide desktop nav in header flow to avoid overlap */
  .container.nav{position:relative}
}

/* prevent body scroll when nav open */
body.no-scroll{overflow:hidden;height:100%}

/* Improve touch behavior and avoid horizontal overscroll */
html, body { -webkit-overflow-scrolling: touch; overscroll-behavior-x: none; }

/* Improve spacing in collapsed header when nav is visible on mobile */
@media (max-width:480px){
  .brand span{display:none}
  .brand img{height:40px}
}

/* Trust strip */
.trust-strip{background:#111;color:#fff;padding:.5rem 0;font-weight:600}
.trust-strip{background:#111;color:#fff;padding:.5rem 0;font-weight:600;box-shadow:0 2px 12px rgba(255,199,32,0.10);border-bottom:2.5px solid var(--brand);}
.trust-strip .container{display:flex;gap:1rem;flex-wrap:wrap;align-items:center;justify-content:center}

/* Sticky mobile CTA */
.sticky-cta{display:none;position:fixed;left:0;right:0;bottom:12px;margin:auto;width:min(92%,420px);z-index:120;box-shadow:0 6px 18px rgba(0,0,0,0.15);}
.sticky-cta{display:none;position:fixed;left:0;right:0;bottom:12px;margin:auto;width:min(92%,420px);z-index:120;box-shadow:0 6px 18px rgba(0,0,0,0.15),0 -2px 0 var(--brand);border-radius:12px;}
.sticky-cta .btn{display:flex;align-items:center;gap:.6rem;justify-content:center;padding:.8rem 1rem;border-radius:10px}
@media (max-width:720px){
  .sticky-cta{display:block}
}