/* Classic state-page look — the Beaver Builder /ak/ page rebuilt on core
   blocks. Enqueued only on pages carrying the legalatoms/classic-header block
   (LegalAtoms_Gutenberg_Pilot::is_classic()), so nothing here reaches the BB
   pages or the Harbor pages.

   Every size and colour is measured off the live BB page (rows 10864, header
   11031, footer 20686): BB's 20px module margin is the gutter, rows are
   1320px (hero), 1280px or 1337px wide, and BB's 767px breakpoint stacks the
   columns. Class names are stable; the page markup references them. */

/* ============ Page scaffold ============ */
body.la-chrome-off.la-classic-body {
	padding-top: 0;
}

/* A sticky Themer header (layout 6982) also matches these pages. It is hidden
   with the rest of the BB chrome, but its script still pads .fl-page (inline)
   by the header's height to clear it. */
body.la-classic-body .fl-page {
	padding-top: 0 !important;
}

/* The theme's content column is a 1020px container; alignfull escapes it
   with 100vw, which runs under the vertical scrollbar. Widen the column
   instead so the page is exactly the viewport's width, as BB rows are. */
body.la-classic-body .fl-content-full.container {
	max-width: none;
	padding-left: 0;
	padding-right: 0;
	width: 100%;
}

body.la-classic-body .fl-content-full > .row {
	margin-left: 0;
	margin-right: 0;
}

body.la-classic-body .fl-content {
	padding-left: 0;
	padding-right: 0;
}

body.la-classic-body .fl-post-content > .la-classic.alignfull,
body.la-classic-body .la-classic {
	margin: 0 !important;
	max-width: none;
	width: 100%;
}

/* The skin's alignfull breakout (calc(50% - 50vw), max-width 100vw) is
   redundant once the column is full width, and would re-add the scrollbar
   overhang on every full-width section. */
body.la-classic-body .la-classic .alignfull {
	margin-left: 0 !important;
	margin-right: 0 !important;
	max-width: none !important;
	width: auto !important;
}

.la-classic {
	background: #FAF8F6;
	color: #2A406A;
	font-family: "Public Sans", sans-serif;
}

.la-classic .wp-block-group__inner-container {
	position: relative;
}

/* A section inserted into a Beaver Builder layout (the Tribal Court section on
   /ak/, see includes/ak-tribal-court.php). BB rows land on fractional pixels,
   so tuck the section 1px under the row above to hide the seam. */
.fl-builder-content > .la-classic {
	margin-top: -1px;
	position: relative;
}

/* ...and it keeps /ak/'s own Beaver Builder type rather than the scale
   below, so it matches the case sections around it. */
.fl-builder-content > .la-classic .la-cl-heading {
	font-weight: 400;
	line-height: 51px;
	text-transform: none;
}

.fl-builder-content > .la-classic .la-cl-box__title {
	line-height: 33.6px;
}

.fl-builder-content > .la-classic .la-cl-box p {
	font-size: 16px;
	line-height: 24px;
}

.fl-builder-content > .la-classic .la-cl-btn-outline .wp-block-button__link {
	font-size: 16px;
	font-weight: 400;
	letter-spacing: 1px;
}

/* BB leaves 100px of empty column under each case card's buttons (desktop). */
@media (min-width: 993px) {
	.fl-builder-content > .la-classic .la-cl-row--cards .la-cl-box {
		padding-bottom: 120px;
	}
}

@media (min-width: 768px) and (max-width: 992px) {
	.fl-builder-content > .la-classic .la-cl-box p {
		font-size: 15px;
		line-height: 21.75px;
	}
}

/* Grid/flex containers lay out their cards directly: the inner container
   core injects on classic themes would otherwise be the only flex child. */
.la-cl-cols > .wp-block-group__inner-container,
.la-cl-box > .wp-block-group__inner-container,
.la-cl-hero__copy > .wp-block-group__inner-container {
	display: contents;
}

.la-classic p {
	margin: 0;
}

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

.la-classic .wp-block-image {
	margin: 0;
}

/* ============ Rows ============ */
.la-cl-row {
	overflow: hidden;
	padding: 0 20px 80px;
	position: relative;
}

.la-cl-row > .wp-block-group__inner-container {
	margin: 0 auto;
	max-width: 1280px;
}

.la-cl-row--beige {
	background: #E7E5E0;
}

.la-cl-row--light {
	background: #FAF8F6;
}

.la-cl-row--cards {
	padding-bottom: 180px;
}

.la-cl-row--cards > .wp-block-group__inner-container {
	max-width: 1337.33px;
}

.la-cl-row--features {
	padding-bottom: 100px;
}

.la-cl-row--notes {
	padding: 20px 20px 100px;
}

.la-cl-row--contact {
	padding-bottom: 50px;
}

/* ============ Wavy row edges ============
   BB's "wavy" shape layer: one 800x102 path stretched to the row width and
   243px tall, then scaled/skewed per edge. Unlike BB, which paints the
   bottom edge above the row content, both edges sit behind it: on phones and
   tablets the row padding is shorter than the wave, and BB's layering hid the
   hero title and its button. */
.la-cl-wave-hero::after,
.la-cl-wave-section::before,
.la-cl-wave-section::after {
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 800 102' preserveAspectRatio='none'%3E%3Cpath fill='%23FAF8F6' d='M0,0 L800,0 C717.140625,0 726.058594,62.0585937 669.660156,62.0585937 C613.261719,62.0585937 604.234948,10.4922726 561.091797,10.4922726 C517.948646,10.4922726 522.667969,72.7050942 462.202976,54.171875 C401.737983,35.6386558 410.177721,100 372.386628,100 C334.595534,100 319.909894,54.171875 292.280298,54.171875 C264.650702,54.171875 259.270492,78.4116686 220.022711,72.7050942 C180.774931,66.9985197 179.391645,18.53125 120.752463,33.0078125 C62.1132812,47.484375 94.9472656,0 0,0 Z'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat;
	content: "";
	height: 243px;
	left: 0;
	pointer-events: none;
	position: absolute;
	width: 100%;
}

.la-cl-wave-hero::after {
	bottom: -1px;
	transform: scaleX(-6) scaleY(-1);
	z-index: 0;
}

/* Edges overlap the row by 1px (clipped by its overflow) so a row that lands
   on a fractional pixel shows no hairline of its own background. */
.la-cl-wave-section::before {
	top: -1px;
	transform: skewX(40deg) scaleX(-4) scaleY(1);
	z-index: 0;
}

.la-cl-wave-section::after {
	bottom: -1px;
	transform: skewX(-76deg) scaleX(-5.9) scaleY(-1);
	z-index: 0;
}

.la-cl-row > .wp-block-group__inner-container {
	z-index: 1;
}

/* ============ Hero ============ */
.la-cl-hero {
	padding: 60px 20px 140px;
}

.la-cl-hero > .wp-block-group__inner-container {
	max-width: 1320px;
}

.la-cl-hero__cols {
	align-items: center;
	display: flex;
	flex-wrap: nowrap;
}

.la-cl-hero__copy {
	flex: 0 0 53.5%;
	padding: 20px 0 7px;
}

.la-classic .la-cl-hero__title {
	color: #2A406A;
	font: 400 62px / 1.15 "Public Sans", sans-serif;
	letter-spacing: normal;
	margin: 0 20px;
	padding-bottom: 15px;
	text-transform: none;
}

.la-classic .la-cl-hero__lede {
	color: #5EA3CF;
	font: 400 24px / 1.45 "Public Sans", sans-serif;
	margin: 0 20px;
}

/* BB's hero columns are equal height with their content centred; the
   illustration carries a 20px right and bottom margin, flush left. */
.la-classic .la-cl-hero__media {
	align-self: center;
	flex: 1 1 0;
	min-width: 0;
	padding: 0 20px 20px 0;
}

.la-cl-hero__media img {
	display: inline-block;
}

/* ============ Type scale ============
   Five sizes: hero title 62, section heading 34, sub-heading and hero
   subtitle 24, body 18, buttons 15 (no added letter-spacing anywhere).
   The Tribal Court section inserted into /ak/ keeps /ak/'s own BB type (the
   .fl-builder-content > .la-classic rules near the top of this file). */

/* ============ Section headings ============ */
.la-classic .la-cl-heading {
	color: #2A406A;
	font: 700 34px / 1.25 "Public Sans", sans-serif;
	letter-spacing: normal;
	margin: 10px 20px 20px;
	text-transform: uppercase;
}

.la-classic .la-cl-row--steps .la-cl-heading {
	margin-top: 30px;
}

/* A site-wide BB layout bundle tightens every h1-h5 to -0.5px (!important)
   at 768px and below; the Gutenberg pages keep their headings untracked. */
body.la-classic-body .la-classic :is(h1, h2, h3) {
	letter-spacing: normal !important;
}

.la-classic .la-cl-heading::after {
	background: #5AA1CB;
	content: "";
	display: block;
	height: 6px;
	margin-top: 20px;
	width: 100px;
}

.la-classic .la-cl-section-lede {
	color: #64677F;
	font: 400 18px / 1.55 "Public Sans", sans-serif;
	margin: 0 20px;
}

/* ============ Columns ============ */
.la-cl-cols {
	align-items: flex-start;
	display: flex;
	flex-wrap: wrap;
}

.la-cl-cols > .wp-block-group__inner-container > *,
.la-cl-cols > * {
	min-width: 0;
}

/* Card grids. Each card spans the grid's rows through a subgrid, so the
   illustrations, titles, text and buttons line up across a row even when a
   title wraps or one illustration is taller (BB lets each column float). */
@media (min-width: 768px) {
	.la-cl-cols--3,
	.la-cl-cols--4 {
		display: grid;
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.la-cl-cols--4 {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}

	.la-cl-cols--3 > .wp-block-group__inner-container > .la-cl-box,
	.la-cl-cols--3 > .la-cl-box,
	.la-cl-cols--4 > .wp-block-group__inner-container > .la-cl-box,
	.la-cl-cols--4 > .la-cl-box {
		display: grid;
		grid-row: span 3;
		grid-template-rows: subgrid;
	}

	.la-cl-row--cards .la-cl-cols--3 > .wp-block-group__inner-container > .la-cl-box,
	.la-cl-row--cards .la-cl-cols--3 > .la-cl-box {
		grid-row: span 4;
	}

	.la-cl-box .wp-block-image {
		align-self: end;
	}

	.la-cl-box .wp-block-buttons {
		align-self: start;
	}
}

.la-cl-cols--2 > .wp-block-group__inner-container > *,
.la-cl-cols--2 > * {
	flex: 0 0 50%;
}

/* ============ Info boxes (illustration, title, text, buttons) ============ */
.la-cl-box {
	box-sizing: border-box;
	padding: 25px 20px 20px;
}

.la-cl-box .wp-block-image img {
	display: block;
}

/* Feature icons (Conveniences) render at BB's 100px icon size. */
.la-cl-row--features .la-cl-box .wp-block-image img {
	height: 100px;
	object-fit: contain;
	width: 100px;
}

.la-classic .la-cl-box__title {
	color: #2A406A;
	font: 700 24px / 1.3 "Public Sans", sans-serif;
	letter-spacing: normal;
	margin: 20px 0 10px;
	text-transform: none;
}

.la-classic .la-cl-box p {
	color: #2A406A;
	font: 400 18px / 1.55 "Public Sans", sans-serif;
	margin-bottom: 10px;
}

.la-classic .la-cl-box p a {
	color: #08104D;
	text-decoration: none;
}

.la-classic .wp-block-buttons {
	display: flex;
	flex-wrap: wrap;
}

.la-cl-box .wp-block-buttons {
	gap: 10px;
	margin-bottom: 0;
	margin-top: 30px;
}

.la-cl-row--steps .la-cl-box .wp-block-image img {
	max-width: min(250px, 100%);
}

.la-cl-row--cards .la-cl-box .wp-block-image img {
	width: 289px;
}

.la-cl-row--cards .la-cl-box {
	padding-bottom: 40px;
}

/* ============ Buttons ============ */
.la-classic .wp-block-button__link {
	box-sizing: border-box;
	font-family: "Public Sans", sans-serif;
	text-decoration: none;
	transition: background-color 0.2s, color 0.2s;
}

.la-classic .la-cl-btn-hero .wp-block-button__link {
	background: #006BAC;
	border: 2px solid #78C6DB;
	border-radius: 10px;
	color: #fff;
	font-size: 15px;
	font-weight: 600;
	line-height: 20px;
	min-width: 260px;
	padding: 17px 44px;
	text-align: center;
	width: auto;
}

/* Lined up with the title and text above it (BB sets it flush with the
   column edge, 20px left of the text). */
.la-cl-hero .wp-block-buttons {
	margin-top: 28px;
	padding-left: 20px;
}

.la-classic .la-cl-btn-outline .wp-block-button__link,
.la-classic .la-cl-btn-solid .wp-block-button__link,
.la-classic .la-cl-btn-soon .wp-block-button__link {
	border-radius: 10px;
	font-size: 15px;
	font-weight: 600;
	line-height: 24px;
	padding: 8px 10px;
	text-align: center;
	text-transform: uppercase;
	width: 155px;
}

.la-classic .la-cl-btn-outline .wp-block-button__link {
	background: transparent;
	border: 2px solid #83C6DC;
	color: #83C6DC;
}

.la-classic .la-cl-btn-outline .wp-block-button__link:hover,
.la-classic .la-cl-btn-outline .wp-block-button__link:focus {
	background: #83C6DC;
	border-color: #83C6DC;
	color: #2A406A;
}

.la-classic .la-cl-btn-solid .wp-block-button__link {
	background: #006BAC;
	border: 2px solid #00ABDB;
	color: #78C6DB;
}

.la-classic .la-cl-btn-solid .wp-block-button__link:hover,
.la-classic .la-cl-btn-solid .wp-block-button__link:focus {
	background: #78C6DB;
	border-color: transparent;
	color: #2A406A;
}

.la-classic .la-cl-btn-hero .wp-block-button__link:hover,
.la-classic .la-cl-btn-hero .wp-block-button__link:focus {
	background: #78C6DB;
	border-color: #78C6DB;
	color: #2A406A;
}

/* A case type with no LegalAtoms workflow yet: the START slot, not a link. */
.la-classic .la-cl-btn-soon .wp-block-button__link {
	background: transparent;
	border: 2px dashed #9AA3B5;
	color: #64677F;
	cursor: default;
}

/* ============ Notes row ============ */
/* Two notes side by side, top-aligned, each with its illustration in the
   same 180x150 box so the two titles sit on one line (BB centres the pairs
   against each other, which staggers them). */
.la-cl-cols--notes {
	align-items: flex-start;
	column-gap: 40px;
	padding: 0 20px;
}

.la-cl-notes__half {
	align-items: flex-start;
	display: flex;
}

.la-cl-notes__half > .wp-block-group__inner-container {
	display: contents;
}

.la-cl-notes__half--a,
.la-cl-notes__half--b {
	flex: 1 1 0;
	min-width: 0;
}

.la-cl-notes__half .wp-block-image {
	flex: 0 0 180px;
	padding: 20px 0 0;
}

.la-cl-notes__half .wp-block-image img {
	display: block;
	height: 150px;
	object-fit: contain;
	object-position: left top;
	width: 180px;
}

.la-cl-note {
	flex: 1 1 0;
	min-width: 0;
	padding: 20px 0 20px 24px;
}

.la-classic .la-cl-note__title {
	color: #2A406A;
	font: 700 24px / 1.3 "Public Sans", sans-serif;
	letter-spacing: normal;
	margin: 0;
	padding-bottom: 10px;
	text-transform: none;
}

.la-classic .la-cl-note__title::after {
	background: #5AA1CB;
	content: "";
	display: block;
	height: 4px;
	margin: 12px 0 16px;
	width: 64px;
}

.la-classic .la-cl-note p {
	color: #2A406A;
	font: 400 18px / 1.55 "Public Sans", sans-serif;
}

.la-classic .la-cl-note a {
	color: #006BAC;
}

/* ============ Contact row ============ */
.la-cl-cols--2 > .wp-block-group__inner-container > *,
.la-cl-cols--2 > * {
	box-sizing: border-box;
	padding: 20px;
}

.la-classic .la-cl-contact-list,
.la-classic .la-cl-note .la-cl-contact-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.la-classic .la-cl-contact-list li {
	color: #2A406A;
	font: 400 18px / 1.55 "Public Sans", sans-serif;
	margin: 0 0 10px;
}

.la-classic .la-cl-contact-list a {
	color: #006BAC;
}

/* Gravity Forms (legacy markup), as the PowerPack form module styles it on
   /ak/. The site's Additional CSS hides field labels and paints a blue
   Montserrat submit button; this scope restores the BB look. */
.la-classic .gform_wrapper {
	margin: 17px 0 16px;
	max-width: none;
}

.la-classic .gform_wrapper form {
	background: transparent;
	padding: 0;
}

.la-classic .gform_wrapper .gform_body {
	padding: 0;
}

.la-classic .gform_wrapper ul.gform_fields li.gfield {
	margin: 0 0 10px;
	padding-right: 0;
}

.la-classic .gform_wrapper ul.gform_fields li.gfield.gf_left_half {
	padding-right: 16px;
}

.la-classic .gform_wrapper .ginput_complex.ginput_container span {
	margin-bottom: 4px;
}

.la-classic .gform_wrapper .field_sublabel_hidden_label .ginput_complex.ginput_container input[type="text"] {
	margin-bottom: 3px;
	width: 100%;
}

.la-classic .gform_wrapper ul li.gfield .gfield_label {
	color: #64677F;
	display: block;
	font: 600 15px / 1.4 "Public Sans", sans-serif;
}

.la-classic .gform_wrapper .gfield input:not([type="submit"]):not([type="button"]):not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
.la-classic .gform_wrapper .gfield textarea {
	background: #F4F3F0;
	border: 3px solid #5EA3CF;
	border-radius: 10px;
	color: #2A406A;
	font: 400 18px / 1.4 "Public Sans", sans-serif;
	padding: 10px;
}

.la-classic .gform_wrapper .gfield input:not([type="submit"]):not([type="button"]):not([type="checkbox"]):not([type="radio"]):not([type="hidden"]) {
	height: 54px;
}

.la-classic .gform_wrapper .gfield textarea {
	height: 160px;
}

.la-classic .gform_wrapper .gform_footer {
	padding: 16px 0 10px;
	text-align: left;
}

.la-classic .gform_wrapper .gform_footer input[type="submit"] {
	background: #2A406A;
	border: 2px solid #78C6DB;
	border-radius: 10px;
	color: #fff;
	cursor: pointer;
	font: 600 15px / 1.2 "Public Sans", sans-serif;
	letter-spacing: normal;
	padding: 13px 40px;
	text-transform: none;
	width: auto;
}

/* ============ Header (legalatoms/classic-header) ============ */
.la-classic-header {
	background: #E7E5E0;
	padding: 20px;
}

/* BB's header columns are percentages (10.5 / 72 / 17.4), so the flag
   shrinks with the viewport (100px at 1920, 62px at 1024). */
.la-classic-header__inner {
	align-items: center;
	display: flex;
	margin: 0 auto;
	max-width: 1332px;
}

.la-classic-header__brand {
	box-sizing: border-box;
	flex: 0 0 10.51%;
	padding: 20px;
	text-align: center;
}

.la-classic-header__brand img {
	display: block;
	height: auto;
	margin: 0 auto;
	max-width: 100px;
	width: 100%;
}

.la-classic-header__brand:has(.la-classic-header__title) {
	flex: 0 1 auto;
	text-align: left;
}

.la-classic-header__title {
	color: #2A406A;
	display: block;
	font: 700 22px / 1.25 "Public Sans", sans-serif;
	max-width: 320px;
}

/* Logo and title together: a court's seal beside its name. */
.la-classic-header__brand:has(img + .la-classic-header__title) {
	align-items: center;
	display: flex;
	gap: 16px;
	padding-bottom: 10px;
	padding-top: 10px;
}

.la-classic-header__brand:has(img + .la-classic-header__title) img {
	height: 64px;
	margin: 0;
	max-width: none;
	width: auto;
}

/* Login and Safety Exit sit together on the right, a fixed 24px apart (BB
   right-aligns the button inside its own 17% column, which strands it far
   from Login). */
.la-classic-header__nav {
	flex: 0 0 auto;
	margin-left: auto;
	padding: 0;
	text-align: right;
}

.la-classic-header__nav a {
	color: #2A406A;
	display: inline-block;
	font: 600 15px / 24px "Public Sans", sans-serif;
	padding: 10px 0;
	text-decoration: none;
	white-space: nowrap;
}

.la-classic-header__nav a:hover,
.la-classic-header__nav a:focus {
	color: #78C6DB;
	text-decoration: none;
}

.la-classic-header__exit {
	flex: 0 0 auto;
	margin-left: 24px;
}

.la-classic-header__exit a {
	background: #D13F32;
	border: 1px solid #C53326;
	border-radius: 4px;
	color: #fff !important;
	display: inline-block;
	font: 600 15px / 18px "Public Sans", sans-serif;
	padding: 12px 24px;
	text-decoration: none;
}

.la-classic-header__exit a:hover,
.la-classic-header__exit a:focus {
	background: #333;
	border-color: #272727;
	text-decoration: none;
}

/* ============ Footer (legalatoms/classic-footer) ============ */
.la-classic-footer__art {
	background: url("/wp-content/uploads/image_2022_08_22T13_07_33_289Z-Copy.png") 50% 50% / cover no-repeat;
	height: 300px;
}

.la-classic-footer__contact,
.la-classic-footer__bar {
	background: #4F4F4D;
	color: #fff;
}

.la-classic-footer__contact {
	min-height: 270px;
}

.la-classic-footer__inner {
	margin: 0 auto;
	max-width: 1280px;
	padding: 0 20px;
}

.la-classic-footer__contact .la-classic-footer__inner {
	padding-bottom: 5px;
	padding-top: 20px;
}

/* BB's bottom bar row has its own 20px side padding, which only shows once
   the viewport is narrower than the 1280px content width. */
@media (min-width: 993px) {
	.la-classic-footer__bar {
		padding: 0 20px;
	}
}

.la-classic .la-classic-footer__heading {
	color: #fff;
	font: 700 28px / 1.3 "Public Sans", sans-serif;
	margin: 0 0 45px;
	text-transform: none;
}

/* BB's footer text column is 52% of the row (626px at full width). */
.la-classic .la-classic-footer p {
	color: #fff;
	font: 400 18px / 1.55 "Public Sans", sans-serif;
	margin: 0 0 16px;
	max-width: calc(52% - 19.2px);
}

.la-classic .la-classic-footer a {
	color: #fff;
	text-decoration: none;
}

.la-classic-footer__label {
	color: #E87DAF;
}

.la-classic-footer__bar .la-classic-footer__inner {
	align-items: center;
	display: flex;
	justify-content: space-between;
	padding-bottom: 30px;
	padding-top: 61px;
}

/* The logo sits in a 22% column, so it shrinks below its 210px natural
   width on narrower screens (173px at 1024). */
.la-classic-footer__logo {
	flex: 0 0 calc(22% - 31.2px);
}

.la-classic-footer__logo img {
	display: block;
	height: auto;
	max-width: 210px;
	width: 100%;
}

.la-classic-footer__links {
	display: flex;
	gap: 1px;
}

.la-classic .la-classic-footer__links a {
	font: 400 15px / 21px "Public Sans", sans-serif;
	padding: 10px;
}

/* The case-type and Conveniences rows carry BB's site-wide "transform-row"
   columns (Additional CSS): 3-up, then 2-up from 1024px. Below 768px they are
   1-up (BB goes back to 2-up between 576 and 767px, which crams the cards). */
@media (max-width: 1024px) {
	.la-cl-row--cards .la-cl-cols--3,
	.la-cl-row--features .la-cl-cols--3 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* ============ Tablet (BB's medium breakpoint, 768-992px) ============
   Measured off /ak/ at 900px: two-up grids, 30px headings, shallower rows
   and 113px waves. */
@media (min-width: 768px) and (max-width: 992px) {
	.la-classic-header__inner {
		max-width: none;
	}

	.la-classic-header__brand {
		flex: 0 0 30.06%;
		padding: 10px 20px;
		text-align: left;
	}

	.la-classic-header__brand img {
		margin: 0;
		max-width: none;
	}


	.la-cl-wave-hero::after,
	.la-cl-wave-section::before,
	.la-cl-wave-section::after {
		height: 113px;
	}

	/* Room for the 113px wave under the button (BB leaves 30px, so its wave
	   cuts through the START button at tablet widths). */
	.la-cl-hero {
		padding: 0 20px 110px;
	}

	.la-cl-hero__copy {
		flex: 0 0 50%;
		padding: 20px 0 6px;
	}

	.la-classic .la-cl-hero__title {
		font-size: 44px;
		padding-bottom: 10px;
	}

	.la-classic .la-cl-hero__lede {
		font-size: 20px;
	}


	.la-cl-row--steps {
		padding: 0 20px;
	}

	.la-cl-row--cards {
		padding: 20px 20px 110px;
	}

	.la-cl-row--features {
		padding: 20px 20px 0;
	}

	.la-cl-row--notes {
		padding: 20px 20px 30px;
	}

	.la-cl-row--contact {
		padding: 0 20px;
	}

	.la-classic .la-cl-heading,
	.la-classic .la-cl-row--steps .la-cl-heading {
		font-size: 30px;
		margin-top: 10px;
	}

	.la-cl-cols--3,
	.la-cl-cols--4 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.la-cl-box {
		padding: 5px 20px 20px;
	}

	.la-cl-row--cards .la-cl-box {
		padding-bottom: 20px;
	}

	.la-classic .la-cl-btn-outline .wp-block-button__link,
	.la-classic .la-cl-btn-solid .wp-block-button__link,
	.la-classic .la-cl-btn-soon .wp-block-button__link {
		width: 130px;
	}

	.la-cl-cols--notes {
		display: block;
	}

	.la-cl-notes__half--b {
		margin-top: 19px;
	}

	.la-classic .gform_wrapper {
		margin-top: -2px;
	}

	.la-classic .gform_wrapper .gfield input:not([type="submit"]):not([type="button"]):not([type="checkbox"]):not([type="radio"]):not([type="hidden"]) {
		height: 50px;
	}

	.la-classic-footer__art {
		height: 240px;
	}

	.la-classic-footer__contact {
		min-height: 360px;
	}

	.la-classic .la-classic-footer p {
		max-width: calc(50% - 20px);
	}

	.la-classic-footer__bar .la-classic-footer__inner {
		display: block;
		padding-bottom: 40px;
		padding-top: 61px;
	}

	.la-classic-footer__logo {
		display: inline-block;
		margin-left: 20px;
	}

	.la-classic-footer__logo img {
		height: 53px;
		max-width: none;
		width: 250px;
	}

	.la-classic-footer__links {
		justify-content: center;
		margin-top: 23px;
		padding-right: 18px;
	}
}

/* ============ Phones (767px and below) ============
   Not a copy of /ak/'s phone layout, which stacks a 326px header, lets the
   hero wave cover the title, and wraps LEARN MORE onto two lines. Same look,
   laid out for a phone: compact header with the Safety Exit top right, copy
   before the illustration, one card per row, shallower waves. */
@media (max-width: 767px) {
	/* One row: name (or flag), Login, Safety Exit. */
	.la-classic-header {
		border-bottom: 1px solid rgba(42, 64, 106, 0.12);
		padding: 10px 16px;
	}

	.la-classic-header__inner {
		gap: 14px;
	}

	.la-classic-header__brand,
	.la-classic-header__brand:has(.la-classic-header__title) {
		flex: 1 1 auto;
		min-width: 0;
		padding: 0;
		text-align: left;
	}

	.la-classic-header__brand img {
		margin: 0;
		max-width: none;
		width: 52px;
	}

	.la-classic-header__title {
		font-size: 17px;
		line-height: 1.2;
		margin: 0;
		max-width: none;
	}

	/* The seal alone: next to Login and Safety Exit the court's name wrapped
	   to four lines. The hero title right below names the court, and the name
	   stays available to screen readers. */
	.la-classic-header__brand img + .la-classic-header__title {
		clip-path: inset(50%);
		height: 1px;
		overflow: hidden;
		position: absolute;
		white-space: nowrap;
		width: 1px;
	}

	.la-classic-header__brand:has(img + .la-classic-header__title) img {
		height: 44px;
	}

	.la-classic-header__exit {
		margin-left: 0;
	}

	.la-classic-header__exit a {
		line-height: 18px;
		padding: 12px 14px;
		white-space: nowrap;
	}

	.la-cl-wave-hero::after,
	.la-cl-wave-section::before,
	.la-cl-wave-section::after {
		height: 64px;
	}

	.la-cl-row,
	.la-cl-row--features,
	.la-cl-row--notes,
	.la-cl-row--contact {
		padding: 8px 0 32px;
	}

	.la-cl-row--cards {
		padding: 24px 0 80px;
	}

	/* Hero: title, text and button first, illustration after. */
	.la-cl-hero {
		padding: 28px 20px 88px;
	}

	.la-classic .la-cl-hero__cols {
		display: flex;
		flex-direction: column;
	}

	.la-cl-hero__copy {
		flex: none;
		padding: 0;
	}

	.la-classic .la-cl-hero__title {
		font-size: 32px;
		line-height: 1.25;
		margin: 0;
		padding-bottom: 12px;
	}

	.la-classic .la-cl-hero__lede {
		font-size: 18px;
		margin: 0;
	}

	.la-cl-hero .wp-block-buttons {
		margin-top: 24px;
		padding-left: 0;
	}

	.la-cl-hero .wp-block-button {
		flex: 1 1 auto;
	}

	.la-classic .la-cl-btn-hero .wp-block-button__link {
		max-width: 420px;
		width: 100%;
	}

	.la-classic .la-cl-hero__media {
		align-self: center;
		flex: none;
		padding: 28px 0 0;
	}

	.la-classic .la-cl-hero__media img {
		display: block;
		max-width: 340px;
		width: 100%;
	}

	/* Headings and cards */
	.la-classic .la-cl-heading,
	.la-classic .la-cl-row--steps .la-cl-heading {
		font-size: 26px;
		margin-top: 16px;
	}

	.la-classic .la-cl-heading::after {
		margin-top: 14px;
	}

	.la-cl-cols,
	.la-cl-cols--notes,
	.la-cl-notes__half {
		display: block;
	}

	.la-cl-cols--notes {
		padding: 0;
	}

	.la-cl-box,
	.la-cl-row--cards .la-cl-box {
		padding: 12px 20px 24px;
	}

	.la-classic .la-cl-box__title {
		font-size: 22px;
		margin-top: 14px;
	}

	.la-cl-row--cards .la-cl-box .wp-block-image img {
		max-width: 100%;
		width: 260px;
	}

	.la-cl-row--features .la-cl-box .wp-block-image img {
		height: 72px;
		width: 72px;
	}

	.la-cl-box .wp-block-buttons {
		margin-top: 16px;
	}

	.la-classic .la-cl-btn-outline .wp-block-button__link,
	.la-classic .la-cl-btn-solid .wp-block-button__link,
	.la-classic .la-cl-btn-soon .wp-block-button__link {
		padding: 9px 16px;
		white-space: nowrap;
		width: auto;
	}

	/* Notes: modest illustrations instead of a full-bleed one. */
	.la-cl-notes__half .wp-block-image,
	.la-cl-notes__half--b .wp-block-image {
		padding: 16px 20px 0;
		text-align: left;
	}

	.la-cl-notes__half .wp-block-image img,
	.la-cl-notes__half--b .wp-block-image img {
		display: inline-block;
		max-width: min(180px, 100%);
		width: auto;
	}

	.la-cl-note {
		padding: 12px 20px 20px;
	}

	.la-classic .la-cl-note__title {
		font-size: 22px;
	}

	/* Contact */
	.la-cl-cols--2 > .wp-block-group__inner-container > *,
	.la-cl-cols--2 > * {
		padding: 16px 20px;
	}

	.la-cl-row--contact .wp-block-image img {
		display: block;
		max-width: min(240px, 100%);
	}

	.la-classic .gform_wrapper {
		margin-top: 0;
	}

	.la-classic .gform_wrapper .gfield input:not([type="submit"]):not([type="button"]):not([type="checkbox"]):not([type="radio"]):not([type="hidden"]) {
		height: 48px;
	}

	.la-classic .gform_wrapper .gfield textarea {
		height: 120px;
		width: 100%;
	}

	/* Footer */
	.la-classic-footer__art {
		height: 120px;
	}

	.la-classic-footer__contact {
		min-height: 0;
	}

	.la-classic-footer__contact .la-classic-footer__inner {
		padding-bottom: 24px;
	}

	.la-classic .la-classic-footer__heading {
		font-size: 24px;
		margin-bottom: 20px;
	}

	.la-classic .la-classic-footer p {
		max-width: none;
	}

	.la-classic .la-classic-footer__contact p:last-child {
		margin-bottom: 0;
	}

	.la-classic-footer__bar .la-classic-footer__inner {
		display: block;
		padding-bottom: 24px;
		padding-top: 24px;
	}

	.la-classic-footer__logo img {
		height: auto;
		max-width: none;
		width: 180px;
	}

	.la-classic-footer__links {
		display: flex;
		margin: 12px 0 0 -10px;
	}
}

@media (max-width: 379px) {
	.la-classic-header__register {
		display: none;
	}
}