/*
Theme Name: EWS Child
Description: EWS Child Theme
Author: Effective Web Solutions
Author URI: https://www.effectivewebsolutions.biz/
Template: EWS-Theme
Version: 2.2 "Siren"
Text Domain: EWS-Child
*/
/* =========================================================================
DESIGN TOKENS — the only declaration block outside a media query.
Every colour, radius and shadow offset used anywhere below is defined here
and referenced as a variable. Do not inline hex values elsewhere.
========================================================================= */
:root {
/* Surfaces */
--tan: #DBA85C; /* primary ground - replaces white */
--cream: #F5E3C6; /* cards, inputs, raised surfaces */
--forest-deep: #3A4230; /* dark section ground */
/* Action */
--orange: #E1791F; /* interactive fills only */
--orange-deep: #C4600F; /* shadow / underside only - never a label ground */
/* Ink */
--ink: #1E231C; /* body text, ALL outlines */
--ink-soft: #3A4237; /* secondary text, meta, placeholders */
/* Accents */
--brown: #7E4A26; /* mascot fur, rare secondary fill */
--forest: #4F5A3A; /* small badges / fills only, never a ground */
/* Functional */
--brick: #8F2E17; /* form validation only */
/* Geometry */
--radius-card: 20px;
--radius-btn: 12px;
--radius-pill: 999px;
--shadow-offset: 6px;
--shadow-offset-sm: 3px;
--shadow-offset-lg: 7px; /* closing CTA panel only */
--rule: 2px; /* the universal outline weight */
/* Type families */
--font-display: "Rubik", system-ui, -apple-system, sans-serif;
--font-body: "Hanken Grotesk", system-ui, -apple-system, sans-serif;
/* Fluid type scale (§4) */
--type-display-xl: clamp(2.5rem, 6.5vw, 4.5rem);
--type-display-l: clamp(2rem, 4vw, 3rem);
--type-display-m: clamp(1.625rem, 2.4vw, 1.875rem);
--type-heading-s: clamp(1.25rem, 1.6vw, 1.375rem);
--type-lead: clamp(1.1875rem, 1.7vw, 1.375rem);
--type-body: clamp(1.0625rem, 1.2vw, 1.125rem);
--type-meta: 0.9375rem;
--type-button: 1.0625rem;
--type-micro: 0.8125rem;
/* Spacing (8px base). Two tokens govern every gap on the page: one
between major sections, one between a section heading and its content.
Both halve below 900px. Nothing uses an ad-hoc margin. */
--space-scale: 1; /* 0.5 below 900px */
--space-section: calc(96px * var(--space-scale)); /* between sections */
--space-block: calc(48px * var(--space-scale)); /* heading to content */
--space-64: clamp(40px, 5vw, 64px);
--space-40: 40px;
--space-24: 24px;
--space-16: 16px;
--space-8: 8px;
--container: 1200px;
--header-h: 112px; /* the logo lockup needs the room; see 1.6 */
--header-h-sm: 96px;
/* Parent-theme variables, remapped onto the tokens above */
--line-height-set: 1.6;
--line-height-alt: 1.5;
--theme-font-main: "Hanken Grotesk", system-ui, sans-serif;
--theme-font-secondary: "Hanken Grotesk", system-ui, sans-serif;
--theme-font-headings: "Rubik", system-ui, sans-serif;
--theme-font-menu: "Hanken Grotesk", system-ui, sans-serif;
--button-font: "Hanken Grotesk", system-ui, sans-serif;
--button-bg: var(--orange);
--button-color: var(--ink);
--button-shadow: none;
--button-shadow-hover: none;
--footer-anchor-color: var(--tan);
--menu-toggle-shadow-color: var(--ink);
--menu-toggle-bg: var(--cream);
--themed-bg-color: var(--forest-deep);
--themed-bg-secondary: var(--cream);
--themed-bg-tertiary: var(--orange);
--header-margin-bottom: 0px;
--interactive-element-bg: var(--cream);
--interactive-element-color: var(--ink);
}
/* =========================================================================
BASE — mobile first. Everything below lives inside a media query.
========================================================================= */
@media only screen and (min-width: 1px) {
/* ---------- Page ground and type ---------- */
body {
background: var(--tan);
color: var(--ink);
font-family: var(--font-body);
font-size: var(--type-body);
line-height: 1.6;
-webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4, h5, h6,
.fauxone, .fauxtwo, .fauxthree, .fauxfour {
font-family: var(--font-display);
color: var(--ink);
text-transform: none;
letter-spacing: -0.02em;
}
body h1, body.home h1, body .jm-section h1 {
font-weight: 800; font-size: var(--type-display-xl); line-height: 0.95; letter-spacing: -0.025em;
margin: 0;
}
body h2, body.home h2, body .jm-section h2 {
font-weight: 800; font-size: var(--type-display-l); line-height: 1.0; letter-spacing: -0.02em;
margin: 0;
}
body h3, body.home h3, body .jm-section h3 {
font-weight: 700; font-size: var(--type-display-m); line-height: 1.15; letter-spacing: -0.01em;
}
/* The card, step and before/after titles are H3s, so the outline runs
H2 > H3, but they keep the H4 look. Listed after the H3 rule on purpose. */
body h4, body.home h4, body .jm-section h4,
body .jm-service-card h3, body .jm-step h3, body .jm-ba-body h3 {
font-weight: 700; font-size: var(--type-heading-s); line-height: 1.2; letter-spacing: 0;
}
body .jm-section p,
body .jm-section li { font-size: var(--type-body); line-height: 1.6; }
p { font-size: var(--type-body); line-height: 1.6; max-width: 70ch; }
strong, b { font-weight: 700; }
a { color: var(--ink); }
a:hover, a:focus { color: var(--ink); }
:focus-visible {
outline: var(--rule) solid var(--ink);
outline-offset: 2px;
}
/* Kill the parent theme's decorative page furniture we do not use */
.share-bar,
body.home .before-services,
body.home .after-services,
body.home .svc-sctn,
body.home .blocks-sctn,
.hdr-areas-served:empty,
#menu-social-navigation:empty { display: none; }
/* Header furniture this design does not use. The spec's header is a single
76px row: wordmark, nav, phone, CTA. */
header#header > .top-bar,
header#header > .banner-sa,
.named-grid #menu-social-navigation { display: none; }
/* Full-bleed content column on the home page */
body.home #content,
body.home .content-section,
body.home #content .entry {
max-width: none;
width: 100%;
padding: 0;
margin: 0;
}
body.home #content .entry > * { margin-top: 0; margin-bottom: 0; }
/* =====================================================================
COMPONENT LIBRARY (§6)
Every raised surface: flat fill, 2px ink outline, hard solid offset
shadow, and it visibly presses down on click.
===================================================================== */
/* ---------- Buttons ---------- */
.jm-btn:not(#jm),
body.home .entry .wp-block-button__link:not(#jm),
.gform_wrapper .gform_footer button.gform_button:not(#jm),
.gform_wrapper .gform-footer button.gform_button:not(#jm),
.gform_wrapper .gform_page_footer button.gform_button:not(#jm) {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--space-8);
background: var(--orange);
color: var(--ink);
border: var(--rule) solid var(--ink);
border-radius: var(--radius-btn);
padding: 15px 28px;
font-family: var(--font-body);
font-weight: 700;
font-size: var(--type-button);
line-height: 1;
letter-spacing: 0.01em;
text-decoration: none;
cursor: pointer;
box-shadow: 0 4px 0 var(--orange-deep), 0 4px 0 var(--rule) var(--ink);
transition: transform 80ms linear, box-shadow 80ms linear;
text-transform: none;
}
.jm-btn:hover:not(#jm),
body.home .entry .wp-block-button__link:hover:not(#jm),
.gform_wrapper .gform_footer button.gform_button:hover:not(#jm),
.gform_wrapper .gform-footer button.gform_button:hover:not(#jm) {
color: var(--ink);
transform: translateY(2px);
box-shadow: 0 2px 0 var(--orange-deep), 0 2px 0 var(--rule) var(--ink);
}
.jm-btn:active:not(#jm),
body.home .entry .wp-block-button__link:active:not(#jm),
.gform_wrapper .gform_footer button.gform_button:active:not(#jm),
.gform_wrapper .gform-footer button.gform_button:active:not(#jm) {
transform: translateY(4px);
box-shadow: 0 0 0 var(--orange-deep), 0 0 0 var(--rule) var(--ink);
}
.jm-btn:focus-visible:not(#jm),
body.home .entry .wp-block-button__link:focus-visible:not(#jm),
.gform_wrapper .gform_footer button.gform_button:focus-visible:not(#jm),
.gform_wrapper .gform-footer button.gform_button:focus-visible:not(#jm) {
outline: var(--rule) solid var(--cream);
outline-offset: 0;
box-shadow: 0 0 0 5px var(--ink), 0 4px 0 var(--orange-deep);
}
.jm-btn--secondary:not(#jm) {
background: var(--cream);
box-shadow: 0 4px 0 var(--brown), 0 4px 0 var(--rule) var(--ink);
}
.jm-btn--secondary:hover:not(#jm) { box-shadow: 0 2px 0 var(--brown), 0 2px 0 var(--rule) var(--ink); }
.jm-btn--secondary:active:not(#jm) { box-shadow: 0 0 0 var(--brown), 0 0 0 var(--rule) var(--ink); }
/* Home page Buttons blocks (.jm-btn-row): the EWS Phone Button is a core
button, so it takes the secondary look from its wrapper class. The
wrapper is a flex box so the link sizes like a bare .jm-btn would. */
body.home .entry .jm-btn-row > .wp-block-button { display: flex; margin: 0; }
body.home .entry .jm-phone-btn > .wp-block-button__link:not(#jm) {
background: var(--cream);
box-shadow: 0 4px 0 var(--brown), 0 4px 0 var(--rule) var(--ink);
}
body.home .entry .jm-phone-btn > .wp-block-button__link:hover:not(#jm) { box-shadow: 0 2px 0 var(--brown), 0 2px 0 var(--rule) var(--ink); }
body.home .entry .jm-phone-btn > .wp-block-button__link:active:not(#jm) { box-shadow: 0 0 0 var(--brown), 0 0 0 var(--rule) var(--ink); }
body.home .entry .jm-phone-btn > .wp-block-button__link:focus-visible:not(#jm) { box-shadow: 0 0 0 5px var(--ink), 0 4px 0 var(--orange-deep); }
.jm-btn--block { display: flex; width: 100%; }
.jm-btn--tertiary:not(#jm) {
background: none;
border: 0;
border-bottom: var(--rule) solid var(--ink);
border-radius: 0;
box-shadow: none;
padding: 2px 0;
color: var(--ink);
}
.jm-btn--tertiary:hover:not(#jm) {
transform: none;
box-shadow: none;
border-bottom-width: 3px;
}
/* On forest-deep: outline flips to cream */
.jm-section--dark .jm-btn:not(#jm) { border-color: var(--cream); }
.jm-section--dark .jm-btn:not(#jm) { box-shadow: 0 4px 0 var(--orange-deep), 0 4px 0 var(--rule) var(--cream); }
.jm-section--dark .jm-btn:hover:not(#jm) { box-shadow: 0 2px 0 var(--orange-deep), 0 2px 0 var(--rule) var(--cream); }
.jm-section--dark .jm-btn--secondary:not(#jm) {
background: none;
color: var(--cream);
box-shadow: 0 4px 0 var(--forest), 0 4px 0 var(--rule) var(--cream);
}
/* ---------- Card ---------- */
.jm-card {
background: var(--cream);
border: var(--rule) solid var(--ink);
border-radius: var(--radius-card);
padding: 28px;
box-shadow: var(--shadow-offset) var(--shadow-offset) 0 var(--ink);
transition: transform 120ms linear, box-shadow 120ms linear;
}
/* ---------- Photos: same treatment as cards ---------- */
.jm-photo,
.jm-photo img,
body.home .entry .wp-block-image.jm-photo img {
border-radius: var(--radius-card);
}
.jm-photo img,
body.home .entry .wp-block-image.jm-photo img {
display: block;
width: 100%;
height: auto;
border: var(--rule) solid var(--ink);
box-shadow: var(--shadow-offset) var(--shadow-offset) 0 var(--ink);
}
body.home .entry .wp-block-image { margin: 0; }
body.home .entry .wp-block-image figcaption { display: none; }
/* ---------- Chip ---------- */
.jm-chip {
display: inline-block;
background: var(--cream);
border: var(--rule) solid var(--ink);
border-radius: var(--radius-pill);
padding: 12px 22px;
font-family: var(--font-body);
font-weight: 700;
font-size: var(--type-body);
line-height: 1.2;
color: var(--ink);
box-shadow: var(--shadow-offset-sm) var(--shadow-offset-sm) 0 var(--ink);
}
/* ---------- Step badge ---------- */
.jm-step-badge {
width: 44px;
height: 44px;
border-radius: 50%;
background: var(--orange);
border: var(--rule) solid var(--ink);
color: var(--ink);
font-family: var(--font-display);
font-weight: 800;
font-size: 24px;
line-height: 1;
display: flex;
align-items: center;
justify-content: center;
flex: 0 0 auto;
}
/* ---------- Section scaffolding ---------- */
.jm-section {
width: 100%;
margin: 0;
padding: var(--space-section) var(--space-24);
background: var(--tan);
box-sizing: border-box;
}
.jm-section > .fixed-width-cont {
max-width: var(--container);
width: 100%;
margin: 0 auto;
}
.jm-section--dark { background: var(--forest-deep); }
.jm-section--dark,
.jm-section--dark p,
.jm-section--dark h2,
.jm-section--dark h3,
.jm-section--dark h4 { color: var(--cream); }
/* Beats .one_full.nomargin from the parent theme and the column reset
above, so the heading-to-content gap is always --space-block. */
.jm-section .jm-section-head,
.jm-section .jm-section-head.nomargin { margin: 0 0 var(--space-block); }
body .jm-section-head h2 { margin: 0 0 var(--space-16); }
.jm-section-head p { margin: 0; font-size: var(--type-lead); color: var(--ink-soft); }
.jm-section--dark .jm-section-head p { color: var(--tan); }
.jm-section-head--center { text-align: center; }
.jm-section-head--center p { margin-left: auto; margin-right: auto; }
.jm-row { width: 100%; margin: 0; }
.jm-col { margin: 0; }
/* The parent theme sizes every EWS column with .one_third.nomargin-style
rules. Neutralise them inside our sections and set the widths we want
explicitly further down, otherwise a card ends up a third of a third. */
.jm-section .one_full,
.jm-section .one_half,
.jm-section .one_third,
.jm-section .two_third,
.jm-section .one_fourth,
.jm-section .three_fourth,
.jm-section .one_fifth,
.jm-section .two_fifth,
.jm-section .three_fifth,
.jm-section .four_fifth,
.jm-section .fixed-width-cont {
width: auto;
max-width: none;
float: none;
margin: 0;
line-height: inherit;
}
.jm-section > .fixed-width-cont { max-width: var(--container); margin: 0 auto; }
/* =====================================================================
1 · HEADER (§7 · 1)
===================================================================== */
.named-grid .wrap > header#header {
position: sticky;
top: 0;
z-index: 900;
background: var(--tan);
border-bottom: var(--rule) solid var(--ink);
margin-bottom: 0;
}
.admin-bar .named-grid .wrap > header#header { top: 32px; }
/* Below 783px WordPress un-pins its own admin bar, so this offset has to
go with it — otherwise a 32px strip of page shows above the header. */
@media screen and (max-width: 782px) {
.admin-bar .named-grid .wrap > header#header { top: 0; }
}
.content-section > .hentry {
min-width: 0;
}
.named-grid .head-section {
display: grid;
grid-template-columns: 1fr auto auto;
grid-template-areas: "logo banner-phn site-navigation";
align-items: center;
gap: var(--space-16);
max-width: var(--container);
margin: 0 auto;
padding: var(--space-16) var(--space-24);
min-height: var(--header-h);
box-sizing: border-box;
}
.named-grid .head-section > #Logo { grid-area: logo; margin: 0; }
.named-grid .head-section > .banner-cta { grid-area: banner-cta; margin: 0; }
.named-grid .head-section > .banner-phn { grid-area: banner-phn; margin: 0; }
.named-grid .head-section > #site-navigation { grid-area: site-navigation; margin: 0; }
.named-grid .head-section > #menu-social-navigation,
.named-grid .head-section > .banner-sa { display: none; }
#Logo a.logo { display: block; line-height: 0; }
#Logo img.logo-wrapper {
display: block;
width: auto;
height: 80px;
max-width: 46vw;
}
/* Header phone: tertiary treatment, not the theme's pill button */
.banner-phn .banner-a { margin: 0; }
.banner-phn a.button.header-phone-one-click:not(#jm) {
display: inline-block;
background: none;
border: 0;
border-bottom: var(--rule) solid var(--ink);
border-radius: 0;
box-shadow: none;
padding: 2px 0;
color: var(--ink);
font-family: var(--font-body);
font-weight: 700;
font-size: var(--type-meta);
line-height: 1.2;
text-transform: none;
white-space: nowrap;
}
.banner-phn a.button.header-phone-one-click:hover:not(#jm) { border-bottom-width: 3px; }
.banner-cta { display: none; }
.banner-cta .jm-header-cta { padding: 11px 20px; font-size: var(--type-meta); white-space: nowrap; }
/* The Header CTA option holds two buttons: #quote on the home page, the
Contact page everywhere else. :not(#jm) matches .jm-btn:not(#jm)'s weight. */
body.home .jm-header-cta--inner:not(#jm),
body:not(.home) .jm-header-cta--home:not(#jm) { display: none; }
/* Nav */
nav#site-navigation.main-navigation,
nav#site-navigation .nav-menu,
nav#site-navigation ul.menu,
nav#site-navigation ul.menu li {
position: static;
background: none;
box-shadow: none;
border: 0;
width: auto;
max-width: none;
min-width: 0;
}
nav#site-navigation .nav-menu ul.menu,
nav#site-navigation .nav-menu > ul {
display: flex;
flex-wrap: wrap;
gap: var(--space-24);
margin: 0;
padding: 0;
list-style: none;
}
nav#site-navigation .nav-menu ul.menu li { border: 0; margin: 0; padding: 0; }
nav#site-navigation .nav-menu ul.menu li a {
display: inline-block;
font-family: var(--font-body);
font-weight: 500;
font-size: var(--type-button);
color: var(--ink);
text-decoration: none;
text-transform: none;
padding: 4px 0;
border-bottom: 3px solid transparent;
}
nav#site-navigation .nav-menu ul.menu li a:hover,
nav#site-navigation .nav-menu ul.menu li.jm-nav-active > a { border-bottom-color: var(--orange); }
/* Dropdowns — "Services" and "Where we go" carry a .sub-menu. */
nav#site-navigation .nav-menu ul.menu > li.menu-item-has-children > a { cursor: pointer; }
nav#site-navigation .nav-menu ul.menu > li.menu-item-has-children > a::after {
float: none;
display: inline-block;
margin: 0 0 0 6px;
vertical-align: middle;
opacity: 1;
border-top-color: var(--ink);
}
nav#site-navigation .nav-menu ul.menu .sub-menu { margin: 0; list-style: none; background: none; }
nav#site-navigation .nav-menu ul.menu .sub-menu li { display: block; }
nav#site-navigation .nav-menu ul.menu .sub-menu li a { display: block; width: auto; border-bottom: 0; }
/* Hamburger */
button#menubutton.menu-toggle:not(#jm) {
background: var(--cream);
color: var(--ink);
border: var(--rule) solid var(--ink);
border-radius: var(--radius-btn);
box-shadow: var(--shadow-offset-sm) var(--shadow-offset-sm) 0 var(--ink);
padding: 10px 14px;
font-size: 18px;
line-height: 1;
text-shadow: none;
}
button#menubutton.menu-toggle:hover:not(#jm) {
transform: translateY(1px);
box-shadow: 2px 2px 0 var(--ink);
}
/* =====================================================================
2 · HERO (§7 · 2)
===================================================================== */
/* ---------- The swinging monkey (rev 5 · §2, rev 6 · §1) ----------
He belongs to the page, not to the sticky header, so he scrolls away with
the hero. Below 1620px there is no side gutter to hang him in, so he hangs
on the right in a band of his own above the headline. The band is his own
height: reserving it is what keeps him off the text, rather than hoping the
line breaks stay short. 1.721 is the image's height over its width. */
.jm-hero {
--jm-swing-w: clamp(110px, 26vw, 150px);
position: relative;
padding-top: max(var(--space-section),
calc(var(--jm-swing-w) * 1.721 + var(--space-16)));
padding-bottom: var(--space-section);
/* Mid-swing he pokes past the right edge and widened the page.
clip, not hidden: hidden makes a scroll container, which would cut
him off at the top where he hangs over the header rule. */
overflow-x: clip;
}
.jm-swing {
position: absolute;
top: calc(var(--rule) * -1); /* his fingers close over the header rule */
/* Clear of the menu button: its left edge sits 72px in from the right. */
right: max(12vw, 80px);
width: var(--jm-swing-w);
z-index: 901; /* in front of the rule, which is z-index 900 */
pointer-events: none; /* a tap near the header hits the header */
transform-origin: 50% 0; /* the hand, at the top centre */
animation: jm-swing-in 1600ms cubic-bezier(0.22, 0.61, 0.36, 1) 300ms both;
}
/* The moment the page moves he drops behind the header and scrolls away. */
.jm-scrolled .jm-swing { z-index: 1; }
.jm-swing img { display: block; width: 100%; height: auto; transform-origin: 50% 0; }
/* One damped swing, then rest. Transform only. No hover sway here: below
1620px there is no pointer, and on a touch screen it fires on tap and sticks. */
@keyframes jm-swing-in {
0% { transform: rotate(-28deg); }
22% { transform: rotate(16deg); }
42% { transform: rotate(-9deg); }
60% { transform: rotate(5deg); }
78% { transform: rotate(-2deg); }
100% { transform: rotate(0deg); }
}
@keyframes jm-swing-sway {
0%, 100% { transform: rotate(0deg); }
50% { transform: rotate(6deg); }
}
.jm-hero .jm-hero-copy { margin: 0; }
/* The rev 5 tagline is 34 characters against a 536px column. At display-xl
it runs to four lines; the next step down the existing scale settles it at
two, which is what §1 asks for. No new size was added.
It is a , not a heading: the page's one H1 sits in the photo rail. */
body .jm-hero .jm-hero-title {
font-family: var(--font-display); font-weight: 800;
font-size: var(--type-display-l); line-height: 0.95;
letter-spacing: -0.025em; color: var(--ink);
margin: 0 0 var(--space-24); max-width: none;
}
.jm-hero .jm-lead {
font-size: var(--type-lead);
line-height: 1.5;
color: var(--ink);
margin: 0 0 var(--space-40);
max-width: 34ch;
}
.jm-hero .jm-btn-row { display: flex; flex-wrap: wrap; gap: var(--space-16); margin: 0; }
.jm-trust {
margin: var(--space-40) 0 0;
padding-top: var(--space-40);
border-top: var(--rule) solid var(--ink);
display: flex;
flex-wrap: wrap;
align-items: center;
column-gap: 10px;
row-gap: var(--space-8);
font-family: var(--font-body);
font-weight: 500;
font-size: var(--type-meta);
line-height: 1.5;
letter-spacing: 0.005em;
color: var(--ink);
}
.jm-trust__item { display: inline-flex; align-items: center; gap: var(--space-8); }
.jm-trust__item b { font-weight: 700; }
.jm-trust__divider { width: 1px; height: 18px; background: var(--ink); display: inline-block; }
.jm-stars { display: inline-flex; gap: 1px; line-height: 0; }
.jm-stars svg { display: block; }
.jm-hero-scene {
position: relative;
margin: var(--space-block) auto 0;
width: 100%;
}
.jm-hero-scene__plate {
display: block;
width: 100%;
height: auto;
will-change: transform;
}
/* One orchestrated load moment (§5) - text first, scene after */
.jm-anim { opacity: 0; transform: translateY(12px); }
.jm-loaded .jm-anim {
opacity: 1;
transform: translateY(0);
transition: opacity 240ms ease-out, transform 240ms ease-out;
}
.jm-loaded .jm-anim--2 { transition-delay: 80ms; }
.jm-loaded .jm-anim--3 { transition-delay: 160ms; }
/* =====================================================================
2a · QUOTE FORM BAND (§7 · 2a)
===================================================================== */
.jm-quote { padding-left: 0; padding-right: 0; }
.jm-quote > .fixed-width-cont { max-width: 1040px; padding: 0 var(--space-16); box-sizing: border-box; }
.jm-section > .fixed-width-cont,
.jm-rail-row,
footer .footer-widgets { box-sizing: border-box; }
.jm-quote-panel {
position: relative;
background: var(--cream);
border: var(--rule) solid var(--ink);
border-radius: var(--radius-card);
box-shadow: var(--shadow-offset) var(--shadow-offset) 0 var(--ink);
padding: 28px;
margin: 0;
box-sizing: border-box;
}
body .jm-quote-panel h2 {
font-size: var(--type-display-m);
font-weight: 700;
margin: 0 0 var(--space-16);
}
/* The form title is a
so no heading precedes the rail's H1. */
body .jm-quote-panel .jm-quote-title,
body #sidebar .jm-quote-title {
font-family: var(--font-display); font-weight: 700;
font-size: var(--type-display-m); line-height: 1;
letter-spacing: -0.02em; color: var(--ink);
margin: 0 0 var(--space-16); max-width: none;
}
.jm-quote-panel .jm-quote-sub,
#sidebar .jm-quote-sub {
font-size: 1.1875rem;
color: var(--ink-soft);
margin: 0 0 var(--space-40);
max-width: 46ch;
}
/* The sidebar form introduces itself like the home form (widgets block-2,
block-4), with a tighter gap to suit the narrow column. */
#sidebar .jm-quote-sub { margin-bottom: var(--space-24); max-width: none; }
/* Hooked over the card's top edge. He is a positioned child, so the
card's own 2px ink outline paints behind him and reads as the ledge
his hands are gripping. */
.jm-quote-peek {
position: absolute;
right: 8%;
bottom: calc(100% - 3px);
width: 130px;
height: auto;
z-index: 2;
pointer-events: none;
}
.jm-quote-note {
margin: var(--space-16) 0 0;
text-align: center;
font-size: var(--type-meta);
color: var(--ink-soft);
max-width: none;
}
/* ---------- Gravity Forms: complete override, not a layer ---------- */
.gform_wrapper.gravity-theme,
.gform_wrapper {
font-family: var(--font-body);
color: var(--ink);
margin: 0;
}
.gform_wrapper form { margin: 0; }
.gform_wrapper .gform_fields {
display: grid;
grid-template-columns: repeat(12, 1fr);
gap: var(--space-24);
margin: 0;
padding: 0;
list-style: none;
}
.gform_wrapper .gfield { grid-column: 1 / -1; margin: 0; padding: 0; min-width: 0; }
.gform_wrapper .gfield::before { display: none; }
.gform_wrapper .gfield_visibility_hidden,
.gform_wrapper .gform_hidden { display: none; }
.gform_wrapper .gfield_label,
.gform_wrapper legend.gfield_label {
display: block;
font-family: var(--font-body);
font-weight: 700;
font-size: var(--type-meta);
line-height: 1.4;
color: var(--ink);
text-transform: none;
letter-spacing: 0;
margin: 0 0 var(--space-8);
padding: 0;
}
.gform_wrapper .gfield_required { color: var(--ink); font-weight: 700; }
.gform_wrapper input[type="text"],
.gform_wrapper input[type="email"],
.gform_wrapper input[type="tel"],
.gform_wrapper input[type="url"],
.gform_wrapper input[type="number"],
.gform_wrapper select,
.gform_wrapper textarea {
-webkit-appearance: none;
appearance: none;
display: block;
width: 100%;
box-sizing: border-box;
background: var(--cream);
border: var(--rule) solid var(--ink);
border-radius: var(--radius-btn);
padding: 12px 16px;
font-family: var(--font-body);
font-weight: 400;
font-size: 1.0625rem;
line-height: 1.5;
color: var(--ink);
box-shadow: none;
transition: box-shadow 80ms linear;
min-height: 0;
}
.gform_wrapper textarea { min-height: 116px; resize: vertical; }
.gform_wrapper select {
background-image: none;
padding-right: 44px;
cursor: pointer;
}
.gform_wrapper .ginput_container_select { position: relative; }
.gform_wrapper .ginput_container_select::after {
content: "";
position: absolute;
right: 18px;
top: 50%;
width: 0;
height: 0;
margin-top: -3px;
border-left: 6px solid transparent;
border-right: 6px solid transparent;
border-top: 7px solid var(--ink);
pointer-events: none;
}
/* Required marker and anti-spam field */
.gform_wrapper .gfield_required {
margin-left: 5px;
font-weight: 400;
font-size: var(--type-micro);
color: var(--ink-soft);
}
.gform_wrapper .gform_validation_container,
.gform_wrapper .gfield--type-honeypot,
.gform_wrapper li.gform_validation_container { display: none !important; }
.gform_wrapper input::placeholder,
.gform_wrapper textarea::placeholder { color: var(--ink-soft); opacity: 1; }
/* The parent theme puts a blurred inset shadow on every input. Radios,
checkboxes and hidden inputs fall outside the typed selectors above, so
clear it for anything inside the form. */
.gform_wrapper input,
.gform_wrapper select,
.gform_wrapper textarea,
.gform_wrapper .gfield-choice-input { box-shadow: none; }
/* Radio and checkbox: the same flat outlined object as everything else. */
.gform_wrapper .gfield-choice-input,
.gform_wrapper input[type="radio"],
.gform_wrapper input[type="checkbox"] {
-webkit-appearance: none;
appearance: none;
width: 22px;
height: 22px;
margin: 0 10px 0 0;
background: var(--cream);
border: var(--rule) solid var(--ink);
vertical-align: -4px;
cursor: pointer;
}
.gform_wrapper input[type="radio"],
.gform_wrapper .gfield-choice-input[type="radio"] { border-radius: 50%; }
.gform_wrapper input[type="checkbox"],
.gform_wrapper .gfield-choice-input[type="checkbox"] { border-radius: 6px; }
.gform_wrapper input[type="radio"]:checked,
.gform_wrapper .gfield-choice-input[type="radio"]:checked { background: var(--orange); box-shadow: inset 0 0 0 3px var(--cream); }
.gform_wrapper input[type="checkbox"]:checked,
.gform_wrapper .gfield-choice-input[type="checkbox"]:checked { background: var(--orange); }
.gform_wrapper .gfield_radio label,
.gform_wrapper .gfield_checkbox label {
font-family: var(--font-body);
font-size: var(--type-body);
color: var(--ink);
cursor: pointer;
}
.gform_wrapper .gfield_radio .gchoice,
.gform_wrapper .gfield_checkbox .gchoice {
display: flex;
align-items: center;
min-height: 44px;
}
.gform_wrapper input:focus,
.gform_wrapper select:focus,
.gform_wrapper textarea:focus {
outline: none;
border-color: var(--ink);
box-shadow: 0 0 0 var(--rule) var(--ink);
}
.gform_wrapper input:focus-visible,
.gform_wrapper select:focus-visible,
.gform_wrapper textarea:focus-visible {
outline: var(--rule) solid var(--ink);
outline-offset: 2px;
}
/* Gravity Forms lays an invisible upload layer (.moxie-shim) over "Select
files" and positions it once, on load. If the page then narrows, the
stale layer would stick out and widen the page; custom-scripts.js moves
it back on resize, and this keeps it from widening the page meanwhile.
Nothing visible in this box reaches its edge. */
.gform_wrapper .gform_fileupload_multifile { overflow: hidden; }
/* File upload: ink dashed outline */
.gform_wrapper .gform_fileupload_multifile .gform_drop_area,
.gform_wrapper .gfield--type-fileupload .gform_drop_area {
background: var(--cream);
border: var(--rule) dashed var(--ink);
border-radius: var(--radius-btn);
padding: 20px;
text-align: center;
color: var(--ink-soft);
box-shadow: none;
}
.gform_wrapper .gform_button_select_files:not(#jm) {
background: var(--cream);
color: var(--ink);
border: var(--rule) solid var(--ink);
border-radius: var(--radius-btn);
box-shadow: var(--shadow-offset-sm) var(--shadow-offset-sm) 0 var(--ink);
padding: 10px 18px;
font-family: var(--font-body);
font-weight: 700;
font-size: var(--type-meta);
cursor: pointer;
}
.gform_wrapper .gform_drop_instructions { display: block; margin-bottom: var(--space-8); }
.gform_wrapper .gfield_description,
.gform_wrapper .gform_fileupload_rules {
font-size: var(--type-meta);
color: var(--ink-soft);
padding: var(--space-8) 0 0;
margin: 0;
}
.gform_wrapper .gform_delete_file,
.gform_wrapper .gform_delete { color: var(--brick); }
/* Footer / submit */
.gform_wrapper .gform_footer,
.gform_wrapper .gform-footer,
.gform_wrapper .gform_page_footer {
margin: var(--space-40) 0 0;
padding: 0;
display: block;
}
.gform_wrapper .gform_footer button.gform_button,
.gform_wrapper .gform-footer button.gform_button { width: 100%; }
/* ---------- Validation (rev 3 §3.3) ----------
Brick outline plus the sentence, never colour on its own. No fill wash,
no icon, no blur — on the field, the summary or the focus ring. */
.gform_wrapper .gfield_error input,
.gform_wrapper .gfield_error select,
.gform_wrapper .gfield_error textarea,
.gform_wrapper .gfield_error .gform_drop_area {
border-color: var(--brick);
}
.gform_wrapper .gfield_error input:focus,
.gform_wrapper .gfield_error select:focus,
.gform_wrapper .gfield_error textarea:focus {
box-shadow: 0 0 0 var(--rule) var(--brick);
}
/* Inline message, directly beneath its own field, at body size. */
.gform_wrapper .gfield_validation_message,
.gform_wrapper .validation_message {
background: none;
border: 0;
border-radius: 0;
color: var(--brick);
font-family: var(--font-body);
font-weight: 400;
font-size: var(--type-body);
line-height: 1.5;
text-align: left;
padding: 0;
margin: var(--space-8) 0 0;
}
/* The summary block: a cream card with a brick outline and the same solid
offset shadow every other raised surface on the page carries. */
.gform_wrapper .gform_validation_errors,
.gform_wrapper .gform_submission_error {
background: var(--cream);
border: var(--rule) solid var(--brick);
border-radius: var(--radius-card);
box-shadow: var(--shadow-offset) var(--shadow-offset) 0 var(--brick);
color: var(--brick);
font-family: var(--font-body);
font-size: var(--type-body);
padding: var(--space-24);
margin: 0 0 var(--space-block);
}
.gform_wrapper .gform_validation_errors > h2,
.gform_wrapper .gform_submission_error {
font-family: var(--font-display);
font-weight: 700;
font-size: var(--type-heading-s);
line-height: 1.3;
letter-spacing: -0.01em;
color: var(--brick);
margin: 0;
}
.gform_wrapper .gform_validation_errors > h2::before,
.gform_wrapper .gform_submission_error::before { content: none; }
/* Gravity Forms puts its own glyph in the summary heading; the design
carries the meaning in the sentence instead. */
.gform_wrapper .gform_validation_errors .gform-icon,
.gform_wrapper .gform_submission_error .gform-icon { display: none; }
.gform_wrapper .gform_validation_errors ol,
.gform_wrapper .gform_validation_errors ul {
list-style: none;
margin: var(--space-16) 0 0;
padding: 0;
}
.gform_wrapper .gform_validation_errors li {
margin: 0 0 var(--space-8);
font-size: var(--type-body);
line-height: 1.5;
}
.gform_wrapper .gform_validation_errors li::before { content: none; }
.gform_wrapper .gform_validation_errors li a {
color: var(--brick);
text-decoration: underline;
text-underline-offset: 3px;
}
.gform_wrapper .gform_validation_errors li a:focus-visible {
outline: var(--rule) solid var(--brick);
outline-offset: 2px;
}
.gform_wrapper .gform_required_legend { display: none; }
.gform_wrapper .gform_heading { display: none; }
/* Post-submit confirmation state (§7 · 2a) */
.gform_confirmation_wrapper,
.gform_confirmation_message { margin: 0; }
/* The text confirmation of both site forms (Forms → Settings →
Confirmations), shown in the card or column the form sat in. The title
is one step down the scale from the quote form's title; the text
matches its subtitle. Left-aligned at every width. */
.gform_confirmation_message { text-align: left; }
body .gform_confirmation_message .jm-confirm-title {
font-family: var(--font-display); font-weight: 700;
font-size: var(--type-heading-s); line-height: 1.2;
letter-spacing: -0.01em; color: var(--ink);
margin: 0 0 var(--space-8); max-width: none;
}
body .gform_confirmation_message .jm-confirm-text {
font-size: 1.1875rem; line-height: 1.6;
color: var(--ink-soft);
margin: 0; max-width: none;
}
/* The message already says it, so the home form's note line goes. */
.jm-quote:has(.gform_confirmation_message) .jm-quote-note { display: none; }
.jm-form-success {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--space-24);
}
.ginput_container--name.gf_name_has_2 {
display: flex;
gap: 20px;
}
.ginput_container--name.gf_name_has_2 > span {
width: 50%;
}
/* Wide form (service pages): one field per row until 970px, and the
First/Last sub-labels sit in flow instead of the theme's top: -25px. */
.gform_wrapper.gravity-theme.gf-wide_wrapper .gform_fields > .gfield { grid-column: 1 / -1; }
/* The sidebar is too narrow for half-width fields: one per row. */
#sidebar .gform_wrapper.gravity-theme .gform_fields > .gfield { grid-column: 1 / -1; }
.gform_wrapper.gf-wide_wrapper .gf_name_has_2 label { position: static; }
div#input_1_6 {
display: flex;
gap: 30px;
}
.jm-form-success__text { flex: 1 1 260px; }
body .jm-form-success h3 { margin: 0 0 var(--space-16); }
.jm-form-success p { margin: 0; color: var(--ink-soft); }
.jm-form-success__monkey { width: 160px; height: auto; display: block; flex: 0 0 auto; }
/* =====================================================================
3 · PHOTO RAIL (§7 · 3)
===================================================================== */
.jm-rail { padding-top: var(--space-section); padding-bottom: var(--space-section); }
.jm-rail > .fixed-width-cont { max-width: 1440px; }
/* The page's only H1, above the photos. */
body .jm-rail h1.jm-rail-title {
font-size: var(--type-display-l); line-height: 1;
letter-spacing: -0.02em; max-width: var(--container);
margin: 0 auto var(--space-block);
}
.jm-rail-row {
display: flex;
gap: var(--space-24);
overflow-x: auto;
scroll-snap-type: x mandatory;
-webkit-overflow-scrolling: touch;
padding-bottom: var(--space-8);
scrollbar-width: none;
}
.jm-rail-row::-webkit-scrollbar { display: none; }
.jm-rail-row > .jm-rail-item {
flex: 0 0 78%;
scroll-snap-align: center;
margin: 0;
width: auto;
float: none;
}
.jm-rail-item .wp-block-image { margin: 0; }
.jm-rail-item img {
width: 100%;
height: 100%;
aspect-ratio: 4 / 3;
object-fit: cover;
}
/* =====================================================================
4 · SERVICES (§7 · 4)
===================================================================== */
.jm-services > .fixed-width-cont {
display: grid;
grid-template-columns: 1fr;
gap: var(--space-24);
}
.jm-services .jm-section-head { grid-column: 1 / -1; }
.jm-services .jm-grid-row { display: contents; }
.jm-services .jm-grid-row::after { display: none; }
.jm-services .jm-service-card,
.jm-service-card {
position: relative;
margin: 0;
width: auto;
max-width: none;
float: none;
display: flex;
background: var(--cream);
border: var(--rule) solid var(--ink);
border-radius: var(--radius-card);
box-shadow: var(--shadow-offset) var(--shadow-offset) 0 var(--ink);
transition: transform 120ms linear, box-shadow 120ms linear;
}
/* flex: the card is a flex row, and a block link inside one shrinks to its
text, which pushed centred lines left of centre on short cards. */
.jm-service-card > a.fb-block-link {
display: block;
flex: 1 1 auto;
min-width: 0;
padding: 28px;
text-decoration: none;
color: var(--ink);
height: 100%;
box-sizing: border-box;
}
.jm-service-card:hover {
transform: translateY(2px);
box-shadow: var(--shadow-offset-sm) var(--shadow-offset-sm) 0 var(--ink);
}
.jm-service-card:focus-within {
outline: var(--rule) solid var(--ink);
outline-offset: 3px;
}
body .jm-service-card :is(h3, h4) { margin: 0 0 var(--space-8); }
.jm-service-card p { margin: 0; color: var(--ink-soft); font-size: var(--type-meta); }
/* The banner card is whichever card carries jm-service-card--main, never
a position or a title. Colours apply at every width; it spans the row
as a banner from 900px up. Border, radius and shadow are the card's. */
.jm-services .jm-service-card--main { background: var(--brown); }
body .jm-service-card--main :is(h3, h4),
.jm-service-card--main p { color: var(--cream); }
/* =====================================================================
5 · HOW THE ESTIMATE WORKS (§7 · 5)
===================================================================== */
.jm-steps > .fixed-width-cont { position: relative; }
/* The step badge half-overlaps each card's top-left corner, so the rail is
inset by the badge's overhang and the badge never eats the page gutter. */
.jm-steps .jm-steps-row { position: relative; z-index: 1; margin: 0; padding: 0 12px; }
.jm-step {
position: relative;
background: none;
border: var(--rule) solid var(--cream);
border-radius: var(--radius-card);
padding: 24px;
margin: 0 0 36px;
width: auto;
float: none;
box-sizing: border-box;
}
.jm-step .jm-step-badge { position: absolute; top: -22px; left: -12px; }
body .jm-step :is(h3, h4) { color: var(--cream); margin: var(--space-16) 0 var(--space-8); font-size: var(--type-heading-s); }
.jm-step p { color: var(--tan); font-size: 1.0625rem; margin: 0; }
.jm-steps__rule { display: none; }
/* The driver's ink outline sits at roughly 1.5:1 on forest-deep. Eight
stacked drop-shadows, each with a zero radius, fake a 3px cream stroke on the PNG
alpha edge so the tyres and dark areas stop merging into the ground. */
.jm-steps__driver {
display: block;
width: 240px;
max-width: 80%;
height: auto;
margin: var(--space-block) auto 0;
z-index: 2;
pointer-events: none;
filter:
drop-shadow( 3px 0 0 var(--cream))
drop-shadow(-3px 0 0 var(--cream))
drop-shadow( 0 3px 0 var(--cream))
drop-shadow( 0 -3px 0 var(--cream))
drop-shadow( 2px 2px 0 var(--cream))
drop-shadow(-2px 2px 0 var(--cream))
drop-shadow( 2px -2px 0 var(--cream))
drop-shadow(-2px -2px 0 var(--cream));
}
/* =====================================================================
6 · PROJECT SHOWCASE (§7 · 6)
===================================================================== */
.jm-showcase .jm-ba-row { display: flex; flex-direction: column; gap: 32px; }
.jm-showcase .jm-ba-col { width: auto; margin: 0; float: none; display: flex; }
.jm-ba-card {
background: var(--cream);
border: var(--rule) solid var(--ink);
border-radius: var(--radius-card);
box-shadow: var(--shadow-offset) var(--shadow-offset) 0 var(--ink);
overflow: hidden;
margin: 0;
width: 100%;
float: none;
display: flex;
flex-direction: column;
}
.jm-ba-stage {
position: relative;
aspect-ratio: 4 / 5;
background: var(--ink-soft);
}
.jm-ba-photo {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: opacity 320ms ease;
}
.jm-ba-photo--after { opacity: 0; }
.jm-ba-card.is-after .jm-ba-photo--before { opacity: 0; }
.jm-ba-card.is-after .jm-ba-photo--after { opacity: 1; }
.jm-ba-badge {
position: absolute;
top: 16px;
left: 16px;
z-index: 2;
border: var(--rule) solid var(--ink);
border-radius: var(--radius-pill);
padding: 6px 16px;
font-family: var(--font-body);
font-weight: 700;
font-size: var(--type-meta);
line-height: 1.2;
background: var(--cream);
color: var(--ink);
}
.jm-ba-card.is-after .jm-ba-badge { background: var(--forest); color: var(--cream); }
.jm-ba-body {
padding: 20px 24px 24px;
border-top: var(--rule) solid var(--ink);
display: flex;
flex-direction: column;
flex: 1 1 auto;
}
.jm-ba-body .jm-ba-toggle { margin-top: auto; }
body .jm-ba-body :is(h3, h4) { margin: 0 0 4px; }
.jm-ba-body .jm-ba-meta { margin: 0 0 var(--space-16); font-size: var(--type-meta); color: var(--ink-soft); }
.jm-ba-toggle { width: 100%; }
/* =====================================================================
7 · SERVICE AREAS (§7 · 7)
===================================================================== */
.jm-areas .jm-areas-left { position: relative; margin: 0 0 var(--space-block); }
.jm-areas .jm-areas-left p { margin: 0 0 var(--space-24); }
.jm-areas .jm-areas-photo { margin-top: var(--space-block); }
.jm-areas .jm-areas-right { margin: 0; display: flex; flex-direction: column; gap: var(--space-block); }
.jm-chips {
display: flex;
flex-wrap: wrap;
/* Eleven chips in a 592px column wrap 3/4/3/1 at 1920 and leave Mill Plain
on its own. Capping the row here settles them at 3/3/3/2 from 1280 up,
at every type size the vw clamps produce. Chip size is untouched. */
max-width: 520px;
gap: 12px;
margin: 0;
padding: 0;
list-style: none;
}
.jm-chips li { margin: 0; padding: 0; }
.jm-chips li::before { display: none; }
.jm-areas__pointer { display: none; }
/* =====================================================================
8 · THE FAMILY (§7 · 8)
===================================================================== */
.jm-family { text-align: center; }
body .jm-family h2 { margin: 0 0 var(--space-block); }
/* One container split internally, rather than three separate cards — a
different pattern from the service grid so the page does not read as
the same block repeated. */
.jm-family-card {
background: var(--cream);
border: var(--rule) solid var(--ink);
border-radius: var(--radius-card);
box-shadow: var(--shadow-offset) var(--shadow-offset) 0 var(--ink);
display: grid;
grid-template-columns: 1fr;
text-align: left;
overflow: hidden;
}
.jm-family-col {
display: flex;
flex-direction: column;
gap: 6px;
padding: 28px;
}
.jm-family-col + .jm-family-col { border-top: var(--rule) solid var(--ink); }
.jm-family-label {
font-family: var(--font-body);
font-weight: 700;
font-size: var(--type-micro);
letter-spacing: 0.06em;
text-transform: none;
color: var(--ink-soft);
}
.jm-family-line {
font-family: var(--font-display);
font-weight: 700;
font-size: var(--type-heading-s);
line-height: 1.25;
letter-spacing: -0.01em;
color: var(--ink);
}
/* =====================================================================
9 · FAQ (§7 · 9)
===================================================================== */
.jm-faq > .fixed-width-cont { max-width: 720px; }
body .jm-faq h2 { text-align: center; margin: 0 0 var(--space-64); }
.jm-faq-list { border-radius: var(--radius-card); overflow: hidden; }
.jm-faq-row {
background: var(--cream);
border: var(--rule) solid var(--ink);
margin: 0;
}
.jm-faq-row + .jm-faq-row { border-top: none; }
.jm-faq-row:first-child { border-top-left-radius: var(--radius-card); border-top-right-radius: var(--radius-card); }
.jm-faq-row:last-child { border-bottom-left-radius: var(--radius-card); border-bottom-right-radius: var(--radius-card); }
.jm-faq-row summary {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-16);
font-family: var(--font-display);
font-weight: 700;
font-size: 1.25rem;
line-height: 1.3;
color: var(--ink);
padding: 20px 24px;
cursor: pointer;
list-style: none;
}
.jm-faq-row summary::-webkit-details-marker { display: none; }
.jm-faq-row summary::after {
content: "\f078";
font-family: "Font Awesome 5 Free";
font-weight: 900;
font-size: 15px;
color: var(--ink);
flex: 0 0 auto;
transition: transform 160ms linear;
}
.jm-faq-row[open] summary::after { transform: rotate(180deg); }
.jm-faq-row p {
font-family: var(--font-body);
font-weight: 400;
font-size: var(--type-body);
line-height: 1.6;
color: var(--ink-soft);
padding: 0 24px 20px;
margin: 0;
}
/* =====================================================================
9A · HOMEPAGE CONTENT BLOCK (rev 4 · §2-3)
Long-form copy parked below the FAQ. Two paragraphs are visible; the
rest sits inside a so the text stays in the page source but
nobody has to scroll past it to reach the form. No mascot, no icons.
===================================================================== */
/* The card runs the full content width (§3); only the type is capped. */
body .jm-content h2 { margin: 0 0 var(--space-block); }
.jm-content-card {
background: var(--cream);
border: var(--rule) solid var(--ink);
border-radius: var(--radius-card);
box-shadow: var(--shadow-offset) var(--shadow-offset) 0 var(--ink);
padding: 32px 28px;
margin: 0;
box-sizing: border-box;
}
/* The card runs the full content width; the text does not. 65ch is the
measure, and it is set on the text itself so the card keeps its width. */
.jm-content-card p,
.jm-content-card h3 { max-width: 65ch; }
body .jm-content-card p {
font-family: var(--font-body);
font-size: var(--type-body);
line-height: 1.6;
color: var(--ink-soft);
margin: 0 0 var(--space-16);
}
body .jm-content-card h3 {
font-size: var(--type-heading-s);
color: var(--ink);
margin: var(--space-24) 0 var(--space-8);
}
.jm-content-card > *:last-child { margin-bottom: 0; }
/* ---------- Read more / Show less ----------
A native . The hidden copy is in the markup at all times; the
summary is the button, so keyboard operation and the expanded/collapsed
announcement are the browser's, not ours. Styled as the secondary
button (cream fill, ink outline, ink label) — never the orange one. */
.jm-content-more { margin: var(--space-24) 0 0; }
.jm-content-more > summary {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 44px;
padding: 12px var(--space-24);
font-family: var(--font-body);
font-weight: 700;
font-size: var(--type-button);
line-height: 1;
letter-spacing: 0.01em;
color: var(--ink);
background: var(--cream);
border: var(--rule) solid var(--ink);
border-radius: var(--radius-btn);
box-shadow: 0 4px 0 var(--brown), 0 4px 0 var(--rule) var(--ink);
cursor: pointer;
list-style: none;
transition: transform 80ms linear, box-shadow 80ms linear;
}
.jm-content-more > summary::-webkit-details-marker { display: none; }
.jm-content-more > summary:hover {
transform: translateY(2px);
box-shadow: 0 2px 0 var(--brown), 0 2px 0 var(--rule) var(--ink);
}
.jm-content-more > summary:active {
transform: translateY(4px);
box-shadow: 0 0 0 var(--brown), 0 0 0 var(--rule) var(--ink);
}
.jm-content-more > summary:focus-visible {
outline: var(--rule) solid var(--cream);
outline-offset: 0;
box-shadow: 0 0 0 5px var(--ink), 0 4px 0 var(--brown);
}
/* Opening reveals; it does not animate. Nothing here touches height. */
.jm-content-more[open] > summary { margin-bottom: var(--space-24); }
.jm-content-more > *:last-child { margin-bottom: 0; }
/* =====================================================================
10 · CLOSING CTA (§7 · 10)
===================================================================== */
.jm-cta > .fixed-width-cont { max-width: 900px; }
.jm-cta-panel {
position: relative;
background: var(--cream);
border: var(--rule) solid var(--ink);
border-radius: var(--radius-card);
box-shadow: var(--shadow-offset-lg) var(--shadow-offset-lg) 0 var(--ink);
padding: 32px 28px;
text-align: center;
margin: 0;
box-sizing: border-box;
}
body .jm-cta-panel h2 { margin: 0 0 var(--space-16); }
.jm-cta-panel p { margin: 0 auto var(--space-40); color: var(--ink-soft); font-size: var(--type-lead); }
.jm-cta-panel .jm-btn-row { display: flex; flex-wrap: wrap; gap: var(--space-16); justify-content: center; }
/* Inside the card on a stacked layout: centred under the buttons, with its
own ground shadow and the card's normal padding still beneath it. */
.jm-cta__hauler {
display: block;
width: 160px;
height: auto;
margin: var(--space-block) auto 0;
}
/* =====================================================================
11 · FOOTER (§7 · 11)
===================================================================== */
footer { background: var(--forest-deep); margin: 0; }
footer #footer {
box-sizing: border-box;
background: var(--forest-deep);
border-top: var(--rule) solid var(--cream);
padding: var(--space-section) 0 var(--space-block);
}
footer .footer-widgets { text-align: left; }
footer .ft-wdg { padding: 0; }
footer .widget-container { margin: 0; }
footer,
footer p,
footer li,
footer td,
footer .hc-brand,
footer .hc-add,
footer .hc-phone { color: var(--cream); font-family: var(--font-body); }
body footer .ft-wdg .fauxthree,
body footer .ft-wdg h3,
body footer .ft-wdg .wp-block-heading,
body footer .widget-container > .fauxthree {
font-family: var(--font-display);
font-weight: 700;
font-size: 1.125rem;
color: var(--cream);
text-transform: none;
letter-spacing: 0;
margin: 0 0 var(--space-16);
text-align: center;
}
body footer .hc-brand {
font-family: var(--font-display);
font-weight: 800;
font-size: 1.375rem;
letter-spacing: -0.01em;
margin-bottom: var(--space-8);
}
footer a, footer a:hover, footer .footer-nap, footer .maplink {
color: var(--cream);
text-decoration: underline;
text-decoration-color: var(--cream);
text-decoration-thickness: var(--rule);
text-underline-offset: 3px;
}
footer .hc-add { margin-bottom: var(--space-8); }
footer .hc-phone { margin-bottom: var(--space-8); }
footer ul { list-style: none; margin: 0; padding: 0; }
footer ul li { margin: 0 0 var(--space-8); font-size: var(--type-meta); line-height: 1.5; }
footer ul li::before { display: none; }
footer .jm-foot-note { font-size: var(--type-meta); color: var(--tan); margin: var(--space-16) 0 0; }
/* The contractor's licence (rev 6 · §0). Plain cream text at the footer's own
body size — the global paragraph size is two steps larger and would shout. */
footer .jm-foot-licence {
font-size: var(--type-meta);
color: var(--cream);
margin: var(--space-8) 0 0;
max-width: none;
}
/* The theme's own serving widget carries the towns as one wrapping line,
"Vancouver · Battle Ground · ...". Non-breaking spaces inside two-word
towns and before each dot (typed into the widget) keep a town whole and
stop a line from starting with a dot. */
footer .ftr-serving-title {
white-space: normal;
text-align: center;
font-size: var(--type-meta);
line-height: 1.9;
color: var(--cream);
}
footer .sub-ftr { background: var(--forest-deep); }
footer .sub-ftr-section {
box-sizing: border-box;
max-width: var(--container);
margin: 0 auto;
padding: var(--space-24) var(--space-24) var(--space-40);
border-top: 1px solid var(--forest);
display: flex;
flex-wrap: wrap;
gap: var(--space-16);
align-items: center;
justify-content: space-between;
}
footer .copy-ftr,
footer .menu-ftr a {
font-family: var(--font-body);
font-weight: 500;
font-size: var(--type-micro);
line-height: 1.45;
letter-spacing: 0.01em;
color: var(--tan);
}
footer .menu-ftr ul.menu { display: flex; flex-wrap: wrap; gap: var(--space-16); }
footer .menu-ftr ul.menu li { margin: 0; }
.cbox {
background-image: none !important;
}
.cbox h4, .cbox i {
color: #e1791f;
}
/* Utility */
.jm-visually-hidden {
position: absolute;
width: 1px; height: 1px;
margin: -1px; padding: 0;
overflow: hidden;
clip-path: inset(50%);
white-space: nowrap;
border: 0;
}
.jm-icon { display: inline-block; vertical-align: -0.1em; line-height: 0; }
.jm-icon svg { display: block; }
/* ---------- Inline SVG brand marks (§9) ----------
Fill and stroke come from the tokens, never from an inline hex. */
.jm-svg { display: block; }
.jm-svg__star { fill: var(--ink); stroke: var(--ink); }
/* Anchor targets clear the sticky header */
#quote, #services, #our-work, #where-we-go, #about, #faq {
scroll-margin-top: calc(var(--header-h) + var(--space-16));
}
}
/* =========================================================================
400px
========================================================================= */
@media only screen and (min-width: 400px) {
.jm-quote-panel { padding: 32px; }
.jm-cta-panel { padding: 40px 32px; }
}
/* =========================================================================
600px — three-column grids collapse 3 -> 2 here
========================================================================= */
@media only screen and (min-width: 600px) {
.jm-services > .fixed-width-cont { grid-template-columns: repeat(2, 1fr); }
/* The EWS clearfix is a grid item too. With an even number of cards in two
columns it opens a row of its own and adds a 24px gap under the grid.
Only the grid section: the services intro above it shares the class. */
body.home .jm-services:has(.jm-service-card) > .fixed-width-cont::after { display: none; }
.jm-rail-row {
overflow: visible;
scroll-snap-type: none;
align-items: center;
}
.jm-rail-row > .jm-rail-item { flex: 1 1 0; }
.jm-rail-item--1,
.jm-rail-item--2,
.jm-rail-item--3 { transform: none; }
.jm-form-success__monkey { width: 200px; }
.jm-cta__hauler { width: 200px; }
}
/* =========================================================================
768px
========================================================================= */
@media only screen and (min-width: 768px) {
.jm-quote-panel { padding: 40px; }
/* Keeps the Trustindex widget from stretching the page before it initialises.
Full width only without a sidebar, so the parent's 68% column survives. */
.content-section > .hentry { min-width: 0; }
#content:not(.with-sidebar) > .content-section > .hentry { width: 100%; }
}
/* =========================================================================
900px — desktop layout
========================================================================= */
@media only screen and (min-width: 900px) {
/* Home sections share one tan ground, so 96px top and bottom stacked into
192px between them (288px under the hero). 72px each way gives an even
144px between every pair. The hero keeps its top padding, which is sized
for the swinging monkey. The peeking monkey still starts below the fold
at 1440x900 (rev 5 §2.4). */
body.home .jm-section { padding-bottom: 72px; }
body.home .jm-section:not(.jm-hero) { padding-top: 72px; }
/* Nothing may add hidden space at a section's end: the EWS clearfix would
be an extra grid item (plus a 24px gap) in the services grid, and a
trailing margin would add to the padding. */
body.home .jm-services > .fixed-width-cont::after { display: none; }
body.home .jm-section > .fixed-width-cont > :last-child { margin-bottom: 0; }
/* The reviews widget ends its section, and its own 15px bottom margin
collapses out through the empty wrappers around it. */
body.home .jm-section .ti-widget.ti-goog .ti-widget-container { margin-bottom: 0; }
/* The services intro opens with a heading and closes on a paragraph, so
line spacing adds visible air at both ends, on top of the 8px the rail
above keeps for its photo shadows. 56px brings its visible gaps in line
with the rest. It shares id="services" with the services grid, so it
is picked out as the section right after the rail. */
body.home .jm-rail + .jm-section.jm-services { padding-top: 56px; padding-bottom: 56px; }
.named-grid .head-section {
grid-template-columns: auto 1fr auto auto;
grid-template-areas: "logo site-navigation banner-phn banner-cta";
gap: var(--space-24);
padding: 0 var(--space-24);
height: var(--header-h);
min-height: var(--header-h);
align-content: center;
}
.banner-cta { display: block; }
nav#site-navigation .nav-menu ul.menu {
justify-content: flex-start;
flex-wrap: nowrap;
gap: var(--space-16);
}
nav#site-navigation .nav-menu ul.menu li a { font-size: var(--type-meta); }
#Logo img.logo-wrapper { height: 68px; }
.banner-cta .jm-header-cta { padding: 10px 16px; }
.jm-cta-long { display: none; }
.jm-cta-short { display: inline; }
nav#site-navigation .nav-menu ul.menu li a { white-space: nowrap; }
button#menubutton.menu-toggle { display: none; }
nav#site-navigation .nav-menu { display: block; }
/* Dropdowns open on hover and keyboard focus; the theme only wires them to
the hamburger, which is hidden from here up. */
nav#site-navigation .nav-menu ul.menu > li.menu-item-has-children { position: relative; }
nav#site-navigation .nav-menu ul.menu > li.menu-item-has-children > .sub-menu {
position: absolute;
top: 100%;
left: calc(var(--space-16) * -1);
z-index: 20;
min-width: 260px;
padding: var(--space-8) 0;
text-align: left;
background: var(--cream);
border: var(--rule) solid var(--ink);
border-radius: var(--radius-btn);
box-shadow: var(--shadow-offset-sm) var(--shadow-offset-sm) 0 var(--ink);
}
nav#site-navigation .nav-menu ul.menu > li.menu-item-has-children:hover > .sub-menu,
nav#site-navigation .nav-menu ul.menu > li.menu-item-has-children:focus-within > .sub-menu { display: block; }
nav#site-navigation .nav-menu ul.menu > li.menu-item-has-children > .sub-menu li a {
padding: 8px var(--space-16);
white-space: nowrap;
}
nav#site-navigation .nav-menu ul.menu > li.menu-item-has-children > .sub-menu li a:hover,
nav#site-navigation .nav-menu ul.menu > li.menu-item-has-children > .sub-menu li a:focus { background: var(--tan); }
/* Hero: 6/6 split */
/* 900-1399: the monkey hangs on the right and the copy starts at section
spacing beside him, not below him. He is placed over the house image's
low garage roof (about 88% across it), and the house column moves so
that roof sits just under his feet. In the calc, hc is the content width
min(var(--container), 100% - 48px) and P = (hc - var(--space-64)) / 2 is
the house column: right = (100% - hc) / 2 + 0.12P - 0.545 x his width.
1240 changes his size and the drop; 1400 and 1620 put all of it back. */
.jm-hero {
--jm-swing-w: 120px;
padding-top: 72px;
}
.jm-swing {
right: max(16px, calc((100% - min(var(--container), 100% - 48px)) / 2
+ 0.12 * (min(var(--container), 100% - 48px) - var(--space-64)) / 2
- 0.545 * var(--jm-swing-w)));
}
.jm-hero .jm-hero-row { display: flex; align-items: flex-start; gap: var(--space-64); }
.jm-hero .jm-hero-row > .jm-col { float: none; margin: 0; width: auto; flex: 1 1 0; min-width: 0; }
/* A percentage margin-top resolves against the row's width, so this is
232px less 0.487 of the house column: the roof's height in the image
scales with the column, his feet do not. */
.jm-hero .jm-hero-row > .jm-col.jm-hero-art { margin-top: calc(232px - 0.487 * (100% - var(--space-64)) / 2); }
.jm-hero-scene { margin-top: 0; max-width: 700px; margin-left: auto; margin-right: auto; }
/* Quote band */
.jm-quote > .fixed-width-cont { padding: 0 var(--space-40); }
.jm-quote-panel { padding: 64px 48px 48px; }
.jm-quote-peek { width: 200px; right: 9%; }
.gform_wrapper .gfield--width-half { grid-column: span 6; }
.jm-form-success__monkey { width: 220px; }
/* Photo rail: staggered heights */
.jm-rail-item--2 { margin-top: 0; }
/* Services: 3 across, with the --main card as a full-row banner. It is
placed in row 2, under the heading, so the other nine always fill a
3 x 3 grid whichever card carries the class; cards before it in the
source flow on after it. Its title stays on the type scale
(--type-display-m) rather than a new size. */
.jm-services > .fixed-width-cont { grid-template-columns: repeat(3, 1fr); }
.jm-services .jm-service-card--main { grid-column: 1 / -1; grid-row: 2; }
.jm-service-card--main > a.fb-block-link {
display: grid;
grid-template-columns: auto minmax(0, 1fr);
column-gap: var(--space-40);
align-items: center;
padding: 32px var(--space-40);
}
body .jm-section .jm-service-card--main :is(h3, h4) { margin: 0; font-size: var(--type-display-m); }
.jm-service-card--main p { max-width: 56ch; }
/* Steps: four-across rail with the dashed rule behind it */
/* One dashed connector in each gap between steps — three of them, and
nothing running off the end of step 4. */
.jm-steps .jm-step + .jm-step::before {
content: "";
position: absolute;
top: 50%;
right: 100%;
width: var(--space-24);
border-top: var(--rule) dashed var(--cream);
z-index: 0;
}
.jm-steps .jm-steps-row { position: relative; display: flex; gap: var(--space-24); align-items: stretch; }
.jm-steps .jm-step {
float: none;
flex: 1 1 0;
width: auto;
min-width: 0;
margin: 0;
min-height: 190px;
background: var(--forest-deep);
}
.jm-steps__driver { width: 400px; max-width: 34%; }
/* The credibility card splits into three, divided by ink rules. */
.jm-family-card { grid-template-columns: repeat(3, 1fr); }
.jm-family-col + .jm-family-col {
border-top: 0;
border-left: var(--rule) solid var(--ink);
}
.jm-family-col { padding: 32px; }
/* Showcase: three equal cards in one row. */
.jm-showcase .jm-ba-row { flex-direction: row; gap: var(--space-24); align-items: stretch; }
.jm-showcase .jm-ba-col { flex: 1 1 0; width: auto; min-width: 0; }
/* Where We Go: text across the top, the pointing monkey and the truck
photo side by side, the town chips across the bottom. Both columns are
display: contents, so the heading, paragraphs, monkey, chips and photo
are all items of one grid and can be placed without touching content.
A contents element still renders its ::after, so each EWS clearfix
here would become a stray grid item; all three are switched off. */
body.home .jm-areas .jm-areas-row {
display: grid;
grid-template-columns: 40% 1fr;
column-gap: var(--space-64);
}
body.home .jm-areas .jm-areas-left,
body.home .jm-areas .jm-areas-right { display: contents; }
body.home .jm-areas .jm-areas-row::after,
body.home .jm-areas .jm-areas-left::after,
body.home .jm-areas .jm-areas-right::after { content: none; display: none; }
body.home .jm-areas .jm-areas-left > h2 { grid-column: 1 / -1; grid-row: 1; }
body.home .jm-areas .jm-areas-left > p:nth-of-type(1) { grid-column: 1 / -1; grid-row: 2; }
body.home .jm-areas .jm-areas-left > p:nth-of-type(2) { grid-column: 1 / -1; grid-row: 3; }
body.home .jm-areas .jm-areas-photo { grid-column: 2; grid-row: 4; margin-top: var(--space-24); }
body.home .jm-areas .jm-chips {
grid-column: 1 / -1;
grid-row: 5;
max-width: none;
margin-top: var(--space-block);
}
/* He stands at the foot of his cell, aimed across the gutter at the
middle of the truck photo. All sizes are % of the column width, so the
pose scales with the photo:
- 63.5% wide puts his pointing hand level with the photo's middle;
- the -5.38% bottom margin cancels the PNG's 61/945 transparent strip
below the shin cut (61/720 of his width), so the cut sits on the
photo's bottom line;
- auto side margins centre him in the column, then `left` moves that
centre to the middle of column + gutter, less 0.7% for the extra
transparent space on the PNG's left side. */
body.home .jm-areas__pointer {
grid-column: 1;
grid-row: 4;
display: block;
position: relative;
left: calc(var(--space-64) / 2 - 0.7%);
width: 63.5%;
height: auto;
margin: auto auto -5.38%;
pointer-events: none;
}
/* Closing CTA */
.jm-cta-panel { padding: 56px; }
.jm-cta__hauler {
position: absolute;
left: 0;
bottom: -64px;
width: 190px;
margin: 0;
z-index: 2;
pointer-events: none;
}
.jm-cta-panel { margin-bottom: 56px; }
/* Inner pages run paragraphs full width. On the home page only the two
long-copy blocks do: the services intro right after the photo rail
(it shares id="services" with the grid, so it is picked out by
position, as elsewhere) and the content card, Read more copy included.
Everything else on the home page keeps its cap: the hero's 34ch, the
service-card lines, the short intro lines under headings, the FAQ. */
body:not(.home) .entry p { max-width: none; }
body.home .jm-rail + .jm-services .jm-section-head > p,
body.home .jm-content-card p { max-width: none; }
}
/* =========================================================================
970px
========================================================================= */
@media only screen and (min-width: 970px) {
.jm-hero .jm-lead { max-width: 32ch; }
/* Wide form: four quarter-width fields across. Sub-labels hang just above
their inputs, inside the gap under "Your Name". */
.gform_wrapper.gravity-theme.gf-wide_wrapper .gform_fields > .gfield.gfield--width-quarter { grid-column: span 3; }
.gform_wrapper.gf-wide_wrapper .gf_name_has_2 label {
position: absolute;
top: auto;
bottom: 100%;
padding: 0 0 2px;
font-size: var(--type-micro);
line-height: 1.3;
}
}
/* =========================================================================
1240px
========================================================================= */
@media only screen and (min-width: 1240px) {
.jm-section { padding-left: var(--space-40); padding-right: var(--space-40); }
.jm-rail > .fixed-width-cont { max-width: 1440px; }
/* Hero 1240-1399: a bigger monkey; the house column barely drops. */
.jm-hero { --jm-swing-w: 150px; }
.jm-hero .jm-hero-row > .jm-col.jm-hero-art { margin-top: 12px; }
.named-grid .head-section { gap: var(--space-40); }
.jm-cta__hauler { left: -72px; width: 210px; }
nav#site-navigation .nav-menu ul.menu { gap: var(--space-24); }
nav#site-navigation .nav-menu ul.menu li a { font-size: var(--type-button); }
#Logo img.logo-wrapper { height: 80px; }
.banner-cta .jm-header-cta { padding: 11px 20px; }
.jm-cta-long { display: inline; }
.jm-cta-short { display: none; }
}
/* =========================================================================
1400px
========================================================================= */
@media only screen and (min-width: 1400px) {
.jm-rail-row { gap: 28px; }
/* Hero 1400-1619: the monkey moves into the left margin, as from 1620px.
The content column narrows to leave a margin his width plus 48px on
each side, and his right edge sits 24px left of it. In his own calc,
100% is the full hero width, so the section's side padding comes off
before the container is worked out. The row centres again and the
house column loses its drop, as at 1620. 1620 restores the container. */
.jm-hero {
--jm-swing-w: 136px;
padding-top: var(--space-section);
}
.jm-hero > .fixed-width-cont {
max-width: min(var(--container), 100% - 2 * (var(--jm-swing-w) + 48px));
}
.jm-swing {
right: calc(50% + min(var(--container),
100% - 2 * var(--space-40) - 2 * (var(--jm-swing-w) + 48px)) / 2
+ var(--space-24));
}
.jm-hero .jm-hero-row { align-items: center; }
.jm-hero .jm-hero-row > .jm-col.jm-hero-art { margin-top: 0; }
}
/* =========================================================================
1620px
========================================================================= */
@media only screen and (min-width: 1620px) {
.jm-rail > .fixed-width-cont { max-width: 1560px; }
/* The swinging monkey moves to the left gutter (rev 5 · §2).
§2.2 asks for the gutter treatment from 1280px up. The content column is
1200px, so the gutter is 40px at 1280 and 120px at 1440, and §2.1 wants at
least 150px of monkey plus 24px of clearance — 1548px of viewport before it
fits. 1620 is the first breakpoint this stylesheet carries past that; below
it he hangs in the band instead, which is where rev 6 §1 puts him anyway. */
.jm-hero {
--jm-swing-w: min(clamp(150px, 14vw, 220px),
calc((100vw - var(--container)) / 2 - var(--space-24)));
padding-top: var(--space-section); /* the band is not needed out here */
}
.jm-hero > .fixed-width-cont { max-width: var(--container); } /* undo 1400 */
.jm-swing {
right: calc(50% + (var(--container) / 2) + var(--space-24));
pointer-events: auto; /* there is a pointer at this width */
}
.jm-swing:hover img { animation: jm-swing-sway 700ms ease-in-out; }
}
/* =========================================================================
Below 900px — no pointer, so no parallax; mobile action bar appears
========================================================================= */
@media only screen and (max-width: 899px) {
.jm-cta-long { display: none; }
.jm-cta-short { display: inline; }
/* Sidebar pages stack: content first, the sidebar form below it. */
#content.with-sidebar > .content-section {
display: flex; flex-direction: column; flex-wrap: nowrap;
}
#content.with-sidebar > .content-section > .hentry,
#content.with-sidebar > .content-section > #sidebar {
width: 100%; padding-left: 0; padding-right: 0;
}
#content.with-sidebar > .content-section > #sidebar {
order: 1; margin-top: var(--space-block);
}
/* Contact page: the form leads, so the header button lands on it. */
body.page-id-76 #content.with-sidebar > .content-section > #sidebar {
order: -1; margin-top: 0; margin-bottom: var(--space-block);
}
/* Rev 2.2 — one factor halves both spacing tokens below 900px.
html:root out-weighs the :root declaration at the top of the file. */
html:root { --space-scale: 0.5; }
/* The hero scene belongs between the buttons and the trust line on a
stacked hero. Dissolving the copy column with display:contents lets its
children and the art column interleave in one flex order. */
.jm-hero .jm-hero-row { display: flex; flex-direction: column; }
.jm-hero .jm-hero-copy { display: contents; }
.jm-hero .jm-hero-copy::after { display: none; }
.jm-hero .jm-hero-copy > .jm-hero-title { order: 1; }
.jm-hero .jm-hero-copy > .jm-lead { order: 2; }
.jm-hero .jm-hero-copy > .jm-btn-row { order: 3; }
.jm-hero .jm-hero-art { order: 4; }
.jm-hero .jm-hero-copy > .jm-trust { order: 5; }
/* The monkey hangs at the right edge and the tagline wraps beside him,
instead of the hero reserving a band of his height above it. From
600px the paragraphs run on straight under the tagline: their width is
capped to stay at least 24px clear of him (the 34ch cap alone leaves
2px at 600px). Below 600px they would run into him, so the 599 block
gives the tagline a min-height instead. Its left alignment is in the
centring block. */
.jm-hero { padding-top: 32px; }
.jm-swing { right: 16px; }
body.home .jm-hero .jm-hero-title { max-width: calc(100% - var(--jm-swing-w) - 8px); }
body.home .jm-hero .jm-lead { max-width: min(34ch, calc(100% - var(--jm-swing-w) - 24px)); }
/* Stacked, so a divider can never orphan itself at the end of a line. */
.jm-trust { flex-direction: column; align-items: flex-start; row-gap: 10px; }
.jm-trust__divider { display: none; }
/* --- gutters -------------------------------------------------------
The theme insets the footer widgets only from 900px up, so below that
they need their own gutter to clear the 20px minimum. */
footer #footer { padding-left: var(--space-24); padding-right: var(--space-24); }
/* --- tap targets ---------------------------------------------------
Everything you can press gets 44px of height. Links inside a sentence
are left alone: padding them out would break the line box. */
.banner-phn a.button.header-phone-one-click:not(#jm) {
display: inline-flex;
align-items: center;
min-height: 44px;
}
button#menubutton.menu-toggle:not(#jm) {
min-width: 46px;
min-height: 46px;
display: inline-flex;
align-items: center;
justify-content: center;
/* The parent theme squashes this button with scale(1.1, 0.9), which
shrinks the real touch area below 44px. */
transform: none;
}
/* inline-block, not inline-flex — the address link wraps its own lines
with a
and flex would collapse them onto one. */
footer .hc-add a,
footer .hc-phone a,
footer .ftr-rvw-lnk a,
footer .widget-container p a,
footer .menu-ftr ul.menu li a {
display: inline-block;
padding: 12px 0;
}
footer .hc-add { margin-bottom: 0; }
footer .hc-phone { margin-bottom: 0; }
/* --- minimum text size ---------------------------------------------
16px floor on mobile. The 13px micro row from §4's scale stays at its
specified size from 900px up. */
.gform_wrapper .gfield_required,
.jm-family-label,
footer .copy-ftr,
footer .menu-ftr a { font-size: 1rem; }
.named-grid .head-section { min-height: var(--header-h-sm); }
#Logo img.logo-wrapper { height: 68px; }
.jm-quote-peek { width: 130px; right: 6%; }
.named-grid .head-section {
grid-template-columns: auto 1fr auto auto;
grid-template-areas: "logo banner-phn banner-cta site-navigation";
justify-items: end;
gap: var(--space-16);
padding: 12px var(--space-24);
}
.named-grid .head-section > #Logo { justify-self: start; }
.banner-cta { display: block; }
.banner-cta .jm-header-cta { padding: 10px 14px; font-size: 0.9375rem; }
/* Clear the fixed bar without leaving a strip of page ground under the
footer — the space is added inside the footer instead of on . */
/* The pointer aims across a gutter that no longer exists once the columns
stack, so he goes. The driver stays and moves below the rail — rev 1.3. */
.jm-areas__pointer { display: none; }
nav#site-navigation .nav-menu {
display: none;
position: absolute;
left: 0;
right: 0;
top: 100%;
background: var(--cream);
border-bottom: var(--rule) solid var(--ink);
border-top: var(--rule) solid var(--ink);
padding: var(--space-16) var(--space-24);
}
nav#site-navigation.toggled-on .nav-menu { display: block; }
nav#site-navigation .nav-menu ul.menu { flex-direction: column; gap: var(--space-16); }
/* The theme's hamburger also puts toggled-on on the list, which pulls in its
full-overlay rules: a percentage max-height that resolves to 0 here and a
forced scrollbar, so the items wrapped sideways out of the panel. The
panel itself does the scrolling. */
nav#site-navigation .nav-menu ul.menu.toggled-on {
max-height: none;
overflow: visible;
flex-wrap: nowrap;
}
nav#site-navigation .nav-menu {
max-height: calc(100vh - var(--header-h-sm));
overflow-y: auto;
box-sizing: border-box;
height: auto; /* the theme's overlay sets 100% of the 66px nav */
}
/* The theme's overlay draws its own 80px close icon above the list; the
hamburger already becomes the close control. */
nav#site-navigation .nav-menu::before { content: none; }
/* He hangs in front of the header rule; with the menu open he goes behind it. */
body:has(nav#site-navigation.toggled-on) .jm-swing { z-index: 1; }
nav#site-navigation .nav-menu ul.menu > li.menu-item-has-children > .sub-menu {
margin-top: var(--space-8);
padding: var(--space-8) 0;
border-top: var(--rule) solid var(--ink);
border-bottom: var(--rule) solid var(--ink);
}
nav#site-navigation .nav-menu ul.menu > li.menu-item-has-children > .sub-menu li a { padding: 8px 0; }
.named-grid .wrap > header#header { position: sticky; }
/* Two-column Row groups stack below 900px — image under text. */
.entry .wp-block-group.is-nowrap:has(> .wp-block-ewsblocks-ewscolumns) {
flex-wrap: wrap;
}
.entry .wp-block-group.is-nowrap > .wp-block-ewsblocks-ewscolumns {
flex: 0 0 100%;
width: 100%;
max-width: 100%;
margin-left: 0;
margin-right: 0;
}
/* --- centred mobile layout -------------------------------------------
Headings, short text, buttons, cards and the footer read centred on a
narrow screen. Long reading text, form fields and FAQs stay left: each
rule below names exactly what it centres, so nothing needs a "keep
left" override. Capped paragraphs (70ch, the hero's 32ch) also get auto
side margins, or their centred text would sit in a box hugging the left. */
/* Hero: left-aligned, not centred. The tagline wraps beside the monkey on
the right, so the paragraphs and buttons line up under it on the left. */
body.home .jm-hero .jm-hero-title,
body.home .jm-hero .jm-lead { text-align: left; margin-left: 0; margin-right: 0; }
body.home .jm-hero .jm-btn-row { justify-content: flex-start; }
/* Quote form: title and subtitle only. */
body.home .jm-quote-panel .jm-quote-title,
body.home .jm-quote-panel .jm-quote-sub { text-align: center; margin-left: auto; margin-right: auto; }
/* Every section heading, and the single intro line under one. The
services intro after the rail carries two long paragraphs; they stay
left, so its .jm-section-head paragraphs are not selected. */
body.home .jm-section h1,
body.home .jm-section h2 { text-align: center; }
body.home .jm-section:not(.jm-rail + .jm-services) .jm-section-head > p {
text-align: center; margin-left: auto; margin-right: auto;
}
/* Service cards, before/after cards: title and line. */
body.home .jm-service-card :is(h3, h4),
body.home .jm-service-card p,
body.home .jm-ba-body :is(h3, h4),
body.home .jm-ba-body .jm-ba-meta { text-align: center; }
body.home .jm-service-card p,
body.home .jm-ba-body .jm-ba-meta { margin-left: auto; margin-right: auto; }
/* Steps: title and text, with the badge moved to the top centre. Its box
is 44px plus a --rule border each side. left, not a transform: the step
cards animate. */
body.home .jm-step :is(h3, h4),
body.home .jm-step p { text-align: center; }
body.home .jm-step .jm-step-badge { left: calc(50% - 22px - var(--rule)); }
/* Where we go: both paragraphs, and the chips as a group (a flex row,
capped at 520px, so it needs centring both inside and as a box). */
body.home .jm-areas-left > p { text-align: center; margin-left: auto; margin-right: auto; }
body.home .jm-areas .jm-chips { justify-content: center; margin-left: auto; margin-right: auto; }
/* Inner pages: the H1 and H2 headings and the button rows only. */
body:not(.home) #subhead h1.page-title,
body:not(.home) .entry h2 { text-align: center; }
body:not(.home) .entry .wp-block-buttons { justify-content: center; }
/* Footer, every page: widget contents, the hours, the bottom menu (a
wrapping space-between row, which strands the menu on the left once it
wraps; stacked here, centred) and the copyright line. */
footer .footer-widgets,
footer .footer-widgets .hours-of-operation td { text-align: center; }
footer .sub-ftr-section { flex-direction: column; align-items: center; justify-content: center; }
footer .menu-ftr ul.menu { justify-content: center; }
footer .copy-ftr { text-align: center; }
}
/* =========================================================================
Below 600px
========================================================================= */
@media only screen and (max-width: 599px) {
.jm-content-card { padding: var(--space-24) 20px; }
.gform_wrapper .gfield--width-half { grid-column: 1 / -1; }
.jm-quote > .fixed-width-cont { padding: 0 var(--space-24); }
.jm-quote-panel { border-radius: var(--radius-card); }
.banner-cta { display: none; }
#Logo img.logo-wrapper { height: 64px; }
.banner-phn a.button.header-phone-one-click:not(#jm) { font-size: var(--type-meta); }
.named-grid .head-section { gap: 10px; padding: 12px var(--space-16); }
/* Hero: a smaller monkey, and the paragraphs start below his feet rather
than beside them: the tagline is at least his height less 42px, which
leaves 18px between his feet and the first line. The
paragraphs go back to their plain 34ch cap at full column width. */
.jm-hero { --jm-swing-w: 100px; }
body.home .jm-hero .jm-hero-title { min-height: calc(var(--jm-swing-w) * 1.721 - 42px); }
body.home .jm-hero .jm-lead { max-width: 34ch; }
}
/* =========================================================================
Reduced motion — kills the load sequence, button travel and the parallax.
The shadow collapse on press stays; it is the only remaining feedback.
========================================================================= */
@media (prefers-reduced-motion: reduce) {
.jm-anim,
.jm-loaded .jm-anim {
opacity: 1;
transform: none;
transition: none;
}
.jm-hero-scene__plate { transform: none !important; transition: none !important; }
.jm-swing,
.jm-swing img,
.jm-swing:hover img { animation: none; transform: none; }
.jm-ba-photo { transition: none; }
.jm-faq-row summary::after { transition: none; }
.jm-content-more > summary { transition: none; }
.jm-btn:not(#jm),
.jm-card,
.jm-service-card,
body.home .entry .wp-block-button__link:not(#jm),
.gform_wrapper .gform_footer button.gform_button:not(#jm),
button#menubutton.menu-toggle:not(#jm) { transition: none; }
/* The press-down travel goes; the shadow collapse stays, because it is the
only press feedback left once motion is off. */
.jm-btn:hover:not(#jm),
.jm-btn:active:not(#jm),
.jm-btn--secondary:hover:not(#jm),
.jm-btn--secondary:active:not(#jm),
.jm-content-more > summary:hover,
.jm-content-more > summary:active,
.jm-card:hover,
.jm-service-card:hover,
body.home .entry .wp-block-button__link:hover:not(#jm),
body.home .entry .wp-block-button__link:active:not(#jm),
.gform_wrapper .gform_footer button.gform_button:hover:not(#jm),
.gform_wrapper .gform_footer button.gform_button:active:not(#jm),
button#menubutton.menu-toggle:hover:not(#jm) { transform: none; }
}