/*
 * Lake Auburn Legal -- component system.
 *
 * HAND-WRITTEN, and deliberately so. The original is a Duda site whose stylesheets are ~440KB of
 * minified rules keyed to generated element ids; they only work against the generated markup, and
 * this theme rebuilds the pages in native blocks. So there is no ported sheet to sit beside, and
 * no `native-adapters.css` split either: this file IS the design system, written against the
 * snapshot in `_source/` as its reference.
 *
 * Everything here is scoped to `.lal` so nothing leaks into wp-admin or a plugin's markup.
 *
 * Measurements come from the rendered original at a 1440px viewport -- type sizes, line heights,
 * the 1200px row width, the section heights the photographs were cropped for. Where a value is a
 * judgement rather than a measurement it says so.
 *
 * SECTION ORDER
 *   A  Tokens and base
 *   B  Shared pieces: headings, buttons, lists, ornaments
 *   C  Chrome: header and navigation here; the footer is footer.css, loaded right after this one
 *   D  Page sections, in the order the pages use them
 *   E  Responsive, in its own sheets loaded after this one: responsive.css (tablet and narrow),
 *      then phone-chrome.css and phone-sections.css (the original's phone layout)
 */

/* ==========================================================================
   A. Tokens and base
   ========================================================================== */

.lal {
	--lal-blue: #0064b4;
	--lal-blue-dark: #00518f;
	--lal-gold: #fcad39;
	--lal-ink: #212121;
	--lal-muted: #5b6770;
	--lal-white: #fff;
	--lal-shell: #f4f4f4;

	/* The row the original lays every section out in: a 1200px wrapper (its `rows-1200` class)
	   with 57px of inner padding, so content runs 169..1255 at a 1440px viewport. Both numbers
	   are measured -- the logo's left edge and the cream pill's right edge land on them. */
	--lal-row: 1200px;
	--lal-gutter: 57.6px;

	/* Section rhythm. The original expresses this as a 4% top/bottom padding of the viewport
	   width, which at 1440px is ~58px; fixed values keep it from collapsing on a phone and
	   ballooning on a 4K monitor. */
	--lal-section-y: 58px;

	--lal-serif: 'EB Garamond', 'EB Garamond Fallback', Georgia, 'Times New Roman', serif;
	--lal-sans: Inter, 'Inter Fallback', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
}

/* The two stand-in faces the original declares in its page <style>, not in the Google Fonts
   sheet fonts.css is generated from: Arial with its metrics adjusted to Inter's and EB Garamond's,
   so text set before the webfonts arrive (or if they never do) takes the same space and nothing
   shifts when they land. The overrides are the original's own numbers. */
@font-face {
	font-family: 'Inter Fallback';
	src: local('Arial');
	ascent-override: 90.199%;
	descent-override: 22.4836%;
	size-adjust: 107.4014%;
	line-gap-override: 0;
}
@font-face {
	font-family: 'EB Garamond Fallback';
	src: local('Arial');
	ascent-override: 117.9035%;
	descent-override: 34.891%;
	size-adjust: 85.4088%;
	line-gap-override: 0;
}

.lal {
	font-family: var(--lal-sans);
	font-size: 16px;
	font-weight: 300;
	line-height: 2;
	color: var(--lal-ink);
	background: var(--lal-white);
}

.lal img {
	max-width: 100%;
	height: auto;
}

/* The row. Every section is full-bleed and puts its content in one of these. */
.lal-row {
	width: 100%;
	max-width: var(--lal-row);
	margin-inline: auto;
	padding-inline: var(--lal-gutter);
	box-sizing: border-box;
}

/* A full-bleed photographic band. The tint is what makes white type legible over a photograph;
   the original paints it as a second background layer rather than an overlay element. */
.lal-band {
	position: relative;
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
}

/* THE BANDS ARE NOT ALL TINTED THE SAME, which is the single most visible thing to get wrong
   here. The values are the opacity of the black layer the original paints over each photograph:
   0.4 on the hero, 0.7 on the closing call to action, and 0.8 on the service-card band, where the
   picture is barely legible on purpose. */
.lal-band--tinted::before {
	content: '';
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.7);
	pointer-events: none;
}

.lal-hero.lal-band--tinted::before {
	background: rgba(0, 0, 0, 0.4);
}

.lal-cards.lal-band--tinted::before {
	background: rgba(0, 0, 0, 0.8);
}

.lal-band > .lal-row {
	position: relative;
	z-index: 1;
}

/* ==========================================================================
   B. Shared pieces
   ========================================================================== */

/* --- Section heading -------------------------------------------------------
   Three stacked pieces on every section: a serif line, an uppercase sans line, and a circular
   badge. Both lines are uppercase; the difference is family and size, which is what gives the
   original its two-weight look. */

/* The three pieces are placed from measurements of the original, where each is its own widget:
   54px from the serif line's top to the sans line's top, the badge 17px under the sans line, and
   26px from the badge to whatever follows. The sections that depart from those carry overrides
   below. */
.lal .lal-heading {
	margin: 0 0 26px;
}

.lal-heading__title {
	margin: 0;
	font-family: var(--lal-serif);
	font-size: 28px;
	font-weight: 400;
	line-height: 1.5;
	text-transform: uppercase;
	color: var(--lal-ink);
}

.lal-heading__sub {
	display: block;
	margin-top: 13px;
	font-family: var(--lal-sans);
	font-size: 16px;
	font-weight: 400;
	line-height: 1.5;
	text-transform: uppercase;
}

/* The badge: the disc is one image, the glyph an inline SVG centred on it and taking its colour
   from `color` here -- white on the blue disc, blue on the white one. */
.lal-heading__badge {
	position: relative;
	display: block;
	width: 75px;
	height: 75px;
	margin-top: 15px;
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
	color: var(--lal-white);
}

.lal-heading__badge--white {
	color: var(--lal-blue);
}

.lal-heading__badge svg {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 45px;
	height: 45px;
	transform: translate(-50%, -50%);
}

/* Per-section departures, all measured. The disc is 78.5px on the process band and 68 on the local
   band; the glyph drops to 35px on the why and local bands; and where the original's image box is
   wider than the disc it paints, the disc sits inset from the column edge by the difference. */
.lal-cards .lal-heading__badge {
	margin-top: 30px;
}

.lal-why .lal-heading {
	margin-bottom: 27px;
}

.lal-why .lal-heading__badge,
.lal-tips .lal-heading__badge {
	margin-left: 14px;
}

.lal-why .lal-heading__badge svg,
.lal-local .lal-heading__badge svg {
	width: 35px;
	height: 35px;
}

.lal-process .lal-heading {
	margin-bottom: 21.5px;
}

.lal-process .lal-heading__badge {
	width: 78.5px;
	height: 78.5px;
	margin-left: 10px;
}

.lal-tips .lal-heading,
.lal-local .lal-heading {
	margin-bottom: 19px;
}

.lal-local .lal-heading__badge {
	width: 68px;
	height: 68px;
	margin-top: 20px;
	margin-left: 2px;
}

/* Centred variant, used by the card band and the process section. */
.lal-heading--center {
	text-align: center;
}

.lal-heading--center .lal-heading__badge {
	margin-inline: auto;
}

/* On the photographic and blue sections the heading reverses out. */
.lal-heading--light .lal-heading__title,
.lal-heading--light .lal-heading__sub {
	color: var(--lal-white);
}

/* --- Button ----------------------------------------------------------------
   Transparent, hairline gold, fully rounded; fills gold on hover with dark text. */

.lal-button {
	display: inline-block;
	padding: 10px 28px;
	border: 1px solid var(--lal-gold);
	border-radius: 45px;
	background: transparent;
	color: var(--lal-white);
	font-family: var(--lal-sans);
	font-size: 16px;
	font-weight: 300;
	line-height: 1.25;
	text-align: center;
	text-decoration: none;
	transition: background-color 0.2s ease, color 0.2s ease;
}

.lal-button:hover,
.lal-button:focus-visible {
	background: var(--lal-gold);
	color: var(--lal-ink);
	text-decoration: none;
}

/* On a white section the label has to be dark to be readable. */
.lal-button--onlight {
	color: var(--lal-ink);
}

/* --- Prose -----------------------------------------------------------------
   Body copy, and the dash-marked lists the service cards use. */

/* 10px between paragraphs, and the same 10 between a paragraph and a list: the copy is one run
   of 32px lines with a 10px breath at each block boundary. */
.lal-prose p {
	margin: 0 0 10px;
	font-size: 16px;
	font-weight: 300;
	line-height: 2;
}

.lal-prose p:last-child, .lal .lal-prose > .lal-list:last-child {
	margin-bottom: 0;
}

.lal-prose strong {
	font-weight: 700;
}

/* Links inside copy. Buttons are excluded: they are anchors too, and theme.json already styles
   them -- without this they would pick up the link colour and weight and stop looking like
   buttons, which is exactly what happened on the closing call to action. */
.lal-prose a:not(.wp-element-button):not(.lal-button) {
	color: var(--lal-blue);
	font-weight: 700;
	text-decoration: none;
}

.lal-prose a:not(.wp-element-button):not(.lal-button):hover {
	text-decoration: underline;
}

.lal .lal-list {
	margin: 0 0 10px;
	padding: 0;
	list-style: none;
}

/* Items run on without a gap: 32px lines, plus one pixel per item. The text sits 32px in from the
   block's edge and the first line hangs 24px back into that margin to carry the marker. */
.lal-list li {
	margin: 0 0 0 32px;
	padding: 0 0 1px;
	text-indent: -24px;
	font-size: 16px;
	font-weight: 300;
	line-height: 2;
}

/* The marker is a fullwidth hyphen, right-aligned in a 16px box with 8px between it and the text
   -- the original's own choice of glyph, which is what gives the dash its length. */
.lal-list li::before {
	content: '\FF0D';
	display: inline-block;
	width: 16px;
	margin-right: 8px;
	text-align: end;
	text-indent: 0;
}

/* A definition-style list: bold lead-in, then the explanation. */
.lal-deflist {
	margin: 0;
	padding: 0;
	list-style: none;
}

/* The same rhythm and marker as the plain list. */
.lal-deflist li {
	margin: 0 0 0 32px;
	padding: 0 0 1px;
	text-indent: -24px;
	line-height: 2;
}

.lal-deflist li::before {
	content: '\FF0D';
	display: inline-block;
	width: 16px;
	margin-right: 8px;
	text-align: end;
	text-indent: 0;
}

.lal-deflist b {
	font-weight: 700;
}

/* --- Rules and ornaments ---------------------------------------------------- */

.lal-rule {
	width: 64px;
	height: 0;
	margin: 14px 0 18px;
	border: 0;
	border-top: 1px solid var(--lal-gold);
}

.lal-rule--center {
	margin-inline: auto;
}

.lal-rule--light {
	border-top-color: rgba(255, 255, 255, 0.55);
}

.lal-prose--light,
.lal-prose--light p,
.lal-list--light li {
	color: var(--lal-white);
}

.lal-prose--light a:not(.wp-element-button):not(.lal-button) {
	color: var(--lal-gold);
}

/* ==========================================================================
   C. Chrome
   ========================================================================== */

/* --- Header ---------------------------------------------------------------- */

.lal-header {
	position: relative;
	background: var(--lal-white);
}

/* No column gap: measured on the original, the pill starts exactly where the 260px logo column
   ends and runs to the row edge. */
.lal-header__top {
	display: grid;
	grid-template-columns: 260px 1fr auto;
	align-items: center;
	gap: 0;
	/* 20px above the logo and nothing below it: the 128px logo sets the row to 148, which is where
	   the navigation bar begins on the original. A symmetric 14px made every row below sit 8px low. */
	padding: 20px 0 0;
}

/* Measured on the original: 180x128 at the row's left edge. */
.lal-header__logo img {
	display: block;
	width: 180px;
	height: auto;
}

/* ONE cream pill, 120px tall and rounded at both ends, holding two groups: an address group that
   fills the left and a 279.3px telephone group on the right. The seam between them is the
   telephone group's soft shadow falling on the address group, not a gap in the pill. Measured at
   1440px: the pill spans 437..1262, the seam sits at 962.5, and both groups centre their two rows.
*/
.lal-header__strip {
	display: grid;
	grid-template-columns: 1fr 279.3px;
	align-items: stretch;
	gap: 0;
	min-height: 120px;
	padding: 0 20px;
	border-radius: 84px;
	background: rgba(252, 173, 57, 0.1);
}

.lal-header__where,
.lal-header__call {
	box-sizing: border-box;
}

/* Left group: the social marks on their own 33px row, above the address, both right-aligned. */
.lal-header__where {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: flex-end;
	gap: 5px;
	padding: 20px 30px 20px 0;
	/* The seam: a soft shadow inside this group's right edge, exactly as the original draws it. */
	box-shadow: inset -12px 0 11px -9px rgba(0, 0, 0, 0.25);
}

.lal-header__social {
	display: flex;
	align-items: center;
	gap: 5px;
}

/* Each mark takes its brand colour from an inline `color` set in lal_social_markup(). */
.lal-header__social a {
	display: inline-flex;
	box-sizing: border-box;
	width: 28px;
	height: 33px;
	padding-bottom: 5px;
	align-items: center;
	justify-content: center;
}

.lal-header__social svg {
	width: 19px;
	height: 19px;
	fill: currentColor;
}

.lal-header__address {
	margin: 0;
	font-size: 15px;
	font-weight: 300;
	line-height: 22.5px;
	white-space: nowrap;
}

.lal-header__address a {
	color: var(--lal-blue);
	font-weight: 600;
	text-decoration: none;
}

/* Right group: "Call Us:" over the number, both right-aligned, 6px apart. */
.lal-header__call {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: flex-end;
	gap: 6px;
	padding: 20px;
	text-align: right;
}

.lal-header__call span {
	display: block;
	font-size: 15px;
	font-weight: 300;
	line-height: 22.5px;
}

.lal-header__call a {
	color: var(--lal-blue);
	font-size: 20px;
	font-weight: 600;
	line-height: 30px;
	text-decoration: none;
	white-space: nowrap;
}

/* The navigation bar. Its white band, the blue rule beneath it and the disc mark at the left edge
   are all one image, anchored bottom-left so the disc stays put as the viewport widens. */
.lal-header__navbar {
	display: flex;
	align-items: center;
	min-height: 110px;
	background-repeat: no-repeat;
	background-position: 0 100%;
	background-size: cover;
}

/* 20px between items, measured: every gap in the original menu is the same 20. */
.lal-nav {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 20px;
	flex-wrap: wrap;
	/* The menu is centred on 702, not on the row centre of 712, so it carries 20px of padding on
	   the right. Measured: every item lands within a pixel of the original with this. */
	padding-right: 20px;
}

/* Menu items are INK, not blue. Blue marks the page you are on, and nothing here is gold --
   measured off the original, where only "Home" was blue on the home page and every other item
   was #212121. */
.lal-nav a {
	font-family: var(--lal-serif);
	font-size: 16px;
	font-weight: 700;
	line-height: 2;
	letter-spacing: 0.48px;
	color: var(--lal-ink);
	text-decoration: none;
	white-space: nowrap;
}

.lal-nav a:hover,
.lal-nav a[aria-current='page'] {
	color: var(--lal-blue);
}

/* The hamburger, shown only at the narrow breakpoint. */
.lal-header__toggle {
	display: none;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 0;
	background: none;
	color: var(--lal-blue);
	cursor: pointer;
}

.lal-header__toggle svg {
	width: 24px;
	height: 24px;
	fill: currentColor;
}

/* The telephone mark, shown only on the phone-width masthead. */
.lal-header__phone {
	display: none;
	color: var(--lal-blue);
}

.lal-header__phone svg {
	display: block;
	width: 25px;
	height: 25px;
	fill: currentColor;
}

/* ==========================================================================
   D. Page sections
   ========================================================================== */

/* --- 1. Hero ---------------------------------------------------------------
   Full-bleed photograph, dark tint, centred uppercase serif title, gold circle ornaments left and
   right of it, and the appointment button beneath. */

/* The title sits 277px below the section's top and the button leaves 234px beneath it, and the
   padding says exactly that. The block is NOT centred: centring would let its own height move the
   title, and the arcs below are hung from the title's top edge. These are the HOME PAGE's numbers;
   every other page's hero was placed by hand on the original and states its own measurements in
   its pattern (lal_sec_hero), which arrive as the band's inline min-height and top padding. */
.lal-hero {
	min-height: 755px;
	padding: 277px 0 234px;
	text-align: center;
}

/* A hero placed from its pattern: the height is the band's own, so nothing pads it from below,
   and the tint is the 0.7 the service pages paint rather than the home page's 0.4. */
.lal-hero--placed {
	padding-bottom: 0;
}

.lal-hero--tint-70.lal-band--tinted::before {
	background: rgba(0, 0, 0, 0.7);
}

/* Read off each page's own ::before: 0.7 on the tax page, 0.6 on every other placed hero. */
.lal-hero--tint-60.lal-band--tinted::before {
	background: rgba(0, 0, 0, 0.6);
}

/* The two consulting pages wrap their title after "Consulting", which only a measure under
   777px does; 815 lets "Services" join the first line. */
.lal-hero .lal-hero__title--750 {
	max-width: 750px;
}

.lal-hero__inner {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 23px;
}

.lal-hero h1 {
	max-width: 815px;
	margin: 0;
	font-family: var(--lal-serif);
	font-size: 38px;
	font-weight: 400;
	/* `normal`, as the original leaves it: with the second half at 42px the three line boxes are
	   not equal, so a fixed value cannot match them. */
	line-height: normal;
	letter-spacing: 1.52px;
	text-transform: uppercase;
	color: var(--lal-white);
}

/* Part of a hero title can be set larger -- the home page runs its second half at 42px. */
.lal-hero__xl {
	font-size: 42px;
}

/* The hero's button is 178px wide with no horizontal padding, so "Schedule an Appointment" wraps
   onto two lines exactly as it does on the original. The closing call to action's button is wider
   (197px) and stays on one line -- they are not the same size, so they are not styled together. */
.lal-hero .wp-block-button__link {
	width: 178px;
	padding-inline: 0;
}

/* 200x50 on the original, the label centred in it. */
.lal-cta .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 200px;
	min-height: 50px;
	padding-inline: 0;
}

/* The two gold arcs the title sits inside. Each carries its white rules drawn into the art, so
   where the box sits decides whether a rule clears the title or strikes through it.
   Measured on the original at 1440px: each box 482.4x320, the left one ending 44px short of
   centre and the right one starting 21px past it -- two facing arcs with a gap between them, not
   a closed ellipse. VERTICALLY THEY HANG FROM THE TITLE'S TOP EDGE, not from the block's centre:
   the original places arcs and title from the top of one grid cell (arcs at 64px and 65px, title
   at 123px), so the left arc's top is always 59px above the title and the right arc's 58px,
   whatever the button beneath does.
   The 700x500 art is FITTED into the box (object-fit: contain, so the curve paints 448 wide with
   a letterbox either side), exactly as the original does; stretched to the box the two arcs read
   as one much larger oval. Decorative, so hidden from assistive tech in the markup. */
.lal .lal-hero__arc {
	position: absolute;
	top: -59px;
	width: 482.4px;
	height: 320px;
	object-fit: contain;
	max-width: 40vw;
	pointer-events: none;
}

.lal-hero__arc--left {
	right: 50%;
	margin-right: 44px;
}

.lal-hero__arc--right {
	top: -58px;
	left: 50%;
	margin-left: 21px;
}

/* --- 2. Intro --------------------------------------------------------------
   Copy on the left, a cluster of three circular photographs on the right. */

/* 900 tall on the original: the 564px photo cluster sits 105px from the top, and the copy's first
   line starts 132px below the cluster's top edge. Neither is centred. The height is a minimum
   rather than the sum of paddings so a page can state its own (the estate planning page's is 830,
   from its pattern) and so a copy block placed lower still ends inside the band. */
.lal-intro {
	padding: 105px 0 0;
	min-height: 900px;
}

.lal-intro__grid > .lal-prose {
	padding-top: 132px;
}

/* Not two equal columns: the copy takes ~521px and the photo cluster 470, with 72 between them.
   The right column is 492 rather than 470 so the cluster's 22px inset from the row edge has
   somewhere to go. */
.lal-intro__grid {
	display: grid;
	grid-template-columns: 1fr minmax(0, 492px);
	align-items: start;
	gap: 72px;
}

/* The cluster's own box is NOT square. Measured on the original at 1440px it is 470 wide by 564
   tall, and the three discs are 450, 289 and 129 across -- a much larger lead photo and a much
   smaller third one than a square arrangement gives you. Every value below is that measurement
   expressed against the box, so the arrangement holds as it scales. */
.lal-intro__cluster {
	position: relative;
	width: 100%;
	max-width: 470px;
	aspect-ratio: 470 / 564;
	/* The cluster stops 22px short of the row edge on the original rather than running to it. */
	margin-inline: auto 22px;
}

.lal-intro__photo {
	position: absolute;
	aspect-ratio: 1 / 1;
	border-radius: 50%;
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
}

/* Lead disc: nearly the full width of the box, at the top. */
.lal-intro__photo--a {
	top: 0;
	left: 2.6%;
	width: 95.7%;
}

/* Middle disc, tucked under the lead one's lower-right and overlapping it. */
.lal-intro__photo--b {
	top: 60.3%;
	left: 38.5%;
	width: 61.5%;
	/* Framed on the right-hand edge of its photograph, as the original crops it. */
	background-position: 100% 50%;
}

/* Small disc at the lower left -- a quarter of the box, not a third. */
.lal-intro__photo--c {
	top: 77.1%;
	left: 0;
	width: 27.4%;
}

/* --- 3. Service cards ------------------------------------------------------
   Photographic band, centred heading, lede, then a two-column grid of gold-outlined cards. */

.lal-cards {
	/* 1558 tall on the original: 72px above the heading and 72 below the last card. */
	padding-block: 72px;
	/* The photograph stays put while the page scrolls past it, as the original's does. */
	background-attachment: fixed;
}

/* The lede centres on the row and runs its full width on the home page; where a page's wraps on
   a narrower measure (the tax page's on 810px, the consulting pages' on 1020), the pattern states
   it and the group's constrained layout carries it. */
.lal .lal-cards__lede {
	margin: 0 auto 30px;
	text-align: center;
	color: var(--lal-white);
}

/* Two 532px columns 21px apart on the row, 30px between rows -- the same pair of columns the why
   and tips sections use. Each measured column is a minmax(0, …) ceiling rather than a fixed
   width, here and on the footer, why, tips and local grids: at 1440 the row has room and they
   sit at the measured size, and on a narrower screen they shrink together instead of pushing
   the page sideways. */
.lal-cards__grid {
	display: grid;
	grid-template-columns: minmax(0, 531.6px) minmax(0, 531.6px);
	gap: 30px 21.6px;
}

/* Outlined, never filled: the shade behind a card is the band's own tint. The outline alternates
   gold and white in a checkerboard -- gold top-left and bottom-right, white the other two. */
.lal-card {
	padding: 50px 20px;
	border: 1px solid var(--lal-gold);
	border-radius: 20px;
	color: var(--lal-white);
}

.lal-card:nth-child(4n + 2),
.lal-card:nth-child(4n + 3) {
	border-color: var(--lal-white);
}

/* The rule under a card's title: 220px, 2px thick, white fading to nothing, 14px below the title
   and 24px above the copy. */
.lal-card .lal-rule {
	width: 220.3px;
	height: 2px;
	margin: 14px 0 24px;
	border: 0;
	background: linear-gradient(to right, var(--lal-white), transparent);
}

.lal-card h3 {
	margin: 0;
	font-family: var(--lal-serif);
	font-size: 24px;
	font-weight: 400;
	line-height: 1.5;
	text-transform: uppercase;
	color: var(--lal-white);
}

.lal-card p,
.lal-card li {
	color: var(--lal-white);
}

/* The nonprofit page uses the same card with a tier name, a strapline and a price, and sets it
   differently: the strapline is the serif at 500 in italic on its natural line height, the
   paragraphs run 24px lines rather than 32, the rule sits 29px tall with its margins, and the
   price is 20px bold 25px under the last paragraph. All measured on that page. */
.lal-card .lal-card__strap {
	margin: 0;
	font-family: var(--lal-serif);
	font-size: 16px;
	font-style: italic;
	font-weight: 500;
	line-height: normal;
}

.lal-card--tier .lal-rule {
	margin: 10px 0 12px;
}

.lal-card--tier p {
	margin-bottom: 24px;
	line-height: 1.5;
}

.lal-card--tier .lal-card__price {
	margin-top: 25px;
	font-size: 20px;
	font-weight: 700;
	line-height: 1.2;
}

/* Three tier cards: the third takes a row of its own, at the column width, centred. */
.lal-cards__grid > .lal-card--tier:nth-child(3):last-child {
	grid-column: 1 / -1;
	width: 531.6px;
	justify-self: center;
}

/* --- 4. Why ----------------------------------------------------------------
   A photograph filling the left half, copy on the right. Full-bleed on the image side, which is
   why the row is not used for the whole section. */

/* Two 531.5px columns 21.7px apart, the pair centred on the row -- NOT two full-bleed halves. */
.lal-why {
	display: grid;
	grid-template-columns: minmax(0, 531.5px) minmax(0, 531.5px);
	gap: 21.7px;
	align-items: stretch;
	width: 100%;
	max-width: 1084.8px;
	margin-inline: auto;
}

.lal-why__photo {
	/* Framed on the top edge of its photograph, both bottom corners rounded. As tall as the copy
	   beside it; the home page alone pins it (777.2 on the original), from its pattern. */
	border-radius: 0 0 100px 100px;
	background-position: 50% 0%;
	background-size: cover;
	background-repeat: no-repeat;
}

/* Placed from the top, not centred: the heading sits 57px below the band's edge and the copy runs
   to within 6px of its bottom. */
.lal-why__body {
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	padding: 54px 0 0;
	max-width: none;
}

/* --- 5. Pull quote ---------------------------------------------------------
   A white band with a blue bar along its foot and a blue disc at its right edge -- all one image
   -- carrying a single large sentence in ink. Not a blue band: the sentence would vanish on it. */

.lal-quote {
	position: relative;
	overflow: hidden;
	background-repeat: no-repeat;
	background-position: right center;
	background-size: cover;
}

.lal-quote__inner {
	display: flex;
	align-items: center;
	/* 291 tall on the original. */
	min-height: 291px;
	padding-block: 0;
}

/* 32px over three lines on a 711px measure, inset 16px from the row. */
.lal-quote p {
	max-width: 711.3px;
	margin: 0 0 0 16px;
	font-size: 32px;
	font-weight: 300;
	line-height: 1.5;
	color: var(--lal-ink);
}

/* --- 6. Process ------------------------------------------------------------
   Solid blue. Numbered steps: a large serif numeral with a hairline above and below it, then the
   step title and its explanation. */

.lal-process {
	/* 1121 tall on the original: 72px above the heading and 72 below the closing line. */
	padding-block: 72px;
	background: var(--lal-blue);
	color: var(--lal-white);
}

.lal .lal-process__lede {
	margin: 0 0 6px;
	color: var(--lal-white);
}

/* The hairline artwork's box is 155.1x131, the text 20px to its right, 10px between steps. */
.lal-process__step {
	display: grid;
	grid-template-columns: 155.1px 1fr;
	align-items: center;
	gap: 20px;
	min-height: 131px;
}

.lal-process__step + .lal-process__step {
	margin-top: 10px;
}

.lal-process__num {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100%;
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
	font-family: var(--lal-serif);
	font-size: 60px;
	line-height: 1;
	color: var(--lal-white);
}

/* A 48px line box with the explanation directly beneath it; the pair centres on the artwork. */
.lal-process__step h3 {
	margin: 0;
	font-family: var(--lal-serif);
	font-size: 24px;
	font-weight: 700;
	line-height: 2;
	letter-spacing: 0.09em;
	text-transform: none;
	color: var(--lal-white);
}

.lal-process__step p {
	margin: 0;
	font-size: 16px;
	line-height: 2;
	color: var(--lal-white);
}

/* The third and fourth steps' explanations run on an 889.6px measure, 20px short of the others',
   which is where their lines wrap. Per-widget geometry measured on the home page; the steps are
   the row's third to seventh children, after the heading and the lede. */
.lal-process__step:nth-child(5) p,
.lal-process__step:nth-child(6) p {
	max-width: 889.6px;
}

.lal .lal-process__close {
	margin: 10px 0 0;
	font-size: 20px;
	text-align: center;
	color: var(--lal-white);
}

/* On every page but the home page the section is 8px taller: the badge's box is 90px tall rather
   than 78.5 (which puts the lede 3.5px lower), and the first step starts 4.5px further under the
   lede. Measured on the tax page and shared by the other four. */
.lal-process--service .lal-heading {
	margin-bottom: 25px;
}

.lal-process--service .lal-process__lede {
	margin-bottom: 10.5px;
}

/* --- 7. Tips ---------------------------------------------------------------
   Copy on the left, a photograph filling the right half with one rounded corner. */

/* The mirror of the why section: copy left, photograph right, the same two 531.5px columns. */
.lal-tips {
	display: grid;
	grid-template-columns: minmax(0, 531.5px) minmax(0, 531.5px);
	gap: 21.7px;
	align-items: stretch;
	width: 100%;
	max-width: 1084.8px;
	margin-inline: auto;
}

/* Placed from the top like the why section's copy: the heading sits 57px below the band's edge. */
.lal-tips__body {
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	padding: 54px 0 0;
	margin-left: 0;
	max-width: none;
}

/* A tip is a one-item list carrying the bold title, then its own paragraph flush with the column;
   the pair sits tight, and the 10px breath comes only before the closing line. */
.lal-tip .lal-list,
.lal-tip p {
	margin: 0;
}

.lal-tip + p,
.lal-tips__body .lal-prose > .lal-deflist + p,
.lal-tips__items + p {
	margin-top: 10px;
}

.lal-tips__photo {
	/* Both bottom corners rounded. As tall as the copy beside it; the home page alone pins it
	   (875.2 on the original), from its pattern. */
	border-radius: 0 0 100px 100px;
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
}

/* --- 8. Local difference ---------------------------------------------------
   A circular photograph on the left, heading and copy on the right. */

.lal-local {
	/* 618 tall on the original: the 500.7px disc sits 94.6px from the top and 22.7 from the bottom. */
	padding: 94.6px 0 22.7px;
}

/* A 500.7px disc and a 520.7px measure, 53.4px apart, the pair flush with the row's right edge
   (which leaves 10px spare on the left). The copy is centred on the disc. */
.lal-local__grid {
	display: grid;
	grid-template-columns: minmax(0, 500.7px) minmax(0, 520.7px);
	justify-content: end;
	align-items: center;
	gap: 53.4px;
}

.lal-local__photo {
	width: 100%;
	max-width: 500.7px;
	margin-inline: auto;
	aspect-ratio: 1 / 1;
	border-radius: 50%;
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
}

/* --- 9. Divider band -------------------------------------------------------
   A purely decorative strip between the body of a page and its closing call to action. */

.lal .lal-divider {
	/* 300 on the original, followed by an empty 240px section before the closing call to
	   action -- carried here as the band's own bottom margin rather than an empty element. */
	position: relative;
	height: 300px;
	/* The band's blue does not stop at the section edge on the original -- it runs on for the
	   240px spacer beneath, up to the closing call to action. The margin reserves that space and
	   the pseudo-element paints it, which keeps the band image itself untouched. */
	margin-bottom: 240px;
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
}

.lal-divider::after {
	content: '';
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	height: 240px;
	background: var(--lal-blue);
}

/* The service pages have no spacer: the closing call to action follows the band directly. */
.lal .lal-divider--flush {
	margin-bottom: 0;
}

.lal-divider--flush::after {
	content: none;
}

/* --- 10. Closing call to action --------------------------------------------
   Photographic band. A gold-outlined card on the left carries a one-line claim beside its glyph;
   the closing copy and the button sit on the right. */

.lal-cta {
	/* 416 tall on the original: 72px above the copy and 72 below the button. */
	padding-block: 72px;
}

/* A 422.4px card and the copy 21.7px to its right; the card stretches to the copy's height and
   centres its claim. */
.lal-cta__grid {
	display: grid;
	grid-template-columns: 422.4px 1fr;
	align-items: stretch;
	gap: 21.7px;
}

/* Outlined in white on the tinted band, never filled. The glyph sits 55px in from the card's edge
   and the claim 54px to its right. */
.lal-cta__card {
	display: flex;
	align-items: center;
	gap: 54.5px;
	padding: 20px 20px 20px 54.7px;
	border: 1px solid var(--lal-white);
	border-radius: 20px;
	color: var(--lal-white);
}

.lal-cta__glyph {
	flex: 0 0 auto;
	display: block;
	width: 60px;
	height: 60px;
	color: var(--lal-white);
}

.lal-cta__glyph svg {
	width: 100%;
	height: 100%;
}

.lal-cta__card p {
	max-width: 215.2px;
	margin: 0;
	font-size: 16px;
	line-height: 2;
}

/* The copy's own measure is 639.38px, just short of its column, and that fraction decides where
   the first paragraph wraps. */
.lal-cta__body p {
	max-width: 639.3px;
	margin-bottom: 15px;
	color: var(--lal-white);
}

.lal-cta__body .wp-block-buttons {
	margin-top: 15px;
}

/* The service pages turn the proportions round: a 667.6px card carrying a claim on a 483px
   measure, the copy on 395px beside it, 76px of padding, and the button 47.5px under the copy
   (the extra 32.5 rides on the button block itself; see lal_sec_cta). 346 tall on the tax page. */
.lal-cta--service {
	padding-block: 76px;
}

.lal-cta--service .lal-cta__grid {
	grid-template-columns: 667.6px 1fr;
}

.lal-cta--service .lal-cta__card p {
	max-width: 483px;
}

.lal-cta--service .lal-cta__body p {
	max-width: 395px;
}

/* The contact page's band: one 457px card at x60 -- 117.6px left of the row -- 70.5px into a
   468px band, its glyph (50px), claim (four centred 32px lines on a 420px measure) and two-line
   button stacked, 35px of padding above and 30 below. The right-hand side is empty on the
   original; the theme's own address line takes it. */
.lal-cta--stack {
	padding-block: 70.5px 69.5px;
}

.lal-cta--stack .lal-cta__grid {
	grid-template-columns: 457px 1fr;
	align-items: start;
	gap: 40px;
	margin-left: -117.6px;
}

.lal-cta--stack .lal-cta__card {
	flex-direction: column;
	gap: 0;
	padding: 35px 18px 30px;
	text-align: center;
}

.lal-cta--stack .lal-cta__glyph {
	width: 50px;
	height: 50px;
	margin-bottom: 25px;
}

.lal-cta--stack .lal-cta__card p {
	max-width: 420px;
	margin: 0 0 3px;
}

.lal-cta--stack .lal-cta__card .wp-block-buttons {
	justify-content: center;
	margin: 0;
}

.lal-cta--stack .wp-block-button__link {
	width: 178px;
	min-height: 0;
	padding-inline: 0;
}

/* --- 11. Team --------------------------------------------------------------
   The contact page's four biographies, photograph and copy alternating sides. */

/* The biographies run on a wider row than the rest of the site, 1136px (32px gutters), and start
   straight under the hero. Each is a 216.1x308 portrait, 24px from copy set at 18px on 27px
   lines, the pair centred on each other; a row pads 60px, a reversed row 52 above and 53 below.
   All measured on the original. */
.lal-team {
	padding-block: 0;
}

.lal-team .lal-row {
	--lal-gutter: 32px;
}

/* Each row is a full-bleed band; the first and third reverse out white on the site's blue. */
.lal-team__row {
	padding-block: 60px;
}

.lal-team__row--blue {
	background: var(--lal-blue);
}

.lal-team__row--blue .lal-team__copy p {
	color: var(--lal-white);
}

.lal-team__grid {
	display: grid;
	grid-template-columns: 216.1px 1fr;
	align-items: center;
	gap: 24px;
}

/* Reversed rows put the photograph on the right without changing the reading order. */
.lal-team__row--reverse {
	padding-block: 52px 53px;
}

.lal-team__row--reverse .lal-team__grid {
	grid-template-columns: 1fr 216.1px;
}

.lal-team__row--reverse .lal-team__photo {
	order: 2;
}

.lal-team__photo {
	margin: 0;
}

.lal-team__photo img {
	display: block;
	width: 216.1px;
	height: 308px;
	object-fit: contain;
}

.lal-team__copy p {
	font-size: 18px;
	line-height: 1.5;
}

/* --- 12. Contact form ------------------------------------------------------
   The Contact Form 7 form inside a white card on the blue band (patterns/page-contact.php). It
   carries the look the form had as WPForms Lite (its "modern" markup at default settings): bold
   labels above white bordered fields, "First" and "Last" sub-labels under the name, a note under
   the cell phone, and a blue Submit on the left. The values are WPForms' own defaults, read off
   that render at 1440px. The markup is the form template in provision.json. Where the form is not
   installed, the card carries a fallback note instead. */

/* The site's blue, full width, the card 75px from its top and 70 from its bottom. */
.lal-form {
	padding-block: 75px 70px;
	background: var(--lal-blue);
}

/* A white card on the blue band, the row's full width with 20px radii and 32px of side padding. */
.lal-form__inner {
	padding: 12px 32px;
	border-radius: 20px;
	background: var(--lal-white);
	color: var(--lal-ink);
}

/* The fallback shown when no CF7 form named `contact` exists, or the plugin is inactive. */
.lal-form__note {
	margin: 0 0 12px;
	text-align: center;
	font-size: 14px;
	color: var(--lal-muted);
}

/* 24px above and below the form, as WPForms' container had. */
.lal-cf7 {
	margin-block: 24px;
	font-size: 16px;
	line-height: 19px;
}

/* 15px above and below every field. */
.lal-cf7__field {
	margin: 0;
	padding: 15px 0;
}

.lal-cf7__label {
	display: block;
	margin: 0 0 15px;
	color: rgba(0, 0, 0, 0.85);
	font-size: 16px;
	font-weight: 700;
	line-height: 19px;
}

.lal-cf7__required {
	color: #d63637;
	font-weight: 400;
}

/* First and last name side by side, 20px apart. */
.lal-cf7__row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	column-gap: 20px;
}

.lal-cf7__part {
	display: block;
	min-width: 0;
}

.lal-cf7__sublabel,
.lal-cf7__description {
	display: block;
	margin-top: 5px;
	color: rgba(0, 0, 0, 0.55);
	font-size: 14px;
	line-height: 17px;
}

.lal-cf7__sublabel {
	font-weight: 400;
}

.lal-cf7__description {
	font-weight: 300;
}

.lal-cf7 .wpcf7-form-control-wrap {
	display: block;
}

.lal-cf7 input[type="text"],
.lal-cf7 input[type="email"],
.lal-cf7 input[type="tel"],
.lal-cf7 select,
.lal-cf7 textarea {
	box-sizing: border-box;
	display: block;
	width: 100%;
	height: 43px;
	margin: 0;
	padding: 0 14px;
	border: 1px solid rgba(0, 0, 0, 0.25);
	border-radius: 3px;
	background-color: #fff;
	color: rgba(0, 0, 0, 0.7);
	font-family: var(--lal-sans);
	font-size: 16px;
	font-weight: 400;
	line-height: 19px;
	box-shadow: none;
}

.lal-cf7 ::placeholder {
	color: rgba(0, 0, 0, 0.35);
	opacity: 1;
}

/* WPForms draws its own small caret; the native arrow is replaced to match. */
.lal-cf7 select {
	padding-right: 34px;
	appearance: none;
	background-image: linear-gradient(45deg, transparent 50%, rgba(0, 0, 0, 0.45) 50%), linear-gradient(135deg, rgba(0, 0, 0, 0.45) 50%, transparent 50%);
	background-position: right 18px center, right 14px center;
	background-size: 4px 4px, 4px 4px;
	background-repeat: no-repeat;
}

.lal-cf7 textarea {
	height: 120px;
	padding: 14px;
	resize: vertical;
}

/* Focus as WPForms shows it: the border and a 1px ring in the button blue. */
.lal-cf7 input:focus,
.lal-cf7 select:focus,
.lal-cf7 textarea:focus {
	border-color: #066aab;
	box-shadow: 0 0 0 1px #066aab;
	outline: none;
}

.lal-cf7 .wpcf7-turnstile {
	margin-top: 10px;
}

/* A 41px blue button with white type, 10px under the last field, on the left. CF7's spinner sits
   beside it. */
.lal-cf7__submit {
	display: flex;
	align-items: center;
	margin: 10px 0 0;
}

.lal-cf7 .wpcf7-submit {
	height: 41px;
	padding: 0 15px;
	border: 0;
	border-radius: 3px;
	background-color: #066aab;
	color: #fff;
	font-family: var(--lal-sans);
	font-size: 17px;
	font-weight: 500;
	line-height: 17px;
	cursor: pointer;
}

.lal-cf7 .wpcf7-submit:hover,
.lal-cf7 .wpcf7-submit:focus-visible {
	background-image: linear-gradient(rgba(0, 0, 0, 0.15), rgba(0, 0, 0, 0.15));
}

.lal-cf7 .wpcf7-submit:focus-visible {
	outline: 2px solid #066aab;
	outline-offset: 2px;
}

.lal-cf7 .wpcf7-not-valid {
	border-color: #d63637;
}

.lal-cf7 .wpcf7-not-valid-tip {
	margin-top: 5px;
	color: #d63637;
	font-size: 14px;
	line-height: 17px;
}

/* CF7's response line under the form: sent, invalid, or the send failure with the phone and email. */
.lal-form .wpcf7 form .wpcf7-response-output {
	margin: 0 0 24px;
	padding: 10px 12px;
	border-radius: 3px;
	font-size: 16px;
	line-height: 1.5;
}

@media (max-width: 600px) {
	.lal-cf7__row {
		grid-template-columns: 1fr;
		row-gap: 15px;
	}
}

/* --- 13. Long-form document ------------------------------------------------
   The privacy policy page: a single measure of running text. */

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

.lal-doc__inner {
	max-width: 860px;
	margin-inline: auto;
}

.lal-doc h2 {
	margin: 40px 0 12px;
}

.lal-doc h2:first-child {
	margin-top: 0;
}

/* --- 8b. Closing note ------------------------------------------------------
   A paragraph or two ending a page's body, belonging to no section. */

/* 190 tall on the bookkeeping page: five 32px lines on the row's full width, 15px above and
   below, set flush left. */
.lal-note {
	padding-block: 15px;
}

/* --- Placeholder -----------------------------------------------------------
   Marks copy the port could not carry across, so it is impossible to publish by accident. Used
   on the terms page, where the original embeds the platform's own legal documents. */

.lal-placeholder {
	padding: 18px 20px;
	border-left: 4px solid var(--lal-gold);
	background: #fff8ec;
	font-size: 15px;
	line-height: 1.8;
}