/* =====================================================================
BDG Solutions GmbH — Shared Stylesheet
Style: "Structured Intelligence" / Corporate Modern
---------------------------------------------------------------------
Fonts are loaded per-page via in (Google Fonts).
Swap the variables in :root below to drop in your own design system.
No JavaScript is used anywhere on this site.
===================================================================== */
/* ---------------------------------------------------------------------
1. DESIGN TOKENS — edit these to re-theme the entire site
--------------------------------------------------------------------- */
:root {
/* --- Brand & surface colors --- */
--color-bg: #FAFAF7; /* page canvas (warm paper white) */
--color-surface: #FFFFFF; /* cards, header, form fields */
--color-surface-2: #F3F3EE; /* subtle alternate panels */
--color-ink: #0F1522; /* headings / strongest text */
--color-text: #353B49; /* body copy */
--color-muted: #586072; /* secondary / captions */
--color-border: #E6E5DE; /* hairline dividers */
--color-border-strong: #D4D3CA; /* emphasised borders */
/* --- Accent (used sparingly, the single brand pop) --- */
--color-accent: #E30039; /* brand crimson */
--color-accent-strong: #B00030; /* hover / pressed */
--color-accent-soft: #FDE7EC; /* tinted backgrounds */
--color-on-accent: #FFFFFF; /* text on accent */
/* --- Dark sections (footer, CTA bands) --- */
--color-ink-bg: #0F1522;
--color-ink-bg-2: #171E2E;
--color-on-ink: #EAEBF1;
--color-on-ink-muted: #9AA1B4;
--color-on-ink-border: #2A3142;
/* --- Semantic (small accents on the comparison table only) --- */
--color-positive: #127A53;
--color-negative: #B23A3A;
/* --- Typography --- */
--font-display: "Space Grotesk", system-ui, -apple-system, sans-serif;
--font-body: "Plus Jakarta Sans", system-ui, -apple-system, sans-serif;
--font-mono: "Space Mono", ui-monospace, "SFMono-Regular", monospace;
--text-xs: 0.8125rem; /* 13px */
--text-sm: 0.9375rem; /* 15px */
--text-base: 1.0625rem; /* 17px */
--text-lg: 1.1875rem; /* 19px */
--text-xl: 1.375rem; /* 22px */
--text-2xl: clamp(1.55rem, 1.1rem + 2vw, 2.1rem);
--text-3xl: clamp(1.95rem, 1.3rem + 2.8vw, 2.85rem);
--text-4xl: clamp(2.4rem, 1.5rem + 4.2vw, 4rem);
--leading-tight: 1.12;
--leading-snug: 1.3;
--leading-body: 1.62;
--tracking-label: 0.14em; /* uppercase eyebrows */
/* --- Spacing scale (8px base) --- */
--space-2xs: 4px;
--space-xs: 8px;
--space-sm: 12px;
--space-md: 16px;
--space-lg: 24px;
--space-xl: 32px;
--space-2xl: 48px;
--space-3xl: 64px;
--space-4xl: 96px;
--space-5xl: 128px;
--section-y: clamp(56px, 7vw, 112px); /* vertical rhythm of sections */
/* --- Layout --- */
--container: 1200px;
--container-narrow: 760px;
--gutter: clamp(20px, 5vw, 44px);
/* --- Radius --- */
--radius-xs: 6px;
--radius-sm: 10px;
--radius-md: 14px;
--radius-lg: 20px;
--radius-xl: 28px;
--radius-pill: 999px;
/* --- Elevation (subtle; structure comes mainly from borders) --- */
--shadow-sm: 0 1px 2px rgba(15,21,34,.04), 0 1px 3px rgba(15,21,34,.05);
--shadow-md: 0 6px 16px -6px rgba(15,21,34,.10), 0 2px 6px -2px rgba(15,21,34,.06);
--shadow-lg: 0 24px 50px -18px rgba(15,21,34,.22);
/* --- Motion --- */
--transition: 150ms ease;
}
/* ---------------------------------------------------------------------
2. RESET & BASE
--------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
font-family: var(--font-body);
font-size: var(--text-base);
line-height: var(--leading-body);
color: var(--color-text);
background: var(--color-bg);
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
img, svg, video { display: block; max-width: 100%; }
svg { height: auto; }
h1, h2, h3, h4 {
font-family: var(--font-display);
color: var(--color-ink);
line-height: var(--leading-tight);
letter-spacing: -0.02em;
font-weight: 600;
text-wrap: balance;
}
p { text-wrap: pretty; }
a { color: var(--color-accent); text-decoration: none; }
a:hover { color: var(--color-accent-strong); }
ul, ol { padding: 0; list-style: none; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible {
outline: 3px solid var(--color-accent);
outline-offset: 2px;
border-radius: 4px;
}
/* Respect reduced-motion preferences */
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
*, *::before, *::after {
transition-duration: 0.001ms !important;
animation-duration: 0.001ms !important;
}
}
/* ---------------------------------------------------------------------
3. UTILITIES
--------------------------------------------------------------------- */
.container {
width: 100%;
max-width: var(--container);
margin-inline: auto;
padding-inline: var(--gutter);
}
.container--narrow { max-width: var(--container-narrow); }
.section { padding-block: var(--section-y); }
.section--tight { padding-block: clamp(40px, 5vw, 72px); }
.section--alt { background: var(--color-surface-2); }
.section--ink { background: var(--color-ink-bg); color: var(--color-on-ink); }
.section--ink h1, .section--ink h2, .section--ink h3 { color: #fff; }
.visually-hidden {
position: absolute !important;
width: 1px; height: 1px;
padding: 0; margin: -1px;
overflow: hidden; clip: rect(0 0 0 0);
white-space: nowrap; border: 0;
}
.skip-link {
position: absolute;
left: var(--space-md);
top: -120px;
z-index: 999;
background: var(--color-ink);
color: #fff;
padding: var(--space-sm) var(--space-lg);
border-radius: var(--radius-sm);
font-weight: 600;
transition: top var(--transition);
}
.skip-link:focus { top: var(--space-md); color: #fff; }
.eyebrow {
display: inline-flex;
align-items: center;
gap: var(--space-xs);
font-family: var(--font-mono);
font-size: var(--text-xs);
letter-spacing: var(--tracking-label);
text-transform: uppercase;
color: var(--color-accent);
font-weight: 700;
}
.eyebrow::before {
content: "";
width: 22px; height: 2px;
background: var(--color-accent);
}
.eyebrow--ink { color: var(--color-on-ink-muted); }
.eyebrow--ink::before { background: var(--color-accent); }
.lead {
font-size: var(--text-lg);
color: var(--color-muted);
line-height: 1.55;
max-width: 60ch;
}
.section-head { max-width: 64ch; margin-bottom: var(--space-2xl); }
.section-head h2 { font-size: var(--text-3xl); margin-top: var(--space-sm); }
.section-head .lead { margin-top: var(--space-md); }
.section-head--center { margin-inline: auto; text-align: center; }
.section-head--center .lead { margin-inline: auto; }
.section-head--center .eyebrow { justify-content: center; }
/* ---------------------------------------------------------------------
4. BUTTONS
--------------------------------------------------------------------- */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--space-xs);
padding: 0.85em 1.4em;
font-family: var(--font-body);
font-size: var(--text-sm);
font-weight: 700;
line-height: 1;
letter-spacing: 0.01em;
border-radius: var(--radius-pill);
border: 2px solid transparent;
cursor: pointer;
transition: background var(--transition), color var(--transition),
border-color var(--transition), transform var(--transition);
text-align: center;
}
.btn svg { width: 1.05em; height: 1.05em; }
.btn--primary { background: var(--color-accent); color: var(--color-on-accent); border-color: var(--color-accent); }
.btn--primary:hover { background: var(--color-accent-strong); border-color: var(--color-accent-strong); color: #fff; }
.btn--secondary { background: transparent; color: var(--color-ink); border-color: var(--color-border-strong); }
.btn--secondary:hover { border-color: var(--color-ink); color: var(--color-ink); background: var(--color-surface); }
.btn--ghost { background: transparent; color: var(--color-accent); border-color: transparent; padding-inline: 0.4em; }
.btn--ghost:hover { color: var(--color-accent-strong); gap: var(--space-sm); }
.btn--on-ink { background: #fff; color: var(--color-ink); border-color: #fff; }
.btn--on-ink:hover { background: var(--color-accent); border-color: var(--color-accent); color: #fff; }
.btn--lg { padding: 1.05em 1.8em; font-size: var(--text-base); }
.btn--block { width: 100%; }
.btn-group { display: flex; flex-wrap: wrap; gap: var(--space-md); }
/* Inline text link with arrow */
.text-link {
display: inline-flex; align-items: center; gap: var(--space-xs);
font-weight: 700; font-size: var(--text-sm);
}
.text-link svg { width: 1em; height: 1em; transition: transform var(--transition); }
.text-link:hover svg { transform: translateX(4px); }
/* ---------------------------------------------------------------------
5. HEADER & NAV (always-visible navigation, no JS)
--------------------------------------------------------------------- */
.site-header {
position: sticky;
top: 0;
z-index: 100;
background: color-mix(in srgb, var(--color-bg) 88%, transparent);
backdrop-filter: saturate(140%) blur(10px);
border-bottom: 1px solid var(--color-border);
}
.header-inner {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--space-sm) var(--space-md);
min-height: 68px;
padding-block: var(--space-xs);
}
.brand { display: inline-flex; align-items: center; gap: var(--space-sm); color: var(--color-ink); margin-right: auto; flex-shrink: 0; }
.brand:hover { color: var(--color-ink); }
.brand-mark {
width: 38px; height: 38px;
border-radius: var(--radius-sm);
background: var(--color-ink);
color: #fff;
display: grid; place-items: center;
flex-shrink: 0;
}
.brand-mark svg { width: 22px; height: 22px; }
.brand-name { font-family: var(--font-display); font-weight: 700; font-size: 1.18rem; letter-spacing: -0.02em; line-height: 1; }
.brand-name span { color: var(--color-muted); font-weight: 500; }
.brand-sub { display: block; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--color-muted); margin-top: 3px; }
/* Always-visible navigation, no JS. Wraps to its own full-width row
beneath the brand on narrow screens; sits inline from 960px up. */
.nav {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: var(--space-2xs) 4px;
order: 3;
flex: 1 0 100%;
margin-top: var(--space-xs);
padding-top: var(--space-sm);
border-top: 1px solid var(--color-border);
}
.nav-link {
display: inline-block;
padding: 0.5em 0.7em;
border-radius: var(--radius-sm);
color: var(--color-text);
font-weight: 600;
font-size: 0.92rem;
white-space: nowrap;
transition: background var(--transition), color var(--transition);
}
.nav-link:hover { background: var(--color-surface-2); color: var(--color-ink); }
.nav-link[aria-current="page"] { color: var(--color-accent); background: var(--color-accent-soft); }
.nav-cta { flex-shrink: 0; }
@media (min-width: 860px) {
.header-inner { flex-wrap: nowrap; gap: var(--space-sm); min-height: 72px; }
.nav { order: 0; flex: 0 1 auto; flex-wrap: nowrap; gap: 0; margin-top: 0; padding-top: 0; border-top: 0; }
.nav-link { font-size: 0.85rem; padding: 0.45em 0.5em; }
.nav-cta { margin-left: var(--space-xs); padding: 0.6em 1em; font-size: 0.85rem; }
.site-header .brand-sub { display: none; } /* reclaim width for the inline menu */
}
@media (min-width: 1024px) {
.header-inner { gap: var(--space-md); }
.site-header .brand-sub { display: block; }
.nav-link { padding: 0.5em 0.62em; }
.nav-cta { margin-left: var(--space-sm); padding: 0.66em 1.15em; }
}
@media (min-width: 1200px) {
.nav { gap: 1px; }
.nav-link { font-size: 0.9rem; padding: 0.55em 0.75em; }
.nav-cta { font-size: var(--text-sm); }
}
/* ---------------------------------------------------------------------
6. HERO (homepage)
--------------------------------------------------------------------- */
.hero { position: relative; overflow: hidden; padding-top: clamp(40px, 6vw, 80px); padding-bottom: var(--section-y); }
.hero::before {
/* faint blueprint grid — pure CSS, reinforces the "digitalisation" theme */
content: "";
position: absolute; inset: 0;
background-image:
linear-gradient(var(--color-border) 1px, transparent 1px),
linear-gradient(90deg, var(--color-border) 1px, transparent 1px);
background-size: 46px 46px;
-webkit-mask-image: radial-gradient(ellipse 80% 70% at 70% 20%, #000 0%, transparent 75%);
mask-image: radial-gradient(ellipse 80% 70% at 70% 20%, #000 0%, transparent 75%);
opacity: 0.6;
pointer-events: none;
}
.hero > .container { position: relative; }
.hero-grid { display: grid; gap: var(--space-3xl); align-items: stretch; }
.hero-media { position: relative; border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--color-border); box-shadow: var(--shadow-lg); min-height: 340px; background: linear-gradient(135deg, var(--color-accent-soft) 0%, var(--color-surface-2) 100%); }
.hero-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Premium full-bleed image hero */
.hero--image {
min-height: min(86vh, 740px);
display: flex;
align-items: center;
padding-block: var(--space-3xl);
color: #fff;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
.hero--image::before { display: none; }
.hero--image::after {
content: "";
position: absolute; inset: 0; z-index: 1;
background: linear-gradient(100deg, rgba(12,17,28,.92) 0%, rgba(12,17,28,.78) 32%, rgba(12,17,28,.42) 64%, rgba(12,17,28,.18) 100%);
}
.hero--image > .container { position: relative; z-index: 2; }
.hero--image .hero-content { max-width: 620px; }
.hero-layout { display: grid; gap: var(--space-2xl); align-items: center; }
.hero-figure { min-width: 0; border-radius: var(--radius-lg); overflow: hidden; border: 1px solid rgba(255,255,255,.16); box-shadow: var(--shadow-lg); aspect-ratio: 4 / 5; background-size: cover; background-position: center; }
@media (max-width: 899px) { .hero-figure { aspect-ratio: 16 / 10; } }
@media (min-width: 900px) { .hero-layout { grid-template-columns: 1.04fr 0.96fr; gap: var(--space-3xl); } }
.hero--image h1 { color: #fff; font-weight: 700; }
.hero--image .lead { color: rgba(255,255,255,.85); }
.hero--image .btn-group { margin-top: var(--space-2xl); }
.hero--image .hero-trust { border-top-color: rgba(255,255,255,.2); }
.hero--image .hero-trust p { color: rgba(255,255,255,.62); }
.hero--image .logo-chip { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.24); color: #fff; }
.eyebrow--on-image { color: #fff; }
.eyebrow--on-image::before { background: var(--color-accent); }
.btn--on-image { background: transparent; color: #fff; border-color: rgba(255,255,255,.55); }
.btn--on-image:hover { background: #fff; color: var(--color-ink); border-color: #fff; }
@media (max-width: 767px) {
.hero--image { min-height: 0; padding-block: var(--space-4xl); }
.hero--image::after { background: linear-gradient(180deg, rgba(12,17,28,.68) 0%, rgba(12,17,28,.82) 100%); }
}
.hero-content { max-width: 640px; }
.hero h1 { font-size: var(--text-4xl); margin-top: var(--space-md); }
.hero h1 em { font-style: normal; color: var(--color-accent); }
.hero .lead { margin-top: var(--space-lg); font-size: var(--text-lg); }
.hero .btn-group { margin-top: var(--space-2xl); }
.hero-trust { margin-top: var(--space-2xl); padding-top: var(--space-lg); border-top: 1px solid var(--color-border); }
.hero-trust p { font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-muted); margin-bottom: var(--space-sm); }
.logo-row { display: flex; flex-wrap: wrap; gap: var(--space-xs) var(--space-md); align-items: center; }
.logo-chip {
font-family: var(--font-display);
font-weight: 600;
font-size: var(--text-sm);
color: var(--color-ink);
padding: 0.45em 0.85em;
border: 1px solid var(--color-border-strong);
border-radius: var(--radius-sm);
background: var(--color-surface);
white-space: nowrap;
}
@media (min-width: 900px) {
.hero-grid { grid-template-columns: 1.05fr 1fr; }
}
/* ---- CSS ERP Dashboard mock (hero visual) ---- */
.dashboard {
background: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-lg);
overflow: hidden;
font-size: 14px;
}
.dashboard-bar {
display: flex; align-items: center; gap: var(--space-sm);
padding: var(--space-sm) var(--space-md);
background: var(--color-ink-bg);
color: var(--color-on-ink);
}
.dashboard-dots { display: flex; gap: 6px; }
.dashboard-dots i { width: 10px; height: 10px; border-radius: 50%; background: #3a4256; display: block; }
.dashboard-title { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.04em; color: var(--color-on-ink); }
.dashboard-sync {
margin-left: auto; display: inline-flex; align-items: center; gap: 6px;
font-family: var(--font-mono); font-size: 11px; color: #8be0b6;
}
.dashboard-sync::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #2fd181; box-shadow: 0 0 0 3px rgba(47,209,129,.2); }
.dashboard-body { display: grid; grid-template-columns: 56px 1fr; }
.dashboard-side { background: var(--color-surface-2); border-right: 1px solid var(--color-border); padding: var(--space-md) 0; display: flex; flex-direction: column; gap: 14px; align-items: center; }
.dashboard-side i { width: 22px; height: 4px; border-radius: 2px; background: var(--color-border-strong); display: block; }
.dashboard-side i:first-child { width: 22px; height: 22px; border-radius: 6px; background: var(--color-accent); }
.dashboard-main { padding: var(--space-md); display: flex; flex-direction: column; gap: var(--space-md); }
.kpi-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-sm); }
.kpi { border: 1px solid var(--color-border); border-radius: var(--radius-sm); padding: var(--space-sm); background: var(--color-bg); }
.kpi span { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-muted); }
.kpi strong { display: block; font-family: var(--font-display); font-size: 1.25rem; color: var(--color-ink); margin-top: 4px; line-height: 1; }
.kpi b { font-size: 11px; font-weight: 700; color: var(--color-positive); }
.kpi:first-child { border-color: var(--color-accent); background: var(--color-accent-soft); }
.chart { border: 1px solid var(--color-border); border-radius: var(--radius-sm); padding: var(--space-md); background: var(--color-bg); }
.chart-head { display: flex; justify-content: space-between; font-family: var(--font-mono); font-size: 10px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--color-muted); margin-bottom: var(--space-sm); }
.bars { display: flex; align-items: flex-end; gap: 8px; height: 84px; }
.bars i { flex: 1; border-radius: 3px 3px 0 0; background: var(--color-border-strong); display: block; }
.bars i:nth-child(1){ height: 38%; } .bars i:nth-child(2){ height: 52%; }
.bars i:nth-child(3){ height: 45%; } .bars i:nth-child(4){ height: 68%; }
.bars i:nth-child(5){ height: 60%; } .bars i:nth-child(6){ height: 82%; }
.bars i:nth-child(7){ height: 74%; background: var(--color-accent); }
.bars i:nth-child(8){ height: 96%; background: var(--color-accent); }
.dash-rows { display: flex; flex-direction: column; gap: 6px; }
.dash-row { display: flex; align-items: center; gap: var(--space-sm); font-size: 12px; padding: 7px 10px; border: 1px solid var(--color-border); border-radius: var(--radius-xs); background: var(--color-surface); }
.dash-row i { width: 8px; height: 8px; border-radius: 50%; background: var(--color-positive); flex-shrink: 0; }
.dash-row b { font-family: var(--font-mono); color: var(--color-ink); font-weight: 700; }
.dash-row span { color: var(--color-muted); }
.dash-row em { margin-left: auto; font-style: normal; font-family: var(--font-mono); font-size: 11px; color: var(--color-positive); }
/* ---------------------------------------------------------------------
7. STATS BAND
--------------------------------------------------------------------- */
.stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: var(--color-border); border: 1px solid var(--color-border); border-radius: var(--radius-md); overflow: hidden; }
.stat { background: var(--color-surface); padding: var(--space-xl) var(--space-lg); }
.stat-num { font-family: var(--font-display); font-size: clamp(2.1rem, 1.4rem + 2.5vw, 3rem); color: var(--color-ink); line-height: 1; letter-spacing: -0.03em; }
.stat-num span { color: var(--color-accent); }
.stat-label { margin-top: var(--space-sm); color: var(--color-muted); font-size: var(--text-sm); }
.section--ink .stats { background: var(--color-on-ink-border); border-color: var(--color-on-ink-border); }
.section--ink .stat { background: var(--color-ink-bg-2); }
.section--ink .stat-num { color: #fff; }
.section--ink .stat-label { color: var(--color-on-ink-muted); }
@media (min-width: 760px) { .stats { grid-template-columns: repeat(4, 1fr); } }
/* ---------------------------------------------------------------------
8. CARD GRIDS
--------------------------------------------------------------------- */
.grid { display: grid; gap: var(--space-lg); }
.grid-2 { grid-template-columns: 1fr; }
.grid-3 { grid-template-columns: 1fr; }
.grid-4 { grid-template-columns: 1fr; }
@media (min-width: 640px) { .grid-2, .grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 960px) { .grid-3 { grid-template-columns: repeat(3, 1fr); } .grid-4 { grid-template-columns: repeat(4, 1fr); } }
.card {
background: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
padding: var(--space-xl);
transition: border-color var(--transition), box-shadow var(--transition), transform var(--transition);
}
.card:hover { border-color: var(--color-border-strong); box-shadow: var(--shadow-md); }
.card-icon {
width: 48px; height: 48px;
display: grid; place-items: center;
border-radius: var(--radius-sm);
background: var(--color-accent-soft);
color: var(--color-accent);
margin-bottom: var(--space-md);
}
.card-icon svg { width: 24px; height: 24px; }
.card h3 { font-size: var(--text-xl); margin-bottom: var(--space-xs); }
.card p { color: var(--color-muted); font-size: var(--text-sm); margin-bottom: var(--space-md); }
.card .text-link { margin-top: auto; }
/* Value / feature card with number */
.value-card { display: flex; flex-direction: column; gap: var(--space-sm); }
.value-num { font-family: var(--font-mono); font-size: var(--text-sm); color: var(--color-accent); font-weight: 700; }
/* ---------------------------------------------------------------------
9. ALTERNATING FEATURE ROWS (services detail)
--------------------------------------------------------------------- */
.feature-row { display: grid; gap: var(--space-2xl); align-items: center; padding-block: clamp(32px, 4vw, 56px); border-top: 1px solid var(--color-border); }
.feature-row:first-of-type { border-top: 0; }
.feature-row h3 { font-size: var(--text-2xl); margin-top: var(--space-sm); }
.feature-row p { margin-top: var(--space-md); color: var(--color-muted); }
.feature-list { margin-top: var(--space-lg); display: flex; flex-direction: column; gap: var(--space-sm); }
.feature-list li { display: flex; gap: var(--space-sm); align-items: flex-start; font-size: var(--text-sm); color: var(--color-text); }
.feature-list svg { width: 20px; height: 20px; color: var(--color-accent); flex-shrink: 0; margin-top: 2px; }
@media (min-width: 860px) {
.feature-row { grid-template-columns: 1fr 1fr; }
.feature-row--reverse .feature-media { order: -1; }
}
/* Decorative media panel (CSS placeholder for imagery) */
.media-panel {
position: relative;
aspect-ratio: 4 / 3;
border-radius: var(--radius-lg);
border: 1px solid var(--color-border);
overflow: hidden;
background: var(--color-surface-2);
}
.media-panel::before {
content: "";
position: absolute; inset: 0;
background-image:
linear-gradient(var(--color-border) 1px, transparent 1px),
linear-gradient(90deg, var(--color-border) 1px, transparent 1px);
background-size: 28px 28px;
opacity: 0.7;
}
.media-panel .glyph {
position: absolute; inset: 0;
display: grid; place-items: center;
color: var(--color-accent);
}
.media-panel .glyph svg { width: 76px; height: 76px; opacity: 0.9; }
.media-panel .tag {
position: absolute; left: var(--space-md); bottom: var(--space-md);
font-family: var(--font-mono); font-size: var(--text-xs);
background: var(--color-surface); border: 1px solid var(--color-border);
padding: 0.4em 0.7em; border-radius: var(--radius-pill); color: var(--color-ink);
}
.media-panel--a { background: linear-gradient(135deg, #eef1fd, #f6f3ee); }
.media-panel--b { background: linear-gradient(135deg, #eafaf2, #f4f6f1); }
.media-panel--c { background: linear-gradient(135deg, #fdf0ee, #f5f3f0); }
.media-panel--d { background: linear-gradient(135deg, #eef6fd, #f1f4f6); }
/* ---------------------------------------------------------------------
10. PROCESS TIMELINE (unique section)
--------------------------------------------------------------------- */
.process { display: grid; gap: var(--space-lg); counter-reset: step; }
.process-step {
position: relative;
background: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
padding: var(--space-xl);
padding-top: var(--space-2xl);
}
.process-step .step-num {
position: absolute; top: calc(-1 * var(--space-md)); left: var(--space-xl);
width: 44px; height: 44px;
display: grid; place-items: center;
background: var(--color-ink);
color: #fff;
font-family: var(--font-display); font-weight: 700;
border-radius: var(--radius-sm);
}
.process-step h3 { font-size: var(--text-lg); margin-bottom: var(--space-xs); }
.process-step p { color: var(--color-muted); font-size: var(--text-sm); }
.process-step .step-kicker { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--color-accent); text-transform: uppercase; letter-spacing: 0.08em; }
@media (min-width: 760px) { .process { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1040px) {
.process { grid-template-columns: repeat(5, 1fr); gap: var(--space-md); }
.process-step { padding: var(--space-lg); padding-top: var(--space-2xl); }
/* connecting line */
.process-step:not(:last-child)::after {
content: ""; position: absolute; top: calc(-1 * var(--space-md) + 22px);
left: calc(var(--space-lg) + 44px); right: calc(-1 * var(--space-md) - 1px);
height: 2px; background: var(--color-border-strong);
}
}
/* ---------------------------------------------------------------------
11. COMPARISON TABLE (unique section)
--------------------------------------------------------------------- */
.compare-wrap { overflow-x: auto; border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface); }
.compare-table { width: 100%; border-collapse: collapse; min-width: 560px; }
.compare-table caption { text-align: left; padding: var(--space-md) var(--space-lg); font-size: var(--text-sm); color: var(--color-muted); border-bottom: 1px solid var(--color-border); }
.compare-table th, .compare-table td { padding: var(--space-md) var(--space-lg); text-align: left; border-bottom: 1px solid var(--color-border); vertical-align: top; }
.compare-table thead th { font-family: var(--font-display); font-size: var(--text-sm); color: var(--color-ink); background: var(--color-surface-2); }
.compare-table thead th:last-child { background: var(--color-accent-soft); color: var(--color-accent-strong); }
.compare-table tbody th { font-weight: 600; color: var(--color-ink); width: 34%; }
.compare-table td:last-child { border-left: 2px solid var(--color-accent-soft); }
.compare-table tr:last-child td, .compare-table tr:last-child th { border-bottom: 0; }
.cmp { display: inline-flex; align-items: flex-start; gap: var(--space-xs); font-size: var(--text-sm); }
.cmp svg { width: 18px; height: 18px; flex-shrink: 0; margin-top: 2px; }
.cmp--no { color: var(--color-negative); }
.cmp--no span { color: var(--color-muted); }
.cmp--yes { color: var(--color-positive); }
.cmp--yes span { color: var(--color-text); }
/* ---------------------------------------------------------------------
12. FAQ ACCORDION (CSS /, no JS)
--------------------------------------------------------------------- */
.faq { display: grid; gap: var(--space-sm); max-width: 820px; }
.faq-item {
background: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
overflow: hidden;
}
.faq-item[open] { border-color: var(--color-border-strong); }
.faq-q {
display: flex; align-items: center; justify-content: space-between; gap: var(--space-md);
padding: var(--space-lg);
cursor: pointer; list-style: none;
font-family: var(--font-display); font-weight: 600; font-size: var(--text-lg); color: var(--color-ink);
}
.faq-q::-webkit-details-marker { display: none; }
.faq-q .faq-icon { flex-shrink: 0; width: 26px; height: 26px; position: relative; }
.faq-q .faq-icon::before, .faq-q .faq-icon::after {
content: ""; position: absolute; top: 50%; left: 50%;
width: 14px; height: 2px; background: var(--color-accent);
transform: translate(-50%, -50%); transition: transform var(--transition), opacity var(--transition);
}
.faq-q .faq-icon::after { transform: translate(-50%, -50%) rotate(90deg); }
.faq-item[open] .faq-q .faq-icon::after { opacity: 0; }
.faq-a { padding: 0 var(--space-lg) var(--space-lg); color: var(--color-muted); font-size: var(--text-base); max-width: 68ch; }
/* ---------------------------------------------------------------------
13. TESTIMONIALS (unique grid section)
--------------------------------------------------------------------- */
.testimonials { display: grid; gap: var(--space-lg); }
@media (min-width: 700px) { .testimonials { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .testimonials { grid-template-columns: repeat(3, 1fr); } }
.testimonial {
display: flex; flex-direction: column; gap: var(--space-lg);
background: var(--color-surface);
border: 1px solid var(--color-border);
border-left: 3px solid var(--color-accent);
border-radius: var(--radius-md);
padding: var(--space-xl);
}
.testimonial blockquote { font-size: var(--text-base); color: var(--color-text); line-height: 1.55; }
.testimonial-author { display: flex; align-items: center; gap: var(--space-sm); margin-top: auto; }
.avatar {
width: 46px; height: 46px; border-radius: var(--radius-pill);
display: grid; place-items: center;
font-family: var(--font-display); font-weight: 700; color: #fff; font-size: 0.95rem;
flex-shrink: 0;
}
.avatar--1 { background: linear-gradient(135deg, #E30039, #ff5d7e); }
.avatar--2 { background: linear-gradient(135deg, #127A53, #2fb37a); }
.avatar--3 { background: linear-gradient(135deg, #6a3fd1, #9f7bf0); }
.avatar--4 { background: linear-gradient(135deg, #b2603a, #e0915f); }
.avatar--5 { background: linear-gradient(135deg, #2b3950, #56688a); }
.avatar--6 { background: linear-gradient(135deg, #0f7d8c, #43b3c0); }
.testimonial-author b { display: block; color: var(--color-ink); font-size: var(--text-sm); }
.testimonial-author span { display: block; color: var(--color-muted); font-size: var(--text-xs); }
/* ---------------------------------------------------------------------
14. PULL QUOTE (single, for homepage)
--------------------------------------------------------------------- */
.pullquote { max-width: 900px; margin-inline: auto; text-align: center; }
.pullquote blockquote { font-family: var(--font-display); font-weight: 500; font-size: clamp(1.4rem, 1rem + 1.8vw, 2.1rem); line-height: 1.3; color: var(--color-ink); letter-spacing: -0.02em; }
.pullquote .testimonial-author { justify-content: center; margin-top: var(--space-xl); }
/* ---------------------------------------------------------------------
15. CTA BAND
--------------------------------------------------------------------- */
.cta-band { position: relative; overflow: hidden; }
.cta-band::before {
content: ""; position: absolute; inset: 0;
background-image:
linear-gradient(var(--color-on-ink-border) 1px, transparent 1px),
linear-gradient(90deg, var(--color-on-ink-border) 1px, transparent 1px);
background-size: 46px 46px;
-webkit-mask-image: radial-gradient(ellipse 70% 80% at 85% 30%, #000, transparent 70%);
mask-image: radial-gradient(ellipse 70% 80% at 85% 30%, #000, transparent 70%);
opacity: 0.5;
}
.cta-band .container { position: relative; }
.cta-inner { display: grid; gap: var(--space-xl); align-items: center; }
.cta-inner h2 { font-size: var(--text-3xl); color: #fff; }
.cta-inner p { color: var(--color-on-ink-muted); margin-top: var(--space-sm); font-size: var(--text-lg); max-width: 52ch; }
@media (min-width: 860px) {
.cta-inner { grid-template-columns: 1.4fr 1fr; }
.cta-inner .btn-group { justify-content: flex-end; }
}
/* ---------------------------------------------------------------------
16. PAGE HEADER (inner pages)
--------------------------------------------------------------------- */
.page-header { padding-top: clamp(40px, 5vw, 72px); padding-bottom: clamp(32px, 4vw, 56px); border-bottom: 1px solid var(--color-border); }
.page-header h1 { font-size: var(--text-4xl); margin-top: var(--space-md); }
.page-header .lead { margin-top: var(--space-lg); font-size: var(--text-lg); }
.breadcrumb { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--color-muted); text-transform: uppercase; letter-spacing: 0.06em; }
.breadcrumb a { color: var(--color-muted); }
.breadcrumb a:hover { color: var(--color-accent); }
/* ---------------------------------------------------------------------
17. BLOG
--------------------------------------------------------------------- */
.post-feature {
display: grid; gap: 0;
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
overflow: hidden;
background: var(--color-surface);
margin-bottom: var(--space-2xl);
}
.post-feature:hover { box-shadow: var(--shadow-md); }
.post-feature .post-thumb { aspect-ratio: 16/10; }
.post-feature .post-body { padding: var(--space-2xl); display: flex; flex-direction: column; gap: var(--space-md); }
.post-feature h2 { font-size: var(--text-2xl); }
@media (min-width: 860px) { .post-feature { grid-template-columns: 1.1fr 1fr; } .post-feature .post-thumb { aspect-ratio: auto; } }
.posts { display: grid; gap: var(--space-lg); }
@media (min-width: 640px) { .posts { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .posts { grid-template-columns: repeat(3, 1fr); } }
.post-card {
display: flex; flex-direction: column;
background: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
overflow: hidden;
transition: border-color var(--transition), box-shadow var(--transition);
}
.post-card:hover { border-color: var(--color-border-strong); box-shadow: var(--shadow-md); }
.post-thumb {
position: relative; aspect-ratio: 16/10; overflow: hidden;
display: grid; place-items: center;
}
.post-thumb::before {
content: ""; position: absolute; inset: 0;
background-image: linear-gradient(90deg, rgba(255,255,255,.5) 1px, transparent 1px), linear-gradient(rgba(255,255,255,.5) 1px, transparent 1px);
background-size: 26px 26px; opacity: 0.5;
}
.post-thumb .glyph { position: relative; color: rgba(15,21,34,.34); }
.post-thumb .glyph svg { width: 60px; height: 60px; }
.post-thumb--a { background: linear-gradient(135deg, #dbe2fb, #eef0ee); }
.post-thumb--b { background: linear-gradient(135deg, #d6f2e4, #eef1ec); }
.post-thumb--c { background: linear-gradient(135deg, #f7ddd6, #efeeec); }
.post-body { padding: var(--space-lg); display: flex; flex-direction: column; gap: var(--space-sm); flex: 1; }
.post-tag {
align-self: flex-start;
font-family: var(--font-mono); font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.08em;
color: var(--color-accent); background: var(--color-accent-soft);
padding: 0.35em 0.7em; border-radius: var(--radius-pill);
}
.post-body h3 { font-size: var(--text-lg); }
.post-body h2 a, .post-body h3 a { color: var(--color-ink); }
.post-body h2 a:hover, .post-body h3 a:hover { color: var(--color-accent); }
.post-excerpt { color: var(--color-muted); font-size: var(--text-sm); }
.post-meta { margin-top: auto; padding-top: var(--space-sm); font-family: var(--font-mono); font-size: var(--text-xs); color: var(--color-muted); display: flex; flex-wrap: wrap; gap: var(--space-xs); align-items: center; }
.post-meta .dot { width: 3px; height: 3px; border-radius: 50%; background: var(--color-border-strong); }
.blog-layout { display: grid; gap: var(--space-3xl); }
@media (min-width: 1000px) { .blog-layout { grid-template-columns: 1fr 300px; } }
.blog-aside { display: flex; flex-direction: column; gap: var(--space-xl); }
.aside-card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: var(--space-xl); }
.aside-card h3 { font-size: var(--text-lg); margin-bottom: var(--space-md); }
.topic-list li + li { border-top: 1px solid var(--color-border); }
.topic-list a { display: flex; justify-content: space-between; padding: 0.6em 0; color: var(--color-text); font-size: var(--text-sm); font-weight: 600; }
.topic-list a:hover { color: var(--color-accent); }
.topic-list span { font-family: var(--font-mono); color: var(--color-muted); font-weight: 400; }
/* ---------------------------------------------------------------------
18. CONTACT
--------------------------------------------------------------------- */
.contact-layout { display: grid; gap: var(--space-3xl); align-items: start; }
@media (min-width: 920px) { .contact-layout { grid-template-columns: 1fr 1.1fr; } }
.info-list { display: flex; flex-direction: column; gap: var(--space-md); margin-top: var(--space-xl); }
.info-item { display: flex; gap: var(--space-md); align-items: flex-start; padding: var(--space-lg); border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface); }
.info-item .info-icon { width: 44px; height: 44px; border-radius: var(--radius-sm); background: var(--color-accent-soft); color: var(--color-accent); display: grid; place-items: center; flex-shrink: 0; }
.info-item .info-icon svg { width: 22px; height: 22px; }
.info-item dt { font-family: var(--font-mono); font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.06em; color: var(--color-muted); }
.info-item dd { font-size: var(--text-base); color: var(--color-ink); font-weight: 600; margin-top: 2px; }
.info-item dd a { color: var(--color-ink); }
.info-item dd a:hover { color: var(--color-accent); }
.map-placeholder {
position: relative; margin-top: var(--space-xl);
aspect-ratio: 16/9; border-radius: var(--radius-md); overflow: hidden;
border: 1px solid var(--color-border);
background:
radial-gradient(circle at 60% 45%, rgba(227,0,57,.10), transparent 40%),
linear-gradient(135deg, #eef1f6, #f4f4ef);
}
.map-placeholder::before {
content: ""; position: absolute; inset: 0;
background-image: linear-gradient(var(--color-border) 1px, transparent 1px), linear-gradient(90deg, var(--color-border) 1px, transparent 1px);
background-size: 38px 38px; opacity: 0.8;
}
.map-pin { position: absolute; top: 45%; left: 60%; transform: translate(-50%, -100%); color: var(--color-accent); }
.map-pin svg { width: 40px; height: 40px; filter: drop-shadow(0 6px 10px rgba(15,21,34,.25)); }
.map-label { position: absolute; left: var(--space-md); bottom: var(--space-md); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-sm); padding: var(--space-sm) var(--space-md); font-size: var(--text-sm); box-shadow: var(--shadow-sm); }
.map-label b { display: block; color: var(--color-ink); font-family: var(--font-display); }
.map-label span { color: var(--color-muted); font-size: var(--text-xs); }
/* ---- Form ---- */
.form { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: clamp(20px, 4vw, 40px); }
.form fieldset { border: 0; padding: 0; }
.form legend { font-family: var(--font-display); font-size: var(--text-xl); color: var(--color-ink); margin-bottom: var(--space-xs); }
.form-intro { color: var(--color-muted); font-size: var(--text-sm); margin-bottom: var(--space-xl); }
.field-grid { display: grid; gap: var(--space-lg); }
@media (min-width: 600px) { .field-grid.two { grid-template-columns: 1fr 1fr; } }
.field { display: flex; flex-direction: column; gap: var(--space-xs); }
.field label { font-weight: 600; font-size: var(--text-sm); color: var(--color-ink); }
.field .req { color: var(--color-accent); }
.field .opt { font-weight: 400; color: var(--color-muted); font-size: var(--text-xs); }
.input, .textarea, .select {
width: 100%;
padding: 0.8em 0.95em;
font-size: var(--text-base);
color: var(--color-ink);
background: var(--color-bg);
border: 1.5px solid var(--color-border-strong);
border-radius: var(--radius-sm);
transition: border-color var(--transition), box-shadow var(--transition), background var(--transition);
}
.input::placeholder, .textarea::placeholder { color: #9aa1ad; }
.input:hover, .textarea:hover, .select:hover { border-color: var(--color-muted); }
.input:focus, .textarea:focus, .select:focus {
outline: none;
border-color: var(--color-accent);
background: var(--color-surface);
box-shadow: 0 0 0 3px var(--color-accent-soft);
}
.textarea { resize: vertical; min-height: 140px; }
.select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23586072' stroke-width='2' stroke-linecap='square'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 0.85em center; padding-right: 2.6em; }
/* Show invalid state only after the user interacts (no JS needed) */
.input:user-invalid, .textarea:user-invalid, .select:user-invalid { border-color: var(--color-negative); }
.field-hint { font-size: var(--text-xs); color: var(--color-muted); }
.checkbox-field { display: flex; gap: var(--space-sm); align-items: flex-start; }
.checkbox-field input { width: 1.2em; height: 1.2em; margin-top: 0.2em; accent-color: var(--color-accent); flex-shrink: 0; }
.checkbox-field label { font-weight: 400; color: var(--color-text); font-size: var(--text-sm); }
.form-actions { margin-top: var(--space-xl); display: flex; flex-wrap: wrap; gap: var(--space-md); align-items: center; }
.form-actions .field-hint { margin-left: auto; }
/* ---------------------------------------------------------------------
19. FOOTER
--------------------------------------------------------------------- */
.site-footer { background: var(--color-ink-bg); color: var(--color-on-ink); padding-top: var(--space-4xl); }
.footer-grid { display: grid; gap: var(--space-2xl); padding-bottom: var(--space-3xl); }
@media (min-width: 700px) { .footer-grid { grid-template-columns: 1.6fr 1fr 1fr; } }
@media (min-width: 1000px) { .footer-grid { grid-template-columns: 1.8fr 1fr 1fr 1.4fr; } }
.footer-brand .brand { color: #fff; }
.footer-brand .brand-mark { background: #fff; }
.footer-brand .brand-mark svg { color: var(--color-ink); }
.footer-brand .brand-name { color: #fff; }
.footer-brand .brand-name span { color: var(--color-on-ink-muted); }
.footer-brand .brand-sub { color: var(--color-on-ink-muted); }
.footer-about { margin-top: var(--space-md); color: var(--color-on-ink-muted); font-size: var(--text-sm); max-width: 40ch; }
.footer-col h4 { color: #fff; font-size: var(--text-sm); font-family: var(--font-mono); text-transform: uppercase; letter-spacing: 0.1em; font-weight: 700; margin-bottom: var(--space-md); }
.footer-col ul { display: flex; flex-direction: column; gap: var(--space-sm); }
.footer-col a { color: var(--color-on-ink-muted); font-size: var(--text-sm); }
.footer-col a:hover { color: #fff; }
.footer-contact address { font-style: normal; color: var(--color-on-ink-muted); font-size: var(--text-sm); line-height: 1.7; }
.footer-contact a { color: var(--color-on-ink); }
.footer-contact a:hover { color: #fff; }
.social { display: flex; gap: var(--space-sm); margin-top: var(--space-md); }
.social-link {
width: 42px; height: 42px; display: grid; place-items: center;
border: 1px solid var(--color-on-ink-border); border-radius: var(--radius-sm);
color: var(--color-on-ink); transition: background var(--transition), border-color var(--transition), color var(--transition);
}
.social-link:hover { background: var(--color-accent); border-color: var(--color-accent); color: #fff; }
.social-link svg { width: 20px; height: 20px; }
.footer-bottom {
border-top: 1px solid var(--color-on-ink-border);
padding-block: var(--space-lg);
display: flex; flex-wrap: wrap; gap: var(--space-md);
justify-content: space-between; align-items: center;
}
.footer-bottom p { color: var(--color-on-ink-muted); font-size: var(--text-xs); }
.footer-legal { display: flex; flex-wrap: wrap; gap: var(--space-md); }
.footer-legal a { color: var(--color-on-ink-muted); font-size: var(--text-xs); }
.footer-legal a:hover { color: #fff; }
/* ---------------------------------------------------------------------
20. MISC
--------------------------------------------------------------------- */
.pill {
display: inline-flex; align-items: center; gap: var(--space-xs);
font-family: var(--font-mono); font-size: var(--text-xs);
text-transform: uppercase; letter-spacing: 0.06em;
color: var(--color-muted);
border: 1px solid var(--color-border); border-radius: var(--radius-pill);
padding: 0.4em 0.8em; background: var(--color-surface);
}
.intro-grid { display: grid; gap: var(--space-2xl); align-items: start; }
@media (min-width: 880px) { .intro-grid { grid-template-columns: 1fr 1fr; } }
.prose p + p { margin-top: var(--space-md); }
.prose p { color: var(--color-text); }
.mt-0 { margin-top: 0; }
/* ---------------------------------------------------------------------
21. IMAGERY (real photos; swap freely)
--------------------------------------------------------------------- */
.media-panel img,
.post-thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; z-index: 1; }
.media-panel .tag { z-index: 2; }
/* Hero image on inner page headers */
.page-header-grid { display: grid; gap: var(--space-2xl); align-items: center; }
.page-hero-media { position: relative; border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--color-border); aspect-ratio: 4 / 3; box-shadow: var(--shadow-md); background: linear-gradient(135deg, var(--color-accent-soft) 0%, var(--color-surface-2) 100%); }
.page-hero-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (min-width: 880px) { .page-header-grid { grid-template-columns: 1.05fr 0.95fr; } }
/* Image that bleeds to a card's top edge */
.card-img { display: block; width: calc(100% + 2 * var(--space-xl)); height: 190px; object-fit: cover; margin: calc(-1 * var(--space-xl)) calc(-1 * var(--space-xl)) var(--space-lg); border-radius: var(--radius-md) var(--radius-md) 0 0; background: linear-gradient(135deg, var(--color-accent-soft), var(--color-surface-2)); }
/* Wide editorial image band */
.image-band { position: relative; border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--color-border); box-shadow: var(--shadow-md); aspect-ratio: 21 / 9; background: linear-gradient(135deg, var(--color-accent-soft) 0%, var(--color-surface-2) 100%); }
.image-band img { width: 100%; height: 100%; object-fit: cover; display: block; }