/* =========================================================================
   Superduper Co — Warm Operator design system
   =========================================================================
   The single source of global styling for the site.

   Contents
     1.  Fonts
     2.  Design tokens
     3.  Base elements
     4.  Layout primitives
     5.  Type utilities
     6.  Buttons and links
     7.  Header and navigation
     8.  Footer
     9.  Components
     10. Hero artwork
     11. Elementor bridge
     12. Accessibility and motion

   Conventions
     --sd-*  design token, declared once in :root, re-declared per breakpoint
     .sd-*   component or utility class, applied via Elementor's CSS Classes
             field or directly in theme templates

   Rule: components consume tokens. A raw hex outside :root is a bug, with
   the single exception of the hero artwork in section 10, which is a fixed
   illustration rather than a themeable surface.

   Breakpoints: 1100 (laptop), 900 (tablet), 600 (mobile).
   ====================================================================== */


/* =========================================================================
   1. Fonts
   ====================================================================== */

@font-face {
	font-family: 'Inter';
	font-style: normal;
	font-weight: 100 900;
	font-display: swap;
	src: url('../fonts/Inter-Variable-latin.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: 'Inter';
	font-style: normal;
	font-weight: 100 900;
	font-display: swap;
	src: url('../fonts/Inter-Variable-latin-ext.woff2') format('woff2');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}


/* =========================================================================
   2. Design tokens
   ====================================================================== */

:root {
	/* --- Colour: surfaces ------------------------------------------- */
	--sd-bg:              #FAF7EF;  /* page ground, header */
	--sd-bg-alt:          #F1EEE5;  /* alternating bands: work, FAQ */
	--sd-surface:         #F2EEE3;  /* cards and tiles */
	--sd-surface-warm:    #F4E7DA;  /* warm secondary panels, icon wells */
	--sd-surface-raised:  #FFFDF5;  /* floating elements above a band */

	/* --- Colour: ink ------------------------------------------------ */
	--sd-text-primary:    #232623;
	--sd-text-secondary:  #626761;  /* 5.45:1 on --sd-bg */
	--sd-ink-band:        #232B24;  /* dark full-bleed band, footer */
	--sd-on-ink:          #F7F5E9;
	--sd-on-ink-muted:    #C7CDBF;
	--sd-on-ink-faint:    #AEB9A7;

	/* --- Colour: coral ----------------------------------------------
	   Three coral values, by contrast role. See docs/design-system.md.
	     --sd-coral          fills and graphics only, no contrast duty
	     --sd-coral-display  large text 40px and up, 3.78:1 on --sd-bg
	     --sd-coral-text     normal text and interaction, 5.16:1 on --sd-bg
	   ---------------------------------------------------------------- */
	--sd-coral:           #E9684F;
	--sd-coral-display:   #D5543E;
	--sd-coral-text:      #B8402B;
	--sd-coral-hover:     #D4523B;
	--sd-coral-band:      #ED805F;  /* full-bleed CTA band */
	--sd-coral-on-ink:    #F28369;  /* coral on --sd-ink-band, 5.62:1 */
	--sd-on-coral:        #212520;  /* text on coral, 4.89:1 */

	/* --- Colour: sage ------------------------------------------------ */
	--sd-sage:            #E4E9D5;
	--sd-sage-border:     #D4DDC0;
	--sd-sage-tile:       #F8FAEE;
	--sd-sage-deep:       #2C3A28;  /* accent tile in the automation flow */
	--sd-on-sage-deep:    #EDF1DE;
	--sd-sage-ink:        #5E6C53;

	/* --- Colour: lines ------------------------------------------------ */
	--sd-border:          #DEDFD4;
	--sd-border-card:     #E5E0D4;
	--sd-border-on-ink:   rgba(255, 255, 255, 0.15);

	/* --- Colour: focus ------------------------------------------------ */
	--sd-focus:           #B8402B;
	--sd-focus-on-ink:    #F7F5E9;

	/* --- Type -------------------------------------------------------- */
	--sd-font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

	--sd-text-h1:      76px;
	--sd-text-h2:      48px;
	--sd-text-h3:      28px;
	--sd-text-h4:      20px;
	--sd-text-lead:    18px;
	--sd-text-body:    17px;
	--sd-text-small:   15px;
	--sd-text-eyebrow: 12px;
	--sd-text-ui:      14px;

	--sd-weight-display: 750;
	--sd-weight-heading: 650;
	--sd-weight-medium:  550;
	--sd-weight-body:    400;

	--sd-lh-display: 1.06;
	--sd-lh-heading: 1.12;
	--sd-lh-body:    1.6;

	--sd-track-h1: -0.06em;
	--sd-track-h2: -0.04em;
	--sd-track-h3: -0.03em;

	/* --- Space (8px rhythm) ------------------------------------------ */
	--sd-space-3xs:  8px;
	--sd-space-2xs: 16px;
	--sd-space-xs:  24px;
	--sd-space-sm:  32px;
	--sd-space-md:  48px;
	--sd-space-lg:  64px;
	--sd-space-xl:  96px;

	/* --- Layout ------------------------------------------------------ */
	--sd-content-max: 1248px;
	/* Comfortable reading width, roughly 70 characters at body size. Used by
	   .sd-prose-col. Deliberately a length, not a ch value: Inter's "0" is
	   wide, so 62ch measured ~80 characters. */
	--sd-measure: 600px;
	--sd-gutter:       144px;  /* total, both sides */
	--sd-section-y:     96px;
	--sd-grid-gap:      28px;
	--sd-split-gap:     54px;
	--sd-header-h:      94px;

	/* --- Radii ------------------------------------------------------- */
	--sd-radius-btn:    7px;
	--sd-radius-card:  15px;
	--sd-radius-panel: 16px;
	--sd-radius-stage: 26px;
	--sd-radius-well:  12px;

	/* --- Motion ------------------------------------------------------ */
	--sd-ease: cubic-bezier(0.2, 0.6, 0.3, 1);
	--sd-dur:  0.18s;
}

/* Laptop */
@media (max-width: 1100px) {
	:root {
		--sd-text-h1: 62px;
		--sd-text-h2: 44px;
		--sd-text-h3: 26px;
		--sd-text-h4: 19px;
		--sd-gutter: 80px;
		--sd-section-y: 80px;
		--sd-split-gap: 40px;
	}
}

/* Tablet */
@media (max-width: 900px) {
	:root {
		--sd-text-h1: 52px;
		--sd-text-h2: 40px;
		--sd-text-h3: 24px;
		--sd-text-h4: 18px;
		--sd-text-lead: 17px;
		--sd-text-body: 16px;
		--sd-text-small: 14px;
		--sd-gutter: 56px;
		--sd-section-y: 72px;
		--sd-split-gap: 40px;
		--sd-grid-gap: 20px;
	}
}

/* Mobile */
@media (max-width: 600px) {
	:root {
		--sd-text-h1: 40px;
		--sd-text-h2: 32px;
		--sd-text-h3: 22px;
		--sd-text-h4: 17px;
		--sd-text-lead: 16px;
		--sd-gutter: 40px;
		--sd-section-y: 58px;
		--sd-split-gap: 35px;
		--sd-grid-gap: 16px;
		--sd-header-h: 80px;
	}
}


/* =========================================================================
   3. Base elements
   ====================================================================== */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
	margin: 0;
	background: var(--sd-bg);
	color: var(--sd-text-primary);
	font-family: var(--sd-font-sans);
	font-size: var(--sd-text-body);
	line-height: var(--sd-lh-body);
	font-weight: var(--sd-weight-body);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	font-synthesis-weight: none;
	overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6 {
	margin: 0;
	font-family: var(--sd-font-sans);
	font-weight: var(--sd-weight-heading);
	line-height: var(--sd-lh-heading);
	letter-spacing: var(--sd-track-h2);
	color: var(--sd-text-primary);
	text-wrap: balance;
}

h1 {
	font-size: var(--sd-text-h1);
	font-weight: var(--sd-weight-display);
	line-height: var(--sd-lh-display);
	letter-spacing: var(--sd-track-h1);
}
h2 { font-size: var(--sd-text-h2); }
h3 { font-size: var(--sd-text-h3); letter-spacing: var(--sd-track-h3); }
h4 { font-size: var(--sd-text-h4); letter-spacing: -0.02em; line-height: 1.3; }

p { margin: 0 0 var(--sd-space-2xs); }
p:last-child { margin-bottom: 0; }

a { color: inherit; text-decoration: none; }
a:hover { text-decoration: none; }

img, svg, video { max-width: 100%; height: auto; display: block; }

button {
	font: inherit;
	color: inherit;
	background: none;
	border: 0;
	padding: 0;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
}

ul, ol { margin: 0; padding: 0; }
.sd-nav__list, .sd-nav__submenu, .sd-footer__links, .sd-footer__legal { list-style: none; }

strong, b { font-weight: var(--sd-weight-heading); }

::selection { background: var(--sd-coral); color: var(--sd-on-coral); }


/* =========================================================================
   4. Layout primitives
   ====================================================================== */

.sd-container {
	width: min(var(--sd-content-max), 100% - var(--sd-gutter));
	margin-inline: auto;
}

.sd-section {
	padding-block: var(--sd-section-y);
}

.sd-section--tight { padding-block: calc(var(--sd-section-y) * 0.6); }
.sd-section--flush-top { padding-top: 0; }
.sd-section--flush-bottom { padding-bottom: 0; }

/* Full-bleed colour bands. Applied to the outer Elementor container; the
   inner container carries .sd-container. */
.sd-band--alt   { background: var(--sd-bg-alt); }
.sd-band--sage  { background: var(--sd-sage); }
.sd-band--coral { background: var(--sd-coral-band); color: var(--sd-on-coral); }

.sd-band--ink {
	background: var(--sd-ink-band);
	color: var(--sd-on-ink);
}
.sd-band--ink h1, .sd-band--ink h2, .sd-band--ink h3, .sd-band--ink h4,
.sd-band--ink .elementor-heading-title { color: var(--sd-on-ink); }
.sd-band--ink p { color: var(--sd-on-ink-muted); }
.sd-band--ink .sd-eyebrow { color: var(--sd-on-ink-faint); }
.sd-band--ink .sd-coral { color: var(--sd-coral-on-ink); }



.sd-band--coral h1, .sd-band--coral h2, .sd-band--coral h3,
.sd-band--coral .elementor-heading-title,
.sd-band--coral p, .sd-band--coral .sd-eyebrow { color: var(--sd-on-coral); }

/* Two-column split */
.sd-split {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--sd-split-gap);
	align-items: center;
}
.sd-split--top { align-items: start; }
.sd-split > *, .sd-grid-2 > *, .sd-grid-3 > * { min-width: 0; }

/* Card / tile grids */
.sd-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sd-grid-gap); }
.sd-grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sd-grid-gap); }

@media (max-width: 900px) {
	.sd-split { grid-template-columns: 1fr; }
	.sd-grid-3 { grid-template-columns: 1fr 1fr; }
	/* An odd third card spans the full row rather than sitting alone. */
	.sd-grid-3 > :last-child:nth-child(3) { grid-column: span 2; }
}

@media (max-width: 600px) {
	.sd-grid-3, .sd-grid-2 { grid-template-columns: 1fr; }
	.sd-grid-3 > :last-child:nth-child(3) { grid-column: auto; }
}


/* =========================================================================
   5. Type utilities
   Each rule also targets the element Elementor renders inside the widget,
   so the same class works in a template and on an Elementor widget.
   ====================================================================== */

.sd-eyebrow,
.sd-eyebrow p,
.sd-eyebrow .elementor-heading-title {
	font-size: var(--sd-text-eyebrow);
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	line-height: 1.4;
	color: var(--sd-text-secondary);
	margin: 0;
}

.sd-h1, .sd-h1 .elementor-heading-title {
	font-size: var(--sd-text-h1);
	font-weight: var(--sd-weight-display);
	line-height: var(--sd-lh-display);
	letter-spacing: var(--sd-track-h1);
}

.sd-h2, .sd-h2 .elementor-heading-title {
	font-size: var(--sd-text-h2);
	font-weight: var(--sd-weight-heading);
	line-height: var(--sd-lh-heading);
	letter-spacing: var(--sd-track-h2);
}

.sd-h3, .sd-h3 .elementor-heading-title {
	font-size: var(--sd-text-h3);
	font-weight: var(--sd-weight-heading);
	line-height: 1.2;
	letter-spacing: var(--sd-track-h3);
}

.sd-h4, .sd-h4 .elementor-heading-title {
	font-size: var(--sd-text-h4);
	font-weight: var(--sd-weight-heading);
	line-height: 1.3;
	letter-spacing: -0.02em;
}

.sd-lead, .sd-lead p {
	font-size: var(--sd-text-lead);
	line-height: 1.7;
	color: var(--sd-text-primary);
}

.sd-body, .sd-body p { font-size: var(--sd-text-body); }

.sd-small, .sd-small p {
	font-size: var(--sd-text-small);
	line-height: 1.65;
	color: var(--sd-text-secondary);
}

.sd-muted, .sd-muted p { color: var(--sd-text-secondary); }

.sd-measure, .sd-measure p { max-width: 52ch; }

/* Coral emphasis inside a heading. Display sizes only. */
.sd-coral { color: var(--sd-coral-display); }
.sd-coral-text { color: var(--sd-coral-text); }

/* Underline used on the closing CTA headline */
.sd-underline {
	box-shadow: inset 0 -2px 0 0 currentColor;
	padding-bottom: 2px;
}

.sd-sr-only {
	position: absolute;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}


/* =========================================================================
   6. Buttons and links
   ====================================================================== */

.sd-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--sd-space-xs);
	min-height: 54px;
	padding: 15px 22px;
	border-radius: var(--sd-radius-btn);
	background: var(--sd-coral);
	color: var(--sd-on-coral);
	font-size: var(--sd-text-ui);
	font-weight: var(--sd-weight-heading);
	line-height: 1.4;
	white-space: nowrap;
	text-decoration: none;
	border: 1px solid transparent;
	transition: background var(--sd-dur) var(--sd-ease),
	            transform var(--sd-dur) var(--sd-ease),
	            color var(--sd-dur) var(--sd-ease);
}
.sd-btn .sd-icon { width: 20px; height: 20px; flex: none; }
.sd-btn:hover { background: var(--sd-coral-hover); transform: translateY(-2px); }
.sd-btn:active { transform: translateY(0); }

.sd-btn--ink {
	background: var(--sd-ink-band);
	color: var(--sd-on-ink);
}
.sd-btn--ink:hover { background: #303a30; }

.sd-btn--ghost {
	background: transparent;
	color: var(--sd-text-primary);
	border-color: var(--sd-border);
}
.sd-btn--ghost:hover { background: var(--sd-surface); border-color: var(--sd-text-secondary); }

.sd-btn--light { background: var(--sd-bg); color: var(--sd-text-primary); }
.sd-btn--light:hover { background: #fff; }

.sd-btn--block { width: 100%; }

/* Quiet inline action, used beside a primary button */
.sd-btn-quiet {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	min-height: 54px;
	font-size: var(--sd-text-ui);
	font-weight: var(--sd-weight-heading);
	color: inherit;
	background: none;
	border: 0;
	transition: color var(--sd-dur) var(--sd-ease);
}
.sd-btn-quiet .sd-icon { width: 18px; height: 18px; flex: none; transition: transform var(--sd-dur) var(--sd-ease); }
.sd-btn-quiet:hover { color: var(--sd-coral-text); }
.sd-btn-quiet:hover .sd-icon { transform: translateX(3px); }

/* Card footer link with trailing arrow */
.sd-link {
	display: inline-flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--sd-space-2xs);
	font-size: var(--sd-text-ui);
	font-weight: var(--sd-weight-heading);
	color: var(--sd-text-primary);
	transition: color var(--sd-dur) var(--sd-ease);
}
.sd-link .sd-icon { width: 19px; height: 19px; flex: none; transition: transform var(--sd-dur) var(--sd-ease); }
.sd-link:hover { color: var(--sd-coral-text); }
.sd-link:hover .sd-icon { transform: translate(3px, -3px); }
.sd-link--wide { width: 100%; }

.sd-icon { display: inline-block; vertical-align: middle; }


/* =========================================================================
   7. Header and navigation
   ====================================================================== */

.sd-skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 999;
	padding: 14px 20px;
	background: var(--sd-ink-band);
	color: var(--sd-on-ink);
	font-size: var(--sd-text-ui);
	font-weight: var(--sd-weight-heading);
	border-radius: 0 0 var(--sd-radius-btn) 0;
}
.sd-skip-link:focus { left: 0; }

.sd-header {
	position: relative;
	z-index: 100;
	background: var(--sd-bg);
	border-bottom: 1px solid var(--sd-border);
}

.sd-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--sd-space-md);
	height: var(--sd-header-h);
}

/* --- Wordmark ----------------------------------------------------- */

.sd-brand { flex: none; text-decoration: none; color: var(--sd-text-primary); }

.sd-wordmark {
	display: inline-flex;
	align-items: baseline;
	white-space: nowrap;
	font-size: 30px;
	font-weight: 850;
	line-height: 1;
	letter-spacing: -0.063em;
}
.sd-wordmark__co {
	margin-left: 4px;
	font-size: 0.75em;
	font-weight: 550;
	letter-spacing: -0.033em;
	color: var(--sd-coral);
}

/* --- Nav ---------------------------------------------------------- */

.sd-nav {
	display: flex;
	align-items: center;
	gap: var(--sd-space-md);
	margin-left: auto;
}

.sd-nav__list {
	display: flex;
	align-items: center;
	gap: 28px;
	margin: 0;
}

.sd-nav__item { position: relative; display: flex; align-items: center; }

.sd-nav__link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: var(--sd-text-ui);
	font-weight: var(--sd-weight-medium);
	color: var(--sd-text-primary);
	white-space: nowrap;
	padding-block: 6px;
	position: relative;
	transition: color var(--sd-dur) var(--sd-ease);
}
.sd-nav__link:hover { color: var(--sd-coral-text); }

.sd-nav__item.is-current > .sd-nav__link::after {
	content: '';
	position: absolute;
	left: 0; right: 0;
	bottom: -4px;
	height: 2px;
	background: currentColor;
}

.sd-nav__chevron {
	width: 14px; height: 14px;
	flex: none;
	transition: transform var(--sd-dur) var(--sd-ease);
}
.sd-nav__toggle[aria-expanded="true"] .sd-nav__chevron { transform: rotate(180deg); }

.sd-nav__toggle--adjacent { padding: 6px 2px; color: var(--sd-text-primary); }

/* --- Submenu ------------------------------------------------------ */

.sd-nav__submenu {
	position: absolute;
	top: calc(100% + 14px);
	left: -18px;
	min-width: 268px;
	padding: 10px;
	margin: 0;
	background: var(--sd-surface-raised);
	border: 1px solid var(--sd-border-card);
	border-radius: var(--sd-radius-card);
	box-shadow: 0 18px 44px rgba(57, 68, 37, 0.12);
	display: none;
}
.sd-nav__item--has-children.is-open > .sd-nav__submenu { display: block; }

.sd-nav__submenu::before {
	/* keeps the pointer path from the toggle to the panel hoverable */
	content: '';
	position: absolute;
	inset: -14px 0 100% 0;
}

.sd-nav__sublink {
	display: block;
	padding: 10px 14px;
	border-radius: var(--sd-radius-btn);
	font-size: var(--sd-text-ui);
	font-weight: var(--sd-weight-medium);
	color: var(--sd-text-primary);
	transition: background var(--sd-dur) var(--sd-ease), color var(--sd-dur) var(--sd-ease);
}
.sd-nav__sublink:hover { background: var(--sd-surface); color: var(--sd-coral-text); }

.sd-nav__cta { min-height: 44px; padding: 12px 20px; gap: 20px; }
.sd-nav__cta .sd-icon { width: 18px; height: 18px; }

/* --- Mobile toggle ------------------------------------------------ */

.sd-menu-toggle {
	display: none;
	align-items: center;
	justify-content: flex-end;
	gap: 9px;
	/* The visible icon stays small; the hit area does not. 44x44 minimum. */
	min-width: 44px;
	min-height: 44px;
	padding-block: 10px;
	padding-inline: 0;
	margin-left: auto;
	font-size: var(--sd-text-ui);
	font-weight: var(--sd-weight-heading);
	color: var(--sd-text-primary);
}
.sd-menu-toggle__bars {
	display: inline-flex;
	flex-direction: column;
	justify-content: center;
	gap: 5px;
	width: 20px; height: 14px;
}
.sd-menu-toggle__bars span {
	display: block;
	height: 2px;
	background: currentColor;
	border-radius: 2px;
	transition: transform var(--sd-dur) var(--sd-ease), opacity var(--sd-dur) var(--sd-ease);
}
.sd-menu-toggle[aria-expanded="true"] .sd-menu-toggle__bars span:first-child {
	transform: translateY(3.5px) rotate(45deg);
}
.sd-menu-toggle[aria-expanded="true"] .sd-menu-toggle__bars span:last-child {
	transform: translateY(-3.5px) rotate(-45deg);
}

/* --- Below the nav breakpoint ------------------------------------- */

@media (max-width: 900px) {
	.sd-menu-toggle { display: inline-flex; }

	.sd-nav {
		display: none;
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		flex-direction: column;
		align-items: stretch;
		gap: var(--sd-space-xs);
		padding: var(--sd-space-xs) calc(var(--sd-gutter) / 2) var(--sd-space-sm);
		background: var(--sd-bg);
		border-bottom: 1px solid var(--sd-border);
		box-shadow: 0 18px 40px rgba(35, 38, 35, 0.10);
		max-height: calc(100vh - var(--sd-header-h));
		overflow-y: auto;
	}
	.sd-nav.is-open { display: flex; }

	.sd-nav__list { flex-direction: column; align-items: stretch; gap: 2px; }
	.sd-nav__item { flex-wrap: wrap; }

	.sd-nav__link {
		font-size: 18px;
		font-weight: var(--sd-weight-heading);
		padding-block: 12px;
		width: 100%;
		justify-content: space-between;
	}
	.sd-nav__item.is-current > .sd-nav__link::after { display: none; }
	.sd-nav__item.is-current > .sd-nav__link { color: var(--sd-coral-text); }

	.sd-nav__chevron { width: 18px; height: 18px; }

	.sd-nav__submenu {
		position: static;
		width: 100%;
		min-width: 0;
		border: 0;
		box-shadow: none;
		background: transparent;
		padding: 0 0 8px 0;
		border-left: 1px solid var(--sd-border);
		margin-left: 2px;
	}
	.sd-nav__submenu::before { display: none; }
	.sd-nav__sublink { padding: 9px 14px; font-size: 15px; }

	.sd-nav__cta { align-self: flex-start; }
}

@media (max-width: 600px) {
	.sd-nav { padding-inline: calc(var(--sd-gutter) / 2); }
	.sd-nav__cta { width: 100%; align-self: stretch; }
	.sd-menu-toggle__label { display: none; }
	.sd-menu-toggle { justify-content: center; }
}

/* Lock scroll while the mobile panel is open */
body.sd-nav-open { overflow: hidden; }


/* =========================================================================
   8. Footer
   ====================================================================== */

.sd-footer {
	background: var(--sd-ink-band);
	color: var(--sd-on-ink);
	padding-top: 60px;
}

.sd-footer__top {
	display: grid;
	grid-template-columns: 1.5fr 1fr 1fr;
	gap: 100px;
	padding-bottom: var(--sd-space-md);
}

.sd-footer__tagline {
	margin-top: 22px;
	font-size: 13px;
	line-height: 1.7;
	color: var(--sd-on-ink-muted);
}

.sd-footer__col { display: flex; flex-direction: column; gap: 9px; font-size: 13px; }
.sd-footer__col a { color: var(--sd-on-ink); transition: color var(--sd-dur) var(--sd-ease); }
.sd-footer__col a:hover { color: var(--sd-coral-on-ink); }

.sd-footer__label {
	font-size: 11px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	font-weight: 700;
	color: var(--sd-on-ink-faint);
	margin-bottom: 10px;
}

.sd-footer__links { display: flex; flex-direction: column; gap: 9px; }

.sd-footer__address { color: var(--sd-on-ink-muted); line-height: 1.6; }

.sd-footer__bottom {
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-wrap: wrap;
	gap: var(--sd-space-2xs);
	border-top: 1px solid var(--sd-border-on-ink);
	padding-block: 23px;
	font-size: 12px;
	color: var(--sd-on-ink-faint);
}
.sd-footer__bottom a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.sd-footer__bottom a:hover { color: var(--sd-on-ink); }

.sd-footer__bottom-right { display: flex; align-items: center; gap: var(--sd-space-2xs); flex-wrap: wrap; }
.sd-footer__legal { display: flex; gap: var(--sd-space-2xs); }

@media (max-width: 900px) {
	.sd-footer__top { grid-template-columns: 1fr 1fr; gap: var(--sd-space-md); }
	.sd-footer__brand { grid-column: span 2; }
}

@media (max-width: 600px) {
	.sd-footer { padding-top: var(--sd-space-md); }
	.sd-footer__top { grid-template-columns: 1fr; gap: var(--sd-space-sm); }
	.sd-footer__brand { grid-column: auto; }
	.sd-footer__bottom { flex-direction: column; align-items: flex-start; }
}


/* =========================================================================
   9. Components
   ====================================================================== */

/* --- Section header ------------------------------------------------ */

.sd-section-head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 60px;
	margin-bottom: 46px;
}
.sd-section-head__intro { flex: 1 1 auto; display: flex; flex-direction: column; }
.sd-section-head .sd-eyebrow { margin-bottom: 17px; }
.sd-section-head__note {
	max-width: 355px;
	flex: 0 1 355px;
	font-size: var(--sd-text-body);
	line-height: 1.65;
	padding-bottom: 4px;
	color: var(--sd-text-primary);
}

@media (max-width: 900px) {
	.sd-section-head { flex-direction: column; align-items: flex-start; gap: 20px; margin-bottom: 32px; }
	.sd-section-head__note { max-width: 580px; flex: 1 1 auto; padding-bottom: 0; }
}
@media (max-width: 600px) {
	.sd-section-head { margin-bottom: 30px; gap: 19px; }
	.sd-section-head__note { font-size: var(--sd-text-small); }
}

/* --- Icon well ------------------------------------------------------ */

.sd-icon-well {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 48px; height: 48px;
	flex: none;
	background: var(--sd-sage);
	border-radius: 10px;
	color: var(--sd-text-primary);
}
.sd-icon-well .sd-icon { width: 25px; height: 25px; }
.sd-icon-well--warm { background: var(--sd-surface-warm); }

/* --- Service card --------------------------------------------------- */

.sd-service-card {
	position: relative;
	display: flex;
	flex-direction: column;
	padding: 28px;
	background: var(--sd-surface);
	border: 1px solid var(--sd-border-card);
	border-radius: var(--sd-radius-card);
	transition: border-color var(--sd-dur) var(--sd-ease), transform var(--sd-dur) var(--sd-ease);
}
.sd-service-card:hover { border-color: var(--sd-coral); transform: translateY(-2px); }

.sd-service-card__no {
	position: absolute;
	top: 30px; right: 27px;
	font-size: 11px;
	font-variant-numeric: tabular-nums;
	color: var(--sd-text-secondary);
}
.sd-service-card__title { margin-top: var(--sd-space-md); }
.sd-service-card__body, .sd-service-card__body p { color: var(--sd-text-secondary); font-size: var(--sd-text-small); }
.sd-service-card__body { margin-top: 12px; }
.sd-service-card__foot { margin-top: auto; padding-top: var(--sd-space-sm); }
.sd-service-card__foot .sd-link { width: 100%; font-size: 13px; }

/* --- Feature panel (automation teaser) ------------------------------ */

.sd-panel {
	background: var(--sd-sage);
	border: 1px solid var(--sd-sage-border);
	border-radius: var(--sd-radius-panel);
	padding: 42px;
	display: grid;
	grid-template-columns: 1fr 1.1fr;
	gap: 60px;
	align-items: center;
}
.sd-panel__body, .sd-panel__body p { max-width: 405px; color: var(--sd-text-primary); font-size: var(--sd-text-small); }
.sd-panel__copy .sd-eyebrow { margin-bottom: 15px; }
.sd-panel__title, .sd-panel__title .elementor-heading-title { font-size: 36px; }
.sd-panel__title { margin-bottom: 18px; }
.sd-panel__body { margin-bottom: 22px; }
.sd-panel__copy { display: flex; flex-direction: column; align-items: flex-start; }

.sd-flow {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	position: relative;
	padding-bottom: 42px;
}
.sd-flow__step {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 17px;
	min-height: 124px;
	width: 133px;
	padding: 10px;
	background: var(--sd-sage-tile);
	border-radius: var(--sd-radius-well);
	font-size: 12px;
	font-weight: var(--sd-weight-heading);
	text-align: center;
}
.sd-flow__step .sd-icon { width: 26px; height: 26px; }
.sd-flow__step--human { background: var(--sd-sage-deep); color: var(--sd-on-sage-deep); }
.sd-flow__arrow { color: var(--sd-sage-ink); flex: none; display: flex; }
.sd-flow__arrow .sd-icon { width: 18px; height: 18px; }
.sd-flow__caption {
	position: absolute;
	bottom: 0; left: 0; right: 0;
	text-align: center;
	font-size: 11px;
	color: var(--sd-sage-ink);
}

@media (max-width: 1100px) {
	.sd-panel { gap: 36px; padding: 34px; }
	.sd-panel__title, .sd-panel__title .elementor-heading-title { font-size: 30px; }
	.sd-flow__step { width: auto; flex: 1 1 0; }
}
@media (max-width: 900px) {
	.sd-panel { grid-template-columns: 1fr; gap: var(--sd-space-sm); }
}
@media (max-width: 600px) {
	.sd-panel { padding: var(--sd-space-xs); }
	.sd-panel__title, .sd-panel__title .elementor-heading-title { font-size: 26px; }
	.sd-flow { flex-direction: column; align-items: stretch; padding-bottom: 34px; }
	.sd-flow__step { width: 100%; min-height: 84px; flex-direction: row; justify-content: flex-start; gap: 14px; text-align: left; padding: 14px 18px; }
	.sd-flow__arrow { justify-content: center; transform: rotate(90deg); }
}

/* --- Case study card ------------------------------------------------ */

.sd-case-card { display: flex; flex-direction: column; }

.sd-case-card__cover {
	position: relative;
	height: 340px;
	border-radius: 14px;
	overflow: hidden;
	background: var(--sd-surface);
	display: block;
}
.sd-case-card__cover img { width: 100%; height: 100%; object-fit: cover; }

.sd-case-card__tag {
	position: absolute;
	top: 27px; left: 30px;
	z-index: 2;
	font-size: 10px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	font-weight: 700;
	color: var(--sd-on-ink);
	text-shadow: 0 1px 8px rgba(0, 0, 0, 0.45);
}
.sd-case-card__line {
	position: absolute;
	bottom: 26px; left: 30px; right: 70px;
	z-index: 2;
	font-size: 12px;
	color: var(--sd-on-ink);
	text-shadow: 0 1px 8px rgba(0, 0, 0, 0.45);
}
.sd-case-card__cover::after {
	content: '';
	position: absolute;
	inset: 0;
	/* Two pixel-based bands rather than one percentage gradient. The overlay
	   labels are positioned in px from the top and bottom edges, so the scrim
	   has to be measured in px too: a percentage ramp weakens exactly where the
	   text sits once the cover shortens at 900px and 600px. The middle of the
	   image is left untinted. Measured worst-case backdrop over the lightest
	   pixel in either project photo is ~5.9:1 for the caption and ~5.9:1 for the
	   tag; text-shadow below is belt-and-braces and is not relied on. */
	background:
		linear-gradient(to bottom, rgba(18, 22, 18, 0.76) 0px, rgba(18, 22, 18, 0.66) 52px, rgba(18, 22, 18, 0) 126px),
		linear-gradient(to top,    rgba(18, 22, 18, 0.78) 0px, rgba(18, 22, 18, 0.66) 56px, rgba(18, 22, 18, 0) 130px);
	pointer-events: none;
}

.sd-case-card__caption {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	gap: var(--sd-space-2xs);
	margin-top: var(--sd-space-xs);
}
.sd-case-card__caption h3 { font-size: 22px; margin-bottom: 6px; }
.sd-case-card__caption p { font-size: var(--sd-text-small); color: var(--sd-text-secondary); }
.sd-case-card__caption .sd-icon { width: 22px; height: 22px; margin-top: 6px; flex: none; }
.sd-case-card:hover .sd-case-card__caption .sd-icon { transform: translate(3px, -3px); }
.sd-case-card__caption .sd-icon { transition: transform var(--sd-dur) var(--sd-ease); }

@media (max-width: 900px) { .sd-case-card__cover { height: 280px; } }
@media (max-width: 600px) { .sd-case-card__cover { height: 220px; } }

/* --- Process steps --------------------------------------------------- */

.sd-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; }
.sd-step { border-top: 1px solid var(--sd-border); padding-top: var(--sd-space-xs); }
.sd-step__no {
	display: block;
	font-size: 16px;
	font-weight: var(--sd-weight-heading);
	font-variant-numeric: tabular-nums;
	color: var(--sd-coral-text);
	margin-bottom: var(--sd-space-sm);
}
.sd-step__title, .sd-step__title .elementor-heading-title { font-size: 22px; }
.sd-step__title { margin-bottom: 13px; }
.sd-step__body, .sd-step__body p { font-size: var(--sd-text-small); color: var(--sd-text-secondary); }
.sd-step { display: flex; flex-direction: column; }

@media (max-width: 900px) { .sd-steps { grid-template-columns: 1fr; gap: var(--sd-space-xs); } }

/* --- Notice bar (pricing principle) ---------------------------------- */

.sd-notice {
	display: flex;
	align-items: center;
	gap: 22px;
	border: 1px solid var(--sd-border);
	border-radius: 13px;
	padding: 27px 30px;
	margin-top: 65px;
	background: var(--sd-bg);
}
.sd-notice__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px; height: 44px;
	flex: none;
	border-radius: 50%;
	background: var(--sd-surface-warm);
	color: var(--sd-coral-text);
}
.sd-notice__icon .sd-icon { width: 20px; height: 20px; }
.sd-notice h3 { font-size: var(--sd-text-h4); margin-bottom: 7px; }
.sd-notice p { font-size: 13px; color: var(--sd-text-secondary); }
.sd-notice .sd-link { margin-left: auto; font-size: 13px; white-space: nowrap; }

@media (max-width: 900px) { .sd-notice { margin-top: var(--sd-space-md); } }
@media (max-width: 600px) {
	.sd-notice { flex-wrap: wrap; gap: var(--sd-space-2xs); padding: var(--sd-space-xs); }
	.sd-notice .sd-link { margin-left: 0; width: 100%; }
}

/* --- Proof strip ------------------------------------------------------ */

.sd-proof {
	border-top: 1px solid var(--sd-border);
	border-bottom: 1px solid var(--sd-border);
}
.sd-proof__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 30px;
	min-height: 126px;
	flex-wrap: wrap;
}
.sd-proof__label, .sd-proof__note, .sd-proof__label p, .sd-proof__note p {
	font-size: 12px;
	line-height: 1.65;
	color: var(--sd-text-secondary);
}
.sd-proof__label {
	text-transform: uppercase;
	letter-spacing: 0.08em;
	font-weight: 700;
}
.sd-proof__logos { display: flex; align-items: center; gap: 56px; flex-wrap: wrap; }
.sd-proof__logo {
	font-size: 22px;
	font-weight: 800;
	letter-spacing: -0.045em;
	line-height: 1.1;
	color: var(--sd-text-primary);
}

@media (max-width: 900px) {
	.sd-proof__inner { justify-content: flex-start; gap: var(--sd-space-xs); padding-block: var(--sd-space-xs); }
	.sd-proof__label, .sd-proof__note { flex: 1 1 100%; }
	.sd-proof__logos { gap: var(--sd-space-sm); }
}

/* --- FAQ --------------------------------------------------------------- */

.sd-faq { border-top: 1px solid var(--sd-border); }
.sd-faq details { border-bottom: 1px solid var(--sd-border); }
.sd-faq summary {
	list-style: none;
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 25px;
	font-size: 16px;
	font-weight: var(--sd-weight-medium);
	line-height: 1.5;
	cursor: pointer;
	padding-block: 21px;
	transition: color var(--sd-dur) var(--sd-ease);
}
.sd-faq summary::-webkit-details-marker { display: none; }
.sd-faq summary::marker { content: ''; }
.sd-faq summary:hover { color: var(--sd-coral-text); }
.sd-faq__mark {
	font-size: 22px;
	line-height: 1;
	flex: none;
	font-weight: 400;
	color: var(--sd-text-secondary);
	transition: transform var(--sd-dur) var(--sd-ease);
}
.sd-faq details[open] .sd-faq__mark { transform: rotate(45deg); }
.sd-faq details p {
	font-size: var(--sd-text-small);
	line-height: 1.7;
	margin-top: -4px;
	padding-bottom: 21px;
	max-width: 62ch;
	color: var(--sd-text-secondary);
}

/* --- Closing CTA -------------------------------------------------------- */

.sd-cta { background: var(--sd-coral-band); color: var(--sd-on-coral); padding-block: 76px 73px; }
.sd-cta h2 { color: var(--sd-on-coral); }
.sd-cta .sd-eyebrow { color: var(--sd-on-coral); }
.sd-cta__bottom {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 50px;
	margin-top: 38px;
}
.sd-cta__bottom p, .sd-cta__copy p { font-size: var(--sd-text-body); line-height: 1.65; color: var(--sd-on-coral); }
.sd-cta .sd-eyebrow { margin-bottom: 22px; }
.sd-cta__bottom { flex-wrap: wrap; }

@media (max-width: 900px) {
	.sd-cta { padding-block: var(--sd-section-y); }
	.sd-cta__bottom { flex-direction: column; align-items: flex-start; gap: var(--sd-space-xs); }
}
@media (max-width: 600px) { .sd-cta__bottom .sd-btn { width: 100%; } }

/* --- Manifesto ---------------------------------------------------------- */

.sd-manifesto { padding-block: 85px; }
.sd-manifesto__title, .sd-manifesto__title .elementor-heading-title { font-size: calc(var(--sd-text-h2) * 1.33); }
.sd-manifesto .sd-eyebrow { margin-bottom: 22px; }
.sd-manifesto p { font-size: var(--sd-text-body); line-height: 1.8; }
.sd-manifesto__rule { height: 1px; background: #4F574B; margin-block: 28px; border: 0; }
.sd-manifesto__line, .sd-manifesto__line .elementor-heading-title { font-size: 24px; color: var(--sd-on-ink); }
.sd-manifesto__line { margin-bottom: 11px; }
.sd-manifesto__foot, .sd-manifesto__foot p { font-size: 12px; color: var(--sd-on-ink-faint); }
.sd-manifesto__copy { display: flex; flex-direction: column; }
.sd-manifesto__copy p + p { margin-top: 20px; }

@media (max-width: 900px) { .sd-manifesto { padding-block: var(--sd-section-y); } }

/* --- Hero copy column ----------------------------------------------------- */

.sd-hero { padding-block: 78px 84px; }
.sd-hero__copy .sd-eyebrow { margin-bottom: 22px; }
.sd-hero__lead, .sd-hero__lead p {
	font-size: var(--sd-text-lead);
	line-height: 1.7;
	max-width: 490px;
}
.sd-hero__lead { margin-top: 27px; }
.sd-hero__actions {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: var(--sd-space-xs);
	margin-top: var(--sd-space-sm);
	flex-wrap: wrap;
}
.sd-hero__note {
	display: flex;
	align-items: center;
	gap: var(--sd-space-3xs);
	margin-top: 26px;
	font-size: 13px;
	color: var(--sd-text-secondary);
}
.sd-hero__dot {
	display: inline-block;
	width: 7px; height: 7px;
	flex: none;
	border-radius: 50%;
	background: var(--sd-coral);
}

@media (max-width: 900px) { .sd-hero { padding-block: 55px; } }
@media (max-width: 600px) {
	.sd-hero { padding-block: 43px 42px; }
	.sd-hero__actions .sd-btn { width: 100%; }
}

/* --- Editorial page pattern -------------------------------------------------
   Introduced for Our Story. These are the reusable building blocks for any
   content-led page: a page hero, a fact row, a two-column editorial split, a
   large pull statement, a principles grid and a marker list.
   ---------------------------------------------------------------------- */

/* Page hero: the standard opening for a content page. Simpler than the
   homepage hero, which is a one-off with its own artwork. */
.sd-page-hero { padding-block: 84px 72px; }
.sd-page-hero .sd-eyebrow { margin-bottom: 22px; }

/* Headline left, supporting copy and facts right, both sitting on the same
   baseline. Keeps a content-page hero substantial without inventing artwork. */
.sd-page-hero__inner {
	display: grid;
	grid-template-columns: 1.1fr 0.9fr;
	gap: var(--sd-split-gap);
	align-items: end;
}

/* One step down from the homepage hero, which stays the largest type on the
   site. Also keeps long headlines inside their column at laptop widths. */
.sd-page-hero__title,
.sd-page-hero__title .elementor-heading-title {
	font-size: clamp(36px, 5vw, 68px);
}

.sd-page-hero__lead,
.sd-page-hero__lead p {
	max-width: 46ch;
	font-size: var(--sd-text-lead);
	line-height: 1.7;
}
.sd-page-hero__side { padding-bottom: 8px; }
.sd-page-hero__side .sd-facts {
	flex-direction: column;
	gap: 12px;
	margin-top: 34px;
}

@media (max-width: 900px) {
	.sd-page-hero { padding-block: 58px 52px; }
	.sd-page-hero__inner { grid-template-columns: 1fr; gap: var(--sd-space-sm); align-items: start; }
	.sd-page-hero__side { padding-bottom: 0; }
	.sd-page-hero__side .sd-facts { flex-direction: row; flex-wrap: wrap; gap: 14px 40px; }
	.sd-page-hero__lead, .sd-page-hero__lead p { max-width: 60ch; }
}
@media (max-width: 600px) {
	.sd-page-hero { padding-block: 44px 40px; }
	.sd-page-hero__side .sd-facts { flex-direction: column; gap: 12px; }
}

/* Fact row: short, verifiable anchors under a hero. */
.sd-facts {
	display: flex;
	flex-wrap: wrap;
	gap: 14px 44px;
	margin-top: 44px;
	padding-top: 26px;
	border-top: 1px solid var(--sd-border);
}
.sd-facts__item {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 13px;
	color: var(--sd-text-secondary);
}
.sd-facts__item::before {
	content: '';
	flex: none;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--sd-coral);
}
.sd-band--ink .sd-facts { border-top-color: var(--sd-border-on-ink); }
.sd-band--ink .sd-facts__item { color: var(--sd-on-ink-muted); }
.sd-band--ink .sd-facts__item::before { background: var(--sd-coral-on-ink); }

/* Editorial split: a heading column that holds position while a reading
   column scrolls past it. */
.sd-editorial {
	display: grid;
	grid-template-columns: 1fr 1.35fr;
	gap: var(--sd-split-gap);
	align-items: start;
}
.sd-editorial__aside { position: sticky; top: calc(var(--sd-header-h) + 24px); }
.sd-editorial__aside .sd-eyebrow { margin-bottom: 17px; }

@media (max-width: 900px) {
	.sd-editorial { grid-template-columns: 1fr; gap: var(--sd-space-xs); }
	.sd-editorial__aside { position: static; }
}

/* Reading column. Body copy never spans the full 1248px container.
   Elementor sets max-width:100% on its widget wrapper at a specificity this
   cannot practically beat, so the measure is applied to the text elements
   inside the wrapper, which is what actually carries the line length. */
.sd-prose-col :where(p, ul, ol, h3, h4) { max-width: var(--sd-measure); }
.sd-prose-col p { margin-bottom: 20px; }
.sd-prose-col p:last-child { margin-bottom: 0; }

/* Pull statement: sits between H2 and H1 in scale. For a single sentence
   that carries a section. */
.sd-statement,
.sd-statement .elementor-heading-title {
	font-size: clamp(30px, 3.3vw, 44px);
	font-weight: var(--sd-weight-heading);
	line-height: 1.16;
	letter-spacing: -0.035em;
}
.sd-statement { max-width: 19ch; }

/* Principles grid. */
.sd-principles {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 44px 56px;
}
.sd-principle {
	display: flex;
	flex-direction: column;
	border-top: 1px solid var(--sd-border);
	padding-top: var(--sd-space-xs);
}
.sd-principle__no,
.sd-principle__no .elementor-heading-title {
	font-size: 13px;
	font-weight: var(--sd-weight-heading);
	color: var(--sd-coral-text);
	font-variant-numeric: tabular-nums;
}
.sd-principle__no { margin-bottom: 22px; }
.sd-principle__title { margin-bottom: 12px; }
.sd-principle__body,
.sd-principle__body p {
	font-size: var(--sd-text-small);
	line-height: 1.7;
	color: var(--sd-text-secondary);
	max-width: 46ch;
}
.sd-band--ink .sd-principle { border-top-color: var(--sd-border-on-ink); }
.sd-band--ink .sd-principle__no { color: var(--sd-coral-on-ink); }
.sd-band--ink .sd-principle__body p { color: var(--sd-on-ink-muted); }

@media (max-width: 900px) { .sd-principles { grid-template-columns: 1fr; gap: var(--sd-space-sm); } }

/* Marker list: short practical statements with a coral dot.
   The marker is positioned rather than laid out as a grid or flex item. An
   earlier grid version broke whenever an item mixed an element with a bare
   text node (for example "<b>Lead.</b> description"): the text node became an
   anonymous grid item and was forced into the 7px marker column, producing
   rows several hundred pixels tall. Positioning the marker makes the
   component indifferent to the shape of its content. */
.sd-marklist { list-style: none; margin: 0; padding: 0; display: grid; gap: 15px; }
.sd-marklist li {
	position: relative;
	padding-left: 22px;
	font-size: var(--sd-text-small);
	line-height: 1.65;
}
.sd-marklist li::before {
	content: '';
	position: absolute;
	left: 0;
	top: 0.62em;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--sd-coral);
}

/* Optional explicit parts, for items that carry a lead phrase and a
   description rather than a single sentence. */
.sd-marklist__lead { font-weight: var(--sd-weight-heading); color: var(--sd-text-primary); }
.sd-band--ink .sd-marklist__lead { color: var(--sd-on-ink); }
.sd-marklist__body { color: inherit; }
.sd-marklist--2col { grid-template-columns: 1fr 1fr; gap: 15px 48px; }
/* Small label introducing a marker list. */
.sd-marklist-head { margin: 32px 0 16px; }
.sd-band--ink .sd-marklist li { color: var(--sd-on-ink-muted); }
.sd-band--ink .sd-marklist li::before { background: var(--sd-coral-on-ink); }

@media (max-width: 900px) { .sd-marklist--2col { grid-template-columns: 1fr; } }

/* Four-up variant of the homepage process steps. */
.sd-steps--four { grid-template-columns: repeat(4, 1fr); gap: 32px; }
@media (max-width: 1100px) { .sd-steps--four { grid-template-columns: repeat(2, 1fr); gap: var(--sd-space-sm); } }
@media (max-width: 900px)  { .sd-steps--four { grid-template-columns: repeat(2, 1fr); gap: var(--sd-space-sm); } }
@media (max-width: 600px)  { .sd-steps--four { grid-template-columns: 1fr; gap: var(--sd-space-xs); } }

/* --- Service page pattern ---------------------------------------------------
   Introduced for Website Design & Development. These are the shared building
   blocks for every core service page (SEO, Paid Media next), so that each one
   differs by content rather than by construction.
   ---------------------------------------------------------------------- */

/* Service hero: the page-hero with a real project visual beside the copy,
   instead of the lead-and-facts column used on editorial pages. */
.sd-page-hero--media .sd-page-hero__inner { grid-template-columns: 1fr 1fr; align-items: center; }
.sd-page-hero--media .sd-page-hero__lead { margin-top: 26px; max-width: 52ch; }
.sd-page-hero--media .sd-page-hero__title,
.sd-page-hero--media .sd-page-hero__title .elementor-heading-title { max-width: 14ch; }
.sd-page-hero__media img {
	width: 100%;
	height: auto;
	border-radius: var(--sd-radius-card);
	border: 1px solid var(--sd-border-card);
}
.sd-page-hero__media figcaption {
	margin-top: 14px;
	font-size: 12px;
	color: var(--sd-text-secondary);
}
.sd-page-hero .sd-hero__actions { margin-top: var(--sd-space-sm); }

@media (max-width: 900px) {
	.sd-page-hero--media .sd-page-hero__inner { grid-template-columns: 1fr; }
	.sd-page-hero--media .sd-page-hero__title,
	.sd-page-hero--media .sd-page-hero__title .elementor-heading-title { max-width: 100%; }
}

/* Three-up variant of the principles grid, for outcome statements. */
.sd-principles--3 { grid-template-columns: repeat(3, 1fr); gap: 40px 48px; }
@media (max-width: 900px) { .sd-principles--3 { grid-template-columns: 1fr; } }

/* Capability groups: what is included in a service, grouped rather than
   listed as dozens of small feature boxes. */
.sd-capability-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 44px 48px;
}
.sd-capability { display: flex; flex-direction: column; }
.sd-capability__title { margin: 22px 0 10px; }
.sd-capability__body,
.sd-capability__body p {
	font-size: var(--sd-text-small);
	line-height: 1.7;
	color: var(--sd-text-secondary);
	max-width: 42ch;
}

@media (max-width: 900px) { .sd-capability-grid { grid-template-columns: 1fr 1fr; gap: var(--sd-space-sm); } }
@media (max-width: 600px) { .sd-capability-grid { grid-template-columns: 1fr; gap: var(--sd-space-xs); } }

/* Panel used as a standalone block rather than a two-column feature. Lets the
   sage panel and the flow diagram be dropped into a hero or a narrow column
   without carrying the split layout. */
.sd-panel--inline {
	display: block;
	grid-template-columns: none;
	padding: 28px;
}
.sd-panel--inline .sd-flow { padding-bottom: 34px; }
/* Steps share the available width instead of holding a fixed 133px, so a
   four-step flow fits a hero column without overflowing. */
.sd-panel--inline .sd-flow__step { width: auto; flex: 1 1 0; min-width: 0; padding-inline: 6px; }
.sd-panel--inline .sd-flow__arrow .sd-icon { width: 15px; height: 15px; }
@media (max-width: 600px) { .sd-panel--inline { padding: 20px; } }

/* Journey: a labelled chain of stages showing how work connects end to end.
   Introduced for Digital Marketing, and intended to carry AI & Automation
   workflows too. The chain is a wrapping flex row, so it degrades to a stacked
   list on narrow screens without any layout switching. Stages are labels, not
   data: it must never be used to present metrics. */
.sd-journey { display: grid; gap: 0; }
.sd-journey__item {
	display: grid;
	grid-template-columns: 200px minmax(0, 1fr);
	gap: 28px;
	align-items: center;
	padding-block: 24px;
	border-top: 1px solid var(--sd-border);
}
.sd-journey__item:last-child { border-bottom: 1px solid var(--sd-border); }
.sd-journey__label { font-size: var(--sd-text-small); font-weight: var(--sd-weight-heading); }
.sd-journey__label small {
	display: block;
	margin-top: 5px;
	font-size: 12px;
	font-weight: 400;
	color: var(--sd-text-secondary);
}
.sd-journey__chain { display: flex; flex-wrap: wrap; align-items: center; gap: 9px; }
.sd-journey__stage {
	display: inline-flex;
	align-items: center;
	padding: 8px 14px;
	border-radius: 999px;
	background: var(--sd-surface);
	border: 1px solid var(--sd-border-card);
	font-size: 13px;
	line-height: 1.3;
}
.sd-journey__stage--end {
	background: var(--sd-sage-deep);
	border-color: transparent;
	color: var(--sd-on-sage-deep);
	font-weight: var(--sd-weight-medium);
}
.sd-journey__arrow { display: inline-flex; flex: none; color: var(--sd-text-secondary); }
.sd-journey__arrow .sd-icon { width: 15px; height: 15px; }
.sd-journey__note { margin-top: 22px; font-size: 12px; color: var(--sd-text-secondary); }

/* On the alternate cream band the stage chips lift to the page ground, but the
   end stage keeps its dark fill: excluding it here stops the chip losing its
   background and leaving pale text on cream. */
.sd-band--alt .sd-journey__stage:not(.sd-journey__stage--end) { background: var(--sd-bg); }
.sd-band--ink .sd-journey__item { border-top-color: var(--sd-border-on-ink); }
.sd-band--ink .sd-journey__stage { background: transparent; border-color: var(--sd-border-on-ink); color: var(--sd-on-ink); }
.sd-band--ink .sd-journey__label small,
.sd-band--ink .sd-journey__note { color: var(--sd-on-ink-muted); }

@media (max-width: 900px) {
	.sd-journey__item { grid-template-columns: 1fr; gap: 14px; }
}

/* Portrait project card: a real full-page website screenshot, framed and
   cropped from the top. Used where the website itself is the proof. */
.sd-case-card--portrait .sd-case-card__cover {
	height: auto;
	aspect-ratio: 4 / 5;
	border: 1px solid var(--sd-border-card);
	background: var(--sd-surface-raised);
}
.sd-case-card--portrait .sd-case-card__cover img { object-position: top center; }
.sd-case-card--portrait .sd-case-card__cover::after { display: none; }

@media (max-width: 600px) { .sd-case-card--portrait .sd-case-card__cover { aspect-ratio: 3 / 4; } }

/* --- Automation page pattern ------------------------------------------------
   Built for AI & Business Automation, which deliberately uses a different
   page rhythm from the other core service pages. Global tokens, typography,
   buttons, header and footer are unchanged; only the composition differs.

   .sd-benefit-strip, .sd-checkline, .sd-timeline and .sd-footnote are generic
   and free to reuse anywhere. The rest is the automation family.
   ---------------------------------------------------------------------- */

/* Compact horizontal benefit strip. Acts as a transition, not a section. */
.sd-benefit-strip {
	background: #EEEEDE;
	border-top: 1px solid var(--sd-border);
	border-bottom: 1px solid var(--sd-border);
}
.sd-benefit-strip__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--sd-space-xs);
	min-height: 90px;
	flex-wrap: wrap;
}
.sd-benefit-strip__item {
	display: flex;
	align-items: center;
	gap: 13px;
	font-size: var(--sd-text-ui);
	font-weight: var(--sd-weight-medium);
}
.sd-benefit-strip__item .sd-icon { width: 22px; height: 22px; flex: none; color: #5F6B44; }

@media (max-width: 768px) {
	.sd-benefit-strip__inner { flex-direction: column; align-items: flex-start; gap: 14px; padding-block: 24px; }
}

/* Generic check line, used by engagement cards and the control panel. */
.sd-checkline { display: flex; gap: 12px; align-items: flex-start; font-size: var(--sd-text-small); line-height: 1.6; }
.sd-checkline .sd-icon { width: 18px; height: 18px; margin-top: 3px; flex: none; color: var(--sd-coral-text); }
.sd-checkline + .sd-checkline { margin-top: 15px; }

/* Small centred note under a section. */
.sd-footnote { padding-top: 25px; font-size: 13px; text-align: center; color: var(--sd-text-secondary); }
.sd-footnote a { color: var(--sd-text-primary); border-bottom: 1px solid var(--sd-border); }
.sd-footnote a:hover { border-bottom-color: var(--sd-coral-text); color: var(--sd-coral-text); }

/* --- Productised solution menu --------------------------------------------- */
.sd-solutions { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.sd-solution-card {
	display: flex;
	flex-direction: column;
	padding: 28px 27px 24px;
	background: var(--sd-surface-raised);
	border: 1px solid var(--sd-border-card);
	border-radius: 14px;
	transition: border-color var(--sd-dur) var(--sd-ease), transform var(--sd-dur) var(--sd-ease);
}
.sd-solution-card:hover { border-color: var(--sd-coral); transform: translateY(-2px); }
.sd-solution-card__top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 27px; }
.sd-solution-card__no { font-size: 11px; font-variant-numeric: tabular-nums; color: var(--sd-text-secondary); }
.sd-solution-card__title { font-size: 23px; line-height: 1.18; margin-bottom: 16px; }
/* Titles run to one or two lines depending on the solution name. Reserving two
   lines while the cards sit side by side keeps every body paragraph in a row on
   the same baseline; below 700px the cards are stacked so the reserve is dropped. */
@media (min-width: 701px) {
	.sd-solution-card__title { min-height: 2.36em; }
}
.sd-solution-card__body { flex: 1; font-size: var(--sd-text-small); line-height: 1.7; color: var(--sd-text-secondary); }
.sd-solution-card__flow {
	margin-top: 16px;
	padding: 15px 0;
	border-top: 1px solid var(--sd-border);
	font-size: 12px;
	font-weight: 600;
	line-height: 1.5;
	color: var(--sd-text-secondary);
}
.sd-solution-card__foot { margin-top: auto; }

@media (max-width: 1100px) { .sd-solutions { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 700px)  { .sd-solutions { grid-template-columns: 1fr; } }

/* --- Dark workflow demonstration -------------------------------------------- */
.sd-workflow { background: #253529; color: #F4F7E9; padding-block: 78px 48px; }
.sd-workflow h1, .sd-workflow h2, .sd-workflow h3,
.sd-workflow .elementor-heading-title { color: #F4F7E9; }
.sd-workflow .sd-eyebrow,
.sd-workflow .sd-eyebrow .elementor-heading-title { color: #B5C99F; }
.sd-workflow .sd-section-head__note,
.sd-workflow .sd-section-head__note p { color: #BAC6B2; }

.sd-workflow__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 45px; margin-top: 45px; }
.sd-workflow__stage { position: relative; }
.sd-workflow__stage:not(:last-child)::after {
	content: '';
	position: absolute;
	right: -30px;
	top: 24px;
	width: 16px;
	height: 10px;
	background: #A7BA94;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") no-repeat center / contain;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") no-repeat center / contain;
}
.sd-workflow__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 54px; height: 54px;
	border-radius: 11px;
	background: #3E5039;
	color: #DFEBA7;
	margin-bottom: 26px;
}
.sd-workflow__icon .sd-icon { width: 24px; height: 24px; }
.sd-workflow__no {
	float: right;
	margin-top: 16px;
	font-size: 11px;
	font-variant-numeric: tabular-nums;
	color: #C7D3BE;
}
.sd-workflow__title { font-size: 25px; margin-bottom: 13px; }
.sd-workflow__body { font-size: var(--sd-text-small); color: #C7D3BE; max-width: 26ch; }
.sd-workflow__foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--sd-space-md);
	flex-wrap: wrap;
	margin-top: 40px;
	padding-top: 22px;
	border-top: 1px solid #52624A;
}
.sd-workflow__assurance { display: flex; align-items: center; gap: 10px; font-size: 13px; color: #DCE6D0; }
.sd-workflow__assurance .sd-icon { width: 17px; height: 17px; flex: none; }
.sd-workflow__label { font-size: 12px; color: #C7D3BE; }

@media (max-width: 900px) {
	.sd-workflow { padding-block: var(--sd-section-y); }
	.sd-workflow__grid { grid-template-columns: 1fr 1fr; gap: var(--sd-space-sm); }
	.sd-workflow__stage:not(:last-child)::after { display: none; }
	.sd-workflow__body { max-width: none; }
}
@media (max-width: 600px) { .sd-workflow__grid { grid-template-columns: 1fr; gap: var(--sd-space-xs); } }

/* --- Integration examples strip --------------------------------------------- */
.sd-tools {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--sd-space-xs);
	flex-wrap: wrap;
	padding-block: 43px 20px;
}
.sd-tools__lead { font-size: 13px; line-height: 1.6; color: var(--sd-text-secondary); max-width: 22ch; }
.sd-tools__item { font-size: 16px; font-weight: 600; letter-spacing: -0.03em; }
.sd-tools__note { width: 100%; font-size: 12px; text-align: right; color: var(--sd-text-secondary); }

@media (max-width: 900px) {
	.sd-tools { gap: 14px 22px; padding-block: var(--sd-space-sm) var(--sd-space-2xs); }
	.sd-tools__lead { max-width: none; flex: 1 1 100%; }
	.sd-tools__note { text-align: left; }
}

/* --- Engagement models ------------------------------------------------------ */
.sd-engagement { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.sd-engagement-card {
	display: flex;
	flex-direction: column;
	padding: 30px;
	background: var(--sd-bg);
	border: 1px solid var(--sd-border);
	border-radius: 14px;
}
.sd-engagement-card .sd-eyebrow { margin-bottom: 20px; }
.sd-engagement-card__title { font-size: 28px; line-height: 1.15; margin-bottom: 18px; }
.sd-engagement-card__body { font-size: var(--sd-text-small); line-height: 1.7; color: var(--sd-text-secondary); }
.sd-engagement-card__checks { margin-block: 28px; }
.sd-engagement-card__price {
	margin-top: auto;
	margin-bottom: 21px;
	padding-top: 20px;
	border-top: 1px solid var(--sd-border);
	font-size: 15px;
	font-weight: var(--sd-weight-heading);
}

@media (max-width: 1100px) { .sd-engagement { grid-template-columns: 1fr 1fr; } }
@media (max-width: 700px)  { .sd-engagement { grid-template-columns: 1fr; } }

/* --- Open implementation timeline ------------------------------------------- */
.sd-timeline {
	position: relative;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 32px;
	padding-top: 36px;
}
.sd-timeline::before {
	content: '';
	position: absolute;
	top: 6px; left: 5px; right: 5px;
	height: 1px;
	background: var(--sd-border);
}
.sd-timeline__item { position: relative; }
.sd-timeline__item::before {
	content: '';
	position: absolute;
	top: -36px; left: 0;
	width: 11px; height: 11px;
	border-radius: 50%;
	background: var(--sd-coral);
	box-shadow: 0 0 0 5px var(--sd-bg);
}
.sd-timeline__no {
	display: block;
	font-size: 13px;
	font-weight: var(--sd-weight-heading);
	font-variant-numeric: tabular-nums;
	color: var(--sd-coral-text);
	margin-bottom: 14px;
}
.sd-timeline__title { font-size: var(--sd-text-h4); margin-bottom: 10px; }
.sd-timeline__body { font-size: var(--sd-text-small); line-height: 1.7; color: var(--sd-text-secondary); max-width: 30ch; }

@media (max-width: 900px) {
	.sd-timeline { grid-template-columns: 1fr; gap: var(--sd-space-sm); padding-top: 0; padding-left: 28px; }
	.sd-timeline::before { top: 6px; bottom: 6px; left: 5px; right: auto; width: 1px; height: auto; }
	.sd-timeline__item::before { top: 6px; left: -28px; }
	.sd-timeline__body { max-width: none; }
}

/* --- Human control panel ----------------------------------------------------- */
.sd-control { background: #E3E9D3; padding-block: 60px; }
.sd-control__title, .sd-control__title .elementor-heading-title { font-size: clamp(30px, 3.3vw, 43px); }
.sd-control__body, .sd-control__body p { font-size: var(--sd-text-body); max-width: 44ch; }
.sd-control__body { margin-top: 24px; }
.sd-control__list { padding: 35px 36px; border-left: 1px solid #C4CFAE; }
.sd-control__list .sd-checkline { font-size: var(--sd-text-small); }
.sd-control__list .sd-checkline + .sd-checkline { margin-top: 23px; }
.sd-control__list .sd-checkline .sd-icon { color: #4E6A3B; }

@media (max-width: 900px) {
	.sd-control { padding-block: var(--sd-section-y); }
	.sd-control__list { padding: 0; border-left: 0; border-top: 1px solid #C4CFAE; padding-top: var(--sd-space-xs); }
	.sd-control__body, .sd-control__body p { max-width: none; }
}

/* --- Prose (not-yet-redesigned surfaces) ----------------------------------- */

.sd-prose { max-width: 72ch; }
.sd-prose__title { margin-bottom: var(--sd-space-sm); }
.sd-prose h1, .sd-prose h2 { margin-bottom: var(--sd-space-xs); }
.sd-prose p { margin-bottom: var(--sd-space-2xs); }
.sd-archive-list { display: flex; flex-direction: column; gap: var(--sd-space-sm); margin-top: var(--sd-space-sm); }
.sd-archive-item h2 { font-size: var(--sd-text-h3); margin-bottom: var(--sd-space-3xs); }


/* --- Page composition helpers ---------------------------------------------
   Classes applied to Elementor containers on the homepage. Elementor's own
   widget spacing is set to zero in Site Settings, so every gap between
   stacked widgets is declared here.
   ---------------------------------------------------------------------- */

.sd-hero__split { align-items: center; }
.sd-hero__copy { display: flex; flex-direction: column; align-items: flex-start; }
.sd-hero__figure { display: flex; align-items: center; justify-content: center; min-width: 0; }

@media (max-width: 900px) {
	.sd-hero__split { grid-template-columns: 1fr; }
	.sd-hero__figure { order: 2; }
	.sd-hero__copy { order: 1; }
}

/* Proof-strip wordmarks. Typographic treatments of real client names, not
   the clients' supplied brand files. See docs/design-system.md. */
.sd-proof__logo--lr {
	font-family: Georgia, 'Times New Roman', serif;
	font-weight: 700;
	font-size: 25px;
	letter-spacing: -0.01em;
}
.sd-proof__logo--lr small {
	display: block;
	margin-top: 5px;
	font-family: var(--sd-font-sans);
	font-size: 8px;
	font-weight: 500;
	letter-spacing: 0.28em;
}
.sd-proof__logo--signal { letter-spacing: 0.1em; font-size: 18px; font-weight: 700; }
.sd-proof__logo--fight { font-style: italic; font-size: 19px; letter-spacing: -0.04em; }

/* Service card head: icon well and sequence number share a row. */
.sd-service-card__head { display: block; }

/* Automation panel */
.sd-panel--after-grid { margin-top: 25px; }
.sd-panel__figure { min-width: 0; display: flex; align-items: center; }

/* Case card is a link wrapping block content. */
a.sd-case-card { color: inherit; text-decoration: none; }
a.sd-case-card:hover .sd-case-card__caption h3 { color: var(--sd-coral-text); }
.sd-case-card__caption h3 { transition: color var(--sd-dur) var(--sd-ease); }
.sd-case-card__cover img { transition: transform 0.4s var(--sd-ease); }
a.sd-case-card:hover .sd-case-card__cover img { transform: scale(1.03); }

/* Pricing notice */
.sd-notice__copy { flex: 1 1 auto; display: flex; flex-direction: column; }

/* FAQ intro paragraph */
.sd-faq__intro { margin-top: 25px; }
.sd-faq__intro, .sd-faq__intro p { color: var(--sd-text-secondary); }

/* Closing CTA copy column */
.sd-cta__copy { flex: 1 1 auto; }


/* --- Contact page ------------------------------------------------------
   Contact is deliberately short: a hero that already contains the form, one
   reassurance block and one details block. It does not use the service page
   composition. */

.sd-contact { padding-block: var(--sd-section-y) 0; }
.sd-contact__inner { display: flex; align-items: flex-start; gap: 64px; }
.sd-contact__intro { flex: 0 1 452px; padding-top: 6px; }
.sd-contact__form  { flex: 1 1 560px; min-width: 0; }
.sd-contact__lead { margin-top: 22px; }
.sd-contact__lead p { font-size: var(--sd-text-lead); line-height: 1.55; color: var(--sd-text-secondary); }

/* Reassurance line under the intro copy */
.sd-contact__note {
	display: flex; gap: 11px; align-items: flex-start;
	margin-top: 28px;
	font-size: var(--sd-text-small); line-height: 1.6; color: var(--sd-text-secondary);
}
.sd-contact__note .sd-icon { width: 18px; height: 18px; flex: none; margin-top: 2px; color: var(--sd-coral-text); }

/* Direct details, presented as type rather than an icon list.
   These render inside one HTML widget, so every part has to declare its own
   box: the flex column on .sd-reach__item styles the container Elementor
   makes, not the spans written inside the widget. */
.sd-reach { display: grid; grid-template-columns: repeat(3, 1fr); gap: 34px; }
.sd-reach--stack { grid-template-columns: 1fr; gap: 24px; margin-top: 34px; padding-top: 30px; border-top: 1px solid var(--sd-border); }
.sd-reach__item { display: flex; flex-direction: column; gap: 6px; }
.sd-reach__label {
	display: block;
	font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase;
	font-weight: 700; color: var(--sd-text-secondary);
}
.sd-reach__value { display: block; font-size: 19px; line-height: 1.45; font-weight: 550; color: var(--sd-text-primary); }
a.sd-reach__value { text-decoration: none; }
a.sd-reach__value:hover { color: var(--sd-coral-text); text-decoration: underline; text-underline-offset: 3px; }
.sd-reach__sub { display: block; font-size: var(--sd-text-small); color: var(--sd-text-secondary); }
.sd-reach__sub a { color: var(--sd-text-secondary); }
.sd-reach__sub a:hover { color: var(--sd-coral-text); }

/* "What happens next": compact, deliberately not .sd-steps--four */
.sd-next__lead {
	max-width: var(--sd-measure);
	margin-bottom: 34px;
	font-size: var(--sd-text-small);
	line-height: 1.65;
	color: var(--sd-text-secondary);
}
.sd-next { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; }
.sd-next__item { border-top: 1px solid var(--sd-border); padding-top: 20px; }
.sd-next__no {
	display: block; font-size: 13px; font-weight: 700;
	letter-spacing: 0.08em; color: var(--sd-coral-text); margin-bottom: 11px;
}
.sd-next__title { font-size: 19px; margin-bottom: 9px; }
.sd-next__body { font-size: var(--sd-text-small); line-height: 1.62; color: var(--sd-text-secondary); }

@media (max-width: 1100px) {
	.sd-contact__inner { gap: 44px; }
	.sd-contact__intro { flex-basis: 380px; }
}
@media (max-width: 900px) {
	.sd-contact__inner { flex-direction: column; gap: 44px; }
	.sd-contact__intro, .sd-contact__form { flex: 1 1 auto; width: 100%; }
	.sd-reach, .sd-next { grid-template-columns: 1fr; gap: 26px; }
}


/* --- Case studies ------------------------------------------------------
   More visual and immersive than a service page, and not the article
   template either. One system across all three projects. */

.sd-case-hero {
	display: grid;
	grid-template-columns: 0.82fr 1.18fr;
	gap: 56px;
	align-items: center;
	padding-block: var(--sd-section-y);
}
.sd-case-hero__title { margin-bottom: 18px; }
.sd-case-hero__context {
	font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase;
	font-weight: 700; color: var(--sd-coral-text); margin-bottom: 22px;
}
.sd-case-hero__lede { font-size: var(--sd-text-lead); line-height: 1.5; color: var(--sd-text-secondary); }
.sd-case-hero__media {
	border-radius: 16px; overflow: hidden;
	background: var(--sd-surface); border: 1px solid var(--sd-border-card);
}
.sd-case-hero__img { aspect-ratio: 4 / 3; object-fit: cover; object-position: top center; }

/* Scope strip */
.sd-case-meta {
	display: flex; flex-wrap: wrap; align-items: baseline; gap: 16px 30px;
	padding-block: 30px;
	border-top: 1px solid var(--sd-border);
	border-bottom: 1px solid var(--sd-border);
}
.sd-case-meta__label {
	font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase;
	font-weight: 700; color: var(--sd-text-secondary); margin: 0;
}

/* Text sections. Heading left, copy right, so the page keeps an editorial
   asymmetry instead of a centred column. */
.sd-case-section { padding-block: var(--sd-section-y); }
.sd-case-section--band { background: var(--sd-bg-alt); padding-block: var(--sd-section-y); }
.sd-case-section--band .sd-case-section__inner { padding-block: 0; }
.sd-case-section__inner { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: 54px; align-items: start; }
.sd-case-section__title { margin: 0; }
.sd-case-section__body { max-width: 640px; }
.sd-case-section__body p { font-size: 17px; line-height: 1.72; margin-bottom: 1.2em; }
.sd-case-section__body p:last-child { margin-bottom: 0; }

/* Real screens, at a size worth looking at. */
.sd-case-gallery { padding-bottom: var(--sd-section-y); }
.sd-case-gallery__grid { display: grid; gap: 34px; }
.sd-case-gallery--two { grid-template-columns: repeat(2, 1fr); }
.sd-case-gallery--one { grid-template-columns: 1fr; max-width: 900px; margin-inline: auto; }
.sd-case-shot { margin: 0; }
.sd-case-shot__img {
	border-radius: 14px; border: 1px solid var(--sd-border-card);
	background: var(--sd-surface);
	aspect-ratio: 3 / 4; object-fit: cover; object-position: top center;
}
.sd-case-gallery--one .sd-case-shot__img { aspect-ratio: 16 / 10; }
.sd-case-shot figcaption {
	margin-top: 12px; font-size: 13.5px; line-height: 1.55; color: var(--sd-text-secondary);
}

/* A single supporting idea plus its asset. */
.sd-case-feature {
	display: grid; grid-template-columns: 0.85fr 1.15fr; gap: 54px;
	align-items: center; padding-block: var(--sd-section-y);
}
.sd-case-feature__title { margin-bottom: 12px; }
.sd-case-feature__copy p { font-size: 17px; line-height: 1.7; color: var(--sd-text-secondary); }
.sd-case-feature__media { display: grid; gap: 26px; }
.sd-case-feature--two { grid-template-columns: repeat(2, 1fr); }
.sd-case-feature--one { grid-template-columns: 1fr; }
.sd-case-feature__img {
	border-radius: 14px;
	border: 1px solid var(--sd-border-card);
	background: #FFFFFF;
	object-fit: contain;
}

.sd-case-close { padding-bottom: var(--sd-section-y); }
.sd-case-close__text {
	max-width: 820px;
	font-size: 25px; line-height: 1.42; font-weight: 500; letter-spacing: -0.012em;
	color: var(--sd-text-primary);
	padding-left: 24px; border-left: 2px solid var(--sd-coral);
}

/* Next project */
.sd-case-next { background: var(--sd-ink-band); color: var(--sd-on-ink); padding-block: 66px; }
.sd-case-next__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--sd-space-xs); flex-wrap: wrap; }
.sd-case-next .sd-eyebrow { color: var(--sd-coral-on-ink); }
.sd-case-next__title { margin: 10px 0 8px; }
.sd-case-next__title a { color: var(--sd-on-ink); text-decoration: none; }
.sd-case-next__title a:hover { color: var(--sd-coral-on-ink); }
.sd-case-next__title a:focus-visible { outline: 3px solid var(--sd-coral-on-ink); outline-offset: 4px; }
.sd-case-next__context { font-size: var(--sd-text-small); color: var(--sd-on-ink-muted); }

@media (max-width: 1100px) {
	.sd-case-hero { gap: 40px; }
	.sd-case-section__inner, .sd-case-feature { gap: 38px; }
}
@media (max-width: 900px) {
	.sd-case-hero { grid-template-columns: 1fr; gap: 32px; padding-block: calc(var(--sd-section-y) * 0.7); }
	.sd-case-section__inner { grid-template-columns: 1fr; gap: 22px; }
	.sd-case-feature { grid-template-columns: 1fr; gap: 30px; }
	.sd-case-gallery--two { grid-template-columns: 1fr; }
	.sd-case-hero__img { aspect-ratio: 16 / 10; }
	.sd-case-shot__img { aspect-ratio: 4 / 3; }
}
@media (max-width: 600px) {
	.sd-case-close__text { font-size: 21px; padding-left: 18px; }
	.sd-case-next { padding-block: 48px; }
}


/* --- 404 --------------------------------------------------------------- */

.sd-404 { padding-block: calc(var(--sd-section-y) * 1.15) var(--sd-section-y); max-width: 760px; }
.sd-404__code { color: var(--sd-coral-text); margin-bottom: 18px; }
.sd-404__title { margin-bottom: 20px; }
.sd-404__body { font-size: var(--sd-text-lead); line-height: 1.5; color: var(--sd-text-secondary); max-width: var(--sd-measure); }
.sd-404__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 18px 28px; margin-top: 36px; }
.sd-404__note { margin-top: 40px; padding-top: 26px; border-top: 1px solid var(--sd-border);
	font-size: var(--sd-text-small); color: var(--sd-text-secondary); }


/* --- Legal pages -------------------------------------------------------
   Deliberately plain. No CTA, no illustration, no marketing copy. */

.sd-legal { padding-block: var(--sd-section-y); }
.sd-legal__header { max-width: 800px; margin-bottom: 42px; }
.sd-legal__title { margin-bottom: 0; }
.sd-legal__toc { max-width: 800px; margin-bottom: 46px; }
.sd-legal__toc .sd-toc { max-width: none; margin-bottom: 0; }

.sd-legal__body { max-width: 760px; }
.sd-legal__body p { font-size: 16.5px; line-height: 1.72; margin-bottom: 1.25em; }
.sd-legal__body h2 {
	font-size: 24px; line-height: 1.25; letter-spacing: -0.015em;
	margin: 2.1em 0 0.55em; padding-top: 1.1em;
	border-top: 1px solid var(--sd-border);
	scroll-margin-top: 100px;
}
.sd-legal__body h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.sd-legal__body h3 { font-size: 18.5px; line-height: 1.3; margin: 1.6em 0 0.45em; scroll-margin-top: 100px; }
.sd-legal__body ul, .sd-legal__body ol { margin: 0 0 1.25em; padding-left: 1.3em; }
.sd-legal__body li { font-size: 16.5px; line-height: 1.7; margin-bottom: 0.45em; }
.sd-legal__body li::marker { color: var(--sd-coral-text); }
/* Legal copy pastes bare URLs, which must not push the page sideways. */
.sd-legal__body a {
	color: var(--sd-text-primary);
	text-decoration: underline; text-underline-offset: 3px;
	word-break: break-word; overflow-wrap: anywhere;
}
.sd-legal__body a:hover { color: var(--sd-coral-text); }
.sd-legal__body p, .sd-legal__body li { overflow-wrap: anywhere; }
.sd-legal__body table { width: 100%; border-collapse: collapse; margin: 1.8em 0; font-size: 15px; }
.sd-legal__body th, .sd-legal__body td { padding: 10px 12px; border: 1px solid var(--sd-border); text-align: left; vertical-align: top; }
.sd-legal__body th { background: var(--sd-bg-alt); font-weight: 650; }
.sd-legal__body .wp-block-table { overflow-x: auto; }

@media (max-width: 900px) {
	.sd-legal__body h2 { font-size: 22px; }
}


/* --- Blog: editorial system --------------------------------------------
   Shared by the Blog index, category archives and the related-posts block at
   the end of an article. Deliberately quieter than the service pages: more
   whitespace, no numbered cards, no dark band, no FAQ. */

.sd-blog-intro { padding-block: var(--sd-section-y) 0; }
.sd-blog-intro__note {
	max-width: var(--sd-measure);
	margin-bottom: 40px;
	font-size: var(--sd-text-small);
	line-height: 1.65;
	color: var(--sd-text-secondary);
}

.sd-post-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 52px 34px; }
.sd-post-grid--related { grid-template-columns: repeat(2, 1fr); gap: 34px; }
.sd-post-grid__empty { color: var(--sd-text-secondary); }

.sd-post-card { position: relative; display: flex; flex-direction: column; }
.sd-post-card__media {
	margin-bottom: 20px;
	border-radius: 13px;
	overflow: hidden;
	background: var(--sd-surface);
	border: 1px solid var(--sd-border-card);
}
.sd-post-card__media img {
	aspect-ratio: 3 / 2;
	object-fit: cover;
	transition: transform var(--sd-dur-slow, .5s) var(--sd-ease);
}
.sd-post-card:hover .sd-post-card__media img { transform: scale(1.03); }
.sd-post-card__body { display: flex; flex-direction: column; }

.sd-post-card__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 9px 14px;
	margin-bottom: 12px;
	font-size: 11px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	font-weight: 700;
}
/* The category stays a real link and sits above the stretched title link. */
.sd-post-card__cat { position: relative; z-index: 2; color: var(--sd-coral-text); text-decoration: none; }
.sd-post-card__cat:hover { text-decoration: underline; text-underline-offset: 3px; }
.sd-post-card__date { color: var(--sd-text-secondary); font-weight: 650; letter-spacing: 0.08em; }

.sd-post-card__title { font-size: 22px; line-height: 1.22; letter-spacing: -0.015em; margin-bottom: 10px; }
.sd-post-card__title a { color: inherit; text-decoration: none; }
/* One link per card for assistive tech, a whole-card target for pointers. */
.sd-post-card__title a::after { content: ''; position: absolute; inset: 0; z-index: 1; }
.sd-post-card__title a:hover { color: var(--sd-coral-text); }
.sd-post-card__title a:focus-visible { outline: 3px solid var(--sd-coral); outline-offset: 4px; border-radius: 3px; }
.sd-post-card__excerpt { font-size: var(--sd-text-small); line-height: 1.65; color: var(--sd-text-secondary); margin: 0; }

/* Pagination, only rendered when there is more than one page. */
.sd-pagination { margin-top: var(--sd-space-m, 54px); }
.sd-pagination ul, .sd-pagination .page-numbers { list-style: none; margin: 0; padding: 0; }
.sd-pagination ul { display: flex; flex-wrap: wrap; gap: 8px; }
.sd-pagination a, .sd-pagination span.page-numbers {
	display: inline-flex; align-items: center; justify-content: center;
	min-width: 44px; min-height: 44px; padding: 0 14px;
	border: 1px solid var(--sd-border); border-radius: 999px;
	font-size: 14px; font-weight: 600; text-decoration: none; color: var(--sd-text-primary);
}
.sd-pagination a:hover { border-color: var(--sd-text-primary); }
.sd-pagination .current { background: var(--sd-ink-band); border-color: var(--sd-ink-band); color: var(--sd-on-ink); }

/* Category and search archives */
.sd-archive__title { margin-bottom: var(--sd-space-s, 38px); }

/* --- Blog: the article ------------------------------------------------ */

.sd-article { display: block; }
.sd-article__header { padding-top: var(--sd-section-y); max-width: 820px; margin-inline: auto; }
.sd-article__meta { display: flex; flex-wrap: wrap; gap: 9px 16px; align-items: baseline; margin-bottom: 18px;
	font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; font-weight: 700; }
.sd-article__cat { color: var(--sd-coral-text); text-decoration: none; }
.sd-article__cat:hover { text-decoration: underline; text-underline-offset: 3px; }
.sd-article__date { color: var(--sd-text-secondary); font-weight: 650; letter-spacing: 0.08em; }
.sd-article__title { margin-bottom: 20px; }
.sd-article__standfirst { font-size: var(--sd-text-lead); line-height: 1.55; color: var(--sd-text-secondary); max-width: var(--sd-measure); }

.sd-article__figure { margin: 44px auto 0; max-width: 940px; }
.sd-article__figure img { border-radius: 15px; border: 1px solid var(--sd-border-card); }

.sd-article__wrap { padding-block: 52px var(--sd-section-y); }

/* Contents list, built in PHP from the article's own H2s. */
.sd-toc {
	max-width: 740px;
	margin-inline: auto;
	margin-bottom: 44px;
	padding: 22px 26px;
	background: var(--sd-bg-alt);
	border-left: 2px solid var(--sd-coral);
	border-radius: 0 11px 11px 0;
}
.sd-toc__title { font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; font-weight: 700;
	color: var(--sd-text-secondary); margin-bottom: 12px; }
.sd-toc__list { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 7px; }
.sd-toc__list li { font-size: var(--sd-text-small); line-height: 1.5; }
.sd-toc__list a { color: var(--sd-text-primary); text-decoration: none; }
.sd-toc__list a:hover { color: var(--sd-coral-text); text-decoration: underline; text-underline-offset: 3px; }

/* The reading column. 740px is roughly 70 characters at this size. */
.sd-article__body { max-width: 740px; margin-inline: auto; }
.sd-article__body > * { max-width: 100%; }
.sd-article__body p { font-size: 17.5px; line-height: 1.75; margin-bottom: 1.35em; }
.sd-article__body h2 { font-size: 30px; line-height: 1.2; letter-spacing: -0.02em; margin: 2em 0 0.6em; scroll-margin-top: 100px; }
.sd-article__body h3 { font-size: 23px; line-height: 1.25; margin: 1.7em 0 0.5em; scroll-margin-top: 100px; }
.sd-article__body h4 { font-size: 19px; line-height: 1.3; margin: 1.5em 0 0.45em; }
.sd-article__body h2:first-child, .sd-article__body h3:first-child { margin-top: 0; }
.sd-article__body ul, .sd-article__body ol { margin: 0 0 1.35em; padding-left: 1.35em; }
.sd-article__body li { font-size: 17.5px; line-height: 1.7; margin-bottom: 0.5em; }
.sd-article__body li::marker { color: var(--sd-coral-text); }
.sd-article__body a { color: var(--sd-text-primary); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.sd-article__body a:hover { color: var(--sd-coral-text); }
.sd-article__body strong, .sd-article__body b { font-weight: 680; }
.sd-article__body img { height: auto; border-radius: 11px; }
.sd-article__body figure { margin: 2em 0; }
.sd-article__body figcaption, .sd-article__body .wp-caption-text {
	margin-top: 10px; font-size: 13.5px; line-height: 1.55; color: var(--sd-text-secondary);
}
.sd-article__body blockquote {
	margin: 2em 0; padding: 4px 0 4px 26px;
	border-left: 2px solid var(--sd-coral);
	font-size: 21px; line-height: 1.5; font-weight: 500; color: var(--sd-text-primary);
}
.sd-article__body blockquote p:last-child { margin-bottom: 0; }
.sd-article__body hr { border: 0; border-top: 1px solid var(--sd-border); margin: 2.4em 0; }
.sd-article__body table { width: 100%; border-collapse: collapse; margin: 2em 0; font-size: 15.5px; }
.sd-article__body th, .sd-article__body td { padding: 11px 13px; border: 1px solid var(--sd-border); text-align: left; vertical-align: top; }
.sd-article__body th { background: var(--sd-bg-alt); font-weight: 650; }
.sd-article__body pre {
	margin: 2em 0; padding: 18px 20px; overflow-x: auto;
	background: var(--sd-ink-band); color: var(--sd-on-ink);
	border-radius: 11px; font-size: 14px; line-height: 1.6;
}
.sd-article__body code { font-size: 0.92em; background: var(--sd-bg-alt); padding: 2px 6px; border-radius: 5px; }
.sd-article__body pre code { background: none; padding: 0; }
/* Tables and embeds must not push the page sideways. */
.sd-article__body .wp-block-table, .sd-article__body .wp-block-embed { overflow-x: auto; }
.sd-article__body iframe { max-width: 100%; }

.sd-related { border-top: 1px solid var(--sd-border); }
.sd-related.sd-container { max-width: 940px; }
.sd-related__title { margin-bottom: 32px; }

@media (max-width: 1100px) {
	.sd-post-grid { grid-template-columns: repeat(2, 1fr); gap: 44px 30px; }
}
@media (max-width: 900px) {
	.sd-article__header { padding-top: calc(var(--sd-section-y) * 0.7); }
	.sd-article__wrap { padding-block: 38px var(--sd-section-y); }
	.sd-article__figure { margin-top: 32px; }
	.sd-post-grid--related { grid-template-columns: 1fr; }
}
@media (max-width: 700px) {
	.sd-post-grid { grid-template-columns: 1fr; gap: 40px; }
}
@media (max-width: 600px) {
	.sd-article__body p, .sd-article__body li { font-size: 16.5px; }
	.sd-article__body h2 { font-size: 25px; }
	.sd-article__body h3 { font-size: 20px; }
	.sd-toc { padding: 18px 20px; }
	.sd-post-card__title { font-size: 20px; }
}


/* --- Our Work ----------------------------------------------------------
   Editorial rather than a card grid. One dominant feature, then an
   asymmetric pair, then a capability strip. The rhythm is deliberately not
   the service-page silhouette. */

.sd-img { display: block; width: 100%; height: auto; }

.sd-work-intro { padding-block: var(--sd-section-y) 0; }

/* Shared project metadata chips. Verified scope only, never marketing tags. */
.sd-work-meta { display: flex; flex-wrap: wrap; gap: 7px; list-style: none; margin: 0; padding: 0; }
.sd-work-meta li::marker { content: none; }
.sd-work-meta__item {
	padding: 5px 11px;
	font-size: 10.5px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	font-weight: 700;
	color: var(--sd-text-secondary);
	background: transparent;
	border: 1px solid var(--sd-border);
	border-radius: 999px;
	white-space: nowrap;
}

/* The dominant first project. */
.sd-work-feature { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 56px; align-items: center; }
.sd-work-feature__media {
	position: relative;
	border-radius: 16px;
	overflow: hidden;
	background: var(--sd-surface);
	border: 1px solid var(--sd-border-card);
}
.sd-work-feature__media img { aspect-ratio: 16 / 9; object-fit: cover; }
.sd-work-feature__body { display: flex; flex-direction: column; }
.sd-work-feature__eyebrow {
	font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase;
	font-weight: 700; color: var(--sd-coral-text); margin-bottom: 14px;
}
.sd-work-feature__title { font-size: 40px; line-height: 1.08; letter-spacing: -0.025em; margin-bottom: 8px; }
.sd-work-feature__context { font-size: var(--sd-text-small); color: var(--sd-text-secondary); margin-bottom: 20px; }
.sd-work-feature__body p { margin-bottom: 16px; }
.sd-work-feature__foot { margin-top: 14px; display: flex; flex-direction: column; gap: 22px; align-items: flex-start; }

/* The secondary pair. Deliberately unequal: the columns differ in width and
   the second sits lower, so the page does not read as three equal cards. */
.sd-work-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 54px; align-items: start; }
.sd-work-pair > :nth-child(2) { margin-top: 74px; }

.sd-work-card { display: flex; flex-direction: column; }
.sd-work-card__media {
	position: relative;
	display: block;
	border-radius: 14px;
	overflow: hidden;
	background: var(--sd-surface);
	border: 1px solid var(--sd-border-card);
	margin-bottom: 24px;
}
.sd-work-card__media img { aspect-ratio: 4 / 3; object-fit: cover; object-position: top center; transition: transform var(--sd-dur-slow, .5s) var(--sd-ease); }
.sd-work-card__media:hover img { transform: scale(1.02); }
.sd-work-card__title { font-size: 27px; line-height: 1.12; letter-spacing: -0.02em; margin-bottom: 7px; }
.sd-work-card__context { font-size: var(--sd-text-small); color: var(--sd-text-secondary); margin-bottom: 15px; }
.sd-work-card__body { margin-bottom: 20px; }
.sd-work-card__body p { font-size: var(--sd-text-small); line-height: 1.65; color: var(--sd-text-secondary); }
.sd-work-card__foot { margin-top: auto; padding-top: 20px; display: flex; flex-direction: column; gap: 20px; align-items: flex-start; }

/* The one transitional element: range of verified work, as type. */
.sd-work-range { display: flex; flex-wrap: wrap; gap: 12px 38px; align-items: baseline; }
.sd-work-range__item { font-size: 19px; font-weight: 550; color: var(--sd-text-primary); }
.sd-work-range__note { font-size: 13px; color: var(--sd-text-secondary); padding-top: 22px; }

/* "View project" is the primary action on each project, so it gets a real hit
   area rather than the bare 19px of its text box. Padded vertically to ~44px
   and pulled back with a negative inline margin so the text still aligns with
   the copy above it. */
.sd-work-feature__foot .sd-link-el.sd-link-el .elementor-button,
.sd-work-card__foot .sd-link-el.sd-link-el .elementor-button {
	padding-block: 12px;
	padding-inline: 2px;
	margin-inline-start: -2px;
}

@media (max-width: 1100px) {
	.sd-work-feature { gap: 40px; grid-template-columns: 1fr 1fr; }
	.sd-work-feature__title { font-size: 34px; }
	.sd-work-pair { gap: 40px; }
	.sd-work-pair > :nth-child(2) { margin-top: 48px; }
}
@media (max-width: 900px) {
	/* Desktop asymmetry is dropped rather than carried into one column, where
	   an offset would just read as an inconsistent gap. */
	.sd-work-feature { grid-template-columns: 1fr; gap: 30px; }
	.sd-work-pair { grid-template-columns: 1fr; gap: 56px; }
	.sd-work-pair > :nth-child(2) { margin-top: 0; }
	.sd-work-feature__media img { aspect-ratio: 16 / 10; }
	.sd-work-card__media img { aspect-ratio: 16 / 10; }
}
@media (max-width: 600px) {
	.sd-work-feature__title { font-size: 30px; }
	.sd-work-card__title { font-size: 24px; }
	.sd-work-range { gap: 10px 26px; }
	.sd-work-range__item { font-size: 17px; }
}


/* --- The form ----------------------------------------------------------
   Formidable renders this markup, not us. The rules below restyle its
   generated output rather than replacing it, so form 1 keeps its field IDs,
   validation, actions and 762 historical entries.

   Formidable's own stylesheet is deliberately left enabled. It carries
   functional rules we must not lose, above all the one that hides the
   honeypot field (.frm_verify). If that stylesheet were dropped, the honeypot
   would become visible, real people would fill it in, and their submissions
   would be silently rejected as spam. We override appearance only, and hide
   the honeypot again below as a second line of defence. */

.sd-form-card {
	background: var(--sd-surface-raised);
	border: 1px solid var(--sd-border-card);
	border-radius: 16px;
	padding: 40px 40px 36px;
}
.sd-form-card__title { font-size: 21px; margin-bottom: 6px; }
.sd-form-card__note { font-size: var(--sd-text-small); color: var(--sd-text-secondary); margin-bottom: 28px; }

/* Reset the plugin's own frame */
.sd-form .frm_forms,
.sd-form .frm_form_fields,
.sd-form fieldset,
.sd-form .frm_fields_container { margin: 0; padding: 0; border: 0; background: none; max-width: none; }
.sd-form .frm_form_title, .sd-form .frm_description { display: none; }

/* Field rows. Formidable emits .frm_half / .frm_full width classes. */
.sd-form .frm_form_field { margin: 0 0 22px; padding: 0; }
.sd-form .frm_form_field:last-child { margin-bottom: 0; }

.sd-form .frm_primary_label {
	display: block;
	margin-bottom: 9px;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.4;
	color: var(--sd-text-primary);
}
.sd-form .frm_required { color: var(--sd-coral-text); font-weight: 700; margin-left: 2px; }

.sd-form input[type="text"],
.sd-form input[type="email"],
.sd-form input[type="tel"],
.sd-form input[type="url"],
.sd-form input[type="number"],
.sd-form select,
.sd-form textarea {
	width: 100%;
	padding: 13px 15px;
	font-family: inherit;
	font-size: 15px;
	line-height: 1.5;
	color: var(--sd-text-primary);
	background: var(--sd-bg);
	border: 1px solid #CFD1C4;
	border-radius: 10px;
	box-shadow: none;
	transition: border-color var(--sd-dur) var(--sd-ease), box-shadow var(--sd-dur) var(--sd-ease);
	-webkit-appearance: none;
	appearance: none;
}
.sd-form textarea { min-height: 132px; resize: vertical; }
.sd-form input::placeholder, .sd-form textarea::placeholder { color: #8A8F85; }

.sd-form input[type="text"]:hover,
.sd-form input[type="email"]:hover,
.sd-form textarea:hover { border-color: #B6B9AB; }

.sd-form input[type="text"]:focus,
.sd-form input[type="email"]:focus,
.sd-form input[type="tel"]:focus,
.sd-form select:focus,
.sd-form textarea:focus {
	outline: none;
	border-color: var(--sd-coral);
	box-shadow: 0 0 0 3px rgba(233, 104, 79, 0.22);
}

/* Checkbox group */
.sd-form .frm_opt_container { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px 22px; }
.sd-form .frm_checkbox { margin: 0; }
.sd-form .frm_checkbox label,
.sd-form .frm_radio label {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	margin: 0;
	font-size: 14.5px;
	line-height: 1.45;
	font-weight: 450;
	color: var(--sd-text-primary);
	cursor: pointer;
}
.sd-form .frm_checkbox input[type="checkbox"],
.sd-form .frm_radio input[type="radio"] {
	flex: none;
	width: 19px; height: 19px;
	margin: 1px 0 0;
	accent-color: var(--sd-coral);
	cursor: pointer;
}
.sd-form .frm_checkbox input[type="checkbox"]:focus-visible,
.sd-form .frm_radio input[type="radio"]:focus-visible {
	outline: 2px solid var(--sd-coral);
	outline-offset: 2px;
}

/* Turnstile sits on its own row with no visible label */
.sd-form .frm_none_container .frm_primary_label { display: none; }
.sd-form .frm-cf-turnstile { margin-top: 2px; }

/* Submit. The submit row is not :last-child (Formidable appends the honeypot
   and its state inputs after it), so the trailing margin has to be removed
   explicitly rather than with a last-child rule. */
.sd-form .frm_submit { margin: 26px 0 0; }
.sd-form .frm_form_field:has(.frm_submit) { margin-bottom: 0; }
.sd-form #frm_field_11_container { margin-bottom: 0; }
.sd-form .frm_button_submit,
.sd-form button[type="submit"] {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	padding: 15px 30px;
	font-family: inherit;
	font-size: 15px;
	font-weight: 600;
	line-height: 1;
	color: var(--sd-on-coral);
	background: var(--sd-coral);
	border: 1px solid var(--sd-coral);
	border-radius: 999px;
	cursor: pointer;
	transition: background var(--sd-dur) var(--sd-ease), transform var(--sd-dur) var(--sd-ease);
	-webkit-appearance: none;
	appearance: none;
}
.sd-form .frm_button_submit:hover,
.sd-form button[type="submit"]:hover { background: var(--sd-coral-hover); transform: translateY(-2px); }
.sd-form .frm_button_submit:focus-visible,
.sd-form button[type="submit"]:focus-visible { outline: 3px solid var(--sd-text-primary); outline-offset: 3px; }
.sd-form .frm_button_submit[disabled], .sd-form .frm_button_submit.frm_loading_button { opacity: 0.62; cursor: progress; transform: none; }

/* Validation */
.sd-form .frm_blank_field input[type="text"],
.sd-form .frm_blank_field input[type="email"],
.sd-form .frm_blank_field textarea,
.sd-form .frm_blank_field select { border-color: #B8402B; background: #FDF3F0; }
.sd-form .frm_error {
	display: block;
	margin-top: 7px;
	font-size: 13.5px;
	line-height: 1.5;
	font-weight: 500;
	color: #9E3622;
}
.sd-form .frm_error_style,
.sd-form .frm_message {
	padding: 17px 19px;
	margin-bottom: 22px;
	border-radius: 11px;
	font-size: 14.5px;
	line-height: 1.6;
}
.sd-form .frm_error_style { background: #FBEDE9; border: 1px solid #E3B3A6; color: #8E3020; }
.sd-form .frm_message   { background: var(--sd-sage); border: 1px solid #C4CFAE; color: var(--sd-sage-deep); }
.sd-form .frm_message p:last-child { margin-bottom: 0; }

/* Honeypot: Formidable's stylesheet hides this. Repeat it here so a future
   change to the plugin's CSS cannot expose it and start rejecting real people. */
.sd-form .frm_verify,
.sd-form #frm_field_12_container { position: absolute !important; left: -9999px !important; width: 1px !important; height: 1px !important; overflow: hidden !important; }

.sd-form .frm_screen_reader {
	position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Shown in place of a live form on an archive page. */
.sd-archived-form {
	padding: 26px 28px;
	background: var(--sd-bg-alt);
	border: 1px dashed var(--sd-border);
	border-radius: 12px;
}
.sd-archived-form__title {
	margin-bottom: 7px;
	font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase;
	font-weight: 700; color: var(--sd-text-secondary);
}
.sd-archived-form__body { font-size: var(--sd-text-small); line-height: 1.6; color: var(--sd-text-secondary); margin: 0; }

.sd-form__privacy { margin-top: 18px; font-size: 13px; line-height: 1.6; color: var(--sd-text-secondary); }
.sd-form__privacy a { color: var(--sd-text-primary); }

@media (max-width: 600px) {
	.sd-form-card { padding: 28px 22px 26px; border-radius: 14px; }
	.sd-form .frm_opt_container { grid-template-columns: 1fr; }
	.sd-form .frm_button_submit, .sd-form button[type="submit"] { width: 100%; }
}

/* --- Winning against Formidable's own stylesheet -----------------------
   formidableforms.css is enqueued after site.css and ships selectors like
   .frm_style_formidable-style.with_frm_style .frm_error (0,3,0) and
   .frm_style_formidable-style.with_frm_style .form-field input:not([type="file"]):focus
   (0,5,1). A plain .sd-form .x rule (0,2,0) loses to those on specificity, and
   a same-specificity rule loses on source order.

   Everything below therefore hangs off .sd-form.sd-form .with_frm_style, which adds a
   class to the chain and takes these rules clear of the plugin's. Only the
   properties the plugin actually contests are repeated here, so this stays a
   short override list rather than a second copy of the component. */

.sd-form.sd-form .with_frm_style .frm_error { color: #9E3622; font-size: 13.5px; font-weight: 500; }
.sd-form.sd-form .with_frm_style .frm_error_style {
	background-color: #FBEDE9; border: 1px solid #E3B3A6; color: #8E3020;
	border-radius: 11px; padding: 17px 19px;
}
.sd-form.sd-form .with_frm_style .frm_message {
	background-color: var(--sd-sage); border: 1px solid #C4CFAE; color: var(--sd-sage-deep);
	border-radius: 11px; padding: 17px 19px;
}

.sd-form.sd-form .with_frm_style input[type="text"],
.sd-form.sd-form .with_frm_style input[type="email"],
.sd-form.sd-form .with_frm_style input[type="tel"],
.sd-form.sd-form .with_frm_style textarea {
	color: var(--sd-text-primary);
	background-color: var(--sd-bg);
	border: 1px solid #CFD1C4;
	border-radius: 10px;
}
.sd-form.sd-form .with_frm_style .form-field input:not([type="file"]):focus,
.sd-form.sd-form .with_frm_style input[type="text"]:focus,
.sd-form.sd-form .with_frm_style input[type="email"]:focus,
.sd-form.sd-form .with_frm_style input[type="tel"]:focus,
.sd-form.sd-form .with_frm_style textarea:focus {
	background-color: var(--sd-bg);
	border-color: var(--sd-coral);
	box-shadow: 0 0 0 3px rgba(233, 104, 79, 0.22);
	outline: none;
}
.sd-form.sd-form .with_frm_style .frm_blank_field input[type="text"],
.sd-form.sd-form .with_frm_style .frm_blank_field input[type="email"],
.sd-form.sd-form .with_frm_style .frm_blank_field input[type="tel"],
.sd-form.sd-form .with_frm_style .frm_blank_field textarea {
	color: var(--sd-text-primary);
	background-color: #FDF3F0;
	border-color: #B8402B;
}
.sd-form.sd-form .with_frm_style .frm_primary_label { font-size: 14px; font-weight: 600; color: var(--sd-text-primary); }
.sd-form.sd-form .with_frm_style .frm_required { color: var(--sd-coral-text); }
.sd-form.sd-form .with_frm_style .frm_button_submit {
	color: var(--sd-on-coral);
	background-color: var(--sd-coral);
	border: 1px solid var(--sd-coral);
	border-radius: 999px;
	padding: 15px 30px;
	font-size: 15px;
	font-weight: 600;
}
.sd-form.sd-form .with_frm_style .frm_button_submit:hover { background-color: var(--sd-coral-hover); }
.sd-form.sd-form .with_frm_style .frm_button_submit:focus-visible { outline: 3px solid var(--sd-text-primary); outline-offset: 3px; }

/* The focus and error states are the one place where raising specificity a
   step at a time does not work. Formidable ships them as

     .frm_style_formidable-style.with_frm_style .form-field
       input:not([type=file]):not([type=range]):not([readonly]):focus

   which is 0,7,1 with hard-coded #66afe9 and #ffffff, so there is no custom
   property to redirect and no shorter selector that beats it. The rules below
   mirror the plugin's own selectors and add .sd-form in front, which lands at
   0,8,1: a deliberate, documented win rather than an !important. If the plugin
   changes these selectors, these overrides stop applying and the fields go
   Formidable-blue on focus, which is visible immediately rather than silent. */

.sd-form .frm_style_formidable-style.with_frm_style .form-field input:not([type=file]):not([type=range]):not([readonly]):focus,
.sd-form .frm_style_formidable-style.with_frm_style select:focus,
.sd-form .frm_style_formidable-style.with_frm_style .form-field textarea:focus {
	background-color: var(--sd-bg);
	border-color: var(--sd-coral);
	color: var(--sd-text-primary);
	box-shadow: 0 0 0 3px rgba(233, 104, 79, 0.22);
}
.sd-form .frm_style_formidable-style.with_frm_style .frm_blank_field input[type=text],
.sd-form .frm_style_formidable-style.with_frm_style .frm_blank_field input[type=email],
.sd-form .frm_style_formidable-style.with_frm_style .frm_blank_field input[type=tel],
.sd-form .frm_style_formidable-style.with_frm_style .frm_blank_field textarea,
.sd-form .frm_style_formidable-style.with_frm_style .frm_form_field :invalid {
	color: var(--sd-text-primary);
	background-color: #FDF3F0;
	border-color: #B8402B;
	border-width: 1px;
	border-style: solid;
}
.sd-form .frm_style_formidable-style.with_frm_style .frm_blank_field input:focus,
.sd-form .frm_style_formidable-style.with_frm_style .frm_blank_field textarea:focus {
	border-color: #B8402B;
	box-shadow: 0 0 0 3px rgba(184, 64, 43, 0.20);
}

/* The service checkboxes carry Formidable's .frm_two_col, whose own rule
   (.frm_form_field.frm_two_col .frm_opt_container) sets a hard two-column
   grid at every width. Ours has to out-specify it rather than sit in a plain
   media query, or the choices stay two-up on a phone. */
.sd-form .frm_form_field.frm_two_col .frm_opt_container {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	grid-gap: 10px 22px;
}
@media (max-width: 600px) {
	.sd-form .frm_form_field.frm_two_col .frm_opt_container { grid-template-columns: 1fr; }
	.sd-form .frm_style_formidable-style.with_frm_style .frm_submit button,
	.sd-form.sd-form .with_frm_style .frm_button_submit { width: 100%; }
}

/* =========================================================================
   10. Hero artwork
   The connected-growth illustration. A fixed 597x517 composition that scales
   with its container using container query units, so the internal geometry
   never has to be re-laid-out per breakpoint.

   Literal colours are intentional here: this is a single illustration, not
   a themeable surface.
   ====================================================================== */

.sd-stage-wrap {
	/* Fallback for engines without trigonometric functions: no scaling, and
	   the wrapper clips rather than pushing the page sideways. */
	--sd-stage-scale: 1;
	display: flex;
	justify-content: center;
	width: 100%;
	height: calc(517px * var(--sd-stage-scale));
	overflow: hidden;
	margin-inline: auto;
}

/* The artwork is a fixed 597x517 composition. Rather than re-laying it out at
   each breakpoint, it is scaled to whatever width its column has.
   tan(atan2(100cqw, 597px)) is the standard way to get a unitless ratio from
   a length in CSS: atan2 returns the angle whose tangent is the ratio of its
   two arguments, and tan turns it back into that ratio. Capped at 1 so the
   artwork never scales up beyond its design size. */
@supports (scale: tan(atan2(1px, 1px))) {
	.sd-stage-wrap {
		--sd-stage-scale: min(1, tan(atan2(100cqw, 597px)));
		overflow: visible;
	}
}

.sd-stage {
	position: relative;
	isolation: isolate;
	flex: none;
	width: 597px;
	height: 517px;
	background: #EEEBDF;
	border-radius: var(--sd-radius-stage);
	transform-origin: top center;
	transform: scale(var(--sd-stage-scale));
	font-family: var(--sd-font-sans);
}

.sd-stage__label {
	position: absolute;
	top: 26px; left: 27px;
	font-size: 9px;
	letter-spacing: 0.13em;
	font-weight: 650;
	color: #565E51;
}
.sd-stage__foot {
	position: absolute;
	bottom: 22px; left: 28px;
	font-size: 9px;
	color: #5D6356;
}

.sd-stage__orbit {
	position: absolute;
	top: 74px; right: 23px;
	width: 365px; height: 365px;
	border: 1px solid #C6CBB5;
	border-radius: 50%;
}
.sd-stage__orbit::before {
	content: '';
	position: absolute;
	inset: 32px;
	border: 1px solid #C6CBB5;
	border-radius: 50%;
}

.sd-stage__window {
	position: absolute;
	left: 28px; top: 91px;
	width: 370px;
	z-index: 2;
	background: #FFFDF5;
	border: 1px solid #D6D6CC;
	border-radius: 13px;
	overflow: hidden;
	transform: rotate(-5deg);
	box-shadow: 0 16px 40px rgba(57, 68, 37, 0.09);
}
.sd-stage__bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	height: 38px;
	padding-inline: 15px;
	background: #FFFDF7;
	border-bottom: 1px solid #DDDFD4;
	font-size: 9px;
	color: #555F52;
}
.sd-stage__dots { font-size: 7px; letter-spacing: 2px; color: #8F9784; }
.sd-stage__bar .sd-icon { width: 13px; height: 13px; }

.sd-stage__preview {
	position: relative;
	height: 257px;
	padding: 18px;
	background: #EEE9D7;
	overflow: hidden;
}
.sd-stage__preview-top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	font-size: 6px;
}
.sd-stage__preview-top b { font-size: 7px; }
.sd-stage__headline {
	position: relative;
	z-index: 2;
	margin-top: 31px;
	font-size: 29px;
	line-height: 1.04;
	letter-spacing: -0.048em;
	font-weight: 750;
	color: var(--sd-text-primary);
}
.sd-stage__headline em { font-style: normal; color: #C45843; }
.sd-stage__cta {
	position: relative;
	z-index: 2;
	display: inline-block;
	margin-top: 20px;
	padding: 9px 13px;
	background: #222B22;
	color: #fff;
	font-size: 7px;
}
.sd-stage__arch {
	position: absolute;
	right: -18px; top: 63px;
	width: 143px; height: 200px;
	background: #E97A5F;
	border-radius: 100px 100px 0 0;
	transform: rotate(13deg);
	display: flex;
	align-items: center;
	justify-content: center;
}
.sd-stage__arch .sd-icon {
	width: 60px; height: 60px;
	color: #2B3929;
	transform: rotate(-13deg);
	stroke-width: 1.2;
}

.sd-stage__slip {
	position: absolute;
	z-index: 3;
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 16px 20px;
	background: #FFFEF8;
	border: 1px solid #E2E2D8;
	border-radius: 12px;
	box-shadow: 0 10px 35px rgba(65, 69, 55, 0.09);
}
.sd-stage__slip > .sd-icon { width: 24px; height: 24px; color: #637650; flex: none; }
.sd-stage__slip b { display: block; font-size: 12px; letter-spacing: -0.02em; }
.sd-stage__slip small { display: block; margin-top: 2px; font-size: 9px; color: #6E7468; }
.sd-stage__slip--search { top: 64px; right: -12px; transform: rotate(5deg); }
.sd-stage__slip--lead { bottom: 69px; right: 14px; transform: rotate(3deg); }

.sd-stage__sticker {
	position: absolute;
	z-index: 4;
	right: 0; bottom: 165px;
	width: 133px; height: 133px;
	border-radius: 50%;
	background: #DCE69B;
	border: 5px solid #EEEBDF;
	transform: rotate(12deg);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	font-size: 12px;
	line-height: 1.35;
	color: var(--sd-text-primary);
}
.sd-stage__sticker b { font-weight: 750; }
.sd-stage__sticker .sd-icon { width: 23px; height: 23px; margin-top: 6px; }


/* --- AI hero artwork --------------------------------------------------------
   Reuses the .sd-stage sizing and scaling machinery from the homepage hero, so
   it inherits the same fixed-composition-scaled-to-column behaviour. Only the
   contents differ: an assistant conversation with two result slips and a
   sticker, showing input, judgement, system action and human handoff.

   Literal colours are intentional, as with the homepage stage: this is one
   fixed illustration rather than a themeable surface. Every fact it shows also
   exists as real page text.
   ---------------------------------------------------------------------- */

.sd-stage--ai { background: #EDEDE0; }

.sd-chat {
	position: absolute;
	left: 30px; top: 83px;
	width: 330px;
	z-index: 2;
	background: #FFFEF7;
	border: 1px solid #DCE0CF;
	border-radius: 15px;
	box-shadow: 0 20px 30px rgba(72, 85, 60, 0.08);
	transform: rotate(-4deg);
	overflow: hidden;
	padding-bottom: 12px;
}
.sd-chat__bar {
	display: flex;
	align-items: center;
	gap: 10px;
	height: 48px;
	padding-inline: 14px;
	border-bottom: 1px solid #E3E5DA;
	font-size: 11px;
	font-weight: 600;
	color: #47523F;
}
.sd-chat__mark {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 25px; height: 25px;
	border-radius: 6px;
	background: #E46B50;
	color: #1C2A1E;
	font-size: 15px;
	font-weight: 800;
}
.sd-chat__dot { width: 6px; height: 6px; border-radius: 50%; background: #698852; margin-left: auto; }
.sd-chat__bubble {
	margin: 14px;
	padding: 12px 15px;
	max-width: 240px;
	border-radius: 12px;
	font-size: 11px;
	line-height: 1.6;
	color: #2A3328;
}
.sd-chat__bubble--from { background: #EEF0E5; margin-left: auto; border-bottom-right-radius: 0; }
.sd-chat__bubble--reply { background: #EDDDCC; border-bottom-left-radius: 0; }
.sd-chat__compose {
	display: flex;
	justify-content: space-between;
	margin: 12px 13px 0;
	padding: 8px 10px;
	border: 1px solid #E3E5DA;
	border-radius: 8px;
	font-size: 10px;
	color: #5E6655;
}
.sd-stage__slip--qual { top: 122px; right: -3px; transform: rotate(5deg); }
.sd-stage__slip--person { bottom: 58px; right: 3px; transform: rotate(3deg); }
.sd-stage--ai .sd-stage__sticker { bottom: 161px; right: 0; background: #EF8E72; }

/* =========================================================================
   11. Elementor bridge
   Neutralises Elementor and Hello defaults that would otherwise fight the
   system. Kept as small as possible.
   ====================================================================== */

/* Elementor's container stylesheet loads after this file and sets padding and
   border-radius through custom properties:
       .e-con-full, .e-con > .e-con-inner { padding-block-start: var(--padding-block-start) }
       .e-con { border-radius: var(--border-radius) }
   A single class cannot beat that reliably, so every container-level component
   is re-asserted here at .e-con + class specificity. Component definitions
   above stay portable: they are what applies in header.php, footer.php and
   anywhere outside the builder. */

.e-con.sd-section        { padding-block: var(--sd-section-y); padding-inline: 0; }
.e-con.sd-section--tight { padding-block: calc(var(--sd-section-y) * 0.6); }
.e-con.sd-hero           { padding-block: 78px 84px; padding-inline: 0; }
.e-con.sd-manifesto      { padding-block: 85px; padding-inline: 0; }
.e-con.sd-cta            { padding-block: 76px 73px; padding-inline: 0; }
.e-con.sd-container {
	width: min(var(--sd-content-max), 100% - var(--sd-gutter));
	max-width: none;
	margin-inline: auto;
	padding-inline: 0;
	padding-block: 0;
}
.e-con.sd-proof          { padding-block: 0; padding-inline: 0; }

.e-con.sd-service-card   { padding: 28px; border-radius: var(--sd-radius-card); }
.e-con.sd-panel          { padding: 42px; border-radius: var(--sd-radius-panel); }
.e-con.sd-notice         { padding: 27px 30px; border-radius: 13px; }
.e-con.sd-step           { padding: var(--sd-space-xs) 0 0; border-radius: 0; }
.e-con.sd-case-card      { padding: 0; border-radius: 0; }
.e-con.sd-hero__copy,
.e-con.sd-hero__figure,
.e-con.sd-section-head,
.e-con.sd-hero__actions,
.e-con.sd-steps,
.e-con.sd-grid-2,
.e-con.sd-grid-3,
.e-con.sd-split,
.e-con.sd-cta__bottom,
.e-con.sd-proof__inner,
.e-con.sd-manifesto__copy,
.e-con.sd-panel__copy,
.e-con.sd-panel__figure,
.e-con.sd-notice__copy,
.e-con.sd-case-card__caption,
.e-con.sd-service-card__foot { padding: 0; border-radius: 0; }

@media (max-width: 1100px) { .e-con.sd-panel { padding: 34px; } }
@media (max-width: 900px)  { .e-con.sd-hero { padding-block: 55px; } .e-con.sd-manifesto,
                             .e-con.sd-cta { padding-block: var(--sd-section-y); } }
@media (max-width: 600px)  { .e-con.sd-hero { padding-block: 43px 42px; }
                             .e-con.sd-panel { padding: var(--sd-space-xs); }
                             .e-con.sd-notice { padding: var(--sd-space-xs); } }

/* Elementor also drives layout through custom properties on .e-con
   (--display, --flex-direction, --gap, --justify-content, --align-items).
   Container components that define their own layout are re-asserted here for
   the same reason as padding above. Everything else about them still comes
   from the single definition earlier in this file. */

.e-con.sd-split {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--sd-split-gap);
	align-items: center;
}
.e-con.sd-split--top { align-items: start; }
.e-con.sd-grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sd-grid-gap); }
.e-con.sd-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sd-grid-gap); }
.e-con.sd-steps  { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; }
.e-con.sd-panel  { display: grid; grid-template-columns: 1fr 1.1fr; gap: 60px; align-items: center; }

.e-con.sd-section-head {
	display: flex;
	flex-direction: row;
	align-items: flex-end;
	justify-content: space-between;
	gap: 60px;
}
.e-con.sd-hero__actions {
	display: flex; flex-direction: row; align-items: center;
	gap: var(--sd-space-xs); flex-wrap: wrap;
}
.e-con.sd-proof__inner {
	display: flex; flex-direction: row; align-items: center;
	justify-content: space-between; gap: 30px; flex-wrap: wrap;
}
.e-con.sd-notice {
	display: flex; flex-direction: row; align-items: center; gap: 22px; flex-wrap: nowrap;
}
/* The trailing action keeps its own line and never wraps mid-label. */
.sd-notice .sd-link-el { flex: none; margin-left: auto; }
.sd-notice .sd-link-el.sd-link-el .elementor-button { white-space: nowrap; }
@media (max-width: 600px) {
	.sd-notice .sd-link-el { margin-left: 0; width: 100%; }
}
.e-con.sd-cta__bottom {
	display: flex; flex-direction: row; align-items: center;
	justify-content: space-between; gap: 50px; flex-wrap: wrap;
}
.e-con.sd-case-card__caption {
	display: flex; flex-direction: row; align-items: flex-start;
	justify-content: space-between; gap: var(--sd-space-2xs);
}
.e-con.sd-hero__copy,
.e-con.sd-panel__copy { display: flex; flex-direction: column; align-items: flex-start; }
.e-con.sd-hero__figure {
	display: flex;
	flex-direction: column;
	justify-content: center;
	container-type: inline-size;
}
.e-con.sd-step,
.e-con.sd-service-card,
.e-con.sd-manifesto__copy,
.e-con.sd-notice__copy,
.e-con.sd-section-head__intro { display: flex; flex-direction: column; }
.e-con.sd-service-card__foot { margin-top: auto; padding-top: var(--sd-space-sm); }
.e-con.sd-case-card { display: flex; flex-direction: column; }

/* Elementor applies a default 20px gap between stacked widgets and containers
   via --widgets-spacing, and zeroes component margins through
   ".e-con { margin-block-end: var(--margin-block-end) }". Together those meant
   spacing was silently coming from Elementor rather than from this file.
   The gap is switched off here so every gap is declared by a component, and
   the container-level margins the design specifies are restated at .e-con
   specificity. Widget-level margins already work, because widgets are not
   .e-con elements. */
.sd-main .e-con { --widgets-spacing: 0px 0px; }

.e-con.sd-section-head { margin-bottom: 46px; }
.e-con.sd-scope-lists  { margin-top: var(--sd-space-sm); }
.e-con.sd-hero__actions { margin-top: var(--sd-space-sm); }
.e-con.sd-panel--after-grid { margin-top: 25px; }
.e-con.sd-notice { margin-top: 65px; }
.e-con.sd-cta__bottom { margin-top: 38px; }

@media (max-width: 900px) {
	.e-con.sd-section-head { margin-bottom: 32px; }
	.e-con.sd-notice { margin-top: var(--sd-space-md); }
}
@media (max-width: 600px) {
	.e-con.sd-section-head { margin-bottom: 30px; }
}

/* Automation-page components, re-asserted at .e-con specificity. Every
   container-level class on the AI page needs an entry here; the raw-HTML
   components (tools strip, timeline, workflow grid) do not, because they are
   not .e-con elements. */
.e-con.sd-solutions { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.e-con.sd-solution-card {
	display: flex;
	flex-direction: column;
	padding: 28px 27px 24px;
	border-radius: 14px;
}
.e-con.sd-solution-card__foot { padding: 0; border-radius: 0; margin-top: auto; }
.e-con.sd-engagement { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.e-con.sd-engagement-card { display: flex; flex-direction: column; padding: 30px; border-radius: 14px; }
.e-con.sd-benefit-strip { padding: 0; border-radius: 0; }
.e-con.sd-workflow { padding-block: 78px 48px; padding-inline: 0; border-radius: 0; }
.e-con.sd-control { padding-block: 60px; padding-inline: 0; border-radius: 0; }
/* The .sd-stage artwork sizes itself from 100cqw, so whichever column holds it
   must be the query container. The homepage uses .sd-hero__figure; the service
   pages use .sd-page-hero__media. Both need it, or the stage renders at its
   full 597px and overflows its column. */
.e-con.sd-page-hero--media .sd-page-hero__media { padding: 0; container-type: inline-size; }

/* Blog, re-asserted at .e-con specificity. */
.e-con.sd-blog-intro { padding-block: var(--sd-section-y) 0; padding-inline: 0; border-radius: 0; }

/* Our Work, re-asserted at .e-con specificity. */
.e-con.sd-work-feature { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 56px; align-items: center; padding: 0; }
.e-con.sd-work-feature__media { padding: 0; border-radius: 16px; overflow: hidden; }
.e-con.sd-work-feature__body { display: flex; flex-direction: column; padding: 0; }
.e-con.sd-work-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 54px; align-items: start; padding: 0; }
.e-con.sd-work-pair > :nth-child(2) { margin-top: 74px; }
.e-con.sd-work-card { display: flex; flex-direction: column; padding: 0; border-radius: 0; }
.e-con.sd-work-intro { padding-block: var(--sd-section-y) 0; padding-inline: 0; border-radius: 0; }
/* Elementor zeroes child margins inside .e-con, so every gap between these
   parts has to be restated here or the image, title, copy and tags all stack
   flush against each other. */
.e-con.sd-work-feature__foot { padding: 0; border-radius: 0; margin-top: 24px; gap: 20px; }
.e-con.sd-work-card__foot { padding: 0; border-radius: 0; margin-top: auto; padding-top: 4px; gap: 18px; }
.e-con.sd-work-card__media { padding: 0; border-radius: 14px; overflow: hidden; margin-bottom: 24px; }
.e-con.sd-work-feature__media { margin: 0; }
.sd-main .e-con.sd-work-card > .elementor-widget,
.sd-main .e-con.sd-work-feature__body > .elementor-widget { margin-bottom: 0; }
.sd-main .e-con.sd-work-card .sd-work-card__context { margin-bottom: 14px; }
.sd-main .e-con.sd-work-card .sd-work-card__body { margin-bottom: 18px; }
.sd-main .e-con.sd-work-feature__body .sd-work-feature__context { margin-bottom: 18px; }

/* Contact page, re-asserted at .e-con specificity. */
.e-con.sd-contact { padding-block: var(--sd-section-y) 0; padding-inline: 0; border-radius: 0; }
.e-con.sd-contact__inner { display: flex; flex-direction: row; align-items: flex-start; gap: 64px; padding: 0; }
.e-con.sd-contact__intro { flex: 0 1 452px; padding: 6px 0 0; }
.e-con.sd-contact__form { flex: 1 1 560px; min-width: 0; padding: 0; }
.e-con.sd-form-card { display: flex; flex-direction: column; padding: 40px 40px 36px; border-radius: 16px; }
.e-con.sd-reach { display: grid; grid-template-columns: repeat(3, 1fr); gap: 34px; padding: 0; }
.e-con.sd-reach__item { display: flex; flex-direction: column; gap: 7px; padding: 0; }
.e-con.sd-next { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; padding: 0; }
.e-con.sd-next__item { display: flex; flex-direction: column; padding: 20px 0 0; border-radius: 0; }

@media (max-width: 1100px) {
	.e-con.sd-solutions { grid-template-columns: repeat(2, 1fr); }
	.e-con.sd-engagement { grid-template-columns: repeat(2, 1fr); }
	.e-con.sd-contact__inner { gap: 44px; }
	.e-con.sd-contact__intro { flex-basis: 380px; }
	.e-con.sd-work-feature { grid-template-columns: 1fr 1fr; gap: 40px; }
	.e-con.sd-work-pair { gap: 40px; }
	.e-con.sd-work-pair > :nth-child(2) { margin-top: 48px; }
}
@media (max-width: 900px) {
	.e-con.sd-workflow { padding-block: var(--sd-section-y); }
	.e-con.sd-control { padding-block: var(--sd-section-y); }
	.e-con.sd-contact__inner { flex-direction: column; gap: 44px; }
	.e-con.sd-contact__intro, .e-con.sd-contact__form { flex: 1 1 auto; width: 100%; }
	.e-con.sd-reach, .e-con.sd-next { grid-template-columns: 1fr; gap: 26px; }
	.e-con.sd-work-feature { grid-template-columns: 1fr; gap: 30px; }
	.e-con.sd-work-pair { grid-template-columns: 1fr; gap: 56px; }
	.e-con.sd-work-pair > :nth-child(2) { margin-top: 0; }
}
@media (max-width: 700px) {
	.e-con.sd-solutions { grid-template-columns: 1fr; }
	.e-con.sd-engagement { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
	.e-con.sd-form-card { padding: 28px 22px 26px; border-radius: 14px; }
}

/* Service-page components, re-asserted at .e-con specificity. */
.e-con.sd-capability-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 44px 48px; }
.e-con.sd-capability { display: flex; flex-direction: column; padding: 0; border-radius: 0; }
.e-con.sd-page-hero--media .sd-page-hero__inner,
.e-con.sd-page-hero__inner.sd-page-hero__inner--media { grid-template-columns: 1fr 1fr; align-items: center; }
.e-con.sd-page-hero__media { padding: 0; border-radius: 0; display: flex; flex-direction: column; }

/* Editorial components, re-asserted at .e-con specificity for the same
   reason as everything else in this block. */
.e-con.sd-editorial {
	display: grid;
	grid-template-columns: 1fr 1.35fr;
	gap: var(--sd-split-gap);
	align-items: start;
}
.e-con.sd-principles { display: grid; grid-template-columns: repeat(2, 1fr); gap: 44px 56px; }
/* Declared after the base rule: a modifier that shares its base class loses
   to it otherwise, whatever the source order of the two blocks. */
.e-con.sd-principles--3 { grid-template-columns: repeat(3, 1fr); gap: 40px 48px; }
.e-con.sd-steps--four { display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; }
.e-con.sd-principle {
	display: flex;
	flex-direction: column;
	border-top: 1px solid var(--sd-border);
	padding: var(--sd-space-xs) 0 0;
	border-radius: 0;
}
.e-con.sd-band--ink .sd-principle,
.e-con.sd-principle.sd-principle--on-ink { border-top-color: var(--sd-border-on-ink); }
.e-con.sd-editorial__aside,
.e-con.sd-editorial__body,
.e-con.sd-page-hero__head,
.e-con.sd-page-hero__side { padding: 0; border-radius: 0; }
.e-con.sd-page-hero__inner {
	display: grid;
	grid-template-columns: 1.1fr 0.9fr;
	gap: var(--sd-split-gap);
	align-items: end;
	padding: 0;
	border-radius: 0;
}
.e-con.sd-page-hero__head { display: flex; flex-direction: column; }
.e-con.sd-page-hero__side { display: flex; flex-direction: column; }
.e-con.sd-editorial__aside { position: sticky; top: calc(var(--sd-header-h) + 24px); }
.e-con.sd-page-hero { padding-block: 84px 72px; padding-inline: 0; }

@media (max-width: 1100px) {
	.e-con.sd-steps--four { grid-template-columns: repeat(2, 1fr); gap: var(--sd-space-sm); }
	.e-con.sd-panel { gap: 36px; }
}
@media (max-width: 900px) {
	.e-con.sd-split, .e-con.sd-panel { grid-template-columns: 1fr; }
	.e-con.sd-grid-3 { grid-template-columns: 1fr 1fr; }
	.e-con.sd-grid-3 > :last-child:nth-child(3) { grid-column: span 2; }
	.e-con.sd-steps { grid-template-columns: 1fr; gap: var(--sd-space-xs); }
	.e-con.sd-steps--four { grid-template-columns: repeat(2, 1fr); gap: var(--sd-space-sm); }
	.e-con.sd-section-head { flex-direction: column; align-items: flex-start; gap: 20px; }
	.e-con.sd-proof__inner { justify-content: flex-start; gap: var(--sd-space-xs); }
	.e-con.sd-hero__split { grid-template-columns: 1fr; }
	.e-con.sd-editorial { grid-template-columns: 1fr; gap: var(--sd-space-xs); }
	.e-con.sd-editorial__aside { position: static; }
	.e-con.sd-principles { grid-template-columns: 1fr; gap: var(--sd-space-sm); }
	.e-con.sd-principles--3 { grid-template-columns: 1fr; }
	.e-con.sd-capability-grid { grid-template-columns: 1fr 1fr; gap: var(--sd-space-sm); }
	.e-con.sd-page-hero--media .sd-page-hero__inner,
	.e-con.sd-page-hero__inner.sd-page-hero__inner--media { grid-template-columns: 1fr; }
	.e-con.sd-page-hero { padding-block: 58px 52px; }
	.e-con.sd-page-hero__inner { grid-template-columns: 1fr; gap: var(--sd-space-sm); align-items: start; }
}
@media (max-width: 600px) {
	.e-con.sd-grid-2, .e-con.sd-grid-3 { grid-template-columns: 1fr; }
	.e-con.sd-grid-3 > :last-child:nth-child(3) { grid-column: auto; }
	.e-con.sd-cta__bottom { flex-direction: column; align-items: flex-start; gap: var(--sd-space-xs); }
	.e-con.sd-notice { flex-wrap: wrap; gap: var(--sd-space-2xs); }
	.e-con.sd-steps--four { grid-template-columns: 1fr; gap: var(--sd-space-xs); }
	.e-con.sd-capability-grid { grid-template-columns: 1fr; gap: var(--sd-space-xs); }
	.e-con.sd-page-hero { padding-block: 44px 40px; }
}

/* The Elementor kit emits ".elementor-kit-11 a { color: … }" at two-class
   specificity, which would beat every button and link component. Link colour
   is owned by this file, so those rules are overridden here rather than in
   Site Settings. */
.elementor-kit-11 a.sd-btn,
.elementor-kit-11 a.sd-link,
.elementor-kit-11 a.sd-nav__link,
.elementor-kit-11 a.sd-nav__sublink,
.elementor-kit-11 a.sd-brand,
.elementor-kit-11 .sd-footer a { color: inherit; }

.elementor-kit-11 a.sd-btn          { color: var(--sd-on-coral); }
.elementor-kit-11 a.sd-btn--ink     { color: var(--sd-on-ink); }
.elementor-kit-11 a.sd-btn--ghost   { color: var(--sd-text-primary); }
.elementor-kit-11 a.sd-btn--light   { color: var(--sd-text-primary); }
.elementor-kit-11 a.sd-nav__link,
.elementor-kit-11 a.sd-nav__sublink,
.elementor-kit-11 a.sd-brand        { color: var(--sd-text-primary); }
.elementor-kit-11 a.sd-nav__link:hover,
.elementor-kit-11 a.sd-nav__sublink:hover { color: var(--sd-coral-text); }
.elementor-kit-11 .sd-footer a      { color: var(--sd-on-ink); }
.elementor-kit-11 .sd-footer a:hover { color: var(--sd-coral-on-ink); }
.elementor-kit-11 .sd-band--ink a,
.elementor-kit-11 .sd-band--coral a { color: inherit; }

/* Hello Elementor styles bare <button> elements. Reset the ones we own. */
button.sd-menu-toggle,
button.sd-nav__toggle,
.sd-faq summary {
	background: none;
	border: 0;
	border-radius: 0;
	color: inherit;
	box-shadow: none;
	text-shadow: none;
	padding-inline: 0;
}
button.sd-nav__toggle { padding-block: 6px; }
button.sd-menu-toggle { padding-block: 10px; min-width: 44px; min-height: 44px; }
/* Keep the disclosure's own padding: it is what makes the whole row a
   target rather than just the line of text. */
.sd-faq summary { padding-block: 21px; }


/* Elementor's button widget inherits the kit link colour too. */
.elementor-kit-11 .sd-btn-el.sd-btn-el .elementor-button { color: var(--sd-on-coral); }
.elementor-kit-11 .sd-btn-el--ink.sd-btn-el--ink .elementor-button { color: var(--sd-on-ink); }
.elementor-kit-11 .sd-btn-el--quiet.sd-btn-el--quiet .elementor-button { color: var(--sd-text-primary); }
.elementor-kit-11 .sd-link-el.sd-link-el .elementor-button { color: var(--sd-text-primary); }
.elementor-kit-11 .sd-btn-el--quiet.sd-btn-el--quiet .elementor-button:hover,
.elementor-kit-11 .sd-link-el.sd-link-el .elementor-button:hover { color: var(--sd-coral-text); }
.elementor-kit-11 .sd-panel .sd-link-el.sd-link-el .elementor-button { color: var(--sd-text-primary); }

/* Widgets carrying a component class should not inherit widget margins. */
.elementor-widget:where(.sd-eyebrow, .sd-h1, .sd-h2, .sd-h3, .sd-h4, .sd-lead, .sd-small) { margin-bottom: 0; }

/* Elementor text-editor wraps content in <p>; kill the trailing margin. */
.elementor-widget-text-editor p:last-child { margin-bottom: 0; }

/* Hello Elementor's default heading rhythm. */
.sd-main :where(h1, h2, h3, h4, h5, h6) { margin-block: 0; }


/* -------------------------------------------------------------------------
   Elementor button widget, styled as the system's button and link
   components, so the page keeps real editable widgets with link fields
   instead of hand-written anchors inside HTML widgets.

   Elementor's own rule is ".elementor-widget-button .elementor-button"
   (two classes) and its stylesheet loads after this file, so each component
   class is doubled here to reach three classes and win outright. The
   trailing arrow is a CSS mask, so no icon library is loaded.
   ---------------------------------------------------------------------- */

.sd-btn-el.sd-btn-el .elementor-button,
.sd-link-el.sd-link-el .elementor-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-family: var(--sd-font-sans);
	text-decoration: none;
	text-shadow: none;
	box-shadow: none;
	transition: background var(--sd-dur) var(--sd-ease),
	            color var(--sd-dur) var(--sd-ease),
	            transform var(--sd-dur) var(--sd-ease),
	            border-color var(--sd-dur) var(--sd-ease);
}

.sd-btn-el.sd-btn-el .elementor-button::after,
.sd-link-el.sd-link-el .elementor-button::after {
	content: '';
	flex: none;
	background-color: currentColor;
	-webkit-mask-repeat: no-repeat;  mask-repeat: no-repeat;
	-webkit-mask-position: center;   mask-position: center;
	-webkit-mask-size: contain;      mask-size: contain;
	transition: transform var(--sd-dur) var(--sd-ease);
}

.sd-btn-el.sd-btn-el .elementor-button::after {
	width: 20px; height: 20px;
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.65' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.65' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E");
}

.sd-link-el.sd-link-el .elementor-button::after {
	width: 19px; height: 19px;
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.65' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 18 18 6M6 6h12v12'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.65' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 18 18 6M6 6h12v12'/%3E%3C/svg%3E");
}

.sd-btn-el.sd-btn-el .elementor-button {
	gap: var(--sd-space-xs);
	min-height: 54px;
	padding: 15px 22px;
	border: 1px solid transparent;
	border-radius: var(--sd-radius-btn);
	background-color: var(--sd-coral);
	color: var(--sd-on-coral);
	font-size: var(--sd-text-ui);
	font-weight: var(--sd-weight-heading);
	line-height: 1.4;
	fill: currentColor;
}
.sd-btn-el.sd-btn-el .elementor-button:hover {
	background-color: var(--sd-coral-hover);
	color: var(--sd-on-coral);
	transform: translateY(-2px);
}

.sd-btn-el--ink.sd-btn-el--ink .elementor-button { background-color: var(--sd-ink-band); color: var(--sd-on-ink); }
.sd-btn-el--ink.sd-btn-el--ink .elementor-button:hover { background-color: #303a30; color: var(--sd-on-ink); }

.sd-btn-el--quiet.sd-btn-el--quiet .elementor-button {
	gap: 12px;
	padding-inline: 0;
	background-color: transparent;
	border-color: transparent;
	color: var(--sd-text-primary);
}
.sd-btn-el--quiet.sd-btn-el--quiet .elementor-button::after { width: 18px; height: 18px; }
.sd-btn-el--quiet.sd-btn-el--quiet .elementor-button:hover {
	background-color: transparent;
	color: var(--sd-coral-text);
	transform: none;
}
.sd-btn-el--quiet.sd-btn-el--quiet .elementor-button:hover::after { transform: translateX(3px); }

.sd-link-el.sd-link-el .elementor-button {
	justify-content: space-between;
	gap: var(--sd-space-2xs);
	padding: 0;
	min-height: 0;
	background-color: transparent;
	border: 0;
	border-radius: 0;
	color: var(--sd-text-primary);
	font-size: 13px;
	font-weight: var(--sd-weight-heading);
	line-height: 1.4;
}
.sd-link-el.sd-link-el .elementor-button:hover { color: var(--sd-coral-text); background-color: transparent; }
.sd-link-el.sd-link-el .elementor-button:hover::after { transform: translate(3px, -3px); }
.sd-link-el--wide.sd-link-el--wide .elementor-button { width: 100%; }

/* Elementor wraps the label in a span; let it collapse so flex gap applies
   between the label and the arrow. */
.sd-btn-el.sd-btn-el .elementor-button-content-wrapper,
.sd-link-el.sd-link-el .elementor-button-content-wrapper { display: contents; }

@media (max-width: 600px) {
	.sd-btn-el.sd-btn-el:not(.sd-btn-el--quiet) .elementor-button { width: 100%; }
}

/* Target size. WCAG 2.2 AA asks for 24x24 CSS px. Card, panel and footer
   links are visually small by design, so the target is grown with padding
   at touch widths rather than by changing the type. */
@media (max-width: 900px) {
	.sd-link-el.sd-link-el .elementor-button { min-height: 30px; }
	.sd-footer__links a,
	.sd-footer__col > a { padding-block: 5px; }
	.sd-footer__col { gap: 4px; }
	.sd-footer__legal a { padding-block: 5px; display: inline-block; }
}


/* -------------------------------------------------------------------------
   Dark-band colour overrides.

   Component body copy defaults to --sd-text-secondary (#626761). That is
   5.45:1 on cream but only 2.52:1 on the ink band, which fails WCAG AA. Every
   component that can appear inside a dark band switches to
   --sd-on-ink-muted (8.95:1) here.

   Written out in full rather than wrapped in :where(): :where() contributes
   zero specificity, so an earlier attempt tied with the component rules and
   lost on source order. Each selector also targets the element Elementor
   renders inside the widget, because the colour is set on that element and
   would otherwise beat any rule on an ancestor.
   ---------------------------------------------------------------------- */

.sd-band--ink .sd-step__body,
.sd-band--ink .sd-step__body p,
.sd-band--ink .sd-capability__body,
.sd-band--ink .sd-capability__body p,
.sd-band--ink .sd-service-card__body,
.sd-band--ink .sd-service-card__body p,
.sd-band--ink .sd-principle__body,
.sd-band--ink .sd-principle__body p,
.sd-band--ink .sd-section-head__note,
.sd-band--ink .sd-section-head__note p,
.sd-band--ink .sd-panel__body,
.sd-band--ink .sd-panel__body p,
.sd-band--ink .sd-prose-col,
.sd-band--ink .sd-prose-col p,
.sd-band--ink .sd-faq__intro,
.sd-band--ink .sd-faq__intro p,
.sd-band--ink .sd-small,
.sd-band--ink .sd-small p,
.sd-band--ink .sd-muted,
.sd-band--ink .sd-muted p,
.sd-band--ink .sd-marklist li { color: var(--sd-on-ink-muted); }

.sd-band--ink .sd-eyebrow,
.sd-band--ink .sd-eyebrow p,
.sd-band--ink .sd-eyebrow .elementor-heading-title { color: var(--sd-on-ink-faint); }

.sd-band--ink .sd-step__no,
.sd-band--ink .sd-step__no .elementor-heading-title,
.sd-band--ink .sd-principle__no,
.sd-band--ink .sd-principle__no .elementor-heading-title { color: var(--sd-coral-on-ink); }

.sd-band--ink .sd-step,
.sd-band--ink .sd-principle,
.sd-band--ink .e-con.sd-step,
.sd-band--ink .e-con.sd-principle { border-top-color: var(--sd-border-on-ink); }

/* The coral band carries dark text, so components that default to the muted
   grey need the same treatment there. */
.sd-band--coral .sd-section-head__note,
.sd-band--coral .sd-section-head__note p,
.sd-band--coral .sd-cta__copy,
.sd-band--coral .sd-cta__copy p,
.sd-cta .sd-cta__copy,
.sd-cta .sd-cta__copy p { color: var(--sd-on-coral); }

/* The eyebrow above a CTA headline previously carried opacity: 0.72, which
   dropped it to 2.16:1 on the coral band. Opacity is not a safe way to mute
   text on a coloured ground. */
.sd-cta .sd-eyebrow,
.sd-cta .sd-eyebrow p,
.sd-cta .sd-eyebrow .elementor-heading-title,
.sd-band--coral .sd-eyebrow,
.sd-band--coral .sd-eyebrow .elementor-heading-title { color: var(--sd-on-coral); opacity: 1; }


/* =========================================================================
   12. Accessibility and motion
   ====================================================================== */

/* Written out rather than wrapped in :where(), which has zero specificity and
   lost to the browser and plugin defaults. */
a:focus-visible,
button:focus-visible,
summary:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
details:focus-visible,
[tabindex]:focus-visible,
.elementor-button:focus-visible {
	outline: 3px solid var(--sd-focus);
	outline-offset: 4px;
	border-radius: 3px;
}

.sd-band--ink :focus-visible,
.sd-footer :focus-visible,
.sd-band--coral :focus-visible {
	outline-color: var(--sd-focus-on-ink);
}

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
	.sd-btn:hover, .sd-service-card:hover { transform: none; }
}

@media (prefers-reduced-motion: no-preference) {
	html { scroll-behavior: smooth; }
}

/* Anchored sections clear the sticky-ish header */
[id] { scroll-margin-top: calc(var(--sd-header-h) + 16px); }


/* =========================================================================
   13. Legacy compatibility shim
   =========================================================================
   Pages that have not been redesigned yet (Contact, the four service pages,
   Our Work, Blog, the portfolio single template) reference Astra's Elementor
   global colours by id, for example globals/colors?id=astglobalcolor4, which
   Elementor renders as var(--e-global-color-astglobalcolor4).

   Astra used to define those variables. It is no longer the active theme, so
   without this block those pages would lose every colour that referenced
   them and fall back to inherited values.

   Values are Astra's defaults as they were emitted on this site immediately
   before the theme switch, captured from
   /uploads/astra/astra-theme-dynamic-css-post-1573.css.

   REMOVE each declaration as its pages are redesigned onto the Warm Operator
   system. This block should be empty, and then deleted, by the end of the
   redesign.
   ====================================================================== */

:root {
	--ast-global-color-0: #0170B9;
	--ast-global-color-1: #3A3A3A;
	--ast-global-color-2: #3A3A3A;
	--ast-global-color-3: #4B4F58;
	--ast-global-color-4: #F5F5F5;
	--ast-global-color-5: #FFFFFF;
	--ast-global-color-6: #E5E5E5;
	--ast-global-color-7: #424242;
	--ast-global-color-8: #000000;

	--e-global-color-astglobalcolor0: #0170B9;
	--e-global-color-astglobalcolor1: #3A3A3A;
	--e-global-color-astglobalcolor2: #3A3A3A;
	--e-global-color-astglobalcolor3: #4B4F58;
	--e-global-color-astglobalcolor4: #F5F5F5;
	--e-global-color-astglobalcolor5: #FFFFFF;
	--e-global-color-astglobalcolor6: #E5E5E5;
	--e-global-color-astglobalcolor7: #424242;
	--e-global-color-astglobalcolor8: #000000;

	/* Astra container width, referenced by legacy Elementor sections. */
	--ast-normal-container-width: 1200px;
	--ast-narrow-container-width: 750px;
}