/* ==========================================================================
   CSD Engineers — Our Clients page (navy + gold, blueprint-friendly)
   Self-contained. Class prefix .oc- to avoid clashing with the clients plugin.
   ========================================================================== */
.oc *{ box-sizing:border-box; }
.oc{ --oc-navy:#0B2A4A; --oc-navy-900:#071D34; --oc-gold:#E0A012; --oc-gold-d:#C1860C;
  --oc-ink:#0F1B2D; --oc-body:#33424F; --oc-muted:#5A6B7E; --oc-line:#E3E8EF; --oc-cloud:#F4F6F9;
  --oc-container:1200px; color:var(--oc-body); }
.oc a{ text-decoration:none; }

/* ---------- Hero + stats ---------- */
.oc-hero{ background:#0B2A4A;
  background-image:linear-gradient(135deg,rgba(11,42,74,.93),rgba(7,29,52,.97)),url("../images/csd-blueprint-light.svg");
  background-size:auto,900px; color:#fff; padding:66px 24px 56px; }
.oc-hero-inner{ max-width:var(--oc-container); margin:0 auto; }
.oc-eyebrow{ display:inline-block; color:var(--oc-gold); font-weight:800; letter-spacing:.14em; font-size:.8rem; text-transform:uppercase; margin-bottom:12px; }
.oc-hero h1{ color:#fff; font-size:clamp(2.1rem,1.4rem + 2.6vw,3.2rem); font-weight:900; margin:0 0 14px; letter-spacing:-.015em; max-width:20ch; }
.oc-hero p.lead{ color:rgba(234,241,249,.9); font-size:1.1rem; max-width:66ch; margin:0 0 34px; line-height:1.6; }
.oc-stats{ display:grid; grid-template-columns:repeat(3,1fr); background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.14); border-radius:16px; overflow:hidden; }
.oc-stats .stat{ padding:26px 22px; text-align:center; border-right:1px solid rgba(255,255,255,.12); }
.oc-stats .stat:last-child{ border-right:0; }
.oc-stats .num{ font-size:clamp(1.8rem,1.2rem + 1.6vw,2.6rem); font-weight:900; color:var(--oc-gold); line-height:1; }
.oc-stats .lbl{ margin-top:8px; font-size:.8rem; color:rgba(234,241,249,.82); text-transform:uppercase; letter-spacing:.06em; font-weight:700; }

/* ---------- Section heads ---------- */
.oc-sec-head{ text-align:center; max-width:660px; margin:0 auto 40px; }
.oc-sec-head .eyebrow{ color:var(--oc-gold-d); font-weight:800; letter-spacing:.12em; font-size:.78rem; text-transform:uppercase; }
.oc-sec-head h2{ color:var(--oc-ink); font-size:clamp(1.6rem,1.1rem + 1.4vw,2.2rem); font-weight:900; margin:8px 0 0; letter-spacing:-.01em; }

/* ---------- Logo grid (grayscale → colour on hover) ---------- */
.oc-logos{ padding:64px 24px; }
.oc-grid{ max-width:var(--oc-container); margin:0 auto; display:grid; grid-template-columns:repeat(5,1fr); gap:22px; }
.oc-card{ background:#fff; border:1px solid var(--oc-line); border-radius:14px; aspect-ratio:3/2;
  display:flex; align-items:center; justify-content:center; padding:22px; box-shadow:0 4px 16px rgba(11,42,74,.05);
  transition:transform .2s, box-shadow .2s, border-color .2s; }
.oc-card:hover{ transform:translateY(-4px); box-shadow:0 12px 28px rgba(11,42,74,.12); border-color:var(--oc-gold); }
.oc-card img{ max-width:100%; max-height:82px; object-fit:contain; opacity:1; transition:transform .25s; }
.oc-card:hover img{ transform:scale(1.05); }
.oc-card .initials{ font-weight:900; font-size:1.6rem; color:var(--oc-navy); letter-spacing:.02em; }

/* ---------- Testimonials ---------- */
.oc-tst{ padding:6px 24px 64px; }
.oc-tst-grid{ max-width:var(--oc-container); margin:0 auto; display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:24px; }
.oc-quote{ background:#fff; border:1px solid var(--oc-line); border-left:4px solid var(--oc-gold); border-radius:14px; padding:26px 28px; box-shadow:0 6px 20px rgba(11,42,74,.05); }
.oc-quote .mark{ color:var(--oc-gold); font-size:2.6rem; line-height:.5; font-weight:900; height:22px; }
.oc-quote p{ color:var(--oc-body); font-style:italic; margin:8px 0 16px; line-height:1.65; }
.oc-quote .who{ font-weight:800; color:var(--oc-ink); font-size:.92rem; }

/* ---------- Client table + search ---------- */
.oc-table-sec{ padding:6px 24px 66px; }
.oc-tablecard{ max-width:var(--oc-container); margin:0 auto; background:#fff; border:1px solid var(--oc-line); border-radius:16px; overflow:hidden; box-shadow:0 6px 20px rgba(11,42,74,.05); }
.oc-table-top{ display:flex; justify-content:space-between; align-items:center; gap:16px; flex-wrap:wrap; padding:20px 24px; border-bottom:1px solid var(--oc-line); background:var(--oc-cloud); }
.oc-table-top h3{ margin:0; color:var(--oc-ink); font-size:1.15rem; font-weight:800; }
.oc-search input{ width:280px; max-width:64vw; height:44px; padding:0 14px 0 40px; border:1px solid var(--oc-line); border-radius:10px; font-size:.95rem;
  background:#fff url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%235A6B7E' stroke-width='2' stroke-linecap='round' viewBox='0 0 24 24'><circle cx='11' cy='11' r='7'/><line x1='21' y1='21' x2='16.65' y2='16.65'/></svg>") no-repeat 14px center; }
.oc-search input:focus{ outline:none; border-color:var(--oc-gold); box-shadow:0 0 0 3px rgba(224,160,18,.15); }
table.oc-table{ width:100%; border-collapse:collapse; }
.oc-table thead th{ background:var(--oc-navy); color:#fff; text-align:left; padding:14px 18px; font-size:.78rem; text-transform:uppercase; letter-spacing:.05em; font-weight:800; }
.oc-table tbody td{ padding:13px 18px; border-bottom:1px solid var(--oc-line); vertical-align:middle; color:var(--oc-body); font-size:.95rem; }
.oc-table tbody tr:hover{ background:#FBFCFE; }
.oc-table tbody tr:last-child td{ border-bottom:0; }
.oc-table .c-sl{ width:56px; color:var(--oc-muted); font-weight:800; }
.oc-table .c-logo{ width:84px; }
.oc-table .c-logo img{ width:56px; height:56px; object-fit:contain; border:1px solid var(--oc-line); border-radius:8px; background:#fff; padding:4px; }
.oc-table .c-logo .ini{ width:56px; height:56px; display:flex; align-items:center; justify-content:center; background:var(--oc-cloud); border-radius:8px; font-weight:900; color:var(--oc-navy); }
.oc-table .c-name{ font-weight:700; color:var(--oc-ink); }
.oc-table .c-web a{ color:var(--oc-gold-d); font-weight:800; white-space:nowrap; }
.oc-noresult{ padding:26px; text-align:center; color:var(--oc-muted); display:none; font-weight:600; }

/* ---------- CTA band ---------- */
.oc-cta{ background:#0B2A4A; background-image:linear-gradient(135deg,rgba(11,42,74,.95),rgba(7,29,52,.98)),url("../images/csd-blueprint-light.svg");
  background-size:auto,900px; color:#fff; text-align:center; padding:58px 24px; }
.oc-cta h2{ color:#fff; font-size:clamp(1.6rem,1.1rem + 1.4vw,2.2rem); font-weight:900; margin:0 0 10px; }
.oc-cta p{ color:rgba(234,241,249,.85); max-width:54ch; margin:0 auto 24px; }
.oc-btn{ display:inline-flex; align-items:center; gap:8px; height:52px; padding:0 28px; border-radius:12px; font-weight:800; margin:6px; }
.oc-btn-gold{ background:var(--oc-gold); color:#0B2A4A; }
.oc-btn-gold:hover{ background:#F2B62E; }
.oc-btn-ghost{ border:1.5px solid rgba(255,255,255,.5); color:#fff; }
.oc-btn-ghost:hover{ background:rgba(255,255,255,.1); }

/* ---------- Responsive ---------- */
@media(max-width:1000px){ .oc-grid{ grid-template-columns:repeat(3,1fr); } }
@media(max-width:720px){ .oc-stats{ grid-template-columns:1fr; } .oc-stats .stat{ border-right:0; border-bottom:1px solid rgba(255,255,255,.12); }
  .oc-grid{ grid-template-columns:repeat(2,1fr); } .oc-table .c-addr{ display:none; } }