/* ============================================================
Palisade Roofing — Master stylesheet
Single source of truth. Loaded on every page.
Google Fonts are now loaded from each page's via
+ rather
than the previous CSS @import. The @import created a
render-blocking chain (HTML → site.css → fonts.googleapis
→ fonts.gstatic → woff2); the new head-injection lets the
browser preconnect to both font hosts in parallel with the
CSS download.
============================================================ */
:root {
/* === Color tokens ============================================== */
--ink: #161310; /* warm near-black */
--ink-2: #2A2520;
--ink-3: #4A4039;
--muted: #6B6259;
--muted-2: #918879;
--rule: #E8E1D4;
--rule-soft: #F0EAE0;
--surface: #FFFFFF;
--surface-warm: #FBF8F2; /* warm off-white, the "page" tint */
--surface-card: #FAF6EE;
--surface-dark: #161310;
--surface-dark-2:#221D18;
--orange: #B85C00; /* body-safe — AA on white at 4.88:1 */
--orange-hover: #9C4D00;
--orange-tint: #FFF1E2; /* hover/selected tint */
--orange-bright: #FF8200; /* display only — on dark or large display type */
--ok: #2E6B3F;
--warn: #A85A14;
--bad: #9B2C1E;
/* === Type ====================================================== */
--serif: 'Instrument Serif', 'Source Serif Pro', 'Iowan Old Style', Georgia, serif;
--sans: 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
--mono: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', monospace;
/* === Layout ==================================================== */
--maxw: 1280px;
--pad-x: 32px;
--pad-x-lg: 64px;
--r: 4px;
--r-lg: 10px;
--shadow-sm: 0 1px 2px rgba(22,19,16,0.06), 0 4px 12px rgba(22,19,16,0.04);
--shadow-md: 0 4px 12px rgba(22,19,16,0.08), 0 16px 32px rgba(22,19,16,0.06);
--shadow-lg: 0 8px 24px rgba(22,19,16,0.10), 0 32px 64px rgba(22,19,16,0.08);
/* === Image row height (density = 6 / 10) ====================== */
--row-h: 520px;
--row-h-lg: 640px;
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html, body { overflow-x: hidden; max-width: 100%; }
html { scroll-behavior: smooth; }
body {
font-family: var(--sans);
font-size: 16.5px;
line-height: 1.6;
color: var(--ink);
background: var(--surface-warm);
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
font-feature-settings: 'kern' 1, 'ss01' 1, 'cv11' 1;
}
img { display: block; max-width: 100%; height: auto; }
a { color: var(--orange); text-decoration: none; }
@media (hover: hover) { a:hover { color: var(--orange-hover); } }
button { font: inherit; cursor: pointer; }
:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }
/* === Typography ================================================= */
h1, h2, h3, h4 { margin: 0; line-height: 1.08; letter-spacing: -0.012em; font-weight: 500; }
h1 { font-family: var(--serif); font-size: clamp(44px, 6vw, 88px); font-weight: 400; letter-spacing: -0.018em; line-height: 1.02; }
h2 { font-family: var(--serif); font-size: clamp(34px, 4.2vw, 56px); font-weight: 400; letter-spacing: -0.014em; line-height: 1.05; }
h3 { font-family: var(--sans); font-size: clamp(20px, 1.6vw, 24px); font-weight: 600; letter-spacing: -0.005em; line-height: 1.25; }
h4 { font-family: var(--sans); font-size: 16px; font-weight: 600; letter-spacing: -0.003em; }
p { margin: 0 0 1em; }
em { font-style: italic; }
.serif { font-family: var(--serif); font-weight: 400; }
.serif-i { font-family: var(--serif); font-style: italic; font-weight: 400; }
.mono { font-family: var(--mono); font-size: 0.82em; letter-spacing: 0.02em; }
.eyebrow { font-family: var(--mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--orange); font-weight: 500; }
.eyebrow-muted { font-family: var(--mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); font-weight: 500; }
.lede { font-size: 19px; line-height: 1.55; color: var(--ink-3); max-width: 64ch; }
.small { font-size: 13.5px; color: var(--muted); }
/* === Container ================================================== */
.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--pad-x); }
@media (min-width: 900px) { .wrap { padding: 0 var(--pad-x-lg); } }
.wrap-narrow { max-width: 880px; margin: 0 auto; padding: 0 var(--pad-x); }
.section { padding: 96px 0; }
.section-sm { padding: 64px 0; }
.section-lg { padding: 128px 0; }
@media (max-width: 768px) {
.section { padding: 64px 0; }
.section-lg { padding: 80px 0; }
}
/* === Top nav ==================================================== */
.nav {
position: sticky; top: 0; z-index: 100;
background: rgba(251,248,242,0.86);
backdrop-filter: saturate(160%) blur(14px);
-webkit-backdrop-filter: saturate(160%) blur(14px);
border-bottom: 1px solid var(--rule);
}
.nav-inner { max-width: var(--maxw); margin: 0 auto; padding: 16px var(--pad-x); display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.nav-logo { display: flex; align-items: center; gap: 10px; color: var(--ink); white-space: nowrap; }
.nav-logo img { height: 36px; width: auto; }
/* The logo lockup already contains the wordmark — keep the .wm span around for SEO/SR but hide visually. */
.nav-logo .wm { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.nav-logo .wm em { font-style: italic; color: var(--orange); }
.nav-links { display: none; gap: 28px; align-items: center; }
@media (min-width: 900px) { .nav-links { display: flex; } }
.nav-burger { display: inline-flex; flex-direction: column; justify-content: center; gap: 5px; width: 40px; height: 40px; padding: 10px; background: transparent; border: 1px solid var(--rule); border-radius: 8px; cursor: pointer; overflow: hidden; }
.nav-burger span { display: block; height: 2px; width: 100%; background: var(--ink); border-radius: 1px; transform-origin: center; }
.nav-burger span:nth-child(1), .nav-burger span:nth-child(3) { transition: transform 180ms ease; transition-delay: 0ms; }
.nav-burger span:nth-child(2) { transition: opacity 180ms ease; transition-delay: 0ms; }
@media (min-width: 900px) { .nav-burger { display: none; } }
/* Burger → X: middle fades out FIRST (0-120ms), then top/bottom rotate (140-320ms).
X → Burger: everything reverses simultaneously (0-180ms) — feels snappier. */
.nav.menu-open .nav-burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); transition-delay: 140ms; }
.nav.menu-open .nav-burger span:nth-child(2) { opacity: 0; transition: opacity 120ms ease; transition-delay: 0ms; }
.nav.menu-open .nav-burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); transition-delay: 140ms; }
.nav-drawer { display: block; position: fixed; inset: 64px 0 0 0; background: var(--surface-warm); border-top: 1px solid var(--rule); padding: 32px var(--pad-x) 48px; z-index: 200; overflow-y: auto; -webkit-overflow-scrolling: touch; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 200ms ease, visibility 0s linear 200ms; }
.nav-drawer.open { opacity: 1; visibility: visible; pointer-events: auto; transition: opacity 200ms ease, visibility 0s linear 0s; }
.nav-drawer ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 4px; }
.nav-drawer ul a { display: block; padding: 16px 4px; font-size: 22px; font-weight: 500; color: var(--ink); border-bottom: 1px solid var(--rule); letter-spacing: -0.01em; touch-action: manipulation; }
.nav-drawer ul a:active { color: var(--orange); }
@media (hover: hover) {
.nav-drawer ul a:hover { color: var(--orange); }
}
.nav-drawer .drawer-cta { margin-top: 28px; display: grid; gap: 12px; }
.nav-drawer .drawer-cta .btn { width: 100%; justify-content: center; }
/* Scroll lock removed — the drawer covers everything below the sticky
header at z-index 200, so locking the body underneath caused a
sticky-header reflow + white paint flash on close. Drawer has its
own overflow-y: auto, so internal scroll still works. */
.nav-links a { color: var(--ink-2); font-size: 14.5px; font-weight: 500; letter-spacing: -0.002em; }
.nav-links a:hover { color: var(--orange); }
.nav-cta { display: flex; align-items: center; gap: 12px; }
.nav-call { color: var(--ink); font-weight: 600; font-size: 14.5px; display: none; white-space: nowrap; }
@media (min-width: 700px) { .nav-call { display: inline; } }
/* === Buttons ==================================================== */
.btn { white-space: nowrap; display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 13px 22px; font-weight: 600; font-size: 14.5px; border-radius: var(--r); border: 0; transition: all 0.15s ease; line-height: 1; letter-spacing: -0.003em; cursor: pointer; }
.btn-primary { background: var(--orange); color: #fff; }
.btn-dark { background: var(--ink); color: var(--surface-warm); }
.btn-ghost { background: transparent; color: var(--ink); border: 1px solid var(--rule); }
.btn-on-dark { background: var(--orange-bright); color: var(--ink); }
@media (hover: hover) {
.btn-primary:hover { background: var(--orange-hover); color: #fff; transform: translateY(-1px); box-shadow: var(--shadow-md); }
.btn-dark:hover { background: var(--ink-2); color: var(--surface-warm); }
.btn-ghost:hover { border-color: var(--ink); color: var(--ink); }
.btn-on-dark:hover { background: #FFB060; color: var(--ink); }
}
.btn-lg { padding: 17px 28px; font-size: 16px; }
@media (max-width: 700px) { .btn-lg { padding: 14px 20px; font-size: 15px; } }
.btn-sm { padding: 9px 14px; font-size: 13px; }
.btn .arr { display: inline-block; transition: transform 0.18s ease; }
.btn:hover .arr { transform: translateX(3px); }
/* === Hero ======================================================= */
.hero {
position: relative;
min-height: clamp(560px, 78vh, 820px);
display: flex; align-items: center;
color: #fff;
overflow: hidden;
isolation: isolate;
}
.hero-img { position: absolute; inset: 0; z-index: -2; }
.hero-img img { width: 100%; height: 100%; object-fit: cover; }
/* Hero overlay — deepened on the left edge so the H1 reads at
full contrast through the photograph at all common widths.
Was: 0.62 → 0.25 @ 55% → 0.10 @ 100% (H1 dropped to ~60%
contrast on 1200–1500 px displays). Now: 0.78 → 0.45 @ 55%
→ 0.10 @ 100% — recovers ~18% contrast on the left third
without darkening the photo on the right. */
.hero-img::after {
content: ''; position: absolute; inset: 0; z-index: 1;
background:
linear-gradient(90deg, rgba(22,19,16,0.78) 0%, rgba(22,19,16,0.45) 55%, rgba(22,19,16,0.10) 100%),
linear-gradient(180deg, rgba(22,19,16,0.55) 0%, rgba(22,19,16,0.40) 35%, rgba(22,19,16,0.65) 75%, rgba(22,19,16,0.88) 100%);
}
.hero-inner { position: relative; z-index: 2; max-width: var(--maxw); margin: 0 auto; padding: 96px var(--pad-x) 48px; width: 100%; }
.hero h1 { color: #fff; max-width: 14ch; }
.hero h1 em { font-style: italic; color: var(--orange-bright); font-weight: 400; }
.hero .hero-lede { color: rgba(255,255,255,0.84); font-size: 19px; max-width: 52ch; margin: 24px 0 36px; line-height: 1.5; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
.hero-trust { display: flex; gap: 28px; flex-wrap: wrap; align-items: center; margin-top: 56px; padding-top: 28px; border-top: 1px solid rgba(255,255,255,0.18); color: rgba(255,255,255,0.78); font-size: 13px; }
.hero-trust .group { display: flex; align-items: center; gap: 10px; }
.hero-trust img { height: 36px; width: auto; opacity: 0.95; }
.hero-trust b { color: #fff; font-weight: 600; }
/* Hero — split layout (with form) */
.hero-split { display: grid; grid-template-columns: 1fr; gap: 48px; align-items: end; }
@media (min-width: 1100px) { .hero-split { grid-template-columns: 1.35fr 0.85fr; align-items: center; } }
/* === Image row (the signature unit) ============================ */
.row {
position: relative;
height: var(--row-h);
overflow: hidden;
background: var(--ink);
}
@media (min-width: 1200px) { .row { height: var(--row-h-lg); } }
.row > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.row-overlay { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(22,19,16,0.05) 0%, rgba(22,19,16,0.55) 80%, rgba(22,19,16,0.78) 100%); }
.row-overlay-r { background: linear-gradient(270deg, rgba(22,19,16,0.05) 0%, rgba(22,19,16,0.65) 65%, rgba(22,19,16,0.88) 100%); }
.row-overlay-l { background: linear-gradient(90deg, rgba(22,19,16,0.05) 0%, rgba(22,19,16,0.65) 65%, rgba(22,19,16,0.88) 100%); }
.row-content { position: absolute; inset: 0; display: flex; align-items: flex-end; }
.row-content.center { align-items: center; }
.row-content.right { justify-content: flex-end; }
.row-content .wrap { width: 100%; padding-top: 56px; padding-bottom: 56px; }
.row-content h2 { color: #fff; max-width: 18ch; }
.row-content p { color: rgba(255,255,255,0.85); max-width: 52ch; margin-top: 16px; font-size: 17px; line-height: 1.55; }
.row-content .eyebrow { color: var(--orange-bright); }
.row-cap { position: absolute; bottom: 20px; right: 24px; font-family: var(--mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(255,255,255,0.6); }
/* === Cards ====================================================== */
.cards { display: grid; gap: 24px; }
.cards-2 { grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); }
.cards-3 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.cards-4 { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
/* Strict 4-up on desktop, 2x2 on mobile — used for the 4 services on the homepage. */
.cards-4-fixed { grid-template-columns: repeat(2, 1fr); gap: 16px; }
@media (min-width: 900px) { .cards-4-fixed { grid-template-columns: repeat(4, 1fr); gap: 20px; } }
.card {
background: var(--surface);
border: 1px solid var(--rule);
border-radius: var(--r);
overflow: hidden;
transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); border-color: var(--ink-3); }
.card a { color: inherit; display: block; }
.card-img { aspect-ratio: 4/3; background: var(--surface-card); position: relative; overflow: hidden; }
.card-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease; }
.card:hover .card-img img { transform: scale(1.04); }
.card-body { padding: 22px 24px 26px; }
.card-title { font-family: var(--sans); font-size: 19px; font-weight: 600; letter-spacing: -0.005em; margin: 0 0 8px; }
.card-body p { color: var(--ink-3); margin: 0; font-size: 14.5px; line-height: 1.55; }
.card-meta { display: flex; gap: 12px; margin-top: 14px; font-family: var(--mono); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
/* Service tile — taller, photo-led */
.tile { display: block; position: relative; aspect-ratio: 4/5; overflow: hidden; border-radius: var(--r); background: var(--ink); color: #fff; }
/* In a 4-up row the tiles get narrow — relax aspect from 3/5
(which strangled longer service names) to 4/5 on desktop and
give the body copy a little more breathing room. Mobile keeps
the taller 3/5 portrait look. */
.cards-4-fixed .tile { aspect-ratio: 3/5; }
@media (min-width: 900px) {
.cards-4-fixed .tile { aspect-ratio: 4/5; }
}
.cards-4-fixed .tile-body { left: 18px; right: 18px; bottom: 18px; }
.cards-4-fixed .tile-body h3 { font-size: 22px; line-height: 1.1; }
.cards-4-fixed .tile-body p { font-size: 13.5px; margin-top: 10px; line-height: 1.5; }
.cards-4-fixed .tile-body .open { font-size: 12.5px; margin-top: 12px; }
@media (min-width: 1100px) { .cards-4-fixed .tile-body h3 { font-size: 24px; } .cards-4-fixed .tile-body p { font-size: 14px; } }
.tile img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; }
.tile:hover img { transform: scale(1.05); }
.tile::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(22,19,16,0) 35%, rgba(22,19,16,0.72) 100%); }
.tile-body { position: absolute; left: 24px; right: 24px; bottom: 24px; z-index: 2; }
.tile-body h3 { color: #fff; font-family: var(--serif); font-size: 30px; font-weight: 400; letter-spacing: -0.01em; }
.tile-body p { color: rgba(255,255,255,0.82); margin: 6px 0 0; font-size: 14px; line-height: 1.5; }
.tile-body .open { display: inline-flex; align-items: center; gap: 6px; margin-top: 14px; color: var(--orange-bright); font-weight: 600; font-size: 13.5px; }
/* === Section heads ============================================== */
.shead { margin-bottom: 48px; max-width: 720px; }
.shead .eyebrow { display: block; margin-bottom: 14px; }
.shead h2 { margin-bottom: 16px; }
.shead p { color: var(--ink-3); font-size: 18px; line-height: 1.55; margin: 0; }
/* === FAQ ======================================================== */
.faq { border-top: 1px solid var(--rule); }
.faq details {
border-bottom: 1px solid var(--rule);
padding: 24px 0;
}
.faq summary {
list-style: none;
cursor: pointer;
display: flex;
justify-content: space-between;
align-items: center;
gap: 24px;
font-family: var(--serif);
font-size: 24px;
font-weight: 400;
letter-spacing: -0.01em;
color: var(--ink);
padding-right: 8px;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
content: '+';
font-family: var(--sans);
font-size: 28px;
font-weight: 300;
color: var(--orange);
transition: transform 0.2s ease;
flex-shrink: 0;
}
.faq details[open] summary::after { content: '−'; }
.faq .a {
padding-top: 16px;
max-width: 70ch;
color: var(--ink-3);
font-size: 16px;
line-height: 1.6;
}
.faq .a p:last-child { margin-bottom: 0; }
/* === Spec table ================================================ */
.spec-table { width: 100%; border-collapse: collapse; background: var(--surface); border: 1px solid var(--rule); }
.spec-table th, .spec-table td { padding: 16px 20px; text-align: left; border-bottom: 1px solid var(--rule); font-size: 15px; }
.spec-table th { width: 38%; font-family: var(--sans); font-weight: 600; color: var(--ink-2); background: var(--rule-soft); }
.spec-table td { color: var(--ink-3); }
.spec-table tr:last-child th, .spec-table tr:last-child td { border-bottom: 0; }
/* === Form ======================================================= */
.estimate-card {
background: var(--surface);
border-radius: var(--r-lg);
padding: 32px 32px 28px;
box-shadow: var(--shadow-lg);
color: var(--ink);
}
.estimate-card .step-meta { display: flex; justify-content: space-between; align-items: center; margin-bottom: 22px; }
.estimate-card .step-meta .step { font-family: var(--mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--orange); font-weight: 500; }
.estimate-card .step-meta .of { font-family: var(--mono); font-size: 11px; color: var(--muted); }
.estimate-card .progress { height: 3px; background: var(--rule); border-radius: 2px; overflow: hidden; margin-bottom: 26px; }
.estimate-card .progress > span { display: block; height: 100%; background: var(--orange); transition: width 0.3s ease; border-radius: 2px; }
.estimate-card h3 { font-family: var(--serif); font-size: 28px; font-weight: 400; letter-spacing: -0.012em; line-height: 1.15; margin: 0 0 6px; }
.estimate-card .sub { color: var(--muted); margin-bottom: 22px; font-size: 14px; }
.estimate-step { display: none; }
.estimate-step.active { display: block; }
.field { display: flex; flex-direction: column; margin-bottom: 14px; }
.field label { font-size: 12.5px; font-weight: 600; letter-spacing: 0.02em; color: var(--ink-3); margin-bottom: 6px; text-transform: uppercase; }
.field input, .field select, .field textarea {
font: inherit; font-size: 16px; padding: 13px 14px; border: 1px solid var(--rule);
border-radius: var(--r); background: var(--surface); color: var(--ink);
transition: border-color 0.15s ease;
}
.field input:focus, .field select:focus, .field textarea:focus { outline: 0; border-color: var(--orange); }
.choice-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.choice {
border: 1px solid var(--rule); padding: 14px; border-radius: var(--r);
cursor: pointer; background: var(--surface); transition: all 0.15s ease;
font-size: 14.5px; font-weight: 500; color: var(--ink-2);
display: flex; align-items: center; gap: 10px;
}
.choice:hover { border-color: var(--ink-3); }
.choice.selected { border-color: var(--orange); background: var(--orange-tint); color: var(--ink); }
.choice .dot { width: 12px; height: 12px; border-radius: 50%; border: 1.5px solid var(--rule); flex-shrink: 0; }
.choice.selected .dot { border-color: var(--orange); background: var(--orange); }
.form-actions { display: flex; justify-content: space-between; align-items: center; margin-top: 22px; }
.link-back { font-size: 14px; color: var(--muted); font-weight: 500; background: none; border: 0; padding: 0; }
.link-back:hover { color: var(--ink); }
.estimate-success { display: none; text-align: center; padding: 24px 8px; }
.estimate-success.active { display: block; }
.estimate-success .check { font-size: 56px; color: var(--orange); margin-bottom: 12px; line-height: 1; }
.estimate-success h3 { margin-bottom: 8px; }
/* === Trust strip ================================================ */
/* Unify the visual rhythm: the strip mixes 32 px serif numerals
("5.0", "14") with 40 px raster badges, with 13 px labels next
to both. Slightly shrink the numerals, slightly shrink the
badges, normalize the column width so all four cells read as
equally-weighted credibility cues. */
.trust-strip { background: var(--ink); color: rgba(255,255,255,0.86); padding: 28px 0; }
.trust-strip .pair > :first-child { flex-shrink: 0; min-width: 44px; }
.trust-strip .pair img { height: 36px; width: auto; }
.trust-strip .pair b[style*="font-size: 32px"] { font-size: 30px !important; line-height: 0.9 !important; display: inline-block; min-width: 44px; }
/* === Animated nav logo (white silhouette → invert to dark on bone) === */
/* Stacked logo: animated WebP underneath, static PNG on top crossfades in.
Eliminates the blink from img.src swapping by never touching src after load. */
.logo-stack { position: relative; display: inline-block; height: 36px; }
.logo-stack img { display: block; height: 36px; width: auto; }
.logo-stack .logo-animated { filter: brightness(0); transition: opacity 400ms ease; }
.logo-stack .logo-static { position: absolute; top: 0; left: 0; opacity: 0; transition: opacity 400ms ease; }
/* When the animation completes, JS adds .played to the stack. Crossfade
the animated WebP OUT as the static fades IN — otherwise both stay at
opacity 1 and their artwork composites into a visibly thicker logo. */
.logo-stack.played .logo-animated { opacity: 0; }
.logo-stack.played .logo-static { opacity: 1; }
/* Inline head script sets .logo-played on if sessionStorage flag is
set, so subsequent pages skip the animation entirely without any frame
where the animated WebP shows. */
html.logo-played .logo-stack .logo-animated { visibility: hidden; opacity: 0; }
html.logo-played .logo-stack .logo-static { opacity: 1; transition: none; }
.trust-strip .wrap { display: flex; gap: 48px; flex-wrap: wrap; align-items: center; justify-content: space-between; }
.trust-strip .pair { display: flex; align-items: center; gap: 14px; }
.trust-strip .pair img { height: 40px; width: auto; }
.trust-strip .pair b { display: block; color: #fff; font-weight: 600; font-size: 15px; }
.trust-strip .pair span { font-size: 13px; color: rgba(255,255,255,0.6); }
/* === Reviews ==================================================== */
.review-card {
background: var(--surface);
border: 1px solid var(--rule);
border-radius: var(--r);
padding: 28px 30px 30px;
display: flex; flex-direction: column; gap: 18px;
}
.review-card .stars { color: var(--orange); letter-spacing: 0.1em; font-size: 15px; }
.review-card blockquote { margin: 0; font-family: var(--serif); font-size: 22px; line-height: 1.35; font-weight: 400; color: var(--ink); letter-spacing: -0.005em; }
.review-card cite { font-style: normal; font-size: 13.5px; color: var(--muted); display: flex; flex-direction: column; gap: 2px; margin-top: auto; }
.review-card cite b { color: var(--ink); font-weight: 600; font-size: 14.5px; }
/* Tighten the third typographic register on review cards. Was:
mono uppercase 10.5 px (a fourth register on a card that already
has serif quote / sans name / sans city). Now: same sans, slightly
smaller and italicised so it reads as supplementary context. */
.review-card .meta { font-family: var(--sans); font-size: 12.5px; letter-spacing: 0; text-transform: none; color: var(--muted-2); font-style: italic; }
/* === Process timeline =========================================== */
/* Five steps. On wide desktops a 5-up row with vertical rules
feels protocol-driven (good). Below ~1100 px the columns
pinch to <165 px each and "Stand behind" wraps to two lines
while "Inspect" stays on one — broken type rhythm. So:
< 700 px → 1 column (stacked, horizontal rules)
700–1099 → 2 columns (top rules, paired)
≥ 1100 → 5 columns (left rules, original layout)
*/
.process { display: grid; grid-template-columns: 1fr; gap: 4px; }
@media (min-width: 700px) { .process { grid-template-columns: repeat(2, 1fr); gap: 0; } }
@media (min-width: 1100px) { .process { grid-template-columns: repeat(5, 1fr); gap: 0; } }
.process-step { padding: 28px 24px; border-top: 1px solid var(--rule); position: relative; }
.process-step:first-child { border-top: 0; }
@media (min-width: 700px) and (max-width: 1099px) {
/* 2-col layout: top rules on rows after the first row */
.process-step { border-top: 1px solid var(--rule); }
.process-step:first-child, .process-step:nth-child(2) { border-top: 0; }
}
@media (min-width: 1100px) {
/* 5-col layout: vertical rules between columns */
.process-step { border-top: 0; border-left: 1px solid var(--rule); }
.process-step:first-child { border-left: 0; }
}
.process-step .n { font-family: var(--mono); font-size: 11px; letter-spacing: 0.1em; color: var(--orange); font-weight: 500; margin-bottom: 12px; }
.process-step h4 { font-family: var(--serif); font-size: 22px; font-weight: 400; letter-spacing: -0.01em; margin: 0 0 6px; }
.process-step p { color: var(--ink-3); font-size: 14px; margin: 0; line-height: 1.5; }
/* === In-short callout =========================================== */
.in-short {
background: var(--surface-card);
border-left: 3px solid var(--orange);
padding: 20px 24px;
margin: 32px 0;
font-size: 17px;
line-height: 1.55;
color: var(--ink);
}
.in-short b { font-weight: 600; }
.in-short .label { display: block; font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--orange); margin-bottom: 6px; font-weight: 500; }
/* === Long-form prose ============================================ */
.prose { max-width: 720px; font-size: 17px; line-height: 1.65; color: var(--ink-2); }
.prose p { margin: 0 0 1.2em; }
.prose h2 { margin: 2em 0 0.5em; }
.prose h3 { margin: 2em 0 0.4em; font-family: var(--serif); font-size: 26px; font-weight: 400; letter-spacing: -0.012em; }
.prose ul, .prose ol { padding-left: 1.4em; margin: 0 0 1.2em; }
.prose li { margin-bottom: 0.4em; }
.prose strong { font-weight: 600; color: var(--ink); }
.prose blockquote { border-left: 3px solid var(--orange); padding-left: 20px; margin: 1.4em 0; font-family: var(--serif); font-size: 22px; line-height: 1.45; color: var(--ink); font-style: italic; }
/* === Article masthead =========================================== */
.article-mast { padding: 48px 0 24px; border-bottom: 1px solid var(--rule); margin-bottom: 48px; }
.article-mast .crumbs { font-family: var(--mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); margin-bottom: 24px; }
.article-mast .crumbs a { color: var(--muted); }
.article-mast .crumbs a:hover { color: var(--orange); }
.article-mast h1 { margin-bottom: 24px; max-width: 18ch; }
.article-mast .by { display: flex; align-items: center; gap: 14px; }
.article-mast .by img { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; }
.article-mast .by .name { font-weight: 600; font-size: 14.5px; }
.article-mast .by .meta { font-family: var(--mono); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
/* === Footer ===================================================== */
.foot { background: var(--ink); color: rgba(255,255,255,0.7); padding: 72px 0 32px; }
.foot .wrap { display: grid; gap: 48px; grid-template-columns: 1.4fr 1fr 1fr 1fr; }
@media (max-width: 900px) { .foot .wrap { grid-template-columns: 1fr 1fr; } }
@media (max-width: 540px) { .foot .wrap { grid-template-columns: 1fr; } }
.foot h5 { font-family: var(--sans); font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em; color: #fff; margin: 0 0 18px; }
.foot ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.foot a { color: rgba(255,255,255,0.7); font-size: 14px; }
.foot a:hover { color: var(--orange-bright); }
.foot .brand { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 20px; }
@media (min-width: 901px) { .foot .brand { padding-right: 40px; } }
.foot .brand img { height: 96px; width: auto; max-width: 280px; object-fit: contain; display: block; }
.foot .brand p { margin: 0; font-size: 14px; line-height: 1.6; max-width: 32ch; color: rgba(255,255,255,0.72); }
@media (max-width: 900px) { .foot .brand { align-items: flex-start; text-align: left; } }
.foot .nap { font-size: 14px; line-height: 1.7; color: rgba(255,255,255,0.7); }
.foot .nap b { display: block; color: #fff; font-weight: 600; }
.foot .nap a { color: rgba(255,255,255,0.7); }
.foot .review-cta { margin-top: 12px; }
/* Footer Google-review CTA — hand-built, transparent bg */
.foot .review-cta { display: inline-flex; align-items: center; gap: 18px; padding: 18px 22px; border: 1px solid rgba(255,255,255,0.18); border-radius: 14px; background: transparent; color: #fff; transition: all 0.18s ease; text-align: left; }
.foot .review-cta:hover { border-color: var(--orange-bright); transform: translateY(-2px); background: rgba(255,255,255,0.03); }
.foot .review-cta .g-logo { width: 56px; height: 56px; flex-shrink: 0; }
.foot .review-cta .g-meta { display: flex; flex-direction: column; gap: 4px; }
.foot .review-cta .g-stars { color: #FFC107; font-size: 18px; letter-spacing: 2px; line-height: 1; }
.foot .review-cta .g-rating { color: #fff; font-size: 15px; line-height: 1.2; }
.foot .review-cta .g-rating b { font-weight: 600; font-size: 17px; }
.foot .review-cta .g-rating span { color: rgba(255,255,255,0.65); font-size: 13.5px; }
.foot .review-cta .g-cta { font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--orange-bright); margin-top: 4px; font-weight: 600; }
.foot .review-cta .arr { display: inline-block; transition: transform 0.18s ease; }
.foot .review-cta:hover .arr { transform: translateX(3px); }
.foot .foot-bottom { margin-top: 56px; padding-top: 24px; border-top: 1px solid rgba(255,255,255,0.12); display: flex; justify-content: space-between; flex-wrap: wrap; gap: 16px; font-family: var(--mono); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: rgba(255,255,255,0.45); }
.foot-bottom > div { white-space: nowrap; }
.foot-bottom a { color: rgba(255,255,255,0.45); }
@media (max-width: 700px) {
.foot .foot-bottom { justify-content: center; text-align: center; }
.foot-bottom > div { white-space: normal; }
}
/* === Sticky tap-to-call (mobile) ================================ */
.sticky-call {
position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 90;
background: var(--orange); color: #fff;
padding: 14px 20px; border-radius: var(--r);
display: flex; align-items: center; justify-content: center; gap: 10px;
font-weight: 600; font-size: 16px;
box-shadow: var(--shadow-lg);
}
@media (min-width: 700px) { .sticky-call { display: none; } }
/* Reserve space at the bottom of every page so the sticky-call
pill doesn't cover the last 60 px of the footer/legal/CTA on
long pages. Desktop hides the pill, so this only applies on
mobile widths. */
@media (max-width: 699px) {
body { padding-bottom: 76px; }
}
/* === Inline review (compact) ==================================== */
.inline-review { display: grid; gap: 8px; padding: 24px 0; border-top: 1px solid var(--rule); }
.inline-review .stars { color: var(--orange); }
.inline-review blockquote { margin: 0; font-family: var(--serif); font-size: 22px; line-height: 1.45; color: var(--ink); letter-spacing: -0.005em; }
.inline-review cite { font-style: normal; font-size: 13px; color: var(--muted); }
/* === Misc ======================================================= */
.dark-section { background: var(--ink); color: rgba(255,255,255,0.86); }
.dark-section h2, .dark-section h3, .dark-section h4 { color: #fff; }
.dark-section .eyebrow { color: var(--orange-bright); }
.dark-section .lede { color: rgba(255,255,255,0.78); }
.dark-section .btn-ghost { color: #fff; border-color: rgba(255,255,255,0.3); }
.dark-section .btn-ghost:hover { border-color: #fff; }
.before-after { position: relative; aspect-ratio: 16/10; border-radius: var(--r); overflow: hidden; background: var(--ink); }
.before-after img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.before-after .ba-label { position: absolute; top: 16px; padding: 6px 10px; background: rgba(22,19,16,0.78); color: #fff; font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase; }
.kvs { display: grid; grid-template-columns: 1fr; gap: 0; border-top: 1px solid var(--rule); }
.kvs > div { display: grid; grid-template-columns: 40% 1fr; gap: 16px; padding: 16px 0; border-bottom: 1px solid var(--rule); }
.kvs dt { font-family: var(--mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); font-weight: 500; margin: 0; }
.kvs dd { margin: 0; color: var(--ink-2); font-size: 15px; }
/* === Skip-to-content link (a11y) ================================ */
/* Visible only when focused via keyboard tab. Anchored to the
wrapper on each page. */
.skip-link {
position: absolute; top: 8px; left: 8px; z-index: 300;
background: var(--ink); color: #fff;
padding: 10px 14px; border-radius: var(--r);
font-weight: 600; font-size: 14px; text-decoration: none;
transform: translateY(-200%);
transition: transform 0.2s ease;
}
.skip-link:focus,
.skip-link:focus-visible {
transform: translateY(0); color: #fff;
outline: 2px solid var(--orange-bright); outline-offset: 2px;
}
/* === Breadcrumbs ================================================= */
/* Matches the BreadcrumbList JSON-LD that already ships on inner
pages. Google requires the on-page UI to mirror the schema for
the rich result to surface in SERPs. Covers both the historical
`.crumbs` class used across the site and the newer `.breadcrumbs`
class. The `.article-mast .crumbs` rule above still wins inside
article mastheads (which want a slightly different vertical
rhythm) — this baseline applies everywhere else. */
.crumbs,
.breadcrumbs {
font-family: var(--mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase;
color: var(--muted);
padding: 18px 0 16px;
border-bottom: 1px solid var(--rule-soft);
display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px;
margin-bottom: 14px;
}
/* Article masthead breadcrumbs keep their existing tight, borderless
look (defined above in `.article-mast .crumbs`). */
.article-mast .crumbs {
padding: 0; border-bottom: 0; margin-bottom: 24px;
}
.crumbs a, .breadcrumbs a { color: var(--muted); }
.crumbs a:hover, .breadcrumbs a:hover { color: var(--orange); text-decoration: none; }
.crumbs .sep, .breadcrumbs .sep { opacity: 0.5; }
.crumbs [aria-current="page"],
.breadcrumbs [aria-current="page"] { color: var(--ink-2); font-weight: 500; }
/* === Prose-link contrast bump =================================== */
/* The body link color (#B85C00 on warm cream) sits at 4.88:1 —
just over WCAG AA. Bump inline prose links to --orange-hover
(~6.0:1) and underline them for legibility in flowing text.
Button/CTA orange is untouched. */
.prose a, .faq .a a, .lede a {
color: var(--orange-hover);
text-decoration: underline;
text-underline-offset: 3px;
text-decoration-thickness: 1px;
}
.prose a:hover, .faq .a a:hover, .lede a:hover {
color: var(--ink); text-decoration-thickness: 2px;
}
/* === aria-current="page" on nav ================================= */
/* Active-link orange was previously painted via inline style on a
per-page basis. Drive it from the ARIA attribute too so screen
readers announce the current page. */
.nav-links a[aria-current="page"],
.nav-drawer ul a[aria-current="page"] { color: var(--orange); }
/* === Tweaks panel hook ========================================== */
[data-tweak-cream="false"] { --surface-warm: #FFFFFF; --surface-card: #F6F6F6; --rule-soft: #F2F2F2; }
[data-tweak-orange="bright"] { --orange: #FF8200; --orange-hover: #E66E00; }
[data-tweak-aeo="true"] [data-aeo-note] { outline: 2px dashed var(--orange); outline-offset: 2px; position: relative; }
[data-tweak-aeo="true"] [data-aeo-note]::before {
content: attr(data-aeo-note);
position: absolute; top: -22px; left: 0;
background: var(--orange); color: #fff;
font-family: var(--mono); font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase;
padding: 3px 6px; z-index: 50; white-space: nowrap; pointer-events: none;
}
/* === Home-logo easter egg (joke popover) ======================== */
/* Triggered by tapping the .nav-logo on the home page only.
Anchored below the nav via JS-set top/left so it tracks the
logo across viewport sizes. Visual language follows the
existing editorial card pattern: warm cream surface, thin
ink border, mono eyebrow + serif italic punchline. */
.joke-pop {
position: absolute; z-index: 150;
background: var(--surface-card);
border: 1px solid var(--ink);
border-radius: var(--r-lg);
box-shadow: var(--shadow-md);
padding: 18px 22px 14px;
opacity: 0;
transform: translateY(-8px) scale(0.985);
transform-origin: top left;
transition: opacity 220ms ease, transform 220ms cubic-bezier(0.2, 0.65, 0.25, 1);
pointer-events: none;
}
.joke-pop.open { opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; }
.joke-pop-head {
display: flex; align-items: center; justify-content: space-between;
gap: 12px; margin-bottom: 14px;
}
.joke-pop-eyebrow {
font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase;
font-weight: 500; white-space: nowrap; min-width: 0;
}
.joke-pop-eyebrow .joke-pop-label { color: var(--muted-2); }
.joke-pop-eyebrow [data-joke-count] { color: var(--orange); }
.joke-pop-close {
background: transparent; border: 0; padding: 2px 6px;
font-size: 20px; line-height: 1; color: var(--muted);
cursor: pointer; border-radius: 4px; transition: color 0.15s ease, background 0.15s ease;
}
.joke-pop-close:hover { color: var(--ink); background: var(--rule-soft); }
.joke-pop-setup {
font-family: var(--sans); font-size: 16px; line-height: 1.45;
color: var(--ink-2); margin: 0; font-weight: 500;
text-wrap: pretty;
}
.joke-pop-rule {
margin: 14px 0 12px;
width: 28px; height: 2px;
background: var(--orange);
border-radius: 1px;
}
.joke-pop-punch {
font-family: var(--serif); font-style: italic; font-size: 23px; line-height: 1.18;
color: var(--ink); margin: 0; letter-spacing: -0.012em;
text-wrap: pretty;
}
.joke-pop-foot {
margin-top: 16px; padding-top: 11px;
border-top: 1px solid var(--rule-soft);
}
.joke-pop-hint {
font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.10em; text-transform: uppercase;
color: var(--muted-2);
}
.joke-pop-hint .arr {
display: inline-block; margin-left: 4px; color: var(--orange);
transition: transform 220ms ease;
}
.joke-pop.ping .joke-pop-hint .arr { transform: rotate(180deg); }
/* Tap-feedback "ping" — subtle scale flicker when the joke changes */
@keyframes joke-pop-ping {
0% { transform: translateY(0) scale(1); }
35% { transform: translateY(0) scale(1.014); }
100% { transform: translateY(0) scale(1); }
}
.joke-pop.open.ping { animation: joke-pop-ping 320ms cubic-bezier(0.2, 0.65, 0.25, 1); }
@media (prefers-reduced-motion: reduce) {
.joke-pop { transition: opacity 120ms linear; transform: none; }
.joke-pop.open { transform: none; }
.joke-pop.open.ping { animation: none; }
.joke-pop.ping .joke-pop-hint .arr { transition: none; }
}