/*
 * Akela Mason Law — global design system.
 * Loaded after Bootstrap 5; extends/overrides Bootstrap defaults.
 *
 * Color/typography/spacing values mirror theme.json — keep both in sync
 * if the working palette or type scale changes.
 */

/* -----------------------------------------------------------------------
 * Design tokens
 * --------------------------------------------------------------------- */
:root {
	/* Color */
	/* Base light background: a cool, fresh white (was ivory #fbf8f3). */
	--aml-color-ivory: #fafcfb;
	--aml-color-ink: #111111;
	--aml-color-gold: #caa354;
	--aml-color-deep-green: #365951;
	--aml-color-sage: #e5f0ee;

	/* Neutral card surface — not a brand color; lifts cards off the ivory page. */
	--aml-color-surface: #ffffff;

	--aml-color-body-bg: var(--aml-color-ivory);
	--aml-color-body-text: var(--aml-color-ink);
	--aml-color-link: var(--aml-color-deep-green);
	--aml-color-link-hover: var(--aml-color-ink);
	--aml-color-border: rgba(17, 17, 17, 0.1);

	/* Typography */
	--aml-font-heading: 'Libre Baskerville', Georgia, 'Times New Roman', serif;
	--aml-font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

	--aml-text-sm: 0.875rem;
	--aml-text-base: 1rem;
	--aml-text-lg: 1.25rem;
	--aml-text-xl: 1.75rem;
	--aml-text-2xl: 2.5rem;
	--aml-text-3xl: 3rem;

	--aml-leading-tight: 1.25;
	--aml-leading-normal: 1.6;

	/* Spacing scale */
	--aml-space-1: 0.25rem;
	--aml-space-2: 0.5rem;
	--aml-space-3: 1rem;
	--aml-space-4: 1.5rem;
	--aml-space-5: 3rem;
	--aml-space-6: 5rem;

	/* Section rhythm */
	--aml-section-space-y: var(--aml-space-6);

	/* Container widths */
	--aml-container-content: 720px;
	--aml-container-wide: 1140px;

	/* Border radius */
	--aml-radius-sm: 0.375rem;
	--aml-radius-md: 0.75rem;
	--aml-radius-lg: 1.5rem;
	--aml-radius-pill: 999px;

	/* Elevation (restrained — no heavy shadows) */
	--aml-shadow-sm: 0 1px 2px rgba(17, 17, 17, 0.06);
	--aml-shadow-md: 0 4px 16px rgba(17, 17, 17, 0.08);

	/* Interaction */
	--aml-tap-target: 44px;
	--aml-focus-color: var(--aml-color-deep-green);
	--aml-focus-width: 3px;
	--aml-transition-fast: 150ms ease;
}

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

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

body {
	display: flex;
	min-height: 100vh;
	flex-direction: column;
	background-color: var(--aml-color-body-bg);
	color: var(--aml-color-body-text);
	font-family: var(--aml-font-body);
	font-size: var(--aml-text-base);
	line-height: var(--aml-leading-normal);
}

.site-content {
	flex: 1 0 auto;
}

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

/* -----------------------------------------------------------------------
 * Typography
 * --------------------------------------------------------------------- */
h1,
h2,
h3,
h4,
h5,
h6 {
	margin-top: 0;
	margin-bottom: var(--aml-space-3);
	color: var(--aml-color-ink);
	font-family: var(--aml-font-heading);
	font-weight: 700;
	line-height: var(--aml-leading-tight);
}

h1 {
	font-size: var(--aml-text-3xl);
}

h2 {
	font-size: var(--aml-text-2xl);
}

h3 {
	font-size: var(--aml-text-xl);
}

h4 {
	font-size: var(--aml-text-lg);
}

p {
	margin-top: 0;
	margin-bottom: var(--aml-space-3);
}

small,
.aml-text-sm {
	font-size: var(--aml-text-sm);
}

@media (min-width: 992px) {
	h1 {
		font-size: calc(var(--aml-text-3xl) * 1.15);
	}

	h2 {
		font-size: calc(var(--aml-text-2xl) * 1.1);
	}
}

/*
 * Below desktop the full-size H2/H3 would outrank the page H1s (36–48px),
 * so they step down with the viewport. Balanced wrapping avoids one-word
 * last lines on longer legal/service headings where supported.
 */
@media (max-width: 991.98px) {
	h2 {
		font-size: 2.125rem;
	}

	h3 {
		font-size: 1.5rem;
	}
}

@media (max-width: 575.98px) {
	h2 {
		font-size: 1.75rem;
	}

	h3 {
		font-size: 1.375rem;
	}
}

h2,
h3 {
	text-wrap: balance;
}

/*
 * Section headings inside the 672px reading column (inner pages): the
 * long legal headings there ("Family-Based and Adjustment-of-Status
 * Matters", "Individualized Representation for Every Family") stacked
 * three lines deep at 44px; at 40px they sit on two. Full-width section
 * headings keep 44px, and the homepage keeps its own tuned headings.
 */
@media (min-width: 992px) {
	main:not(.aml-home) .aml-container-narrow > h2:not(.h4) {
		font-size: 2.5rem;
	}
}

/* -----------------------------------------------------------------------
 * Links
 * --------------------------------------------------------------------- */
a {
	color: var(--aml-color-link);
	text-decoration-thickness: 1px;
	text-underline-offset: 0.15em;
	transition: color var(--aml-transition-fast);
}

a:hover {
	color: var(--aml-color-link-hover);
}

@media (prefers-reduced-motion: reduce) {
	a {
		transition: none;
	}
}

/* -----------------------------------------------------------------------
 * Accessible focus states (supplements Bootstrap's own focus styles)
 * --------------------------------------------------------------------- */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
	outline: var(--aml-focus-width) solid var(--aml-focus-color);
	outline-offset: 2px;
}

/* -----------------------------------------------------------------------
 * Buttons
 * --------------------------------------------------------------------- */
.btn {
	display: inline-flex;
	min-height: var(--aml-tap-target);
	align-items: center;
	justify-content: center;
	padding: var(--aml-space-2) var(--aml-space-4);
	border-radius: var(--aml-radius-sm);
	font-family: var(--aml-font-body);
	font-weight: 600;
	transition: background-color var(--aml-transition-fast), color var(--aml-transition-fast), border-color var(--aml-transition-fast), box-shadow var(--aml-transition-fast);
}

@media (prefers-reduced-motion: reduce) {
	.btn {
		transition: none;
	}
}

/* Slightly larger tap area on phones, on top of the existing 44px
   min-height floor (applies to every .btn — hero and final CTA included). */
@media (max-width: 575.98px) {
	.btn {
		padding-block: var(--aml-space-3);
	}
}

/*
 * Primary call to action: the heaviest thing in its row — solid deep
 * green, white label, a little taller and wider than a standard button,
 * and lifted by a hairline shadow so it holds on ivory, white and sage
 * alike. Its outline partner keeps the same height so a pair lines up,
 * but stays visually secondary. The header's button keeps the compact
 * size (see below).
 */
.btn-primary {
	min-height: 3rem;
	padding-inline: 1.75rem;
	background-color: var(--aml-color-deep-green);
	border-color: var(--aml-color-deep-green);
	box-shadow: 0 1px 2px rgba(17, 17, 17, 0.16), 0 4px 12px rgba(54, 89, 81, 0.16);
	color: #ffffff;
	font-size: 1.0625rem;
	letter-spacing: 0.01em;
}

.btn-primary:hover,
.btn-primary:focus-visible {
	background-color: var(--aml-color-ink);
	border-color: var(--aml-color-ink);
	color: #ffffff;
}

.btn-primary + .btn-outline-primary,
.btn-outline-primary:has(+ .btn-primary) {
	min-height: 3rem;
}

.site-header .btn-primary {
	min-height: var(--aml-tap-target);
	padding-inline: var(--aml-space-4);
	box-shadow: none;
	font-size: 1rem;
}

/* Phones stack a pair full width: one label size keeps both the same height. */
@media (max-width: 575.98px) {
	.btn-primary {
		font-size: 1rem;
	}
}

.btn-outline-primary {
	background-color: transparent;
	border-color: var(--aml-color-deep-green);
	color: var(--aml-color-deep-green);
}

.btn-outline-primary:hover,
.btn-outline-primary:focus-visible {
	background-color: var(--aml-color-deep-green);
	color: var(--aml-color-ivory);
}

.btn-gold {
	background-color: var(--aml-color-gold);
	border-color: var(--aml-color-gold);
	color: var(--aml-color-ink);
}

.btn-gold:hover,
.btn-gold:focus-visible {
	background-color: var(--aml-color-ink);
	border-color: var(--aml-color-ink);
	color: var(--aml-color-ivory);
}

/* -----------------------------------------------------------------------
 * Large, consistent tap targets for interactive elements
 * --------------------------------------------------------------------- */
.navbar-nav .nav-link,
.dropdown-item,
.navbar-toggler {
	min-height: var(--aml-tap-target);
	display: inline-flex;
	align-items: center;
}

/* -----------------------------------------------------------------------
 * Containers
 * --------------------------------------------------------------------- */
.aml-container {
	width: 100%;
	max-width: var(--aml-container-wide);
	margin-inline: auto;
	padding-inline: var(--aml-space-4);
}

.aml-container-narrow {
	width: 100%;
	max-width: var(--aml-container-content);
	margin-inline: auto;
	padding-inline: var(--aml-space-4);
}

/* -----------------------------------------------------------------------
 * Section rhythm and large rounded section containers
 * --------------------------------------------------------------------- */
/*
 * Site-wide rhythm (the homepage keeps its own, slightly roomier values):
 *
 * --aml-rhythm   per-side padding for stacked sections (open sections and
 *                sections holding a panel), so two consecutive ones sit
 *                ~56 / 64 / 88px apart on phone / tablet / desktop.
 * --aml-band-pad per-side padding inside full-width colored bands, so
 *                their content has ~48 / 56 / 80px of breathing room.
 *
 * The section's padding alone sets its top and bottom edge: see the
 * trailing-margin rules below.
 */
:root {
	--aml-rhythm: 1.75rem;
	--aml-band-pad: 3rem;
}

@media (min-width: 576px) {
	:root {
		--aml-rhythm: 2rem;
		--aml-band-pad: 3.5rem;
	}
}

@media (min-width: 992px) {
	:root {
		--aml-rhythm: 2.75rem;
		--aml-band-pad: 5rem;
	}
}

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

.section--tight {
	padding-block: var(--aml-rhythm);
}

/* Compact sections are full-width bands when colored (sage), and simply
   open stacked sections when they share the page background (ivory). */
.section--compact {
	padding-block: var(--aml-band-pad);
}

.section--compact.section--ivory {
	padding-block: var(--aml-rhythm);
}

/*
 * Whatever ends a section's content adds no trailing margin of its own,
 * so the bottom space matches the top: a closing paragraph, list or panel
 * directly in the container, the last item of a closing checklist, and the
 * Getting Started step text when the steps end the section (every step
 * from 768px, where they sit side by side; only the last once stacked,
 * where the others' margins separate the steps).
 */
.section :is(.aml-container, .aml-container-narrow) > :last-child,
.aml-attorney-facts:last-child > li:last-child,
.aml-steps-row:last-child > :last-child .aml-step p {
	margin-bottom: 0;
}

@media (min-width: 768px) {
	.aml-steps-row:last-child .aml-step p {
		margin-bottom: 0;
	}
}

.section--ivory {
	background-color: var(--aml-color-ivory);
}

.section--sage {
	background-color: var(--aml-color-sage);
}

/* A very soft sage-to-light fade on sage bands (palette colors only;
   browsers without color-mix() keep the plain sage background). :where()
   keeps this at zero specificity so section-specific backgrounds (e.g.
   the homepage reassurance band) still win. */
:where(.section--compact.section--sage) {
	background-image: linear-gradient(180deg, var(--aml-color-sage) 0%, color-mix(in srgb, var(--aml-color-sage) 60%, var(--aml-color-ivory)) 100%);
}

.section-heading {
	margin-bottom: var(--aml-space-5);
}

/*
 * Centers an incomplete final row in a fixed-width Bootstrap grid (e.g.
 * 5 items in a 3-up grid leaves 2 orphaned on the last row) instead of
 * leaving them flush left with empty space on the right.
 */
.aml-grid-center-last-row {
	justify-content: center;
}

/*
 * Inset rounded panel: applied to an inner div (inside .aml-container),
 * never to a full-width <section>, so the rounded corners and shadow are
 * always visible against the page background at every viewport width.
 */
.section-panel {
	padding: var(--aml-space-5) var(--aml-space-4);
	border-radius: var(--aml-radius-lg);
	box-shadow: var(--aml-shadow-sm);
}

/*
 * Ivory panels share the page background, so as boxes they only read as
 * a faint shadow. They're rendered as open editorial sections instead —
 * no box, no inner padding, so section rhythm alone sets the spacing —
 * which lets sage panels and the deep-green CTA read as the grouped,
 * emphasized blocks. (.section-panel.… raises specificity above the
 * responsive .section-panel padding rules.)
 */
.section-panel.section-panel--ivory {
	padding: 0;
	border-radius: 0;
	background-color: transparent;
	box-shadow: none;
}

.section-panel--sage {
	background-color: var(--aml-color-sage);
}

/*
 * The closing consultation CTA on every page — the one place on each page
 * that should read as the strongest visual beat. Buttons are
 * overridden here (rather than adding new button classes) so the markup
 * stays plain .btn-primary/.btn-outline-primary everywhere.
 */
.section-panel--deep {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	background-color: var(--aml-color-deep-green);
	color: var(--aml-color-ivory);
}

.section-panel--deep h2,
.section-panel--deep p {
	color: var(--aml-color-ivory);
}

.section-panel--deep .btn-primary {
	background-color: var(--aml-color-gold);
	border-color: var(--aml-color-gold);
	box-shadow: 0 1px 2px rgba(17, 17, 17, 0.2);
	color: var(--aml-color-ink);
}

.section-panel--deep .btn-primary:hover,
.section-panel--deep .btn-primary:focus-visible {
	background-color: var(--aml-color-ivory);
	border-color: var(--aml-color-ivory);
	color: var(--aml-color-ink);
}

.section-panel--deep .btn-outline-primary {
	background-color: transparent;
	border-color: rgba(250, 252, 251, 0.55);
	color: var(--aml-color-ivory);
}

.section-panel--deep .btn-outline-primary:hover,
.section-panel--deep .btn-outline-primary:focus-visible {
	background-color: var(--aml-color-ivory);
	border-color: var(--aml-color-ivory);
	color: var(--aml-color-ink);
}

/*
 * Quiet decoration: a short gold rule above the heading and two faint
 * outline circles clipped at the top-right corner. The panel's isolation
 * (above) keeps the circles over its background and under the text.
 */
.section-panel--deep::before,
.section-panel--deep::after {
	content: '';
	position: absolute;
	z-index: -1;
	border-radius: 50%;
	pointer-events: none;
}

.section-panel--deep::before {
	top: -150px;
	right: -90px;
	width: 300px;
	height: 300px;
	border: 1px solid rgba(202, 163, 84, 0.3);
}

.section-panel--deep::after {
	top: -95px;
	right: -35px;
	width: 190px;
	height: 190px;
	border: 1px solid rgba(250, 252, 251, 0.12);
}

.section-panel--deep h2::before {
	content: '';
	display: block;
	width: 40px;
	height: 2px;
	margin: 0 auto var(--aml-space-4);
	background-color: var(--aml-color-gold);
}

/* Plain text links (e.g. the email address under the Consultation CTA)
   would otherwise inherit deep-green link color on the deep-green panel. */
.section-panel--deep a:not(.btn) {
	color: var(--aml-color-ivory);
	text-decoration: underline;
	text-decoration-color: rgba(202, 163, 84, 0.8);
	text-underline-offset: 0.25em;
}

.section-panel--deep a:not(.btn):hover {
	color: var(--aml-color-gold);
}

/*
 * Homepage closing CTA only (opted in from front-page.php): the
 * decorative consultation photo under a deep-green overlay. 82% is the
 * lightest overlay that keeps ivory body text above 4.5:1 even over a
 * pure-white pixel of the photo. If --aml-cta-photo is unset, the
 * declaration drops out and the plain deep-green panel remains.
 */
.section-panel--photo {
	background-image: linear-gradient(rgba(54, 89, 81, 0.82), rgba(54, 89, 81, 0.82)), var(--aml-cta-photo);
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
}

@media (min-width: 992px) {
	.section-panel {
		padding: var(--aml-space-6) var(--aml-space-5);
	}
}

/*
 * On phones, the outer section's own padding-block plus the panel's own
 * padding compound (they're nested, not shared), so the panel's padding
 * is trimmed at phone width (the section side comes from --aml-rhythm).
 */
@media (max-width: 575.98px) {
	.section-panel {
		padding: var(--aml-space-4) var(--aml-space-3);
	}
}

.section-eyebrow {
	display: inline-block;
	margin-bottom: var(--aml-space-2);
	color: var(--aml-color-gold);
	font-family: var(--aml-font-body);
	font-size: var(--aml-text-sm);
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

/*
 * Opt-in eyebrow variant (homepage only for now): a short gold rule leads
 * the label, and the label itself moves to deep green — gold text on the
 * sage panels is only ~2:1 contrast, deep green is ~6:1, while the gold
 * accent is kept in the rule.
 */
.section-eyebrow--rule {
	display: inline-flex;
	align-items: center;
	gap: 0.75rem;
	color: var(--aml-color-deep-green);
}

.section-eyebrow--rule::before {
	content: '';
	width: 28px;
	height: 1px;
	background-color: var(--aml-color-gold);
}

/* Short centered gold rule under a section's H2. Decorative only. */
.section-heading--rule h2::after {
	content: '';
	display: block;
	width: 40px;
	height: 2px;
	margin: var(--aml-space-3) auto 0;
	background-color: var(--aml-color-gold);
}

/*
 * Small rule-dot-rule motif above a heading. Decorative only. The two
 * rules are pseudo-elements; the dot is a background centered in the gap
 * between them.
 */
/* Block-level (not inline-flex) so it doesn't sit in a full text line and
   push the heading ~15px lower than the section padding intends. */
.aml-motif {
	display: flex;
	width: fit-content;
	align-items: center;
	gap: 1.5rem;
	height: 6px;
	margin-bottom: var(--aml-space-4);
	background: radial-gradient(circle, var(--aml-color-gold) 2.5px, transparent 3px) center / 6px 6px no-repeat;
}

.aml-motif::before,
.aml-motif::after {
	content: '';
	width: 32px;
	height: 1px;
	background-color: var(--aml-color-gold);
}

.text-center > .aml-motif {
	margin-inline: auto;
}

/* -----------------------------------------------------------------------
 * Internal page hero (.aml-page-hero)
 *
 * The open hero pattern for every page except the homepage: no boxed
 * panel, generous spacing, eyebrow + H1 + intro, usually centered (the
 * About page uses a two-column layout with the portrait). Pair it with
 * one .aml-deco--* modifier for a page-specific background accent.
 * --------------------------------------------------------------------- */
.aml-page-hero {
	padding-block: 2.5rem 2rem;
}

@media (min-width: 576px) {
	.aml-page-hero {
		padding-block: 3.5rem 3rem;
	}
}

@media (min-width: 992px) {
	.aml-page-hero {
		padding-block: 5rem 4rem;
	}
}

.aml-page-hero-inner {
	max-width: 820px;
	margin-inline: auto;
}

/*
 * Practice-area heroes (Asylum, Removal Defense, Bond Hearing, Defensive
 * Waivers, Family-Based, Humanitarian Relief): one shared treatment. The
 * background is the Humanitarian Relief hero's soft sage halo
 * (.aml-deco--halo), so all six read as one family. The spacing is
 * equal above and below — the base hero deliberately has less below,
 * which left these centred heroes looking compressed under their
 * buttons — and the last element's margin is dropped so the padding is
 * the whole gap. No fixed height: longer copy simply makes a taller hero.
 */
.aml-practice-hero {
	padding-block: 3rem;
}

@media (min-width: 576px) {
	.aml-practice-hero {
		padding-block: 4rem;
	}
}

@media (min-width: 992px) {
	.aml-practice-hero {
		padding-block: 5.5rem;
	}
}

.aml-practice-hero .aml-page-hero-inner > :last-child {
	margin-bottom: 0;
}

/* 404: the same centred hero, given room so it sits in the middle of an
   otherwise empty page rather than hugging the header. */
.aml-not-found {
	display: flex;
	min-height: 60vh;
	align-items: center;
	padding-block: 4rem;
}

.aml-not-found > .aml-container {
	width: 100%;
}

.aml-page-hero .aml-hero-heading {
	text-wrap: balance;
}

/*
 * Phones: a fixed 36px breaks the longer service headings into one-word
 * lines. Width first (slightly narrower side padding in the hero), then
 * the size follows the column so the widest word pairs ("Immigration
 * Court" 10.15em, "Removal Defense &" ~10.4em) stay together.
 */
@media (max-width: 575.98px) {
	.aml-page-hero .aml-container {
		padding-inline: 1rem;
	}

	.aml-page-hero .aml-hero-heading {
		font-size: clamp(1.875rem, calc(9.43vw - 3px), 2.25rem);
	}
}

@media (min-width: 576px) and (max-width: 767.98px) {
	.aml-page-hero .aml-hero-heading {
		font-size: 2.75rem;
	}
}

@media (min-width: 992px) {
	.aml-page-hero .aml-hero-heading {
		font-size: 3.25rem;
	}
}

/* Centered heroes get the eyebrow rule on both sides, for symmetry. */
.aml-page-hero-inner.text-center .section-eyebrow--rule::after {
	content: '';
	width: 28px;
	height: 1px;
	background-color: var(--aml-color-gold);
}

/* -----------------------------------------------------------------------
 * Decorative section modifiers (.aml-deco + one variant)
 *
 * Quiet, low-contrast background accents built from pseudo-elements, so
 * they need no markup, can't be focused or read, and never animate. Each
 * variant is a different composition, so pages and adjacent sections
 * don't repeat the same motif. isolation keeps the accents above the
 * section's own background and below its content; overflow clips them
 * at the section edges (no horizontal scroll).
 * --------------------------------------------------------------------- */
.aml-deco {
	position: relative;
	isolation: isolate;
	overflow: hidden;
}

.aml-deco::before,
.aml-deco::after {
	content: '';
	position: absolute;
	z-index: -1;
	pointer-events: none;
}

/* Rings: a large faint outline circle right, a small gold ring inside it. */
.aml-deco--rings::before {
	top: -160px;
	right: -140px;
	width: 440px;
	height: 440px;
	border: 1px solid rgba(54, 89, 81, 0.12);
	border-radius: 50%;
}

.aml-deco--rings::after {
	top: 40px;
	right: 12%;
	width: 120px;
	height: 120px;
	border: 1px solid rgba(202, 163, 84, 0.4);
	border-radius: 50%;
}

/* Dots: two soft dot fields at opposite corners. */
.aml-deco--dots::before,
.aml-deco--dots::after {
	width: 220px;
	height: 160px;
	background-image: radial-gradient(rgba(54, 89, 81, 0.18) 1.2px, transparent 1.6px);
	background-size: 16px 16px;
	-webkit-mask-image: radial-gradient(closest-side, #000, transparent);
	mask-image: radial-gradient(closest-side, #000, transparent);
}

.aml-deco--dots::before {
	top: 1.5rem;
	left: 4%;
}

.aml-deco--dots::after {
	right: 5%;
	bottom: 1rem;
	width: 160px;
	height: 120px;
}

/* Arc: a wide faint arc low-left and a thin gold arc high-right. */
.aml-deco--arc::before {
	bottom: -260px;
	left: -180px;
	width: 520px;
	height: 520px;
	border: 1px solid rgba(54, 89, 81, 0.1);
	border-radius: 50%;
}

.aml-deco--arc::after {
	top: -120px;
	right: -80px;
	width: 280px;
	height: 280px;
	border: 1px solid rgba(202, 163, 84, 0.3);
	border-radius: 50%;
}

/* Columns: faint vertical hairlines fading in from the top-right corner
   (law-adjacent structure, nothing literal), plus a small gold ring. */
.aml-deco--columns::before {
	inset: 0;
	background-image: repeating-linear-gradient(90deg, rgba(54, 89, 81, 0.07) 0 1px, transparent 1px 56px);
	-webkit-mask-image: radial-gradient(70% 90% at 100% 0%, #000 0%, transparent 70%);
	mask-image: radial-gradient(70% 90% at 100% 0%, #000 0%, transparent 70%);
}

.aml-deco--columns::after {
	bottom: 2rem;
	left: 6%;
	width: 90px;
	height: 90px;
	border: 1px solid rgba(202, 163, 84, 0.4);
	border-radius: 50%;
}

/* Halo: a soft sage glow behind the center, and one faint outline ring. */
.aml-deco--halo::before {
	top: 50%;
	left: 50%;
	width: 680px;
	height: 680px;
	transform: translate(-50%, -50%);
	border-radius: 50%;
	background: radial-gradient(closest-side, rgba(229, 240, 238, 0.9), rgba(229, 240, 238, 0));
}

.aml-deco--halo::after {
	top: 50%;
	left: 50%;
	width: 520px;
	height: 520px;
	transform: translate(-50%, -50%);
	border: 1px solid rgba(54, 89, 81, 0.08);
	border-radius: 50%;
}

/* -----------------------------------------------------------------------
 * Cards
 * --------------------------------------------------------------------- */
/* Content cards: white surface on the light page, hairline border, no
   heavy shadow — they read as premium through spacing and type. Only
   clickable cards (.aml-practice-card, below) get a hover state. */
.card {
	border: 1px solid rgba(17, 17, 17, 0.08);
	border-radius: var(--aml-radius-md);
	background-color: var(--aml-color-surface);
	box-shadow: none;
}

.card-body {
	padding: var(--aml-space-4);
}

@media (min-width: 992px) {
	.card-body {
		padding: 2rem 1.75rem 1.75rem;
	}
}

.card-title {
	margin-bottom: var(--aml-space-2);
	font-family: var(--aml-font-heading);
	font-size: 1.25rem;
	line-height: 1.3;
}

/* max-width only bites in full-width cards, keeping a readable measure. */
.card-body p {
	max-width: 72ch;
	color: rgba(17, 17, 17, 0.72);
}

.card-body p:last-child {
	margin-bottom: 0;
}

/* Longer service cards: small labelled sub-sections and check lists
   inside one card, so detailed client content stays scannable. */
.aml-card-subheading {
	margin: 1.5rem 0 0.5rem;
	font-family: var(--aml-font-body);
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--aml-color-deep-green);
}

.card-body .aml-attorney-facts {
	margin-bottom: 1rem;
	color: rgba(17, 17, 17, 0.72);
}

.card-body .aml-attorney-facts:last-child {
	margin-bottom: 0;
}

/* -----------------------------------------------------------------------
 * Header
 * --------------------------------------------------------------------- */
.site-header {
	background-color: var(--aml-color-ivory);
}

.site-header .navbar {
	padding-top: 1.25rem;
	padding-bottom: 1.25rem;
}

@media (min-width: 992px) {
	.site-header .navbar {
		padding-top: 1.5rem;
		padding-bottom: 1.5rem;
	}
}

/*
 * Active menu state (set by AML_Nav_Walker: .active on the current page's
 * link, and on "Practice Areas" when one of its pages is current). A thin
 * gold underline via text-decoration rather than a pseudo-element, so it
 * never collides with the dropdown toggle's own ::after caret.
 */
.site-header .navbar-nav .nav-link.active {
	color: var(--aml-color-deep-green);
	text-decoration: underline;
	text-decoration-color: var(--aml-color-gold);
	text-decoration-thickness: 2px;
	text-underline-offset: 0.55em;
}

.site-header .dropdown-item.active,
.site-header .dropdown-item:active {
	background-color: var(--aml-color-sage);
	color: var(--aml-color-deep-green);
}

/* A little more breathing room around the brand/toggler on phones than
   Bootstrap's default ~0.75rem container gutter gives. */
@media (max-width: 575.98px) {
	.site-header .navbar > .container {
		padding-inline: var(--aml-space-4);
	}
}

@media (max-width: 359.98px) {
	.site-header .navbar > .container {
		padding-inline: var(--aml-space-3);
	}
}

/*
 * max-height + overflow: hidden are a hard safety net so a custom logo
 * (of any uploaded size/ratio) can never expand the header row.
 */
.navbar-brand {
	display: inline-flex;
	align-items: center;
	min-height: var(--aml-tap-target);
	max-height: 48px;
	margin-right: 0.75rem;
	overflow: hidden;
	color: var(--aml-color-ink);
}

/*
 * Bottom-aligned so the tagline's baseline sits on the icon's bottom
 * edge (the tagline's own line box is trimmed to its baseline below),
 * instead of both being centered with empty line-height space under the
 * tagline.
 */
.navbar-brand--text {
	align-items: flex-end;
	gap: 0.625rem;
	line-height: 1.15;
}

.navbar-brand-text {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.15rem;
}

/*
 * Height-driven so any icon ratio is preserved; object-fit guards a
 * non-square upload against the width cap. Each height is the measured
 * span of the two-line text at that breakpoint's sizes — from the top of
 * the name's ascenders ("k", "l") to the tagline's baseline — so, with
 * the bottom alignment above, the icon runs exactly from the top of
 * "Akela Mason, Esq." to the bottom of "Immigration Law Firm P.A.".
 * Retune these if the brand font sizes or line gap change.
 */
.navbar-brand-icon {
	flex: none;
	width: auto;
	height: 35.9px;
	max-width: 48px;
	object-fit: contain;
}

.navbar-brand-name {
	font-family: var(--aml-font-heading);
	font-size: 1.375rem;
	font-weight: 700;
}

/* Uppercase has no descenders, so the space under the baseline is empty:
   at line-height 1 Inter keeps ~0.2em there, which the negative margin
   removes so the text block ends exactly at the baseline. */
.navbar-brand-tagline {
	margin-bottom: -0.2em;
	font-family: var(--aml-font-body);
	font-size: 0.7rem;
	font-weight: 500;
	line-height: 1;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--aml-color-deep-green);
}

/*
 * Tiered sizing keeps the brand, icon and toggler on one row on phones,
 * and at 992-1199px (960px container) keeps the brand inside its grid
 * track so it never runs into the centered nav.
 */
@media (max-width: 399.98px) {
	.navbar-brand-name {
		font-size: 1.25rem;
	}

	.navbar-brand-icon {
		height: 33.6px;
	}
}

@media (max-width: 359.98px) {
	.navbar-brand-name {
		font-size: 1.125rem;
	}

	.navbar-brand-icon {
		height: 31.3px;
	}
}

/* From 992px the two lines sit slightly further apart. */
@media (min-width: 992px) {
	.navbar-brand-text {
		gap: 0.3rem;
	}
}

@media (min-width: 992px) and (max-width: 1199.98px) {
	.navbar-brand-name {
		font-size: 1.1875rem;
	}

	.navbar-brand-icon {
		height: 34.8px;
	}
}

@media (min-width: 1200px) {
	.navbar-brand--text {
		gap: 0.75rem;
	}

	.navbar-brand-icon {
		height: 38.3px;
	}
}

.navbar-brand--logo img {
	max-height: 48px;
	max-width: 220px;
	width: auto;
	height: auto;
}

.aml-cta {
	margin-top: var(--aml-space-3);
}

/*
 * Desktop nav centering: grid, not flex — the brand and CTA are different
 * widths, so centering the nav in "whatever flex space is left over"
 * after the brand would always leave it visibly offset toward the
 * shorter side. A 1fr/auto/1fr grid keeps the two outer tracks equal
 * width regardless of the brand/CTA's own content width, which is what
 * actually centers the middle (nav) track against the full header.
 *
 * .navbar-collapse keeps its normal DOM position/id so Bootstrap's
 * collapse toggle (mobile menu) is completely unaffected; display:
 * contents here only removes ITS OWN box from layout at this breakpoint
 * so its children (.navbar-nav, .aml-cta) become direct grid items
 * instead of a nested flex group. The !important matches the specificity
 * Bootstrap itself uses for .navbar-expand-lg .navbar-collapse.
 */
@media (min-width: 992px) {
	.site-header .navbar > .container {
		display: grid;
		grid-template-columns: 1fr auto 1fr;
		align-items: center;
		column-gap: var(--aml-space-4);
	}

	.site-header .navbar-brand {
		grid-column: 1;
		justify-self: start;
		margin-right: 0;
	}

	.site-header .navbar-collapse {
		display: contents !important;
	}

	.navbar-nav {
		grid-column: 2;
		justify-self: center;
		gap: var(--aml-space-2);
		margin: 0;
	}

	.aml-cta {
		grid-column: 3;
		justify-self: end;
		margin: 0;
	}
}

/* -----------------------------------------------------------------------
 * Footer
 * --------------------------------------------------------------------- */
.site-footer {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	margin-top: var(--aml-section-space-y);
	padding-top: 4rem;
	padding-bottom: 2rem;
	background-color: var(--aml-color-sage);
	border-top: 1px solid var(--aml-color-border);
}

@media (min-width: 992px) {
	.site-footer {
		padding-top: 6rem;
	}
}

/*
 * The homepage already ends on a full-height consultation CTA section,
 * so the extra gap above the footer that other pages need would leave a
 * large empty band there.
 */
.aml-home + .site-footer {
	margin-top: 0;
}

/* Two faint circles at the footer's top-right corner. Decorative only. */
.site-footer::before,
.site-footer::after {
	content: '';
	position: absolute;
	z-index: -1;
	border-radius: 50%;
	pointer-events: none;
}

.site-footer::before {
	top: -220px;
	right: -140px;
	width: 460px;
	height: 460px;
	border: 1px solid rgba(54, 89, 81, 0.12);
}

.site-footer::after {
	top: -90px;
	right: -40px;
	width: 220px;
	height: 220px;
	border: 1px solid rgba(202, 163, 84, 0.35);
}

/*
 * Ivory "mat" behind the logo — the footer background is sage, and the
 * uploaded logo has significant internal whitespace (see header.php's
 * comment on the same asset), so this guarantees contrast against the
 * footer regardless of how light the logo's own internal tones are,
 * reusing the same colored-mat pattern already used for the portrait
 * frames elsewhere on the site rather than inventing a new treatment.
 */
.footer-logo {
	display: inline-block;
	padding: var(--aml-space-2) var(--aml-space-3);
	border-radius: var(--aml-radius-sm);
	background-color: var(--aml-color-ivory);
}

.footer-logo-img {
	display: block;
	width: auto;
	height: auto;
	max-width: 180px;
	max-height: 64px;
}

/*
 * The client-confirmed transparent logo (see footer.php) needs no mat: it
 * sits directly on the sage footer, larger, aspect ratio preserved.
 */
.footer-logo--transparent {
	padding: 0;
	border-radius: 0;
	background-color: transparent;
}

.footer-logo--transparent .footer-logo-img {
	width: 200px;
	max-width: 100%;
	max-height: none;
}

@media (min-width: 992px) {
	.footer-logo--transparent .footer-logo-img {
		width: 240px;
	}
}

.footer-branding-link {
	display: inline-flex;
	align-items: center;
	min-height: var(--aml-tap-target);
	font-family: var(--aml-font-heading);
	font-weight: 700;
	font-size: var(--aml-text-lg);
	color: var(--aml-color-ink);
	text-decoration: none;
}

.footer-tagline {
	margin-top: var(--aml-space-2);
	margin-bottom: 0;
}

/* Short gold rule under each column heading for a steadier column rhythm. */
.footer-heading::after {
	content: '';
	display: block;
	width: 20px;
	height: 1px;
	margin-top: 0.75rem;
	background-color: var(--aml-color-gold);
}

.footer-heading {
	margin-bottom: 1.25rem;
	color: var(--aml-color-deep-green);
	font-family: var(--aml-font-body);
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

/* Each link is already a 44px-tall tap target, which spaces the list on
   its own — no extra margin between items. */
.footer-nav-menu li,
.footer-contact li {
	margin-bottom: 0;
}

.footer-nav-menu a,
.footer-contact a {
	display: inline-flex;
	align-items: center;
	gap: 0.625rem;
	min-height: var(--aml-tap-target);
	color: rgba(17, 17, 17, 0.8);
	text-decoration: none;
}

.footer-nav-menu a:hover,
.footer-contact a:hover {
	color: var(--aml-color-deep-green);
	text-decoration: underline;
}

.footer-contact-icon {
	display: inline-flex;
	flex-shrink: 0;
	color: var(--aml-color-deep-green);
}

.footer-legal {
	margin-top: var(--aml-space-5);
}

@media (min-width: 992px) {
	.footer-legal {
		margin-top: 4rem;
	}
}

.footer-legal-list li {
	margin-right: var(--aml-space-3);
}

.footer-legal-list a {
	font-size: var(--aml-text-sm);
}

.footer-copyright {
	margin-top: var(--aml-space-3);
	margin-bottom: 0;
	color: rgba(17, 17, 17, 0.7);
	font-size: var(--aml-text-sm);
}

/* Development credit: secondary to the copyright line; the link keeps a
   44px tap target without adding visual weight. */
.footer-credit {
	margin-bottom: 0;
	color: rgba(17, 17, 17, 0.6);
	font-size: 0.8125rem;
}

.footer-credit a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	color: inherit;
	text-decoration: underline;
	text-decoration-color: rgba(54, 89, 81, 0.35);
	text-underline-offset: 0.2em;
}

.footer-credit a:hover,
.footer-credit a:focus-visible {
	color: var(--aml-color-deep-green);
}

/* While the reserved legal-links list is empty, don't leave a phantom gap
   above the copyright line for it. */
.footer-legal-nav:has(.footer-legal-list:empty) + .footer-meta {
	margin-top: 0;
}

/* Attorney-advertising disclaimer: secondary legal copy — smaller and
   quieter than the footer columns (13px, ~5:1 contrast on sage) and
   left-aligned (long centered small print is hard to scan). One hairline
   above sets it apart; the line lives on this block, not the
   .footer-legal row, whose negative gutters make it wider. */
.footer-disclaimer {
	margin-bottom: var(--aml-space-4);
	padding-top: var(--aml-space-4);
	border-top: 1px solid rgba(54, 89, 81, 0.12);
	color: rgba(17, 17, 17, 0.62);
	font-size: 0.8125rem;
	line-height: 1.65;
	text-align: left;
	text-wrap: pretty;
}

.footer-disclaimer p {
	margin-bottom: var(--aml-space-2);
}

.footer-disclaimer p:last-child {
	margin-bottom: 0;
}

/* A run-in label, not a heading: only slightly firmer than the text. */
.footer-disclaimer strong {
	color: rgba(17, 17, 17, 0.72);
	font-weight: 500;
}

/*
 * Bottom row: copyright and development credit, stacked and centered on
 * phones, on one row (copyright left, credit right) from 768px.
 */
.footer-meta {
	display: flex;
	flex-direction: column;
	align-items: center;
	margin-top: var(--aml-space-3);
}

.footer-meta .footer-copyright {
	margin-top: 0;
}

@media (min-width: 768px) {
	.footer-meta {
		flex-direction: row;
		justify-content: space-between;
		gap: var(--aml-space-4);
		text-align: left;
	}
}

/* The address is two lines, so its icon sits with the first line. */
.footer-contact-item--address a {
	align-items: flex-start;
	padding-block: 0.5rem;
}

.footer-contact-item--address .footer-contact-icon {
	margin-top: 0.2em;
}

/* Screen-reader-only text (theme-level, so it never depends on another
   stylesheet loading). */
.aml-sr-only {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	margin: -1px !important;
	padding: 0 !important;
	overflow: hidden !important;
	clip: rect(0, 0, 0, 0) !important;
	white-space: nowrap !important;
	border: 0 !important;
}

@media (max-width: 575.98px) {
	.footer-contact li {
		margin-bottom: var(--aml-space-3);
	}

	.footer-copyright,
	.footer-legal-list a {
		font-size: var(--aml-text-base);
	}
}

/* -----------------------------------------------------------------------
 * Hero
 * --------------------------------------------------------------------- */
/*
 * 30ch (not the tighter widths used elsewhere on the page) is tuned
 * specifically to this heading's actual wording, so it wraps to
 * approximately two balanced lines at tablet/desktop widths instead of
 * three cramped ones. Below 768px the viewport itself is the binding
 * constraint, not this max-width, so mobile wrapping is unaffected.
 */
.aml-hero-heading {
	max-width: 30ch;
}

.aml-hero-copy {
	max-width: 58ch;
	font-size: var(--aml-text-lg);
}

.aml-hero-actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--aml-space-3);
	margin-top: var(--aml-space-4);
}

/*
 * Homepage hero — open composition, no card/panel around the content.
 *
 * Measured in the real font (Libre Baskerville Bold): "Immigration
 * Court &" is 11.31em, "Removal Defense" 9.24em, "Representation"
 * 8.03em. Below 1400px, hero.php holds "Removal Defense" together
 * (.aml-nowrap) and the heading is capped at 16em, so wherever the
 * column is at least 11.31em wide it breaks by meaning: "Immigration
 * Court &" / "Removal Defense" / "Representation". The font sizes below
 * keep that true from 576px up. Phones also hold "Immigration Court"
 * together and size the H1 to its own column (container query units,
 * slightly tighter tracking; see the phone block below), so phones get three
 * lines, "Immigration Court" / "& Removal Defense" / "Representation",
 * instead of four with "Court &" stranded on line two. From 1400px it's
 * two lines instead (see the 1400px block).
 * Greedy wrapping (not text-wrap: balance) is deliberate — from 576px,
 * balancing would move the "&" to the start of line two.
 *
 * H1 sizes stay above the section H2s: 46–52px at 992–1399px and 50px
 * from 1400px (H2s are 44px), 45–48px on tablets (H2s 34px), 30–38px on
 * phones (H2s 28px).
 *
 * Width follows the header container: 1140px like every other section
 * up to 1399px, 1320px from 1400px (the header's own width there).
 */
.aml-hero {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	padding-block: 2rem 3rem;
}

@media (min-width: 992px) {
	.aml-hero {
		padding-block: 4rem 5rem;
	}
}

@media (min-width: 1400px) {
	.aml-hero .aml-container {
		max-width: 1320px;
	}
}

.aml-hero .aml-hero-heading {
	max-width: 16em;
	margin-bottom: var(--aml-space-4);
}

/*
 * Phones: the H1 never drops below 30px (section H2s are 28px). Slightly
 * tighter tracking narrows the widest line, "& Removal Defense", to
 * 9.95em, and the size is 1/10.05 of the column so it always fits.
 * Below 360px the hero also takes 12px side padding (not 24px) and a
 * touch more tracking (widest line 9.76em, size 1/9.85 of the column,
 * capped at 31px so the size never steps down at 360px), which keeps
 * 30px at 320px. The vw values are the fallback where
 * container query units are missing; .aml-hero clips overflow either way.
 */
@media (max-width: 575.98px) {
	.aml-hero .aml-hero-text {
		container-type: inline-size;
	}

	.aml-hero .aml-hero-heading {
		font-size: clamp(1.875rem, calc((100vw - 3rem) / 10.05), 2.375rem);
		letter-spacing: -0.02em;
		word-spacing: -0.05em;
	}

	.aml-hero .aml-nowrap-phone {
		white-space: nowrap;
	}
}

@media (max-width: 359.98px) {
	.aml-hero .aml-container {
		padding-inline: 0.75rem;
	}

	.aml-hero .aml-hero-heading {
		font-size: clamp(1.875rem, calc((100vw - 1.5rem) / 9.85), 1.9375rem);
		letter-spacing: -0.03em;
		word-spacing: -0.06em;
	}
}

@supports (font-size: 1cqi) {
	@media (max-width: 575.98px) {
		.aml-hero .aml-hero-heading {
			font-size: clamp(1.875rem, calc(100cqi / 10.05), 2.375rem);
		}
	}

	@media (max-width: 359.98px) {
		.aml-hero .aml-hero-heading {
			font-size: clamp(1.875rem, calc(100cqi / 9.85), 1.9375rem);
		}
	}
}

@media (min-width: 576px) and (max-width: 767.98px) {
	.aml-hero .aml-hero-heading {
		font-size: clamp(2.75rem, calc(8.58vw - 4.1px), 3rem);
	}
}

@media (min-width: 992px) {
	.aml-hero .aml-hero-heading {
		font-size: clamp(2.875rem, calc(2.88vw + 17.4px), 3.25rem);
	}
}

/*
 * 1400px+: two balanced lines, "Immigration Court & Removal" / "Defense
 * Representation". Line one is 16.25em, so a 50px H1 needs ~813px of
 * text column; a 65/35 split with the standard gutter gives 834px while
 * the portrait stays ~438px. The no-wrap group is released here so the
 * break can fall between "Removal" and "Defense".
 */
@media (min-width: 1400px) {
	.aml-hero .row {
		--bs-gutter-x: 1.5rem;
	}

	.aml-hero .aml-hero-text {
		width: 65%;
	}

	.aml-hero .aml-hero-media {
		width: 35%;
	}

	.aml-hero .aml-hero-heading {
		max-width: none;
		font-size: 3.125rem;
	}

	.aml-hero .aml-nowrap {
		white-space: normal;
	}
}

.aml-nowrap {
	white-space: nowrap;
}

/*
 * Portrait: larger, no mat/frame. Its edges are feathered with a CSS
 * mask (all four sides, intersected) so the photo's own background fades
 * into the page instead of ending in a hard box. Where mask-composite
 * isn't supported the two masks combine instead — the edges are still
 * softened, just less at the corners.
 */
.aml-hero-portrait {
	position: relative;
	max-width: 340px;
	margin-inline: auto;
}

@media (min-width: 992px) {
	.aml-hero-portrait {
		max-width: 520px;
		margin-inline-end: 0;
	}
}

.aml-hero-portrait img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 5;
	object-fit: cover;
	object-position: 50% 20%;
	-webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 6%, #000 78%, transparent 100%), linear-gradient(to right, transparent 0, #000 10%, #000 90%, transparent 100%);
	-webkit-mask-composite: source-in;
	mask-image: linear-gradient(to bottom, transparent 0, #000 6%, #000 78%, transparent 100%), linear-gradient(to right, transparent 0, #000 10%, #000 90%, transparent 100%);
	mask-composite: intersect;
}

/*
 * Hero decoration (all decorative pseudo-elements; isolation on .aml-hero
 * keeps them above the page background and below the content): a thin
 * gold ring off the portrait's upper corner, a faint outline circle
 * behind the portrait, and a soft dot field behind the heading area.
 */
.aml-hero-portrait::before,
.aml-hero-portrait::after {
	content: '';
	position: absolute;
	z-index: -1;
	border-radius: 50%;
	pointer-events: none;
}

.aml-hero-portrait::before {
	top: 4%;
	left: 50%;
	width: 108%;
	aspect-ratio: 1;
	transform: translateX(-50%);
	border: 1px solid rgba(54, 89, 81, 0.12);
}

.aml-hero-portrait::after {
	top: 6%;
	right: -2%;
	width: 22%;
	aspect-ratio: 1;
	border: 1.5px solid rgba(202, 163, 84, 0.55);
}

/*
 * Homepage hero, layered (hero.php): a decorative illustration behind a
 * transparent cutout of Akela. The cutout is the only in-flow element —
 * its width/height attributes reserve the space before it loads — and
 * the illustration is positioned behind it, so neither can shift layout.
 * The illustration already frames her, so the outline circles above are
 * dropped here, and the cutout needs no edge feathering; only its flat
 * bottom edge fades into the page. The About hero keeps the feathered
 * photo treatment above.
 */
.aml-hero-portrait--layered {
	isolation: isolate;
}

.aml-hero-portrait--layered::before,
.aml-hero-portrait--layered::after {
	content: none;
}

.aml-hero-portrait--layered img {
	aspect-ratio: auto;
	object-fit: contain;
	-webkit-mask-image: none;
	mask-image: none;
}

.aml-hero-portrait--layered .aml-hero-portrait-photo {
	position: relative;
	-webkit-mask-image: linear-gradient(to bottom, #000 88%, transparent 100%);
	mask-image: linear-gradient(to bottom, #000 88%, transparent 100%);
}

.aml-hero-portrait--layered .aml-hero-portrait-bg {
	position: absolute;
	z-index: -1;
	right: 0;
	bottom: 2%;
	left: 0;
	width: 90%;
	margin-inline: auto;
	transform-origin: 50% 100%;
	pointer-events: none;
}

/*
 * Homepage hero entrance, once per load — one composition in two strands
 * that start together and finish by ~750ms:
 *   text:     eyebrow 0 → H1 60 → copy 130 → CTAs 200 / 270ms
 *   portrait: illustration 0 (fade + 2% scale) → Akela 150ms (rises 16px)
 * Text starts at 85–100% opacity and moves 6–8px, so it is legible from
 * the first paint; the H1 never fades at all (transform only). Only
 * transform/opacity, no will-change. The text uses a backwards fill, so
 * nothing stays applied after the entrance. Reduced-motion visitors get
 * the final state immediately. main.js restarts it all on a
 * back/forward-cache restore.
 */
@media (prefers-reduced-motion: no-preference) {
	.aml-hero .aml-hero-text > .section-eyebrow {
		animation: aml-hero-eyebrow-in 420ms ease-out backwards;
	}

	.aml-hero .aml-hero-heading {
		animation: aml-hero-heading-in 500ms ease-out 60ms backwards;
	}

	.aml-hero .aml-hero-copy {
		animation: aml-hero-text-in 500ms ease-out 130ms backwards;
	}

	.aml-hero .aml-hero-actions > .btn {
		animation: aml-hero-text-in 450ms ease-out 200ms backwards;
	}

	.aml-hero .aml-hero-actions > .btn + .btn {
		animation-delay: 270ms;
	}

	.aml-hero-portrait--layered .aml-hero-portrait-bg {
		animation: aml-hero-bg-in 650ms ease-out both;
	}

	.aml-hero-portrait--layered .aml-hero-portrait-photo {
		animation: aml-hero-photo-in 600ms ease-out 150ms both;
	}
}

@keyframes aml-hero-eyebrow-in {
	from {
		opacity: 0.85;
		transform: translateY(6px);
	}
}

/* Movement only: the H1 stays fully opaque throughout. */
@keyframes aml-hero-heading-in {
	from {
		transform: translateY(6px);
	}
}

@keyframes aml-hero-text-in {
	from {
		opacity: 0.9;
		transform: translateY(8px);
	}
}

@keyframes aml-hero-bg-in {
	from {
		opacity: 0;
		transform: scale(0.98);
	}
}

@keyframes aml-hero-photo-in {
	from {
		opacity: 0;
		transform: translateY(16px);
	}
}

.aml-hero .aml-container {
	position: relative;
}

.aml-hero .aml-container::before {
	content: '';
	position: absolute;
	z-index: -1;
	top: -1rem;
	left: 0;
	width: 200px;
	height: 150px;
	background-image: radial-gradient(rgba(54, 89, 81, 0.2) 1.2px, transparent 1.6px);
	background-size: 16px 16px;
	-webkit-mask-image: radial-gradient(closest-side, #000, transparent);
	mask-image: radial-gradient(closest-side, #000, transparent);
	pointer-events: none;
}

/*
 * Mobile: shrink the H1 so it wraps comfortably at phone widths instead
 * of a handful of words per line at the desktop-sized 3rem.
 */
@media (max-width: 767.98px) {
	.aml-hero-heading {
		font-size: 2.25rem;
	}
}

@media (max-width: 575.98px) {
	.aml-hero-copy {
		line-height: 1.65;
	}
}

/* -----------------------------------------------------------------------
 * Reassurance
 * --------------------------------------------------------------------- */
.aml-reassurance-copy {
	max-width: 62ch;
	margin-inline: auto;
}

@media (max-width: 575.98px) {
	.aml-reassurance-copy {
		line-height: 1.65;
	}
}

/*
 * Text beside an image — currently the TEMPORARY layout placeholder
 * (aml_get_placeholder_image()). Below 992px it stacks, text first, with
 * the image centered and capped (34rem landscape, 26rem for --short
 * sections, 22rem portrait) so a tablet doesn't get a page-wide photo. From 992px the text takes ~7/12
 * and a landscape
 * image ~5/12; a portrait image (--portrait) gets a narrower fixed 20rem
 * column so its height stays close to the text's. The image is on the
 * right by default or on the left with --media-left (the text still reads
 * first). Text in the split is left-aligned, including copy that is
 * centered elsewhere.
 */
.aml-media-split {
	display: grid;
	gap: var(--aml-space-4);
	align-items: center;
}

.aml-media-split-text > :last-child {
	margin-bottom: 0;
}

/* Consecutive image-and-text rows in one section (Asylum). */
.aml-media-split + .aml-media-split {
	margin-top: var(--aml-space-5);
}

.aml-media-split-text .aml-reassurance-copy,
.aml-media-split .aml-media-split-text > h2 {
	margin-inline: 0;
}

.aml-media-split-media {
	justify-self: center;
	width: 100%;
	max-width: 34rem;
}

.aml-media-split--portrait .aml-media-split-media {
	max-width: 22rem;
}

.aml-media-split--short .aml-media-split-media {
	max-width: 26rem;
}

@media (min-width: 992px) {
	.aml-media-split {
		grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
		gap: var(--aml-space-5);
	}

	.aml-media-split--media-left {
		grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
	}

	.aml-media-split--portrait {
		grid-template-columns: minmax(0, 1fr) 20rem;
	}

	.aml-media-split--portrait.aml-media-split--media-left {
		grid-template-columns: 20rem minmax(0, 1fr);
	}

	/* One- or two-sentence sections: a smaller fixed image column, so the
	   image supports the text rather than setting the section's height. */
	.aml-media-split--short {
		grid-template-columns: minmax(0, 1fr) 22rem;
	}

	.aml-media-split--short.aml-media-split--media-left {
		grid-template-columns: 22rem minmax(0, 1fr);
	}

	.aml-media-split .aml-media-split-media {
		max-width: none;
	}

	.aml-media-split--media-left .aml-media-split-media {
		order: -1;
	}
}

/* Section photos (aml_get_section_image()) share the placeholders' frame. */
.aml-placeholder-media,
.aml-media-frame {
	overflow: hidden;
	aspect-ratio: 4 / 3;
	border-radius: var(--aml-radius-md);
	background-color: var(--aml-color-sage);
	box-shadow: var(--aml-shadow-sm);
}

.aml-placeholder-media--portrait {
	aspect-ratio: 4 / 5;
}

.aml-placeholder-img,
.aml-media-frame img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/*
 * Text-led feature sections (Family-Based matters, the U visa and T visa
 * sections): the heading and lead at a reading measure, then paired
 * topics side by side from 768px as quiet surface cards in the site's
 * .card style. Phones keep plain stacked blocks (each still opens with
 * its ruled heading), so long text isn't boxed into tall narrow cards.
 */
.aml-feature {
	max-width: 60rem;
	margin-inline: auto;
}

.aml-feature > h2,
.aml-feature-lead {
	max-width: 46rem;
}

.aml-feature-lead {
	margin-bottom: var(--aml-space-4);
}

/* Two feature blocks in one section (Humanitarian VAWA). */
.aml-feature + .aml-feature {
	margin-top: var(--aml-space-5);
}

.aml-topic-grid {
	display: grid;
	gap: var(--aml-space-4);
	margin-bottom: var(--aml-space-4);
}

.aml-feature > :last-child,
.aml-topic > :last-child,
.aml-topic > :last-child > li:last-child {
	margin-bottom: 0;
}

@media (min-width: 768px) {
	.aml-topic-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.aml-topic {
		padding: var(--aml-space-4);
		border: 1px solid rgba(17, 17, 17, 0.08);
		border-radius: var(--aml-radius-md);
		background-color: var(--aml-color-surface);
	}

	.aml-topic .aml-attorney-group-heading {
		padding-top: 0;
		border-top: 0;
	}
}

@media (min-width: 992px) {
	.aml-topic {
		padding: 2rem;
	}
}

/*
 * Homepage reassurance band: more vertical room, a narrower measure, and
 * a very soft sage-to-ivory fade (palette colors only). Browsers without
 * color-mix() drop the gradient and keep the plain sage background.
 */
.aml-home-reassurance {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	padding-block: 3.5rem;
	background-color: var(--aml-color-sage);
	background-image: linear-gradient(180deg, var(--aml-color-sage) 0%, color-mix(in srgb, var(--aml-color-sage) 55%, var(--aml-color-ivory)) 100%);
}

@media (min-width: 992px) {
	.aml-home-reassurance {
		padding-block: 6rem;
	}
}

/*
 * Heading grouping by width, not a forced break: measured in the real
 * font, "Immigration Is Personal" is 12.80em and "Immigration Is
 * Personal to" 14.11em, so a 13.4em cap always breaks after "Personal"
 * ("Immigration Is Personal" / "to Akela"). On phones the heading is
 * sized so 12.8em fits the column.
 */
.aml-home-reassurance h2 {
	max-width: 13.4em;
	margin-inline: auto;
	text-wrap: wrap;
}

@media (max-width: 575.98px) {
	.aml-home-reassurance h2 {
		font-size: clamp(1.375rem, calc(7.63vw - 3.66px), 1.625rem);
	}
}

/* The last paragraph's bottom margin is already removed by
   .aml-media-split-text > :last-child, so paragraphs keep their gap. */
.aml-home-reassurance .aml-reassurance-copy {
	max-width: 56ch;
	font-size: 1.125rem;
	line-height: 1.75;
}

/* Two soft arcs at the band's edges. Decorative only. */
.aml-home-reassurance::before,
.aml-home-reassurance::after {
	content: '';
	position: absolute;
	z-index: -1;
	border-radius: 50%;
	pointer-events: none;
}

.aml-home-reassurance::before {
	top: 50%;
	left: -220px;
	width: 440px;
	height: 440px;
	transform: translateY(-50%);
	border: 1px solid rgba(54, 89, 81, 0.14);
}

.aml-home-reassurance::after {
	top: -120px;
	right: -110px;
	width: 300px;
	height: 300px;
	border: 1px solid rgba(202, 163, 84, 0.3);
}

/* -----------------------------------------------------------------------
 * About page — hero headshot and image-free editorial sections
 * --------------------------------------------------------------------- */

/* The About headshot keeps its natural proportions (the homepage hero
   portrait is cropped to 4:5); the soft edge mask still applies. */
.aml-hero-portrait--natural img {
	aspect-ratio: auto;
	object-fit: contain;
}

/*
 * Text beside a sage panel: About "Courtroom Advocacy" (about-background.php)
 * and Bond "Preliminary Screenings" (bond-screenings.php). Below 992px the
 * text keeps the 672px measure and the blocks stack in reading order. From
 * 992px the text sits on the left and the panel on the right.
 */
.aml-about-practice {
	max-width: calc(var(--aml-container-content) - 2 * var(--aml-space-4));
	margin-inline: auto;
}

/* The left column's last margin would pull it off the grid's vertical
   centre (on About it holds only the heading). */
.aml-about-practice-intro > :last-child {
	margin-bottom: 0;
}

.aml-about-practice-rest {
	margin-top: var(--aml-space-4);
	padding: var(--aml-space-4) 1.25rem;
	border-radius: var(--aml-radius-md);
	background-color: var(--aml-color-sage);
}

/* A group label opening the sage panel (Bond Preliminary Screenings)
   drops the divider line it carries elsewhere. */
.aml-about-practice-rest .aml-attorney-group-heading {
	padding-top: 0;
	border-top: 0;
}

.aml-about-practice-rest p:last-child {
	margin-bottom: 0;
}

@media (min-width: 992px) {
	.aml-about-practice {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		column-gap: var(--aml-space-5);
		align-items: center;
		max-width: none;
	}

	.aml-about-practice-rest {
		margin-top: 0;
		padding: 2rem;
	}
}

/* -----------------------------------------------------------------------
 * About page — credentials, concerns and practice list grouping
 * --------------------------------------------------------------------- */

/* Education & Admissions: each group label opens its own white panel, so
   it drops the divider line it carries elsewhere. */
.aml-about-credentials .aml-attorney-group-heading {
	padding-top: 0;
	border-top: 0;
}

/* Stacked on phones, the panels use a slightly tighter inset. */
@media (max-width: 767.98px) {
	.aml-about-credentials .card-body {
		padding: 1.25rem;
	}
}

/* The Complete Picture: slightly tighter rows than the differentiators
   grid, and the strategy sentence sits apart from the list in a
   restrained emphasis block (sage surface, thin gold rule). */
.aml-about-concerns {
	margin-bottom: 0;
}

.aml-about-concerns .aml-differentiator {
	padding-block: calc(0.625rem + var(--aml-badge-offset)) 0.625rem;
}

.aml-about-picture-summary {
	margin-top: var(--aml-space-5);
	margin-bottom: 0;
	padding: 1.25rem 1.5rem;
	border-left: 3px solid var(--aml-color-gold);
	border-radius: 0 var(--aml-radius-md) var(--aml-radius-md) 0;
	background-color: var(--aml-color-sage);
}

/*
 * Practice Overview: hairline-separated rows; from 768px two columns of
 * six inside a white panel, filled column by column so the list keeps
 * its reading order. On phones the panel's frame drops away (the rows and
 * dividers remain) so the narrow column isn't squeezed further.
 */
/* Each row is a top-aligned flex row: the check sits in flow and is
   offset by half the difference between the text's line height (1.55em)
   and the icon (1.05rem), so it centers on the FIRST line of the item
   however many lines the text wraps to. The doubled class outranks the
   shared .aml-attorney-facts li / li::before rules defined later in this
   file (equal specificity would let those win and pin the check to the
   top of the padded row, above the text). */
.aml-attorney-facts.aml-about-practice-list li {
	display: flex;
	align-items: flex-start;
	gap: 0.7rem;
	margin-bottom: 0;
	padding-block: 0.5rem;
	padding-left: 0;
	border-bottom: 1px solid rgba(54, 89, 81, 0.12);
}

.aml-attorney-facts.aml-about-practice-list li::before {
	position: static;
	flex-shrink: 0;
	margin-top: calc((1.55em - 1.05rem) / 2);
}

.aml-attorney-facts.aml-about-practice-list li > span {
	flex: 1;
	min-width: 0;
}

@media (max-width: 767.98px) {
	.aml-about-practice-card {
		border: 0;
		background-color: transparent;
	}

	.aml-about-practice-card .card-body {
		padding: 0;
	}
}

.aml-about-practice-list li:last-child {
	border-bottom: 0;
}

@media (min-width: 768px) {
	.aml-about-practice-list {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		grid-template-rows: repeat(6, auto);
		grid-auto-flow: column;
		column-gap: var(--aml-space-5);
	}

	.aml-about-practice-list li:nth-child(6) {
		border-bottom: 0;
	}
}

/* -----------------------------------------------------------------------
 * Portrait frame (Meet Akela section and other pages; the homepage hero
 * uses the open .aml-hero-portrait treatment instead)
 *
 * A colored "mat" (sage on an ivory panel, ivory on a sage panel) frames
 * the portrait so it reads as an intentional element, not a loose image.
 * --------------------------------------------------------------------- */
.aml-portrait-frame {
	max-width: 420px;
	margin-inline: auto;
	padding: var(--aml-space-3);
	border-radius: var(--aml-radius-lg);
	box-shadow: var(--aml-shadow-sm);
}

.aml-portrait-frame--sage {
	background-color: var(--aml-color-sage);
}

.aml-portrait-frame--ivory {
	background-color: var(--aml-color-ivory);
}

.aml-portrait-frame-inner {
	aspect-ratio: 4 / 5;
	overflow: hidden;
	border-radius: var(--aml-radius-md);
}

.aml-portrait-frame-inner img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* -----------------------------------------------------------------------
 * Clickable cards (.aml-practice-card)
 *
 * Used for the homepage practice areas and the Contact/Consultation/FAQ
 * option cards. Surface, border, radius and padding come from .card; this
 * adds the icon badge, the bottom-pinned link, and the hover state (the
 * only cards with one, since they're the only clickable ones).
 * --------------------------------------------------------------------- */
.aml-practice-card {
	display: flex;
	flex-direction: column;
	height: 100%;
	color: var(--aml-color-ink);
	text-decoration: none;
	transition: transform 200ms ease, box-shadow 200ms ease, border-color 200ms ease;
}

/*
 * The card body must itself be a flex column (and grow to fill the
 * card) so that .aml-practice-link's margin-top: auto reliably pins it
 * to the bottom regardless of title length — keeping icon placement and
 * card content aligned consistently across a row of cards.
 */
.aml-practice-card .card-body {
	display: flex;
	flex-direction: column;
	flex-grow: 1;
}

.aml-practice-card p {
	margin-bottom: var(--aml-space-4);
	font-size: 0.975rem;
}

.aml-practice-icon {
	display: inline-flex;
	flex-shrink: 0;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	margin-bottom: 1.25rem;
	border-radius: var(--aml-radius-md);
	background-color: var(--aml-color-deep-green);
	color: #ffffff;
}

.aml-practice-icon svg {
	display: block;
	width: 24px;
	height: 24px;
}

/*
 * Icon tiles (.aml-practice-icon) are solid deep green with a white icon,
 * the same in every state: a card's hover and focus change the card (border, lift,
 * underline), never the badge, so the icon can't drop in contrast.
 *
 * Icon weight: the line icons (inc/icons.php) are hairline-thin at these
 * sizes, so badge and inline icons get a matching stroke in their own
 * colour — the same glyph, just heavier. Listed by component on purpose:
 * footer icons, the small link arrows and the inline check marks in text
 * lists are not touched.
 */
.aml-practice-icon svg,
.aml-value-icon svg,
.aml-consultation-format-icon svg {
	overflow: visible;
	stroke: currentColor;
	stroke-width: 0.4;
	stroke-linejoin: round;
}

.aml-practice-link {
	display: inline-flex;
	align-items: center;
	gap: var(--aml-space-1);
	margin-top: auto;
	padding-top: var(--aml-space-2);
	color: var(--aml-color-deep-green);
	font-size: var(--aml-text-sm);
	font-weight: 600;
}

.aml-practice-link-arrow {
	display: inline-flex;
	transition: transform var(--aml-transition-fast);
}

/*
 * The same style used as a standalone text link ("Learn more about…",
 * "See Humanitarian Relief"): a full 44px tap target, and — when it
 * follows a sentence inside a paragraph — its own centered line rather
 * than a tall inline box stretching that line.
 */
a.aml-practice-link {
	min-height: var(--aml-tap-target);
	padding-top: 0;
}

.aml-reassurance-copy a.aml-practice-link {
	display: flex;
	width: fit-content;
	margin-inline: auto;
}

/*
 * Plain :hover/:focus only changes the border (so a tap on a touch screen
 * doesn't leave a card stuck "lifted"); the lift and shadow are re-applied
 * only where a real hover pointer exists.
 */
.aml-practice-card:hover,
.aml-practice-card:focus-visible {
	color: var(--aml-color-ink);
	border-color: rgba(202, 163, 84, 0.6);
}

.aml-practice-card:hover .aml-practice-link,
.aml-practice-card:focus-visible .aml-practice-link {
	text-decoration: underline;
}

.aml-practice-card:focus-visible .aml-practice-link-arrow {
	transform: translateX(3px);
}

@media (hover: hover) {
	.aml-practice-card:hover {
		transform: translateY(-3px);
		box-shadow: 0 12px 28px rgba(17, 17, 17, 0.07);
	}

	.aml-practice-card:hover .aml-practice-link-arrow {
		transform: translateX(3px);
	}
}

@media (prefers-reduced-motion: reduce) {
	.aml-practice-card,
	.aml-practice-link-arrow {
		transition: none;
	}

	.aml-practice-card:hover,
	.aml-practice-card:hover .aml-practice-link-arrow,
	.aml-practice-card:focus-visible .aml-practice-link-arrow {
		transform: none;
	}
}

/* -----------------------------------------------------------------------
 * Homepage Practice Areas grid
 *
 * A CSS grid instead of Bootstrap columns so all cards share one row
 * height (grid-auto-rows: 1fr) and an incomplete last row is placed on
 * purpose: on a 6-track desktop grid each card spans 2 tracks, and the
 * first card of a final pair starts on track 2 so the pair sits centered
 * under the three above. Tablet uses the same idea on 4 tracks. The
 * current six cards fill both layouts evenly.
 * --------------------------------------------------------------------- */
.aml-practice-grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--aml-space-4);
}

@media (min-width: 576px) {
	.aml-practice-grid {
		grid-template-columns: repeat(4, minmax(0, 1fr));
		grid-auto-rows: 1fr;
	}

	.aml-practice-grid-item {
		grid-column: span 2;
	}

	.aml-practice-grid-item:last-child:nth-child(odd) {
		grid-column: 2 / span 2;
	}
}

@media (min-width: 992px) {
	.aml-practice-grid {
		grid-template-columns: repeat(6, minmax(0, 1fr));
	}

	.aml-practice-grid-item:last-child:nth-child(odd) {
		grid-column: span 2;
	}

	.aml-practice-grid-item:nth-child(3n + 1):nth-last-child(2) {
		grid-column: 2 / span 2;
	}

	.aml-practice-grid-item:nth-child(3n + 1):last-child {
		grid-column: 3 / span 2;
	}
}

/*
 * Homepage section rhythm: more room above/below every standard section
 * (Practice Areas, Meet Akela, Getting Started, Why Work With Akela,
 * consultation CTA) than the shared .section--tight gives other pages,
 * stepping down on phones so mobile doesn't feel over-spaced.
 */
.aml-home .section--tight {
	padding-block: 2rem;
}

@media (min-width: 576px) {
	.aml-home .section--tight {
		padding-block: 3.5rem;
	}
}

@media (min-width: 992px) {
	.aml-home .section--tight {
		padding-block: 4rem;
	}

	.aml-home-practice .section-heading {
		margin-bottom: 3.5rem;
	}
}

/* Homepage cards have no description, so the title keeps the gap the
   description used to leave above the bottom-pinned Learn More link. */
.aml-home-practice .aml-practice-card .card-title {
	margin-bottom: var(--aml-space-4);
}

/*
 * Practice Areas decoration on the open (page-background) section: a
 * soft dot field top-right and a faint arc bottom-left. Decorative only.
 */
.aml-home-practice {
	position: relative;
	isolation: isolate;
	overflow: hidden;
}

.aml-home-practice::before,
.aml-home-practice::after {
	content: '';
	position: absolute;
	z-index: -1;
	pointer-events: none;
}

.aml-home-practice::before {
	top: 1.5rem;
	right: 4%;
	width: 220px;
	height: 160px;
	background-image: radial-gradient(rgba(54, 89, 81, 0.18) 1.2px, transparent 1.6px);
	background-size: 16px 16px;
	-webkit-mask-image: radial-gradient(closest-side, #000, transparent);
	mask-image: radial-gradient(closest-side, #000, transparent);
}

.aml-home-practice::after {
	bottom: -200px;
	left: -160px;
	width: 420px;
	height: 420px;
	border: 1px solid rgba(54, 89, 81, 0.1);
	border-radius: 50%;
}

/* -----------------------------------------------------------------------
 * Attorney intro + grouped credentials
 * --------------------------------------------------------------------- */
.aml-attorney-intro {
	font-size: var(--aml-text-lg);
	margin-bottom: var(--aml-space-4);
}

.aml-attorney-credentials {
	margin-bottom: var(--aml-space-4);
}

/*
 * Subgroup label (e.g. "Admissions & Education" / "Approach"), separated
 * by a hairline rule on the heading itself rather than a boxed card — on
 * the heading, not the column, so side-by-side groups keep visibly
 * separate rules across the gutter.
 */
.aml-attorney-group-heading {
	margin-bottom: var(--aml-space-3);
	padding-top: var(--aml-space-3);
	border-top: 1px solid rgba(54, 89, 81, 0.2);
	color: var(--aml-color-deep-green);
	font-family: var(--aml-font-body);
	font-size: var(--aml-text-sm);
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

/*
 * Fact / service / preparation lists: a small deep-green check mark per
 * item. The mark is the Bootstrap Icons "check2" path (same as
 * inc/icons.php) embedded inline as a CSS mask — no icon package, no
 * extra request, no markup change.
 */
.aml-attorney-facts li {
	position: relative;
	margin-bottom: 0.625rem;
	padding-left: 1.75rem;
	line-height: 1.55;
}

.aml-attorney-facts li::before {
	content: '';
	position: absolute;
	top: calc((1.55em - 1.05rem) / 2);
	left: 0;
	width: 1.05rem;
	height: 1.05rem;
	background-color: var(--aml-color-deep-green);
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' stroke='%23000' stroke-width='.6' stroke-linejoin='round'%3E%3Cpath d='M13.854 3.646a.5.5 0 0 1 0 .708l-7 7a.5.5 0 0 1-.708 0l-3.5-3.5a.5.5 0 1 1 .708-.708L6.5 10.293l6.646-6.647a.5.5 0 0 1 .708 0'/%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 16 16' stroke='%23000' stroke-width='.6' stroke-linejoin='round'%3E%3Cpath d='M13.854 3.646a.5.5 0 0 1 0 .708l-7 7a.5.5 0 0 1-.708 0l-3.5-3.5a.5.5 0 1 1 .708-.708L6.5 10.293l6.646-6.647a.5.5 0 0 1 .708 0'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* Homepage "Meet Akela": a little more editorial spacing. */
.aml-home-attorney h2 {
	margin-bottom: var(--aml-space-4);
}

/* Short gold rule above the heading — decoration only, no label text. */
.aml-home-attorney h2::before {
	content: '';
	display: block;
	width: 28px;
	height: 1px;
	margin-bottom: var(--aml-space-3);
	background-color: var(--aml-color-gold);
}

.aml-home-attorney .aml-attorney-intro {
	margin-bottom: 2rem;
}

.aml-home-attorney .aml-attorney-credentials {
	margin-bottom: 2rem;
}

/*
 * A single <ul> that reads as one continuous list on mobile (default
 * block flow) and splits into two CSS columns at ≥576px — used instead
 * of two separate <ul>s in two grid columns, which put a Bootstrap row
 * gap between the lists that, once stacked on mobile, looked like a
 * break in the middle of one list.
 */
.aml-two-col-list li {
	break-inside: avoid;
}

@media (min-width: 576px) {
	.aml-two-col-list {
		column-count: 2;
		column-gap: var(--aml-space-5);
	}
}

/* -----------------------------------------------------------------------
 * Getting started steps
 * --------------------------------------------------------------------- */
.aml-step {
	position: relative;
	z-index: 1;
	text-align: center;
}

/*
 * Shared by the homepage and the practice-area pages (the section is
 * always on the page background). The box-shadow ring in the page color
 * opens a small gap between each badge and the connector line behind it.
 */
.aml-step-number {
	position: relative;
	z-index: 1;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 3.5rem;
	height: 3.5rem;
	margin-bottom: var(--aml-space-4);
	border: 1px solid rgba(202, 163, 84, 0.6);
	border-radius: 50%;
	background-color: var(--aml-color-sage);
	box-shadow: 0 0 0 8px var(--aml-color-ivory);
	color: var(--aml-color-deep-green);
	font-family: var(--aml-font-heading);
	font-size: 1.25rem;
	font-weight: 700;
}

.aml-step h3 {
	margin-bottom: var(--aml-space-2);
	font-size: 1.25rem;
}

.aml-step p {
	max-width: 30ch;
	margin-inline: auto;
	color: rgba(17, 17, 17, 0.72);
}

/*
 * Subtle static connector between the three step circles, from tablet up
 * (phones stack the steps vertically, where a horizontal line wouldn't
 * apply). Purely decorative: a background ::before with no content, so
 * it's naturally excluded from the accessibility tree.
 */
@media (max-width: 575.98px) {
	.aml-steps-row {
		--bs-gutter-y: 2rem;
	}
}

@media (min-width: 768px) {
	.aml-steps-row {
		position: relative;
	}

	.aml-steps-row::before {
		content: '';
		position: absolute;
		top: 1.75rem;
		left: calc(100% / 6);
		right: calc(100% / 6);
		height: 1px;
		background-color: rgba(54, 89, 81, 0.2);
		z-index: 0;
	}
}

/* Homepage-only "Book a Consultation" button under the steps. */
.aml-steps-cta {
	margin-top: 2.5rem;
}

@media (min-width: 768px) {
	.aml-steps-cta {
		margin-top: 3.5rem;
	}
}

/* Faint dot field and arc behind the homepage Getting Started section. */
.aml-home .aml-getting-started {
	position: relative;
	isolation: isolate;
	overflow: hidden;
}

.aml-home .aml-getting-started::before,
.aml-home .aml-getting-started::after {
	content: '';
	position: absolute;
	z-index: -1;
	pointer-events: none;
}

.aml-home .aml-getting-started::before {
	bottom: 1.5rem;
	left: 4%;
	width: 200px;
	height: 150px;
	background-image: radial-gradient(rgba(54, 89, 81, 0.16) 1.2px, transparent 1.6px);
	background-size: 16px 16px;
	-webkit-mask-image: radial-gradient(closest-side, #000, transparent);
	mask-image: radial-gradient(closest-side, #000, transparent);
}

.aml-home .aml-getting-started::after {
	top: -180px;
	right: -140px;
	width: 380px;
	height: 380px;
	border: 1px solid rgba(202, 163, 84, 0.25);
	border-radius: 50%;
}

/* -----------------------------------------------------------------------
 * Homepage "Why Work With Akela" value grid
 *
 * Deliberately quieter than the Practice Areas cards: no boxes, just a
 * small check badge, the approved text, and a hairline rule under each
 * item. 1 / 2 / 3 columns at phone / tablet / desktop.
 * --------------------------------------------------------------------- */
.aml-value-grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	column-gap: var(--aml-space-5);
	margin: 0;
	padding: 0;
}

@media (min-width: 576px) {
	.aml-value-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 992px) {
	.aml-value-grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

/* First-line badge alignment, same technique as .aml-differentiator. */
.aml-value {
	--aml-badge-offset: calc((2rem - 1.4em) / 2);
	display: flex;
	align-items: flex-start;
	gap: var(--aml-space-3);
	padding-block: calc(1.125rem + var(--aml-badge-offset)) 1.125rem;
	border-bottom: 1px solid rgba(54, 89, 81, 0.15);
	font-weight: 600;
	line-height: 1.4;
}

.aml-value-icon {
	display: inline-flex;
	flex-shrink: 0;
	align-items: center;
	justify-content: center;
	width: 2rem;
	height: 2rem;
	margin-top: calc(-1 * var(--aml-badge-offset));
	border: 1px solid rgba(54, 89, 81, 0.28);
	border-radius: 50%;
	background-color: var(--aml-color-ivory);
	color: var(--aml-color-deep-green);
}

/*
 * Abstract "column" rhythm behind the Why Work With Akela panel: thin
 * vertical hairlines, faded in from the top-right corner by a radial
 * mask so they never reach the text in full strength. Law-adjacent
 * structure without any literal imagery. Decorative only.
 */
.aml-home-why .section-panel {
	position: relative;
	isolation: isolate;
	overflow: hidden;
}

.aml-home-why .section-panel::before {
	content: '';
	position: absolute;
	z-index: -1;
	inset: 0;
	background-image: repeating-linear-gradient(90deg, rgba(54, 89, 81, 0.07) 0 1px, transparent 1px 56px);
	-webkit-mask-image: radial-gradient(90% 80% at 100% 0%, #000 0%, transparent 65%);
	mask-image: radial-gradient(90% 80% at 100% 0%, #000 0%, transparent 65%);
	pointer-events: none;
}

/* -----------------------------------------------------------------------
 * Differentiators (approach / value lists on About and practice pages)
 *
 * Same quiet language as the homepage "Why Work With Akela" list: a small
 * round badge with a check mark, the approved text, and a hairline rule —
 * no boxed cards. The check is the Bootstrap Icons "check2" path inline
 * as a background image (no icon package, no markup change). The badge is
 * sage on the light page and flips to light inside sage panels. These
 * round check badges stay light by design; only the square icon tiles
 * (.aml-practice-icon) are solid deep green.
 * --------------------------------------------------------------------- */
/*
 * The 2rem badge is taller than one 1.4em line, so it's pulled up by half
 * the difference to center on the FIRST line of a wrapping item (not the
 * whole block), and the top padding grows by the same amount so a
 * single-line row keeps exactly its previous height and badge position.
 */
.aml-differentiator {
	--aml-badge-offset: calc((2rem - 1.4em) / 2);
	display: flex;
	align-items: flex-start;
	gap: var(--aml-space-3);
	height: 100%;
	padding-block: calc(0.875rem + var(--aml-badge-offset)) 0.875rem;
	border-bottom: 1px solid rgba(54, 89, 81, 0.15);
	font-weight: 600;
	line-height: 1.4;
	text-align: left;
}

.aml-differentiator::before {
	content: '';
	flex-shrink: 0;
	width: 2rem;
	height: 2rem;
	margin-top: calc(-1 * var(--aml-badge-offset));
	border-radius: 50%;
	box-shadow: inset 0 0 0 1px rgba(54, 89, 81, 0.28);
	background: var(--aml-color-sage) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23365951' stroke='%23365951' stroke-width='.6' stroke-linejoin='round'%3E%3Cpath d='M13.854 3.646a.5.5 0 0 1 0 .708l-7 7a.5.5 0 0 1-.708 0l-3.5-3.5a.5.5 0 1 1 .708-.708L6.5 10.293l6.646-6.647a.5.5 0 0 1 .708 0'/%3E%3C/svg%3E") center / 1rem no-repeat;
}

.section-panel--sage .aml-differentiator::before {
	background-color: var(--aml-color-ivory);
}

/* -----------------------------------------------------------------------
 * Consultation CTA actions
 * --------------------------------------------------------------------- */
.aml-consultation-cta-actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--aml-space-4);
	margin-top: var(--aml-space-5);
}

/*
 * Phones: button pairs (hero and closing CTA) stack as one equal-width
 * column instead of two ragged, differently sized rows, and the closing
 * CTA heading steps down so it doesn't stack four or five lines deep in
 * the narrower panel.
 */
@media (max-width: 575.98px) {
	.aml-consultation-cta-actions {
		margin-top: var(--aml-space-4);
	}

	.aml-hero-actions,
	.aml-consultation-cta-actions {
		flex-direction: column;
		align-items: stretch;
		gap: 0.75rem;
	}

	.aml-page-hero .aml-hero-actions,
	.aml-consultation-cta-actions {
		max-width: 22rem;
		margin-inline: auto;
	}

	.section-panel--deep h2 {
		font-size: 1.5rem;
	}
}

/* -----------------------------------------------------------------------
 * Contact form (akela-contact-form plugin)
 *
 * The plugin ships no CSS of its own — these rules style its
 * aml-contact-* class hooks to match the site's design system. The
 * Turnstile widget itself (rendered by Cloudflare's script inside
 * .cf-turnstile) is intentionally left unstyled; only its wrapper's
 * spacing is set here.
 * --------------------------------------------------------------------- */
.aml-contact-form {
	max-width: 640px;
	margin-inline: auto;
	text-align: left;
}

.aml-contact-field {
	margin-bottom: var(--aml-space-4);
}

.aml-contact-label {
	display: block;
	margin-bottom: var(--aml-space-2);
	color: var(--aml-color-ink);
	font-family: var(--aml-font-body);
	font-weight: 600;
}

/* Deep green, not gold: gold on the white form card is only ~2.4:1. */
.aml-contact-required {
	color: var(--aml-color-deep-green);
}

.aml-contact-input,
.aml-contact-select,
.aml-contact-textarea {
	display: block;
	width: 100%;
	min-height: var(--aml-tap-target);
	padding: var(--aml-space-2) var(--aml-space-3);
	border: 1px solid var(--aml-color-border);
	border-radius: var(--aml-radius-sm);
	background-color: var(--aml-color-ivory);
	color: var(--aml-color-ink);
	font-family: var(--aml-font-body);
	font-size: var(--aml-text-base);
	line-height: var(--aml-leading-normal);
}

/*
 * Dropdowns: the browser's own arrow sits hard against the right edge and
 * can't be moved, so it is switched off and the site's chevron (the same
 * one as the FAQ accordion, in deep green) is drawn 18px in from the
 * edge, vertically centred. The right padding keeps a long selected
 * option clear of it. Height, border and focus ring are unchanged.
 */
.aml-contact-select {
	padding-right: 2.75rem;
	background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23365951' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.75'%3e%3cpath d='M2 5L8 11L14 5'/%3e%3c/svg%3e");
	background-repeat: no-repeat;
	background-position: right 1.125rem center;
	background-size: 0.875rem 0.875rem;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	text-overflow: ellipsis;
}

.aml-contact-select::-ms-expand {
	display: none;
}

.aml-contact-textarea {
	min-height: 9rem;
	resize: vertical;
}

.aml-contact-input:focus-visible,
.aml-contact-select:focus-visible,
.aml-contact-textarea:focus-visible {
	border-color: var(--aml-color-deep-green);
	outline: var(--aml-focus-width) solid var(--aml-focus-color);
	outline-offset: 2px;
}

.aml-contact-help {
	display: block;
	margin-top: var(--aml-space-2);
	color: var(--aml-color-ink);
	font-size: var(--aml-text-sm);
	opacity: 0.75;
}

/*
 * Consultation form: optional preferred date and time — two native
 * inputs under one group label, side by side where there is room and
 * stacked on phones. The plugin's script echoes the choice back in
 * 12-hour form in .aml-contact-when-preview.
 */
.aml-contact-when-grid {
	display: grid;
	gap: var(--aml-space-3);
}

.aml-contact-when-field {
	min-width: 0;
	margin: 0;
}

.aml-contact-sublabel {
	display: block;
	margin-bottom: var(--aml-space-1);
	color: var(--aml-color-ink);
	font-family: var(--aml-font-body);
	font-size: var(--aml-text-sm);
	font-weight: 500;
}

/* iOS Safari collapses and centres an empty date/time input. */
.aml-contact-when .aml-contact-input {
	min-width: 0;
}

.aml-contact-when .aml-contact-input::-webkit-date-and-time-value {
	min-height: 1.5em;
	text-align: left;
}

.aml-contact-when-preview {
	display: block;
	margin-top: var(--aml-space-2);
	color: var(--aml-color-deep-green);
	font-size: var(--aml-text-sm);
	font-weight: 600;
}

.aml-contact-when-preview[hidden] {
	display: none;
}

@media (min-width: 576px) {
	.aml-contact-when-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		column-gap: var(--aml-space-4);
	}
}

/*
 * Turnstile runs at submit time with appearance "interaction-only"
 * (akela-contact-form 1.4+), so its container is normally empty and takes
 * no space; it only opens up while Cloudflare needs the visitor to
 * interact (.is-interactive is set by the plugin's script).
 */
.aml-contact-field--turnstile {
	display: flex;
	justify-content: center;
	margin-bottom: 0;
}

.aml-contact-field--turnstile.is-interactive {
	margin-block: var(--aml-space-4) 0;
}

/* Verification errors written by the plugin's script, just above the
   submit button. */
.aml-contact-status .aml-contact-message {
	margin: var(--aml-space-4) 0 0;
}

.aml-contact-field--submit {
	margin-top: var(--aml-space-4);
	margin-bottom: 0;
	text-align: center;
}

.aml-contact-submit {
	display: inline-flex;
	min-height: var(--aml-tap-target);
	align-items: center;
	justify-content: center;
	padding: var(--aml-space-2) var(--aml-space-5);
	border: 1px solid var(--aml-color-deep-green);
	border-radius: var(--aml-radius-sm);
	background-color: var(--aml-color-deep-green);
	box-shadow: 0 1px 2px rgba(17, 17, 17, 0.16), 0 4px 12px rgba(54, 89, 81, 0.16);
	color: #ffffff;
	font-family: var(--aml-font-body);
	font-weight: 600;
	font-size: var(--aml-text-base);
	letter-spacing: 0.01em;
	cursor: pointer;
	transition: background-color var(--aml-transition-fast), border-color var(--aml-transition-fast);
}

.aml-contact-submit:hover,
.aml-contact-submit:focus-visible {
	background-color: var(--aml-color-ink);
	border-color: var(--aml-color-ink);
}

/* "Verifying…" / "Sending…": locked against a second click. */
.aml-contact-submit:disabled {
	background-color: var(--aml-color-deep-green);
	border-color: var(--aml-color-deep-green);
	cursor: progress;
	opacity: 0.75;
}

@media (prefers-reduced-motion: reduce) {
	.aml-contact-submit {
		transition: none;
	}
}

@media (max-width: 575.98px) {
	.aml-contact-submit {
		width: 100%;
	}
}

.aml-contact-message {
	max-width: 640px;
	margin-inline: auto;
	margin-bottom: var(--aml-space-4);
	padding: var(--aml-space-3) var(--aml-space-4);
	border-radius: var(--aml-radius-sm);
	font-size: var(--aml-text-sm);
}

.aml-contact-message--success {
	background-color: var(--aml-color-sage);
	color: var(--aml-color-ink);
}

.aml-contact-message--error {
	background-color: var(--aml-color-ivory);
	border: 1px solid var(--aml-color-gold);
	color: var(--aml-color-ink);
}

.aml-contact-message--notice {
	background-color: var(--aml-color-ivory);
	border: 1px dashed var(--aml-color-border);
	color: var(--aml-color-ink);
	font-style: italic;
}

/*
 * The plugin's POST handler redirects to #send-a-message after every
 * submission outcome so the visitor lands on this section rather than
 * the top of the page; scroll-margin-top keeps it from landing flush
 * against the viewport edge.
 */
#send-a-message,
#request-a-consultation {
	scroll-margin-top: 2rem;
}

/*
 * Form container: the page's primary element — a white card lifted off
 * the light page by a sage-green border, a deep-green top edge and a
 * soft shadow, with more clearly outlined fields and a full-width
 * submit button (styling only — the plugin's markup, fields, validation,
 * and submission are untouched).
 */
#send-a-message .aml-contact-form,
#request-a-consultation .aml-contact-form {
	padding: 1.5rem 1.25rem;
	border: 1px solid rgba(54, 89, 81, 0.22);
	border-top: 3px solid var(--aml-color-deep-green);
	border-radius: var(--aml-radius-md);
	background-color: var(--aml-color-surface);
	box-shadow: 0 10px 30px rgba(17, 17, 17, 0.06);
}

#send-a-message .aml-contact-input,
#send-a-message .aml-contact-select,
#send-a-message .aml-contact-textarea,
#request-a-consultation .aml-contact-input,
#request-a-consultation .aml-contact-select,
#request-a-consultation .aml-contact-textarea {
	border-color: rgba(17, 17, 17, 0.24);
}

#send-a-message .aml-contact-input:focus-visible,
#send-a-message .aml-contact-select:focus-visible,
#send-a-message .aml-contact-textarea:focus-visible,
#request-a-consultation .aml-contact-input:focus-visible,
#request-a-consultation .aml-contact-select:focus-visible,
#request-a-consultation .aml-contact-textarea:focus-visible {
	border-color: var(--aml-color-deep-green);
}

#send-a-message .aml-contact-submit,
#request-a-consultation .aml-contact-submit {
	width: 100%;
	min-height: 3rem;
	font-size: 1.0625rem;
}

@media (min-width: 576px) {
	#send-a-message .aml-contact-form,
	#request-a-consultation .aml-contact-form {
		padding: 2.5rem;
	}
}

/*
 * Consultation form groups ("Your Details", "About Your Consultation"):
 * a small uppercase legend like the site's group headings, a hairline
 * between the two groups, and — from 768px, where every label fits on
 * one line — the short fields two-up. Bottom alignment keeps the inputs
 * level even if a label ever wraps.
 */
.aml-contact-group {
	min-width: 0;
	margin: 0;
	padding: 0;
	border: 0;
}

.aml-contact-group + .aml-contact-group {
	margin-top: var(--aml-space-2);
	padding-top: var(--aml-space-4);
	border-top: 1px solid rgba(54, 89, 81, 0.12);
}

.aml-contact-legend {
	float: none;
	width: 100%;
	margin-bottom: var(--aml-space-3);
	padding: 0;
	color: var(--aml-color-deep-green);
	font-family: var(--aml-font-body);
	font-size: var(--aml-text-sm);
	font-weight: 700;
	line-height: 1.4;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

/* Phones: the grouping shouldn't make the single-column form longer
   than it was, so the rhythm inside the consultation form tightens. */
@media (max-width: 575.98px) {
	.aml-consultation-form .aml-contact-field {
		margin-bottom: 1.125rem;
	}

	.aml-contact-legend {
		margin-bottom: 0.75rem;
	}

	.aml-contact-group + .aml-contact-group {
		margin-top: 0;
		padding-top: 1.125rem;
	}

	.aml-consultation-form .aml-contact-field--checkbox {
		padding: 0.75rem;
	}

	.aml-consultation-form .aml-contact-field--submit {
		margin-top: var(--aml-space-3);
	}
}

@media (min-width: 768px) {
	.aml-contact-grid {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		align-items: end;
		column-gap: var(--aml-space-4);
	}

	.aml-contact-field--full {
		grid-column: 1 / -1;
	}
}

/* Consultation form acknowledgement: set apart on a soft sage surface,
   box beside its (long) label. */
.aml-contact-field--checkbox {
	display: flex;
	align-items: flex-start;
	gap: var(--aml-space-3);
	padding: var(--aml-space-3);
	border-radius: var(--aml-radius-sm);
	background-color: var(--aml-color-sage);
	font-size: var(--aml-text-sm);
	line-height: 1.55;
}

.aml-contact-checkbox {
	flex-shrink: 0;
	width: 1.25rem;
	height: 1.25rem;
	margin: 0.1rem 0 0;
	accent-color: var(--aml-color-deep-green);
	cursor: pointer;
}

.aml-contact-checkbox:focus-visible {
	outline: var(--aml-focus-width) solid var(--aml-focus-color);
	outline-offset: 2px;
}

.aml-contact-field--checkbox label {
	cursor: pointer;
}

/* Consultation form A-Number choice: two stacked radio options, each with
   a full-width label so the whole row is the tap target. */
.aml-contact-choices {
	display: grid;
	gap: var(--aml-space-2);
}

.aml-contact-choice {
	display: flex;
	align-items: flex-start;
	gap: var(--aml-space-3);
	line-height: 1.5;
}

.aml-contact-choice label {
	flex: 1;
	min-height: var(--aml-tap-target);
	padding-block: 0.6rem;
	cursor: pointer;
}

.aml-contact-radio {
	flex-shrink: 0;
	width: 1.25rem;
	height: 1.25rem;
	margin: 0.7rem 0 0;
	accent-color: var(--aml-color-deep-green);
	cursor: pointer;
}

.aml-contact-radio:focus-visible {
	outline: var(--aml-focus-width) solid var(--aml-focus-color);
	outline-offset: 2px;
}

/*
 * The A-Number group and the "About Your Consultation" group after it, as
 * one compact step. A fieldset's legend sits in its top border, so the
 * group's top padding would land between the heading and its fields;
 * the heading's own margin sets that gap instead. The radio rows keep
 * their 44px tap height: they sit edge to edge, and the list's negative
 * top margin offsets the labels' inner padding. Placed after the phone
 * rules above so it applies at every width.
 */
.aml-consultation-form [data-aml-a-number],
.aml-consultation-form [data-aml-a-number] + .aml-contact-group {
	padding-top: 0;
}

.aml-consultation-form [data-aml-a-number] + .aml-contact-group {
	margin-top: var(--aml-space-2);
}

.aml-consultation-form [data-aml-a-number] .aml-contact-legend,
.aml-consultation-form [data-aml-a-number] + .aml-contact-group .aml-contact-legend {
	margin-bottom: 1.25rem;
}

.aml-consultation-form [data-aml-a-number] .aml-contact-choices {
	gap: 0;
	margin-top: -0.5rem;
	margin-bottom: 0.75rem;
}

/*
 * Consultation hero (consultation-hero.php) reuses the Contact hero grid
 * below. It is the page's only section, so on desktop it starts a little
 * higher (more of the form above the fold) and leaves the extra room at
 * the bottom instead.
 */
@media (min-width: 992px) {
	.aml-consultation-hero.aml-page-hero {
		padding-block: 3.5rem 5rem;
	}

	/* The form is much taller than the left column; keeping the details
	   in view leaves Email/Call reachable while the form is filled in. */
	.aml-consultation-hero .aml-consultation-details {
		position: sticky;
		top: 2rem;
	}
}

/*
 * Phones: the hero intro alone filled most of a 667px screen and pushed
 * the whole form below the fold. The intro sentence is dropped here (the
 * form's own intro line says what happens next) and the top padding and
 * gap tighten, so the form heading and first fields are visible on load.
 */
@media (max-width: 575.98px) {
	.aml-consultation-hero.aml-page-hero {
		padding-top: 1.5rem;
	}

	.aml-consultation-hero .aml-hero-copy {
		display: none;
	}

	.aml-consultation-hero .aml-contact-hero-grid {
		row-gap: 1.5rem;
	}
}

.aml-consultation-details .aml-attorney-facts {
	margin-bottom: var(--aml-space-3);
}

.aml-consultation-details .aml-attorney-facts li:last-child {
	margin-bottom: 0;
}

.aml-consultation-format {
	display: flex;
	align-items: flex-start;
	gap: 0.625rem;
	margin-bottom: 0;
	color: rgba(17, 17, 17, 0.72);
}

.aml-consultation-format-icon {
	display: inline-flex;
	flex-shrink: 0;
	margin-top: 0.2em;
	color: var(--aml-color-deep-green);
}

.aml-consultation-email-tip {
	margin-bottom: var(--aml-space-3);
	color: rgba(17, 17, 17, 0.72);
	font-size: var(--aml-text-sm);
}

.aml-consultation-format + h2 {
	margin-top: var(--aml-space-5);
}

/*
 * Contact hero (contact-hero.php): three blocks in markup order — intro,
 * form, Contact Options — stacked below 992px. From 992px the intro and
 * Contact Options share the left column and the form fills the right.
 * The form and options headings step down to a sub-heading size so they
 * don't compete with the H1, and the form fills its column instead of
 * centering at 640px.
 */
.aml-contact-hero-grid {
	display: grid;
	row-gap: 2.5rem;
}

@media (min-width: 992px) {
	.aml-contact-hero-grid {
		grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
		grid-template-areas:
			"intro form"
			"options form";
		grid-template-rows: auto 1fr;
		column-gap: var(--aml-space-5);
		row-gap: var(--aml-space-4);
	}

	.aml-contact-hero-intro {
		grid-area: intro;
	}

	.aml-contact-hero-form {
		grid-area: form;
	}

	.aml-contact-hero-options {
		grid-area: options;
		align-self: start;
	}
}

.aml-contact-hero-form h2,
.aml-contact-hero-options h2 {
	margin-bottom: var(--aml-space-2);
	font-size: 1.5rem;
}

.aml-contact-hero-options h2 {
	margin-bottom: var(--aml-space-3);
}

@media (min-width: 992px) {
	.aml-contact-hero-form h2 {
		font-size: 1.75rem;
	}
}

/* Contact Options as compact icon-beside-text rows (reusing the linked
   .aml-practice-card surface); two per row on tablets. */
.aml-contact-options-list {
	display: grid;
	gap: 0.75rem;
	margin-bottom: 0;
}

@media (min-width: 576px) and (max-width: 991.98px) {
	.aml-contact-options-list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* FAQ "Have a Question Now?": one row of three from 768px, centered. */
.aml-contact-options-list--row {
	max-width: 960px;
	margin-inline: auto;
}

@media (max-width: 767.98px) {
	.aml-contact-options-list.aml-contact-options-list--row {
		grid-template-columns: minmax(0, 1fr);
		max-width: 420px;
	}
}

@media (min-width: 768px) {
	.aml-contact-options-list.aml-contact-options-list--row {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	/* Two options (the FAQ page's closing panel): a narrower, centred pair. */
	.aml-contact-options-list.aml-contact-options-list--pair {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		max-width: 640px;
	}
}

/* FAQ closing panel: heading, one line, one button, then the two options. */
.aml-faq-cta .section-heading {
	margin-bottom: var(--aml-space-4);
}

.aml-faq-cta h2 {
	font-size: clamp(1.5rem, 1.2rem + 1.4vw, 2rem);
}

.aml-faq-cta .section-heading .btn {
	margin-top: var(--aml-space-2);
}

.aml-contact-options-list .aml-practice-card .card-body {
	flex-direction: row;
	align-items: center;
	gap: var(--aml-space-3);
	padding: 0.875rem 1.125rem;
}

.aml-contact-options-list .aml-practice-icon {
	width: 44px;
	height: 44px;
	margin-bottom: 0;
}

.aml-contact-options-list .aml-practice-icon svg {
	width: 22px;
	height: 22px;
}

.aml-contact-option-text {
	min-width: 0;
	overflow-wrap: anywhere;
}

.aml-contact-options-list .card-title {
	display: block;
	margin-bottom: 0.125rem;
	font-size: 1.0625rem;
}

.aml-contact-options-list .aml-practice-link {
	display: block;
	margin-top: 0;
	padding-top: 0;
}

.aml-contact-hero-form > p {
	margin-bottom: var(--aml-space-4);
	color: rgba(17, 17, 17, 0.72);
}

.aml-contact-hero .aml-contact-form {
	max-width: none;
	margin-inline: 0;
}

/* -----------------------------------------------------------------------
 * FAQ accordion (faq-sample-questions.php). Restyles Bootstrap's
 * accordion to the site's hairline
 * surfaces, sage open state and gold focus ring.
 * --------------------------------------------------------------------- */

/* The FAQ list follows the page hero's intro copy directly: its section
   adds no top padding and the hero's bottom padding is reduced, so the
   intro leads straight into the questions. */
.section--tight:has(> .aml-container-narrow > .aml-faq-accordion) {
	padding-top: 0;
}

.aml-page-hero:has(+ .section--tight > .aml-container-narrow > .aml-faq-accordion) {
	padding-bottom: var(--aml-space-4);
}

@media (min-width: 576px) {
	.aml-page-hero:has(+ .section--tight > .aml-container-narrow > .aml-faq-accordion) {
		padding-bottom: 2rem;
	}
}

@media (min-width: 992px) {
	.aml-page-hero:has(+ .section--tight > .aml-container-narrow > .aml-faq-accordion) {
		padding-bottom: 2.5rem;
	}
}

.aml-faq-accordion {
	--bs-accordion-bg: var(--aml-color-surface);
	--bs-accordion-border-color: rgba(17, 17, 17, 0.08);
	--bs-accordion-border-radius: var(--aml-radius-md);
	--bs-accordion-inner-border-radius: calc(var(--aml-radius-md) - 1px);
	--bs-accordion-btn-color: var(--aml-color-ink);
	--bs-accordion-btn-padding-x: 1.25rem;
	--bs-accordion-btn-padding-y: 1rem;
	--bs-accordion-btn-focus-box-shadow: none;
	--bs-accordion-active-bg: var(--aml-color-sage);
	--bs-accordion-active-color: var(--aml-color-deep-green);
	--bs-accordion-body-padding-x: 1.25rem;
	--bs-accordion-body-padding-y: 1.25rem;
	/* Bootstrap's chevrons are dark grey / dark blue; ink when closed and
	   deep green when open match the rest of the palette. */
	--bs-accordion-btn-icon-width: 1rem;
	--bs-accordion-btn-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23111111' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5'%3e%3cpath d='M2 5L8 11L14 5'/%3e%3c/svg%3e");
	--bs-accordion-btn-active-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23365951' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5'%3e%3cpath d='M2 5L8 11L14 5'/%3e%3c/svg%3e");
}

.aml-faq-accordion .accordion-header {
	margin-bottom: 0;
	font-size: inherit;
}

.aml-faq-accordion .accordion-button {
	gap: var(--aml-space-3);
	min-height: var(--aml-tap-target);
	font-family: var(--aml-font-body);
	font-size: 1.0625rem;
	font-weight: 600;
	line-height: 1.45;
}

/*
 * Keyboard focus only (a mouse click no longer leaves a ring), drawn
 * inside the button so the item's border and rounded corners never clip
 * it. The open item's body shares the sage header so question and answer
 * read as one block.
 */
.aml-faq-accordion .accordion-button:focus-visible {
	outline: var(--aml-focus-width) solid var(--aml-focus-color);
	outline-offset: calc(-1 * var(--aml-focus-width));
}

.aml-faq-accordion .accordion-collapse.show,
.aml-faq-accordion .accordion-collapse.collapsing {
	background-color: var(--aml-color-sage);
}

.aml-faq-accordion .accordion-button:not(.collapsed) {
	box-shadow: none;
}

.aml-faq-accordion .accordion-body {
	padding-top: 0.25rem;
}

.aml-faq-accordion .accordion-body p {
	max-width: 65ch;
	margin-bottom: 0;
	color: rgba(17, 17, 17, 0.72);
}

.aml-faq-accordion .accordion-body p + p {
	margin-top: 0.75rem;
}

/*
 * Question list. Each category is a heading over its own bordered group.
 * A question without a published answer is a plain row — same type and
 * padding as an accordion button, but no button, arrow or panel — so an
 * answered question can later become an accordion item in the same place.
 */
.aml-faq-note {
	margin: var(--aml-space-2) 0 0;
	color: rgba(17, 17, 17, 0.6);
	font-size: var(--aml-text-sm);
}

main:not(.aml-home) .aml-container-narrow > h2.aml-faq-category {
	margin: var(--aml-space-5) 0 var(--aml-space-3);
	color: var(--aml-color-deep-green);
	font-family: var(--aml-font-body);
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	line-height: 1.4;
	text-transform: uppercase;
}

main:not(.aml-home) .aml-container-narrow > h2.aml-faq-category:first-child {
	margin-top: 0;
}

.aml-faq-accordion .aml-faq-question {
	margin: 0;
	padding: var(--bs-accordion-btn-padding-y) var(--bs-accordion-btn-padding-x);
	color: var(--aml-color-ink);
	font-family: var(--aml-font-body);
	font-size: 1.0625rem;
	font-weight: 600;
	line-height: 1.45;
}

@media (max-width: 575.98px) {
	.aml-faq-accordion {
		--bs-accordion-btn-padding-x: 1rem;
		--bs-accordion-body-padding-x: 1rem;
	}

	.aml-faq-accordion .accordion-button,
	.aml-faq-accordion .aml-faq-question {
		font-size: 1rem;
	}

	main:not(.aml-home) .aml-container-narrow > h2.aml-faq-category {
		margin-top: var(--aml-space-4);
	}
}

/*
 * Responsive containers otherwise rely on Bootstrap's .container /
 * .container-fluid breakpoints; no further overrides needed yet.
 */

/* -----------------------------------------------------------------------
 * Testimonials page (testimonials-list.php): one quote per white panel
 * with a thin gold rule, the attribution beneath. Shown only once a
 * testimonial is cleared for publication (inc/testimonials.php).
 * --------------------------------------------------------------------- */
.aml-testimonial-entry {
	margin: 0 0 var(--aml-space-5);
	padding: var(--aml-space-4);
	border-left: 3px solid var(--aml-color-gold);
	border-radius: 0 var(--aml-radius-md) var(--aml-radius-md) 0;
	background-color: var(--aml-color-surface);
	box-shadow: var(--aml-shadow-sm);
}

.aml-testimonial-entry:last-child {
	margin-bottom: 0;
}

.aml-testimonial-quote {
	margin: 0 0 var(--aml-space-3);
	font-size: 1.0625rem;
	line-height: 1.75;
}

.aml-testimonial-quote > :last-child {
	margin-bottom: 0;
}

.aml-testimonial-title {
	font-family: var(--aml-font-heading);
	font-size: var(--aml-text-lg);
	line-height: 1.4;
}

.aml-testimonial-attribution {
	display: flex;
	flex-wrap: wrap;
	gap: 0 var(--aml-space-2);
	font-size: var(--aml-text-sm);
}

.aml-testimonial-name {
	font-weight: 600;
}

.aml-testimonial-name::before {
	content: '— ';
}

.aml-testimonial-detail {
	color: rgba(17, 17, 17, 0.6);
}

@media (min-width: 768px) {
	.aml-testimonial-entry {
		padding: 2rem 2.5rem;
	}
}

/* -----------------------------------------------------------------------
 * Scroll entrance animation
 *
 * .aml-reveal only ever gets hidden by JS (assets/js/main.js), never by
 * this CSS alone — the .is-hidden class below is what actually sets
 * opacity/transform, and only main.js adds it. If JavaScript fails to
 * run, no element ever receives .is-hidden, so content stays visible by
 * default; this is deliberate, see main.js. transition lives on the base
 * .aml-reveal class (not .is-hidden) so it's active by the time .is-hidden
 * is removed on reveal. The hidden state is deliberately slight — 94%
 * opacity, 10px lower — so a block is readable even before it settles.
 * --------------------------------------------------------------------- */
.aml-reveal {
	transition: opacity 500ms ease-out, transform 500ms ease-out;
}

.aml-reveal.is-hidden {
	opacity: 0.94;
	transform: translateY(10px);
}

/*
 * Inner-page heroes enter on load in CSS (never via the scroll reveal):
 * eyebrow 0 → H1 50 → copy 100 → actions / form / portrait 150 → contact
 * details 200ms, finished by ~650ms. The keyframes are the homepage
 * hero's: the H1 only moves (6px) and never fades; everything else starts
 * at 85–90% opacity and 6–8px lower, so it's readable from the first
 * paint and buttons and form fields are usable throughout.
 */
@media (prefers-reduced-motion: no-preference) {
	.aml-page-hero .section-eyebrow {
		animation: aml-hero-eyebrow-in 420ms ease-out backwards;
	}

	.aml-page-hero .aml-hero-heading {
		animation: aml-hero-heading-in 480ms ease-out 50ms backwards;
	}

	.aml-page-hero .aml-hero-copy {
		animation: aml-hero-text-in 480ms ease-out 100ms backwards;
	}

	.aml-page-hero .aml-hero-actions,
	.aml-page-hero .aml-hero-portrait,
	.aml-page-hero .aml-contact-hero-form {
		animation: aml-hero-text-in 480ms ease-out 150ms backwards;
	}

	.aml-page-hero .aml-contact-hero-options {
		animation: aml-hero-text-in 480ms ease-out 200ms backwards;
	}
}

@media (prefers-reduced-motion: reduce) {
	.aml-reveal {
		transition: none;
	}

	.aml-reveal.is-hidden {
		opacity: 1;
		transform: none;
	}
}