/**
 * Keystone - Theme Styles (SHARED: identical in KeystoneMetallic, KeystoneSnowy, KeystoneFlat)
 *
 * The bold, image-forward library theme: a split hero (solid panel beside the photo), three
 * "doorways" overlapping it, then alternating full-width bands (welcome, events, image band,
 * stories) and a strong Deep-coloured footer. Thin accent rules in the secondary colour run
 * under the header, above the footer and before every eyebrow label.
 * Spec: repo-docs/themes/client-assets/Keystone/keystone-handoff/README.md (+ tokens.css).
 *
 * THE FAMILY: three themes share this file. Each theme's styles/tokens.css sets its two brand
 * colours, two fonts, heading weight and letter-spacing, corner radius, focus colour and the
 * defaults for the two extra palette colours. Everything else is derived below. A fix here goes
 * into all three folders: run  bash _tools/check-theme-family.sh keystone
 *
 * RE-SKINNING: Brand Look (Site Admin) sets --cs-brand-primary / -secondary / --cs-font-heading /
 * -body, which tokens.css reads. When a brand primary is set, the Deep colour (Snowy's fixed navy)
 * and the events band are re-derived from it too (section 1), so no colour of the old palette
 * survives. Precedence: custom.css (loads last) > Brand Look > the theme's defaults.
 *
 * Contents
 *   1. Derived palette, sizes, icons
 *   2. Base, focus, skip link, container
 *   3. Admin bar
 *   4. Header (utility bar, search, account, header row, logo, header button, menu button)
 *      - the nav itself is in nav-style.css
 *   5. Shared pieces (eyebrows, buttons, arrow links, section heads, social icons, admin hints)
 *   6. Home: hero
 *   7. Home: doorways
 *   8. Home: welcome
 *   9. Home: events band
 *  10. Home: image band
 *  11. Home: stories
 *  12. Interior: title banner + breadcrumb
 *  13. Page layout + sidebar
 *  14. Rich text (styled by element)
 *  15. Tables
 *  16. Forms, alerts, pagination
 *  17. Buttons (incl. platform buttons)
 *  18. Platform channel typography
 *  19. Footer + newsletter widget
 *  20. Reduced motion
 */

/* ========================================
   1. Derived palette, sizes, icons
   ======================================== */
:root {
	/* Extra palette colours. "-bl" = the Brand Look version: it references --cs-brand-primary with
	   no fallback, so while Brand Look is unset it is invalid and the theme default applies. */
	--ks-deep-bl: color-mix(in oklab, var(--cs-brand-primary) 72%, #05060a);
	--ks-deep: var(--ks-deep-bl, var(--ks-deep-default));                 /* utility bar, footer, contact card */
	--ks-events-bl: color-mix(in oklab, var(--cs-brand-primary) 11%, #fff);
	--ks-events-bg: var(--ks-events-bl, var(--ks-events-default));        /* events band, table headers */
	--ks-panel-bg: var(--ks-secondary);                                   /* image-band text panel */

	/* Derived from the brand colours (handoff tokens.css ratios) */
	--ks-primary-hover: color-mix(in oklab, var(--ks-primary) 84%, #000);
	--ks-primary-strong: color-mix(in oklab, var(--ks-primary) 80%, #000);   /* primary-coloured TEXT on tinted bands */
	--ks-primary-tint: color-mix(in oklab, var(--ks-primary) 6%, #fff);
	--ks-primary-soft: color-mix(in oklab, var(--ks-primary) 14%, #fff);
	--ks-secondary-hover: color-mix(in oklab, var(--ks-secondary) 86%, #000);
	--ks-secondary-tint: color-mix(in oklab, var(--ks-secondary) 40%, #fff);
	/* Text on the secondary colour. Brand Look supplies a readable partner (white or black) for
	   its secondary; then the theme tints it slightly. Unset: the handoff's dark tinted ink. */
	--ks-on-secondary-bl: color-mix(in oklab, var(--cs-brand-secondary-text) 92%, var(--ks-primary));
	--ks-on-secondary: var(--ks-on-secondary-bl, color-mix(in oklab, var(--ks-primary) 45%, #0b0c0f));
	--ks-ink: color-mix(in oklab, var(--ks-primary) 22%, #15171b);
	--ks-muted: color-mix(in oklab, var(--ks-ink) 74%, #fff);
	--ks-line: color-mix(in oklab, var(--ks-ink) 13%, #fff);
	--ks-control-line: color-mix(in oklab, var(--ks-ink) 50%, #fff);   /* form-field borders: 3:1+ on white */
	--ks-paper: #fff;
	--ks-on-dark: #fff;
	--ks-on-dark-muted: rgba(255, 255, 255, .82);
	--ks-error: #B42318;
	--ks-rule: 3px;
	--ks-radius-sm: min(var(--ks-radius), 12px);   /* fields, panels, dropdowns */
	--ks-radius-lg: min(var(--ks-radius), 20px);   /* cards */

	/* Layout */
	--ks-container: 1320px;      /* outer width, gutters included */
	--ks-gutter: 24px;
	--ks-measure: 780px;         /* full-width interior pages: the text column */
	--ks-control-h: 52px;
	--ks-tap: 44px;
	--ks-ease: .18s ease;

	/* Type */
	--ks-fs-body: 17px;
	--ks-fs-prose: 18px;
	--ks-fs-h2: clamp(2rem, 1.25rem + 2.1vw, 3rem);           /* 48px band headings */
	--ks-fs-hero: clamp(2.5rem, 1.4rem + 2.8vw, 3.875rem);    /* 62px hero h1 */
	--ks-fs-title: clamp(2.25rem, 1.4rem + 2.2vw, 3.5rem);    /* 56px interior page title */
	--ks-fs-label: 13px;                                      /* eyebrows, uppercase */

	/* Icons (drawn as CSS masks so they take the text colour) */
	--ks-i-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E");
	--ks-i-arrow-long: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12h16M13.5 5.5 20 12l-6.5 6.5'/%3E%3C/svg%3E");
	--ks-i-clock: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='8.5'/%3E%3Cpath d='M12 7.5V12l3 2'/%3E%3C/svg%3E");
	--ks-i-pin: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21s-6.5-5.6-6.5-11a6.5 6.5 0 0 1 13 0c0 5.4-6.5 11-6.5 11z'/%3E%3Ccircle cx='12' cy='10' r='2.3'/%3E%3C/svg%3E");
	--ks-i-chevron-down: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
	--ks-i-chevron-right: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 6 6 6-6 6'/%3E%3C/svg%3E");
	--ks-i-plus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E");
	--ks-i-minus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M5 12h14'/%3E%3C/svg%3E");
	--ks-i-search: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='6.5'/%3E%3Cpath d='m20 20-4.2-4.2'/%3E%3C/svg%3E");
	--ks-i-alert: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7.5v5.2M12 16.3v.2'/%3E%3C/svg%3E");

	/* Aliases for the repo-wide names, so shared snippets pick up the palette */
	--theme-primary: var(--ks-primary);
	--theme-accent: var(--ks-secondary);
	--theme-dark: var(--ks-ink);
	--theme-font-primary: var(--ks-font-body);
	--theme-font-heading: var(--ks-font-heading);
}
@media (max-width: 575.98px) {
	:root { --ks-gutter: 20px; --ks-fs-prose: 17px; }
}

/* ========================================
   2. Base, focus, skip link, container
   ======================================== */
body {
	background: var(--ks-paper);
	color: var(--ks-ink);
	font-family: var(--ks-font-body);
	font-size: var(--ks-fs-body);
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
}
a {
	color: var(--ks-primary);
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
}
a:hover { color: var(--ks-primary-hover); }
img { max-width: 100%; height: auto; }

/* Focus: 3px ring in the focus colour, 3px offset; on dark panels the secondary colour */
:focus-visible { outline: 3px solid var(--ks-focus); outline-offset: 3px; }
.ks-on-dark :focus-visible { outline-color: var(--ks-secondary); }

.skip-link {
	position: absolute;
	left: 12px;
	top: -100px;
	z-index: 100000;
	padding: 10px 16px;
	border-radius: var(--ks-radius-sm);
	background: var(--ks-primary);
	color: #fff;
	font-weight: 600;
	text-decoration: none;
}
.skip-link:focus { top: 12px; color: #fff; }
.ks-main:focus { outline: none; }

/* The theme's container: fluid, 1320px outer width, 24px gutters (20px on phones) */
.ks-container {
	width: 100%;
	max-width: var(--ks-container);
	margin-left: auto;
	margin-right: auto;
	padding-left: var(--ks-gutter);
	padding-right: var(--ks-gutter);
}

/* Headings in theme blocks (rich-text headings are in section 14) */
.ks-main :is(.ks-hero, .ks-doors, .ks-welcome, .ks-events, .ks-band, .ks-stories, .ks-banner) :is(h1, h2, h3, h4),
.ks-contact-card :is(h2, h3, h4),
.ks-signup :is(h2, h3, h4) {
	margin: 0;
	font-family: var(--ks-font-heading);
	font-weight: var(--ks-heading-weight);
	letter-spacing: var(--ks-heading-track);
	line-height: 1.12;
	text-wrap: balance;
}
.ks-main :is(.ks-hero, .ks-doors, .ks-welcome, .ks-events, .ks-band, .ks-stories) p { margin: 0; }

/* ========================================
   3. Admin bar (WordPress-style, roleID 3+)
   ======================================== */
#admin-bar {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	height: 32px;
	background-color: #1d2327;
	z-index: 99999;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	font-size: 13px;
	line-height: 32px;
}
.admin-bar-inner {
	display: flex;
	justify-content: space-between;
	align-items: center;
	height: 100%;
	padding: 0 8px;
}
.admin-bar-left,
.admin-bar-right { display: flex; align-items: center; height: 100%; }
.admin-bar-item {
	display: inline-flex;
	align-items: center;
	height: 32px;
	padding: 0 8px;
	color: #c3c4c7;
	text-decoration: none;
	transition: background-color .15s ease, color .15s ease;
}
.admin-bar-item:hover { background-color: #2c3338; color: #72aee6; text-decoration: none; }
.admin-bar-item i, .admin-bar-item svg { font-size: 14px; }
.admin-bar-label { margin-left: 6px; }
.admin-bar-logo { background-color: #2271b1; padding: 0 10px; }
.admin-bar-logo:hover { background-color: #135e96; color: #fff; }
.admin-bar-logout:hover { background-color: #b32d2e; color: #fff; }
body.admin-bar-active { padding-top: 32px; }
@media (max-width: 575.98px) {
	.admin-bar-label { display: none; }
}

/* ========================================
   4. Header
   The menu panel is the DEFAULT; the desktop row applies at 1200px+ unless theme.js adds
   .is-compact because the row does not fit. Desktop rules are therefore written as
   @media (min-width: 1200px) { .ks-site-header:not(.is-compact) ... }
   ======================================== */
.ks-site-header { position: relative; z-index: 1030; }

/* -- Utility bar (Deep, 44px): social left; search pill + account right -- */
.ks-utility {
	background: var(--ks-deep);
	color: var(--ks-on-dark-muted);
	font-size: 14px;
	--ks-focus: var(--ks-secondary);
}
.ks-utility__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	min-height: 44px;
}
.ks-utility a { color: var(--ks-on-dark-muted); text-decoration: none; }
.ks-utility a:hover { color: #fff; }
.ks-utility__social a { width: 36px; height: 36px; font-size: 16px; }
.ks-utility__right {
	display: flex;
	align-items: center;
	gap: 22px;
	margin-left: auto;
}
.ks-account { display: flex; align-items: center; gap: 18px; }
.ks-account a {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 36px;
	font-weight: 500;
}
.ks-search-open {
	display: none;
	place-items: center;
	width: 40px;
	height: 40px;
	padding: 0;
	border: 0;
	border-radius: var(--ks-radius-sm);
	background: transparent;
	color: #fff;
	font-size: 16px;
	cursor: pointer;
}

/* -- Header search (simpleSearchHeaderWidget). One widget: theme.js moves it between the
      utility bar and the menu panel (phones). -- */
.ks-search .header-search-form {
	position: relative;
	display: flex;
	align-items: center;
	margin: 0;
}
.ks-search .header-search-hp {
	position: absolute !important;
	left: -9999px !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
}
.ks-search .header-search-msg { display: none !important; }
/* main.css styles every text input (2px border, margins, height !important); the id lifts
   these rules above it. */
.ks-search #headerSearchInput {
	flex: 1 1 auto;
	min-width: 0;
	height: 100% !important;
	margin: 0;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	background: transparent;
	color: inherit;
	font-family: var(--ks-font-body);
	font-size: 14px;
	line-height: 1.2;
}
.ks-search #headerSearchInput:focus { outline: none; box-shadow: none; }
.ks-search .header-search-form:focus-within { outline: 3px solid var(--ks-focus); outline-offset: 2px; }
.ks-search .btn-search {
	display: grid;
	place-items: center;
	flex: none;
	width: 36px;
	height: 100%;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: transparent;
	color: inherit;
	font-size: 0;   /* the word "Search" stays as the accessible name; the glyph is drawn */
	box-shadow: none;
	cursor: pointer;
}
.ks-search .btn-search::before {
	content: "";
	display: block;
	width: 16px;
	height: 16px;
	background-color: currentColor;
	-webkit-mask: var(--ks-i-search) center / contain no-repeat;
	        mask: var(--ks-i-search) center / contain no-repeat;
}
/* Utility bar: a translucent pill */
.ks-utility .ks-search .header-search-form {
	height: 32px;
	border-radius: var(--ks-radius-sm);
	background: rgba(255, 255, 255, .10);
	color: #fff;
}
.ks-utility .ks-search #headerSearchInput { width: 190px; padding: 0 4px 0 14px; color: #fff; }
.ks-utility .ks-search #headerSearchInput::placeholder { color: rgba(255, 255, 255, .7); opacity: 1; }
/* Menu panel (phones): a bordered field */
.ks-menu__search .ks-search .header-search-form {
	height: 50px;
	border: 1.5px solid var(--ks-control-line);
	border-radius: var(--ks-radius-sm);
	background: #fff;
	color: var(--ks-ink);
}
.ks-menu__search .ks-search #headerSearchInput { padding: 0 6px 0 16px; color: var(--ks-ink); font-size: 16px; }
.ks-menu__search .ks-search #headerSearchInput::placeholder { color: var(--ks-muted); opacity: 1; }
.ks-menu__search .ks-search .btn-search { width: 50px; color: var(--ks-primary); }

@media (max-width: 575.98px) {
	.ks-utility__inner { min-height: 40px; }
	.ks-utility__social,
	.ks-utility__search,
	.ks-account__secondary { display: none !important; }
	.ks-search-open { display: inline-grid; }
	.ks-utility__right { gap: 8px; }
}

/* -- Header row (white, 96px; 76px on phones) on a 3px secondary rule -- */
.ks-header {
	position: relative;   /* the menu panel is positioned against this row */
	background: var(--ks-paper);
	border-bottom: var(--ks-rule) solid var(--ks-secondary);
}
.ks-bar {
	display: flex;
	align-items: center;
	gap: 28px;
	min-height: 96px;
}
.ks-bar > .ks-admin-hint { flex: 0 1 260px; margin: 8px 0; font-size: 12px; }

/* -- Logo lockup: mark + name + optional tagline. Works text-only and with 40+ character
      names: the name wraps at 16ch. -- */
.ks-logo {
	display: flex;
	align-items: center;
	gap: 14px;
	min-width: 0;
	padding: 6px 0;
	color: var(--ks-ink);
	text-decoration: none;
}
.ks-logo:hover { color: var(--ks-ink); }
.ks-logo__mark {
	flex: none;
	display: grid;
	place-items: center;
	width: 50px;
	height: 50px;
	border-radius: calc(var(--ks-radius) * .6 + 1px);
	background: var(--ks-primary);
	color: var(--ks-secondary);
	font-family: var(--ks-font-heading);
	font-size: 26px;
	font-weight: 500;
	line-height: 1;
}
.ks-logo__mark--image { background: none; overflow: hidden; }
.ks-logo__mark--image img { width: 100%; height: 100%; object-fit: contain; }
.ks-logo__name {
	display: block;
	max-width: 18ch;   /* about 16 characters in the widest fonts; a 40+ character name wraps */
	font-family: var(--ks-font-heading);
	font-size: 22px;
	font-weight: var(--ks-heading-weight);
	letter-spacing: var(--ks-heading-track);
	line-height: 1.12;
	overflow-wrap: break-word;
}
.ks-logo__name small {
	display: block;
	margin-top: 5px;
	color: var(--ks-muted);
	font-family: var(--ks-font-body);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .14em;
	line-height: 1.3;
	text-transform: uppercase;
}
/* A wide logo image on its own, 56px tall */
.ks-logo--wide img { display: block; width: auto; max-width: min(320px, 60vw); max-height: 56px; }

/* -- Header button (desktop): the "Header Button" section, one link -- */
.ks-header-btn { flex: none; display: none; }
.ks-header-btn p { margin: 0; }
.ks-header-btn a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	padding: 0 20px;
	border-radius: var(--ks-radius);
	background: var(--ks-primary);
	color: #fff;
	font-size: 15px;
	font-weight: 600;
	line-height: 1;
	text-decoration: none;
	white-space: nowrap;
	transition: background-color var(--ks-ease);
}
.ks-header-btn a:hover { background: var(--ks-primary-hover); color: #fff; }
.ks-header-btn a + a { display: none; }

/* -- Menu button (48px): bars, then a close (x) while the panel is open -- */
.ks-menu-toggle {
	flex: none;
	display: inline-grid;
	place-items: center;
	width: 48px;
	height: 48px;
	margin-left: auto;
	padding: 0;
	border: 1.5px solid var(--ks-line);
	border-radius: var(--ks-radius-sm);
	background: var(--ks-paper);
	color: var(--ks-ink);
	font-size: 20px;
	cursor: pointer;
}
.ks-menu-toggle:hover { border-color: var(--ks-primary); color: var(--ks-primary); }
.ks-menu-toggle .icon-close,
.ks-menu-toggle[aria-expanded="true"] .icon-open { display: none; }
.ks-menu-toggle[aria-expanded="true"] .icon-close { display: inline; }

@media (min-width: 1200px) {
	.ks-site-header:not(.is-compact) .ks-header-btn { display: block; }
	.ks-site-header:not(.is-compact) .ks-menu-toggle { display: none; }
}
@media (max-width: 575.98px) {
	.ks-bar { min-height: 76px; gap: 12px; }
	.ks-logo { gap: 12px; }
	.ks-logo__mark { width: 42px; height: 42px; font-size: 22px; }
	.ks-logo__name { font-size: 18px; }
	.ks-logo__name small { margin-top: 4px; font-size: 10.5px; }
	.ks-logo--wide img { max-height: 44px; }
}

/* ========================================
   5. Shared pieces
   ======================================== */
/* Eyebrow: the paragraph directly before a heading. Small caps label after a 32x3px bar:
   secondary on dark backgrounds, primary on light. */
.ks-main :is(.ks-hero__text, .ks-welcome__head, .ks-section-head__title, .ks-band__text) > p:has(+ :is(h1, h2)) {
	display: flex;
	align-items: center;
	gap: 14px;
	margin: 0 0 22px;
	font-family: var(--ks-font-body);
	font-size: var(--ks-fs-label);
	font-weight: 600;
	letter-spacing: .14em;
	line-height: 1.3;
	text-transform: uppercase;
}
.ks-main :is(.ks-hero__text, .ks-welcome__head, .ks-section-head__title, .ks-band__text) > p:has(+ :is(h1, h2))::before {
	content: "";
	flex: none;
	width: 32px;
	height: var(--ks-rule);
	background: var(--ks-primary);
}
.ks-main .ks-on-dark > * > p:has(+ :is(h1, h2))::before,
.ks-main .ks-hero__text > p:has(+ h1)::before { background: var(--ks-secondary); }

/* Band headings */
.ks-main :is(.ks-welcome__head, .ks-section-head__title, .ks-band__text) h2 { font-size: var(--ks-fs-h2); }

/* -- Buttons from a paragraph of links (keystoneActions adds .ks-actions). The first link is
      the main button; each block sets which style it gets. -- */
.ks-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 14px 28px;
}
.ks-btn,
.ks-actions > a:first-of-type {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	min-height: 50px;
	padding: 0 26px;
	border: 1.5px solid transparent;
	border-radius: var(--ks-radius);
	font-family: var(--ks-font-body);
	font-size: 16px;
	font-weight: 600;
	letter-spacing: .01em;
	line-height: 1.1;
	text-align: center;
	text-decoration: none;
	transition: background-color var(--ks-ease), color var(--ks-ease), border-color var(--ks-ease);
}
/* Default: primary fill */
.ks-actions > a:first-of-type { background: var(--ks-primary); color: #fff; }
.ks-actions > a:first-of-type:hover { background: var(--ks-primary-hover); color: #fff; }
/* The other links: text links with an arrow */
.ks-link-arrow,
.ks-actions > a:not(:first-of-type),
.ks-section-head__link a {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 44px;
	color: var(--ks-primary);
	font-size: 16px;
	font-weight: 600;
	text-decoration: none;
}
.ks-link-arrow::after,
.ks-actions > a:not(:first-of-type)::after,
.ks-section-head__link a::after {
	content: "";
	flex: none;
	width: 18px;
	height: 18px;
	background-color: currentColor;
	-webkit-mask: var(--ks-i-arrow) center / contain no-repeat;
	        mask: var(--ks-i-arrow) center / contain no-repeat;
	transition: transform var(--ks-ease);
}
.ks-link-arrow:hover,
.ks-actions > a:not(:first-of-type):hover,
.ks-section-head__link a:hover { color: var(--ks-primary-hover); text-decoration: underline; }
.ks-link-arrow:hover::after,
.ks-actions > a:not(:first-of-type):hover::after,
.ks-section-head__link a:hover::after { transform: translateX(3px); }

/* -- Section head: eyebrow + h2 on the left, a "View all" link on the right -- */
.ks-section-head {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: 16px 24px;
	margin-bottom: 44px;
}
.ks-section-head__title > p:has(+ h2) { margin-bottom: 16px; }
.ks-section-head__link p { margin: 0; }

/* -- Social icons: the "Social Media Icons" section, a <ul> of icon links -- */
.ks-social ul {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 4px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.ks-social li { margin: 0; list-style: none; }
.ks-social li::marker { content: none; }
.ks-social a {
	display: inline-grid;
	place-items: center;
	border-radius: 50%;
	text-decoration: none;
	transition: background-color var(--ks-ease), color var(--ks-ease), border-color var(--ks-ease);
}
.ks-social a i { font-size: 17px; }

/* -- Admin-only reminder where a section is missing (deleted or renamed) -- */
.ks-admin-hint {
	display: flex;
	gap: 10px;
	align-items: flex-start;
	margin: 16px 0;
	padding: 12px 14px;
	border: 2px dashed var(--ks-primary);
	border-radius: var(--ks-radius-sm);
	background: #fff;
	color: var(--ks-ink);
	font-family: var(--ks-font-body);
	font-size: 14px;
	line-height: 1.45;
	text-align: left;
}
.ks-admin-hint strong { color: var(--ks-primary); }
.ks-admin-hint a { color: var(--ks-primary); font-weight: 600; }
.ks-hints { position: relative; z-index: 3; }
.ks-hints:empty { display: none; }

/* ========================================
   6. Home: hero. Solid primary panel (11/24) + photo (13/24), at least 640px tall. The panel's
   left padding lines its text up with the container. No text on the photo, no carousel.
   ======================================== */
.ks-hero {
	container-type: inline-size;
	display: grid;
	grid-template-columns: minmax(0, 11fr) minmax(0, 13fr);
	background: var(--ks-primary);
}
.ks-hero__panel {
	--ks-edge: max(var(--ks-gutter), calc((100cqw - var(--ks-container)) / 2 + var(--ks-gutter)));
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 96px 64px 152px var(--ks-edge);
	background: var(--ks-primary);
	color: var(--ks-on-dark);
}
.ks-hero__text { display: flex; flex-direction: column; gap: 26px; max-width: 640px; }
.ks-main .ks-hero__text > p:has(+ h1) { margin: 0; color: rgba(255, 255, 255, .93); }
.ks-main .ks-hero h1 { color: #fff; font-size: var(--ks-fs-hero); line-height: 1.04; }
.ks-hero__text > p:not(.ks-actions):not(:has(+ h1)) {
	max-width: 34em;
	color: rgba(255, 255, 255, .93);
	font-size: 19px;
	line-height: 1.6;
}
.ks-hero__text a:not(.btn) { color: #fff; }
.ks-hero__text .ks-actions { margin-top: 8px; gap: 14px; }
/* Hero buttons: secondary fill, then a ghost button (white outline) */
.ks-hero__text .ks-actions > a:first-of-type { background: var(--ks-secondary); color: var(--ks-on-secondary); }
.ks-hero__text .ks-actions > a:first-of-type:hover { background: var(--ks-secondary-hover); color: var(--ks-on-secondary); }
.ks-hero__text .ks-actions > a:not(:first-of-type) {
	min-height: 50px;
	padding: 0 26px;
	justify-content: center;
	border: 1.5px solid rgba(255, 255, 255, .55);
	border-radius: var(--ks-radius);
	color: #fff;
	text-decoration: none;
	transition: background-color var(--ks-ease), border-color var(--ks-ease);
}
.ks-hero__text .ks-actions > a:not(:first-of-type)::after { display: none; }
.ks-hero__text .ks-actions > a:not(:first-of-type):hover { border-color: #fff; background: rgba(255, 255, 255, .08); color: #fff; text-decoration: none; }
.ks-hero__media { position: relative; min-height: 640px; background: var(--ks-primary-soft); }
.ks-hero__media img {
	position: absolute;
	inset: 0;
	width: 100% !important;
	height: 100% !important;
	max-width: none;
	object-fit: cover;
}
/* No image: the panel spans the width, the text stays in the container */
.ks-hero--text-only { grid-template-columns: minmax(0, 1fr); }
.ks-hero--text-only .ks-hero__panel { padding-right: var(--ks-edge); }
.ks-hero--text-only .ks-hero__text { max-width: 820px; }
/* No text: the photo runs full width, lower */
.ks-hero--image-only { grid-template-columns: minmax(0, 1fr); }
.ks-hero--image-only .ks-hero__media { min-height: 480px; }

@media (max-width: 991.98px) {
	.ks-hero { grid-template-columns: minmax(0, 1fr); }
	.ks-hero__media { order: -1; min-height: 0; aspect-ratio: 16 / 9; }
	.ks-hero__panel { padding: 56px var(--ks-gutter) 128px; }
	.ks-hero--image-only .ks-hero__media { min-height: 0; aspect-ratio: 16 / 9; }
}
@media (max-width: 575.98px) {
	.ks-hero__media,
	.ks-hero--image-only .ks-hero__media { aspect-ratio: 4 / 3; }
	.ks-hero__panel { padding: 44px var(--ks-gutter) 112px; }
	.ks-hero__text { gap: 20px; }
	.ks-hero__text > p:not(.ks-actions):not(:has(+ h1)) { font-size: 18px; }
	.ks-hero__text .ks-actions > a { flex: 1 1 100%; }
}

/* ========================================
   7. Home: doorways (the signature). Three tiles on the secondary colour, dark text,
   overlapping the hero by 72px. Each section = a label paragraph + a paragraph with one link;
   the whole tile is clickable and the arrow is drawn here.
   ======================================== */
.ks-doors { position: relative; z-index: 2; margin-top: -72px; }
.ks-doors--flush { margin-top: clamp(48px, 6vw, 88px); }
.ks-doors__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	overflow: hidden;
	border-radius: var(--ks-radius);
	background: var(--ks-secondary);
	box-shadow: 0 24px 48px -28px rgba(10, 12, 20, .45);
}
.ks-doors__grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ks-doors__grid--1 { grid-template-columns: minmax(0, 1fr); }
.ks-door {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	gap: 10px;
	padding: 30px 34px 32px;
	border-left: 1px solid color-mix(in oklab, var(--ks-on-secondary) 18%, transparent);
	color: var(--ks-on-secondary);
	transition: background-color var(--ks-ease);
	--ks-focus: var(--ks-on-secondary);
}
.ks-door:first-child { border-left: 0; }
.ks-door:hover { background: var(--ks-secondary-hover); }
.ks-main .ks-door p { margin: 0; }
/* Label: the paragraph without the link */
.ks-door p:not(:has(a)) {
	font-size: 13px;
	font-weight: 600;
	letter-spacing: .14em;
	line-height: 1.3;
	text-transform: uppercase;
	opacity: .82;
}
.ks-door a {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 16px;
	color: var(--ks-on-secondary);
	font-family: var(--ks-font-heading);
	font-size: clamp(1.375rem, .95rem + .95vw, 1.75rem);
	font-weight: var(--ks-heading-weight);
	letter-spacing: var(--ks-heading-track);
	line-height: 1.15;
	text-decoration: none;
}
.ks-door a:hover { color: var(--ks-on-secondary); }
/* The whole tile is the link */
.ks-door a::before { content: ""; position: absolute; inset: 0; }
.ks-door a::after {
	content: "";
	flex: none;
	width: 26px;
	height: 26px;
	margin-bottom: 4px;
	background-color: currentColor;
	-webkit-mask: var(--ks-i-arrow-long) center / contain no-repeat;
	        mask: var(--ks-i-arrow-long) center / contain no-repeat;
	transition: transform var(--ks-ease);
}
.ks-door:hover a::after { transform: translateX(4px); }
.ks-door a:focus-visible { outline: none; }
.ks-door:has(a:focus-visible) { outline: 3px solid var(--ks-on-secondary); outline-offset: -6px; }

@media (max-width: 991.98px) {
	.ks-doors { margin-top: -80px; }
	.ks-doors--flush { margin-top: 56px; }
	.ks-door { padding: 26px 26px 28px; }
}
@media (max-width: 767.98px) {
	.ks-doors__grid,
	.ks-doors__grid--2 { grid-template-columns: minmax(0, 1fr); }
	.ks-door { gap: 6px; padding: 22px 24px 24px; border-left: 0; border-top: 1px solid color-mix(in oklab, var(--ks-on-secondary) 18%, transparent); }
	.ks-door:first-child { border-top: 0; }
}
@media (max-width: 575.98px) {
	.ks-doors { margin-top: -64px; }
	.ks-doors--flush { margin-top: 44px; }
}

/* ========================================
   8. Home: welcome. Welcome Heading (eyebrow + h2) 5/11, Welcome Text 6/11. White band.
   ======================================== */
.ks-welcome { padding: 120px 0 112px; }
.ks-welcome__grid {
	display: grid;
	grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
	gap: 32px 96px;
	align-items: start;
}
.ks-welcome__grid--single { grid-template-columns: minmax(0, 1fr); }
.ks-welcome__grid--single > * { max-width: 860px; }
.ks-welcome__head h2 { color: var(--ks-ink); }
.ks-welcome__head > p:has(+ h2) { color: var(--ks-primary); }
.ks-welcome__body {
	display: flex;
	flex-direction: column;
	gap: 20px;
	padding-top: 44px;
	color: var(--ks-muted);
}
.ks-welcome__grid--single .ks-welcome__body { padding-top: 0; }
/* The first paragraph is the lead */
.ks-welcome__body > p:first-of-type { color: var(--ks-ink); font-size: 20px; line-height: 1.55; }
.ks-welcome__body .ks-actions { margin-top: 12px; }
/* Welcome buttons: an outline button, then arrow links */
.ks-welcome__body .ks-actions > a:first-of-type { border-color: var(--ks-primary); background: transparent; color: var(--ks-primary); }
.ks-welcome__body .ks-actions > a:first-of-type:hover { background: var(--ks-primary); color: #fff; }
.ks-welcome__body :is(h2, h3) { color: var(--ks-ink); }

@media (max-width: 991.98px) {
	.ks-welcome { padding: 88px 0; }
	.ks-welcome__grid { grid-template-columns: minmax(0, 1fr); gap: 24px; }
	.ks-welcome__body { padding-top: 0; }
}
@media (max-width: 575.98px) {
	.ks-welcome { padding: 72px 0; }
	.ks-welcome__body > p:first-of-type { font-size: 19px; }
}
/* No hero and no doorways: the welcome is the first block */
.ks-main > .ks-welcome:first-child { padding-top: 88px; }

/* ========================================
   9. Home: events band (live). Events-band colour; 1-4 white cards with a 3px primary top rule;
   with fewer than 4 the cards keep their width and align left.
   ======================================== */
.ks-events { padding: 104px 0; background: var(--ks-events-bg); }
.ks-events h2 { color: var(--ks-ink); }
/* Primary-coloured TEXT on the tinted band uses --ks-primary-strong (4.5:1+) */
.ks-events .ks-section-head__title > p:has(+ h2),
.ks-events .ks-section-head__link a { color: var(--ks-primary-strong); }
.ks-events__grid,
.ks-events-static > ul {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 20px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.ks-event,
.ks-events-static > ul > li {
	display: flex;
	flex-direction: column;
	gap: 14px;
	min-height: 280px;
	margin: 0;
	padding: 26px 26px 24px;
	border-top: var(--ks-rule) solid var(--ks-primary);
	border-radius: 0 0 var(--ks-radius-lg) var(--ks-radius-lg);
	background: var(--ks-paper);
	list-style: none;
}
.ks-events-static > ul > li::marker { content: none; }
.ks-event__date { display: flex; align-items: center; gap: 14px; }
.ks-event__day {
	min-width: 1.15em;
	color: var(--ks-primary);
	font-family: var(--ks-font-heading);
	font-size: 52px;
	font-weight: var(--ks-heading-weight);
	letter-spacing: -.02em;
	line-height: .9;
}
.ks-event__mo {
	display: flex;
	flex-direction: column;
	color: var(--ks-muted);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: .12em;
	line-height: 1.35;
	text-transform: uppercase;
}
.ks-event__mo b { color: var(--ks-ink); font-weight: 600; }
.ks-main .ks-events :is(.ks-event, .ks-events-static li) h3 { font-size: 22px; line-height: 1.22; }
:is(.ks-event, .ks-events-static li) h3 a { color: var(--ks-ink); text-decoration: none; }
:is(.ks-event, .ks-events-static li) h3 a:hover { color: var(--ks-primary); text-decoration: underline; }
.ks-event__meta {
	display: flex;
	flex-direction: column;
	gap: 6px;
	margin: 0;
	padding: 0;
	color: var(--ks-muted);
	font-size: 15px;
	line-height: 1.4;
	list-style: none;
}
.ks-event__meta li { display: flex; align-items: flex-start; gap: 8px; margin: 0; }
.ks-event__meta li::marker { content: none; }
.ks-event__meta li::before,
.ks-events-static li > h3 ~ p::before {
	content: "";
	flex: none;
	width: 15px;
	height: 15px;
	margin-top: 2px;
	background-color: var(--ks-primary);
	-webkit-mask: var(--ks-i-clock) center / contain no-repeat;
	        mask: var(--ks-i-clock) center / contain no-repeat;
}
.ks-event__where::before,
.ks-events-static li > h3 ~ p + p::before {
	-webkit-mask-image: var(--ks-i-pin) !important;
	        mask-image: var(--ks-i-pin) !important;
}
.ks-event__more { margin-top: auto; font-size: 15px; }

/* Static fallback ("Upcoming Events Static": a <ul>; each <li> = when <p>, <h3> title, then
   time <p> and place <p>). The first paragraph stands in for the big date. */
.ks-events-static li > p:first-child {
	color: var(--ks-primary);
	font-family: var(--ks-font-heading);
	font-size: 26px;
	font-weight: var(--ks-heading-weight);
	letter-spacing: var(--ks-heading-track);
	line-height: 1.1;
}
.ks-events-static li > h3 ~ p {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	color: var(--ks-muted);
	font-size: 15px;
	line-height: 1.4;
}
.ks-events-static li > h3 + p { margin-top: auto; }

@media (max-width: 991.98px) {
	.ks-events { padding: 80px 0; }
	.ks-events__grid,
	.ks-events-static > ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* Phones: compact list rows - date column left, 3px primary left rule, no Details link */
@media (max-width: 575.98px) {
	.ks-events { padding: 72px 0; }
	.ks-section-head { margin-bottom: 32px; }
	.ks-events__grid,
	.ks-events-static > ul { grid-template-columns: minmax(0, 1fr); gap: 12px; }
	.ks-event {
		display: grid;
		grid-template-columns: 80px minmax(0, 1fr);
		gap: 6px 16px;
		min-height: 0;
		padding: 22px 20px;
		border-top: 0;
		border-left: var(--ks-rule) solid var(--ks-primary);
		border-radius: 0 var(--ks-radius-lg) var(--ks-radius-lg) 0;
	}
	.ks-event__date { grid-row: span 3; flex-direction: column; align-items: flex-start; gap: 6px; }
	.ks-event__day { font-size: 40px; }
	.ks-event__mo { font-size: 11.5px; }
	.ks-main .ks-events :is(.ks-event, .ks-events-static li) h3 { font-size: 20px; }
	.ks-event__more { display: none; }
	.ks-events-static > ul > li {
		min-height: 0;
		padding: 22px 20px;
		border-top: 0;
		border-left: var(--ks-rule) solid var(--ks-primary);
		border-radius: 0 var(--ks-radius-lg) var(--ks-radius-lg) 0;
		gap: 8px;
	}
	.ks-events-static li > h3 + p { margin-top: 0; }
}

/* ========================================
   10. Home: image band. Photo (7/12, 580px) left + text panel (5/12) right, mirroring the hero.
   Text never on the photo.
   ======================================== */
.ks-band {
	container-type: inline-size;
	display: grid;
	grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
	background: var(--ks-panel-bg);
}
.ks-band__media { position: relative; min-height: 580px; background: var(--ks-primary-soft); }
.ks-band__media img {
	position: absolute;
	inset: 0;
	width: 100% !important;
	height: 100% !important;
	max-width: none;
	object-fit: cover;
}
.ks-band__panel {
	--ks-edge: max(var(--ks-gutter), calc((100cqw - var(--ks-container)) / 2 + var(--ks-gutter)));
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 88px var(--ks-edge) 88px 72px;
	background: var(--ks-panel-bg);
	color: var(--ks-on-secondary);
}
.ks-band__text { display: flex; flex-direction: column; gap: 22px; max-width: 520px; }
.ks-main .ks-band__text > p:has(+ h2) { margin: 0; color: var(--ks-on-secondary); }
.ks-band__text h2 { color: var(--ks-on-secondary); }
.ks-band__text > p:not(.ks-actions):not(:has(+ h2)) { max-width: 30em; color: color-mix(in oklab, var(--ks-on-secondary) 88%, var(--ks-panel-bg)); }
.ks-band__text p:not(.ks-actions) a { color: var(--ks-on-secondary); text-decoration: underline; }
.ks-band__text .ks-actions { margin-top: 10px; }
/* No image: the panel spans the width, the text stays in the container */
.ks-band--text-only { grid-template-columns: minmax(0, 1fr); }
.ks-band--text-only .ks-band__panel { padding-left: var(--ks-edge); }
.ks-band--text-only .ks-band__text { max-width: 760px; }

@media (max-width: 991.98px) {
	.ks-band { grid-template-columns: minmax(0, 1fr); }
	.ks-band__media { min-height: 0; aspect-ratio: 3 / 2; }
	.ks-band__panel,
	.ks-band--text-only .ks-band__panel { padding: 64px var(--ks-gutter) 72px; }
}
@media (max-width: 575.98px) {
	.ks-band__media { aspect-ratio: 4 / 3; }
	.ks-band__panel,
	.ks-band--text-only .ks-band__panel { padding: 52px var(--ks-gutter) 60px; }
}

/* ========================================
   11. Home: stories. Section head + two columns: 3:2 image, meta line, h3 link, excerpt,
   "Read the story". White band. One story spans two thirds.
   ======================================== */
.ks-stories { padding: 112px 0 120px; }
.ks-stories h2 { color: var(--ks-ink); }
.ks-stories .ks-section-head__title > p:has(+ h2) { color: var(--ks-primary); }
.ks-stories__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 56px; }
.ks-stories__grid--single { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
.ks-story { display: flex; flex-direction: column; gap: 14px; }
.ks-story__img { margin-bottom: 14px; }
.ks-story__img img {
	display: block;
	width: 100% !important;
	height: auto !important;
	aspect-ratio: 3 / 2;
	border-radius: var(--ks-radius);
	object-fit: cover;
	background: var(--ks-primary-soft);
}
.ks-story__text { display: flex; flex-direction: column; gap: 14px; }
/* Meta line: the paragraph before the heading ("Latest", then a dot, then the date) */
.ks-story__text > p:has(+ h3) {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 4px 12px;
	color: var(--ks-muted);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: .12em;
	text-transform: uppercase;
}
.ks-story__text > p:has(+ h3) :is(strong, b) {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	color: var(--ks-primary);
	font-weight: 600;
}
.ks-story__text > p:has(+ h3) :is(strong, b)::after {
	content: "";
	width: 4px;
	height: 4px;
	border-radius: 50%;
	background: var(--ks-secondary);
}
.ks-main .ks-story h3 { font-size: clamp(1.625rem, 1.15rem + 1vw, 2rem); line-height: 1.16; }
.ks-story h3 a { color: var(--ks-ink); text-decoration: none; }
.ks-story h3 a:hover { color: var(--ks-primary); text-decoration: underline; text-decoration-thickness: 1px; }
.ks-story__text > p:not(.ks-actions):not(:has(+ h3)) { max-width: 36em; color: var(--ks-muted); }
/* "Read the story": every link in the actions row is an arrow link */
.ks-story .ks-actions { margin-top: 6px; }
.ks-story .ks-actions > a:first-of-type {
	min-height: 44px;
	padding: 0;
	border: 0;
	background: none;
	color: var(--ks-primary);
}
.ks-story .ks-actions > a:first-of-type::after {
	content: "";
	flex: none;
	width: 18px;
	height: 18px;
	margin-left: -2px;
	background-color: currentColor;
	-webkit-mask: var(--ks-i-arrow) center / contain no-repeat;
	        mask: var(--ks-i-arrow) center / contain no-repeat;
	transition: transform var(--ks-ease);
}
.ks-story .ks-actions > a:first-of-type:hover { background: none; color: var(--ks-primary-hover); text-decoration: underline; }
.ks-story .ks-actions > a:first-of-type:hover::after { transform: translateX(3px); }

@media (max-width: 991.98px) {
	.ks-stories { padding: 88px 0; }
	.ks-stories__grid { gap: 40px 32px; }
}
@media (max-width: 575.98px) {
	.ks-stories { padding: 72px 0 80px; }
	.ks-stories__grid,
	.ks-stories__grid--single { grid-template-columns: minmax(0, 1fr); gap: 48px; }
}

/* ========================================
   12. Interior: plain title banner on the primary colour, breadcrumb + h1
   ======================================== */
.ks-banner { background: var(--ks-primary); color: #fff; }
.ks-banner__inner {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 18px;
	min-height: 220px;
	padding-top: 60px;
	padding-bottom: 68px;
}
.ks-main .ks-banner h1 { max-width: 22ch; color: #fff; font-size: var(--ks-fs-title); line-height: 1.06; }
.ks-crumbs ol {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px 10px;
	margin: 0;
	padding: 0;
	color: rgba(255, 255, 255, .93);
	font-size: 14px;
	list-style: none;
}
.ks-crumbs li { display: inline-flex; align-items: center; gap: 10px; margin: 0; }
.ks-crumbs li + li::before {
	content: "";
	width: 12px;
	height: 12px;
	background-color: currentColor;
	opacity: .6;
	-webkit-mask: var(--ks-i-chevron-right) center / contain no-repeat;
	        mask: var(--ks-i-chevron-right) center / contain no-repeat;
}
.ks-crumbs a {
	color: rgba(255, 255, 255, .93);
	text-decoration: underline;
	text-decoration-color: rgba(255, 255, 255, .4);
}
.ks-crumbs a:hover { color: #fff; text-decoration-color: #fff; }
@media (max-width: 991.98px) {
	.ks-banner__inner { min-height: 0; padding-top: 48px; padding-bottom: 56px; }
}
@media (max-width: 575.98px) {
	.ks-banner__inner { gap: 14px; padding-top: 36px; padding-bottom: 44px; }
}

/* ========================================
   13. Page layout + sidebar
   The CMS writes the page body inside .ks-content: #primary-content for the div layouts,
   #C1TABLE td.content for the older table layouts - selectors cover both (gotcha 4).
   ======================================== */
.main-content { padding: 80px 0 112px; }
.ks-content { min-width: 0; }
/* Home page: the bands above carry the page and the body is often empty (theme.js) */
body.is-homepage .main-content { padding: 72px 0; }
body.is-homepage .main-content.is-empty { display: none; }

@media (min-width: 992px) {
	.ks-layout.has-sidebar {
		display: grid;
		grid-template-columns: minmax(0, 1fr) 340px;
		gap: 48px 64px;
		align-items: start;
	}
}
@media (min-width: 1200px) {
	.ks-layout.has-sidebar { gap: 48px 80px; }
}
@media (max-width: 991.98px) {
	.main-content { padding: 56px 0 88px; }
}
@media (max-width: 575.98px) {
	.main-content { padding: 44px 0 72px; }
}

/* Full-width pages: the rich text sits in a centred 780px column. Only class-less elements (the
   editor's output) are capped, so channels (calendars, directories, forms) keep the full width
   (gotcha 8). */
.ks-layout:not(.has-sidebar) :where(.ks-content, .ks-content > div, .ks-content td.content) > :is(p, ul, ol, dl, h2, h3, h4, h5, h6, blockquote, figure, hr):not([class]),
.ks-layout:not(.has-sidebar) :where(.ks-content, .ks-content > div, .ks-content td.content) > :is(.lead, .ks-table-wrap, table.table, .card) {
	max-width: var(--ks-measure);
	margin-left: auto;
	margin-right: auto;
}
.ks-layout:not(.has-sidebar) :where(.ks-content, .ks-content > div, .ks-content td.content) > hr:not([class]) { margin-left: max(0px, calc(50% - var(--ks-measure) / 2)); }

/* -- Sidebar: "In this section" + the contact card. Follows the content on phones. -- */
.ks-sidebar { display: flex; flex-direction: column; gap: 28px; min-width: 0; margin-top: 56px; }
@media (min-width: 992px) {
	.ks-sidebar { margin-top: 0; }
}
.main-content .ks-side-nav__label {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 0 0 14px;
	color: var(--ks-primary);
	font-family: var(--ks-font-body);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: .14em;
	line-height: 1.3;
	text-transform: uppercase;
}
.main-content .ks-side-nav__label::before { content: ""; width: 24px; height: var(--ks-rule); background: var(--ks-secondary); }
.ks-side-nav ul { display: flex; flex-direction: column; gap: 2px; margin: 0; padding: 0; list-style: none; }
.ks-side-nav li { margin: 0; list-style: none; }
.ks-side-nav li::marker { content: none; }
.ks-side-nav a {
	display: flex;
	align-items: center;
	min-height: 46px;
	padding: 10px 16px;
	border-radius: var(--ks-radius-sm);
	color: var(--ks-ink);
	font-size: 16px;
	line-height: 1.35;
	text-decoration: none;
}
.ks-side-nav a:hover { background: var(--ks-primary-tint); color: var(--ks-primary); }
.ks-side-nav a[aria-current="page"] { background: var(--ks-secondary-tint); color: var(--ks-ink); font-weight: 600; }
.ks-side-nav ul ul { padding: 2px 0 6px 18px; }
.ks-side-nav ul ul a { min-height: 40px; color: var(--ks-muted); font-size: 15px; }
.ks-side-nav ul ul a[aria-current="page"] { color: var(--ks-ink); }

/* Contact card ("Sidebar Contact"): Deep, heading-font h3, secondary button */
.ks-contact-card {
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding: 30px 28px;
	border-radius: var(--ks-radius-lg);
	background: var(--ks-deep);
	color: var(--ks-on-dark-muted);
	font-size: 16px;
	line-height: 1.55;
}
.main-content .ks-contact-card :is(h2, h3, h4) { color: #fff; font-size: 24px; }
.main-content .ks-contact-card p { margin: 0; }
.ks-contact-card a { color: #fff; text-decoration: none; }
.ks-contact-card a:hover { color: #fff; text-decoration: underline; }
.ks-contact-card .ks-actions { margin-top: 8px; }
.ks-contact-card .ks-actions > a:first-of-type {
	min-height: 44px;
	padding: 0 20px;
	background: var(--ks-secondary);
	color: var(--ks-on-secondary);
	font-size: 15px;
}
.ks-contact-card .ks-actions > a:first-of-type:hover { background: var(--ks-secondary-hover); color: var(--ks-on-secondary); text-decoration: none; }
.ks-contact-card .ks-actions > a:not(:first-of-type) { color: #fff; }

.admin-edit-link { margin-bottom: 16px; text-align: right; }

/* ========================================
   14. Rich text - styled by element, no classes needed. Scoped to the content area; every
   rule carries .main-content so it outranks single-class rules (gotcha 1).
   ======================================== */
.main-content .ks-content { font-size: var(--ks-fs-prose); line-height: 1.72; }
.main-content .ks-content :is(h1, h2, h3, h4, h5, h6) {
	color: var(--ks-ink);
	font-family: var(--ks-font-heading);
	font-weight: var(--ks-heading-weight);
	letter-spacing: var(--ks-heading-track);
	line-height: 1.16;
	text-wrap: balance;
}
.main-content .ks-content h1 { margin: 0 0 24px; font-size: var(--ks-fs-title); }
.main-content .ks-content h2 { margin: 1.9em 0 .6em; font-size: clamp(1.75rem, 1.25rem + 1.1vw, 2.25rem); }
.main-content .ks-content h3 { margin: 1.7em 0 .6em; font-size: clamp(1.375rem, 1.1rem + .5vw, 1.625rem); }
.main-content .ks-content h4 {
	margin: 2em 0 .6em;
	color: var(--ks-primary);
	font-family: var(--ks-font-body);
	font-size: 14px;
	font-weight: 600;
	letter-spacing: .12em;
	line-height: 1.3;
	text-transform: uppercase;
}
.main-content .ks-content :is(h5, h6) { margin: 1.6em 0 .5em; font-size: 18px; }
/* First thing in the body: no top margin (an edit marker can come first, gotcha 4) */
:where(.ks-content, .ks-content > div, .ks-content td.content) > :is(h1, h2, h3, h4, h5, h6):first-child,
.ks-content .cs-edit-marker:first-child + :is(h1, h2, h3, h4, h5, h6) { margin-top: 0 !important; }

.main-content .ks-content p { margin: 0 0 1.15em; }
/* The first paragraph is a 21px lead (also the "Lead paragraph" snippet's .lead) */
:where(.ks-content, .ks-content > div, .ks-content td.content) > p:first-child:not([class]),
:where(.ks-content, .ks-content > div, .ks-content td.content) > .cs-edit-marker:first-child + p:not([class]),
.main-content .ks-content .lead {
	font-size: 21px;
	font-weight: 400;
	line-height: 1.6;
}
@media (max-width: 575.98px) {
	:where(.ks-content, .ks-content > div, .ks-content td.content) > p:first-child:not([class]),
	:where(.ks-content, .ks-content > div, .ks-content td.content) > .cs-edit-marker:first-child + p:not([class]),
	.main-content .ks-content .lead { font-size: 19px; }
}

.main-content .ks-content :is(p, li, td, dd, figcaption, blockquote) a:not(.btn) {
	color: var(--ks-primary);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
}
.main-content .ks-content :is(p, li, td, dd, figcaption, blockquote) a:not(.btn):hover {
	color: var(--ks-primary-hover);
	text-decoration-thickness: 2px;
}
.main-content .ks-content :is(strong, b) { font-weight: 600; }

/* Lists: primary-coloured markers */
.main-content .ks-content :is(ul, ol):not([class]) { margin: 0 0 1.15em; padding-left: 1.35em; }
.main-content .ks-content :is(ul, ol):not([class]) li { margin: 0; }
.main-content .ks-content :is(ul, ol):not([class]) li + li { margin-top: .45em; }
.main-content .ks-content ul:not([class]) { list-style: disc; }
.main-content .ks-content :is(ul, ol):not([class]) li::marker { color: var(--ks-primary); font-weight: 600; }
.main-content .ks-content :is(ul, ol):not([class]) :is(ul, ol) { margin: .45em 0 0; }

/* Figure: rounded image, caption after a short secondary bar */
.main-content .ks-content figure { margin: 2em 0; }
.main-content .ks-content figure img,
.main-content .ks-content p > img:only-child { display: block; width: 100%; height: auto; border-radius: var(--ks-radius-sm); }
.main-content .ks-content figcaption {
	display: flex;
	gap: 12px;
	margin-top: 12px;
	color: var(--ks-muted);
	font-size: 14px;
	line-height: 1.5;
}
.main-content .ks-content figcaption::before { content: ""; flex: none; width: 20px; height: 2px; margin-top: 10px; background: var(--ks-secondary); }

/* Blockquote: heading font, a large secondary opening quote, uppercase cite. No left border. */
.main-content .ks-content blockquote {
	margin: 1.8em 0;
	padding: 0;
	border: 0;
	color: var(--ks-ink);
	font-family: var(--ks-font-heading);
	font-size: clamp(1.375rem, 1.1rem + .6vw, 1.6875rem);
	font-weight: var(--ks-heading-weight);
	letter-spacing: var(--ks-heading-track);
	line-height: 1.42;
}
.main-content .ks-content blockquote::before {
	content: "\201C";
	display: block;
	height: 36px;
	color: var(--ks-secondary);
	font-family: var(--ks-font-heading);
	font-size: 80px;
	line-height: .7;
}
.main-content .ks-content blockquote p { margin: 0 0 .5em; font-size: inherit; line-height: inherit; }
.main-content .ks-content blockquote :is(cite, footer) {
	display: block;
	margin-top: 16px;
	color: var(--ks-muted);
	font-family: var(--ks-font-body);
	font-size: 14px;
	font-style: normal;
	font-weight: 600;
	letter-spacing: .1em;
	line-height: 1.4;
	text-transform: uppercase;
}
.main-content .ks-content blockquote footer::before { content: none; }

/* hr: a 56x3px secondary bar (editor content only; dividers inside channels keep their own look) */
.main-content :where(.ks-content, .ks-content > div, .ks-content td.content) > hr {
	width: 56px;
	height: var(--ks-rule);
	margin: 2.6em 0;
	border: 0;
	background: var(--ks-secondary);
	opacity: 1;
}

/* Bootstrap card (the "Contact card" snippet) */
.main-content .ks-content .card {
	margin: 0 0 1.4em;
	border: 1px solid var(--ks-line);
	border-top: var(--ks-rule) solid var(--ks-secondary);
	border-radius: var(--ks-radius-sm);
	background: #fff;
	font-size: 16px;
	line-height: 1.55;
}
.main-content .ks-content .card-body { padding: 22px 24px; }
.main-content .ks-content .card-body > :last-child { margin-bottom: 0; }
.main-content .ks-content .card :is(.card-title, h2, h3, h4) { margin: 0 0 8px; font-size: 22px; }

/* ========================================
   15. Tables. Deliberately NOT a bare "table, th, td" rule: core renders several channels as
   layout tables, and the table page layout (#C1TABLE) contains the editor's table (gotcha 4).
   Styled: tables with their OWN header cells, and anything with class="table". theme.js wraps
   them for sideways scrolling on phones.
   ======================================== */
.main-content :is(.ks-content table:has(> thead > tr > th, > tbody > tr > th, > tr > th), table.table) {
	width: 100%;
	margin: 1.6em 0;
	border-collapse: collapse;
	font-family: var(--ks-font-body);
	font-size: 16px;
	line-height: 1.5;
	--bs-table-bg: transparent;
}
.main-content :is(.ks-content table:has(> thead > tr > th, > tbody > tr > th, > tr > th), table.table) :is(thead th, tr:first-child > th) {
	padding: 13px 16px;
	border-bottom: 2px solid var(--ks-primary);
	background: var(--ks-events-bg);
	color: var(--ks-ink);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: .08em;
	text-align: left;
	text-transform: uppercase;
	vertical-align: bottom;
}
.main-content :is(.ks-content table:has(> thead > tr > th, > tbody > tr > th, > tr > th), table.table) td {
	padding: 14px 16px;
	border-bottom: 1px solid var(--ks-line);
	vertical-align: top;
}
.main-content :is(.ks-content table:has(> thead > tr > th, > tbody > tr > th, > tr > th), table.table) tbody tr:hover > td { background: color-mix(in oklab, var(--ks-primary) 3%, #fff); }
.main-content :is(.ks-content table:has(> thead > tr > th, > tbody > tr > th, > tr > th), table.table) caption {
	caption-side: top;
	padding: 0 0 10px;
	color: var(--ks-muted);
	font-size: 14px;
	text-align: left;
}
.ks-table-wrap { overflow-x: auto; overflow-y: hidden; margin: 1.6em 0; }
.ks-table-wrap > table { margin: 0 !important; }

/* ========================================
   16. Forms, alerts, pagination (Bootstrap class names, as the platform prints them)
   main.css styles every input/select/textarea (2px #ccc border, bottom margin; text inputs get
   "height: inherit !important"). The :is(..., #ks-form-scope) scope reaches one-ID strength so
   these win; #ks-form-scope itself matches nothing. min-height sets the 52px control height
   because main.css pins height with !important.
   ======================================== */
:is(.main-content, #ks-form-scope) :is(
	input[type="text"], input[type="email"], input[type="tel"], input[type="url"],
	input[type="number"], input[type="password"], input[type="search"],
	input[type="date"], input[type="time"], select, textarea, .form-control, .form-select
):where(:not(.hasDatepicker, .currency, .footer-email-input, [type="checkbox"], [type="radio"])) {
	min-height: var(--ks-control-h);
	padding: 12px 16px;
	border: 1.5px solid var(--ks-control-line);
	border-radius: var(--ks-radius-sm);
	background-color: #fff;
	color: var(--ks-ink);
	font-family: var(--ks-font-body);
	font-size: 16px;
	line-height: 1.4;
	box-shadow: none;
	transition: border-color var(--ks-ease), box-shadow var(--ks-ease);

	&:hover { border-color: color-mix(in oklab, var(--ks-ink) 70%, #fff); }
	&:focus {
		border-color: var(--ks-focus);
		box-shadow: 0 0 0 4px color-mix(in oklab, var(--ks-focus) 22%, transparent);
		outline: none;
	}
	&:is([aria-invalid="true"], .is-invalid, .error) { border-color: var(--ks-error); }
	&:is([aria-invalid="true"], .is-invalid, .error):focus { box-shadow: 0 0 0 4px rgba(180, 35, 24, .16); }
}
:is(.main-content, #ks-form-scope) textarea { min-height: 140px; resize: vertical; }
:is(.main-content, #ks-form-scope) :is(select, .form-select) { padding-right: 44px; }

.main-content :is(label, .form-label) {
	color: var(--ks-ink);
	font-family: var(--ks-font-body);
	font-size: 15px;
	font-weight: 600;
	line-height: 1.3;
}
.main-content .form-label { display: block; margin-bottom: 8px; }
.main-content :is(.form-text, .help-block, small.text-muted) { display: block; margin-top: 7px; color: var(--ks-muted); font-size: 14px; }
.main-content :is(.invalid-feedback, .error-message, .errorMsg) {
	align-items: center;
	gap: 6px;
	margin-top: 7px;
	color: var(--ks-error);
	font-size: 14px;
	font-weight: 500;
}
.main-content .invalid-feedback::before {
	content: "";
	flex: none;
	width: 16px;
	height: 16px;
	background-color: currentColor;
	-webkit-mask: var(--ks-i-alert) center / contain no-repeat;
	        mask: var(--ks-i-alert) center / contain no-repeat;
}
.main-content .is-invalid ~ .invalid-feedback,
.main-content .was-validated :invalid ~ .invalid-feedback { display: flex; }
.main-content :is(input[type="checkbox"], input[type="radio"], .form-check-input) {
	width: 20px;
	height: 20px;
	accent-color: var(--ks-primary);
	vertical-align: -4px;
	cursor: pointer;
}
.main-content .form-check-input:checked { border-color: var(--ks-primary); background-color: var(--ks-primary); }
.main-content .form-check-input:focus { border-color: var(--ks-focus); box-shadow: 0 0 0 4px color-mix(in oklab, var(--ks-focus) 22%, transparent); }
.main-content .form-check { display: flex; align-items: flex-start; gap: 12px; min-height: 44px; padding: 10px 0; margin: 0; }
.main-content .form-check .form-check-input { flex: none; float: none; margin: 2px 0 0; }
.main-content .form-check-label { font-size: 16px; font-weight: 400; line-height: 1.45; cursor: pointer; }
.main-content fieldset { min-width: 0; margin: 0 0 40px; padding: 0; border: 0; }
.main-content legend {
	float: none;
	width: 100%;
	margin: 0 0 22px;
	padding: 0;
	color: var(--ks-ink);
	font-family: var(--ks-font-heading);
	font-size: 26px;
	font-weight: var(--ks-heading-weight);
	letter-spacing: var(--ks-heading-track);
	line-height: 1.2;
}
.main-content .mb-3 { margin-bottom: 22px !important; }

/* Alerts: the alert sits above the form */
.main-content .alert {
	display: flex;
	gap: 12px;
	align-items: flex-start;
	margin-bottom: 32px;
	padding: 16px 20px;
	border: 1px solid transparent;
	border-radius: var(--ks-radius-sm);
	font-size: 16px;
	line-height: 1.5;
}
.main-content .alert-danger { border-color: #FECDCA; background: #FEF3F2; color: #8A1C12; }
.main-content .alert-success { border-color: #ABEFC6; background: #ECFDF3; color: #05603A; }
.main-content .alert-info { border-color: var(--ks-primary-soft); background: var(--ks-primary-tint); color: var(--ks-ink); }
.main-content .alert-warning { border-color: #FEDF89; background: #FFFAEB; color: #7A2E0E; }
.main-content .alert-danger::before {
	content: "";
	flex: none;
	width: 20px;
	height: 20px;
	margin-top: 2px;
	background-color: currentColor;
	-webkit-mask: var(--ks-i-alert) center / contain no-repeat;
	        mask: var(--ks-i-alert) center / contain no-repeat;
}

/* Pagination: 44px square links, active = primary fill */
.main-content .pagination { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.main-content .pagination .page-link {
	display: inline-grid;
	place-items: center;
	min-width: var(--ks-tap);
	height: var(--ks-tap);
	margin: 0;
	padding: 0 14px;
	border: 1px solid var(--ks-line);
	border-radius: min(var(--ks-radius), 10px) !important;
	background: #fff;
	color: var(--ks-ink);
	font-size: 15px;
	font-weight: 600;
	text-decoration: none;
	box-shadow: none;
}
.main-content .pagination .page-link:hover { border-color: var(--ks-primary); background: #fff; color: var(--ks-primary); }
.main-content .pagination :is(.active > .page-link, .page-link.active) { border-color: var(--ks-primary); background: var(--ks-primary); color: #fff; }
.main-content .pagination .disabled > .page-link { color: var(--ks-muted); opacity: .55; pointer-events: none; }

/* ========================================
   17. Buttons. 50px, theme radius, body font 600. Primary = brand fill; secondary = the
   secondary colour with dark text; outline = primary outline that fills on hover.
   main.css paints every .btn / .submit / .appInputButton green through one shared rule (and
   some of its button rules are id-scoped), so the scope below reaches one-ID strength (as in
   Ledger, KB 814). #ks-button-scope matches nothing. Left alone: .btn-close, store colour
   variants (meaningful in the cart), and module buttons that style themselves.
   ======================================== */
:is(.main-content, #ks-button-scope) :is(
	.btn,
	.submit,
	.appInputButton,
	input[type="submit"]:where(:not([class])),
	input[type="button"]:where(:not([class])),
	button[type="submit"]:where(:not([class])),
	.form-actions button
):where(:not(.btn-close, .btn-link, .button-green, .button-gray, .button-red, .button-blue, .button-burgundy)) {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	min-height: 50px;
	padding: 0 26px;
	border: 1.5px solid var(--ks-primary);
	border-radius: var(--ks-radius);
	background-color: var(--ks-primary);
	background-image: none;
	box-shadow: none;
	color: #fff;
	cursor: pointer;
	font-family: var(--ks-font-body);
	font-size: 16px;
	font-weight: 600;
	letter-spacing: .01em;
	line-height: 1.2;
	text-decoration: none;
	white-space: nowrap;
	transition: background-color var(--ks-ease), border-color var(--ks-ease), color var(--ks-ease);

	&:hover,
	&:focus-visible,
	&:active,
	&.active {
		background-color: var(--ks-primary-hover);
		border-color: var(--ks-primary-hover);
		color: #fff;
	}
	&:disabled, &.disabled {
		background-color: var(--ks-line);
		border-color: var(--ks-line);
		color: var(--ks-muted);
		cursor: not-allowed;
		opacity: 1;
	}
	&.btn-sm { min-height: 44px; padding: 0 18px; font-size: 15px; }
	&.btn-lg { min-height: 56px; padding: 0 30px; font-size: 18px; }

	/* Secondary: the secondary colour, dark text (never white on it) */
	&:is(.btn-secondary, .btn-default, .btn-light, .btn-warning) {
		background-color: var(--ks-secondary);
		border-color: var(--ks-secondary);
		color: var(--ks-on-secondary);

		&:hover, &:focus-visible, &:active, &.active {
			background-color: var(--ks-secondary-hover);
			border-color: var(--ks-secondary-hover);
			color: var(--ks-on-secondary);
		}
	}
	/* Outline: fills with the primary on hover */
	&:is(.btn-outline-primary, .btn-outline-secondary, .btn-outline-dark) {
		background-color: transparent;
		border-color: var(--ks-primary);
		color: var(--ks-primary);

		&:hover, &:focus-visible, &:active, &.active {
			background-color: var(--ks-primary);
			border-color: var(--ks-primary);
			color: #fff;
		}
	}
}
:is(.main-content, #ks-button-scope) .btn.btn-link {
	min-height: 44px;
	padding: 0 6px;
	border-color: transparent;
	background: transparent;
	color: var(--ks-primary);
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 3px;

	&:hover, &:focus-visible { background: transparent; color: var(--ks-primary-hover); }
}
/* The one core button rule stronger than the scope above (1,3,0). Same selector here, so load
   order decides. */
#showdocumentlist span.pull-right .btn-success:hover {
	background-color: var(--ks-primary-hover);
	border-color: var(--ks-primary-hover);
	color: #fff;
}
/* A paragraph of buttons (the "Button pair" snippet); full width on phones */
.main-content .ks-content p:has(> .btn + .btn) { display: flex; flex-wrap: wrap; gap: 12px 16px; }
@media (max-width: 575.98px) {
	.main-content .ks-content p:has(> .btn + .btn) > .btn,
	.main-content .ks-content form :is(button[type="submit"], input[type="submit"], .btn-primary) { width: 100%; }
}

/* ========================================
   18. Platform channel typography
   Channels mark their text with shared classes (.appTitle1-3, .appOutput, .appLinkInline);
   main.css only gives them grey em sizes. Channel BOXES are styled by Brand Look tokens;
   channel TEXT is mapped here.
   ======================================== */
.appTitle1,
.main-content .appTitle1 {
	color: var(--ks-ink);
	font-family: var(--ks-font-heading);
	font-size: clamp(1.75rem, 1.25rem + 1.1vw, 2.25rem);
	font-weight: var(--ks-heading-weight);
	letter-spacing: var(--ks-heading-track);
	line-height: 1.16;
}
.appTitle2,
.main-content .appTitle2 {
	color: var(--ks-ink);
	font-family: var(--ks-font-heading);
	font-size: clamp(1.375rem, 1.1rem + .5vw, 1.625rem);
	font-weight: var(--ks-heading-weight);
	letter-spacing: var(--ks-heading-track);
	line-height: 1.22;
}
.appTitle3,
.main-content .appTitle3 {
	color: var(--ks-ink);
	font-family: var(--ks-font-body);
	font-size: 17px;
	font-weight: 600;
	line-height: 1.35;
}
.appOutput { color: var(--ks-ink); line-height: 1.6; }
a.appLinkInline,
.appLinkInline a { color: var(--ks-primary); }
a.appLinkInline:hover,
.appLinkInline a:hover { color: var(--ks-primary-hover); }

/* ========================================
   19. Footer. One Deep block on a 5px secondary rule; columns 4/2/2/4 that reflow when one is
   empty; the bottom row sits inside the same block above a hairline.
   ======================================== */
.ks-footer {
	border-top: 5px solid var(--ks-secondary);
	background: var(--ks-deep);
	color: var(--ks-on-dark-muted);
	font-size: 16px;
	line-height: 1.6;
}
.ks-footer a { color: var(--ks-on-dark-muted); text-decoration: none; }
.ks-footer a:hover { color: #fff; text-decoration: underline; }
.ks-footer__grid {
	display: flex;
	flex-wrap: wrap;
	gap: 48px 56px;
	padding-block: 88px 72px;
}
.ks-footer__brand,
.ks-footer__signup { flex: 4 1 0; min-width: 0; }
.ks-footer__links { flex: 2 1 0; min-width: 0; }
/* Column headings: 13px uppercase in the secondary colour */
.ks-footer :is(.ks-footer__links, .ks-footer__contact) :is(h2, h3, h4) {
	margin: 0 0 20px;
	color: var(--ks-secondary);
	font-family: var(--ks-font-body);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: .14em;
	line-height: 1.3;
	text-transform: uppercase;
}
.ks-footer__links ul { display: flex; flex-direction: column; gap: 4px; margin: 0; padding: 0; list-style: none; }
.ks-footer__links li { margin: 0; list-style: none; }
.ks-footer__links li::marker { content: none; }
.ks-footer__links a { display: inline-block; padding: 6px 0; }

/* Brand column: light logo, address, phone, email, round social buttons */
.ks-logo--footer { color: #fff; }
.ks-logo--footer:hover { color: #fff; text-decoration: none !important; }
.ks-logo--footer .ks-logo__mark { background: var(--ks-secondary); color: var(--ks-deep); }
.ks-logo--footer .ks-logo__mark--image { background: none; }
.ks-logo--footer .ks-logo__name { color: #fff; }
.ks-logo__chip { display: inline-block; padding: 10px 14px; border-radius: var(--ks-radius-sm); background: #fff; }
.ks-logo__chip img { max-height: 48px; }
.ks-footer__contact { margin-top: 28px; line-height: 1.7; }
.ks-footer__contact p { margin: 0 0 16px; }
.ks-footer__contact > :last-child { margin-bottom: 0; }
.ks-footer__social { margin-top: 22px; }
.ks-footer__social ul { gap: 8px; }
.ks-footer__social a {
	width: 44px;
	height: 44px;
	border: 1px solid rgba(255, 255, 255, .22);
	color: #fff;
}
.ks-footer__social a:hover { border-color: var(--ks-secondary); background: var(--ks-secondary); color: var(--ks-deep); text-decoration: none; }

/* Newsletter card: Newsletter Text + core's email signup widget (styled, not rebuilt) */
.ks-signup {
	padding: 30px 30px 28px;
	border-radius: var(--ks-radius-lg);
	background: rgba(255, 255, 255, .06);
}
.ks-footer .ks-signup :is(h2, h3) { margin: 0 0 8px; color: #fff; font-size: 26px; }
.ks-signup__text p { margin: 0 0 18px; font-size: 15px; }
/* The widget prints its own small heading; the section heading replaces it (theme.js keeps
   it as the field's accessible name) */
.ks-signup__text + .ks-signup__form .footer-email-signup > h5 {
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
}
.ks-signup__form .footer-email-signup > h5 { margin: 0 0 12px; color: #fff; font-family: var(--ks-font-heading); font-size: 22px; font-weight: var(--ks-heading-weight); }
.ks-signup__form .footer-signup-hp {
	position: absolute !important;
	left: -9999px !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
}
.ks-signup__form .footer-signup-form { margin: 0; }
.ks-signup__form .signup-input-group { display: flex; flex-wrap: wrap; gap: 10px; }
.ks-signup__form #footerEmailInput {
	flex: 1 1 200px;
	min-width: 0;
	height: 50px !important;
	margin: 0;
	padding: 0 16px;
	border: 1.5px solid transparent;
	border-radius: var(--ks-radius-sm);
	background: #fff;
	color: var(--ks-ink);
	font-family: var(--ks-font-body);
	font-size: 16px;
	box-shadow: none;
}
.ks-signup__form #footerEmailInput::placeholder { color: var(--ks-muted); opacity: 1; }
.ks-signup__form #footerEmailInput:focus { outline: 3px solid var(--ks-secondary); outline-offset: 2px; box-shadow: none; }
.ks-signup__form #footerSignupBtn {
	flex: none;
	height: 50px;
	margin: 0;
	padding: 0 26px;
	border: 0;
	border-radius: var(--ks-radius);
	background: var(--ks-secondary);
	color: var(--ks-on-secondary);
	font-family: var(--ks-font-body);
	font-size: 16px;
	font-weight: 600;
	white-space: nowrap;
	box-shadow: none;
	cursor: pointer;
}
.ks-signup__form #footerSignupBtn:hover { background: var(--ks-secondary-hover); }
.ks-signup__form :is(.footer-signup-msg, .already-subscribed-msg) { margin: 10px 0 0; color: #fff; font-size: 15px; }

/* Bottom row (Footer Text): copyright left, links right */
.ks-footer__bottom { border-top: 1px solid rgba(255, 255, 255, .14); }
.ks-footer__text {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 12px 32px;
	padding-top: 26px;
	padding-bottom: 30px;
	font-size: 14px;
}
.ks-footer__text p { margin: 0; }
.ks-footer__text p:last-child:not(:first-child) { display: flex; flex-wrap: wrap; gap: 6px 26px; }
.ks-footer .ks-hints--footer { padding-top: 24px; }
.ks-footer .ks-admin-hint { margin: 0 0 12px; }

@media (max-width: 991.98px) {
	.ks-footer__grid { gap: 48px 40px; padding-block: 72px 56px; }
	.ks-footer__grid > * { flex: 1 1 calc(50% - 20px); }
}
@media (max-width: 575.98px) {
	.ks-footer__grid { gap: 40px 24px; padding-block: 60px 48px; }
	.ks-footer__grid > * { flex: 1 1 calc(50% - 12px); }
	.ks-footer__grid > :is(.ks-footer__brand, .ks-footer__signup) { flex-basis: 100%; }
	.ks-signup { padding: 24px 20px; }
	.ks-signup__form #footerSignupBtn { flex: 1 1 100%; }
	.ks-footer__text { flex-direction: column; align-items: flex-start; }
}

/* ========================================
   20. Reduced motion
   ======================================== */
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		transition-duration: .01ms !important;
		animation-duration: .01ms !important;
		scroll-behavior: auto !important;
	}
}