/* ==========================================================================
   C&S Moving — Components
   --------------------------------------------------------------------------
   Reusable UI built on the token foundation. Each component is styled so its
   native WordPress block looks identical to the static design AND stays
   editable in Gutenberg (click to retype, change link in the normal UI).

   Component 1: Button
   The native Button block renders:
     <div class="wp-block-button [style]"><a class="wp-block-button__link">…</a></div>
   The clickable element is the inner <a>, so all button styling targets it.
   A plain button (no style chosen) already looks like the amber CTA, so adding
   a button "just works"; the C&S Outline style is one click away.
   ========================================================================== */

/* ---- base: every button block link inherits the .btn look (amber default) - */
.wp-block-button__link.wp-element-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	font-family: var(--cs-font-body);
	cursor: pointer;
	border-radius: var(--cs-radius-sm);
	transition: background .15s, color .15s, transform .18s, box-shadow .18s;
	text-decoration: none;

	/* amber variant (default) */
	background: var(--cs-amber);
	color: var(--cs-ink);
	border: none;
	font-weight: 700;
	padding: 15px 28px;
	font-size: 16px;
}

.wp-block-button__link.wp-element-button:hover {
	background: var(--cs-amber-dark);
	color: var(--cs-ink);
	transform: translateY(-1px);
}

/* ---- C&S Outline style ------------------------------------------------- */
.wp-block-button.is-style-cs-outline .wp-block-button__link {
	background: var(--cs-white);
	color: var(--cs-green);
	border: 1.5px solid var(--cs-green);
	font-weight: 600;
	padding: 14px 26px;
	font-size: 15px;
}

.wp-block-button.is-style-cs-outline .wp-block-button__link.wp-element-button:hover {
	background: var(--cs-green);
	color: var(--cs-cream);
}

/* ---- Small style (nav-height button) ---------------------------------- */
.wp-block-button.is-style-cs-small .wp-block-button__link {
	padding: 11px 20px;
	font-size: 14.5px;
}

/* ---- C&S Text Link style: the amber "See everything we offer →" link ----
   Replaces the old .linkghost.cs-u78 markup so the text and URL are editable
   in the Button block. Type the arrow as part of the text. */
.wp-block-button.is-style-cs-link .wp-block-button__link {
	background: none;
	border: none;
	padding: 8px;
	font-size: 15px;
	font-weight: 600;
	color: var(--cs-amber);
}
.wp-block-button.is-style-cs-link .wp-block-button__link.wp-element-button:hover {
	background: none;
	color: var(--cs-amber-dark);
	transform: none;
}

/* ---- Star add-ons (Additional CSS class "has-star") --------------------
   The star is drawn by CSS so it survives editing: the Button block can't hold
   an SVG, and count-up.js rewrites the stat heading's text on scroll. */
.wp-block-button.has-star .wp-block-button__link::before,
.cs-stat-num.has-star::after {
	content: "";
	display: inline-block;
	flex-shrink: 0;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23F5A623'%3E%3Cpolygon points='12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2'/%3E%3C/svg%3E") no-repeat center / contain;
}
.wp-block-button.has-star .wp-block-button__link::before { width: 17px; height: 17px; }
.cs-stat-num.has-star::after { width: 22px; height: 22px; margin-left: 6px; vertical-align: baseline; }

/* ---- "Leave a Review" button row (.cs-u128 on the Buttons block) -------- */
.wp-block-buttons.cs-u128 { justify-content: center; }
.wp-block-buttons.cs-u128 .wp-block-button__link { padding: 14px 46px; }
@media (max-width: 640px) {
	.wp-block-buttons.cs-u128 .wp-block-button { width: 100%; max-width: 340px; }
	.wp-block-buttons.cs-u128 .wp-block-button__link { width: 100%; }
}

/* ---- Button rows: reuse the design's flex + mobile-stacking behaviour --- */
.wp-block-buttons.hero-btns,
.wp-block-buttons.hd-btns {
	display: flex;
	gap: 12px;
	flex-wrap: wrap;
}

@media (max-width: 640px) {
	.wp-block-buttons.hero-btns,
	.wp-block-buttons.hd-btns {
		flex-direction: column;
		align-items: stretch;
		width: 100%;
	}
	.wp-block-buttons.hero-btns .wp-block-button,
	.wp-block-buttons.hd-btns .wp-block-button,
	.wp-block-buttons.hero-btns .wp-block-button__link,
	.wp-block-buttons.hd-btns .wp-block-button__link {
		width: 100%;
	}
}

/* ==========================================================================
   Component 2: Section header
   --------------------------------------------------------------------------
   The stack that opens most sections: script eyebrow + heading + subhead.
   Clean semantic classes (not the arbitrary cs-uNNN ones) so the component is
   reusable and token-driven. On the dark CTA band (.inq-left) the title and
   subhead switch to cream — see the placement fixes further down.

   Usage in a pattern:
     group.cs-section-head  (add .is-centered to center it)
       paragraph.cs-eyebrow    "what we do"
       heading  .cs-section-title
       paragraph.cs-section-sub
   ========================================================================== */

.cs-section-head {
	max-width: 640px;
	margin: 0 0 44px;
}
.cs-section-head.is-centered {
	text-align: center;
	margin-left: auto;
	margin-right: auto;
}

.cs-eyebrow {
	font-family: var(--cs-font-script);
	font-weight: 700;
	font-size: 30px;
	line-height: 30px;
	color: var(--cs-amber);
	margin: 0 0 6px;
}

.cs-section-title {
	font-family: var(--cs-font-display);
	font-weight: 700;
	font-size: var(--cs-fs-h2);      /* 40px */
	line-height: 46px;
	color: var(--cs-green);
	margin: 0 0 16px;
}

.cs-section-sub {
	font-size: 17px;
	line-height: 27px;
	color: var(--cs-body);
	margin: 0;
}

/* ==========================================================================
   Component 3: Service card
   --------------------------------------------------------------------------
   Icon (locked), title, description, and link — the last three editable.
   The whole card stays clickable via a stretched link over the card face,
   so behaviour matches the original single-<a> card exactly. Light default;
   add .is-dark for the accent card.
   ========================================================================== */

.cs-card {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 14px;
	padding: 28px 24px;
	text-align: left;
	background: var(--cs-white);
	border: 1px solid var(--cs-line);
	border-radius: var(--cs-radius);
	cursor: pointer;
	transition: transform .18s, box-shadow .18s, border-color .18s;
}
.cs-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 18px 36px rgba(26, 75, 46, .1);
	border-color: var(--cs-line-soft);
}

.cs-card.is-dark {
	background: var(--cs-green);
	border-color: var(--cs-green);
}
.cs-card.is-dark:hover {
	box-shadow: 0 18px 36px rgba(26, 75, 46, .22);
	border-color: var(--cs-green);
}

.cs-card-icon {
	width: 48px;
	height: 48px;
	border-radius: 12px;
	background: var(--cs-mint);
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--cs-green);
}
.cs-card.is-dark .cs-card-icon {
	background: var(--cs-amber-18);
	color: var(--cs-amber);
}

.cs-card-title {
	font-family: var(--cs-font-display);
	font-weight: 700;
	font-size: 21px;
	color: var(--cs-green);
	margin: 0;
}
.cs-card.is-dark .cs-card-title { color: var(--cs-cream); }

.cs-card-text {
	font-size: 14.5px;
	line-height: 23px;
	color: var(--cs-muted);
	flex: 1;
	margin: 0;
}
.cs-card.is-dark .cs-card-text { color: var(--cs-cream-80); }

.cs-card-link {
	font-size: 14px;
	font-weight: 600;
	color: var(--cs-amber);
	margin: 0;
}
.cs-card-link a { color: inherit; text-decoration: none; }

/* Stretched link: the whole card becomes clickable via the link. */
.cs-card-link a::after {
	content: "";
	position: absolute;
	inset: 0;
}
/* ...but not in the editor, so title/text stay clickable to edit. */
.editor-styles-wrapper .cs-card-link a::after { content: none; }

/* ==========================================================================
   Component 4: Stat  (number + label)
   ========================================================================== */
.cs-stat {
	background: var(--cs-white);
	border: 1px solid var(--cs-line-green);
	border-radius: var(--cs-radius);
	padding: 30px 20px;
	text-align: center;
}
.cs-stat-num {
	font-family: var(--cs-font-display);
	font-weight: 800;
	font-size: 48px;
	line-height: 1;
	color: var(--cs-green);
	margin: 0;
}
.cs-stat-label {
	font-size: 13.5px;
	letter-spacing: .05em;
	text-transform: uppercase;
	color: var(--cs-muted);
	font-weight: 600;
	margin: 10px 0 0;
}

/* ==========================================================================
   Component 5: Checklist row  (check icon + text)
   ========================================================================== */
.cs-check-row { display: flex; align-items: flex-start; gap: 11px; }
.cs-check-ico { margin-top: 1px; flex-shrink: 0; }
.cs-check-text { font-size: 15.5px; color: var(--cs-ink); margin: 0; }

/* ==========================================================================
   Component 6: Trust badge  (icon + title + subtitle)
   ========================================================================== */
.cs-trust-item { display: flex; align-items: center; gap: 14px; justify-content: center; }
.cs-trust-title { font-weight: 700; font-size: 15px; color: var(--cs-ink); margin: 0; }
.cs-trust-sub { font-size: 13px; color: var(--cs-muted); margin: 0; }

/* ==========================================================================
   Component 7: Split  (image + text panel)
   ========================================================================== */
.cs-split {
	display: grid;
	grid-template-columns: 0.95fr 1.05fr;
	gap: 56px;
	align-items: center;
	background: var(--cs-white);
	border: 1px solid var(--cs-line);
	border-radius: 20px;
	padding: 44px;
}
@media (max-width: 820px) {
	.cs-split { grid-template-columns: 1fr; gap: 32px; }
}

/* checklist stack + split image wrapper */
.cs-check-list { display: flex; flex-direction: column; gap: 12px; margin-bottom: 26px; }
.cs-split-img-wrap { margin: 0; }
.cs-split-img-wrap img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 16px; display: block; }

/* ==========================================================================
   Homepage placement fixes — scoped overrides so components match the design
   in their specific context (hero, split panel, dark CTA).
   ========================================================================== */

/* Hero eyebrow is green + smaller than the amber section eyebrows. */
.cs-u183 .cs-eyebrow {
	color: var(--cs-green-mid);
	font-size: 18px;
	line-height: 18px;
	letter-spacing: 0.04em;
	margin-bottom: 14px;
}

/* Split-panel heading is a step smaller than a standard section title. */
.cs-split .cs-section-title {
	font-size: 34px;
	line-height: 40px;
}

/* Service-area subhead needs breathing room before the county columns
   (restores the original 28px gap lost when swapping to cs-section-sub). */
.sa-text .cs-section-sub { margin-bottom: 28px; }

/* CTA on dark green: make heading + subhead reliably cream at the theme
   level so pages don't need to carry the extra "cream" class. The 28px gap
   before the "Prefer to call" divider restores the spacing lost when
   swapping to cs-section-sub. Site-wide. */
.inq-left .cs-section-title,
.inq-left h2.wp-block-heading { color: var(--cs-cream); }
.inq-left .cs-section-sub { color: var(--cs-cream-82); margin-bottom: 28px; }

/* Specialty section: let the paragraph fill the card width (remove the
   readability cap) so it stretches to the box edge-to-edge. */
.cs-u228 .cs-u231 { max-width: none; }

/* ==========================================================================
   Move-page section backgrounds (Local etc.)
   Preparing section on white; panel + still-questions band in warm grey/beige.
   ========================================================================== */

/* Preparing section (move pages only): full-width white background.
   Scoped by .cs-u81 so the Resources tips section (cs-u179) stays cream. */
.cs-u60:has(.cs-u81) {
	background: var(--cs-white);
	max-width: none !important;
}

/* The panel inside it: warm grey/beige so it stands out from the white. */
.cs-u5 { background: var(--cs-beige); }

/* Still-have-questions band: grey/beige instead of green, with dark text. */
.cs-u82.wp-block-group { background: var(--cs-beige); max-width: none !important; }
/* Keep the green band, but contain its width so the beige shows around it. */
.cs-u62 { max-width: 1200px; margin-left: auto; margin-right: auto; }
/* Center the "Visit Our FAQ" button. */
.cs-u62 .wp-block-buttons { justify-content: center; }

/* ==========================================================================
   Header + nav + move-page split backgrounds
   ========================================================================== */

/* Sticky header: WordPress wraps template parts in a div, which confines the
   sticky header to that short wrapper. display:contents removes the wrapper
   from layout so the header sticks to the viewport as the page scrolls. */
.wp-block-template-part { display: contents; }

/* Active nav item: current page gets the same highlight as hover. */
.navlink.active { background: rgba(255, 255, 255, .08); }

/* Move-page "where we go / how we help" split: cream section to match the
   rest of the site. The In-House and Senior card grids inside it keep a
   border (handled further down). (Scoped to cs-u95 so About's split is
   unaffected.) */
.cs-u48:has(.cs-u95) { background: var(--cs-cream); max-width: none !important; }
.cs-u48:has(.cs-u95) .cs-u95 { max-width: 1200px; margin-left: auto; margin-right: auto; }

/* Resources page: move-day steps section on white (distinct from the cream
   damage-note above it). Tips section stays cream (default). */
.cs-u175.wp-block-group { background: var(--cs-white); max-width: none !important; }
.cs-u175 .steps-grid { max-width: 1200px; margin-left: auto; margin-right: auto; }

/* More space under the "Still have questions about damage?" box before the
   move-day section (the section only had 16px bottom padding). */
.cs-u169 { padding-bottom: 64px; }

/* ==========================================================================
   Get a Quote — side-by-side: form (left) + what happens next (right)
   ========================================================================== */
.cs-quote-main { max-width: 1120px; margin: 0 auto; padding: 64px 24px 40px; }
.cs-quote-grid {
	display: grid;
	grid-template-columns: 1.25fr 0.85fr;
	gap: 48px;
	align-items: start;
}
@media (max-width: 860px) {
	.cs-quote-grid { grid-template-columns: 1fr; gap: 36px; }
}
.cs-quote-info { padding-top: 6px; }
.cs-quote-info .cs-u217 { font-size: 30px; line-height: 36px; margin: 0 0 20px; }
.cs-quote-steps { display: flex; flex-direction: column; gap: 18px; }
.cs-qstep { display: flex; gap: 14px; align-items: flex-start; }
.cs-qstep-num {
	width: 40px; height: 40px; flex-shrink: 0;
	border-radius: 50%; background: var(--cs-green); color: var(--cs-amber);
	font-family: var(--cs-font-display); font-weight: 800; font-size: 17px;
	display: flex; align-items: center; justify-content: center;
}
.cs-qstep-text { font-size: 15px; line-height: 23px; color: var(--cs-body); margin: 6px 0 0; }

/* Legal pages (Privacy, Terms) — readable prose. */
.cs-legal-h { font-family: var(--cs-font-display); font-weight: 700; font-size: 24px; line-height: 30px; color: var(--cs-green); margin: 40px 0 14px; }
.cs-legal-p { font-size: 16px; line-height: 27px; color: var(--cs-body); margin: 0 0 16px; }
.cs-legal-p a { color: var(--cs-green-mid); }
/* 404 template: narrow centred message. */
.cs-404 { max-width: 800px; margin: 0 auto; padding: 96px 24px; text-align: center; }
.cs-404 .wp-block-buttons { justify-content: center; margin-top: 24px; }
/* Footer fine-print links */
.foot-fine a { color: inherit; text-decoration: none; }
.foot-fine a:hover { text-decoration: underline; }
/* Combined legal page: part headings + divider */
.cs-legal-part { font-family: var(--cs-font-display); font-weight: 700; font-size: 32px; line-height: 38px; color: var(--cs-green); margin: 8px 0 20px; }
.cs-legal-sep { border: none; border-top: 1px solid var(--cs-line); max-width: none; margin: 48px 0; opacity: 1; }

/* ==========================================================================
   Core Accordion → C&S FAQ
   Gives core's accordion markup the look of the original static-site FAQ
   (.faq-item / .faq-q / .faq-ico / .faq-a in base.css).
   ========================================================================== */

.wp-block-accordion {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.wp-block-accordion-item {
	background: var(--cs-white);
	border: 1px solid var(--cs-line);
	border-radius: 12px;
	overflow: hidden;
}

/* core's flow layout adds its own margins between items — zero them so the
   flex gap above is the only spacing that applies */
.wp-block-accordion > .wp-block-accordion-item {
	margin-block-start: 0;
	margin-block-end: 0;
}

/* h3 wrapper carries no styling of its own */
.wp-block-accordion-heading {
	margin: 0;
	font-family: inherit;
	font-size: inherit;
	font-weight: inherit;
}

/* the button — matches .faq-q */
.wp-block-accordion-heading__toggle {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	background: none;
	border: none;
	cursor: pointer;
	text-align: left;
	padding: 22px 24px;
	font-family: var(--cs-font-body);
}

/* the question text — matches .faq-q .q */
.wp-block-accordion-heading__toggle-title {
	font-size: 17px;
	font-weight: 600;
	color: var(--cs-ink);
}

/* the icon circle — matches .faq-ico */
.wp-block-accordion-heading__toggle-icon {
	width: 30px;
	height: 30px;
	border-radius: 50%;
	background: var(--cs-mint);
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	color: var(--cs-green-mid);
	font-size: 0;
}

/* core rotates the + into an × on open — cancel it, we're swapping the glyph */
.wp-block-accordion-item.is-open > .wp-block-accordion-heading .wp-block-accordion-heading__toggle-icon,
.wp-block-accordion-heading__toggle[aria-expanded="true"] .wp-block-accordion-heading__toggle-icon {
	transform: none;
	color: var(--cs-amber);
}

.wp-block-accordion-heading__toggle-icon::after {
	content: "+";
	font-size: 20px;
	line-height: 1;
	font-weight: 600;
	transform: none;
}

.wp-block-accordion-item.is-open > .wp-block-accordion-heading .wp-block-accordion-heading__toggle-icon::after,
.wp-block-accordion-heading__toggle[aria-expanded="true"] .wp-block-accordion-heading__toggle-icon::after {
	content: "\2212";
}

/* the answer — matches .faq-a */
.wp-block-accordion-panel {
	padding: 0 24px 24px;
	font-size: 15.5px;
	line-height: 25px;
	color: var(--cs-body);
}

.wp-block-accordion-panel p {
	font-size: inherit;
	line-height: inherit;
	color: inherit;
	margin: 0 0 12px;
}
.wp-block-accordion-panel p:last-child { margin-bottom: 0; }

/* Panel padding only applies when open — otherwise the bottom padding
   reserves space and closed items sit taller than they should. */
.wp-block-accordion-item:not(.is-open) .wp-block-accordion-panel {
	padding-block: 0;
}

/* ==========================================================================
   Trustindex Google reviews — palette + type only.
   Their layout, avatar, order, and truncation are left alone deliberately.

   Two things to know if this ever stops working:
   1. Their stylesheet sets #f4f4f4 !important on
      .ti-widget.ti-goog .ti-review-item > .ti-inner, and it loads after
      ours — so the card rule needs the extra .ti-widget-container class
      to outweigh it, plus !important.
   2. Their JS writes a fixed pixel height on .ti-review-content, so
      line-height must be left alone or the last line gets clipped.
   ========================================================================== */

/* card face */
.ti-widget.ti-goog .ti-widget-container .ti-review-item > .ti-inner {
	background-color: var(--cs-cream) !important;
	border: 1px solid var(--cs-line) !important;
	border-radius: var(--cs-radius) !important;
}

/* type: replace their Poppins with Work Sans throughout */
.ti-widget.ti-goog .ti-widget-container .ti-inner,
.ti-widget.ti-goog .ti-widget-container .ti-inner * {
	font-family: var(--cs-font-body);
}

/* review text — no line-height, see note 2 above */
.ti-widget.ti-goog .ti-widget-container .ti-review-content {
	font-size: 15.5px;
	color: var(--cs-ink);
}

/* reviewer name */
.ti-widget.ti-goog .ti-widget-container .ti-name {
	font-weight: 600;
	font-size: 14.5px;
	color: var(--cs-ink);
}

/* date */
.ti-widget.ti-goog .ti-widget-container .ti-date {
	font-size: 12px;
	color: var(--cs-muted-2);
}

/* read more link */
.ti-widget.ti-goog .ti-widget-container .ti-read-more,
.ti-widget.ti-goog .ti-widget-container .ti-read-more-active {
	font-size: 14px;
	font-weight: 600;
	color: var(--cs-green-mid);
}

/* ============================================================
   FLUENT FORMS
   Maps Fluent Forms markup onto the original .fld2 / .field design.

   TRAP 1: the grid must go on the <fieldset>, not the <form> —
   Fluent Forms wraps all fields in a fieldset, so a grid on the
   form itself only ever has one child and nothing lays out.

   TRAP 2: Fluent Forms' stylesheet loads after the theme's, so
   matching specificity loses the tie. The submit button needs a
   longer selector plus !important. Same fight as Trustindex.
   ============================================================ */

/* ---------- Layout ---------- */

.fluentform form.frm-fluent-form fieldset {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 20px;
  row-gap: 16px;
}

/* Screen-reader legend out of grid flow so it doesn't eat a cell */
.fluentform .ff_screen_reader_title {
  position: absolute;
}

/* Full-width rows. Mostly structural so renaming a field can't break
   the layout — except the contact form's Subject, which has no
   distinguishing structure and must be matched by name. */
.fluentform .ff-name-field-wrapper,
.fluentform .ff-el-group:has(textarea),
.fluentform .ff-el-group:has(input[name="subject"]),
.fluentform .ff_submit_btn_wrapper {
  grid-column: 1 / -1;
}

/* row-gap handles spacing; kill the default margins */
.fluentform form.frm-fluent-form .ff-el-group {
  margin-bottom: 0;
}

/* ---------- Labels ---------- */

.fluentform .ff-el-input--label label {
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 12px;
  font-weight: 700;
}

/* Required asterisk → amber. */
.fluentform .ff-el-input--label.ff-el-is-required label::after,
.fluentform .asterisk-right label::after {
  color: var(--cs-amber) !important;
}

/* ---------- Submit button ---------- */

.fluentform form.frm-fluent-form .ff-btn.ff-btn-submit {
  width: 100%;
  background: var(--cs-amber) !important;
  color: var(--cs-ink) !important;
  border: none;
  border-radius: var(--cs-radius);
  font-family: var(--cs-font-body);
  font-weight: 700;
  padding: 14px 28px;
}

.fluentform form.frm-fluent-form .ff-btn.ff-btn-submit:hover {
  filter: brightness(0.95);
}

/* ---------- Validation errors ---------- */

.fluentform .ff-el-is-error .ff-el-form-control,
.fluentform .ff-el-form-control.has-error {
  border-color: #C2412D;
}

.fluentform .error.text-danger {
  font-family: var(--cs-font-body);
  font-size: 13px;
  color: #C2412D;
  margin-top: 6px;
}

/* ---------- Chrome autofill ---------- */
/* Chrome forces a pale blue background on autofilled inputs.
   An inset shadow is the only reliable way to override it. */

.fluentform .ff-el-form-control:-webkit-autofill,
.fluentform .ff-el-form-control:-webkit-autofill:hover,
.fluentform .ff-el-form-control:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 1000px #fff inset;
  -webkit-text-fill-color: var(--cs-ink);
}

/* ---------- Success card ---------- */
/* Shared by both forms. Checkmark is drawn here rather than in the
   confirmation markup — Fluent Forms' editor strips inline SVG. */

.fluentform .ff-message-success,
.fluentform_wrapper .ff-message-success,
.ff-message-success {
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  box-shadow: none !important;
}

.cs-form-success {
  text-align: center;
  padding: 48px 32px;
}

.cs-form-success__icon {
  width: 64px;
  height: 64px;
  margin: 0 auto 24px;
  border-radius: 50%;
  background: rgba(26, 75, 46, 0.08);
  display: flex;
  align-items: center;
  justify-content: center;
}

.cs-form-success__icon::before {
  content: "\2713";
  font-size: 30px;
  line-height: 1;
  color: var(--cs-green);
}

.cs-form-success__title {
  font-family: var(--cs-font-display);
  font-size: 32px;
  color: var(--cs-green);
  margin: 0 0 12px;
}

.cs-form-success__text {
  font-family: var(--cs-font-body);
  color: var(--cs-ink);
  opacity: 0.75;
  max-width: 42ch;
  margin: 0 auto;
}

/* ---------- Mobile ---------- */

@media (max-width: 640px) {
  .fluentform form.frm-fluent-form fieldset {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   In-House "how we help" — 2×2 card variant
   Keeps the shared .cs-u95 two-column split, but runs the cards two
   across so the stack is half as tall and the left column isn't
   stranded above empty space. Scoped by .is-grid so the other
   move-type pages are unaffected.
   ========================================================================== */

.cs-u95.is-grid {
	align-items: center;
}

.cs-u95.is-grid .cs-u148 {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
}

@media (max-width: 860px) {
	.cs-u95.is-grid .cs-u148 { grid-template-columns: 1fr; }
}
/* ---- Native-block card conversion support ----
   Group blocks add is-layout-flow margins between children, and native
   <p> brings its own margins. Both fight the card design, so neutralize
   them inside .cs-u85. Harmless while the cards are still Custom HTML. */

.cs-u85 > * {
	margin-block-start: 0;
	margin-block-end: 0;
}

.cs-u85 .cs-card-text-wrap {
	flex: 1;
	min-width: 0;
}

.cs-u85 .cs-card-text-wrap > * {
	margin-block-start: 0;
	margin-block-end: 0;
}

.cs-u85 p.cs-u11 {
	margin: 0 0 8px;
	line-height: 1.35;
}

.cs-u85 p.cs-u12 {
	margin: 0;
}
/* ---- Numbered step rows: same native-block conversion support ----
   .cs-u57 is the row, .cs-u58 the number badge, .cs-u59 the text
   wrapper. Group blocks and native <p> both bring margins that fight
   the design, so zero them here as with .cs-u85. */

.cs-u57 > * {
	margin-block-start: 0;
	margin-block-end: 0;
}

.cs-u57 .cs-u59 {
	flex: 1;
	min-width: 0;
}

.cs-u57 .cs-u59 > * {
	margin-block-start: 0;
	margin-block-end: 0;
}

.cs-u57 p.cs-u11 {
	margin: 0 0 8px;
	line-height: 1.35;
}

.cs-u57 p.cs-u12 {
	margin: 0;
}

/* In-House and Senior card grids: keep the container, but as a border
   only — the cards need edges to read as separate items. */

.cs-u48 .cs-u85 {
	background: transparent;
	border: 1px solid var(--cs-line-green);
}
/* Get a Quote testimonial section: widen from 900px so it aligns with
   the form container (.cs-quote-main) above it. */

.cs-u218 {
	max-width: 1120px;
}

/* ==========================================================================
   Native-block conversions (Sept 2026) — Accredited badges, Contact card,
   About photo. Markup that used to be one Custom HTML block is now Groups,
   Paragraphs, Images and Buttons; only the SVG icons stay as HTML blocks.
   ========================================================================== */

/* "Accredited & Recognized": Group.cs-u136 > Paragraph.cs-u137 +
   Group.badge-grid.cs-u138 > Image.cs-u56 (one per badge). Add badge-amsa /
   badge-nextdoor / badge-fnp as an extra class on an Image block to fine-tune its height;
   any new badge gets the 84px default. */
.cs-u136 > *,
.cs-u138 > * { margin-block-start: 0; margin-block-end: 0; }
p.cs-u137 { margin: 0 0 22px; }
figure.cs-u56 { margin: 0; }
.cs-u56 img { max-height: 84px; max-width: 100%; width: auto; height: auto; display: block; }
.cs-u56.badge-amsa img { max-height: 72px; }
.cs-u56.badge-nextdoor img { max-height: 88px; }
.cs-u56.badge-fnp img { max-height: 88px; }

/* Five badges: widen the row so each card keeps its ~185px width. */
.cs-u138 { grid-template-columns: repeat(5, 1fr); max-width: 1000px; }
@media (max-width: 900px) { .cs-u138 { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 560px) { .cs-u138 { grid-template-columns: repeat(2, 1fr); } }

/* Contact page card: Group.cs-u158 > Group.cs-u159 (green: rows .cs-u160 /
   .cs-u142 of HTML icon + Group of two Paragraphs) + Group.cs-u161 (hours). */
.cs-u158 .wp-block-group > * { margin-block-start: 0; margin-block-end: 0; }
.cs-u158 p { margin: 0; }
.cs-u117 a { color: inherit; text-decoration: none; }
.cs-u117 a:hover { color: var(--cs-amber); }
.cs-u162 p { font: inherit; color: inherit; }

/* About "our story" photo: landscape at every width (was 4/5 portrait). */
.cs-u151 { aspect-ratio: 4 / 3; }

/* ==========================================================================
   Mobile polish
   Selectors target the live block markup, which no longer carries the old
   static-site helper classes (.hero-copy, .hero-overlay).
   ========================================================================== */

/* About "our story": the grid has no .resp-2, so it never stacked. The image
   is first in the markup, so one column puts it above the text. */
@media (max-width: 820px) {
	.cs-u150 { grid-template-columns: 1fr !important; gap: 32px !important; }
	.cs-u150 .cs-u151 { aspect-ratio: 4 / 3; }
}

@media (max-width: 640px) {
	/* Home hero: centre everything. */
	.cs-u183 { max-width: 100%; text-align: center; }
	.cs-u183 .cs-u186 { margin-left: auto; margin-right: auto; }

	/* Home "who we are": centre the eyebrow and heading only — body copy and
	   checklist stay left. The button spans the card like the hero buttons. */
	.home .cs-split .cs-eyebrow,
	.home .cs-split .cs-section-title { text-align: center; }
	.home .cs-split .wp-block-buttons { display: flex; flex-direction: column; align-items: stretch; width: 100%; }
	.home .cs-split .wp-block-button,
	.home .cs-split .wp-block-button__link { width: 100%; }

	/* Trust bar: the text wraps to several lines here, so the 15px icons from
	   base.css look lost beside it. */
	.trust-bar svg { width: 24px !important; height: 24px !important; }

	/* "A few proud numbers": one stat per row. */
	.aw-grid:has(> .cs-stat) { grid-template-columns: 1fr !important; }

	/* Resources move-day steps: the number badge is a <p>, which base.css's
	   `> div:first-child` centring rule doesn't match. */
	.steps-grid > div > :first-child { margin-left: auto !important; margin-right: auto !important; }

	/* Get a Quote: centre the "what happens next" heading (steps stay left)
	   and bring the testimonial down from 24px. */
	.cs-quote-info .cs-eyebrow,
	.cs-quote-info .cs-u217 { text-align: center; }
	.cs-u62.is-quote-page .cs-u220 { font-size: 18px; line-height: 28px; }
}

/* ==========================================================================
   BEGIN safe-area insets — iPhone landscape full-bleed backgrounds
   Paired with viewport-fit=cover in functions.php. Remove both together.
   ==========================================================================

   The section colours already live on full-width wrappers (.bg-cream,
   .bg-green, .cs-u24, .cs-u130, .header, .footer …) with the capped container
   nested inside, so nothing here has to widen a background. Covering the
   display is what makes them reach the edge in landscape.

   What's left is keeping the copy out from under the camera housing. The
   inset therefore goes on the CAPPED INNER CONTAINERS, never on the coloured
   band: the band stays edge-to-edge, and each piece of content is inset
   exactly once (padding a band as well would double it).

   Every selector below has exactly 24px of horizontal padding today, so
   max(24px, …) is a no-op on desktop, on Android, and in portrait — where
   env(safe-area-inset-left/right) is 0. It only does anything on a notched
   iPhone held sideways. .pad-sec is the theme's existing marker class for
   "section with its own gutter", so new sections that use it are covered
   automatically.
   ========================================================================== */

.pad-sec,
.header-inner,
.mobile-menu,
.cs-quote-main,
.cs-u17,   /* footer grid          */
.cs-u23,   /* footer bottom bar    */
.cs-u25,   /* page header band     */
.cs-u34,
.cs-u48,
.cs-u60,
.cs-u82,
.cs-u106,
.cs-u165,
.cs-u167,
.cs-u169,
.cs-u175,
.cs-u182,  /* home hero            */
.cs-u188,  /* trust bar            */
.cs-u190,
.cs-u197,
.cs-u218,
.cs-u222 {
	padding-left: max(24px, env(safe-area-inset-left, 0px));
	padding-right: max(24px, env(safe-area-inset-right, 0px));
}

/* The green "get in touch" band carries a 32px gutter rather than 24px. */
.inq-sec,
.cs-u35 {
	padding-left: max(32px, env(safe-area-inset-left, 0px));
	padding-right: max(32px, env(safe-area-inset-right, 0px));
}

/* ==========================================================================
   END safe-area insets
   ========================================================================== */
/* "Get a Free Quote" buttons in page headers jump to the quote form at the
   bottom of the page (#get-a-quote on the green form section). Offset by the
   sticky header so the section top isn't hidden underneath it. */
#get-a-quote { scroll-margin-top: 74px; }

/* October 2026: consistent native form controls and compact mobile badges. */
.fluentform form.frm-fluent-form input.ff-el-form-control,
.fluentform form.frm-fluent-form select.ff-el-form-control {
  box-sizing: border-box;
  width: 100%;
  min-height: 44px;
  height: 44px;
  padding: 10px 13px;
  font-family: inherit;
  font-size: 16px;
  line-height: 22px;
}
.fluentform form.frm-fluent-form select.ff-el-form-control {
  -webkit-appearance: none;
  appearance: none;
  border: 1px solid #dadbdd;
  border-radius: 8px;
  background-color: #fff;
  color: #222;
  padding-right: 38px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='m4 6 4 4 4-4' fill='none' stroke='%231a4b2e' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 13px center;
}
.fluentform form.frm-fluent-form select.ff-el-form-control:disabled {
  opacity: .55;
  cursor: not-allowed;
}
@media (max-width: 767px) {
  .fluentform form.frm-fluent-form .ff-name-field-wrapper .ff-t-container {
    display: flex;
    flex-direction: column;
    gap: 16px;
  }
}
@media (max-width: 560px) {
  .badge-grid.cs-u138 {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
  }
  .badge-grid.cs-u138 > .cs-u56 {
    box-sizing: border-box;
    flex: 0 0 calc((100% - 12px) / 2);
    min-width: 0;
    height: 112px;
    padding: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;
  }
  .badge-grid.cs-u138 > .cs-u56 img {
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 80px;
    object-fit: contain;
  }
}

/* Approved compact mobile forms and aligned contact icons. */
@media (max-width: 640px) {
  .cs-u44 { padding: 20px; }
  .cs-u45 { font-size: 23px; line-height: 1.2; }
  .cs-u46 { margin-bottom: 16px; }
  .fluentform form.frm-fluent-form fieldset {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 12px;
  }
  .fluentform .ff-el-group:has(input[name="phone"]),
  .fluentform .ff-el-group:has(input[name="email"]) { grid-column: 1 / -1; }
  .fluentform form.frm-fluent-form .ff-name-field-wrapper .ff-t-container {
    display: flex; flex-direction: row; gap: 12px;
  }
  .fluentform .ff-name-field-wrapper .ff-t-cell { flex: 1; min-width: 0; padding: 0; }
  .fluentform .ff-el-input--label label { font-size: 10px; letter-spacing: .025em; }
  .fluentform .ff-el-input--label { margin-bottom: 4px; }
  .fluentform form.frm-fluent-form textarea { height: 60px; min-height: 60px; font-size: 16px; }
  .fluentform form.frm-fluent-form .ff-btn.ff-btn-submit { padding: 12px 16px; min-height: 44px; }
  .foot-grid > div:has(> .foot-row) { width: max-content; max-width: 100%; margin-inline: auto; }
  .foot-grid > div:has(> .foot-row) .foot-head { text-align: center; }
  .foot-grid .foot-row { justify-content: flex-start !important; gap: 12px; text-align: left; font-size: 16px; }
  .foot-grid .foot-row svg { flex: 0 0 18px; width: 18px; height: 18px; }
}

/* Match empty dropdown text to placeholders at every screen size. */
  .fluentform form.frm-fluent-form select.ff-el-form-control:has(option[value=""]:checked) {
    color: #868e96; font-weight: 400;
  }
  .fluentform form.frm-fluent-form select.ff-el-form-control option { color: #222; }