/* ==========================================================================
   Premium pass. Loaded last; overrides the ported theme look.

   Direction taken from the Onedent Figma (floating pill header, full-bleed
   hero with a white info card, calm off-white sections, 24px cards with a
   hairline inside, round arrow buttons, pill CTAs with an arrow disc).
   Colours, fonts and every word of content stay Orion's.

   Rules kept: violet = brand and action, green = evidence only. Light only.
   ========================================================================== */

/* --- Heading face: Plus Jakarta Sans ------------------------------------
   The Figma sets headings in Nohemi. Plus Jakarta Sans is the nearest open
   face (geometric, slightly soft, same tight display feel), SIL OFL, self-hosted
   as a 200-800 variable font. Inter stays for body and UI. Paths are relative
   to this file in assets/css/. */

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

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

:root {
	--od-font-head: "Plus Jakarta Sans", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
	--od-fw-display: 600;
	--od-fw-head: 600;
	--od-ls-display: -0.03em;
	--od-ls-tight: -0.02em;
	--od-ls-h3: -0.012em;
	--od-container: 1360px;
	--od-container-wide: 1440px;
	--od-r: 20px;
	--od-r-lg: 24px;
	--od-r-xl: 28px;
	--od-header-h: 96px;              /* 16px top margin + 64px bar + 16px   */
	--od-line: #E6E4F0;
	--od-alt: #F6F5FB;
	--od-primary-disc: #6B3BFF;       /* lighter violet disc inside buttons  */
	--od-ink-hero: #12112A;
	--od-ink-hero-2: #221B4D;
	/* Type scale one notch down. The port was tuned for a 1400px field; on a
	   1240px container at laptop sizes it read oversized. */
	--od-fs-body: 1rem;
	--od-fs-sm: 0.9375rem;
	--od-fs-lead: clamp(1.0625rem, 1rem + 0.3vw, 1.1875rem);
	--od-fs-h1: clamp(2.125rem, 1.3rem + 3vw, 3.25rem);
	--od-fs-h2: clamp(1.75rem, 1.15rem + 2.2vw, 2.5rem);
	--od-fs-h3: clamp(1.25rem, 1.1rem + 0.8vw, 1.5rem);
	--od-fs-h4: clamp(1.0625rem, 1rem + 0.4vw, 1.25rem);
	--od-fs-display: clamp(2.5rem, 1.4rem + 3.6vw, 4rem);
	--od-section-y: clamp(56px, 4vw + 24px, 96px);
	--od-section-y-lg: clamp(72px, 6vw + 32px, 128px);
	--od-section-y-xl: clamp(80px, 7vw + 36px, 144px);
	--od-gap-header: clamp(28px, 2.5vw + 12px, 48px);
	--od-shadow-0: none;
	--od-shadow-1: 0 1px 2px rgba(20, 20, 43, 0.04);
	--od-shadow-2: 0 10px 30px rgba(20, 20, 43, 0.08);
	--od-shadow-3: 0 18px 44px rgba(20, 20, 43, 0.10);
}

/* --- Kill the texture devices. The Figma is flat and calm. ---------------- */

.od-section--grid::before,
.od-section--grain::after,
.od-hero::before,
.od-hero::after,
.od-hero__inner::before,
.od-panel--blob::after,
.od-cred::before,
.od-cta::before {
	display: none;
}

/* --- Header: floating white pill over the page ---------------------------- */

.od-header,
.od-header.is-scrolled {
	background: transparent;
	border-bottom: 0;
	box-shadow: none;
	padding: 16px 0;
	pointer-events: none;
}

.od-header__inner {
	pointer-events: auto;
	box-sizing: border-box;
	height: 64px;
	min-height: 0;
	padding: 0 8px 0 28px;
	background: #fff;
	border: 1px solid rgba(20, 20, 43, 0.06);
	border-radius: var(--od-r-pill);
	box-shadow: 0 8px 30px rgba(20, 20, 43, 0.08);
	gap: var(--od-s-5);
}

/* The pill IS the container element, so it must shrink by the gutters to line
   up with the content edge of every section below it. */
.od-header .od-container {
	/* 20px proud of the content edge on each side, so the page sits slightly
	   inside the pill rather than flush with it. */
	width: calc(100% - var(--od-gutter) * 2 + 40px);
	max-width: calc(var(--od-container) - var(--od-gutter) * 2 + 40px);
}

.od-logo img {
	max-height: 40px;
}

.od-nav__list a {
	font-weight: 500;
	color: var(--od-ink);
}

.od-nav__list a:hover,
.od-nav__list .current-menu-item > a {
	color: var(--od-primary);
}

.od-header__phone {
	display: none;
	align-items: center;
	gap: 8px;
	font-size: var(--od-fs-sm);
	font-weight: 600;
	color: var(--od-ink);
	text-decoration: none;
	white-space: nowrap;
}

.od-header__phone .od-icon svg {
	width: 14px;
	height: 14px;
}

.od-header__phone:hover {
	color: var(--od-primary);
}

@media (min-width: 1200px) {
	.od-header__phone {
		display: inline-flex;
	}
}

.od-header__cta.od-btn--sm {
	min-height: 44px;
	padding: 0 var(--od-s-5);
	font-size: 0.875rem;
}

.od-nav__list a {
	font-size: 0.9375rem;
}

.od-header__phone {
	font-size: 0.9375rem;
}

/* The burger sits inside the pill now, so no negative margin. */
.od-burger {
	margin-right: 0;
	border-radius: 50%;
}

/* --- Buttons: pills with an arrow disc ----------------------------------- */

.od-btn {
	min-height: 48px;
	padding: 0 var(--od-s-5);
	font-size: 0.9375rem;
	letter-spacing: -0.01em;
}

.od-btn--lg {
	min-height: 56px;
	padding: 0 var(--od-s-6);
	font-size: 0.9375rem;
}

.od-btn--sm {
	min-height: 44px;
	padding: 0 var(--od-s-5);
	font-size: 0.875rem;
}

/* A button that carries an arrow gets the Figma treatment: the arrow lives in
   a lighter disc at the right edge and the label keeps its padding on the left. */
.od-btn:has(.od-arrow) {
	padding-right: 8px;
	gap: var(--od-s-5);
}

.od-btn .od-arrow {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	font-size: 1rem;
	line-height: 1;
	transition: transform var(--od-dur) var(--od-ease), background-color var(--od-dur) var(--od-ease);
}

.od-btn--lg .od-arrow {
	width: 42px;
	height: 42px;
}

.od-btn--primary .od-arrow {
	background: var(--od-primary-disc);
	color: #fff;
}

.od-btn--secondary .od-arrow,
.od-btn--light .od-arrow {
	background: var(--od-primary-100);
	color: var(--od-primary);
}

.od-btn:hover .od-arrow {
	transform: translateX(2px);
}

.od-btn--secondary {
	background: #fff;
	border-color: var(--od-line);
	color: var(--od-ink);
}

.od-btn--secondary:hover {
	border-color: var(--od-line-strong);
	color: var(--od-ink);
	background: var(--od-alt);
}

/* --- Eyebrows: outlined pill with a dot ---------------------------------- */

.od-eyebrow,
.od-pill {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 8px 14px;
	border: 1px solid var(--od-line);
	border-radius: var(--od-r-pill);
	background: transparent;
	font-size: var(--od-fs-xs);
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--od-muted);
	margin-bottom: var(--od-s-5);
	width: fit-content;
	align-self: flex-start;
	justify-self: start;
}

.od-eyebrow::before,
.od-pill::before {
	content: "";
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--od-primary);
	flex: none;
}

/* The violet rule above lead headers is gone; the pill carries the mark. */
.od-section-header--lead .od-eyebrow::before,
.od-section--ink .od-section-header--lead .od-eyebrow::before {
	display: block;
	width: 7px;
	height: 7px;
	margin: 0;
	border-radius: 50%;
}

.od-eyebrow--rule::before {
	width: 7px;
	height: 7px;
}

.od-section-header--center .od-eyebrow {
	margin-inline: auto;
}

.od-section--ink .od-eyebrow,
.od-section--ink .od-pill,
.od-panel--ink .od-pill,
.od-hero .od-pill {
	border-color: rgba(255, 255, 255, 0.18);
	background: rgba(255, 255, 255, 0.06);
	color: var(--od-on-ink-muted);
}

.od-section--ink .od-eyebrow::before,
.od-section--ink .od-pill::before,
.od-panel--ink .od-pill::before,
.od-hero .od-pill::before {
	background: #C9B6FF;
}

/* --- Headings: a touch lighter and looser than the port ------------------- */

h1, h2, h3, h4, .od-display,
.od-section-header__title,
.od-cred .od-cred__label,
.od-formwrap__title,
.od-panel__title,
.od-card__title,
.od-shots__name,
.od-cred__value,
.od-metric__value {
	font-family: var(--od-font-head);
	font-weight: 600;
	letter-spacing: -0.02em;
}

/* Jakarta is wider than Rubik at the same size; the accent half of the hero
   headline and the big figures hold at 700 so they still read as the emphasis. */
.od-hero .od-accent-text,
.od-cred__value,
.od-cred__suffix {
	font-weight: 700;
}

.od-display,
.od-section-header__title {
	line-height: 1.08;
}

/* --- Cards and panels: 24px, hairline, no resting shadow ------------------ */

.od-panel,
.od-card,
.od-formwrap,
.od-review,
.od-plate {
	border-radius: var(--od-r-lg);
	box-shadow: none;
	border: 1px solid var(--od-line);
}

.od-panel--lg {
	border-radius: var(--od-r-xl);
}

.od-plate {
	background: var(--od-alt);
	border-color: transparent;
}

.od-panel--ink,
.od-panel--tint {
	border-color: transparent;
}

/* Cards sitting on the off-white band read as cut-outs; cards on white get the
   band colour so the page always has two values, never one. */
.od-section:not(.od-section--alt):not(.od-section--ink) .od-panel:not(.od-panel--ink):not(.od-panel--tint),
.od-section:not(.od-section--alt):not(.od-section--ink) .od-card {
	background: var(--od-alt);
	border-color: transparent;
}

.od-lift:hover,
.od-card--interactive:hover,
.od-card--post:hover,
.od-card--quicknav:hover,
.od-review:hover {
	transform: translateY(-2px);
	box-shadow: var(--od-shadow-3);
	border-color: var(--od-line);
}

/* Icon plates: smaller, quieter. The Figma uses a 26px line icon, not a 72px
   coloured block. A soft violet tint keeps the brand on the card. */
.od-squircle {
	width: 48px;
	height: 48px;
	border-radius: 14px;
}

.od-squircle .od-icon svg {
	width: 22px;
	height: 22px;
	stroke-width: 1.6;
}

.od-squircle--violet {
	background: var(--od-primary-100);
	color: var(--od-primary);
}

.od-lift:hover .od-squircle--violet {
	background: var(--od-primary);
	color: #fff;
}

/* --- Hero: full-bleed ink panel, header floating over it ------------------ */

/* Belt and braces: if the header ever rounds taller than the hero's negative
   margin, the sliver that shows is ink, not white. */
.od-body--home {
	background: linear-gradient(180deg, var(--od-ink-hero-2) 0 var(--od-header-h), #fff var(--od-header-h));
}

.od-hero {
	margin-top: calc(var(--od-header-h) * -1 - 1px);
	padding-top: calc(var(--od-header-h) + 1px + clamp(20px, 3vw, 44px));
	padding-bottom: clamp(56px, 7vw, 104px);
	background:
		radial-gradient(70ch 50ch at 100% 0%, rgba(78, 18, 240, 0.42), transparent 62%),
		radial-gradient(60ch 44ch at 0% 100%, rgba(78, 18, 240, 0.22), transparent 60%),
		linear-gradient(160deg, var(--od-ink-hero-2) 0%, var(--od-ink-hero) 60%);
	color: var(--od-on-ink);
}

.od-hero .od-display,
.od-hero h1,
.od-hero h2 {
	color: #fff;
}

/* 56px at desktop, close to the Figma's 60, instead of the 88px display scale. */
.od-hero__title {
	font-size: clamp(2.25rem, 1.2rem + 3.4vw, 4.375rem); /* bigger so the heading fills its column (user, 2026-10-24) */
	line-height: 1.04;
	margin-bottom: var(--od-s-4);
}

.od-hero__lead {
	font-size: var(--od-fs-body);
	line-height: 1.6;
	margin-bottom: var(--od-s-4);
	max-width: 48ch;
}

.od-hero .od-hero__eyebrow {
	padding: 8px 14px;
	font-size: 0.6875rem;
	letter-spacing: 0.08em;
	margin-bottom: var(--od-s-4);
}

.od-hero__actions {
	margin-top: var(--od-s-5);
}

.od-hero__promise {
	margin-top: var(--od-s-5);
	padding-top: var(--od-s-5);
}

.od-hero__proof {
	margin-top: var(--od-s-6);
	padding-top: var(--od-s-5);
}

.od-hero .od-accent-text {
	color: #C9B6FF;
}

.od-hero__lead {
	color: var(--od-on-ink-muted);
}

.od-hero__commit {
	color: var(--od-on-ink);
	border-left-color: #C9B6FF;
}

.od-hero__promise,
.od-hero__proof {
	border-top-color: var(--od-on-ink-line);
}

.od-hero__bullet {
	color: var(--od-on-ink);
}

.od-hero__bullet + .od-hero__bullet {
	border-left-color: var(--od-on-ink-line);
}

/* Both actions on one line inside the 1240px container. */
.od-hero__actions {
	gap: var(--od-s-3);
}

.od-hero__actions .od-btn--lg {
	min-height: 52px;
	padding: 0 var(--od-s-5);
	gap: var(--od-s-4);
}

.od-hero__actions .od-btn--lg:has(.od-arrow) {
	padding-right: 6px;
}

.od-hero__actions .od-btn--lg .od-arrow {
	width: 40px;
	height: 40px;
}

@media (min-width: 1200px) {
	.od-hero__inner {
		grid-template-columns: minmax(0, 1fr) minmax(480px, 1fr);
	}
}

.od-hero__form .od-formwrap__title {
	font-size: clamp(1.5rem, 1.1rem + 1.2vw, 2rem);
}

.od-formwrap__title {
	font-size: clamp(1.5rem, 1.1rem + 1.2vw, 2rem);
}

.od-formwrap__header {
	margin-bottom: var(--od-s-4);
	padding-bottom: var(--od-s-4);
}

.od-hero__form .od-formwrap {
	padding: clamp(20px, 2.4vw, 32px);
}

.od-hero .od-btn--secondary {
	background: #fff;
	border-color: #fff;
	color: var(--od-ink);
}

.od-hero .od-btn--secondary:hover {
	background: var(--od-primary-100);
	border-color: var(--od-primary-100);
}

.od-hero .od-btn--secondary .od-icon {
	color: var(--od-primary);
}

/* The hero eyebrow is the page h1 and carries .od-pill. */
.od-hero .od-hero__eyebrow {
	font-size: var(--od-fs-xs);
	line-height: 1.2;
}

/* Form card: plain white, no lit edge. */
.od-hero__form .od-formwrap {
	background: #fff;
	border-color: transparent;
	box-shadow: 0 30px 80px rgba(0, 0, 0, 0.35);
}

.od-hero__form .od-formwrap::before {
	display: none;
}

.od-hero__form .od-formwrap,
.od-hero__form .od-formwrap p,
.od-hero__form .od-formwrap label {
	color: var(--od-body);
}

.od-hero__form .od-formwrap__title {
	color: var(--od-ink);
}

/* --- Credibility: light band, white stat cards, green figures ------------- */

.od-cred.od-section--ink {
	background: var(--od-alt);
}

.od-cred .od-cred__label {
	color: var(--od-ink);
}

.od-cred__item {
	background: #fff;
	border: 1px solid var(--od-line);
	border-radius: var(--od-r-lg);
	box-shadow: none;
	-webkit-backdrop-filter: none;
	backdrop-filter: none;
	align-items: flex-start;
	text-align: left;
	padding: var(--od-s-6);
}

.od-cred__item::before,
.od-cred__item::after {
	display: none;
}

.od-cred__value {
	justify-content: flex-start;
	color: var(--od-ink);
	font-weight: 600;
}

.od-cred__suffix {
	color: var(--od-green);
}

.od-cred__caption {
	margin-inline: 0;
	max-width: none;
	white-space: nowrap;
	text-wrap: nowrap;
	color: var(--od-body);
	font-weight: 500;
}

/* --- Services: clean 3-up, icon | title row, hairline, arrow disc ---------- */

@media (min-width: 900px) {
	.od-services__bento {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.od-services__bento .od-bento__cell {
		grid-column: span 1;
	}
}

/* Three across, as in the Figma. Four was too tight on a 1240px container. */

.od-service .od-service__link .od-arrow {
	font-size: 1.125rem;
	font-weight: 600;
}

.od-service {
	gap: var(--od-s-4);
	padding: var(--od-s-5) var(--od-s-5) var(--od-s-5);
}

.od-service__head {
	display: flex;
	align-items: center;
	gap: var(--od-s-4);
	padding-bottom: var(--od-s-4);
	border-bottom: 1px solid var(--od-line);
}

.od-service__head .od-squircle {
	width: 44px;
	height: 44px;
	border-radius: 12px;
	padding-right: 0;
}

.od-service__head .od-service__title {
	position: relative;
	padding-left: var(--od-s-4);
	border-left: 1px solid var(--od-line);
	font-size: 1.125rem;
	line-height: 1.3;
}

.od-service .od-panel__text {
	font-size: var(--od-fs-sm);
}

.od-service .od-panel__text {
	font-size: var(--od-fs-body);
	line-height: 1.5;
}

.od-service .od-panel__kicker {
	color: var(--od-green-600);
	letter-spacing: 0;
	font-weight: 600;
	padding-top: 0;
}

/* The link is a quiet text link: violet label with a chevron, left aligned
   under the copy. The stretched hit area still covers the whole card. */
.od-service .od-service__link {
	margin-top: auto;
	padding-top: var(--od-s-2);
	font-size: var(--od-fs-sm);
	font-weight: 600;
	color: var(--od-primary);
	gap: 6px;
}

.od-service .od-service__link .od-arrow {
	display: inline-block;
	width: 14px;
	height: 14px;
	font-size: 0;
	background: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 6 6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 6 6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
	transition: transform var(--od-dur) var(--od-ease);
}

.od-service:hover .od-service__link {
	color: var(--od-primary-600);
}

.od-service:hover .od-service__link .od-arrow {
	transform: translateX(3px);
}

/* Benefits only show on the former wide cells; keep them compact. */
.od-service__benefits {
	gap: var(--od-s-2);
}

.od-service__benefit {
	font-size: var(--od-fs-sm);
}

/* --- Results slider: screenshot as a browser window card ------------------ */

.od-shots__frame,
.od-results__frame {
	position: relative;
	padding: 44px 10px 10px;
	border: 1px solid var(--od-line);
	border-radius: var(--od-r-lg);
	background: #fff;
	box-shadow: 0 24px 60px rgba(20, 20, 43, 0.10);
	overflow: hidden;
}

/* Browser chrome: a thin bar with three dots, drawn with no extra markup. */
.od-shots__frame::before,
.od-results__frame::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 34px;
	background: var(--od-alt);
	border-bottom: 1px solid var(--od-line);
}

.od-shots__frame::after,
.od-results__frame::after {
	content: "";
	position: absolute;
	top: 12px;
	left: 16px;
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: var(--od-line-strong);
	box-shadow: 16px 0 0 var(--od-line-strong), 32px 0 0 var(--od-line-strong);
}

.od-shots__frame .od-results__img,
.od-results__frame .od-results__img {
	border-radius: 12px;
	border: 1px solid var(--od-line-hair);
}

/* Neighbouring slides sit back so the active one is clearly the subject. */
.od-shots__slide {
	transition: opacity var(--od-dur) var(--od-ease), transform var(--od-dur) var(--od-ease);
}

.od-shots__slide:not(.is-active) {
	opacity: 0.45;
	transform: scale(0.97);
}

.od-shots__track {
	padding-top: var(--od-s-4);
}

/* Arrows: white discs with a soft shadow, violet on hover. */
.od-shots__arrow {
	width: 52px;
	height: 52px;
	border: 1px solid var(--od-line);
	background: #fff;
	box-shadow: 0 10px 24px rgba(20, 20, 43, 0.12);
	font-size: 1.375rem;
	top: calc(50% - 72px);
}

.od-shots__arrow:hover:not(:disabled) {
	background: var(--od-primary);
	border-color: var(--od-primary);
	color: #fff;
}

@media (min-width: 1200px) {
	.od-shots__arrow--prev { left: calc(var(--od-s-7) * -1); }
	.od-shots__arrow--next { right: calc(var(--od-s-7) * -1); }
}

/* Meta row: name and the two evidence chips on one line. */
.od-shots__meta {
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: var(--od-s-3) var(--od-s-5);
	margin-top: var(--od-s-6);
}

.od-shots__name {
	font-size: var(--od-fs-h4);
	padding-right: var(--od-s-5);
	border-right: 1px solid var(--od-line);
}

.od-shots__point {
	background: var(--od-green-100);
	border-color: transparent;
	color: var(--od-green-600);
	font-weight: 600;
}

.od-shots__tick {
	background: #fff;
}

.od-shots__dots {
	margin-top: var(--od-s-5);
}

.od-slider__dot {
	background: var(--od-line-strong);
}

/* --- Testimonials: navy summary card beside white quote cards ------------- */

.od-review {
	background: #fff;
	padding: var(--od-s-6);
}

.od-review__stars {
	color: var(--od-star);
}

.od-review__avatar {
	background: var(--od-primary-100);
	color: var(--od-primary);
}

/* --- Blog cards: image inset inside the card ------------------------------ */

.od-card--post {
	padding: 12px;
	background: #fff;
}

.od-card--post .od-card__media {
	border-radius: 16px;
}

.od-card--post .od-card__body {
	padding: var(--od-s-5) var(--od-s-3) var(--od-s-3);
}

.od-card--post .od-card__eyebrow {
	color: var(--od-primary);
	letter-spacing: 0.06em;
}

/* --- Mid-page band and the final CTA: rounded navy panels ----------------- */

.od-cta.od-section--ink {
	background: var(--od-alt);
	padding-block: var(--od-section-y);
}

.od-cta__inner {
	background:
		radial-gradient(60ch 40ch at 100% 0%, rgba(78, 18, 240, 0.40), transparent 60%),
		linear-gradient(160deg, var(--od-ink-hero-2), var(--od-ink-hero) 70%);
	border-radius: var(--od-r-xl);
	padding: clamp(28px, 4vw, 56px);
}

.od-cta__title.od-display {
	font-size: clamp(2.25rem, 1.3rem + 2.8vw, 3.5rem);
	line-height: 1.05;
}

.od-cta__form .od-formwrap {
	border-radius: var(--od-r-lg);
	box-shadow: none;
	border-color: transparent;
}

/* --- Process: keep ink but match the hero's tone ------------------------- */

.od-process.od-section--ink {
	background: linear-gradient(160deg, var(--od-ink-hero-2), var(--od-ink-hero) 70%);
}

/* --- Form fields: rounded, quiet ----------------------------------------- */

.od-formwrap .fluentform .ff-el-form-control,
.od-formwrap .fluentform input[type="text"],
.od-formwrap .fluentform input[type="email"],
.od-formwrap .fluentform input[type="tel"],
.od-formwrap .fluentform input[type="url"],
.od-formwrap .fluentform select,
.od-formwrap .fluentform textarea {
	border-radius: 12px;
	border: 1px solid var(--od-line);
	background: var(--od-alt);
	min-height: 42px;
	padding: 9px var(--od-s-4);
	font-size: 15px;
}

.od-formwrap .fluentform form fieldset {
	gap: 10px 12px;
}

.od-formwrap .fluentform .ff-el-group {
	margin-bottom: 0;
}

.od-formwrap .fluentform .ff-el-input--label {
	margin-bottom: 2px;
}

.od-formwrap .fluentform .ff-el-input--label label,
.od-formwrap .fluentform label {
	margin-bottom: 0;
	font-size: 0.8125rem;
	line-height: 1.3;
}

.od-formwrap .fluentform textarea.ff-el-form-control {
	min-height: 72px;
}

.od-formwrap .fluentform .ff-btn-submit,
.od-formwrap .fluentform button[type="submit"] {
	min-height: 48px;
}

.od-hero__form .od-formwrap__subtitle {
	font-size: 0.875rem;
}

.od-hero__form .od-formwrap__header {
	margin-bottom: var(--od-s-3);
	padding-bottom: var(--od-s-3);
}

.od-hero__form .od-formwrap__footnote {
	margin-top: var(--od-s-3);
}

.od-formwrap .fluentform .ff-el-form-control:focus,
.od-formwrap .fluentform textarea:focus,
.od-formwrap .fluentform select:focus {
	background: #fff;
	border-color: var(--od-primary);
	box-shadow: 0 0 0 3px var(--od-primary-100);
}

.od-formwrap__header::after {
	background: var(--od-line);
}

/* --- Footer: deeper ink, square top (rounded corners dropped 2026-10-24) --- */

.od-footer {
	border-radius: 0;
}

/* --- Results slider: smaller frame ---------------------------------------
   A full-width dashboard export was about 650px tall and took the whole
   screen. Capped and centred, the slide reads as a figure rather than a wall. */
.od-shots__slide {
	align-items: center;
}

.od-shots__frame {
	width: 100%;
	max-width: 860px;
	margin-inline: auto;
}

.od-shots__arrow {
	top: calc(50% - 64px);
}

@media (min-width: 1200px) {
	.od-shots__arrow--prev { left: 0; }
	.od-shots__arrow--next { right: 0; }
}

/* --- Browser chrome, refined ---------------------------------------------
   Smaller traffic-light dots in their muted real colours, a slimmer bar, and a
   faux address field drawn in the bar's own background so it reads as a
   window and not a blank strip. */
.od-shots__frame,
.od-results__frame {
	padding: 40px 8px 8px;
}

.od-shots__frame::before,
.od-results__frame::before {
	height: 32px;
	background:
		linear-gradient(var(--od-line-hair), var(--od-line-hair)) center 50% / 42% 16px no-repeat,
		var(--od-alt);
	border-bottom: 1px solid var(--od-line);
}

.od-shots__frame::after,
.od-results__frame::after {
	top: 12px;
	left: 14px;
	width: 8px;
	height: 8px;
	background: #E8766F;
	box-shadow: 14px 0 0 #E9B95B, 28px 0 0 #6CC387;
}

/* Rounded ends on the address field: a second layer via the image's own
   wrapper is not available, so the bar keeps square ends but at 16px tall
   and 42% width it reads as a field. */

/* Chrome bar a step darker so it separates from the white frame. */
.od-shots__frame::before,
.od-results__frame::before {
	background:
		linear-gradient(#DEDBEC, #DEDBEC) center 50% / 42% 16px no-repeat,
		#EEECF6;
	border-bottom: 1px solid #DAD7E8;
}

/* --- Process: step blocks ---------------------------------------------------
   The four steps as blocks in a 2x2 grid beside the header. Square-cornered
   number tags, no circles, no pills. */
.od-process.od-section--ink {
	background:
		radial-gradient(60ch 40ch at 100% 100%, rgba(78, 18, 240, 0.28), transparent 60%),
		linear-gradient(160deg, var(--od-ink-hero-2), var(--od-ink-hero) 70%);
}

.od-process .od-eyebrow {
	border-radius: 6px;
	padding: 6px 10px;
}

.od-process .od-eyebrow::before {
	display: none;
}

.od-stepper--rail {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--od-gap-grid);
}

.od-stepper--rail .od-stepper__step {
	display: flex;
	flex-direction: column;
	gap: var(--od-s-3);
	padding: var(--od-s-5);
	border: 1px solid rgba(255, 255, 255, 0.10);
	border-top: 1px solid rgba(255, 255, 255, 0.10);
	border-radius: 16px;
	background: rgba(255, 255, 255, 0.04);
	overflow: hidden;
	transition: background-color var(--od-dur) var(--od-ease), border-color var(--od-dur) var(--od-ease), transform var(--od-dur) var(--od-ease);
}

.od-stepper--rail .od-stepper__step:first-child {
	border-top: 1px solid rgba(255, 255, 255, 0.10);
	padding-top: var(--od-s-5);
}

.od-stepper--rail .od-stepper__step:hover {
	background: rgba(255, 255, 255, 0.07);
	border-color: rgba(201, 182, 255, 0.35);
	transform: translateY(-2px);
}

/* Number as a square tag, in flow, above the title. */
.od-stepper--rail .od-stepper__num {
	position: static;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border-radius: 8px;
	background: var(--od-primary);
	color: #fff;
	font-family: var(--od-font-body);
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	line-height: 1;
	opacity: 1;
	margin-bottom: var(--od-s-2);
}

.od-stepper--rail .od-stepper__title {
	font-size: 1.25rem;
	letter-spacing: -0.015em;
	color: #fff;
}

.od-stepper--rail .od-stepper__title::before {
	display: none;
}

.od-stepper--rail .od-stepper__text {
	font-size: var(--od-fs-sm);
	line-height: 1.6;
	color: var(--od-on-ink-muted);
}

.od-stepper--rail .od-stepper__duration {
	border-radius: 6px;
}

.od-stepper--rail .od-stepper__duration::before {
	display: none;
}

@media (min-width: 900px) {
	.od-stepper--rail {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.od-stepper--rail .od-stepper__step {
		display: flex;
		padding: var(--od-s-6);
		margin: 0;
	}

	.od-stepper--rail .od-stepper__title,
	.od-stepper--rail .od-stepper__text,
	.od-stepper--rail .od-stepper__duration {
		grid-column: auto;
		grid-row: auto;
	}
}

.od-process .od-section-header__subtitle {
	color: var(--od-on-ink-muted);
	font-size: var(--od-fs-body);
}

.od-process.od-section--ink .od-section-header--lead .od-eyebrow::before {
	display: none;
}

@media (min-width: 900px) {
	.od-stepper--rail .od-stepper__step:first-child {
		padding-top: var(--od-s-6);
	}
}

/* Header column starts level with the first row of blocks, not centred. */
.od-process__inner {
	align-items: start;
}

.od-process .od-process__aside {
	align-self: start;
}

/* Not sticky here: the header stays level with the first row of blocks. */
@media (min-width: 1200px) {
	.od-process .od-process__aside.od-sticky-col {
		position: static;
	}
}

/* --- Mid-page band: straddles the seam -----------------------------------
   The band section itself has no padding and takes the NEXT section's
   background, so the dark process band above and the light band below meet
   behind the card. The card is then lifted by half its height to sit across
   that seam. The empty half left in flow below the card is the breathing room
   before the next section. */
.od-band.od-section--tight {
	padding: 0;
	background: var(--od-alt);
	overflow: visible;
	z-index: 2;
}

.od-band .od-band__inner {
	transform: translateY(-50%);
	margin-bottom: calc(var(--od-s-7) * -1);
	box-shadow: 0 30px 60px rgba(20, 20, 43, 0.22), 0 0 0 6px rgba(255, 255, 255, 0.55);
	border-radius: var(--od-r-lg);
}

/* The section before it hands over with no bottom gap of its own. */
.od-process.od-section--lg {
	padding-bottom: calc(var(--od-section-y-lg) + var(--od-s-7));
}

/* The section after starts a little closer, the band already made the gap. */
.od-band + .od-section {
	padding-top: var(--od-s-7);
}

.od-band .od-band__inner {
	box-shadow: 0 30px 60px rgba(20, 20, 43, 0.28);
}

/* Band as a pill, like the header: full-round corners, no border, no inner
   hairline, slimmer padding so it reads as a bar rather than a box. */
.od-band .od-band__inner {
	border: 0;
	border-radius: var(--od-r-pill);
	padding: var(--od-s-6) var(--od-s-8);
	align-items: center;
}

.od-band .od-band__inner::before {
	display: none;
}

@media (min-width: 900px) {
	.od-band .od-band__inner {
		flex-direction: row;
		justify-content: space-between;
		gap: var(--od-s-7);
		padding: var(--od-s-6) var(--od-s-6) var(--od-s-6) var(--od-s-8);
	}
}

.od-band__title {
	font-size: 1.375rem;
	margin-bottom: var(--od-s-2);
}

.od-band__text {
	font-size: var(--od-fs-sm);
}

/* Process blocks: a crisp 1px border. */
.od-stepper--rail .od-stepper__step {
	border: 1px solid rgba(255, 255, 255, 0.16);
}

/* Band: text and button gathered to the centre with a fixed gap, instead of
   pushed to opposite ends of the pill. */
@media (min-width: 900px) {
	.od-band .od-band__inner {
		justify-content: center;
		gap: var(--od-s-9);
	}

	.od-band__copy {
		flex: 0 1 auto;
	}
}

/* Band: narrower pill, centred, content back to the two ends. */
.od-band .od-band__inner {
	max-width: 960px;
	margin-inline: auto;
}

@media (min-width: 900px) {
	.od-band .od-band__inner {
		justify-content: space-between;
		gap: var(--od-s-6);
	}
}

/* Band gradient flipped: dark violet on the left, bright on the right. */
.od-band .od-band__inner {
	background:
		radial-gradient(46ch 34ch at 8% -20%, rgba(255, 255, 255, 0.18), transparent 68%),
		linear-gradient(90deg, var(--od-primary-700) 0%, var(--od-primary) 100%);
}

/* --- FAQ: question cards ----------------------------------------------------
   Each question is a white block with a 1px border and 20px corners. The
   open one gets a violet edge and a tinted top. The plus sits in a square
   tinted tag, not a bare glyph. */
:is(.od-faq, .od-svc-prose) .od-accordion {
	gap: var(--od-s-3);
}

:is(.od-faq, .od-svc-prose) .od-accordion__item {
	border: 1px solid var(--od-line);
	border-left-width: 1px;
	border-radius: var(--od-r);
	background: #fff;
	overflow: hidden;
	transition: border-color var(--od-dur) var(--od-ease), box-shadow var(--od-dur) var(--od-ease);
}

:is(.od-faq, .od-svc-prose) .od-accordion__item:hover {
	border-color: var(--od-line-strong);
}

:is(.od-faq, .od-svc-prose) .od-accordion__item.is-open {
	border-color: var(--od-primary);
	background: #fff;
	box-shadow: 0 12px 32px rgba(78, 18, 240, 0.08);
}

:is(.od-faq, .od-svc-prose) .od-accordion__trigger {
	align-items: center;
	gap: var(--od-s-4);
	padding: var(--od-s-4) var(--od-s-5);
	font-size: 1.125rem;
	font-weight: 600;
	letter-spacing: -0.01em;
	color: var(--od-ink);
}

:is(.od-faq, .od-svc-prose) .od-accordion__item.is-open .od-accordion__trigger {
	color: var(--od-ink);
}

:is(.od-faq, .od-svc-prose) .od-accordion__num {
	width: auto;
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	color: var(--od-muted);
}

:is(.od-faq, .od-svc-prose) .od-accordion__item.is-open .od-accordion__num {
	color: var(--od-primary);
}

:is(.od-faq, .od-svc-prose) .od-accordion__icon {
	width: 32px;
	height: 32px;
	border-radius: 8px;
	background: var(--od-primary-50);
	transition: background-color var(--od-dur) var(--od-ease);
}

:is(.od-faq, .od-svc-prose) .od-accordion__icon::before,
:is(.od-faq, .od-svc-prose) .od-accordion__icon::after {
	inset: 50% 9px auto 9px;
}

:is(.od-faq, .od-svc-prose) .od-accordion__item.is-open .od-accordion__icon {
	background: var(--od-primary);
}

:is(.od-faq, .od-svc-prose) .od-accordion__item.is-open .od-accordion__icon::before,
:is(.od-faq, .od-svc-prose) .od-accordion__item.is-open .od-accordion__icon::after {
	background: #fff;
}

:is(.od-faq, .od-svc-prose) .od-accordion__panel {
	padding: 0 var(--od-s-5) var(--od-s-5) calc(var(--od-s-5) + 22px + var(--od-s-4));
}

:is(.od-faq, .od-svc-prose) .od-accordion__panel p {
	font-size: var(--od-fs-sm);
	line-height: 1.65;
	margin: 0;
}

.od-faq__more {
	margin-top: var(--od-s-5);
	padding-top: var(--od-s-5);
	border-top: 1px solid var(--od-line);
	font-size: var(--od-fs-sm);
	color: var(--od-body);
	max-width: 32ch;
}

.od-faq__more a {
	display: block;
	margin-top: 4px;
	font-weight: 600;
	color: var(--od-primary);
	text-decoration: none;
}

.od-faq__more a:hover {
	color: var(--od-primary-600);
	text-decoration: underline;
}

/* --- FAQ: dark theme ----------------------------------------------------------
   Same cards, inverted. The band matches the hero's ink gradient so the page
   has hero, process, FAQ and the final CTA as its dark moments. */
.od-faq.od-section {
	background:
		radial-gradient(60ch 40ch at 0% 100%, rgba(78, 18, 240, 0.26), transparent 60%),
		linear-gradient(160deg, var(--od-ink-hero-2), var(--od-ink-hero) 70%);
	color: var(--od-on-ink);
}

.od-faq .od-section-header__title {
	color: #fff;
}

.od-faq .od-eyebrow {
	border-color: rgba(255, 255, 255, 0.18);
	background: rgba(255, 255, 255, 0.06);
	color: var(--od-on-ink-muted);
}

.od-faq .od-eyebrow::before,
.od-faq .od-section-header--lead .od-eyebrow::before {
	background: #C9B6FF;
}

.od-faq .od-accordion__item {
	background: rgba(255, 255, 255, 0.04);
	border-color: rgba(255, 255, 255, 0.12);
}

.od-faq .od-accordion__item:hover {
	border-color: rgba(255, 255, 255, 0.22);
}

.od-faq .od-accordion__item.is-open {
	background: rgba(255, 255, 255, 0.06);
	border-color: rgba(201, 182, 255, 0.55);
	box-shadow: 0 16px 40px rgba(0, 0, 0, 0.28);
}

.od-faq .od-accordion__trigger,
.od-faq .od-accordion__item.is-open .od-accordion__trigger {
	color: #fff;
}

.od-faq .od-accordion__num {
	color: var(--od-on-ink-muted);
}

.od-faq .od-accordion__item.is-open .od-accordion__num {
	color: #C9B6FF;
}

.od-faq .od-accordion__icon {
	background: rgba(255, 255, 255, 0.08);
}

.od-faq .od-accordion__icon::before,
.od-faq .od-accordion__icon::after {
	background: #fff;
}

.od-faq .od-accordion__item.is-open .od-accordion__icon {
	background: var(--od-primary);
}

.od-faq .od-accordion__panel p {
	color: var(--od-on-ink-muted);
}

.od-faq__more {
	border-top-color: rgba(255, 255, 255, 0.12);
	color: var(--od-on-ink-muted);
}

.od-faq__more a {
	color: #C9B6FF;
}

.od-faq__more a:hover {
	color: #fff;
}

/* --- Problem: slider controls under the card, not under the heading ------- */
.od-problem__reel {
	min-width: 0;
}

.od-problem__reel .od-problem__nav {
	margin-top: var(--od-s-4);
}

/* --- Footer: ruled columns, boxed legal strip, giant wordmark ------------
   Columns are divided by full-height hairlines, the copyright line sits
   between two rules, and the brand name runs huge and faint along the
   bottom edge, clipped by the footer. */
.od-footer {
	position: relative;
	overflow: hidden;
	padding-top: 0;
	padding-bottom: 0;
	background: #121A33;
}

.od-footer > .od-container {
	position: relative;
	z-index: 1;
}

.od-footer__top {
	padding-top: var(--od-s-7);
	padding-bottom: var(--od-s-6);
	gap: var(--od-s-7);
}

@media (min-width: 900px) {
	.od-footer__top {
		grid-template-columns: 1.1fr 1fr 0.9fr 1.3fr;
		gap: 0;
		padding-bottom: var(--od-s-6);
	}

	.od-footer__top > * {
		padding-inline: var(--od-s-6);
		border-left: 1px solid rgba(255, 255, 255, 0.08);
	}

	.od-footer__top > :first-child {
		padding-left: 0;
		border-left: 0;
	}

	.od-footer__col {
		padding-top: 0;
	}
}

.od-logo--footer img {
	max-height: 80px; /* doubled (user, 2026-10-24) */
}

.od-footer__about {
	font-size: var(--od-fs-xs);
	line-height: 1.5;
	max-width: 28ch;
}

.od-footer__socials a {
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.06);
	border: 0;
	color: var(--od-on-ink);
}

.od-footer__socials a:hover {
	background: var(--od-primary);
}

.od-footer__socials a svg {
	width: 15px;
	height: 15px;
	fill: currentColor;
	stroke: none;
}

.od-footer__col-title {
	font-family: var(--od-font-body);
	font-size: 15px;
	font-weight: 600;
	letter-spacing: -0.01em;
	color: #E1E5ED;
	margin-bottom: var(--od-s-5);
}

.od-footer__links {
	gap: 14px;
}

.od-footer__links a,
.od-footer__address {
	font-size: 15px;
	line-height: 1.3;
	color: #9BA3AF;
}

.od-footer__nap-icon {
	color: #9BA3AF;
}

.od-footer .od-map--footer {
	max-width: 240px;
}

.od-footer .od-map--footer .od-map__frame {
	border-radius: 8px;
	height: 130px;
}

.od-footer__bottom {
	padding-block: 13px;
	border-top: 1px solid rgba(255, 255, 255, 0.08);
	border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.od-footer__copy,
.od-footer__legal a {
	font-size: 12px;
	color: #6B7797;
}

.od-footer__legal a:hover {
	color: #E1E5ED;
}

.od-footer__wordmark {
	position: relative;
	display: block;
	margin: 0 auto;
	max-width: var(--od-container);
	padding-inline: var(--od-gutter);
	font-family: var(--od-font-head);
	font-weight: 700;
	font-size: clamp(4rem, 13.5vw, 13rem);
	line-height: 0.82;
	letter-spacing: -0.04em;
	white-space: nowrap;
	text-align: center;
	color: transparent;
	-webkit-text-stroke: 0;
	background: linear-gradient(180deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.02));
	-webkit-background-clip: text;
	background-clip: text;
	margin-bottom: -0.16em;
	pointer-events: none;
	user-select: none;
}

/* --- Lightbox -------------------------------------------------------------- */
.od-lightbox__trigger {
	display: block;
	cursor: zoom-in;
}

.od-lightbox {
	padding: 0;
	border: 0;
	background: transparent;
	max-width: min(94vw, 1400px);
	max-height: 92vh;
	overflow: visible;
}

.od-lightbox::backdrop {
	background: rgba(10, 12, 30, 0.86);
	backdrop-filter: blur(4px);
}

.od-lightbox__img {
	display: block;
	max-width: min(94vw, 1400px);
	max-height: 92vh;
	width: auto;
	height: auto;
	border-radius: 12px;
	box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5);
}

.od-lightbox__close {
	position: absolute;
	top: -14px;
	right: -14px;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	border: 0;
	background: #fff;
	color: var(--od-ink);
	font-size: 24px;
	line-height: 1;
	cursor: pointer;
	box-shadow: 0 6px 18px rgba(0, 0, 0, 0.3);
}

.od-lightbox-open {
	overflow: hidden;
}

/* --- Post rail: TOC sits above the offer card and scrolls with it --------- */
.od-post__rail {
	display: flex;
	flex-direction: column;
	gap: var(--od-s-5);
}

.od-post__rail .od-toc {
	margin: 0;
}

@media (min-width: 1000px) {
	.od-post__rail {
		max-height: calc(100vh - var(--od-header-h) - 48px);
		overflow-y: auto;
		scrollbar-width: none;
	}
}

/* --- TOC: white card, rail list, current section highlighted ------------- */
.od-toc {
	background: #fff;
	border: 1px solid var(--od-line);
	border-radius: var(--od-r-lg);
}

.od-toc__toggle {
	padding: var(--od-s-4) var(--od-s-5);
	border-bottom: 1px solid var(--od-line-hair);
	font-family: var(--od-font-body);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--od-ink-muted, #5B6178);
}

.od-toc__toggle[aria-expanded="false"] {
	border-bottom-color: transparent;
}

.od-toc__toggle:hover .od-toc__title {
	color: var(--od-ink);
}

.od-toc__chev {
	width: 8px;
	height: 8px;
	border-width: 1.5px;
	border-color: var(--od-ink-muted, #5B6178);
}

.od-toc__panel {
	padding: var(--od-s-4) var(--od-s-5) var(--od-s-5);
}

.od-toc__list {
	gap: 0;
	border-left: 2px solid var(--od-line);
}

.od-toc__item {
	position: relative;
}

.od-toc__item--h3 {
	padding-left: 0;
}

.od-toc__link {
	display: block;
	padding: 7px 0 7px 14px;
	margin-left: -2px;
	border-left: 2px solid transparent;
	font-size: 14px;
	font-weight: 500;
	line-height: 1.4;
	color: var(--od-ink-muted, #5B6178);
	transition: color var(--od-dur) var(--od-ease), border-color var(--od-dur) var(--od-ease);
}

.od-toc__item--h3 .od-toc__link {
	padding-left: 28px;
	font-size: 13px;
	font-weight: 400;
}

.od-toc__link:hover,
.od-toc__link:focus-visible {
	color: var(--od-ink);
	text-decoration: none;
}

.od-toc__link.is-current {
	color: var(--od-primary);
	font-weight: 600;
	border-left-color: var(--od-primary);
}

/* --- Inner page heroes: run up behind the floating header ----------------
   The hero used to start below the header, so its top-right glow was cut
   flat at the seam and read as a stray band. Pulling the section up under
   the header lets the wash and both glows fade out naturally. */
.od-pagehero,
.od-svc-hero {
	margin-top: calc(var(--od-header-h) * -1);
	padding-top: calc(var(--od-header-h) + clamp(32px, 2vw + 20px, 56px));
}

.od-pagehero::before,
.od-svc-hero::before {
	top: -4%;
	right: -6%;
}

/* The hero ends on white with a hairline, so the next section (on the
   off-white) reads as a separate band instead of blending into it. */
.od-pagehero,
.od-svc-hero {
	background:
		radial-gradient(58ch 42ch at 88% -6%, rgba(78, 18, 240, 0.10), transparent 62%),
		radial-gradient(64ch 48ch at 4% 82%, rgba(78, 18, 240, 0.08), transparent 66%),
		var(--od-surface);
	border-bottom: 1px solid var(--od-line);
}

.od-pagehero + .od-section:not(.od-section--ink),
.od-svc-hero + .od-section:not(.od-section--ink) {
	background: var(--od-alt);
}

/* --- Blog: author panel ---------------------------------------------------
   Dark rounded band under the post grid: copy and CTA on the left, the
   portrait on the right. */
.od-authorpanel-wrap {
	padding-top: 0;
	background: var(--od-alt);
}

.od-authorpanel {
	position: relative;
	display: grid;
	gap: var(--od-s-6);
	padding: var(--od-s-7);
	border-radius: var(--od-r-xl);
	background:
		radial-gradient(60ch 40ch at 100% 0%, rgba(120, 80, 255, 0.28), transparent 65%),
		linear-gradient(135deg, var(--od-ink-hero-2, #14163a), var(--od-ink, #14142B));
	color: var(--od-on-ink);
	overflow: hidden;
}

@media (min-width: 900px) {
	.od-authorpanel {
		grid-template-columns: minmax(0, 1.4fr) minmax(240px, 0.8fr);
		align-items: center;
		gap: var(--od-s-7);
		padding: var(--od-s-8);
	}
}

.od-authorpanel__eyebrow {
	border-color: rgba(255, 255, 255, 0.2);
	color: var(--od-on-ink);
	margin-bottom: var(--od-s-5);
}

.od-authorpanel__eyebrow::before {
	background: #C9B6FF;
}

.od-authorpanel__name {
	font-size: var(--od-fs-h3);
	color: #fff;
	margin: 0 0 var(--od-s-1);
}

.od-authorpanel__role {
	font-size: var(--od-fs-sm);
	font-weight: 600;
	color: #C9B6FF;
	margin: 0 0 var(--od-s-4);
}

.od-authorpanel__bio {
	font-size: var(--od-fs-md, 1rem);
	line-height: 1.6;
	color: var(--od-on-ink-muted);
	max-width: 52ch;
	margin: 0 0 var(--od-s-6);
}

.od-authorpanel__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--od-s-4) var(--od-s-5);
}

.od-authorpanel__socials {
	display: flex;
	gap: var(--od-s-2);
	list-style: none;
	margin: 0;
	padding: 0;
}

.od-authorpanel__social {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.08);
	border: 1px solid rgba(255, 255, 255, 0.12);
	color: #fff;
	transition: background-color var(--od-dur) var(--od-ease);
}

.od-authorpanel__social:hover {
	background: var(--od-primary);
	border-color: var(--od-primary);
}

.od-authorpanel__social svg {
	width: 16px;
	height: 16px;
}

.od-authorpanel__media {
	justify-self: end;
	border-radius: var(--od-r-lg);
	overflow: hidden;
	aspect-ratio: 4 / 5;
	max-width: 320px;
	box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35);
}

.od-authorpanel__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}



/* Blog cards stay white with a hairline wherever they sit; the archive hero
   is not an --alt section, so the generic card tint was winning here. */
.od-section:not(.od-section--alt):not(.od-section--ink) .od-card.od-card--post {
	background: #fff;
	border-color: var(--od-line);
}

.od-authorpanel-wrap {
	padding-top: var(--od-s-7);
}

/* --- Blog cards: same navy as the author panel ------------------------------------------- */
.od-section:not(.od-section--alt):not(.od-section--ink) .od-card.od-card--post,
.od-card.od-card--post {
	background:
		radial-gradient(60ch 40ch at 100% 0%, rgba(120, 80, 255, 0.28), transparent 65%),
		linear-gradient(135deg, var(--od-ink-hero-2, #14163a), var(--od-ink, #14142B));
	border-color: rgba(255, 255, 255, 0.1);
	color: rgba(255, 255, 255, 0.82);
}

.od-card--post .od-card__title,
.od-card--post .od-card__title a {
	color: #fff;
}

.od-card--post .od-card__eyebrow {
	color: #D9CCFF;
}

.od-card--post .od-card__text,
.od-card--post .od-card__meta,
.od-card--post time {
	color: rgba(255, 255, 255, 0.78);
}

.od-card--post:hover {
	border-color: rgba(255, 255, 255, 0.45);
}

.od-card--post .od-card__title a:hover {
	color: #D9CCFF;
}

.od-authorpanel__social:hover,
.od-authorpanel__social:focus-visible {
	color: #fff;
}

.od-authorpanel__social:focus-visible {
	outline: 2px solid #C9B6FF;
	outline-offset: 3px;
}

/* Service pages: the band straddles the seam between the questions slider
   (white) and the deliverables section (off-white), as on the home page. */
.od-svc-prob.od-section {
	padding-bottom: calc(var(--od-section-y) + var(--od-s-7));
}

.od-svc-band.od-band.od-section--tight {
	padding-top: 0;
}

/* Band: a little wider so the longer service-page copy fits on fewer lines. */
.od-band .od-band__inner {
	max-width: 1100px;
}

.od-band .od-band__copy {
	max-width: 60ch;
}

/* Hero: the highlighted words always start a new line (user, 2026-10-24). */
.od-hero__title-line {
	display: block;
}

/* --- Service engagement cards: ink instead of solid violet ------------------
   Three flat violet slabs were too loud (user, 2026-10-24). Same dark gradient
   as the hero and FAQ bands, with a violet glow in the corner; the one action
   per card becomes the brand violet button. */
.od-svc-eng__card {
	background:
		radial-gradient(120% 90% at 100% 0%, rgba(78, 18, 240, 0.45), transparent 62%),
		linear-gradient(160deg, var(--od-ink-hero-2), var(--od-ink-hero) 70%);
	border-color: rgba(255, 255, 255, 0.10);
	box-shadow: 0 10px 24px rgba(20, 20, 43, 0.18);
}

.od-svc-eng__card:hover {
	box-shadow: 0 22px 48px rgba(20, 20, 43, 0.28);
}

.od-svc-eng__cta,
.od-svc-eng__cta:link,
.od-svc-eng__cta:visited {
	background: var(--od-primary);
	border-color: var(--od-primary);
	color: #fff;
}

.od-svc-eng__cta:hover,
.od-svc-eng__cta:focus-visible {
	background: var(--od-primary-600);
	border-color: var(--od-primary-600);
	color: #fff;
}