/* Locke & Ladder - Site 3.1
Editorial / luxury exterior design system.
Keeps the stacked full-bleed photography aesthetic with the
AI-friendly information layer beneath it.
*/
/* Fonts self-hosted locally in /assets/fonts/: Termina (display), Mona Sans
(body/sans) and Brier (serif emphasis + nav flip). All three ship as local
woff2 - no Google Fonts / render-blocking chain. */
@font-face {
font-family: "Termina";
src: url("fonts/TerminaTest-Medium.woff2") format("woff2");
font-weight: 500;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Termina";
src: url("fonts/TerminaTest-Heavy.woff2") format("woff2");
font-weight: 800;
font-style: normal;
font-display: swap;
}
/* Mona Sans replaces Source Sans 3 as the body/sans face. Upright variable
woff2: weight 200-900, width 75-125. Body copy renders at the approved
Regular preset (weight 400, width/stretch 100%) by default. */
@font-face {
font-family: "Mona Sans";
src: url("fonts/MonaSansVariable.woff2") format("woff2-variations");
font-weight: 200 900;
font-stretch: 75% 125%;
font-style: normal;
font-display: swap;
}
/* Brier replaces Source Serif 4 as the serif emphasis face (nav hover flip and
the culture heading accents). Single weight-axis woff2. */
@font-face {
font-family: "Brier";
src: url("fonts/Brier-Bold.woff2") format("woff2");
font-weight: 100 900;
font-style: normal;
font-display: swap;
}
:root {
/* Light is the site-wide base. Dark surfaces (.band.dark, .cta-section,
.ethos-band, footer, roofing-dark, ai-composed 3n) opt back into dark
tokens explicitly. The visitor-facing light/dark toggle has been retired. */
--ink: #1d1a15;
--ink-soft: #38332b;
--muted: #625a4e;
--line: rgba(29,26,21,.17);
--line-soft: rgba(29,26,21,.09);
--paper: #eee9dd;
--soft: #e2dbcc;
--cream: #eee9dd;
--dark: #0d0d0d;
--dark3: #1f1f1f;
--accent: #34373b;
--gold: #909090;
--gold-soft: #a8a8a8;
/* Google review-star gold (matches the yellow of the Google "G"). Used only
for review stars + Google badges, so they read as genuine Google reviews. */
--google-gold: #fbbc04;
--copper: #34373b;
--patina: #6b8e7b;
--green: #6b8e7b;
--radius: 0;
--font-display: 'Termina', 'Arial Narrow', system-ui, sans-serif;
--font-sans: 'Mona Sans', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
--font-serif: 'Brier', Georgia, 'Times New Roman', serif;
--shadow-soft: 0 1px 2px rgba(0,0,0,.04), 0 12px 36px rgba(20,15,10,.07);
--container: 1380px;
}
* { box-sizing: border-box; }
.skip-link {
position: fixed;
left: 16px;
top: 12px;
z-index: 10000;
padding: 12px 16px;
background: #ffffff;
color: #111111;
font: 700 14px/1 var(--font-sans);
text-decoration: none;
border: 2px solid #111111;
transform: translateY(-180%);
transition: transform .15s ease;
}
.skip-link:focus { transform: translateY(0); }
/* Match original Cormorant/body footprint: scale the new fonts by x-height (weights unchanged) */
[style*="--font-display"] { }
html, body { margin: 0; padding: 0; width: 100%; overflow-x: clip; }
@supports not (overflow: clip) {
html, body { overflow-x: hidden; }
}
html.lenis,
html.lenis body {
height: auto;
}
html.lenis.lenis-smooth,
html.ll-lenis-fallback {
scroll-behavior: auto !important;
}
html.lenis.lenis-smooth [data-lenis-prevent] {
overscroll-behavior: contain;
}
html.lenis.lenis-stopped {
overflow: hidden;
}
body {
font-family: var(--font-sans);
color: var(--ink-soft);
background: var(--paper);
line-height: 1.55;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; }
em, i, cite, q { font-style: normal; }
/* ============ HEADER ============
Default state: solid paper background with dark text and dark logo.
.over-hero state (added by JS while the page is scrolled over the dark hero
photo): transparent background with white text and white logo. */
.site-header {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 100;
font-family: var(--font-display);
backdrop-filter: blur(14px);
border-bottom: 1px solid var(--line);
transition: background .25s ease, border-color .25s ease, backdrop-filter .25s ease;
}
/* .site-header / .schedule-ribbon transforms are scroll-driven by site.js:
the footer's top edge pushes them up and hands them back (no transition) */
.site-header.over-hero {
backdrop-filter: none;
}
.nav {
max-width: var(--container);
margin: 0 auto;
padding: 22px 36px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 40px;
}
.brand {
display: flex;
align-items: center;
gap: 14px;
line-height: 1.05;
color: var(--ink);
transition: color .25s ease;
}
.site-header.over-hero .brand { color: #fff; }
.brand-logo {
height: 52px;
width: 52px;
display: block;
object-fit: contain;
transition: filter .25s ease;
}
/* OVER HERO: invert to white - visible against the dark photo. */
.brand-text-mark {
display: flex;
flex-direction: column;
line-height: 1.05;
color: inherit;
}
.brand-text-mark strong {
font-family: var(--font-display);
font-size: 22px;
font-weight: 500;
letter-spacing: .03em;
}
.brand-text-mark small {
font-size: 9px;
letter-spacing: .26em;
text-transform: uppercase;
font-weight: 700;
opacity: .7;
margin-top: 4px;
}
.brand-text { display: flex; flex-direction: column; line-height: 1.05; }
.brand-text strong {
font-family: var(--font-display);
font-size: 22px;
font-weight: 500;
letter-spacing: .04em;
}
.brand-text small {
font-size: 10px;
letter-spacing: .26em;
text-transform: uppercase;
font-weight: 600;
opacity: .8;
margin-top: 2px;
}
.footer-brand-logo {
height: auto;
display: block;
object-fit: contain;
margin-bottom: 22px;
}
/* ============ PARTNER / CERTIFICATION BADGES ============ */
.partners-band {
background: var(--paper);
}
.partners-band .band-inner { display: flex; flex-direction: column; gap: 36px; align-items: center; }
.partners-band .partners-eyebrow {
font-family: var(--font-sans);
font-size: 11px;
letter-spacing: .28em;
text-transform: uppercase;
font-weight: 700;
color: var(--accent);
}
.partners-band h3 {
font-family: var(--font-display);
font-weight: 400;
font-size: clamp(28px, 3.4vw, 44px);
text-align: center;
max-width: 760px;
line-height: 1.15;
}
.partners-band h3 em { color: var(--accent); font-style: normal; }
.partner-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
width: 100%;
max-width: 1100px;
}
@media (max-width: 880px) { .partner-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .partner-grid { grid-template-columns: 1fr; } }
.partner-card {
padding: 36px 24px;
border-right: 1px solid var(--line);
border-bottom: 1px solid var(--line);
display: flex;
flex-direction: column;
gap: 10px;
text-align: center;
align-items: center;
}
.partner-card:nth-child(4n) { border-right: 0; }
@media (max-width: 880px) {
.partner-card:nth-child(2n) { border-right: 0; }
}
@media (max-width: 480px) {
.partner-card { border-right: 0; }
}
.partner-card .partner-name {
font-family: var(--font-display);
font-weight: 500;
font-size: 22px;
color: var(--ink);
letter-spacing: -0.005em;
}
.partner-card .partner-role {
font-family: var(--font-sans);
font-size: 11px;
letter-spacing: .22em;
text-transform: uppercase;
font-weight: 700;
color: var(--accent);
}
.partner-card .partner-blurb {
font-size: 14px;
color: var(--muted);
line-height: 1.55;
margin-top: 4px;
}
.partner-grid--roofing {
grid-template-columns: repeat(2, minmax(0, 1fr));
max-width: 980px;
}
.partner-grid--roofing .partner-card {
border-right: 1px solid var(--line);
}
.partner-grid--roofing .partner-card:nth-child(2n) {
border-right: 0;
}
.partner-card--roofing {
min-height: 320px;
justify-content: flex-start;
gap: 14px;
}
.partner-card .partner-name--wordmark {
font-size: clamp(28px, 3.4vw, 42px);
letter-spacing: 0;
min-height: 48px;
}
.partner-certifications {
display: flex;
flex-wrap: wrap;
gap: 12px;
justify-content: center;
align-items: center;
margin-top: auto;
padding-top: 8px;
}
.partner-certifications img {
width: 78px;
height: 78px;
object-fit: contain;
border-radius: 0;
background: transparent;
padding: 0;
box-shadow: none;
filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.16));
}
.partner-certifications .partner-certification--premium-warranty {
width: 108px;
height: 93px;
}
body.theme-dark .partner-certifications img {
filter: none;
}
@media (max-width: 680px) {
.partner-grid--roofing {
grid-template-columns: 1fr;
}
.partner-grid--roofing .partner-card {
border-right: 0;
}
}
/* ============ MATERIAL / PRODUCT BLOCKS ============ */
.product-list {
display: grid;
grid-template-columns: 1fr;
gap: 0;
}
.product-row {
display: grid;
grid-template-columns: 240px 1fr;
gap: 32px;
padding: 36px 0;
align-items: start;
}
.product-row:last-child { border-bottom: 0; }
@media (max-width: 720px) { .product-row { grid-template-columns: 1fr; gap: 12px; } }
.product-row .product-label {
font-family: var(--font-display);
font-weight: 500;
font-size: clamp(22px, 2.4vw, 28px);
color: var(--ink);
line-height: 1.2;
}
.product-row .product-label span {
display: block;
font-family: var(--font-sans);
font-size: 10px;
letter-spacing: .26em;
text-transform: uppercase;
font-weight: 700;
color: var(--accent);
margin-bottom: 8px;
}
.product-row .product-body p { font-size: 17px; line-height: 1.65; color: var(--muted); }
.product-row .product-body p strong { color: var(--ink); }
.nav-links { display: flex; gap: 32px; flex-wrap: wrap; }
.nav-links a {
padding: 6px 0;
position: relative;
transition: color .2s;
}
.nav-links a::after {
content: '';
position: absolute;
left: 0;
right: 0;
bottom: -2px;
height: 1px;
background: var(--gold);
transform: scaleX(0);
transform-origin: left center;
transition: transform .25s ease;
}
.nav-links a:hover::after,
.nav-links a[aria-current="page"]::after { transform: scaleX(1); }
.nav-cta {
display: inline-flex;
align-items: center;
gap: 10px;
transition: background .2s, color .2s, border-color .2s;
}
/* Mobile nav toggle (hamburger) - hidden on desktop, shown <=720px (see media query). */
.nav-toggle {
display: none;
flex-direction: column;
justify-content: center;
gap: 5px;
width: 44px;
height: 44px;
padding: 10px;
background: transparent;
border: 0;
cursor: pointer;
}
.nav-toggle span {
display: block;
width: 24px;
height: 2px;
background: var(--ink);
transition: transform .25s ease, opacity .2s ease, background .25s ease;
}
.site-header.over-hero .nav-toggle span { background: #fff; }
.nav.nav-open .nav-toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav.nav-open .nav-toggle span:nth-child(2) { opacity: 0; }
.nav.nav-open .nav-toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
/* ============ TYPE ============ */
h1, h2, h3, h4 {
margin: 0;
font-family: var(--font-display);
font-weight: 500;
letter-spacing: -0.005em;
color: var(--ink);
line-height: 1.05;
}
h3 {
font-size: clamp(24px, 2.4vw, 34px);
line-height: 1.15;
}
h4 { font-size: 14px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; line-height: 1.3; }
p {
margin: 0;
color: var(--muted);
}
strong { font-weight: 600; color: var(--ink); }
.eyebrow {
display: inline-block;
font-family: var(--font-sans);
font-size: 11px;
letter-spacing: .26em;
text-transform: uppercase;
font-weight: 700;
color: var(--gold);
margin: 0 0 22px;
}
.eyebrow.dark { color: var(--accent); }
.script-mark {
font-family: var(--font-display);
font-style: normal;
font-weight: 400;
color: var(--gold);
}
/* ============ HERO (BRAND) ============ */
.brand-hero {
position: relative;
min-height: 100vh;
background: #0d0d0d;
overflow: hidden;
display: grid;
align-items: end;
}
.brand-hero .bg {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
.brand-hero .shade {
position: absolute;
inset: 0;
background:
linear-gradient(180deg, rgba(0,0,0,.5) 0%, rgba(0,0,0,0) 35%, rgba(0,0,0,0) 60%, rgba(0,0,0,.8) 100%),
linear-gradient(90deg, rgba(0,0,0,.5), rgba(0,0,0,.05) 60%);
}
.brand-hero .inner {
position: relative;
z-index: 2;
max-width: var(--container);
margin: 0 auto;
padding: 220px 36px 120px;
color: #fff;
width: 100%;
}
.brand-hero h1 {
color: #fff;
font-family: var(--font-display);
max-width: 1100px;
text-shadow: 0 1px 2px rgba(0,0,0,.2);
}
.brand-hero h1 em {
font-style: normal;
font-weight: 400;
color: var(--gold-soft);
}
.brand-hero .lede {
color: rgba(255,255,255,.92);
font-size: clamp(18px, 1.6vw, 22px);
max-width: 720px;
margin-top: 28px;
line-height: 1.5;
}
.brand-hero .actions { display: flex; flex-wrap: wrap; gap: 22px; margin-top: 44px; }
.brand-hero .signals {
display: flex;
color: rgba(255,255,255,.88);
flex-wrap: wrap;
}
.brand-hero .signals div {
max-width: 200px;
}
.brand-hero .signals strong {
display: block;
line-height: 1;
}
.brand-hero .signals span {
display: block;
font-size: 10px;
text-transform: uppercase;
margin-bottom: 10px;
}
/* ============ EXPLORE / BUTTONS ============ */
.explore {
display: inline-flex;
align-items: center;
gap: 16px;
color: #fff;
padding-bottom: 8px;
border-bottom: 1px solid rgba(255,255,255,.4);
transition: border-color .2s, color .2s, gap .2s;
}
.explore::after { content: '→'; font-size: 16px; letter-spacing: 0; font-weight: 400; line-height: 1; }
.explore:hover { color: var(--gold); border-color: var(--gold); gap: 22px; }
.explore.dark {
color: var(--ink);
border-color: var(--line);
}
.explore.dark:hover { color: var(--accent); border-color: var(--accent); }
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 12px;
min-height: 54px;
padding: 16px 28px;
font-family: var(--font-sans);
font-size: 12px;
text-transform: uppercase;
border: 1px solid var(--ink);
transition: transform .15s, background .2s, color .2s, border-color .2s;
cursor: pointer;
}
/* ============ STACKED SERVICE SECTIONS ============ */
.service-stack { background: #0d0d0d; }
.brava-profiles { gap: 0; }
.brava-profiles > .service-section,
.brava-profiles > .service-section + .service-section { margin-top: 0; }
body.brava-page main > section,
body.brava-page main > div {
border-top: 0 !important;
border-bottom: 0 !important;
}
.brava-page .brava-profile-details .signals {
padding-top: 0;
border-top: 0;
}
.brava-profile-details .band-inner {
max-width: 1720px;
}
.brava-profile-details .lede {
max-width: 1440px;
color: var(--ink-soft);
font-size: clamp(18px, 2vw, 22px);
line-height: 1.55;
}
.brava-profile-details .actions { margin: 32px 0 20px; }
.brava-profile-details .brava-verify-line { margin: 0 0 28px; }
.brava-profile-details .brava-verify-link {
color: var(--ink);
text-decoration: underline;
text-underline-offset: 4px;
}
.brava-profile-details .signals {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 24px 36px;
padding-top: 24px;
border-top: 1px solid var(--line);
color: var(--muted);
}
.brava-profile-details .signals div { max-width: none; }
.brava-profile-details .signals span,
.brava-profile-details .signals strong { display: block; }
.brava-profile-details .signals strong { color: var(--ink); }
.brava-page .brava-price-head p {
max-width: 1440px;
}
.brava-page .brava-price-inner {
max-width: 1720px;
}
@media (max-width: 720px) {
.brava-profile-details .signals { grid-template-columns: 1fr; }
}
.service-section {
position: relative;
min-height: 88vh;
background: #0d0d0d;
overflow: hidden;
display: grid;
align-items: end;
}
.service-section .bg {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
filter: saturate(.95);
transition: transform 5s ease;
}
.service-section:hover .bg { transform: scale(1.03); }
.service-section .shade {
position: absolute;
inset: 0;
background:
linear-gradient(0deg, rgba(0,0,0,.78), rgba(0,0,0,0) 55%),
linear-gradient(90deg, rgba(0,0,0,.5), rgba(0,0,0,0) 50%);
}
.service-section .inner {
position: relative;
z-index: 2;
max-width: var(--container);
margin: 0 auto;
padding: 120px 36px 88px;
color: #fff;
width: 100%;
}
.service-section h2 {
color: #fff;
font-family: var(--font-display);
font-weight: 400;
letter-spacing: .005em;
max-width: 940px;
margin: 12px 0 24px;
text-shadow: 0 1px 2px rgba(0,0,0,.2);
}
.service-section h2 em { font-style: normal; color: var(--gold-soft); }
.service-section .tagline {
color: rgba(255,255,255,.88);
font-size: 19px;
max-width: 620px;
margin-bottom: 36px;
line-height: 1.55;
}
.service-section .service-label {
font-family: var(--font-sans);
font-size: 11px;
letter-spacing: .3em;
text-transform: uppercase;
font-weight: 700;
color: var(--gold);
}
.service-section .meta {
display: flex;
gap: 36px;
margin-bottom: 20px;
flex-wrap: wrap;
font-size: 13px;
color: rgba(255,255,255,.72);
}
.service-section .meta strong {
display: block;
color: #fff;
font-family: var(--font-display);
font-weight: 400;
font-size: 22px;
line-height: 1;
margin-bottom: 4px;
}
/* ============ BANDS / EDITORIAL SECTIONS ============ */
.band.paper { background: var(--paper); }
.band.dark {
background: var(--dark);
color: #dcdcdc;
border-top-color: #222222;
}
.band.dark h1, .band.dark h2, .band.dark h3, .band.dark h4 { color: #fff; }
.band.dark p { color: #c4c4c4; }
.band-inner { max-width: var(--container); margin: 0 auto; padding: 0 36px; }
.section-head {
display: grid;
grid-template-columns: minmax(0,1fr) minmax(280px,500px);
align-items: end;
}
.section-head h2 { max-width: 760px; }
@media (max-width: 880px) {
.section-head {
grid-template-columns: 1fr;
}
}
/* ============ EDITORIAL GRID ============ */
.grid { display: grid; gap: 28px; }
.grid.two { grid-template-columns: repeat(2, minmax(0,1fr)); }
.grid.three { grid-template-columns: repeat(3, minmax(0,1fr)); }
@media (max-width: 980px) {
.grid.three, .grid.four { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 620px) {
.grid.two, .grid.three, .grid.four { grid-template-columns: 1fr; }
}
/* Center a lone card sitting on its own row (3-column layout only) */
@media (min-width: 981px) {
.grid.three > .review.center-solo {
grid-column: 1 / -1;
max-width: calc((100% - 56px) / 3);
margin-inline: auto;
}
}
/* ============ EDITORIAL CARDS ============ */
.card {
background: transparent;
border: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 18px;
}
.card .kicker {
display: inline-block;
font-family: var(--font-sans);
font-size: 11px;
letter-spacing: .26em;
text-transform: uppercase;
font-weight: 700;
color: var(--accent);
}
.band.dark .card .kicker { color: var(--gold); }
.card h3 {
font-family: var(--font-display);
font-weight: 500;
color: var(--ink);
line-height: 1.15;
}
.band.dark .card h3 { color: #fff; }
.card p { font-size: 17px; color: var(--muted); }
.band.dark .card p { color: #c4c4c4; }
.card .arrow {
margin-top: auto;
font-family: var(--font-sans);
font-size: 11px;
text-transform: uppercase;
color: var(--accent);
border-bottom: 1px solid var(--line);
padding-bottom: 8px;
align-self: flex-start;
transition: color .2s, border-color .2s;
}
a.card { transition: opacity .2s; }
a.card:hover .arrow { color: var(--gold); border-color: var(--gold); }
/* ============ ANSWER CARDS (cost numbers) ============ */
.answer-card .figure {
font-family: var(--font-display);
font-size: 48px;
font-weight: 500;
color: var(--ink);
line-height: 1;
letter-spacing: -0.005em;
}
.answer-card .figure small {
display: block;
margin-top: 8px;
font-family: var(--font-sans);
font-size: 12px;
font-weight: 600;
letter-spacing: .18em;
text-transform: uppercase;
color: var(--muted);
}
.answer-card .range {
font-size: 14px;
color: var(--muted);
margin-top: 4px;
}
/* ============ EDITORIAL SPLIT ============ */
.split {
display: grid;
grid-template-columns: minmax(0,1fr) minmax(380px,560px);
gap: 96px;
align-items: center;
}
.split .media { overflow: hidden; }
.split .media img { aspect-ratio: 4/5; object-fit: cover; width: 100%; }
@media (max-width: 880px) {
.split, .split.reverse {
grid-template-columns: 1fr;
}
}
/* ============ COST INDEX (editorial) ============ */
.index-block {
background: transparent;
border: 0;
padding: 0;
scroll-margin-top: 110px;
display: grid;
grid-template-columns: 300px 1fr;
gap: 80px;
}
@media (max-width: 880px) { .index-block {
gap: 36px;
} }
.index-tabs { display: flex; flex-direction: column; gap: 0; }
.index-tab {
text-align: left;
background: transparent;
border: 0;
border-top: 1px solid var(--line);
padding: 22px 0;
cursor: pointer;
transition: padding-left .2s;
}
.index-tab:last-child { border-bottom: 1px solid var(--line); }
.index-tab:hover { padding-left: 12px; }
.index-tab.is-active { padding-left: 18px; border-left: 2px solid var(--accent); margin-left: -20px; padding-left: 18px; }
.index-tab span {
display: block;
font-family: var(--font-sans);
text-transform: uppercase;
font-weight: 700;
color: var(--accent);
margin-bottom: 6px;
}
.index-tab strong {
display: block;
font-family: var(--font-display);
font-weight: 500;
font-size: 22px;
color: var(--ink);
line-height: 1.2;
}
.index-tab small {
display: block;
font-size: 12px;
color: var(--muted);
margin-top: 6px;
letter-spacing: .04em;
}
.index-panel { display: flex; flex-direction: column; gap: 28px; }
.index-panel .label {
font-family: var(--font-sans);
font-size: 11px;
letter-spacing: .26em;
text-transform: uppercase;
font-weight: 700;
color: var(--accent);
}
.index-panel h3 {
font-family: var(--font-display);
font-size: clamp(48px, 6.4vw, 88px);
font-weight: 500;
color: var(--ink);
line-height: 1;
letter-spacing: -0.01em;
}
.range-bar {
position: relative;
height: 2px;
background: var(--line);
margin: 4px 0 8px;
}
.range-bar i {
position: absolute;
left: 22%;
right: 22%;
top: -1px;
bottom: -1px;
background: var(--accent);
}
.stat-row {
display: grid;
margin-top: 4px;
}
.stat-row div {
padding: 18px 4px 18px 0;
}
.stat-row div:last-child { border-right: 0; padding-right: 0; }
.stat-row span {
font-family: var(--font-sans);
text-transform: uppercase;
font-weight: 700;
color: var(--muted);
}
.stat-row strong {
display: block;
font-family: var(--font-display);
font-size: 26px;
color: var(--ink);
font-weight: 500;
margin-top: 6px;
letter-spacing: -0.005em;
}
.confidence {
font-size: 14px;
color: var(--muted);
font-style: normal;
font-family: var(--font-display);
}
/* ============ CALCULATOR ============ */
.calculator {
background: var(--dark);
color: #fff;
padding: 64px;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 64px;
margin-top: 32px;
}
@media (max-width: 880px) { .calculator { grid-template-columns: 1fr; gap: 32px; padding: 40px; } }
.calculator h3, .calculator h4 { color: #fff; }
.calculator p { color: #c4c4c4; font-size: 16px; }
.calc-form { display: flex; flex-direction: column; gap: 22px; }
.calc-form label {
display: flex;
flex-direction: column;
gap: 10px;
font-family: var(--font-sans);
font-size: 11px;
font-weight: 700;
letter-spacing: .22em;
text-transform: uppercase;
color: var(--gold);
}
.calc-form select, .calc-form input[type="range"] {
font-family: var(--font-sans);
font-size: 15px;
background: transparent;
color: #fff;
border: 0;
border-bottom: 1px solid rgba(255,255,255,.3);
padding: 12px 0;
letter-spacing: 0;
}
.calc-form select:focus { outline: none; border-bottom-color: var(--gold); }
.calc-form input[type="range"] {
padding: 0;
border-bottom: 0;
height: 4px;
background: rgba(255,255,255,.15);
}
.calc-output {
padding-left: 56px;
display: flex;
flex-direction: column;
gap: 20px;
justify-content: center;
}
@media (max-width: 880px) { .calc-output {
border-left: 0;
padding-left: 0;
padding-top: 32px;
} }
.calc-output .system-label {
font-family: var(--font-sans);
font-size: 11px;
letter-spacing: .26em;
text-transform: uppercase;
font-weight: 700;
color: var(--gold);
}
.calc-output .range-out {
font-family: var(--font-display);
font-size: clamp(40px, 5vw, 64px);
font-weight: 400;
color: #fff;
line-height: 1;
letter-spacing: -0.01em;
}
.calc-output p { font-size: 14px; color: #a8a8a8; line-height: 1.6; }
/* ============ MATERIAL FIT ADVISOR ============ */
.advisor-shell {
background: var(--paper);
border-top: 3px solid var(--accent); /* copper accent flags the interactive tool */
border-bottom: 1px solid var(--line);
padding: 72px 0;
}
/* Lift the tool into a distinct, elevated panel so it reads as interactive,
not just more page. */
.advisor-body {
display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: start;
background: var(--soft);
border: 1px solid var(--line);
border-radius: 16px;
padding: 44px;
box-shadow: 0 26px 70px rgba(0,0,0,0.30);
margin-top: 14px;
}
@media (max-width: 880px) { .advisor-body { grid-template-columns: 1fr; gap: 34px; padding: 26px; } }
.advisor-controls { display: flex; flex-direction: column; gap: 24px; }
.advisor-controls label {
display: flex;
flex-direction: column;
gap: 8px;
font-family: var(--font-sans);
font-size: 11px;
font-weight: 700;
letter-spacing: .22em;
text-transform: uppercase;
color: var(--muted);
}
.advisor-controls select {
font-family: var(--font-sans);
font-size: 17px;
padding: 12px 0;
border: 0;
border-bottom: 1px solid var(--line);
background: transparent;
color: var(--ink);
letter-spacing: 0;
}
.advisor-controls select:focus { outline: none; border-bottom-color: var(--accent); }
@media (max-width: 880px) { .recommendation {
padding-left: 0;
border-left: 0;
padding-top: 32px;
} }
.recommendation .rec-label {
font-family: var(--font-sans);
font-size: 11px;
letter-spacing: .26em;
text-transform: uppercase;
font-weight: 700;
color: var(--accent);
margin-bottom: 14px;
display: block;
}
.recommendation h3 {
margin-bottom: 16px;
font-family: var(--font-display);
font-weight: 500;
font-size: clamp(32px, 3.8vw, 48px);
line-height: 1.1;
}
.recommendation > p {
font-size: 17px;
line-height: 1.6;
}
.recommendation ul {
list-style: none;
margin: 28px 0 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 14px;
}
.recommendation li {
padding-left: 24px;
position: relative;
font-size: 15px;
color: var(--muted);
line-height: 1.6;
}
.recommendation li::before {
content: "–";
position: absolute;
left: 0;
top: 0;
color: var(--accent);
font-weight: 700;
}
/* ============ EDITORIAL TABLES ============ */
.table-wrap { overflow-x: auto; }
table.compare {
width: 100%;
border-collapse: collapse;
background: transparent;
font-size: 15px;
font-family: var(--font-sans);
}
.compare th, .compare td {
padding: 24px 20px;
text-align: left;
border-bottom: 1px solid var(--line);
vertical-align: top;
}
.compare th {
background: transparent;
font-size: 10px;
letter-spacing: .22em;
text-transform: uppercase;
font-weight: 700;
color: var(--muted);
border-bottom: 1px solid var(--ink);
padding-bottom: 12px;
}
.compare tbody tr:last-child td { border-bottom: 0; }
.compare td strong { font-family: var(--font-display); font-weight: 500; font-size: 19px; color: var(--ink); }
.compare td:last-child { font-family: var(--font-display); font-weight: 500; font-size: 19px; color: var(--ink); }
/* ============ TESTIMONIAL WALL ============ */
.review-summary {
display: flex;
flex-wrap: wrap;
gap: 56px;
align-items: center;
margin-bottom: 80px;
padding: 48px 0;
}
.review-summary .big {
font-family: var(--font-display);
font-size: 88px;
font-weight: 400;
color: var(--ink);
line-height: 1;
letter-spacing: -0.02em;
}
.review-summary .stars { color: var(--google-gold); font-size: 18px; letter-spacing: 4px; margin-top: 8px; }
.review-summary .breakdown { display: flex; gap: 44px; flex-wrap: wrap; }
.review-summary .breakdown div {
font-family: var(--font-sans);
color: var(--muted);
}
.review-summary .breakdown strong {
display: block;
font-family: var(--font-display);
font-size: 28px;
font-weight: 500;
color: var(--ink);
letter-spacing: -0.01em;
margin-bottom: 4px;
}
.review {
background: transparent;
border: 0;
padding: 32px 0 0;
display: flex;
flex-direction: column;
gap: 18px;
}
.review .stars { color: var(--google-gold); letter-spacing: 3px; font-size: 13px; }
.review p {
font-family: var(--font-display);
font-weight: 400;
font-size: 22px;
color: var(--ink);
line-height: 1.4;
font-style: normal;
}
.review .attrib {
font-family: var(--font-sans);
color: var(--muted);
margin-top: auto;
}
.review .attrib strong {
color: var(--ink);
}
/* Per-review "posted on Google" line — reinforces that every review is a
genuine, verifiable Google review. */
.review .attrib .g-source {
display: inline-flex;
align-items: center;
gap: 5px;
color: var(--muted);
}
.review .attrib .g-source .g-logo { height: 13px; }
/* ============ GOOGLE REVIEWS BRANDING ============ */
/* Shared: the Google "G" mark, sized to the surrounding text by default. */
.g-logo {
display: inline-block;
height: 1em;
width: auto;
flex: none;
vertical-align: -0.14em;
}
/* Eyebrow-style attribution chip placed with a review section heading:
[G] Reviews from Google */
.g-badge {
display: inline-flex;
align-items: center;
gap: 8px;
font-family: var(--font-sans);
font-size: 13px;
letter-spacing: .01em;
color: var(--muted);
}
.g-badge .g-logo { height: 16px; }
.g-badge strong { color: var(--ink); font-weight: 600; }
.g-badge .g-badge-stars { color: var(--google-gold); letter-spacing: 2px; font-size: 12px; }
/* Rating summary: [G] 5.0 ★★★★★ · 229 reviews on Google */
.g-rating {
display: inline-flex;
align-items: center;
gap: 14px;
font-family: var(--font-sans);
flex-wrap: wrap;
}
.g-rating .g-logo { height: 24px; }
.g-rating .g-rating-score { display: inline-flex; align-items: baseline; gap: 10px; }
.g-rating .g-rating-num {
font-family: var(--font-display);
font-size: 28px;
line-height: 1;
color: var(--ink);
letter-spacing: -0.01em;
}
.g-rating .g-rating-stars { color: var(--google-gold); letter-spacing: 2px; font-size: 17px; }
.g-rating .g-rating-count { color: var(--muted); font-size: 13.5px; letter-spacing: .01em; }
/* "See all of our reviews →" link — reuses the site's underlined-CTA idiom
but leads with the Google mark and always points at the Google profile. */
.g-reviews-cta {
display: inline-flex;
align-items: center;
gap: 10px;
font-family: var(--font-sans);
font-size: 15px;
color: var(--ink);
border-bottom: 1px solid var(--line);
padding-bottom: 6px;
transition: gap .2s, border-color .2s, color .2s;
}
.g-reviews-cta .g-logo { height: 18px; }
.g-reviews-cta::after { content: '→'; font-size: 15px; line-height: 1; }
.g-reviews-cta:hover { gap: 16px; border-color: var(--ink); }
.band.dark .g-reviews-cta,
.cta-section .g-reviews-cta,
footer .g-reviews-cta {
color: #fff;
border-color: rgba(255,255,255,.4);
}
.band.dark .g-reviews-cta:hover,
.cta-section .g-reviews-cta:hover,
footer .g-reviews-cta:hover { border-color: #fff; }
/* ============ PROJECT PROOF REVIEW WALL ============ */
.proof-reviews-head {
margin-bottom: 42px;
}
.proof-review-grid {
gap: clamp(48px, 7vw, 96px) clamp(32px, 6vw, 84px);
}
.proof-review-card {
min-height: 0;
padding: 0;
background: transparent;
}
.proof-review-card p {
font-size: clamp(20px, 1.8vw, 25px);
}
@media (max-width: 700px) {
.proof-reviews-head {
margin-bottom: 28px;
}
.proof-review-grid {
gap: 48px;
}
}
/* ============ FAQ ============ */
.faq-block {
display: flex;
flex-direction: column;
max-width: 960px;
margin: 0 auto;
}
.faq-item {
background: transparent;
border: 0;
border-bottom: 1px solid var(--line);
}
.faq-item summary {
list-style: none;
cursor: pointer;
padding: 32px 0;
font-family: var(--font-display);
font-weight: 500;
font-size: 24px;
color: var(--ink);
display: flex;
justify-content: space-between;
align-items: center;
gap: 24px;
line-height: 1.3;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
content: "+";
font-family: var(--font-sans);
font-size: 22px;
font-weight: 400;
color: var(--accent);
flex-shrink: 0;
transition: transform .25s;
}
.faq-item[open] summary::after { content: "−"; }
.faq-item div.answer {
padding: 0 0 36px;
color: var(--muted);
font-size: 17px;
line-height: 1.7;
max-width: 760px;
}
.faq-item div.answer strong { color: var(--ink); }
.faq-item div.answer a { color: var(--accent); border-bottom: 1px solid currentColor; }
/* Two-column FAQ: halves the vertical "wall" of questions on wider screens.
Items still collapse independently; columns flow top-to-bottom. */
@media (min-width: 760px) {
.faq-block.faq-2col {
display: grid;
grid-template-columns: 1fr 1fr;
column-gap: 56px;
align-items: start;
max-width: 1120px;
}
}
/* ============ CHECKLIST ============ */
ul.checklist {
list-style: none;
margin: 32px 0 0;
padding: 0;
display: grid;
gap: 18px;
}
ul.checklist li {
padding-left: 32px;
position: relative;
font-size: 17px;
color: var(--muted);
line-height: 1.6;
}
ul.checklist li::before {
content: "→";
position: absolute;
left: 0;
top: 0;
color: var(--accent);
font-family: var(--font-display);
font-weight: 500;
font-size: 20px;
line-height: 1.4;
}
ul.checklist li strong { color: var(--ink); }
/* ============ CITY PAGE / SUBPAGE HERO ============ */
.subpage-hero {
position: relative;
min-height: 78vh;
background: #0d0d0d;
overflow: hidden;
display: grid;
align-items: end;
}
.subpage-hero .bg {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
.subpage-hero .shade {
position: absolute;
inset: 0;
background:
linear-gradient(0deg, rgba(0,0,0,.85) 0%, rgba(0,0,0,0) 60%),
linear-gradient(90deg, rgba(0,0,0,.55), rgba(0,0,0,0) 55%);
}
.subpage-hero .inner {
position: relative;
z-index: 2;
max-width: var(--container);
margin: 0 auto;
padding: 200px 36px 100px;
color: #fff;
width: 100%;
}
.subpage-hero h1 {
color: #fff;
font-family: var(--font-display);
font-weight: 400;
font-size: clamp(48px, 6.4vw, 92px);
letter-spacing: 0;
line-height: 1;
max-width: 1000px;
margin: 18px 0 0;
}
.subpage-hero h1 em { font-style: normal; color: var(--gold-soft); }
.subpage-hero .lede {
color: rgba(255,255,255,.9);
font-size: 20px;
max-width: 720px;
margin-top: 26px;
line-height: 1.55;
}
.subpage-hero .actions { display: flex; gap: 20px; margin-top: 40px; flex-wrap: wrap; }
.gutter-hero .bg {
animation: none;
top: auto;
bottom: 0;
height: 150%;
object-position: center bottom;
}
@media (max-width: 900px) {
.gutter-hero .bg {
height: 142%;
object-position: 42% bottom;
}
}
/* ============ CITY STATS ASIDE ============ */
.city-stats {
background: var(--paper);
display: flex;
flex-direction: column;
gap: 24px;
}
.city-stats div:last-child { border-bottom: 0; padding-bottom: 0; }
.city-stats strong {
display: block;
font-family: var(--font-display);
font-weight: 500;
font-size: 28px;
color: var(--ink);
line-height: 1.1;
margin-bottom: 4px;
}
.city-stats span {
display: block;
font-family: var(--font-sans);
font-size: 10px;
letter-spacing: .26em;
text-transform: uppercase;
color: var(--accent);
font-weight: 700;
margin-bottom: 12px;
}
.city-stats .note {
font-size: 13px;
color: var(--muted);
line-height: 1.6;
}
/* ============ NOTES ============ */
.note {
background: transparent;
border-left: 2px solid var(--accent);
padding: 8px 0 8px 28px;
font-size: 17px;
font-family: var(--font-display);
font-weight: 400;
color: var(--ink);
line-height: 1.5;
font-style: normal;
}
.note strong { font-style: normal; color: var(--ink); font-family: var(--font-sans); font-weight: 700; }
/* ============ BIG 5 ============ */
.big5 {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 0;
}
@media (max-width: 1100px) { .big5 { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 720px) { .big5 { grid-template-columns: 1fr; } }
.big5 article {
padding: 40px 30px;
text-align: center;
display: flex;
flex-direction: column;
}
.big5 article:last-child { border-right: 0; }
.big5 article .explore { margin-top: auto; align-self: center; justify-content: center; letter-spacing: .14em; font-size: 11px; }
.big5 article span {
font-family: var(--font-display);
font-style: normal;
font-weight: 400;
font-size: 36px;
color: var(--gold);
display: block;
margin-bottom: 16px;
line-height: 1;
}
.big5 article strong {
display: block;
font-family: var(--font-display);
font-weight: 500;
font-size: 24px;
color: #fff;
margin-bottom: 12px;
line-height: 1.15;
}
.big5 article p { font-size: 14px; color: #c4c4c4; line-height: 1.6; }
/* ============ FOOTER ============ */
.site-footer {
background: var(--dark);
color: #c4c4c4;
padding: 96px 0 36px;
}
.footer-inner {
max-width: var(--container);
margin: 0 auto;
padding: 0 36px;
display: grid;
grid-template-columns: 1.6fr 1fr 1fr 1fr 1fr;
gap: 56px;
}
@media (max-width: 1180px) { .footer-inner { grid-template-columns: 2fr 1fr 1fr; gap: 48px; } }
@media (max-width: 880px) { .footer-inner { grid-template-columns: 1fr 1fr; gap: 40px; } }
@media (max-width: 520px) { .footer-inner { grid-template-columns: 1fr; } }
.footer-inner h4 {
color: #fff;
font-size: 11px;
font-weight: 700;
letter-spacing: .26em;
text-transform: uppercase;
margin-bottom: 22px;
}
.footer-inner .brand-block strong {
font-family: var(--font-display);
font-weight: 500;
font-size: 32px;
color: #fff;
letter-spacing: .02em;
display: block;
margin-bottom: 16px;
}
.footer-inner .brand-block p {
font-size: 15px;
line-height: 1.7;
color: #c4c4c4;
max-width: 380px;
}
.footer-inner address {
font-style: normal;
font-size: 14px;
color: #c4c4c4;
line-height: 1.85;
}
.footer-inner address strong {
color: #fff;
display: block;
font-family: var(--font-display);
font-weight: 500;
font-size: 19px;
margin-bottom: 8px;
}
.footer-inner a { color: #c4c4c4; transition: color .2s; }
.footer-inner a:hover { color: var(--gold); }
.footer-inner ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; font-size: 14px; }
.footer-social-label {
margin: 22px 0 10px;
color: #ededed;
font-size: 13px;
font-weight: 700;
line-height: 1.3;
}
.footer-social { display: flex; gap: 16px; margin-top: 10px; }
.footer-social a {
width: 36px;
height: 36px;
border: 1px solid #333333;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 12px;
font-weight: 700;
letter-spacing: .04em;
transition: background .2s, color .2s, border-color .2s;
}
.footer-social a:hover { background: var(--gold); border-color: var(--gold); color: var(--ink); }
.footer-bottom {
max-width: var(--container);
margin: 64px auto 0;
padding: 32px 36px 0;
border-top: 1px solid #222222;
display: flex;
justify-content: space-between;
flex-wrap: wrap;
gap: 14px;
font-size: 12px;
font-family: var(--font-sans);
letter-spacing: .12em;
text-transform: uppercase;
color: #8e877b;
}
/* ============ UTILITIES ============ */
.center { text-align: center; }
.center.section-head { display: block; }
.center.section-head h2 { max-width: 760px; margin: 0 auto; }
.center.section-head p { max-width: 600px; margin: 24px auto 0; }
.muted { color: var(--muted); }
.max-prose { max-width: 760px; }
.body-flow {
color: var(--ink-soft);
line-height: 1.7;
max-width: 760px;
}
.body-flow + .body-flow { margin-top: 22px; }
.serif { font-family: var(--font-display); font-weight: 400; }
/* ============ BRAND PROMISE / STATEMENT BAND ============ */
.statement-band {
background: var(--paper);
}
.statement-band .inner { max-width: 980px; margin: 0 auto; }
.statement-band h2 {
font-family: var(--font-display);
font-weight: 400;
font-size: clamp(36px, 4.6vw, 64px);
line-height: 1.15;
letter-spacing: -0.005em;
}
.statement-band h2 em { font-style: normal; color: var(--accent); }
.statement-band p {
font-size: 19px;
line-height: 1.7;
margin: 32px auto 0;
color: var(--muted);
max-width: 680px;
}
/* ============ ETHOS / OUR STORY ============ */
.ethos-band {
color: #fff;
position: relative;
overflow: hidden;
}
.ethos-band::before {
content: "";
position: absolute;
inset: 0;
background: radial-gradient(ellipse at top left, rgba(196,123,79,.10), transparent 60%);
pointer-events: none;
}
.ethos-band .band-inner { position: relative; z-index: 2; }
.ethos-band h2 {
color: #fff;
font-family: var(--font-display);
font-weight: 400;
font-size: clamp(40px, 5.4vw, 76px);
line-height: 1.05;
max-width: 920px;
}
.ethos-band h2 em { color: var(--gold-soft); font-style: normal; }
.ethos-band p { color: #c4c4c4; }
.ethos-stack {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 64px 96px;
margin-top: 64px;
}
@media (max-width: 880px) { .ethos-stack { grid-template-columns: 1fr; gap: 48px; } }
.ethos-stack article h3 {
font-family: var(--font-display);
font-weight: 500;
color: #fff;
font-size: clamp(22px, 2.4vw, 30px);
letter-spacing: .005em;
margin-bottom: 14px;
}
.ethos-stack article .ethos-eyebrow {
font-family: var(--font-sans);
font-size: 10px;
letter-spacing: .28em;
text-transform: uppercase;
font-weight: 700;
color: var(--gold);
display: block;
margin-bottom: 10px;
}
.ethos-stack article p { font-size: 16px; line-height: 1.7; color: #c4c4c4; }
.ethos-band .ethos-lede {
font-family: var(--font-display);
font-style: normal;
font-weight: 400;
font-size: clamp(22px, 2.2vw, 30px);
color: #e4e4e4;
line-height: 1.5;
margin-top: 32px;
max-width: 860px;
}
/* ============ PROCESS / TIMELINE ============ */
.process-timeline {
display: grid;
grid-template-columns: repeat(3, 1fr);
}
@media (max-width: 880px) { .process-timeline { grid-template-columns: 1fr; } }
.process-step {
padding: 56px 36px 0;
position: relative;
}
.process-step:last-child { border-right: 0; }
@media (max-width: 880px) {
.process-step {
border-right: 0;
padding: 40px 0;
}
.process-step:last-child { border-bottom: 0; }
}
.process-step .step-num {
font-family: var(--font-display);
font-style: normal;
font-weight: 400;
font-size: 56px;
color: var(--gold);
line-height: 1;
margin-bottom: 22px;
}
.process-step h3 {
font-family: var(--font-display);
font-weight: 500;
font-size: clamp(24px, 2.4vw, 32px);
color: var(--ink);
margin-bottom: 14px;
line-height: 1.2;
}
.process-step p {
font-size: 16px;
line-height: 1.65;
color: var(--muted);
}
.process-step .step-label {
font-family: var(--font-sans);
font-size: 10px;
letter-spacing: .28em;
text-transform: uppercase;
font-weight: 700;
color: var(--accent);
display: block;
margin-bottom: 6px;
}
/* ============ CTA SECTION ============ */
.cta-section {
background: var(--dark);
}
.cta-section h2 {
color: #fff;
font-family: var(--font-display);
font-weight: 400;
max-width: 880px;
margin: 0 auto;
}
.cta-section h2 em { font-style: normal; color: var(--gold-soft); }
.cta-section p {
color: #c4c4c4;
font-size: 19px;
max-width: 620px;
margin: 24px auto 0;
line-height: 1.6;
}
.cta-section .actions {
display: flex;
gap: 22px;
margin-top: 44px;
flex-wrap: wrap;
}
.cta-phone-actions {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin-top: 26px;
}
.cta-phone-actions--centered { justify-content: center; }
.cta-phone-button {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 42px;
padding: 0 18px;
border: 1px solid rgba(255,255,255,.62);
border-radius: 6px;
color: #fff;
font-family: var(--font-display);
font-size: 13px;
font-weight: 700;
line-height: 1.2;
text-decoration: none;
transition: background .2s ease, border-color .2s ease, color .2s ease;
}
.cta-phone-button:hover {
background: #fff;
border-color: #fff;
color: #111;
}
.cta-phone-button:focus-visible {
outline: 2px solid #fff;
outline-offset: 3px;
}
@media (max-width: 560px) {
.cta-phone-actions { gap: 10px; }
}
/* ============ BREADCRUMB ============ */
.breadcrumb {
font-family: var(--font-sans);
font-size: 11px;
letter-spacing: .26em;
text-transform: uppercase;
color: rgba(255,255,255,.7);
display: flex;
gap: 12px;
align-items: center;
font-weight: 600;
}
.breadcrumb a { color: rgba(255,255,255,.7); }
.breadcrumb a:hover { color: var(--gold); }
.breadcrumb span { color: rgba(255,255,255,.4); }
/* ============ CITY GRID (Service Areas page) ============ */
.city-grid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
}
@media (max-width: 1100px) { .city-grid { grid-template-columns: repeat(3, 1fr); } }
/* iPad / tablet (portrait and below) and all phones: two cities per row so the
list stays compact and doesn't require excessive scrolling. */
@media (max-width: 1024px) { .city-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 460px) { .city-grid { grid-template-columns: repeat(2, 1fr); } }
.city-tile {
display: flex;
flex-direction: column;
gap: 6px;
padding: 26px 24px;
transition: background .2s;
position: relative;
}
.city-tile > * {
transition: transform .2s;
}
a.city-tile:hover > * { transform: translateX(8px); }
.city-tile strong {
font-family: var(--font-display);
font-weight: 500;
font-size: 21px;
color: var(--ink);
line-height: 1.2;
letter-spacing: -0.005em;
}
.city-tile .city-meta {
font-family: var(--font-sans);
font-size: 11px;
letter-spacing: .18em;
text-transform: uppercase;
font-weight: 600;
color: var(--muted);
}
.city-tile.featured .featured-tag {
font-family: var(--font-sans);
font-size: 10px;
letter-spacing: .26em;
text-transform: uppercase;
font-weight: 700;
margin-bottom: 4px;
}
/* ============ CASE STUDIES (Project Proof page) ============ */
.case-study:first-of-type { border-top: 0; padding-top: 80px; }
.case-study .case-inner {
max-width: 1280px;
margin: 0 auto;
padding: 0 36px;
display: grid;
grid-template-columns: minmax(0,1fr) minmax(380px,540px);
gap: clamp(64px, 5vw, 84px);
align-items: start;
}
.case-study.reverse .case-inner { grid-template-columns: minmax(380px,540px) minmax(0,1fr); }
@media (max-width: 980px) {
.case-study .case-inner,
.case-study.reverse .case-inner { grid-template-columns: 1fr; gap: 52px; }
}
.case-study .case-meta {
font-family: var(--font-sans);
font-size: 11px;
letter-spacing: .24em;
text-transform: uppercase;
font-weight: 700;
color: var(--accent);
margin-bottom: 16px;
display: flex;
flex-wrap: wrap;
gap: 18px;
}
.case-study h2 {
font-family: var(--font-display);
font-weight: 400;
letter-spacing: -0.005em;
font-size: clamp(34px, 4.4vw, 56px);
line-height: 1.05;
margin-bottom: 24px;
}
.case-study h2 em { font-style: normal; color: var(--accent); }
.case-study .case-lede {
font-family: var(--font-display);
font-style: normal;
font-weight: 400;
font-size: 22px;
color: var(--ink-soft);
line-height: 1.5;
margin-bottom: 28px;
}
.case-study .case-body p {
line-height: 1.7;
margin-bottom: 18px;
}
.case-study .case-body p strong { color: var(--ink); }
.case-study .case-facts {
background: var(--paper);
display: flex;
flex-direction: column;
gap: 22px;
}
.case-study .case-facts div {
display: flex;
flex-direction: column;
gap: 4px;
padding-bottom: 18px;
}
.case-study .case-facts div:last-child { border-bottom: 0; padding-bottom: 0; }
.case-study .case-facts span {
font-family: var(--font-sans);
font-size: 10px;
letter-spacing: .26em;
text-transform: uppercase;
font-weight: 700;
color: var(--muted);
}
.case-study .case-facts strong {
font-family: var(--font-display);
font-weight: 500;
font-size: 19px;
color: var(--ink);
line-height: 1.3;
}
.case-study .case-pull {
border-left: 2px solid var(--accent);
padding: 8px 0 8px 28px;
margin: 28px 0;
font-family: var(--font-display);
font-style: normal;
font-weight: 400;
font-size: 22px;
color: var(--ink);
line-height: 1.45;
}
.case-study .case-pull cite {
display: block;
font-family: var(--font-sans);
font-style: normal;
font-size: 11px;
letter-spacing: .22em;
text-transform: uppercase;
font-weight: 600;
color: var(--muted);
margin-top: 16px;
}
.case-study .case-pull cite strong { color: var(--ink); letter-spacing: .22em; }
.case-study .case-image {
display: grid;
gap: 16px;
width: 100%;
max-width: 540px;
justify-self: center;
}
.case-study .case-image img {
aspect-ratio: 5 / 6;
object-fit: cover;
width: 100%;
}
.case-study .case-image img.castleton-detail-photo {
object-position: 54% center;
}
.case-study .case-image.gallery {
grid-template-columns: 2fr 1fr;
grid-template-rows: auto auto;
gap: 12px;
max-width: 660px;
}
.case-study .case-image.gallery img:first-child {
grid-row: span 2;
aspect-ratio: 3/5;
}
.case-study .case-image.gallery img:nth-child(2),
.case-study .case-image.gallery img:nth-child(3) {
aspect-ratio: 4/3;
}
@media (max-width: 1480px) and (min-width: 981px) {
.case-study .case-inner,
.case-study.reverse .case-inner {
max-width: 1160px;
grid-template-columns: minmax(0,1fr) minmax(360px,520px);
gap: clamp(48px, 4vw, 68px);
}
.case-study .case-image {
max-width: 520px;
}
.case-study .case-image.gallery {
max-width: 620px;
}
}
/* ============ START / INTAKE FORM ============ */
.intake-form {
/* Its own sheet of paper: a touch lighter than the cream band behind it,
so the card edge comes from surface + hairline + shadow rather than a
hard color block. (Site is light-only; no dark variant needed.) */
background: #f6f2e9;
display: grid;
gap: 22px;
max-width: 1040px;
margin-inline: auto;
padding: clamp(30px, 5vw, 56px) clamp(24px, 5vw, 64px);
border: 1px solid var(--line);
border-radius: 10px;
box-shadow: var(--shadow-soft);
}
.intake-form .row {
display: grid;
gap: 22px;
}
.intake-form label {
display: flex;
flex-direction: column;
gap: 8px;
font-family: var(--font-sans);
font-size: 11px;
font-weight: 700;
letter-spacing: .22em;
text-transform: uppercase;
color: var(--muted);
}
.intake-form input,
.intake-form select,
.intake-form textarea {
font-family: var(--font-sans);
font-size: 16px;
padding: 14px 0;
border: 0;
border-bottom: 1px solid var(--line);
background: transparent;
color: var(--ink);
letter-spacing: 0;
}
.intake-form input:focus,
.intake-form select:focus,
.intake-form textarea:focus { outline: none; border-bottom-color: var(--accent); }
.intake-form textarea { min-height: 140px; resize: vertical; line-height: 1.5; }
.hp-field {
position: absolute;
left: -9999px;
width: 1px;
height: 1px;
overflow: hidden;
}
.form-status {
min-height: 1.4em;
margin: 0;
color: var(--muted);
font-size: 0.94rem;
}
.intake-form button,
.intake-form input[type="submit"] {
font-size: 12px;
padding: 18px 28px;
cursor: pointer;
transition: background .2s, border-color .2s;
justify-self: start;
width: auto;
}
.intake-disclaimer {
font-size: 13px;
color: var(--muted);
line-height: 1.55;
font-style: normal;
font-family: var(--font-display);
}
.form-consent {
display: grid !important;
grid-template-columns: 18px minmax(0, 1fr);
align-items: start;
gap: 10px !important;
font-family: var(--font-sans) !important;
font-size: 13px !important;
font-weight: 400 !important;
line-height: 1.5;
letter-spacing: 0 !important;
text-transform: none !important;
color: var(--muted) !important;
}
.form-consent input[type="checkbox"] {
width: 16px;
height: 16px;
margin: 2px 0 0;
padding: 0;
border: 1px solid var(--line);
background: transparent;
accent-color: var(--accent);
}
.form-consent a { text-decoration: underline; text-underline-offset: 2px; }
/* Privacy notice */
.privacy-hero {
padding: clamp(128px, 15vw, 188px) 24px clamp(46px, 7vw, 86px);
background: var(--dark);
color: var(--paper);
}
.privacy-hero-inner,
.privacy-content {
width: min(880px, calc(100% - 48px));
margin-inline: auto;
}
.privacy-hero .eyebrow { color: #b9b4a7 !important; }
.privacy-hero h1 {
max-width: 680px;
margin: 12px 0 0;
font-size: clamp(46px, 7vw, 88px);
line-height: .98;
color: #ffffff !important;
}
.privacy-hero h1 em { color: #ffffff !important; }
.privacy-hero .lede { max-width: 660px; margin: 24px 0 0; color: #d6d0c2 !important; }
.privacy-content { padding: clamp(46px, 8vw, 96px) 0 clamp(74px, 10vw, 130px); }
.privacy-content > p,
.privacy-content > ul,
.privacy-content > ol { margin: 0 0 20px; }
.privacy-content h2 {
margin: 46px 0 14px;
font-size: clamp(24px, 3vw, 34px);
line-height: 1.1;
}
.privacy-content h3 { margin: 28px 0 10px; font-size: 18px; }
.privacy-content ul,
.privacy-content ol { padding-left: 1.25em; }
.privacy-content li { margin: 0 0 10px; }
.privacy-content a { text-decoration: underline; text-underline-offset: 3px; }
.privacy-contact { font-style: normal; line-height: 1.6; }
.privacy-footer {
padding: 28px 24px;
background: #101010;
color: #c6c0b3;
font-size: 13px;
}
.privacy-footer-inner {
display: flex;
justify-content: space-between;
gap: 18px;
width: min(1120px, calc(100% - 48px));
margin-inline: auto;
}
.privacy-footer a { color: inherit; }
@media (max-width: 640px) {
.privacy-hero { padding-inline: 0; }
.privacy-hero-inner, .privacy-content, .privacy-footer-inner { width: min(100% - 40px, 880px); }
.privacy-footer-inner { display: grid; }
}
/* ============ PATH CARDS (buyer segmentation) ============ */
.path-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
border-top: 1px solid var(--line);
border-left: 1px solid var(--line);
}
@media (max-width: 720px) { .path-grid { grid-template-columns: 1fr; } }
.path-card {
padding: 40px 32px;
border-right: 1px solid var(--line);
border-bottom: 1px solid var(--line);
display: flex;
flex-direction: column;
gap: 14px;
transition: background .2s, padding-left .2s;
}
.path-card:hover {
padding-left: 40px;
}
.path-card .path-num {
font-family: var(--font-display);
font-style: normal;
font-weight: 400;
font-size: 36px;
color: var(--accent);
line-height: 1;
}
.path-card h3 {
font-family: var(--font-display);
font-weight: 500;
font-size: clamp(22px, 2.4vw, 30px);
color: var(--ink);
line-height: 1.15;
}
.path-card p { font-size: 16px; color: var(--muted); line-height: 1.6; }
.path-card .arrow {
margin-top: auto;
font-family: var(--font-sans);
font-size: 11px;
font-weight: 700;
letter-spacing: .26em;
text-transform: uppercase;
color: var(--accent);
border-bottom: 1px solid var(--line);
padding-bottom: 6px;
align-self: flex-start;
}
/* ============ MINI GALLERY GRID ============ */
.proof-gallery {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 16px;
}
@media (max-width: 720px) { .proof-gallery { grid-template-columns: 1fr; } }
.proof-gallery-toggle {
display: none;
align-items: center;
justify-content: center;
width: min(100%, 360px);
margin: 24px auto 0;
padding: 15px 22px;
border: 1px solid var(--ink);
background: transparent;
color: var(--ink);
font: 700 12px/1 var(--font-sans);
letter-spacing: .16em;
text-transform: uppercase;
cursor: pointer;
}
.proof-gallery-toggle::after {
content: "+";
margin-left: 12px;
font-size: 18px;
font-weight: 400;
line-height: .7;
}
.proof-gallery-toggle[aria-expanded="true"]::after { content: "−"; }
.proof-gallery-toggle:hover { background: var(--ink); color: #fff; }
.proof-gallery-toggle:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }
@media (max-width: 720px) {
.proof-gallery.is-collapsible:not(.is-expanded) figure:nth-child(n+4) { display: none; }
.proof-gallery-toggle.is-ready { display: flex; }
}
/* Balanced 2x2 variant for galleries with four photos (avoids an orphan tile). */
@media (min-width: 721px) {
.proof-gallery.cols-2 { grid-template-columns: repeat(2, 1fr); max-width: 1100px; margin: 0 auto; }
}
/* Large button + cinematic manifesto feature (Culture page opener) */
.btn-lg { padding: 20px 46px; font-size: 16px; letter-spacing: .04em; }
.manifesto-feature {
position: relative;
isolation: isolate;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
min-height: clamp(560px, 88vh, 860px);
padding: 120px 24px;
color: #fff;
}
.manifesto-feature .mf-bg {
position: absolute; inset: 0; width: 100%; height: 100%;
object-fit: cover; z-index: -2; transform-origin: center;
animation: mfKenBurns 22s ease-out forwards;
}
@keyframes mfKenBurns { from { transform: scale(1.02); } to { transform: scale(1.12); } }
@media (prefers-reduced-motion: reduce) { .manifesto-feature .mf-bg { animation: none; } }
.manifesto-feature::after {
content: ""; position: absolute; inset: 0; z-index: -1;
background:
radial-gradient(120% 92% at 50% 40%, rgba(10,10,10,0) 28%, rgba(10,10,10,.58) 100%),
linear-gradient(180deg, rgba(10,10,10,.55), rgba(10,10,10,.32) 44%, rgba(10,10,10,.82));
}
.manifesto-feature .mf-inner { max-width: 960px; text-shadow: 0 2px 30px rgba(0,0,0,.6); }
.manifesto-feature .eyebrow { color: var(--gold); letter-spacing: .32em; margin-bottom: 22px; }
.manifesto-feature h2 {
color: #fff; font-family: var(--font-display); font-weight: 500;
font-size: clamp(42px, 7.4vw, 86px); line-height: 1.0; letter-spacing: -0.025em;
margin: 0 0 22px;
}
.manifesto-feature h2 em { font-style: normal; color: var(--gold); }
.manifesto-feature p {
color: rgba(255,255,255,.9); font-size: clamp(18px, 2.1vw, 22px);
line-height: 1.55; max-width: 720px; margin: 0 auto 40px;
}
.proof-gallery figure {
margin: 0;
position: relative;
overflow: hidden;
}
.proof-gallery figure img {
aspect-ratio: 4/5;
object-fit: cover;
width: 100%;
transition: transform .8s ease;
}
.proof-gallery figure:hover img { transform: scale(1.04); }
/* Clickable project tiles: full-figure link overlay -> portfolio gallery */
.split .media, .photo-break, .detail-strip figure { position: relative; }
.proof-gallery figure .proof-link,
.split .media .proof-link,
.photo-break .proof-link,
.detail-strip figure .proof-link {
position: absolute; inset: 0; z-index: 3;
cursor: pointer; text-indent: -9999px; overflow: hidden;
}
.proof-gallery figure .proof-link:focus-visible,
.split .media .proof-link:focus-visible,
.photo-break .proof-link:focus-visible,
.detail-strip figure .proof-link:focus-visible {
outline: 3px solid var(--gold); outline-offset: -3px;
}
/* Horizontal macro-detail filmstrip (Gutters signature device) */
.detail-strip {
display: flex; gap: 14px; overflow-x: auto;
padding: 4px 0 16px; scroll-snap-type: x mandatory;
-webkit-overflow-scrolling: touch;
scrollbar-width: thin; scrollbar-color: rgba(0,0,0,.3) transparent;
}
.detail-strip figure {
flex: 0 0 auto; width: clamp(260px, 42vw, 440px); margin: 0;
scroll-snap-align: start; overflow: hidden;
}
.detail-strip figure img {
display: block; width: 100%;
height: clamp(220px, 30vw, 320px); object-fit: cover;
}
.detail-strip figcaption {
position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
padding: 16px 18px; color: #fff;
background: linear-gradient(0deg, rgba(0,0,0,.74), rgba(0,0,0,0));
font-family: var(--font-sans); font-size: 11px;
letter-spacing: .18em; text-transform: uppercase;
}
.detail-strip figcaption strong {
display: block; margin-bottom: 3px; text-transform: none;
font-family: var(--font-display); font-weight: 500; font-size: 17px; letter-spacing: .01em; color: #fff;
}
/* Editorial photo breaks. Photos sit within the page rhythm rather than
becoming edge-to-edge bands between otherwise contained sections. */
.photo-break {
width: calc(100% - 48px);
max-width: 1200px;
margin: clamp(48px, 7vw, 96px) auto;
overflow: hidden;
}
.photo-break > img {
display: block;
width: 100%;
height: auto;
max-height: 680px;
object-fit: cover;
}
.window-photo-feature {
padding: clamp(48px, 6vw, 88px) 24px;
}
.window-photo-feature__inner {
width: min(100%, 1120px);
margin: 0 auto;
}
.window-photo-feature__link {
display: block;
color: inherit;
text-decoration: none;
}
.window-photo-feature__link img {
display: block;
width: 100%;
height: auto;
aspect-ratio: 2560 / 1705;
object-fit: cover;
transition: transform .8s ease;
}
.window-photo-feature__link:hover img { transform: scale(1.012); }
.window-photo-feature__link:focus-visible { outline: 3px solid var(--gold); outline-offset: 5px; }
@media (max-width: 720px) {
.window-photo-feature { padding: 40px 18px; }
}
/* The door-inspection source is 16:9, while this section can be much wider
on ultrawide displays. Keep its top edge visible so the installer’s face
is not lost to the vertical crop. */
.photo-break--door-inspect > img { object-position: center top; }
.photo-break figcaption {
padding: 18px 0 0;
color: var(--ink);
font-family: var(--font-sans); font-size: 11px;
letter-spacing: .2em; text-transform: uppercase;
}
.photo-break figcaption strong {
display: block; margin-bottom: 5px;
font-family: var(--font-display); font-weight: 500; font-size: 22px;
letter-spacing: .005em; text-transform: none; color: var(--ink);
}
.proof-gallery figcaption {
position: absolute;
inset: auto 0 0 0;
padding: 20px 22px;
background: linear-gradient(0deg, rgba(0,0,0,.85), rgba(0,0,0,0));
color: #fff;
}
.proof-gallery figcaption strong {
display: block;
font-family: var(--font-display);
font-weight: 500;
font-size: 19px;
color: #fff;
margin-bottom: 4px;
}
.proof-gallery figcaption span {
font-family: var(--font-sans);
font-size: 11px;
letter-spacing: .22em;
text-transform: uppercase;
color: var(--gold);
font-weight: 600;
}
/* ============ BACKWARD COMPAT: legacy hero / city-intro on sub-pages ============ */
.hero {
position: relative;
min-height: 78vh;
background: #0d0d0d;
overflow: hidden;
display: grid;
align-items: end;
}
.hero-bg {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
.hero-shade {
position: absolute;
inset: 0;
background:
linear-gradient(0deg, rgba(0,0,0,.85) 0%, rgba(0,0,0,0) 60%),
linear-gradient(90deg, rgba(0,0,0,.55), rgba(0,0,0,0) 55%);
}
.hero-inner {
position: relative;
z-index: 2;
max-width: var(--container);
margin: 0 auto;
padding: 200px 36px 100px;
color: #fff;
width: 100%;
}
.hero-inner h1 {
color: #fff;
font-family: var(--font-display);
font-weight: 400;
font-size: clamp(48px, 6.4vw, 92px);
letter-spacing: 0;
line-height: 1;
max-width: 1000px;
margin: 18px 0 0;
}
.hero-inner h1 em { color: var(--gold-soft); font-style: normal; }
.hero-inner h2 {
color: #fff;
font-family: var(--font-display);
font-weight: 400;
letter-spacing: 0;
max-width: 940px;
margin: 12px 0 16px;
}
.hero-inner p,
.hero-inner p.lead {
color: rgba(255,255,255,.9);
font-size: 20px;
max-width: 720px;
margin-top: 26px;
line-height: 1.55;
}
.hero-actions { display: flex; gap: 20px; margin-top: 40px; flex-wrap: wrap; }
.eyebrow.light { color: var(--gold); }
/* legacy city-intro (carmel / hinsdale) - render as editorial split */
.city-intro {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(340px, 480px);
gap: 96px;
align-items: start;
padding: 200px 36px 120px;
max-width: var(--container);
margin: 0 auto;
background: var(--paper);
}
@media (max-width: 880px) {
.city-intro { grid-template-columns: 1fr; gap: 40px; padding: 140px 24px 80px; }
}
.city-intro h1 {
font-family: var(--font-display);
font-weight: 400;
font-size: clamp(40px, 5.4vw, 72px);
line-height: 1.05;
color: var(--ink);
letter-spacing: -0.005em;
}
.city-intro h1 em { color: var(--accent); font-style: normal; }
.city-intro p {
font-size: 19px !important;
line-height: 1.65;
color: var(--ink-soft) !important;
max-width: 640px;
}
.city-intro .stats {
background: var(--paper);
display: flex;
flex-direction: column;
gap: 24px;
}
.city-intro .stats div {
padding-bottom: 20px;
}
.city-intro .stats div:last-child {
border-bottom: 0;
padding-bottom: 0;
}
.city-intro .stats strong {
display: block;
font-family: var(--font-display);
font-weight: 500;
font-size: 26px;
color: var(--ink);
line-height: 1.15;
margin-bottom: 4px;
}
.city-intro .stats span {
display: block;
font-family: var(--font-sans);
font-size: 10px;
letter-spacing: .26em;
text-transform: uppercase;
color: var(--accent);
font-weight: 700;
margin-bottom: 10px;
}
/* legacy band variants on sub-pages */
/* legacy grid lockup remains supported via the existing .grid system */
.grid.four { grid-template-columns: repeat(4, minmax(0,1fr)); }
@media (max-width: 980px) { .grid.four { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .grid.four { grid-template-columns: 1fr; } }
/* fix split layout used on legacy pages */
.split.reverse { grid-template-columns: minmax(380px, 560px) minmax(0, 1fr); }
@media (max-width: 880px) { .split.reverse { grid-template-columns: 1fr; } }
/* ============ SCROLL TO TRIGGER HEADER STATE ============ */
@media (max-width: 720px) {
.brand-hero .inner { padding: 180px 24px 80px; }
.service-section .inner { padding: 80px 24px 56px; }
.band { padding: 80px 0; }
.band-inner { padding: 0 24px; }
.nav { padding: 16px 24px; gap: 16px; position: relative; flex-wrap: wrap; }
.js .nav { flex-wrap: nowrap; }
.brand { order: 1; }
.nav-cta { order: 2; margin-left: auto; }
.js .nav-toggle { display: flex; order: 4; }
.nav-links {
order: 4;
display: flex;
position: static;
flex: 1 0 100%;
top: 100%;
left: 0;
right: 0;
flex-direction: column;
gap: 0;
background: var(--paper);
border-bottom: 1px solid var(--line);
box-shadow: var(--shadow-soft);
padding: 4px 24px 14px;
}
.js .nav-links {
display: none;
position: absolute;
flex: 0 1 auto;
}
.js .nav.nav-open .nav-links { display: flex; }
.nav-links a,
.site-header.over-hero .nav-links a {
color: var(--ink-soft);
font-size: 15px;
letter-spacing: .12em;
padding: 15px 2px;
border-bottom: 1px solid var(--line-soft);
}
.nav-links a:last-child { border-bottom: 0; }
.nav-links a::after { display: none; }
/* Wide comparison tables scroll horizontally instead of widening the page. */
.compare { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; }
/* Stop form controls / gallery images from forcing min-content overflow on small screens. */
.calc-form, .calc-form label { min-width: 0; }
.calc-form select, .calc-form input { width: 100%; max-width: 100%; min-width: 0; }
.intake-form input, .intake-form select, .intake-form textarea { width: 100%; max-width: 100%; min-width: 0; }
.case-study .case-image, .case-study .case-image.gallery { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto; }
.case-study .case-image.gallery img:first-child { grid-row: auto; }
.case-study .case-image img { min-width: 0; max-width: 100%; }
.footer-bottom { padding: 24px 24px 0; }
.index-tab.is-active { margin-left: -16px; padding-left: 14px; }
}
/* Very small screens: keep the schedule CTA from crowding the hamburger. */
@media (max-width: 460px) {
.nav-cta { padding: 11px 14px; letter-spacing: .12em; font-size: 11px; }
.nav { gap: 10px; }
}
@media (max-width: 360px) {
.nav { padding-inline: 16px; gap: 8px; }
.nav-cta {
padding: 10px 12px;
font-size: 10px;
letter-spacing: .1em;
white-space: nowrap;
}
}
/* ============ iPAD / TABLET NAV ============ */
/* Portrait iPads (and narrower) collapse the 10-link nav into the hamburger
drawer so it never wraps to two rows and the CTA stays one line.
Landscape iPads (1024px+) get the single-row nav below. */
@media (max-width: 959px) {
.nav { flex-wrap: nowrap; gap: 16px; position: relative; }
.brand { order: 1; }
.nav-cta { order: 2; margin-left: auto; white-space: nowrap; }
.js .nav-toggle { display: flex; order: 4; }
.nav-links {
order: 5;
flex: 1 0 100%;
display: flex;
flex-direction: column;
gap: 0;
position: static;
background: var(--paper);
border-bottom: 1px solid var(--line);
box-shadow: var(--shadow-soft);
padding: 4px 24px 14px;
}
.js .nav-links { display: none; position: absolute; top: 100%; left: 0; right: 0; flex: 0 1 auto; }
.js .nav.nav-open .nav-links { display: flex; }
.nav-links a,
.site-header.over-hero .nav-links a {
color: var(--ink-soft);
font-size: 15px;
letter-spacing: .12em;
padding: 15px 2px;
border-bottom: 1px solid var(--line-soft);
}
.nav-links a:last-child { border-bottom: 0; }
.nav-links a::after { display: none; }
}
/* Landscape iPads: keep the full horizontal nav, just compress it so every
link and the CTA sit on a single row. */
@media (min-width: 960px) and (max-width: 1280px) {
.nav { gap: 18px; padding: 18px 20px; }
.nav-links { flex-wrap: nowrap; gap: 16px; }
.nav-links a { font-size: 13px; letter-spacing: .03em; }
.nav-cta { white-space: nowrap; padding: 11px 14px; font-size: 11px; letter-spacing: .1em; }
}
/* iPad (tablet) hamburger: larger button and roomy, easy-to-tap drawer items.
Scoped with .site-header so the enlarged size also wins once the page is
scrolled (a later desktop-nav rule otherwise shrinks these links past the hero). */
@media (min-width: 600px) and (max-width: 959px) {
.nav-toggle { width: 54px; height: 54px; padding: 12px; }
.nav-toggle span { width: 30px; }
.site-header .nav-links { margin-inline: 0; padding: 10px 30px 24px; }
.site-header .nav-links a,
.site-header.over-hero .nav-links a {
font-size: 20px;
padding: 22px 8px;
min-height: 0;
letter-spacing: .08em;
}
}
/* Anchor offset for deep-linked cost-index categories */
.index-tab { scroll-margin-top: 100px; }
/* ============ HOMEPAGE REDESIGN (luxury / editorial) ============ */
/* Quiet intro statement directly under the hero */
.intro-statement {
background: var(--paper);
}
.intro-statement .band-inner { max-width: 980px; }
.intro-statement p {
font-family: var(--font-display);
font-weight: 400;
color: var(--ink-soft);
}
.intro-statement p + p { margin-top: 26px; }
.intro-statement p.fine {
font-family: var(--font-sans);
line-height: 1.7;
color: var(--muted);
margin-top: 32px;
}
/* What We Do - editorial service entries (large photo + real text) */
.service-entry {
padding: 110px 0;
scroll-margin-top: 90px;
}
.service-entry:first-of-type { border-top: 0; }
.service-entry .service-eyebrow {
font-family: var(--font-sans);
font-size: 11px; letter-spacing: .28em; text-transform: uppercase;
font-weight: 700; color: var(--accent); display: block; margin-bottom: 18px;
}
.service-entry h3 {
font-family: var(--font-display);
font-weight: 400; font-size: clamp(30px, 3.6vw, 48px); line-height: 1.08;
letter-spacing: -0.005em; color: var(--ink); margin-bottom: 26px; max-width: 540px;
}
.service-entry h3 em { font-style: normal; color: var(--accent); }
.service-entry .service-copy p { font-size: 17px; line-height: 1.7; color: var(--muted); }
.service-entry .service-copy p + p { margin-top: 18px; }
.service-entry .service-copy p strong { color: var(--ink); }
.service-entry .explore { margin-top: 30px; }
/* Real Cost Ranges - visible editorial rows (no JS) */
.cost-rows {
margin-top: 8px;
}
.cost-row {
display: grid;
grid-template-columns: minmax(0,1fr) 200px 150px;
gap: 28px;
align-items: baseline;
padding: 26px 0;
}
.cost-row .c-cat {
font-family: var(--font-display);
font-weight: 500; font-size: clamp(19px, 2vw, 24px); color: var(--ink); line-height: 1.25;
}
.cost-row .c-cat span {
display: block; font-family: var(--font-sans);
font-size: 14px; color: var(--muted); font-weight: 400; line-height: 1.5; margin-top: 6px;
}
.cost-row .c-median {
font-family: var(--font-display);
font-weight: 500; font-size: clamp(24px, 2.6vw, 34px); color: var(--ink);
letter-spacing: -0.01em; text-align: right;
}
.cost-row .c-n {
font-family: var(--font-sans);
color: var(--muted);
text-align: right;
}
@media (max-width: 760px) {
.cost-row { grid-template-columns: 1fr auto; gap: 8px 20px; }
.cost-row .c-cat { grid-column: 1 / -1; }
.cost-row .c-median { text-align: left; }
.cost-row .c-n { text-align: right; }
}
.cost-foot { margin-top: 40px; max-width: 760px; }
.cost-foot p { font-size: 17px; line-height: 1.7; color: var(--muted); }
.cost-foot .pull {
font-family: var(--font-display);
font-style: normal;
font-size: clamp(22px, 2.4vw, 30px);
color: var(--ink);
line-height: 1.4;
margin: 28px 0;
}
.cost-foot .explore { margin-top: 8px; }
/* How We Work - five editorial steps */
.how-steps {
max-width: 960px;
}
.how-step {
padding: 30px 0;
display: grid;
grid-template-columns: 250px 1fr;
gap: 48px;
align-items: baseline;
}
@media (max-width: 680px) { .how-step { grid-template-columns: 1fr; gap: 10px; } }
.how-step .step-num {
font-family: var(--font-display);
font-style: normal; font-weight: 400; font-size: 44px; color: var(--gold); line-height: 1;
}
.how-step h3 {
font-family: var(--font-display);
font-weight: 500; font-size: clamp(20px, 2vw, 24px); color: var(--ink); line-height: 1.15;
}
.how-step p { font-size: 15px; line-height: 1.6; color: var(--muted); }
/* Where We Work - two regions */
.regions { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; }
@media (max-width: 760px) { .regions { grid-template-columns: 1fr; gap: 40px; } }
.region {
padding-top: 28px;
}
.region .region-label {
font-family: var(--font-sans);
font-size: 11px; letter-spacing: .28em; text-transform: uppercase;
font-weight: 700; color: var(--accent); display: block; margin-bottom: 16px;
}
.region h3 {
font-family: var(--font-display);
font-weight: 400; font-size: clamp(26px, 3vw, 38px); color: var(--ink);
line-height: 1.1; margin-bottom: 18px;
}
.region .cities { font-size: 18px; line-height: 1.7; color: var(--ink-soft); }
.regions-note { margin-top: 56px; max-width: 820px; }
.regions-note p { font-size: 17px; line-height: 1.7; color: var(--muted); }
.regions-note p + p { margin-top: 18px; }
.regions-note .explore { margin-top: 28px; }
/* Schedule - close */
.start-questions {
list-style: none; margin: 0 0 8px; padding: 0;
max-width: 880px;
border-top: 1px solid rgba(255,255,255,.18);
}
@media (max-width: 1100px) { .start-questions { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .start-questions { grid-template-columns: 1fr; } }
.start-questions li {
padding: 22px 2px; border-bottom: 1px solid rgba(255,255,255,.14);
font-family: var(--font-display);
font-weight: 400; font-size: clamp(19px, 2vw, 24px); color: #fff; line-height: 1.3;
}
/* Lock the numeral row + text row to equal heights so they read as straight
lines across the page regardless of how many lines each question wraps to. */
.start-questions li span {
height: 30px; display: flex; align-items: center; justify-content: center;
}
.start-questions li:last-child { border-right: 0; }
.start-questions li span {
font-style: normal; color: var(--gold); font-size: 24px; flex-shrink: 0;
}
@media (max-width: 1100px) {
.start-questions li:nth-child(2n) { border-right: 0; }
}
@media (max-width: 620px) {
.start-questions li { border-right: 0; }
}
/* Tablet-landscape (e.g. 1024px iPad): when these odd-count grids fall to two
columns, the lone last item would sit left with empty space on the right.
Span it across both columns and center it instead. */
@media (min-width: 621px) and (max-width: 1100px) {
.how-steps .how-step:last-child:nth-child(odd) {
grid-column: 1 / -1; align-items: center; text-align: center;
}
.start-questions li:last-child:nth-child(odd) { grid-column: 1 / -1; }
}
/* ============================================================
DARK THEME OVERRIDES + REFERENCE-INSPIRED (Bentley / Lotus / white.lockeladder)
Applies site-wide via the shared stylesheet.
============================================================ */
/* --- Header: dark by default (was light paper) --- */
.site-header { background: rgba(17,17,17,.90); border-bottom-color: rgba(255,255,255,.10); }
.site-header.over-hero { background: rgba(0,0,0,0); border-bottom-color: transparent; }
/* Logo is white by default now (dark header); over-hero stays white too. */
.brand-logo { filter: brightness(0) invert(1); }
.site-header.over-hero .brand-logo { filter: brightness(0) invert(1); }
/* --- Heavier, tighter display type for "presence" --- */
.statement-band h2, .ethos-band h2, .cta-section h2 { font-weight: 600; letter-spacing: -0.012em; }
/* --- Primary button = single gold accent (Lotus-yellow analog) --- */
.btn { background: var(--gold); color: #111111; border-color: var(--gold); }
.btn:hover { background: var(--gold-soft); border-color: var(--gold-soft); color: #111111; transform: translateY(-1px); }
.btn.ghost {
border-color: rgba(255,255,255,.7);
}
.intake-form button,
.intake-form input[type="submit"] {
border-color: var(--gold);
}
/* --- Surfaces that were hardcoded light, re-skinned dark --- */
.band.cream { background: var(--soft); border-top-color: rgba(255,255,255,.06); }
.band.soft { background: var(--soft); }
.path-card { background: var(--soft); }
.path-card:hover { background: #1a1a1a; }
.city-tile:hover { background: var(--soft); }
.city-tile.featured { background: var(--gold); color: #111111; }
.city-tile.featured strong { color: #111111; }
.city-tile.featured .city-meta { color: rgba(17,17,17,.72); }
.city-tile.featured .featured-tag { color: rgba(17,17,17,.72); }
.city-tile.featured:hover { background: var(--gold-soft); }
/* keep selects/inputs legible on dark surfaces */
.advisor-controls select, .intake-form input, .intake-form select, .intake-form textarea { color: var(--ink); }
.advisor-controls select option, .intake-form select option { color: #111111; }
/* --- CINEMATIC SERVICE SECTIONS (full-bleed photo + plate caption + dark detail) --- */
.service-cinema-stack { background: #0d0d0d; }
.service-cine {
position: relative; min-height: 64vh; display: grid; align-items: end;
overflow: hidden; background: #0d0d0d; scroll-margin-top: 80px;
}
.service-cine .bg {
position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
filter: saturate(.95); transform: scale(1.03); transition: transform 7s ease;
}
.service-cine:hover .bg { transform: scale(1.09); }
.service-cine .shade {
position: absolute; inset: 0;
background:
linear-gradient(0deg, rgba(0,0,0,.82), rgba(0,0,0,0) 62%),
linear-gradient(90deg, rgba(0,0,0,.55), rgba(0,0,0,0) 55%);
}
.service-cine .inner {
position: relative; z-index: 2; max-width: var(--container); margin: 0 auto;
padding: 120px 36px 60px; color: #fff; width: 100%;
}
.service-cine .service-eyebrow { color: var(--gold); display: block; margin-bottom: 16px; }
.service-cine h3 {
color: #fff;
font-family: var(--font-display);
line-height: .98;
max-width: 940px;
margin: 0;
text-shadow: 0 1px 3px rgba(0,0,0,.3);
}
.service-cine h3 em { font-style: normal; font-weight: 400; color: var(--gold-soft); }
.plate-caption {
display: block; margin-top: 28px; font-family: var(--font-sans);
font-size: 11px; letter-spacing: .3em; text-transform: uppercase; font-weight: 700;
color: rgba(255,255,255,.6);
}
.service-detail {
padding: 70px 0 92px;
background: var(--paper);
}
.service-detail .band-inner { max-width: var(--container); }
.service-detail .service-copy { max-width: 780px; }
.service-detail .service-copy p {
line-height: 1.75;
color: var(--muted);
}
.service-detail .service-copy p + p { margin-top: 18px; }
.service-detail .service-copy p strong { color: var(--ink); }
.service-detail .explore { margin-top: 30px; }
@media (max-width: 720px) {
.service-cine { min-height: 58vh; }
.service-cine .inner { padding: 90px 24px 44px; }
.service-detail { padding: 48px 0 64px; }
}
/* --- MOTION: scroll reveal ---
Hero images stay at native scale so they never widen the document on
desktop, tablet, or phone orientations. */
/* Homepage hero video: sits over the fallback image, plays at native scale
(no slow zoom), and is hidden for reduced-motion users (image shows). */
.brand-hero .hero-video { animation: none; transform: none; background: #0d0d0d; }
@media (prefers-reduced-motion: reduce) { .brand-hero .hero-video { display: none; } }
/* Mobile hero focal point. On phones the hero is taller than the photo, so
object-fit: cover crops the SIDES and the horizontal focal point is what
matters. Each hero can set its own focal point inline via --hp
(e.g. style="--hp:60% 50%"); it defaults to dead center. */
@media (max-width: 760px) {
.brand-hero .bg,
.subpage-hero .bg,
.hero .hero-bg { object-position: var(--hp, 50% 50%); }
/* Shorter subpage heroes on phones so the wide photo is cropped far less
(less zoom) while the headline stays overlaid. The text block is also
tightened so the hero can sit lower. The homepage (.brand-hero) keeps
its full-height treatment. */
.subpage-hero { min-height: 44vh; }
.subpage-hero .inner { padding-top: 84px; padding-bottom: 36px; }
.project-hero .hero-inner { padding-top: 84px; padding-bottom: 36px; }
.subpage-hero .lede { margin-top: 16px; }
.subpage-hero .actions { margin-top: 24px; }
/* Enlarged photo hero on phones (opt-in via .hero-tall): a tall, sharp
full-bleed photo taking over half the screen, with the breadcrumb,
eyebrow, and headline overlaid. Desktop is unaffected. */
.subpage-hero.hero-tall { min-height: 59vh; }
/* Same treatment for the brand-hero pages (brava, pella) and the cost-index
hero, which use different inner wrappers. The homepage brand-hero has no
.hero-tall class, so it stays full-height for its video. */
.brand-hero.hero-tall { min-height: 59vh; }
.brand-hero.hero-tall .inner { padding-top: 84px; padding-bottom: 36px; }
.hero.hero-tall { min-height: 59vh; }
.hero.hero-tall .hero-inner { padding-top: 84px; padding-bottom: 36px; }
}
/* Reveal is only armed once JS adds .reveal-ready to , so no-JS crawlers
(and reduced-motion users) always see fully visible content. */
@media (prefers-reduced-motion: reduce) {
body.reveal-ready .reveal { opacity: 1; transform: none; transition: none; }
}
/* legacy .btn.dark was ink(now light)+white text - re-skin to gold accent */
.btn.dark { background: var(--gold); color: #111111; border-color: var(--gold); }
.btn.dark:hover { background: var(--gold-soft); border-color: var(--gold-soft); color: #111111; }
/* --- Typography color balance: white.lockeladder-inspired restraint ---
Gold stays for real UI accents, buttons, stars, and interaction states.
Ordinary emphasis and labels read mostly white/off-white/gray. */
h1 em,
h2 em,
h3 em,
.script-mark,
.brand-hero h1 em,
.service-section h2 em,
.subpage-hero h1 em,
.statement-band h2 em,
.ethos-band h2 em,
.cta-section h2 em,
.case-study h2 em,
.hero-inner h1 em,
.city-intro h1 em,
.service-entry h3 em,
.service-cine h3 em {
color: inherit !important;
}
.eyebrow,
.eyebrow.dark,
.eyebrow.light,
.partners-band .partners-eyebrow,
.partner-card .partner-role,
.product-row .product-label span,
.brand-hero .signals span,
.service-section .service-label,
.service-cine .service-eyebrow,
.card .kicker,
.band.dark .card .kicker,
.index-tab span,
.index-panel .label,
.service-entry .service-eyebrow,
.region .region-label,
.start-questions li span,
.how-step .step-num {
color: var(--muted) !important;
}
.brand-hero .eyebrow,
.service-section .service-label,
.service-cine .service-eyebrow {
color: rgba(243,241,234,.72) !important;
}
/* --- User-selected light theme ---
The default site remains dark. Light mode brightens reading surfaces and the
solid header while keeping photo heroes, dark CTAs, and footer bands dark. */
body.theme-light {
--accent: #34373b;
--copper: #34373b;
--dark: #0b0b0a;
--dark2: #161513;
--dark3: #242220;
--shadow-soft: 0 1px 2px rgba(0,0,0,.04), 0 14px 34px rgba(20,15,10,.08);
}
body.theme-light .site-header {
background: rgba(250,250,250,.94);
border-bottom-color: rgba(17,17,17,.12);
}
body.theme-light .site-header.over-hero {
background: rgba(0,0,0,0);
border-bottom-color: transparent;
}
body.theme-light .brand-logo { filter: brightness(0); }
body.theme-light .site-header.over-hero .brand-logo { filter: brightness(0) invert(1); }
body.theme-light .nav-links a { color: var(--ink-soft); }
body.theme-light .site-header.over-hero .nav-links a { color: rgba(255,255,255,.92); }
body.theme-light .nav-cta {
border-color: var(--ink);
color: var(--ink);
}
body.theme-light .site-header.over-hero .nav-cta {
border-color: rgba(255,255,255,.6);
color: #fff;
}
body.theme-light .band:not(.dark),
body.theme-light .advisor-shell,
body.theme-light .partners-band,
body.theme-light .service-detail,
body.theme-light .path-card {
background: var(--paper);
}
body.theme-light .band.soft,
body.theme-light .band.cream,
body.theme-light .band.paper,
body.theme-light .path-card,
body.theme-light .city-tile:hover {
background: var(--soft);
}
body.theme-light .card,
body.theme-light .review,
body.theme-light .faq-item,
body.theme-light .compare th,
body.theme-light .compare td,
body.theme-light .recommendation,
body.theme-light .review-summary {
border-color: var(--line);
}
body.theme-light .btn.ghost,
body.theme-light .advisor-shell .btn.ghost,
body.theme-light .band:not(.dark) .btn.ghost {
color: var(--ink);
border-color: var(--ink);
}
body.theme-light .btn.ghost:hover,
body.theme-light .advisor-shell .btn.ghost:hover,
body.theme-light .band:not(.dark) .btn.ghost:hover {
background: var(--ink);
color: #fff;
border-color: var(--ink);
}
body.theme-light .band.dark,
body.theme-light .site-footer {
--ink: #ededed;
--ink-soft: #d6d6d6;
--muted: #a3a3a3;
--line: rgba(255,255,255,.14);
--line-soft: rgba(255,255,255,.07);
}
body.theme-light .band.dark .btn.ghost {
color: #fff;
border-color: rgba(255,255,255,.7);
}
body.theme-light .band.dark .btn.ghost:hover {
background: #fff;
color: #111111;
border-color: #fff;
}
body.theme-light .brand-hero .eyebrow,
body.theme-light .service-section .service-label,
body.theme-light .service-cine .service-eyebrow {
color: rgba(243,241,234,.72) !important;
}
/* ============================================================
4.0 DESIGN LANGUAGE - FINISH LAYER
Copper selection/focus, square corners, and the analogue
film-grain + halftone texture from Locke-ladder-main-site-4.0.
Pure CSS: no DOM elements and no JavaScript, so AI crawlers
render the full visual layer without executing scripts.
============================================================ */
/* Copper text selection (4.0: background #c47b4f on #111) */
/* Visible copper keyboard focus for accessibility (matches 4.0) */
a:focus-visible,
button:focus-visible,
summary:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
outline: 2px solid var(--copper);
outline-offset: 3px;
}
/* Square corners everywhere (4.0 --radius: 0) */
.nav-toggle span { border-radius: 0; }
/* Halftone dot texture utility - used sparingly, as in 4.0 */
.halftone {
background-image: radial-gradient(rgba(237,237,237,0.05) 1px, transparent 1.2px);
background-size: 5px 5px;
}
/* Fine film-grain overlay, fixed and very subtle (4.0 .grain-overlay).
Rendered as a body pseudo-element so every page gets it with no markup
change and no script. pointer-events:none keeps the page fully clickable. */
body::after {
content: "";
pointer-events: none;
position: fixed;
inset: 0;
z-index: 60;
opacity: 0.05;
mix-blend-mode: screen;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
/* In the optional light theme the grain would invert oddly under screen blend;
soften it so it stays subtle on bright surfaces. */
body.theme-light::after { opacity: 0.035; mix-blend-mode: multiply; }
/* ============================================================
BENTLEY-INSPIRED LAYER - photo depth + editorial spacing
Inspired by bentleymotors.com/bentley-culture: feature photos
sit on an offset charcoal "plate" so they float off the page,
with a soft inner underlay gradient for depth, richer hero
vignettes, and generous negative space. Pure CSS, no JS.
Appended last so it wins the cascade; safe to tweak/remove.
============================================================ */
/* ---- Generous editorial spacing (Bentley negative space) ---- */
.split, .split.reverse { gap: 112px; }
/* Tablet landscape (e.g. iPad horizontal, ~1024–1194px): two columns are kept,
but the image is capped and the gap tightened so the copy/product list
beside it doesn't get smooshed against the edge. */
@media (min-width: 881px) and (max-width: 1200px) {
.split { grid-template-columns: minmax(0, 1fr) minmax(280px, 360px); }
.split.reverse { grid-template-columns: minmax(280px, 360px) minmax(0, 1fr); }
.split, .split.reverse { gap: 48px; }
}
@media (max-width: 880px) {
.band { padding: 104px 0; }
.split, .split.reverse { gap: 44px; }
.case-study { padding: 88px 0; }
}
/* ---- Feature photos: offset charcoal plate (depth) ---- */
.split .media,
.case-study .case-image:not(.gallery) {
position: relative;
overflow: visible; /* let the plate peek out behind the image */
isolation: isolate; /* own stacking context for the layers below */
}
.split .media::before,
.case-study .case-image:not(.gallery)::before {
content: "";
position: absolute;
inset: 28px -28px -28px 28px;
border: 1px solid var(--line);
z-index: 0;
}
.split .media > img,
.case-study .case-image:not(.gallery) > img {
position: relative;
z-index: 1;
display: block;
}
/* Soft inner underlay gradient ON the photo - adds the depth Bentley uses */
.split .media::after,
.case-study .case-image:not(.gallery)::after {
content: "";
position: absolute;
inset: 0; /* covers the image box (plate sits behind) */
z-index: 2;
pointer-events: none;
background:
linear-gradient(180deg, rgba(8,8,8,0) 52%, rgba(8,8,8,.36) 100%),
radial-gradient(135% 115% at 50% 4%, rgba(0,0,0,0) 58%, rgba(0,0,0,.22) 100%);
}
/* The ::after must hug the image, not the negatively-inset plate area.
Pin it to the image height by matching the media box (img defines it). */
.split .media,
.case-study .case-image:not(.gallery) { line-height: 0; }
/* Mobile: drop the offset plate so nothing overflows the viewport,
keep the subtle inner underlay for depth. */
@media (max-width: 880px) {
.split .media::before,
.case-study .case-image:not(.gallery)::before { display: none; }
.split .media,
.case-study .case-image:not(.gallery) { overflow: hidden; }
}
/* ---- Cropping: slightly more cinematic landscape feature crops ---- */
.split .media.landscape img { aspect-ratio: 3 / 2; object-fit: cover; }
/* ---- Richer full-bleed hero vignette (depth under the type) ---- */
.brand-hero .shade,
.service-cine .shade,
.subpage-hero .shade,
.hero-shade {
background:
linear-gradient(180deg, rgba(0,0,0,.52) 0%, rgba(0,0,0,0) 32%, rgba(0,0,0,0) 50%, rgba(0,0,0,.88) 100%),
radial-gradient(140% 125% at 50% 30%, rgba(0,0,0,0) 46%, rgba(0,0,0,.42) 100%),
linear-gradient(90deg, rgba(0,0,0,.55), rgba(0,0,0,.04) 56%);
}
/* ---- Gallery photos: consistent depth without an offset plate ----
Tight grids (proof galleries, case-study galleries) can't take the
offset plate, so they get a thin frame + inner vignette so EVERY
content photo on the site reads with the same depth. */
.proof-gallery figure { border: 1px solid var(--line); }
.proof-gallery figure::before {
content: "";
position: absolute;
inset: 0;
z-index: 1; /* above the image, below the caption */
pointer-events: none;
background:
linear-gradient(180deg, rgba(0,0,0,.20) 0%, rgba(0,0,0,0) 26%),
radial-gradient(130% 120% at 50% 0%, rgba(0,0,0,0) 60%, rgba(0,0,0,.22) 100%);
}
.proof-gallery figcaption { z-index: 2; }
.case-study .case-image.gallery img { border: 1px solid var(--line); }
/* ============================================================
COWORKER 4.0 LOOK - final override layer
Matches the live Emergent Home design (locke-ladder-home):
lighter Termina headings, Mona Sans sentence-case nav + buttons,
paper-filled primary CTAs, copper reserved for eyebrows/numbers,
even legible hero wash. CSS only - no markup/content/schema change.
Appended last so it wins the cascade.
============================================================ */
/* ---- Headings: Termina 500, tight tracking, capped sizes, upright ---- */
h1 {
font-weight: 500;
letter-spacing: -0.025em;
}
h2 {
font-weight: 500;
letter-spacing: -0.025em;
}
h3 { font-weight: 500; letter-spacing: -0.02em; }
.brand-hero h1 {
font-weight: 500;
letter-spacing: -0.025em;
}
.subpage-hero h1, .hero-inner h1, .city-intro h1 { font-weight: 500; letter-spacing: -0.025em; }
.service-cine h3 {
font-weight: 500;
letter-spacing: -0.022em;
}
.statement-band h2, .ethos-band h2, .cta-section h2, .case-study h2,
.partners-band h3, .service-entry h3 { font-weight: 500; letter-spacing: -0.02em; }
/* Upright headline accents */
h1 em, h2 em, h3 em,
.brand-hero h1 em, .service-cine h3 em, .subpage-hero h1 em,
.case-study h2 em, .hero-inner h1 em, .city-intro h1 em,
.statement-band h2 em, .ethos-band h2 em, .cta-section h2 em {
font-style: normal; color: inherit;
}
/* ---- Nav links: Mona Sans, sentence case, soft light ---- */
.nav-links a {
font-family: var(--font-sans);
font-size: 14px; font-weight: 400; letter-spacing: 0.02em;
text-transform: none; color: rgba(237,237,237,0.72);
}
.site-header.over-hero .nav-links a { color: rgba(237,237,237,0.82); }
.nav-links a:hover,
.nav-links a[aria-current="page"] { color: var(--ink); }
.nav-links a::after { display: none; } /* color shift, no underline bar */
/* ---- Primary button: solid paper, dark text, Mona Sans sentence case, square ---- */
.btn, .btn.dark {
font-family: var(--font-sans);
background: var(--ink); color: var(--paper);
border: 1px solid var(--ink);
text-transform: none; letter-spacing: 0.02em; font-weight: 500; font-size: 14px;
padding: 16px 28px; min-height: 0; border-radius: 0;
}
.btn:hover, .btn.dark:hover { background: #ffffff; border-color: #ffffff; color: var(--paper); transform: none; }
/* Ghost / secondary: transparent, thin light border */
.btn.ghost {
background: transparent; color: var(--ink); border: 1px solid rgba(237,237,237,0.4);
}
.btn.ghost:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.btn.ink-ghost { background: transparent; color: var(--ink); border-color: rgba(237,237,237,0.4); }
.btn.ink-ghost:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); }
/* Nav CTA: solid paper "Schedule" button */
.nav-cta {
font-family: var(--font-sans);
text-transform: none;
letter-spacing: 0.02em;
font-weight: 500;
font-size: 14px;
padding: 12px 22px;
border-radius: 0;
}
.site-header.over-hero .nav-cta { background: var(--ink); color: var(--paper); border-color: var(--ink); }
/* Intake form submit matches primary button */
.intake-form button,
.intake-form input[type="submit"] {
font-family: var(--font-sans);
background: var(--ink); color: var(--paper); border: 1px solid var(--ink);
text-transform: none; letter-spacing: 0.02em; font-weight: 500; border-radius: 6px;
}
.intake-form button:hover,
.intake-form input[type="submit"]:hover { background: #ffffff; border-color: #ffffff; color: var(--paper); }
/* ---- Inline "explore" links: sentence case, copper ---- */
.explore {
font-family: var(--font-sans);
text-transform: none; letter-spacing: 0.02em; font-weight: 500; font-size: 13px;
}
/* ---- Eyebrows + service numbers: copper, restrained ---- */
.eyebrow, .eyebrow.dark, .eyebrow.light,
.partners-band .partners-eyebrow, .partner-card .partner-role,
.product-row .product-label span, .service-section .service-label,
.service-cine .service-eyebrow, .service-entry .service-eyebrow,
.card .kicker, .band.dark .card .kicker, .index-tab span, .index-panel .label,
.region .region-label, .case-study .case-meta, .city-stats span, .city-intro .stats span,
.brand-hero .eyebrow {
color: var(--copper) !important;
font-size: 12px; letter-spacing: 0.22em; font-weight: 600;
}
.how-step .step-num, .process-step .step-num, .path-card .path-num {
color: var(--copper); font-style: normal;
}
/* ---- Hero: even, legible wash (replaces the heavy vignette) ---- */
.brand-hero .shade,
.subpage-hero .shade,
.service-cine .shade,
.hero-shade {
background:
linear-gradient(180deg, rgba(17,17,17,0.55) 0%, rgba(17,17,17,0.26) 42%, rgba(17,17,17,0.74) 100%),
linear-gradient(90deg, rgba(17,17,17,0.5) 0%, rgba(17,17,17,0.04) 60%);
}
/* ---- Hero signals: restrained meta row (not giant stat numbers) ---- */
.brand-hero .signals { gap: 44px; margin-top: 52px; padding-top: 26px; border-top: 1px solid rgba(237,237,237,0.18); }
.brand-hero .signals div { font-size: 12px; color: rgba(237,237,237,0.66); }
.brand-hero .signals strong {
font-family: var(--font-display);
font-size: 18px; font-weight: 500; color: var(--ink); margin-bottom: 2px;
}
/* ============================================================
THEME + PHOTO FIXES (v4.2)
- Primary buttons legible in BOTH light & dark, all header states
- Offset plate adapts to theme (no black slab in light mode)
- Per-photo variation for Bentley-style pop
============================================================ */
/* ---- Primary buttons: dark-fill+light-text in light mode, all states ---- */
body.theme-light .nav-cta,
body.theme-light .site-header.over-hero .nav-cta,
body.theme-light .btn,
body.theme-light .btn.dark,
body.theme-light .intake-form button,
body.theme-light .intake-form input[type="submit"] {
background: var(--ink);
color: var(--paper);
border-color: var(--ink);
}
body.theme-light .nav-cta:hover,
body.theme-light .btn:hover,
body.theme-light .btn.dark:hover,
body.theme-light .intake-form button:hover,
body.theme-light .intake-form input[type="submit"]:hover {
background: #000000;
border-color: #000000;
color: var(--paper);
}
/* ---- Offset plate: theme-adaptive (was a black slab in light mode) ---- */
.split .media::before,
.case-study .case-image:not(.gallery)::before {
background: #1c1c1c; /* dark mode: subtle lift off #111 */
border-color: var(--line);
}
body.theme-light .split .media::before,
body.theme-light .case-study .case-image:not(.gallery)::before {
background: #e6e6e6; /* light mode: soft gray plate */
border-color: rgba(17,17,17,0.14);
}
/* ---- Per-photo VARIATION (Bentley-style pop) ---- */
/* Reverse-layout sections mirror the plate to peek toward the outer edge,
and carry a faint copper-tinted frame so alternating photos read differently. */
.split.reverse .media::before,
.case-study.reverse .case-image:not(.gallery)::before {
inset: 28px 28px -28px -28px; /* peek bottom-LEFT */
background: #181818;
border-color: rgba(196,123,79,0.30); /* copper accent edge */
}
body.theme-light .split.reverse .media::before,
body.theme-light .case-study.reverse .case-image:not(.gallery)::before {
background: #ededed;
border-color: rgba(196,123,79,0.38);
}
/* Mirror the inner underlay direction on reverse layouts for added variety */
.split.reverse .media::after,
.case-study.reverse .case-image:not(.gallery)::after {
background:
linear-gradient(180deg, rgba(8,8,8,0) 52%, rgba(8,8,8,.34) 100%),
radial-gradient(130% 120% at 12% 8%, rgba(0,0,0,0) 58%, rgba(0,0,0,.24) 100%);
}
/* Gallery figures: vary the weighting image-to-image so each one pops */
.proof-gallery figure:nth-child(3n+1)::before {
background:
linear-gradient(180deg, rgba(0,0,0,.24) 0%, rgba(0,0,0,0) 30%),
radial-gradient(120% 120% at 8% 0%, rgba(0,0,0,0) 60%, rgba(0,0,0,.26) 100%);
}
.proof-gallery figure:nth-child(3n+2)::before {
background:
radial-gradient(125% 120% at 88% 100%, rgba(0,0,0,0) 52%, rgba(0,0,0,.30) 100%);
}
.proof-gallery figure:nth-child(3n)::before {
background:
linear-gradient(180deg, rgba(0,0,0,0) 48%, rgba(0,0,0,.36) 100%),
linear-gradient(90deg, rgba(0,0,0,.16) 0%, rgba(0,0,0,0) 34%);
}
/* Light mode: lighten the inner photo underlay so it reads as gentle depth,
not a heavy black cast (the weighting still varies via the rules above). */
body.theme-light .split .media::after,
body.theme-light .case-study .case-image:not(.gallery)::after {
background:
linear-gradient(180deg, rgba(0,0,0,0) 60%, rgba(0,0,0,.16) 100%),
radial-gradient(130% 120% at 50% 4%, rgba(0,0,0,0) 64%, rgba(0,0,0,.10) 100%);
}
body.theme-light .proof-gallery figure::before { opacity: 0.6; }
/* ============================================================
HERO LEGIBILITY + STATE-AWARE BUTTONS (v4.3)
The hero sits on a dark photo in BOTH themes, so its text and
action buttons must stay light there. The nav CTA flips by
header state in light mode (light over the photo, dark once
scrolled onto the solid light header).
============================================================ */
/* ---- Hero text always light (was turning black at the bottom in light mode) ---- */
.brand-hero .signals strong,
.subpage-hero .signals strong { color: #f3f3f3; }
.brand-hero .signals div,
.subpage-hero .signals div { color: rgba(255,255,255,0.7); }
body.theme-light .brand-hero .inner,
body.theme-light .brand-hero .lede,
body.theme-light .subpage-hero .inner,
body.theme-light .subpage-hero .lede,
body.theme-light .hero-inner,
body.theme-light .service-cine .inner { color: #ffffff; }
/* ---- Hero ACTION buttons: always light/paper + dark text (pop on the photo) ---- */
.brand-hero .actions .btn:not(.ghost),
.subpage-hero .actions .btn:not(.ghost),
.hero-actions .btn:not(.ghost) {
background: #ededed; color: #111111; border-color: #ededed;
}
.brand-hero .actions .btn:not(.ghost):hover,
.subpage-hero .actions .btn:not(.ghost):hover,
.hero-actions .btn:not(.ghost):hover {
background: #ffffff; border-color: #ffffff; color: #111111;
}
/* Hero ghost + explore links stay light-on-photo in both themes */
.brand-hero .actions .btn.ghost,
.subpage-hero .actions .btn.ghost,
.hero-actions .btn.ghost,
body.theme-light .brand-hero .actions .btn.ghost,
body.theme-light .subpage-hero .actions .btn.ghost {
background: transparent; color: #ffffff; border-color: rgba(255,255,255,0.5);
}
.brand-hero .actions .btn.ghost:hover,
.subpage-hero .actions .btn.ghost:hover,
.hero-actions .btn.ghost:hover {
background: #ffffff; color: #111111; border-color: #ffffff;
}
.brand-hero .actions .explore,
.subpage-hero .actions .explore,
.hero-actions .explore,
body.theme-light .brand-hero .actions .explore { color: #ffffff; border-color: rgba(255,255,255,0.4); }
/* ---- Nav CTA: state-aware in light mode ---- */
/* Over the dark hero photo: light/paper button with dark text (pops) */
body.theme-light .site-header.over-hero .nav-cta {
background: var(--paper); color: var(--ink); border-color: var(--paper);
}
body.theme-light .site-header.over-hero .nav-cta:hover {
background: #ffffff; color: var(--ink); border-color: #ffffff;
}
/* Scrolled onto the solid light header: dark fill + light text (from v4.2) stays */
/* Primary buttons on ALL always-dark contexts = light/paper fill + dark text,
in both themes (prevents dark-on-dark invisibility in light mode). */
.brand-hero .btn:not(.ghost),
.subpage-hero .btn:not(.ghost),
.hero .btn:not(.ghost),
.band.dark .btn:not(.ghost),
.cta-section .btn:not(.ghost),
.ethos-band .btn:not(.ghost),
.calculator .btn:not(.ghost) {
background: #ededed; color: #111111; border-color: #ededed;
}
.brand-hero .btn:not(.ghost):hover,
.subpage-hero .btn:not(.ghost):hover,
.hero .btn:not(.ghost):hover,
.band.dark .btn:not(.ghost):hover,
.cta-section .btn:not(.ghost):hover,
.ethos-band .btn:not(.ghost):hover,
.calculator .btn:not(.ghost):hover {
background: #ffffff; color: #111111; border-color: #ffffff;
}
/* ============================================================
HERO BUTTONS: transparent over the photo (v4.4)
The primary hero buttons + the nav CTA while over the hero are
transparent with white text, a hairline border, and a text-shadow
so they're legible on any part of the image instead of a white box.
============================================================ */
.brand-hero .actions .btn:not(.ghost),
.subpage-hero .actions .btn:not(.ghost),
.hero-actions .btn:not(.ghost),
.site-header.over-hero .nav-cta,
body.theme-light .site-header.over-hero .nav-cta {
background: transparent;
color: #ffffff;
border: 1px solid rgba(255,255,255,0.65);
text-shadow: 0 1px 4px rgba(0,0,0,0.5);
}
.brand-hero .actions .btn:not(.ghost):hover,
.subpage-hero .actions .btn:not(.ghost):hover,
.hero-actions .btn:not(.ghost):hover,
.site-header.over-hero .nav-cta:hover,
body.theme-light .site-header.over-hero .nav-cta:hover {
background: rgba(255,255,255,0.14);
border-color: #ffffff;
color: #ffffff;
text-shadow: 0 1px 4px rgba(0,0,0,0.5);
}
/* ============================================================
TEAM GRID + VIDEO FACADE (v4.5)
Team page photo grid and a lightweight, crawlable video facade
(poster + play button; the iframe loads only on click via a tiny
progressive-enhancement script). No-JS users get a link to YouTube.
============================================================ */
/* ---- Team grid ---- */
.team-grid {
display: grid;
grid-template-columns: repeat(4, minmax(0,1fr));
border-top: 1px solid var(--line);
border-left: 1px solid var(--line);
}
@media (max-width: 1000px) { .team-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 720px) { .team-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 440px) { .team-grid { grid-template-columns: 1fr; } }
.team-member {
border-right: 1px solid var(--line);
border-bottom: 1px solid var(--line);
padding: 22px 22px 26px;
display: flex;
flex-direction: column;
gap: 16px;
}
.team-photo, .team-monogram {
aspect-ratio: 4 / 5;
width: 100%;
object-fit: cover;
display: block;
filter: grayscale(1) contrast(1.02);
transition: filter .4s ease;
}
.team-member:hover .team-photo { filter: grayscale(0); }
.team-monogram {
display: flex; align-items: center; justify-content: center;
background: var(--soft);
font-family: var(--font-display);
font-weight: 500; font-size: 44px; letter-spacing: -0.02em;
color: var(--copper);
}
.team-member strong {
font-family: var(--font-display);
font-weight: 500; font-size: 20px; letter-spacing: -0.01em;
color: var(--ink); line-height: 1.15;
}
/* ---- Video facade ---- */
.video-embed { display: flex; flex-direction: column; gap: 14px; }
.video-embed .eyebrow { margin: 0; }
.video-frame {
position: relative;
aspect-ratio: 16 / 9;
width: 100%;
overflow: hidden;
background: #0d0d0d;
}
.video-facade { position: absolute; inset: 0; display: block; cursor: pointer; }
.video-facade img { width: 100%; height: 100%; object-fit: cover; display: block; opacity: 0.86; transition: opacity .3s ease, transform 6s ease; }
.video-facade:hover img { opacity: 1; transform: scale(1.03); }
.video-play {
position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
width: 74px; height: 74px; border-radius: 50%;
background: rgba(17,17,17,0.55); border: 1px solid rgba(255,255,255,0.7);
display: flex; align-items: center; justify-content: center;
transition: background .25s ease, transform .25s ease;
}
.video-facade:hover .video-play { background: var(--copper); transform: translate(-50%,-50%) scale(1.06); }
.video-play::after {
content: ""; display: block;
width: 0; height: 0; margin-left: 5px;
border-style: solid; border-width: 12px 0 12px 20px;
border-color: transparent transparent transparent #ffffff;
}
.video-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.video-embed figcaption {
font-family: var(--font-sans);
font-size: 13px; color: var(--muted); letter-spacing: 0.04em;
}
/* Two videos side by side where space allows */
.video-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; }
@media (max-width: 820px) { .video-pair { grid-template-columns: 1fr; gap: 28px; } }
.video-feature {
display: grid;
grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr);
gap: 36px;
align-items: center;
margin-top: 58px;
padding-top: 34px;
border-top: 1px solid var(--line);
}
.video-feature h3 {
max-width: 560px;
margin: 8px 0 12px;
font-family: var(--font-display);
font-size: clamp(28px, 3vw, 44px);
font-weight: 500;
line-height: 1.02;
}
.video-feature p:not(.eyebrow) {
max-width: 620px;
color: var(--muted);
}
@media (max-width: 900px) {
.video-feature {
grid-template-columns: 1fr;
gap: 24px;
margin-top: 42px;
}
}
/* ============================================================
NAV CTA blends with the solid header on scroll (v4.6)
Scrolled (solid header): transparent so the header color shows
through, using the header's own text color + a hairline border.
Over-hero state keeps its transparent-white treatment (v4.4).
============================================================ */
.nav-cta {
background: transparent;
color: var(--ink);
border: 1px solid var(--line);
}
.nav-cta:hover {
background: rgba(237,237,237,0.10);
border-color: var(--ink);
color: var(--ink);
}
body.theme-light .nav-cta {
background: transparent;
color: var(--ink);
border-color: rgba(17,17,17,0.28);
}
body.theme-light .nav-cta:hover {
background: rgba(17,17,17,0.06);
border-color: var(--ink);
color: var(--ink);
}
/* ============ CONSOLIDATED font-size-adjust ============
Body sans renders at 0.52, Termina (display) at 0.41 - formerly repeated per rule. */
.answer-card .figure,
.big5 article span,
.big5 article strong,
.brand-hero .signals strong,
.brand-hero h1,
.brand-text strong,
.brand-text-mark strong,
.calc-output .range-out,
.card h3,
.case-study .case-facts strong,
.case-study .case-lede,
.case-study .case-pull,
.case-study h2,
.city-intro .stats strong,
.city-intro h1,
.city-stats strong,
.city-tile strong,
.compare td strong,
.compare td:last-child,
.confidence,
.cost-foot .pull,
.cost-row .c-cat,
.cost-row .c-median,
.cta-section h2,
.ethos-band .ethos-lede,
.ethos-band h2,
.ethos-stack article h3,
.faq-item summary,
.footer-inner .brand-block strong,
.footer-inner address strong,
.hero-inner h1,
.hero-inner h2,
.how-step .step-num,
.how-step h3,
.index-panel h3,
.index-tab strong,
.intake-disclaimer,
.intro-statement p,
.nav-cta,
.nav-links a,
.note,
.partner-card .partner-name,
.partners-band h3,
.path-card .path-num,
.path-card h3,
.process-step .step-num,
.process-step h3,
.product-row .product-label,
.proof-gallery figcaption strong,
.recommendation h3,
.region h3,
.review p,
.review-summary .big,
.review-summary .breakdown strong,
.script-mark,
.serif,
.service-cine h3,
.service-entry h3,
.service-section .meta strong,
.service-section h2,
.site-header,
.start-questions li,
.stat-row strong,
.statement-band h2,
.subpage-hero h1,
.team-member strong,
.team-monogram,
[style*="--font-display"],
h1, h2, h3, h4,
ul.checklist li::before { font-size-adjust: 0.41; }
.advisor-controls label,
.advisor-controls select,
.answer-card .figure small,
.breadcrumb,
.btn,
.btn, .btn.dark,
.calc-form label,
.calc-form select, .calc-form input[type="range"],
.calc-output .system-label,
.card .arrow,
.card .kicker,
.case-study .case-facts span,
.case-study .case-meta,
.case-study .case-pull cite,
.city-intro .stats span,
.city-stats span,
.city-tile .city-meta,
.city-tile.featured .featured-tag,
.cost-row .c-cat span,
.cost-row .c-n,
.ethos-stack article .ethos-eyebrow,
.explore,
.eyebrow,
.faq-item summary::after,
.footer-bottom,
.index-panel .label,
.index-tab span,
.intake-form button,
.intake-form input, .intake-form select, .intake-form textarea,
.intake-form label,
.intro-statement p.fine,
.nav-cta,
.nav-links a,
.note strong,
.partner-card .partner-role,
.partners-band .partners-eyebrow,
.path-card .arrow,
.plate-caption,
.process-step .step-label,
.product-row .product-label span,
.proof-gallery figcaption span,
.recommendation .rec-label,
.region .region-label,
.review .attrib,
.review-summary .breakdown div,
.service-entry .service-eyebrow,
.service-section .service-label,
.stat-row span,
.video-embed figcaption,
body,
table.compare { font-size-adjust: 0.52; }
/* ============================================================
5.0 EDITORIAL RESTRAINT LAYER
Adopted: consistent 112px band rhythm, tighter type scale,
numbered line-item service index, materials tradeoff rows,
founder pull-quote, restored light/dark band alternation,
faster scroll-reveal. CSS-only - no content or schema change.
Appended last so it wins the cascade.
============================================================ */
/* ---- Consistent band rhythm: one 112px module, like the reference ---- */
.band { padding: 112px 0; }
.band.tight { padding: 88px 0; }
.intro-statement { padding: 112px 0; }
.statement-band { padding: 112px 36px; }
.cta-section { padding: 112px 36px; }
.ethos-band { padding: 112px 0; }
.case-study { padding: 112px 0; }
.partners-band { padding: 88px 0; }
.section-head { margin-bottom: 72px; gap: 80px; }
.section-head--single { display: block; }
.roof-system .section-head--single h2 { max-width: 1200px; }
/* "Sys·tem noun" dictionary headword lives inside the section head now (not a
floating opener). Restore its large display size + dark ink over the generic
.section-head p rule (font-size) and the roofing-composed color remap. */
body.roofing-composed .roof-system .section-head--single .rsys-define-word,
.roof-system .section-head--single .rsys-define-word {
margin-top: clamp(56px, 7vw, 104px);
max-width: none;
font-family: var(--font-display);
font-weight: 700;
font-size: clamp(52px, 6.2vw, 82px);
line-height: .92;
letter-spacing: -.025em;
color: var(--ink);
text-align: center;
}
.roof-system .section-head--single .rsys-define-meaning {
margin-top: 28px;
font-family: var(--font-display);
font-size: clamp(24px, 2.55vw, 36px);
line-height: 1.35;
}
@media (max-width: 880px) {
.band, .intro-statement, .ethos-band, .case-study { padding: 80px 0; }
.section-head { margin-bottom: 44px; gap: 28px; }
}
/* ---- Restored light/dark alternation (rhythm was flattened) ---- */
:root { --dark2: #191919; }
.band.soft, .band.cream { background: var(--soft); border-top-color: rgba(237,237,237,.05); }
.band.dark, .cta-section, .site-footer { background: #0a0a0a; }
.ethos-band { background: #0a0a0a; }
body.theme-light .band.dark, body.theme-light .cta-section, body.theme-light .site-footer, body.theme-light .ethos-band { background: #0b0b0a; }
/* ---- Type scale: reference-matched (72/48 desktop, calm body) ---- */
h1 { font-size: clamp(40px, 6.4vw, 72px); line-height: 1.0; }
h2 { font-size: clamp(30px, 4vw, 48px); line-height: 1.02; }
.brand-hero h1 { font-size: clamp(44px, 7vw, 76px); line-height: 0.98; }
.subpage-hero h1, .hero-inner h1, .city-intro h1 { font-size: clamp(38px, 5.4vw, 64px); }
.service-cine h3 { font-size: clamp(32px, 4.6vw, 58px); }
.section-head p { font-size: 17px; line-height: 1.7; color: var(--ink-soft); max-width: 440px; }
.brand-hero .lede, .subpage-hero .lede, .hero-inner p.lead { font-size: clamp(16px, 1.4vw, 19px); max-width: 640px; }
.intro-statement p { font-size: clamp(20px, 2vw, 27px); line-height: 1.45; }
.intro-statement p.fine { font-size: 16px; }
.body-flow { font-size: 17px; }
.service-detail .service-copy p { font-size: 17px; }
.card p, .faq-item div.answer { font-size: 16px; }
.case-study .case-body p { font-size: 17px; }
/* ---- Eyebrow: reference-matched (11.5px / 500 / .22em copper) ---- */
.eyebrow, .eyebrow.dark, .eyebrow.light,
.partners-band .partners-eyebrow, .partner-card .partner-role,
.product-row .product-label span, .service-section .service-label,
.service-cine .service-eyebrow, .service-entry .service-eyebrow,
.card .kicker, .index-tab span, .index-panel .label,
.region .region-label, .case-study .case-meta, .city-stats span {
font-size: 11.5px; font-weight: 500; letter-spacing: 0.22em;
}
/* ---- Numbered service index (reference line-item pattern) ---- */
.line-index { list-style: none; margin: 0; padding: 0; border-bottom: 1px solid var(--line); }
.line-index li { margin: 0; padding: 0; }
.line-index a.line-item {
display: grid;
grid-template-columns: 72px minmax(180px, 240px) 1fr;
gap: 32px;
align-items: baseline;
padding: 30px 0;
transition: padding-left .25s ease;
}
.line-index a.line-item:hover { padding-left: 14px; }
.line-index .li-num {
font-family: var(--font-sans);
font-size: 13px; font-weight: 500; letter-spacing: 0.14em;
color: var(--copper); line-height: 1.6;
}
.line-index .li-title {
font-family: var(--font-display);
font-size: 18px; font-weight: 500; letter-spacing: -0.01em;
color: var(--ink); line-height: 1.25;
font-size-adjust: 0.41;
}
.line-index .li-desc {
font-family: var(--font-sans);
font-size: 15px; line-height: 1.6; color: var(--muted);
max-width: 620px; margin: 0;
}
.line-index a.line-item:hover .li-title { color: var(--copper); }
@media (max-width: 760px) {
.line-index a.line-item { grid-template-columns: 44px 1fr; gap: 10px 18px; padding: 24px 0; }
.line-index .li-desc { grid-column: 2; }
}
/* ---- Materials tradeoff rows ("When it makes sense / The tradeoff") ---- */
.material-rows { border-bottom: 1px solid var(--line); }
.material-row {
display: grid;
gap: 40px;
padding: 44px 0;
align-items: start;
}
@media (max-width: 980px) {
.material-row {
gap: 18px 20px;
padding: 32px 0;
}
}
.material-row .mat-num {
font-family: var(--font-sans);
font-size: 13px; font-weight: 500; letter-spacing: 0.14em;
color: var(--copper); line-height: 1.7;
}
.material-row .mat-name {
font-family: var(--font-display);
font-size: clamp(19px, 1.8vw, 23px); font-weight: 500; letter-spacing: -0.012em;
color: var(--ink); line-height: 1.2;
font-size-adjust: 0.41;
}
.material-row .mat-meta {
display: block;
font-family: var(--font-sans);
font-size: 12px; letter-spacing: 0.08em; color: var(--muted);
margin-top: 12px; line-height: 1.7; font-size-adjust: 0.52;
}
.material-row .mat-meta strong { color: var(--ink-soft); font-weight: 500; }
.material-row .mat-label {
display: block;
font-family: var(--font-sans);
font-weight: 500;
text-transform: uppercase;
color: rgba(237,237,237,0.4);
margin-bottom: 14px;
}
body.theme-light .material-row .mat-label { color: rgba(17,17,17,0.4); }
.material-row .mat-col p { font-size: 15px; line-height: 1.65; color: var(--ink-soft); margin: 0; }
/* ---- Founder pull-quote (reference treatment) ---- */
.pull-quote {
margin: 40px 0 0;
padding: 4px 0 4px 24px;
font-family: var(--font-display);
font-style: normal;
font-weight: 500;
font-size: clamp(17px, 1.6vw, 20px);
line-height: 1.4;
letter-spacing: -0.008em;
color: var(--ink);
font-size-adjust: 0.41;
max-width: 620px;
}
.band.dark .pull-quote, .ethos-band .pull-quote { color: #ededed; }
.pull-quote cite {
display: block;
font-family: var(--font-sans);
font-style: normal;
font-weight: 500;
text-transform: uppercase;
color: var(--muted);
margin-top: 18px;
font-size-adjust: 0.52;
}
/* ---- Scroll reveal: twice as fast, smaller travel ---- */
body.reveal-ready .reveal { opacity: 0; transform: translateY(14px); transition: opacity .4s ease, transform .4s ease; }
body.reveal-ready .reveal.is-visible { opacity: 1; transform: none; }
/* ---- Paragraph rhythm inside editorial splits (reference spacing) ---- */
.split h2 { margin: 16px 0 26px; }
.split p + p { margin-top: 18px; }
/* ---- No italic accents in headings (reference discipline) ---- */
h1 .script-mark, h2 .script-mark, h3 .script-mark,
h1 em, h2 em, h3 em { font-style: normal; color: inherit; }
/* ============================================================
5.1 CONTAINED TRADE IMAGERY (reference image sizing)
Full-bleed cinema bands -> contained editorial splits with a
~500px 4:5 figure and a quiet plate caption, like the founder
figure on the reference homepage. CSS + markup, content intact.
============================================================ */
.service-editorial-stack { background: var(--paper); }
.service-editorial {
padding: 96px 0;
border-top: 1px solid var(--line-soft);
scroll-margin-top: 90px;
overflow: hidden;
}
.service-editorial:nth-of-type(even) { background: var(--soft); }
.media-split {
display: grid;
grid-template-columns: minmax(0, 480px) 1fr;
gap: 80px;
align-items: center;
}
.media-split.reverse { grid-template-columns: 1fr minmax(0, 480px); }
.media-split.reverse .se-figure { order: 2; }
@media (max-width: 880px) {
.media-split, .media-split.reverse { grid-template-columns: 1fr; gap: 36px; }
.media-split.reverse .se-figure { order: 0; }
}
.se-figure { margin: 0; }
.se-figure img {
width: 100%;
aspect-ratio: 4 / 5;
object-fit: cover;
display: block;
filter: saturate(.96);
}
@media (max-width: 880px) { .se-figure img { aspect-ratio: 4 / 3; } }
.se-figure figcaption,
.founder-figure figcaption {
margin-top: 12px;
font-family: var(--font-sans);
font-weight: 500;
text-transform: uppercase;
color: rgba(237,237,237,0.45);
font-size-adjust: 0.52;
}
body.theme-light .se-figure figcaption,
body.theme-light .founder-figure figcaption { color: rgba(17,17,17,0.45); }
.band.dark .founder-figure figcaption { color: rgba(237,237,237,0.45); }
.se-copy .service-eyebrow {
display: block;
font-family: var(--font-sans);
font-size: 11.5px;
font-weight: 500;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--copper);
margin-bottom: 16px;
}
.se-copy h3 {
font-family: var(--font-display);
font-weight: 500;
font-size: clamp(26px, 3vw, 40px);
line-height: 1.05;
letter-spacing: -0.02em;
color: var(--ink);
margin: 0 0 24px;
}
.se-copy h3 em { font-style: normal; color: inherit; }
.se-copy p { font-size: 17px; line-height: 1.7; color: var(--ink-soft); max-width: 580px; }
.se-copy p + p { margin-top: 16px; }
.se-copy p strong { color: var(--ink); }
.se-copy .explore { margin-top: 30px; }
/* Founder figure (reference treatment, used on home + about) */
.founder-figure { margin: 0; }
.founder-figure img {
width: 100%;
aspect-ratio: 4 / 5;
object-fit: cover;
display: block;
}
/* the founder split sits inside .split - suppress the offset-plate styling
that targeted .split .media (the figure replaces .media entirely) */
.split .founder-figure { line-height: normal; }
/* ============================================================
5.2 MOBILE AUDIT FIXES (portrait + landscape)
- Cost & Scope index tabs: clamp to container (390px overflow)
- Intake form rows: min-width-safe columns (landscape overflow)
- Hamburger nav in LANDSCAPE phones (short viewports), not a
full link row across the top
============================================================ */
/* ---- Cost index: never wider than its container ---- */
@media (max-width: 880px) {
.index-block { grid-template-columns: minmax(0, 1fr); }
.index-tabs, .index-panel { min-width: 0; max-width: 100%; }
.index-tab { width: 100%; min-width: 0; box-sizing: border-box; }
.index-tab.is-active { margin-left: 0; padding-left: 16px; }
.index-tab:hover { padding-left: 0; }
}
/* ---- Intake form: columns can shrink, controls never overflow ---- */
.intake-form .row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.intake-form .row.row-single { grid-template-columns: minmax(0, 1fr); }
.intake-form label { min-width: 0; }
.intake-form input, .intake-form select, .intake-form textarea {
width: 100%; max-width: 100%; min-width: 0; box-sizing: border-box;
}
.intake-form input[type="submit"] { width: auto; }
.form-confirmation {
display: none;
margin: 18px 0 0;
padding: 16px 18px;
border: 1px solid var(--gold);
border-radius: 6px;
background: var(--gold-soft);
color: var(--ink);
font-weight: 600;
}
.form-confirmation:target { display: block; }
@media (max-width: 720px) { .intake-form .row { grid-template-columns: minmax(0, 1fr); } }
/* ---- Hamburger nav on landscape phones (short viewport) ----
Same treatment as portrait mobile: brand + CTA + theme toggle +
three-bar toggle, links in a dropdown panel. Applies whenever the
viewport is 520px tall or less, regardless of width. */
@media (min-width: 721px) and (max-height: 520px) {
.nav { padding: 14px 24px; gap: 16px; position: relative; flex-wrap: wrap; }
.js .nav { flex-wrap: nowrap; }
.brand { order: 1; }
.nav-cta { order: 2; margin-left: auto; }
.js .nav-toggle { display: flex; order: 4; }
.nav-links {
order: 4;
display: flex;
position: static;
flex: 1 0 100%;
top: 100%;
left: 0;
right: 0;
flex-direction: column;
gap: 0;
background: var(--paper);
border-bottom: 1px solid var(--line);
box-shadow: var(--shadow-soft);
padding: 4px 24px 14px;
}
.js .nav-links {
display: none;
position: absolute;
flex: 0 1 auto;
}
.js .nav.nav-open .nav-links { display: flex; }
.nav-links a,
.site-header.over-hero .nav-links a {
color: var(--ink-soft);
font-size: 15px;
letter-spacing: .12em;
padding: 13px 2px;
border-bottom: 1px solid var(--line-soft);
}
.nav-links a:last-child { border-bottom: 0; }
.nav-links a::after { display: none; }
}
/* Dropdown menu itself must fit short viewports: scroll inside */
@media (max-height: 520px), (max-width: 720px) {
.nav-links { max-height: calc(100vh - 76px); overflow-y: auto; }
}
/* ---- Cost index stat row: 2x2 on phones, columns can shrink ---- */
@media (max-width: 720px) {
.stat-row div { border-right: 0; padding-right: 8px; min-width: 0; }
.stat-row strong { font-size: 22px; }
}
.stat-row { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 720px) { .stat-row { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* ---- Mobile dropdown links: always theme ink, never the over-hero white
(white-on-white bug when the menu opens over the hero in light theme) ---- */
@media (max-width: 720px), (max-height: 520px) {
.nav-links a,
.site-header.over-hero .nav-links a,
body.theme-light .nav-links a,
body.theme-light .site-header.over-hero .nav-links a {
color: var(--ink-soft);
}
}
/* ============================================================
5.5 PHOTO-OVERLAY CONTRAST GUARANTEE (both themes)
Anything sitting on a photo hero is always light: transparent
buttons with white text + hairline border, white explore links.
The light-theme solid-dark button overrides previously won the
cascade on legacy .hero pages (cost + city pages), producing
black-on-dark-photo CTAs. Appended last; covers every hero type.
============================================================ */
.brand-hero .actions .btn,
.subpage-hero .actions .btn,
.hero .hero-actions .btn,
.hero-actions .btn,
body.theme-light .brand-hero .actions .btn,
body.theme-light .subpage-hero .actions .btn,
body.theme-light .hero .hero-actions .btn,
body.theme-light .hero-actions .btn {
background: transparent;
color: #ffffff;
border: 1px solid rgba(255,255,255,0.65);
text-shadow: 0 1px 4px rgba(0,0,0,0.5);
}
.brand-hero .actions .btn:hover,
.subpage-hero .actions .btn:hover,
.hero .hero-actions .btn:hover,
.hero-actions .btn:hover,
body.theme-light .brand-hero .actions .btn:hover,
body.theme-light .subpage-hero .actions .btn:hover,
body.theme-light .hero .hero-actions .btn:hover,
body.theme-light .hero-actions .btn:hover {
background: rgba(255,255,255,0.14);
border-color: #ffffff;
color: #ffffff;
}
.brand-hero .actions .explore,
.subpage-hero .actions .explore,
.hero-actions .explore,
body.theme-light .brand-hero .actions .explore,
body.theme-light .subpage-hero .actions .explore,
body.theme-light .hero-actions .explore {
color: #ffffff;
border-color: rgba(255,255,255,0.4);
}
/* Hero text (eyebrow/lede/breadcrumb) stays light in light theme too */
body.theme-light .hero-inner,
body.theme-light .hero-inner p,
body.theme-light .hero-inner .lead { color: rgba(255,255,255,0.9); }
body.theme-light .hero-inner h1 { color: #ffffff; }
/* CTA buttons placed mid-page on hero-actions rows that sit on SOLID
surfaces would also match .hero-actions - scope check: only cost.html
uses .hero-actions outside a hero, inside .band.dark (dark surface),
where white-on-dark is correct. */
/* .hero-actions rows that sit on SOLID light-capable surfaces
(.city-intro on city pages, .advisor-shell on roofing) must be
theme-aware, not always-white */
body.theme-light .city-intro .hero-actions .btn,
body.theme-light .advisor-shell .hero-actions .btn {
background: var(--ink);
color: var(--paper);
border: 1px solid var(--ink);
text-shadow: none;
}
body.theme-light .city-intro .hero-actions .btn:hover,
body.theme-light .advisor-shell .hero-actions .btn:hover {
background: #000000; border-color: #000000; color: var(--paper);
}
body.theme-light .city-intro .hero-actions .btn.ghost,
body.theme-light .advisor-shell .hero-actions .btn.ghost {
background: transparent;
}
body.theme-light .city-intro .hero-actions .explore,
body.theme-light .advisor-shell .hero-actions .explore {
color: var(--ink); border-color: var(--line);
}
/* ============================================================
5.6 GHOST BUTTONS: transparent in BOTH themes, readable on
every surface. The light-theme solid-fill rule (body.theme-light
.btn) was bleeding into ghosts, which never reset background -
producing filled, unreadable ghosts on dark bands and the hero.
============================================================ */
body.theme-light .btn.ghost,
body.theme-light .btn.ink-ghost {
background: transparent;
color: var(--ink);
border-color: var(--ink);
}
body.theme-light .btn.ghost:hover,
body.theme-light .btn.ink-ghost:hover {
background: var(--ink);
color: var(--paper);
border-color: var(--ink);
}
/* Light theme: ghosts + explore links on ALWAYS-DARK surfaces are white */
body.theme-light .band.dark .btn.ghost,
body.theme-light .cta-section .btn.ghost,
body.theme-light .ethos-band .btn.ghost,
body.theme-light .calculator .btn.ghost,
body.theme-light .site-footer .btn.ghost {
background: transparent;
color: #ffffff;
border-color: rgba(255,255,255,0.55);
}
body.theme-light .band.dark .btn.ghost:hover,
body.theme-light .cta-section .btn.ghost:hover,
body.theme-light .ethos-band .btn.ghost:hover,
body.theme-light .calculator .btn.ghost:hover,
body.theme-light .site-footer .btn.ghost:hover {
background: #ffffff;
color: #111111;
border-color: #ffffff;
}
body.theme-light .band.dark .explore,
body.theme-light .cta-section .explore,
body.theme-light .ethos-band .explore,
body.theme-light .calculator .explore {
color: #ffffff;
border-color: rgba(255,255,255,0.4);
}
/* Photo heroes: ghosts always white in both themes (highest specificity) */
body.theme-light .brand-hero .actions .btn.ghost,
body.theme-light .subpage-hero .actions .btn.ghost,
body.theme-light .hero .hero-actions .btn.ghost,
body.theme-light .hero-actions .btn.ghost {
background: transparent;
color: #ffffff;
border-color: rgba(255,255,255,0.55);
text-shadow: 0 1px 4px rgba(0,0,0,0.5);
}
/* ...except hero-actions rows on solid light surfaces (city pages, advisor) */
body.theme-light .city-intro .hero-actions .btn.ghost,
body.theme-light .advisor-shell .hero-actions .btn.ghost {
color: var(--ink);
border-color: var(--ink);
text-shadow: none;
}
/* ============================================================
5.7 LUXURY MICRO LAYER
Hover prefetch lives in site.js. This block: cross-document
view transitions, copper selection, scroll-progress hairline,
tabular numerals on all ledger figures. All paint-level -
no markup, content, or schema surface is affected.
============================================================ */
/* Soft cross-page transition (progressive enhancement) */
@view-transition { navigation: auto; }
::view-transition-old(root),
::view-transition-new(root) { animation-duration: .28s; }
@media (prefers-reduced-motion: reduce) {
::view-transition-old(root),
::view-transition-new(root) { animation: none; }
}
/* Copper selection - both themes */
::selection { background: var(--copper); color: #fff; }
::-moz-selection { background: var(--copper); color: #fff; }
/* Scroll-progress hairline (injected by site.js, aria-hidden) */
.scroll-progress {
position: fixed;
top: 0; left: 0;
width: 100%; height: 2px;
background: var(--copper);
transform: scaleX(0);
transform-origin: left center;
z-index: 300;
pointer-events: none;
}
/* Ledger typography: aligned digits wherever numbers carry meaning */
.c-median, .c-n,
.stat-row strong,
.index-panel h3,
.answer-card .figure,
.calc-output .range-out,
.review-summary .big,
.brand-hero .signals strong,
.city-stats strong,
.mat-meta, .mat-row .mat-name + * {
font-variant-numeric: tabular-nums lining-nums;
}
/* Hanging punctuation on pull quotes (Safari; harmless elsewhere) */
.pull-quote { hanging-punctuation: first; }
/* ============================================================
6.0 FIELD STRIP - scroll-linked, draggable photo ledger
(25residences-inspired). All images are real ![]()
elements
with alt text in static HTML - the motion is presentation
only. Coarse pointers and reduced-motion get a native
horizontally scrollable row instead.
============================================================ */
.field-strip { padding: 132px 0 150px; overflow: clip; border-top: 1px solid var(--line-soft); }
.field-strip--bare { padding-top: 24px; border-top: 0; }
/* Asymmetric editorial head - mixed scale, offset placement */
.field-strip-head {
display: grid;
grid-template-columns: minmax(0, 1.4fr) minmax(240px, .6fr);
align-items: end;
gap: 48px;
margin-bottom: 84px;
}
.field-strip-head h2 { font-size: clamp(40px, 5.6vw, 84px); line-height: .98; }
.field-strip-head .fs-note {
font-size: 14px;
color: var(--muted);
max-width: 280px;
justify-self: end;
padding-bottom: 10px;
border-bottom: 1px solid var(--line);
}
@media (max-width: 760px) {
.field-strip-head { grid-template-columns: 1fr; gap: 24px; }
.field-strip-head .fs-note { justify-self: start; }
}
.fs-stage { cursor: grab; max-width: 100%; overflow: hidden; position: relative; }
.field-strip .fs-stage, .field-strip .fs-stage * {
user-select: none;
-webkit-user-select: none;
}
.fs-stage.fs-dragging { cursor: grabbing; }
.fs-track {
display: flex;
gap: clamp(14px, 1.8vw, 28px);
width: max-content;
padding: 0 36px;
will-change: transform;
}
.fs-item { margin: 0; flex: 0 0 auto; width: clamp(240px, 26vw, 420px); }
.fs-item img {
width: 100%; height: auto;
user-select: none;
-webkit-user-drag: none;
pointer-events: none;
}
.fs-item figcaption {
margin-top: 14px;
font-family: var(--font-sans);
text-transform: uppercase;
color: var(--muted);
line-height: 1.7;
}
.fs-item figcaption strong {
display: block;
color: var(--ink);
font-weight: 700;
}
/* staggered vertical offsets - the 25residences rhythm */
/* stagger period (3) divides the 9-item set evenly, so the
pattern is identical across the cloned set - no vertical jump
at the loop seam. */
.fs-item:nth-child(3n+1) { transform: translateY(0); }
.fs-item:nth-child(3n+2) { transform: translateY(52px); }
.fs-item:nth-child(3n+3) { transform: translateY(-30px); }
.fs-track { padding-top: 40px; padding-bottom: 64px; }
.fs-proof-cta {
display: flex;
margin: 14px 36px 0;
}
/* Native fallback: touch devices + reduced motion get a normal scroller */
.fs-native .fs-stage { overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: thin; cursor: auto; }
.fs-native .fs-track { will-change: auto; }
/* ============================================================
6.7 VIDEO TRANSCRIPTS - collapsed by default; one hairline
row of UI. Full text lives in the HTML (and the VideoObject
transcript property) so crawlers and LLMs read it either way.
============================================================ */
.video-transcript {
max-width: 760px;
margin: 18px auto 0;
border-top: 1px solid var(--line);
border-bottom: 1px solid var(--line);
}
.video-transcript summary {
list-style: none;
cursor: pointer;
padding: 13px 0;
font-family: var(--font-sans);
font-size: 11px;
letter-spacing: .18em;
text-transform: uppercase;
font-weight: 700;
color: var(--muted);
display: flex;
justify-content: space-between;
align-items: center;
}
.video-transcript summary::-webkit-details-marker { display: none; }
.video-transcript summary::after { content: "+"; color: var(--accent); font-size: 16px; font-weight: 400; }
.video-transcript[open] summary::after { content: "−"; }
.vt-body { padding: 6px 0 26px; }
.vt-body p { font-size: 15px; line-height: 1.75; color: var(--muted); max-width: 680px; }
.vt-body p + p { margin-top: 14px; }
.transcript-link { max-width: 760px; margin: 14px auto 0; font-size: 13px; color: var(--muted); }
.transcript-link a { color: var(--accent); border-bottom: 1px solid currentColor; }
/* ============================================================
6.9 SERVICE FIGURES - offset plate treatment (from the proof
page case studies), applied to the homepage trade images with
per-section variation so each plate reads slightly different.
============================================================ */
.se-figure {
position: relative;
overflow: visible;
isolation: isolate;
}
.se-figure::before {
content: "";
position: absolute;
inset: 16px -16px -16px 16px; /* peek bottom-right, subtle */
background: #1c1c1c;
border: 1px solid var(--line);
z-index: 0;
}
.se-figure img { position: relative; z-index: 1; }
/* Caption moves onto the photo (bottom-left) so it never sits on the
plate edge. On a photo it is always light, in both themes. */
.service-editorial .se-figure figcaption {
position: absolute;
left: 18px;
bottom: 14px;
z-index: 2;
margin: 0;
color: rgba(255, 255, 255, 0.88);
text-shadow: 0 1px 10px rgba(0, 0, 0, 0.75), 0 0 2px rgba(0, 0, 0, 0.6);
pointer-events: none;
}
body.theme-light .service-editorial .se-figure figcaption { color: rgba(255, 255, 255, 0.88); }
/* Variation 2 - reverse layouts mirror the plate with a copper edge */
.media-split.reverse .se-figure::before {
inset: 16px 16px -16px -16px; /* peek bottom-left, subtle */
background: #181818;
border-color: rgba(196, 123, 79, 0.30);
}
/* Variation 3 - every third service section: deeper offset, patina edge */
.service-editorial:nth-of-type(3n) .se-figure::before {
inset: 20px -20px -20px 20px;
background: #161616;
border-color: var(--line);
}
.service-editorial:nth-of-type(3n) .media-split.reverse .se-figure::before {
inset: 20px 20px -20px -20px;
}
/* Light theme equivalents (mirrors the case-study plate behavior) */
body.theme-light .se-figure::before {
background: #e6e6e6;
}
body.theme-light .media-split.reverse .se-figure::before { background: #ededed; border-color: rgba(196,123,79,0.38); }
body.theme-light .service-editorial:nth-of-type(3n) .se-figure::before { background: #e9e9e9; border-color: rgba(17,17,17,0.14); }
/* Mobile / portrait tablet: keep the offset plate for depth, but use a smaller
peek that stays inside the page gutter so it never causes horizontal scroll. */
@media (max-width: 880px) {
.se-figure::before { inset: 12px -12px -12px 12px; }
.media-split.reverse .se-figure::before { inset: 12px 12px -12px -12px; }
.service-editorial:nth-of-type(3n) .se-figure::before { inset: 12px -12px -12px 12px; }
.service-editorial:nth-of-type(3n) .media-split.reverse .se-figure::before { inset: 12px 12px -12px -12px; }
}
/* ============================================================
7.2 BRAND CONTENT (about page) - story flow, values list,
manifesto prose. Ported from lockeladder.com brand pages.
============================================================ */
.story-flow { max-width: 760px; }
.story-flow h3 {
margin: 56px 0 20px;
font-size: clamp(22px, 2.2vw, 30px);
}
.story-flow h3:first-child { margin-top: 0; }
.story-flow .body-flow + .body-flow { margin-top: 18px; }
.values-list {
list-style: none;
margin: 0 auto;
padding: 0;
max-width: 860px;
counter-reset: none;
}
.values-list li {
display: flex;
align-items: baseline;
gap: 32px;
padding: 26px 0;
border-bottom: 1px solid var(--line);
font-family: var(--font-display);
font-size-adjust: 0.41;
font-weight: 500;
font-size: clamp(24px, 3vw, 40px);
color: var(--ink);
line-height: 1.1;
}
.values-list li:first-child { border-top: 1px solid var(--line); }
.values-list li span {
font-style: normal;
font-weight: 400;
color: var(--accent);
font-size: clamp(16px, 1.6vw, 22px);
min-width: 44px;
}
.manifesto-prose { max-width: 760px; }
.manifesto-prose p { font-size: 17px; line-height: 1.75; color: var(--muted); }
.manifesto-prose p + p { margin-top: 18px; }
.manifesto-prose h3 {
margin: 56px 0 20px;
}
.manifesto-prose .manifesto-mark {
font-family: var(--font-display);
font-size-adjust: 0.41;
font-weight: 500;
color: var(--ink);
}
.manifesto-prose .pull-quote { margin: 44px 0; }
.manifesto-sign {
margin-top: 48px !important;
font-style: normal;
}
.manifesto-sign strong {
display: block;
margin-top: 6px;
font-style: normal;
font-family: var(--font-display);
font-size-adjust: 0.41;
font-weight: 500;
font-size: 22px;
}
/* 7.2b - verbatim brand-document typography */
.brand-doc-title { margin-bottom: 36px; }
.manifesto-kicker {
font-family: var(--font-display);
font-size-adjust: 0.41;
font-size: clamp(18px, 1.8vw, 24px);
color: var(--ink);
margin: -16px 0 44px;
}
.manifesto-credo {
margin-top: 28px !important;
font-family: var(--font-sans);
font-size: 13px !important;
letter-spacing: .14em;
text-transform: uppercase;
color: var(--muted);
}
/* 7.3b - L&L Story stingers: the big lettering from the live page */
.story-stinger {
margin: 72px 0 24px;
font-family: var(--font-serif);
font-size-adjust: 0.41;
font-weight: 700;
font-size: clamp(34px, 4.6vw, 68px);
line-height: 1;
letter-spacing: -.015em;
color: var(--ink);
max-width: 720px;
}
.story-flow .story-stinger:first-child { margin-top: 0; }
/* ============================================================
5.7 PROJECT-PROOF SHOWCASE CAROUSEL (RR off-grid pattern)
First section under the project-proof hero. Slides are the six
case studies; captions crossfade in a panel that masks the next
slide, leaving a peek strip; dots carry a countdown ring that
drives the autoplay. Theme-aware (panel = --paper, ink dots).
Without JS: first image shows, all captions render statically.
============================================================ */
.pp-show { position: relative; background: var(--paper); padding: 0 0 96px; border-bottom: 1px solid var(--line-soft); }
.proof-page #main-content { display: flex; flex-direction: column; }
.proof-page .proof-carousel-hero {
--pp-hero-offset: 112px;
order: -1;
padding-top: var(--pp-hero-offset);
background: transparent !important;
border-bottom: 0;
}
.proof-page .proof-carousel-hero .pp-frame { width: 53.8vw; }
.proof-page .proof-carousel-hero .pp-panel { display: none; background: transparent; }
.pp-frame { position: relative; overflow: hidden; }
.pp-track {
display: flex;
will-change: transform;
transition: transform 1s cubic-bezier(.165,.84,.44,1);
touch-action: pan-y;
user-select: none;
}
.pp-track.no-anim { transition: none; }
.pp-slide { flex: 0 0 53.8vw; cursor: grab; }
.pp-slide > .proof-cap { display: none; }
.pp-slide--clone { pointer-events: none; }
.pp-slide .pp-img {
width: 100%;
height: min(39.5vw, 72vh);
overflow: hidden;
background: var(--soft);
}
.pp-slide img {
width: 100%; height: 100%;
object-fit: cover; display: block;
-webkit-user-drag: none;
pointer-events: none;
filter: grayscale(100%);
}
.pp-slide > img {
height: min(39.5vw, 72vh);
object-fit: cover;
}
.pp-peek {
--pp-peek-slide-width: 53.8vw;
position: absolute;
z-index: 1;
top: var(--pp-hero-offset, 0px);
right: 0;
width: 8vw;
height: min(39.5vw, 72vh);
overflow: hidden;
pointer-events: none;
}
.pp-peek img {
position: absolute;
inset: 0;
width: var(--pp-peek-slide-width);
max-width: none;
height: 100%;
display: block;
object-fit: cover;
filter: grayscale(100%);
transform: translate3d(0, 0, 0);
transition: transform 1s cubic-bezier(.165,.84,.44,1);
}
.pp-peek .pp-peek-next { transform: translate3d(100%, 0, 0); }
.pp-peek.is-transitioning .pp-peek-current { transform: translate3d(-100%, 0, 0); }
.pp-peek.is-transitioning .pp-peek-next { transform: translate3d(0, 0, 0); }
.pp-panel {
position: absolute;
top: 0; bottom: 0;
left: 53.8vw; right: 8vw;
background: var(--paper);
z-index: 2;
pointer-events: none;
display: none; /* armed by JS */
}
.pp-ready .pp-panel { display: block; }
.proof-page .proof-carousel-hero.pp-ready .pp-panel { display: none; }
.pp-captions { padding: 48px 36px 0; max-width: 720px; }
.pp-ready .pp-captions {
position: absolute;
z-index: 3;
top: calc(var(--pp-hero-offset, 0px) + clamp(48px, 7vw, 100px));
left: calc(53.8vw + clamp(32px, 4.4vw, 64px));
right: calc(8vw + clamp(24px, 3vw, 48px));
padding: 0; max-width: none;
}
.pp-cap { padding: 0 0 40px; }
.pp-ready .pp-cap {
position: absolute; inset: 0 auto auto 0; width: 100%;
padding: 0;
opacity: 0;
transition: opacity .5s ease;
pointer-events: none;
}
.pp-ready .pp-cap.is-active { opacity: 1; pointer-events: auto; }
.pp-cap .pp-kicker {
display: block;
font-family: var(--font-sans);
font-size: 11px; font-weight: 500;
letter-spacing: .22em; text-transform: uppercase;
color: var(--copper);
margin-bottom: 16px;
}
.pp-cap h3 {
font-family: var(--font-display);
font-weight: 500;
font-size: clamp(17px, 1.5vw, 22px);
letter-spacing: -0.012em;
line-height: 1.3;
color: var(--ink);
margin: 0;
}
.pp-cap p {
font-size: 14px; line-height: 1.8;
color: var(--muted);
margin: 18px 0 0;
max-width: 430px;
}
.pp-cta {
display: inline-flex;
align-items: center;
gap: 16px;
margin-top: 30px;
color: var(--ink);
font-family: var(--font-sans);
font-size: 11px; font-weight: 500;
letter-spacing: .25em; text-transform: uppercase;
}
.pp-cta .pp-ring {
width: 34px; height: 34px; flex: 0 0 34px;
position: relative;
display: inline-flex; align-items: center; justify-content: center;
color: var(--ink);
}
.pp-cta .pp-ring svg.circ { position: absolute; inset: 0; transform: rotate(-90deg); }
.pp-cta .pp-ring svg.circ circle {
fill: none; stroke: currentColor; stroke-width: 1;
stroke-dasharray: 101; stroke-dashoffset: 0;
transition: stroke-dashoffset .6s cubic-bezier(.165,.84,.44,1);
}
.pp-cta:hover .pp-ring svg.circ circle { stroke-dashoffset: 101; }
.pp-cta .pp-ring svg.arr { width: 14px; height: 14px; }
/* dots: centered under the image column; ring = countdown timer */
.pp-dots {
width: 53.8vw;
display: none;
justify-content: center;
gap: 15px;
margin-top: 30px;
color: var(--ink);
}
.pp-ready .pp-dots { display: flex; }
.pp-dot {
appearance: none; border: 0; background: transparent;
width: 16px; height: 16px; padding: 0;
cursor: pointer;
position: relative;
color: inherit;
display: inline-flex; align-items: center; justify-content: center;
}
.pp-dot i {
width: 6.4px; height: 6.4px;
border-radius: 50%;
background: currentColor;
opacity: .4;
transition: opacity .3s;
}
.pp-dot:hover i { opacity: .75; }
.pp-dot.is-active i { opacity: 1; }
.pp-dot svg { position: absolute; inset: 0; transform: rotate(-90deg); }
.pp-dot svg circle {
fill: none; stroke: currentColor; stroke-width: 1;
stroke-dasharray: 44; stroke-dashoffset: 44;
}
.pp-dot.is-active svg circle { animation: pp-ringdraw 4000ms linear forwards; }
@keyframes pp-ringdraw { to { stroke-dashoffset: 0; } }
/* narrow screens: image full-bleed, dots, caption below */
@media (max-width: 900px) {
.proof-page .proof-carousel-hero { --pp-hero-offset: 88px; }
.proof-page .proof-carousel-hero .pp-frame { width: 91vw; }
.pp-slide { flex-basis: 91vw; }
.pp-slide .pp-img { height: 62vw; }
.pp-slide > img { height: 62vw; }
.pp-peek { --pp-peek-slide-width: 91vw; width: 9vw; height: 62vw; }
.pp-ready .pp-panel { display: none; }
.pp-ready .pp-captions {
position: relative;
inset: auto;
left: 0; right: 0;
min-height: 250px;
margin: 6px 7vw 0;
}
.pp-dots { width: 91vw; margin-top: 26px; }
}
@media (prefers-reduced-motion: reduce) {
.pp-track, .pp-ready .pp-cap { transition: none; }
.pp-dot.is-active svg circle { animation: none; stroke-dashoffset: 0; }
}
/* Material Fit Advisor - honest alternative line */
.rec-alt {
margin-top: 18px;
padding-top: 16px;
border-top: 1px solid var(--line);
font-size: 14px;
color: var(--muted);
font-style: normal;
font-family: var(--font-display); font-size-adjust: 0.41;
}
/* Local-office contact line on city/area page heroes */
.office-line {
margin-top: 18px;
display: flex;
align-items: baseline;
gap: 12px;
flex-wrap: wrap;
font-family: var(--font-sans); font-size-adjust: 0.52;
font-size: 13px;
}
.office-line span {
letter-spacing: 0.22em;
text-transform: uppercase;
font-weight: 600;
color: var(--muted);
}
.office-line a {
font-family: var(--font-display); font-size-adjust: 0.41;
font-size: 20px;
font-weight: 500;
letter-spacing: -0.01em;
color: var(--copper);
}
.office-line a:hover { color: var(--gold-soft); }
/* Material guide: collapsible panels hold full-width comparison tables */
#material-guide .faq-item .answer { max-width: none; padding-bottom: 28px; }
#material-guide .faq-item .answer .table-wrap { margin-top: 4px; }
/* ============================================================
BLOG / JOURNAL
============================================================ */
.blog-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0,1fr));
gap: 48px 32px;
}
@media (max-width: 980px) { .blog-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .blog-grid { grid-template-columns: 1fr; } }
.blog-card { display: flex; flex-direction: column; gap: 16px; }
.blog-card .blog-thumb {
aspect-ratio: 3 / 2;
width: 100%;
object-fit: cover;
filter: grayscale(0.35) contrast(1.02);
transition: filter .4s ease;
}
.blog-card:hover .blog-thumb { filter: grayscale(0); }
.blog-card .blog-date {
font-family: var(--font-sans); font-size-adjust: 0.52;
font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase;
font-weight: 600; color: var(--copper);
}
.blog-card h3 {
font-family: var(--font-display); font-size-adjust: 0.41;
font-weight: 500; font-size: clamp(20px, 2.2vw, 26px);
letter-spacing: -0.01em; line-height: 1.2; color: var(--ink);
}
.blog-card p { font-size: 16px; line-height: 1.6; color: var(--muted); }
.blog-card .arrow { margin-top: 4px; }
/* Article reading column */
.article-body { max-width: 760px; }
.article-body > p {
font-size: 18px; line-height: 1.78; color: var(--ink-soft); margin: 0 0 20px;
}
.article-body > p:first-of-type { font-size: 21px; line-height: 1.7; color: var(--ink); }
.article-body h2 {
font-family: var(--font-display); font-size-adjust: 0.41;
font-weight: 500; font-size: clamp(26px, 3vw, 36px); letter-spacing: -0.015em;
line-height: 1.15; color: var(--ink); margin: 52px 0 16px;
}
.article-body h3 {
font-family: var(--font-display); font-size-adjust: 0.41;
font-weight: 500; font-size: clamp(20px, 2.2vw, 25px); letter-spacing: -0.01em;
line-height: 1.25; color: var(--ink); margin: 36px 0 12px;
}
.article-body ul, .article-body ol { margin: 8px 0 20px; padding-left: 0; list-style: none; }
.article-body ul li, .article-body ol li {
position: relative; padding-left: 28px; margin-bottom: 12px;
font-size: 17px; line-height: 1.65; color: var(--ink-soft);
}
.article-body ul li::before {
content: "–"; position: absolute; left: 0; top: 0; color: var(--copper); font-weight: 600;
}
.article-body ol { counter-reset: a; }
.article-body ol li { counter-increment: a; }
.article-body ol li::before {
content: counter(a); position: absolute; left: 0; top: 0;
font-family: var(--font-display); font-size-adjust: 0.41; color: var(--copper); font-weight: 500;
}
.article-body li strong, .article-body p strong { color: var(--ink); }
.article-body .note { margin: 28px 0; }
.article-meta {
display: flex; gap: 16px; align-items: center; flex-wrap: wrap;
font-family: var(--font-sans); font-size-adjust: 0.52;
font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(255,255,255,0.72);
margin-top: 18px;
}
.article-source { font-size: 13px; color: var(--muted); font-style: normal; }
/* Nav polish: continuous hover target + copper current-page state. */
.nav-links {
align-items: stretch;
cursor: pointer;
}
.nav-links a {
display: inline-flex;
align-items: center;
justify-content: center;
line-height: 1;
white-space: nowrap;
cursor: pointer;
}
.nav-links a * {
cursor: inherit;
}
@media (min-width: 721px) and (min-height: 521px) {
.nav-links {
gap: 0;
margin-inline: -15px;
}
.nav-links a {
padding: 8px 15px;
min-height: 34px;
}
}
.nav-links a:hover,
.nav-links a[aria-current="page"],
.nav-cta[aria-current="page"] {
color: var(--accent);
}
.site-header.over-hero .nav-links a:hover,
.site-header.over-hero .nav-links a[aria-current="page"],
.site-header.over-hero .nav-cta[aria-current="page"] {
color: var(--gold-soft);
}
body.theme-light .nav-links a:hover,
body.theme-light .nav-links a[aria-current="page"],
body.theme-light .nav-cta[aria-current="page"] {
color: var(--accent);
}
@media (max-width: 720px), (max-height: 520px) {
.nav-links a[aria-current="page"],
.site-header.over-hero .nav-links a[aria-current="page"],
body.theme-light .nav-links a[aria-current="page"],
body.theme-light .site-header.over-hero .nav-links a[aria-current="page"] {
color: var(--accent);
}
}
/* Project detail pages */
.project-hero .bg {
filter: contrast(1.06) saturate(.96);
transform-origin: center center;
}
.project-hero .shade {
background:
linear-gradient(180deg, rgba(13,13,13,.74) 0%, rgba(13,13,13,.42) 44%, rgba(13,13,13,.9) 100%),
linear-gradient(90deg, rgba(13,13,13,.76) 0%, rgba(13,13,13,.22) 58%, rgba(13,13,13,.46) 100%);
}
.project-hero .hero-inner {
max-width: 980px;
}
.project-hero h1,
.project-hero .lede {
text-shadow: 0 2px 22px rgba(0,0,0,.55);
}
.project-fact-band {
padding-top: 48px;
padding-bottom: 48px;
}
.project-facts {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
border-top: 1px solid var(--line);
border-left: 1px solid var(--line);
}
.project-facts div {
min-height: 132px;
padding: 24px;
background: rgba(255,255,255,0.025);
}
.project-facts span {
display: block;
margin-bottom: 14px;
font-family: var(--font-sans);
font-size: 11px;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--accent);
}
.project-facts strong {
display: block;
max-width: 26ch;
font-family: var(--font-display);
font-size-adjust: 0.41;
font-weight: 500;
font-size: clamp(18px, 1.8vw, 24px);
line-height: 1.2;
color: var(--ink);
}
.project-story-grid {
display: grid;
max-width: 1120px;
margin-left: auto;
margin-right: auto;
grid-template-columns: minmax(240px, 360px) minmax(0, 720px);
gap: clamp(36px, 6vw, 72px);
align-items: start;
}
.project-side {
position: sticky;
top: 120px;
justify-self: end;
max-width: 360px;
}
.project-side h2 {
font-family: var(--font-display);
font-size-adjust: 0.41;
font-weight: 500;
font-size: clamp(30px, 4vw, 54px);
line-height: 1.05;
letter-spacing: -0.02em;
margin: 0 0 22px;
color: var(--ink);
}
.project-side p:not(.eyebrow) {
color: var(--muted);
font-size: 17px;
line-height: 1.7;
}
.project-article {
max-width: 820px;
}
.project-gallery-band {
background: var(--dark);
padding-top: clamp(124px, 9vw, 168px);
}
.project-gallery-band .section-heading {
max-width: 1240px;
margin-left: auto;
margin-right: auto;
margin-bottom: clamp(42px, 5vw, 68px);
}
.project-gallery-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: clamp(24px, 2.5vw, 32px);
max-width: 1240px;
margin: 0 auto;
}
.project-gallery-grid figure {
margin: 0;
background: var(--soft);
}
.project-gallery-grid img {
width: 100%;
aspect-ratio: 4 / 3;
object-fit: cover;
filter: grayscale(0.24) contrast(1.04);
}
.project-gallery-grid figcaption {
display: flex;
justify-content: space-between;
gap: 18px;
padding: 16px 18px 18px;
color: var(--muted);
font-size: 13px;
line-height: 1.45;
}
.project-gallery-grid figcaption strong {
color: var(--ink);
}
@media (max-width: 900px) {
.project-facts,
.project-story-grid,
.project-gallery-grid {
grid-template-columns: 1fr;
}
.project-gallery-band {
padding-top: 96px;
}
.project-gallery-grid {
gap: 28px;
}
.project-side {
position: static;
}
.project-gallery-grid figcaption {
display: block;
}
.project-gallery-grid figcaption span {
display: block;
margin-top: 4px;
}
}
/* Partner logos shown in place of the brand name (brand stays in img alt + JSON-LD) */
.partner-card .partner-name { display:flex; align-items:center; justify-content:center; min-height:48px; }
.partner-card .partner-logo {
height: 42px;
width: auto;
max-width: 175px;
object-fit: contain;
display: block;
border-radius: 6px;
image-rendering: auto;
transform: translateZ(0);
}
@media (max-width:600px) { .partner-card .partner-logo { height:34px; } }
.partner-grid--window-logos .partner-name,
.partner-grid--siding-logos .partner-name {
min-height: 76px;
}
.partner-grid--window-logos {
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.partner-grid--window-logos .partner-card {
flex: 0 0 calc((100% - 108px) / 4);
min-width: 0;
}
.partner-grid--window-logos .partner-logo,
.partner-grid--siding-logos .partner-logo {
height: 64px;
max-width: 270px;
}
.partner-grid--window-logos .partner-logo--therma-tru {
height: 62px;
max-width: 260px;
}
.partner-grid--window-logos .partner-logo--softlite {
height: 74px;
max-width: 310px;
}
.partner-grid--window-logos .partner-logo--simonton {
height: 46px;
max-width: 220px;
}
.partner-grid--window-logos .partner-logo--waudena {
height: 76px;
max-width: 200px;
}
/* Roofing partner logos: Brava sized close to the Malarkey badges (78px). */
.partner-card .partner-logo--brava { height: 76px; max-width: 200px; }
.partner-card .partner-logo--malarkey { height: 54px; max-width: 230px; }
.partner-card .partner-logo--wilco { height: 82px; max-width: 190px; }
@media (max-width:600px) {
.partner-grid--window-logos .partner-card {
flex-basis: calc((100% - 36px) / 2);
}
.partner-grid--window-logos .partner-name,
.partner-grid--siding-logos .partner-name {
min-height: 62px;
}
.partner-grid--window-logos .partner-logo,
.partner-grid--siding-logos .partner-logo {
height: 52px;
max-width: 220px;
}
.partner-grid--window-logos .partner-logo--therma-tru {
height: 52px;
max-width: 220px;
}
.partner-grid--window-logos .partner-logo--softlite {
height: 60px;
max-width: 255px;
}
.partner-grid--window-logos .partner-logo--simonton {
height: 38px;
max-width: 185px;
}
.partner-grid--window-logos .partner-logo--waudena {
height: 62px;
max-width: 165px;
}
.partner-card .partner-logo--brava { height: 62px; }
.partner-card .partner-logo--malarkey { height: 46px; }
.partner-card .partner-logo--wilco { height: 68px; }
}
@media (max-width:480px) {
.partner-grid--window-logos .partner-card { flex-basis: 100%; }
}
/* Reverse (white) partner logos like Wilco sit on a dark tile so they read in both light and dark mode */
.partner-card .partner-logo--reverse { background:#26231f; padding:8px 12px; border-radius:8px; box-sizing:content-box; }
/* Partner logo trims are baked into the display assets so edges stay even in dark mode. */
body.theme-dark .partner-card .partner-logo:not(.partner-logo--reverse) {
filter: none;
}
/* center the lone 5th partner card under the first row (Windows & Doors) */
.partner-grid--5 .partner-card:last-child { grid-column: 1 / -1; justify-self: center; max-width: 320px; border: 0; }
/* ===== Brava Excellence Award credential band ===== */
.award-band {
background: var(--paper);
padding: 104px 36px;
}
.award-band--cream { background: var(--cream, var(--paper)); }
.award-inner {
max-width: 1100px;
margin: 0 auto;
display: grid;
grid-template-columns: minmax(0, 1.02fr) minmax(0, 1fr);
gap: clamp(36px, 5vw, 76px);
align-items: center;
}
/* Feature treatment (Brava page): make the award the hero of the band */
.award-band--feature { padding: 120px 36px; }
.award-band--feature .award-inner {
max-width: 1240px;
grid-template-columns: minmax(0, 1.62fr) minmax(0, 1fr);
}
.award-figure {
position: relative;
margin: 0;
isolation: isolate;
}
.award-figure::before {
content: "";
position: absolute;
inset: 16px -16px -16px 16px; /* depth plate, matches .se-figure */
background: #1c1c1c;
border: 1px solid var(--line);
z-index: 0;
}
body.theme-light .award-figure::before { background: #d9d1c0; border-color: rgba(97,64,37,.22); }
.award-figure img {
position: relative;
z-index: 1;
display: block;
width: 100%;
height: auto;
}
.award-copy .eyebrow { margin: 0; }
.award-copy h2 {
font-family: var(--font-display);
font-weight: 400;
font-size: clamp(30px, 3.4vw, 48px);
line-height: 1.14;
letter-spacing: -0.005em;
margin: 14px 0 0;
}
.award-copy h2 em { font-style: normal; color: var(--accent); }
.award-copy p {
font-size: 18px;
line-height: 1.7;
margin: 22px 0 0;
color: var(--muted);
max-width: 56ch;
}
.award-copy .explore { margin-top: 26px; display: inline-block; }
@media (max-width: 880px) {
.award-band { padding: 72px 24px; }
.award-inner { grid-template-columns: 1fr; gap: 40px; }
.award-figure::before { inset: 12px -12px -12px 12px; }
}
/* ============ AWARD-WINNING BRAND / WHO WE ARE (home split) ============
Two mirrored portraits of the same man face each other across a cream
field, with the copy set between them. The section wakes to full colour on
hover and each portrait steps forward when pointed at. Inspired by the
on-track / off-track split on landonorris.com. */
.visually-hidden {
position: absolute !important;
width: 1px; height: 1px;
margin: -1px; padding: 0; border: 0;
clip: rect(0 0 0 0); clip-path: inset(50%);
overflow: hidden; white-space: nowrap;
}
/* Reveal wrapper: scopes the award split's sticky pin so it un-sticks the
moment the consult band below has fully scrolled over it (see #who-we-are +
#quick-consult in index.html). position:relative makes this the sticky
containing block; no stacking context so the children's own z-indexes
(award 3, form 4) still compare — the form paints over the pinned award. */
.scroll-reveal { position: relative; }
.brand-split {
/* Pin to the top of the viewport while the consult band scrolls up over it.
Sticks within .scroll-reveal, so it releases once the form has fully
covered it and both scroll away together. */
position: sticky;
top: 0;
isolation: isolate;
/* above #namesake's z-index:2 so the seam-straddling awards paint over
the dark quote band instead of sliding behind it */
z-index: 3;
/* visible so the .bs-float awards can straddle the seam with the namesake
band above; html/body overflow-x:clip catches the portraits' slide-in */
overflow: visible;
background: transparent; /* let the fixed topo field read through */
/* Fill the viewport while pinned so the consult band below starts exactly at
the bottom edge (off-screen) instead of peeking in before the reveal — the
900px cap left a strip of the form showing on taller laptop screens. The
content is grid-centred, so extra height just re-centres it. */
min-height: 100svh;
display: grid;
align-items: center;
padding: 120px 36px;
}
/* Flanking portraits, anchored to the bottom edge, facing centre */
/* .bs-side wrappers carry the scroll-parallax transform (written each frame
by the #who-we-are script); the img inside keeps the hover scale so the
two never fight over one transform. */
.bs-portrait-stage {
position: absolute;
inset: 0;
z-index: 0;
overflow: hidden;
pointer-events: none;
}
.bs-side {
position: absolute;
bottom: 0;
height: clamp(360px, 82%, 860px);
z-index: 0;
will-change: transform;
}
.bs-side--left { left: max(-48px, -3vw); }
.bs-side--right { right: max(-48px, -3vw); }
.bs-portrait {
height: 100%;
width: auto;
filter: grayscale(0.4) contrast(1.02);
opacity: 0.9;
transition: filter .5s ease, opacity .5s ease, transform .6s cubic-bezier(.2,.7,.2,1);
}
.bs-side--left .bs-portrait { transform-origin: bottom left; }
.bs-side--right .bs-portrait { transform-origin: bottom right; }
.brand-split:hover .bs-portrait { filter: grayscale(0) contrast(1.02); opacity: 1; }
.bs-portrait:hover { transform: scale(1.035); }
/* Centred copy. The section has one lead thought and a quieter identity line,
rather than two headlines competing for equal visual weight. */
.bs-center {
position: relative;
z-index: 2;
will-change: transform;
width: 100%;
max-width: 1120px;
margin: 0 auto;
display: block;
}
.bs-award {
position: absolute;
top: clamp(104px, 13vh, 178px);
left: 50%;
z-index: 3;
margin: 0;
white-space: nowrap;
font-family: var(--font-serif);
font-size: clamp(25px, 2.7vw, 40px);
font-weight: 400;
line-height: 1;
color: #050505;
pointer-events: none;
transform: translateX(-50%);
}
.bs-col { will-change: transform, opacity; }
.bs-col--left { grid-area: left; justify-self: center; text-align: center; }
.bs-col--right { grid-area: right; justify-self: center; text-align: center; }
.bs-head {
margin: 0;
font-family: var(--font-display);
font-weight: 700;
font-size: clamp(29px, 3.7vw, 52px);
line-height: .96;
letter-spacing: -0.01em;
color: #050505;
}
/* The lead statement owns the composition; the identity line beneath it
supplies context without asking the eye to compare two large headlines. */
.bs-col--left .bs-head {
font-size: clamp(40px, 5vw, 70px);
font-weight: 700;
line-height: .92;
}
.bs-identity {
margin: 0;
font-family: var(--font-serif);
font-size: clamp(21px, 2vw, 30px);
font-weight: 400;
line-height: 1.1;
color: #514c45;
}
.bs-detail { grid-area: detail; max-width: 1120px; margin: 0 auto; text-align: center; }
.bs-sub {
margin: 0;
font-size: 14px;
line-height: 1.48;
color: #514c45;
}
.bs-sub em { font-style: italic; }
.bs-detail .bs-sub { max-width: 58ch; margin: 0 auto; }
.bs-manifesto {
max-width: 34ch;
margin: 0 auto;
font-family: var(--font-sans);
font-size: clamp(28px, 2.8vw, 42px);
font-weight: 500;
line-height: 1.14;
color: #30363a;
}
.bs-cta {
display: inline-flex;
align-items: center;
margin-top: 20px;
padding-bottom: 4px;
border-bottom: 2px solid currentColor;
font-family: var(--font-sans);
font-size: 13px;
font-weight: 700;
letter-spacing: .02em;
text-transform: none;
color: #050505;
text-decoration: none;
transition: color .2s ease, border-color .2s ease;
}
.bs-cta:hover { color: var(--muted); }
@media (max-width: 880px) {
.brand-split {
/* Same reveal fix as desktop: fill the viewport while pinned so the consult
band starts at the bottom edge (off-screen) instead of peeking in. Padding
trimmed from 156/260 so the centred copy + the now-larger faces fit inside
one viewport height. */
min-height: 100svh;
padding: 120px 22px 190px;
}
/* Larger flanking faces on phones — they read as the two sides of the brand
rather than small accents. */
.bs-side { height: clamp(290px, 66vw, 440px); }
.bs-side--left { left: -24px; }
.bs-side--right { right: -24px; }
.bs-portrait { opacity: .95; filter: grayscale(0); }
.bs-center {
max-width: 36ch;
}
.bs-col, .bs-col--left, .bs-col--right { justify-self: center; text-align: center; max-width: 100%; }
.bs-detail .bs-sub { margin-left: auto; margin-right: auto; }
.bs-cta { justify-content: center; }
}
@media (max-width: 420px) {
.bs-side { height: clamp(250px, 70vw, 320px); }
.brand-split { padding-bottom: 150px; }
}
@media (prefers-reduced-motion: reduce) {
.bs-portrait, .bs-cta { transition: none; }
.bs-portrait:hover { transform: none; }
}
/* ============ AWARD-WINNING MANIFESTO BEATS ============
The manifesto plays in two centred beats on scroll: line A holds, then
crossfades to line B + the CTA. (The consult-card growth + form reveal live
in the "AWARD → CONSULT UNIFIED PIN" block at the end of this file.) The
static defaults below keep a readable scene on narrow screens, reduced-motion
and no-JS. */
/* Default: both manifesto lines stack and read together as the full statement. */
.bs-manifesto-stack { display: block; }
.bs-line { margin: 0; }
.bs-line--b { margin-top: 20px; }
.bs-line--b .bs-manifesto { margin-bottom: 0; }
/* Pin extender — only takes up space in mobile mode (see the mobile block); on
desktop the whole .sr-stage pins instead, so it stays collapsed. */
.sr-spacer { display: none; }
@media (min-width: 981px) {
/* Both lines share one centred grid cell so they crossfade in place; the
block sizes to the taller line so nothing jumps. justify-items:center is
what keeps a max-width'd line horizontally centred (stretch would pin it
to the start — that was line A reading left-aligned). */
html.award-seq-ready .bs-manifesto-stack {
display: grid;
justify-items: center;
align-items: center;
}
html.award-seq-ready .bs-line {
grid-area: 1 / 1;
margin: 0;
justify-self: center;
align-self: center;
text-align: center;
/* No max-width here: the wrapper's `ch` resolves against the tiny inherited
font, not the manifesto font, which made line B far narrower. Let the
shared .bs-manifesto (34ch of the manifesto font) size BOTH lines so they
are exactly the same width. */
}
html.award-seq-ready .bs-line--b .bs-manifesto { margin: 0 auto; }
html.award-seq-ready .bs-line--a { opacity: var(--seq-text-a, 1); }
html.award-seq-ready .bs-line--b { opacity: var(--seq-text-b, 0); }
}
/* MOBILE simplified beats (< 981px): #who-we-are PINS (its base position:sticky)
while the .sr-spacer scrolls; the two lines crossfade in one centred grid cell
over that pinned run. NO growing card — afterwards the consult section slides
up and covers this section (normal flow, higher z-index), the classic reveal.
The controller drives the crossfade from the spacer's rect. */
@media (max-width: 980px) {
html.award-seq-mobile .sr-spacer { display: block; height: 120svh; }
/* The pinned scene must track the LIVE (dynamic) viewport, not the small
viewport: with 100svh the section stays svh-tall, so when the mobile
address bar hides mid-scroll the viewport grows and the bottom-anchored
head cutouts float above the real screen bottom. 100dvh keeps the section
— and therefore the faces at its bottom edge — flush with the screen in
both Chrome and Safari as the bar shows/hides. */
html.award-seq-mobile .brand-split { min-height: 100dvh; }
html.award-seq-mobile .bs-manifesto-stack {
display: grid;
justify-items: center;
align-items: center;
}
html.award-seq-mobile .bs-line {
grid-area: 1 / 1;
margin: 0;
justify-self: center;
align-self: center;
text-align: center;
}
html.award-seq-mobile .bs-line--b .bs-manifesto { margin: 0 auto; }
html.award-seq-mobile .bs-line--a { opacity: var(--seq-text-a, 1); }
html.award-seq-mobile .bs-line--b { opacity: var(--seq-text-b, 0); }
}
/* ============ AMBIENT AWARD FLOATS (inside #who-we-are) ============
The four award cutouts drift around the brand split like the logo field
behind the namesake quote. Each figure is the parallax carrier (the
#who-we-are script writes its transform on scroll); the img inside runs the
idle bob + resting tilt, so the two transforms never collide. They sit
between the portraits (z 0) and the copy (z 2). */
.bs-float {
position: absolute;
margin: 0;
z-index: 1;
pointer-events: none;
will-change: transform;
}
.bs-float img {
display: block;
width: 100%;
height: auto;
filter: drop-shadow(0 18px 30px rgba(0, 0, 0, 0.28));
transform: rotate(var(--rot, 0deg));
animation: award-bob var(--dur, 8s) ease-in-out infinite;
will-change: transform;
}
@keyframes award-bob {
0%, 100% { transform: translateY(calc(var(--bob, 8px) * -1)) rotate(var(--rot, 0deg)); }
50% { transform: translateY(var(--bob, 8px)) rotate(var(--rot, 0deg)); }
}
/* The row rides the border with the namesake quote band above: each figure
anchors to the section's top edge and its img is pulled up by roughly half
its own height (margin-top % resolves against the figure's WIDTH, so the
pull scales with the clamp), leaving the object half in the dark band and
half in this one. The bob then carries it in and out of each. */
.bs-float--brava { width: clamp(96px, 10.5vw, 165px); top: 0; left: 12%; }
.bs-float--angi { width: clamp(78px, 8.4vw, 130px); top: 0; left: 35%; }
.bs-float--nextdoor { width: clamp(80px, 8.6vw, 132px); top: 0; right: 35%; }
.bs-float--indiana { width: clamp(82px, 8.8vw, 136px); top: 0; right: 12%; }
/* half-height pulls, staggered a touch so the row isn't a ruler line
(aspect ratios: brava .855, angi 1.176, nextdoor 1.164, indiana 1.187) */
.bs-float--brava img { margin-top: -40%; }
.bs-float--angi img { margin-top: -64%; }
.bs-float--nextdoor img { margin-top: -52%; }
.bs-float--indiana img { margin-top: -62%; }
/* The Indiana crystal reads as near-white glass; a soft dark aura keeps its
edges defined against the light topo field. */
.bs-float--indiana img { filter: drop-shadow(0 18px 30px rgba(0, 0, 0, 0.42)) drop-shadow(0 0 16px rgba(20, 24, 22, 0.4)); }
@media (prefers-reduced-motion: reduce) {
.bs-float img { animation: none; transform: rotate(var(--rot, 0deg)); }
}
@media (max-width: 880px) {
/* Phones: just the two headline awards, small, riding the same seam with
the quote band; four would crowd it. */
.bs-float--brava { width: 74px; top: 0; left: 6%; }
.bs-float--indiana { width: 54px; top: 0; right: 8%; }
.bs-float--angi, .bs-float--nextdoor { display: none; }
}
/* ===== Mobile homepage hero restructure (phones only) =====
Title sits over the lower half of the vertical video; the meta row drops
below the video on a solid panel; the body paragraph reveals on first
scroll. Wrappers are display:contents by default, so desktop layout, no-JS,
and crawler/desktop renders show the full hero unchanged (SEO/LLM intact). */
.brand-hero .hero-head, .brand-hero .hero-rest { display: contents; }
/* Homepage only (.brand-hero has no .hero-tall); other brand-hero pages
(brava, pella) fall under the generic .hero-tall block below. */
@media (max-width: 720px) {
.brand-hero:not(.hero-tall) { display: block; min-height: 0; background: #0d0d0d; }
/* Video as large as possible; ~10vh peek of the meta panel hints at scroll. */
.brand-hero:not(.hero-tall) .bg, .brand-hero:not(.hero-tall) .shade { height: 90vh; bottom: auto; }
.brand-hero:not(.hero-tall) .inner { padding: 0; max-width: none; margin: 0; }
.brand-hero:not(.hero-tall) .hero-head {
display: flex; flex-direction: column; justify-content: flex-end; gap: 12px;
min-height: 90vh; padding: 0 24px 30px; position: relative; z-index: 2;
}
.brand-hero:not(.hero-tall) .hero-rest {
display: flex; flex-direction: column; gap: 24px; position: relative; z-index: 2;
background: #0d0d0d; padding: 26px 24px 44px;
}
/* Below the video: meta row first, then body copy, then the CTAs — which stay
off the opening screen entirely. */
.brand-hero:not(.hero-tall) .hero-rest .signals { order: 1; margin-top: 0; }
.brand-hero:not(.hero-tall) .hero-rest .lede { order: 2; margin: 0; }
.brand-hero:not(.hero-tall) .hero-rest .actions { order: 3; margin: 0; }
/* Body copy fades in on first scroll. Its space is reserved (no display
toggle), so revealing it never shifts the buttons or anything else. */
html.js .brand-hero:not(.hero-tall) .lede {
opacity: 0; transform: translateY(10px);
transition: opacity .55s ease, transform .55s ease;
}
html.js.hero-revealed .brand-hero:not(.hero-tall) .lede { opacity: 1; transform: none; }
}
/* Reduced motion: show the body immediately, no fade. */
@media (max-width: 720px) and (prefers-reduced-motion: reduce) {
html.js .brand-hero:not(.hero-tall) .lede { opacity: 1; transform: none; transition: none; }
}
/* ===== Mobile hero treatment for inner pages (phones) =====
Mirrors the homepage: a large hero photo with the breadcrumb / eyebrow /
heading pinned to the lower portion, and the body paragraph revealing on
first scroll so the image leads. Applies to every .hero-tall hero (service,
brand, project, cost). The homepage .brand-hero has no .hero-tall, so it
keeps its own video treatment. Body text stays in the DOM — the display
toggle is gated to html.js + phones, so desktop/crawler renders are full. */
@media (max-width: 720px) {
.subpage-hero.hero-tall,
.brand-hero.hero-tall,
.hero.hero-tall { min-height: 86vh; }
/* Content is already bottom-pinned (the hero is display:grid; align-items:end),
so the breadcrumb/eyebrow/heading sit in the lower portion of the taller
image automatically. */
html.js .hero-tall:not(.hero-split) .lede,
html.js .hero-tall:not(.hero-split) .lead { display: none; }
html.js.hero-revealed .hero-tall:not(.hero-split) .lede,
html.js.hero-revealed .hero-tall:not(.hero-split) .lead {
display: block; animation: heroBodyIn .55s ease both;
}
}
@media (max-width: 720px) and (prefers-reduced-motion: reduce) {
html.js .hero-tall:not(.hero-split) .lede,
html.js .hero-tall:not(.hero-split) .lead { display: block; animation: none; }
}
@keyframes heroBodyIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
/* ===== Cost index on mobile: the stats panel is relocated by JS to sit
directly beneath the active category (a dropdown), so the median is on
screen without scrolling past all six tabs. ===== */
@media (max-width: 880px) {
.index-tabs > .index-panel {
gap: 18px;
margin: 4px 0 2px;
padding: 20px 2px 24px;
border-bottom: 1px solid var(--line);
animation: indexPanelIn .28s ease both;
}
.index-tabs > .index-panel .note { margin-top: 0; }
}
@media (max-width: 880px) and (prefers-reduced-motion: reduce) {
.index-tabs > .index-panel { animation: none; }
}
@keyframes indexPanelIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
/* ===== Background texture (decorative, CSS-only, zero assets) =====
.tex-dots — fine blueprint dot-grid for dark editorial/data bands.
Sits behind content, fades at the top/bottom edges, and adapts to theme. */
.tex-dots { position: relative; isolation: isolate; }
.tex-dots::before {
content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
background-image: radial-gradient(currentColor 0.9px, transparent 1.1px);
background-size: 22px 22px;
color: #ededed; opacity: 0.05;
-webkit-mask-image: linear-gradient(180deg, transparent, #000 14%, #000 86%, transparent);
mask-image: linear-gradient(180deg, transparent, #000 14%, #000 86%, transparent);
}
body.theme-light .tex-dots::before { color: #111; opacity: 0.06; }
.tex-dots > * { position: relative; z-index: 1; }
/* ===== Editorial image breaks (long-form pages) =====
.ed-quote — image + pulled-line diptych (the workhorse).
.ed-plate — contained image with an optional caption beneath it.
.ed-break — breakout wrapper used inside the narrow article column. */
.ed-break { width: 100%; }
.article-body .ed-break { margin: 60px 0; }
.ed-quote { display: grid; grid-template-columns: 1.05fr 1fr; align-items: stretch; border-top: 1px solid var(--line); }
.ed-quote .ed-q { display: flex; flex-direction: column; justify-content: center; padding: 40px 48px 40px 0; }
.ed-kicker {
color: var(--accent);
margin-bottom: 22px;
}
.ed-quote blockquote { margin: 0; font-family: var(--font-display); font-weight: 400; font-size: clamp(23px, 2.5vw, 33px); line-height: 1.2; letter-spacing: -0.005em; color: var(--ink, #f3f3f3); }
.ed-quote .ed-media img { display: block; width: 100%; height: 100%; min-height: 340px; object-fit: cover; filter: saturate(0.97); }
.ed-plate {
width: calc(100% - 48px);
max-width: 1200px;
margin: clamp(48px, 7vw, 96px) auto;
}
.article-body .ed-plate { margin-left: auto; margin-right: auto; }
.ed-plate img { display: block; width: 100%; height: auto; max-height: 680px; object-fit: cover; }
.ed-plate .ed-shade { display: none; }
.ed-plate .ed-pt { max-width: 760px; padding: 22px 0 0; }
.ed-plate .ed-num { font-family: var(--font-display); font-size: 13px; letter-spacing: 0.2em; color: var(--accent); display: block; margin-bottom: 12px; }
.ed-plate h3 { font-family: var(--font-display); font-weight: 400; font-size: clamp(26px, 3.4vw, 42px); line-height: 1.08; letter-spacing: -0.01em; color: var(--ink); margin: 0; }
@media (max-width: 820px) {
.article-body .ed-break { margin: 44px 0; }
.ed-quote { grid-template-columns: 1fr; }
.ed-quote .ed-media { order: 1; }
.ed-quote .ed-q { order: 2; padding: 26px 0 4px; }
.ed-quote .ed-media img { min-height: 260px; }
.photo-break,
.ed-plate { width: calc(100% - 32px); }
.ed-plate .ed-pt { padding-top: 18px; }
}
/* ---- Hamburger menu: two links per row, taller tap targets ----
Lays the dropdown links out in a 2-column grid to save vertical space and
leave room for more pages. Each button is a little taller so it stays easy
to tap. Applies to portrait phones, portrait iPads / tablets (up to 959px,
where the nav is still collapsed into the hamburger), and short-viewport
landscape phones. The `.site-header` scope keeps these rules ahead of the
tablet drawer rules above. */
@media (max-width: 959px), (max-height: 520px) {
.nav.nav-open .nav-links,
.js .nav.nav-open .nav-links {
display: grid;
grid-template-columns: 1fr 1fr;
column-gap: 14px;
row-gap: 0;
align-items: stretch;
}
.nav.nav-open .nav-links,
.js .nav.nav-open .nav-links {
position: fixed;
top: 84px;
left: 0 !important;
right: 0 !important;
width: auto !important;
max-width: none;
transform: none;
}
.site-header .nav-links a,
.site-header.over-hero .nav-links a {
min-height: 56px;
padding: 16px 8px;
text-align: center;
border-bottom: 1px solid var(--line-soft);
}
/* Only drop the divider on the final item; the rest read as clean rows. */
.site-header .nav-links a:last-child { border-bottom: 0; }
}
/* ---- Mobile drawer: constant link text size regardless of header state ----
Over the hero, `.site-header.over-hero .nav-links a` (higher specificity)
sized phone drawer links at 15px / .12em. Once scrolled past the hero the
header drops .over-hero and the links fell back to the 14px / .02em base
rule, so the open menu text visibly shrank. Pin both states to the same
size on phones. (Tablets, min-width 600px, keep their larger 20px drawer
text via the iPad nav block above, so this is scoped below 600px.) */
@media (max-width: 599px) {
.site-header .nav-links a,
.site-header.over-hero .nav-links a {
font-size: 15px;
letter-spacing: .12em;
}
}
/* ============ TRADES NAV DROPDOWN ============
Consolidates Roofing / Windows / Siding / Gutters under one "Trades" menu.
Desktop: opens on hover, focus-within, or click (.open). Mobile/iPad: the
panel becomes an inline accordion inside the hamburger drawer. */
.nav-trades { position: relative; display: inline-flex; align-items: center; }
.nav-trades-toggle {
/* Use the `font` shorthand (not the font-family longhand): on macOS Chrome a