:root{
  --brand-dark:#0C1C57; --brand-accent:#E30613;
  --ink:#0C1C57; --ink-2:#2a366b; --line:#e5e7eb;
  --bg:#ffffff; --bg-alt:#f7f8fa;
}
/* Base */
*{box-sizing:border-box}
html,body{margin:0;padding:0;font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,'Helvetica Neue',Arial,sans-serif;color:#111;background:var(--bg)}
.container{max-width:1100px;margin:0 auto;padding:0 16px}
h1,h2,h3,h4{color:var(--brand-dark)}

/* =========================
   Header (sticky + shrink)
   ========================= */
.site-header{
  position:sticky; top:0; background:#fff; border-bottom:2px solid #e6e9f5; z-index:10;
  transition: box-shadow .2s ease, padding .2s ease, transform .2s ease;
}
.header-row{
  display:flex; align-items:center; justify-content:space-between; padding:10px 0;
  gap:16px; transition: padding .2s ease;
}
.logo-img {
  height: 90px;              /* default larger size */
  max-height: 100px;         /* cap */
  width: auto;
  object-fit: contain;
  background: #fff;          /* clean background */
  padding: 4px;              /* breathing space */
  border-radius: 6px;        /* rounded edges */
  display: block;
  transition: height .2s ease, transform .2s ease, opacity .2s ease;
}
.main-nav{display:flex;gap:16px;align-items:center}
.main-nav a{text-decoration:none;color:var(--brand-dark)}
.main-nav a:hover{color:var(--brand-accent)}
.main-nav .button{padding:8px 12px;border-radius:12px;background:var(--brand-dark);color:#fff}
/* Shrink state when page is scrolled (toggled by JS) */
.site-header.scrolled .header-row{ padding:6px 0; }
.site-header.scrolled .logo-img{ height:60px; }

/* =========================
   Hero Slider (full-bleed)
   ========================= */
.hero{ position:relative; width:100%; overflow:hidden; border-bottom:2px solid #e6e9f5; }
.slider{ position:relative; width:100%; height:clamp(280px, 55vw, 520px); overflow:hidden; }
.slide{ position:absolute; inset:0; opacity:0; transition:opacity .5s ease; }
.slide.active{ opacity:1; }
.slide img{ width:100%; height:100%; object-fit:cover; object-position:center; filter:brightness(.78); display:block; }
/* Soft bottom gradient for readability */
.hero .slide::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:42%;
  background:linear-gradient(0deg, rgba(0,0,0,.55) 0%, rgba(0,0,0,.20) 60%, rgba(0,0,0,0) 100%);
  pointer-events:none;
}
/* Caption */
.caption{
  position:absolute; left:50%; bottom:10%; transform:translateX(-50%);
  text-align:center;
  background:rgba(255,255,255,.08); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  border:1px solid rgba(255,255,255,.28); border-radius:14px; padding:14px 16px;
  color:#fff; box-shadow:0 10px 40px rgba(0,0,0,.25);
  width:min(94vw, 900px);
}
.caption .kicker{
  display:inline-block; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  font-size:.9rem; padding:4px 8px; border-radius:999px;
  background:rgba(12,28,87,.82); color:#fff; margin-bottom:8px;
}
.caption h1{ margin:6px 0 8px; font-size:clamp(28px,4.2vw,48px); color:#fff; }
.caption p{ font-size:clamp(15px,2vw,18px); opacity:.95; color:#f3f4f6; }
/* Arrows */
.slider .nav{
  position:absolute; top:50%; transform:translateY(-50%);
  background:rgba(12,28,87,.85); color:#fff; border:none; border-radius:999px;
  width:40px; height:40px; cursor:pointer; font-size:20px; line-height:40px;
}
.slider .prev{ left:10px; }
.slider .next{ right:10px; }

/* =========================
   Footer
   ========================= */
.mega-footer{border-top:1px solid var(--line);background:#f7f8fc}
.footer-grid{display:grid;grid-template-columns:1.1fr 1fr 1fr;gap:22px;padding:26px 0}
.footer-logo{width:160px;height:auto;object-fit:contain}
.mega-footer h4{margin:.2rem 0 .4rem;color:var(--brand-dark)}
.list{list-style:none;margin:0;padding:0}
.list li{margin:.26rem 0}
.list a{color:#111;text-decoration:none}
.list a:hover{color:var(--brand-accent)}
.tiny-row{padding:10px 0;border-top:1px solid var(--line);text-align:center;color:#546}

/* =========================
   Buttons
   ========================= */
.button{background:var(--brand-dark);color:#fff;border:none;border-radius:12px;padding:10px 16px;cursor:pointer;text-decoration:none;display:inline-block}
.button.accent{background:var(--brand-accent)}

/* =========================
   Modal + Quick Inquiry
   ========================= */
.quick-inquiry{position:fixed;right:16px;bottom:16px;background:var(--brand-dark);color:#fff;border:none;border-radius:999px;padding:12px 16px;font-weight:600;cursor:pointer;box-shadow:0 8px 20px rgba(0,0,0,.18);z-index:40}
.quick-inquiry:hover{background:var(--brand-accent)}
.modal{position:fixed;inset:0;background:rgba(0,0,0,.45);display:none;align-items:center;justify-content:center;z-index:50;padding:16px}
.modal.is-open{display:flex}
.modal-card{width:min(520px,95vw);background:#fff;border-radius:16px;box-shadow:0 30px 60px rgba(0,0,0,.25);overflow:hidden}
.modal-head{display:flex;justify-content:space-between;align-items:center;padding:14px 16px;border-bottom:1px solid #e5e7eb;background:#f7f8fc}
.modal-head h3{margin:0;color:var(--brand-dark)}
.modal-body{padding:16px}
.modal-close{background:transparent;border:none;font-size:22px;cursor:pointer;color:var(--brand-dark)}
.modal .grid-2{display:grid;grid-template-columns:1fr 1fr;gap:8px}
@media(max-width:520px){.modal .grid-2{grid-template-columns:1fr}}
.modal .inquiry input,.modal .inquiry textarea,.modal select{width:100%;padding:10px;border-radius:10px;border:1px solid var(--line);margin:6px 0;background:#fff}
/* Send me a copy */
.sendcopy{display:flex;align-items:center;gap:8px;margin:6px 0 8px;color:#2a366b;font-size:14px}

/* =========================
   Floating WhatsApp (left)
   ========================= */
.float-wa{position:fixed;left:16px;bottom:16px;z-index:41}
.float-wa img{width:46px;height:46px;border-radius:50%;box-shadow:0 8px 18px rgba(0,0,0,.2)}

/* =========================
   Services page layout
   ========================= */
.services-list{display:grid;grid-template-columns:1fr 1fr;gap:18px}
@media(max-width:760px){.services-list{grid-template-columns:1fr}}
.services-list .item{border:1px solid #e6e9f5;border-radius:14px;padding:16px;background:#fff}
.services-list .item h2{margin:.2rem 0 .4rem;color:var(--brand-dark)}

/* Underlined heading (site style) */
.underlined{border-bottom:3px solid #e6e9f5;padding-bottom:6px;margin-top:10px}

/* Small screens: caption padding tweak */
@media (max-width: 768px) {
  .caption { bottom: 8%; padding: 12px 14px; }
}