/*
* GOOGLE FONTS - kopieer deze link-tags naar de van elke HTML-pagina,
* vóór de link naar styles.css:
*
*
*
*
*/
/* ============================================================
DESIGN TOKENS
============================================================ */
:root {
/* Merkkleur (aangeleverd) */
--color-primary: #0693e3;
--color-primary-dark: #0578c0;
--color-primary-light: #e8f5fd;
--color-accent: #ff6900;
--color-accent-dark: #d95700;
/* Ondersteunende neutrale en warme tinten */
--color-warm-100: #fdf8f3;
--color-warm-200: #f5ede0;
--color-warm-300: #e8d5bb;
--color-neutral-600: #5a5148;
--color-neutral-800: #2e2820;
--color-white: #ffffff;
/* Typografie */
--font-heading: 'Bricolage Grotesque', system-ui, sans-serif;
--font-body: 'Hanken Grotesk', system-ui, sans-serif;
/* Typeschaal (vloeiend) */
--text-xs: clamp(0.75rem, 0.7rem + 0.25vw, 0.875rem);
--text-sm: clamp(0.875rem, 0.85rem + 0.2vw, 1rem);
--text-base: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
--text-lg: clamp(1.125rem, 1rem + 0.6vw, 1.375rem);
--text-xl: clamp(1.25rem, 1.1rem + 0.75vw, 1.625rem);
--text-2xl: clamp(1.5rem, 1.2rem + 1.5vw, 2.25rem);
--text-3xl: clamp(2rem, 1.5rem + 2.5vw, 3.25rem);
--text-4xl: clamp(2.75rem, 2rem + 3.75vw, 4.75rem);
/* Spacing-schaal (8px-basis) */
--sp-1: 0.25rem;
--sp-2: 0.5rem;
--sp-3: 0.75rem;
--sp-4: 1rem;
--sp-5: 1.25rem;
--sp-6: 1.5rem;
--sp-8: 2rem;
--sp-10: 2.5rem;
--sp-12: 3rem;
--sp-16: 4rem;
--sp-20: 5rem;
--sp-24: 6rem;
--sp-32: 8rem;
/* Radius en schaduw */
--radius-sm: 0.5rem;
--radius-md: 1rem;
--radius-lg: 1.75rem;
--radius-xl: 2.5rem;
--radius-full: 9999px;
--shadow-sm: 0 1px 4px rgba(0,0,0,0.07), 0 1px 2px rgba(0,0,0,0.05);
--shadow-md: 0 4px 16px rgba(0,0,0,0.09), 0 2px 6px rgba(0,0,0,0.06);
--shadow-lg: 0 10px 36px rgba(0,0,0,0.12), 0 4px 12px rgba(0,0,0,0.07);
/* Transitie */
--ease-out: cubic-bezier(0.22, 1, 0.36, 1);
--duration: 0.6s;
}
/* ============================================================
RESET EN BASE
============================================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: auto; font-size: 100%; -webkit-text-size-adjust: 100%; }
body {
font-family: var(--font-body);
font-size: var(--text-base);
line-height: 1.65;
color: var(--color-neutral-800);
background: var(--color-warm-100);
-webkit-font-smoothing: antialiased;
}
img, video {
display: block;
max-width: 100%;
height: auto;
}
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
button, input, textarea, select {
font: inherit;
color: inherit;
}
:focus-visible {
outline: 2.5px solid var(--color-primary);
outline-offset: 3px;
border-radius: var(--radius-sm);
}
/* ============================================================
LAYOUT HULP
============================================================ */
.container {
width: 100%;
max-width: 1160px;
margin-inline: auto;
padding-inline: var(--sp-6);
}
.container--narrow {
max-width: 760px;
margin-inline: auto;
padding-inline: var(--sp-6);
}
.section {
padding-block: var(--sp-20);
}
.section--warm {
background: var(--color-warm-200);
}
.section--white {
background: var(--color-white);
}
.section--primary {
background: var(--color-primary);
color: var(--color-white);
}
/* ============================================================
TYPOGRAFIE
============================================================ */
h1, h2, h3, h4, h5 {
font-family: var(--font-heading);
line-height: 1.15;
font-weight: 700;
color: var(--color-neutral-800);
letter-spacing: -0.02em;
}
h1 { font-size: var(--text-4xl); }
h2 { font-size: var(--text-3xl); }
h3 { font-size: var(--text-2xl); }
h4 { font-size: var(--text-xl); }
h5 { font-size: var(--text-lg); }
p { max-width: 68ch; }
.eyebrow {
display: inline-block;
font-family: var(--font-heading);
font-size: var(--text-xs);
font-weight: 600;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--color-accent);
margin-bottom: var(--sp-4);
}
.section-title {
font-size: var(--text-3xl);
margin-bottom: var(--sp-4);
}
.section-intro {
font-size: var(--text-lg);
color: var(--color-neutral-600);
margin-bottom: var(--sp-12);
max-width: 58ch;
}
/* ============================================================
KNOPPEN
============================================================ */
.btn {
display: inline-flex;
align-items: center;
gap: var(--sp-2);
font-family: var(--font-heading);
font-weight: 600;
font-size: var(--text-base);
padding: var(--sp-4) var(--sp-8);
border-radius: var(--radius-full);
border: 2px solid transparent;
cursor: pointer;
transition: transform 0.3s var(--ease-out), box-shadow 0.3s var(--ease-out), background 0.25s, color 0.25s, border-color 0.25s;
text-decoration: none;
white-space: nowrap;
}
.btn:hover {
transform: translateY(-2px);
box-shadow: var(--shadow-md);
}
.btn:active { transform: translateY(0); }
.btn--primary {
background: var(--color-primary);
color: var(--color-white);
}
.btn--primary:hover { background: var(--color-primary-dark); }
.btn--accent {
background: var(--color-accent);
color: var(--color-white);
}
.btn--accent:hover { background: var(--color-accent-dark); }
.btn--outline {
background: transparent;
border-color: var(--color-primary);
color: var(--color-primary);
}
.btn--outline:hover {
background: var(--color-primary);
color: var(--color-white);
}
.btn--ghost {
background: rgba(255,255,255,0.18);
color: var(--color-white);
border-color: rgba(255,255,255,0.45);
backdrop-filter: blur(4px);
}
.btn--ghost:hover {
background: rgba(255,255,255,0.3);
}
.btn--lg {
font-size: var(--text-lg);
padding: var(--sp-5) var(--sp-10);
}
/* ============================================================
STICKY HEADER
============================================================ */
.site-header {
position: sticky;
top: 0;
z-index: 100;
background: var(--color-white);
box-shadow: 0 1px 0 rgba(0,0,0,0.08);
transition: box-shadow 0.3s;
}
.site-header.scrolled {
box-shadow: var(--shadow-sm);
}
.header-inner {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--sp-6);
height: 72px;
}
.header-logo {
display: flex;
align-items: center;
flex-shrink: 0;
}
.header-logo img {
height: 44px;
width: auto;
}
.site-nav {
display: flex;
align-items: center;
gap: var(--sp-1);
}
.nav-link {
font-family: var(--font-heading);
font-size: var(--text-sm);
font-weight: 500;
color: var(--color-neutral-800);
padding: var(--sp-2) var(--sp-3);
border-radius: var(--radius-sm);
position: relative;
transition: color 0.2s;
}
.nav-link::after {
content: '';
position: absolute;
bottom: 2px;
left: var(--sp-3);
right: var(--sp-3);
height: 2px;
background: var(--color-primary);
border-radius: var(--radius-full);
transform: scaleX(0);
transform-origin: left;
transition: transform 0.3s var(--ease-out);
}
.nav-link:hover { color: var(--color-primary); }
.nav-link:hover::after { transform: scaleX(1); }
.nav-link.active { color: var(--color-primary); }
.nav-link.active::after { transform: scaleX(1); }
.nav-cta {
margin-left: var(--sp-4);
}
/* Hamburger */
.menu-toggle {
display: none;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 5px;
width: 42px;
height: 42px;
background: none;
border: none;
cursor: pointer;
border-radius: var(--radius-sm);
padding: var(--sp-2);
}
.menu-toggle span {
display: block;
width: 22px;
height: 2px;
background: var(--color-neutral-800);
border-radius: var(--radius-full);
transition: transform 0.3s var(--ease-out), opacity 0.2s;
}
.menu-toggle[aria-expanded="true"] span:nth-child(1) {
transform: translateY(7px) rotate(45deg);
}
.menu-toggle[aria-expanded="true"] span:nth-child(2) {
opacity: 0;
}
.menu-toggle[aria-expanded="true"] span:nth-child(3) {
transform: translateY(-7px) rotate(-45deg);
}
/* Mobiel menu */
.mobile-nav {
display: none;
position: fixed;
inset: 0;
top: 72px;
background: var(--color-white);
z-index: 99;
padding: var(--sp-8) var(--sp-6);
flex-direction: column;
gap: var(--sp-2);
overflow-y: auto;
}
.mobile-nav.open { display: flex; }
.mobile-nav .nav-link {
font-size: var(--text-lg);
padding: var(--sp-4) var(--sp-3);
border-bottom: 1px solid var(--color-warm-200);
border-radius: 0;
}
.mobile-nav .nav-link::after { display: none; }
.mobile-nav .btn {
margin-top: var(--sp-4);
align-self: flex-start;
}
/* ============================================================
HERO
============================================================ */
.hero {
position: relative;
min-height: clamp(520px, 80vh, 840px);
display: flex;
align-items: center;
overflow: hidden;
border-radius: 0 0 var(--radius-xl) var(--radius-xl);
}
.hero-bg {
position: absolute;
inset: 0;
z-index: 0;
}
.hero-bg img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
}
.hero-overlay {
position: absolute;
inset: 0;
background: linear-gradient(
105deg,
rgba(14, 30, 48, 0.72) 0%,
rgba(14, 30, 48, 0.38) 55%,
rgba(14, 30, 48, 0.12) 100%
);
z-index: 1;
}
.hero-content {
position: relative;
z-index: 2;
max-width: 680px;
padding-block: var(--sp-24);
}
.hero-content .eyebrow {
color: rgba(255,255,255,0.8);
}
.hero-title {
font-size: var(--text-4xl);
color: var(--color-white);
margin-bottom: var(--sp-6);
letter-spacing: -0.03em;
line-height: 1.08;
}
.hero-text {
font-size: var(--text-lg);
color: rgba(255,255,255,0.88);
margin-bottom: var(--sp-8);
max-width: 52ch;
}
.hero-actions {
display: flex;
flex-wrap: wrap;
gap: var(--sp-4);
}
/* ============================================================
PRODUCT/DIENSTEN-KAARTEN
============================================================ */
.cards-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: var(--sp-6);
}
.card {
background: var(--color-white);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-sm);
overflow: hidden;
transition: transform 0.4s var(--ease-out), box-shadow 0.4s var(--ease-out);
}
.card:hover {
transform: translateY(-5px);
box-shadow: var(--shadow-lg);
}
.card-image {
aspect-ratio: 4 / 3;
overflow: hidden;
}
.card-image img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.6s var(--ease-out);
}
.card:hover .card-image img {
transform: scale(1.05);
}
.card-body {
padding: var(--sp-6);
}
.card-body h3 {
font-size: var(--text-xl);
margin-bottom: var(--sp-3);
}
.card-body p {
color: var(--color-neutral-600);
font-size: var(--text-sm);
line-height: 1.6;
}
.card-body .btn {
margin-top: var(--sp-5);
}
/* Compacte feature-kaarten */
.feature-card {
background: var(--color-white);
border-radius: var(--radius-lg);
padding: var(--sp-8);
box-shadow: var(--shadow-sm);
transition: transform 0.4s var(--ease-out), box-shadow 0.4s var(--ease-out);
}
.feature-card:hover {
transform: translateY(-4px);
box-shadow: var(--shadow-md);
}
.feature-card-icon {
width: 48px;
height: 48px;
margin-bottom: var(--sp-5);
color: var(--color-primary);
}
.feature-card h3 {
font-size: var(--text-xl);
margin-bottom: var(--sp-3);
}
.feature-card p {
color: var(--color-neutral-600);
font-size: var(--text-base);
}
/* ============================================================
SIGNATUURMOMENT: UITGELICHTE PRODUCTEN BALK
(warme horizontale strip met grote tekst en accent-badge)
============================================================ */
.highlight-strip {
background: var(--color-primary);
border-radius: var(--radius-xl);
overflow: hidden;
display: grid;
grid-template-columns: 1fr 1fr;
min-height: 380px;
margin-block: var(--sp-20);
}
.highlight-strip-text {
padding: var(--sp-12) var(--sp-12) var(--sp-12) var(--sp-12);
display: flex;
flex-direction: column;
justify-content: center;
gap: var(--sp-5);
color: var(--color-white);
}
.highlight-strip-text .eyebrow {
color: rgba(255,255,255,0.7);
}
.highlight-strip-text h2 {
color: var(--color-white);
font-size: var(--text-3xl);
}
.highlight-strip-text p {
color: rgba(255,255,255,0.85);
font-size: var(--text-base);
}
.highlight-strip-image {
position: relative;
overflow: hidden;
}
.highlight-strip-image img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.7s var(--ease-out);
}
.highlight-strip:hover .highlight-strip-image img {
transform: scale(1.04);
}
/* Accent-badge */
.badge {
display: inline-flex;
align-items: center;
gap: var(--sp-2);
background: var(--color-accent);
color: var(--color-white);
font-family: var(--font-heading);
font-weight: 700;
font-size: var(--text-xs);
letter-spacing: 0.08em;
text-transform: uppercase;
padding: var(--sp-2) var(--sp-4);
border-radius: var(--radius-full);
}
/* ============================================================
ACCORDION (voor informatieve inhoud)
============================================================ */
.accordion {
border-radius: var(--radius-lg);
overflow: hidden;
box-shadow: var(--shadow-sm);
}
.accordion-item {
background: var(--color-white);
border-bottom: 1px solid var(--color-warm-200);
}
.accordion-item:last-child { border-bottom: none; }
.accordion-trigger {
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--sp-4);
padding: var(--sp-6) var(--sp-8);
background: none;
border: none;
cursor: pointer;
text-align: left;
font-family: var(--font-heading);
font-size: var(--text-lg);
font-weight: 600;
color: var(--color-neutral-800);
transition: background 0.2s;
}
.accordion-trigger:hover { background: var(--color-warm-100); }
.accordion-icon {
width: 24px;
height: 24px;
color: var(--color-primary);
flex-shrink: 0;
transition: transform 0.35s var(--ease-out);
}
.accordion-trigger[aria-expanded="true"] .accordion-icon {
transform: rotate(45deg);
}
.accordion-panel {
display: grid;
grid-template-rows: 0fr;
transition: grid-template-rows 0.35s var(--ease-out);
}
.accordion-panel.open,
.accordion-trigger[aria-expanded="true"] + .accordion-panel {
grid-template-rows: 1fr;
}
.accordion-panel-inner {
overflow: hidden;
padding: 0 var(--sp-8);
color: var(--color-neutral-600);
font-size: var(--text-base);
line-height: 1.7;
}
.accordion-trigger[aria-expanded="true"] + .accordion-panel .accordion-panel-inner {
padding-bottom: var(--sp-6);
}
/* ============================================================
FOTO-GALLERIJ RASTER
============================================================ */
.gallery-grid {
display: grid;
grid-template-columns: repeat(12, 1fr);
gap: var(--sp-4);
}
.gallery-grid .g-item {
overflow: hidden;
border-radius: var(--radius-md);
}
.gallery-grid .g-item img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.6s var(--ease-out);
}
.gallery-grid .g-item:hover img { transform: scale(1.06); }
.g-wide { grid-column: span 8; aspect-ratio: 16 / 9; }
.g-tall { grid-column: span 4; aspect-ratio: 3 / 4; }
.g-half { grid-column: span 6; aspect-ratio: 4 / 3; }
.g-third { grid-column: span 4; aspect-ratio: 4 / 3; }
/* ============================================================
TEAM-KAARTEN
============================================================ */
.team-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
gap: var(--sp-6);
}
.team-card {
text-align: center;
background: var(--color-white);
border-radius: var(--radius-lg);
padding: var(--sp-8) var(--sp-6);
box-shadow: var(--shadow-sm);
transition: transform 0.4s var(--ease-out);
}
.team-card:hover { transform: translateY(-4px); }
.team-card-avatar {
width: 100px;
height: 100px;
border-radius: var(--radius-full);
overflow: hidden;
margin: 0 auto var(--sp-5);
border: 3px solid var(--color-warm-200);
}
.team-card-avatar img {
width: 100%;
height: 100%;
object-fit: cover;
}
.team-card h4 {
font-size: var(--text-lg);
margin-bottom: var(--sp-1);
}
.team-card p {
color: var(--color-neutral-600);
font-size: var(--text-sm);
}
/* ============================================================
PRAKTISCHE INFO: LOCATIE / OPENINGSTIJDEN
============================================================ */
.info-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
gap: var(--sp-6);
}
.info-block {
background: var(--color-white);
border-radius: var(--radius-lg);
padding: var(--sp-8);
box-shadow: var(--shadow-sm);
}
.info-block-icon {
width: 40px;
height: 40px;
color: var(--color-primary);
margin-bottom: var(--sp-4);
}
.info-block h4 {
font-size: var(--text-lg);
margin-bottom: var(--sp-4);
}
.hours-table {
width: 100%;
font-size: var(--text-sm);
border-collapse: collapse;
}
.hours-table tr { border-bottom: 1px solid var(--color-warm-200); }
.hours-table tr:last-child { border-bottom: none; }
.hours-table td {
padding: var(--sp-2) 0;
color: var(--color-neutral-600);
}
.hours-table td:last-child {
text-align: right;
font-weight: 500;
color: var(--color-neutral-800);
}
/* ============================================================
CONTACTFORMULIER
============================================================ */
.contact-form-wrap {
background: var(--color-white);
border-radius: var(--radius-xl);
padding: var(--sp-12);
box-shadow: var(--shadow-md);
max-width: 680px;
margin-inline: auto;
}
.form-group {
margin-bottom: var(--sp-6);
}
.form-label {
display: block;
font-family: var(--font-heading);
font-weight: 600;
font-size: var(--text-sm);
margin-bottom: var(--sp-2);
color: var(--color-neutral-800);
}
.form-optional {
font-weight: 400;
color: var(--color-neutral-600);
font-size: var(--text-xs);
margin-left: var(--sp-1);
}
.form-control {
width: 100%;
padding: var(--sp-4) var(--sp-5);
border: 2px solid var(--color-warm-300);
border-radius: var(--radius-md);
background: var(--color-warm-100);
font-size: var(--text-base);
color: var(--color-neutral-800);
transition: border-color 0.2s, box-shadow 0.2s;
}
.form-control:focus {
outline: none;
border-color: var(--color-primary);
box-shadow: 0 0 0 3px rgba(6, 147, 227, 0.15);
background: var(--color-white);
}
textarea.form-control {
min-height: 150px;
resize: vertical;
}
.form-honeypot {
position: absolute;
left: -9999px;
width: 1px;
height: 1px;
overflow: hidden;
}
.form-status {
margin-top: var(--sp-5);
padding: var(--sp-4) var(--sp-6);
border-radius: var(--radius-md);
font-weight: 500;
display: none;
}
.form-status.success {
background: #e6f9f1;
color: #0e6640;
display: block;
}
.form-status.error {
background: #fdf0ef;
color: #a12000;
display: block;
}
/* ============================================================
FOOTER
============================================================ */
.site-footer {
background: var(--color-neutral-800);
color: rgba(255,255,255,0.75);
padding-block: var(--sp-16) var(--sp-8);
}
.footer-grid {
display: grid;
grid-template-columns: 1.6fr repeat(3, 1fr);
gap: var(--sp-10);
margin-bottom: var(--sp-12);
}
.footer-brand .footer-wordmark {
font-family: var(--font-heading);
font-size: var(--text-xl);
font-weight: 800;
color: var(--color-white);
margin-bottom: var(--sp-4);
letter-spacing: -0.02em;
}
.footer-brand p {
font-size: var(--text-sm);
line-height: 1.65;
max-width: 32ch;
}
.footer-col h4 {
font-family: var(--font-heading);
font-size: var(--text-base);
font-weight: 700;
color: var(--color-white);
margin-bottom: var(--sp-5);
}
.footer-col ul {
display: flex;
flex-direction: column;
gap: var(--sp-3);
}
.footer-col a {
font-size: var(--text-sm);
color: rgba(255,255,255,0.65);
transition: color 0.2s;
display: inline-flex;
align-items: center;
gap: var(--sp-2);
}
.footer-col a:hover { color: var(--color-primary); }
.footer-bottom {
border-top: 1px solid rgba(255,255,255,0.1);
padding-top: var(--sp-6);
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: var(--sp-4);
font-size: var(--text-xs);
color: rgba(255,255,255,0.4);
}
.footer-bottom a {
color: rgba(255,255,255,0.5);
transition: color 0.2s;
}
.footer-bottom a:hover { color: var(--color-white); }
.footer-credit a { color: rgba(255,255,255,0.45); }
.footer-credit a:hover { color: var(--color-primary); }
/* ============================================================
SCROLL REVEALS (progressive enhancement)
============================================================ */
html.anim .reveal {
opacity: 0;
transform: translateY(28px);
transition: opacity var(--duration) var(--ease-out),
transform var(--duration) var(--ease-out);
}
html.anim .reveal.is-revealed {
opacity: 1;
transform: translateY(0);
}
html.anim .reveal-left {
opacity: 0;
transform: translateX(-32px);
transition: opacity var(--duration) var(--ease-out),
transform var(--duration) var(--ease-out);
}
html.anim .reveal-left.is-revealed {
opacity: 1;
transform: translateX(0);
}
html.anim .reveal-right {
opacity: 0;
transform: translateX(32px);
transition: opacity var(--duration) var(--ease-out),
transform var(--duration) var(--ease-out);
}
html.anim .reveal-right.is-revealed {
opacity: 1;
transform: translateX(0);
}
html.anim .reveal-scale {
opacity: 0;
transform: scale(0.94);
transition: opacity var(--duration) var(--ease-out),
transform var(--duration) var(--ease-out);
}
html.anim .reveal-scale.is-revealed {
opacity: 1;
transform: scale(1);
}
/* Stagger helpers */
html.anim .stagger-1 { transition-delay: 0.08s; }
html.anim .stagger-2 { transition-delay: 0.16s; }
html.anim .stagger-3 { transition-delay: 0.24s; }
html.anim .stagger-4 { transition-delay: 0.32s; }
html.anim .stagger-5 { transition-delay: 0.40s; }
/* ============================================================
REDUCED MOTION
============================================================ */
@media (prefers-reduced-motion: reduce) {
html.anim .reveal,
html.anim .reveal-left,
html.anim .reveal-right,
html.anim .reveal-scale {
opacity: 1;
transform: none;
transition: none;
}
.btn,
.card,
.feature-card,
.team-card,
.card-image img,
.highlight-strip-image img,
.gallery-grid .g-item img {
transition: none;
}
}
/* ============================================================
RESPONSIVE
============================================================ */
@media (max-width: 1024px) {
.footer-grid {
grid-template-columns: 1fr 1fr;
}
.highlight-strip {
grid-template-columns: 1fr;
min-height: auto;
}
.highlight-strip-image {
height: 280px;
}
}
@media (max-width: 768px) {
:root {
--sp-20: 3.5rem;
--sp-24: 4.5rem;
}
.site-nav, .nav-cta { display: none; }
.menu-toggle { display: flex; }
.hero-content { padding-block: var(--sp-16); }
.g-wide { grid-column: span 12; }
.g-tall { grid-column: span 12; aspect-ratio: 4 / 3; }
.g-half { grid-column: span 12; }
.g-third { grid-column: span 12; }
.footer-grid {
grid-template-columns: 1fr;
gap: var(--sp-8);
}
.footer-bottom {
flex-direction: column;
align-items: flex-start;
}
.contact-form-wrap {
padding: var(--sp-8) var(--sp-6);
}
.accordion-trigger {
padding: var(--sp-5) var(--sp-6);
font-size: var(--text-base);
}
.accordion-panel-inner { padding-inline: var(--sp-6); }
}
@media (max-width: 480px) {
.hero { border-radius: 0 0 var(--radius-lg) var(--radius-lg); }
.hero-actions { flex-direction: column; align-items: flex-start; }
.highlight-strip {
border-radius: var(--radius-lg);
margin-block: var(--sp-12);
}
.highlight-strip-text { padding: var(--sp-8); }
}