/* Literal reference shell geometry. Package A owns header and footer only. */
.r-header {
	position: fixed;
	top: 0;
	right: 0;
	left: 0;
	z-index: 60;
	width: 100%;
	background: #fff;
	border-bottom: 1px solid var(--sq-line3);
	transition: box-shadow .3s;
	font-family: var(--sq-font-body);
}

.r-header a,
.r-footer a {
	color: var(--sq-green);
	text-decoration: none;
}

.r-header a:hover,
.r-footer a:hover {
	color: var(--sq-ink);
}

.r-announcement {
	background: #fff;
	border-bottom: 1px solid #ece7db;
}

/* The reference page is raw HTML with no box-sizing reset, so its `max-width:
   1180px; padding: 8px 28px` is a CONTENT box: the row occupies 1236px and the
   first glyph lands on the 130px grid line the hero and every band share. This
   theme resets to border-box, so the same declaration measured 1180px total and
   put the logo at x=158 -- 28px inboard of the reference grid line. Add the
   padding back to the cap rather than dropping the padding, so the row keeps its
   28px inner gutter at narrow widths. */
.r-announcement__inner {
	max-width: calc(var(--sq-shell-width) + 56px);
	margin: 0 auto;
	padding: 8px 28px;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 14px;
	color: var(--sq-green);
	font: 600 11.5px/1 var(--sq-font-body);
	text-align: center;
}

.r-announcement__lead {
	font-weight: 800;
	letter-spacing: .02em;
}

.r-announcement__dot {
	width: 4px;
	height: 4px;
	flex: none;
	margin: 0;
	border-radius: 50%;
	border: 0;
	background: var(--sq-sage);
}

.r-announcement__link {
	border-bottom: 1px solid rgb(63 109 63 / 40%);
}

/* Same content-box/border-box correction as .r-announcement__inner above. */
.r-nav {
	max-width: calc(var(--sq-shell-width) + 56px);
	margin: 0 auto;
	padding: 11px 28px;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 10px 16px;
}

.r-header .logo {
	display: flex;
	flex: none;
	align-items: center;
}

.r-header .logo img,
.r-header .logo .custom-logo {
	display: block;
	width: auto;
	height: 44px;
}

.r-header .logo__text {
	color: var(--sq-ink);
	font: 700 16px/1.1 var(--sq-font-display);
}

.r-desknav {
	min-width: 0;
	display: flex;
	flex: 1 1 auto;
	align-items: center;
	justify-content: center;
}

.r-desknav .r-menu,
.r-mobpanel .r-menu {
	margin: 0;
	padding: 0;
	list-style: none;
}

.r-desknav .r-menu {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 4px 12px;
}

.r-desknav .r-menu > li {
	position: relative;
	margin: 0;
}

.r-desknav .r-menu > li > a,
.r-desknav .r-menu > li > .sub-menu-toggle {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 8px 9px;
	color: var(--sq-body);
	font: 600 13.5px/1 var(--sq-font-body);
	white-space: nowrap;
}

.r-desknav .r-menu > li > a:hover {
	color: var(--sq-ink);
}

/* The reference marks every dropdown parent with a small sage caret. The default
   WordPress walker emits no `.sub-menu-toggle` button on this menu (verified in
   the rendered DOM: zero `.sub-menu-toggle` nodes), so the toggle rules below
   never fire here and the affordance was simply absent. Painting it from the
   link's own `::after` keeps it on the item whether or not a toggle is present;
   the parent rule already supplies `display:inline-flex; gap:5px`. */
.r-desknav .r-menu > li.menu-item-has-children > a::after {
	content: "\25BC";
	color: var(--sq-sage);
	font-size: 8px;
	line-height: 1;
}

/* The primary menu carries its own "Get a Free Estimate" item (`li.nav-button`),
   which rendered a THIRD copy of the same call to action beside the header
   `.r-cta` button and the nav phone link. The reference desktop rail is five
   dropdown items and one black button. Hidden only in the desktop rail: the
   mobile panel keeps the item, because `.r-nav-actions > .r-cta` is hidden below
   520px and the menu item is then the only CTA on the page shell. */
.r-desknav .r-menu > li.nav-button {
	display: none;
}

.r-desknav .r-menu > li > .sub-menu-toggle {
	width: 18px;
	margin-left: -7px;
	padding-right: 0;
	padding-left: 0;
	border: 0;
	background: transparent;
	color: var(--sq-sage);
	cursor: pointer;
}

/* `Sequoia_SVG_Icons` renders BOTH states into every `.sub-menu-toggle`: an
   `.icon-plus` chevron-down for "open" and an `.icon-minus` chevron-up for
   "close". Nothing in this theme ever hid the inactive one, so both 18px icons
   painted side by side inside an 18px-wide button and the second overflowed
   into the following menu item -- which is what the `margin-left: -15px` above
   was really compensating for: it dragged the overflowing pair back over the
   toggle's own label so the stray chevron read as attached to the NEXT word.
   Show exactly one icon per state and the button occupies the box it declares. */
.sub-menu-toggle .icon-minus,
.sub-menu-toggle[aria-expanded="true"] .icon-plus {
	display: none;
}

.sub-menu-toggle[aria-expanded="true"] .icon-minus {
	display: block;
}

.r-desknav .r-menu .sub-menu {
	position: absolute;
	top: 100%;
	left: 0;
	min-width: 240px;
	margin: 0;
	padding: 10px;
	display: none;
	flex-direction: column;
	gap: 2px;
	background: #fff;
	border: 1px solid var(--sq-line);
	box-shadow: 0 22px 44px -20px rgb(0 0 0 / 32%);
	z-index: 70;
}

.r-desknav .r-menu > li:hover > .sub-menu,
.r-desknav .r-menu > li:focus-within > .sub-menu,
.r-desknav .r-menu > li > .sub-menu-toggle[aria-expanded="true"] + .sub-menu {
	display: flex;
}

.r-desknav .r-menu .sub-menu a {
	display: block;
	padding: 9px 12px;
	color: var(--sq-ink);
	font: 600 13px/1.35 var(--sq-font-body);
}

.r-desknav .r-menu .sub-menu a:hover {
	background: #f3f7f1;
	color: var(--sq-green);
}

.r-nav-menu {
	min-width: 0;
	display: contents;
}

.r-nav-actions {
	display: flex;
	flex: none;
	align-items: center;
	gap: 10px;
}

/* The base pill is the header/footer/mobile-panel CTA link. The composer also
   puts `r-cta` on the Core buttons GROUP wrapper (`wp-block-buttons r-cta`) it
   emits inside hero and band markup; without this exclusion that wrapper is
   painted as one solid ink-black bar behind the buttons it contains. */
.r-cta:not(.wp-block-buttons) {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 0;
	border-radius: 0;
	background: var(--sq-ink);
	color: #fff !important;
	font: 700 12.5px/1 var(--sq-font-display);
	letter-spacing: .01em;
	white-space: nowrap;
	transition: background .2s;
}

.r-header .r-cta {
	padding: 12px 18px;
}

.r-footer .r-cta {
	padding: 15px 24px;
	font-size: 13px;
}

.r-cta:not(.wp-block-buttons):hover {
	background: var(--sq-ink2);
}

.r-mobtoggle {
	display: none;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	padding: 0;
	border: 1px solid #d8d3c6;
	border-radius: 0;
	background: #fff;
	color: var(--sq-ink);
	cursor: pointer;
	font: 400 20px/1 var(--sq-font-body);
}

.r-mobpanel {
	display: none;
	max-height: 72vh;
	overflow: auto;
	padding: 8px 22px 22px;
	background: #fff;
	border-top: 1px solid var(--sq-line3);
}

.r-mobpanel .r-menu {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0 18px;
}

.r-mobpanel .r-menu > li {
	padding: 7px 2px;
	border-bottom: 1px solid #f0ece0;
}

.r-mobpanel .r-menu a {
	color: var(--sq-ink);
	font: 600 13.5px/1.3 var(--sq-font-body);
}

.r-mobpanel .r-menu .sub-menu {
	margin: 7px 0 0;
	padding-left: 14px;
	list-style: none;
}

.r-mobpanel .r-menu .sub-menu a {
	display: block;
	padding: 5px 0;
	font-size: 12.5px;
}

.r-mobpanel .r-cta {
	display: block;
	margin-top: 16px;
	padding: 15px;
	text-align: center;
	font-size: 13px;
}

.r-footer {
	padding: 64px 48px 30px;
	background: var(--sq-footer);
	border-top: 1px solid #e0dccf;
	color: #4a473f;
	font-family: var(--sq-font-body);
}

.r-innerpad {
	max-width: var(--sq-shell-width);
	margin: 0 auto;
}

.r-footer__intro {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	justify-content: space-between;
	gap: 24px;
	padding-bottom: 36px;
	border-bottom: 1px solid #e0dccf;
}

.r-footer__brand {
	max-width: 340px;
}

.r-footer__logo,
.r-footer__logo img,
.r-footer__logo .custom-logo {
	display: block;
	width: auto;
	height: 52px;
}

.r-footer__brand p {
	margin: 16px 0 0;
	color: #4a473f;
	font: 400 13.5px/1.55 var(--sq-font-body);
}

.r-footcols.r-footcols {
	display: grid;
	grid-template-columns: 1fr 1fr 1.7fr 1.35fr;
	gap: 32px;
	padding: 38px 0;
}

.r-footcol {
	min-width: 0;
}

.r-footcol .widget-title,
.r-footcol > .r-footcol__title {
	margin: 0 0 14px;
	color: var(--sq-mute);
	font: 500 10px/1 var(--sq-font-mono);
	letter-spacing: .16em;
	text-transform: uppercase;
}

.r-footcol .widget ul,
.r-footcol .menu {
	margin: 0;
	padding: 0;
	list-style: none;
}

/* The reference builds each link column as `display:flex; flex-direction:column;
   gap:10px`. Ours was a block list carrying the 10px as a per-item margin, which
   is the same rhythm plus a trailing 10px under the last item.
   `.r-footcol--locations` is excluded deliberately: it lays its towns out with
   `columns: 2` (multicol), which a flex container cannot do -- flexing it would
   collapse the two town columns into one. Layout rule stated at (0,3,0) per this
   codebase's specificity convention. */
.r-footcol:not(.r-footcol--locations) .menu {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.r-footcol:not(.r-footcol--locations) .menu-item {
	margin-bottom: 0;
}

/* The reference anchors are block-level and fill the column, giving the whole
   row width as the hit target rather than just the glyphs. */
.r-footcol .menu-item > a {
	display: block;
}

.r-footcol .widget li,
.r-footcol .menu-item {
	margin: 0 0 10px;
	color: var(--sq-body);
	font: 400 13px/1.3 var(--sq-font-body);
}

.r-footcol .widget li a,
.r-footcol .menu-item a {
	color: var(--sq-body);
}

.r-footcol .widget li a:hover,
.r-footcol .menu-item a:hover {
	color: var(--sq-ink);
}

.r-legal {
	padding-top: 22px;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 7px 11px;
	border-top: 1px solid #e0dccf;
	color: var(--sq-mute);
	font: 500 10.5px/1.5 var(--sq-font-mono);
	letter-spacing: .04em;
}

.r-legal__copyright {
	margin-top: 14px;
	color: var(--sq-mute);
	font: 500 10.5px/1.6 var(--sq-font-mono);
	letter-spacing: .04em;
}

/* Gap B: the badge had no author rule anywhere; it inherited .r-legal's plain type. */
.r-legal__badge {
	color: var(--sq-green);
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
}

/* Gap C: authority places a 3px #b7b0a0 dot between legal items. The row's own
   `gap: 7px 11px` supplies the 11px before the dot; this margin supplies the 11px
   after, reproducing the 11 + 3 + 11 rhythm. */
.r-legal > span + span::before {
	content: "";
	display: inline-block;
	width: 3px;
	height: 3px;
	margin-right: 11px;
	border-radius: 50%;
	background: #b7b0a0;
	vertical-align: middle;
}

/* Gap A: the contact column is built from bare <p class="r-footcol__row"> and had no
   type rule, so it inherited .r-footer's 14px. The sibling menu columns are already
   correct via .r-footcol .menu-item a. Declared directly on the element, so it beats
   the inherited value without needing to outrank the ancestor rule. */
.r-footcol__row {
	margin: 0;
	color: var(--sq-body);
	font: 400 13px/1.4 var(--sq-font-body);
}

/* (0,3,0) beats `.r-header a, .r-footer a` at (0,2,0) on specificity, so this holds
   regardless of any future file reordering. */
.r-footer .r-footcol__row a {
	color: var(--sq-body);
}

/* The primary phone number is the one emphasised item in the column. Targeted by an
   explicit class rather than :first-of-type — the first <p> in the column is
   .r-footcol__title, so :first-of-type would match nothing. */
.r-footer .r-footcol__row--primary a {
	color: var(--sq-ink);
	font-weight: 700;
}

/* The reference gives the contact email the green link treatment while the phone
   rows stay body-coloured. Equal specificity (0,2,1) to the `.r-footcol__row a`
   rule above, so it must stay after it. */
.r-footer .r-footcol__row--email a {
	color: var(--sq-green);
}

/* The contact column's rows are bare <p class="r-footcol__row"> siblings carrying
   `margin: 0` (above), inside a plain block container -- so nothing separated the
   phone, email and address lines at all. The reference builds this column as
   `display:flex; flex-direction:column; gap:11px` (SiteFooter, contact.html), the
   same construction the sibling link columns already get at 10px.

   `.r-footcol--locations` is untouched and stays a block: its town list is laid
   out with `columns: 2` (shell.css:47), which a flex container cannot do. */
.r-footcol--contact {
	display: flex;
	flex-direction: column;
	gap: 11px;
}

/* The reference puts 14px under the column title. Once the column flexes, the
   11px gap adds to whatever margin the title carries, so the title's own 14px
   comes down to 3px to keep the measured 14px. Equal specificity (0,2,0) to
   `.r-footcol > .r-footcol__title` above, so it must stay after it. */
.r-footcol--contact > .r-footcol__title {
	margin-bottom: 3px;
}

/* Gap E: label had no author rule; inherited .r-footer's 14px Nunito. */
.r-footcol__label {
	color: var(--sq-mute);
	font: 500 9.5px/1 var(--sq-font-mono);
	letter-spacing: .1em;
	text-transform: uppercase;
}

.r-footer .recaptcha-notice {
	display: block;
	margin-top: .5em;
	color: var(--sq-mute);
	font: 400 .85em/1.5 var(--sq-font-body);
	opacity: .7;
}

@media (max-width: 520px) {
	/* shell.css:39 shrinks the mark to 36px at this width. The reference is a
	   non-responsive page and holds its 44px logo all the way down, which is the
	   fidelity target; this sheet loads later, so the value here wins. The nav
	   row already wraps at 390 and absorbs the extra 8px. */
	.r-header .logo img,
	.r-header .logo .custom-logo,
	.r-header .logo .logo__image {
		max-width: 200px;
		height: 44px;
		max-height: 44px;
	}
}

@media (max-width: 900px) {
	.r-desknav {
		display: none;
	}

	.r-mobtoggle {
		display: inline-flex;
	}
}

@media (max-width: 860px) {
	.r-footcols.r-footcols {
		grid-template-columns: 1fr 1fr;
	}
}

@media (max-width: 520px) {
	.r-footcols.r-footcols {
		grid-template-columns: 1fr;
	}
}