/*
 * DI-SIGN theme styles.
 * Concept: "labelled at both ends". Ordered like a dressed rack: hairline grids,
 * cable tags where something really is a label, one bold animated moment in the hero and a
 * quiet motion system for the rest (see "Motion" at the end).
 */

:root {
	--ds-navy: var(--wp--preset--color--navy, #0A1042);
	--ds-navy-2: #0E1752;
	--ds-navy-3: #070C33;
	--ds-black: var(--wp--preset--color--black, #05070F);
	--ds-brand: var(--wp--preset--color--brand-blue, #0288CA);
	--ds-deep: var(--wp--preset--color--deep-blue, #0177B5);
	--ds-light: var(--wp--preset--color--light-blue, #609FD1);
	--ds-sky: var(--wp--preset--color--sky, #7CC8F2);
	--ds-ink: var(--wp--preset--color--ink, #101633);
	--ds-slate: var(--wp--preset--color--slate, #4A5578);
	--ds-line: var(--wp--preset--color--line, #D3DCE8);
	--ds-mist: var(--wp--preset--color--mist, #F3F6FB);
	--ds-sky-bg: #E5F3FC;
	--ds-grey-bg: #EBEEF2;
	/* Deep blue darkened for text on the light blue and grey backgrounds (4.5:1 or better). */
	--ds-deep-2: #016BA3;
	--ds-white: #FFFFFF;
	--ds-field: #7D8BA3;
	--ds-alert: #D11E34;
	--ds-on-dark: #A9B3D1;
	--ds-dark-line: rgba(124, 200, 242, 0.22);
	--ds-mono: var(--wp--preset--font-family--mono, ui-monospace, monospace);
	--ds-gutter: clamp(1rem, 4vw, 2rem);
	--ds-wide: var(--wp--style--global--wide-size, 76rem);
	/* Containers that carry their own side padding line up with wide blocks. */
	--ds-wide-padded: calc(var(--ds-wide) + 2 * var(--ds-gutter));
	--ds-measure: 46rem;
	--ds-section-y: clamp(3rem, 2.2rem + 3vw, 5.5rem);
	--ds-header-h: 4.75rem;
	--ds-dots: radial-gradient(rgba(124, 200, 242, 0.16) 1.2px, transparent 1.4px);
}

/* Base ---------------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }
html { scroll-padding-top: calc(var(--ds-header-h) + 1rem); -webkit-text-size-adjust: 100%; }
body { text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; }
img, svg, video { max-width: 100%; height: auto; }
::selection { background: var(--ds-sky); color: var(--ds-navy); }

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: 3px solid var(--ds-deep);
	outline-offset: 2px;
}
.ds-hero :focus-visible, .ds-home-hero :focus-visible, .ds-header :focus-visible,
.ds-footer :focus-visible, .ds-cta :focus-visible, .is-tone-dark :focus-visible,
.is-style-navy :focus-visible, .is-style-black :focus-visible {
	outline-color: var(--ds-sky);
}

.skip-link.screen-reader-text:focus {
	background: var(--ds-white);
	color: var(--ds-navy);
	font-weight: 700;
	z-index: 100000;
}

/* No gaps between the header, main and footer, or between full-width sections. */
.wp-site-blocks > * + * { margin-block-start: 0; }
.ds-content > .alignfull { margin-block: 0; }
/* Plain blocks typed straight into a page (not inside a section) get the
   section rhythm around them and line up with the wide grid, like sections do. */
.ds-content > :not(.alignfull):first-child { margin-block-start: var(--ds-section-y); }
.ds-content > :not(.alignfull):last-child { margin-block-end: var(--ds-section-y); }
.ds-content > .alignfull + :not(.alignfull) { margin-block-start: var(--ds-section-y); }
.ds-content > :not(.alignfull):has(+ .alignfull) { margin-block-end: var(--ds-section-y); }
/* On project pages the write-up follows the project details directly. */
.wp-block-disign-project-meta + .ds-content > :not(.alignfull):first-child { margin-block-start: 0.5rem; }
.wp-block-disign-project-meta + .ds-content > .ds-section:first-child:not(.is-tone-mist, .is-tone-sky, .is-tone-grey, .is-tone-dark, .is-style-mist, .is-style-sky, .is-style-grey, .is-style-navy, .is-style-black, .has-background) { padding-block-start: 0.5rem; }
.ds-content.is-layout-constrained > :where(:not(.alignleft, .alignright, .alignfull, .alignwide)),
.is-root-container.is-layout-constrained > :where(:not(.alignleft, .alignright, .alignfull, .alignwide)) {
	margin-left: max(0px, calc((100% - var(--ds-wide)) / 2)) !important;
	margin-right: auto !important;
}

:where(p) { margin-block: 0; }
:where(.ds-inner, .ds-head, .ds-hero__copy, .ds-form) > * + * { margin-block-start: 1rem; }
.ds-inner > h2 + *, .ds-inner > h3 + * { margin-block-start: 1rem; }
.ds-inner > * + h2 { margin-block-start: clamp(2.5rem, 2rem + 2vw, 3.5rem); }
.ds-inner > * + h3 { margin-block-start: 2rem; }

/* Layout -------------------------------------------------------------------- */

.ds-section { padding-block: var(--ds-section-y); }
.ds-section--tight { padding-block: calc(var(--ds-section-y) * 0.62); }
/* Two plain (white) sections in a row share one gap instead of two (an empty, hidden one does
   not count). */
.ds-section:not(.is-tone-mist, .is-tone-sky, .is-tone-grey, .is-tone-dark, .is-style-mist, .is-style-sky, .is-style-grey, .is-style-navy, .is-style-black, .has-background, :empty)
	+ .ds-section:not(.is-tone-mist, .is-tone-sky, .is-tone-grey, .is-tone-dark, .is-style-mist, .is-style-sky, .is-style-grey, .is-style-navy, .is-style-black, .has-background) { padding-block-start: 0; }

.ds-wrap {
	max-width: var(--ds-wide-padded);
	margin-inline: auto;
	padding-inline: var(--ds-gutter);
}
.ds-wrap--narrow > * { max-width: var(--ds-measure); }

.ds-inner { max-width: var(--ds-wide); }
.ds-inner > :where(p, ul, ol, h2, h3, h4, blockquote, .wp-block-details, .wp-block-quote, .wp-block-table) {
	max-width: var(--ds-measure);
}
.ds-inner > .wp-block-columns,
.ds-inner > .wp-block-group,
.ds-inner > .ds-full,
.ds-inner > [class*="wp-block-disign-"] { max-width: none; }

.is-tone-mist, .is-style-mist { background: var(--ds-mist); }
.is-tone-sky, .is-style-sky { background: var(--ds-sky-bg); }
.is-tone-grey, .is-style-grey { background: var(--ds-grey-bg); }
.is-tone-dark, .is-style-navy {
	background-color: var(--ds-navy);
	background-image: var(--ds-dots);
	background-size: 20px 20px;
	color: var(--ds-white);
}
.is-style-black, .is-tone-black {
	background-color: var(--ds-black);
	background-image: var(--ds-dots);
	background-size: 20px 20px;
	color: var(--ds-white);
}
:is(.is-tone-dark, .is-style-navy, .is-style-black) :is(h1, h2, h3, h4) { color: var(--ds-white); }
:is(.is-tone-dark, .is-style-navy, .is-style-black) a:not(.ds-btn, .wp-block-button__link, .ds-card__link, .ds-feature__link, .ds-area__link, .ds-patch__link):not(.ds-chips a) { color: var(--ds-sky); }
/* On light blue and grey the usual deep blue is a shade too light for text: links and outline
   buttons use a deeper one. */
:is(.is-tone-sky, .is-tone-grey, .is-style-sky, .is-style-grey) a:not(.ds-btn, .wp-block-button__link, .ds-card__link, .ds-feature__link, .ds-area__link, .ds-tile__link, .ds-patch__link):not(.ds-chips a) { color: var(--ds-deep-2); }
:is(.is-tone-sky, .is-tone-grey, .is-style-sky, .is-style-grey) :is(.ds-btn--secondary, .wp-block-button.is-style-outline > .wp-block-button__link) { border-color: var(--ds-deep-2); color: var(--ds-deep-2); }
:is(.is-tone-sky, .is-tone-grey, .is-style-sky, .is-style-grey) :is(.ds-btn--secondary, .wp-block-button.is-style-outline > .wp-block-button__link):hover { background: var(--ds-deep-2); color: var(--ds-white); }
:is(.is-tone-dark, .is-style-navy, .is-style-black) :is(.ds-head__intro, .ds-tile__text) { color: var(--ds-on-dark); }

/* Type ---------------------------------------------------------------------- */

.is-style-lead, .ds-lead {
	font-size: var(--wp--preset--font-size--large);
	line-height: 1.55;
	font-weight: 500;
	color: var(--ds-ink);
}
:is(.is-tone-dark, .is-style-navy, .is-style-black) .is-style-lead { color: #D9E1F2; }
.wp-block-list:not([class*="is-style-"]) > li::marker { color: var(--ds-brand); }
.is-style-intro { font-size: var(--wp--preset--font-size--large); line-height: 1.55; color: var(--ds-slate); }
:is(.is-tone-dark, .is-style-navy, .is-style-black) .is-style-intro { color: var(--ds-on-dark); }

/* A real cable tag: mono, on a sleeve. Used where something is a label. */
.is-style-tag, .ds-tag {
	display: inline-block;
	font-family: var(--ds-mono);
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	background: var(--ds-sky);
	color: var(--ds-navy);
	padding: 0.3rem 0.6rem;
	border-radius: 3px;
}

.ds-note { margin-top: 1.5rem; font-size: var(--wp--preset--font-size--small); color: var(--ds-slate); max-width: var(--ds-measure); }

/* Town lists on area pages: a short ruled list in columns. */
.ds-towns { list-style: none; padding: 0; columns: 3 10rem; column-gap: 2rem; }
.ds-towns li { break-inside: avoid; padding: 0.4rem 0; border-bottom: 1px solid var(--ds-line); font-weight: 600; }
.ds-inner > .ds-towns { max-width: 40rem; }

/* Buttons ------------------------------------------------------------------- */

.ds-buttons { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1rem; }
/* "Colours for a dark background" recolours the buttons only; the section behind them sets the background. */
.wp-block-disign-cta-buttons[class*="is-tone-"] { background: none; }
.ds-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	min-height: 3rem;
	padding: 0.75rem 1.35rem;
	border: 2px solid transparent;
	border-radius: 6px;
	font-family: inherit;
	font-size: 1rem;
	font-weight: 700;
	line-height: 1.2;
	text-decoration: none;
	cursor: pointer;
	transition: background-color 0.15s, color 0.15s, border-color 0.15s;
}
.ds-btn--primary { background: var(--ds-deep); border-color: var(--ds-deep); color: var(--ds-white); }
.ds-btn--primary:hover { background: var(--ds-navy); border-color: var(--ds-navy); color: var(--ds-white); }
.ds-btn--secondary { background: transparent; border-color: var(--ds-deep); color: var(--ds-deep); }
.ds-btn--secondary:hover { background: var(--ds-deep); color: var(--ds-white); }
.ds-btn--ghost { background: transparent; border-color: var(--ds-line); color: var(--ds-ink); }
.ds-btn--ghost:hover { border-color: var(--ds-deep); color: var(--ds-deep); }
.ds-btn--sm { min-height: 2.5rem; padding: 0.5rem 1rem; font-size: 0.9375rem; }
.ds-calllink { display: inline-flex; align-items: center; gap: 0.4rem; font-weight: 700; text-decoration: none; color: var(--ds-deep); }
.ds-calllink:hover { text-decoration: underline; }

/* The same buttons on dark backgrounds. */
:is(.ds-buttons--dark, .ds-hero, .ds-home-hero, .ds-cta, .is-tone-dark, .is-style-navy, .is-style-black) .ds-btn--primary { background: var(--ds-sky); border-color: var(--ds-sky); color: var(--ds-navy); }
:is(.ds-buttons--dark, .ds-hero, .ds-home-hero, .ds-cta, .is-tone-dark, .is-style-navy, .is-style-black) .ds-btn--primary:hover { background: var(--ds-white); border-color: var(--ds-white); color: var(--ds-navy); }
:is(.ds-buttons--dark, .ds-hero, .ds-home-hero, .ds-cta, .is-tone-dark, .is-style-navy, .is-style-black) .ds-btn--secondary { border-color: var(--ds-sky); color: var(--ds-sky); }
:is(.ds-buttons--dark, .ds-hero, .ds-home-hero, .ds-cta, .is-tone-dark, .is-style-navy, .is-style-black) .ds-btn--secondary:hover { background: var(--ds-sky); color: var(--ds-navy); }
:is(.ds-buttons--dark, .ds-hero, .ds-home-hero, .ds-cta, .is-tone-dark, .is-style-navy, .is-style-black) .ds-btn--ghost { border-color: rgba(255, 255, 255, 0.35); color: var(--ds-white); }
:is(.ds-buttons--dark, .ds-hero, .ds-home-hero, .ds-cta, .is-tone-dark, .is-style-navy, .is-style-black) .ds-btn--ghost:hover { border-color: var(--ds-sky); color: var(--ds-sky); }
:is(.ds-buttons--dark, .ds-hero, .ds-home-hero, .ds-cta, .is-tone-dark, .is-style-navy, .is-style-black) .ds-calllink { color: var(--ds-sky); }

/* Core buttons inherit the same look. */
.wp-block-button.is-style-outline > .wp-block-button__link { background: transparent; color: var(--ds-deep); border-color: var(--ds-deep); }
.wp-block-button.is-style-outline > .wp-block-button__link:hover { background: var(--ds-deep); color: var(--ds-white); }

.ds-morelink { font-weight: 700; color: var(--ds-deep); text-decoration-thickness: 1px; text-underline-offset: 0.2em; }

/* Header -------------------------------------------------------------------- */

.ds-announce { background: var(--ds-sky); color: var(--ds-navy); text-align: center; font-size: var(--wp--preset--font-size--small); font-weight: 600; padding: 0.5rem var(--ds-gutter); }
.ds-announce a { color: inherit; }

header.wp-block-template-part { position: sticky; top: 0; z-index: 50; }
.admin-bar header.wp-block-template-part { top: var(--wp-admin--admin-bar--height, 32px); }

.ds-header { background: var(--ds-navy); color: var(--ds-white); border-bottom: 1px solid var(--ds-dark-line); transition: box-shadow 0.2s; }
.ds-header.is-scrolled { box-shadow: 0 1px 0 rgba(124, 200, 242, 0.25), 0 8px 24px rgba(5, 7, 15, 0.35); }
.ds-header__bar {
	max-width: var(--ds-wide-padded);
	margin-inline: auto;
	padding-inline: var(--ds-gutter);
	min-height: var(--ds-header-h);
	display: flex;
	align-items: center;
	gap: 1.5rem;
}
.ds-header__logo { display: inline-flex; flex: 0 0 auto; padding-block: 0.6rem; }
.ds-header__logo img { width: auto; height: 3.5rem; }
.ds-header__panel { display: flex; align-items: center; flex: 1 1 auto; gap: 1.25rem; }
.ds-nav { flex: 1 1 auto; }
.ds-nav__list { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; justify-content: center; gap: 0.25rem; }
.ds-nav__item { position: relative; }
.ds-nav__link, .ds-nav__button {
	display: inline-flex;
	align-items: center;
	gap: 0.3rem;
	padding: 0.6rem 0.7rem;
	background: none;
	border: 0;
	border-radius: 4px;
	color: var(--ds-white);
	font: inherit;
	font-size: 0.9375rem;
	font-weight: 600;
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
}
.ds-nav__link:hover, .ds-nav__button:hover, .ds-nav__item.is-open > .ds-nav__button { color: var(--ds-sky); }
.ds-nav__link[aria-current="page"], .ds-nav__item.is-current > .ds-nav__button { color: var(--ds-sky); box-shadow: inset 0 -2px 0 var(--ds-sky); border-radius: 0; }
.ds-nav__button .ds-icon { transition: transform 0.15s; }
.ds-nav__button[aria-expanded="true"] .ds-icon { transform: rotate(180deg); }

.ds-header__actions { display: flex; align-items: center; gap: 1rem; flex: 0 0 auto; }
.ds-header__phone { display: inline-flex; align-items: center; gap: 0.4rem; color: var(--ds-sky); font-weight: 700; font-size: 0.9375rem; text-decoration: none; white-space: nowrap; }
.ds-header__phone:hover { text-decoration: underline; }
.ds-header .ds-btn--primary { background: var(--ds-sky); border-color: var(--ds-sky); color: var(--ds-navy); }
.ds-header .ds-btn--primary:hover { background: var(--ds-white); border-color: var(--ds-white); }

/* Dropdowns and the services mega menu (desktop). */
.ds-dropdown {
	position: absolute;
	top: calc(100% + 0.6rem);
	left: 0;
	min-width: 15rem;
	background: var(--ds-white);
	border: 1px solid var(--ds-line);
	border-radius: 8px;
	box-shadow: 0 18px 40px rgba(5, 7, 15, 0.22);
	padding: 0.5rem;
}
.ds-dropdown ul { list-style: none; margin: 0; padding: 0; }
.ds-dropdown a { display: block; padding: 0.55rem 0.75rem; border-radius: 4px; color: var(--ds-ink); text-decoration: none; font-weight: 600; font-size: 0.9375rem; }
.ds-dropdown a:hover, .ds-dropdown a[aria-current="page"] { background: var(--ds-mist); color: var(--ds-deep); }
.ds-dropdown li:first-child a { color: var(--ds-deep); }

.ds-mega {
	position: fixed;
	left: 0;
	right: 0;
	top: var(--ds-mega-top, calc(var(--ds-header-h) + 1px));
	background: var(--ds-white);
	color: var(--ds-ink);
	border-top: 1px solid var(--ds-line);
	box-shadow: 0 24px 48px rgba(5, 7, 15, 0.25);
	max-height: calc(100vh - var(--ds-header-h) - 2rem);
	overflow-y: auto;
}
.admin-bar .ds-mega { --ds-mega-top: calc(var(--ds-header-h) + 1px + var(--wp-admin--admin-bar--height, 32px)); }
.ds-mega__inner { max-width: var(--ds-wide-padded); margin-inline: auto; padding: 1.75rem var(--ds-gutter) 1.5rem; }
.ds-mega__grid { columns: 4 13rem; column-gap: 2.5rem; }
.ds-mega__group { break-inside: avoid; padding-bottom: 1.25rem; }
.ds-mega__title { font-size: 0.8125rem; font-weight: 700; color: var(--ds-slate); margin: 0 0 0.5rem; padding-bottom: 0.4rem; border-bottom: 1px solid var(--ds-line); }
.ds-mega__group ul { list-style: none; margin: 0; padding: 0; }
.ds-mega__group a { display: block; padding: 0.3rem 0; color: var(--ds-ink); font-weight: 600; font-size: 0.9375rem; text-decoration: none; }
.ds-mega__group a:hover { color: var(--ds-deep); text-decoration: underline; }
.ds-mega__foot { margin: 1.25rem 0 0; padding-top: 1rem; border-top: 1px solid var(--ds-line); }

/* Dropdowns stay closed until opened. Without scripts they open on hover or focus. */
.ds-nav__sub { display: none; }
.ds-nav__item.is-open > .ds-nav__sub { display: block; }
html:not(.ds-js) .ds-nav__item:hover > .ds-nav__sub,
html:not(.ds-js) .ds-nav__item:focus-within > .ds-nav__sub { display: block; }

.ds-header__toggle { display: none; }

@media (max-width: 1199px) {
	.ds-header__phone span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
	.ds-nav__link, .ds-nav__button { padding-inline: 0.5rem; }
}

/* A long menu on a wide screen first tightens up (set by site.js). */
.ds-snug .ds-header__bar { gap: 1rem; }
.ds-snug .ds-header__phone span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.ds-snug :is(.ds-nav__link, .ds-nav__button) { padding-inline: 0.45rem; font-size: 0.875rem; }

/* Compact header: the menu button and a full-screen panel. site.js turns it on
   for narrow screens, and on wide screens whenever the menu has grown too long
   to fit on one line, so adding menu items never breaks the layout. */
html.ds-compact { --ds-header-h: 4rem; }
.ds-compact .ds-header__logo img { height: 2.6rem; }
.ds-compact .ds-header__toggle {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	margin-left: auto;
	padding: 0.6rem 0.8rem;
	background: transparent;
	border: 1px solid var(--ds-dark-line);
	border-radius: 6px;
	color: var(--ds-white);
	font: inherit;
	font-weight: 700;
	cursor: pointer;
}
.ds-burger { position: relative; width: 18px; height: 12px; }
.ds-burger::before, .ds-burger::after, .ds-burger span { content: ""; position: absolute; left: 0; right: 0; height: 2px; background: currentColor; transition: transform 0.2s, opacity 0.2s; }
.ds-burger::before { top: 0; }
.ds-burger span { top: 5px; }
.ds-burger::after { bottom: 0; }
.ds-header.is-open .ds-burger::before { transform: translateY(5px) rotate(45deg); }
.ds-header.is-open .ds-burger span { opacity: 0; }
.ds-header.is-open .ds-burger::after { transform: translateY(-5px) rotate(-45deg); }

.ds-compact .ds-header__panel {
	display: none;
	position: fixed;
	inset: var(--ds-header-h) 0 0 0;
	flex-direction: column;
	align-items: stretch;
	gap: 0;
	overflow-y: auto;
	padding: 0.5rem var(--ds-gutter) 6rem;
	background: var(--ds-navy);
	border-top: 1px solid var(--ds-dark-line);
}
.ds-compact .admin-bar .ds-header__panel { top: calc(var(--ds-header-h) + var(--wp-admin--admin-bar--height, 46px)); }
.ds-compact .ds-header.is-open .ds-header__panel { display: flex; }

.ds-compact .ds-nav__list { flex-direction: column; align-items: stretch; gap: 0; }
.ds-compact .ds-nav__item { border-bottom: 1px solid var(--ds-dark-line); }
.ds-compact :is(.ds-nav__link, .ds-nav__button) { width: 100%; justify-content: space-between; padding: 0.95rem 0.25rem; font-size: 1.0625rem; }
.ds-compact :is(.ds-nav__link[aria-current="page"], .ds-nav__item.is-current > .ds-nav__button) { box-shadow: none; }

.ds-compact :is(.ds-dropdown, .ds-mega) { position: static; box-shadow: none; border: 0; border-radius: 0; background: transparent; padding: 0 0 0.75rem; max-height: none; min-width: 0; }
.ds-compact :is(.ds-dropdown a, .ds-mega__group a) { color: var(--ds-white); padding: 0.55rem 0.25rem 0.55rem 0.75rem; }
.ds-compact :is(.ds-dropdown a:hover, .ds-dropdown a[aria-current="page"], .ds-mega__group a:hover) { background: transparent; color: var(--ds-sky); }
.ds-compact .ds-dropdown li:first-child a { color: var(--ds-sky); }
.ds-compact .ds-mega__inner { padding: 0; }
.ds-compact .ds-mega__grid { columns: auto; column-count: 1; }
.ds-compact .ds-mega__group { padding-bottom: 0.75rem; }
.ds-compact .ds-mega__title { color: var(--ds-on-dark); border-color: var(--ds-dark-line); padding-left: 0.75rem; margin-bottom: 0.25rem; }
.ds-compact .ds-mega__foot { border-color: var(--ds-dark-line); padding-left: 0.75rem; }
.ds-compact .ds-mega__foot a { color: var(--ds-sky); }

.ds-compact .ds-header__actions { flex-direction: column; align-items: stretch; padding-top: 1.25rem; gap: 0.75rem; }
.ds-compact .ds-header__phone { justify-content: center; padding: 0.75rem; border: 1px solid var(--ds-dark-line); border-radius: 6px; }
.ds-compact .ds-header__phone span { position: static; width: auto; height: auto; overflow: visible; clip: auto; }
.ds-compact .ds-header .ds-btn { min-height: 3rem; }
html.ds-compact.ds-menu-open { overflow: hidden; }

/* Without scripts, narrow screens get the plain header, wrapped onto more lines. */
@media (max-width: 1023px) {
	html:not(.ds-js) :is(.ds-header__bar, .ds-header__panel, .ds-nav__list) { flex-wrap: wrap; }
	html:not(.ds-js) .ds-header__bar { padding-block: 0.5rem; }
}

/* Home hero: the one bold moment --------------------------------------------- */

.ds-home-hero {
	position: relative;
	overflow: hidden;
	background-color: var(--ds-navy);
	background-image: var(--ds-dots);
	background-size: 20px 20px;
	color: var(--ds-white);
	padding-block: clamp(3rem, 2rem + 5vw, 6.5rem) clamp(3.5rem, 2rem + 7vw, 8rem);
}
/* The columns stay unpositioned so the cable layer measures from the hero itself. */
.ds-home-hero .wp-block-columns { align-items: center; gap: clamp(2.5rem, 5vw, 5rem); margin: 0 auto; }
.ds-home-hero h1 {
	color: var(--ds-white);
	font-size: clamp(2.375rem, 1.5rem + 3.3vw, 4.25rem);
	line-height: 1.03;
	letter-spacing: -0.03em;
	max-width: 15ch;
}
.ds-home-hero__copy > * + * { margin-block-start: 1.5rem; }
.ds-home-hero .is-style-lead { color: #D9E1F2; max-width: 34rem; }
.ds-home-hero .ds-buttons { margin-top: 2rem; }

/* Photo behind the banner (the Home page's featured image). Any picture is toned to the brand
   navy, darkest behind the heading, so the text, buttons and panel read the same on every photo.
   It sits below the content without positioning the columns, which the cables measure past. */
.ds-home-hero.has-photo { isolation: isolate; background-image: none; }
.ds-home-hero__photo {
	position: absolute;
	inset: 0;
	z-index: -2;
	width: 100%;
	max-width: none;
	height: 100%;
	object-fit: cover;
	filter: grayscale(1) contrast(1.1) brightness(0.85);
	mix-blend-mode: luminosity;
	opacity: 0.9;
}
/* Even a white patch of photo stays dark enough behind the text (4.5:1 or better). */
:is(.ds-home-hero.has-photo, .ds-home-hero[style*="background-image"])::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background:
		var(--ds-dots) 0 0 / 20px 20px,
		linear-gradient(90deg, rgba(10, 16, 66, 0.86) 0%, rgba(10, 16, 66, 0.76) 30%, rgba(10, 16, 66, 0.7) 50%, rgba(10, 16, 66, 0.35) 100%);
}
/* The same toning if a background image is set on the banner block itself. */
.ds-home-hero[style*="background-image"] { isolation: isolate; background-color: var(--ds-navy); background-blend-mode: luminosity; }
/* Outline buttons and the "See all" link get a navy backing, so no photo can wash them out. */
:is(.ds-home-hero.has-photo, .ds-home-hero[style*="background-image"]) :is(.ds-btn--secondary, .ds-btn--ghost):not(:hover) { background-color: var(--ds-navy); }
:is(.ds-home-hero.has-photo, .ds-home-hero[style*="background-image"]) .ds-patch__all a {
	display: inline-block;
	padding: 0.3rem 0.6rem;
	border-radius: 4px;
	background: var(--ds-navy);
}
@media (max-width: 781px) {
	:is(.ds-home-hero.has-photo, .ds-home-hero[style*="background-image"])::before {
		background:
			var(--ds-dots) 0 0 / 20px 20px,
			linear-gradient(180deg, rgba(10, 16, 66, 0.5) 0%, rgba(10, 16, 66, 0.74) 22%, rgba(10, 16, 66, 0.74) 62%, rgba(10, 16, 66, 0.5) 100%);
	}
}
@media (prefers-contrast: more), (forced-colors: active) {
	.ds-home-hero__photo { display: none; }
	.ds-home-hero[style*="background-image"] { background-image: none !important; }
}

.ds-patch { position: static; }
.ds-patch__cables { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 2; overflow: visible; }
.ds-patch__ports {
	position: relative;
	z-index: 1;
	list-style: none;
	margin: 0;
	padding: 0.85rem;
	display: grid;
	gap: 0.5rem;
	background: var(--ds-navy-3);
	border: 1px solid rgba(124, 200, 242, 0.35);
	border-radius: 12px;
}
.ds-patch__link {
	display: grid;
	grid-template-columns: auto 4.75rem 1fr;
	align-items: center;
	gap: 0.85rem;
	padding: 0.7rem 0.85rem;
	border: 1px solid var(--ds-dark-line);
	border-radius: 6px;
	background: rgba(255, 255, 255, 0.025);
	color: var(--ds-white);
	text-decoration: none;
	transition: background-color 0.15s, border-color 0.15s;
}
.ds-patch__link:hover, .ds-patch__link:focus-visible { background: rgba(124, 200, 242, 0.12); border-color: var(--ds-sky); }
.ds-patch__jack { position: relative; width: 30px; height: 22px; border: 2px solid rgba(124, 200, 242, 0.65); border-radius: 3px; background: var(--ds-black); }
.ds-patch__jack::before { content: ""; position: absolute; left: 6px; right: 6px; bottom: 3px; height: 6px; border: 1.5px solid rgba(124, 200, 242, 0.45); border-top: 0; }
.ds-patch__jack::after {
	content: "";
	position: absolute;
	top: -7px;
	right: -7px;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: #2A3566;
	transition: background-color 0.3s, box-shadow 0.3s;
}
.ds-patch.is-live .ds-patch__jack::after { background: var(--ds-sky); box-shadow: 0 0 0 3px rgba(124, 200, 242, 0.2); }
.ds-patch__port:nth-child(2) .ds-patch__jack::after { transition-delay: 0.09s; }
.ds-patch__port:nth-child(3) .ds-patch__jack::after { transition-delay: 0.18s; }
.ds-patch__port:nth-child(4) .ds-patch__jack::after { transition-delay: 0.27s; }
.ds-patch__port:nth-child(5) .ds-patch__jack::after { transition-delay: 0.36s; }
.ds-patch__port:nth-child(6) .ds-patch__jack::after { transition-delay: 0.45s; }
.ds-patch.is-live .ds-patch__jack::after { transition-delay: 1.15s; }
.ds-patch.is-live .ds-patch__port:nth-child(2) .ds-patch__jack::after { transition-delay: 1.24s; }
.ds-patch.is-live .ds-patch__port:nth-child(3) .ds-patch__jack::after { transition-delay: 1.33s; }
.ds-patch.is-live .ds-patch__port:nth-child(4) .ds-patch__jack::after { transition-delay: 1.42s; }
.ds-patch.is-live .ds-patch__port:nth-child(5) .ds-patch__jack::after { transition-delay: 1.51s; }
.ds-patch.is-live .ds-patch__port:nth-child(6) .ds-patch__jack::after { transition-delay: 1.6s; }
.ds-patch__code { font-family: var(--ds-mono); font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.04em; color: var(--ds-sky); }
.ds-patch__name { font-weight: 700; font-size: 1rem; line-height: 1.3; }
.ds-patch__all { margin: 1rem 0 0; position: relative; z-index: 1; }
.ds-patch__all a { color: var(--ds-sky); font-weight: 700; }

@media (max-width: 1099px) {
	.ds-patch__cables { display: none; }
}
@media (max-width: 781px) {
	.ds-home-hero .wp-block-columns { gap: 2.5rem; }
	.ds-patch__ports { grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr)); }
}

/* Inner page header ----------------------------------------------------------- */

.ds-hero {
	background-color: var(--ds-navy);
	background-image: var(--ds-dots);
	background-size: 20px 20px;
	color: var(--ds-white);
	padding-block: clamp(2rem, 1.5rem + 2.5vw, 3.75rem) clamp(2.5rem, 1.5rem + 3.5vw, 4.5rem);
}
.ds-hero__inner {
	max-width: var(--ds-wide-padded);
	margin-inline: auto;
	padding-inline: var(--ds-gutter);
	display: grid;
	gap: 2rem;
	align-items: center;
}
.ds-hero__copy { max-width: 46rem; }
.ds-hero__title { color: var(--ds-white); margin: 0.75rem 0 0; }
/* A title with one very long word (a district name) steps down on phones. */
@media (max-width: 599px) { .ds-hero__title--longword { font-size: clamp(1.625rem, 7.6vw, 2.375rem); } }
/* Safety net: a word that still cannot fit breaks rather than pushing the page sideways. */
:where(h1, h2, h3) { overflow-wrap: break-word; }
.ds-hero--page .ds-hero__title { font-size: clamp(2rem, 1.5rem + 2vw, 3rem); }
.ds-hero__lead { font-size: var(--wp--preset--font-size--large); line-height: 1.55; color: #D9E1F2; font-weight: 500; }
.ds-hero .ds-buttons { margin-top: 1.75rem; }
.ds-hero__visual { display: flex; justify-content: center; }
.ds-hero__visual .ds-visual { width: 100%; max-width: 34rem; }
.ds-hero__img { width: 100%; max-width: 36rem; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 12px; border: 1px solid var(--ds-dark-line); }
@media (min-width: 900px) {
	.ds-hero.has-visual .ds-hero__inner { grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); gap: 3rem; }
}
@media (max-width: 899px) {
	.ds-hero__visual { display: none; }
}

.ds-crumbs ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.25rem 0; font-size: var(--wp--preset--font-size--small); color: var(--ds-on-dark); }
.ds-crumbs li + li::before { content: "/"; margin: 0 0.55rem; color: rgba(124, 200, 242, 0.55); }
.ds-crumbs a { color: var(--ds-sky); text-decoration: none; }
.ds-crumbs a:hover { text-decoration: underline; }
.ds-crumbs [aria-current] { color: var(--ds-on-dark); }
/* On phones the page title right below already says where you are. */
@media (max-width: 599px) { .ds-crumbs li[aria-current] { display: none; } }

.ds-spec, .ds-meta { list-style: none; margin: 1.25rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.5rem; }
.ds-spec li {
	font-family: var(--ds-mono);
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--ds-sky);
	border: 1px solid rgba(124, 200, 242, 0.45);
	border-radius: 3px;
	padding: 0.25rem 0.55rem;
}
.ds-meta li { font-size: var(--wp--preset--font-size--small); font-weight: 600; color: var(--ds-slate); }
.ds-hero .ds-meta li { color: var(--ds-on-dark); }
/* The same sleeves on light cards. */
.ds-card .ds-spec { margin: auto 0 0; padding-top: 1rem; gap: 0.35rem; }
.ds-card .ds-spec li { font-size: 0.6875rem; color: var(--ds-deep); border-color: #BFD9EE; background: #F1F8FD; padding: 0.2rem 0.4rem; }

/* Section heads ------------------------------------------------------------- */

.ds-head { margin-bottom: clamp(1.75rem, 1.4rem + 1.2vw, 2.5rem); max-width: var(--ds-measure); }
.ds-head__title { margin: 0; }
.ds-head__intro { font-size: var(--wp--preset--font-size--large); line-height: 1.55; color: var(--ds-slate); }
.ds-head__more { margin-top: 0.75rem; }

/* Service tiles: a patch-panel grid with shared hairlines ---------------------- */

/* Hairline grid: every tile has its own border and overlaps its neighbours by
   one pixel, so a short last row ends cleanly instead of trailing a line. */
.ds-tiles {
	list-style: none;
	margin: 0;
	padding: 0 1px 1px 0;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr));
}
.ds-tiles--compact { grid-template-columns: repeat(auto-fill, minmax(min(100%, 14rem), 1fr)); }
.ds-tile {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	padding: 1.5rem 1.5rem 1.35rem;
	background: var(--ds-white);
	border: 1px solid var(--ds-line);
	margin: 0 -1px -1px 0;
	transition: background-color 0.15s;
}
.ds-tiles--compact .ds-tile { padding: 1.15rem 2.1rem 1.15rem 1.25rem; flex-direction: row; align-items: center; gap: 0.85rem; }
.ds-tiles--compact .ds-tile__led { top: 50%; right: 1rem; margin-top: -4px; }
.ds-tile__icon { color: var(--ds-brand); display: inline-flex; }
.ds-tile__led {
	position: absolute;
	top: 1.35rem;
	right: 1.35rem;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--ds-line);
	transition: background-color 0.15s, box-shadow 0.15s;
}
.ds-tile:hover, .ds-tile:focus-within { background: var(--ds-mist); }
.ds-tile:hover .ds-tile__led, .ds-tile:focus-within .ds-tile__led { background: var(--ds-brand); box-shadow: 0 0 0 4px rgba(2, 136, 202, 0.18); }
.ds-tile__title { margin: 0.35rem 0 0; font-size: 1.1875rem; font-weight: 800; line-height: 1.25; letter-spacing: -0.01em; }
.ds-tiles--compact .ds-tile__title { margin: 0; font-size: 1rem; font-weight: 700; }
.ds-tile__link { color: var(--ds-ink); text-decoration: none; }
.ds-tile__link::after { content: ""; position: absolute; inset: 0; }
.ds-tile__link:focus-visible { outline: none; }
.ds-tile:focus-within { outline: 3px solid var(--ds-deep); outline-offset: -3px; }
.ds-tile__text { margin: 0; color: var(--ds-slate); font-size: 0.9375rem; line-height: 1.55; }
/* Key terms as label sleeves, like the markers on a cable. */
.ds-tile__tags { margin: auto 0 0; padding-top: 0.75rem; display: flex; flex-wrap: wrap; gap: 0.35rem; font-family: var(--ds-mono); font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ds-deep); }
.ds-tile__tags span { padding: 0.2rem 0.4rem; border: 1px solid #BFD9EE; border-radius: 3px; background: #F1F8FD; line-height: 1.2; }

:is(.is-tone-mist, .is-tone-sky, .is-tone-grey, .is-style-mist, .is-style-sky, .is-style-grey) .ds-tile { background: var(--ds-white); }
:is(.is-tone-mist, .is-tone-sky, .is-tone-grey, .is-style-mist, .is-style-sky, .is-style-grey) .ds-tile:hover { background: var(--ds-mist); }
/* Solid line colours here: overlapping translucent borders would double up. */
.is-tone-dark .ds-tile { background: transparent; border-color: #22346A; }
.is-tone-dark .ds-tile:hover, .is-tone-dark .ds-tile:focus-within { background: rgba(124, 200, 242, 0.08); }
.is-tone-dark .ds-tile__link { color: var(--ds-white); }
.is-tone-dark .ds-tile__icon, .is-tone-dark .ds-tile__tags { color: var(--ds-sky); }
.is-tone-dark .ds-tile__tags span { background: transparent; border-color: var(--ds-dark-line); }

/* On phones, a plain services grid (not the grouped services page) turns into a
   two-column index of names, so twelve services fit in a couple of screens. */
@media (max-width: 599px) {
	.ds-services:not(.ds-services--grouped) .ds-tiles--tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.ds-services:not(.ds-services--grouped) .ds-tiles--tiles .ds-tile { padding: 1rem 0.9rem 1.1rem; gap: 0.4rem; }
	.ds-services:not(.ds-services--grouped) .ds-tiles--tiles :is(.ds-tile__text, .ds-tile__tags) { display: none; }
	.ds-services:not(.ds-services--grouped) .ds-tiles--tiles .ds-tile__title { font-size: 1rem; font-weight: 700; }
	.ds-services:not(.ds-services--grouped) .ds-tiles--tiles .ds-tile__led { top: 1rem; right: 0.9rem; }
}

/* Services page: one band per family. */
.ds-family { padding-top: clamp(2rem, 1.5rem + 2vw, 3rem); scroll-margin-top: calc(var(--ds-header-h) + 1rem); }
.ds-family:first-of-type { padding-top: 0; }
.ds-family__head { display: grid; grid-template-columns: auto 1fr; gap: 0.25rem 1rem; align-items: center; margin-bottom: 1.25rem; max-width: var(--ds-measure); }
.ds-family__icon { color: var(--ds-brand); grid-row: span 2; align-self: start; padding-top: 0.2rem; }
.ds-family__title { margin: 0; font-size: var(--wp--preset--font-size--x-large); }
.ds-family__text { margin: 0; color: var(--ds-slate); grid-column: 2; }

/* Lists of links, chips ------------------------------------------------------ */

.ds-linklist { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.45rem; }
.ds-linklist a { text-decoration: none; }
.ds-linklist a:hover { text-decoration: underline; }

.ds-chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.6rem; }
.ds-chips a {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.55rem 0.9rem;
	border: 1px solid var(--ds-line);
	border-radius: 999px;
	color: var(--ds-ink);
	font-weight: 600;
	text-decoration: none;
	background: var(--ds-white);
}
.ds-chips a .ds-icon { color: var(--ds-brand); }
.ds-chips a:hover { border-color: var(--ds-deep); color: var(--ds-deep); }

.ds-arealinks { font-size: var(--wp--preset--font-size--large); line-height: 1.6; max-width: var(--ds-measure); }

/* Districts ------------------------------------------------------------------ */

.ds-areas { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 15.5rem), 1fr)); gap: 1rem; }
.ds-area { position: relative; padding: 1.5rem; border: 1px solid var(--ds-line); border-radius: 8px; background: var(--ds-white); transition: border-color 0.15s; }
.ds-area:hover, .ds-area:focus-within { border-color: var(--ds-deep); }
.ds-area__code { display: inline-block; font-family: var(--ds-mono); font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.05em; background: var(--ds-sky); color: var(--ds-navy); padding: 0.2rem 0.5rem; border-radius: 3px; }
.ds-area__title { margin: 0.85rem 0 0.25rem; font-size: 1.3125rem; }
.ds-area__link { color: var(--ds-ink); text-decoration: none; }
.ds-area__link::after { content: ""; position: absolute; inset: 0; }
.ds-area__alt { margin: 0; font-size: var(--wp--preset--font-size--small); color: var(--ds-slate); }
.ds-area__towns { margin: 0.75rem 0 0; font-size: var(--wp--preset--font-size--small); color: var(--ds-slate); }
.is-tone-mist .ds-area { background: var(--ds-white); }

/* Brands and clients ---------------------------------------------------------- */

.ds-brandgroup + .ds-brandgroup { margin-top: 2rem; }
.ds-brandgroup__title { font-size: 0.9375rem; font-weight: 700; color: var(--ds-slate); margin: 0 0 0.75rem; }
.ds-brands, .ds-clients {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 11rem), 1fr));
	padding: 0 1px 1px 0;
}
.ds-brand, .ds-client {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0.4rem;
	min-height: 6.5rem;
	padding: 1rem;
	border: 1px solid var(--ds-line);
	margin: 0 -1px -1px 0;
	background: var(--ds-white);
	text-align: center;
}
.ds-brand__logo, .ds-client__logo { max-height: 3rem; width: auto; object-fit: contain; }
.ds-brand__name, .ds-client__name { font-weight: 800; font-size: 1.0625rem; letter-spacing: -0.01em; color: var(--ds-ink); }
.ds-brand__badge { font-size: 0.75rem; font-weight: 700; color: var(--ds-deep); }
.ds-client__label { font-size: 0.8125rem; color: var(--ds-slate); }

/* Projects ------------------------------------------------------------------- */

.ds-cards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr)); gap: 1.5rem; }
.ds-card { position: relative; display: flex; flex-direction: column; border: 1px solid var(--ds-line); border-radius: 10px; overflow: hidden; background: var(--ds-white); transition: border-color 0.15s; }
.ds-card:hover, .ds-card:focus-within { border-color: var(--ds-deep); }
.ds-card__media { aspect-ratio: 16 / 10; background: var(--ds-navy); overflow: hidden; }
.ds-card__media img, .ds-card__media svg { width: 100%; height: 100%; object-fit: cover; display: block; }
.ds-card__body { padding: 1.25rem 1.35rem 1.35rem; display: flex; flex-direction: column; flex: 1 1 auto; }
.ds-card__scale { margin: 0.5rem 0 0; font-weight: 700; font-size: 0.9375rem; color: var(--ds-ink); }
.ds-card__title { margin: 0; font-size: 1.25rem; line-height: 1.3; }
.ds-card__link { color: var(--ds-ink); text-decoration: none; }
.ds-card__link::after { content: ""; position: absolute; inset: 0; }
.ds-card__text { margin: 0.6rem 0 0; color: var(--ds-slate); font-size: 0.9375rem; }
/* Project photos keep the 4:3 shape most cameras take. A project without its own page is a
   photo, heading and text with nothing to click, so it does not react to the pointer. */
.ds-card--project .ds-card__media { aspect-ratio: 4 / 3; }
/* Exactly four projects sit two by two rather than three and one. */
@media (min-width: 700px) {
	.ds-cards--projects:has(> :nth-child(4):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.ds-card--static:hover, .ds-card--static:focus-within { border-color: var(--ds-line); }

/* Service picture cards: the drawn picture (or the service's own photo), name, summary, tags.
   Four across on wide screens; on phones two across with the picture and name only, so twelve
   services stay a short scroll. */
.ds-cards--services { grid-template-columns: repeat(auto-fill, minmax(min(100%, 16.5rem), 1fr)); }
.ds-card--service .ds-card__media { aspect-ratio: 4 / 3; background: var(--ds-mist); }
.ds-card--service .ds-card__title { font-size: 1.125rem; }
.ds-card--service .ds-card__text { font-size: 0.875rem; line-height: 1.55; }
@media (max-width: 599px) {
	.ds-cards--services { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem; }
	.ds-card--service .ds-card__body { padding: 0.7rem 0.75rem 0.85rem; }
	.ds-card--service .ds-card__title { font-size: 0.9375rem; line-height: 1.3; }
	.ds-card--service :is(.ds-card__text, .ds-spec) { display: none; }
}

/* Case studies: the picture beside the story, one per row, sides alternating. */
.ds-features { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.5rem; }
.ds-feature {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
	border: 1px solid var(--ds-line);
	border-radius: 12px;
	overflow: hidden;
	background: var(--ds-white);
	transition: border-color 0.15s;
}
.ds-feature:hover, .ds-feature:focus-within { border-color: var(--ds-deep); }
.ds-feature--static:hover, .ds-feature--static:focus-within { border-color: var(--ds-line); }
.ds-feature:nth-child(even) .ds-feature__media { order: 2; }
.ds-feature__media { aspect-ratio: 4 / 3; background: var(--ds-mist); overflow: hidden; }
.ds-feature__media img, .ds-feature__media svg { width: 100%; height: 100%; object-fit: cover; display: block; }
.ds-feature__body { padding: clamp(1.5rem, 1rem + 2vw, 2.75rem); display: flex; flex-direction: column; justify-content: center; }
.ds-feature__title { margin: 0; font-size: clamp(1.375rem, 1.1rem + 1vw, 1.875rem); line-height: 1.2; }
.ds-feature__link { color: var(--ds-ink); text-decoration: none; }
.ds-feature__link::after { content: ""; position: absolute; inset: 0; }
.ds-feature__scale { margin: 0.75rem 0 0; font-weight: 700; color: var(--ds-deep); }
.ds-feature__text { margin: 0.75rem 0 0; color: var(--ds-slate); }
.ds-feature__more { margin: 1.5rem 0 0; font-weight: 700; color: var(--ds-deep); text-decoration: underline; text-underline-offset: 3px; }
/* The services delivered, as plain names rather than the coded spec sleeves. */
.ds-spec--systems { gap: 0.4rem; }
.ds-spec--systems li { font-family: inherit; font-size: 0.8125rem; letter-spacing: 0; text-transform: none; color: var(--ds-ink); border-color: var(--ds-line); background: var(--ds-mist); border-radius: 999px; padding: 0.25rem 0.7rem; }
@media (max-width: 899px) {
	.ds-feature { grid-template-columns: 1fr; }
	.ds-feature:nth-child(even) .ds-feature__media { order: 0; }
}
/* On phones the full list of services waits on the case study page itself. */
@media (max-width: 599px) {
	.ds-feature .ds-spec--systems { display: none; }
}
/* An empty Gallery block on a case study is a slot for photos still to come: show nothing on
   the site. (In the editor this selector never matches, so the slot stays visible there.) */
body:not(.editor-styles-wrapper) .wp-block-gallery:not(:has(img)) { display: none; }

.ds-filters { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 1rem; margin: 0 0 2rem; padding: 1.25rem; background: var(--ds-mist); border-radius: 8px; }
.ds-filters__field { margin: 0; flex: 1 1 12rem; }
.ds-filters__field label { display: block; font-weight: 700; font-size: var(--wp--preset--font-size--small); margin-bottom: 0.35rem; }
.ds-filters select { width: 100%; }
.ds-filters__actions { margin: 0; display: flex; align-items: center; gap: 1rem; }
.ds-js .ds-filters__actions .ds-btn { display: none; }
.ds-filters__reset { font-weight: 700; }

.ds-empty { padding: 2rem; border: 1px dashed var(--ds-field); border-radius: 8px; max-width: var(--ds-measure); }
.ds-empty p { margin: 0; font-size: var(--wp--preset--font-size--large); }

.ds-project-figure { margin: 0; }
/* No photo yet: the empty photo band takes no space (the drawn picture is in the header). */
.ds-section--tight:empty { display: none; }
.ds-project-figure img { width: 100%; max-height: 38rem; object-fit: cover; border-radius: 10px; }
.ds-projectmeta { display: grid; gap: 2rem; }
.ds-facts { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 14rem), 1fr)); gap: 1rem 2rem; margin: 0; padding: 1.5rem 0; border-top: 1px solid var(--ds-line); border-bottom: 1px solid var(--ds-line); }
.ds-facts dt { font-size: var(--wp--preset--font-size--small); color: var(--ds-slate); font-weight: 600; }
.ds-facts dd { margin: 0.2rem 0 0; font-weight: 700; }
.ds-projectmeta__logo img { max-height: 4rem; width: auto; }
.ds-quote { margin: 0; padding: 1.75rem 2rem; background: var(--ds-mist); border-left: 4px solid var(--ds-brand); border-radius: 0 8px 8px 0; max-width: var(--ds-measure); }
.ds-quote blockquote { margin: 0; font-size: var(--wp--preset--font-size--large); font-weight: 500; line-height: 1.55; }
.ds-quote figcaption { margin-top: 0.75rem; font-weight: 700; color: var(--ds-slate); }

.ds-gallery img { border-radius: 6px; }

/* Content blocks --------------------------------------------------------------- */

/* Checklist: what is in the scope. */
.is-style-checklist { list-style: none; padding-left: 0; display: grid; gap: 0.7rem; }
.is-style-checklist li { position: relative; padding-left: 2rem; }
.is-style-checklist li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.2rem;
	width: 1.25rem;
	height: 1.25rem;
	border-radius: 3px;
	background: var(--ds-brand) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 0.8rem no-repeat;
}
@media (min-width: 720px) {
	.is-style-checklist.ds-two-col { grid-template-columns: 1fr 1fr; column-gap: 2.5rem; max-width: none; }
}
:is(.is-tone-dark, .is-style-navy, .is-style-black) .is-style-checklist li::before { background-color: var(--ds-sky); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230A1042' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E"); }

/* Numbered steps: a real sequence, so it gets numbers. */
.is-style-steps { list-style: none; padding-left: 0; counter-reset: ds-step; display: grid; gap: 1.1rem; }
.is-style-steps li { counter-increment: ds-step; position: relative; padding-left: 3.25rem; min-height: 2.25rem; padding-top: 0.25rem; }
.is-style-steps strong { display: block; color: var(--ds-ink); }
.is-style-steps li::before {
	content: counter(ds-step);
	position: absolute;
	left: 0;
	top: 0;
	width: 2.25rem;
	height: 2.25rem;
	border-radius: 50%;
	display: grid;
	place-items: center;
	background: var(--ds-deep);
	color: var(--ds-white);
	font-weight: 800;
	font-size: 0.9375rem;
}
.is-style-steps li:not(:last-child)::after { content: ""; position: absolute; left: calc(1.125rem - 1px); top: 2.4rem; bottom: -1rem; width: 2px; background: var(--ds-line); }
:is(.is-tone-dark, .is-style-navy, .is-style-black) .is-style-steps li::before { background: var(--ds-sky); color: var(--ds-navy); }
:is(.is-tone-dark, .is-style-navy, .is-style-black) .is-style-steps li::after { background: var(--ds-dark-line); }

/* Steps on a cable: drawings to handover, left to right on wide screens. */
.is-style-cable-steps { list-style: none; padding: 0; margin-inline: 0; margin-bottom: 0; counter-reset: ds-cable; display: grid; gap: 1.5rem; max-width: none !important; }
* + .is-style-cable-steps { margin-top: 2rem; }
.is-style-cable-steps li { counter-increment: ds-cable; position: relative; padding-left: 3.25rem; }
.is-style-cable-steps li::before {
	content: counter(ds-cable, decimal-leading-zero);
	position: absolute;
	left: 0;
	top: -0.1rem;
	width: 2.4rem;
	height: 2.4rem;
	display: grid;
	place-items: center;
	border-radius: 50%;
	background: var(--ds-white);
	border: 2px solid var(--ds-brand);
	color: var(--ds-deep);
	font-family: var(--ds-mono);
	font-weight: 600;
	font-size: 0.875rem;
	z-index: 1;
}
.is-style-cable-steps li::after { content: ""; position: absolute; left: calc(1.2rem - 2px); top: 2.3rem; bottom: -1.6rem; width: 4px; background: var(--ds-brand); border-radius: 2px; }
.is-style-cable-steps li:last-child::after { display: none; }
.is-style-cable-steps strong { display: block; font-size: 1.0625rem; }
@media (min-width: 900px) {
	.is-style-cable-steps { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 1rem; }
	.is-style-cable-steps li { padding-left: 0; padding-top: 3.5rem; }
	.is-style-cable-steps li::before { top: 0; }
	.is-style-cable-steps li::after { left: 2.4rem; right: -1rem; top: calc(1.2rem - 2px); bottom: auto; width: auto; height: 4px; }
}

/* Questions. */
.ds-faq .wp-block-details { max-width: var(--ds-measure); }
.wp-block-details summary { cursor: pointer; font-weight: 700; font-size: 1.0625rem; list-style: none; position: relative; padding-right: 2rem; }
.wp-block-details summary::-webkit-details-marker { display: none; }
.wp-block-details summary::after {
	content: "";
	position: absolute;
	right: 0.25rem;
	top: 0.35rem;
	width: 0.65rem;
	height: 0.65rem;
	border-right: 2px solid var(--ds-deep);
	border-bottom: 2px solid var(--ds-deep);
	transform: rotate(45deg);
	transition: transform 0.15s;
}
.wp-block-details[open] summary::after { transform: rotate(-135deg); top: 0.6rem; }
.wp-block-details > :not(summary) { margin-top: 0.75rem; color: var(--ds-slate); }
.ds-faq .wp-block-details:first-of-type { border-top: 1px solid var(--ds-line); }

/* Panel cards made with groups. */
.is-style-panel { border: 1px solid var(--ds-line); border-radius: 10px; padding: 1.5rem; background: var(--ds-white); height: 100%; }
.is-style-panel > * + * { margin-block-start: 0.6rem; }
.is-style-panel h3 { font-size: 1.25rem; margin: 0; }
/* A panel whose title links: the whole panel is the target, the title shows it. */
.is-style-panel:has(h3 a) { position: relative; transition: border-color 0.15s; }
.is-style-panel:has(h3 a):hover, .is-style-panel:has(h3 a):focus-within { border-color: var(--ds-deep); }
.is-style-panel h3 a { color: var(--ds-ink); text-decoration: underline; text-decoration-color: var(--ds-sky); text-decoration-thickness: 2px; text-underline-offset: 0.3em; }
.is-style-panel h3 a:hover { color: var(--ds-deep); text-decoration-color: currentColor; }
.is-style-panel h3 a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
:is(.is-tone-dark, .is-style-navy, .is-style-black) .is-style-panel h3 a { color: var(--ds-white); }
.is-style-panel p { color: var(--ds-slate); }
.is-tone-dark .is-style-panel, .is-style-navy .is-style-panel, .is-style-black .is-style-panel { background: rgba(255, 255, 255, 0.03); border-color: var(--ds-dark-line); }
.is-style-navy .is-style-panel p, .is-style-black .is-style-panel p { color: var(--ds-on-dark); }


.wp-block-columns { gap: clamp(1.25rem, 2.5vw, 2rem); }
.ds-inner > .wp-block-columns { margin-block-start: 2rem; }

/* Visual blocks. */
.ds-visual { display: block; width: 100%; height: auto; }
.ds-visual-wrap { margin: 0; }
.ds-visual-wrap--tagcable { padding: 1rem 0; }
.is-style-black .ds-visual-wrap, .is-style-navy .ds-visual-wrap { max-width: 40rem; }

/* Forms ------------------------------------------------------------------------ */

.ds-formwrap { max-width: 44rem; }
.ds-form { display: grid; gap: 1.1rem; }
.ds-form__title { margin: 0; font-size: var(--wp--preset--font-size--x-large); }
.ds-form__intro { color: var(--ds-slate); }
.ds-form__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr)); gap: 1.1rem 1.25rem; }
.ds-field { margin: 0; display: grid; gap: 0.35rem; }
.ds-field label, .ds-field legend { font-weight: 700; font-size: 0.9375rem; }
.ds-field__req, .ds-field__opt { font-weight: 500; color: var(--ds-slate); font-size: 0.875rem; }
.ds-form input[type="text"], .ds-form input[type="tel"], .ds-form input[type="email"], .ds-form select, .ds-form textarea, .ds-filters select {
	width: 100%;
	min-height: 3rem;
	padding: 0.7rem 0.85rem;
	border: 1px solid var(--ds-field);
	border-radius: 6px;
	background: var(--ds-white);
	color: var(--ds-ink);
	font: inherit;
	font-size: 1rem;
}
.ds-form textarea { min-height: 7rem; resize: vertical; }
.ds-form input:focus, .ds-form select:focus, .ds-form textarea:focus, .ds-filters select:focus { outline: 3px solid var(--ds-sky); outline-offset: 0; border-color: var(--ds-deep); }
.ds-form input[type="file"] { padding: 0.85rem; border: 1px dashed var(--ds-field); border-radius: 6px; background: var(--ds-mist); width: 100%; font: inherit; }
.ds-field__help { font-size: 0.875rem; color: var(--ds-slate); }
.ds-field__error { font-size: 0.875rem; font-weight: 600; color: var(--ds-alert); }
.ds-field__error:empty { display: none; }
.ds-field.has-error input, .ds-field.has-error select, .ds-field.has-error textarea { border-color: var(--ds-alert); border-width: 2px; }
.ds-field--radios { border: 0; padding: 0; margin: 0; display: grid; gap: 0.5rem; }
.ds-field--radios legend { margin-bottom: 0.5rem; }
.ds-radio, .ds-check { display: flex; align-items: flex-start; gap: 0.6rem; font-weight: 500 !important; cursor: pointer; }
.ds-radio input, .ds-check input { width: 1.25rem; height: 1.25rem; margin: 0.15rem 0 0; accent-color: var(--ds-deep); flex: 0 0 auto; }
.ds-field--consent { font-size: 0.9375rem; }
.ds-form__hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }
.ds-form__summary { padding: 0.9rem 1rem; border: 2px solid var(--ds-alert); border-radius: 6px; background: #FDF2F4; color: var(--ds-ink); font-weight: 600; }
.ds-form__summary[hidden] { display: none; }
.ds-form__actions { margin: 0.25rem 0 0; }
.ds-form button[disabled] { opacity: 0.7; cursor: progress; }

/* Contact and offices ----------------------------------------------------------- */

.ds-contact__title { font-size: var(--wp--preset--font-size--x-large); margin: 0 0 1rem; }
.ds-contact__list { margin: 0; display: grid; gap: 1.1rem; }
.ds-contact__row { display: grid; grid-template-columns: 1.5rem 1fr; column-gap: 0.75rem; align-items: start; }
.ds-contact__row .ds-icon { color: var(--ds-brand); grid-row: span 2; margin-top: 0.15rem; }
.ds-contact__row dt { font-size: 0.875rem; font-weight: 600; color: var(--ds-slate); }
.ds-contact__row dd { margin: 0; font-weight: 700; }
.ds-contact__row dd a { color: var(--ds-ink); }
.ds-contact__row dd a:hover { color: var(--ds-deep); }

.ds-offices { display: grid; gap: 2rem; }
@media (min-width: 900px) { .ds-offices.has-map { grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); align-items: start; } }
.ds-offices__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; }
.ds-office { padding: 1.35rem 1.5rem; border: 1px solid var(--ds-line); border-radius: 8px; background: var(--ds-white); }
.ds-office__name { margin: 0 0 0.35rem; font-size: 1.125rem; }
.ds-office p { margin: 0.3rem 0 0; }
.ds-office__addr { color: var(--ds-slate); }
.ds-map { position: relative; border-radius: 10px; overflow: hidden; background: var(--ds-navy); min-height: 20rem; display: grid; place-items: center; text-align: center; }
.ds-map .ds-visual { position: absolute; inset: 0; height: 100%; opacity: 0.55; }
.ds-map__load { position: relative; z-index: 1; }
.ds-map__note { position: absolute; bottom: 0.75rem; left: 0; right: 0; margin: 0; color: var(--ds-on-dark); font-size: 0.8125rem; }
.ds-map.is-loaded { display: block; }
.ds-map iframe { display: block; width: 100%; min-height: 24rem; border: 0; }
.ds-map .ds-btn--secondary { background: var(--ds-sky); border-color: var(--ds-sky); color: var(--ds-navy); }

.ds-download a { display: inline-flex; align-items: center; gap: 0.5rem; font-weight: 700; }
.ds-download__meta { font-weight: 500; color: var(--ds-slate); }

/* Closing call to action ------------------------------------------------------ */

.ds-cta {
	background-color: var(--ds-navy);
	background-image: var(--ds-dots);
	background-size: 20px 20px;
	color: var(--ds-white);
	padding-block: clamp(3rem, 2.2rem + 3vw, 5rem);
	border-top: 4px solid var(--ds-brand);
}
.ds-cta__inner { max-width: var(--ds-wide); }
.ds-cta__title { color: var(--ds-white); max-width: 22ch; margin: 0; }
.ds-cta__text { color: #D9E1F2; font-size: var(--wp--preset--font-size--large); max-width: 40rem; margin-top: 1rem !important; }
.ds-cta .ds-buttons { margin-top: 1.75rem; }

/* Footer ---------------------------------------------------------------------- */

.ds-footer {
	background: var(--ds-black);
	color: var(--ds-on-dark);
	padding-block: clamp(3rem, 2.4rem + 2vw, 4.5rem) 0;
	font-size: 0.9375rem;
}
.ds-footer a { color: var(--ds-white); text-decoration: none; }
.ds-footer a:hover { color: var(--ds-sky); text-decoration: underline; }
/* A link inside a sentence needs more than colour to stand out. */
.ds-footer p a { text-decoration: underline; text-decoration-color: rgba(124, 200, 242, 0.6); text-underline-offset: 0.2em; }
.ds-footer__grid { display: grid; gap: 2.5rem 2rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr)); }
@media (min-width: 1024px) { .ds-footer__grid { grid-template-columns: 1.4fr 1fr 1fr 1fr 1.2fr; } }
@media (max-width: 599px) {
	.ds-footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2.25rem 1.25rem; }
	.ds-footer__grid > :is(:first-child, :nth-child(2), :last-child) { grid-column: 1 / -1; }
}
.ds-footer h2, .ds-footer .ds-head__title, .ds-footer .ds-contact__title { color: var(--ds-white); font-size: 1rem; font-weight: 700; letter-spacing: 0; margin: 0 0 1rem; }
.ds-footer .ds-head { margin: 0; }
.ds-footer .ds-contact__row dt { color: var(--ds-on-dark); }
.ds-footer .ds-contact__row dd a { color: var(--ds-white); }
.ds-footer .ds-contact__row .ds-icon { color: var(--ds-sky); }
.ds-footer .ds-linklist { gap: 0.55rem; }
.ds-footer__bottom {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 0.75rem 2rem;
	margin-top: clamp(2.5rem, 2rem + 2vw, 3.5rem) !important;
	padding-block: 1.5rem;
	border-top: 1px solid rgba(255, 255, 255, 0.12);
	font-size: 0.875rem;
}
.ds-copyright { margin: 0; }
.ds-copyright a { margin-left: 0.5rem; }
.ds-social { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 1rem; }
.ds-brandblock img { height: 4.25rem; width: auto; }
.ds-brandblock p { margin-top: 1rem; max-width: 22rem; }

/* Mobile contact bar ------------------------------------------------------------ */

.ds-mobilebar { display: none; }
@media (max-width: 781px) {
	.ds-mobilebar {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 60;
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		background: var(--ds-navy);
		border-top: 1px solid rgba(124, 200, 242, 0.35);
		padding-bottom: env(safe-area-inset-bottom);
	}
	.ds-mobilebar a {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: 0.2rem;
		min-height: 3.5rem;
		color: var(--ds-white);
		font-size: 0.8125rem;
		font-weight: 700;
		text-decoration: none;
	}
	.ds-mobilebar a + a { border-left: 1px solid var(--ds-dark-line); }
	.ds-mobilebar a:last-child { background: var(--ds-sky); color: var(--ds-navy); }
	.ds-mobilebar .ds-icon { width: 20px; height: 20px; }
	body.has-ds-mobilebar { padding-bottom: calc(3.5rem + env(safe-area-inset-bottom)); background-color: var(--ds-black); }
	body.has-ds-mobilebar .wp-site-blocks { background-color: var(--ds-white); }
	html.ds-menu-open .ds-mobilebar { display: none; }
}

/* Search results and posts ------------------------------------------------------- */

.ds-results { max-width: var(--ds-measure); }
.ds-results .wp-block-post { padding-block: 1.25rem; border-bottom: 1px solid var(--ds-line); }
.ds-results .wp-block-post-excerpt { margin-top: 0.5rem; color: var(--ds-slate); }
.ds-results .wp-block-post-excerpt__excerpt { margin: 0; }
.ds-results .wp-block-post-title { font-size: 1.25rem; margin: 0; }
.ds-results .wp-block-post-title a { text-decoration: none; }
.wp-block-search__input { min-height: 3rem; border: 1px solid var(--ds-field); border-radius: 6px; padding: 0.6rem 0.85rem; font: inherit; }
.wp-block-search__button { border-radius: 6px; }

/* Icons ---------------------------------------------------------------------------- */

.ds-icon { flex: 0 0 auto; vertical-align: middle; }

/* Editor ---------------------------------------------------------------------------- */

.editor-styles-wrapper .ds-header__panel { display: flex !important; position: static !important; }
.editor-styles-wrapper .ds-nav__sub { display: none !important; }
.editor-styles-wrapper .ds-mobilebar { display: none !important; }

/* Backgrounds you can pick ---------------------------------------------------------
   Sections take a background from Styles (Grey-blue, Light blue, Grey, Navy, Black) and
   DI-SIGN blocks from their Background setting. The home banner and the closing band, dark by
   default, follow the same choices: on a light background their text and buttons turn dark,
   and the patch panel stays a dark unit with its cables darkened to show. */

:is(.ds-home-hero, .ds-cta).is-style-black { background-color: var(--ds-black); }
/* "Panel" is for small boxes: on the banner or the closing band it changes nothing. */
.ds-home-hero.is-style-panel, .ds-cta.is-style-panel { background-color: var(--ds-navy); border: 0; border-radius: 0; height: auto; }
.ds-home-hero.is-style-panel { padding-block: clamp(3rem, 2rem + 5vw, 6.5rem) clamp(3.5rem, 2rem + 7vw, 8rem); }
.ds-cta.is-style-panel { padding-block: clamp(3rem, 2.2rem + 3vw, 5rem); }

:is(.ds-home-hero, .ds-cta):is(.is-style-mist, .is-style-sky, .is-style-grey) {
	--ds-tone-bg: var(--ds-mist);
	background-color: var(--ds-tone-bg);
	background-image: radial-gradient(rgba(1, 107, 163, 0.12) 1.2px, transparent 1.4px);
	background-size: 20px 20px;
	color: var(--ds-ink);
}
:is(.ds-home-hero, .ds-cta).is-style-sky { --ds-tone-bg: var(--ds-sky-bg); }
:is(.ds-home-hero, .ds-cta).is-style-grey { --ds-tone-bg: var(--ds-grey-bg); }
:is(.ds-home-hero, .ds-cta):is(.is-style-mist, .is-style-sky, .is-style-grey) :is(h1, h2, .ds-cta__title) { color: var(--ds-navy); }
:is(.ds-home-hero, .ds-cta):is(.is-style-mist, .is-style-sky, .is-style-grey) :is(.is-style-lead, .ds-cta__text) { color: var(--ds-ink); }
:is(.ds-home-hero, .ds-cta):is(.is-style-mist, .is-style-sky, .is-style-grey) :focus-visible { outline-color: var(--ds-deep); }
:is(.ds-home-hero, .ds-cta):is(.is-style-mist, .is-style-sky, .is-style-grey) .ds-btn--primary { background: var(--ds-deep-2); border-color: var(--ds-deep-2); color: var(--ds-white); }
:is(.ds-home-hero, .ds-cta):is(.is-style-mist, .is-style-sky, .is-style-grey) .ds-btn--primary:hover { background: var(--ds-navy); border-color: var(--ds-navy); color: var(--ds-white); }
:is(.ds-home-hero, .ds-cta):is(.is-style-mist, .is-style-sky, .is-style-grey) .ds-btn--secondary { background: transparent; border-color: var(--ds-deep-2); color: var(--ds-deep-2); }
:is(.ds-home-hero, .ds-cta):is(.is-style-mist, .is-style-sky, .is-style-grey) .ds-btn--secondary:hover { background: var(--ds-deep-2); color: var(--ds-white); }
:is(.ds-home-hero, .ds-cta):is(.is-style-mist, .is-style-sky, .is-style-grey) .ds-btn--ghost { border-color: rgba(10, 16, 66, 0.3); color: var(--ds-ink); }
:is(.ds-home-hero, .ds-cta):is(.is-style-mist, .is-style-sky, .is-style-grey) .ds-btn--ghost:hover { border-color: var(--ds-deep-2); color: var(--ds-deep-2); }
:is(.ds-home-hero, .ds-cta):is(.is-style-mist, .is-style-sky, .is-style-grey) :is(.ds-calllink, .ds-patch__all a),
:is(.ds-home-hero, .ds-cta):is(.is-style-mist, .is-style-sky, .is-style-grey) .is-tone-dark a:not(.ds-btn) { color: var(--ds-deep-2); }

/* The banner's cables: the pale ones darken so every cable shows on a light background. */
.ds-home-hero:is(.is-style-mist, .is-style-sky, .is-style-grey) .ds-patch__cables path:nth-of-type(6n + 2) { stroke: var(--ds-navy); }
.ds-home-hero:is(.is-style-mist, .is-style-sky, .is-style-grey) .ds-patch__cables rect:nth-of-type(6n + 2) { fill: var(--ds-navy); }
.ds-home-hero:is(.is-style-mist, .is-style-sky, .is-style-grey) .ds-patch__cables path:nth-of-type(6n + 4) { stroke: #2A3566; }
.ds-home-hero:is(.is-style-mist, .is-style-sky, .is-style-grey) .ds-patch__cables rect:nth-of-type(6n + 4) { fill: #2A3566; }
.ds-home-hero:is(.is-style-mist, .is-style-sky, .is-style-grey) .ds-patch__cables path:nth-of-type(6n) { stroke: var(--ds-slate); stroke-opacity: 1; }
.ds-home-hero:is(.is-style-mist, .is-style-sky, .is-style-grey) .ds-patch__cables rect:nth-of-type(6n) { fill: var(--ds-slate); }

/* A photo behind a light banner is toned to the light background instead, lightest behind the
   heading, so dark text reads on any photo. */
.ds-home-hero.has-photo:is(.is-style-mist, .is-style-sky, .is-style-grey) { background-image: none; }
.ds-home-hero.has-photo:is(.is-style-mist, .is-style-sky, .is-style-grey) .ds-home-hero__photo { filter: grayscale(1) contrast(1.05) brightness(1.05); mix-blend-mode: multiply; opacity: 0.7; }
:is(.ds-home-hero.has-photo, .ds-home-hero[style*="background-image"]):is(.is-style-mist, .is-style-sky, .is-style-grey)::before {
	background:
		radial-gradient(rgba(1, 107, 163, 0.12) 1.2px, transparent 1.4px) 0 0 / 20px 20px,
		linear-gradient(90deg, color-mix(in srgb, var(--ds-tone-bg) 94%, transparent) 0%, color-mix(in srgb, var(--ds-tone-bg) 88%, transparent) 30%, color-mix(in srgb, var(--ds-tone-bg) 82%, transparent) 50%, color-mix(in srgb, var(--ds-tone-bg) 45%, transparent) 100%);
}
.ds-home-hero.has-photo:is(.is-style-mist, .is-style-sky, .is-style-grey) :is(.ds-btn--secondary, .ds-btn--ghost):not(:hover),
.ds-home-hero.has-photo:is(.is-style-mist, .is-style-sky, .is-style-grey) .ds-patch__all a { background-color: var(--ds-tone-bg); }
.ds-home-hero.has-photo.is-style-black::before {
	background:
		var(--ds-dots) 0 0 / 20px 20px,
		linear-gradient(90deg, rgba(5, 7, 15, 0.88) 0%, rgba(5, 7, 15, 0.78) 30%, rgba(5, 7, 15, 0.72) 50%, rgba(5, 7, 15, 0.38) 100%);
}
.ds-home-hero.has-photo.is-style-black :is(.ds-btn--secondary, .ds-btn--ghost):not(:hover),
.ds-home-hero.has-photo.is-style-black .ds-patch__all a { background-color: var(--ds-black); }
@media (max-width: 781px) {
	:is(.ds-home-hero.has-photo, .ds-home-hero[style*="background-image"]):is(.is-style-mist, .is-style-sky, .is-style-grey)::before {
		background:
			radial-gradient(rgba(1, 107, 163, 0.12) 1.2px, transparent 1.4px) 0 0 / 20px 20px,
			linear-gradient(180deg, color-mix(in srgb, var(--ds-tone-bg) 70%, transparent) 0%, color-mix(in srgb, var(--ds-tone-bg) 88%, transparent) 22%, color-mix(in srgb, var(--ds-tone-bg) 88%, transparent) 62%, color-mix(in srgb, var(--ds-tone-bg) 70%, transparent) 100%);
	}
}

/* Motion ---------------------------------------------------------------------------
   One system, all in this file, and all of it off for visitors who ask their device for less
   motion. The theme of it is a signal arriving:
   - pages hand over to each other, and a card's picture flies into the header of the page it
     opens (view transitions);
   - content arrives with the scroll: cards rise in a cascade and their pictures settle, case
     studies uncover, checklist ticks pop, the handover cable lights up step by step
     (scroll-driven animations, which run off the main thread);
   - small replies to the visitor: a link light on clickable cards, menu underlines, buttons that
     press, questions that slide open.
   On scroll only transform and opacity change. Browsers without scroll-driven animations show
   everything in place. Nothing here applies in the editor: the body class ds-motion is added on
   the site only. */

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

@media screen and (prefers-reduced-motion: no-preference) {
	.ds-motion {
		--ds-ease: cubic-bezier(0.2, 0.75, 0.25, 1);
		--ds-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
		--ds-reach: 240px;
	}

	/* Pages hand over to each other. The header and the phone bar stay put while the page
	   underneath changes. */
	@view-transition { navigation: auto; }
	header.wp-block-template-part { view-transition-name: ds-header; }
	.ds-mobilebar { view-transition-name: ds-mobilebar; }
	::view-transition-group(*) { animation-duration: 0.42s; animation-timing-function: cubic-bezier(0.2, 0.75, 0.25, 1); }
	::view-transition-old(*), ::view-transition-new(*) { height: 100%; object-fit: cover; }
	::view-transition-old(root) { animation: 0.18s cubic-bezier(0.4, 0, 1, 1) both ds-fade-out; }
	::view-transition-new(root) { animation: 0.36s cubic-bezier(0.2, 0.75, 0.25, 1) both ds-page-in; }
	/* The card being opened lends its picture to the next page (named only while pointed at or
	   focused, so the other cards on the page stay where they are). */
	:is(.ds-card, .ds-feature):is(:hover, :focus-within) :is(.ds-card__media, .ds-feature__media) { view-transition-name: var(--vt, none); }

	/* Replies to the visitor. */
	.ds-motion .ds-btn { transition: background-color 0.15s, color 0.15s, border-color 0.15s, transform 0.12s; }
	.ds-motion .ds-btn:active { transform: translateY(1px) scale(0.98); }

	/* Clickable cards: the picture leans in and a link light comes on, like a port coming up. */
	.ds-motion :is(.ds-card:not(.ds-card--static), .ds-feature:not(.ds-feature--static)) :is(.ds-card__media, .ds-feature__media) { position: relative; }
	.ds-motion :is(.ds-card:not(.ds-card--static), .ds-feature:not(.ds-feature--static)) :is(.ds-card__media, .ds-feature__media) > :is(img, svg) { transition: transform 0.6s var(--ds-ease); }
	.ds-motion :is(.ds-card:not(.ds-card--static), .ds-feature:not(.ds-feature--static)):is(:hover, :focus-within) :is(.ds-card__media, .ds-feature__media) > :is(img, svg) { transform: scale(1.045); }
	.ds-motion :is(.ds-card:not(.ds-card--static), .ds-feature:not(.ds-feature--static)) :is(.ds-card__media, .ds-feature__media)::before {
		content: "";
		position: absolute;
		z-index: 2;
		top: 0.85rem;
		right: 0.85rem;
		width: 0.5rem;
		height: 0.5rem;
		border-radius: 50%;
		background: var(--ds-brand);
		box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.85), 0 0 14px 3px rgba(2, 136, 202, 0.55);
		opacity: 0;
		transform: scale(0.3);
		transition: opacity 0.2s, transform 0.3s var(--ds-spring);
		pointer-events: none;
	}
	.ds-motion :is(.ds-card:not(.ds-card--static), .ds-feature:not(.ds-feature--static)):is(:hover, :focus-within) :is(.ds-card__media, .ds-feature__media)::before {
		opacity: 1;
		transform: scale(1);
		animation: ds-blink 0.7s steps(1) 0.2s 2;
	}

	/* Menu: the underline grows under the pointer, menus drop in, the phone menu slides down. */
	html:not(.ds-compact) .ds-motion :is(.ds-nav__link, .ds-nav__button) { position: relative; }
	html:not(.ds-compact) .ds-motion :is(.ds-nav__link:not([aria-current="page"]), .ds-nav__item:not(.is-current) > .ds-nav__button)::after {
		content: "";
		position: absolute;
		left: 0;
		right: 0;
		bottom: 0;
		height: 2px;
		background: var(--ds-sky);
		transform: scaleX(0);
		transform-origin: 0 50%;
		transition: transform 0.25s var(--ds-ease);
	}
	html:not(.ds-compact) .ds-motion :is(.ds-nav__link:not([aria-current="page"]), .ds-nav__item:not(.is-current) > .ds-nav__button):is(:hover, :focus-visible)::after { transform: scaleX(1); }
	.ds-motion .ds-nav__item.is-open > .ds-nav__sub { animation: ds-drop 0.22s var(--ds-ease); }
	html.ds-compact .ds-motion .ds-header.is-open .ds-header__panel { animation: ds-drop 0.28s var(--ds-ease); }
	html.ds-compact .ds-motion .ds-header.is-open :is(.ds-nav__item, .ds-header__actions) { animation: ds-lift 0.36s var(--ds-ease) backwards; }
	html.ds-compact .ds-motion .ds-header.is-open .ds-nav__item:nth-child(2) { animation-delay: 0.03s; }
	html.ds-compact .ds-motion .ds-header.is-open .ds-nav__item:nth-child(3) { animation-delay: 0.06s; }
	html.ds-compact .ds-motion .ds-header.is-open .ds-nav__item:nth-child(4) { animation-delay: 0.09s; }
	html.ds-compact .ds-motion .ds-header.is-open .ds-nav__item:nth-child(5) { animation-delay: 0.12s; }
	html.ds-compact .ds-motion .ds-header.is-open .ds-nav__item:nth-child(6) { animation-delay: 0.15s; }
	html.ds-compact .ds-motion .ds-header.is-open .ds-nav__item:nth-child(n + 7),
	html.ds-compact .ds-motion .ds-header.is-open .ds-header__actions { animation-delay: 0.18s; }

	/* Questions slide open and closed. */
	@supports selector(::details-content) {
		.ds-motion { interpolate-size: allow-keywords; }
		.ds-motion .wp-block-details::details-content {
			block-size: 0;
			overflow: hidden;
			transition: block-size 0.32s var(--ds-ease), content-visibility 0.32s allow-discrete;
		}
		.ds-motion .wp-block-details[open]::details-content { block-size: auto; }
	}

	/* Content arrives with the scroll. Each piece finishes within --ds-reach of scrolling once it
	   comes into view, so it is always settled by the time it is read, on any screen height. */
	@supports (animation-timeline: view()) {
		/* Cards, panels, tiles, photos and drawings rise, a column at a time. */
		.ds-motion main :is(.ds-cards, .ds-features, .ds-areas, .ds-tiles, .ds-brands, .ds-clients, .ds-offices__list) > li,
		.ds-motion main .wp-block-column > .is-style-panel,
		.ds-motion main :is(.wp-block-image, .wp-block-media-text__media, .ds-visual-wrap):not(.is-style-panel *) {
			view-timeline: --ds-reveal block;
			animation: ds-rise var(--ds-ease) backwards;
			animation-timeline: --ds-reveal;
			animation-range: cover calc(var(--ds-d, 0) * 45px) cover calc(var(--ds-reach) + var(--ds-d, 0) * 45px);
		}
		.ds-motion main :is(.ds-cards, .ds-areas, .ds-tiles, .ds-brands, .ds-clients) > li:nth-child(4n + 2),
		.ds-motion main .wp-block-gallery > .wp-block-image:nth-child(4n + 2),
		.ds-motion main .wp-block-column:nth-child(2) > .is-style-panel { --ds-d: 1; }
		.ds-motion main :is(.ds-cards, .ds-areas, .ds-tiles, .ds-brands, .ds-clients) > li:nth-child(4n + 3),
		.ds-motion main .wp-block-gallery > .wp-block-image:nth-child(4n + 3),
		.ds-motion main .wp-block-column:nth-child(3) > .is-style-panel { --ds-d: 2; }
		.ds-motion main :is(.ds-cards, .ds-areas, .ds-tiles, .ds-brands, .ds-clients) > li:nth-child(4n + 4),
		.ds-motion main .wp-block-gallery > .wp-block-image:nth-child(4n + 4),
		.ds-motion main .wp-block-column:nth-child(4) > .is-style-panel { --ds-d: 3; }
		/* Columns stack on phones: one column, or two for the service cards. */
		@media (max-width: 781px) {
			.ds-motion main .wp-block-column > .is-style-panel { --ds-d: 0; }
		}
		@media (max-width: 599px) {
			.ds-motion main :is(.ds-cards, .ds-areas, .ds-tiles, .ds-brands, .ds-clients) > li,
			.ds-motion main .wp-block-gallery > .wp-block-image { --ds-d: 0; }
			.ds-motion main :is(.ds-cards--services, .ds-brands, .ds-clients) > li:nth-child(even),
			.ds-motion main .wp-block-gallery > .wp-block-image:nth-child(even) { --ds-d: 1; }
		}

		/* The picture in a card settles into its frame a little after the card arrives. */
		.ds-motion main :is(.ds-card__media, .ds-feature__media) > :is(img, svg) {
			animation: ds-settle var(--ds-ease) backwards;
			animation-timeline: --ds-reveal;
			animation-range: cover calc(var(--ds-d, 0) * 45px) cover calc(var(--ds-reach) + 140px + var(--ds-d, 0) * 45px);
		}

		/* Case studies uncover from the outer edge towards the story. */
		.ds-motion main .ds-feature__media { position: relative; }
		.ds-motion main .ds-feature__media::after {
			content: "";
			position: absolute;
			inset: 0;
			z-index: 1;
			background: var(--ds-navy);
			transform: scaleX(0);
			transform-origin: 100% 50%;
			pointer-events: none;
			animation: ds-uncover cubic-bezier(0.7, 0, 0.2, 1) backwards;
			animation-timeline: --ds-reveal;
			animation-range: cover 40px cover 320px;
		}
		.ds-motion main .ds-feature:nth-child(even) .ds-feature__media::after { transform-origin: 0 50%; }

		/* Section headings and their introductions lift into place. */
		.ds-motion main :is(.ds-head, .ds-family__head, .ds-inner > h2, .ds-inner > .is-style-intro) {
			animation: ds-lift var(--ds-ease) backwards;
			animation-timeline: view();
			animation-range: cover 0px cover 180px;
		}

		/* Checklists tick themselves off as they scroll by. */
		.ds-motion main .is-style-checklist > li { view-timeline: --ds-item block; }
		.ds-motion main .is-style-checklist > li::before {
			animation: ds-tick var(--ds-spring) backwards;
			animation-timeline: --ds-item;
			animation-range: cover 30px cover 140px;
		}

		/* Numbered steps: each number pops, then the line runs down to the next. */
		.ds-motion main :is(.is-style-steps, .is-style-cable-steps) > li { view-timeline: --ds-item block; }
		.ds-motion main :is(.is-style-steps, .is-style-cable-steps) > li::before {
			animation: ds-node var(--ds-spring) backwards;
			animation-timeline: --ds-item;
			animation-range: cover 40px cover 150px;
		}
		.ds-motion main :is(.is-style-steps, .is-style-cable-steps) > li::after {
			transform-origin: 50% 0;
			animation: ds-draw-y linear backwards;
			animation-timeline: --ds-item;
			animation-range: cover 120px cover 300px;
		}
		/* On wide screens the handover cable runs left to right: a signal travels along it, lighting
		   each step in turn. */
		@media (min-width: 900px) {
			.ds-motion main .is-style-cable-steps { view-timeline: --ds-cable block; }
			.ds-motion main .is-style-cable-steps > li::before {
				animation-timeline: --ds-cable;
				animation-range: cover calc(70px + var(--ds-n, 0) * 55px) cover calc(140px + var(--ds-n, 0) * 55px);
			}
			.ds-motion main .is-style-cable-steps > li::after {
				transform-origin: 0 50%;
				animation-name: ds-draw-x;
				animation-timeline: --ds-cable;
				animation-range: cover calc(120px + var(--ds-n, 0) * 55px) cover calc(175px + var(--ds-n, 0) * 55px);
			}
			.ds-motion main .is-style-cable-steps > li:nth-child(2) { --ds-n: 1; }
			.ds-motion main .is-style-cable-steps > li:nth-child(3) { --ds-n: 2; }
			.ds-motion main .is-style-cable-steps > li:nth-child(4) { --ds-n: 3; }
			.ds-motion main .is-style-cable-steps > li:nth-child(5) { --ds-n: 4; }
			.ds-motion main .is-style-cable-steps > li:nth-child(6) { --ds-n: 5; }
			.ds-motion main .is-style-cable-steps > li:nth-child(n + 7) { --ds-n: 6; }
		}

		/* The closing band's top line draws across as it arrives. */
		.ds-motion .ds-cta { position: relative; border-top-color: transparent; view-timeline: --ds-cta block; }
		.ds-motion .ds-cta::before {
			content: "";
			position: absolute;
			left: 0;
			right: 0;
			top: -4px;
			height: 4px;
			background: var(--ds-brand);
			transform-origin: 0 50%;
			animation: ds-draw-x var(--ds-ease) backwards;
			animation-timeline: --ds-cta;
			animation-range: cover 0px cover 320px;
		}

		/* Anything a keyboard user lands on shows at once. */
		.ds-motion main :is(.ds-cards, .ds-features, .ds-areas, .ds-tiles, .ds-brands, .ds-clients, .ds-offices__list) > li:focus-within,
		.ds-motion main .wp-block-column > .is-style-panel:focus-within,
		.ds-motion main :is(.ds-head, .ds-family__head):focus-within,
		.ds-motion main :is(.ds-card__media, .ds-feature__media):focus-within > :is(img, svg) { animation: none; }
	}

	/* Reading progress: a signal line along the bottom of the header on long pages. */
	@supports (animation-timeline: scroll()) {
		:is(.single-ds_service, .single-ds_project, .single-ds_area, .single-ds_sector, .single-post).ds-motion header.wp-block-template-part::after {
			content: "";
			position: absolute;
			left: 0;
			right: 0;
			bottom: 0;
			height: 3px;
			background: linear-gradient(90deg, var(--ds-brand), var(--ds-sky));
			transform-origin: 0 50%;
			pointer-events: none;
			animation: ds-draw-x linear both;
			animation-timeline: scroll(root block);
		}
	}
}

@keyframes ds-fade-out { to { opacity: 0; } }
@keyframes ds-page-in { from { opacity: 0; transform: translateY(12px); } }
@keyframes ds-rise { from { opacity: 0; transform: translateY(32px); } }
@keyframes ds-lift { from { opacity: 0; transform: translateY(14px); } }
@keyframes ds-drop { from { opacity: 0; transform: translateY(-8px); } }
@keyframes ds-settle { from { transform: scale(1.1); } }
@keyframes ds-uncover { from { transform: scaleX(1); } }
@keyframes ds-tick { from { opacity: 0; transform: scale(0.3) rotate(-25deg); } }
@keyframes ds-node { from { opacity: 0; transform: scale(0.4); } }
@keyframes ds-draw-x { from { transform: scaleX(0); } }
@keyframes ds-draw-y { from { transform: scaleY(0); } }
@keyframes ds-blink { 0%, 100% { opacity: 1; } 30% { opacity: 0.25; } 60% { opacity: 1; } 80% { opacity: 0.4; } }

/* Print ---------------------------------------------------------------------------- */

@media print {
	.ds-header, .ds-mobilebar, .ds-cta, .ds-footer, .ds-patch__cables, .ds-home-hero__photo, .ds-home-hero::before { display: none !important; }
	.ds-hero, .ds-home-hero { background: none !important; color: #000 !important; }
	.ds-hero *, .ds-home-hero * { color: #000 !important; }
}