/* ===========================================================
Everblock Electric — shared stylesheet
One file, linked from every page, so edits only happen once.
=========================================================== */
:root {
--deepsea: #0A1E2B;
--marine: #123642;
--marine-soft: #17414F;
--foam: #F3F6F5;
--paper: #FAF6EC;
--line-warm: rgba(10,30,43,0.05);
--teal: #3E8E94;
--teal-bright: #4FADB3;
--brass: #C6A15B;
--brass-light: #DBBE85;
--charcoal: #1E2A2E;
--slate: #57696D;
--line: #DAE1DF;
--display: 'Fraunces', serif;
--body: 'IBM Plex Sans', sans-serif;
--mono: 'IBM Plex Mono', monospace;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
body {
font-family: var(--body);
color: var(--charcoal);
background-color: var(--paper);
background-image:
repeating-linear-gradient(0deg, rgba(10,30,43,0.035) 0px, rgba(10,30,43,0.035) 1px, transparent 1px, transparent 44px),
repeating-linear-gradient(90deg, rgba(10,30,43,0.035) 0px, rgba(10,30,43,0.035) 1px, transparent 1px, transparent 44px);
background-attachment: fixed;
line-height: 1.5;
}
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
/* ---------- HEADER ---------- */
header {
background: var(--deepsea);
color: var(--foam);
position: sticky;
top: 0;
z-index: 100;
}
.header-inner {
max-width: 1180px;
margin: 0 auto;
padding: 18px 28px;
display: flex;
align-items: center;
justify-content: space-between;
}
/* The header used to pair the square mark with "Everblock Electric" set in
Fraunces — a serif the real logo doesn't use. It now uses the actual lockup
(mark + rule + wordmark). The tagline line is cropped out in
header-lockup-white.png because at this size it renders as unreadable mush. */
.logo {
display: flex;
align-items: center;
flex-shrink: 0;
}
.logo img {
height: 30px;
width: auto;
display: block;
}
.footer-logo { height: 56px; width: auto; margin-bottom: 16px; }
nav { display: flex; gap: 28px; font-size: 0.9rem; }
nav a { opacity: 0.8; transition: opacity 0.15s; }
nav a:hover, nav a[aria-current="page"] { opacity: 1; }
/* Phone and email travel together on the right. The email address is long, so
it sheds its text before the phone does as the header narrows — the glyph
stays tappable the whole way down, and the address is in the footer and on
the contact page regardless. */
.header-contact { display: flex; align-items: center; gap: 20px; }
.header-phone,
.header-email {
font-family: var(--mono);
font-size: 0.88rem;
color: var(--brass-light);
display: flex;
align-items: center;
gap: 8px;
white-space: nowrap;
}
.header-email { color: rgba(243,246,245,0.72); font-size: 0.84rem; }
.header-phone:hover { color: var(--brass); }
.header-email:hover { color: var(--teal-bright); }
/* Once the address text goes, a bare @ is a tiny ambiguous target — give it the
same chip treatment the phone gets on narrow screens so it stays tappable. */
@media (max-width: 1000px) {
.header-email-addr { display: none; }
.header-email {
border: 1px solid rgba(243,246,245,0.22);
border-radius: 6px;
padding: 8px 12px;
font-size: 1rem;
}
.header-email:hover { border-color: rgba(79,173,179,0.6); }
}
/* ---------- MOBILE NAV ----------
The button only exists once JS is confirmed (`has-js` on ). Without
scripting the nav stays a plain stacked list, so the menu can never become
unreachable — which is what happened before: nav was simply display:none
below 820px with nothing to open it. */
.nav-toggle {
display: none;
background: none;
border: 1px solid rgba(243,246,245,0.25);
border-radius: 6px;
padding: 9px 10px;
cursor: pointer;
line-height: 0;
}
.nav-toggle:hover { border-color: rgba(243,246,245,0.5); }
.nav-toggle-bar {
display: block;
width: 20px;
height: 2px;
background: var(--foam);
border-radius: 2px;
transition: transform 0.2s ease, opacity 0.15s ease;
}
.nav-toggle-bar + .nav-toggle-bar { margin-top: 5px; }
/* hamburger folds into an X while the menu is open */
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
@media (prefers-reduced-motion: reduce) { .nav-toggle-bar { transition: none; } }
@media (max-width: 820px) {
.header-inner { flex-wrap: wrap; gap: 14px; padding: 14px 20px; }
.logo { order: 1; margin-right: auto; }
.logo img { height: 27px; }
.header-contact { order: 2; gap: 10px; }
.header-phone { border: 1px solid rgba(198,161,91,0.35); border-radius: 6px; padding: 8px 12px; }
.has-js .nav-toggle { display: block; order: 3; }
nav {
order: 4;
flex-basis: 100%;
flex-direction: column;
gap: 0;
margin: 2px -20px -14px;
padding: 0 20px;
border-top: 1px solid rgba(255,255,255,0.1);
}
nav a {
padding: 15px 0;
font-size: 1rem;
opacity: 0.85;
border-bottom: 1px solid rgba(255,255,255,0.07);
}
nav a:last-child { border-bottom: none; }
nav a[aria-current="page"] { color: var(--brass-light); opacity: 1; }
.has-js nav { display: none; }
.has-js nav.is-open { display: flex; }
}
@media (max-width: 520px) {
.header-phone-num { display: none; }
.header-phone { padding: 8px 11px; font-size: 1rem; }
.header-email { padding: 8px 11px; }
.header-contact { gap: 8px; }
.logo img { height: 24px; }
}
/* ---------- HERO (home) ----------
Three layers: the photo (::before, the only thing that moves), the navy
gradient (::after, held still so the text contrast never shifts), and the
content itself at z-index 2. The photo is a local file, not a hotlink. */
.hero {
position: relative;
overflow: hidden;
color: var(--foam);
border-bottom: 1px solid rgba(255,255,255,0.08);
background-color: var(--deepsea);
}
.hero::before {
content: "";
position: absolute;
/* bleed past every edge so the drift can never expose a seam */
inset: -3%;
z-index: 0;
/* Three widths so a phone doesn't download a desktop photo. The matching
in each page's head must stay in sync. */
background-image: url('images/marine/hero-800.jpg');
background-image: image-set(url('images/marine/hero-800.webp') type('image/webp'),
url('images/marine/hero-800.jpg') type('image/jpeg'));
background-size: cover;
background-position: center 45%;
transform-origin: 62% 58%;
animation: hero-drift 24s ease-in-out infinite alternate;
will-change: transform;
}
.hero::after {
content: "";
position: absolute;
inset: 0;
z-index: 1;
/* This photo is far brighter than the stock shot it replaced, so the overlay
runs heavier — plus a bottom fade to keep the credential row legible. */
background-image:
linear-gradient(180deg, rgba(10,30,43,0) 52%, rgba(10,30,43,0.58) 100%),
linear-gradient(100deg, rgba(10,30,43,0.96) 0%, rgba(10,30,43,0.89) 34%, rgba(10,30,43,0.62) 66%, rgba(10,30,43,0.40) 100%);
}
/* 10% over 24s — visible if you look, ignorable if you don't. An earlier 6%/32s
pass was below the threshold of perception and read as a static image. */
@keyframes hero-drift {
from { transform: scale(1) translate3d(0, 0, 0); }
to { transform: scale(1.10) translate3d(-1.8%, -1.1%, 0); }
}
@media (prefers-reduced-motion: reduce) {
.hero::before { animation: none; transform: none; }
}
@media (min-width: 700px) {
.hero::before {
background-image: url('images/marine/hero-1400.jpg');
background-image: image-set(url('images/marine/hero-1400.webp') type('image/webp'),
url('images/marine/hero-1400.jpg') type('image/jpeg'));
}
}
@media (min-width: 1250px) {
.hero::before {
background-image: url('images/marine/hero-1800.jpg');
background-image: image-set(url('images/marine/hero-1800.webp') type('image/webp'),
url('images/marine/hero-1800.jpg') type('image/jpeg'));
}
}
.hero-inner {
max-width: 1180px;
margin: 0 auto;
padding: 100px 28px 110px;
position: relative;
z-index: 2;
}
.eyebrow {
font-family: var(--mono);
font-size: 0.9rem;
color: var(--brass-light);
letter-spacing: 0.08em;
text-transform: uppercase;
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 24px;
}
.eyebrow::before {
content: '';
width: 7px; height: 7px;
border-radius: 50%;
background: var(--teal-bright);
box-shadow: 0 0 8px var(--teal-bright);
}
/* The eyebrow carries three credentials joined by "·". Each one is held together
with non-breaking spaces in the markup, so it wraps at the separators rather
than mid-phrase; this trims the size so it still lands in two lines on a phone. */
@media (max-width: 480px) {
.eyebrow { font-size: 0.68rem; letter-spacing: 0.05em; gap: 8px; }
.eyebrow::before { flex: 0 0 auto; }
}
.hero h1 {
font-family: var(--display);
font-weight: 600;
font-size: clamp(2.4rem, 5vw, 3.8rem);
line-height: 1.08;
max-width: 760px;
letter-spacing: -0.01em;
text-shadow: 0 2px 24px rgba(10,30,43,0.4);
}
.hero h1 em {
font-style: italic;
font-weight: 500;
color: var(--teal-bright);
}
.hero-sub {
margin-top: 24px;
font-size: 1.15rem;
color: rgba(243,246,245,0.82);
max-width: 560px;
}
.hero-cta {
margin-top: 38px;
display: flex;
gap: 16px;
flex-wrap: wrap;
align-items: center;
}
.btn {
font-family: var(--body);
font-weight: 600;
font-size: 0.95rem;
padding: 14px 26px;
border-radius: 3px;
display: inline-block;
transition: transform 0.15s, box-shadow 0.15s;
border: none;
cursor: pointer;
}
.btn-primary {
background: var(--brass);
color: var(--deepsea);
}
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(198,161,91,0.3); }
.btn-ghost {
border: 1px solid rgba(243,246,245,0.35);
color: var(--foam);
backdrop-filter: blur(4px);
}
.btn-ghost:hover { border-color: var(--teal-bright); color: var(--teal-bright); }
/* .btn-ghost is built for the dark hero — near-invisible on paper. This is its
light-background counterpart. */
.btn-outline {
border: 1px solid var(--line);
color: var(--charcoal);
background: transparent;
}
.btn-outline:hover { border-color: var(--teal); color: var(--marine); }
.hero-meta {
margin-top: 48px;
display: flex;
gap: 36px;
flex-wrap: wrap;
font-family: var(--mono);
font-size: 0.8rem;
color: rgba(243,246,245,0.6);
}
.hero-meta strong { color: var(--foam); font-weight: 500; }
.hero-coords {
position: absolute;
bottom: 28px; right: 28px;
font-family: var(--mono);
font-size: 0.72rem;
color: rgba(243,246,245,0.85);
letter-spacing: 0.04em;
z-index: 2;
background: rgba(10,30,43,0.55);
padding: 6px 12px;
border: 1px solid rgba(243,246,245,0.15);
border-radius: 3px;
backdrop-filter: blur(2px);
}
/* ---------- TRUST STRIP ---------- */
.trust-strip {
background: var(--marine);
color: rgba(243,246,245,0.85);
padding: 16px 28px;
font-family: var(--mono);
font-size: 0.8rem;
letter-spacing: 0.02em;
}
.trust-strip-inner {
max-width: 1180px;
margin: 0 auto;
display: flex;
gap: 14px 26px;
flex-wrap: wrap;
justify-content: center;
}
.trust-strip-inner span.mark { color: var(--teal-bright); }
/* ---------- SECTION SHARED ---------- */
section.block { padding: 96px 28px; }
.block-inner { max-width: 1180px; margin: 0 auto; }
.section-head { max-width: 640px; margin-bottom: 56px; }
.section-eyebrow {
font-family: var(--mono);
font-size: 0.94rem;
color: var(--teal);
text-transform: uppercase;
letter-spacing: 0.08em;
margin-bottom: 14px;
}
.section-head h2 {
font-family: var(--display);
font-weight: 600;
font-size: clamp(1.8rem, 3vw, 2.3rem);
letter-spacing: -0.01em;
}
.section-head p {
margin-top: 16px;
color: var(--slate);
font-size: 1.05rem;
}
/* ---------- SPECIALTY SPLIT ---------- */
/* ---------- PANEL ---------- */
/* Two panels, side by side: DC on the left, AC on the right. They stack below
900px, and only while stacked do the breakers go two-across — side by side
each panel is ~560px, too narrow to split a title like "Navigation
Electronics & NMEA 2000" across two columns. */
/* Two panels side by side: DC on the left, AC on the right — a matched pair, the
way they'd sit on a wall. They stack below 900px. */
/* The intro sits above a matched pair of panels, so it is centred rather than
ragged-left like the section heads that lead into full-width content. */
.panel-intro { max-width: 760px; margin: 0 auto 46px; text-align: center; }
/* Without this the headline drops "we work." onto a line of its own; balance
splits it evenly. Ignored by browsers that don't support it, which just get
the ragged break they'd have had anyway. */
.panel-intro h2 { text-wrap: balance; }
.panel-intro p { margin-left: auto; margin-right: auto; max-width: 60ch; text-wrap: pretty; }
@media (max-width: 700px) { .panel-intro { text-align: left; margin-bottom: 34px; } }
.panel-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px; align-items: start; }
@media (max-width: 899px) { .panel-pair { grid-template-columns: minmax(0, 1fr); gap: 32px; } }
.panel-frame {
background: var(--deepsea);
border-radius: 10px;
padding: 8px;
box-shadow: 0 30px 60px -20px rgba(10,30,43,0.35);
}
.panel-label-strip {
display: flex;
justify-content: space-between;
align-items: center;
padding: 14px 22px;
font-family: var(--mono);
font-size: 0.72rem;
color: rgba(243,246,245,0.45);
letter-spacing: 0.06em;
text-transform: uppercase;
}
.panel-label-strip { border-bottom: 1px solid rgba(79,173,179,0.22); }
.panel-frame.is-marine .panel-label-strip { border-bottom-color: rgba(198,161,91,0.28); }
.panel-label-strip .rating { color: var(--teal-bright); }
.panel-frame.is-marine .panel-label-strip .rating { color: var(--brass-light); }
/* Each panel carries its own way through to the full service page — without
these, those two pages are reachable only from the top nav. */
.panel-more {
display: inline-block;
margin: 18px 22px 14px;
font-family: var(--mono);
font-size: 0.88rem;
letter-spacing: 0.04em;
color: var(--teal-bright);
border-bottom: 1px solid rgba(79,173,179,0.4);
padding-bottom: 3px;
transition: color 0.18s, border-color 0.18s;
}
.panel-more:hover { color: #7FD0D5; border-color: #7FD0D5; }
.panel-frame.is-marine .panel-more { color: var(--brass-light); border-bottom-color: rgba(219,190,133,0.4); }
.panel-frame.is-marine .panel-more:hover { color: #EBD5AA; border-color: #EBD5AA; }
.breaker-grid {
display: grid;
/* minmax(0, 1fr) not 1fr: a grid track's default min-width is auto, so the
widest unbreakable content (the number + category row) would otherwise push
the columns past the viewport. */
grid-template-columns: minmax(0, 1fr);
gap: 3px;
background: rgba(255,255,255,0.06);
padding: 3px;
border-radius: 6px;
}
/* A real panel is a column of breakers, and that is also what fits: two-across
only earns its keep in the window where the panels are stacked and each one
has the full page width to itself. */
@media (min-width: 620px) and (max-width: 899px) {
.breaker-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* ---------- BREAKER PANEL ----------
Each cell is a real breaker: the switch slides and the description drops
down. Colour is NOT the on/off signal — brass means marine, teal means
residential, and that stays true in both states. Position + glow carry
on/off, which is what actual hardware does. */
.breaker {
background: var(--marine);
padding: 26px 22px;
display: flex;
flex-direction: column;
gap: 0; /* the body supplies its own top padding when open */
transition: background 0.2s;
}
.breaker:hover { background: var(--marine-soft); }
/* Two stacked six-breaker panels is twelve rows on a phone — more than the one
nine-cell panel it replaced. Tightening the cells there buys that back. */
@media (max-width: 619px) {
.breaker { padding: 19px 18px; }
.breaker-toggle { gap: 10px; }
.panel-frame { padding: 6px; }
/* Label and rating each wrap raggedly when they fight for one line at this
width; give them a line each instead. */
.panel-label-strip { padding: 12px 16px; flex-direction: column; align-items: flex-start; gap: 4px; }
}
.breaker-heading { margin: 0; font: inherit; font-weight: inherit; }
.breaker-toggle {
display: flex;
flex-direction: column;
gap: 14px;
width: 100%;
background: none;
border: 0;
padding: 0;
margin: 0;
font: inherit;
color: inherit;
text-align: left;
cursor: pointer;
}
.breaker-toggle:focus-visible { outline: 2px solid var(--brass-light); outline-offset: 6px; }
.breaker-top {
display: flex;
align-items: center;
justify-content: space-between;
}
.breaker-num {
font-family: var(--mono);
font-size: 0.8rem;
color: rgba(243,246,245,0.4);
display: flex;
align-items: center;
gap: 9px;
}
.breaker-title {
display: block;
font-family: var(--display);
font-weight: 600;
font-size: 1.05rem;
color: var(--foam);
line-height: 1.3;
transition: color 0.2s;
}
.switch {
width: 34px; height: 16px;
background: #071620;
border-radius: 8px;
position: relative;
border: 1px solid rgba(255,255,255,0.1);
flex-shrink: 0;
}
.switch::after {
content: '';
position: absolute;
top: 2px; left: 2px;
width: 12px; height: 12px;
border-radius: 50%;
transform: translateX(18px);
background: var(--teal-bright);
box-shadow: 0 0 6px var(--teal-bright);
transition: transform 0.22s cubic-bezier(.4,0,.2,1), background 0.22s, box-shadow 0.22s;
}
.breaker.brass .switch::after { background: var(--brass-light); box-shadow: 0 0 6px var(--brass-light); }
.breaker-body { display: grid; grid-template-rows: 1fr; }
.breaker-body-inner { overflow: hidden; }
.breaker-body p {
padding-top: 14px;
font-size: 0.87rem;
color: rgba(243,246,245,0.5);
line-height: 1.5;
}
/* Only once scripting is confirmed do the breakers start switched off. Without
JS every description stays visible, exactly as it was before. */
.has-js .breaker-body {
grid-template-rows: 0fr;
visibility: hidden;
transition: grid-template-rows 0.28s ease, visibility 0.28s;
}
.has-js .breaker.is-on .breaker-body { grid-template-rows: 1fr; visibility: visible; }
.has-js .breaker .switch::after {
transform: translateX(0);
background: rgba(243,246,245,0.22);
box-shadow: none;
}
.has-js .breaker.is-on .switch::after {
transform: translateX(18px);
background: var(--teal-bright);
box-shadow: 0 0 6px var(--teal-bright);
}
.has-js .breaker.brass.is-on .switch::after {
background: var(--brass-light);
box-shadow: 0 0 6px var(--brass-light);
}
.has-js .breaker:not(.is-on) .breaker-title { color: rgba(243,246,245,0.78); }
/* The entire cell is the hit area, so the cursor has to say so everywhere in it,
not only over the button. */
.has-js .breaker { cursor: pointer; }
.has-js .breaker-toggle { cursor: inherit; }
@media (prefers-reduced-motion: reduce) {
.breaker-body, .switch::after { transition: none; }
}
/* ---------- CTA BAND ---------- */
.cta-band {
color: var(--foam);
padding: 90px 28px;
text-align: center;
background-image:
linear-gradient(120deg, var(--deepsea) 0%, var(--marine) 100%),
repeating-linear-gradient(0deg, rgba(255,255,255,0.035) 0px, rgba(255,255,255,0.035) 1px, transparent 1px, transparent 44px),
repeating-linear-gradient(90deg, rgba(255,255,255,0.035) 0px, rgba(255,255,255,0.035) 1px, transparent 1px, transparent 44px);
background-size: cover;
background-position: center;
}
.cta-band h2 {
font-family: var(--display);
font-weight: 600;
font-size: clamp(1.8rem, 3.5vw, 2.5rem);
max-width: 700px;
margin: 0 auto 18px;
}
.cta-band p { opacity: 0.8; margin-bottom: 32px; font-size: 1.05rem; }
/* ---------- SERVICE COVERAGE ----------
A traced vector map of southern Vancouver Island and the Southern Gulf
Islands, drawn as inline SVG so it inherits the site's colours and stays
sharp at any size. The coastline is hand-traced: accurate in proportion,
orientation and relative position, simplified in detail — an illustration,
not a chart, and never for navigation. Every place name also appears as real
HTML text in the list beside it, so the coverage stays selectable, searchable
and crawlable even though the map itself is a picture.
Brand rule holds: teal = land-side, brass = marine. */
/* Map only: the figure is the section. The place names still exist as real HTML
text in the caption below it, so nothing about the coverage depends on a
browser rendering SVG (or on Google reading it). */
.coverage { margin: 8px auto 0; max-width: 800px; }
/* The section above already ends in whitespace; a second full pad here left a
near-200px void before the heading. */
section.block.coverage-block { padding-top: 24px; }
@media (max-width: 700px) { section.block.coverage-block { padding-top: 16px; } }
.cmap {
width: 100%; height: auto; display: block;
border-radius: 6px;
box-shadow: 0 24px 50px -24px rgba(10,30,43,0.45);
}
.cmap-water { fill: #0B2531; }
.cmap-outland { fill: #1C3A45; stroke: #274854; stroke-width: 1.4; }
.cmap-service { fill: #F1F3F1; stroke: var(--teal-bright); stroke-width: 2.2; }
.cmap-marine { fill: var(--brass-light); stroke: var(--brass); stroke-width: 2.2; }
.cmap-routes path { fill: none; stroke: var(--brass); stroke-width: 1.6; stroke-dasharray: 5 7; opacity: 0.8; }
.cmap-dot { fill: var(--teal); stroke: #F1F3F1; stroke-width: 1.6; }
.cmap-term { fill: #8A6A28; stroke: var(--brass-light); stroke-width: 1.6; }
.cmap-base { fill: #0B2531; stroke: #FFFFFF; stroke-width: 3; }
.cmap-leader { fill: none; stroke: rgba(243,246,245,0.45); stroke-width: 1.2; }
/* Labels are painted with a matching halo (paint-order: stroke fill) so they
stay legible wherever they land — light type over water, dark type over the
pale land fill. */
.cmap-type text { font-family: var(--body); paint-order: stroke fill; stroke-linejoin: round; }
.cmap-l-town { fill: #F3F6F5; font-size: 21px; font-weight: 500; stroke: rgba(11,37,49,0.85); stroke-width: 4px; }
.cmap-l-inland { fill: var(--charcoal); font-size: 21px; font-weight: 500; stroke: rgba(241,243,241,0.9); stroke-width: 4px; }
.cmap-l-base { fill: #FFFFFF; font-size: 22px; font-weight: 600; stroke: rgba(11,37,49,0.9); stroke-width: 4.5px; }
.cmap-l-island { fill: #4A3512; font-size: 21px; font-weight: 600; stroke: rgba(219,190,133,0.75); stroke-width: 4px; }
.cmap-l-seaname { fill: var(--brass-light); font-size: 20px; font-weight: 600; stroke: rgba(11,37,49,0.85); stroke-width: 4px; }
.cmap-l-water { fill: rgba(243,246,245,0.30); font-family: var(--mono); font-size: 15px; letter-spacing: 0.2em; stroke: none; }
.cmap-scale path { fill: none; stroke: rgba(243,246,245,0.5); stroke-width: 1.5; }
.cmap-scale text { fill: rgba(243,246,245,0.5); font-family: var(--mono); font-size: 13px; letter-spacing: 0.12em; }
.cmap-north path { fill: rgba(243,246,245,0.5); }
.cmap-north text { fill: rgba(243,246,245,0.5); font-family: var(--mono); font-size: 15px; }
/* SVG type scales with the drawing, so on a narrow screen it would shrink below
readable size. Bump it there and drop the secondary labels rather than let
them collide — the full list of towns sits directly underneath either way. */
@media (max-width: 720px) {
.cmap-l-town, .cmap-l-inland { font-size: 30px; }
.cmap-l-base { font-size: 32px; }
.cmap-l-island, .cmap-l-seaname { font-size: 29px; }
.cmap-l-water { font-size: 20px; }
.cmap-minor { display: none; }
.cmap-scale text, .cmap-north text { font-size: 19px; }
}
.cmap-legend {
display: flex; flex-wrap: wrap; gap: 10px 22px;
margin-top: 16px;
font-family: var(--mono); font-size: 0.8rem; letter-spacing: 0.06em;
text-transform: uppercase; color: var(--slate);
}
.cmap-key { display: inline-flex; align-items: center; gap: 8px; }
.cmap-key::before {
content: ''; width: 13px; height: 13px; border-radius: 3px; flex-shrink: 0;
}
.k-land::before { background: #F1F3F1; border: 2px solid var(--teal-bright); }
.k-sea::before { background: var(--brass-light); border: 2px solid var(--brass); }
.k-route::before {
height: 0; border-radius: 0; border: 0;
border-top: 2px dashed var(--brass); width: 16px;
}
.cmap-note {
margin-top: 16px;
font-size: 0.94rem;
line-height: 1.6;
color: var(--slate);
}
/* The towns as a caption rather than a paragraph. They earn their place: this is
the only spot on the site where the individual community names appear as
visible HTML text, which is what local search actually reads. */
.cmap-places {
margin-top: 12px;
font-family: var(--mono);
font-size: 0.78rem;
line-height: 1.9;
letter-spacing: 0.02em;
color: var(--slate);
opacity: 0.85;
}
/* ---------- REVIEWS ---------- */
.reviews-strip { background: var(--paper); padding: 80px 28px; }
.reviews-inner { max-width: 1180px; margin: 0 auto; }
/* The reviews band now sits between the feature rows and the CTA. The preceding
block already supplies 96px of bottom padding, so don't stack another 80px. */
section.block + .reviews-strip { padding-top: 0; padding-bottom: 88px; }
/* ---------- FOOTER ---------- */
footer { background: var(--deepsea); color: rgba(243,246,245,0.6); padding: 56px 28px 32px; }
.footer-inner { max-width: 1180px; margin: 0 auto; }
.footer-top {
display: flex; justify-content: space-between; flex-wrap: wrap; gap: 40px;
padding-bottom: 40px; border-bottom: 1px solid rgba(255,255,255,0.08);
}
.footer-brand .logo { color: var(--foam); margin-bottom: 14px; }
.footer-brand p { font-size: 0.88rem; max-width: 280px; }
.footer-col h4 {
font-family: var(--mono); font-size: 0.75rem; text-transform: uppercase;
letter-spacing: 0.06em; color: rgba(243,246,245,0.4); margin-bottom: 14px;
}
.footer-col a { display: block; font-size: 0.9rem; margin-bottom: 10px; opacity: 0.85; }
.footer-col a:hover { color: var(--teal-bright); }
.footer-bottom {
padding-top: 24px; font-size: 0.8rem; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px;
}
/* ---------- SUBPAGE HERO ---------- */
/* Page-hero photos live here rather than in inline style attributes so they can
have webp and small-screen variants. */
.page-hero.ph-marine, .page-hero.ph-heritage, .page-hero.ph-van, .page-hero.ph-seals, .page-hero.ph-marina {
background-image: var(--ph-tint), var(--ph-img);
}
.page-hero.ph-marine { --ph-tint: linear-gradient(100deg, rgba(10,30,43,0.88) 0%, rgba(10,30,43,0.68) 55%, rgba(10,30,43,0.40) 100%);
--ph-img: url('images/marine/pagehero-marine-900.jpg'); }
.page-hero.ph-heritage { --ph-tint: linear-gradient(100deg, rgba(10,30,43,0.90) 0%, rgba(10,30,43,0.72) 55%, rgba(10,30,43,0.42) 100%);
--ph-img: url('images/residential/pagehero-heritage-900.jpg'); }
.page-hero.ph-van { --ph-tint: linear-gradient(100deg, rgba(10,30,43,0.92) 0%, rgba(10,30,43,0.75) 55%, rgba(10,30,43,0.50) 100%);
--ph-img: url('images/van/pagehero-van-900.jpg'); }
/* Clay's own photo — harbour seals hauled out on a marina dock. Positioned low
so the seals sit in the band rather than the sky; the tint gradient is a touch
stronger than the others because the sky in this one is bright overcast. */
.page-hero.ph-seals { --ph-tint: linear-gradient(100deg, rgba(10,30,43,0.90) 0%, rgba(10,30,43,0.72) 55%, rgba(10,30,43,0.46) 100%);
--ph-img: url('images/marine/pagehero-seals-900.jpg'); }
/* Clay's own photo again — the marina looking down the channel between the
docks. The original carries a warm sepia filter; it's colour-corrected toward
neutral so it sits with the navy rather than fighting it. Busy frame, so the
tint runs heavier than the stock-photo heroes. */
.page-hero.ph-marina { --ph-tint: linear-gradient(100deg, rgba(10,30,43,0.92) 0%, rgba(10,30,43,0.76) 55%, rgba(10,30,43,0.50) 100%);
--ph-img: url('images/marine/pagehero-marina-900.jpg'); }
@media (min-width: 950px) {
.page-hero.ph-marine { --ph-img: url('images/marine/pagehero-marine-1600.jpg'); }
.page-hero.ph-heritage { --ph-img: url('images/residential/pagehero-heritage-1600.jpg'); }
.page-hero.ph-van { --ph-img: url('images/van/pagehero-van-1600.jpg'); }
.page-hero.ph-seals { --ph-img: url('images/marine/pagehero-seals-1600.jpg'); }
.page-hero.ph-marina { --ph-img: url('images/marine/pagehero-marina-1600.jpg'); }
}
.page-hero {
position: relative;
color: var(--foam);
padding: 70px 28px 64px;
background-size: cover;
background-position: center;
}
.page-hero.ph-seals { background-position: center 58%; }
.page-hero.ph-marina { background-position: center 50%; }
/* This photo is brighter than the other page heroes (overcast sky, white water)
and on a phone the text sits right over the seal. Flatten the gradient to an
even, stronger wash there so the lead paragraph keeps its contrast. */
@media (max-width: 700px) {
.page-hero.ph-seals { --ph-tint: linear-gradient(180deg, rgba(10,30,43,0.88) 0%, rgba(10,30,43,0.80) 100%); }
.page-hero.ph-marina { --ph-tint: linear-gradient(180deg, rgba(10,30,43,0.90) 0%, rgba(10,30,43,0.82) 100%); }
}
.page-hero-inner { max-width: 1180px; margin: 0 auto; position: relative; z-index: 2; }
.page-hero h1 {
font-family: var(--display);
font-weight: 600;
font-size: clamp(2rem, 4vw, 3rem);
max-width: 700px;
text-shadow: 0 2px 24px rgba(10,30,43,0.4);
}
.page-hero p.lead {
margin-top: 16px;
font-size: 1.1rem;
color: rgba(243,246,245,0.85);
max-width: 560px;
}
.breadcrumb {
font-family: var(--mono);
font-size: 0.75rem;
color: rgba(243,246,245,0.55);
text-transform: uppercase;
letter-spacing: 0.06em;
margin-bottom: 18px;
}
.breadcrumb a { color: rgba(243,246,245,0.8); }
.breadcrumb a:hover { color: var(--teal-bright); }
.content-columns {
display: grid;
grid-template-columns: 1.1fr 0.9fr;
gap: 64px;
align-items: start;
}
@media (max-width: 860px) { .content-columns { grid-template-columns: 1fr; } }
/* The sidebar column can hold more than the card — on the Marine page the ABYC
marks sit under it, where the certification lands beside the service list
rather than above the body copy. */
.col-side { display: grid; gap: 28px; align-content: start; }
.credential-badges.is-sidebar {
margin: 0;
justify-content: center;
flex-direction: column;
gap: 22px;
}
.credential-badges.is-sidebar img { height: 84px; }
.credential-badges.is-feature.is-sidebar img { height: 92px; }
/* Four marks of very different proportions: sized by eye rather than to a single
height, so a wide wordmark doesn't dwarf a square one. */
.credential-pair { display: flex; align-items: center; justify-content: center; gap: 26px; flex-wrap: wrap; }
.credential-badges.is-sidebar .credential-pair img { height: 62px; }
.credential-badges.is-sidebar img.cred-wide { height: auto; width: 190px; }
.credential-badges.is-sidebar img.cred-bbb { width: 210px; }
@media (max-width: 700px) {
.credential-badges.is-sidebar .credential-pair img { height: 56px; }
.credential-badges.is-sidebar img.cred-wide { width: 170px; }
.credential-badges.is-sidebar img.cred-bbb { width: 190px; }
}
/* In a narrow column the caption can't sit beside the marks behind a left rule —
it goes underneath them instead. */
.credential-badges.is-sidebar .credential-label {
border-left: 0;
border-top: 1px solid var(--line);
padding: 16px 0 0;
margin: 0;
max-width: none;
text-align: center;
}
@media (max-width: 700px) {
.credential-badges.is-sidebar img,
.credential-badges.is-feature.is-sidebar img { height: 76px; }
}
.content-columns p { color: var(--slate); font-size: 1.02rem; margin-bottom: 18px; }
.content-columns h3 {
font-family: var(--display); font-weight: 600; font-size: 1.3rem; margin: 28px 0 12px;
}
.placeholder-note {
background: rgba(198,161,91,0.12);
border: 1px dashed var(--brass);
border-radius: 6px;
padding: 10px 14px;
font-size: 0.85rem;
color: #8a6a2e;
margin-bottom: 18px;
}
.sidebar-card {
background: var(--deepsea);
color: var(--foam);
border-radius: 10px;
padding: 32px;
}
.sidebar-card h4 { font-family: var(--display); font-weight: 600; font-size: 1.2rem; margin-bottom: 14px; }
.sidebar-card p { color: rgba(243,246,245,0.7); font-size: 0.95rem; margin-bottom: 20px; }
.sidebar-list { list-style: none; margin-bottom: 24px; }
.sidebar-list li {
font-size: 0.9rem; padding: 10px 0; border-top: 1px solid rgba(255,255,255,0.1);
display: flex; justify-content: space-between; color: rgba(243,246,245,0.85);
}
.sidebar-list li span.num { font-family: var(--mono); color: var(--brass-light); font-size: 0.78rem; }
.person-row {
display: grid;
grid-template-columns: 240px 1fr;
gap: 48px;
align-items: center;
margin-bottom: 48px;
}
@media (max-width: 700px) { .person-row { grid-template-columns: 1fr; } }
.person-photo {
width: 100%;
aspect-ratio: 1 / 1;
border-radius: 10px;
overflow: hidden;
box-shadow: 0 20px 40px -16px rgba(10,30,43,0.35);
}
.person-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.person-name { font-family: var(--display); font-weight: 600; font-size: 1.5rem; margin-bottom: 2px; }
.person-title {
font-family: var(--mono); font-size: 0.8rem; color: var(--teal);
text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 16px;
}
.person-intro { color: var(--slate); font-size: 1.02rem; margin-bottom: 0; }
.person-bio p { color: var(--slate); font-size: 1.02rem; }
.person-bio p + p { margin-top: 15px; }
/* "Read more" on a long bio. Same contract as the breaker panel and the nav:
the extra paragraphs are plain visible text until JS confirms it can offer a
button, so the copy is never trapped behind an inert control. */
.bio-more { display: grid; grid-template-rows: 1fr; }
.bio-more-inner { overflow: hidden; }
.bio-more p { margin-top: 15px; }
.bio-toggle { display: none; }
.has-js .bio-more {
grid-template-rows: 0fr;
visibility: hidden;
transition: grid-template-rows 0.3s ease, visibility 0.3s;
}
.has-js .person-bio.is-open .bio-more { grid-template-rows: 1fr; visibility: visible; }
.has-js .bio-toggle {
display: inline-flex;
align-items: center;
gap: 9px;
margin-top: 16px;
padding: 0 0 3px;
background: none;
border: 0;
border-bottom: 1px solid rgba(62,142,148,0.4);
font-family: var(--mono);
font-size: 0.78rem;
letter-spacing: 0.04em;
color: var(--teal);
cursor: pointer;
}
.has-js .bio-toggle:hover { color: var(--marine); border-bottom-color: var(--marine); }
.has-js .bio-toggle:focus-visible { outline: 2px solid var(--teal); outline-offset: 4px; }
.bio-toggle-icon {
width: 6px; height: 6px;
border-right: 1.5px solid currentColor;
border-bottom: 1.5px solid currentColor;
transform: translateY(-2px) rotate(45deg);
transition: transform 0.22s ease;
}
.bio-toggle[aria-expanded="true"] .bio-toggle-icon { transform: translateY(1px) rotate(-135deg); }
@media (prefers-reduced-motion: reduce) {
.bio-more, .bio-toggle-icon { transition: none; }
}
/* A four-paragraph bio next to a centred photo leaves the photo floating in the
middle of a tall column; top-align those rows instead. Short bios stay centred. */
.person-row.is-long { align-items: start; }
.person-media { display: flex; flex-direction: column; gap: 18px; }
/* One figure for the pair rather than a scoreboard under each face — the years
are a fact about the company, and per-person numbers invited a comparison
nobody was asking for. */
.combined-stat {
display: flex;
align-items: center;
gap: 26px;
margin: 44px 0 8px;
padding: 26px 30px;
border-left: 3px solid var(--teal);
background: #FFFDF8;
border-radius: 0 6px 6px 0;
}
.combined-num {
font-family: var(--display);
font-weight: 700;
font-size: clamp(2.6rem, 6vw, 3.4rem);
line-height: 1;
color: var(--deepsea);
flex-shrink: 0;
}
.combined-label {
font-family: var(--display);
font-weight: 600;
font-size: 1.08rem;
line-height: 1.3;
color: var(--charcoal);
}
.combined-sub {
display: block;
margin-top: 6px;
font-family: var(--body);
font-weight: 400;
font-size: 0.92rem;
color: var(--slate);
}
@media (max-width: 520px) {
.combined-stat { gap: 18px; padding: 22px 20px; }
}
.stat-row { display: grid; grid-template-columns: repeat(3,1fr); gap: 24px; margin: 40px 0; }
@media (max-width: 700px) { .stat-row { grid-template-columns: 1fr; } }
.stat-box { border-top: 2px solid var(--teal); padding-top: 14px; }
.stat-box .num { font-family: var(--display); font-weight: 700; font-size: 2rem; color: var(--deepsea); }
.stat-box .label { font-family: var(--mono); font-size: 0.78rem; color: var(--slate); text-transform: uppercase; letter-spacing: 0.04em; }
/* This section is the page's argument, not a subheading — give it the same
weight as a section opener elsewhere on the site. */
.promise-head { margin: 0; max-width: 640px; }
.promise-head h2 { font-family: var(--display); font-weight: 600; font-size: clamp(1.6rem, 2.6vw, 2rem); margin-bottom: 14px; }
.promise-head p { color: var(--slate); font-size: 1.05rem; margin-bottom: 0; }
/* auto-fit rather than a fixed three: with one card removed a hard-coded
repeat(3) left an empty column on the right. This fills the row whatever the
count is, and still drops to one column on a phone. */
.value-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 28px;
margin-top: 40px;
}
@media (max-width: 820px) { .value-grid { grid-template-columns: 1fr; } }
.value-card { padding: 28px; border: 1px solid var(--line); border-radius: 8px; }
.value-card h4 { font-family: var(--display); font-weight: 600; font-size: 1.1rem; margin-bottom: 10px; }
.value-card p { color: var(--slate); font-size: 0.92rem; }
.credential-badges {
display: flex;
align-items: center;
gap: 32px;
flex-wrap: wrap;
padding: 24px 28px;
border: 1px solid var(--line);
border-radius: 8px;
margin: 36px 0;
background: #FFFDF8;
}
.credential-badges img { height: 78px; width: auto; }
/* On the Marine page the ABYC marks are the argument, not a footnote — they are
the reason a boat owner picks us over a house electrician. Bigger there only;
the About page keeps the quieter size. */
.credential-badges.is-feature { gap: 40px; padding: 32px 34px; }
.credential-badges.is-feature img { height: 112px; }
@media (max-width: 700px) {
.credential-badges.is-feature { gap: 24px; padding: 24px 22px; }
.credential-badges.is-feature img { height: 84px; }
}
.credential-badges .credential-label {
font-family: var(--mono);
font-size: 0.78rem;
color: var(--slate);
text-transform: uppercase;
letter-spacing: 0.05em;
border-left: 1px solid var(--line);
padding-left: 24px;
max-width: 220px;
line-height: 1.5;
}
.accordion { max-width: 880px; display: grid; gap: 20px; }
/* --- Group tiles --------------------------------------------------------
Two nested levels of native : the tile opens to reveal its
questions, each question opens to reveal its answer. No JavaScript — this
works with scripting off, which keeps the page's progressive-enhancement
contract intact for free. Accent colours follow the site rule:
brass = marine, teal = residential, slate = neutral. */
.faq-group {
background: #fff;
border: 1px solid var(--line);
border-left: 3px solid var(--slate);
border-radius: 3px;
transition: box-shadow 0.25s ease, border-color 0.25s ease;
}
.faq-group.is-marine { border-left-color: var(--brass); }
.faq-group.is-residential { border-left-color: var(--teal); }
.faq-group[open] { box-shadow: 0 14px 34px rgba(10, 30, 43, 0.08); }
.faq-group:hover { border-color: #c8d2cf; }
.faq-group.is-marine:hover { border-left-color: var(--brass); }
.faq-group.is-residential:hover { border-left-color: var(--teal); }
.faq-group > summary {
list-style: none;
cursor: pointer;
display: flex;
align-items: center;
gap: 24px;
padding: 28px 30px;
}
.faq-group > summary::-webkit-details-marker { display: none; }
.faq-group > summary:focus-visible { outline: 2px solid var(--teal); outline-offset: -3px; }
.faq-group-text { flex: 1 1 auto; min-width: 0; }
.faq-group-tag {
display: block;
font-family: var(--mono);
font-size: 0.82rem;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--slate);
margin-bottom: 8px;
}
.faq-group.is-marine .faq-group-tag { color: var(--brass); }
.faq-group.is-residential .faq-group-tag { color: var(--teal); }
.faq-group-count { color: var(--slate); font-weight: 400; }
.faq-group-name {
display: block;
font-family: var(--display);
font-weight: 600;
font-size: 1.5rem;
line-height: 1.2;
color: var(--charcoal);
}
.faq-group-desc {
display: block;
margin-top: 8px;
color: var(--slate);
font-size: 0.94rem;
line-height: 1.5;
max-width: 56ch;
}
.faq-group-icon {
flex: 0 0 auto;
width: 42px;
height: 42px;
border: 1px solid var(--line);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: var(--slate);
transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.faq-group-icon::before,
.faq-group-icon::after {
content: '';
position: absolute;
background: currentColor;
}
.faq-group-icon { position: relative; }
.faq-group-icon::before { width: 14px; height: 1.5px; }
.faq-group-icon::after {
width: 1.5px;
height: 14px;
transition: transform 0.25s ease, opacity 0.25s ease;
}
.faq-group[open] > summary .faq-group-icon::after { transform: rotate(90deg); opacity: 0; }
.faq-group > summary:hover .faq-group-icon { border-color: var(--slate); color: var(--charcoal); }
.faq-group.is-marine > summary:hover .faq-group-icon { border-color: var(--brass); color: var(--brass); }
.faq-group.is-residential > summary:hover .faq-group-icon { border-color: var(--teal); color: var(--teal); }
.faq-group[open] > summary .faq-group-icon { background: var(--foam); }
.faq-group-body { padding: 0 30px 10px; }
/* --- Questions inside a tile --------------------------------------------- */
.accordion details.faq-q {
border-top: 1px solid var(--line);
border-bottom: none;
padding: 20px 0;
}
.accordion details.faq-q > summary {
font-family: var(--display);
font-weight: 600;
font-size: 1.04rem;
color: var(--charcoal);
cursor: pointer;
list-style: none;
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 20px;
}
.accordion details.faq-q > summary::-webkit-details-marker { display: none; }
.accordion details.faq-q > summary:focus-visible { outline: 2px solid var(--teal); outline-offset: 3px; }
.accordion details.faq-q > summary::after {
content: '+';
font-family: var(--mono);
color: var(--teal);
font-size: 1.25rem;
line-height: 1.1;
flex-shrink: 0;
}
.faq-group.is-marine details.faq-q > summary::after { color: var(--brass); }
.accordion details.faq-q[open] > summary::after { content: '\2212'; }
.accordion .accordion-body { margin-top: 14px; color: var(--slate); font-size: 0.98rem; max-width: 700px; }
.accordion-body p + p, .accordion-body ul + p { margin-top: 12px; }
.accordion-list { margin: 12px 0 0; padding-left: 20px; }
.accordion-list li { margin-bottom: 7px; }
.accordion-list li::marker { color: var(--teal); }
.faq-group.is-marine .accordion-list li::marker { color: var(--brass); }
.accordion-list strong { color: var(--charcoal); font-weight: 600; }
@media (max-width: 600px) {
.faq-group > summary { padding: 22px 20px; gap: 16px; }
.faq-group-sep { display: none; }
.faq-group-count { display: block; margin-top: 3px; }
.faq-group-name { font-size: 1.24rem; }
.faq-group-icon { width: 36px; height: 36px; }
.faq-group-body { padding: 0 20px 6px; }
.accordion { gap: 16px; }
}
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; }
@media (max-width: 860px) { .contact-grid { grid-template-columns: 1fr; } }
.contact-method {
display: flex; align-items: flex-start; gap: 16px; padding: 20px 0; border-top: 1px solid var(--line);
}
.contact-method:first-child { border-top: none; }
.contact-icon {
width: 40px; height: 40px; border-radius: 50%; background: var(--marine); color: var(--foam);
display: flex; align-items: center; justify-content: center; font-family: var(--mono); font-size: 0.85rem; flex-shrink: 0;
}
.contact-method h4 { font-family: var(--display); font-weight: 600; font-size: 1.05rem; margin-bottom: 4px; }
.contact-method p, .contact-method a { color: var(--slate); font-size: 0.95rem; }
.map-box {
aspect-ratio: 4/3; border-radius: 8px; overflow: hidden; background: var(--marine);
}
.map-box iframe { width: 100%; height: 100%; border: 0; display: block; }
.hours-table { width: 100%; border-collapse: collapse; margin-top: 16px; }
.hours-table td { padding: 8px 0; border-top: 1px solid var(--line); font-size: 0.92rem; }
.hours-table td:last-child { text-align: right; font-family: var(--mono); color: var(--slate); }
/* ---------- REQUEST FORM ----------
A real form on our own page rather than a hop out to Google: the lead never
leaves the site and Netlify counts the submission. Netlify needs three things
in the markup and nothing else — data-netlify, a hidden form-name matching the
form's name, and (optionally) netlify-honeypot naming a decoy field. It only
works on the deployed site; opening the file locally, Send does nothing. */
.request-form { max-width: 560px; }
.field { margin-bottom: 22px; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
@media (max-width: 520px) { .field-row { grid-template-columns: 1fr; gap: 0; } }
.field > label,
.choice-set legend {
display: block;
font-family: var(--display);
font-weight: 600;
font-size: 1rem;
color: var(--charcoal);
margin-bottom: 8px;
}
.req, .opt {
font-family: var(--mono);
font-weight: 400;
font-size: 0.72rem;
letter-spacing: 0.06em;
text-transform: uppercase;
margin-left: 8px;
}
.req { color: var(--teal); }
.opt { color: var(--slate); }
.field input[type="text"],
.field input[type="tel"],
.field input[type="email"],
.field textarea {
width: 100%;
font-family: var(--body);
font-size: 1rem;
color: var(--charcoal);
background: #fff;
border: 1px solid var(--line);
border-radius: 4px;
padding: 13px 14px;
transition: border-color 0.16s, box-shadow 0.16s;
}
.field textarea { resize: vertical; min-height: 130px; line-height: 1.5; }
.field input::placeholder, .field textarea::placeholder { color: #9BAAA9; }
.field input:focus, .field textarea:focus {
outline: none;
border-color: var(--teal);
box-shadow: 0 0 0 3px rgba(62,142,148,0.16);
}
.choice-set { border: 0; padding: 0; margin: 0 0 22px; }
.choices { display: grid; gap: 10px; }
.choice {
display: flex; align-items: center; gap: 12px;
font-family: var(--body); font-weight: 400; font-size: 0.98rem;
color: var(--charcoal);
background: #fff;
border: 1px solid var(--line);
border-radius: 4px;
padding: 13px 16px;
margin: 0;
cursor: pointer;
transition: border-color 0.16s, background 0.16s;
}
.choice:hover { border-color: var(--teal); }
.choice input { accent-color: var(--teal); width: 18px; height: 18px; flex-shrink: 0; }
.choice:has(input:checked) { border-color: var(--teal); background: rgba(62,142,148,0.06); }
.choice:has(input:focus-visible) { box-shadow: 0 0 0 3px rgba(62,142,148,0.16); }
.request-form .btn { margin-top: 6px; border: 0; cursor: pointer; font-size: 1rem; }
.form-note { margin-top: 18px; font-size: 0.88rem; color: var(--slate); line-height: 1.55; max-width: 46ch; }
.form-note a { color: var(--teal); font-weight: 600; }
/* The honeypot: off-screen rather than display:none, because some bots skip
hidden fields but happily fill this one. */
.hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
/* The anchor from every "Book a Free Estimate" button lands here; the header is
sticky, so the target needs to clear it. */
#request { scroll-margin-top: 90px; }
/* ---------- THANK YOU ---------- */
.thanks-body { max-width: 640px; }
.thanks-note { color: var(--slate); line-height: 1.6; margin-bottom: 32px; }
.thanks-note a { color: var(--teal); font-weight: 600; }
.thanks-actions { display: flex; flex-wrap: wrap; gap: 14px; }