:root{
  --color-primary:#0056d6;
  --color-ghost:#ffffff;
  --space-1:8px;
  --space-2:16px;
  --radius:6px;
}
*{box-sizing:border-box}
body{font-family:Segoe UI, system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;margin:0;color:#111}
.container{max-width:1200px;margin:0 auto;padding:var(--space-2)}

/* Layout: ensure footer + sub-footer sit at the bottom for short pages */
html, body { height: 100%; }
body { display: flex; flex-direction: column; min-height: 100vh; }
main.container { flex: 1 0 auto; }
.site-footer, .sub-footer { flex-shrink: 0; }
.btn{display:inline-flex;align-items:center;gap:8px;padding:10px 14px;border-radius:var(--radius);border:1px solid transparent;text-decoration:none;cursor:pointer}
.btn--primary{background:var(--color-primary);color:#fff}
.btn--secondary{background:#f4f4f4;color:#111}
.btn--ghost{background:transparent;border-color:#ddd}

/* header - base (dock/hidden behavior implemented below) */
.site-header { transition: transform .28s ease, box-shadow .28s ease, background-color .28s ease; }
.site-header .site-header__inner{display:flex;align-items:center;justify-content:space-between;padding:var(--space-2) 0; transition: padding .28s ease }
.brand{font-weight:700;text-decoration:none;color:var(--color-primary)}
.main-nav__list{list-style:none;margin:0;padding:0;display:flex;gap:12px}
.main-nav__list li a{text-decoration: none; font-size: 20px; color: #333;padding: 0px 16px;}
.main-nav__list li a:hover{text-decoration: underline; font-size: 20px; color: #000;}

/* Make nav items clearly interactive (button-like), avoid text-input feel */
.main-nav__list li a{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border: 1px solid transparent;
  border-radius: 8px;
  cursor: pointer;
  user-select: none;
}
.main-nav__list li a:hover{
  background: #f5f7f9;
  text-decoration: none;
}
.main-nav__list li a:focus-visible{
  outline: 3px solid rgba(25,118,210,.4);
  outline-offset: 2px;
}
.nav-toggle{display:none}

/* small-screen nav behavior */
@media(max-width:899px){
  .nav-toggle{display:inline-flex;background:#eee;border:0;padding:8px;border-radius:6px}
  .main-nav{display:none}
  .main-nav.is-open{display:block;background:#fff;padding:12px;border-radius:6px;position:absolute;right:12px;top:56px;box-shadow:0 6px 18px rgba(0,0,0,0.08)}
  .main-nav__list{flex-direction:column;gap:8px}
}

/* hero */
.hero{padding:40px 0;}
.hero__inner{ display:flex;flex-wrap:wrap;align-items:center;}
.hero__inner .content{width: 50%;}
.hero__inner img{width: 50%;}
.hero__title{font-size:clamp(24px,4vw,60px);margin:0; font-weight: bold;}
.hero__lead{font-size:20px; margin:12px 0 20px;color:#444}

/* Hero background helper - moved from inline styles in hero include */
.hero--bg {
  background-repeat: no-repeat;
  background-position: right top;
  background-size: contain;
}

/* cards grid */
.grid{display:grid;grid-template-columns:repeat(1,1fr);gap:16px}
.card{border:1px solid #eee;border-radius:8px;overflow:hidden;background:#fff}
.card__media img{display:block;width:100%;height:auto}
.card__body{padding:12px}
.card__title{margin:0 0 6px}
.card__desc{margin:0 0 12px;color:#555}

/* form */
.form-group{margin-bottom:12px}
.input{width:100%;padding:10px;border:1px solid #ddd;border-radius:6px}
.input-label{display:block;margin-bottom:6px;font-size:14px}

/* responsive breakpoints */
@media(min-width:600px){
  .grid{grid-template-columns:repeat(2,1fr)}
}
@media(min-width:900px){
  .grid{grid-template-columns:repeat(3,1fr)}
  .nav-toggle{display:none}
}
@media(min-width:1400px){
  .container{max-width:1400px}
}

/* About page team card tweaks */
.card__title{ margin:0 0 .25rem 0; font-weight:600; }
.card__desc{ margin:0; color:var(--muted,#666); }
.grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:16px; }
.cta .btn{ margin-right:8px; }

/* footer / sub-footer */
.site-footer{padding:28px 0 18px;background:#fafafa;border-top:1px solid #eee}
.site-footer .footer-inner{display:flex;gap:16px;align-items:flex-start}
.site-footer .footer-nav ul{list-style:none;padding:0;margin:0}
.site-footer .footer-nav a{color:var(--color-primary);text-decoration:none}
.sub-footer{background:#f5f5f7;padding:10px 0;border-top:1px solid #eee}
.sub-footer__inner{display:flex;justify-content:space-between;align-items:center}
.sub-footer small{color:#666}
.sub-footer__social a{margin-left:12px;color:var(--color-primary);text-decoration:none}

/* accessibility helper */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* footer typography parity and responsive stack */
.site-footer h5{margin:0;font-size:1.05rem}
.site-footer p{margin:6px 0 0;color:#555}
.sub-footer__inner small{font-size:0.9rem}
@media(max-width:599px){
  .sub-footer__inner{flex-direction:column;align-items:flex-start;gap:8px}
  .site-footer .footer-inner{flex-direction:column;gap:12px}
}

/* partners grid */
.partner-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:18px;align-items:center;margin-top:12px}
.partner-card{display:flex;align-items:center;justify-content:center;padding:17px;background:#fff;border:1px solid #eee;border-radius:8px}
.partner-card img{max-width:100%;height:68px;object-fit:contain}

/* Center icons and text inside the services grid cards */
.services-grid .service-card {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding: 18px 12px;
}
.services-grid .service-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 12px;
}
.services-grid .service-icon .icon {
  font-size: 34px; /* slightly larger for visual balance */
  line-height: 1;
}
.services-grid .service-title, .services-grid .service-description { text-align:center }

/* Back to top button */
/* Back-to-top: use the newer unified styling below; older duplicate removed */

/* --- Card-style site footer (appended) --- */
.site-footer-wrapper {
  padding: 48px 20px 24px;
  background: transparent;
}
.site-footer.card {
    /* max-width: 1460px; */
    max-width: auto;
    margin: 10px;
    background: #ffffff;
    border-radius: 12px;
    box-shadow: 0 8px 20px rgba(22, 28, 37, 0.06);
    padding: 36px;
    color: #263238;
}
.site-footer .footer-top {
  display: grid;
  grid-template-columns: 1.8fr 1fr 1fr 1fr;
  gap: 28px;
  align-items: start;
}
.site-footer .footer-brand {
  display: block;
}
.footer-logo { max-width: 150px; height: auto; display:block; margin-bottom:12px }
.brand-desc { color: #556; font-size: 14px; margin: 0 0 12px; max-width: 420px }
.social-icons { display:flex; gap:10px; margin-top:8px }
.social-link { display:inline-flex; align-items:center; justify-content:center; width:36px; height:36px; border-radius:6px; background:#f5f7f9; color:#223; text-decoration:none }
.social-link svg { display:block }
/* nav columns */
.site-footer .footer-nav { display: contents; }
.site-footer .nav-col h4 { font-size: 14px; margin: 0 0 10px; color:#233; font-weight:600 }
.site-footer .nav-col ul { list-style: none; padding:0; margin:0 }
.site-footer .nav-col li { margin:6px 0 }
.site-footer .nav-col a { color: #47535a; text-decoration:none; font-size:14px }
.site-footer .nav-col a:hover { text-decoration:underline }

.footer-bottom { border-top: 1px solid #eef3f6; margin-top: 22px; padding-top: 18px; display:flex; justify-content:space-between; align-items:center; font-size:13px; color:#6b7780 }
.footer-bottom .policy-links a { margin-left:16px; color:#6b7780; text-decoration:none }
.footer-bottom .policy-links a:hover { text-decoration:underline }

/* Back to top — keep existing selector compatibility */
.back-to-top { position: fixed; right: 28px; bottom: 28px; width:44px; height:44px; border-radius:8px; background:#0b5eff; color:#fff; border:0; display:flex; align-items:center; justify-content:center; font-size:18px; box-shadow: 0 6px 18px rgba(11,94,255,0.12); opacity:0; transform:translateY(6px); transition:opacity .22s ease, transform .22s ease; pointer-events:none }
.back-to-top.show { opacity:1; transform:none; pointer-events:auto }

/* --- Header dock-on-scroll styles (appended) --- */
.site-header {
  position: relative;
  width: 100%;
  background: transparent;
  transition: box-shadow .28s ease, background-color .28s ease, transform .28s ease;
  z-index: 900;
}
.site-header .site-header__inner {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 16px;
  padding: 20px 16px;
  transition: padding .28s ease, transform .28s ease;
}
.header-logo { height:48px; transition: height .28s ease; }

/* docked (fixed) state */
.site-header.docked {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  background: #ffffff; /* white card-like header */
  box-shadow: 0 8px 20px rgba(22,28,37,0.08);
}
.site-header.docked .site-header__inner { padding: 10px 16px; }
.site-header.docked .header-logo { height:36px }

/* hidden on scroll-down when docked */
.site-header.hidden { transform: translateY(-120%); }

/* reduced motion */
@media (prefers-reduced-motion: reduce) {
  .site-header, .site-header .site-header__inner, .header-logo { transition: none !important; }
}

/* small screens: make dock behaviour compact */
@media (max-width: 600px){
  .site-header .site-header__inner{ padding:12px 12px }
  .header-logo{ height:40px }
  .site-header.docked .header-logo{ height:32px }
}

/* Mobile nav visibility controlled via class toggling */
.main-nav { display: none; }
.main-nav.is-open { display: block; }
@media (min-width: 900px){ .main-nav { display: flex !important; } }

/* --------------------------------------------------
   Site spacing normalization (low-risk overrides)
   These rules tighten vertical rhythm across pages
   and are intentionally conservative.
  -------------------------------------------------- */
.section {
  padding-top: 3rem; /* consistent section spacing */
  padding-bottom: 3rem;
}

/* Smooth scroll offset via CSS (works with anchor targets) */
[id] { scroll-margin-top: 72px; }
@media (max-width: 600px){ [id]{ scroll-margin-top: 56px; } }

.section-header { /* ensure consistent header spacing for sections */
  margin-bottom: 1rem; /* compact but readable */
}

.section-title {
  /* margin: 0 0 0.5rem 0; title spacing */
  /* line-height: 1.15; */
  line-height: 1.15;
}

.section-subtitle {
  margin: 0 0 1rem 0;
  color: #556; /* subtle subtitle color for parity */
  /* max-width: 900px; */
  margin-top: 41px;
}

.card__body { padding: 16px; } /* slightly more breathing room in cards */

.form-group { margin-bottom: 16px; } /* standardize form vertical spacing */

.hero { padding: 56px 0; } /* slightly increased hero padding for balance */

/* make centered section headers keep center alignment when used */
.section-header.text-center { text-align: center; }

/* small-screen adjustments (keep compact on very small devices) */
@media (max-width: 420px) {
  .section { padding-top: 2rem; padding-bottom: 2rem }
  .card__body { padding: 12px }
}

/* Small spacing utility classes (use spacing tokens where possible) */
.mt-1 { margin-top: 8px !important; }
.mt-2 { margin-top: 16px !important; }
.mt-3 { margin-top: 24px !important; }
.mb-1 { margin-bottom: 8px !important; }
.mb-2 { margin-bottom: 16px !important; }
.mb-3 { margin-bottom: 34px !important }
.my-1 { margin-top: 8px !important; margin-bottom: 8px !important; }
.my-2 { margin-top: 16px !important; margin-bottom: 16px !important; }
.my-3 { margin-top: 24px !important; margin-bottom: 24px !important; }

/* --------------------------------------------------
   Page fade transitions (scoped to main)
   - Fades only primary content to avoid blanking header/footer
   - Respects reduced motion preference
  -------------------------------------------------- */
main { transition: opacity .24s ease; }
main.pt-enter { opacity: 0; }
main.pt-enter-active { opacity: 1; }
main.pt-exit { opacity: 0; }
@media (prefers-reduced-motion: reduce) {
  main { transition: none !important; }
}

/* --------------------------------------------------
   Render cost reduction for below-the-fold content
   content-visibility defers rendering of off-screen sections
  -------------------------------------------------- */
.section { content-visibility: auto; contain-intrinsic-size: 1px 1000px; }

/* --------------------------------------------------
   Lightweight skeletons for hero/cards
   -------------------------------------------------- */
@keyframes skeleton-shimmer {
  0% { background-position: -200px 0; }
  100% { background-position: calc(200px + 100%) 0; }
}

.skeleton {
  position: relative;
}
.skeleton * { color: transparent !important; }
.skeleton .skeleton-block,
.skeleton .skeleton-text,
.skeleton .skeleton-rect {
  background: #e6e9ee;
  background-image: linear-gradient(90deg, #e6e9ee 0px, #f2f4f7 40px, #e6e9ee 80px);
  background-size: 200px 100%;
  animation: skeleton-shimmer 1.2s ease-in-out infinite;
  border-radius: 8px;
}
.skeleton .skeleton-text { height: 14px; margin: 6px 0; }
.skeleton .skeleton-rect { height: 80px; }

/* Card-specific skeleton helpers */
.service-card.skeleton, .solution-card.skeleton, .testimonial-card.skeleton {
  min-height: 220px;
}
.service-card.skeleton .service-icon,
.solution-card.skeleton .solution-icon { background: none; }
.service-card.skeleton .service-icon::after,
.solution-card.skeleton .solution-icon::after {
  content: '';
  display: block;
  width: 60px; height: 60px; border-radius: 50%;
  background: #e6e9ee;
  background-image: linear-gradient(90deg, #e6e9ee 0px, #f2f4f7 40px, #e6e9ee 80px);
  background-size: 200px 100%;
  animation: skeleton-shimmer 1.2s ease-in-out infinite;
}