/* =========================================================
   KPC Sustainability page (template-sustainability.php and the
   "KPC Sustainability" Elementor widgets). Everything is prefixed ks-.
   ========================================================= */
:root {
	--ks-brand: #EE3342;
	--ks-btn: #E5262C;
	--ks-brand-deep: #C81F2D;
	--ks-brand-light: #FF6B76;
	--ks-tint: #FDF1F2;
	--ks-dark: #111111;
	--ks-dark-2: #26292E;
	--ks-steel: #4A4F57;
	--ks-ink: #111111;
	--ks-body: #2B2F35;
	--ks-muted: #5F6570;
	--ks-line: #E5E7EB;
	--ks-paper: #F6F7F8;
	--ks-white: #fff;
	--ks-green: #1A8A3A;
	--ks-wrap: 1240px;
}
.ks-page { background: var(--ks-paper); color: var(--ks-ink); }
.ks-page *, .ks-hero *, .ks-tabnav *, .ks-explore *, .ks-stories *, .ks-block *, .ks-side-box * { box-sizing: border-box; }
/* .ks-wrap sits on the theme's Bootstrap .container — the same width and
   side padding as the site header and menu, at every screen size. */
.ks-wrap { position: relative; }
.ks-num { font-variant-numeric: tabular-nums; }
.ks-page :focus-visible { outline: 3px solid var(--ks-brand); outline-offset: 2px; border-radius: 4px; }
.ks-page a { text-decoration: none; }

/* ---------- HERO ---------- */
.ks-hero { background: #111 center / cover no-repeat; color: #fff; position: relative; overflow: hidden; }
.ks-hero::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(17,17,17,.62) 0%, rgba(17,17,17,.3) 55%, rgba(17,17,17,.12) 100%), linear-gradient(0deg, rgba(17,17,17,.45) 0%, rgba(17,17,17,0) 40%); pointer-events: none; }
.ks-hero::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: var(--ks-brand); }
.ks-hero-inner { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1fr); gap: 48px; align-items: center; padding-top: 150px; padding-bottom: 64px; min-height: 420px; align-content: end; } /* top padding clears the transparent site header */
.ks-hero-inner.is-single { grid-template-columns: minmax(0, 1fr); }
.ks-crumbs { display: flex; flex-wrap: wrap; gap: 8px; font-size: var(--fs-sm, 14px); color: #D0D3D8; margin-bottom: 28px; }
.ks-crumbs a { color: inherit; }
.ks-crumbs a:hover { color: #fff; }
.ks-hero h1, .ks-lede, .ks-crumbs { text-shadow: 0 1px 3px rgba(0,0,0,.55), 0 2px 16px rgba(0,0,0,.45); }
.ks-hero h1 { font-weight: 800; font-size: var(--kpc-heading-size); line-height: 1; letter-spacing: -.02em; color: #fff; margin: 0; }
.ks-lede { margin: 18px 0 0; max-width: 58ch; color: #E4E6EA; font-size: var(--fs-base, 16px); line-height: 1.6; }
.ks-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.ks-btn { display: inline-flex; align-items: center; gap: 10px; font-weight: 600; font-size: var(--fs-base, 16px); text-decoration: none; border-radius: 8px; padding: 12px 18px; border: 1.5px solid transparent; cursor: pointer; transition: background .15s, border-color .15s, color .15s; line-height: 1.2; }
.ks-btn-primary { background: var(--ks-btn); color: #fff; }
.ks-btn-primary:hover { background: var(--ks-brand-deep); color: #fff; }
.ks-btn-outline { border-color: rgba(255,255,255,.45); color: #fff; background: rgba(0,0,0,.12); }
.ks-btn-outline:hover { border-color: #fff; color: #fff; }
.ks-btn-dark { background: var(--ks-dark); color: #fff; width: 100%; justify-content: center; margin-top: 14px; }
.ks-btn-dark:hover { background: var(--ks-dark-2); color: #fff; }

/* ---------- TAB BAR (links to the Sustainability pages) ---------- */
.ks-tabnav { position: relative; z-index: 60; background: rgba(255,255,255,.97); border-bottom: 1px solid var(--ks-line); }
.ks-tabnav.is-fixed { position: fixed; left: 0; right: 0; box-shadow: 0 6px 18px -12px rgba(0,0,0,.35); backdrop-filter: blur(10px); }
.ks-tabnav-spacer { display: none; }
.ks-tabnav-spacer.is-on { display: block; }
.ks-tabs { list-style: none; margin: 0; padding: 0; display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; max-width: 100%; min-width: 0; }
.ks-tabnav .ks-wrap { overflow: hidden; }
.ks-tabs::-webkit-scrollbar { display: none; }
.ks-tabs li { flex: 0 0 auto; margin: 0; }
/* Auto margins centre the tabs yet let the row scroll sideways on phones. */
.ks-tabs li:first-child { margin-left: auto; }
.ks-tabs li:last-child { margin-right: auto; }
.ks-tab { display: block; font-weight: 600; font-size: var(--fs-base, 16px); color: var(--ks-muted); padding: 17px 18px; white-space: nowrap; position: relative; text-decoration: none; }
.ks-tab:hover { color: var(--ks-dark); }
.ks-tab[aria-current="page"] { color: var(--ks-dark); }
.ks-tab[aria-current="page"]::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: 0; height: 3px; background: var(--ks-brand); border-radius: 3px 3px 0 0; }
.ks-section-title { font-weight: 800; font-size: var(--fs-3xl, 36px); color: var(--ks-dark); letter-spacing: -.01em; line-height: 1.1; margin: 0; }
.ks-section-sub { color: var(--ks-muted); margin: 8px 0 0; max-width: 64ch; }

/* ---------- TAB PAGE CONTENT ---------- */
.ks-body { padding: 40px 0 72px; }
.ks-panel { background: var(--ks-white); border: 1px solid var(--ks-line); border-radius: 14px; padding: 36px; }
.ks-panel-grid { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); gap: 44px; }
.ks-panel-grid.is-single { grid-template-columns: 1fr; }
.ks-main > * + * { margin-top: 34px; }
.ks-side > * + * { margin-top: 18px; }

/* Same panel when built with Elementor (section with the class ks-page-body). */
.ks-page-body { padding: 40px 0 72px !important; }
.ks-page-body > .elementor-container { display: grid !important; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); gap: 44px; width: calc(100% - 24px); max-width: 1296px; margin: 0 auto; background: var(--ks-white); border: 1px solid var(--ks-line); border-radius: 14px; padding: 36px; box-sizing: border-box; }
.ks-page-body > .elementor-container:has(> .elementor-column:only-child) { grid-template-columns: 1fr; }
.ks-page-body > .elementor-container > .elementor-column { width: auto !important; max-width: none; }
.ks-page-body > .elementor-container > .elementor-column > .elementor-widget-wrap { padding: 0 !important; align-content: flex-start; }
.ks-page-body .elementor-widget:not(:last-child) { margin-bottom: 34px; }
.ks-page-body .elementor-column + .elementor-column .elementor-widget:not(:last-child) { margin-bottom: 18px; }
@media (max-width: 1399px) { .ks-page-body > .elementor-container { max-width: 1116px; } }
@media (max-width: 1199px) { .ks-page-body > .elementor-container { max-width: 936px; } }
@media (max-width: 991px)  { .ks-page-body > .elementor-container { max-width: 696px; } }
@media (max-width: 767px)  { .ks-page-body > .elementor-container { max-width: 516px; } }

/* ---------- PHOTO CARDS (Sustainability overview) ---------- */
.ks-explore { padding: 48px 0 8px; }
.ks-explore-head { margin-bottom: 24px; }
.ks-explore-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 18px; }
.ks-ex-card { grid-column: span 2; position: relative; border-radius: 14px; overflow: hidden; min-height: 300px; display: flex; flex-direction: column; justify-content: flex-end; color: #fff; text-decoration: none; background: #1d2a22; }
.ks-ex-card.is-wide { grid-column: span 3; min-height: 340px; }
.ks-ex-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.ks-ex-card::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(0deg, rgba(17,17,17,.88) 0%, rgba(17,17,17,.35) 48%, rgba(17,17,17,0) 75%); }
.ks-ex-card:hover img { transform: scale(1.04); }
.ks-ex-card:hover { color: #fff; }
.ks-ex-body { position: relative; z-index: 2; padding: 24px; }
.ks-ex-body h3 { font-size: var(--fs-xl, 22px); font-weight: 800; line-height: 1.2; margin: 0; color: #fff; }
.ks-ex-body p { font-size: var(--fs-sm, 14px); color: #E4E6EA; margin: 6px 0 0; max-width: 46ch; }
.ks-ex-go { display: inline-flex; align-items: center; gap: 8px; margin-top: 12px; font-size: var(--fs-sm, 14px); font-weight: 600; color: var(--ks-brand-light); }
.ks-ex-card:hover .ks-ex-go { color: #fff; }

/* ---------- "In this section" parts (one shown at a time) ---------- */
.ks-off { display: none !important; }
.ks-next { margin: 8px 0 0; padding-top: 22px; border-top: 1px solid var(--ks-line); text-align: right; }
.ks-next a { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; color: var(--ks-brand-deep); text-decoration: none; }
.ks-next a span { font-weight: 500; color: var(--ks-muted); }
.ks-next a:hover { text-decoration: underline; }
.ks-nav a[aria-current="true"] { color: var(--ks-brand-deep); font-weight: 600; border-left-color: var(--ks-brand); }

/* ---------- PHOTOS IN THE CONTENT ---------- */
.ks-media { display: grid; gap: 14px; }
.ks-media--2 { grid-template-columns: 1fr 1fr; }
.ks-media--3 { grid-template-columns: repeat(3, 1fr); }
.ks-media figure { margin: 0; }
.ks-media img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 7; object-fit: cover; border-radius: 12px; background: #E9ECEF; }
.ks-media--2 img, .ks-media--3 img { aspect-ratio: 4 / 3; }
.ks-media figcaption { font-size: var(--fs-xs, 13px); color: var(--ks-muted); margin-top: 8px; }

/* ---------- CONTENT BLOCKS ---------- */
.ks-block, .ks-side-box { scroll-margin-top: var(--ks-sticky-top, 170px); }
.ks-h { font-weight: 700; font-size: var(--fs-xl, 22px); line-height: 1.3; color: var(--ks-dark); margin: 0 0 14px; letter-spacing: -.01em; }
.ks-prose { color: var(--ks-body); line-height: 1.75; }
.ks-prose p, .ks-prose li { margin: 0; max-width: 72ch; color: var(--ks-body); }
.ks-prose p + p, .ks-prose ul + p, .ks-prose p + ul { margin-top: 14px; }
.ks-prose h4 { font-size: var(--fs-base, 16px); font-weight: 700; color: var(--ks-dark); margin: 22px 0 8px; }
.ks-prose h4:first-child { margin-top: 0; }
.ks-prose ul { margin: 0; padding-left: 20px; }
.ks-prose li { margin: 4px 0; }
.ks-prose a { color: var(--ks-brand-deep); text-decoration: underline; }
.ks-text.is-lead .ks-h { font-size: var(--fs-xl, 22px); font-weight: 800; }
.ks-text.is-lead .ks-prose p { color: var(--ks-ink); }

/* figures */
.ks-stats { display: grid; grid-template-columns: repeat(var(--ks-n, 4), minmax(0, 1fr)); gap: 12px; margin: 0; }
.ks-stat { display: flex; flex-direction: column-reverse; justify-content: flex-end; gap: 4px; padding: 18px 16px; border: 1px solid var(--ks-line); border-top: 3px solid var(--ks-brand); border-radius: 10px; background: #FCFCFD; }
.ks-stat dd { margin: 0; font-size: var(--fs-stat, 32px); font-weight: 800; letter-spacing: -.02em; line-height: 1.1; color: var(--ks-dark); }
.ks-stat dd small { font-size: var(--fs-xs, 13px); font-weight: 600; color: var(--ks-brand-deep); margin-left: 4px; letter-spacing: 0; }
.ks-stat dt { font-size: var(--fs-xs, 13px); color: var(--ks-muted); line-height: 1.4; font-weight: 400; }

/* table */
.ks-table-wrap { overflow-x: auto; border: 1px solid var(--ks-line); border-radius: 10px; }
.ks-table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm, 14px); margin: 0; background: var(--ks-white); }
.ks-table th, .ks-table td { padding: 12px 14px; border: 0; border-bottom: 1px solid var(--ks-line); text-align: left; vertical-align: top; line-height: 1.5; }
.ks-table thead th { background: var(--ks-dark); color: #fff; font-weight: 600; font-size: var(--fs-xs, 13px); white-space: nowrap; }
.ks-table tbody th { font-weight: 600; color: var(--ks-dark); min-width: 160px; }
.ks-table tbody tr:last-child > * { border-bottom: 0; }
.ks-table tbody tr:nth-child(even) { background: #FAFAFB; }
.ks-table td { color: var(--ks-body); font-variant-numeric: tabular-nums; }
.ks-note { font-size: var(--fs-xs, 13px); color: var(--ks-muted); margin: 8px 0 0; }

/* icon cards */
.ks-cards { display: grid; gap: 14px; }
.ks-cards--1 { grid-template-columns: 1fr; }
.ks-cards--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ks-cards--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ks-cards--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.ks-card { display: block; border: 1px solid var(--ks-line); border-top: 3px solid var(--ks-brand); border-radius: 12px; padding: 20px; background: var(--ks-white); color: inherit; transition: border-color .15s, box-shadow .15s; }
a.ks-card:hover, .ks-card:hover { border-color: #F3B8BE; box-shadow: 0 10px 22px -16px rgba(0,0,0,.35); }
.ks-card .ks-ic, .ks-acc-item .ks-ic { width: 40px; height: 40px; border-radius: 10px; background: var(--ks-tint); color: var(--ks-brand-deep); display: grid; place-items: center; font-size: var(--fs-base, 16px); flex: 0 0 40px; }
.ks-card h4 { font-size: var(--fs-base, 16px); font-weight: 700; color: var(--ks-dark); margin: 0 0 6px; line-height: 1.35; }
.ks-card p { font-size: var(--fs-base, 16px); color: var(--ks-muted); margin: 0; line-height: 1.7; }

/* accordion */
.ks-acc { border-top: 1px solid var(--ks-line); }
.ks-acc-item { border-bottom: 1px solid var(--ks-line); }
.ks-acc-item summary { list-style: none; display: flex; align-items: center; gap: 14px; padding: 14px 4px; cursor: pointer; font-weight: 600; color: var(--ks-dark); }
.ks-acc-item summary::-webkit-details-marker { display: none; }
.ks-acc-item summary:hover .ks-acc-title { color: var(--ks-brand-deep); }
.ks-acc-title { flex: 1 1 auto; }
.ks-acc-chev { color: #9A9FA8; transition: transform .2s; }
.ks-acc-item[open] .ks-acc-chev { transform: rotate(180deg); color: var(--ks-brand); }
.ks-acc-body { padding: 0 4px 18px; }

/* roadmap */
.ks-roadmap { list-style: none; margin: 0; padding: 0; position: relative; }
.ks-roadmap::before { content: ""; position: absolute; left: 118px; top: 8px; bottom: 8px; width: 2px; background: var(--ks-line); }
.ks-roadmap li { display: grid; grid-template-columns: 104px 1fr; gap: 32px; padding: 0 0 22px; position: relative; }
.ks-roadmap li:last-child { padding-bottom: 0; }
.ks-roadmap li::before { content: ""; position: absolute; left: 112px; top: 5px; width: 14px; height: 14px; border-radius: 50%; background: var(--ks-white); border: 3px solid var(--ks-steel); }
.ks-roadmap li.is-goal::before { background: var(--ks-brand); border-color: var(--ks-brand); box-shadow: 0 0 0 5px rgba(238,51,66,.22); }
.ks-rm-when { text-align: right; }
.ks-rm-when b { display: block; font-size: var(--fs-base, 16px); font-weight: 800; color: var(--ks-dark); line-height: 1.3; }
.ks-rm-when span { font-size: var(--fs-xs, 13px); color: var(--ks-muted); }
.ks-rm-body h4 { font-size: var(--fs-base, 16px); font-weight: 700; color: var(--ks-dark); margin: 0 0 4px; }
.ks-rm-body p { margin: 0; font-size: var(--fs-base, 16px); color: var(--ks-body); line-height: 1.7; }

/* callout */
.ks-pull { margin: 0; border-left: 4px solid var(--ks-brand); background: #FAFAFB; padding: 16px 20px; border-radius: 0 10px 10px 0; font-size: var(--fs-base, 16px); line-height: 1.65; color: var(--ks-ink); }

/* side boxes */
.ks-side-box { background: var(--ks-paper); border-radius: 12px; padding: 22px; }
.ks-side-box .ks-h { font-size: var(--fs-base, 16px); }
.ks-side-box.is-sticky { position: sticky; top: var(--ks-sticky-top, 170px); }
.ks-page-body .elementor-widget:has(.ks-side-box.is-sticky) { position: sticky; top: var(--ks-sticky-top, 170px); }
.ks-page-body .elementor-widget:has(.ks-side-box.is-sticky) .ks-side-box.is-sticky { position: static; }
.ks-side-text { font-size: var(--fs-sm, 14px); color: var(--ks-muted); margin: -6px 0 10px; }
.ks-nav, .ks-gov, .ks-link-rows { list-style: none; margin: 0; padding: 0; }
.ks-nav li { border-left: 2px solid var(--ks-line); }
.ks-nav a { display: block; padding: 7px 0 7px 14px; font-size: var(--fs-sm, 14px); color: var(--ks-steel); line-height: 1.35; margin-left: -2px; border-left: 2px solid transparent; }
.ks-nav a:hover { color: var(--ks-dark); border-left-color: #C8CCD2; }
.ks-nav a.is-current { color: var(--ks-brand-deep); font-weight: 600; border-left-color: var(--ks-brand); }
.ks-gov li { display: block; align-items: flex-start; padding: 11px 0; border-bottom: 1px dashed #D6D9DE; font-size: var(--fs-sm, 14px); }
.ks-gov li:last-child { border-bottom: 0; }
.ks-gov i { color: var(--ks-brand-deep); margin-top: 4px; width: 16px; }
.ks-gov a { font-weight: 600; color: var(--ks-ink); }
.ks-gov a:hover { color: var(--ks-brand-deep); text-decoration: underline; }
.ks-link-rows a { display: grid; grid-template-columns: 1fr auto; gap: 14px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--ks-line); color: inherit; }
.ks-link-rows .ks-ic { width: 40px; height: 40px; border-radius: 8px; background: var(--ks-white); color: var(--ks-brand-deep); display: grid; place-items: center; }
.ks-link-rows b { display: block; font-weight: 600; color: var(--ks-ink); }
.ks-link-rows span span { font-size: var(--fs-sm, 14px); color: var(--ks-muted); }
.ks-chev { color: #9A9FA8; }
.ks-link-rows a:hover .ks-chev { color: var(--ks-brand); }
.ks-stat-row + .ks-stat-row { margin-top: 16px; padding-top: 16px; border-top: 1px dashed #D6D9DE; }
.ks-stat-big { font-size: var(--fs-stat, 32px); font-weight: 800; letter-spacing: -.02em; line-height: 1.1; color: var(--ks-dark); }
.ks-stat-big small { font-size: var(--fs-base, 16px); font-weight: 600; color: var(--ks-brand-deep); margin-left: 4px; letter-spacing: 0; }
.ks-stat-lbl { font-size: var(--fs-sm, 14px); color: var(--ks-muted); margin-top: 2px; }

/* documents */
.ks-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.ks-chip { font: inherit; font-size: var(--fs-sm, 14px); font-weight: 600; border: 1.5px solid var(--ks-line); background: var(--ks-white); color: var(--ks-muted); padding: 6px 14px; border-radius: 30px; cursor: pointer; }
.ks-chip:hover { border-color: var(--ks-steel); color: var(--ks-dark); }
.ks-chip[aria-pressed="true"] { background: var(--ks-dark); border-color: var(--ks-dark); color: #fff; }
.ks-docs { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--ks-line); }
.ks-doc { display: grid; grid-template-columns: 44px 1fr auto auto; gap: 16px; align-items: center; padding: 14px 4px; border-bottom: 1px solid var(--ks-line); }
.ks-doc:hover { background: #FAFAFB; }
.ks-doc-ic { width: 44px; height: 44px; border-radius: 8px; display: grid; place-items: center; font-size: var(--fs-lg, 18px); background: #EEEFF1; color: var(--ks-steel); }
.ks-doc-ic.is-pdf { background: #FCE9E4; color: #B4381A; }
.ks-doc-ic.is-ppt { background: #FDE8EA; color: var(--ks-brand-deep); }
.ks-doc-ic.is-excel { background: #E3F3EA; color: var(--ks-green); }
.ks-doc-ic.is-word { background: #E6EEFB; color: #1F4FA3; }
.ks-doc-title { font-weight: 600; color: var(--ks-ink); line-height: 1.35; }
.ks-doc-sub { font-size: var(--fs-xs, 13px); color: var(--ks-muted); }
.ks-doc-date { font-size: var(--fs-sm, 14px); color: var(--ks-muted); white-space: nowrap; }
.ks-dl { display: inline-flex; align-items: center; gap: 8px; font-size: var(--fs-sm, 14px); font-weight: 600; color: var(--ks-steel); padding: 8px 12px; border: 1.5px solid var(--ks-line); border-radius: 8px; white-space: nowrap; }
.ks-dl:hover { border-color: var(--ks-steel); background: var(--ks-tint); color: var(--ks-dark); }
.ks-empty { display: none; padding: 20px 4px; color: var(--ks-muted); font-size: var(--fs-base, 16px); margin: 0; }
.ks-empty.is-shown, .ks-empty.is-static { display: block; }
.ks-empty.is-static { background: var(--ks-paper); border-radius: 10px; padding: 18px 20px; }

/* ---------- STORIES ---------- */
.ks-stories { padding: 40px 0 64px; background: var(--ks-paper); }
.ks-stories-grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: 28px; margin-top: 22px; }
.ks-stories-grid.is-single { grid-template-columns: 1fr; }
.ks-story-lead { background: var(--ks-dark); color: #fff; border-radius: 14px; padding: 30px; display: flex; flex-direction: column; justify-content: space-between; min-height: 280px; position: relative; overflow: hidden; }
.ks-story-lead::after { content: ""; position: absolute; right: -60px; bottom: -60px; width: 220px; height: 220px; border-radius: 50%; border: 28px solid rgba(238,51,66,.18); }
.ks-story-lead:hover { color: #fff; }
.ks-kind { font-size: var(--fs-xs, 13px); color: var(--ks-brand-light); font-weight: 600; }
.ks-story-lead h3 { font-size: var(--fs-2xl, 28px); line-height: 1.15; margin: 10px 0 12px; max-width: 24ch; color: #fff; font-weight: 800; }
.ks-story-lead p { color: #D4D7DC; max-width: 52ch; font-size: var(--fs-base, 16px); margin: 0; }
.ks-story-lead .ks-more { margin-top: 22px; font-weight: 600; display: inline-flex; gap: 8px; align-items: center; position: relative; z-index: 1; }
.ks-story-lead:hover h3 { text-decoration: underline; text-underline-offset: 4px; }
.ks-story-list { list-style: none; margin: 0; background: var(--ks-white); border: 1px solid var(--ks-line); border-radius: 14px; padding: 6px 22px; }
.ks-story-list li { padding: 16px 0; border-bottom: 1px solid var(--ks-line); }
.ks-story-list li:last-child { border-bottom: 0; }
.ks-story-list a { font-weight: 600; line-height: 1.35; display: block; color: var(--ks-ink); }
.ks-story-list a:hover { color: var(--ks-brand-deep); text-decoration: underline; }
.ks-story-list small { color: var(--ks-muted); font-size: var(--fs-xs, 13px); }
.ks-link-all { display: inline-flex; align-items: center; gap: 8px; margin-top: 16px; font-weight: 600; color: var(--ks-steel); }
.ks-link-all:hover { color: var(--ks-brand-deep); text-decoration: underline; }

/* ---------- RESPONSIVE ---------- */
@media (max-width: 1000px) {
	.ks-hero-inner { min-height: 0; }
	.ks-panel-grid,
	.ks-page-body > .elementor-container { grid-template-columns: minmax(0, 1fr) !important; gap: 28px; }
	.ks-side-box.is-sticky, .ks-page-body .elementor-widget:has(.ks-side-box.is-sticky) { position: static; }
	.ks-stories-grid { grid-template-columns: 1fr; }
	.ks-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.ks-cards--3, .ks-cards--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.ks-ex-card, .ks-ex-card.is-wide { grid-column: span 3; min-height: 280px; }
}
@media (max-width: 720px) {
	.ks-hero-inner { padding-top: 120px; padding-bottom: 48px; }
	.ks-cards--2, .ks-cards--3, .ks-cards--4, .ks-media--2, .ks-media--3 { grid-template-columns: 1fr; }
	.ks-tab { padding: 14px 13px; font-size: var(--fs-sm, 14px); }
	.ks-body, .ks-page-body { padding: 24px 0 48px !important; }
	.ks-panel, .ks-page-body > .elementor-container { padding: 22px 16px; }
	.ks-explore-grid { grid-template-columns: 1fr; }
	.ks-ex-card, .ks-ex-card.is-wide { grid-column: auto; min-height: 240px; }
	.ks-media img { aspect-ratio: 4 / 3; }
	.ks-doc { grid-template-columns: 40px 1fr auto; gap: 12px; }
	.ks-doc-date { display: none; }
	.ks-dl span { display: none; }
	.ks-roadmap::before { left: 6px; }
	.ks-roadmap li { grid-template-columns: 1fr; gap: 6px; padding-left: 30px; }
	.ks-roadmap li::before { left: 0; }
	.ks-rm-when { text-align: left; display: flex; gap: 10px; align-items: baseline; }
	.ks-acc-body { padding-left: 4px; }
}
@media (max-width: 420px) {
	.ks-stats { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
	.ks-ex-card img, .ks-acc-chev { transition: none; }
}

/* ---------- DOCUMENTS: format badges ---------- */
.ks-docs-block.is-badge .ks-doc { grid-template-columns: 52px minmax(0, 1fr) auto auto; }
.ks-fmt { width: 52px; height: 40px; border-radius: 6px; display: grid; place-items: center; font-size: var(--fs-2xs, 11px); font-weight: 700; letter-spacing: .04em; border: 1.5px solid currentColor; background: #fff; color: var(--ks-steel); }
.ks-fmt.is-pdf { color: #B4381A; }
.ks-fmt.is-ppt { color: var(--ks-brand-deep); }
.ks-fmt.is-excel { color: var(--ks-green); }
.ks-fmt.is-word { color: #1F4FA3; }
.ks-docs-block.is-badge .ks-dl { color: var(--ks-dark); }
.ks-docs-block.is-badge .ks-dl:hover { border-color: var(--ks-brand); color: var(--ks-brand-deep); background: var(--ks-tint); }

@media (max-width: 720px) {
	.ks-docs-block.is-badge .ks-doc { grid-template-columns: 44px minmax(0, 1fr) auto; gap: 12px; }
	.ks-fmt { width: 44px; height: 36px; font-size: var(--fs-2xs, 11px); }
	.ks-docs-block.is-badge .ks-dl span { display: inline; }
}
.ks-prose ul, .kw-prose ul { list-style: disc; } .ks-prose li::marker, .kw-prose li::marker { color: var(--ks-brand); }

/* ---------- Photo cards: title on the image, text revealed on hover ---------- */
.ks-cards.is-photo { gap: 16px; }
.ks-pcard { position: relative; display: block; aspect-ratio: 3 / 4.5; border-radius: 12px; overflow: hidden; background: #1d2a22; color: #fff; isolation: isolate; outline-offset: 3px; }
.ks-pcard img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; z-index: -2; }
.ks-pcard::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(0deg, rgba(17,17,17,.9) 0%, rgba(17,17,17,.35) 45%, rgba(17,17,17,0) 72%); transition: background .45s ease; }
.ks-pcard-in { position: absolute; left: 0; right: 0; bottom: 0; padding: 22px 20px 20px; display: flex; flex-direction: column; }
.ks-pcard h4 { margin: 0; color: #fff; font-size: var(--fs-lg, 18px); font-weight: 700; line-height: 1.3; text-shadow: 0 1px 3px rgba(0,0,0,.45); }
.ks-pcard h4::after { content: ""; display: block; width: 38px; height: 3px; margin-top: 12px; background: var(--ks-brand); border-radius: 2px; transition: width .4s ease; }
.ks-pcard-rev { display: grid; grid-template-rows: 0fr; opacity: 0; transition: grid-template-rows .45s ease, opacity .35s ease, margin-top .45s ease; }
.ks-pcard-rev > span { min-height: 0; overflow: hidden; }
.ks-pcard-text { display: block; font-size: var(--fs-sm, 14px); line-height: 1.6; color: rgba(255,255,255,.92); }
.ks-pcard:hover .ks-pcard-rev, .ks-pcard:focus-visible .ks-pcard-rev, .ks-pcard:focus-within .ks-pcard-rev { grid-template-rows: 1fr; opacity: 1; margin-top: 12px; }
.ks-pcard:hover::before, .ks-pcard:focus-visible::before { background: linear-gradient(0deg, rgba(17,17,17,.95) 0%, rgba(17,17,17,.8) 60%, rgba(17,17,17,.45) 100%); }
.ks-pcard:hover h4::after { width: 64px; }
.ks-pcard:hover img { transform: scale(1.06); }
a.ks-pcard:hover { color: #fff; }
@media (hover: none) {
	.ks-pcard-rev { grid-template-rows: 1fr; opacity: 1; margin-top: 12px; }
	.ks-pcard::before { background: linear-gradient(0deg, rgba(17,17,17,.93) 0%, rgba(17,17,17,.65) 60%, rgba(17,17,17,.2) 100%); }
}
@media (max-width: 1000px) { .ks-cards--3.is-photo, .ks-cards--4.is-photo { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 720px) { .ks-cards.is-photo { grid-template-columns: 1fr !important; } .ks-pcard { aspect-ratio: 4 / 3.6; } }
@media (prefers-reduced-motion: reduce) { .ks-pcard-rev, .ks-pcard::before, .ks-pcard img, .ks-pcard h4::after { transition: none; } }
/* Photo fills the whole card, also inside Elementor (which sets img { height: auto }). */
.ks-pcard > img,
.elementor .ks-pcard > img,
.elementor-widget-container .ks-pcard > img { position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; max-width: none !important; max-height: none !important; object-fit: cover !important; border-radius: 0 !important; margin: 0 !important; }

/* ---------- UN Sustainable Development Goals ---------- */
.ks-sdg-intro { margin: -4px 0 22px; color: var(--ks-body); font-size: var(--fs-base, 16px); line-height: 1.75; max-width: 72ch; }
.ks-sdg-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.ks-sdg-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ks-sdg-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ks-sdg-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.ks-sdg-grid--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.ks-sdg-card { position: relative; aspect-ratio: 1 / 1; margin: 0 !important; padding: 0 !important; border-radius: 10px; background: #fff; box-shadow: 0 0 0 1px rgba(17,24,39,.08), 0 6px 18px -12px rgba(17,24,39,.35); cursor: pointer; outline: none; z-index: 1; transition: box-shadow .3s ease, z-index 0s .35s; }
.ks-sdg-card::before { display: none !important; }
.ks-sdg-card:focus-visible { box-shadow: 0 0 0 3px var(--sdg), 0 10px 24px -12px rgba(17,24,39,.45); }
.ks-sdg-face { position: absolute; inset: 0; display: flex; border-radius: 10px; overflow: hidden; }
.ks-sdg-face img, .ks-sdg-icon img, .ks-sdg-tile img { display: block; width: 100% !important; height: 100% !important; max-width: none !important; object-fit: cover; border-radius: 0 !important; }
.ks-sdg-fb { flex: 1; display: flex; flex-direction: column; justify-content: space-between; padding: 12%; background: var(--sdg); color: #fff; text-align: left; }
.ks-sdg-fb b { font-size: var(--kpc-heading-size); line-height: 1; font-weight: 800; }
.ks-sdg-fb small { font-size: var(--fs-xs, 13px); font-weight: 700; text-transform: uppercase; letter-spacing: .02em; line-height: 1.2; }
/* Hover / focus / tap: the tile zooms into a larger card that fits all its text (no scrolling). */
.ks-sdg-back { position: absolute; top: -8%; left: -25%; width: 150%; min-height: 116%; display: flex; flex-direction: column; padding: 20px 20px 18px; border-radius: 12px; background: var(--sdg); color: #fff; box-shadow: 0 24px 48px -18px rgba(17,24,39,.6); opacity: 0; visibility: hidden; transform: scale(.78); transform-origin: 50% 8%; transition: opacity .3s ease, transform .35s cubic-bezier(.2,.8,.2,1), visibility 0s .35s; pointer-events: none; text-align: left; }
.ks-sdg-card[data-edge="left"] .ks-sdg-back { left: 0; transform-origin: 0 8%; }
.ks-sdg-card[data-edge="right"] .ks-sdg-back { left: auto; right: 0; transform-origin: 100% 8%; }
.ks-sdg-card.is-light .ks-sdg-back { color: #1f1f1f; }
.ks-sdg-card:hover, .ks-sdg-card:focus, .ks-sdg-card:focus-within, .ks-sdg-card.is-open { z-index: 20; transition: box-shadow .3s ease, z-index 0s; }
.ks-sdg-card:hover .ks-sdg-back, .ks-sdg-card:focus .ks-sdg-back, .ks-sdg-card:focus-within .ks-sdg-back, .ks-sdg-card.is-open .ks-sdg-back { opacity: 1; visibility: visible; transform: none; pointer-events: auto; transition: opacity .3s ease, transform .35s cubic-bezier(.2,.8,.2,1), visibility 0s; }
.ks-sdg-eyebrow { font-size: var(--fs-xs, 13px); font-weight: 800; letter-spacing: .08em; text-transform: uppercase; opacity: .85; }
.ks-sdgs .ks-sdg-title { margin: 2px 0 10px; font-size: var(--fs-base, 16px); line-height: 1.3; font-weight: 800; color: inherit; }
.ks-sdg-list { list-style: none; margin: 0 !important; padding: 0 !important; display: grid; gap: 10px; }
.ks-sdg-list li { margin: 0 !important; padding: 10px 0 0 !important; border-top: 1px solid rgba(255,255,255,.35); font-size: var(--fs-sm, 14px) !important; line-height: 1.55 !important; }
.ks-sdg-card.is-light .ks-sdg-list li { border-top-color: rgba(0,0,0,.18); }
.ks-sdg-list li::before { display: none !important; }
.ks-sdg-list .ks-sdg-code { display: inline-block; margin-right: 6px; padding: 0 8px; border-radius: 999px; background: rgba(255,255,255,.22); font-size: 1em; font-weight: 800; line-height: 1.5; }
.ks-sdg-card.is-light .ks-sdg-code { background: rgba(0,0,0,.12); }
.ks-sdg-t { font-size: 1em; font-weight: 700; }
.ks-sdg-list p { margin: 4px 0 0 !important; font-size: 1em !important; line-height: 1.55 !important; color: inherit !important; text-align: justify; hyphens: auto; }
@media (hover: none) and (min-width: 481px) { .ks-sdg-card:focus:not(.is-open) .ks-sdg-back { opacity: 0; visibility: hidden; pointer-events: none; } }
@media (max-width: 1100px) { .ks-sdg-grid--4, .ks-sdg-grid--5 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 900px) { .ks-sdg-grid--3, .ks-sdg-grid--4, .ks-sdg-grid--5 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px) {
	.ks-sdg-grid { grid-template-columns: 1fr !important; }
	.ks-sdg-card { aspect-ratio: auto; display: grid; grid-template-columns: 96px 1fr; align-items: start; min-height: 96px; background: var(--sdg); }
	.ks-sdg-face { position: relative; inset: auto; width: 96px; height: 96px; }
	.ks-sdg-face .ks-sdg-fb small { display: none; }
	.ks-sdg-face .ks-sdg-fb { justify-content: center; align-items: center; }
	.ks-sdg-back, .ks-sdg-card[data-edge] .ks-sdg-back { position: relative; inset: auto; width: auto; min-height: 0; border-radius: 0; box-shadow: none; opacity: 1; visibility: visible; transform: none; pointer-events: auto; padding: 12px 14px; }
	.ks-sdg-face { border-radius: 10px 0 0 10px; }
	.ks-sdg-card { overflow: hidden; }
}

/* Panel layout: icon strip + detail panel */
.ks-sdg-picker { display: grid; grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); gap: 8px; margin-bottom: 18px; }
.ks-sdg-tile { position: relative; aspect-ratio: 1 / 1; padding: 0; border: 0; border-radius: 8px; overflow: hidden; background: #fff; box-shadow: 0 0 0 1px rgba(17,24,39,.1); cursor: pointer; opacity: .55; transition: opacity .2s ease, transform .2s ease, box-shadow .2s ease; }
.ks-sdg-tile .ks-sdg-fb { padding: 10%; } .ks-sdg-tile .ks-sdg-fb b { font-size: var(--fs-xl, 22px); } .ks-sdg-tile .ks-sdg-fb small { display: none; }
.ks-sdg-tile:hover, .ks-sdg-tile:focus-visible { opacity: 1; }
.ks-sdg-tile.is-active { opacity: 1; transform: translateY(-2px); box-shadow: 0 0 0 3px var(--sdg); }
.ks-sdg-panel { border-radius: 12px; border: 1px solid rgba(17,24,39,.08); border-top: 5px solid var(--sdg); background: #fff; padding: 22px; }
.ks-sdgs[data-sdgs].is-js .ks-sdg-panel:not(.is-active) { display: none; }
.ks-sdgs[data-sdgs]:not(.is-js) .ks-sdg-panel + .ks-sdg-panel { margin-top: 16px; }
.ks-sdgs:not(.is-js) .ks-sdg-nav { display: none; }
.ks-sdg-head { display: flex; align-items: center; gap: 18px; margin-bottom: 14px; }
.ks-sdg-icon { flex: 0 0 92px; width: 92px; height: 92px; border-radius: 8px; overflow: hidden; display: flex; box-shadow: 0 0 0 1px rgba(17,24,39,.08); }
.ks-sdg-hd { flex: 1; min-width: 0; }
.ks-sdg-panel .ks-sdg-eyebrow { color: var(--sdg); filter: brightness(.85); }
.ks-sdg-panel .ks-sdg-title { font-size: var(--fs-xl, 22px); margin: 2px 0 2px; color: #1f2933; }
.ks-sdg-count { font-size: var(--fs-sm, 14px); color: #6b7280; }
.ks-sdg-nav { display: flex; gap: 6px; }
.ks-sdg-nav button { width: 38px; height: 38px; border-radius: 50%; border: 1px solid rgba(17,24,39,.15); background: #fff; color: #1f2933; cursor: pointer; }
.ks-sdg-nav button:hover { background: var(--sdg); border-color: var(--sdg); color: #fff; }
.ks-sdg-rows { list-style: none; margin: 0 !important; padding: 0 !important; display: grid; gap: 12px; }
.ks-sdg-row { margin: 0 !important; padding: 0 !important; display: grid; grid-template-columns: 1fr 1.4fr; gap: 16px; border-top: 1px solid rgba(17,24,39,.08); padding-top: 14px !important; }
.ks-sdg-row::before { display: none !important; }
.ks-sdg-target { display: flex; gap: 10px; align-items: flex-start; }
.ks-sdg-panel .ks-sdg-code { flex: none; min-width: 44px; padding: 3px 8px; border-radius: 999px; background: var(--sdg); color: #fff; font-weight: 800; font-size: var(--fs-xs, 13px); text-align: center; }
.ks-sdg-target p, .ks-sdg-kpc p { margin: 0 !important; line-height: 1.5; }
.ks-sdg-target p { font-weight: 700; color: #1f2933; }
.ks-sdg-kpc-lbl { display: flex; align-items: center; gap: 6px; font-size: var(--fs-2xs, 11px); font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: #6b7280; margin-bottom: 4px; }
.ks-sdg-kpc-lbl i { color: var(--sdg); }
@media (max-width: 700px) { .ks-sdg-row { grid-template-columns: 1fr; gap: 8px; } .ks-sdg-head { flex-wrap: wrap; } .ks-sdg-icon { flex-basis: 72px; width: 72px; height: 72px; } }
.ks-sdg-tile { display: flex; }
.ks-sdgs .screen-reader-text { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }