/* =========================================================
   HAILSTONE TECHNOLOGY — Main Stylesheet
   Palette drawn from logo ink colour (#0D1271)
   ========================================================= */

:root{
  --navy:        #0D1271;
  --navy-dark:   #08094d;
  --blue:        #2C3FD8;
  --blue-light:  #5C7CFA;
  --teal:        #12B5B0;
  --orange:      #FF7A29;
  --orange-dark: #E8631A;
  --bg:          #F5F7FC;
  --bg-alt:      #EEF1FB;
  --white:       #FFFFFF;
  --text:        #1B1E3A;
  --text-muted:  #5B6172;
  --border:      #E3E7F5;

  --font-head: 'Poppins', sans-serif;
  --font-body: 'Inter', sans-serif;

  --radius: 14px;
  --shadow: 0 10px 30px rgba(13, 18, 113, 0.08);
  --shadow-lg: 0 20px 50px rgba(13, 18, 113, 0.14);
  --transition: 0.3s ease;
}

/* ---------- Reset ---------- */
*, *::before, *::after{ box-sizing: border-box; margin:0; padding:0; }
html{ scroll-behavior: smooth; }
body{
  font-family: var(--font-body);
  color: var(--text);
  background: var(--bg);
  line-height: 1.65;
  overflow-x: hidden;
}
img{ max-width:100%; display:block; }
a{ text-decoration:none; color:inherit; }
ul{ list-style:none; }
button{ font-family: inherit; cursor:pointer; border:none; }
h1,h2,h3,h4{ font-family: var(--font-head); color: var(--navy); line-height:1.25; font-weight:600; }
.container{ width:100%; max-width:1180px; margin:0 auto; padding:0 24px; }

@media (prefers-reduced-motion: reduce){
  *{ animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior:auto !important; }
}

:focus-visible{ outline: 3px solid var(--orange); outline-offset: 2px; }

/* ---------- Utility ---------- */
.section{ padding: 90px 0; }
.section-alt{ background: var(--bg-alt); }
.section-navy{ background: linear-gradient(135deg, var(--navy) 0%, var(--navy-dark) 100%); color:#EAF0FF; }
.section-navy h2, .section-navy h3{ color:#fff; }

.eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  color: var(--orange); font-weight:600; font-size:0.85rem;
  letter-spacing:.03em; margin-bottom:14px;
}
.eyebrow i{ font-size:.8rem; }

.section-head{ max-width:640px; margin-bottom:50px; }
.section-head.center{ margin-left:auto; margin-right:auto; text-align:center; }
.section-head h2{ font-size: clamp(1.7rem, 3vw, 2.4rem); margin-bottom:14px; }
.section-head p{ color: var(--text-muted); font-size:1.05rem; }

.btn{
  display:inline-flex; align-items:center; gap:10px;
  padding: 14px 30px; border-radius: 50px;
  font-weight:600; font-size:0.95rem;
  transition: transform var(--transition), box-shadow var(--transition), background var(--transition);
  white-space:nowrap;
}
.btn-primary{ background: var(--orange); color:#fff; box-shadow: 0 10px 24px rgba(255,122,41,.35); }
.btn-primary:hover{ background: var(--orange-dark); transform: translateY(-3px); box-shadow: 0 14px 30px rgba(255,122,41,.42); }
.btn-outline{ background: transparent; border: 2px solid rgba(255,255,255,.5); color:#fff; }
.btn-outline:hover{ background: rgba(255,255,255,.12); border-color:#fff; transform: translateY(-3px); }
.btn-navy{ background: var(--navy); color:#fff; }
.btn-navy:hover{ background: var(--navy-dark); transform: translateY(-3px); }
.btn-sm{ padding:10px 22px; font-size:.85rem; }

.pill-tag{
  display:inline-block; padding:6px 16px; border-radius:50px;
  background: rgba(44,63,216,.08); color: var(--blue); font-size:.78rem; font-weight:600; letter-spacing:.02em;
}

/* ---------- Top Info Bar ---------- */
.topbar{
  background: var(--navy-dark); color:#C9D2FF;
  font-size:.83rem; padding:8px 0;
}
.topbar .container{ display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:6px; }
.topbar-links{ display:flex; gap:22px; flex-wrap:wrap; }
.topbar-links a{ display:inline-flex; align-items:center; gap:7px; color:#C9D2FF; transition: color var(--transition); }
.topbar-links a:hover{ color: var(--orange); }
.topbar-social{ display:flex; gap:14px; }
.topbar-social a{ color:#C9D2FF; font-size:.95rem; transition: color var(--transition); }
.topbar-social a:hover{ color: var(--orange); }

/* ---------- Header / Nav ---------- */
.site-header{
  background:#fff; position: sticky; top:0; z-index:999;
  box-shadow: 0 2px 18px rgba(13,18,113,.06);
}
.navbar{ display:flex; align-items:center; justify-content:space-between; padding:14px 0; }
.brand{ display:flex; align-items:center; gap:10px; }
.brand img{ height:46px; width:auto; }

.nav-menu{ display:flex; align-items:center; gap:6px; }
.nav-menu a{
  padding:10px 16px; font-weight:600; font-size:.95rem; color: var(--text);
  border-radius:50px; transition: all var(--transition); position:relative;
}
.nav-menu a:hover, .nav-menu a.active{ color: var(--navy); background: var(--bg-alt); }
.nav-cta{ margin-left:10px; }

.nav-toggle{ display:none; flex-direction:column; gap:5px; background:none; padding:6px; z-index:1001; }
.nav-toggle span{ width:26px; height:3px; background: var(--navy); border-radius:2px; transition: all var(--transition); }
.nav-toggle.open span:nth-child(1){ transform: translateY(8px) rotate(45deg); }
.nav-toggle.open span:nth-child(2){ opacity:0; }
.nav-toggle.open span:nth-child(3){ transform: translateY(-8px) rotate(-45deg); }

/* ---------- Hero Slider ---------- */
.hero-slider{ position:relative; overflow:hidden; height: 620px; }
.hero-slide{
  position:absolute; inset:0; opacity:0; visibility:hidden;
  transition: opacity .9s ease;
  display:flex; align-items:center;
  background: linear-gradient(120deg, var(--navy) 0%, var(--navy-dark) 65%);
}
.hero-slide.active{ opacity:1; visibility:visible; z-index:2; }
.hero-slide::before{
  content:""; position:absolute; inset:0;
  background:
    radial-gradient(circle at 82% 20%, rgba(255,122,41,.28), transparent 45%),
    radial-gradient(circle at 70% 80%, rgba(18,181,176,.30), transparent 40%);
}
.hero-grid{ position:relative; z-index:2; display:grid; grid-template-columns: 1.1fr 0.9fr; align-items:center; gap:40px; width:100%; }
.hero-text .eyebrow{ color: var(--orange); background: rgba(255,255,255,.08); padding:6px 14px; border-radius:50px; }
.hero-text h1{ color:#fff; font-size: clamp(2rem, 4vw, 3.1rem); margin: 16px 0 18px; }
.hero-text h1 span{ color: var(--orange); }
.hero-text p{ color:#D6DCFF; font-size:1.08rem; max-width:520px; margin-bottom:30px; }
.hero-actions{ display:flex; gap:16px; flex-wrap:wrap; }

.hero-visual{ position:relative; display:flex; justify-content:center; align-items:center; }
.hero-orbit{
  position:relative; width:380px; height:380px; border:1px dashed rgba(255,255,255,.25);
  border-radius:50%; display:flex; align-items:center; justify-content:center;
  animation: spin 26s linear infinite;
}
.hero-orbit::before, .hero-orbit::after{
  content:""; position:absolute; width:14px; height:14px; border-radius:50%;
  background: var(--orange); box-shadow: 0 0 0 6px rgba(255,122,41,.2);
}
.hero-orbit::before{ top:-7px; left:50%; margin-left:-7px; }
.hero-orbit::after{ bottom:-7px; left:50%; margin-left:-7px; background: var(--teal); box-shadow: 0 0 0 6px rgba(18,181,176,.2); }
.hero-core{
  width:230px; height:230px; border-radius:50%;
  background: rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.2);
  display:flex; align-items:center; justify-content:center;
  backdrop-filter: blur(4px);
  animation: spin-rev 26s linear infinite;
}
.hero-core i{ font-size:5rem; color:#fff; opacity:.9; animation: spin 26s linear infinite reverse; }
@keyframes spin{ from{ transform: rotate(0);} to{ transform: rotate(360deg);} }
@keyframes spin-rev{ from{ transform: rotate(360deg);} to{ transform: rotate(0);} }

.hero-dots{ position:absolute; bottom:28px; left:0; right:0; z-index:3; display:flex; justify-content:center; gap:10px; }
.hero-dots button{ width:10px; height:10px; border-radius:50%; background: rgba(255,255,255,.35); transition: all var(--transition); }
.hero-dots button.active{ background: var(--orange); width:28px; border-radius:6px; }
.hero-arrow{
  position:absolute; top:50%; transform:translateY(-50%); z-index:3;
  width:46px; height:46px; border-radius:50%; background: rgba(255,255,255,.1);
  color:#fff; display:flex; align-items:center; justify-content:center;
  border:1px solid rgba(255,255,255,.25); transition: background var(--transition);
}
.hero-arrow:hover{ background: var(--orange); border-color: var(--orange); }
.hero-arrow.prev{ left:24px; } .hero-arrow.next{ right:24px; }

/* ---------- Stats Strip ---------- */
.stats-strip{ background: var(--white); margin-top:-46px; position:relative; z-index:5; }
.stats-card{
  background:#fff; border-radius: var(--radius); box-shadow: var(--shadow-lg);
  display:grid; grid-template-columns: repeat(4,1fr);
  padding: 34px 10px; border:1px solid var(--border);
}
.stat{ text-align:center; border-right:1px solid var(--border); padding:0 10px; }
.stat:last-child{ border-right:none; }
.stat .num{ font-family: var(--font-head); font-size:2.1rem; font-weight:700; color: var(--navy); display:flex; justify-content:center; gap:4px; }
.stat .num span{ color: var(--orange); }
.stat .label{ color: var(--text-muted); font-size:.88rem; margin-top:4px; }

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

.service-card{
  background:#fff; border-radius: var(--radius); padding:34px 28px;
  border:1px solid var(--border); transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
  position:relative; overflow:hidden;
}
.service-card:hover{ transform: translateY(-8px); box-shadow: var(--shadow-lg); border-color: transparent; }
.service-icon{
  width:60px; height:60px; border-radius:16px; display:flex; align-items:center; justify-content:center;
  background: linear-gradient(135deg, var(--navy), var(--blue)); color:#fff; font-size:1.5rem; margin-bottom:20px;
  transition: transform var(--transition);
}
.service-card:hover .service-icon{ transform: rotate(-8deg) scale(1.05); }
.service-card h3{ font-size:1.2rem; margin-bottom:10px; }
.service-card p{ color: var(--text-muted); font-size:.95rem; margin-bottom:16px; }
.service-card .link{ font-weight:600; color: var(--blue); font-size:.9rem; display:inline-flex; align-items:center; gap:6px; }
.service-card .link i{ transition: transform var(--transition); font-size:.8rem; }
.service-card:hover .link i{ transform: translateX(5px); }
.service-card.alt .service-icon{ background: linear-gradient(135deg, var(--orange), var(--orange-dark)); }
.service-card.teal .service-icon{ background: linear-gradient(135deg, var(--teal), #0a8f8b); }

/* ---------- About / Split Sections ---------- */
.split{ display:grid; grid-template-columns: 1fr 1fr; gap:60px; align-items:center; }
.split-media{ position:relative; }
.media-frame{
  border-radius: var(--radius); overflow:hidden; background: linear-gradient(135deg, var(--navy), var(--blue));
  aspect-ratio: 4/3.4; display:flex; align-items:center; justify-content:center; position:relative; box-shadow: var(--shadow-lg);
}
.media-frame i{ font-size:6rem; color: rgba(255,255,255,.9); }
.media-frame::after{
  content:""; position:absolute; inset:0;
  background: radial-gradient(circle at 20% 20%, rgba(255,122,41,.35), transparent 40%),
              radial-gradient(circle at 85% 85%, rgba(18,181,176,.35), transparent 40%);
}
.floating-badge{
  position:absolute; bottom:-22px; right:-22px; background:#fff; border-radius:16px;
  box-shadow: var(--shadow-lg); padding:18px 22px; display:flex; align-items:center; gap:14px;
  border:1px solid var(--border);
}
.floating-badge i{ font-size:1.8rem; color: var(--orange); }
.floating-badge .num{ font-family: var(--font-head); font-weight:700; color: var(--navy); font-size:1.3rem; }
.floating-badge .label{ font-size:.78rem; color: var(--text-muted); }

.checklist{ margin: 22px 0; }
.checklist li{ display:flex; align-items:flex-start; gap:12px; margin-bottom:14px; color: var(--text-muted); }
.checklist i{ color: var(--teal); margin-top:4px; }

/* ---------- Process / Steps ---------- */
.process-track{ display:grid; grid-template-columns: repeat(4, 1fr); gap:24px; position:relative; }
.process-step{ background:#fff; border-radius: var(--radius); padding:30px 24px; border:1px solid var(--border); position:relative; }
.process-step .step-num{
  width:42px; height:42px; border-radius:50%; background: var(--navy); color:#fff;
  display:flex; align-items:center; justify-content:center; font-weight:700; font-family: var(--font-head); margin-bottom:18px;
}
.process-step h3{ font-size:1.05rem; margin-bottom:8px; }
.process-step p{ color: var(--text-muted); font-size:.9rem; }

/* ---------- Training Domains ---------- */
.domain-card{
  background:#fff; border-radius: var(--radius); padding:26px; text-align:center;
  border:1px solid var(--border); transition: all var(--transition);
}
.domain-card:hover{ background: var(--navy); transform: translateY(-6px); }
.domain-card i{ font-size:2rem; color: var(--navy); margin-bottom:14px; transition: color var(--transition); }
.domain-card:hover i{ color: var(--orange); }
.domain-card h4{ font-size:1rem; transition: color var(--transition); }
.domain-card:hover h4{ color:#fff; }
.domain-card p{ font-size:.82rem; color: var(--text-muted); margin-top:6px; transition: color var(--transition); }
.domain-card:hover p{ color:#CBD3FA; }

.track-tabs{ display:flex; gap:14px; flex-wrap:wrap; margin-bottom:36px; }
.track-tab{
  padding:12px 24px; border-radius:50px; border:2px solid var(--border); background:#fff;
  font-weight:600; font-size:.9rem; color: var(--text-muted); transition: all var(--transition);
}
.track-tab.active, .track-tab:hover{ border-color: var(--navy); color: var(--navy); background: var(--bg-alt); }

/* ---------- Project Showcase ---------- */
.project-feature{
  display:grid; grid-template-columns: 1fr 1fr; gap:50px; align-items:center;
  background: var(--white); border-radius: 22px; padding:50px; border:1px solid var(--border); box-shadow: var(--shadow);
}
.project-visual{
  aspect-ratio: 1/1; border-radius:18px; position:relative; overflow:hidden;
  background: radial-gradient(circle at 30% 30%, var(--blue-light), var(--navy) 70%);
  display:flex; align-items:center; justify-content:center;
}
.project-visual i{ font-size:8rem; color:#fff; opacity:.92; animation: float 4s ease-in-out infinite; }
@keyframes float{ 0%,100%{ transform: translateY(0);} 50%{ transform: translateY(-16px);} }
.chip-row{ display:flex; flex-wrap:wrap; gap:10px; margin: 20px 0 26px; }
.chip{ padding:7px 16px; border-radius:50px; background: var(--bg-alt); color: var(--navy); font-size:.82rem; font-weight:600; }

.portfolio-grid{ display:grid; grid-template-columns: repeat(3,1fr); gap:26px; }
.portfolio-card{
  background:#fff; border-radius: var(--radius); overflow:hidden; border:1px solid var(--border);
  transition: transform var(--transition), box-shadow var(--transition);
}
.portfolio-card:hover{ transform: translateY(-8px); box-shadow: var(--shadow-lg); }
.portfolio-thumb{
  height:180px; display:flex; align-items:center; justify-content:center; position:relative;
  background: linear-gradient(135deg, var(--navy), var(--blue));
}
.portfolio-thumb i{ font-size:3.2rem; color:#fff; }
.portfolio-body{ padding:22px; }
.portfolio-body span{ color: var(--orange); font-size:.78rem; font-weight:700; letter-spacing:.03em; }
.portfolio-body h3{ font-size:1.05rem; margin:8px 0 8px; }
.portfolio-body p{ color: var(--text-muted); font-size:.88rem; }

/* ---------- Testimonials ---------- */
.testi-card{ background:#fff; border-radius: var(--radius); padding:30px; border:1px solid var(--border); }
.testi-stars{ color: var(--orange); margin-bottom:14px; font-size:.9rem; }
.testi-card p{ color: var(--text-muted); margin-bottom:20px; font-style:italic; }
.testi-person{ display:flex; align-items:center; gap:14px; }
.testi-avatar{
  width:46px; height:46px; border-radius:50%; background: linear-gradient(135deg, var(--navy), var(--blue));
  display:flex; align-items:center; justify-content:center; color:#fff; font-weight:700; font-family: var(--font-head);
}
.testi-person .name{ font-weight:700; color: var(--navy); font-size:.92rem; }
.testi-person .role{ font-size:.78rem; color: var(--text-muted); }

/* ---------- CTA Band ---------- */
.cta-band{
  border-radius: 24px; padding:60px; text-align:center;
  background: linear-gradient(120deg, var(--navy), var(--blue));
  position:relative; overflow:hidden;
}
.cta-band::before{
  content:""; position:absolute; inset:0;
  background: radial-gradient(circle at 15% 20%, rgba(255,122,41,.3), transparent 40%),
              radial-gradient(circle at 90% 85%, rgba(18,181,176,.3), transparent 40%);
}
.cta-band > *{ position:relative; z-index:1; }
.cta-band h2{ color:#fff; font-size: clamp(1.5rem, 3vw, 2.1rem); margin-bottom:14px; }
.cta-band p{ color:#D6DCFF; max-width:520px; margin:0 auto 30px; }
.cta-actions{ display:flex; gap:16px; justify-content:center; flex-wrap:wrap; }

/* ---------- Contact ---------- */
.contact-grid{ display:grid; grid-template-columns: 0.9fr 1.1fr; gap:44px; }
.contact-info-card{
  background: var(--navy); color:#fff; border-radius: var(--radius); padding:40px 32px;
  display:flex; flex-direction:column; gap:26px; position:relative; overflow:hidden;
}
.contact-info-card::before{
  content:""; position:absolute; inset:0;
  background: radial-gradient(circle at 90% 10%, rgba(255,122,41,.25), transparent 40%);
}
.contact-info-card > *{ position:relative; z-index:1; }
.contact-item{ display:flex; gap:16px; align-items:flex-start; }
.contact-item i{
  width:44px; height:44px; border-radius:12px; background: rgba(255,255,255,.12);
  display:flex; align-items:center; justify-content:center; flex-shrink:0; color: var(--orange);
}
.contact-item h4{ color:#fff; font-size:.95rem; margin-bottom:4px; }
.contact-item p, .contact-item a{ color:#C9D2FF; font-size:.88rem; }
.contact-hours{ border-top:1px solid rgba(255,255,255,.15); padding-top:20px; }
.contact-hours .row{ display:flex; justify-content:space-between; font-size:.85rem; color:#C9D2FF; padding:4px 0; }

.form-card{ background:#fff; border-radius: var(--radius); padding:40px; border:1px solid var(--border); box-shadow: var(--shadow); }
.form-row{ display:grid; grid-template-columns: 1fr 1fr; gap:20px; margin-bottom:20px; }
.field{ display:flex; flex-direction:column; gap:8px; }
.field.full{ grid-column: 1 / -1; }
.field label{ font-size:.85rem; font-weight:600; color: var(--navy); }
.field input, .field select, .field textarea{
  padding:13px 16px; border-radius:10px; border:1.5px solid var(--border); background: var(--bg);
  font-family: inherit; font-size:.92rem; color: var(--text); transition: border-color var(--transition);
}
.field input:focus, .field select:focus, .field textarea:focus{ border-color: var(--blue); outline:none; }
.form-note{ font-size:.8rem; color: var(--text-muted); margin-top:14px; }
.map-embed{ border-radius: var(--radius); overflow:hidden; margin-top:40px; border:1px solid var(--border); box-shadow: var(--shadow); }
.map-embed iframe{ width:100%; height:340px; border:0; display:block; }

#formMsg{
  display:none; margin-top:18px; padding:14px 18px; border-radius:10px;
  background: rgba(18,181,176,.1); color:#0a8f8b; font-size:.9rem; font-weight:600;
}
#formMsg i{ margin-right:8px; }
.track-panel{ display:none; }
.track-panel.first-visible{ display:block; }

/* ---------- Footer ---------- */
.site-footer{ background: var(--navy-dark); color:#B9C2EC; padding-top:70px; }
.footer-grid{ display:grid; grid-template-columns: 1.3fr 0.8fr 0.9fr 1.1fr; gap:40px; padding-bottom:50px; border-bottom:1px solid rgba(255,255,255,.08); }
.footer-brand img{ height:40px; margin-bottom:16px; filter: brightness(0) invert(1); }
.footer-brand p{ font-size:.88rem; line-height:1.7; margin-bottom:18px; color:#A6AFDB; }
.footer-social{ display:flex; gap:10px; }
.footer-social a{
  width:38px; height:38px; border-radius:50%; background: rgba(255,255,255,.08);
  display:flex; align-items:center; justify-content:center; transition: all var(--transition);
}
.footer-social a:hover{ background: var(--orange); transform: translateY(-3px); }
.footer-col h4{ color:#fff; font-size:1rem; margin-bottom:20px; }
.footer-col ul li{ margin-bottom:12px; }
.footer-col ul li a{ font-size:.88rem; color:#A6AFDB; transition: color var(--transition); display:inline-flex; gap:8px; align-items:center; }
.footer-col ul li a:hover{ color: var(--orange); }
.footer-col .contact-line{ display:flex; gap:10px; font-size:.88rem; margin-bottom:14px; align-items:flex-start; color:#A6AFDB; }
.footer-col .contact-line i{ color: var(--orange); margin-top:3px; }
.footer-bottom{ padding:22px 0; display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px; font-size:.82rem; color:#8991C4; }
.footer-bottom a{ color:#8991C4; }
.footer-bottom a:hover{ color: var(--orange); }

.back-to-top{
  position:fixed; bottom:28px; right:28px; width:48px; height:48px; border-radius:50%;
  background: var(--orange); color:#fff; display:flex; align-items:center; justify-content:center;
  box-shadow: 0 10px 24px rgba(255,122,41,.4); z-index:900; opacity:0; visibility:hidden; transform: translateY(10px);
  transition: all var(--transition);
}
.back-to-top.show{ opacity:1; visibility:visible; transform: translateY(0); }

/* ---------- Page Banner (inner pages) ---------- */
.page-banner{
  background: linear-gradient(120deg, var(--navy), var(--navy-dark));
  padding: 70px 0 56px; position:relative; overflow:hidden;
}
.page-banner::before{
  content:""; position:absolute; inset:0;
  background: radial-gradient(circle at 85% 20%, rgba(255,122,41,.25), transparent 42%),
              radial-gradient(circle at 10% 90%, rgba(18,181,176,.25), transparent 40%);
}
.page-banner > .container{ position:relative; z-index:1; }
.page-banner h1{ color:#fff; font-size: clamp(1.8rem, 3.4vw, 2.6rem); }
.breadcrumb{ display:flex; gap:8px; align-items:center; color:#C9D2FF; font-size:.88rem; margin-top:12px; }
.breadcrumb a{ color:#C9D2FF; } .breadcrumb a:hover{ color: var(--orange); }

/* ---------- AOS-like simple reveal (fallback / used with AOS lib) ---------- */
[data-aos]{ }

/* ---------- Responsive ---------- */
@media (max-width: 1024px){
  .hero-grid{ grid-template-columns:1fr; text-align:center; }
  .hero-text p{ margin-left:auto; margin-right:auto; }
  .hero-actions{ justify-content:center; }
  .hero-visual{ display:none; }
  .hero-slider{ height:560px; }
  .split{ grid-template-columns:1fr; }
  .split.reverse .split-media{ order:-1; }
  .project-feature{ grid-template-columns:1fr; padding:34px; }
  .contact-grid{ grid-template-columns:1fr; }
  .footer-grid{ grid-template-columns:1fr 1fr; }
  .grid-4{ grid-template-columns: repeat(2,1fr); }
}

@media (max-width: 860px){
  .nav-menu{
    position:fixed; top:0; right:-100%; height:100vh; width:78%; max-width:340px;
    background:#fff; flex-direction:column; align-items:flex-start; gap:4px;
    padding:100px 28px 28px; box-shadow: -10px 0 40px rgba(0,0,0,.15); transition: right .35s ease; z-index:1000;
  }
  .nav-menu.open{ right:0; }
  .nav-menu a{ width:100%; padding:14px 16px; }
  .nav-cta{ margin-left:0; margin-top:10px; width:100%; }
  .nav-cta .btn{ width:100%; justify-content:center; }
  .nav-toggle{ display:flex; }
  .topbar-links a span{ display:none; }
  .stats-card{ grid-template-columns: repeat(2,1fr); gap:24px; }
  .stat{ border-right:none; border-bottom:1px solid var(--border); padding-bottom:16px; }
  .grid-3, .grid-2{ grid-template-columns:1fr; }
  .process-track{ grid-template-columns:1fr 1fr; }
  .portfolio-grid{ grid-template-columns:1fr 1fr; }
}

@media (max-width: 600px){
  .section{ padding:60px 0; }
  .hero-slider{ height:auto; padding:70px 0 60px; }
  .hero-slide{ position:relative; opacity:0; visibility:hidden; height:0; overflow:hidden; padding:0; }
  .hero-slide.active{ position:relative; height:auto; padding:10px 0; }
  .topbar .container{ justify-content:center; text-align:center; }
  .form-row{ grid-template-columns:1fr; }
  .footer-grid{ grid-template-columns:1fr; }
  .process-track{ grid-template-columns:1fr; }
  .portfolio-grid{ grid-template-columns:1fr; }
  .cta-band{ padding:40px 24px; }
  .contact-info-card{ padding:30px 24px; }
}