/* =====================================================================
   RKT GROUPS — Main Stylesheet
   Design language: dark navy + white + orange accent, professional
   construction/infrastructure company. Mobile-first, no build step.
   ===================================================================== */

:root{
  --navy: #0B1E3C;
  --navy-dark: #071527;
  --navy-light: #16305A;
  --navy-soft: #14294B;
  --orange: #F5720C;
  --orange-dark: #D9600A;
  --orange-light: #FF8A3D;
  --white: #FFFFFF;
  --gray-50: #F6F8FB;
  --gray-100: #EEF1F6;
  --gray-200: #E3E8F0;
  --gray-400: #9AA5B4;
  --gray-600: #5B6472;
  --gray-800: #2B3242;
  --radius: 8px;
  --shadow-sm: 0 2px 8px rgba(11,30,60,0.08);
  --shadow-md: 0 8px 24px rgba(11,30,60,0.12);
  --shadow-lg: 0 16px 40px rgba(11,30,60,0.18);
  --container: 1200px;
  --header-h: 84px;
}

*,*::before,*::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin:0;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  color: var(--gray-800);
  background:var(--white);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  padding-top: var(--header-h);
}
h1,h2,h3,h4,h5{
  font-family:'Poppins', 'Inter', sans-serif;
  color: var(--navy);
  line-height:1.25;
  margin:0 0 .6em;
  font-weight:700;
}
p{ margin:0 0 1em; color:var(--gray-600); }
a{ color:inherit; text-decoration:none; }
img{ max-width:100%; height:auto; display:block; }
ul{ margin:0; padding:0; list-style:none; }
button{ font-family:inherit; cursor:pointer; }
:focus-visible{ outline: 3px solid var(--orange-light); outline-offset:2px; }

.container{ max-width:var(--container); margin:0 auto; padding:0 20px; }
.section{ padding: 64px 0; }
.section-alt{ background:var(--gray-50); }
.section-navy{ background:var(--navy); color:var(--white); }
.section-navy p{ color:#C7D1E0; }

.section-head{ text-align:center; max-width:680px; margin:0 auto 44px; }
.section-head .eyebrow{ color:var(--orange); font-weight:700; letter-spacing:.08em; font-size:.8rem; text-transform:uppercase; }
.section-head h2{ font-size:2rem; position:relative; padding-bottom:14px; }
.section-head h2::after{
  content:''; position:absolute; bottom:0; left:50%; transform:translateX(-50%);
  width:56px; height:3px; background:var(--orange); border-radius:2px;
}
.section-head.align-left{ margin:0 0 36px; text-align:left; }
.section-head.align-left h2::after{ left:0; transform:none; }

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:8px; justify-content:center;
  padding: 13px 28px; border-radius: 4px; font-weight:600; font-size:.92rem;
  letter-spacing:.03em; text-transform:uppercase; border:2px solid transparent;
  transition: all .2s ease; white-space:nowrap;
}
.btn-orange{ background:var(--orange); color:var(--white); border-color:var(--orange); }
.btn-orange:hover{ background:var(--orange-dark); border-color:var(--orange-dark); transform:translateY(-2px); box-shadow:var(--shadow-md); }
.btn-outline{ background:transparent; color:var(--white); border-color:rgba(255,255,255,.55); }
.btn-outline:hover{ background:rgba(255,255,255,.12); border-color:var(--white); }
.btn-navy{ background:var(--navy); color:var(--white); border-color:var(--navy); }
.btn-navy:hover{ background:var(--navy-light); border-color:var(--navy-light); }
.btn-block{ width:100%; }
.btn-sm{ padding:9px 18px; font-size:.8rem; }
.btn-wa{ background:#25D366; color:#fff; border-color:#25D366; }
.btn-wa:hover{ background:#1ebd59; border-color:#1ebd59; }

/* ---------- Header ---------- */
.topbar{
  background:var(--navy-dark); color:#B9C4D6; font-size:.82rem;
}
.topbar .container{ display:flex; justify-content:space-between; align-items:center; padding-top:7px; padding-bottom:7px; flex-wrap:wrap; gap:6px; }
.topbar a{ color:#B9C4D6; }
.topbar a:hover{ color:var(--orange-light); }
.topbar-left{ display:flex; gap:22px; flex-wrap:wrap; }
.topbar-left span, .topbar-left a{ display:inline-flex; align-items:center; gap:6px; }
.topbar-social{ display:flex; gap:12px; }
.topbar-social a{ color:#B9C4D6; }
.topbar-social a:hover{ color:var(--orange-light); }

.site-header{
  position:fixed; top:0; left:0; right:0; z-index:1000;
  background:var(--white); box-shadow:0 2px 10px rgba(11,30,60,.08);
  transition: box-shadow .2s ease, background .2s ease;
}
.site-header.scrolled{ box-shadow:0 4px 18px rgba(11,30,60,.15); }
.header-inner{ display:flex; align-items:center; justify-content:space-between; padding:12px 0; }
.brand{ display:flex; align-items:center; gap:10px; }
.brand img{ height:46px; width:auto; }
.brand-text{ display:flex; flex-direction:column; line-height:1.1; }
.brand-text .brand-name{ font-family:'Poppins',sans-serif; font-weight:800; font-size:1.15rem; color:var(--navy); letter-spacing:.02em; }
.brand-text .brand-name span{ color:var(--orange); }
.brand-text .brand-tag{ font-size:.62rem; color:var(--gray-600); letter-spacing:.04em; text-transform:uppercase; }

.main-nav ul{ display:flex; align-items:center; gap:28px; }
.main-nav a{
  font-weight:600; font-size:.86rem; letter-spacing:.02em; color:var(--navy);
  text-transform:uppercase; padding:8px 2px; position:relative;
}
.main-nav a::after{
  content:''; position:absolute; left:0; right:0; bottom:0; height:2px;
  background:var(--orange); transform:scaleX(0); transition:transform .2s ease;
}
.main-nav a:hover, .main-nav a.active{ color:var(--orange); }
.main-nav a:hover::after, .main-nav a.active::after{ transform:scaleX(1); }
.main-nav .has-dropdown{ position:relative; }
.main-nav .dropdown{
  position:absolute; top:100%; left:0; background:var(--white); min-width:220px;
  box-shadow:var(--shadow-lg); border-radius:6px; padding:8px; opacity:0; visibility:hidden;
  transform:translateY(8px); transition:all .18s ease; border:1px solid var(--gray-200);
}
.main-nav .has-dropdown:hover .dropdown{ opacity:1; visibility:visible; transform:translateY(0); }
.main-nav .dropdown a{ display:block; padding:9px 12px; text-transform:none; font-size:.85rem; border-radius:4px; }
.main-nav .dropdown a:hover{ background:var(--gray-50); }
.main-nav .dropdown a::after{ display:none; }

.header-actions{ display:flex; align-items:center; gap:14px; }
.hamburger{ display:none; background:none; border:none; padding:6px; }
.hamburger span{ display:block; width:26px; height:2px; background:var(--navy); margin:6px 0; transition:.25s; }
.hamburger.open span:nth-child(1){ transform:translateY(8px) rotate(45deg); }
.hamburger.open span:nth-child(2){ opacity:0; }
.hamburger.open span:nth-child(3){ transform:translateY(-8px) rotate(-45deg); }

/* ---------- Hero ---------- */
.hero{
  position:relative; min-height:600px; display:flex; align-items:center;
  background-size:cover; background-position:center; overflow:hidden;
}
.hero::before{
  content:''; position:absolute; inset:0;
  background:linear-gradient(100deg, rgba(7,21,42,.96) 0%, rgba(7,21,42,.86) 32%, rgba(7,21,42,.45) 62%, rgba(7,21,42,.15) 100%);
}
.hero-inner{ position:relative; z-index:2; padding:90px 0 70px; }
.hero-content{ max-width:620px; }
.hero-content h1{
  color:var(--white); font-size:2.6rem; margin-bottom:.4em; letter-spacing:.01em;
  animation: fadeSlideUp .7s ease both;
}
.hero-content h1 .hl{ color:var(--orange); display:block; }
.hero-content p{ color:#DCE3EF; font-size:1.05rem; max-width:520px; animation: fadeSlideUp .7s .12s ease both; }
.hero-actions{ display:flex; gap:14px; flex-wrap:wrap; margin:26px 0 40px; animation: fadeSlideUp .7s .22s ease both; }
.hero-badges{ display:flex; flex-wrap:wrap; gap:26px; border-top:1px solid rgba(255,255,255,.18); padding-top:24px; animation: fadeSlideUp .7s .32s ease both; }
.hero-badge{ display:flex; align-items:center; gap:10px; color:#EAEFF7; font-size:.85rem; font-weight:600; }
.hero-badge .ic{ width:34px; height:34px; border:1.5px solid var(--orange); border-radius:50%; display:flex; align-items:center; justify-content:center; color:var(--orange); flex-shrink:0; }

@keyframes fadeSlideUp{ from{ opacity:0; transform:translateY(22px);} to{ opacity:1; transform:translateY(0);} }

/* Page banner (About/Services/Contact/etc.) */
.page-banner{
  position:relative; padding:120px 0 56px; background:linear-gradient(120deg, var(--navy-dark), var(--navy-light));
  background-size:cover; background-position:center; color:var(--white); text-align:left;
}
.page-banner.with-image::before{ content:''; position:absolute; inset:0; background:rgba(7,21,42,.82); }
.page-banner .container{ position:relative; z-index:2; }
.page-banner h1{ color:var(--white); font-size:2.1rem; margin-bottom:.3em; }
.breadcrumb{ font-size:.85rem; color:#B9C4D6; }
.breadcrumb a{ color:#B9C4D6; }
.breadcrumb a:hover{ color:var(--orange-light); }
.breadcrumb .sep{ margin:0 6px; }

/* ---------- Service / Card grid ---------- */
.grid{ display:grid; gap:26px; }
.grid-4{ grid-template-columns:repeat(4,1fr); }
.grid-3{ grid-template-columns:repeat(3,1fr); }
.grid-2{ grid-template-columns:repeat(2,1fr); }

.card{
  background:var(--white); border:1px solid var(--gray-200); border-radius:var(--radius);
  overflow:hidden; transition:transform .2s ease, box-shadow .2s ease; display:flex; flex-direction:column;
}
.card:hover{ transform:translateY(-6px); box-shadow:var(--shadow-md); border-color:transparent; }

.service-card{ text-align:center; padding:34px 24px; }
.service-card .icon-wrap{
  width:74px; height:74px; margin:0 auto 18px; border-radius:50%; background:var(--gray-50);
  display:flex; align-items:center; justify-content:center; color:var(--orange); border:1.5px solid var(--gray-200);
  transition: background .2s ease, color .2s ease;
}
.service-card:hover .icon-wrap{ background:var(--orange); color:var(--white); }
.service-card h3{ font-size:1.08rem; margin-bottom:.5em; }
.service-card p{ font-size:.9rem; min-height:66px; }
.read-more{ color:var(--orange); font-weight:700; font-size:.82rem; text-transform:uppercase; letter-spacing:.03em; display:inline-flex; align-items:center; gap:6px; }
.read-more:hover{ color:var(--orange-dark); gap:9px; }

.img-card{ position:relative; }
.img-card .thumb{ position:relative; overflow:hidden; aspect-ratio:4/3; background:var(--gray-100); }
.img-card .thumb img{ width:100%; height:100%; object-fit:cover; transition:transform .35s ease; }
.img-card:hover .thumb img{ transform:scale(1.08); }
.img-card .badge{ position:absolute; top:14px; left:14px; background:var(--orange); color:#fff; font-size:.7rem; font-weight:700; text-transform:uppercase; padding:5px 12px; border-radius:3px; letter-spacing:.04em; }
.img-card .status-badge{ position:absolute; top:14px; right:14px; background:rgba(7,21,42,.85); color:#fff; font-size:.7rem; font-weight:700; padding:5px 12px; border-radius:3px; }
.img-card .body{ padding:22px; }
.img-card .meta{ display:flex; align-items:center; gap:6px; color:var(--gray-600); font-size:.82rem; margin-bottom:8px; }
.img-card h3{ font-size:1.05rem; margin-bottom:.4em; }

.feature-list{ margin:18px 0; }
.feature-list li{ display:flex; align-items:flex-start; gap:10px; padding:7px 0; color:var(--gray-800); font-size:.94rem; }
.feature-list li svg{ flex-shrink:0; margin-top:3px; color:var(--orange); }

/* ---------- Stats strip ---------- */
.stats-strip{ background:var(--navy); padding:46px 0; }
.stats-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:24px; text-align:center; }
.stat-item{ display:flex; flex-direction:column; align-items:center; gap:10px; }
.stat-item .ic{
  width:56px; height:56px; border:2px solid var(--orange); border-radius:50%;
  display:flex; align-items:center; justify-content:center; color:var(--orange);
}
.stat-item .num{ font-family:'Poppins',sans-serif; font-size:2.1rem; font-weight:800; color:var(--white); line-height:1; }
.stat-item .label{ color:#B9C4D6; font-size:.86rem; }

/* ---------- Values (About) ---------- */
.values-grid{ display:grid; grid-template-columns:repeat(5,1fr); gap:20px; }
.value-item{ text-align:center; padding:22px 14px; }
.value-item .ic{ width:64px; height:64px; margin:0 auto 14px; border-radius:50%; background:var(--navy); color:var(--orange); display:flex; align-items:center; justify-content:center; }
.value-item h4{ font-size:1rem; margin-bottom:.35em; }
.value-item p{ font-size:.85rem; }

/* ---------- About split ---------- */
.split{ display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center; }
.split img{ border-radius:var(--radius); box-shadow:var(--shadow-md); }
.mv-grid{ display:grid; grid-template-columns:1fr 1fr; gap:20px; margin-top:24px; }
.mv-card{ background:var(--gray-50); border-left:3px solid var(--orange); border-radius:6px; padding:20px; }
.mv-card h4{ font-size:1rem; margin-bottom:.4em; }

/* ---------- Filters ---------- */
.filter-bar{ display:flex; flex-wrap:wrap; gap:10px; justify-content:center; margin-bottom:36px; }
.filter-btn{
  background:var(--white); border:1.5px solid var(--gray-200); color:var(--navy); font-weight:600;
  font-size:.82rem; text-transform:uppercase; letter-spacing:.03em; padding:9px 20px; border-radius:30px;
  transition:.2s ease;
}
.filter-btn:hover{ border-color:var(--orange); color:var(--orange); }
.filter-btn.active{ background:var(--orange); border-color:var(--orange); color:var(--white); }

/* ---------- Footer ---------- */
.site-footer{ background:var(--navy-dark); color:#B9C4D6; padding-top:60px; }
.footer-grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1.2fr; gap:40px; padding-bottom:40px; }
.footer-brand .brand-name{ color:var(--white); font-family:'Poppins',sans-serif; font-weight:800; font-size:1.2rem; }
.footer-brand .brand-name span{ color:var(--orange); }
.footer-brand img{ height:44px; margin-bottom:12px; }
.footer-brand p{ color:#93A1B8; font-size:.88rem; }
.footer h5{ color:var(--white); font-size:.95rem; text-transform:uppercase; letter-spacing:.04em; margin-bottom:18px; }
.footer ul li{ margin-bottom:11px; }
.footer ul a{ color:#AAB6C8; font-size:.9rem; }
.footer ul a:hover{ color:var(--orange-light); }
.footer-contact li{ display:flex; gap:10px; align-items:flex-start; color:#AAB6C8; font-size:.88rem; }
.footer-contact svg{ flex-shrink:0; margin-top:3px; color:var(--orange); }
.footer-social{ display:flex; gap:10px; margin-top:16px; }
.footer-social a{
  width:36px; height:36px; border-radius:50%; border:1px solid rgba(255,255,255,.25);
  display:flex; align-items:center; justify-content:center; color:#fff; transition:.2s;
}
.footer-social a:hover{ background:var(--orange); border-color:var(--orange); }
.footer-bottom{ border-top:1px solid rgba(255,255,255,.1); padding:18px 0; text-align:center; font-size:.82rem; color:#8593A9; }
.footer-bottom a{ color:#8593A9; }

/* ---------- Contact page ---------- */
.contact-grid{ display:grid; grid-template-columns:.9fr 1.1fr; gap:44px; }
.contact-info-card{ background:var(--navy); color:#fff; border-radius:var(--radius); padding:34px; }
.contact-info-card h3{ color:#fff; }
.contact-info-item{ display:flex; gap:14px; padding:16px 0; border-bottom:1px solid rgba(255,255,255,.12); }
.contact-info-item:last-child{ border-bottom:none; }
.contact-info-item .ic{ width:42px; height:42px; border-radius:50%; background:var(--orange); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.contact-info-item h5{ color:#fff; font-size:.85rem; text-transform:uppercase; letter-spacing:.03em; margin-bottom:.2em; }
.contact-info-item p, .contact-info-item a{ color:#C7D1E0; font-size:.92rem; margin:0; }
.map-embed{ margin-top:26px; border-radius:var(--radius); overflow:hidden; height:220px; }
.map-embed iframe{ width:100%; height:100%; border:0; }

.form-group{ margin-bottom:18px; }
.form-group label{ display:block; font-weight:600; font-size:.86rem; color:var(--navy); margin-bottom:7px; }
.form-control{
  width:100%; padding:13px 15px; border:1.5px solid var(--gray-200); border-radius:6px;
  font-family:inherit; font-size:.94rem; color:var(--gray-800); background:#fff; transition:border-color .2s;
}
.form-control:focus{ border-color:var(--orange); }
textarea.form-control{ resize:vertical; min-height:130px; }
.form-row-2{ display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.honeypot{ position:absolute; left:-9999px; opacity:0; }

.alert{ padding:14px 18px; border-radius:6px; margin-bottom:22px; font-size:.9rem; }
.alert-success{ background:#E6F7EE; color:#1D7A46; border:1px solid #B9E7CD; }
.alert-error{ background:#FDEDEC; color:#B3261E; border:1px solid #F5C6C2; }

/* ---------- Blog ---------- */
.blog-card .body p{ font-size:.9rem; }
.blog-meta{ display:flex; gap:16px; font-size:.8rem; color:var(--gray-600); margin-bottom:10px; }
.blog-content{ max-width:760px; margin:0 auto; }
.blog-content img{ border-radius:var(--radius); margin:24px 0; }
.blog-content p{ font-size:1.02rem; color:var(--gray-800); }

/* ---------- WhatsApp floating button ---------- */
.wa-float{
  position:fixed; right:22px; bottom:22px; z-index:900; width:58px; height:58px; border-radius:50%;
  background:#25D366; display:flex; align-items:center; justify-content:center; box-shadow:0 6px 20px rgba(0,0,0,.25);
  transition: transform .2s ease;
}
.wa-float:hover{ transform:scale(1.08); }

/* ---------- 404 ---------- */
.error-page{ text-align:center; padding:110px 0; }
.error-page .code{ font-family:'Poppins',sans-serif; font-size:6rem; font-weight:800; color:var(--orange); line-height:1; }
.error-page h2{ margin:.2em 0 .6em; }
.error-actions{ display:flex; gap:14px; justify-content:center; margin-top:26px; flex-wrap:wrap; }

/* ---------- CTA band ---------- */
.cta-band{ background:linear-gradient(120deg,var(--navy),var(--navy-light)); color:#fff; padding:50px 0; text-align:center; }
.cta-band h2{ color:#fff; }
.cta-band .actions{ display:flex; gap:14px; justify-content:center; margin-top:20px; flex-wrap:wrap; }

/* ---------- Utility ---------- */
.text-center{ text-align:center; }
.mt-0{ margin-top:0; } .mb-0{ margin-bottom:0; }
.d-flex{ display:flex; } .items-center{ align-items:center; } .justify-between{ justify-content:space-between; } .gap-10{gap:10px;}
.empty-state{ text-align:center; padding:60px 20px; color:var(--gray-600); }

/* Counter data attribute animation target */
[data-counter]{ }

/* Reveal-on-scroll: content is fully visible by default (no-JS / slow-JS
   safe). The animation only applies once JS confirms it's running by
   adding "js-ready" to <html> - see main.js. This guarantees visitors
   never see a blank section if a script fails or is blocked. */
.js-ready .reveal{ opacity:0; transform:translateY(24px); transition:opacity .6s ease, transform .6s ease; }
.js-ready .reveal.in{ opacity:1; transform:translateY(0); }

/* =====================================================================
   RESPONSIVE
   ===================================================================== */
@media (max-width: 1024px){
  .grid-4{ grid-template-columns:repeat(2,1fr); }
  .grid-3{ grid-template-columns:repeat(2,1fr); }
  .values-grid{ grid-template-columns:repeat(3,1fr); }
  .footer-grid{ grid-template-columns:1fr 1fr; }
  .split{ gap:34px; }
  .stats-grid{ gap:16px; }
}

@media (max-width: 860px){
  .main-nav{
    position:fixed; top:var(--header-h); left:0; right:0; bottom:0; background:var(--white);
    transform:translateX(-100%); transition:transform .28s ease; overflow-y:auto;
    box-shadow: 4px 0 20px rgba(0,0,0,.1); z-index:999;
  }
  .main-nav.open{ transform:translateX(0); }
  .main-nav ul{ flex-direction:column; align-items:stretch; padding:18px; gap:0; }
  .main-nav ul li{ border-bottom:1px solid var(--gray-100); }
  .main-nav a{ display:block; padding:15px 4px; }
  .main-nav a::after{ display:none; }
  .main-nav .has-dropdown .dropdown{
    position:static; opacity:1; visibility:visible; transform:none; box-shadow:none;
    border:none; padding-left:12px; display:none; margin-bottom:6px;
  }
  .main-nav .has-dropdown.open .dropdown{ display:block; }
  .hamburger{ display:block; }
  .header-actions .btn-orange.header-cta{ display:none; }

  .hero-content h1{ font-size:1.9rem; }
  .split{ grid-template-columns:1fr; }
  .split .split-img{ order:-1; }
  .contact-grid{ grid-template-columns:1fr; }
  .values-grid{ grid-template-columns:repeat(2,1fr); }
  .mv-grid{ grid-template-columns:1fr; }
  .form-row-2{ grid-template-columns:1fr; }
}

@media (max-width: 640px){
  :root{ --header-h:70px; }
  .grid-4, .grid-3, .grid-2{ grid-template-columns:1fr; }
  .stats-grid{ grid-template-columns:repeat(2,1fr); }
  .section{ padding:44px 0; }
  .hero{ min-height:520px; }
  .hero-inner{ padding:60px 0 40px; }
  .hero-content h1{ font-size:1.55rem; }
  .hero-badges{ gap:16px; }
  .page-banner{ padding:96px 0 40px; }
  .footer-grid{ grid-template-columns:1fr; gap:30px; }
  .values-grid{ grid-template-columns:1fr 1fr; }
  .brand img{ height:38px; }
  .brand-text .brand-name{ font-size:1rem; }
  .topbar-left{ gap:12px; }
  .wa-float{ width:52px; height:52px; right:16px; bottom:16px; }
  .error-page .code{ font-size:4rem; }
}