/* ============================================================
MDD EXTERIORS — Modern Editorial Design System
Ink + Paper + Clay · Fraunces (display) / Geist (body)
============================================================ */
/* ---------- Tokens ---------- */
:root {
/* Ink & paper — deeper, cleaner for premium contrast */
--ink: #100d0c; /* richer warm near-black */
--ink-soft: #322d29;
--ink-mute: #766e66;
--paper: #f7f4ee; /* clean warm off-white */
--paper-2: #f0ebe2; /* slightly deeper paper */
--paper-card: #fdfbf7;
--line: #e4ddd1; /* hairline on paper */
--line-ink: rgba(255,255,255,0.10);
/* Clay accent (the single confident color) */
--clay: #b4502e; /* architectural terracotta */
--clay-deep: #913c20;
--clay-bright:#cf6037;
--clay-soft: #f0e2d8;
--clay-wash: rgba(180,80,46,0.08);
/* Functional — tighter, more architectural radii (luxury reads crisper) */
--white: #ffffff;
--radius: 14px;
--radius-sm: 9px;
--radius-lg: 20px;
--hair: rgba(16,13,12,0.08); /* hairline on light */
--hair-strong:rgba(16,13,12,0.14);
/* Editorial shadows — soft, large, intentional (layered for realism) */
--sh-sm: 0 1px 2px rgba(19,17,16,0.04), 0 2px 8px rgba(19,17,16,0.05);
--sh-md: 0 2px 6px rgba(19,17,16,0.05), 0 18px 50px -18px rgba(19,17,16,0.26);
--sh-lg: 0 4px 12px rgba(19,17,16,0.06), 0 40px 90px -30px rgba(19,17,16,0.40);
--sh-clay: 0 6px 16px -6px rgba(180,80,46,0.40), 0 20px 50px -16px rgba(180,80,46,0.42);
--sh-glow-clay: 0 0 0 1px rgba(180,80,46,0.10), 0 16px 40px -12px rgba(207,96,55,0.35);
/* Motion easing */
--ease-out: cubic-bezier(.16,1,.3,1);
--ease-spring: cubic-bezier(.34,1.56,.64,1);
/* Unified photographic grade — the "house look" applied to every content image
so the whole page reads as one cohesive, premium photo set. */
--img-grade: saturate(1.08) contrast(1.05) brightness(1.01);
/* Fonts */
--display: 'Fraunces', Georgia, 'Times New Roman', serif;
--sans: 'Geist', system-ui, -apple-system, sans-serif;
--mono: 'Geist Mono', ui-monospace, 'SF Mono', Menlo, monospace;
/* Legacy aliases so shared markup keeps working */
--accent: #b4502e;
--primary: #b4502e;
--dark: #131110;
--text-body: #2b2724;
--text-light: #6f6760;
--border-light: #e2dace;
--heading: #131110;
--accent-light: #cf6037;
--accent-dark: #913c20;
--accent-soft: #f0e2d8;
--text-on-dark: #ece6dd;
--text-muted: #9b938a;
}
/* ============================================================
THEME: SLATE — on-brand deep steel-blue on cool paper.
Activated by . Overrides only the
palette variables; everything else (type, layout, motion) stays.
============================================================ */
html[data-theme="slate"] {
/* Cooler ink & crisp cool-paper */
--ink: #0c1117; /* deep blue-black */
--ink-soft: #28323d;
--ink-mute: #62707d;
--paper: #f3f5f7; /* cool off-white */
--paper-2: #e9edf1;
--paper-card: #fbfcfd;
--line: #dbe1e8;
--line-ink: rgba(255,255,255,0.10);
/* Steel-blue accent (the single confident color) */
--clay: #1f5673; /* deep slate-blue */
--clay-deep: #15435c;
--clay-bright:#2d86b0; /* brighter steel */
--clay-soft: #dce9f0;
--clay-wash: rgba(31,86,115,0.08);
--hair: rgba(12,17,23,0.08);
--hair-strong:rgba(12,17,23,0.14);
/* Shadows re-tinted cool */
--sh-sm: 0 1px 2px rgba(12,17,23,0.05), 0 2px 8px rgba(12,17,23,0.06);
--sh-md: 0 2px 6px rgba(12,17,23,0.06), 0 18px 50px -18px rgba(12,17,23,0.28);
--sh-lg: 0 4px 12px rgba(12,17,23,0.07), 0 40px 90px -30px rgba(12,17,23,0.42);
--sh-clay: 0 6px 16px -6px rgba(31,86,115,0.42), 0 20px 50px -16px rgba(31,86,115,0.44);
--sh-glow-clay: 0 0 0 1px rgba(31,86,115,0.12), 0 16px 40px -12px rgba(45,134,176,0.38);
/* Legacy aliases */
--accent: #1f5673;
--primary: #1f5673;
--dark: #0c1117;
--text-body: #28323d;
--text-light: #62707d;
--border-light: #dbe1e8;
--heading: #0c1117;
--accent-light: #2d86b0;
--accent-dark: #15435c;
--accent-soft: #dce9f0;
--text-on-dark: #e3e9ef;
--text-muted: #8a96a3;
}
/* Smooth cross-fade when switching themes */
html.theme-anim, html.theme-anim body, html.theme-anim *:not(.cursor-dot):not(.cursor-ring) {
transition: background-color .5s var(--ease-out), border-color .5s var(--ease-out), color .5s var(--ease-out) !important;
}
/* ---------- Reset & base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
margin: 0;
font-family: var(--sans);
font-size: 17px;
line-height: 1.7;
font-weight: 400;
letter-spacing: -0.005em;
color: var(--ink-soft);
background: var(--paper);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
font-feature-settings: "kern" 1, "liga" 1, "calt" 1;
overflow-x: hidden;
}
/* Subtle paper grain overlay for atmosphere */
body::before {
content: "";
position: fixed; inset: 0; z-index: 1;
pointer-events: none; opacity: 0.035;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
/* Grain + soft clay glow on dark sections for depth */
.bg-ink, .trust-band, .cta, .hero, .site-footer { position: relative; }
.bg-ink::after, .trust-band::after, .cta-inner::before, .site-footer::after {
content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: 0.22; mix-blend-mode: overlay;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.1' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
}
.bg-ink > *, .trust-band > *, .site-footer > * { position: relative; z-index: 1; }
/* Cinematic atmosphere on dark sections: a soft off-centre light source + edge
vignette so the ink reads as lit depth rather than flat black. Purely additive. */
.bg-ink::before, .showcase::after, .cta-bg::before {
content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
background:
radial-gradient(120% 90% at 78% 8%, rgba(207,96,55,0.10), transparent 46%),
radial-gradient(90% 70% at 18% 100%, rgba(255,255,255,0.045), transparent 55%),
radial-gradient(140% 120% at 50% 50%, transparent 58%, rgba(0,0,0,0.35) 100%);
}
html[data-theme="slate"] .bg-ink::before,
html[data-theme="slate"] .showcase::after,
html[data-theme="slate"] .cta-bg::before {
background:
radial-gradient(120% 90% at 78% 8%, rgba(45,134,176,0.12), transparent 46%),
radial-gradient(90% 70% at 18% 100%, rgba(255,255,255,0.05), transparent 55%),
radial-gradient(140% 120% at 50% 50%, transparent 58%, rgba(0,0,0,0.38) 100%);
}
.showcase, .cta-bg { position: relative; }
.showcase > * { position: relative; z-index: 1; }
/* Showcase grain (its ::after already carries the glow, so grain rides on ::before) */
.showcase::before {
content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: 0.22; mix-blend-mode: overlay;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='s'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.1' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23s)'/%3E%3C/svg%3E");
}
/* Clay hairline seam across the top edge of the ink-dark editorial sections —
the same signature line the trust band and service-page schedule bands carry. */
.manifesto .manifesto-seam, .showcase .showcase-seam {
position:absolute; top:0; left:0; right:0; height:1px; z-index:2; pointer-events:none;
background: linear-gradient(90deg, transparent, rgba(199,107,58,0.55) 50%, transparent);
}
h1, h2, h3, h4 {
font-family: var(--display);
color: var(--ink);
font-weight: 600;
line-height: 1.0;
letter-spacing: -0.02em;
margin: 0 0 0.4em;
font-optical-sizing: auto;
/* Fraunces axes: large optical size + slight softness reads more refined at display sizes */
font-variation-settings: "opsz" 144, "SOFT" 0, "WONK" 0;
font-feature-settings: "kern" 1, "liga" 1, "calt" 1, "ss01" 1;
text-rendering: optimizeLegibility;
}
/* Tighter optical tracking grows with size — large display reads crisper slightly tighter */
.display-xl, .display-lg { font-variation-settings: "opsz" 144, "SOFT" 0; }
.display-md { font-variation-settings: "opsz" 96, "SOFT" 0; }
p { margin: 0 0 1rem; }
/* Figures: tabular + lining for stats/numerals (alignment reads engineered, premium) */
.tnum { font-feature-settings: "tnum" 1, "lnum" 1; font-variant-numeric: tabular-nums lining-nums; letter-spacing: 0; }
/* Old-style figures for body prose where numbers should sit in the text gracefully */
.onum { font-variant-numeric: oldstyle-nums proportional-nums; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; height: auto; display: block; }
.wrap { max-width: 1240px; margin: 0 auto; padding: 0 2rem; }
.container { max-width: 1240px; margin: 0 auto; padding: 0 2rem; }
/* Eyebrow / kicker label — refined editorial small-caps with a hairline index rule */
.kicker {
display: inline-flex; align-items: center; gap: 0.85rem;
font-family: var(--mono);
font-size: 0.72rem; font-weight: 500;
letter-spacing: 0.16em; text-transform: uppercase;
color: var(--clay-deep);
font-feature-settings: "tnum" 1;
}
/* Bracketed section index — the mono ledger voice */
.kicker .kx { color: var(--clay); font-weight: 600; letter-spacing: 0.06em; }
.kicker::before {
content: ""; width: 30px; height: 1px; flex-shrink: 0;
background: var(--clay);
display: inline-block; transform-origin: left;
}
/* animated draw-in when revealed (choreographed) */
.js-reveal .reveal .kicker::before, .js-reveal .reveal-stagger .kicker::before { transform: scaleX(0); transition: transform .8s var(--ease-out) .15s; }
.js-reveal .reveal.in .kicker::before, .js-reveal .reveal-stagger.in .kicker::before { transform: scaleX(1); }
.kicker--light { color: var(--clay-bright); }
.kicker--light::before { background: var(--clay-bright); }
/* Display type scale — more dramatic hierarchy */
.display-xl { font-size: clamp(3.2rem, 9vw, 7.4rem); line-height: 0.9; letter-spacing: -0.04em; font-weight: 600; }
.display-lg { font-size: clamp(2.7rem, 5.8vw, 4.8rem); line-height: 0.96; letter-spacing: -0.035em; font-weight: 600; }
.display-md { font-size: clamp(2.05rem, 3.7vw, 3.2rem); line-height: 1.0; letter-spacing: -0.025em; font-weight: 600; }
.lede { font-size: clamp(1.1rem, 1.5vw, 1.35rem); line-height: 1.66; color: var(--ink-mute); font-weight: 400; letter-spacing: -0.008em; max-width: 56ch; text-wrap: pretty; }
.italic-accent { font-style: italic; color: var(--clay); }
/* Oversized ghost numeral behind major headings */
.ghost-num { position: relative; }
.ghost-num::before {
content: attr(data-num);
position: absolute; top: -0.55em; left: -0.06em; z-index: 0;
font-family: var(--display); font-weight: 600; font-style: italic;
font-size: clamp(7rem, 16vw, 14rem); line-height: 1;
color: var(--clay); opacity: 0.07; pointer-events: none; user-select: none;
letter-spacing: -0.04em;
}
.ghost-num > * { position: relative; z-index: 1; }
.ghost-num--center::before { left: 50%; transform: translateX(-50%); top: -0.5em; }
/* Gradient hairline divider */
.rule-grad { height: 1px; border: 0; background: linear-gradient(90deg, transparent, var(--line) 18%, var(--line) 82%, transparent); margin: 0; }
/* Heading mask-reveal — each line rises from behind a clip (luxury-studio entrance).
Opt-in via .heading-mask; lines wrapped in ….
Fail-safe: visible by default; only animates under .js-reveal. */
.hm-line { display:block; overflow:hidden; padding-bottom: 0.06em; }
.hm-line > span { display:block; }
.js-reveal .heading-mask .hm-line > span { transform: translateY(108%); transition: transform .95s var(--ease-out); }
.js-reveal .heading-mask.in .hm-line > span { transform: none; }
.js-reveal .heading-mask.in .hm-line:nth-child(2) > span { transition-delay: .10s; }
.js-reveal .heading-mask.in .hm-line:nth-child(3) > span { transition-delay: .20s; }
@media (prefers-reduced-motion: reduce) { .js-reveal .heading-mask .hm-line > span { transform:none !important; transition:none !important; } }
/* Section rhythm — luxury spacing (more generous to slow the eye) */
section { position: relative; z-index: 2; }
.sec { padding: clamp(5.5rem, 11vw, 11rem) 0; }
.sec-tight { padding: clamp(3.5rem, 7vw, 6rem) 0; }
.sec-airy { padding: clamp(7rem, 15vw, 14rem) 0; }
/* Continuation modifier — for a section that directly extends the topic of
the section immediately above it (e.g. a second half of the same catalog
grid), so the pair reads as one continuous module instead of two
disconnected sections. Only trims the top offset; bottom rhythm is
untouched. Additive-only, does not alter base .sec-tight. */
.sec-tight--continue { padding-top: 0; }
.bg-ink { background: var(--ink); color: var(--text-on-dark); }
.bg-paper2{ background: var(--paper-2); }
/* Light-section atmosphere: a whisper-soft tonal wash so light sections read as
crafted paper, not flat fill. Top catches light, bottom settles slightly deeper.
Warm tones for the default (Clay) theme. */
.bg-paper2, .materials {
background-image:
radial-gradient(120% 80% at 50% -10%, rgba(255,255,255,0.55), transparent 58%),
linear-gradient(180deg, #f3eee5 0%, #e8e1d4 100%);
}
/* Cool paper tones for the Slate theme */
html[data-theme="slate"] .bg-paper2, html[data-theme="slate"] .materials {
background-image:
radial-gradient(120% 80% at 50% -10%, rgba(255,255,255,0.55), transparent 58%),
linear-gradient(180deg, #edf0f4 0%, #e1e6ec 100%);
}
/* ============================================================
BUTTONS
============================================================ */
.btn {
display: inline-flex; align-items: center; gap: 0.6rem;
font-family: var(--sans); font-weight: 600; font-size: 0.95rem;
padding: 1.05rem 1.8rem; border-radius: 8px; border: 1.5px solid transparent;
cursor: pointer; transition: transform .3s var(--ease-out), background .3s, color .3s;
line-height: 1; letter-spacing: 0.015em;
}
.btn i, .btn svg { font-size: 0.85em; transition: transform .3s; }
.btn:active { transform: translateY(0) scale(0.985); transition-duration: .08s; }
.btn-clay { background: var(--clay); color: #fff; box-shadow: var(--sh-clay); position: relative; overflow: hidden; }
.btn-clay::after { content:""; position:absolute; top:0; left:-130%; width:60%; height:100%; background: linear-gradient(100deg, transparent, rgba(255,255,255,0.35), transparent); transform: skewX(-18deg); transition: left .65s cubic-bezier(.2,.8,.2,1); pointer-events:none; }
.btn-clay:hover { background: var(--clay-deep); transform: translateY(-2px); color:#fff; }
.btn-clay:hover::after { left: 130%; }
.btn-clay:hover i { transform: translateX(3px); }
.btn-ink { background: var(--ink); color: var(--paper); }
.btn-ink:hover { transform: translateY(-2px); background: var(--ink-soft); color: var(--paper); }
.btn-ghost { background: transparent; color: var(--ink); border-color: var(--ink); }
.btn-ghost:hover { background: var(--ink); color: var(--paper); }
.btn-ghost-light { background: transparent; color: var(--paper); border-color: rgba(255,255,255,0.35); }
.btn-ghost-light:hover { background: rgba(255,255,255,0.1); border-color: rgba(255,255,255,0.7); color:#fff; }
/* Legacy aliases used by shared includes */
.btn-primary-amber { display:inline-flex; align-items:center; gap:0.6rem; background:var(--clay); color:#fff; font-family:var(--sans); font-weight:600; font-size:0.96rem; padding:1rem 1.7rem; border-radius:100px; border:none; box-shadow:var(--sh-clay); transition:transform .25s, background .25s; cursor:pointer; }
.btn-primary-amber:hover { background:var(--clay-deep); transform:translateY(-2px); color:#fff; }
.btn-outline-dark { display:inline-flex; align-items:center; gap:0.6rem; background:transparent; color:var(--ink); font-family:var(--sans); font-weight:600; font-size:0.96rem; padding:0.95rem 1.6rem; border-radius:100px; border:1.5px solid var(--ink); transition:background .25s,color .25s; }
.btn-outline-dark:hover { background:var(--ink); color:var(--paper); }
.btn-hero-outline { display:inline-flex; align-items:center; gap:0.6rem; background:transparent; color:var(--paper); font-family:var(--sans); font-weight:600; font-size:0.96rem; padding:0.95rem 1.6rem; border-radius:100px; border:1.5px solid rgba(255,255,255,0.35); transition:background .25s,border-color .25s; }
.btn-hero-outline:hover { background:rgba(255,255,255,0.1); border-color:rgba(255,255,255,0.7); color:#fff; }
/* ============================================================
SCROLL REVEAL
============================================================ */
/* Fail-safe reveals: content is ALWAYS visible by default.
Only when JS confirms support (html.js-reveal) do we hide-then-animate.
This guarantees no blank sections if JS is slow or an observer misfires. */
.reveal { opacity: 1; transform: none; }
/* Unified reveal family: 0.9s, ease-out, 40px travel (matches stagger + variants) */
.js-reveal .reveal { opacity: 0; transform: translateY(40px); transition: opacity .9s var(--ease-out), transform .9s var(--ease-out); will-change: opacity, transform; }
.js-reveal .reveal.in { opacity: 1; transform: none; }
.reveal.d1 { transition-delay: .10s; }
.reveal.d2 { transition-delay: .20s; }
.reveal.d3 { transition-delay: .30s; }
.reveal.d4 { transition-delay: .40s; }
.reveal.d5 { transition-delay: .50s; }
/* legacy */
.sr { opacity:1; transform:none; }
.js-reveal .sr { opacity:0; transform:translateY(30px); transition:opacity .9s cubic-bezier(.16,1,.3,1), transform .9s cubic-bezier(.16,1,.3,1); }
.js-reveal .sr.visible { opacity:1; transform:none; }
.sr-delay-1{transition-delay:.08s;} .sr-delay-2{transition-delay:.16s;} .sr-delay-3{transition-delay:.24s;} .sr-delay-4{transition-delay:.32s;}
/* ---- Crafted motion: staggered children + directional/scale/wipe variants ---- */
/* Stagger: each direct child animates in sequence using --i set by JS.
Larger step (0.13s) + more travel so the cascade is clearly perceptible. */
.js-reveal .reveal-stagger > * { opacity: 0; transform: translateY(40px); transition: opacity .85s var(--ease-out), transform .85s var(--ease-out); will-change: opacity, transform; }
.js-reveal .reveal-stagger.in > * { opacity: 1; transform: none; transition-delay: calc(var(--i, 0) * 0.13s); }
/* Directional reveal variants */
.js-reveal .reveal--left { transform: translateX(-46px); }
.js-reveal .reveal--right { transform: translateX(46px); }
.js-reveal .reveal--scale { transform: scale(0.94); transform-origin: center; }
.js-reveal .reveal--left.in, .js-reveal .reveal--right.in, .js-reveal .reveal--scale.in { transform: none; }
/* Wipe reveal: content masked then revealed (for figures).
The final state ends at a NEGATIVE inset — a lingering inset(0) permanently
clipped the floating .svc-figure-badge that intentionally overflows the
figure box by ~24px. -48px preserves the wipe while leaving badge room. */
.js-reveal .reveal--wipe { clip-path: inset(0 0 100% 0); opacity: 1; transform: none; transition: clip-path 1s var(--ease-out); }
.js-reveal .reveal--wipe.in { clip-path: inset(-48px -48px -48px -48px); }
/* Process connecting line draws in */
.js-reveal .process-row::before { transform: scaleX(0); transform-origin: left; transition: transform 1.4s var(--ease-out) 0.2s; }
.js-reveal .process-row.in::before { transform: scaleX(1); }
/* Hero image slow settle (Ken Burns) on load */
@keyframes heroSettle { from { transform: scale(1.12); } to { transform: scale(1); } }
.hero-bg img { animation: heroSettle 2.4s var(--ease-out) both; }
@media (prefers-reduced-motion: reduce) {
.reveal, .sr, .js-reveal .reveal, .js-reveal .sr,
.js-reveal .reveal-stagger > *, .js-reveal .reveal--left, .js-reveal .reveal--right, .js-reveal .reveal--scale, .js-reveal .reveal--wipe
{ opacity: 1 !important; transform: none !important; clip-path: none !important; transition: none !important; }
.js-reveal .process-row::before { transform: scaleX(1) !important; }
* { scroll-behavior: auto !important; animation: none !important; }
.hero-title .line > span { transform: none !important; animation: none !important; }
.hero-bg img { animation: none !important; }
}
/* ============================================================
TOP BAR + NAV (editorial, on paper)
============================================================ */
.nav-accent-bar { display: none; }
.site-topbar {
background: var(--ink); color: var(--text-on-dark);
font-size: 0.8rem; position: fixed; top: 0; left: 0; right: 0; z-index: 1030;
border-bottom: 1px solid var(--line-ink);
transition: transform .3s ease, opacity .3s ease;
}
/* When scrolled, slide the topbar up out of view so the nav can take the top cleanly */
body.is-scrolled .site-topbar { transform: translateY(-100%); opacity: 0; pointer-events: none; }
.site-topbar .container { display:flex; align-items:center; justify-content:space-between; min-height: 38px; gap:1rem; flex-wrap:wrap; }
.topbar-phone { display:inline-flex; align-items:center; gap:7px; color:var(--paper); font-weight:600; letter-spacing:0.01em; font-variant-numeric: tabular-nums; font-feature-settings:"tnum" 1; }
.nav-cta-phone, .footer-phone-link, .btn { font-variant-numeric: tabular-nums; }
.topbar-phone i { color: var(--clay-bright); }
.topbar-phone:hover { color: var(--clay-bright); }
.topbar-hours { color: var(--text-muted); }
.trust-pill { display:inline-flex; align-items:center; gap:6px; font-size:0.74rem; font-weight:500; color: var(--text-on-dark); }
.trust-pill i { color: var(--clay-bright); }
.site-nav {
position: fixed; top: 38px; left: 0; right: 0; z-index: 1045;
background: rgba(246,242,236,0.82); backdrop-filter: blur(16px) saturate(1.4);
border-bottom: 1px solid var(--line); transition: top .3s, box-shadow .3s, background .3s, border-color .3s;
}
.site-nav.scrolled { top: 0; background: rgba(247,244,238,0.96); box-shadow: 0 1px 0 var(--line), 0 8px 30px -12px rgba(16,13,12,0.18); border-color: var(--line); }
.nav-inner { max-width: 1240px; margin: 0 auto; padding: 0 2rem; height: 76px; display:flex; align-items:center; justify-content:space-between; }
.nav-brand { display:flex; align-items:center; }
.nav-brand img { height: 50px; width:auto; background: var(--ink); padding: 7px 12px; border-radius: 5px; display:block; }
.nav-brand .brand-accent { color: var(--clay); }
.nav-links { display:flex; align-items:center; gap: 0.3rem; }
.nav-links > a, .nav-dropdown-btn {
font-family: var(--sans); font-weight: 600; font-size: 0.8rem; letter-spacing: 0.09em; text-transform: uppercase; color: var(--ink-soft);
padding: 0.6rem 0.9rem; border-radius: 0; background: none; border: none; cursor: pointer;
display:inline-flex; align-items:center; gap:6px; transition: color .2s;
}
.nav-links > a:hover, .nav-dropdown-btn:hover { color: var(--ink); }
.dd-chevron { width: 13px; height: 13px; transition: transform .25s; }
.nav-dropdown-wrap { position: relative; }
.nav-dropdown-wrap.open .dd-chevron { transform: rotate(180deg); }
.nav-services-panel, .nav-areas-panel {
position:absolute; top: calc(100% + 14px); left: 50%; transform: translateX(-50%) translateY(8px);
background: var(--paper-card); border: 1px solid var(--line); border-radius: 18px; box-shadow: var(--sh-md);
padding: 14px; min-width: 360px; opacity:0; visibility:hidden; transition: opacity .25s, transform .25s, visibility .25s; z-index: 100;
}
.nav-dropdown-wrap.open .nav-services-panel, .nav-dropdown-wrap.open .nav-areas-panel { opacity:1; visibility:visible; transform: translateX(-50%) translateY(0); }
.services-panel-grid { display:grid; grid-template-columns: 1fr 1fr; gap: 4px; }
.service-panel-item { display:flex; align-items:center; gap:11px; padding:11px 12px; border-radius:12px; font-size:0.9rem; font-weight:500; color:var(--ink-soft); transition: background .18s, color .18s; }
.service-panel-item:hover { background: var(--clay-wash); color: var(--clay-deep); }
.service-panel-icon { display:inline-flex; align-items:center; justify-content:center; width:34px; height:34px; border-radius:9px; background: var(--clay-soft); color: var(--clay); font-size:0.9rem; flex-shrink:0; }
/* Nested flyout for pillar services with sub-pages (Roof Repair, Roof Maintenance, Specialty Roofing) */
.service-panel-item-wrap { position:relative; }
.service-panel-item--has-sub { position:relative; }
.service-sub-chevron { margin-left:auto; font-size:0.62rem; color: var(--ink-mute); transition: transform .2s, color .2s; }
.service-panel-item-wrap:hover .service-sub-chevron, .service-panel-item-wrap.open .service-sub-chevron { color: var(--clay); transform: translateX(2px); }
.service-subflyout {
position:absolute; top:0; left: calc(100% + 10px);
background: var(--paper-card); border:1px solid var(--line); border-radius:14px; box-shadow: var(--sh-md);
padding:8px; min-width:220px; display:flex; flex-direction:column; gap:2px;
opacity:0; visibility:hidden; transform: translateX(6px); transition: opacity .2s, transform .2s, visibility .2s; z-index:101;
}
.service-panel-item-wrap:hover .service-subflyout, .service-panel-item-wrap.open .service-subflyout { opacity:1; visibility:visible; transform: translateX(0); }
.service-subflyout a { display:block; padding:9px 12px; border-radius:9px; font-size:0.86rem; font-weight:500; color: var(--ink-soft); transition: background .18s, color .18s; }
.service-subflyout a:hover { background: var(--clay-wash); color: var(--clay-deep); }
/* Flip to the left edge when the panel is near the right side of the viewport */
.service-panel-item-wrap.flyout-left .service-subflyout { left:auto; right: calc(100% + 10px); transform: translateX(-6px); }
.service-panel-item-wrap.flyout-left:hover .service-subflyout, .service-panel-item-wrap.flyout-left.open .service-subflyout { transform: translateX(0); }
.nav-areas-panel { min-width: 320px; }
.areas-panel-header { display:flex; align-items:center; gap:10px; padding:6px 10px 12px; border-bottom:1px solid var(--line); margin-bottom:10px; }
.areas-panel-title { display:block; font-family:var(--display); font-weight:600; font-size:1rem; color:var(--ink); }
.areas-panel-sub { display:block; font-size:0.76rem; color:var(--ink-mute); }
.areas-grid { display:grid; grid-template-columns:1fr 1fr; gap:3px; }
.area-pill { display:flex; align-items:center; gap:7px; padding:8px 11px; border-radius:9px; font-size:0.84rem; font-weight:500; color:var(--ink-soft); transition:background .18s,color .18s; }
.area-pill:hover { background: var(--clay-wash); color: var(--clay-deep); }
.nav-cta-phone { display:inline-flex; align-items:center; gap:8px; background: var(--ink); color: var(--paper); font-weight:600; font-size:0.9rem; padding:0.7rem 1.25rem; border-radius:100px; margin-left:0.5rem; transition: background .25s, transform .25s; }
.nav-cta-phone:hover { background: var(--clay); color:#fff; transform: translateY(-1px); }
.nav-toggle { display:none; flex-direction:column; gap:5px; background:none; border:none; cursor:pointer; padding:6px; }
.nav-toggle span { width:26px; height:2px; background: var(--ink); border-radius:3px; transition: transform .3s, opacity .3s; }
.nav-toggle.open span:nth-child(1){ transform: translateY(7px) rotate(45deg);}
.nav-toggle.open span:nth-child(2){ opacity:0;}
.nav-toggle.open span:nth-child(3){ transform: translateY(-7px) rotate(-45deg);}
.nav-mobile-menu { display:none; flex-direction:column; gap:2px; background: var(--paper-card); padding: 0 2rem; border-top:1px solid transparent; max-height:0; overflow:hidden; transition: max-height .35s ease, padding .35s ease, border-color .35s ease; }
.nav-mobile-menu.open { max-height: 88vh; overflow-y:auto; padding: 1rem 2rem 1.6rem; border-top-color: var(--line); }
.nav-mobile-menu > a { color: var(--ink-soft); font-weight:500; padding:12px 8px; border-radius:10px; }
.nav-mobile-menu > a:hover { background: var(--clay-wash); color: var(--clay-deep); }
.mobile-section-toggle { text-align:left; background:none; border:none; color:var(--ink-soft); font-family:var(--sans); font-weight:600; padding:12px 8px; border-radius:10px; cursor:pointer; width:100%; display:flex; align-items:center; justify-content:space-between; }
.mobile-submenu { display:none; flex-direction:column; padding-left:14px; border-left:2px solid var(--clay); margin:2px 0 6px 8px; }
.mobile-submenu.open { display:flex; }
.mobile-submenu a { color:var(--ink-mute); font-size:0.9rem; padding:8px; }
.mobile-submenu a:hover { color: var(--clay); }
/* Second-level nested accordion (e.g. Roof Repair's own sub-services) */
.mobile-subsection-toggle { text-align:left; background:none; border:none; color: var(--ink-mute); font-family:var(--sans); font-weight:500; font-size:0.82rem; letter-spacing:0.01em; padding:8px; border-radius:8px; cursor:pointer; width:100%; display:flex; align-items:center; justify-content:space-between; margin-top:2px; }
.mobile-subsubmenu { display:none; flex-direction:column; padding-left:12px; border-left:2px solid var(--line); margin:0 0 4px 8px; }
.mobile-subsubmenu.open { display:flex; }
.mobile-subsubmenu a { color:var(--ink-mute); font-size:0.84rem; padding:7px 8px; }
.mobile-subsubmenu a:hover { color: var(--clay); }
.nav-mobile-cta { display:inline-flex; align-items:center; justify-content:center; background:var(--clay); color:#fff; font-weight:600; padding:14px; border-radius:100px; margin-top:12px; }
.page-body { padding-top: 114px; }
.sticky-call-btn { position:fixed; bottom:18px; right:18px; z-index:1100; display:none; align-items:center; gap:9px; background: var(--clay); color:#fff; font-weight:600; font-size:0.9rem; padding:13px 18px; border-radius:8px; box-shadow: var(--sh-clay); }
.sticky-call-btn .call-icon { animation: ring 1.8s ease-in-out infinite; }
@keyframes ring { 0%,100%{transform:rotate(0);} 10%,30%{transform:rotate(-12deg);} 20%,40%{transform:rotate(12deg);} 50%{transform:rotate(0);} }
/* ============================================================
HERO
============================================================ */
.hero {
position: relative; min-height: clamp(640px, 92vh, 1000px);
display: flex; align-items: flex-end;
color: var(--paper); overflow: hidden;
background: var(--ink);
}
.hero-bg { position:absolute; top:-12%; left:0; right:0; bottom:-12%; z-index:0; overflow:hidden; will-change: transform; }
.hero-bg img, .hero-bg video { width:100%; height:100%; object-fit: cover; will-change: transform; }
.hero-bg-img { filter: var(--img-grade); }
/* Poster still (video's own ~1s frame) — instant paint, same grade as the video,
so there is no black flash and the crossfade to the live clip is invisible. */
.hero-bg-poster { position:absolute; inset:0; z-index:0; width:100%; height:100%; object-fit:cover; filter: var(--img-grade) brightness(0.62) saturate(0.8) contrast(1.06); }
/* Video layer sits above the poster, fades in only when it can play (.is-ready) */
/* Bright daytime footage needs its own grade: darker, calmer, slightly punchier —
keeps the headline zone readable on any frame without burying the video. */
.hero-bg-video { position:absolute; inset:0; z-index:1; opacity:0; transition: opacity 1.2s var(--ease-out); filter: var(--img-grade) brightness(0.62) saturate(0.8) contrast(1.06); }
.hero-bg-video.is-ready { opacity:1; }
.hero-bg::after { content:""; position:absolute; inset:0; background:
linear-gradient(180deg, rgba(15,12,11,0.60) 0%, rgba(15,12,11,0.30) 34%, rgba(15,12,11,0.46) 72%, rgba(12,10,9,0.90) 100%),
linear-gradient(100deg, rgba(12,10,9,0.96) 0%, rgba(14,11,10,0.80) 38%, rgba(19,17,16,0.22) 66%, rgba(19,17,16,0.05) 100%),
radial-gradient(85% 75% at 25% 70%, rgba(10,9,8,0.40), transparent 60%),
radial-gradient(150% 120% at 55% 35%, transparent 55%, rgba(10,9,8,0.42) 100%),
radial-gradient(120% 80% at 80% 28%, rgba(207,96,55,0.14), transparent 56%); }
.hero-inner { position: relative; z-index: 2; width: 100%; max-width: 1240px; margin: 0 auto; padding: 0 2rem clamp(3rem, 6vw, 5.5rem); will-change: transform, opacity; }
.hero-grid { display: grid; grid-template-columns: 1.45fr 0.55fr; gap: 3rem; align-items: end; }
.hero-kicker { color: var(--clay-bright); margin-bottom: 1.4rem; text-shadow: 0 1px 3px rgba(12,10,9,0.8), 0 2px 14px rgba(12,10,9,0.55); }
.hero-kicker::before { background: var(--clay-bright); }
.hero-title { color: var(--paper); margin: 0 0 1.4rem; font-variation-settings: "opsz" 144, "SOFT" 0, "WONK" 0; }
.hero-title .line { display:block; overflow:hidden; }
.hero-title .line > span { display:block; transform: translateY(105%); animation: heroRise .95s cubic-bezier(.16,1,.3,1) forwards; }
.hero-title .line:nth-child(1) > span { animation-delay: .15s; }
.hero-title .line:nth-child(2) > span { animation-delay: .28s; }
.hero-title .line:nth-child(3) > span { animation-delay: .41s; }
@keyframes heroRise { to { transform: none; } }
.hero-sub { max-width: 540px; color: rgba(250,247,242,0.94); font-size: clamp(1.02rem, 1.4vw, 1.2rem); margin-bottom: 2rem; opacity:0; animation: fadeUp .9s ease .6s forwards; text-shadow: 0 1px 3px rgba(12,10,9,0.6), 0 2px 12px rgba(12,10,9,0.4); }
.hero-actions { display:flex; gap: 0.9rem; flex-wrap:wrap; align-items:center; opacity:0; animation: fadeUp .9s ease .75s forwards; }
@keyframes fadeUp { from { opacity:0; transform: translateY(16px);} to {opacity:1; transform:none;} }
/* Hero stat rail (right column) — glass panel, clearly legible */
.hero-rail { display:flex; flex-direction:column; gap:0; padding: 1.6rem 1.5rem; border-radius: 18px;
background: rgba(19,17,16,0.42); backdrop-filter: blur(10px) saturate(1.2);
border: 1px solid rgba(255,255,255,0.14); box-shadow: 0 20px 50px -20px rgba(0,0,0,0.6);
opacity:0; animation: fadeUp .9s ease .9s forwards; }
.hero-stat { padding: 0.95rem 0; border-bottom: 1px solid rgba(255,255,255,0.10); display:flex; align-items:center; gap:0.9rem; }
.hero-stat:first-child { padding-top: 0; }
.hero-stat:last-child { border-bottom: none; padding-bottom: 0; }
.hero-stat .hs-ic { width:38px; height:38px; flex-shrink:0; border-radius:10px; background: rgba(207,96,55,0.18); color: var(--clay-bright); display:flex; align-items:center; justify-content:center; font-size:0.95rem; }
.hero-stat .num { font-family: var(--display); font-size: 1.25rem; font-weight:600; color:#fff; line-height:1.05; font-variant-numeric: tabular-nums lining-nums; font-feature-settings:"tnum" 1,"lnum" 1; }
.hero-stat .lbl { font-size: 0.8rem; color: rgba(246,242,236,0.78); margin-top: 1px; letter-spacing:0.01em; }
.hero-scroll { position:absolute; bottom:1.6rem; left:50%; transform:translateX(-50%); z-index:3; color:rgba(246,242,236,0.7); font-size:0.72rem; letter-spacing:0.2em; text-transform:uppercase; display:flex; flex-direction:column; align-items:center; gap:8px; opacity:0; animation: fadeUp 1s ease 1.1s forwards; }
.hero-scroll::after { content:""; width:1px; height:34px; background:linear-gradient(var(--clay-bright), transparent); animation: scrollLine 2s ease-in-out infinite; }
@keyframes scrollLine { 0%,100%{ opacity:.3; transform:scaleY(.6);} 50%{ opacity:1; transform:scaleY(1);} }
/* ============================================================
INTRO / POSITIONING STATEMENT
============================================================ */
.intro { padding: clamp(4.5rem, 9vw, 8rem) 0; }
.intro-grid { display:grid; grid-template-columns: 1.1fr 0.9fr; gap: clamp(2rem, 5vw, 5rem); align-items: start; }
.intro-statement { font-family: var(--display); font-weight:500; font-size: clamp(1.7rem, 3vw, 2.6rem); line-height: 1.12; letter-spacing:-0.02em; color: var(--ink); }
.intro-statement .italic-accent { font-style: italic; }
.intro-body p { color: var(--ink-mute); font-size: 1.05rem; }
.intro-body .btn { margin-top: 0.8rem; }
/* Overlapping image card */
.intro-figure { position: relative; margin-top: 2rem; }
.intro-figure img { border-radius: var(--radius); box-shadow: var(--sh-md); width: 100%; }
.intro-figure .float-card {
position:absolute; bottom: -28px; left: -28px;
background: var(--paper-card); border:1px solid var(--line); border-radius: var(--radius-sm);
box-shadow: var(--sh-md); padding: 1.1rem 1.3rem; display:flex; align-items:center; gap:0.9rem;
}
.float-card .fc-num { font-family:var(--display); font-size:2rem; font-weight:600; color: var(--clay); line-height:1; }
.float-card .fc-lbl { font-size:0.82rem; color: var(--ink-mute); line-height:1.3; }
/* ============================================================
BENTO SERVICES
============================================================ */
/* Section header — stronger, editorial */
.bento-head { display:grid; grid-template-columns: 1.3fr 1fr; align-items:end; gap: 2rem 3rem; margin-bottom: 3.2rem; }
.bento-head-title { font-size: clamp(2.4rem, 4.6vw, 4rem); }
.bento-head-aside { padding-bottom: 0.4rem; }
.bento-count { display:inline-flex; align-items:center; gap:0.55rem; font-family:var(--sans); font-size:0.74rem; font-weight:600; letter-spacing:0.18em; text-transform:uppercase; color: var(--clay-deep); margin-bottom:0.9rem; }
.bento-count::before { content:""; width:22px; height:1.5px; background: var(--clay); }
/* Rows can grow: always-visible descriptions must never be clipped */
.bento { display:grid; grid-template-columns: repeat(6, 1fr); grid-auto-rows: minmax(224px, auto); gap: 1.15rem; }
.bento-card { position: relative; border-radius: var(--radius-sm); overflow:hidden; background: var(--ink); color: var(--paper); display:flex; flex-direction:column; justify-content:flex-end; padding: 1.8rem; isolation:isolate; transition: transform .5s var(--ease-out); }
.bento-card:hover { transform: translateY(-4px); }
.bento-card img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:-2; transition: transform 1.2s var(--ease-out); filter: var(--img-grade); }
/* Consistent, richer overlay so text is always legible regardless of photo */
.bento-card::after { content:""; position:absolute; inset:0; z-index:-1; background: linear-gradient(180deg, rgba(16,13,12,0) 0%, rgba(16,13,12,0.04) 42%, rgba(16,13,12,0.52) 70%, rgba(16,13,12,0.92) 100%); transition: opacity .45s; }
.bento-card::before { content:""; position:absolute; inset:0; z-index:5; border-radius: inherit; box-shadow: inset 0 0 0 1px rgba(255,255,255,0.12); pointer-events:none; transition: box-shadow .4s; }
.bento-card:hover img { transform: scale(1.06); }
.bento-card:hover::before { box-shadow: inset 0 0 0 1px rgba(255,255,255,0.18), inset 0 -4px 0 0 var(--clay); }
/* Number — refined corner detail with a hairline */
.bento-card .b-num { position:absolute; top:1.5rem; left:1.7rem; z-index:6; display:flex; align-items:center; gap:0.6rem; font-family:var(--display); font-size:0.9rem; font-weight:600; color:#fff; letter-spacing:0.04em; }
.bento-card .b-num::after { content:""; width:26px; height:1px; background: rgba(255,255,255,0.5); }
/* Icon — cleaner glass chip */
.bento-card .b-icon { position:absolute; top:1.5rem; right:1.6rem; z-index:6; width:40px; height:40px; border-radius:0; background: transparent; display:flex; align-items:center; justify-content:center; color:rgba(255,255,255,0.85); font-size:1rem; border:1px solid rgba(255,255,255,0.28); transition: background .3s, color .3s, border-color .3s; }
.bento-card:hover .b-icon { background: var(--clay); border-color: var(--clay); color:#fff; }
.bento-card h3 { font-size: 1.55rem; color:#fff; margin: 0; letter-spacing:-0.01em; text-shadow: 0 2px 16px rgba(0,0,0,0.5); transition: transform .45s var(--ease-out); }
/* Description hidden by default, revealed on hover (title lifts to make room) */
.bento-card p { font-size: 0.92rem; color: rgba(255,255,255,0.92); margin: 0; max-width: 94%; line-height:1.5; text-shadow: 0 1px 10px rgba(0,0,0,0.5);
max-height: 0; opacity: 0; overflow: hidden; transform: translateY(6px);
transition: max-height .5s var(--ease-out), opacity .4s var(--ease-out), transform .5s var(--ease-out), margin .5s var(--ease-out); }
.bento-card:hover p { max-height: 8em; opacity: 1; transform: none; margin-top: 0.55rem; }
/* Explore — flat editorial link with a drawn underline, no pill */
.bento-card .b-link { margin-top: 1rem; display:inline-flex; align-items:center; gap:9px; font-weight:600; font-size:0.78rem; letter-spacing:0.08em; text-transform:uppercase; color:#fff;
width:fit-content; padding-bottom:4px; position:relative; transition: gap .3s var(--ease-out); }
.bento-card .b-link::after { content:""; position:absolute; left:0; bottom:0; height:1px; width:100%; background:rgba(255,255,255,0.4); transform:scaleX(0); transform-origin:left; transition: transform .4s var(--ease-out), background .3s; }
.bento-card:hover .b-link { gap: 13px; }
.bento-card:hover .b-link::after { transform:scaleX(1); background:var(--clay-bright); }
.bento-card .b-link i { transition: transform .3s; font-size:0.7rem; }
.bento-card:hover .b-link i { transform: translateX(3px); }
/* feature spans */
/* 6 services on a 6-col grid: every row fills completely (no trailing gaps).
Row 1: feature(3) + tall(3). Rows 2–3: four cards each span 3 → 2 per row. */
.bento-feature { grid-column: span 3; grid-row: span 2; }
.bento-tall { grid-column: span 3; grid-row: span 2; }
.bento-wide { grid-column: span 3; grid-row: span 1; }
.bento-sm { grid-column: span 3; grid-row: span 1; }
.bento-feature h3, .bento-tall h3 { font-size: clamp(1.9rem, 2.6vw, 2.6rem); }
/* Large tiles: show description always — max-height:none so copy is never truncated */
.bento-feature p, .bento-tall p { max-height: none; opacity: 1; transform: none; margin-top: 0.6rem; max-width: 78%; font-size: 1rem; }
/* ============================================================
BEFORE / AFTER SLIDER
============================================================ */
.ba-wrap { position: relative; border-radius: var(--radius-lg); overflow:hidden; box-shadow: var(--sh-lg); aspect-ratio: 16/9; user-select:none; cursor: ew-resize; background: var(--ink); touch-action: none; outline: none; }
.ba-wrap:focus-visible { box-shadow: var(--sh-lg), 0 0 0 3px var(--clay); }
.ba-img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; -webkit-user-drag:none; }
.ba-after { z-index:1; }
.ba-before { z-index:2; clip-path: inset(0 50% 0 0); filter: grayscale(0.6) brightness(0.66) contrast(0.95) sepia(0.22); }
.ba-tag { position:absolute; bottom:1.2rem; z-index:3; font-size:0.72rem; font-weight:600; letter-spacing:0.16em; text-transform:uppercase; color:#fff; background: rgba(19,17,16,0.62); backdrop-filter: blur(8px); padding:8px 16px; border-radius:100px; border:1px solid rgba(255,255,255,0.18); }
.ba-tag.before { left: 1.2rem; }
.ba-tag.after { right: 1.2rem; }
.ba-handle { position:absolute; top:0; bottom:0; left:50%; width:3px; background:#fff; z-index:4; transform: translateX(-50%); box-shadow: 0 0 14px rgba(0,0,0,0.4); pointer-events:none; }
.ba-grip { position:absolute; top:50%; left:50%; transform: translate(-50%,-50%); width:54px; height:54px; border-radius:50%; background:#fff; box-shadow: 0 6px 20px rgba(0,0,0,0.35); display:flex; align-items:center; justify-content:center; color: var(--clay); font-size:1.05rem; border: 3px solid #fff; }
.ba-grip::before { content:"\f337"; font-family:"Font Awesome 6 Free"; font-weight:900; }
/* gentle idle hint so users know it's draggable */
@keyframes baHint { 0%,100%{ transform: translate(-50%,-50%) scale(1);} 50%{ transform: translate(-50%,-50%) scale(1.08);} }
.ba-grip { animation: baHint 2.4s ease-in-out infinite; }
.ba-wrap:hover .ba-grip, .ba-wrap:focus .ba-grip { animation: none; }
/* ============================================================
PROCESS — editorial numbered, connected by rule
============================================================ */
.process-row { display:grid; grid-template-columns: repeat(3, 1fr); gap: 0; position:relative; }
.process-row--4 { grid-template-columns: repeat(4, 1fr); }
.process-row--4 .p-step { padding: 0 1rem; }
.process-row--4 .p-step p { max-width: 230px; }
/* (connecting line removed — steps now use individual top hairlines) */
.process-row { gap: 0 1.4rem; }
.process-row::before { display:none; }
/* Editorial numbered step: top hairline, big index, left-aligned (matches craft/materials) */
.p-step { text-align:left; padding: 1.6rem 1.5rem 0 0; position:relative; z-index:1; border-top: 1px solid var(--line); transition: transform .35s var(--ease-out); }
/* slide content right via transform — no per-frame layout reflow */
.p-step:hover { transform: translateX(0.6rem); }
.p-num { display:block; margin: 0 0 1rem; background:none; border:none; border-radius:0; width:auto; height:auto; box-shadow:none;
font-family:var(--display); font-size:2.4rem; font-weight:600; line-height:1; color: var(--clay);
font-variant-numeric: tabular-nums lining-nums; letter-spacing:-0.02em; transition: color .35s; }
.p-step:hover .p-num { color: var(--clay-deep); }
.p-step h3 { font-size: 1.3rem; margin-bottom: 0.5rem; letter-spacing:-0.01em; }
.p-step p { color: var(--ink-mute); font-size: 0.95rem; max-width: 260px; margin: 0; }
/* Icon chip + numeral pair heading each step (matches the craft-item-ic language on service pages) */
.p-head { display:flex; align-items:center; justify-content:space-between; margin-bottom: 1.1rem; }
.p-head .p-num { margin: 0; }
.p-ic { width:46px; height:46px; border-radius:50%; background: var(--clay-wash); color: var(--clay-deep); display:flex; align-items:center; justify-content:center; font-size:1.02rem; flex-shrink:0;
transition: background .35s var(--ease-out), color .35s var(--ease-out), transform .35s var(--ease-out); }
.p-step:hover .p-ic { background: var(--clay); color:#fff; transform: translateY(-3px) rotate(-6deg); }
/* ============================================================
HERO MICROPROOF BADGES
============================================================ */
.hero-proof { display:flex; align-items:center; gap: 1.2rem; flex-wrap:wrap; margin-top: 1.8rem; opacity:0; animation: fadeUp .9s ease .9s forwards; }
/* Frosted-glass chips: the badge art needs a light backing to stay legible, but a
translucent blur + hairline ring sits into the hero photo far better than the
old opaque white rectangles. */
.hero-proof img { height: 54px; width:auto; background: rgba(255,255,255,0.88); border-radius:12px; padding:6px 9px;
border: 1px solid rgba(255,255,255,0.45); box-shadow: 0 8px 24px -12px rgba(0,0,0,0.45);
backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
transition: transform .35s var(--ease-out), background .35s; }
.hero-proof img:hover { transform: translateY(-3px); background: rgba(255,255,255,0.97); }
.hero-proof .proof-text { color: rgba(246,242,236,0.78); font-size:0.82rem; line-height:1.3; max-width: 160px; }
.hero-proof .proof-text strong { color:#fff; display:block; font-weight:600; }
/* ============================================================
MANUFACTURER MARQUEE
============================================================ */
.mfr-strip { position:relative; border-top:1px solid var(--line); border-bottom:1px solid var(--line); overflow:hidden; padding: 2rem 0; background: var(--paper-card); }
.mfr-head { text-align:center; font-family: var(--mono); font-size:0.7rem; font-weight:500; letter-spacing:0.16em; text-transform:uppercase; color: var(--ink-mute); margin-bottom: 1.5rem; }
/* Seamless marquee: 4 identical groups, animate by exactly one group (-25%).
Track is always ~4x viewport wide, so it never empties. */
.mfr-track { display:flex; width:max-content; animation: mfrScroll 40s linear infinite; }
.mfr-group { display:flex; align-items:center; gap: 4.5rem; padding-right: 4.5rem; flex:0 0 auto; }
.mfr-strip:hover .mfr-track { animation-play-state: paused; }
.mfr-track img { height: 58px; width:auto; max-width: 160px; object-fit:contain; filter: grayscale(1) contrast(1.15) opacity(0.82); transition: filter .35s, opacity .35s; }
.mfr-track img:hover { filter: grayscale(0) opacity(1); }
/* subtle fade at strip edges so logos enter/exit gracefully */
.mfr-strip::before, .mfr-strip::after { content:""; position:absolute; top:0; bottom:0; width:110px; z-index:2; pointer-events:none; }
.mfr-strip::before { left:0; background: linear-gradient(90deg, var(--paper-card), transparent); }
.mfr-strip::after { right:0; background: linear-gradient(270deg, var(--paper-card), transparent); }
@keyframes mfrScroll { from { transform: translateX(0);} to { transform: translateX(-25%);} }
@media (prefers-reduced-motion: reduce) { .mfr-track { animation: none; } }
/* ============================================================
TRUST / CERTS / FINANCING BAND
============================================================ */
.trust-band { border-top:1px solid var(--line-ink); border-bottom:1px solid var(--line-ink);
/* fine pinstripe weave — print texture on the inverted band */
background-image: repeating-linear-gradient(-45deg, rgba(247,244,238,0.022) 0 1px, transparent 1px 9px); }
/* hairline of clay light at the very top edge — a quiet seam of warmth */
.trust-band::before { content:""; position:absolute; top:0; left:0; right:0; height:1px; background: linear-gradient(90deg, transparent, rgba(199,107,58,0.55) 50%, transparent); z-index:2; pointer-events:none; }
.trust-band .wrap { display:grid; grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr; align-items:center; gap: 1.5rem; padding-top: 3.1rem; padding-bottom: 3.1rem; }
.trust-item { display:flex; align-items:center; gap: 1.05rem; min-width:0; }
.trust-item img { flex-shrink:0; transition: transform .4s var(--ease-out); }
.trust-item:hover img { transform: translateY(-2px); }
/* credential plate — warm off-white, soft framed, not a stark white sticker */
.ti-badge { background:#faf7f1; border-radius:9px; padding:6px 9px; box-shadow: inset 0 0 0 1px rgba(255,255,255,0.5), 0 6px 16px -8px rgba(0,0,0,0.45); }
.trust-item .ti-ic { font-size:1.7rem; color: var(--clay-bright); width:44px; text-align:center; flex-shrink:0; transition: transform .4s var(--ease-out); }
.trust-item:hover .ti-ic { transform: translateY(-2px); }
.trust-item .ti-t { font-family:var(--display); font-size:1.12rem; color:#fff; font-weight:600; line-height:1.12; letter-spacing:-0.01em; }
.trust-item .ti-s { font-size:0.78rem; color: rgba(246,242,236,0.55); margin-top:3px; letter-spacing:0.005em; line-height:1.35; }
/* taller hairline dividers that fade at the ends — gallery, not toolbar */
.trust-divider { width:1px; height:58px; background: linear-gradient(180deg, transparent, var(--line-ink) 18%, var(--line-ink) 82%, transparent); justify-self:center; }
.finance-grid { display:grid; grid-template-columns: 1.1fr 0.9fr; gap: clamp(2rem,5vw,4.5rem); align-items:center; }
.finance-points { display:grid; gap: 1rem; margin-top: 1.6rem; }
.finance-point { display:flex; gap:0.9rem; align-items:flex-start; }
.finance-point .fp-ic { flex-shrink:0; width:40px; height:40px; border-radius:11px; background: var(--clay-soft); color: var(--clay); display:flex; align-items:center; justify-content:center; font-size:0.95rem; }
.finance-point h4 { font-size:1.1rem; margin-bottom:0.2rem; }
.finance-point p { color: var(--ink-mute); font-size:0.93rem; margin:0; }
.finance-figure { border-radius: var(--radius); overflow:hidden; box-shadow: var(--sh-md); position:relative; }
/* matted-frame inset hairline — gallery-print detail */
.finance-figure::after, .about-figure::after { content:""; position:absolute; inset:10px; border:1px solid rgba(255,255,255,0.22); border-radius: calc(var(--radius) - 6px); pointer-events:none; z-index:2; mix-blend-mode: overlay; }
.about-figure { position:relative; }
.finance-figure img { width:100%; aspect-ratio: 4/5; object-fit:cover; filter: var(--img-grade); }
/* ============================================================
TESTIMONIALS — magazine pull-quote
============================================================ */
.quotes { display:grid; grid-template-columns: 1.3fr 1fr; gap: 2rem; align-items: start; }
.quote-lead { display:flex; flex-direction:column; justify-content:center; }
.quote-lead { background: var(--paper-card); border:1px solid var(--line); border-radius: var(--radius-sm); padding: clamp(2.4rem,4vw,3.6rem); position:relative; overflow:hidden; box-shadow: var(--sh-sm); transition: transform .5s var(--ease-out), border-color .5s var(--ease-out); will-change: transform; }
.quote-lead:hover { transform: translateY(-4px); border-color: color-mix(in srgb, var(--clay) 35%, var(--line)); }
/* Top accent bar that grows on hover — same accent language as the minis'
left bar (the old scaled corner-tick detached from the rounded corner and
read as a rendering glitch). */
.quote-lead::before { content:""; position:absolute; top:0; left:0; right:0; height:2px; background: var(--clay); opacity:0.55; transform: scaleX(0.34); transform-origin: left; transition: transform .6s var(--ease-out), opacity .5s var(--ease-out); }
.quote-lead:hover::before { transform: scaleX(1); opacity:0.9; }
.quote-lead .qmark { font-family:var(--display); font-style:italic; font-size: 8.5rem; line-height: 0.5; color: var(--clay); opacity: 0.14; position:absolute; top: 1.8rem; left: clamp(1.4rem,3vw,2.6rem); pointer-events:none; }
.quote-lead blockquote { font-family:var(--display); font-weight:500; font-size: clamp(1.6rem, 2.4vw, 2.25rem); line-height:1.28; color: var(--ink); margin: 0.5rem 0 1.8rem; letter-spacing:-0.015em; position:relative; font-variation-settings: "opsz" 72, "SOFT" 30; text-wrap: pretty; }
/* (inline opening quote removed — it doubled with the oversized ghost mark) */
.quote-meta { display:flex; align-items:center; gap: 0.9rem; }
.quote-avatar { width:48px; height:48px; border-radius:50%; object-fit:cover; }
.quote-name { font-weight:600; color: var(--ink); }
.quote-source { font-size:0.82rem; color: var(--ink-mute); display:flex; align-items:center; gap:5px; }
.quote-source i { color:#ea4335; }
.quote-stack { display:flex; flex-direction:column; justify-content:center; }
/* Refined editorial mini-reviews: hairline-separated rows, generous breathing room,
a quiet clay rule that grows on hover. */
.quote-mini { padding: 1.5rem 0 1.5rem 1.4rem; border-top: 1px solid var(--line); position: relative; }
.quote-mini:first-child { border-top: none; padding-top: 0.2rem; }
.quote-mini::before { content:""; position:absolute; left:0; top: 1.5rem; bottom: 1.5rem; width: 2px; background: var(--clay); transform: scaleY(0.4); transform-origin: top; opacity: 0.5; }
.quote-mini:first-child::before { top: 0.2rem; }
.quote-mini .stars { color: var(--clay); letter-spacing:3px; font-size:0.82rem; margin-bottom:0.6rem; }
.quote-mini p { font-family: var(--display); font-weight: 400; font-size:1.08rem; color: var(--ink); margin-bottom:0.7rem; line-height:1.45; letter-spacing:-0.01em; font-variation-settings:"opsz" 40, "SOFT" 20; max-width: 34ch; }
.quote-mini .qm-name { font-family: var(--sans); font-weight:600; font-size:0.78rem; letter-spacing:0.04em; text-transform:uppercase; color: var(--ink-mute); display:inline-flex; align-items:center; gap:7px; }
.quote-mini .qm-name i { color:#4285f4; font-size:0.85rem; }
/* ============================================================
ABOUT — overlapping editorial
============================================================ */
.about-grid { display:grid; grid-template-columns: 0.95fr 1.05fr; gap: clamp(2rem,5vw,5rem); align-items:center; }
.about-figure { position:relative; }
.about-figure > img { border-radius: var(--radius); box-shadow: var(--sh-md); width:100%; aspect-ratio: 4/5; object-fit:cover; filter: var(--img-grade); }
.about-figure .badge-float { position:absolute; top:-22px; right:-22px; width: 116px; height:116px; border-radius:50%; background: var(--clay); color:#fff; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; box-shadow: var(--sh-clay); transform: rotate(-8deg); }
.badge-float .bf-num { font-family:var(--display); font-size:1.8rem; font-weight:600; line-height:1; }
.badge-float .bf-lbl { font-size:0.66rem; letter-spacing:0.08em; text-transform:uppercase; margin-top:3px; }
.about-tags { display:flex; flex-wrap:wrap; gap:0.6rem; margin: 1.4rem 0; }
.about-tag { font-size:0.82rem; font-weight:500; padding:7px 15px; border-radius:100px; border:1px solid var(--line); color: var(--ink-soft); }
.about-tag.is-clay { background: var(--clay-wash); border-color: transparent; color: var(--clay-deep); }
/* ============================================================
SERVICE AREAS
============================================================ */
.areas-pills { display:flex; flex-wrap:wrap; gap: 0.7rem; }
/* Editorial place-cards: a quiet clay seam at the left edge that fills on hover,
the pin reads as an index mark rather than decoration. */
.area-badge { display:inline-flex; align-items:center; gap:10px; background: var(--paper-card); border:1px solid var(--line); border-radius:11px; padding: 0.78rem 1.35rem 0.78rem 1.1rem; font-size:0.92rem; font-weight:500; color: var(--ink-soft); position:relative; overflow:hidden; transition: border-color .35s var(--ease-out), color .35s var(--ease-out), transform .35s var(--ease-out), box-shadow .35s var(--ease-out); }
.area-badge::before { content:""; position:absolute; top:0; bottom:0; left:0; width:3px; background: var(--clay); transform: scaleY(0.34); transform-origin:center; opacity:0.55; transition: transform .35s var(--ease-out), opacity .35s var(--ease-out); }
.area-badge:hover { border-color: var(--clay); color: var(--clay-deep); transform: translateY(-3px); box-shadow: 0 14px 28px -16px rgba(199,107,58,0.5); }
.area-badge:hover::before { transform: scaleY(1); opacity:1; }
.area-badge--featured { background: var(--ink); color: var(--paper); border-color: var(--ink); padding-left:1.35rem; }
.area-badge--featured::before { display:none; }
.area-badge--featured:hover { color: var(--paper); box-shadow: 0 14px 28px -16px rgba(0,0,0,0.5); }
.area-badge i { color: var(--clay); font-size:0.72rem; transition: transform .35s var(--ease-out); }
.area-badge:hover i { transform: translateY(-1px) scale(1.08); }
/* Dark variant — for badge lists sitting on bg-ink sections (replaces repeated inline style
overrides); keeps hover text legible against a near-black background instead of the default
clay-deep hover color, which reads too dark on ink. */
.area-badge--dark { background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.14); color: #fff; }
.area-badge--dark::before { background: var(--clay-bright); }
.area-badge--dark i { color: var(--clay-bright); }
.area-badge--dark:hover { border-color: var(--clay-bright); color: #fff; background: rgba(255,255,255,0.1); box-shadow: 0 14px 28px -16px rgba(0,0,0,0.6); }
/* ============================================================
FAQ
============================================================ */
.faq-list { max-width: 860px; margin: 0 auto; }
.faq-item { border-top: 1px solid var(--line); }
.faq-item:last-child { border-bottom: 1px solid var(--line); }
.faq-q { width:100%; text-align:left; background:none; border:none; cursor:pointer; padding: 1.5rem 0; font-family: var(--display); font-weight:600; font-size: clamp(1.1rem, 1.6vw, 1.4rem); color: var(--ink); display:flex; align-items:center; justify-content:space-between; gap:1.5rem; transition: color .2s; }
.faq-q:hover { color: var(--clay-deep); }
.faq-chev { flex-shrink:0; width:34px; height:34px; border-radius:50%; border:1.5px solid var(--line); display:flex; align-items:center; justify-content:center; color:var(--clay); transition: transform .35s, background .3s, border-color .3s; font-size:0.8rem; }
.faq-item.open .faq-chev { transform: rotate(45deg); background: var(--clay); color:#fff; border-color: var(--clay); }
.faq-a { max-height:0; overflow:hidden; transition: max-height .4s cubic-bezier(.16,1,.3,1); }
.faq-a-inner { padding: 0 0 1.6rem; color: var(--ink-mute); font-size: 1rem; line-height:1.7; max-width: 90%; }
/* ============================================================
CLOSING CTA
============================================================ */
.cta { position:relative; overflow:hidden; color: var(--paper); }
.cta-bg { position:absolute; inset:0; z-index:0; }
.cta-bg img { width:100%; height:100%; object-fit:cover; }
.cta-bg::after { content:""; position:absolute; inset:0; background: linear-gradient(120deg, rgba(19,17,16,0.92) 0%, rgba(19,17,16,0.62) 100%); }
.cta-inner { position:relative; z-index:2; max-width:1240px; margin:0 auto; padding: clamp(4.5rem,9vw,8rem) 2rem; }
.cta-grid { display:grid; grid-template-columns: 1fr 0.82fr; gap: clamp(2rem,5vw,4.5rem); align-items:center; }
.cta h2 { color: var(--paper); }
.cta p { color: rgba(246,242,236,0.82); max-width: 460px; }
/* ============================================================
QUOTE FORM — premium editorial redesign
(also neutralizes legacy style.css #quote_form yellow border)
============================================================ */
/* Kill legacy yellow-border / pill styling that leaks in from style.css */
#quote_form, #quote_form2 {
border: none !important;
border-bottom: none !important;
border-radius: 0 !important;
padding: 0 !important;
margin: 0 !important;
background: transparent !important;
color: inherit !important;
}
/* Premium estimate card — editorial, layered, with a refined accent edge */
.hero-form-float, .cta-form { background: var(--paper-card); border:1px solid var(--line); border-radius: var(--radius-sm); box-shadow: var(--sh-lg), inset 0 1px 0 rgba(255,255,255,0.65); overflow:hidden; position:relative; }
/* full-width accent rule along the very top of the card */
.hero-form-float::before, .cta-form::before { content:""; position:absolute; top:0; left:0; right:0; height:3px; background: linear-gradient(90deg, var(--clay-deep), var(--clay-bright) 50%, var(--clay-deep)); z-index:3; }
.qform-outer { width:100%; }
.qform-wrap { padding: 2.3rem 2.1rem 2rem; }
/* Header — editorial: eyebrow + display title + trust line, icon as a quiet accent */
.qform-header { display:flex; align-items:flex-start; gap:15px; margin-bottom:1.7rem; padding-bottom: 1.5rem; border-bottom: 1px solid var(--line); position:relative; }
.qform-icon { width:52px; height:52px; border-radius:14px; flex-shrink:0; display:flex; align-items:center; justify-content:center; background: linear-gradient(140deg, var(--clay-bright), var(--clay-deep)); color:#fff; font-size:1.25rem; box-shadow: 0 10px 24px -8px var(--clay-glow); position:relative; }
.qform-icon::after { content:""; position:absolute; inset:0; border-radius:inherit; box-shadow: inset 0 1px 0 rgba(255,255,255,0.35); }
.qform-header-text { display:flex; flex-direction:column; padding-top:1px; }
.qform-title { display:block; font-family: var(--display); font-weight:600; font-size:1.6rem; color: var(--ink); line-height:1.0; letter-spacing:-0.02em; }
.qform-subtitle { display:flex; align-items:center; gap:6px; font-size:0.84rem; color: var(--ink-mute); margin-top:6px; letter-spacing:0.01em; }
/* Fields — refined labels (small-caps tracked) + larger, calmer inputs */
.qform-field { margin-bottom: 1.2rem; }
.qform-label { display:block; font-size:0.7rem; font-weight:700; color: var(--ink-mute); margin-bottom:8px; letter-spacing:0.12em; text-transform:uppercase; }
.qform-label i { color: var(--clay); margin-right:5px; font-size:0.78rem; }
.qform-input-wrap { position:relative; display:flex; align-items:center; }
.qform-input-icon { position:absolute; left:16px; color: var(--clay); font-size:0.9rem; pointer-events:none; z-index:1; opacity:0.8; transition: opacity .2s; }
.qform-textarea-icon { top:16px; }
.qform-input { width:100%; padding: 1rem 1rem 1rem 2.8rem; border:1.5px solid var(--line); border-radius:12px; font-size:1rem; font-family: var(--sans); color: var(--ink); background: var(--paper); transition: border-color .2s, box-shadow .2s, background .2s; }
.qform-input::placeholder { color: rgba(111,103,96,0.48); }
.qform-input-wrap:hover .qform-input { border-color: #d4c9ba; }
.qform-input:focus { outline:none; border-color: var(--clay); box-shadow: 0 0 0 4px var(--clay-wash); background:#fff; }
.qform-input:focus + .qform-input-icon, .qform-input-wrap:focus-within .qform-input-icon { opacity:1; }
.qform-textarea { resize:vertical; min-height: 88px; padding-top:1rem; line-height:1.55; }
/* Captcha — math problem as a distinct chip, answer field beside it */
.qform-captcha { margin-bottom: 1.4rem; }
.qform-math-row { display:flex; align-items:center; gap:12px; }
.qform-math-problem { display:flex; align-items:center; gap:8px; background: var(--paper-2); border:1.5px solid var(--line); border-radius:12px; padding:7px 9px 7px 11px; flex-shrink:0; }
.qform-math-img { height:34px !important; width:auto; display:block; border:0 !important; border-radius:6px !important; background:transparent; cursor:pointer; }
.qform-math-refresh { width:34px; height:34px; border-radius:9px; flex-shrink:0; border:0; background: var(--paper-card); color: var(--ink-mute); cursor:pointer; transition: background .18s, color .18s, transform .4s var(--ease-spring); display:flex; align-items:center; justify-content:center; font-size:0.8rem; }
.qform-math-refresh:hover { background: var(--clay-wash); color: var(--clay); }
.qform-math-refresh:active { transform: rotate(180deg); }
.qform-answer-wrap { flex:1; min-width:0; }
/* Submit — confident, full-width, with arrow + shine */
.qform-submit { width:100%; display:inline-flex; align-items:center; justify-content:center; gap:10px; background: var(--clay); color:#fff; font-family: var(--sans); font-weight:600; font-size:1.05rem; letter-spacing:0.01em; padding:1.15rem; border:none; border-radius:13px; cursor:pointer; box-shadow: var(--sh-clay); transition: transform .25s, background .25s, box-shadow .25s; margin-top:6px; position:relative; overflow:hidden; }
.qform-submit::after { content:""; position:absolute; top:0; left:-130%; width:55%; height:100%; background: linear-gradient(100deg, transparent, rgba(255,255,255,0.34), transparent); transform: skewX(-18deg); transition: left .7s cubic-bezier(.2,.8,.2,1); }
.qform-submit:hover:not(:disabled) { transform: translateY(-2px); background: var(--clay-deep); box-shadow: 0 16px 36px -10px var(--clay-glow); }
.qform-submit:hover:not(:disabled)::after { left:140%; }
.qform-submit:active:not(:disabled) { transform: translateY(0) scale(0.99); transition-duration:.08s; }
.qform-submit:disabled { opacity:0.7; cursor:not-allowed; }
.cta .qform-disclaimer,
.qform-disclaimer { text-align:center; font-size:0.78rem; color: var(--ink-mute); margin: 15px 0 0; display:flex; align-items:center; justify-content:center; gap:6px; letter-spacing:0.01em; }
.qform-disclaimer i { color: var(--clay); }
/* Success */
.qform-success { text-align:center; padding: 1.5rem 0.5rem; }
.qform-success-icon { width:60px; height:60px; border-radius:50%; margin:0 auto 1rem; display:flex; align-items:center; justify-content:center; background:#e7f2e7; color:#2f7d34; font-size:1.8rem; font-weight:700; }
.qform-success-title { font-family: var(--display); font-weight:600; font-size:1.35rem; color: var(--ink); margin-bottom:6px; }
.qform-success-sub { font-size:0.92rem; color: var(--ink-mute); }
.qform-success-sub a { color: var(--clay-deep); font-weight:600; }
/* ============================================================
PAGE BANNER (inner pages)
============================================================ */
.page-banner { background: var(--ink); color: var(--paper); padding: clamp(3rem,6vw,5rem) 0 clamp(2.5rem,5vw,4rem); position:relative; overflow:hidden; }
.page-banner::after { content:""; position:absolute; top:-30%; right:-5%; width:420px; height:420px; border-radius:50%; background: radial-gradient(circle, rgba(180,80,46,0.4), transparent 70%); filter: blur(20px); }
.page-banner .container { position:relative; z-index:1; }
.page-banner h1 { color: var(--paper); font-size: clamp(2.2rem,5vw,4rem); }
.page-banner p { color: rgba(246,242,236,0.82); }
.page-banner .breadcrumb-item, .page-banner .breadcrumb-item a { color: var(--text-muted); font-size:0.86rem; }
.page-banner .breadcrumb-item a:hover { color: var(--clay-bright); }
.page-banner .breadcrumb-item.active { color: var(--clay-bright); }
/* ============================================================
FOOTER (editorial restyle, same class names)
============================================================ */
.site-footer { background: var(--ink); color: rgba(246,242,236,0.65); }
.footer-top-line { height:1px; background: var(--line-ink); }
.footer-inner { max-width:1240px; margin:0 auto; padding: clamp(3.5rem,6vw,5rem) 2rem 3rem; display:grid; grid-template-columns: 1.3fr 1.15fr 1.15fr 1fr; gap: 2.5rem; }
/* Services/Areas columns list every page on the site — 2-up sublist keeps
the taller counts (13 services, 7 areas) from stretching the footer tall. */
/* size columns to their content so labels like "Siding Replacement" never wrap */
.footer-col--wide .footer-links--2col { grid-template-columns: auto auto; justify-content: start; column-gap: 2rem; }
.footer-col--wide .footer-links--2col a { white-space: nowrap; }
.footer-logo-mark { margin-bottom:1.1rem; }
.footer-logo-mark img { height:50px; }
/* Stars on their own row; credential text stacked below so it never crams/wraps into the stars */
.footer-stars { display:flex; flex-direction:column; align-items:flex-start; gap:7px; margin-bottom:1rem; }
.footer-stars-row { display:inline-flex; gap:4px; color: var(--clay-bright); font-size:0.92rem; letter-spacing:1px; }
.footer-stars span:not(.footer-stars-row) { color: rgba(246,242,236,0.6); font-size:0.8rem; letter-spacing:0.02em; line-height:1.4; }
.footer-desc { font-size:0.9rem; line-height:1.7; color: rgba(246,242,236,0.6); margin-bottom:1.1rem; max-width: 320px; }
.footer-phone-link { display:inline-flex; align-items:center; gap:9px; color: var(--clay-bright); font-family:var(--display); font-weight:600; font-size:1.15rem; }
.footer-phone-link:hover { color:#fff; }
.footer-col h4 { color:#fff; font-family:var(--display); font-size:1.1rem; margin-bottom:1.1rem; }
.footer-links { list-style:none; padding:0; margin:0; display:grid; gap:9px; }
.footer-links--2col { grid-template-columns:1fr 1fr; gap:9px 1rem; }
.footer-links a { display:inline-flex; align-items:center; gap:8px; color: rgba(246,242,236,0.62); font-size:0.88rem; transition: color .18s; }
.footer-links a:hover { color: var(--clay-bright); }
.footer-contact-item { display:flex; gap:12px; margin-bottom:1rem; }
.footer-contact-icon { width:38px; height:38px; border-radius:11px; flex-shrink:0; display:flex; align-items:center; justify-content:center; background: rgba(180,80,46,0.16); color: var(--clay-bright); font-size:0.9rem; }
.footer-contact-text strong { display:block; color:#fff; font-size:0.85rem; margin-bottom:2px; }
.footer-contact-text, .footer-contact-text a { font-size:0.86rem; color: rgba(246,242,236,0.62); }
.footer-contact-text a:hover { color: var(--clay-bright); }
.footer-bottom { border-top:1px solid var(--line-ink); }
.footer-bottom-inner { max-width:1240px; margin:0 auto; padding:1.4rem 2rem; font-size:0.82rem; display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap; }
.footer-bottom-links a { color: rgba(246,242,236,0.55); transition: color .18s; }
.footer-bottom-links a:hover { color: var(--clay-bright); }
.footer-bottom-links .sep { margin:0 8px; color: rgba(246,242,236,0.25); }
/* ============================================================
RESPONSIVE
============================================================ */
@media (max-width: 1024px) {
.hero { min-height: auto; }
.hero-inner { padding-top: 2.5rem; }
.hero-grid { grid-template-columns: 1fr; gap: 2rem; }
/* rail becomes a 3-up row of glass stats */
.hero-rail { display:grid; grid-template-columns: repeat(3, 1fr); padding: 1rem 1.2rem; gap:0; }
.hero-stat { padding: 0 1rem; border-bottom: none; border-right: 1px solid rgba(255,255,255,0.10); flex-direction:column; align-items:flex-start; gap:0.5rem; }
.hero-stat:first-child { padding-left: 0; }
.hero-stat:last-child { border-right: none; padding-right: 0; }
.intro-grid, .finance-grid, .quotes, .about-grid, .cta-grid { grid-template-columns: 1fr; }
.trust-band .wrap { grid-template-columns: 1fr 1fr; gap: 1.8rem 1.5rem; }
.trust-divider { display:none; }
.bento { grid-auto-rows: minmax(200px, auto); }
}
@media (max-width: 900px) {
.nav-links { display:none; }
.nav-toggle { display:flex; }
.nav-mobile-menu { display:flex; }
/* Compact icon-only call button on mobile so it doesn't cover content/CTAs */
.sticky-call-btn { display:inline-flex; justify-content:center; width:54px; height:54px; padding:0; border-radius:50%; bottom:16px; right:16px; }
.sticky-call-btn span { display:none; }
.sticky-call-btn .call-icon { font-size:1.15rem; }
.bento-head { grid-template-columns: 1fr; gap: 1.2rem; }
.bento { grid-template-columns: repeat(4, 1fr); }
.bento-feature, .bento-tall { grid-column: span 4; grid-row: span 1; min-height: 280px; }
.bento-wide { grid-column: span 4; }
.bento-sm { grid-column: span 2; }
/* Touch devices: show descriptions (no hover) — never clip the copy,
and deepen every card's scrim since text is always over the photo */
.bento-card p { max-height: none; opacity: 1; transform: none; margin-top: 0.55rem; }
.bento-card::after { background: linear-gradient(180deg, rgba(16,13,12,0.10) 0%, rgba(16,13,12,0.32) 40%, rgba(16,13,12,0.68) 70%, rgba(16,13,12,0.94) 100%); }
.process-row, .process-row--4 { grid-template-columns: 1fr 1fr; gap: 2.5rem 1.5rem; }
.process-row::before { display:none; }
.footer-inner { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
body { font-size: 16px; }
.wrap, .container, .nav-inner { padding-left: 1.3rem; padding-right: 1.3rem; }
/* Captcha: stack the math chip + answer so the answer field never clips on narrow screens */
.qform-math-row { flex-wrap: wrap; }
.qform-math-problem { flex: 1 1 auto; justify-content: space-between; }
.qform-answer-wrap { flex: 1 1 100%; }
.hero-inner { padding: 1.5rem 1.3rem 2.5rem; }
.hero-title { font-size: clamp(2.4rem, 11vw, 3.2rem); }
.hero-kicker { font-size: 0.66rem; letter-spacing: 0.16em; }
.hero-sub { font-size: 1rem; margin-bottom: 1.5rem; }
.hero-proof { gap: 0.7rem; margin-top: 1.4rem; }
.hero-proof img { height: 42px; }
.hero-proof .proof-text { font-size: 0.74rem; max-width: 120px; }
/* Compact glass checklist on mobile — the rail carries real page content
(the six credential checkmarks) so it must stay visible on phones */
.hero-rail { display: flex; padding: 1rem 1.1rem; border-radius: 14px; grid-template-columns: none; }
.hero-rail .svc-hero-rail-item { padding: 0.5rem 0; gap: 0.7rem; }
.hero-rail .svc-hero-rail-item .t { font-size: 0.83rem; }
.hero-rail .svc-hero-rail-ic { width: 28px; height: 28px; font-size: 0.74rem; border-radius: 7px; }
/* Hide the scroll cue on mobile (it overlapped content) */
.hero-scroll { display: none; }
.bento { grid-template-columns: 1fr; grid-auto-rows: auto; gap: 1.15rem; }
/* single column: cards share a consistent MINIMUM height but grow with their
copy (fixed 260px clipped the always-visible descriptions). Top padding
reserves the corner number/icon chip zone so tall content can't collide. */
.bento-feature, .bento-tall, .bento-wide, .bento-sm { grid-column: span 1; grid-row: auto; min-height: 260px; height: auto; }
.bento-card { padding-top: 4.6rem; }
/* Longer two-line titles at this card height can rise into the corner
number/icon chips (fixed top:1.5rem) — cap the title size on mobile
so it can't reach that zone regardless of card content length. */
.bento-card h3 { font-size: 1.3rem; line-height: 1.25; }
.trust-band .wrap { grid-template-columns: 1fr; gap: 1.4rem; }
.process-row, .process-row--4 { grid-template-columns: 1fr; gap: 2rem; }
.footer-inner { grid-template-columns: 1fr; }
.footer-links--2col { grid-template-columns: 1fr 1fr; }
.intro-figure .float-card { left: 0; bottom: -20px; }
.about-figure .badge-float { width: 92px; height:92px; right: 8px; top:-14px; }
.page-body { padding-top: 104px; }
.quote-lead { padding: 1.8rem 1.5rem; }
.display-lg { font-size: clamp(2.2rem, 9vw, 3rem); }
}
/* ============================================================
PREMIUM POLISH — micro-interactions, refined hovers, accents
============================================================ */
/* Refined card hover choreography (bento, service, feature, standard) */
.bento-card, .service-card, .feature-card, .standard-card, .testimonial-card,
.area-badge, .p-num, .finance-figure, .about-figure > img, .quote-mini {
transition-timing-function: var(--ease-out);
}
/* Bento: clay corner accent + smoother media zoom on hover */
.bento-card .b-link { transition: gap .3s var(--ease-out), color .3s; }
.bento-card:hover .b-link { gap: 12px; color: #fff; }
/* Process numeral hover is a simple color deepen (rule near .p-step base styles);
the icon chip in .p-head carries the clay-fill hover moment instead. */
/* Finance points: icon tilt + clay wash on row hover */
.finance-point { transition: transform .3s var(--ease-out); }
.finance-point:hover { transform: translateX(4px); }
.finance-point:hover .fp-ic { background: var(--clay); color: #fff; transform: rotate(-6deg); transition: background .3s, color .3s, transform .4s var(--ease-spring); }
.fp-ic { transition: background .3s, color .3s, transform .3s; }
/* Area badges: subtle magnetic lift already exists — add icon pop */
.area-badge:hover i { transform: scale(1.25); transition: transform .3s var(--ease-spring); }
.area-badge i { transition: transform .3s; }
/* Quote-mini: soft slide + clay bar grow (single, unified hover) */
/* Hover lift via transform (compositor-only) instead of padding-left (per-frame layout).
The ::before clay rule stays anchored at the true left edge; content slides right.
NOTE: .quote-mini p / .qm-name are children matched by ".quote-mini > *" below —
they previously had a SECOND `transition: color .45s` declaration that, being a
shorthand, silently replaced the transform transition on those two elements only
(last declaration wins, shorthand isn't additive). That desync — background and
the bar animating smoothly while the text snapped instantly — was the visible
jank. Fixed by giving every hover-animated property its own line on one element. */
.quote-mini { transition: background-color .5s var(--ease-out); border-radius: var(--radius-sm); }
.quote-mini > * { transition: transform .5s var(--ease-out), color .45s var(--ease-out); }
.quote-mini:hover { background-color: rgba(199,107,58,0.05); }
.quote-mini:hover > * { transform: translateX(0.45rem); }
.quote-mini::before { transition: transform .6s var(--ease-out), opacity .5s var(--ease-out); }
.quote-mini:hover::before { transform: scaleY(1); opacity: 1; }
/* FAQ: refined hover slide */
.faq-q { transition: color .25s, transform .3s var(--ease-out); }
.faq-q:hover { transform: translateX(0.4rem); }
/* Custom premium list marker for hero checklist (if present) + finance */
.hero-checklist li { transition: transform .25s var(--ease-out); }
.hero-checklist li:hover { transform: translateX(3px); }
/* Footer link arrow-slide */
.footer-links a { transition: color .2s, transform .25s var(--ease-out); }
.footer-links a:hover { transform: translateX(3px); }
/* Nav links: animated underline */
.nav-links > a { position: relative; }
.nav-links > a::after {
content:""; position:absolute; left:0.9rem; right:0.9rem; bottom:4px; height:1.5px;
background: var(--clay); transform: scaleX(0); transform-origin: left; transition: transform .3s var(--ease-out); border-radius:2px;
}
.nav-links > a:hover::after { transform: scaleX(1); }
/* Section heading underline accent for centered display headings */
.display-lg, .display-md { text-wrap: balance; }
/* Refined image hover for figures */
.finance-figure img, .about-figure > img { transition: transform .8s var(--ease-out); }
.finance-figure:hover img, .about-figure:hover > img { transform: scale(1.04); }
.finance-figure, .about-figure { overflow: hidden; border-radius: var(--radius); }
/* Trust band items: subtle lift */
.trust-item { transition: transform .3s var(--ease-out); }
.trust-item:hover { transform: translateY(-2px); }
/* Scroll progress bar (premium top indicator) */
.scroll-progress { position: fixed; top: 0; left: 0; height: 3px; width: 0; z-index: 1060;
background: linear-gradient(90deg, var(--clay), var(--clay-bright)); transition: width .1s linear; }
/* ============================================================
ULTRA-LUXURY LAYER — non-template sections & details
============================================================ */
/* ---- Manifesto: full-bleed single oversized statement ---- */
.manifesto { background: var(--ink); color: var(--paper); padding: clamp(7rem,16vw,15rem) 0; position: relative; overflow: hidden; }
.manifesto::before { content:""; position:absolute; inset:0; z-index:0; pointer-events:none; opacity:0.22; mix-blend-mode:overlay;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='m'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.1' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23m)'/%3E%3C/svg%3E"); }
.manifesto::after { content:""; position:absolute; right:-12%; top:-30%; width:60vw; height:60vw; border-radius:50%; z-index:0;
background: radial-gradient(circle, rgba(207,96,55,0.16), transparent 62%); pointer-events:none; }
.manifesto .wrap { position:relative; z-index:1; }
.manifesto-eyebrow { display:flex; align-items:center; gap:1rem; margin-bottom:2.5rem; }
.manifesto-eyebrow .kicker { color: var(--clay-bright); }
.manifesto-eyebrow .kicker::before { background: var(--clay-bright); }
.manifesto-line { font-family: var(--display); font-weight:500; letter-spacing:-0.03em; line-height:1.04;
font-size: clamp(2.2rem, 6vw, 5.4rem); color: var(--paper); max-width: 16ch; }
.manifesto-line em { font-style: italic; color: var(--clay-bright); }
.manifesto-line .dim { color: rgba(246,242,236,0.42); }
.manifesto-foot { display:flex; gap:clamp(2rem,6vw,5rem); flex-wrap:wrap; margin-top:3.5rem; padding-top:2.5rem; border-top:1px solid var(--line-ink); }
.manifesto-foot p { color: rgba(246,242,236,0.7); max-width:34ch; font-size:1rem; line-height:1.7; margin:0; }
.manifesto-sign { font-family:var(--display); font-style:italic; font-size:1.4rem; color:var(--clay-bright); }
.manifesto-sign small { display:block; font-family:var(--sans); font-style:normal; font-size:0.72rem; letter-spacing:0.18em; text-transform:uppercase; color:rgba(246,242,236,0.5); margin-top:0.4rem; }
/* ---- By-the-numbers band: oversized figures, asymmetric ---- */
.numbers { border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.numbers-grid { display:grid; grid-template-columns: repeat(4, 1fr); }
.num-cell { padding: clamp(2.5rem,5vw,4rem) clamp(1.4rem,2.5vw,2.4rem); border-right:1px solid var(--line); position:relative; }
.num-cell:last-child { border-right:none; }
.num-fig { font-family:var(--display); font-weight:600; font-size: clamp(3rem,5.5vw,5rem); line-height:0.9; letter-spacing:-0.03em; color:var(--ink);
font-variant-numeric: tabular-nums lining-nums; display:flex; align-items:flex-start; gap:0.1em; }
.num-fig .suf { font-size:0.4em; color:var(--clay); margin-top:0.3em; }
.num-label { margin-top:1rem; font-family: var(--mono); font-size:0.72rem; letter-spacing:0.1em; color:var(--ink-mute); line-height:1.5; text-transform:uppercase; font-weight:500; }
.num-sub { margin-top:0.3rem; font-size:0.84rem; color:var(--ink-mute); text-transform:none; font-weight:400; letter-spacing:0; }
/* ---- Marquee kinetic headline (the "wow" detail) ---- */
.kinetic { overflow:hidden; padding: clamp(3rem,6vw,5.5rem) 0; border-bottom:1px solid var(--line); }
.kinetic-track { display:flex; width:max-content; animation: kineticScroll 38s linear infinite; }
.kinetic-track:nth-child(2) { animation-direction: reverse; animation-duration: 46s; opacity:0.18; }
.kinetic-group { display:flex; align-items:center; flex:0 0 auto; padding-right:0; }
.kinetic-word { font-family:var(--display); font-weight:600; font-size: clamp(2.8rem,7vw,6rem); letter-spacing:-0.03em; color:var(--ink); white-space:nowrap; padding:0 2.5rem; line-height:1; }
.kinetic-word.outline { color:transparent; -webkit-text-stroke:1.4px var(--ink); }
.kinetic-word .dot { color: var(--clay); }
.kinetic-sep { width:14px; height:14px; border-radius:50%; background:var(--clay); flex-shrink:0; align-self:center; }
@keyframes kineticScroll { from{transform:translateX(0);} to{transform:translateX(-50%);} }
@media (prefers-reduced-motion: reduce){ .kinetic-track{ animation:none; } }
/* ---- Materials specimen catalog (editorial brand showcase) ---- */
.materials { background: var(--paper-2); }
.materials-head { display:grid; grid-template-columns: 1fr auto; align-items:end; gap:2rem; margin-bottom:3.5rem; }
.materials-head p { color:var(--ink-mute); max-width:32ch; margin:0; }
/* Service-page variant: intro runs 2-3 sentences (not the homepage's one-liner), so give it a real column instead of an auto-shrunk 32ch sliver */
.materials-head--wide { grid-template-columns: 1.15fr 1fr; }
.materials-head--wide p { max-width:52ch; }
.spec-grid { display:grid; grid-template-columns: repeat(5, 1fr); border-top:1px solid var(--line); border-left:1px solid var(--line); }
.spec { border-right:1px solid var(--line); border-bottom:1px solid var(--line); padding:1.8rem 1.5rem; min-height:170px; display:flex; flex-direction:column; justify-content:space-between; position:relative; transition: background .3s var(--ease-out); }
.spec:hover { background: var(--paper-card); }
/* Accent discipline: index numeral is neutral and only turns clay on hover, so the
accent is a reward, not constant noise across all 10 cells. */
.spec-no { font-family:var(--display); font-size:0.8rem; color:var(--ink-mute); font-variant-numeric:tabular-nums; letter-spacing:0.05em; transition: color .3s; }
.spec:hover .spec-no { color:var(--clay); }
.spec-name { display:block; font-family:var(--display); font-weight:600; font-size:1.35rem; color:var(--ink); letter-spacing:-0.01em; line-height:1.1; }
/* category tags: muted neutral (was clay on every cell) — quiet, editorial */
.spec-tag { display:block; font-size:0.72rem; letter-spacing:0.08em; text-transform:uppercase; color:var(--ink-mute); opacity:0.78; font-weight:600; margin-top:0.45rem; }
.spec-cert { position:absolute; top:1.5rem; right:1.5rem; font-size:0.6rem; letter-spacing:0.1em; text-transform:uppercase; color:#fff; background:var(--clay); padding:3px 7px; border-radius:3px; font-weight:700; }
.spec-arrow { align-self:flex-end; color:var(--ink-mute); font-size:0.8rem; transition: transform .3s, color .3s; }
.spec:hover .spec-arrow { transform: translate(3px,-3px); color:var(--clay); }
/* ---- Craft / standards: numbered editorial index ---- */
.craft-grid { display:grid; grid-template-columns: 0.85fr 1.15fr; gap: clamp(2.5rem,6vw,6rem); align-items:start; }
.craft-sticky { position:sticky; top:130px; will-change: auto; }
.craft-list { display:flex; flex-direction:column; }
/* Craft list reveal = opacity-only (no transform) so it can't jitter against the
sticky left column repainting during scroll. */
.js-reveal .craft-list.reveal { opacity:0; transform:none; transition: opacity .9s var(--ease-out); will-change: opacity; }
.js-reveal .craft-list.reveal.in { opacity:1; }
/* per-item hover stays, but each item gets a subtle individual fade-up via the
in-state, staggered with delays — transform only AFTER reveal settles is avoided. */
.craft-item { display:grid; grid-template-columns: auto 1fr; gap:1.6rem; padding:2rem 0; border-top:1px solid var(--line); transition: transform .35s var(--ease-out); }
.craft-item:last-child { border-bottom:1px solid var(--line); }
.craft-item:hover { transform: translateX(0.8rem); }
.craft-no { font-family:var(--display); font-size:1.05rem; color:var(--clay); font-variant-numeric:tabular-nums; font-weight:600; padding-top:0.2rem; }
.craft-item h3 { font-size: clamp(1.4rem,2.2vw,1.9rem); margin:0 0 0.5rem; letter-spacing:-0.015em; }
.craft-item p { color:var(--ink-mute); margin:0; font-size:0.98rem; line-height:1.65; max-width:46ch; }
/* Standalone full-width craft-list (no sticky aside beside it) — let text breathe wider than the narrow craft-grid column default */
.craft-list--wide .craft-item p { max-width:64ch; }
/* Two-up split variant (e.g. Residential / Commercial comparisons) — replaces ad-hoc inline grid styles */
.craft-list--split { display:grid; grid-template-columns: 1fr 1fr; gap: clamp(2.5rem,6vw,6rem); grid-column: 1/-1; }
.craft-list--split .craft-item { border-top:none; padding-top:0; }
@media (max-width: 760px) {
.craft-list--split { grid-template-columns: 1fr; gap:0; }
}
/* Dense two-column index for long lists (8+ short heading+line items) sitting beside a
sticky craft-grid aside — keeps a long numbered list from reading as one tall column. */
.craft-list--grid { display:grid; grid-template-columns: 1fr 1fr; column-gap: 2.2rem; }
.craft-list--grid .craft-item { padding: 1.5rem 0; gap:1.1rem; }
.craft-list--grid .craft-item h3 { font-size: clamp(1.15rem,1.5vw,1.32rem); }
.craft-list--grid .craft-item:nth-last-child(-n+2) { border-bottom:1px solid var(--line); }
@media (max-width: 760px) {
.craft-list--grid { grid-template-columns: 1fr; }
.craft-list--grid .craft-item:nth-last-child(-n+2) { border-bottom:none; }
.craft-list--grid .craft-item:last-child { border-bottom:1px solid var(--line); }
}
/* ---- Custom cursor accent (desktop, fine pointer only) ---- */
@media (hover:hover) and (pointer:fine){
.cursor-dot { position:fixed; top:0; left:0; width:7px; height:7px; border-radius:50%; background:var(--clay); pointer-events:none; z-index:9999; transform:translate(-50%,-50%); transition: width .25s, height .25s, background .25s, opacity .25s; mix-blend-mode:normal; opacity:0; }
.cursor-ring { position:fixed; top:0; left:0; width:34px; height:34px; border:1px solid rgba(180,80,46,0.5); border-radius:50%; pointer-events:none; z-index:9998; transform:translate(-50%,-50%); transition: width .3s var(--ease-out), height .3s var(--ease-out), border-color .3s, opacity .3s; opacity:0; }
body.cursor-on .cursor-dot, body.cursor-on .cursor-ring { opacity:1; }
body.cursor-hover .cursor-ring { width:54px; height:54px; border-color:var(--clay); }
body.cursor-hover .cursor-dot { width:0; height:0; }
}
/* ---- Responsive for new sections ---- */
@media (max-width: 900px){
.numbers-grid { grid-template-columns: 1fr 1fr; }
.num-cell:nth-child(2){ border-right:none; }
.num-cell:nth-child(1),.num-cell:nth-child(2){ border-bottom:1px solid var(--line); }
.spec-grid { grid-template-columns: repeat(2, 1fr); }
.craft-grid { grid-template-columns: 1fr; }
.craft-sticky { position:static; }
.materials-head { grid-template-columns: 1fr; }
}
@media (max-width: 560px){
.numbers-grid { grid-template-columns: 1fr; }
.num-cell { border-right:none; border-bottom:1px solid var(--line); }
.num-cell:last-child{ border-bottom:none; }
.spec-grid { grid-template-columns: 1fr; }
.manifesto-foot { flex-direction:column; gap:1.5rem; }
}
/* ============================================================
THEME TOGGLE — floating pill, swatch + label
============================================================ */
.theme-toggle {
position: fixed; bottom: 20px; left: 20px; z-index: 1090;
display: inline-flex; align-items: center; gap: 0.55rem;
background: var(--ink); color: var(--paper);
border: 1px solid var(--line-ink); border-radius: 100px;
padding: 0.55rem 0.95rem 0.55rem 0.6rem; cursor: pointer;
font-family: var(--sans); font-size: 0.8rem; font-weight: 600; letter-spacing: 0.02em;
box-shadow: var(--sh-md); transition: transform .25s var(--ease-out), box-shadow .25s;
}
.theme-toggle:hover { transform: translateY(-2px); box-shadow: var(--sh-lg); }
.theme-toggle .tt-swatch {
width: 22px; height: 22px; border-radius: 50%; flex-shrink: 0;
background: conic-gradient(from 220deg, var(--clay) 0 50%, #1f5673 50% 100%);
box-shadow: inset 0 0 0 2px rgba(255,255,255,0.85);
}
.theme-toggle .tt-label { white-space: nowrap; }
.theme-toggle .tt-label b { color: var(--clay-bright); font-weight: 700; }
@media (max-width: 560px){
/* icon-only on phones: the labelled pill overlapped hero CTAs at the
bottom-left of the first viewport */
.theme-toggle { bottom: 14px; left: 14px; padding: 0.5rem; font-size: 0.74rem; }
.theme-toggle .tt-label { display: none; }
}
@media print { .theme-toggle { display:none; } }
/* ============================================================
INTRO PRELOADER — studio-brand opening (once per session)
============================================================ */
.preloader {
position: fixed; inset: 0; z-index: 4000; background: var(--ink);
display: flex; align-items: center; justify-content: center; flex-direction: column;
overflow: hidden;
}
.preloader.is-done { opacity: 0; visibility: hidden; transition: opacity .7s var(--ease-out), visibility .7s; }
/* grain on the dark field */
.preloader::after { content:""; position:absolute; inset:0; opacity:0.22; mix-blend-mode:overlay; pointer-events:none;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='pn'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.1' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23pn)'/%3E%3C/svg%3E"); }
.pl-inner { position: relative; z-index: 2; text-align: center; }
.pl-mark {
font-family: var(--display); font-weight: 600; letter-spacing: -0.02em;
font-size: clamp(2.4rem, 6vw, 4.2rem); color: var(--paper); line-height: 1;
display: inline-flex; align-items: baseline; gap: 0.12em;
opacity: 0; transform: translateY(14px); animation: plMark .9s var(--ease-out) .15s forwards;
}
.pl-mark .pl-accent { color: var(--clay-bright); }
.pl-mark .pl-dot { color: var(--clay-bright); }
.pl-sub {
margin-top: 1.1rem; font-family: var(--sans); font-size: 0.72rem; letter-spacing: 0.34em; text-transform: uppercase;
color: rgba(246,242,236,0.55); opacity: 0; animation: plSub .8s var(--ease-out) .5s forwards;
}
/* drawn rule under the mark */
.pl-rule { height: 1px; width: 0; margin: 1.6rem auto 0; background: linear-gradient(90deg, transparent, var(--clay-bright), transparent);
animation: plRule 1s var(--ease-out) .7s forwards; }
/* progress hairline at very bottom */
.pl-bar { position:absolute; left:0; bottom:0; height:2px; width:0; background: var(--clay); z-index:3; animation: plBar 1.6s var(--ease-out) forwards; }
.pl-skip { position:absolute; bottom:1.4rem; right:1.6rem; z-index:3; font-family:var(--sans); font-size:0.7rem; letter-spacing:0.18em; text-transform:uppercase; color:rgba(246,242,236,0.5); background:none; border:none; cursor:pointer; opacity:0; animation: plSub .6s ease 1s forwards; transition:color .2s; }
.pl-skip:hover { color: var(--clay-bright); }
@keyframes plMark { to { opacity:1; transform:none; } }
@keyframes plSub { to { opacity:1; } }
@keyframes plRule { to { width: 220px; } }
@keyframes plBar { 0%{width:0;} 100%{width:100%;} }
/* lock scroll while preloader is active */
html.pl-active, html.pl-active body { overflow: hidden; height: 100%; }
@media (prefers-reduced-motion: reduce){
.pl-mark,.pl-sub,.pl-rule,.pl-bar,.pl-skip{ animation:none; opacity:1; transform:none; width:auto; }
.pl-rule{ width:220px; }
}
/* ============================================================
HORIZONTAL PROJECT SHOWCASE — sideways portfolio (the "wow")
============================================================ */
.showcase { background: var(--ink); color: var(--paper); padding: clamp(4.5rem,9vw,8rem) 0 clamp(4rem,7vw,6rem); overflow: hidden; position: relative; }
.showcase .wrap { position: relative; z-index: 2; }
.showcase-head { display:flex; align-items:flex-end; justify-content:space-between; gap:2rem; flex-wrap:wrap; margin-bottom: 3rem; }
.showcase-head .kicker { color: var(--clay-bright); }
.showcase-head .kicker::before { background: var(--clay-bright); }
.showcase-head h2 { color: var(--paper); }
.showcase-hint { display:flex; align-items:center; gap:0.7rem; color: rgba(246,242,236,0.55); font-size:0.78rem; letter-spacing:0.14em; text-transform:uppercase; }
.showcase-hint .line { width:48px; height:1px; background: rgba(246,242,236,0.3); position:relative; overflow:hidden; }
.showcase-hint .line::after { content:""; position:absolute; inset:0; background:var(--clay-bright); animation: scHint 2.4s ease-in-out infinite; }
@keyframes scHint { 0%{transform:translateX(-100%);} 50%{transform:translateX(0);} 100%{transform:translateX(100%);} }
.showcase-track { display:flex; gap: 1.6rem; overflow-x: auto; scroll-snap-type: x mandatory; padding: 0.5rem 0 1.5rem; cursor: grab;
scrollbar-width: thin; scrollbar-color: var(--clay) transparent; -webkit-overflow-scrolling: touch; }
.showcase-track.dragging { cursor: grabbing; scroll-snap-type: none; }
.showcase-track::-webkit-scrollbar { height: 4px; }
.showcase-track::-webkit-scrollbar-track { background: rgba(255,255,255,0.08); }
.showcase-track::-webkit-scrollbar-thumb { background: var(--clay); border-radius: 4px; }
.showcase-card { flex: 0 0 clamp(280px, 42vw, 560px); scroll-snap-align: start; position: relative; border-radius: var(--radius-sm); overflow: hidden; aspect-ratio: 4/3; background:#1a1512; }
.showcase-card img { width:100%; height:100%; object-fit:cover; transition: transform 1.1s var(--ease-out); -webkit-user-drag:none; pointer-events:none; filter: var(--img-grade); }
.showcase-card:hover img { transform: scale(1.05); }
.showcase-card::after { content:""; position:absolute; inset:0; background: linear-gradient(180deg, rgba(16,13,12,0) 38%, rgba(16,13,12,0.82) 100%); }
.showcase-card::before { content:""; position:absolute; inset:0; z-index:3; box-shadow: inset 0 0 0 1px rgba(255,255,255,0.10); border-radius:inherit; pointer-events:none; }
.sc-body { position:absolute; left:0; right:0; bottom:0; z-index:2; padding: 1.6rem 1.7rem; }
.sc-tag { display:inline-flex; align-items:center; gap:7px; font-size:0.7rem; letter-spacing:0.12em; text-transform:uppercase; font-weight:600; color: var(--clay-bright); margin-bottom:0.5rem; }
.sc-tag::before { content:""; width:6px; height:6px; border-radius:50%; background: var(--clay-bright); }
.sc-title { font-family: var(--display); font-weight:600; font-size: clamp(1.3rem,2vw,1.7rem); color:#fff; letter-spacing:-0.01em; line-height:1.1; }
.sc-meta { display:flex; gap:1.2rem; margin-top:0.7rem; font-size:0.78rem; color: rgba(246,242,236,0.7); }
.sc-meta span { display:inline-flex; align-items:center; gap:5px; }
.sc-meta i { color: var(--clay-bright); font-size:0.7rem; }
/* count + cta row under track */
.showcase-foot { display:flex; align-items:center; justify-content:space-between; gap:1.5rem; flex-wrap:wrap; margin-top:2rem; padding-top:1.8rem; border-top:1px solid var(--line-ink); }
.showcase-foot p { color:rgba(246,242,236,0.62); margin:0; max-width:42ch; font-size:0.95rem; }
@media (max-width: 760px){
.showcase-track { gap:1rem; scroll-snap-type:none; }
.showcase-card { flex: 0 0 82vw; aspect-ratio: 5/4; }
.showcase-hint { display:none; }
}
@media (prefers-reduced-motion: reduce){ .showcase-hint .line::after{ animation:none; } }
/* ============================================================
FOOTER — editorial closing band
============================================================ */
.footer-close { border-bottom: 1px solid var(--line-ink); position: relative; z-index: 1; }
.footer-close-inner { max-width: 1240px; margin: 0 auto; padding: clamp(4rem,8vw,6.5rem) 2rem clamp(3rem,6vw,4.5rem); }
.footer-statement { font-family: var(--display); font-weight: 600; color: var(--paper);
font-size: clamp(2.4rem, 6vw, 5rem); line-height: 0.98; letter-spacing: -0.03em; margin: 0; }
.footer-statement em { font-style: italic; color: var(--clay-bright); }
.footer-close-actions { display: flex; gap: 0.9rem; flex-wrap: wrap; margin-top: 2.2rem; }
/* refined footer links — no bullets/icons, hairline hover */
.site-footer .footer-links a { position: relative; padding: 1px 0; transition: color .25s, padding-left .3s var(--ease-out); }
.site-footer .footer-links a:hover { color: var(--clay-bright); padding-left: 0.4rem; }
@media (max-width: 560px){
.footer-close-actions .btn { width: 100%; justify-content: center; }
}
/* ============================================================
LUXURY FINISH — selection, scrollbar, focus, fine details
============================================================ */
/* On-brand text selection */
::selection { background: var(--clay); color: #fff; }
::-moz-selection { background: var(--clay); color: #fff; }
/* Refined page scrollbar (desktop) */
@media (hover:hover) and (pointer:fine){
html { scrollbar-width: thin; scrollbar-color: var(--clay) var(--paper-2); }
::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track { background: var(--paper-2); }
::-webkit-scrollbar-thumb { background: var(--clay); border-radius: 100px; border: 3px solid var(--paper-2); }
::-webkit-scrollbar-thumb:hover { background: var(--clay-deep); }
}
/* Premium, consistent keyboard focus ring (accessibility + polish) */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, [tabindex]:focus-visible {
outline: 2px solid var(--clay);
outline-offset: 3px;
border-radius: 3px;
}
/* don't double-ring the inputs that already have a focus box-shadow */
.qform-input:focus-visible { outline: none; }
/* Smoother global link/icon transitions (catch-all refinement) */
a { -webkit-tap-highlight-color: transparent; }
/* Slate-theme selection */
html[data-theme="slate"] ::selection { background: var(--clay); color:#fff; }
html[data-theme="slate"] { scrollbar-color: var(--clay) var(--paper-2); }
/* ============================================================
SERVICE PAGES — editorial interior template
============================================================ */
/* ---- Service hero — full-strength photography, homepage cinematic treatment ---- */
.svc-hero { position: relative; overflow: hidden; color: var(--text-on-dark); background: var(--ink); padding: clamp(6.5rem, 11vw, 9rem) 0 clamp(4rem, 7vw, 6rem); }
.svc-hero-bg { position: absolute; inset: -8% 0; z-index: 0; }
.svc-hero-bg img { width: 100%; height: 100%; object-fit: cover; filter: var(--img-grade); }
.svc-hero-bg::after { content:""; position:absolute; inset:0; background:
linear-gradient(180deg, rgba(15,12,11,0.50) 0%, rgba(15,12,11,0.20) 32%, rgba(15,12,11,0.42) 70%, rgba(12,10,9,0.90) 100%),
linear-gradient(100deg, rgba(12,10,9,0.90) 0%, rgba(14,11,10,0.60) 36%, rgba(19,17,16,0.05) 64%, rgba(19,17,16,0) 100%),
radial-gradient(110% 80% at 82% 20%, rgba(207,96,55,0.16), transparent 56%); }
.svc-hero-inner { position: relative; z-index: 2; }
.svc-hero-inner .lede { color: rgba(246,242,236,0.86); }
.svc-hero h1 { color: #fff; }
.svc-hero-grid { display:grid; grid-template-columns: 1.5fr 0.9fr; gap: clamp(2rem, 5vw, 4rem); align-items:end; }
/* breadcrumbs */
.svc-crumbs { display:flex; align-items:center; gap:0.6rem; font-size:0.82rem; letter-spacing:0.02em; margin-bottom:2rem; color: rgba(246,242,236,0.55); }
.svc-crumbs a { color: rgba(246,242,236,0.72); transition: color .25s; }
.svc-crumbs a:hover { color: var(--clay-bright); }
.svc-crumbs span { color: rgba(246,242,236,0.35); }
.svc-crumbs .is-current { color: rgba(246,242,236,0.9); }
.svc-hero-callout { margin: 1.6rem 0 0; font-family: var(--display); font-weight: 500; font-size: clamp(1.05rem, 1.5vw, 1.25rem); color: rgba(246,242,236,0.85); letter-spacing:-0.01em; }
.svc-hero-callout a { color: var(--clay-bright); transition: color .25s; }
.svc-hero-callout a:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.svc-hero-actions { display:flex; gap:0.8rem; flex-wrap:wrap; margin-top:1.8rem; }
/* hero credential rail — echoes homepage .hero-rail; a literal checklist, not paraphrased */
.svc-hero-rail { display:flex; flex-direction:column; gap:0; padding: 1.3rem 1.4rem; border-radius: 18px;
background: rgba(255,255,255,0.045); border:1px solid rgba(255,255,255,0.10); backdrop-filter: blur(6px); }
.svc-hero-rail-item { padding: 0.62rem 0; border-bottom: 1px solid rgba(255,255,255,0.10); display:flex; align-items:center; gap:0.85rem; transition: transform .3s var(--ease-out); }
.svc-hero-rail-item:first-child { padding-top: 0; }
.svc-hero-rail-item:last-child { border-bottom: none; padding-bottom: 0; }
.svc-hero-rail-item:hover { transform: translateX(4px); }
.svc-hero-rail-ic { width:30px; height:30px; flex-shrink:0; border-radius:9px; background: rgba(207,96,55,0.18); color: var(--clay-bright); display:flex; align-items:center; justify-content:center; font-size:0.8rem; transition: background .3s, color .3s; }
.svc-hero-rail-item:hover .svc-hero-rail-ic { background: var(--clay); color:#fff; }
.svc-hero-rail-item .t { font-family: var(--sans); font-size: 0.9rem; font-weight:500; color:#fff; line-height:1.3; letter-spacing:-0.005em; }
/* ---- Section lead block ---- */
.svc-lead { max-width: 760px; margin-bottom: 2.6rem; }
/* ---- Prose ---- */
.svc-prose { max-width: 760px; }
.svc-prose p { color: var(--ink-mute); font-size: 1.06rem; line-height: 1.72; margin: 0 0 1.15rem; text-wrap: pretty; }
.svc-prose p:last-child { margin-bottom: 0; }
.svc-prose a { color: var(--clay-deep); font-weight: 500; text-decoration: none; border-bottom: 1px solid var(--clay-wash); transition: border-color .25s, color .25s; }
.svc-prose a:hover { color: var(--clay); border-bottom-color: var(--clay); }
.svc-prose-cta { font-family: var(--display); font-weight: 500; font-size: 1.2rem; color: var(--ink) !important; margin-top: 1.6rem !important; }
/* Card variant — wraps a prose block in a bordered, elevated panel for standalone text-only
sections (e.g. documentation/records copy) that need visual separation from plain full-width prose. */
.svc-prose--card { background: var(--paper-card); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: clamp(2rem,4vw,3rem); box-shadow: var(--sh-md); transition: transform .5s var(--ease-out), border-color .5s var(--ease-out); }
.svc-prose--card:hover { transform: translateY(-4px); border-color: color-mix(in srgb, var(--clay) 30%, var(--line)); }
/* ---- Why Choose — figure + prose (echoes .about-grid) ---- */
.svc-figure-grid { display:grid; grid-template-columns: 0.85fr 1.15fr; gap: clamp(2rem,5vw,5rem); align-items:center; }
.svc-figure { position:relative; }
.svc-figure-clip { border-radius: var(--radius); box-shadow: var(--sh-md); overflow:hidden; }
.svc-figure img { display:block; width:100%; aspect-ratio: 1/1; object-fit:cover; filter: var(--img-grade); transition: transform 1.1s var(--ease-out); }
.svc-figure:hover img { transform: scale(1.055); }
.svc-figure-badge { position:absolute; top:-20px; right:-20px; width: 104px; height:104px; border-radius:50%; background: var(--clay); color:#fff; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; box-shadow: var(--sh-clay); transform: rotate(-8deg); transition: transform .45s var(--ease-spring); z-index:2; }
.svc-figure:hover .svc-figure-badge { transform: rotate(0deg) scale(1.06); }
.svc-figure-badge .n { font-family:var(--display); font-size:1.6rem; font-weight:600; line-height:1; }
.svc-figure-badge .l { font-size:0.62rem; letter-spacing:0.06em; text-transform:uppercase; margin-top:3px; line-height:1.25; }
/* Reverse variant — puts the photo on the right for visual rhythm when used a second time on a long page */
.svc-figure-grid--reverse { grid-template-columns: 1.15fr 0.85fr; }
.svc-figure-grid--reverse .svc-figure { order:2; }
.svc-figure-grid--reverse .svc-figure-badge { left:-20px; right:auto; }
@media (max-width: 900px) {
.svc-figure-grid--reverse .svc-figure { order:0; }
}
/* ---- Reviews inline link ---- */
.svc-inline-link { display:inline-flex; align-items:center; gap:0.55rem; font-size:0.9rem; font-weight:600; text-transform:uppercase; letter-spacing:0.05em; color: var(--clay-deep); text-decoration:none; transition: gap .3s var(--ease-out), color .25s; }
.svc-inline-link:hover { gap:0.9rem; color: var(--clay); }
/* ---- Schedule band ---- */
.svc-schedule { position:relative; overflow:hidden; }
.svc-schedule::before { content:""; position:absolute; top:0; left:0; right:0; height:1px; background: linear-gradient(90deg, transparent, rgba(199,107,58,0.55) 50%, transparent); z-index:2; }
.svc-schedule::after { content:""; position:absolute; inset:0; z-index:0; pointer-events:none; background: radial-gradient(70% 140% at 85% 50%, rgba(207,96,55,0.12), transparent 60%); }
.svc-schedule-inner { position:relative; z-index:1; max-width: 640px; }
.svc-schedule-inner a:hover { text-decoration: underline; text-underline-offset: 3px; }
/* ---- Responsive ---- */
@media (max-width: 900px) {
.svc-hero-grid { grid-template-columns: 1fr; }
.svc-hero-rail { display:grid; grid-template-columns: repeat(2, 1fr); gap: 0 1.5rem; padding: 1.2rem 1.3rem; }
.svc-hero-rail-item { grid-column: span 1; border-bottom:none; padding: 0.6rem 0; }
.svc-figure-grid { grid-template-columns: 1fr; }
.svc-figure { max-width: 420px; margin: 0 auto; }
}
@media (max-width: 600px) {
.svc-hero-actions .btn { width: 100%; justify-content: center; }
.svc-hero-rail { grid-template-columns: 1fr; }
}
/* ============================================================
OPTION GROUPS — premium replacement for plain 3-column pill
lists (e.g. Styles / Materials / Configurations catalogs).
Echoes the .spec editorial-index numbering + icon language
already used in .spec-grid / .bento-card, scoped to its own
classes so it never touches .area-badge or .craft-grid rules.
============================================================ */
.opt-groups { display:grid; grid-template-columns: repeat(3, 1fr); gap: 0; border-top:1px solid var(--line); border-left:1px solid var(--line); }
.opt-group { border-right:1px solid var(--line); border-bottom:1px solid var(--line); padding: 2rem 1.9rem; }
.opt-group-head { display:flex; align-items:center; gap:0.9rem; margin-bottom:1.4rem; }
.opt-group-ic { width:42px; height:42px; flex-shrink:0; border-radius:11px; background: var(--clay-wash); color: var(--clay-deep); display:flex; align-items:center; justify-content:center; font-size:1.05rem; transition: background .3s var(--ease-out), color .3s var(--ease-out); }
.opt-group:hover .opt-group-ic { background: var(--clay); color:#fff; }
.opt-group-head h3 { font-size:1.12rem; margin:0; letter-spacing:-0.01em; }
.opt-group-no { font-family:var(--display); font-size:0.76rem; color:var(--ink-mute); font-variant-numeric:tabular-nums; letter-spacing:0.05em; display:block; margin-bottom:0.3rem; }
.opt-list { display:flex; flex-direction:column; gap:0; }
.opt-pill { display:flex; align-items:center; gap:0.7rem; padding:0.8rem 0; border-top:1px solid var(--line); font-size:0.94rem; color: var(--ink-soft); transition: color .3s var(--ease-out), transform .3s var(--ease-out); }
.opt-list .opt-pill:first-child { border-top:none; }
.opt-pill i { color: var(--clay); font-size:0.7rem; flex-shrink:0; transition: transform .3s var(--ease-out); }
.opt-pill:hover { color: var(--ink); transform: translateX(4px); }
.opt-pill:hover i { transform: scale(1.2); }
/* Sub-label — small caps heading above a secondary .opt-list within the same
.opt-group (e.g. "Property Types" then "Materials" stacked in one group).
Replaces repeated inline styles with a single reusable rule. */
.opt-sublabel { font-weight:600; font-size:0.82rem; text-transform:uppercase; letter-spacing:0.06em; color: var(--ink); margin:0 0 0.6rem; }
@media (max-width: 900px) {
.opt-groups { grid-template-columns: 1fr 1fr; }
.opt-group:nth-child(2) { border-right:none; }
}
@media (max-width: 600px) {
.opt-groups { grid-template-columns: 1fr; }
.opt-group { border-right:none !important; }
}
/* ============================================================
CRAFT ITEM ICON — optional small icon badge that replaces the
plain .craft-no numeral on a standalone .craft-list (no sticky
aside beside it), used when the same list echoes topics shown
earlier in a photo bento above it. Keeps the numbering rhythm
but gives each row a distinct visual identity instead of a
plain repeated number, scoped so it never touches base
.craft-item / .craft-no rules used elsewhere.
============================================================ */
.craft-item-ic { display:flex; flex-direction:column; align-items:center; gap:0.5rem; padding-top:0.15rem; }
.craft-item-ic .craft-no { padding-top:0; font-size:0.78rem; color: var(--ink-mute); }
.craft-item-ic-badge { width:46px; height:46px; border-radius:50%; background: var(--clay-wash); color: var(--clay-deep); display:flex; align-items:center; justify-content:center; font-size:1.05rem; transition: background .35s var(--ease-out), color .35s var(--ease-out), transform .35s var(--ease-out); }
.craft-item:hover .craft-item-ic-badge { background: var(--clay); color:#fff; transform: scale(1.08); }
/* ============================================================
SPEC GRID — 6-UP — additive modifier for brand/manufacturer
catalogs with 6 entries (base .spec-grid defaults to a 5-col
editorial index and would otherwise strand a 6th item alone on
its own row). Mirrors the same border/hover language.
============================================================ */
.spec-grid--six { grid-template-columns: repeat(6, 1fr); }
@media (max-width: 900px) {
.spec-grid--six { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 560px) {
.spec-grid--six { grid-template-columns: repeat(2, 1fr); }
}
/* SPEC GRID — 7-UP — additive modifier for catalogs with 7 entries
(base .spec-grid's 5-col layout would strand 2 cells alone on a
ragged second row). Mirrors the same border/hover language. */
.spec-grid--seven { grid-template-columns: repeat(7, 1fr); }
@media (max-width: 900px) {
.spec-grid--seven { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 560px) {
.spec-grid--seven { grid-template-columns: repeat(2, 1fr); }
}
/* ============================================================
HERO — SOLO VARIANT — for service pages with no rail/second
column content (e.g. very short docx source with no body copy
or credential list). Keeps the hero column readable and
centered instead of leaving the 1.5fr/0.9fr grid looking like
it is missing a piece. Purely a layout modifier, additive only.
============================================================ */
.svc-hero-grid--solo { grid-template-columns: 1fr; max-width: 46rem; }
/* ============================================================
SVC DUO — decorative two-photo architectural pairing for
pages that need more visual richness than a single hero image
can carry, without requiring any additional copy. Mirrors the
.svc-figure hover-zoom/shadow language so it reads as part of
the same photographic system.
============================================================ */
.svc-duo { display:grid; grid-template-columns: 1.2fr 1fr; gap: clamp(1.2rem,3vw,2rem); align-items:stretch; }
.svc-duo-figure { position:relative; border-radius: var(--radius); box-shadow: var(--sh-md); overflow:hidden; }
.svc-duo-figure img { display:block; width:100%; height:100%; object-fit:cover; filter: var(--img-grade); transition: transform 1.1s var(--ease-out); }
.svc-duo-figure:hover img { transform: scale(1.055); }
.svc-duo-figure--tall { aspect-ratio: 4/5; }
.svc-duo-figure--wide { aspect-ratio: 4/5; }
@media (max-width: 720px) {
.svc-duo { grid-template-columns: 1fr; }
.svc-duo-figure--tall, .svc-duo-figure--wide { aspect-ratio: 4/3; }
}
/* ============================================================
FAQ — FRAMED VARIANT — additive wrapper that gives the FAQ
section more visual weight/framing when it is the primary
focal content of a page (sparse-copy service pages). Adds a
bordered panel and a decorative numbered badge per question
using a CSS counter (no new markup text). Base .faq-list /
.faq-item / .faq-q rules are untouched.
============================================================ */
.faq-panel { border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--paper-card); box-shadow: var(--sh-md); padding: clamp(1rem, 3vw, 1.6rem) clamp(1.4rem, 4vw, 3rem); }
.faq-panel .faq-list { counter-reset: faqno; }
.faq-panel .faq-item { counter-increment: faqno; position:relative; }
.faq-panel .faq-q { padding-left: 2.6rem; }
.faq-panel .faq-q::before {
content: counter(faqno, decimal-leading-zero);
position:absolute; left:0; top:1.65rem;
font-family: var(--display); font-weight:600; font-size:0.82rem; color: var(--clay);
font-variant-numeric: tabular-nums;
}
@media (max-width: 600px) {
.faq-panel .faq-q { padding-left: 2.1rem; }
.faq-panel .faq-q::before { font-size:0.74rem; top:1.6rem; }
}
/* ---- Editorial comparison table (docx table content) ---- */
.compare-table-wrap { overflow-x:auto; border:1px solid var(--line); border-radius: var(--radius); box-shadow: var(--sh-md); }
.compare-table { width:100%; border-collapse:collapse; min-width:560px; }
.compare-table th, .compare-table td { padding: 1rem 1.3rem; text-align:left; border-bottom:1px solid var(--line); font-size:0.94rem; line-height:1.5; }
.compare-table th { font-family:var(--display); font-weight:600; font-size:1rem; color: var(--ink); background: var(--paper-card); letter-spacing:-0.005em; }
.compare-table td:first-child, .compare-table th:first-child { font-weight:600; color: var(--ink); background: var(--paper-card); }
.compare-table td { color: var(--ink-mute); }
.compare-table tr:last-child td { border-bottom:none; }
.compare-table tbody tr { transition: background .25s var(--ease-out); }
.compare-table tbody tr:hover { background: var(--clay-wash); }
@media (max-width: 600px) {
.compare-table th, .compare-table td { padding: 0.8rem 1rem; font-size:0.88rem; }
}
/* ---- Comparison table polish: header weight, featured column, icon chips ----
Additive refinement layer for .compare-table — only used on roof-overlay.php,
so safe to extend here. Adds a heavier ink header row, a subtly highlighted
"featured" data column (the recommended option), and small circular icon
chips before each header label. Zero new text: icons are decorative glyphs
attached via a wrapping already present only inside
| markup, and the featured column is a pure CSS background treatment. */
.compare-table thead tr { background: var(--ink); }
.compare-table th { background: var(--ink); color: var(--paper); border-bottom-color: var(--line-ink); }
.compare-table th:first-child { background: var(--ink); color: var(--paper); }
.compare-table .ct-th { display:inline-flex; align-items:center; gap:0.55rem; }
.compare-table .ct-th i { color: var(--clay-bright); font-size:0.85rem; }
.compare-table td:nth-child(2), .compare-table th:nth-child(2) { position:relative; }
.compare-table th:nth-child(2) { background: var(--ink); }
.compare-table td:nth-child(2) { background: var(--clay-wash); font-weight:500; color: var(--ink-soft); }
.compare-table tbody tr:hover td:nth-child(2) { background: color-mix(in srgb, var(--clay) 16%, var(--clay-wash)); }
.compare-table tbody tr:last-child td:nth-child(2) { border-bottom-left-radius:0; border-bottom-right-radius:0; }
/* ---- Bento banner card: full-width final card for 5-card bentos ----
Five span-3 cards in the 6-col grid left the last card beside an empty
hole. The last card now spans the full row as a cinematic banner. The
two-class selector outranks the single-class span rules at every
breakpoint, and 1/-1 adapts to the 4-col tablet and 1-col mobile grids. */
.bento-card.bento-full { grid-column: 1 / -1; padding-top: 4.2rem; }
.bento-card.bento-full h3 { font-size: clamp(1.7rem, 2.4vw, 2.3rem); }
.bento-card.bento-full p { max-height: none; opacity: 1; transform: none; margin-top: 0.6rem; max-width: 62ch; font-size: 1rem; }
/* ---- Column-filling figure ----
Default svc-figure photos are square; beside a tall text column that
leaves the image column hollow underneath. --fill stretches the photo
to match the text column height. */
.svc-figure.svc-figure--fill { align-self: stretch; display: flex; }
.svc-figure--fill .svc-figure-clip { height: 100%; width: 100%; }
.svc-figure--fill img { height: 100%; aspect-ratio: auto; }
@media (max-width: 900px) {
.svc-figure--fill img { aspect-ratio: 16/10; height: auto; }
}
/* ============================================================
NEXT-LEVEL MOTION LAYER
Modern, dependency-free: cross-document view transitions,
CSS scroll-driven parallax, scroll-scrubbed illumination.
Every effect is progressive enhancement — guarded by
@supports and prefers-reduced-motion; older browsers simply
see the site exactly as before.
============================================================ */
/* ---- 1. Cross-document View Transitions (whole-site) ----
Same-origin navigations crossfade with a gentle lift instead
of a hard white flash. Ignored entirely by non-supporting
browsers. */
@view-transition { navigation: auto; }
::view-transition-old(root) {
animation: vtLeave 0.34s cubic-bezier(0.4, 0, 0.68, 0.06) both;
}
::view-transition-new(root) {
animation: vtEnter 0.5s cubic-bezier(0.16, 1, 0.3, 1) both;
}
@keyframes vtLeave { to { opacity: 0; transform: translateY(-12px); } }
@keyframes vtEnter { from { opacity: 0; transform: translateY(14px); } }
@media (prefers-reduced-motion: reduce) {
::view-transition-old(root), ::view-transition-new(root) { animation: none; }
}
/* ---- 2. Scroll-driven parallax on clipped imagery ----
Photos drift vertically inside their clip as they cross the
viewport, oversized via the individual `scale` property so
edges never show. Animates the individual `translate`
property only, so every existing `transform` hover zoom
still composes on top untouched.
NOTE: overflow:hidden clip boxes are themselves scroll
containers, so a plain view() on the img would track the
static clip instead of the page. The named timeline lives on
the clip container (tracked against the real root scroller)
and the img consumes it — the canonical clipped-parallax
pattern. */
@supports (animation-timeline: view()) {
@media (prefers-reduced-motion: no-preference) {
.svc-figure-clip,
.bento-card,
.finance-figure,
.svc-duo-figure,
.cta {
view-timeline: --luxView block;
}
.svc-figure-clip img,
.bento-card img,
.finance-figure img,
.svc-duo-figure img,
.cta-bg img {
scale: 1.12;
animation: luxParallax linear both;
animation-timeline: --luxView;
animation-range: cover 0% cover 100%;
}
}
}
@keyframes luxParallax {
from { translate: 0 -4.2%; }
to { translate: 0 4.2%; }
}
/* ---- 3. Manifesto scroll illumination ----
The dimmed phrase brightens as the statement crosses the
heart of the viewport — the page appears to "read itself".
Scrubbed via a registered custom property so the .dim span
keeps natural inline wrapping. */
@property --illum {
syntax: '';
inherits: true;
initial-value: 0;
}
@supports (animation-timeline: view()) {
@media (prefers-reduced-motion: no-preference) {
/* The manifesto section has overflow:hidden, which would trap a
plain view() on the line — so the section carries the named
timeline (tracked against the page) and the line consumes it. */
.manifesto {
view-timeline: --luxManifesto block;
}
.manifesto-line {
animation: luxIlluminate linear both;
animation-timeline: --luxManifesto;
animation-range: cover 12% cover 48%;
}
.manifesto-line .dim {
opacity: calc(0.24 + var(--illum) * 0.76);
}
}
}
@keyframes luxIlluminate { from { --illum: 0; } to { --illum: 1; } }
/* ---- 4. Cursor spotlight on dark editorial sections ----
A soft clay light that follows the pointer across the ink
sections (element injected by JS on fine-pointer devices). */
.lux-spot {
position: absolute; top: 0; left: 0; width: 560px; height: 560px;
margin: -280px 0 0 -280px; border-radius: 50%;
background: radial-gradient(circle, rgba(207, 96, 55, 0.10) 0%, rgba(207, 96, 55, 0.035) 42%, transparent 68%);
mix-blend-mode: screen; pointer-events: none; z-index: 1;
opacity: 0; transition: opacity 0.6s var(--ease-out);
will-change: transform;
}
html[data-theme="slate"] .lux-spot {
background: radial-gradient(circle, rgba(96, 165, 250, 0.09) 0%, rgba(96, 165, 250, 0.03) 42%, transparent 68%);
}
.lux-spot.on { opacity: 1; }
/* ---- 5. Typography polish ---- */
.display-xl, .display-lg, .display-md { text-wrap: balance; }
/* Magnetic CTAs + rail tilt are transform-composable via the
`translate` property, driven by the shared pointer module in
head.php. The lift below smooths their spring-back. */
.btn-clay, .nav-cta-phone { transition-property: background, transform, translate, box-shadow, color; transition-duration: .25s, .25s, .45s, .25s, .25s; }
.hero-rail, .svc-hero-rail { transition: transform 0.5s var(--ease-out); }
/* ============================================================
QUOTE FORM — validation states & decoy fields
============================================================ */
/* Decoy wrapper: hidden from humans without using display:none,
which pattern-matching bots check for. */
.qf-extra {
position: absolute !important;
width: 1px; height: 1px;
overflow: hidden;
clip-path: inset(50%);
white-space: nowrap;
}
.qform-label-opt { text-transform: none; font-weight: 500; letter-spacing: 0.02em; opacity: 0.75; }
.qform-field-err {
display: block;
font-size: 0.78rem;
color: #b91c1c;
margin-top: 6px;
min-height: 0;
}
.qform-field-err:empty { display: none; }
.qform-input.is-invalid { border-color: #dc8181; }
.qform-input.is-invalid:focus { border-color: #dc2626; box-shadow: 0 0 0 4px rgba(220,38,38,0.10); }
/* ============================================================
ROTATING SEAL — breaks the hero → brand-strip boundary.
Circular mono text spins slowly; center arrow invites the
click through to the quote form. The one element on the page
allowed to cross a fold.
============================================================ */
.seal-anchor { position: relative; height: 0; z-index: 6; }
.seal {
position: absolute; top: -74px; right: clamp(3%, 6vw, 8%);
width: 148px; height: 148px; display: block;
}
.seal-disc {
position: absolute; inset: 0; border-radius: 50%;
background: var(--paper-card); border: 1px solid var(--line);
box-shadow: var(--sh-md);
}
.seal-svg { position: absolute; inset: 0; width: 100%; height: 100%;
animation: sealSpin 18s linear infinite; transform-origin: 50% 50%; }
.seal-svg text {
font-family: var(--mono); font-size: 10.5px; font-weight: 500;
letter-spacing: 0.215em; text-transform: uppercase; fill: var(--ink-soft);
}
.seal-arrow {
position: absolute; top: 50%; left: 50%;
transform: translate(-50%, -50%);
color: var(--clay); font-size: 1rem;
transition: transform 0.45s var(--ease-out);
}
.seal:hover .seal-arrow { transform: translate(-50%, -50%) rotate(45deg); }
.seal:hover .seal-disc { border-color: color-mix(in srgb, var(--clay) 40%, var(--line)); }
@keyframes sealSpin { to { transform: rotate(360deg); } }
@media (max-width: 900px) { .seal { display: none; } }
@media (prefers-reduced-motion: reduce) { .seal-svg { animation: none; } }
/* Ledger corner ticks on the stats band */
.numbers .wrap { position: relative; }
.numbers .wrap::before, .numbers .wrap::after {
content: ""; position: absolute; width: 14px; height: 14px;
border-color: var(--hair-strong); border-style: solid; pointer-events: none;
}
.numbers .wrap::before { top: 14px; left: 14px; border-width: 1px 0 0 1px; }
.numbers .wrap::after { bottom: 14px; right: 14px; border-width: 0 1px 1px 0; }
/* 4-up spec index for the homepage "Roofing Systems We Install" section */
.spec-grid--four { grid-template-columns: repeat(4, 1fr); }
.spec-grid--four .spec-tag { max-width: none; white-space: normal; line-height: 1.5; }
/* Top-align every cell: the base .spec's space-between floats short names to
the bottom, so name baselines landed at four different heights */
.spec-grid--four .spec { justify-content: flex-start; gap: 0.9rem; }
@media (max-width: 900px) { .spec-grid--four { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 540px) { .spec-grid--four { grid-template-columns: 1fr; } }
/* Credentials band — 2×2 editorial grid on the inverted ink section */
.cred-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0; border-top: 1px solid var(--line-ink); border-left: 1px solid var(--line-ink); }
.cred-cell { padding: clamp(1.8rem, 3.5vw, 2.8rem); border-right: 1px solid var(--line-ink); border-bottom: 1px solid var(--line-ink); }
.cred-cell h3 { font-family: var(--display); font-size: 1.5rem; font-weight: 600; color: #fff; margin: 0 0 0.7rem; letter-spacing: -0.01em; }
.cred-cell p { margin: 0; font-size: 0.95rem; line-height: 1.7; color: rgba(246,242,236,0.66); }
.cred-ic { width: 64px; height: 64px; border: 1px solid rgba(255,255,255,0.24); display: flex; align-items: center; justify-content: center; color: var(--clay-bright); font-size: 1.35rem; margin-bottom: 1.3rem; }
@media (max-width: 700px) { .cred-grid { grid-template-columns: 1fr; } }
/* ============================================================
HOMEPAGE DESIGN-AUDIT PASS (2026-07)
============================================================ */
/* Bento tiles whose copy is always visible get a deeper scrim so
the paragraph stays legible over bright photo regions */
.bento-feature::after, .bento-tall::after, .bento-card.bento-full::after {
background: linear-gradient(180deg, rgba(16,13,12,0.10) 0%, rgba(16,13,12,0.32) 40%, rgba(16,13,12,0.68) 70%, rgba(16,13,12,0.94) 100%);
}
/* Hero copy hierarchy: the first paragraph leads, the follow-ups sit one
step back (size + tone) so three stacked paragraphs read as a hierarchy */
.hero-main .hero-sub + .hero-sub { font-size: clamp(0.95rem, 1.15vw, 1.06rem); color: rgba(250,247,242,0.86); margin-bottom: 1.55rem; }
/* Process (4-step): the connecting rule draws itself across the step
hairlines when the section enters (uses the existing
.js-reveal .process-row::before scaleX mechanic) */
.process-row--4::before { content:""; display:block; position:absolute; top:0; left:0; width:100%; height:1px; background: var(--clay); opacity:0.5; z-index:1; }
@media (max-width: 900px) { .process-row--4::before { display:none; } }
/* Corner-ticked plate — editorial framed panel (financing, etc.) */
.plate-tick { position:relative; border:1px solid var(--line); background: var(--paper-card); padding: clamp(2rem, 4vw, 3.2rem); }
.plate-tick::before, .plate-tick::after { content:""; position:absolute; width:22px; height:22px; border-color: var(--clay); border-style:solid; pointer-events:none; }
.plate-tick::before { top:-1px; left:-1px; border-width:2px 0 0 2px; }
.plate-tick::after { bottom:-1px; right:-1px; border-width:0 2px 2px 0; }
.plate-ic { width:52px; height:52px; border-radius:50%; background: var(--clay-wash); color: var(--clay-deep); display:flex; align-items:center; justify-content:center; font-size:1.15rem; margin-bottom:1.2rem; }
/* Mono label with a trailing hairline rule (areas headers) */
.mono-rule-label { display:flex; align-items:center; gap:1rem; font-family:var(--mono); font-size:0.72rem; font-weight:500; letter-spacing:0.16em; text-transform:uppercase; color:var(--ink-mute); margin:0 0 1rem; }
.mono-rule-label::after { content:""; flex:1; height:1px; background:var(--line); }
/* Figure caption chrome (mono microtext under editorial figures) */
.fig-cap { font-family:var(--mono); font-size:0.66rem; letter-spacing:0.22em; text-transform:uppercase; color:var(--ink-mute); margin-top:0.8rem; }
/* Map + weather duo: map carries the row (2:1), print-style grayscale
that lifts on hover; hairline plates instead of floating shadows */
.svc-duo--map { grid-template-columns: 2fr 1fr; }
@media (max-width: 900px) { .svc-duo--map { grid-template-columns: 1fr; } }
.duo-label { font-family:var(--mono); font-size:0.68rem; letter-spacing:0.2em; text-transform:uppercase; color:var(--ink-mute); margin-bottom:0.7rem; display:flex; align-items:center; gap:0.9rem; }
.duo-label::after { content:""; flex:1; height:1px; background:var(--line); }
.map-plate { border:1px solid var(--line); border-radius: var(--radius-sm); overflow:hidden; min-height:420px; background:var(--paper-card); }
.map-plate iframe { filter: grayscale(1) sepia(0.14); transition: filter .6s var(--ease-out); display:block; }
.map-plate:hover iframe { filter: none; }
.wx-plate { background: var(--paper-card); border:1px solid var(--line); border-radius: var(--radius-sm); padding:1.4rem; display:flex; flex-direction:column; justify-content:center; flex:1; }
/* ============================================================
ELEVATION PASS — chapter grammar, collision headings, ticker,
ruled rows, word-fill, plate photography, grid crosshairs
============================================================ */
/* --- Chapter bar: the repeated section-opening grammar.
A 2px ledger rule with the mono index + running label ON it. --- */
.chapter { display:flex; align-items:center; gap:1.2rem; border-top:2px solid var(--ink); padding-top:0.85rem; margin-bottom:2.8rem;
font-family:var(--mono); font-size:0.72rem; font-weight:500; letter-spacing:0.18em; text-transform:uppercase; color:var(--ink-mute); }
.chapter .ch-no { color:var(--clay); font-weight:600; letter-spacing:0.06em; }
.chapter .ch-line { flex:1; height:1px; background:var(--line); }
.chapter--light { border-top-color: rgba(246,242,236,0.9); color: rgba(246,242,236,0.55); }
.chapter--light .ch-no { color: var(--clay-bright); }
.chapter--light .ch-lab { color: var(--clay-bright); }
.chapter--light .ch-line { background: var(--line-ink); }
/* --- Heading collision: every display heading repeats the hero's
serif-italic accent — the page's typographic signature --- */
.display-lg em, .display-md em { font-style: italic; color: var(--clay); font-variation-settings: "opsz" 96, "SOFT" 40; letter-spacing: -0.01em; }
.bg-ink .display-lg em, .bg-ink .display-md em, .cta .display-lg em, .cta .display-md em { color: var(--clay-bright); }
/* --- Services ticker: inverted energy band under the hero --- */
.svc-ticker { position:relative; background: var(--ink); border-top: 2px solid var(--clay); border-bottom: 2px solid var(--clay); overflow:hidden; padding: 1.1rem 0; }
.svc-ticker .tk-track { display:flex; width:max-content; animation: tkScroll 30s linear infinite; }
.svc-ticker:hover .tk-track { animation-play-state: paused; }
.svc-ticker .tk-set { display:flex; align-items:center; gap: 2.4rem; padding-right: 2.4rem; flex: 0 0 auto; }
.svc-ticker .tk-word { font-family: var(--sans); font-weight: 700; font-size: 1rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--paper); white-space: nowrap; }
.svc-ticker .tk-word--ser { font-family: var(--display); font-style: italic; font-weight: 500; font-size: 1.3rem; letter-spacing: 0; text-transform: none; color: var(--clay-bright); }
.svc-ticker .tk-dot { width: 6px; height: 6px; background: var(--clay); transform: rotate(45deg); flex-shrink: 0; }
@keyframes tkScroll { to { transform: translateX(-25%); } }
@media (prefers-reduced-motion: reduce) { .svc-ticker .tk-track { animation: none; } }
/* --- Ruled rows: full-width editorial index (additional services) ---
Hover indent is transform-only (compositor) on the three content
cells, NOT padding-left on the grid container. Animating padding on
a grid box forces a full track-layout recompute every frame — that
reflow-driven jank was fighting the background wash's smooth
transform, which is why the hover read as rough. */
.ruled-rows { border-top: 2px solid var(--ink); }
.rrow { display:grid; grid-template-columns: 84px 0.85fr 1.5fr; gap: 2rem; padding: 1.9rem 0.4rem 1.9rem 0; border-bottom: 1px solid var(--line); position:relative; }
.rrow::before { content:""; position:absolute; inset:0; background: linear-gradient(90deg, var(--clay-wash), transparent 65%); opacity:0; transform: translateX(-14px); transition: opacity .5s var(--ease-out), transform .5s var(--ease-out); pointer-events:none; }
.rr-no { font-family: var(--display); font-style: italic; font-weight: 500; font-size: 1.2rem; color: var(--ink-mute); padding-top: 0.3rem; position:relative; transition: transform .5s var(--ease-out), color .4s var(--ease-out); }
.rrow h3 { font-size: clamp(1.35rem, 1.9vw, 1.8rem); margin: 0; letter-spacing: -0.015em; position:relative; transition: transform .5s var(--ease-out); }
.rr-body { position:relative; transition: transform .5s var(--ease-out); }
.rr-body p { color: var(--ink-mute); margin: 0; font-size: 0.98rem; line-height: 1.65; max-width: 60ch; }
.rr-body .rr-links { margin-top: 0.7rem; }
.rr-sep { color: var(--line); margin: 0 0.5rem; }
@media (hover:hover) {
.rrow:hover .rr-no, .rrow:hover h3, .rrow:hover .rr-body { transform: translateX(18px); }
.rrow:hover::before { opacity: 1; transform: none; }
.rrow:hover .rr-no { color: var(--clay); }
}
@media (max-width: 800px) {
.rrow { grid-template-columns: 1fr; gap: 0.45rem; padding: 1.5rem 0; }
.rr-no { padding-top: 0; }
}
/* --- Word-fill manifesto: large serif statement whose words turn
from ghost to ink as the section enters --- */
.manifesto-fill { font-family: var(--display); font-weight: 400; font-size: clamp(1.28rem, 1.8vw, 1.66rem); line-height: 1.52; letter-spacing: -0.01em; color: var(--ink); text-wrap: pretty; font-variation-settings: "opsz" 40, "SOFT" 30; }
.manifesto-fill .w { transition: opacity .55s var(--ease-out); }
.manifesto-fill.wf-armed .w { opacity: 0.13; }
.manifesto-fill.wf-armed.wf-in .w { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .manifesto-fill .w { opacity: 1 !important; transition: none; } }
/* --- Photo plate: hairline frame + inset viewfinder ticks --- */
.svc-figure--plate .svc-figure-clip { border-radius: var(--radius-sm); box-shadow: var(--sh-sm); border: 1px solid var(--line); position: relative; }
.svc-figure--plate .svc-figure-clip::before, .svc-figure--plate .svc-figure-clip::after { content:""; position:absolute; width:20px; height:20px; border-style:solid; border-color: rgba(255,255,255,0.92); z-index:2; pointer-events:none; }
.svc-figure--plate .svc-figure-clip::before { top:13px; left:13px; border-width:2px 0 0 2px; }
.svc-figure--plate .svc-figure-clip::after { bottom:13px; right:13px; border-width:0 2px 2px 0; }
/* --- Squared editorial icon chips (why-choose list) --- */
.craft-list--sq .craft-item-ic-badge { border-radius: 0; background: transparent; border: 1px solid var(--line); color: var(--clay); }
.craft-list--sq .craft-item:hover .craft-item-ic-badge { background: var(--clay); border-color: var(--clay); color:#fff; transform: none; }
/* --- Roofing systems: crosshair marks at grid intersections + bigger names --- */
.spec-grid--four .spec-name { font-size: 1.5rem; }
.spec-grid--four .spec:not(:first-child)::before { content:"+"; position:absolute; top:-0.64em; left:-0.34em; font-family:var(--mono); font-weight:400; font-size:1rem; line-height:1; color: var(--ink-mute); opacity:0.65; z-index:2; pointer-events:none; }
/* --- Credentials cells: quiet hover + mono cell index --- */
.cred-cell { position: relative; transition: background .45s var(--ease-out); }
.cred-cell:hover { background: rgba(255,255,255,0.03); }
.cred-cell .cred-no { position:absolute; top:1.5rem; right:1.7rem; font-family:var(--mono); font-size:0.68rem; letter-spacing:0.16em; color: rgba(246,242,236,0.32); }
.cred-ic { transition: background .45s var(--ease-out), border-color .45s var(--ease-out); }
.cred-cell:hover .cred-ic { border-color: var(--clay-bright); background: rgba(207,96,55,0.10); }
/* --- Areas: ghost state-outline watermark + squared badges --- */
#service-areas { overflow: hidden; }
#service-areas .wrap { position: relative; }
#service-areas .wrap::after { content:"IL"; position:absolute; right:-1rem; top:46%; transform:translateY(-50%); font-family:var(--display); font-style:italic; font-weight:600; font-size:clamp(11rem,20vw,19rem); line-height:1; color:transparent; -webkit-text-stroke: 1.5px var(--ink); opacity:0.05; pointer-events:none; user-select:none; z-index:0; }
#service-areas .areas-pills, #service-areas .mono-rule-label { position:relative; z-index:1; }
#service-areas .area-badge { border-radius: 4px; }
/* ============================================================
COMPANY & LEGAL PAGES — about-us, contact-us, privacy, terms
============================================================ */
/* Compact ink document header (legal pages — no photo, pure typography) */
.doc-hero { padding: clamp(4rem, 7vw, 6.5rem) 0 clamp(3rem, 5vw, 4.5rem); }
.doc-hero h1 { color: var(--paper); }
/* Effective-date chip — verbatim content presented as a ledger stamp */
.date-chip { display: inline-flex; align-items: center; gap: 0.6rem; font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(246,242,236,0.72); border: 1px solid var(--line-ink); padding: 0.55rem 0.95rem; margin-top: 1.4rem; }
.date-chip strong { color: var(--clay-bright); font-weight: 600; }
/* Editorial legal document — auto-numbered sections in the mono ledger voice */
.legal-doc { max-width: 780px; counter-reset: lsec; }
.legal-intro { font-size: 1.06rem; line-height: 1.75; color: var(--ink-soft); }
.legal-sec { border-top: 1px solid var(--line); padding-top: 2rem; margin-top: 2.6rem; }
.legal-sec h2 { font-size: clamp(1.35rem, 2vw, 1.75rem); letter-spacing: -0.015em; margin: 0 0 1rem; display: flex; align-items: baseline; gap: 1rem; }
.legal-sec h2::before { counter-increment: lsec; content: "[ " counter(lsec, decimal-leading-zero) " ]"; font-family: var(--mono); font-size: 0.7rem; font-weight: 600; letter-spacing: 0.08em; color: var(--clay); flex-shrink: 0; transform: translateY(-0.25em); }
.legal-doc p { color: var(--ink-mute); line-height: 1.75; margin: 0 0 1rem; }
.legal-doc p strong { color: var(--ink); font-weight: 600; }
.legal-doc ul { list-style: none; margin: 0.2rem 0 1.2rem; padding: 0; }
.legal-doc ul li { position: relative; padding: 0.32rem 0 0.32rem 1.5rem; color: var(--ink-soft); line-height: 1.6; }
.legal-doc ul li::before { content: ""; position: absolute; left: 2px; top: 0.92em; width: 7px; height: 7px; background: var(--clay); opacity: 0.55; transform: rotate(45deg); }
.legal-doc a { color: var(--clay-deep); text-decoration: underline; text-underline-offset: 3px; transition: color .25s; }
.legal-doc a:hover { color: var(--clay); }
/* Dotted-leader detail rows (contact blocks) — label ····· value */
.d-rows { margin-top: 0.4rem; }
.d-row { display: flex; align-items: baseline; gap: 0.9rem; padding: 0.85rem 0; border-bottom: 1px solid var(--line); }
.d-row:last-child { border-bottom: none; }
.d-row .d-lab { font-family: var(--mono); font-size: 0.68rem; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-mute); white-space: nowrap; }
.d-row .d-dots { flex: 1; min-width: 24px; border-bottom: 1px dotted var(--line); transform: translateY(-4px); }
.d-row .d-val { font-weight: 600; color: var(--ink); text-align: right; line-height: 1.5; }
.d-row .d-val a { color: var(--clay-deep); transition: color .25s; }
.d-row .d-val a:hover { color: var(--clay); }
@media (max-width: 540px) {
.d-row { flex-direction: column; gap: 0.25rem; }
.d-row .d-dots { display: none; }
.d-row .d-val { text-align: left; }
}
/* Credentials checklist (about page) — ruled two-column check rows */
.check-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 2.6rem; }
.check-item { display: flex; align-items: flex-start; gap: 0.85rem; padding: 0.95rem 0; border-bottom: 1px solid var(--line); color: var(--ink-soft); line-height: 1.55; }
.check-item i { color: var(--clay); font-size: 0.82rem; margin-top: 0.35em; flex-shrink: 0; }
.check-item strong { color: var(--ink); font-weight: 600; }
@media (max-width: 700px) { .check-grid { grid-template-columns: 1fr; } }
/* 5-up estimate-factors index (contact page) */
.spec-grid--five { grid-template-columns: repeat(5, 1fr); }
.spec-grid--five .spec { min-height: 150px; }
@media (max-width: 1000px) { .spec-grid--five { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 640px) { .spec-grid--five { grid-template-columns: 1fr; } .spec-grid--five .spec { min-height: 0; } }
/* ============================================================
LOCATION-PAGE PROCESS PATH — "Our Roofing Process"
Graphic 3-step sequence: medallion icon + ghost numeral on a
drawn horizontal path, replacing the bare craft-list treatment.
============================================================ */
.proc-path { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.6rem, 4vw, 2.6rem); margin-top: 1rem; }
/* drawn connecting line runs across the icon row; the medallions sit in
normal flow on top of it with an opaque background + higher z-index,
so the line visually terminates at each circle's edge rather than
requiring fragile percentage math to dodge it. */
.proc-path::before {
content: ""; position: absolute; top: 34px; left: 0; right: 0;
height: 1px; background: var(--line); z-index: 0;
}
.proc-path::after {
content: ""; position: absolute; top: 34px; left: 0; right: 0;
height: 1px; background: var(--clay); z-index: 0; transform-origin: left; transform: scaleX(0);
}
.js-reveal .proc-path.in::after { transition: transform 1.3s var(--ease-out) .15s; transform: scaleX(1); }
@media (prefers-reduced-motion: reduce) { .proc-path::after { transform: scaleX(1); } }
.proc-step { position: relative; z-index: 1; text-align: left; }
.proc-step-top { display: flex; align-items: center; gap: 0.9rem; margin-bottom: 1.3rem; }
.proc-medal {
width: 68px; height: 68px; flex-shrink: 0; border-radius: 50%;
background: var(--paper-card); border: 1.5px solid var(--line);
display: flex; align-items: center; justify-content: center;
font-size: 1.35rem; color: var(--clay-deep);
box-shadow: var(--sh-sm);
position: relative; z-index: 2;
transition: background .4s var(--ease-out), border-color .4s var(--ease-out), color .4s var(--ease-out), transform .4s var(--ease-out);
}
.proc-step:hover .proc-medal { background: var(--clay); border-color: var(--clay); color: #fff; transform: translateY(-4px); }
/* ghost numeral sits beside the medallion, not behind it — avoids the
icon/numeral collision from centering both on the same point */
.proc-ghost { font-family: var(--display); font-weight: 600; font-style: italic; font-size: 2rem; color: var(--line); line-height: 1; margin-left: auto; padding-left: 0.6rem; position: relative; z-index: 2; background: var(--paper-2); transition: color .4s var(--ease-out); }
.proc-step:hover .proc-ghost { color: var(--clay); }
.proc-step h3 { font-size: clamp(1.15rem, 1.6vw, 1.35rem); margin: 0 0 0.55rem; letter-spacing: -0.01em; }
.proc-step p { color: var(--ink-mute); font-size: 0.95rem; line-height: 1.65; margin: 0; max-width: 34ch; }
@media (max-width: 780px) {
.proc-path { grid-template-columns: 1fr; gap: 2.2rem; }
.proc-path::before, .proc-path::after { display: none; }
.proc-step { padding-left: 1.6rem; border-left: 2px solid var(--line); }
.proc-step:hover { border-left-color: var(--clay); }
}
/* ============================================================
PREMIUM AUDIT PASS (ui-ux-pro-max + design method) — 2026-07
CSS/layout only; content untouched.
============================================================ */
/* --- 1. Hero H1: masked lines must never wrap. Measured: the italic
line needs 838px at the old 4.8rem cap vs an 818px column
(>=1385px viewports) — it wrapped into a ragged 4th line.
4.5rem cap + slightly gentler slope fits every line at every
width >=901px with margin; below that, wrapping inside the
mask is the accepted mobile compromise. --- */
@media (min-width: 901px) {
.hero-title { font-size: clamp(2.7rem, 5.6vw, 4.5rem); }
.hero-title .line > span { white-space: nowrap; }
}
/* --- 2. Roofing Systems: specimen-plate treatment. Ghost serif
numeral fills the cell's dead space; names stay top-aligned. --- */
.spec-grid--four .spec { min-height: 235px; padding: 2rem 1.6rem 1.8rem; }
.spec-grid--four .spec-no { position: absolute; top: 0.7rem; right: 1.1rem; font-family: var(--display); font-style: italic; font-weight: 600; font-size: 4.6rem; line-height: 1; letter-spacing: -0.03em; color: var(--ink); opacity: 0.055; transition: color .45s var(--ease-out), opacity .45s var(--ease-out); }
.spec-grid--four .spec:hover .spec-no { color: var(--clay); opacity: 0.16; }
.spec-grid--four .spec > span:last-child { position: relative; z-index: 1; max-width: 88%; }
.spec-grid--four .spec:not(:first-child)::before { opacity: 0.85; color: var(--ink-soft); }
@media (max-width: 640px) { .spec-grid--four .spec { min-height: 0; } }
/* --- 3. Credentials: giant ghost numerals give the big dark cells
material depth (pure CSS counters — no markup change). --- */
.cred-grid { counter-reset: credn; }
.cred-cell { counter-increment: credn; overflow: hidden; }
.cred-cell::after { content: counter(credn, decimal-leading-zero); position: absolute; right: 0.9rem; bottom: -1.2rem; font-family: var(--display); font-style: italic; font-weight: 600; font-size: 7rem; line-height: 1; color: #fff; opacity: 0.045; pointer-events: none; transition: opacity .45s var(--ease-out); }
.cred-cell:hover::after { opacity: 0.09; }
/* --- 4. Why-Choose list: serif numerals as the anchor, larger
headings, more row air (scoped to the homepage's --sq list). --- */
.craft-list--sq .craft-item { padding: 1.9rem 0; gap: 1.4rem; }
.craft-list--sq .craft-item h3 { font-size: clamp(1.3rem, 1.8vw, 1.55rem); }
.craft-list--sq .craft-item-ic .craft-no { font-family: var(--display); font-style: italic; font-weight: 600; font-size: 1.45rem; color: var(--clay); }
.craft-list--sq .craft-item-ic-badge { width: 52px; height: 52px; font-size: 1.15rem; }
/* taller figure so the photo column balances the manifesto column */
.svc-figure--plate img { aspect-ratio: 4/4.7; }
/* --- 5. Financing plate: watermark the plate's own icon into the
empty right side (aria-hidden span added in markup). --- */
.plate-wm { position: absolute; right: clamp(0.6rem, 4vw, 2.6rem); top: 50%; transform: translateY(-50%); font-size: clamp(6.5rem, 12vw, 10.5rem); color: var(--clay); opacity: 0.05; pointer-events: none; z-index: 0; }
.plate-tick--wm { overflow: hidden; }
.plate-tick--wm > :not(.plate-wm) { position: relative; z-index: 1; }
@media (max-width: 700px) { .plate-wm { display: none; } }
/* --- 6. Bento keyboard access: reveal descriptions on focus too
(hover-only reveal is an accessibility anti-pattern). --- */
.bento-card:focus-visible { outline: 2px solid var(--clay-bright); outline-offset: 3px; }
.bento-card:focus-visible p { max-height: 8em; opacity: 1; transform: none; margin-top: 0.55rem; }
.bento-card:focus-visible .b-link::after { transform: scaleX(1); background: var(--clay-bright); }
/* --- 8. Keyboard focus parity site-wide --- */
a:focus-visible, button:focus-visible { outline: 2px solid var(--clay); outline-offset: 3px; }
|