/* ==========================================================================
PETER SIMONIS DAKWERKEN — STYLESHEET
Aligned with design.md and .firecrawl/branding.json
========================================================================== */
/* ---- Self-hosted webfonts (OFL, see assets/fonts/LICENSE.txt) ---- */
/* Poppins (heading) — 400/500/600/700, latin + latin-ext */
@font-face {
font-family: 'Poppins'; font-style: normal; font-weight: 400; font-display: swap;
src: url('assets/fonts/poppins-400-latin.woff2') format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'Poppins'; font-style: normal; font-weight: 400; font-display: swap;
src: url('assets/fonts/poppins-400-latin-ext.woff2') format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: 'Poppins'; font-style: normal; font-weight: 500; font-display: swap;
src: url('assets/fonts/poppins-500-latin.woff2') format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'Poppins'; font-style: normal; font-weight: 500; font-display: swap;
src: url('assets/fonts/poppins-500-latin-ext.woff2') format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: 'Poppins'; font-style: normal; font-weight: 600; font-display: swap;
src: url('assets/fonts/poppins-600-latin.woff2') format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'Poppins'; font-style: normal; font-weight: 600; font-display: swap;
src: url('assets/fonts/poppins-600-latin-ext.woff2') format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: 'Poppins'; font-style: normal; font-weight: 700; font-display: swap;
src: url('assets/fonts/poppins-700-latin.woff2') format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'Poppins'; font-style: normal; font-weight: 700; font-display: swap;
src: url('assets/fonts/poppins-700-latin-ext.woff2') format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Assistant (body) — 400/500/600/700, latin + latin-ext (variable file shared across weights) */
@font-face {
font-family: 'Assistant'; font-style: normal; font-weight: 400 700; font-display: swap;
src: url('assets/fonts/assistant-latin.woff2') format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'Assistant'; font-style: normal; font-weight: 400 700; font-display: swap;
src: url('assets/fonts/assistant-latin-ext.woff2') format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* ---- Tokens ---- */
:root {
/* Brand (locked from branding.json) */
--navy-900: #0C2052;
--navy-800: #15307A;
--navy-700: #1E3A8A;
--black: #000000;
/* Neutrals */
--white: #FFFFFF;
--off-white:#F6F7FB;
--line: #E4E7EF;
--mute-700: #4A5270;
--mute-500: #7B8299;
/* Feedback */
--success: #1F7A4D;
--danger: #B42318;
/* Semantic */
--bg: var(--white);
--bg-alt: var(--off-white);
--ink: var(--navy-900);
--text: var(--mute-700);
--rule: var(--line);
/* Fonts */
--font-heading: 'Poppins', 'Helvetica Neue', Arial, sans-serif;
--font-body: 'Assistant', 'Helvetica Neue', Arial, sans-serif;
/* Scale */
--fs-hero: clamp(2.75rem, 6vw, 4.75rem);
--fs-h2: clamp(2rem, 3.2vw, 3rem);
--fs-h3: clamp(1.25rem, 1.6vw, 1.5rem);
--fs-eyebrow: 0.8125rem;
--fs-lede: 1.25rem;
--fs-body: 1.0625rem;
--fs-small: 0.9375rem;
--fs-button: 0.9375rem;
/* Space (12px base) */
--s-1: 6px;
--s-2: 12px;
--s-3: 24px;
--s-4: 36px;
--s-5: 48px;
--s-6: 72px;
--s-7: 96px;
--s-8: 144px;
/* Radius */
--r-btn: 4.5px;
--r-card: 4px;
--r-input: 4px;
/* Easing */
--ease-ui: cubic-bezier(0.2, 0.8, 0.2, 1);
--ease-reveal: cubic-bezier(0.65, 0, 0.35, 1);
/* Shadow */
--shadow-card: 0 1px 0 rgba(12,32,82,0.04), 0 12px 32px -20px rgba(12,32,82,0.18);
}
/* ---- Reset ---- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
margin: 0;
font-family: var(--font-body);
font-size: var(--fs-body);
line-height: 1.65;
color: var(--text);
background: var(--bg);
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
img { max-width: 100%; display: block; }
a { color: var(--ink); text-decoration: none; }
button { font: inherit; cursor: pointer; }
h1, h2, h3, h4 { font-family: var(--font-heading); color: var(--ink); margin: 0; letter-spacing: -0.01em; }
p { margin: 0 0 1em; max-width: 62ch; }
:focus-visible { outline: 2px solid var(--navy-900); outline-offset: 3px; border-radius: 2px; }
/* ---- Layout helpers ---- */
.container { width: 100%; max-width: 1280px; margin: 0 auto; padding: 0 var(--s-3); }
.section { padding: var(--s-7) 0; }
.section--alt { background: var(--bg-alt); }
.section--ink { background: var(--navy-900); color: rgba(255,255,255,0.88); }
.section--ink h1, .section--ink h2, .section--ink h3 { color: var(--white); }
/* ==========================================================================
STYLESHEET PAGE CHROME (not part of the brand system — just for this doc)
========================================================================== */
.sg { background: var(--bg); }
.sg-hero {
padding: var(--s-7) 0 var(--s-5);
border-bottom: 1px solid var(--rule);
}
.sg-hero__eyebrow {
font-family: var(--font-heading);
font-weight: 600;
font-size: var(--fs-eyebrow);
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--navy-700);
margin-bottom: var(--s-2);
}
.sg-hero h1 {
font-size: var(--fs-hero);
font-weight: 700;
line-height: 1.05;
letter-spacing: -0.02em;
max-width: 16ch;
margin-bottom: var(--s-3);
}
.sg-hero p { font-size: var(--fs-lede); line-height: 1.55; max-width: 58ch; }
.sg-toc {
display: flex; flex-wrap: wrap; gap: var(--s-2);
margin-top: var(--s-4);
}
.sg-toc a {
font-family: var(--font-heading);
font-size: 13px; font-weight: 600;
letter-spacing: 0.08em; text-transform: uppercase;
padding: 8px 14px; border: 1px solid var(--rule);
border-radius: 4px; color: var(--ink);
transition: border-color .18s var(--ease-ui), background .18s var(--ease-ui);
}
.sg-toc a:hover { border-color: var(--navy-900); background: var(--navy-900); color: var(--white); }
.sg-section { padding: var(--s-6) 0; border-bottom: 1px solid var(--rule); }
.sg-section__title {
font-size: var(--fs-h2); font-weight: 600; line-height: 1.15;
margin-bottom: var(--s-2);
}
.sg-section__eyebrow {
font-family: var(--font-heading); font-weight: 600;
font-size: var(--fs-eyebrow); letter-spacing: 0.14em; text-transform: uppercase;
color: var(--navy-700); margin-bottom: var(--s-2);
}
.sg-section__lede { font-size: 1.125rem; color: var(--text); max-width: 62ch; margin-bottom: var(--s-5); }
.sg-row { display: grid; gap: var(--s-4); }
.sg-row--2 { grid-template-columns: 1fr 1fr; }
.sg-row--3 { grid-template-columns: repeat(3, 1fr); }
.sg-row--4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 880px) { .sg-row--2, .sg-row--3, .sg-row--4 { grid-template-columns: 1fr; } }
.sg-label {
font-family: var(--font-heading);
font-size: 11px; font-weight: 600;
letter-spacing: 0.14em; text-transform: uppercase;
color: var(--mute-500); margin-top: var(--s-2);
}
/* ==========================================================================
1. COLOR SWATCHES
========================================================================== */
.sw { border: 1px solid var(--rule); border-radius: var(--r-card); overflow: hidden; background: var(--white); }
.sw__chip { height: 128px; }
.sw__body { padding: 16px 18px; }
.sw__name { font-family: var(--font-heading); font-weight: 600; font-size: 0.9375rem; color: var(--ink); margin-bottom: 2px; }
.sw__hex { font-family: ui-monospace, 'SF Mono', Menlo, monospace; font-size: 13px; color: var(--mute-500); }
/* ==========================================================================
2. TYPE SPECIMENS
========================================================================== */
.type { padding: var(--s-3) 0; border-bottom: 1px dashed var(--rule); }
.type:last-child { border-bottom: 0; }
.type__demo { margin: 0; }
.type__meta {
font-family: ui-monospace, 'SF Mono', Menlo, monospace;
font-size: 12px; color: var(--mute-500); margin-top: 6px;
}
.t-hero { font-family: var(--font-heading); font-weight: 700; font-size: var(--fs-hero); line-height: 1.05; letter-spacing: -0.02em; color: var(--ink); }
.t-h2 { font-family: var(--font-heading); font-weight: 600; font-size: var(--fs-h2); line-height: 1.15; color: var(--ink); }
.t-h3 { font-family: var(--font-heading); font-weight: 600; font-size: var(--fs-h3); line-height: 1.25; color: var(--ink); }
.t-eyebrow { font-family: var(--font-heading); font-weight: 600; font-size: var(--fs-eyebrow); letter-spacing: 0.14em; text-transform: uppercase; color: var(--navy-700); }
.t-lede { font-family: var(--font-body); font-weight: 400; font-size: var(--fs-lede); line-height: 1.55; color: var(--text); }
.t-body { font-family: var(--font-body); font-weight: 400; font-size: var(--fs-body); line-height: 1.65; color: var(--text); }
.t-small { font-family: var(--font-body); font-weight: 500; font-size: var(--fs-small); color: var(--text); }
/* ==========================================================================
3. BUTTONS
========================================================================== */
.btn {
display: inline-flex; align-items: center; gap: 10px;
font-family: var(--font-heading); font-weight: 600;
font-size: var(--fs-button);
letter-spacing: 0.08em; text-transform: uppercase;
padding: 14px 24px; min-height: 48px;
border: 1px solid transparent; border-radius: var(--r-btn);
cursor: pointer; text-decoration: none;
transition: background .18s var(--ease-ui), color .18s var(--ease-ui), border-color .18s var(--ease-ui), transform .18s var(--ease-ui);
}
.btn__arrow { display: inline-block; transition: transform .18s var(--ease-ui); }
.btn:hover .btn__arrow { transform: translateX(4px); }
.btn--primary { background: var(--navy-900); color: var(--white); }
.btn--primary:hover { background: var(--navy-800); }
.btn--secondary { background: var(--black); color: var(--white); }
.btn--secondary:hover { background: #1a1a1a; }
.btn--ghost { background: transparent; color: var(--ink); border-color: var(--ink); }
.btn--ghost:hover { background: var(--ink); color: var(--white); }
.btn--ghost-inverse { background: transparent; color: var(--white); border-color: rgba(255,255,255,0.6); }
.btn--ghost-inverse:hover { background: var(--white); color: var(--ink); border-color: var(--white); }
.btn--text {
background: transparent; color: var(--ink);
padding: 6px 0; min-height: 0; border-radius: 0;
border: 0; text-transform: none; letter-spacing: 0;
font-family: var(--font-heading); font-weight: 600; font-size: 0.9375rem;
border-bottom: 2px solid transparent;
}
.btn--text:hover { border-bottom-color: var(--ink); }
.btn-group { display: flex; flex-wrap: wrap; gap: 14px; }
/* ==========================================================================
4. NAVIGATION — moved to partials/nav.css (loaded separately)
========================================================================== */
/* ==========================================================================
5. HERO
========================================================================== */
.hero {
position: relative;
border-radius: var(--r-card);
overflow: hidden;
isolation: isolate;
display: flex; align-items: center;
padding: calc(var(--s-7) + var(--s-3)) var(--s-5) var(--s-7);
color: var(--white);
}
.hero__bg {
position: absolute; inset: 0; z-index: -2;
width: 100%; height: 100%;
object-fit: cover; object-position: center;
background-color: var(--navy-900);
}
.hero__overlay {
position: absolute; inset: 0; z-index: -1;
background: linear-gradient(100deg, rgba(12,32,82,0.88) 0%, rgba(12,32,82,0.6) 55%, rgba(12,32,82,0.15) 100%);
}
.hero__eyebrow {
font-family: var(--font-heading); font-weight: 600;
font-size: var(--fs-eyebrow); letter-spacing: 0.14em; text-transform: uppercase;
color: rgba(255,255,255,0.72); margin-bottom: var(--s-3);
}
.hero h1 {
font-size: var(--fs-hero); font-weight: 700; line-height: 1.05;
letter-spacing: -0.02em; color: var(--white); max-width: 16ch;
margin-bottom: var(--s-3);
}
.hero h1 em { font-style: normal; font-weight: 400; }
.hero__lede {
font-family: var(--font-body); font-weight: 400;
font-size: var(--fs-lede); line-height: 1.55;
max-width: 48ch; margin-bottom: var(--s-4);
color: rgba(255,255,255,0.92);
}
.hero__ctas { display: flex; flex-wrap: wrap; gap: 14px; }
/* ==========================================================================
6. PILLAR BAND
========================================================================== */
.pillars {
background: var(--navy-900); color: var(--white);
border-radius: var(--r-card);
padding: var(--s-6) var(--s-5);
display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-5);
}
.pillar { position: relative; }
.pillar + .pillar::before {
content: ""; position: absolute; left: calc(-1 * var(--s-5) / 2);
top: 0; width: 1px; height: 48px; background: rgba(255,255,255,0.18);
}
.pillar__num {
font-family: var(--font-heading); font-weight: 600; font-size: 12px;
letter-spacing: 0.18em; color: rgba(255,255,255,0.6); margin-bottom: 12px;
}
.pillar__title {
font-family: var(--font-heading); font-weight: 600;
font-size: 1.375rem; line-height: 1.2; color: var(--white); margin-bottom: 10px;
}
.pillar__body { color: rgba(255,255,255,0.82); font-size: var(--fs-body); line-height: 1.6; margin: 0; max-width: 40ch; }
@media (max-width: 880px) {
.pillars { grid-template-columns: 1fr; gap: var(--s-4); padding: var(--s-4) var(--s-3); }
.pillar + .pillar::before { display: none; }
.section { padding: var(--s-5) 0; }
}
/* ==========================================================================
7. SERVICE CARD
========================================================================== */
.card {
background: var(--white); border: 1px solid var(--rule); border-radius: var(--r-card);
overflow: hidden; display: flex; flex-direction: column;
transition: border-color .22s var(--ease-ui), transform .22s var(--ease-ui), box-shadow .22s var(--ease-ui);
}
.card:hover { border-color: var(--navy-900); box-shadow: var(--shadow-card); }
.card__img { aspect-ratio: 16/9; overflow: hidden; background: var(--off-white); }
.card__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s var(--ease-reveal); }
.card:hover .card__img img { transform: scale(1.03); }
.card__body { padding: var(--s-3); display: flex; flex-direction: column; gap: 10px; flex: 1; }
.card__eyebrow {
font-family: var(--font-heading); font-weight: 600; font-size: 11px;
letter-spacing: 0.16em; text-transform: uppercase; color: var(--navy-700);
}
.card__title { font-family: var(--font-heading); font-weight: 600; font-size: var(--fs-h3); color: var(--ink); }
.card__desc { margin: 0; font-size: 1rem; line-height: 1.55; color: var(--text); }
.card__link { margin-top: auto; }
/* ==========================================================================
8. FOUNDER BLOCK
========================================================================== */
.founder {
display: grid; grid-template-columns: 7fr 5fr; gap: var(--s-6);
align-items: center;
}
.founder__copy h2 { font-size: var(--fs-h2); font-weight: 600; line-height: 1.15; margin-bottom: var(--s-3); }
.founder__copy h2 em { font-style: italic; font-weight: 500; color: var(--navy-700); }
.founder__copy p { font-size: 1.0625rem; line-height: 1.7; color: var(--text); }
.founder__media { position: relative; }
.founder__media img {
aspect-ratio: 1/1; width: 100%; object-fit: cover;
border-radius: var(--r-card);
box-shadow: 0 24px 48px -32px rgba(12,32,82,0.3);
}
.founder__caption {
margin-top: 14px;
font-family: var(--font-heading); font-weight: 600; font-size: 12px;
letter-spacing: 0.14em; text-transform: uppercase; color: var(--mute-500);
}
@media (max-width: 880px) { .founder { grid-template-columns: 1fr; gap: var(--s-4); } }
/* ==========================================================================
9. FAQ
========================================================================== */
.faq { max-width: 760px; margin: 0 auto; }
.faq details {
border-bottom: 1px solid var(--rule);
padding: var(--s-3) 0;
}
.faq details[open] { background: var(--off-white); padding-left: var(--s-3); padding-right: var(--s-3); margin: 0 calc(-1 * var(--s-3)); }
.faq summary {
list-style: none; cursor: pointer;
display: flex; align-items: center; justify-content: space-between; gap: var(--s-3);
font-family: var(--font-heading); font-weight: 600; font-size: 1.125rem;
color: var(--ink);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
content: "+"; font-family: var(--font-heading); font-weight: 400; font-size: 1.75rem;
color: var(--navy-900); transition: transform .22s var(--ease-ui);
line-height: 1;
}
.faq details[open] summary::after { transform: rotate(45deg); }
.faq__answer { margin-top: var(--s-2); color: var(--text); max-width: 62ch; }
/* ==========================================================================
10. REGIO MARQUEE — matches live site `.LocatieDiv` pattern
Chip-row with location-pin icon + city name, scrolling horizontally,
content duplicated 1x for a seamless loop. Edge mask fades content
into the background.
========================================================================== */
.marquee {
position: relative;
overflow: hidden;
padding: var(--s-4) 0;
/* Fade-out edges so chips dissolve into the page bg */
-webkit-mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
}
.marquee__track {
display: flex; gap: 16px; width: max-content;
animation: marquee 60s linear infinite;
}
.marquee:hover .marquee__track { animation-play-state: paused; }
/* Individual chip */
.locatie {
display: inline-flex; align-items: center; gap: 10px;
padding: 12px 20px 12px 16px;
background: var(--white);
border: 1px solid var(--rule);
border-radius: 999px;
white-space: nowrap;
font-family: var(--font-heading);
font-weight: 600; font-size: 0.9375rem;
color: var(--ink);
transition: border-color .18s var(--ease-ui), transform .18s var(--ease-ui);
}
.locatie:hover { border-color: var(--navy-900); transform: translateY(-1px); }
.locatie__pin {
width: 16px; height: 16px;
color: var(--navy-900);
flex-shrink: 0;
}
@keyframes marquee {
from { transform: translate3d(0, 0, 0); }
to { transform: translate3d(-50%, 0, 0); }
}
@media (prefers-reduced-motion: reduce) {
.marquee__track { animation: none; flex-wrap: wrap; width: auto; }
.marquee { -webkit-mask-image: none; mask-image: none; }
}
/* ==========================================================================
11. FORM
========================================================================== */
.form { display: grid; gap: var(--s-3); max-width: 520px; }
.field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.field label {
font-family: var(--font-heading); font-weight: 600; font-size: 13px;
color: var(--ink); letter-spacing: 0.02em;
}
.field input, .field textarea, .field select {
width: 100%; min-width: 0; max-width: 100%;
font-family: var(--font-body); font-size: 1rem;
padding: 12px 14px; background: var(--white);
border: 1px solid var(--rule); border-radius: var(--r-input); color: var(--ink);
transition: border-color .18s var(--ease-ui), box-shadow .18s var(--ease-ui);
}
.field input { height: 48px; }
.field textarea { min-height: 140px; resize: vertical; }
.field input:focus, .field textarea:focus {
outline: none; border-color: var(--navy-900);
box-shadow: 0 0 0 3px rgba(12,32,82,0.12);
}
.field__hint { font-size: 13px; color: var(--mute-500); }
/* ==========================================================================
12. FOOTER
========================================================================== */
/* Footer styles moved to partials/footer.css */
/* ==========================================================================
13. UTILITIES
========================================================================== */
.u-flex { display: flex; gap: var(--s-2); flex-wrap: wrap; }
.u-center { display: flex; align-items: center; justify-content: center; }
.u-demo-bg { background: var(--off-white); padding: var(--s-4); border-radius: var(--r-card); }
/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
}
/* ==========================================================================
MODIFIERS — replace former inline styles
========================================================================== */
/* Swatch chip color variants */
.sw__chip--navy-900 { background: var(--navy-900); }
.sw__chip--navy-800 { background: var(--navy-800); }
.sw__chip--navy-700 { background: var(--navy-700); }
.sw__chip--black { background: var(--black); }
.sw__chip--white { background: var(--white); border-bottom: 1px solid var(--rule); }
.sw__chip--off { background: var(--off-white); }
.sw__chip--line { background: var(--line); }
.sw__chip--text { background: var(--mute-700); }
/* Demo background on dark */
.u-demo-bg--dark { background: var(--navy-900); }
/* Inverse-on-dark button fill (white fill, navy text) */
.btn--on-dark { background: var(--white); color: var(--ink); }
.btn--on-dark:hover { background: var(--off-white); }
/* Label variant on dark */
.sg-label--on-dark { color: rgba(255,255,255,0.6); }
/* Em reset inside hero H1 and similar contexts (non-italic light weight) */
.t-hero em { font-style: normal; font-weight: 400; }
/* Footer tweaks */
.footer__logo-soft { opacity: 0.55; }
.footer__claim--tight { margin: 0; }
/* Section modifiers */
.sg-section--no-border { border-bottom: 0; }
.sg-section--compact { padding: var(--s-4) 0; }
/* Title tweak used above the marquee */
.sg-section__title--tight { margin-bottom: var(--s-4); }
/* ==========================================================================
HERO VIDEO BACKGROUND
Inspired by live site (looping MP4). Modern: poster fallback, muted+
playsinline for autoplay, reduced-motion stops the video.
========================================================================== */
.hero__video {
position: absolute; inset: 0; z-index: -2;
width: 100%; height: 100%; object-fit: cover;
pointer-events: none;
}
@media (prefers-reduced-motion: reduce) {
.hero__video { display: none; }
.hero__bg { display: block; }
}
/* ==========================================================================
CAROUSEL — zero-JS scroll-snap
Replaces Splide. Native overflow scroll + scroll-snap, no library.
Arrows drive .scrollBy() via inline handler; fully usable without JS (just
swipe / drag).
========================================================================== */
.carousel { position: relative; }
.carousel__viewport {
display: grid;
grid-auto-flow: column;
grid-auto-columns: minmax(300px, calc((100% - 2 * var(--s-3)) / 3));
gap: var(--s-3);
overflow-x: auto;
scroll-snap-type: x mandatory;
scroll-behavior: smooth;
scrollbar-width: none;
padding-bottom: 4px; /* room for focus rings */
}
.carousel__viewport::-webkit-scrollbar { display: none; }
.carousel__viewport > * { scroll-snap-align: start; min-width: 0; }
@media (max-width: 1100px) {
.carousel__viewport { grid-auto-columns: minmax(280px, calc((100% - var(--s-3)) / 2)); }
}
@media (max-width: 680px) {
.carousel__viewport { grid-auto-columns: 86%; }
}
.carousel__controls {
display: flex; gap: 10px; justify-content: flex-end;
margin-top: var(--s-3);
}
.carousel__btn {
width: 44px; height: 44px; border-radius: 999px;
border: 1px solid var(--rule); background: var(--white);
display: inline-flex; align-items: center; justify-content: center;
color: var(--ink); cursor: pointer;
transition: background .18s var(--ease-ui), border-color .18s var(--ease-ui), color .18s var(--ease-ui);
}
.carousel__btn:hover { background: var(--navy-900); color: var(--white); border-color: var(--navy-900); }
.carousel__btn:disabled { opacity: 0.35; cursor: not-allowed; }
.carousel__btn svg { width: 18px; height: 18px; }
/* ==========================================================================
SPLIT — reusable 2-column grid (image + text)
Inspired by the over-ons / founder pattern. Modern: CSS grid, no floats,
auto-collapses on mobile.
========================================================================== */
.split {
display: grid;
gap: var(--s-6);
align-items: center;
grid-template-columns: 1fr 1fr;
}
.split--7-5 { grid-template-columns: 7fr 5fr; }
.split--5-7 { grid-template-columns: 5fr 7fr; }
.split--reverse { direction: rtl; }
.split--reverse > * { direction: ltr; }
@media (max-width: 880px) {
.split, .split--7-5, .split--5-7 { grid-template-columns: 1fr; gap: var(--s-4); }
.split--reverse { direction: ltr; }
}
/* SVG sprite + skip-link + site-header + mobile nav styles live in partials/nav.css */
/* ==========================================================================
HOMEPAGE-SPECIFIC COMPONENTS
Added for index.html — homepage rebuild based on petersimonisdakwerken.nl
========================================================================== */
/* Skip-link, site-header, mobile nav: see partials/nav.css */
/* Hero (photo variant) — content-driven height. No vh. Top padding reserves
room for the fixed nav pill (20px offset + 80px height) + generous breathing. */
.hero--photo {
position: relative; isolation: isolate; overflow: hidden;
display: flex; align-items: center;
padding: calc(20px + 80px + var(--s-7)) 0 calc(var(--s-7) + var(--s-3));
color: var(--white);
border-radius: 0;
}
@media (max-width: 880px) {
.hero--photo {
padding-top: calc(12px + 64px + var(--s-6));
padding-bottom: var(--s-6);
}
}
.hero--photo .hero__bg,
.page-header .hero__bg {
position: absolute; inset: 0; z-index: -2;
width: 100%; height: 100%;
object-fit: cover; object-position: center;
}
.hero--photo .hero__overlay,
.page-header .hero__overlay {
position: absolute; inset: 0; z-index: -1;
background: linear-gradient(100deg, rgba(12,32,82,0.88) 0%, rgba(12,32,82,0.62) 55%, rgba(12,32,82,0.2) 100%);
}
.hero__inner { max-width: 720px; }
/* Section titles for the homepage (with eyebrow + H2 centered or lead) */
.section-head { margin-bottom: var(--s-5); max-width: 62ch; }
.section-head__eyebrow {
font-family: var(--font-heading); font-weight: 600; font-size: var(--fs-eyebrow);
letter-spacing: 0.14em; text-transform: uppercase;
color: var(--navy-700); margin-bottom: 10px;
}
.section-head__title {
font-family: var(--font-heading); font-weight: 600;
font-size: var(--fs-h2); line-height: 1.15; color: var(--ink);
letter-spacing: -0.01em; margin: 0 0 var(--s-2);
}
.section-head__lede {
font-size: 1.125rem; line-height: 1.6; color: var(--text);
max-width: 62ch; margin: 0;
}
/* Portrait — single editorial image with clean caption overlay.
Inspired by the canonical founder/profile pattern used by Stripe, Apple,
NYT profiles and editorial agencies. ONE image, ONE caption. No stacking,
no overlap, no negative offsets. Robust by design. */
.portrait {
position: relative;
margin: 0 0 0 auto; /* right-align in split column on desktop */
width: 100%;
max-width: 460px; /* hard cap so it never dominates the section */
border-radius: var(--r-card);
overflow: hidden;
background: var(--off-white); /* shows during image load */
box-shadow: 0 40px 80px -40px rgba(12,32,82,0.4);
}
.portrait__img {
display: block;
width: 100%;
height: auto; /* nullify HTML height attr so aspect-ratio wins */
aspect-ratio: 1/1; /* square — source is 971×971, Peter centered */
object-fit: cover;
object-position: center;
}
.portrait__caption {
position: absolute;
left: 24px; right: 24px; bottom: 24px;
margin: 0;
padding: 16px 20px;
background: rgba(12,32,82,0.88);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border-radius: var(--r-card);
color: var(--white);
display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap;
font-family: var(--font-heading);
}
.portrait__caption strong {
font-weight: 600; font-size: 1.0625rem; color: var(--white);
letter-spacing: -0.005em;
}
.portrait__caption span {
font-weight: 500; font-size: 11px;
letter-spacing: 0.16em; text-transform: uppercase;
color: rgba(255,255,255,0.72);
}
@media (max-width: 880px) {
.portrait { max-width: 480px; margin: 0 auto; }
.portrait__caption { left: 16px; right: 16px; bottom: 16px; padding: 14px 16px; }
}
/* FAQ-intro left column */
.faq-intro h2 { margin-bottom: var(--s-2); font-size: var(--fs-h2); font-weight: 600; color: var(--ink); line-height: 1.15; }
.faq-intro p { color: var(--text); font-size: 1.0625rem; line-height: 1.65; margin-bottom: var(--s-3); }
/* Full-bleed CTA band with video/photo background */
.cta-band {
position: relative; isolation: isolate; overflow: hidden;
padding: var(--s-7) 0;
color: var(--white); text-align: center;
}
.cta-band__bg,
.cta-band__video {
position: absolute; inset: 0; z-index: -2;
width: 100%; height: 100%; object-fit: cover;
}
.cta-band__overlay {
position: absolute; inset: 0; z-index: -1;
background: linear-gradient(180deg, rgba(12,32,82,0.78) 0%, rgba(12,32,82,0.82) 100%);
}
.cta-band__inner { max-width: 720px; margin: 0 auto; }
.cta-band h2 {
font-size: var(--fs-h2); font-weight: 600; line-height: 1.15;
letter-spacing: -0.01em; color: var(--white); margin: 0 0 var(--s-3);
}
.cta-band p { color: rgba(255,255,255,0.88); font-size: 1.125rem; line-height: 1.6; margin: 0 auto var(--s-4); }
@media (prefers-reduced-motion: reduce) {
.cta-band__video { display: none; }
}
/* Hero H1 treatment (homepage) */
.hero--photo h1 {
font-family: var(--font-heading); font-weight: 700;
font-size: var(--fs-hero); line-height: 1.05; letter-spacing: -0.02em;
color: var(--white); max-width: 16ch;
margin: 0 0 var(--s-3);
}
.hero--photo h1 em { font-style: normal; font-weight: 500; color: rgba(255,255,255,0.7); }
.hero--photo .hero__eyebrow { color: rgba(255,255,255,0.7); margin-bottom: var(--s-3); }
.hero--photo .hero__lede { color: rgba(255,255,255,0.92); font-size: var(--fs-lede); line-height: 1.55; max-width: 52ch; margin: 0 0 var(--s-4); }
.hero--photo .hero__ctas { display: flex; flex-wrap: wrap; gap: 14px; }
/* Page section wrappers — scroll-margin accounts for the fixed nav (20 + 80 + buffer) */
main section { scroll-margin-top: 120px; }
/* Reveal utility — fade + translateY on intersection */
.reveal { opacity: 0; transform: translateY(16px); transition: opacity .6s var(--ease-reveal), transform .6s var(--ease-reveal); }
.reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } }
/* Screen-reader only (visually hidden, still accessible) */
.u-sr-only {
position: absolute; width: 1px; height: 1px;
padding: 0; margin: -1px; overflow: hidden;
clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
/* Hero background variants are no longer needed: hero uses ![]()
with srcset. */
/* CTA-band background variants */
.cta-band__bg--dakrenovatie {
background-image: url('assets/dakrenovatie-dakdekker-1024x576.jpg');
background-image: image-set(url('assets/dakrenovatie-dakdekker-1024.webp') type('image/webp') 1x, url('assets/dakrenovatie-dakdekker-1024x576.jpg') 1x);
background-size: cover; background-position: center;
}
.cta-band__bg--grote-projecten {
background-image: url('assets/grote-projecten-dakwerk-peter-1024x576.jpg');
background-image: image-set(url('assets/grote-projecten-dakwerk-peter-1024.webp') type('image/webp') 1x, url('assets/grote-projecten-dakwerk-peter-1024x576.jpg') 1x);
background-size: cover; background-position: center;
}
/* Inline-style replacements */
.accent-italic { font-style: italic; font-weight: 500; color: var(--navy-700); }
.section-head__eyebrow--on-dark { color: rgba(255,255,255,0.7); }
.hero__ctas--center { justify-content: center; }
/* Mobile navigation (hamburger + off-canvas sheet): see partials/nav.css */
/* ==========================================================================
CAROUSEL VIEWPORT — visible focus ring for keyboard users
========================================================================== */
.carousel__viewport:focus-visible {
outline: 2px solid var(--navy-900);
outline-offset: 4px;
border-radius: 4px;
}
/* ==========================================================================
PAGE-LEVEL COMPONENTS (subpages)
========================================================================== */
/* Page header — photographic hero variant, matches homepage .hero--photo
Background image + navy gradient overlay + white text. Children keep
their existing class names; CSS re-styles for dark background. */
.page-header {
position: relative;
isolation: isolate;
overflow: hidden;
padding: calc(20px + 80px + var(--s-7)) 0 calc(var(--s-7) + var(--s-3));
background: var(--navy-900);
color: var(--white);
border-bottom: 0;
}
@media (max-width: 880px) {
.page-header {
padding-top: calc(12px + 64px + var(--s-6));
padding-bottom: var(--s-6);
}
}
.page-header__inner { max-width: 780px; position: relative; z-index: 1; }
.page-header .section-head__eyebrow { color: rgba(255,255,255,0.72); }
.page-header h1 {
font-family: var(--font-heading); font-weight: 700;
font-size: clamp(2.25rem, 4.2vw, 3.5rem);
line-height: 1.08; letter-spacing: -0.02em;
color: var(--white); margin: 10px 0 var(--s-3);
}
.page-header h1 em { font-style: normal; font-weight: 500; color: rgba(255,255,255,0.7); }
.page-header__lede {
font-family: var(--font-body); font-size: var(--fs-lede);
line-height: 1.55; color: rgba(255,255,255,0.92); max-width: 62ch; margin: 0;
}
.page-header__ctas { display: flex; flex-wrap: wrap; gap: 14px; margin-top: var(--s-3); }
/* Breadcrumbs readable on dark */
.page-header .breadcrumbs { color: rgba(255,255,255,0.6); }
.page-header .breadcrumbs a { color: rgba(255,255,255,0.85); border-bottom: 1px solid transparent; transition: border-color .18s var(--ease-ui); }
.page-header .breadcrumbs a:hover { color: var(--white); border-bottom-color: rgba(255,255,255,0.6); }
.page-header .breadcrumbs__sep { color: rgba(255,255,255,0.35); }
.page-header .breadcrumbs__current { color: var(--white); }
/* Breadcrumbs */
.breadcrumbs {
font-family: var(--font-heading); font-weight: 500;
font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase;
color: var(--mute-500);
display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
margin: 0 0 2px;
}
.breadcrumbs a { color: var(--navy-700); }
.breadcrumbs a:hover { color: var(--navy-900); }
.breadcrumbs__sep { color: var(--mute-500); opacity: 0.6; }
.breadcrumbs__current { color: var(--ink); }
/* Specs — 3-col benefit strip on white (like pillars but light) */
.specs {
display: grid; grid-template-columns: repeat(3, 1fr);
gap: var(--s-5); padding: var(--s-6) 0;
border-top: 1px solid var(--rule);
border-bottom: 1px solid var(--rule);
}
.spec { position: relative; padding-left: 0; }
.spec__num {
font-family: var(--font-heading); font-weight: 600;
font-size: 13px; letter-spacing: 0.14em; text-transform: uppercase;
color: var(--navy-700); margin-bottom: 14px;
display: inline-block; padding-bottom: 10px;
border-bottom: 2px solid var(--navy-900); min-width: 40px;
}
.spec__title {
font-family: var(--font-heading); font-weight: 600;
font-size: 1.25rem; line-height: 1.25; color: var(--ink);
margin: 0 0 10px;
}
.spec__body {
font-family: var(--font-body); font-size: var(--fs-body);
line-height: 1.6; color: var(--text); margin: 0; max-width: 40ch;
}
@media (max-width: 880px) {
.specs { grid-template-columns: 1fr; gap: var(--s-4); padding: var(--s-5) 0; }
}
/* Projects — 2-column project cards */
.projects {
display: grid; grid-template-columns: 1fr 1fr;
gap: var(--s-4);
}
@media (max-width: 880px) { .projects { grid-template-columns: 1fr; } }
.project {
background: var(--white); border: 1px solid var(--rule);
border-radius: var(--r-card); overflow: hidden;
display: flex; flex-direction: column;
transition: border-color .18s var(--ease-ui), box-shadow .28s var(--ease-ui);
}
.project:hover { border-color: var(--navy-900); box-shadow: 0 12px 32px -20px rgba(12,32,82,0.28); }
.project__img { aspect-ratio: 3/2; overflow: hidden; background: var(--off-white); }
.project__img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s ease-out; }
.project:hover .project__img img { transform: scale(1.02); }
.project__body { padding: var(--s-3); display: flex; flex-direction: column; gap: 10px; }
.project__eyebrow {
font-family: var(--font-heading); font-weight: 600;
font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase;
color: var(--navy-700);
}
.project__title { font-family: var(--font-heading); font-weight: 600; font-size: 1.25rem; color: var(--ink); margin: 0; }
.project__desc { margin: 0; font-size: 1rem; line-height: 1.6; color: var(--text); }
/* Contact grid — form + direct channels */
.contact-grid {
display: grid; grid-template-columns: 7fr 5fr;
gap: var(--s-6); align-items: start;
}
@media (max-width: 880px) { .contact-grid { grid-template-columns: 1fr; gap: var(--s-5); } }
.contact-form { display: grid; gap: var(--s-3); min-width: 0; }
.contact-form .row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-3); min-width: 0; }
.contact-form .row-2 > * { min-width: 0; }
@media (max-width: 640px) { .contact-form .row-2 { grid-template-columns: 1fr; } }
.contact-form button[type="submit"] { align-self: start; }
.channels {
background: var(--off-white); border: 1px solid var(--rule);
border-radius: var(--r-card); padding: var(--s-4);
display: flex; flex-direction: column; gap: var(--s-3);
}
.channel__label {
font-family: var(--font-heading); font-weight: 600;
font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase;
color: var(--navy-700); margin: 0 0 6px;
}
.channel__value { font-family: var(--font-heading); font-weight: 600; font-size: 1.25rem; color: var(--ink); display: block; line-height: 1.3; }
.channel__value:hover { color: var(--navy-800); }
.channel + .channel { padding-top: var(--s-3); border-top: 1px solid var(--rule); }
/* List variants — used op contact.html (hours/meta) en werkgebied/stad-pagina's (list) */
.channels--list, .channels--hours, .channels--meta {
list-style: none; margin: 0 0 var(--s-3); padding: var(--s-3) var(--s-4);
}
.channels--list li, .channels--hours li, .channels--meta li {
padding: 8px 0; border-bottom: 1px solid var(--rule);
font-family: var(--font-body); color: var(--text);
}
.channels--list li:last-child, .channels--hours li:last-child, .channels--meta li:last-child { border-bottom: 0; }
.channels--list a { color: var(--ink); font-weight: 600; text-decoration: none; }
.channels--list a:hover { color: var(--navy-800); text-decoration: underline; }
.channels--hours strong, .channels--meta strong { color: var(--ink); margin-right: 8px; }
.u-mt-3 { margin-top: var(--s-3); }
/* Timeline (over-ons) */
.timeline { display: grid; grid-template-columns: 1fr; gap: 0; border-top: 1px solid var(--rule); }
.timeline__row {
display: grid; grid-template-columns: 140px 1fr; gap: var(--s-4);
padding: var(--s-4) 0; border-bottom: 1px solid var(--rule);
align-items: baseline;
}
@media (max-width: 640px) { .timeline__row { grid-template-columns: 1fr; gap: 8px; } }
.timeline__year {
font-family: var(--font-heading); font-weight: 700; font-size: 2rem;
color: var(--navy-900); letter-spacing: -0.02em; line-height: 1;
}
.timeline__text h3 { font-family: var(--font-heading); font-weight: 600; font-size: 1.25rem; color: var(--ink); margin: 0 0 8px; }
.timeline__text p { margin: 0; color: var(--text); line-height: 1.6; max-width: 62ch; }
/* (Removed: legacy .hero__bg--* background-image rules — heroes now use ![]()
with srcset.) */
/* Founder-media replacement for subpages (single image, no overlay) */
.single-media { position: relative; }
.single-media img {
width: 100%; height: auto; display: block;
aspect-ratio: 4/5; object-fit: cover;
border-radius: var(--r-card);
}
.single-media__caption {
margin-top: 14px;
font-family: var(--font-heading); font-weight: 600;
font-size: 13px; letter-spacing: 0.14em; text-transform: uppercase;
color: var(--mute-500);
}
.single-media__caption strong { color: var(--ink); font-weight: 600; }
/* Related services row */
.related { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-4); }
@media (max-width: 880px) { .related { grid-template-columns: 1fr; } }
/* Split modifier — media (img/figure) appears FIRST on mobile only.
DOM order stays text-first (matches desktop visual flow), CSS `order`
only affects visual layout in flex/grid; screenreaders still read DOM
order, which is acceptable since the figure has its own caption. */
@media (max-width: 880px) {
.split--media-first-mobile { display: flex; flex-direction: column; }
.split--media-first-mobile > figure,
.split--media-first-mobile > .portrait,
.split--media-first-mobile > picture,
.split--media-first-mobile > img { order: -1; }
}
/* ==========================================================================
BUTTONS — full width on mobile (touch-friendly tap targets, no awkward
half-row buttons). Excludes .btn--text (inline link styling).
========================================================================== */
@media (max-width: 880px) {
.btn:not(.btn--text) {
width: 100%;
justify-content: center;
}
/* Button groups stack and each child fills row */
.btn-group,
.hero__ctas {
flex-direction: column;
align-items: stretch;
}
}
/* Service-media — landscape figure used on service detail pages */
.service-media {
position: relative;
margin: 0;
width: 100%;
border-radius: var(--r-card);
overflow: hidden;
background: var(--off-white);
box-shadow: 0 40px 80px -40px rgba(12,32,82,0.4);
}
.service-media img {
display: block; width: 100%; height: auto;
aspect-ratio: 4/3; object-fit: cover; object-position: center;
}
.service-media__caption {
position: absolute;
left: 24px; right: 24px; bottom: 24px;
margin: 0;
padding: 16px 20px;
background: rgba(12, 32, 82, 0.88);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border-radius: var(--r-card);
max-width: calc(100% - 48px);
display: flex; flex-direction: column; gap: 4px;
}
.service-media__caption strong {
font-family: var(--font-heading); font-weight: 600;
font-size: 1.0625rem; color: var(--white);
letter-spacing: -0.005em;
}
.service-media__caption span {
font-family: var(--font-heading); font-weight: 500;
font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase;
color: rgba(255, 255, 255, 0.72);
}
@media (max-width: 880px) {
.service-media__caption { left: 16px; right: 16px; bottom: 16px; padding: 14px 16px; }
}
/* Page-header CTA group — spacing under the lede */
.page-header__ctas { display: flex; flex-wrap: wrap; gap: 14px; margin-top: var(--s-3); }
/* Contact map — monochrome tiles, navy pin, open-in-kaarten CTA */
.contact-map {
position: relative;
border-radius: var(--r-card);
overflow: hidden;
border: 1px solid var(--rule);
background: var(--off-white);
}
.contact-map__canvas { width: 100%; height: 480px; }
@media (max-width: 640px) { .contact-map__canvas { height: 360px; } }
.contact-map__cta {
position: absolute; bottom: 20px; right: 20px; z-index: 500;
display: inline-flex; align-items: center; gap: 8px;
background: var(--white); color: var(--ink);
padding: 12px 18px; border-radius: var(--r-btn);
border: 1px solid var(--rule);
font-family: var(--font-heading); font-weight: 600; font-size: 14px;
letter-spacing: 0.04em;
box-shadow: 0 8px 24px -12px rgba(12,32,82,0.3);
transition: border-color .18s var(--ease-ui), transform .18s var(--ease-ui);
}
.contact-map__cta:hover { border-color: var(--navy-900); transform: translateY(-1px); }
.contact-map__cta .btn__arrow { transition: transform .18s var(--ease-ui); }
.contact-map__cta:hover .btn__arrow { transform: translateX(4px); }
/* Leaflet overrides — neutralise default chrome, match brand */
.leaflet-container { font-family: var(--font-body); background: var(--off-white); }
.leaflet-popup-content-wrapper {
border-radius: var(--r-card);
box-shadow: 0 12px 32px -20px rgba(12,32,82,0.4);
padding: 4px 6px;
}
.leaflet-popup-content { font-size: 14px; line-height: 1.5; color: var(--ink); margin: 10px 14px; }
.leaflet-popup-content strong { font-family: var(--font-heading); font-weight: 600; color: var(--ink); }
.leaflet-popup-tip { background: var(--white); }
.leaflet-bar a { color: var(--ink); }
.peter-pin { background: transparent; border: 0; filter: drop-shadow(0 6px 12px rgba(12,32,82,0.35)); }
/* Related services block (service-page cross-linking) */
.related-services { padding: 48px 0 64px; background: var(--cream, #faf9f7); border-top: 1px solid rgba(12,32,82,0.08); }
.related-services__inner { max-width: 960px; margin: 0 auto; }
.related-services__title { font-family: var(--font-heading); font-weight: 600; color: #0C2052; font-size: clamp(22px, 2.4vw, 28px); margin: 0 0 20px; }
.related-services__list { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; }
.related-services__list a { display: flex; flex-direction: column; gap: 6px; padding: 18px 20px; background: #fff; border: 1px solid rgba(12,32,82,0.1); border-radius: var(--r-card, 12px); text-decoration: none; color: var(--ink, #0C2052); transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
.related-services__list a:hover { transform: translateY(-2px); box-shadow: 0 12px 28px -18px rgba(12,32,82,0.35); border-color: rgba(12,32,82,0.25); }
.related-services__list strong { font-family: var(--font-heading); font-weight: 600; color: #0C2052; font-size: 17px; }
.related-services__list span { font-size: 14.5px; line-height: 1.5; color: #334; }
/* ==========================================================================
APPENDED FROM partials/nav.css (Fase 2 bundle — was 4 separate stylesheets)
========================================================================== */
/* ==========================================================================
NAV — partial stylesheet (loaded alongside styles.css)
Relies on CSS custom properties defined in :root in styles.css.
Edit this file to restyle the nav without touching the main sheet.
========================================================================== */
/* Skip-link */
.skip-link {
position: absolute; top: 12px; left: 12px; z-index: 100;
background: var(--navy-900); color: var(--white);
padding: 10px 16px; border-radius: var(--r-btn);
font-family: var(--font-heading); font-weight: 600; font-size: 14px;
letter-spacing: 0.04em;
transform: translateY(-150%);
transition: transform .18s var(--ease-ui);
}
.skip-link:focus { transform: translateY(0); }
/* SVG sprite container (visually hidden, still accessible via