/*
 * Layam ODC page
 * Values taken from the reference build (layam-australia-homepage.lovable.app,
 * styles-qtW6BCsL.css). Colours are the reference OKLCH tokens converted to sRGB.
 * Breakpoints: 640px (sm) · 768px (md) · 1024px (lg).
 *
 * Specificity: base reset uses `html body .layam-odc …` (0,1,2) so it beats
 * theme/Elementor-kit element rules; components use `.layam-odc .layam-…` (0,2,0)
 * so they beat the reset.
 */

/* ------------------------------------------------------------------ Tokens */
.layam-odc {
	/* Layam Visual Brand Guidelines v1.4 - core palette (p.8-9) */
	--layam-primary: #cc2f2a;        /* Layam Red R500 - ownership, CTA, key numbers */
	--layam-primary-deep: #851f1b;   /* R800 - hover / stronger contrast */
	--layam-secondary: #f5f5f3;      /* Warm Paper */
	--layam-accent: #36b8b5;         /* Layam Teal T500 - flow, icons, accents (never small text on white) */
	--layam-accent-text: #237876;    /* Deep Teal T800 - small text and links on light backgrounds */
	--layam-accent-light: #7cd1cf;   /* T300 - light teal accent on dark / photographic backgrounds */
	--layam-accent-soft: #e8f7f6;    /* Pale Teal - process blocks */
	--layam-accent-soft-2: #e1f4f4;  /* T100 */
	--layam-cream: #f4f1ec;          /* Layam Cream - warm editorial sections */
	--layam-ink: 18, 23, 26;         /* Deep Ink (RGB) for translucent plates over photography */
	--layam-teal: #023e40;           /* legacy, no longer used for surfaces */
	--layam-teal-fg: #eef7f7;
	--layam-text: #3b3e41;           /* Charcoal - headings and body copy */
	--layam-muted: #5f6467;          /* supporting / context text only */
	--layam-muted-bg: #f5f5f3;       /* Warm Paper - section breaks */
	--layam-border: #dbdee1;         /* light rules */
	--layam-card: #ffffff;
	--layam-background: #ffffff;
	--layam-on-dark-2: #d9dde0;      /* secondary text on dark / photographic (p.10) */
	--layam-radius: 4px;
	--layam-shadow: 0 12px 32px -16px rgba(59, 62, 65, .25);
	--layam-ease: cubic-bezier(.4, 0, .2, 1);
	--layam-font: "Inter", Arial, Helvetica, sans-serif;   /* p.11 CSS font stack */
	--layam-gutter: 24px;            /* side padding: 24 phones, 32 tablet, 48 desktop (p.13: 32-64px) */
	--layam-header-h: 80px;          /* sticky header height excl. 1px border */
}

/* ------------------------------------------------------------------ Page-level */
html:has(.layam-odc) {
	scroll-behavior: smooth;
	scroll-padding-top: calc(var(--layam-header-h, 80px) + 1px + var(--wp-admin--admin-bar--height, 0px));
}

body.layam-odc-chrome-reference {
	margin: 0;
	background: #fff;
}

/* Site-theme header/footer mode: let the sections run full width. */
body.layam-odc-chrome-theme #content.site-content,
body.layam-odc-chrome-theme .ast-container {
	max-width: none;
	width: 100%;
	padding-left: 0;
	padding-right: 0;
	display: block;
}

body.layam-odc-chrome-theme .pbmit-title-bar-wrapper {
	display: none;
}

/* ------------------------------------------------------------------ Base (Tailwind v4 preflight, scoped) */
.layam-odc {
	font-family: var(--layam-font);
	font-size: 16px;
	line-height: 1.5;
	color: var(--layam-text);
	background: var(--layam-background);
	-webkit-font-smoothing: antialiased;
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
	tab-size: 4;
	-webkit-tap-highlight-color: transparent;
	text-align: left;
	letter-spacing: normal;
}

html body .layam-odc *,
html body .layam-odc *::before,
html body .layam-odc *::after {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
	border: 0 solid var(--layam-border);
}

html body .layam-odc h1,
html body .layam-odc h2,
html body .layam-odc h3,
html body .layam-odc h4,
html body .layam-odc h5,
html body .layam-odc h6 {
	font-family: inherit;
	font-size: inherit;
	font-weight: inherit;
	line-height: inherit;
	letter-spacing: inherit;
	text-transform: none;
	color: inherit;
}

html body .layam-odc p,
html body .layam-odc li,
html body .layam-odc dt,
html body .layam-odc dd,
html body .layam-odc span,
html body .layam-odc label,
html body .layam-odc legend {
	font-family: inherit;
	letter-spacing: inherit;
	color: inherit;
}

html body .layam-odc a {
	color: inherit;
	text-decoration: inherit;
	font-weight: inherit;
	box-shadow: none;
	outline-offset: 0;
}

html body .layam-odc ol,
html body .layam-odc ul {
	list-style: none;
}

html body .layam-odc img,
html body .layam-odc svg {
	display: block;
	vertical-align: middle;
}

html body .layam-odc img {
	max-width: 100%;
	height: auto;
	border-radius: 0;
	box-shadow: none;
}

html body .layam-odc button,
html body .layam-odc input,
html body .layam-odc select,
html body .layam-odc textarea {
	font: inherit;
	font-feature-settings: inherit;
	letter-spacing: inherit;
	color: inherit;
	opacity: 1;
	background-color: transparent;
	border-radius: 0;
	box-shadow: none;
	text-transform: none;
	min-height: 0;
	height: auto;
	width: auto;
}

html body .layam-odc button {
	cursor: default;
	appearance: button;
	text-align: inherit;
}

html body .layam-odc textarea {
	resize: vertical;
}

html body .layam-odc table {
	text-indent: 0;
	border-color: inherit;
	border-collapse: collapse;
	margin: 0;
	background: none;
}

html body .layam-odc th,
html body .layam-odc td {
	background: none;
	font-family: inherit;
}

html body .layam-odc ::placeholder {
	opacity: 1;
	color: var(--layam-muted);
}

html body .layam-odc [hidden] {
	display: none !important;
}

/* ------------------------------------------------------------------ Utilities (prefixed) */
.layam-odc .layam-container {
	max-width: 1280px;
	margin-left: auto;
	margin-right: auto;
	padding-left: 24px;
	padding-right: 24px;
}

.layam-odc .layam-relative { position: relative; }
.layam-odc .layam-min-w-0 { min-width: 0; }
.layam-odc .layam-shrink-0 { flex-shrink: 0; }
.layam-odc .layam-grid { display: grid; }
.layam-odc .layam-gap-10 { gap: 40px; }

.layam-odc .layam-mt-05 { margin-top: 2px; }
.layam-odc .layam-mt-1 { margin-top: 4px; }
.layam-odc .layam-mt-2 { margin-top: 8px; }
.layam-odc .layam-mt-3 { margin-top: 16px; }
.layam-odc .layam-mt-4 { margin-top: 16px; }
.layam-odc .layam-mt-5 { margin-top: 24px; }
.layam-odc .layam-mt-6 { margin-top: 24px; }
.layam-odc .layam-mt-8 { margin-top: 32px; }
.layam-odc .layam-mt-10 { margin-top: 40px; }
.layam-odc .layam-mt-12 { margin-top: 48px; }
.layam-odc .layam-mt-20 { margin-top: 80px; }
.layam-odc .layam-pt-3 { padding-top: 16px; }
.layam-odc .layam-p-6 { padding: 24px; }

.layam-odc .layam-space-y-3 > * + * { margin-top: 16px; }
.layam-odc .layam-space-y-6 > * + * { margin-top: 24px; }

.layam-odc .layam-maxw-sm { max-width: 384px; }
.layam-odc .layam-maxw-xl { max-width: 576px; }
.layam-odc .layam-maxw-2xl { max-width: 672px; }

.layam-odc .layam-text-xs { font-size: 16px; line-height: 1.6; }
.layam-odc .layam-text-sm { font-size: 18px; line-height: 1.65; }
.layam-odc .layam-text-lg { font-size: 22px; line-height: 1.6; }
.layam-odc .layam-text-xl { font-size: 24px; line-height: 1.5; }
.layam-odc .layam-text-2xl { font-size: 28px; line-height: 1.3; }
.layam-odc .layam-text-3xl { font-size: 36px; line-height: 1.2; }
.layam-odc .layam-text-4xl { font-size: 42px; line-height: 1.12; }
.layam-odc .layam-text-5xl { font-size: 56px; line-height: 1.06; }
.layam-odc .layam-leading-relaxed { line-height: 1.625; }

.layam-odc .layam-fw-500 { font-weight: 500; }
.layam-odc .layam-fw-600 { font-weight: 600; }

.layam-odc .layam-muted { color: var(--layam-muted); }
.layam-odc .layam-c-fg { color: var(--layam-text); }
.layam-odc .layam-c-primary { color: var(--layam-primary); }
.layam-odc .layam-c-accent { color: var(--layam-accent); }
.layam-odc .layam-c-teal { color: var(--layam-teal); }
.layam-odc .layam-c-teal-fg { color: var(--layam-teal-fg); }

.layam-odc .layam-op-60 { opacity: .6; }
.layam-odc .layam-op-80 { opacity: .8; }
.layam-odc .layam-op-85 { opacity: .85; }
.layam-odc .layam-op-90 { opacity: .9; }

.layam-odc .layam-underline { text-decoration-line: underline; }

.layam-odc .layam-i-4 { width: 16px; height: 16px; }
.layam-odc .layam-i-5 { width: 20px; height: 20px; }
.layam-odc .layam-i-6 { width: 24px; height: 24px; }

.layam-odc .layam-cover {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
}

/* ------------------------------------------------------------------ Type */
/* The reference .eyebrow sets no line-height, so it inherits the 1.5 default. */
.layam-odc .layam-eyebrow {
	font-size: 16px;
	line-height: 1.5;
	font-weight: 600;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--layam-accent);
}

.layam-odc .layam-h2,
.layam-odc .layam-h2-fixed {
	font-size: 36px;
	line-height: 1.2;
	font-weight: 600;
	letter-spacing: -.025em;
}

.layam-odc .layam-h2-lg {
	font-size: 42px;
	line-height: 1.12;
	font-weight: 600;
	letter-spacing: -.025em;
}

.layam-odc .layam-h3 {
	font-size: 28px;
	line-height: 1.3;
	font-weight: 600;
	letter-spacing: -.025em;
}

/* ------------------------------------------------------------------ Buttons & links */
.layam-odc .layam-btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	border-radius: var(--layam-radius);
	padding: 16px 24px;
	font-size: 18px;
	line-height: 1.65;
	font-weight: 600;
	text-decoration: none;
}

.layam-odc .layam-btn-primary {
	background-color: var(--layam-primary);
	color: #fff;
	box-shadow: var(--layam-shadow);
	transition: color .15s var(--layam-ease), background-color .15s var(--layam-ease), border-color .15s var(--layam-ease);
}

.layam-odc .layam-form-submit {
	margin-top: 4px;
	width: fit-content;
	box-shadow: none;
	transition: none;
}

.layam-odc .layam-btn-dark {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	border-radius: var(--layam-radius);
	background-color: var(--layam-teal);
	padding: 8px 16px;
	font-size: 18px;
	line-height: 1.65;
	font-weight: 600;
	color: var(--layam-teal-fg);
}

.layam-odc .layam-btn-outline {
	border-radius: var(--layam-radius);
	border-width: 1px;
	padding: 8px 16px;
	font-size: 18px;
	line-height: 1.65;
	font-weight: 600;
}

.layam-odc .layam-chevron {
	transition: transform .15s var(--layam-ease);
}

.layam-odc [aria-expanded="true"] .layam-chevron {
	transform: rotate(180deg);
}

.layam-odc .layam-link {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	font-size: 18px;
	line-height: 1.65;
	font-weight: 600;
}

.layam-odc .layam-gap-15 { gap: 8px; }
.layam-odc .layam-link-primary { color: var(--layam-primary); }
.layam-odc .layam-link-accent { color: var(--layam-accent); }

/* ------------------------------------------------------------------ Sections */
.layam-odc .layam-section {
	padding-top: 40px;
	padding-bottom: 40px;
}

.layam-odc .layam-section-muted {
	background-color: var(--layam-muted-bg);
	border-top-width: 1px;
}

.layam-odc .layam-section-teal {
	background-color: var(--layam-teal);
	color: var(--layam-teal-fg);
}

.layam-odc .layam-head {
	display: grid;
	gap: 24px;
}

.layam-odc .layam-head-intro {
	max-width: 512px;
	color: var(--layam-muted);
}

.layam-odc .layam-card {
	border-radius: var(--layam-radius);
	border-width: 1px;
	background-color: var(--layam-card);
	box-shadow: var(--layam-shadow);
}

.layam-odc .layam-tile {
	border-radius: var(--layam-radius);
	background-color: rgba(238, 247, 247, .1);
	padding: 24px;
}

.layam-odc .layam-soft-box {
	border-radius: var(--layam-radius);
	background-color: var(--layam-accent-soft);
	padding: 24px;
}

/* ------------------------------------------------------------------ Header */
.layam-odc .layam-header {
	position: sticky;
	top: var(--wp-admin--admin-bar--height, 0px);
	z-index: 50;
	border-bottom-width: 1px;
	background-color: rgba(255, 255, 255, .95);
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
}

.layam-odc .layam-header-inner {
	display: flex;
	height: var(--layam-header-h, 80px);
	align-items: center;
	justify-content: space-between;
	gap: 24px;
}

.layam-odc .layam-logo {
	height: 48px;
	width: auto;
}

.layam-odc .layam-nav {
	display: none;
	align-items: center;
	gap: 24px;
	font-size: 18px;
	line-height: 1.65;
	color: var(--layam-text);
}

/* Deviation from the reference (hidden below 640px there): a compact button on phones, by request. */
.layam-odc .layam-header-cta {
	flex-shrink: 0;
	gap: 8px;
	padding: 8px 16px;
	font-size: 16px;
	line-height: 1.6;
	white-space: nowrap;
}

.layam-odc .layam-header-actions {
	display: flex;
	align-items: center;
	gap: 8px;
}

/* Phones: compact CTA so logo + CTA + menu button fit on one row. */
@media (max-width: 479.98px) {
	.layam-odc .layam-header-cta {
		padding: 11px 8px;
		font-size: 14px;
	}

	.layam-odc .layam-header-cta .layam-icon {
		display: none;
	}
}

/* Very narrow phones (< 360px): the CTA moves into the menu panel. */
@media (max-width: 359.98px) {
	.layam-odc .layam-header-cta {
		display: none;
	}
}

.layam-odc .layam-header-logo {
	flex-shrink: 0;
}

@media (max-width: 639.98px) {
	.layam-odc .layam-header-inner {
		gap: 16px;
	}
}

/* ------------------------------------------------------------------ Hero */
.layam-odc .layam-hero {
	position: relative;
	overflow: hidden;
}

.layam-odc .layam-hero-overlay {
	position: absolute;
	inset: 0;
	background-image: linear-gradient(to right, #023e40, rgba(2, 62, 64, .8), rgba(2, 62, 64, .2));
	background-image: linear-gradient(to right in oklab, #023e40, rgba(2, 62, 64, .8), rgba(2, 62, 64, .2));
}

.layam-odc .layam-hero-inner {
	position: relative;
	padding-top: 112px;
	padding-bottom: 112px;
	color: var(--layam-teal-fg);
}

.layam-odc .layam-hero-title {
	margin-top: 16px;
	max-width: 672px;
	font-size: 42px;
	line-height: 1.25;
	font-weight: 600;
	letter-spacing: -.025em;
}

.layam-odc .layam-hero-title span {
	display: block;
	color: var(--layam-accent);
}

.layam-odc .layam-hero-text {
	margin-top: 24px;
	max-width: 512px;
	font-size: 22px;
	line-height: 1.6;
	opacity: .9;
}

/* ------------------------------------------------------------------ Intro */
.layam-odc .layam-intro-tagline {
	margin-top: 16px;
	font-size: 18px;
	line-height: 1.65;
	font-weight: 500;
	color: var(--layam-primary);
}

.layam-odc .layam-intro-body > * + * {
	margin-top: 16px;
}

.layam-odc .layam-strip {
	display: grid;
	border-radius: var(--layam-radius);
	border-width: 1px;
	background-color: var(--layam-card);
	box-shadow: var(--layam-shadow);
}

.layam-odc .layam-strip > :not(:last-child) {
	border-bottom-width: 1px;
}

.layam-odc .layam-strip-item {
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 24px;
}

.layam-odc .layam-strip-icon {
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	flex-shrink: 0;
	border-radius: 9999px;
	background-color: var(--layam-accent-soft);
	color: var(--layam-accent);
}

/* ------------------------------------------------------------------ Business model */
.layam-odc .layam-core {
	margin-top: 48px;
	border-radius: var(--layam-radius);
	background-color: var(--layam-teal);
	padding: 32px;
	text-align: center;
	color: var(--layam-teal-fg);
}

.layam-odc .layam-core-label {
	font-size: 16px;
	line-height: 1.6;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .05em;
	color: var(--layam-accent);
}

.layam-odc .layam-core-note {
	margin: 24px auto 0;
	width: fit-content;
	border-top: 1px solid rgba(238, 247, 247, .2);
	padding-top: 16px;
	font-size: 16px;
	line-height: 1.6;
	opacity: .8;
}

.layam-odc .layam-core-areas {
	margin-top: 16px;
	display: grid;
	gap: 16px;
}

.layam-odc .layam-core-area {
	display: block;
	border-radius: var(--layam-radius);
	background-color: rgba(238, 247, 247, .1);
	padding: 16px;
	text-align: left;
	font-size: 18px;
	line-height: 1.65;
	font-weight: 500;
}

.layam-odc .layam-model-support {
	margin-top: 48px;
	display: grid;
	gap: 40px;
}

.layam-odc .layam-model-features {
	display: grid;
	gap: 24px;
}

.layam-odc .layam-model-feature {
	display: flex;
	gap: 16px;
}

.layam-odc .layam-feature-icon {
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	flex-shrink: 0;
	border-radius: var(--layam-radius);
	background-color: var(--layam-card);
	color: var(--layam-primary);
	box-shadow: var(--layam-shadow);
}

.layam-odc .layam-callout {
	margin-top: 48px;
	border-radius: var(--layam-radius);
	border-left: 4px solid var(--layam-primary);
	background-color: var(--layam-card);
	padding: 24px;
}

/* ------------------------------------------------------------------ Services */
.layam-odc .layam-services {
	margin-top: 48px;
	display: grid;
	gap: 24px;
}

.layam-odc .layam-service {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	border-radius: var(--layam-radius);
	border-width: 1px;
	background-color: var(--layam-card);
	box-shadow: var(--layam-shadow);
}

.layam-odc .layam-service-img {
	aspect-ratio: 3 / 2;
	width: 100%;
	object-fit: cover;
}

.layam-odc .layam-service-icon {
	position: absolute;
	bottom: -20px;
	left: 20px;
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	border-radius: var(--layam-radius);
	background-color: var(--layam-teal);
	color: var(--layam-teal-fg);
}

.layam-odc .layam-service-body {
	display: flex;
	flex: 1 1 0%;
	flex-direction: column;
	padding: 32px 24px 24px;
}

.layam-odc .layam-service-list {
	margin: 16px 0 24px;
	font-size: 18px;
	line-height: 1.65;
}

.layam-odc .layam-service-list li {
	display: flex;
	gap: 8px;
}

.layam-odc .layam-service-list li + li {
	margin-top: 8px;
}

.layam-odc .layam-dot {
	margin-top: 8px;
	width: 6px;
	height: 6px;
	flex-shrink: 0;
	border-radius: 9999px;
	background-color: var(--layam-accent);
}

.layam-odc .layam-service-note {
	margin-top: auto;
	border-top-width: 1px;
	padding-top: 16px;
	font-size: 16px;
	line-height: 1.6;
	font-weight: 500;
	color: var(--layam-primary);
}

.layam-odc .layam-services-foot {
	margin-top: 32px;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
}

/* ------------------------------------------------------------------ Team mix */
.layam-odc .layam-team {
	display: grid;
	gap: 48px;
}

.layam-odc .layam-team-steps {
	display: grid;
	gap: 24px;
}

.layam-odc .layam-team-step-top {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

/* ------------------------------------------------------------------ Delivery & ownership */
.layam-odc .layam-models {
	margin-top: 48px;
	display: grid;
	align-items: start;
	gap: 24px;
}

.layam-odc .layam-model-tabs {
	display: flex;
	scroll-snap-type: x proximity;
	gap: 8px;
	overflow-x: auto;
	padding-bottom: 4px;
}

.layam-odc .layam-model-tab {
	display: flex;
	min-width: 168px;
	scroll-snap-align: center;
	align-items: flex-start;
	gap: 16px;
	border-radius: var(--layam-radius);
	border-left: 4px solid transparent;
	background-color: var(--layam-muted-bg);
	padding: 16px;
	text-align: left;
	transition: color .15s var(--layam-ease), background-color .15s var(--layam-ease), border-color .15s var(--layam-ease);
}

.layam-odc .layam-model-tab.is-active {
	border-left-color: var(--layam-primary);
	background-color: var(--layam-card);
	box-shadow: var(--layam-shadow);
}

.layam-odc .layam-model-tab-icon {
	display: grid;
	place-items: center;
	width: 36px;
	height: 36px;
	flex-shrink: 0;
	border-radius: 9999px;
	border: 1px solid var(--layam-border);
	color: var(--layam-muted);
}

.layam-odc .layam-model-tab.is-active .layam-model-tab-icon {
	border: 0;
	background-color: var(--layam-primary);
	color: #fff;
}

.layam-odc .layam-model-tab-title {
	display: block;
	font-size: 18px;
	line-height: 1.65;
	font-weight: 600;
}

.layam-odc .layam-model-tab-tag {
	display: none;
	margin-top: 2px;
	font-size: 16px;
	line-height: 1.6;
	color: var(--layam-muted);
}

.layam-odc .layam-model-panel {
	border-radius: var(--layam-radius);
	border-width: 1px;
	background-color: var(--layam-card);
	padding: 32px;
	box-shadow: var(--layam-shadow);
}

.layam-odc .layam-model-fit {
	margin-top: 16px;
	font-size: 20px;
	line-height: 1.65;
	font-weight: 500;
	color: var(--layam-teal);
}

.layam-odc .layam-model-panel-foot {
	margin-top: 32px;
	border-top-width: 1px;
	padding-top: 24px;
}

/* ------------------------------------------------------------------ Industries */
.layam-odc .layam-carousel-bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
}

.layam-odc .layam-carousel-nav {
	display: flex;
	gap: 8px;
}

.layam-odc .layam-round-btn {
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	border-radius: 9999px;
	border-width: 1px;
	background-color: var(--layam-card);
	transition: color .15s var(--layam-ease), background-color .15s var(--layam-ease), border-color .15s var(--layam-ease);
}

.layam-odc .layam-round-btn:disabled {
	pointer-events: none;
	opacity: .35;
}

.layam-odc .layam-carousel {
	margin-top: 24px;
	display: flex;
	scroll-snap-type: x mandatory;
	gap: 24px;
	overflow-x: auto;
	scroll-behavior: smooth;
	outline: none;
	scrollbar-width: none;
	-ms-overflow-style: none;
}

.layam-odc .layam-carousel::-webkit-scrollbar {
	display: none;
}

.layam-odc .layam-carousel:focus-visible {
	box-shadow: 0 0 0 2px var(--layam-accent);
}

.layam-odc .layam-industry {
	display: flex;
	flex: 0 0 100%;
	flex-direction: column;
	scroll-snap-align: start;
	-webkit-user-select: none;
	user-select: none;
	overflow: hidden;
	border-radius: var(--layam-radius);
	border-width: 1px;
	background-color: var(--layam-card);
	box-shadow: var(--layam-shadow);
}

.layam-odc .layam-industry-img {
	height: 192px;
	width: 100%;
	object-fit: cover;
}

.layam-odc .layam-industry-icon {
	position: absolute;
	bottom: -20px;
	left: 24px;
	display: grid;
	place-items: center;
	width: 48px;
	height: 48px;
	border-radius: var(--layam-radius);
	background-color: var(--layam-teal);
	color: var(--layam-teal-fg);
	box-shadow: 0 0 0 4px var(--layam-card), var(--layam-shadow);
}

.layam-odc .layam-industry-body {
	display: flex;
	flex: 1 1 0%;
	flex-direction: column;
	padding: 40px 24px 24px;
}

.layam-odc .layam-industry-title {
	margin-top: 8px;
	font-size: 24px;
	line-height: 1.5;
	font-weight: 600;
	letter-spacing: -.025em;
}

.layam-odc .layam-industry-note {
	margin: 24px 0 24px;
	display: flex;
	align-items: flex-start;
	gap: 16px;
	border-radius: var(--layam-radius);
	background-color: var(--layam-muted-bg);
	padding: 16px;
}

.layam-odc .layam-industry-links {
	margin-top: auto;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 16px 24px;
	border-top-width: 1px;
	padding-top: 24px;
}

.layam-odc .layam-progress {
	margin-top: 24px;
	height: 4px;
	overflow: hidden;
	border-radius: 9999px;
	background-color: var(--layam-border);
}

.layam-odc .layam-progress-bar {
	height: 4px;
	border-radius: 9999px;
	background-color: var(--layam-accent);
	transition: all .3s var(--layam-ease);
}

.layam-odc .layam-industries-cta {
	margin-top: 32px;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	border-radius: var(--layam-radius);
	background-color: var(--layam-teal);
	padding: 24px;
	color: var(--layam-teal-fg);
}

/* ------------------------------------------------------------------ Setup journey */
.layam-odc .layam-steps {
	position: relative;
	margin-top: 56px;
	display: grid;
	gap: 32px;
}

.layam-odc .layam-steps::before {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: 20px;
	display: none;
	height: 1px;
	background-color: var(--layam-border);
}

.layam-odc .layam-step-num {
	position: relative;
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	border-radius: 9999px;
	background-color: var(--layam-primary);
	font-size: 18px;
	line-height: 1.65;
	font-weight: 600;
	color: #fff;
}

.layam-odc .layam-how-boxes {
	margin-top: 48px;
	display: grid;
	gap: 16px;
}

/* ------------------------------------------------------------------ Responsibilities & governance */
.layam-odc .layam-resp-cards {
	margin-top: 32px;
	display: grid;
	gap: 24px;
}

.layam-odc .layam-resp-card {
	border-radius: var(--layam-radius);
	border-top: 4px solid var(--layam-accent);
	background-color: var(--layam-card);
	padding: 24px;
	box-shadow: var(--layam-shadow);
}

.layam-odc .layam-resp-card.is-primary {
	border-top-color: var(--layam-primary);
}

.layam-odc .layam-gov {
	margin-top: 56px;
	border-radius: var(--layam-radius);
	background-color: var(--layam-card);
	padding: 24px;
	box-shadow: var(--layam-shadow);
}

.layam-odc .layam-gov-head {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: 16px;
}

.layam-odc .layam-gov-tabs {
	display: flex;
	max-width: 100%;
	gap: 4px;
	overflow-x: auto;
	border-radius: var(--layam-radius);
	background-color: var(--layam-muted-bg);
	padding: 4px;
}

.layam-odc .layam-gov-tab {
	white-space: nowrap;
	border-radius: 4px;
	padding: 8px 16px;
	font-size: 18px;
	line-height: 1.65;
	font-weight: 500;
	color: var(--layam-muted);
}

.layam-odc .layam-gov-tab.is-active {
	background-color: var(--layam-card);
	color: var(--layam-primary);
	box-shadow: var(--layam-shadow);
}

.layam-odc .layam-table-wrap {
	margin-top: 24px;
	overflow-x: auto;
}

.layam-odc .layam-table {
	width: 100%;
	text-align: left;
	font-size: 18px;
	line-height: 1.65;
	border: 0;
}

.layam-odc .layam-table tr {
	border-bottom-width: 1px;
}

.layam-odc .layam-table tbody tr:last-child {
	border-bottom-width: 0;
}

.layam-odc .layam-table th {
	padding: 16px 24px 16px 0;
	font-size: 16px;
	line-height: 1.6;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .05em;
	color: var(--layam-accent);
	text-align: left;
	border: 0;
}

.layam-odc .layam-table td {
	padding: 16px 24px 16px 0;
	vertical-align: top;
	color: var(--layam-muted);
	border: 0;
}

.layam-odc .layam-table td.is-first {
	font-weight: 600;
	color: var(--layam-text);
}

/* ------------------------------------------------------------------ Why India */
.layam-odc .layam-india {
	margin-top: 48px;
	display: grid;
	gap: 40px;
}

.layam-odc .layam-india-point {
	display: flex;
	gap: 16px;
}

.layam-odc .layam-check {
	display: grid;
	place-items: center;
	width: 32px;
	height: 32px;
	flex-shrink: 0;
	border-radius: 9999px;
	border: 1px solid rgba(197, 55, 50, .4);
	color: var(--layam-primary);
}

.layam-odc .layam-india-card {
	overflow: hidden;
	border-radius: var(--layam-radius);
	border-width: 1px;
	background-color: var(--layam-card);
	box-shadow: var(--layam-shadow);
}

.layam-odc .layam-india-img {
	aspect-ratio: 16 / 9;
	width: 100%;
	object-fit: cover;
}

.layam-odc .layam-india-card-body {
	padding: 24px;
	font-size: 18px;
	line-height: 1.65;
}

.layam-odc .layam-india-hours-title {
	display: flex;
	align-items: center;
	gap: 8px;
	font-weight: 600;
}

.layam-odc .layam-zones {
	margin-top: 16px;
}

.layam-odc .layam-zones > div {
	display: flex;
	justify-content: space-between;
	border-bottom-width: 1px;
	padding-bottom: 8px;
}

.layam-odc .layam-zones > div + div {
	margin-top: 8px;
}

/* ------------------------------------------------------------------ Cost calculator */
.layam-odc .layam-calc {
	margin-top: 48px;
	display: grid;
	gap: 24px;
}

.layam-odc .layam-calc-boxes {
	display: grid;
	gap: 16px;
}

.layam-odc .layam-calc-box {
	border-radius: var(--layam-radius);
	background-color: var(--layam-muted-bg);
	padding: 16px;
}

.layam-odc .layam-calc-actions {
	margin-top: 24px;
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
}

.layam-odc .layam-calc-inputs {
	margin-top: 24px;
	display: grid;
	gap: 24px;
	border-top-width: 1px;
	padding-top: 24px;
}

.layam-odc .layam-calc-inputs fieldset {
	min-width: 0;
}

.layam-odc .layam-legend {
	font-size: 16px;
	line-height: 1.6;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .05em;
	color: var(--layam-accent);
}

.layam-odc .layam-calc-label {
	display: block;
	font-size: 16px;
	line-height: 1.6;
	color: var(--layam-muted);
}

.layam-odc .layam-savings {
	display: flex;
	flex-direction: column;
	border-radius: var(--layam-radius);
	background-color: var(--layam-primary);
	padding: 24px;
	color: #fff;
	box-shadow: var(--layam-shadow);
}

.layam-odc .layam-savings-grid {
	margin-top: 24px;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 16px;
}

.layam-odc .layam-savings-disclaimer {
	margin-top: auto;
	padding-top: 24px;
	/* The reference declares text-[12.5px] but renders at 16px / 26px; match the rendered result. */
	font-size: 16px;
	line-height: 1.625;
	opacity: .8;
}

.layam-odc .layam-costs-foot {
	margin-top: 32px;
	display: grid;
	gap: 24px;
}

.layam-odc .layam-costs-cta {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 16px;
	border-radius: var(--layam-radius);
	background-color: var(--layam-card);
	padding: 24px;
	box-shadow: var(--layam-shadow);
}

/* ------------------------------------------------------------------ People / Process / Performance */
.layam-odc .layam-about-head {
	display: grid;
	gap: 40px;
}

.layam-odc .layam-about-stat {
	border-left: 1px solid rgba(238, 247, 247, .2);
	padding-left: 32px;
}

.layam-odc .layam-pillars {
	margin-top: 48px;
	display: grid;
	gap: 16px;
}

.layam-odc .layam-pillar {
	position: relative;
	padding: 24px;
}

.layam-odc .layam-pillar-arrow {
	position: absolute;
	right: -12px;
	top: 50%;
	display: none;
	transform: translateY(-50%);
}

.layam-odc .layam-about-closing {
	margin-top: 24px;
	text-align: center;
	font-size: 18px;
	line-height: 1.65;
	font-weight: 600;
	color: var(--layam-accent);
}

/* ------------------------------------------------------------------ Compliance & values */
.layam-odc .layam-values-features {
	margin-top: 48px;
	display: grid;
	gap: 24px;
}

.layam-odc .layam-accent-rule {
	border-left: 2px solid var(--layam-accent);
	padding-left: 24px;
}

.layam-odc .layam-values {
	margin-top: 32px;
	display: grid;
	gap: 16px;
}

/* ------------------------------------------------------------------ Case study */
.layam-odc .layam-case-head {
	margin-top: 16px;
	display: grid;
	gap: 32px;
}

.layam-odc .layam-case-stats {
	margin-top: 40px;
	display: grid;
	gap: 16px;
}

.layam-odc .layam-case-stat {
	border-radius: var(--layam-radius);
	background-color: var(--layam-card);
	padding: 24px;
	box-shadow: var(--layam-shadow);
}

.layam-odc .layam-case-stat.is-primary {
	background-color: var(--layam-primary);
	color: #fff;
}

.layam-odc .layam-case-cols {
	margin-top: 40px;
	display: grid;
	gap: 24px;
}

.layam-odc .layam-case-foot {
	margin-top: 40px;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	border-top-width: 1px;
	padding-top: 24px;
	font-size: 18px;
	line-height: 1.65;
}

.layam-odc .layam-case-roles {
	display: flex;
	flex-wrap: wrap;
	gap: 24px;
}

/* ------------------------------------------------------------------ FAQ */
.layam-odc .layam-faq {
	display: grid;
	gap: 40px;
}

.layam-odc .layam-faq-list {
	border-top-width: 1px;
	border-bottom-width: 1px;
}

.layam-odc .layam-faq-item + .layam-faq-item {
	border-top-width: 1px;
}

.layam-odc .layam-faq-q {
	display: flex;
	width: 100%;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 16px 0;
	text-align: left;
	font-size: 18px;
	line-height: 1.65;
	font-weight: 500;
}

.layam-odc .layam-faq-q[aria-expanded="true"] .layam-faq-plus,
.layam-odc .layam-faq-q[aria-expanded="false"] .layam-faq-minus {
	display: none;
}

.layam-odc .layam-faq-a {
	padding-bottom: 24px;
	font-size: 18px;
	line-height: 1.65;
	color: var(--layam-muted);
}

.layam-odc .layam-faq-more {
	margin-top: 24px;
	font-size: 18px;
	line-height: 1.65;
	font-weight: 600;
	color: var(--layam-primary);
}

/* ------------------------------------------------------------------ Estimate form */
.layam-odc .layam-estimate {
	position: relative;
	overflow: hidden;
}

.layam-odc .layam-estimate-overlay {
	position: absolute;
	inset: 0;
	background-color: rgba(2, 62, 64, .8);
}

.layam-odc .layam-estimate-inner {
	position: relative;
	display: grid;
	gap: 40px;
	padding-top: 40px;
	padding-bottom: 40px;
}

.layam-odc .layam-contact {
	margin-top: 32px;
	font-size: 18px;
	line-height: 1.65;
}

.layam-odc .layam-contact > * + * {
	margin-top: 16px;
}

.layam-odc .layam-contact-line {
	display: flex;
	gap: 16px;
}

.layam-odc .layam-form-card {
	border-radius: var(--layam-radius);
	background-color: var(--layam-card);
	padding: 32px;
	box-shadow: var(--layam-shadow);
}

.layam-odc .layam-form-grid {
	display: grid;
	gap: 16px;
}

.layam-odc .layam-form-row {
	display: grid;
	gap: 16px;
}

.layam-odc .layam-form-note {
	font-size: 16px;
	line-height: 1.6;
	color: var(--layam-muted);
}

html body .layam-odc .layam-input {
	display: block;
	width: 100%;
	border-radius: var(--layam-radius);
	border: 1px solid var(--layam-border);
	background-color: var(--layam-background);
	padding: 8px 16px;
	height: auto;
	min-height: 0;
	font-size: 18px;
	line-height: 1.65;
	color: var(--layam-text);
	outline: none;
	box-shadow: none;
}

html body .layam-odc .layam-input:focus {
	border-color: var(--layam-accent);
	outline: none;
	box-shadow: none;
}

/* Contact Form 7 output inside the card */
.layam-odc .wpcf7 form {
	margin: 0;
}

/* Grid lets fields stretch to the row height, as the bare inputs do in the reference. */
.layam-odc .wpcf7-form-control-wrap {
	display: grid;
}

.layam-odc .wpcf7 .wpcf7-not-valid-tip {
	margin-top: 4px;
	font-size: 16px;
	line-height: 1.6;
	color: var(--layam-primary);
}

.layam-odc .wpcf7 form .wpcf7-response-output {
	margin: 16px 0 0;
	padding: 8px 16px;
	border-radius: var(--layam-radius);
	font-size: 16px;
	line-height: 1.6;
}

.layam-odc .wpcf7 form.sent .wpcf7-response-output {
	display: none;
}

/* ------------------------------------------------------------------ Footer */
.layam-odc .layam-footer {
	border-top-width: 1px;
	padding: 40px 0;
}

.layam-odc .layam-footer-inner {
	display: grid;
	gap: 32px;
	font-size: 18px;
	line-height: 1.65;
	color: var(--layam-muted);
}

.layam-odc .layam-footer-nav {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 24px;
}

.layam-odc .layam-footer-contact {
	font-size: 16px;
	line-height: 1.6;
}

.layam-odc .layam-footer-contact > * + * {
	margin-top: 4px;
}

/* ------------------------------------------------------------------ Hover (hover-capable devices, as in the reference) */
@media (hover: hover) {
	.layam-odc .layam-nav a:hover { color: var(--layam-primary); }
	.layam-odc .layam-btn-primary:hover { background-color: var(--layam-primary-deep); }
	.layam-odc .layam-core-area:hover { background-color: rgba(238, 247, 247, .15); }
	.layam-odc .layam-model-tab:not(.is-active):hover {
		border-left-color: rgba(197, 55, 50, .4);
		background-color: rgba(255, 255, 255, .6);
	}
	.layam-odc .layam-round-btn:hover {
		border-color: var(--layam-accent);
		color: var(--layam-accent);
	}
}

/* ------------------------------------------------------------------ ≥ 640px (sm) */
@media (min-width: 640px) {
	.layam-odc .layam-header-cta {
		gap: 8px;
		padding: 16px 24px;
		font-size: 18px;
		line-height: 1.65;
	}

	.layam-odc .layam-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.layam-odc .layam-strip > :not(:last-child) { border-bottom-width: 0; }

	.layam-odc .layam-core-areas,
	.layam-odc .layam-model-features,
	.layam-odc .layam-services,
	.layam-odc .layam-values,
	.layam-odc .layam-case-stats,
	.layam-odc .layam-case-cols,
	.layam-odc .layam-form-row {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.layam-odc .layam-team-steps,
	.layam-odc .layam-calc-boxes {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.layam-odc .layam-industry { flex-basis: calc(50% - 10px); }

	.layam-odc .layam-gov-tab { padding-left: 16px; padding-right: 16px; }
}

/* ------------------------------------------------------------------ ≥ 768px (md) */
@media (min-width: 768px) {
	.layam-odc .layam-md-cols-2,
	.layam-odc .layam-head,
	.layam-odc .layam-how-boxes,
	.layam-odc .layam-costs-foot {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.layam-odc .layam-head { align-items: end; }
	.layam-odc .layam-head-intro { justify-self: end; }

	.layam-odc .layam-h2 { font-size: 42px; line-height: 1.12; }
	.layam-odc .layam-hero-title { font-size: 66px; }

	.layam-odc .layam-model-panel { padding: 40px; }

	.layam-odc .layam-steps { grid-template-columns: repeat(4, minmax(0, 1fr)); }
	.layam-odc .layam-steps::before { display: block; }

	.layam-odc .layam-resp-cards,
	.layam-odc .layam-calc-inputs,
	.layam-odc .layam-pillars,
	.layam-odc .layam-values-features {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.layam-odc .layam-calc-note { grid-column: span 3 / span 3; }
	.layam-odc .layam-gov { padding: 32px; }
	.layam-odc .layam-pillar-arrow { display: block; }

	.layam-odc .layam-footer-inner { grid-template-columns: 1.2fr 1fr 1fr; }
	.layam-odc .layam-footer-nav { flex-direction: column; }
}

/* ------------------------------------------------------------------ ≥ 1024px (lg) */
@media (min-width: 1024px) {
	.layam-odc .layam-nav { display: flex; }

	.layam-odc .layam-hero-inner { padding-top: 144px; padding-bottom: 144px; }

	.layam-odc .layam-strip { grid-template-columns: repeat(4, minmax(0, 1fr)); }
	.layam-odc .layam-strip > :not(:last-child) { border-right-width: 1px; }

	.layam-odc .layam-core-areas,
	.layam-odc .layam-services,
	.layam-odc .layam-values,
	.layam-odc .layam-case-stats,
	.layam-odc .layam-case-cols {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}

	.layam-odc .layam-model-support { grid-template-columns: 1fr 2fr; }

	.layam-odc .layam-team {
		grid-template-columns: 1fr 1.5fr;
		align-items: center;
	}

	.layam-odc .layam-models { grid-template-columns: 300px 1fr; }
	.layam-odc .layam-model-tabs {
		flex-direction: column;
		overflow: visible;
		padding-bottom: 0;
	}
	.layam-odc .layam-model-tab { min-width: 0; padding: 16px; }
	.layam-odc .layam-model-tab-tag { display: block; }

	.layam-odc .layam-industry { flex-basis: calc(33.3333% - 13.3333px); }

	/* Why India: stats row over the points on the left, map card spanning both rows on the right */
	.layam-odc .layam-india {
		grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
		gap: 40px 56px;
	}

	.layam-odc .layam-india-stats {
		grid-column: 1;
		grid-row: 1;
		display: flex;
		flex-wrap: wrap;
		align-items: flex-end;
		gap: 16px 56px;
	}

	.layam-odc .layam-india-stats > * + * { margin-top: 0; }
	.layam-odc .layam-india-stats > p { padding-bottom: 8px; }

	.layam-odc .layam-india-points { grid-column: 1; grid-row: 2; }

	.layam-odc .layam-india-card {
		grid-column: 2;
		grid-row: 1 / span 2;
		display: flex;
		flex-direction: column;
	}

	/* The map/photo absorbs the card's spare height so both columns end together */
	.layam-odc .layam-india .layam-india-card .layam-india-img {
		flex: 1 1 0;
		min-height: 240px;
		aspect-ratio: auto;
	}

	.layam-odc .layam-calc { grid-template-columns: 1.4fr 1fr; }

	.layam-odc .layam-about-head {
		grid-template-columns: 1.4fr auto auto;
		align-items: center;
	}

	.layam-odc .layam-case-head {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		align-items: end;
	}


	.layam-odc .layam-estimate-inner {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		align-items: center;
	}
}

/* ------------------------------------------------------------------ WP admin bar (absolute, not fixed, below 600px) */
@media (max-width: 600px) {
	.admin-bar .layam-odc .layam-header { top: 0; }
}

/* ==================================================================
 * Responsive enhancements (phones & tablets, < 1024px)
 * The reference has no dedicated small-screen treatment; these rules
 * refine it. Desktop (≥ 1024px) is untouched and still matches the
 * reference exactly.
 * ================================================================== */

/* ---- Services swipe dots (created by JS; only shown on phones) */
.layam-odc .layam-services-dots {
	display: none;
}

.layam-odc .layam-dot-btn {
	display: grid;
	place-items: center;
	width: 24px;
	height: 24px;
	cursor: pointer;
}

.layam-odc .layam-dot-btn::after {
	content: "";
	width: 8px;
	height: 8px;
	border-radius: 9999px;
	background-color: var(--layam-border);
	transition: width .2s var(--layam-ease), background-color .2s var(--layam-ease);
}

.layam-odc .layam-dot-btn.is-active::after {
	width: 22px;
	background-color: var(--layam-accent);
}

/* ---- Menu button & panel (hidden on desktop) */
.layam-odc .layam-menu-btn {
	display: none;
	place-items: center;
	width: 44px;
	height: 44px;
	flex-shrink: 0;
	border-radius: var(--layam-radius);
	border-width: 1px;
	background-color: var(--layam-card);
	color: var(--layam-text);
	cursor: pointer;
}

.layam-odc .layam-menu-bars {
	position: relative;
	display: block;
	width: 18px;
	height: 14px;
}

.layam-odc .layam-menu-bars span {
	position: absolute;
	left: 0;
	display: block;
	width: 18px;
	height: 2px;
	border-radius: 2px;
	background-color: currentColor;
	transition: transform .2s var(--layam-ease), opacity .2s var(--layam-ease), top .2s var(--layam-ease);
}

.layam-odc .layam-menu-bars span:nth-child(1) { top: 0; }
.layam-odc .layam-menu-bars span:nth-child(2) { top: 6px; }
.layam-odc .layam-menu-bars span:nth-child(3) { top: 12px; }

.layam-odc .layam-menu-btn[aria-expanded="true"] .layam-menu-bars span:nth-child(1) { top: 6px; transform: rotate(45deg); }
.layam-odc .layam-menu-btn[aria-expanded="true"] .layam-menu-bars span:nth-child(2) { opacity: 0; }
.layam-odc .layam-menu-btn[aria-expanded="true"] .layam-menu-bars span:nth-child(3) { top: 6px; transform: rotate(-45deg); }

.layam-odc .layam-mobile-nav {
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	max-height: calc(100vh - var(--layam-header-h, 80px) - 1px);
	max-height: calc(100dvh - var(--layam-header-h, 80px) - 1px);
	overflow-y: auto;
	border-bottom-width: 1px;
	background-color: var(--layam-card);
	box-shadow: 0 24px 40px -24px rgba(51, 54, 56, .35);
	animation: layam-menu-in .2s var(--layam-ease);
}

.layam-odc .layam-mobile-nav nav {
	display: flex;
	flex-direction: column;
	padding-top: 8px;
	padding-bottom: 24px;
}

.layam-odc .layam-mobile-nav-link {
	display: flex;
	align-items: center;
	justify-content: space-between;
	min-height: 56px;
	border-bottom-width: 1px;
	font-size: 18px;
	line-height: 1.65;
	font-weight: 500;
	color: var(--layam-text);
}

.layam-odc .layam-mobile-nav-link .layam-icon {
	color: var(--layam-muted);
}

.layam-odc .layam-mobile-nav-cta {
	margin-top: 24px;
	justify-content: center;
}

@keyframes layam-menu-in {
	from { opacity: 0; transform: translateY(-8px); }
	to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
	.layam-odc .layam-mobile-nav { animation: none; }
	.layam-odc .layam-menu-bars span { transition: none; }
}

@media (max-width: 1023.98px) {
	.layam-odc .layam-menu-btn { display: grid; }

	/* Section heads: stack instead of squeezing the H2 into a half column. */
	.layam-odc .layam-head,
	.layam-odc .layam-md-cols-2 {
		grid-template-columns: minmax(0, 1fr);
	}

	.layam-odc .layam-head { gap: 16px; }
	.layam-odc .layam-intro .layam-md-cols-2 { gap: 24px; }

	.layam-odc .layam-head-intro {
		justify-self: start;
		max-width: 640px;
	}

	/* Text links: inline content keeps the arrow attached to the last word; the
	   padding/negative-margin pair gives a 46px touch target without moving anything. */
	.layam-odc .layam-link {
		display: inline-block;
		padding: 8px 0;
		margin-top: -8px;
		margin-bottom: -8px;
	}

	.layam-odc .layam-intro-body > .layam-link { margin-top: 8px; }

	.layam-odc .layam-glue { white-space: nowrap; }

	/* Wrapping CTA buttons: centred text, arrow kept with the last word (see JS). */
	.layam-odc .layam-costs-cta .layam-btn {
		display: block;
		width: 100%;
		text-align: center;
	}

	.layam-odc .layam-costs-cta .layam-btn .layam-icon {
		display: inline-block;
		vertical-align: -2px;
		margin-left: 8px;
	}

	/* About: the two headline stats side by side */
	.layam-odc .layam-about-head {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 32px 16px;
	}

	.layam-odc .layam-about-head > :first-child { grid-column: 1 / -1; }

	.layam-odc .layam-form-note a {
		padding: 16px 0;
	}

	.layam-odc .layam-link .layam-icon {
		display: inline-block;
		vertical-align: -2px;
		margin-left: 4px;
	}

	.layam-odc .layam-link .layam-icon:first-child {
		margin-left: 0;
		margin-right: 8px;
	}

	.layam-odc .layam-contact-line {
		padding: 8px 0;
		margin: -8px 0;
	}

	.layam-odc .layam-contact > * + * { margin-top: 16px; }

	/* Ownership tabs: single-line chips that scroll sideways, with a fade hinting at more. */
	.layam-odc .layam-model-tabs {
		margin-right: -24px;
		padding-right: 24px;
		scrollbar-width: none;
		-webkit-mask-image: linear-gradient(to right, #000 85%, transparent);
		mask-image: linear-gradient(to right, #000 85%, transparent);
	}

	.layam-odc .layam-model-tabs::-webkit-scrollbar { display: none; }

	.layam-odc .layam-model-tab {
		flex: 0 0 auto;
		min-width: 0;
		align-items: center;
		padding: 8px 16px 8px 16px;
	}

	.layam-odc .layam-model-tab:last-child { margin-right: 40px; }

	.layam-odc .layam-model-tab-icon {
		width: 32px;
		height: 32px;
	}

	.layam-odc .layam-model-tab-title { white-space: nowrap; }

	/* Setup journey: connector line only on the 4-column desktop row. */
	.layam-odc .layam-steps::before { display: none; }

	/* Time-zone rows: keep the hours on one line. */
	.layam-odc .layam-zones > div { gap: 16px; }
	.layam-odc .layam-zones dd {
		white-space: nowrap;
		text-align: right;
	}

	/* Footer links: comfortable touch targets. */
	.layam-odc .layam-footer-nav a { padding: 8px 0; }
	.layam-odc .layam-footer-nav { gap: 0 24px; }
}

/* ---- Tablet (640–1023px) */
@media (min-width: 640px) and (max-width: 1023.98px) {
	.layam-odc .layam-steps {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 40px 32px;
	}

	.layam-odc .layam-india {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 40px 32px;
	}

	.layam-odc .layam-india-stats {
		grid-column: 1 / -1;
		display: flex;
		flex-wrap: wrap;
		align-items: flex-end;
		gap: 16px 56px;
	}

	.layam-odc .layam-india-stats > * + * { margin-top: 0; }
	.layam-odc .layam-india-stats > p { padding-bottom: 8px; }
}

/* ---- Below 768px: tighter vertical rhythm */
@media (max-width: 767.98px) {
	.layam-odc .layam-section {
		padding-top: 44px;
		padding-bottom: 44px;
	}

	.layam-odc .layam-estimate-inner {
		padding-top: 44px;
		padding-bottom: 44px;
	}

	.layam-odc .layam-gov { margin-top: 40px; }
	.layam-odc .layam-mt-20 { margin-top: 56px; }
}

/* ---- Phones (< 640px) */
@media (max-width: 639.98px) {
	/* Type scale */
	.layam-odc .layam-h2,
	.layam-odc .layam-h2-fixed {
		font-size: 30px;
		line-height: 1.2;
	}

	.layam-odc .layam-h2-lg {
		font-size: 32px;
		line-height: 1.18;
	}

	.layam-odc .layam-h3 {
		font-size: 24px;
		line-height: 1.3;
	}

	.layam-odc .layam-text-5xl {
		font-size: 44px;
		line-height: 1.06;
	}

	.layam-odc .layam-text-4xl {
		font-size: 34px;
		line-height: 1.12;
	}

	/* Hero */
	.layam-odc .layam-hero-inner {
		padding-top: 72px;
		padding-bottom: 80px;
	}

	.layam-odc .layam-hero-title {
		font-size: 38px;
		line-height: 1.15;
	}

	.layam-odc .layam-hero-text {
		margin-top: 24px;
		font-size: 20px;
	}

	.layam-odc .layam-hero .layam-cover { object-position: 68% center; }

	.layam-odc .layam-hero-overlay {
		background-image: linear-gradient(to right, rgba(2, 62, 64, .96), rgba(2, 62, 64, .82) 60%, rgba(2, 62, 64, .55));
	}

	/* Intro strip: lighter padding */
	.layam-odc .layam-strip-item { padding: 16px 24px; }

	/* Business model core box */
	.layam-odc .layam-core { padding: 32px 24px; }

	/* Services: swipeable cards with the next card peeking in. */
	.layam-odc .layam-services {
		display: flex;
		gap: 16px;
		margin-left: -24px;
		margin-right: -24px;
		padding: 4px 24px 32px;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		scroll-padding-left: 24px;
		scrollbar-width: none;
		-webkit-overflow-scrolling: touch;
	}

	.layam-odc .layam-services::-webkit-scrollbar { display: none; }

	.layam-odc .layam-service {
		flex: 0 0 86%;
		scroll-snap-align: start;
	}

	.layam-odc .layam-services-dots {
		display: flex;
		justify-content: center;
		gap: 8px;
		margin-top: -16px;
	}

	.layam-odc .layam-services-foot { margin-top: 24px; }

	/* Setup journey: vertical timeline */
	.layam-odc .layam-steps {
		margin-top: 40px;
		gap: 32px;
	}

	.layam-odc .layam-steps::before {
		display: block;
		left: 19px;
		right: auto;
		top: 20px;
		bottom: 20px;
		width: 1px;
		height: auto;
	}

	.layam-odc .layam-steps > li { padding-left: 64px; }

	.layam-odc .layam-steps .layam-step-num {
		position: absolute;
		left: 0;
		top: -6px;
		box-shadow: 0 0 0 6px var(--layam-background);
	}

	.layam-odc .layam-steps .layam-step-num + h3 { margin-top: 0; }

	/* Governance: equal tabs + table rows become labelled cards */
	.layam-odc .layam-gov { padding: 24px; }
	.layam-odc .layam-gov-tabs { width: 100%; }

	.layam-odc .layam-gov-tab {
		flex: 1 1 0%;
		padding: 8px 2px;
		font-size: 15px;
		text-align: center;
	}

	.layam-odc .layam-table thead {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip-path: inset(50%);
	}

	.layam-odc .layam-table,
	.layam-odc .layam-table tbody,
	.layam-odc .layam-table tr,
	.layam-odc .layam-table td {
		display: block;
		width: 100%;
	}

	.layam-odc .layam-table tr {
		padding: 16px 0;
		border-bottom-width: 1px;
	}

	.layam-odc .layam-table tbody tr:first-child { padding-top: 4px; }

	.layam-odc .layam-table td {
		padding: 0;
		font-size: 17px;
		line-height: 1.6;
	}

	.layam-odc .layam-table td + td { margin-top: 8px; }

	.layam-odc .layam-table td.is-first {
		font-size: 18px;
		line-height: 1.5;
	}

	.layam-odc .layam-table td:not(.is-first)::before {
		content: attr(data-label);
		display: block;
		margin-bottom: 2px;
		font-size: 13px;
		line-height: 1.5;
		font-weight: 600;
		letter-spacing: .08em;
		text-transform: uppercase;
		color: var(--layam-accent);
	}

	/* Why India: the two headline stats side by side */
	.layam-odc .layam-india { gap: 40px; }

	.layam-odc .layam-india-stats {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 8px 24px;
	}

	.layam-odc .layam-india-stats > * + * { margin-top: 0; }
	.layam-odc .layam-india-stats > p { grid-column: 1 / -1; }

	/* Calculator */
	.layam-odc .layam-savings .layam-text-3xl {
		font-size: 28px;
		line-height: 1.2;
	}

	.layam-odc .layam-calc-actions > * {
		flex: 1 1 auto;
		justify-content: center;
		text-align: center;
	}

	.layam-odc .layam-costs-cta .layam-btn {
		width: 100%;
		justify-content: center;
		text-align: center;
	}

	/* About: the two stats side by side */
	.layam-odc .layam-about-head {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 32px 16px;
	}

	.layam-odc .layam-about-head > :first-child { grid-column: 1 / -1; }
	.layam-odc .layam-about-stat { padding-left: 24px; }
	.layam-odc .layam-pillars { margin-top: 40px; }

	/* Case study: 2 × 2 stat grid */
	.layam-odc .layam-case-stats {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 16px;
	}

	.layam-odc .layam-case-stat { padding: 24px 16px; }

	.layam-odc .layam-case-foot {
		flex-direction: column;
		align-items: flex-start;
	}

	.layam-odc .layam-case-roles {
		flex-direction: column;
		gap: 8px;
	}

	/* Bottom bars and CTAs */
	.layam-odc .layam-industries-cta { padding: 24px; }

	/* Full-width phone CTAs: centred text, arrow kept with the last word (see JS). */
	.layam-odc .layam-services-foot .layam-btn,
	.layam-odc .layam-form-submit,
	.layam-odc .layam-mobile-nav-cta {
		display: block;
		width: 100%;
		text-align: center;
	}

	.layam-odc .layam-services-foot .layam-btn .layam-icon,
	.layam-odc .layam-form-submit .layam-icon,
	.layam-odc .layam-mobile-nav-cta .layam-icon {
		display: inline-block;
		vertical-align: -2px;
		margin-left: 8px;
	}

	/* Estimate form */
	.layam-odc .layam-form-card { padding: 24px 24px; }
}

/* ==================================================================
 * Hero slider (up to 5 ACF slides)
 * Typography/colours sampled from the supplied slide design.
 * ================================================================== */
.layam-odc .layam-hero-slider {
	--layam-slide-mint: #bcfdfc;
	--layam-slide-tag: #8cecea;
	--layam-slide-rule: #00a7a0;
	--layam-slide-label: #c1eef1;
	position: relative;
	overflow: hidden;
	background-color: var(--layam-teal);
	color: #fff;
}

.layam-odc .layam-slides {
	display: grid;
}

.layam-odc .layam-slide {
	grid-area: 1 / 1;
	position: relative;
	display: flex;
	align-items: center;
	min-height: clamp(620px, 50vw, 820px);
	overflow: hidden;
	opacity: 0;
	visibility: hidden;
	transition: opacity .9s var(--layam-ease), visibility 0s linear .9s;
}

.layam-odc .layam-slide.is-active {
	opacity: 1;
	visibility: visible;
	transition: opacity .9s var(--layam-ease);
	z-index: 1;
}

/* Slow zoom on the active photo */
.layam-odc .layam-slide-img {
	transform: scale(1.06);
	transition: transform 7s linear;
}

.layam-odc .layam-slide.is-active .layam-slide-img {
	transform: scale(1);
}

.layam-odc .layam-slide-overlay {
	position: absolute;
	inset: 0;
	background:
		linear-gradient(to top, rgba(0, 30, 35, .55) 0%, rgba(0, 30, 35, 0) 28%),
		linear-gradient(90deg, rgba(0, 36, 43, .94) 0%, rgba(2, 50, 56, .8) 30%, rgba(2, 62, 64, .32) 56%, rgba(2, 62, 64, 0) 74%);
}

.layam-odc .layam-slide-inner {
	position: relative;
	width: 100%;
	padding-top: 120px;
	padding-bottom: 152px;
}

.layam-odc .layam-slide-content {
	max-width: 620px;
}

/* Staggered entrance */
.layam-odc .layam-slide-content > * {
	opacity: 0;
	transform: translateY(18px);
	transition: opacity .6s var(--layam-ease), transform .6s var(--layam-ease);
}

.layam-odc .layam-slide.is-active .layam-slide-content > * {
	opacity: 1;
	transform: none;
}

.layam-odc .layam-slide.is-active .layam-slide-content > :nth-child(1) { transition-delay: .15s; }
.layam-odc .layam-slide.is-active .layam-slide-content > :nth-child(2) { transition-delay: .25s; }
.layam-odc .layam-slide.is-active .layam-slide-content > :nth-child(3) { transition-delay: .35s; }
.layam-odc .layam-slide.is-active .layam-slide-content > :nth-child(4) { transition-delay: .45s; }

.layam-odc .layam-slide-kicker {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 16px 32px;
}

.layam-odc .layam-slide-tag {
	padding-bottom: 8px;
	border-bottom: 3px solid var(--layam-slide-rule);
	font-size: 22px;
	line-height: 1.2;
	font-weight: 600;
	letter-spacing: .03em;
	text-transform: uppercase;
	color: var(--layam-slide-tag);
}

.layam-odc .layam-slide-label {
	font-size: 15px;
	line-height: 1.4;
	font-weight: 500;
	letter-spacing: .22em;
	text-transform: uppercase;
	color: var(--layam-slide-label);
}

.layam-odc .layam-slide-title {
	margin-top: 32px;
	font-size: 66px;
	line-height: 1.06;
	font-weight: 700;
	letter-spacing: -.035em;
	color: #fff;
	text-wrap: balance;
}

.layam-odc .layam-slide-kicker + .layam-slide-title { margin-top: 32px; }
.layam-odc .layam-slide-content > .layam-slide-title:first-child { margin-top: 0; }

.layam-odc .layam-slide-title span {
	display: block;
	color: var(--layam-slide-mint);
}

.layam-odc .layam-slide-text {
	margin-top: 32px;
	max-width: 600px;
	font-size: 22px;
	line-height: 1.55;
	color: rgba(255, 255, 255, .95);
}

.layam-odc .layam-slide-btn {
	margin-top: 40px;
	min-width: 290px;
	justify-content: space-between;
	gap: 40px;
	padding: 16px 32px;
}

/* Controls */
.layam-odc .layam-slider-controls {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 40px;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
}

.layam-odc .layam-slider-dots {
	display: flex;
	gap: 8px;
}

.layam-odc .layam-slider-dot {
	display: grid;
	align-items: center;
	width: 40px;
	height: 44px;
	cursor: pointer;
	transition: width .3s var(--layam-ease);
}

.layam-odc .layam-slider-dot.is-active { width: 64px; }

.layam-odc .layam-slider-dot span {
	position: relative;
	display: block;
	height: 3px;
	overflow: hidden;
	border-radius: 3px;
	background-color: rgba(255, 255, 255, .35);
}

.layam-odc .layam-slider-dot.is-active span::after {
	content: "";
	position: absolute;
	inset: 0;
	background-color: var(--layam-slide-mint);
	transform-origin: left;
}

.layam-odc .layam-hero-slider.is-playing .layam-slider-dot.is-active span::after {
	animation: layam-slide-progress var(--layam-interval, 6s) linear forwards;
}

.layam-odc .layam-hero-slider.is-paused .layam-slider-dot.is-active span::after {
	animation-play-state: paused;
}

@keyframes layam-slide-progress {
	from { transform: scaleX(0); }
	to { transform: scaleX(1); }
}

.layam-odc .layam-slider-buttons {
	display: flex;
	gap: 8px;
}

.layam-odc .layam-slider-btn {
	display: grid;
	place-items: center;
	width: 48px;
	height: 48px;
	border-radius: 9999px;
	border: 1px solid rgba(255, 255, 255, .35);
	background-color: rgba(255, 255, 255, .08);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
	color: #fff;
	cursor: pointer;
	transition: background-color .15s var(--layam-ease), border-color .15s var(--layam-ease);
}

.layam-odc .layam-slider-btn .layam-icon-play { display: none; }
.layam-odc .layam-hero-slider.is-user-paused .layam-icon-pause { display: none; }
.layam-odc .layam-hero-slider.is-user-paused .layam-icon-play { display: block; }

.layam-odc .layam-slider-btn:focus-visible,
.layam-odc .layam-slider-dot:focus-visible {
	outline: 2px solid var(--layam-slide-mint);
	outline-offset: 2px;
}

@media (hover: hover) {
	.layam-odc .layam-slider-btn:hover {
		background-color: rgba(255, 255, 255, .18);
		border-color: rgba(255, 255, 255, .6);
	}
}

@media (prefers-reduced-motion: reduce) {
	.layam-odc .layam-slide,
	.layam-odc .layam-slide-img,
	.layam-odc .layam-slide-content > * {
		transition: none;
		transform: none;
	}
}

/* Tablet */
@media (max-width: 1023.98px) {
	.layam-odc .layam-slide { min-height: 620px; }
	.layam-odc .layam-slide-title { font-size: 54px; }
	.layam-odc .layam-slide-inner { padding-top: 96px; padding-bottom: 136px; }
}

/* Phones: text sits low over a bottom-up gradient so the photo stays visible above */
@media (max-width: 639.98px) {
	.layam-odc .layam-slide {
		align-items: flex-end;
		min-height: 680px;
		min-height: min(760px, calc(100svh - var(--layam-header-h, 80px) - 1px));
	}

	.layam-odc .layam-slide-img { object-position: 70% center; }

	.layam-odc .layam-slide-overlay {
		background:
			linear-gradient(to top, rgba(0, 36, 43, .97) 0%, rgba(0, 36, 43, .86) 48%, rgba(2, 62, 64, .35) 78%, rgba(2, 62, 64, .15) 100%);
	}

	.layam-odc .layam-slide-inner {
		padding-top: 64px;
		padding-bottom: 112px;
	}

	.layam-odc .layam-slide-kicker { gap: 8px 24px; }

	.layam-odc .layam-slide-tag {
		font-size: 17px;
		padding-bottom: 4px;
	}

	.layam-odc .layam-slide-label {
		font-size: 12px;
		letter-spacing: .18em;
	}

	.layam-odc .layam-slide-title {
		margin-top: 24px;
		font-size: 40px;
		line-height: 1.08;
	}

	.layam-odc .layam-slide-kicker + .layam-slide-title { margin-top: 24px; }

	.layam-odc .layam-slide-text {
		margin-top: 18px;
		font-size: 18px;
	}

	.layam-odc .layam-slide-btn {
		margin-top: 32px;
		width: 100%;
		min-width: 0;
	}

	.layam-odc .layam-slider-controls { bottom: 28px; }
	.layam-odc .layam-slider-dot { width: 28px; }
	.layam-odc .layam-slider-dot.is-active { width: 48px; }
	.layam-odc .layam-slider-btn { width: 44px; height: 44px; }
}

/* ---- Slider: full viewport height + side arrows */
.layam-odc .layam-hero-slider {
	--layam-hero-h: calc(100vh - var(--layam-header-h, 80px) - 1px - var(--wp-admin--admin-bar--height, 0px));
}

@supports (height: 100svh) {
	.layam-odc .layam-hero-slider {
		--layam-hero-h: calc(100svh - var(--layam-header-h, 80px) - 1px - var(--wp-admin--admin-bar--height, 0px));
	}
}

/* Exactly one screen tall below the sticky header; grows only if the text needs more room. */
.layam-odc .layam-slide {
	min-height: max(560px, var(--layam-hero-h));
}

/* Keep the text clear of the side arrows (arrow column = 24px offset + 56px button + gap). */
.layam-odc .layam-hero-slider .layam-slide-inner {
	padding-left: clamp(24px, calc(96px - (100vw - 1280px) / 2), 96px);
	padding-right: clamp(24px, calc(96px - (100vw - 1280px) / 2), 96px);
}

.layam-odc .layam-slider-arrow {
	position: absolute;
	top: 50%;
	z-index: 3;
	width: 56px;
	height: 56px;
	transform: translateY(-50%);
}

.layam-odc .layam-slider-arrow-prev { left: 24px; }
.layam-odc .layam-slider-arrow-next { right: 24px; }

.layam-odc .layam-slider-controls {
	justify-content: flex-start;
	gap: 16px;
}

.layam-odc .layam-slider-pause {
	width: 40px;
	height: 40px;
}

@media (hover: hover) {
	.layam-odc .layam-slider-arrow:hover {
		background-color: rgba(255, 255, 255, .22);
	}
}

/* Phones: arrows move to the bottom corners, dots centred between them */
@media (max-width: 639.98px) {
	.layam-odc .layam-slide {
		min-height: max(600px, var(--layam-hero-h));
	}

	.layam-odc .layam-hero-slider .layam-slide-inner {
		padding-left: 24px;
		padding-right: 24px;
		padding-bottom: 104px;
	}

	.layam-odc .layam-slider-arrow {
		top: auto;
		bottom: 24px;
		width: 44px;
		height: 44px;
		transform: none;
	}

	.layam-odc .layam-slider-arrow .layam-icon {
		width: 20px;
		height: 20px;
	}

	.layam-odc .layam-slider-controls {
		bottom: 24px;
		height: 44px;
		justify-content: center;
		padding-left: 88px;
		padding-right: 88px;
	}
}

/* Short laptop screens (e.g. 1366 × 768): tighter vertical padding so the slide still fits one screen */
@media (min-width: 640px) and (max-height: 820px) {
	.layam-odc .layam-hero-slider .layam-slide-inner {
		padding-top: 64px;
		padding-bottom: 104px;
	}

	.layam-odc .layam-slide-title { font-size: 58px; }
	.layam-odc .layam-slide-text { margin-top: 24px; }
	.layam-odc .layam-slide-btn { margin-top: 32px; }
	.layam-odc .layam-slider-controls { bottom: 28px; }
}

/* Very short screens (≤ 740px tall, e.g. 1280 × 720 laptops, iPhone SE) */
@media (min-width: 640px) and (max-height: 740px) {
	.layam-odc .layam-hero-slider .layam-slide-inner {
		padding-top: 48px;
		padding-bottom: 96px;
	}

	.layam-odc .layam-slide-title { font-size: 52px; }
	.layam-odc .layam-slide-kicker + .layam-slide-title { margin-top: 24px; }
	.layam-odc .layam-slide-text { font-size: 20px; }
}

@media (max-width: 639.98px) {
	.layam-odc .layam-slide { min-height: max(540px, var(--layam-hero-h)); }
}

@media (max-width: 639.98px) and (max-height: 700px), (max-width: 399.98px) and (max-height: 760px) {
	.layam-odc .layam-hero-slider .layam-slide-inner {
		padding-top: 40px;
		padding-bottom: 88px;
	}

	.layam-odc .layam-slide-title {
		margin-top: 16px;
		font-size: 34px;
	}

	.layam-odc .layam-slide-kicker + .layam-slide-title { margin-top: 16px; }

	.layam-odc .layam-slide-text {
		margin-top: 16px;
		font-size: 16px;
	}

	.layam-odc .layam-slide-btn {
		margin-top: 24px;
		padding-top: 16px;
		padding-bottom: 16px;
	}
}

/* ---- Slider controls wrapper: transparent to layout */
.layam-odc .layam-slider-ui {
	display: contents;
}

/* ---- Arrows: together in the top-right corner of the slider (all screen sizes) */
.layam-odc .layam-slider-arrow,
.layam-odc .layam-slider-ui .layam-slider-arrow {
	position: absolute;
	top: 32px;
	bottom: auto;
	left: auto;
	z-index: 3;
	width: 52px;
	height: 52px;
	transform: none;
}

.layam-odc .layam-slider-arrow-next { right: 32px; }
.layam-odc .layam-slider-arrow-prev { right: 96px; }

.layam-odc .layam-slider-arrow .layam-icon {
	width: 22px;
	height: 22px;
}

/* Text no longer needs room for side arrows */
.layam-odc .layam-hero-slider .layam-slide-inner {
	padding-left: 24px;
	padding-right: 24px;
}

/* Dots + pause back at the bottom left */
.layam-odc .layam-slider-controls {
	justify-content: flex-start;
}

@media (max-width: 639.98px) {
	.layam-odc .layam-slider-arrow,
	.layam-odc .layam-slider-ui .layam-slider-arrow {
		top: 20px;
		width: 44px;
		height: 44px;
	}

	.layam-odc .layam-slider-arrow-next { right: 20px; }
	.layam-odc .layam-slider-arrow-prev { right: 74px; }

	.layam-odc .layam-slider-arrow .layam-icon {
		width: 20px;
		height: 20px;
	}

	.layam-odc .layam-slider-controls {
		bottom: 24px;
		height: 44px;
		padding-left: 24px;
		padding-right: 24px;
		justify-content: flex-start;
	}
}

/* ==================================================================
 * BRAND GUIDELINES LAYER - Layam Visual Brand Guidelines v1.4
 * Overrides the reference build where it conflicts with the guide.
 * Page numbers refer to the guidelines PDF.
 * ================================================================== */

/* ---- Grid & gutters (p.13, p.22: max 1280, 32-64px side padding) */
@media (min-width: 640px) { .layam-odc { --layam-gutter: 32px; } }
@media (min-width: 1024px) { .layam-odc { --layam-gutter: 48px; } }

.layam-odc .layam-container,
.layam-odc .layam-hero-slider .layam-slide-inner {
	padding-left: var(--layam-gutter);
	padding-right: var(--layam-gutter);
}

/* ---- Header & logo (p.5-7: tagline must stay readable, clear space) */
.layam-odc { --layam-header-h: 96px; }
.layam-odc .layam-logo { height: 64px; }
.layam-odc .layam-footer .layam-logo { height: 104px; }

@media (max-width: 639.98px) {
	.layam-odc { --layam-header-h: 80px; }
	.layam-odc .layam-logo { height: 48px; }
	.layam-odc .layam-footer .layam-logo { height: 88px; }
}

/* ---- Typography (p.11-12) */
.layam-odc .layam-h2,
.layam-odc .layam-h2-fixed,
.layam-odc .layam-h2-lg {
	font-weight: 700;
	line-height: 1.08;
}

/* Desktop H1 within 48-64px; phone / short-screen sizes defined earlier still apply */
@media (min-width: 1024px) and (min-height: 821px) {
	.layam-odc .layam-slide-title {
		font-size: 64px;
		line-height: 1.04;
	}
}

/* Body copy is charcoal; grey is reserved for supporting / context text (p.10, p.24) */
.layam-odc .layam-muted,
.layam-odc .layam-head-intro,
.layam-odc .layam-faq-a,
.layam-odc .layam-calc-label,
.layam-odc .layam-table td {
	color: var(--layam-text);
}

.layam-odc .layam-text-xs.layam-muted,
.layam-odc .layam-form-note,
.layam-odc .layam-model-tab-tag,
.layam-odc .layam-footer-inner {
	color: var(--layam-muted);
}

/* Keep body lines around 45-75 characters (p.12) */
.layam-odc .layam-callout p,
.layam-odc .layam-model-panel p,
.layam-odc .layam-faq-a,
.layam-odc .layam-industries-cta p {
	max-width: 68ch;
}

/* ---- Small teal text uses Deep Teal; core teal is never small text on white (p.9-10, p.33) */
.layam-odc .layam-eyebrow,
.layam-odc .layam-core-label,
.layam-odc .layam-legend,
.layam-odc .layam-c-accent,
.layam-odc .layam-c-teal,
.layam-odc .layam-model-fit,
.layam-odc .layam-about-closing {
	color: var(--layam-accent-text);
}

/* On photography: light teal accent and white text (p.10, p.29) */
.layam-odc .layam-estimate .layam-eyebrow,
.layam-odc .layam-estimate .layam-c-accent {
	color: var(--layam-accent-light);
}

.layam-odc .layam-c-teal-fg {
	color: #fff;
}

/* ---- Links: deep teal (p.22 teal = flow / links, p.34 deep teal links) */
.layam-odc .layam-link,
.layam-odc .layam-link-primary,
.layam-odc .layam-link-accent,
.layam-odc .layam-faq-more {
	color: var(--layam-accent-text);
	font-size: 16px;
	line-height: 1.6;
	font-weight: 600;
}

/* ---- Navigation & buttons: 14-16px, weight 600 (p.12) */
.layam-odc .layam-nav {
	gap: 32px;
	font-size: 16px;
	font-weight: 600;
}

.layam-odc .layam-mobile-nav-link {
	font-size: 16px;
	font-weight: 600;
}

.layam-odc .layam-btn {
	min-height: 48px;
	padding: 0 24px;
	gap: 8px;
	font-size: 16px;
	line-height: 1.5;
}

@media (min-width: 640px) {
	.layam-odc .layam-slide-btn {
		min-height: 56px;
		padding: 0 32px;
	}
}

@media (max-width: 639.98px) {
	.layam-odc .layam-slide-btn {
		min-height: 48px;
		padding: 0 16px;
	}
}

.layam-odc .layam-gov-tab {
	font-size: 16px;
	font-weight: 600;
}

/* Secondary CTA: white fill, teal border, deep-teal text (p.31).
   The header button is secondary so only one red CTA shows per view. */
.layam-odc .layam-btn.layam-header-cta,
.layam-odc .layam-btn-dark,
.layam-odc .layam-btn-outline {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 48px;
	padding: 0 24px;
	border: 1.5px solid var(--layam-accent);
	border-radius: var(--layam-radius);
	background-color: #fff;
	box-shadow: none;
	font-size: 16px;
	line-height: 1.5;
	font-weight: 600;
	color: var(--layam-accent-text);
}

@media (hover: hover) {
	.layam-odc .layam-btn.layam-header-cta:hover,
	.layam-odc .layam-btn-dark:hover,
	.layam-odc .layam-btn-outline:hover {
		background-color: var(--layam-accent-soft);
	}

	.layam-odc .layam-core-area:hover {
		background-color: var(--layam-accent-soft-2);
	}
}

@media (max-width: 479.98px) {
	.layam-odc .layam-btn.layam-header-cta {
		min-height: 44px;
		padding: 0 12px;
		font-size: 14px;
	}
}

/* ---- White-led surfaces; the old dark teal is not a brand colour (p.8, p.29) */
.layam-odc .layam-section-teal {
	background-color: var(--layam-accent-soft);   /* Team mix: process block on Pale Teal (p.22) */
	color: var(--layam-text);
}

.layam-odc #about.layam-section-teal {
	background-color: var(--layam-cream);         /* People / Process / Performance: Layam Cream */
}

.layam-odc .layam-section-teal .layam-tile {
	background-color: var(--layam-card);
	box-shadow: var(--layam-shadow);
}

.layam-odc .layam-section-teal .layam-op-80,
.layam-odc .layam-section-teal .layam-op-85 {
	opacity: 1;
}

.layam-odc .layam-section-teal .layam-op-60,
.layam-odc .layam-about-stat .layam-op-80 {
	opacity: 1;
	color: var(--layam-muted);
}

.layam-odc .layam-about-stat {
	border-left: 1px solid var(--layam-border);
}

.layam-odc .layam-core {
	border: 1px solid var(--layam-border);
	background-color: var(--layam-card);
	color: var(--layam-text);
	box-shadow: var(--layam-shadow);
}

.layam-odc .layam-core .layam-op-80 {
	opacity: 1;
	color: var(--layam-muted);
}

.layam-odc .layam-core-note {
	border-top-color: var(--layam-border);
	opacity: 1;
	color: var(--layam-muted);
}

.layam-odc .layam-core-area {
	background-color: var(--layam-accent-soft);
	color: var(--layam-text);
}

.layam-odc .layam-industries-cta {
	background-color: var(--layam-accent-soft);
	color: var(--layam-text);
}

/* ---- No colourful borders or decorative flourishes (p.35) */
.layam-odc .layam-callout {
	border-left: 0;
	background-color: var(--layam-accent-soft);
}

.layam-odc .layam-resp-card {
	border-top: 0;
}

/* Client = teal, Layam = red, shown as a small round badge instead of a coloured border (p.18-19) */
.layam-odc .layam-resp-card h3::before {
	content: "";
	display: inline-block;
	width: 8px;
	height: 8px;
	margin-right: 8px;
	border-radius: 9999px;
	background-color: var(--layam-accent);
	vertical-align: 2px;
}

.layam-odc .layam-resp-card.is-primary h3::before {
	background-color: var(--layam-primary);
}

.layam-odc .layam-accent-rule {
	border-left: 0;
	padding-left: 0;
	border-top: 1px solid var(--layam-border);
	padding-top: 24px;
}

.layam-odc .layam-model-tab,
.layam-odc .layam-model-tab.is-active {
	border-left: 0;
	padding-left: 16px;
}

@media (max-width: 1023.98px) {
	.layam-odc .layam-model-tabs {
		margin-right: calc(-1 * var(--layam-gutter));
		padding-right: var(--layam-gutter);
	}
}

/* ---- Tables: light rules, charcoal text, grey headers (p.30) */
.layam-odc .layam-table th {
	color: var(--layam-muted);
}

@media (max-width: 639.98px) {
	.layam-odc .layam-table td:not(.is-first)::before {
		color: var(--layam-muted);
	}
}

/* ---- Photography overlays: Deep Ink, image stays visible (p.21, p.27) */
.layam-odc .layam-slide-overlay {
	background:
		linear-gradient(to top, rgba(var(--layam-ink), .45) 0%, rgba(var(--layam-ink), 0) 30%),
		linear-gradient(90deg, rgba(var(--layam-ink), .62) 0%, rgba(var(--layam-ink), .52) 38%, rgba(var(--layam-ink), .14) 66%, rgba(var(--layam-ink), 0) 82%);
}

.layam-odc .layam-estimate-overlay {
	background: linear-gradient(90deg, rgba(var(--layam-ink), .64) 0%, rgba(var(--layam-ink), .52) 48%, rgba(var(--layam-ink), .4) 100%);
}

.layam-odc .layam-hero-slider {
	background-color: rgb(var(--layam-ink));
}

@media (max-width: 1023.98px) {
	.layam-odc .layam-slide-overlay {
		background: linear-gradient(to top, rgba(var(--layam-ink), .66) 0%, rgba(var(--layam-ink), .55) 45%, rgba(var(--layam-ink), .28) 80%, rgba(var(--layam-ink), .18) 100%);
	}

	.layam-odc .layam-estimate-overlay {
		background: rgba(var(--layam-ink), .6);
	}
}

/* Icon badges on service / industry cards: Deep Teal from the palette, white outline icon (p.9, p.19) */
.layam-odc .layam-service-icon,
.layam-odc .layam-industry-icon {
	background-color: var(--layam-accent-text);
	color: #fff;
}

/* ---- Slider arrows: left & right sides on tablet / laptop / desktop (≥ 640px).
 *      Phones keep both arrows in the top-right corner (rules above). */
@media (min-width: 640px) {
	.layam-odc .layam-slider-arrow,
	.layam-odc .layam-slider-ui .layam-slider-arrow {
		top: 50%;
		bottom: auto;
		width: 56px;
		height: 56px;
		transform: translateY(-50%);
	}

	/* .layam-slider-ui in the selector so this outranks the earlier top-right rule (which sets left: auto) */
	.layam-odc .layam-slider-ui .layam-slider-arrow-prev { left: 24px; right: auto; }
	.layam-odc .layam-slider-ui .layam-slider-arrow-next { right: 24px; left: auto; }

	/* Keep the text clear of the left arrow: 24px offset + 56px button + 16px gap = 96px from the edge */
	.layam-odc .layam-hero-slider .layam-slide-inner,
	.layam-odc .layam-hero-slider .layam-slider-controls {
		padding-left: max(var(--layam-gutter), min(96px, calc(96px - (100vw - 1280px) / 2)));
		padding-right: max(var(--layam-gutter), min(96px, calc(96px - (100vw - 1280px) / 2)));
	}
}

@media (min-width: 640px) and (max-width: 1023.98px) {
	.layam-odc .layam-slider-arrow,
	.layam-odc .layam-slider-ui .layam-slider-arrow {
		width: 48px;
		height: 48px;
	}

	.layam-odc .layam-slider-ui .layam-slider-arrow-prev { left: 16px; }
	.layam-odc .layam-slider-ui .layam-slider-arrow-next { right: 16px; }

	.layam-odc .layam-hero-slider .layam-slide-inner,
	.layam-odc .layam-hero-slider .layam-slider-controls {
		padding-left: 80px;
		padding-right: 80px;
	}
}

/* Full-width buttons that switch to display:block (arrow kept with the last word) need
   vertical padding to centre the text: 12px + 24px line + 12px = 48px. */
@media (max-width: 1023.98px) {
	.layam-odc .layam-costs-cta .layam-btn {
		padding-top: 12px;
		padding-bottom: 12px;
	}
}

@media (max-width: 639.98px) {
	.layam-odc .layam-services-foot .layam-btn,
	.layam-odc .layam-form-submit,
	.layam-odc .layam-mobile-nav-cta {
		padding-top: 12px;
		padding-bottom: 12px;
	}
}
/* Services CTA stays on the right now that the footnote beside it is removed */
.layam-odc .layam-services-foot {
	justify-content: flex-end;
}

/* Case study link stays on the right now that the Layam / Client row is removed */
.layam-odc .layam-case-foot {
	justify-content: flex-end;
}

/* Cost CTA card keeps its place in the right column now that the "Measure the output" block is removed */
@media (min-width: 768px) {
	.layam-odc .layam-costs-foot > .layam-costs-cta {
		grid-column: 2;
	}
}

/* ---- Cost CTA: full-width band under the calculator (text left, button right on desktop; stacked below 1024px) */
.layam-odc .layam-costs-foot {
	grid-template-columns: minmax(0, 1fr);
}

.layam-odc .layam-costs-foot > .layam-costs-cta {
	grid-column: auto;
	padding: 32px;
}

.layam-odc .layam-costs-cta > div {
	max-width: 68ch;
}

@media (min-width: 1024px) {
	.layam-odc .layam-costs-foot > .layam-costs-cta {
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		gap: 48px;
	}

	.layam-odc .layam-costs-cta .layam-btn {
		flex-shrink: 0;
	}
}

@media (max-width: 639.98px) {
	.layam-odc .layam-costs-foot > .layam-costs-cta {
		padding: 24px;
	}
}

/* Team mix: heading starts at the top of the section, level with the step cards
   (it was vertically centred, which added ~45-65px of empty space above it) */
@media (min-width: 1024px) {
	.layam-odc .layam-team {
		align-items: start;
	}
}

/* ==================================================================
 * Section heads: stacked and left-aligned
 * eyebrow / headline / optional second line / intro paragraph
 * ================================================================== */
.layam-odc .layam-head {
	display: block;
}

.layam-odc .layam-head-title {
	margin-top: 16px;
	font-size: 44px;
	line-height: 1.08;
	font-weight: 700;
	letter-spacing: -.025em;
	color: var(--layam-text);
}

.layam-odc .layam-head-subtitle {
	display: block;
	margin-top: 8px;
	font-size: 30px;
	line-height: 1.2;
	font-weight: 700;
	letter-spacing: -.02em;
}

.layam-odc .layam-head-intro {
	justify-self: auto;
	max-width: 1024px;
	margin-top: 16px;
	font-size: 20px;
	line-height: 1.6;
	color: var(--layam-muted);
}

@media (max-width: 1023.98px) {
	.layam-odc .layam-head-title { font-size: 40px; }
	.layam-odc .layam-head-subtitle { font-size: 26px; }
	.layam-odc .layam-head-intro { font-size: 19px; }
}

@media (max-width: 639.98px) {
	.layam-odc .layam-head-title {
		margin-top: 12px;
		font-size: 30px;
		line-height: 1.12;
	}

	.layam-odc .layam-head-subtitle {
		margin-top: 6px;
		font-size: 22px;
		line-height: 1.25;
	}

	.layam-odc .layam-head-intro {
		margin-top: 12px;
		font-size: 18px;
		line-height: 1.6;
	}
}

/* Case study head now uses the shared stacked head */
.layam-odc .layam-head + .layam-case-stats {
	margin-top: 48px;
}

/* ==================================================================
 * Services: horizontal cards (photo left, content right), 2 x 2 on desktop.
 * Bullets + retained-control note open on demand ("See what's included").
 * Replaces the earlier 4-column cards and the phone swipe carousel.
 * ================================================================== */
.layam-odc .layam-i-7 { width: 28px; height: 28px; }

.layam-odc .layam-services {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	align-items: start;
	gap: 24px;
	margin: 48px 0 0;
	padding: 0;
	overflow: visible;
	scroll-snap-type: none;
}

.layam-odc .layam-services-dots { display: none; }

.layam-odc .layam-service {
	display: grid;
	grid-template-columns: minmax(0, 38%) minmax(0, 1fr);
	flex: none;
	overflow: hidden;
}

.layam-odc .layam-service-media {
	position: relative;
	min-height: 232px;
	background-color: var(--layam-muted-bg);
}

.layam-odc .layam-service-photo {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
}

.layam-odc .layam-service-body {
	display: block;
	padding: 32px;
}

.layam-odc .layam-service-glyph {
	display: block;
	color: var(--layam-accent-text);
}

.layam-odc .layam-service-title {
	margin-top: 16px;
	font-size: 20px;
	line-height: 1.3;
	font-weight: 700;
	letter-spacing: -.01em;
	color: var(--layam-text);
}

.layam-odc .layam-service-desc {
	margin-top: 8px;
	font-size: 16px;
	line-height: 1.6;
	color: var(--layam-text);
}

.layam-odc .layam-service-toggle {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin: 16px 0 -8px;
	padding: 8px 0;
	font-size: 16px;
	line-height: 1.5;
	font-weight: 600;
	color: var(--layam-accent-text);
	cursor: pointer;
}

.layam-odc .layam-service-chevron { transition: transform .25s var(--layam-ease); }
.layam-odc .layam-service.is-open .layam-service-chevron { transform: rotate(180deg); }

@media (hover: hover) {
	.layam-odc .layam-service-toggle:hover { text-decoration: underline; text-underline-offset: 4px; }
}

.layam-odc .layam-service-toggle:focus-visible {
	outline: 2px solid var(--layam-accent-text);
	outline-offset: 2px;
	border-radius: 2px;
}

/* Smooth open/close: animate grid row from 0fr to 1fr */
.layam-odc .layam-service-more {
	display: grid;
	grid-template-rows: 0fr;
	visibility: hidden;
	transition: grid-template-rows .3s var(--layam-ease), visibility 0s linear .3s;
}

.layam-odc .layam-service.is-open .layam-service-more {
	grid-template-rows: 1fr;
	visibility: visible;
	transition: grid-template-rows .3s var(--layam-ease);
}

.layam-odc .layam-service-more-inner {
	min-height: 0;
	overflow: hidden;
}

.layam-odc .layam-service-list {
	margin: 16px 0 0;
	padding-top: 16px;
	border-top: 1px solid var(--layam-border);
	font-size: 16px;
	line-height: 1.6;
	color: var(--layam-text);
}

.layam-odc .layam-service-list li + li { margin-top: 8px; }
.layam-odc .layam-service-list .layam-dot { margin-top: 9px; }

.layam-odc .layam-service-note {
	margin-top: 16px;
	border-top: 0;
	padding-top: 0;
	font-size: 16px;
	line-height: 1.6;
}

@media (prefers-reduced-motion: reduce) {
	.layam-odc .layam-service-more,
	.layam-odc .layam-service.is-open .layam-service-more,
	.layam-odc .layam-service-chevron { transition: none; }
}

/* Tablet: one horizontal card per row */
@media (max-width: 1023.98px) {
	.layam-odc .layam-services { grid-template-columns: minmax(0, 1fr); }
	.layam-odc .layam-service { grid-template-columns: minmax(0, 34%) minmax(0, 1fr); }
}

/* Phones: photo on top, cards stacked */
@media (max-width: 639.98px) {
	.layam-odc .layam-services { gap: 16px; margin-top: 32px; }
	.layam-odc .layam-service { grid-template-columns: minmax(0, 1fr); }

	.layam-odc .layam-service-media {
		min-height: 0;
		aspect-ratio: 16 / 9;
	}

	.layam-odc .layam-service-body { padding: 24px; }
	.layam-odc .layam-service-title { font-size: 19px; }
}

/* Cards in the same row share one height (as in the design); the photo fills the extra height */
.layam-odc .layam-services {
	align-items: stretch;
}

/* While a card is open, cards size to their own content (no stretched empty neighbour) */
.layam-odc .layam-services:has(.layam-service.is-open) {
	align-items: start;
}

/* ---- Services cards: matched to the supplied design (measured, scaled to a 1184px content width) */
.layam-odc .layam-service {
	cursor: pointer;
	box-shadow: 0 1px 2px rgba(59, 62, 65, .05);
	transition: box-shadow .2s var(--layam-ease), border-color .2s var(--layam-ease);
}

@media (hover: hover) {
	.layam-odc .layam-service:hover {
		border-color: #c9cdd1;
		box-shadow: 0 8px 24px -12px rgba(59, 62, 65, .22);
	}
}

.layam-odc .layam-service-body {
	position: relative;
	padding: 32px;
}

.layam-odc .layam-service-glyph .layam-icon {
	width: 36px;
	height: 36px;
	stroke-width: 1.6;
}

.layam-odc .layam-service-title {
	margin-top: 20px;
	font-size: 22px;
	line-height: 1.22;
	font-weight: 700;
	letter-spacing: -.015em;
}

.layam-odc .layam-service-desc {
	margin-top: 12px;
	font-size: 17px;
	line-height: 1.65;
	color: var(--layam-muted);
}

/* Small round chevron in the top-right: the open/close cue (the whole card is clickable) */
.layam-odc .layam-service-toggle {
	position: absolute;
	top: 28px;
	right: 28px;
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	margin: 0;
	padding: 0;
	border-radius: 9999px;
	border: 1px solid var(--layam-border);
	background-color: var(--layam-card);
	color: var(--layam-muted);
	transition: color .2s var(--layam-ease), border-color .2s var(--layam-ease), background-color .2s var(--layam-ease);
}

.layam-odc .layam-service:hover .layam-service-toggle,
.layam-odc .layam-service.is-open .layam-service-toggle {
	border-color: var(--layam-accent);
	color: var(--layam-accent-text);
}

.layam-odc .layam-service.is-open .layam-service-toggle {
	background-color: var(--layam-accent-soft);
}

@media (hover: hover) {
	.layam-odc .layam-service-toggle:hover { text-decoration: none; }
}

.layam-odc .layam-service-more-inner { cursor: auto; }

.layam-odc .layam-service-list {
	margin-top: 20px;
	padding-top: 20px;
	font-size: 16px;
}

/* Tablet & phone sizing */
@media (max-width: 1023.98px) {
	.layam-odc .layam-service-title { font-size: 21px; }
}

@media (max-width: 639.98px) {
	.layam-odc .layam-service-body { padding: 24px; }
	.layam-odc .layam-service-toggle { top: 20px; right: 20px; }
	.layam-odc .layam-service-glyph .layam-icon { width: 32px; height: 32px; }
	.layam-odc .layam-service-title { margin-top: 16px; font-size: 20px; }
	.layam-odc .layam-service-desc { font-size: 16px; }
}

/* ---- Services: photo never moves when a card opens.
 * Row 1 = photo + text (its height locked per row by JS via --layam-svc-row),
 * Row 2 = details panel, full card width, under both. */
.layam-odc .layam-services,
.layam-odc .layam-services:has(.layam-service.is-open) {
	align-items: start;
}

.layam-odc .layam-service {
	grid-template-rows: auto auto;
}

.layam-odc .layam-service-media {
	grid-column: 1;
	grid-row: 1;
}

.layam-odc .layam-service-body {
	grid-column: 2;
	grid-row: 1;
	min-height: var(--layam-svc-row, 0px);
}

.layam-odc .layam-service-more {
	grid-column: 1 / -1;
	grid-row: 2;
}

.layam-odc .layam-service-more-pad {
	padding: 0 32px 32px;
}

.layam-odc .layam-service-more .layam-service-list {
	margin-top: 0;
	padding-top: 24px;
	border-top: 1px solid var(--layam-border);
}

@media (min-width: 640px) {
	.layam-odc .layam-service-more .layam-service-list {
		columns: 2;
		column-gap: 32px;
	}

	.layam-odc .layam-service-more .layam-service-list li {
		break-inside: avoid;
		margin-bottom: 8px;
	}

	.layam-odc .layam-service-more .layam-service-list li + li { margin-top: 0; }
}

/* Phones: photo on top, text, then details */
@media (max-width: 639.98px) {
	.layam-odc .layam-service-media { grid-column: 1; grid-row: 1; }
	.layam-odc .layam-service-body { grid-column: 1; grid-row: 2; }
	.layam-odc .layam-service-more { grid-column: 1; grid-row: 3; }
	.layam-odc .layam-service-more-pad { padding: 0 24px 24px; }
}

/* Why India card: the default map is shown whole (contain), on Pale Teal; uploaded photos still crop to fill */
.layam-odc .layam-india-img.is-map {
	aspect-ratio: 4 / 3;
	object-fit: contain;
	padding: 24px;
	background-color: var(--layam-accent-soft);
}

/* ==================================================================
 * "A sustainable business model": 4 commitment cards, 2 x 2 (client design)
 * ================================================================== */
.layam-odc .layam-commitments {
	margin-top: 48px;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 24px;
}

.layam-odc .layam-commitment {
	border-radius: var(--layam-radius);
	border: 1px solid var(--layam-border);
	background-color: var(--layam-card);
	padding: 32px;
}

.layam-odc .layam-commitment-icon {
	display: block;
	color: var(--layam-accent-text);
}

.layam-odc .layam-commitment-icon .layam-icon {
	width: 40px;
	height: 40px;
	stroke-width: 1.6;
}

.layam-odc .layam-commitment-title {
	margin-top: 24px;
	font-size: 22px;
	line-height: 1.25;
	font-weight: 700;
	letter-spacing: -.015em;
	color: var(--layam-text);
}

.layam-odc .layam-commitment-text {
	margin-top: 12px;
	font-size: 17px;
	line-height: 1.6;
	color: var(--layam-muted);
}

/* Highlighted first card. To drop the teal top bar (brand guide: no colourful borders),
   delete the border-top line below. */
.layam-odc .layam-commitment.is-highlight {
	border-color: var(--layam-accent-soft-2);
	border-top: 4px solid var(--layam-accent);
	background-color: var(--layam-accent-soft);
}

.layam-odc .layam-commitment.is-highlight .layam-commitment-title {
	color: var(--layam-accent-text);
}

/* Space before the "Four core values" block below */
.layam-odc .layam-commitments + .layam-h3 {
	margin-top: 80px;
}

@media (max-width: 767.98px) {
	.layam-odc .layam-commitments + .layam-h3 { margin-top: 56px; }
}

@media (max-width: 639.98px) {
	.layam-odc .layam-commitments {
		grid-template-columns: minmax(0, 1fr);
		gap: 16px;
		margin-top: 32px;
	}

	.layam-odc .layam-commitment { padding: 24px; }
	.layam-odc .layam-commitment-icon .layam-icon { width: 36px; height: 36px; }
	.layam-odc .layam-commitment-title { margin-top: 20px; font-size: 20px; }
	.layam-odc .layam-commitment-text { font-size: 16px; }
}

/* Commitment cards: icon and title weight closer to the client design */
@media (min-width: 640px) {
	.layam-odc .layam-commitment-icon .layam-icon { width: 44px; height: 44px; stroke-width: 1.8; }
	.layam-odc .layam-commitment-title { font-size: 24px; }
}

/* ==================================================================
 * Card titles: stand out from the body text under them.
 * Previously 16px/600 above 18px body text, so titles read as body copy.
 * Applies to: business-model features, team steps, journey steps & boxes,
 * responsibility cards, India points, cost CTA, callout, core values,
 * case-study columns.
 * ================================================================== */
.layam-odc h3[class^="layam-fw-600"],
.layam-odc h4[class^="layam-fw-600"],
.layam-odc .layam-case-cols h3 {
	font-size: 20px;
	line-height: 1.3;
	font-weight: 700;
	letter-spacing: -.01em;
	color: var(--layam-text);
}

/* Body text sits a little further from the stronger title */
.layam-odc h3[class^="layam-fw-600"] + p,
.layam-odc h4[class^="layam-fw-600"] + p,
.layam-odc .layam-case-cols h3 + p {
	margin-top: 8px;
}

@media (max-width: 639.98px) {
	.layam-odc h3[class^="layam-fw-600"],
	.layam-odc h4[class^="layam-fw-600"],
	.layam-odc .layam-case-cols h3 {
		font-size: 19px;
	}
}

/* Card titles: 19px everywhere so "Integrity & Transparency" fits one line in a core-value card
   (239px at 20px vs 236px available; 227px at 19px) and all card titles stay one size. */
.layam-odc h3[class^="layam-fw-600"],
.layam-odc h4[class^="layam-fw-600"],
.layam-odc .layam-case-cols h3 {
	font-size: 19px;
}

/* Core values: 4 across only where the cards are wide enough; 2 x 2 on small laptops */
@media (min-width: 1024px) and (max-width: 1279.98px) {
	.layam-odc .layam-values {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* ==================================================================
 * SPACING SYSTEM (8-point grid, brand guide p.13)
 *   Section heading -> content ..... 48px  (phones 32px)
 *   Eyebrow -> heading -> intro ...... 16px
 *   Card padding: 1-2 column cards . 32px  (phones 24px)
 *                 3-4 column tiles . 24px
 *   Gap between cards ............... 24px  (phones 16px)
 * ================================================================== */

/* Heading -> content */
.layam-odc .layam-head + * {
	margin-top: 48px;
}

/* Eyebrow -> heading -> intro: 16px at every size */
@media (max-width: 639.98px) {
	.layam-odc .layam-head-title,
	.layam-odc .layam-head-intro {
		margin-top: 16px;
	}

	.layam-odc .layam-head + * {
		margin-top: 32px;
	}
}

/* Wide (1-2 column) cards: 32px padding */
.layam-odc .layam-model-panel,
.layam-odc .layam-callout,
.layam-odc .layam-calc > .layam-card,
.layam-odc .layam-savings,
.layam-odc .layam-how-boxes .layam-soft-box,
.layam-odc .layam-gov,
.layam-odc .layam-form-card {
	padding: 32px;
}

/* Card grids: 24px between cards */
.layam-odc .layam-values,
.layam-odc .layam-case-stats,
.layam-odc .layam-case-cols,
.layam-odc .layam-how-boxes,
.layam-odc .layam-pillars,
.layam-odc .layam-resp-cards,
.layam-odc .layam-team-steps,
.layam-odc .layam-calc,
.layam-odc .layam-costs-foot {
	gap: 24px;
}

/* Keep "Integrity & Transparency" on one line with the wider gap */
.layam-odc .layam-values h4[class^="layam-fw-600"] {
	letter-spacing: -.02em;
}

@media (max-width: 639.98px) {
	.layam-odc .layam-model-panel,
	.layam-odc .layam-callout,
	.layam-odc .layam-calc > .layam-card,
	.layam-odc .layam-savings,
	.layam-odc .layam-how-boxes .layam-soft-box,
	.layam-odc .layam-gov,
	.layam-odc .layam-form-card {
		padding: 24px;
	}

	.layam-odc .layam-values,
	.layam-odc .layam-case-stats,
	.layam-odc .layam-case-cols,
	.layam-odc .layam-how-boxes,
	.layam-odc .layam-pillars,
	.layam-odc .layam-resp-cards,
	.layam-odc .layam-team-steps,
	.layam-odc .layam-calc,
	.layam-odc .layam-costs-foot,
	.layam-odc .layam-services,
	.layam-odc .layam-commitments {
		gap: 16px;
	}
}

/* ---- About: text + stats; the two stats sit together with a fixed gap, numbers aligned */
.layam-odc .layam-about-stats {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: 24px 48px;
}

.layam-odc .layam-about-stat {
	padding-left: 24px;
}

@media (min-width: 1024px) {
	.layam-odc .layam-about-head {
		grid-template-columns: minmax(0, 1.4fr) auto;
		align-items: center;
		gap: 48px;
	}
}

@media (max-width: 1023.98px) {
	.layam-odc .layam-about-head {
		grid-template-columns: minmax(0, 1fr);
		gap: 32px;
	}
}

@media (max-width: 639.98px) {
	.layam-odc .layam-about-stats { gap: 24px 32px; }
	.layam-odc .layam-about-stat { padding-left: 16px; }
}

@media (max-width: 639.98px) {
	/* About: the two stats side by side on phones too, numbers aligned */
	.layam-odc .layam-about-stats {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 16px;
	}

	/* Heading -> content 32px on phones for the sections with their own head layout */
	.layam-odc .layam-team,
	.layam-odc .layam-faq,
	.layam-odc .layam-estimate-inner {
		gap: 32px;
	}

	.layam-odc .layam-head + .layam-case-stats {
		margin-top: 32px;
	}
}

/* Case study: "Discuss your India team" link centred under the divider */
.layam-odc .layam-case-foot {
	justify-content: center;
	align-items: center;
	text-align: center;
}

/* ---- Commitment cards are selectable: the highlight moves to the clicked card.
 * The top bar is an inset shadow (not a border) so cards don't shift 3px when it moves. */
.layam-odc .layam-commitment {
	cursor: pointer;
	transition: background-color .25s var(--layam-ease), border-color .25s var(--layam-ease), box-shadow .25s var(--layam-ease);
}

.layam-odc .layam-commitment-title {
	transition: color .25s var(--layam-ease);
}

.layam-odc .layam-commitment.is-highlight {
	border: 1px solid var(--layam-accent-soft-2);
	box-shadow: inset 0 4px 0 var(--layam-accent);
}

@media (hover: hover) {
	.layam-odc .layam-commitment:not(.is-highlight):hover {
		border-color: var(--layam-accent);
		box-shadow: 0 8px 24px -12px rgba(59, 62, 65, .2);
	}
}

.layam-odc .layam-commitment:focus-visible {
	outline: 2px solid var(--layam-accent-text);
	outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
	.layam-odc .layam-commitment,
	.layam-odc .layam-commitment-title { transition: none; }
}

/* Services: "Request a cost estimate" button centred under the cards */
.layam-odc .layam-services-foot {
	justify-content: center;
}

/* ---- Industry cards: size to their own content instead of stretching to the
 *      tallest card in the carousel, so no empty gap above the links. */
.layam-odc .layam-industry {
	align-self: flex-start;
}

.layam-odc .layam-industry-note {
	margin-bottom: 16px;
}

.layam-odc .layam-industry-links {
	margin-top: auto;   /* pinned to the bottom; JS matches heights of the cards on screen */
	padding-top: 16px;
	flex-direction: column;   /* always stacked, whatever the label length */
	align-items: flex-start;
}

/* ---- Industry cards: one fixed rhythm so every card matches.
 *      Title reserves 2 lines, description shows 4 (Read more for the rest),
 *      and the note box absorbs any leftover height so no white gap appears. */
.layam-odc .layam-industry-title {
	min-height: 3em;
	min-height: 2lh;
}

.layam-odc .layam-industry-desc {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 4;
	line-clamp: 4;
	overflow: hidden;
	min-height: 4lh;
}

.layam-odc .layam-industry.is-expanded .layam-industry-desc {
	display: block;
	-webkit-line-clamp: unset;
	line-clamp: none;
}

.layam-odc .layam-industry-more {
	align-self: flex-start;
	margin-top: 4px;
	padding: 0;
	border: 0;
	background: none;
	font: inherit;
	font-size: 16px;
	font-weight: 600;
	color: var(--layam-accent-text);
	text-decoration: underline;
	text-underline-offset: 3px;
	cursor: pointer;
}

/* Hidden but still holds its line, so every note box starts at the same height */
.layam-odc .layam-industry-more[hidden] {
	display: block;
	visibility: hidden;
}

.layam-odc .layam-industry-more:focus-visible {
	outline: 2px solid var(--layam-accent-text);
	outline-offset: 2px;
}

.layam-odc .layam-industry-note {
	flex: 1 0 auto;
	margin-top: 16px;
}

/* Industries carousel: JS sizes the track to the cards on screen; taller
 * off-screen cards are clipped until they scroll into view. */
.layam-odc .layam-carousel[data-layam-track] {
	overflow-y: hidden;
	align-items: flex-start;
}

/* ==================================================================
 * Responsive rhythm: tighter vertical spacing on tablet and phone
 * ================================================================== */
@media (max-width: 1023.98px) {
	.layam-odc .layam-section,
	.layam-odc .layam-estimate-inner {
		padding-top: 36px;
		padding-bottom: 36px;
	}

	/* Section heading -> content, and the larger in-section spacers */
	.layam-odc .layam-head + *,
	.layam-odc .layam-head + .layam-case-stats,
	.layam-odc .layam-core,
	.layam-odc .layam-model-support,
	.layam-odc .layam-callout,
	.layam-odc .layam-services,
	.layam-odc .layam-models,
	.layam-odc .layam-steps,
	.layam-odc .layam-how-boxes,
	.layam-odc .layam-gov,
	.layam-odc .layam-india,
	.layam-odc .layam-calc,
	.layam-odc .layam-pillars,
	.layam-odc .layam-values-features,
	.layam-odc .layam-commitments,
	.layam-odc .layam-mt-12 {
		margin-top: 32px;
	}

	.layam-odc .layam-commitments + .layam-h3,
	.layam-odc .layam-mt-20 {
		margin-top: 48px;
	}
}

@media (max-width: 767.98px) {
	.layam-odc .layam-section,
	.layam-odc .layam-estimate-inner {
		padding-top: 32px;
		padding-bottom: 32px;
	}

	.layam-odc .layam-commitments + .layam-h3,
	.layam-odc .layam-mt-20 {
		margin-top: 40px;
	}
}

/* Table headers and the stacked-row labels on phones: Deep Teal so they stand
 * apart from the charcoal cell text (Deep Teal = labels, brand p.9-10) */
.layam-odc .layam-table th {
	color: var(--layam-accent-text);
}

@media (max-width: 639.98px) {
	.layam-odc .layam-table td:not(.is-first)::before {
		color: var(--layam-accent-text);
	}
}