/* ==========================================================================
   KLG Corporate v3: imported features
   Styles for the features brought over from the klg-system-client-update theme.
   They use the v2 tokens (colours, fonts, radii) from style.css and add no new design language.
   ========================================================================== */

/* 1. Logo walls ---------------------------------------------------------- */
.logo-wall { position: relative; }
.wall-tabs-wrap { position: relative; margin-bottom: 28px; }
.wall-tabs { display: flex; gap: 8px; padding: 2px; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.wall-tabs::-webkit-scrollbar { display: none; }
.wall-tab { flex: none; padding: 9px 16px; border: 1px solid var(--line); border-radius: 999px; background: var(--white); color: var(--ink); font: inherit; font-size: 0.9375rem; cursor: pointer; transition: background-color 0.2s ease, color 0.2s ease; }
.wall-tab span { margin-left: 4px; color: var(--slate); font-size: 0.8125rem; }
.wall-tab:hover { border-color: var(--navy-900); }
.wall-tab.is-active { border-color: var(--navy-900); background: var(--navy-900); color: var(--white); }
.wall-tab.is-active span { color: var(--steel); }
.wall-tab:focus-visible { outline: 2px solid var(--tally); outline-offset: 2px; }
.wall-tabs-wrap::before, .wall-tabs-wrap::after { content: ""; position: absolute; top: 0; bottom: 0; z-index: 2; width: 36px; opacity: 0; pointer-events: none; transition: opacity 0.2s ease; }
.wall-tabs-wrap::before { left: 0; background: linear-gradient(90deg, var(--bg, #fff), transparent); }
.wall-tabs-wrap::after { right: 0; background: linear-gradient(270deg, var(--bg, #fff), transparent); }
.wall-tabs-wrap.has-left::before, .wall-tabs-wrap.has-right::after { opacity: 1; }
.wall-group[hidden], .logo-grid li[hidden] { display: none; }
.wall-group:not([hidden]) ~ .wall-group:not([hidden]) { margin-top: 40px; }
.wall-group-title { margin-bottom: 16px; font-size: 1.125rem; }
.wall-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; margin-top: 20px; }
.wall-more[hidden], .wall-more-link[hidden] { display: none; }
/* Show less stays on screen while a long group is open. */
.wall-group.is-expanded .wall-more { position: sticky; bottom: 16px; z-index: 5; background: var(--white); box-shadow: 0 8px 22px rgba(11, 26, 61, 0.16); }
.logo-initials { display: grid; width: 56px; height: 56px; place-items: center; border-radius: 50%; background: var(--paper); color: var(--royal); font-family: var(--font-display); font-weight: 700; }
@media (max-width: 860px) { .wall-group-title { font-size: 1rem; } }

/* 2. Projects page: counts, sort, date, Show more --------------------------- */
.browser-bar { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 16px 32px; margin-bottom: 40px; }
.browser-bar .filters { margin: 0; }
.filters label span { margin-left: 4px; color: var(--slate); font-size: 0.8125rem; }
.filters label:has(:checked) span { color: var(--steel); }
.sort { display: flex; align-items: center; gap: 8px; padding-top: 28px; }
.sort-label { margin-right: 4px; color: var(--slate); font-size: 0.875rem; font-weight: 600; }
.sort-btn { padding: 9px 16px; border: 1px solid var(--line); border-radius: 999px; background: var(--white); color: var(--ink); font: inherit; font-size: 0.9375rem; cursor: pointer; }
.sort-btn:hover { border-color: var(--navy-900); }
.sort-btn.is-active { border-color: var(--navy-900); background: var(--navy-900); color: var(--white); }
.sort-btn:focus-visible { outline: 2px solid var(--tally); outline-offset: 2px; }
.project-date { display: flex; align-items: center; gap: 7px; margin-top: -2px; color: var(--slate); font-size: 0.875rem; }
.project-date .icon { width: 15px; height: 15px; color: var(--royal); }
.project-card[hidden] { display: none; }
.projects-more[hidden] { display: none; }
.projects-more.is-expanded { position: sticky; bottom: 16px; z-index: 5; background: var(--white); box-shadow: 0 8px 22px rgba(11, 26, 61, 0.16); }
@media (max-width: 860px) { .sort { padding-top: 0; } }

/* 3. Solution pages: clients, partners and project references ----------------- */
.solution-logos .wall-group-title { font-size: 1.125rem; }
.reference-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.reference-card { display: flex; flex-direction: column; gap: 8px; padding: 24px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--white); }
.reference-tag { align-self: flex-start; padding: 4px 10px; border-radius: 999px; background: var(--paper); color: var(--royal); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; }
.reference-card figure { display: grid; height: 96px; margin: 8px 0; place-items: center; }
.reference-card figure img { width: auto; max-width: 100%; max-height: 80px; object-fit: contain; }
.reference-client { color: var(--slate); font-size: 0.875rem; }
.reference-card h3 { font-size: 1.2rem; line-height: 1.25; }
.reference-card p:last-child { color: var(--slate); font-size: 0.9375rem; }
@media (max-width: 1080px) { .reference-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .reference-grid { grid-template-columns: 1fr; } }

/* 4. Awards, careers, footer extras, back to top, reveal --------------------- */
.award-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
.award-card { display: flex; flex-direction: column; gap: 14px; }
.award-open { display: block; padding: 0; border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper); cursor: zoom-in; overflow: hidden; }
.award-open figure { display: grid; aspect-ratio: 4 / 3; place-items: center; padding: 12px; }
.award-open img { width: 100%; height: 100%; object-fit: contain; }
.award-open:hover { border-color: var(--navy-900); }
.award-open:focus-visible { outline: 2px solid var(--tally); outline-offset: 2px; }
.award-body small { color: var(--royal); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
.award-body h3 { margin: 4px 0; font-size: 1.05rem; line-height: 1.3; }
.award-body p { color: var(--slate); font-size: 0.9rem; }
.award-dialog { width: min(94vw, 1000px); max-height: 94vh; padding: 0; overflow: auto; border: 0; border-radius: var(--radius); background: var(--navy-950); color: var(--white); }
.award-dialog::backdrop { background: rgba(6, 15, 38, 0.78); }
.award-dialog-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 24px 24px 16px; }
.award-dialog-head small { display: inline-block; margin-bottom: 8px; color: var(--royal-bright); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.award-dialog-head h3 { font-size: 1.4rem; }
.award-dialog-desc { margin-top: 6px; color: var(--steel); font-size: 0.95rem; }
.award-dialog-close { display: grid; flex: none; width: 44px; height: 44px; place-items: center; border: 1px solid var(--line-dark); border-radius: 50%; background: transparent; color: var(--white); cursor: pointer; }
.award-dialog-close:hover { background: var(--white); color: var(--navy-950); }
.award-dialog-panel { margin: 0 24px; padding: 12px; background: var(--paper); border-radius: var(--radius); }
.award-dialog-image { display: block; max-width: 100%; max-height: calc(94vh - 260px); margin: 0 auto; object-fit: contain; }
.award-dialog-original { display: inline-flex; margin: 16px 24px 24px; color: var(--white); }
.career-card { padding: 32px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper); }
.career-card p { margin: 10px 0 24px; color: var(--slate); }
.footer-social { display: flex; gap: 10px; margin-top: 16px; }
.footer-social a { display: grid; width: 38px; height: 38px; place-items: center; border: 1px solid var(--line-dark); border-radius: 50%; color: var(--steel); }
.footer-social a:hover { background: var(--white); color: var(--navy-950); }
.footer-social .icon { width: 18px; height: 18px; }
.back-to-top { position: fixed; z-index: 60; right: 20px; bottom: 20px; display: grid; width: 46px; height: 46px; place-items: center; border: 0; border-radius: 50%; background: var(--navy-900); color: var(--white); box-shadow: 0 8px 22px rgba(6, 15, 38, 0.3); cursor: pointer; opacity: 0; transform: translateY(8px); transition: opacity 0.25s ease, transform 0.25s ease, background-color 0.2s ease; }
.back-to-top[hidden] { display: none; }
.back-to-top.is-visible { opacity: 1; transform: none; }
.back-to-top:hover { background: var(--tally-strong); }
.back-to-top .icon { width: 20px; height: 20px; transform: rotate(-90deg); }
@media (prefers-reduced-motion: no-preference) {
	.reveal-item { transition: opacity 0.65s ease var(--d, 0s), transform 0.65s ease var(--d, 0s); }
	.reveal-item:not(.is-in) { opacity: 0; transform: translateY(22px); }
}
@media (max-width: 1080px) { .award-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 860px) { .award-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .award-dialog-head, .award-dialog-original { margin-left: 0; margin-right: 0; padding-left: 16px; padding-right: 16px; } .award-dialog-panel { margin: 0 16px; } }
@media (max-width: 480px) { .award-grid { grid-template-columns: 1fr; } }

/* 5. Project case study: facts icons, long-list limits, gallery, four layouts ---------- */
.facts dt { display: flex; align-items: center; gap: 10px; }
.fact-icon { display: inline-grid; flex: none; width: 22px; height: 22px; place-items: center; color: var(--royal); }
.fact-icon svg { width: 20px; height: 20px; }
.is-dark .fact-icon { color: var(--royal-bright); }
.limit-group:not(.is-expanded) > .is-extra { display: none; }
.case-more { display: flex; justify-content: center; margin-top: 28px; }
.case-more[hidden], .limit-more[hidden], .gallery-more[hidden] { display: none; }
.limit-more.is-expanded, .gallery-more.is-expanded { position: sticky; bottom: 16px; z-index: 5; background: var(--white); box-shadow: 0 8px 22px rgba(11, 26, 61, 0.16); }
.is-dark .limit-more { color: var(--white); }
.is-dark .limit-more:hover { color: var(--navy-950); }
.is-dark .limit-more.is-expanded { color: var(--navy-950); }

/* Gallery: four across, a short last row stays centred */
.case-gallery { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; }
.case-gallery li { flex: 0 0 calc((100% - 48px) / 4); min-width: 0; }
.case-gallery li[hidden] { display: none; }
.case-gallery a { cursor: zoom-in; }
.gallery-dialog { width: min(94vw, 1100px); max-height: 94vh; padding: 0; overflow: hidden; border: 0; border-radius: var(--radius); background: var(--navy-950); color: var(--white); }
.gallery-dialog::backdrop { background: rgba(6, 15, 38, 0.82); }
.gallery-dialog-bar { display: flex; align-items: center; justify-content: space-between; padding: 14px 20px; }
.gallery-dialog-count { color: var(--steel); font-size: 0.9rem; }
.gallery-dialog-close { display: grid; width: 40px; height: 40px; place-items: center; border: 1px solid var(--line-dark); border-radius: 50%; background: transparent; color: var(--white); font-size: 1.5rem; line-height: 1; cursor: pointer; }
.gallery-dialog-close:hover { background: var(--white); color: var(--navy-950); }
.gallery-dialog-stage { position: relative; display: grid; place-items: center; padding: 0 20px 20px; }
.gallery-dialog-image { display: block; max-width: 100%; max-height: calc(94vh - 110px); object-fit: contain; border-radius: var(--radius-sm); }
.gallery-nav { position: absolute; top: 50%; z-index: 2; display: grid; width: 46px; height: 46px; place-items: center; transform: translateY(-50%); border: 1px solid var(--line-dark); border-radius: 50%; background: rgba(6, 15, 38, 0.8); color: var(--white); font-size: 1.8rem; line-height: 1; cursor: pointer; }
.gallery-nav:hover { background: var(--white); color: var(--navy-950); }
.gallery-prev { left: 32px; }
.gallery-next { right: 32px; }

/* Showcase cards */
.showcase-cards { display: flex; flex-wrap: wrap; justify-content: center; gap: 24px; }
.showcase-card { display: flex; flex: 0 0 calc((100% - 48px) / 3); flex-direction: column; gap: 10px; min-width: 0; padding: 28px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--white); }
.showcase-card h3 { font-size: 1.2rem; line-height: 1.25; }
.showcase-card .case-icon { display: inline-grid; width: 48px; height: 48px; place-items: center; border-radius: var(--radius); background: var(--paper); }
.case-number { font-family: var(--font-display); font-size: 0.85rem; font-weight: 700; }
.showcase-card .specs { margin-top: 8px; }
.showcase-card:not(.is-expanded) .is-extra-spec { display: none; }
.card-more { align-self: flex-start; margin-top: 6px; padding: 0 0 2px; border: 0; border-bottom: 2px solid var(--tally); background: none; color: var(--ink); font: inherit; font-weight: 600; cursor: pointer; }
.impact-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 56px; align-items: start; }
.impact-label { display: block; margin-bottom: 14px; color: var(--royal-bright); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; }
.impact-outcome { padding: 36px 40px; border: 1px solid var(--line-dark); border-left: 3px solid var(--tally); border-radius: var(--radius); background: var(--highlight); }
.impact-outcome p { font-family: var(--font-display); font-size: clamp(1.2rem, 2vw, 1.6rem); font-weight: 600; line-height: 1.4; }
.case-eyebrow { margin-bottom: 12px; color: var(--royal-bright); font-size: 0.85rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; }

/* Sidebar layout */
.hero-compact { min-height: 0; }
.case-layout-grid { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 56px; align-items: start; }
.case-main { min-width: 0; }
.case-main .container { max-width: none; padding-inline: 0; }
.case-main .section { padding-block: clamp(40px, 5vw, 64px); }
.case-main .case-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.case-main .split, .case-main .split-wide, .case-main .split-media { grid-template-columns: minmax(0, 1fr); }
.case-aside { position: sticky; top: calc(var(--header-h) + 24px); display: grid; gap: 20px; margin-block: clamp(40px, 5vw, 64px); }
.case-aside-card { padding: 24px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--white); }
.case-aside-card h2 { margin-bottom: 8px; font-size: 1.15rem; }
.case-aside-cta { display: grid; gap: 12px; padding: 24px; border-radius: var(--radius); background: var(--navy-950); color: var(--white); }
.case-aside-cta h2 { font-size: 1.15rem; }
.case-aside-cta p { color: var(--steel); font-size: 0.95rem; }

/* Story layout */
.hero-tall { min-height: min(78vh, 720px); }
.hero-tall .hero-content { padding-bottom: clamp(96px, 12vw, 140px); }
.case-facts-strip { position: relative; z-index: 3; margin-top: -56px; }
.facts-strip { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border: 1px solid var(--line); border-radius: var(--radius); background: var(--white); box-shadow: 0 18px 44px rgba(11, 26, 61, 0.12); }
.facts-strip > div { grid-template-columns: minmax(0, 1fr); gap: 4px; padding: 22px 24px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.facts-strip > div:nth-child(3n) { border-right: 0; }
.facts-strip > div:nth-last-child(-n + 3) { border-bottom: 0; }
.case-layout-story .case-overview { padding-top: clamp(72px, 9vw, 112px); }
.case-layout-story .entry-content { font-size: 1.15rem; }

@media (max-width: 1080px) {
	.case-layout-grid { grid-template-columns: minmax(0, 1fr); gap: 0; }
	.case-aside { position: static; order: -1; margin-bottom: 0; }
	.case-aside-cta { display: none; }
	.case-main .case-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.impact-grid { grid-template-columns: minmax(0, 1fr); gap: 32px; }
	.showcase-card { flex-basis: calc((100% - 24px) / 2); }
	.facts-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.facts-strip > div:nth-child(3n) { border-right: 1px solid var(--line); }
	.facts-strip > div:nth-child(2n) { border-right: 0; }
	.facts-strip > div:nth-last-child(-n + 3) { border-bottom: 1px solid var(--line); }
	.facts-strip > div:nth-last-child(-n + 2) { border-bottom: 0; }
}
@media (max-width: 600px) {
	.case-gallery li { flex-basis: calc((100% - 16px) / 2); }
	.gallery-prev { left: 28px; }
	.gallery-next { right: 28px; }
	.gallery-nav { width: 40px; height: 40px; }
	.showcase-card { flex-basis: 100%; padding: 22px; }
	.case-main .case-grid { grid-template-columns: minmax(0, 1fr); }
	.facts-strip { grid-template-columns: minmax(0, 1fr); }
	.facts-strip > div, .facts-strip > div:nth-child(2n), .facts-strip > div:nth-child(3n) { border-right: 0; border-bottom: 1px solid var(--line); }
	.facts-strip > div:last-child { border-bottom: 0; }
	.impact-outcome { padding: 26px 22px; }
	.case-facts-strip { margin-top: -36px; }
}

.is-dark .checklist li { border-top-color: var(--line-dark); color: rgba(255, 255, 255, 0.88); }
.is-dark .checklist .icon { color: var(--tally); }

/* Logged-in view: keep the sticky header fully visible below the WordPress admin bar */
.admin-bar { --adminbar-h: 32px; }
.admin-bar .site-header { top: var(--adminbar-h); }
.admin-bar { scroll-padding-top: calc(var(--header-h) + var(--adminbar-h) + 12px); }
html:has(body.admin-bar) { scroll-padding-top: calc(var(--header-h) + 32px + 12px); }
.admin-bar .case-aside { top: calc(var(--header-h) + var(--adminbar-h) + 24px); }
@media (max-width: 782px) {
	.admin-bar { --adminbar-h: 46px; }
	html:has(body.admin-bar) { scroll-padding-top: calc(var(--header-h) + 46px + 12px); }
}
@media (max-width: 600px) {
	/* the admin bar scrolls away on small screens */
	.admin-bar { --adminbar-h: 0px; }
	html:has(body.admin-bar) { scroll-padding-top: calc(var(--header-h) + 12px); }
}

/* Home hero: slogan and buttons centred */
.hero-home .hero-content { justify-items: center; text-align: center; }
.hero-home .hero-content .actions { justify-content: center; }
.hero-home .hero-content { flex: 1 1 auto; width: 100%; align-content: center; padding-block: clamp(48px, 6vw, 80px); }
.hero-home .hero-content .display { line-height: 1.13; }

/* Solution grids: a short last row is centred (4 across on desktop, 3 on the Solutions page, 2 on tablet) */
@media (min-width: 1081px) {
	.solution-grid { grid-template-columns: repeat(8, minmax(0, 1fr)); }
	.solution-grid > li { grid-column: span 2; }
	.solution-grid > li:nth-child(4n+1):nth-last-child(3) { grid-column: 2 / span 2; }
	.solution-grid > li:nth-child(4n+1):nth-last-child(2) { grid-column: 3 / span 2; }
	.solution-grid > li:nth-child(4n+1):last-child { grid-column: 4 / span 2; }
	.catalogue-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
	.catalogue-grid > li { grid-column: span 2; }
	.catalogue-grid > li:nth-child(3n+1):nth-last-child(2) { grid-column: 2 / span 2; }
	.catalogue-grid > li:nth-child(3n+1):last-child { grid-column: 3 / span 2; }
}
@media (min-width: 601px) and (max-width: 1080px) {
	.solution-grid, .catalogue-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
	.solution-grid > li, .catalogue-grid > li { grid-column: span 2; }
	.solution-grid > li:nth-child(2n+1):last-child, .catalogue-grid > li:nth-child(2n+1):last-child { grid-column: 2 / span 2; }
}

/* Partner marquee: logos in their real colours */
.marquee-track img { filter: none; opacity: 1; }
.logo-band { background: var(--white); border-block: 0; }
.logo-band { padding-block: 40px; }

/* Home projects: the original showcase layout (one large card, two stacked) */
.home-project-grid { display: grid; grid-template-columns: 4fr 3fr; grid-template-rows: repeat(2, minmax(0, 1fr)); gap: 12px; }
.home-project-card { position: relative; display: block; min-height: 286px; overflow: hidden; background: var(--navy-900); color: var(--ink); border-radius: var(--radius); }
.home-project-card:first-child { grid-row: 1 / 3; min-height: 588px; }
.home-project-card > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease; }
.home-project-card:hover > img { transform: scale(1.03); }
.home-project-panel { position: absolute; right: 0; bottom: 0; left: 0; display: block; padding: 16px 22px 18px; background: rgba(255, 255, 255, 0.86); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.home-project-panel strong { display: block; color: var(--navy-950); font-family: var(--font-display); font-size: clamp(0.95rem, 1.2vw, 1.15rem); font-weight: 700; line-height: 1.2; }
.home-project-excerpt { display: -webkit-box; margin-top: 6px; overflow: hidden; color: var(--slate); font-size: 0.85rem; line-height: 1.4; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.home-project-card:not(:first-child) .home-project-excerpt { display: none; }
.home-project-meta { display: block; margin-top: 8px; overflow: hidden; color: var(--navy-950); font-size: 0.75rem; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.home-project-link { display: inline-flex; align-items: center; gap: 6px; margin-top: 8px; color: var(--royal); font-size: 0.8rem; font-weight: 700; }
.home-project-link svg { width: 14px; height: 14px; }
@media (max-width: 1020px) {
	.home-project-grid { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; }
	.home-project-card, .home-project-card:first-child { grid-row: auto; min-height: 340px; }
}

/* Category chips: smaller text, centred; on desktop the ones that do not fit move into a "More" filter menu */
.wall-tabs { justify-content: safe center; }
.wall-tab { padding: 7px 12px; font-size: 0.8125rem; }
.wall-tab span { margin-left: 3px; font-size: 0.6875rem; }
.wall-filter { position: static; flex: none; }
.wall-filter[hidden], .wall-filter-menu[hidden] { display: none; }
.wall-filter-button { display: inline-flex; align-items: center; gap: 6px; }
.wall-filter-button b { font-weight: 400; }
.wall-filter-menu { position: absolute; top: calc(100% - 6px); right: 0; z-index: 20; display: grid; gap: 6px; min-width: 320px; padding: 10px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--white); box-shadow: 0 14px 34px rgba(11, 26, 61, 0.16); }
.wall-filter-menu .wall-tab { display: flex; justify-content: space-between; gap: 16px; width: 100%; text-align: left; }
.wall-tabs { overflow: visible; }
.wall-tabs-wrap::before, .wall-tabs-wrap::after { display: none; }
.wall-filter-menu { width: min(320px, calc(100vw - 32px)); min-width: 0; }

/* Logo walls: five per row; a short last row is centred (each cell carries its own border) */
.wall-grid { display: flex; flex-wrap: wrap; justify-content: center; padding: 0; border: 0; }
.wall-grid li { flex: 0 0 20%; min-width: 0; margin: 0; border: 0; }
@media (max-width: 1080px) {
	.wall-grid li { flex-basis: 25%; }
}
@media (max-width: 600px) {
	.wall-grid li { flex-basis: 33.3333%; }
	.wall-grid li { padding-inline: 8px; }
	.wall-grid li > span { font-size: 0.68rem; }
}

/* Closing call to action: photo card (original client-update design) */
.cta-card-band { --cta-prev: var(--white); position: relative; z-index: 2; padding: 42px 0 70px; background: linear-gradient(to bottom, var(--cta-prev) 0 50%, var(--navy-950) 50% 100%); }
.section-paper + .cta-card-band { --cta-prev: var(--paper); }
.is-dark + .cta-card-band { --cta-prev: var(--navy-950); }
.cta-card { display: grid; grid-template-columns: minmax(250px, 0.42fr) minmax(0, 1fr); max-width: 1040px; margin: 0 auto; overflow: hidden; align-items: stretch; background: var(--white); border: 1px solid rgba(7, 26, 46, 0.1); border-radius: 5px; box-shadow: 0 18px 45px rgba(1, 18, 34, 0.2); color: var(--ink); }
.cta-card-image { min-height: 282px; margin: 0; overflow: hidden; background: var(--paper); }
.cta-card-image img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
.cta-card-copy { padding: 30px 34px; }
.cta-card h2 { max-width: 620px; margin: 0; color: var(--navy-950); font-size: clamp(1.8rem, 3vw, 2.7rem); line-height: 1.08; letter-spacing: -0.045em; }
.cta-card h2 + p { max-width: 620px; margin: 16px 0 0; color: var(--slate); line-height: 1.55; }
.cta-card .actions { margin-top: 24px; }
.cta-card .btn-outline { color: var(--ink); border-color: var(--line); }
@media (max-width: 900px) {
	.cta-card { grid-template-columns: minmax(0, 1fr); }
	.cta-card-image { min-height: 210px; }
	.cta-card-copy { padding: 27px 24px 29px; text-align: center; }
	.cta-card h2, .cta-card h2 + p { max-width: 100%; }
	.cta-card .actions { justify-content: center; }
}
@media (max-width: 600px) {
	.cta-card-band { padding: 30px 0 46px; }
	.cta-card .actions { display: grid; width: min(100%, 330px); margin-inline: auto; }
	.cta-card .btn { width: 100%; }
}

/* Buttons: the fully rounded (pill) corners of the original klg-system-client-update theme */
.btn, .header-cta, .sort-btn { border-radius: 999px; }

/* Logo walls: every cell has the same height, so rows are evenly spaced and Show more never shifts */
.wall-grid li { align-content: start; justify-items: center; grid-template-rows: 64px auto; gap: 10px; min-height: 0; height: 142px; padding: 14px 16px; }
.wall-grid li > img, .wall-grid li > .logo-initials { align-self: center; max-height: 60px; }
.wall-grid li > span { display: block; min-height: 2.7em; text-align: center; }

/* Sticky chips and Show more: each sits on a white layer (space above and below) so scrolling logos never show through */
.wall-tabs-wrap { position: sticky; top: calc(var(--header-real, var(--header-h)) + var(--adminbar-h, 0px)); z-index: 30; margin-bottom: 8px; padding: 14px 0; background: var(--white); }
/* Show less only sticks once the list is open (the visitor is scrolling through it); closed, Show more stays in place under the rows. */
.wall-group.is-expanded .wall-actions { position: sticky; bottom: 0; z-index: 25; margin-top: 0; padding: 16px 0; background: var(--white); }
.wall-group.is-expanded .wall-more { position: static; box-shadow: none; }

/* Delivery path (original client-update design): four photo cards stepping down, joined by connectors */
.process-flow { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 0; padding: 0; list-style: none; }
.process-flow > li { position: relative; min-width: 0; padding-right: 32px; }
.process-flow > li:nth-child(2) { margin-top: 54px; }
.process-flow > li:nth-child(3) { margin-top: 108px; }
.process-flow > li:nth-child(4) { margin-top: 162px; }
.process-flow-step { position: relative; z-index: 1; display: block; overflow: hidden; background: var(--white); border: 1px solid var(--line); border-radius: 5px; box-shadow: 0 14px 30px rgba(7, 26, 46, 0.08); }
.process-flow-image { position: relative; margin: 0; overflow: hidden; aspect-ratio: 5 / 3; background: var(--navy-900); }
.process-flow-image::after { position: absolute; inset: 35% 0 0; background: linear-gradient(transparent, rgba(4, 19, 34, 0.86)); content: ""; }
.process-flow-image img { width: 100%; height: 100%; object-fit: cover; }
.process-flow-image figcaption { position: absolute; z-index: 1; right: 18px; bottom: 16px; left: 18px; }
.process-flow-label { margin: 0 0 5px; color: #bfd0ff; font-size: 0.64rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; }
.process-flow h3 { margin: 0; color: var(--white); font-size: 1.08rem; line-height: 1.12; }
.process-flow-description { margin: 0; padding: 17px 18px 20px; color: var(--slate); font-size: 0.875rem; line-height: 1.55; }
.process-flow-connector { position: absolute; z-index: 2; top: 82px; left: calc(100% - 32px); width: 24px; height: 58px; color: var(--royal); pointer-events: none; }
.process-flow-connector svg { display: block; width: 100%; height: 100%; overflow: visible; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2.5; }
.process-flow-connector circle { fill: var(--paper); stroke-width: 2.5; }
.process-flow-mobile-elbow { display: none; }
@media (max-width: 1020px) {
	.process-flow { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
	.process-flow > li, .process-flow > li:nth-child(n) { margin-top: 0; padding: 0; }
	.process-flow-connector { display: none; }
}
@media (max-width: 720px) {
	.process-flow { grid-template-columns: minmax(0, 1fr); gap: 14px; padding-left: 30px; }
	.process-flow-mobile-elbow { position: absolute; z-index: 2; top: 31px; left: -24px; display: block; width: 24px; height: 2px; background: var(--royal); }
	.process-flow-mobile-elbow::before { position: absolute; top: -6px; left: -7px; width: 13px; height: 13px; box-sizing: border-box; background: var(--white); border: 3px solid var(--royal); border-radius: 50%; box-shadow: 0 0 0 4px var(--paper); content: ""; }
	.process-flow > li:not(:last-child)::after { position: absolute; z-index: 1; top: 31px; bottom: -45px; left: -24px; width: 2px; background: linear-gradient(var(--royal), #b7c3ff); content: ""; }
}

/* Call-to-action card: text about 10% smaller */
.cta-card h2 { font-size: clamp(1.62rem, 2.7vw, 2.43rem); }
.cta-card h2 + p { font-size: 1.0125rem; }
.cta-card .btn { font-size: 0.9rem; }
.cta-card .btn-tally { box-shadow: 0 10px 20px rgba(209, 18, 28, 0.28); }
.cta-card .btn-tally:hover { box-shadow: 0 14px 26px rgba(209, 18, 28, 0.34); }

/* Button hover (as in the original client-update theme): lift, a deeper colour and a stronger shadow */
.btn { transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease; }
.btn:hover, .btn:focus-visible { transform: translateY(-2px); }
.btn-tally:hover, .btn-tally:focus-visible { background: #a90d15; box-shadow: 0 14px 28px rgba(209, 18, 28, 0.32); }
.btn-ink:hover, .btn-ink:focus-visible { box-shadow: 0 12px 26px rgba(39, 57, 144, 0.3); }
/* outline buttons on light backgrounds: white fill and a soft shadow; on dark backgrounds they fill white */
.btn-outline:hover, .btn-outline:focus-visible { box-shadow: 0 12px 26px rgba(11, 26, 61, 0.16); }
:not(.is-dark) > .btn-outline:hover, :not(.is-dark) .btn-outline:hover { background: var(--white); color: var(--ink); border-color: var(--navy-900); }
.is-dark .btn-outline:hover { background: var(--white); color: var(--navy-950); border-color: var(--white); }
.cta-card .btn-outline:hover { background: var(--white); color: var(--ink); border-color: var(--navy-900); }
/* chips and sort buttons */
.wall-tab, .sort-btn { transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease; }
.wall-tab:not(.is-active):hover, .sort-btn:not(.is-active):hover { background: var(--paper); border-color: var(--navy-900); box-shadow: 0 6px 16px rgba(11, 26, 61, 0.1); }
@media (prefers-reduced-motion: reduce) {
	.btn:hover, .btn:focus-visible { transform: none; }
}

/* Swoop in from the right (home introduction and partner strip) */
.from-right, #page-home { overflow-x: clip; }
@media (prefers-reduced-motion: no-preference) {
	.from-right .reveal-item, .from-right.reveal-item { transition: opacity 0.9s cubic-bezier(0.22, 1, 0.36, 1) var(--d, 0s), transform 0.9s cubic-bezier(0.22, 1, 0.36, 1) var(--d, 0s); }
	.from-right .reveal-item:not(.is-in), .from-right.reveal-item:not(.is-in) { opacity: 0; transform: translateX(120px); }
	.from-right .reveal-item:nth-child(2) { --d: 0.15s; }
}

/* Tablet: the solution row wraps into a grid so all seven solutions are visible without scrolling;
   four equal cells on the first row, three equal cells filling the full width on the second */
@media (min-width: 601px) and (max-width: 1180px) {
	.channels-list { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); overflow: visible; }
	.channels-list li { grid-column: span 3; flex: none; border-left: 1px solid var(--line-dark); }
	.channels-list li:nth-child(n + 5) { grid-column: span 4; border-top: 1px solid var(--line-dark); }
	.channels-list li:nth-child(1), .channels-list li:nth-child(5) { border-left: 0; }
	.channels-list a, .channels-list li:first-child a { padding: 16px 18px 18px; }
	.channels-list li:nth-child(1) a, .channels-list li:nth-child(5) a { padding-left: 0; }
	/* the line between the rows runs to both screen edges, like the strip's top line and the stats dividers */
	.channels-list li { position: relative; }
	.channels-list li:nth-child(5)::before, .channels-list li:nth-child(7)::before { position: absolute; top: -1px; width: 100vw; height: 1px; background: var(--line-dark); content: ""; }
	.channels-list li:nth-child(5)::before { right: 100%; }
	.channels-list li:nth-child(7)::before { left: 100%; }
}

/* Trust strip: icon tile, large figure and an uppercase caption (adapted from the original client-update theme) */
.stats-trust { background: var(--navy-900); border-top: 1px solid var(--line-dark); border-bottom: 0; color: var(--white); }
.stats-trust .stats-list > div { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "icon number" "icon label"; align-items: center; column-gap: 18px; row-gap: 4px; padding: 26px 24px; }
.stats-trust .stats-list > div:first-child { padding-left: 0; }
.stats-trust .stats-list > div + div { border-left: 1px solid var(--line-dark); }
.stat-icon { grid-area: icon; display: grid; width: 58px; height: 58px; place-items: center; border-radius: 5px; background: rgba(255, 255, 255, 0.08); color: var(--white); }
.stat-icon svg { width: 28px; height: 28px; }
.stats-trust dd { grid-area: number; align-self: end; margin: 0; color: var(--white); font-family: var(--font-display); font-size: clamp(1.4rem, 2.6vw, 2.3rem); font-weight: 800; line-height: 1; letter-spacing: -0.03em; white-space: nowrap; }
.stats-trust dt { grid-area: label; align-self: start; color: var(--steel); font-size: 0.78rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
@media (max-width: 1080px) {
	.stats-trust .stats-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.stats-trust .stats-list > div { padding: 22px 20px; }
	.stats-trust .stats-list > div:nth-child(odd) { padding-left: 0; border-left: 0; }
	.stats-trust .stats-list > div:nth-child(n + 3) { border-top: 1px solid var(--line-dark); }
}
@media (max-width: 600px) {
	.stat-icon { width: 48px; height: 48px; border-radius: 5px; }
	.stat-icon svg { width: 24px; height: 24px; }
	.stats-trust .stats-list > div { column-gap: 12px; padding: 18px 10px; }
	.stats-trust dt { font-size: 0.68rem; letter-spacing: 0.05em; }
	.stats-trust dd { font-size: 1.15rem; }
}

/* Home projects: the large card rises from the left, the two side cards arrive from the right one after the other;
   on hover the photo zooms and the caption panel lifts */
.projects-feature { overflow-x: clip; }
@media (prefers-reduced-motion: no-preference) {
	.home-project-card.reveal-item { transition: opacity 0.8s cubic-bezier(0.22, 1, 0.36, 1) var(--d, 0s), transform 0.8s cubic-bezier(0.22, 1, 0.36, 1) var(--d, 0s); }
	.home-project-card.reveal-item:not(.is-in) { opacity: 0; transform: translateX(-60px); }
	.home-project-card.reveal-item:not(.is-in):nth-child(n + 2) { transform: translateX(60px); }
	.home-project-card.reveal-item:nth-child(2) { --d: 0.15s; }
	.home-project-card.reveal-item:nth-child(3) { --d: 0.3s; }
	.home-project-panel { transition: transform 0.35s ease, background-color 0.35s ease; }
	.home-project-card:hover .home-project-panel, .home-project-card:focus-visible .home-project-panel { transform: translateY(-6px); background: rgba(255, 255, 255, 0.95); }
	.home-project-link svg { transition: transform 0.25s ease; }
	.home-project-card:hover .home-project-link svg { transform: translateX(4px); }
}

/* Brand lockup (as in the original client-update theme): full company name over an uppercase, letter-spaced tagline */
.brand { gap: 13px; }
.brand-logo { width: 84px; }
.brand-text { font-size: 1.3rem; font-weight: 800; letter-spacing: -0.01em; line-height: 1.15; }
.brand-text small { margin-top: 3px; font-family: var(--font-display); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; }
@media (max-width: 600px) {
	.brand { gap: 10px; }
	.brand-logo { width: 62px; }
	.brand-text { font-size: 0.98rem; }
	.brand-text small { font-size: 0.58rem; letter-spacing: 0.12em; }
}

/* Home solution cards on tablet: three across (3 + 3 + 1 centred), with shorter photos */
@media (min-width: 601px) and (max-width: 1080px) {
	.solution-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 32px 18px; }
	.solution-grid > li { grid-column: span 2; }
	.solution-grid > li:nth-child(2n+1):last-child { grid-column: span 2; }
	.solution-grid > li:nth-child(3n+1):last-child { grid-column: 3 / span 2; }
	.solution-grid .solution-card figure { aspect-ratio: 4 / 3; }
	.solution-grid .solution-card strong, .solution-grid .solution-card h3 { font-size: 1rem; }
}

/* Phone hero: buttons fit their text (side by side, centred) and sit about 30% further below the headline */
@media (max-width: 600px) {
	.hero-home .hero-content { gap: 31px; }
	.hero-home .hero-content .actions { width: auto; justify-content: center; }
	.hero-home .hero-content .btn { flex: 0 0 auto; width: auto; }
}

/* Phone: the solution row is a two-column grid so every solution is visible; the last one spans the full width */
@media (max-width: 600px) {
	.channels-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); overflow: visible; }
	.channels-list li, .channels-list li + li { flex: none; border-left: 0; border-top: 1px solid var(--line-dark); }
	.channels-list li:nth-child(-n + 2) { border-top: 0; }
	.channels-list li:nth-child(even), .channels-list li + li:nth-child(even) { border-left: 1px solid var(--line-dark); }
	.channels-list li:last-child:nth-child(odd) { grid-column: 1 / -1; }
	.channels-list a, .channels-list li:first-child a { padding: 14px 16px 16px; font-size: 0.9rem; }
}

/* Phone: the solution grid sits below the hero image on its own solid band, so it never covers the hero */
@media (max-width: 600px) {
	.hero-home { min-height: 0; }
	.hero-home .hero-content { min-height: clamp(560px, calc(100svh - 77px), 820px); align-content: center; }
	.hero-home .channels { background: var(--navy-950); -webkit-backdrop-filter: none; backdrop-filter: none; }
}
@media (max-width: 600px) {
	/* the photo fills only the hero area above the solution band, at its original size */
	.hero-home .hero-media { inset: 0 0 auto 0; height: clamp(560px, calc(100svh - 77px), 820px); }
}
@media (max-width: 600px) {
	/* the single last solution is centred under the pairs */
	.channels-list li:last-child:nth-child(odd) a { align-items: center; text-align: center; }
}

/* Phone: each solution card is two columns, photo on the left and text on the right */
@media (max-width: 600px) {
	.solution-grid { gap: 20px; }
	.solution-card a { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); align-items: center; gap: 16px; }
	.solution-card figure { aspect-ratio: 1.25 / 1; }
	.solution-card-body { padding-top: 0; border-top: 0; align-content: center; }
	.solution-card-body strong { font-size: 1.05rem; }
	.solution-card-body > span { font-size: 0.85rem; line-height: 1.5; }
}

/* Phone: each solution card is two columns, photo on the left and text on the right */
@media (max-width: 600px) {
	.solution-grid { gap: 20px; }
	.solution-card:not(.solution-card-cta) a { box-sizing: border-box; height: auto; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); align-items: center; gap: 16px; border-radius: 0; background: transparent; }
	.solution-card figure { aspect-ratio: 1.25 / 1; }
	.solution-card-body { padding-top: 0; border-top: 0; align-content: center; }
	.solution-card-body strong { font-size: 1.05rem; }
	.solution-card-body > span { font-size: 0.85rem; line-height: 1.5; }
}

/* Delivery path to call-to-action: about 20% less space between the two */
.process-section { padding-bottom: calc(var(--section) * 0.8); }
.process-section + .cta-card-band { padding-top: 34px; }

/* Solution detail hero: about 30% taller (the photo shows more above and below the headline) */
.hero-solution .hero-content { min-height: 658px; align-content: center; }
@media (max-width: 1080px) { .hero-solution .hero-content { min-height: 391px; } }
@media (max-width: 600px) { .hero-solution .hero-content { min-height: 439px; } }
.hero-solution .title-accent { display: block; color: #ee1b24; }

/* Solution page sections from the original client-update design (Audio System), in the v3 palette ----------- */
.sd-title { max-width: none; margin: 0; color: var(--navy-900); font-family: var(--font-display); font-size: clamp(2rem, 4.5vw, 3.65rem); font-weight: 800; line-height: 1.08; letter-spacing: -0.04em; }
.sd-accent { color: #ee1b24; }
.sd-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(36px, 6vw, 88px); align-items: center; }
.sd-copy { min-width: 0; }
.sd-copy .sd-title { max-width: 16em; font-size: clamp(1.9rem, 3.7vw, 3.1rem); }
.sd-lead { margin: 22px 0 0; color: var(--slate); font-size: 1.05rem; line-height: 1.65; }
.sd-photo { height: 100%; min-height: 0; margin: 0; overflow: hidden; border-radius: 5px; box-shadow: 0 24px 56px rgba(11, 26, 61, 0.14); }
.sd-photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.sd-photo-contain { background: var(--white); }
.sd-photo-contain img { object-fit: contain; padding: 4px; }
.sd-note { margin: 28px 0 0; padding: 10px 0 10px 20px; border-left: 3px solid #ee1b24; color: var(--navy-900); font-size: 1.05rem; line-height: 1.55; }
.sd-icon { display: grid; width: 64px; height: 64px; flex: none; place-items: center; border-radius: 50%; background: linear-gradient(135deg, var(--royal), var(--navy-900)); color: var(--white); box-shadow: 0 10px 22px rgba(39, 57, 144, 0.28); }
.sd-icon svg { width: 30px; height: 30px; }

/* overview list: icon, title, line, separated by hairlines */
.sd-why { display: grid; margin: 34px 0 0; padding: 0; border-top: 1px solid var(--line); list-style: none; }
.sd-why li { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 22px; align-items: center; padding: 18px 0; border-bottom: 1px solid var(--line); }
.sd-why h3 { margin: 0 0 4px; color: var(--ink); font-size: 1.08rem; }
.sd-why p { margin: 0; color: var(--slate); font-size: 0.95rem; line-height: 1.55; }
.sd-why .sd-icon { width: 56px; height: 56px; }

/* three photos with chevron labels, plus two label-only items */
.sd-photos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 36px; margin: 48px 0 0; padding: 0; list-style: none; }
.sd-photos li { display: grid; align-content: start; gap: 18px; padding-bottom: 22px; }
.sd-photos li:nth-child(n + 4) { padding-top: 22px; border-top: 1px solid var(--line); }
.sd-photos figure { margin: 0; overflow: hidden; border-radius: 5px; aspect-ratio: 4 / 3; box-shadow: 0 18px 40px rgba(11, 26, 61, 0.12); }
.sd-photos img { display: block; width: 100%; height: 100%; object-fit: cover; }
.sd-photos h3 { position: relative; margin: 0; padding-left: 28px; color: var(--navy-900); font-size: 1.2rem; font-weight: 650; }
.sd-photos h3::before { position: absolute; top: 0.5em; left: 4px; width: 9px; height: 9px; border-top: 2.5px solid #ee1b24; border-right: 2.5px solid #ee1b24; content: ""; transform: translateY(-50%) rotate(45deg); }

/* ecosystem ladder: blue icon block + white card, on a vertical rail */
.sd-ladder { position: relative; display: grid; gap: 18px; margin: 34px 0 0; padding: 0 0 0 36px; list-style: none; }
.sd-ladder::before { position: absolute; top: 14px; bottom: 14px; left: 0; width: 4px; border-radius: 4px; background: var(--royal); content: ""; }
.sd-ladder li { display: grid; grid-template-columns: 94px minmax(0, 1fr); overflow: hidden; border-radius: 5px; background: var(--white); box-shadow: 0 10px 26px rgba(11, 26, 61, 0.08); }
.sd-ladder-icon { display: grid; min-height: 112px; place-items: center; background: var(--royal); color: var(--white); }
.sd-ladder-icon svg { width: 34px; height: 34px; }
.sd-ladder div { display: grid; align-content: center; gap: 6px; padding: 14px 22px; }
.sd-ladder h3 { margin: 0; color: var(--navy-900); font-size: 1.12rem; }
.sd-ladder p { margin: 0; color: var(--slate); font-size: 0.98rem; }

/* everyday use: icon cards in two columns, the last one centred */
.sd-uses { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; margin: 28px 0 0; padding: 0; list-style: none; }
.sd-uses li { display: grid; flex: 0 0 calc(50% - 8px); justify-items: center; align-content: center; gap: 14px; padding: 26px 16px; border: 1px solid var(--line); border-radius: 5px; background: var(--white); text-align: center; }
.sd-uses h3 { margin: 0; color: var(--ink); font-size: 1.05rem; font-weight: 650; }
.sd-uses .sd-icon { width: 60px; height: 60px; }
.sd-uses .sd-icon svg { width: 28px; height: 28px; }

@media (max-width: 1080px) {
	.sd-split { grid-template-columns: minmax(0, 1fr); gap: 36px; }
	.sd-photo { height: auto; aspect-ratio: 16 / 10; }
	.sd-photo-contain { aspect-ratio: 4 / 3; }
	.sd-title { max-width: none; }
	.sd-photos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
	.sd-photos { grid-template-columns: minmax(0, 1fr); }
	.sd-photos li:nth-child(n + 4) { border-top: 1px solid var(--line); }
	.sd-ladder { padding-left: 22px; }
	.sd-ladder li { grid-template-columns: 70px minmax(0, 1fr); }
	.sd-ladder-icon { min-height: 96px; }
	.sd-uses li { flex-basis: 100%; }
}

/* Sign-off call to action (solution pages): copy on the left, photo fading in from the right */
.cta-signoff { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); max-width: 1240px; min-height: 380px; }
.cta-signoff-copy { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; padding: clamp(30px, 4.5vw, 56px); }
.cta-signoff h2 { max-width: 560px; margin: 0; color: var(--navy-900); font-size: clamp(1.8rem, 3.6vw, 3rem); line-height: 1.08; letter-spacing: -0.04em; }
.cta-card.cta-signoff h2 + p { margin-top: 18px; }
.cta-signoff-lead { max-width: 440px; margin: 18px 0 0; color: var(--royal); font-size: 1.05rem; line-height: 1.6; }
.cta-signoff-rule { display: block; width: 120px; height: 3px; margin: 24px 0 20px; background: #ee1b24; }
.cta-card .cta-signoff-company { max-width: none; margin: 0 0 14px; color: var(--royal); font-size: 1.05rem; font-weight: 800; letter-spacing: 0.02em; text-transform: uppercase; }
.cta-signoff-tel { display: inline-flex; align-items: center; gap: 14px; color: var(--ink); text-decoration: none; }
.cta-signoff-tel-icon { display: grid; width: 44px; height: 44px; place-items: center; border-radius: 50%; background: #ee1b24; color: var(--white); }
.cta-signoff-tel-icon svg { width: 21px; height: 21px; }
.cta-signoff-tel small { display: block; color: var(--slate); font-size: 0.78rem; font-weight: 700; }
.cta-signoff-tel strong { font-size: 1.1rem; }
.cta-signoff .actions { align-items: center; gap: 22px; margin-top: 26px; }
.cta-signoff-back { color: var(--royal); font-size: 0.95rem; font-weight: 700; text-decoration: none; }
.cta-signoff-back:hover { text-decoration: underline; }
.cta-signoff-visual { position: relative; min-height: 0; margin: 0; overflow: hidden; }
.cta-signoff-visual::before { position: absolute; inset: 0 auto 0 0; z-index: 1; width: 45%; background: linear-gradient(90deg, var(--white), rgba(255, 255, 255, 0)); content: ""; }
.cta-signoff-visual img { display: block; width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 900px) {
	.cta-signoff { grid-template-columns: minmax(0, 1fr); }
	.cta-signoff-copy { align-items: center; text-align: center; }
	.cta-signoff .actions { justify-content: center; }
	.cta-signoff-visual { order: -1; height: 220px; }
	.cta-signoff-visual::before { inset: auto 0 0 0; width: auto; height: 45%; background: linear-gradient(0deg, var(--white), rgba(255, 255, 255, 0)); }
}

/* Audio overview ("Engineered around your space"): about 20% shorter */
#audio-overview { padding-block: 66px; }
#audio-overview .sd-why { margin-top: 26px; }
#audio-overview .sd-why li { padding-block: 14px; }
#audio-overview .sd-note { margin-top: 22px; }
@media (max-width: 1080px) { #audio-overview { padding-block: 52px; } }
@media (max-width: 600px) { #audio-overview { padding-block: 40px; } #audio-overview .sd-split { gap: 26px; } }

/* Audio solutions ("Audio solutions for the way you work"): about 20% shorter */
[aria-labelledby="audio-solutions-title"] { padding-block: 68px; }
[aria-labelledby="audio-solutions-title"] .sd-photos { margin-top: 36px; }
[aria-labelledby="audio-solutions-title"] .sd-photos figure { aspect-ratio: 16 / 10; }
@media (max-width: 1080px) { [aria-labelledby="audio-solutions-title"] { padding-block: 52px; } }
@media (max-width: 600px) { [aria-labelledby="audio-solutions-title"] { padding-block: 40px; } [aria-labelledby="audio-solutions-title"] .sd-photos li { gap: 14px; padding-bottom: 16px; } }

/* Audio ecosystem ("A complete audio ecosystem"): about 20% shorter */
[aria-labelledby="audio-ecosystem-title"] { padding-block: 64px; }
[aria-labelledby="audio-ecosystem-title"] .sd-ladder { margin-top: 28px; gap: 14px; }
[aria-labelledby="audio-ecosystem-title"] .sd-ladder-icon { min-height: 94px; }
[aria-labelledby="audio-ecosystem-title"] .sd-ladder div { padding-block: 10px; }
[aria-labelledby="audio-ecosystem-title"] .sd-note { margin-top: 22px; }
@media (max-width: 1080px) { [aria-labelledby="audio-ecosystem-title"] { padding-block: 52px; } }
@media (max-width: 600px) { [aria-labelledby="audio-ecosystem-title"] { padding-block: 40px; } [aria-labelledby="audio-ecosystem-title"] .sd-ladder-icon { min-height: 80px; } [aria-labelledby="audio-ecosystem-title"] .sd-split { gap: 26px; } }

/* Audio everyday use ("Designed for everyday communication"): about 20% shorter */
[aria-labelledby="audio-everyday-title"] { padding-block: 64px; }
[aria-labelledby="audio-everyday-title"] .sd-lead { margin-top: 16px; }
[aria-labelledby="audio-everyday-title"] .sd-uses { gap: 12px; margin-top: 22px; }
[aria-labelledby="audio-everyday-title"] .sd-uses li { flex-basis: calc(50% - 6px); gap: 10px; padding-block: 16px; }
@media (max-width: 1080px) { [aria-labelledby="audio-everyday-title"] { padding-block: 52px; } }
@media (max-width: 600px) { [aria-labelledby="audio-everyday-title"] { padding-block: 40px; } [aria-labelledby="audio-everyday-title"] .sd-uses li { flex-basis: 100%; padding-block: 12px; } [aria-labelledby="audio-everyday-title"] .sd-split { gap: 26px; } }

/* Solution pages: closer spacing between Trusted clients, project references and Technology partners */
.solution-logos, .project-references { padding-bottom: 48px; }
.solution-logos + .section, .project-references + .section { padding-top: 48px; }
@media (max-width: 600px) { .solution-logos, .project-references { padding-bottom: 32px; } .solution-logos + .section, .project-references + .section { padding-top: 32px; } }
.logo-wall-plain .wall-group-title { display: none; }

/* Navigation bar: the original dark navy colours, keeping the roomier size and the Home link */
:root { --header-h: 88px; }
.brand { gap: 16px; }
.brand-logo { width: 70px; }
.brand-text { font-size: 1.08rem; letter-spacing: -0.01em; }
.brand-text small { margin-top: 3px; font-size: 0.58rem; letter-spacing: 0.15em; }
.header-cta { min-height: 50px; padding-inline: 1.7em; font-size: 1rem; }
@media (min-width: 1081px) { .site-nav { gap: 24px; } .menu { gap: 10px; } .menu-link { padding-block: 32px; font-size: 1.02rem; } }
/* phone: hamburger menu and one brand lockup (the tablet uses the desktop bar, below) */
@media (max-width: 767px) { :root { --header-h: 76px; } .brand { gap: 12px; } .brand-logo { width: 62px; } .brand-text { font-size: 1rem; } .brand-text small { display: block; font-size: 0.54rem; letter-spacing: 0.14em; } }

/* Phone and tablet menu (original client-update style): a white panel sliding in from the right, Solutions as an accordion */
.mega-all { display: none; }
@media (max-width: 767px) {
	body.nav-open::before { position: fixed; inset: 0; z-index: 90; background: rgba(6, 15, 38, 0.55); content: ""; }
	.site-nav { position: fixed; inset: var(--nav-top, var(--header-h)) 0 0 auto; z-index: 99; display: flex; visibility: hidden; flex-direction: column; align-items: stretch; gap: 0; width: 60vw; margin: 0; padding: 18px 20px 28px; overflow-y: auto; background: var(--navy-950); border-left: 1px solid var(--line-dark); box-shadow: -18px 0 44px rgba(0, 0, 0, 0.45); transform: translateX(100%); transition: transform 0.3s ease, visibility 0s linear 0.3s; }
	.nav-open .site-nav { display: flex; visibility: visible; transform: none; transition: transform 0.3s ease; }
	.menu { gap: 0; }
	.menu-item { border-bottom: 0; }
	.site-nav .menu-link { width: auto; padding: 13px 0; color: var(--white); font-size: 1.08rem; font-weight: 700; }
	.site-nav .menu-link[aria-current]::after { display: block; position: absolute; right: auto; bottom: 8px; left: 0; width: 100%; height: 2px; border-radius: 0; background: var(--tally); content: ""; transform: none; opacity: 1; }
	.site-nav .has-mega > .menu-link { display: flex; width: 100%; justify-content: space-between; }
	.site-nav .has-mega > .menu-link .icon { display: inline-block; width: 18px; height: 18px; transition: transform 0.2s ease; }
	.site-nav .has-mega.is-open > .menu-link .icon { transform: rotate(180deg); }
	.site-nav .has-mega > .menu-link[aria-current]::after { width: 3.2em; }
	/* accordion: the solution list is hidden until Solutions is tapped */
	.site-nav .mega { display: none; position: static; visibility: visible; opacity: 1; transform: none; background: none; border: 0; box-shadow: none; }
	.site-nav .has-mega.is-open > .mega { display: block; }
	.site-nav .mega-inner { display: block; padding: 0; }
	.site-nav .mega-list { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; margin: 2px 0 10px 4px; padding: 4px 0 4px 16px; border-left: 2px solid var(--line-dark); list-style: none; }
	.site-nav .mega-list li { border: 0; }
	.site-nav .mega-list a { display: flex; align-items: center; gap: 10px; padding: 8px 0; color: #c4cce0; background: none; border: 0; font-weight: 600; }
	.site-nav .mega-list a::before { width: 6px; height: 6px; flex: none; border-radius: 50%; background: var(--tally); content: ""; }
	.site-nav .mega-list a:hover, .site-nav .mega-list a:focus-visible { background: none; color: var(--white); }
	.site-nav .mega-list strong { color: inherit; font-size: 0.93rem; font-weight: 600; }
	.site-nav .mega-list span { display: none; }
	.site-nav .mega-all { display: block; }
	.site-nav .mega-all strong { color: var(--white); font-weight: 750; }
	.site-nav .header-cta { align-self: stretch; margin-top: 16px; background: var(--tally-strong); }
	.site-nav .header-cta:hover { background: #a90d15; }
}
@media (max-width: 767px) {
	/* the solutions sit in a lighter block under "Solutions", so they read as its children */
	.site-nav .has-mega.is-open > .menu-link { color: var(--white); }
	.site-nav .mega-list { margin: 2px -8px 12px -8px; padding: 10px 12px 10px 16px; border: 0; border-radius: 5px; background: var(--navy-800); }
	.site-nav .mega-list a { color: #dbe2f5; }
	.site-nav .mega-all { padding-bottom: 6px; margin-bottom: 4px; border-bottom: 1px solid var(--line-dark); }
}
@media (max-width: 767px) {
	/* bullets start deeper than the "Solutions" label; the dot stays on the first line of a wrapped name */
	.site-nav .mega-list { margin: 4px -8px 12px -8px; padding: 8px 14px 8px 30px; }
	.site-nav .mega-list a { position: relative; display: block; padding: 8px 0 8px 18px; line-height: 1.35; }
	.site-nav .mega-list a::before { position: absolute; top: 1.05em; left: 0; }
	.site-nav .mega-all { margin-bottom: 2px; padding-bottom: 4px; }
	.site-nav .mega-all a { padding-bottom: 10px; }
}
@media (max-width: 767px) {
	/* the block starts exactly where the "Solutions" label starts and ends where its chevron ends */
	.site-nav .mega-list { margin: 4px 0 12px 0; padding: 8px 12px 8px 22px; }
}
@media (max-width: 767px) { .site-nav .mega-list { padding: 8px 10px 8px 16px; } .site-nav .mega-list a { padding-left: 16px; } .site-nav .mega-list strong { font-size: 0.9rem; } }
@media (max-width: 767px) { .site-nav .mega-list { padding: 8px 8px 8px 20px; } .site-nav .mega-list a { padding-left: 14px; } .site-nav .mega-list strong { font-size: 0.88rem; } }
@media (max-width: 767px) {
	/* even rhythm: every solution row has the same padding, and "All solutions" has no extra gap or divider */
	.site-nav .mega-list li, .site-nav .mega-all { margin: 0; padding: 0; border: 0; }
	.site-nav .mega-list a, .site-nav .mega-all a { padding: 10px 0 10px 14px; }
	.site-nav .mega-list a::before { top: calc(10px + 0.675em - 3px); }
	.site-nav .mega-list { padding-block: 6px; }
}
@media (max-width: 767px) {
	/* top-level items share one rhythm; the open solutions block adds the same space above and below */
	.site-nav .menu-link { padding-block: 12px; }
	.site-nav .mega-list { margin: 2px 0 6px 0; }
	.site-nav .header-cta { margin-top: 14px; }
}
/* shorter screens: tighter rows so every item, including Contact us, is visible without scrolling */
@media (max-width: 767px) and (max-height: 760px) {
	.site-nav { padding-block: 10px 16px; }
	.site-nav .menu-link { padding-block: 8px; font-size: 1.02rem; }
	.site-nav .mega-list { padding-block: 3px; }
	.site-nav .mega-list a, .site-nav .mega-all a { padding-block: 5px; }
	.site-nav .mega-list a::before { top: calc(5px + 0.675em - 3px); }
	.site-nav .mega-list strong { font-size: 0.84rem; }
	.site-nav .header-cta { min-height: 42px; margin-top: 10px; }
}
@media (max-width: 767px) and (max-height: 680px) {
	.site-nav .menu-link { padding-block: 6px; }
	.site-nav .mega-list a, .site-nav .mega-all a { padding-block: 4px; }
	.site-nav .mega-list a::before { top: calc(4px + 0.675em - 3px); }
	.site-nav .mega-list { margin-block: 0 4px; }
	.site-nav .header-cta { margin-top: 8px; }
}
/* the menu panel scrolls on very short screens, but without a visible scrollbar */
@media (max-width: 767px) { .site-nav { scrollbar-width: none; -ms-overflow-style: none; } .site-nav::-webkit-scrollbar { display: none; width: 0; } }
/* Smooth accordion: the list eases open and shut (measured height, plus a fade), and the chevron turns with it */
@media (max-width: 767px) {
	.site-nav .mega, .site-nav .has-mega.is-open > .mega { display: block; height: 0; overflow: hidden; opacity: 0; grid-template-rows: none; transition: height 0.4s ease, opacity 0.3s ease; }
	.site-nav .has-mega.is-open > .mega { height: auto; opacity: 1; }
	.site-nav .mega-inner { overflow: visible; }
	.site-nav .has-mega > .menu-link .icon { transition: transform 0.4s ease; }
}
@media (max-width: 767px) and (prefers-reduced-motion: reduce) {
	.site-nav .mega, .site-nav .has-mega > .menu-link .icon { transition: none; }
}
/* Closing the whole menu is smooth too: the panel slides out and the dimmed page fades back */
@media (max-width: 767px) {
	body::before { position: fixed; inset: 0; z-index: 90; background: rgba(6, 15, 38, 0.55); content: ""; opacity: 0; pointer-events: none; transition: opacity 0.3s ease; }
	body.nav-open::before { opacity: 1; pointer-events: auto; }
	.site-nav { transition: transform 0.3s ease, visibility 0s linear 0.3s; }
	.nav-open .site-nav { transition: transform 0.3s ease, visibility 0s; }
}
@media (max-width: 767px) and (prefers-reduced-motion: reduce) { body::before, .site-nav, .nav-open .site-nav { transition: none; } }
/* the panel leaves a little slower so the Solutions list can be seen folding shut */
@media (max-width: 767px) { .site-nav { transition: transform 0.42s ease, visibility 0s linear 0.42s; } body::before { transition: opacity 0.42s ease; } }
/* The desktop hover/focus rules must not touch the phone and tablet accordion: with a mouse over the link (or focus
   left on it after a click) they forced the list and chevron to stay "open" and replaced the closing transition. */
@media (max-width: 767px) {
	.site-nav .has-mega > .mega, .site-nav .has-mega:hover > .mega, .site-nav .has-mega:focus-within > .mega { display: block; visibility: visible; height: 0; overflow: hidden; opacity: 0; transform: none; transition: height 0.4s ease, opacity 0.3s ease; }
	.site-nav .has-mega.is-open > .mega, .site-nav .has-mega.is-open:hover > .mega, .site-nav .has-mega.is-open:focus-within > .mega { height: auto; opacity: 1; }
	.site-nav .has-mega > .menu-link .icon, .site-nav .has-mega:hover > .menu-link .icon, .site-nav .has-mega:focus-within > .menu-link .icon { transform: none; transition: transform 0.4s ease; }
	.site-nav .has-mega.is-open > .menu-link .icon, .site-nav .has-mega.is-open:hover > .menu-link .icon, .site-nav .has-mega.is-open:focus-within > .menu-link .icon { transform: rotate(180deg); }
}
@media (max-width: 767px) and (prefers-reduced-motion: reduce) { .site-nav .has-mega > .mega, .site-nav .has-mega:hover > .mega, .site-nav .has-mega:focus-within > .mega, .site-nav .has-mega .menu-link .icon { transition: none; } }

/* Tablet (768px to 1080px): the same horizontal bar as desktop (Home, Solutions with its hover panel, Projects, About us,
   Contact us), tightened to fit. The hamburger and the slide-in panel are for phones only. */
@media (min-width: 768px) and (max-width: 1080px) {
	:root { --header-h: 72px; }
	.nav-toggle { display: none; }
	.site-header { background: rgba(6, 15, 38, 0.94); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
	.brand { gap: 10px; }
	.brand-logo { width: 56px; }
	.brand-text { font-size: 0.98rem; }
	.brand-text small { display: block; margin-top: 2px; font-size: 0.54rem; letter-spacing: 0.14em; }
	.header-inner { gap: 16px; }
	.site-nav { position: static; inset: auto; display: flex; visibility: visible; flex-direction: row; align-items: center; gap: 14px; width: auto; margin: 0 0 0 auto; padding: 0; overflow: visible; background: none; border: 0; box-shadow: none; transform: none; transition: none; }
	.menu { flex-direction: row; align-items: center; gap: 0; }
	.menu-item { border-bottom: 0; }
	.menu-link { width: auto; padding: 24px 10px; font-size: 0.94rem; }
	.menu-link .icon { display: inline-block; }
	.menu-link::after { display: block; }
	.mega { position: absolute; left: 0; right: 0; top: 100%; background: var(--navy-900); border-top: 1px solid var(--line-dark); border-bottom: 3px solid var(--tally); box-shadow: 0 30px 60px rgba(0, 0, 0, 0.35); visibility: hidden; opacity: 0; transform: translateY(-6px); }
	.mega-inner { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2.2fr); gap: 28px; padding-block: 28px 32px; }
	.mega-intro { display: block; }
	.mega-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 22px; }
	.mega-list span { display: block; }
	.mega-all { display: none; }
	.header-cta { align-self: auto; min-height: 42px; padding-inline: 1.15em; font-size: 0.92rem; }
}
@media (min-width: 768px) and (max-width: 1080px) {
	.menu-link, .header-cta { white-space: nowrap; }
	.menu-link { padding-inline: 9px; font-size: 0.92rem; }
	.header-cta { padding-inline: 1.05em; font-size: 0.9rem; }
	.site-nav { gap: 10px; }
	.brand-text { font-size: 0.92rem; }
	.mega-inner { padding-inline: var(--gutter); }
}
/* Tablet: the Solutions dropdown opens by click only (no hover or focus opening, no redirect) */
@media (min-width: 768px) and (max-width: 1080px) {
	.has-mega:hover > .mega, .has-mega:focus-within > .mega { visibility: hidden; opacity: 0; transform: translateY(-6px); }
	.has-mega.is-open > .mega, .has-mega.is-open:hover > .mega, .has-mega.is-open:focus-within > .mega { visibility: visible; opacity: 1; transform: none; transition: opacity 0.18s, transform 0.18s; }
	.has-mega:hover > .menu-link .icon, .has-mega:focus-within > .menu-link .icon { transform: none; }
	.has-mega.is-open > .menu-link .icon, .has-mega.is-open:hover > .menu-link .icon, .has-mega.is-open:focus-within > .menu-link .icon { transform: rotate(180deg); }
}

/* Phone: the everyday-use cards become compact two-across tiles (the last one centred) */
@media (max-width: 600px) {
	[aria-labelledby="audio-everyday-title"] .sd-uses { gap: 10px; margin-top: 18px; }
	[aria-labelledby="audio-everyday-title"] .sd-uses li { flex: 0 0 calc(50% - 5px); gap: 8px; padding: 14px 8px; border-radius: 5px; }
	[aria-labelledby="audio-everyday-title"] .sd-uses .sd-icon { width: 44px; height: 44px; }
	[aria-labelledby="audio-everyday-title"] .sd-uses .sd-icon svg { width: 21px; height: 21px; }
	[aria-labelledby="audio-everyday-title"] .sd-uses h3 { font-size: 0.86rem; line-height: 1.25; }
}

/* Active page state inside the Solutions dropdown (all sizes): the current solution is highlighted */
.mega-list a[aria-current] { background: var(--highlight); box-shadow: inset 3px 0 0 var(--tally); }
.mega-list a[aria-current] strong { color: var(--white); }
@media (max-width: 767px) {
	.site-nav .mega-list a[aria-current] { margin-inline: -8px; padding-inline: 22px 8px; border-radius: 5px; background: rgba(255, 255, 255, 0.12); box-shadow: inset 3px 0 0 var(--tally); }
	.site-nav .mega-list a[aria-current]::before { left: 10px; width: 8px; height: 8px; box-shadow: 0 0 0 3px rgba(238, 27, 36, 0.28); }
	.site-nav .mega-list a[aria-current] strong { color: var(--white); font-weight: 800; }
	.site-nav .mega-list a:not([aria-current]) strong { font-weight: 500; }
}

/* Phone: every item in "Audio solutions" has the same padding and a divider, so the spacing is equal throughout */
@media (max-width: 600px) {
	[aria-labelledby="audio-solutions-title"] .sd-photos { gap: 0; margin-top: 24px; }
	[aria-labelledby="audio-solutions-title"] .sd-photos li, [aria-labelledby="audio-solutions-title"] .sd-photos li:nth-child(n + 4) { gap: 14px; padding: 18px 0; border-top: 0; }
	[aria-labelledby="audio-solutions-title"] .sd-photos li:first-child { padding-top: 0; }
	[aria-labelledby="audio-solutions-title"] .sd-photos li:nth-child(n + 2) { border-top: 1px solid var(--line); }
	[aria-labelledby="audio-solutions-title"] .sd-photos li:last-child { padding-bottom: 0; }
}

/* Tablet (768px to 1080px): the Audio System text-and-photo sections stay in two columns, copy on the left and photo on the right */
@media (min-width: 768px) and (max-width: 1080px) {
	.sd-split { grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: 32px; align-items: center; }
	.sd-photo, .sd-photo-contain { height: 100%; aspect-ratio: auto; min-height: 280px; }
	.sd-copy .sd-title { font-size: clamp(1.7rem, 3.6vw, 2.3rem); max-width: none; }
	.sd-why li { grid-template-columns: 48px minmax(0, 1fr); gap: 14px; }
	.sd-why .sd-icon { width: 48px; height: 48px; }
	.sd-why .sd-icon svg { width: 24px; height: 24px; }
	.sd-ladder li { grid-template-columns: 70px minmax(0, 1fr); }
	.sd-ladder-icon { min-height: 84px; }
	.sd-uses { gap: 10px; }
	.sd-uses li { flex-basis: calc(50% - 5px); padding: 14px 8px; }
	.sd-uses .sd-icon { width: 46px; height: 46px; }
	.sd-uses h3 { font-size: 0.9rem; }
}

/* Visual System page (original client-update design, v3 palette) ----------------------------------- */
.sd-lead-strong { color: var(--navy-900); font-weight: 700; }
.sd-split .sd-lead + .sd-lead { margin-top: 14px; }
/* portfolio: heading and photo on the left, a rail of red-square items on the right */
.vs-portfolio { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 90px); align-items: center; }
.vs-portfolio-main .sd-title { margin-bottom: 28px; }
.vs-portfolio-photo { margin: 0; overflow: hidden; aspect-ratio: 4 / 3; border-radius: 5px; box-shadow: 0 24px 56px rgba(11, 26, 61, 0.14); }
.vs-portfolio-photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.vs-portfolio-list { position: relative; display: grid; gap: 26px; margin: 0; padding: 0; list-style: none; }
.vs-portfolio-list::before { position: absolute; top: 8px; bottom: 8px; left: 6px; width: 2px; background: #c5cdea; content: ""; }
.vs-portfolio-list li { position: relative; padding-left: 38px; }
.vs-portfolio-list li::before { position: absolute; top: 4px; left: 0; width: 14px; height: 14px; border-radius: 3px; background: #ee1b24; content: ""; }
.vs-portfolio-list h3 { margin: 0 0 6px; color: var(--navy-900); font-size: 1.15rem; }
.vs-portfolio-list p { margin: 0; color: var(--slate); font-size: 0.96rem; line-height: 1.55; }

/* built for the way people gather: intro on the left, three photo + navy panel rows on the right */
.vs-gather { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr) minmax(0, 0.9fr); grid-auto-rows: clamp(150px, 14vw, 190px); gap: 14px 0; }
.vs-gather-intro { grid-column: 1; grid-row: 1 / 4; align-self: center; padding-right: clamp(24px, 4vw, 56px); }
.vs-gather-intro .sd-lead { margin-top: 24px; }
.vs-gather-photo { grid-column: 2; position: relative; z-index: 1; min-height: 0; margin: 0; overflow: hidden; border-radius: 5px 0 0 5px; }
.vs-gather-photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.vs-gather-panel { grid-column: 3; z-index: 2; display: flex; min-width: 0; flex-direction: column; justify-content: center; margin-left: -36px; padding: 0 clamp(20px, 2.6vw, 36px) 0 clamp(48px, 5vw, 68px); border-radius: 0 5px 5px 0; background: var(--navy-900); color: var(--white); clip-path: polygon(36px 0, 100% 0, 100% 100%, 0 100%); }
.vs-gather-panel h3 { margin: 0 0 12px; color: var(--white); font-size: 1.2rem; }
.vs-gather-panel h3::after { display: block; width: 36px; height: 3px; margin-top: 10px; background: #ee1b24; content: ""; }
.vs-gather-panel p { margin: 0; color: #dbe2f5; font-size: 0.92rem; line-height: 1.5; }

/* from brief to experience: dark band, photo on the right, a stepped five-stage path on a white card */
.vs-journey { --step-rise: 16px; padding-block: 64px; background: linear-gradient(180deg, var(--navy-950) 0%, var(--navy-900) 100%); color: var(--white); }
.vs-journey-top { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: clamp(28px, 4vw, 56px); align-items: center; }
.vs-journey-title { margin: 0; color: var(--white); font-family: var(--font-display); font-size: clamp(2rem, 4.5vw, 3.65rem); font-weight: 800; line-height: 1.08; letter-spacing: -0.04em; }
.vs-journey-photo { margin: 0; overflow: hidden; aspect-ratio: 21 / 9; border-radius: 5px; box-shadow: 0 24px 50px rgba(0, 0, 0, 0.35); }
.vs-journey-photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.vs-steps { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); margin: clamp(26px, 3.4vw, 42px) 0 0; padding: 38px 22px 24px; border-radius: 5px; background: var(--white); box-shadow: 0 24px 50px rgba(0, 0, 0, 0.28); color: var(--ink); list-style: none; }
.vs-steps li { position: relative; margin-top: calc((5 - var(--step-index)) * var(--step-rise)); padding: 20px 16px 0 22px; border-top: 4px solid var(--step-color); }
.vs-steps li:not(:first-child)::after { position: absolute; top: -4px; left: -2px; width: 4px; height: calc(var(--step-rise) + 4px); background: var(--step-color); content: ""; }
.vs-steps li::before { position: absolute; top: -12px; left: 12px; width: 20px; height: 20px; box-sizing: border-box; border: 4px solid var(--step-color); border-radius: 50%; background: var(--white); content: ""; }
.vs-step-lead { display: flex; align-items: center; }
.vs-step-icon { display: grid; flex: none; width: clamp(56px, 5vw, 72px); height: clamp(56px, 5vw, 72px); place-items: center; border-radius: 50%; background: var(--step-color); color: var(--white); }
.vs-step-icon svg { width: 52%; height: 52%; }
.vs-steps h3 { margin: 12px 0 8px; color: var(--navy-900); font-size: 1.02rem; }
.vs-steps p { margin: 0; color: var(--slate); font-size: 0.9rem; line-height: 1.5; }
.vs-steps li:nth-child(1) { --step-index: 1; --step-color: #ee1b24; }
.vs-steps li:nth-child(2) { --step-index: 2; --step-color: #cc2a52; }
.vs-steps li:nth-child(3) { --step-index: 3; --step-color: #7d3a90; }
.vs-steps li:nth-child(4) { --step-index: 4; --step-color: #2a62b8; }
.vs-steps li:nth-child(5) { --step-index: 5; --step-color: #1473d1; }
.vs-journey-note { margin: 24px 0 0; color: var(--white); font-size: 1.15rem; font-weight: 700; }
.vs-journey-note span { color: #8ea2ff; }

/* tablet: portfolio and journey stack, the path becomes a 3 + 2 grid, the gather rows become two columns */
@media (max-width: 1080px) {
	.vs-portfolio { grid-template-columns: minmax(0, 1fr); gap: 36px; }
	.vs-journey-top { grid-template-columns: minmax(0, 1fr); }
	.vs-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 34px; }
	.vs-steps li { margin-top: 0; }
	.vs-steps li::after { display: none; }
	.vs-gather { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
	.vs-gather-intro { grid-column: 1 / -1; grid-row: auto; padding: 0 0 20px; }
	.vs-gather-photo { grid-column: 1; }
	.vs-gather-panel { grid-column: 2; }
}
/* phone: single column; the path becomes a list with the icon beside the title */
@media (max-width: 720px) {
	.vs-gather { grid-template-columns: minmax(0, 1fr); grid-auto-rows: auto; gap: 0; }
	.vs-gather-photo, .vs-gather-panel { grid-column: 1; }
	.vs-gather-photo { height: 190px; border-radius: 5px 5px 0 0; }
	.vs-gather-panel { margin: 0 0 18px; padding: 22px 20px; border-radius: 0 0 5px 5px; clip-path: none; }
	.vs-steps { grid-template-columns: minmax(0, 1fr); row-gap: 0; padding: 12px 18px; }
	.vs-steps li, .vs-steps li:nth-child(4) { display: grid; grid-template-columns: 56px minmax(0, 1fr); grid-template-areas: "icon title" "desc desc"; align-items: center; column-gap: 14px; row-gap: 10px; margin-top: 0; padding: 18px 0; border: 0; border-top: 1px solid var(--line); }
	.vs-steps li:first-child { border-top: 0; }
	.vs-steps li::before, .vs-steps li::after { display: none; }
	.vs-step-lead { grid-area: icon; }
	.vs-step-icon { width: 56px; height: 56px; }
	.vs-steps h3 { grid-area: title; margin: 0; font-size: 1.25rem; line-height: 1.15; }
	.vs-steps p { grid-area: desc; font-size: 0.95rem; }
}

/* Visual System overview: about 20% shorter, and the photo is cropped so the stock-site watermark at its foot is out of view */
#visual-overview { padding-block: 66px; }
#visual-overview .sd-lead { margin-top: 14px; }
#visual-overview .sd-why { margin-top: 24px; }
#visual-overview .sd-why li { padding-block: 12px; }
#visual-overview .sd-photo img { height: 112%; object-position: top center; }
@media (max-width: 1080px) { #visual-overview { padding-block: 52px; } }
@media (max-width: 600px) { #visual-overview { padding-block: 40px; } }
/* Visual System overview photo: about 20% shorter, centred beside the text */
@media (min-width: 1081px) { #visual-overview .sd-photo { align-self: center; height: 542px; } }
@media (min-width: 601px) and (max-width: 1080px) { #visual-overview .sd-photo { align-self: center; height: 600px; min-height: 0; } }

/* Visual System overview text: the original layout (wider text column, bold lead on one line, larger body copy, airy icon rows) */
@media (min-width: 1081px) { #visual-overview .sd-split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(42px, 6vw, 96px); } }
#visual-overview .sd-title { max-width: none; }
#visual-overview .sd-lead-strong { margin: 18px 0 0; color: var(--navy-900); font-size: 1.2rem; font-weight: 600; line-height: 1.45; }
#visual-overview .sd-lead { margin-top: 16px; font-size: 1.07rem; line-height: 1.68; }
#visual-overview .sd-lead-strong + .sd-lead { margin-top: 16px; }
#visual-overview .sd-why { margin-top: 28px; }
#visual-overview .sd-why li { grid-template-columns: 64px minmax(0, 1fr); gap: 22px; padding-block: 16px; }
#visual-overview .sd-why .sd-icon { width: 64px; height: 64px; }
#visual-overview .sd-why h3 { font-size: 1.08rem; margin-bottom: 5px; }
#visual-overview .sd-why p { font-size: 0.94rem; }

/* Visual System overview: text about 10% smaller */
#visual-overview .sd-title { font-size: clamp(1.8rem, 4.05vw, 3.28rem); }
#visual-overview .sd-copy .sd-title { font-size: clamp(1.7rem, 3.33vw, 2.8rem); }
#visual-overview .sd-lead-strong { font-size: 1.08rem; }
#visual-overview .sd-lead { font-size: 0.963rem; }
#visual-overview .sd-why h3 { font-size: 0.972rem; }
#visual-overview .sd-why p { font-size: 0.846rem; }

/* Visual System portfolio: the original layout (heading breaks after "System", airy rail list) */
[aria-labelledby="visual-portfolio-title"] .sd-title { font-size: clamp(1.9rem, 3.55vw, 3.2rem); }
[aria-labelledby="visual-portfolio-title"] .vs-portfolio { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); align-items: center; }
[aria-labelledby="visual-portfolio-title"] .vs-portfolio-main .sd-title { margin-bottom: 32px; }
[aria-labelledby="visual-portfolio-title"] .vs-portfolio-list { gap: 30px; }
[aria-labelledby="visual-portfolio-title"] .vs-portfolio-list h3 { margin-bottom: 8px; font-size: 1.15rem; }
[aria-labelledby="visual-portfolio-title"] .vs-portfolio-list p { font-size: 0.96rem; line-height: 1.6; }
@media (max-width: 1080px) { [aria-labelledby="visual-portfolio-title"] .vs-portfolio { grid-template-columns: minmax(0, 1fr); } }
[aria-labelledby="visual-portfolio-title"] .sd-title { font-size: clamp(2rem, 4.1vw, 3.5rem); }
[aria-labelledby="visual-portfolio-title"] .sd-title .sd-accent { display: block; }

/* Visual System portfolio: about 20% shorter */
[aria-labelledby="visual-portfolio-title"] { padding-block: 64px; }
[aria-labelledby="visual-portfolio-title"] .vs-portfolio-main .sd-title { margin-bottom: 24px; }
[aria-labelledby="visual-portfolio-title"] .vs-portfolio-photo { aspect-ratio: 16 / 10; }
[aria-labelledby="visual-portfolio-title"] .vs-portfolio-list { gap: 24px; }
@media (max-width: 1080px) { [aria-labelledby="visual-portfolio-title"] { padding-block: 52px; } }
@media (max-width: 600px) { [aria-labelledby="visual-portfolio-title"] { padding-block: 40px; } }
/* "Learning" photo: anchored to the top so the teacher's head is in frame */
.vs-gather-photo:nth-of-type(2) img { object-position: 50% 0%; }

/* "Built for the way people gather": less space above and below the section (the rows keep their size) */
[aria-labelledby="visual-gather-title"] { padding-block: 64px; }
@media (max-width: 1080px) { [aria-labelledby="visual-gather-title"] { padding-block: 52px; } }
@media (max-width: 600px) { [aria-labelledby="visual-gather-title"] { padding-block: 40px; } }

/* "Visual clarity. Connected spaces." uses the same heading size as the portfolio section after it */
#visual-overview .sd-title, #visual-overview .sd-copy .sd-title { font-size: clamp(2rem, 4.1vw, 3.5rem); }

/* Phone: the five stages as in the original client-update design (a coloured rule above each stage, larger navy titles) */
@media (max-width: 720px) {
	.vs-steps { padding: 6px 18px 10px; }
	.vs-steps li, .vs-steps li:nth-child(4), .vs-steps li:first-child { padding: 20px 0 22px; border-top: 3px solid var(--step-color); }
	.vs-steps li:first-child { margin-top: 12px; }
	.vs-step-icon { width: 56px; height: 56px; }
	.vs-steps h3 { color: var(--navy-900); font-size: 1.4rem; }
	.vs-steps p { color: var(--slate); font-size: 0.95rem; line-height: 1.55; }
}
@media (max-width: 900px) {
	/* the photo fades fully into the card, with no visible edge where it meets the text */
	.cta-signoff-visual { margin-bottom: -2px; overflow: visible; }
	.cta-signoff-visual img { border-radius: var(--radius, 5px) var(--radius, 5px) 0 0; }
	.cta-signoff-visual::before { inset: auto 0 -2px 0; height: 55%; background: linear-gradient(0deg, #fff 0%, #fff 6%, rgba(255, 255, 255, 0) 100%); }
	.cta-signoff-copy { position: relative; z-index: 3; background: #fff; box-shadow: 0 -2px 0 #fff; }
}
/* Visual System overview photo on tablet: about 20% shorter */
@media (min-width: 601px) and (max-width: 1080px) { #visual-overview .sd-photo { height: 480px; } }

/* Visual System portfolio on tablet (original design): heading and photo on the left, the list centred on the right */
@media (min-width: 721px) and (max-width: 1080px) {
	[aria-labelledby="visual-portfolio-title"] .vs-portfolio { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 32px; align-items: center; }
	[aria-labelledby="visual-portfolio-title"] .sd-title { font-size: clamp(1.7rem, 4.2vw, 2.4rem); }
	[aria-labelledby="visual-portfolio-title"] .vs-portfolio-main .sd-title { margin-bottom: 20px; }
	[aria-labelledby="visual-portfolio-title"] .vs-portfolio-photo { aspect-ratio: 4 / 3; border-radius: 5px; }
	[aria-labelledby="visual-portfolio-title"] .vs-portfolio-list { gap: 22px; }
	[aria-labelledby="visual-portfolio-title"] .vs-portfolio-list li { padding-left: 32px; }
	[aria-labelledby="visual-portfolio-title"] .vs-portfolio-list h3 { font-size: 1rem; margin-bottom: 4px; }
	[aria-labelledby="visual-portfolio-title"] .vs-portfolio-list p { font-size: 0.86rem; line-height: 1.5; }
}

/* "Built for the way people gather" on tablet (original design): the same three-column layout as desktop, scaled down */
@media (min-width: 721px) and (max-width: 1080px) {
	.vs-gather { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1fr) minmax(0, 0.95fr); grid-auto-rows: clamp(120px, 15vw, 150px); gap: 12px 0; }
	.vs-gather-intro { grid-column: 1; grid-row: 1 / 4; padding: 0 22px 0 0; }
	.vs-gather-photo { grid-column: 2; }
	.vs-gather-panel { grid-column: 3; margin-left: -28px; padding: 0 18px 0 46px; clip-path: polygon(28px 0, 100% 0, 100% 100%, 0 100%); }
	.vs-gather-intro .sd-title { font-size: clamp(1.7rem, 4.3vw, 2.4rem); }
	.vs-gather-intro .sd-lead { margin-top: 16px; font-size: 0.95rem; line-height: 1.55; }
	.vs-gather-intro .sd-note { margin-top: 16px; font-size: 0.85rem; }
	.vs-gather-panel h3 { font-size: 1.02rem; margin-bottom: 8px; }
	.vs-gather-panel h3::after { margin-top: 7px; }
	.vs-gather-panel p { font-size: 0.8rem; line-height: 1.45; }
}

/* "From brief to experience" on tablet (original design): heading beside the photo, and the stepped five-stage path in one row */
@media (min-width: 721px) and (max-width: 1080px) {
	.vs-journey { --step-rise: 14px; padding-block: 52px; }
	.vs-journey-top { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 28px; }
	.vs-journey-title { font-size: clamp(1.9rem, 4.6vw, 2.6rem); }
	.vs-journey-photo { aspect-ratio: 16 / 9; border-radius: 5px; }
	.vs-steps { grid-template-columns: repeat(5, minmax(0, 1fr)); row-gap: 0; padding: 30px 14px 20px; border-radius: 5px; }
	.vs-steps li { margin-top: calc((5 - var(--step-index)) * var(--step-rise)); padding: 16px 8px 0 14px; }
	.vs-steps li:not(:first-child)::after { display: block; }
	.vs-steps li::before { left: 8px; width: 16px; height: 16px; border-width: 3px; top: -10px; }
	.vs-step-icon { width: 42px; height: 42px; }
	.vs-steps h3 { margin: 10px 0 6px; font-size: 0.82rem; }
	.vs-steps p { font-size: 0.7rem; line-height: 1.45; }
	.vs-journey-note { margin-top: 18px; font-size: 0.95rem; }
}

/* Solution pages: less space above the closing call-to-action card */
.solution-partners { padding-bottom: 40px; }
.solution-partners + .cta-card-band { padding-top: 24px; }
@media (max-width: 1080px) { .solution-partners { padding-bottom: 32px; } .solution-partners + .cta-card-band { padding-top: 22px; } }
@media (max-width: 600px) { .solution-partners { padding-bottom: 24px; } .solution-partners + .cta-card-band { padding-top: 18px; } }

/* Digital Signage page (original client-update design, v3 palette) ---------------------------------- */
.ds-overview { display: grid; gap: clamp(36px, 5vw, 64px); }
.ds-overview .sd-split { align-items: center; }
.ds-overview .sd-photo { height: auto; aspect-ratio: 3 / 2; }
.ds-services { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(24px, 3vw, 48px); padding-top: 32px; border-top: 1px solid var(--line); }
.ds-services article { display: grid; grid-template-columns: clamp(64px, 6vw, 96px) minmax(0, 1fr); gap: 16px; align-items: center; min-width: 0; }
.ds-service-icon { display: grid; aspect-ratio: 1 / 1; place-items: center; color: var(--royal); }
.ds-service-icon svg { width: 100%; height: 100%; }
.ds-services h3 { margin: 0 0 5px; color: var(--ink); font-size: 1rem; }
.ds-services p { margin: 0; color: var(--slate); font-size: 0.88rem; line-height: 1.55; }

/* one platform, many experiences: intro on the left, three rows of arrow label + photo on the right */
.ds-platform { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.55fr) minmax(0, 1.45fr); grid-template-rows: repeat(3, clamp(120px, 13vw, 172px)); gap: 14px 0; align-items: stretch; }
.ds-platform-intro { grid-column: 1; grid-row: 1 / 4; align-self: center; padding-right: clamp(24px, 4vw, 56px); }
.ds-platform-intro .sd-lead { margin-top: 24px; }
.ds-platform-label { grid-column: 2; display: flex; align-items: center; margin: 0; padding: 0 22px 0 clamp(28px, 3vw, 44px); background: var(--navy-950); color: var(--white); font-size: clamp(0.95rem, 1.4vw, 1.2rem); line-height: 1.25; clip-path: polygon(16% 0, 100% 0, 100% 100%, 16% 100%, 0 50%); }
.ds-platform-label span { position: relative; padding-left: 18px; }
.ds-platform-label span::before { position: absolute; top: 50%; left: 0; width: 0; height: 0; border-top: 7px solid transparent; border-bottom: 7px solid transparent; border-left: 9px solid #ee1b24; content: ""; transform: translateY(-50%); }
.ds-platform-photo { grid-column: 3; min-height: 0; margin: 0; overflow: hidden; border-radius: 0 5px 5px 0; }
.ds-platform-photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ds-platform > :nth-child(2), .ds-platform > :nth-child(3) { grid-row: 1; }
.ds-platform > :nth-child(4), .ds-platform > :nth-child(5) { grid-row: 2; }
.ds-platform > :nth-child(6), .ds-platform > :nth-child(7) { grid-row: 3; }
.ds-platform > :nth-child(5) img { object-position: 50% 4%; }

/* from brief to bright screen: five cards joined by dotted connectors */
.ds-path { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: clamp(28px, 3.4vw, 52px); margin: 0; padding: 0; list-style: none; }
.ds-path li { position: relative; display: grid; justify-items: center; align-content: start; gap: 18px; padding: 30px 14px 26px; border: 1px solid var(--line); border-radius: 5px; background: var(--white); box-shadow: 0 14px 30px rgba(7, 26, 46, 0.06); text-align: center; }
.ds-path li:not(:last-child)::after { position: absolute; top: 57px; left: calc(100% + 6px); width: calc(clamp(28px, 3.4vw, 52px) - 12px); height: 6px; background: radial-gradient(circle, var(--royal) 1.6px, transparent 2.1px) 0 50% / 9px 6px repeat-x; content: ""; }
.ds-path-icon { display: grid; width: 64px; height: 64px; place-items: center; border-radius: 50%; background: linear-gradient(145deg, var(--royal), var(--navy-900)); box-shadow: 0 10px 22px rgba(39, 57, 144, 0.28); color: var(--white); }
.ds-path-icon svg { width: 30px; height: 30px; }
.ds-path h3 { margin: 0; color: var(--ink); font-size: 1.05rem; }

/* why KLG: photo on the left, the four reasons on the right */
.ds-why .sd-photo { height: auto; aspect-ratio: 3 / 2; align-self: center; }

/* tablet (original structure): intros keep two columns, services stack, platform rows become label + photo under the intro, path is 3 + 2 */
@media (max-width: 1080px) {
	.ds-services { grid-template-columns: minmax(0, 1fr); }
	.ds-platform { grid-template-columns: minmax(0, 0.7fr) minmax(0, 1.3fr); grid-template-rows: auto repeat(3, 140px); }
	.ds-platform-intro { grid-column: 1 / -1; grid-row: auto; padding: 0 0 20px; }
	.ds-platform > :nth-child(n + 2) { grid-row: auto; }
	.ds-platform-label { grid-column: 1; }
	.ds-platform-photo { grid-column: 2; }
	.ds-path { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
	.ds-path li::after { display: none; }
}
@media (min-width: 721px) and (max-width: 1080px) {
	.ds-overview .sd-split, .ds-why.sd-split { grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: 32px; align-items: center; }
	.ds-overview .sd-photo, .ds-why .sd-photo { aspect-ratio: auto; height: 100%; min-height: 260px; }
}
/* phone: single column; the path becomes a list of cards joined by a dotted line, the platform rows stack */
@media (max-width: 720px) {
	.ds-platform { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; grid-auto-rows: auto; gap: 0; }
	.ds-platform-label, .ds-platform-photo { grid-column: 1; }
	.ds-platform-label { min-height: 64px; padding: 0 20px; border-radius: 5px 5px 0 0; clip-path: none; }
	.ds-platform-photo { height: 180px; margin-bottom: 18px; border-radius: 0 0 5px 5px; }
	.ds-path { grid-template-columns: minmax(0, 1fr); gap: 26px; }
	.ds-path li { grid-template-columns: 48px minmax(0, 1fr); justify-items: start; align-items: center; gap: 16px; padding: 12px 16px; border-radius: 5px; text-align: left; }
	.ds-path-icon { width: 48px; height: 48px; }
	.ds-path-icon svg { width: 24px; height: 24px; }
	.ds-path li:not(:last-child)::after { display: block; top: calc(100% + 3px); left: 40px; width: 6px; height: 20px; background: radial-gradient(circle, var(--royal) 1.6px, transparent 2.1px) 50% 0 / 6px 9px repeat-y; }
	.ds-overview .sd-photo, .ds-why .sd-photo { aspect-ratio: 3 / 2; height: auto; }
}

/* Digital Signage overview: larger text as in the original (heading on three lines, bigger intro and service copy) */
#signage-overview .sd-copy { max-width: 600px; }
#signage-overview .sd-title { font-size: clamp(2.2rem, 4.5vw, 3.65rem); }
#signage-overview .sd-lead { margin-top: 28px; font-size: 1.15rem; line-height: 1.68; }
#signage-overview .ds-services h3 { font-size: 1.15rem; line-height: 1.3; }
#signage-overview .ds-services p { font-size: 1.02rem; line-height: 1.6; }
@media (max-width: 1080px) { #signage-overview .sd-lead { font-size: 1.05rem; } #signage-overview .ds-services h3 { font-size: 1.08rem; } #signage-overview .ds-services p { font-size: 0.96rem; } }

/* Digital Signage "From brief to bright screen": larger heading as in the original (first line "From brief to bright") */
@media (min-width: 1081px) {
	[aria-labelledby="signage-path-title"] .sd-split { grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr); }
	[aria-labelledby="signage-path-title"] .sd-title { font-size: 3.65rem; }
}
[aria-labelledby="signage-path-title"] .sd-lead { font-size: 1.15rem; line-height: 1.68; margin-top: 26px; }
@media (min-width: 721px) and (max-width: 1080px) { [aria-labelledby="signage-path-title"] .sd-title { font-size: clamp(2.1rem, 4.8vw, 2.9rem); } }
@media (min-width: 1081px) { [aria-labelledby="signage-path-title"] .sd-title { margin-right: 0; text-wrap: wrap; } }

/* Digital Signage overview on tablet (original design): the three services stay side by side, icon beside text */
@media (min-width: 721px) and (max-width: 1080px) {
	#signage-overview .ds-services { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; padding-top: 28px; }
	#signage-overview .ds-services article { grid-template-columns: 48px minmax(0, 1fr); gap: 12px; align-items: center; }
	#signage-overview .ds-services h3 { font-size: 0.92rem; line-height: 1.3; }
	#signage-overview .ds-services p { font-size: 0.8rem; line-height: 1.5; }
}

/* "One platform. Many experiences." on tablet (original design): the desktop three-column layout, scaled down */
@media (min-width: 721px) and (max-width: 1080px) {
	.ds-platform { grid-template-columns: minmax(0, 0.85fr) minmax(0, 0.5fr) minmax(0, 1.3fr); grid-template-rows: repeat(3, clamp(100px, 13vw, 124px)); gap: 12px 0; }
	.ds-platform-intro { grid-column: 1; grid-row: 1 / 4; padding: 0 22px 0 0; }
	.ds-platform > :nth-child(2), .ds-platform > :nth-child(3) { grid-row: 1; }
	.ds-platform > :nth-child(4), .ds-platform > :nth-child(5) { grid-row: 2; }
	.ds-platform > :nth-child(6), .ds-platform > :nth-child(7) { grid-row: 3; }
	.ds-platform-label { grid-column: 2; padding: 0 12px 0 28px; font-size: 0.8rem; }
	.ds-platform-photo { grid-column: 3; }
	.ds-platform-intro .sd-title { font-size: clamp(1.7rem, 4.3vw, 2.3rem); }
	.ds-platform-intro .sd-lead { margin-top: 16px; font-size: 0.9rem; line-height: 1.55; }
}

/* "From brief to bright screen" on tablet (original design): all five cards in one row, joined by dotted connectors */
@media (min-width: 721px) and (max-width: 1080px) {
	.ds-path { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 22px; }
	.ds-path li { gap: 12px; padding: 20px 6px 16px; border-radius: 5px; }
	.ds-path li:not(:last-child)::after { display: block; top: 42px; left: calc(100% + 3px); width: 16px; height: 6px; }
	.ds-path-icon { width: 48px; height: 48px; }
	.ds-path-icon svg { width: 22px; height: 22px; }
	.ds-path h3 { font-size: 0.85rem; }
	[aria-labelledby="signage-path-title"] .sd-title { text-wrap: wrap; }
	[aria-labelledby="signage-path-title"] .sd-lead { font-size: 0.95rem; line-height: 1.6; margin-top: 18px; }
}

/* Digital Signage "Why KLG?" photo on tablet (original design): a smaller landscape photo, centred beside the list */
@media (min-width: 721px) and (max-width: 1080px) {
	.ds-why.sd-split { grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr); }
	.ds-why .sd-photo { height: auto; min-height: 0; aspect-ratio: 3 / 2; align-self: center; }
}

/* "From brief to bright screen" on narrow screens (original design): one card holding the five stages in a row, joined by dots */
@media (max-width: 720px) {
	.ds-path { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0; padding: 18px 6px 14px; border: 1px solid var(--line); border-radius: 5px; background: var(--white); box-shadow: 0 14px 30px rgba(7, 26, 46, 0.06); }
	.ds-path li { grid-template-columns: minmax(0, 1fr); justify-items: center; gap: 8px; padding: 0 2px; border: 0; border-radius: 0; background: none; box-shadow: none; text-align: center; }
	.ds-path li:not(:last-child)::after { display: block; top: 22px; left: calc(100% - 7px); width: 14px; height: 6px; background: radial-gradient(circle, var(--royal) 1.5px, transparent 2px) 0 50% / 7px 6px repeat-x; }
	.ds-path-icon { width: clamp(40px, 11vw, 62px); height: clamp(40px, 11vw, 62px); }
	.ds-path-icon svg { width: 46%; height: 46%; }
	.ds-path h3 { font-size: clamp(0.64rem, 2.6vw, 0.85rem); }
}

/* Security & Surveillance page (original client-update design, v3 palette) ---------------------------- */
.sc-bar-title { position: relative; padding-left: 26px; }
.sc-bar-title::before { position: absolute; top: 4px; bottom: 4px; left: 0; width: 7px; background: #ee1b24; content: ""; }
.sc-overview { align-items: center; }
.sc-overview .sd-photo { height: auto; aspect-ratio: 5 / 4; align-self: center; }
.sc-fade-photo { -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 22%); mask-image: linear-gradient(90deg, transparent 0, #000 22%); box-shadow: none; }
.sc-stages { display: grid; margin-top: 24px; }
.sc-stages article { position: relative; display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 16px; align-items: center; padding: 16px 0 16px 28px; border-bottom: 1px solid var(--line); }
.sc-stages article:last-child { border-bottom: 0; }
.sc-stages article::before { position: absolute; top: 50%; left: 0; width: 6px; height: 52px; background: #ee1b24; content: ""; transform: translateY(-50%); }
.sc-stage-icon { display: grid; place-items: center; color: var(--royal); }
.sc-stage-icon svg { width: 42px; height: 42px; }
.sc-stages h3 { margin: 0 0 4px; color: var(--ink); font-size: 1.05rem; }
.sc-stages p { margin: 0; color: var(--slate); font-size: 0.92rem; line-height: 1.55; }

/* intelligent video visibility: copy and a navy panel of three items on the left, the camera photo on the right */
.sc-video { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(42px, 7vw, 110px); align-items: center; }
.sc-video-content { min-width: 0; }
.sc-video .sd-lead { margin-top: 18px; }
.sc-video-photo { height: 100%; min-height: 0; margin: 0; overflow: hidden; border-radius: 5px; box-shadow: 0 24px 56px rgba(11, 26, 61, 0.14); }
.sc-video-photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.sc-panel { display: grid; margin-top: 22px; overflow: hidden; border-radius: 5px; background: var(--navy-900); color: var(--white); }
.sc-video .sc-panel { border-left: 8px solid #ee1b24; }
.sc-panel article { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 16px; align-items: center; padding: 18px 26px; border-bottom: 1px solid rgba(255, 255, 255, 0.16); }
.sc-panel article:last-child { border-bottom: 0; }
.sc-panel-icon { display: grid; place-items: center; color: var(--white); }
.sc-panel-icon svg { width: 36px; height: 36px; }
.sc-panel h3 { margin: 0 0 4px; color: var(--white); font-size: 1.08rem; }
.sc-panel p { margin: 0; color: #dbe2f5; font-size: 0.92rem; line-height: 1.5; }
/* control access: round white icon tiles with a divider */
.sc-panel-round { border-radius: 5px; }
.sc-panel-round .sc-panel-icon { width: 58px; height: 58px; border-radius: 50%; background: var(--white); color: #ee1b24; }
.sc-panel-round .sc-panel-icon svg { width: 26px; height: 26px; }
.sc-panel-round article { grid-template-columns: 58px minmax(0, 1fr); }
.sc-rule { display: block; width: 126px; height: 3px; margin: 22px 0 18px; background: #ee1b24; }
.sc-access .sd-photo { height: auto; aspect-ratio: 4 / 3; align-self: center; }

/* from requirement to readiness: four outlined stages joined by dotted lines, then a red-bar note */
.sc-ready { align-items: center; }
.sc-ready .sd-photo { height: auto; aspect-ratio: 4 / 3; align-self: center; }
.sc-ready-copy { border-top: 3px solid #ee1b24; padding-top: 26px; }
.sc-steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 26px 0 0; padding: 0; list-style: none; }
.sc-steps li { position: relative; display: grid; justify-items: center; gap: 10px; padding: 0 4px; }
.sc-steps li:not(:last-child)::after { position: absolute; top: 31px; left: calc(50% + 34px); width: calc(100% - 68px); border-top: 2px dotted #aab4de; content: ""; }
.sc-step-icon { display: grid; width: 64px; height: 64px; place-items: center; border: 2px solid var(--navy-900); border-radius: 50%; background: var(--white); color: var(--navy-900); }
.sc-steps li:nth-child(odd) .sc-step-icon { border-color: #ee1b24; color: #ee1b24; }
.sc-step-icon svg { width: 28px; height: 28px; }
.sc-steps strong { color: var(--navy-900); font-size: 1rem; }
.sc-note { margin: 24px 0 0; padding: 6px 0 6px 18px; border-left: 3px solid #ee1b24; color: var(--slate); font-size: 1.02rem; line-height: 1.6; }

/* closing card: dark version (as in the original Security page) */
.cta-signoff-dark { background: var(--navy-950); border-color: transparent; color: var(--white); }
.cta-signoff-dark h2, .cta-signoff-dark .cta-signoff-tel, .cta-signoff-dark .cta-signoff-back { color: var(--white); }
.cta-signoff-dark .cta-signoff-lead, .cta-signoff-dark .cta-signoff-company, .cta-signoff-dark .cta-signoff-tel small { color: #dbe2f5; }
.cta-signoff-dark .cta-signoff-visual::before { background: linear-gradient(90deg, var(--navy-950), rgba(6, 15, 38, 0)); }
@media (max-width: 900px) { .cta-signoff-dark .cta-signoff-visual::before { background: linear-gradient(0deg, var(--navy-950) 0%, var(--navy-950) 6%, rgba(6, 15, 38, 0) 100%); } .cta-signoff-dark .cta-signoff-copy { background: var(--navy-950); box-shadow: 0 -2px 0 var(--navy-950); } }

/* tablet: the sections keep two columns, scaled down; phone: everything stacks */
@media (max-width: 720px) {
	.sc-fade-photo { -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 18%); mask-image: linear-gradient(180deg, transparent 0, #000 18%); }
}
@media (min-width: 721px) and (max-width: 1080px) {
	.sc-video { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 28px; }
	.sc-overview.sd-split, .sc-access.sd-split, .sc-ready.sd-split { grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: 28px; }
	.sc-stages article { grid-template-columns: 44px minmax(0, 1fr); gap: 12px; padding-left: 22px; }
	.sc-stage-icon svg { width: 32px; height: 32px; }
	.sc-panel article { grid-template-columns: 44px minmax(0, 1fr); gap: 12px; padding: 14px 18px; }
	.sc-panel-icon svg { width: 28px; height: 28px; }
	.sc-panel h3 { font-size: 0.98rem; }
	.sc-panel p, .sc-stages p { font-size: 0.82rem; }
	.sc-steps li:not(:last-child)::after { top: 24px; left: calc(50% + 27px); width: calc(100% - 54px); }
	.sc-step-icon { width: 48px; height: 48px; }
	.sc-step-icon svg { width: 22px; height: 22px; }
	.sc-steps strong { font-size: 0.85rem; }
	.sc-video-photo, .sc-overview .sd-photo, .sc-access .sd-photo, .sc-ready .sd-photo { height: 100%; aspect-ratio: auto; min-height: 260px; }
}
@media (max-width: 720px) {
	.sc-video { grid-template-columns: minmax(0, 1fr); gap: 32px; }
	.sc-video-photo { aspect-ratio: 4 / 3; height: auto; }
	.sc-overview .sd-photo, .sc-access .sd-photo, .sc-ready .sd-photo { aspect-ratio: 4 / 3; height: auto; }
	.sc-stages article { grid-template-columns: 48px minmax(0, 1fr); }
	.sc-panel article { grid-template-columns: 44px minmax(0, 1fr); padding: 14px 16px; }
	.sc-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 22px; }
	.sc-steps li:not(:last-child)::after { display: none; }
}

/* Project references (original client-update design): dark glowing cards, a pale logo tile, a spaced client label and a bold title */
.project-references .reference-grid { gap: 22px; }
.project-references .reference-card { position: relative; isolation: isolate; overflow: hidden; gap: 0; padding: 32px; border: 0; border-radius: 5px; background: linear-gradient(160deg, #0d2342 0%, var(--navy-950) 70%); color: var(--white); min-height: 430px; }
.project-references .reference-card::before { position: absolute; top: -80px; right: -60px; z-index: -1; width: 300px; height: 300px; border-radius: 50%; background: radial-gradient(circle, rgba(32, 120, 210, 0.55), transparent 66%); content: ""; }
.project-references .reference-card:nth-child(2)::before { background: radial-gradient(circle, rgba(20, 170, 190, 0.5), transparent 66%); }
.project-references .reference-card:nth-child(3)::before { background: radial-gradient(circle, rgba(110, 100, 220, 0.5), transparent 66%); }
.project-references .reference-card::after { position: absolute; right: -70px; bottom: -90px; z-index: -1; width: 260px; height: 260px; border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 50%; box-shadow: 0 0 0 28px rgba(255, 255, 255, 0.025); content: ""; }
.project-references .reference-tag { align-self: flex-start; padding: 8px 16px; border: 1px solid rgba(255, 255, 255, 0.18); border-radius: 999px; background: rgba(255, 255, 255, 0.07); color: var(--white); font-size: 0.74rem; font-weight: 800; letter-spacing: 0.09em; text-transform: uppercase; }
.project-references .reference-card figure { height: 136px; margin: 26px 0 0; padding: 14px 18px; border-radius: 5px; background: #f4f6fa; }
.project-references .reference-card figure img { max-height: 100%; }
.project-references .reference-client { margin: auto 0 0; padding-top: 26px; color: #6fd0f0; font-size: 0.8rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; }
.project-references .reference-card h3 { margin: 10px 0 0; color: var(--white); font-size: 1.45rem; line-height: 1.2; letter-spacing: -0.02em; }
.project-references .reference-card p:last-child { display: none; }
@media (max-width: 1080px) { .project-references .reference-card { min-height: 0; } }
/* Reference cards: shorter, and the client name starts at the same height on every card (the title takes a fixed two-line space) */
.project-references .reference-card { min-height: 0; padding: 28px; }
.project-references .reference-card figure { height: 120px; margin-top: 22px; }
.project-references .reference-client { margin: 0; padding-top: 24px; }
.project-references .reference-card h3 { min-height: 2.4em; }
@media (max-width: 1080px) { .project-references .reference-card h3 { min-height: 0; } }
/* Reference logos stay inside their pale tile, and a logo file's own white box blends into the tile */
.project-references .reference-card figure { overflow: hidden; box-sizing: border-box; }
.project-references .reference-card figure img { width: auto; max-width: 100%; height: auto; max-height: 92px; object-fit: contain; mix-blend-mode: multiply; }

/* Security overview photo: about 20% shorter */
@media (min-width: 1081px) { .sc-overview .sd-photo { aspect-ratio: auto; height: 369px; } }
@media (min-width: 721px) and (max-width: 1080px) { .sc-overview .sd-photo { aspect-ratio: auto; height: 408px; min-height: 0; align-self: center; } }
@media (max-width: 720px) { .sc-overview .sd-photo { aspect-ratio: 16 / 9; } }

/* Intelligent video visibility photo: about 20% shorter, centred beside the text */
@media (min-width: 721px) { .sc-video-photo { align-self: center; height: auto; aspect-ratio: 1 / 0.8; min-height: 0; } }
@media (max-width: 720px) { .sc-video-photo { aspect-ratio: 16 / 10; } }

/* "Control access. Protect flow." on tablet (original design): a shorter landscape photo, larger text, and a divider between each round icon and its text */
@media (min-width: 721px) and (max-width: 1080px) {
	.sc-access.sd-split { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 36px; align-items: center; }
	.sc-access .sd-photo { height: auto; aspect-ratio: 4 / 3; min-height: 0; align-self: center; border-radius: 5px; }
	.sc-access .sd-title { font-size: clamp(2rem, 4.6vw, 2.8rem); }
	.sc-access .sd-lead { font-size: 1rem; line-height: 1.65; }
	.sc-access .sc-panel-round article { grid-template-columns: 58px minmax(0, 1fr); gap: 0; padding: 14px 18px; position: relative; }
	.sc-access .sc-panel-round .sc-panel-icon { width: 54px; height: 54px; }
	.sc-access .sc-panel-round article > div { margin-left: 16px; padding-left: 16px; border-left: 1px solid rgba(255, 255, 255, 0.22); }
	.sc-access .sc-panel h3 { font-size: 1rem; }
	.sc-access .sc-panel p { font-size: 0.88rem; line-height: 1.45; }
}

/* "From Requirement to Readiness" on tablet (original design): larger heading, bigger stage circles and labels, larger note */
@media (min-width: 721px) and (max-width: 1080px) {
	.sc-ready.sd-split { grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr); gap: 32px; }
	.sc-ready .sd-photo { aspect-ratio: auto; height: 100%; min-height: 330px; box-shadow: none; }
	.sc-ready .sd-title { font-size: clamp(2rem, 4.8vw, 2.9rem); text-wrap: wrap; }
	.sc-ready .sd-lead { font-size: 1rem; line-height: 1.6; margin-top: 14px; }
	.sc-steps { margin-top: 22px; }
	.sc-steps li { gap: 10px; }
	.sc-step-icon { width: 58px; height: 58px; }
	.sc-step-icon svg { width: 26px; height: 26px; }
	.sc-steps li:not(:last-child)::after { top: 29px; left: calc(50% + 31px); width: calc(100% - 62px); }
	.sc-steps strong { font-size: 0.95rem; }
	.sc-note { margin-top: 22px; font-size: 0.98rem; line-height: 1.6; }
}

/* Project references on tablet (original design): all three cards in one row, scaled down */
@media (min-width: 721px) and (max-width: 1080px) {
	.project-references .reference-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
	.project-references .reference-card { padding: 18px; border-radius: 5px; }
	.project-references .reference-card::before { width: 200px; height: 200px; top: -60px; right: -50px; }
	.project-references .reference-tag { padding: 6px 11px; font-size: 0.6rem; letter-spacing: 0.07em; }
	.project-references .reference-card figure { height: 96px; margin-top: 16px; padding: 10px 12px; }
	.project-references .reference-card figure img { max-height: 66px; }
	.project-references .reference-client { padding-top: 16px; font-size: 0.62rem; letter-spacing: 0.07em; }
	.project-references .reference-card h3 { min-height: 2.4em; margin-top: 8px; font-size: 1.02rem; }
}

/* "Control access. Protect flow." on phone (original design): heading and panel first, the photo below; a divider between each round icon and its text */
@media (max-width: 720px) {
	.sc-access.sd-split { gap: 28px; }
	.sc-access .sd-copy { order: 1; }
	.sc-access .sd-photo { order: 2; }
	.sc-access .sd-lead { font-size: 1.05rem; line-height: 1.7; }
	.sc-access .sc-panel-round article { grid-template-columns: 58px minmax(0, 1fr); gap: 0; padding: 18px 18px; }
	.sc-access .sc-panel-round .sc-panel-icon { width: 54px; height: 54px; }
	.sc-access .sc-panel-round article > div { margin-left: 16px; padding-left: 16px; border-left: 1px solid rgba(255, 255, 255, 0.22); }
	.sc-access .sc-panel h3 { font-size: 1.02rem; }
	.sc-access .sc-panel p { font-size: 0.95rem; line-height: 1.5; }
}

/* "From Requirement to Readiness" on phone (original design): text first, the four stages in one row joined by dotted lines, the photo below */
@media (max-width: 720px) {
	.sc-ready.sd-split { gap: 30px; }
	.sc-ready .sd-copy { order: 1; padding-top: 22px; }
	.sc-ready .sd-photo { order: 2; box-shadow: none; }
	.sc-ready .sd-title { text-wrap: wrap; }
	.sc-ready .sd-lead { font-size: 1.05rem; line-height: 1.65; margin-top: 14px; }
	.sc-steps { grid-template-columns: repeat(4, minmax(0, 1fr)); row-gap: 0; margin-top: 22px; }
	.sc-steps li { gap: 8px; padding: 0 2px; }
	.sc-step-icon { width: clamp(44px, 14vw, 76px); height: clamp(44px, 14vw, 76px); }
	.sc-step-icon svg { width: 44%; height: 44%; }
	.sc-steps li:not(:last-child)::after { display: block; top: calc(clamp(44px, 14vw, 76px) / 2 - 1px); left: calc(50% + clamp(44px, 14vw, 76px) / 2 + 3px); width: calc(100% - clamp(44px, 14vw, 76px) - 6px); }
	.sc-steps strong { font-size: clamp(0.72rem, 3vw, 0.95rem); }
	.sc-note { font-size: 1rem; line-height: 1.6; margin-top: 22px; }
}

/* Managed Services & Rental page (original client-update design, v3 palette) ------------------------- */
.mg-split { align-items: center; }
.mg-split .sd-photo { height: auto; aspect-ratio: 2 / 1; align-self: center; }
.mg-split .sd-title { max-width: none; }
.mg-services-wrap { display: grid; gap: clamp(30px, 4vw, 48px); }
.mg-red-lead { margin: 16px 0 0; color: #d11f26; font-size: 1.15rem; font-weight: 700; line-height: 1.4; }

/* four service columns on a white card, each with an icon, a title, a short red rule and a line */
.mg-columns { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 0; padding: 28px 8px; border-radius: 5px; background: var(--white); box-shadow: 0 20px 44px rgba(11, 26, 61, 0.08); list-style: none; }
.mg-columns li { padding: 4px 24px; border-left: 1px solid var(--line); }
.mg-columns li:first-child { border-left: 0; }
.mg-column-icon { display: block; width: 56px; height: 56px; margin-bottom: 14px; color: var(--navy-900); }
.mg-column-icon svg { width: 100%; height: 100%; }
.mg-columns h3 { margin: 0; color: var(--navy-900); font-size: 1.12rem; }
.mg-columns h3::after { display: block; width: 36px; height: 3px; margin: 12px 0; background: #ee1b24; border-radius: 2px; content: ""; }
.mg-columns p { margin: 0; color: var(--slate); font-size: 0.92rem; line-height: 1.5; }
.mg-strip { display: flex; align-items: center; gap: 20px; padding: 20px 28px; border-radius: 5px; background: linear-gradient(90deg, #e6e9f7, #f6f7fc); }
.mg-strip > span { flex: none; width: 42px; height: 42px; color: #ee1b24; }
.mg-strip > span svg { width: 100%; height: 100%; }
.mg-strip strong { display: block; color: var(--navy-900); font-size: clamp(1.05rem, 1.8vw, 1.3rem); }
.mg-strip p { margin: 4px 0 0; color: var(--slate); font-size: 0.96rem; }

/* one partner: a round photo beside the four-step ladder, then a white note card with a red top edge */
.mg-round-photo { justify-self: center; align-self: center; width: min(100%, 520px); aspect-ratio: 1 / 1; margin: 0; overflow: hidden; border-radius: 50%; box-shadow: 0 24px 56px rgba(11, 26, 61, 0.14); }
.mg-round-photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.mg-support .sd-ladder { margin-top: 22px; }
.mg-note { display: flex; align-items: center; gap: 18px; margin: 0; padding: 22px 30px; border: 1px solid var(--line); border-top: 3px solid #ee1b24; border-radius: 5px; background: var(--white); color: var(--navy-900); font-size: 1.05rem; }
.mg-note > span { flex: none; width: 42px; height: 42px; color: var(--royal); }
.mg-note > span svg { width: 100%; height: 100%; }

/* tablet: the intros keep two columns, the four service columns become 2 x 2 */
@media (max-width: 1080px) {
	.mg-columns { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 24px; }
	.mg-columns li:nth-child(odd) { border-left: 0; }
}
@media (min-width: 721px) and (max-width: 1080px) {
	.mg-split.sd-split { grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: 28px; }
	.mg-split .sd-photo { aspect-ratio: auto; height: 100%; min-height: 250px; }
	.mg-round-photo { width: min(100%, 340px); }
}
/* phone: single column, the round photo becomes a wide rounded one */
@media (max-width: 720px) {
	.mg-columns { grid-template-columns: minmax(0, 1fr); padding: 16px 18px; }
	.mg-columns li, .mg-columns li:nth-child(odd) { padding: 18px 0; border-left: 0; border-top: 1px solid var(--line); }
	.mg-columns li:first-child { border-top: 0; }
	.mg-split .sd-photo { aspect-ratio: 16 / 10; }
	.mg-round-photo { width: 100%; height: 220px; aspect-ratio: auto; border-radius: 5px; }
	.mg-strip { padding: 16px 18px; gap: 14px; }
	.mg-note { padding: 18px 20px; font-size: 0.98rem; }
}

/* "Rent the right technology" on desktop (original design): the heading breaks after "right", larger text, and a taller photo */
@media (min-width: 1081px) {
	[aria-labelledby="managed-rent-title"] .sd-title { font-size: clamp(2.6rem, 4.2vw, 3.65rem); }
	[aria-labelledby="managed-rent-title"] .sd-title .sd-accent { display: block; }
	[aria-labelledby="managed-rent-title"] .sd-lead-strong { margin-top: 18px; font-size: 1.2rem; line-height: 1.5; color: var(--navy-900); }
	[aria-labelledby="managed-rent-title"] .sd-why { margin-top: 28px; }
	[aria-labelledby="managed-rent-title"] .sd-why li { padding-block: 18px; }
	[aria-labelledby="managed-rent-title"] .sd-why h3 { font-size: 1.15rem; }
	[aria-labelledby="managed-rent-title"] .sd-why p { font-size: 1rem; line-height: 1.55; }
	[aria-labelledby="managed-rent-title"] .sd-note { font-size: 1.1rem; line-height: 1.5; }
	[aria-labelledby="managed-rent-title"] .sd-photo { aspect-ratio: 6 / 5; height: auto; align-self: center; }
}

/* Managed Services page headings: larger, as in the original (about 3.9rem on desktop) */
@media (min-width: 1081px) {
	[aria-labelledby="managed-rent-title"] .sd-title, [aria-labelledby="managed-services-title"] .sd-title { font-size: clamp(2.8rem, 4.6vw, 4rem); }
	[aria-labelledby="managed-services-title"] .sd-title { white-space: nowrap; }
}
@media (min-width: 721px) and (max-width: 1080px) {
	[aria-labelledby="managed-rent-title"] .sd-title, [aria-labelledby="managed-services-title"] .sd-title { font-size: clamp(2rem, 5vw, 2.9rem); }
}

/* "A solution-centric partner": larger heading only, as in the original (the heading breaks after "solution-") */
@media (min-width: 1081px) {
	#managed-overview .sd-title { font-size: clamp(2.8rem, 4.6vw, 4rem); }
}
@media (min-width: 721px) and (max-width: 1080px) { #managed-overview .sd-title { font-size: clamp(2rem, 5vw, 2.9rem); } }

/* "One partner, end-to-end support" on desktop (original proportions): a tighter section, a larger heading, compact ladder rows and a bigger round photo */
@media (min-width: 1081px) {
	[aria-labelledby="managed-support-title"] { padding-block: 56px; }
	[aria-labelledby="managed-support-title"] .mg-services-wrap { gap: 40px; }
	[aria-labelledby="managed-support-title"] .mg-support { grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr); gap: 40px; }
	[aria-labelledby="managed-support-title"] .sd-title { font-size: clamp(2.8rem, 4.6vw, 4rem); }
	[aria-labelledby="managed-support-title"] .sd-lead { margin-top: 16px; font-size: 1.05rem; line-height: 1.6; }
	[aria-labelledby="managed-support-title"] .mg-red-lead { margin-top: 18px; font-size: 1.2rem; }
	[aria-labelledby="managed-support-title"] .sd-ladder { margin-top: 24px; gap: 12px; }
	[aria-labelledby="managed-support-title"] .sd-ladder li { grid-template-columns: 72px minmax(0, 1fr); }
	[aria-labelledby="managed-support-title"] .sd-ladder-icon { min-height: 0; }
	[aria-labelledby="managed-support-title"] .sd-ladder-icon svg { width: 30px; height: 30px; }
	[aria-labelledby="managed-support-title"] .sd-ladder div { padding: 14px 20px; }
	[aria-labelledby="managed-support-title"] .sd-ladder h3 { font-size: 1.1rem; }
	[aria-labelledby="managed-support-title"] .sd-ladder p { font-size: 1rem; line-height: 1.4; }
	[aria-labelledby="managed-support-title"] .mg-round-photo { width: min(100%, 600px); }
	[aria-labelledby="managed-support-title"] .mg-note { padding: 20px 30px; font-size: 1.1rem; }
}
@media (min-width: 1081px) {
	[aria-labelledby="managed-support-title"] .mg-support { grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); }
	[aria-labelledby="managed-support-title"] .sd-ladder div { padding: 20px 22px; }
	[aria-labelledby="managed-support-title"] .sd-ladder-icon { width: 74px; }
	[aria-labelledby="managed-support-title"] .sd-ladder li { grid-template-columns: 74px minmax(0, 1fr); }
	[aria-labelledby="managed-support-title"] .mg-round-photo { width: min(100%, 600px); }
}

/* Managed Services & Rental: all section headings about 10% smaller */
@media (min-width: 1081px) {
	#managed-overview .sd-title, [aria-labelledby="managed-services-title"] .sd-title, [aria-labelledby="managed-rent-title"] .sd-title, [aria-labelledby="managed-support-title"] .sd-title { font-size: clamp(2.5rem, 4.1vw, 3.6rem); }
}
@media (min-width: 721px) and (max-width: 1080px) {
	#managed-overview .sd-title, [aria-labelledby="managed-services-title"] .sd-title, [aria-labelledby="managed-rent-title"] .sd-title, [aria-labelledby="managed-support-title"] .sd-title { font-size: clamp(1.8rem, 4.5vw, 2.6rem); }
}
@media (max-width: 720px) {
	#managed-overview .sd-title, [aria-labelledby="managed-services-title"] .sd-title, [aria-labelledby="managed-rent-title"] .sd-title, [aria-labelledby="managed-support-title"] .sd-title { font-size: clamp(1.7rem, 7.3vw, 2.2rem); }
}

/* "Managed services" on tablet (original design): the four service columns stay in one row, centred icons, compact text */
@media (min-width: 721px) and (max-width: 1080px) {
	.mg-columns { grid-template-columns: repeat(4, minmax(0, 1fr)); row-gap: 0; padding: 22px 6px; border-radius: 5px; }
	.mg-columns li, .mg-columns li:nth-child(odd) { padding: 4px 16px; border-left: 1px solid var(--line); }
	.mg-columns li:first-child { border-left: 0; }
	.mg-column-icon { width: 44px; height: 44px; margin: 0 auto 12px; }
	.mg-columns h3 { font-size: 0.98rem; line-height: 1.5; }
	.mg-columns h3::after { width: 28px; height: 2px; margin: 10px 0; }
	.mg-columns p { font-size: 0.78rem; line-height: 1.5; }
	.mg-strip { padding: 18px 24px; }
	.mg-strip strong { font-size: 1.05rem; }
	.mg-strip p { font-size: 0.85rem; }
}

/* "Rent the right technology" on tablet (original design): the heading on one line, a landscape photo centred beside the list */
@media (min-width: 721px) and (max-width: 1080px) {
	[aria-labelledby="managed-rent-title"] .sd-title { font-size: clamp(1.7rem, 4.4vw, 2.4rem); white-space: nowrap; text-wrap: wrap; }
	[aria-labelledby="managed-rent-title"] .sd-title .sd-accent { display: inline; }
	[aria-labelledby="managed-rent-title"] .mg-split.sd-split { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: 28px; align-items: center; }
	[aria-labelledby="managed-rent-title"] .sd-photo { height: auto; min-height: 0; aspect-ratio: 5 / 4; align-self: center; }
	[aria-labelledby="managed-rent-title"] .sd-lead-strong { margin-top: 12px; font-size: 1rem; line-height: 1.5; }
	[aria-labelledby="managed-rent-title"] .sd-why { margin-top: 18px; }
	[aria-labelledby="managed-rent-title"] .sd-why li { grid-template-columns: 48px minmax(0, 1fr); gap: 14px; padding-block: 12px; }
	[aria-labelledby="managed-rent-title"] .sd-why .sd-icon { width: 46px; height: 46px; }
	[aria-labelledby="managed-rent-title"] .sd-why .sd-icon svg { width: 22px; height: 22px; }
	[aria-labelledby="managed-rent-title"] .sd-why h3 { font-size: 0.98rem; margin-bottom: 2px; }
	[aria-labelledby="managed-rent-title"] .sd-why p { font-size: 0.82rem; line-height: 1.45; }
	[aria-labelledby="managed-rent-title"] .sd-note { margin-top: 18px; font-size: 0.92rem; line-height: 1.5; }
}
@media (min-width: 721px) and (max-width: 1080px) { [aria-labelledby="managed-rent-title"] .sd-title { font-size: clamp(1.45rem, 3.75vw, 2.3rem); white-space: nowrap; } }

/* "One partner, end-to-end support" on tablet (original design): a wider text column, larger round photo, bigger text */
@media (min-width: 721px) and (max-width: 1080px) {
	[aria-labelledby="managed-support-title"] .mg-support.sd-split { grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: 20px; align-items: center; }
	[aria-labelledby="managed-support-title"] .sd-title { font-size: clamp(1.9rem, 4.3vw, 2.6rem); }
	[aria-labelledby="managed-support-title"] .sd-lead { margin-top: 14px; font-size: 0.95rem; line-height: 1.6; }
	[aria-labelledby="managed-support-title"] .mg-red-lead { margin-top: 14px; font-size: 1.05rem; }
	[aria-labelledby="managed-support-title"] .sd-ladder { margin-top: 18px; gap: 10px; padding-left: 26px; }
	[aria-labelledby="managed-support-title"] .sd-ladder li { grid-template-columns: 56px minmax(0, 1fr); }
	[aria-labelledby="managed-support-title"] .sd-ladder-icon svg { width: 24px; height: 24px; }
	[aria-labelledby="managed-support-title"] .sd-ladder div { padding: 12px 16px; }
	[aria-labelledby="managed-support-title"] .sd-ladder h3 { font-size: 0.98rem; }
	[aria-labelledby="managed-support-title"] .sd-ladder p { font-size: 0.86rem; line-height: 1.4; }
	[aria-labelledby="managed-support-title"] .mg-round-photo { width: 100%; max-width: 420px; justify-self: center; }
	[aria-labelledby="managed-support-title"] .mg-note { font-size: 0.95rem; padding: 18px 24px; }
}

/* Home "Technology Solutions Built Around Your Needs" (original client-update design): four photo cards with a frosted label panel */
.home-pillars { padding-bottom: 64px; }
.home-pillars .section-head { margin-bottom: 36px; }
.pillar-cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px; margin: 0; padding: 0; list-style: none; }
.pillar-card a { position: relative; display: block; min-height: 400px; height: 100%; overflow: hidden; border-radius: 5px; background: var(--navy-900); transition: transform 0.25s ease, box-shadow 0.25s ease; }
.pillar-card a:hover, .pillar-card a:focus-visible { transform: translateY(-5px); box-shadow: 0 22px 44px rgba(11, 26, 61, 0.22); }
.pillar-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease; }
.pillar-card a:hover img { transform: scale(1.04); }
.pillar-panel { position: absolute; right: 22px; bottom: 16px; left: 14px; padding: 14px 16px 15px; border-radius: 4px; background: rgba(255, 255, 255, 0.82); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.pillar-panel strong { display: block; color: var(--navy-950); font-family: var(--font-display); font-size: clamp(1.1rem, 1.8vw, 1.45rem); font-weight: 800; letter-spacing: 0.01em; line-height: 1.1; text-transform: uppercase; }
.pillar-panel small { display: block; margin-top: 5px; color: var(--slate); font-size: 0.8rem; font-weight: 600; line-height: 1.3; }
.pillars-more { margin: 30px 0 0; text-align: center; }
.pillars-more a { display: inline-flex; align-items: center; gap: 10px; color: var(--ink); font-family: var(--font-display); font-size: 1.1rem; font-weight: 700; }
.pillars-more a:hover { color: var(--royal); }
.pillars-more .icon { width: 22px; height: 22px; transition: transform 0.2s ease; }
.pillars-more a:hover .icon { transform: translateX(4px); }
@media (max-width: 1080px) { .pillar-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; } .pillar-card a { min-height: 340px; } }
@media (max-width: 600px) { .pillar-cards { grid-template-columns: minmax(0, 1fr); } .pillar-card a { min-height: 300px; } }
.home-pillars .title-accent { color: var(--royal); }
.home-pillars .section-head h2 { font-size: clamp(1.9rem, 3.5vw, 3.1rem); line-height: 1.12; text-wrap: balance; }
@media (min-width: 1081px) { .home-pillars .section-head h2 { white-space: nowrap; text-wrap: nowrap; } }
.pillars-more a { text-decoration: none; }
/* Home photo cards: the proportions of the original (about 5 wide to 6 tall) */
.pillar-card a { min-height: 0; height: auto; aspect-ratio: 422 / 510; }
.pillar-cards { gap: 27px; }
@media (max-width: 1080px) { .pillar-card a { min-height: 0; aspect-ratio: 422 / 510; } }
@media (max-width: 600px) { .pillar-card a { min-height: 0; aspect-ratio: 5 / 4; } }
/* Protect card: the camera is anchored to the left so the whole CCTV unit is in frame */
.pillar-card:nth-child(2) img { object-position: 0% 50%; }

/* Home "Why Choose KLG?" (original client-update design): five cards that lighten from deep blue to pale */
.why-klg { padding-block: 64px; }
.why-klg .section-head { margin-bottom: 30px; }
.why-klg .title-accent { color: var(--royal); }
.why-lead { margin: 8px 0 0; color: var(--ink); font-size: 1.1rem; font-weight: 500; }
.why-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; margin: 0; padding: 0; list-style: none; }
.why-card { --why-fg: #fff; --why-soft: #dbe7f8; --why-no: #bcd2f0; display: flex; min-height: 276px; flex-direction: column; padding: 28px 22px 24px; border-radius: 5px; background: var(--why-bg); }
.why-card:nth-child(1) { --why-bg: #123a78; }
.why-card:nth-child(2) { --why-bg: #2f5b9f; }
.why-card:nth-child(3) { --why-bg: #7f9fcc; --why-fg: #0a2347; --why-soft: #0a2347; --why-no: #123a78; }
.why-card:nth-child(4) { --why-bg: #bcd0ea; --why-fg: #0a2347; --why-soft: #123a78; --why-no: #123a78; }
.why-card:nth-child(5) { --why-bg: #eef4fc; --why-fg: #0a2347; --why-soft: #123a78; --why-no: #123a78; box-shadow: inset 0 0 0 1px #d4e0f1; }
.why-card-no { color: var(--why-no); font-family: var(--font-display); font-size: 1.05rem; font-weight: 800; }
.why-card h3 { margin: 10px 0 0; color: var(--why-fg); font-size: clamp(1.1rem, 1.6vw, 1.4rem); line-height: 1.2; }
.why-card p { margin: auto 0 0; padding-top: 18px; color: var(--why-soft); font-size: 0.88rem; font-weight: 500; line-height: 1.5; }
.why-klg + .clients { padding-top: 48px; }
@media (max-width: 1080px) { .why-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .why-card:last-child:nth-child(odd) { grid-column: 1 / -1; } .why-card { min-height: 220px; } }
@media (max-width: 600px) { .why-grid { grid-template-columns: minmax(0, 1fr); gap: 10px; } .why-card, .why-card:last-child:nth-child(odd) { min-height: 0; grid-column: auto; padding: 22px 20px; } .why-card p { padding-top: 14px; } }

/* "Managed services" on tablet (original design): larger heading, a narrower intro, and roomier service columns with bigger icons and text */
@media (min-width: 721px) and (max-width: 1080px) {
	[aria-labelledby="managed-services-title"] .sd-title { font-size: clamp(2.1rem, 5.2vw, 3rem); white-space: nowrap; }
	[aria-labelledby="managed-services-title"] .sd-lead { max-width: 24em; font-size: 0.98rem; line-height: 1.65; }
	[aria-labelledby="managed-services-title"] .mg-split.sd-split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 28px; }
	[aria-labelledby="managed-services-title"] .sd-photo { aspect-ratio: 16 / 10; }
	.mg-columns { padding: 26px 8px; }
	.mg-columns li, .mg-columns li:nth-child(odd) { padding: 4px 22px; }
	.mg-column-icon { width: 52px; height: 52px; margin: 0 0 12px; }
	.mg-columns h3 { font-size: 1.02rem; line-height: 1.7; }
	.mg-columns h3::after { width: 28px; margin: 6px 0 14px; }
	.mg-columns p { font-size: 0.82rem; line-height: 1.55; }
	.mg-strip { padding: 22px 26px; }
	.mg-strip strong { font-size: 1.12rem; }
	.mg-strip p { font-size: 0.88rem; }
}
@media (min-width: 721px) and (max-width: 1080px) {
	[aria-labelledby="managed-services-title"] .sd-title { font-size: clamp(1.7rem, 4.5vw, 2.8rem); }
	[aria-labelledby="managed-services-title"] .sd-copy, [aria-labelledby="managed-services-title"] .sd-photo { min-width: 0; }
}
@media (min-width: 721px) and (max-width: 1080px) {
	[aria-labelledby="managed-services-title"] .mg-split.sd-split { grid-template-columns: minmax(0, 1fr) minmax(0, 0.95fr); }
	[aria-labelledby="managed-services-title"] .sd-title { white-space: normal; }
	[aria-labelledby="managed-services-title"] .sd-title .sd-accent { display: inline; }
}
@media (min-width: 721px) and (max-width: 1080px) { [aria-labelledby="managed-services-title"] .sd-photo { min-height: 0; height: auto; width: 100%; } }

/* "Managed services": less space above and below the section */
[aria-labelledby="managed-services-title"] { padding-block: 64px; }
@media (max-width: 1080px) { [aria-labelledby="managed-services-title"] { padding-block: 44px; } }
@media (max-width: 600px) { [aria-labelledby="managed-services-title"] { padding-block: 36px; } }

/* "One partner, end-to-end support": less space above and below the section */
[aria-labelledby="managed-support-title"] { padding-block: 44px; }
@media (min-width: 1081px) { [aria-labelledby="managed-support-title"] { padding-block: 40px; } }
@media (max-width: 600px) { [aria-labelledby="managed-support-title"] { padding-block: 36px; } }

/* "Managed services" on phone (original design): each service is a compact block, the icon beside the title, then the red rule and the text */
@media (max-width: 720px) {
	.mg-columns { padding: 8px 20px; border-radius: 5px; }
	.mg-columns li, .mg-columns li:nth-child(odd) { display: grid; grid-template-columns: 64px minmax(0, 1fr); grid-template-areas: "icon title" "rule rule" "text text"; align-items: center; column-gap: 18px; padding: 20px 0; border-top: 1px solid var(--line); }
	.mg-columns li:first-child { border-top: 0; }
	.mg-column-icon { grid-area: icon; width: 56px; height: 56px; margin: 0; }
	.mg-columns h3 { grid-area: title; font-size: 1.3rem; line-height: 1.25; }
	.mg-columns h3::after { content: none; }
	.mg-columns li::before { grid-area: rule; width: 52px; height: 3px; margin: 14px 0 12px; background: #ee1b24; border-radius: 2px; content: ""; }
	.mg-columns p { grid-area: text; font-size: 1.02rem; line-height: 1.55; }
}

/* "Rent the right technology" on phone: smaller icon circles (about 20% less) and more room for the text beside them */
@media (max-width: 720px) {
	[aria-labelledby="managed-rent-title"] .sd-why li { grid-template-columns: 52px minmax(0, 1fr); gap: 14px; }
	[aria-labelledby="managed-rent-title"] .sd-why .sd-icon { width: 52px; height: 52px; }
	[aria-labelledby="managed-rent-title"] .sd-why .sd-icon svg { width: 24px; height: 24px; }
}

/* "One partner" ladder on phone (original proportions): smaller text, a narrower icon block, and room for the descriptions */
@media (max-width: 720px) {
	[aria-labelledby="managed-support-title"] .sd-ladder { gap: 10px; padding-left: 26px; }
	[aria-labelledby="managed-support-title"] .sd-ladder li { grid-template-columns: 64px minmax(0, 1fr); }
	[aria-labelledby="managed-support-title"] .sd-ladder-icon svg { width: 22px; height: 22px; }
	[aria-labelledby="managed-support-title"] .sd-ladder div { padding: 14px 16px; }
	[aria-labelledby="managed-support-title"] .sd-ladder h3 { font-size: 1.02rem; margin-bottom: 4px; }
	[aria-labelledby="managed-support-title"] .sd-ladder p { font-size: 0.9rem; line-height: 1.5; }
}

/* "Managed services" cards on phone: a more compact rhythm, with less space between and inside the items */
@media (max-width: 720px) {
	.mg-columns { padding: 4px 18px; }
	.mg-columns li, .mg-columns li:nth-child(odd) { padding: 14px 0; column-gap: 14px; }
	.mg-column-icon { width: 46px; height: 46px; }
	.mg-columns li { grid-template-columns: 48px minmax(0, 1fr); }
	.mg-columns h3 { font-size: 1.15rem; }
	.mg-columns li::before { margin: 9px 0 8px; width: 44px; }
	.mg-columns p { font-size: 0.96rem; line-height: 1.5; }
}
@media (max-width: 720px) { .mg-columns li, .mg-columns li:nth-child(odd) { grid-template-columns: 48px minmax(0, 1fr); } }
@media (max-width: 720px) { .mg-columns p { max-width: none; width: 100%; } }
@media (max-width: 720px) { .mg-columns p, .mg-columns h3 { text-wrap: wrap; } }
/* Phone service cards: the same space above and below every divider (the tablet row gap no longer applies) */
@media (max-width: 720px) { .mg-columns { row-gap: 0; } .mg-columns li, .mg-columns li:nth-child(odd) { padding-block: 16px; } .mg-columns li:first-child { padding-top: 12px; } .mg-columns li:last-child { padding-bottom: 12px; } }

/* "Rent the right technology" on desktop: less space above and below the section */
@media (min-width: 1081px) { [aria-labelledby="managed-rent-title"] { padding-block: 40px; } }

/* Software Solutions page (original client-update design, v3 palette) ---------------------------------- */
.sw-split { align-items: center; }
.sw-split .sd-title { max-width: none; }
.sw-split .sd-photo { height: auto; aspect-ratio: 2 / 1; align-self: center; }
.sw-split .sd-lead + .sd-lead { margin-top: 14px; }
.sw-wrap { display: grid; gap: clamp(30px, 4vw, 48px); }
.sw-why { margin-top: 28px; }
.sw-why li { padding-block: 16px; }
.sw-why h3 { margin: 0; font-size: 1.15rem; }

/* cloud library: a deep blue band of four columns, each with an outlined circle icon, under a short red rule */
.sw-band { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 0; padding: 44px 8px 30px; border-radius: 5px; background: linear-gradient(135deg, #1b3b79, var(--navy-900) 70%, var(--navy-950)); color: var(--white); box-shadow: 0 24px 50px rgba(11, 26, 61, 0.22); list-style: none; }
.sw-band::before { position: absolute; top: 34px; left: 42px; width: 78px; height: 3px; background: #ee1b24; content: ""; }
.sw-band li { padding: 6px 26px; border-left: 1px solid rgba(255, 255, 255, 0.14); }
.sw-band li:first-child { border-left: 0; }
.sw-band-icon { display: grid; width: 84px; height: 84px; margin: 0 auto 18px; place-items: center; border: 1.5px solid rgba(255, 255, 255, 0.35); border-radius: 50%; }
.sw-band-icon svg { width: 36px; height: 36px; }
.sw-band h3 { margin: 0 0 8px; color: var(--white); font-size: 1.2rem; }
.sw-band p { margin: 0; color: #dbe2f5; font-size: 1rem; line-height: 1.5; }

/* archiving: a pale band of four stages joined by red chevrons, then a red-bar closing line */
.sw-steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: 0; padding: 26px 24px; border-radius: 5px; background: #eef1fb; list-style: none; }
.sw-steps li { position: relative; display: flex; align-items: center; gap: 16px; padding-right: 22px; }
.sw-step-icon { display: grid; flex: none; width: 64px; height: 64px; place-items: center; border-radius: 50%; background: var(--navy-900); color: var(--white); }
.sw-step-icon svg { width: 50%; height: 50%; }
.sw-steps h3 { margin: 0 0 6px; color: var(--navy-900); font-size: 1.1rem; }
.sw-steps p { margin: 0; color: var(--slate); font-size: 0.88rem; line-height: 1.45; }
.sw-steps li:not(:last-child)::after { position: absolute; top: 50%; right: 0; width: 11px; height: 11px; border-top: 3px solid #ee1b24; border-right: 3px solid #ee1b24; content: ""; transform: translateY(-50%) rotate(45deg); }
.sw-closing { margin: 0; padding: 8px 0 8px 22px; border-left: 4px solid #ee1b24; color: #d11f26; font-size: 1.35rem; font-weight: 700; line-height: 1.3; }

/* tablet: the intros keep two columns, the library band and the archive stages become two by two */
@media (max-width: 1080px) {
	.sw-band { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 26px; }
	.sw-band li:nth-child(odd) { border-left: 0; }
	.sw-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 24px; }
	.sw-steps li:nth-child(even)::after { display: none; }
}
@media (min-width: 721px) and (max-width: 1080px) {
	.sw-split.sd-split { grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: 28px; }
}
/* phone: one column; the band becomes a list, the stages stack with their chevrons removed */
@media (max-width: 720px) {
	.sw-split .sd-photo { aspect-ratio: 16 / 10; }
	.sw-band { grid-template-columns: minmax(0, 1fr); padding: 40px 22px 18px; }
	.sw-band::before { left: 22px; }
	.sw-band li, .sw-band li:nth-child(odd) { padding: 18px 0; border-left: 0; border-top: 1px solid rgba(255, 255, 255, 0.14); }
	.sw-band li:first-child { border-top: 0; }
	.sw-band-icon { width: 64px; height: 64px; margin: 0 0 12px; }
	.sw-band-icon svg { width: 28px; height: 28px; }
	.sw-steps { grid-template-columns: minmax(0, 1fr); padding: 18px 20px; }
	.sw-steps li::after { display: none; }
	.sw-closing { font-size: 1.1rem; }
}
/* Software photos keep the original images' own proportions, and never wider than their column */
.sw-split .sd-photo { min-height: 0; width: 100%; aspect-ratio: 16 / 10; }
#software-overview .sd-photo { aspect-ratio: 3 / 2; }
[aria-labelledby="software-library-title"] .sd-photo { aspect-ratio: 600 / 382; }
[aria-labelledby="software-archive-title"] .sd-photo { aspect-ratio: 612 / 344; }
.sw-split .sd-photo img { object-fit: cover; }
@media (min-width: 721px) and (max-width: 1080px) { .sw-split .sd-photo { height: auto; } }
/* Software Solutions hero: the photo sits lower in the frame so the top icon is no longer cut off */
#page-software .hero-media img { object-position: 50% 28%; }
/* the fade over the photo is the site's standard one (same as the other pages), so it is not overridden here */
@media (max-width: 720px) { #page-software .hero-media img { object-position: 78% 40%; } }

/* Software Solutions on desktop: less space above and below each section */
@media (min-width: 1081px) {
	#software-overview, [aria-labelledby="software-library-title"], [aria-labelledby="software-archive-title"] { padding-block: 56px; }
}

/* Technology partners to Project references: a closer gap between the two sections */
.solution-partners + .project-references { padding-top: 24px; }
.solution-partners:has(+ .project-references) { padding-bottom: 24px; }
.project-references { padding-bottom: 56px; }
@media (max-width: 1080px) { .project-references { padding-bottom: 44px; } }

/* "Cloud library system" on tablet (original design): the four columns stay in one row inside the blue band */
@media (min-width: 721px) and (max-width: 1080px) {
	.sw-band { grid-template-columns: repeat(4, minmax(0, 1fr)); row-gap: 0; padding: 40px 6px 24px; border-radius: 5px; }
	.sw-band::before { left: 22px; top: 30px; width: 64px; }
	.sw-band li, .sw-band li:nth-child(odd) { padding: 4px 16px; border-left: 1px solid rgba(255, 255, 255, 0.14); }
	.sw-band li:first-child { border-left: 0; }
	.sw-band-icon { width: 54px; height: 54px; margin: 0 auto 14px; }
	.sw-band-icon svg { width: 24px; height: 24px; }
	.sw-band h3 { font-size: 0.98rem; line-height: 1.3; }
	.sw-band p { font-size: 0.82rem; line-height: 1.5; }
	[aria-labelledby="software-library-title"] .sd-title { font-size: clamp(1.9rem, 4.6vw, 2.7rem); }
	[aria-labelledby="software-library-title"] .sd-lead-strong { font-size: 1rem; line-height: 1.5; }
	[aria-labelledby="software-library-title"] .sd-lead { font-size: 0.95rem; line-height: 1.6; }
}

/* "Online multimedia archiving" on tablet (original design): a larger heading on two lines, and all four stages in one row joined by red chevrons */
@media (min-width: 721px) and (max-width: 1080px) {
	[aria-labelledby="software-archive-title"] .sd-title { font-size: clamp(2rem, 5.2vw, 2.9rem); }
	[aria-labelledby="software-archive-title"] .sd-title .sd-accent { display: block; }
	[aria-labelledby="software-archive-title"] .sd-lead-strong { font-size: 1rem; line-height: 1.5; }
	[aria-labelledby="software-archive-title"] .sd-lead { font-size: 0.95rem; line-height: 1.65; }
	.sw-steps { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; row-gap: 0; padding: 22px 14px; border-radius: 5px; }
	.sw-steps li { align-items: center; gap: 10px; padding-right: 14px; }
	.sw-steps li:nth-child(even)::after { display: block; }
	.sw-steps li:last-child::after { display: none; }
	.sw-step-icon { width: 52px; height: 52px; }
	.sw-steps h3 { font-size: 0.98rem; margin-bottom: 4px; }
	.sw-steps p { font-size: 0.76rem; line-height: 1.45; }
	.sw-steps li::after { width: 9px; height: 9px; border-width: 2.5px; }
	.sw-closing { font-size: 1.05rem; }
}
/* Tablet: leave a clear gap on both sides of each chevron, so it never touches the next icon or the text */
@media (min-width: 721px) and (max-width: 1080px) {
	.sw-steps { gap: 18px; padding: 22px 18px; }
	.sw-steps li { padding-right: 0; }
	.sw-steps li:not(:last-child)::after { right: -13px; }
}
@media (min-width: 721px) and (max-width: 1080px) {
	.sw-steps { gap: 36px; padding: 22px 14px; }
	.sw-steps li:not(:last-child)::after { right: -22px; }
}

/* "Cloud library system" on phone (original design): each item has the circle icon beside the title and text */
@media (max-width: 720px) {
	.sw-band { padding: 46px 22px 14px; }
	.sw-band li, .sw-band li:nth-child(odd) { display: grid; grid-template-columns: 56px minmax(0, 1fr); grid-template-areas: "icon title" "icon text"; align-items: center; column-gap: 18px; row-gap: 4px; padding: 20px 0; }
	.sw-band-icon { grid-area: icon; width: 56px; height: 56px; margin: 0; align-self: center; }
	.sw-band-icon svg { width: 24px; height: 24px; }
	.sw-band h3 { grid-area: title; margin: 0; font-size: 1.1rem; line-height: 1.25; align-self: end; }
	.sw-band p { grid-area: text; font-size: 0.95rem; line-height: 1.5; align-self: start; }
}

/* "Online multimedia archiving" on phone (original design): the four stages stacked, a red down-arrow between each */
@media (max-width: 720px) {
	.sw-steps { padding: 26px 24px 24px; gap: 0; }
	.sw-steps li { padding: 0; gap: 18px; }
	.sw-step-icon { width: 72px; height: 72px; }
	.sw-steps h3 { font-size: 1.3rem; margin-bottom: 4px; }
	.sw-steps p { font-size: 1rem; line-height: 1.5; }
	.sw-steps li:not(:last-child) { margin-bottom: 34px; }
	.sw-steps li:not(:last-child)::after { display: block; top: auto; right: auto; bottom: -26px; left: 31px; width: 12px; height: 12px; border-top: 0; border-left: 0; border-right: 3px solid #ee1b24; border-bottom: 3px solid #ee1b24; transform: rotate(45deg); }
}
/* Phone archive stages: icons about 20% smaller (72px -> 58px), the arrow stays centred under them */
@media (max-width: 720px) {
	.sw-step-icon { width: 58px; height: 58px; }
	.sw-steps li:not(:last-child)::after { left: 23px; bottom: -26px; }
	.sw-steps li:not(:last-child) { margin-bottom: 32px; }
}

/* Projects page: a closer gap between the project grid and "Who we work with" */
.project-browser { padding-bottom: 40px; }
.project-browser + #clients { padding-top: 40px; }
@media (max-width: 1080px) { .project-browser { padding-bottom: 32px; } .project-browser + #clients { padding-top: 32px; } }

/* Projects filter (original client-update design): centred chips in one row with count bubbles, a funnel menu for the rest, and the sort on the right */
.browser-bar { flex-direction: column; align-items: stretch; gap: 14px; margin-bottom: 36px; }
.browser-bar .filters { position: relative; flex-wrap: nowrap; justify-content: center; align-items: center; gap: 10px; }
.browser-bar .filters legend { position: absolute; width: 1px; height: 1px; margin: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.browser-bar .filters label { display: inline-flex; flex: none; align-items: center; gap: 8px; padding: 10px 16px; font-size: 0.9rem; font-weight: 700; white-space: nowrap; transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease; }
.browser-bar .filters label:hover { border-color: var(--navy-900); }
.browser-bar .filters label:has(:checked) { background: var(--royal); border-color: var(--royal); color: var(--white); }
.browser-bar .filters label span { display: inline-grid; min-width: 24px; height: 24px; margin: 0; padding: 0 6px; place-items: center; border-radius: 999px; background: #e8ecfb; color: var(--royal); font-size: 0.75rem; font-weight: 800; }
.browser-bar .filters label:has(:checked) span { background: var(--white); color: var(--royal); }
.filters-more { position: relative; flex: none; }
.filters-more[hidden], .filters-menu[hidden] { display: none; }
.filters-more-button { display: grid; width: 44px; height: 44px; place-items: center; border: 1px solid var(--line); border-radius: 50%; background: var(--white); color: var(--royal); cursor: pointer; transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease; }
.filters-more-button:hover { border-color: var(--navy-900); }
.filters-more-button.is-active { background: var(--royal); border-color: var(--royal); color: var(--white); }
.filters-menu { position: absolute; top: calc(100% + 8px); right: 0; z-index: 20; display: grid; gap: 6px; min-width: 260px; padding: 10px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--white); box-shadow: 0 14px 34px rgba(11, 26, 61, 0.16); }
.filters-menu label { justify-content: space-between; width: 100%; }
.browser-bar .sort { justify-content: flex-end; padding-top: 0; }
.browser-bar .sort-btn { font-weight: 700; }
.browser-bar .sort-btn.is-active { background: var(--royal); border-color: var(--royal); }
@media (max-width: 1080px) { .browser-bar .filters label { padding: 8px 12px; font-size: 0.84rem; } }
.browser-bar .filters { min-width: 0; width: 100%; box-sizing: border-box; }

/* "Why Choose KLG?": the five cards rise in one after another from left to right, then lift on hover */
@media (prefers-reduced-motion: no-preference) {
	.why-card.reveal-item { transition: opacity 0.75s cubic-bezier(0.22, 1, 0.36, 1) var(--d, 0s), transform 0.75s cubic-bezier(0.22, 1, 0.36, 1) var(--d, 0s), box-shadow 0.25s ease; }
	.why-card.reveal-item:not(.is-in) { opacity: 0; transform: translateY(44px) scale(0.97); }
	.why-card.is-in:hover, .why-card:not(.reveal-item):hover { transform: translateY(-6px); box-shadow: 0 18px 36px rgba(11, 26, 61, 0.18); }
	.why-card { transition: transform 0.25s ease, box-shadow 0.25s ease; }
	.why-card.reveal-item { transition-property: opacity, transform, box-shadow; }
}

/* Home photo cards: the whole card grows on hover (with a deeper shadow), the photo zooms inside it and the label panel lifts */
@media (prefers-reduced-motion: no-preference) {
	.pillar-card { position: relative; }
	.pillar-card a { transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.45s cubic-bezier(0.22, 1, 0.36, 1); will-change: transform; }
	.pillar-card a:hover, .pillar-card a:focus-visible { transform: scale(1.06); box-shadow: 0 28px 56px rgba(11, 26, 61, 0.3); }
	.pillar-card:hover, .pillar-card:focus-within { z-index: 3; }
	.pillar-card img { transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1); }
	.pillar-card a:hover img, .pillar-card a:focus-visible img { transform: scale(1.08); }
	.pillar-panel { transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1), background-color 0.35s ease; }
	.pillar-card a:hover .pillar-panel, .pillar-card a:focus-visible .pillar-panel { transform: translateY(-6px); background: rgba(255, 255, 255, 0.94); }
	.pillar-panel strong { transition: color 0.3s ease; }
	.pillar-card a:hover .pillar-panel strong { color: var(--royal); }
}
@media (prefers-reduced-motion: reduce) { .pillar-card a:hover, .pillar-card a:focus-visible { transform: none; } }

/* Home page: less space between the sections (about 64px above and below each, instead of 120px) */
#page-home .home-pillars { padding-block: 64px; }
#page-home .intro, #page-home .solutions-overview, #page-home .projects-feature, #page-home .why-klg, #page-home .clients, #page-home .partners-wall { padding-block: 64px; }
#page-home .why-klg + .clients { padding-top: 40px; }
@media (max-width: 1080px) {
	#page-home .home-pillars, #page-home .intro, #page-home .solutions-overview, #page-home .projects-feature, #page-home .why-klg, #page-home .clients, #page-home .partners-wall { padding-block: 52px; }
	#page-home .why-klg + .clients { padding-top: 36px; }
}
@media (max-width: 600px) {
	#page-home .home-pillars, #page-home .intro, #page-home .solutions-overview, #page-home .projects-feature, #page-home .why-klg, #page-home .clients, #page-home .partners-wall { padding-block: 40px; }
	#page-home .why-klg + .clients { padding-top: 32px; }
}

/* Home photo cards: the whole row of cards swoops in from the right as one piece, in a single smooth glide */
@media (prefers-reduced-motion: no-preference) {
	.pillar-cards.reveal-item { transition: opacity 1.1s cubic-bezier(0.16, 1, 0.3, 1), transform 1.1s cubic-bezier(0.16, 1, 0.3, 1); will-change: transform, opacity; }
	.pillar-cards.reveal-item:not(.is-in) { opacity: 0; transform: translateX(160px); }
}

/* Home hero: fills the first screen below the header, with the solutions row at the bottom edge */
.hero-home { min-height: clamp(520px, calc(100svh - var(--header-real, var(--header-h))), 960px); }
@media (max-width: 600px) {
	.hero-home .hero-content { min-height: clamp(470px, calc(100svh - var(--header-real, var(--header-h)) - 150px), 760px); }
	.hero-home .hero-media { height: clamp(470px, calc(100svh - var(--header-real, var(--header-h)) - 150px), 760px); }
}

/* Second sentence of a heading in the KLG logo blue */
.title-blue { color: var(--royal); }

/* Solutions and Projects heroes: same total height as the solution detail heroes (Projects has no solutions row, so its content area makes up the difference) */
#page-solutions .hero-page .hero-content { min-height: 658px; align-content: center; }
#page-projects .hero-page .hero-content { min-height: 733px; align-content: center; }
@media (max-width: 1080px) {
	#page-solutions .hero-page .hero-content { min-height: 391px; }
	#page-projects .hero-page .hero-content { min-height: 515px; }
}
@media (max-width: 600px) {
	#page-solutions .hero-page .hero-content { min-height: 439px; }
	#page-projects .hero-page .hero-content { min-height: 667px; }
}

/* Projects hero: the second sentence in the standard KLG red, on its own line like the solution heroes */
#page-projects .hero-page .title-accent { display: block; color: #ee1b24; }
#page-solutions .hero-page .title-accent { color: #ee1b24; }

/* ==========================================================================
   About page (client-update structure): company card + copy, vision/mission, org chart, award cards
   ========================================================================== */
#page-about .about-grid { display: grid; grid-template-columns: 0.88fr 1.12fr; gap: clamp(48px, 6vw, 90px); align-items: start; }
#page-about .year-card { position: sticky; top: calc(var(--header-real, var(--header-h)) + 28px); padding: 42px; overflow: hidden; color: var(--white); background: linear-gradient(145deg, var(--navy-900), var(--royal)); border-radius: 5px; box-shadow: 0 24px 70px rgba(11, 26, 61, 0.2); }
#page-about .year-card::after { position: absolute; right: -90px; bottom: -110px; width: 240px; height: 240px; content: ""; border: 45px solid rgba(255, 255, 255, 0.08); border-radius: 50%; pointer-events: none; }
#page-about .year-card > small { display: block; color: var(--royal-bright); font-size: 0.85rem; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; }
#page-about .year-card > strong { display: block; margin: 15px 0 7px; font-size: clamp(4rem, 8vw, 6rem); line-height: 0.9; letter-spacing: -0.06em; }
#page-about .year-card > p { position: relative; z-index: 1; margin: 20px 0 0; color: #d6def5; font-size: 1.1rem; line-height: 1.6; }
#page-about .corporate-data { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr 1fr; gap: 1px; margin-top: 28px; overflow: hidden; background: rgba(255, 255, 255, 0.18); border: 1px solid rgba(255, 255, 255, 0.18); border-radius: 5px; }
#page-about .corporate-data > div { padding: 16px 18px; background: rgba(6, 15, 38, 0.32); }
#page-about .corporate-data small { display: block; margin-bottom: 6px; color: var(--royal-bright); font-size: 0.68rem; font-weight: 800; letter-spacing: 0.09em; text-transform: uppercase; }
#page-about .corporate-data strong { display: block; color: var(--white); font-size: 0.82rem; font-weight: 700; line-height: 1.4; }
#page-about .corporate-data .corporate-wide { grid-column: 1 / -1; }

#page-about .about-copy h2 { margin: 0 0 28px; font-size: clamp(2rem, 4.5vw, 3.65rem); line-height: 1.08; letter-spacing: -0.045em; }
#page-about .about-copy p { margin: 0 0 20px; color: var(--slate); }
#page-about .about-copy .lead { color: var(--ink); font-size: 1.15rem; }
#page-about .profile-capabilities { margin: 30px 0 0; padding: 24px 26px; background: var(--paper); border-left: 3px solid var(--royal); border-radius: 0 5px 5px 0; }
#page-about .about-copy .profile-capabilities-title { margin: 0 0 15px; color: var(--ink); font-size: 0.75rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; }
#page-about .profile-capabilities ul { display: grid; gap: 13px; margin: 0; padding: 0; list-style: none; }
#page-about .profile-capabilities li { position: relative; padding-left: 18px; color: var(--slate); font-size: 0.93rem; line-height: 1.58; }
#page-about .profile-capabilities li::before { position: absolute; top: 0.66em; left: 0; width: 6px; height: 6px; content: ""; background: var(--royal); border-radius: 50%; }
#page-about .profile-capabilities strong { color: var(--ink); }

#page-about .principles { display: grid; grid-template-columns: 1fr; gap: 18px; margin-top: 40px; }
#page-about .principle { position: relative; min-height: 230px; padding: 36px 38px 36px 130px; overflow: hidden; background: var(--paper); border: 1px solid var(--line); border-radius: 5px; }
#page-about .principle::before { position: absolute; top: 0; bottom: 0; left: 0; width: 7px; content: ""; background: linear-gradient(var(--royal), var(--royal-bright)); }
#page-about .principle-icon { position: absolute; top: 36px; left: 38px; display: grid; width: 62px; height: 62px; margin: 0; place-items: center; color: var(--royal); background: #e4e8f8; border-radius: 5px; }
#page-about .principle-icon svg { width: 21px; }
#page-about .principle h3 { margin: 0 0 12px; font-size: clamp(1.55rem, 2.5vw, 2.25rem); line-height: 1; letter-spacing: -0.04em; }
#page-about .principle p { max-width: 780px; margin: 0; color: var(--ink); font-size: clamp(1rem, 1.5vw, 1.22rem); line-height: 1.62; }
#page-about .principle:first-child { color: var(--white); background: linear-gradient(120deg, var(--navy-950), var(--royal)); border-color: transparent; }
#page-about .principle:first-child::before { background: var(--tally); }
#page-about .principle:first-child h3 { color: var(--white); }
#page-about .principle:first-child .principle-icon { color: var(--white); background: rgba(255, 255, 255, 0.12); }
#page-about .principle:first-child p { color: #d6def5; }

#page-about .company-structure { background-image: linear-gradient(rgba(241, 243, 247, 0.9), rgba(241, 243, 247, 0.9)), url("../images/surfaces/company-structure.webp"); background-position: center; background-size: cover; }
#page-about .company-structure h2 { margin-bottom: 38px; }
#page-about .organisation-chart { padding: 42px; overflow: hidden; background: var(--white); border: 1px solid var(--line); border-radius: 5px; }
#page-about .org-leadership { display: grid; justify-items: center; }
#page-about .org-node { position: relative; z-index: 1; display: inline-flex; min-height: 48px; padding: 13px 22px; align-items: center; justify-content: center; color: var(--white); background: var(--navy-900); border: 0; border-radius: 999px; font-size: 0.9rem; font-weight: 800; text-align: center; }
#page-about .org-connector { width: 2px; height: 34px; background: var(--royal); }
#page-about .org-departments { position: relative; display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; margin-top: 34px; padding-top: 30px; }
#page-about .org-departments::before { position: absolute; top: 0; right: 10%; left: 10%; height: 2px; content: ""; background: var(--royal); }
#page-about .org-departments::after { position: absolute; top: -34px; left: 50%; width: 2px; height: 34px; content: ""; background: var(--royal); }
#page-about .org-department { position: relative; min-width: 0; }
#page-about .org-department::before { position: absolute; top: -31px; left: 50%; width: 2px; height: 30px; content: ""; background: var(--royal); }
#page-about .org-department h3 { display: grid; position: relative; min-height: 70px; margin: 0; padding: 16px; place-items: center; color: var(--white); background: linear-gradient(135deg, var(--royal), #3a4fb0); border-radius: 5px; font-size: 0.92rem; line-height: 1.25; text-align: center; }
#page-about .org-department:nth-child(2) h3 { background: linear-gradient(135deg, #1f2f7c, var(--royal)); }
#page-about .org-department:nth-child(3) h3 { background: linear-gradient(135deg, var(--navy-800), #2a3d9a); }
#page-about .org-department:nth-child(4) h3 { background: linear-gradient(135deg, #2f428f, #4a60c4); }
#page-about .org-department:nth-child(5) h3 { background: linear-gradient(135deg, #2b3c96, #4256b8); }
#page-about .org-department h3::after { position: absolute; top: 100%; left: 50%; width: 2px; height: 27px; content: ""; background: #b7c1ec; transform: translateX(-50%); }
#page-about .org-role-list { position: relative; display: grid; gap: 10px; margin: 0; padding: 27px 0 0; list-style: none; }
#page-about .org-role-list::before { position: absolute; top: 0; bottom: 0; left: 50%; width: 2px; content: ""; background: #b7c1ec; transform: translateX(-50%); }
#page-about .org-role-list li { position: relative; z-index: 1; display: flex; min-height: 56px; align-items: center; gap: 9px; margin: 0; padding: 9px 10px; color: var(--ink); background: var(--white); border: 1px solid #c8d0f0; border-radius: 5px; box-shadow: 0 7px 16px rgba(11, 26, 61, 0.06); font-size: 0.78rem; font-weight: 700; line-height: 1.3; }
#page-about .org-role-icon { display: grid; position: relative; z-index: 1; width: 29px; height: 29px; flex: 0 0 29px; place-items: center; color: var(--royal); background: #e4e8f8; border: 1px solid #d0d7f3; border-radius: 5px; }
#page-about .org-role-icon svg { width: 17px; height: 17px; }

#page-about .about-awards .award-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
#page-about .about-awards .award-card { position: relative; display: flex; min-height: 380px; flex-direction: column; gap: 0; overflow: hidden; color: var(--white); background: linear-gradient(145deg, var(--navy-950), #0f2a63); border-radius: 5px; }
#page-about .about-awards .award-card::after { position: absolute; right: -45px; bottom: -65px; width: 190px; height: 190px; content: ""; border: 1px solid rgba(255, 255, 255, 0.15); border-radius: 50%; box-shadow: 0 0 0 28px rgba(255, 255, 255, 0.025); pointer-events: none; }
#page-about .about-awards .award-open { width: 100%; flex: 0 0 225px; border: 0; border-radius: 0; background: #eef0f6; }
#page-about .about-awards .award-open figure { height: 225px; aspect-ratio: auto; padding: 24px; background: transparent; }
#page-about .about-awards .award-open img { mix-blend-mode: multiply; }
#page-about .about-awards .award-body { position: relative; z-index: 1; padding: 20px; }
#page-about .about-awards .award-body small { display: inline-flex; margin-bottom: 12px; padding: 5px 9px; color: #dfe5fb; background: rgba(142, 162, 255, 0.2); border-radius: 999px; font-size: 0.62rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; }
#page-about .about-awards .award-body h3 { margin: 0 0 7px; color: var(--white); font-size: 1.08rem; }
#page-about .about-awards .award-body p { margin: 0; color: #c9d3ee; font-size: 0.85rem; }

@media (max-width: 1020px) {
	#page-about .about-grid { grid-template-columns: 1fr; gap: 52px; }
	#page-about .year-card { position: relative; top: auto; }
}
@media (max-width: 1080px) {
	#page-about .about-awards .award-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
	#page-about .year-card { padding: 32px; border-radius: 5px; }
	#page-about .year-card > p { margin-top: 22px; font-size: 1.02rem; line-height: 1.58; }
	#page-about .corporate-data > div { display: flex; min-height: 88px; box-sizing: border-box; padding: 15px 16px; flex-direction: column; justify-content: center; }
	#page-about .corporate-data .corporate-wide { grid-column: 1 / -1; min-height: auto; }
	#page-about .principle { min-height: 0; padding: 112px 26px 28px; }
	#page-about .principle-icon { top: 28px; left: 26px; width: 58px; height: 58px; }
	#page-about .organisation-chart { padding: 26px 20px; }
	#page-about .org-departments { grid-template-columns: 1fr; gap: 28px; padding-top: 20px; }
	#page-about .org-departments::before { right: auto; bottom: 0; left: 50%; width: 2px; height: auto; }
	#page-about .org-department::before { top: -21px; height: 20px; }
	#page-about .org-department h3 { min-height: 0; }
	#page-about .org-role-list { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); padding-top: 24px; }
	#page-about .org-role-list::before { right: 24px; bottom: auto; left: 24px; width: auto; height: 2px; transform: none; }
	#page-about .about-awards .award-grid { gap: 10px; }
	#page-about .about-awards .award-card { min-height: 0; border-radius: 5px; }
	#page-about .about-awards .award-open { flex-basis: 128px; }
	#page-about .about-awards .award-open figure { height: 128px; padding: 10px; }
	#page-about .about-awards .award-body { padding: 13px 12px 15px; }
	#page-about .about-awards .award-body small { margin-bottom: 8px; padding: 4px 7px; font-size: 0.52rem; }
	#page-about .about-awards .award-body h3 { margin: 0; font-size: 0.78rem; line-height: 1.3; }
	#page-about .about-awards .award-body p { display: none; }
}
@media (max-width: 390px) {
	#page-about .year-card { padding: 27px 24px; }
	#page-about .corporate-data { grid-template-columns: 1fr; }
}

/* About awards: an unfinished last row is centred instead of left-aligned (3 per row desktop, 2 per row tablet and phone) */
#page-about .about-awards .award-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 18px; }
#page-about .about-awards .award-card { flex: 0 0 calc((100% - 36px) / 3); max-width: calc((100% - 36px) / 3); }
@media (max-width: 1080px) {
	#page-about .about-awards .award-card { flex-basis: calc((100% - 18px) / 2); max-width: calc((100% - 18px) / 2); }
}
@media (max-width: 720px) {
	#page-about .about-awards .award-grid { gap: 10px; }
	#page-about .about-awards .award-card { flex-basis: calc((100% - 10px) / 2); max-width: calc((100% - 10px) / 2); }
}

/* About vision and mission: icon tile with a ring, content centred beside it */
#page-about .principle { display: flex; min-height: 0; align-items: center; gap: 30px; padding: 40px 40px 40px 44px; }
#page-about .principle::after { position: absolute; right: -60px; bottom: -80px; width: 220px; height: 220px; content: ""; border: 1px solid rgba(39, 57, 144, 0.16); border-radius: 50%; box-shadow: 0 0 0 30px rgba(39, 57, 144, 0.04); pointer-events: none; }
#page-about .principle:first-child::after { border-color: rgba(255, 255, 255, 0.16); box-shadow: 0 0 0 30px rgba(255, 255, 255, 0.03); }
#page-about .principle-icon { position: relative; top: auto; left: auto; flex: 0 0 76px; width: 76px; height: 76px; border-radius: 5px; color: var(--white); background: linear-gradient(145deg, var(--royal), #4256b8); box-shadow: 0 12px 26px rgba(39, 57, 144, 0.28); }
#page-about .principle-icon svg { width: 34px; height: 34px; }
#page-about .principle:first-child .principle-icon { background: linear-gradient(145deg, var(--tally), #ff5560); box-shadow: 0 12px 26px rgba(238, 27, 36, 0.35); }
#page-about .principle > div { position: relative; z-index: 1; min-width: 0; }
@media (max-width: 720px) {
	#page-about .principle { display: block; padding: 30px 26px 30px; }
	#page-about .principle-icon { top: auto; left: auto; width: 64px; height: 64px; flex-basis: 64px; margin-bottom: 20px; border-radius: 5px; }
	#page-about .principle-icon svg { width: 29px; height: 29px; }
}

/* About vision and mission: the icon tile is as tall as the text beside it (stacked above the text on phones) */
#page-about .principle { align-items: stretch; }
#page-about .principle-icon { flex: 0 0 96px; width: 96px; height: auto; align-self: stretch; }
#page-about .principle-icon svg { width: 38px; height: 38px; }
@media (max-width: 720px) {
	#page-about .principle { align-items: initial; }
	#page-about .principle-icon { width: 64px; height: 64px; align-self: auto; }
	#page-about .principle-icon svg { width: 29px; height: 29px; }
}

/* About vision and mission: smaller description (two lines on desktop and tablet) and a square icon tile matching the text height */
#page-about .principle { gap: 26px; padding: 30px 32px 30px 38px; }
#page-about .principle p { max-width: none; font-size: clamp(0.84rem, 1.08vw, 1rem); line-height: 1.55; }
#page-about .principle h3 { margin-bottom: 8px; }
#page-about .principle-icon { flex: none; width: auto; height: auto; aspect-ratio: 1 / 1; align-self: stretch; }
@media (max-width: 720px) {
	#page-about .principle { padding: 30px 26px; }
	#page-about .principle p { font-size: 0.95rem; }
	#page-about .principle-icon { width: 64px; height: 64px; aspect-ratio: auto; align-self: auto; }
}

/* Vision and mission: tighter padding so the description fits on two lines beside the square icon */
#page-about .principle { gap: 20px; padding: 26px 26px 26px 30px; }
#page-about .principle p { font-size: 0.9rem; line-height: 1.5; }
@media (max-width: 1020px) { #page-about .principle p { font-size: 1rem; } }
@media (max-width: 720px) { #page-about .principle { padding: 30px 26px; } #page-about .principle p { font-size: 0.95rem; } }
/* Narrow desktop: stack the company card above the copy so the cards keep a readable width */
@media (max-width: 1270px) {
	#page-about .about-grid { grid-template-columns: 1fr; gap: 52px; }
	#page-about .year-card { position: relative; top: auto; }
	#page-about .principle p { font-size: 1rem; }
}
@media (max-width: 720px) { #page-about .principle p { font-size: 0.95rem; } }

/* Vision and mission: equal heights, and on desktop they fill the column so their bottom lines up with the company card beside them */
#page-about .principles { grid-template-rows: 1fr 1fr; }
@media (min-width: 1271px) {
	#page-about .about-grid { align-items: stretch; }
	#page-about .year-card { align-self: start; }
	#page-about .about-copy { display: flex; flex-direction: column; }
	#page-about .principles { flex: 1 1 auto; }
}

/* Vision and mission: larger icon inside the same tile (sized relative to the tile) */
#page-about .principle-icon svg { width: 54px; height: 54px; }
@media (max-width: 720px) { #page-about .principle-icon svg { width: 38px; height: 38px; } }

/* About page: the whole band behind the closing card is dark blue, continuing the dark awards section above it */
#page-about .cta-card-band { background: var(--navy-950); }

/* About awards: dark blue section with the cards inverted (light cards, dark text) so they stand out from the background */
#page-about .about-awards { background: var(--navy-950); }
#page-about .about-awards .section-head h2 { color: var(--white); }
#page-about .about-awards .award-card { color: var(--ink); background: var(--white); box-shadow: 0 18px 40px rgba(0, 0, 0, 0.28); }
#page-about .about-awards .award-card::after { border-color: rgba(39, 57, 144, 0.12); box-shadow: 0 0 0 28px rgba(39, 57, 144, 0.035); }
#page-about .about-awards .award-open { background: #e9ecf6; }
#page-about .about-awards .award-body small { color: var(--royal); background: #e4e8f8; }
#page-about .about-awards .award-body h3 { color: var(--navy-900); }
#page-about .about-awards .award-body p { color: var(--slate); }

/* Dark blue solution sections (Audio: "Audio solutions" and "Designed for everyday communication"): light text on the navy background */
.sd-dark { background: var(--navy-950); }
.sd-dark .sd-title { color: var(--white); }
.sd-dark .sd-lead { color: #c9d3ee; }
.sd-dark .sd-photos h3 { color: var(--white); }
.sd-dark .sd-photos li:nth-child(n + 4) { border-top-color: rgba(255, 255, 255, 0.16); }
.sd-dark .sd-photos figure, .sd-dark .sd-photo { box-shadow: 0 18px 40px rgba(0, 0, 0, 0.45); }
.sd-dark .sd-uses li { border-color: transparent; }

/* The dark blue used for every dark section and the footer is now the same blue as the Solutions dropdown (--navy-900) */
:root { --navy-950: #0b1a3d; }
.sd-dark .vs-portfolio-list::before { background: rgba(255, 255, 255, 0.22); }
.sd-dark .vs-portfolio-list h3 { color: var(--white); }
.sd-dark .vs-portfolio-list p { color: #c9d3ee; }
.sd-dark .vs-portfolio-photo { box-shadow: 0 24px 56px rgba(0, 0, 0, 0.45); }

/* Dark sections: Digital Signage "One platform" panels and "Why KLG?" list */
.sd-dark .ds-platform-label { background: linear-gradient(135deg, #1f2f7c, var(--royal)); }
.sd-dark .sd-why { border-top-color: rgba(255, 255, 255, 0.16); }
.sd-dark .sd-why li { border-bottom-color: rgba(255, 255, 255, 0.16); }
.sd-dark .sd-why h3 { color: var(--white); }
.sd-dark .sd-why p { color: #c9d3ee; }
.sd-dark .sd-icon { background: linear-gradient(135deg, #4256b8, var(--royal)); box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.14), 0 10px 22px rgba(0, 0, 0, 0.35); }

/* Dark "Why KLG?" lists: white icon circles with a blue icon */
.sd-dark .sd-why .sd-icon { background: var(--white); color: var(--royal); box-shadow: 0 10px 22px rgba(0, 0, 0, 0.35); }

/* Dark Security sections: video visibility panel and "From Requirement to Readiness" */
.sd-dark .sc-panel { background: linear-gradient(135deg, #1f2f7c, var(--royal)); }
.sd-dark .sc-video-photo { box-shadow: 0 24px 56px rgba(0, 0, 0, 0.45); }
.sd-dark .sc-step-icon { background: var(--white); }
.sd-dark .sc-steps li:nth-child(even) .sc-step-icon { border-color: var(--white); color: var(--royal); }
.sd-dark .sc-steps li:not(:last-child)::after { border-top-color: rgba(255, 255, 255, 0.4); }
.sd-dark .sc-steps strong { color: var(--white); }
.sd-dark .sc-note { color: #c9d3ee; }

/* Phone: the Vision / Mission title sits beside the icon, and the description stays below them as before */
@media (max-width: 720px) {
	#page-about .principle { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: 18px; row-gap: 20px; }
	#page-about .principle > div { display: contents; }
	#page-about .principle-icon { grid-column: 1; grid-row: 1; margin-bottom: 0; }
	#page-about .principle h3 { grid-column: 2; grid-row: 1; margin: 0; }
	#page-about .principle p { grid-column: 1 / -1; grid-row: 2; }
}

/* Phone: no hairline of white page between the dark awards section, the closing card band and the footer */
@media (max-width: 720px) {
	.cta-card-band { margin-block: -1px; padding-block: 31px 47px; }
	.site-footer { margin-top: -1px; }
	#page-about .about-awards { margin-bottom: -1px; }
}

/* ==========================================================================
   Contact page (client-update design): contact cards, dark photo panel, map
   ========================================================================== */
#page-contact .contact-grid { display: grid; grid-template-columns: 0.84fr 1.16fr; gap: clamp(40px, 5vw, 75px); align-items: center; }
#page-contact .contact-list { display: grid; gap: 12px; margin: 0; padding: 0; border: 0; }
#page-contact .contact-item { display: grid; grid-template-columns: 46px minmax(0, 1fr); gap: 14px; align-items: start; padding: 15px; border: 1px solid var(--line); border-radius: 5px; background: var(--white); }
#page-contact .contact-item-icon { display: grid; width: 43px; height: 43px; place-items: center; color: var(--royal); background: #e4e8f8; border-radius: 5px; }
#page-contact .contact-item-icon svg { width: 20px; height: 20px; }
#page-contact .contact-item small { display: block; margin-bottom: 4px; color: var(--slate); font-size: 0.66rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; }
#page-contact .contact-item strong, #page-contact .contact-item a { color: var(--ink); font-family: var(--font-display); font-size: 0.95rem; font-weight: 700; line-height: 1.6; text-decoration: none; }
#page-contact .contact-item a { display: inline-flex; align-items: center; min-height: 36px; font-weight: 500; }
#page-contact .contact-item a:hover { color: var(--royal); }

#page-contact .contact-panel { position: relative; min-height: 490px; padding: 45px; overflow: hidden; color: var(--white); background-color: var(--navy-950); background-image: linear-gradient(rgba(11, 26, 61, 0.92), rgba(11, 26, 61, 0.8)), url("../images/surfaces/contact.webp"); background-position: center; background-size: cover; border-radius: 5px; box-shadow: 0 24px 70px rgba(11, 26, 61, 0.22); }
#page-contact .contact-panel::before { position: absolute; inset: 0; content: ""; opacity: 0.22; background-image: linear-gradient(rgba(255, 255, 255, 0.12) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.12) 1px, transparent 1px); background-size: 46px 46px; pointer-events: none; }
#page-contact .contact-panel::after { position: absolute; right: -40px; bottom: -65px; width: 280px; height: 280px; content: ""; border: 1px solid rgba(142, 162, 255, 0.24); border-radius: 50%; box-shadow: 0 0 0 34px rgba(142, 162, 255, 0.04), 0 0 0 73px rgba(142, 162, 255, 0.025); pointer-events: none; }
#page-contact .contact-panel-content { position: relative; z-index: 2; }
#page-contact .contact-panel h2 { max-width: 460px; margin: 0 0 16px; color: var(--white); font-size: clamp(2rem, 4vw, 3.1rem); line-height: 1.08; letter-spacing: -0.04em; }
#page-contact .contact-panel p { max-width: 480px; margin: 0 0 31px; color: #c9d3ee; }
#page-contact .contact-panel .btn { margin-right: 6px; }
#page-contact .contact-panel-phone { display: inline-flex; min-height: 46px; margin: 12px 0 0; padding: 0 17px; align-items: center; justify-content: center; color: var(--white); border: 1px solid rgba(255, 255, 255, 0.42); border-radius: 999px; font-size: 0.86rem; font-weight: 800; text-decoration: none; transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease; }
#page-contact .contact-panel-phone:hover { color: var(--navy-900); background: var(--white); border-color: var(--white); }
#page-contact .availability { display: flex; gap: 10px; align-items: center; margin-top: 25px; color: #b9c4e4; font-size: 0.78rem; }
#page-contact .availability i { flex: none; width: 8px; height: 8px; background: var(--royal-bright); border-radius: 50%; box-shadow: 0 0 0 5px rgba(142, 162, 255, 0.18); }

#page-contact .map-section { margin-top: 52px; }
#page-contact .map-heading { display: block; margin-bottom: 20px; }
#page-contact .map-heading h2 { margin: 0; font-size: clamp(1.55rem, 3vw, 2.25rem); line-height: 1.12; letter-spacing: -0.035em; }
#page-contact .map-link { display: inline-flex; margin-top: 14px; padding: 10px 0; align-items: center; gap: 8px; color: var(--royal); border-bottom: 1px solid currentColor; font-size: 0.82rem; font-weight: 800; white-space: nowrap; text-decoration: none; }
#page-contact .map-link:hover { color: var(--navy-900); }
#page-contact .map-frame { height: 390px; overflow: hidden; background: var(--paper); border: 1px solid var(--line); border-radius: 5px; box-shadow: 0 12px 36px rgba(11, 26, 61, 0.08); }
#page-contact .map-frame iframe { display: block; }

@media (max-width: 1020px) {
	#page-contact .contact-grid { grid-template-columns: 1fr; gap: 52px; }
}
@media (max-width: 720px) {
	#page-contact .contact-panel { display: flex; flex-direction: column; align-items: center; min-height: 450px; padding: 32px 26px; text-align: center; }
	#page-contact .contact-panel-content { display: flex; width: 100%; flex-direction: column; align-items: center; }
	#page-contact .contact-panel .btn, #page-contact .contact-panel-phone { width: min(100%, 330px); margin-right: 0; }
	#page-contact .availability { justify-content: center; }
	#page-contact .map-section { margin-top: 38px; }
	#page-contact .map-link { margin-top: 17px; }
	#page-contact .map-frame { height: 320px; border-radius: 5px; }
}
@media (max-width: 390px) {
	#page-contact .contact-item { grid-template-columns: 38px minmax(0, 1fr); gap: 11px; padding: 14px; }
	#page-contact .contact-panel { min-height: 0; }
	#page-contact .contact-panel h2, #page-contact .map-heading h2 { overflow-wrap: anywhere; }
	#page-contact .map-frame { height: 280px; }
}

/* About and Contact heroes share one height, whether the title takes one line or two */
#page-about .hero-page .hero-content, #page-contact .hero-page .hero-content { min-height: 360px; align-content: end; }
@media (max-width: 1080px) { #page-about .hero-page .hero-content, #page-contact .hero-page .hero-content { min-height: 230px; } }
@media (max-width: 600px) { #page-about .hero-page .hero-content, #page-contact .hero-page .hero-content { min-height: 203px; } }

/* About, tablet (721px to 1270px): company card and copy side by side, as in the client-update tablet layout */
@media (min-width: 721px) and (max-width: 1270px) {
	#page-about .about-grid { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1fr); gap: clamp(36px, 6vw, 68px); align-items: start; }
	#page-about .year-card { position: sticky; top: calc(var(--header-real, var(--header-h)) + 24px); padding: 30px 28px; border-radius: 5px; }
	#page-about .year-card > strong { font-size: clamp(3.6rem, 9vw, 5.4rem); }
	#page-about .year-card > p { margin-top: 18px; font-size: 0.95rem; line-height: 1.55; }
	#page-about .corporate-data { grid-template-columns: 1fr 1fr; margin-top: 22px; }
	#page-about .corporate-data > div { display: block; min-height: 0; padding: 12px 14px; }
	#page-about .corporate-data small { font-size: 0.6rem; }
	#page-about .corporate-data strong { font-size: 0.72rem; }
	#page-about .about-copy h2 { margin-bottom: 20px; font-size: clamp(2rem, 4.5vw, 2.6rem); }
	#page-about .about-copy .lead { font-size: 1.05rem; }
	#page-about .principles { flex: none; grid-template-rows: none; margin-top: 30px; }
	#page-about .principle { align-items: flex-start; gap: 18px; padding: 22px 22px 22px 26px; }
	#page-about .principle-icon { flex: none; width: 52px; height: 52px; aspect-ratio: auto; align-self: flex-start; border-radius: 5px; }
	#page-about .principle-icon svg { width: 24px; height: 24px; }
	#page-about .principle h3 { margin-bottom: 8px; font-size: 1.4rem; }
	#page-about .principle p { font-size: 0.9rem; line-height: 1.55; }
}

/* About awards, tablet: three cards per row (the last row stays centred) */
@media (min-width: 721px) and (max-width: 1080px) {
	#page-about .about-awards .award-grid { gap: 14px; }
	#page-about .about-awards .award-card { flex-basis: calc((100% - 28px) / 3); max-width: calc((100% - 28px) / 3); min-height: 0; }
	#page-about .about-awards .award-open { flex-basis: 170px; }
	#page-about .about-awards .award-open figure { height: 170px; padding: 16px; }
	#page-about .about-awards .award-body { padding: 16px 14px 18px; }
	#page-about .about-awards .award-body h3 { font-size: 0.95rem; line-height: 1.3; }
	#page-about .about-awards .award-body p { font-size: 0.78rem; }
}

/* Tablet (and up): the same 1px overlap so no hairline of page shows between the card band and the footer */
@media (min-width: 721px) {
	.cta-card-band { margin-block: -1px; padding-bottom: 69px; }
	.site-footer { margin-top: -1px; }
	#page-about .about-awards { margin-bottom: -1px; }
}

/* Home hero: sized from the page width, not the window height, so it keeps the same proportions on every screen shape (wide, tall, short or ultra-wide) */
.hero-home { min-height: clamp(520px, 51vw, 900px); }
@media (max-width: 600px) {
	.hero-home .hero-content { min-height: clamp(430px, 115vw, 640px); }
	.hero-home .hero-media { height: clamp(430px, 115vw, 640px); }
}

/* Home hero (final): hero plus the solutions row fill exactly the first screen below the header, so a new visitor sees both without scrolling.
   On short windows the hero keeps a minimum height (headline, buttons and the row), so the page scrolls only when the window is too small for them. */
.hero-home { min-height: clamp(520px, calc(100svh - var(--header-real, var(--header-h))), 1400px); }
@media (max-width: 600px) {
	.hero-home { min-height: clamp(580px, calc(100svh - var(--header-real, var(--header-h))), 1400px); }
	.hero-home .hero-content { min-height: 330px; }
	.hero-home .hero-media { inset: 0; height: auto; }
}

/* Phone: the photo fills only the hero area (headline and buttons); the solutions grid below it has its own solid background */
@media (max-width: 600px) {
	.hero-home { display: grid; grid-template-rows: minmax(0, 1fr) auto; }
	.hero-home .hero-media { position: relative; inset: auto; grid-column: 1; grid-row: 1; z-index: 0; height: auto; min-height: 0; }
	.hero-home .hero-media img { position: absolute; inset: 0; }
	.hero-home .hero-content { position: relative; z-index: 1; grid-column: 1; grid-row: 1; min-height: 330px; align-self: stretch; }
	.hero-home .channels { grid-column: 1; grid-row: 2; position: relative; z-index: 1; }
}

/* Phone: the solutions grid under the hero is a deeper navy than the stats strip below it, so the two bands read as separate */
@media (max-width: 600px) {
	.hero-home .channels { background: #050c1f; }
}

/* ==========================================================================
   Networking & Network (client-update design in the v3 palette): .nw-
   ========================================================================== */
.nw-blue { color: var(--royal); }
.nw-wrap { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(36px, 5vw, 64px); }
.nw-split { align-items: center; }
.nw-split .sd-title { max-width: none; }
.nw-split .sd-photo { height: auto; aspect-ratio: 4 / 3; align-self: center; }

/* three supporting points, then a banner */
.nw-points { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0; padding: 0; list-style: none; }
.nw-points li { display: flex; align-items: center; gap: 16px; padding: 4px 24px; border-left: 1px solid var(--line); }
.nw-points li:first-child { padding-left: 0; border-left: 0; }
.nw-points .sd-icon { width: 54px; height: 54px; }
.nw-points .sd-icon svg { width: 26px; height: 26px; }
.nw-points strong { color: var(--navy-900); font-size: 1.05rem; line-height: 1.35; }
.nw-banner { display: flex; align-items: center; gap: 20px; margin: 0; padding: 22px 30px; border-left: 8px solid #ee1b24; border-radius: 5px; background: linear-gradient(90deg, #2a3d9a, var(--navy-900)); color: var(--white); font-size: clamp(1.05rem, 1.8vw, 1.45rem); font-weight: 700; line-height: 1.35; }
.nw-banner-icon { flex: none; width: 46px; height: 46px; padding-right: 20px; box-sizing: content-box; border-right: 1px solid rgba(255, 255, 255, 0.35); }
.nw-banner-icon svg { width: 100%; height: 100%; }

/* core infrastructure: icon block + white card rows, and the illustration on a white card */
.nw-core { align-items: stretch; }
.nw-core .sd-copy .sd-title { max-width: none; }
.nw-cards { display: grid; gap: 14px; margin: 0; padding: 0; list-style: none; }
.nw-cards li { display: grid; grid-template-columns: 92px minmax(0, 1fr); overflow: hidden; border-radius: 5px; background: var(--white); box-shadow: 0 10px 26px rgba(11, 26, 61, 0.08); }
.nw-cards-icon { display: grid; place-items: center; background: linear-gradient(160deg, #2a3d9a, var(--navy-900)); color: var(--white); clip-path: polygon(0 0, 100% 0, 84% 100%, 0 100%); padding-right: 12px; }
.nw-cards-icon svg { width: 32px; height: 32px; }
.nw-cards div { display: grid; align-content: center; gap: 6px; padding: 18px 24px; }
.nw-cards h3 { margin: 0; color: var(--navy-900); font-size: 1.12rem; }
.nw-cards p { margin: 0; color: var(--slate); font-size: 0.96rem; line-height: 1.55; }
.nw-note { margin-top: 18px; }
.nw-illustration { align-self: center; height: auto; aspect-ratio: 1 / 1; max-height: 640px; border-radius: 5px; background: var(--white); }
.nw-illustration img { object-fit: contain; padding: 18px; }

/* wireless: list in the overview style, then a process card with red arrows */
.nw-why { margin-top: 28px; }
.nw-why li { align-items: center; padding-block: 16px; }
.nw-flow { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; margin: 0; padding: 28px 24px; list-style: none; border: 1px solid #c8d0f0; border-radius: 5px; background: var(--white); box-shadow: 0 12px 36px rgba(11, 26, 61, 0.08); }
.nw-flow li { position: relative; display: grid; justify-items: center; gap: 12px; text-align: center; }
.nw-flow-icon { display: grid; width: clamp(64px, 6vw, 84px); height: clamp(64px, 6vw, 84px); place-items: center; border: 2px solid var(--navy-900); border-radius: 50%; background: var(--paper); color: var(--navy-900); }
.nw-flow-icon svg { width: 46%; height: 46%; }
.nw-flow strong { color: var(--navy-900); font-size: 1.1rem; }
.nw-flow li:not(:last-child)::after { position: absolute; top: calc(clamp(64px, 6vw, 84px) / 2 - 11px); right: -6px; width: 0; height: 0; border-top: 11px solid transparent; border-bottom: 11px solid transparent; border-left: 16px solid #ee1b24; content: ""; transform: translateX(50%); }

/* from requirements to reliable operations: steps | photo | dark "Why KLG" card */
.nw-ops { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.9fr) minmax(0, 0.85fr); gap: clamp(20px, 2.6vw, 36px); align-items: stretch; }
.nw-ops-steps { min-width: 0; }
.nw-ops-steps .sd-title { max-width: none; margin-bottom: 8px; font-size: clamp(1.9rem, 3.4vw, 2.8rem); }
.nw-ops .sd-ladder li { grid-template-columns: 82px minmax(0, 1fr); }
.nw-ops .sd-ladder-icon { min-height: 96px; }
.nw-ops-photo { height: auto; min-height: 420px; }
.nw-ops-photo img { object-position: 60% 40%; }
.nw-ops-why { padding: 30px 26px; border-radius: 5px; background: var(--navy-900); color: var(--white); }
.nw-ops-why h3 { margin: 0; color: var(--white); font-size: 1.7rem; }
.nw-ops-why ul { margin: 0; padding: 0; list-style: none; }
.nw-ops-why li { display: flex; align-items: center; gap: 16px; padding: 18px 0; border-top: 1px solid rgba(255, 255, 255, 0.18); }
.nw-ops-why li:first-child { border-top: 0; }
.nw-ops-why li span { flex: none; width: 40px; height: 40px; color: #8ea2ff; }
.nw-ops-why li svg { width: 100%; height: 100%; }
.nw-ops-why strong { color: var(--white); font-size: 1rem; font-weight: 600; line-height: 1.35; }

@media (max-width: 1080px) {
	.nw-split .sd-photo { aspect-ratio: 16 / 10; }
	.nw-illustration { aspect-ratio: 4 / 3; max-height: none; }
	.nw-ops { grid-template-columns: minmax(0, 1fr); }
	.nw-ops-photo { min-height: 0; aspect-ratio: 16 / 10; }
	.nw-flow { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 28px; }
	.nw-flow li::after { display: none; }
}
@media (max-width: 720px) {
	.nw-points { grid-template-columns: minmax(0, 1fr); }
	.nw-points li, .nw-points li:first-child { padding: 14px 0; border-left: 0; border-top: 1px solid var(--line); }
	.nw-points li:first-child { border-top: 0; }
	.nw-banner { padding: 18px 20px; }
	.nw-banner-icon { width: 34px; height: 34px; padding-right: 14px; }
	.nw-cards li { grid-template-columns: 70px minmax(0, 1fr); }
	.nw-cards-icon svg { width: 26px; height: 26px; }
	.nw-cards div { padding: 14px 16px; }
	.nw-flow { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px; padding: 18px 6px; row-gap: 0; }
	.nw-flow-icon { width: 46px; height: 46px; border-width: 1.5px; }
	.nw-flow strong { font-size: 0.68rem; }
	.nw-flow li { gap: 8px; align-content: start; }
	.nw-flow li:not(:last-child)::after { display: block; top: 22px; right: auto; left: calc(50% + 27px); width: calc(100% - 50px); height: 6px; border: 0; background: radial-gradient(circle, #ee1b24 1.5px, transparent 2px) 0 50% / 8px 6px repeat-x; transform: none; }
	.nw-ops-why { padding: 24px 20px; }
}

/* Networking, tablet (768px to 1080px): text and photo stay side by side like the other solution pages */
@media (min-width: 768px) and (max-width: 1080px) {
	.nw-split .sd-photo, .nw-core .sd-photo { height: 100%; aspect-ratio: auto; min-height: 280px; }
	.nw-illustration { align-self: center; height: auto; aspect-ratio: 1 / 1; min-height: 0; }
	.nw-cards li { grid-template-columns: 70px minmax(0, 1fr); }
	.nw-cards div { padding: 14px 16px; }
	.nw-ops { grid-template-columns: minmax(0, 1fr) minmax(0, 0.8fr); }
	.nw-ops-steps { grid-column: 1 / -1; }
	.nw-ops-photo { aspect-ratio: auto; min-height: 340px; }
}
@media (min-width: 768px) and (max-width: 1080px) { .nw-core .sd-photo.nw-illustration { height: auto; aspect-ratio: 1 / 1; min-height: 0; align-self: center; } }

/* Networking, desktop: core infrastructure cards follow the client-update example (pointed icon block, taller cards, blue titles) */
.nw-cards { gap: 18px; }
.nw-cards li { grid-template-columns: 118px minmax(0, 1fr); min-height: 162px; border-radius: 5px; }
.nw-cards-icon { padding: 0; clip-path: polygon(0 0, 76% 0, 100% 50%, 76% 100%, 0 100%); background: linear-gradient(180deg, #2a3d9a 0%, var(--navy-900) 100%); }
.nw-cards-icon svg { width: 36px; height: 36px; margin-right: 14px; }
.nw-cards div { padding: 20px 28px 20px 18px; }
.nw-cards h3 { color: var(--navy-800); font-size: 1.2rem; }
.nw-cards p { font-size: 1rem; }
.nw-core .sd-copy .sd-title { font-size: clamp(2rem, 3.4vw, 3rem); }
@media (max-width: 720px) {
	.nw-cards li { grid-template-columns: 76px minmax(0, 1fr); min-height: 0; }
	.nw-cards-icon svg { width: 26px; height: 26px; margin-right: 10px; }
	.nw-cards div { padding: 14px 16px 14px 8px; }
}
@media (min-width: 768px) and (max-width: 1080px) {
	.nw-cards li { grid-template-columns: 84px minmax(0, 1fr); min-height: 0; }
	.nw-cards-icon svg { width: 28px; height: 28px; margin-right: 12px; }
	.nw-cards div { padding: 14px 16px 14px 8px; }
}

/* Networking core infrastructure: shorter cards and less space above and below the section */
[aria-labelledby="networking-core-title"] { padding-block: clamp(36px, 4.5vw, 60px); }
.nw-cards { gap: 12px; }
.nw-cards li { min-height: 0; }
.nw-cards div { padding: 12px 24px 12px 14px; }
.nw-cards-icon { min-height: 100px; }
.nw-note { margin-top: 14px; padding-block: 16px; }
@media (max-width: 720px) { [aria-labelledby="networking-core-title"] { padding-block: 36px; } .nw-cards-icon { min-height: 84px; } }

/* Networking core infrastructure cards: text about 20% smaller */
.nw-cards h3 { font-size: 0.96rem; }
.nw-cards p { font-size: 0.8rem; line-height: 1.5; }

/* Networking core infrastructure cards: text about 10% larger */
.nw-cards h3 { font-size: 1.06rem; }
.nw-cards p { font-size: 0.88rem; }

/* Networking wireless section: less space above and below */
[aria-labelledby="networking-wireless-title"] { padding-block: clamp(36px, 4.5vw, 60px); }
@media (max-width: 720px) { [aria-labelledby="networking-wireless-title"] { padding-block: 36px; } }

/* Networking "From requirements to reliable operations": more compact, like the client-update example */
[aria-labelledby="networking-ops-title"] { padding-block: clamp(36px, 4.5vw, 60px); }
.nw-ops { gap: clamp(18px, 2.2vw, 30px); }
.nw-ops-steps .sd-title { margin-bottom: 0; font-size: clamp(1.8rem, 3vw, 2.5rem); }
.nw-ops .sd-ladder { gap: 12px; margin-top: 22px; }
.nw-ops .sd-ladder li { grid-template-columns: 76px minmax(0, 1fr); }
.nw-ops .sd-ladder-icon { min-height: 82px; }
.nw-ops .sd-ladder-icon svg { width: 28px; height: 28px; }
.nw-ops .sd-ladder div { gap: 3px; padding: 10px 18px; }
.nw-ops .sd-ladder h3 { font-size: 1rem; }
.nw-ops .sd-ladder p { font-size: 0.88rem; line-height: 1.4; }
.nw-ops-photo { min-height: 0; }
.nw-ops-why { padding: 24px 22px; }
.nw-ops-why h3 { font-size: 1.45rem; }
.nw-ops-why li { padding: 13px 0; }
.nw-ops-why strong { font-size: 0.92rem; }
@media (max-width: 1080px) { .nw-ops-photo { min-height: 300px; } }
@media (max-width: 720px) { [aria-labelledby="networking-ops-title"] { padding-block: 36px; } .nw-ops-photo { min-height: 0; } }

/* Networking overview section: less space above and below */
#networking-overview { padding-block: clamp(36px, 4.5vw, 60px); }
@media (max-width: 720px) { #networking-overview { padding-block: 36px; } }

/* Networking wireless process card, tablet (721px to 1080px): all five steps in one row with red arrows between them */
@media (min-width: 721px) and (max-width: 1080px) {
	.nw-flow { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; row-gap: 0; padding: 22px 16px; }
	.nw-flow li { gap: 10px; align-content: start; }
	.nw-flow-icon { width: 52px; height: 52px; }
	.nw-flow strong { font-size: 0.9rem; }
	.nw-flow li:not(:last-child)::after { display: block; top: 15px; right: -4px; width: 0; height: 0; border-top: 8px solid transparent; border-bottom: 8px solid transparent; border-left: 12px solid #ee1b24; background: none; transform: translateX(50%); }
}

/* Networking wireless photo, tablet: about 20% shorter, centred beside the list */
@media (min-width: 768px) and (max-width: 1080px) {
	[aria-labelledby="networking-wireless-title"] .nw-split .sd-photo { height: 80%; align-self: center; min-height: 0; }
}

/* Networking "From requirements to reliable operations", tablet (721px to 1080px): steps | photo | Why KLG in three columns, like the client-update tablet layout */
@media (min-width: 721px) and (max-width: 1080px) {
	.nw-ops { grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.7fr) minmax(0, 0.85fr); gap: 14px; }
	.nw-ops-steps { grid-column: auto; }
	.nw-ops-steps .sd-title { font-size: clamp(1.4rem, 3vw, 1.8rem); }
	.nw-ops .sd-ladder { gap: 8px; margin-top: 14px; padding-left: 22px; }
	.nw-ops .sd-ladder li { grid-template-columns: 52px minmax(0, 1fr); }
	.nw-ops .sd-ladder-icon { min-height: 0; }
	.nw-ops .sd-ladder-icon svg { width: 20px; height: 20px; }
	.nw-ops .sd-ladder div { gap: 2px; padding: 8px 10px; }
	.nw-ops .sd-ladder h3 { font-size: 0.84rem; }
	.nw-ops .sd-ladder p { font-size: 0.72rem; line-height: 1.35; }
	.nw-ops-photo { height: auto; aspect-ratio: auto; min-height: 0; align-self: stretch; }
	.nw-ops-why { padding: 20px 14px; }
	.nw-ops-why h3 { font-size: 1.25rem; }
	.nw-ops-why li { gap: 10px; padding: 11px 0; }
	.nw-ops-why li span { width: 26px; height: 26px; }
	.nw-ops-why strong { font-size: 0.78rem; line-height: 1.3; }
}

/* Audio page: each of the four sections enters in its own way ---------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
	/* 1. Engineered around your space: copy slides in from the left, photo from the right, list rows follow one by one */
	#audio-overview .sd-copy.reveal-item, #audio-overview .sd-photo.reveal-item { transition: opacity 1s cubic-bezier(0.22, 1, 0.36, 1) var(--d, 0s), transform 1s cubic-bezier(0.22, 1, 0.36, 1) var(--d, 0s); }
	#audio-overview .sd-copy.reveal-item:not(.is-in) { opacity: 0; transform: translateX(-70px); }
	#audio-overview .sd-photo.reveal-item:not(.is-in) { opacity: 0; transform: translateX(70px); }
	#audio-overview .sd-why li.reveal-item { transition: opacity 0.7s ease calc(0.3s + var(--d, 0s)), transform 0.7s ease calc(0.3s + var(--d, 0s)); }
	#audio-overview .sd-why li.reveal-item:not(.is-in) { opacity: 0; transform: translateY(18px); }

	/* 2. Audio solutions: the photo cards rise and grow into place, left to right */
	[aria-labelledby="audio-solutions-title"] .sd-photos li.reveal-item { transition: opacity 0.8s cubic-bezier(0.22, 1, 0.36, 1) calc(0.1s + var(--d, 0s)), transform 0.8s cubic-bezier(0.22, 1, 0.36, 1) calc(0.1s + var(--d, 0s)); }
	[aria-labelledby="audio-solutions-title"] .sd-photos li.reveal-item:not(.is-in) { opacity: 0; transform: translateY(46px) scale(0.92); }
	[aria-labelledby="audio-solutions-title"] .sd-title.reveal-item:not(.is-in) { transform: translateY(-22px); }

	/* 3. A complete audio ecosystem: the rail draws down, the step cards slide in one after another, the speakers settle in with a slow zoom */
	[aria-labelledby="audio-ecosystem-title"] .sd-ladder.reveal-item { opacity: 1; transform: none; transition: none; }
	[aria-labelledby="audio-ecosystem-title"] .sd-ladder::before { transform-origin: top; transition: transform 1.2s cubic-bezier(0.65, 0, 0.35, 1); }
	[aria-labelledby="audio-ecosystem-title"] .sd-ladder.reveal-item:not(.is-in)::before { transform: scaleY(0); }
	[aria-labelledby="audio-ecosystem-title"] .sd-ladder li.reveal-item { transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1) calc(0.15s + var(--d, 0s)), transform 0.7s cubic-bezier(0.22, 1, 0.36, 1) calc(0.15s + var(--d, 0s)); }
	[aria-labelledby="audio-ecosystem-title"] .sd-ladder li.reveal-item:not(.is-in) { opacity: 0; transform: translateX(-60px); }
	[aria-labelledby="audio-ecosystem-title"] .sd-photo.reveal-item { transition: opacity 1.3s ease var(--d, 0s), transform 1.6s cubic-bezier(0.22, 1, 0.36, 1) var(--d, 0s); }
	[aria-labelledby="audio-ecosystem-title"] .sd-photo.reveal-item:not(.is-in) { opacity: 0; transform: scale(1.1); }

	/* 4. Designed for everyday communication: the photo is wiped in from the right, the use tiles pop in */
	[aria-labelledby="audio-everyday-title"] .sd-photo.reveal-item { transition: clip-path 1.2s cubic-bezier(0.77, 0, 0.175, 1), opacity 0.4s ease; }
	[aria-labelledby="audio-everyday-title"] .sd-photo.reveal-item:not(.is-in) { opacity: 1; transform: none; clip-path: inset(0 0 0 100% round 5px); }
	[aria-labelledby="audio-everyday-title"] .sd-photo.reveal-item.is-in { clip-path: inset(0 0 0 0 round 5px); }
	[aria-labelledby="audio-everyday-title"] .sd-uses li.reveal-item { transition: opacity 0.55s ease calc(0.2s + var(--d, 0s)), transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) calc(0.2s + var(--d, 0s)); }
	[aria-labelledby="audio-everyday-title"] .sd-uses li.reveal-item:not(.is-in) { opacity: 0; transform: scale(0.82); }
}

/* All solutions page: the two sections enter differently ------------------------------------------------ */
@media (prefers-reduced-motion: no-preference) {
	/* Solution cards: each card rises into place column by column while its photo settles from a slight zoom */
	#page-solutions .catalogue-card.reveal-item { transition: opacity 0.9s cubic-bezier(0.22, 1, 0.36, 1) var(--d, 0s), transform 0.9s cubic-bezier(0.22, 1, 0.36, 1) var(--d, 0s); }
	#page-solutions .catalogue-card.reveal-item:not(.is-in) { opacity: 0; transform: translateY(56px); }
	#page-solutions .catalogue-card.reveal-item:nth-child(3n + 2) { --d: 0.12s !important; }
	#page-solutions .catalogue-card.reveal-item:nth-child(3n) { --d: 0.24s !important; }
	#page-solutions .catalogue-card.reveal-item:nth-child(3n + 1) { --d: 0s !important; }
	#page-solutions .catalogue-card figure img { transition: transform 1.4s cubic-bezier(0.22, 1, 0.36, 1) var(--d, 0s); }
	#page-solutions .catalogue-card.reveal-item:not(.is-in) figure img { transform: scale(1.14); }

	/* How we deliver every project: the four steps drop in one after another down the staircase, and the connectors draw between them */
	#page-solutions .process-flow > li.reveal-item { transition: opacity 0.8s cubic-bezier(0.34, 1.3, 0.64, 1) calc(var(--d, 0s) * 2.5), transform 0.8s cubic-bezier(0.34, 1.3, 0.64, 1) calc(var(--d, 0s) * 2.5); }
	#page-solutions .process-flow > li.reveal-item:not(.is-in) { opacity: 0; transform: translateY(-46px) scale(0.94); }
	#page-solutions .process-flow-connector path { stroke-dasharray: 90; stroke-dashoffset: 0; transition: stroke-dashoffset 0.8s ease calc(var(--d, 0s) * 2.5 + 0.55s); }
	#page-solutions .process-flow > li.reveal-item:not(.is-in) .process-flow-connector path { stroke-dashoffset: 90; }
	#page-solutions .process-flow-connector circle { transform-box: fill-box; transform-origin: center; transition: transform 0.4s ease calc(var(--d, 0s) * 2.5 + 1.2s), opacity 0.4s ease calc(var(--d, 0s) * 2.5 + 1.2s); }
	#page-solutions .process-flow > li.reveal-item:not(.is-in) .process-flow-connector circle { transform: scale(0); opacity: 0; }
}

/* Visual page: each of the four sections enters in its own way --------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
	/* 1. Visual clarity. Connected spaces.: the photo is unveiled from the bottom edge upward, the four list rows slide in from the left */
	#visual-overview .sd-photo.reveal-item { transition: clip-path 1.2s cubic-bezier(0.77, 0, 0.175, 1), opacity 0.4s ease; }
	#visual-overview .sd-photo.reveal-item:not(.is-in) { opacity: 1; transform: none; clip-path: inset(100% 0 0 0 round 5px); }
	#visual-overview .sd-photo.reveal-item.is-in { clip-path: inset(0 0 0 0 round 5px); }
	#visual-overview .sd-why li.reveal-item { transition: opacity 0.7s ease calc(0.25s + var(--d, 0s)), transform 0.7s cubic-bezier(0.22, 1, 0.36, 1) calc(0.25s + var(--d, 0s)); }
	#visual-overview .sd-why li.reveal-item:not(.is-in) { opacity: 0; transform: translateX(-44px); }

	/* 2. The Visual System portfolio: the photo rises, the rail draws down, and the six items arrive from the right with their red markers popping in */
	.vs-portfolio-photo.reveal-item { transition: opacity 1s ease, transform 1.1s cubic-bezier(0.22, 1, 0.36, 1); }
	.vs-portfolio-photo.reveal-item:not(.is-in) { opacity: 0; transform: translateY(60px); }
	.vs-portfolio-list.reveal-item { opacity: 1; transform: none; transition: none; }
	.vs-portfolio-list::before { transform-origin: top; transition: transform 1.4s cubic-bezier(0.65, 0, 0.35, 1) 0.2s; }
	.vs-portfolio-list.reveal-item:not(.is-in)::before { transform: scaleY(0); }
	.vs-portfolio-list li.reveal-item { transition: opacity 0.7s ease calc(0.3s + var(--d, 0s) * 1.5), transform 0.8s cubic-bezier(0.22, 1, 0.36, 1) calc(0.3s + var(--d, 0s) * 1.5); }
	.vs-portfolio-list li.reveal-item:not(.is-in) { opacity: 0; transform: translateX(48px); }
	.vs-portfolio-list li::before { transition: transform 0.5s cubic-bezier(0.34, 1.7, 0.64, 1) calc(0.5s + var(--d, 0s) * 1.5); }
	.vs-portfolio-list li.reveal-item:not(.is-in)::before { transform: scale(0); }

	/* 3. Built for the way people gather: the intro fades up, each photo slides in from the left and its dark panel from the right */
	.vs-gather-photo.reveal-item { transition: opacity 0.9s ease var(--d, 0s), transform 1s cubic-bezier(0.22, 1, 0.36, 1) var(--d, 0s); }
	.vs-gather-photo.reveal-item:not(.is-in) { opacity: 0; transform: translateX(-90px); }
	.vs-gather-panel.reveal-item { transition: opacity 0.9s ease var(--d, 0s), transform 1s cubic-bezier(0.22, 1, 0.36, 1) var(--d, 0s); }
	.vs-gather-panel.reveal-item:not(.is-in) { opacity: 0; transform: translateX(90px); }

	/* 4. From brief to experience: title and photo settle in, the white steps card rises, then its five icons spin in one by one */
	.vs-journey-photo.reveal-item { transition: opacity 1s ease, transform 1.2s cubic-bezier(0.22, 1, 0.36, 1); }
	.vs-journey-photo.reveal-item:not(.is-in) { opacity: 0; transform: scale(0.9) translateY(24px); }
	.vs-steps.reveal-item { transition: opacity 0.9s ease 0.1s, transform 1s cubic-bezier(0.22, 1, 0.36, 1) 0.1s; }
	.vs-steps.reveal-item:not(.is-in) { opacity: 0; transform: translateY(70px); }
	.vs-steps li.reveal-item { transition: opacity 0.6s ease calc(0.4s + var(--d, 0s) * 2), margin-top 0s; }
	.vs-steps li.reveal-item:not(.is-in) { opacity: 0; transform: none; }
	.vs-step-icon { transition: transform 0.8s cubic-bezier(0.34, 1.5, 0.64, 1) calc(0.4s + var(--d, 0s) * 2); }
	.vs-steps li.reveal-item:not(.is-in) .vs-step-icon { transform: scale(0) rotate(-140deg); }
}

/* Digital Signage page: each of the four sections enters in its own way ------------------------------------ */
@media (prefers-reduced-motion: no-preference) {
	/* 1. Digital signage, designed around your space: the photo zooms out into its frame, the three service blocks pop up from below */
	#signage-overview .sd-photo.reveal-item { transition: opacity 1s ease, transform 1.5s cubic-bezier(0.22, 1, 0.36, 1); }
	#signage-overview .sd-photo.reveal-item:not(.is-in) { opacity: 0; transform: scale(1.12); }
	.ds-services article.reveal-item { transition: opacity 0.7s ease calc(0.2s + var(--d, 0s)), transform 0.8s cubic-bezier(0.34, 1.4, 0.64, 1) calc(0.2s + var(--d, 0s)); }
	.ds-services article.reveal-item:not(.is-in) { opacity: 0; transform: translateY(36px) scale(0.94); }
	.ds-services article.reveal-item .ds-service-icon { transition: transform 0.8s cubic-bezier(0.34, 1.5, 0.64, 1) calc(0.4s + var(--d, 0s)); }
	.ds-services article.reveal-item:not(.is-in) .ds-service-icon { transform: rotate(-12deg) scale(0.6); }

	/* 2. One platform. Many experiences.: each blue label unrolls from the left edge of its photo while the photo wipes in from the right */
	.ds-platform-intro.reveal-item { transition: opacity 0.9s ease, transform 0.9s cubic-bezier(0.22, 1, 0.36, 1); }
	.ds-platform-intro.reveal-item:not(.is-in) { opacity: 0; transform: translateX(-50px); }
	.ds-platform-label.reveal-item { transition: opacity 0.6s ease calc(var(--d, 0s) * 2), transform 0.9s cubic-bezier(0.22, 1, 0.36, 1) calc(var(--d, 0s) * 2); }
	.ds-platform-label.reveal-item:not(.is-in) { opacity: 0; transform: translateX(-80px); }
	.ds-platform-photo.reveal-item { transition: clip-path 1.1s cubic-bezier(0.77, 0, 0.175, 1) calc(0.15s + var(--d, 0s) * 2), opacity 0.3s ease; }
	.ds-platform-photo.reveal-item:not(.is-in) { opacity: 1; transform: none; clip-path: inset(0 0 0 100%); }
	.ds-platform-photo.reveal-item.is-in { clip-path: inset(0 0 0 0); }

	/* 3. From brief to bright screen: the copy fades up, the photo drops in from above, the five step cards then light up left to right */
	[aria-labelledby="signage-path-title"] .sd-copy.reveal-item { transition: opacity 0.9s ease, transform 0.9s cubic-bezier(0.22, 1, 0.36, 1); }
	[aria-labelledby="signage-path-title"] .sd-copy.reveal-item:not(.is-in) { opacity: 0; transform: translateY(30px); }
	[aria-labelledby="signage-path-title"] .sd-photo.reveal-item { transition: opacity 0.9s ease 0.1s, transform 1.1s cubic-bezier(0.22, 1, 0.36, 1) 0.1s; }
	[aria-labelledby="signage-path-title"] .sd-photo.reveal-item:not(.is-in) { opacity: 0; transform: translateY(-50px); }
	.ds-path li.reveal-item { transition: opacity 0.6s ease calc(0.3s + var(--d, 0s) * 1.6), transform 0.7s cubic-bezier(0.34, 1.5, 0.64, 1) calc(0.3s + var(--d, 0s) * 1.6), box-shadow 0.6s ease calc(0.3s + var(--d, 0s) * 1.6); }
	.ds-path li.reveal-item:not(.is-in) { opacity: 0; transform: scale(0.8); }
	.ds-path li::after { transition: opacity 0.5s ease calc(0.7s + var(--d, 0s) * 1.6); }
	.ds-path li.reveal-item:not(.is-in)::after { opacity: 0; }

	/* 4. Why KLG?: the control-room photo slides in from the left, the headline from the right, then the four rows rise one after another */
	[aria-labelledby="signage-why-title"] .sd-photo.reveal-item { transition: opacity 1s ease, transform 1.2s cubic-bezier(0.22, 1, 0.36, 1); }
	[aria-labelledby="signage-why-title"] .sd-photo.reveal-item:not(.is-in) { opacity: 0; transform: translateX(-80px); }
	[aria-labelledby="signage-why-title"] .sd-title.reveal-item { transition: opacity 0.9s ease 0.15s, transform 1s cubic-bezier(0.22, 1, 0.36, 1) 0.15s; }
	[aria-labelledby="signage-why-title"] .sd-title.reveal-item:not(.is-in) { opacity: 0; transform: translateX(60px); }
	.ds-why .sd-why li.reveal-item { transition: opacity 0.7s ease calc(0.4s + var(--d, 0s)), transform 0.8s cubic-bezier(0.22, 1, 0.36, 1) calc(0.4s + var(--d, 0s)); }
	.ds-why .sd-why li.reveal-item:not(.is-in) { opacity: 0; transform: translateY(26px); }
}

/* Security & Surveillance page: each of the four sections enters in its own way ----------------------------- */
@media (prefers-reduced-motion: no-preference) {
	/* 1. See more. Respond with confidence.: the red bar grows down the headline, the three service rows slide in from the left with their red markers, the operator photo glides in from the right */
	#security-overview .sc-bar-title.reveal-item { transition: opacity 0.8s ease, transform 0.9s cubic-bezier(0.22, 1, 0.36, 1); }
	#security-overview .sc-bar-title.reveal-item:not(.is-in) { opacity: 0; transform: translateX(-40px); }
	.sc-bar-title::before { transform-origin: top; transition: transform 0.9s cubic-bezier(0.65, 0, 0.35, 1) 0.3s; }
	.sc-bar-title.reveal-item:not(.is-in)::before { transform: scaleY(0); }
	.sc-stages article.reveal-item { transition: opacity 0.7s ease calc(0.3s + var(--d, 0s) * 1.4), transform 0.8s cubic-bezier(0.22, 1, 0.36, 1) calc(0.3s + var(--d, 0s) * 1.4); }
	.sc-stages article.reveal-item:not(.is-in) { opacity: 0; transform: translateX(-60px); }
	.sc-stages article::before { transition: transform 0.6s cubic-bezier(0.34, 1.5, 0.64, 1) calc(0.6s + var(--d, 0s) * 1.4); }
	.sc-stages article.reveal-item:not(.is-in)::before { transform: translateY(-50%) scaleY(0); }
	#security-overview .sd-photo.reveal-item { transition: opacity 1.2s ease 0.1s, transform 1.4s cubic-bezier(0.22, 1, 0.36, 1) 0.1s; }
	#security-overview .sd-photo.reveal-item:not(.is-in) { opacity: 0; transform: translateX(90px); }

	/* 2. Intelligent video visibility: the camera photo is unveiled from the top edge downward, the blue panel unfolds row by row */
	.sc-video-photo.reveal-item { transition: clip-path 1.3s cubic-bezier(0.77, 0, 0.175, 1), opacity 0.3s ease; }
	.sc-video-photo.reveal-item:not(.is-in) { opacity: 1; transform: none; clip-path: inset(0 0 100% 0 round 5px); }
	.sc-video-photo.reveal-item.is-in { clip-path: inset(0 0 0 0 round 5px); }
	.sc-video .sc-panel article.reveal-item { transition: opacity 0.7s ease calc(0.35s + var(--d, 0s) * 1.6), transform 0.8s cubic-bezier(0.22, 1, 0.36, 1) calc(0.35s + var(--d, 0s) * 1.6); }
	.sc-video .sc-panel article.reveal-item:not(.is-in) { opacity: 0; transform: translateY(-24px); }

	/* 3. Control access. Protect flow.: the door-card photo tips up into place, the red rule draws across, the dark rows slide in from the right with their white icon circles popping */
	.sc-access .sc-rule { transform-origin: left; transition: transform 0.9s cubic-bezier(0.65, 0, 0.35, 1) 0.3s; }
	.sc-access .sc-rule.reveal-item:not(.is-in) { opacity: 1; transform: scaleX(0); }
	[aria-labelledby="security-access-title"] .sd-photo.reveal-item { transition: opacity 1s ease, transform 1.2s cubic-bezier(0.22, 1, 0.36, 1); transform-origin: 50% 100%; }
	[aria-labelledby="security-access-title"] .sd-photo.reveal-item:not(.is-in) { opacity: 0; transform: perspective(900px) rotateX(14deg) translateY(50px); }
	.sc-panel-round article.reveal-item { transition: opacity 0.7s ease calc(0.4s + var(--d, 0s) * 1.6), transform 0.8s cubic-bezier(0.22, 1, 0.36, 1) calc(0.4s + var(--d, 0s) * 1.6); }
	.sc-panel-round article.reveal-item:not(.is-in) { opacity: 0; transform: translateX(70px); }
	.sc-panel-round .sc-panel-icon { transition: transform 0.7s cubic-bezier(0.34, 1.7, 0.64, 1) calc(0.7s + var(--d, 0s) * 1.6); }
	.sc-panel-round article.reveal-item:not(.is-in) .sc-panel-icon { transform: scale(0); }

	/* 4. From Requirement to Readiness: the technician photo zooms out of a tighter crop, the four step circles pop in along the dotted line, the note fades up last */
	[aria-labelledby="security-ready-title"] .sd-photo.reveal-item { transition: opacity 1.1s ease, transform 1.6s cubic-bezier(0.22, 1, 0.36, 1); }
	[aria-labelledby="security-ready-title"] .sd-photo.reveal-item:not(.is-in) { opacity: 0; transform: scale(1.14); }
	[aria-labelledby="security-ready-title"] .sd-title.reveal-item, [aria-labelledby="security-ready-title"] .sd-lead.reveal-item { transition: opacity 0.8s ease 0.15s, transform 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.15s; }
	[aria-labelledby="security-ready-title"] .sd-title.reveal-item:not(.is-in), [aria-labelledby="security-ready-title"] .sd-lead.reveal-item:not(.is-in) { opacity: 0; transform: translateY(-24px); }
	.sc-steps li.reveal-item { transition: opacity 0.5s ease calc(0.35s + var(--d, 0s) * 2), transform 0.8s cubic-bezier(0.34, 1.7, 0.64, 1) calc(0.35s + var(--d, 0s) * 2); }
	.sc-steps li.reveal-item:not(.is-in) { opacity: 0; transform: scale(0.4); }
	.sc-steps li::after { transition: opacity 0.5s ease calc(0.6s + var(--d, 0s) * 2); }
	.sc-steps li.reveal-item:not(.is-in)::after { opacity: 0; }
	.sc-note.reveal-item { transition: opacity 0.8s ease 1.1s, transform 0.9s cubic-bezier(0.22, 1, 0.36, 1) 1.1s; }
	.sc-note.reveal-item:not(.is-in) { opacity: 0; transform: translateY(20px); }
}

/* Managed Services & Rental: the two grey sections use the standard dark blue, with light text ---------------- */
.sd-dark .mg-red-lead { color: #ff5a62; }
.sd-dark .sd-ladder::before { background: #8ea2ff; }
.sd-dark .mg-round-photo { box-shadow: 0 24px 56px rgba(0, 0, 0, 0.45); }
.sd-dark .mg-columns { box-shadow: 0 20px 44px rgba(0, 0, 0, 0.35); }
.sd-dark .mg-note { border-color: transparent; border-top-color: #ee1b24; }

/* Managed Services & Rental page: each of the four sections enters in its own way ---------------------------- */
@media (prefers-reduced-motion: no-preference) {
	/* 1. A solution-centric partner: headline and lines rise one after another, the photo is wiped in from the left edge */
	#page-managed #managed-overview .sd-title.reveal-item, #page-managed #managed-overview .sd-lead.reveal-item { transition: opacity 0.8s ease var(--d, 0s), transform 0.9s cubic-bezier(0.22, 1, 0.36, 1) var(--d, 0s); }
	#page-managed #managed-overview .sd-title.reveal-item:not(.is-in), #page-managed #managed-overview .sd-lead.reveal-item:not(.is-in) { opacity: 0; transform: translateY(32px); }
	#page-managed #managed-overview .sd-photo.reveal-item { transition: clip-path 1.3s cubic-bezier(0.77, 0, 0.175, 1) 0.2s, opacity 0.3s ease; }
	#page-managed #managed-overview .sd-photo.reveal-item:not(.is-in) { opacity: 1; transform: none; clip-path: inset(0 100% 0 0 round 5px); }
	#page-managed #managed-overview .sd-photo.reveal-item.is-in { clip-path: inset(0 0 0 0 round 5px); }

	/* 2. Managed services: the headline drops in, the red rule draws, the photo zooms out of its frame, the white card rises and its four columns pop in, then the strip slides in from the left */
	[aria-labelledby="managed-services-title"] .sd-title.reveal-item { transition: opacity 0.8s ease, transform 0.9s cubic-bezier(0.22, 1, 0.36, 1); }
	[aria-labelledby="managed-services-title"] .sd-title.reveal-item:not(.is-in) { opacity: 0; transform: translateY(-28px); }
	[aria-labelledby="managed-services-title"] .sc-rule { transform-origin: left; transition: transform 0.8s cubic-bezier(0.65, 0, 0.35, 1) 0.3s; }
	[aria-labelledby="managed-services-title"] .sc-rule.reveal-item:not(.is-in) { opacity: 1; transform: scaleX(0); }
	[aria-labelledby="managed-services-title"] .sd-lead.reveal-item { transition: opacity 0.8s ease 0.35s; }
	[aria-labelledby="managed-services-title"] .sd-lead.reveal-item:not(.is-in) { opacity: 0; transform: none; }
	[aria-labelledby="managed-services-title"] .sd-photo.reveal-item { transition: opacity 1s ease, transform 1.5s cubic-bezier(0.22, 1, 0.36, 1); }
	[aria-labelledby="managed-services-title"] .sd-photo.reveal-item:not(.is-in) { opacity: 0; transform: scale(1.12); }
	.mg-columns.reveal-item { transition: opacity 0.9s ease 0.1s, transform 1s cubic-bezier(0.22, 1, 0.36, 1) 0.1s; }
	.mg-columns.reveal-item:not(.is-in) { opacity: 0; transform: translateY(60px); }
	.mg-columns li.reveal-item { transition: opacity 0.6s ease calc(0.4s + var(--d, 0s) * 1.6), transform 0.8s cubic-bezier(0.34, 1.5, 0.64, 1) calc(0.4s + var(--d, 0s) * 1.6); }
	.mg-columns li.reveal-item:not(.is-in) { opacity: 0; transform: translateY(26px) scale(0.92); }
	.mg-strip.reveal-item { transition: opacity 0.8s ease 0.9s, transform 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.9s; }
	.mg-strip.reveal-item:not(.is-in) { opacity: 0; transform: translateX(-80px); }

	/* 3. Rent the right technology: the stage photo tips up into place from the bottom, the rental rows fade in with a slight scale, the red-edged note slides in last */
	[aria-labelledby="managed-rent-title"] .sd-photo.reveal-item { transition: opacity 1s ease, transform 1.2s cubic-bezier(0.22, 1, 0.36, 1); transform-origin: 50% 100%; }
	[aria-labelledby="managed-rent-title"] .sd-photo.reveal-item:not(.is-in) { opacity: 0; transform: perspective(900px) rotateX(-12deg) translateY(60px); }
	[aria-labelledby="managed-rent-title"] .sd-title.reveal-item, [aria-labelledby="managed-rent-title"] .sd-lead.reveal-item { transition: opacity 0.8s ease var(--d, 0s), transform 0.9s cubic-bezier(0.22, 1, 0.36, 1) var(--d, 0s); }
	[aria-labelledby="managed-rent-title"] .sd-title.reveal-item:not(.is-in), [aria-labelledby="managed-rent-title"] .sd-lead.reveal-item:not(.is-in) { opacity: 0; transform: translateX(-40px); }
	[aria-labelledby="managed-rent-title"] .sd-why li.reveal-item { transition: opacity 0.7s ease calc(0.3s + var(--d, 0s) * 1.4), transform 0.8s cubic-bezier(0.34, 1.4, 0.64, 1) calc(0.3s + var(--d, 0s) * 1.4); }
	[aria-labelledby="managed-rent-title"] .sd-why li.reveal-item:not(.is-in) { opacity: 0; transform: scale(0.9); }
	[aria-labelledby="managed-rent-title"] .sd-note.reveal-item { transition: opacity 0.8s ease 1s, transform 0.9s cubic-bezier(0.22, 1, 0.36, 1) 1s; }
	[aria-labelledby="managed-rent-title"] .sd-note.reveal-item:not(.is-in) { opacity: 0; transform: translateX(-50px); }

	/* 4. One partner, end-to-end support: the round photo opens like an iris, the rail draws down and the four steps slide in from the left, the closing note rises last */
	.mg-round-photo.reveal-item { transition: clip-path 1.4s cubic-bezier(0.65, 0, 0.35, 1) 0.1s, opacity 0.3s ease; }
	.mg-round-photo.reveal-item:not(.is-in) { opacity: 1; transform: none; clip-path: circle(0% at 50% 50%); }
	.mg-round-photo.reveal-item.is-in { clip-path: circle(100% at 50% 50%); }
	[aria-labelledby="managed-support-title"] .sd-title.reveal-item, [aria-labelledby="managed-support-title"] .sd-lead.reveal-item, [aria-labelledby="managed-support-title"] .mg-red-lead.reveal-item { transition: opacity 0.8s ease var(--d, 0s), transform 0.9s cubic-bezier(0.22, 1, 0.36, 1) var(--d, 0s); }
	[aria-labelledby="managed-support-title"] .sd-title.reveal-item:not(.is-in), [aria-labelledby="managed-support-title"] .sd-lead.reveal-item:not(.is-in), [aria-labelledby="managed-support-title"] .mg-red-lead.reveal-item:not(.is-in) { opacity: 0; transform: translateY(-24px); }
	.mg-support .sd-ladder.reveal-item { opacity: 1; transform: none; transition: none; }
	.mg-support .sd-ladder::before { transform-origin: top; transition: transform 1.2s cubic-bezier(0.65, 0, 0.35, 1) 0.3s; }
	.mg-support .sd-ladder.reveal-item:not(.is-in)::before { transform: scaleY(0); }
	.mg-support .sd-ladder li.reveal-item { transition: opacity 0.7s ease calc(0.4s + var(--d, 0s) * 1.5), transform 0.8s cubic-bezier(0.22, 1, 0.36, 1) calc(0.4s + var(--d, 0s) * 1.5); }
	.mg-support .sd-ladder li.reveal-item:not(.is-in) { opacity: 0; transform: translateX(-70px); }
	.mg-note.reveal-item { transition: opacity 0.9s ease 0.5s, transform 1s cubic-bezier(0.22, 1, 0.36, 1) 0.5s; }
	.mg-note.reveal-item:not(.is-in) { opacity: 0; transform: translateY(40px); }
}

/* Software Solutions: the Cloud library section uses the standard dark blue; its band is a lighter blue so it stands out from the background */
.sd-dark .sw-band { background: linear-gradient(135deg, #3149b4, #273990 60%, #1f2f7c); border: 1px solid rgba(255, 255, 255, 0.18); box-shadow: 0 24px 50px rgba(0, 0, 0, 0.35); }
.sd-dark .sw-band li { border-left-color: rgba(255, 255, 255, 0.22); }
.sd-dark .sd-photo { box-shadow: 0 24px 56px rgba(0, 0, 0, 0.45); }

/* Software Solutions page: each of the three sections enters in its own way ---------------------------------- */
@media (prefers-reduced-motion: no-preference) {
	/* 1. Software built around your workflow: the copy rises line by line, the three workflow rows slide in from the left with their icon circles popping, the photo swings in from the right */
	#page-software #software-overview .sd-title.reveal-item, #page-software #software-overview .sd-lead.reveal-item { transition: opacity 0.8s ease var(--d, 0s), transform 0.9s cubic-bezier(0.22, 1, 0.36, 1) var(--d, 0s); }
	#page-software #software-overview .sd-title.reveal-item:not(.is-in), #page-software #software-overview .sd-lead.reveal-item:not(.is-in) { opacity: 0; transform: translateY(30px); }
	#page-software #software-overview .sd-why li.reveal-item { transition: opacity 0.7s ease calc(0.3s + var(--d, 0s) * 1.5), transform 0.8s cubic-bezier(0.22, 1, 0.36, 1) calc(0.3s + var(--d, 0s) * 1.5); }
	#page-software #software-overview .sd-why li.reveal-item:not(.is-in) { opacity: 0; transform: translateX(-60px); }
	#page-software #software-overview .sd-why li .sd-icon { transition: transform 0.7s cubic-bezier(0.34, 1.7, 0.64, 1) calc(0.55s + var(--d, 0s) * 1.5); }
	#page-software #software-overview .sd-why li.reveal-item:not(.is-in) .sd-icon { transform: scale(0); }
	#page-software #software-overview .sd-photo.reveal-item { transition: opacity 1s ease 0.1s, transform 1.3s cubic-bezier(0.22, 1, 0.36, 1) 0.1s; transform-origin: 100% 50%; }
	#page-software #software-overview .sd-photo.reveal-item:not(.is-in) { opacity: 0; transform: perspective(1000px) rotateY(-16deg) translateX(70px); }

	/* 2. Cloud library system: the headline slides in from the left, the illustration pops in with a bounce, the blue band rises, its red line draws and its four columns light up one by one with spinning icon rings */
	#page-software [aria-labelledby="software-library-title"] .sd-title.reveal-item { transition: opacity 0.8s ease, transform 0.9s cubic-bezier(0.22, 1, 0.36, 1); }
	#page-software [aria-labelledby="software-library-title"] .sd-title.reveal-item:not(.is-in) { opacity: 0; transform: translateX(-60px); }
	#page-software [aria-labelledby="software-library-title"] .sd-lead.reveal-item { transition: opacity 0.8s ease calc(0.2s + var(--d, 0s)); }
	#page-software [aria-labelledby="software-library-title"] .sd-lead.reveal-item:not(.is-in) { opacity: 0; transform: none; }
	#page-software [aria-labelledby="software-library-title"] .sd-photo.reveal-item { transition: opacity 0.7s ease, transform 1s cubic-bezier(0.34, 1.5, 0.64, 1); }
	#page-software [aria-labelledby="software-library-title"] .sd-photo.reveal-item:not(.is-in) { opacity: 0; transform: scale(0.78); }
	.sw-band.reveal-item { transition: opacity 0.9s ease 0.1s, transform 1s cubic-bezier(0.22, 1, 0.36, 1) 0.1s; }
	.sw-band.reveal-item:not(.is-in) { opacity: 0; transform: translateY(70px); }
	.sw-band::before { transform-origin: left; transition: transform 0.9s cubic-bezier(0.65, 0, 0.35, 1) 0.5s; }
	.sw-band.reveal-item:not(.is-in)::before { transform: scaleX(0); }
	.sw-band li.reveal-item { transition: opacity 0.7s ease calc(0.5s + var(--d, 0s) * 1.8), transform 0.8s cubic-bezier(0.22, 1, 0.36, 1) calc(0.5s + var(--d, 0s) * 1.8); }
	.sw-band li.reveal-item:not(.is-in) { opacity: 0; transform: translateY(26px); }
	.sw-band-icon { transition: transform 1s cubic-bezier(0.34, 1.4, 0.64, 1) calc(0.6s + var(--d, 0s) * 1.8); }
	.sw-band li.reveal-item:not(.is-in) .sw-band-icon { transform: rotate(-180deg) scale(0.5); }

	/* 3. Online multimedia archiving: the archive photo drops in from above, the four stages roll in left to right with their chevrons, the red-barred closing line slides in last */
	#page-software [aria-labelledby="software-archive-title"] .sd-title.reveal-item, #page-software [aria-labelledby="software-archive-title"] .sd-lead.reveal-item { transition: opacity 0.8s ease var(--d, 0s), transform 0.9s cubic-bezier(0.22, 1, 0.36, 1) var(--d, 0s); }
	#page-software [aria-labelledby="software-archive-title"] .sd-title.reveal-item:not(.is-in), #page-software [aria-labelledby="software-archive-title"] .sd-lead.reveal-item:not(.is-in) { opacity: 0; transform: translateY(-26px); }
	#page-software [aria-labelledby="software-archive-title"] .sd-photo.reveal-item { transition: opacity 0.9s ease, transform 1.2s cubic-bezier(0.22, 1, 0.36, 1); }
	#page-software [aria-labelledby="software-archive-title"] .sd-photo.reveal-item:not(.is-in) { opacity: 0; transform: translateY(-60px) scale(0.94); }
	.sw-steps.reveal-item { transition: opacity 0.8s ease 0.1s, transform 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.1s; }
	.sw-steps.reveal-item:not(.is-in) { opacity: 0; transform: translateY(40px); }
	.sw-steps li.reveal-item { transition: opacity 0.6s ease calc(0.35s + var(--d, 0s) * 1.8), transform 0.8s cubic-bezier(0.34, 1.5, 0.64, 1) calc(0.35s + var(--d, 0s) * 1.8); }
	.sw-steps li.reveal-item:not(.is-in) { opacity: 0; transform: translateX(-34px) scale(0.9); }
	.sw-steps li::after { transition: opacity 0.5s ease calc(0.7s + var(--d, 0s) * 1.8); }
	.sw-steps li.reveal-item:not(.is-in)::after { opacity: 0; }
	.sw-closing.reveal-item { transition: opacity 0.8s ease 1.1s, transform 0.9s cubic-bezier(0.22, 1, 0.36, 1) 1.1s; }
	.sw-closing.reveal-item:not(.is-in) { opacity: 0; transform: translateX(-60px); }
}

/* Networking: the two grey sections use the standard dark blue; the "Why KLG" card is a lighter blue so it stands out from the background */
.sd-dark .nw-ops-why { background: linear-gradient(160deg, #3149b4, #273990 65%, #1f2f7c); border: 1px solid rgba(255, 255, 255, 0.18); box-shadow: 0 24px 50px rgba(0, 0, 0, 0.35); }
.sd-dark .nw-ops-why li { border-top-color: rgba(255, 255, 255, 0.22); }
.sd-dark .nw-ops-why li span { color: #b9c6ff; }
.sd-dark .nw-illustration, .sd-dark .nw-ops-photo { box-shadow: 0 24px 56px rgba(0, 0, 0, 0.45); }

/* Networking page: each of the four sections enters in its own way ------------------------------------------ */
@media (prefers-reduced-motion: no-preference) {
	/* 1. Networks that support the way you work: the headline and lead rise, the photo is unveiled from the top edge, the three points pop up with their icon circles, the blue banner is wiped across */
	#page-networking #networking-overview .sd-title.reveal-item, #page-networking #networking-overview .sd-lead.reveal-item { transition: opacity 0.8s ease var(--d, 0s), transform 0.9s cubic-bezier(0.22, 1, 0.36, 1) var(--d, 0s); }
	#page-networking #networking-overview .sd-title.reveal-item:not(.is-in), #page-networking #networking-overview .sd-lead.reveal-item:not(.is-in) { opacity: 0; transform: translateY(30px); }
	#page-networking #networking-overview .sd-photo.reveal-item { transition: clip-path 1.3s cubic-bezier(0.77, 0, 0.175, 1) 0.1s, opacity 0.3s ease; }
	#page-networking #networking-overview .sd-photo.reveal-item:not(.is-in) { opacity: 1; transform: none; clip-path: inset(0 0 100% 0 round 5px); }
	#page-networking #networking-overview .sd-photo.reveal-item.is-in { clip-path: inset(0 0 0 0 round 5px); }
	.nw-points li.reveal-item { transition: opacity 0.7s ease calc(0.3s + var(--d, 0s) * 1.5), transform 0.8s cubic-bezier(0.34, 1.4, 0.64, 1) calc(0.3s + var(--d, 0s) * 1.5); }
	.nw-points li.reveal-item:not(.is-in) { opacity: 0; transform: translateY(34px); }
	.nw-points li .sd-icon { transition: transform 0.7s cubic-bezier(0.34, 1.7, 0.64, 1) calc(0.5s + var(--d, 0s) * 1.5); }
	.nw-points li.reveal-item:not(.is-in) .sd-icon { transform: scale(0); }
	.nw-banner.reveal-item { transition: clip-path 1.1s cubic-bezier(0.77, 0, 0.175, 1) 0.8s, opacity 0.3s ease 0.8s; }
	.nw-banner.reveal-item:not(.is-in) { opacity: 1; transform: none; clip-path: inset(0 100% 0 0 round 5px); }
	.nw-banner.reveal-item.is-in { clip-path: inset(0 0 0 0 round 5px); }

	/* 2. Core network infrastructure: the headline drops in, the red rule draws, the four cards slide in from the left one after another, the illustration floats in from the right with a slight turn, the note rises last */
	#page-networking [aria-labelledby="networking-core-title"] .sd-title.reveal-item { transition: opacity 0.8s ease, transform 0.9s cubic-bezier(0.22, 1, 0.36, 1); }
	#page-networking [aria-labelledby="networking-core-title"] .sd-title.reveal-item:not(.is-in) { opacity: 0; transform: translateY(-28px); }
	#page-networking [aria-labelledby="networking-core-title"] .sc-rule { transform-origin: left; transition: transform 0.8s cubic-bezier(0.65, 0, 0.35, 1) 0.3s; }
	#page-networking [aria-labelledby="networking-core-title"] .sc-rule.reveal-item:not(.is-in) { opacity: 1; transform: scaleX(0); }
	.nw-cards li.reveal-item { transition: opacity 0.7s ease calc(0.35s + var(--d, 0s) * 1.6), transform 0.9s cubic-bezier(0.22, 1, 0.36, 1) calc(0.35s + var(--d, 0s) * 1.6); }
	.nw-cards li.reveal-item:not(.is-in) { opacity: 0; transform: translateX(-90px); }
	.nw-illustration.reveal-item { transition: opacity 1s ease 0.2s, transform 1.4s cubic-bezier(0.22, 1, 0.36, 1) 0.2s; }
	.nw-illustration.reveal-item:not(.is-in) { opacity: 0; transform: translateX(80px) rotate(5deg) scale(0.92); }
	.nw-note.reveal-item { transition: opacity 0.8s ease 1.2s, transform 0.9s cubic-bezier(0.22, 1, 0.36, 1) 1.2s; }
	.nw-note.reveal-item:not(.is-in) { opacity: 0; transform: translateY(30px); }

	/* 3. Wireless networks: the headline slides in from the left, the list rows fade in with their circles, the photo zooms out of a tighter crop, then the process card rises and its five circles pop in with the red arrows */
	#page-networking [aria-labelledby="networking-wireless-title"] .sd-title.reveal-item { transition: opacity 0.8s ease, transform 0.9s cubic-bezier(0.22, 1, 0.36, 1); }
	#page-networking [aria-labelledby="networking-wireless-title"] .sd-title.reveal-item:not(.is-in) { opacity: 0; transform: translateX(-60px); }
	.nw-why li.reveal-item { transition: opacity 0.7s ease calc(0.25s + var(--d, 0s) * 1.4); }
	.nw-why li.reveal-item:not(.is-in) { opacity: 0; transform: none; }
	#page-networking [aria-labelledby="networking-wireless-title"] .sd-photo.reveal-item { transition: opacity 1s ease, transform 1.6s cubic-bezier(0.22, 1, 0.36, 1); }
	#page-networking [aria-labelledby="networking-wireless-title"] .sd-photo.reveal-item:not(.is-in) { opacity: 0; transform: scale(1.14); }
	.nw-flow.reveal-item { transition: opacity 0.8s ease 0.1s, transform 1s cubic-bezier(0.22, 1, 0.36, 1) 0.1s; }
	.nw-flow.reveal-item:not(.is-in) { opacity: 0; transform: translateY(50px); }
	.nw-flow li.reveal-item { transition: opacity 0.5s ease calc(0.4s + var(--d, 0s) * 2), transform 0.8s cubic-bezier(0.34, 1.7, 0.64, 1) calc(0.4s + var(--d, 0s) * 2); }
	.nw-flow li.reveal-item:not(.is-in) { opacity: 0; transform: scale(0.5); }
	.nw-flow li::after { transition: opacity 0.4s ease calc(0.7s + var(--d, 0s) * 2); }
	.nw-flow li.reveal-item:not(.is-in)::after { opacity: 0; }

	/* 4. From requirements to reliable operations: the rail draws and the five steps slide in from the left, the engineer photo rises, the Why KLG card flips in from the right and its rows follow */
	#page-networking [aria-labelledby="networking-ops-title"] .sd-title.reveal-item { transition: opacity 0.8s ease, transform 0.9s cubic-bezier(0.22, 1, 0.36, 1); }
	#page-networking [aria-labelledby="networking-ops-title"] .sd-title.reveal-item:not(.is-in) { opacity: 0; transform: translateY(-24px); }
	.nw-ops .sd-ladder.reveal-item { opacity: 1; transform: none; transition: none; }
	.nw-ops .sd-ladder::before { transform-origin: top; transition: transform 1.3s cubic-bezier(0.65, 0, 0.35, 1) 0.3s; }
	.nw-ops .sd-ladder.reveal-item:not(.is-in)::before { transform: scaleY(0); }
	.nw-ops .sd-ladder li.reveal-item { transition: opacity 0.7s ease calc(0.35s + var(--d, 0s) * 1.5), transform 0.8s cubic-bezier(0.22, 1, 0.36, 1) calc(0.35s + var(--d, 0s) * 1.5); }
	.nw-ops .sd-ladder li.reveal-item:not(.is-in) { opacity: 0; transform: translateX(-70px); }
	.nw-ops-photo.reveal-item { transition: opacity 1s ease 0.2s, transform 1.3s cubic-bezier(0.22, 1, 0.36, 1) 0.2s; }
	.nw-ops-photo.reveal-item:not(.is-in) { opacity: 0; transform: translateY(90px) scale(0.95); }
	.nw-ops-why.reveal-item { transition: opacity 0.9s ease 0.4s, transform 1.2s cubic-bezier(0.22, 1, 0.36, 1) 0.4s; transform-origin: 100% 50%; }
	.nw-ops-why.reveal-item:not(.is-in) { opacity: 0; transform: perspective(1000px) rotateY(-24deg) translateX(60px); }
	.nw-ops-why li.reveal-item { transition: opacity 0.6s ease calc(0.9s + var(--d, 0s) * 1.4); }
	.nw-ops-why li.reveal-item:not(.is-in) { opacity: 0; transform: none; }
}

/* Networking page: elements waiting to slide in from the side must not widen the page on small screens */
#page-networking { overflow-x: clip; }

/* About Us and Contact Us: each section enters in its own way ------------------------------------------------ */
#page-about, #page-contact { overflow-x: clip; }
@media (prefers-reduced-motion: no-preference) {
	/* ABOUT 1. Company: the navy "Established 2001" card swings in from the left and its data tiles pop in; the copy rises line by line, the capabilities panel slides in with its bullets, the vision and mission cards come from the right one after the other */
	#page-about .year-card.reveal-item { transition: opacity 1s ease, transform 1.2s cubic-bezier(0.22, 1, 0.36, 1); transform-origin: 0 50%; }
	#page-about .year-card.reveal-item:not(.is-in) { opacity: 0; transform: perspective(1000px) rotateY(18deg) translateX(-80px); }
	#page-about .corporate-data > div.reveal-item { transition: opacity 0.5s ease calc(0.5s + var(--d, 0s) * 0.6), transform 0.7s cubic-bezier(0.34, 1.5, 0.64, 1) calc(0.5s + var(--d, 0s) * 0.6); }
	#page-about .corporate-data > div.reveal-item:not(.is-in) { opacity: 0; transform: scale(0.85); }
	#page-about .about-copy h2.reveal-item, #page-about .about-copy .lead.reveal-item, #page-about .about-copy > p.reveal-item { transition: opacity 0.8s ease calc(0.15s + var(--d, 0s)), transform 0.9s cubic-bezier(0.22, 1, 0.36, 1) calc(0.15s + var(--d, 0s)); }
	#page-about .about-copy h2.reveal-item:not(.is-in), #page-about .about-copy .lead.reveal-item:not(.is-in), #page-about .about-copy > p.reveal-item:not(.is-in) { opacity: 0; transform: translateY(32px); }
	#page-about .profile-capabilities.reveal-item { transition: opacity 0.9s ease 0.3s, transform 1s cubic-bezier(0.22, 1, 0.36, 1) 0.3s; }
	#page-about .profile-capabilities.reveal-item:not(.is-in) { opacity: 0; transform: translateX(-60px); }
	#page-about .profile-capabilities li.reveal-item { transition: opacity 0.6s ease calc(0.6s + var(--d, 0s) * 1.5); }
	#page-about .profile-capabilities li.reveal-item:not(.is-in) { opacity: 0; transform: none; }
	#page-about .principle.reveal-item { transition: opacity 0.9s ease calc(0.2s + var(--d, 0s) * 2), transform 1s cubic-bezier(0.22, 1, 0.36, 1) calc(0.2s + var(--d, 0s) * 2); }
	#page-about .principle.reveal-item:not(.is-in) { opacity: 0; transform: translateX(90px); }
	#page-about .principle .principle-icon { transition: transform 0.8s cubic-bezier(0.34, 1.7, 0.64, 1) calc(0.5s + var(--d, 0s) * 2); }
	#page-about .principle.reveal-item:not(.is-in) .principle-icon { transform: scale(0) rotate(-90deg); }

	/* ABOUT 2. Company structure: the headline drops in, the chart card rises, the two leadership pills grow from the centre, then the five department boxes drop in along the connecting line */
	#page-about .company-structure h2.reveal-item { transition: opacity 0.8s ease, transform 0.9s cubic-bezier(0.22, 1, 0.36, 1); }
	#page-about .company-structure h2.reveal-item:not(.is-in) { opacity: 0; transform: translateY(-28px); }
	#page-about .organisation-chart.reveal-item { transition: opacity 0.9s ease 0.1s, transform 1s cubic-bezier(0.22, 1, 0.36, 1) 0.1s; }
	#page-about .organisation-chart.reveal-item:not(.is-in) { opacity: 0; transform: translateY(60px); }
	#page-about .org-node.reveal-item { transition: opacity 0.6s ease calc(0.4s + var(--d, 0s) * 2), transform 0.8s cubic-bezier(0.34, 1.6, 0.64, 1) calc(0.4s + var(--d, 0s) * 2); }
	#page-about .org-node.reveal-item:not(.is-in) { opacity: 0; transform: scale(0.5); }
	#page-about .org-department.reveal-item { transition: opacity 0.7s ease calc(0.7s + var(--d, 0s) * 1.5), transform 0.8s cubic-bezier(0.22, 1, 0.36, 1) calc(0.7s + var(--d, 0s) * 1.5); }
	#page-about .org-department.reveal-item:not(.is-in) { opacity: 0; transform: translateY(-40px); }

	/* ABOUT 3. Awards: the dark section's heading slides in from the left, and each certificate card flips up from the bottom edge, row by row */
	#page-about .about-awards .section-head.reveal-item { transition: opacity 0.8s ease, transform 0.9s cubic-bezier(0.22, 1, 0.36, 1); }
	#page-about .about-awards .section-head.reveal-item:not(.is-in) { opacity: 0; transform: translateX(-70px); }
	#page-about .about-awards .award-card.reveal-item { transition: opacity 0.8s ease calc(var(--d, 0s) * 1.3), transform 0.9s cubic-bezier(0.22, 1, 0.36, 1) calc(var(--d, 0s) * 1.3); transform-origin: 50% 100%; }
	#page-about .about-awards .award-card.reveal-item:not(.is-in) { opacity: 0; transform: perspective(900px) rotateX(-18deg) translateY(60px); }

	/* CONTACT 1. Contact details: the three cards slide in from the left one after another with their icon tiles popping, the dark panel swings in from the right, its text and buttons rise one by one */
	#page-contact .contact-item.reveal-item { transition: opacity 0.7s ease calc(0.1s + var(--d, 0s) * 1.5), transform 0.9s cubic-bezier(0.22, 1, 0.36, 1) calc(0.1s + var(--d, 0s) * 1.5); }
	#page-contact .contact-item.reveal-item:not(.is-in) { opacity: 0; transform: translateX(-70px); }
	#page-contact .contact-item .contact-item-icon { transition: transform 0.7s cubic-bezier(0.34, 1.7, 0.64, 1) calc(0.4s + var(--d, 0s) * 1.5); }
	#page-contact .contact-item.reveal-item:not(.is-in) .contact-item-icon { transform: scale(0); }
	#page-contact .contact-panel.reveal-item { transition: opacity 1s ease 0.2s, transform 1.2s cubic-bezier(0.22, 1, 0.36, 1) 0.2s; transform-origin: 100% 50%; }
	#page-contact .contact-panel.reveal-item:not(.is-in) { opacity: 0; transform: perspective(1000px) rotateY(-14deg) translateX(80px); }
	#page-contact .contact-panel-content > .reveal-item { transition: opacity 0.7s ease calc(0.5s + var(--d, 0s) * 1.6), transform 0.8s cubic-bezier(0.22, 1, 0.36, 1) calc(0.5s + var(--d, 0s) * 1.6); }
	#page-contact .contact-panel-content > .reveal-item:not(.is-in) { opacity: 0; transform: translateY(26px); }

	/* CONTACT 2. Visit us: the heading and link slide in from the left, and the map is unveiled from the left edge to the right */
	#page-contact .map-heading h2.reveal-item, #page-contact .map-link.reveal-item { transition: opacity 0.8s ease var(--d, 0s), transform 0.9s cubic-bezier(0.22, 1, 0.36, 1) var(--d, 0s); }
	#page-contact .map-heading h2.reveal-item:not(.is-in), #page-contact .map-link.reveal-item:not(.is-in) { opacity: 0; transform: translateX(-50px); }
	#page-contact .map-frame.reveal-item { transition: clip-path 1.3s cubic-bezier(0.77, 0, 0.175, 1) 0.15s, opacity 0.3s ease; }
	#page-contact .map-frame.reveal-item:not(.is-in) { opacity: 1; transform: none; clip-path: inset(0 100% 0 0 round 5px); }
	#page-contact .map-frame.reveal-item.is-in { clip-path: inset(0 0 0 0 round 5px); }
}

/* Projects: pagination (six per page), shown only when more than six projects match */
.projects-pager { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px; margin-top: 44px; }
.projects-pager[hidden] { display: none; }
.pager-pages { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; }
.pager-btn { display: inline-flex; min-width: 44px; height: 44px; align-items: center; justify-content: center; gap: 8px; padding: 0 14px; border: 1px solid var(--line); border-radius: 999px; background: var(--white); color: var(--navy-900); font: inherit; font-size: 0.92rem; font-weight: 700; cursor: pointer; transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease; }
.pager-btn:hover:not(:disabled):not(.is-current) { border-color: var(--navy-900); }
.pager-btn:focus-visible { outline: 2px solid var(--tally); outline-offset: 2px; }
.pager-btn.is-current { border-color: var(--royal); background: var(--royal); color: var(--white); cursor: default; }
.pager-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.pager-step { padding: 0 18px; }
.pager-gap { padding: 0 4px; color: var(--slate); font-weight: 700; }
@media (max-width: 600px) {
	.projects-pager { gap: 8px; margin-top: 34px; }
	.pager-pages { gap: 6px; }
	.pager-btn { min-width: 40px; height: 40px; padding: 0 10px; font-size: 0.88rem; }
	.pager-step .pager-text { display: none; }
	.pager-step { padding: 0 12px; }
}

/* Back-to-top button: logo red with a white icon and a white ring, so it stays visible on the dark navy sections and the footer */
.back-to-top { background: var(--tally); color: var(--white); border: 2px solid var(--white); box-shadow: 0 8px 22px rgba(6, 15, 38, 0.35); }
.back-to-top:hover { background: var(--tally-strong); }

/* Footer: more compact (tighter padding, rows and gaps) */
.site-footer { font-size: 0.875rem; }
.footer-top { gap: 32px 40px; padding-block: 44px 28px; }
.footer-brand { gap: 14px; }
.footer-logo { width: 78px; }
.footer-brand p { max-width: 34ch; line-height: 1.5; }
.footer-brand .btn { padding-block: 10px; }
.footer-col h2 { margin-bottom: 12px; font-size: 0.95rem; }
.footer-col li + li { margin-top: 6px; }
.footer-contact p { gap: 10px; margin-bottom: 8px; line-height: 1.45; }
.footer-contact .icon { margin-top: 2px; width: 16px; height: 16px; }
.footer-social { gap: 8px; margin-top: 10px; }
.footer-social a { width: 34px; height: 34px; }
.footer-social .icon { width: 16px; height: 16px; }
.footer-bottom-inner { padding-block: 14px; }
@media (max-width: 860px) {
	.footer-top { gap: 24px; padding-block: 36px 20px; }
	.footer-brand { grid-column: auto; }
}

/* Footer: a little more breathing room than the compact version, still well short of the original */
.footer-top { gap: 36px 48px; padding-block: 60px 38px; }
.footer-brand { gap: 18px; }
.footer-logo { width: 84px; }
.footer-col h2 { margin-bottom: 16px; }
.footer-col li + li { margin-top: 9px; }
.footer-contact p { gap: 11px; margin-bottom: 11px; }
.footer-social { margin-top: 14px; }
.footer-bottom-inner { padding-block: 18px; }
@media (max-width: 860px) {
	.footer-top { gap: 28px; padding-block: 44px 26px; }
}

/* Footer: more space between the rows of links and contact lines */
.footer-col h2 { margin-bottom: 20px; }
.footer-col li + li { margin-top: 14px; }
.footer-contact p { margin-bottom: 16px; }
.footer-social { margin-top: 18px; }
@media (max-width: 600px) { .footer-col li + li { margin-top: 12px; } .footer-contact p { margin-bottom: 14px; } }

/* Footer: the company name sits beside the logo, like the header */
.footer-lockup { display: inline-flex; align-items: center; gap: 14px; color: var(--white); text-decoration: none; }
.footer-lockup .footer-logo { flex: none; width: 70px; height: auto; }
.footer-lockup-text { display: block; font-family: var(--font-display); font-size: 1.15rem; font-weight: 800; letter-spacing: -0.01em; line-height: 1.15; }
.footer-lockup-text small { display: block; margin-top: 3px; color: var(--steel); font-family: var(--font-display); font-size: 0.62rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; }
@media (max-width: 600px) { .footer-lockup .footer-logo { width: 62px; } .footer-lockup-text { font-size: 1.02rem; } }

/* All pages: content waiting to slide in from the side must never widen the page (works on every screen size) */
.site-main, .page { overflow-x: clip; }
/* Visual portfolio list: let the text wrap inside its column instead of running past the edge */
.vs-portfolio-list { grid-template-columns: minmax(0, 1fr); }
.vs-portfolio-list li { min-width: 0; }
.vs-portfolio-list p { overflow-wrap: anywhere; }

/* Very small phones: the logo and company name shrink so the menu button keeps its full size and stays inside the screen */
.brand { min-width: 0; }
.nav-toggle { flex: none; }
@media (max-width: 380px) {
	.header-inner { gap: 10px; }
	.brand { gap: 9px; }
	.brand-logo { width: 52px; }
	.brand-text { font-size: 0.88rem; }
	.brand-text small { font-size: 0.5rem; letter-spacing: 0.1em; }
}
@media (max-width: 310px) {
	.brand-logo { width: 44px; }
	.brand-text { font-size: 0.78rem; }
	.brand-text small { display: none; }
}

/* ==========================================================================
   Footer layout, every screen size
   desktop (1081px and up): brand | Solutions | Company | Head office
   tablet (601px to 1080px): brand across the top, then the columns underneath
   phone (600px and below): brand, then Solutions and Company side by side, then Head office
   ========================================================================== */
.footer-lockup-text { white-space: nowrap; }
.site-footer .footer-top { grid-template-columns: minmax(290px, 1.25fr) repeat(3, minmax(0, 1fr)); }
.site-footer .footer-brand { grid-column: auto; }
.footer-col a { overflow-wrap: anywhere; }

@media (max-width: 1080px) {
	.site-footer .footer-top { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px 36px; }
	.site-footer .footer-brand { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 32px; row-gap: 14px; }
	.site-footer .footer-brand .footer-lockup { grid-column: 1; }
	.site-footer .footer-brand p { grid-column: 1; max-width: 60ch; margin: 0; }
	.site-footer .footer-brand .btn { grid-column: 2; grid-row: 1 / span 2; align-self: center; white-space: nowrap; }
}
@media (max-width: 860px) {
	.site-footer .footer-top { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 32px; }
	.site-footer .footer-contact { grid-column: 1 / -1; }
}
@media (max-width: 600px) {
	.site-footer .footer-top { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px 20px; padding-block: 40px 22px; }
	.site-footer .footer-brand { display: grid; grid-template-columns: minmax(0, 1fr); }
	.site-footer .footer-brand .btn { grid-column: 1; grid-row: auto; justify-self: start; }
	.footer-col li + li { margin-top: 11px; }
	.footer-bottom-inner { padding-block: 16px; }
}
@media (max-width: 359px) {
	.site-footer .footer-top { grid-template-columns: minmax(0, 1fr); }
}

/* Footer bottom bar: keep the "Back to top" link clear of the floating round button */
@media (max-width: 1500px) { .footer-bottom-inner .text-link { margin-right: 64px; } }

/* Delivery steps, tablet (721px to 1020px): the same four-step staircase as desktop, scaled down, with the elbow connectors */
@media (min-width: 721px) and (max-width: 1020px) {
	.process-flow { --step: clamp(32px, 4.6vw, 48px); grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; }
	.process-flow > li, .process-flow > li:nth-child(n) { padding: 0 20px 0 0; }
	.process-flow > li:nth-child(2) { margin-top: var(--step); }
	.process-flow > li:nth-child(3) { margin-top: calc(var(--step) * 2); }
	.process-flow > li:nth-child(4) { margin-top: calc(var(--step) * 3); }
	.process-flow-step { border-radius: 5px; }
	.process-flow-image figcaption { right: 11px; bottom: 10px; left: 11px; }
	.process-flow-label { margin-bottom: 3px; font-size: 0.52rem; letter-spacing: 0.1em; }
	.process-flow h3 { font-size: clamp(0.82rem, 1.7vw, 1rem); }
	.process-flow-description { padding: 12px 12px 14px; font-size: clamp(0.72rem, 1.5vw, 0.84rem); line-height: 1.5; }
	.process-flow-connector { display: block; top: calc(7.5vw - 20px); left: calc(100% - 20px); width: 20px; height: calc(var(--step) + 8px); }
	.process-flow-mobile-elbow { display: none; }
}

/* Delivery steps, tablet: wider, shorter cards (narrower gaps, a wider and flatter photo, tighter text block) */
@media (min-width: 721px) and (max-width: 1020px) {
	.process-flow > li, .process-flow > li:nth-child(n) { padding: 0 14px 0 0; }
	.process-flow-image { aspect-ratio: 2 / 1; }
	.process-flow-image figcaption { right: 10px; bottom: 8px; left: 10px; }
	.process-flow h3 { font-size: clamp(0.78rem, 1.55vw, 0.94rem); }
	.process-flow-description { padding: 9px 11px 11px; font-size: clamp(0.7rem, 1.4vw, 0.8rem); line-height: 1.42; }
	.process-flow-connector { top: calc(5.6vw - 14px); left: calc(100% - 14px); width: 14px; }
}

/* Delivery steps, tablet (721px to 1020px): long horizontal cards (photo left, text right), stacked and stepping in to the right, joined by elbow connectors */
@media (min-width: 721px) and (max-width: 1020px) {
	.process-flow { --step: 38px; --gap: 32px; grid-template-columns: minmax(0, 1fr); gap: 0; }
	.process-flow > li, .process-flow > li:nth-child(n) { margin-top: var(--gap); padding: 0; }
	.process-flow > li:nth-child(1) { margin-top: 0; margin-left: 0; }
	.process-flow > li:nth-child(2) { margin-left: var(--step); }
	.process-flow > li:nth-child(3) { margin-left: calc(var(--step) * 2); }
	.process-flow > li:nth-child(4) { margin-left: calc(var(--step) * 3); }
	.process-flow-step { display: grid; grid-template-columns: minmax(0, 0.42fr) minmax(0, 0.58fr); align-items: stretch; border-radius: 5px; }
	.process-flow-image { aspect-ratio: auto; min-height: 128px; height: 100%; }
	.process-flow-image img { position: absolute; inset: 0; }
	.process-flow-image figcaption { right: 16px; bottom: 14px; left: 16px; }
	.process-flow-label { margin-bottom: 4px; font-size: 0.6rem; }
	.process-flow h3 { font-size: 1.08rem; }
	.process-flow-description { display: flex; align-items: center; padding: 16px 22px; font-size: 0.95rem; line-height: 1.5; }
	.process-flow-connector { display: none; }
	/* elbow from under one card to the left edge of the next, ending in a dot */
	.process-flow > li:not(:last-child)::after { position: absolute; z-index: 0; top: 100%; left: 22px; width: calc(var(--step) - 22px); height: calc(var(--gap) + 52px); border-bottom: 2px solid var(--royal); border-left: 2px solid var(--royal); border-bottom-left-radius: 8px; content: ""; }
	.process-flow-mobile-elbow { position: absolute; z-index: 2; top: calc(100% + var(--gap) + 47px); left: calc(var(--step) - 6px); display: block; width: 10px; height: 10px; box-sizing: border-box; border: 2px solid var(--royal); border-radius: 50%; background: var(--white); }
	.process-flow > li:last-child .process-flow-mobile-elbow { display: none; }
}
@media (min-width: 721px) and (max-width: 1020px) { .process-flow-step { grid-template-columns: 260px minmax(0, 1fr); } }

/* Closing card, tablet and phone (stacked): a wide, short photo instead of a tall one, keeping the face in view */
@media (max-width: 900px) {
	.cta-card-image { height: clamp(190px, 30vw, 290px); min-height: 0; }
	.cta-card-image img { object-position: 50% 24%; }
}
@media (max-width: 600px) {
	.cta-card-image { height: clamp(170px, 52vw, 240px); }
}

/* Open menu: the panel starts 1px under the header (fallback value too), so no sliver of page shows between them */
@media (max-width: 1080px) { .site-nav { inset-block-start: var(--nav-top, calc(var(--header-h) - 1px)); } }

/* ==========================================================================
   Phone menu, in the theme's own language: a full-width navy panel (like the hero and footer), big Jakarta links
   on ruled rows with red chevrons, the solutions as the same ruled two-column table as the hero channels,
   a red pill for Contact Us and the contact details underneath.
   ========================================================================== */
.nav-contact { display: none; }
@media (max-width: 767px) {
	.site-nav { inset: var(--nav-top, calc(var(--header-h) - 1px)) 0 0 0; width: 100%; padding: 6px 20px 32px; background: radial-gradient(640px 320px at 100% 0%, rgba(39, 57, 144, 0.5), transparent 65%), var(--navy-950); border-left: 0; box-shadow: none; opacity: 0; transform: translateY(-14px); transition: transform 0.32s ease, opacity 0.28s ease, visibility 0s linear 0.32s; }
	.nav-open .site-nav { opacity: 1; transform: none; transition: transform 0.32s ease, opacity 0.28s ease, visibility 0s; }
	.menu { margin: 0; padding: 0; }
	.site-nav .menu-item { border-bottom: 1px solid var(--line-dark); }
	.site-nav .menu-link { position: relative; display: flex; width: 100%; align-items: center; justify-content: space-between; padding: 19px 0; color: var(--white); font-size: 1.22rem; font-weight: 700; letter-spacing: -0.015em; }
	/* red chevron on every plain link, the existing arrow on Solutions */
	.site-nav .menu-link::after { position: static; display: block; width: 9px; height: 9px; flex: none; margin-right: 4px; border: 0; border-top: 2.5px solid var(--tally); border-right: 2.5px solid var(--tally); border-radius: 0; background: none; content: ""; opacity: 1; transform: rotate(45deg); }
	.site-nav .has-mega > .menu-link::after { display: none; }
	.site-nav .menu-link[aria-current] { padding-left: 20px; }
	.site-nav .menu-link[aria-current]::before { position: absolute; top: 50%; left: 0; width: 9px; height: 9px; border-radius: 50%; background: var(--tally); box-shadow: 0 0 0 4px rgba(238, 27, 36, 0.2); content: ""; transform: translateY(-50%); }
	.site-nav .has-mega > .menu-link .icon { width: 20px; height: 20px; color: var(--royal-bright); }
	.site-nav .has-mega > .menu-link[aria-current]::after { display: none; }

	/* the solutions: the same ruled two-column table as the hero channels */
	.site-nav .mega-inner { width: 100%; margin: 0; padding: 0 0 18px; }
	.site-nav .mega-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; margin: 0; padding: 0; overflow: hidden; border: 1px solid rgba(255, 255, 255, 0.14); border-radius: 5px; background: rgba(255, 255, 255, 0.14); }
	.site-nav .mega-list li { margin: 0; padding: 0; background: var(--navy-900); }
	.site-nav .mega-list li:last-child { grid-column: 1 / -1; text-align: center; }
	.site-nav .mega-list a { display: flex; align-items: center; min-height: 58px; padding: 12px 16px; color: var(--white); font-size: 0.92rem; font-weight: 650; line-height: 1.3; }
	.site-nav .mega-list a::before { content: none; }
	.site-nav .mega-list li:last-child a { justify-content: center; }
	.site-nav .mega-list strong { color: inherit; font-size: inherit; font-weight: inherit; }
	.site-nav .mega-list a[aria-current] { color: var(--white); box-shadow: inset 3px 0 0 var(--tally); background: rgba(255, 255, 255, 0.06); }
	.site-nav .mega-list a:hover, .site-nav .mega-list a:focus-visible { background: rgba(255, 255, 255, 0.08); color: var(--white); }
	.site-nav .mega-all { grid-column: 1 / -1; }
	.site-nav .mega-all a { justify-content: space-between; min-height: 52px; padding: 12px 16px; color: var(--white); background: rgba(39, 57, 144, 0.5); font-size: 0.95rem; }
	.site-nav .mega-all a::after { width: 8px; height: 8px; border-top: 2.5px solid var(--tally); border-right: 2.5px solid var(--tally); content: ""; transform: rotate(45deg); }
	.site-nav .mega-all strong { font-weight: 750; }

	.site-nav .header-cta { align-self: stretch; min-height: 54px; margin-top: 26px; font-size: 1rem; background: var(--tally); box-shadow: 0 12px 24px rgba(209, 18, 28, 0.3); }
	.site-nav .nav-contact { display: grid; gap: 6px; margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--line-dark); }
	.nav-contact small { color: var(--steel); font-size: 0.68rem; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; }
	.nav-contact a { color: var(--white); font-size: 0.98rem; font-weight: 600; text-decoration: none; }
}
@media (max-width: 767px) and (max-height: 760px) {
	.site-nav .menu-link { padding-block: 14px; font-size: 1.1rem; }
	.site-nav .mega-list a { min-height: 50px; padding-block: 8px; }
	.site-nav .header-cta { min-height: 48px; margin-top: 18px; }
	.site-nav .nav-contact { margin-top: 16px; padding-top: 14px; }
}
@media (max-width: 767px) and (max-height: 640px) {
	.site-nav .menu-link { padding-block: 11px; }
	.site-nav .mega-list a { min-height: 44px; }
	.site-nav .nav-contact { display: none; }
}
@media (max-width: 767px) {
	/* the current page is marked by the red dot only (no underline), and Contact Us keeps the theme's button red */
	.site-nav .menu-link[aria-current]::after, .site-nav .has-mega > .menu-link[aria-current]::after { position: static; width: 9px; height: 9px; margin-right: 4px; border: 0; border-top: 2.5px solid var(--tally); border-right: 2.5px solid var(--tally); background: none; transform: rotate(45deg); }
	.site-nav .has-mega > .menu-link[aria-current]::after { display: none; }
	.site-nav .header-cta { background: var(--tally-strong); }
	.site-nav .header-cta:hover { background: #a90d15; }
}

/* Phone menu: a side panel that takes 60% of the screen, sliding in from the right; the solutions become a single ruled column */
@media (max-width: 767px) {
	.site-nav { inset: var(--nav-top, calc(var(--header-h) - 1px)) 0 0 auto; width: 60vw; min-width: 236px; padding: 6px 18px 28px; border-left: 1px solid var(--line-dark); box-shadow: -18px 0 44px rgba(0, 0, 0, 0.45); opacity: 1; transform: translateX(100%); transition: transform 0.38s ease, visibility 0s linear 0.38s; }
	.nav-open .site-nav { opacity: 1; transform: none; transition: transform 0.38s ease, visibility 0s; }
	.site-nav .menu-link { padding-block: 16px; font-size: 1.12rem; }
	.site-nav .mega-list { grid-template-columns: minmax(0, 1fr); }
	.site-nav .mega-list li:last-child { grid-column: auto; text-align: left; }
	.site-nav .mega-list li:last-child a { justify-content: flex-start; }
	.site-nav .mega-list a { min-height: 48px; padding: 10px 14px; font-size: 0.9rem; }
	.site-nav .mega-all a { min-height: 48px; }
	.site-nav .header-cta { margin-top: 22px; min-height: 50px; }
	.site-nav .nav-contact { display: none; }
}
@media (max-width: 767px) and (max-height: 760px) {
	.site-nav .menu-link { padding-block: 12px; font-size: 1.05rem; }
	.site-nav .mega-list a, .site-nav .mega-all a { min-height: 42px; padding-block: 7px; }
	.site-nav .header-cta { min-height: 46px; margin-top: 16px; }
}

/* Phone menu: no red arrows, and softer (smaller) rounded corners */
@media (max-width: 767px) {
	.site-nav .menu-link::after, .site-nav .menu-link[aria-current]::after, .site-nav .mega-all a::after { display: none; content: none; }
	.site-nav .mega-list { border-radius: 5px; }
	.site-nav .header-cta { border-radius: 5px; }
}

/* Phone menu: the solutions list is always shown (no dropdown), and its text has proper padding inside the box */
@media (max-width: 767px) {
	.site-nav .has-mega > .menu-link .icon { display: none; }
	.site-nav .has-mega > .menu-link { padding-bottom: 12px; border-bottom: 0; }
	.site-nav .mega, .site-nav .has-mega > .mega { display: block; height: auto; overflow: visible; opacity: 1; }
	.site-nav .mega-list li a, .site-nav .mega-all a { margin: 0; width: auto; padding: 12px 18px; }
	.site-nav .mega-inner { padding-bottom: 20px; }
}
@media (max-width: 767px) and (max-height: 760px) { .site-nav .mega-list li a, .site-nav .mega-all a { padding-block: 8px; } }

/* Phone menu: "All solutions" has the same dark background as the other rows (no blue highlight) */
@media (max-width: 767px) {
	.site-nav .mega-all a { background: transparent; }
	.site-nav .mega-all a:hover, .site-nav .mega-all a:focus-visible { background: rgba(255, 255, 255, 0.08); }
}

/* Phone menu: the "Solutions" heading already goes to the Solutions page, so the extra "All solutions" row is removed */
@media (max-width: 767px) { .site-nav .mega-all { display: none; } }

/* Phone menu, active state: a red marker on the panel's left edge (the text never shifts), and on a solution page the solution itself is marked instead of the "Solutions" heading */
@media (max-width: 767px) {
	.site-nav .menu-link[aria-current] { padding-left: 0; }
	.site-nav .menu-link[aria-current]::before { top: 50%; left: -18px; width: 4px; height: 30px; border-radius: 0 3px 3px 0; background: var(--tally); box-shadow: none; transform: translateY(-50%); }
	.site-nav .has-mega:has(.mega-list li:not(.mega-all) a[aria-current]) > .menu-link::before { display: none; }
	.site-nav .mega-list li a[aria-current] { margin: 0; padding: 12px 18px; background: rgba(255, 255, 255, 0.07); box-shadow: inset 4px 0 0 var(--tally); color: var(--white); font-weight: 800; }
}
@media (max-width: 767px) and (max-height: 760px) { .site-nav .mega-list li a[aria-current] { padding-block: 8px; } }

/* Phone menu, active state: the red dot again. It sits in the panel's left margin (links) or in the row's left padding (solutions), so no text shifts */
@media (max-width: 767px) {
	.site-nav .menu-link[aria-current]::before { top: 50%; left: -13px; width: 9px; height: 9px; border-radius: 50%; background: var(--tally); box-shadow: 0 0 0 4px rgba(238, 27, 36, 0.2); transform: translateY(-50%); }
	.site-nav .mega-list li a[aria-current] { position: relative; box-shadow: none; }
	.site-nav .mega-list li a[aria-current]::before { content: ""; display: block; position: absolute; top: 50%; left: 7px; width: 7px; height: 7px; border-radius: 50%; background: var(--tally); box-shadow: 0 0 0 3px rgba(238, 27, 36, 0.2); transform: translateY(-50%); }
}
@media (max-width: 767px) {
	.site-nav .menu-link[aria-current]::before { left: -15px; width: 8px; height: 8px; }
	.site-nav .mega-list li a[aria-current]::before { left: 5px; width: 6px; height: 6px; }
}

/* Phone menu, active state: the red dot sits inline before the text and is centred on it (the text shifts right to make room) */
@media (max-width: 767px) {
	.site-nav .menu-link { justify-content: flex-start; }
	.site-nav .menu-link[aria-current] { padding-left: 0; }
	.site-nav .menu-link[aria-current]::before { position: static; flex: none; width: 9px; height: 9px; margin-right: 12px; transform: none; box-shadow: 0 0 0 4px rgba(238, 27, 36, 0.2); }
	.site-nav .mega-list li a[aria-current] { padding-left: 14px; }
	.site-nav .mega-list li a[aria-current]::before { position: static; flex: none; width: 7px; height: 7px; margin-right: 12px; transform: none; box-shadow: 0 0 0 3px rgba(238, 27, 36, 0.2); }
}
@media (max-width: 767px) { .site-nav .has-mega > .menu-link { justify-content: flex-start; } }

/* Solution detail heroes, every screen size: the photo fills only the hero area; the solutions row below it has its own solid navy background */
.hero-solution { display: grid; grid-template-rows: minmax(0, 1fr) auto; background: var(--navy-950); }
.hero-solution .hero-media { position: relative; inset: auto; grid-column: 1; grid-row: 1; z-index: 0; height: auto; min-height: 0; }
.hero-solution .hero-media img { position: absolute; inset: 0; }
.hero-solution .hero-content { position: relative; z-index: 1; grid-column: 1; grid-row: 1; width: 100%; align-self: stretch; }
.hero-solution .channels { position: relative; z-index: 1; grid-column: 1; grid-row: 2; background: var(--navy-950); -webkit-backdrop-filter: none; backdrop-filter: none; }
.hero-solution { grid-template-columns: minmax(0, 1fr); }
.hero-solution .hero-media { width: 100%; }

/* The solutions row (channels) uses the same deep navy on every page and screen size */
.hero .channels, .hero-solution .channels, .hero-home .channels { background: #050c1f; -webkit-backdrop-filter: none; backdrop-filter: none; }

/* Photo meets the solutions row with no line or gap: no light top border, a matching hero background, and the photo reaches 1px under the row */
.hero .channels { border-top: 0; }
.hero-solution, .hero-home { background: #050c1f; }
.hero-solution .hero-media, .hero-home .hero-media { margin-bottom: -1px; }
@media (max-width: 600px) { .hero-home .hero-media { margin-bottom: -1px; } }

/* About: vision and mission as the corporate-v2 band (full-width dark section, small label above a large statement) */
#page-about .purpose { background: var(--navy-900); }
#page-about .purpose-grid h2 { margin: 0 0 18px; color: var(--steel); font-size: 1rem; font-weight: 600; letter-spacing: 0; }
#page-about .purpose-grid p { margin: 0; color: var(--white); }

/* About: vision and mission in the corporate-v2 layout (a full-width section, the two cards side by side) with the card design kept */
#page-about .purpose-cards { padding-block: clamp(40px, 5vw, 72px); }
#page-about .purpose-cards .principles { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: none; gap: clamp(20px, 3vw, 36px); flex: none; margin-top: 0; }
#page-about .purpose-cards .principle { align-items: center; }
@media (max-width: 900px) {
	#page-about .purpose-cards .principles { grid-template-columns: minmax(0, 1fr); gap: 18px; }
}
#page-about .purpose-cards { padding-top: 0; }
#page-about .about-main { padding-bottom: clamp(36px, 4vw, 56px); }

/* About, company section in the corporate-v2 layout: the text on the left, the company details on the right (the card design is kept) */
#page-about .about-main .about-copy { order: 1; }
#page-about .about-main .year-card { order: 2; }
#page-about .about-main .about-grid { grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr); align-items: start; }
@media (min-width: 721px) and (max-width: 1270px) { #page-about .about-main .about-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 0.8fr); } }
@media (max-width: 720px) { #page-about .about-main .about-grid { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 1020px) and (max-width: 720px) { #page-about .about-main .year-card { order: 2; } }

/* About: the company facts are a horizontal table under the "Our company" row (four columns on desktop, two on tablet and phone) */
#page-about .about-facts { margin-top: clamp(28px, 3.5vw, 48px); }
#page-about .about-facts .corporate-data { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; margin: 0; overflow: hidden; border: 1px solid rgba(255, 255, 255, 0.18); border-radius: 5px; background: rgba(255, 255, 255, 0.18); box-shadow: 0 24px 70px rgba(11, 26, 61, 0.2); }
#page-about .about-facts .corporate-data > div { padding: 18px 22px; background: linear-gradient(145deg, var(--navy-900), #1f2f7c); }
#page-about .about-facts .corporate-data small { margin-bottom: 6px; }
#page-about .about-facts .corporate-data strong { font-size: 0.9rem; }
#page-about .about-facts .corporate-wide { grid-column: span 2; min-height: 0; }
#page-about .about-facts .corporate-data > div:last-child { grid-column: 1 / -1; }
@media (max-width: 1020px) {
	#page-about .about-facts .corporate-data { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	#page-about .about-facts .corporate-data > div { display: block; min-height: 0; padding: 15px 18px; }
}
@media (max-width: 480px) {
	#page-about .about-facts .corporate-data { grid-template-columns: minmax(0, 1fr); }
	#page-about .about-facts .corporate-wide { grid-column: auto; }
}

/* About company: the description runs across the full row; below it the Established card (left) sits beside the Core focus & capabilities panel */
#page-about .about-intro { margin-bottom: clamp(28px, 3.5vw, 44px); }
#page-about .about-intro p { max-width: none; }
#page-about .about-main .about-grid { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(24px, 3vw, 40px); align-items: stretch; }
#page-about .about-main .year-card { order: 1; position: relative; top: auto; align-self: stretch; display: flex; flex-direction: column; justify-content: center; }
#page-about .about-main .profile-capabilities { order: 2; margin: 0; align-self: stretch; display: flex; flex-direction: column; justify-content: center; }
@media (max-width: 900px) {
	#page-about .about-main .about-grid { grid-template-columns: minmax(0, 1fr); }
}
#page-about .profile-capabilities .profile-capabilities-title { margin: 0 0 15px; color: var(--ink); font-size: 0.75rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; }
#page-about .profile-capabilities { padding: 28px 30px; }

/* About, flow of information (as in the corporate-v2 example): 1) the company story with the Established card, 2) a details section with the facts table and the vision and mission */
#page-about .about-main .about-grid { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: clamp(32px, 5vw, 72px); align-items: stretch; }
#page-about .about-main .about-copy { order: 1; }
#page-about .about-main .year-card { order: 2; position: relative; top: auto; align-self: stretch; display: flex; flex-direction: column; justify-content: center; }
#page-about .about-main .about-copy .profile-capabilities { order: 0; margin: 30px 0 0; display: block; align-self: auto; }
#page-about .about-profile { padding-block: clamp(44px, 5vw, 72px); }
#page-about .about-profile .about-facts { margin-top: 0; }
#page-about .about-profile .principles { margin-top: clamp(24px, 3vw, 36px); }
#page-about .about-profile .principle:not(:first-child) { background: var(--white); }
@media (max-width: 900px) {
	#page-about .about-main .about-grid { grid-template-columns: minmax(0, 1fr); }
	#page-about .about-main .year-card { order: 2; }
}
@media (min-width: 901px) { #page-about .about-profile .principles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(18px, 2.5vw, 32px); } }

/* About: the Established card sits with the facts table, in a standard dark blue section */
#page-about .about-main .about-grid { grid-template-columns: minmax(0, 1fr); }
#page-about .about-profile { background: var(--navy-950); color: var(--white); }
#page-about .about-profile .about-facts { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: clamp(20px, 2.5vw, 32px); align-items: stretch; }
#page-about .about-profile .year-card { position: relative; top: auto; display: flex; flex-direction: column; justify-content: center; align-self: stretch; background: linear-gradient(145deg, #3149b4, var(--royal) 60%, #1f2f7c); border: 1px solid rgba(255, 255, 255, 0.18); box-shadow: 0 24px 50px rgba(0, 0, 0, 0.35); }
#page-about .about-profile .corporate-data { align-self: stretch; border-color: rgba(255, 255, 255, 0.22); box-shadow: 0 24px 50px rgba(0, 0, 0, 0.35); }
#page-about .about-profile .corporate-data > div { background: linear-gradient(145deg, #1b2c7a, #2a3d9a); }
#page-about .about-profile .corporate-data > div:nth-child(n+5) { background: linear-gradient(145deg, #223489, #3149b4); }
#page-about .about-profile .principles { margin-top: clamp(20px, 2.5vw, 32px); }
#page-about .about-profile .principle:first-child { background: linear-gradient(120deg, #3149b4, var(--royal)); border: 1px solid rgba(255, 255, 255, 0.18); }
@media (max-width: 1020px) { #page-about .about-profile .about-facts { grid-template-columns: minmax(0, 1fr); } }
#page-about .about-profile .principle:not(:first-child) h3 { color: var(--navy-900); }
#page-about .about-profile .about-facts { grid-template-columns: minmax(0, 0.7fr) minmax(0, 1.3fr); }
#page-about .about-profile .corporate-data > div { padding: 15px 16px; }
#page-about .about-profile .corporate-data strong { overflow-wrap: anywhere; }
@media (max-width: 1020px) { #page-about .about-profile .about-facts { grid-template-columns: minmax(0, 1fr); } }

/* About company: two columns (heading and text on the left, Core focus & capabilities on the right) */
#page-about .about-main .about-copy { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: clamp(32px, 5vw, 72px); align-items: start; align-content: center; }
#page-about .about-main .about-copy > h2, #page-about .about-main .about-copy > p { grid-column: 1; }
#page-about .about-main .about-copy > .profile-capabilities { grid-column: 2; grid-row: 1 / span 3; align-self: center; margin: 0; }
#page-about .about-main .about-copy .lead { max-width: none; }
@media (max-width: 900px) {
	#page-about .about-main .about-copy { grid-template-columns: minmax(0, 1fr); }
	#page-about .about-main .about-copy > .profile-capabilities { grid-column: 1; grid-row: auto; margin-top: 24px; }
}

/* About details section, new colour scheme: a white Established card with a red accent, a glass-style facts table (soft white tiles, thin rules) and a red-edged Vision card, on the standard dark blue */
#page-about .about-profile .year-card { background: var(--white); border: 0; color: var(--navy-900); box-shadow: 0 24px 50px rgba(0, 0, 0, 0.35); }
#page-about .about-profile .year-card::after { border-color: rgba(39, 57, 144, 0.08); }
#page-about .about-profile .year-card > small { color: var(--tally); }
#page-about .about-profile .year-card > strong { color: var(--navy-900); }
#page-about .about-profile .year-card > p { color: var(--slate); }
#page-about .about-profile .corporate-data { background: rgba(255, 255, 255, 0.14); border-color: rgba(255, 255, 255, 0.14); box-shadow: none; }
#page-about .about-profile .corporate-data > div, #page-about .about-profile .corporate-data > div:nth-child(n+5) { background: rgba(255, 255, 255, 0.05); }
#page-about .about-profile .corporate-data > div:hover { background: rgba(255, 255, 255, 0.09); }
#page-about .about-profile .corporate-data small { color: #8ea2ff; }
#page-about .about-profile .corporate-data strong { color: var(--white); }
#page-about .about-profile .principle:first-child { background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.16); box-shadow: none; }
#page-about .about-profile .principle:first-child::after { border-color: rgba(255, 255, 255, 0.1); box-shadow: 0 0 0 30px rgba(255, 255, 255, 0.02); }

/* About details section: less space above and below */
#page-about .about-profile { padding-block: clamp(28px, 3.2vw, 44px); }
@media (max-width: 720px) { #page-about .about-profile { padding-block: 32px; } }
#page-about .about-profile .principles { grid-template-rows: none; grid-auto-rows: auto; flex: none; align-content: start; }

/* Company facts on phones: a compact two-column table with tighter tiles (address, email, website and bankers span the full width) */
@media (max-width: 720px) {
	#page-about .about-profile .corporate-data { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	#page-about .about-profile .corporate-data > div { padding: 10px 12px; min-height: 0; }
	#page-about .about-profile .corporate-data small { margin-bottom: 3px; font-size: 0.56rem; letter-spacing: 0.07em; }
	#page-about .about-profile .corporate-data strong { font-size: 0.76rem; line-height: 1.35; }
	#page-about .about-profile .corporate-data .corporate-wide { grid-column: 1 / -1; }
}
@media (max-width: 480px) {
	#page-about .about-profile .corporate-data { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	#page-about .about-profile .corporate-wide { grid-column: 1 / -1; }
}

/* About details: the Established year and the facts form one table; vision and mission are plain columns split by a divider */
#page-about .about-profile .about-facts { gap: 0; overflow: hidden; border: 1px solid rgba(255, 255, 255, 0.2); border-radius: 5px; background: rgba(255, 255, 255, 0.04); }
#page-about .about-profile .year-card { background: transparent; border: 0; border-right: 1px solid rgba(255, 255, 255, 0.2); border-radius: 0; box-shadow: none; padding: 28px 32px; color: var(--white); }
#page-about .about-profile .year-card::after { display: none; }
#page-about .about-profile .year-card > small { color: #8ea2ff; }
#page-about .about-profile .year-card > strong { color: var(--white); font-size: clamp(3.2rem, 6vw, 4.6rem); }
#page-about .about-profile .year-card > p { margin-top: 12px; color: #c9d3ee; font-size: 0.95rem; }
#page-about .about-profile .corporate-data { border: 0; border-radius: 0; background: rgba(255, 255, 255, 0.2); }
#page-about .about-profile .corporate-data > div, #page-about .about-profile .corporate-data > div:nth-child(n+5) { background: #0d1d45; }
#page-about .about-profile .corporate-data > div:hover { background: #12255a; }

#page-about .about-profile .principles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; margin-top: clamp(22px, 2.8vw, 34px); }
#page-about .about-profile .principle, #page-about .about-profile .principle:first-child { min-height: 0; padding: 4px clamp(20px, 3vw, 40px); background: transparent; border: 0; border-radius: 0; box-shadow: none; gap: 18px; }
#page-about .about-profile .principle::before, #page-about .about-profile .principle::after { display: none; }
#page-about .about-profile .principle:first-child { padding-left: 0; }
#page-about .about-profile .principle + .principle { border-left: 1px solid rgba(255, 255, 255, 0.2); }
#page-about .about-profile .principle .principle-icon, #page-about .about-profile .principle:first-child .principle-icon { flex: none; width: 52px; height: 52px; aspect-ratio: auto; align-self: flex-start; border: 1.5px solid rgba(255, 255, 255, 0.35); border-radius: 5px; background: transparent; box-shadow: none; color: var(--white); }
#page-about .about-profile .principle .principle-icon svg { width: 26px; height: 26px; }
#page-about .about-profile .principle h3, #page-about .about-profile .principle:not(:first-child) h3 { margin-bottom: 6px; color: var(--white); font-size: 1.5rem; }
#page-about .about-profile .principle p, #page-about .about-profile .principle:first-child p { color: #c9d3ee; font-size: 0.95rem; }
@media (max-width: 1020px) {
	#page-about .about-profile .year-card { border-right: 0; border-bottom: 1px solid rgba(255, 255, 255, 0.2); }
}
@media (max-width: 900px) {
	#page-about .about-profile .principles { grid-template-columns: minmax(0, 1fr); }
	#page-about .about-profile .principle, #page-about .about-profile .principle:first-child { padding: 18px 0; }
	#page-about .about-profile .principle + .principle { border-left: 0; border-top: 1px solid rgba(255, 255, 255, 0.2); }
}
#page-about .about-profile .principle:not(:first-child), #page-about .about-profile .principle:not(:first-child):hover { background: transparent; }
#page-about .about-profile .principle:not(:first-child) p { color: #c9d3ee; }
#page-about .about-profile .about-facts { margin: 0; }

/* About: the capabilities as the corporate-v2 "What we bring" row (big heading, a top rule, three columns split by thin dividers) */
#page-about .about-main .about-copy { grid-template-columns: minmax(0, 1fr); }
#page-about .about-main .about-copy > h2, #page-about .about-main .about-copy > p { grid-column: 1; max-width: 62ch; }
#page-about .about-main .about-copy > .profile-capabilities { grid-column: 1; grid-row: auto; margin-top: clamp(36px, 5vw, 64px); padding: 0; background: transparent; border: 0; border-radius: 0; }
#page-about .profile-capabilities .profile-capabilities-title { margin: 0 0 clamp(24px, 3vw, 36px); color: var(--navy-900); font-family: var(--font-display); font-size: clamp(2rem, 4.5vw, 3.65rem); font-weight: 800; line-height: 1.08; letter-spacing: -0.04em; text-transform: none; }
#page-about .profile-capabilities ul { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; padding: 0; border-top: 2px solid var(--navy-900); }
#page-about .profile-capabilities li { padding: 22px clamp(18px, 2.6vw, 34px) 8px; border-left: 1px solid var(--line); font-size: 1rem; line-height: 1.6; }
#page-about .profile-capabilities li:first-child { padding-left: 0; border-left: 0; }
#page-about .profile-capabilities li::before { display: none; }
#page-about .profile-capabilities li strong { display: block; margin-bottom: 8px; color: var(--navy-900); font-family: var(--font-display); font-size: 1.25rem; font-weight: 700; line-height: 1.25; }
@media (max-width: 900px) {
	#page-about .profile-capabilities ul { grid-template-columns: minmax(0, 1fr); }
	#page-about .profile-capabilities li, #page-about .profile-capabilities li:first-child { padding: 18px 0; border-left: 0; border-top: 1px solid var(--line); }
	#page-about .profile-capabilities li:first-child { border-top: 0; }
}
#page-about .about-main .about-copy > h2, #page-about .about-main .about-copy > p, #page-about .about-main .about-copy > .lead { max-width: 80ch; }

/* Vision and mission icons: the original colours, a red tile for the vision and a blue tile for the mission, with white icons */
#page-about .about-profile .principle .principle-icon { border: 0; color: var(--white); background: linear-gradient(145deg, var(--royal), #4256b8); box-shadow: 0 8px 18px rgba(0, 0, 0, 0.3); }
#page-about .about-profile .principle:first-child .principle-icon { background: linear-gradient(145deg, var(--tally), #ff5560); box-shadow: 0 8px 18px rgba(238, 27, 36, 0.35); }

/* Company table: a lighter blue than the section background so it stands out */
#page-about .about-profile .about-facts { background: #273990; border-color: rgba(255, 255, 255, 0.3); }
#page-about .about-profile .year-card { background: linear-gradient(145deg, #3149b4, #273990); border-right-color: rgba(255, 255, 255, 0.28); }
#page-about .about-profile .year-card > small { color: #c3cdff; }
#page-about .about-profile .year-card > p { color: #e3e8ff; }
#page-about .about-profile .corporate-data { background: rgba(255, 255, 255, 0.28); }
#page-about .about-profile .corporate-data > div, #page-about .about-profile .corporate-data > div:nth-child(n+5) { background: #2c40a0; }
#page-about .about-profile .corporate-data > div:hover { background: #3550bc; }
#page-about .about-profile .corporate-data small { color: #c3cdff; }

/* Company table: a middle blue, not as dark as before and not as light as the last version */
#page-about .about-profile .about-facts { background: #1f3083; border-color: rgba(255, 255, 255, 0.22); }
#page-about .about-profile .year-card { background: linear-gradient(145deg, #2a3d9a, #1f3083); border-right-color: rgba(255, 255, 255, 0.22); }
#page-about .about-profile .corporate-data { background: rgba(255, 255, 255, 0.2); }
#page-about .about-profile .corporate-data > div, #page-about .about-profile .corporate-data > div:nth-child(n+5) { background: #20318a; }
#page-about .about-profile .corporate-data > div:hover { background: #2a3d9a; }

/* "What we bring to every project." as its own section after vision and mission */
#page-about .about-capabilities { padding-block: clamp(44px, 5vw, 72px); }
#page-about .about-capabilities .about-copy { display: block; }
#page-about .about-capabilities .profile-capabilities { margin: 0; }
#page-about .about-capabilities .profile-capabilities { padding: 0; background: transparent; border: 0; border-radius: 0; }

/* Established cell: larger text */
#page-about .about-profile .year-card { padding: 32px 36px; }
#page-about .about-profile .year-card > small { font-size: 1rem; letter-spacing: 0.16em; }
#page-about .about-profile .year-card > strong { font-size: clamp(4rem, 7.4vw, 6.4rem); }
#page-about .about-profile .year-card > p { font-size: clamp(1rem, 1.35vw, 1.2rem); line-height: 1.55; }

/* Vision and mission: the icon tile is a square as tall as the text beside it */
@media (min-width: 721px) {
	#page-about .about-profile .principle, #page-about .about-profile .principle:first-child { align-items: stretch; }
	#page-about .about-profile .principle .principle-icon, #page-about .about-profile .principle:first-child .principle-icon { align-self: stretch; width: auto; height: auto; aspect-ratio: 1 / 1; }
	#page-about .about-profile .principle .principle-icon svg { width: 46%; height: 46%; }
}

/* About: the Established card beside the "Our company" text; the facts table alone in the dark section */
#page-about .about-main .about-grid { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: clamp(32px, 5vw, 72px); align-items: stretch; }
#page-about .about-main .about-copy { order: 1; }
#page-about .about-main .year-card { order: 2; position: relative; top: auto; align-self: stretch; display: flex; flex-direction: column; justify-content: center; padding: 32px 36px; background: linear-gradient(145deg, #2a3d9a, #1f3083); border: 0; border-radius: 5px; }
#page-about .about-main .year-card > small { font-size: 1rem; letter-spacing: 0.16em; color: #c3cdff; }
#page-about .about-main .year-card > strong { font-size: clamp(4rem, 7.4vw, 6.4rem); }
#page-about .about-main .year-card > p { font-size: clamp(1rem, 1.35vw, 1.2rem); line-height: 1.55; color: #e3e8ff; }
#page-about .about-profile .about-facts { display: block; }
@media (max-width: 900px) {
	#page-about .about-main .about-grid { grid-template-columns: minmax(0, 1fr); }
	#page-about .about-main .year-card { padding: 26px 24px; }
}

/* Vision and mission: a smaller square tile with a bigger icon inside */
@media (min-width: 721px) {
	#page-about .about-profile .principle, #page-about .about-profile .principle:first-child { align-items: flex-start; }
	#page-about .about-profile .principle .principle-icon, #page-about .about-profile .principle:first-child .principle-icon { align-self: flex-start; flex: none; width: 64px; height: 64px; aspect-ratio: auto; border-radius: 5px; }
	#page-about .about-profile .principle .principle-icon svg { width: 42px; height: 42px; }
}
@media (max-width: 720px) {
	#page-about .about-profile .principle .principle-icon svg { width: 32px; height: 32px; }
	#page-about .about-profile .principle .principle-icon { width: 54px; height: 54px; }
}

/* Audio detail page: square corners on photos, cards and tiles (the round icon circles stay round) */
#page-audio .sd-photo, #page-audio .sd-photo img, #page-audio .sd-photos figure, #page-audio .sd-photos img, #page-audio .sd-ladder li, #page-audio .sd-uses li { border-radius: 0; }
@media (prefers-reduced-motion: no-preference) {
	[aria-labelledby="audio-everyday-title"] .sd-photo.reveal-item:not(.is-in) { clip-path: inset(0 0 0 100%); }
	[aria-labelledby="audio-everyday-title"] .sd-photo.reveal-item.is-in { clip-path: inset(0 0 0 0); }
}

/* Audio detail page: 5px corners on photos, cards and tiles */
#page-audio .sd-photo, #page-audio .sd-photo img, #page-audio .sd-photos figure, #page-audio .sd-photos img, #page-audio .sd-ladder li, #page-audio .sd-uses li { border-radius: 5px; }
@media (prefers-reduced-motion: no-preference) {
	[aria-labelledby="audio-everyday-title"] .sd-photo.reveal-item:not(.is-in) { clip-path: inset(0 0 0 100% round 5px); }
	[aria-labelledby="audio-everyday-title"] .sd-photo.reveal-item.is-in { clip-path: inset(0 0 0 0 round 5px); }
}

/* Audio detail page: flat icon circles (one solid blue, no gradient or glow) */
#page-audio .sd-icon { background: var(--royal); box-shadow: none; }

/* Every box and image uses 5px corners (buttons, chips and round icons keep their shapes) */
.mega-list a { border-radius: 5px; }
.solution-card:not(.solution-card-cta) a, .catalogue-card:not(.catalogue-card-cta) a, .project-card a { border-radius: 5px; }
:root { --radius: 5px; --radius-sm: 4px; }

/* About "Our company": less space above the section */
#page-about .about-main { padding-top: clamp(28px, 3.2vw, 44px); }

/* Contact: less space above the contact section */
#page-contact .contact-main { padding-top: clamp(28px, 3.2vw, 44px); }

/* About awards: a white section; the light cards get a border and a soft shadow so they still stand out */
#page-about .about-awards { background: var(--white); }
#page-about .about-awards .section-head h2 { color: var(--navy-900); }
#page-about .about-awards .award-card { border: 1px solid var(--line); box-shadow: 0 14px 34px rgba(11, 26, 61, 0.1); }
#page-about .about-awards .award-card::after { border-color: rgba(39, 57, 144, 0.1); }

/* About awards: blue cards (the standard dark blue) on the white section, with white text and a light certificate panel */
#page-about .about-awards .award-card { background: var(--navy-950); border: 0; color: var(--white); box-shadow: 0 14px 34px rgba(11, 26, 61, 0.22); }
#page-about .about-awards .award-card::after { border-color: rgba(255, 255, 255, 0.15); box-shadow: 0 0 0 28px rgba(255, 255, 255, 0.025); }
#page-about .about-awards .award-body small { color: #dfe5fb; background: rgba(142, 162, 255, 0.2); }
#page-about .about-awards .award-body h3 { color: var(--white); }
#page-about .about-awards .award-body p { color: #c9d3ee; }

/* About: the top half of the band behind the closing card is white again (the awards section above it is white), the bottom half stays dark blue */
#page-about .cta-card-band { --cta-prev: var(--white) !important; background: linear-gradient(to bottom, var(--white) 0 50%, var(--navy-950) 50% 100%); }

/* Home photo cards, tablet (601px to 1080px): four cards in one row */
@media (min-width: 601px) and (max-width: 1080px) {
	.pillar-cards { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
	.pillar-card a { aspect-ratio: 3 / 5; }
	.pillar-panel { left: 8px; right: 8px; bottom: 8px; padding: 9px 10px 10px; }
	.pillar-panel strong { font-size: 0.8rem; letter-spacing: 0.02em; }
	.pillar-panel span, .pillar-panel small { font-size: 0.62rem; line-height: 1.3; }
}

/* Why Choose KLG, tablet (601px to 1080px): the desktop layout of five cards in one row, shorter cards with smaller text */
@media (min-width: 601px) and (max-width: 1080px) {
	.why-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
	.why-card:last-child:nth-child(odd) { grid-column: auto; }
	.why-card { min-height: 190px; padding: 16px 12px 14px; }
	.why-card-no { font-size: 0.85rem; }
	.why-card h3 { margin-top: 6px; font-size: clamp(0.82rem, 1.7vw, 1rem); line-height: 1.2; overflow-wrap: anywhere; }
	.why-card p { padding-top: 10px; font-size: 0.7rem; line-height: 1.4; }
}

/* Home photo cards, tablet: about 30% shorter */
@media (min-width: 601px) and (max-width: 1080px) { .pillar-card a { aspect-ratio: 6 / 7; } }