/* =====================================================================
   ICS ONE Global — main stylesheet
   Colours marked (C) are overridden by Appearance > Customize.
   ===================================================================== */

:root {
	--c-primary: #0B2A55;        /* (C) */
	--c-accent: #0FA3B1;         /* (C) */
	--c-dark: #071A36;           /* (C) */

	--c-accent-strong: #1A67D2;  /* brand azure, for large text and rules only */
	--c-accent-text: color-mix(in srgb, var(--c-accent) 72%, #000);
	--c-primary-hover: color-mix(in srgb, var(--c-primary) 82%, #fff);
	--c-dark-2: color-mix(in srgb, var(--c-dark) 78%, #000);

	--c-bg: #FFFFFF;
	--c-soft: #F8F9FA;
	--c-soft-2: #E8EEF5;
	--c-ink: #0E1B2E;
	--c-ink-2: #46566B;
	--c-ink-3: #6E7E94;
	--c-line: #DCE3EC;

	/* retail red, kept apart from the brand blues so the shop reads as a
	   separate destination; both pass AA against white text */
	--c-shop: #C62828;
	--c-shop-dark: #A4161A;

	--c-on-dark: #EEF3FA;
	--c-on-dark-2: #A9BCD6;
	--c-on-dark-line: rgba(255, 255, 255, .14);

	--f-display: "Plus Jakarta Sans", "Segoe UI", system-ui, -apple-system, sans-serif;
	--f-body: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;

	--w-max: 1200px;
	--gutter: clamp(16px, 4vw, 32px);
	--sec: clamp(56px, 8vw, 104px);
	--r-sm: 6px;
	--r-md: 10px;
	--r-lg: 16px;
	--shadow: 0 1px 2px rgba(11, 42, 85, .06), 0 12px 32px -14px rgba(11, 42, 85, .22);
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
	margin: 0;
	background: var(--c-bg);
	color: var(--c-ink);
	font-family: var(--f-body);
	/* Inter carries a tall x-height, so it reads a size larger than most
	   faces at the same value — 16.5px here matches the old 17px rhythm. */
	font-size: 16.5px;
	line-height: 1.66;
	letter-spacing: -.004em;
	-webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--c-primary); }
p { margin: 0; }
h1, h2, h3, h4, h5 {
	font-family: var(--f-display);
	line-height: 1.14;
	letter-spacing: -.015em;
	margin: 0;
	text-wrap: balance;
	color: var(--c-ink);
}
:focus-visible { outline: 2px solid var(--c-accent); outline-offset: 3px; border-radius: 3px; }
.screen-reader-text {
	position: absolute !important; width: 1px; height: 1px; overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px); white-space: nowrap;
}
.ics-skip {
	position: absolute; left: -9999px; top: 8px; z-index: 200;
	background: var(--c-primary); color: #fff; padding: 10px 16px; border-radius: var(--r-sm);
}
.ics-skip:focus { left: 8px; }

.ics-container { width: 100%; max-width: var(--w-max); margin-inline: auto; padding-inline: var(--gutter); }

/* ---------- type ---------- */
.ics-eyebrow {
	font-family: var(--f-display);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--c-accent-text);
	margin-bottom: 14px;
}
.ics-h1 { font-size: clamp(34px, 5.4vw, 60px); font-weight: 800; letter-spacing: -.028em; }
.ics-h2 { font-size: clamp(27px, 3.6vw, 42px); font-weight: 800; letter-spacing: -.022em; }
.ics-h3 { font-size: clamp(21px, 2.2vw, 26px); font-weight: 700; }
.ics-h4 { font-size: 19px; font-weight: 700; }
.ics-h2 strong, .ics-h1 strong { color: var(--c-primary); }
.ics-lede { font-size: clamp(18px, 1.6vw, 20px); color: var(--c-ink-2); max-width: 64ch; }
.ics-text { color: var(--c-ink-2); max-width: 68ch; }
.ics-text + .ics-text { margin-top: 14px; }
.ics-claim { font-size: 19px; font-weight: 700; color: var(--c-primary); max-width: 60ch; }
.ics-note { font-style: italic; color: var(--c-ink-2); border-left: 3px solid var(--c-accent-strong); padding-left: 18px; }
.ics-stack { display: flex; flex-direction: column; gap: 18px; }
.ics-stack--lg { gap: 28px; }
.ics-center { text-align: center; margin-inline: auto; }
.ics-center .ics-lede, .ics-center .ics-text { margin-inline: auto; }
.ics-prose > * + * { margin-top: 1em; }

/* ---------- buttons ---------- */
.ics-btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 8px;
	min-height: 48px; padding: 0 26px;
	border-radius: var(--r-sm); border: 2px solid transparent;
	font-family: var(--f-display); font-size: 15.5px; font-weight: 700; letter-spacing: .01em;
	text-decoration: none; cursor: pointer; line-height: 1;
	transition: background-color .15s ease, border-color .15s ease, color .15s ease, transform .15s ease;
}
.ics-btn:active { transform: translateY(1px); }
.ics-btn--primary { background: var(--c-primary); color: #fff; }
.ics-btn--primary:hover { background: var(--c-primary-hover); color: #fff; }
.ics-btn--accent { background: var(--c-accent); color: var(--c-dark); }
.ics-btn--accent:hover { filter: brightness(1.08); }
/* every route into the shop carries the same red, so it reads as one
   destination wherever it appears */
.ics-btn--shop { background: var(--c-shop); color: #fff; font-weight: 800; }
.ics-btn--shop:hover, .ics-btn--shop:focus-visible { background: var(--c-shop-dark); color: #fff; }
.ics-btn--outline { border-color: var(--c-primary); color: var(--c-primary); background: transparent; }
.ics-btn--outline:hover { background: var(--c-primary); color: #fff; }
.ics-btn--light { border-color: rgba(255, 255, 255, .5); color: #fff; background: transparent; }
.ics-btn--light:hover { background: rgba(255, 255, 255, .1); border-color: #fff; }
.ics-btn--sm { min-height: 40px; padding: 0 18px; font-size: 14.5px; }
.ics-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 8px; }

/* ---------- header ---------- */
.ics-header {
	position: sticky; top: 0; z-index: 100;
	background: rgba(255, 255, 255, .94);
	backdrop-filter: saturate(1.4) blur(10px);
	-webkit-backdrop-filter: saturate(1.4) blur(10px);
	border-bottom: 1px solid var(--c-line);
}
.admin-bar .ics-header { top: 32px; }
@media (max-width: 782px) { .admin-bar .ics-header { top: 46px; } }
.ics-header__bar { display: flex; align-items: center; gap: 24px; min-height: 76px; }

.ics-logo { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--c-primary); flex: 0 0 auto; }
.ics-logo__img { height: 44px; width: auto; }
.ics-logo__mark { width: 34px; height: 34px; }
.ics-logo__word { font-family: var(--f-display); font-weight: 800; font-size: 21px; letter-spacing: -.02em; color: var(--c-primary); }
.ics-logo__word b { color: var(--c-accent-text); font-weight: 800; }

.ics-nav { display: flex; align-items: center; gap: 22px; margin-left: auto; }
.ics-nav__list { display: flex; align-items: center; gap: 4px; list-style: none; margin: 0; padding: 0; }
.ics-nav__list a {
	display: block; padding: 10px 14px; border-radius: var(--r-sm);
	font-family: var(--f-display); font-weight: 600; font-size: 15.5px;
	color: var(--c-ink); text-decoration: none;
}
.ics-nav__list a:hover { background: var(--c-soft); color: var(--c-primary); }
.ics-nav__list a[aria-current="page"],
.ics-nav__list .current-menu-item > a { color: var(--c-primary); box-shadow: inset 0 -2px 0 var(--c-accent); border-radius: 0; }
.ics-nav__cloud { color: var(--c-accent-text) !important; letter-spacing: .04em; }
.ics-nav__actions { display: flex; align-items: center; gap: 14px; }
.ics-nav__signin { font-family: var(--f-display); font-weight: 600; font-size: 15px; color: var(--c-ink-2); text-decoration: none; }
.ics-nav__signin:hover { color: var(--c-primary); }

/* Shop sits between the plain sign-in link and the solid Contact button,
   so it gets the middle treatment: an outlined pill with a cart mark. */
.ics-nav__shop {
	display: inline-flex; align-items: center; gap: 8px; flex: none;
	min-height: 40px; padding: 0 16px; border-radius: var(--r-sm);
	background: var(--c-shop); border: 2px solid transparent;
	font-family: var(--f-display); font-weight: 800; font-size: 14.5px;
	color: #fff; text-decoration: none; white-space: nowrap;
	transition: background-color .15s ease;
}
.ics-nav__shop:hover, .ics-nav__shop:focus-visible { background: var(--c-shop-dark); color: #fff; }
.ics-nav__shop-icon { width: 19px; height: 19px; flex: none; }

/* Narrower desktops: the cart mark alone carries it, label hidden but
   still read out by screen readers. */
@media (min-width: 961px) and (max-width: 1150px) {
	.ics-nav__shop { padding: 0 11px; }
	.ics-nav__shop span {
		position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
		overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
	}
}

.ics-nav-toggle {
	display: none; margin-left: auto; width: 46px; height: 46px;
	border: 1px solid var(--c-line); border-radius: var(--r-sm); background: #fff; cursor: pointer;
	align-items: center; justify-content: center;
}
.ics-nav-toggle__bars, .ics-nav-toggle__bars::before, .ics-nav-toggle__bars::after {
	display: block; width: 20px; height: 2px; background: var(--c-primary); border-radius: 2px;
	position: relative; transition: transform .2s ease, background .2s ease;
}
.ics-nav-toggle__bars::before, .ics-nav-toggle__bars::after { content: ""; position: absolute; left: 0; }
.ics-nav-toggle__bars::before { top: -6px; }
.ics-nav-toggle__bars::after { top: 6px; }
.ics-nav-open .ics-nav-toggle__bars { background: transparent; }
.ics-nav-open .ics-nav-toggle__bars::before { transform: translateY(6px) rotate(45deg); }
.ics-nav-open .ics-nav-toggle__bars::after { transform: translateY(-6px) rotate(-45deg); }

@media (max-width: 960px) {
	.ics-nav-toggle { display: inline-flex; }
	.ics-nav {
		display: none; position: absolute; left: 0; right: 0; top: 100%;
		flex-direction: column; align-items: stretch; gap: 8px;
		background: #fff; border-bottom: 1px solid var(--c-line);
		padding: 12px var(--gutter) 20px; box-shadow: var(--shadow);
	}
	.ics-nav-open .ics-nav { display: flex; }
	.ics-nav__list { flex-direction: column; align-items: stretch; }
	.ics-nav__list a { padding: 13px 10px; font-size: 17px; border-bottom: 1px solid var(--c-soft-2); border-radius: 0; }
	.ics-nav__actions { flex-wrap: wrap; justify-content: space-between; gap: 10px; padding-top: 8px; }
	.ics-nav__shop { order: -1; width: 100%; justify-content: center; min-height: 46px; font-size: 16px; }
}

/* ---------- sections ---------- */
.ics-section { padding-block: var(--sec); }
.ics-section--soft { background: var(--c-soft); }
.ics-section--tight { padding-block: calc(var(--sec) * .6); }
.ics-section--dark { background: var(--c-dark); color: var(--c-on-dark); }
.ics-section--dark h1, .ics-section--dark h2, .ics-section--dark h3, .ics-section--dark h4 { color: #fff; }
.ics-section--dark .ics-eyebrow { color: var(--c-accent); }
.ics-section--dark .ics-lede, .ics-section--dark .ics-text { color: var(--c-on-dark-2); }
.ics-section--dark strong { color: #fff; }

/* hero (home) */
.ics-hero {
	position: relative; overflow: hidden;
	background:
		radial-gradient(80% 90% at 90% 10%, color-mix(in srgb, var(--c-accent) 26%, transparent) 0%, transparent 60%),
		linear-gradient(160deg, var(--c-primary) 0%, var(--c-dark) 55%, var(--c-dark-2) 100%);
	color: #fff;
	padding-block: clamp(80px, 12vw, 150px) clamp(72px, 10vw, 128px);
}
.ics-hero__bg { position: absolute; inset: 0; opacity: .16; mix-blend-mode: screen; pointer-events: none; }
.ics-hero__bg img,
.ics-hero__bg video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 60%; }
.ics-hero__video { z-index: 1; }
/* Phones and anyone who prefers less movement get the still photo only. */
@media (max-width: 720px) { .ics-hero__video { display: none; } }
@media (prefers-reduced-motion: reduce) { .ics-hero__video { display: none; } }
.ics-hero .ics-container { position: relative; }
.ics-hero__kicker {
	font-family: var(--f-display); font-size: clamp(16px, 1.6vw, 20px); font-weight: 700;
	letter-spacing: .18em; text-transform: uppercase; color: var(--c-accent); margin-bottom: 18px;
}
.ics-hero__kicker b { color: #fff; }
.ics-hero__title { font-size: clamp(40px, 7vw, 82px); font-weight: 800; letter-spacing: -.035em; line-height: 1.02; color: #fff; max-width: 15ch; }
.ics-hero__title span { display: block; }
.ics-hero__title span:last-child { color: var(--c-accent-strong); }
.ics-hero .ics-actions { margin-top: 36px; }

/* page head (inner pages) */
.ics-pagehead {
	background:
		radial-gradient(70% 120% at 100% 0%, color-mix(in srgb, var(--c-accent) 22%, transparent) 0%, transparent 60%),
		linear-gradient(160deg, var(--c-primary) 0%, var(--c-dark) 100%);
	color: #fff;
	padding-block: clamp(56px, 8vw, 96px);
}
.ics-pagehead .ics-h1, .ics-pagehead h1 { color: #fff; max-width: 22ch; }
.ics-pagehead .ics-h1 strong { color: var(--c-accent-strong); }
.ics-pagehead .ics-lede { color: var(--c-on-dark-2); margin-top: 18px; }
.ics-pagehead .ics-eyebrow { color: var(--c-accent); }
.ics-pagehead__split { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(28px, 5vw, 64px); align-items: center; }
.ics-pagehead__split .ics-media { border-radius: var(--r-lg); box-shadow: 0 24px 60px -24px rgba(0, 0, 0, .5); }
.ics-pagehead .ics-actions { margin-top: 28px; }

/* split: text + media */
.ics-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 80px); align-items: center; }
.ics-split--reverse > :first-child { order: 2; }
.ics-split--top { align-items: start; }
.ics-split--wide-text { grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); }

/* media */
.ics-media { margin: 0; border-radius: var(--r-lg); overflow: hidden; background: var(--c-soft-2); }
.ics-media img { width: 100%; height: 100%; object-fit: cover; }
.ics-media--photo { aspect-ratio: 4 / 3; }
.ics-media--tall { aspect-ratio: 4 / 5; }
.ics-media--wide { aspect-ratio: 16 / 9; }
.ics-media--contain { background: transparent; border-radius: 0; }
.ics-media--contain img { object-fit: contain; }
.ics-media--empty {
	min-height: 260px;
	background:
		radial-gradient(60% 80% at 80% 20%, color-mix(in srgb, var(--c-accent) 30%, transparent), transparent 70%),
		linear-gradient(150deg, var(--c-primary), var(--c-dark));
}
.ics-media--contain.ics-media--empty { border-radius: var(--r-lg); }
.ics-media-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.ics-media-pair .ics-media:nth-child(2) { margin-top: 48px; }

/* tick lists */
.ics-ticks { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.ics-ticks li { position: relative; padding-left: 34px; color: var(--c-ink-2); }
.ics-ticks li::before {
	content: ""; position: absolute; left: 0; top: .2em; width: 22px; height: 22px; border-radius: 50%;
	background: color-mix(in srgb, var(--c-accent) 16%, #fff) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.5 12.5l3.5 3.5 7.5-8' fill='none' stroke='%230B7F8A' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 15px no-repeat;
}
.ics-ticks strong { color: var(--c-ink); }
.ics-section--dark .ics-ticks li { color: var(--c-on-dark); }
.ics-section--dark .ics-ticks li::before, .ics-lease__body .ics-ticks li::before { background-color: rgba(255, 255, 255, .1); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.5 12.5l3.5 3.5 7.5-8' fill='none' stroke='%236FD6DE' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }

/* cards */
.ics-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
.ics-cards--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ics-cards--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.ics-card {
	background: #fff; border: 1px solid var(--c-line); border-radius: var(--r-md);
	padding: 30px 28px; display: flex; flex-direction: column; gap: 12px;
	transition: box-shadow .2s ease, transform .2s ease, border-color .2s ease;
}
.ics-card:hover { box-shadow: var(--shadow); border-color: transparent; transform: translateY(-2px); }
.ics-card p { color: var(--c-ink-2); font-size: 16px; }
.ics-card__icon { width: 52px; height: 52px; object-fit: contain; margin-bottom: 6px; }
.ics-card__icon--mark {
	display: block; border-radius: 12px;
	background: color-mix(in srgb, var(--c-accent) 14%, #fff) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 3v18M5 7.5a8 8 0 0 0 0 9M19 7.5a8 8 0 0 1 0 9' fill='none' stroke='%230B2A55' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E") center / 26px no-repeat;
}
.ics-card--plain { border: 0; padding: 0; background: transparent; }
.ics-card--plain:hover { box-shadow: none; transform: none; }
.ics-section--soft .ics-card { background: #fff; }
.ics-card__num { font-family: var(--f-display); font-weight: 800; font-size: 15px; color: var(--c-accent-text); letter-spacing: .08em; }

/* stats */
.ics-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.ics-stat { border-top: 3px solid var(--c-accent-strong); padding-top: 16px; }
.ics-stat__num { font-family: var(--f-display); font-weight: 800; font-size: clamp(38px, 5vw, 56px); letter-spacing: -.03em; line-height: 1; color: var(--c-primary); font-variant-numeric: tabular-nums; }
.ics-stat__label { margin-top: 8px; font-weight: 700; color: var(--c-ink-2); text-transform: uppercase; letter-spacing: .1em; font-size: 13px; font-family: var(--f-display); }

/* chips */
.ics-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.ics-chip { font-size: 14.5px; font-weight: 600; padding: 6px 14px; border-radius: 999px; background: #fff; border: 1px solid var(--c-line); color: var(--c-ink-2); }

/* feature band: 3 pillars on dark */
.ics-pillars { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; border-top: 1px solid var(--c-on-dark-line); }
.ics-pillar { padding: 34px 32px 8px 0; }
.ics-pillar + .ics-pillar { padding-left: 32px; border-left: 1px solid var(--c-on-dark-line); }
.ics-pillar h3 { font-size: 22px; margin-bottom: 10px; }
.ics-pillar p { color: var(--c-on-dark-2); }
/* these three are pillars, not steps, so the marker names what each one
   gives you rather than counting them off */
.ics-pillar__num { font-family: var(--f-display); font-weight: 700; color: var(--c-accent); font-size: 14.5px; letter-spacing: .01em; margin-bottom: 12px; }

/* co-founder message */
/* The road so far. These entries are a real sequence in time, so the
   years earn their place as markers on a spine. */
.ics-road { list-style: none; margin: 0; padding: 0; position: relative; display: grid; gap: 0; }
.ics-road::before { content: ""; position: absolute; left: 7px; top: 10px; bottom: 10px; width: 2px; background: var(--c-line); }
.ics-road__step { position: relative; padding: 0 0 34px 42px; }
.ics-road__step:last-child { padding-bottom: 0; }
.ics-road__step::before {
	content: ""; position: absolute; left: 0; top: 7px; width: 16px; height: 16px; border-radius: 50%;
	background: #fff; border: 3px solid var(--c-line); box-sizing: border-box;
}
.ics-road__step--now::before { border-color: var(--c-primary); background: var(--c-primary); }
.ics-road__step--next::before { border-color: var(--c-accent-strong); border-style: dashed; }
.ics-road__year { font-family: var(--f-display); font-weight: 800; font-size: 15px; letter-spacing: .1em; text-transform: uppercase; color: var(--c-accent-text); margin: 0 0 4px; }
.ics-road__step--next .ics-road__year { color: var(--c-ink-3); }
.ics-road__title { font-size: 20px; line-height: 1.3; margin: 0 0 6px; }
.ics-road__step p:last-child { color: var(--c-ink-2); max-width: 64ch; margin: 0; }
.ics-road__foot { display: flex; flex-direction: column; gap: 18px; align-items: flex-start; max-width: 70ch; }

@media (min-width: 900px) {
	/* years sit in their own column so the eye can run down them */
	.ics-road::before { left: 139px; }
	.ics-road__step { padding-left: 174px; }
	.ics-road__step::before { left: 132px; }
	.ics-road__year { position: absolute; left: 0; top: 6px; width: 112px; text-align: right; margin: 0; }
}

/* ---------- Co-Founder letter ----------
   A letter is not a content block: one measured column, a drop cap to
   mark where the voice starts, and the sign-off carrying the close. */
.ics-letter { max-width: 760px; margin-inline: auto; }
.ics-letter__eyebrow { font-family: var(--f-display); font-weight: 700; font-size: 15.5px; color: var(--c-accent-text); margin: 0 0 10px; }
.ics-letter__title { max-width: 18ch; }
.ics-letter__body { margin-top: 30px; }
.ics-letter__body p { font-size: 17px; line-height: 1.8; color: var(--c-ink-2); margin: 0; }
.ics-letter__body p + p { margin-top: 22px; }
.ics-letter__body strong { color: var(--c-ink); }
.ics-letter__body > p:first-child::first-letter {
	float: left; font-family: var(--f-display); font-weight: 800; font-size: 62px;
	line-height: .84; color: var(--c-primary); padding: 6px 12px 0 0;
}
.ics-letter__close { font-family: var(--f-display); font-weight: 700; font-size: clamp(21px, 2.4vw, 28px); line-height: 1.3; letter-spacing: -.015em; color: var(--c-primary); margin: 34px 0 0; max-width: 24ch; }
.ics-letter__tagline { font-family: var(--f-display); font-weight: 800; font-size: clamp(19px, 2.1vw, 25px); letter-spacing: -.02em; color: var(--c-dark); margin: 12px 0 0; }
.ics-letter__tagline span { color: var(--c-accent-strong); }
.ics-letter__sign { margin-top: 34px; padding-top: 22px; border-top: 1px solid var(--c-line); }
.ics-letter__sign b { display: block; font-family: var(--f-display); font-weight: 800; font-size: 18.5px; color: var(--c-dark); }
.ics-letter__sign span { display: block; margin-top: 2px; font-size: 15px; color: var(--c-ink-3); }

@media (max-width: 640px) {
	.ics-letter__body > p:first-child::first-letter { font-size: 50px; padding-right: 10px; }
	.ics-letter__close, .ics-letter__title { max-width: none; }
}

.ics-message { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(32px, 6vw, 80px); align-items: start; }
.ics-message__aside { position: sticky; top: 110px; }
.ics-message__quote { font-family: var(--f-display); font-size: clamp(24px, 2.8vw, 34px); font-weight: 700; line-height: 1.2; color: var(--c-primary); letter-spacing: -.02em; }
.ics-message__quote::before { content: "\201C"; display: block; font-size: 80px; line-height: .8; color: var(--c-accent); }
/* a founder's letter: a little more leading than body copy, and the
   opening paragraph carries slightly more weight */
.ics-message__body p { color: var(--c-ink-2); max-width: 68ch; line-height: 1.75; }
.ics-message__body p + p { margin-top: 20px; }
.ics-message__body p:first-child { font-size: 18px; color: var(--c-ink); }
.ics-message__body .ics-message__em { color: var(--c-ink); font-weight: 700; font-size: 19px; }
.ics-message__body strong { color: var(--c-ink); }
.ics-message__sig { margin-top: 26px; font-family: var(--f-display); font-weight: 700; color: var(--c-primary); }
.ics-message__sig span { display: block; font-weight: 600; font-size: 14px; color: var(--c-ink-3); letter-spacing: .06em; text-transform: uppercase; }

/* group companies */
.ics-companies { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; }
/* Each company gets a nameplate: the entity in white on the group's navy,
   so four divisions read as four companies rather than four grey boxes. */
.ics-company {
	background: #fff; border: 1px solid var(--c-line); border-radius: var(--r-md);
	padding: 0; overflow: hidden; display: flex; flex-direction: column;
	box-shadow: var(--shadow);
}
/* the company name sits on a blue band; the work it does reads below it
   on white, so the name is the first thing the eye lands on */
.ics-company__plate {
	background: var(--c-primary);
	padding: 22px 26px 18px; display: flex; flex-direction: column; gap: 3px;
}
.ics-company__plate .ics-company__name { font-family: var(--f-display); font-weight: 800; font-size: 20px; line-height: 1.25; color: #fff; margin: 0; }
/* light enough to stay legible on the blue, not so light it competes */
.ics-company__plate .ics-company__where { font-family: var(--f-display); font-weight: 600; font-size: 14px; color: #E3EEFF; margin: 0; }
.ics-company__body { padding: 24px 26px 28px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.ics-company__body .ics-h4 { color: var(--c-primary); }
.ics-company__body p { color: var(--c-ink-2); }
.ics-company__tag { font-family: var(--f-display); font-weight: 700; font-size: 13px; letter-spacing: .1em; text-transform: uppercase; color: var(--c-accent-text); }
.ics-company .ics-btn { align-self: flex-start; margin-top: 6px; }
/* the shop panel is navy end to end, so it reads as a platform rather
   than a fifth company */
.ics-company--feature { grid-column: 1 / -1; padding: 32px; background: var(--c-dark); border-color: var(--c-dark); color: #fff; display: grid; grid-template-columns: minmax(0, 1.4fr) auto; align-items: center; gap: 24px; }
.ics-company--feature p { color: var(--c-on-dark-2); }
.ics-company--feature h3 { color: #fff; }
.ics-company--feature .ics-company__tag { color: var(--c-accent); }

/* shop band */
.ics-shop { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 64px); align-items: start; }
.ics-shop__products { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }

/* product platforms */
.ics-platform { padding-block: var(--sec); border-top: 1px solid var(--c-line); }
.ics-platform:first-of-type { border-top: 0; }
.ics-platform__head { display: flex; flex-direction: column; gap: 12px; margin-bottom: 36px; max-width: 820px; }
.ics-platform__label { display: inline-flex; align-self: flex-start; font-family: var(--f-display); font-weight: 700; font-size: 13px; letter-spacing: .1em; text-transform: uppercase; color: var(--c-accent-text); background: color-mix(in srgb, var(--c-accent) 12%, #fff); padding: 5px 12px; border-radius: 999px; }
.ics-subhead { font-family: var(--f-display); font-weight: 700; font-size: 20px; color: var(--c-ink); margin: 40px 0 20px; }
.ics-callout { background: var(--c-soft); border-radius: var(--r-md); padding: 28px 32px; border-left: 4px solid var(--c-accent); }
.ics-callout h3 { margin-bottom: 10px; font-size: 20px; }
.ics-callout p { color: var(--c-ink-2); }
.ics-callout p + p { margin-top: 12px; }

/* partner logos */
.ics-logos { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; align-items: center; }
.ics-logos__item { background: #fff; border: 1px solid var(--c-line); border-radius: var(--r-md); height: 110px; display: flex; align-items: center; justify-content: center; padding: 20px 26px; }
.ics-logos__item img { max-height: 48px; width: auto; object-fit: contain; }
.ics-logos__item span { font-family: var(--f-display); font-weight: 700; color: var(--c-ink-3); }

/* lease panel */
.ics-lease { background: var(--c-dark); color: var(--c-on-dark); border-radius: var(--r-lg); overflow: hidden; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.ics-lease__body { padding: clamp(32px, 5vw, 60px); display: flex; flex-direction: column; gap: 20px; }
.ics-lease__body h2 { color: #fff; }
.ics-lease__body .ics-eyebrow { color: var(--c-accent); margin: 0; }
.ics-lease__body p { color: var(--c-on-dark-2); }
.ics-lease__body .ics-ticks li { color: var(--c-on-dark); }
.ics-lease__body .ics-note { color: var(--c-on-dark); border-color: var(--c-accent); }
.ics-lease .ics-media { border-radius: 0; height: 100%; min-height: 320px; }

/* compliance list */
.ics-standards { display: grid; gap: 14px; }
.ics-standard { display: flex; flex-direction: column; gap: 2px; padding: 18px 22px; background: #fff; border: 1px solid var(--c-line); border-radius: var(--r-md); }
.ics-standard b { font-family: var(--f-display); font-size: 18px; color: var(--c-primary); }
.ics-standard span { color: var(--c-ink-2); }

/* support scope */
.ics-scope { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; counter-reset: s; }
.ics-scope__item { counter-increment: s; background: #fff; border: 1px solid var(--c-line); border-radius: var(--r-md); padding: 28px; display: flex; flex-direction: column; gap: 14px; }
.ics-scope__item::before { content: counter(s, decimal-leading-zero); font-family: var(--f-display); font-weight: 800; font-size: 15px; color: var(--c-accent-text); letter-spacing: .08em; }
.ics-scope__item h3 { font-size: 18.5px; line-height: 1.35; font-weight: 700; }

.ics-assess { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; border: 1px solid var(--c-on-dark-line); border-radius: var(--r-md); overflow: hidden; }
.ics-assess > div { padding: 26px 28px; font-family: var(--f-display); font-weight: 700; font-size: 19px; color: #fff; }
.ics-assess > div + div { border-left: 1px solid var(--c-on-dark-line); }

/* contact blocks */
.ics-contact-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
.ics-contact-card { background: #fff; border: 1px solid var(--c-line); border-radius: var(--r-md); padding: 28px; display: flex; flex-direction: column; gap: 8px; }
.ics-contact-card h3 { font-size: 18px; }
.ics-contact-card__tag { font-family: var(--f-display); font-weight: 700; font-size: 12.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--c-accent-text); }
.ics-contact-card p { color: var(--c-ink-2); }
.ics-contact-card a { font-weight: 700; text-decoration: none; }
.ics-contact-card a:hover { text-decoration: underline; }

.ics-contact-layout { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); gap: clamp(28px, 5vw, 56px); align-items: start; }
.ics-offices { display: flex; flex-direction: column; gap: 16px; }

/* form */
.ics-form { background: #fff; border: 1px solid var(--c-line); border-radius: var(--r-lg); padding: clamp(24px, 4vw, 40px); box-shadow: var(--shadow); display: grid; grid-template-columns: 1fr 1fr; gap: 18px 20px; }
.ics-form__full { grid-column: 1 / -1; }
.ics-form label { display: block; font-weight: 700; font-size: 15px; margin-bottom: 7px; color: var(--c-ink); }
.ics-form label .req { color: #B42318; }
.ics-form input[type="text"], .ics-form input[type="email"], .ics-form input[type="tel"], .ics-form select, .ics-form textarea {
	width: 100%; font: inherit; font-size: 16px; color: var(--c-ink); background: var(--c-soft);
	border: 1px solid var(--c-line); border-radius: var(--r-sm); padding: 12px 14px; min-height: 50px;
	transition: border-color .15s ease, background .15s ease, box-shadow .15s ease;
}
.ics-form textarea { min-height: 170px; resize: vertical; }
.ics-form select {
	appearance: none; -webkit-appearance: none; padding-right: 42px; cursor: pointer;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 9.5l6 6 6-6' fill='none' stroke='%2346566B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat; background-position: right 12px center; background-size: 20px 20px;
}
.ics-form input:focus, .ics-form select:focus, .ics-form textarea:focus { outline: none; background-color: #fff; border-color: var(--c-primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--c-accent) 30%, transparent); }
.ics-form__hp { position: absolute !important; left: -9999px; }
.ics-form__foot { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.ics-form__foot small { color: var(--c-ink-3); }
/* ---------- contact page ---------- */

/* A narrow rail of ways to reach us, then the form itself with room to
   breathe. The form is the point of the page, so it gets the wider column. */
.ics-enquiry { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(32px, 5vw, 64px); align-items: start; }
.ics-enquiry__intro { position: sticky; top: 110px; display: flex; flex-direction: column; gap: 18px; }
.ics-enquiry__intro .ics-text { max-width: 42ch; }

.ics-routes { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; }
.ics-routes li { display: flex; flex-direction: column; gap: 3px; padding: 16px 0; border-top: 1px solid var(--c-line); }
.ics-routes li:last-child { border-bottom: 1px solid var(--c-line); }
.ics-routes__label { font-size: 14px; color: var(--c-ink-3); }
.ics-routes a { font-family: var(--f-display); font-weight: 700; font-size: 16.5px; text-decoration: none; overflow-wrap: anywhere; }
.ics-routes a:hover { text-decoration: underline; }

.ics-field { display: flex; flex-direction: column; }
.ics-field--full { grid-column: 1 / -1; }
.ics-field__hint { margin-top: 6px; font-size: 13.5px; color: var(--c-ink-3); }

/* Offices as one divided panel rather than four look-alike boxes. */
.ics-offices { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; border: 1px solid var(--c-on-dark-line); border-radius: var(--r-md); overflow: hidden; }
.ics-office { padding: clamp(24px, 3vw, 34px); display: flex; flex-direction: column; gap: 10px; }
.ics-office + .ics-office { border-left: 1px solid var(--c-on-dark-line); }
.ics-office__tag { font-family: var(--f-display); font-weight: 700; font-size: 12.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--c-accent); margin: 0; }
.ics-office__name { font-size: 18px; line-height: 1.3; color: #fff; margin: 0; }
.ics-office__addr { color: var(--c-on-dark-2); margin: 0; font-size: 15.5px; line-height: 1.55; }
.ics-office__tel { margin-top: auto; padding-top: 8px; font-family: var(--f-display); font-weight: 700; color: #fff; text-decoration: none; }
.ics-office__tel:hover { text-decoration: underline; }

@media (max-width: 900px) {
	.ics-enquiry { grid-template-columns: 1fr; }
	.ics-enquiry__intro { position: static; }
	.ics-offices { grid-template-columns: 1fr; }
	.ics-office + .ics-office { border-left: 0; border-top: 1px solid var(--c-on-dark-line); }
	.ics-office__tel { margin-top: 0; }
}

.ics-alert { grid-column: 1 / -1; padding: 14px 18px; border-radius: var(--r-sm); font-weight: 600; border-left: 4px solid; }
.ics-alert--ok { background: #E7F5EC; border-color: #15803D; color: #0F5A2B; }
.ics-alert--err { background: #FDECEA; border-color: #B42318; color: #8A1B12; }

/* closing CTA */
.ics-cta { background: var(--c-soft); border-radius: var(--r-lg); padding: clamp(32px, 5vw, 56px); display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.ics-cta h2 { max-width: 26ch; }

/* ---------- footer ---------- */
.ics-footer { background: var(--c-dark); color: var(--c-on-dark-2); padding-block: 72px 28px; }
.ics-footer__grid { display: grid; grid-template-columns: .8fr 1.6fr 1fr; gap: clamp(28px, 5vw, 64px); }
.ics-footer__title { font-family: var(--f-display); font-size: 15px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #fff; margin-bottom: 18px; }
.ics-footer__title--gap { margin-top: 28px; }
.ics-footer__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.ics-footer a { color: var(--c-on-dark); text-decoration: none; }
.ics-footer a:hover { color: var(--c-accent); }
.ics-footer__about p { font-size: 16px; }
.ics-footer__about p + p { margin-top: 12px; }
.ics-social { display: flex; gap: 10px; }
.ics-social a { width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--c-on-dark-line); display: inline-flex; align-items: center; justify-content: center; }
.ics-social svg { width: 18px; height: 18px; }
.ics-social a:hover { border-color: var(--c-accent); }
.ics-footer__bottom { margin-top: 56px; padding-top: 22px; border-top: 1px solid var(--c-on-dark-line); display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; font-size: 14.5px; }

/* ---------- responsive ---------- */
@media (max-width: 1080px) {
	.ics-cards--4, .ics-logos { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
	.ics-split, .ics-split--wide-text, .ics-pagehead__split, .ics-message, .ics-shop, .ics-lease, .ics-contact-layout { grid-template-columns: 1fr; }
	.ics-split--reverse > :first-child { order: 0; }
	.ics-cards, .ics-cards--4, .ics-scope, .ics-contact-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.ics-pillars, .ics-assess { grid-template-columns: 1fr; }
	.ics-pillar, .ics-pillar + .ics-pillar { padding: 26px 0; border-left: 0; }
	.ics-pillar + .ics-pillar { border-top: 1px solid var(--c-on-dark-line); }
	.ics-assess > div + div { border-left: 0; border-top: 1px solid var(--c-on-dark-line); }
	.ics-message__aside { position: static; }
	.ics-company--feature { grid-template-columns: 1fr; }
	.ics-footer__grid { grid-template-columns: 1fr 1fr; }
	.ics-footer__about { grid-column: 1 / -1; order: -1; }
	.ics-lease .ics-media { min-height: 240px; }
}
@media (max-width: 640px) {
	body { font-size: 16px; }
	.ics-cards, .ics-cards--2, .ics-cards--4, .ics-scope, .ics-contact-grid, .ics-companies { grid-template-columns: 1fr; }
	.ics-logos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.ics-logos__item { height: 90px; }
	.ics-stats { gap: 10px; }
	.ics-form { grid-template-columns: 1fr; }
	.ics-form__foot { flex-direction: column-reverse; align-items: stretch; }
	.ics-form__foot .ics-btn { justify-content: center; width: 100%; }
	.ics-media-pair .ics-media:nth-child(2) { margin-top: 24px; }
	.ics-footer__grid { grid-template-columns: 1fr; }
	.ics-card { padding: 24px; }
}

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after { transition: none !important; animation: none !important; }
}

/* =====================================================================
   Inner pages: products, solutions, support
   ===================================================================== */

/* Platform sections read as a series, so give them a jump bar and a
   quiet alternating band instead of six identical white blocks. */
.ics-jump { position: sticky; top: 76px; z-index: 20; background: rgba(255, 255, 255, .92); backdrop-filter: saturate(140%) blur(8px); border-block: 1px solid var(--c-line); }
.ics-jump__inner { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding-block: 10px; }
.ics-jump__inner::-webkit-scrollbar { display: none; }
.ics-jump a {
	flex: none; font-family: var(--f-display); font-weight: 600; font-size: 15px;
	color: var(--c-ink-2); text-decoration: none; padding: 7px 14px; border-radius: 999px;
}
.ics-jump a:hover, .ics-jump a:focus-visible { background: var(--c-soft-2); color: var(--c-primary); }
/* keep a jumped-to heading clear of the fixed header and the jump bar */
.ics-platform[id], .ics-section[id] { scroll-margin-top: 136px; }

/* the platform sections sit inside a container, so the tinted band is
   stretched edge to edge rather than stopping at the text column */
.ics-platform--alt { background: var(--c-soft); clip-path: inset(0 -100vmax); box-shadow: 0 0 0 100vmax var(--c-soft); }
/* Identity row: the vendor mark names the section, so the heading below
   is free to say what the school actually gets. */
.ics-platform__id { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin: 0; }
.ics-platform__logo { height: 26px; width: auto; object-fit: contain; display: block; }
.ics-platform__brand { font-family: var(--f-display); font-weight: 700; font-size: 19px; color: var(--c-dark); }
.ics-platform__kind { position: relative; padding-left: 15px; font-size: 14.5px; font-weight: 600; color: var(--c-ink-2); }
.ics-platform__kind::before { content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 1px; height: 17px; background: var(--c-line); }
.ics-platform__head .ics-h2 { font-size: clamp(24px, 2.4vw, 32px); font-weight: 700; line-height: 1.22; max-width: 32ch; }

/* Long check-lists breathe better in two columns on a wide screen. */
@media (min-width: 1000px) {
	.ics-split .ics-ticks { columns: 2; column-gap: 32px; }
	.ics-split .ics-ticks li { break-inside: avoid; }
}

/* Support scope: these are service areas, not steps, so the cards carry
   a label and its description rather than a counter. */
.ics-scope__item::before { content: none; }
.ics-scope__item { gap: 8px; }
.ics-scope__item h3 { font-size: 17px; color: var(--c-primary); }
.ics-scope__item p { color: var(--c-ink-2); font-size: 15.5px; line-height: 1.55; margin: 0; }

/* =====================================================================
   HOME PAGE 3.0 — "One Vision. One Network. One Future."
   Everything below is scoped to .icsx so it cannot reach the other
   pages. The accent spectrum (--x-s1…s6) is sampled from the node
   colours in the ICSONE mark, so the page reads as the logo enlarged
   rather than as a generic technology palette.
   ===================================================================== */

/* Announcement strip — sits above the header, so it is NOT scoped. */
.ics-news { background: var(--c-ink); color: #fff; }
.ics-news__in { display: flex; align-items: center; gap: 12px; padding-block: 10px; font-size: 14.5px; }
.ics-news__tag {
	flex: none; font-family: var(--f-display); font-weight: 800; font-size: 11.5px;
	letter-spacing: .04em; background: #19B64A; color: #06210F;
	border-radius: 4px; padding: 3px 8px;
}
.ics-news__t { color: #DCE8F7; margin: 0; }
.ics-news__t b { color: #fff; font-weight: 600; }

.icsx {
	--x-mist: #F2F6FC;
	--x-line: #DEE7F3;
	--x-ink: #0A1B30;
	--x-ink-2: #41566F;
	--x-ink-3: #6E849E;
	--x-blue: #1A67D2;
	--x-dark: #05121F;
	--x-dark-line: rgba(130, 175, 230, .22);
	--x-on-dark: #E9F1FB;
	--x-on-dark-2: #9DB7D6;
	--x-s1: #D6009B;
	--x-s2: #F2720C;
	--x-s3: #C9C400;
	--x-s4: #19B64A;
	--x-s5: #00B9C4;
	--x-s6: #0C8FE0;
	color: var(--x-ink);
	overflow-x: hidden;
}
.icsx section[id] { scroll-margin-top: 92px; }
.icsx-band { padding-block: clamp(60px, 8vw, 112px); }
.icsx-mist { background: var(--x-mist); }
.icsx-eyebrow { font-family: var(--f-display); font-weight: 700; font-size: 14.5px; color: var(--x-blue); margin: 0; }
.icsx-h1 { font-size: clamp(40px, 7.4vw, 96px); font-weight: 800; line-height: 1.06; letter-spacing: -.03em; margin: 20px 0 0; }
.icsx-h1 span, .icsx-h1 em { display: block; }
.icsx-h1 em { font-style: normal; color: var(--x-blue); }
.icsx-h2 { font-size: clamp(29px, 4.2vw, 54px); font-weight: 800; line-height: 1.08; letter-spacing: -.03em; }
.icsx-lead { color: var(--x-ink-2); font-size: 17.5px; max-width: 52ch; }
.icsx-mt { margin-top: 12px; }
.icsx-mt-s { margin-top: 18px; }

/* Hero — light, with the network field drawn behind the words. */
.icsx-hero {
	position: relative; overflow: hidden;
	background: linear-gradient(176deg, #FFFFFF 0%, #EFF5FD 52%, #E4EEFB 100%);
	border-bottom: 1px solid var(--x-line);
}
#icsx-net { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.icsx-hero__in { position: relative; z-index: 2; padding-block: clamp(66px, 10vw, 118px); }
.icsx-kick {
	display: inline-flex; align-items: center; gap: 9px;
	font-family: var(--f-display); font-weight: 700; font-size: 14px; color: var(--x-ink-2);
	background: #fff; border: 1px solid var(--x-line); border-radius: 999px; padding: 7px 15px;
}
.icsx-kick i { width: 8px; height: 8px; border-radius: 50%; background: var(--x-s4); box-shadow: 0 0 0 4px rgba(25, 182, 74, .16); }
.icsx-hero__sub { margin-top: 22px; max-width: 50ch; font-size: clamp(16.5px, 1.4vw, 18.5px); color: var(--x-ink-2); }
.icsx-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }

/* Scale row */
.icsx-scale { border-top: 1px solid var(--x-line); background: #fff; }
.icsx-scale__g { display: grid; grid-template-columns: repeat(4, 1fr); }
.icsx-scale__i { padding: 26px 0 26px 26px; border-left: 1px solid var(--x-line); }
.icsx-scale__i:first-child { padding-left: 0; border-left: 0; }
.icsx-scale__n { font-family: var(--f-display); font-weight: 800; font-size: clamp(28px, 3.6vw, 46px); letter-spacing: -.04em; line-height: 1; }
.icsx-scale__l { margin-top: 6px; font-size: 14.5px; color: var(--x-ink-3); }
.icsx-scale__i:nth-child(1) .icsx-scale__n { color: var(--x-s6); }
.icsx-scale__i:nth-child(2) .icsx-scale__n { color: var(--x-s5); }
.icsx-scale__i:nth-child(3) .icsx-scale__n { color: var(--x-s4); }
.icsx-scale__i:nth-child(4) .icsx-scale__n { color: var(--x-s2); }

/* AI centre — the single dark band on the page, so it carries the weight. */
.icsx-ai { background: var(--x-dark); color: var(--x-on-dark); position: relative; overflow: hidden; }
.icsx-ai::before { content: ""; position: absolute; inset: 0; background: radial-gradient(70% 70% at 76% 42%, rgba(26, 103, 210, .34), transparent 62%); }
.icsx-ai__g {
	position: relative; z-index: 2; display: grid;
	grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
	gap: clamp(30px, 5vw, 64px); align-items: center;
}
.icsx-ai .icsx-eyebrow { color: var(--x-s5); }
.icsx-ai .icsx-h2 { color: #fff; max-width: 15ch; }
.icsx-ai__lead { margin-top: 20px; color: var(--x-on-dark-2); font-size: 17.5px; max-width: 48ch; }
.icsx-ai__pts { list-style: none; margin: 26px 0 0; padding: 0; display: grid; gap: 12px; }
.icsx-ai__pts li { position: relative; padding-left: 26px; color: var(--x-on-dark-2); font-size: 16px; }
.icsx-ai__pts li b { color: #fff; font-weight: 700; }
.icsx-ai__pts li::before { content: ""; position: absolute; left: 0; top: 9px; width: 9px; height: 9px; border-radius: 50%; background: var(--x-s5); }
.icsx-ai__pts li:nth-child(2)::before { background: var(--x-s4); }
.icsx-ai__pts li:nth-child(3)::before { background: var(--x-s1); }
.icsx-status {
	display: inline-flex; align-items: center; gap: 9px; margin-top: 28px;
	font-family: var(--f-display); font-weight: 700; font-size: 14.5px; color: #fff;
	border: 1px solid var(--x-dark-line); border-radius: 999px; padding: 8px 16px;
}
.icsx-status i { width: 8px; height: 8px; border-radius: 50%; background: var(--x-s3); box-shadow: 0 0 0 4px rgba(201, 196, 0, .2); }
.icsx-core { width: 100%; max-width: 430px; margin-inline: auto; aspect-ratio: 1; }
.icsx-ring { fill: none; stroke: rgba(130, 175, 230, .26); stroke-width: 1; }
.icsx-orb { transform-origin: 250px 250px; animation: icsx-spin 46s linear infinite; }
.icsx-orb--b { animation-duration: 34s; animation-direction: reverse; }
.icsx-orb--c { animation-duration: 62s; }
@keyframes icsx-spin { to { transform: rotate(360deg); } }

/* Four capability cells — hairline grid, one dot each from the spectrum. */
.icsx-four {
	display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px;
	background: var(--x-line); border: 1px solid var(--x-line);
	border-radius: 14px; overflow: hidden; margin-top: clamp(30px, 4vw, 52px);
}
.icsx-cell { background: #fff; padding: clamp(22px, 2.4vw, 30px); transition: background .18s; }
.icsx-cell:hover { background: var(--x-mist); }
.icsx-cell__d { width: 13px; height: 13px; border-radius: 50%; background: currentColor; }
.icsx-cell:nth-child(1) { color: var(--x-s6); }
.icsx-cell:nth-child(2) { color: var(--x-s5); }
.icsx-cell:nth-child(3) { color: var(--x-s4); }
.icsx-cell:nth-child(4) { color: var(--x-s1); }
.icsx-cell h3 { margin-top: 16px; font-size: 19.5px; font-weight: 800; color: var(--x-ink); letter-spacing: -.015em; }
.icsx-cell__p { margin-top: 9px; color: var(--x-ink-2); font-size: 15.5px; }
.icsx-meta { margin-top: 12px; font-size: 13.5px; color: var(--x-ink-3); }

/* Engagement model — a timeline rail, because these are stages of one job. */
.icsx-pills { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: clamp(30px, 4vw, 52px); position: relative; }
.icsx-pills::before { content: ""; position: absolute; left: 0; right: 0; top: 8px; height: 1px; background: var(--x-line); }
.icsx-pill { padding: 36px 28px 0 0; position: relative; }
.icsx-pill + .icsx-pill { padding-left: 28px; }
.icsx-pill::before { content: ""; position: absolute; left: 0; top: 2px; width: 13px; height: 13px; border-radius: 50%; background: var(--x-mist); border: 2.5px solid currentColor; }
.icsx-pill:nth-child(1) { color: var(--x-s2); }
.icsx-pill:nth-child(2) { color: var(--x-s4); }
.icsx-pill:nth-child(3) { color: var(--x-s6); }
.icsx-pill__t { font-family: var(--f-display); font-weight: 700; font-size: 13.8px; }
.icsx-pill h3 { margin-top: 8px; font-size: clamp(18px, 1.9vw, 23px); font-weight: 800; color: var(--x-ink); }
.icsx-pill__d { margin-top: 9px; color: var(--x-ink-2); font-size: 15.5px; }

/* Co-Founder */
.icsx-fdr { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: clamp(28px, 5vw, 64px); align-items: center; }
.icsx-fdr__q { font-family: var(--f-display); font-weight: 700; font-size: clamp(21px, 2.6vw, 31px); line-height: 1.32; letter-spacing: -.02em; color: var(--x-ink); margin-top: 14px; }
.icsx-fdr__q b { color: var(--x-blue); font-weight: 700; }
.icsx-fdr__s { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--x-line); }
.icsx-fdr__s b { display: block; font-family: var(--f-display); font-weight: 800; font-size: 17.5px; }
.icsx-fdr__s i { display: block; font-style: normal; font-size: 14.5px; color: var(--x-ink-3); margin-top: 2px; }

/* The group: holding company above, four operating companies below. */
.icsx-hold { margin-top: clamp(26px, 3.4vw, 42px); display: flex; flex-direction: column; align-items: center; }
.icsx-hold__box { display: inline-flex; flex-direction: column; align-items: center; gap: 2px; background: var(--x-ink); color: #fff; border-radius: 12px; padding: 16px 30px; text-align: center; }
.icsx-hold__box b { font-family: var(--f-display); font-weight: 800; font-size: 19px; }
.icsx-hold__box span { font-size: 13.5px; color: #9DB7D6; }
.icsx-hold__stem { width: 1px; height: 30px; background: var(--x-line); }
.icsx-firms {
	display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px;
	background: var(--x-line); border: 1px solid var(--x-line);
	border-radius: 14px; overflow: hidden;
}
/* Company cards: the colour identifies the company, the name carries the
   weight. Works on the existing markup — no template change needed. */
.icsx-firm { background: #fff; padding: clamp(22px, 2.4vw, 30px); transition: background .18s; }
.icsx-firm:hover { background: #FBFDFF; }
.icsx-firm:nth-child(1) { --x-firm: var(--x-s6); }
.icsx-firm:nth-child(2) { --x-firm: var(--x-s5); }
.icsx-firm:nth-child(3) { --x-firm: var(--x-s4); }
.icsx-firm:nth-child(4) { --x-firm: var(--x-s2); }
.icsx-firm__n {
	display: flex; flex-direction: column; align-items: flex-start; gap: 15px;
	font-family: var(--f-display); font-weight: 800;
	font-size: clamp(17px, 1.45vw, 19.5px); line-height: 1.22; letter-spacing: -.018em;
	color: var(--x-ink);
}
.icsx-firm__n::before { content: ""; width: 32px; height: 3px; border-radius: 2px; background: var(--x-firm); flex: none; margin: 0; }
/* The location reads as a badge. Text is the card colour darkened to 62%
   on a 10% tint of the same colour: the weakest of the four is 4.8:1. */
.icsx-firm__w {
	display: inline-flex; align-items: flex-start; gap: 6px;
	margin-top: 11px; padding: 5px 12px 5px 9px; border-radius: 14px;
	font-size: 12.5px; font-weight: 600; line-height: 1.3;
	background: color-mix(in srgb, var(--x-firm) 10%, #fff);
	color: color-mix(in srgb, var(--x-firm) 62%, #000);
}
.icsx-firm__w::before { content: ""; }
@supports ((-webkit-mask-image: url("")) or (mask-image: url(""))) {
	.icsx-firm__w::before {
		width: 12px; height: 12px; flex: none; margin-top: 1px; background-color: currentColor;
		-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5c-1.38 0-2.5-1.12-2.5-2.5s1.12-2.5 2.5-2.5 2.5 1.12 2.5 2.5-1.12 2.5-2.5 2.5z'/%3E%3C/svg%3E") center/contain no-repeat;
		mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5c-1.38 0-2.5-1.12-2.5-2.5s1.12-2.5 2.5-2.5 2.5 1.12 2.5 2.5-1.12 2.5-2.5 2.5z'/%3E%3C/svg%3E") center/contain no-repeat;
	}
}
.icsx-firm__d { margin-top: 15px; color: var(--x-ink-2); font-size: 15px; }


/* Shop + closing block */
.icsx-shop { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(26px, 5vw, 60px); align-items: center; }
.icsx-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.icsx-chips span { font-size: 14px; font-weight: 600; background: #fff; border: 1px solid var(--x-line); border-radius: 999px; padding: 6px 13px; }
.icsx-close { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(24px, 5vw, 56px); align-items: center; }
.icsx-close > div { min-width: 0; }
.icsx-close__a { display: flex; flex-wrap: wrap; gap: 12px; }

/* One line of phone numbers, as asked. It stays on one line from about
   680px up; below that it wraps rather than shrink to unreadable. */
.icsx-tel {
	white-space: nowrap; max-width: 100%; overflow-x: auto; scrollbar-width: none;
	color: var(--x-ink-3); font-size: clamp(10px, 2.5vw, 15px);
	margin-top: 26px; padding-top: 18px; border-top: 1px solid var(--x-line);
}
.icsx-tel::-webkit-scrollbar { display: none; }

@media (max-width: 980px) {
	.icsx-ai__g, .icsx-shop, .icsx-close, .icsx-fdr { grid-template-columns: 1fr; }
	.icsx-four, .icsx-firms { grid-template-columns: repeat(2, 1fr); }
	.icsx-pills { grid-template-columns: 1fr; }
	.icsx-pills::before { display: none; }
	.icsx-pill, .icsx-pill + .icsx-pill { padding: 24px 0 24px 24px; border-left: 1px solid var(--x-line); }
	.icsx-pill::before { left: -7px; top: 26px; }
	.icsx-scale__g { grid-template-columns: repeat(2, 1fr); }
	.icsx-scale__i { padding: 20px 0 20px 18px; }
	.icsx-scale__i:nth-child(3) { padding-left: 0; border-left: 0; }
}
@media (max-width: 679px) {
	.icsx-tel { white-space: normal; font-size: 13.5px; line-height: 1.7; }
}
@media (max-width: 560px) {
	.icsx-four, .icsx-firms { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
	.icsx-orb { animation: none; }
}

/* =====================================================================
   AI CLOUD 3.4.0 — infrastructure, the SI Agent, the join path, and the
   ICSONE × Xone joint venture mark. Appended so it loads after
   everything above it; the media queries are repeated here because the
   blocks above were written before these classes existed.
   ===================================================================== */

/* Joint venture note inside the AI band. */
.icsx-jv {
	position: relative; margin: 26px 0 0; padding-left: 18px;
	border-left: 2px solid var(--x-s5);
	color: var(--x-on-dark-2); font-size: 16px; max-width: 52ch;
}
.icsx-jv__k {
	display: flex; align-items: center; gap: 7px;
	font-family: var(--f-display); font-weight: 700;
	font-size: 13.5px; color: var(--x-s5); margin-bottom: 6px;
}
.icsx-jv__i { width: 17px; height: 17px; flex: none; border-radius: 5px; display: block; }
.icsx-jv b { color: #fff; font-weight: 700; }

/* Second half of the dark band. */
.icsx-ai__more {
	position: relative; z-index: 2;
	margin-top: clamp(44px, 5.5vw, 74px);
	padding-top: clamp(38px, 4.5vw, 58px);
	border-top: 1px solid var(--x-dark-line);
}
.icsx-ai__st {
	font-family: var(--f-display); font-weight: 800;
	font-size: clamp(21px, 2.2vw, 27px); letter-spacing: -.02em;
	color: #fff; margin: 0;
}
.icsx-ai__st--2 { margin-top: clamp(44px, 5vw, 66px); }
.icsx-ai__sub { margin: 16px 0 0; color: var(--x-on-dark-2); font-size: 16.5px; line-height: 1.65; max-width: 70ch; }

/* Infrastructure: two regions and the availability standard. */
.icsx-dc {
	display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: clamp(16px, 1.8vw, 22px); margin-top: clamp(26px, 3vw, 38px);
}
.icsx-dc__i {
	border: 1px solid var(--x-dark-line); border-radius: 16px;
	padding: clamp(22px, 2.2vw, 28px);
	background: linear-gradient(180deg, rgba(130, 175, 230, .07), rgba(130, 175, 230, 0));
}
.icsx-dc__r {
	margin: 0 0 10px; font-family: var(--f-display); font-weight: 700;
	font-size: 13.5px; color: var(--x-s5);
}
.icsx-dc__i:nth-child(2) .icsx-dc__r { color: var(--x-s4); }
.icsx-dc__i h4 {
	margin: 0; font-family: var(--f-display); font-weight: 800;
	font-size: clamp(19px, 1.8vw, 23px); letter-spacing: -.02em; color: #fff;
}
.icsx-dc__d { margin: 10px 0 0; color: var(--x-on-dark-2); font-size: 15.5px; line-height: 1.6; }
.icsx-dc__n {
	margin: 0 0 4px; font-family: var(--f-display); font-weight: 800;
	font-size: clamp(34px, 3.4vw, 44px); letter-spacing: -.04em; line-height: 1;
	color: var(--x-s3);
}
.icsx-dc__i--n { border-color: rgba(201, 196, 0, .35); }

/* The SI Agent lifecycle, on one continuous track. */
.icsx-track {
	list-style: none; margin: clamp(26px, 3vw, 36px) 0 0; padding: 0;
	display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
}
.icsx-track__i {
	position: relative; padding: 26px 22px 0 0;
	border-top: 1px solid var(--x-dark-line);
}
.icsx-track__i:last-child { padding-right: 0; }
.icsx-track__i::before {
	content: ""; position: absolute; left: 0; top: -5px;
	width: 9px; height: 9px; border-radius: 50%; background: var(--x-s6);
}
.icsx-track__i:nth-child(2)::before { background: var(--x-s5); }
.icsx-track__i:nth-child(3)::before { background: var(--x-s4); }
.icsx-track__i:nth-child(4)::before { background: var(--x-s2); }
.icsx-track__i h4 {
	margin: 0; font-family: var(--f-display); font-weight: 700;
	font-size: 17.5px; color: #fff;
}
.icsx-track__i p { margin: 8px 0 0; color: var(--x-on-dark-2); font-size: 15.5px; line-height: 1.6; }

/* Capability notes: hairline above each, coloured from the spectrum. */
.icsx-tech {
	display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: clamp(22px, 2.6vw, 34px); margin-top: clamp(26px, 3vw, 38px);
}
.icsx-tech__i { border-top: 2px solid var(--x-tech, var(--x-s6)); padding-top: 16px; }
.icsx-tech__i:nth-child(1) { --x-tech: var(--x-s6); }
.icsx-tech__i:nth-child(2) { --x-tech: var(--x-s5); }
.icsx-tech__i:nth-child(3) { --x-tech: var(--x-s4); }
.icsx-tech__i:nth-child(4) { --x-tech: var(--x-s2); }
.icsx-tech__i h4 {
	font-family: var(--f-display); font-weight: 700; font-size: 16.5px;
	line-height: 1.3; color: #fff; margin: 0;
}
.icsx-tech__i p { margin: 9px 0 0; color: var(--x-on-dark-2); font-size: 15.5px; line-height: 1.6; }

/* The join path is a real sequence, so it is numbered. */
.icsx-path {
	list-style: none; margin: clamp(26px, 3vw, 38px) 0 0; padding: 0;
	display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: clamp(22px, 3vw, 40px); counter-reset: icsx-step;
}
.icsx-path__i { counter-increment: icsx-step; position: relative; padding-top: 46px; }
.icsx-path__i::after {
	content: ""; position: absolute; left: 0; top: 16px; right: calc(-1 * clamp(22px, 3vw, 40px));
	height: 1px; background: var(--x-dark-line);
}
.icsx-path__i:last-child::after { right: 0; }
.icsx-path__i::before {
	content: counter(icsx-step); position: absolute; left: 0; top: 0; z-index: 1;
	width: 33px; height: 33px; border-radius: 50%;
	display: grid; place-items: center;
	font-family: var(--f-display); font-weight: 800; font-size: 15px;
	color: #04131F; background: var(--x-s5);
}
.icsx-path__i:nth-child(2)::before { background: var(--x-s4); }
.icsx-path__i:nth-child(3)::before { background: var(--x-s3); }
.icsx-path__i h4 {
	font-family: var(--f-display); font-weight: 700; font-size: 17.5px;
	color: #fff; margin: 0;
}
.icsx-path__i p { margin: 8px 0 0; color: var(--x-on-dark-2); font-size: 15.5px; line-height: 1.6; }

.icsx-ai__cta {
	display: flex; flex-wrap: wrap; align-items: center; gap: 16px 26px;
	margin-top: clamp(38px, 4.5vw, 58px);
	padding-top: clamp(26px, 3vw, 34px); border-top: 1px solid var(--x-dark-line);
}
.icsx-ai__note { margin: 0; color: var(--x-on-dark-2); font-size: 14.5px; max-width: 54ch; }

/* Joint venture mark in the footer. The word inherits the footer colour,
   so one mark serves the light pages and the dark footer. */
.ics-jv {
	margin-top: 52px; padding-top: 24px;
	border-top: 1px solid var(--c-on-dark-line);
	display: flex; align-items: center; flex-wrap: wrap; gap: 6px 14px;
}
.ics-jv__k, .ics-jv__n { margin: 0; font-size: 13.5px; color: var(--c-on-dark-2); }
.ics-jv__n { padding-left: 14px; border-left: 1px solid var(--c-on-dark-line); }
.ics-jv__mark { display: inline-flex; align-items: center; gap: 9px; text-decoration: none; color: #fff; }
.ics-jv__icon { width: 26px; height: 26px; flex: none; border-radius: 7px; display: block; }
.ics-jv__word {
	font-family: var(--f-display); font-weight: 800; font-size: 20px;
	letter-spacing: -.035em; line-height: 1;
}
.ics-jv__mark:hover .ics-jv__word { color: var(--c-accent); }
.ics-footer .ics-footer__bottom { margin-top: 28px; }

@media (min-width: 981px) {
	.icsx-tech__i h4 { min-height: 2.6em; }
}
@media (max-width: 980px) {
	.icsx-tech, .icsx-dc, .icsx-track { grid-template-columns: repeat(2, 1fr); }
	.icsx-track__i:nth-child(2) { padding-right: 0; }
	.icsx-track__i:nth-child(n+3) { margin-top: 26px; }
}
@media (max-width: 760px) {
	.icsx-path { grid-template-columns: 1fr; gap: 0; }
	.icsx-path__i { padding: 0 0 26px 48px; }
	.icsx-path__i::after { left: 16px; top: 33px; right: auto; bottom: 0; width: 1px; height: auto; }
	.icsx-path__i:last-child { padding-bottom: 0; }
	.icsx-path__i:last-child::after { display: none; }
}
@media (max-width: 560px) {
	.icsx-tech, .icsx-dc, .icsx-track { grid-template-columns: 1fr; }
	.icsx-track__i { padding-right: 0; }
	.icsx-track__i + .icsx-track__i { margin-top: 26px; }
	.ics-jv__n { padding-left: 0; border-left: 0; flex-basis: 100%; }
}

/* The AI Cloud page nests one level deeper than the home section (page
   title is h1, section titles h2), so the same card headings arrive as
   h3 there and h4 on the home page. Both are styled identically. */
.icsx-dc__i h3 {
	margin: 0; font-family: var(--f-display); font-weight: 800;
	font-size: clamp(19px, 1.8vw, 23px); letter-spacing: -.02em; color: #fff;
}
.icsx-track__i h3 {
	margin: 0; font-family: var(--f-display); font-weight: 700;
	font-size: 17.5px; color: #fff;
}
.icsx-track__i p { margin: 8px 0 0; color: var(--x-on-dark-2); font-size: 15.5px; line-height: 1.6; }
.icsx-tech__i h3 {
	font-family: var(--f-display); font-weight: 700; font-size: 16.5px;
	line-height: 1.3; color: #fff; margin: 0;
}
.icsx-path__i h3 {
	font-family: var(--f-display); font-weight: 700; font-size: 17.5px;
	color: #fff; margin: 0;
}
@media (min-width: 981px) {
	.icsx-tech__i h3 { min-height: 2.6em; }
}

/* Link from the home page summary through to the AI Cloud page. */
.icsx-ai__go { margin: 22px 0 0; }
.icsx-ai__go a {
	display: inline-flex; align-items: center; gap: 9px;
	font-family: var(--f-display); font-weight: 700; font-size: 15.5px;
	color: #fff; text-decoration: none;
	border-bottom: 2px solid var(--x-s5); padding-bottom: 3px;
}
.icsx-ai__go a:hover { color: var(--x-s5); }

/* The AI Cloud page carries its own full-width banner and headline. The
   theme's page.php normally wraps page content in the narrow reading
   column; this lets that one page out of it. Harmless once page.php
   prints the page on its own, since these wrappers then don't exist. */
.page-id-37 .ics-pagehead { display: none; }
.page-id-37 .ics-section { padding-block: 0; }
.page-id-37 .ics-section > .ics-container.ics-prose { max-width: none; padding-inline: 0; }