.mobile-nav-backdrop
.mobile-nav-panel
JS toggles .is-open on .mobile-nav and .nav-open on + .
When closed the panel is visibility:hidden, so nothing inside is
focusable - the focus trap only ever sees open content.
============================================================================= */
.nav-toggle {
display: none; /* shown at ≤1024px, see §24 */
align-items: center;
justify-content: center;
inline-size: 44px;
block-size: 44px;
padding: 0;
border: 1px solid var(--control-border);
border-radius: var(--r-sm);
background-color: transparent;
color: var(--ink);
cursor: pointer;
transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.nav-toggle:hover {
background-color: var(--tint-brand);
border-color: var(--ct-blue);
}
.nav-toggle-box {
position: relative;
inline-size: 20px;
block-size: 14px;
flex: none;
}
.nav-toggle-bar {
position: absolute;
inset-inline: 0;
block-size: 2px;
border-radius: var(--r-pill);
background-color: currentColor;
transition: transform var(--dur-slow) var(--ease), opacity var(--dur) var(--ease);
}
.nav-toggle-bar:nth-child(1) { inset-block-start: 0; }
.nav-toggle-bar:nth-child(2) { inset-block-start: 6px; }
.nav-toggle-bar:nth-child(3) { inset-block-start: 12px; }
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
.mobile-nav {
position: fixed;
inset: 0;
z-index: var(--z-drawer);
visibility: hidden;
pointer-events: none;
}
.mobile-nav.is-open {
visibility: visible;
pointer-events: auto;
}
.mobile-nav-backdrop {
position: absolute;
inset: 0;
background-color: var(--overlay);
opacity: 0;
transition: opacity var(--dur-slow) var(--ease);
-webkit-backdrop-filter: blur(2px);
backdrop-filter: blur(2px);
border: 0;
inline-size: 100%;
cursor: pointer;
}
.mobile-nav.is-open .mobile-nav-backdrop { opacity: 1; }
.mobile-nav-panel {
position: absolute;
inset-block: 0;
inset-inline-end: 0;
inline-size: min(88vw, 380px);
max-inline-size: 100%;
display: flex;
flex-direction: column;
gap: var(--space-5);
padding: var(--space-4) var(--space-5) var(--space-7);
background-color: var(--bg);
border-inline-start: 1px solid var(--border);
box-shadow: var(--shadow-lg);
overflow-y: auto;
overscroll-behavior: contain;
transform: translateX(100%);
transition: transform 260ms var(--ease);
}
.mobile-nav.is-open .mobile-nav-panel { transform: translateX(0); }
.mobile-nav-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-4);
min-block-size: var(--header-h);
}
.mobile-nav-close {
display: inline-flex;
align-items: center;
justify-content: center;
inline-size: 44px;
block-size: 44px;
padding: 0;
border: 1px solid var(--control-border);
border-radius: var(--r-sm);
background-color: transparent;
color: var(--ink);
cursor: pointer;
transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.mobile-nav-close:hover {
background-color: var(--tint-brand);
border-color: var(--ct-blue);
}
.mobile-nav-close > svg {
inline-size: 22px;
block-size: 22px;
}
.mobile-nav-list {
display: flex;
flex-direction: column;
gap: var(--space-2);
list-style: none;
margin: 0;
padding: 0;
}
.mobile-nav-link {
display: flex;
align-items: center;
min-block-size: 52px;
padding-inline: var(--space-4);
border-radius: var(--r-sm);
color: var(--ink);
font-family: var(--font-head);
font-size: 1.125rem;
font-weight: var(--fw-semi);
letter-spacing: -0.01em;
text-decoration: none;
border-inline-start: 2px solid transparent;
transition: background-color var(--dur) var(--ease),
border-color var(--dur) var(--ease),
color var(--dur) var(--ease);
}
.mobile-nav-link:hover {
background-color: var(--tint-brand);
color: var(--link-hover);
}
.mobile-nav-link.is-active,
.mobile-nav-link[aria-current="page"] {
border-inline-start-color: var(--ct-blue);
background-color: var(--tint-brand);
}
.mobile-nav-actions {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--space-3);
padding-block-start: var(--space-5);
border-block-start: 1px solid var(--border);
}
.mobile-nav-meta {
margin-block-start: auto;
padding-block-start: var(--space-5);
border-block-start: 1px solid var(--border);
font-size: var(--fs-small);
color: var(--ink-muted);
display: grid;
gap: var(--space-2);
}
.mobile-nav-meta a {
color: var(--link);
text-decoration: none;
display: inline-flex;
align-items: center;
min-block-size: 44px;
}
.mobile-nav-meta a:hover { text-decoration: underline; text-underline-offset: 3px; }
/* Scroll lock while the drawer is open ---------------------------------------
Two rules, on purpose. `html` carries `overflow-x: clip`, which stops the
body's overflow from propagating to the viewport - so `overflow: hidden` on
the body ALONE does not actually lock the page. The root has to be locked
too. Both spellings of the flag are honoured (`nav-open` on , which is
the documented contract, or on ), and no `touch-action: none` is used:
that would intersect down the ancestor chain and stop the drawer panel
itself from scrolling on a phone. `overscroll-behavior: contain` on the
panel already keeps scroll chaining out of the page. */
body.nav-open { overflow: hidden; }
:root:has(> body.nav-open) { overflow: hidden; }
:root.nav-open { overflow: hidden; }
/* =============================================================================
13 LANGUAGE TOGGLE + THEME TOGGLE
============================================================================= */
/* Segmented EL / EN control:
…
A single-button implementation (
) also works. */
.lang-toggle {
display: inline-flex;
align-items: center;
/* 8px, not 2px: each .lang-option::after extends 3px past its segment, so a
narrower gap would let the two hit areas overlap and the later-painted EN
segment would swallow the right edge of EL. */
gap: 8px;
padding: 3px;
border: 1px solid var(--control-border);
border-radius: var(--r-pill);
background-color: var(--surface-2);
}
.lang-option {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
min-inline-size: 44px;
min-block-size: 38px;
padding-inline: var(--space-3);
border: 0;
border-radius: var(--r-pill);
background-color: transparent;
color: var(--ink-muted);
font-size: var(--fs-small);
font-weight: var(--fw-semi);
letter-spacing: 0.04em;
cursor: pointer;
transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
/* The pill is 38px tall so it sits level with the 44px icon buttons beside it;
this invisible extension makes the real tap target 44×50. */
.lang-option::after {
content: "";
position: absolute;
inset: -3px;
border-radius: inherit;
}
.lang-option:hover { color: var(--ink); }
.lang-option.is-active,
.lang-option[aria-pressed="true"] {
background-color: var(--surface);
color: var(--ink);
box-shadow: var(--shadow-xs);
}
:root[data-theme="dark"] .lang-option.is-active,
:root[data-theme="dark"] .lang-option[aria-pressed="true"] { background-color: var(--surface-raised); }
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) .lang-option.is-active,
:root:not([data-theme="light"]) .lang-option[aria-pressed="true"] { background-color: var(--surface-raised); }
}
/* Single-button variant ----------------------------------------------------- */
button.lang-toggle {
min-inline-size: 52px;
min-block-size: 44px;
padding-inline: var(--space-4);
gap: var(--space-2);
color: var(--ink);
font-size: var(--fs-small);
font-weight: var(--fw-semi);
letter-spacing: 0.04em;
cursor: pointer;
transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
button.lang-toggle:hover {
background-color: var(--tint-brand);
border-color: var(--ct-blue);
}
button.lang-toggle > svg {
inline-size: 18px;
block-size: 18px;
color: var(--ink-muted);
}
/* Theme toggle - show the icon of the mode you'll switch TO ---------------- */
.theme-toggle {
display: inline-flex;
align-items: center;
justify-content: center;
inline-size: 44px;
block-size: 44px;
padding: 0;
border: 1px solid var(--control-border);
border-radius: var(--r-sm);
background-color: transparent;
color: var(--ink);
cursor: pointer;
overflow: hidden;
transition: background-color var(--dur) var(--ease),
border-color var(--dur) var(--ease),
color var(--dur) var(--ease);
}
.theme-toggle:hover {
background-color: var(--tint-brand);
border-color: var(--ct-blue);
color: var(--link-hover);
}
.theme-toggle > svg {
inline-size: 20px;
block-size: 20px;
transition: transform var(--dur-slow) var(--ease), opacity var(--dur) var(--ease);
}
/* Light mode → offer the moon. Dark mode → offer the sun. ------------------ */
.theme-icon-sun { display: none; }
.theme-icon-moon { display: block; }
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) .theme-icon-sun { display: block; }
:root:not([data-theme="light"]) .theme-icon-moon { display: none; }
}
:root[data-theme="dark"] .theme-icon-sun { display: block; }
:root[data-theme="dark"] .theme-icon-moon { display: none; }
:root[data-theme="light"] .theme-icon-sun { display: none; }
:root[data-theme="light"] .theme-icon-moon { display: block; }
/* =============================================================================
14 HERO
============================================================================= */
.hero {
position: relative;
overflow: clip; /* keeps the aurora from creating scrollbars */
padding-block: clamp(56px, 9vw, 116px) clamp(64px, 10vw, 128px);
isolation: isolate;
}
/* Decorative mesh -
--------- */
.hero-bg {
position: absolute;
inset: -20% -10% auto -10%;
block-size: 150%;
z-index: -1;
opacity: var(--aurora-opacity);
pointer-events: none;
filter: blur(72px);
background-image:
radial-gradient(38% 42% at 12% 18%, var(--aurora-cyan) 0%, transparent 70%),
radial-gradient(40% 44% at 78% 12%, var(--aurora-purple) 0%, transparent 72%),
radial-gradient(46% 46% at 58% 52%, var(--aurora-blue) 0%, transparent 70%),
radial-gradient(34% 38% at 24% 74%, var(--aurora-teal) 0%, transparent 72%);
background-repeat: no-repeat;
-webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 52%, transparent 92%);
mask-image: linear-gradient(to bottom, #000 0%, #000 52%, transparent 92%);
}
@media (prefers-reduced-motion: no-preference) {
.hero-bg { animation: ct-aurora 26s ease-in-out infinite alternate; }
}
@keyframes ct-aurora {
0% { transform: translate3d(0, 0, 0) scale(1); }
50% { transform: translate3d(-2%, 1.5%, 0) scale(1.06); }
100% { transform: translate3d(2%, -1.5%, 0) scale(1.02); }
}
/* Optional hairline grid over the aurora ----------------------------------- */
.hero-grid-lines {
position: absolute;
inset: 0;
z-index: -1;
pointer-events: none;
opacity: 0.5;
background-image:
linear-gradient(to right, var(--border) 1px, transparent 1px),
linear-gradient(to bottom, var(--border) 1px, transparent 1px);
background-size: 72px 72px;
-webkit-mask-image: radial-gradient(70% 60% at 50% 30%, #000 0%, transparent 75%);
mask-image: radial-gradient(70% 60% at 50% 30%, #000 0%, transparent 75%);
}
.hero-inner {
display: grid;
grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
align-items: center;
gap: clamp(32px, 5vw, 72px);
}
.hero-content { min-inline-size: 0; }
.hero-eyebrow {
display: inline-flex;
align-items: center;
gap: var(--space-2);
padding: 0.4em 0.9em;
border: 1px solid var(--border);
border-radius: var(--r-pill);
background-color: var(--surface);
box-shadow: var(--shadow-xs);
font-size: var(--fs-small);
font-weight: var(--fw-medium);
color: var(--ink-muted);
margin-bottom: var(--space-5);
}
.hero-eyebrow > svg {
inline-size: 16px;
block-size: 16px;
color: var(--link);
}
.hero-title {
font-size: var(--fs-h1);
line-height: 1.04;
letter-spacing: -0.03em;
margin-bottom: var(--space-5);
max-width: 16ch;
}
.hero-lead {
font-size: var(--fs-lead);
line-height: 1.6;
color: var(--ink-muted);
max-width: 54ch;
margin-bottom: var(--space-6);
}
.hero-actions {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--space-4);
margin-bottom: var(--space-6);
}
.hero-points {
display: flex;
flex-wrap: wrap;
gap: var(--space-3) var(--space-5);
list-style: none;
margin: 0;
padding: 0;
}
.hero-points li {
display: inline-flex;
align-items: center;
gap: var(--space-2);
font-size: var(--fs-small);
color: var(--ink-muted);
}
.hero-points svg {
inline-size: 18px;
block-size: 18px;
color: var(--success);
flex: none;
}
/* Credibility card beside the headline (legal identity at a glance) -------- */
.hero-aside { min-inline-size: 0; }
.hero-card {
position: relative;
padding: clamp(20px, 3vw, 32px);
border: 1px solid var(--card-border);
border-radius: var(--r-xl);
background-color: var(--card-bg);
box-shadow: var(--shadow-lg);
display: grid;
gap: var(--space-4);
}
.hero-card::before {
content: "";
position: absolute;
inset-block-start: 0;
inset-inline: clamp(20px, 3vw, 32px);
block-size: 2px;
border-radius: var(--r-pill);
background-image: var(--grad-brand);
}
.hero-card-title {
font-family: var(--font-head);
font-size: var(--fs-small);
font-weight: var(--fw-bold);
letter-spacing: var(--ls-caps);
text-transform: uppercase;
color: var(--ink-muted);
}
.hero-card-name {
font-family: var(--font-head);
font-size: 1.15rem;
font-weight: var(--fw-bold);
letter-spacing: -0.01em;
line-height: 1.35;
color: var(--ink);
}
/* =============================================================================
15 STAT STRIP
============================================================================= */
.stat-strip {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr));
gap: 1px;
border: 1px solid var(--border);
border-radius: var(--r-lg);
background-color: var(--border);
overflow: hidden;
box-shadow: var(--shadow-sm);
}
.stat {
display: flex;
flex-direction: column;
gap: var(--space-2);
padding: clamp(20px, 3vw, 30px);
background-color: var(--surface);
min-inline-size: 0;
transition: background-color var(--dur) var(--ease);
}
.stat:hover { background-color: var(--surface-2); }
.stat-icon {
inline-size: 24px;
block-size: 24px;
color: var(--link);
margin-bottom: var(--space-1);
}
.stat-value {
font-family: var(--font-head);
font-size: clamp(1.35rem, 2.2vw, 1.75rem);
font-weight: var(--fw-bold);
letter-spacing: -0.02em;
line-height: 1.2;
color: var(--ink);
}
.stat-label {
font-size: var(--fs-small);
line-height: 1.5;
color: var(--ink-muted);
}
/* =============================================================================
16 CARDS + SERVICE GRID
============================================================================= */
.card {
position: relative;
display: flex;
flex-direction: column;
gap: var(--space-3);
padding: clamp(22px, 3vw, 32px);
border: 1px solid var(--card-border);
border-radius: var(--r-lg);
background-color: var(--card-bg);
box-shadow: var(--shadow-xs);
min-inline-size: 0;
transition: transform var(--dur-slow) var(--ease),
box-shadow var(--dur-slow) var(--ease),
border-color var(--dur-slow) var(--ease);
}
.card:hover {
transform: translateY(-4px);
box-shadow: var(--shadow-md);
border-color: var(--border-strong);
}
.service-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
gap: clamp(16px, 2.2vw, 26px);
}
.service-card {
position: relative;
display: flex;
flex-direction: column;
gap: var(--space-3);
padding: clamp(22px, 3vw, 32px);
border: 1px solid var(--card-border);
border-radius: var(--r-lg);
background-color: var(--card-bg);
box-shadow: var(--shadow-xs);
overflow: hidden;
min-inline-size: 0;
transition: transform var(--dur-slow) var(--ease),
box-shadow var(--dur-slow) var(--ease),
border-color var(--dur-slow) var(--ease);
}
.service-card::after {
content: "";
position: absolute;
inset-block-start: 0;
inset-inline: 0;
block-size: 2px;
background-image: var(--grad-brand);
opacity: 0;
transition: opacity var(--dur-slow) var(--ease);
}
.service-card:hover {
transform: translateY(-6px);
box-shadow: var(--shadow-md);
border-color: var(--border-strong);
}
.service-card:hover::after,
.service-card:focus-within::after { opacity: 1; }
.service-icon {
display: inline-flex;
align-items: center;
justify-content: center;
inline-size: 48px;
block-size: 48px;
border-radius: var(--r-md);
background-color: var(--tint-brand);
color: var(--link);
margin-bottom: var(--space-2);
transition: background-color var(--dur-slow) var(--ease), color var(--dur-slow) var(--ease);
}
.service-icon > svg {
inline-size: 24px;
block-size: 24px;
}
.service-card:hover .service-icon {
background-image: var(--grad-cta);
color: #FFFFFF;
}
.service-title {
font-size: var(--fs-h3);
font-weight: var(--fw-bold);
color: var(--ink);
}
.service-text {
color: var(--ink-muted);
font-size: var(--fs-body);
line-height: 1.6;
}
.service-list {
list-style: none;
margin: var(--space-2) 0 0;
padding: 0;
display: flex;
flex-wrap: wrap;
gap: var(--space-2);
}
.service-list li {
font-size: var(--fs-small);
color: var(--ink-muted);
padding: 0.25em 0.7em;
border: 1px solid var(--border);
border-radius: var(--r-pill);
background-color: var(--surface-2);
}
/* =============================================================================
17 PROCESS TIMELINE (numbered, 4 stages)
============================================================================= */
.process-list {
position: relative;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr));
gap: clamp(24px, 3vw, 32px);
list-style: none;
margin: 0;
padding: 0;
counter-reset: ct-step;
}
.process-step {
position: relative;
display: flex;
flex-direction: column;
gap: var(--space-3);
padding-block-start: 62px; /* clears the 46px numbered disc */
min-inline-size: 0;
}
/* Horizontal connector on wide screens ------------------------------------- */
.process-step::before {
content: "";
position: absolute;
inset-block-start: 23px;
inset-inline-start: 48px;
inline-size: calc(100% + clamp(24px, 3vw, 32px) - 48px);
block-size: 2px;
background-image: linear-gradient(90deg, var(--border) 0%, var(--border) 100%);
border-radius: var(--r-pill);
}
.process-step:last-child::before { display: none; }
.process-num {
position: absolute;
inset-block-start: 0;
inset-inline-start: 0;
display: inline-flex;
align-items: center;
justify-content: center;
inline-size: 46px;
block-size: 46px;
border-radius: 50%;
background-image: var(--grad-cta);
color: #FFFFFF;
font-family: var(--font-head);
font-size: 1.05rem;
font-weight: var(--fw-bold);
line-height: 1;
box-shadow: var(--shadow-brand);
}
.process-title {
font-size: var(--fs-h3);
font-weight: var(--fw-bold);
color: var(--ink);
}
.process-text {
color: var(--ink-muted);
line-height: 1.6;
}
/* =============================================================================
18 PRICING - 3 tiers, "Pro" highlighted, prices exclude VAT
============================================================================= */
.pricing-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(100%, 290px), 1fr));
gap: clamp(18px, 2.4vw, 28px);
align-items: stretch;
}
.pricing-card {
position: relative;
display: flex;
flex-direction: column;
gap: var(--space-4);
padding: clamp(24px, 3vw, 36px);
border: 1px solid var(--card-border);
border-radius: var(--r-xl);
background-color: var(--card-bg);
box-shadow: var(--shadow-xs);
min-inline-size: 0;
transition: transform var(--dur-slow) var(--ease),
box-shadow var(--dur-slow) var(--ease),
border-color var(--dur-slow) var(--ease);
}
.pricing-card:hover {
transform: translateY(-4px);
box-shadow: var(--shadow-md);
}
/* The highlighted Pro tier -------------------------------------------------- */
.pricing-card.is-featured {
border-color: transparent;
box-shadow: var(--shadow-lg);
background-color: var(--card-bg);
}
.pricing-card.is-featured::before {
content: "";
position: absolute;
inset: 0;
border-radius: inherit;
padding: 2px;
background-image: var(--grad-brand);
-webkit-mask:
linear-gradient(#000 0 0) content-box,
linear-gradient(#000 0 0);
-webkit-mask-composite: xor;
mask:
linear-gradient(#000 0 0) content-box,
linear-gradient(#000 0 0);
mask-composite: exclude;
pointer-events: none;
}
.pricing-badge {
position: absolute;
inset-block-start: 0;
inset-inline-start: 50%;
translate: -50% -50%;
display: inline-flex;
align-items: center;
gap: var(--space-2);
padding: 0.35em 0.95em;
border-radius: var(--r-pill);
background-image: var(--grad-cta);
color: #FFFFFF;
font-size: var(--fs-small);
font-weight: var(--fw-semi);
letter-spacing: 0.02em;
white-space: nowrap;
box-shadow: var(--shadow-brand);
}
.pricing-tier {
font-family: var(--font-head);
font-size: var(--fs-h3);
font-weight: var(--fw-bold);
letter-spacing: -0.01em;
color: var(--ink);
}
.pricing-desc {
font-size: var(--fs-small);
color: var(--ink-muted);
line-height: 1.55;
}
.pricing-price {
display: flex;
align-items: baseline;
flex-wrap: wrap;
gap: var(--space-2);
padding-block: var(--space-2);
}
.pricing-from {
font-size: var(--fs-small);
font-weight: var(--fw-medium);
color: var(--ink-muted);
}
.pricing-amount {
font-family: var(--font-head);
font-size: clamp(2rem, 3.6vw, 2.75rem);
font-weight: var(--fw-black);
letter-spacing: -0.03em;
line-height: 1;
color: var(--ink);
}
.pricing-card.is-featured .pricing-amount {
background-image: var(--grad-headline);
color: var(--link);
}
@supports (-webkit-background-clip: text) or (background-clip: text) {
.pricing-card.is-featured .pricing-amount {
-webkit-background-clip: text;
background-clip: text;
color: transparent;
-webkit-text-fill-color: transparent;
}
}
.pricing-unit {
font-size: var(--fs-small);
color: var(--ink-muted);
}
.pricing-features {
list-style: none;
margin: 0;
padding: 0;
display: grid;
gap: var(--space-3);
padding-block-start: var(--space-4);
border-block-start: 1px solid var(--border);
flex: 1 1 auto;
}
.pricing-features li {
display: grid;
grid-template-columns: 20px 1fr;
align-items: start;
gap: var(--space-3);
font-size: var(--fs-small);
line-height: 1.55;
color: var(--ink-muted);
}
.pricing-features li > svg {
inline-size: 20px;
block-size: 20px;
margin-block-start: 0.1em;
color: var(--success);
}
.pricing-cta { margin-block-start: var(--space-2); }
/* The VAT note - required by BRAND.md §7 ----------------------------------- */
/* A callout that comments on the cards above it must not sit flush against them.
Scoped to direct children of .container: callouts nested inside a grid (e.g.
.identity-body) already get their spacing from that grid's gap. */
.container > .callout:not(:first-child) {
margin-block-start: clamp(28px, 3.5vw, 48px);
}
/* The VAT note + running-costs card sit BELOW the pricing cards. Without this they
collide with the card shadows (and with the featured card's gradient border). */
.pricing-footnotes {
margin-block-start: clamp(36px, 4.5vw, 64px);
align-items: start;
}
.pricing-note {
display: flex;
align-items: flex-start;
/* It shares a .grid-2 row with the taller running-costs card: sit at the top
of the row instead of stretching into a half-empty dashed panel. */
align-self: start;
gap: var(--space-3);
margin-block-start: clamp(24px, 3vw, 36px);
padding: var(--space-4) var(--space-5);
border: 1px dashed var(--border-strong);
border-radius: var(--r-md);
background-color: var(--surface-2);
font-size: var(--fs-small);
line-height: 1.6;
color: var(--ink-muted);
}
.pricing-note > svg {
inline-size: 20px;
block-size: 20px;
color: var(--link);
margin-block-start: 0.15em;
}
.pricing-extras {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
gap: var(--space-4);
margin-block-start: var(--space-5);
list-style: none;
padding: 0;
}
.pricing-extra {
display: flex;
flex-direction: column;
gap: var(--space-1);
padding: var(--space-4);
border: 1px solid var(--border);
border-radius: var(--r-md);
background-color: var(--surface);
}
.pricing-extra-label {
font-size: var(--fs-small);
color: var(--ink-muted);
}
.pricing-extra-value {
font-family: var(--font-head);
font-size: 1.0625rem;
font-weight: var(--fw-bold);
color: var(--ink);
}
/* =============================================================================
19 IDENTITY / LEGAL FACTS
Use
or a
- both are styled.
============================================================================= */
/* Prose on the left, the registry panel on the right. Collapses at 1024px. -- */
.identity-grid {
display: grid;
grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
gap: clamp(28px, 4vw, 56px);
align-items: start;
}
/* The registry table used to sit in the right-hand column. It now lives only in
the footer imprint (BRAND.md §0), so the section is a single prose column. */
.identity-grid-single {
grid-template-columns: minmax(0, 1fr);
max-inline-size: 74ch;
}
.identity-body {
display: grid;
gap: var(--space-4);
min-inline-size: 0;
}
/* The plain-language "this is who we are / what we do" paragraph. */
.identity-statement {
font-size: var(--fs-lead);
line-height: 1.6;
color: var(--ink);
max-width: 60ch;
}
/* Grid, not a plain block: .legal-name / .legal-name-alt are inline spans and
would otherwise run together on one line. Each child gets its own row. */
.facts-panel {
display: grid;
gap: var(--space-3);
padding: clamp(22px, 3vw, 36px);
border: 1px solid var(--card-border);
border-radius: var(--r-xl);
background-color: var(--card-bg);
box-shadow: var(--shadow-sm);
min-inline-size: 0;
}
.facts-panel > .table-wrap { margin-block-start: var(--space-2); }
.facts-table {
inline-size: 100%;
min-inline-size: 0;
font-size: var(--fs-small);
text-align: start;
}
.facts-table caption {
text-align: start;
font-size: var(--fs-small);
font-weight: var(--fw-semi);
color: var(--ink-muted);
padding-block-end: var(--space-3);
}
.facts-table th,
.facts-table td {
padding: var(--space-3) var(--space-4);
border-block-end: 1px solid var(--border);
vertical-align: top;
text-align: start;
line-height: 1.55;
}
.facts-table th {
inline-size: 40%;
min-inline-size: 130px;
font-weight: var(--fw-semi);
color: var(--ink-muted);
white-space: normal;
}
.facts-table td {
color: var(--ink);
font-weight: var(--fw-medium);
overflow-wrap: anywhere;
}
.facts-table tr:last-child :is(th, td) { border-block-end: 0; }
.facts-table tbody tr { transition: background-color var(--dur) var(--ease); }
.facts-table tbody tr:hover { background-color: var(--surface-2); }
/* Definition-list variant --------------------------------------------------- */
.facts-list {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
gap: var(--space-4) var(--space-6);
margin: 0;
}
.facts-list > div,
.fact {
display: flex;
flex-direction: column;
gap: var(--space-1);
min-inline-size: 0;
padding-block-end: var(--space-3);
border-block-end: 1px solid var(--border);
}
.facts-list dt,
.fact-label {
font-size: var(--fs-small);
font-weight: var(--fw-medium);
color: var(--ink-muted);
}
.facts-list dd,
.fact-value {
margin: 0;
font-size: var(--fs-body);
font-weight: var(--fw-semi);
color: var(--ink);
overflow-wrap: anywhere;
}
.fact-value a { color: var(--link); text-decoration: none; }
.fact-value a:hover { text-decoration: underline; text-underline-offset: 3px; }
.legal-name {
font-family: var(--font-head);
font-size: var(--fs-h3);
font-weight: var(--fw-bold);
letter-spacing: -0.01em;
line-height: 1.3;
color: var(--ink);
}
.legal-name-alt {
font-size: var(--fs-body);
font-weight: var(--fw-medium);
color: var(--ink-muted);
}
/* =============================================================================
20 CONTACT
============================================================================= */
.contact-grid {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 0.8fr);
gap: clamp(28px, 4vw, 56px);
align-items: start;
}
.contact-form {
padding: clamp(22px, 3vw, 36px);
border: 1px solid var(--card-border);
border-radius: var(--r-xl);
background-color: var(--card-bg);
box-shadow: var(--shadow-md);
}
.contact-details {
display: grid;
gap: var(--space-4);
min-inline-size: 0;
}
.contact-item {
display: grid;
grid-template-columns: 44px 1fr;
align-items: start;
gap: var(--space-4);
padding: var(--space-4);
border: 1px solid var(--border);
border-radius: var(--r-md);
background-color: var(--surface);
min-inline-size: 0;
transition: border-color var(--dur) var(--ease),
background-color var(--dur) var(--ease),
transform var(--dur) var(--ease);
}
.contact-item:hover {
border-color: var(--border-strong);
background-color: var(--surface-2);
}
.contact-item-icon {
display: inline-flex;
align-items: center;
justify-content: center;
inline-size: 44px;
block-size: 44px;
border-radius: var(--r-sm);
background-color: var(--tint-brand);
color: var(--link);
flex: none;
}
.contact-item-icon > svg {
inline-size: 20px;
block-size: 20px;
}
.contact-item-body {
display: flex;
flex-direction: column;
gap: 2px;
min-inline-size: 0;
}
.contact-item-label {
font-size: var(--fs-small);
color: var(--ink-muted);
}
.contact-item-value,
.contact-link {
font-size: var(--fs-body);
font-weight: var(--fw-semi);
color: var(--ink);
text-decoration: none;
overflow-wrap: anywhere;
display: inline-flex;
align-items: center;
transition: color var(--dur) var(--ease);
}
/* Tappable ones get the full 44px */
a.contact-item-value,
.contact-link {
min-block-size: 44px;
align-self: flex-start;
}
a.contact-item-value:hover,
.contact-link:hover {
color: var(--link-hover);
text-decoration: underline;
text-underline-offset: 3px;
}
.contact-note {
font-size: var(--fs-small);
color: var(--ink-muted);
line-height: 1.6;
}
/* Big centred call-to-action band ------------------------------------------ */
.cta-band {
position: relative;
overflow: clip;
padding: clamp(32px, 5vw, 64px);
border-radius: var(--r-xl);
border: 1px solid var(--card-border);
background-color: var(--surface);
box-shadow: var(--shadow-md);
text-align: center;
isolation: isolate;
}
.cta-band::before {
content: "";
position: absolute;
inset: -40% -10% auto -10%;
block-size: 160%;
z-index: -1;
opacity: 0.5;
filter: blur(70px);
pointer-events: none;
background-image:
radial-gradient(40% 50% at 20% 30%, var(--aurora-cyan) 0%, transparent 70%),
radial-gradient(44% 54% at 80% 40%, var(--aurora-purple) 0%, transparent 72%);
}
.cta-band .section-title { margin-inline: auto; }
.cta-actions {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: var(--space-4);
margin-block-start: var(--space-6);
}
/* =============================================================================
21 SITE FOOTER + IMPRINT
============================================================================= */
.site-footer {
background-color: var(--bg-subtle);
border-block-start: 1px solid var(--border);
padding-block: clamp(48px, 7vw, 80px) var(--space-6);
font-size: var(--fs-small);
color: var(--ink-muted);
}
/* Flex, not grid: repeat(auto-fit,…) cannot legally be mixed with an fr track,
and this way the footer takes any number of link columns without breaking. */
.footer-grid {
display: flex;
flex-wrap: wrap;
gap: clamp(28px, 4vw, 56px);
padding-block-end: clamp(28px, 4vw, 48px);
}
.footer-brand {
display: flex;
flex-direction: column;
gap: var(--space-4);
flex: 1 1 min(100%, 280px);
min-inline-size: 0;
max-inline-size: 42ch;
}
.footer-tagline {
color: var(--ink-muted);
line-height: 1.6;
}
.footer-col {
display: flex;
flex-direction: column;
gap: var(--space-2);
flex: 1 1 min(100%, 170px);
min-inline-size: 0;
}
.footer-heading {
font-family: var(--font-head);
font-size: var(--fs-small);
font-weight: var(--fw-bold);
letter-spacing: var(--ls-caps);
text-transform: uppercase;
color: var(--ink);
margin-bottom: var(--space-2);
}
.footer-list {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: var(--space-2); /* keeps stacked 44px targets from abutting */
}
.footer-link {
display: inline-flex;
align-items: center;
min-block-size: 44px;
min-inline-size: 44px; /* short labels still get a 44×44 target */
color: var(--ink-muted);
text-decoration: none;
overflow-wrap: anywhere;
transition: color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.footer-link:hover {
color: var(--link);
text-decoration: underline;
text-underline-offset: 3px;
}
/* The statutory imprint block ---------------------------------------------- */
.footer-imprint {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr));
gap: var(--space-4) var(--space-6);
padding-block: clamp(24px, 3vw, 36px);
border-block-start: 1px solid var(--border);
margin: 0;
}
.footer-imprint > div {
display: flex;
flex-direction: column;
gap: 2px;
min-inline-size: 0;
}
.footer-imprint dt {
font-size: var(--fs-small);
color: var(--ink-subtle);
}
.footer-imprint dd {
margin: 0;
font-size: var(--fs-small);
font-weight: var(--fw-semi);
color: var(--ink);
overflow-wrap: anywhere;
}
.footer-bottom {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: var(--space-4);
padding-block-start: var(--space-5);
border-block-start: 1px solid var(--border);
}
.footer-copy {
font-size: var(--fs-small);
color: var(--ink-muted);
}
.footer-legal-links {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--space-2) var(--space-5);
list-style: none;
margin: 0;
padding: 0;
}
/* "Back to top" - a plain in-flow link (href="#top"), never a floating widget,
so it can never cover content or trap a tap on a phone. ------------------- */
.to-top {
display: inline-flex;
align-items: center;
gap: var(--space-2);
min-block-size: 44px;
padding-inline: var(--space-3);
margin-inline-start: auto;
border-radius: var(--r-sm);
color: var(--ink-muted);
font-size: var(--fs-small);
font-weight: var(--fw-medium);
text-decoration: none;
transition: color var(--dur) var(--ease), background-color var(--dur) var(--ease);
}
.to-top:hover {
color: var(--link);
background-color: var(--tint-brand);
}
.to-top > svg {
inline-size: 16px;
block-size: 16px;
transition: transform var(--dur) var(--ease);
}
.to-top:hover > svg { transform: translateY(-2px); }
/* =============================================================================
22 LEGAL PROSE (privacy.html / terms.html)
============================================================================= */
.legal-header {
padding-block: clamp(40px, 7vw, 84px) clamp(24px, 3vw, 40px);
border-block-end: 1px solid var(--border);
}
.legal-title {
font-size: var(--fs-h2);
margin-bottom: var(--space-3);
}
.legal-updated {
font-size: var(--fs-small);
color: var(--ink-muted);
}
.legal-layout {
display: grid;
grid-template-columns: minmax(0, 240px) minmax(0, 1fr);
gap: clamp(28px, 4vw, 64px);
align-items: start;
padding-block: clamp(40px, 6vw, 72px);
}
.legal-toc {
position: sticky;
inset-block-start: calc(var(--header-h) + 24px);
padding: var(--space-5);
border: 1px solid var(--border);
border-radius: var(--r-lg);
background-color: var(--surface-2);
font-size: var(--fs-small);
min-inline-size: 0;
}
.legal-toc-title {
font-family: var(--font-head);
font-size: var(--fs-small);
font-weight: var(--fw-bold);
letter-spacing: var(--ls-caps);
text-transform: uppercase;
color: var(--ink-muted);
margin-bottom: var(--space-3);
}
.legal-toc ol,
.legal-toc ul {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: var(--space-2); /* keeps stacked 44px targets from abutting */
}
.legal-toc a {
display: flex;
align-items: center;
min-block-size: 44px;
padding-inline-start: var(--space-3);
border-inline-start: 2px solid var(--border);
color: var(--ink-muted);
text-decoration: none;
line-height: 1.4;
transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.legal-toc a:hover {
color: var(--link);
border-inline-start-color: var(--ct-blue);
}
/* Long-form prose ----------------------------------------------------------- */
.legal-prose {
max-inline-size: 74ch;
min-inline-size: 0;
font-size: var(--fs-body);
line-height: 1.75;
color: var(--ink-muted);
}
.legal-prose > * + * { margin-block-start: var(--space-4); }
.legal-prose h2 {
font-size: clamp(1.45rem, 2.6vw, 1.9rem);
color: var(--ink);
margin-block-start: var(--space-8);
padding-block-start: var(--space-2);
scroll-margin-top: calc(var(--header-h) + 24px);
}
.legal-prose h2:first-child { margin-block-start: 0; }
.legal-prose h3 {
font-size: var(--fs-h3);
color: var(--ink);
margin-block-start: var(--space-6);
scroll-margin-top: calc(var(--header-h) + 24px);
}
.legal-prose h4 {
font-size: var(--fs-h4);
color: var(--ink);
margin-block-start: var(--space-5);
}
.legal-prose p { color: var(--ink-muted); }
.legal-prose strong { color: var(--ink); font-weight: var(--fw-semi); }
.legal-prose a {
color: var(--link);
text-decoration: underline;
text-underline-offset: 3px;
text-decoration-thickness: 1px;
overflow-wrap: anywhere;
transition: color var(--dur) var(--ease);
}
.legal-prose a:hover { color: var(--link-hover); }
.legal-prose ul,
.legal-prose ol {
padding-inline-start: 1.35em;
display: grid;
gap: var(--space-2);
}
.legal-prose li { padding-inline-start: 0.2em; }
.legal-prose li::marker { color: var(--link); }
.legal-prose ul ul,
.legal-prose ol ol,
.legal-prose ul ol,
.legal-prose ol ul { margin-block-start: var(--space-2); }
.legal-prose blockquote {
margin: 0;
padding: var(--space-4) var(--space-5);
border-inline-start: 3px solid var(--ct-blue);
border-radius: 0 var(--r-sm) var(--r-sm) 0;
background-color: var(--surface-2);
color: var(--ink-muted);
}
.legal-prose table {
inline-size: 100%;
font-size: var(--fs-small);
border: 1px solid var(--border);
border-radius: var(--r-sm);
}
.legal-prose :is(th, td) {
padding: var(--space-3) var(--space-4);
border-block-end: 1px solid var(--border);
text-align: start;
vertical-align: top;
}
.legal-prose th {
background-color: var(--surface-2);
color: var(--ink);
font-weight: var(--fw-semi);
}
.legal-prose hr {
border-block-start: 1px solid var(--border);
margin-block: var(--space-6);
}
.legal-prose section + section { margin-block-start: var(--space-7); }
.legal-contact-box {
padding: var(--space-5);
border: 1px solid var(--border);
border-radius: var(--r-md);
background-color: var(--surface-2);
}
/* =============================================================================
23 ERROR PAGE (404)
============================================================================= */
.error-page {
position: relative;
overflow: clip;
display: flex;
align-items: center;
justify-content: center;
min-block-size: calc(100dvh - var(--header-h) - 120px);
padding-block: clamp(56px, 10vw, 120px);
text-align: center;
isolation: isolate;
}
.error-inner {
max-inline-size: 56ch;
margin-inline: auto;
}
.error-code {
font-family: var(--font-head);
font-size: clamp(4rem, 16vw, 9rem);
font-weight: var(--fw-black);
letter-spacing: -0.05em;
line-height: 1;
background-image: var(--grad-headline);
color: var(--link);
margin-bottom: var(--space-4);
}
@supports (-webkit-background-clip: text) or (background-clip: text) {
.error-code {
-webkit-background-clip: text;
background-clip: text;
color: transparent;
-webkit-text-fill-color: transparent;
}
}
.error-title {
font-size: var(--fs-h2);
margin-bottom: var(--space-4);
}
.error-text {
font-size: var(--fs-lead);
color: var(--ink-muted);
margin-bottom: var(--space-6);
}
.error-actions {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: var(--space-4);
}
/* =============================================================================
24 RESPONSIVE - 1024px / 768px / 480px
Nothing below declares a min-width larger than 320px, and every grid
track uses minmax(min(100%, …), 1fr), so the page can never scroll
horizontally.
============================================================================= */
@media (max-width: 1024px) {
:root { --header-h: 64px; }
/* Swap the desktop nav for the drawer */
.nav { display: none; }
.nav-toggle { display: inline-flex; }
.header-actions .header-divider { display: none; }
.hero-inner {
grid-template-columns: minmax(0, 1fr);
gap: clamp(32px, 6vw, 48px);
}
.hero-title { max-width: 20ch; }
.hero-lead { max-width: 62ch; }
.hero-aside { max-inline-size: 560px; }
.contact-grid { grid-template-columns: minmax(0, 1fr); }
.identity-grid { grid-template-columns: minmax(0, 1fr); }
.legal-layout { grid-template-columns: minmax(0, 1fr); }
.legal-toc {
position: static;
inset-block-start: auto;
}
/* .footer-grid is flex (see §21) - steer it with the basis, not with
grid-template-columns, which would be a dead declaration here. */
.footer-brand { flex-basis: min(100%, 320px); }
/* Timeline goes vertical-ish: connector only spans the row it is in */
.process-step::before { display: none; }
}
@media (max-width: 768px) {
.only-desktop { display: none !important; }
.only-mobile { display: revert; }
/* The segmented EL|EN control is too wide for a phone header - put a copy
inside .mobile-nav-actions. A single-button .lang-toggle stays visible. */
.header-actions div.lang-toggle { display: none; }
.hero { padding-block: clamp(40px, 9vw, 72px) clamp(48px, 10vw, 88px); }
.hero-title { max-width: none; }
.stat-strip { grid-template-columns: repeat(auto-fit, minmax(min(100%, 165px), 1fr)); }
.service-grid,
.pricing-grid { grid-template-columns: minmax(0, 1fr); }
.pricing-card.is-featured { order: -1; } /* Pro first on small screens */
/* Vertical timeline with a left rail */
.process-list { grid-template-columns: minmax(0, 1fr); gap: var(--space-5); }
.process-step {
padding-block-start: 0;
padding-inline-start: 64px;
min-block-size: 46px;
}
.process-step::before {
display: block;
inset-block-start: 46px;
inset-block-end: calc(-1 * var(--space-5));
inset-inline-start: 22px;
inline-size: 2px;
block-size: auto;
background-image: linear-gradient(180deg, var(--border) 0%, var(--border) 100%);
}
.process-step:last-child::before { display: none; }
.footer-bottom { justify-content: flex-start; }
.form-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 480px) {
:root {
--header-h: 60px;
--section-y: 64px;
}
.brand-mark { inline-size: 30px; block-size: 30px; }
.brand-word { block-size: 17px; }
.brand-suffix { display: none; }
/* Below 480px only the theme toggle + burger fit beside the lockup;
the language switch lives in the drawer. */
.header-actions .lang-toggle { display: none; }
.hero-title { font-size: clamp(2.1rem, 10vw, 2.75rem); }
.hero-actions { gap: var(--space-3); }
.hero-actions .btn { flex: 1 1 100%; }
/* A long Greek label on a full-width button must wrap rather than push the
layout wider than a 320px viewport. */
.btn {
white-space: normal;
text-wrap: balance;
}
.btn-lg { padding-inline: 1.4rem; }
.stat-strip { grid-template-columns: minmax(0, 1fr); }
.facts-table th { inline-size: 42%; min-inline-size: 108px; }
.facts-table :is(th, td) { padding: var(--space-3) var(--space-2); }
.facts-list { grid-template-columns: minmax(0, 1fr); }
.pricing-card,
.contact-form,
.facts-panel { padding: var(--space-5); }
.mobile-nav-panel { inline-size: 100%; }
.cta-actions .btn,
.error-actions .btn { flex: 1 1 100%; }
/* One column of everything below 480px (again: .footer-grid is flex). */
.footer-brand,
.footer-col { flex-basis: 100%; }
.footer-imprint { grid-template-columns: minmax(0, 1fr); }
}
/* =============================================================================
25 REDUCED MOTION
Everything renders in its final state, instantly. Transforms that are
structural (the drawer's translateX) are intentionally NOT zeroed -
their transitions are neutralised instead, so the drawer still opens
and closes, just without animation.
============================================================================= */
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
*,
*::before,
*::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
animation-delay: 0ms !important;
transition-duration: 0.01ms !important;
transition-delay: 0ms !important;
scroll-behavior: auto !important;
}
/* Reveals are already in place */
.reveal,
:root.js .reveal,
:root.js .reveal.is-visible {
opacity: 1 !important;
transform: none !important;
transition: none !important;
animation: none !important;
will-change: auto !important;
}
/* No decorative motion */
.hero-bg,
.cta-band::before { animation: none !important; }
/* No hover displacement */
.btn:hover,
.btn:active,
.icon-btn:active,
.card:hover,
.service-card:hover,
.pricing-card:hover,
.contact-item:hover,
.brand:active,
.footer-link:hover,
.to-top:hover > svg,
.link-arrow:hover { transform: none !important; }
.link-arrow:hover { gap: var(--space-2) !important; }
}
/* =============================================================================
26 PRINT (matters for privacy.html / terms.html and the imprint)
============================================================================= */
@media print {
:root {
--bg: #FFFFFF;
--bg-subtle: #FFFFFF;
--surface: #FFFFFF;
--surface-2: #FFFFFF;
--card-bg: #FFFFFF;
--ink: #000000;
--ink-muted: #1A1A1A;
--ink-subtle: #3A3A3A;
--border: #BBBBBB;
--border-strong: #999999;
--link: #0B1020;
}
*,
*::before,
*::after {
background: transparent !important;
box-shadow: none !important;
text-shadow: none !important;
animation: none !important;
transition: none !important;
color: #000000 !important;
}
html, body {
background: #FFFFFF !important;
font-size: 11pt;
line-height: 1.5;
}
.skip-link,
.site-header,
.nav,
.nav-toggle,
.mobile-nav,
.theme-toggle,
.lang-toggle,
.hero-bg,
.hero-grid-lines,
.cta-band::before,
.legal-toc,
.footer-legal-links,
.to-top,
.btn,
.cta-actions,
.error-actions,
.form-actions,
.contact-form { display: none !important; }
.reveal,
.reveal.is-visible { opacity: 1 !important; transform: none !important; }
.container,
.container-narrow { max-width: none; padding-inline: 0; }
.section,
.legal-header { padding-block: 12pt; }
.legal-layout {
display: block;
padding-block: 0;
}
.legal-prose { max-inline-size: none; }
.legal-prose h2,
.legal-prose h3 { break-after: avoid; page-break-after: avoid; }
.legal-prose p,
.legal-prose li,
.facts-table tr { break-inside: avoid; page-break-inside: avoid; }
/* Reveal destinations for printed links inside the legal text */
.legal-prose a[href^="http"]::after,
.legal-prose a[href^="mailto"]::after {
content: " (" attr(href) ")";
font-size: 9pt;
color: #333333 !important;
word-break: break-all;
}
.text-gradient,
.error-code,
.pricing-card.is-featured .pricing-amount {
background-image: none !important;
-webkit-text-fill-color: #000000 !important;
color: #000000 !important;
}
.identity-grid,
.contact-grid { display: block; }
.facts-panel,
.card,
.callout,
.service-card,
.pricing-card,
.stat-strip,
.stat,
.contact-item {
border: 1pt solid #BBBBBB !important;
break-inside: avoid;
page-break-inside: avoid;
}
.site-footer {
border-block-start: 1pt solid #BBBBBB !important;
padding-block: 12pt 0;
}
@page { margin: 16mm; }
}