:root{
  --green:#2bb673;
  --orange:#ff6f3c;
  --deep:#062014;
  --bg:#f6fbf8;
  --card:#ffffff;
  --muted:#6b7280;
  --glass: rgba(255,255,255,0.7);
  --maxw:1200px;
  --accent-grad: linear-gradient(135deg,var(--green),#54c17a 40%, var(--orange));
}
*{box-sizing:border-box}
body{margin:0;font-family:Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;color:var(--deep);background:var(--bg);-webkit-font-smoothing:antialiased}
.container{max-width:var(--maxw);margin:0 auto;padding:0 20px}

/* Header */
.site-header{position:sticky;top:0;z-index:100;background:linear-gradient(180deg, rgba(255,255,255,0.85), rgba(255,255,255,0.6));backdrop-filter:blur(6px);border-bottom:1px solid rgba(2,6,23,0.04)}
.header-inner{display:flex;align-items:center;justify-content:space-between;padding:14px 0}
.logo{height:44px}
nav.nav{display:flex;gap:12px;align-items:center}
nav.nav a{color:var(--deep);text-decoration:none;font-weight:700;padding:8px 10px;border-radius:8px}
nav.nav a:hover{background:rgba(43,186,115,0.08)}

/* Hero */
.hero-section{position:relative;height:82vh;min-height:520px;display:flex;align-items:center;overflow:hidden;background:#000;border-bottom-left-radius:40px;border-bottom-right-radius:40px}
.bg-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:brightness(0.45) saturate(0.95)}
.hero-overlay{position:relative;z-index:5;display:flex;gap:32px;align-items:flex-start;width:100%;padding:48px 20px}
.hero-left{max-width:720px;color:white}
.hero-title{font-size:clamp(36px,6vw,84px);line-height:0.9;margin:0 0 12px;font-weight:900;letter-spacing:-1px; text-shadow: 0 6px 30px rgba(0,0,0,0.6)}

/* 3D text */
.text-3d{
  color:#fff;
  font-weight:900;
  text-transform:none;
  position:relative;
  display:inline-block;
  transform:translateZ(0);
  text-shadow: 0 1px 0 rgba(0,0,0,0.15), 0 2px 0 rgba(0,0,0,0.12), 0 4px 8px rgba(0,0,0,0.35);
}
.accent-bg{background:var(--green);color:#062014;padding:8px 12px;border-radius:8px;display:inline-block;box-shadow:0 8px 30px rgba(43,186,115,0.18)}

/* hero subtitle with gradient underline */
.hero-sub{color:rgba(255,255,255,0.93);margin-bottom:18px;font-size:1.05rem;max-width:70%}

/* call-to-actions */
.hero-actions{display:flex;gap:12px;margin-top:8px}
.btn{display:inline-flex;align-items:center;gap:8px;padding:12px 18px;border-radius:12px;text-decoration:none;font-weight:800;cursor:pointer}
.btn.primary{background:var(--accent-grad);color:#fff;box-shadow:0 12px 30px rgba(43,186,115,0.14);border:0}
.btn.ghost{background:transparent;border:2px solid rgba(255,255,255,0.14);color:#fff}

/* booking card */
.hero-card{width:380px;background:linear-gradient(180deg,#ffffff, #fbfffb);padding:20px;border-radius:16px;box-shadow:0 30px 60px rgba(2,6,23,0.22);color:var(--deep)}
.form-toggle{display:flex;gap:8px;margin-bottom:14px}
.toggle-btn{flex:1;padding:10px;border-radius:10px;border:1px solid #e6eef0;background:#f7fafb;cursor:pointer;font-weight:800}
.toggle-btn.active{background:var(--green);color:#062014;border-color:var(--green)}

/* forms */
.card-form input, .card-form select, .card-form textarea {width:100%;padding:12px;border-radius:10px;border:1px solid #eef3f0;margin-bottom:10px;font-size:14px;background:#fff}
.card-form button{padding:10px 12px;border-radius:10px;border:0;background:var(--orange);color:white;font-weight:800;cursor:pointer}

/* decorative wave */
.hero-separator{position:absolute;left:0;right:0;bottom:-1px;z-index:4;line-height:0}
.hero-wave{width:100%;height:84px;display:block}

/* content panel */
.section-panel{margin-top:-56px;background:linear-gradient(180deg,#e9fbef,#f7fff9);border-radius:20px;box-shadow:0 30px 80px rgba(2,6,23,0.06);padding:48px 20px;position:relative;z-index:2}

/* cards & visuals */
.section-title{font-size:28px;margin:0 0 18px;font-weight:900;color:var(--deep)}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:18px}
.card{background:var(--card);padding:20px;border-radius:14px;box-shadow:0 18px 40px rgba(2,6,23,0.06);border:1px solid rgba(2,6,23,0.03)}

/* leadership */
.leadership{display:grid;grid-template-columns:1fr 1fr;gap:18px;align-items:start}
.leader{background:linear-gradient(180deg,#fff,#fbfffb);padding:18px;border-radius:12px;display:flex;gap:14px;align-items:center;box-shadow:0 12px 30px rgba(2,6,23,0.05)}
.leader img{width:110px;height:110px;border-radius:10px;object-fit:cover;background:#f0f0f0;border:1px solid #eef2f5}

/* calculator */
.calc-grid{display:grid;grid-template-columns:1fr 360px;gap:18px;align-items:start}
.price-row{display:flex;gap:12px;margin-bottom:12px;align-items:center}
.price-row input[type="number"]{width:140px;padding:10px;border-radius:8px;border:1px solid #e6eef0}

/* admin forms */
.admin-section .card{background:linear-gradient(180deg,#fff,#fbfffb)}

/* footer */
.site-footer{padding:36px 0;background:linear-gradient(180deg,#062014,#08261a);color:#dfeee6;margin-top:28px;border-top-left-radius:20px;border-top-right-radius:20px}
.footer-inner{display:flex;justify-content:space-between;align-items:center}

/* responsive */
@media(max-width:900px){
  .hero-overlay{flex-direction:column;padding:28px}
  .leadership{grid-template-columns:1fr}
  .calc-grid{grid-template-columns:1fr}
  .hero-card{width:100%}
}


/* Calculator enhanced styling */
.cards > aside.card { align-self:flex-start; }
.btn.primary { transition:transform .12s ease, box-shadow .12s ease; }
.btn.primary:active { transform:translateY(2px); box-shadow:0 8px 20px rgba(43,186,115,0.12); }
.price-display { font-weight:700; color:var(--deep); margin-top:6px; }
#calc_total { color:var(--green); text-shadow: 0 6px 18px rgba(43,186,115,0.08); }

/* responsive: stack nicely */
@media (max-width:880px) {
  .cards { flex-direction:column; }
  .cards > aside.card { width:100% }
}


/* ===== Fixes applied: header stacking, hero wave, spacing, colors ===== */

/* make header highest so it won't be overlapped by hero visuals */
.site-header{position:sticky;top:0;z-index:1200;}

/* ensure hero content sits above wave */
.hero-overlay, .hero-card, .hero-left { position:relative; z-index:30;}

/* put wave behind header & hero content */
.hero-separator { position:absolute; left:0; right:0; bottom:-2px; z-index:20; pointer-events:none; }
.hero-separator .hero-wave { height:62px; } /* reduce intrusion */

/* section panel spacing: move down and add padding so heading not inside curve */
.section-panel { margin-top:-36px; padding-top:98px; border-radius:18px; }

/* if hero card overlaps on wide screens, reduce width and float it slightly */
.hero-card { width:340px; margin-left:auto; transform:translateY(0); }

/* adjust booking card so it doesn't overflow on small screens */
@media (max-width:1100px){
  .hero-card{ width:360px; position:relative; right:0; top:0; box-shadow:0 18px 40px rgba(2,6,23,0.16); }
  .hero-overlay { flex-direction:column; gap:18px; align-items:center; padding:24px; }
  .section-panel { margin-top:-20px; padding-top:68px; }
}

/* overall color tuning: prefer green + orange accents, reduce white blocks */
:root{
  --green:#21a462;
  --green-dark:#0b3e23;
  --orange:#ff6f3c;
  --card-bg: linear-gradient(180deg,#fbfffb,#f1fff4);
  --accent-grad: linear-gradient(135deg,var(--green), #54c17a 40%, var(--orange));
}
.btn.primary{ background: var(--accent-grad); color:#fff; }
.btn.ghost, .btn.outline{ border:2px solid rgba(11,62,35,0.06); color:var(--green-dark); }

/* reduce large white footprints: card backgrounds subtle green tint */
.card{ background: rgba(255,255,255,0.95); }
.section-panel, .cards .card { background: rgba(245,255,250,0.9); }

/* improved hero title 3D feel */
.text-3d{ text-shadow: 0 6px 24px rgba(0,0,0,0.45); }

/* ensure footer rounded corner not overlap */
.site-footer{ border-top-left-radius:28px;border-top-right-radius:28px; }

/* small fix: booking form panel doesn't overflow wave */
.booking-card { max-width:360px; box-sizing:border-box; }


/* ===== KTM-style theme (orange + black) applied as requested ===== */
:root{
  --ktm-orange: #ff6600;
  --ktm-black: #0b0b0b;
  --ktm-dark: #111111;
  --ktm-light: #1f1f1f;
  --ktm-card: linear-gradient(180deg, rgba(255,102,0,0.06), rgba(17,17,17,0.12));
  --ktm-accent: linear-gradient(90deg, var(--ktm-orange), #ff8a3d);
  --text-on-dark: #ffffff;
}
/* apply to body background mildly dark */
body{ background: linear-gradient(180deg, #0b0b0b, #121212); color:var(--text-on-dark); }
/* header contrast */
.site-header{ background: rgba(255,255,255,0.03); border-bottom:1px solid rgba(255,255,255,0.04); color:var(--text-on-dark); }
.site-header .nav a{ color:var(--text-on-dark); opacity:0.95; }
.logo { filter: none; }
.hero-section{ border-bottom-left-radius:40px; border-bottom-right-radius:40px; background:linear-gradient(180deg, rgba(0,0,0,0.45), rgba(0,0,0,0.6)); }
/* cards become dark with orange highlights */
.card, .hero-card, .booking-card, .cards .card { background: rgba(17,17,17,0.95); color:var(--text-on-dark); border:1px solid rgba(255,255,255,0.03); box-shadow: 0 20px 60px rgba(0,0,0,0.6); }
/* section panel with subtle orange top band */
.section-panel { background: linear-gradient(180deg, rgba(255,102,0,0.06), rgba(17,17,17,0.06)); color:var(--text-on-dark); }
/* buttons: orange primary, dark outline */
.btn.primary { background: var(--ktm-accent); color:var(--text-on-dark); box-shadow: 0 14px 40px rgba(255,102,0,0.12); }
.btn.ghost, .btn.outline { background: transparent; border:1px solid rgba(255,255,255,0.06); color:var(--text-on-dark); }
/* hero text adjusted to stand out on dark bg */
.hero-title, .text-3d { color:var(--text-on-dark); text-shadow: 0 10px 30px rgba(0,0,0,0.7); }
/* forms input on dark cards */
.card-form input, .card-form select, .card-form textarea, input, textarea { background: rgba(255,255,255,0.04); color:var(--text-on-dark); border:1px solid rgba(255,255,255,0.06); }
.price-display, #calc_total, #items_total { color: var(--ktm-orange); font-weight:900; }
/* reduce opacity of muted text to keep emphasis */
.muted{ color: rgba(255,255,255,0.75); }
footer.site-footer{ background: linear-gradient(180deg,#0b0b0b,#000000); color:var(--text-on-dark); }


/* Ensure hero separator stays behind hero content and not overlapping headings */
.hero-separator { z-index:5; bottom:-2px; }
.section-panel { margin-top:-18px; padding-top:90px; }
.hero-overlay { align-items:center; gap:28px; }
.hero-card { margin-right:20px; }


/* Center hero-overlay children vertically and keep booking card in left middle */
.hero-overlay { display:flex; align-items:center; justify-content:space-between; padding:40px 20px; }
.hero-card { align-self:center; }
.hero-left { flex:1; padding-left:40px; }
@media (max-width:1100px){ .hero-overlay { flex-direction:column; padding:24px; } .hero-left{ padding-left:0; } .hero-card{ width:100%; } }

/* Accessibility & layout fixes applied */

/* === Accessibility & layout fixes applied: readable form fields, hero-card sizing, no-overlap rules === */

/* Make form inputs/selects/textarea clearly readable: white bg with dark text for forms */
.card-form input, .card-form select, .card-form textarea,
input, select, textarea {
  background: #ffffff !important;
  color: #0b0b0b !important;
  border: 1px solid rgba(0,0,0,0.12) !important;
  box-shadow: none !important;
}

/* Ensure select options show readable text */
.card-form select option, select option { color: #0b0b0b !important; background:#fff; }

/* Reduce franchise card height and allow scrolling if content exceeds */
.hero-card, .booking-card { max-height: 520px; overflow:auto; padding:18px; box-sizing:border-box; }

/* Ensure hero overlay does not push content under header */
.site-header { position: sticky; top: 0; z-index: 1400; }
.hero-section { padding-top: 18px; }
/* Ensure section panel is pushed down enough */
.section-panel { margin-top: -18px; padding-top: 110px; }

/* Avoid hero card overlapping the section panel */
.hero-separator { z-index: 8; }
.hero-overlay { z-index: 30; position:relative; }

/* Make form labels bold and visible */
.card-form label, .card-form h4 { color: #0b0b0b !important; font-weight:700; }

/* Make small text on dark cards visible where needed */
.card .muted, .muted { color: rgba(255,255,255,0.85) !important; }

/* Ensure calculator values are visible on dark bg */
#items_total, #tax_total, #calc_total, .price-display, #iron_total, #plastic_total, #tin_total, #other_total, #books_total {
  color: var(--ktm-orange) !important;
  font-weight: 800;
}

/* On smaller screens, remove negative margins causing overlap */
@media (max-width: 900px){
  .section-panel { margin-top: 0; padding-top: 40px; }
  .hero-card { max-height: none; width:100%; }
  .hero-overlay { padding: 18px; flex-direction:column; gap:14px; }
}


/* Toggle buttons for pickup/franchise */
.form-toggle{ display:flex; gap:8px; margin-bottom:14px; }
.toggle-btn{ flex:1; padding:10px; border-radius:10px; border:1px solid rgba(0,0,0,0.06); background:transparent; cursor:pointer; font-weight:700; color:rgba(255,255,255,0.9); }
.toggle-btn.active{ color: var(--ktm-orange); background: rgba(255,255,255,0.04); border-color: rgba(255,102,0,0.6); box-shadow: 0 8px 20px rgba(255,102,0,0.06); }
/* hidden class */
.hidden{ display:none !important; }



/* quick booking color */
.quick-booking h3, .quick-booking .title, .quick-booking .heading {
  color: var(--ktm-orange) !important;
  font-weight:800;
}
/* style for active toggle orange text */
.toggle-btn.active { color: var(--ktm-orange) !important; border-color: rgba(255,102,0,0.6) !important; }


/* FORCE: Quick Booking heading orange (very specific) */
.hero-card .quick-booking h3, .hero-card .quick-booking .heading, .hero-card .quick-booking .title,
.quick-booking h3, .quick-booking .heading, .quick-booking .title {
  color: #ff6600 !important;
  -webkit-text-stroke: 0px rgba(0,0,0,0.0);
  font-weight:800 !important;
}
.quick-booking-title {
  color: #ff6600 !important; /* Orange */
  font-weight: 800;
}
/* Make Quick Booking heading orange */
#pickupForm h4 {
  color: #ff6600 !important;   /* bright orange */
  font-weight: bold;           /* makes it bolder */
}
/* =========================
   Aone KABADI — UI fixes
   Insert at the bottom of styles.css
   ========================= */

/* Colors used */
:root {
  --ktm-orange: #ff6600;
  --ktm-green:  #2a9d47;
  --muted:      #6b6f6b;
  --card-bg:    #ffffff;
  --deep:       #163d2b;
}

/* Quick Booking heading orange */
.quick-booking-title,
#pickupForm h4,
#franchiseForm h4 {
  color: var(--ktm-orange) !important;
  font-weight: 800;
  margin: 0 0 10px;
}

/* Toggle buttons */
.form-toggle {
  display:flex;
  gap:8px;
  margin-bottom:14px;
  align-items:center;
}
.form-toggle .toggle-btn {
  flex:1;
  border-radius:10px;
  padding:10px 14px;
  border:1px solid rgba(255,255,255,0.12);
  background:transparent;
  color:#ffffff;
  font-weight:700;
  cursor:pointer;
  transition:all .18s ease;
}
.form-toggle .toggle-btn.active {
  background: linear-gradient(90deg,var(--ktm-orange), #ff8a3d);
  color:#fff;
  box-shadow: 0 6px 16px rgba(255,102,0,0.12);
}
.form-toggle .toggle-btn:not(.active) {
  background: rgba(255,255,255,0.03);
  color: rgba(255,255,255,0.95);
}
.form-toggle .toggle-btn:focus { outline: 3px solid rgba(255,102,0,0.12); }

/* helper */
.hidden { display:none !important; }

/* ensure form inputs are visible on dark card */
.booking-card input,
.booking-card select,
.booking-card textarea {
  background: #fff;
  color: #111;
  border: 1px solid #e6efe6;
  padding:10px;
  border-radius:8px;
}

/* smaller screens */
@media (max-width:860px) {
  .hero-overlay { flex-direction: column; gap:20px; }
  .hero-card { width:100%; }
}

/* small transition for forms */
.toggle-form { transition: opacity .25s ease, transform .20s ease; }
.toggle-form.hidden { opacity:0; transform: translateY(6px); pointer-events:none; }
.toggle-form:not(.hidden){ opacity:1; transform:none; pointer-events:auto; }
/* Toggle button styling */
.form-toggle .toggle-btn {
  background: transparent;
  border: 2px solid orange;
  color: orange;
  font-weight: bold;
  padding: 8px 20px;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s ease;
}

/* When active */
.form-toggle .toggle-btn.active {
  background: orange;
  color: black;   /* 👈 THIS makes the text black when active */
}

/* Optional hover effect */
.form-toggle .toggle-btn:hover:not(.active) {
  background: rgba(255, 165, 0, 0.1);
}
/* =========================
   Calculator Fixes — inserted at end
   ========================= */

/* Force calculator cards to be light theme for readability */
#calculator .card,
#calculator div[style*="background"],
#calculator aside.card {
  background: #ffffff !important;
  color: #111 !important;
  border: 1px solid #e6efe6 !important;
  box-shadow: 0 12px 30px rgba(0,0,0,0.08) !important;
}

/* Calculator inputs: white bg, black text */
#calculator input[type="number"] {
  background: #fff !important;
  color: #111 !important;
  border: 1px solid #e6efe6 !important;
  font-weight:600;
}

/* Item names and labels inside calculator */
#calculator .calc-row div {
  color: #111 !important;
}

/* Price labels (small grey) */
#calculator .calc-row div[style*="font-size:13px"],
#calculator .calc-row .price-label {
  color: var(--muted) !important;
}

/* Totals in orange */
#calculator .calc-row div[id$="_total"],
#calculator #items_total,
#calculator #tax_total,
#calculator #calc_total {
  color: var(--ktm-orange) !important;
  font-weight: 800 !important;
}

/* Grand total bigger */
#calculator #calc_total {
  font-size: 28px !important;
  font-weight: 900 !important;
  text-shadow: 0 4px 10px rgba(255,102,0,0.08);
}

/* Buttons inside calculator */
#calculator .btn.primary {
  background: var(--ktm-accent);
  color: #fff !important;
  font-weight: 800;
}
#calculator .btn.outline {
  background: #fff;
  border: 2px solid var(--ktm-orange);
  color: var(--ktm-orange) !important;
  font-weight: 700;
}

/* Estimate card text readable */
#calculator aside.card {
  color: #111 !important;
}

/* Muted helper text inside calculator */
#calculator small,
#calculator .muted {
  color: var(--muted) !important;
}

/* === About page small image carousel === */
.image-carousel {
  overflow: hidden;
  position: relative;
  width: 100%;
  padding: 12px 0;
}

.image-track {
  display: flex;
  gap: 14px;
  animation: scroll 40s linear infinite; /* continuous scroll */
}

/* === About page image carousel (bigger images) === */
.image-carousel {
  overflow: hidden;
  position: relative;
  width: 100%;
  padding: 16px 0;
}

.image-track {
  display: flex;
  gap: 18px;
  animation: scroll 40s linear infinite; /* continuous scroll */
}

.image-carousel img {
  height: 260px;       /* 🔥 bigger images (was 120px) */
  width: auto;
  border-radius: 14px;
  object-fit: cover;
  flex-shrink: 0;
  box-shadow: 0 6px 18px rgba(0,0,0,0.25);
  transition: transform 0.3s ease;
}

/* Hover effect */
.image-carousel img:hover {
  transform: scale(1.08);
}

/* Scroll animation */
@keyframes scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* Pause when hovering carousel */
.image-carousel:hover .image-track {
  animation-play-state: paused;
}

/* Responsive (medium screens) */
@media (max-width: 1024px) {
  .image-carousel img {
    height: 200px;
  }
}

/* Responsive (small screens) */
@media (max-width: 768px) {
  .image-carousel img {
    height: 140px;
  }
}
/* ====== Supercool Contact Styles (append) ====== */
:root{
  --bg-dark:#070707;
  --panel:#0f0f0f;
  --muted:#cfcfcf;
  --accent1:#ff7a18;
  --accent2:#ff4e50;
  --neon:#18ffff;
  --glass: rgba(255,255,255,0.03);
  --radius:14px;
  --shadow-lg: 0 18px 50px rgba(0,0,0,0.7);
}

.contact-wrap{
  display:grid;
  grid-template-columns: 1fr 360px;
  gap:22px;
  align-items:start;
  margin-top:18px;
}

/* Card base */
.card{
  background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
  border-radius: var(--radius);
  padding:0;
  position:relative;
  overflow:hidden;
  box-shadow: var(--shadow-lg);
  border:1px solid rgba(255,255,255,0.03);
  backdrop-filter: blur(6px) saturate(120%);
}

/* inner padding so we can add glow shapes absolutely positioned */
.card .card-inner{padding:28px 28px 32px 28px; position:relative; z-index:2}

/* left form card specifics */
.form-card{min-height:300px;}
.form-orb{
  position:absolute; right:-120px; top:-80px; width:420px; height:420px;
  background: radial-gradient(circle at 30% 30%, rgba(255,126,0,0.10), transparent 20%),
              radial-gradient(circle at 70% 70%, rgba(24,255,255,0.03), transparent 30%);
  transform: rotate(16deg);
  filter: blur(28px);
  pointer-events:none; opacity:0.95;
}

/* info card specifics */
.info-card{display:flex; align-items:stretch; min-height:220px;}
.info-orb{
  position:absolute; left:-100px; bottom:-80px; width:300px; height:300px;
  background: radial-gradient(circle at 30% 30%, rgba(24,255,255,0.06), transparent 20%),
              radial-gradient(circle at 70% 70%, rgba(255,126,0,0.03), transparent 30%);
  transform: rotate(-16deg);
  filter: blur(18px);
  pointer-events:none;
}

/* Form layout */
.contact-form{display:block}
.row.two{display:grid; grid-template-columns:1fr 1fr; gap:12px;}
.row.full{margin-top:10px}

/* floating labels */
.field{position:relative;height:52px;background:transparent;border-radius:8px;display:flex;align-items:center}
.field input,
.field textarea{
  width:100%; background:transparent; border:1px solid rgba(255,255,255,0.05);
  padding:14px 14px 12px 14px; outline:none; color:var(--muted); font-size:15px;
  border-radius:8px; resize:vertical; transition: box-shadow .18s, border-color .18s;
  backdrop-filter: blur(2px);
}
.field textarea{min-height:120px;padding:14px}
.field input:focus, .field textarea:focus{
  box-shadow: 0 6px 28px rgba(24,255,255,0.03), 0 2px 8px rgba(255,126,0,0.03);
  border-color: rgba(255,255,255,0.12);
}

/* label */
.flabel{
  position:absolute; left:14px; top:12px; font-size:13px; color:rgba(255,255,255,0.55);
  pointer-events:none; transition: transform .18s, font-size .18s, top .18s, color .18s;
  background:transparent; padding:0 6px;
}
.field input:focus + .flabel,
.field input:not(:placeholder-shown) + .flabel,
.field textarea:focus + .flabel,
.field textarea:not(:placeholder-shown) + .flabel{
  transform: translateY(-22px);
  font-size:12px;
  color:var(--neon);
}

/* we use placeholder trick so :placeholder-shown works */
.field input::placeholder, .field textarea::placeholder{color:transparent}

/* Actions */
.actions{display:flex;gap:16px;align-items:center;margin-top:14px}
.btn{
  padding:12px 18px;border-radius:12px;border:0;font-weight:700;cursor:pointer;
  background:linear-gradient(90deg,var(--accent1),var(--accent2)); color:white; position:relative;
  box-shadow: 0 10px 30px rgba(255,110,60,0.08), 0 2px 12px rgba(0,0,0,0.6);
  transition: transform .12s, box-shadow .12s;
}
.btn:active{transform:translateY(1px);}
.btn-glow{overflow:visible}
.btn-glow::after{
  content:""; position:absolute; inset:-6px; border-radius:14px; z-index:-1;
  background: radial-gradient(circle at 10% 10%, rgba(255,120,60,0.12), transparent 10%),
              linear-gradient(90deg, rgba(24,255,255,0.03), rgba(255,126,0,0.03));
  filter: blur(18px); opacity:0.9; transition:opacity .25s;
}
.btn-glow:hover::after{opacity:1; filter: blur(22px)}

/* small hint text */
.hint.muted{color:rgba(255,255,255,0.55); font-size:13px}

/* info card content */
.info-list{list-style:none;padding:0;margin:6px 0 12px 0}
.info-list li{display:flex;justify-content:space-between;padding:12px 12px;border-radius:10px;background:linear-gradient(180deg, rgba(255,255,255,0.008), transparent); margin-bottom:10px}
.info-list strong{color:var(--muted); font-weight:600}
.info-list span{color:#fff; opacity:0.92}

/* socials */
.socials{display:flex;gap:8px;margin-top:6px}
.chip{display:inline-block;padding:8px 10px;border-radius:10px;background:rgba(255,255,255,0.02); color:var(--muted); text-decoration:none; font-weight:600}

/* responsive */
@media (max-width:980px){
  .contact-wrap{grid-template-columns: 1fr; }
  .form-orb{display:none}
  .info-orb{display:none}
  .card .card-inner{padding:18px}
}
.brand img {
  height: 70px;   /* Bigger logo */
  max-height: px;
}
.site-footer img {
  height: 60px;   /* Bigger footer logo */
}

/* =========================
   CLEAN IMPROVEMENTS
   ========================= */

/* Unify logo size across header & footer */
.site-logo {
  height: 70px;
  max-height: 70px;
  width: auto;
  display: inline-block;
}

/* Remove duplicated .toggle-btn confusion */
.form-toggle .toggle-btn {
  border-radius: 10px;
  padding: 10px 14px;
  border: 1px solid rgba(255,255,255,0.12);
  background: transparent;
  color: rgba(255,255,255,0.95);
  font-weight: 700;
  cursor: pointer;
  transition: all .18s ease;
}
.form-toggle .toggle-btn.active {
  background: linear-gradient(90deg, var(--ktm-orange), #ff8a3d);
  color: #fff;
  box-shadow: 0 6px 16px rgba(255,102,0,0.12);
}

/* Make carousel definition single & clean */
.image-carousel img {
  height: 260px;
  border-radius: 14px;
  object-fit: cover;
  box-shadow: 0 6px 18px rgba(0,0,0,0.25);
  transition: transform 0.3s ease;
}
.image-carousel img:hover {
  transform: scale(1.08);
}

#contactReset {
  color: #ff6600;  /* pick any color you like */
  font-weight: 600;
}

/* ✅ General responsive tweaks */
body {
  font-size: 16px;
  line-height: 1.6;
}

/* Header and logo */
.site-header {
  padding: 10px 16px;
}
.site-logo {
  height: 80px; /* smaller logo for mobile */
}

/* Navigation (turn into hamburger menu on small screens) */
.nav {
  display: flex;
  gap: 18px;
}
@media (max-width: 768px) {
  .nav {
    flex-direction: column;
    background: #111;
    position: absolute;
    top: 80px;
    right: 0;
    left: 0;
    padding: 20px;
    display: none; /* default hidden */
  }
  .nav.active { display: flex; }  /* toggle open */
}

/* Contact grid */
@media (max-width: 980px) {
  .contact-grid {
    grid-template-columns: 1fr; /* stack form and info */
  }
  .info-card {
    order: 2;
  }
  .form-card {
    order: 1;
  }
}

/* District cards */
.district-card img {
  height: auto;
  max-height: 100px;
}
@media (max-width: 600px) {
  .districts-grid {
    grid-template-columns: 1fr 1fr; /* 2 per row */
  }
}
@media (max-width: 400px) {
  .districts-grid {
    grid-template-columns: 1fr; /* 1 per row */
  }
}

/* ====== Override: Force KTM orange + readable text inside about/cards ====== */
/* Put this at the BOTTOM of your styles.css so it overrides previous rules */

:root {
  --ktm-orange: #ff6600; /* change if you prefer #ff7a18 or #ff6f3c */
  --text-on-dark-strong: rgba(255,255,255,0.95);
  --text-on-dark-soft: rgba(255,255,255,0.78);
}

/* Target card headings (including links inside headings) */
#about .card h3,
#about .card h3 a,
.cards .card h3,
.cards .card h3 a {
  color: var(--ktm-orange) !important;
  font-weight: 800;
  text-decoration: none;
}

/* Card description and muted text (make readable on dark bg) */
#about .card p,
.cards .card p,
#about .card .muted,
.cards .card .muted {
  color: var(--text-on-dark-soft) !important;
  opacity: 0.98;
}

/* Ensure any anchor links inside cards are orange (not blue) */
#about .card a,
.cards .card a {
  color: var(--ktm-orange) !important;
  text-decoration: underline; /* optional: remove if you don't want underline */
  font-weight:700;
}

/* SVG icons inside cards: set stroke/fill to orange */
#about .card .icon svg path,
#about .card .icon svg circle,
#about .card .icon svg rect,
#about .card .icon svg line,
#about .card .icon svg polyline,
#about .card .icon svg polygon {
  stroke: var(--ktm-orange) !important;
  fill: none !important; /* keeps icons outlined; remove if you want filled icons */
}

/* Stat / impact numbers: orange and bold */
#about .stat .num,
.cards .stat .num,
.section-panel .stat .num {
  color: var(--ktm-orange) !important;
  font-weight: 900 !important;
}

/* CTA small-note and other highlights: make orange-accent visible */
#about .small-note,
#about .cta-wrap a.btn-outline,
.cards .card .highlight {
  color: var(--ktm-orange) !important;
}

/* If any global link color is still leaking into cards, force card text color */
.cards .card, #about .card {
  color: var(--text-on-dark-strong) !important;
}

/* OPTIONAL: If your blue comes from a specific utility class, neutralize it inside #about */
#about .text-blue, #about .blue, #about a.text-blue {
  color: var(--ktm-orange) !important;
}

/* Small responsive tweak: keep headings legible on small screens */
@media (max-width:720px) {
  #about .card h3 { font-size:15px; }
  #about .card p { font-size:13.5px; }
}
/* ====== FORCE: Make .cta-small button text readable on orange bg ======
   Paste this at the VERY END of your styles.css (after all other rules)
   This uses very specific selectors + !important to beat other styles.
====================================================================== */

.cards-initiative .cta-small,
.cards .cta-small,
.card .cta-small,
a.cta-small,
a.cta-small:link,
a.cta-small:visited,
a.cta-small:hover,
a.cta-small:active,
a.cta-small:focus {
  color: #000 !important;             /* black text for maximum contrast */
  background: linear-gradient(90deg,#ff6600,#ff8a3d) !important; /* keep orange bg */
  text-decoration: none !important;
  font-weight: 900 !important;
  text-shadow: none !important;
  -webkit-text-fill-color: #000 !important; /* extra protection for some UA */
  outline: none !important;
}

/* Ensure padding and contrast remain (optional nicer hover) */
.cards-initiative .cta-small,
.cards .cta-small {
  padding: 8px 12px !important;
  border-radius: 10px !important;
  box-shadow: 0 8px 24px rgba(255,102,0,0.12) !important;
}

/* Hover: slightly darker bg, keep text black (or switch to white if you prefer) */
.cards-initiative .cta-small:hover,
.cards .cta-small:hover {
  opacity: 0.95 !important;
  filter: brightness(0.98) !important;
  color: #000 !important;
}

/* If some rule still forces an orange color on links INSIDE the button, neutralize it */
.cards-initiative .cta-small * ,
.cards .cta-small * {
  color: inherit !important;
}


/* ✅ Force text inside orange badges to black */
.cards-initiative .badge.highlight {
  background: linear-gradient(90deg,#ff6600,#ff8a3d);
  color: #000 !important;   /* make text black */
  font-weight: 800;
  text-shadow: none !important;
}
/* ===== FORCE: horizontal badge layout for .cards-initiative =====
   Paste at the END of your stylesheet so it overrides other rules.
================================================================== */

.cards-initiative .card {
  display: flex !important;
  flex-direction: column !important; /* keep title/desc above badges */
}

/* Keep meta-row a single horizontal line (no stacking) */
.cards-initiative .meta-row {
  display: flex !important;
  flex-direction: row !important;
  gap: 12px !important;
  align-items: center !important;
  justify-content: flex-start !important;
  margin-top: auto !important;   /* push badges to bottom of card */
  flex-wrap: nowrap !important;  /* <-- prevents vertical wrapping */
  overflow: hidden !important;
}

/* If the badges are longer than space, allow horizontal scrolling on tiny screens */
.cards-initiative .meta-row {
  -webkit-overflow-scrolling: touch;
}

/* badge base */
.cards-initiative .badge {
  display: inline-flex !important;
  align-items: center !important;
  white-space: nowrap !important;
  padding: 8px 14px !important;
  border-radius: 12px !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  min-height: 40px !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  max-width: 320px !important;
}

/* primary orange badge */
.cards-initiative .badge.highlight,
.cards-initiative .meta-row .badge:first-child {
  background: linear-gradient(90deg,#ff6600,#ff8a3d) !important;
  color: #000 !important;
  border: 0 !important;
  box-shadow: 0 8px 20px rgba(255,102,0,0.08) !important;
}

/* secondary badge style */
.cards-initiative .badge:not(.highlight) {
  background: rgba(255,255,255,0.03) !important;
  color: rgba(255,255,255,0.92) !important;
  border: 1px solid rgba(255,255,255,0.04) !important;
  font-weight: 700 !important;
}

/* if horizontal space is too small, allow users to scroll the badge row horizontally */
@media (max-width:520px) {
  .cards-initiative .meta-row { overflow-x: auto !important; padding-bottom: 6px !important; }
  .cards-initiative .badge { min-width: 120px !important; max-width: 48% !important; }
  .cards-initiative .meta-row::-webkit-scrollbar { height: 8px; }
  .cards-initiative .meta-row::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.06); border-radius: 10px; }
}

/* make sure inserted JS highlight/class logic doesn't reorder visually */
.cards-initiative .meta-row .badge { order: 0 !important; }

/* protect badge text color inheritance */
.cards-initiative .badge * { color: inherit !important; }

/* === FIX badges breaking into two lines === */

/* Keep badges in one horizontal row */
.cards-initiative .meta-row {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 12px !important;
  margin-top: auto !important;
  flex-wrap: nowrap !important;          /* ❌ no wrapping */
  overflow-x: auto !important;           /* allow scroll if too many badges */
  -webkit-overflow-scrolling: touch;     /* smooth scroll on mobile */
}

/* Fix badge pill width and prevent text breaking */
.cards-initiative .badge {
  white-space: nowrap !important;        /* keep text on one line */
  flex: 0 0 auto !important;             /* don't shrink */
  min-width: auto !important;
  max-width: none !important;            /* remove restrictive max-width */
  padding: 10px 16px !important;
  font-size: 13px !important;
  line-height: 1.2 !important;
  text-overflow: ellipsis;
}

/* Orange highlight pill stays primary */
.cards-initiative .badge.highlight,
.cards-initiative .meta-row .badge:first-child {
  background: linear-gradient(90deg,#ff6600,#ff8a3d) !important;
  color: #000 !important;
  border: 0 !important;
  box-shadow: 0 8px 20px rgba(255,102,0,0.08) !important;
}

/* Grey secondary pills */
.cards-initiative .badge:not(.highlight) {
  background: rgba(255,255,255,0.05) !important;
  color: rgba(255,255,255,0.9) !important;
  border: 1px solid rgba(255,255,255,0.1) !important;
  font-weight: 700 !important;
}
/* =========================
   MOBILE-FRIENDLY OVERRIDE
   Paste this at the end of styles.css
   ========================= */

/* Global safe defaults */
html, body { -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; }
* { box-sizing: border-box; }

/* Prevent horizontal overflow site-wide */
body { overflow-x: hidden; }

/* Make images, svgs and iframes fully responsive */
img, svg, video, iframe { max-width: 100%; height: auto; display: block; }

/* Header / hero stacking and z-index safety */
.site-header { position: sticky; top: 0; z-index: 1500 !important; }
.hero-overlay { position: relative; z-index: 40 !important; }

/* Reduce hero min-height on small screens so content doesn't get pushed below fold */
@media (max-width: 980px) {
  .hero-section { height: auto; min-height: 420px; padding-bottom: 8px; }
  .hero-overlay { padding: 20px 16px; gap: 16px; align-items: stretch; }
  .hero-left { max-width: 100%; width: 100%; padding: 0; }
  .hero-title { font-size: clamp(28px, 8vw, 44px); line-height: 1.05; }
  .hero-sub { max-width: 100%; font-size: 0.95rem; }
  .hero-actions { flex-wrap: wrap; gap: 10px; }
  .hero-card { width: 100% !important; max-width: 100% !important; margin: 0; }
}

/* Booking / hero-card safe scrolling if tall forms appear */
.hero-card, .booking-card {
  box-sizing: border-box;
  max-height: 68vh;       /* allow the card to fit on small screens */
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 16px;
}

/* Avoid hero wave overlapping headings on small devices */
.hero-separator { z-index: 10 !important; pointer-events: none; }
.section-panel { margin-top: 0 !important; padding-top: 48px !important; }

/* Contact section — grid -> single column on small screens; ensure no overlap */
#contact .contact-grid {
  display: grid !important;
  grid-template-columns: 1fr 420px;
  gap: 20px;
}
@media (max-width: 980px) {
  #contact .contact-grid { grid-template-columns: 1fr !important; }
  #contact .info-card { order: 2; grid-template-columns: 1fr !important; padding: 16px !important; }
  #contact .form-card { order: 1; padding: 14px !important; }
  #contact .info-card img { max-height: 220px; object-fit: cover; }
}

/* Calculator: make the left column fluid and the right card responsive */
#calc-left { min-width: 0 !important; } /* allow shrink on small screens */
.cards[style*="display:flex"] { flex-wrap: wrap; align-items: stretch; }
@media (max-width: 940px) {
  #calc-left { min-width: 0 !important; width: 100% !important; }
  aside.card[style*="min-width:"] { width: 100% !important; max-width: none !important; margin-top: 12px; }
  .cards { gap: 12px !important; }
}

/* Prevent fixed-width controls from causing overflow */
.calc-row input.calc-input,
.price-row input[type="number"],
.card-form input,
.card-form select,
.card-form textarea,
input[type="number"],
input[type="text"],
input[type="tel"],
input[type="email"] {
  max-width: 100% !important;
  width: 100% !important;
}

/* Founders portraits: avoid tall fixed heights on tiny viewports */
.founder-card-portrait .photo-wrap {
  height: 380px; /* default standing pose */
  min-height: 220px;
  max-height: 44vh;
}
@media (max-width: 768px) {
  .founder-card-portrait .photo-wrap { height: 300px; max-height: 36vh; }
}
@media (max-width: 420px) {
  .founder-card-portrait .photo-wrap { height: 240px; max-height: 32vh; }
  .founder-card-portrait .bio { font-size: 13px; line-height: 1.45; }
}

/* Badge row: allow horizontal scroll instead of wrapping/overflowing container */
.cards-initiative .meta-row {
  display: flex !important;
  gap: 10px !important;
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch !important;
  padding-bottom: 6px !important;
}
.cards-initiative .meta-row::-webkit-scrollbar { height: 8px; }
.cards-initiative .meta-row::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.06); border-radius: 8px; }

/* Make sure long badges don't break layout */
.cards-initiative .badge { white-space: nowrap; flex: 0 0 auto; }

/* Forms: keep inputs readable on dark cards and avoid absolute placements */
.card-form input, .card-form select, .card-form textarea, .card input, .card textarea {
  background: #fff !important;
  color: #0b0b0b !important;
  width: 100% !important;
  box-shadow: none !important;
}

/* Buttons: scale down slightly on mobile */
.btn { font-size: 14px; padding: 10px 14px; }
@media (max-width:420px) {
  .btn { font-size: 13px; padding: 9px 12px; }
  .hero-title { font-size: 28px; }
}

/* Avoid banner/logo pushing content: smaller logo on tiny screens */
.site-logo { height: 70px; max-height: 72px; }
@media (max-width:420px) { .site-logo { height: 56px; } }

/* Prevent map / info-card from overflowing in contact section */
.info-card .info-map img { width: 100%; height: auto; max-height: 220px; object-fit: cover; }

/* Safety: treat any element with fixed left-right coordinates to wrap */
[style*="min-width:420px"], [style*="min-width:320px"] { max-width: 100% !important; box-sizing: border-box !important; }

/* Special: ensure hero-left text doesn't get covered by booking card on very narrow widths */
@media (max-width:640px){
  .hero-overlay { align-items:flex-start; }
  .hero-card { margin-top: 8px; }
}

/* Final precaution: remove any negative margin that may push elements under others */
* { margin-block-start: 0; margin-block-end: 0; }

/* Developer helper: show outlines in dev only (comment out in production) */
/* @media (max-width: 980px) { * { outline: 0.5px dashed rgba(255,255,255,0.03); } } */
/* MOBILE-FRIENDLY: Floating mobile menu button + full-screen sliding menu */
#mobile-menu-btn {
  display: none;                 /* hidden on desktop */
  position: fixed;
  left: 18px;
  bottom: 18px;
  height: 56px;
  width: 56px;
  border-radius: 999px;
  background: linear-gradient(180deg,#ff7a00,#ff6b00);
  border: none;
  box-shadow: 0 8px 20px rgba(0,0,0,0.45);
  z-index: 3500;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 8px;
}
#mobile-menu-btn svg { display: block; fill: #fff; }

@media (max-width: 980px) {
  #mobile-menu-btn { display: flex; }
}

/* Mobile nav panel (hidden by default) */
.mobile-nav {
  position: fixed;
  inset: 0;
  z-index: 3400;
  display: none;
  pointer-events: none;
}

/* visible state */
.mobile-nav.open {
  display: block;
  pointer-events: auto;
}

/* backdrop to dim page and capture clicks */
.mobile-nav-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.56);
  opacity: 0;
  transition: opacity 220ms ease;
  pointer-events: auto;
}

/* sliding panel */
.mobile-nav-inner {
  position: absolute;
  inset: 0 auto 0 0;           /* anchor left */
  width: 85%;
  max-width: 420px;
  height: 100%;
  background: #0b0b0b;
  color: #fff;
  transform: translateX(-18%);
  transition: transform 260ms cubic-bezier(.2,.9,.2,1);
  box-shadow: 8px 0 24px rgba(0,0,0,0.6);
  padding: 32px 20px 20px 20px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

/* when open, slide in fully */
.mobile-nav.open .mobile-nav-inner { transform: translateX(0%); }
.mobile-nav.open .mobile-nav-backdrop { opacity: 1; }

/* close button */
.mobile-nav-close {
  position: absolute;
  right: 12px;
  top: 12px;
  background: transparent;
  color: #fff;
  border: none;
  font-size: 34px;
  line-height: 1;
  padding: 6px 10px;
  cursor: pointer;
}

/* list styling */
.mobile-nav-list {
  list-style: none;
  margin: 36px 0 16px 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 18px;
  align-items: stretch;
}
.mobile-nav-list a {
  display: block;
  padding: 12px 16px;
  text-decoration: none;
  color: #fff;
  font-weight: 700;
  font-size: 18px;
  border-radius: 10px;
}
.mobile-nav-list a:hover,
.mobile-nav-list a:focus {
  background: rgba(255,255,255,0.04);
}

/* ensure no horizontal overflow on small devices */
html, body { overflow-x: hidden; }

/* make sure menu button not hidden behind footer / other fixed layers */
@media (max-width: 420px) {
  #mobile-menu-btn { left: 12px; bottom: 12px; width: 52px; height: 52px; }
  .mobile-nav-inner { width: 92%; max-width: 380px; padding: 22px; }
}

/* ================= UNIQUE KTM THEMED TESTIMONIALS ================= */
:root {
  --ktm-orange: #ff6600;
  --ktm-dark: #0f0f0f;
  --ktm-soft: #181818;
  --muted-light: rgba(255,255,255,0.65);
}

#testimonials { background: linear-gradient(180deg, rgba(17,17,17,0.02), transparent 40%); }

/* header */
.test-hero { text-align:center; margin-bottom:18px; position:relative; }
.section-title.ktm { color: var(--ktm-orange); font-weight:800; letter-spacing:0.2px; font-size:clamp(1.4rem, 2.4vw, 2rem); position:relative; display:inline-block; padding:6px 18px; background: linear-gradient(90deg, rgba(255,102,0,0.06), rgba(255,102,0,0.02)); border-radius:8px; }
.test-sub { color:var(--muted-light); margin-top:10px; font-size:0.98rem; }

/* frame & accent */
.test-frame { position:relative; display:flex; align-items:center; gap:12px; margin-top:18px; }
.accent-stripe { position:absolute; left:0; top:0; bottom:0; width:6px; background: linear-gradient(180deg, #ff8a3d, var(--ktm-orange)); border-radius:4px; box-shadow: 0 6px 18px rgba(255,102,0,0.06); }

/* nav buttons */
.test-nav { background:transparent; border:0; font-size:28px; color:var(--ktm-orange); width:44px; height:44px; display:flex; align-items:center; justify-content:center; cursor:pointer; z-index:3; }
.test-nav:active { transform:scale(0.96); }

/* grid: mobile horizontal scroll with snap */
.test-grid {
  display:grid;
  gap:18px;
  grid-auto-flow: column;
  grid-auto-columns: minmax(260px, 340px);
  overflow-x:auto;
  padding:14px;
  scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;
}

/* card style: deep embossed rectangle with soft inner stripe */
.test-card {
  position:relative;
  background: linear-gradient(180deg, var(--ktm-soft), #0c0c0c);
  border-radius:14px;
  padding:18px;
  min-height:170px;
  color:#fff;
  box-shadow: 0 10px 30px rgba(0,0,0,0.6), inset 0 1px 0 rgba(255,255,255,0.02);
  scroll-snap-align:center;
  overflow:hidden;
}

/* soft diagonal highlight */
.test-card::before {
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(120deg, rgba(255,102,0,0.02) 0%, rgba(255,102,0,0.00) 22%);
  transform:translateX(-8%);
  pointer-events:none;
}

/* large faint quote mark */
.quote-mark {
  position:absolute;
  right:12px;
  top:8px;
  font-size:86px;
  line-height:0.7;
  color:rgba(255,255,255,0.03);
  font-weight:800;
  transform:rotate(-8deg);
  pointer-events:none;
}

/* body and footer */
.test-body { margin-bottom:12px; z-index:2; position:relative; }
.test-quote { font-size:15px; color:#eee; line-height:1.5; margin:0; }
.test-footer { display:flex; justify-content:space-between; align-items:center; gap:12px; margin-top:12px; z-index:2; position:relative; }
.test-footer .name { color:var(--ktm-orange); font-weight:700; }
.test-footer .meta { color:var(--muted-light); font-size:13px; }

/* stars */
.stars { color:#ffcc00; letter-spacing:1px; font-weight:800; }

/* hover micro-interaction */
.test-card:hover { transform:translateY(-6px) scale(1.01); transition: transform 220ms cubic-bezier(.2,.9,.2,1); box-shadow: 0 22px 48px rgba(255,102,0,0.06); border:1px solid rgba(255,102,0,0.12); }

/* CTA area */
.test-cta { text-align:center; margin-top:18px; display:flex; flex-direction:column; gap:10px; align-items:center; }
.test-cta .btn.primary { background:var(--ktm-orange); color:#111; border:0; padding:10px 18px; border-radius:8px; font-weight:700; box-shadow: 0 8px 20px rgba(255,102,0,0.08); }
.rating-note { color:var(--muted-light); font-size:14px; }

/* desktop: multi-column grid, hide arrows */
@media (min-width:1000px) {
  .test-grid { grid-auto-flow: row; grid-template-columns: repeat(3, 1fr); grid-auto-columns: auto; overflow:visible; padding:8px; }
  .test-nav { display:none; }
  .accent-stripe { left:calc(50% - 640px); } /* subtle position; adjust if needed */
}

/* accessibility focus */
#testimonials-container:focus { outline: 3px solid rgba(255,102,0,0.12); outline-offset:6px; }
/* ===== In-flow mobile collapsible nav (pushes content down) ===== */
.mobile-collapsible-nav { width:100%; background:transparent; z-index:20; }

/* Hamburger button (circular 3-line) */
.hamburger {
  display:flex; flex-direction:column; gap:6px;
  width:48px; height:48px;
  align-items:center; justify-content:center;
  margin:12px 16px;
  background: rgba(0,0,0,0.45);
  border-radius:10px;
  border:1px solid rgba(255,255,255,0.04);
  cursor:pointer;
  -webkit-tap-highlight-color: transparent;
}
.hamburger-line {
  width:22px; height:2px; background:#fff; border-radius:2px;
  transition: transform 220ms ease, opacity 220ms ease;
}
.hamburger.open .hamburger-line:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.hamburger.open .hamburger-line:nth-child(2) { opacity:0; transform: scaleX(0.2); }
.hamburger.open .hamburger-line:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* Collapsible menu (in-flow) */
.collapsible-menu {
  overflow:hidden;
  max-height:0;
  transition: max-height 360ms cubic-bezier(.2,.9,.2,1), opacity 260ms ease;
  opacity:0;
  background: linear-gradient(180deg, rgba(17,17,17,0.98), rgba(12,12,12,0.98));
  border-top:1px solid rgba(255,255,255,0.03);
}
.collapsible-menu.open {
  opacity:1;
  max-height:1000px; /* large enough to fit menu - JS sets exact pixel height too */
}

/* Menu list */
.collapsible-menu ul { list-style:none; margin:0; padding:12px 10px 16px 10px; display:flex; flex-direction:column; gap:8px; }
.collapsible-menu a {
  display:block; padding:12px 14px; border-radius:8px; text-decoration:none; color:#fff; font-weight:700;
  background: linear-gradient(90deg, rgba(255,102,0,0.02), transparent);
}
.collapsible-menu a:hover, .collapsible-menu a:focus {
  background: rgba(255,102,0,0.08);
  color: #ffd8bf;
  outline:none;
}

/* Hide on larger screens - desktop keeps original nav */
@media (min-width: 768px) {
  .mobile-collapsible-nav { display:none; }
}
/* ✅ Desktop vs Mobile nav control */

/* Desktop: show .nav, hide hamburger */
@media (min-width: 701px) {
  .nav {
    display: flex !important;
  }
  #mobile-collapsible-nav-inject {
    display: none !important;
  }
}

/* Mobile: hide desktop nav, show hamburger */
@media (max-width: 700px) {
  .nav {
    display: none !important;
  }
  #mobile-collapsible-nav-inject {
    display: flex !important;
  }
}
/* all your existing CSS rules in styles.css */

/* Add this new block at the very bottom */
@media (max-width: 700px) {
  .container.header-inner {
    flex-direction: row;
    justify-content: flex-start;
    gap: 12px;
  }

  #mobile-collapsible-nav-inject {
    order: -1;
    margin-left: 0;
  }

  .brand {
    flex-grow: 1;
  }
}
/* On mobile screens: swap order so logo goes right */
@media (max-width: 768px) {
  .header-inner {
    display: flex;
    flex-direction: row-reverse; /* flip order: logo to right, menu/hamburger left */
    justify-content: space-between;
    align-items: center;
  }
}

@media (max-width: 768px) {
  /* container and header */
  .container { padding: 0.5rem; }
  header.site-header { background: rgba(0,0,0,0.7); border-bottom-width: 1px; }
  .header-inner { padding: 0.16rem 0; gap:6px; justify-content:flex-start; align-items:center; }

  /* logo & mobile menu */
  .brand img { height:40px; }
  #mobile-collapsible-nav-inject { display:flex; align-items:center; gap:6px; position:relative; z-index:2100; margin-right:6px; }

  /* reduce main top padding so content sits close to header */
  main.container { padding-top: 0.2rem; padding-bottom: 0.8rem; }

  /* much smaller title spacing */
  .section-title {
    margin-top: 6px;     /* was larger */
    margin-bottom: 8px;
    font-size: 1.5rem;
  }

  /* tighten cards a bit */
  .card { padding: 1rem; }

  /* mobile menu fine tuning (kept usable) */
  .hamburger { width:42px; height:42px; padding:6px; border-radius:10px; }
  .hamburger-dot { width:5px; height:5px; }

  /* compact collapsible menu */
  #mobile-collapsible-nav-inject .collapsible-menu {
    top: 54px; left: 8px; width: 200px; border-radius:10px;
  }
  #mobile-collapsible-nav-inject .collapsible-list { margin:4px; padding:6px; gap:6px; }
  #mobile-collapsible-nav-inject .collapsible-list a { padding:9px 10px; border-radius:8px; font-size:0.95rem; }
}
.section-title {
  margin-top: 0 !important;
}
header.site-header .header-inner {
  padding-top: 0.2rem !important;   /* was 0.6rem */
  padding-bottom: 0.2rem !important;
}

.brand img {
  height: 45px !important;  /* smaller logo, currently 60px */
}
header.site-header .header-inner {
  padding: 0 !important;
}

.brand img {
  height: 40px !important;
}
/* MOBILE: bring hamburger & logo in from the edges so both fit comfortably */
@media (max-width: 768px) {
  /* reduce overall page side padding on small screens so header fits neatly */
  .container {
    padding-left: 12px;
    padding-right: 12px;
  }

  /* show mobile wrapper and hide desktop nav */
  nav.nav { display: none !important; }
  #mobile-collapsible-nav-inject { display:flex; align-items:center; gap:8px; position:relative; z-index:2100; }

  /* keep header items spaced but not flush to edges */
  .header-inner {
    display:flex;
    align-items:center;
    justify-content:space-between; /* hamburger left, brand right */
    padding: 0.6rem 0;               /* vertical spacing (unchanged) */
    gap: 8px;
  }

  /* hamburger: keep small left inset so it's not at exact edge */
  .hamburger {
    margin-left: 4px;               /* small inset from left edge */
    width:46px; height:46px; display:inline-flex; align-items:center; justify-content:center;
    background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
    border:1px solid rgba(255,255,255,0.06);
    border-radius:12px;
    padding:8px;
    cursor:pointer;
    box-shadow: 0 10px 30px rgba(0,0,0,0.6);
    transition: transform 160ms ease, background 160ms ease;
    flex-direction: column;
    gap:4px;
  }

  /* prevent the logo from hugging the screen edge on right */
  .brand {
    margin-right: 6px;              /* small inset from right edge */
    display:flex; align-items:center; justify-content:flex-end;
  }
  .brand img { height:50px; width:auto; display:block; }

  /* dropdown menu placement: leave same but ensure it won't overflow screen */
  #site-collapsible-menu {
    left: 8px;
    top: 62px;
    right: auto;
    max-width: calc(100vw - 28px);  /* keep menu within screen */
  }
}
/* --- Make site logo noticeably bigger (desktop + tablet + mobile) --- */
/* Desktop / large screens */
.site-logo {
  height: 140px !important;   /* bigger main logo */
  width: auto !important;
  display: block !important;
  transition: height 200ms ease;
}

/* Brand image (backup) to keep same sizing if .brand img is used */
.brand img, .brand svg {
  height: 140px !important;
  width: auto !important;
  display:block !important;
}

/* Slightly smaller on medium screens so header doesn't get too tall */
@media (max-width: 1100px) {
  .site-logo,
  .brand img, .brand svg {
    height: 110px !important;
  }
}

/* Mobile: still big but fits the layout — reduces to avoid overlapping hero */
@media (max-width: 768px) {
  .site-logo,
  .brand img, .brand svg {
    height: 90px !important;
  }

  /* keep hamburger aligned when logo grows */
  .header-inner { padding: 10px 0; gap: 10px; }
  #mobile-collapsible-nav-inject .collapsible-menu { left: calc(72px + 8px); } /* keeps panel positioned relative to larger logo */
}

/* Very narrow phones */
@media (max-width: 360px) {
  .site-logo,
  .brand img, .brand svg {
    height: 74px !important;
  }
  #mobile-collapsible-nav-inject .collapsible-menu { left: 64px; width: 260px; }
}
@media (max-width: 700px) {
  .cards-initiative {
    grid-template-columns: 1fr;
    justify-items: center;   /* center cards horizontally */
  }
  .cards-initiative .card {
    width: auto;             /* shrink to fit */
    max-width: 90%;          /* keep responsive */
    text-align: left;        /* keep text readable */
  }
}
/* Target only the contact reset button so we don't change other buttons */
#contactResetScoped.btn.outline,
#contactResetScoped.btn.outline * {
  color: var(--ktm-orange, #ff6600) !important;   /* ensure orange text */
  -webkit-text-fill-color: var(--ktm-orange, #ff6600) !important; /* for some browsers */
}

/* Visual style for enabled outline (visible on dark bg) */
#contactResetScoped.btn.outline {
  background: transparent !important;
  border: 2px solid var(--ktm-orange, #ff6600) !important;
  padding: 8px 14px !important;
  border-radius: 10px !important;
  font-weight: 800;
  min-width: 78px;
  opacity: 1 !important;            /* ensure not faded */
  box-shadow: none !important;
}

/* Hover / focus = filled orange with black text */
#contactResetScoped.btn.outline:hover,
#contactResetScoped.btn.outline:focus {
  background: var(--ktm-orange, #ff6600) !important;
  color: #000 !important;
  -webkit-text-fill-color: #000 !important;
  transform: translateY(-2px);
  box-shadow: 0 10px 28px rgba(255,102,0,0.12);
  outline: none;
}

/* Disabled state: keep it visually clear but readable */
#contactResetScoped.btn.outline[disabled],
#contactResetScoped.btn.outline[aria-disabled="true"] {
  opacity: 0.55 !important;
  cursor: not-allowed;
  color: rgba(255,255,255,0.6) !important; /* readable muted color */
  -webkit-text-fill-color: rgba(255,255,255,0.6) !important;
  background: transparent !important;
  border-color: rgba(255,255,255,0.08) !important;
}
.hamburger {
  width: 36px;
  height: 28px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background: transparent;
  border: none;
  cursor: pointer;
}
.hamburger-line {
  width: 100%;
  height: 3px;
  background: #fff;
  border-radius: 2px;
}