/* ==========================================================================
 * John Morley Toolkit — base: tokens, reset, type, buttons, wordmark.
 *
 * Lime-mortar ground, slate ink, patinated lead and plain-clay red. Headlines
 * in Big Shoulders Display (signwritten trade-van lettering, set in capitals
 * as a headline style, never as small labels); Public Sans for reading.
 * (From the approved mockup, ~/Downloads/johnmorley-mockup/styles.css.)
 *
 * Every widget root carries `jm`; rules are written `.jm .x` (0,2,0) so they
 * beat Hello's resets — including its magenta `button:hover/:focus` (0,1,1) —
 * while Elementor's own control CSS (0,3,0+) still wins.
 * ======================================================================== */

:root {
	--lime: #F2F2F1;
	--lime-2: #E6E6E4;
	--white: #FFFFFF;
	--slate: #2B2B2D;
	--slate-2: #3B3B3E;
	--lead: #808286;
	--lead-l: #C3C5C8;
	--clay: #F26B1D;
	--clay-d: #D9560C;
	--clay-ink: #B84A0A; /* orange for small text on light grounds (4.6:1) */
	--on-clay: #161616; /* text on orange (5.6:1) */
	--clay-soft: #FDEBDD;
	--timber: #B88A5E;
	--mute: #5E5F63;
	--line: #D5D5D3;

	--font-display: "Big Shoulders Display", "Arial Narrow", sans-serif;
	--body: "Public Sans", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;

	--pad: clamp(16px, 3.6vw, 56px);
	--max: 1360px;
	--r: 4px;
	--ease: cubic-bezier(.2, .8, .2, 1);
	--hdr: 72px;

	--fs-h1: clamp(52px, 6.4vw, 104px);
	--fs-h2: clamp(40px, 4.4vw, 68px);
	--fs-lead: clamp(17px, 1.25vw, 19px);
}

body.jm-site { margin: 0; background: var(--lime); color: var(--slate); font: 400 16px/1.6 var(--body); -webkit-font-smoothing: antialiased; overflow-x: clip; }
html:has(body.jm-site) { scroll-padding-top: 100px; overflow-x: hidden; }
body.jm-site .site-main, body.jm-site .page-content, body.jm-site .page-header { margin: 0; padding: 0; max-width: none; }
body.jm-site .page-header .entry-title { display: none; }
/* drawer and pop-up: page scrolling locked (JM.lock) */
html.jm-lock, html.jm-lock body, html.jm-locked, html.jm-locked body { overflow: hidden; overscroll-behavior: none; }
/* Sky360's WhatsApp button (z-index 999999 !important) would float over the pop-up and the menu: out of the way while either is open */
html.jm-lock .sky-whatsapp-widget, html.jm-locked .sky-whatsapp-widget { opacity: 0 !important; visibility: hidden !important; pointer-events: none !important; }

.jm { position: relative; font-family: var(--body); color: var(--slate); line-height: 1.6; -webkit-font-smoothing: antialiased; }
.jm *, .jm *::before, .jm *::after { box-sizing: border-box; }
.jm img { display: block; max-width: 100%; height: auto; }
.jm a { color: inherit; }
.jm h1, .jm h2, .jm h3, .jm h4, .jm p, .jm ul, .jm ol, .jm dl, .jm dd, .jm figure, .jm blockquote, .jm address { margin: 0; }
.jm ul, .jm ol { padding: 0; list-style: none; }
.jm address { font-style: normal; }
.jm button { font: inherit; color: inherit; }
.jm svg { fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.jm :focus-visible { outline: 2px solid var(--clay); outline-offset: 3px; }

.jm .wrap { width: 100%; max-width: var(--max); margin: 0 auto; padding: 0 var(--pad); }
.jm .sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ── type: display capitals for h1/h2 (element or class), Public Sans for reading ── */
.jm h1, .jm h2, .jm .h1, .jm .h2 { font-family: var(--font-display); font-weight: 800; text-transform: uppercase; letter-spacing: .005em; line-height: .92; color: var(--slate); text-wrap: balance; }
.jm h1, .jm .h1 { font-size: var(--fs-h1); }
.jm h2, .jm .h2 { font-size: var(--fs-h2); }
.jm .lead { font-size: var(--fs-lead); line-height: 1.6; color: var(--slate-2); max-width: 56ch; text-wrap: pretty; }
/* small label above a heading (mark_controls / mark()) */
.jm .kicker { margin-bottom: 18px; font-weight: 700; color: var(--clay-ink); }
.jm .kicker--light { color: #FFB27A; }
/* section heading block: heading + intro, or side by side */
.jm .sec-head { display: grid; gap: 18px; max-width: 760px; margin-bottom: 48px; }
.jm .sec-head--row { max-width: none; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: end; gap: 32px; }

/* ── buttons (state rules restate background-color: Hello paints buttons magenta) ── */
.jm .btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 50px; max-width: 100%; margin: 0; padding: 0 24px; border: 2px solid transparent; border-radius: var(--r); background-color: transparent; font: 700 16px/1.2 var(--body); letter-spacing: 0; text-transform: none; text-decoration: none; text-align: center; cursor: pointer; transition: background-color .2s, color .2s, border-color .2s; }
.jm .btn--lg { min-height: 58px; padding: 0 30px; font-size: 17px; }
.jm .btn--clay, .jm .btn--clay:focus { border-color: transparent; background-color: var(--clay); color: var(--on-clay); }
.jm .btn--clay:hover, .jm .btn--clay:focus-visible { background-color: var(--clay-d); color: var(--on-clay); }
.jm .btn--line, .jm .btn--line:focus { border-color: var(--slate); background-color: transparent; color: var(--slate); }
.jm .btn--line:hover, .jm .btn--line:focus-visible { border-color: var(--slate); background-color: var(--slate); color: #fff; }
.jm .btn--white, .jm .btn--white:focus { border-color: transparent; background-color: #fff; color: var(--slate); }
.jm .btn--white:hover, .jm .btn--white:focus-visible { background-color: var(--lime); color: var(--slate); }
.jm .btn:active { transform: translateY(1px); }
/* icon button: menu, close */
.jm .ibtn, .jm .ibtn:hover, .jm .ibtn:focus { display: inline-grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; background-color: transparent; color: inherit; cursor: pointer; }
.jm .ibtn svg { width: 24px; height: 24px; }

/* ── wordmark: a ridge line over the name, "Roofing" set small in lead ── */
.jm .mark { position: relative; display: inline-grid; gap: 2px; padding-top: 10px; color: var(--slate); text-decoration: none; line-height: .9; }
.jm .mark__ridge { position: absolute; left: 0; top: 0; width: 46px; height: 10px; }
.jm .mark__ridge::before { content: ""; position: absolute; inset: 0; background: var(--clay); clip-path: polygon(0 100%, 50% 0, 100% 100%, 86% 100%, 50% 26%, 14% 100%); }
.jm .mark__name { font: 800 30px/.9 var(--font-display); text-transform: uppercase; letter-spacing: .01em; white-space: nowrap; }
.jm .mark__name i { font-style: normal; color: var(--clay); }
.jm .mark__trade { font: 700 13px/1 var(--body); letter-spacing: .32em; text-transform: uppercase; color: var(--lead); }
.jm .mark--sm { padding-top: 0; }
.jm .mark--sm .mark__name { font-size: 24px; }
.jm .mark--light { color: #fff; }
.jm .mark--light .mark__trade { color: var(--lead-l); }
.jm .mark--img img { max-height: 56px; width: auto; }

/* Elementor: sections sit edge to edge */
.elementor-widget[class*="elementor-widget-jm_"] > .elementor-widget-container { margin: 0; padding: 0; }

@media (max-width: 1024px) {
	:root { --hdr: 62px; }
	.jm .sec-head--row { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
	:root { --fs-h1: 50px; --fs-h2: 40px; }
	.jm .mark__name { font-size: 25px; }
}
/* phones: finger-sized targets for small links and buttons (padding grows the target, the negative margin keeps the layout) */
@media (max-width: 640px) {
	.jm .svh__crumbs a, .jm .ph__crumbs a, .jm .ahero__crumbs a { display: inline-block; padding: 13px 0; margin: -13px 0; }
	.jm .alist__gh a, .jm .ahero__facts dd a { display: inline-block; padding: 10px 0; margin: -10px 0; }
	.jm .quote__direct a, .jm .where__tel a { display: inline-block; padding: 8px 0; }
}
@media (prefers-reduced-motion: reduce) {
	/* no transitions at all: a .01ms duration would make every property (font-size too) transition, so scripts that measure right after setting a size read stale values */
	.jm *, .jm *::before, .jm *::after { animation-duration: .01ms !important; animation-delay: 0s !important; transition: none !important; }
}