/*
Theme Name: JCL 2026
Theme URI: https://www.jobconnect.co.ug/
Description: JCL Manpower & Logistics redesign. Child theme of kipya: keeps all jobs, CV, hire, team, partner and download features.
Author: JCL Manpower & Logistics
Template: kipya
Version: 1.8.0
Text Domain: jcl2026
*/
/* JCL Manpower & Logistics — website redesign mockup */
:root {
  /* Brand */
  --green: #00815d;
  --green-600: #006b4d;
  --green-800: #0b3d2e;
  --green-900: #072a20;
  --green-50: #e8f5ef;
  /* Accent palette (no gold) */
  --blue: #1d5fa8;   --blue-50: #e9f1fb;
  --sky: #1f9bd1;    --sky-50: #e6f5fc;
  --orange: #ee6c1b; --orange-50: #fff0e6;
  --coral: #e0573b;  --coral-50: #fdece7;
  --teal: #0f9d8a;   --teal-50: #e3f6f2;
  --violet: #6a4fc1; --violet-50: #efebfb;
  --mint: #6fe0b5;
  /* Neutrals */
  --ink: #13201b;
  --ink-2: #47554e;
  --line: #e1e8e4;
  --bg: #ffffff;
  --bg-soft: #f4f8f6;
  --radius: 16px;
  --shadow: 0 1px 2px rgba(7, 42, 32, .06), 0 10px 30px rgba(7, 42, 32, .08);
  --serif: "Fraunces", Georgia, serif;
  --sans: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --wrap: 1200px;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 400 17px/1.65 var(--sans); overflow-x: clip; }
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
h1, h2, h3 { font-family: var(--serif); font-weight: 600; line-height: 1.12; letter-spacing: -.02em; margin: 0; }
h4 { margin: 0; font-size: 1.05rem; line-height: 1.3; }
p { margin: 0; }
button { font: inherit; }

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 24px; }
.section { padding: 104px 0; }
.section.soft { background: var(--bg-soft); }
.section.soft-blue { background: linear-gradient(180deg, var(--blue-50), #fff); }
.section.soft-warm { background: linear-gradient(180deg, var(--orange-50), #fff); }
.section.dark { background: radial-gradient(1200px 500px at 85% -10%, rgba(31,155,209,.22), transparent 60%), radial-gradient(900px 500px at -10% 110%, rgba(106,79,193,.2), transparent 60%), var(--green-900); color: #e4efe9; }

.eyebrow { display: inline-flex; align-items: center; gap: 10px; font: 700 12.5px/1 var(--sans); letter-spacing: .18em; text-transform: uppercase; color: var(--green); }
.eyebrow::before { content: ""; width: 28px; height: 3px; border-radius: 3px; background: linear-gradient(90deg, var(--green), var(--sky)); }
.dark .eyebrow { color: var(--mint); }
.section-head { max-width: 720px; margin-bottom: 52px; }
.section-head h2 { font-size: clamp(30px, 4vw, 46px); margin-top: 16px; }
.section-head p { margin-top: 16px; color: var(--ink-2); font-size: 18px; }
.dark .section-head p { color: #b9cfc5; }
.section-head.with-nav { max-width: none; display: flex; justify-content: space-between; align-items: flex-end; gap: 32px; }
.section-head.with-nav > div:first-child { max-width: 720px; }

/* Buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 50px; padding: 0 26px; border-radius: 999px; font: 700 15.5px/1 var(--sans); border: 1.5px solid transparent; cursor: pointer; transition: background .2s, color .2s, border-color .2s, transform .2s, box-shadow .2s; white-space: nowrap; }
.btn:hover { transform: translateY(-2px); }
.btn svg { width: 18px; height: 18px; flex: none; }
.btn-primary { background: linear-gradient(135deg, var(--green), var(--teal)); color: #fff; box-shadow: 0 8px 20px rgba(0,129,93,.25); }
.btn-primary:hover { box-shadow: 0 12px 26px rgba(0,129,93,.32); }
.btn-ghost { border-color: var(--line); color: var(--ink); background: #fff; }
.btn-ghost:hover { border-color: var(--blue); color: var(--blue); }
.btn-soft { background: var(--blue-50); color: var(--blue); }
.btn-light { background: #fff; color: var(--green-800); }
.btn-outline-light { border-color: rgba(255,255,255,.45); color: #fff; }
.btn-outline-light:hover { border-color: #fff; background: rgba(255,255,255,.08); }
.shine { position: relative; overflow: hidden; }
.shine::after { content: ""; position: absolute; top: 0; bottom: 0; left: -60%; width: 40%; background: linear-gradient(100deg, transparent, rgba(255,255,255,.4), transparent); transform: skewX(-20deg); animation: shine 4.5s ease-in-out infinite; }
@keyframes shine { 0%, 65% { left: -60%; } 100% { left: 130%; } }

/* Top bar */
.topbar { background: linear-gradient(90deg, var(--green-900), #0b3550 60%, var(--green-900)); color: #b9cfc5; font-size: 13.5px; }
.topbar .wrap { display: flex; justify-content: space-between; align-items: center; height: 40px; gap: 24px; }
.topbar span { display: inline-flex; align-items: center; gap: 8px; }
.topbar .links { display: flex; gap: 28px; }
.topbar a:hover { color: #fff; }
.topbar svg { width: 14px; height: 14px; color: var(--mint); }

/* Header */
.header { position: sticky; top: 0; z-index: 50; background: rgba(255,255,255,.96); backdrop-filter: saturate(1.4) blur(10px); border-bottom: 1px solid var(--line); }
.header .wrap { display: flex; align-items: center; justify-content: space-between; height: 80px; gap: 28px; }
.brand img { height: 52px; width: auto; }
.nav { display: flex; align-items: center; gap: 30px; font-weight: 600; font-size: 15.5px; }
.nav a { color: var(--ink-2); position: relative; padding: 6px 0; }
.nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 2px; border-radius: 2px; background: linear-gradient(90deg, var(--green), var(--sky)); transform: scaleX(0); transition: transform .25s; }
.nav a:hover, .nav a.active { color: var(--green); }
.nav a:hover::after, .nav a.active::after { transform: scaleX(1); }
.header-cta { display: flex; gap: 10px; }
.header-cta .btn { min-height: 44px; padding: 0 20px; font-size: 14.5px; }
.menu-btn { display: none; width: 46px; height: 46px; border-radius: 12px; border: 1px solid var(--line); background: #fff; color: var(--ink); align-items: center; justify-content: center; cursor: pointer; }
.menu-btn svg { width: 22px; height: 22px; }
.close-btn { display: inline-flex; }

/* Mobile drawer */
.drawer { position: fixed; inset: 0; z-index: 100; pointer-events: none; }
.drawer .scrim, .modal .scrim { position: absolute; inset: 0; background: rgba(7,42,32,.5); opacity: 0; transition: opacity .25s; }
.drawer .panel { position: absolute; top: 0; right: 0; bottom: 0; width: min(88vw, 380px); background: #fff; transform: translateX(100%); transition: transform .3s cubic-bezier(.2,.8,.2,1); display: flex; flex-direction: column; padding: 18px 22px 26px; overflow-y: auto; }
.drawer.open { pointer-events: auto; }
.drawer.open .scrim { opacity: 1; }
.drawer.open .panel { transform: none; }
.drawer-head { display: flex; justify-content: space-between; align-items: center; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.drawer-head img { height: 40px; }
.drawer nav { display: flex; flex-direction: column; padding: 8px 0 16px; flex: 1; }
.drawer nav a { display: flex; justify-content: space-between; align-items: center; min-height: 56px; font: 600 18px/1 var(--sans); border-bottom: 1px solid var(--line); color: var(--ink); }
.drawer nav a.active { color: var(--green); }
.drawer nav a svg { width: 18px; height: 18px; color: #9aa7a0; }
.drawer .actions { display: grid; gap: 10px; }
.drawer .contact-mini { margin-top: 18px; font-size: 14px; color: var(--ink-2); display: grid; gap: 6px; }

/* Hero */
.hero { position: relative; padding: 84px 0 96px; background: linear-gradient(180deg, #f2f8f5, #fff); overflow: hidden; }
.hero::before, .hero::after { content: ""; position: absolute; border-radius: 50%; pointer-events: none; }
.hero::before { width: 620px; height: 620px; right: -160px; top: -220px; background: radial-gradient(circle, rgba(31,155,209,.16), transparent 65%); animation: drift 18s ease-in-out infinite alternate; }
.hero::after { width: 520px; height: 520px; left: -200px; bottom: -260px; background: radial-gradient(circle, rgba(238,108,27,.12), transparent 65%); animation: drift 22s ease-in-out infinite alternate-reverse; }
@keyframes drift { to { transform: translate(-90px, 70px) scale(1.12); } }
.hero .wrap { position: relative; z-index: 1; display: grid; grid-template-columns: 1.05fr .95fr; gap: 64px; align-items: center; }
.hero h1 { font-size: clamp(38px, 5.4vw, 64px); margin-top: 22px; color: var(--green-900); }
.hero h1 .rotator { display: grid; justify-items: start; }
.hero h1 .rotator em { grid-area: 1 / 1; font-style: normal; background: linear-gradient(90deg, var(--green), var(--sky)); -webkit-background-clip: text; background-clip: text; color: transparent; opacity: 0; transform: translateY(.55em); filter: blur(4px); transition: opacity .6s ease, transform .6s cubic-bezier(.2,.8,.2,1), filter .6s ease; padding-bottom: .08em; }
.hero h1 .rotator em:nth-child(2) { background-image: linear-gradient(90deg, var(--blue), var(--sky)); }
.hero h1 .rotator em:nth-child(3) { background-image: linear-gradient(90deg, var(--coral), var(--orange)); }
.hero h1 .rotator em:nth-child(4) { background-image: linear-gradient(90deg, var(--violet), var(--blue)); }
.hero h1 .rotator em.on { opacity: 1; transform: none; filter: none; }
.hero h1 .rotator em.out { opacity: 0; transform: translateY(-.55em); filter: blur(4px); }
.hero .lead { margin-top: 22px; font-size: 19px; color: var(--ink-2); max-width: 560px; }
.hero .ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; }
.hero .trust { display: flex; align-items: center; gap: 14px; margin-top: 38px; font-size: 14.5px; color: var(--ink-2); }
.hero .trust strong { color: var(--ink); }
.trust-ic { width: 42px; height: 42px; border-radius: 50%; background: var(--green-50); color: var(--green); display: grid; place-items: center; flex: none; }
.trust-ic svg { width: 22px; height: 22px; }
@keyframes rise { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }
.hero .eyebrow, .hero h1, .hero .lead, .hero .ctas, .hero .trust { animation: rise .9s cubic-bezier(.2,.8,.2,1) both; }
.hero h1 { animation-delay: .12s; } .hero .lead { animation-delay: .3s; } .hero .ctas { animation-delay: .45s; } .hero .trust { animation-delay: .6s; }
.hero-media { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.hero-media img { width: 100%; height: 100%; object-fit: cover; border-radius: var(--radius); box-shadow: var(--shadow); }
.hero-media .tall { grid-row: span 2; aspect-ratio: 3 / 4.4; }
.hero-media .sq { aspect-ratio: 1 / 1; }
@keyframes floaty { from { transform: translateY(0); } to { transform: translateY(-10px); } }
.hero-badge { position: absolute; left: -28px; bottom: 32px; background: #fff; border-radius: var(--radius); box-shadow: var(--shadow); padding: 16px 22px; display: flex; gap: 14px; align-items: center; border-left: 4px solid var(--orange); }
.hero-badge b { font: 600 34px/1 var(--serif); color: var(--green); font-variant-numeric: tabular-nums; }
.hero-badge small { display: block; font-size: 13px; color: var(--ink-2); line-height: 1.35; }

/* Stats */
.stats { background: linear-gradient(110deg, var(--green-800), #0c4a52 55%, #123a63); color: #fff; }
.stats .wrap { display: grid; grid-template-columns: repeat(6, 1fr); }
.stat { padding: 40px 20px; border-left: 1px solid rgba(255,255,255,.1); position: relative; }
.stat::before { content: ""; position: absolute; left: 20px; top: 0; width: 34px; height: 4px; border-radius: 0 0 4px 4px; background: var(--c); }
.stat:first-child { border-left: 0; padding-left: 0; }
.stat:first-child::before { left: 0; }
.stat.c1 { --c: var(--mint); } .stat.c2 { --c: var(--sky); } .stat.c3 { --c: var(--orange); }
.stat.c4 { --c: var(--coral); } .stat.c5 { --c: #a58cf0; } .stat.c6 { --c: #ff8fb1; }
.stat b { display: block; font: 600 40px/1 var(--serif); font-variant-numeric: tabular-nums; }
.stat span { display: block; margin-top: 10px; font-size: 14px; color: #c3d6ce; line-height: 1.4; }

/* Logo strip */
.logo-strip { padding: 52px 0; border-bottom: 1px solid var(--line); }
.logo-strip .label { text-align: center; font-size: 14px; color: var(--ink-2); margin-bottom: 26px; }
.marquee { overflow: hidden; mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.marquee .track { display: flex; gap: 56px; width: max-content; animation: scroll 55s linear infinite; align-items: center; }
.marquee:hover .track { animation-play-state: paused; }
@keyframes scroll { to { transform: translateX(-50%); } }
.mq-item { display: flex; align-items: center; flex: none; transition: transform .2s; }
.mq-item img { height: 54px; width: auto; max-width: 150px; object-fit: contain; }
a.mq-item:hover { transform: scale(1.08); }
img.round { border-radius: 50%; }

/* About */
.about { display: grid; grid-template-columns: .9fr 1.1fr; gap: 72px; align-items: center; }
.about-media { position: relative; }
.about-media img { border-radius: var(--radius); width: 100%; aspect-ratio: 4/3.4; object-fit: cover; box-shadow: var(--shadow); }
.about-media .since { position: absolute; right: -20px; top: 28px; background: linear-gradient(135deg, var(--orange), var(--coral)); color: #fff; border-radius: var(--radius); padding: 20px 24px; box-shadow: var(--shadow); }
.about-media .since b { display: block; font: 600 36px/1 var(--serif); }
.about-media .since span { font-size: 13px; opacity: .92; }
.about-text h2 { font-size: clamp(30px, 4vw, 46px); margin-top: 16px; }
.about-text p { margin-top: 18px; color: var(--ink-2); }
.vm { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 32px; }
.vm div { padding: 22px; border-radius: var(--radius); }
.vm .vm-m { background: var(--green-50); }
.vm .vm-v { background: var(--blue-50); }
.vm h4 { font: 700 12.5px/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; }
.vm .vm-m h4 { color: var(--green); } .vm .vm-v h4 { color: var(--blue); }
.vm p { margin-top: 10px; font-size: 15.5px; line-height: 1.55; color: var(--ink); }

.values { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-top: 80px; }
.value { padding: 28px; border-radius: var(--radius); background: #fff; border: 1px solid var(--line); border-top: 4px solid var(--c); transition: transform .3s, box-shadow .3s; }
.value:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.value.v1 { --c: var(--green); --t: var(--green-50); } .value.v2 { --c: var(--blue); --t: var(--blue-50); }
.value.v3 { --c: var(--orange); --t: var(--orange-50); } .value.v4 { --c: var(--coral); --t: var(--coral-50); }
.value .ic { width: 50px; height: 50px; border-radius: 14px; background: var(--t); color: var(--c); display: grid; place-items: center; }
.value .ic svg { width: 24px; height: 24px; }
.value h4 { margin-top: 18px; font-size: 18px; }
.value p { margin-top: 8px; font-size: 15px; color: var(--ink-2); line-height: 1.55; }

/* Carousels */
.carousel { display: flex; gap: 22px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none; padding: 6px 2px 14px; }
.carousel::-webkit-scrollbar { display: none; }
.carousel > * { scroll-snap-align: start; flex: 0 0 calc((100% - 44px) / 3); }
.car-nav { display: flex; gap: 10px; flex: none; }
.car-nav button { width: 50px; height: 50px; border-radius: 50%; border: 1px solid var(--line); background: #fff; color: var(--ink); display: grid; place-items: center; cursor: pointer; transition: background .2s, color .2s, border-color .2s; }
.car-nav button:hover { background: var(--green); border-color: var(--green); color: #fff; }
.car-nav svg { width: 20px; height: 20px; }
.dots { display: flex; justify-content: center; gap: 8px; margin-top: 22px; }
.dots button { width: 9px; height: 9px; border-radius: 99px; border: 0; padding: 0; background: #c9d4ce; cursor: pointer; transition: width .3s, background .3s; }
.dots button.on { width: 28px; background: linear-gradient(90deg, var(--green), var(--sky)); }

/* Pillars */
.pillar { background: #fff; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line); display: flex; flex-direction: column; transition: box-shadow .3s, transform .3s; }
.pillar:hover { box-shadow: var(--shadow); transform: translateY(-4px); }
.pillar.t-green { --c: var(--green); --t: var(--green-50); } .pillar.t-blue { --c: var(--blue); --t: var(--blue-50); }
.pillar.t-orange { --c: var(--orange); --t: var(--orange-50); } .pillar.t-coral { --c: var(--violet); --t: var(--violet-50); }
.pillar img { aspect-ratio: 16/10; object-fit: cover; width: 100%; transition: transform .8s cubic-bezier(.2,.8,.2,1); }
.pillar:hover img { transform: scale(1.05); }
.pillar .body { padding: 26px; display: flex; flex-direction: column; flex: 1; border-top: 4px solid var(--c); position: relative; z-index: 1; background: #fff; }
.pillar .num { align-self: flex-start; font: 700 11.5px/1 var(--sans); color: var(--c); background: var(--t); padding: 6px 10px; border-radius: 99px; letter-spacing: .12em; }
.pillar h3 { font-size: 23px; margin-top: 14px; }
.pillar p { font-size: 15px; color: var(--ink-2); margin-top: 10px; line-height: 1.55; }
.pillar ul { list-style: none; padding: 0; margin: 18px 0 0; display: grid; gap: 8px; font-size: 14.5px; }
.pillar li { display: flex; gap: 10px; align-items: flex-start; }
.pillar li::before { content: ""; flex: none; width: 7px; height: 7px; margin-top: 8px; border-radius: 50%; background: var(--c); }

/* Phases */
.phases { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.phase { border: 1px solid rgba(255,255,255,.12); border-radius: var(--radius); padding: 32px; background: rgba(255,255,255,.04); border-top: 4px solid var(--c); }
.phase.ph1 { --c: #52c2e3; } .phase.ph2 { --c: #ff9a5c; } .phase.ph3 { --c: var(--mint); }
.phase .tag { font: 700 12px/1 var(--sans); letter-spacing: .16em; color: var(--c); }
.phase h3 { color: #fff; font-size: 26px; margin-top: 12px; }
.phase > p { margin-top: 10px; color: #b9cfc5; font-size: 15.5px; }
.phase ol { list-style: none; margin: 24px 0 0; padding: 0; display: grid; gap: 4px; }
.phase li { display: flex; gap: 14px; align-items: baseline; padding: 12px 0; border-top: 1px solid rgba(255,255,255,.1); }
.phase li b { font: 600 15px/1 var(--serif); color: var(--c); min-width: 22px; }
.phase li span { color: #e4efe9; font-size: 15.5px; line-height: 1.45; }
.phase .outcome { margin-top: 20px; font-size: 14px; color: var(--c); }

/* Safety */
.safety { display: grid; grid-template-columns: .85fr 1.15fr; gap: 64px; align-items: start; }
.safety-media img { border-radius: var(--radius); width: 100%; aspect-ratio: 3/3.6; object-fit: cover; box-shadow: var(--shadow); }
.safety-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 34px; }
.safety-grid div { padding: 18px 20px; border-radius: 14px; background: var(--t); border-left: 4px solid var(--c); }
.safety-grid .s1 { --c: var(--green); --t: var(--green-50); } .safety-grid .s2 { --c: var(--blue); --t: var(--blue-50); }
.safety-grid .s3 { --c: var(--orange); --t: var(--orange-50); } .safety-grid .s4 { --c: var(--coral); --t: var(--coral-50); }
.safety-grid .s5 { --c: var(--teal); --t: var(--teal-50); } .safety-grid .s6 { --c: var(--violet); --t: var(--violet-50); }
.safety-grid h4 { font-size: 16.5px; color: var(--c); }
.safety-grid p { margin-top: 6px; font-size: 14.5px; color: var(--ink-2); line-height: 1.55; }

/* Case study + animated chart */
.case { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; background: #fff; border: 1px solid var(--line); border-radius: 22px; padding: 56px; box-shadow: var(--shadow); }
.case h2 { font-size: clamp(28px, 3.4vw, 40px); margin-top: 16px; }
.case p { margin-top: 16px; color: var(--ink-2); }
.case .kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 30px; }
.case .kpis div { border-radius: 12px; padding: 18px; background: var(--t); }
.case .kpis .k1 { --c: var(--coral); --t: var(--coral-50); } .case .kpis .k2 { --c: var(--green); --t: var(--green-50); } .case .kpis .k3 { --c: var(--blue); --t: var(--blue-50); }
.case .kpis b { display: block; font: 600 30px/1 var(--serif); color: var(--c); font-variant-numeric: tabular-nums; }
.case .kpis span { display: block; font-size: 13px; margin-top: 8px; color: var(--ink-2); line-height: 1.35; }
.chart { position: relative; }
.chart-badge { position: absolute; right: 0; top: -6px; z-index: 2; display: inline-flex; align-items: center; gap: 8px; background: linear-gradient(135deg, var(--green), var(--teal)); color: #fff; font-weight: 800; font-size: 14px; padding: 8px 14px; border-radius: 99px; box-shadow: 0 8px 20px rgba(0,129,93,.3); transform: scale(0); transition: transform .5s cubic-bezier(.3,1.6,.5,1) 1.3s; }
.chart-badge svg { width: 18px; height: 18px; }
.chart.go .chart-badge { transform: scale(1); }
.bars { position: relative; display: flex; align-items: flex-end; gap: 16px; height: 320px; padding-top: 30px; border-bottom: 2px solid var(--line); }
.bars .bar { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; gap: 8px; }
.bars .bar i { display: block; width: 100%; height: 0; border-radius: 10px 10px 0 0; background: linear-gradient(180deg, var(--c1), var(--c2)); transition: height 1.1s cubic-bezier(.2,.8,.2,1); transition-delay: calc(var(--i) * .15s); box-shadow: inset 0 1px 0 rgba(255,255,255,.35); }
.bars .bar b { font-size: 14px; font-weight: 800; color: var(--c2); opacity: 0; transform: translateY(6px); transition: opacity .4s, transform .4s; transition-delay: calc(var(--i) * .15s + .6s); font-variant-numeric: tabular-nums; }
.bars .bar:nth-child(1) { --c1: #f07a63; --c2: var(--coral); }
.bars .bar:nth-child(2) { --c1: #ff9a5c; --c2: var(--orange); }
.bars .bar:nth-child(3) { --c1: #9b84e6; --c2: var(--violet); }
.bars .bar:nth-child(4) { --c1: #52c2e3; --c2: var(--sky); }
.bars .bar:nth-child(5) { --c1: #2fc28f; --c2: var(--green); }
.chart.go .bar i { height: var(--h); }
.chart.go .bar b { opacity: 1; transform: none; }
.trend { position: absolute; left: 0; right: 0; top: 30px; bottom: 0; width: 100%; height: calc(100% - 30px); pointer-events: none; overflow: visible; }
.trend polyline { fill: none; stroke: var(--ink); stroke-width: 2; stroke-dasharray: 4 3; vector-effect: non-scaling-stroke; opacity: 0; transition: opacity .6s 1.1s; }
.chart.go .trend polyline { opacity: .45; }
.bars-x { display: flex; gap: 16px; margin-top: 10px; }
.bars-x span { flex: 1; text-align: center; font-size: 13px; font-weight: 600; color: var(--ink-2); }
.bars-caption { margin-top: 14px; font-size: 13px; color: var(--ink-2); }

/* Industries */
.industries { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.industry { position: relative; border-radius: var(--radius); overflow: hidden; aspect-ratio: 16/10; }
.industry img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s; }
.industry:hover img { transform: scale(1.06); }
.industry::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 35%, var(--o) 100%); opacity: .92; }
.industry.i1 { --o: rgba(0,90,65,.95); } .industry.i2 { --o: rgba(20,70,140,.95); } .industry.i3 { --o: rgba(170,70,15,.95); }
.industry.i4 { --o: rgba(15,100,150,.95); } .industry.i5 { --o: rgba(170,55,35,.95); } .industry.i6 { --o: rgba(80,55,160,.95); }
.industry span { position: absolute; left: 22px; right: 22px; bottom: 18px; z-index: 1; color: #fff; font-weight: 700; font-size: 17px; }

/* CTA */
.cta-band { background: linear-gradient(120deg, var(--green) 0%, var(--teal) 45%, var(--blue) 100%); color: #fff; border-radius: 24px; padding: 56px; display: grid; grid-template-columns: 1.1fr 1fr; gap: 40px; align-items: center; position: relative; overflow: hidden; }
.cta-band::after { content: ""; position: absolute; right: -80px; top: -80px; width: 320px; height: 320px; border-radius: 50%; border: 60px solid rgba(255,255,255,.07); animation: drift 16s ease-in-out infinite alternate; }
.cta-band h2 { font-size: clamp(28px, 3.6vw, 42px); }
.cta-band p { margin-top: 12px; color: #e0f1ec; }
.cta-band .ctas { display: flex; gap: 12px; flex-wrap: wrap; justify-content: flex-end; position: relative; z-index: 1; }

/* Footer */
.footer { background: var(--green-900); color: #b9cfc5; padding: 80px 0 32px; font-size: 15px; position: relative; }
.footer::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: linear-gradient(90deg, var(--green), var(--sky), var(--violet), var(--coral), var(--orange)); }
.footer .cols { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: 48px; }
.footer img { height: 58px; width: auto; }
.footer p { margin-top: 18px; max-width: 320px; line-height: 1.6; }
.footer h5 { margin: 0 0 18px; color: #fff; font: 700 13px/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; }
.footer ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.footer a:hover { color: #fff; }
.footer .contact li { display: flex; gap: 12px; align-items: flex-start; }
.footer .contact svg { width: 18px; height: 18px; flex: none; margin-top: 3px; color: var(--mint); }
.footer .social { display: flex; gap: 10px; margin-top: 22px; }
.footer .social a { width: 40px; height: 40px; border-radius: 50%; border: 1px solid rgba(255,255,255,.15); display: grid; place-items: center; }
.footer .social a:hover { background: rgba(255,255,255,.08); }
.footer .social svg { width: 16px; height: 16px; }
.footer .base { margin-top: 56px; padding-top: 24px; border-top: 1px solid rgba(255,255,255,.1); display: flex; justify-content: space-between; gap: 16px; font-size: 13.5px; flex-wrap: wrap; }

/* WhatsApp + mobile action bar */
.wa { position: fixed; right: 20px; bottom: 20px; z-index: 40; width: 56px; height: 56px; border-radius: 50%; background: #25d366; color: #fff; display: grid; place-items: center; box-shadow: 0 6px 18px rgba(0,0,0,.18); }
.wa svg { width: 28px; height: 28px; }
.mbar, .swipe-hint { display: none; }

/* Inner page hero */
.page-hero { background: var(--green-900); color: #fff; padding: 100px 0 92px; position: relative; overflow: hidden; }
.page-hero::before { content: ""; position: absolute; inset: 0; background: var(--hero-img) center/cover; animation: kenburns 24s ease-in-out infinite alternate; }
.page-hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, rgba(7,42,32,.96) 0%, rgba(7,42,32,.82) 45%, rgba(18,58,99,.55) 100%); }
@keyframes kenburns { from { transform: scale(1); } to { transform: scale(1.12) translateX(-2%); } }
.page-hero .wrap { position: relative; z-index: 1; }
.page-hero .crumbs { font-size: 14px; color: #9fbfb2; }
.page-hero .crumbs a:hover { color: #fff; }
.page-hero h1 { font-size: clamp(36px, 5vw, 62px); margin-top: 22px; max-width: 820px; animation: rise .9s .1s cubic-bezier(.2,.8,.2,1) both; }
.page-hero p { margin-top: 20px; font-size: 19px; color: #d0e2da; max-width: 640px; animation: rise .9s .25s cubic-bezier(.2,.8,.2,1) both; }
.page-hero .eyebrow { color: var(--mint); margin-top: 28px; }
.page-hero .ctas { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 32px; animation: rise .9s .4s cubic-bezier(.2,.8,.2,1) both; }

/* Clients page */
.filters { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 34px; }
.filter { min-height: 42px; padding: 0 18px; border-radius: 999px; border: 1px solid var(--line); background: #fff; font: 600 14.5px/1 var(--sans); color: var(--ink-2); cursor: pointer; transition: all .2s; }
.filter:hover { border-color: var(--green); color: var(--green); }
.filter[aria-pressed="true"] { background: linear-gradient(135deg, var(--green), var(--teal)); border-color: transparent; color: #fff; }
.logo-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 16px; }
.client { position: relative; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); aspect-ratio: 1/1; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 20px; gap: 14px; overflow: hidden; transition: box-shadow .3s, transform .3s, border-color .3s; }
.client::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px; background: var(--c); transform: scaleX(0); transform-origin: left; transition: transform .35s; }
.client:hover { box-shadow: var(--shadow); transform: translateY(-4px); border-color: transparent; }
.client:hover::before { transform: scaleX(1); }
.client img { max-height: 64px; max-width: 82%; object-fit: contain; transition: transform .35s cubic-bezier(.2,.8,.2,1); }
.client:hover img { transform: scale(1.08); }
.client small { font-size: 11.5px; font-weight: 700; color: var(--c); letter-spacing: .03em; text-align: center; line-height: 1.3; }
.client.s-manufacturing { --c: var(--green); } .client.s-fmcg { --c: var(--coral); } .client.s-pharma { --c: var(--blue); }
.client.s-agri { --c: var(--orange); } .client.s-logistics { --c: var(--sky); } .client.s-telecom { --c: var(--violet); } .client.s-finance { --c: var(--teal); }
.client.hide { display: none; }

.why { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.why div { padding: 32px; border-radius: var(--radius); background: #fff; border: 1px solid var(--line); border-top: 4px solid var(--c); }
.why .w1 { --c: var(--green); } .why .w2 { --c: var(--orange); } .why .w3 { --c: var(--blue); }
.why b { font: 600 48px/1 var(--serif); color: var(--c); }
.why h4 { margin-top: 14px; font-size: 18px; }
.why p { margin-top: 8px; color: var(--ink-2); font-size: 15px; }

.quote { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 32px; display: flex; flex-direction: column; border-top: 4px solid var(--c); min-height: 260px; }
.quote.q1 { --c: var(--green); } .quote.q2 { --c: var(--blue); } .quote.q3 { --c: var(--orange); } .quote.q4 { --c: var(--coral); } .quote.q5 { --c: var(--violet); }
.quote .mark { font: 600 64px/0.6 var(--serif); color: var(--c); height: 30px; }
.quote p { margin-top: 14px; font-size: 17px; line-height: 1.6; flex: 1; font-family: var(--serif); font-weight: 500; }
.placeholder-tag { display: inline-block; margin-top: 18px; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--coral); background: var(--coral-50); padding: 4px 8px; border-radius: 6px; width: fit-content; }

/* Hire modal */
.modal { position: fixed; inset: 0; z-index: 120; display: grid; place-items: center; padding: 20px; pointer-events: none; }
.modal.open { pointer-events: auto; }
.modal.open .scrim { opacity: 1; }
.modal .sheet { position: relative; width: min(640px, 100%); max-height: calc(100vh - 40px); overflow-y: auto; background: #fff; border-radius: 22px; padding: 36px; box-shadow: 0 30px 80px rgba(0,0,0,.25); opacity: 0; transform: translateY(24px) scale(.98); transition: opacity .3s, transform .3s cubic-bezier(.2,.8,.2,1); border-top: 6px solid var(--green); }
.modal.open .sheet { opacity: 1; transform: none; }
.modal .close-btn { position: absolute; right: 18px; top: 18px; }
.modal h3 { font-size: 30px; margin-top: 12px; }
.modal .sub { margin-top: 8px; color: var(--ink-2); font-size: 15.5px; }
.modal .grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 24px; }
.modal label { display: grid; gap: 6px; font-size: 13.5px; font-weight: 700; color: var(--ink); }
.modal label.full { grid-column: 1 / -1; }
.modal input, .modal select, .modal textarea { font: 500 15.5px/1.4 var(--sans); padding: 12px 14px; border: 1.5px solid var(--line); border-radius: 12px; background: #fbfdfc; color: var(--ink); width: 100%; }
.modal input:focus, .modal select:focus, .modal textarea:focus { outline: none; border-color: var(--green); box-shadow: 0 0 0 4px rgba(0,129,93,.12); }
.modal .form-error { margin-top: 14px; color: var(--coral); font-size: 14px; font-weight: 600; }
.modal .send { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 22px; }

/* Scroll reveal (only when JS is running) */
.js .reveal { opacity: 0; transform: translateY(24px); transition: opacity .7s ease, transform .7s cubic-bezier(.2,.8,.2,1); }
.js .reveal.in { opacity: 1; transform: none; }
.js .reveal .eyebrow::before { width: 0; transition: width .8s .35s cubic-bezier(.2,.8,.2,1); }
.js .reveal.in .eyebrow::before { width: 28px; }

/* Desktop-only motion */
@media (min-width: 601px) {
  .hero-media img { animation: floaty 6s ease-in-out infinite alternate; }
  .hero-media img:nth-child(2) { animation-delay: -2s; }
  .hero-media img:nth-child(3) { animation-delay: -4s; }
  .hero-badge { animation: floaty 5s ease-in-out infinite alternate-reverse; }
}

/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
  .nav, .header-cta { display: none; }
  .menu-btn { display: inline-flex; }
  .stats .wrap { grid-template-columns: repeat(3, 1fr); }
  .stat:nth-child(4) { border-left: 0; padding-left: 0; }
  .stat:nth-child(4)::before { left: 0; }
  .stat:nth-child(n+4) { border-top: 1px solid rgba(255,255,255,.1); }
  .carousel > * { flex-basis: calc((100% - 22px) / 2); }
  .logo-grid { grid-template-columns: repeat(4, 1fr); }
  .footer .cols { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 900px) {
  .section { padding: 72px 0; }
  .hero { padding: 48px 0 64px; }
  .hero .wrap, .about, .safety, .case, .cta-band { grid-template-columns: 1fr; gap: 40px; }
  .hero-badge { left: 12px; bottom: 12px; }
  .about-media .since { right: 12px; }
  .values { grid-template-columns: 1fr 1fr; margin-top: 56px; }
  .phases { grid-template-columns: 1fr; }
  .industries { grid-template-columns: 1fr 1fr; }
  .case, .cta-band { padding: 36px 28px; }
  .cta-band .ctas { justify-content: flex-start; }
  .logo-grid { grid-template-columns: repeat(3, 1fr); }
  .why { grid-template-columns: 1fr; }
  .safety-media img { aspect-ratio: 16/10; }
}
@media (max-width: 600px) {
  body { font-size: 16px; padding-bottom: 76px; }
  .wrap { padding: 0 16px; }
  .topbar { display: none; }
  .header .wrap { height: 66px; }
  .brand img { height: 42px; }
  .section { padding: 60px 0; }
  .section-head { margin-bottom: 30px; }
  .section-head p, .hero .lead { font-size: 16.5px; }
  .section-head.with-nav { display: block; }
  .car-nav { display: none; }

  /* Immersive photo hero */
  .hero { padding: 0; min-height: min(92svh, 780px); display: flex; align-items: flex-end; background: var(--green-900); }
  .hero::before, .hero::after { display: none; }
  .hero .wrap { position: static; padding-top: 120px; padding-bottom: 36px; }
  .hero .wrap > div:first-child { position: relative; z-index: 2; }
  .hero-media { position: absolute; inset: 0; display: block; z-index: 0; }
  .hero-media .tall { position: absolute; inset: 0; width: 100%; height: 100%; aspect-ratio: auto; border-radius: 0; box-shadow: none; object-position: 50% 20%; animation: kenburns 20s ease-in-out infinite alternate; }
  .hero-media .sq, .hero-badge { display: none; }
  .hero-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(7,42,32,.1) 0%, rgba(7,42,32,.5) 36%, rgba(7,42,32,.96) 70%); }
  .hero .eyebrow { color: var(--mint); font-size: 11px; letter-spacing: .12em; }
  .hero h1 { color: #fff; font-size: 40px; margin-top: 14px; }
  .hero h1 .rotator em, .hero h1 .rotator em:nth-child(n) { background-image: linear-gradient(90deg, #6fe0b5, #7fd3f5); }
  .hero h1 .rotator em:nth-child(3) { background-image: linear-gradient(90deg, #ff9a7a, #ffb27a); }
  .hero .lead { color: #d3e4dc; margin-top: 14px; }
  .hero .ctas { margin-top: 26px; gap: 10px; }
  .hero .ctas .btn { flex: 1 1 100%; }
  .hero .btn-ghost { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.35); color: #fff; }
  .hero .trust { margin-top: 22px; color: #b9cfc5; font-size: 13.5px; }
  .hero .trust strong { color: #fff; }
  .hero .trust-ic { background: rgba(111,224,181,.15); color: var(--mint); }

  .stats .wrap { grid-template-columns: 1fr 1fr; }
  .stat, .stat:nth-child(4) { padding: 26px 0 24px; border-left: 0; }
  .stat::before, .stat:nth-child(4)::before { left: 0; }
  .stat:nth-child(even) { padding-left: 20px; border-left: 1px solid rgba(255,255,255,.1); }
  .stat:nth-child(even)::before { left: 20px; }
  .stat:nth-child(n+3) { border-top: 1px solid rgba(255,255,255,.1); }
  .stat b { font-size: 32px; }
  .mq-item img { height: 42px; }

  /* Swipeable rows */
  .swipe-hint { display: flex; align-items: center; gap: 8px; margin: -12px 0 14px; font-size: 13px; font-weight: 700; color: var(--green); }
  .dark .swipe-hint { color: var(--mint); }
  .swipe-hint svg { width: 16px; height: 16px; animation: nudge 1.6s ease-in-out infinite; }
  @keyframes nudge { 50% { transform: translateX(5px); } }
  .carousel, .industries, .phases { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 12px; margin: 0 -16px; padding: 4px 16px 10px; scrollbar-width: none; scroll-padding-left: 16px; }
  .industries::-webkit-scrollbar, .phases::-webkit-scrollbar { display: none; }
  .carousel > *, .phase { flex: 0 0 86%; scroll-snap-align: start; }
  .industry { flex: 0 0 78%; scroll-snap-align: start; aspect-ratio: 4/5; }
  .industry span { font-size: 19px; }
  .phase { padding: 26px 22px; }
  .pillar:hover, .value:hover, .client:hover { transform: none; }

  .vm { grid-template-columns: 1fr; }
  .values { grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 44px; }
  .value { padding: 18px; }
  .value h4 { font-size: 16px; margin-top: 12px; }
  .value p { font-size: 13.5px; }
  .about-media img { aspect-ratio: 4/3; }
  .safety-media { display: none; }
  .safety-grid { grid-template-columns: 1fr; }
  .case .kpis { gap: 8px; }
  .case .kpis div { padding: 14px 10px; }
  .case .kpis b { font-size: 23px; }
  .bars { height: 230px; gap: 10px; }
  .bars-x { gap: 10px; }
  .chart-badge { top: -14px; }

  .logo-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
  .client { aspect-ratio: auto; min-height: 120px; padding: 18px 12px 14px; gap: 10px; }
  .client img { max-height: 50px; }
  .filters { flex-wrap: nowrap; overflow-x: auto; margin: 0 -16px 24px; padding: 0 16px 4px; scrollbar-width: none; }
  .filter { flex: none; }
  .footer .cols { grid-template-columns: 1fr; gap: 36px; }
  .page-hero { padding: 64px 0 56px; }
  .page-hero p { font-size: 16.5px; }
  .page-hero .ctas .btn { flex: 1 1 100%; }

  .modal { padding: 0; place-items: end stretch; }
  .modal .sheet { border-radius: 22px 22px 0 0; padding: 28px 20px calc(24px + env(safe-area-inset-bottom)); max-height: 92vh; transform: translateY(40px); }
  .modal .grid { grid-template-columns: 1fr; }
  .modal .send .btn { flex: 1 1 100%; }

  .wa { display: none; }
  .mbar { display: grid; grid-template-columns: auto auto 1fr; gap: 8px; align-items: center; position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; padding: 10px 12px calc(10px + env(safe-area-inset-bottom)); background: rgba(255,255,255,.97); backdrop-filter: blur(10px); border-top: 1px solid var(--line); box-shadow: 0 -6px 20px rgba(7,42,32,.08); }
  .mbar a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; min-width: 64px; height: 52px; border-radius: 12px; font-size: 11.5px; font-weight: 700; color: var(--ink-2); }
  .mbar a svg { width: 21px; height: 21px; color: var(--blue); }
  .mbar a:first-child svg { color: var(--green); }
  .mbar a.go { flex-direction: row; gap: 8px; background: linear-gradient(135deg, var(--green), var(--teal)); color: #fff; font-size: 15px; border-radius: 999px; }
  .mbar a.go svg { color: #fff; width: 19px; height: 19px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .hero h1 .rotator em:not(.on) { display: none; }
}

/* ---------- Careers page ---------- */
.section-head.center { text-align: center; margin-left: auto; margin-right: auto; }
.section-head.center .eyebrow { justify-content: center; }
.page-hero .hl { background: linear-gradient(90deg, var(--mint), #7fd3f5); -webkit-background-clip: text; background-clip: text; color: transparent; }
.careers-hero { padding: 120px 0 110px; }
.careers-hero h1 { max-width: 760px; }

.benefits { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.benefit { position: relative; padding: 32px 28px; border-radius: 20px; background: #fff; border: 1px solid var(--line); overflow: hidden; transition: transform .35s, box-shadow .35s; }
.benefit::after { content: ""; position: absolute; right: -40px; top: -40px; width: 140px; height: 140px; border-radius: 50%; background: var(--t); transition: transform .5s cubic-bezier(.2,.8,.2,1); }
.benefit:hover { transform: translateY(-6px); box-shadow: var(--shadow); }
.benefit:hover::after { transform: scale(1.5); }
.benefit > * { position: relative; z-index: 1; }
.benefit.b1 { --c: var(--green); --t: var(--green-50); } .benefit.b2 { --c: var(--blue); --t: var(--blue-50); }
.benefit.b3 { --c: var(--orange); --t: var(--orange-50); } .benefit.b4 { --c: var(--coral); --t: var(--coral-50); }
.benefit.b5 { --c: var(--violet); --t: var(--violet-50); } .benefit.b6 { --c: var(--teal); --t: var(--teal-50); }
.benefit .ic { width: 56px; height: 56px; border-radius: 16px; background: var(--c); color: #fff; display: grid; place-items: center; box-shadow: 0 10px 22px -8px var(--c); }
.benefit .ic svg { width: 26px; height: 26px; }
.benefit h4 { margin-top: 22px; font-size: 19px; }
.benefit p { margin-top: 8px; font-size: 15px; color: var(--ink-2); line-height: 1.6; }

.areas { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.area { position: relative; border-radius: 20px; overflow: hidden; aspect-ratio: 3/4; color: #fff; }
.area img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .8s cubic-bezier(.2,.8,.2,1); }
.area:hover img { transform: scale(1.07); }
.area::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 30%, var(--o) 92%); }
.area.a1 { --o: rgba(0,90,65,.96); } .area.a2 { --o: rgba(170,70,15,.96); } .area.a3 { --o: rgba(15,90,150,.96); } .area.a4 { --o: rgba(80,55,160,.96); }
.area .txt { position: absolute; left: 24px; right: 24px; bottom: 22px; z-index: 1; }
.area h4 { font-family: var(--serif); font-size: 22px; font-weight: 600; }
.area p { margin-top: 8px; font-size: 14px; line-height: 1.5; color: rgba(255,255,255,.9); max-height: 0; opacity: 0; overflow: hidden; transition: max-height .5s, opacity .5s; }
.area:hover p { max-height: 120px; opacity: 1; }

.journey { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: 20px; position: relative; }
.journey::before { content: ""; position: absolute; left: 28px; right: 28px; top: 27px; height: 2px; background: rgba(255,255,255,.12); }
.journey::after { content: ""; position: absolute; left: 28px; right: 28px; top: 27px; height: 2px; background: linear-gradient(90deg, #52c2e3, var(--mint), #ff9a5c, #f07a63, #a58cf0); transform: scaleX(0); transform-origin: left; transition: transform 1.6s cubic-bezier(.2,.8,.2,1) .2s; }
.journey.go::after { transform: scaleX(1); }
.journey li { position: relative; z-index: 1; }
.journey .dot { width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; font: 600 18px/1 var(--serif); color: var(--green-900); background: var(--c); box-shadow: 0 0 0 6px var(--green-900), 0 0 0 7px rgba(255,255,255,.15); transform: scale(.6); opacity: 0; transition: transform .5s cubic-bezier(.3,1.6,.5,1), opacity .4s; transition-delay: calc(var(--i) * .25s + .2s); }
.journey.go .dot { transform: none; opacity: 1; }
.journey li:nth-child(1) { --c: #52c2e3; } .journey li:nth-child(2) { --c: var(--mint); } .journey li:nth-child(3) { --c: #ff9a5c; }
.journey li:nth-child(4) { --c: #f07a63; } .journey li:nth-child(5) { --c: #a58cf0; }
.journey h4 { margin-top: 20px; color: #fff; font-size: 18px; }
.journey p { margin-top: 8px; color: #b9cfc5; font-size: 14.5px; line-height: 1.55; }
.journey-cta { margin-top: 52px; text-align: center; }

.notice { display: flex; gap: 24px; align-items: flex-start; padding: 32px 36px; border-radius: 20px; background: linear-gradient(120deg, var(--blue-50), var(--green-50)); border: 1px solid #d5e4ef; }
.notice .ic { flex: none; width: 58px; height: 58px; border-radius: 16px; background: linear-gradient(135deg, var(--blue), var(--sky)); color: #fff; display: grid; place-items: center; }
.notice .ic svg { width: 28px; height: 28px; }
.notice h3 { font-size: 24px; }
.notice p { margin-top: 8px; color: var(--ink-2); }
.notice a, .faq-wrap .section-head a { color: var(--blue); font-weight: 700; }

.faq-wrap { display: grid; grid-template-columns: .8fr 1.2fr; gap: 64px; align-items: start; }
.faq { display: grid; gap: 12px; }
.faq details { border: 1px solid var(--line); border-radius: 16px; background: #fff; transition: box-shadow .3s, border-color .3s; }
.faq details[open] { box-shadow: var(--shadow); border-color: transparent; }
.faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 20px 22px; font-weight: 700; font-size: 16.5px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary svg { flex: none; width: 30px; height: 30px; padding: 6px; border-radius: 50%; background: var(--green-50); color: var(--green); transition: transform .3s, background .3s, color .3s; }
.faq details[open] summary svg { transform: rotate(45deg); background: var(--green); color: #fff; }
.faq details p { padding: 0 22px 20px; color: var(--ink-2); font-size: 15.5px; }
.careers-cta { background: linear-gradient(120deg, var(--blue) 0%, var(--teal) 55%, var(--green) 100%); }

@media (max-width: 1100px) {
  .areas { grid-template-columns: repeat(2, 1fr); }
  .journey { grid-template-columns: 1fr; gap: 28px; }
  .journey::before, .journey::after { left: 27px; right: auto; top: 28px; bottom: 28px; width: 2px; height: auto; }
  .journey::after { transform: scaleY(0); transform-origin: top; }
  .journey.go::after { transform: scaleY(1); }
  .journey li { display: grid; grid-template-columns: 56px 1fr; column-gap: 20px; }
  .journey .dot { grid-row: span 2; }
  .journey h4 { margin-top: 6px; }
}
@media (max-width: 900px) {
  .benefits { grid-template-columns: 1fr 1fr; }
  .faq-wrap { grid-template-columns: 1fr; gap: 8px; }
}
@media (max-width: 600px) {
  .careers-hero { padding: 72px 0 64px; }
  .benefits { grid-template-columns: 1fr; gap: 12px; }
  .benefit { padding: 24px 22px; display: grid; grid-template-columns: 56px 1fr; column-gap: 16px; }
  .benefit .ic { grid-row: span 2; }
  .benefit h4 { margin-top: 4px; font-size: 17px; }
  .areas { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 12px; margin: 0 -16px; padding: 4px 16px 10px; scrollbar-width: none; }
  .area { flex: 0 0 78%; scroll-snap-align: start; }
  .area p { max-height: none; opacity: 1; }
  .notice { flex-direction: column; padding: 26px 22px; gap: 16px; }
  .notice h3 { font-size: 21px; }
}

/* ---------- Blog ---------- */
.chip { display: inline-flex; align-items: center; gap: 6px; font: 700 11.5px/1 var(--sans); letter-spacing: .08em; text-transform: uppercase; padding: 7px 11px; border-radius: 99px; color: var(--c); background: var(--t); width: fit-content; }
.chip.c-green { --c: var(--green); --t: var(--green-50); } .chip.c-orange { --c: #c9540c; --t: var(--orange-50); }
.chip.c-blue { --c: var(--blue); --t: var(--blue-50); } .chip.c-violet { --c: var(--violet); --t: var(--violet-50); }
.chip.c-sky { --c: #137aa6; --t: var(--sky-50); }

.blog-hero { position: relative; padding: 96px 0 72px; overflow: hidden; background: radial-gradient(900px 420px at 90% 0%, rgba(31,155,209,.14), transparent 60%), radial-gradient(800px 400px at 0% 100%, rgba(106,79,193,.10), transparent 60%), linear-gradient(180deg, #f2f8f5, #fff); }
.blog-hero .crumbs, .post-hero .crumbs { font-size: 14px; color: var(--ink-2); }
.blog-hero .crumbs a:hover, .post-hero .crumbs a:hover { color: var(--green); }
.blog-hero .eyebrow { margin-top: 26px; }
.blog-hero h1 { font-size: clamp(38px, 5.4vw, 64px); margin-top: 18px; max-width: 900px; color: var(--green-900); animation: rise .9s .1s cubic-bezier(.2,.8,.2,1) both; }
.blog-hero p { margin-top: 20px; font-size: 19px; color: var(--ink-2); max-width: 640px; animation: rise .9s .25s cubic-bezier(.2,.8,.2,1) both; }
.hl2 { background: linear-gradient(90deg, var(--green), var(--sky)); -webkit-background-clip: text; background-clip: text; color: transparent; }

.post-card { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--line); border-radius: 20px; overflow: hidden; transition: transform .35s, box-shadow .35s, border-color .35s; }
.post-card:hover { transform: translateY(-6px); box-shadow: var(--shadow); border-color: transparent; }
.post-card .img { overflow: hidden; aspect-ratio: 16/10; }
.post-card .img img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s cubic-bezier(.2,.8,.2,1); }
.post-card:hover .img img { transform: scale(1.06); }
.post-card .txt { padding: 24px 26px 26px; display: flex; flex-direction: column; gap: 12px; flex: 1; }
.post-card h3 { font-size: 22px; line-height: 1.25; transition: color .2s; }
.post-card:hover h3 { color: var(--green); }
.post-card p { color: var(--ink-2); font-size: 15px; line-height: 1.6; flex: 1; }
.post-card .meta { font-size: 13px; font-weight: 600; color: #7b8a83; }
.post-card.hide { display: none; }

.featured .post-card.big { display: grid; grid-template-columns: 1.15fr 1fr; }
.featured .post-card.big .img { aspect-ratio: auto; min-height: 380px; }
.featured .post-card.big .txt { padding: 48px; justify-content: center; gap: 16px; }
.featured .post-card.big h3 { font-size: clamp(26px, 3vw, 36px); }
.featured .post-card.big p { flex: none; font-size: 17px; }
.featured { margin-bottom: 56px; }

.blog-filters { margin-bottom: 30px; }
.post-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }

/* Article */
.progress { position: fixed; left: 0; right: 0; top: 0; height: 4px; z-index: 70; background: transparent; }
.progress i { display: block; height: 100%; background: linear-gradient(90deg, var(--green), var(--sky), var(--violet)); transform-origin: left; transform: scaleX(0); }
.wrap.narrow { max-width: 860px; }
.post-hero { padding: 72px 0 40px; background: linear-gradient(180deg, #f2f8f5, #fff); }
.post-hero .chip { margin-top: 26px; }
.post-hero h1 { font-size: clamp(32px, 4.6vw, 54px); margin-top: 18px; color: var(--green-900); animation: rise .9s .1s cubic-bezier(.2,.8,.2,1) both; }
.post-hero .dek { margin-top: 18px; font-size: 20px; color: var(--ink-2); line-height: 1.55; }
.byline { display: flex; align-items: center; gap: 14px; margin-top: 28px; }
.byline .avatar { width: 48px; height: 48px; border-radius: 50%; background: #fff; border: 1px solid var(--line); display: grid; place-items: center; padding: 8px; }
.byline strong { display: block; font-size: 15px; }
.byline span { font-size: 13.5px; color: var(--ink-2); }
.post-cover { margin: 0 auto; max-width: 1100px; }
.post-cover img { width: 100%; aspect-ratio: 21/9; object-fit: cover; border-radius: 24px; box-shadow: var(--shadow); }

.post-layout { display: grid; grid-template-columns: 70px minmax(0, 720px) 300px; justify-content: center; gap: 48px; padding-top: 56px; padding-bottom: 96px; }
.share { position: sticky; top: 110px; align-self: start; display: grid; gap: 10px; justify-items: center; }
.share span { font-size: 11.5px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: #7b8a83; }
.share a { width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line); display: grid; place-items: center; color: var(--ink-2); cursor: pointer; transition: all .2s; background: #fff; }
.share a:hover { background: var(--green); border-color: var(--green); color: #fff; }
.share a.copied { background: var(--blue); border-color: var(--blue); color: #fff; }
.share svg { width: 17px; height: 17px; }

.prose { font-size: 18.5px; line-height: 1.8; color: #26332d; }
.prose > p:first-child::first-letter { float: left; font: 600 64px/.9 var(--serif); color: var(--green); padding: 6px 12px 0 0; }
.prose p + p, .prose ul + p, .prose blockquote + p { margin-top: 20px; }
.prose h2 { font-size: 28px; margin: 44px 0 14px; color: var(--green-900); }
.prose ul { margin: 18px 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.prose li { display: flex; gap: 12px; }
.prose li::before { content: ""; flex: none; width: 8px; height: 8px; margin-top: 12px; border-radius: 50%; background: linear-gradient(135deg, var(--green), var(--sky)); }
.prose blockquote { margin: 36px 0; padding: 26px 30px; border-radius: 18px; background: linear-gradient(120deg, var(--green-50), var(--blue-50)); border-left: 5px solid var(--green); font: 500 22px/1.5 var(--serif); color: var(--green-900); }
.prose .note { margin-top: 32px; padding: 16px 18px; border-radius: 12px; background: var(--orange-50); color: #8a3d0a; font-size: 14.5px; line-height: 1.6; }

.post-side { position: sticky; top: 110px; align-self: start; }
.side-card { padding: 28px; border-radius: 20px; background: linear-gradient(160deg, var(--green-900), #0c4a52 70%, #123a63); color: #fff; display: grid; gap: 12px; }
.side-card h4 { font: 600 22px/1.25 var(--serif); }
.side-card p { color: #c3d6ce; font-size: 14.5px; margin-bottom: 6px; }
.side-card .btn { width: 100%; min-height: 46px; font-size: 14.5px; }
.side-card .btn-ghost { background: transparent; color: #fff; border-color: rgba(255,255,255,.35); }
.side-card .btn-ghost:hover { border-color: #fff; color: #fff; }

@media (max-width: 1100px) {
  .post-layout { grid-template-columns: 60px minmax(0, 1fr); }
  .post-side { display: none; }
  .post-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 900px) {
  .featured .post-card.big { grid-template-columns: 1fr; }
  .featured .post-card.big .img { min-height: 0; aspect-ratio: 16/10; }
  .featured .post-card.big .txt { padding: 28px; }
}
@media (max-width: 600px) {
  .blog-hero { padding: 56px 0 40px; }
  .blog-hero p { font-size: 16.5px; }
  .post-grid { grid-template-columns: 1fr; gap: 16px; }
  .featured { margin-bottom: 36px; }
  .featured .post-card.big .txt { padding: 22px; }
  .post-hero { padding: 48px 0 28px; }
  .post-hero .dek { font-size: 17px; }
  .post-cover img { aspect-ratio: 16/10; border-radius: 16px; }
  .post-layout { grid-template-columns: 1fr; gap: 24px; padding-top: 32px; padding-bottom: 60px; }
  .share { position: static; display: flex; justify-content: flex-start; order: 2; }
  .share span { margin-right: 6px; }
  .prose { font-size: 17px; }
  .prose h2 { font-size: 24px; margin-top: 34px; }
  .prose blockquote { font-size: 19px; padding: 20px 22px; }
}

/* ---------- Brand loader ---------- */
.loader { position: fixed; inset: 0; z-index: 300; display: grid; place-items: center; pointer-events: none; animation: loader-failsafe 0s 4.5s forwards; }
.loader-panel { position: absolute; inset: 0; transition: transform .85s cubic-bezier(.76,0,.24,1); }
.loader-panel.p2 { background: #fff; }
.loader-panel.p1 { background: linear-gradient(120deg, var(--green), var(--teal) 50%, var(--blue)); transition-delay: .12s; }
.loader-inner { position: relative; z-index: 1; display: grid; justify-items: center; gap: 16px; transition: opacity .35s, transform .6s cubic-bezier(.76,0,.24,1); }
.loader-mark img { width: 200px; height: auto; clip-path: inset(0 100% 0 0); animation: mark-wipe 1s .1s cubic-bezier(.65,0,.35,1) forwards, mark-breathe 2.4s 1.1s ease-in-out infinite; }
.loader-line { width: 200px; height: 3px; border-radius: 3px; background: #e7eeea; overflow: hidden; }
.loader-line i { display: block; height: 100%; width: 100%; background: linear-gradient(90deg, var(--green), var(--sky), var(--violet), var(--coral), var(--orange)); transform: translateX(-100%); animation: line-run 1.25s .2s cubic-bezier(.65,0,.35,1) forwards; }
.loader-tag { font: 700 11.5px/1 var(--sans); letter-spacing: .55em; text-transform: uppercase; color: var(--ink-2); opacity: 0; padding-left: .55em; animation: tag-in .8s .75s ease forwards; }
@keyframes mark-wipe { to { clip-path: inset(0 0 0 0); } }
@keyframes mark-breathe { 50% { transform: scale(1.03); } }
@keyframes line-run { to { transform: translateX(0); } }
@keyframes tag-in { from { opacity: 0; letter-spacing: .9em; } to { opacity: 1; letter-spacing: .32em; } }
@keyframes loader-failsafe { to { visibility: hidden; } }
/* exit: logo lifts, white panel then colour panel sweep up */
.loader.done .loader-inner { opacity: 0; transform: translateY(-24px); }
.loader.done .loader-panel.p2 { transform: translateY(-100%); }
.loader.done .loader-panel.p1 { transform: translateY(-100%); }
.loader.done { visibility: hidden; transition: visibility 0s 1.1s; }
.loader-panel.p1 { transform: translateY(100%); }
.loader.done .loader-panel.p1 { animation: color-sweep .9s cubic-bezier(.76,0,.24,1) forwards; }
@keyframes color-sweep { 0% { transform: translateY(100%); } 50% { transform: translateY(0); } 100% { transform: translateY(-100%); } }
/* returning visitors: a quick version */
.quick-load .loader-mark img { animation-duration: .45s, 2.4s; animation-delay: 0s, .5s; }
.quick-load .loader-line i { animation-duration: .5s; animation-delay: 0s; }
.quick-load .loader-tag { animation-duration: .4s; animation-delay: .2s; }
@media (prefers-reduced-motion: reduce) { .loader { display: none; } }

/* ---------- Mobile polish ---------- */
.hero-media .mob { display: none; }
@media (max-width: 600px) {
  .hero-media .tall { display: none; }
  .hero-media .mob { display: block; position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 55% 30%; animation: kenburns 22s ease-in-out infinite alternate; }
  .hero-media::after { background: linear-gradient(180deg, rgba(7,42,32,.30) 0%, rgba(7,42,32,.62) 24%, rgba(7,42,32,.93) 50%, #072a20 74%); }
  .hero .wrap { padding-top: 150px; padding-bottom: 30px; }
  .hero h1 { font-size: 35px; line-height: 1.12; text-shadow: 0 2px 22px rgba(0,0,0,.35); }
  .hero .lead { font-size: 15.5px; color: #e2eee8; text-shadow: 0 1px 10px rgba(0,0,0,.3); }
  .hero .eyebrow .eb-long { display: none; }
  .hero .eyebrow { font-size: 11px; letter-spacing: .2em; }
  .hero .ctas .btn { min-height: 46px; font-size: 14.5px; }
  .hero .trust { margin-top: 18px; }

  .btn { min-height: 46px; padding: 0 20px; font-size: 14.5px; }
  .menu-btn { width: 42px; height: 42px; border-radius: 11px; }
  .menu-btn svg { width: 20px; height: 20px; }

  /* slimmer, floating quick-action bar */
  body { padding-bottom: 76px; }
  .mbar { left: 10px; right: 10px; bottom: calc(8px + env(safe-area-inset-bottom)); padding: 6px; gap: 2px; border-radius: 18px; border: 1px solid rgba(7,42,32,.08); box-shadow: 0 10px 30px rgba(7,42,32,.16); background: rgba(255,255,255,.94); }
  .mbar a { height: 44px; min-width: 56px; font-size: 10.5px; gap: 2px; border-radius: 12px; }
  .mbar a svg { width: 18px; height: 18px; }
  .mbar a.go { height: 44px; font-size: 14px; gap: 7px; border-radius: 13px; }
  .mbar a.go svg { width: 17px; height: 17px; }
}
/* hold the hero entrance until the loader lifts */
.is-loading .hero .eyebrow, .is-loading .hero h1, .is-loading .hero .lead, .is-loading .hero .ctas, .is-loading .hero .trust,
.is-loading .page-hero h1, .is-loading .page-hero p, .is-loading .page-hero .ctas,
.is-loading .blog-hero h1, .is-loading .blog-hero p, .is-loading .post-hero h1 { animation-play-state: paused; }
@media (max-width: 600px) {
  .hero-media .mob { inset: 0 0 auto 0; height: 62%; object-position: 42% 40%; }
  .hero-media::after { background: linear-gradient(180deg, rgba(7,42,32,.05) 0%, rgba(7,42,32,.15) 30%, rgba(7,42,32,.85) 52%, #072a20 64%); }
}

/* ---------- Years-of-service emblem ---------- */
.header .wrap { justify-content: flex-start; }
.header .nav { margin-left: auto; }
.yrs { display: inline-flex; align-items: center; gap: 9px; padding-left: 16px; margin-left: 2px; border-left: 1px solid var(--line); line-height: 1; }
.yrs b { position: relative; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; font: 600 20px/1 var(--serif); color: var(--green); background: radial-gradient(circle at 30% 25%, #fff, var(--green-50)); box-shadow: inset 0 0 0 2px var(--green), 0 0 0 3px #fff, 0 0 0 4px rgba(0,129,93,.25); }
.yrs > span { font: 800 10px/1.25 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-2); }
@media (max-width: 1100px) { .header .menu-btn { margin-left: auto; } }
@media (max-width: 600px) {
  .yrs { padding-left: 10px; gap: 6px; }
  .yrs b { width: 34px; height: 34px; font-size: 15px; }
  .yrs > span { font-size: 8.5px; letter-spacing: .1em; }
}

/* header fit: logo never shrinks; tighter nav on mid-size screens */
.brand, .yrs, .header-cta { flex: none; }
.brand img { max-width: none; }
@media (max-width: 1320px) { .nav { gap: 22px; font-size: 15px; } .header .wrap { gap: 20px; } .header-cta .btn { padding: 0 16px; } }
@media (max-width: 1200px) and (min-width: 1101px) { .header-cta .btn-ghost { display: none; } }
/* mobile hero: keep the headline on the dark part of the image */
@media (max-width: 600px) {
  .hero h1 { font-size: 31px; }
  .hero-media .mob { height: 54%; }
  .hero-media::after { background: linear-gradient(180deg, rgba(7,42,32,.05) 0%, rgba(7,42,32,.2) 26%, rgba(7,42,32,.88) 44%, #072a20 56%); }
}

/* ---------- JCL Assistant ---------- */
.assist { position: fixed; right: 22px; bottom: 22px; z-index: 130; font-family: var(--sans); }
.assist-launch { position: relative; width: 60px; height: 60px; border-radius: 50%; border: 0; cursor: pointer; color: #fff; display: grid; place-items: center; background: linear-gradient(135deg, var(--green), var(--teal) 60%, var(--blue)); box-shadow: 0 10px 28px rgba(0,129,93,.35); transition: transform .25s; }
.assist-launch:hover { transform: translateY(-2px) scale(1.03); }
.assist-launch::before { content: ""; position: absolute; inset: -6px; border-radius: 50%; border: 2px solid rgba(0,129,93,.35); animation: assist-ring 2.6s ease-out infinite; }
@keyframes assist-ring { 0% { transform: scale(.85); opacity: 1; } 100% { transform: scale(1.25); opacity: 0; } }
.assist-launch svg { width: 26px; height: 26px; grid-area: 1 / 1; transition: transform .3s, opacity .3s; }
.assist-launch .i-close { opacity: 0; transform: rotate(-90deg); }
.assist.open .assist-launch .i-open { opacity: 0; transform: rotate(90deg); }
.assist.open .assist-launch .i-close { opacity: 1; transform: none; }
.assist.open .assist-launch::before { display: none; }

.assist-hint { position: absolute; right: 0; bottom: 74px; width: max-content; max-width: 240px; padding: 12px 34px 12px 16px; border-radius: 14px 14px 4px 14px; background: #fff; color: var(--ink); font-size: 14px; font-weight: 600; box-shadow: var(--shadow); border: 1px solid var(--line); cursor: pointer; opacity: 0; transform: translateY(8px); pointer-events: none; transition: opacity .35s, transform .35s; }
.assist-hint.show { opacity: 1; transform: none; pointer-events: auto; }
.assist-hint .x { position: absolute; right: 8px; top: 6px; border: 0; background: none; font-size: 18px; line-height: 1; color: #8a978f; cursor: pointer; }

.assist-panel { position: absolute; right: 0; bottom: 76px; width: 380px; height: min(580px, calc(100vh - 140px)); display: flex; flex-direction: column; background: #fff; border-radius: 22px; overflow: hidden; box-shadow: 0 24px 70px rgba(7,42,32,.28); border: 1px solid rgba(7,42,32,.06); opacity: 0; transform: translateY(16px) scale(.97); transform-origin: bottom right; pointer-events: none; transition: opacity .3s, transform .35s cubic-bezier(.2,.8,.2,1); }
.assist.open .assist-panel { opacity: 1; transform: none; pointer-events: auto; }
.assist-panel header { display: flex; align-items: center; gap: 12px; padding: 16px 16px 16px 18px; color: #fff; background: linear-gradient(120deg, var(--green-900), #0c4a52 60%, #123a63); }
.assist-panel header .av { width: 44px; height: 44px; border-radius: 50%; background: #fff; display: grid; place-items: center; padding: 7px; flex: none; box-shadow: 0 0 0 3px rgba(255,255,255,.18); }
.assist-panel header .av img { width: 100%; }
.assist-panel header div { flex: 1; display: grid; gap: 3px; }
.assist-panel header strong { font-size: 16px; }
.assist-panel header span { font-size: 12.5px; color: #c3d6ce; display: inline-flex; align-items: center; gap: 6px; }
.assist-panel header span i { width: 8px; height: 8px; border-radius: 50%; background: #4fd1a1; box-shadow: 0 0 0 3px rgba(79,209,161,.25); }
.assist-close { width: 36px; height: 36px; border-radius: 10px; border: 0; background: rgba(255,255,255,.1); color: #fff; cursor: pointer; display: grid; place-items: center; }
.assist-close svg { width: 18px; height: 18px; }

.assist-log { flex: 1; overflow-y: auto; padding: 18px 16px 8px; display: flex; flex-direction: column; gap: 10px; background: linear-gradient(180deg, #f6faf8, #fff 40%); }
.msg { display: flex; animation: msg-in .35s cubic-bezier(.2,.8,.2,1); }
@keyframes msg-in { from { opacity: 0; transform: translateY(8px); } }
.msg .bubble { max-width: 86%; padding: 11px 14px; border-radius: 16px; font-size: 14.5px; line-height: 1.55; }
.msg.bot .bubble { background: #fff; border: 1px solid var(--line); border-bottom-left-radius: 5px; color: var(--ink); box-shadow: 0 1px 2px rgba(7,42,32,.04); }
.msg.user { justify-content: flex-end; }
.msg.user .bubble { background: linear-gradient(135deg, var(--green), var(--teal)); color: #fff; border-bottom-right-radius: 5px; }
.msg .bubble ul { margin: 8px 0 6px; padding-left: 18px; display: grid; gap: 4px; }
.msg .bubble a { color: var(--blue); font-weight: 700; }
.msg .acts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.msg .abtn { display: inline-flex; align-items: center; min-height: 36px; padding: 0 14px; border-radius: 99px; border: 0; cursor: pointer; font: 700 13px/1 var(--sans); color: #fff !important; background: linear-gradient(135deg, var(--green), var(--teal)); text-decoration: none; }
.msg .abtn.ghost { background: var(--blue-50); color: var(--blue) !important; }
.msg .alink { border: 0; background: none; padding: 0; font: inherit; font-weight: 700; color: var(--blue); cursor: pointer; text-decoration: underline; }
.dots3 { display: inline-flex; gap: 4px; padding: 3px 2px; }
.dots3 i { width: 7px; height: 7px; border-radius: 50%; background: #9fb3aa; animation: dot-b 1s infinite ease-in-out; }
.dots3 i:nth-child(2) { animation-delay: .15s; } .dots3 i:nth-child(3) { animation-delay: .3s; }
@keyframes dot-b { 0%, 80%, 100% { transform: translateY(0); opacity: .5; } 40% { transform: translateY(-4px); opacity: 1; } }

.assist-chips { display: flex; gap: 8px; padding: 8px 16px 10px; overflow-x: auto; scrollbar-width: none; flex: none; }
.assist-chips::-webkit-scrollbar { display: none; }
.assist-chips button { flex: none; min-height: 34px; padding: 0 13px; border-radius: 99px; border: 1px solid #cfe2d9; background: #fff; color: var(--green-800); font: 700 12.5px/1 var(--sans); cursor: pointer; transition: all .2s; }
.assist-chips button:hover { background: var(--green); border-color: var(--green); color: #fff; }
.assist-input { display: flex; gap: 8px; padding: 10px 12px; border-top: 1px solid var(--line); flex: none; }
.assist-input input { flex: 1; min-width: 0; height: 44px; padding: 0 14px; border-radius: 12px; border: 1.5px solid var(--line); font: 500 14.5px var(--sans); background: #fbfdfc; color: var(--ink); }
.assist-input input:focus { outline: none; border-color: var(--green); box-shadow: 0 0 0 3px rgba(0,129,93,.12); }
.assist-input button { width: 44px; height: 44px; border-radius: 12px; border: 0; cursor: pointer; color: #fff; display: grid; place-items: center; background: linear-gradient(135deg, var(--green), var(--teal)); flex: none; }
.assist-input button svg { width: 18px; height: 18px; }
.assist-note { padding: 0 16px 12px; font-size: 11.5px; color: #7b8a83; text-align: center; flex: none; }
.assist-note a { color: var(--green); font-weight: 700; }

@media (max-width: 600px) {
  .assist { right: 14px; bottom: calc(80px + env(safe-area-inset-bottom)); }
  .assist-launch { width: 52px; height: 52px; }
  .assist-launch svg { width: 23px; height: 23px; }
  .assist-hint { bottom: 64px; font-size: 13px; }
  .assist-panel { position: fixed; inset: 0; width: auto; height: auto; border-radius: 0; transform: translateY(24px); }
  .assist.open .assist-launch { opacity: 0; pointer-events: none; }
  .assist-panel header { padding-top: calc(14px + env(safe-area-inset-top)); }
  .assist-input { padding-bottom: calc(10px + env(safe-area-inset-bottom)); }
  .assist-input input { font-size: 16px; }
}
@media (prefers-reduced-motion: reduce) { .assist-launch::before { animation: none; } }

/* download confirmation */
.dl-toast { position: fixed; left: 50%; bottom: 28px; z-index: 400; display: inline-flex; align-items: center; gap: 10px; padding: 13px 18px; border-radius: 14px; background: var(--green-900); color: #fff; font: 600 14px/1.3 var(--sans); box-shadow: 0 14px 40px rgba(7,42,32,.3); transform: translate(-50%, 20px); opacity: 0; pointer-events: none; transition: opacity .3s, transform .35s cubic-bezier(.2,.8,.2,1); }
.dl-toast.show { opacity: 1; transform: translate(-50%, 0); }
.dl-toast svg { width: 18px; height: 18px; color: #4fd1a1; flex: none; }
@media (max-width: 600px) { .dl-toast { bottom: calc(92px + env(safe-area-inset-bottom)); width: max-content; max-width: calc(100% - 32px); } }

/* ---------- Compact header on scroll ---------- */
.header { transition: box-shadow .3s, background .3s; }
.header .wrap { transition: height .35s cubic-bezier(.2,.8,.2,1); }
.brand img, .yrs b, .yrs > span, .header-cta .btn, .nav { transition: all .35s cubic-bezier(.2,.8,.2,1); }
.scrolled .header { box-shadow: 0 6px 24px rgba(7,42,32,.10); background: rgba(255,255,255,.97); }
.scrolled .header .wrap { height: 62px; }
.scrolled .brand img { height: 38px; }
.scrolled .yrs b { width: 34px; height: 34px; font-size: 15px; }
.scrolled .yrs > span { font-size: 9px; }
.scrolled .header-cta .btn { min-height: 38px; font-size: 13.5px; }
.scrolled .nav { font-size: 14.5px; }
@media (max-width: 600px) {
  .scrolled .header .wrap { height: 54px; }
  .scrolled .brand img { height: 32px; }
  .scrolled .yrs b { width: 28px; height: 28px; font-size: 13px; }
  .scrolled .yrs > span { font-size: 7.5px; }
  .scrolled .menu-btn { width: 38px; height: 38px; }
}

/* ---------- Our Team ---------- */
.team-page { padding-top: 80px; }
.tier { position: relative; }
.tier-label { display: flex; align-items: center; gap: 18px; margin-bottom: 30px; }
.tier-label::before, .tier-label::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, transparent, var(--line)); }
.tier-label::after { background: linear-gradient(90deg, var(--line), transparent); }
.tier-label span { font: 800 12.5px/1 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--green); padding: 9px 16px; border-radius: 99px; background: var(--green-50); }
.tier-line { width: 2px; height: 56px; margin: 34px auto; background: linear-gradient(180deg, var(--green), rgba(0,129,93,.1)); border-radius: 2px; }

.member { display: flex; flex-direction: column; color: inherit; cursor: default; text-decoration: none; }
.member:focus { outline: none; }
.member:focus-visible { outline: 2px solid var(--green); outline-offset: 4px; border-radius: 18px; }
.member .ph { position: relative; display: block; overflow: hidden; border-radius: 18px; aspect-ratio: 4 / 5; background: linear-gradient(160deg, #d9dedb, #b9c2bd); box-shadow: 0 1px 2px rgba(7,42,32,.06), 0 12px 30px rgba(7,42,32,.10); }
.member .ph img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 18%; }
.member .ph::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 5px; background: var(--accent, var(--green)); }
.member .who { display: grid; gap: 4px; padding: 16px 4px 0; text-align: center; }
.member .who strong { font: 600 18px/1.25 var(--serif); color: var(--ink); }
.member .who span { font-size: 13.5px; font-weight: 600; color: var(--ink-2); letter-spacing: .01em; }

/* placeholder portrait */
.member .ph.empty { background: radial-gradient(120% 90% at 50% 0%, #ffffff 0%, #eef4f1 55%, #dfe9e4 100%); }
.member .ph.empty::before { content: ""; position: absolute; inset: 0; background: url(assets/jcl-mark.png) center 82% / 46% auto no-repeat; opacity: .07; }
.member .mono { position: absolute; inset: 0; display: grid; place-items: center; }
.member .mono b { display: grid; place-items: center; width: 46%; aspect-ratio: 1; border-radius: 50%; font: 600 clamp(26px, 3vw, 38px)/1 var(--serif); letter-spacing: .04em; color: #fff; background: linear-gradient(135deg, var(--accent, var(--green)), var(--accent2, var(--teal))); box-shadow: 0 0 0 6px rgba(255,255,255,.85), 0 14px 30px rgba(7,42,32,.18); }

/* executive tier */
.lead-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 330px)); justify-content: center; gap: 48px; }
.member.lead .ph { border-radius: 22px; box-shadow: 0 2px 4px rgba(7,42,32,.06), 0 24px 50px rgba(7,42,32,.16); }
.member.lead .ph::after { height: 6px; background: linear-gradient(90deg, var(--green), var(--sky)); }
.member.lead .who strong { font-size: 23px; }
.member.lead .who span { font-size: 13px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--green); }

/* senior tier */
.senior-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; max-width: 1040px; margin: 0 auto; }
.member.senior .ph::after { background: linear-gradient(90deg, var(--blue), var(--sky)); }
.member.senior .who span { color: var(--blue); font-weight: 700; }

/* departments */
.dept-nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-bottom: 44px; }
.dept-nav a { padding: 10px 16px; border-radius: 99px; border: 1px solid var(--line); background: #fff; font: 700 13.5px/1 var(--sans); color: var(--ink-2); transition: all .2s; }
.dept-nav a:hover { border-color: var(--green); color: var(--green); }
.dept { margin-bottom: 56px; scroll-margin-top: 100px; }
.dept.c-green { --accent: var(--green); --accent2: var(--teal); }
.dept.c-blue { --accent: var(--blue); --accent2: var(--sky); }
.dept.c-orange { --accent: var(--orange); --accent2: var(--coral); }
.dept.c-violet { --accent: var(--violet); --accent2: #9b84e6; }
.dept.c-sky { --accent: #137aa6; --accent2: var(--sky); }
.dept-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-bottom: 14px; margin-bottom: 26px; border-bottom: 1px solid var(--line); }
.dept-head .chip { font-size: 12.5px; padding: 9px 14px; }
.dept-head .count { font-size: 13px; font-weight: 700; color: #7b8a83; }
.team-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 24px; }
.team-grid .member .who strong { font-size: 16.5px; }

@media (max-width: 1100px) {
  .senior-grid { grid-template-columns: repeat(2, minmax(0, 260px)); justify-content: center; }
  .team-grid { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 900px) { .team-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 600px) {
  .team-page { padding-top: 48px; }
  .lead-grid { grid-template-columns: 1fr 1fr; gap: 14px; }
  .member.lead .who strong { font-size: 17px; }
  .member.lead .who span { font-size: 10.5px; letter-spacing: .1em; }
  .senior-grid { grid-template-columns: 1fr 1fr; gap: 14px; }
  .team-grid { grid-template-columns: 1fr 1fr; gap: 14px; }
  .member .ph { border-radius: 14px; }
  .member .who { padding-top: 10px; }
  .member .who strong, .team-grid .member .who strong { font-size: 15px; }
  .member .who span { font-size: 12px; }
  .tier-line { height: 36px; margin: 22px auto; }
  .dept-nav { flex-wrap: nowrap; overflow-x: auto; justify-content: flex-start; margin: 0 -16px 30px; padding: 0 16px 4px; scrollbar-width: none; }
  .dept-nav a { flex: none; }
  .dept { margin-bottom: 40px; }
}

.team-link { margin-top: 26px; }
/* team refinements */
.member .ph.empty::before { display: none; }
.member .ph.empty { background: radial-gradient(120% 90% at 50% 10%, #ffffff 0%, #f1f6f3 50%, #e2ebe6 100%); }
.team-grid { display: flex; flex-wrap: wrap; justify-content: center; }
.team-grid .member { width: calc((100% - 96px) / 5); }
@media (max-width: 1100px) { .team-grid .member { width: calc((100% - 72px) / 4); } }
@media (max-width: 900px) { .team-grid .member { width: calc((100% - 48px) / 3); } }
@media (max-width: 600px) { .team-grid .member { width: calc((100% - 14px) / 2); } }
/* executive tier: three leaders */
.lead-grid { grid-template-columns: repeat(3, minmax(0, 300px)); gap: 40px; }
.senior-grid { grid-template-columns: repeat(3, 1fr); max-width: 800px; }
@media (max-width: 1100px) { .senior-grid { grid-template-columns: repeat(3, minmax(0, 240px)); } }
@media (max-width: 900px) { .lead-grid { grid-template-columns: repeat(3, 1fr); gap: 18px; } }
@media (max-width: 600px) {
  .lead-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; }
  .lead-grid .member { width: calc((100% - 14px) / 2); }
  .senior-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; }
  .senior-grid .member { width: calc((100% - 14px) / 2); }
}
/* senior tier: four heads */
.senior-grid { grid-template-columns: repeat(4, 1fr); max-width: 1040px; }
@media (max-width: 1100px) { .senior-grid { grid-template-columns: repeat(2, minmax(0, 260px)); } }
@media (max-width: 600px) { .hero-media .mob { object-position: 50% 12%; } }

/* ---------- Contact dropdown ---------- */
.nav-dd { position: relative; display: flex; align-items: center; }
.nav-dd > a { display: inline-flex; align-items: center; gap: 4px; }
.nav-dd .dd-caret { width: 14px; height: 14px; transition: transform .25s; }
.nav-dd:hover .dd-caret, .nav-dd:focus-within .dd-caret { transform: rotate(180deg); }
.nav-dd.active > a { color: var(--green); }
.nav-dd .dd { position: absolute; top: calc(100% + 14px); left: 50%; min-width: 270px; padding: 8px; border-radius: 16px; background: #fff; border: 1px solid var(--line); box-shadow: 0 20px 50px rgba(7,42,32,.16); display: grid; gap: 2px; opacity: 0; visibility: hidden; transform: translate(-50%, 8px); transition: opacity .22s, transform .22s, visibility 0s .22s; z-index: 60; }
.nav-dd .dd::before { content: ""; position: absolute; top: -16px; left: 0; right: 0; height: 16px; }
.nav-dd:hover .dd, .nav-dd:focus-within .dd { opacity: 1; visibility: visible; transform: translate(-50%, 0); transition: opacity .22s, transform .22s; }
.nav .nav-dd .dd a { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 11px; color: var(--ink); }
.nav .nav-dd .dd a::after { display: none; }
.nav .nav-dd .dd a:hover { background: var(--green-50); color: var(--green); }
.nav-dd .dd-ic { width: 38px; height: 38px; flex: none; border-radius: 10px; display: grid; place-items: center; background: var(--green-50); color: var(--green); }
.nav-dd .dd a:nth-child(2) .dd-ic { background: var(--blue-50); color: var(--blue); }
.nav-dd .dd-ic svg { width: 18px; height: 18px; }
.nav-dd .dd b { display: block; font-size: 14.5px; font-weight: 700; }
.nav-dd .dd small { display: block; margin-top: 2px; font-size: 12.5px; font-weight: 500; color: var(--ink-2); }
.drawer nav a.sub { min-height: 48px; padding-left: 18px; font-size: 16px; color: var(--ink-2); }

/* ---------- WordPress integration ---------- */
.legacy { padding: 72px 0 96px; }
.legacy .container { max-width: 100%; }
.legacy img { height: auto; }
.page-hero.slim { padding: 80px 0 70px; }
.jobs-live { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.job { display: flex; flex-direction: column; gap: 10px; padding: 26px; border-radius: 18px; background: #fff; border: 1px solid var(--line); border-left: 5px solid var(--c); transition: transform .3s, box-shadow .3s; }
.job:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.job:nth-child(5n+1) { --c: var(--green); } .job:nth-child(5n+2) { --c: var(--blue); } .job:nth-child(5n+3) { --c: var(--orange); }
.job:nth-child(5n+4) { --c: var(--violet); } .job:nth-child(5n+5) { --c: var(--coral); }
.job h4 { font: 600 20px/1.3 var(--serif); }
.job .meta { font-size: 13px; font-weight: 600; color: #7b8a83; }
.job p { font-size: 14.5px; color: var(--ink-2); flex: 1; }
.job .go { font-weight: 800; font-size: 14px; color: var(--c); }
.jobs-foot { margin-top: 28px; display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; }
.pagination { display: flex; gap: 8px; justify-content: center; margin-top: 40px; }
.pagination .page-numbers { min-width: 44px; height: 44px; display: grid; place-items: center; border-radius: 99px; border: 1px solid var(--line); font-weight: 700; padding: 0 12px; }
.pagination .current { background: var(--green); color: #fff; border-color: var(--green); }
.client.nolink { cursor: default; }
/* keep the header sticky: 'hidden' on html/body breaks position: sticky, 'clip' does not */
html, body { overflow-x: clip !important; }
.admin-bar .header { top: 32px; }
@media (max-width: 782px) { .admin-bar .header { top: 46px; } }
@media (max-width: 600px) { .admin-bar .header { top: 0; } }
.no-jobs { display: grid; grid-template-columns: auto 1fr auto; gap: 24px; align-items: center; padding: 32px 36px; border-radius: 20px; background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow); }
.no-jobs .ic { width: 58px; height: 58px; border-radius: 16px; display: grid; place-items: center; color: #fff; background: linear-gradient(135deg, var(--green), var(--sky)); }
.no-jobs .ic svg { width: 28px; height: 28px; }
.no-jobs h3 { font-size: 22px; }
.no-jobs p { margin-top: 6px; color: var(--ink-2); font-size: 15.5px; max-width: 620px; }
@media (max-width: 900px) { .no-jobs { grid-template-columns: 1fr; padding: 26px 22px; gap: 14px; } .no-jobs .btn { justify-self: start; } }
@media (max-width: 1100px) { .jobs-live { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .jobs-live { grid-template-columns: 1fr; } .legacy { padding: 44px 0 64px; } }