/* chg-mirror 1/6: https://fonts.googleapis.com/css2?family=Lato:wght@400;700;900&display=swap */
/* latin-ext */@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/lato/v25/S6uyw4BMUTPHjxAwXjeu.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/lato/v25/S6uyw4BMUTPHjx4wXg.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/lato/v25/S6u9w4BMUTPHh6UVSwaPGR_p.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/lato/v25/S6u9w4BMUTPHh6UVSwiPGQ.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/lato/v25/S6u9w4BMUTPHh50XSwaPGR_p.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/lato/v25/S6u9w4BMUTPHh50XSwiPGQ.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* chg-mirror 2/6: https://bigbubba.com/wp-content/plugins/jetpack/modules/related-posts/related-posts.css?m=1771329624 */
/**
 * Jetpack related posts
 *//**
 * The Gutenberg block
 */.jp-related-posts-i2 {
	margin-top: 1.5rem;
}

.jp-related-posts-i2__list {
	--hgap: 1rem;

	display: flex;
	flex-wrap: wrap;
	column-gap: var(--hgap);
	row-gap: 2rem;

	margin: 0;
	padding: 0;

	list-style-type: none;
}

.jp-related-posts-i2__post {
	display: flex;
	flex-direction: column;

	/* Default: 2 items by row */
	flex-basis: calc(( 100% - var(--hgap) ) / 2);
}

/* Quantity qeuries: see https://alistapart.com/article/quantity-queries-for-css/ */
.jp-related-posts-i2__post:nth-last-child(n+3):first-child,
.jp-related-posts-i2__post:nth-last-child(n+3):first-child ~ * {

	/* From 3 total items on, 3 items by row */
	flex-basis: calc(( 100% - var(--hgap) * 2 ) / 3);
}

.jp-related-posts-i2__post:nth-last-child(4):first-child,
.jp-related-posts-i2__post:nth-last-child(4):first-child ~ * {

	/* Exception for 4 total items: 2 items by row */
	flex-basis: calc(( 100% - var(--hgap) ) / 2);
}

.jp-related-posts-i2__post-link {
	display: flex;
	flex-direction: column;
	row-gap: 0.5rem;

	width: 100%;
	margin-bottom: 1rem;

	line-height: 1.2;
}

.jp-related-posts-i2__post-link:focus-visible {
	outline-offset: 2px;
}

.jp-related-posts-i2__post-img {
	order: -1;

	max-width: 100%;
}

.jp-related-posts-i2__post-defs {
	margin: 0;

	list-style-type: unset;
}

/* Hide, except from screen readers */
.jp-related-posts-i2__post-defs dt {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

.jp-related-posts-i2__post-defs dd {
	margin: 0;
}

/* List view */

.jp-relatedposts-i2[data-layout="list"] .jp-related-posts-i2__list {
	display: block;
}

.jp-relatedposts-i2[data-layout="list"] .jp-related-posts-i2__post {
	margin-bottom: 2rem;
}

/* Breakpoints */

@media only screen and (max-width: 640px) {

	.jp-related-posts-i2__list {
		display: block;
	}

	.jp-related-posts-i2__post {
		margin-bottom: 2rem;
	}
}

/* Container */

#jp-relatedposts {
	display: none;
	padding-top: 1em;
	margin: 1em 0;
	position: relative;
	clear: both;
}

.jp-relatedposts::after {
	content: "";
	display: block;
	clear: both;
}

/* Headline above related posts section, labeled "Related" */

#jp-relatedposts h3.jp-relatedposts-headline {
	margin: 0 0 1em 0;
	display: inline-block;
	float: left;
	font-size: 9pt;
	font-weight: 700;
	font-family: inherit;
}

#jp-relatedposts h3.jp-relatedposts-headline em::before {
	content: "";
	display: block;
	width: 100%;
	min-width: 30px;
	border-top: 1px solid rgba(0, 0, 0, 0.2);
	margin-bottom: 1em;
}

#jp-relatedposts h3.jp-relatedposts-headline em {
	font-style: normal;
	font-weight: 700;
}

/* Related posts items (wrapping items) */

#jp-relatedposts .jp-relatedposts-items {
	clear: left;
}

#jp-relatedposts .jp-relatedposts-items-visual {
	margin-right: -20px;
}

/* Related posts item */

#jp-relatedposts .jp-relatedposts-items .jp-relatedposts-post {
	float: left;
	width: 33%;
	margin: 0 0 1em; /* Needs to be same as the main outer wrapper for Related Posts */
	box-sizing: border-box;
}

#jp-relatedposts .jp-relatedposts-items-visual .jp-relatedposts-post {
	padding-right: 20px;
	filter: alpha(opacity=80);
	-moz-opacity: 0.8;
	opacity: 0.8;
}

#jp-relatedposts .jp-relatedposts-items .jp-relatedposts-post:nth-child(3n+4),
#jp-relatedposts .jp-relatedposts-items-visual .jp-relatedposts-post:nth-child(3n+4) {
	clear: both;
}

#jp-relatedposts .jp-relatedposts-items .jp-relatedposts-post:hover .jp-relatedposts-post-title a {
	text-decoration: underline;
}

#jp-relatedposts .jp-relatedposts-items .jp-relatedposts-post:hover {
	filter: alpha(opacity=100);
	-moz-opacity: 1;
	opacity: 1;
}

/* Related posts item content */

#jp-relatedposts .jp-relatedposts-items-visual h4.jp-relatedposts-post-title,
#jp-relatedposts .jp-relatedposts-items p,
#jp-relatedposts .jp-relatedposts-items time {
	font-size: 14px;
	line-height: 20px;
	margin: 0;
}

#jp-relatedposts .jp-relatedposts-items-visual .jp-relatedposts-post-nothumbs {
	position: relative;
}

#jp-relatedposts .jp-relatedposts-items-visual .jp-relatedposts-post-nothumbs a.jp-relatedposts-post-aoverlay {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	display: block;
	border-bottom: 0;
}

#jp-relatedposts .jp-relatedposts-items p,
#jp-relatedposts .jp-relatedposts-items time {
	margin-bottom: 0;
}

#jp-relatedposts .jp-relatedposts-items-visual h4.jp-relatedposts-post-title {
	text-transform: none;
	margin: 0;
	font-family: inherit;
	display: block;
	max-width: 100%;
}

#jp-relatedposts .jp-relatedposts-items .jp-relatedposts-post .jp-relatedposts-post-title a {
	font-size: inherit;
	font-weight: 400;
	text-decoration: none;
	filter: alpha(opacity=100);
	-moz-opacity: 1;
	opacity: 1;
}

#jp-relatedposts .jp-relatedposts-items .jp-relatedposts-post .jp-relatedposts-post-title a:hover {
	text-decoration: underline;
}

#jp-relatedposts .jp-relatedposts-items .jp-relatedposts-post img.jp-relatedposts-post-img,
#jp-relatedposts .jp-relatedposts-items .jp-relatedposts-post span {
	display: block;
	max-width: 90%;
	overflow: hidden;
	text-overflow: ellipsis;
}

#jp-relatedposts .jp-relatedposts-items-visual .jp-relatedposts-post img.jp-relatedposts-post-img,
#jp-relatedposts .jp-relatedposts-items-visual .jp-relatedposts-post span {
	height: auto;
	max-width: 100%;
}

#jp-relatedposts .jp-relatedposts-items .jp-relatedposts-post .jp-relatedposts-post-date,
#jp-relatedposts .jp-relatedposts-items .jp-relatedposts-post .jp-relatedposts-post-context {
	opacity: 0.6;
}

/* Hide the date by default, but leave the element there if
 * a theme wants to use css to make it visible. */
.jp-relatedposts-items .jp-relatedposts-post .jp-relatedposts-post-date {
	display: none;
}

/* Behavior when there are thumbnails in visual mode */
#jp-relatedposts .jp-relatedposts-items-visual div.jp-relatedposts-post-thumbs p.jp-relatedposts-post-excerpt {
	display: none;
}

/* Behavior when there are no thumbnails in visual mode */
#jp-relatedposts .jp-relatedposts-items-visual .jp-relatedposts-post-nothumbs p.jp-relatedposts-post-excerpt {
	overflow: hidden;
}

#jp-relatedposts .jp-relatedposts-items-visual .jp-relatedposts-post-nothumbs span {
	margin-bottom: 1em;
}

/* List Layout */
#jp-relatedposts .jp-relatedposts-list .jp-relatedposts-post {
	clear: both;
	width: 100%;
}

#jp-relatedposts .jp-relatedposts-list .jp-relatedposts-post img.jp-relatedposts-post-img {
	float: left;
	overflow: hidden;
	max-width: 33%;
	margin-right: 3%;
}

#jp-relatedposts .jp-relatedposts-list h4.jp-relatedposts-post-title {
	display: inline-block;
	max-width: 63%;
}

/*
 * Responsive
 */

@media only screen and (max-width: 640px) {

	#jp-relatedposts .jp-relatedposts-items .jp-relatedposts-post {
		width: 50%;
	}

	#jp-relatedposts .jp-relatedposts-items .jp-relatedposts-post:nth-child(3n) {
		clear: left;
	}

	#jp-relatedposts .jp-relatedposts-items-visual {
		margin-right: 20px;
	}
}

@media only screen and (max-width: 320px) {

	#jp-relatedposts .jp-relatedposts-items .jp-relatedposts-post {
		width: 100%;
		clear: both;
		margin: 0 0 1em;
	}

	#jp-relatedposts .jp-relatedposts-list .jp-relatedposts-post img.jp-relatedposts-post-img,
	#jp-relatedposts .jp-relatedposts-list h4.jp-relatedposts-post-title {
		float: none;
		max-width: 100%;
		margin-right: 0;
	}
}

/*
 * Hide the related post section in the print view of a post
 */

@media print {

	.jp-relatedposts {
		display: none !important;
	}
}

/* chg-mirror 3/6: https://bigbubba.com/_static/??-eJydy0ESwiAMAMAPlZIiYi+Obwkk0zJTI0OC/b76BY972LO58hJjMd+OsVVRv3V8o2F3LDtKYfJ51IN8QzPuok537ExzUZ3OPzpTtV9+PO/LLUJKSwrBEeQLAMdriTmuK3wRPnYHN6Y= */
.gravatar-grid-pattern .gravatar-grid-pattern__row,.gravatar-grid-pattern .gravatar-grid-pattern__title{margin-left:auto;margin-right:auto;max-width:729px!important}.gravatar-grid-pattern div.wp-block-gravatar-block.gravatar-block--portrait{background-color:transparent;border:0;max-width:unset!important;min-width:unset;padding:0}.gravatar-grid-pattern .gravatar-block__status{border:1px dotted}.gravatar-grid-pattern.gravatar-grid-pattern--1 div.wp-block-gravatar-block.gravatar-block--portrait{width:167px}.gravatar-grid-pattern.gravatar-grid-pattern--1 div.wp-block-gravatar-block.gravatar-block--portrait .gravatar-block-image.gravatar-block-image--avatar{margin-bottom:8px!important}.gravatar-grid-pattern.gravatar-grid-pattern--1 div.wp-block-gravatar-block.gravatar-block--portrait .gravatar-block-image.gravatar-block-image--avatar .gravatar-block-image__image{border-radius:8px}.gravatar-grid-pattern.gravatar-grid-pattern--1 div.wp-block-gravatar-block.gravatar-block--portrait .gravatar-block-name{margin-bottom:4px}.gravatar-grid-pattern.gravatar-grid-pattern--1 div.wp-block-gravatar-block.gravatar-block--portrait .gravatar-block-name .gravatar-block-name__text{font-size:18px}.gravatar-grid-pattern.gravatar-grid-pattern--1 div.wp-block-gravatar-block.gravatar-block--portrait .gravatar-block-paragraph--location{margin-top:0}.gravatar-grid-pattern.gravatar-grid-pattern--2 div.wp-block-gravatar-block.gravatar-block--portrait,.gravatar-grid-pattern.gravatar-grid-pattern--5 div.wp-block-gravatar-block.gravatar-block--portrait{width:229px}.gravatar-grid-pattern.gravatar-grid-pattern--2 div.wp-block-gravatar-block.gravatar-block--portrait .gravatar-block-image.gravatar-block-image--avatar,.gravatar-grid-pattern.gravatar-grid-pattern--5 div.wp-block-gravatar-block.gravatar-block--portrait .gravatar-block-image.gravatar-block-image--avatar{margin-bottom:8px!important}.gravatar-grid-pattern.gravatar-grid-pattern--2 div.wp-block-gravatar-block.gravatar-block--portrait .gravatar-block-name .gravatar-block-name__text,.gravatar-grid-pattern.gravatar-grid-pattern--5 div.wp-block-gravatar-block.gravatar-block--portrait .gravatar-block-name .gravatar-block-name__text{font-size:24px}.gravatar-grid-pattern.gravatar-grid-pattern--3 div.wp-block-gravatar-block.gravatar-block--portrait{text-align:center;width:215px}.gravatar-grid-pattern.gravatar-grid-pattern--3 div.wp-block-gravatar-block.gravatar-block--portrait .gravatar-block-image.gravatar-block-image--avatar{border-radius:50%;margin-bottom:8px!important;overflow:hidden}.gravatar-grid-pattern.gravatar-grid-pattern--3 div.wp-block-gravatar-block.gravatar-block--portrait .gravatar-block-name .gravatar-block-name__text{font-size:24px}.gravatar-grid-pattern.gravatar-grid-pattern--4 div.wp-block-gravatar-block.gravatar-block--portrait{margin-bottom:20px;width:353px}.gravatar-grid-pattern.gravatar-grid-pattern--4 div.wp-block-gravatar-block.gravatar-block--portrait .gravatar-block-image.gravatar-block-image--avatar{margin-bottom:16px!important}.gravatar-grid-pattern.gravatar-grid-pattern--4 div.wp-block-gravatar-block.gravatar-block--portrait .gravatar-block-name{margin-bottom:8px}.gravatar-grid-pattern.gravatar-grid-pattern--4 div.wp-block-gravatar-block.gravatar-block--portrait .gravatar-block-name .gravatar-block-name__text{font-size:32px}.gravatar-grid-pattern.gravatar-grid-pattern--4 div.wp-block-gravatar-block.gravatar-block--portrait .gravatar-block-paragraph--location{margin-top:0}.gravatar-grid-pattern.gravatar-grid-pattern--4 div.wp-block-gravatar-block.gravatar-block--portrait .gravatar-block-paragraph--description{margin-top:16px}.gravatar-grid-pattern.gravatar-grid-pattern--4 div.wp-block-gravatar-block.gravatar-block--portrait .gravatar-block-group--verified-accounts{margin-top:24px}.gravatar-grid-pattern.gravatar-grid-pattern--5 .gravatar-grid-pattern__row{container-type:inline-size}@container (min-width: 728px){.gravatar-grid-pattern.gravatar-grid-pattern--5 div.wp-block-gravatar-block.gravatar-block--portrait:nth-child(4n-1){margin-left:249px}}
.gravatar-grid-pattern div.wp-block-gravatar-block.gravatar-block--portrait>.block-editor-inner-blocks>.block-editor-block-list__layout{gap:0}

/* chg-mirror 4/6: https://bigbubba.com/wp-content/plugins/gravatar-enhanced/build/patterns-view.css?m=1740661622 */
.gravatar-grid-pattern div.wp-block-gravatar-block.gravatar-block--portrait{gap:0}

/* chg-mirror 5/6: https://bigbubba.com/wp-content/themes/bigbubba/assets/app.css?m=1787508835 */
:root{
 --page:#f4eddd;--surface:#faf6ec;--ink:#2a2d2e;--muted:#4a4d50;
 --forest:#2d4a2b;--forest-deep:#243c22;--gold:#7d5714;--gold-dark:#e0b978;
 --rule:#8f7c52;--hairline:#e8dec8;--danger:#8f1f1a;
 /* One family throughout, matching the reference site's approach: no
    serif/sans mix, no tracking tricks, tighter leading. */
 --display:Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
 --body:Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
 --wide:74rem;--measure:38rem;--callbar:4.6rem;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--page);color:var(--ink);font-family:var(--body);
 font-size:17px;line-height:1.55;-webkit-font-smoothing:antialiased;letter-spacing:normal;word-spacing:normal}
h1,h2,h3{font-family:var(--display);color:var(--forest);line-height:1.2;text-wrap:balance;margin:0 0 .5em;letter-spacing:normal}
h1{font-size:clamp(2.05rem,4.4vw,2.85rem);font-weight:700}
h2{font-size:clamp(1.5rem,2.6vw,1.95rem);font-weight:700;margin-top:1.6em}
h2:first-child{margin-top:0}
h3{font-size:clamp(1.15rem,2vw,1.4rem);font-weight:700}
p,li{max-width:var(--measure)}
a{color:var(--forest)}
a:hover{color:var(--forest-deep)}
img{max-width:100%;height:auto;display:block}
:where(a,button,select,input,textarea,summary,[tabindex]):focus-visible{
 outline:3px solid var(--forest-deep);outline-offset:2px;border-radius:2px}
.on-dark :where(a,button,select,input,textarea,summary):focus-visible{outline-color:var(--gold-dark)}
.wrap{max-width:var(--wide);margin-inline:auto;padding-inline:clamp(1rem,4vw,2.25rem)}
.eyebrow{font-family:var(--body);font-size:.8125rem;font-weight:700;letter-spacing:.03em;
 text-transform:uppercase;color:var(--gold);margin:0 0 .6rem;max-width:none}
.on-dark .eyebrow{color:var(--gold-dark)}
.skip{position:absolute;left:-9999px}
.skip:focus{left:.5rem;top:.5rem;z-index:99;padding:.75rem 1rem;background:var(--forest-deep);color:#fff}

.utility{background:var(--forest);color:#fff;font-size:.9rem}
.utility .wrap{display:flex;gap:.35rem 1.75rem;flex-wrap:wrap;padding-block:.5rem}
.utility span{display:flex;align-items:center;gap:.5rem}
.dot{width:.5rem;height:.5rem;border-radius:50%;background:#a8d995;flex:0 0 auto}

header.site{background:var(--page);border-bottom:1px solid var(--hairline);position:relative;z-index:30}
header.site .wrap{display:flex;gap:1rem;align-items:center;justify-content:space-between;flex-wrap:wrap;padding-block:.85rem}
.brand{display:flex;align-items:center;gap:.7rem;text-decoration:none}
.mark{width:46px;height:46px;border-radius:50%;background:var(--forest);flex:0 0 auto;display:grid;
 place-items:center;color:var(--gold-dark);font-family:var(--display);font-weight:800;font-size:1.35rem}
.brand b{display:block;font-family:var(--display);font-size:1.28rem;color:var(--forest);line-height:1.1}
.brand small{display:block;font-size:.7rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--gold)}
.mainnav ul{display:flex;gap:.25rem 1.1rem;list-style:none;margin:0;padding:0;flex-wrap:wrap}
.mainnav li{max-width:none}
.mainnav a{font-size:1rem;font-weight:600;text-decoration:none;padding:.5rem .1rem;display:inline-block;min-height:44px;line-height:1.9}
.mainnav a[aria-current=page]{box-shadow:inset 0 -3px 0 var(--gold)}
.mainnav a:hover{text-decoration:underline}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;min-height:48px;
 padding:.75rem 1.4rem;border-radius:4px;font-weight:600;font-size:1.0625rem;text-decoration:none;
 border:2px solid transparent;cursor:pointer;font-family:var(--body)}
.btn-primary{background:var(--forest);color:#fff}
.btn-primary:hover{background:var(--forest-deep);color:#fff}
.btn-ghost{background:transparent;color:var(--forest);border-color:var(--forest)}
.btn-gold{background:var(--gold);color:#fff}
.btn-gold:hover{background:#6f4e12;color:#fff}
.cluster{display:flex;gap:.75rem;flex-wrap:wrap;margin-top:1.6rem}

section.band{padding-block:clamp(2.25rem,5.5vw,4rem)}
section.band+section.band{border-top:1px solid var(--hairline)}
.hero .wrap{display:grid;gap:clamp(1.5rem,4vw,3rem);align-items:center;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr)}
.hero h1 em{font-style:normal;position:relative;white-space:nowrap}
.hero h1 em::after{content:"";position:absolute;left:0;right:0;bottom:.05em;height:.085em;background:var(--gold);border-radius:2px}
.sub{font-family:var(--display);font-weight:400;font-size:clamp(1.2rem,2.2vw,1.55rem);color:var(--forest);margin:.15em 0 .55em}
.lede{font-size:1.1875rem}
.badges{display:flex;gap:.35rem 1.5rem;flex-wrap:wrap;list-style:none;padding:0;margin:1.6rem 0 0;font-size:.9375rem;color:var(--muted)}
.badges li{max-width:none;display:flex;gap:.45rem;align-items:center}
.tick{color:var(--gold);font-weight:700}
.figure{margin:0}
.figure img{width:100%;max-width:400px;margin-inline:auto;filter:drop-shadow(0 18px 28px rgba(45,74,43,.16))}
.split .wrap{display:grid;gap:clamp(1.5rem,4vw,3.25rem);align-items:center;grid-template-columns:minmax(0,.78fr) minmax(0,1.22fr)}
.split.rev .wrap{grid-template-columns:minmax(0,1.22fr) minmax(0,.78fr)}
.split .figure img{max-width:340px}
@media (max-width:880px){
 .hero .wrap,.split .wrap,.split.rev .wrap{grid-template-columns:1fr}
 .hero .figure,.split .figure{order:-1}
 .hero .figure img,.split .figure img{max-width:240px}
 .mainnav ul{gap:.1rem .9rem}
}

.grid{display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(16.5rem,1fr));margin-top:1.5rem}
.card{background:var(--surface);border:1px solid var(--hairline);border-radius:6px;padding:1.4rem}
.card h3{margin-top:0;margin-bottom:.35em}
.card p{max-width:none;font-size:1rem;color:var(--muted)}
.card h3 a{text-decoration:none;display:block;padding-block:.55rem;min-height:44px}
.card h3 a:hover{text-decoration:underline}

ul.ticks{list-style:none;padding:0;margin:1rem 0}
ul.ticks li{max-width:var(--measure);position:relative;padding-left:1.6rem;margin-bottom:.6rem}
ul.ticks li::before{content:"";position:absolute;left:0;top:.62em;width:.55rem;height:.55rem;
 border-radius:50%;background:var(--gold)}
ul.ticks li a{font-weight:600;display:inline-block;padding-block:.5rem;min-height:44px}

.steps{list-style:none;counter-reset:s;padding:0;margin:1.75rem 0 0;display:grid;gap:1.2rem}
.steps li{max-width:none;counter-increment:s;display:grid;grid-template-columns:2.6rem 1fr;gap:1rem;align-items:start}
.steps li::before{content:counter(s);grid-row:span 2;width:2.6rem;height:2.6rem;border-radius:50%;
 background:var(--forest);color:#fff;display:grid;place-items:center;font-weight:700;
 font-family:var(--display);font-size:1.2rem}
.steps h3{margin:.15rem 0 .2rem;font-size:1.15rem}
.steps p{margin:0;color:var(--muted)}

.crumbs{margin:0 0 1.25rem}
.crumbs ol{list-style:none;display:flex;flex-wrap:wrap;gap:.4rem;padding:0;margin:0;font-size:.9375rem;color:var(--muted)}
.crumbs li{max-width:none}
.crumbs li+li::before{content:"/";margin-right:.4rem;color:var(--rule)}
.crumbs a{display:inline-block;padding-block:.65rem;min-height:44px}
.crumbs ol{align-items:center}

.more-link{margin-top:1.25rem}
.more-link a{display:inline-block;padding:.6rem 0;min-height:44px;font-weight:600}
.faq{margin-top:1.25rem;max-width:46rem}
.faq details{border:1px solid var(--hairline);border-radius:6px;background:var(--surface);margin-bottom:.6rem}
.faq summary{cursor:pointer;font-weight:600;padding:1rem 1.2rem;min-height:44px;list-style:none;display:flex;
 justify-content:space-between;gap:1rem;align-items:center}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-family:var(--display);font-size:1.5rem;color:var(--gold);line-height:1}
.faq details[open] summary::after{content:"\2212"}
.faq details>div{padding:0 1.2rem 1.1rem}
.faq p{margin:0}

.form{max-width:34rem}
.field{margin-bottom:1.2rem}
.form label{display:block;font-weight:600;margin:0 0 .35rem}
.hint{display:block;font-weight:400;color:var(--muted);font-size:1rem}
.form input,.form select,.form textarea{width:100%;min-height:48px;padding:.7rem .8rem;font:inherit;
 font-size:1.0625rem;background:#fff;color:var(--ink);border:2px solid var(--rule);border-radius:4px}
.form textarea{min-height:7rem;resize:vertical}
.consent{display:flex;gap:.75rem;align-items:flex-start;font-size:1rem;line-height:1.5;font-weight:400}
.consent input{width:24px;height:24px;min-height:24px;flex:0 0 auto;margin-top:.2rem}
.disclaim{font-size:.9375rem;color:var(--muted);margin:.7rem 0 0}
.bb-hp{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

.ctaband{background:var(--forest);color:#fff;border-radius:8px;padding:clamp(1.6rem,4vw,2.75rem);
 display:grid;gap:2rem;align-items:center;grid-template-columns:minmax(0,1fr) auto}
.ctaband h2{color:#fff;margin-top:0}
.ctaband p{color:#efeadd}
.ctaband .btn-gold{background:var(--gold-dark);color:#1d1a12}
.ctaband .btn-ghost{color:#fff;border-color:var(--gold-dark)}
.ctaband img{max-width:180px;filter:drop-shadow(0 12px 20px rgba(0,0,0,.25))}
@media (max-width:760px){.ctaband{grid-template-columns:1fr}.ctaband img{display:none}}

footer.site{background:var(--forest-deep);color:#fff}
footer.site .wrap{padding-block:clamp(2.25rem,5vw,3rem)}
footer.site a{color:var(--gold-dark)}
.fname{font-weight:700;margin:0}
.legal{font-size:.8125rem;line-height:1.55;color:#cfc9ba;max-width:54rem;margin:.55rem 0 0}
.footnav{margin-top:1.2rem;font-size:.875rem}
.footnav a{display:inline-block;min-height:44px;line-height:44px}

.callbar{position:fixed;inset:auto 0 0 0;z-index:60;display:none;gap:.5rem;background:var(--forest-deep);
 padding:.5rem .75rem calc(.5rem + env(safe-area-inset-bottom,0px));box-shadow:0 -2px 14px rgba(0,0,0,.3)}
.callbar a{flex:1;display:flex;align-items:center;justify-content:center;min-height:44px;padding:.6rem 1rem;
 border-radius:4px;font-weight:700;text-decoration:none;font-size:1.0625rem}
.callbar .c{background:var(--gold-dark);color:#1d1a12}
.callbar .t{background:transparent;color:#fff;border:2px solid var(--gold-dark)}
/* WCAG 2.2 SC 2.4.11 Focus Not Obscured - the sticky bar must never cover a focused field. */
@media (max-width:781px){
 .callbar{display:flex}
 html{scroll-padding-bottom:calc(var(--callbar) + 1.5rem)}
 body{padding-bottom:calc(var(--callbar) + env(safe-area-inset-bottom,0px))}
 .mainnav{order:3;width:100%}
 .mainnav ul{justify-content:flex-start}
 header.site .btn{width:100%}
}
@media (prefers-reduced-motion:reduce){
 html{scroll-behavior:auto}
 *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
}
@media print{.callbar,.utility,.mainnav{display:none}}

.serve{background:var(--surface);border-left:4px solid var(--gold);border-radius:0 5px 5px 0;
  padding:.85rem 1.1rem;font-size:1rem;max-width:46rem;margin-top:1.75rem}
.serve strong{color:var(--forest)}
.card h4{font-family:var(--display);color:var(--forest);font-size:1.05rem;margin:0 0 .3em}

/* ---------------------------------------------------------------------------
   WordPress-only additions. The rules above are the same stylesheet the review
   build uses, so the live site and the review copy render identically.
   --------------------------------------------------------------------------- */

/* The admin bar shifts everything down when a logged-in user views the site. */
body.admin-bar .callbar{bottom:0}
@media screen and (max-width:782px){ body.admin-bar{padding-top:46px} }

/* Block editor wrappers must not fight the layout. */
.wp-site-blocks,.wp-block-group.is-layout-flow>*{margin-block-start:0}
main#main>section.band{margin-block:0}

/* WordPress injects its own paragraph spacing; keep the measure rule winning. */
/* WordPress block styles set max-width on descendants; :where() has zero specificity and
   loses to them, which produced 94-character lines. These selectors carry real weight. */
main#main p, main#main li{max-width:var(--measure)}
main#main .card p, main#main .card li,
main#main .badges li, main#main .ctaband p, main#main .crumbs li,
main#main .eyebrow, main#main .serve, main#main .steps p{max-width:none}
main#main .card p{max-width:34rem}

/* ---------------------------------------------------------------------------
   Layout pass. Measured defects, not taste:
   - 7-item and 5-item card grids orphaned a lone card beside 1-3 empty cells
   - the intake form filled 49% of its own card, leaving half of it blank
   - the CTA-band mascot is a dark bear on dark green and read as invisible
   - split figures centred vertically, pooling dead space above the illustration
   --------------------------------------------------------------------------- */

/* Three-up reads better than four at this measure, and makes 6 items a clean
   two rows. A trailing odd card stretches instead of stranding empty cells. */
.grid{grid-template-columns:repeat(auto-fit,minmax(15rem,1fr))}
.split .grid{grid-template-columns:repeat(auto-fit,minmax(13rem,1fr))}
/* Stretch a trailing card only when it would otherwise sit alone on its row.
   Two-column grids: any odd last child. Three-column: only a 3n+1 last child
   (a 3n+2 last child has a neighbour and must stay its natural width). */
.split .grid > .card:last-child:nth-child(odd){grid-column:1/-1}
@media (min-width:1000px){
  .grid:not(.split .grid){grid-template-columns:repeat(3,1fr)}
  .grid:not(.split .grid) > .card:last-child:nth-child(3n+1){grid-column:1/-1}
}
@media (max-width:999px){
  .grid > .card:last-child:nth-child(odd){grid-column:1/-1}
}

/* The intake panel is the conversion surface: cap it so it reads as a deliberate
   card rather than a form adrift in a half-empty box. */
.card:has(> .form){max-width:44rem}
.form{max-width:none}
.form input,.form select,.form textarea{width:100%}

/* Give the mascot a light plate so it separates from the forest-green band. */
.ctaband img{
  filter:drop-shadow(0 0 2px rgba(255,255,255,.35)) drop-shadow(0 10px 18px rgba(0,0,0,.4));
  background:radial-gradient(closest-side,rgba(244,237,221,.16),rgba(244,237,221,0) 78%);
}

/* Illustrations sit with the text they belong to, not floating mid-column. */
.split .wrap > div:not(.figure){align-self:start}
.split .figure{align-self:center}

.faq{max-width:52rem}

/* ---------------------------------------------------------------------------
   Mobile pass. On a 390x844 screen the utility bar stacked into three rows and
   the hero illustration sat above the headline, so the H1 and the call button
   landed ~640px down - below the fold on the device most injury traffic uses.
   Project rule is phone first, so the text and the CTAs come first.
   --------------------------------------------------------------------------- */
@media (max-width:880px){
  /* Text and call-to-action before the illustration in the hero only; the
     alternating body sections keep their image-led rhythm. */
  .hero .figure{order:1}
  .hero .wrap > div:not(.figure){order:0}
  .hero .figure img{max-width:190px}
}
@media (max-width:620px){
  .utility{font-size:.8125rem}
  .utility .wrap{gap:.25rem 1rem;flex-wrap:nowrap;justify-content:space-between;
    padding-block:.4rem;overflow:hidden}
  /* Two trust signals fit one line; the middle one is the least load-bearing. */
  .utility span:nth-child(2){display:none}
  .utility span{white-space:nowrap}
}
@media (max-width:359px){
  .utility span:nth-child(3){display:none}
  .utility .wrap{justify-content:flex-start}
}

/* The sticky bar is the primary conversion control; the number must not wrap. */
.callbar .c,.callbar .t{white-space:nowrap}
@media (max-width:420px){
  .callbar{gap:.5rem}
  .callbar .c,.callbar .t{font-size:.95rem;padding-inline:.6rem}
}

/* SC 2.5.8: prose links are exempt under the inline exception, but the footer
   phone number is a primary conversion control, so give it a real target. */
footer.site a[href^="tel:"]{display:inline-block;padding:.35rem .1rem}


/* ---------------------------------------------------------------------------
   Page-hero pass. The practice and injury heroes are built with the .split
   helper, so they inherited a 340px illustration cap and a 39% figure column.
   With a long interrogative H1 at the full 4rem clamp the text shattered into
   five ragged lines beside a mostly empty column. Three corrections:
   h1 is sized for its column rather than the viewport, the hero illustration
   is allowed to fill its column, and balance is reserved for short headings.
   --------------------------------------------------------------------------- */
.hero h1, .split h1{font-size:clamp(2rem,3vw,2.75rem);text-wrap:pretty}
.hero h1{max-width:19ch}
.split h1{max-width:22ch}
@media (min-width:1100px){
  /* Give the headline room and stop the figure column running to a void. */
  .split.rev .wrap{grid-template-columns:minmax(0,1.32fr) minmax(0,.68fr)}
  .hero .wrap{grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr)}
}
.hero .figure img,.split .figure img{max-width:min(100%,400px);width:100%}
/* Landscape illustrations were rendering small inside a tall column. */
.split .figure picture,.hero .figure picture{display:block}

/* ---------------------------------------------------------------------------
   Flow pass. A 276px illustration beside a 1463px card grid leaves a column of
   dead space no scaling can fill - the side-column layout is simply wrong for
   that content. Where a split row holds a card grid, the illustration becomes a
   compact centred element above it and the cards take the full width (which
   also lets ten city cards run three-up instead of cramped two-up). Where the
   row holds prose or steps, the illustration follows the reader instead.
   --------------------------------------------------------------------------- */
@media (min-width:1000px){
  .split:has(.grid) .wrap,
  .split.rev:has(.grid) .wrap{grid-template-columns:1fr;gap:0}
  /* Ornament, not a floating element: small, tucked to the heading. */
  .split:has(.grid) .figure{max-width:170px;margin:0 0 -1.25rem auto;order:-1}
  .split:has(.grid) .figure img{max-width:170px}
  /* The narrow-column card rule must not survive the collapse to full width,
     or seven cards run five-up and cramped. */
  .split:has(.grid) .grid{grid-template-columns:repeat(auto-fit,minmax(15rem,1fr))}
  .split:has(.grid) .grid > .card:last-child:nth-child(odd){grid-column:auto}

  /* Prose and step rows: the illustration tracks the reader, so the eye never
     rests on an empty column. Falls back to normal flow where it cannot stick. */
  .split:not(:has(.grid)) .figure{position:sticky;top:5.5rem;align-self:start}
}
/* A hero row is short enough that centring reads correctly. */
.hero .figure{align-self:center;position:static}

/* ===========================================================================
   DESIGN CORRECTION PASS
   Diagnosed failures, measured at 1280:
   - the header mark was a literal letter "B" placeholder
   - one flat tone down the whole page, so nothing anchored the eye
   - a 170px illustration alone in a 1112px row = a ~940px empty band
   - sections running ~300px taller than their content
   =========================================================================== */

/* 1. Real logo mark. Image now, not a letter. */
.mark{width:56px;height:56px;border-radius:50%;background:none;display:block;
  object-fit:contain;flex:0 0 auto;box-shadow:0 2px 6px rgba(45,74,43,.18)}
.brand{gap:.85rem}
.brand b{font-size:1.3rem;font-weight:700;letter-spacing:normal}
.brand small{font-size:.7rem;letter-spacing:.02em;color:var(--muted);font-weight:600}
header.site .wrap{padding-block:.7rem}

/* 2. Tonal rhythm. Alternating grounds give the page structure to read against. */
main section.band:nth-of-type(even){background:#eee4cf}
main section.band:nth-of-type(even):not(.on-ink) .card{background:var(--card)}

/* 3. Tighter vertical rhythm - roughly 30% out of the dead bands. */
section.band{padding-block:clamp(1.6rem,3.4vw,2.6rem)}
h2{margin-top:1.05em}
.grid{margin-top:1.1rem}
.hero .wrap{padding-block:.5rem}

/* 4. Stranded illustrations. The intro copy and the illustration now sit on one
      row, touching, and the card grid spans the full width beneath them. */
@media (min-width:1000px){
  .split:has(.grid) .wrap{display:grid;grid-template-columns:minmax(0,1fr) auto;
    column-gap:2rem;row-gap:0;align-items:center}
  .split:has(.grid) .wrap > div{display:contents}
  .split:has(.grid) .eyebrow,
  .split:has(.grid) .wrap > div > h2,
  .split:has(.grid) .wrap > div > p{grid-column:1}
  .split:has(.grid) .figure{grid-column:2;grid-row:1 / span 3;margin:0;max-width:190px;align-self:center}
  .split:has(.grid) .figure img{max-width:190px}
  .split:has(.grid) .grid{grid-column:1 / -1}
  .split:has(.grid) .wrap > div > p.more-link{grid-column:1 / -1}
}

/* 5. Prose-only sections. A 608px measure inside an 1112px container left the
      right 45% of the section empty - correct typography, lopsided page. Narrow
      the container instead of the paragraph so the margins balance. */
@media (min-width:1000px){
  main section.band:not(:has(.grid)):not(:has(.figure)):not(:has(form)):not(:has(.ctaband)):not(:has(.steps)) .wrap{
    max-width:58rem}
  main section.band:has(.faq) .faq{max-width:none}
}

/* ===========================================================================
   ABOVE-THE-FOLD CORRECTION
   Measured at 390x844: on practice, injury and location pages the whole first
   screen was utility bar + header + call button + nav + a full-height
   illustration. No headline, no copy. The earlier text-first fix was scoped to
   .hero, but those page heroes are .split.rev, so they kept order:-1.
   Scope it to the first section of any page instead of one class.
   =========================================================================== */
@media (max-width:880px){
  main section.band:first-of-type .figure{order:1}
  main section.band:first-of-type .wrap > div:not(.figure){order:0}
  /* The illustration is an accent on a phone, not the whole screen. */
  main section.band:first-of-type .figure img{max-width:170px}
  main section.band:first-of-type .figure{margin-inline:auto}
}

/* The mobile header ate ~230px: a full-width call button plus a two-row nav.
   Keep the number as real text and a 44px target, but stop it taking a row
   of its own, and run the nav on one scrollable line. */
@media (max-width:781px){
  header.site .wrap{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem .75rem}
  header.site .btn{width:auto;margin-left:auto;padding:.6rem .9rem;font-size:.95rem;min-height:44px;
    display:inline-flex;align-items:center}
  .brand b{font-size:1.12rem}
  .brand small{font-size:.6rem}
  .mark{width:44px;height:44px}
  .mainnav{order:3;width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;
    scrollbar-width:none;margin-top:.15rem}
  .mainnav::-webkit-scrollbar{display:none}
  .mainnav ul{flex-wrap:nowrap;gap:1.1rem;padding-bottom:.15rem}
  .mainnav a{white-space:nowrap}
}

/* WordPress constrains .entry-content to theme.json contentSize (was 44rem =
   704px), which squeezed every page ~40% narrower than the design. The .wrap
   element already owns max-width and centring, so the post-content wrapper must
   not impose a second, tighter constraint. */
main .entry-content,
main > .wp-block-post-content,
.wp-block-post-content.is-layout-constrained > *{max-width:none}

/* ===========================================================================
   SCROLL REVEAL
   The hidden state is scoped to .reveal-on, a class only motion.js adds. With
   JavaScript off, or in any crawler that does not execute scripts, none of this
   applies and the page renders fully visible. Content is never display:none.
   =========================================================================== */
/* Movement only - no opacity. A fading element is genuinely low-contrast for
   the duration of the fade, and an automated audit will (correctly) flag text
   sampled mid-transition. Sliding gives the same "words come up" effect with
   the text at full contrast the entire time. */
.reveal-on .reveal{transform:translateY(16px);
  transition:transform .5s cubic-bezier(.2,.6,.2,1)}
.reveal-on .reveal.is-in{transform:none}
@media (prefers-reduced-motion:reduce){
  .reveal-on .reveal{transform:none!important;transition:none!important}
}

/* ===========================================================================
   ARTICLES: carousel, index grid, and the single legal footer
   =========================================================================== */
.news .wrap{overflow:hidden}
.news-rail{position:relative;margin-top:1.1rem}
.news-track{display:flex;gap:1rem;list-style:none;margin:0;padding:0;
  transition:transform .6s cubic-bezier(.2,.6,.2,1);will-change:transform}
.news-item{flex:0 0 calc((100% - 2rem)/3);max-width:none;background:var(--card);
  border:1px solid rgba(45,74,43,.10);border-radius:10px;overflow:hidden}
.news-item > a{display:flex;flex-direction:column;height:100%;text-decoration:none;color:inherit}
.news-img{display:block;background:#efe6d2;aspect-ratio:16/10;overflow:hidden}
.news-img img{width:100%;height:100%;object-fit:contain;object-position:center bottom;display:block}
.news-body{display:block;padding:1rem 1.1rem 1.15rem}
/* NB: the tokens are named backwards - --gold (#7d5714) is the dark one for
   light grounds, --gold-dark (#e0b978) is the light one for dark grounds. */
.news-cat{display:inline-block;font-size:.72rem;font-weight:700;letter-spacing:.03em;
  text-transform:uppercase;color:var(--gold);margin-bottom:.4rem}
.news-head{display:block;font-family:var(--display);font-size:1.08rem;line-height:1.25;
  color:var(--forest);font-weight:700;margin-bottom:.4rem}
.news-item a:hover .news-head{text-decoration:underline}
.news-ex{display:block;font-size:.92rem;color:var(--muted);margin-bottom:.5rem}
.news-date{display:block;font-size:.8rem;color:var(--muted)}
.news-controls{display:flex;gap:.5rem;margin-top:1rem}
.news-btn{min-height:44px;min-width:44px;padding:.5rem .9rem;border:1px solid var(--forest);
  background:transparent;color:var(--forest);border-radius:6px;font:inherit;font-size:.95rem;cursor:pointer}
.news-btn:hover{background:var(--forest);color:#fff}

.news-grid{display:grid;gap:1.1rem;grid-template-columns:repeat(auto-fit,minmax(17rem,1fr));
  list-style:none;margin:0;padding:0}
.news-grid .news-item{flex:none}

/* Mobile: static stacked cards, no motion, no swipe fighting the page scroll. */
@media (max-width:880px){
  .news .wrap{overflow:visible}
  .news-track{display:grid;grid-template-columns:1fr;gap:1rem;transform:none!important;transition:none}
  .news-item{flex:none}
  .news-controls{display:none}
}

.article-legal{margin-top:2.5rem;padding:1.4rem 1.5rem;background:var(--surface);
  border-left:4px solid var(--gold);border-radius:0 8px 8px 0}
.article-legal h2{font-size:1.15rem;margin:0 0 .6em}
.article-legal p{font-size:.9rem;line-height:1.6;color:var(--muted);max-width:none}
.article-legal .resp{margin-top:.9rem;padding-top:.8rem;border-top:1px solid rgba(45,74,43,.14);
  font-weight:600;color:var(--ink)}
sup.cite{font-size:.7em}
sup.cite a{text-decoration:none;color:var(--gold)}
p.src{font-size:.85rem;color:var(--muted);margin:.3rem 0;word-break:break-word}
p.src a{word-break:break-all}

/* Article pages. The theme had no single.html, so posts fell through to the
   archive template and rendered neither the body nor the disclaimer. */
.article-head .wrap{max-width:52rem}
.article-head h1{margin-top:.2em}
.article-head .eyebrow a{color:var(--gold);text-decoration:none}
.article-head .news-date{margin-top:.4rem}
.article-body .wrap{max-width:52rem}
.article-body h2{font-size:clamp(1.45rem,2.4vw,1.85rem);margin-top:1.8em}
.article-body h3{margin-top:1.5em}
.article-body p,.article-body li{max-width:none}
.article-body ul.ticks li::before{content:none}
.article-body ul.ticks{list-style:disc;padding-left:1.25rem}
.article-body ul.ticks li{padding-left:.25rem}

/* Adding "Articles" to the nav pushed the call button onto a third row at every
   desktop width. Keep the header on one line: the nav is the flexible element,
   the brand and the call button hold their size. */
@media (min-width:782px){
  header.site .wrap{flex-wrap:nowrap}
  .brand{flex:0 0 auto}
  .mainnav{flex:1 1 auto;min-width:0;display:flex;justify-content:flex-end}
  .mainnav ul{flex-wrap:nowrap;gap:0 1.05rem}
  .mainnav a{white-space:nowrap}
  header.site .btn{flex:0 0 auto;white-space:nowrap;padding:.7rem 1.05rem}
}

/* Uploaded featured photos fill the card frame; the transparent bear
   illustrations are contained so they are never cropped through the head. */
.news-img img.is-photo{object-fit:cover;object-position:center}

/* Photo credit, only rendered when the licence requires attribution. */
.img-credit{font-size:.8rem;color:var(--muted);margin:0 0 1.2rem}
.img-credit a{color:var(--muted)}
.article-hero{margin:0 0 1.6rem}
.article-hero img{width:100%;height:auto;max-height:420px;object-fit:cover;border-radius:10px;display:block}

/* ===========================================================================
   DESIGN SYSTEM REBUILD
   Consolidated from three independent critiques. The agreed diagnosis: one flat
   cream field, one repeated module (eyebrow > h2 > cream cards) eight to twelve
   times a page, no depth, no dark anchors, no scale contrast. Grok's point that
   the bear is the strongest asset is respected - the illustrations stay; what
   changes is everything around them.
   =========================================================================== */

:root{
  /* A real tonal scale instead of two creams 2% apart. */
  --paper:#f5efe1;        /* base page */
  --paper-2:#efe7d4;      /* alternating band */
  --card:#fffdf7;         /* card, now clearly lighter than both */
  --ink-2:#3d4142;
  --line:#ded2b8;         /* visible, not hairline */
  --shadow-sm:0 1px 2px rgba(45,60,34,.06), 0 2px 6px rgba(45,60,34,.05);
  --shadow-md:0 2px 4px rgba(45,60,34,.07), 0 8px 20px rgba(45,60,34,.08);
  --shadow-lg:0 4px 10px rgba(45,60,34,.10), 0 18px 44px rgba(45,60,34,.12);
}
body{background:var(--paper)}

/* --- 1. Sections alternate, and dark bands anchor the page ---------------- */
main section.band{background:var(--paper)}
main section.band:nth-of-type(even){background:var(--paper-2)}
/* A dark band roughly every fourth section gives the eye somewhere to land. */
main section.band.on-ink,
main section.band.on-ink:nth-of-type(even){background:var(--forest-deep);color:#f1ece0}
.on-ink h2,.on-ink h3{color:#fff}
.on-ink p,.on-ink li{color:#ddd6c6}
.on-ink .eyebrow{color:var(--gold-dark)}
.on-ink .card{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.14);box-shadow:none}
.on-ink .card h3,.on-ink .card h4{color:#fff}
.on-ink .card p{color:#ccc5b4}

/* --- 2. Cards get depth and a real edge ---------------------------------- */
.card{background:var(--card);border:1px solid var(--line);border-radius:10px;
  box-shadow:var(--shadow-sm);transition:box-shadow .2s ease,transform .2s ease}
.card:has(a):hover{box-shadow:var(--shadow-md);transform:translateY(-2px)}
.card h3 a,.card h4 a{text-decoration:none}
.card h3 a:hover,.card h4 a:hover{text-decoration:underline}
/* A colour edge on the leading side turns a plain box into a designed one. */
.grid > .card{position:relative;overflow:hidden}
.grid > .card::before{content:"";position:absolute;inset:0 auto 0 0;width:3px;
  background:var(--gold);opacity:.55}
.on-ink .grid > .card::before{background:var(--gold-dark);opacity:.8}

/* --- 3. Section headings get scale contrast and a marker ----------------- */
main h2{position:relative;letter-spacing:-.012em}
section.band > .wrap > h2:first-child,
section.band > .wrap > div > .eyebrow + h2{margin-top:0}
.eyebrow{position:relative;display:inline-flex;align-items:center;gap:.55rem}
.eyebrow::before{content:"";width:1.6rem;height:2px;background:var(--gold);flex:0 0 auto}
.on-ink .eyebrow::before{background:var(--gold-dark)}

/* --- 4. The intake form must not blend into the page --------------------- */
.card:has(> .form){background:var(--card);border:1px solid var(--line);
  box-shadow:var(--shadow-lg);border-top:4px solid var(--forest)}
.form label{font-weight:700;color:var(--forest)}
.form input,.form select,.form textarea{border:1.5px solid #c9bda1;border-radius:7px;
  background:#fff;padding:.7rem .8rem;font-size:1rem;transition:border-color .15s,box-shadow .15s}
.form input:focus,.form select:focus,.form textarea:focus{border-color:var(--forest);
  box-shadow:0 0 0 3px rgba(45,74,43,.14);outline:none}

/* --- 5. Buttons: one obvious primary ------------------------------------- */
.btn{border-radius:7px;font-weight:700;transition:transform .12s,box-shadow .18s,background .18s}
.btn-primary{background:var(--forest);color:#fff;box-shadow:var(--shadow-sm)}
.btn-primary:hover{background:#22391f;box-shadow:var(--shadow-md);transform:translateY(-1px)}
.btn-ghost{background:#fff;border:2px solid var(--forest);color:var(--forest)}
.btn-ghost:hover{background:var(--forest);color:#fff}
.btn-gold{background:var(--gold);color:#fff;box-shadow:var(--shadow-sm)}
.btn-gold:hover{background:#6a4a11;transform:translateY(-1px)}

/* --- 6. Numbered steps: oversized numerals, not another card grid -------- */
.steps{counter-reset:s;list-style:none;padding:0;margin-top:1.6rem;
  display:grid;gap:0}
.steps li{counter-increment:s;display:grid;grid-template-columns:4.5rem 1fr;
  gap:1.1rem;align-items:start;padding:1.15rem 0;border-top:1px solid var(--line)}
.steps li:last-child{border-bottom:1px solid var(--line)}
.steps li::before{content:counter(s,decimal-leading-zero);
  font-family:var(--display);font-size:2.6rem;font-weight:900;line-height:.9;
  color:var(--gold);opacity:.42;letter-spacing:-.03em}
.steps li strong{display:block;font-size:1.08rem;color:var(--forest);margin-bottom:.2rem}
.on-ink .steps li{border-color:rgba(255,255,255,.16)}
.on-ink .steps li::before{color:var(--gold-dark);opacity:.55}
.on-ink .steps li strong{color:#fff}

/* --- 7. Tick lists read as a checklist, not a paragraph ------------------ */
ul.ticks{list-style:none;padding:0}
ul.ticks li{position:relative;padding-left:1.75rem;margin-bottom:.55rem}
ul.ticks li::before{content:"";position:absolute;left:0;top:.55em;width:.7rem;height:.38rem;
  border-left:2.5px solid var(--gold);border-bottom:2.5px solid var(--gold);
  transform:rotate(-45deg)}
.on-ink ul.ticks li::before{border-color:var(--gold-dark)}

/* --- 8. The "we serve" strip becomes a real component -------------------- */
.serve{background:var(--card);border:1px solid var(--line);border-left:4px solid var(--gold);
  box-shadow:var(--shadow-sm);border-radius:0 9px 9px 0}

/* --- 9. Kill the lopsided hero. Text and figure share the row properly. -- */
@media (min-width:1000px){
  /* A short text block beside a tall illustration was leaving a 400px void.
     Cap the illustration to the text's own height rather than the reverse. */
  .split .wrap,.hero .wrap{align-items:center}
  .split .figure img,.hero .figure img{max-height:min(58vh,430px);width:auto;
    max-width:100%;margin-inline:auto}
  /* Pages whose hero text is only a line or two get a shorter figure still. */
  main section.band:first-of-type .figure img{max-height:min(46vh,360px)}
}

/* --- 10. Prose sections read as an article column, not a ragged half ----- */
@media (min-width:1000px){
  main section.band:not(:has(.grid)):not(:has(.figure)):not(:has(form))
    :not(:has(.ctaband)):not(:has(.steps)) .wrap{max-width:54rem}
}

/* --- 11. Pull quote: a change of pace between text blocks ---------------- */
.pullquote{margin:2rem 0;padding:1.4rem 0 1.4rem 1.6rem;border-left:4px solid var(--gold);
  font-family:var(--display);font-size:clamp(1.2rem,2vw,1.5rem);line-height:1.35;
  color:var(--forest);font-weight:700;max-width:44rem}
.on-ink .pullquote{border-color:var(--gold-dark);color:#fff}

/* --- 12. Tighter vertical rhythm; the page was mostly air ---------------- */
section.band{padding-block:clamp(2.1rem,4vw,3.1rem)}
main section.band.on-ink{padding-block:clamp(2.6rem,5vw,4rem)}
h2{margin-top:0}
section.band > .wrap > * + h2,
section.band > .wrap > div > * + h2{margin-top:1.6em}
.grid{margin-top:1.3rem}

/* --- 13. Article cards in the carousel/index get the same depth ---------- */
.news-item{background:var(--card);border:1px solid var(--line);box-shadow:var(--shadow-sm);
  transition:box-shadow .2s,transform .2s}
.news-item:hover{box-shadow:var(--shadow-md);transform:translateY(-3px)}
.news-img{background:linear-gradient(160deg,#efe7d4,#e4d9be)}

/* --- Corrections to the block above ------------------------------------- */

/* .btn-ghost went solid white, which killed it on the dark CTA band. On light
   ground it is an outlined green button; on dark ground it stays outlined. */
.btn-ghost{background:transparent;border:2px solid var(--forest);color:var(--forest)}
.btn-ghost:hover{background:var(--forest);color:#fff}
.on-dark .btn-ghost,.ctaband .btn-ghost,.on-ink .btn-ghost{
  background:transparent;border-color:var(--gold-dark);color:#fff}
.on-dark .btn-ghost:hover,.ctaband .btn-ghost:hover,.on-ink .btn-ghost:hover{
  background:var(--gold-dark);color:#1d1a12}

/* Cards on a dark band: one consistent treatment, text that actually reads. */
.on-ink .card{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.20)}
.on-ink .card h3,.on-ink .card h4,.on-ink .card h3 a,.on-ink .card h4 a{color:#fff}
.on-ink .card p,.on-ink .card li{color:#e6e0d2}
.on-ink .card .eyebrow{color:var(--gold-dark)}
.on-ink .card a{color:#fff}
.on-ink .serve{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.20);
  border-left-color:var(--gold-dark);color:#e6e0d2}
.on-ink .serve strong{color:#fff}
.on-ink .more-link a{color:var(--gold-dark)}

/* A short hero next to a tall illustration: centre the pair and cap the art. */
@media (min-width:1000px){
  main section.band:first-of-type .wrap{align-items:center}
  main section.band:first-of-type .figure img{max-height:320px}
}

/* Dark-band cards must outrank every light-band card rule, including the
   nth-of-type alternation above. Scoped from main to win on specificity. */
main section.band.on-ink .card,
main section.band.on-ink:nth-of-type(even) .card{
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.22)}
main section.band.on-ink .card p,
main section.band.on-ink .card li{color:#e8e2d4}
main section.band.on-ink .card .eyebrow{color:var(--gold-dark)}
main section.band.on-ink .card h3,
main section.band.on-ink .card h4{color:#fff}

/* The original step marker was a filled circle badge; my oversized numeral
   inherited its background, radius and fixed box, producing a grey disc with
   invisible text. Reset the badge properties explicitly. */
.steps li::before{
  background:none!important;border-radius:0!important;
  width:auto!important;height:auto!important;
  display:block!important;text-align:right;
  grid-row:span 2!important;align-self:start;
  font-family:var(--display);font-size:2.5rem;font-weight:900;line-height:.95;
  color:var(--gold);opacity:.45;letter-spacing:-.03em;
  box-shadow:none!important;padding:0!important}
.steps h3{margin:.1rem 0 .25rem;font-size:1.08rem;color:var(--forest)}
.on-ink .steps h3{color:#fff}
.on-ink .steps p{color:#ddd6c6}

/* Prose inside a dark band was still hugging the left with an empty right. */
@media (min-width:1000px){
  main section.band.on-ink:not(:has(.grid)):not(:has(.figure)) .wrap{max-width:54rem}
}

/* ===========================================================================
   A-LEVEL PASS - consolidated from Grok + Gemini + internal review.
   Bear and palette preserved by instruction. Everything else earns its place.
   =========================================================================== */

/* G1. Section rhythm: real beats between major sections (Grok #3). */
main section.band{padding-block:clamp(2.75rem,5.5vw,4.5rem)}
main section.band.on-ink{padding-block:clamp(3.25rem,6vw,5.25rem)}

/* G2. Typographic hierarchy: H2s step up, key claims become callouts (Grok #2). */
main h2{font-size:clamp(1.7rem,3vw,2.3rem);font-weight:900;letter-spacing:-.015em}
.hero h1{font-size:clamp(2.2rem,3.6vw,3.2rem);font-weight:900;line-height:1.08}
.callout{font-family:var(--display);font-weight:900;font-size:clamp(1.15rem,1.9vw,1.45rem);
  color:var(--forest);letter-spacing:-.01em}

/* G3. CTA hierarchy: ONE dominant action (Grok #4, Gemini). Phone is primary
   per the build brief - the call button carries the weight everywhere. */
.btn{font-size:1.02rem;padding:.85rem 1.4rem}
.btn-primary,.btn-gold{font-size:1.08rem;padding:.95rem 1.6rem;box-shadow:var(--shadow-md)}
.callbar .c{font-weight:900}
a:focus-visible,button:focus-visible,.btn:focus-visible{outline:3px solid var(--gold);outline-offset:2px}

/* G4. Cards stop being one identical module (Grok #5, Gemini "card fatigue").
   The first card in any 3-up grid becomes a feature card; a spanning last card
   becomes a horizontal banner instead of a stretched orphan. */
@media (min-width:1000px){
  .grid:not(.split .grid) > .card:first-child:nth-last-child(n+5){
    grid-row:span 2;display:flex;flex-direction:column;justify-content:center;
    padding:2rem 1.8rem;border-left:5px solid var(--gold);box-shadow:var(--shadow-md)}
  .grid:not(.split .grid) > .card:first-child:nth-last-child(n+5) h3{font-size:1.5rem}
  .grid:not(.split .grid) > .card:first-child:nth-last-child(n+5) p{font-size:1.05rem;color:var(--ink-2)}
  /* spanning last card: horizontal, centred, deliberate */
  .grid > .card:last-child[style],
  .grid:not(.split .grid) > .card:last-child:nth-child(3n+1){
    display:grid;grid-template-columns:minmax(14rem,1fr) 2fr;gap:.4rem 2.2rem;
    align-items:center;padding:1.6rem 2rem}
  .grid:not(.split .grid) > .card:last-child:nth-child(3n+1) h3{margin:0;font-size:1.35rem}
  .grid:not(.split .grid) > .card:last-child:nth-child(3n+1) p{margin:0}
}

/* G5. The mascot stops floating (Gemini "mascot grounding"): an elliptical
   ground shadow ties every figure to the page. */
.figure{position:relative}
.figure::after{content:"";display:block;width:58%;height:16px;margin:-8px auto 0;
  background:radial-gradient(ellipse at center,rgba(36,60,34,.20),transparent 68%)}
.ctaband picture{position:relative;display:block}
.ctaband picture::after{content:"";display:block;width:70%;height:12px;margin:-6px auto 0;
  background:radial-gradient(ellipse at center,rgba(0,0,0,.35),transparent 70%)}

/* G6. Form modernisation (both reviews). Bigger presence, dominant submit. */
.card:has(> .form){box-shadow:var(--shadow-lg);border-top:5px solid var(--forest)}
.form label{font-size:1.02rem}
.form input,.form select,.form textarea{padding:.85rem .95rem;font-size:1.05rem;margin-bottom:.35rem}
.form .btn,.form button[type=submit],.form input[type=submit]{
  width:100%;font-size:1.15rem;padding:1.05rem 1.4rem;background:var(--forest);color:#fff;
  border:none;border-radius:8px;font-weight:900;cursor:pointer;box-shadow:var(--shadow-md);
  transition:background .18s,transform .12s}
.form button[type=submit]:hover,.form input[type=submit]:hover{background:#22391f;transform:translateY(-1px)}

/* G7. Steps numerals were blending into the background (Gemini). */
.steps li::before{opacity:.85!important;color:var(--gold)!important}
.on-ink .steps li::before{opacity:.95!important;color:var(--gold-dark)!important}

/* G8. FAQ accordions read as interactive controls (Gemini). */
.faq details{background:var(--card);border:1px solid var(--line);border-radius:9px;
  margin-bottom:.7rem;box-shadow:var(--shadow-sm);overflow:hidden}
.faq summary{padding:1.05rem 3rem 1.05rem 1.25rem;font-weight:700;color:var(--forest);
  cursor:pointer;position:relative;list-style:none;font-size:1.05rem}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:1.15rem;top:50%;translate:0 -50%;
  font-size:1.6rem;font-weight:400;color:var(--gold);transition:rotate .2s}
.faq details[open] summary::after{rotate:45deg}
.faq details[open]{box-shadow:var(--shadow-md)}
.faq summary:hover{background:rgba(125,87,20,.05)}
.faq details > div{padding:0 1.25rem 1.15rem}

/* G9. Footer: brand column + legal column, lighter legal weight (Grok #8). */
footer.site .wrap{display:grid;grid-template-columns:minmax(16rem,1fr) 2fr;gap:1rem 3.5rem;align-items:start}
footer.site .fname{grid-column:1;font-size:1.15rem}
footer.site .legal{grid-column:2;margin:0 0 .55rem;font-size:.78rem;line-height:1.5;opacity:.85}
footer.site .footnav{grid-column:1/-1;margin-top:1.2rem;padding-top:1rem;border-top:1px solid rgba(255,255,255,.14)}
@media (max-width:880px){footer.site .wrap{grid-template-columns:1fr}
  footer.site .fname,footer.site .legal,footer.site .footnav{grid-column:1}}

/* G10. Nav active state (both reviews) - class set by motion.js. */
.mainnav a{position:relative;padding-bottom:.2rem}
.mainnav a.is-active{color:var(--gold)}
.mainnav a.is-active::after{content:"";position:absolute;left:0;right:0;bottom:-.15rem;
  height:2.5px;background:var(--gold);border-radius:2px}

/* G11. Blog cards: uniform crop, clamped text so the grid aligns (Gemini). */
.news-img{aspect-ratio:16/10}
.news-head{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:2.6em}
.news-ex{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.news-cat{color:var(--gold);border-bottom:2px solid var(--gold-dark);padding-bottom:.15rem}

/* G12. Hero trust strip: substantiated proof, early (Grok #10, compliant). */
.proof{display:flex;flex-wrap:wrap;gap:.6rem 2rem;margin-top:1.3rem;padding-top:1.1rem;
  border-top:1px solid var(--line);font-size:.92rem;font-weight:700;color:var(--forest)}
.proof span{display:inline-flex;align-items:center;gap:.5rem}
.proof span::before{content:"";width:.65rem;height:.34rem;border-left:2.5px solid var(--gold);
  border-bottom:2.5px solid var(--gold);transform:rotate(-45deg)}

/* Hero proof strip reuses the badges row; feature card on the team page. */
.hero .badges{display:flex;flex-wrap:wrap;gap:.6rem 2rem;margin-top:1.3rem;padding:1.1rem 0 0;
  border-top:1px solid var(--line);list-style:none;font-size:.92rem;font-weight:700;color:var(--forest)}
.hero .badges li{display:inline-flex;align-items:center;gap:.5rem;max-width:none}
.card-feature{grid-column:1/-1;display:grid;grid-template-columns:minmax(15rem,1fr) 2.2fr;
  gap:.3rem 2.4rem;align-items:center;padding:1.9rem 2.1rem;border-left:5px solid var(--gold);
  box-shadow:var(--shadow-md)}
.card-feature .eyebrow{grid-column:1/-1}
.card-feature h3{font-size:1.45rem;margin:0}
.card-feature p{margin:.3rem 0 0}
.card-feature .more-link{grid-column:2}
@media (max-width:880px){.card-feature{grid-template-columns:1fr}
  .card-feature .more-link{grid-column:1}}

/* The feature-card rule set ink-2 text, which is invisible inside a dark band. */
main section.band.on-ink .grid:not(.split .grid) > .card:first-child:nth-last-child(n+5) p,
main section.band.on-ink .grid > .card p,
main section.band.on-ink .grid > .card .eyebrow{color:#e8e2d4}
main section.band.on-ink .grid > .card .eyebrow{color:var(--gold-dark)}

/* ===========================================================================
   CENTERING + ORPHAN RESOLUTION PASS (client: "center when necessary and
   eliminate as much white space as possible").
   =========================================================================== */

/* 1. The 2-row feature card punched holes in 5- and 7-card grids. Removed. */
@media (min-width:1000px){
  .grid:not(.split .grid) > .card:first-child:nth-last-child(n+5){
    grid-row:auto;display:block;padding:1.35rem 1.4rem;
    border-left:none;box-shadow:var(--shadow-sm);justify-content:normal}
  .grid:not(.split .grid) > .card:first-child:nth-last-child(n+5) h3{font-size:1.15rem}
  .grid:not(.split .grid) > .card:first-child:nth-last-child(n+5) p{font-size:1rem}

  /* 2. Six-track grid: three visual columns, but orphan rows can centre.
        5 cards -> 3 + 2 centred. 7 or 10 -> full rows + one wide banner. */
  .grid:not(.split .grid){grid-template-columns:repeat(6,1fr)}
  .grid:not(.split .grid) > .card{grid-column:span 2}
  .grid:not(.split .grid) > .card:nth-last-child(2):nth-child(3n+1){grid-column:2/4}
  .grid:not(.split .grid) > .card:last-child:nth-child(3n+2){grid-column:4/6}
  .grid:not(.split .grid) > .card:last-child:nth-child(3n+1){grid-column:1/-1}
}

/* 3. Card-grid, carousel and FAQ sections: centred header block, symmetric
      eyebrow rules, intro copy centred on its own axis. Content stays left. */
@media (min-width:781px){
  main section.band:has(.grid) .wrap,
  main section.band:has(.news-rail) .wrap,
  main section.band:has(.news-grid) .wrap,
  main section.band:has(.faq) .wrap{text-align:center}
  main section.band:has(.grid) .wrap :is(.grid,.serve,.form,.steps,.ticks),
  main section.band:has(.news-rail) .news-track,
  main section.band:has(.news-grid) .news-grid,
  main section.band:has(.faq) .faq{text-align:left}
  main section.band:has(.grid) .wrap > p,
  main section.band:has(.grid) .wrap > div > p,
  main section.band:has(.news-rail) .wrap > p,
  main section.band:has(.faq) .wrap > p{max-width:44rem;margin-inline:auto}
  /* symmetric eyebrow when centred */
  main section.band:has(.grid) .eyebrow::after,
  main section.band:has(.news-rail) .eyebrow::after,
  main section.band:has(.faq) .eyebrow::after{
    content:"";width:1.6rem;height:2px;background:var(--gold);flex:0 0 auto}
  main section.band.on-ink .eyebrow::after{background:var(--gold-dark)}
  /* the little ornament bear centres with the header instead of floating right */
  .split:has(.grid) .figure{margin:0 auto .5rem;order:-1}
  .more-link{text-align:center}
  .news-controls{justify-content:center}
  .faq{margin-inline:auto}
}

/* 4. Less air overall: bands tightened (client asked for less white space). */
main section.band{padding-block:clamp(2.2rem,4.2vw,3.2rem)}
main section.band.on-ink{padding-block:clamp(2.7rem,4.8vw,3.9rem)}
.grid{margin-top:1.5rem}
main h2{margin-bottom:.4em}

/* The split-section grids ("Seven ways", "Where were you hurt") kept their old
   auto-fit columns, which packed 4-up rows and re-created orphans. These
   selectors outrank every earlier grid rule, split or not. */
@media (min-width:1000px){
  main section.band .wrap .grid{grid-template-columns:repeat(6,1fr)}
  main section.band .wrap .grid > .card{grid-column:span 2;grid-row:auto}
  main section.band .wrap .grid > .card:nth-last-child(2):nth-child(3n+1){grid-column:2/4}
  main section.band .wrap .grid > .card:last-child:nth-child(3n+2){grid-column:4/6}
  main section.band .wrap .grid > .card:last-child:nth-child(3n+1){grid-column:1/-1;
    display:grid;grid-template-columns:minmax(14rem,1fr) 2fr;gap:.4rem 2.2rem;
    align-items:center;padding:1.6rem 2rem}
  main section.band .wrap .grid > .card:last-child:nth-child(3n+1) :is(h3,h4){margin:0;font-size:1.3rem}
  main section.band .wrap .grid > .card:last-child:nth-child(3n+1) p{margin:0}
  /* a lone eyebrow inside the banner card sits above both columns */
  main section.band .wrap .grid > .card:last-child:nth-child(3n+1) .eyebrow{grid-column:1/-1;margin-bottom:.1rem}
}

/* ==== v0.3.2 HOTFIX - whitespace/orphan regressions ==================== */

/* F1: restore the team feature card (was crushed to 2 tracks by the span rule) */
@media (min-width:1000px){
  main section.band .wrap .grid > .card.card-feature{
    grid-column:1/-1;
    display:grid;
    grid-template-columns:minmax(15rem,1fr) 2.2fr;
    gap:.3rem 2.4rem;
    align-items:center;
  }
  /* the two staff cards then split the next row cleanly instead of leaving a
     third-track hole */
  main section.band .wrap .grid > .card.card-feature ~ .card{grid-column:span 3}
}

/* F2: banner cards - both columns vertically centred */
@media (min-width:1000px){
  main section.band .wrap .grid > .card:last-child:nth-child(3n+1) > *{align-self:center}
}

/* F3: the intake form card centres instead of stranding left */
main .card:has(> .form){margin-inline:auto}

/* F4: short link-lists become a centred row instead of a stranded column */
main section.band ul.ticks:has(> li > a:only-child){
  display:flex;flex-wrap:wrap;justify-content:center;gap:.6rem 1.4rem}
main section.band ul.ticks:has(> li > a:only-child) li{margin:0}

/* F5: interior-page heroes carry less dead air (home .hero untouched) */
main section.band:first-of-type:not(.hero){padding-block:clamp(1.5rem,2.8vw,2.3rem)}

/* F6: the injected "Licensed in West Virginia" badge gets its checkmark */
.hero .badges li:first-child::before{content:"\2713\00a0";color:var(--gold);font-weight:900}

/* F7: prose-section h2s centre like grid-section h2s. Excludes article bodies. */
@media (min-width:781px){
  main section.band:not(.article-body):not(.article-head):not(:has(.grid)):not(:has(form)):not(:has(.ctaband)):not(:has(.steps)):not(:has(.figure)):not(:has(.news-grid)):not(:has(.news-rail)) .wrap > h2{
    text-align:center}
}

/* ==== v0.3.3 - the figure column is sized by the ART, not by a fraction ====
   Root cause of the recurring "enormous gap beside the bear". Four earlier
   passes each capped the illustration smaller (400 -> 430 -> 360 -> 320px)
   while the column stayed at .75fr/.68fr, so every reduction ADDED dead space
   instead of removing it. Measured live at 1440 before this fix: the hero
   figure column was 399px holding a 233px image = 166px of nothing inside the
   column, on top of a 131px gutter. Size the column to the art and the gap
   cannot come back. */
@media (min-width:900px){
  main section.band.hero .wrap{
    grid-template-columns:minmax(0,1fr) clamp(16rem,24vw,21.5rem);
    column-gap:clamp(1.5rem,2.6vw,2.5rem)}
  /* NOT applied where the wrap holds a .grid: in those sections the inner div
     is display:contents, so an art-sized track would capture the promoted
     heading too and crush it to 274px (home "Seven ways ...", "Where were you
     hurt?"). Those keep their fractional columns, and never had dead space. */
  main section.band.split:not(.rev) .wrap:not(:has(.grid)){
    grid-template-columns:clamp(13rem,19vw,18rem) minmax(0,1fr);
    column-gap:clamp(1.5rem,2.6vw,2.5rem)}
  main section.band.split.rev .wrap:not(:has(.grid)){
    grid-template-columns:minmax(0,1fr) clamp(13rem,19vw,18rem);
    column-gap:clamp(1.5rem,2.6vw,2.5rem)}
  /* The art fills its column exactly. This must clear the four stacked height
     caps above it; none of these upscale (every source is 400px wide native). */
  main section.band.hero .figure img,
  main section.band.split .figure img{
    width:100%;height:auto;max-width:100%;max-height:none;margin-inline:0}
  /* The hero no longer needs padding to reach the fold - the art fills it. */
  main section.band.hero{padding-block:clamp(1.5rem,2.6vw,2.25rem)}
}
/* Four proof points fit one row now that the text column is wider. */
.hero .badges{gap:.55rem 1.5rem}
/* The four proof points total 754px of text in a 731px column, so a single row
   would need ~13px type. Two balanced rows instead of a 3+1 orphan. */
@media (min-width:900px){
  .hero .badges{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
    gap:.55rem 1.5rem}
  .hero .badges li{max-width:100%}
}

/* ==== v0.3.4 - prose columns centre under their (already centred) headings ==
   v0.3.2's F7 centred prose h2s but left their body copy pinned left inside a
   wider wrap. Measured on /about/ at 1440: h2 856px centred, paragraph capped
   at 608px sitting at the left edge = 284px of dead air down the right of
   every prose band, on roughly 30 pages.
   The selector deliberately mirrors F7's exclusion list AND adds :not(:has(h1)),
   so body copy centres exactly where the heading above it centres and nowhere
   else. Without the h1 guard this centred the lede on every location hero while
   its own h1 and buttons stayed left - a 24px misalignment.
   Reading measure is NOT widened; 608px is already ~76 characters. */
@media (min-width:781px){
  main section.band:not(.article-body):not(.article-head):not(.hero):not(.split):not(:has(h1)):not(:has(.grid)):not(:has(form)):not(:has(.ctaband)):not(:has(.steps)):not(:has(.figure)):not(:has(.news-grid)):not(:has(.news-rail)) .wrap > p,
  main section.band:not(.article-body):not(.article-head):not(.hero):not(.split):not(:has(h1)):not(:has(.grid)):not(:has(form)):not(:has(.ctaband)):not(:has(.steps)):not(:has(.figure)):not(:has(.news-grid)):not(:has(.news-rail)) .wrap > .lede,
  main section.band:not(.article-body):not(.article-head):not(.hero):not(.split):not(:has(h1)):not(:has(.grid)):not(:has(form)):not(:has(.ctaband)):not(:has(.steps)):not(:has(.figure)):not(:has(.news-grid)):not(:has(.news-rail)) .wrap > ul,
  main section.band:not(.article-body):not(.article-head):not(.hero):not(.split):not(:has(h1)):not(:has(.grid)):not(:has(form)):not(:has(.ctaband)):not(:has(.steps)):not(:has(.figure)):not(:has(.news-grid)):not(:has(.news-rail)) .wrap > ol{
    margin-inline:auto}
  /* Pure-prose wraps narrow so the heading stops overhanging its own text. */
  main section.band:not(.article-body):not(.article-head):not(:has(.grid)):not(:has(.figure)):not(:has(form)):not(:has(.ctaband)):not(:has(.steps)):not(:has(.news-grid)):not(:has(.news-rail)) .wrap{
    max-width:46rem}
}

/* ==== v0.3.5 - short landscape art beside a tall column ====================
   Every earlier sweep measured HORIZONTAL dead space only, so this class was
   invisible to all of them - and the naturalWidth>0 guard added to suppress
   lazy-image false alarms was silently SKIPPING these sections, because the art
   sits below the fold. Measured at 1440 with lazy images forced to load:
     home "Start here"  172px of art vs a 905px steps column -> 733px void.
   The art is landscape (400x239 native), so no amount of scaling fills a tall
   narrow column. Widening the list container alone does not help either - the
   step text keeps its own measure, so the void just moves right (tested).
   Fix: promote the heading block, put the art beside the HEADING, and run the
   list full width in TWO columns - which consumes the horizontal space instead
   of reserving it and roughly halves the section height. */
@media (min-width:1000px){
  main section.band.split .wrap:has(> div > .steps){align-items:start;row-gap:0}
  main section.band.split .wrap:has(> div > .steps) > div{display:contents}
  main section.band.split .wrap:has(> div > .steps) > div > *{grid-column:1}
  main section.band.split .wrap:has(> div > .steps) > .figure{
    grid-column:2;grid-row:1/span 3;align-self:start;position:static;margin-top:.25rem}
  main section.band.split .wrap:has(> div > .steps) > div > .steps{
    grid-column:1/-1;grid-row:9;
    display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
    column-gap:3.5rem;align-items:start}
  main section.band.split .wrap:has(> div > .steps) > div > .steps > li{max-width:none}
  main section.band.split .wrap:has(> div > .steps) > div > .more-link{
    grid-row:10;text-align:start}
}
/* Page heroes (.split.rev carrying the h1) pinned their art to the top of the
   hero row, leaving 310px (/medical-malpractice/) and 241px (/car-accidents/)
   of empty column beneath it. A hero row is short enough that centring reads
   correctly - unlike the steps case above, where centring pushed the art below
   the fold. Steps sections carry an h2, so they are not matched here. */
@media (min-width:1000px){
  main section.band.split:has(h1) .figure{align-self:center;position:static}
}

/* ==== v0.4.0 - launch whitespace pass ======================================
   Decisions logged in claude/bb-law-launch-decisions-2026-08-23.md.
   Density target: balanced centred columns that FILL more width than a pure
   narrow column ("a mix of 1 and 2"). Measure widened, gutters tightened. */

/* D5 - reading measure 38rem (608px, ~76ch) -> 44rem (704px, ~88ch at this
   size). Fills ~96px more of every prose row on desktop. Left at 38rem below
   1000px, where the container is already the constraint and a wider cap would
   only produce longer lines on tablets. */
@media (min-width:1000px){
  :root{--measure:44rem}
}

/* D8 - "too much white space between the bear logos and accompanying text".
   One consistent 2rem gutter everywhere art sits beside copy, replacing the
   clamp that reached 40px at 1440 and wider still on mid-page splits. */
@media (min-width:900px){
  main section.band.hero .wrap,
  main section.band.split:not(.rev) .wrap:not(:has(.grid)),
  main section.band.split.rev .wrap:not(:has(.grid)){column-gap:2rem}
  main section.band.split .wrap:has(.grid){column-gap:2rem}
}

/* D3 - the dark CTA band bear is dark fur + dark suit on rgb(45,74,43) and
   reads as a smudge. A soft cream halo separates it. The illustration itself
   is untouched. */
/* The CTA picture is a DIRECT child of .ctaband, not wrapped in a .figure -
   the first version of this selector silently matched nothing. Verified live. */
main .ctaband picture,
main .on-ink picture,
main .on-dark picture{
  display:block;
  background:radial-gradient(closest-side,rgba(244,238,224,.20),rgba(244,238,224,.09) 55%,rgba(244,238,224,0) 78%)}

/* D9 - intake form. Beau asked for the form on the right rather than centred,
   "with" the copy. Measured first: the form card is the ONLY child of its band
   on every page (home, contact, martinsburg, all injury and practice pages) -
   nothing sits beside it. Right-aligning it as-is would leave a dead LEFT half,
   and splitting the card into copy-left / form-right leaves a ~790px void in
   the copy column, since the heading block is only 94px against an 881px form.
   Both make the whitespace worse.
   What does help: widen the card and pair the short fields, which cuts the side
   air from 240px to 112px per side and shortens the form by two rows. A true
   copy-left / form-right layout needs ~60 words of supporting copy in the left
   column - flagged to Beau, not invented here. */
@media (min-width:1000px){
  main .card:has(> .form){max-width:min(100%,60rem)}
  main .card > .form{
    display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
    column-gap:1.5rem;align-items:stretch}
  /* Paired fields have labels of different heights ("Phone" carries helper
     text, "Your name" does not), so the inputs must be pushed to a common
     baseline or they step. */
  main .card > .form > .field:has(input[type=text]),
  main .card > .form > .field:has(input[type=tel]),
  main .card > .form > .field:has(input[type=email]){display:flex;flex-direction:column}
  main .card > .form > .field:has(input[type=text]) > input,
  main .card > .form > .field:has(input[type=tel]) > input,
  main .card > .form > .field:has(input[type=email]) > input{margin-top:auto}
  main .card > .form > *{grid-column:1/-1}
  main .card > .form > .field:has(input[type=text]),
  main .card > .form > .field:has(input[type=tel]),
  main .card > .form > .field:has(input[type=email]){grid-column:span 1}
  main .card > .form > .field:has(textarea),
  main .card > .form > .field:has(select){grid-column:1/-1}
  /* The TCPA consent checkbox was rendering on its own centred line above its
     text. Put it inline at the start of its label, where it is both correct
     and a larger, more obvious hit target. */
  main .card > .form > .field:has(input[type=checkbox]) > label{
    display:flex;align-items:flex-start;gap:.6rem;max-width:none}
  main .card > .form > .field:has(input[type=checkbox]) input[type=checkbox]{
    flex:0 0 auto;margin:.15rem 0 0;width:1.15rem;height:1.15rem}
}

/* chg-mirror 6/6: https://bigbubba.com/?custom-css=3a705edfdb */
/* ==========================================================
   BIG BUBBA - BOLD MASCOT SYSTEM  (2026-09-04)
   Brief: mascot-led brand at insurance-category confidence.
   Flat colour fields, heavy type, high contrast, white ground,
   no decorative eyebrows, no soft shadows.
   Decisions logged in claude/bb-law-brand-decisions-2026-09-04.md
   ========================================================== *//* --- 1. TOKENS -------------------------------------------------
   The warm cream ground was the strongest generic-AI signature on
   the site and it also fights the insurance-mascot playbook, which
   runs on white plus one saturated brand colour. Ground goes white;
   green gets deeper so it works as a field rather than a tint. */:root{
  --page:#ffffff; --paper:#ffffff; --surface:#ffffff; --card:#ffffff;
  --paper-2:#EDECE4;
  --forest:#173620; --forest-deep:#0E2415;
  --gold:#7A5210; --gold-dark:#F0C766;
  --ink:#111509; --ink-2:#2B3125; --muted:#565C4F;
  --line:#173620; --hairline:#DBD9D0; --rule:#7A5210;
  --shadow-sm:none; --shadow-md:none; --shadow-lg:none;
}
body{background:#fff}

/* --- 2. EYEBROWS ------------------------------------------------
   There were 20 on the homepage alone. Small gold letterspaced caps
   above every heading is the most recognisable generated-design
   habit there is. Killed - except the ones carrying real data
   (county names on location tiles, job titles on team cards). */
.eyebrow{display:none !important}
.card .eyebrow,.grid .eyebrow,.tile .eyebrow{
  display:block !important;font-size:.66rem;letter-spacing:.1em;color:var(--muted)}



/* --- 5. HERO: one action on desktop ------------------------------
   Three Call buttons rendered at once. Header keeps it, closing band
   keeps it, hero drops it above 900px and keeps it on mobile. */
@media (min-width:900px){ .hero .btn-ghost[href^="tel:"]{display:none} }

/* --- 6. TYPE: heavier, tighter, left-aligned --------------------- */
h1,.h1{font-weight:900;letter-spacing:-.028em;line-height:1.04;text-wrap:balance}
h2,.h2{font-weight:800;letter-spacing:-.024em;line-height:1.08;text-align:left;text-wrap:balance}
h3{font-weight:800;letter-spacing:-.012em}

/* --- 7. FLAT: solid edges, no soft card shadow ------------------- */
.card:not(:has(img)):not(:has(picture)),
.tile:not(:has(img)){box-shadow:none !important;border:2px solid var(--line);
  border-radius:4px;background:#fff}
.card:has(img),.card:has(picture),.hero *{border:0 !important;box-shadow:none !important}
.hero img{border:0 !important}

/* --- 8. BUTTONS: chunky and solid -------------------------------- */
.btn{border-radius:4px;font-weight:800;padding:.9rem 1.5rem;border-width:2px}
.btn-primary{background:var(--forest);color:#fff;border:2px solid var(--forest)}
.btn-gold{background:var(--gold-dark);color:var(--forest-deep);
  border:2px solid var(--gold-dark);font-weight:800}
.btn-ghost{border:2px solid var(--forest);color:var(--forest);background:transparent}

.band{background:var(--paper-2)}

/* --- 9. STEPS: real numerals, not 01/02/03 ----------------------- */
.steps{counter-reset:s}
.steps > li::before{counter-increment:s;content:counter(s) !important;
  font-weight:900;font-size:2.1rem;color:var(--gold);letter-spacing:-.04em}

/* --- 10. WVAJ badge promoted ------------------------------------
   With no attorney photo above the fold, third-party credentials
   carry more of the trust load, not less. */
[class*="badge"]{border:2px solid var(--forest);border-radius:4px;
  padding:.7rem 1.05rem;background:#fff}



/* ==========================================================
   HEADER (from the 2026-09-04 layout pass)
   Two-tier. Row 1 brand left, call right. Row 2 nav flush-left
   with the brand, MVA pill right-aligned under the button.
   ========================================================== */
header.site .wrap{flex-wrap:wrap;padding-bottom:.35rem}
header.site .brand{flex:0 0 auto}
header.site .mainnav{order:3;flex:1 0 100%;width:100%;margin-top:.15rem;overflow:visible}
header.site .mainnav ul{display:flex;width:100%;justify-content:flex-start;
  align-items:center;flex-wrap:nowrap;gap:0 1.4rem}
header.site .mainnav .bbmva-pill{margin-left:auto}
.mainnav a{text-transform:capitalize}
.bbmva-pill > a{text-transform:none}
@media (max-width:900px){
  header.site .mainnav{overflow-x:auto}
  header.site .mainnav ul{width:max-content;gap:0 1.1rem}
  header.site .mainnav .bbmva-pill{margin-left:1.1rem}
}

/* ==========================================================
   INTAKE FORM + MVA HUB (from the 2026-09-04 layout pass)
   The theme styles its conversion form via .card:has(> .form).
   Our form renders without that wrapper, so it lost the panel,
   the paired fields and the inline consent checkbox.
   ========================================================== */
.mva-hero > form.form,.mva-cta > form.form,.entry-content > form.form{
  max-width:44rem;background:var(--card);border:2px solid var(--forest);
  border-radius:4px;border-top:5px solid var(--forest);padding:1.4rem}
.mva-hero > form.form > .field:has(input[type=checkbox]) > label,
.mva-cta > form.form > .field:has(input[type=checkbox]) > label,
.entry-content > form.form > .field:has(input[type=checkbox]) > label{
  display:flex;align-items:flex-start;gap:.6rem;max-width:none}
.mva-hero > form.form input[type=checkbox],
.mva-cta > form.form input[type=checkbox],
.entry-content > form.form input[type=checkbox]{
  width:auto;min-height:0;flex:0 0 auto;margin-top:.25rem}

.entry-content:has(.mva-hub-list){max-width:1184px;margin-inline:auto;
  padding-inline:clamp(1rem,4vw,2.25rem)}
.entry-content:has(.mva-hub-list) > h2,
.entry-content:has(.mva-hub-list) > p,
.entry-content:has(.mva-hub-list) > .mva-hub-list,
.entry-content:has(.mva-hub-list) > form.form{max-width:720px;margin-inline:0}
.mva-hub-list{columns:2;column-gap:2.5rem;list-style:none;padding-left:0}
.mva-hub-list li{margin:.4em 0;break-inside:avoid}
.mva-hub-list a{text-decoration:none;font-weight:600}
.mva-hub-list a:hover{text-decoration:underline}
@media (max-width:600px){.mva-hub-list{columns:1}}

/* --- 13. Car and truck lead the practice grid -------------------
   Scoped by :has() to the grid that actually contains the car
   accidents card, so the other grids on the site are untouched. */
.grid:has(> .card a[href*="/practice-areas/car-accidents/"]) > .card:nth-child(-n+2){
  border-width:3px;border-color:var(--forest)}
.grid:has(> .card a[href*="/practice-areas/car-accidents/"]) > .card:nth-child(-n+2) h3{
  font-size:1.22rem}

/* --- 12. Orphan trailing cards ----------------------------------
   The theme stretches a lone trailing card full-width AND switches it
   to a two-column internal grid. Undoing only grid-column left a
   narrow card still running a ~299px internal grid under
   overflow:hidden, which clipped the body copy on "Wrongful death",
   "Weirton", "Somebody answers the phone" and "Loss of consortium".
   Reset the whole treatment, not just the column. */
.grid > .card:last-child:nth-child(3n+1),
.grid > .card:last-child:nth-child(odd),
.split .grid > .card:last-child:nth-child(odd),
.grid:not(.split .grid) > .card:last-child:nth-child(3n+1){
  grid-column:auto !important;
  display:block !important;
  grid-template-columns:none !important;
  grid-template-rows:none !important;
  align-items:normal !important;
  column-gap:normal !important;
  overflow:visible !important;
}


/* ==== 2026-09-05 desktop fixes (Beau's red circles) ==================
   13. Rule 12 above forced grid-column:auto on trailing cards, which in
       the 6-track grid collapses them to ONE track (172px): "Wrongful
       death", "Weirton", "Somebody answers the phone". Keep rule 12's
       display:block (no internal 2-col grid) but restore the intended
       centred placement. Scoped to the same selectors rule 12 used. */
@media (min-width:1000px){
  main section.band .wrap .grid > .card:last-child:nth-child(3n+1){grid-column:3/5 !important}
  main section.band .wrap .grid > .card:last-child:nth-child(3n+2){grid-column:4/6 !important}
  main section.band .wrap .grid > .card:nth-last-child(2):nth-child(3n+1){grid-column:2/4 !important}
}
/* 14. Steps numbered 2,4,6,8,10: two rules both incremented the counter
       (.steps li and .steps > li::before). Increment once. */
.steps > li::before{counter-increment:none !important}
/* 15. Footer: links only, centred. The brand line was removed from the
       template part; the two-column footer grid is no longer needed. */
footer.site .wrap{display:block !important;text-align:center}
footer.site .footnav{grid-column:auto;text-align:center !important;margin:0 auto}
footer.site .wrap hr, footer.site .wrap .rule{display:none}


/* ==== 2026-09-05 motion pass (16-21) ==============================
   Every animation completes on its own timer. Nothing waits on a
   scroll observer, so the page is fully readable at rest. All motion
   is inside prefers-reduced-motion:no-preference. */

/* 16. Hero entrance, staggered. Base state stays visible. */
@media (prefers-reduced-motion:no-preference){
  .band.hero .eyebrow,.band.hero h1,.band.hero .sub,.band.hero .lede,
  .band.hero .cluster,.band.hero .badges,.band.hero .wvaj-badge,
  .page-id-732 main .band:first-of-type h1,
  .page-id-732 main .band:first-of-type .lede{
    animation:bbRise .62s cubic-bezier(.22,.68,.28,1) both}
  .band.hero .eyebrow{animation-delay:.02s}
  .band.hero h1{animation-delay:.10s}
  .band.hero .sub{animation-delay:.20s}
  .band.hero .lede{animation-delay:.28s}
  .band.hero .cluster{animation-delay:.38s}
  .band.hero .badges{animation-delay:.48s}
  .band.hero .wvaj-badge{animation-delay:.56s}
  .page-id-732 main .band:first-of-type h1{animation-delay:.06s}
  .page-id-732 main .band:first-of-type .lede{animation-delay:.20s}
  .page-id-732 .lp-art{animation:bbFade .85s ease-out .12s both}
}
@keyframes bbRise{from{opacity:0;transform:translateY(15px)}to{opacity:1;transform:none}}
@keyframes bbFade{from{opacity:0;transform:scale(.985)}to{opacity:1;transform:none}}

/* 17. One deliberate pull toward the phone: three beats, then still. */
@media (prefers-reduced-motion:no-preference){
  body.home header a[href^="tel:"],
  body.page-id-732 header a[href^="tel:"],
  .page-id-732 .lede a[href^="tel:"]{
    animation:bbPulse 2s ease-in-out 1.5s 3;border-radius:4px}
}
@keyframes bbPulse{
  0%,100%{box-shadow:0 0 0 0 rgba(216,173,76,0)}
  45%{box-shadow:0 0 0 7px rgba(216,173,76,.32)}
}

/* 18. Live indicator on the already-approved 24/7 line. */
.livedot{display:inline-block;width:.48rem;height:.48rem;border-radius:50%;
  background:#3d9c4d;margin-right:.45rem;vertical-align:.06em;flex:0 0 auto}
@media (prefers-reduced-motion:no-preference){
  .livedot{animation:bbBreath 2.4s ease-in-out infinite}
}
@keyframes bbBreath{
  0%,100%{box-shadow:0 0 0 0 rgba(61,156,77,.6)}
  55%{box-shadow:0 0 0 5px rgba(61,156,77,0)}
}

/* 19. Hero art drifts with the scroll. JS sets --bbY. */
@media (min-width:1000px) and (prefers-reduced-motion:no-preference){
  .band.hero .hero-poster img{transform:translate3d(0,var(--bbY,0px),0)}
}

/* 20. Hero video. The poster image is the LCP element and stays the
   sizer; video is layered over it only after load. */
.herovid{position:relative;line-height:0}
.herovid > video{position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;border-radius:6px;opacity:0;transition:opacity .55s ease}
.herovid > video.is-on{opacity:1}

/* 21. Squeeze page: art beside the headline on desktop. */
@media (min-width:900px){
  .page-id-732 main .band:first-of-type .wrap{
    display:flex;align-items:center;gap:clamp(1.75rem,3vw,2.75rem)}
  .page-id-732 main .band:first-of-type .lp-copy{flex:1 1 auto;min-width:0}
  .page-id-732 main .band:first-of-type .lp-art{
    flex:0 0 clamp(14rem,24vw,20rem);margin:0}
}
.page-id-732 .lp-art{margin:1.5rem auto 0;max-width:18rem}
.page-id-732 .lp-art img{width:100%;height:auto;border-radius:6px}

/* 22. Squeeze page is majority mobile traffic: the hero art must never
   push the form down. Desktop only. */
@media (max-width:899px){ .page-id-732 .lp-art{display:none} }

/* 23. Video hero (home + squeeze): 16:9 video two-thirds left, intake form
   one-third right. The footage is a wide landscape edit with Bubba often
   off-centre, so it must never be cover-cropped into a square or portrait
   slot. Fixed 16/9 box, no crop, no CLS. */
.vhero .wrap{display:block !important}
.vh-head{margin:0 0 18px}
.vh-head h1{margin:.12em 0 .28em}
.vh-row{display:grid;grid-template-columns:2fr 1fr;gap:28px;align-items:start}
.vh-main,.vh-form{min-width:0}
.vh-form > .card{margin:0}
.vh-video{margin:0 0 18px;aspect-ratio:16/9;overflow:hidden;border-radius:8px;background:#141210}
.vh-video > img{width:100%;height:100%;object-fit:cover;display:block}

/* 24. Under 900px the two columns stack: video first, then the form.
   Mobile is the majority of squeeze-page traffic, so nothing may push the
   form below a second screenful. */
@media (max-width:899px){
  .vh-row{grid-template-columns:1fr;gap:22px}
  .vh-video{margin-bottom:14px}
}

/* 25. The intake form now lives in a one-third column, so its two-up field
   pairs would land at ~146px each. Force a single column there and let the
   hero headline use the full width it just gained, which pulls the video up
   about one line height. */
@media (min-width:900px){
  .vh-form #intake .form{grid-template-columns:1fr !important}
  .vh-head h1{max-width:none}
  .vh-head .sub{max-width:none}
}

/* 26. BUG FIX. The theme's `.hero .figure{position:static}` outranked rule 20's
   `.herovid{position:relative}`, so the absolutely-positioned <video> lost its
   containing block and painted over the whole page. Pin the containing block
   with higher specificity and clip hard. */
.band.hero .figure.herovid,.vh-video{position:relative !important;overflow:hidden !important;isolation:isolate}
.vh-video > video{position:absolute !important;inset:0 !important;width:100% !important;height:100% !important;object-fit:cover;border-radius:8px;z-index:0}

/* 27. Form panel in the hero. Moving #intake into .hero exposed the old
   whitespace-pass rule `.hero *{border:0 !important}`, which erased every
   input border and the card edge: fields rendered as invisible white-on-white.
   Restore with higher specificity, make the card read as a panel, and tighten
   the vertical rhythm so the form is not three times the video's height. */
.vh-form > .card{border:1px solid #d9d2c1 !important;background:#faf8f3 !important;box-shadow:0 10px 30px rgba(17,21,9,.08) !important;border-radius:10px !important;padding:22px !important}
.vh-form .form input,.vh-form .form select,.vh-form .form textarea{border:1.5px solid #b9ad91 !important;background:#fff !important;border-radius:7px !important}
.vh-form .form input:focus,.vh-form .form select:focus,.vh-form .form textarea:focus{border-color:#173620 !important;outline:2px solid #173620 !important;outline-offset:1px}
.vh-form #intake h2{font-size:1.55rem;line-height:1.1;margin:.15rem 0 .35rem}
.vh-form #intake .eyebrow{font-size:.68rem;letter-spacing:.06em}
.vh-form #intake > p:not(.eyebrow):not(.disclaim){margin:0 0 .7rem;font-size:.95rem}
.vh-form .form .field{margin-bottom:.5rem}
.vh-form .form input,.vh-form .form select{min-height:46px !important;padding:.6rem .8rem !important;font-size:1rem !important}
.vh-form .form textarea{min-height:84px !important;padding:.6rem .8rem !important;font-size:1rem !important}
.vh-form .form label{font-size:.92rem}
.vh-form .form .field small,.vh-form .form .field .hint{font-size:.8rem}
.vh-form .disclaim{font-size:.76rem;line-height:1.35;margin:.5rem 0 0}
.vh-form .btn{width:100%}

/* 28. Sound toggle on the hero video. Appears only after playback starts AND
   the audio-track file answers a HEAD request, so it is never a dead button.
   44px target, visible focus, real text label. */
.bb-sound{position:absolute;right:12px;bottom:12px;z-index:2;display:inline-flex;align-items:center;gap:.4rem;min-height:44px;padding:0 16px;border:0 !important;border-radius:999px;background:rgba(17,21,9,.74);color:#fff;font-family:inherit;font-size:.9rem;font-weight:700;line-height:44px;cursor:pointer;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
.bb-sound:hover{background:rgba(17,21,9,.92)}
.bb-sound:focus-visible{outline:3px solid #e9c46a !important;outline-offset:2px}
.bb-sound-i{font-size:1.05rem;line-height:1}

/* 29. Trademark mark on the header brand. */
.tm{font-size:.42em;vertical-align:super;line-height:0;margin-left:.06em;font-weight:600;letter-spacing:0}

/* 30. Hero stat card (home): FMCSA large-truck injury trend, WV 2023-2025.
   Bars grow from zero when the card enters view; the % counts up. Borders
   carry !important because .hero * strips them. */
.bb-stat{display:grid;grid-template-columns:1fr auto;gap:22px;align-items:center;margin:22px 0 0;padding:18px 20px;border:1px solid #d9d2c1 !important;border-radius:10px;background:#faf8f3}
.bb-stat .eyebrow{display:block !important;margin:0 0 .25rem;font-size:.68rem;letter-spacing:.07em}
.bb-stat h3{margin:0 0 .3rem;font-size:1.25rem;line-height:1.15}
.bb-stat-big{margin:0 0 .45rem;font-size:1.02rem;line-height:1.3}
.bb-stat-big .bb-count{display:inline-block;min-width:2.1ch;font-size:2.1rem;font-weight:800;color:#173620;line-height:1;font-variant-numeric:tabular-nums}
.bb-stat-src{margin:0;font-size:.72rem;line-height:1.35;opacity:.85}
.bb-bars{display:flex;align-items:end;gap:14px;margin:0;padding:0 4px}
.bb-bar{display:grid;grid-template-rows:auto 104px auto;align-items:end;justify-items:center;width:54px;font-variant-numeric:tabular-nums}
.bb-bar i{display:block;width:100%;height:var(--h);align-self:end;background:#c9bda1;border-radius:6px 6px 0 0;transform-origin:bottom;transform:scaleY(0);transition:transform .9s cubic-bezier(.2,.7,.2,1)}
.bb-bar.is-hi i{background:#173620}
.bb-bar:nth-child(2) i{transition-delay:.15s}.bb-bar:nth-child(3) i{transition-delay:.3s}
.bb-bar-v{font-size:.85rem;font-weight:700;margin-bottom:4px;opacity:0;transition:opacity .4s .8s}
.bb-bar-y{font-size:.72rem;margin-top:6px;opacity:.8}
.bb-stat.is-in .bb-bar i{transform:scaleY(1)}.bb-stat.is-in .bb-bar-v{opacity:1}
@media (prefers-reduced-motion:reduce){.bb-bar i{transform:none !important;transition:none}.bb-bar-v{opacity:1;transition:none}}
@media (max-width:899px){.bb-stat{grid-template-columns:1fr}.bb-bars{justify-content:center}}

/* 31. Proof row under the stat card: WVAJ logo + Instagram link. */
.bb-proof-row{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-top:18px;flex-wrap:wrap}
.wvaj-logo{display:inline-block;line-height:0}
.wvaj-logo img{display:block;width:240px;height:auto}
.bb-social{display:inline-flex;align-items:center;gap:10px;color:#173620;text-decoration:none;font-weight:700;line-height:1.15;padding:8px 14px;border-radius:8px;border:1px solid #d9d2c1 !important;background:#fff;min-height:44px;transition:background .2s,transform .2s}
.bb-social:hover{background:#faf8f3;transform:translateY(-1px)}
.bb-social:focus-visible{outline:2px solid #173620;outline-offset:2px}
.bb-social-i{flex:0 0 auto}
.bb-social-k{display:block;font-size:.7rem;letter-spacing:.06em;text-transform:uppercase;opacity:.8;font-weight:600}
.bb-social-h{display:block;font-size:.95rem}

/* 32. Scroll-reveal on the home page (cards, section headings, steps).
   Only when JS is present (html.bb-js) so no-JS visitors see everything at
   rest; honours reduced motion. */
html.bb-js .bb-reveal{opacity:0;transform:translateY(16px);transition:opacity .6s ease,transform .6s cubic-bezier(.2,.7,.2,1)}
html.bb-js .bb-reveal.is-in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){html.bb-js .bb-reveal{opacity:1 !important;transform:none !important;transition:none}}
body.home main .band:not(.hero) .grid > .card{transition:transform .25s ease,box-shadow .25s ease}
body.home main .band:not(.hero) .grid > .card:hover{transform:translateY(-3px);box-shadow:0 12px 26px rgba(17,21,9,.10)}

.bb-stat-big .bb-count{text-align:right}

/* 33. WVAJ: kicker restored above the logo, whole block is one link. */
.wvaj-logo{display:inline-flex !important;flex-direction:column;gap:6px;line-height:1.2 !important;text-decoration:none;color:inherit}
.wvaj-logo .wvaj-kicker{font-size:.7rem;letter-spacing:.07em;text-transform:uppercase;font-weight:600;opacity:.85}
.wvaj-logo:hover img{opacity:.85}.wvaj-logo:focus-visible{outline:2px solid #173620;outline-offset:3px;border-radius:4px}

/* 34. Rule 27 sized every input to 46px, including the consent checkbox.
   Checkboxes and radios back to a normal 1.15rem box. */
.vh-form .form input[type=checkbox],.vh-form .form input[type=radio]{min-height:0 !important;width:1.15rem !important;height:1.15rem !important;padding:0 !important;margin:.15rem .55rem 0 0;flex:0 0 auto;border-radius:3px !important}

/* 35. Hero CTA row: "Tell us what happened" and "Call (304) 362-9400" on one
   line at every width, both visible on desktop too (theme had hidden the
   tel button there). */
.vhero .vh-main .cluster{display:flex !important;flex-wrap:nowrap !important;gap:12px;align-items:stretch}
.vhero .vh-main .cluster .btn{flex:1 1 0;min-width:0;display:inline-flex !important;align-items:center;justify-content:center;text-align:center;white-space:nowrap}
.vhero .vh-main .cluster .btn-ghost{display:inline-flex !important}
@media (max-width:420px){.vhero .vh-main .cluster .btn{padding-left:.55rem;padding-right:.55rem;font-size:.92rem}}
@media (max-width:360px){.vhero .vh-main .cluster .btn{font-size:.85rem}}

/* 36. "A person answers, 24/7" dot: visible glow in and out. */
@keyframes bbGlow{0%,100%{box-shadow:0 0 0 0 rgba(61,156,77,.6);opacity:.7;transform:scale(.88)}50%{box-shadow:0 0 0 7px rgba(61,156,77,0);opacity:1;transform:scale(1.18)}}
@media (prefers-reduced-motion:no-preference){.livedot{animation:bbGlow 1.9s ease-in-out infinite !important}}

/* 37. Mobile: centre the "Hurt? You do not pay us to find out." block and the
   "Getting started is simple." block, buttons included. Desktop untouched. */
@media (max-width:899px){
  .promise-body,.ctaband > div:first-child{text-align:center}
  .promise-body .cluster,.ctaband .cluster{justify-content:center}
  .promise-list{display:inline-block;text-align:left;margin-left:auto;margin-right:auto}
  .promise .seal{margin-left:auto;margin-right:auto}
  .ctaband picture,.ctaband img{margin-left:auto;margin-right:auto}
}

/* 38. Instagram glyph (official mark, solid black per Instagram brand rules). */
.bb-social-i{width:26px;height:26px;display:block}

/* 39. New 6-field intake (2026-09-05). First/last on one row where there is
   room; consent text smaller because it is now a full TCPA paragraph. */
.bb-f2 .bb-2col{display:grid;grid-template-columns:1fr 1fr;gap:0 12px}
.bb-f2 .bb-2col .field{min-width:0}
@media (max-width:380px){.bb-f2 .bb-2col{grid-template-columns:1fr}}
.vh-form .bb-f2 .bb-2col{grid-template-columns:1fr 1fr}
.bb-f2 .consent{display:flex;align-items:flex-start;gap:.55rem;font-size:.8rem;line-height:1.4}
.bb-f2 .consent input{margin-top:.2rem}
.bb-f2 select{appearance:auto;-webkit-appearance:menulist}

/* ---------------------------------------------------------------
   OUR TEAM staff grid - 2026-10-08
   Theme gives cards after .card-feature "span 3" (two per row on the
   6-col grid), but a later theme rule for a lone odd last card
   (.grid > .card:last-child:nth-child(2n+1) { grid-column:auto }) matches
   the 3rd child and collapses it to one column. Restore the pair, and
   centre a genuinely lone last staff card.
   --------------------------------------------------------------- */
@media (min-width:1000px){
  main section.band .wrap .grid > .card.card-feature ~ .card{grid-column:span 3 !important}
  main section.band .wrap .grid > .card.card-feature ~ .card:last-child:nth-child(even){grid-column:2 / 5 !important}
}

/* MAIN NAV overflow - 2026-10-10: nav was justify-content:flex-end, which pushes an overflowing list off the LEFT edge where scrolling cannot reach it (first item clipped ~800px). margin-left:auto right-aligns when there is room and collapses to 0 on overflow. Became visible when Resources was added as a 6th item. */
header.site nav.mainnav{justify-content:flex-start}
header.site nav.mainnav>ul{margin-left:auto}
/* MAIN NAV tablet wrap - 2026-10-10: at 701-1100px six links plus the Car or Truck Accident button overflow; a scroll strip hides either the first link or the CTA. Wrap instead so everything stays visible. Phones (<=700) keep the scroll strip. */
@media (min-width:701px) and (max-width:1100px){header.site nav.mainnav{overflow:visible;flex-wrap:wrap;row-gap:.5rem} header.site nav.mainnav>ul{flex-wrap:wrap;row-gap:.25rem}}