:root{
  --primary:#ffa500;     /* orange */
  --bg:#ffffff;          /* white background */
  --ink:#111;            /* body text */
  --muted:#666;          /* secondary text */
  --line:#c9ced9;        /* light gray borders like reference */
  --focus:#ffbb33;       /* focus/hover accent */
  --radius:10px;
  --max:1200px;

  /* fluid type scales */
  --step--1: clamp(12px, 2.2vw, 14px);
  --step-0:  clamp(14px, 2.6vw, 16px);
  --step-1:  clamp(18px, 3.2vw, 22px);
  --step-2:  clamp(22px, 4.2vw, 28px);
  --step-3:  clamp(26px, 5.2vw, 34px);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:Arial, Helvetica, sans-serif;
  background:var(--bg);
  color:var(--ink);
  line-height:1.6;
  font-size:var(--step-0);
}

/* Smooth scrolling everywhere */
html { scroll-behavior: smooth; }

/* Header height variables (used for offsets) */
:root{
  --header-h: 64px;
}
@media (max-width: 860px){
  :root{ --header-h: 60px; }
}

/* Keep your existing .site-header, add this: */
.site-header{
  position: fixed;                  /* ← fixed instead of sticky */
  top: 0; left: 0; right: 0;
  z-index: 10000;
  background:#fff;
  border-bottom:1px solid #eee;
  transition: box-shadow .2s ease, border-color .2s ease, background .2s ease;
}
.site-header.scrolled{
  border-color: transparent;
  box-shadow: 0 8px 16px rgba(0,0,0,.06);
}

/* Give sections a top margin for anchor jumps (so content isn't hidden under header) */
section{ scroll-margin-top: calc(var(--header-h) + 12px); }

/* Optional: make the active menu link more obvious */
.menu a.active{
  color: var(--primary);
  position: relative;
}
.menu a.active::after{
  content: "";
  position: absolute;
  left: 6px; right: 6px; bottom: -6px;
  height: 3px; border-radius: 3px;
  background: var(--primary);
}

img{max-width:100%; height:auto; display:block}
.container{max-width:var(--max); margin-inline:auto; padding-inline:16px}
a{color:inherit; text-decoration:none}
a:focus-visible, button:focus-visible{outline:3px solid var(--focus); outline-offset:2px}

/* ===== Header ===== */
.nav{
  display:flex; gap:16px; align-items:center; justify-content:space-between; padding:12px 0
}
.brand{display:flex; align-items:center; gap:12px}
.brand img{height:48px; width:auto}

/* menu + toggle */
.menu-toggle{
  display:inline-flex; align-items:center; justify-content:center;
  width:42px; height:42px; border-radius:8px; border:1px solid #ddd; background:#fff;
  font-size:20px; cursor:pointer;
}
.menu{
  display:flex; gap:24px; font-weight:700
}
.menu a{color:#333; letter-spacing:.3px; padding:8px 6px; border-radius:6px}
.menu a.active, .menu a:hover{color:var(--primary)}

/* mobile nav behavior */
@media (max-width: 860px){
  .menu{ 
    position:absolute; left:0; right:0; top:64px;
    display:grid; gap:0;
    background:#fff; border-top:1px solid #eee; border-bottom:1px solid #eee;
    transform:translateY(-8px); opacity:0; pointer-events:none;
    transition:opacity .2s ease;
  }
  .menu.open{ opacity:1; pointer-events:auto; }
  .menu a{ padding:14px 16px; border-radius:0; border-top:1px solid #f3f4f6 }
}
@media (min-width: 861px){
  .menu-toggle{ display:none; }
}

/* ===== Slider ===== */
.slider{position:relative; width:100%; overflow:hidden; padding-top:0;}
.slides{display:flex; transition:transform .4s ease}
.slide{
  min-width:100%;
  /* Use aspect-ratio so height scales nicely on mobile */
  aspect-ratio: 16/7;                      /* ~56.25% height; tweak as you like */
  background:#ddd center/cover no-repeat;
}

/* If your CSS file lives in /assets/, these relative paths are already correct */
.slide.s1{background-image:url('slider-1.jpg')}
.slide.s2{background-image:url('slider-2.jpg')}

/* Slider arrows */
.arrow{
  position:absolute; top:50%; transform:translateY(-50%); width:40px; height:40px;
  border-radius:50%; background:rgba(0,0,0,.55); color:#fff;
  display:grid; place-items:center; font-size:18px; cursor:pointer; user-select:none
}
.arrow.left{left:10px}
.arrow.right{right:10px}
@media (max-width: 520px){
  .arrow{width:34px; height:34px; font-size:16px}
}

/* ===== Sections ===== */
section{padding:32px 0}
h2.section-title{
  color:var(--primary); text-transform:uppercase; letter-spacing:.6px;
  margin:0 0 18px; font-size:var(--step-2);
}

/* ===== About (your inline grids are fine; keep them) */
#about h2{ font-size:var(--step-2); }
#about ul{ font-size:var(--step-0); }
@media (max-width: 980px){
  /* any two-column blocks you wrote inline will wrap nicely with this */
  #about [style*="grid-template-columns:1fr 1fr"]{
    grid-template-columns:1fr !important;
  }
  #about [style*="gap:40px"]{ gap:20px !important; }
}

/* ===== Facilities grid ===== */
.fac-grid{
  display:grid; gap:18px;
  grid-template-columns:repeat(2, 1fr);
}
@media (min-width: 900px){
  .fac-grid{ grid-template-columns:repeat(3, 1fr); }
}
@media (max-width: 520px){
  .fac-grid{ grid-template-columns:1fr; }
}
.fac-tile{
  border:3px solid var(--line); border-radius:14px; padding:22px 16px;
  display:grid; place-items:center; text-align:center; background:#fff;
  transition:border-color .2s, box-shadow .2s
}
.fac-tile:hover{border-color:var(--primary); box-shadow:0 0 0 3px rgba(255,165,0,.25)}
.fac-ico{font-size:44px; line-height:1; margin-bottom:8px; color:#000}
.fac-title{font-weight:800; font-size:var(--step-0)}

/* ===== Triple Forms ===== */
.cards-3{
  display:grid; gap:20px;
  grid-template-columns:1fr;
}
@media (min-width: 1024px){
  .cards-3{ grid-template-columns:repeat(3, 1fr); }
}
.form-card{background:#fff; border-radius:10px; box-shadow:0 8px 20px rgba(0,0,0,.08); border:1px solid #e9eef6}
.form-head{background:var(--primary); color:#fff; font-weight:800; padding:12px 14px; border-top-left-radius:10px; border-top-right-radius:10px; text-transform:uppercase; letter-spacing:.5px; font-size:var(--step-0)}
.form-body{padding:14px}
.form-grid{display:grid; gap:12px}
.input{width:100%; padding:12px; border:1px solid #cfd6e2; border-radius:8px; font-size:var(--step--1)}
.input:focus{outline:none; border-color:var(--primary); box-shadow:0 0 0 3px rgba(255,165,0,.15)}
.btn{display:inline-block; background:var(--primary); color:#fff; padding:12px 16px; border:0; border-radius:8px; font-weight:700; cursor:pointer; font-size:var(--step--1)}

/* ===== Contact branch tabs & cards ===== */
.branch-tabs{
  display:flex; gap:10px; justify-content:center; margin:10px 0 24px;
  flex-wrap:wrap;
}
.branch-btn{
  padding:10px 14px; border:2px solid var(--primary); background:#fff; color:#000; font-weight:700; border-radius:8px; cursor:pointer
}
.branch-btn.active{background:var(--primary); color:#fff}

#contactCards, .contact-cards{
  display:grid;
  gap:18px;
  grid-template-columns:1fr;               /* mobile default */
  margin-bottom:32px;
}

/* ≥ 720px: 2 columns */
@media (min-width: 720px){
  #contactCards, .contact-cards{ grid-template-columns:repeat(2, 1fr); }
}

/* ≥ 1040px: 3 columns */
@media (min-width: 1040px){
  #contactCards, .contact-cards{ grid-template-columns:repeat(3, 1fr); }
}

/* Map */
#contact iframe, #mapFrame{ width:100%; height:420px; }
@media (max-width: 520px){
  #contact iframe, #mapFrame{ height:320px; }
}

/* ===== Footer ===== */
.site-footer{margin-top:40px; background:var(--primary); color:#fff}
.site-footer .copyright{padding:20px 0; text-align:center; font-size:var(--step--1)}