:root{
  --primary:#0f4c81;
  --text:#0b1020;
  --muted:#5e6b7a;
  --bg:#ffffff;
  --card:#f6f8fb;
  --radius:16px;
}

*{box-sizing:border-box}
body{
  margin:0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
  color:var(--text);
  background:var(--bg);
  line-height:1.6;
}

.site-header{
  display:flex; align-items:center; gap:16px;
  justify-content:space-between;
  padding:14px 20px;
  position:sticky; top:0; background:#fff; border-bottom:1px solid #eef1f6; z-index:10;
}

.logo{display:flex; align-items:center; gap:10px; text-decoration:none; color:var(--text); font-weight:700}
.nav a{margin:0 8px; text-decoration:none; color:var(--text); font-weight:600}
.nav a:hover{color:var(--primary)}

.btn{
  display:inline-block; padding:10px 16px; border-radius:999px;
  background:var(--primary); color:#fff; text-decoration:none; font-weight:700; border:1px solid var(--primary);
}
.btn:hover{opacity:.92}
.btn.outline{background:transparent; color:var(--primary)}
.btn.ghost{background:#fff; color:var(--primary); border-color:#cfd8e3}
.btn.cv{margin-left:auto}
.btn.small{padding:6px 10px; font-weight:600}

.content{padding:32px 20px; max-width:1100px; margin:0 auto}

.hero{padding:36px 0}
.hero h1{font-size: clamp(28px, 4vw, 44px); margin:0 0 12px}
.hero p{max-width:820px}

.recognition{margin-top:24px}
.recognition .badges{display:grid; grid-template-columns:repeat(auto-fit, minmax(240px,1fr)); gap:12px; padding:0; list-style:none}
.recognition li{background:var(--card); padding:14px 16px; border-radius:var(--radius)}

.why{margin:28px 0}

.get-in-touch .cta{display:flex; gap:12px; flex-wrap:wrap}

.page-title h1{font-size: clamp(26px, 3vw, 36px); margin:0 0 8px}

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 16px;
  margin: 18px 0;
  padding: 0;
  list-style: none;   /* <-- this is the key */
}

.card {
  background: var(--card);
  padding: 16px;
  border-radius: var(--radius);
  border: 1px solid #e6ebf3;
}

.card h3 {
  margin-top: 0;
}

/* Bullet-proof no-bullets for the homepage news cards */
ul.cards { 
  list-style: none !important; 
  padding-left: 0 !important; 
  margin-left: 0; 
}
ul.cards > li { 
  list-style: none !important; 
}
ul.cards > li::marker { 
  content: '' !important; 
}




.inline-cta{margin:24px 0}

.certs ul{columns:1; padding-left:18px}
@media (min-width: 900px){ .certs ul{columns:2} }

.about .profiles a{color:var(--primary)}

.contact-form{display:grid; gap:12px; max-width:600px}
.contact-form label{display:grid; gap:6px; font-weight:600}
.contact-form input, .contact-form textarea{
  border:1px solid #ccd6e0; padding:10px 12px; border-radius:10px; font:inherit;
}
.contact .direct{margin-top:16px}

.site-footer{
  padding:24px 20px; background:#0a0d14; color:#dde4ee; display:grid; gap:10px; border-top:1px solid #0e1420
}
.site-footer a{color:#fff; text-decoration:none}
.site-footer .contact-footer{display:flex; gap:18px; align-items:center; flex-wrap:wrap}


/* Heading icons */
.hicon{width:28px; height:28px; vertical-align:middle; margin-right:8px}
.logo img{width:36px; height:36px}
/* Optional: subtle icons in cards later if needed */


/* LinkedIn button styling */
.btn.linkedin {background:#0077b5; border-color:#0077b5; color:#fff}
.btn.linkedin.small {padding:6px 10px; font-weight:600}
.btn.linkedin img {width:18px; height:18px; vertical-align:middle; margin-right:6px}


/* LinkedIn button */
.btn.linkedin{ background:#0077b5; border-color:#0077b5; color:#fff }
.btn.linkedin.small{ padding:6px 10px }
.btn.linkedin img{ width:18px; height:18px; vertical-align:middle; margin-right:6px }
@media (prefers-color-scheme: dark){
  .btn.linkedin{ color:#fff }
}


/* Worked With */
.worked-with{margin:28px 0}
.worked-with .muted{color:var(--muted)}
.logo-row{list-style:none; padding:0; margin:12px 0; display:grid; grid-template-columns:repeat(auto-fit, minmax(160px, 1fr)); gap:12px; align-items:center}
.logotag{display:flex; align-items:center; justify-content:center; padding:12px 14px; border:1px solid #e6ebf3; border-radius:12px; background:#fff; font-weight:700; color:#213047}

/* Testimonials */
.testimonials{margin:28px 0}
.t-grid{display:grid; grid-template-columns:repeat(auto-fit, minmax(260px,1fr)); gap:14px}
.t-card{margin:0; padding:18px; background:var(--card); border:1px solid #e6ebf3; border-radius:16px}
.t-card p{margin:0 0 10px}
.t-card footer{font-weight:700; color:#2b3a4a}
.muted.small{font-size:0.9rem}




/* NEW: page-wide hints */
html { color-scheme: light; forced-color-adjust: none; }

/* Prevent any global image filters changing colours */
.worked-with .logo-row img,
.worked-with .logo-row svg {
  display: block;
  max-width: 100%;     /* never overflow the tile */
  height: auto;        /* keep proportions */
  -webkit-filter: none !important;
  filter: none !important;
  mix-blend-mode: normal !important;
  opacity: 1 !important;
  background-color: transparent;
}

/* NEW: lock SVG brand colour if your assets are monochrome SVGs */
.worked-with .logo-row svg,
.worked-with .logo-row svg * {
  fill: #134d82 !important;
  stroke: #134d82 !important;
}

/* Optional: consistent perceived size (equal heights) */
@media (min-width: 0px) {
  .worked-with .logo-row img,
  .worked-with .logo-row svg { height: 68px; width: auto; max-width: 100%; }
}
@media (min-width: 768px) {
  .worked-with .logo-row img,
  .worked-with .logo-row svg { height: 76px; }
}
@media (min-width: 1024px) {
  .worked-with .logo-row img,
  .worked-with .logo-row svg { height: 82px; }
}

/* Ensure tiles give enough width on phones so long names (JLR) breathe */
.worked-with .logo-row {
  display: grid;
  grid-template-columns: repeat(auto-f

}










@media (min-width: 1024px) {
  .worked-with .logo-row {
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
  }
  .worked-with .logo-row img { height: 84px; }
}

/* Dark mode: keep logos untouched (no invert hacks) */
@media (prefers-color-scheme: dark) {
  .worked-with .logo-row li {
    background: #0b0e14;              /* optional: darker tile if your site uses dark backgrounds */
    border-color: #1f2937;
  }
  .worked-with .logo-row img { filter: none !important; }
}

}
}


/* About two-column layout */
.about-grid{
  display:grid;
  grid-template-columns: 1.2fr .8fr;
  gap:24px;
  align-items:start;
  margin-bottom:20px;
}
@media (max-width: 900px){
  .about-grid{ grid-template-columns: 1fr; }
}
.about-grid .name{
  margin: 0 0 8px;
  display:flex; align-items:center; gap:10px;
}
.badge{
  display:inline-flex; align-items:center; gap:6px;
  font-size:.9rem; font-weight:800;
  color:#0f4c81; background:#e9f1f8; padding:4px 8px; border-radius:999px;
  border:1px solid #cfe2f3;
}
.badge img{ width:16px; height:16px }
.highlights h3{ margin:0 0 8px }
.highlights ul{ margin:0; padding-left:18px }
.highlights li{ margin-bottom:6px }


/* Adjust Worked With logos to grey on white */
.logo-row img{filter: grayscale(1) brightness(0.5);}
@media (prefers-color-scheme: dark){
  .logo-row img{filter: grayscale(1) invert(1) brightness(1.2);}
}


/* Company logo cards with lighter grey background */
.logo-row li{
  background:#f7f7f7;
  border-radius:12px;
  padding:10px;
}
.logo-row img{max-width:160px; width:100%; height:auto; margin:0 auto; display:block; filter: grayscale(1) brightness(0.5);}
@media (prefers-color-scheme: dark){
  .logo-row li{background:#2b2b2b;}
  .logo-row img{filter: grayscale(1) invert(1) brightness(1.2);}
}
/* Testimonials grid — force 3 cols on desktop, wrap as needed */
.testimonials > .t-grid{
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 14px;
  grid-auto-flow: row;           /* ensure we fill rows, not columns */
  grid-template-rows: none;
}

/* Reset anything that might fight the grid */
.testimonials .t-card{
  float: none !important;
  width: auto !important;
}

/* Responsive steps */
@media (max-width: 900px){
  .testimonials > .t-grid{ grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 600px){
  .testimonials > .t-grid{ grid-template-columns: 1fr !important; }
}