/**
 * 2026 UI refresh — ported from the client's mockup.
 *
 * Source of truth is design-source/app/globals.css, which runs at :5173 under the local
 * Docker stack (see local-dev/README.md). That file is minified onto one line and written
 * against React components; this is the same design expressed against the markup the
 * WordPress templates actually emit, in the order the port happened.
 *
 * Loaded AFTER style.css, and style.css is never edited. Everything here wins on source
 * order at equal specificity, which is why so little of it needs !important. Deleting the
 * wp_enqueue_style call for this file in functions.php reverts the entire refresh.
 *
 * The 2015 theme is laid out at a fixed 919px with clamps at 919/767/480px. The mockup is
 * fluid to 1500px with breakpoints at 1100/700px. Those two systems cannot both be right,
 * so the legacy clamps are neutralised here rather than left to fight the new ones.
 */

/* ---------------------------------------------------------------- tokens --- */
/* The mockup's six custom properties, verbatim. Every colour below refers to these. */
:root {
	--navy:   #082752;
	--ink:    #0b2953;
	--orange: #b94723;
	--ivory:  #f7f5f1;
	--line:   #dfe3e7;
	--muted:  #526175;
}

/* ------------------------------------------------------------------ base --- */
/* The 2015 stylesheet predates border-box being the default anywhere. Applying it
   globally is safe only because every width below is authored against it. */
*,
*:before,
*:after {
	box-sizing: border-box;
}

/* style.css still sets content-box on search fields (old Safari). That rule beats the
   universal selector, so a 100%-wide mega-menu field plus its padding hangs out of the
   panel. Put search inputs back on border-box with matching specificity. */
input[type="search"] {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

html {
	scroll-behavior: smooth;
}

body {
	color: var(--ink);
	background: #fff;
	/* Arial is what the mockup actually resolves to: layout.tsx loads the Geist
	   webfonts but body falls through to this stack. No webfont is being added. */
	font-family: Arial, Helvetica, sans-serif;
}

a {
	color: var(--orange);
}

/* style.css:53 is a 2010-era reset that names every element individually and sets them
   all to Tahoma, so `font-family` is never actually inherited from body. h3 is then
   Trebuchet (:157), the slider button Droid Sans (:872), testimonials Open Sans, and so
   on — six families on one page. The same element list is restated here in the one
   family the mockup uses. This is the fix for the mixed typography, and it has to be a
   list rather than a body rule for exactly the reason the original is one. */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
input, select, textarea, button {
	font-family: Arial, Helvetica, sans-serif;
}

/* Buttons need the reset a second time with force: style.css:288 sets them
   `font-family: Tahoma !important` with no fallback stack. macOS ships Tahoma
   so desktops quietly rendered it and nobody saw; iOS ships no Tahoma at all
   and every real <button> and submit input — the cookie banner, the form
   footers, Subscribe — fell to the serif default (the client's iPhone
   screenshot). Same selector, same !important, later in the cascade. */
button,
html input[type="button"],
input[type="reset"],
input[type="submit"] {
	font-family: Arial, Helvetica, sans-serif !important;
}

/* Headings inherit the theme's assorted weights and transforms too. The padding matters
   more than it looks: style.css:157 gives EVERY h3 a 25px left padding, which is what
   pushed the category card labels and the footer column headings off centre — a centred
   block with 25px of padding on one side only is not centred. */
h1, h2, h3, h4, h5, h6 {
	padding: 0;
	color: var(--ink);
	font-weight: 700;
	line-height: 1.25;
}

/* --------------------------------------------------------------- layout --- */
/* .container is the theme's one layout primitive, used by header, footer and every
   template. Widening it here is what reflows the whole site. */
.container {
	width: min(1500px, calc(100% - 72px));
	max-width: none;
	margin: 0 auto;
}

/* The legacy clamps assume the 919px grid: 654px below 920px, 100% below 768px. Both
   would undo the rule above, and both are keyed to breakpoints the mockup does not
   have, so they are replaced rather than adjusted. */
@media (max-width: 1100px) {
	.container {
		width: min(1500px, calc(100% - 36px));
		max-width: none;
	}
}

@media (max-width: 919px) {
	.container {
		width: min(1500px, calc(100% - 36px));
		max-width: none;
		padding: 0;
	}
}

@media (max-width: 767px) {
	.container {
		width: calc(100% - 36px);
		max-width: none;
	}
}

/* The stray vertical rules down the page are content_border.gif, a 1px column graphic
   repeated on the y axis. The theme paints it in three places to fake column dividers
   on a 919px grid; at any other width it lands in the middle of the content, and the
   mockup has no dividers at all. `.template-page .container` is the one that produced
   two lines rather than one, because the hero and category sections carry .container
   as well and so inherited the same background. */
.container-inner,
.template-page .container,
.template-page .content-area,
.sidebar {
	background: none;
}

/* Homepage sections own their own width. The theme wraps every template in
   .wrapper.template-page > .container, which would trap the hero inside a 1500px box
   and stop its ivory band reaching the edge of the window — and, because the inner
   sections are also .container, inset them a second time. Unlocking the outer wrapper
   lets .hero run full bleed while .hero-grid and .insurance keep the real measure.

   Interior pages need the same for their page-hero band, but the unlock is deliberately
   keyed to named templates rather than to .page or .single. The condition for adding one
   to this list is that the template wraps its own content in an inner .container —
   template-clean, template-autologin and the rest do not, so unlocking the wrapper for
   them would drop their layout to full width with nothing holding it in.

   template-fullwidth qualifies since its 2026 rebuild, and needs to: it carries Get
   Certificate, Report a claim, Payment and every quote page, whose hero bands were
   inset from both edges while the header above them ran the full width of the window.

   page-quote-shell qualifies on the same logic with its own geometry: the shell's
   grid owns the full width by design (fixed navy sidebar, form area with its own
   max-width), so the wrapper's box was just white bars on either side of it. */
.page-template-page-quote-shell .wrapper.template-page > .container,
.home .wrapper.template-page > .container,
.insurance-catalog .wrapper.template-page > .container,
.page-template-default .wrapper.template-page > .container,
.page-template-template-fullwidth .wrapper.template-page > .container,
.single-post .wrapper.template-page > .container,
.category-news .wrapper.template-page > .container,
.category-careers .wrapper.template-page > .container,
.category-our-team .wrapper.template-page > .container,
.category-partners .wrapper.template-page > .container {
	width: 100%;
	max-width: none;
	margin: 0;
	padding: 0;
}

/* The lower rows are not inside a section of their own, so they take the measure back. */
.home .container-main {
	width: min(1500px, calc(100% - 72px));
	margin: 0 auto;
}

/* --------------------------------------------------------------- buttons --- */
/* Used by the header CTAs and the page-note call to action. Anchors and real buttons
   both, so the reset covers input styling too. */
.button {
	min-height: 43px;
	padding: 0 22px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 1px solid var(--ink);
	/* 8px, matching the quote shell's buttons — one radius across the site. */
	border-radius: 8px;
	font-weight: 700;
	font-size: 13px;
	line-height: 1;
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
}

.button.ghost {
	background: #fff;
	color: var(--ink);
}

.button.primary {
	background: var(--orange);
	border-color: var(--orange);
	color: #fff;
}

.button:hover,
.button:focus {
	text-decoration: none;
}

/* ---------------------------------------------------------------- header --- */
/* Utility bar. Replaces .header-top, which drew the main menu a second time. */
.utility {
	height: 36px;
	background: var(--navy);
	color: #fff;
	font-size: 14px;
}

.utility .container {
	height: 100%;
	display: flex;
	align-items: center;
	gap: 35px;
}

.utility-item {
	display: flex;
	align-items: center;
	gap: 8px;
	white-space: nowrap;
}

/* "Leave a Review" and the social profiles on the left of the bar, per client
   request — the space the removed "Multilingual Service" text left empty. Not
   .utility-item: the dot the other items draw is a separator between labeled
   entries, and this group has nothing before it. */
.utility-social {
	display: flex;
	align-items: center;
	gap: 16px;
}

.utility-review-link {
	font-weight: 600;
}

.utility-review-link:hover {
	color: var(--orange);
}

/* The Facebook / LinkedIn profile row, shared by the utility bar and the footer brand
   block — one component so the two cannot drift apart. Both grounds are navy, so the
   marks just inherit their bar's white and take the hover orange. */
.social-links {
	display: flex;
	align-items: center;
	gap: 16px;
}

.social-links a {
	display: flex;
	align-items: center;
	color: inherit;
}

.social-links a:hover {
	color: var(--orange);
}

.social-links-icon {
	width: 15px;
	height: 15px;
	display: block;
}

/* Email and phone sit together at the far end of the bar, as the phone alone did in
   the mockup — its .push class. Pushing the email is what carries the pair right. */
.utility-email {
	margin-left: auto;
}

/* No dot in front of the email. The dots read as separators between items, and the
   email is the first of the right-hand pair — a mark before it separates it from the
   gap, which is nothing. The phone keeps its dot, so the pair still reads
   "info@insurhaus.com • 630-786-9971". */
.utility-email:before {
	display: none;
}

/* With no dot of its own, the email's dot is the phone's — and it was sitting 35px from
   the email (the container's gap between the two items) but 8px from the number (the
   gap inside the item). That reads as a bullet belonging to the phone rather than as a
   separator between the pair, which is what it now is. Matching the outer gap centres
   it. The left-hand items keep the tight 8px, where the dot really does belong to its
   own label. */
.utility-phone {
	gap: 35px;
}

/* The dots and the handset in the mockup are literal characters in its markup. Drawn
   here instead so the PHP carries only the words — the marks are decoration and belong
   with the styling, not in the template where a translator would meet them. */
.utility-item:before {
	content: "";
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: currentColor;
	flex: none;
}

/* The phone used to carry a ☎ instead of the dot every other item gets. With the email
   beside it that mark became the separator between the two, which reads as an icon
   belonging to the email rather than as punctuation — so the phone takes the same dot,
   and the pair reads "info@insurhaus.com • 630-786-9971". Restore by putting this rule
   back. */

.utility a {
	color: inherit;
	text-decoration: none;
}

/* Header proper. The theme nests .header-middle-wrap inside .site-header; both are kept
   so nothing else that targets them breaks, and the flex row is put on .header-row. */
.site-header {
	background: #fff;
	border-bottom: 1px solid var(--line);
	position: relative;
	z-index: 5;
	height: auto;
	min-height: 90px;
	box-shadow: none;
}

.site-header:after {
	display: none;
}

.header-row {
	min-height: 90px;
	display: flex;
	align-items: center;
	gap: 35px;
	overflow: visible;
}

.header-middle-wrap {
	float: none;
	overflow: visible;
}

/* .logo is the theme's wrapper around the Customizer image (theme mod logo_header). The
   mockup's .brand sizing lives in brand-icons.css and is applied to that image here. */
.logo {
	float: none;
	width: auto;
	margin: 0;
	padding: 0;
	flex: none;
}

.logo a {
	display: block;
	text-decoration: none;
	color: var(--ink);
}

.logo img {
	display: block;
	width: 284px;
	max-width: 100%;
	height: auto;
}

/* Navigation. The menu is WordPress's, unchanged — thirteen items across six top-level
   entries with dropdowns. Only its presentation is the mockup's.

   Stretch the nav to the header's full height so dropdowns (and the Insurance mega)
   hang from the bottom edge of the bar. Without that, `top: 100%` is the bottom of
   the short "Insurance" link — mid-header — and the mega's search field sits in the
   bar while the columns fall onto the page and look like a separate panel. */
.primary-nav {
	display: flex;
	align-items: stretch;
	align-self: stretch;
	gap: 34px;
	margin-left: auto;
}

.primary-nav .main-navigation {
	float: none;
	width: auto;
	height: 100%;
	margin: 0;
	padding: 0;
	background: none;
	border: 0;
}

.primary-nav ul.menu {
	display: flex;
	align-items: stretch;
	height: 100%;
	gap: 34px;
	margin: 0;
	padding: 0;
	list-style: none;
	background: none;
	float: none;
	flex-wrap: nowrap;
}

.primary-nav ul.menu > li {
	float: none;
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	position: relative;
	display: flex;
	align-items: center;
	flex: 0 0 auto;
}

.primary-nav ul.menu > li > a {
	display: flex;
	align-items: center;
	align-self: stretch;
	padding: 0;
	color: var(--ink);
	font-size: 14px;
	line-height: 1.2;
	text-decoration: none;
	text-transform: none;
	white-space: nowrap;
	background: none;
	border: 0;
}

.primary-nav ul.menu > li > a:hover,
.primary-nav ul.menu > li.current-menu-item > a,
.primary-nav ul.menu > li.current_page_item > a {
	color: var(--orange);
	background: none;
}

/* Dropdowns keep the theme's hover behaviour; only the panel is restyled. */
.primary-nav ul.sub-menu {
	position: absolute;
	top: 100%;
	left: 0;
	min-width: 200px;
	display: none;
	flex-direction: column;
	gap: 0;
	margin: 0;
	padding: 8px 0;
	list-style: none;
	background: #fff;
	border: 1px solid var(--line);
	border-radius: 3px;
	box-shadow: 0 8px 24px rgba(8, 39, 82, .10);
	z-index: 20;
}

.primary-nav ul.menu > li:hover > ul.sub-menu {
	display: flex;
}

/* The top-level ul gets list-style:none above, but the nested one inherits the browser
   default — and since the panel is positioned, the markers land outside it, over the
   page content to its left. */
.primary-nav ul.sub-menu li {
	float: none;
	width: auto;
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	list-style: none;
}

.primary-nav ul.sub-menu a {
	display: block;
	padding: 8px 18px;
	color: var(--ink);
	font-size: 14px;
	text-decoration: none;
	white-space: nowrap;
	background: none;
}

.primary-nav ul.sub-menu a:hover {
	color: var(--orange);
	background: var(--ivory);
}

/* qTranslate's text switcher, flattened into a single inline control. */
.lang-switch ul.language-chooser {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0;
	padding: 0;
	list-style: none;
	border: 0;
}

.lang-switch ul.language-chooser li {
	float: none;
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	list-style: none;
}

.lang-switch ul.language-chooser a {
	color: var(--ink);
	font-size: 14px;
	text-transform: uppercase;
	text-decoration: none;
}

/* The mockup's control is the two-letter code; qTranslate only ever prints the full
   language name ("English"), because its 'short' type differs from 'text' by CSS class
   and nothing else. The code is already on the anchor as hreflang, so it is read from
   there rather than patched into the plugin. */
.lang-switch ul.language-chooser a span {
	display: none;
}

.lang-switch ul.language-chooser a:after {
	content: attr(hreflang);
}

.lang-switch ul.language-chooser li.active a {
	font-weight: 700;
}

/* Calls to action. */
/* The drawer's button block is markup that only makes sense once the drawer exists.
   Above 1100px the navigation is a row and these same buttons are in .actions, so this
   copy stays out of the way. */
.drawer-actions {
	display: none;
}

.actions {
	display: flex;
	gap: 12px;
	flex: none;
}

/* ------------------------------------------------------------------ hero --- */
/* Copy on the left over ivory, the existing responsiveslides carousel on the right.
   The theme's .top-row-box / .hp-slider-wrap float wrappers are gone from index.php;
   what remains inside .hero-image is the plugin's own markup. */
.hero {
	background: var(--ivory);
}

/* 46/54, not the original 42/58: with .hero-copy h1 now white-space: nowrap (see
   below), "ALL UNDER ONE ROOF" needed a few more pixels of column width at several
   sizes than 42% gave it, even with the clamp already shrinking the font. Narrowing
   the slideshow column by the same amount removes that overflow without touching the
   font sizing again. */
.hero-grid {
	display: grid;
	grid-template-columns: 46% 54%;
	min-height: 340px;
	align-items: stretch;
}

/* 40px, down from 65px top and bottom, per client request — with the Client
   Resources buttons in the column the band ran taller than it needed to. */
.hero-copy {
	padding: 40px 28px 40px 0;
	align-self: center;
}

/* Regular, not bold. The blanket h1-h6 weight above is there to stop the theme's
   assorted heading weights fighting each other, but at 56px it makes the hero far
   heavier than the mockup — which leaves its h1 at the browser default and reads much
   lighter. Arial has no true light face, so 400 is as light as this gets without
   introducing a webfont, which the port deliberately avoids. */
/* The size scales with the window rather than sitting at 56px until the 1100px
   breakpoint catches it. The clamp was originally sized for "YOUR BUSINESS", the
   shorter of the three lines — "ALL UNDER ONE ROOF" is the longest and still wrapped
   into a fourth line across a wide middle range of desktop widths (roughly 1150–1450px,
   and again above ~1650px once the container hits its 1500px cap) even though the
   <br /> tags say where the only breaks should be. white-space: nowrap is the actual
   fix — the column widths involved don't reduce to one clean formula, so rather than
   chase the clamp across every width, each line is simply never allowed to wrap on its
   own. The three still stack at the <br /> tags exactly as before. */
.hero-copy h1 {
	margin: 0 0 26px;
	font-size: clamp(36px, 3.4vw, 56px);
	font-weight: 400;
	line-height: 1.08;
	color: var(--ink);
	text-transform: none;
	white-space: nowrap;
}

/* Client Resources as a 3x2 grid of buttons under the subtitle, per client request —
   replacing both the tile section that sat below the category grid and the small
   "Client Resources →" link that used to share the subtitle's line. Styled after the
   site's own .button.ghost (the header's REPORT CLAIM / GET CERTIFICATE) rather than
   as quiet tiles, per a follow-up: "make them like actual buttons ... more obvious
   they can be pressed" — same border, radius and weight, equal-width tracks, and a
   navy fill on hover so pressing is unmistakable. */
.hero-resources-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 12px;
	max-width: 600px;
	/* padding, not margin: the clearance below eats a cleared box's margin-top, so a
	   margin here never opened the gap the client asked for above the buttons. */
	padding-top: 34px;
	/* clear is load-bearing: .welcome-text floats (style.css), and a grid container
	   is a BFC, which shrinks to fit BESIDE a float rather than overlapping it — the
	   six buttons were squeezing into the ~130px left over on the subtitle's line. */
	clear: both;
}

/* The real navbar button component — the anchors carry .button.ghost in index.php, so
   the header's REPORT CLAIM / GET CERTIFICATE styling is inherited outright rather
   than imitated. This rule only adds what the grid needs: uppercase per client
   request (the navbar buttons are typed in caps; these labels come from Customizer
   slots), a tighter pad so REQUEST A CHANGE fits its track, and the navy hover fill
   kept from the previous pass so pressing stays unmistakable. */
.hero-resource-btn {
	padding: 0 10px;
	text-transform: uppercase;
	letter-spacing: .02em;
	white-space: nowrap;
	transition: background .15s ease, color .15s ease;
}

.hero-resource-btn:hover {
	background: var(--navy);
	border-color: var(--navy);
	color: #fff;
}

/* .welcome-text is the cw_welcome_text Customizer field. The 2015 styling made it a
   centred bold italic banner; here it is the hero's supporting line. Sized down from
   18px per client request — at 18px it competed with the h1 instead of reading as a
   subtitle under it. */
.hero-copy .welcome-text,
.hero-copy .welcome-text p {
	width: auto;
	margin: 0;
	padding: 0;
	font-size: 15px;
	line-height: 1.55;
	font-style: normal;
	font-weight: 400;
	text-align: left;
	color: var(--ink);
}

.hero-image {
	position: relative;
	overflow: hidden;
	min-height: 340px;
}

/* responsiveslides absolutely positions every slide but the first, so the container
   takes its height from that first slide. Stretching the images to fill the band keeps
   the hero a fixed shape whatever the slide dimensions are. */
.hero-image .callbacks_container,
.hero-image .rslides {
	position: absolute;
	inset: 0;
	height: 100%;
	margin: 0;
}

/* Height only — never display, which is what responsiveslides toggles to switch
   slides. Forcing it here would show every slide stacked at once. */
.hero-image .rslides li {
	height: 100%;
}

.hero-image .rslides li > a {
	display: block;
	height: 100%;
}

.hero-image .rslides img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	float: none;
}

/* The hero film fills the same band the carousel did — cover, so a 16:9 file still
   fills a shorter, wider box without letterboxing.
 *
 * object-position is doing real work here. The band is wider than 16:9 on a desktop and
 * narrower on a phone, so cover trims the film's top and bottom in one case and its
 * sides in the other — and the Insurhaus logo is burnt into the top right corner of the
 * frame, exactly what both crops take first. Anchoring to top right means the logo is
 * the one thing that is never cut; the pavement at the bottom goes instead. */
.hero-image .hero-video {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: right top;
	background: var(--ivory);
}

/* The slide captions are hidden, not deleted: the hero now carries its message in the
   copy panel to the left, and the mockup's hero image is imagery only. Every link a
   caption carried is also a card in the category grid immediately below.
   .hero-slideshow-caption below is unrelated to this — it is the 2026 slideshow's own
   caption, kept as a separate class for exactly that reason. */
.hero-image .caption {
	display: none;
}

/* The 2026 photo slideshow, in place of the hero film. Slides are stacked and
   absolutely positioned like the old rslides markup; only .is-active is visible, and
   custom.js swaps the class on a timer. object-fit/position match the film's rule so
   swapping media types never changes the band's shape. */
.hero-image .hero-slideshow {
	position: absolute;
	inset: 0;
}

.hero-image .hero-slideshow-slide {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	opacity: 0;
	transition: opacity 1.2s ease;
}

.hero-image .hero-slideshow-slide.is-active {
	opacity: 1;
}

/* One caption for the whole slideshow, not per slide — see insurhaus_hero_slideshow()
   for why this gets its own class instead of the Customizer's .caption above.
   Bottom-anchored so it never runs into .hero-copy's h1 on the same row, and the
   gradient scrim keeps it legible over whichever slide is showing. */
.hero-image .hero-slideshow-caption {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	padding: 20px 28px 18px;
	background: linear-gradient(to top, rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0));
}

.hero-image .hero-slideshow-caption p {
	margin: 0;
	color: #fff;
	font-size: 15px;
	font-weight: 700;
	letter-spacing: 0.02em;
	text-transform: uppercase;
}

.hero-image .hero-slideshow-caption p span {
	font-weight: 400;
	text-transform: none;
}

/* The category pages' quote button, in the hero under the title. It used to sit at the
   top of the content beside a repeat of the page's icon — a lone button on a white band
   above the first paragraph, attached to nothing. In the hero it reads as the action for
   the page it names. */
.page-hero .hero-cta {
	margin: 22px 0 4px;
}

@media (max-width: 700px) {

	.page-hero .hero-cta {
		margin: 18px 0 2px;
		width: 100%;
	}
}

/* ------------------------------------------------------------ categories --- */
.insurance {
	padding: 40px 0 18px;
}

.insurance h2 {
	margin: 0 0 14px;
	font-size: 21px;
	color: var(--ink);
	text-transform: none;
}

/* Fixed at 4 across, per client request: auto-fill let the column count follow
   whatever fit the container at a given width, which put 8 categories at 7-and-a-
   spare or some other uneven split depending on viewport instead of the clean two
   rows of four the client wanted. Now it's always 4x4 down to the 1400px breakpoint,
   which already pinned 4 for the same reason on narrower screens. */
.category-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 12px;
}

.category-card {
	min-height: 145px;
	padding: 18px 12px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	text-align: center;
	border: 1px solid var(--line);
	border-radius: 7px;
	color: var(--ink);
	text-decoration: none;
	background: #fff;
}

.category-card:hover {
	border-color: var(--orange);
}

/* The grid itself is already 4 across at every width down to here — see the base
   rule. Only the card padding needs to ease off before the later breakpoints take
   the column count itself to three, then two. */
@media (max-width: 1400px) {

	.category-card {
		padding: 20px;
	}

	.category-card h3 {
		font-size: 17px;
	}
}

.category-card h3 {
	margin: 10px 0 0;
	font-size: 15px;
	font-weight: 400;
	color: inherit;
	text-transform: none;
}

/* --------------------------------------------------------- discount note --- */
/* The discounts sentence on a category page, lifted out of the run of body copy —
   per client, "can we have the discounts more accented". Tinted box, orange edge,
   tag icon; the words are the client's own, unchanged. Built by
   insurhaus_insurance_discount_callout(). */
.discount-note {
	display: flex;
	align-items: flex-start;
	gap: 14px;
	margin: 26px 0;
	padding: 18px 22px;
	background: var(--ivory);
	border: 1px solid var(--line);
	border-left: 4px solid var(--orange);
	border-radius: 8px;
}

.discount-note .discount-note-icon {
	width: 22px;
	height: 22px;
	flex: none;
	margin-top: 1px;
	color: var(--orange);
}

/* Beats `.prose .entry-content > p` and the 2015 `article .entry-content p` on both
   size and colour — the line should read a step stronger than the copy around it,
   not inherit 13px grey. */
.discount-note p,
.prose .discount-note p,
article .entry-content .discount-note p {
	margin: 0;
	font-size: 15px;
	line-height: 1.6;
	color: var(--ink);
}

/* Two paragraphs in the box — the discounts line and the closing note under it. */
.discount-note p + p,
.prose .discount-note p + p,
article .entry-content .discount-note p + p {
	margin-top: 10px;
}

/* ------------------------------------------------ quote band and resources --- */
.page-note {
	margin-top: 25px;
	padding: 28px 36px;
	background: var(--navy);
	color: #fff;
	border-radius: 7px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
}

.page-note h2,
.page-note p {
	margin: 0 0 6px;
	color: #fff;
}

/* Where the band sits inside page content rather than being printed by a template —
   the About page writes it into post_content — style.css:1690's
   `article .entry-content p` (0,1,2) out-ranks `.page-note p` (0,1,1) and painted the
   line #363636 on navy, which is all but unreadable. The heading escaped only because
   that selector list covers span/div/li/p and not h2. */
.entry-content .page-note h2,
.entry-content .page-note p {
	color: #fff;
}

.page-note h2 {
	font-size: 20px;
}

.page-note p {
	font-size: 14px;
}

/* Scoped to .insurance because the section heading rule above is `.insurance h2`, which
   out-specifies a bare class and was collapsing the gap under the quote band to nothing. */
.insurance .resource-heading {
	margin: 44px 0 14px;
	font-size: 21px;
	color: var(--ink);
}

.resource-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
	padding: 0 0 40px;
}

/* Written as a self-contained component: child combinators so the card keeps its own
   type and spacing wherever it is used. Without them the same grid inside .prose picked
   up that section's h3 rule — 21px with a 22px top margin — and the contact page's
   cards came out taller and larger than the identical ones on the homepage. */
.resource-grid > a {
	padding: 20px 25px;
	display: flex;
	align-items: center;
	gap: 20px;
	border: 1px solid var(--line);
	border-left: 4px solid var(--orange);
	color: var(--ink);
	text-decoration: none;
	background: #fff;
}

.resource-grid > a:hover {
	background: var(--ivory);
}

.resource-grid > a > h3 {
	margin: 0;
	padding: 0;
	font-size: 16px;
	font-weight: 700;
	line-height: 1.3;
	color: inherit;
	text-transform: none;
}

.resource-grid > a > b {
	margin-left: auto;
	color: var(--orange);
	font-weight: 400;
}

/* -------------------------------------------------------- interior pages --- */
/* The page canvas is white. Ivory is reserved for the bands that are meant to be
   ivory — the hero, the trust panels, the newsletter — so the content between them
   has to be painted explicitly rather than left to inherit whatever the 2015
   stylesheet put behind it (body carried a tiled #c6c4c1 wrapper_site.jpg). */
.wrapper.template-page,
.wrapper.template-page > .container,
.container-inner,
.content-area,
.site-content {
	background: #fff;
}

/* The ivory band that carries the page title, matching the homepage hero. No border of
   its own: the edge under it was the newsletter band's border-top showing through on
   short pages, and the mockup has no rule there. */
.page-hero {
	background: var(--ivory);
	border: 0;
}

/* The vertical rhythm used to live on .page-hero itself. It moved onto the copy column
 * so a hero photo (.page-hero-grid below) can bleed to the band's top and bottom edges
 * the way the homepage hero's video does, instead of sitting inset inside the section's
 * own padding. Every plain page-hero — the great majority, with no photo — looks
 * identical to before: .page-hero-copy wraps the title unconditionally now (see
 * page.php), so this is the same 65px, just one element lower.
 */
.page-hero-copy {
	padding: 65px 0;
}

.page-hero h1 {
	margin: 0;
	font-size: 56px;
	font-weight: 400;
	line-height: 1.08;
	color: var(--ink);
	text-transform: none;
}

.page-hero p {
	margin: 16px 0 0;
	max-width: 800px;
	font-size: 20px;
	line-height: 1.5;
}

/* The quote hub's hero goes navy, per client and the prototype: orange shield
   eyebrow, light title, grey subtitle, and the three reassurance chips. */
.page-hero.quote-hub-hero {
	background: var(--navy);
}

.quote-hub-hero .hero-eyebrow {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0 0 18px;
	color: var(--orange);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .12em;
}

.quote-hub-hero .hero-eyebrow .refresh-icon {
	width: 16px;
	height: 16px;
	/* Explicit, not inherited — a global .refresh-icon rule paints icons ink. */
	color: var(--orange);
}

.quote-hub-hero h1 {
	color: #f2f5f9;
	font-weight: 700;
	max-width: 640px;
}

/* :not() keeps this off the eyebrow, which is also a direct-child p and would
   otherwise lose its orange to this heavier selector. */
.quote-hub-hero .page-hero-copy > p:not(.hero-eyebrow) {
	color: #b9c4d4;
	font-size: 17px;
	max-width: 620px;
}

.quote-hub-hero .hero-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 10px 32px;
	margin: 28px 0 0;
	padding: 0;
	list-style: none;
}

.quote-hub-hero .hero-chips li {
	display: flex;
	align-items: center;
	gap: 9px;
	color: #d6dde8;
	font-size: 14px;
}

.quote-hub-hero .hero-chips .refresh-icon {
	width: 17px;
	height: 17px;
	color: var(--orange);
}

/* Pages with a featured image — see page.php. Copy and photo side by side inside the
 * same ivory band, styled after the homepage hero's video: the photo fills its column
 * flush — no margin, no card treatment, no border-radius or shadow setting it apart
 * from the page, touching the band's top and bottom edges exactly the way .hero-image
 * does on the homepage. Still contained within .container rather than full-bleed,
 * though — this element carries that class too, so it keeps the same measure as the
 * contact cards and the body copy below it, and a 919px-era wrapper unlock is not worth
 * adding just for this.
 */
/* grid-template-rows, not a container min-height: the row's floor has to be set at the
 * track itself. .page-hero-media's only child is position: absolute, which contributes
 * nothing to an auto row's content size, and combined with its own overflow: hidden that
 * left the row sizing to .page-hero-copy alone — shorter than the photo, so the photo's
 * box stopped short of the row and the ivory band showed through underneath it as a gap.
 * minmax() fixes the track's minimum directly, independent of either item's content. */
.page-hero-grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	grid-template-rows: minmax(340px, auto);
	align-items: stretch;
	gap: 52px;
}

/* style.css:114 gives every .container a clearfix — content: '' with no display, so it
 * defaults to inline and is invisible in the float-based layout it was written for. This
 * element carries .container too, and once display: grid applies, that generated box
 * stops being invisible: a grid container blockifies every child into a grid item, and
 * an unplaced one starts a row of its own — a phantom second row below the real content,
 * sized by whatever line-height it inherits. content: none removes the box outright,
 * which is safe here because grid layout was never relying on a float clear to begin
 * with; .container's own rule is untouched, so nothing else on the site is affected. */
.page-hero-grid:after {
	content: none;
}

/* The bare .page-hero h1 above is a fixed 56px, sized for a title with the full
 * container to itself. Halved by the grid, a longer title — Commercial Property &
 * Real Estate Insurance — would wrap onto three or four lines at that size, so this
 * column gets the homepage hero's fluid clamp() instead. */
.page-hero-grid .page-hero-copy h1 {
	font-size: clamp(32px, 3.6vw, 56px);
}

.page-hero-media {
	position: relative;
	overflow: hidden;
}

.page-hero-media img {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	float: none;
}

@media (max-width: 1100px) {

	/* Copy above the photo, matching how the homepage hero stacks at this width. Two
	   explicit rows now rather than one shared by both columns — auto for the copy,
	   minmax(260px, auto) for the photo, for the same reason as the desktop track. */
	.page-hero-grid {
		grid-template-columns: 1fr;
		grid-template-rows: auto minmax(260px, auto);
		gap: 32px;
	}

	.page-hero-copy {
		padding: 45px 0 40px;
	}

	/* Full-bleed once the photo is its own row rather than sharing one with the copy —
	   the same treatment .hero-image gets on the homepage. left: 50% and right: 50%
	   move both edges to .container's own horizontal centre (percentages here resolve
	   against .page-hero-media's grid area, and .container is centred with margin: 0
	   auto at every breakpoint); the negative vw margins pull them back out to the
	   viewport edges. All four properties resolve at layout time — no transform, which
	   would apply the offset at paint time instead and is one more place for a mobile
	   browser to disagree with the numbers above. Independent of .container's side
	   gutter, so it holds however that gutter's width changes across breakpoints. */
	.page-hero-media {
		position: relative;
		left: 50%;
		right: 50%;
		width: 100vw;
		margin-left: -50vw;
		margin-right: -50vw;
	}
}

/* No width of its own: the element carries the .container class as well, so the page
   hero, the contact cards and the body copy all resolve to one measure and cannot drift
   apart. The reading measure is applied to the text inside instead — centring the whole
   block would indent the copy several hundred pixels from the title. Tables and wider
   content are deliberately left uncapped. */
.prose {
	padding: 50px 0;
	float: none;
}

.prose .entry-content > p,
.prose .entry-content > ul,
.prose .entry-content > ol,
.prose .entry-content > h1,
.prose .entry-content > h2,
.prose .entry-content > h3,
.prose .entry-content > h4,
.prose .entry-content > h5,
.prose .entry-content > h6,
.prose .entry-content > blockquote {
	max-width: 900px;
}

.prose h2 {
	margin: 25px 0 10px;
	font-size: 28px;
	font-weight: 400;
}

.prose h3 {
	margin: 22px 0 8px;
	font-size: 21px;
	font-weight: 400;
}

.prose p,
.prose li {
	font-size: 17px;
	line-height: 1.7;
}

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

.prose table {
	width: 100%;
	max-width: 100%;
}

/* Nothing to unfloat here any more: page.php and single.php no longer emit the
   #primary.content-area wrapper the inline 71% rule targets. The category-* templates
   still have their sidebar and are deliberately left on it. */

/* ------------------------------------------------------------- about us --- */
/* page-welcome-to-insurhaus-inc.php only. The page runs to roughly 30 headings,
   paragraphs and lists in a row with nothing to break it up — per client request, a
   two-column layout with a sticky Client Resources sidebar, plus two of the content's
   own sections (What You Can Expect, Insurance Solutions) reworked from a flat h3/p/ul
   stack into grids. Below 1100px the columns stack and the sidebar drops out of the
   sticky flow — a short sticky card fighting the page's own scroll on a phone-width
   column is worse than just letting it sit inline. */
.about-layout {
	display: grid;
	grid-template-columns: 1fr 300px;
	gap: 48px;
	align-items: start;
	padding: 50px 0;
}

.about-main {
	grid-column: 1;
	grid-row: 1;
	padding: 0;
	min-width: 0;
}

.about-sidebar {
	grid-column: 2;
	grid-row: 1;
	position: sticky;
	top: 24px;
}

.about-sidebar-card {
	padding: 24px;
	background: var(--ivory);
	border-radius: 7px;
}

.about-sidebar-card h2 {
	margin: 0 0 14px;
	font-size: 18px;
	font-weight: 700;
	color: var(--ink);
	text-transform: none;
}

.about-sidebar-links {
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.about-sidebar-links li {
	border-bottom: 1px solid var(--line);
	padding-bottom: 12px;
}

.about-sidebar-links li:last-child {
	border-bottom: 0;
	padding-bottom: 0;
}

.about-sidebar-links a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	color: var(--ink);
	font-size: 14px;
	font-weight: 600;
	line-height: 1.4;
	text-decoration: none;
}

.about-sidebar-links a b {
	color: var(--orange);
	font-weight: 700;
	flex: none;
}

.about-sidebar-links a:hover {
	color: var(--orange);
}

/* The intro paragraphs as a panel — the homepage's short-lived "Welcome to Insurhaus"
   band, moved onto this page per client request (see the welcome wrap in
   insurhaus_refresh_about_content()). It wore the navy .page-note at first; three
   paragraphs of white-on-navy under the hero read as a giant callout ("this feels
   off"), and navy bands everywhere else are one heading and a line beside a button.
   Ivory with the orange left edge instead — the quiet-panel treatment the sidebar
   card and the resource-grid tiles already use, so the two panels opening this page
   read as a matched pair. The first paragraph gets the same lead treatment as
   .career-lead, since it is the page's opening line. */
.about-main .about-welcome {
	margin: 0 0 16px;
	padding: 26px 30px;
	background: var(--ivory);
	border-left: 4px solid var(--orange);
	border-radius: 0 7px 7px 0;
}

.about-main .about-welcome p {
	margin: 0 0 14px;
	font-size: 15px;
	line-height: 1.65;
	color: var(--ink);
}

.about-main .about-welcome p:first-child {
	font-size: 19px;
	line-height: 1.5;
}

.about-main .about-welcome p:last-child {
	margin: 0;
}

/* "What You Can Expect" — five short items, a card grid instead of a stack of h3/p
   pairs with no visual separation between one and the next. */
/* Fixed at 3 across, not auto-fit: 5 items over auto-fit's ~4-per-row at this column's
   width left one card stranded alone on its own row — the same uneven-wrap complaint
   as the homepage category grid. 3 across makes an even a 3-then-2 split instead. */
.about-expect-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
	margin: 16px 0 34px;
}

.about-expect-item {
	width: 100%;
	min-width: 0;
	padding: 22px;
	border: 1px solid var(--line);
	border-radius: 7px;
	background: #fff;
	box-sizing: border-box;
}

.about-expect-item h3 {
	margin: 0 0 8px;
	font-size: 17px;
}

.about-expect-item p {
	margin: 0;
	font-size: 14px;
	line-height: 1.6;
	color: var(--muted);
}

/* "Insurance Solutions" — three long lists (7, 13 and 15 items), side by side instead
   of one under another for what was several screens of bare bullet points. */
.about-solutions-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 28px;
	margin: 16px 0 34px;
}

/* Explicit width/min-width, same as .about-expect-item and .about-main/.about-sidebar
   above: without it these grid items were rendering at their own content width
   instead of stretching to fill the column, the same unexplained quirk as the outer
   .about-layout had — see that rule's comment. */
.about-solutions-col {
	width: 100%;
	min-width: 0;
	box-sizing: border-box;
}

.about-solutions-col h3 {
	margin: 0 0 10px;
	font-size: 17px;
	color: var(--orange);
}

.about-solutions-col ul {
	margin: 0;
	padding-left: 18px;
}

.about-solutions-col li {
	font-size: 14px;
	line-height: 1.6;
}

@media (max-width: 1100px) {

	.about-layout {
		grid-template-columns: 1fr;
		gap: 30px;
	}

	.about-main,
	.about-sidebar {
		grid-column: 1;
	}

	.about-sidebar {
		grid-row: 2;
		position: static;
	}

	.about-expect-grid {
		grid-template-columns: 1fr;
	}

	.about-solutions-grid {
		grid-template-columns: 1fr;
		gap: 24px;
	}
}

/* ------------------------------------------------------------ quick links --- */
.quick-links {
	margin: 10px 0 0;
}

.quick-links h2 {
	margin: 0 0 18px;
	font-size: 28px;
	font-weight: 400;
	color: var(--ink);
}

/* The cards are the same .resource-grid component as the homepage, unchanged — only the
   grid's own outer spacing differs, since this one sits inside body copy. */
.quick-links .resource-grid {
	padding: 0;
	gap: 16px;
}

/* The certificates note, previously a blockquote of italics. */
.content-note {
	max-width: 900px;
	margin: 28px 0 0;
	padding: 18px 22px;
	background: var(--ivory);
	border-left: 3px solid var(--line);
}

.content-note p {
	margin: 0;
	font-size: 14px;
	line-height: 1.6;
	color: var(--muted);
	font-style: normal;
}

.content-note em {
	font-style: normal;
}

.content-note p:empty {
	display: none;
}

/* ----------------------------------------------------------- office hours --- */
/* Rebuilt from the contact page's paragraph-and-<br /> markup by
   insurhaus_refresh_contact_content(). Regular hours as rows, closures as cards. */
.office-hours {
	margin: 10px 0 0;
}

.office-hours h2 {
	margin: 0 0 18px;
	font-size: 28px;
	font-weight: 400;
	color: var(--ink);
}

.office-hours h3 {
	margin: 36px 0 14px;
	font-size: 17px;
	font-weight: 700;
	color: var(--ink);
	text-transform: uppercase;
	letter-spacing: .04em;
}

.hours-regular {
	max-width: 520px;
	border: 1px solid var(--line);
	border-radius: 7px;
	overflow: hidden;
}

.hours-row {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 20px;
	padding: 14px 20px;
	border-bottom: 1px solid var(--line);
}

.hours-row:last-child {
	border-bottom: 0;
}

.hours-days {
	font-size: 15px;
	color: var(--ink);
}

.hours-time {
	font-size: 15px;
	font-weight: 700;
	color: var(--ink);
	white-space: nowrap;
}

.holiday-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 12px;
}

.holiday-card {
	padding: 18px 20px;
	background: var(--ivory);
	border: 1px solid var(--line);
	border-radius: 7px;
	border-left: 3px solid var(--orange);
}

.holiday-card h4 {
	margin: 0 0 8px;
	padding: 0;
	font-size: 15px;
	font-weight: 700;
	color: var(--ink);
}

.holiday-card ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.holiday-card li {
	margin: 0 0 4px;
	padding: 0;
	font-size: 13px;
	line-height: 1.45;
	color: var(--muted);
	list-style: none;
}

@media (max-width: 1100px) {
	.holiday-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 700px) {
	.holiday-grid {
		grid-template-columns: 1fr;
	}
}

/* Call / Email / Visit, under the hero on the contact page. */
/* Four cards since Fax moved out of Call, dividing the container exactly. An auto-fit
   minmax() track stood here first and left a gap on the right: the floor in the minmax
   decides how many tracks fit, and four cards in a row sized to that floor rather than
   to the space available. Explicit counts, stepped down by hand, always fill the row. */
.contact-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 18px;
	padding: 50px 0 0;
}

.contact-grid article {
	padding: 30px;
	border: 1px solid var(--line);
}

/* Call / Email / Visit are labels, not content — at 17px navy they were identical to
   the number and address under them, so each card read as four flat lines. The small
   orange caption is the same treatment LEARN MORE and GET A QUOTE use, so the hierarchy
   is one the rest of the page already establishes rather than a new style. */
.contact-grid h2 {
	margin: 0 0 10px;
	/* 14px, not the 12px caption size the rest of the site uses for this treatment:
	   per client these labels read too small on the contact page, where they are the
	   only thing naming what each card holds. */
	font-size: 14px;
	font-weight: 700;
	line-height: 1.3;
	color: var(--orange);
	text-transform: uppercase;
	letter-spacing: .03em;
}

.contact-grid p {
	margin: 0;
	font-size: 17px;
	line-height: 1.55;
	color: var(--ink);
}

.contact-grid a {
	color: var(--ink);
	text-decoration: none;
}

.contact-grid a:hover {
	color: var(--orange);
}

/* The contact page's lead sentence runs 903px at the 13px the 2015 stylesheet gives
   .entry-content, three pixels over the 900px measure — so "help." dropped onto a line
   of its own. The measure is loosened for that one paragraph, on that one page (:has,
   because the cards are a sibling of the prose, not an ancestor); anything narrower
   than the sentence still wraps normally. */
body:has(.contact-grid) .prose .entry-content > p:first-child {
	max-width: 980px;
}

/* Two-up before one-up: at four columns the Office card's "1550 Spring Rd Ste 308" is
   the line that breaks first. */
@media (max-width: 1100px) {
	.contact-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 700px) {
	.contact-grid {
		grid-template-columns: 1fr;
	}
}

/* ----------------------------------------------- footer newsletter (GF 24) --- */
/* A column in the footer grid, so the fields stack in the column width and the heading
   matches the other columns' headings. The form is Gravity Forms legacy markup —
   ul.gform_fields of li.gfield — so the list needs its own reset. Hidden fields (GF's
   honeypot) keep their own display:none and take up no space. */
.footer-newsletter .newsletter-box {
	padding: 0;
	background: none;
	border: 0;
}

.footer-newsletter .widget-title {
	margin: 0 0 9px;
	padding: 0;
	font-size: 14px;
	font-weight: 700;
	color: #fff;
	background: none;
}

/* style.css:1674 puts font-size:28px on the span inside the title, not on the heading,
   so sizing the h2 alone left this at 28px. */
.footer-newsletter .widget-title span {
	padding: 0;
	font-size: inherit;
	font-weight: inherit;
	line-height: inherit;
	color: inherit;
	background: none;
}

.footer-newsletter .gform_wrapper {
	margin: 0;
	padding: 0;
}

.footer-newsletter .gform_wrapper form {
	margin: 0;
}

.footer-newsletter .gform_fields {
	display: grid;
	grid-template-columns: 1fr;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
	width: 100%;
}

.footer-newsletter .gfield {
	margin: 0;
	padding: 0;
	list-style: none;
}

/* The placeholder add-on already puts each label into its field, so the labels are
   duplicate text at this size. */
.footer-newsletter .gfield_label {
	display: none;
}

.footer-newsletter .ginput_container {
	margin: 0;
}

/* Gravity Forms sizes legacy inputs with .top_label input.medium at 47.5%, which is
   more specific than a plain element selector — hence the matching specificity here. */
.footer-newsletter .gform_wrapper .top_label input.medium,
.footer-newsletter .gform_wrapper input[type="text"],
.footer-newsletter .gform_wrapper input[type="email"],
.footer-newsletter input[type="text"],
.footer-newsletter input[type="email"] {
	width: 100%;
	height: 38px;
	padding: 0 12px;
	border: 1px solid rgba(255, 255, 255, .35);
	border-radius: 3px;
	background: #fff;
	color: var(--ink);
	font-size: 13px;
	line-height: 38px;
}

.footer-newsletter .gform_footer {
	margin: 10px 0 0;
	padding: 0;
	width: 100%;
}

.footer-newsletter input[type="submit"] {
	height: 38px;
	padding: 0 22px;
	border: 0;
	border-radius: 8px;
	background: var(--orange);
	color: #fff;
	font-size: 12px;
	font-weight: 700;
	cursor: pointer;
}

.footer-newsletter .gform_confirmation_message,
.footer-newsletter .validation_message,
.footer-newsletter .gform_validation_errors {
	color: #fff;
	font-size: 13px;
}

/* Six columns is too many below the desktop breakpoints; the footer grid already
   collapses there, and the newsletter goes with it. */
@media (max-width: 1100px) {
	.footer-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 700px) {
	.footer-grid {
		grid-template-columns: 1fr 1fr;
		gap: 25px;
	}
}

@media (max-width: 700px) {
	.page-hero-copy {
		padding: 45px 0;
	}

	.page-hero h1 {
		font-size: 40px;
	}
}

/* ------------------------------------------------------------ group cards --- */
/* The mockup's .group-grid, used for the About page's ideals / value / specialties
   lists. Written with child combinators so the cards keep their own type inside .prose,
   the same way .resource-grid does. */
.group-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 18px;
	margin: 28px 0 0;
}

/* Personal, Business and Life sit as three equal pillars. */
.group-grid:has(> :nth-child(3):last-child) {
	grid-template-columns: repeat(3, 1fr);
}

.group-grid > .group-card {
	padding: 28px;
	border: 1px solid var(--line);
	border-radius: 7px;
	background: #fff;
}

.group-grid > .group-card > h2 {
	margin: 0 0 16px;
	padding: 0;
	font-size: 18px;
	font-weight: 700;
	line-height: 1.35;
	color: var(--ink);
	text-transform: none;
}

.group-grid > .group-card > ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.group-grid > .group-card > ul > li {
	position: relative;
	margin: 0;
	padding: 7px 0 7px 18px;
	font-size: 15px;
	line-height: 1.45;
	color: var(--ink);
	list-style: none;
}

/* The mockup marks these with an orange bullet rather than a disc. */
.group-grid > .group-card > ul > li:before {
	content: "•";
	position: absolute;
	left: 0;
	color: var(--orange);
}

.group-grid > .group-card > p {
	margin: 0;
	font-size: 15px;
	line-height: 1.55;
	color: var(--ink);
}

/* A bold paragraph with no list under it — "Specialties" — reads as a section label. */
.prose .entry-content > .prose-section {
	max-width: 900px;
	margin: 44px 0 0;
	padding: 0;
	font-size: 21px;
	font-weight: 700;
	color: var(--ink);
}

@media (max-width: 1100px) {
	.group-grid:has(> :nth-child(3):last-child) {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 700px) {
	.group-grid {
		grid-template-columns: 1fr;
	}
}

/* --------------------------------------------------------------- FAQ list --- */
/* easy-faq-with-expanding-text turns every heading inside .bg_faq_content_section into
   a toggle and hides the elements between it and the next heading, animating them with
   slideUp/slideDown — which writes inline display values. So nothing here may set
   `display` on the answers, or the accordion stops opening.
 *
 * The plugin also draws its arrow as a background image on the heading and positions it
 * with an inline background-position-y, hence background-image:none and a pseudo-element
 * chevron instead. The heading rule in style.css:357 makes them 15px bold red Tahoma. */
.bg_faq_content_section {
	margin: 24px 0 0;
	border-bottom: 1px solid var(--line);
}

.bg_faq_content_section h1,
.bg_faq_content_section h2,
.bg_faq_content_section h3,
.bg_faq_content_section h4,
.bg_faq_content_section h5 {
	position: relative;
	margin: 0;
	padding: 18px 48px 18px 0;
	border-top: 1px solid var(--line);
	background-image: none;
	color: var(--ink);
	font-size: 17px;
	font-weight: 700;
	line-height: 1.4;
	cursor: pointer;
	transition: color .15s ease;
}

.bg_faq_content_section h1:hover,
.bg_faq_content_section h2:hover,
.bg_faq_content_section h3:hover,
.bg_faq_content_section h4:hover,
.bg_faq_content_section h5:hover {
	color: var(--orange);
}

/* Section headings — Auto Insurance, Business Insurance, and the closing disclaimer.
 *
 * They are h6 because that is the one level the plugin's `:header:not(h6)` selector
 * skips. Any other level would become a toggle and collapse the questions under it. So
 * the level here is load-bearing, not typographic, and the styling has to put back the
 * weight the tag implies it does not have.
 *
 * cursor is reset explicitly: the toggle rule above sets pointer on every heading, and
 * a heading that is not clickable must not claim to be. */
.bg_faq_content_section h6 {
	margin: 34px 0 0;
	padding: 26px 0 6px;
	border-top: 1px solid var(--line);
	background-image: none;
	color: var(--orange);
	font-size: 13px;
	font-weight: 700;
	line-height: 1.3;
	text-transform: uppercase;
	letter-spacing: .06em;
	cursor: default;
}

.bg_faq_content_section h6:first-child {
	margin-top: 0;
	border-top: 0;
}

/* The disclaimer is the one section whose body is prose rather than answers, and it is
   never hidden — nothing above it toggles it. */
.bg_faq_content_section h6 + p,
.bg_faq_content_section h6 ~ p {
	font-size: 15px;
	line-height: 1.7;
}

/* Chevron, rotated when the item is open. */
.bg_faq_content_section .bg_faq_closed:after,
.bg_faq_content_section .bg_faq_opened:after {
	content: "";
	position: absolute;
	top: 26px;
	right: 18px;
	width: 9px;
	height: 9px;
	border-right: 2px solid var(--orange);
	border-bottom: 2px solid var(--orange);
	transform: rotate(45deg);
	transition: transform .15s ease;
}

.bg_faq_content_section .bg_faq_opened:after {
	transform: rotate(-135deg);
}

.bg_faq_content_section .bg_faq_opened {
	color: var(--orange);
}

/* Answers: spacing only, and keyed to the heading element rather than to its open or
   closed class. The general sibling combinator was wrong here — `.bg_faq_opened ~ p`
   matches every paragraph after the open item, not just its own answer, so opening one
   question restyled the rest of the list and closing it put them back. Anything that
   varies with the toggle state changes type under the reader mid-interaction. */
.bg_faq_content_section h1 + *,
.bg_faq_content_section h2 + *,
.bg_faq_content_section h3 + *,
.bg_faq_content_section h4 + *,
.bg_faq_content_section h5 + * {
	margin-top: 0;
	padding-top: 2px;
}

/* Answers now contain lists as well as paragraphs. No `display` may be set on them —
   the plugin animates with slideUp/slideDown, which writes inline display values, and
   anything declared here would fight it. Spacing only. */
.bg_faq_content_section h5 ~ ul {
	margin: 0 0 14px;
	padding-left: 20px;
}

.bg_faq_content_section h5 ~ ul li {
	margin: 0 0 4px;
	line-height: 1.6;
}

/* ---------------------------------------------------- gravity forms (body) --- */
/* Forms inside page content: the contact form (16), the certificate request (15) and
   the quote forms. The footer newsletter is deliberately NOT in scope — it has its own
   compact rules above.
 *
 * These are Gravity Forms legacy markup: ul.gform_fields of li.gfield, sized by GF with
 * selectors like .gform_legacy_markup_wrapper .top_label input.medium, which is why the
 * rules below are anchored on .gform_legacy_markup_wrapper rather than bare elements.
 * Nothing here touches field structure, names or ids — only presentation, so submission
 * and validation behave exactly as before. */
.prose .gform_legacy_markup_wrapper {
	margin: 24px 0 0;
	max-width: 900px;
}

/* Two columns, matching the mockup's quote form. GF's own two-up is the gf_left_half /
   gf_right_half ready classes, which it implements with floats and percentage widths;
   here they map onto grid columns instead and everything else spans the full row. */
.prose .gform_legacy_markup_wrapper .gform_fields {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 18px;
	margin: 0;
	padding: 0;
	list-style: none;
	width: 100%;
}

.prose .gform_legacy_markup_wrapper .gfield {
	grid-column: 1 / -1;
	margin: 0;
	padding: 0;
	list-style: none;
	width: auto;
	float: none;
	clear: none;
}

.prose .gform_legacy_markup_wrapper .gfield.gf_left_half {
	grid-column: 1 / 2;
}

.prose .gform_legacy_markup_wrapper .gfield.gf_right_half {
	grid-column: 2 / 3;
}

.prose .gform_legacy_markup_wrapper .gfield_label {
	display: block;
	margin: 0 0 8px;
	padding: 0;
	font-size: 14px;
	font-weight: 700;
	color: var(--ink);
}

.prose .gform_legacy_markup_wrapper .gfield_required {
	color: var(--orange);
	padding-left: 3px;
}

.prose .gform_legacy_markup_wrapper input[type="text"],
.prose .gform_legacy_markup_wrapper input[type="email"],
.prose .gform_legacy_markup_wrapper input[type="tel"],
.prose .gform_legacy_markup_wrapper input[type="url"],
.prose .gform_legacy_markup_wrapper input[type="number"],
.prose .gform_legacy_markup_wrapper input[type="password"],
.prose .gform_legacy_markup_wrapper select,
.prose .gform_legacy_markup_wrapper textarea,
.prose .gform_legacy_markup_wrapper .top_label input.medium,
.prose .gform_legacy_markup_wrapper .top_label input.large,
.prose .gform_legacy_markup_wrapper .top_label select.medium,
.prose .gform_legacy_markup_wrapper .top_label select.large,
.prose .gform_legacy_markup_wrapper .top_label textarea.medium,
.prose .gform_legacy_markup_wrapper .top_label textarea.large {
	width: 100%;
	padding: 13px 14px;
	border: 1px solid #aeb7c2;
	border-radius: 3px;
	background: #fff;
	color: var(--ink);
	font: inherit;
	font-size: 15px;
	line-height: 1.3;
}

.prose .gform_legacy_markup_wrapper textarea {
	min-height: 140px;
	line-height: 1.5;
}

/* The css-ready-selector plugin's readyclass.css gives half-column fields a
   percentage width on the LI ITSELF (its float-era two-up), which out-specifies the
   `.gfield { width: auto }` above — theme css also loads before the plugin's, so a
   tie loses. On the certificate form that left each gf_left_half / gf_right_half li
   at ~48% of its own grid track, and every input inside dutifully filled a container
   half the size it should be. The li fills its track again here; the inputs' own
   100% rule above then does the rest.

   !important is load-bearing, not laziness: the plugin's own gravityforms.css says
   `width: 48% !important` (form:not(.css-ready-org) …), and among !important
   declarations specificity then order decide — hence the extra .gform_wrapper and
   ul qualifiers to out-rank it. */
.prose .gform_wrapper.gform_legacy_markup_wrapper ul.top_label li.gfield.gf_left_half,
.prose .gform_wrapper.gform_legacy_markup_wrapper ul.top_label li.gfield.gf_right_half {
	width: 100% !important;
	margin: 0;
	padding: 0;
	float: none;
}

/* The certificate form goes single-column, per client request — its ready-class
   halves (Name beside Address, requester beside email/phone) left tall uneven
   columns with dead space between them. Scoped to the form's wrapper id (form 15,
   same id on production — the forms table came from there), so any other legacy
   form keeps its two-up. */
#gform_wrapper_15 .gfield.gf_left_half,
#gform_wrapper_15 .gfield.gf_right_half {
	grid-column: 1 / -1;
}

/* Same fight one level down: readyclass sizes .medium/.small inputs inside halves.
   Radios and checkboxes excepted — a full-width radio circle floats away from its
   label. */
.prose .gform_legacy_markup_wrapper .top_label li.gfield.gf_left_half div:not(.ginput_container_date) input:not([type="radio"]):not([type="checkbox"]),
.prose .gform_legacy_markup_wrapper .top_label li.gfield.gf_left_half div select,
.prose .gform_legacy_markup_wrapper .top_label li.gfield.gf_right_half div:not(.ginput_container_date) input:not([type="radio"]):not([type="checkbox"]),
.prose .gform_legacy_markup_wrapper .top_label li.gfield.gf_right_half div select {
	width: 100%;
}

.prose .gform_legacy_markup_wrapper input:focus,
.prose .gform_legacy_markup_wrapper select:focus,
.prose .gform_legacy_markup_wrapper textarea:focus {
	border-color: var(--ink);
	outline: none;
}

/* Composite fields — name, address, date — put their inputs in nested containers with
   their own percentage widths and sub-labels. */
.prose .gform_legacy_markup_wrapper .ginput_complex span {
	display: block;
	width: 100%;
	padding: 0;
	margin: 0 0 10px;
}

.prose .gform_legacy_markup_wrapper .ginput_complex label {
	display: block;
	margin: 4px 0 0;
	font-size: 12px;
	font-weight: 400;
	color: var(--muted);
}

.prose .gform_legacy_markup_wrapper .gfield_description {
	padding: 6px 0 0;
	font-size: 13px;
	line-height: 1.5;
	color: var(--muted);
}

/* Section breaks. */
.prose .gform_legacy_markup_wrapper .gsection {
	margin: 14px 0 0;
	padding: 18px 0 0;
	border-bottom: 0;
	border-top: 1px solid var(--line);
}

.prose .gform_legacy_markup_wrapper .gsection_title {
	margin: 0;
	padding: 0;
	font-size: 20px;
	font-weight: 400;
	color: var(--ink);
}

/* Radios and checkboxes keep their list, but lose the 2015 spacing. */
.prose .gform_legacy_markup_wrapper .gfield_radio li,
.prose .gform_legacy_markup_wrapper .gfield_checkbox li {
	margin: 0 0 6px;
	padding: 0;
	list-style: none;
}

.prose .gform_legacy_markup_wrapper .gfield_radio input,
.prose .gform_legacy_markup_wrapper .gfield_checkbox input {
	width: auto;
	margin-right: 8px;
}

/* Submit, styled as the .button.primary used everywhere else. */
.prose .gform_legacy_markup_wrapper .gform_footer {
	margin: 24px 0 0;
	padding: 0;
}

.prose .gform_legacy_markup_wrapper .gform_footer input[type="submit"],
.prose .gform_legacy_markup_wrapper .gform_button {
	width: max-content;
	min-height: 43px;
	padding: 0 26px;
	border: 0;
	border-radius: 8px;
	background: var(--orange);
	color: #fff;
	font-size: 13px;
	font-weight: 700;
	line-height: 43px;
	cursor: pointer;
}

/* Validation. GF marks the field and prints a message; both are restated in the
   refresh's palette rather than the plugin's default red-on-pink. */
.prose .gform_legacy_markup_wrapper .gform_validation_errors,
.prose .gform_legacy_markup_wrapper .validation_error {
	margin: 0 0 20px;
	padding: 14px 18px;
	border: 1px solid #c0392b;
	border-left: 3px solid #c0392b;
	border-radius: 3px;
	background: #fdf3f2;
	color: #c0392b;
	font-size: 14px;
}

.prose .gform_legacy_markup_wrapper .gfield_error input,
.prose .gform_legacy_markup_wrapper .gfield_error select,
.prose .gform_legacy_markup_wrapper .gfield_error textarea {
	border-color: #c0392b;
}

.prose .gform_legacy_markup_wrapper .gfield_error .gfield_label,
.prose .gform_legacy_markup_wrapper .validation_message {
	color: #c0392b;
}

.prose .gform_legacy_markup_wrapper .validation_message {
	padding: 6px 0 0;
	font-size: 13px;
	font-weight: 400;
	background: none;
	border: 0;
}

.prose .gform_confirmation_message {
	padding: 18px 22px;
	border-left: 3px solid var(--orange);
	background: var(--ivory);
	font-size: 15px;
	color: var(--ink);
}

/* ---------------------------------------------- multi-page quote forms --- */
/* The quote forms are paged, which brings markup the single-page forms never show: a
   progress bar and Next/Previous buttons. Both arrived in Gravity Forms' own colours —
   a blue bar and grey buttons — on a page that is otherwise navy and orange. */

.prose .gform_legacy_markup_wrapper .gf_progressbar_wrapper {
	margin: 0 0 30px;
}

/* "Step 1 of 5", as the caption used for section labels elsewhere in the refresh. */
.prose .gform_legacy_markup_wrapper .gf_progressbar_title {
	margin: 0 0 10px;
	padding: 0;
	font-size: 12px;
	font-weight: 700;
	line-height: 1.3;
	color: var(--orange);
	text-transform: uppercase;
	letter-spacing: .06em;
	background: none;
	border: 0;
}

.prose .gform_legacy_markup_wrapper .gf_progressbar {
	height: 6px;
	padding: 0;
	background: var(--line);
	border: 0;
	border-radius: 3px;
	box-shadow: none;
	overflow: hidden;
}

/* GF ships colour in a class — .gf_progressbar_blue, .percentbar_blue — so the fill has
   to be restated rather than inherited. The width is inline, set per page, and is left
   alone: it is the one thing here that carries information. */
.prose .gform_legacy_markup_wrapper .gf_progressbar_percentage {
	height: 6px;
	background: var(--orange);
	border-radius: 3px;
	box-shadow: none;
	transition: width .3s ease;
}

/* The number inside the bar. The title above already says which step this is, and at 6px
   tall there is nowhere for it to sit. */
.prose .gform_legacy_markup_wrapper .gf_progressbar_percentage span {
	display: none;
}

.prose .gform_legacy_markup_wrapper .gform_page_footer {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin: 26px 0 0;
	padding: 20px 0 0;
	border-top: 1px solid var(--line);
}

/*
 * Next, Previous and Submit share the theme's button shape. They need the reset as much
 * as the styling: Gravity Forms gives them a bare `button` class, which is also the
 * theme's own component class, so .button's border and padding were landing on them
 * uninvited alongside .gform-theme-button's grey.
 */
.prose .gform_legacy_markup_wrapper .gform_next_button,
.prose .gform_legacy_markup_wrapper .gform_previous_button,
.prose .gform_legacy_markup_wrapper .gform_page_footer input[type="submit"] {
	width: auto;
	min-height: 43px;
	padding: 0 26px;
	border-radius: 8px;
	font-size: 13px;
	font-weight: 700;
	line-height: 43px;
	text-transform: uppercase;
	letter-spacing: .03em;
	cursor: pointer;
	appearance: none;
}

.prose .gform_legacy_markup_wrapper .gform_next_button,
.prose .gform_legacy_markup_wrapper .gform_page_footer input[type="submit"] {
	border: 1px solid var(--orange);
	background: var(--orange);
	color: #fff;
}

/* Back is the secondary action, so it takes the ghost treatment the header's GET
   CERTIFICATE uses rather than a second orange button competing with Next. */
.prose .gform_legacy_markup_wrapper .gform_previous_button {
	border: 1px solid var(--ink);
	background: #fff;
	color: var(--ink);
	order: -1;
}

.prose .gform_legacy_markup_wrapper .gform_next_button:hover,
.prose .gform_legacy_markup_wrapper .gform_page_footer input[type="submit"]:hover {
	background: #b8471a;
	border-color: #b8471a;
}

.prose .gform_legacy_markup_wrapper .gform_previous_button:hover {
	border-color: var(--orange);
	color: var(--orange);
}

/* The form's own title and description. The page hero already names the page, so this
   reads as the form's introduction rather than a second page title. */
.prose .gform_legacy_markup_wrapper .gform_heading {
	margin: 0 0 24px;
}

.prose .gform_legacy_markup_wrapper .gform_title {
	margin: 0 0 8px;
	padding: 0;
	font-size: 22px;
	font-weight: 400;
	line-height: 1.3;
	color: var(--ink);
	text-transform: none;
	background: none;
	border: 0;
}

.prose .gform_legacy_markup_wrapper .gform_description {
	display: block;
	margin: 0;
	font-size: 16px;
	line-height: 1.6;
	color: var(--ink);
}

.prose .gform_legacy_markup_wrapper .gsection_description {
	margin: 6px 0 0;
	font-size: 14px;
	line-height: 1.6;
	color: var(--muted);
}

/*
 * Repeatable list fields — Vehicles, Listed Drivers, reported losses. Gravity Forms
 * builds these as a <table> with one column per sub-field and an add/remove control on
 * the end. Vehicles has nine columns, which is wider than the measure at any window
 * size, so the table scrolls inside its own box rather than pushing the page sideways.
 */
.prose .gform_legacy_markup_wrapper .gfield_list_container {
	display: block;
	width: 100%;
	margin: 0;
	border-collapse: collapse;
	overflow-x: auto;
}

.prose .gform_legacy_markup_wrapper .gfield_list_container thead th {
	padding: 0 8px 6px 0;
	font-size: 12px;
	font-weight: 700;
	color: var(--muted);
	text-align: left;
	text-transform: uppercase;
	letter-spacing: .03em;
	white-space: nowrap;
}

.prose .gform_legacy_markup_wrapper .gfield_list_cell {
	padding: 0 8px 8px 0;
	vertical-align: top;
}

.prose .gform_legacy_markup_wrapper .gfield_list_cell input,
.prose .gform_legacy_markup_wrapper .gfield_list_cell select {
	min-width: 130px;
	padding: 9px 10px;
	font-size: 14px;
}

/* The add and remove controls are images in the legacy markup, so they cannot be
   restyled — only sized and given room. */
.prose .gform_legacy_markup_wrapper .gfield_list_icons {
	padding: 0 0 8px 4px;
	white-space: nowrap;
}

.prose .gform_legacy_markup_wrapper .gfield_list_icons img {
	width: 18px;
	height: 18px;
	margin: 0 2px;
	vertical-align: middle;
}

/* The authorisation notice that sits with the submit button. An HTML field, so it is
   the one thing on these forms with no label and no input — it should read as fine
   print, not as another question. */
.prose .gform_legacy_markup_wrapper .gform-consent {
	margin: 0;
	font-size: 13px;
	line-height: 1.6;
	color: var(--muted);
}

/* Choice labels. GF 2.9 puts its own class on these, which sets a heavier weight than
   the value beside it warrants. */
.prose .gform_legacy_markup_wrapper .gchoice label,
.prose .gform_legacy_markup_wrapper .gform-field-label--type-inline {
	font-size: 15px;
	font-weight: 400;
	color: var(--ink);
}

@media (max-width: 700px) {
	.prose .gform_legacy_markup_wrapper .gform_fields {
		grid-template-columns: 1fr;
	}

	.prose .gform_legacy_markup_wrapper .gfield.gf_left_half,
	.prose .gform_legacy_markup_wrapper .gfield.gf_right_half {
		grid-column: 1 / -1;
	}

	.prose .gform_legacy_markup_wrapper .gform_next_button,
	.prose .gform_legacy_markup_wrapper .gform_previous_button,
	.prose .gform_legacy_markup_wrapper .gform_page_footer input[type="submit"] {
		width: 100%;
	}
}

/* The .trust-grid component (the "Independent advice" / "What our clients say"
   two-up band) lived here until the band was removed from the homepage — the
   Welcome / News / Reviews row below is its replacement. */

/* ------------------------------------------------------------ lower rows --- */
/* Welcome / News / Reviews still come from sidebar-home.php, index.php and sidebar.php
   as three floated columns sized for a 919px page. Floats are replaced with a grid so
   they fill the wider container instead of stranding empty space on the right. */
.container-main .row {
	display: grid;
	grid-template-columns: 1.2fr 1.4fr 1fr;
	gap: 40px;
	align-items: start;
}

/* Should the row ever hold just two columns again (the Welcome widget spent a while
   on the About page only), it collapses to two tracks by itself. Same :has() idea as
   .group-grid's three-pillar rule, rather than a class on the wrapper that would need
   remembering to add anywhere else this markup is reused. */
.container-main .row:has(> :last-child:nth-child(2)) {
	grid-template-columns: 1.4fr 1fr;
}

.container-main .row > div,
.container-main .row > aside {
	float: none;
	width: auto !important;
	margin: 0;
}

/* Section headings across the three columns: the About widget's h3, the News h3 and the
   Reviews widget title are three different elements at three different sizes. */
.container-main .sidebar-home h3,
.container-main .front-news .h3news,
.container-main .sidebar .widget-title {
	margin: 0 0 16px;
	padding: 0;
	font-size: 21px;
	font-weight: 700;
	line-height: 1.3;
	color: var(--ink);
	text-transform: none;
	background: none;
	border: 0;
}

/* style.css:1670 puts the size, family, weight and line-height on the span inside the
   title — Trebuchet at normal weight — so restyling the heading alone left "Reviews"
   looking nothing like "News" or "Welcome to INSURHAUS Inc" beside it. */
.container-main .sidebar .widget-title span {
	padding: 0;
	font-family: inherit;
	font-size: inherit;
	font-weight: inherit;
	line-height: inherit;
	color: inherit;
	background: none;
}

.container-main .sidebar-home .article p {
	font-size: 15px;
	line-height: 1.65;
	color: var(--ink);
}

/* "Learn more", "Read More News", "Read More Reviews" and the per-review links are the
   same idea in four different styles — one orange caption link, as in the mockup. The
   selectors are this varied because each comes from somewhere else: a WordPress
   more-link, a theme div, a text widget and a testimonials plugin. */
.container-main .sidebar-home .more-link,
.container-main .sidebar-home .article > a,
.container-main .more-news a,
.container-main .sidebar .readmore,
.container-main .sidebar .read_more_link,
.container-main .sidebar .textwidget a,
.container-main .sidebar a[href*="reviews"] {
	display: inline-block;
	margin-top: 8px;
	padding: 0;
	background: none;
	border: 0;
	color: var(--orange);
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .03em;
	text-decoration: none;
}

.container-main .more-news {
	margin-top: 4px;
}

/* Testimonials as cards rather than loose text with an orange block after each. */
/* style.css:1723 sets `margin: 0 !important; padding: … !important` on these
   containers, so the spacing between review cards cannot be set without matching it. */
.container-main .hms-testimonial-container {
	margin: 0 0 18px !important;
	padding: 18px 20px !important;
	background: var(--ivory);
	border: 1px solid var(--line);
	border-radius: 7px;
}

.container-main .hms-testimonial-container .testimonial,
.container-main .hms-testimonial-container .testimonial p {
	margin: 0;
	font-size: 14px;
	line-height: 1.6;
	color: var(--ink);
	font-family: Arial, Helvetica, sans-serif;
}

/* The plugin ends each review with a "..." link to the full one. With the text clamped
   the ellipsis is already there, and a second one that happens to be a link reads as a
   mistake — so the clamp does the truncating and the link goes. "Read More Reviews"
   under the column is the way through to all of them. */
.container-main .hms-testimonial-container .readmore {
	display: none;
}

/* style.css:1812 colours this link with `#text-2 .textwidget a`. An id selector cannot
   be outranked by classes, and hard-coding #text-2 here would tie the refresh to one
   widget instance — which is why this is one of the few !important rules in the file. */
/* Both of these links are addressed by rules the refresh cannot outrank by specificity —
   `#text-2 .textwidget a` is an id selector — so the whole treatment is forced, and the
   News link is given the same declarations so the two cannot drift apart. */
.container-main .sidebar .textwidget a,
.container-main .more-news a {
	color: var(--orange) !important;
	font-family: Arial, Helvetica, sans-serif !important;
	font-size: 12px !important;
	font-weight: 700 !important;
	line-height: 1.3 !important;
	letter-spacing: .03em !important;
	text-transform: uppercase !important;
	text-decoration: none !important;
}

.container-main .hms-testimonial-container .author {
	margin: 0 0 6px;
	font-size: 14px;
	font-weight: 700;
	color: var(--ink);
}

/* ------------------------------------------------------- google reviews --- */
/* Reviews read from the Google listing (google-reviews.php). Deliberately the same
   card as the testimonials above, because they occupy the same column and the
   source should be the only visible difference. */
.google-reviews-summary {
	display: flex;
	align-items: center;
	gap: 6px;
	margin: 0 0 14px;
	font-size: 13px;
	color: var(--muted);
}

.google-review-stars {
	color: #f2a33c;
	letter-spacing: .04em;
}

.google-review {
	margin: 0 0 18px;
	padding: 18px 20px;
	background: var(--ivory);
	border: 1px solid var(--line);
	border-radius: 7px;
}

.google-review-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 8px;
	margin: 0 0 8px;
	font-size: 13px;
}

.google-review-author {
	font-weight: 700;
	color: var(--ink);
	text-decoration: none;
}

.google-review-when {
	color: var(--muted);
	font-size: 12px;
}

.google-review-text {
	margin: 0;
	font-size: 14px;
	line-height: 1.6;
	color: var(--ink);
	/* Four lines, then an ellipsis — the column is narrow and a long review would
	   push News and Welcome out of alignment. The full text is one link away. */
	display: -webkit-box;
	-webkit-line-clamp: 4;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.google-reviews-more a {
	color: var(--orange);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .03em;
	text-transform: uppercase;
	text-decoration: none;
}

/* The agency's answer under a review, when the Business Profile sync supplies one. */
.google-review-reply {
	margin: 10px 0 0;
	padding-left: 12px;
	border-left: 2px solid var(--line);
	font-size: 13px;
	line-height: 1.55;
	color: var(--muted);
}

/* A page showing every review — [google_reviews limit="all"] — rather than the three
   in the homepage column: two across where there is room, and no clamp, because the
   point of that page is to read them. */
.google-reviews-all {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 18px;
	align-items: start;
}

.google-reviews-all .google-reviews-summary,
.google-reviews-all .google-reviews-heading,
.google-reviews-all .google-reviews-toggle,
.google-reviews-all .google-reviews-more {
	grid-column: 1 / -1;
}

.google-reviews-all .google-review {
	margin: 0;
}

.google-reviews-all .google-review-text {
	display: block;
	overflow: visible;
}

/* Everything past the sixth card is in the markup and hidden until the button is
   pressed — so a crawler and a visitor without JavaScript still get all of them. */
.google-reviews-all.is-collapsed .google-review.is-beyond-fold {
	display: none;
}

.google-reviews-toggle {
	justify-self: start;
}

@media (max-width: 860px) {

	.google-reviews-all {
		grid-template-columns: 1fr;
	}
}

/* ---------------------------------------------------------------- footer --- */
.site-footer {
	background: var(--navy);
	color: #fff;
	padding: 44px 0 22px;
	border: 0;
}

/* The theme adds 20px top and bottom to every .container inside the footer. Since both
   the column grid and the legal row are containers, that was 80px of stacked padding on
   top of the footer's own — most of the empty space under the columns. */
.site-footer .container {
	padding: 0;
}

.footer-grid {
	display: grid;
	grid-template-columns: 1.3fr repeat(4, .85fr) 1.9fr;
	gap: 40px;
	align-items: start;
}

.footer-grid h3 {
	margin: 0 0 9px;
	font-size: 14px;
	color: #fff;
	text-transform: none;
}

.footer-grid a {
	display: block;
	margin: 6px 0;
	color: #fff;
	font-size: 13px;
	text-decoration: none;
}

.footer-grid a:hover {
	color: var(--orange);
}

.footer-grid p {
	margin: 6px 0;
	font-size: 13px;
	line-height: 1.5;
	color: #e5eaf0;
}

/* The logo is a dark-on-light lockup, so on navy it needs its own light patch — the
   same treatment the mockup gives it. Sizing comes from brand-icons.css. */
.footer-brand .brand {
	display: inline-block;
	margin: 0 0 12px;
	padding: 7px 9px;
	background: #fff;
	border-radius: 3px;
	width: max-content;
	max-width: 100%;
}

.footer-brand .brand img {
	display: block;
	width: 230px;
	max-width: 100%;
	height: auto;
}


.footer-grid h3 {
	text-align: left;
}

/* Widget areas keep printing whatever is in them; only the chrome is restyled. The
   float and percentage width are the old four-across footer: .widget-footer is 23% wide
   and .footer4 floats right, which inside a grid cell stranded the column against the
   Contact column with a gap in between. */
.footer-widgets .widget,
.footer-widgets .widget-footer,
.footer-widgets .footer4 {
	width: auto;
	margin: 0 0 18px;
	padding: 0;
	background: none;
	border: 0;
	float: none;
}

/* Links inside widgets are addressed by .widget-footer ul li a in style.css, which is
   more specific than the .footer-grid a rule above — hence the orange underlined items
   in an otherwise white column. */
.site-footer .footer-widgets ul li a {
	display: block;
	margin: 6px 0;
	padding: 0;
	color: #fff;
	font-size: 13px;
	text-decoration: none;
	background: none;
	border: 0;
}

.site-footer .footer-widgets ul li a:hover {
	color: var(--orange);
}

/* `.footer4 .menu` is floated right in style.css:2035, left over from the old footer
   where that menu ran along the bottom edge. In a grid cell it pushed the links away
   from their own column heading. */
.site-footer .footer-widgets .menu,
.site-footer .footer-widgets .menu-footer-menu-container {
	float: none;
	width: auto;
	margin: 0;
	padding: 0;
}

.site-footer .footer-widgets .menu > li {
	display: block;
}

/* The theme decorates menu items with separators and expander glyphs that belong to the
   header navigation, not to a footer link list. */
.site-footer .footer-widgets li:before,
.site-footer .footer-widgets li:after,
.site-footer .footer-widgets .sub-menu {
	content: none;
	display: none;
}

.footer-widgets .widget-title,
.footer-widgets .footer-title {
	margin: 0 0 9px;
	font-size: 14px;
	color: #fff;
	text-transform: none;
}

.footer-widgets ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.footer-widgets li {
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	list-style: none;
}

.legal {
	margin-top: 24px;
	padding-top: 14px;
	border-top: 1px solid rgba(255, 255, 255, .18);
	font-size: 11px;
	color: #fff;
}

/* Direct children only. `.legal span` also matched the separators nested inside the
   link list, so every one of them floated out of the sentence and piled up at the end
   as a row of bare pipes. */
.legal > span {
	float: right;
}

.legal a {
	color: #fff;
	text-decoration: none;
}

.legal a:hover {
	color: var(--orange);
}

/* The theme drew a grey band under the content column, sized for the old grid. */
.footerBox {
	display: none;
}

/* ------------------------------------------------------ header breakpoints --- */
/* Between the mockup's 1100px cut-off and a full-width desktop the bar has to hold six
   nav items and three buttons. It stopped fitting when Text Opt-In left the Contact us
   dropdown and became an item of its own (per client) — GET A QUOTE ran off the right
   edge at 1280, a laptop width. Two steps rather than one, so nothing disappears sooner
   than it must: tighter spacing first, then the least-used ghost button. */
@media (min-width: 1101px) and (max-width: 1340px) {

	.primary-nav {
		gap: 22px;
	}

	.primary-nav ul.menu {
		gap: 22px;
	}
}

/* REPORT CLAIM goes before GET CERTIFICATE: both are in the footer's Client Resources
   column and in the homepage hero, and a claim is the rarer of the two errands. */
@media (min-width: 1101px) and (max-width: 1220px) {

	.actions .button.ghost:first-child {
		display: none;
	}

	.primary-nav,
	.primary-nav ul.menu {
		gap: 16px;
	}
}

/* The mockup drops the navigation at 1100px in favour of the buttons, and stacks the
   whole header at 700px. The theme's own 919/767px rules are overridden above. */
@media (max-width: 1100px) {
	.primary-nav .main-navigation {
		display: none;
	}

	.primary-nav {
		gap: 16px;
	}

	.actions {
		margin-left: auto;
	}

	/* Every ghost, not just the first. The rule used to hide `:first-child`, which was
	   GET CERTIFICATE only because CLIENT CENTER is unpublished and prints nothing —
	   so adding REPORT CLAIM would have left two ghosts plus GET A QUOTE competing with
	   the nav toggle for the row. GET A QUOTE is the one that has to survive; the
	   others reappear inside the drawer, below. */
	.actions .button.ghost {
		display: none;
	}

	/* The drawer's copy of those buttons: full width, stacked, sitting between the phone
	   number and the navigation, with a rule under them so they read as actions rather
	   than as the first two menu items. */
	.drawer-actions {
		display: grid;
		gap: 10px;
		margin-bottom: 18px;
		padding-bottom: 18px;
		border-bottom: 1px solid var(--line);
	}

	.drawer-actions .button.ghost {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 100%;
		height: 46px;
		padding: 0 14px;
		font-size: 13px;
	}
}

@media (max-width: 700px) {
	.utility .container {
		gap: 16px;
		font-size: 12px;
	}

	.header-row {
		flex-wrap: wrap;
		gap: 12px;
		padding: 12px 0;
	}

	.logo {
		width: 100%;
	}

	.logo img {
		width: 220px;
	}

	.primary-nav {
		margin-left: 0;
	}

	.actions {
		width: 100%;
		display: grid;
		grid-template-columns: 1fr 1fr;
	}

	.actions .button {
		padding: 0 8px;
	}
}

/* News items in the homepage column. */
.news-list {
	display: grid;
	gap: 10px;
}

.news-item {
	display: block;
	padding: 14px 16px;
	border: 1px solid var(--line);
	border-radius: 7px;
	color: var(--ink);
	text-decoration: none;
	background: #fff;
}

.news-item:hover {
	border-color: var(--orange);
}

.news-item h4 {
	margin: 0;
	padding: 0;
	font-size: 15px;
	font-weight: 700;
	line-height: 1.35;
	color: inherit;
}

.news-item time {
	display: block;
	margin-top: 4px;
	font-size: 12px;
	color: var(--muted);
}

/* ---------------------------------------------------------- product cards --- */
/* Products › Personal / Commercial, rebuilt from the icon + italic-title + paragraph
   triples those pages are written as. */
.product-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 18px;
	margin: 28px 0 0;
}

.product-grid > .product-card {
	display: flex;
	flex-direction: column;
	padding: 28px;
	border: 1px solid var(--line);
	border-radius: 7px;
	background: #fff;
}

.product-grid > .product-card > .product-icon {
	margin: 0 0 14px;
	line-height: 0;
}

.product-grid > .product-card > .product-icon img {
	width: 56px;
	height: auto;
	margin: 0;
	padding: 0;
	border: 0;
	float: none;
}

.product-grid > .product-card > h2 {
	margin: 0 0 10px;
	padding: 0;
	font-size: 20px;
	font-weight: 700;
	line-height: 1.3;
	color: var(--ink);
	font-style: normal;
	text-transform: none;
}

.product-grid > .product-card > p {
	margin: 0 0 18px;
	font-size: 15px;
	line-height: 1.65;
	color: var(--ink);
}

/* Pushed to the bottom so the buttons line up across cards of different heights.
   flex-wrap plus a 8em basis lets VIEW DETAILS and GET A QUOTE sit in a row when
   the card is wide enough and stack on the three-column product pages. */
.product-grid > .product-card > .product-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: auto;
	padding-top: 16px;
}

.product-grid > .product-card > .product-actions .button {
	flex: 1 1 8em;
	min-height: 40px;
	padding: 0 14px;
	font-size: 12px;
}

@media (max-width: 700px) {
	.product-grid {
		grid-template-columns: 1fr;
	}
}

/* ------------------------------------------------------------ news archive --- */
.news-archive {
	padding: 50px 0;
}

/* One column: the cards carry a paragraph of copy each, and two-up made a wall of it. */
.news-archive .news-list {
	grid-template-columns: 1fr;
	gap: 18px;
}

.news-archive .news-card {
	display: flex;
	flex-direction: column;
	padding: 26px 28px;
	border: 1px solid var(--line);
	border-radius: 7px;
	background: #fff;
}

.news-archive .news-card > h2 {
	margin: 0;
	padding: 0;
	font-size: 19px;
	font-weight: 700;
	line-height: 1.35;
}

.news-archive .news-card > h2 a {
	color: var(--ink);
	text-decoration: none;
}

.news-archive .news-card > h2 a:hover {
	color: var(--orange);
}

.news-archive .news-card > time {
	display: block;
	margin: 6px 0 12px;
	font-size: 12px;
	color: var(--muted);
}

/* Fixed length: three lines, ending in an ellipsis. The full article is a click away
   via the title or the link below. */
.news-archive .news-excerpt {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	line-clamp: 3;
	overflow: hidden;
	margin: 0 0 16px;
	font-size: 15px;
	line-height: 1.65;
	color: var(--ink);
}

/* The card's only call to action, and it goes to the article — as it did originally.
   The clamp above is what keeps every card the same length. */
.news-archive .news-more {
	margin-top: auto;
	align-self: flex-start;
	color: var(--orange);
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .03em;
	text-decoration: none;
}

.news-pagination {
	display: flex;
	gap: 8px;
	margin: 28px 0 0;
}

.news-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 38px;
	height: 38px;
	padding: 0 12px;
	border: 1px solid var(--line);
	border-radius: 3px;
	color: var(--ink);
	font-size: 14px;
	text-decoration: none;
}

.news-pagination .page-numbers.current,
.news-pagination .page-numbers:hover {
	border-color: var(--orange);
	color: var(--orange);
}

@media (max-width: 700px) {
	.news-archive .news-list {
		grid-template-columns: 1fr;
	}
}

/* --------------------------------------------------------- reviews page --- */
/* The full testimonials listing (/about-us/reviews/). The plugin prints each review as
   a bare .hms-testimonial-container with an author line, the text, and a "..." link to
   ?testimonial_id=N. Here they become cards that expand in place — see
   js/refresh-2026.js, which removes that link and adds the button. */
.hms-testimonial-group {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 18px;
	margin: 28px 0 0;
}

/* style.css:1723 sets margin and padding on these with !important, so both have to be
   restated the same way. */
.hms-testimonial-group .hms-testimonial-container {
	display: flex;
	flex-direction: column;
	margin: 0 !important;
	padding: 24px 26px !important;
	background: var(--ivory);
	border: 1px solid var(--line);
	border-radius: 7px;
}

.hms-testimonial-group .author,
.hms-testimonial-group .author p {
	margin: 0 0 8px;
	font-size: 15px;
	font-weight: 700;
	line-height: 1.35;
	color: var(--ink) !important;
	font-family: Arial, Helvetica, sans-serif;
}

.hms-testimonial-group .author p {
	margin: 0;
}

/* Three lines, then an ellipsis, until the card is expanded. */
.hms-testimonial-group .testimonial {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	line-clamp: 3;
	overflow: hidden;
	margin: 0;
	font-size: 15px;
	line-height: 1.6;
	color: var(--ink);
	font-family: Arial, Helvetica, sans-serif;
}

.hms-testimonial-group .is-expanded .testimonial {
	-webkit-line-clamp: unset;
	line-clamp: unset;
	overflow: visible;
}

/* Belt and braces: the script removes this link, but if the script never runs the
   review should still read as a review rather than trailing an orange "...". */
.hms-testimonial-group .readmore {
	display: none;
}

.review-toggle {
	margin: 14px 0 0;
	padding: 0;
	align-self: flex-start;
	background: none;
	border: 0;
	color: var(--orange);
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .03em;
	cursor: pointer;
}

@media (max-width: 700px) {
	.hms-testimonial-group {
		grid-template-columns: 1fr;
	}
}

/* Our Team no longer has a sidebar, so the inline `.template-page .content-area
   { width: 71% }` that functions.php prints into wp_head has nothing to sit beside. */
.category-our-team .template-page .content-area {
	float: none;
	width: auto !important;
}

/* ---------------------------------------------------------------- careers --- */
/* The listings are the client's rewrite, rendered as prose rather than the Types
   accordion. Same reading measure as the other rewritten pages. */
.careers-page.prose {
	padding: 50px 0;
}

.careers-intro,
.career-opening,
.careers-contact {
	max-width: 900px;
}

.careers-intro p,
.career-opening p,
.career-opening li,
.careers-contact p,
.careers-contact li {
	font-size: 17px;
	line-height: 1.7;
}

.career-opening {
	margin: 40px 0 0;
	padding: 32px 0 8px;
	border-top: 1px solid var(--line);
}

.career-opening h2 {
	margin: 0 0 10px;
}

.career-lead {
	margin: 0 0 18px;
	font-size: 20px;
	line-height: 1.5;
	color: var(--muted);
}

.career-opening ul,
.careers-contact ul {
	margin: 0 0 18px;
	padding: 0 0 0 22px;
}

.career-opening li,
.careers-contact li {
	margin: 0 0 8px;
}

.careers-contact {
	margin: 48px 0 0;
	padding: 26px 28px;
	background: var(--ivory);
	border: 1px solid var(--line);
	border-radius: 7px;
}

.careers-contact h2 {
	margin: 0 0 12px;
	font-size: 28px;
	font-weight: 400;
	color: var(--ink);
}

.careers-contact .button {
	margin: 8px 0 16px;
}

.careers-footnote {
	margin: 0;
	color: var(--muted);
	font-size: 15px;
}

/* Our Team still uses .container-main from the older category layout. */
.category-our-team .container-main {
	padding: 50px 0;
}

.category-our-team .template-page .content-area,
.category-careers .template-page .content-area {
	float: none;
	width: auto !important;
	padding: 0;
}

/* Three across where there is room: the product pages carry five to seven cards, and
   two columns left a lone card in its own row on both. */
.product-grid {
	grid-template-columns: repeat(3, 1fr);
}

/* Icon and title on one row.
   The glyphs in brand-icons.css are drawn at fixed pixel offsets inside a 78x56 box, so
   they cannot be resized by changing the box — the box is scaled instead, inside a
   smaller one that reserves the space the scaled result actually occupies. */
.product-grid > .product-card > .product-head {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 0 0 12px;
}

.product-grid .product-icon-box {
	position: relative;
	flex: none;
	width: 47px;
	height: 34px;
}

.product-grid .product-icon-box > .category-visual {
	display: block;
	position: absolute;
	left: 0;
	top: 0;
	width: 78px;
	height: 56px;
	font-size: 0;
	color: var(--ink);
	transform: scale(.6);
	transform-origin: left top;
}

.product-grid > .product-card > .product-head > h2 {
	margin: 0;
	padding: 0;
	font-size: 19px;
	font-weight: 700;
	line-height: 1.25;
	color: var(--ink);
	text-transform: none;
}

/* Standing advice lifted out from under the cards to the top of the page. */
.page-lede {
	max-width: 900px;
	margin: 0 0 8px;
}

.page-lede p {
	margin: 0 0 10px;
	font-size: 17px;
	line-height: 1.6;
	color: var(--muted);
}

@media (max-width: 1100px) {
	.product-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

/* The profile row under the footer logo — see .social-links for the shared component;
   this is only its placement here, plus footer-scale marks (the bar's 15px reads too
   small against the logo above these). */
.social-links--footer {
	margin: 18px 0 0;
}

.social-links--footer .social-links-icon {
	width: 18px;
	height: 18px;
}

/* style.css:1082 gives this block `padding: 8px 25px 30px` — the 25px indented the copy
   from its own heading, which sits outside it, and the 30px sat on top of the panel's
   own bottom padding, so the space under LEARN MORE came to more than twice the space
   above the heading. Only the 8px above the copy is kept. */
.container-main .sidebar-home .article {
	padding: 8px 0 0;
}

/* The quote index cards, restyled to the prototype's product cards per client
   request: icon tile, short product name, the spec's description and time line,
   and a corner arrow. (The old .quote-grid title-and-arrow rows are gone with
   the markup in insurhaus_refresh_quote_index().) */
.quote-card-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 16px;
	margin: 0 0 10px;
}

.quote-card {
	position: relative;
	display: block;
	padding: 22px 24px 20px;
	background: #fff;
	border: 1px solid var(--line);
	border-radius: 12px;
	text-decoration: none;
	transition: border-color .15s ease, box-shadow .15s ease;
}

.quote-card:hover {
	border-color: rgba(185, 71, 35, .5);
	box-shadow: 0 6px 18px rgba(11, 41, 83, .08);
}

.quote-card-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	margin: 0 0 14px;
	background: rgba(185, 71, 35, .08);
	border-radius: 10px;
	color: var(--orange);
}

.quote-card-icon .refresh-icon {
	width: 24px;
	height: 24px;
}

.quote-card-arrow {
	position: absolute;
	top: 24px;
	right: 24px;
	color: #98a3b3;
	font-size: 18px;
	transition: color .15s ease, transform .15s ease;
}

.quote-card:hover .quote-card-arrow {
	color: var(--orange);
	transform: translateX(3px);
}

.quote-card h3 {
	margin: 0 0 8px;
	color: var(--ink);
	font-size: 18px;
	font-weight: 700;
}

.quote-card p {
	margin: 0 0 12px;
	color: #5a6b80;
	font-size: 14px;
	line-height: 1.55;
}

.quote-card em {
	color: #8a97a8;
	font-size: 12.5px;
	font-style: normal;
	font-weight: 700;
}

@media (max-width: 1000px) {
	.quote-card-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 620px) {
	.quote-card-grid {
		grid-template-columns: 1fr;
	}
}

/* Single-topic category pages: the icon and the call to action, above the copy. */
.product-lede {
	display: flex;
	align-items: center;
	gap: 18px;
	margin: 0 0 26px;
}

.product-lede .product-icon-box {
	position: relative;
	flex: none;
	width: 62px;
	height: 45px;
}

.product-lede .product-icon-box > .category-visual {
	display: block;
	position: absolute;
	left: 0;
	top: 0;
	width: 78px;
	height: 56px;
	font-size: 0;
	color: var(--ink);
	transform: scale(.8);
	transform-origin: left top;
}

/* ============================================================================
 * Phones and tablets
 *
 * Collected at the end of the file so these win over the component rules above
 * regardless of where each component was added during the port.
 *
 * The 2015 theme was a fixed 919px page that phones simply zoomed out to read. The
 * refresh is fluid, so anything that stays multi-column at 400px does not shrink — it
 * pushes the page wider than the screen, and one overflowing grid drags every other
 * element out of view with it. That is what the six-column category grid and the
 * three-column homepage row were doing.
 * ========================================================================= */

/* Nothing may exceed the viewport. Long URLs, wide tables and embeds are the usual
   culprits; each is handled below, and this is the backstop. */
html,
body {
	max-width: 100%;
	overflow-x: hidden;
}

img,
iframe,
embed,
object,
video {
	max-width: 100%;
}

@media (max-width: 1100px) {

	/* Homepage hero: copy above the image rather than a 38/62 split. */
	.hero-grid {
		grid-template-columns: 1fr;
	}

	.hero-copy {
		padding: 45px 0 40px;
	}

	.hero-image {
		min-height: 260px;
	}

	/* Homepage lower row: Welcome / News / Reviews, one under the other. */
	.container-main .row {
		grid-template-columns: 1fr;
		gap: 32px;
	}

	.category-grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

@media (max-width: 700px) {

	.category-grid {
		grid-template-columns: repeat(2, 1fr);
	}

	/* Tiles, cards and panels all go single file. */
	.resource-grid,
	.quick-links .resource-grid,
	.quote-card-grid,
	.hms-testimonial-group,
	.news-list,
	.news-archive .news-list {
		grid-template-columns: 1fr;
	}

	.hero-copy h1 {
		font-size: 34px;
	}

	.hero-copy .welcome-text,
	.hero-copy .welcome-text p {
		font-size: 14px;
	}

	/* Three columns of nowrap buttons overflow a phone-width column; the client
	   okayed 2x3 as the alternative, and 1fr tracks let the labels share the width. */
	.hero-resources-grid {
		grid-template-columns: repeat(2, 1fr);
		gap: 8px;
	}

	.hero-resource-btn {
		white-space: normal;
		padding: 9px 12px;
	}

	/* The call-to-action band reads as a stack, not a row with a button pinned right. */
	.page-note {
		flex-direction: column;
		align-items: flex-start;
		gap: 16px;
		padding: 22px 24px;
	}

	.insurance,
	.news-archive,
	.prose {
		padding-top: 32px;
		padding-bottom: 32px;
	}

	.trust-grid article {
		padding: 18px 20px;
	}

	.product-lede {
		flex-wrap: wrap;
	}

	/* Footer: one column, and the legal line stacks instead of floating its links. */
	.footer-grid {
		grid-template-columns: 1fr;
		gap: 28px;
	}

	/* Direct child only — the same trap as the float rule above. `.legal span` also
	   matches the separators inside the link list, and turning those into blocks put
	   every link and every pipe on a line of its own. The list becomes a block so it
	   drops below the copyright; what is inside it stays inline and wraps. */
	.legal > span {
		float: none;
		display: block;
		margin-top: 8px;
	}

	/* Editor content is full of wide tables laid out for a desktop page. */
	.prose table,
	.entry-content table {
		display: block;
		width: 100%;
		overflow-x: auto;
	}

	/* Long unbroken strings — addresses, URLs — cannot be allowed to set the width. */
	.prose,
	.entry-content,
	.footer-grid,
	.news-card {
		overflow-wrap: break-word;
		word-wrap: break-word;
	}
}

@media (max-width: 480px) {

	.category-grid {
		grid-template-columns: 1fr;
	}

	.hero-copy h1 {
		font-size: 30px;
	}

	.page-hero h1 {
		font-size: 30px;
	}

	.page-hero-copy {
		padding: 34px 0;
	}

	/* Two half-width buttons do not fit beside each other at this size. */
	.actions {
		grid-template-columns: 1fr;
	}
}

/* ================================================================== icons ===
 * Lucide, inlined by insurhaus_refresh_icon_svg(). One rule sizes them all; the stroke
 * follows the surrounding colour, so a card hover recolours its icon for free.
 * ========================================================================= */
.refresh-icon {
	display: block;
	width: 40px;
	height: 40px;
	stroke: currentColor;
	stroke-width: 1.6;
	fill: none;
	color: var(--ink);
}

.category-card .refresh-icon {
	margin: 0 auto;
	width: 44px;
	height: 44px;
}

.category-card:hover .refresh-icon {
	color: var(--orange);
}

.product-head .refresh-icon {
	flex: none;
	width: 34px;
	height: 34px;
}

.product-lede .refresh-icon {
	flex: none;
	width: 42px;
	height: 42px;
}

/* ------------------------------------------------------- mobile corrections --- */
/* style.css:2190 sets `body { min-width: 420px }` — a 2015 floor for the fixed layout,
   and wider than a phone. That, not any grid, is what forced the page to scroll
   sideways: the body could not become narrower than 420px no matter what was inside it. */
body {
	min-width: 0;
}

@media (max-width: 700px) {

	/* The calls to action size to their text rather than stretching the full width. */
	.actions {
		display: flex;
		flex-wrap: wrap;
		gap: 10px;
		width: auto;
	}

	.actions .button {
		min-height: 38px;
		padding: 0 16px;
		font-size: 12px;
	}
}

@media (max-width: 480px) {
	.actions {
		display: flex;
	}
}

/* --------------------------------------------------------------- mobile nav --- */
/* The navigation is hidden below 1100px, which left phones with no menu at all. The
   toggle reveals it as a panel under the header rather than a drawer: the menu has six
   top-level items with dropdowns, and a panel can show that hierarchy without needing
   a second level of interaction. */
.nav-toggle {
	display: none;
	width: 42px;
	height: 42px;
	margin-left: auto;
	padding: 0;
	background: none;
	border: 1px solid var(--line);
	border-radius: 3px;
	cursor: pointer;
}

.nav-toggle span,
.nav-toggle span:before,
.nav-toggle span:after {
	display: block;
	position: relative;
	width: 18px;
	height: 2px;
	margin: 0 auto;
	background: var(--ink);
	content: "";
}

.nav-toggle span:before {
	top: -6px;
	position: absolute;
}

.nav-toggle span:after {
	top: 4px;
	position: absolute;
}

@media (max-width: 1100px) {

	.nav-toggle {
		display: block;
		order: 2;
	}

	.header-row {
		flex-wrap: wrap;
	}

	.actions {
		order: 3;
	}

	/* Shown by the toggle: full width, under the header row. */
	.primary-nav {
		order: 4;
		display: none;
		width: 100%;
		margin: 0;
		padding: 8px 0 4px;
		border-top: 1px solid var(--line);
	}

	.site-header.nav-open .primary-nav {
		display: block;
	}

	.site-header.nav-open .primary-nav .main-navigation {
		display: block;
	}

	.primary-nav ul.menu {
		display: block;
	}

	.primary-nav ul.menu > li {
		border-bottom: 1px solid var(--line);
	}

	.primary-nav ul.menu > li > a {
		padding: 12px 0;
		font-size: 15px;
	}

	/* Dropdowns are shown inline rather than on hover — there is no hover on a phone. */
	.primary-nav ul.sub-menu {
		position: static;
		display: block;
		padding: 0 0 8px 14px;
		border: 0;
		box-shadow: none;
	}

	.primary-nav ul.sub-menu a {
		padding: 8px 0;
	}

	.lang-switch {
		padding: 12px 0;
	}
}

/* --------------------------------------------------- footer on small screens --- */
/* Two columns for the link lists, which are short enough to pair up. The brand block
   and the newsletter each keep a row to themselves: the logo is 230px wide and the form
   has three fields and a button, and neither survives half a phone screen. */
@media (max-width: 700px) {

	.footer-grid {
		grid-template-columns: 1fr 1fr;
		gap: 26px 20px;
	}

	.footer-brand,
	.footer-newsletter {
		grid-column: 1 / -1;
	}
}

/* One column only where two would leave a couple of words per line. */
@media (max-width: 380px) {

	.footer-grid {
		grid-template-columns: 1fr;
	}
}

/* ============================================================== mobile drawer ===
 * Below 1100px the navigation becomes a drawer that slides in from the right. The
 * header row keeps only the calls to action and the toggle; the logo moves to the top
 * of the drawer, where it doubles as the link home.
 * ============================================================================ */
.drawer-head,
.nav-close,
.nav-scrim {
	display: none;
}

@media (max-width: 1100px) {

	/* Compact header: GET A QUOTE, then the toggle to its right. */
	.header-row {
		flex-wrap: nowrap;
		justify-content: flex-end;
		gap: 12px;
		min-height: 68px;
	}

	.logo {
		display: none;
	}

	.actions {
		order: 1;
		margin-left: 0;
		width: auto;
		display: flex;
	}

	.nav-toggle {
		order: 2;
		margin-left: 0;
		flex: none;
	}

	/* The drawer itself. */
	.primary-nav {
		display: block;
		position: fixed;
		top: 0;
		right: 0;
		z-index: 120;
		width: min(330px, 86vw);
		height: 100%;
		margin: 0;
		padding: 0 20px 24px;
		background: #fff;
		border: 0;
		border-left: 1px solid var(--line);
		box-shadow: -12px 0 30px rgba(8, 39, 82, .12);
		overflow-y: auto;
		transform: translateX(100%);
		transition: transform .22s ease;
	}

	.site-header.nav-open .primary-nav {
		transform: translateX(0);
	}

	.site-header.nav-open .primary-nav .main-navigation {
		display: block;
	}

	.drawer-head {
		display: flex;
		align-items: center;
		gap: 12px;
		padding: 16px 0;
		margin: 0 0 8px;
		border-bottom: 1px solid var(--line);
	}

	.drawer-logo {
		display: block;
		line-height: 0;
	}

	.drawer-logo img {
		display: block;
		width: 190px;
		max-width: 100%;
		height: auto;
	}

	/* Sized as a real touch target — 44px is the smallest comfortable one — with the
	   glyph large enough to read at arm's length. */
	/* The mark and the tap target are sized separately on purpose: the box is what a
	   thumb has to find, the icon is what the eye does.
	 *
	 * It is an inline SVG rather than a &times; character, which sidesteps a trap worth
	 * remembering — style.css:292 sets `font-size: 12px !important` on every <button> on
	 * the site, so a text glyph here could not be resized at all without matching that
	 * !important. The background, border and colour resets below fight the rest of the
	 * same rule, which paints buttons as orange gradients. */
	.nav-close {
		display: flex;
		align-items: center;
		justify-content: center;
		margin-left: auto;
		margin-right: -10px;
		padding: 0;
		width: 44px;
		height: 44px;
		background: none;
		border: 0;
		color: var(--ink);
		line-height: 0;
		cursor: pointer;
	}

	.nav-close .nav-close-icon {
		width: 26px;
		height: 26px;
		stroke-width: 2.1;
	}

	.nav-close:hover {
		color: var(--orange);
	}

	/* Navigation in a single column, dropdowns opened out. */
	.primary-nav ul.menu {
		display: block;
		gap: 0;
	}

	/* display: block is load-bearing: the desktop rule leaves each li a centered flex
	   row, so in the drawer a parent's opened-out submenu (and the Insurance mega
	   panel) sat BESIDE its label, vertically centered against it, instead of below. */
	.primary-nav ul.menu > li {
		display: block;
		border-bottom: 1px solid var(--line);
	}

	.primary-nav ul.menu > li > a {
		display: block;
		padding: 13px 0;
		font-size: 15px;
	}

	.primary-nav ul.sub-menu {
		position: static;
		display: block;
		min-width: 0;
		padding: 0 0 10px 14px;
		border: 0;
		border-radius: 0;
		box-shadow: none;
	}

	.primary-nav ul.sub-menu a {
		padding: 8px 0;
		font-size: 14px;
	}

	.lang-switch {
		padding: 14px 0 0;
	}

	.nav-scrim {
		display: block;
		position: fixed;
		inset: 0;
		z-index: 110;
		background: rgba(8, 39, 82, .45);
		opacity: 0;
		visibility: hidden;
		transition: opacity .22s ease, visibility .22s ease;
	}

	.site-header.nav-open .nav-scrim {
		opacity: 1;
		visibility: visible;
	}

	/* The page behind the drawer must not scroll with it. */
	body.nav-locked {
		overflow: hidden;
	}
}

/* ------------------------------------------------ tinynav inside the drawer --- */
/* The theme ships tinynav.js, which builds a <select> copy of the menu and — via
   style.css:2297 — hides the real list below 480px and shows the select instead. That
   is the 2015 answer to a mobile menu, and it was winning inside the drawer: a lone
   "Menu" dropdown where the navigation should be.
 *
 * The script stays loaded rather than being dequeued, because js/functions.js calls
 * .tinyNav() in the same block that starts the homepage slider — removing the plugin
 * would throw there and take the slider with it. The select is simply not shown. */
@media (max-width: 1100px) {

	.primary-nav .tinynav,
	.primary-nav .tinynav_label,
	.primary-nav select.tinynav {
		display: none !important;
	}

	.primary-nav #nav,
	.primary-nav ul.menu,
	.primary-nav .main-navigation ul {
		display: block !important;
	}

	.primary-nav ul.sub-menu {
		display: block !important;
	}
}

/* ------------------------------------------- homepage lower row on mobile --- */
/* Three fixes, all in the same band of the page.
 *
 * 1. The Reviews column was missing entirely, not just its title: style.css:2232 sets
 *    `.sidebar { display: none !important }` below 919px — the 2015 answer to a sidebar
 *    that could not fit. The refresh stacks it instead, so it is put back.
 *
 * 2. The three columns did not share a left edge. .home .container-main was written with
 *    its own width and never picked up the responsive .container values, so it sat at a
 *    72px inset while the Insurance section above it moved to 36px.
 *
 * 3. The theme's 30px block padding inside each column stacked up once the columns were
 *    on top of one another, leaving gaps where the section separation already is. */
@media (max-width: 1100px) {

	.container-main .sidebar,
	.container-main .sidebar-home {
		display: block !important;
		float: none;
		width: auto !important;
		padding: 0;
	}

	.home .container-main {
		width: min(1500px, calc(100% - 36px));
	}

	.container-main .content-area {
		float: none;
		width: auto !important;
		padding: 0;
	}

	/* Reviews cards sit closer to their heading than the desktop column allows. */
	.container-main .sidebar .widget {
		margin: 0;
		padding: 0;
	}
}

@media (max-width: 767px) {

	.home .container-main {
		width: calc(100% - 36px);
	}
}

/* Two across stays readable at phone widths — the labels are short and the cards are
   mostly icon. */
@media (max-width: 480px) {

	.category-grid {
		grid-template-columns: repeat(2, 1fr);
	}

	.category-card {
		min-height: 0;
		padding: 16px 10px;
	}
}

/* ------------------------------------------------------ language switcher --- */
/* Hidden for now: English is the only language enabled, so the control offers nothing
   to switch to. Delete this rule to bring it back — the markup is still printed, at the
   top of the utility bar. */
.lang-switch {
	display: none;
}

/* How it looks when it returns: white on the navy bar, sitting after the phone number. */
.utility .lang-switch ul.language-chooser {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.utility .lang-switch ul.language-chooser li {
	margin: 0;
	padding: 0;
	list-style: none;
}

.utility .lang-switch a {
	color: #fff;
	font-size: 13px;
	text-transform: uppercase;
	text-decoration: none;
}

/* ------------------------------------------------ tappable cards on mobile --- */
/* A hairline border reads as a container on a desktop, where the cursor changing shape
   already says "link". On a phone there is no hover, so the same card looks like a box
   of text. A little elevation plus a press state is what makes it read as tappable. */
@media (max-width: 1100px) {

	.category-card,
	.resource-grid > a,
	.quote-card,
	.news-item,
	.news-archive .news-card {
		border-color: #d9dfe6;
		box-shadow: 0 1px 2px rgba(8, 39, 82, .08), 0 6px 16px rgba(8, 39, 82, .06);
		transition: box-shadow .15s ease, transform .15s ease;
	}

	/* Pressed: the card settles and the shadow tightens under it. */
	.category-card:active,
	.resource-grid > a:active,
	.quote-card:active,
	.news-item:active {
		transform: translateY(1px);
		box-shadow: 0 1px 2px rgba(8, 39, 82, .14);
		border-color: var(--orange);
	}
}

/* ============================================================================
 * Mobile overrides — last in the file on purpose
 *
 * Several components were added to this stylesheet after the responsive section, and a
 * later `@media (max-width: 1100px)` beats an earlier `@media (max-width: 700px)` when
 * both match: that is why the product grid was still two columns on a phone, with the
 * second card running off the screen. Anything that must hold at phone widths belongs
 * here, at the end, where nothing can be appended after it by accident.
 * ========================================================================= */
@media (max-width: 760px) {

	/* Single column for every card grid. The category tiles are the deliberate
	   exception — they stay two across, since they are mostly icon and a short label. */
	.product-grid,
	.group-grid,
	.contact-grid,
	.holiday-grid,
	.resource-grid,
	.quick-links .resource-grid,
	.quote-card-grid,
	.hms-testimonial-group,
	.news-list,
	.news-archive .news-list,
	.prose .gform_legacy_markup_wrapper .gform_fields {
		grid-template-columns: 1fr;
	}

	.prose .gform_legacy_markup_wrapper .gfield.gf_left_half,
	.prose .gform_legacy_markup_wrapper .gfield.gf_right_half {
		grid-column: 1 / -1;
	}

	/* Tighter side margins: 36px of gutter on a 390px screen is a tenth of the width. */
	.container,
	.home .container-main {
		width: calc(100% - 24px);
		max-width: none;
	}

	.hero-copy {
		padding-left: 0;
		padding-right: 0;
	}
}

/* --------------------------------------------------- content edge padding --- */
/* style.css:1246 puts `padding-left: 23px` on every <article>, and `article
   .entry-content` (:1251) adds `10px 10px 0` on top — 33px of gutter on the left
   against 10px on the right. On a desktop that reads as a slightly odd indent; on a
   phone it is a visible mismatch between the page title and the copy under it, and the
   reason the body sat further in than the hero.
 *
 * The container is what should set the page's edges, so both are cleared. The card
 * components are unaffected: .product-card, .news-card, .group-card and the rest set
 * their own padding and win on specificity. */
.prose > article,
.prose article.hentry,
.content-area > article,
.content-area article.hentry {
	padding-left: 0;
	padding-right: 0;
}

.prose article > .entry-content,
.content-area article > .entry-content {
	margin: 0;
	padding: 0;
}

/* ======================================================= mobile header shape ===
 * Logo left, primary action and menu right — the shape almost every site uses, and the
 * reason the previous row felt off: with the logo gone there was nothing anchoring the
 * left, so two controls floated in an empty bar.
 *
 * The utility bar goes on phones. It carried service, location and the phone number;
 * the first two are not worth a strip of a 390px screen, and the number moves into the
 * drawer where it is a full-width tap target rather than 13px text.
 * ============================================================================ */
@media (max-width: 760px) {

	.utility {
		display: none;
	}
}

@media (max-width: 1100px) {

	.header-row {
		justify-content: space-between;
		gap: 10px;
	}

	/* Back in the bar, at a size that leaves room for the controls. */
	.logo {
		display: block;
		flex: 0 1 auto;
		min-width: 0;
		margin-right: auto;
	}

	.logo img {
		width: 150px;
	}

	.actions .button.ghost {
		display: none;
	}

	.drawer-phone {
		display: block;
		margin: 4px 0 10px;
		padding: 11px 0;
		color: var(--orange);
		font-size: 17px;
		font-weight: 700;
		text-decoration: none;
		border-bottom: 1px solid var(--line);
	}
}

@media (max-width: 420px) {

	.logo img {
		width: 124px;
	}

	.actions .button {
		padding: 0 12px;
		font-size: 11px;
	}
}

.drawer-phone {
	display: none;
}

/* ------------------------------------------- homepage lower row as panels --- */
/* Welcome, News and Reviews ran together as three columns of loose text on one white
   page — worse once they stack on a phone and the only separation is whitespace. Each
   becomes an ivory panel, and the cards inside flip to white so they still read as
   cards on it. */
.container-main .row > .sidebar-home,
.container-main .row > .front-news,
.container-main .row > .sidebar {
	padding: 26px;
	background: var(--ivory);
	border: 1px solid var(--line);
	border-radius: 7px;
}

/* Even padding on all four sides needs the trailing margins gone as well as the
   padding set: whatever ends each panel — a more-link paragraph, the .more-news div,
   the reviews text widget — carried a bottom margin of its own, so the gap under the
   last line ran to 40-70px against the 26px above the heading. `.widget` also adds
   `margin-bottom: 20px` (style.css:1655) and the testimonial containers set theirs
   with !important (:1723), hence the flag. */
.container-main .row > .sidebar-home > *:last-child,
.container-main .row > .front-news > *:last-child,
.container-main .row > .sidebar > *:last-child,
.container-main .row > .sidebar-home aside:last-child,
.container-main .row > .sidebar-home .article > *:last-child,
.container-main .row > .sidebar aside:last-child,
.container-main .row > .sidebar .textwidget,
.container-main .row > .sidebar .textwidget > *:last-child {
	margin-bottom: 0 !important;
	padding-bottom: 0;
}

/* The Welcome copy is page 33, whose 2015 markup separates the body from the more-link
   with a `<p>&nbsp;</p>` spacer. insurhaus_refresh_drop_spacer_paragraphs() strips it
   on the homepage — CSS cannot, since a paragraph holding a non-breaking space is not
   :empty. This catches genuinely empty ones the same way. */
.container-main .sidebar-home .article p:empty {
	display: none;
}

.container-main .news-item,
.container-main .hms-testimonial-container {
	background: #fff;
}

/* The three calls to action sat differently: one left, one right by way of
   `.link-more-news { margin-right: 20px }`, and one right again from
   `#text-2 .textwidget { text-align: right; float: right }` — an id rule, hence the
   !important. All three now start on the panel's left edge. */
/* Three rules push this link right: `.content-area .more-news` floats it and adds a
   20px right margin (style.css:1264), and `.link-more-news` floats AND right-aligns it
   again (:1800). Clearing the float is the part that actually matters — text-align
   alone leaves a floated box sitting on the right edge. */
.container-main .more-news,
.container-main .more-news a,
.container-main .link-more-news {
	float: none;
	margin-right: 0;
	padding-left: 0;
	text-align: left;
}

.container-main .more-news {
	padding-top: 14px;
}

.container-main .sidebar .textwidget {
	float: none !important;
	margin-right: 0 !important;
	text-align: left !important;
}

@media (max-width: 760px) {

	.container-main .row > .sidebar-home,
	.container-main .row > .front-news,
	.container-main .row > .sidebar {
		padding: 20px 18px;
	}
}

/* ------------------------------------------------- mobile header trimming --- */
/* Two leftovers from the desktop header: .site-header carries a 90px min-height while
   the mobile row is 68px, leaving a band of empty white under it; and the logo was
   sized by width alone, so its proportions decided the height and the strapline sat
   tight against the top edge. Constraining the height instead keeps the whole lockup
   visible and lets the row close up around it. */
@media (max-width: 1100px) {

	.site-header {
		min-height: 0;
	}

	.header-row {
		min-height: 0;
		padding: 12px 0;
	}

	.logo a {
		display: block;
		line-height: 0;
	}

	.logo img {
		width: auto;
		max-width: 60vw;
		max-height: 34px;
	}
}

@media (max-width: 420px) {

	.logo img {
		max-height: 30px;
	}
}

/* ================================================================ back to top ===
 * Fixed to the bottom-right, revealed once the page has been scrolled a screen and a
 * half. Sits under the navigation drawer's z-index so it cannot overlap an open menu.
 *
 * Mobile only. The cookie banner (.consent-banner) is also fixed to the bottom of the
 * screen, full-width, with Accept all at its right edge — on desktop that sits right
 * under this button's own bottom-right corner, and both are the same orange, so a
 * visitor sees one button wearing two labels. On a phone the banner wraps onto several
 * lines above its actions and the collision doesn't happen, so this stays hidden until
 * the 760px cutoff below turns it back on.
 * ============================================================================ */
.to-top {
	position: fixed;
	right: 20px;
	bottom: 20px;
	z-index: 90;
	display: none;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 46px;
	padding: 0;
	background: var(--orange);
	border: 0;
	border-radius: 50%;
	color: #fff;
	cursor: pointer;
	opacity: 0;
	visibility: hidden;
	transform: translateY(8px);
	box-shadow: 0 6px 18px rgba(185, 71, 35, .30);
	transition: opacity .18s ease, transform .18s ease, visibility .18s ease, background .18s ease;
}

.to-top.is-visible {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

/* Stays the accent colour in every state; the feedback on hover and press comes from
   the shadow and a slight lift instead of a colour change. */
.to-top:hover,
.to-top:focus,
.to-top:active {
	background: var(--orange);
}

.to-top:hover,
.to-top:focus {
	box-shadow: 0 8px 22px rgba(185, 71, 35, .38);
}

.to-top:active {
	transform: translateY(1px);
}

.to-top .to-top-icon {
	width: 22px;
	height: 22px;
	color: #fff;
	stroke-width: 2;
}

/* Out of the way of a thumb on small screens, and never over the drawer. Also where
   the button turns back on — see the "Mobile only" note above .to-top. */
@media (max-width: 760px) {

	.to-top {
		display: flex;
		right: 14px;
		bottom: 14px;
		width: 44px;
		height: 44px;
	}

	.site-header.nav-open ~ .to-top,
	body.nav-locked .to-top {
		display: none;
	}
}

/* Honour a reduced-motion preference: appear without sliding. */
@media (prefers-reduced-motion: reduce) {

	.to-top {
		transition: opacity .18s ease, visibility .18s ease;
		transform: none;
	}
}

/* Breathing room between the last panel of the lower row and the footer, which butt up
   against each other otherwise — ivory panel straight into navy. */
.home .container-main {
	padding: 8px 0 52px;
}

@media (max-width: 760px) {

	.home .container-main {
		padding: 4px 0 34px;
	}
}

/* A larger logo on phones. Capped by height so the lockup keeps its proportions and the
   row grows with it, rather than by width, which is what clipped the strapline before. */
@media (max-width: 1100px) {

	.logo img {
		max-height: 46px;
	}
}

@media (max-width: 420px) {

	.logo img {
		max-height: 40px;
		max-width: 54vw;
	}
}

/* ==================================================== footer on phones ===
 * Three changes: bigger tap targets, collapsible link lists, and the newsletter moved
 * above the columns — it is the only interactive thing down here and was last.
 * ====================================================================== */
@media (max-width: 760px) {

	/* Order: brand, newsletter, then the link columns. Grid order rather than markup,
	   so the desktop sequence — and the tab order above the breakpoint — is untouched. */
	.footer-brand {
		order: -2;
	}

	.footer-newsletter {
		order: -1;
	}

	/* ~44px targets. Footer links are where mis-taps happen: small, close together and
	   at the very bottom of the screen where thumbs are least accurate. */
	.footer-grid a {
		margin: 0;
		padding: 11px 0;
		font-size: 14px;
		line-height: 1.35;
	}

	.site-footer .footer-widgets ul li a {
		margin: 0;
		padding: 11px 0;
		font-size: 14px;
	}

	/* Headings become the control. The chevron rotates when the section is open. */
	.footer-grid .is-collapsible > h3 {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin: 0;
		padding: 14px 0;
		border-bottom: 1px solid rgba(255, 255, 255, .16);
		font-size: 15px;
		cursor: pointer;
	}

	.footer-grid .is-collapsible > h3:after {
		content: "";
		width: 8px;
		height: 8px;
		margin-right: 4px;
		border-right: 2px solid rgba(255, 255, 255, .7);
		border-bottom: 2px solid rgba(255, 255, 255, .7);
		transform: translateY(-2px) rotate(45deg);
		transition: transform .15s ease;
	}

	.footer-grid .is-collapsible.is-open > h3:after {
		transform: translateY(2px) rotate(-135deg);
	}

	.footer-grid .is-collapsible.is-open > a:first-of-type {
		padding-top: 14px;
	}

	/* The columns stack rather than pair up once they are single rows. */
	.footer-grid {
		grid-template-columns: 1fr;
		gap: 0;
	}

	.footer-brand,
	.footer-newsletter {
		margin-bottom: 22px;
	}
}

/* The Company column keeps its links inside a widget wrapper, so the collapse has to
   hide that too. */
@media (max-width: 760px) {

	.footer-grid .footer-widgets.is-collapsible > .widget-footer,
	.footer-grid .footer-widgets.is-collapsible > div {
		display: none;
	}

	.footer-grid .footer-widgets.is-collapsible.is-open > .widget-footer,
	.footer-grid .footer-widgets.is-collapsible.is-open > div {
		display: block;
	}
}

/* Contact leads the accordion — it is the reason most people scroll to a broker's
   footer — with the link lists under it. Order only; the markup sequence, and so the
   desktop layout and tab order, is unchanged. */
@media (max-width: 760px) {

	.footer-brand {
		order: -3;
	}

	.footer-newsletter {
		order: -2;
	}

	.footer-contact {
		order: -1;
	}

	/* Contact's phone and email are direct <a> children, like the link columns, so the
	   same collapse rules already cover them. */
	.footer-grid .footer-contact.is-collapsible > p {
		display: none;
	}

	.footer-grid .footer-contact.is-collapsible.is-open > p {
		display: block;
	}
}

/* ------------------------------------------- footer accordion, made visible --- */
/* White text on navy with a hairline rule under it reads as a heading, not a control —
   there was nothing to say these could be tapped. Each section becomes a panel: a
   lifted surface, a border, and a chevron in the accent colour, with the open one
   marked out so it is obvious which is which. */
@media (max-width: 760px) {

	.footer-grid .is-collapsible {
		margin: 0 0 8px;
		background: rgba(255, 255, 255, .05);
		border: 1px solid rgba(255, 255, 255, .14);
		border-radius: 6px;
		overflow: hidden;
		transition: background .15s ease, border-color .15s ease;
	}

	.footer-grid .is-collapsible.is-open {
		background: rgba(255, 255, 255, .09);
		border-color: rgba(255, 255, 255, .22);
	}

	.footer-grid .is-collapsible > h3 {
		margin: 0;
		padding: 15px 16px;
		border-bottom: 0;
		font-size: 15px;
	}

	.footer-grid .is-collapsible.is-open > h3 {
		border-bottom: 1px solid rgba(255, 255, 255, .16);
	}

	/* The chevron in the accent colour, on its own disc, so it reads as the control. */
	.footer-grid .is-collapsible > h3:after {
		width: 9px;
		height: 9px;
		margin-right: 2px;
		border-right: 2px solid var(--orange);
		border-bottom: 2px solid var(--orange);
	}

	/* Content inset to match the heading. */
	.footer-grid .is-collapsible > a,
	.footer-grid .is-collapsible > p,
	.footer-grid .footer-widgets.is-collapsible > .widget-footer,
	.footer-grid .footer-widgets.is-collapsible > div {
		padding-left: 16px;
		padding-right: 16px;
	}

	.footer-grid .is-collapsible.is-open > a:first-of-type {
		padding-top: 12px;
	}

	.footer-grid .is-collapsible.is-open > a:last-of-type {
		padding-bottom: 14px;
	}

	.footer-grid .is-collapsible.is-open > p:last-child {
		padding-bottom: 14px;
	}

	.site-footer .footer-widgets.is-collapsible ul li a {
		padding-left: 0;
	}
}

/* ------------------------------------------------ footer accordion motion --- */
/* The panel animates from 0fr to 1fr, which resolves to the content's own height — no
   max-height guess that is too small for the link lists or too large for Contact, and
   so no snap at the end of the transition. The inner element does the clipping, which
   is what the grid technique needs. */
.footer-panel > .footer-panel-inner {
	overflow: hidden;
}

@media (max-width: 760px) {

	.footer-panel {
		display: grid;
		grid-template-rows: 0fr;
		transition: grid-template-rows .26s ease;
	}

	.footer-grid .is-collapsible.is-open > .footer-panel {
		grid-template-rows: 1fr;
	}

	/* Content inset, now that it lives in the panel rather than beside the heading. */
	.footer-panel a,
	.footer-panel p,
	.footer-panel .widget-footer {
		padding-left: 16px;
		padding-right: 16px;
	}

	.footer-panel-inner > a:first-child {
		padding-top: 12px;
	}

	.footer-panel-inner > a:last-child,
	.footer-panel-inner > p:last-child {
		padding-bottom: 14px;
	}

	.site-footer .footer-widgets .footer-panel ul li a {
		padding-left: 0;
	}
}

/* Someone who has asked for less motion gets the open and close, without the slide. */
@media (prefers-reduced-motion: reduce) {

	.footer-panel {
		transition: none;
	}
}

/* ------------------------------------------------ hero image, full bleed --- */
/* The slider breaks out of the container gutter on phones so the photograph runs to
   both edges. Negative margins matched to the gutter rather than 100vw: vw includes the
   scrollbar on desktop, which would push the page sideways — the exact thing the
   overflow guard is there to catch. */
@media (max-width: 760px) {

	.hero-image {
		width: calc(100% + 24px);
		margin-left: -12px;
		margin-right: -12px;
		min-height: 240px;
	}
}

/* =============================================================== partners ===
 * A carrier grid rather than a list of accordion rows. Each card is the same height,
 * with the logo in a fixed box at the top so fourteen logos of wildly different
 * proportions sit on a common line.
 * ========================================================================= */
.category-partners .template-page .content-area {
	float: none;
	width: auto !important;
}

.category-partners .container-main {
	padding: 50px 0;
}

.partner-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 18px;
}

.partner-card {
	display: flex;
	flex-direction: column;
	padding: 26px 24px;
	background: #fff;
	border: 1px solid var(--line);
	border-radius: 7px;
	transition: border-color .15s ease, box-shadow .15s ease;
}

.partner-card:hover {
	border-color: var(--orange);
	box-shadow: 0 6px 18px rgba(8, 39, 82, .07);
}

/* The common box: logos are centred in it and never taller than it, so no card is
   pushed out of line by a tall wordmark. */
.partner-logo-box {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 72px;
	margin: 0 0 18px;
	padding: 0 8px;
	background: var(--ivory);
	border-radius: 5px;
}

.partner-card img.partner-logo {
	display: block;
	width: auto;
	max-width: 100%;
	max-height: 52px;
	margin: 0;
	object-fit: contain;
}

.partner-card > h2 {
	margin: 0 0 6px;
	padding: 0;
	font-size: 17px;
	font-weight: 700;
	line-height: 1.35;
	color: var(--ink);
	text-transform: none;
}

.partner-naic {
	margin: 0 0 12px;
	font-size: 12px;
	letter-spacing: .03em;
	color: var(--muted);
	text-transform: uppercase;
}

/* Clamped so the cards stay level: the descriptions run to about 360 characters, but
   two partners have none at all. */
.partner-desc {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 5;
	line-clamp: 5;
	overflow: hidden;
	margin: 0 0 16px;
}

.partner-desc p {
	margin: 0;
	font-size: 14px;
	line-height: 1.6;
	color: var(--ink);
}

/* Pinned to the bottom so every card's link sits on the same line. */
.partner-link {
	margin-top: auto;
	align-self: flex-start;
	color: var(--orange);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .03em;
	text-decoration: none;
}

@media (max-width: 1100px) {

	.partner-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 700px) {

	.partner-grid {
		grid-template-columns: 1fr;
		gap: 14px;
	}

	.partner-card {
		padding: 20px 18px;
	}

	.partner-logo-box {
		height: 64px;
	}
}

/* Life Insurance: logo-and-name-only cards (see partners-data.php for why — no post,
   no NAIC/description/link behind these). Denser and centered rather than the fuller
   cards' 3-column left-aligned layout, since there is a lot less in each one. */
.partner-section-heading {
	margin: 56px 0 20px;
	padding: 24px 0 0;
	border-top: 1px solid var(--line);
	font-size: 24px;
	font-weight: 500;
	line-height: 1.2;
	color: var(--ink);
	text-transform: none;
}

/* The rule and top margin exist to separate this section from the one above it. Life
   is first on the page since the original partner-post grid was removed, so there is
   nothing above it to separate from — a floating rule under a lot of empty space. */
.partner-section-heading:first-child {
	margin-top: 0;
	padding-top: 0;
	border-top: 0;
}

.partner-grid--logo-only {
	grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
	gap: 14px;
}

/* Header (logo) / chin (name) split — the same idea as .team-body's old chin: a full
   image area on top, a bordered text band underneath. padding: 0 here so the header
   can run edge to edge; both zones carry their own padding instead. */
.partner-card--logo-only {
	padding: 0;
	text-align: center;
}

/* A column, so the header keeps its fixed height and the chin takes whatever is
   left — with the grid stretching every card in a row to the same height, that puts
   every rule and every name on the same line across the row. */
.partner-card--logo-only {
	display: flex;
	flex-direction: column;
}

/* No ivory box behind these, unlike .partner-logo-box's default (per client: don't
   tint the logos with a background color) — the logo sits directly on the card,
   filling the header zone's own padding rather than a separately boxed area.

   Fixed height, not auto: these marks range from a 21px-tall wordmark to a 72px
   square, and sizing the zone to the image put the chin's rule at a different height
   on every tile — the grid read as ragged even though the cards were identical. A set
   area centres each logo in the same box instead. */
.partner-card--logo-only .partner-logo-box {
	width: 100%;
	height: 112px;
	flex: none;
	margin: 0;
	padding: 20px 16px;
	background: none;
	border-radius: 0;
}

.partner-card--logo-only .partner-logo-box img.partner-logo {
	max-height: 68px;
}

/* The chin: bordered off from the header above it, same reasoning .team-body used to
   have before its own photo went away — it reads as part of the tile rather than a
   caption floating under a picture. Centred in whatever height the row settles on, so
   a one-line name and a three-line one both sit level with their neighbours. */
.partner-card--logo-only h3 {
	display: flex;
	flex: 1;
	align-items: center;
	justify-content: center;
	min-height: 54px;
	margin: 0;
	padding: 12px 16px;
	border-top: 1px solid var(--line);
	font-size: 14px;
	font-weight: 600;
	line-height: 1.35;
	color: var(--ink);
}

@media (max-width: 700px) {

	.partner-card--logo-only .partner-logo-box {
		height: 92px;
		padding: 16px 12px;
	}

	.partner-card--logo-only .partner-logo-box img.partner-logo {
		max-height: 56px;
	}

	.partner-grid--logo-only {
		grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
		gap: 12px;
	}
}

/* .partner-grid--tiles and .partner-tile (the standalone Commercial section's
   pre-built-tile treatment) are gone: Commercial merged into Personal as one
   card-format section per client request — see insurhaus_partners_personal_carriers()
   in partners-data.php for how the tiles' baked-in captions were cropped off to fit. */

/* =============================================================== our team ===
 * The team page was three closed accordion rows from easy-faq-with-expanding-text.
 * category-our-team.php now prints a card grid per team; these are its styles. They
 * sit at the end of the file, after the mobile block, for the reason given there —
 * a later media query beats an earlier one of the same specificity.
 */
.team-page {
	padding: 50px 0 10px;
}

.team-group {
	margin: 0;
	border-bottom: 1px solid var(--line);
}

.team-group:first-of-type {
	border-top: 1px solid var(--line);
}

/* Native <details>/<summary> — see category-our-team.php for why this went back to an
   accordion. list-style: none plus the -webkit- rule below drop the browser's own
   marker; the chevron is drawn instead so open/closed reads the same in every browser.
   Themed to match .bg_faq_content_section (the FAQ page's own accordion) rather than
   inventing a second look: same 17px bold heading, the same always-orange chevron
   rotating on open, and the heading itself turning orange with it. */
.team-accordion-summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 18px 0;
	list-style: none;
	cursor: pointer;
	color: var(--ink);
	font-size: 17px;
	font-weight: 700;
	line-height: 1.4;
	transition: color .15s ease;
}

.team-accordion-summary:hover {
	color: var(--orange);
}

.team-accordion-summary::-webkit-details-marker {
	display: none;
}

.team-accordion-summary::after {
	content: "";
	flex: none;
	width: 9px;
	height: 9px;
	border-right: 2px solid var(--orange);
	border-bottom: 2px solid var(--orange);
	transform: rotate(45deg);
	transition: transform .15s ease;
}

.team-group[open] > .team-accordion-summary {
	color: var(--orange);
}

.team-group[open] > .team-accordion-summary::after {
	transform: rotate(-135deg);
}

/* Wide tracks left over from when each tile was a whole business card image; widened
   again per client ("make this card widths a little bigger") now that the address
   prints on two lines under the phone and email. */
.team-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(330px, 1fr));
	gap: 22px;
	padding: 4px 0 40px;
}

/* Border/radius/background match .category-card, the homepage's own card component;
   the 4px top edge is the one deliberate difference, coloured per department by
   --team-accent (set inline per .team-grid — see category-our-team.php) rather than
   the box-shadow lift this used to have from its business-card-photo days. */
.team-card {
	padding: 24px;
	background: #fff;
	border: 1px solid var(--line);
	border-top: 4px solid var(--team-accent, var(--ink));
	border-radius: 10px;
}

.team-card:hover {
	border-color: var(--orange);
	border-top-color: var(--team-accent, var(--orange));
}

.team-role {
	margin: 0 0 6px;
	font-size: 12px;
	font-weight: 700;
	line-height: 1.3;
	color: var(--orange);
	text-transform: uppercase;
	letter-spacing: .04em;
}

.team-body h3 {
	margin: 0;
	font-size: 24px;
	font-weight: 500;
	line-height: 1.25;
	color: var(--ink);
	text-transform: none;
}

.team-body h3 a {
	color: inherit;
	text-decoration: none;
}

.team-body h3 a:hover {
	color: var(--orange);
}

.team-rule {
	margin: 16px 0;
	border: 0;
	border-top: 1px solid var(--line);
}

.team-contact {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin: 0;
	font-size: 14px;
	line-height: 1.3;
}

.team-contact-row {
	display: flex;
	align-items: center;
	gap: 10px;
}

.team-contact-icon {
	width: 16px;
	height: 16px;
	flex: none;
	color: var(--orange);
}

/* The address is the one row that runs to two lines — street, then city, state and ZIP
   — so its pin sits against the first line rather than centred between both. */
.team-contact-row.team-address {
	align-items: flex-start;
}

.team-contact-row.team-address .team-contact-icon {
	margin-top: 1px;
}

.team-contact a {
	color: var(--muted);
	text-decoration: none;
}

.team-contact a:hover {
	color: var(--orange);
}

.team-langs {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
}

.team-langs-icon {
	width: 18px;
	height: 18px;
	flex: none;
	color: var(--ink);
}

.team-lang-pill {
	padding: 4px 10px;
	border-radius: 20px;
	background: rgba(11, 41, 83, .07);
	font-size: 12px;
	font-weight: 600;
	line-height: 1.4;
	color: var(--ink);
}

@media (max-width: 760px) {

	.team-page {
		padding: 30px 0 0;
	}

	.team-grid {
		grid-template-columns: 1fr;
		gap: 16px;
	}

	.team-card {
		padding: 20px;
	}

	.team-body h3 {
		font-size: 20px;
	}
}

/* ========================================================= cookie consent ===
 * A banner until a choice is recorded, then nothing until the visitor reopens it from
 * the footer. Both live inside one #consent element so the footer links have a single
 * thing to address.
 * ========================================================================= */
/*
 * `hidden` has to win here, and without this it does not.
 *
 * The browser's own rule is `[hidden] { display: none }` — a bare attribute selector,
 * which any class selector outranks. `.consent-banner` and `.consent-dialog` both set
 * display, so every `element.hidden = true` in the script was silently ignored: the
 * dialog stayed open after saving, and the banner sat behind it offering a second way
 * to accept something already accepted.
 */
.consent[hidden],
.consent [hidden] {
	display: none !important;
}

.consent-banner {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 60;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 18px;
	padding: 18px 24px;
	background: var(--navy);
	color: #fff;
	box-shadow: 0 -4px 18px rgba(11, 41, 83, .18);
}

.consent-banner p {
	margin: 0;
	max-width: 70ch;
	font-size: 14px;
	line-height: 1.6;
	color: #fff;
}

.consent-banner a {
	color: #fff;
	text-decoration: underline;
}

.consent-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

/* The ghost button is drawn for a white page; on the navy bar it has to invert. */
.consent-banner .button.ghost {
	border-color: rgba(255, 255, 255, .55);
	background: none;
	color: #fff;
}

.consent-banner .button.ghost:hover {
	border-color: #fff;
}

/* The opt-out confirmation. Centred, with the check mark and a heading, because it
   confirms a request rather than a setting. */
.consent-confirm .consent-panel {
	max-width: 460px;
	text-align: center;
}

.consent-confirm-icon {
	width: 44px;
	height: 44px;
	margin: 0 auto 14px;
	color: var(--orange);
	display: block;
}

.consent-confirm h2 {
	margin: 0 0 10px;
	font-size: 22px;
}

.consent-confirm p {
	margin: 0 0 22px;
	font-size: 15px;
	line-height: 1.65;
	color: var(--ink);
}

.consent-confirm .consent-actions {
	justify-content: center;
}

/* The lighter confirmation, for accepting or rejecting from the banner — where the
   banner vanishing is most of the message. Still needs to be seen, so it sits centred
   with the accent edge rather than tucked into a corner. */
.consent-note {
	position: fixed;
	left: 50%;
	bottom: 20px;
	transform: translateX(-50%);
	z-index: 65;
	max-width: calc(100% - 32px);
	margin: 0;
	padding: 13px 20px;
	background: var(--ink);
	color: #fff;
	border-left: 4px solid var(--orange);
	border-radius: 4px;
	font-size: 15px;
	line-height: 1.5;
	box-shadow: 0 8px 26px rgba(11, 41, 83, .35);
}

.consent-dialog {
	position: fixed;
	inset: 0;
	z-index: 70;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
	background: rgba(11, 41, 83, .55);
}

.consent-panel {
	width: min(560px, 100%);
	max-height: 86vh;
	overflow-y: auto;
	padding: 28px;
	background: #fff;
	border-radius: 7px;
}

.consent-panel h2 {
	margin: 0 0 18px;
	font-size: 21px;
	font-weight: 700;
	color: var(--ink);
	text-transform: none;
}

.consent-group {
	display: grid;
	gap: 14px;
	margin: 0 0 22px;
}

.consent-row {
	display: flex;
	gap: 12px;
	padding: 14px 16px;
	border: 1px solid var(--line);
	border-radius: 5px;
	font-size: 14px;
	line-height: 1.6;
	color: var(--ink);
	cursor: pointer;
}

.consent-row input {
	flex: none;
	margin: 3px 0 0;
	width: 17px;
	height: 17px;
	accent-color: var(--orange);
}

/* Necessary is checked and disabled — it should read as settled, not as unavailable. */
.consent-row input:disabled {
	opacity: .6;
	cursor: default;
}

.consent-row strong {
	display: block;
	margin: 0 0 3px;
	font-size: 15px;
	color: var(--ink);
}

.consent-dialog .consent-actions {
	justify-content: flex-end;
}

/* The legal row wraps on narrow screens, so the separators need to be able to break
   with it rather than being glued to the link before them with &nbsp;. */
.legal-links {
	display: inline;
}

/* The separator belongs to the link before it, joined by a non-breaking space, so a
   wrap can never put a pipe at the start of a line. */
.legal-links a:not(:last-child):after {
	content: "\00a0|";
	margin-right: 5px;
	opacity: .45;
}

@media (max-width: 700px) {

	.consent-banner {
		padding: 16px;
		gap: 12px;
	}

	.consent-banner p {
		font-size: 13px;
	}

	.consent-actions {
		width: 100%;
	}

	.consent-actions .button {
		flex: 1 1 auto;
	}

	.consent-panel {
		padding: 22px 18px;
	}
}

/* ============================================================== insurance catalog ===
 * /insurance/ and /insurance/{slug}/, plus the header mega-menu that lists the
 * categories. Search filters the grouped lists in place; the index search filters
 * the JSON inventory dumped into #coverage-catalog.
 * ============================================================================ */

.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	border: 0;
}

.insurance-mega {
	display: none;
	position: absolute;
	top: 100%;
	left: 0;
	z-index: 30;
	width: min(760px, calc(100vw - 48px));
	padding: 18px 20px 14px;
	background: #fff;
	border: 1px solid var(--line);
	border-top: 0;
	border-radius: 0 0 3px 3px;
	box-shadow: 0 8px 24px rgba(8, 39, 82, .10);
}

.menu-item-insurance:hover > .insurance-mega,
.menu-item-insurance:focus-within > .insurance-mega {
	display: block;
}

.insurance-mega-search {
	margin: 0 0 16px;
}

.insurance-mega-search input[type="search"],
input.coverage-filter {
	display: block;
	width: 100%;
	max-width: 100%;
	min-height: 42px;
	padding: 0 14px;
	border: 1px solid #aeb7c2;
	border-radius: 3px;
	font: inherit;
	font-size: 14px;
	color: var(--ink);
	background: #fff;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

.insurance-mega-search input[type="search"]:focus,
input.coverage-filter:focus {
	outline: 2px solid var(--orange);
	outline-offset: 1px;
	border-color: var(--orange);
}

.insurance-mega-cols {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 8px 28px;
}

.insurance-mega-col h3 {
	margin: 0 0 8px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--muted);
}

.insurance-mega-col a {
	display: block;
	padding: 5px 0;
	color: var(--ink);
	font-size: 14px;
	text-decoration: none;
	white-space: normal;
}

.insurance-mega-col a:hover,
.insurance-mega-col a.is-current {
	color: var(--orange);
}

.insurance-mega-all {
	display: inline-block;
	margin-top: 14px;
	padding-top: 12px;
	border-top: 1px solid var(--line);
	width: 100%;
	color: var(--orange);
	font-size: 13px;
	font-weight: 700;
	text-decoration: none;
}

.page-hero-parent {
	margin: 0 0 8px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .02em;
}

.insurance-index,
.insurance-category {
	padding: 36px 0 50px;
}

.coverage-index-search {
	max-width: 520px;
	margin: 0 0 28px;
}

.coverage-filter-label {
	display: block;
	margin: 0 0 8px;
	font-size: 13px;
	font-weight: 700;
}

.coverage-index-results,
.coverage-index-grid {
	margin: 0 0 28px;
}

.coverage-index-results h2,
.coverage-index-grid h2,
.coverage-section .detail-intro h2 {
	margin: 0 0 14px;
	font-size: 21px;
	font-weight: 400;
}

.coverage-index-results ul {
	list-style: none;
	margin: 0;
	padding: 0;
	border-top: 1px solid var(--line);
}

.coverage-index-results li a {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 16px;
	padding: 12px 0;
	border-bottom: 1px solid var(--line);
	color: var(--ink);
	text-decoration: none;
}

.coverage-index-results li a:hover {
	color: var(--orange);
}

.coverage-index-results small {
	color: var(--muted);
	font-size: 12px;
	white-space: nowrap;
}

.detail-intro {
	display: grid;
	grid-template-columns: 1fr 2fr;
	gap: 40px;
	margin: 0 0 24px;
}

.detail-intro h2,
.detail-intro p {
	margin: 0;
}

.detail-intro p {
	font-size: 16px;
	line-height: 1.55;
	color: var(--muted);
}

.insurance-source {
	margin: 0 0 40px;
	padding: 0 0 36px;
	border-bottom: 1px solid var(--line);
}

.coverage-toolbar {
	margin: 0 0 22px;
}

.coverage-jumps {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 16px;
	margin: 14px 0 0;
}

.coverage-jumps a {
	color: var(--orange);
	font-size: 13px;
	font-weight: 700;
	text-decoration: none;
}

.coverage-groups {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 18px;
}

.coverage-group {
	border: 1px solid var(--line);
	border-radius: 7px;
	padding: 24px 28px;
	background: #fff;
}

.coverage-group h2 {
	margin: 0 0 12px;
	font-size: 18px;
	font-weight: 700;
}

.coverage-group ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.coverage-group li {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 9px 0;
	border-bottom: 1px solid var(--line);
	font-size: 14px;
	line-height: 1.35;
}

.coverage-group li:last-child {
	border-bottom: 0;
}

.coverage-group li.is-hidden {
	display: none;
}

.coverage-group.is-hidden {
	display: none;
}

.coverage-group .button {
	flex: none;
	min-height: 34px;
	padding: 0 12px;
	font-size: 11px;
}

.coverage-empty {
	margin: 18px 0 0;
	color: var(--muted);
}

@media (max-width: 1100px) {

	.insurance-mega {
		position: static;
		display: block;
		width: auto;
		margin: 0 0 8px;
		padding: 0 0 12px 14px;
		border: 0;
		border-radius: 0;
		box-shadow: none;
	}

	.menu-item-insurance:hover > .insurance-mega,
	.menu-item-insurance:focus-within > .insurance-mega {
		display: block;
	}

	.insurance-mega-cols {
		grid-template-columns: 1fr;
		gap: 16px;
	}

	.insurance-mega-all {
		margin-top: 8px;
		padding-top: 8px;
	}
}

@media (max-width: 700px) {

	.detail-intro,
	.coverage-groups {
		grid-template-columns: 1fr;
	}

	.coverage-group li {
		flex-wrap: wrap;
	}
}

/* ========================================================== quote shell ===
 * The 2026 spec quote experience — page-quote-shell.php's two-panel layout, styled
 * after the client-supplied prototype (Insurhaus-Individual-Quote-Forms-Code): navy
 * sidebar with a live step tracker, light form area, two-up field grid, orange
 * Continue. Everything namespaced under .quote-shell; the .prose GF rules elsewhere
 * in this file do not apply here (no .prose ancestor), so the form is styled from
 * scratch. */
/* Inside the normal site chrome now (header above, footer below) — the shell is a
   full-width band rather than the whole viewport, so no body takeover and no 100vh. */
.quote-shell {
	display: grid;
	grid-template-columns: 380px minmax(0, 1fr);
	min-height: 640px;
	background: #eef2f7;
	font-family: -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
}

/* ------------------------------------------------------------- sidebar --- */
.quote-side {
	background: var(--navy);
	color: #fff;
	padding: 0 34px 34px;
}

.quote-back {
	display: block;
	margin: 0 -34px 34px;
	padding: 18px 34px;
	background: rgba(255, 255, 255, .06);
	color: #fff;
	font-size: 14px;
	font-weight: 600;
	text-decoration: none;
}

.quote-back:hover {
	color: #fff;
	background: rgba(255, 255, 255, .12);
}

.quote-time {
	margin: 26px 0 10px;
	color: var(--orange);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .09em;
	text-transform: uppercase;
}

.quote-title {
	margin: 0 0 14px;
	color: #fff;
	font-size: 34px;
	font-weight: 400;
	line-height: 1.15;
	text-transform: none;
}

.quote-desc {
	margin: 0 0 34px;
	color: #b9c6da;
	font-size: 15px;
	line-height: 1.55;
}

.quote-steps {
	margin: 0 0 34px;
	padding: 0;
	list-style: none;
}

.quote-steps li {
	display: flex;
	align-items: flex-start;
	gap: 14px;
	margin: 0 0 24px;
}

.quote-step-dot {
	flex: none;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	border: 2px solid #3c5170;
	border-radius: 50%;
	color: #b9c6da;
	font-size: 14px;
	font-weight: 700;
}

.quote-steps li.is-current .quote-step-dot {
	background: var(--orange);
	border-color: var(--orange);
	color: #fff;
}

.quote-steps li.is-done .quote-step-dot {
	border-color: var(--orange);
	color: var(--orange);
}

.quote-step-text strong {
	display: block;
	color: #b9c6da;
	font-size: 15px;
}

.quote-steps li.is-current .quote-step-text strong,
.quote-steps li.is-done .quote-step-text strong {
	color: #fff;
}

.quote-step-text em {
	display: block;
	margin-top: 2px;
	color: #7c8ca4;
	font-size: 12.5px;
	font-style: normal;
}

.quote-note {
	margin: 0;
	padding-top: 22px;
	border-top: 1px solid rgba(255, 255, 255, .14);
	color: #b9c6da;
	font-size: 13px;
	line-height: 1.5;
}

/* ----------------------------------------------------------- form area --- */
.quote-main {
	padding: 46px 56px 64px;
}

.quote-form-area {
	max-width: 980px;
	margin: 0 auto;
}

.quote-eyebrow {
	margin: 0 0 4px;
	color: var(--orange);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .09em;
	text-transform: uppercase;
}

/* The section field at the top of each GF page is the spec's step title. */
.quote-shell .gsection {
	margin: 0 0 26px;
	padding: 0;
	border: 0;
}

.quote-shell .gsection .gsection_title {
	margin: 0 0 4px;
	color: var(--ink);
	font-size: 38px;
	font-weight: 400;
	text-transform: none;
}

.quote-shell .gsection .gsection_description {
	margin: 0;
	color: #7a8698;
	font-size: 15px;
}

/* Two-up field grid, like the prototype. Gravity Forms already lays .gform_fields
   out as its own 12-column grid and pins every field to 1/-1 — its stylesheet loads
   after this one, so rather than fight the grid itself, fields ride it: half-width
   fields span 6 of GF's 12 tracks, big things span all of them. The !importants are
   the tiebreaker against GF's own field rule. */
.quote-shell .gform_fields {
	gap: 28px 40px !important;
	margin: 0;
	padding: 0;
	list-style: none;
}

.quote-shell .gform_fields > li {
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Column spans come from GF itself: the builder sets layoutGridColumnSpan = 6 on
   half-width field kinds, which GF renders as its own gfield--width-half class
   (grid-column: span 6 in basic.min.css). No fighting its stylesheet. */

/* A modest bottom pad on every real field. Sized twice by the client: 22px felt
   right while the hairline separators sat beneath it, "a little too much" once
   they were gone. */
.quote-shell .gfield:not(.gsection):not(.gfield--type-page):not(.gform_hidden):not(.gform_validation_container) {
	padding-bottom: 8px;
}

.quote-shell .gfield_label {
	display: block;
	margin: 0 0 8px;
	color: var(--ink);
	font-size: 15px;
	font-weight: 700;
}

/* One orange asterisk per required field, whatever GF printed. Modern markup nests
   "(Required)" spans that BOTH carry .gfield_required; legacy markup prints a
   literal "*". font-size: 0 swallows either text, the inner modern span is hidden
   outright (its own ::after would double the mark), and exactly one ::after draws
   the asterisk on the outer span. */
.quote-shell .gform_wrapper .gfield_label .gfield_required_text {
	display: none;
}

.quote-shell span.gfield_required {
	padding-left: 3px;
	color: var(--orange);
	font-weight: 700;
	font-size: 0;
}

/* Direct child of the label only — both markups nest a second .gfield_required span
   inside (gfield_required_text on modern forms, gfield_required_asterisk on legacy
   ones), and a mark on each level printed ** . */
.quote-shell .gfield_label > span.gfield_required::after {
	content: "*";
	font-size: 15px;
}

/* The prototype tags optional fields instead of decorating required ones twice. */
.quote-shell .gfield:not(.gfield_contains_required):not(.gsection) .gfield_label::after {
	content: "OPTIONAL";
	margin-left: 8px;
	color: #98a3b3;
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: .08em;
}

/* Except where the client asked for a question that is neither required nor
   labelled as optional ("palikti optional, bet nerašyti OPTIONAL") — the form
   carries no-optional-tag on that field. Same :not() chain as the rule above so
   it out-specifies it rather than relying on order. */
.quote-shell .gfield.no-optional-tag:not(.gfield_contains_required):not(.gsection) .gfield_label::after {
	content: none;
}

.quote-shell input[type="text"],
.quote-shell input[type="email"],
.quote-shell input[type="tel"],
.quote-shell input[type="number"],
.quote-shell select,
.quote-shell textarea {
	width: 100%;
	padding: 10px 14px;
	background: #fff;
	border: 1px solid #d5dce6;
	border-radius: 8px;
	box-shadow: 0 1px 2px rgba(11, 41, 83, .05);
	color: var(--ink);
	font: inherit;
	font-size: 15px;
	box-sizing: border-box;
}

.quote-shell input:focus,
.quote-shell select:focus,
.quote-shell textarea:focus {
	border-color: var(--orange);
	outline: 2px solid rgba(185, 71, 35, .18);
}

/* Selects lose the browser's native chrome (Safari's especially) for the same white
   rounded box as every other field, with a drawn navy chevron. */
.quote-shell select {
	/* height: auto beats the 2015 stylesheet's fixed 30px select height, which left
	   the State dropdown squatter than every other field. */
	height: auto;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	padding-right: 52px;
	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%230b2953' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 20px center;
	background-size: 14px;
}

/* GF's datepicker popup sizes itself in rem, and the 2015 theme's 10px root font
   shrinks it to ~8px grey-on-white. Appended to <body>, so it cannot be scoped to
   .quote-shell — sized here directly for every front-end form that opens it. */
.gform-theme-datepicker.ui-datepicker {
	font-size: 14px;
}

.gform-theme-datepicker.ui-datepicker .ui-datepicker-title,
.gform-theme-datepicker.ui-datepicker .ui-datepicker-title select,
.gform-theme-datepicker.ui-datepicker .ui-datepicker-month,
.gform-theme-datepicker.ui-datepicker .ui-datepicker-year {
	font-size: 14px !important;
	color: var(--ink) !important;
}

.gform-theme-datepicker.ui-datepicker th,
.gform-theme-datepicker.ui-datepicker th span {
	font-size: 12.5px !important;
	color: var(--ink) !important;
}

.gform-theme-datepicker.ui-datepicker td a,
.gform-theme-datepicker.ui-datepicker td span {
	font-size: 14px !important;
	color: var(--ink) !important;
}

/* Legacy-markup forms (Get Certificate, Change request and the other pre-2026 forms
   now wearing this shell) carry the css-ready-selector plugin's half-width li rule
   (48% !important) — neutralized here the same way the .prose forms neutralize it,
   so their fields fill the shell's column. */
/* Six classes + two types: the plugin's own !important half-width rule weighs in at
   (0,5,2) and loads after this sheet, so a tie loses. */
.quote-shell .gform_wrapper.gform_legacy_markup_wrapper ul.top_label li.gfield.gf_left_half,
.quote-shell .gform_wrapper.gform_legacy_markup_wrapper ul.top_label li.gfield.gf_right_half {
	width: 100% !important;
	margin: 0;
	/* bottom padding survives: this out-specifies the field-pad rule below, and
	   padding: 0 here was erasing the gap on exactly these fields (the fax number
	   sat flush against the captcha's label). Matches the field pad. */
	padding: 0 0 8px;
	float: none !important;
}

.quote-shell li.gfield div:not(.ginput_container_date) input:not([type="radio"]):not([type="checkbox"]),
.quote-shell li.gfield div select {
	width: 100%;
}

.quote-shell textarea {
	min-height: 130px;
}

/* Date fields: full-width input like every other field, icon riding inside the row. */
.quote-shell .ginput_container_date {
	display: flex;
	align-items: center;
	gap: 10px;
}

.quote-shell .ginput_container_date input {
	flex: 1;
	width: auto;
}

/* GF's legacy formsmain.css sizes inputs through a six-:not() selector that
   out-ranks any reasonable rule — mirrored here verbatim with .quote-shell in
   front, which is the one clean way to beat it. Without this the certificate
   form's fields sat at 2015's 5px padding and 16px font beside the spec forms'. */
.quote-shell .gform_legacy_markup_wrapper input:not([type='radio']):not([type='checkbox']):not([type='submit']):not([type='button']):not([type='image']):not([type='file']),
.quote-shell .gform_wrapper.gform_legacy_markup_wrapper select,
.quote-shell .gform_wrapper.gform_legacy_markup_wrapper textarea {
	padding: 10px 14px;
	font-size: 15px;
	line-height: 1.3;
	height: auto;
}

/* The modern markup has the same fight against GF's theme.min.css
   (.gform_wrapper.gravity-theme input[type=…] pads 8px) and basic.min.css
   (min-height 32px, line-height 2) — mirrored the same way so both markup
   generations land on the identical ~42px field. */
.quote-shell .gform_wrapper.gravity-theme input:not([type='radio']):not([type='checkbox']):not([type='submit']):not([type='button']):not([type='image']):not([type='file']),
.quote-shell .gform_wrapper.gravity-theme select,
.quote-shell .gform_wrapper.gravity-theme textarea {
	padding: 10px 14px;
	font-size: 15px;
	line-height: 1.3;
	min-height: 0;
	height: auto;
}

/* The chevron clearance must survive the two sizing mirrors above (their padding
   shorthand out-specifies the plain .quote-shell select rule). */
.quote-shell .gform_wrapper.gravity-theme select,
.quote-shell .gform_wrapper.gform_legacy_markup_wrapper select {
	padding-right: 52px;
}

/* The gsection's breathing room must out-rank the li margin reset above it. */
.quote-shell .gform_fields > .gsection,
.quote-shell .gform_fields > li.gsection {
	margin-bottom: 26px !important;
}

.quote-shell .gfield_description {
	margin: 7px 0 0;
	color: #7a8698;
	font-size: 13px;
	line-height: 1.5;
}

/* Radios and checkboxes as simple stacked choices. */
.quote-shell .gfield_radio,
.quote-shell .gfield_checkbox {
	margin: 0;
	padding: 0;
	list-style: none;
}

.quote-shell .gfield_radio li,
.quote-shell .gfield_checkbox li {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0 0 10px;
}

.quote-shell .gfield_radio input,
.quote-shell .gfield_checkbox input {
	width: 18px;
	height: 18px;
	accent-color: var(--orange);
}

.quote-shell .gfield_radio label,
.quote-shell .gfield_checkbox label {
	margin: 0;
	color: var(--ink);
	font-size: 15px;
	font-weight: 500;
}

/* List fields (the drivers / vehicles tables). */
.quote-shell table.gfield_list {
	width: 100%;
	border-collapse: collapse;
	background: #fff;
	border: 1px solid #d5dce6;
	border-radius: 8px;
}

.quote-shell table.gfield_list th {
	padding: 10px 10px 8px;
	background: #f4f7fb;
	color: var(--ink);
	font-size: 12.5px;
	text-align: left;
}

.quote-shell table.gfield_list td {
	padding: 6px;
}

.quote-shell table.gfield_list td input {
	padding: 9px 10px;
	border-radius: 6px;
	box-shadow: none;
}

/* The Yes/No dropdown columns (insurhaus_refresh_yesno_list_columns()): the
   form-wide select mirror's 52px chevron clearance is a lot in a narrow list
   cell, so both shrink to the cell's scale. Specificity over that mirror. */
.quote-shell .gform_wrapper.gravity-theme .gfield_list_cell select {
	padding: 9px 34px 9px 10px;
	border-radius: 6px;
	background-position: right 12px center;
	box-shadow: none;
}

/* Add / remove row: GF ships 16px sprite buttons that all but disappear ("nerodo
   aiškiai", per client — a big boxed plus to add and a boxed minus to remove).
   basic.min.css sizes them via .gform_wrapper.gravity-theme .gfield_list_icons
   button, so the same selector shape with the shell prefix, like the input
   mirrors above. The sprite goes, the box gets a drawn glyph; the button's own
   "Add"/"Remove" text is font-size:0 so the aria-label still reads right. */
.quote-shell .gform_wrapper.gravity-theme .gfield_list_icons {
	flex: 0 0 auto;
	width: auto;
	align-items: center;
	gap: 8px;
	/* Breathing room between the last input column and the plus. */
	padding-left: 10px;
}

.quote-shell .gform_wrapper.gravity-theme .gfield_list_icons button.add_list_item,
.quote-shell .gform_wrapper.gravity-theme .gfield_list_icons button.delete_list_item {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	margin: 0;
	padding: 0;
	background: #fff none;
	background-image: none;
	border: 1px solid #c3cede;
	border-radius: 8px;
	color: var(--ink);
	/* !important against style.css's own `button { font-size: 12px !important }`
	   (2015), which otherwise keeps the raw "Add"/"Remove" text visible beside
	   the glyph — both important, higher specificity wins. */
	font-size: 0 !important;
	line-height: 1;
	cursor: pointer;
}

.quote-shell .gform_wrapper.gravity-theme .gfield_list_icons button.add_list_item::before {
	content: "+";
	font-size: 24px;
	font-weight: 600;
}

.quote-shell .gform_wrapper.gravity-theme .gfield_list_icons button.delete_list_item::before {
	content: "\2212"; /* a real minus, wider than a hyphen */
	font-size: 24px;
	font-weight: 600;
}

.quote-shell .gform_wrapper.gravity-theme .gfield_list_icons button.add_list_item:hover,
.quote-shell .gform_wrapper.gravity-theme .gfield_list_icons button.delete_list_item:hover {
	border-color: var(--orange);
	color: var(--orange);
}

/* Composite fields (address): sub-inputs stack full width with their sub-labels,
   instead of GF's percentage two-up that left State floating tall beside City. */
.quote-shell .ginput_complex span {
	display: block;
	width: 100% !important;
	margin: 0 0 14px;
	padding: 0;
}

.quote-shell .ginput_complex span:last-child {
	margin-bottom: 0;
}

.quote-shell .ginput_complex label {
	display: block;
	margin: 5px 0 0;
	font-size: 12.5px;
	color: #7a8698;
}

/* Consent. */
.quote-shell .gfield--type-consent .gfield_consent_label {
	color: var(--ink);
	font-size: 14.5px;
	font-weight: 600;
}

/* Footer: Back left, Continue / Submit right, above a rule — like the prototype. */
.quote-shell .gform_page_footer,
.quote-shell .gform_footer {
	grid-column: 1 / -1;
	display: flex;
	justify-content: flex-end;
	align-items: center;
	gap: 14px;
	margin: 14px 0 0;
	padding: 26px 0 0;
	border-top: 1px solid #dbe2ec;
}

.quote-shell .gform_page_footer .button,
.quote-shell .gform_footer .button,
.quote-shell input[type="submit"] {
	min-height: 46px;
	padding: 0 24px;
	background: var(--orange);
	border: 0;
	border-radius: 8px;
	color: #fff;
	font-size: 15px;
	font-weight: 700;
	cursor: pointer;
}

/* Back as an outlined secondary against the filled Continue, per client request —
   the borderless version read as a disabled input. */
.quote-shell .gform_page_footer .gform_previous_button {
	margin-right: auto;
	background: transparent;
	border: 1px solid #c3cede;
	color: var(--ink);
	font-weight: 700;
}

.quote-shell .gform_page_footer .gform_previous_button:hover {
	border-color: var(--ink);
	background: #fff;
}

/* GF chrome that the shell replaces. */
.quote-shell .gf_progressbar_wrapper,
.quote-shell .gform_heading {
	display: none;
}

/* Validation. */
.quote-shell .gfield_error input,
.quote-shell .gfield_error select,
.quote-shell .gfield_error textarea {
	border-color: #c0392b;
}

.quote-shell .validation_message {
	margin: 6px 0 0;
	color: #c0392b;
	font-size: 13px;
}

.quote-shell .gform_validation_errors {
	grid-column: 1 / -1;
	padding: 14px 18px;
	background: #fdf1ef;
	border: 1px solid #e5b6ad;
	border-radius: 8px;
	color: #8c2f21;
}

/* Confirmation. */
.quote-shell .gform_confirmation_message {
	padding: 46px;
	background: #fff;
	border: 1px solid #d5dce6;
	border-radius: 12px;
	color: var(--ink);
	font-size: 17px;
	line-height: 1.6;
}

@media (max-width: 900px) {

	.quote-shell {
		grid-template-columns: 1fr;
	}

	.quote-side {
		padding-bottom: 26px;
	}

	.quote-steps li {
		margin-bottom: 14px;
	}

	.quote-main {
		padding: 20px 20px 48px;
	}

	.quote-shell .gform_fields > li.gfield {
		grid-column: 1 / -1 !important;
	}

	.quote-shell .gform_fields {
		gap: 20px !important;
	}
}