/* =========================================
   CLIENTS PAGE (CLEAN)
   - Removed hero background duplication
   - Kept slow zoom via ::before only
   - Added reusable icon-buttons (same style as your screenshot)
========================================= */

/* ================= TOKENS ================= */
:root{
  --ink:#0f172a;
  --muted:#475569;
  --border:rgba(15,23,42,.08);
  --bg:#f8fafc;
  --card:#ffffff;

  --brand:#d4af37;
  --brand-soft:rgba(212,175,55,.15);

  --shadow:0 18px 40px rgba(2,10,25,.10);

  /* square style */
  --radius:0px;

  /* ✅ for icon-buttons ring */
  --c-logo-gold: var(--brand);
  --c-charcoal:#0f1115;
  --c-charcoal2:#171b22;
}

/* ================= BASE ================= */
.cl-section{
  padding:90px 0;
  background:#fff;
}

.cl-section:nth-of-type(even){
  background:linear-gradient(180deg,#fff 0%,#fbfbf7 100%);
}

.cl-head{
  text-align:center;
  max-width:820px;
  margin:0 auto 50px;
}

.cl-title{
  margin:0 0 10px;
  font-size:clamp(26px,3.2vw,38px);
  font-weight:900;
  color:var(--ink);
}

.cl-subtitle{
  color:var(--muted);
  font-size:16px;
}

/* ================= HERO (SLOW ZOOM - SINGLE SOURCE) ================= */
@keyframes heroSlowZoom{
  0%{ transform: scale(1); }
  100%{ transform: scale(1.08); }
}

.cl-hero{
  position:relative;
  min-height:360px;
  display:flex;
  align-items:center;
  overflow:hidden;
  background:none; /* ✅ no duplicate backgrounds */
}

.cl-hero::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(180deg, rgba(15,23,42,.55), rgba(15,23,42,.55)),
    var(--cl-hero-bg) center/cover no-repeat;
  transform-origin:center center;
  animation: heroSlowZoom 22s ease-in-out infinite alternate;
  will-change: transform;
  z-index:0;
}

.cl-hero-overlay{
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
}

.cl-hero-inner{
  position:relative;
  z-index:2;
  color:#fff;
  max-width:760px;
}

.cl-hero-title{
  margin:0 0 10px;
  font-size:clamp(30px,4vw,44px);
  font-weight:900;
}

.cl-hero-subtitle{
  font-size:clamp(15px,2vw,18px);
  opacity:.9;
}

/* ================= COMPANIES GRID ================= */
.cl-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:28px;
}

.cl-card{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:26px 24px 22px;
  display:flex;
  flex-direction:column;
  text-align:center;
  transition:transform .25s ease, box-shadow .25s ease;
}

.cl-card:hover{
  transform:translateY(-6px);
  box-shadow:0 26px 55px rgba(2,10,25,.14);
}

.cl-card-top{
  display:flex;
  justify-content:flex-end;
}

.cl-badge{
  font-size:12px;
  font-weight:700;
  padding:6px 12px;
  border-radius:var(--radius);
  background:var(--brand-soft);
  color:var(--brand);
}

.cl-logo-wrap{
  height:110px;
  display:flex;
  align-items:center;
  justify-content:center;
  margin:14px 0 8px;
}

.cl-logo{
  max-height:90px;
  max-width:180px;
  object-fit:contain;
}

/* ORC logo (BLACK) */
.cl-logo.is-orc{
  filter: grayscale(1) brightness(0) saturate(100%);
}

.cl-card-title{
  margin:10px 0 8px;
  font-size:18px;
  font-weight:800;
  color:var(--ink);
}

.cl-card-text{
  font-size:14px;
  line-height:1.7;
  color:var(--muted);
  margin-bottom:14px;
}

/* ================= EMAIL (Gold + SVG) ================= */
.cl-card-email{
  margin:10px 0 16px;
  font-size:14px;
}

.cl-email{
  display:inline-flex;
  align-items:center;
  gap:10px;
  color:var(--brand);
  font-weight:800;
  text-decoration:none;
  letter-spacing:.2px;
}

.cl-email:hover{ opacity:.85; }

.cl-email-ico{
  flex:0 0 auto;
  color:var(--brand);
}

.cl-card-email-empty{ height:20px; }

.cl-card-foot{
  margin-top:auto;
  padding-top:16px;
  border-top:1px solid var(--border);
}

.cl-link{
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-weight:700;
  color:var(--ink);
  text-decoration:none;
}

.cl-link:hover{ color:var(--brand); }

.cl-link.is-disabled{
  opacity:.4;
  cursor:not-allowed;
}

/* ================= VESSELS (IMAGE FLUSH – NO GAPS) ================= */
.cl-vblock{ margin-top:60px; }
.cl-vblock:first-of-type{ margin-top:0; }

.cl-vblock-head{
  display:flex;
  align-items:center;
  justify-content:center;
  margin:0 auto 22px;
  max-width:980px;
}

.cl-vblock-title{
  margin:0;
  font-size:clamp(20px,2.6vw,32px);
  font-weight:900;
  color:var(--ink);
}

.cl-vgrid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:26px;
}

.cl-vcard2{
  background:#fff;
  border:1px solid var(--border);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  overflow:hidden;
  padding:0;
}

.cl-vcard2-inner{
  display:grid;
  grid-template-columns:44% 56%;
  align-items:stretch;
  height:100%;
}

.cl-vcard2-logo{
  margin:0;
  padding:0;
  overflow:hidden;
}

.cl-vcard2-logo img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

.cl-vcard2-body{ padding:28px 30px; }

.cl-vcard2-title{
  margin:0 0 10px;
  font-size:18px;
  font-weight:900;
  color:var(--ink);
}

.cl-vcard2-text{
  margin:0;
  font-size:14px;
  line-height:1.9;
  color:var(--muted);
}

/* ================= RTL ================= */
[dir="rtl"] .cl-card,
[dir="rtl"] .cl-head{
  text-align:right;
}

[dir="rtl"] .cl-vcard2-inner{ grid-template-columns:56% 44%; }
[dir="rtl"] .cl-vcard2-logo{ order:2; }
[dir="rtl"] .cl-vcard2-body{
  order:1;
  text-align:right;
}

/* ================= RESPONSIVE ================= */
@media (max-width:980px){
  .cl-vgrid{ grid-template-columns:1fr; }
  .cl-vcard2-inner{ grid-template-columns:1fr; }
  .cl-vcard2-logo{ height:240px; }
  .cl-vcard2-body{
    padding:20px 18px;
    text-align:center;
  }
  [dir="rtl"] .cl-vcard2-body{ text-align:center; }
}

@media (max-width:600px){
  .cl-section{ padding:70px 0; }
}

/* =========================================
   ✅ ICON BUTTONS (Same as your screenshot)
   Use inside hero: put wrapper in HTML:
   <div class="c-icon-actions">...</div>
========================================= */
.c-icon-actions{
  display:flex;
  gap:14px;
  align-items:center;
}

/* optional: position inside hero (if you want it top-right) */
.cl-hero-actions{
  position:absolute;
  top:26px;
  right:26px;
  z-index:3;
}
[dir="rtl"] .cl-hero-actions{
  right:auto;
  left:26px;
}

.c-icon-btn{
  width:62px;
  height:62px;
  border-radius:18px;
  display:grid;
  place-items:center;
  text-decoration:none;
  border:0;
  cursor:pointer;
  background:transparent;

  box-shadow:
    0 0 0 6px rgba(176,138,58,.16),
    0 0 0 2px var(--c-logo-gold);

  transition: transform .15s ease, box-shadow .15s ease;
}

.c-icon-btn__inner{
  width:52px;
  height:52px;
  border-radius:16px;
  display:grid;
  place-items:center;
  background: linear-gradient(180deg, var(--c-charcoal2), var(--c-charcoal));
  box-shadow: 0 14px 30px rgba(2,6,23,.18);
}

.c-icon-btn svg{
  width:22px;
  height:22px;
  display:block;
}

.c-icon-btn:hover{
  transform: translateY(-1px);
  box-shadow:
    0 0 0 6px rgba(176,138,58,.22),
    0 0 0 2px rgba(212,175,55,.95),
    0 18px 40px rgba(2,6,23,.12);
}

.c-icon-btn:active{
  transform: translateY(0px) scale(.98);
}