html, body {
  height: 100%;
  margin: 0;
}

body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

body {
  overflow-x: hidden;
}

/* main content area */
.site-main {
  flex: 1; /* pushes footer to the bottom when content is short */
  min-width: 60%;
}

@media (max-width: 768px) {
  body {
    font-size: 16px;
  }

  .btn {
    padding: 0.75rem 1.1rem;
    font-size: 0.95rem;
  }

  h2 {
    font-size: 1.5rem;
  }

  h3 {
    font-size: 1.2rem;
  }
}


:root{
  --blue:#002060; --grey:#4a4a4a; --bg:#f7f8fb; --white:#fff; --accent:#e94e1b; --muted:#eef2f7; /*blue:#002060;*/
}
*{box-sizing:border-box} body{margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,"Helvetica Neue",Arial,"Noto Sans",Ubuntu,"Apple Color Emoji","Segoe UI Emoji";background:var(--bg);color:#111}
.container{max-width:1100px;margin:0 auto;padding:0 20px}
/*.site-header{background:var(--blue);color:var(--white)}*/
.site-header {
  position: relative;   /* 🔑 make it the containing block */
  z-index: 40;          /* keep it above page content */
  background:var(--blue);
  color:var(--white)
}

  .site-header .nav-links {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  margin-left: 2rem;
}

.site-header .nav-links a {
  color: #e5e7eb;
  text-decoration: none;
  font-size: 0.95rem;
  padding: 0.25rem 0;
}

.site-header .nav-links a:hover {
  color: gold;
}

/* Hide burger on desktop */
.nav-toggle {
  display: none;
  border: none;
  background: transparent;
  color: #f9fafb;
  font-size: 1.25rem;
  cursor: pointer;
}

@media (max-width: 768px) {
  .nav-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-left: auto
  }

  /* Override desktop nav for mobile */
  .site-header .nav-links {
    position: absolute;
    left: 40%;
    right: 30%;
    top: 100%;
    background: #002060;
    /*border-bottom: 1px solid rgba(148, 163, 184, 0.3);*/
    border: 1px solid #fff;
    flex-direction: column;
    align-items: flex-start;
    padding: 0.75rem 1.25rem 1rem;
    gap: 0.5rem;

    max-height: 0;
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
    transition:
      max-height 0.25s ease,
      opacity 0.2s ease;
  }

  .site-header .nav-links a {
    width: 100%;
    padding: 0.4rem 0;
  }

  /* Reveal when .nav-open present on the header */
  .site-header.nav-open .nav-links {
    max-height: 300px;
    opacity: 1;
    pointer-events: auto;
  }
}

.header-inner{display:flex;align-items:center;justify-content:space-between;height:64px}
.logo{color:#fff;text-decoration:none;font-weight:700}
.logo-img {
  height: 60px;
  vertical-align: middle;
}
nav a{color:#fff;margin:0 12px;text-decoration:none;opacity:.9}
nav a.active{border-bottom:2px solid #fff}
.btn{display:inline-block;padding:10px 16px;border-radius:10px;text-decoration:none}
.btn-outline{border:1px solid #fff}
.hero{background:var(--blue);color:#fff;border-radius:18px;padding:48px;margin:24px 0}
/*
.hero {
  max-width: 1200px;
  margin: 0 auto;
  padding: 4rem 1.5rem;
  background:var(--blue);
  color:#fff;
  border-radius:18px;
  margin:24px 0;
} */

.hero h1 {
  margin-bottom: 1rem;
}

.hero p {
  max-width: 46rem;
}
@media (max-width: 768px) {
  .hero {
    padding: 2.5rem 1.25rem;
  }

  .hero h1 {
    font-size: 1.9rem;
    line-height: 1.2;
  }

  .hero p {
    font-size: 1rem;
    max-width: none;
  }

  .hero .ctas {
    flex-direction: column;
    gap: 0.75rem;
  }

  .hero .ctas .btn {
    width: 100%;
    text-align: center;
    margin-top: 10px;
  }
}

.hero .ctas a{margin-right:10px}
.grid-4,.grid-3{display:grid;gap:16px}
.grid-4{grid-template-columns:repeat(4,1fr)}
.grid-3{grid-template-columns:repeat(3,1fr)}

/* Mobile stacking */
@media (max-width: 768px) {
  .grid-4,
  .grid-3 {
    grid-template-columns: 1fr;
  }

  .grid-4 .card,
  .grid-3 .card {
    width: 100%;
  }
}

.card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  text-decoration: none;
  padding: 1.5rem;
  border-radius: 16px;
  background: #fff;
  border: 1px solid #e3e7ef;
  box-shadow: 0 4px 10px rgba(0,0,0,0.05);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  overflow: hidden;
  position: relative;
}

.card:hover {
  transform: translateY(-6px);
  box-shadow: 0 8px 20px rgba(0,0,0,0.15);
  border-color: #002060;
}
.card strong {
  font-size: 1.25rem;
  color: #002060;
  margin-bottom: 0.5rem;
  display: block;
}
.card p {
  flex: 1;
  color: #4a4a4a;
  margin-bottom: 0.75rem;
}

.card-img {
  width: 100%;
  height: 160px;
  object-fit: cover;
  border-radius: 12px;
  transition: transform 0.4s ease;
}

.card:hover .card-img {
  transform: scale(1.05);
}
.card::before {
  content: "";
  display: block;
  height: 4px;
  width: 100%;
  background: linear-gradient(90deg, #002060, gold);
  position: absolute;
  top: 0;
  left: 0;
}

.card-icon {
  margin-top: 1rem;
  font-size: 2rem;
  color: #002060; /* brand blue */
  text-align: right;
}

.card-icon i {
  transition: transform 0.25s ease;
}

.card:hover .card-icon i {
  transform: rotate(-12deg) scale(1.1);
  color: gold; /* accent orange on hover #ff6d3b*/
}


.badge{background:var(--muted);padding:4px 8px;border-radius:999px;font-size:12px}
.section{margin:28px 0}

.kpi{background:var(--muted);border-radius:10px;padding:10px}
.table{width:100%;border-collapse:collapse}
.table th,.table td{padding:10px;border-bottom:1px solid #e3e7ef;text-align:left}
.form fieldset{border:0;padding:0;margin:0}
.form label{display:block;margin-top:12px}
.form input,.form select,.form textarea{width:100%;padding:10px;border:1px solid #d6dbe6;border-radius:10px;background:#fff}
.row{display:flex;gap:16px}
/*.site-footer{background:#0b235a;color:#cfe1ff;padding:32px 0;margin-top:48px}
.site-footer a{color:#cfe1ff;text-decoration:none}*/
.alert{background:#fff7f2;border-left:4px solid var(--accent);padding:10px;border-radius:10px}




.system-card {
  display: grid;
  grid-template-columns: 88px 1fr;
  gap: 16px;
  align-items: center;
}

.system-card__icon {
  width: 88px; height: 88px;
  border-radius: 12px;
  display: grid; place-items: center;
  background: #d9e2f3; /* fallback */
}
.system-card__icon img {
  width: 48px; height: 48px; display: block;
}
.system-card__icon-fallback { font-size: 36px; }

.system-card__header {
  display: flex; align-items: center; gap: 12px; margin: 0 0 6px 0;
}
.system-card__title { margin: 0; }

.status-badge {
  background: #ffe08a; color: #1a1a1a; border-radius: 999px;
  padding: 4px 10px; font-size: 12px; font-weight: 600;
}
.status-active { background: #ffd66e; }
.status-inactive { background: #e3e7ef; color: #666; }

.system-meta {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px 16px; margin: 8px 0 12px 0;
}
.system-meta dt { font-weight: 600; color: #4a4a4a; }
.system-meta dd { margin: 0; }

.site-footer {
  /*background: #002060;*/
  background: var(--blue);
  color: #fff;
  margin-top: 2rem;
}
  

.footer-main {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 2rem;
  padding: 2rem 1rem;
}

.footer-col h4 {
  margin-bottom: 0.75rem;
  font-size: 1rem;
  color: #e6eaf5;
}

.footer-col ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer-col ul li {
  margin-bottom: 0.5rem;
}

.footer-col ul li a {
  color: #cfd6e6;
  text-decoration: none;
  transition: color 0.2s ease;
}

.footer-col ul li a:hover {
  color: #ff6d3b; /* Accent orange */
}

.footer-social a {
  display: inline-block;
  margin-right: 0.75rem;
  font-size: 1.25rem;
  color: #cfd6e6;
  transition: color 0.2s ease;
}

.footer-social a:hover {
  color: #ff6d3b;
}

.footer-bottom {
  border-top: 1px solid rgba(255,255,255,0.1);
  text-align: center;
  padding: 1rem;
  font-size: 0.85rem;
  color: #aab6d1;
}
/* Core carousel (unchanged from earlier) */
.carousel { position: relative; margin-top: 10px; }
.carousel-track {
  display: flex; gap: 20px; overflow-x: auto; scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch; padding: 6px 4px 10px;
}
.carousel-track::-webkit-scrollbar { height: 0; }
.carousel-track { scrollbar-width: none; }
.slide { scroll-snap-align: start; flex: 0 0 90%; max-width: 560px; }

@media (min-width: 700px)  { .slide { flex: 0 0 calc((100% - 20px) / 2); } }
@media (min-width: 1024px) { .slide { flex: 0 0 calc((100% - 40px) / 3); } }

/* Mobile */
@media (max-width: 768px) {
  .carousel-track {
    overflow-x: auto;
    scroll-snap-type: x mandatory;
  }

  .carousel-track .slide {
    flex: 0 0 80%;
    scroll-snap-align: start;
  }
}

/* Dots / pagination */
.carousel-dots {
  display: flex; justify-content: center; align-items: center;
  gap: 8px; margin-top: 12px;
}
.carousel-dot {
  appearance: none; border: 0; background: #cfd6e6; cursor: pointer;
  width: 10px; height: 10px; border-radius: 999px; padding: 0;
  transition: background .2s ease, width .2s ease, border-radius .2s ease;
}
.carousel-dot:focus-visible { outline: 2px solid #002060; outline-offset: 2px; }

/* Active state: a pill to show progress */
.carousel-dot[aria-selected="true"] {
  background: #002060; width: 22px; border-radius: 6px;
}

/* Reduced motion users */
@media (prefers-reduced-motion: reduce) {
  .carousel-track { scroll-behavior: auto; }
}


.case-spotlight h2 { margin-bottom: 8px; }

.cs-carousel { position: relative; }
.cs-track {
  display: flex;
  gap: 20px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  padding: 6px 4px 10px;
}
.cs-track::-webkit-scrollbar { height: 0; }

.cs-slide {
  scroll-snap-align: start;
  position: relative;
  flex: 0 0 90%;
  height: 320px;
  border-radius: 16px;
  overflow: hidden;
  background: #0c245e; /* fallback */
}
@media (min-width: 900px){
  .cs-slide { flex: 0 0 calc((100% - 40px)/3); }
}

/* Mobile tweaks */
@media (max-width: 768px) {
  .cs-track {
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
  }

  .cs-slide {
    flex: 0 0 100%;
    scroll-snap-align: start;
  }

  .cs-slide .cs-overlay {
    padding: 1.5rem;
  }
}

/* Image layer via CSS variable */
.cs-slide::before {
  content: "";
  position: absolute; inset: 0;
  background-image: var(--bg);
  background-size: cover;
  background-position: center;
  filter: brightness(.55);
  transform: scale(1.02);
}

/* Text overlay */
.cs-overlay {
  position: absolute; inset: 0; padding: 20px;
  display: flex; flex-direction: column; justify-content: flex-end;
  color: #fff;
}

.cs-overlay h3 { margin: 0 0 8px 0; }

.cs-kpis {
  display: flex; gap: 10px; flex-wrap: wrap;
  list-style: none; padding: 0; margin: 0 0 12px 0;
}
.cs-kpis li {
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.25);
  padding: 8px 10px;
  border-radius: 10px;
  backdrop-filter: blur(3px);
}
.cs-kpis strong { display: block; font-size: 1.05rem; }
.cs-kpis span { font-size: .8rem; opacity: .9; }

/* Dots */
.cs-dots {
  display: flex; justify-content: center; gap: 8px; margin-top: 10px;
}
.cs-dot {
  width: 10px; height: 10px; border-radius: 999px;
  background: #cfd6e6; border: 0; padding: 0; cursor: pointer;
  transition: all .2s ease;
}
.cs-dot[aria-selected="true"]{
  background: #002060; width: 22px; border-radius: 6px;
}
.cs-slide:hover { outline: 2px solid rgba(255,255,255,.25); outline-offset: -2px; }

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  .cs-track { scroll-behavior: auto; }
}


/*Consulting Page*/

/* Two-column section */
.consulting-two-col { display:grid; gap:24px; grid-template-columns: 1fr; }
@media (min-width: 960px){ .consulting-two-col { grid-template-columns: 1.1fr .9fr; } }
.consulting-two-col .col { background:#fff; border:1px solid #e3e7ef; border-radius:16px; padding:20px; }
.list-check { padding-left:0; list-style:none; }
.list-check li { position:relative; padding-left:26px; margin:10px 0; }
.list-check li::before { content:"\f00c"; font-family:"Font Awesome 6 Free"; font-weight:900; position:absolute; left:0; top:2px; color:#002060; }
.deliverable {
  margin-top: 1rem;
  padding: 0.75rem 1rem;
  border-left: 4px solid gold;   /* brand blue */
  background: #f8faff;              /* soft tint */
  border-radius: 6px;
  font-size: 0.95rem;
}

/* Vertical steps */
/* Vertical timeline */
.vtimeline {
  position: relative;
  padding-left: 28px;           /* room for spine */
  margin: 4px 0;
}

.vtimeline::before {            /* spine */
  content: "";
  position: absolute;
  left: 10px; top: 0; bottom: 0;
  width: 3px;
  background: linear-gradient(180deg, #002060 0%, gold 100%);
  border-radius: 3px;
  opacity: 0.9;
}

.vt-step {
  position: relative;
  display: grid;
  grid-template-columns: 52px 1fr;
  gap: 12px;
  margin-bottom: 18px;
}

.vt-node {
  position: relative;
  width: 52px;
  display: grid;
  align-content: start;
  justify-items: center;
}

.vt-num {
  display: grid; place-items: center;
  width: 28px; height: 28px;
  background: #002060; color: #fff;
  border-radius: 999px;
  font-size: 0.85rem; font-weight: 700;
  box-shadow: 0 2px 6px rgba(0,0,0,.15);
  margin-bottom: 8px;
}

.vt-icon {
  display: grid; place-items: center;
  width: 36px; height: 36px;
  border-radius: 10px;
  background: #e9f0ff; color: #002060;
  font-size: 1rem;
  box-shadow: inset 0 0 0 1px #dfe6f3;
}

.vt-content {
  background: #fff;
  border: 1px solid #e3e7ef;
  border-radius: 14px;
  padding: 12px 14px;
  box-shadow: 0 6px 14px rgba(0,0,0,0.04);
  transition: box-shadow .2s ease, transform .2s ease;
}

.vt-step:hover .vt-content {
  transform: translateY(-2px);
  box-shadow: 0 10px 22px rgba(0,0,0,0.10);
}

.vt-content h4 { margin: 0 0 6px 0; color: #0b235a; font-size: 1rem; }
.vt-content p  { margin: 0 0 8px 0; color: #4a4a4a; }

.vt-content details {
  border-top: 1px dashed #dfe6f3;
  padding-top: 8px;
}
.vt-content details > summary {
  cursor: pointer;
  list-style: none;
  color: #002060;
  font-weight: 600;
  margin-bottom: 6px;
}
.vt-content details > summary::-webkit-details-marker { display: none; }
.vt-content details[open] > summary { color: #e94e1b; }

.vt-content ul {
  margin: 0; padding-left: 18px;
}

@media (max-width: 640px) {
  .vt-step {
    grid-template-columns: 44px 1fr;
  }
  .vt-num { width: 26px; height: 26px; }
  .vt-icon { width: 34px; height: 34px; }
}


/* Process timeline */
.pd-process {background:#fff; border:1px solid #e3e7ef; border-radius:16px; padding:20px;} 
.pd-process .lede { color:#4a4a4a; }
.process-bar { display:grid; grid-template-columns: repeat(5,1fr); gap:12px; margin-top:14px; }
@media (max-width: 900px){ .process-bar { grid-template-columns: 1fr 1fr; } }
.step { background:#fff; border:1px solid #e3e7ef; border-radius:14px; padding:16px; text-align:center; }
.step-icon { width:48px; height:48px; border-radius:12px; display:grid; place-items:center; margin:0 auto 8px; background:#e9f0ff; color:#002060; }

/* Integration highlight (dark strip) */
.integration-highlight { background:#0b235a; color:#fff; border-radius:18px; }
.integration-highlight .ih-inner { display:grid; gap:24px; grid-template-columns: 1fr; padding:24px; align-items:center; }
@media (min-width: 1024px){ .integration-highlight .ih-inner { grid-template-columns: 1fr 1fr; } }
.integration-highlight .ih-copy .list-dash { list-style:none; padding:0; margin:0 0 12px 0; }
.integration-highlight .ih-copy .list-dash li { position:relative; padding-left:18px; margin:8px 0; }
.integration-highlight .ih-copy .list-dash li::before { content:"—"; position:absolute; left:0; color:#cfe1ff; }
.ih-kpi { font-size:1rem; opacity:.95; margin:10px 18px 16px; }
.ih-kpi span { font-size:1.2rem; font-weight:800; background:gold; color:#002060; padding:2px 10px; border-radius:10px; }
.ih-visual img { width:100%; height:auto; border-radius:14px; }

/* Final CTA */
.final-cta .cta-wrap { background:#fff; border:1px solid #e3e7ef; border-radius:16px; padding:22px; text-align:center; }


/* Page-scoped styles */
   
   
    .eyebrow { text-transform: uppercase; letter-spacing: .08em; font-size: .775rem; opacity: .75; }

    .edge-grid { display: grid; gap: 2rem; }
    @media (min-width: 992px) { .edge-grid { grid-template-columns: 1.2fr .8fr; align-items: center; } }

    .pill { display:inline-block; border:1px solid var(--border, rgba(255,255,255,.15));
            border-radius:999px; padding:.375rem .75rem; font-size:.85rem; margin:.25rem .25rem 0 0; }

    .list-check { list-style: none; padding:0; margin:0; }
    .list-check li { padding-left: 1.5rem; position: relative; margin:.5rem 0; }
    .list-check li:before { content:"✓"; position:absolute; left:0; top:0; opacity:.8; }

    .flow-wrap { border:1px dashed var(--border, rgba(255,255,255,.18)); border-radius:16px; padding:1rem; background: var(--card, rgba(0,0,0,.02)); }
    .flow-img { width:100%; height:auto; border-radius:12px; display:block; }


    .kpis { display:grid; gap:1rem; grid-template-columns: repeat(2,minmax(0,1fr)); }
    @media (min-width: 768px) { .kpis { grid-template-columns: repeat(4,minmax(0,1fr)); } }
    .kpi { text-align:center; padding:0.8rem; border-radius:12px; border:1px solid var(--border, #fff); background: var(--card, rgba(0,0,0,.02)); }
    .kpi strong { font-size:1rem; display:block; color:gold }

    .specs { display:grid; gap:1rem; }
    @media (min-width: 992px) { .specs { grid-template-columns: repeat(3, minmax(0,1fr)); } }

    .integrations-logos { display:flex; flex-wrap:wrap; gap:.5rem; opacity:.85; }
    .integrations-logos .pill { margin:0; }


   /* ==========================================
   About page refinements (safe to append)
   ========================================== */

/* Section rhythm */
.section.about h1 { margin-bottom: .25rem; }
.section.about .lede { margin-top: .25rem; }

/* Unified section shell */
.about-block {
 background:#fff; border:1px solid #e3e7ef; border-radius:16px; padding:20px;
}

/* Two-column with equal heights */
.grid.two-column {
  display: grid;
  gap: 22px;
  grid-template-columns: 1fr;
  align-items: stretch;            /* equal visual height */
}
@media (min-width: 960px){
  .grid.two-column { grid-template-columns: 1.05fr .95fr; }
}

/* Image frame with stable ratio */
.media-frame {
  position: relative;
  border-radius: 14px;
  border: 1px solid #e3e7ef;
  overflow: hidden;
  background: #f5f7fb;
  /* aspect-ratio ensures the box never collapses and keeps layout tidy */
  aspect-ratio: 16 / 10;
  /* Fallback for older browsers */
  min-height: 260px;
  box-shadow: 0 8px 18px rgba(0,0,0,.06);
}
.media-frame img {
  position: absolute; inset: 0;
  width: 100%; max-height: 100%;
  object-fit: fill;
}



/* Overview */
.about-overview .text { padding: 0; border: 0; box-shadow: none; }
.about-overview .text .about-block { margin: 0; } /* nest block cleanly */
.about-overview .image .media-frame { aspect-ratio: 16 / 9; }

/* Domestic & Corporate blocks */
.about-domestic .text,
.about-corporate .text { padding: 0; border: 0; box-shadow: none; }
.about-domestic .text .about-block,
.about-corporate .text .about-block { margin: 0; }

.about-domestic h2,
.about-corporate h2,
.about-team h2 { color: var(--blue); margin-top: 0; }

/* Softer light band so large areas don’t feel empty */
.bg-slab {
  background: linear-gradient(180deg, #f4f6fb 0%, #eef2f7 100%);
  border: 1px solid #e3e7ef;
  border-radius: 18px;
  padding: 16px;
}

/* Bullet tidy */
.about-domestic ul,
.about-corporate ul {
  list-style: none; padding-left: 0; margin: 10px 0 0 0;
}
.about-domestic li,
.about-corporate li {
  position: relative; padding-left: 24px; margin: 8px 0; color: #3a3a3a;
}
.about-domestic li::before,
.about-corporate li::before {
  content: "✓";
  position: absolute; left: 0; top: 0.05rem;
  font-weight: 700; color: var(--blue);
  opacity: .9;
}





/* Team image consistency */
.about-team .team-image {
  display: block; width: 100%; height: auto; margin-top: 10px;
  border-radius: 14px; border: 1px solid #e3e7ef; box-shadow: 0 8px 18px rgba(0,0,0,.06);
}

/* Spacing polish between stacked sections */
.section.about-overview,
.section.about-domestic,
.section.about-corporate,
.section.about-team { margin: 22px 0; }

/* Responsive stacking: keep images first on small screens */
@media (max-width: 640px){
  .about-domestic .image,
  .about-corporate .image { order: -1; }
}

/* Tiny type & color refinements */
.section.about p,
.about-domestic p,
.about-corporate p { color: var(--grey); line-height: 1.65; }


/* Make sizing predictable */
*, *::before, *::after {
  box-sizing: border-box;
}

/* Never allow horizontal overflow on small screens */
html,
body {
  max-width: 100%;
  overflow-x: hidden;
}

/* General media */
img,
svg,
video {
  max-width: 100%;
  height: auto;
}

/* ===== Mobile layout for home page ===== */
@media (max-width: 768px) {
  /* Container + sections must not exceed viewport */
  main.container,
  .hero,
  .section {
    max-width: 100%;
    padding-left: 1rem;
    padding-right: 1rem;
  }

  /* Hero tweaks */
  .hero {
    padding-top: 2.5rem;
    padding-bottom: 2.5rem;
  }

  .hero h1 {
    font-size: 1.9rem;
    line-height: 1.2;
  }

  .hero p {
    font-size: 1rem;
  }

  .hero .ctas {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
  }

  .hero .ctas .btn {
    width: 100%;
    text-align: center;
  }

  /* Grid sections – stack the cards */
  .grid-4,
  .grid-3 {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.25rem;
  }

  .grid-4 .card,
  .grid-3 .card {
    margin: 0;
  }

  /* Case study carousel */
  .cs-carousel {
    margin: 0 -1rem;              /* let background go full-bleed */
    padding: 0 1rem 1.5rem 1rem;   /* but keep content inside */
    max-width: 100%;
  }

  .cs-track {
    display: flex;
    gap: 1rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
  }

  .cs-slide {
    flex: 0 0 100%;
    scroll-snap-align: start;
  }

  /* Technology carousel (if you’re using .carousel / .carousel-track) */
  .carousel {
    margin: 0 -1rem;
    padding: 0 1rem 1.5rem 1rem;
    max-width: 100%;
  }

  .carousel-track {
    display: flex;
    gap: 1rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
  }

  .carousel-track .slide {
    flex: 0 0 80%;
    scroll-snap-align: start;
  }
}