/**
 * Artificial Intelligence Development Services —
 * /artificial-intelligence-development-services/
 * (page-artificial-intelligence-development-services.php)
 *
 * Built from Figma YmLzL45Qaw4FJRduYrQQM1 node 96:4135 "Intelligent web",
 * a single 1520x10438 desktop frame. Values come from get_design_context on
 * each section node — see the per-section `Figma <node>` comments below for
 * provenance. Nothing here was read off a screenshot except the two places
 * explicitly marked MEASURED, which follow this project's own rule that
 * gradients are measured from the 1:1 render rather than trusted from
 * gradientHandlePositions.
 *
 * SIBLING PAGE: css/ai-audit.css is node 94:2594 of the SAME Figma file and
 * shares this design system exactly — same palette, same eyebrow, same H2
 * scale, same CTA panel component, same FAQ restyle. Where a value is shared
 * it is written identically in both files rather than one importing the
 * other, because the two are independent page-scoped stylesheets; if you
 * change a shared value here, check whether ai-audit.css needs the same edit.
 *
 * EVERY selector is scoped under
 * .page-template-page-artificial-intelligence-development-services.
 * content.css loads sitewide and defines unscoped .hero / .faq__* rules that
 * would otherwise collide; same containment approach as agentic-ai.css,
 * ai-automation-agency.css and ai-audit.css.
 *
 * No Figma frame exists below 1520px anywhere in this file, so every rule in
 * the RESPONSIVE section at the bottom is this build's own interpretation and
 * is NOT Figma-verified. Stated in TASK.md and in the Phase 9 report.
 *
 * TWO DESIGN-SOURCE INCONSISTENCIES, deliberately normalised:
 *   1. "The visibility gap" cards 4 and 6 (96:4212 "Discoverable?", 96:4220
 *      "Ready?") specify Roboto Bold where the other four (96:4200, 96:4204,
 *      96:4208, 96:4216) specify Inter Bold at the same 22px/white. Built as
 *      Inter Bold throughout — four-to-two, and nothing else on the page uses
 *      Roboto.
 *   2. Node 96:4507 is a stray unlabelled 20x20 Material "timer" icon parked
 *      at the bottom-left of the "Make information easier to find" section.
 *      Treated as leftover scaffolding and not rendered — but its 20px box is
 *      kept as extra padding-bottom on that band so every section below it
 *      still starts at its Figma Y. See .aids-ess__band--tint.
 */

.page-template-page-artificial-intelligence-development-services {
	/* Palette — from Figma node fills. Identical to ai-audit.css's, because
	   both frames live in the same file and share the same styles. */
	--aids-bg: #020010;
	--aids-band: #100c19;
	--aids-card: #0f0821;
	--aids-card-alt: #100a21;
	--aids-accent: #b96cff;
	--aids-eyebrow: #cab5ff;
	--aids-eyebrow-light: #9a60fb;
	--aids-accent-light: #9a60fa;
	--aids-body: rgba(255, 255, 255, 0.7);
	--aids-lede: #c7c1cc;
	--aids-lede-alt: #aab1c0;
	--aids-ink: #171717;
	--aids-ink-body: rgba(23, 23, 23, 0.7);
	--aids-rule-dark: #261f4e;

	/* Shared CTA panel skin — Figma 96:4513. Byte-identical to ai-audit.css's
	   --aud-panel-*, because it is the same component instance. */
	--aids-panel-bg: linear-gradient(180deg, rgba(19, 12, 35, 0.92) 0%, rgba(12, 8, 25, 0.94) 100%);
	--aids-panel-border: rgba(120, 82, 186, 0.5);
	--aids-panel-shadow: 0 18px 55px 0 rgba(0, 0, 0, 0.24);

	background-color: var(--aids-bg);
}

.page-template-page-artificial-intelligence-development-services .aids-page {
	background-color: var(--aids-bg);
	overflow-x: clip; /* contains the hero art's deliberate horizontal bleed */

	/**
	 * Inter is loaded as a variable font WITH an optical-size axis
	 * (opsz 14..32, see the tbi-ai-fonts enqueue in functions.php). CSS
	 * defaults to `font-optical-sizing: auto`, which interpolates opsz toward
	 * the font-size — so at 64px the browser silently renders the Display cut
	 * (opsz 32) while Figma renders the text cut. That is an ~8% glyph-width
	 * error on every large Inter element and it is invisible to a
	 * computed-style check, because family/size/weight all still read
	 * correct. Diagnosed in full on page-ai-automation-agency.php; set once
	 * here so it inherits to every section. Scoped to .aids-page so the
	 * sitewide header and footer are untouched.
	 */
	font-optical-sizing: none;
}

/* Figma frame is 1520 wide with 40px inner padding => 1440 content. */
.page-template-page-artificial-intelligence-development-services .aids-container {
	width: 100%;
	max-width: var(--container-max-width);
	margin-inline: auto;
	padding-inline: var(--container-padding-inline);
	box-sizing: border-box;
}

/* ================================================================= shared */

/* Eyebrow — Figma 96:4169 / 96:4190 / 96:4225 / 96:4517 / 96:4528 / 96:4593. */
.page-template-page-artificial-intelligence-development-services .aids-eyebrow,
.page-template-page-artificial-intelligence-development-services .aids-proof__eyebrow,
.page-template-page-artificial-intelligence-development-services .aids-gap__eyebrow,
.page-template-page-artificial-intelligence-development-services .aids-cap__eyebrow,
.page-template-page-artificial-intelligence-development-services .aids-ess__eyebrow,
.page-template-page-artificial-intelligence-development-services .aids-ess__kicker,
.page-template-page-artificial-intelligence-development-services .aids-midcta__eyebrow,
.page-template-page-artificial-intelligence-development-services .aids-why__eyebrow,
.page-template-page-artificial-intelligence-development-services .aids-final__eyebrow {
	margin: 0;
	font-family: var(--font-base);
	font-weight: 700;
	font-size: 12px;
	line-height: 1.19;
	letter-spacing: 2.86px;
	text-transform: uppercase;
	color: var(--aids-eyebrow);
}

/* Figma 96:4418 / 96:4428 / 96:4462 / 96:4485 — the light band recolours it. */
.page-template-page-artificial-intelligence-development-services .aids-ess__eyebrow,
.page-template-page-artificial-intelligence-development-services .aids-ess__kicker {
	color: var(--aids-eyebrow-light);
}

/**
 * The yellow CTA button. Figma draws it with SQUARE corners at every one of
 * its four appearances (96:4411, 96:4452, 96:4520, 96:4598) — no radius is
 * specified on any of them, so none is added here.
 */
.page-template-page-artificial-intelligence-development-services .aids-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	box-sizing: border-box;
	height: 56px;
	padding: 14px 32px;
	background: var(--color-cta-bg);
	color: var(--color-cta-text);
	font-family: var(--font-base);
	font-weight: 700;
	font-size: 14px;
	line-height: normal;
	letter-spacing: 0.028px;
	text-decoration: none;
	transition: background-color 0.2s ease, transform 0.2s ease;
}

.page-template-page-artificial-intelligence-development-services .aids-btn:hover,
.page-template-page-artificial-intelligence-development-services .aids-btn:focus-visible {
	background: #ffef52;
}

.page-template-page-artificial-intelligence-development-services .aids-btn__arrow {
	flex: none;
	display: block;
}

/* ================================================== 1. HERO (96:4137 + 96:4605)

   Frame coords: the header instance ends at y=77 and the hero art group
   (96:4137 "BG") spans y=92..797, so the art sits 15px below the section
   top. The copy block (96:4605) starts at y=244, i.e. 167px from the
   section top. The proof band below begins at y=792, which is 5px before
   the art ends — Figma lets the band paint over the last 5px of it, so the
   section is 715px tall and the art is clipped, not shortened.
   ======================================================================= */

.page-template-page-artificial-intelligence-development-services .aids-hero {
	position: relative;
	isolation: isolate;
	min-height: 715px;
	overflow: hidden;
	background: var(--aids-bg);
}

/**
 * Figma's hero background is a mask group of two photographic fills, a
 * 1672x941 "bg1" layer and five blurred ellipses. Shipped as ONE flattened
 * 2x export rather than rebuilt as a CSS layer stack — large Gaussian blurs
 * on rotated ellipses are not reproducible in CSS with any accuracy, and
 * this is the same decision already taken for page-ai-automation-agency.php.
 */
.page-template-page-artificial-intelligence-development-services .aids-hero__bg {
	position: absolute;
	top: 15px;
	left: 0;
	z-index: 0;
	display: block;
	width: 100%;
	height: 705px;
	isolation: isolate;
}

.page-template-page-artificial-intelligence-development-services .aids-hero__bg img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center top;
}

.page-template-page-artificial-intelligence-development-services .aids-hero__inner {
	position: relative;
	z-index: 1;
	padding-top: 167px;
	padding-bottom: 80px;
}

.page-template-page-artificial-intelligence-development-services .aids-hero__content {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	max-width: 691px;
}

/* Figma 96:4606 is Inter SEMI BOLD (600), not the 700 every other eyebrow
   on the page uses. Kept at 600. */
.page-template-page-artificial-intelligence-development-services .aids-hero__eyebrow {
	margin: 0;
	font-family: var(--font-base);
	font-weight: 600;
	font-size: 12px;
	line-height: normal;
	letter-spacing: 2.86px;
	text-transform: uppercase;
	color: var(--aids-eyebrow);
}

/* Figma 96:4608 — Inter REGULAR 64px on a literal 68px leading, trimmed. */
.page-template-page-artificial-intelligence-development-services .aids-hero__heading {
	/* Figma 96:4605: 20px from the eyebrow, 28px to the paragraph. Set as
	   margins rather than a flex `gap`, so the two different spacings are
	   explicit instead of a gap and a margin stacking into neither. */
	margin: 20px 0 0;
	max-width: 691px;
	font-family: var(--font-base);
	font-weight: 400;
	font-size: 64px;
	line-height: 68px;
	letter-spacing: normal;
	color: var(--color-text-light);
	text-box-trim: trim-both;
	text-box-edge: cap alphabetic;
}

/* Figma 96:4609 — Gelasio 25px / literal 40px, 82% white, 648px measure. */
.page-template-page-artificial-intelligence-development-services .aids-hero__desc {
	margin: 28px 0 0;
	max-width: 648px;
	font-family: var(--font-serif);
	font-weight: 400;
	font-size: 25px;
	line-height: 40px;
	color: rgba(255, 255, 255, 0.82);
}

/* ============================================== 2. PROOF BAR (96:4166)

   A full-bleed #100c19 band, 55px vertical padding, intro and stats in one
   row with a 128px gap.
   =================================================================== */

.page-template-page-artificial-intelligence-development-services .aids-proof {
	padding-block: 55px;
	background: var(--aids-band);
}

.page-template-page-artificial-intelligence-development-services .aids-proof__inner {
	display: flex;
	align-items: center;
	gap: 128px;
}

.page-template-page-artificial-intelligence-development-services .aids-proof__intro {
	flex: none;
	width: 439px;
}

/* Figma 96:4169 sets the eyebrow to a 268.6px measure so it wraps onto two
   lines; the lede below it starts 33px from the eyebrow's own top. */
.page-template-page-artificial-intelligence-development-services .aids-proof__eyebrow {
	max-width: 269px;
}

/* Figma 96:4170 — Inter 15px on a literal 28px leading, trimmed. */
.page-template-page-artificial-intelligence-development-services .aids-proof__lede {
	margin: 19px 0 0;
	font-family: var(--font-base);
	font-weight: 400;
	font-size: 15px;
	line-height: 28px;
	color: var(--aids-body);
	text-box-trim: trim-both;
	text-box-edge: cap alphabetic;
}

/**
 * Figma 96:4171 is a FIXED 862.781px block, not a fill — 439 + 128 + 862.781
 * is 1430 inside the 1440 row, i.e. the design leaves 10px of slack on the
 * right. Filling the row instead makes each cell 4px wider and re-wraps the
 * captions.
 *
 * `align-items: center` is also load-bearing: Figma's first cell is 108 tall
 * against 129 for the other two (its caption is two lines, theirs are three)
 * and the row centres it, so the first figure and its divider start 10px
 * lower than the other two. Verified against the 1:1 render, where the first
 * rule runs from y=857 and the other two from y=847.
 */
.page-template-page-artificial-intelligence-development-services .aids-proof__stats {
	display: flex;
	flex: none;
	align-items: center;
	width: 862.781px;
	gap: 35px;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Figma 96:4172 / 96:4177 / 96:4182 — each figure hangs off a 1px rule. */
.page-template-page-artificial-intelligence-development-services .aids-proof__stat {
	flex: 1;
	min-width: 0;
	padding-left: 24px;
	border-left: 1px solid rgba(160, 100, 255, 0.3);
}

/* Figma 96:4175 — Gelasio 57.6px on a literal 57.6px leading. */
.page-template-page-artificial-intelligence-development-services .aids-proof__figure {
	margin: 0 0 8px;
	font-family: var(--font-serif);
	font-weight: 400;
	font-size: 57.6px;
	line-height: 57.6px;
	color: var(--color-text-light);
}

/**
 * Figma gives each caption its own measure — 96:4176 is 251px, 96:4181 is
 * 233px and 96:4186 is 216px — and those are what set each one's line
 * breaks. Left to fill the ~264px cell, all three re-wrap and the band stops
 * matching the design even though its height still does.
 */
.page-template-page-artificial-intelligence-development-services .aids-proof__caption {
	margin: 0;
	font-family: var(--font-base);
	font-weight: 400;
	font-size: 14px;
	line-height: 21px;
	color: var(--aids-body);
}

/* Figma's caption 1 is 251px inside a 240px cell content box — it overflows
   into the 35px gutter by design, and that 11px is exactly what keeps it on
   two lines instead of three. Declared as a width, not a max-width, so the
   cell cannot squeeze it. */
.page-template-page-artificial-intelligence-development-services .aids-proof__stat:nth-child(1) .aids-proof__caption { width: 251px; }
.page-template-page-artificial-intelligence-development-services .aids-proof__stat:nth-child(2) .aids-proof__caption { width: 233px; }
.page-template-page-artificial-intelligence-development-services .aids-proof__stat:nth-child(3) .aids-proof__caption { width: 216px; }

/* ========================================= 3. THE VISIBILITY GAP (96:4187)

   Section spans y=1030..1902 with the 632px content block centred by 120px
   of padding top and bottom.
   ======================================================================= */

.page-template-page-artificial-intelligence-development-services .aids-gap {
	padding-block: 120px;
	background: var(--aids-bg);
}

.page-template-page-artificial-intelligence-development-services .aids-gap__inner {
	display: flex;
	align-items: flex-start;
	gap: 80px;
}

.page-template-page-artificial-intelligence-development-services .aids-gap__intro {
	flex: none;
	width: 486px;
}

/**
 * Figma 96:4191 — Gelasio Regular 76px on a literal 78.3px leading with
 * -5px tracking, split across two text nodes so the second can carry
 * #b96cff. Written as one <h2> with a span; the <br> inside the accent is
 * Figma's own hard break (96:4193 renders "Right" and "Signals?" on
 * separate lines), and the design's line count depends on it.
 */
.page-template-page-artificial-intelligence-development-services .aids-gap__heading {
	margin: 20px 0 0;
	font-family: var(--font-serif);
	font-weight: 400;
	font-size: 76px;
	line-height: 78.3px;
	letter-spacing: -5px;
	color: var(--color-text-light);
}

.page-template-page-artificial-intelligence-development-services .aids-gap__heading-accent {
	color: var(--aids-accent);
}

/* Figma 96:4196 — Inter 18px / literal 28.8px, #c7c1cc, 32px below the
   heading block. */
.page-template-page-artificial-intelligence-development-services .aids-gap__lede {
	margin: 32px 0 0;
	max-width: 486px;
	font-family: var(--font-base);
	font-weight: 400;
	font-size: 18px;
	line-height: 28.8px;
	color: var(--aids-lede);
}

/* Figma 96:4197 — 874px of cards, two per row, 16px gutter. */
.page-template-page-artificial-intelligence-development-services .aids-gap__cards {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 16px;
	flex: 1;
	min-width: 0;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Figma 96:4198 — #100a21, 1px rgba(168,114,216,0.3), 20px radius, 32px pad. */
.page-template-page-artificial-intelligence-development-services .aids-gap__card {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 16px;
	box-sizing: border-box;
	min-height: 200px;
	padding: 32px;
	border: 1px solid rgba(168, 114, 216, 0.3);
	border-radius: 20px;
	background: var(--aids-card-alt);
}

/* Figma 96:4199 — a 34.891 x 3.063 accent bar. */
.page-template-page-artificial-intelligence-development-services .aids-gap__card-rule,
.page-template-page-artificial-intelligence-development-services .aids-ess__card-rule {
	display: block;
	flex: none;
	width: 34.891px;
	height: 3.063px;
	background: var(--aids-accent);
}

.page-template-page-artificial-intelligence-development-services .aids-gap__card-title {
	margin: 0;
	font-family: var(--font-base);
	font-weight: 700;
	font-size: 22px;
	line-height: normal;
	color: var(--color-text-light);
}

.page-template-page-artificial-intelligence-development-services .aids-gap__card-desc {
	margin: 0;
	font-family: var(--font-base);
	font-weight: 400;
	font-size: 16px;
	line-height: 24px;
	color: var(--aids-body);
}

/* ==================================== 4. WHAT TBI WILL DO FOR YOU (96:4222)

   Content runs y=1902..3070 with no top padding of its own (the gap section
   above supplies the 120px), then 107px down to the light band.
   ======================================================================= */

.page-template-page-artificial-intelligence-development-services .aids-cap {
	padding-bottom: 107px;
	background: var(--aids-bg);
}

.page-template-page-artificial-intelligence-development-services .aids-cap__inner {
	display: flex;
	flex-direction: column;
	gap: 64px;
}

/* Figma 96:4223 — heading and cards are one group with a 48px gap; the 64px
   on .aids-cap__inner is the gap from that group down to the CTA strip. */
.page-template-page-artificial-intelligence-development-services .aids-cap__group {
	display: flex;
	flex-direction: column;
	gap: 48px;
}

.page-template-page-artificial-intelligence-development-services .aids-cap__head {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 20px;
	text-align: center;
}

/* Figma 96:4226 — Gelasio 76px / literal 78.34px, -3.46px tracking. The
   1178px measure is wider than the 1046px eyebrow container above it, and
   that is what makes the heading break after "experiences". */
.page-template-page-artificial-intelligence-development-services .aids-cap__heading {
	margin: 0;
	max-width: 1178px;
	font-family: var(--font-serif);
	font-weight: 400;
	font-size: 76px;
	line-height: 78.34px;
	letter-spacing: -3.46px;
	color: var(--color-text-light);
}

.page-template-page-artificial-intelligence-development-services .aids-cap__cards {
	display: flex;
	align-items: stretch;
	gap: 19px;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Figma 96:4229 — #0f0821, 1px rgba(185,108,255,0.32), 25px radius, and a
   deliberately asymmetric pad: 20 top, 20 right, 33 bottom, 16 left. */
.page-template-page-artificial-intelligence-development-services .aids-cap__card {
	display: flex;
	flex-direction: column;
	gap: 28px;
	flex: 1;
	min-width: 0;
	box-sizing: border-box;
	padding: 20px 20px 33px 16px;
	border: 1px solid rgba(185, 108, 255, 0.32);
	border-radius: 25px;
	background: var(--aids-card);
}

/**
 * Figma 96:4232 / 96:4287 / 96:4353 — flat #1c162d boards carrying 20-40
 * small vector and box children each. Shipped as 2x flattened exports
 * rather than ~120 nested divs: they are decorative, they never reflow
 * independently of their card, and the export is Figma's own pixels. Each
 * export is already flattened against #1c162d with its 10px radius baked
 * in, so no background or radius is set here.
 */
.page-template-page-artificial-intelligence-development-services .aids-cap__art {
	display: block;
	flex: none;
}

.page-template-page-artificial-intelligence-development-services .aids-cap__art img {
	display: block;
	width: 100%;
	height: auto;
}

.page-template-page-artificial-intelligence-development-services .aids-cap__body {
	display: flex;
	flex-direction: column;
	gap: 24px;
}

/* Figma 96:4267 — Inter Bold 10px / literal 13px, 1.86px tracking. */
.page-template-page-artificial-intelligence-development-services .aids-cap__kicker {
	margin: 0;
	font-family: var(--font-base);
	font-weight: 700;
	font-size: 10px;
	line-height: 13px;
	letter-spacing: 1.86px;
	text-transform: uppercase;
	color: var(--aids-eyebrow);
}

/* Figma 96:4268 — Inter BLACK (900) 22px on a literal 31.6px leading. */
.page-template-page-artificial-intelligence-development-services .aids-cap__title {
	margin: -8px 0 0;
	font-family: var(--font-base);
	font-weight: 900;
	font-size: 22px;
	line-height: 31.6px;
	color: var(--color-text-light);
	text-box-trim: trim-both;
	text-box-edge: cap alphabetic;
}

.page-template-page-artificial-intelligence-development-services .aids-cap__list {
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.page-template-page-artificial-intelligence-development-services .aids-cap__item {
	display: flex;
	align-items: center;
	gap: 10px;
	min-height: 20px;
	font-family: var(--font-base);
	font-weight: 400;
	font-size: 15px;
	line-height: 19.5px;
	color: var(--aids-body);
}

/* Figma 96:4272 — the codicon:google-gemini spark, 10x10. */
.page-template-page-artificial-intelligence-development-services .aids-cap__bullet {
	flex: none;
	display: block;
	width: 10px;
	height: 10px;
}

/* Figma 96:4405 — the inline CTA strip closing the section. Same card skin
   as the three above it, 185px tall, 40px pad. */
.page-template-page-artificial-intelligence-development-services .aids-cap__cta {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 40px;
	box-sizing: border-box;
	min-height: 185px;
	padding: 40px;
	border: 1px solid rgba(185, 108, 255, 0.32);
	border-radius: 25px;
	background: var(--aids-card);
}

.page-template-page-artificial-intelligence-development-services .aids-cap__cta-copy {
	display: flex;
	flex-direction: column;
	gap: 12px;
	min-width: 0;
}

/* Figma 96:4409 — Inter Bold 34px with -2.46px tracking. */
.page-template-page-artificial-intelligence-development-services .aids-cap__cta-heading {
	margin: 0;
	font-family: var(--font-base);
	font-weight: 700;
	font-size: 34px;
	line-height: normal;
	letter-spacing: -2.46px;
	color: var(--color-text-light);
}

.page-template-page-artificial-intelligence-development-services .aids-cap__cta-desc {
	margin: 0;
	max-width: 889px;
	font-family: var(--font-base);
	font-weight: 400;
	font-size: 15px;
	line-height: 23px;
	color: rgba(255, 255, 255, 0.6);
	text-box-trim: trim-both;
	text-box-edge: cap alphabetic;
}

/* Figma 96:4411 — this one button uses 15px text and a 20px inline pad,
   unlike the other three (14px / 32px). */
.page-template-page-artificial-intelligence-development-services .aids-cap__cta-btn {
	flex: none;
	padding-inline: 20px;
	font-size: 15px;
	letter-spacing: normal;
}

/* ================================== 5. AGENTIC WEB ESSENTIALS (96:4415)

   Three stacked splits on light backgrounds: 96:4416 (white + a purple
   radial wash, 120/60 padding), 96:4456 (white between two hairlines,
   60/60) and 96:4475 (#fefefe, 60/120).
   =================================================================== */

.page-template-page-artificial-intelligence-development-services .aids-ess {
	background: #fff;
	color: var(--aids-ink);
}

/**
 * Figma 96:4416's own fill is white with a radial purple wash whose paint
 * definition is a userSpaceOnUse gradient centred at (1216.8, 452.4) with
 * an x-radius of 1326.3 and a y-radius of 1705.4, fading out by 30%.
 * Expressed here in the same terms against the 1521x1131 frame.
 */
.page-template-page-artificial-intelligence-development-services .aids-ess__lead {
	position: relative;
	padding-block: 120px 60px;
	background:
		radial-gradient(1326px 1705px at 80% 40%, rgba(116, 73, 177, 0.16) 0%, rgba(116, 73, 177, 0) 30%),
		#fff;
}

.page-template-page-artificial-intelligence-development-services .aids-ess__lead-inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 28px;
	margin-bottom: 88px;
	text-align: center;
}

/* Figma 96:4419 — Inter BOLD 76px on a literal 79px leading, -3.46px
   tracking, #171717. Note this one is Inter, not the Gelasio used by the
   dark sections' H2s. */
.page-template-page-artificial-intelligence-development-services .aids-ess__heading {
	margin: 0;
	max-width: 1272px;
	font-family: var(--font-base);
	font-weight: 700;
	font-size: 76px;
	line-height: 79px;
	letter-spacing: -3.46px;
	color: var(--aids-ink);
	text-box-trim: trim-both;
	text-box-edge: cap alphabetic;
}

.page-template-page-artificial-intelligence-development-services .aids-ess__heading-accent,
.page-template-page-artificial-intelligence-development-services .aids-ess__title-accent {
	color: var(--aids-accent-light);
}

.page-template-page-artificial-intelligence-development-services .aids-ess__band--rule {
	padding-block: 60px;
	border-top: 1px solid rgba(190, 160, 235, 0.17);
	border-bottom: 1px solid rgba(190, 160, 235, 0.17);
	background: #fff;
}

/* Figma 96:4475 is #fefefe, not #ffffff. The extra 20px of bottom padding
   stands in for the stray 96:4507 timer icon that is not rendered — see
   this file's header; it keeps every section below this one at its Figma Y. */
.page-template-page-artificial-intelligence-development-services .aids-ess__band--tint {
	padding-block: 60px 140px;
	background: #fefefe;
}

/* Figma 96:4420 / 96:4457 / 96:4476 — 640px of art, a 107px gutter, 694px
   of copy. */
.page-template-page-artificial-intelligence-development-services .aids-ess__split {
	display: flex;
	align-items: center;
	gap: 107px;
}

.page-template-page-artificial-intelligence-development-services .aids-ess__media {
	flex: none;
	display: block;
	width: 640px;
}

.page-template-page-artificial-intelligence-development-services .aids-ess__media img {
	display: block;
	width: 100%;
	height: auto;
}

.page-template-page-artificial-intelligence-development-services .aids-ess__copy {
	flex: 1;
	min-width: 0;
	max-width: 694px;
}

/* Figma 96:4429 / 96:4463 / 96:4486 — Gelasio 60px on a literal 65.318px
   leading with -2px tracking. */
.page-template-page-artificial-intelligence-development-services .aids-ess__title {
	margin: 20px 0 0;
	font-family: var(--font-serif);
	font-weight: 400;
	font-size: 60px;
	line-height: 65.318px;
	letter-spacing: -2px;
	color: var(--aids-ink);
}

/**
 * Figma sets a DIFFERENT measure on each of the three titles — 96:4429 is
 * 633px, 96:4463 is 612px and 96:4486 is 607px — and those widths are what
 * break each one onto three lines. Left at the column's full 693px the third
 * one falls onto two lines and its band loses a 65px line of height.
 */
.page-template-page-artificial-intelligence-development-services .aids-ess__lead .aids-ess__title { max-width: 633px; }
.page-template-page-artificial-intelligence-development-services .aids-ess__band--rule .aids-ess__title { max-width: 612px; }
.page-template-page-artificial-intelligence-development-services .aids-ess__band--tint .aids-ess__title { max-width: 607px; }

.page-template-page-artificial-intelligence-development-services .aids-ess__text {
	margin: 16px 0 0;
	font-family: var(--font-base);
	font-weight: 400;
	font-size: 16px;
	line-height: 27.52px;
	color: var(--aids-ink-body);
}

.page-template-page-artificial-intelligence-development-services .aids-ess__text + .aids-ess__text {
	margin-top: 12px;
}

/* Figma 96:4431 — a 281px list, hairline above and below every row. */
/* Figma 96:4431 is a FIXED 281px box whose five rows each carry
   flex-[1_0_0] and stretch to fill it — not five content-height rows, which
   come out 15px short in total. */
.page-template-page-artificial-intelligence-development-services .aids-ess__list {
	display: flex;
	flex-direction: column;
	min-height: 281px;
	margin: 24px 0 0;
	padding: 0;
	border-top: 1px solid rgba(190, 160, 235, 0.18);
	list-style: none;
}

.page-template-page-artificial-intelligence-development-services .aids-ess__list-item {
	display: flex;
	flex: 1 0 0;
	align-items: flex-start;
	gap: 18px;
	padding-block: 17px;
	border-bottom: 1px solid rgba(190, 160, 235, 0.18);
}

.page-template-page-artificial-intelligence-development-services .aids-ess__list-num {
	flex: none;
	font-family: var(--font-base);
	font-weight: 500;
	font-size: 12px;
	line-height: 18px;
	color: var(--aids-accent-light);
}

.page-template-page-artificial-intelligence-development-services .aids-ess__list-text {
	font-family: var(--font-base);
	font-weight: 400;
	font-size: 14px;
	line-height: 18px;
	color: var(--aids-ink-body);
}

.page-template-page-artificial-intelligence-development-services .aids-ess__btn {
	margin-top: 24px;
	gap: 8px;
}

/* Figma 96:4490 — a 2x2 grid of 339.5x128 cards with a 14px gutter. */
.page-template-page-artificial-intelligence-development-services .aids-ess__cards {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 14px;
	margin: 32px 0 0;
	padding: 0;
	max-width: 693px;
	list-style: none;
}

.page-template-page-artificial-intelligence-development-services .aids-ess__card {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 14px;
	box-sizing: border-box;
	min-height: 128px;
	padding: 24px;
	border: 1px solid rgba(168, 114, 216, 0.22);
	border-radius: 20px;
	background: rgba(255, 255, 255, 0.02);
	box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.03);
}

.page-template-page-artificial-intelligence-development-services .aids-ess__card-title {
	margin: 0;
	font-family: var(--font-base);
	font-weight: 600;
	font-size: 16px;
	line-height: normal;
	color: rgba(23, 23, 23, 0.88);
	text-box-trim: trim-both;
	text-box-edge: cap alphabetic;
}

.page-template-page-artificial-intelligence-development-services .aids-ess__card-desc {
	margin: 0;
	font-family: var(--font-base);
	font-weight: 400;
	font-size: 14px;
	line-height: 18px;
	color: #5c5c5c;
}

/* ========================================== 6. MID-PAGE CTA (96:4509)

   663px band: a flattened backdrop export with the 1440x471 panel centred
   on it by 96px of padding.
   =================================================================== */

.page-template-page-artificial-intelligence-development-services .aids-midcta {
	position: relative;
	isolation: isolate;
	padding-block: 96px;
	background: var(--aids-bg);
}

/* Figma 96:4510 — a masked rectangle plus a 538px blurred ellipse; shipped
   as a flattened export for the same reason as the hero. */
.page-template-page-artificial-intelligence-development-services .aids-midcta__bg {
	position: absolute;
	inset: 0;
	z-index: -1;
	display: block;
}

.page-template-page-artificial-intelligence-development-services .aids-midcta__bg img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

/**
 * Figma 96:4513. NOTE the asymmetric radius: Figma's own codegen emits
 * rounded-tl / rounded-tr / rounded-bl at 22px and nothing for the
 * bottom-right, leaving that corner SQUARE. The sibling ai-audit.css found
 * the identical panel in node 94:2741 and verified the square corner
 * against a 1:1 export before writing it; the same values are reused here
 * rather than re-derived.
 */
.page-template-page-artificial-intelligence-development-services .aids-midcta__card {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	min-height: 471px;
	padding: 65px 130px;
	border: 1px solid var(--aids-panel-border);
	border-radius: 22px 22px 0 22px;
	background-image: var(--aids-panel-bg);
	box-shadow: var(--aids-panel-shadow), inset 0 1px 0 0 rgba(255, 255, 255, 0.02);
	text-align: center;
}

/* Figma paints a soft purple radial from the upper-left of the panel. */
.page-template-page-artificial-intelligence-development-services .aids-midcta__card::before {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	background: radial-gradient(60% 62% at 13% 9%, rgba(185, 108, 255, 0.2) 0%, rgba(185, 108, 255, 0) 49%);
	pointer-events: none;
}

.page-template-page-artificial-intelligence-development-services .aids-midcta__card > * {
	position: relative;
	z-index: 1;
}

/* Figma 96:4518 — Gelasio 70px on a literal 70px leading, -3.15px tracking. */
.page-template-page-artificial-intelligence-development-services .aids-midcta__heading {
	margin: 20px 0 0;
	max-width: 900px;
	font-family: var(--font-serif);
	font-weight: 400;
	font-size: 70px;
	line-height: 70px;
	letter-spacing: -3.15px;
	color: var(--color-text-light);
}

.page-template-page-artificial-intelligence-development-services .aids-midcta__desc {
	margin: 25px 0 0;
	max-width: 700px;
	font-family: var(--font-base);
	font-weight: 400;
	font-size: 16px;
	line-height: 28px;
	color: var(--aids-lede-alt);
}

.page-template-page-artificial-intelligence-development-services .aids-midcta__btn {
	margin-top: 28px;
	text-transform: uppercase;
}

/* ============================================== 7. WHY TBI (96:4524)

   Content runs y=6579..7207 with no top padding (the mid-CTA band supplies
   its own 96px), then 120px down to the FAQ.
   =================================================================== */

.page-template-page-artificial-intelligence-development-services .aids-why {
	padding-bottom: 120px;
	background: var(--aids-bg);
}

.page-template-page-artificial-intelligence-development-services .aids-why__top {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 117px;
	margin-bottom: 48px;
}

/**
 * Figma 96:4526 lays this row out as 560 + 117 gap + 764 = 1441 inside a
 * 1441px frame. That is 1px wider than the 1440 of content a 1520 viewport
 * leaves, and 81px wider than a 1440 viewport leaves — so both columns are
 * given a shrinkable basis rather than a fixed width. They resolve to their
 * exact Figma widths wherever there is room and compress proportionally
 * below it, instead of pushing past the gutter (which is what a fixed
 * `width` did: measured right edge 1481 at a 1440 viewport).
 */
.page-template-page-artificial-intelligence-development-services .aids-why__intro {
	flex: 0 1 560px;
	min-width: 0;
}

/* Figma 96:4529 — Gelasio 86.4px on a literal 82.08px leading (tighter than
   the font size) with -4.752px tracking. The largest type on the page. */
.page-template-page-artificial-intelligence-development-services .aids-why__heading {
	margin: 20px 0 0;
	font-family: var(--font-serif);
	font-weight: 400;
	font-size: 86.4px;
	line-height: 82.08px;
	letter-spacing: -4.752px;
	color: var(--color-text-light);
}

.page-template-page-artificial-intelligence-development-services .aids-why__heading-accent {
	color: var(--aids-accent);
}

.page-template-page-artificial-intelligence-development-services .aids-why__copy {
	flex: 0 1 764px;
	min-width: 0;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 24px;
	align-self: stretch;
}

/* Figma 96:4531 — Inter SEMI BOLD 20px / literal 33px, solid white. */
.page-template-page-artificial-intelligence-development-services .aids-why__lead {
	margin: 0;
	font-family: var(--font-base);
	font-weight: 600;
	font-size: 20px;
	line-height: 33px;
	color: var(--color-text-light);
}

/* Figma 96:4532 — same size, regular weight, 70% white. */
.page-template-page-artificial-intelligence-development-services .aids-why__sub {
	margin: 0;
	font-family: var(--font-base);
	font-weight: 400;
	font-size: 20px;
	line-height: 33px;
	color: var(--aids-body);
}

/* Figma 96:4533 — three equal cells inside a hairline box; cells 2 and 3
   also carry a left rule. */
.page-template-page-artificial-intelligence-development-services .aids-why__stats {
	display: flex;
	margin: 0;
	padding: 0;
	border-top: 1px solid var(--aids-rule-dark);
	border-bottom: 1px solid var(--aids-rule-dark);
	list-style: none;
}

.page-template-page-artificial-intelligence-development-services .aids-why__stat {
	display: flex;
	flex-direction: column;
	gap: 32px;
	flex: 1;
	min-width: 0;
	box-sizing: border-box;
	padding: 32px;
}

.page-template-page-artificial-intelligence-development-services .aids-why__stat + .aids-why__stat {
	border-left: 1px solid var(--aids-rule-dark);
}

/**
 * Figma 96:4535 / 96:4539 / 96:4550 — Playfair Display Regular 57.6px on a
 * literal 57.6px leading. Playfair is NOT part of the sitewide five-family
 * request; it is enqueued per-template in functions.php, exactly as
 * page-ai-automation-agency.php and the hire family already do for their
 * own Why-TBI numerals.
 */
.page-template-page-artificial-intelligence-development-services .aids-why__figure {
	display: block;
	margin: 0;
	font-family: "Playfair Display", var(--font-serif);
	font-weight: 400;
	font-size: 57.6px;
	line-height: 57.6px;
	color: var(--color-text-light);
	text-box-trim: trim-both;
	text-box-edge: cap alphabetic;
}

/* Figma 96:4540 — Inter 20px, 2px tracking, #ff3434. */
.page-template-page-artificial-intelligence-development-services .aids-why__stars {
	font-family: var(--font-base);
	font-weight: 400;
	font-size: 20px;
	line-height: 1.2;
	letter-spacing: 2px;
	color: #ff3434;
	/* Figma 96:4538 aligns the stars to the numeral's baseline (items-end on
	   a 6px-gap row). As an inline span they share the numeral's baseline
	   directly, which keeps the parent a plain block so text-box-trim can
	   still trim it to Figma's 41px cap box. */
	display: inline;
	margin-left: 6px;
	vertical-align: baseline;
}

.page-template-page-artificial-intelligence-development-services .aids-why__label {
	display: block;
	margin: 0;
	font-family: var(--font-base);
	font-weight: 400;
	font-size: 14px;
	line-height: 21.7px;
	color: var(--aids-body);
	font-feature-settings: "liga" 0;
	text-box-trim: trim-both;
	text-box-edge: cap alphabetic;
}

/* Figma 96:4544 — the real Clutch wordmark at 43x12. */
.page-template-page-artificial-intelligence-development-services .aids-why__clutch {
	display: inline-block;
	width: 43px;
	height: 12px;
	margin-left: 6px;
	vertical-align: middle;
}

/* Figma 96:4552 — four pillars, hairline between them and below the row. */
.page-template-page-artificial-intelligence-development-services .aids-why__pillars {
	display: flex;
	margin: 0;
	padding: 0;
	border-bottom: 1px solid rgba(255, 255, 255, 0.1);
	list-style: none;
}

/**
 * Figma 96:4553/4559/4565/4571 are 147/146/147/145 tall while their own
 * padding and content only add up to 135 — the cells carry an explicit
 * height. Confirmed against the 1:1 render, where the hairline under the
 * stats sits at y=7058 and the band's own bottom rule at y=7207, i.e. 148
 * including the 1px border. The content stays top-aligned inside it, which
 * is what Figma's items-start does.
 */
.page-template-page-artificial-intelligence-development-services .aids-why__pillar {
	flex: 1;
	min-width: 0;
	box-sizing: border-box;
	min-height: 147px;
	padding: 30px 24px 28px;
}

.page-template-page-artificial-intelligence-development-services .aids-why__pillar:not(:last-child) {
	border-right: 1px solid var(--aids-rule-dark);
}

/* Figma 96:4557 — a 40x3 #ad7af5 dash, 18px above the title. */
.page-template-page-artificial-intelligence-development-services .aids-why__pillar-rule {
	display: block;
	width: 40px;
	height: 3px;
	margin-bottom: 18px;
	background: #ad7af5;
}

/**
 * Figma 96:4558 is Inter Bold #ffffff while 96:4564, 96:4570 and 96:4576
 * are #ecebea (96:4564 also drops to Semi Bold). Built as one rule at Bold
 * #ecebea with the first pillar overridden to pure white below — the two
 * colours are a real, visible difference in the design, the 600-vs-700 on
 * one of four is not.
 */
.page-template-page-artificial-intelligence-development-services .aids-why__pillar-title {
	margin: 0;
	font-family: var(--font-base);
	font-weight: 700;
	font-size: 23px;
	line-height: 27.6px;
	color: #ecebea;
}

.page-template-page-artificial-intelligence-development-services .aids-why__pillar:first-child .aids-why__pillar-title {
	color: var(--color-text-light);
}

/* ================================================== 8. FAQ (96:4578)

   Restyles the sitewide .faq component (content.css) to this design's
   values. The markup contract and js/faq-accordion.js are untouched.
   =================================================================== */

.page-template-page-artificial-intelligence-development-services .aids-faq {
	position: relative;
	overflow: hidden;
	padding: 124px 0 119px;
	background: var(--aids-bg);
	background-image: none;
}

/**
 * Figma 96:4581 — a 538x617 ellipse hanging off the top-right of the
 * section. MEASURED from the 1:1 render rather than taken from the node's
 * paint: the peak reads rgb(25,16,54) against the section's own
 * rgb(2,0,16), which resolves to rgba(117,80,206,0.2). This project's own
 * rule is that gradients are measured from rendered pixels, because
 * gradientHandlePositions in these files have proved unreliable.
 */
.page-template-page-artificial-intelligence-development-services .aids-faq::before {
	content: "";
	position: absolute;
	top: -308px;
	left: 972px;
	width: 538px;
	height: 617px;
	background: radial-gradient(closest-side, rgba(117, 80, 206, 0.2) 0%, rgba(117, 80, 206, 0) 100%);
	pointer-events: none;
}

/* Figma 96:4584 — the accordion is 900px wide, centred in the 1520 frame.
   Expressed as 900 + the 40px gutter either side on a border-box wrapper, so
   it resolves to exactly 900 of content at desktop and shrinks with the
   viewport below 980 instead of holding 980 and overflowing. */
.page-template-page-artificial-intelligence-development-services .aids-faq .faq__container {
	position: relative;
	z-index: 1;
	box-sizing: border-box;
	width: 100%;
	max-width: calc(900px + var(--container-padding-inline) * 2);
	margin-inline: auto;
	padding-inline: var(--container-padding-inline);
}

/* Figma 96:4583 — Inter Bold 64px on a literal 64px leading, -3.46px
   tracking, #f7f7f8. The accordion starts 40px below it. */
.page-template-page-artificial-intelligence-development-services .aids-faq .faq__heading {
	margin: 0 0 40px;
	font-family: var(--font-base);
	font-weight: 700;
	font-size: 64px;
	line-height: 64px;
	letter-spacing: -3.46px;
	text-align: center;
	color: #f7f7f8;
}

.page-template-page-artificial-intelligence-development-services .aids-faq .faq__item {
	padding-bottom: 23px;
	border-bottom: 1px solid rgba(255, 255, 255, 0.09);
	background: none;
}

.page-template-page-artificial-intelligence-development-services .aids-faq .faq__question {
	margin: 0;
}

.page-template-page-artificial-intelligence-development-services .aids-faq .faq__trigger {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 24px;
	width: 100%;
	/* Figma I96:4584;321:8068 pads the ITEM by 23px top and bottom and then
	   puts an 18px gap between the question row and the answer — so the
	   bottom 23px belongs to the item, not to the trigger. */
	padding: 23px 0 0;
	border: 0;
	background: none;
	font-family: var(--font-base);
	font-weight: 600;
	font-size: 17px;
	/* Figma I96:4584;321:8071 gives the question row an explicit 26px box.
	   `normal` leading renders it at 20px and shortens every one of the
	   eight rows by 6px. */
	line-height: 26px;
	text-align: left;
	color: var(--color-text-light);
	cursor: pointer;
}

/* Figma I96:4584;321:8073 — a DM Sans +/- glyph in #bd9cff. The sitewide
   component draws it with two pseudo bars; recoloured and resized here
   rather than swapped for a text glyph, so the existing JS keeps working.
   Same treatment as ai-audit.css. */
.page-template-page-artificial-intelligence-development-services .aids-faq .faq__icon {
	position: relative;
	flex: none;
	width: 14px;
	height: 14px;
	margin-top: 4px;
}

.page-template-page-artificial-intelligence-development-services .aids-faq .faq__icon::before,
.page-template-page-artificial-intelligence-development-services .aids-faq .faq__icon::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 0;
	width: 14px;
	height: 1.6px;
	background: #bd9cff;
	transform: translateY(-50%);
	transition: transform 0.25s ease, opacity 0.25s ease;
}

.page-template-page-artificial-intelligence-development-services .aids-faq .faq__icon::after {
	transform: translateY(-50%) rotate(90deg);
}

.page-template-page-artificial-intelligence-development-services .aids-faq .faq__trigger[aria-expanded="true"] .faq__icon::after {
	transform: translateY(-50%) rotate(0deg);
	opacity: 0;
}

/* Figma's 18px gap between the question row and the answer. The item's own
   23px bottom padding closes the row. */
.page-template-page-artificial-intelligence-development-services .aids-faq .faq__answer {
	padding: 18px 0 0;
}

/* Figma I96:4584;321:8075 — Inter 16px on a literal 28px leading, #aab1c0.
   Figma renders the answer's paragraph breaks as empty 28px lines; kept as
   real <p> spacing at the same 28px rather than as blank lines. */
.page-template-page-artificial-intelligence-development-services .aids-faq .faq__answer p {
	margin: 0;
	font-family: var(--font-base);
	font-weight: 400;
	font-size: 16px;
	line-height: 28px;
	color: var(--aids-lede-alt);
	/**
	 * Figma's codegen reports this text node as `w-full` (900px), but the
	 * node does NOT render at 900 — measured off the 1:1 export, its widest
	 * answer line is 765px and every line breaks inside a ~780px measure.
	 * Wrapping at the full 900 fits roughly three extra words onto every
	 * line, so the answer reads with different line breaks even though it
	 * ends up the same number of lines tall. Constrained to the measured
	 * box rather than hard-coding Figma's seven line breaks, which would
	 * not survive a narrower viewport.
	 */
	max-width: 780px;
	/* content.css puts `padding-bottom: 24px` on .faq__answer p sitewide.
	   Unset explicitly: with three paragraphs it added 72px to this one
	   answer and was the whole of the FAQ section's height overshoot. */
	padding: 0;
}

.page-template-page-artificial-intelligence-development-services .aids-faq .faq__answer p + p {
	margin-top: 28px;
}

/* ============================================ 9. FINAL CTA (96:4585)

   The only place on the page where a dark card sits on a light band:
   96:4586 is a 1520x751 white rect, and the 1265x511 card sits on it.
   =================================================================== */

.page-template-page-artificial-intelligence-development-services .aids-final {
	padding-block: 120px;
	background: #fff;
}

/**
 * Figma 96:4588 — the card art is masked to 1265x511 from a larger
 * 1343x549 image offset -34/-27 so the paper plane bleeds toward the right
 * edge. Shipped as the flattened 2x export of the mask group, so the bleed
 * is already baked in at the correct crop and no negative offset is needed
 * here. Figma specifies no corner radius on the mask.
 */
.page-template-page-artificial-intelligence-development-services .aids-final__card {
	position: relative;
	isolation: isolate;
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	width: 100%;
	max-width: 1265px;
	min-height: 511px;
	margin-inline: auto;
	padding: 110px 40px;
	overflow: hidden;
	background: var(--aids-bg);
}

.page-template-page-artificial-intelligence-development-services .aids-final__scene {
	position: absolute;
	inset: 0;
	z-index: -1;
	display: block;
}

.page-template-page-artificial-intelligence-development-services .aids-final__scene img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

.page-template-page-artificial-intelligence-development-services .aids-final__content {
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 100%;
	max-width: 827px;
	text-align: center;
}

/**
 * Figma 96:4595 — Inter BLACK 63px on a literal 71px leading, in an
 * explicit 132px box. The box matters: trimmed, two 71px lines measure
 * 116.8px in Chromium, which left the whole centred content block 15px
 * short and floated it 10px high inside the card (measured by
 * cross-correlating the live and Figma row profiles). The min-height
 * restores Figma's box; it is lifted below 900px, where the heading is
 * smaller and free to wrap.
 */
.page-template-page-artificial-intelligence-development-services .aids-final__heading {
	min-height: 132px;
	margin: 20px 0 0;
	font-family: var(--font-base);
	font-weight: 900;
	font-size: 63px;
	line-height: 71px;
	color: var(--color-text-light);
	text-box-trim: trim-both;
	text-box-edge: cap alphabetic;
}

.page-template-page-artificial-intelligence-development-services .aids-final__desc {
	margin: 25px 0 0;
	font-family: var(--font-base);
	font-weight: 400;
	font-size: 16px;
	line-height: 28px;
	color: var(--color-text-light);
	opacity: 0.8;
	text-box-trim: trim-both;
	text-box-edge: cap alphabetic;
}

/* Figma 96:4598 — this button uses 16px text, unlike the 14px used by the
   light band's and the mid CTA's. */
.page-template-page-artificial-intelligence-development-services .aids-final__btn {
	margin-top: 32px;
	font-size: 16px;
	letter-spacing: normal;
}

/* ============================================================ RESPONSIVE

   NOT FIGMA-VERIFIED. The source file contains only the 1520px desktop
   frame — there is no tablet or mobile artboard anywhere in it — so every
   rule below this line is this build's own interpretation of the design's
   intent, not a measured match. Stated in TASK.md and the Phase 9 report.
   Breakpoints match ai-audit.css so the two sibling pages reflow alike.
   ======================================================================= */

/**
 * The proof bar is the one row whose desktop layout needs the FULL 1520 frame:
 * Figma's 439 intro + 128 gap + fixed 862.781 stats is 1430 of content, which
 * only fits inside a 1520 viewport's 1440. Between 1421 and 1519 it has to be
 * allowed to flex or it pushes past the gutter (measured right edge 1470 at a
 * 1440 viewport). Split out from the 1420 breakpoint below, which is about
 * type scale rather than this row.
 */
@media (max-width: 1519px) {
	.page-template-page-artificial-intelligence-development-services .aids-proof__stats {
		flex: 1;
		width: auto;
		align-items: stretch;
	}

	.page-template-page-artificial-intelligence-development-services .aids-proof__caption {
		width: auto !important;
	}
}

@media (max-width: 1420px) {
	.page-template-page-artificial-intelligence-development-services .aids-hero__heading { font-size: 56px; line-height: 62px; }
	.page-template-page-artificial-intelligence-development-services .aids-gap__heading { font-size: 60px; line-height: 64px; letter-spacing: -3px; }
	.page-template-page-artificial-intelligence-development-services .aids-cap__heading,
	.page-template-page-artificial-intelligence-development-services .aids-ess__heading { font-size: 60px; line-height: 64px; letter-spacing: -2.6px; }
	.page-template-page-artificial-intelligence-development-services .aids-ess__title { font-size: 50px; line-height: 56px; letter-spacing: -1.6px; }
	.page-template-page-artificial-intelligence-development-services .aids-midcta__heading { font-size: 58px; line-height: 60px; letter-spacing: -2.4px; }
	.page-template-page-artificial-intelligence-development-services .aids-why__heading { font-size: 66px; line-height: 64px; letter-spacing: -3px; }
	.page-template-page-artificial-intelligence-development-services .aids-final__heading { font-size: 54px; line-height: 62px; }

	.page-template-page-artificial-intelligence-development-services .aids-proof__inner { gap: 64px; }
	.page-template-page-artificial-intelligence-development-services .aids-proof__intro { width: 360px; }
	.page-template-page-artificial-intelligence-development-services .aids-gap__inner { gap: 48px; }
	.page-template-page-artificial-intelligence-development-services .aids-gap__intro { width: 400px; }
	.page-template-page-artificial-intelligence-development-services .aids-ess__split { gap: 56px; }
	.page-template-page-artificial-intelligence-development-services .aids-ess__media { width: 46%; }
	.page-template-page-artificial-intelligence-development-services .aids-why__top { gap: 64px; }
	.page-template-page-artificial-intelligence-development-services .aids-midcta__card { padding-inline: 64px; }
}

@media (max-width: 1100px) {
	.page-template-page-artificial-intelligence-development-services .aids-hero { min-height: 0; }
	.page-template-page-artificial-intelligence-development-services .aids-hero__inner { padding-top: 120px; padding-bottom: 96px; }

	/**
	 * INTERPRETED — there is no Figma frame below 1520. On the desktop frame
	 * the copy sits in the art's dark left half and the glowing globe sits
	 * clear of it on the right. Once the column narrows, the art no longer
	 * has a free side and the globe ends up directly behind the heading, so
	 * a scrim is laid over it to keep the copy legible. The art itself is
	 * unchanged.
	 */
	.page-template-page-artificial-intelligence-development-services .aids-hero__bg::after {
		content: "";
		position: absolute;
		inset: 0;
		background: linear-gradient(180deg, rgba(2, 0, 16, 0.55) 0%, rgba(2, 0, 16, 0.82) 100%);
	}

	.page-template-page-artificial-intelligence-development-services .aids-proof__inner,
	.page-template-page-artificial-intelligence-development-services .aids-gap__inner,
	.page-template-page-artificial-intelligence-development-services .aids-why__top {
		flex-direction: column;
		gap: 40px;
	}

	.page-template-page-artificial-intelligence-development-services .aids-proof__intro,
	.page-template-page-artificial-intelligence-development-services .aids-gap__intro,
	.page-template-page-artificial-intelligence-development-services .aids-why__intro,
	.page-template-page-artificial-intelligence-development-services .aids-why__copy {
		width: 100%;
		max-width: none;
	}

	.page-template-page-artificial-intelligence-development-services .aids-gap__cards { width: 100%; }
	.page-template-page-artificial-intelligence-development-services .aids-cap__cards { flex-wrap: wrap; }
	.page-template-page-artificial-intelligence-development-services .aids-cap__card { flex: 1 1 calc(50% - 10px); }

	.page-template-page-artificial-intelligence-development-services .aids-ess__split,
	.page-template-page-artificial-intelligence-development-services .aids-ess__split--reverse {
		flex-direction: column;
		gap: 48px;
	}

	.page-template-page-artificial-intelligence-development-services .aids-ess__split--reverse { flex-direction: column-reverse; }
	.page-template-page-artificial-intelligence-development-services .aids-ess__media { width: 100%; max-width: 640px; }
	.page-template-page-artificial-intelligence-development-services .aids-ess__copy { max-width: none; }
	.page-template-page-artificial-intelligence-development-services .aids-ess__cards { max-width: none; }

	.page-template-page-artificial-intelligence-development-services .aids-midcta__card { padding: 48px 32px; }
	.page-template-page-artificial-intelligence-development-services .aids-why__stats { flex-wrap: wrap; }
	.page-template-page-artificial-intelligence-development-services .aids-why__pillars { flex-wrap: wrap; }
	.page-template-page-artificial-intelligence-development-services .aids-why__pillar { flex: 1 1 50%; }
	.page-template-page-artificial-intelligence-development-services .aids-why__pillar:nth-child(2) { border-right: 0; }

	.page-template-page-artificial-intelligence-development-services .aids-cap__cta { flex-direction: column; align-items: flex-start; gap: 28px; }
	.page-template-page-artificial-intelligence-development-services .aids-cap__cta-btn { align-self: flex-start; }
}

@media (max-width: 900px) {
	.page-template-page-artificial-intelligence-development-services .aids-hero__heading { font-size: 44px; line-height: 50px; }

	/* Figma's three hard breaks are for a 691px/64px measure only; below
	   this the heading is smaller and must wrap to the viewport instead. */
	.page-template-page-artificial-intelligence-development-services .aids-hero__heading br { display: none; }
	.page-template-page-artificial-intelligence-development-services .aids-hero__desc { font-size: 20px; line-height: 32px; }
	.page-template-page-artificial-intelligence-development-services .aids-gap__heading,
	.page-template-page-artificial-intelligence-development-services .aids-cap__heading,
	.page-template-page-artificial-intelligence-development-services .aids-ess__heading,
	.page-template-page-artificial-intelligence-development-services .aids-why__heading { font-size: 46px; line-height: 52px; letter-spacing: -1.8px; }
	.page-template-page-artificial-intelligence-development-services .aids-ess__title,
	.page-template-page-artificial-intelligence-development-services .aids-midcta__heading { font-size: 40px; line-height: 46px; letter-spacing: -1.4px; }
	.page-template-page-artificial-intelligence-development-services .aids-faq .faq__heading { font-size: 44px; line-height: 48px; letter-spacing: -1.6px; }
	.page-template-page-artificial-intelligence-development-services .aids-final__heading { font-size: 40px; line-height: 48px; min-height: 0; }
	.page-template-page-artificial-intelligence-development-services .aids-cap__cta-heading { font-size: 28px; letter-spacing: -1.4px; }
	.page-template-page-artificial-intelligence-development-services .aids-proof__figure,
	.page-template-page-artificial-intelligence-development-services .aids-why__figure { font-size: 46px; line-height: 46px; }

	.page-template-page-artificial-intelligence-development-services .aids-gap,
	.page-template-page-artificial-intelligence-development-services .aids-why { padding-bottom: 72px; }
	.page-template-page-artificial-intelligence-development-services .aids-gap { padding-top: 72px; }
	.page-template-page-artificial-intelligence-development-services .aids-cap { padding-bottom: 72px; }
	.page-template-page-artificial-intelligence-development-services .aids-ess__lead { padding-block: 72px 48px; }
	.page-template-page-artificial-intelligence-development-services .aids-ess__lead-inner { margin-bottom: 56px; }
	.page-template-page-artificial-intelligence-development-services .aids-ess__band--rule { padding-block: 48px; }
	.page-template-page-artificial-intelligence-development-services .aids-ess__band--tint { padding-block: 48px 72px; }
	.page-template-page-artificial-intelligence-development-services .aids-midcta { padding-block: 64px; }
	.page-template-page-artificial-intelligence-development-services .aids-faq { padding: 72px 0; }
	.page-template-page-artificial-intelligence-development-services .aids-final { padding-block: 72px; }
	.page-template-page-artificial-intelligence-development-services .aids-final__card { min-height: 0; padding: 64px 24px; }

	.page-template-page-artificial-intelligence-development-services .aids-proof__stats { flex-direction: column; gap: 0; }
	.page-template-page-artificial-intelligence-development-services .aids-proof__stat { padding: 20px 0 20px 24px; }

	.page-template-page-artificial-intelligence-development-services .aids-gap__cards { grid-template-columns: minmax(0, 1fr); }
	.page-template-page-artificial-intelligence-development-services .aids-cap__card { flex: 1 1 100%; }

	.page-template-page-artificial-intelligence-development-services .aids-why__stat { flex: 1 1 100%; }
	.page-template-page-artificial-intelligence-development-services .aids-why__stat + .aids-why__stat { border-left: 0; border-top: 1px solid var(--aids-rule-dark); }
	.page-template-page-artificial-intelligence-development-services .aids-why__pillar { flex: 1 1 100%; border-right: 0 !important; }
	.page-template-page-artificial-intelligence-development-services .aids-why__pillar:not(:last-child) { border-bottom: 1px solid var(--aids-rule-dark); }
}

@media (max-width: 680px) {
	.page-template-page-artificial-intelligence-development-services .aids-hero__heading { font-size: 34px; line-height: 40px; }
	.page-template-page-artificial-intelligence-development-services .aids-hero__desc { font-size: 18px; line-height: 29px; }
	.page-template-page-artificial-intelligence-development-services .aids-gap__heading,
	.page-template-page-artificial-intelligence-development-services .aids-cap__heading,
	.page-template-page-artificial-intelligence-development-services .aids-ess__heading,
	.page-template-page-artificial-intelligence-development-services .aids-why__heading { font-size: 34px; line-height: 40px; letter-spacing: -1.2px; }
	.page-template-page-artificial-intelligence-development-services .aids-ess__title,
	.page-template-page-artificial-intelligence-development-services .aids-midcta__heading { font-size: 30px; line-height: 36px; letter-spacing: -1px; }
	.page-template-page-artificial-intelligence-development-services .aids-faq .faq__heading { font-size: 32px; line-height: 38px; letter-spacing: -1px; }
	.page-template-page-artificial-intelligence-development-services .aids-final__heading { font-size: 28px; line-height: 36px; }
	.page-template-page-artificial-intelligence-development-services .aids-cap__cta-heading { font-size: 24px; letter-spacing: -1px; }
	.page-template-page-artificial-intelligence-development-services .aids-why__lead,
	.page-template-page-artificial-intelligence-development-services .aids-why__sub { font-size: 17px; line-height: 28px; }

	/* The accent half of "Right / Signals?" carries a hard <br> from Figma;
	   at this width the two words fit on one line, so it is suppressed. */
	.page-template-page-artificial-intelligence-development-services .aids-gap__heading-accent br { display: none; }

	.page-template-page-artificial-intelligence-development-services .aids-ess__cards { grid-template-columns: minmax(0, 1fr); }
	.page-template-page-artificial-intelligence-development-services .aids-gap__card,
	.page-template-page-artificial-intelligence-development-services .aids-ess__card { padding: 24px; }
	.page-template-page-artificial-intelligence-development-services .aids-cap__cta { padding: 28px 24px; }
	.page-template-page-artificial-intelligence-development-services .aids-midcta__card { padding: 32px 20px; }
	.page-template-page-artificial-intelligence-development-services .aids-why__stat { padding: 24px 0; }
	.page-template-page-artificial-intelligence-development-services .aids-why__pillar { padding: 24px 0; }
	.page-template-page-artificial-intelligence-development-services .aids-final__card { padding: 48px 20px; }

	.page-template-page-artificial-intelligence-development-services .aids-btn,
	.page-template-page-artificial-intelligence-development-services .aids-cap__cta-btn { width: 100%; padding-inline: 20px; }
	.page-template-page-artificial-intelligence-development-services .aids-btn span { text-align: center; }
}