/* ============================================================
   Jopetnah International Limited — shared design system
   ============================================================ */

:root {
  --navy: #1B1E23;
  --red: #E0151B;
  --blue: #0E86D4;
  --blue-tint: #EAF4FC;
  --red-tint: #FDEAEA;
  --hairline: #E3E5E8;
  --gray: #53555B;
  --lgray: #8A8D93;
  --paper: #FBFBFC;
  --white: #FFFFFF;

  --font-display: 'Poppins', 'Segoe UI', sans-serif;
  --font-body: 'Lora', Georgia, serif;

  --maxw: 1180px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--navy);
  background: var(--white);
  line-height: 1.66;
  font-size: 16px;
}
h1, h2, h3, h4, .display {
  font-family: var(--font-display);
  color: var(--navy);
  line-height: 1.18;
  margin: 0;
}
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 28px; }
.eyebrow {
  font-family: var(--font-display);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 2.6px;
  text-transform: uppercase;
  color: var(--blue);
  margin-bottom: 10px;
  display: block;
}
.orbit-rule {
  height: 4px;
  width: 64px;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--red), var(--blue));
  margin: 18px 0 0 0;
}
.orbit-rule.center { margin-left: auto; margin-right: auto; }

/* -------------------- Buttons -------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 14.5px;
  padding: 13px 26px;
  border-radius: 4px;
  transition: transform .15s ease, box-shadow .15s ease;
  cursor: pointer;
  border: none;
}
.btn-primary {
  background: linear-gradient(90deg, var(--red), var(--blue));
  color: var(--white);
}
.btn-primary:hover { transform: translateY(-1px); box-shadow: 0 6px 18px rgba(14,134,212,0.28); }
.btn-outline {
  background: transparent;
  color: var(--navy);
  border: 1.5px solid var(--hairline);
}
.btn-outline:hover { border-color: var(--blue); color: var(--blue); }

/* -------------------- Nav -------------------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255,255,255,0.92);
  backdrop-filter: saturate(180%) blur(10px);
  border-bottom: 1px solid var(--hairline);
}
.nav {
  max-width: var(--maxw); margin: 0 auto; padding: 14px 28px;
  display: flex; align-items: center; justify-content: space-between;
}
.brand { display: flex; align-items: center; gap: 10px; }
.brand img { height: 34px; width: auto; }
.brand span {
  font-family: var(--font-display); font-weight: 700; font-size: 15.5px;
  letter-spacing: 0.4px; color: var(--navy);
}
.nav-links { display: flex; align-items: center; gap: 30px; }
.nav-links a {
  font-family: var(--font-display); font-size: 14px; font-weight: 500;
  color: var(--gray); position: relative; padding: 4px 0;
}
.nav-links a:hover { color: var(--navy); }
.nav-links a.active { color: var(--navy); font-weight: 600; }
.nav-links a.active::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -3px; height: 2.5px;
  background: linear-gradient(90deg, var(--red), var(--blue)); border-radius: 2px;
}
.nav-cta { margin-left: 8px; }
.nav-toggle { display: none; }

@media (max-width: 860px) {
  .nav-links { position: fixed; top: 64px; left:0; right:0; background: var(--white);
    flex-direction: column; align-items: flex-start; padding: 18px 28px 24px;
    border-bottom: 1px solid var(--hairline); gap: 16px;
    transform: translateY(-8px); opacity: 0; pointer-events: none; transition: all .18s ease; }
  .nav-links.open { transform: translateY(0); opacity: 1; pointer-events: auto; }
  .nav-toggle { display: block; background: none; border: none; cursor: pointer; }
  .nav-toggle svg { display:block; }
}

/* -------------------- Hero -------------------- */
.hero {
  padding: 86px 0 70px 0;
  background: linear-gradient(180deg, var(--paper) 0%, var(--white) 100%);
  overflow: hidden;
}
.hero-grid {
  display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 40px; align-items: center;
}
.hero h1 { font-size: 42px; font-weight: 700; letter-spacing: -0.3px; }
.hero .lede {
  font-family: var(--font-body); font-size: 17.5px; color: var(--gray);
  max-width: 46ch; margin-top: 18px;
}
.hero .cta-row { display: flex; gap: 14px; margin-top: 30px; flex-wrap: wrap; }
@media (max-width: 900px) {
  .hero-grid { grid-template-columns: 1fr; }
  .hero h1 { font-size: 32px; }
}

/* -------------------- Page header (non-home) -------------------- */
.page-header {
  padding: 64px 0 40px 0;
  background: linear-gradient(180deg, var(--paper), var(--white));
  border-bottom: 1px solid var(--hairline);
}
.page-header h1 { font-size: 34px; }
.page-header .lede { color: var(--gray); font-size: 16.5px; max-width: 62ch; margin-top: 14px; }

/* -------------------- Sections -------------------- */
section { padding: 68px 0; }
section.tight { padding: 48px 0; }
.section-head { max-width: 700px; margin-bottom: 34px; }
.section-head h2 { font-size: 28px; }

/* -------------------- Pillars (home) -------------------- */
.pillars { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.pillar {
  padding: 26px 22px; border: 1px solid var(--hairline); border-radius: 8px;
  background: var(--white); transition: border-color .15s ease, transform .15s ease;
}
.pillar:hover { border-color: var(--blue); transform: translateY(-2px); }
.pillar .num { font-family: var(--font-display); font-weight: 700; font-size: 12.5px; color: var(--red); letter-spacing: 1px; }
.pillar h3 { font-size: 16.5px; margin-top: 10px; }
.pillar p { font-size: 13.8px; color: var(--gray); margin-top: 8px; }
@media (max-width: 900px) { .pillars { grid-template-columns: repeat(2, 1fr); } }

/* -------------------- Stats band -------------------- */
.stats-band { background: var(--navy); color: var(--white); }
.stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; text-align:center; }
.stat .n { font-family: var(--font-display); font-weight: 700; font-size: 34px; }
.stat .n .accent { color: #5FB6EF; }
.stat .l { font-size: 12.5px; color: #B7BAC0; letter-spacing: 0.6px; text-transform: uppercase; margin-top: 6px; }
@media (max-width: 700px) { .stats-grid { grid-template-columns: repeat(2, 1fr); row-gap: 30px; } }

/* -------------------- Orbit hero graphic -------------------- */
.orbit-wrap { position: relative; width: 100%; aspect-ratio: 1 / 1; max-width: 460px; margin: 0 auto; }
.orbit-wrap svg { width: 100%; height: 100%; }
.orbit-ring { fill: none; stroke: url(#ringGrad); stroke-width: 1.4; }
.orbit-dot circle { fill: var(--white); stroke: var(--blue); stroke-width: 2; }
.orbit-dot.hq circle { fill: var(--red); stroke: var(--red); }
.orbit-dot text {
  font-family: var(--font-display); font-size: 9.5px; font-weight: 600; fill: var(--gray);
}
.orbit-dot.hq text { fill: var(--red); font-weight: 700; }
.orbit-pulse { animation: pulse 2.4s ease-in-out infinite; transform-origin: center; }
@keyframes pulse { 0%,100% { opacity: 0.55; transform: scale(1); } 50% { opacity: 0; transform: scale(2.6); } }
@media (prefers-reduced-motion: reduce) { .orbit-pulse { animation: none; } }

/* -------------------- Divisions grid (home preview) -------------------- */
.div-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.div-chip {
  padding: 16px 18px; border: 1px solid var(--hairline); border-radius: 7px;
  font-family: var(--font-display); font-size: 13.6px; font-weight: 500; color: var(--navy);
  display: flex; align-items: center; gap: 10px;
}
.div-chip .n { color: var(--blue); font-weight: 700; font-size: 12px; }
@media (max-width: 900px) { .div-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .div-grid { grid-template-columns: 1fr; } }

/* -------------------- CTA band -------------------- */
.cta-band {
  background: linear-gradient(90deg, var(--red), var(--blue));
  color: var(--white); text-align: center; border-radius: 10px;
  padding: 46px 30px;
}
.cta-band h2 { color: var(--white); font-size: 26px; }
.cta-band p { color: rgba(255,255,255,0.9); margin-top: 10px; }
.cta-band .cta-row { justify-content: center; margin-top: 24px; }
.cta-band .btn-outline { border-color: rgba(255,255,255,0.55); color: var(--white); }
.cta-band .btn-outline:hover { border-color: var(--white); }
.cta-band .btn-primary { background: var(--white); color: var(--navy); }

/* -------------------- Cards / value grid -------------------- */
.value-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.value-card { padding: 22px; border-radius: 8px; background: var(--blue-tint); }
.value-card:nth-child(3n+2) { background: var(--red-tint); }
.value-card h3 { font-size: 15.5px; color: var(--navy); }
.value-card p { font-size: 13.8px; color: var(--gray); margin-top: 8px; }
@media (max-width: 900px) { .value-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .value-grid { grid-template-columns: 1fr; } }

.vm-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.vm-box { padding: 26px; border-left: 4px solid var(--blue); background: var(--blue-tint); border-radius: 6px; }
.vm-box.red { border-left-color: var(--red); background: var(--red-tint); }
.vm-box .label { font-family: var(--font-display); font-weight: 700; font-size: 12px; letter-spacing: 1.4px; text-transform: uppercase; color: #0A5F94; margin-bottom: 8px; }
.vm-box.red .label { color: #B10E13; }
.vm-box p { font-size: 14.5px; margin: 0; }
@media (max-width: 750px) { .vm-grid { grid-template-columns: 1fr; } }

.obj-list { counter-reset: obj; }
.obj-row { display: flex; gap: 16px; padding: 18px 0; border-top: 1px solid var(--hairline); }
.obj-row:first-child { border-top: none; }
.obj-num {
  font-family: var(--font-display); font-weight: 700; color: var(--white); background: var(--blue);
  width: 30px; height: 30px; min-width:30px; border-radius: 50%; display:flex; align-items:center; justify-content:center;
  font-size: 13px;
}
.obj-body h4 { font-size: 15.5px; }
.obj-body p { font-size: 14px; color: var(--gray); margin-top: 4px; }

/* -------------------- Accordion (Services page) -------------------- */
.accordion-item {
  border: 1px solid var(--hairline); border-radius: 8px; margin-bottom: 12px; overflow: hidden;
  background: var(--white);
}
.accordion-trigger {
  width: 100%; display: flex; align-items: center; gap: 16px; padding: 18px 22px;
  background: none; border: none; cursor: pointer; text-align: left; font-family: var(--font-display);
}
.accordion-trigger .n {
  font-weight: 700; color: var(--blue); font-size: 13px; min-width: 26px;
}
.accordion-trigger .t { flex: 1; }
.accordion-trigger .t .title { font-weight: 600; font-size: 15.5px; color: var(--navy); }
.accordion-trigger .t .sub { font-size: 12.8px; color: var(--lgray); margin-top: 3px; font-family: var(--font-body); font-style: italic; }
.accordion-trigger .chev { transition: transform .2s ease; flex-shrink: 0; color: var(--lgray); }
.accordion-item.open .accordion-trigger .chev { transform: rotate(180deg); color: var(--blue); }
.accordion-item.open .accordion-trigger .title { color: var(--blue); }
.accordion-panel {
  max-height: 0; overflow: hidden; transition: max-height .28s ease;
}
.accordion-panel-inner { padding: 0 22px 22px 62px; font-size: 14.5px; color: var(--gray); }
.accordion-panel-inner p { margin: 0 0 10px 0; }
.accordion-panel-inner .term { color: var(--blue); font-weight: 600; font-family: var(--font-display); }
.accordion-panel-inner .tagline {
  margin-top: 10px; padding: 10px 16px; border-radius: 5px; color: var(--white);
  font-family: var(--font-display); font-weight: 600; font-size: 13px; display:inline-block;
}

/* -------------------- Contact page -------------------- */
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; }
.contact-list .item { display: flex; gap: 14px; padding: 16px 0; border-bottom: 1px solid var(--hairline); }
.contact-list .item:last-child { border-bottom: none; }
.contact-list .ic {
  width: 36px; height: 36px; border-radius: 50%; background: var(--blue-tint);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.contact-list .label { font-family: var(--font-display); font-weight: 600; font-size: 13px; color: var(--lgray); text-transform: uppercase; letter-spacing: 0.5px; }
.contact-list .val { font-size: 15px; color: var(--navy); margin-top: 2px; }
.form-field { margin-bottom: 16px; }
.form-field label { display: block; font-family: var(--font-display); font-size: 13px; font-weight: 600; margin-bottom: 6px; color: var(--navy); }
.form-field input, .form-field textarea {
  width: 100%; padding: 12px 14px; border: 1px solid var(--hairline); border-radius: 5px;
  font-family: var(--font-body); font-size: 14.5px; color: var(--navy); background: var(--paper);
}
.form-field input:focus, .form-field textarea:focus { outline: 2px solid var(--blue); outline-offset: 1px; }
.tag-cloud { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.tag-cloud span {
  font-family: var(--font-display); font-size: 12px; font-weight: 500; color: var(--gray);
  background: var(--paper); border: 1px solid var(--hairline); padding: 5px 12px; border-radius: 20px;
}
@media (max-width: 850px) { .contact-grid { grid-template-columns: 1fr; } }

/* -------------------- Footer -------------------- */
.site-footer { background: var(--navy); color: #C7CAD1; padding: 50px 0 24px 0; }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 30px; }
.footer-brand { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.footer-brand img { height: 30px; }
.footer-brand span { font-family: var(--font-display); font-weight: 700; color: var(--white); font-size: 14.5px; }
.site-footer p { font-size: 13.5px; color: #9599A1; }
.site-footer h5 { font-family: var(--font-display); color: var(--white); font-size: 13px; letter-spacing: 0.8px; text-transform: uppercase; margin-bottom: 14px; }
.site-footer ul { list-style: none; padding: 0; margin: 0; }
.site-footer li { margin-bottom: 9px; }
.site-footer a { font-size: 13.8px; color: #C7CAD1; }
.site-footer a:hover { color: var(--white); }
.footer-bottom { border-top: 1px solid #33363D; margin-top: 40px; padding-top: 20px; text-align: center; font-size: 12.5px; color: #7A7E86; }
@media (max-width: 800px) { .footer-grid { grid-template-columns: 1fr 1fr; row-gap: 28px; } }

/* -------------------- Utility -------------------- */
.mt-0 { margin-top: 0 !important; }
.center { text-align: center; }
.visually-hidden { position:absolute; width:1px;height:1px;overflow:hidden; clip:rect(0,0,0,0); }

/* -------------------- Core services chip list (accordion panels) -------------------- */
.core-services-label {
  font-family: var(--font-display); font-weight: 700; font-size: 11.5px; letter-spacing: 0.8px;
  text-transform: uppercase; color: var(--navy); margin: 14px 0 8px 0;
}
.chip-list { display: flex; flex-wrap: wrap; gap: 8px; }
.chip-list span {
  font-family: var(--font-display); font-size: 12.6px; font-weight: 500; color: var(--gray);
  background: var(--paper); border: 1px solid var(--hairline); padding: 6px 13px; border-radius: 16px;
}

/* -------------------- Sustainability page -------------------- */
.sus-block { margin-bottom: 40px; }
.sus-block:last-child { margin-bottom: 0; }
.sus-head { display:flex; align-items:center; gap:12px; margin-bottom: 14px; }
.sus-head .icon-badge {
  width: 40px; height: 40px; border-radius: 50%; background: var(--blue-tint);
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.sus-head.red .icon-badge { background: var(--red-tint); }
.sus-head h3 { font-size: 19px; }
.icon-list { display:grid; grid-template-columns: repeat(2, 1fr); gap: 8px 20px; }
.icon-list .row { display:flex; align-items:flex-start; gap:9px; font-size: 14px; color: var(--gray); }
.icon-list .row svg { flex-shrink:0; margin-top:3px; }
@media (max-width: 700px) { .icon-list { grid-template-columns: 1fr; } }

.pillar-tag { display:inline-block; font-family: var(--font-display); font-weight:600; font-size:12px;
  color: var(--blue); background: var(--blue-tint); padding: 4px 11px; border-radius: 14px; margin-bottom:10px; }

.leadership-grid { display:grid; grid-template-columns: repeat(4,1fr); gap:12px; }
.leadership-grid .role {
  padding: 16px; border:1px solid var(--hairline); border-radius:7px; text-align:center;
  font-family: var(--font-display); font-weight:600; font-size: 13px; color: var(--navy);
}
@media (max-width: 900px) { .leadership-grid { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 600px) { .leadership-grid { grid-template-columns: 1fr; } }

.social-row { display:flex; flex-wrap:wrap; gap:10px; margin-top:14px; }
.social-row a {
  font-family: var(--font-display); font-weight:600; font-size:13px; color:var(--navy);
  border:1px solid var(--hairline); padding:8px 16px; border-radius:20px; transition: all .15s ease;
}
.social-row a:hover { border-color: var(--blue); color: var(--blue); }

.stat-strip { display:flex; flex-wrap:wrap; gap:28px; margin-top:8px; }
.stat-strip .item { font-size:13.5px; color:var(--gray); }
.stat-strip .item b { display:block; font-family:var(--font-display); font-weight:700; font-size:22px; color:var(--navy); }
/* ============================================================
   JIL Website Enhancements — reconciled patch
   Append to the END of css/style.css.
   Supersedes the two earlier, overlapping drafts:
     - css/style-additions.css (already committed, never linked)
     - enhancements-review-01.css (uploaded review package)
   Both targeted the same nav/focus-visible/reduced-motion/scroll-margin
   ground; this file keeps the best version of each rule exactly once.
   Does not replace existing page content, JavaScript, or forms.
   Untested in a live browser — check on a phone and at ~900px/~1000px
   widths before merging into the live stylesheet.
   ============================================================ */

:root {
  --jil-focus: #075f9a;
  --jil-blue-deep: #075f9a;
  --jil-surface: #f4f8fc;
  --jil-border-strong: #c9d6e2;
  --jil-shadow-soft: 0 12px 34px rgba(27, 30, 35, 0.07);
  --jil-shadow-hover: 0 18px 42px rgba(14, 134, 212, 0.13);
}

/* ---- Navigation: breakpoints (from the orphaned style-additions.css) ---- */

/* Six nav items + CTA need more room than the old 860px breakpoint gives.
   Switch to the mobile menu earlier and tighten spacing just above it. */
@media (max-width: 1100px) {
  .nav-links { gap: 20px; }
  .nav-links a { font-size: 13.5px; }
}
@media (max-width: 1020px) {
  .nav-links { position: fixed; top: 64px; left: 0; right: 0; background: var(--white);
    flex-direction: column; align-items: flex-start; padding: 18px 28px 24px;
    border-bottom: 1px solid var(--hairline); gap: 16px;
    transform: translateY(-8px); opacity: 0; pointer-events: none; transition: all .18s ease; }
  .nav-links.open { transform: translateY(0); opacity: 1; pointer-events: auto; }
  .nav-toggle { display: block; background: none; border: none; cursor: pointer; }
  .nav-toggle svg { display: block; }
}
@media (max-width: 860px) {
  .nav-links {
    max-height: calc(100dvh - 64px);
    overflow-y: auto;
    overscroll-behavior: contain;
  }
}

/* Small phones: brand + CTA + toggle do not fit on one row. */
@media (max-width: 600px) {
  .nav { padding: 12px 18px; }
  .brand span { font-size: 13px; }
  .nav-cta { display: none; }   /* the CTA is inside the page and the menu */
}

.site-header {
  box-shadow: 0 3px 18px rgba(27, 30, 35, 0.035);
}
.nav-links a {
  transition: color .18s ease;
}

/* ---- Accessibility: keyboard focus ---- */

:where(a, button, input, textarea, select, summary, [tabindex]):focus-visible {
  outline: 3px solid var(--jil-focus);
  outline-offset: 3px;
  border-radius: 3px;
}
.nav-toggle:focus-visible,
.btn:focus-visible {
  outline-offset: 4px;
}
.nav-links a:focus-visible {
  border-radius: 3px;
}

/* Shared skip link; becomes visible when focused. HTML markup
   (<a class="skip-link" href="#main-content">Skip to main content</a>
   as the first element inside <body>, and id="main-content" on the
   primary content container) has already been added page-by-page
   alongside this stylesheet — this rule only supplies the look. */
.skip-link {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 1000;
  transform: translateY(-160%);
  padding: 10px 14px;
  border-radius: 6px;
  color: #fff;
  background: var(--jil-blue-deep);
  font: 600 14px/1.3 var(--font-display);
  box-shadow: var(--jil-shadow-soft);
}
.skip-link:focus {
  transform: translateY(0);
}

/* ---- Typography / surface polish ---- */

body {
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}
::selection {
  color: #fff;
  background: var(--jil-blue-deep);
}
section .section-head p,
.page-header .lede,
.hero .lede {
  text-wrap: pretty;
}
h1, h2, h3, h4 {
  text-wrap: balance;
}
.wrap {
  width: 100%;
}

/* ---- Anchored sections should clear the sticky header when jumped to ---- */
section:not(.stats-band):not(.cta-band) {
  scroll-margin-top: 88px;
}
#main-content {
  scroll-margin-top: 88px;
}

/* ---- Cards: improve perceived quality without changing information design ---- */
.pillar,
.value-card,
.accordion-item,
.leadership-grid .role,
.div-chip {
  box-shadow: 0 1px 0 rgba(27, 30, 35, 0.025);
  transition:
    border-color .18s ease,
    box-shadow .18s ease,
    transform .18s ease,
    background-color .18s ease;
}
.pillar:hover,
.value-card:hover,
.leadership-grid .role:hover {
  box-shadow: var(--jil-shadow-hover);
}
.div-chip {
  background: linear-gradient(145deg, #fff, #f8fbfe);
}
.div-chip:hover,
.div-chip:focus-visible {
  border-color: var(--blue);
  background: var(--blue-tint);
}
.accordion-item:focus-within {
  border-color: var(--blue);
}
.accordion-trigger:focus-visible {
  outline-offset: -4px;
}

/* ---- Stronger page openings, retaining the current blue/red brand palette ---- */
.hero {
  background:
    radial-gradient(ellipse at 92% 10%, rgba(14, 134, 212, .085), transparent 35%),
    radial-gradient(ellipse at 5% 90%, rgba(224, 21, 27, .045), transparent 28%),
    linear-gradient(180deg, var(--paper) 0%, var(--white) 100%);
}
.page-header {
  background:
    radial-gradient(ellipse at 100% 0%, rgba(14, 134, 212, .075), transparent 38%),
    linear-gradient(180deg, var(--paper), var(--white));
}
.hero h1 {
  max-width: 17ch;
  line-height: 1.12;
}
.page-header h1 {
  line-height: 1.12;
}
.btn {
  min-height: 44px;
  justify-content: center;
}
.btn-primary {
  box-shadow: 0 5px 16px rgba(14, 134, 212, .12);
}
.btn-primary:hover {
  box-shadow: 0 8px 22px rgba(14, 134, 212, .2);
}

/* ---- Contact fields: clearer boundaries and high-visibility focus ---- */
.form-field input,
.form-field textarea,
.form-field select {
  border-color: var(--jil-border-strong);
  transition: border-color .16s ease, box-shadow .16s ease, background .16s ease;
}
.form-field input:focus,
.form-field textarea:focus,
.form-field select:focus {
  border-color: var(--jil-focus);
  box-shadow: 0 0 0 3px rgba(14, 134, 212, .12);
  outline: none;
}
.form-field input::placeholder,
.form-field textarea::placeholder {
  color: #666d76;
  opacity: 1;
}

/* Article cards may use either .news-card or existing .article-card naming.
   These rules are deliberately limited to those common card classes. */
.news-card,
.article-card {
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 6px 24px rgba(27, 30, 35, .055);
  transition: transform .2s ease, box-shadow .2s ease;
}
.news-card:hover,
.article-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--jil-shadow-hover);
}
.news-card img,
.article-card img {
  object-fit: cover;
}
.news-card a:focus-visible,
.article-card a:focus-visible {
  outline-offset: -4px;
}

/* ---- Footer: dark feature band; improve legibility of small copy/links ---- */
.site-footer p {
  color: #b8bec8;
}
.site-footer a {
  text-underline-offset: 3px;
}
.site-footer a:focus-visible {
  outline-color: #8fd0ff;
}

/* ---- Respect reduced-motion for all animation/transition/smooth-scroll ---- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---- Accessibility: colour-contrast fixes ----
   Computed against the real tokens in css/style.css using the WCAG 2.1
   relative-luminance formula. Two tokens, as used in several places on
   bright backgrounds, fall short of the AA 4.5:1 minimum for text:
     --lgray (#8A8D93) on white/paper   → 3.2–3.3:1  (needs 4.5:1)
     --blue  (#0E86D4) on white/tint    → 3.9:1      (needs 4.5:1)
   --lgray is overridden directly below, since every current use of it
   is muted secondary text. --blue is left untouched everywhere (it's
   still correct for backgrounds, borders, hover rings and icons, which
   only need 3:1) and a second, darker token is introduced for the
   specific places --blue is used as small/body text color. */
:root {
  --lgray: #6B6E76; /* was #8A8D93 (3.2–3.3:1 on white/paper) — now 4.9–5.1:1 */
  --blue-text: #0A5F94; /* AA-passing stand-in for var(--blue) as text (6.1–6.8:1) */
}
.eyebrow,
.btn-outline:hover,
.div-chip .n,
.accordion-trigger .n,
.accordion-item.open .accordion-trigger .title,
.accordion-panel-inner .term,
.pillar-tag,
.related a,
.social-row a:hover {
  color: var(--blue-text);
}

/* Related-articles list (news pages): plain links, no bullets, matching
   the spacing of the existing "Related services" paragraph beside it. */
.related-articles ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* ---- Theme toggle (light/dark) ----
   Token-based: the site's CSS already routes nearly every colour through
   custom properties (--navy, --white, --paper, --hairline, --gray,
   --lgray, --blue-tint, --red-tint), so a dark theme is mostly a second
   set of values for those same tokens, scoped under [data-theme="dark"].
   A handful of places don't use the tokens -- a couple of sections that
   are *always* a dark navy regardless of page theme (the stats band,
   the footer), and a few literal colours -- those get explicit
   exceptions below so they don't flip when the tokens do.
   Every colour pair here was checked against the real WCAG formula, the
   same way the light-theme contrast fixes earlier in this file were. */
:root[data-theme="dark"] {
  --navy: #EDEFF2;       /* body + heading text (was the near-black text colour) */
  --white: #121418;      /* card / page "white" surface */
  --paper: #1A1D22;      /* secondary "paper" surface */
  --hairline: #343941;   /* borders/dividers -- kept just as subtle, relatively, as the light theme's */
  --gray: #A9ADB5;       /* secondary body text -- 8.2:1 on the dark surface */
  --lgray: #888D96;      /* muted text -- 5.1-5.5:1 */
  --blue-tint: #13232F;  /* tinted panel background (vm-box) */
  --red-tint: #2A1517;   /* tinted panel background (vm-box, red variant) */
  --blue-text: #5FB6EF;  /* the AA-passing stand-in for --blue-as-text, re-tuned for a dark surface (8.3:1) */
}

/* Components that are already a fixed dark navy and don't need to change
   with the theme -- pin them back to their original value, since --navy
   itself just became a light colour (for body text) above. */
:root[data-theme="dark"] .stats-band,
:root[data-theme="dark"] .site-footer {
  background: #1B1E23;
}
/* The CTA band's primary button is deliberately always a plain white
   button (for contrast against the red/blue gradient) -- keep it that
   way in both themes rather than letting it follow --white/--navy. */
:root[data-theme="dark"] .cta-band .btn-primary {
  background: #FFFFFF;
  color: #1B1E23;
}
/* Sticky header background is a literal rgba(255,255,255,...) in the
   base stylesheet, not a token, so it needs its own dark equivalent. */
:root[data-theme="dark"] .site-header {
  background: rgba(18, 20, 24, 0.85);
}
/* vm-box labels sit on the tinted panels above -- their original colours
   (#0A5F94 / #B10E13) were tuned for a light tint and fail on the dark
   one, so they get a brighter variant specifically for dark mode. */
:root[data-theme="dark"] .vm-box .label { color: var(--blue-text); }
:root[data-theme="dark"] .vm-box.red .label { color: #FF8A8F; }

/* Smooth, optional transition between themes (reduced-motion users get
   the instant-switch rule from the reduced-motion block further down,
   which forces all transition durations to ~0). */
body, .site-header, .glass, .value-card, .pillar, .accordion-item,
.vm-box, .chip-list span, .tag-cloud span {
  transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}

/* The nav toggle icon's stroke was hard-coded to the light-mode navy in
   the page HTML; the HTML now sets stroke="currentColor" instead, and
   this gives that currentColor a value that flips with the theme. */
.nav-toggle { color: var(--navy); }

/* Theme toggle button itself: same visual weight as the existing
   .nav-toggle icon button, always visible (not just below the mobile
   breakpoint), swaps which of its two icons is shown via [data-theme]. */
.theme-toggle {
  width: 36px; height: 36px; border-radius: 8px; border: 1px solid var(--hairline);
  background: none; display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer; color: var(--navy); margin-right: 8px; flex-shrink: 0;
}
.theme-toggle:hover { border-color: var(--blue); color: var(--blue); }
.theme-toggle .icon-moon { display: none; }
:root[data-theme="dark"] .theme-toggle .icon-sun { display: none; }
:root[data-theme="dark"] .theme-toggle .icon-moon { display: block; }

/* Date-range pill on the Projects page (was an inline-styled one-off;
   now a reusable class so it can follow the theme too). */
.date-pill {
  background: #e8f4fc; color: #0E86D4; padding: 5px 14px; border-radius: 20px;
  font-size: 13px; font-weight: 500;
}
:root[data-theme="dark"] .date-pill { background: #13232F; color: #5FB6EF; }

/* ---- Small-screen refinements ---- */
@media (max-width: 600px) {
  .wrap { padding-left: 20px; padding-right: 20px; }
  section { padding-top: 52px; padding-bottom: 52px; }
  section.tight { padding-top: 38px; padding-bottom: 38px; }
  .hero { padding-top: 56px; padding-bottom: 48px; }
  .hero h1 { font-size: clamp(30px, 8vw, 38px); }
  .page-header { padding-top: 48px; padding-bottom: 32px; }
  .page-header h1 { font-size: clamp(28px, 7vw, 34px); }
  .cta-band { padding: 34px 20px; }
  .cta-band h2 { font-size: 23px; }
}

/* ---- 16-sector homepage grid v2: grouped by pillar, iconed, elevated ----
   Replaces the previous flat .div-grid/.div-chip layout with the same
   grouping already named in the "Four Strategic Pillars" section just
   above it on the homepage, plus a small icon per sector so the grid
   reads by shape, not just 16 near-identical text rows. Token-based
   throughout, so it works in dark mode with nothing extra. The old
   .div-grid/.div-chip rules above are left in place but now unused on
   this page -- harmless, but safe to remove later if you want. */
.sector-groups { display: flex; flex-direction: column; gap: 28px; }
.sector-group-head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 12px; }
.sector-group-head .pillar-n {
  font-family: var(--font-display); font-size: 11px; font-weight: 700;
  letter-spacing: 1.4px; text-transform: uppercase; color: var(--blue-text, var(--blue));
}
.sector-group-head .pillar-name { font-family: var(--font-display); font-size: 14px; font-weight: 600; color: var(--navy); }
.sector-group-head .rule { flex: 1; height: 1px; background: var(--hairline); }
.sector-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
@media (max-width: 900px) { .sector-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .sector-grid { grid-template-columns: 1fr; } }
.sector-chip {
  padding: 14px; border: 1px solid var(--hairline); border-radius: 10px; background: var(--white);
  display: flex; align-items: center; gap: 12px; text-decoration: none;
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.sector-chip:hover, .sector-chip:focus-visible {
  transform: translateY(-2px); box-shadow: 0 10px 24px rgba(14, 134, 212, .14); border-color: var(--blue);
}
.sector-chip .icon-wrap {
  flex: 0 0 auto; width: 38px; height: 38px; border-radius: 9px; background: var(--blue-tint);
  display: flex; align-items: center; justify-content: center; color: var(--blue-text, var(--blue));
}
.sector-chip .sector-n { display: block; font-family: var(--font-display); font-size: 10.5px; font-weight: 700; color: var(--lgray); }
.sector-chip .sector-name { font-family: var(--font-display); font-size: 13px; font-weight: 500; color: var(--navy); line-height: 1.3; }

/* ---- Services accordion: fix the sub/title collision, restyle the row ----
   .accordion-trigger .t .sub and .title were both plain inline <span>s,
   so "margin-top: 3px" on .sub was a no-op (inline elements ignore
   vertical margin) and the long italic breadcrumb ran straight into the
   bold title with no line break. Markup was updated to drop that
   breadcrumb (it duplicated the number badge and the title text) and
   replace it with just the pillar name, as a small pill -- reusing
   .pillar-tag's existing look rather than inventing a new component. */
.accordion-trigger .t { display: flex; flex-direction: column; gap: 4px; }
.accordion-trigger .badge {
  flex: 0 0 auto; width: 34px; height: 34px; border-radius: 9px; background: var(--blue-tint);
  color: var(--blue-text, var(--blue)); font-weight: 700; font-size: 13px; font-family: var(--font-display);
  display: flex; align-items: center; justify-content: center;
}
.accordion-trigger .pill {
  display: inline-block; width: fit-content; font-family: var(--font-display); font-weight: 600;
  font-size: 11px; letter-spacing: .3px; color: var(--blue-text, var(--blue)); background: var(--blue-tint);
  padding: 3px 10px; border-radius: 12px;
}
.accordion-item:hover { border-color: var(--blue); box-shadow: 0 6px 18px rgba(14, 134, 212, .1); }
/* ---- Round 7: sector thumbnail photos on the Services accordion ----
   One curated stock photo per sector, visible on the collapsed row
   (per your call), sitting between the number badge and the title/pill.
   Fixed 56x56, rounded, object-fit: cover so varied source photos crop
   to a consistent square without distortion. Hidden below 480px so the
   row doesn't get cramped on small phones -- badge, pill and title
   still carry full sector identity there. */
.accordion-trigger .thumb {
  flex: 0 0 auto;
  width: 56px;
  height: 56px;
  border-radius: 10px;
  overflow: hidden;
  background: var(--blue-tint);
}
.accordion-trigger .thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
@media (max-width: 480px) {
  .accordion-trigger .thumb { display: none; }
}
/* ---- Round 9: Who We Serve CTAs, Jopetnah-difference comparison,
   floating quick-contact. All reuse existing tokens, so dark theme
   is automatic. ---- */

/* 1. Who We Serve: per-segment CTA link */
.pillar-link {
  display: inline-flex;
  align-items: center;
  margin-top: 12px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 13.5px;
  color: var(--blue-text, var(--blue));
  text-decoration: none;
}
.pillar-link:hover { text-decoration: underline; }
.pillar-link span { margin-left: 4px; transition: transform .15s ease; }
.pillar-link:hover span { transform: translateX(3px); }

/* 2. Why It Matters, Revisited: comparison table */
.compare-table {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--hairline);
  border-radius: 12px;
  overflow: hidden;
  background: var(--white);
}
.compare-row {
  display: grid;
  grid-template-columns: 120px 1fr 1fr;
  border-top: 1px solid var(--hairline);
}
.compare-row:first-child { border-top: none; }
.compare-cell { padding: 16px 18px; font-size: 14px; }
.compare-label {
  display: flex;
  align-items: center;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--lgray);
  background: var(--paper);
}
.compare-head { background: none; }
.compare-head .compare-typical,
.compare-head .compare-jil {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 13px;
  color: var(--navy);
}
.compare-typical { color: var(--gray); }
.compare-jil { color: var(--navy); font-weight: 500; background: var(--blue-tint); }
.mark { display: inline-block; width: 18px; font-weight: 700; }
.mark-x { color: var(--red); }
.mark-check { color: var(--blue-text, var(--blue)); }
@media (max-width: 720px) {
  .compare-row { grid-template-columns: 1fr; }
  .compare-label { display: none; }
  .compare-row:not(.compare-head) .compare-typical { border-bottom: 1px dashed var(--hairline); }
}

/* 3. Floating quick-contact */
.quick-contact {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 60;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
}
.qc-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  color: #fff;
  border-radius: 999px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 13px;
  box-shadow: 0 10px 24px rgba(14, 134, 212, .3);
  transition: transform .15s ease, box-shadow .15s ease;
}
.qc-btn:hover, .qc-btn:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 14px 30px rgba(14, 134, 212, .4);
}
.qc-main { padding: 13px 20px; background: var(--blue); }
.qc-call { width: 46px; height: 46px; justify-content: center; background: var(--navy); }
.qc-whatsapp { width: 46px; height: 46px; justify-content: center; background: #25D366; }
@media (max-width: 600px) {
  .qc-main span { display: none; }
  .qc-main { width: 46px; height: 46px; justify-content: center; padding: 0; border-radius: 50%; }
}
/* ---- Round 10/11: MD leadership feature (homepage teaser + full bio
   on about.html). Round 11 swapped the initials monogram for the real
   headshot -- .exec-avatar now crops an <img> into a circle instead of
   centering text. ---- */

.exec-feature {
  display: flex;
  gap: 28px;
  align-items: flex-start;
}
.exec-avatar {
  flex: 0 0 auto;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: var(--blue-tint);
  overflow: hidden;
}
.exec-avatar img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.exec-avatar-lg {
  width: 140px;
  height: 140px;
}
.exec-body { flex: 1; min-width: 0; }
.exec-body h3 {
  margin: 0 0 4px;
  font-size: 19px;
}
.exec-body .exec-title {
  color: var(--blue-text, var(--blue));
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 13.5px;
  margin-bottom: 14px;
}
.exec-body p { color: var(--gray); margin: 0 0 12px; }
.exec-body h3 { color: var(--navy); }

@media (max-width: 560px) {
  .exec-feature { flex-direction: column; align-items: center; text-align: center; }
  .exec-body .pillar-link { justify-content: center; }
}

.leadership-priorities {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  margin-top: 4px;
}
.leadership-priorities .priority {
  padding: 16px;
  border: 1px solid var(--hairline);
  border-radius: 10px;
  background: var(--white);
}
.leadership-priorities .priority h4 {
  margin: 0 0 6px;
  font-size: 14px;
  color: var(--navy);
  font-family: var(--font-display);
}
.leadership-priorities .priority p {
  margin: 0;
  font-size: 13.5px;
  color: var(--gray);
}
@media (max-width: 700px) {
  .leadership-priorities { grid-template-columns: 1fr; }
}