/* Consolidated CSS */

:root{
      --ink:#0f172a; --muted:#64748b; --line:#e5e7eb;
      --accent:#0ea5e9; --accent2:#22c55e; --soft:#f8fafc;
    }
    body{ background:#fff; color:var(--ink) }
    .logo-img{ height:40px }
    .hero-mini{ background:linear-gradient(180deg,#f8fafc,#ffffff); border-bottom:1px solid var(--line) }
    .page-kicker{ font-weight:800; font-size:.85rem; letter-spacing:.06em; color:#0369a1; background:#e0f2fe; border-radius:999px; padding:.35rem .7rem; display:inline-block }
    .filters .btn{ border-radius:999px }
    .pcard{ border:1px solid var(--line); border-radius:14px; overflow:hidden; background:#fff; height:100%; transition:transform .15s ease }
    .pcard:hover{ transform:translateY(-3px) }
    .pcard-img{ height:180px; object-fit:cover; background:#f3f4f6 }
    .badge-tag{ background:#eef2ff; color:#3730a3; font-weight:600 }
    .meta{ color:var(--muted); font-size:.9rem }
    .client-logos img{ height:28px; opacity:.85 }
    .section-title{ position:relative; padding-bottom:.4rem; margin-bottom:1rem; font-weight:800 }
    .section-title:after{ content:""; position:absolute; left:0; bottom:0; width:84px; height:3px; background:linear-gradient(90deg,var(--accent),var(--accent2)); border-radius:3px }

:root{
    --ink:#0f172a;        /* main text */
    --muted:#64748b;      /* secondary text */
    --line:#e5e7eb;       /* borders */
    --accent:#0ea5e9;     /* cyan/blue accent */
    --accent-2:#22c55e;   /* green accent */
    --surface:#ffffff;
    --surface-soft:#f8fafc;
  }

  /* Typography */
  body{
    font-family: "Inter","Noto Sans JP",system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
    color:var(--ink);
    background:var(--surface-soft);
  }
  h1,h2,h3{
    font-family:"Playfair Display",serif;
    letter-spacing:.2px;
  }
  .text-muted{ color:var(--muted)!important; }

  /* Page title (About JABA IT) – subtle gradient text */
  .page-hero-title{
    font-weight:800;
    background: linear-gradient(90deg, var(--ink) 0%, var(--accent) 50%, var(--accent-2) 100%);
    -webkit-background-clip:text;
    background-clip:text;
    color:transparent;
  }

  /* Section title with accent underline */
  .section-title{
    position:relative;
    padding-bottom:.35rem;
    margin-bottom:1rem;
  }
  .section-title:after{
    content:"";
    position:absolute; left:0; bottom:0;
    width:84px; height:3px;
    background:linear-gradient(90deg,var(--accent),var(--accent-2));
    border-radius:3px;
  }

  /* Card look (no effects) */
  .about-box{
    border:1px solid var(--line);
    border-radius:14px;
    background:var(--surface);
  }
  .about-box .box-title{
    font-weight:700;
    margin-bottom:.35rem;
  }
  .about-box .box-text{
    color:var(--muted);
    font-size:.95rem;
    line-height:1.55;
  }

  /* Labeled chips for small headings inside boxes (Mission / Vision / Values / Quick facts) */
	
  .chip{
    display:inline-flex; align-items:center; gap:.4rem;
    font-size:.78rem; font-weight:800; letter-spacing:.03em;
    padding:.28rem .6rem; border-radius:999px;
    background:#eff6ff; color:#1d4ed8;   /* blue chip */
  }
  .chip.chip-green{ background:#ecfdf5; color:#047857; }
  .chip.chip-amber{ background:#fff7ed; color:#b45309; }
  .chip .bi{ font-size:.9rem; }

  /* Lists inside "Values" box */
  .values-list{ margin:0; padding-left:1.1rem; color:var(--muted); }

  /* Quick facts box tone */
  .facts{ background:#f0f9ff; } /* very soft blue */
  .facts .box-text{ color:#0b588f; }

  /* Subtle section separators (matches your screenshot spacing) */
  .section-rule{ border-top:1px solid var(--line); margin:2rem 0; }

:root { --teal:#14b8a6; --muted:#6b7280; --line:#e5e7eb; --ink:#0f172a; }
    body { background:#fff; color:var(--ink); }
    .logo-img { height:40px }
    .services-card { border:1px solid var(--line); border-radius:.5rem; background:#fff; }
    .shadow-soft { box-shadow:0 .5rem 1.25rem rgba(0,0,0,.06), 0 .125rem .5rem rgba(0,0,0,.05); }

.services-card {
    border: 1px solid #e5e7eb;
    border-radius: .75rem;
    background: #fff;
    transition: all 0.3s ease;
  }
  .services-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 10px 20px rgba(0,0,0,0.08);
    border-color: #14b8a6; /* teal border on hover */
  }
  .services-card i {
    transition: color 0.3s ease, transform 0.3s ease;
  }
  .services-card:hover i {
    transform: scale(1.2);
    color: #0f766e !important;
  }

/* ===== About page layout fixes (v2) ===== */
:root{
  --ink:#0f172a; --muted:#64748b; --line:#e5e7eb;
  --accent:#0ea5e9; --accent-2:#22c55e; --surface:#ffffff; --surface-soft:#f8fafc;
}
/* keep general body default white across site */
body{ color:var(--ink); background:#fff; }

/* Top mini bar */
.top-mini a{ color:inherit; }

/* Spacing utilities for sections */
.section{ padding-top:2rem; padding-bottom:2rem; }
.section-sm{ padding-top:1.25rem; padding-bottom:1.25rem; }
.section-lg{ padding-top:3rem; padding-bottom:3rem; }

/* Hero title & subtitle */
.page-hero-title{
  font-family: "Playfair Display", serif;
  font-weight:800;
  letter-spacing:.2px;
  background:linear-gradient(90deg,var(--ink),var(--accent) 50%,var(--accent-2));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.lead-muted{ color:var(--muted); }

/* Section heading underline */
.section-title{
  position:relative; padding-bottom:.4rem; margin-bottom:1rem;
  font-family:"Playfair Display",serif; font-weight:800;
}
.section-title:after{
  content:""; position:absolute; left:0; bottom:0; width:84px; height:3px;
  background:linear-gradient(90deg,var(--accent),var(--accent-2)); border-radius:3px;
}

/* Card-like boxes used across About (mission/vision/values/facts/leadership/offices) */
.about-box{
  background:var(--surface); border:1px solid var(--line);
  border-radius:14px; padding:1rem;
}
.about-box .box-title{ font-weight:700; margin-bottom:.35rem; }
.about-box .box-text{ color:var(--muted); font-size:.95rem; line-height:1.6; }
.values-list{ margin:0; padding-left:1.1rem; color:var(--muted); }

/* Quick facts pale background to match prior look */
.about-box.facts{ background:#f0f9ff; }
.about-box.facts .box-text{ color:#0b588f; }

/* Small chips for mini-headings */
.chip{ display:inline-flex; align-items:center; gap:.4rem;
  font-size:.78rem; font-weight:800; letter-spacing:.03em;
  padding:.28rem .6rem; border-radius:999px; background:#eff6ff; color:#1d4ed8;
}
.chip .bi{ font-size:.9rem; }
.chip-green{ background:#ecfdf5; color:#047857; }
.chip-amber{ background:#fff7ed; color:#b45309; }

/* Keep section dividers light */
.section-rule{ border-top:1px solid var(--line); margin:2rem 0; }

/* Make sure Bootstrap cards/grids spacing stays like before */
.row.g-3 > [class*="col-"]{ margin-bottom:0 !important; }

/* ==== Anti-blink hard patch v3c ==== */
/* Neutralize any transform/transition/animation on cards and inner elements */
.pcard, .pcard * {
  transition: none !important;
  animation: none !important;
  transform: none !important;
  -webkit-transform: none !important;
  will-change: auto !important;
}

/* Avoid contain / backface tricks that can cause text layer resets */
.pcard {
  contain: none !important;
  backface-visibility: visible !important;
  -webkit-backface-visibility: visible !important;
  perspective: none !important;
  -webkit-perspective: none !important;
  box-shadow: none;
  border-color: #e5e7eb;
}

/* Hover: only a subtle shadow + border color, still no transition */
@media (hover:hover) {
  .pcard:hover {
    box-shadow: 0 8px 18px rgba(0,0,0,0.06);
    border-color: #e3e7ee;
  }
}

/* Text rendering stability */
.pcard h1, .pcard h2, .pcard h3, .pcard h4, .pcard h5, .pcard h6,
.pcard .card-title, .pcard .meta, .pcard p, .pcard .badge, .pcard a {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  text-shadow: rgba(0,0,0,0.001) 0 0 1px; /* keeps raster layer stable */
}

/* Images should not trigger reflow */
.pcard-img { display:block; }