/* Bridge: WordPress-only additions.
   main.css is generated from the demo and must not be hand-edited, so anything
   that exists because this is WordPress rather than a static export lives here. */

/* The demo carried this as an inline style attribute on one anchor. As a class it
   can be applied from Appearance > Menus without hand-writing style attributes. */
.dm .di.di-all { color: #C9A96E; font-weight: 600; margin-top: 6px; }

/* Footer bottom bar.
   The demo set these inline (11px at opacity .4 for the legal links, and
   rgba(255,255,255,.2) for the credit), which put them out of reach of any
   Style tab control and left both a little too faint to read. As classes they
   are editable, and the defaults here lift them just enough to be legible
   without breaking the restraint of the design. */
.fbot .fbot-legal { font-size: 12px; color: rgba(255, 255, 255, .5); }
.fbot .fbot-legal a { color: rgba(255, 255, 255, .62); text-decoration: none; transition: color .2s; }
.fbot .fbot-legal a:hover { color: #C9A96E; }
.fbot .fbot-sep { color: rgba(255, 255, 255, .25); margin: 0 4px; }

.fbot .fbot-credit { font-size: 12.5px; color: rgba(255, 255, 255, .38); }
/* Full-strength gold and an underline: at 80% opacity against the navy it was
   there but did not read as a link. */
.fbot .fbot-credit .fbot-credit-link {
	color: #C9A96E;
	text-decoration: underline;
	text-underline-offset: 3px;
	text-decoration-thickness: 1px;
	text-decoration-color: rgba(201, 169, 110, .45);
	transition: color .2s, text-decoration-color .2s;
}
.fbot .fbot-credit .fbot-credit-link:hover { color: #E8C98A; text-decoration-color: #E8C98A; }

/* Prose card lists.
   The demo styles .cb h2, .cb h3 and .cb p but never a list, because none of its
   pages had one. The privacy policy does, so match the paragraph treatment. */
.cb ul,
.cb ol { font-size: 14.5px; color: var(--M); line-height: 1.9; font-weight: 300; margin: 0 0 14px; padding-left: 20px; }
.cb ul { list-style: disc; }
.cb ol { list-style: decimal; }
.cb li { margin-bottom: 8px; padding-left: 4px; }
.cb li::marker { color: #C9A96E; }
.cb li strong { font-weight: 600; color: var(--Ink); }

/* Landing Hero.
   The demo styled the breadcrumb, headline, sub, badges and buttons inline on
   every landing page. As rules they are the widget's defaults and the Style tab
   can override them. */
.ih .ih-in { position: relative; z-index: 1; }
.ih .crumb { display: flex; gap: 8px; align-items: center; font-family: 'Syne', 'Syne Fallback', sans-serif;
  font-size: 12px; letter-spacing: .04em; text-transform: uppercase; color: rgba(255, 255, 255, .6); margin-bottom: 16px; }
.ih .crumb a { color: rgba(255, 255, 255, .6); text-decoration: none; transition: color .2s; }
.ih .crumb a:hover { color: rgba(255, 255, 255, .9); }
.ih .crumb .crumb-sep { opacity: .45; }
.ih .crumb .crumb-cur { color: #C9A96E; }
.ih .ih-h1 { font-family: 'Cormorant Garamond', 'Cormorant Fallback', serif;
  font-size: clamp(40px, 5.4vw, 68px); font-weight: 300; color: #fff; line-height: 1.05;
  letter-spacing: -.025em; margin-bottom: 14px; }
.ih .ih-h1 em { font-style: italic; color: var(--G2); }
.ih .ih-h1 strong { font-weight: 700; }
.ih .ih-in .ih-sub { color: rgba(255, 255, 255, .82); font-size: 17px; line-height: 1.7; font-weight: 300; }
.ih .ih-bg img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ih .hero-badges { display: flex; gap: 16px; align-items: center; margin-top: 24px; }
.ih .hero-badges img { width: auto; filter: drop-shadow(0 6px 18px rgba(0, 0, 0, .45)); }
.ih .ih-acts { margin-top: 26px; display: flex; gap: 14px; flex-wrap: wrap; }

/* Image Split.
   The demo set these three on every instance as inline style attributes — a
   smaller headline than the page default, a full-width lead, and spacing above
   the checklist. As rules they are the widget's default and the Style tab can
   override them; inline they could not be reached at all. */
.svc-split-body .lead { max-width: none; margin-top: 12px; }
.svc-split-body .clist { margin-top: 18px; }
.svc-split-body .svc-split-acts { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 24px; }

/* Award badges are real images rather than CSS backgrounds, because Elementor
   blanks background-image inside containers past the first with an !important
   rule that an inline style cannot beat. The wrapper keeps the demo's sizing and
   positioning; the image just fills it. */
.aw-emblem img,
.awslide-badge img { width: 100%; height: 100%; object-fit: contain; display: block; }

/* The nav stack is fixed at top:0 (supernav) and top:40px (nav, !important).
   Logged-in admins get the WP admin bar in that same space, so push both down by
   its height. Visitors never see any of this. */
body.admin-bar .supernav { top: 32px; }
body.admin-bar .nav { top: 72px !important; }
html.sn-off body.admin-bar .nav { top: 32px !important; }
@media screen and (max-width: 782px) {
	body.admin-bar .supernav { top: 46px; }
	body.admin-bar .nav { top: 86px !important; }
	html.sn-off body.admin-bar .nav { top: 46px !important; }
}

/* Captioned image pair (article block).
   The demo built this with inline grid and caption styles on every instance. */
.cb .rgrid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; margin: 20px 0; }
.cb .rgrid2 img { width: 100%; height: 340px; object-fit: cover; display: block; }
.cb .rgrid2 .rgcap { background: var(--N2); padding: 8px 12px;
  font-family: 'Syne', 'Syne Fallback', sans-serif; font-size: 9px; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase; color: rgba(255, 255, 255, .5); }
/* No mobile collapse: the demo keeps two-image pairs side by side on phones (its attribute-selector rules only stack 3- and 4-column grids). */

/* Bordered card grid (Step Grid, "joined cards" layout).
   The demo styled every card inline — background, padding and the whole type
   scale. As rules they are the widget's default and the Style tab can reach them. */
.dm-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px;
  background: rgba(201, 169, 110, .28); border: 1px solid rgba(201, 169, 110, .28);
  border-radius: 14px; overflow: hidden; margin-top: 46px; }
.dm-grid .psc { background: #F7F3EB; padding: 36px 30px; }
/* No accent bar here: .psc brings the numbered process step's red ::before
   with it, and the design's joined cards have no bar at all. */
.dm-grid .psc::before { display: none }
.dm-grid .psc-n { font-family: 'Cormorant Garamond', 'Cormorant Fallback', serif;
  font-size: 32px; font-weight: 600; color: #C9A96E; line-height: 1; margin-bottom: 16px; }
.dm-grid .psc h3, .dm-grid .psc h4 { font-family: 'Cormorant Garamond', 'Cormorant Fallback', serif;
  font-size: 23px; font-weight: 600; color: var(--N, #1B2A4A); margin: 0 0 10px; }
.dm-grid .psc p { font-size: 14px; line-height: 1.75; color: var(--M, #6b7280); font-weight: 300; margin: 0; }
/* The landing pages (roofing, restoration, home-improvement) write this grid
   inline with tighter cards than the .dm-grid class the service pages use:
   34px padding against 36px, and 1.7 line-height against 1.75. One blanket set
   of values left whichever family it did not match a few pixels off. */
.dm-grid.dm-land .psc { padding: 34px 30px }
.dm-grid.dm-land .psc p { line-height: 1.7 }
.dm-grid.dm-land { margin-top: 44px }
@media (max-width: 900px) { .dm-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .dm-grid { grid-template-columns: 1fr; } }

/* FAQ answers.
   The demo wraps 41 answers in <p> and leaves 25 as bare text, with no .faqa p
   rule anywhere — so the wrapped ones pick up the browser's default 1em margin
   and sit noticeably lower than the others. That is demo drift, not design:
   .faqa's own padding is what spaces the answer. The widget emits <p> for every
   answer and this rule makes the wrapper visually inert, so all 66 match the
   design's intent. */
.faqa p { margin: 0 0 12px; }
.faqa p:last-child { margin-bottom: 0; }

/* Step grid, separate rounded cards.
   The "how it works" row on the section landing pages. The design wrote the grid
   and every card's type scale inline on all three instances. */
.card-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 40px; }
/* Like the dm-grid: these are plain cream cards in the design, without the
   numbered step's red ::before bar that the shared .psc class drags in. */
.card-grid .psc::before { display: none }
.card-grid .psc { background: #F7F3EB; padding: 30px 26px; border-radius: 12px;
  border: 1px solid rgba(201, 169, 110, .25); }
.card-grid .psc-n { font-family: 'Cormorant Garamond', 'Cormorant Fallback', serif;
  font-size: 30px; font-weight: 600; color: #C9A96E; line-height: 1; margin-bottom: 12px; }
.card-grid .psc h3, .card-grid .psc h4 { font-family: 'Cormorant Garamond', 'Cormorant Fallback', serif;
  font-size: 21px; font-weight: 600; color: var(--N, #1B2A4A); margin: 0 0 8px; }
.card-grid .psc p { font-size: 14px; line-height: 1.7; color: var(--M, #6b7280); font-weight: 300; margin: 0; }
@media (max-width: 980px) { .card-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .card-grid { grid-template-columns: 1fr; } }

/* Credentials split, copy-first order.
   The homepage leads with the photo and the about page with the copy. The widget
   always renders the photo first in the markup so the reading order stays
   sensible; this reverses the columns visually when the copy leads. */
.luxsplit-flip .luxcnt { order: 1; }
.luxsplit-flip .luximg { order: 2; }

/* Award cards.
   The award card. It shares the Step Grid widget but not the step card: .psc
   carries a red accent bar and top padding for the numbered process steps, and
   the design's award cards have neither, so this is its own class rather than an
   override. Auto-fills so the row reflows rather than fixing a column count. */
.award-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 18px; margin-top: 40px; }
.award-grid .awcard { background: #F7F3EB; border: 1px solid rgba(201, 169, 110, .28);
  border-radius: 12px; padding: 30px 26px; display: block; text-decoration: none; }
.award-grid .awcard-n { font-family: 'Syne', 'Syne Fallback', sans-serif; font-size: 11px;
  letter-spacing: .12em; text-transform: uppercase; color: #C9A96E; font-weight: 700; margin-bottom: 10px; }
.award-grid .awcard h3, .award-grid .awcard h4 { font-family: 'Cormorant Garamond', 'Cormorant Fallback', serif;
  font-size: 24px; font-weight: 600; color: var(--N, #1B2A4A); margin: 0 0 8px; }
.award-grid .awcard p { font-size: 14px; line-height: 1.7; color: var(--M, #6b7280); font-weight: 300; margin: 0; }
/* The closing line on the linked award cards. */
.award-grid .awcard-link { display: block; margin-top: 14px;
  font-family: 'Syne', 'Syne Fallback', sans-serif; font-size: 11px;
  letter-spacing: .08em; text-transform: uppercase; color: #9aa2ad; font-weight: 700; }

/* Cards and Warning (insurance page).
   main.css styles the panels; these are the bits the design wrote inline — the
   header's width, the larger headline, the button row, and the icon colours.
   The red-flag rows really do use a tick rather than a cross in the design; it
   is the red stroke that carries the warning. */
.ins-head { max-width: 720px; margin-bottom: 8px; }
.ins-h2 { font-size: clamp(28px, 3.5vw, 44px); }
.ins-acts { text-align: center; margin-top: 44px; }
.ins-redhd svg { stroke: #fff; }
.ins-redlist li svg { stroke: var(--R); }

/* Testimonials "leave a review" panel, written inline in the design. */
.treview { text-align: center; padding: 40px; background: var(--N); max-width: 600px; margin: 48px auto 0; }
.treview h3, .treview h2, .treview h4 { font-family: 'Cormorant Garamond', 'Cormorant Fallback', serif;
  font-size: 26px; color: #fff; margin-bottom: 10px; }
.treview p { font-size: 14px; color: rgba(255, 255, 255, .5); margin-bottom: 18px; font-weight: 300; }

/* Post grid.
   The demo made each card clickable with an inline onclick, which no keyboard
   or crawler can follow. These are real anchors now, so the card still reads as
   one clickable block without the cursor rule doing the work. */
a.bpost, a.bfeat { text-decoration: none; color: inherit; }

/* CTA band, centred arrangement.
   The design set the centring, the copy's width and the button row inline on all
   twelve instances, which is why they were carried as raw markup. */
.cband-centre { text-align: center; }
.cband-centre .cbeye { justify-content: center; color: var(--G2); }
/* The centred band's copy is a plain paragraph in the design — body-size 16px
   at .6 white, not .cbp's 14.5px at .45. Five pixels a line across seven
   service-area pages. */
.cband-centre .cbp { margin: 14px auto 26px; max-width: 560px; line-height: 1.8; font-size: 16px; color: rgba(255, 255, 255, .6); }
/* flex-direction has to be stated: the base .cbacts rule stacks the buttons in
   a column, and the design's centred band is a plain div with no such class, so
   its buttons sit side by side. Inheriting the column put nine bands 56px tall. */
.cband-centre .cbacts { display: flex; flex-direction: row; gap: 14px; justify-content: center; flex-wrap: wrap; }

/* Area Body (service-area pages).
   main.css already styles the panels themselves (.asf-card, .areaside,
   .asf-svc); everything here is what the design wrote inline on all seventeen
   instances — the type scale in the content column, the sticky sidebar, and the
   photo's "established" badge. */
.area-main > .area-h2 { font-size: clamp(30px, 3.8vw, 48px); }
.area-main > .area-h3 { font-family: 'Cormorant Garamond', 'Cormorant Fallback', serif;
  font-size: 24px; color: var(--Ink); margin: 28px 0 14px; font-weight: 600; }
.area-main > .area-p { font-size: 14.5px; color: var(--M); line-height: 1.9; font-weight: 300; }
.area-main > .area-p:first-of-type { font-size: 15px; margin-top: 14px; }
.area-main > .asf-card { margin-top: 32px; }
.asf-card .eyeg { margin-bottom: 18px; }
.asf-services .eyeg { margin-bottom: 14px; color: var(--N); }

.areaside-col { position: sticky; top: 88px; }
.areaside-photo { position: relative; margin-bottom: 24px; }
.areaside-photo img { width: 100%; aspect-ratio: 4/5; object-fit: cover; display: block; }
.areaside-badge { position: absolute; bottom: -18px; right: -18px; background: var(--N2);
  border: 1px solid rgba(201, 169, 110, .22); padding: 18px 22px; text-align: center; }
.areaside-badge-n { font-family: 'Cormorant Garamond', 'Cormorant Fallback', serif;
  font-size: 28px; font-weight: 700; color: var(--G2); }
.areaside-badge-l { font-family: 'Syne', 'Syne Fallback', sans-serif; font-size: 8px;
  color: rgba(255, 255, 255, .46); letter-spacing: .16em; text-transform: uppercase; margin-top: 3px; }

@media (max-width: 900px) {
	.areaside-col { position: static; }
	.areaside-badge { right: 0; }
}

/* Blog Post.
   The demo set the measure and the closing bar inline on all thirteen posts. */
.blogpost-wrap { max-width: 760px; }
.blogpost .lead { max-width: none; }
.blogpost-foot { margin-top: 40px; padding-top: 30px; border-top: 1px solid var(--Bo);
  display: flex; gap: 14px; flex-wrap: wrap; align-items: center; justify-content: space-between; }

/* Area Hero (service-area pages).
   The design wrote this entire hero inline — the flex frame, the photo's opacity,
   the scrim, the left accent rule, the award pill, the headline clamp. None of it
   was reachable, and the walker did not recognise it as a hero at all, so all 17
   pages using it rendered with no headline. As rules it is the widget's default
   and the Style tab reaches every part. */
.ah { position: relative; min-height: 60vh; display: flex; align-items: flex-end;
  overflow: hidden; background: var(--N2, #0f1d33); }
.ah .ah-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .28; }
.ah .ah-scrim { position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(10, 21, 37, .97) 0%, rgba(10, 21, 37, .7) 40%, rgba(10, 21, 37, .2) 100%); }
.ah .ah-accent { position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
  background: linear-gradient(to bottom, transparent, var(--R) 30%, var(--G) 60%, transparent); }
.ah .ah-in { position: relative; z-index: 2; max-width: 1280px; margin: 0 auto; padding: 0 48px 64px; width: 100%; }

.ah .ah-crumb { font-family: 'Syne', 'Syne Fallback', sans-serif; font-size: 12px;
  color: rgba(255, 255, 255, .68); margin-top: 96px; margin-bottom: 16px;
  display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.ah .ah-crumb a { color: inherit; text-decoration: none; transition: color .2s; }
.ah .ah-crumb a:hover { color: #fff; }
.ah .ah-crumb-cur { color: #C9A96E; }

.ah .ah-badge { display: inline-flex; align-items: center; gap: 8px;
  background: rgba(192, 57, 43, .12); border: 1px solid rgba(192, 57, 43, .3);
  padding: 5px 14px; border-radius: 100px; margin-bottom: 18px; }
.ah .ah-badge span { display: inline-flex; align-items: center; gap: 6px;
  font-family: 'Syne', 'Syne Fallback', sans-serif; font-size: 9px; font-weight: 700;
  letter-spacing: .2em; text-transform: uppercase; color: var(--R); }

.ah .ah-h1 { font-family: 'Cormorant Garamond', 'Cormorant Fallback', serif;
  font-size: clamp(42px, 5.5vw, 72px); font-weight: 300; color: #fff;
  line-height: 1.05; letter-spacing: -.025em; margin-bottom: 14px; }
.ah .ah-h1 em { font-style: italic; color: var(--G2); }
.ah .ah-h1 strong { font-weight: 700; }
.ah .ah-sub { font-size: 16px; color: rgba(255, 255, 255, .5); max-width: 560px;
  font-weight: 300; line-height: 1.82; margin-bottom: 28px; }
.ah .ah-acts { display: flex; gap: 14px; flex-wrap: wrap; }

@media (max-width: 640px) {
	.ah .ah-in { padding: 0 20px 44px; }
	.ah .ah-crumb { margin-top: 80px; }
}

/* Feature cards, two-up comparison layout.
   The demo shipped this grid as a <style> block inside the section itself.
   WordPress strips the tag and keeps the text, so the CSS was rendering as
   visible words on the page. As a rule here it works and is editable. */
.tpoepdm-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 40px; }
/* Stays two-up on phones, matching the demo. */

/* Section Intro.
   The design set the width, the centring and the paragraph's whole type scale
   inline on all eighteen instances. As rules they are the widget's default. */
/* No width cap in the class: the design narrows SOME intro sections inline
   (roofing runs 900px) and leaves others full width (the testimonials review
   band). The cap rides per instance via the Content width control; baking 900
   here wrapped the review band's one-line headline onto two. */
.intro-wrap--center { text-align: center; }
.intro-wrap--center .eye { justify-content: center; }
.intro-p { font-size: 16px; line-height: 1.85; color: var(--Ink, #3a3a3a); font-weight: 300; margin-top: 18px; }
.intro-p + .intro-p { margin-top: 14px; }
/* The centred band spaces its copy 14px under the headline, not the 18 the
   left-aligned intros use. */
.wrap.intro-wrap--center .intro-p { margin-top: 14px }
.intro-acts { margin-top: 26px; display: flex; gap: 14px; flex-wrap: wrap; }
.intro-wrap--center .intro-acts { justify-content: center; }

/* Location Split.
   Fourteen placements, and the design wrote every declaration inline on each one
   — the grid, the eyebrow's tracking, the headline's clamp, the gold rule's
   gradient, the photo's shadow and its scrim. As rules they are the widget's
   default and the Style tab reaches all of it. The two variants differ only in
   their column balance, gap, width and alignment. */
.loc-split { display: grid; gap: 54px; }
.loc-split--text { grid-template-columns: 0.82fr 1.18fr; align-items: start; }
.loc-split--photo { grid-template-columns: 1.05fr .95fr; gap: 56px; align-items: center; }
.loc-wrap { max-width: 1080px; }
.loc-wrap--photo { max-width: 1150px; }

.loc-eye { font-family: 'Syne', 'Syne Fallback', sans-serif; font-size: 11px; font-weight: 700;
  letter-spacing: .24em; text-transform: uppercase; color: #C9A96E; margin-bottom: 16px; }
.loc-h2 { font-family: 'Cormorant Garamond', 'Cormorant Fallback', serif;
  font-size: clamp(28px, 3.6vw, 40px); line-height: 1.12; color: var(--N, #1B2A4A);
  margin: 0 0 20px; font-weight: 600; }
.loc-h2 em { font-style: italic; color: var(--G2); }
.loc-rule { width: 56px; height: 2px; background: linear-gradient(90deg, #C9A96E, rgba(201, 169, 110, 0)); }
.loc-split--photo .loc-h2 { font-size: clamp(28px, 3.4vw, 38px); line-height: 1.14; margin-bottom: 18px; }
.loc-split--photo .loc-rule { margin-bottom: 22px; }

.loc-p { font-size: 16px; line-height: 1.85; color: var(--Ink, #3a3a3a); font-weight: 300; margin: 0 0 18px; }
.loc-p:last-child { margin-bottom: 0; }
.loc-split--photo .loc-p { font-size: 15.5px; margin-bottom: 16px; }

.loc-photo { position: relative; height: 420px; border-radius: 16px; overflow: hidden;
  box-shadow: 0 30px 60px -30px rgba(15, 29, 51, .4); }
.loc-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.loc-scrim { position: absolute; inset: 0; background: linear-gradient(180deg, transparent 60%, rgba(15, 29, 51, .18)); }

@media (max-width: 860px) {
	.loc-split, .loc-split--text, .loc-split--photo { grid-template-columns: 1fr; gap: 32px; }
	.loc-photo { height: 300px; }
}

/* Reviews section background.
   The demo ships two `rvcss` variants and each page loads exactly one: ten pages
   get `.rvsec{background:var(--C)}`, two get `.rvsec{background:#fff}`. Merged
   into one stylesheet they cannot both be right — the later (white) wins on
   source order, so every reviews band rendered white including the ten that
   should be cream. Neutralise the background here and let the section class
   carry it, which is what .bC / .bN2 / .bN already exist for, so it is per page
   and reachable from the Style tab. */
/* The design has no white band class — every section is white by default — but
   the Background preset control needs one so a cream or navy band can be turned
   back to white without clearing the control. */
.bW { background: #fff; }

.rvsec { background: none; }
.rvsec.bC { background: var(--C); }
.rvsec.bN2 { background: var(--N2); }
.rvsec.bN { background: var(--N); }

/* Tag-proof sub-copy.
   The sub-headline classes carry their own size, weight and colour but inherit
   the font and rely on a <p>'s margins. Switching one to a heading tag for the
   page outline would otherwise pull in the browser's default heading margin and
   bold, and change how it looks. These keep the design fixed whatever tag is
   chosen.

   Scoped to the heading tags only: .lead and .hsub carry deliberate margins of
   their own in main.css, so a blanket reset here would move copy site-wide. */
:is(h1, h2, h3, h4, h5, h6).hsub,
:is(h1, h2, h3, h4, h5, h6).ih-sub,
:is(h1, h2, h3, h4, h5, h6).lead,
:is(h1, h2, h3, h4, h5, h6).cbp,
:is(h1, h2, h3, h4, h5, h6).fdesc {
	font-family: inherit;
	font-weight: 300;
}

/* Alert callout (article block).
   The demo wrote the whole box inline on both instances — the navy fill, the red
   accent bar, and the label's type scale. As rules they are the block's default
   and the Style tab can reach them. */
.cb .cb-alert { background: var(--N, #1B2A4A); padding: 24px; margin-top: 20px; }
.cb .cb-alert--alert { border-left: 3px solid var(--R, #C0392B); }
/* The financing pages close with the same panel in a gold-bordered promo form,
   with a heading between the label and the copy. */
.cb .cb-alert--promo { border: 1px solid rgba(201, 169, 110, .2); }
.cb .cb-alert--promo .cb-alert-label { color: var(--G, #C9A96E); }

/* The promo variant's own metrics, from the design's inline styles: 32px box
   padding, a 28px heading spaced 26px from the label, 14px copy with a 20px
   gap before the button. The alert variant's tighter numbers stay above. */
.cb .cb-alert--promo { padding: 32px; margin-top: 24px }
.cb .cb-alert--promo .cb-alert-label { margin-bottom: 12px }
.cb .cb-alert--promo .cb-alert-h { font-size: 28px; margin: 26px 0 10px }
/* .cb-alert.cb-alert--promo, not just the modifier: with the modifier alone this
   ties the base .cb .cb-alert p rule below and loses on source order. */
.cb .cb-alert.cb-alert--promo p { font-size: 14px; margin-bottom: 20px; line-height: 1.9 }
/* Block, not flex: the design leaves this label inline-flowing, so its 16px icon
   sets a taller line box than the flex row the alert variant uses. */
.cb .cb-alert.cb-alert--promo .cb-alert-label { display: block }
.cb .cb-alert.is-center { text-align: center; }
.cb .cb-alert.is-center .cb-alert-label { justify-content: center; }
.cb .cb-alert.is-center p { max-width: 420px; margin-left: auto; margin-right: auto; }
.cb .cb-alert-h { font-family: 'Cormorant Garamond', 'Cormorant Fallback', serif;
  font-size: 24px; color: #fff; margin: 0 0 10px; font-weight: 600; }
.cb .cb-alert-label { display: flex; align-items: center; gap: 8px;
  font-family: 'Syne', 'Syne Fallback', sans-serif; font-size: 9px; font-weight: 700;
  letter-spacing: .2em; text-transform: uppercase; color: var(--R, #C0392B); margin-bottom: 8px; }
.cb .cb-alert p { font-size: 13.5px; color: rgba(255, 255, 255, .56); line-height: 1.72;
  font-weight: 300; margin: 0 0 14px; }
.cb .cb-alert .btn.bl { width: 100%; justify-content: center; }

/* Image pair, plain variant (article block).
   Distinct from .rgrid2: rounded corners, a real gap, a shadow and no captions.
   The demo set all of it inline on both instances. */
.cb .pairgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 22px; }
.cb .pairgrid > div { position: relative; height: 230px; border-radius: 12px; overflow: hidden;
  box-shadow: 0 20px 40px -24px rgba(15, 29, 51, .35); }
.cb .pairgrid img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* Pairs stay two-up on phones, matching the demo. */

/* Image Split — stacked photo column.
   Where the design shows a project pair, the photo column becomes a column of
   two with no panel treatment on the box itself. */
.svc-split-img.is-stacked { aspect-ratio: auto; display: flex; flex-direction: column; gap: 14px; box-shadow: none; }
.svc-split-img.is-stacked img { width: 100%; height: auto; border-radius: 10px;
  box-shadow: 0 30px 60px -28px rgba(15, 29, 51, .45); }

/* Image Split — "even split" variant.
   The demo defined the grid, the photo box and the whole paragraph type scale
   inline on every instance, and gave the photo no panel treatment unlike the
   service split. As rules they are the widget's default and reachable from the
   Style tab. The copy here is a size larger and a shade darker than .lead
   elsewhere, which is the design, not drift. */
/* The class rule is the HOMEPAGE's sp2 (1fr 1.15fr, 80px gap, full wrap) —
   the service pages override all three inline in the design, so those values
   ride per instance (fx_wrap_max, columns, gap), not here. Baking the service
   numbers into the class squeezed the homepage owners section 100px taller. */
.wrap.sp2 { display: grid; grid-template-columns: 1fr 1.15fr; gap: 80px; align-items: center; }
.wrap.sp2.flip .svc-split-img { order: 2; }
.wrap.sp2 .svc-split-img { aspect-ratio: auto; border-radius: 0; box-shadow: none; overflow: visible; }
.wrap.sp2 .svc-split-img img { width: 100%; height: 460px; object-fit: cover; display: block; border-radius: 14px; }
/* Colour and measure are shared, but the size is NOT: the roofing pages set
   16px inline while the about page leaves .lead at its own 15px. Forcing 16px
   here made the about page's opening section 98px taller than the design, so the
   size is a per-instance control on the widget instead. */
.wrap.sp2 .svc-split-body .lead { line-height: 1.85; color: var(--Ink, #3a3a3a); font-weight: 300; margin-top: 16px; max-width: none; }
.wrap.sp2 .svc-split-body .lead + .lead { margin-top: 14px; }
.wrap.sp2 .svc-split-body .svc-split-acts { margin-top: 24px; }
@media (max-width: 860px) {
	.wrap.sp2 { grid-template-columns: 1fr; gap: 32px; }
	.wrap.sp2.flip .svc-split-img { order: 0; }
	.wrap.sp2 .svc-split-img img { height: 320px; }
}

/* ---------------------------------------------------------------------------
   Hearth financing panel (/financing/, /financing-options/).
   The design ships this as a loose block between two sections, not inside one,
   so it carries its own max-width and top margin rather than a section's
   padding. Wrapping it in a <section> added 96px of padding the design never
   had and put an extra section on the page.
   -------------------------------------------------------------------------- */
.fin-panel { max-width: 1140px; margin: 46px auto 0; padding: 0 20px }
.fin-row { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: start }

.fin-card {
	position: relative; overflow: hidden; border-radius: 20px;
	padding: 40px 34px 36px;
	background: linear-gradient(155deg, #13233f 0%, #0c1830 60%, #0a1428 100%);
	border: 1px solid rgba(201, 169, 110, .28);
	box-shadow: 0 40px 80px -42px rgba(8, 18, 40, .75);
}
/* The gold bloom in the top-right corner. */
.fin-card::before {
	content: ''; position: absolute; top: -50px; right: -50px;
	width: 220px; height: 220px; pointer-events: none;
	background: radial-gradient(circle, rgba(201, 169, 110, .16), transparent 70%);
}
.fin-card-in { position: relative; text-align: center }

.fin-badge {
	display: inline-flex; align-items: center; gap: 7px;
	font-family: 'Syne', 'Syne Fallback', sans-serif;
	font-size: 10px; font-weight: 700; letter-spacing: .22em; text-transform: uppercase;
	color: #C9A96E; border: 1px solid rgba(201, 169, 110, .38);
	border-radius: 999px; padding: 7px 16px; margin-bottom: 20px;
}
.fin-h {
	font-family: 'Cormorant Garamond', 'Cormorant Fallback', serif;
	font-size: 34px; line-height: 1.12; color: #fff; margin: 0 0 12px; font-weight: 600;
}
.fin-p {
	font-size: 15px; color: rgba(255, 255, 255, .62);
	max-width: 470px; margin: 0 auto 24px; font-weight: 300; line-height: 1.65;
}
.fin-pills { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-bottom: 28px }
.fin-pill {
	display: inline-flex; align-items: center; gap: 6px;
	font-size: 12px; font-weight: 500; color: rgba(255, 255, 255, .82);
	background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .13);
	border-radius: 999px; padding: 8px 14px;
}
.hearth-banner {
	display: inline-block; line-height: 0; border-radius: 12px; overflow: hidden;
	box-shadow: 0 20px 40px -22px rgba(0, 0, 0, .65);
}
.hearth-banner img { display: block; height: 120px; width: 310px }

.fin-app {
	background: #fff; border: 1px solid rgba(201, 169, 110, .25); border-radius: 18px;
	box-shadow: 0 30px 60px -38px rgba(15, 29, 51, .45); overflow: hidden;
}
.fin-app-hd {
	display: flex; align-items: center; gap: 12px; padding: 22px 28px;
	border-bottom: 1px solid #eee; background: linear-gradient(180deg, #fbfaf6, #fff);
}
.fin-app-el {
	font-family: 'Syne', 'Syne Fallback', sans-serif; font-size: 10px;
	letter-spacing: .2em; text-transform: uppercase; color: #C9A96E;
	font-weight: 700; margin-bottom: 2px;
}
.fin-app-h {
	font-family: 'Cormorant Garamond', 'Cormorant Fallback', serif;
	font-size: 21px; color: var(--N, #1B2A4A); font-weight: 600; line-height: 1.1;
}
.fin-app-bd { padding: 10px 22px 22px }
.fin-app-bd iframe { width: 100%; border: none; min-height: 520px }

@media (max-width: 860px) { .fin-row { grid-template-columns: 1fr } }

/* ---------------------------------------------------------------------------
   Icon colours the design sets per wrapper.
   These were hard-coded gold in the widgets, which put 68 service-area fact
   icons and the insurance balance icons in the wrong colour. The widgets now
   draw with currentColor so this rule is the design default and the Elementor
   colour control can override one section without touching the rest.
   -------------------------------------------------------------------------- */
.asf-ic { color: #C0392B }
.insico { color: #C0392B }
/* The sidebar service links draw their arrow in red, not the gold the widget
   assumed — 119 icons across the 17 service-area pages. */
/* Scoped to the svg: the link text itself stays var(--Ink) in the design. */
.asf-svc > svg { color: #C0392B }

/* ---------------------------------------------------------------------------
   Stat tiles (awards page): a 2x2 grid that fills the split's photo column.
   The design wrote every rule inline.
   -------------------------------------------------------------------------- */
.statgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px }
.wrap.sp2.flip .statgrid { order: 2 }
.stattile {
	background: #fff; border: 1px solid rgba(201, 169, 110, .3);
	border-radius: 12px; padding: 26px 22px; text-align: center;
}
.stat-n {
	font-family: 'Cormorant Garamond', 'Cormorant Fallback', serif;
	font-size: 44px; font-weight: 600; color: #C9A96E; line-height: 1;
}
.stat-l {
	font-family: 'Syne', 'Syne Fallback', sans-serif; font-size: 11px;
	letter-spacing: .1em; text-transform: uppercase;
	color: var(--N, #1B2A4A); font-weight: 700; margin-top: 6px;
}

/* Contact page wrappers the design styled inline: the space above the detail
   rows and the checklist's stacked layout. */
.ctrows { margin-top: 28px }
.chklist { margin-top: 26px; display: flex; flex-direction: column; gap: 10px }
/* The compliance line under the insurance-partner buttons. */
.intro-fine { font-size: 11px; color: var(--M, #888); margin-top: 18px; font-weight: 300 }
/* The design sets this inline on the one testimonials grid. */
.testgrid { margin-top: 44px }

/* The white card the insurance-partner intro wraps its copy in (financing and
   insurance-claims pages). All inline in the design. */
.intro-card {
	background: #fff; border: 1px solid var(--Bo, #e6e0d8); border-radius: 16px;
	padding: 34px; margin-top: 28px; box-shadow: 0 24px 48px -32px rgba(15, 29, 51, .35);
	text-align: left;
}
.intro-card .intro-p { font-size: 15px; color: var(--Ink, #2a2a2a); line-height: 1.8; font-weight: 300; max-width: none; margin: 0 }
.intro-card .intro-acts { margin-top: 24px }
.intro-card .intro-fine { margin-top: 18px }

/* ---------------------------------------------------------------------------
   Current-page marker in the menus. The demo never highlighted the open page;
   the client asked for it, in the design's red. Top-level items keep their
   existing gold underline treatment from main.css.
   -------------------------------------------------------------------------- */
.dm .di.cur { color: var(--R, #C0392B); font-weight: 600 }
.dm .di.cur:hover { color: var(--R, #C0392B) }
.mdrawer .ml.cur { color: var(--R, #C0392B) }
/* The design closes the loc-split copy with margin:0 on its last paragraph;
   a uniform 16px under every one ran the column 4px past the photo. */
.loc-head p:last-child { margin-bottom: 0 }
/* When the CTA band carries an eyebrow, the design spaces the headline 8px
   under it and the copy 14px under that (written inline on the one band that
   uses this form). Scoped to the eyebrow so plain bands keep their metrics. */
.cbinner .cbeye + .cbh, .cbinner .cbeye + .h2 { margin-top: 8px }
.cbinner .cbeye ~ .cbp { margin-top: 14px }

/* The area pages' body copy ends flush, like the loc-split: the design zeroes
   the last paragraph's margin. */
.area-main p:last-of-type { margin-bottom: 0 }
/* The 1.1 line-height rule belongs to the svc-split variant; the design's sp2
   columns are plain divs on the base 1.08. The widget's markup carries
   .svc-split-body in both, which added 4px to every three-line headline on the
   area pages' splits. */
.wrap.sp2 .svc-split-body .h2 { line-height: 1.08 }

/* Body links inside blog posts. The demo has no inline body links (the SEO
   pass added contextual service links), so this follows the design's one
   inline-link convention (.form-msg a: red, no underline) with a hover
   underline for affordance. Also covers the posts' existing tel: links. */
.blogpost p a{color:var(--R);font-weight:500;text-decoration:none}
.blogpost p a:hover{text-decoration:underline;text-underline-offset:3px}

/* In-body figures on blog posts (added by the content-SEO pass; the demo had
   no in-body media). Radius follows the design's card imagery (10-14px). */
.blogpost figure{margin:32px 0}
.blogpost figure img{width:100%;height:auto;display:block;border-radius:12px}
.blogpost figcaption{font-size:13px;color:var(--M);margin-top:10px}

/* Live Google rating band on the Reviews page. */
.gsum{display:flex;align-items:center;justify-content:center;gap:8px;flex-wrap:wrap;margin:26px 0 6px;font-size:15.5px;color:var(--Ink)}
.gsum-stars{display:inline-flex;gap:2px}
.gsum a{color:var(--R);font-weight:500}
.gsum a:hover{text-decoration:underline;text-underline-offset:3px}

/* ============================================================= mobile fixes
   The demo collapses its grids on small screens with !important rules (its
   inline-styled grids use attribute selectors at 820/560px). The ported grids
   are classed, and their column counts arrive per-element from editor controls
   whose generated CSS outranks any plain rule — so the demo's own !important
   treatment is the correct counter. */
@media (max-width: 820px) {
  .card-grid { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 900px) {
  .dm-grid { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 560px) {
  .card-grid, .dm-grid { grid-template-columns: 1fr !important; }
}
/* The demo stacks the sp2 split at 1200px; the ported .wrap.sp2 desktop rule
   is more specific than the demo's media rule, so restate the collapse. */
@media (max-width: 1200px) {
  .wrap.sp2 { grid-template-columns: 1fr !important; gap: 48px !important; }
}
/* Sections carrying a custom bottom padding from the editor keep it on phones,
   where the demo's 768px rule pulls every section to 56px. Sides too. */
@media (max-width: 768px) {
  .sec, .secsm, .seclg {
    padding-bottom: 56px !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
}

/* The demo's 820px rule caps the loc-split's LAST column at 280px, which in
   its markup is always the image. The --text variant renders text last, and
   text must never be clipped to a fixed height. */
@media (max-width: 820px) {
  .loc-split.loc-split--text > div:last-child { height: auto !important; }
}

/* FAQ questions inside blog posts (h3, added by the content pass). main.css
   styles .blogpost h2 only, so h3 fell back to the theme's bold sans — these
   follow the article's own serif treatment, one step below the h2. */
.blogpost h3 {
  font-family: 'Cormorant Garamond', 'Cormorant Fallback', serif;
  font-size: 22px; font-weight: 600; color: var(--N, #1B2A4A);
  margin: 26px 0 8px; line-height: 1.25;
}

/* Reviews page: six cards up front, the rest behind the Show All button. */
.testgrid.tg-collapsed .tcard:nth-child(n+7) { display: none; }
.tmore { text-align: center; margin-top: 34px; }


/* ===== Howl GBP Reviews plugin: testimonials-page skin (scoped .hgbr-fixins) ===== */
.hgbr-fixins .hgbr-feed{margin:30px auto 0}
/* header: one inline line — stars 5.0 rating from 123 Google reviews · READ THEM ALL ON GOOGLE */
.hgbr-fixins .hgbr-header{justify-content:center;align-items:center;gap:8px;margin-bottom:26px}
.hgbr-fixins .hgbr-agg{flex-direction:row;align-items:center}
.hgbr-fixins .hgbr-agg-name{display:none}
.hgbr-fixins .hgbr-agg-row{gap:8px;font-size:15.5px;font-weight:300;color:var(--M,#5a6478);letter-spacing:normal}
.hgbr-fixins .hgbr-agg-score{font-family:'Cormorant Garamond','Cormorant Fallback',serif;font-size:27px;font-weight:600;color:var(--Ink,#1a1a2e)}
.hgbr-fixins .hgbr-agg-score::after{content:'rating from';font-family:Inter,'Inter Fallback',sans-serif;font-size:15.5px;font-weight:300;color:var(--M,#5a6478);letter-spacing:normal;margin-left:8px}
.hgbr-fixins .hgbr-agg-stars{order:-1}
.hgbr-fixins .hgbr-agg-fill{color:var(--G,#C9A96E)}
.hgbr-fixins .hgbr-agg-base{color:rgba(201,169,110,.28)}
.hgbr-fixins .hgbr-agg-count{font-size:15.5px;font-weight:300;opacity:1;color:var(--M,#5a6478);gap:8px;letter-spacing:normal}
.hgbr-fixins .hgbr-agg-count svg{display:none}
.hgbr-fixins .hgbr-agg-count-num{font-family:'Cormorant Garamond','Cormorant Fallback',serif;font-size:27px;font-weight:600;color:var(--Ink,#1a1a2e);line-height:1}
.hgbr-fixins .hgbr-ctas{gap:8px}
.hgbr-fixins .hgbr-ctas::before{content:'\00B7';color:var(--M,#5a6478);font-size:15px}
.hgbr-fixins .hgbr-cta{background:none;box-shadow:none;padding:0;border-radius:0;color:var(--R,#C0392B);font-family:'Syne','Syne Fallback',sans-serif;font-size:12px;font-weight:600;letter-spacing:.09em;text-transform:uppercase}
.hgbr-fixins .hgbr-cta:hover,.hgbr-fixins .hgbr-cta:focus{background:none;color:var(--R,#C0392B);filter:none;text-decoration:underline;text-underline-offset:3px}
.hgbr-fixins .hgbr-cta svg{display:none}
/* band keeps only "Write a review"; "Read them all" is a button under the cards instead */
.hgbr-fixins .hgbr-cta:not(.hgbr-cta-ghost){display:none}
.hgbr-fixins .hgbr-readall{text-align:center;margin-top:34px}
/* cards: match .tcard exactly */
.hgbr-fixins .hgbr-grid{gap:22px}
.hgbr-fixins .hgbr-feed .hgbr-card{background:#fff;border:1px solid var(--Bo,#e2ddd6);border-radius:0;padding:30px 26px;position:relative;box-shadow:none;gap:0;transition:all var(--ease,.25s cubic-bezier(.4,0,.2,1))}
.hgbr-fixins .hgbr-feed .hgbr-card::before{content:'"';position:absolute;top:14px;right:18px;font-family:'Cormorant Garamond','Cormorant Fallback',serif;font-size:76px;color:rgba(192,57,43,.07);line-height:1}
.hgbr-fixins .hgbr-feed .hgbr-card:hover{border-color:rgba(192,57,43,.2);box-shadow:0 14px 40px rgba(27,42,74,.08);transform:translateY(-3px)}
.hgbr-fixins .hgbr-feed .hgbr-card-head{order:5;padding-top:14px;border-top:1px solid var(--Bo,#e2ddd6);gap:12px;margin-top:auto}
.hgbr-fixins .hgbr-feed .hgbr-stars{order:1;gap:2px;margin-bottom:14px}
.hgbr-fixins .hgbr-feed .hgbr-stars svg{width:16px;height:16px}
.hgbr-fixins .hgbr-feed .hgbr-st-on{color:var(--G,#C9A96E)}
.hgbr-fixins .hgbr-feed .hgbr-st-off{color:rgba(201,169,110,.28)}
/* keep the plugin's 5-line clamp so no card runs long; its JS adds Read more only when text overflows */
.hgbr-fixins .hgbr-feed .hgbr-text{order:2;font-size:13.5px;color:var(--M,#5a6478);line-height:1.82;font-style:italic;font-weight:300;margin-bottom:18px}
.hgbr-fixins .hgbr-feed .hgbr-more{order:3;align-self:flex-start;background:none;border:0;padding:0;margin:-8px 0 18px;color:var(--R,#C0392B);font-family:'Syne','Syne Fallback',sans-serif;font-size:11px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;cursor:pointer;line-height:1.4}
.hgbr-fixins .hgbr-feed .hgbr-more:hover,.hgbr-fixins .hgbr-feed .hgbr-more:focus{text-decoration:underline;text-underline-offset:3px}
.hgbr-fixins .hgbr-feed .hgbr-reply{display:none}
.hgbr-fixins .hgbr-feed .hgbr-avatar,.hgbr-fixins .hgbr-feed .hgbr-avatar-fallback{width:42px;height:42px}
.hgbr-fixins .hgbr-feed .hgbr-avatar-fallback{background:var(--N,#1B2A4A);color:var(--G2,#e8c98a);font-family:'Syne','Syne Fallback',sans-serif;font-size:12px;font-weight:700}
.hgbr-fixins .hgbr-feed .hgbr-name{font-family:'Cormorant Garamond','Cormorant Fallback',serif;font-size:17px;font-weight:700;color:var(--Ink,#1a1a2e);white-space:normal}
.hgbr-fixins .hgbr-feed .hgbr-date{font-size:12px;color:var(--M,#5a6478);opacity:1}
.hgbr-fixins .hgbr-feed .hgbr-who::after{content:'Google Review';font-family:'Syne','Syne Fallback',sans-serif;font-size:9px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--R,#C0392B);background:var(--Rl,#fdecea);padding:3px 9px;border-radius:100px;margin-top:3px;align-self:flex-start}
.hgbr-fixins .hgbr-feed .hgbr-badge{display:none}