/* Levy's Construction — hi-fi site */
/* Self-hosted fonts (variable woff2, latin subset). Replaces Google Fonts CDN:
removes a third-party processor (GDPR) + render-blocking cross-origin fetch. */
@font-face {
font-family: 'Montserrat';
font-style: normal;
font-weight: 400 800;
font-display: swap;
src: url('fonts/montserrat-latin.woff2') format('woff2');
}
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 400 600;
font-display: swap;
src: url('fonts/inter-latin.woff2') format('woff2');
}
:root {
--paper: #f5f7f8;
--paper-2: #e7ecee;
--paper-3: #d8dfe3;
--ink: #162b3d;
--ink-2: #2e4763;
--ink-3: #637a92;
--ink-4: #a5b3c2;
--accent: #4ba89e; /* sea glass */
--accent-2: #e17858; /* sunset coral */
--accent-soft: #dbeae6;
--line: rgba(22,43,61,0.14);
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
font-family: 'Inter', system-ui, sans-serif;
background: var(--paper);
color: var(--ink);
font-size: 17px;
line-height: 1.6;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
.serif { font-family: 'Montserrat', system-ui, sans-serif; font-weight: 400; letter-spacing: -0.01em; }
.mono { font-family: 'Montserrat', system-ui, sans-serif; font-weight: 600; font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; }
.mono-lower { font-family: 'Montserrat', system-ui, sans-serif; font-weight: 600; font-size: 12px; letter-spacing: 0.02em; }
a { color: inherit; text-decoration: none; }
/* ---------- Nav ---------- */
.nav {
position: fixed; top: 0; left: 0; right: 0;
z-index: 80;
padding: 22px 40px;
display: flex; align-items: center; justify-content: space-between;
transition: background 0.3s, backdrop-filter 0.3s, padding 0.3s, color 0.3s;
color: #fff;
mix-blend-mode: normal;
}
.nav.scrolled {
background: rgba(245,247,248,0.92);
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
padding: 14px 40px;
color: var(--ink);
border-bottom: 1px solid var(--line);
}
.nav .brand {
font-family: 'Montserrat', system-ui, sans-serif;
font-size: 18px;
font-weight: 700;
letter-spacing: -0.01em;
display: flex; align-items: center; gap: 10px;
text-transform: uppercase;
}
.nav .brand .mark {
width: 10px; height: 10px; background: var(--accent);
display: inline-block;
}
/* House-mark icon shown next to the wordmark in the nav.
Rendered via CSS mask so the SVG file (external, cached) can be
themed with currentColor — light on the home hero, dark elsewhere. */
.nav .brand .brand-icon {
display: inline-block;
width: 32px; height: 32px;
flex-shrink: 0;
background-color: currentColor;
-webkit-mask: url('levys-icon.svg') center/contain no-repeat;
mask: url('levys-icon.svg') center/contain no-repeat;
}
.nav > ul {
list-style: none; display: flex; gap: 28px;
align-items: center;
font-family: 'Montserrat', system-ui, sans-serif; font-weight: 600;
font-size: 11px;
letter-spacing: 0.1em;
text-transform: uppercase;
}
.nav > ul > li {
display: inline-flex;
align-items: center;
position: relative;
}
/* Invisible bridge filling the 14px visual gap between trigger and mega panel */
.nav > ul > li.has-menu::after {
content: '';
position: absolute;
top: 100%;
left: -20px;
right: -20px;
height: 18px;
pointer-events: auto;
}
.nav > ul > li > a {
display: inline-flex;
align-items: center;
line-height: 1;
padding: 6px 0;
position: relative;
cursor: pointer;
}
.nav > ul > li.has-menu > .trigger {
display: inline-flex;
align-items: center;
cursor: pointer;
background: transparent;
border: none;
font: inherit;
color: inherit;
padding: 6px 16px 6px 0;
line-height: 1;
letter-spacing: inherit;
text-transform: inherit;
position: relative;
}
.nav ul a { position: relative; padding: 6px 0; cursor: pointer; }
.nav ul a::after {
content: ''; position: absolute; left: 0; right: 0; bottom: 0;
height: 1px; background: currentColor;
transform: scaleX(0); transform-origin: left;
transition: transform 0.25s ease;
}
.nav ul a:hover::after, .nav ul a.active::after { transform: scaleX(1); }
.lang {
display: inline-flex; gap: 0;
font-family: 'Montserrat', system-ui, sans-serif; font-weight: 600;
font-size: 10px; letter-spacing: 0.1em;
border: 1px solid currentColor;
}
.lang span {
padding: 4px 8px; cursor: pointer;
}
/* Default (transparent nav, white text) — active pill is white fill, dark ink text */
.lang span.on { background: #fff; color: var(--ink); }
/* Scrolled (light nav, dark text) — active pill is dark ink, paper text */
.nav.scrolled .lang span.on { background: var(--ink); color: var(--paper); }
/* ---------- Sections ---------- */
section { position: relative; }
.container { max-width: 1400px; margin: 0 auto; padding: 0 40px; }
.container.narrow { max-width: 1120px; }
.eyebrow {
font-family: 'Montserrat', system-ui, sans-serif; font-weight: 600;
font-size: 11px;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--ink-3);
display: inline-flex; align-items: center; gap: 10px;
}
.eyebrow::before {
content: ''; width: 24px; height: 1px; background: currentColor;
}
h1, h2, h3 { font-family: 'Montserrat', system-ui, sans-serif; font-weight: 700; letter-spacing: -0.02em; }
h1 { font-size: clamp(48px, 6.2vw, 92px); line-height: 1.0; font-weight: 800; }
h2 { font-size: clamp(34px, 4vw, 58px); line-height: 1.05; font-weight: 700; }
h3 { font-size: clamp(20px, 1.8vw, 26px); line-height: 1.2; font-weight: 600; }
p { color: var(--ink-2); max-width: 58ch; }
/* ---------- Buttons ---------- */
.btn {
display: inline-flex; align-items: center; gap: 10px;
padding: 14px 22px;
font-family: 'Montserrat', system-ui, sans-serif; font-weight: 600;
font-size: 11px; letter-spacing: 0.14em;
text-transform: uppercase;
border: 1px solid var(--ink);
background: var(--ink); color: var(--paper);
cursor: pointer;
transition: background 0.2s, color 0.2s, transform 0.2s;
}
.btn:hover { background: var(--accent); border-color: var(--accent); color: var(--ink); }
.btn.ghost { background: transparent; color: var(--ink); }
.btn.ghost:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.btn.light { background: transparent; color: #fff; border-color: rgba(255,255,255,0.85); }
.btn.light:hover { background: #fff; color: var(--ink); border-color: #fff; }
.btn.primary { background: var(--accent); color: #fff; border-color: var(--accent); }
.btn.primary:hover { background: #fff; color: var(--ink); border-color: #fff; }
.btn .arrow { display: inline-block; transition: transform 0.2s; }
.btn:hover .arrow { transform: translateX(4px); }
/* ---------- Placeholder image ---------- */
.ph {
background:
linear-gradient(135deg, rgba(28,28,28,0.08), rgba(28,28,28,0.02)),
repeating-linear-gradient(45deg, var(--paper-2) 0 14px, var(--paper-3) 14px 28px);
color: var(--ink-3);
display: flex; align-items: flex-end; justify-content: flex-start;
padding: 16px;
font-family: 'Montserrat', system-ui, sans-serif; font-weight: 600;
font-size: 10px;
letter-spacing: 0.1em;
text-transform: uppercase;
position: relative;
overflow: hidden;
}
.ph.dark {
background:
linear-gradient(135deg, rgba(0,0,0,0.45), rgba(0,0,0,0.15)),
repeating-linear-gradient(45deg, #2a2622 0 14px, #35302a 14px 28px);
color: rgba(255,255,255,0.8);
}
.ph::after {
content: ''; position: absolute; inset: 10px;
border: 1px solid rgba(28,28,28,0.15);
pointer-events: none;
}
.ph.dark::after { border-color: rgba(255,255,255,0.2); }
/* ---------- Real photos inside placeholders ---------- */
/* Drop 
inside any .ph / .ph-slot / .hero-photo / .pf-card .ph */
.ph-img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
z-index: 1;
display: block;
}
/* When a placeholder has an image, hide the striped pattern + label + border */
.ph.has-img,
.ph-slot.has-img,
.hero-photo.has-img,
.side-photo.has-img,
.div-photo.has-img {
background-image: none;
}
.ph.has-img::before,
.ph.has-img::after,
.ph-slot.has-img::before,
.hero-photo.has-img::before,
.side-photo.has-img::before,
.div-photo.has-img::before {
display: none;
}
.has-img .ph-label { display: none; }
.has-img > span:not(.ph-label) {
position: relative;
z-index: 2;
color: #fff;
text-shadow: 0 2px 8px rgba(0,0,0,0.6);
}
/* ---------- HERO (L-01) ---------- */
.hero {
position: relative;
height: 100vh;
min-height: 720px;
color: #fff;
overflow: hidden;
}
.hero .ph {
position: absolute; inset: 0;
background:
linear-gradient(180deg, rgba(0,0,0,0.35) 0%, rgba(0,0,0,0.2) 40%, rgba(0,0,0,0.7) 100%),
repeating-linear-gradient(45deg, #2a2622 0 14px, #35302a 14px 28px);
padding: 0;
}
.hero .ph::after { display: none; }
.hero .ph-label {
position: absolute;
bottom: 28px; right: 40px;
font-family: 'Montserrat', system-ui, sans-serif; font-weight: 600;
font-size: 10px;
letter-spacing: 0.1em;
text-transform: uppercase;
color: rgba(255,255,255,0.55);
}
.hero .content {
position: relative; z-index: 2;
height: 100%;
padding: 0 40px;
max-width: 1400px;
margin: 0 auto;
display: grid;
grid-template-rows: 1fr auto;
padding-top: 140px;
padding-bottom: 48px;
}
.hero h1 {
max-width: 14ch;
}
.hero .lede {
margin-top: 24px;
max-width: 44ch;
color: rgba(255,255,255,0.88);
font-size: 19px;
line-height: 1.55;
}
.hero .cta-row { margin-top: 32px; display: flex; gap: 12px; flex-wrap: wrap; }
.hero .foot {
align-self: end;
display: grid; grid-template-columns: 1fr 1fr 1fr 1fr;
gap: 24px;
padding-top: 28px;
border-top: 1px solid rgba(255,255,255,0.25);
color: rgba(255,255,255,0.85);
}
.hero .foot .stat .num {
font-family: 'Montserrat', system-ui, sans-serif;
font-weight: 700;
font-size: 42px;
line-height: 1;
color: #fff;
}
.hero .foot .stat .lbl {
margin-top: 6px;
font-family: 'Montserrat', system-ui, sans-serif; font-weight: 600;
font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase;
color: rgba(255,255,255,0.6);
}
.hero .scroll-cue {
position: absolute;
bottom: 24px; left: 50%; transform: translateX(-50%);
font-family: 'Montserrat', system-ui, sans-serif; font-weight: 600;
font-size: 10px; letter-spacing: 0.2em;
color: rgba(255,255,255,0.6);
z-index: 3;
animation: bob 2.4s ease-in-out infinite;
}
@keyframes bob { 0%,100%{transform: translate(-50%, 0);} 50%{transform: translate(-50%, 6px);} }
/* ---------- Marquee ---------- */
.marquee {
border-top: 1px solid var(--line);
border-bottom: 1px solid var(--line);
overflow: hidden;
background: var(--paper);
contain: layout paint;
}
.marquee-track {
display: flex; gap: 48px;
padding: 18px 0;
animation: roll 40s linear infinite;
white-space: nowrap;
font-family: 'Montserrat', system-ui, sans-serif; font-weight: 600;
font-size: 12px; letter-spacing: 0.1em;
color: var(--ink-2);
will-change: transform;
transform: translate3d(0, 0, 0);
}
.marquee-track span::before { content: '◆'; color: var(--accent); margin-right: 12px; }
@keyframes roll { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-50%, 0, 0); } }
/* ---------- Services strip ---------- */
.services {
padding: 120px 0;
}
.services .grid {
display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px;
margin-top: 60px;
background: var(--line);
border: 1px solid var(--line);
}
.service {
background: var(--paper);
padding: 36px 32px 32px;
min-height: 300px;
display: flex; flex-direction: column; justify-content: space-between;
transition: background 0.25s;
cursor: default;
}
.service:hover { background: var(--paper-2); }
.service .num {
font-family: 'Montserrat', system-ui, sans-serif; font-weight: 600;
font-size: 10px; letter-spacing: 0.16em; color: var(--ink-3);
}
.service h3 { margin-top: 14px; }
.service p { font-size: 15px; margin-top: 10px; }
.service .more {
margin-top: 20px;
font-family: 'Montserrat', system-ui, sans-serif; font-weight: 600;
font-size: 10px; letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--ink);
}
/* ---------- Section header ---------- */
.section-head {
display: grid; grid-template-columns: 1fr 1.4fr; gap: 48px;
align-items: end;
}
.section-head .right { max-width: 52ch; }
/* ---------- About (A-03 photo essay) ---------- */
.about { padding: 140px 0 120px; background: var(--paper); }
.about .bleed {
margin-top: 80px;
height: 60vh; min-height: 420px;
position: relative;
}
.about .bleed .ph { position: absolute; inset: 0; }
.about .essay {
margin-top: 0;
display: grid;
grid-template-columns: 1fr 1fr;
border-top: 1px solid var(--line);
}
.about .essay > div {
padding: 56px 48px;
min-height: 320px;
border-right: 1px solid var(--line);
border-bottom: 1px solid var(--line);
display: flex; flex-direction: column; justify-content: center;
}
.about .essay > div:nth-child(2n) { border-right: none; }
.about .essay .ph { padding: 0; height: 100%; min-height: 320px; }
.about .essay h3 { margin-bottom: 12px; }
.about .certs {
margin-top: 80px;
display: grid; grid-template-columns: 1fr 2fr; gap: 48px;
align-items: start;
}
.about .certs .chips { display: flex; flex-wrap: wrap; gap: 10px; }
.chip {
display: inline-flex; align-items: center; gap: 8px;
padding: 8px 14px;
border: 1px solid var(--line);
background: var(--paper);
font-family: 'Montserrat', system-ui, sans-serif; font-weight: 600;
font-size: 11px; letter-spacing: 0.06em;
color: var(--ink-2);
}
.chip::before { content: ''; width: 6px; height: 6px; background: var(--accent); }
/* ---------- Portfolio (horizontal infinite) ---------- */
.portfolio {
padding: 80px 0 40px;
background: var(--ink);
color: var(--paper);
position: relative;
overflow: hidden;
}
.portfolio .section-head { grid-template-columns: 1fr auto; align-items: end; }
.portfolio .eyebrow { color: rgba(245,247,248,0.6); }
.portfolio h2 { color: var(--paper); }
.portfolio p { color: rgba(245,247,248,0.7); }
.pf-controls,
.pf-meta {
display: flex; flex-direction: column; align-items: flex-end; gap: 6px;
font-family: 'Montserrat', system-ui, sans-serif; font-weight: 600;
font-size: 11px; letter-spacing: 0.14em;
text-transform: uppercase;
}
.pf-meta .pf-count {
color: var(--paper);
font-size: 13px;
}
.pf-meta .pf-count .tot { color: var(--accent); font-weight: 500; }
.pf-meta .pf-hint { color: rgba(245,247,248,0.5); }
.pf-track-wrap {
margin-top: 40px;
overflow: hidden;
cursor: grab;
-webkit-mask-image: linear-gradient(to right, transparent 0, #000 80px, #000 calc(100% - 80px), transparent 100%);
mask-image: linear-gradient(to right, transparent 0, #000 80px, #000 calc(100% - 80px), transparent 100%);
user-select: none;
contain: layout paint;
}
.pf-track-wrap.dragging { cursor: grabbing; }
.pf-track {
display: flex;
gap: 32px;
width: max-content;
padding: 0;
will-change: transform;
transform: translate3d(0, 0, 0);
}
.pf-card {
flex: 0 0 auto;
width: 520px;
}
.pf-card .ph {
height: 440px;
background:
linear-gradient(135deg, rgba(0,0,0,0.3), rgba(0,0,0,0.1)),
repeating-linear-gradient(45deg, #2a2622 0 14px, #35302a 14px 28px);
color: rgba(255,255,255,0.5);
padding: 0;
}
.pf-card .ph::after { border-color: rgba(255,255,255,0.18); }
.pf-card .meta {
margin-top: 18px;
display: flex; justify-content: space-between; align-items: flex-start; gap: 16px;
}
.pf-card .name {
font-family: 'Montserrat', system-ui, sans-serif;
font-weight: 600;
font-size: 22px; line-height: 1.2;
color: var(--paper);
letter-spacing: -0.01em;
}
.pf-card .detail {
font-family: 'Montserrat', system-ui, sans-serif; font-weight: 600;
font-size: 10px; letter-spacing: 0.12em;
color: rgba(245,247,248,0.55);
text-transform: uppercase;
text-align: right;
flex-shrink: 0;
padding-top: 6px;
}
.pf-card .detail .tag {
display: inline-block; margin-top: 4px;
color: var(--accent);
}
/* ---------- Contact (C-01) ---------- */
.contact {
padding: 140px 0 160px;
background: var(--paper-2);
position: relative;
overflow: visible;
}
.contact .inner { overflow: visible; }
.form { overflow: visible; }
.form .submit-row { padding-bottom: 8px; }
.contact .inner {
display: grid; grid-template-columns: 1fr 1.3fr;
gap: 96px;
align-items: start;
}
.contact .lhs p { margin-top: 20px; }
.contact .lhs .channels {
margin-top: 48px;
border-top: 1px solid var(--line);
}
.contact .channel {
padding: 18px 0;
border-bottom: 1px solid var(--line);
display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 16px; align-items: center;
}
.contact .channel .v { min-width: 0; overflow-wrap: anywhere; word-break: break-word; }
.contact .channel .k { color: var(--ink-3); }
.contact .channel .v { font-family: 'Montserrat', system-ui, sans-serif; font-weight: 600; font-size: 18px; letter-spacing: -0.005em; line-height: 1.35; }
.form {
background: var(--paper);
border: 1px solid var(--line);
padding: 40px;
}
.form .row { display: grid; gap: 20px; }
.form .row.two { grid-template-columns: 1fr 1fr; }
.form .field { display: flex; flex-direction: column; gap: 8px; margin-bottom: 22px; }
.form label,
.form .field-label {
display: block;
font-family: 'Montserrat', system-ui, sans-serif; font-weight: 600;
font-size: 10px; letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--ink-3);
}
.form input[type=text],
.form input[type=email],
.form input[type=tel],
.form select,
.form textarea {
font-family: 'Inter', sans-serif;
font-size: 16px;
padding: 12px 0;
border: none;
border-bottom: 1px solid var(--line);
background: transparent;
color: var(--ink);
outline: none;
transition: border-color 0.2s;
width: 100%;
}
.form input:focus,
.form select:focus,
.form textarea:focus {
border-bottom-color: var(--ink);
}
.form textarea { resize: vertical; min-height: 100px; }
.form .checks { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.form .check {
padding: 10px 14px;
border: 1px solid var(--line);
background: var(--paper);
font-family: 'Montserrat', system-ui, sans-serif; font-weight: 600;
font-size: 11px; letter-spacing: 0.08em;
cursor: pointer;
user-select: none;
transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.form .check:hover { border-color: var(--ink); }
.form .check.on {
background: var(--ink); color: var(--paper); border-color: var(--ink);
}
.form .check::before {
content: '○ '; margin-right: 2px; color: var(--ink-3);
}
.form .check.on::before { content: '● '; color: var(--accent); }
.form .submit-row {
margin-top: 28px;
display: flex; justify-content: space-between; align-items: center;
padding-top: 20px;
border-top: 1px solid var(--line);
}
.form .submit-row .note {
font-family: 'Montserrat', system-ui, sans-serif; font-weight: 600;
font-size: 10px; letter-spacing: 0.1em;
color: var(--ink-3);
}
.form .submit-row .note.success {
color: var(--accent-2);
}
.form .submit-row .note.error {
color: #c0392b;
}
.form .submit-row .note a { color: inherit; text-decoration: underline; }
/* Honeypot — kept in the layout but off-screen so bots fill it and humans don't see it. */
.hp-field {
position: absolute; left: -9999px; width: 1px; height: 1px;
overflow: hidden; opacity: 0;
}
.cf-turnstile { margin-top: 22px; }
/* ---------- Footer ---------- */
footer.site {
background: var(--ink);
color: rgba(245,247,248,0.75);
padding: 80px 0 36px;
}
footer.site .cols {
display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 48px;
}
footer.site h4 {
font-family: 'Montserrat', system-ui, sans-serif; font-weight: 600;
font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase;
color: rgba(245,247,248,0.5);
margin-bottom: 14px;
font-weight: 400;
}
footer.site ul { list-style: none; }
footer.site li { padding: 4px 0; font-size: 15px; }
footer.site li a:hover { color: var(--accent); }
footer.site .bigmark {
font-family: 'Montserrat', system-ui, sans-serif;
font-weight: 700;
font-size: 34px;
color: var(--paper);
line-height: 1.05;
max-width: 16ch;
text-transform: uppercase;
letter-spacing: -0.01em;
}
/* Full wordmark logo used in the footer (replaces .bigmark text). */
footer.site .footer-logo {
display: inline-block;
width: 120px; height: 162px; /* matches 430.69 x 578.88 aspect */
background-color: var(--paper);
-webkit-mask: url('levys-logo.svg') center/contain no-repeat;
mask: url('levys-logo.svg') center/contain no-repeat;
}
footer.site .legal {
margin-top: 64px;
padding-top: 24px;
border-top: 1px solid rgba(245,247,248,0.15);
display: flex; justify-content: space-between;
font-family: 'Montserrat', system-ui, sans-serif; font-weight: 600;
font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase;
color: rgba(245,247,248,0.4);
}
footer.site .legal a { color: inherit; text-decoration: none; }
footer.site .legal a:hover { color: var(--accent); }
/* ---------- Legal / policy document pages ---------- */
.legal-doc { padding: 56px 0 96px; }
.legal-doc .updated {
font-family: 'Montserrat', system-ui, sans-serif; font-weight: 600;
font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase;
color: var(--ink-3); margin-bottom: 36px;
}
.legal-doc h2 {
font-family: 'Montserrat', system-ui, sans-serif; font-weight: 700;
font-size: 23px; letter-spacing: -0.01em;
margin: 44px 0 14px; color: var(--ink);
}
.legal-doc p, .legal-doc li { font-size: 16px; line-height: 1.7; color: var(--ink-2); }
.legal-doc p { margin-bottom: 14px; }
.legal-doc ul { margin: 0 0 16px 22px; }
.legal-doc li { margin-bottom: 8px; }
.legal-doc a { color: var(--accent); text-decoration: underline; }
.legal-doc a:hover { color: var(--accent-2); }
/* One-line privacy notice under the contact form */
.form .form-privacy { margin-top: 16px; font-size: 12px; line-height: 1.55; color: var(--ink-3); }
.form .form-privacy a { color: var(--ink-2); text-decoration: underline; }
.form .form-privacy a:hover { color: var(--accent); }
/* ---------- Responsive ---------- */
@media (max-width: 900px) {
/* Mobile-only overflow guard — keep off on desktop so `position: sticky`
(used by the hero scroll-scrub) keeps working. */
html, body { overflow-x: hidden; max-width: 100vw; }
.nav { padding: 14px 20px; }
.nav ul { display: none; }
.container { padding: 0 20px; }
.hero .foot { grid-template-columns: repeat(2, 1fr); gap: 16px; }
.services .grid { grid-template-columns: 1fr; }
.section-head { grid-template-columns: 1fr; gap: 24px; }
.about .essay { grid-template-columns: 1fr; }
.about .essay > div { border-right: none; }
.about .certs { grid-template-columns: 1fr; gap: 20px; }
.contact .inner { grid-template-columns: 1fr; gap: 48px; }
footer.site .cols { grid-template-columns: 1fr 1fr; gap: 32px; }
.pf-card { width: 320px; }
.pf-card .ph { height: 300px; }
.form .row.two { grid-template-columns: 1fr; }
h1 { font-size: 48px; }
}
/* ============================================================ */
/* MULTI-PAGE ADDITIONS */
/* ============================================================ */
/* ---------- Sub-page hero (no photo, type-led) ---------- */
.page-hero {
padding: 180px 0 100px;
background: var(--paper);
}
.page-hero h1 {
font-size: clamp(48px, 7vw, 96px);
line-height: 1.0;
max-width: 14ch;
margin-top: 28px;
font-weight: 800;
}
.page-hero .lede {
margin-top: 28px;
max-width: 56ch;
font-size: 20px;
line-height: 1.55;
color: var(--ink-2);
}
/* ---------- Timeline ---------- */
.timeline {
padding: 60px 0 120px;
background: var(--paper);
}
.timeline .item {
display: grid;
grid-template-columns: 180px 1fr;
gap: 60px;
padding: 44px 0;
border-bottom: 1px solid var(--line);
align-items: start;
}
.timeline .item:first-child { border-top: 1px solid var(--line); }
.timeline .year {
font-family: 'Montserrat', system-ui, sans-serif;
font-weight: 800;
font-size: 72px;
line-height: 1;
color: var(--accent);
letter-spacing: -0.02em;
}
.timeline .body h3 { font-size: 28px; margin-bottom: 14px; }
.timeline .body p { max-width: 60ch; font-size: 17px; margin: 0; }
/* ---------- Process (how we work) ---------- */
.process { padding: 120px 0; background: var(--ink); color: var(--paper); }
.process h2 { color: var(--paper); }
.process p { color: rgba(245,247,248,0.72); }
.process .eyebrow { color: rgba(245,247,248,0.6); }
.process .steps {
margin-top: 72px;
display: grid; grid-template-columns: repeat(5, 1fr); gap: 28px;
}
.process .step {
border-top: 1px solid rgba(245,247,248,0.22);
padding-top: 20px;
}
.process .step .num {
font-family: 'Montserrat', system-ui, sans-serif;
font-weight: 800;
font-size: 56px; line-height: 1;
color: var(--accent);
letter-spacing: -0.03em;
}
.process .step h3 { color: var(--paper); margin-top: 16px; font-size: 20px; font-weight: 700; }
.process .step p { font-size: 14px; line-height: 1.6; margin-top: 10px; color: rgba(245,247,248,0.68); }
/* ---------- Portfolio grid (dedicated page) ---------- */
.pf-grid {
padding: 40px 0 120px;
background: var(--paper);
}
.pf-grid .grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 36px 24px;
}
.pf-grid .item .ph {
height: 340px;
background:
linear-gradient(135deg, rgba(0,0,0,0.2), rgba(0,0,0,0.05)),
repeating-linear-gradient(45deg, #d8dfe3 0 14px, #c8d2d8 14px 28px);
padding: 0;
color: var(--ink-3);
}
.pf-grid .item .ph::after { border-color: rgba(22,43,61,0.15); }
.pf-grid .item .meta {
margin-top: 16px;
}
.pf-grid .item .name {
font-family: 'Montserrat', sans-serif; font-weight: 600;
font-size: 18px; line-height: 1.25; letter-spacing: -0.005em;
}
.pf-grid .item .detail {
font-family: 'Montserrat', sans-serif; font-weight: 600;
font-size: 11px; letter-spacing: 0.1em;
text-transform: uppercase; color: var(--ink-3);
text-align: left;
}
.pf-grid .item .detail .tag { display: block; margin-top: 4px; color: var(--accent); }
/* ---------- Prominent contact channels ---------- */
.channels-prominent {
padding: 32px 0 56px;
background: var(--paper);
}
.channels-prominent .grid {
display: grid; grid-template-columns: repeat(3, 1fr); gap: 0;
border-top: 1px solid var(--line);
border-bottom: 1px solid var(--line);
}
.channels-prominent .grid.two { grid-template-columns: repeat(2, 1fr); }
.channels-prominent .card {
padding: 32px 32px;
border-right: 1px solid var(--line);
display: flex; flex-direction: column; gap: 10px;
}
.channels-prominent .card:last-child { border-right: none; }
.channels-prominent .card .k {
font-family: 'Montserrat', sans-serif; font-weight: 600;
font-size: 11px; letter-spacing: 0.16em;
text-transform: uppercase; color: var(--ink-3);
}
.channels-prominent .card .v {
font-family: 'Montserrat', sans-serif; font-weight: 700;
font-size: 22px; letter-spacing: -0.005em;
color: var(--ink);
word-break: break-word;
transition: color 0.15s;
}
.channels-prominent .card a.v:hover { color: var(--accent); }
.channels-prominent .card .sub { font-size: 14px; color: var(--ink-3); line-height: 1.5; }
/* ---------- FAQ ---------- */
.faq { padding: 100px 0 120px; background: var(--paper-2); }
.faq .grid { margin-top: 60px; border-top: 1px solid var(--line); }
.faq .q { border-bottom: 1px solid var(--line); }
.faq .q summary {
list-style: none; cursor: pointer; padding: 28px 0;
display: grid; grid-template-columns: 1fr auto; gap: 24px; align-items: center;
font-family: 'Montserrat', sans-serif; font-weight: 600;
font-size: 22px; line-height: 1.3;
color: var(--ink); letter-spacing: -0.005em;
}
.faq .q summary::-webkit-details-marker { display: none; }
.faq .q summary::after {
content: '+'; font-size: 28px; font-weight: 400;
color: var(--accent); transition: transform 0.2s;
line-height: 1; width: 28px; text-align: center;
}
.faq .q[open] summary::after { content: '−'; }
.faq .q[open] summary { padding-bottom: 12px; }
.faq .q .answer {
padding: 0 60px 28px 0;
font-size: 17px; line-height: 1.65;
color: var(--ink-2); max-width: 80ch;
}
/* ---------- Teaser CTAs on home sections ---------- */
.teaser-cta {
margin-top: 60px;
padding-top: 32px;
border-top: 1px solid var(--line);
display: flex; justify-content: space-between; align-items: center; gap: 24px;
cursor: pointer;
}
.teaser-cta .label {
font-family: 'Montserrat', sans-serif; font-weight: 600;
font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase;
color: var(--ink-3);
transition: color 0.15s;
}
.teaser-cta a {
font-family: 'Montserrat', sans-serif; font-weight: 700;
font-size: 19px; letter-spacing: -0.005em;
color: var(--ink);
display: inline-flex; align-items: center; gap: 12px;
transition: color 0.15s;
}
.teaser-cta:hover .label { color: var(--ink-2); }
.teaser-cta:hover a { color: var(--accent); }
.teaser-cta:hover a .arrow { transform: translateX(4px); }
.teaser-cta a .arrow { transition: transform 0.2s; }
.portfolio .teaser-cta { border-top-color: rgba(245,247,248,0.22); padding: 32px 40px 0; }
.portfolio .teaser-cta .label { color: rgba(245,247,248,0.6); }
.portfolio .teaser-cta a { color: var(--paper); }
.portfolio .teaser-cta a:hover { color: var(--accent); }
/* ---------- Final CTA strip (sub-pages) ---------- */
.final-cta {
padding: 100px 0;
background: var(--ink);
color: var(--paper);
}
.final-cta .inner {
display: grid; grid-template-columns: 1.4fr 1fr; gap: 64px; align-items: center;
}
.final-cta h2 { color: var(--paper); }
.final-cta p { color: rgba(245,247,248,0.72); margin-top: 16px; }
.final-cta .actions { display: flex; gap: 12px; flex-wrap: wrap; justify-content: flex-end; }
.final-cta .btn { background: var(--accent); border-color: var(--accent); color: #fff; }
.final-cta .btn:hover { background: #fff; color: var(--ink); border-color: #fff; }
.final-cta .btn.ghost { background: transparent; color: var(--paper); border-color: rgba(245,247,248,0.4); }
.final-cta .btn.ghost:hover { background: var(--paper); color: var(--ink); border-color: var(--paper); }
/* ---------- Mobile hamburger ---------- */
.nav-toggle {
display: none;
background: transparent; border: none; cursor: pointer;
padding: 8px; color: inherit; margin-left: 8px;
}
.nav-toggle .bars { display: flex; flex-direction: column; gap: 5px; width: 22px; }
.nav-toggle .bars span {
display: block; height: 2px; background: currentColor;
transition: transform 0.2s, opacity 0.2s;
}
.nav.open .nav-toggle .bars span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav.open .nav-toggle .bars span:nth-child(2) { opacity: 0; }
.nav.open .nav-toggle .bars span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
/* ---------- Multi-page responsive overrides ---------- */
@media (max-width: 1100px) {
.process .steps { grid-template-columns: repeat(2, 1fr); gap: 40px 32px; }
.pf-grid .grid { grid-template-columns: repeat(2, 1fr); }
.channels-prominent .grid { grid-template-columns: 1fr; }
.channels-prominent .card { border-right: none; border-bottom: 1px solid var(--line); }
.channels-prominent .card:last-child { border-bottom: none; }
}
@media (max-width: 900px) {
.nav-toggle { display: block; }
.nav ul {
position: absolute;
top: 100%; left: 0; right: 0;
background: rgba(245,247,248,0.98);
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
color: var(--ink);
flex-direction: column;
padding: 24px 20px;
gap: 18px;
border-bottom: 1px solid var(--line);
display: none;
}
.nav.open ul { display: flex; }
.nav.open { background: rgba(245,247,248,0.98); color: var(--ink); }
.nav ul a { font-size: 14px; }
.page-hero { padding: 130px 0 60px; }
.timeline .item { grid-template-columns: 1fr; gap: 14px; padding: 32px 0; }
.timeline .year { font-size: 52px; }
.timeline .body h3 { font-size: 22px; }
.process { padding: 80px 0; }
.process .steps { grid-template-columns: 1fr; gap: 36px; margin-top: 48px; }
.pf-grid .grid { grid-template-columns: 1fr; gap: 32px; }
.pf-grid .item .ph { height: 260px; }
.faq { padding: 70px 0 90px; }
.faq .q summary { font-size: 17px; padding: 22px 0; gap: 16px; }
.faq .q summary::after { font-size: 24px; }
.faq .q .answer { padding-right: 0; font-size: 15px; }
.final-cta { padding: 70px 0; }
.final-cta .inner { grid-template-columns: 1fr; gap: 28px; }
.final-cta .actions { justify-content: flex-start; }
.teaser-cta { flex-direction: column; align-items: flex-start; gap: 12px; }
.portfolio .teaser-cta { padding: 28px 20px 0; }
}
/* ---------- Service card link state (replaces dead "Learn more") ---------- */
.service a.more {
color: var(--ink);
text-decoration: none;
display: inline-flex; align-items: center; gap: 8px;
transition: color 0.15s;
}
.service a.more:hover { color: var(--accent); }
.service a.more .arrow { transition: transform 0.2s; }
.service a.more:hover .arrow { transform: translateX(4px); }
/* ---------- After-services CTA strip ---------- */
.services-cta {
margin-top: 60px;
padding: 36px 40px;
background: var(--paper-2);
border: 1px solid var(--line);
display: grid; grid-template-columns: 1fr auto; gap: 40px;
align-items: center;
}
.services-cta-text .eyebrow { display: inline-flex; }
.services-cta-text p {
margin-top: 12px;
font-size: 16px;
max-width: 58ch;
}
@media (max-width: 900px) {
.services-cta { grid-template-columns: 1fr; gap: 20px; padding: 28px 24px; }
}
/* ---------- Email/phone in footer · subtle hover ---------- */
footer.site li a[href^="mailto"],
footer.site li a[href^="tel"] {
transition: color 0.15s;
}
/* ============================================================ */
/* MOBILE PASS — phone-specific refinements */
/* ============================================================ */
@media (max-width: 600px) {
/* Type sizes */
body { font-size: 16px; }
h1 { font-size: 32px; line-height: 1.08; }
h2 { font-size: 26px; line-height: 1.12; }
h3 { font-size: 18px; }
.container { padding: 0 18px; }
/* Nav */
.nav { padding: 12px 18px; }
.nav .brand { font-size: 14px; gap: 8px; }
.nav .brand .mark { width: 8px; height: 8px; }
.nav .brand .brand-icon { width: 26px; height: 26px; }
/* Hero */
.hero { min-height: 580px; height: 92vh; }
.hero .content { padding: 100px 18px 36px; }
.hero h1 { font-size: 36px; line-height: 1.05; }
.hero .lede { font-size: 15px; margin-top: 16px; }
.hero .cta-row { margin-top: 24px; flex-direction: column; align-items: stretch; gap: 10px; }
.hero .cta-row .btn { justify-content: center; padding: 16px 22px; }
/* Stats: 4-up → 2-up, more readable */
.hero .foot {
grid-template-columns: repeat(2, 1fr) !important;
gap: 22px 18px;
padding-top: 20px;
}
.hero .foot .stat .num { font-size: 32px; }
.hero .foot .stat .lbl { font-size: 10px; letter-spacing: 0.1em; line-height: 1.3; }
.scroll-cue { display: none; }
/* Marquee compact */
.marquee-track { padding: 14px 0; font-size: 11px; gap: 32px; }
/* Services */
.services { padding: 80px 0; }
.section-head { gap: 18px; }
.services .grid { grid-template-columns: 1fr !important; margin-top: 40px; }
.service { min-height: 0; padding: 28px 22px 24px; }
.service p { font-size: 14px; }
.services-cta { margin-top: 36px; padding: 24px 20px; }
/* About / sub-page hero */
.page-hero { padding: 110px 0 50px; }
.page-hero h1 { font-size: 30px; margin-top: 16px; line-height: 1.1; }
.page-hero .lede { font-size: 15px; margin-top: 16px; }
.about { padding: 80px 0 60px; }
.about .bleed { height: 50vh; min-height: 280px; margin-top: 48px; }
.about .essay > div { padding: 32px 22px; min-height: 0; }
.about .essay .ph { min-height: 220px; }
.about .certs { margin-top: 48px; }
/* Timeline */
.timeline { padding: 40px 0 80px; }
.timeline .item { padding: 24px 0; gap: 10px; }
.timeline .year { font-size: 32px; }
.timeline .body h3 { font-size: 17px; }
.timeline .body p { font-size: 14px; }
/* Process */
.process { padding: 70px 0; }
.process .steps { margin-top: 36px; gap: 28px; }
.process .step .num { font-size: 32px; }
/* Final CTA + footer-anchored elements: keep text inside viewport */
.final-cta h2 { font-size: 26px; }
.channels-prominent .card .v { font-size: 17px; overflow-wrap: anywhere; word-break: break-word; }
.channels-prominent .card .k { font-size: 11px; }
.channels-prominent .card .sub { font-size: 13px; }
.faq .q summary { word-break: break-word; }
footer.site .bigmark { font-size: 24px; }
/* Contact channel grid: stack label above value so long emails don't overflow */
.contact .channel {
grid-template-columns: 1fr;
gap: 4px;
padding: 14px 0;
}
.contact .channel .k { font-size: 10px; }
.contact .channel .v { font-size: 16px; min-width: 0; overflow-wrap: anywhere; word-break: break-word; }
/* Page hero text: enforce wrapping */
.page-hero, .page-hero .container { max-width: 100vw; overflow-wrap: anywhere; }
.page-hero h1 { overflow-wrap: break-word; word-break: normal; }
.page-hero .lede, .hero .lede { overflow-wrap: break-word; max-width: 100%; }
/* Form check chips: shrink + ensure they wrap and stay inside */
.form .checks { gap: 6px; }
.form .check { padding: 10px 12px; font-size: 11px; max-width: 100%; }
/* Anything still trying to be wide: contain it */
img, video, iframe, .ph { max-width: 100%; height: auto; }
.form input, .form select, .form textarea, .form .check { max-width: 100%; }
.container { max-width: 100vw; overflow-x: hidden; }
/* Push footer up so sticky CTA bar doesn't overlap copyright row */
footer.site .legal { padding-bottom: 72px; }
/* Portfolio (home carousel) */
.portfolio { padding: 60px 0 30px; }
.portfolio .section-head { grid-template-columns: 1fr !important; gap: 14px; }
.pf-meta { align-items: flex-start; }
.pf-meta .pf-hint { display: none; } /* drag-to-pause is implicit on touch */
.pf-track-wrap { margin-top: 28px; }
.pf-card { width: 280px; }
.pf-card .ph { height: 240px; }
.pf-card .name { font-size: 18px; }
.pf-card .detail { font-size: 9px; }
/* Portfolio grid page */
.pf-grid .grid { gap: 24px; }
.pf-grid .item .ph { height: 220px; }
/* Channels (contact) */
.channels-prominent { padding: 24px 0 36px; }
.channels-prominent .grid,
.channels-prominent .grid.two { grid-template-columns: 1fr; }
.channels-prominent .card { padding: 24px 20px; border-right: none; border-bottom: 1px solid var(--line); }
.channels-prominent .card:last-child { border-bottom: none; }
.channels-prominent .card .v { font-size: 20px; }
.channels-prominent .card .sub { font-size: 13px; }
/* Contact form */
.contact { padding: 60px 0 80px; }
.contact .inner { grid-template-columns: 1fr !important; gap: 36px; }
.form { padding: 24px 20px; }
.form .row.two { grid-template-columns: 1fr !important; gap: 14px; }
.form .field { margin-bottom: 16px; }
.form label { font-size: 10px; }
.form input[type=text],
.form input[type=email],
.form input[type=tel],
.form select,
.form textarea { font-size: 16px; padding: 14px 0; } /* 16px prevents iOS zoom on focus */
.form .check { padding: 12px 14px; font-size: 12px; }
.form .submit-row { flex-direction: column; align-items: stretch; gap: 14px; margin-top: 22px; }
.form .submit-row .btn { justify-content: center; padding: 16px 22px; }
/* FAQ */
.faq { padding: 60px 0 80px; }
.faq .grid { margin-top: 36px; }
.faq .q summary { font-size: 16px; padding: 20px 0; gap: 14px; }
.faq .q .answer { font-size: 14px; padding-bottom: 22px; }
/* Final CTA */
.final-cta { padding: 60px 0; }
.final-cta .inner { grid-template-columns: 1fr !important; gap: 24px; }
.final-cta .actions { justify-content: stretch; flex-direction: column; }
.final-cta .actions .btn { justify-content: center; padding: 16px 22px; }
/* Footer: collapse to 1 col */
footer.site { padding: 60px 0 30px; }
footer.site .cols { grid-template-columns: 1fr !important; gap: 36px; }
footer.site .bigmark { font-size: 28px; }
footer.site .legal { margin-top: 40px; flex-direction: column; gap: 10px; align-items: flex-start; }
/* Teaser CTAs (on home) */
.teaser-cta { flex-direction: column; align-items: flex-start; gap: 12px; }
.teaser-cta a { font-size: 17px; }
.portfolio .teaser-cta { padding: 28px 18px 0; }
/* Buttons: enforce tap targets */
.btn { min-height: 44px; }
}
/* iPad / tablet refinements */
@media (min-width: 601px) and (max-width: 900px) {
.hero .foot { grid-template-columns: repeat(2, 1fr); }
.pf-card { width: 380px; }
.pf-card .ph { height: 320px; }
}
/* ============================================================ */
/* MOBILE PATCHES — Nov 2026 */
/* ============================================================ */
/* Footer email/phone — let long strings break before clipping */
@media (max-width: 600px) {
footer.site li {
font-size: 14px;
word-break: break-word;
overflow-wrap: anywhere;
line-height: 1.4;
}
footer.site li a { display: inline-block; max-width: 100%; }
footer.site .cols { padding-right: 4px; }
/* Certifications — tight 2-column grid instead of free-wrap list */
.about .certs .chips {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 8px;
}
.chip {
padding: 8px 10px;
font-size: 10px;
letter-spacing: 0.04em;
line-height: 1.3;
word-break: break-word;
}
.chip::before { width: 5px; height: 5px; flex-shrink: 0; }
}
/* ============================================================ */
/* Floating Contact CTA (desktop) + WhatsApp FAB (mobile) */
/* Injected by site.js, revealed after scrolling past the hero. */
/* ============================================================ */
#floating-cta {
position: fixed;
right: 24px;
bottom: 24px;
z-index: 90;
display: flex; flex-direction: column; align-items: flex-end; gap: 12px;
opacity: 0;
transform: translateY(16px);
pointer-events: none;
transition: opacity 240ms ease, transform 240ms cubic-bezier(0.22, 1, 0.36, 1);
}
#floating-cta.visible {
opacity: 1;
transform: translateY(0);
pointer-events: auto;
}
#floating-cta .fc-contact {
display: inline-flex; align-items: center; gap: 10px;
background: var(--accent);
color: #fff;
font-family: 'Montserrat', sans-serif; font-weight: 600;
font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase;
padding: 14px 22px;
text-decoration: none;
box-shadow: 0 8px 24px rgba(22, 43, 61, 0.22);
transition: transform 160ms ease, box-shadow 160ms ease, background 160ms ease;
}
#floating-cta .fc-contact:hover {
background: var(--accent-2);
transform: translateY(-2px);
box-shadow: 0 12px 28px rgba(22, 43, 61, 0.28);
}
#floating-cta .fc-contact .arrow {
font-size: 14px; line-height: 1;
}
#floating-cta .fc-wa {
display: none;
width: 56px; height: 56px;
border-radius: 50%;
background: #25D366;
color: #fff;
align-items: center; justify-content: center;
box-shadow: 0 8px 24px rgba(37, 211, 102, 0.4);
text-decoration: none;
transition: transform 160ms ease;
}
#floating-cta .fc-wa:active { transform: scale(0.94); }
#floating-cta .fc-wa svg { display: block; }
@media (max-width: 900px) {
#floating-cta {
right: 16px;
bottom: 16px;
}
/* On mobile, swap the desktop pill for the WhatsApp FAB */
#floating-cta .fc-contact { display: none; }
#floating-cta .fc-wa { display: inline-flex; }
}
/* Legacy mobile sticky CTA bar (deprecated — kept for any cached HTML) */
#mobile-cta-bar { display: none; }
@media (max-width: 900px) {
#mobile-cta-bar {
display: flex;
position: fixed;
bottom: 0; left: 0; right: 0;
z-index: 70;
gap: 10px;
padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
background: rgba(245, 247, 248, 0.96);
backdrop-filter: blur(14px);
-webkit-backdrop-filter: blur(14px);
border-top: 1px solid var(--line);
transform: translateY(110%);
transition: transform 320ms cubic-bezier(0.22, 1, 0.36, 1);
}
#mobile-cta-bar.visible { transform: translateY(0); }
#mobile-cta-bar .mcb-primary {
flex: 1;
text-align: center;
padding: 14px 16px;
background: var(--ink);
color: var(--paper);
font-family: 'Montserrat', system-ui, sans-serif;
font-weight: 600;
font-size: 13px;
letter-spacing: 0.06em;
text-transform: uppercase;
border-radius: 2px;
transition: background 200ms ease;
text-decoration: none;
}
#mobile-cta-bar .mcb-primary:active { background: var(--accent-2); }
#mobile-cta-bar .mcb-wa {
flex: 0 0 52px;
height: 52px;
border-radius: 50%;
background: #25D366;
color: #fff;
display: inline-flex;
align-items: center;
justify-content: center;
box-shadow: 0 6px 16px -8px rgba(37, 211, 102, 0.6);
transition: transform 180ms ease;
text-decoration: none;
}
#mobile-cta-bar .mcb-wa:active { transform: scale(0.95); }
}
/* ============================================================ */
/* Hero video background (Vimeo iframe playlist) */
/* ============================================================ */
.hero .ph.hero-media {
/* Self-hosted poster frame paints instantly while the Vimeo player boots,
then the video iframe crossfades in over it. (vumbnail.com auto-thumbs
don't work for unlisted videos, so we use an exported frame instead.) */
background: #0e0e0e url('photos/hero-poster.jpg') center / cover no-repeat;
padding: 0;
}
.hero .ph.hero-media::after { display: none; }
/* Two stacked iframe containers — only the .is-active one is visible.
The other holds a pre-buffered next clip ready to crossfade in. */
.hero .hero-vimeo-frame {
position: absolute;
inset: 0;
z-index: 0;
opacity: 0;
transition: opacity 1400ms cubic-bezier(0.4, 0, 0.2, 1);
pointer-events: none;
}
.hero .hero-vimeo-frame.is-active {
opacity: 1;
}
/* Vimeo's iframe is 16:9. We need it to cover an arbitrary hero shape
(often portrait on mobile). Trick: oversize it so the video fully
covers the container — Vimeo's player letterboxes inside the iframe,
so we have to make the iframe itself larger than the container, then
center it. */
.hero .hero-vimeo-frame iframe {
position: absolute;
top: 50%;
left: 50%;
/* 177.78vw = 16:9 ratio of viewport height (covers when wider than 16:9).
Use min-width/height so the larger of the two dimensions wins. */
width: 100vw;
height: 56.25vw; /* 16:9 of viewport width */
min-width: 177.78vh; /* 16:9 of viewport height */
min-height: 100vh;
transform: translate(-50%, -50%);
border: 0;
pointer-events: none;
}
/* Dark gradient overlay for legibility of headline + stats */
.hero .hero-media-overlay {
position: absolute;
inset: 0;
z-index: 1;
background:
linear-gradient(180deg,
rgba(0, 0, 0, 0.45) 0%,
rgba(0, 0, 0, 0.18) 32%,
rgba(0, 0, 0, 0.25) 65%,
rgba(0, 0, 0, 0.65) 100%);
pointer-events: none;
}
/* ---------- Hero content entrance animation ---------- */
/* Stagger fade-up on each headline element so the page composes itself
as the video establishes shot. Reduced-motion disables. */
@keyframes hero-fade-up {
from { opacity: 0; transform: translateY(22px); }
to { opacity: 1; transform: translateY(0); }
}
.hero .content .eyebrow,
.hero .content h1,
.hero .content .lede,
.hero .content .cta-row,
.hero .content .foot .stat,
.hero .scroll-cue {
opacity: 0;
animation: hero-fade-up 1100ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
.hero .content .eyebrow { animation-delay: 200ms; }
.hero .content h1 { animation-delay: 380ms; }
.hero .content .lede { animation-delay: 620ms; }
.hero .content .cta-row { animation-delay: 820ms; }
.hero .content .foot .stat:nth-child(1) { animation-delay: 1050ms; }
.hero .content .foot .stat:nth-child(2) { animation-delay: 1170ms; }
.hero .content .foot .stat:nth-child(3) { animation-delay: 1290ms; }
.hero .content .foot .stat:nth-child(4) { animation-delay: 1410ms; }
.hero .scroll-cue { animation-delay: 1700ms; }
@media (prefers-reduced-motion: reduce) {
.hero .content .eyebrow,
.hero .content h1,
.hero .content .lede,
.hero .content .cta-row,
.hero .content .foot .stat,
.hero .scroll-cue {
opacity: 1;
animation: none;
transform: none;
}
}
/* ---------- Divisions (About page — three leaders) ---------- */
.divisions { padding: 100px 0 80px; background: var(--paper); }
.divisions .stack {
margin-top: 64px;
border-top: 1px solid var(--line);
}
.divisions .div-card {
display: grid; grid-template-columns: 1fr 1fr;
border-bottom: 1px solid var(--line);
min-height: 460px;
}
.divisions .div-card.reversed .div-photo { order: 2; }
.divisions .div-photo {
background: var(--paper-3);
position: relative;
min-height: 360px;
display: flex; align-items: center; justify-content: center;
border-right: 1px solid var(--line);
}
.divisions .div-card.reversed .div-photo {
border-right: none;
border-left: 1px solid var(--line);
}
.divisions .div-photo .ph-label {
color: var(--ink-3); font-size: 11px;
font-family: 'Montserrat', system-ui, sans-serif;
letter-spacing: 0.16em; text-transform: uppercase;
}
.divisions .div-body {
padding: 56px 56px;
display: flex; flex-direction: column; justify-content: center;
}
.divisions .div-body .brand-line {
font-family: 'Montserrat', system-ui, sans-serif; font-weight: 600;
font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase;
color: var(--accent); margin-bottom: 18px;
}
.divisions .div-body h3 { margin-bottom: 6px; font-size: 36px; }
.divisions .div-body .role {
font-family: 'Montserrat', system-ui, sans-serif;
font-size: 12px; letter-spacing: 0.06em;
color: var(--ink-3); margin-bottom: 24px;
}
.divisions .div-body p.bio {
font-size: 15px; line-height: 1.7; color: var(--ink-2);
}
.divisions .div-body .placeholder-tag {
display: inline-block; margin-top: 16px;
font-family: 'Montserrat', system-ui, sans-serif; font-weight: 600;
font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase;
color: var(--ink-3);
border: 1px dashed var(--ink-4);
padding: 6px 10px;
align-self: flex-start;
}
@media (max-width: 900px) {
.divisions .div-card { grid-template-columns: 1fr; min-height: 0; }
.divisions .div-card.reversed .div-photo { order: 0; border-left: none; }
.divisions .div-photo { border-right: none; border-bottom: 1px solid var(--line); min-height: 240px; }
.divisions .div-body { padding: 36px 24px; }
.divisions .div-body h3 { font-size: 28px; }
}
/* ---------- Services page (per-division sections) ---------- */
.svc-division {
padding: 110px 0;
border-top: 1px solid var(--line);
background: var(--paper);
}
.svc-division.alt { background: var(--paper-2); }
.svc-division .svc-head {
display: grid; grid-template-columns: 140px 1fr;
gap: 48px; align-items: start;
}
.svc-division .num-big {
font-family: 'Montserrat', system-ui, sans-serif; font-weight: 800;
font-size: 80px; line-height: 0.9; letter-spacing: -0.02em;
color: var(--ink-4);
}
.svc-division .meta { max-width: 60ch; }
.svc-division .meta h2 { margin-top: 8px; }
.svc-division .meta .lede {
margin-top: 18px; font-size: 17px; line-height: 1.6;
color: var(--ink-2); max-width: 58ch;
}
.svc-division .meta .brand-tag {
display: inline-block; margin-top: 16px;
font-family: 'Montserrat', system-ui, sans-serif; font-weight: 600;
font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase;
color: var(--accent);
}
.svc-division .grid {
margin-top: 56px;
display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px;
background: var(--line);
border: 1px solid var(--line);
}
.svc-division.wide .grid { grid-template-columns: repeat(5, 1fr); }
@media (max-width: 1300px) {
.svc-division.wide .grid { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 1050px) {
.svc-division.wide .grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 800px) {
.svc-division.wide .grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 520px) {
.svc-division.wide .grid { grid-template-columns: 1fr; }
}
.svc-division.alt .grid .service { background: var(--paper-2); }
.svc-division.alt .grid .service:hover { background: var(--paper); }
/* Linkified service cards (services page) */
a.service {
text-decoration: none;
color: inherit;
display: block;
position: relative;
}
a.service::after {
content: '→';
position: absolute;
bottom: 28px; right: 28px;
font-family: 'Montserrat', system-ui, sans-serif;
font-size: 18px;
color: var(--ink-4);
opacity: 0;
transition: opacity 0.2s, transform 0.2s, color 0.2s;
transform: translateX(-6px);
}
a.service:hover::after { opacity: 1; transform: translateX(0); color: var(--accent); }
a.service:hover h3 { color: var(--accent); transition: color 0.15s; }
/* ---------- Services page — sub-groupings ---------- */
.svc-subgroup {
margin-top: 64px;
}
.svc-subgroup-label {
font-family: 'Montserrat', system-ui, sans-serif; font-weight: 600;
font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase;
color: var(--ink-3);
display: flex; align-items: center; gap: 18px;
margin-bottom: 28px;
}
.svc-subgroup-label::after {
content: '';
flex: 1;
height: 1px;
background: var(--line);
}
.svc-subgroup .grid {
margin-top: 0;
}
/* Plan & Permit — feature cards (2-col) */
.svc-grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 2px; background: var(--line); border: 1px solid var(--line); }
a.service.feature {
padding: 44px 40px 44px;
min-height: 320px;
background: var(--paper);
}
.svc-division.alt a.service.feature { background: var(--paper-2); }
.svc-division.alt a.service.feature:hover { background: var(--paper); }
a.service.feature::after {
content: 'Learn more →';
position: absolute;
bottom: 36px; right: 40px;
font-family: 'Montserrat', system-ui, sans-serif; font-weight: 600;
font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase;
color: var(--accent);
opacity: 1;
transform: none;
}
a.service.feature:hover::after { transform: translateX(4px); }
a.service.feature .partner {
display: inline-block;
font-family: 'Montserrat', system-ui, sans-serif; font-weight: 600;
font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase;
color: var(--accent);
margin-top: 12px;
}
/* Build — standard 3-col */
.svc-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; background: var(--line); border: 1px solid var(--line); }
/* Systems & Site — compact horizontal rows */
.svc-compact-list {
display: flex; flex-direction: column;
border: 1px solid var(--line);
}
.svc-compact-list a.service.compact {
display: grid;
grid-template-columns: 56px 1.4fr 2fr 32px;
align-items: center;
padding: 24px 32px;
border-bottom: 1px solid var(--line);
min-height: 0;
gap: 28px;
background: var(--paper);
}
.svc-division.alt .svc-compact-list a.service.compact { background: var(--paper-2); }
.svc-compact-list a.service.compact:last-child { border-bottom: none; }
.svc-compact-list a.service.compact:hover { background: var(--paper-3); }
.svc-division.alt .svc-compact-list a.service.compact:hover { background: var(--paper); }
.svc-compact-list a.service.compact h3 {
margin: 0;
font-size: 20px;
letter-spacing: -0.01em;
}
.svc-compact-list a.service.compact p {
margin: 0;
font-size: 14px;
color: var(--ink-3);
line-height: 1.5;
}
.svc-compact-list a.service.compact .num {
font-size: 11px;
}
.svc-compact-list a.service.compact::after {
content: '→';
position: static;
opacity: 1;
transform: none;
font-size: 18px;
color: var(--ink-4);
text-align: right;
transition: color 0.15s, transform 0.2s;
}
.svc-compact-list a.service.compact:hover::after { color: var(--accent); transform: translateX(4px); }
.svc-compact-list a.service.compact:hover h3 { color: var(--accent); }
@media (max-width: 900px) {
.svc-grid-2 { grid-template-columns: 1fr; }
.svc-grid-3 { grid-template-columns: 1fr; }
a.service.feature { padding: 32px 24px; min-height: 0; }
a.service.feature::after { bottom: 24px; right: 24px; }
.svc-compact-list a.service.compact {
grid-template-columns: 1fr 24px;
gap: 4px 16px;
padding: 20px 22px;
}
.svc-compact-list a.service.compact .num { grid-column: 1; grid-row: 1; }
.svc-compact-list a.service.compact h3 { grid-column: 1; grid-row: 2; font-size: 17px; }
.svc-compact-list a.service.compact p { grid-column: 1; grid-row: 3; font-size: 13px; }
.svc-compact-list a.service.compact::after { grid-column: 2; grid-row: 1 / span 3; align-self: center; }
}
/* ---------- Partner page (arch-design, env-licensing) ---------- */
.partner-page {
padding: 110px 0 80px;
background: var(--paper);
}
.partner-page .partner-hero {
display: grid; grid-template-columns: 1.2fr 1fr;
gap: 80px;
align-items: start;
}
.partner-page .partner-hero .eyebrow { display: inline-block; }
.partner-page .partner-hero h1 { margin-top: 18px; font-size: 64px; }
.partner-page .partner-hero p.lede { font-size: 19px; margin-top: 24px; max-width: 52ch; }
.partner-page .partner-hero .partner-tag {
display: inline-block; margin-top: 28px;
font-family: 'Montserrat', system-ui, sans-serif; font-weight: 600;
font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase;
color: var(--accent);
border: 1px solid var(--accent);
padding: 8px 14px;
}
.partner-page .partner-hero .side-photo {
background: var(--paper-3);
min-height: 380px;
display: flex; align-items: center; justify-content: center;
}
.partner-page .partner-hero .side-photo .ph-label {
color: var(--ink-3); font-size: 11px;
font-family: 'Montserrat', system-ui, sans-serif;
letter-spacing: 0.16em; text-transform: uppercase;
}
.partner-section {
padding: 80px 0;
border-top: 1px solid var(--line);
background: var(--paper-2);
}
.partner-section.flat { background: var(--paper); }
.partner-section .layout {
display: grid; grid-template-columns: 320px 1fr;
gap: 60px;
}
.partner-section h2 { margin-top: 0; font-size: 36px; }
.partner-section .label {
font-family: 'Montserrat', system-ui, sans-serif; font-weight: 600;
font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase;
color: var(--ink-3);
margin-bottom: 12px;
}
.partner-section .deliverables {
display: grid; grid-template-columns: repeat(2, 1fr);
gap: 2px;
background: var(--line);
border: 1px solid var(--line);
}
.partner-section .deliverables .item {
background: var(--paper);
padding: 24px 28px;
}
.partner-section.flat .deliverables .item { background: var(--paper); }
.partner-section .deliverables .item h4 {
font-family: 'Montserrat', system-ui, sans-serif; font-weight: 600;
font-size: 14px; letter-spacing: 0;
margin-bottom: 6px;
}
.partner-section .deliverables .item p {
font-size: 13px; color: var(--ink-2); margin: 0; line-height: 1.5;
}
.partner-section .process-list {
display: flex; flex-direction: column;
gap: 0;
border: 1px solid var(--line);
}
.partner-section .process-list .step {
background: var(--paper);
display: grid; grid-template-columns: 60px 1fr; gap: 24px;
padding: 28px 32px;
border-bottom: 1px solid var(--line);
}
.partner-section .process-list .step:last-child { border-bottom: none; }
.partner-section .process-list .step .step-num {
font-family: 'Montserrat', sans-serif; font-weight: 600;
font-size: 11px; letter-spacing: 0.14em; color: var(--ink-3);
}
.partner-section .process-list .step h4 {
font-size: 17px; margin-bottom: 6px;
}
.partner-section .process-list .step p {
margin: 0; font-size: 14px; color: var(--ink-2); line-height: 1.55;
}
/* Partner contact (inline form using existing .contact styles) */
.partner-contact {
padding: 100px 0;
background: var(--ink);
color: var(--paper);
}
.partner-contact .container { max-width: 720px; }
.partner-contact .eyebrow { color: rgba(245,247,248,0.6); }
.partner-contact h2 { color: var(--paper); }
.partner-contact p.lede { color: rgba(245,247,248,0.75); margin-top: 18px; }
.partner-contact form {
margin-top: 48px;
display: flex; flex-direction: column; gap: 18px;
}
.partner-contact form label {
font-family: 'Montserrat', sans-serif; font-weight: 600;
font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase;
color: rgba(245,247,248,0.6);
margin-bottom: 6px;
}
.partner-contact form .row { display: flex; flex-direction: column; }
.partner-contact form .row.two { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.partner-contact form input,
.partner-contact form select,
.partner-contact form textarea {
background: transparent;
border: none;
border-bottom: 1px solid rgba(245,247,248,0.25);
color: var(--paper);
font: inherit;
font-size: 16px;
padding: 12px 0;
outline: none;
transition: border-color 0.15s;
}
.partner-contact form input:focus,
.partner-contact form select:focus,
.partner-contact form textarea:focus {
border-bottom-color: var(--accent);
}
.partner-contact form textarea { min-height: 100px; resize: vertical; }
.partner-contact form select option { background: var(--ink); color: var(--paper); }
.partner-contact form .submit-row {
margin-top: 12px;
display: flex; justify-content: space-between; align-items: center;
gap: 20px;
}
.partner-contact form .submit-row .note {
font-family: 'Montserrat', sans-serif; font-size: 11px;
letter-spacing: 0.06em; color: rgba(245,247,248,0.5);
}
.partner-contact form button[type=submit] {
background: var(--accent);
border: none;
color: var(--ink);
font: 600 11px/1 'Montserrat', sans-serif;
letter-spacing: 0.14em; text-transform: uppercase;
padding: 18px 32px;
cursor: pointer;
transition: background 0.15s;
}
.partner-contact form button[type=submit]:hover { background: var(--paper); }
@media (max-width: 900px) {
.partner-page .partner-hero { grid-template-columns: 1fr; gap: 40px; }
.partner-page .partner-hero h1 { font-size: 44px; }
.partner-section .layout { grid-template-columns: 1fr; gap: 28px; }
.partner-section .deliverables { grid-template-columns: 1fr; }
.partner-contact form .row.two { grid-template-columns: 1fr; }
}
/* ---------- Portfolio dropdown filter ---------- */
.pf-filter-bar {
display: flex; flex-wrap: wrap; align-items: center;
gap: 18px 24px;
margin: 0 0 48px;
padding: 24px 0;
border-top: 1px solid var(--line);
border-bottom: 1px solid var(--line);
}
.pf-filter-bar .filter-label {
font-family: 'Montserrat', system-ui, sans-serif; font-weight: 600;
font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase;
color: var(--ink-3);
}
.pf-filter-bar select {
flex: 1; min-width: 240px; max-width: 360px;
background: transparent;
border: 1px solid var(--ink);
padding: 12px 40px 12px 16px;
font: inherit;
font-size: 14px;
color: var(--ink);
cursor: pointer;
appearance: none;
-webkit-appearance: none;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: right 16px center;
}
.pf-filter-bar select:focus { outline: none; border-color: var(--accent); }
.pf-filter-bar .filter-count {
font-family: 'Montserrat', sans-serif; font-weight: 600;
font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase;
color: var(--ink-3);
}
.pf-filter-bar .filter-count strong { color: var(--accent); font-weight: 700; }
.pf-filter-bar .filter-reset {
margin-left: auto;
background: transparent;
border: none;
font-family: 'Montserrat', sans-serif; font-weight: 600;
font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase;
color: var(--ink-3);
cursor: pointer;
padding: 6px 0;
border-bottom: 1px solid transparent;
transition: color 0.15s, border-color 0.15s;
display: none;
}
.pf-filter-bar .filter-reset.show { display: inline-block; }
.pf-filter-bar .filter-reset:hover { color: var(--accent); border-bottom-color: var(--accent); }
@media (max-width: 700px) {
.pf-filter-bar { gap: 14px; padding: 20px 0; }
.pf-filter-bar select { width: 100%; max-width: none; flex: none; }
.pf-filter-bar .filter-reset { margin-left: 0; }
}
/* ============================================================
MEGA MENU (Services nav dropdown)
============================================================ */
.nav ul li.has-menu {
position: relative;
}
.nav ul li.has-menu > .trigger::after {
content: '';
position: absolute;
right: 0;
top: 50%;
width: 6px; height: 6px;
margin-top: -4px;
border-right: 1.5px solid currentColor;
border-bottom: 1.5px solid currentColor;
transform: rotate(45deg);
transition: transform 0.18s, margin-top 0.18s;
opacity: 0.7;
}
.nav ul li.has-menu.open > .trigger::after,
.nav ul li.has-menu:hover > .trigger::after { transform: rotate(-135deg); margin-top: -2px; }
.nav ul li.has-menu > .trigger::before {
content: ''; position: absolute; left: 0; right: 14px; bottom: 0;
height: 1px; background: currentColor;
transform: scaleX(0); transform-origin: left;
transition: transform 0.25s ease;
}
.nav ul li.has-menu:hover > .trigger::before,
.nav ul li.has-menu.open > .trigger::before { transform: scaleX(1); }
.mega-panel {
/* Anchored to the Services trigger and centered on it.
JS clamps panel.style.left in setMegaPanelPosition() so the wide
panel doesn't overflow the viewport when the trigger sits near
an edge. */
position: fixed;
top: 72px;
left: 50%; /* placeholder — JS overrides */
transform: translateY(-8px);
width: min(960px, calc(100vw - 40px));
background: var(--paper);
border: 1px solid var(--ink);
padding: 32px 36px 28px;
display: grid; grid-template-columns: repeat(4, 1fr); gap: 36px;
z-index: 50;
opacity: 0;
pointer-events: none;
visibility: hidden;
transition: opacity 0.18s, transform 0.18s, visibility 0.18s;
box-shadow: 0 20px 60px rgba(22, 43, 61, 0.12);
}
/* Invisible bridge above the panel so the cursor can travel
from the Services trigger down to the panel without breaking
the hover state. Without this, the ~12px gap between nav and
panel kills the :hover and the menu collapses. */
.mega-panel::before {
content: '';
position: absolute;
top: -22px; left: 0; right: 0;
height: 22px;
background: transparent;
}
.nav.scrolled .mega-panel { background: var(--paper); }
.nav ul li.has-menu.open .mega-panel,
.nav ul li.has-menu:focus-within .mega-panel {
opacity: 1;
pointer-events: auto;
visibility: visible;
transform: translateY(0);
}
@media (hover: hover) {
.nav ul li.has-menu:hover .mega-panel {
opacity: 1; pointer-events: auto; visibility: visible;
transform: translateY(0);
}
}
.mega-col h5 {
font-family: 'Montserrat', sans-serif; font-weight: 600;
font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase;
color: var(--ink-3);
margin-bottom: 16px;
padding-bottom: 10px;
border-bottom: 1px solid var(--line);
}
.mega-col ul {
display: flex; flex-direction: column;
gap: 0;
list-style: none;
padding: 0; margin: 0;
}
.mega-col ul li {
margin: 0;
}
.mega-col ul li a {
display: block;
font-family: 'Montserrat', sans-serif; font-weight: 500;
font-size: 13px; letter-spacing: 0;
color: var(--ink);
text-decoration: none;
padding: 8px 0;
line-height: 1.4;
text-transform: none;
position: relative;
transition: color 0.15s, padding-left 0.15s;
}
.mega-col ul li a:hover {
color: var(--accent);
padding-left: 6px;
}
.mega-col ul li a .tag {
display: block;
font-size: 10px;
font-weight: 400;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--ink-4);
margin-top: 2px;
}
@media (max-width: 900px) {
.mega-panel { display: none; }
.nav.open ul li.has-menu .mega-panel-mobile {
display: grid;
}
}
/* Mobile inline expansion of services */
.mega-panel-mobile { display: none; }
@media (max-width: 900px) {
.nav.open ul li.has-menu > .trigger {
width: 100%;
justify-content: space-between;
}
.nav.open ul li.has-menu .mega-panel-mobile {
grid-template-columns: 1fr;
gap: 18px;
padding: 20px 0 8px;
margin-bottom: 4px;
border-top: 1px solid var(--line);
border-bottom: 1px solid var(--line);
background: transparent;
max-height: 0;
overflow: hidden;
opacity: 0;
transition: max-height 0.3s, opacity 0.2s, padding 0.2s;
display: grid;
}
.nav.open ul li.has-menu.open .mega-panel-mobile {
max-height: 1200px;
opacity: 1;
padding: 20px 0 16px;
}
.mega-panel-mobile .mega-col h5 {
margin-bottom: 8px; padding-bottom: 6px;
}
.mega-panel-mobile .mega-col ul li a { padding: 6px 0; font-size: 14px; }
}
/* ============================================================
SERVICE DETAIL PAGES (lighter trade pages)
============================================================ */
.svc-detail-hero {
padding: 140px 0 90px;
background: var(--paper);
border-bottom: 1px solid var(--line);
}
.svc-detail-hero .grid-2 {
display: grid; grid-template-columns: 1.05fr 1fr;
gap: 64px; align-items: stretch;
}
.svc-detail-hero .hero-text {
display: flex; flex-direction: column; justify-content: center;
}
.svc-detail-hero .hero-text .eyebrow { display: inline-block; }
.svc-detail-hero .hero-text h1 {
margin-top: 24px;
font-size: 80px;
line-height: 0.95;
letter-spacing: -0.025em;
}
.svc-detail-hero .hero-text p.lede {
font-size: 19px;
margin-top: 28px;
max-width: 50ch;
color: var(--ink-2);
}
.svc-detail-hero .hero-text .hero-actions {
display: flex; gap: 18px; flex-wrap: wrap;
margin-top: 40px;
}
.svc-detail-hero .hero-photo {
background: var(--paper-3);
min-height: 480px;
position: relative;
overflow: hidden;
}
.svc-detail-hero .hero-photo::before {
content: '';
position: absolute; inset: 0;
background:
repeating-linear-gradient(135deg,
transparent 0,
transparent 28px,
rgba(22, 43, 61, 0.04) 28px,
rgba(22, 43, 61, 0.04) 29px);
}
.svc-detail-hero .hero-photo .ph-label {
position: absolute;
left: 24px; bottom: 20px;
font-family: 'Montserrat', sans-serif; font-weight: 600;
font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase;
color: var(--ink-3);
background: var(--paper);
padding: 6px 10px;
border: 1px solid var(--line);
}
/* Sections */
.svc-detail-section {
padding: 100px 0;
background: var(--paper);
border-bottom: 1px solid var(--line);
}
.svc-detail-section.alt { background: var(--paper-2); }
.svc-detail-section .layout-2col {
display: grid; grid-template-columns: 320px 1fr;
gap: 60px; align-items: start;
}
.svc-detail-section .col-label {
font-family: 'Montserrat', sans-serif; font-weight: 600;
font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase;
color: var(--ink-3);
margin-bottom: 14px;
}
.svc-detail-section h2 {
margin: 0; font-size: 36px; line-height: 1.1;
}
/* Scope grid */
.svc-scope-grid {
display: grid; grid-template-columns: repeat(2, 1fr);
gap: 0;
border: 1px solid var(--line);
background: var(--line);
row-gap: 1px; column-gap: 1px;
}
.svc-scope-grid .item {
background: var(--paper);
padding: 28px 32px;
}
.svc-detail-section.alt .svc-scope-grid .item { background: var(--paper-2); }
.svc-scope-grid .item h4 {
font-family: 'Montserrat', sans-serif; font-weight: 600;
font-size: 15px; margin-bottom: 8px;
letter-spacing: -0.005em;
}
.svc-scope-grid .item p {
margin: 0; font-size: 14px; color: var(--ink-2); line-height: 1.55;
}
/* Approach (essay-style) */
.svc-approach-body p {
font-size: 17px; line-height: 1.65; color: var(--ink-2);
max-width: 62ch;
}
.svc-approach-body p + p { margin-top: 18px; }
.svc-approach-body .specs {
margin-top: 32px;
display: grid; grid-template-columns: repeat(2, 1fr);
gap: 2px;
background: var(--line);
border: 1px solid var(--line);
}
.svc-approach-body .specs .spec {
background: var(--paper);
padding: 20px 24px;
}
.svc-detail-section.alt .svc-approach-body .specs .spec { background: var(--paper-2); }
.svc-approach-body .specs .spec .k {
font-family: 'Montserrat', sans-serif; font-weight: 600;
font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase;
color: var(--ink-3);
margin-bottom: 6px;
}
.svc-approach-body .specs .spec .v {
font-family: 'Montserrat', sans-serif; font-weight: 500;
font-size: 14px;
}
/* Visual strip (3-photo grid) */
.svc-visuals {
padding: 80px 0;
background: var(--paper);
border-bottom: 1px solid var(--line);
}
.svc-visuals .ph-strip {
display: grid;
grid-template-columns: 1.4fr 1fr;
grid-template-rows: 240px 240px;
gap: 2px;
background: var(--line);
border: 1px solid var(--line);
}
.svc-visuals .ph-slot {
background: var(--paper-3);
position: relative;
overflow: hidden;
}
.svc-visuals .ph-slot.tall { grid-row: 1 / span 2; }
.svc-visuals .ph-slot::before {
content: '';
position: absolute; inset: 0;
background:
repeating-linear-gradient(135deg,
transparent 0,
transparent 22px,
rgba(22, 43, 61, 0.04) 22px,
rgba(22, 43, 61, 0.04) 23px);
}
.svc-visuals .ph-slot .ph-label {
position: absolute;
left: 18px; bottom: 16px;
font-family: 'Montserrat', sans-serif; font-weight: 600;
font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase;
color: var(--ink-3);
background: var(--paper);
padding: 5px 9px;
border: 1px solid var(--line);
}
.svc-visuals .ph-strip-note {
margin-top: 18px;
font-family: 'Montserrat', sans-serif;
font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase;
color: var(--ink-4);
text-align: right;
}
/* Related services */
.svc-related {
padding: 80px 0;
background: var(--paper-2);
border-bottom: 1px solid var(--line);
}
.svc-related-grid {
display: grid; grid-template-columns: repeat(3, 1fr);
gap: 2px;
background: var(--line);
border: 1px solid var(--line);
margin-top: 32px;
}
.svc-related-grid a {
background: var(--paper);
padding: 28px 32px;
text-decoration: none;
color: var(--ink);
position: relative;
transition: background 0.15s;
}
.svc-related-grid a:hover { background: var(--paper-3); }
.svc-related-grid a .label {
font-family: 'Montserrat', sans-serif; font-weight: 600;
font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase;
color: var(--ink-3);
margin-bottom: 8px;
}
.svc-related-grid a .title {
font-family: 'Montserrat', sans-serif; font-weight: 600;
font-size: 19px;
line-height: 1.25;
letter-spacing: -0.01em;
}
.svc-related-grid a .arrow {
position: absolute;
bottom: 28px; right: 32px;
font-size: 16px;
color: var(--ink-4);
transition: color 0.15s, transform 0.2s;
}
.svc-related-grid a:hover .arrow {
color: var(--accent);
transform: translateX(4px);
}
@media (max-width: 900px) {
.svc-detail-hero { padding: 100px 0 60px; }
.svc-detail-hero .grid-2 { grid-template-columns: 1fr; gap: 36px; }
.svc-detail-hero .hero-text h1 { font-size: 52px; }
.svc-detail-hero .hero-photo { min-height: 280px; }
.svc-detail-section { padding: 70px 0; }
.svc-detail-section .layout-2col { grid-template-columns: 1fr; gap: 28px; }
.svc-scope-grid { grid-template-columns: 1fr; }
.svc-approach-body .specs { grid-template-columns: 1fr; }
.svc-visuals .ph-strip { grid-template-columns: 1fr; grid-template-rows: 220px 220px 220px; }
.svc-visuals .ph-slot.tall { grid-row: auto; }
.svc-related-grid { grid-template-columns: 1fr; }
}
@media (max-width: 1100px) {
.svc-division .grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 700px) {
.svc-division { padding: 70px 0; }
.svc-division .svc-head { grid-template-columns: 1fr; gap: 12px; }
.svc-division .num-big { font-size: 48px; }
.svc-division .grid { grid-template-columns: 1fr; margin-top: 36px; }
}
/* ---------- Portfolio filter chips ---------- */
.pf-filter {
display: flex; flex-wrap: wrap;
gap: 0;
margin: 0 0 56px;
border-top: 1px solid var(--line);
border-bottom: 1px solid var(--line);
}
.pf-filter button {
background: transparent;
border: none;
border-right: 1px solid var(--line);
padding: 18px 28px;
font-family: 'Montserrat', system-ui, sans-serif; font-weight: 600;
font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase;
color: var(--ink-3);
cursor: pointer;
transition: color 0.15s, background 0.15s;
position: relative;
}
.pf-filter button:last-child { border-right: none; }
.pf-filter button:hover { color: var(--ink); }
.pf-filter button .count {
margin-left: 8px;
font-weight: 500;
font-size: 10px;
color: var(--ink-4);
}
.pf-filter button.on {
color: var(--accent);
background: var(--paper);
}
.pf-filter button.on::after {
content: '';
position: absolute;
bottom: -1px; left: 0; right: 0;
height: 2px;
background: var(--accent);
}
.pf-empty {
display: none;
padding: 80px 20px;
border: 1px dashed var(--line);
text-align: center;
margin-top: 8px;
}
.pf-empty.show { display: block; }
.pf-empty h3 {
font-size: 22px; margin-bottom: 8px;
}
.pf-empty p {
color: var(--ink-3); font-size: 15px;
margin-bottom: 18px;
}
.pf-empty a {
font-family: 'Montserrat', system-ui, sans-serif; font-weight: 600;
font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase;
color: var(--accent);
border-bottom: 1px solid var(--accent);
padding-bottom: 2px;
}
.pf-grid .item { transition: opacity 0.2s; }
.pf-grid .item[hidden] { display: none; }
@media (max-width: 700px) {
.pf-filter { flex-direction: column; }
.pf-filter button { border-right: none; border-bottom: 1px solid var(--line); padding: 14px 20px; text-align: left; }
.pf-filter button:last-child { border-bottom: none; }
.pf-filter button.on::after { display: none; }
.pf-filter button.on { border-left: 3px solid var(--accent); padding-left: 17px; }
}
/* ============================================================
Accessibility (WCAG 2.1 AA)
============================================================ */
/* Skip-to-content link — visually hidden until focused */
.skip-link {
position: absolute;
left: -9999px; top: 0;
z-index: 2000;
background: var(--ink); color: var(--paper);
padding: 12px 18px;
font: 600 13px/1 'Montserrat', system-ui, sans-serif;
letter-spacing: 0.06em;
text-decoration: none;
}
.skip-link:focus { left: 8px; top: 8px; }
/* The target shouldn't draw a focus ring when reached via skip-link */
#main-content:focus { outline: none; }
/* Visible keyboard focus indicator — high-contrast ink ring by default.
Uses :focus-visible so mouse clicks don't show the ring. */
:focus-visible {
outline: 3px solid var(--ink);
outline-offset: 2px;
}
/* On dark surfaces (home hero, transparent nav over it, dark footer),
switch to a light ring so it stays visible. */
.hero :focus-visible,
.nav:not(.scrolled) :focus-visible,
footer.site :focus-visible {
outline-color: var(--paper);
}
/* Form fields set `outline: none` for their underline style — restore a
visible ring on keyboard focus (higher specificity than that rule). */
.form input:focus-visible,
.form select:focus-visible,
.form textarea:focus-visible,
.pf-filter-bar select:focus-visible {
outline: 3px solid var(--ink);
outline-offset: 2px;
}
/* Lang toggle + form chips are operated as buttons (role="button") — keep the
pointer affordance and ensure they show the focus ring. */
.lang span[role="button"] { cursor: pointer; }